/* ==================== 全局基础样式 ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-mixed-base); /* 使用混合字体栈 */
    font-weight: var(--font-weight-zh-regular); /* 使用中文常规字重 */
    line-height: var(--line-height-mixed); /* 使用混合行高 */
    letter-spacing: var(--letter-spacing-zh-base); /* 使用中文字距 */
}

/* 在全局重置后，确保html的字体渲染优化 */
html {
    font-size: var(--font-size-base); /* 使用变量 */
}

body::-webkit-scrollbar {
    display: none;
}

/* ==================== 主容器布局 ==================== */
.main-container {
    display: flex;
    height: 100vh;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    transition: background 0.5s ease;
}

/* ==================== 日记区域 ==================== */
.diary-section {
    flex: 0 0 61.8%;
    padding: 50px;
    background: var(--paper-color);
    position: relative;
    overflow-y: auto;
    box-shadow: inset 0 0 125px var(--paper-shadow);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    background-image: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E"),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.008) 2px, rgba(0,0,0,0.008) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.008) 2px, rgba(0,0,0,0.008) 4px),
        linear-gradient(to bottom, var(--paper-color) 0%, var(--paper-color) 100%);
}

.diary-section.whisper-mode {
    background-color: #FDFDFA;
}

/* 日记头部 */
.diary-header {
    margin-bottom: 66.555px;
    padding: 20px 25px;
    position: relative;
    background: rgba(253, 253, 245, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 3px rgba(236, 186, 110, 0.15),
        inset 0 -1px 3px rgba(238, 201, 170, 0.1),
        inset 1px 0 3px rgba(102, 94, 87, 0.08),
        inset -1px 0 3px rgba(0, 0, 0, 0.08),
        inset 0 4px 12px rgba(0, 0, 0, 0.05),
        inset 0 -2px 6px rgba(0, 0, 0, 0.03);
    transition: all 0.6s ease;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.008) 1px, rgba(0,0,0,0.008) 2px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.008) 1px, rgba(0,0,0,0.008) 2px),
        linear-gradient(to bottom, rgba(253, 253, 245, 0.95) 0%, rgba(249, 247, 242, 0.9) 100%);
}

.diary-header:hover {
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.06),
        inset 0 1px 10px rgba(236, 186, 110, 0.2),
        inset 0 -1px 4px rgba(238, 201, 170, 0.15),
        inset 1px 0 4px rgba(102, 94, 87, 0.12),
        inset -1px 0 4px rgba(0, 0, 0, 0.12),
        inset 0 6px 16px rgba(0, 0, 0, 0.08),
        inset 0 -3px 8px rgba(0, 0, 0, 0.05);
    transform: translateY(-3.6px);
}

.diary-header.whisper-mode {
    background: rgba(253, 254, 255, 0.95);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 3px rgba(110, 134, 150, 0.15),
        inset 0 -1px 3px rgba(92, 181, 223, 0.1),
        inset 1px 0 3px rgba(0, 0, 0, 0.08),
        inset -1px 0 3px rgba(0, 0, 0, 0.08),
        inset 0 4px 12px rgba(0, 0, 0, 0.05),
        inset 0 -2px 6px rgba(0, 0, 0, 0.03);
}

/* 日期信息 */
.date-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    min-height: 60px;
}

.date-primary {
    font-size: 31px;
    font-weight: 400;
    color: var(--text-primary);
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    height: 1.2em;
    line-height: 1.2em;
}

.date-secondary {
    font-size: 21px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 13.3px;
    height: 1.2em;
    line-height: 1.2em;
}

/* 日期滚动动画 */
.date-scroll-container,
.weekday-scroll-container {
    display: inline-block;
    position: relative;
    height: 1.2em;
    width: auto;
    overflow: hidden;
    vertical-align: bottom;
}

.date-digit,
.weekday-text {
    display: inline-block;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    height: 1.2em;
    line-height: 1.2em;
    white-space: nowrap;
}

.date-digit.rolling,
.weekday-text.rolling {
    transform: translateX(-100%);
}

.date-digit.new,
.weekday-text.new {
    position: absolute;
    top: 0;
    left: 100%;
}

/* 私语切换按钮 */
.whisper-toggle {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: none;
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(122, 155, 142, 0.15),
        0 2px 1px rgba(0, 0, 0, 0.03);
    color: var(--text-tertiary);
    font-family: var(--font-mixed-base);
    font-size: 19px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 12px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.whisper-toggle:hover {
    color: var(--whisper-color);
    background: rgba(154, 143, 143, 0.1);
}

.whisper-toggle.active {
    color: var(--whisper-color);
    background: rgba(118, 152, 153, 0.15);
}

.whisper-toggle.active .whisper-icon {
    transform: rotate(-15deg);
}

.whisper-icon {
    transition: transform 0.3s ease;
    font-size: 14px;
}

/* 對話區域——林正德版本 */
.conversation-area {
    position: relative;
    min-height: calc(100vh - 200px);
    padding: 0 0 calc(32px + 80px) 0;
    
    /* 雙層格線系統：主線 + 輔助線 */
    background-image: 
        /* 主要格線：0.5px 灰階，模擬鉛筆底稿的柔和感 */
        linear-gradient(to bottom, 
            rgba(0, 0, 0, 0.06) 0.5px, 
            transparent 0.5px, 
            transparent calc(100% - 0.5px), 
            rgba(0, 0, 0, 0.06) calc(100% - 0.5px)
        ),
        /* 輔助陰影線：營造紙張纖維的微妙質感 */
        linear-gradient(to bottom, 
            transparent 0, 
            rgba(0, 0, 0, 0.01) 1px, 
            transparent 2px
        );
    
    /* 針對不同語言的行距優化 */
    background-size: 
        100% var(--line-height, 32px),
        100% var(--line-height, 32px);
    
    background-position: 0 0;
    
    /* 職人手感：線條隨滾動微微淡化，模擬紙張摺痕的光影變化 */
    transition: 
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
        transform 0.3s ease, 
        background-image 0.5s ease;
}

/* 針對中文優化（1.75倍行距） */
.conversation-area[lang="zh"],
.conversation-area[lang="zh-TW"],
.conversation-area[lang="zh-CN"] {
    --line-height: 35px;
    background-size: 100% 35px, 100% 35px;
}

/* 針對日文優化（1.6倍行距，線條更細） */
.conversation-area[lang="ja"] {
    --line-height: 30px;
    background-size: 100% 30px, 100% 30px;
    background-image: 
        linear-gradient(to bottom, 
            rgba(0, 0, 0, 0.05) 0.4px, 
            transparent 0.4px
        ),
        linear-gradient(to bottom, 
            transparent 0, 
            rgba(0, 0, 0, 0.008) 1px, 
            transparent 2px
        );
}

/* 針對英文優化（1.8倍行距，線條微調） */
.conversation-area[lang="en"] {
    --line-height: 36px;
    background-size: 100% 36px, 100% 36px;
    background-image: 
        linear-gradient(to bottom, 
            rgba(0, 0, 0, 0.055) 0.5px, 
            transparent 0.5px
        ),
        linear-gradient(to bottom, 
            transparent 0, 
            rgba(0, 0, 0, 0.012) 1.5px, 
            transparent 3px
        );
}

.diary-entry {
    position: relative;
    z-index: 1;
    margin: 20px 0;
    padding: 4px 0;
    font-size: 29px;
    line-height: 30px;
}

.diary-content {
    text-align: left;
}

.diary-divider {
    height: 1px;
    background: var(--paper-line);
    margin: 24px 0;
    width: 100%;
}

.roundstone-response {
    margin: 20px 0;
    color: var(--text-secondary);
    animation: fadeInLeft 0.6s ease-out;
    font-size: 29px !important;
}

/* 私语条目 */
.whisper-entry {
    position: relative;
    z-index: 1;
    margin: 20px 0;
    padding: 4px 0;
    font-size: 25px;
    line-height: 28px;
    opacity: 0.9;
}

.whisper-content {
    text-align: left;
    color: var(--whisper-color);
    font-style: italic;
    padding-left: 10px;
    border-left-color: var(--whisper-color-light);
}

.whisper-tag {
    font-size: 25px;
    color: var(--whisper-color-light);
    margin-right: 6px;
    font-style: italic;
    vertical-align: super;
}

/* 输入区域 */
.input-area {
    position: fixed !important;
    bottom: 32px !important;
    left: 31% !important;
    transform: translateX(-50%) !important;
    width: calc(61.8% - 96px) !important;
    max-width: 800px !important;
    margin: 0 !important;
    z-index: 1000 !important;
    padding: 16px;
    background: rgba(253, 253, 245, 0.95);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 19px;
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.04),
        inset 0 1px 10px rgba(236, 186, 110, 0.1),
        inset 0 -1px 65px rgba(238, 201, 170, 0.05),
        inset 1px 0 10px rgba(102, 94, 87, 0.1),
        inset -1px 0 10px rgba(0, 0, 0, 0.10);
    transition: all 0.3s ease;
    
    /* 相对定位以便伪元素定位 */
    position: relative;
    overflow: hidden;
}

/* 输入区域的渐变光泽效果 */
.input-area::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 150%;
    background: linear-gradient(
        125deg,
        transparent 0%,
        rgba(236, 186, 110, 0.15) 70%,
        rgba(238, 201, 170, 0.1) 50%,
        rgba(102, 94, 87, 0.08) 25%,
        transparent 100%
    );
    transform: rotate(45deg) translateX(-10%);
    pointer-events: none;
    z-index: 0;
    filter: blur(20px);
    opacity: 0.4;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-area.whisper-mode {
    background: rgba(253, 254, 255, 0.95);
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.04),
        inset 0 1px 25px rgba(110, 134, 150, 0.1),
        inset 0 -1px 65px rgba(92, 181, 223, 0.05),
        inset 1px 0 20px rgba(0, 0, 0, 0.1),
        inset -1px 0 20px rgba(0, 0, 0, 0.1);
}

.input-area.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

.input-field {
    position: relative;
    z-index: 1;
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--font-mixed-base); 
    font-size: 15px;
    color: var(--text-primary);
    outline: none;
    resize: none;
    min-height: 20px;
    max-height: 100px;
    line-height: 28px;
    padding: 0;
}

.input-field::placeholder {
    color: var(--text-tertiary);
    font-style: italic;
}

.input-field.whisper-mode::placeholder {
    color: var(--whisper-color-light);
}

/* 私语模式渐变效果 */
.input-area.whisper-mode::before {
    background: linear-gradient(
        95deg,
        transparent 0%,
        rgba(110, 134, 150, 0.15) 70%,
        rgba(92, 181, 223, 0.1) 50%,
        rgba(0, 0, 0, 0.08) 25%,
        transparent 100%
    );
    filter: blur(25px);
    opacity: 0.5;
}

/* 暗夜模式渐变效果 */
body.night-mode .input-area::before {
    background: linear-gradient(
        125deg,
        transparent 0%,
        rgba(122, 155, 142, 0.15) 70%,
        rgba(99, 184, 233, 0.1) 50%,
        rgba(0, 0, 0, 0.1) 25%,
        transparent 100%
    );
    filter: blur(20px);
    opacity: 0.3;
}

/* 暗夜模式 + 私语模式渐变效果 */
body.night-mode .input-area.whisper-mode::before {
    background: linear-gradient(
        95deg,
        transparent 0%,
        rgba(139, 218, 115, 0.15) 70%,
        rgba(172, 168, 123, 0.1) 50%,
        rgba(37, 211, 164, 0.08) 25%,
        transparent 100%
    );
    filter: blur(25px);
    opacity: 0.4;
}

/* 悬停时的渐变效果增强 */
.input-area:hover::before {
    opacity: 0.6;
    filter: blur(25px);
}

/* 聚焦时的渐变效果 */
.input-area:focus-within::before {
    opacity: 0.7;
    filter: blur(30px);
    transform: rotate(45deg) translateX(-5%);
}

/* ==================== 日历区域 ==================== */
.calendar-section {
    flex: 0 0 38.2%;
    padding: 48px 32px;
    background: var(--bg-secondary);
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.1),
        0 6px 20px rgba(0, 0, 0, 0.1),
        inset -1px 0 36px rgba(0, 0, 0, 0.20),
        inset 1px 0 336px rgba(0, 0, 0, 0.20),
        inset 0 -1px 36px rgba(0, 0, 0, 0.1766);
    border-radius: 2px;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,0,0,0.008) 1px, rgba(0,0,0,0.008) 1px),
        repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(0,0,0,0.008) 2px, rgba(0,0,0,0.008) 4px),
        linear-gradient(to bottom, var(--bg-secondary) 0%, var(--bg-secondary) 100%);
}

.calendar-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
}

.calendar-month {
    font-size: 36px;
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.585s ease;
}

.calendar-month:hover {
    color: var(--stone-green);
}

.calendar-year {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.385s ease;
}

.calendar-year:hover {
    color: var(--stone-green);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--grid-line);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 40px;
}

.calendar-weekday {
    background: var(--bg-tertiary);
    padding: 12px 4px;
    text-align: center;
    font-size: 17.9px;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.5px;
}

.calendar-day {
    background: var(--bg-primary);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19.5px;
    color: var(--text-primary);
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.calendar-day:hover {
    background: var(--warm-yellow-light);
}

.calendar-day:active {
    transform: scale(0.95);
}

.calendar-day.other-month {
    color: var(--text-quaternary);
    background: var(--bg-secondary);
}

.calendar-day.today {
    background: var(--stone-green);
    color: white;
    font-weight: 500;
}

.calendar-day.has-diary::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    background: var(--today-mark);
    border-radius: 50%;
}

.calendar-day.has-whisper::before {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 4px;
    height: 4px;
    background: var(--whisper-color);
    border-radius: 50%;
}

.calendar-info {
    text-align: center;
    padding: 20px 0;
}

.day-counter,
.season-info,
.poetic-counter,
.conversation-tip,
.goodnight-message {
    font-size: 19px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-align: center;
    line-height: 1.4;
}

.poetic-counter {
    font-size: 26px;
    color: var(--text-tertiary);
    font-style: italic;
    margin-bottom: 2.5px;
}

.conversation-tip {
    font-size: 21px;
    font-style: italic;
    padding: 0 10px;
    display: none;
}

.season-info {
    font-size: 15px;
    padding: 4px 12px;
    border-radius: 12px;
    display: inline-block;
}

.goodnight-message {
    font-size: 12px;
    font-style: italic;
    margin-top: 8px;
    padding: 0 10px;
}

/* Roundstone Logo */
.roundstone-logo {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--grid-line);
    cursor: pointer;
}

.logo-text {
    font-size: 24px;
    color: var(--stone-green);
    font-weight: 300;
    letter-spacing: 2px;
}

.logo-tagline {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 4px;
    font-style: italic;
}

/* ==================== 月度视图 ==================== */
.monthly-view {
    display: none;
}

.monthly-header {
    margin-bottom: 30px;
    text-align: center;
}

.monthly-title {
    font-size: 26.5px;
    color: var(--stone-green);
    margin-bottom: 5.5px;
}

.monthly-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 56px;
}

.monthly-entries {
    margin-top: 20px;
}

.year-group {
    margin-bottom: 30px;
}

.year-title {
    font-size: 36px;
    color: var(--stone-green);
    margin-bottom: 1.5px;
    padding: 12px 20px;
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 19px;
    transition: all 0.3s ease;
}

.month-group {
    margin-bottom: 20px;
    margin-left: 20px;
}

.month-title {
    font-size: 116px;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.entry-list {
    margin-left: 95px;
}

.entry-preview {
    font-size: 19px;
    color: var(--text-primary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.entry-item:active {
    transform: translateX(4px);
}

.no-entries {
    font-style: italic;
    color: var(--text-tertiary);
    text-align: center;
    padding: 40px 0;
}

/* ==================== 欢迎界面 ==================== */
.welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #fff8e1 0%, #e4dfd2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: gentleFadeIn 0.6s ease;
    backdrop-filter: blur(8px);
}

.welcome-modal {
    background: var(--paper-color);
    border-radius: 16px;
    padding: 40px;
    max-width: 580px;
    width: 90%;
    text-align: center;
    
    /* 内部阴影效果 - 与整体设计语言一致 */
    box-shadow: 
        inset 0 0 60px var(--paper-shadow),
        inset 0 4px 8px rgba(0, 0, 0, 0.1),
        inset 0 6px 20px rgba(0, 0, 0, 0.1),
        inset -1px 0 80px rgba(0, 0, 0, 0.1),
        inset 0 -1px 80px rgba(0, 0, 0, 0.15),
        0 20px 40px rgba(0, 0, 0, 0.15);
    
    animation: gracefulRise 0.6s ease;
    border: 1px solid rgba(122, 155, 142, 0.1);
    font-family: var(--font-serif);
    max-height: 80vh;
    overflow-y: auto;
    
    /* 纸张纹理 */
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.008) 2px, rgba(0,0,0,0.008) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.008) 2px, rgba(0,0,0,0.008) 4px),
        linear-gradient(to bottom, var(--paper-color) 0%, var(--paper-color) 100%);
}

.welcome-title {
    font-size: 28px;
    color: var(--stone-green);
    margin-bottom: 24px;
    font-weight: 400;
    letter-spacing: 1px;
}

.welcome-content {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 28px;
    text-align: left;
    color: var(--text-secondary);
}

.welcome-highlight {
    background: rgba(253, 253, 245, 0.95);
    padding: 18px;
    border-radius: 12px;
    margin: 20px 0;
    
    /* 内部阴影效果 */
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(122, 155, 142, 0.1),
        0 2px 1px rgba(0, 0, 0, 0.03);
    
    border-left: 3px solid var(--stone-green);
    font-size: 13px;
    color: var(--text-secondary);
}

/* 同意按钮 - 按照 .back-button 样式重构 */
.agree-button {
    background: linear-gradient(135deg, 
        rgba(253, 253, 245, 0.9) 0%, 
        rgba(249, 247, 242, 0.8) 100%);
    color: var(--stone-green);
    border: none;
    padding: 14px 32px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
    letter-spacing: 0.5px;
    font-family: var(--font-serif);
    
    /* 内部阴影效果 - 与 .back-button 一致 */
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(122, 155, 142, 0.1),
        0 2px 1px rgba(0, 0, 0, 0.03);
}

.agree-button:hover {
    transform: translateY(-2px);
    
    /* 悬停时的内阴影增强 */
    box-shadow: 
        inset 0 1px 4px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(122, 155, 142, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.05);
    
    background: linear-gradient(135deg, 
        rgba(253, 253, 245, 0.95) 0%, 
        rgba(249, 247, 242, 0.9) 100%);
}

.agree-button:active {
    transform: translateY(0);
    
    /* 点击时的内阴影效果 */
    box-shadow: 
        inset 0 2px 6px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(122, 155, 142, 0.25);
}

/* ==================== 存储选项重构 ==================== */
.storage-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #242b3a 0%, #5f6b79 100%);
    align-items: center;
    justify-content: center;
    z-index: 1001;
    animation: gentleFadeIn 0.6s ease;
    backdrop-filter: blur(8px);
}

.storage-options {
    display: flex;
    gap: 20px;
    margin: 24px 0;
}

.storage-option {
    flex: 1;
    padding: 24px;
    border-radius: 12px;
    background: rgba(253, 253, 245, 0.95);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    
    /* 内部阴影效果 */
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(122, 155, 142, 0.1),
        0 2px 1px rgba(0, 0, 0, 0.03);
    
    border: 2px solid transparent;
}

.storage-option:hover {
    transform: translateY(-4px);
    
    /* 悬停时的内阴影增强 */
    box-shadow: 
        inset 0 1px 4px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(122, 155, 142, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.05);
    
    background: linear-gradient(135deg, 
        rgba(253, 253, 245, 0.95) 0%, 
        rgba(249, 247, 242, 0.9) 100%);
}

.storage-option.selected {
    border-color: var(--stone-green);
    background: linear-gradient(135deg, 
        rgba(122, 155, 142, 0.1) 0%, 
        rgba(122, 155, 142, 0.05) 100%);
}

.option-title {
    font-size: 16px;
    color: var(--stone-green);
    margin-bottom: 12px;
    font-weight: 500;
}

.option-desc {
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.6;
}

/* 确认存储按钮 - 按照 .back-button 样式 */
#confirmStorageButton {
    background: linear-gradient(135deg, 
        rgba(253, 253, 245, 0.9) 0%, 
        rgba(249, 247, 242, 0.8) 100%);
    color: var(--stone-green);
    border: none;
    padding: 14px 32px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
    letter-spacing: 0.5px;
    font-family: var(--font-serif);
    
    /* 内部阴影效果 */
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(122, 155, 142, 0.1),
        0 2px 1px rgba(0, 0, 0, 0.03);
}

#confirmStorageButton:hover:not(:disabled) {
    transform: translateY(-2px);
    
    /* 悬停时的内阴影增强 */
    box-shadow: 
        inset 0 1px 4px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(122, 155, 142, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.05);
    
    background: linear-gradient(135deg, 
        rgba(253, 253, 245, 0.95) 0%, 
        rgba(249, 247, 242, 0.9) 100%);
}

#confirmStorageButton:active:not(:disabled) {
    transform: translateY(0);
    
    /* 点击时的内阴影效果 */
    box-shadow: 
        inset 0 2px 6px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(122, 155, 142, 0.25);
}

#confirmStorageButton:disabled {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    cursor: not-allowed;
    box-shadow: none;
}

/* ==================== 暗夜模式适配 ==================== */
body.night-mode .welcome-overlay {
    background: linear-gradient(135deg, #242b3a 0%, #5f6b79 100%);
}

body.night-mode .welcome-modal {
    background: var(--night-paper-color);
    
    /* 暗夜模式内部阴影 */
    box-shadow: 
        inset 0 0 20px var(--night-paper-shadow),
        inset 0 4px 8px rgba(0, 0, 0, 0.15),
        inset 0 6px 20px rgba(0, 0, 0, 0.15),
        inset -1px 0 126px rgba(0, 0, 0, 0.2),
        inset 0 -1px 126px rgba(0, 0, 0, 0.25),
        0 20px 40px rgba(0, 0, 0, 0.3);
    
    /* 暗夜模式纸张纹理 */
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px),
        linear-gradient(to bottom, var(--night-paper-color) 0%, var(--night-paper-color) 100%);
}

body.night-mode .welcome-title {
    color: var(--stone-green-light);
}

body.night-mode .welcome-content {
    color: var(--night-text-secondary);
}

body.night-mode .welcome-highlight {
    background: rgba(42, 42, 42, 0.95);
    color: var(--night-text-secondary);
    
    /* 暗夜模式内部阴影 */
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(122, 155, 142, 0.15),
        0 2px 1px rgba(0, 0, 0, 0.05);
    
    border-left: 3px solid var(--stone-green-light);
}

body.night-mode .agree-button {
    background: linear-gradient(135deg, 
        rgba(42, 42, 42, 0.9) 0%, 
        rgba(37, 37, 37, 0.8) 100%);
    color: var(--stone-green-light);
    
    /* 暗夜模式内部阴影 */
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(122, 155, 142, 0.15),
        0 1px 2px rgba(0, 0, 0, 0.05);
}

body.night-mode .agree-button:hover {
    box-shadow: 
        inset 0 1px 4px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(122, 155, 142, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.08);
    
    background: linear-gradient(135deg, 
        rgba(42, 42, 42, 0.95) 0%, 
        rgba(37, 37, 37, 0.9) 100%);
}

body.night-mode .agree-button:active {
    box-shadow: 
        inset 0 2px 6px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(122, 155, 142, 0.3);
}

body.night-mode .storage-option {
    background: rgba(42, 42, 42, 0.95);
    
    /* 暗夜模式内部阴影 */
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(122, 155, 142, 0.15),
        0 2px 1px rgba(0, 0, 0, 0.05);
}

body.night-mode .storage-option:hover {
    box-shadow: 
        inset 0 1px 4px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(122, 155, 142, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.08);
    
    background: linear-gradient(135deg, 
        rgba(42, 42, 42, 0.95) 0%, 
        rgba(37, 37, 37, 0.9) 100%);
}

body.night-mode .storage-option.selected {
    border-color: var(--stone-green);
    background: linear-gradient(135deg, 
        rgba(122, 155, 142, 0.2) 0%, 
        rgba(122, 155, 142, 0.1) 100%);
}

body.night-mode .option-title {
    color: var(--stone-green-light);
}

body.night-mode .option-desc {
    color: var(--night-text-tertiary);
}

body.night-mode #confirmStorageButton {
    background: linear-gradient(135deg, 
        rgba(42, 42, 42, 0.9) 0%, 
        rgba(37, 37, 37, 0.8) 100%);
    color: var(--stone-green-light);
    
    /* 暗夜模式内部阴影 */
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(122, 155, 142, 0.15),
        0 1px 2px rgba(0, 0, 0, 0.05);
}

body.night-mode #confirmStorageButton:hover:not(:disabled) {
    box-shadow: 
        inset 0 1px 4px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(122, 155, 142, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.08);
    
    background: linear-gradient(135deg, 
        rgba(42, 42, 42, 0.95) 0%, 
        rgba(37, 37, 37, 0.9) 100%);
}

body.night-mode #confirmStorageButton:active:not(:disabled) {
    box-shadow: 
        inset 0 2px 6px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(122, 155, 142, 0.3);
}

body.night-mode #confirmStorageButton:disabled {
    background: var(--night-bg-tertiary);
    color: var(--night-text-tertiary);
}

/* ==================== 暗夜模式 ==================== */
body.night-mode {
    background: var(--night-bg-primary);
    color: var(--night-text-primary);
}

body.night-mode .main-container {
    background: linear-gradient(135deg, var(--night-bg-primary) 0%, var(--night-bg-secondary) 100%);
}

body.night-mode .diary-section {
    background: var(--night-paper-color);
    box-shadow: inset 0 0 60px var(--night-paper-shadow);
    color: var(--night-text-primary);
}

body.night-mode .diary-section.whisper-mode {
    background-color: #2A2A2A;
}

body.night-mode .diary-header {
    background: rgba(42, 42, 42, 0.95);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 3px rgba(0, 0, 0, 0.15),
        inset 0 -1px 3px rgba(122, 155, 142, 0.1),
        inset 1px 0 3px rgba(0, 0, 0, 0.12),
        inset -1px 0 3px rgba(0, 0, 0, 0.12),
        inset 0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 -2px 6px rgba(0, 0, 0, 0.08);
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.02) 1px, rgba(255,255,255,0.02) 2px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.02) 1px, rgba(255,255,255,0.02) 2px),
        linear-gradient(to bottom, rgba(42, 42, 42, 0.95) 0%, rgba(37, 37, 37, 0.9) 100%);
}

body.night-mode .diary-header:hover {
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.12),
        inset 0 1px 4px rgba(0, 0, 0, 0.2),
        inset 0 -1px 4px rgba(122, 155, 142, 0.15),
        inset 1px 0 4px rgba(0, 0, 0, 0.18),
        inset -1px 0 4px rgba(0, 0, 0, 0.18),
        inset 0 6px 16px rgba(0, 0, 0, 0.15),
        inset 0 -3px 8px rgba(0, 0, 0, 0.12);
}

body.night-mode .date-primary {
    color: var(--night-text-primary);
}

body.night-mode .date-secondary {
    color: var(--night-text-secondary);
}

body.night-mode .whisper-toggle {
    background: rgba(42, 42, 42, 0.8);
    color: var(--night-text-tertiary);
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(225, 255, 215, 0.15),
        0 2px 1px rgba(0, 0, 0, 0.05);
}

body.night-mode .whisper-toggle:hover {
    color: var(--night-whisper-color);
    background: rgba(139, 218, 115, 0.1);
}

body.night-mode .whisper-toggle.active {
    color: var(--night-whisper-color);
    background: rgba(189, 218, 180, 0.15);
}

body.night-mode .input-area {
    width: 21% !important;
    background: rgba(37, 37, 37, 0.95);
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(122, 155, 142, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.05);
}

body.night-mode .input-area.whisper-mode {
    background: rgba(42, 42, 42, 0.95);
    width: 21% !important;
    max-width: 500px !important;
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.04),
        inset 0 1px 25px rgba(139, 218, 115, 0.1),
        inset 0 -1px 65px rgba(172, 168, 123, 0.05),
        inset 1px 0 20px rgba(0, 0, 0, 0.1),
        inset -1px 0 20px rgba(0, 0, 0, 0.1);
}

body.night-mode .input-field {
    color: var(--night-text-primary);
}

body.night-mode .input-field::placeholder {
    color: var(--night-text-tertiary);
}

body.night-mode .input-field.whisper-mode {
    color: var(--night-whisper-color);
}

body.night-mode .input-field.whisper-mode::placeholder {
    color: var(--night-whisper-color-light);
}

body.night-mode .whisper-content {
    color: var(--night-whisper-color);
    border-left-color: var(--night-whisper-color-light);
}

body.night-mode .whisper-tag {
    color: var(--night-whisper-color-light);
}

body.night-mode .calendar-section {
    background: var(--night-bg-secondary);
}

body.night-mode .calendar-weekday {
    background: var(--night-bg-tertiary);
    color: var(--night-text-secondary);
}

body.night-mode .calendar-day {
    background: var(--night-bg-primary);
    color: var(--night-text-primary);
}

body.night-mode .calendar-day.other-month {
    color: var(--night-text-tertiary);
    background: var(--night-bg-secondary);
}

body.night-mode .lunar-info,
body.night-mode .day-counter,
body.night-mode .season-info,
body.night-mode .conversation-count,
body.night-mode .poetic-counter,
body.night-mode .conversation-tip,
body.night-mode .goodnight-message {
    color: var(--night-text-secondary);
    font-size: 19px;
}

body.night-mode .roundstone-response {
    color: var(--night-text-secondary);
    border-left-color: var(--stone-green);
}

body.night-mode .diary-divider {
    background: var(--night-paper-line);
}

body.night-mode .settings-title,
body.night-mode .section-title {
    color: var(--stone-green-light);
}

body.night-mode .section-title {
    border-bottom: 1px solid var(--night-paper-line);
}

body.night-mode .greeting-option {
    border: 1px solid var(--night-paper-line);
    color: var(--night-text-secondary);
}

body.night-mode .greeting-option:hover,
body.night-mode .greeting-option.selected {
    border-color: var(--stone-green);
    background: rgba(122, 155, 142, 0.1);
}

body.night-mode .private-notes {
    background: var(--night-bg-secondary);
    border-left: 3px solid var(--stone-green);
}

body.night-mode .note-input {
    background: var(--night-paper-color);
    border: 1px solid var(--night-paper-line);
    color: var(--night-text-primary);
}

body.night-mode .data-option {
    border: 1px solid var(--night-paper-line);
}

body.night-mode .data-option:hover {
    border-color: var(--stone-green);
    background: rgba(122, 155, 142, 0.05);
}

body.night-mode .option-label {
    color: var(--night-text-primary);
}

body.night-mode .delete-confirmation {
    background: var(--night-bg-tertiary);
    border-left: 3px solid var(--today-mark);
}

body.night-mode .cancel-delete {
    background: var(--night-bg-secondary);
    color: var(--night-text-secondary);
    border: 1px solid var(--night-paper-line);
}

body.night-mode .about-highlight {
    background: linear-gradient(135deg, rgba(122, 155, 142, 0.1) 0%, rgba(122, 155, 142, 0.05) 100%);
    border-left: 3px solid var(--stone-green);
}

body.night-mode .welcome-overlay {
    background: linear-gradient(135deg, #242b3a 0%, #5f6b79 100%);
}

body.night-mode .welcome-modal {
    background: linear-gradient(135deg, rgba(122, 155, 142, 0.15) 0%, rgba(35, 50, 87, 0.08) 100%);
    color: var(--night-text-primary);
    border: 1px solid rgba(122, 155, 142, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

body.night-mode .welcome-title {
    color: var(--stone-green-light);
}

body.night-mode .welcome-content {
    color: var(--night-text-secondary);
}

body.night-mode .welcome-content strong {
    color: var(--night-text-primary);
}

body.night-mode .welcome-highlight {
    background: linear-gradient(135deg, rgba(122, 155, 142, 0.15) 0%, rgba(122, 155, 142, 0.08) 100%);
    border-left: 3px solid var(--stone-green-light);
    color: var(--night-text-secondary);
}

body.night-mode .agree-button {
    background: linear-gradient(135deg, var(--stone-green) 0%, #6a8a7c 100%);
    color: white;
}

body.night-mode .agree-button:hover {
    background: linear-gradient(135deg, var(--stone-green-light) 0%, #7a9b8e 100%);
    box-shadow: 0 6px 16px rgba(122, 155, 142, 0.4);
}

body.night-mode .storage-option {
    background: var(--night-bg-secondary);
    color: rgba(2, 46, 66, 0.4);
    border: 2px solid var(--night-paper-line);
}

body.night-mode .storage-option:hover {
    border-color: var(--stone-green);
    background: rgba(122, 155, 142, 0.1);
}

body.night-mode .storage-option.selected {
    border-color: var(--stone-green);
    background: linear-gradient(135deg, rgba(122, 155, 142, 0.2) 0%, rgba(122, 155, 142, 0.1) 100%);
}

body.night-mode .option-title {
    color: var(--stone-green-light);
}

body.night-mode .option-desc {
    color: var(--night-text-tertiary);
}

body.night-mode #confirmStorageButton:disabled {
    background: var(--night-bg-tertiary);
    color: var(--night-text-tertiary);
    cursor: not-allowed;
}

body.night-mode #confirmStorageButton:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* ==================== 睡眠模式 ==================== */
.sleep-mode .diary-section {
    filter: brightness(0.8);
}

.sleep-mode .calendar-section {
    filter: brightness(0.9);
}

.sleep-indicator {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--today-mark);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    z-index: 1000;
    opacity: 0;
    animation: sleepBlink 4s ease-in-out infinite;
}

.sleep-notice {
    font-size: 19px;
    color: var(--today-mark);
    margin-bottom: 8px;
}

/* ==================== 动画效果 ==================== */
@keyframes gentleFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes gracefulRise {
    from { transform: translateY(32px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes gentleFadeOut {
    0% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(0.75);
    }
}

@keyframes breathe {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes whisperPulse {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(154, 143, 143, 0.05); }
}

/* ==================== 输入限制警告 ==================== */
.input-limit-warning {
    animation: gentleFadeIn 0.3s ease forwards;
}

.input-limit-warning.hiding {
    animation: gentleFadeOut 0.25s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

/* ==================== 打字效果 ==================== */

.typing-cursor {
    display: inline-block;
    width: 3px;  /* 細如刀鋒，像活字印刷的鉛條 */
    height: 1em;
    background-color: var(--text-secondary); /* 不搶戲，但始終在場 */
    margin-left: 2px;
    animation: blink 1s infinite; /* 心跳的節奏 */
    vertical-align: middle;
}

.typewriter-text {
    display: inline;
    /* 字與字之間的間隔必須像人在思考 */
    letter-spacing: 0.02em; /* 微小但關鍵 */
}

/* ==================== 视觉增强 ==================== */
.whisper-mode-active {
    animation: whisperPulse 2s ease-in-out;
}

.conversation-area,
.monthly-view {
    transition: opacity 0.3s ease;
}

.loading-indicator {
    display: none;
    text-align: center;
    padding: 10px;
    color: var(--text-tertiary);
    font-style: italic;
}

.entry-item {
    /* 保留现有样式 */
    margin-bottom: 5.56px;
    cursor: pointer;
    padding: 25px;
    background: rgba(253, 253, 245, 0.95);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 13.3px;
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(122, 155, 142, 0.02),
        0 2px 1px rgba(0, 0, 0, 0.03);
    transition: all 0.385s ease;
    
    /* 轻微变换+  轻微弯曲效果 ，让每个条目都有独特感 */
    opacity: 0;
    /* 弯曲效果通过 CSS 变量控制 */
    --rotate-x: 5.5deg;
    --rotate-y: 0.5deg;
    --rotation: 0deg;
    --translate-x: 0px;
    --translate-y: 0px;
    
    transform: 
        perspective(1000px) 
        rotateX(var(--rotate-x)) 
        rotateY(var(--rotate-y))
        rotate(var(--rotation)) 
        translateX(var(--translate-x)) 
        translateY(var(--translate-y));
}

/* 入场动画 */
.monthly-view.active .entry-item {
    animation: complexEntryAnimation 0.8s ease forwards;
}

@keyframes complexEntryAnimation {
    0% {
        opacity: 0;
        /* 初始状态：更强烈的变形 */
        --rotate-x: 15deg;
        --rotate-y: 5deg;
        --translate-y: 30px;
    }
    60% {
        opacity: 0.8;
        /* 中间状态：接近最终弯曲 */
        --rotate-x: 3deg;
        --rotate-y: 1deg;
        --translate-y: 5px;
    }
    100% {
        opacity: 1;
        /* 最终状态：回到原始弯曲效果 */
        --rotate-x: 10.5deg;
        --rotate-y: 0.5deg;
        --translate-y: 0px;
    }
}

/* 为不同位置的卡片添加不同的弯曲角度 */
.entry-item:nth-child(odd) {
    transform: 
        perspective(1000px)
        rotateX(1.2deg)
        rotateY(-0.8deg)
        rotate(var(--rotation, 0deg))
        translateX(var(--translate-x, 0px))
        translateY(var(--translate-y, 0px));
}

.entry-item:nth-child(even) {
    transform: 
        perspective(1000px)
        rotateX(0.8deg)
        rotateY(1.2deg)
        rotate(var(--rotation, 0deg))
        translateX(var(--translate-x, 0px))
        translateY(var(--translate-y, 0px));
}

.entry-item:nth-child(3n) {
    transform: 
        perspective(1000px)
        rotateX(-1deg)
        rotateY(-0.5deg)
        rotate(var(--rotation, 0deg))
        translateX(var(--translate-x, 0px))
        translateY(var(--translate-y, 0px));
}

/* 悬停时稍微展平 */
.entry-item:hover {
    transform: 
        perspective(1000px)
        rotateX(0.5deg)
        rotateY(0.2deg)
        translateZ(5px);
    z-index: 2;
}

/* 为不同位置的卡片添加随机圆角变化 */
.entry-item:nth-child(odd) {
    border-radius: 25px 23.3px 56px 36.3px;
}

.entry-item:nth-child(even) {
    border-radius: 35px 14px 25px 16px;
}

.entry-item:nth-child(3n) {
    border-radius: 36px 33.3px 33px 33.3px;
}

/* 悬停时恢复正常位置 */
.entry-item:hover {
    transform: rotate(0deg) translateX(0) translateY(0);
    z-index: 2;
}

/* 暗夜模式适配 */
body.night-mode .char-count-hint {
    background: rgba(37, 37, 37, 0.9);
    color: var(--night-text-tertiary);
}

/* 暗夜模式下的月度视图卡片样式 */
body.night-mode .entry-item {
    background: rgba(42, 42, 42, 0.95); /* 深色背景 */
    color: var(--night-text-primary);
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(29, 29, 29, 0.30),
        0 2px 8px rgba(0, 0, 0, 0.1);
}

body.night-mode .entry-item:hover {
    background-color: rgba(122, 155, 142, 0.15);
    border-color: var(--stone-green);
}

/* 确保月度视图中的文字颜色也适配暗夜模式 */
body.night-mode .entry-date {
    color: var(--night-text-secondary);
}

body.night-mode .entry-preview {
    color: var(--night-text-primary);
}

/* 私语条目在暗夜模式下的特殊样式 */
body.night-mode .entry-item.whisper-entry .entry-preview {
    color: var(--night-whisper-color);
}

body.night-mode .entry-item.whisper-entry::before {
    color: var(--night-whisper-color-light);
}


.entry-item:hover {
    background-color: rgba(122, 155, 142, 0.1);
}

/* 私语条目预览样式 */
.entry-item.whisper-entry .entry-preview {
    color: var(--whisper-color);
    font-style: italic;
}

.entry-item.whisper-entry::before {
    content: '♡';
    color: var(--whisper-color-light);
    margin-right: 6px;
    font-size: 12px;
}

.back-button {
    background: none;
    border: none;
    color: var(--stone-green);
    font-family: var(--font-mixed-base); 
    font-size: 19px;
    cursor: pointer;
    margin-bottom: 60px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    border-radius: 12px;
    transition: all 0.3s ease;
    
    /* 内阴影效果 - 与整体设计语言一致 */
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(122, 155, 142, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.03);
    
    /* 背景渐变 */
    background: linear-gradient(135deg, 
        rgba(253, 253, 245, 0.9) 0%, 
        rgba(249, 247, 242, 0.8) 100%);
}

.back-button:hover {
    text-decoration: underline;
    transform: translateY(-1px);
    
    /* 悬停时的内阴影增强 */
    box-shadow: 
        inset 0 1px 4px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(122, 155, 142, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.05);
    
    background: linear-gradient(135deg, 
        rgba(253, 253, 245, 0.95) 0%, 
        rgba(249, 247, 242, 0.9) 100%);
}

.back-button:active {
    transform: translateY(0);
    
    /* 点击时的内阴影效果 */
    box-shadow: 
        inset 0 2px 6px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(122, 155, 142, 0.25);
}

/* 暗夜模式适配 */
body.night-mode .back-button {
    background: linear-gradient(135deg, 
        rgba(42, 42, 42, 0.9) 0%, 
        rgba(37, 37, 37, 0.8) 100%);
    color: var(--stone-green-light);
    
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(122, 155, 142, 0.15),
        0 1px 2px rgba(0, 0, 0, 0.05);
}

body.night-mode .back-button:hover {
    box-shadow: 
        inset 0 1px 4px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(122, 155, 142, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.08);
    
    background: linear-gradient(135deg, 
        rgba(42, 42, 42, 0.95) 0%, 
        rgba(37, 37, 37, 0.9) 100%);
}

body.night-mode .back-button:active {
    box-shadow: 
        inset 0 2px 6px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(122, 155, 142, 0.3);
}

/* 私语计数提示 */
.whisper-count {
    font-size: 21px;
    color: var(--whisper-color);
    margin-bottom: 8px;
    text-align: center;
    font-style: italic;
    display: none;
    animation: gentleFadeIn 0.5s ease;
}

.whisper-count.visible {
    display: block;
}

body.night-mode .calendar-section {
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px),
        linear-gradient(to bottom, var(--night-bg-secondary) 0%, var(--night-bg-secondary) 100%);
}

.diary-section.whisper-mode {
    background-color: #FDFDFA;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(154,143,143,0.02) 2px, rgba(154,143,143,0.02) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(154,143,143,0.02) 2px, rgba(154,143,143,0.02) 4px),
        linear-gradient(to bottom, #FDFDFA 0%, #FDFDFA 100%);
}

.settings-title {
    font-size: 126px;
    color: var(--stone-green);
    font-weight: 400;
    letter-spacing: 1px;
}

.close-settings {
    background: none;
    border: none;
    font-size: 39px;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-settings:hover {
    color: var(--stone-green);
}

.settings-section {
    margin-bottom: 32px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.section-title {
    font-size: 36px;
    color: var(--stone-green);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--paper-line);
    font-weight: 400;
    
}

.greeting-options {
    display: none;
}

.greeting-option {
    padding: 16px;
    border: 1px solid var(--paper-line);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.greeting-option:hover {
    border-color: var(--stone-green);
    background: rgba(122, 155, 142, 0.05);
}

.greeting-option.selected {
    border-color: var(--stone-green);
    background: rgba(122, 155, 142, 0.1);
}

.custom-greeting {
    margin-top: 16px;
}

.custom-greeting textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--paper-line);
    border-radius: 8px;
    font-family: var(--font-journal);
    font-size: 14px;
    resize: vertical;
    min-height: 80px;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.private-notes {
    background: var(--bg-secondary);
    padding: 20px;
    border-radius: 8px;
}

.note-question {
    font-size: 26px;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-weight: 500;
}

.note-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--paper-line);
    border-radius: 8px;
    font-family: var(--font-journal);
    font-size: 14px;
    margin-bottom: 16px;
    background: var(--paper-color);
    color: var(--text-primary);
}

.privacy-notice {
    font-size: 12px;
    color: var(--text-tertiary);
    font-style: italic;
    margin-top: 8px;
}

.data-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.data-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid var(--paper-line);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.data-option:hover {
    border-color: var(--stone-green);
    background: rgba(122, 155, 142, 0.05);
}

.option-label {
    font-size: 15px;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.option-button {
    padding: 8px 16px;
    background: var(--stone-green);
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.3s ease;
}

.option-button:hover {
    background: var(--stone-green-light);
}

.delete-confirmation {
    display: none;
    background: var(--bg-tertiary);
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
    text-align: center;
    border-left: 3px solid var(--today-mark);
}

.confirmation-text {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.confirmation-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.confirmation-button {
    padding: 8px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.3s ease;
}

.confirm-delete {
    background: var(--today-mark);
    color: white;
}

.confirm-delete:hover {
    background: #c28a5f;
}

.cancel-delete {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--paper-line);
}

.cancel-delete:hover {
    background: var(--bg-tertiary);
}

.calendar-expanded .calendar-section {
    transform: translateY(0);
}

/* 全屏模式样式 */
.fullscreen-mode {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    z-index: 2000;
    display: none;
    flex-direction: row;
    overflow: hidden;
}

body.night-mode .fullscreen-mode {
    background: var(--night-bg-primary);
}

.fullscreen-left {
    width: 35%;
    padding: 40px;
    overflow-y: auto;
    background: var(--paper-color);
    position: relative;
    /* 新增：与日记视图相同的内部阴影效果 */
    box-shadow: 
        inset 0 0 35px var(--paper-shadow),
        /* 新增：更细致的内部阴影，与日记视图保持一致 */
        inset 0 4px 8px rgba(0, 0, 0, 0.1),
        inset 0 6px 20px rgba(0, 0, 0, 0.1),
        inset -1px 0 80px rgba(0, 0, 0, 0.1),
        inset 0 -1px 80px rgba(0, 0, 0, 0.15);
    border-radius: 2px;

        /* 添加纸张纹理 */
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.008) 2px, rgba(0,0,0,0.008) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.008) 2px, rgba(0,0,0,0.008) 4px),
        linear-gradient(to bottom, var(--paper-color) 0%, var(--paper-color) 100%);
}

body.night-mode .fullscreen-left {
    background: var(--night-paper-color);
    border-right-color: #373737;
    /* 暗夜模式的内部阴影 */
    
    box-shadow: 
        inset 0 0 20px var(--night-paper-shadow),
        inset 0 4px 8px rgba(0, 0, 0, 0.15),
        inset 0 6px 60px rgba(0, 0, 0, 0.15),
        inset -1px 0 126px rgba(0, 0, 0, 0.2),
        inset 0 -1px 126px rgba(0, 0, 0, 0.25);
}

.fullscreen-right {
    width: 65%;
    padding: 40px;
    overflow-y: auto;
    background: var(--paper-color);
    position: relative;
    /* 新增：与日记视图相同的内部阴影效果 */
    border-radius: 2px;

    box-shadow: 
        inset 0 0 35px var(--paper-shadow),
        /* 新增：更细致的内部阴影，与日记视图保持一致 */
        inset 0 4px 8px rgba(0, 0, 0, 0.1),
        inset 0 6px 20px rgba(0, 0, 0, 0.1),
        inset -1px 0 80px rgba(0, 0, 0, 0.1),
        inset 0 -1px 80px rgba(0, 0, 0, 0.15);

    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.008) 2px, rgba(0,0,0,0.008) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.008) 2px, rgba(0,0,0,0.008) 4px),
        linear-gradient(to bottom, var(--paper-color) 0%, var(--paper-color) 100%);
}

body.night-mode .fullscreen-right {
    background: var(--night-paper-color);
    /* 暗夜模式的内部阴影 */
    box-shadow: 
        inset 0 0 20px var(--night-paper-shadow),
        inset 0 4px 8px rgba(0, 0, 0, 0.15),
        inset 0 6x 20px rgba(0, 0, 0, 0.15),
        inset -1px 0 126px rgba(0, 0, 0, 0.2),
        inset 0 -1px 126px rgba(0, 0, 0, 0.25);
}

/* 书本夹缝渐变效果 - 更新版本 */
.fullscreen-left::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to right, 
        transparent 0%, 
        rgba(0,0,0,0.20) 100%);
    pointer-events: none;
    z-index: 1;
}

body.night-mode .fullscreen-left::after {
    background: linear-gradient(to right, 
        transparent 0%, 
        rgba(70, 70, 70, 0.25) 100%);
}

.fullscreen-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(to left, 
        transparent 0%, 
        rgba(0,0,0,0.17) 100%);
    pointer-events: none;
    z-index: 1;
}

body.night-mode .fullscreen-right::before {
    background: linear-gradient(to left, 
        transparent 0%, 
        rgba(0,0,0,0.22) 100%);
}

.fullscreen-header {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--paper-line);
}

body.night-mode .fullscreen-header {
    border-bottom-color: var(--night-paper-line);
}

.fullscreen-date {
    font-size: 16px;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

body.night-mode .fullscreen-date {
    color: var(--night-text-primary);
}

.fullscreen-title {
    font-size: 36.6px;
    color: var(--stone-green);
    margin-bottom: 10px;
}

body.night-mode .fullscreen-title {
    color: var(--stone-green-light);
}

/* 全屏内容区域样式 - 更新版本 */
.fullscreen-content {
    position: relative;
    min-height: calc(100vh - 200px);
    padding-bottom: 40px;
    background-image: 
        linear-gradient(to bottom, var(--paper-line) 1px, transparent 1px);
    background-size: 100% 28px;
    background-position: 0 0;
    transition: background-image 0.3s ease;
}

body.night-mode .fullscreen-content {
    background-image: 
        linear-gradient(to bottom, var(--night-paper-line) 1px, transparent 1px);
}

.fullscreen-exit {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--stone-green);
    font-family: var(--font-journal);
    font-size: 16px;
    cursor: pointer;
    z-index: 2010;
    padding: 8px 12px;
    transition: color 0.3s ease;
}

.fullscreen-exit:hover {
    color: var(--stone-green-light);
}

body.night-mode .fullscreen-exit {
    color: var(--stone-green-light);
}

body.night-mode .fullscreen-exit:hover {
    color: var(--stone-green);
}

/* 保持内容可滚动但隐藏滚动条 */
.diary-section, 
.calendar-section,
.fullscreen-left,
.fullscreen-right {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.diary-section::-webkit-scrollbar,
.calendar-section::-webkit-scrollbar,
.fullscreen-left::-webkit-scrollbar,
.fullscreen-right::-webkit-scrollbar {
    display: none;
}

/* 确保模态框也可以滚动但隐藏滚动条 */
.welcome-modal,
.settings-container,
.storage-modal .welcome-modal {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.welcome-modal::-webkit-scrollbar,
.settings-container::-webkit-scrollbar,
.storage-modal .welcome-modal::-webkit-scrollbar {
    display: none;
}

/* 优化：添加平滑的视图切换过渡 */
.diary-header, 
#inputArea,
#whisperToggle {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 优化：月度视图隐藏时完全隐藏，避免影响布局 */
.monthly-view {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.monthly-view.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* 优化：日常视图容器 */
.daily-view {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.daily-view.hidden {
    display: none;
    opacity: 0;
    transform: translateY(-10px);
}

/* 优化：确保对话区域有足够空间 */
.conversation-area {
    min-height: calc(100vh - 200px);
    transition: min-height 0.3s ease;
}

/* 优化：修复输入区域定位 */
.input-area {
    transition: all 0.3s ease;
}

/* 新增：消息淡入动画 */
.diary-entry, .roundstone-response, .whisper-entry {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 新增：全局视图过渡效果 */
.conversation-area, .monthly-view {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 字符计数提示样式 */
.char-count-hint {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--text-tertiary);
    background: rgba(255,255,255,0.9);
    padding: 2px 6px;
    border-radius: 8px;
    pointer-events: none;
}

/* 新增：透明隐藏效果 - 用于内容超出时 */
.diary-section {
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.1),
        0 6px 20px rgba(0, 0, 0, 0.1),
        inset -1px 0 126px rgba(0, 0, 0, 0.1355),    /* 左侧内部阴影 */
        inset 0 -1px 126px rgba(41, 40, 39, 0.357);    /* 新增：顶部内部阴影 */
    border-radius: 2px;
}

/* 白天模式 - 默认样式 */
.diary-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 75%;
    background: linear-gradient(
        125deg,
        transparent 0%,
        rgba(255 194 80 / 27%) 85%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(78, 78, 78, 0.1) 15%,
        transparent 100%
    );
    transform: rotate(365deg) translateX(-20%);
    pointer-events: none;
    z-index: 1;
    filter: blur(50px);
    opacity: 0.6;

    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 私语模式白天样式 */
.diary-section.whisper-mode::before {
    background: linear-gradient(
        95deg,
        transparent 0%,
        rgba(156, 238, 238, 0.2) 65%,  /* 使用私语主题色 */
        rgba(110, 134, 150, 0.25) 39%, /* 蓝色调 */
        rgba(255, 255, 255, 0.15) 15%,
        transparent 100%
    );
    filter: blur(60px);
    opacity: 0.5;

    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 暗夜模式样式 */
body.night-mode .diary-section::before {
    background: linear-gradient(
        95deg,
        transparent 0%,
        rgba(99, 184, 233, 0.35) 75%,  /* 使用暗夜主题的绿色 */
        rgba(221, 209, 143, 0.4) 50%,
        rgb(41 94 165 / 39.5%) 25%,
        transparent 100%
    );
    filter: blur(60px);
    opacity: 0.4;
}

/* 暗夜模式 + 私语模式样式 */
body.night-mode .diary-section.whisper-mode::before {
    background: linear-gradient(
        116deg,
        transparent 0%,
        rgba(139, 218, 115, 0.25) 65%,  /* 私语主题色 */
        rgba(172, 168, 123, 0.45) 50%,     /* 暗夜私语背景色 */
        rgba(37 211 164 / 0.1) 15%,    /* 蓝色调 */
        transparent 100%
    );
    filter: blur(55px);
    opacity: 0.35;
}

/* 月度视图时隐藏输入框 */
.monthly-view.active ~ .input-area {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

.entry-date {
    font-size: 36px;
    color: var(--text-secondary);
    margin-bottom: 5px;
    font-family: var(--font-mono);
}

/* 完全阻止水平滚动 */
body, .main-container, .diary-section, .calendar-section {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* 确保所有容器都不会导致水平滚动 */
* {
    box-sizing: border-box;
}

/* 防止移动设备上的水平滚动 */
html, body {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* 确保对话内容不会溢出 */
.conversation-area, .monthly-view, .fullscreen-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 防止输入框内容导致水平滚动 */
.input-field {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}
/* 启动界面优化 - 明夜/暗夜模式适配 */
#splashScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a; /* 默认暗色背景 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 1;
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* 明夜模式启动界面 */
body:not(.night-mode) #splashScreen {
    background: linear-gradient(135deg, #fff8e1 0%, #e4dfd2 100%);
}

/* 暗夜模式启动界面 */
body.night-mode #splashScreen {
    background: linear-gradient(135deg, #242b3a 0%, #5f6b79 100%);
}

/* 电影黑幕效果 - 明夜模式 */
body:not(.night-mode) #splashScreen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(231, 197, 134, 0.1);
    opacity: 1;
    animation: vignette 3s ease-in-out infinite alternate;
}

/* 电影黑幕效果 - 暗夜模式 */
body.night-mode #splashScreen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(42, 42, 42, 0.3);
    opacity: 1;
    animation: vignette 3s ease-in-out infinite alternate;
}

@keyframes vignette {
    0% { opacity: 0.3; }
    100% { opacity: 0.7; }
}

/* 启动界面文字样式 - 明夜模式 */
body:not(.night-mode) .splash-logo {
    background: linear-gradient(150deg, #8d6e63, #5d4037);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0;
    animation: handwriting 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 启动界面文字样式 - 暗夜模式 */
body.night-mode .splash-logo {
    background: linear-gradient(150deg, #d7ccc8, #bcaaa4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0;
    animation: handwriting 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 副标题样式 - 明夜模式 */
body:not(.night-mode) .splash-subtitle {
    background: linear-gradient(90deg, #5d4037, #8d6e63);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0;
    animation: handwriting 2.3s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}

/* 副标题样式 - 暗夜模式 */
body.night-mode .splash-subtitle {
    background: linear-gradient(90deg, #bcaaa4, #d7ccc8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0;
    animation: handwriting 2.3s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}

/* 加载动画 */
.splash-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}


@keyframes loadingBounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 手写动画效果 */
@keyframes handwriting {
    0% {
        opacity: 1;
        background-size: 0% 100%;
        background-position: 0% 50%;
        filter: blur(20px);
    }
    20% {
        filter: blur(15px);
    }
    60% {
        background-size: 100% 100%;
        background-position: 0% 50%;
    }
    80% {
        background-size: 100% 100%;
        background-position: 100% 50%;
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        background-size: 100% 100%;
        background-position: 100% 50%;
        filter: blur(0px);
        color: inherit;
        background: none;
    }
}

/* 确保启动界面内容居中 */
.splash-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.splash-logo {
    font-size: 100px;
    font-weight: 300;
    letter-spacing: 2px;
    margin-bottom: 20px;
    font-family: var(--font-serif);
}

.splash-subtitle {
    font-size: 16px;
    letter-spacing: 1px;
    margin-bottom: 40px;
    font-family: var(--font-serif);
    font-style: italic;
}

/* 淡出效果 */
#splashScreen.fade-out {
    opacity: 0;
    pointer-events: none;
}



@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* 移动端适配 */
@media (max-width: 768px) {
    .splash-logo {
        font-size: 80px;
    }
    
    .pencil-icon {
        right: -20px;
        font-size: 20px;
    }
    
    .splash-subtitle {
        font-size: 14px;
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
    .splash-logo {
        font-size: 60px;
    }
}

/* 月度视图入场动画 */
.monthly-entries {
    opacity: 0;
    animation: monthlyEntriesFadeIn 0.6s ease forwards;
}

@keyframes monthlyEntriesFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 条目从下往上入场动画 */
.entry-item {
    opacity: 0;
    transform: translateY(30px);
    animation: entryItemSlideUp 0.6s ease forwards;
}

/* 为不同条目设置延迟，创建错落有致的入场效果 */
.entry-item:nth-child(1) { animation-delay: 0.1s; }
.entry-item:nth-child(2) { animation-delay: 0.2s; }
.entry-item:nth-child(3) { animation-delay: 0.3s; }
.entry-item:nth-child(4) { animation-delay: 0.4s; }
.entry-item:nth-child(5) { animation-delay: 0.5s; }
.entry-item:nth-child(6) { animation-delay: 0.6s; }
.entry-item:nth-child(7) { animation-delay: 0.7s; }
.entry-item:nth-child(8) { animation-delay: 0.8s; }
.entry-item:nth-child(9) { animation-delay: 0.9s; }
.entry-item:nth-child(10) { animation-delay: 1.0s; }

@keyframes entryItemSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 年份和月份标题的动画 */
.year-group, .month-group {
    opacity: 0;
    transform: translateY(20px);
    animation: groupFadeIn 0.8s ease forwards;
}

.year-group { animation-delay: 0.1s; }
.month-group { animation-delay: 0.3s; }

@keyframes groupFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 月度视图切换动画 */
.monthly-view {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.monthly-view:not(.active) {
    opacity: 0;
    transform: translateY(20px);
}

.monthly-view.active {
    opacity: 1;
    transform: translateY(0);
}

.diary-section, .calendar-section {
    /* 啟用GPU加速 */
    transform: translateZ(0);
    will-change: transform;
    /* 減少重繪 */
    contain: layout style paint;
}

/* 優化動畫性能 */
.date-digit, .weekday-text {
    will-change: transform;
    transform: translateZ(0);
}

/* 书本夹缝渐变效果 */
.fullscreen-left::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to right, 
        transparent 0%, 
        rgba(0,0,0,0.20) 100%);
    pointer-events: none;
    z-index: 1;
}

body.night-mode .fullscreen-left::after {
    background: linear-gradient(to right, 
        transparent 0%, 
        rgba(70, 70, 70, 0.25) 100%);
}

.fullscreen-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(to left, 
        transparent 0%, 
        rgba(0,0,0,0.17) 100%);
    pointer-events: none;
    z-index: 1;
}

body.night-mode .fullscreen-right::before {
    background: linear-gradient(to left, 
        transparent 0%, 
        rgba(0,0,0,0.22) 100%);
}

/* 顯示動畫 */
@keyframes gentleFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.85);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

/* 關閉動畫 - 非線性縮小 */
.warning-card.hiding {
    animation: gentleFadeOut 0.25s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

@keyframes gentleFadeOut {
    0% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(0.75);
    }
}

/* 日记内容动画 */
.diary-content {
    text-align: left;
    animation: fadeInUp 0.6s ease-out;
}

/* 私语内容动画 */
.whisper-content {
    text-align: left;
    color: var(--whisper-color);
    font-style: italic;
    padding-left: 10px;
    animation: fadeInRight 0.6s ease-out;
}

/* 动画定义 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 优化后的动画 - 避免布局重排 */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    /* 使用不会引起重排的transform属性 */
    transform: translate3d(-20px, 0, 0); /* 启用GPU加速 */
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* 为动画元素启用GPU加速 */
.roundstone-response,
.diary-content,
.whisper-content {
  will-change: transform, opacity; /* 提示浏览器提前优化 */
  transform: translateZ(0); /* 强制创建独立的合成层 */
}

/* 暗夜模式下的动画优化 */
body.night-mode .roundstone-response {
  border-left-color: var(--stone-green);
  color: var(--night-text-secondary);
  /* 保持相同的布局属性 */
  animation: fadeInLeft 0.6s ease-out;
  
  /* 确保暗夜模式不会改变布局 */
  padding-left: 15px;
  margin: 20px 0;
}

/* 独立警告卡片样式 */
.warning-card {
    position: fixed;
    min-height: 120px !important; /* 增加最小高度 */
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(253, 253, 245, 0.95);
    backdrop-filter: blur(10px);
    transform: translateX(-50%) rotate(var(--tilt-angle, -3deg)) !important;
    color: var(--text-tertiary);
    padding: 16px 24px;
    border-radius: 16px;
    line-height: 1.7 !important; /* 增加行高以提高可读性 */
    font-size: 16px;
    border: none;
    display: none;
    z-index: 1001;
    max-width: 320px;
    width: max-content;
    min-width: 100px;
    word-break: break-word;
    text-align: center;
    box-shadow: 
        0 4px 20px rgba(0,0,0,0.08),
        inset 0 1px 3px rgba(236, 186, 110, 0.15),
        inset 0 -1px 2px rgba(238, 201, 170, 0.1),
        inset 1px 0 2px rgba(102, 94, 87, 0.08),
        inset -1px 0 2px rgba(0, 0, 0, 0.08);
    animation: gentleFadeIn 0.3s ease;
    line-height: 1.4;
    font-family: var(--font-journal);
}

/* 暗夜模式适配 */
body.night-mode .warning-card {
    background: rgba(37, 37, 37, 0.95);
    color: var(--night-text-tertiary);
    box-shadow: 
        0 4px 20px rgba(0,0,0,0.15),
        inset 0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 -1px 2px rgba(122, 155, 142, 0.08),
        inset 1px 0 2px rgba(0, 0, 0, 0.1),
        inset -1px 0 2px rgba(0, 0, 0, 0.1);
}

/* 私语模式适配 */
.input-area.whisper-mode ~ .warning-card {
    background: rgba(253, 254, 255, 0.95);
    box-shadow: 
        0 4px 20px rgba(0,0,0,0.08),
        inset 0 1px 3px rgba(110, 134, 150, 0.15),
        inset 0 -1px 2px rgba(92, 181, 223, 0.1),
        inset 1px 0 2px rgba(0, 0, 0, 0.08),
        inset -1px 0 2px rgba(0, 0, 0, 0.08);
}

/* 暗夜私语模式样式 */
body.night-mode .input-area.whisper-mode ~ .warning-card {
    background: rgba(42, 42, 42, 0.95);
    color: var(--night-whisper-color-light);
    box-shadow: 
        0 4px 20px rgba(0,0,0,0.15),
        inset 0 1px 3px rgba(139, 218, 115, 0.15),
        inset 0 -1px 2px rgba(172, 168, 123, 0.1),
        inset 1px 0 2px rgba(0, 0, 0, 0.1),
        inset -1px 0 2px rgba(0, 0, 0, 0.1);
}

.warning-card.empathy-warning {
    background: rgba(230, 246, 255, 0.95);
    color: #31708f;
    border-left: 3px solid #5bc0de;
}

body.night-mode .warning-card.empathy-warning {
    background: rgba(40, 60, 70, 0.95);
    color: #a5b09f;
    border-left: 3px solid #7a9b8e;
}

/* 确保在移动设备上也有合适的字体大小 */
@media (max-width: 768px) {
    .warning-card {
        font-size: 20px !important;
        max-width: 280px;
        padding: 14px 20px;
    }
}

/* 显示动画 */
@keyframes gentleFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px) scale(0.95) rotate(-2deg);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1) rotate(-2deg);
    }
}

/* 关闭动画 */
.warning-card.hiding {
    animation: gentleFadeOut 0.25s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

@keyframes gentleFadeOut {
    0% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(0.9);
    }
}

#splashScreen ~ .input-area {
    z-index: 999 !important; /* 啟動畫面顯示時降低輸入區域的 z-index */
}

/* 在 variables.css 或 style.css 中添加 */
.monthly-entries,
.conversation-area,
.settings-container,
.welcome-modal {
    contain: layout style paint;
    /* 这会创建独立的渲染层，限制重排范围 */
}

/* 为频繁更新的元素添加 */
.entry-item,
.diary-entry,
.roundstone-response {
    contain: layout;
}

/* 创建独立的合成层 */
.optimize-reflow {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;
}

/* 应用到关键元素 */
.diary-section,
.calendar-section,
.monthly-view,
.settings-modal {
    transform: translateZ(0);
}

/* 在 style.css 中添加 */
.conversation-area {
    /* 确保初始状态正确 */
    opacity: 1 !important;
    transition: opacity 0.3s ease;
}

.conversation-area.loading {
    opacity: 0;
}

.no-entries {
    /* 确保空状态样式稳定 */
    opacity: 1;
    transition: none;
    contain: layout style;
}

/* 设置模态窗口样式 */
.settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    z-index: 2000;
    display: none;
    flex-direction: row;
    overflow: hidden;
    transition: opacity 0.4s ease, transform 0.4s ease;
    /* 移除原有的背景和模糊效果 */
    backdrop-filter: none;
    background: transparent;
}

.settings-container {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    margin: 0;
    padding: 40px;
    overflow-y: auto;
    /* 移除原有的 box-shadow 和 border，改为与日记区域一致的内部阴影 */
    box-shadow: 
        /* 外部阴影保留轻微效果 */
        0 4px 12px rgba(0, 0, 0, 0.08),
        /* 内阴影效果 - 与日记区域保持一致 */
        inset 0 0 60px var(--paper-shadow),
        inset 0 4px 8px rgba(0, 0, 0, 0.1),
        inset 0 6px 20px rgba(0, 0, 0, 0.1),
        inset -1px 0 126px rgba(0, 0, 0, 0.1),
        inset 0 -1px 126px rgba(0, 0, 0, 0.2);
     /* 添加进入动画 */
    animation: settingsSlideIn 0.6s ease;
    /* 添加退出动画的过渡 */
    transition: transform 0.4s ease, opacity 0.4s ease;

        /* 添加纸张纹理 */
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.008) 2px, rgba(0,0,0,0.008) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.008) 2px, rgba(0,0,0,0.008) 4px),
        linear-gradient(to bottom, var(--bg-primary) 0%, var(--bg-primary) 100%);
    /* 移除 border */

    border: none;

}

/* 设置视图进入动画 */
.settings-modal.active {
    display: flex;
    animation: settingsSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 设置视图退出动画 */
.settings-modal.closing {
    animation: settingsSlideOut 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes settingsSlideIn {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes settingsSlideOut {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
}

/* 添加与日记区域相似的渐变光泽效果 */
.settings-container::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 75%;
    background: linear-gradient(
        125deg,
        transparent 0%,
        rgba(231, 197, 134, 0.274) 85%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(78, 78, 78, 0.1) 15%,
        transparent 100%
    );
    transform: rotate(365deg) translateX(-20%);
    pointer-events: none;
    z-index: 1;
    filter: blur(50px);
    opacity: 0.6;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 暗夜模式下的渐变光泽效果 */
body.night-mode .settings-container::before {
    background: linear-gradient(
        95deg,
        transparent 0%,
        rgba(137, 197, 231, 0.15) 95%,
        rgba(37, 37, 37, 0.4) 50%,
        rgba(0, 0, 0, 0.2) 15%,
        transparent 100%
    );
    filter: blur(60px);
    opacity: 0.4;
}

body.night-mode .settings-container {
    background: var(--night-bg-primary);
    /* 暗夜模式的内阴影 - 与暗夜模式日记区域保持一致 */
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.12),
        inset 0 0 20px var(--night-paper-shadow),
        inset 0 4px 8px rgba(0, 0, 0, 0.15),
        inset 0 6px 20px rgba(0, 0, 0, 0.15),
        inset -1px 0 126px rgba(0, 0, 0, 0.2),
        inset 0 -1px 126px rgba(0, 0, 0, 0.25);
    color: var(--night-text-primary);
    
    /* 暗夜模式纸张纹理 */
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px),
        linear-gradient(to bottom, var(--night-bg-primary) 0%, var(--night-bg-primary) 100%);
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 305px solid var(--paper-line);
}

/* 在 style.css 中添加限制定制样式 */
.warning-card.limit-warning {
    background: rgba(255, 245, 245, 0.95);
    color: #d32f2f;
    border-left: 3px solid #f44336;
    box-shadow: 
        0 4px 20px rgba(244, 67, 54, 0.15),
        inset 0 1px 3px rgba(244, 67, 54, 0.1),
        inset 0 -1px 2px rgba(244, 67, 54, 0.08),
        inset 1px 0 2px rgba(244, 67, 54, 0.1),
        inset -1px 0 2px rgba(244, 67, 54, 0.1);
}

/* 暗夜模式下的限制定制样式 */
body.night-mode .warning-card.limit-warning {
    background: rgba(70, 40, 40, 0.95);
    color: #ff8a8a;
    border-left: 3px solid #ff5252;
    box-shadow: 
        0 4px 20px rgba(255, 82, 82, 0.2),
        inset 0 1px 3px rgba(255, 82, 82, 0.15),
        inset 0 -1px 2px rgba(255, 82, 82, 0.1),
        inset 1px 0 2px rgba(255, 82, 82, 0.15),
        inset -1px 0 2px rgba(255, 82, 82, 0.15);
}

/* 暗夜模式纸张纹理 */
body.night-mode .diary-section, 
body.night-mode .fullscreen-left, 
body.night-mode .fullscreen-right {
    background-image: 
        /* 紙張躁點效果 */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.065'/%3E%3C/svg%3E"),
        linear-gradient(to bottom, var(--night-paper-color) 0%, var(--night-paper-color) 100%);
}

/* 修改文字选中颜色 */
::selection {
    background: var(--stone-green-light); /* 选中背景色 */
    color: white; /* 选中文字颜色 */
    text-shadow: none; /* 移除文字阴影 */
}

/* 针对暗夜模式的选中颜色 */
body.night-mode ::selection {
    background: var(--stone-green); /* 暗夜模式选中背景色 */
    color: var(--night-text-primary); /* 暗夜模式选中文字颜色 */
}

/* 针对私语模式的选中颜色 */
.whisper-content::selection {
    background: var(--whisper-color-light); /* 私语模式选中背景色 */
    color: var(--whisper-color); /* 私语模式选中文字颜色 */
}

/* 兼容不同浏览器的前缀 */
::-moz-selection {
    background: var(--stone-green-light);
    color: white;
    text-shadow: none;
}

body.night-mode ::-moz-selection {
    background: var(--stone-green);
    color: var(--night-text-primary);
}

.whisper-content::-moz-selection {
    background: var(--whisper-color-light);
    color: var(--whisper-color);
}

/* === 正文系統 === */
.diary-entry,
.conversation-area,
.monthly-entries,
.diary-content,
.whisper-content,
.roundstone-response,
p, article {
    font-family: var(--font-mixed-base);
    line-height: var(--line-height-mixed);
    letter-spacing: var(--letter-spacing-zh-base);
    font-weight: var(--font-weight-zh-regular);
}

/* 根據語言優化正文樣式 */
.diary-content:lang(zh-TW),
.diary-content:lang(zh-CN),
.whisper-content:lang(zh-TW),
.whisper-content:lang(zh-CN),
.roundstone-response:lang(zh-TW),
.roundstone-response:lang(zh-CN),
p:lang(zh-TW), article:lang(zh-TW),
p:lang(zh-CN), article:lang(zh-CN) {
    text-indent: 2em;
    text-align: justify;
    text-justify: inter-ideograph;
    line-height: var(--line-height-zh-base);
    letter-spacing: var(--letter-spacing-zh-base);
    font-weight: var(--font-weight-zh-regular);
}

.diary-content:lang(ja),
.whisper-content:lang(ja),
.roundstone-response:lang(ja),
p:lang(ja), article:lang(ja) {
    text-indent: 1em;
    text-align: justify;
    line-height: var(--line-height-ja-base);
    letter-spacing: var(--letter-spacing-ja-base);
    font-weight: var(--font-weight-ja-regular);
    font-feature-settings: "palt" 1, "pkna" 1;
}

.diary-content:lang(en),
.whisper-content:lang(en),
.roundstone-response:lang(en),
p:lang(en), article:lang(en) {
    text-indent: 0;
    text-align: left;
    line-height: var(--line-height-en-base);
    letter-spacing: var(--letter-spacing-en-base);
    font-weight: var(--font-weight-en-regular);
    font-feature-settings: "liga" 1, "kern" 1;
}

/* === 標題系統 === */
h1, h2, h3, h4, h5, h6,
.entry-title,
.diary-header,
.settings-title {
    font-family: var(--font-mixed-base);
    font-weight: var(--font-weight-zh-medium);
    line-height: 1.3; /* 标题可以使用固定行高 */
    margin-bottom: var(--spacing-md); /* 使用间距变量 */
}

/* 英文標題 */
h1:lang(en), h2:lang(en), h3:lang(en),
h4:lang(en), h5:lang(en), h6:lang(en),
.entry-title:lang(en),
.diary-header:lang(en) {
    font-family: var(--font-en-display);
    font-weight: var(--font-weight-en-medium);
    letter-spacing: var(--letter-spacing-en-tight);
    line-height: var(--line-height-en-tight);
}

/* 中文（繁體）標題 */
h1:lang(zh-TW), h2:lang(zh-TW), h3:lang(zh-TW),
.entry-title:lang(zh-TW),
.diary-header:lang(zh-TW) {
    font-weight: var(--font-weight-zh-medium);
    letter-spacing: var(--letter-spacing-zh-relaxed);
    line-height: var(--line-height-zh-tight);
}

/* 中文（簡體）標題 */
h1:lang(zh-CN), h2:lang(zh-CN), h3:lang(zh-CN),
.entry-title:lang(zh-CN),
.diary-header:lang(zh-CN) {
    font-weight: var(--font-weight-zh-medium);
    letter-spacing: var(--letter-spacing-zh-relaxed);
    line-height: var(--line-height-zh-tight);
}

/* 日文標題 */
h1:lang(ja), h2:lang(ja), h3:lang(ja),
.entry-title:lang(ja),
.diary-header:lang(ja) {
    font-family: var(--font-ja-display);
    font-weight: var(--font-weight-ja-medium);
    letter-spacing: var(--letter-spacing-ja-relaxed);
    line-height: var(--line-height-ja-tight);
}

/* === 正文系統 === */
.diary-entry,
.conversation-area,
.monthly-entries,
.diary-content,
.whisper-content,
.roundstone-response,
p, article {
    font-family: var(--font-mixed-base);
    line-height: var(--line-height-mixed);
    letter-spacing: var(--letter-spacing-zh-base);
    font-weight: var(--font-weight-zh-regular);
}

/* 根據語言優化正文樣式 */
.diary-content:lang(zh-TW),
.diary-content:lang(zh-CN),
.whisper-content:lang(zh-TW),
.whisper-content:lang(zh-CN),
.roundstone-response:lang(zh-TW),
.roundstone-response:lang(zh-CN),
p:lang(zh-TW), article:lang(zh-TW),
p:lang(zh-CN), article:lang(zh-CN) {
    text-indent: 2em;
    text-align: justify;
    text-justify: inter-ideograph;
    line-height: var(--line-height-zh-base);
    letter-spacing: var(--letter-spacing-zh-base);
    font-weight: var(--font-weight-zh-regular);
}

.diary-content:lang(ja),
.whisper-content:lang(ja),
.roundstone-response:lang(ja),
p:lang(ja), article:lang(ja) {
    text-indent: 1em;
    text-align: justify;
    line-height: var(--line-height-ja-base);
    letter-spacing: var(--letter-spacing-ja-base);
    font-weight: var(--font-weight-ja-regular);
    font-feature-settings: "palt" 1, "pkna" 1;
}

.diary-content:lang(en),
.whisper-content:lang(en),
.roundstone-response:lang(en),
p:lang(en), article:lang(en) {
    text-indent: 0;
    text-align: left;
    line-height: var(--line-height-en-base);
    letter-spacing: var(--letter-spacing-en-base);
    font-weight: var(--font-weight-en-regular);
    font-feature-settings: "liga" 1, "kern" 1;
}

/* 日期信息 */
.date-primary {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-en-regular);
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.date-secondary {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    font-weight: var(--font-weight-zh-regular);
}

/* 日曆相關 */
.calendar-month {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-en-light);
    letter-spacing: var(--letter-spacing-en-base);
}

.calendar-year {
    font-size: var(--font-size-sm);
    font-family: var(--font-mono);
    letter-spacing: var(--letter-spacing-en-base);
}

.calendar-weekday {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-zh-medium);
    letter-spacing: var(--letter-spacing-zh-base);
}

.calendar-day {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-zh-regular);
}

/* 输入区域 */
.input-field {
    font-family: var(--font-mixed-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-mixed);
    letter-spacing: var(--letter-spacing-zh-base);
}

/* 根据语言优化输入框 */
.input-field:lang(en) {
    font-family: var(--font-en-base);
    letter-spacing: var(--letter-spacing-en-base);
    line-height: var(--line-height-en-base);
}

.input-field:lang(zh-TW),
.input-field:lang(zh-CN) {
    font-family: var(--font-zh-tw-base);
    letter-spacing: var(--letter-spacing-zh-base);
    line-height: var(--line-height-zh-base);
}

.input-field:lang(ja) {
    font-family: var(--font-ja-base);
    letter-spacing: var(--letter-spacing-ja-base);
    line-height: var(--line-height-ja-base);
}

/* 月度视图 */
.year-title {
    font-size: var(--font-size-3xl);
    color: var(--stone-green);
    font-weight: var(--font-weight-zh-medium);
    padding: var(--spacing-sm) var(--spacing-lg);
}

.month-title {
    font-size: var(--font-size-4xl);
    color: var(--text-primary);
    font-weight: var(--font-weight-zh-bold);
    margin-bottom: var(--spacing-md);
}

.entry-date {
    font-size: var(--font-size-3xl);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    margin-bottom: var(--spacing-xs);
}

.entry-preview {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    line-height: var(--line-height-mixed);
    -webkit-line-clamp: 2;
}

/* 设置页面 */
.settings-title {
    font-size: var(--font-size-4xl);
    color: var(--stone-green);
    font-weight: var(--font-weight-zh-medium);
    letter-spacing: var(--letter-spacing-zh-base);
    margin-bottom: var(--spacing-lg);
}

.section-title {
    font-size: var(--font-size-xl);
    color: var(--stone-green);
    font-weight: var(--font-weight-zh-medium);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--paper-line);
}

.option-label {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: var(--font-weight-zh-regular);
}

.note-question {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-weight: var(--font-weight-zh-medium);
    margin-bottom: var(--spacing-sm);
}

.confirmation-text {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: var(--line-height-mixed);
    margin-bottom: var(--spacing-md);
}

/* 使用CSS变量定义动画时间 */
.entry-item,
.diary-entry,
.roundstone-response,
.whisper-entry {
    transition: all var(--transition-base);
}

.entry-item:hover {
    transition: all var(--transition-fast);
}

.diary-header:hover {
    transition: all var(--transition-slow);
}

/* 动画关键帧优化 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* 应用动画 */
.diary-content,
.whisper-content {
    animation: fadeIn var(--transition-base) ease;
}

.entry-item {
    animation: slideIn var(--transition-slow) ease;
}

/* ============================================
   CSS 變量擴充包 - 充分應用 variables.css 的特性
   讓設計系統的價值最大化
   ============================================ */

/* 1. 文學經典風格完整應用 */
.dazai-style {
    font-family: var(--font-ja-classic) !important;
    font-weight: var(--dazai-font-weight) !important;
    line-height: var(--dazai-line-height) !important;
    letter-spacing: var(--dazai-letter-spacing) !important;
    margin-bottom: var(--dazai-paragraph-spacing);
    text-indent: 1em;
    text-align: justify;
    text-justify: inter-ideograph;
    widows: 2;
    orphans: 2;
    font-feature-settings: "palt" 1, "pkna" 1;
    color: #3a3a3a;
}

.dazai-style h1,
.dazai-style h2,
.dazai-style h3 {
    font-weight: var(--font-weight-cjk-heading) !important;
    line-height: 1.6;
    letter-spacing: 0.1em;
    margin-top: 2em;
    margin-bottom: 1em;
    text-align: center;
}

/* 2. 中文字體經典版應用 */
.classic-chinese-typography {
    font-family: var(--font-zh-tw-classic) !important;
    font-weight: var(--font-weight-cjk-print) !important;
    line-height: var(--line-height-zh-relaxed);
    letter-spacing: var(--letter-spacing-zh-base);
    text-indent: 2em;
    text-align: justify;
    text-justify: inter-ideograph;
}

.classic-simplified-chinese {
    font-family: var(--font-zh-cn-classic) !important;
    font-weight: var(--font-weight-cjk-print) !important;
}

/* 3. 完整字重系統應用 */
.font-weight-en-light { font-weight: var(--font-weight-en-light) !important; }
.font-weight-en-regular { font-weight: var(--font-weight-en-regular) !important; }
.font-weight-en-medium { font-weight: var(--font-weight-en-medium) !important; }
.font-weight-en-bold { font-weight: var(--font-weight-en-bold) !important; }

.font-weight-zh-light { font-weight: var(--font-weight-zh-light) !important; }
.font-weight-zh-regular { font-weight: var(--font-weight-zh-regular) !important; }
.font-weight-zh-medium { font-weight: var(--font-weight-zh-medium) !important; }
.font-weight-zh-bold { font-weight: var(--font-weight-zh-bold) !important; }

.font-weight-ja-light { font-weight: var(--font-weight-ja-light) !important; }
.font-weight-ja-regular { font-weight: var(--font-weight-ja-regular) !important; }
.font-weight-ja-medium { font-weight: var(--font-weight-ja-medium) !important; }
.font-weight-ja-bold { font-weight: var(--font-weight-ja-bold) !important; }

/* 4. 行高系統全面應用 */
.line-height-en-tight { line-height: var(--line-height-en-tight) !important; }
.line-height-en-base { line-height: var(--line-height-en-base) !important; }
.line-height-en-relaxed { line-height: var(--line-height-en-relaxed) !important; }

.line-height-zh-tight { line-height: var(--line-height-zh-tight) !important; }
.line-height-zh-base { line-height: var(--line-height-zh-base) !important; }
.line-height-zh-relaxed { line-height: var(--line-height-zh-relaxed) !important; }

.line-height-ja-tight { line-height: var(--line-height-ja-tight) !important; }
.line-height-ja-base { line-height: var(--line-height-ja-base) !important; }
.line-height-ja-relaxed { line-height: var(--line-height-ja-relaxed) !important; }

/* 5. 字距系統全面應用 */
.letter-spacing-en-tight { letter-spacing: var(--letter-spacing-en-tight) !important; }
.letter-spacing-en-base { letter-spacing: var(--letter-spacing-en-base) !important; }
.letter-spacing-en-relaxed { letter-spacing: var(--letter-spacing-en-relaxed) !important; }

.letter-spacing-zh-tight { letter-spacing: var(--letter-spacing-zh-tight) !important; }
.letter-spacing-zh-base { letter-spacing: var(--letter-spacing-zh-base) !important; }
.letter-spacing-zh-relaxed { letter-spacing: var(--letter-spacing-zh-relaxed) !important; }

.letter-spacing-ja-tight { letter-spacing: var(--letter-spacing-ja-tight) !important; }
.letter-spacing-ja-base { letter-spacing: var(--letter-spacing-ja-base) !important; }
.letter-spacing-ja-relaxed { letter-spacing: var(--letter-spacing-ja-relaxed) !important; }

/* 6. CJK 專用字體尺寸應用 */
.cjk-text-sm { font-size: var(--font-size-cjk-sm) !important; }
.cjk-text-base { font-size: var(--font-size-cjk-base) !important; }
.cjk-text-lg { font-size: var(--font-size-cjk-lg) !important; }

/* 自動偵測 CJK 語言應用合適尺寸 */
:lang(zh-TW), :lang(zh-CN), :lang(ja) {
    font-size: var(--font-size-cjk-base);
}

/* 7. 顯示字體棧應用 */
.display-font-en { font-family: var(--font-en-display) !important; }
.display-font-zh-tw { font-family: var(--font-zh-tw-display) !important; }
.display-font-zh-cn { font-family: var(--font-zh-cn-display) !important; }
.display-font-ja { font-family: var(--font-ja-display) !important; }

/* 標題自動使用顯示字體 */
h1:lang(en), h2:lang(en), h3:lang(en),
h1.display-en, h2.display-en, h3.display-en {
    font-family: var(--font-en-display) !important;
}

h1:lang(zh-TW), h2:lang(zh-TW), h3:lang(zh-TW),
h1.display-zh-tw, h2.display-zh-tw, h3.display-zh-tw {
    font-family: var(--font-zh-tw-display) !important;
}

h1:lang(ja), h2:lang(ja), h3:lang(ja),
h1.display-ja, h2.display-ja, h3.display-ja {
    font-family: var(--font-ja-display) !important;
}

/* 8. 等寬字體完整應用 */
.code-block, pre, code {
    font-family: var(--font-mono-cjk) !important;
}

/* 英文代碼保持原字體 */
.code-block:lang(en), pre:lang(en), code:lang(en) {
    font-family: var(--font-mono) !important;
}

/* 9. 語言優化行高和字距自動應用 */
/* 繁體中文優化 */
:lang(zh-TW), :lang(zh-Hant) {
    line-height: var(--line-height-zh-base);
    letter-spacing: var(--letter-spacing-zh-base);
    hanging-punctuation: first last;
}

/* 簡體中文優化 */
:lang(zh-CN), :lang(zh-Hans) {
    line-height: var(--line-height-zh-base);
    letter-spacing: var(--letter-spacing-zh-base);
}

/* 日文優化 */
:lang(ja) {
    line-height: var(--line-height-ja-base);
    letter-spacing: var(--letter-spacing-ja-base);
    font-feature-settings: "palt" 1, "pkna" 1;
    text-combine-upright: digits 2;
}

/* 英文優化 */
:lang(en) {
    line-height: var(--line-height-en-base);
    letter-spacing: var(--letter-spacing-en-base);
    font-feature-settings: "liga" 1, "kern" 1;
}

/* 10. 實用工具類擴充 */
.force-en { 
    font-family: var(--font-en-base) !important;
    line-height: var(--line-height-en-base) !important;
    letter-spacing: var(--letter-spacing-en-base) !important;
}

.force-zh-tw { 
    font-family: var(--font-zh-tw-base) !important;
    line-height: var(--line-height-zh-base) !important;
    letter-spacing: var(--letter-spacing-zh-base) !important;
}

.force-zh-cn { 
    font-family: var(--font-zh-cn-base) !important;
    line-height: var(--line-height-zh-base) !important;
    letter-spacing: var(--letter-spacing-zh-base) !important;
}

.force-ja { 
    font-family: var(--font-ja-base) !important;
    line-height: var(--line-height-ja-base) !important;
    letter-spacing: var(--letter-spacing-ja-base) !important;
    font-feature-settings: "palt" 1, "pkna" 1 !important;
}

.mixed-content {
    font-family: var(--font-mixed-base);
    line-height: var(--line-height-mixed);
    letter-spacing: 0.02em;
    text-align: justify;
}

.plain-text {
    font-family: sans-serif !important;
    letter-spacing: 0 !important;
    text-indent: 0 !important;
    line-height: 1.6 !important;
    font-weight: normal !important;
}

/* 11. 書法級印刷效果 */
.print-quality {
    font-weight: var(--font-weight-cjk-print) !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.heading-strong {
    font-weight: var(--font-weight-cjk-heading) !important;
}

/* 12. 垂直排版支援 */
.vertical-writing {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--font-ja-classic) !important;
    line-height: 1.8 !important;
    letter-spacing: 0.1em !important;
}

/* 13. 響應式 CJK 字體尺寸優化 */
@media (max-width: 768px) {
    :lang(zh-TW), :lang(zh-CN), :lang(ja) {
        font-size: var(--font-size-cjk-base) !important;
        line-height: var(--line-height-zh-relaxed) !important;
        letter-spacing: var(--letter-spacing-zh-relaxed) !important;
    }
    
    :lang(en) {
        font-size: var(--font-size-sm) !important;
        line-height: var(--line-height-en-relaxed) !important;
        letter-spacing: var(--letter-spacing-en-relaxed) !important;
    }
}

@media (max-width: 480px) {
    :lang(zh-TW), :lang(zh-CN), :lang(ja) {
        font-size: var(--font-size-cjk-lg) !important;
        line-height: var(--line-height-zh-relaxed) !important;
    }
    
    .cjk-text-sm { font-size: var(--font-size-cjk-sm) !important; }
    .cjk-text-base { font-size: var(--font-size-cjk-base) !important; }
    .cjk-text-lg { font-size: var(--font-size-cjk-lg) !important; }
}

/* 14. 動畫時間變量應用 */
.smooth-transition {
    transition: all var(--transition-base) !important;
}

.fast-transition {
    transition: all var(--transition-fast) !important;
}

.slow-transition {
    transition: all var(--transition-slow) !important;
}

/* 15. 暗夜模式字體優化 */
body.night-mode :lang(zh-TW),
body.night-mode :lang(zh-CN),
body.night-mode :lang(ja) {
    font-weight: var(--font-weight-zh-light) !important;
}

body.night-mode :lang(en) {
    font-weight: var(--font-weight-en-light) !important;
}

/* 16. 特殊字體效果組合 */
.calligraphy-style {
    font-family: var(--font-zh-tw-classic) !important;
    font-weight: var(--font-weight-cjk-print) !important;
    letter-spacing: var(--letter-spacing-zh-relaxed) !important;
    line-height: var(--line-height-zh-relaxed) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.modern-minimal {
    font-family: var(--font-en-base) !important;
    font-weight: var(--font-weight-en-light) !important;
    letter-spacing: var(--letter-spacing-en-tight) !important;
    line-height: var(--line-height-en-tight) !important;
}

/* 17. 語言標題自動優化 */
.lang-title-optimized h1 {
    font-family: var(--font-mixed-base);
    font-weight: var(--font-weight-zh-medium);
    line-height: 1.3;
}

.lang-title-optimized h1:lang(en) {
    font-family: var(--font-en-display);
    font-weight: var(--font-weight-en-medium);
    letter-spacing: var(--letter-spacing-en-tight);
}

.lang-title-optimized h1:lang(zh-TW),
.lang-title-optimized h1:lang(zh-CN) {
    font-weight: var(--font-weight-zh-medium);
    letter-spacing: var(--letter-spacing-zh-relaxed);
}

.lang-title-optimized h1:lang(ja) {
    font-family: var(--font-ja-display);
    font-weight: var(--font-weight-ja-medium);
    letter-spacing: var(--letter-spacing-ja-relaxed);
}

/* 18. 文檔段落優化 */
.document-paragraph {
    text-indent: 2em;
    text-align: justify;
    text-justify: inter-ideograph;
    line-height: var(--line-height-zh-base);
    margin-bottom: var(--dazai-paragraph-spacing);
}

.document-paragraph:lang(en) {
    text-indent: 0;
    line-height: var(--line-height-en-base);
}

.document-paragraph:lang(ja) {
    text-indent: 1em;
    line-height: var(--line-height-ja-base);
}

/* 19. 代碼片段語言偵測 */
pre[class*="language-"] {
    font-family: var(--font-mono-cjk) !important;
}

pre.language-javascript,
pre.language-typescript,
pre.language-python {
    font-family: var(--font-mono) !important;
}

/* 20. 輸入框語言優化 */
.input-field:lang(zh-TW),
.input-field:lang(zh-CN) {
    font-family: var(--font-zh-tw-base) !important;
    letter-spacing: var(--letter-spacing-zh-base) !important;
}

.input-field:lang(ja) {
    font-family: var(--font-ja-base) !important;
    letter-spacing: var(--letter-spacing-ja-base) !important;
}

.input-field:lang(en) {
    font-family: var(--font-en-base) !important;
    letter-spacing: var(--letter-spacing-en-base) !important;
}

/* ============================================
   使用範例：
   
   1. 文學經典風格：<div class="dazai-style">...</div>
   2. 經典中文排版：<div class="classic-chinese-typography">...</div>
   3. 特定語言字重：<div class="font-weight-zh-light">...</div>
   4. CJK 專用尺寸：<div class="cjk-text-base">...</div>
   5. 顯示字體應用：<h1 class="display-font-ja">...</h1>
   6. 等寬字體完整：<code class="code-block">...</code>
   7. 語言強制套用：<div class="force-ja">...</div>
   8. 書法印刷效果：<div class="print-quality">...</div>
   9. 垂直排版：<div class="vertical-writing">...</div>
   10. 流暢動畫：<div class="smooth-transition">...</div>
   
   所有元素都會根據 lang 屬性自動優化，
   也可以手動添加工具類進行微調。
   ============================================ */