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

html {
    scroll-behavior: smooth;
    font-size: var(--font-size-base);
    /* 使用变量 */
}

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);
    /* 使用中文字距 */
}

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;
}

/* 显示动画 */
@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);
    }
}

/* 关闭动画 - 非线性缩小 */
@keyframes gentleFadeOut {
    0% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }

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

/* 优化后的动画 - 避免布局重排 */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        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);
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes whisperPulse {

    0%,
    100% {
        background-color: transparent;
    }

    50% {
        background-color: color(display-p3 0.5966 0.5623 0.5615 / 0.05);
    }
}

@keyframes breathe {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

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

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 月度视图动画 */
@keyframes monthlyEntriesFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@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;
    }
}

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

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==================== 日记区域 ==================== */
.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, color(display-p3 0.0000 0.0000 0.0000 / 0.008) 2px, color(display-p3 0.0000 0.0000 0.0000 / 0.008) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, color(display-p3 0.0000 0.0000 0.0000 / 0.008) 2px, color(display-p3 0.0000 0.0000 0.0000 / 0.008) 4px),
        linear-gradient(to bottom, var(--paper-color) 0%, var(--paper-color) 100%);
    /* 新增阴影效果 */
    box-shadow:
        0 4px 8px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        0 6px 20px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset -1px 0 126px color(display-p3 0.0000 0.0000 0.0000 / 0.1355),
        inset 0 -1px 126px color(display-p3 0.1601 0.1570 0.1533 / 0.357);
    border-radius: 2px;
    /* 启用GPU加速 */
    transform: translateZ(0);
    will-change: transform;
    /* 减少重绘 */
    contain: layout style paint;
}

/* 日记区域渐变效果 */
.diary-section::before,
.diary-section::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 1;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.diary-section::before {
    top: -50%;
    right: -50%;
    width: 200%;
    height: 75%;
    background: linear-gradient(125deg,
            transparent 0%,
            color(display-p3 0.9965 0.7848 0.3412 / 27%) 85%,
            color(display-p3 1.12 1.08 0.96 / 0.28) 50%,  /* EDR 暖白：SDR clamp→白，EDR→琥珀超白 */
            color(display-p3 0.3059 0.3059 0.3058 / 0.1) 15%,
            transparent 100%);
    transform: rotate(365deg) translateX(-20%);
    filter: blur(50px);
    opacity: 0.6;
}

.diary-section::after {
    bottom: -50%;
    left: -50%;
    width: 200%;
    height: 75%;
    background: linear-gradient(to top,
            transparent 0%,
            color(display-p3 0.9965 0.7848 0.3412 / 0.15) 85%,
            color(display-p3 1.12 1.08 0.96 / 0.18) 50%,  /* EDR 暖白 */
            color(display-p3 0.3059 0.3059 0.3058 / 0.05) 15%,
            transparent 100%);
    transform: rotate(-120deg) translateY(-20%);
    filter: blur(40px);
    opacity: 0.5;
}

.diary-section:hover::after {
    opacity: 0.7;
    filter: blur(50px);
}

.diary-section:focus-within::after {
    opacity: 0.8;
    filter: blur(60px);
    transform: rotate(-5deg) translateY(-15%);
}

/* 确保对话区域内容在渐变层之上 */
.conversation-area,
.diary-header {
    position: relative;
    z-index: 2;
}

/* 私语模式样式 */
.diary-section.whisper-mode {
    background-color: color(display-p3 0.9921 0.9921 0.9804);
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, color(display-p3 0.5966 0.5623 0.5615 / 0.02) 2px, color(display-p3 0.5966 0.5623 0.5615 / 0.02) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, color(display-p3 0.5966 0.5623 0.5615 / 0.02) 2px, color(display-p3 0.5966 0.5623 0.5615 / 0.02) 4px),
        linear-gradient(to bottom, color(display-p3 0.9921 0.9921 0.9804) 0%, color(display-p3 0.9921 0.9921 0.9804) 100%);
}

.diary-section.whisper-mode::before {
    background: linear-gradient(95deg,
            transparent 0%,
            color(display-p3 0.6588 0.9176 0.9176 / 0.2) 65%,
            color(display-p3 0.4549 0.5255 0.5843 / 0.25) 39%,
            color(display-p3 0.96 1.18 1.16 / 0.14) 15%,  /* EDR 青白：SDR clamp→白，EDR→冷超白 */
            transparent 100%);
    filter: blur(60px);
    opacity: 0.5;
}

.diary-section.whisper-mode::after {
    background: linear-gradient(to top,
            transparent 0%,
            color(display-p3 0.6588 0.9176 0.9176 / 0.15) 65%,
            color(display-p3 0.4549 0.5255 0.5843 / 0.2) 39%,
            color(display-p3 0.96 1.18 1.16 / 0.09) 15%,  /* EDR 青白 */
            transparent 100%);
    filter: blur(50px);
    opacity: 0.4;
}

/* 日记头部 */
.diary-header {
    margin-bottom: 66.555px;
    padding: 30px 33.3px;
    position: relative;
    background: color(display-p3 1.04 1.03 0.98 / 0.95);  /* EDR 紙張光：SDR→純白，EDR→暖超白 */
    backdrop-filter: blur(10px);
    border-radius: 36px;
    transform: skewX(-1deg) rotate(361deg);
    border-top-right-radius: 32px;
    box-shadow:
        0 2px 8px color(display-p3 0.0000 0.0000 0.0000 / 0.04),
        inset 0 1px 3px color(display-p3 0.9098 0.7333 0.4549 / 0.15),
        inset 0 -1px 3px color(display-p3 0.9176 0.7843 0.6784 / 0.1),
        inset 1px 0 3px color(display-p3 0.3947 0.3697 0.3443 / 0.08),
        inset -1px 0 3px color(display-p3 0.0000 0.0000 0.0000 / 0.08),
        inset 0 4px 12px color(display-p3 0.0000 0.0000 0.0000 / 0.05),
        inset 0 -2px 6px color(display-p3 0.0000 0.0000 0.0000 / 0.03);
    transition: all 0.6s ease;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, color(display-p3 0.0000 0.0000 0.0000 / 0.008) 1px, color(display-p3 0.0000 0.0000 0.0000 / 0.008) 2px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, color(display-p3 0.0000 0.0000 0.0000 / 0.008) 1px, color(display-p3 0.0000 0.0000 0.0000 / 0.008) 2px),
        linear-gradient(to bottom, color(display-p3 0.9921 0.9921 0.9608 / 0.95) 0%, color(display-p3 0.9751 0.9686 0.9490 / 0.9) 100%);
}

.diary-header:hover {
    box-shadow:
        0 4px 12px color(display-p3 0.0000 0.0000 0.0000 / 0.06),
        inset 0 1px 10px color(display-p3 0.9098 0.7333 0.4549 / 0.2),
        inset 0 -1px 4px color(display-p3 0.9176 0.7843 0.6784 / 0.15),
        inset 1px 0 4px color(display-p3 0.3947 0.3697 0.3443 / 0.12),
        inset -1px 0 4px color(display-p3 0.0000 0.0000 0.0000 / 0.12),
        inset 0 6px 16px color(display-p3 0.0000 0.0000 0.0000 / 0.08),
        inset 0 -3px 8px color(display-p3 0.0000 0.0000 0.0000 / 0.05);
    transform: translateY(-3.6px);
}

.diary-header.whisper-mode {
    background: color(display-p3 0.9929 0.9959 0.9995 / 0.95);
    box-shadow:
        0 2px 8px color(display-p3 0.0000 0.0000 0.0000 / 0.04),
        inset 0 1px 3px color(display-p3 0.4499 0.5227 0.5817 / 0.15),
        inset 0 -1px 3px color(display-p3 0.3961 0.7020 0.8627 / 0.1),
        inset 1px 0 3px color(display-p3 0.0000 0.0000 0.0000 / 0.08),
        inset -1px 0 3px color(display-p3 0.0000 0.0000 0.0000 / 0.08),
        inset 0 4px 12px color(display-p3 0.0000 0.0000 0.0000 / 0.05),
        inset 0 -2px 6px color(display-p3 0.0000 0.0000 0.0000 / 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: color(display-p3 0.6731 0.6294 0.5264);
    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;
    /* 優化動畫性能 */
    will-change: transform;
    transform: translateZ(0);
}

.date-digit,
.weekday-text {
    display: inline-block;
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), filter 0.5s ease;
    height: 1.2em;
    line-height: 1.2em;
    white-space: nowrap;
    will-change: transform, filter;
}

.date-digit.rolling-down,
.weekday-text.rolling-down {
    transform: translateY(-100%);
    filter: blur(4px);
}

.date-digit.rolling-up,
.weekday-text.rolling-up {
    transform: translateY(100%);
    filter: blur(4px);
}

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

.date-digit.new.rolling-down,
.weekday-text.new.rolling-down,
.date-digit.new.rolling-up,
.weekday-text.new.rolling-up {
    filter: blur(0);
}

.date-digit.new {
    top: 100%;
    /* From bottom */
}

/* For rolling up, we might need a different class, but let's stick to one consistent feel */


/* 私语切换按钮 */
.whisper-toggle {
    background: color(display-p3 1.08 1.08 1.07 / 0.05);  /* EDR 微白按鈕 */
    backdrop-filter: blur(10px);
    border: none;
    box-shadow:
        inset 0 1px 3px color(display-p3 0.0000 0.0000 0.0000 / 0.05),
        inset 0 0 0 1px color(display-p3 0.5046 0.6041 0.5595 / 0.15),
        0 2px 1px color(display-p3 0.0000 0.0000 0.0000 / 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: color(display-p3 0.5966 0.5623 0.5615 / 0.1);
}

.whisper-toggle.active {
    color: var(--whisper-color);
    background: color(display-p3 0.4899 0.5922 0.5976 / 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,
            color(display-p3 0.0000 0.0000 0.0000 / 0.06) 0.5px,
            transparent 0.5px,
            transparent calc(100% - 0.5px),
            color(display-p3 0.0000 0.0000 0.0000 / 0.06) calc(100% - 0.5px)),
        /* 輔助陰影線：營造紙張纖維的微妙質感 */
        linear-gradient(to bottom,
            transparent 0,
            color(display-p3 0.0000 0.0000 0.0000 / 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;
    /* 觸摸優化 */
    -webkit-overflow-scrolling: touch;
    overflow-anchor: none;
    contain: layout style paint;
}

/* 針對中文優化（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,
            color(display-p3 0.0000 0.0000 0.0000 / 0.05) 0.4px,
            transparent 0.4px),
        linear-gradient(to bottom,
            transparent 0,
            color(display-p3 0.0000 0.0000 0.0000 / 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,
            color(display-p3 0.0000 0.0000 0.0000 / 0.055) 0.5px,
            transparent 0.5px),
        linear-gradient(to bottom,
            transparent 0,
            color(display-p3 0.0000 0.0000 0.0000 / 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;
    animation: fadeIn 0.5s ease;
}

.diary-content {
    text-align: left;
    animation: fadeInUp 0.6s ease-out;
    /* 為動畫元素啟用GPU加速 */
    will-change: transform, opacity;
    transform: translateZ(0);
}

.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;
    /* 為動畫元素啟用GPU加速 */
    will-change: transform, opacity;
    transform: translateZ(0);
}

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

.whisper-content {
    text-align: left;
    color: var(--whisper-color);
    font-style: italic;
    padding-left: 10px;
    border-left-color: var(--whisper-color-light);
    animation: fadeInRight 0.6s ease-out;
    /* 為動畫元素啟用GPU加速 */
    will-change: transform, opacity;
    transform: translateZ(0);
}

.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: color(display-p3 0.9921 0.9921 0.9608 / 0.95);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 19px;
    box-shadow:
        0 4px 12px color(display-p3 0.0000 0.0000 0.0000 / 0.04),
        inset 0 1px 10px color(display-p3 0.8948 0.7370 0.4752 / 0.1),
        inset 0 -1px 65px color(display-p3 0.9098 0.7936 0.6820 / 0.05),
        inset 1px 0 10px color(display-p3 0.3947 0.3697 0.3443 / 0.1),
        inset -1px 0 10px color(display-p3 0.0000 0.0000 0.0000 / 0.1);
    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%,
            color(display-p3 0.9098 0.7333 0.4549 / 0.15) 70%,
            color(display-p3 0.9176 0.7843 0.6784 / 0.1) 50%,
            color(display-p3 0.3947 0.3697 0.3443 / 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: color(display-p3 0.9929 0.9959 0.9995 / 0.95);
    box-shadow:
        0 4px 12px color(display-p3 0.0000 0.0000 0.0000 / 0.04),
        inset 0 1px 25px color(display-p3 0.4499 0.5227 0.5817 / 0.1),
        inset 0 -1px 65px color(display-p3 0.4493 0.7016 0.8581 / 0.05),
        inset 1px 0 20px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset -1px 0 20px color(display-p3 0.0000 0.0000 0.0000 / 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;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.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%,
            color(display-p3 0.4499 0.5227 0.5817 / 0.15) 70%,
            color(display-p3 0.3961 0.7020 0.8627 / 0.1) 50%,
            color(display-p3 0.0000 0.0000 0.0000 / 0.08) 25%,
            transparent 100%);
    filter: blur(25px);
    opacity: 0.5;
}

/* 悬停时的渐变效果增强 */
.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 color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        0 6px 20px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset -1px 0 36px color(display-p3 0.0000 0.0000 0.0000 / 0.2),
        inset 1px 0 336px color(display-p3 0.0000 0.0000 0.0000 / 0.2),
        inset 0 -1px 36px color(display-p3 0.0000 0.0000 0.0000 / 0.1766);
    border-radius: 2px;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 1px, color(display-p3 0.0000 0.0000 0.0000 / 0.008) 1px, color(display-p3 0.0000 0.0000 0.0000 / 0.008) 1px),
        repeating-linear-gradient(90deg, transparent, transparent 1px, color(display-p3 0.0000 0.0000 0.0000 / 0.008) 2px, color(display-p3 0.0000 0.0000 0.0000 / 0.008) 4px),
        linear-gradient(to bottom, var(--bg-secondary) 0%, var(--bg-secondary) 100%);
    /* 啟用GPU加速 */
    transform: translateZ(0);
    will-change: transform;
    contain: layout style paint;
}

.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;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

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

.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: 86px;
}

.monthly-entries {
    margin-top: 20px;
    opacity: 0;
    animation: monthlyEntriesFadeIn 0.6s ease forwards;
    contain: layout style paint;
}

.year-group {
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(20px);
    animation: groupFadeIn 0.8s ease forwards;
    animation-delay: 0.1s;
}

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

.month-group {
    margin-bottom: 20px;
    margin-left: 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: groupFadeIn 0.8s ease forwards;
    animation-delay: 0.3s;
}

.month-title {
    font-size: 56px;
    color: var(--text-primary);
    margin-bottom: 50px;
    transform: rotate(1.6deg) translateX(5px);
}

.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 {
    margin-bottom: 5.56px;
    cursor: pointer;
    padding: 25px;
    background: color(display-p3 0.9921 0.9921 0.9608 / 0.95);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 13.3px;
    box-shadow:
        inset 0 1px 3px color(display-p3 0.0000 0.0000 0.0000 / 0.05),
        inset 0 0 0 1px color(display-p3 0.5046 0.6041 0.5595 / 0.02),
        0 2px 1px color(display-p3 0.0000 0.0000 0.0000 / 0.03);
    transition: all 0.385s ease;

    /* 轻微变换+轻微弯曲效果 */
    opacity: 0;
    transform: translateY(30px);
    /* 弯曲效果通过 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));
    animation: entryItemSlideUp 0.6s ease forwards;
    contain: layout;
}

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

.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));
    border-radius: 35px 16.6px 25px 36.6px;
}

.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));
    border-radius: 36px 33.3px 33px 33.3px;
}

/* 为不同条目设置延迟 */
.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;
}

/* 月度视图激活时的入场动画 */
.monthly-view.active .entry-item {
    animation: complexEntryAnimation 0.8s ease forwards;
}

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

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

.entry-date {
    font-size: 36px;
    color: color(display-p3 0.6227 0.5720 0.5438);
    margin-bottom: 5px;
    font-family: var(--font-mono);
}

/* 私语条目预览样式 */
.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;
}

.no-entries {
    font-style: italic;
    color: var(--text-tertiary);
    text-align: center;
    padding: 40px 0;
    opacity: 1;
    transition: none;
    contain: layout style;
}

/* 日常视图容器 */
.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);
}

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

.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 color(display-p3 0.0000 0.0000 0.0000 / 0.05),
        inset 0 0 0 1px color(display-p3 0.5046 0.6041 0.5595 / 0.1),
        0 1px 2px color(display-p3 0.0000 0.0000 0.0000 / 0.03);

    /* 背景渐变 */
    background: linear-gradient(135deg,
            color(display-p3 0.9922 0.9921 0.9636 / 0.9) 0%,
            color(display-p3 0.9751 0.9689 0.9508 / 0.8) 100%);
}

.back-button:hover {
    text-decoration: underline;
    transform: translateY(-1px);

    /* 悬停时的内阴影增强 */
    box-shadow:
        inset 0 1px 4px color(display-p3 0.0000 0.0000 0.0000 / 0.08),
        inset 0 0 0 1px color(display-p3 0.5046 0.6041 0.5595 / 0.2),
        0 2px 4px color(display-p3 0.0000 0.0000 0.0000 / 0.05);

    background: linear-gradient(135deg,
            color(display-p3 0.9921 0.9921 0.9608 / 0.95) 0%,
            color(display-p3 0.9751 0.9686 0.9490 / 0.9) 100%);
}

.back-button:active {
    transform: translateY(0);

    /* 点击时的内阴影效果 */
    box-shadow:
        inset 0 2px 6px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset 0 0 0 1px color(display-p3 0.5046 0.6041 0.5595 / 0.25);
}

/* 私语计数提示 */
.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;
}

/* ==================== 设置页面样式 ==================== */
.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: color(display-p3 0.5046 0.6041 0.5595 / 0.05);
}

.greeting-option.selected {
    border-color: var(--stone-green);
    background: color(display-p3 0.5046 0.6041 0.5595 / 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: color(display-p3 0.5046 0.6041 0.5595 / 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: color(display-p3 0.7280 0.5503 0.3985);
}

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

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

/* ==================== 全屏模式样式 ==================== */
.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;
}

.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 color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset 0 6px 20px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset -1px 0 80px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset 0 -1px 80px color(display-p3 0.0000 0.0000 0.0000 / 0.15);
    border-radius: 2px;

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

.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 color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset 0 6px 20px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset -1px 0 80px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset 0 -1px 80px color(display-p3 0.0000 0.0000 0.0000 / 0.15);

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

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

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

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

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

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

/* 全屏内容区域样式 */
.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;
}

.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);
}

/* ==================== 启动界面优化 ==================== */
#splashScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: color(display-p3 0.1020 0.1020 0.1019);
    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;
}

#splashScreen.fade-out {
    opacity: 0;
    pointer-events: none;
}

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

/* 明夜模式启动界面 */
body:not(.night-mode) #splashScreen {
    background: linear-gradient(135deg, color(display-p3 0.9953 0.9735 0.8914) 0%, color(display-p3 0.8907 0.8752 0.8285) 100%);
}

body:not(.night-mode) #splashScreen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: color(display-p3 0.8842 0.7775 0.5574 / 0.1);
    opacity: 1;
    animation: vignette 3s ease-in-out infinite alternate;
}

body:not(.night-mode) .splash-logo {
    background: linear-gradient(150deg, color(display-p3 0.5339 0.4361 0.3950), color(display-p3 0.3477 0.2557 0.2219));
    -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, color(display-p3 0.3477 0.2557 0.2219), color(display-p3 0.5339 0.4361 0.3950));
    -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 #splashScreen {
    background: linear-gradient(135deg, color(display-p3 0.1464 0.1678 0.2225) 0%, color(display-p3 0.3814 0.4181 0.4692) 100%);
}

body.night-mode #splashScreen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: color(display-p3 0.1647 0.1647 0.1647 / 0.3);
    opacity: 1;
    animation: vignette 3s ease-in-out infinite alternate;
}

body.night-mode .splash-logo {
    background: linear-gradient(150deg, color(display-p3 0.8357 0.8015 0.7864), color(display-p3 0.7254 0.6692 0.6466));
    -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-subtitle {
    background: linear-gradient(90deg, color(display-p3 0.7254 0.6692 0.6466), color(display-p3 0.8357 0.8015 0.7864));
    -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-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;
}

.splash-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}

/* 手写动画效果 */
@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;
    }
}

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

    100% {
        opacity: 0.7;
    }
}

/* 确保主容器在欢迎模块显示时隐藏 */
.main-container {
    display: none;
}

.main-container.app-ready {
    display: flex;
}

/* ==================== 暗夜模式 ==================== */
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 color(display-p3 0.0816 0.1026 0.1281 / 0.70);
    color: var(--night-text-primary);
}

body.night-mode .diary-section.whisper-mode {
    background-color: color(display-p3 0.1647 0.1647 0.1647);
}

/* 暗夜模式纸张纹理 */
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%);
}

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

/* 暗夜模式渐变效果 */
body.night-mode .diary-section::before {
    background: linear-gradient(95deg,
            transparent 0%,
            color(display-p3 0.4705 0.7136 0.8955 / 0.35) 75%,
            color(display-p3 0.8586 0.8212 0.5914 / 0.4) 50%,
            color(display-p3 0.2577 0.4336 0.6686 / 0.395) 25%,  /* rgb→P3 */
            transparent 100%);
    filter: blur(60px);
    opacity: 0.4;
}

body.night-mode .diary-section::after {
    background: linear-gradient(to top,
            transparent 0%,
            color(display-p3 0.4705 0.7136 0.8955 / 0.25) 75%,
            color(display-p3 0.8586 0.8212 0.5914 / 0.3) 50%,
            color(display-p3 0.2154 0.3639 0.6270 / 0.25) 25%,
            transparent 100%);
    filter: blur(50px);
    opacity: 0.3;
}

/* 暗夜模式 + 私语模式样式 */
body.night-mode .diary-section.whisper-mode::before {
    background: linear-gradient(116deg,
            transparent 0%,
            color(display-p3 0.6154 0.8469 0.4970 / 0.25) 65%,
            color(display-p3 0.6718 0.6593 0.5018 / 0.45) 50%,
            color(display-p3 0.2027 0.8010 0.6505 / 0.1) 15%,
            transparent 100%);
    filter: blur(55px);
    opacity: 0.35;
}

body.night-mode .diary-section.whisper-mode::after {
    background: linear-gradient(to top,
            transparent 0%,
            color(display-p3 0.6154 0.8469 0.4970 / 0.2) 65%,
            color(display-p3 0.6718 0.6593 0.5018 / 0.35) 50%,
            color(display-p3 0.3971 0.8155 0.6541 / 0.1) 15%,
            transparent 100%);
    filter: blur(45px);
    opacity: 0.25;
}

/* 暗夜模式文本颜色 */
body.night-mode .date-primary {
    color: var(--night-text-primary);
}

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

body.night-mode .diary-header {
    background: color(display-p3 0.1647 0.1647 0.1647 / 0.95);
    box-shadow:
        0 2px 8px color(display-p3 0.0000 0.0000 0.0000 / 0.08),
        inset 0 1px 3px color(display-p3 0.0000 0.0000 0.0000 / 0.15),
        inset 0 -1px 3px color(display-p3 0.5046 0.6041 0.5595 / 0.1),
        inset 1px 0 3px color(display-p3 0.0000 0.0000 0.0000 / 0.12),
        inset -1px 0 3px color(display-p3 0.0000 0.0000 0.0000 / 0.12),
        inset 0 4px 12px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset 0 -2px 6px color(display-p3 0.0000 0.0000 0.0000 / 0.08);
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, color(display-p3 1.0000 1.0000 0.9999 / 0.02) 1px, color(display-p3 1.0000 1.0000 0.9999 / 0.02) 2px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, color(display-p3 1.0000 1.0000 0.9999 / 0.02) 1px, color(display-p3 1.0000 1.0000 0.9999 / 0.02) 2px),
        linear-gradient(to bottom, color(display-p3 0.1647 0.1647 0.1647 / 0.95) 0%, color(display-p3 0.1451 0.1451 0.1451 / 0.9) 100%);
}

body.night-mode .diary-header:hover {
    box-shadow:
        0 4px 12px color(display-p3 0.0000 0.0000 0.0000 / 0.12),
        inset 0 1px 4px color(display-p3 0.0000 0.0000 0.0000 / 0.2),
        inset 0 -1px 4px color(display-p3 0.5046 0.6041 0.5595 / 0.15),
        inset 1px 0 4px color(display-p3 0.0000 0.0000 0.0000 / 0.18),
        inset -1px 0 4px color(display-p3 0.0000 0.0000 0.0000 / 0.18),
        inset 0 6px 16px color(display-p3 0.0000 0.0000 0.0000 / 0.15),
        inset 0 -3px 8px color(display-p3 0.0000 0.0000 0.0000 / 0.12);
}

body.night-mode .whisper-toggle {
    background: color(display-p3 0.1647 0.1647 0.1647 / 0.8);
    color: var(--night-text-tertiary);
    box-shadow:
        inset 0 1px 3px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset 0 0 0 1px color(display-p3 0.9048 0.9964 0.8564 / 0.15),
        0 2px 1px color(display-p3 0.0000 0.0000 0.0000 / 0.05);
}

body.night-mode .whisper-toggle:hover {
    color: var(--night-whisper-color);
    background: color(display-p3 0.6154 0.8469 0.4970 / 0.1);
}

body.night-mode .whisper-toggle.active {
    color: var(--night-whisper-color);
    background: color(display-p3 0.7630 0.8514 0.7186 / 0.15);
}

body.night-mode .input-area {
    width: 21% !important;
    background: color(display-p3 0.1451 0.1451 0.1451 / 0.95);
    box-shadow:
        inset 0 1px 3px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset 0 0 0 1px color(display-p3 0.5046 0.6041 0.5595 / 0.15),
        0 2px 8px color(display-p3 0.0000 0.0000 0.0000 / 0.05);
}

body.night-mode .input-area.whisper-mode {
    background: color(display-p3 0.1647 0.1647 0.1647 / 0.95);
    width: 21% !important;
    max-width: 500px !important;
    box-shadow:
        0 4px 12px color(display-p3 0.0000 0.0000 0.0000 / 0.04),
        inset 0 1px 25px color(display-p3 0.6154 0.8469 0.4970 / 0.1),
        inset 0 -1px 65px color(display-p3 0.6718 0.6593 0.5018 / 0.05),
        inset 1px 0 20px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset -1px 0 20px color(display-p3 0.0000 0.0000 0.0000 / 0.1);
}

/* 暗夜模式输入区域渐变效果 */
body.night-mode .input-area::before {
    background: linear-gradient(125deg,
            transparent 0%,
            color(display-p3 0.5046 0.6041 0.5595 / 0.15) 70%,
            color(display-p3 0.4705 0.7136 0.8955 / 0.1) 50%,
            color(display-p3 0.0000 0.0000 0.0000 / 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%,
            color(display-p3 0.6154 0.8469 0.4970 / 0.15) 70%,
            color(display-p3 0.6718 0.6593 0.5018 / 0.1) 50%,
            color(display-p3 0.3971 0.8155 0.6541 / 0.08) 25%,
            transparent 100%);
    filter: blur(25px);
    opacity: 0.4;
}

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-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: color(display-p3 0.5046 0.6041 0.5595 / 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: color(display-p3 0.5046 0.6041 0.5595 / 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, color(display-p3 0.5046 0.6041 0.5595 / 0.1) 0%, color(display-p3 0.5046 0.6041 0.5595 / 0.05) 100%);
    border-left: 3px solid var(--stone-green);
}

/* 暗夜模式月度视图 */
body.night-mode .entry-item {
    background: color(display-p3 0.1647 0.1647 0.1647 / 0.95);
    color: var(--night-text-primary);
    box-shadow:
        inset 0 1px 3px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset 0 0 0 1px color(display-p3 0.1137 0.1137 0.1137 / 0.3),
        0 2px 8px color(display-p3 0.0000 0.0000 0.0000 / 0.1);
}

body.night-mode .entry-item:hover {
    background-color: color(display-p3 0.5046 0.6041 0.5595 / 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);
}

/* 暗夜模式返回按钮 */
body.night-mode .back-button {
    background: linear-gradient(135deg,
            color(display-p3 0.1647 0.1647 0.1647 / 0.9) 0%,
            color(display-p3 0.1451 0.1451 0.1451 / 0.8) 100%);
    color: var(--stone-green-light);

    box-shadow:
        inset 0 1px 3px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset 0 0 0 1px color(display-p3 0.5046 0.6041 0.5595 / 0.15),
        0 1px 2px color(display-p3 0.0000 0.0000 0.0000 / 0.05);
}

body.night-mode .back-button:hover {
    box-shadow:
        inset 0 1px 4px color(display-p3 0.0000 0.0000 0.0000 / 0.15),
        inset 0 0 0 1px color(display-p3 0.5046 0.6041 0.5595 / 0.25),
        0 2px 4px color(display-p3 0.0000 0.0000 0.0000 / 0.08);

    background: linear-gradient(135deg,
            color(display-p3 0.1647 0.1647 0.1647 / 0.95) 0%,
            color(display-p3 0.1451 0.1451 0.1451 / 0.9) 100%);
}

body.night-mode .back-button:active {
    box-shadow:
        inset 0 2px 6px color(display-p3 0.0000 0.0000 0.0000 / 0.2),
        inset 0 0 0 1px color(display-p3 0.5046 0.6041 0.5595 / 0.3);
}

/* 暗夜模式欢迎界面 */
body.night-mode .welcome-overlay {
    background: linear-gradient(135deg, color(display-p3 0.1464 0.1678 0.2225) 0%, color(display-p3 0.3814 0.4181 0.4692) 100%);
}

body.night-mode .welcome-modal {
    background: linear-gradient(135deg, color(display-p3 0.5046 0.6041 0.5595 / 0.15) 0%, color(display-p3 0.1495 0.1944 0.3307 / 0.08) 100%);
    color: var(--night-text-primary);
    border: 1px solid color(display-p3 0.5046 0.6041 0.5595 / 0.2);
    box-shadow: 0 20px 40px color(display-p3 0.0000 0.0000 0.0000 / 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, color(display-p3 0.5046 0.6041 0.5595 / 0.15) 0%, color(display-p3 0.5046 0.6041 0.5595 / 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%, color(display-p3 0.4413 0.5376 0.4894) 100%);
    color: white;
}

body.night-mode .agree-button:hover {
    background: linear-gradient(135deg, var(--stone-green-light) 0%, color(display-p3 0.5046 0.6041 0.5595) 100%);
    box-shadow: 0 6px 16px color(display-p3 0.5046 0.6041 0.5595 / 0.4);
}

body.night-mode .storage-option {
    background: var(--night-bg-secondary);
    color: color(display-p3 0.0643 0.1772 0.2518 / 0.4);
    border: 2px solid var(--night-paper-line);
}

body.night-mode .storage-option:hover {
    border-color: var(--stone-green);
    background: color(display-p3 0.5046 0.6041 0.5595 / 0.1);
}

body.night-mode .storage-option.selected {
    border-color: var(--stone-green);
    background: linear-gradient(135deg, color(display-p3 0.5046 0.6041 0.5595 / 0.2) 0%, color(display-p3 0.5046 0.6041 0.5595 / 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 .fullscreen-mode {
    background: var(--night-bg-primary);
}

body.night-mode .fullscreen-left {
    background: var(--night-paper-color);
    border-right-color: color(display-p3 0.2157 0.2157 0.2157);
    box-shadow:
        inset 0 0 20px var(--night-paper-shadow),
        inset 0 4px 8px color(display-p3 0.0000 0.0000 0.0000 / 0.15),
        inset 0 6px 60px color(display-p3 0.0000 0.0000 0.0000 / 0.15),
        inset -1px 0 126px color(display-p3 0.0000 0.0000 0.0000 / 0.2),
        inset 0 -1px 126px color(display-p3 0.0000 0.0000 0.0000 / 0.25);
}

body.night-mode .fullscreen-right {
    background: var(--night-paper-color);
    box-shadow:
        inset 0 0 20px var(--night-paper-shadow),
        inset 0 4px 8px color(display-p3 0.0000 0.0000 0.0000 / 0.15),
        inset 0 6x 20px color(display-p3 0.0000 0.0000 0.0000 / 0.15),
        inset -1px 0 126px color(display-p3 0.0000 0.0000 0.0000 / 0.2),
        inset 0 -1px 126px color(display-p3 0.0000 0.0000 0.0000 / 0.25);
}

body.night-mode .fullscreen-left::after {
    background: linear-gradient(to right,
            transparent 0%,
            color(display-p3 0.2745 0.2745 0.2745 / 0.25) 100%);
}

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

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

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

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

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

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

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

/* ==================== 睡眠模式 ==================== */
.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;
}

/* ==================== 警告卡片样式 ==================== */
.warning-card {
    position: fixed;
    min-height: 120px !important;
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%) rotate(var(--tilt-angle, -3deg)) !important;
    background: color(display-p3 0.9921 0.9921 0.9608 / 0.95);
    backdrop-filter: blur(10px);
    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 color(display-p3 0.0000 0.0000 0.0000 / 0.08),
        inset 0 1px 3px color(display-p3 0.9098 0.7333 0.4549 / 0.15),
        inset 0 -1px 2px color(display-p3 0.9176 0.7843 0.6784 / 0.1),
        inset 1px 0 2px color(display-p3 0.3947 0.3697 0.3443 / 0.08),
        inset -1px 0 2px color(display-p3 0.0000 0.0000 0.0000 / 0.08);
    animation: gentleFadeIn 0.3s ease;
    line-height: 1.4;
    font-family: var(--font-journal);
}

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

/* 输入限制警告 */
.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;
}

/* 限制定制样式 */
.warning-card.limit-warning {
    background: color(display-p3 0.9932 0.9621 0.9614 / 0.95);
    color: color(display-p3 0.7617 0.2455 0.2182);
    border-left: 3px solid color(display-p3 0.8830 0.3214 0.2555);
    box-shadow:
        0 4px 20px color(display-p3 0.8830 0.3214 0.2555 / 0.15),
        inset 0 1px 3px color(display-p3 0.8830 0.3214 0.2555 / 0.1),
        inset 0 -1px 2px color(display-p3 0.8830 0.3214 0.2555 / 0.08),
        inset 1px 0 2px color(display-p3 0.8830 0.3214 0.2555 / 0.1),
        inset -1px 0 2px color(display-p3 0.8830 0.3214 0.2555 / 0.1);
}

.warning-card.empathy-warning {
    background: color(display-p3 0.9136 0.9627 0.9958 / 0.95);
    color: color(display-p3 0.2577 0.4336 0.5491);
    border-left: 3px solid color(display-p3 0.4609 0.7439 0.8569);
}

/* 私语模式适配 */
.input-area.whisper-mode~.warning-card {
    background: color(display-p3 0.9929 0.9959 0.9995 / 0.95);
    box-shadow:
        0 4px 20px color(display-p3 0.0000 0.0000 0.0000 / 0.08),
        inset 0 1px 3px color(display-p3 0.4499 0.5227 0.5817 / 0.15),
        inset 0 -1px 2px color(display-p3 0.3961 0.7020 0.8627 / 0.1),
        inset 1px 0 2px color(display-p3 0.0000 0.0000 0.0000 / 0.08),
        inset -1px 0 2px color(display-p3 0.0000 0.0000 0.0000 / 0.08);
}

/* 暗夜模式警告卡片 */
body.night-mode .warning-card {
    background: color(display-p3 0.1451 0.1451 0.1451 / 0.95);
    color: var(--night-text-tertiary);
    box-shadow:
        0 4px 20px color(display-p3 0.0000 0.0000 0.0000 / 0.15),
        inset 0 1px 3px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset 0 -1px 2px color(display-p3 0.5046 0.6041 0.5595 / 0.08),
        inset 1px 0 2px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset -1px 0 2px color(display-p3 0.0000 0.0000 0.0000 / 0.1);
}

body.night-mode .warning-card.limit-warning {
    background: color(display-p3 0.2580 0.1623 0.1597 / 0.95);
    color: color(display-p3 0.9394 0.5647 0.5534);
    border-left: 3px solid color(display-p3 0.9249 0.3731 0.3492);
    box-shadow:
        0 4px 20px color(display-p3 0.9249 0.3731 0.3492 / 0.2),
        inset 0 1px 3px color(display-p3 0.9249 0.3731 0.3492 / 0.15),
        inset 0 -1px 2px color(display-p3 0.9249 0.3731 0.3492 / 0.1),
        inset 1px 0 2px color(display-p3 0.9249 0.3731 0.3492 / 0.15),
        inset -1px 0 2px color(display-p3 0.9249 0.3731 0.3492 / 0.15);
}

body.night-mode .warning-card.empathy-warning {
    background: color(display-p3 0.1736 0.2332 0.2703 / 0.95);
    color: color(display-p3 0.6550 0.6888 0.6290);
    border-left: 3px solid color(display-p3 0.5046 0.6041 0.5595);
}

body.night-mode .input-area.whisper-mode~.warning-card {
    background: color(display-p3 0.1647 0.1647 0.1647 / 0.95);
    color: var(--night-whisper-color-light);
    box-shadow:
        0 4px 20px color(display-p3 0.0000 0.0000 0.0000 / 0.15),
        inset 0 1px 3px color(display-p3 0.6154 0.8469 0.4970 / 0.15),
        inset 0 -1px 2px color(display-p3 0.6718 0.6593 0.5018 / 0.1),
        inset 1px 0 2px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset -1px 0 2px color(display-p3 0.0000 0.0000 0.0000 / 0.1);
}

/* ==================== 圖片上傳卡片 ==================== */
/* 定位在 input-area 正上方，採 warning-card 視覺語言，僅 whisper 模式顯示 */
.image-upload-card {
    position: fixed;
    bottom: calc(32px + 72px + 12px); /* input-area bottom + input height + gap */
    left: 31%;
    transform: translateX(-50%) rotate(-1.5deg);
    z-index: 1002;
    background: color(display-p3 0.9921 0.9921 0.9608 / 0.95);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow:
        0 4px 20px color(display-p3 0.0000 0.0000 0.0000 / 0.07),
        inset 0 1px 3px color(display-p3 0.9098 0.7333 0.4549 / 0.12),
        inset 0 -1px 2px color(display-p3 0.9176 0.7843 0.6784 / 0.08),
        inset 1px 0 2px color(display-p3 0.3947 0.3697 0.3443 / 0.07),
        inset -1px 0 2px color(display-p3 0.0000 0.0000 0.0000 / 0.07);
    font-family: var(--font-journal);
    animation: gentleFadeIn 0.28s ease;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.image-upload-card__idle {
    display: flex;
    align-items: center;
}

.image-upload-card__trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 9px;
    color: var(--text-tertiary);
    font-family: var(--font-journal);
    font-size: 13px;
    transition: background 0.2s ease, color 0.2s ease;
}

.image-upload-card__trigger:hover {
    background: color(display-p3 0.5966 0.5623 0.5615 / 0.08);
    color: var(--text-secondary);
}

.image-upload-card__icon {
    font-size: 16px;
    line-height: 1;
}

.image-upload-card__label {
    font-size: 13px;
    letter-spacing: 0.02em;
}

/* 預覽狀態 */
.image-upload-card__preview {
    display: flex;
    align-items: center;
    gap: 10px;
}

.image-upload-card__thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 6px color(display-p3 0 0 0 / 0.12);
}

.image-upload-card__remove {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--text-tertiary);
    padding: 2px 5px;
    border-radius: 6px;
    transition: background 0.2s ease, color 0.2s ease;
}

.image-upload-card__remove:hover {
    background: color(display-p3 0.8830 0.3214 0.2555 / 0.1);
    color: color(display-p3 0.7617 0.2455 0.2182);
}

/* whisper 模式配色 */
.input-area.whisper-mode ~ .image-upload-card,
.image-upload-card.whisper-tint {
    background: color(display-p3 0.9929 0.9959 0.9995 / 0.95);
    box-shadow:
        0 4px 20px color(display-p3 0.0000 0.0000 0.0000 / 0.07),
        inset 0 1px 3px color(display-p3 0.4499 0.5227 0.5817 / 0.12),
        inset 0 -1px 2px color(display-p3 0.3961 0.7020 0.8627 / 0.08),
        inset 1px 0 2px color(display-p3 0.0000 0.0000 0.0000 / 0.07),
        inset -1px 0 2px color(display-p3 0.0000 0.0000 0.0000 / 0.07);
}

/* 暗夜模式 */
body.night-mode .image-upload-card {
    background: color(display-p3 0.1451 0.1451 0.1451 / 0.95);
    color: var(--night-text-tertiary);
    box-shadow:
        0 4px 20px color(display-p3 0.0000 0.0000 0.0000 / 0.18),
        inset 0 1px 3px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset 0 -1px 2px color(display-p3 0.5046 0.6041 0.5595 / 0.08),
        inset 1px 0 2px color(display-p3 0.0000 0.0000 0.0000 / 0.1),
        inset -1px 0 2px color(display-p3 0.0000 0.0000 0.0000 / 0.1);
}

body.night-mode .image-upload-card__trigger {
    color: var(--night-text-tertiary);
}

/* 手機裝置調整 */
body.is-mobile-device .image-upload-card {
    left: 50%;
    width: auto;
    bottom: calc(20px + 70px + 10px);
}

/* ==================== 打字效果 ==================== */
.typingCursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background-color: var(--stone-green);
    margin-left: 4px;
    animation: typingPulse 0.8s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
    vertical-align: middle;
    box-shadow: 0 0 5px color(display-p3 0.6550 0.6888 0.6290 / 0.5);
    border-radius: 1px;
}

@keyframes typingPulse {
    0% {
        opacity: 0.2;
        transform: scaleY(0.7);
        filter: blur(1px);
    }

    100% {
        opacity: 0.9;
        transform: scaleY(1.05);
        filter: blur(0);
    }
}


.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;
}

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

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

body.night-mode .char-count-hint {
    background: color(display-p3 0.1451 0.1451 0.1451 / 0.9);
    color: var(--night-text-tertiary);
}

/* ==================== 文字选中样式 ==================== */
::selection {
    background: var(--stone-green-light);
    color: white;
    text-shadow: none;
}

::-moz-selection {
    background: var(--stone-green-light);
    color: white;
    text-shadow: none;
}

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

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

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

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

/* ==================== 滚动条隐藏 ==================== */
.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-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) {
    /* 文學經典變量 */
    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) !important;

    /* 傳統排版 */
    text-indent: 2em;
    text-align: justify;
    text-justify: inter-ideograph;

    /* 避免孤字 */
    widows: 2;
    orphans: 2;

    /* 使用經典字體 */
    font-family: var(--font-zh-tw-classic) !important;
}

/* 日文文學經典樣式 */
.diary-content:lang(ja),
.whisper-content:lang(ja),
.roundstone-response:lang(ja),
p:lang(ja),
article:lang(ja) {
    /* 文學經典變量 */
    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) !important;

    /* 日文傳統排版 */
    text-indent: 1em;
    text-align: justify;

    /* 避免孤字 */
    widows: 2;
    orphans: 2;

    /* 日文專用特性 */
    font-feature-settings: "palt" 1, "pkna" 1;
    text-combine-upright: digits 2;

    /* 使用日文經典字體 */
    font-family: var(--font-ja-classic) !important;
    font-size: 0.95em;
}

/* 英文保持原樣 */
.diary-content:lang(en),
.whisper-content:lang(en),
.roundstone-response:lang(en),
p:lang(en),
article:lang(en) {
    font-family: var(--font-en-base) !important;
    font-weight: var(--font-weight-en-regular) !important;
    line-height: var(--line-height-en-base) !important;
    letter-spacing: var(--letter-spacing-en-base) !important;
    text-indent: 0;
    text-align: left;
    font-feature-settings: "liga" 1, "kern" 1;
}

/* 对话区域应用文学经典风格 */
.conversation-area[lang="zh"],
.conversation-area[lang="zh-TW"],
.conversation-area[lang="zh-CN"],
.conversation-area[lang="ja"] {
    --line-height: calc(var(--dazai-line-height) * 16px);
    background-size: 100% var(--line-height), 100% var(--line-height);

    /* 更細的格線，匹配文學風格 */
    background-image:
        linear-gradient(to bottom,
            color(display-p3 0.0000 0.0000 0.0000 / 0.04) 0.3px,
            transparent 0.3px),
        linear-gradient(to bottom,
            transparent 0,
            color(display-p3 0.0000 0.0000 0.0000 / 0.008) 1px,
            transparent 2px);
}

/* 文學經典排版類 */
.literary-classic,
.dazai-style {
    font-family: var(--font-ja-classic);
    font-weight: var(--dazai-font-weight);
    line-height: var(--dazai-line-height);
    letter-spacing: var(--dazai-letter-spacing);
    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: color(display-p3 0.2275 0.2274 0.2274);
}

.dazai-style h1,
.dazai-style h2,
.dazai-style h3 {
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.1em;
    margin-top: 2em;
    margin-bottom: 1em;
    text-align: center;
}

.dazai-style blockquote {
    border-left: none;
    padding-left: 2em;
    font-style: italic;
    opacity: 0.85;
    line-height: 2.2;
}

.dazai-style hr {
    border: none;
    text-align: center;
    margin: 3em 0;
}

.dazai-style hr::before {
    content: "※ ※ ※";
    letter-spacing: 1em;
    color: var(--text-tertiary);
}

/* ==================== 移动端适配 ==================== */
/* 完全阻止水平滚动 */
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;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .warning-card {
        font-size: 20px !important;
        max-width: 280px;
        padding: 14px 20px;
    }

    .splash-logo {
        font-size: 80px;
    }

    .splash-subtitle {
        font-size: 14px;
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
    .warning-card {
        max-width: 90%;
        min-width: 180px;
        bottom: 70px;
        padding: 8px 14px;
        font-size: 21px;
    }

    .splash-logo {
        font-size: 60px;
    }
}

/* ==================== 性能优化 ==================== */
.optimize-reflow {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;
}

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

/* 在 variables.css 或 style.css 中添加 */
.monthly-entries,
.conversation-area,
.settings-container,
.welcome-modal {
    contain: layout style paint;
}

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

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

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

/* ==================== 實用工具類擴充 ==================== */
/* 文學經典風格完整應用 */
.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: color(display-p3 0.2275 0.2274 0.2274);
}

/* 中文字體經典版應用 */
.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;
}

/* 完整字重系統應用 */
.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;
}

/* 行高系統全面應用 */
.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;
}

/* 字距系統全面應用 */
.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;
}

/* 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;
}

/* 顯示字體棧應用 */
.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;
}

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

/* 實用工具類 */
.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;
}

/* 書法級印刷效果 */
.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;
}

/* 垂直排版支援 */
.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;
}

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

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

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

/* 特殊字體效果組合 */
.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 color(display-p3 0.0000 0.0000 0.0000 / 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;
}

/* 暗夜模式字體優化 */
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;
}

/* 語言標題自動優化 */
.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);
}

/* 文檔段落優化 */
.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);
}

/* 輸入框語言優化 */
.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;
}

/* 響應式 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;
    }
}

/* 大屏幕上更接近印刷品 */
@media (min-width: 1200px) {
    .dazai-style {
        line-height: 2.1;
        max-width: 680px;
        margin: 0 auto;
    }
}

/* 手機上行距稍小 */
@media (max-width: 768px) {
    .dazai-style {
        line-height: 1.85;
        font-size: 0.95rem;
    }
}

/* ==================== 手機裝置專用樣式 ==================== */
/* 通过JS添加的类来控制手机布局 */
body.is-mobile-device .main-container {
    flex-direction: column;
}

body.is-mobile-device .diary-section {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px 20px;
}

body.is-mobile-device .calendar-section {
    display: none !important;
}

body.is-mobile-device .input-area {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 40px) !important;
    max-width: none !important;
    bottom: 20px !important;
}

body.is-mobile-device .diary-header {
    padding: 20px;
    margin-bottom: 30px;
}

body.is-mobile-device .date-primary {
    font-size: 24px;
}

body.is-mobile-device .date-secondary {
    font-size: 18px;
}

body.is-mobile-device .diary-entry,
body.is-mobile-device .roundstone-response {
    font-size: 22px !important;
}

body.is-mobile-device .whisper-entry {
    font-size: 20px;
}

/* 手机设备下的全屏模式调整 */
body.is-mobile-device .fullscreen-left,
body.is-mobile-device .fullscreen-right {
    width: 100%;
    padding: 20px;
}

body.is-mobile-device .fullscreen-left::after,
body.is-mobile-device .fullscreen-right::before {
    display: none;
}

/* 手机设备下的月度视图调整 */
body.is-mobile-device .month-title {
    font-size: 42px;
}

body.is-mobile-device .entry-list {
    margin-left: 20px;
}

body.is-mobile-device .entry-item {
    padding: 15px;
}

body.is-mobile-device .entry-date {
    font-size: 28px;
}

/* 确保所有容器都不会导致水平滚动 */
body.is-mobile-device,
body.is-mobile-device .main-container,
body.is-mobile-device .diary-section {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* ============================================================
   HDR 樣式增強 HDR Style Enhancements
   
   @media (dynamic-range: high) 套用
   讓 whisperPulse、呼吸動畫的高亮色突破 SDR 上限
   ============================================================ */

@media (dynamic-range: high) {

    /* whisperPulse：半透明背景升至 HDR 暖白 */
    @keyframes whisperPulse {
        0%,  100% { background-color: transparent; }
        50%        { background-color: color(display-p3 0.60 0.56 0.56 / 0.06); }
    }

    /* breathe：發光粒子在 HDR 下更亮 */
    @keyframes breathe {
        0%,  100% { opacity: 0.55; transform: scale(1); }
        50%        { opacity: 1;    transform: scale(1.25);
                     filter: brightness(1.35) saturate(1.2); }
    }

    /* main-container：背景漸層從 P3 升至 HDR 超白 */
    .main-container {
        background: linear-gradient(135deg,
            var(--hdr-paper-color) 0%,
            color(display-p3 0.9751 0.9689 0.9508) 100%);
    }

    /* diary-section：外框陰影加強深度 */
    .diary-section {
        box-shadow:
            0 4px 8px   color(display-p3 0 0 0 / 0.12),
            0 6px 20px  color(display-p3 0 0 0 / 0.12),
            inset -1px 0 126px color(display-p3 0 0 0 / 0.16),
            inset 0 -1px 126px color(display-p3 0.16 0.15 0.14 / 0.40);
    }

    /* 日期主色：暖金 HDR */
    .date-primary {
        color: color(display-p3 0.72 0.66 0.54);
    }

    /* 暗模式下 HDR 讓文字「自發光」 */
    .night-mode .diary-header,
    [data-theme="night"] .diary-header {
        box-shadow:
            0 2px 8px color(display-p3 0 0 0 / 0.20),
            inset 0 1px 3px  color(rec2020 0.45 0.52 0.48 / 0.18),
            inset 0 -1px 3px color(rec2020 0.36 0.70 0.85 / 0.12),
            inset 0 4px 12px color(display-p3 0 0 0 / 0.08),
            inset 0 -2px 6px color(display-p3 0 0 0 / 0.06);
    }
}

/* ─────────────────────────────────────────────
   HDR 夜間模式：深黑 + 螢光文字
───────────────────────────────────────────── */
@media (dynamic-range: high) and (prefers-color-scheme: dark) {

    .diary-section {
        box-shadow:
            0 4px 8px   color(display-p3 0 0 0 / 0.35),
            0 6px 20px  color(display-p3 0 0 0 / 0.35),
            inset -1px 0 126px color(display-p3 0 0 0 / 0.28),
            inset 0 -1px 126px color(display-p3 0.06 0.05 0.04 / 0.55);
    }

    /* 夜間 whisper 模式的青光在 HDR 下更幽靜 */
    .diary-section.whisper-mode {
        background-color: color(rec2020 0.0760 0.0800 0.0840);
    }
}

/* 訊息附件容器 */
.message-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* 附件圖片 */
.message-attachment-image {
    max-width: 240px;
    max-height: 240px;
    width: auto;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

.whisper-content .message-attachment-image {
    border: 1px solid rgba(var(--accent-rgb, 180, 130, 100), 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}