/* ============================================================
   diary.css · 日记 App（手账纸张皮肤）
   ------------------------------------------------------------
   「一个 App = 一种材质」试点：日记 = 纸。
   所有规则都收在 #page-diary 作用域内，不影响手机外壳的紫色玻璃风。
   ============================================================ */

#page-diary {
    /* ===== 纸张配色（局部变量，不污染 :root）===== */
    --paper: #F7F2E7;
    --paper-2: #FFFDF6;
    --paper-edge: #E3D8BF;
    --ink: #3B3226;
    --ink-2: #6B5E4A;
    --ink-dim: #9A8B72;
    --rule: rgba(59, 50, 38, 0.09);
    --rule-2: rgba(59, 50, 38, 0.18);
    --seal: #C05A50;
    --tape: rgba(233, 220, 180, 0.85);
    --note-bg: #FBEFA6;
    --note-bg-2: #EDF3C4;
    --line-h: 30px;

    margin: 0 -16px;
    padding: 0 32px;
    padding-top: var(--statusbar-h);
    background: var(--paper);
    color: var(--ink);
    font-family: 'Noto Serif SC', Georgia, serif;
    -webkit-tap-highlight-color: transparent;
}

/* ===== 顶部标题栏 ===== */
.diary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 0 8px;
    flex-shrink: 0;
    border-bottom: 2px solid var(--rule-2);
}
.diary-back {
    font-size: 20px;
    line-height: 1;
    color: var(--ink-2);
    padding: 2px 8px 2px 0;
    cursor: pointer;
    user-select: none;
}
.diary-back:active {
    color: var(--seal);
}

/* 全局 * 会把每个元素都设成 system-ui，所以这里必须逐级覆盖回衬线体；
   「手写体」标题用 #page-diary 前缀提高优先级，避免被上面这条压掉。 */
#page-diary * {
    font-family: 'Noto Serif SC', Georgia, serif;
}
#page-diary .diary-header-title {
    font-family: 'Ma Shan Zheng', 'Noto Serif SC', cursive;
    font-size: 25px;
    letter-spacing: 3px;
    color: var(--ink);
}
.diary-header-right {
    font-size: 12px;
    color: var(--ink-dim);
    letter-spacing: 1px;
    padding: 2px 0;
    cursor: pointer;
    user-select: none;
}

/* ===== 标签页（像手账的索引贴）===== */
.diary-tabs {
    display: flex;
    gap: 18px;
    padding: 10px 0 6px;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.diary-tabs::-webkit-scrollbar {
    display: none;
}
.diary-tab {
    font-size: 14px;
    color: var(--ink-dim);
    padding-bottom: 5px;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .18s, border-color .18s;
    user-select: none;
}
.diary-tab.active {
    color: var(--ink);
    font-weight: 700;
    border-bottom-style: dashed;
    border-bottom-color: var(--ink-2);
}

/* ===== 正文区（纸 + 横格）===== */
.diary-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0 92px;
    background: var(--paper);
}
.diary-pane {
    display: none;
}
.diary-pane.active {
    display: block;
    background-image: repeating-linear-gradient(180deg,
        transparent 0,
        transparent calc(var(--line-h) - 1px),
        var(--rule) calc(var(--line-h) - 1px),
        var(--rule) var(--line-h));
    background-position: 0 16px;
}

/* 日期分隔 */
.diary-day {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 12px;
}
.diary-day:first-child {
    margin-top: 10px;
}
.diary-day-line {
    flex: 1;
    height: 1px;
    background: var(--rule-2);
}
#page-diary .diary-day-label {
    font-family: 'Ma Shan Zheng', 'Noto Serif SC', cursive;
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--ink-2);
}

/* ===== 我的日记：贴在本子上的纸片 ===== */
.diary-entry {
    position: relative;
    background: var(--paper-2);
    border: 1px solid rgba(90, 75, 50, 0.16);
    border-radius: 3px;
    padding: 18px 14px 14px;
    margin: 0 0 24px;
    box-shadow: 0 2px 0 rgba(90, 75, 50, 0.06), 0 12px 22px -16px rgba(60, 45, 25, 0.7);
    transform: rotate(var(--rot, 0deg));
    transition: transform .18s, box-shadow .18s;
    cursor: pointer;
}
.diary-entry:nth-child(3n+1) {
    --rot: -0.45deg;
}
.diary-entry:nth-child(3n+2) {
    --rot: 0.35deg;
}
.diary-entry:active {
    transform: rotate(0deg) scale(.995);
}
/* 撕纸口（顶部锯齿） */
.diary-entry::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -6px;
    height: 6px;
    background: var(--paper-2);
    clip-path: polygon(0 100%, 3% 30%, 7% 92%, 12% 22%, 18% 84%, 24% 28%, 31% 90%, 38% 20%,
            45% 82%, 52% 26%, 60% 88%, 68% 22%, 75% 86%, 82% 28%, 89% 90%, 95% 30%, 100% 100%);
}
/* 胶带 */
.diary-tape {
    position: absolute;
    top: -11px;
    left: 50%;
    width: 62px;
    height: 20px;
    margin-left: -31px;
    background: var(--tape);
    transform: rotate(-2.5deg);
    border-radius: 1px;
    opacity: .9;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 1px 3px rgba(90, 75, 50, 0.18);
}
.diary-tape.right {
    left: auto;
    right: 16px;
    margin-left: 0;
    transform: rotate(3deg);
}
.diary-entry-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.diary-entry-time {
    font-size: 11px;
    letter-spacing: .5px;
    color: var(--ink-dim);
}
.diary-mood {
    font-size: 11px;
    color: var(--seal);
    border: 1px solid rgba(192, 90, 80, 0.4);
    border-radius: 999px;
    padding: 0 8px;
    line-height: 17px;
}
.diary-entry-text {
    font-size: 14.5px;
    line-height: 28px;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
}
.diary-entry-more {
    font-size: 12px;
    color: var(--ink-dim);
    margin-top: 4px;
}
/* 日期印章 */
.diary-stamp {
    position: absolute;
    right: 12px;
    bottom: 10px;
    transform: rotate(-8deg);
    border: 1.5px solid rgba(192, 90, 80, 0.5);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    letter-spacing: 1px;
    color: rgba(192, 90, 80, 0.78);
}
/* ===== 计划便签（便利贴）===== */
.diary-note {
    position: relative;
    background: var(--note-bg);
    border-radius: 2px;
    padding: 12px 13px 11px;
    margin: 0 0 16px;
    box-shadow: 0 8px 16px -12px rgba(60, 45, 25, 0.85);
    transform: rotate(var(--rot, 0deg));
    cursor: pointer;
}
.diary-note:nth-child(even) {
    --rot: .5deg;
    background: var(--note-bg-2);
}
/* 便利贴的折角 */
.diary-note::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    border-width: 0 0 14px 14px;
    border-style: solid;
    border-color: transparent transparent rgba(120, 100, 60, 0.18) transparent;
}
.diary-note.expired {
    background: #EDEAE3;
    border: 1px dashed rgba(90, 75, 50, 0.35);
    box-shadow: none;
    opacity: .78;
    transform: none;
}
.diary-note.expired .diary-note-text {
    color: var(--ink-dim);
}
.diary-note.done {
    opacity: .55;
}
.diary-note.done .diary-note-text {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}
.diary-note-who {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--ink-2);
}
.diary-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(90, 75, 50, 0.14);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--ink-2);
    overflow: hidden;
}
.diary-note-text {
    font-size: 14px;
    line-height: 21px;
    color: var(--ink);
    margin-top: 7px;
    word-break: break-word;
}
.diary-note-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.diary-note-time {
    font-size: 11px;
    color: var(--ink-dim);
}
.diary-vis {
    font-size: 10px;
    line-height: 15px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid rgba(90, 75, 50, 0.28);
    color: var(--ink-dim);
}
.diary-vis.scene {
    border-color: rgba(120, 140, 70, 0.5);
    color: rgba(96, 112, 54, 0.95);
}
.diary-vis.user {
    border-color: rgba(192, 90, 80, 0.42);
    color: rgba(176, 82, 72, 0.95);
}
/* 「待定」便签：只有范围、没定钟点（这周 / 这周末 / 最近） */
.diary-vis.pending {
    border-style: dashed;
    border-color: rgba(186, 138, 42, 0.55);
    color: rgba(160, 116, 30, 0.95);
}
.diary-note.pending {
    border-style: dashed;
    border-color: rgba(186, 138, 42, 0.4);
}

/* ===== 空状态 ===== */
.diary-empty {
    text-align: center;
    padding: 46px 22px 30px;
    color: var(--ink-dim);
    font-size: 13px;
    line-height: 24px;
}
#page-diary .diary-empty-title {
    font-family: 'Ma Shan Zheng', 'Noto Serif SC', cursive;
    font-size: 21px;
    color: var(--ink-2);
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.diary-empty-tip {
    font-size: 12px;
    color: var(--ink-dim);
    margin-top: 10px;
    opacity: .9;
}

/* ===== 写日记按钮 ===== */
#page-diary .diary-write-btn {
    position: absolute;
    right: 34px;
    bottom: 20px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 17px;
    border: none;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-family: 'Ma Shan Zheng', 'Noto Serif SC', cursive;
    font-size: 15px;
    letter-spacing: 1.5px;
    cursor: pointer;
    box-shadow: 0 10px 20px -10px rgba(59, 50, 38, 0.85);
    transition: transform .15s;
}
.diary-write-btn:active {
    transform: scale(.96);
}
.diary-write-btn.hidden {
    display: none !important;
}

/* ===== 页脚：一行落款，不是按钮 ===== */
.diary-foot {
    flex: none;
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 26px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rule);
    background: var(--paper);
}
.diary-foot-l {
    font-size: 11px;
    color: var(--ink-dim);
    letter-spacing: .5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.diary-foot-acts {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: none;
}
.diary-foot-act {
    border: 0;
    background: none;
    padding: 2px 0;
    font-family: inherit;
    font-size: 14px;
    letter-spacing: .5px;
    color: var(--ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.diary-foot-act:active { opacity: .6; }
.diary-foot-act i {
    font-style: normal;
    opacity: .45;
    margin-left: 4px;
}
.diary-foot-act.sub {
    font-size: 13px;
    color: var(--ink-2);
}
.diary-foot-sep {
    font-size: 11px;
    color: var(--ink-dim);
    opacity: .55;
}
.diary-foot .hidden { display: none !important; }

/* ===== 角色日记：纸飘起来看全文 ===== */
.diary-letter-mask {
    /* 用 fixed：日记页本身有 -16px 外边距，absolute 会把纸算宽 */
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    background: rgba(30, 22, 18, 0);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    transition: background .26s ease, backdrop-filter .26s ease;
}
.diary-letter-mask.active {
    display: block;
    background: rgba(30, 22, 18, .40);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.diary-letter-sheet {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 44px;
    bottom: 44px;
    display: flex;
    flex-direction: column;
    background: var(--paper-2);
    border: 1px solid var(--rule-2);
    border-radius: 4px;
    box-shadow: 0 40px 70px -34px rgba(40, 28, 16, .60);
    overflow: hidden;
    will-change: transform;
}
.diary-letter-grab {
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: rgba(59, 50, 38, .18);
    margin: 9px auto 2px;
    flex: none;
}
.diary-letter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 8px 18px 10px;
    border-bottom: 1px solid var(--rule);
    flex: none;
}
.diary-letter-who {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--ink-dim);
    letter-spacing: .8px;
}
.diary-letter-av {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #E7DCC4;
    color: var(--ink-2);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}
.diary-letter-close {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    color: var(--ink-2);
    cursor: pointer;
}
.diary-letter-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px 8px;
    position: relative;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 30px), transparent 100%);
}
.diary-letter-full {
    font-size: 16px;
    line-height: 2;
    letter-spacing: .2px;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
}
.diary-letter-sheet-sign {
    text-align: right;
    padding: 4px 20px 8px;
    font-size: 14px;
    color: var(--ink-2);
    letter-spacing: 3px;
    flex: none;
}
.diary-letter-sheet-foot {
    flex: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 10px 20px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rule);
    font-size: 11px;
    color: var(--ink-dim);
}
.diary-letter-act {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
}

/* ===== 同步给角色（底部抽屉） ===== */
.diary-sync-mask {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: flex-end;
    background: rgba(30, 22, 18, .38);
}
.diary-sync-mask.active { display: flex; }
.diary-sync-sheet {
    width: 100%;
    background: var(--paper-2);
    border-top: 1px solid var(--rule-2);
    border-radius: 14px 14px 0 0;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -18px 40px -28px rgba(60, 45, 25, .9);
}
.diary-sync-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 10px;
}
.diary-sync-title { font-size: 15px; color: var(--ink); letter-spacing: .5px; }
.diary-sync-all {
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 12px;
    color: var(--seal);
    cursor: pointer;
}
.diary-sync-list { max-height: 46vh; overflow-y: auto; }
.diary-sync-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--rule);
    cursor: pointer;
}
.diary-sync-row:last-child { border-bottom: 0; }
.diary-sync-box {
    width: 15px;
    height: 15px;
    flex: none;
    border: 1px solid var(--ink-dim);
    border-radius: 3px;
    position: relative;
}
.diary-sync-row.on .diary-sync-box { background: var(--seal); border-color: var(--seal); }
.diary-sync-row.on .diary-sync-box::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border-right: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: rotate(40deg);
}
.diary-sync-name { font-size: 14px; color: var(--ink); }
.diary-sync-tip {
    margin-top: 8px;
    font-size: 11px;
    color: var(--ink-dim);
    line-height: 1.6;
}
.diary-sync-foot {
    display: flex;
    gap: 10px;
    padding-top: 12px;
}
.diary-sync-btn {
    flex: 1;
    padding: 10px 0;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink-2);
    background: none;
    border: 1px solid var(--rule-2);
    border-radius: 10px;
    cursor: pointer;
}
.diary-sync-btn.primary {
    color: #FFF;
    background: var(--seal);
    border-color: var(--seal);
}

/* ===== 编辑浮层 ===== */
.diary-editor-mask {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: none;
    align-items: flex-end;
    background: rgba(32, 24, 14, 0.42);
}
.diary-editor-mask.active {
    display: flex;
}
.diary-editor {
    width: 100%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 30px -14px rgba(40, 30, 15, 0.8);
    padding: 12px 16px 16px;
}
.diary-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--rule-2);
}
.diary-editor-btn {
    font-size: 14px;
    color: var(--ink-2);
    padding: 2px 4px;
    cursor: pointer;
    user-select: none;
}
.diary-editor-btn.primary {
    color: var(--seal);
    font-weight: 700;
}
.diary-editor-date {
    font-size: 12px;
    color: var(--ink-dim);
    letter-spacing: .5px;
}
.diary-editor-moods {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 0 2px;
}
.diary-mood-chip {
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(90, 75, 50, 0.25);
    color: var(--ink-dim);
    cursor: pointer;
    user-select: none;
}
.diary-mood-chip.active {
    border-color: rgba(192, 90, 80, 0.6);
    color: var(--seal);
    background: rgba(192, 90, 80, 0.07);
}
.diary-editor-text {
    flex: 1;
    min-height: 170px;
    margin-top: 8px;
    padding: 0;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    background-image: repeating-linear-gradient(180deg,
        transparent 0,
        transparent calc(28px - 1px),
        var(--rule) calc(28px - 1px),
        var(--rule) 28px);
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
    line-height: 28px;
}
.diary-editor-text::placeholder {
    color: var(--ink-dim);
    opacity: .7;
}
.diary-editor-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    font-size: 11px;
    color: var(--ink-dim);
}
.diary-editor-del {
    color: var(--seal);
    cursor: pointer;
    user-select: none;
}

/* ===== 便签操作浮层 ===== */
.diary-sheet {
    width: 100%;
    background: var(--paper);
    border-radius: 16px 16px 0 0;
    padding: 14px 16px 16px;
    box-shadow: 0 -12px 30px -14px rgba(40, 30, 15, 0.8);
}
#page-diary .diary-sheet-title {
    font-family: 'Ma Shan Zheng', 'Noto Serif SC', cursive;
    font-size: 17px;
    letter-spacing: 1px;
    color: var(--ink);
    margin-bottom: 8px;
}
.diary-sheet-body {
    font-size: 13px;
    line-height: 21px;
    color: var(--ink-2);
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--rule-2);
}
.diary-sheet-actions {
    display: flex;
    gap: 10px;
    padding-top: 12px;
}
.diary-sheet-btn {
    flex: 1;
    padding: 9px 0;
    border: 1px solid rgba(90, 75, 50, 0.28);
    border-radius: 8px;
    background: transparent;
    color: var(--ink-2);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}
.diary-sheet-btn:active {
    background: rgba(90, 75, 50, 0.08);
}
.diary-sheet-btn.danger {
    border-color: rgba(192, 90, 80, 0.5);
    color: var(--seal);
}
.diary-sheet-btn.hidden {
    display: none !important;
}
.diary-sheet-btn.primary {
    border-color: rgba(192, 90, 80, 0.55);
    color: var(--paper-2);
    background: var(--seal);
}
.diary-sheet-btn.primary:active {
    background: #A94A42;
}

/* ===== 交换日记（P2）=====
   同一个 .diary-write-btn 位置：「写今天的日记」只在「我的日记」出现，
   「⇄ 交换日记」/「✍️ 让 TA 写一篇」只在「角色日记」出现，
   后两者上下摞在右下角，不会和「写今天的日记」同时显示。 */
#page-diary .diary-write-btn.diary-swap-open {
    background: var(--paper-2);
    color: var(--seal);
    border: 1px solid rgba(192, 90, 80, 0.45);
    box-shadow: 0 8px 16px -10px rgba(59, 50, 38, 0.7);
}
#page-diary .diary-write-btn.diary-solo-open {
    bottom: 72px;
    background: var(--paper-2);
    color: var(--ink);
    border: 1px solid rgba(90, 75, 50, 0.28);
    box-shadow: 0 8px 16px -10px rgba(59, 50, 38, 0.6);
}
.diary-solo-tip {
    padding: 10px 0 4px;
    font-size: 12px;
    color: var(--ink-dim);
    line-height: 1.6;
}
/* 「角色日记」页右下角摞着两个按钮，底部多留一点，别压住最后一张纸片 */
#page-diary .diary-pane#diaryPaneChars {
    padding-bottom: 36px;
}
.diary-swap-sheet {
    max-height: 86%;
    overflow-y: auto;
}
.diary-swap-chars {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 2px 0 10px;
    border-bottom: 1px dashed var(--rule-2);
}
.diary-swap-char {
    font-size: 12px;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid rgba(90, 75, 50, 0.25);
    color: var(--ink-dim);
    cursor: pointer;
    user-select: none;
}
.diary-swap-char.active {
    border-color: rgba(192, 90, 80, 0.6);
    color: var(--seal);
    background: rgba(192, 90, 80, 0.07);
}
.diary-swap-body {
    padding-top: 10px;
}
.diary-swap-col + .diary-swap-col {
    margin-top: 12px;
}
.diary-swap-col-title {
    font-size: 12px;
    color: var(--ink-dim);
    letter-spacing: .5px;
    margin-bottom: 6px;
}
.diary-swap-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.diary-swap-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid rgba(90, 75, 50, 0.18);
    border-radius: 8px;
    background: var(--paper-2);
    cursor: pointer;
    user-select: none;
}
.diary-swap-row.active {
    border-color: rgba(192, 90, 80, 0.55);
    background: rgba(192, 90, 80, 0.06);
}
.diary-swap-tick {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border: 1px solid rgba(90, 75, 50, 0.35);
    border-radius: 3px;
    font-size: 10px;
    line-height: 12px;
    text-align: center;
    color: transparent;
}
.diary-swap-row.active .diary-swap-tick {
    border-color: var(--seal);
    color: var(--seal);
}
.diary-swap-when {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--ink-dim);
}
.diary-swap-snippet {
    font-size: 13px;
    line-height: 19px;
    color: var(--ink-2);
    overflow: hidden;
}
.diary-swap-none {
    font-size: 12px;
    color: var(--ink-dim);
    padding: 6px 0;
}
.diary-swap-status {
    min-height: 18px;
    font-size: 12px;
    color: var(--ink-dim);
    padding-top: 10px;
}
.diary-swap-status.err {
    color: var(--seal);
}

/* 纸片上的小标记：回信 / 已交换 / 给你看过 */
.diary-mark {
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid rgba(90, 75, 50, 0.28);
    font-size: 10px;
    letter-spacing: .5px;
    color: var(--ink-dim);
}
.diary-mark.reply {
    border-color: rgba(192, 90, 80, 0.55);
    color: var(--seal);
}
.diary-mark.shared {
    border-color: rgba(92, 122, 84, 0.5);
    color: #5C7A54;
}

/* ============================================================
   三个 tab 的新版式（按设计稿）
     我的日记 = 一页纸 + 左边时间栏 + 一条竖线
     角色日记 = 一封信（抬头 / 正文 / 落款 / 页脚）
     计划便签 = 稿纸清单（方框 + 同步按钮）
   ============================================================ */

/* 新版式：卡片自己就是纸，底下不再铺稿纸横线 */
.diary-pane.active {
    background-image: none;
}

/* ---------- 页眉：日期 + 条数 ---------- */.diary-day {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 18px 2px 8px;
}
.diary-day-date {
    font-size: 18px;
    letter-spacing: .5px;
    color: var(--ink);
}
.diary-day-date small {
    font-size: 11px;
    color: var(--ink-2);
    margin-left: 8px;
    letter-spacing: .5px;
}
.diary-day-count {
    font-size: 11px;
    color: var(--ink-2);
    letter-spacing: .5px;
}

/* ---------- 我的日记：一页纸 ---------- */
.diary-page { margin-bottom: 22px; }
.diary-page-body {
    position: relative;
    background: var(--paper-2);
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    padding: 2px 0;
    box-shadow: 0 14px 28px -28px rgba(60, 45, 25, .8);
}
.diary-page-body::before {
    content: '';
    position: absolute;
    left: 66px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--rule);
}
.diary-row {
    display: flex;
    align-items: flex-start;
    padding: 12px 14px 13px 0;
    border-bottom: 1px solid var(--rule);
    cursor: pointer;
}
.diary-row:last-child { border-bottom: 0; }
.diary-row-time {
    width: 66px;
    flex: none;
    text-align: right;
    padding-right: 12px;
    font-size: 11px;
    line-height: 1.9;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.diary-row-main { flex: 1; min-width: 0; padding-left: 14px; }
.diary-row-mood {
    font-size: 11px;
    color: var(--ink-dim);
    letter-spacing: .6px;
    margin-bottom: 3px;
}
.diary-row-text {
    font-size: 15px;
    line-height: 1.85;
    color: var(--ink);
    letter-spacing: .2px;
    white-space: pre-wrap;
    word-break: break-word;
}
.diary-row-more {
    margin-top: 4px;
    font-size: 11px;
    color: var(--ink-dim);
}

/* ---------- 角色日记：一封信 ---------- */
.diary-letter {
    position: relative;
    background: var(--paper-2);
    border: 1px solid var(--rule-2);
    border-radius: 2px;
    padding: 14px 16px 12px;
    margin-bottom: 14px;
    box-shadow: 0 14px 28px -28px rgba(60, 45, 25, .8);
    cursor: pointer;
}
.diary-letter-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
}
.diary-letter-who {
    font-size: 11.5px;
    color: var(--ink-dim);
    letter-spacing: .8px;
}
.diary-letter-text {
    font-size: 15px;
    line-height: 1.85;
    color: var(--ink);
    letter-spacing: .2px;
    white-space: pre-wrap;
    word-break: break-word;
}
/* 列表里的信：落款和页脚 */
.diary-letter-sign {
    text-align: right;
    font-size: 13px;
    color: var(--ink-2);
    letter-spacing: 3px;
    margin-top: 8px;
}
.diary-letter-foot {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
    font-size: 11px;
    color: var(--ink-dim);
    letter-spacing: .4px;
}
.diary-letter-foot .diary-dot { opacity: .5; }

/* ---------- 计划便签：稿纸清单 ---------- */
.diary-grp { margin-bottom: 20px; }
/* 「全部同步给…」：一排安静的文字按钮，放在清单最上面 */
.diary-plan-bulk {
    display: flex;
    justify-content: flex-end;
    padding: 0 2px 6px;
}
.diary-plan-bulk button {
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 11.5px;
    color: var(--ink-dim);
    letter-spacing: .4px;
    padding: 2px 0;
    cursor: pointer;
}
.diary-grp-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 0 6px;
    font-size: 12px;
    color: var(--ink-2);
    letter-spacing: 1.2px;
}
.diary-grp-bar {
    width: 12px;
    height: 1px;
    background: var(--seal);
    flex: none;
}
.diary-grp-label { color: var(--ink); font-weight: 500; }
.diary-grp-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--ink-dim);
    letter-spacing: .5px;
}
.diary-plan {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 0 12px;
    border-bottom: 1px solid var(--rule);
}
.diary-plan:last-child { border-bottom: 0; }
.diary-plan-box {
    width: 13px;
    height: 13px;
    flex: none;
    margin-top: 4px;
    border: 1px solid var(--ink-dim);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}
.diary-plan-box.on { background: var(--ink-dim); border-color: var(--ink-dim); }
.diary-plan-box.on::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 1px;
    width: 4px;
    height: 7px;
    border-right: 1.4px solid var(--paper);
    border-bottom: 1.4px solid var(--paper);
    transform: rotate(40deg);
}
.diary-plan-main { flex: 1; min-width: 0; }
.diary-plan-text {
    display: block;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink);
    letter-spacing: .2px;
}
.diary-plan-sub {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--ink-dim);
}
.diary-plan.done .diary-plan-text {
    color: var(--ink-dim);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.diary-plan-sync {
    flex: none;
    margin-top: 2px;
    padding: 3px 9px;
    font-size: 11px;
    font-family: inherit;
    color: var(--ink-dim);
    background: none;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.diary-plan-sync.on {
    color: var(--seal);
    border-color: rgba(192, 90, 80, .45);
    background: rgba(192, 90, 80, .07);
}