/* ==================== 全局导航 ==================== */
.memo-nav {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 24px; position:sticky; top:0; z-index:500;
    background:rgba(10,5,32,0.85); backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,0.04);
}
.memo-back { color:#7c6ba8; text-decoration:none; font-size:0.88em; transition:color .3s; }
.memo-back:hover { color:#c4b5e8; }
.memo-nav-title { color:#d0c4e8; font-size:0.95em; font-weight:500; letter-spacing:2px; }

.memo-container { max-width:960px; margin:0 auto; padding:24px 20px 60px; }

/* ==================== 左右双栏布局 ==================== */
.memo-layout {
    display:flex; gap:20px; align-items:flex-start;
}

/* 左侧备忘区 */
.memo-left {
    flex:1; min-width:0;
    background:rgba(255,255,255,0.02); border-radius:14px;
    border:1px solid rgba(255,255,255,0.05); padding:24px;
    min-height:460px; display:flex; flex-direction:column;
}
.memo-left-head {
    display:flex; justify-content:space-between; align-items:baseline;
    margin-bottom:20px; padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,0.05);
}
.memo-left-title { color:#9080c0; font-size:0.8em; font-weight:600; letter-spacing:2px; text-transform:uppercase; margin:0; }
.memo-left-date { color:#c0b4d8; font-size:0.85em; }

.memo-left-body {
    flex:1; display:flex; align-items:center; justify-content:center;
}
.memo-left-body.has-content { align-items:flex-start; justify-content:flex-start; flex-direction:column; }
.memo-empty-state { color:#4a3d68; font-size:0.8em; text-align:center; padding:20px 0; }
.memo-display-emoji { font-size:2.4em; margin-bottom:10px; line-height:1; }
.memo-display-text { color:#d0c4e8; font-size:0.95em; line-height:1.6; word-break:break-word; }

/* 编辑区 */
.memo-edit-area {
    border-top:1px solid rgba(255,255,255,0.05); padding-top:16px; margin-top:16px;
}
.memo-emoji-row { display:flex; gap:10px; margin-bottom:12px; justify-content:center; }
.memo-emoji-opt {
    width:40px; height:40px; display:flex; align-items:center; justify-content:center;
    font-size:1.4em; border-radius:10px; cursor:pointer;
    border:2px solid transparent; transition:all .2s;
}
.memo-emoji-opt:hover { background:rgba(255,255,255,0.06); }
.memo-emoji-opt.selected { border-color:#7c3aed; background:rgba(124,58,237,0.25); transform:scale(1.1); }
.memo-input {
    width:100%; padding:10px 14px; border-radius:10px;
    border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04);
    color:#d0c4e8; font-size:0.9em; outline:none; margin-bottom:12px; box-sizing:border-box;
}
.memo-input:focus { border-color:#7c3aed; }
.memo-input::placeholder { color:#4a3d68; }
.memo-edit-btns { display:flex; gap:10px; }
.memo-save-btn {
    flex:1; padding:10px; border:none; border-radius:10px;
    background:linear-gradient(135deg,#7c3aed,#a855f7); color:#fff;
    font-size:0.9em; cursor:pointer; transition:opacity .3s;
}
.memo-save-btn:hover { opacity:0.85; }
.memo-del-btn {
    padding:10px 18px; border:1px solid rgba(248,113,113,0.3); border-radius:10px;
    background:transparent; color:#f87171; font-size:0.85em; cursor:pointer; transition:.3s;
    display:none;
}
.memo-del-btn:hover { background:rgba(248,113,113,0.12); }

/* 右侧日历 */
.memo-right { width:380px; flex-shrink:0; }
.cal-nav {
    display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;
}
.cal-nav-btn {
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
    color:#8b7cb8; padding:5px 12px; border-radius:7px; cursor:pointer;
    font-size:0.8em; transition:all .2s;
}
.cal-nav-btn:hover { background:rgba(124,58,237,0.15); color:#d0c4e8; }
.cal-nav-title { color:#c0b4d8; font-size:0.95em; font-weight:500; }

.calendar-grid {
    background:rgba(255,255,255,0.02); border-radius:12px;
    border:1px solid rgba(255,255,255,0.04); overflow:hidden;
}
.cal-thead {
    display:grid; grid-template-columns:repeat(7,1fr);
    border-bottom:2px solid rgba(124,58,237,0.15);
    background:rgba(124,58,237,0.06);
}
.cal-th { padding:8px 0; text-align:center; font-size:0.72em; font-weight:600; color:#9080c0; }
.cal-tbody { display:grid; grid-template-columns:repeat(7,1fr); }
.cal-day {
    min-height:50px; padding:3px 4px 4px;
    border-right:1px solid rgba(255,255,255,0.02);
    border-bottom:1px solid rgba(255,255,255,0.03);
    display:flex; flex-direction:column; align-items:flex-end;
    cursor:pointer; transition:background .2s; position:relative;
}
.cal-day:nth-child(7n) { border-right:none; }
.cal-day.cal-empty { background:transparent; cursor:default; }
.cal-day.cal-today { background:rgba(124,58,237,0.12); }
.cal-day.cal-selected { background:rgba(124,58,237,0.22) !important; outline:1px solid rgba(124,58,237,0.3); }
.cal-day:hover:not(.cal-empty) { background:rgba(124,58,237,0.08); }
.cal-day.cal-today:hover { background:rgba(124,58,237,0.2); }

.cal-num {
    font-size:0.8em; color:#a8a0c0; line-height:1; margin-bottom:1px;
}
.cal-num-today {
    color:#fff; font-weight:700;
    background:rgba(124,58,237,0.4); border-radius:50%;
    width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
}
.cal-sub {
    font-size:0.55em; line-height:1.2; text-align:right;
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    color:#4a3d68;
}
.cal-sub.cal-holiday {
    color:#f87171; font-weight:600;
    background:rgba(248,113,113,0.1); padding:1px 4px; border-radius:2px;
}
.cal-emoji-dot { position:absolute; bottom:2px; left:3px; font-size:0.7em; }

/* 分隔线 */
.section-divider {
    height:1px; background:linear-gradient(90deg,transparent,rgba(124,58,237,0.2),transparent);
    margin:36px 0;
}

/* ==================== 留言板 ==================== */
.board-section { margin-top:8px; }
.board-section-header { display:flex; align-items:baseline; gap:12px; margin-bottom:16px; }
.board-section-header h2 { color:#d0c4e8; font-size:1.15em; font-weight:500; margin:0; }
.board-online-hint { color:#5a4d80; font-size:0.78em; }

.board-compose {
    background:rgba(255,255,255,0.03); border-radius:14px;
    border:1px solid rgba(255,255,255,0.05); padding:16px; margin-bottom:20px;
}
.board-identity { display:flex; gap:8px; margin-bottom:10px; }
.board-identity-btn {
    padding:4px 16px; border-radius:14px; font-size:0.8em;
    cursor:pointer; border:1px solid rgba(255,255,255,0.08);
    background:transparent; color:#6a5d90; transition:all .3s;
}
.board-identity-btn:hover { border-color:rgba(124,58,237,0.4); }
.board-identity-btn.active { background:rgba(124,58,237,0.25); border-color:#7c3aed; color:#d0c4e8; }

.board-emoji-bar { display:flex; flex-wrap:wrap; gap:2px; margin-bottom:10px; }
.bemoji {
    width:30px; height:30px; display:flex; align-items:center; justify-content:center;
    font-size:1.05em; cursor:pointer; border-radius:6px; transition:background .2s;
}
.bemoji:hover { background:rgba(255,255,255,0.08); }

.board-input-row { display:flex; gap:10px; }
.board-textarea {
    flex:1; padding:10px 14px; border-radius:12px; resize:none;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
    color:#d0c4e8; font-size:0.88em; font-family:inherit; outline:none;
    transition:border-color .3s;
}
.board-textarea:focus { border-color:#7c3aed; }
.board-textarea::placeholder { color:#4a3d68; }
.board-actions { display:flex; flex-direction:column; gap:6px; align-items:center; }
.board-img-upload-btn {
    width:36px; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.04); color:#d0c4e8; cursor:pointer;
    font-size:1.1em; display:flex; align-items:center; justify-content:center; transition:all .3s;
}
.board-img-upload-btn:hover { background:rgba(255,255,255,0.1); }
.board-submit-btn {
    padding:8px 16px; border-radius:10px; border:none;
    background:linear-gradient(135deg,#7c3aed,#a855f7); color:#fff;
    font-size:0.85em; cursor:pointer; transition:opacity .3s; white-space:nowrap;
}
.board-submit-btn:hover { opacity:0.85; }
.board-submit-btn:disabled { opacity:0.4; cursor:default; }

.board-img-preview { display:none; margin-top:10px; position:relative; }
.board-img-preview img { max-width:160px; max-height:120px; border-radius:8px; display:block; }
.board-img-preview button {
    position:absolute; top:-6px; right:-6px;
    width:22px; height:22px; border-radius:50%;
    background:rgba(248,113,113,0.9); color:#fff; border:none;
    cursor:pointer; font-size:0.8em; display:flex; align-items:center; justify-content:center;
}

.board-messages {
    display:flex; flex-direction:column; gap:14px;
    max-height:500px; overflow-y:auto; padding-right:4px;
}
.board-messages::-webkit-scrollbar { width:4px; }
.board-messages::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.08); border-radius:2px; }
.board-empty-msg { text-align:center; color:#4a3d68; font-size:0.85em; padding:40px 0; }

.bmsg { display:flex; align-items:flex-start; gap:8px; animation:bmsgIn .25s ease-out; }
@keyframes bmsgIn { from { opacity:0; transform:translateY(6px); } }
.bmsg.zhy { align-self:flex-start; }
.bmsg.qlf { align-self:flex-end; flex-direction:row-reverse; }
.bmsg.qlf .bmsg-body { align-items:flex-end; }
.bmsg-avatar { flex-shrink:0; width:30px; height:30px; border-radius:50%; object-fit:cover; }
.bmsg-body { display:flex; flex-direction:column; gap:2px; }
.bmsg-name { font-size:0.65em; color:#5a4d80; padding:0 4px; }
.bmsg-time { font-size:0.6em; color:#3d2d58; margin-top:2px; white-space:nowrap; }

.bmsg-bubble {
    padding:10px 14px; border-radius:14px; font-size:0.88em;
    line-height:1.5; word-break:break-word; max-width:340px;
}
.bmsg.zhy .bmsg-bubble { background:rgba(255,255,255,0.06); color:#d0c4e8; border-bottom-left-radius:4px; }
.bmsg.qlf .bmsg-bubble { background:rgba(124,58,237,0.18); color:#e0d5f5; border-bottom-right-radius:4px; }
.bmsg-img-bubble { padding:3px!important; background:transparent!important; }
.bmsg-image { border-radius:10px; max-width:200px; max-height:200px; cursor:pointer; transition:.2s; }
.bmsg-image:hover { opacity:0.9; }
.bmsg-image.zoomed { max-width:100%; max-height:400px; z-index:10; }

/* ==================== 密码弹窗（写日记页共享） ==================== */
.pwd-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.75);
    display:none; align-items:center; justify-content:center;
    z-index:2000; backdrop-filter:blur(4px);
}
.pwd-overlay.active { display:flex; }
.pwd-box {
    background:linear-gradient(135deg,#1e1b2e,#2d1b4e);
    border:1px solid rgba(255,255,255,0.1); border-radius:20px;
    padding:40px 35px; text-align:center; min-width:300px;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.pwd-avatar-row { display:flex; justify-content:center; gap:16px; margin-bottom:20px; }
.pwd-box p { color:#c0b4d8; font-size:0.95em; margin-bottom:16px; }
.pwd-box input {
    width:100%; padding:12px; border:1px solid rgba(255,255,255,0.15);
    border-radius:10px; background:rgba(255,255,255,0.05); color:#fff;
    font-size:1.1em; text-align:center; outline:none; margin-bottom:12px;
    letter-spacing:4px; box-sizing:border-box;
}
.pwd-box input:focus { border-color:#a855f7; }
.pwd-box button {
    width:100%; padding:12px; border:none; border-radius:10px;
    background:linear-gradient(135deg,#7c3aed,#a855f7); color:#fff;
    font-size:1.05em; cursor:pointer; transition:opacity .3s;
}
.pwd-box button:hover { opacity:0.9; }
.pwd-error { display:none; color:#f87171; font-size:0.85em; margin-top:8px; }

/* ==================== 响应式 ==================== */
@media (max-width:720px) {
    .memo-layout { flex-direction:column; }
    .memo-right { width:100%; }
    .memo-left { min-height:200px; }
    .memo-left { padding:16px; }
    .memo-right { padding:0 16px; }
    .board-section { padding:0 16px; }
    .cal-day { min-height:48px; padding:4px 2px 4px; }
    .cal-num { font-size:0.75em; }
    .cal-sub { font-size:0.5em; }
    .cal-emoji-dot { font-size:0.6em; }
    .bmsg-bubble { max-width:260px; }
}
@media (max-width:480px) {
    .memo-container { padding:12px 8px 30px; }
    .memo-layout { gap:12px; }
    .memo-left { padding:12px; }
    .memo-right { padding:0 8px; }
    .board-section { padding:0 8px; }
    .cal-day { min-height:40px; padding:2px 1px 2px; }
    .cal-num { font-size:0.7em; }
    .cal-sub { font-size:0.45em; }
    .bmsg-bubble { max-width:220px; font-size:0.82em; }
    .board-compose { padding:12px; }
    .board-emoji-bar { gap:0; }
    .bemoji { width:26px; height:26px; font-size:0.95em; }
}