:root {
    --bg-primary: #FBF7F0;
    --bg-paper: #F5E8C9;
    --text-primary: #2C2C2C;
    --text-secondary: #8E8E93;
    --text-paper: #6B5E4A;
    --accent: #AE8A5E;
    --accent-light: #C9A87C;
    --accent-dark: #8B6F4E;
    --border-light: #E5DFD7;
    --border-paper: #C5B088;
    --border-paper-light: #C5B088;
    --white: #FFFFFF;
    --danger: #E74C3C;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.15);
    --shadow-xl: 0 20px 50px rgba(0,0,0,0.3);
    --font-serif: 'KaiTi','楷体','STKaiti','华文楷体','Noto Serif SC','Source Han Serif SC',serif;
    --font-sans: 'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 40px;
    --transition: 0.2s ease;
    --diary-font-size: 15px;
    --diary-line-height: 1.8;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family:var(--font-serif);
    background:#1A1A1A;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    min-height:100dvh;
    padding: clamp(4px, 2vw, 16px);
    -webkit-tap-highlight-color:transparent;
}
.app-container {
    width: min(100%, 420px);
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    background:var(--bg-primary);
    border-radius: 0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    margin:0 auto;
}
.status-bar {
    height: 40px;
    background: var(--bg-primary);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}
.main-screen { flex:1; display:flex; flex-direction:column; overflow:hidden; min-height:0; }
.top-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 14px;
    height:36px;
    background:var(--bg-primary);
    border-bottom:0.5px solid var(--border-light);
    flex-shrink:0;
    font-family:var(--font-sans);
}
.app-title { font-weight:700; font-size:17px; color:var(--text-primary); }
.top-actions { display:flex; gap:4px; align-items:center; }
.top-btn {
    background:none;
    border:none;
    font-size:12px;
    color:var(--text-primary);
    cursor:pointer;
    font-family:var(--font-sans);
    padding:6px 8px;
    border-radius:var(--radius-sm);
    display:flex;
    align-items:center;
    gap:3px;
}
.top-btn:hover { background:rgba(174,138,94,0.1); }
.top-btn svg { stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.login-row {
    padding:4px 16px;
    font-size:11px;
    color:var(--text-secondary);
    background:var(--bg-primary);
    border-bottom:0.5px solid var(--border-light);
    flex-shrink:0;
    font-family:var(--font-sans);
    cursor:pointer;
}
.dropdown {
    position:absolute;
    background:var(--white);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg);
    z-index:100;
    display:none;
    flex-direction:column;
    min-width:130px;
    padding:6px 0;
    font-family:var(--font-sans);
}
.dropdown-item {
    padding:11px 16px;
    font-size:13px;
    color:var(--text-primary);
    cursor:pointer;
    white-space:nowrap;
    display:flex;
    align-items:center;
    gap:6px;
}
.dropdown-item:hover { background:rgba(174,138,94,0.08); }
.dropdown-item svg { stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.notebook-wrapper { flex:1; padding:6px 10px; display:flex; flex-direction:column; min-height:0; }
.diary-notebook {
    flex: 1;
    background: var(--bg-paper);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    position: relative;
}
.notebook-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 14px 6px;
    font-family:var(--font-sans);
    flex-shrink:0;
}
.date-section { display:flex; align-items:center; gap:4px; }
.calendar-btn { background:none; border:none; cursor:pointer; padding:4px; display:flex; align-items:center; }
.calendar-btn svg { stroke:var(--text-primary); stroke-linecap:round; stroke-linejoin:round; }
.date-display { font-size:13px; font-weight:600; color:var(--text-primary); }
.lunar-time { font-size:10px; color:var(--text-paper); }
.mood-btn { background:none; border:none; cursor:pointer; padding:4px; display:flex; align-items:center; }
.mood-btn svg { stroke:var(--text-primary); stroke-linecap:round; stroke-linejoin:round; }
.page-indicator { font-size:11px; color:var(--text-paper); font-family:var(--font-sans); }
.dashed-line { border-bottom:2px dashed var(--border-paper); margin:0 14px; flex-shrink:0; }
.divider-strong { border-bottom:2px dashed var(--border-paper); margin:0 14px; flex-shrink:0; }
.diary-content {
    flex:1;
    padding:6px 14px 8px 14px;
    font-size:var(--diary-font-size);
    line-height:var(--diary-line-height);
    color:var(--text-primary);
    overflow-y:auto;
    white-space:pre-wrap;
    outline:none;
    caret-color:var(--accent);
    font-family:var(--font-serif);
    min-height:0;
    position:relative;
    z-index:1;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent calc(var(--diary-font-size) * var(--diary-line-height) - 0.5px),
        rgba(197, 176, 136, 0.5) calc(var(--diary-font-size) * var(--diary-line-height) - 0.5px),
        rgba(197, 176, 136, 0.5) calc(var(--diary-font-size) * var(--diary-line-height) + 0.5px),
        transparent calc(var(--diary-font-size) * var(--diary-line-height) + 0.5px)
    );
    background-size: 100% calc(var(--diary-font-size) * var(--diary-line-height));
    background-position: 0 0;
    background-repeat: repeat-y;
    background-attachment: local;
}
.media-row {
    display:flex;
    align-items:center;
    gap:10px;
    padding:4px 14px 6px;
    font-family:var(--font-sans);
    flex-shrink:0;
}
.photo-thumbs { display:flex; gap:6px; align-items:center; flex:1; }
.thumb {
    width:36px;
    height:36px;
    background:#D9C8A8;
    border-radius:var(--radius-xs);
    border:1.5px solid var(--border-paper);
    cursor:pointer;
    flex-shrink:0;
    background-size:cover;
    background-position:center;
}
.thumb-add {
    width: 36px;
    height: 36px;
    background: var(--bg-paper);
    border: 1.5px dashed var(--border-paper);
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-paper);
    flex-shrink: 0;
}
.more-photos { font-size:18px; color:var(--text-paper); cursor:pointer; }
.voice-archive-btn { background:none; border:none; cursor:pointer; padding:6px; display:flex; align-items:center; }
.voice-archive-btn svg { stroke:var(--text-paper); stroke-linecap:round; stroke-linejoin:round; }
.bottom-nav {
    display:flex;
    justify-content:space-around;
    align-items:center;
    padding:4px 0 12px;
    background:var(--bg-primary);
    border-top:0.5px solid var(--border-light);
    font-family:var(--font-sans);
    flex-shrink:0;
}
.nav-item {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1px;
    cursor:pointer;
    background:none;
    border:none;
    color:var(--text-secondary);
    font-size:10px;
    padding:3px 10px;
}
.nav-item .nav-icon { display:flex; align-items:center; justify-content:center; height:20px; }
.nav-item .nav-icon svg { stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; width:20px; height:20px; }
.nav-item:hover { color:var(--accent); }
.nav-item.recording { color:var(--danger); animation:pulse 0.8s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.08);} }
.mood-panel { position:absolute; background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); z-index:100; display:none; padding:10px; gap:6px; }
.mood-emoji { cursor:pointer; padding:7px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; }
.mood-emoji:hover { background:rgba(174,138,94,0.1); }
.mood-emoji.selected { background:rgba(174,138,94,0.15); outline:2px solid var(--accent); outline-offset:-2px; }
.mood-emoji svg { stroke:var(--text-primary); stroke-linecap:round; stroke-linejoin:round; }
.calendar-modal {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:var(--white);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    z-index:200;
    display:none;
    padding:18px;
    width:min(330px, 90%);
    font-family:var(--font-sans);
}
.calendar-modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.calendar-month-title { font-weight:600; font-size:16px; color:var(--text-primary); }
.calendar-nav-btn { background:none; border:none; font-size:18px; cursor:pointer; color:var(--accent); padding:6px 10px; border-radius:50%; }
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; }
.calendar-day-header { font-size:11px; color:var(--text-secondary); padding:6px 0; }
.cal-day { padding:8px 0; cursor:pointer; border-radius:var(--radius-sm); font-size:13px; }
.cal-day:hover { background:rgba(174,138,94,0.1); }
.cal-day.today { background:var(--accent); color:white; }
.cal-day .solar { font-weight:500; }
.cal-day .lunar { font-size:9px; color:var(--text-secondary); display:block; }
.cal-day.today .lunar { color:rgba(255,255,255,0.8); }
.day-option-panel { display:flex; gap:8px; margin-top:14px; justify-content:center; }
.day-option-btn { background:rgba(174,138,94,0.1); border:1px solid transparent; padding:9px 16px; border-radius:20px; font-size:12px; cursor:pointer; font-family:var(--font-sans); }
.recording-toast {
    position:absolute;
    bottom:80px;
    left:20px;
    right:20px;
    background:var(--danger);
    color:white;
    padding:14px 20px;
    border-radius:24px;
    text-align:center;
    display:none;
    z-index:150;
    font-family:var(--font-sans);
    font-size:14px;
    font-weight:500;
}
.recording-dot { display:inline-block; width:10px; height:10px; background:white; border-radius:50%; margin-right:8px; animation:blink 0.8s infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
.photo-viewer-overlay {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.9);
    z-index:200;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.photo-viewer-close { position:absolute; top:48px; right:20px; color:white; font-size:28px; cursor:pointer; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.photo-viewer-delete {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: #E74C3C;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    z-index: 10;
}
.photo-viewer-image { max-width:92%; max-height:75%; border-radius:var(--radius-md); }
.backup-modal {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.5);
    z-index:250;
    display:none;
    align-items:center;
    justify-content:center;
}
.backup-modal-content { background:var(--white); border-radius:var(--radius-lg); width:min(340px, 90%); max-height:80%; overflow-y:auto; font-family:var(--font-sans); }
.backup-modal-header { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid var(--border-light); }
.backup-modal-title { font-weight:600; font-size:16px; }
.backup-modal-close { background:none; border:none; font-size:20px; cursor:pointer; width:32px; height:32px; border-radius:50%; }
.backup-modal-body { padding:16px 18px; }
.backup-section { margin-bottom:20px; }
.backup-section h4 { font-size:14px; font-weight:600; margin-bottom:10px; color:var(--text-primary); }
.backup-desc { font-size:12px; color:var(--text-secondary); margin-bottom:10px; }
.backup-options { display:flex; gap:8px; }
.backup-option-btn { padding:9px 16px; border:1.5px solid var(--accent); background:transparent; color:var(--accent); border-radius:20px; cursor:pointer; font-size:13px; font-family:var(--font-sans); }
.backup-option-btn.active { background:var(--accent); color:white; }
.backup-year-select { margin-top:10px; display:flex; align-items:center; gap:8px; }
.backup-year-select select { padding:8px 12px; border:1px solid var(--border-light); border-radius:var(--radius-sm); font-size:13px; font-family:var(--font-sans); }
.backup-execute-btn { padding:9px 20px; background:var(--accent); color:white; border:none; border-radius:20px; cursor:pointer; font-size:13px; font-family:var(--font-sans); }
.backup-list { max-height:150px; overflow-y:auto; border:1px solid var(--border-light); border-radius:var(--radius-sm); padding:8px; font-size:12px; }
.backup-empty { color:var(--text-secondary); text-align:center; padding:20px; }
.backup-search-box { display:flex; gap:8px; margin-bottom:8px; }
.backup-search-box input { flex:1; padding:9px 14px; border:1.5px solid var(--border-light); border-radius:var(--radius-sm); font-size:13px; font-family:var(--font-sans); }
.backup-search-box button { padding:9px 16px; background:var(--accent); color:white; border:none; border-radius:var(--radius-sm); cursor:pointer; font-size:13px; font-family:var(--font-sans); }
.backup-search-results { max-height:200px; overflow-y:auto; border:1px solid var(--border-light); border-radius:var(--radius-sm); padding:8px; font-size:12px; }

/* 草图 */
.sketch-overlay {
    position: fixed;
    z-index: 300;
    display: none;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    gap: 4px;
    padding: 4px;
    border-radius: 0;
}
.sketch-canvas-area {
    width: 100%;
    flex: 1;
    background: #FFFFFF;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    min-height: 0;
}
.sketch-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    background: #FBF7F0;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    flex-wrap: wrap;
    flex-shrink: 0;
    width: 100%;
}
.sketch-toolbar button {
    background: none;
    border: none;
    color: #2C2C2C;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sketch-toolbar button:hover { background: rgba(174,138,94,0.1); color: #AE8A5E; }
.sketch-toolbar button svg { stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.sketch-toolbar select {
    padding: 6px 6px;
    border-radius: 20px;
    border: 1px solid #C5B088;
    font-size: 13px;
    background: #FFFFFF;
    color: #2C2C2C;
    font-family: var(--font-sans);
    width: 52px;
}
.sketch-toolbar input[type="color"] {
    width: 28px; height: 28px;
    border: 1px solid #C5B088;
    border-radius: 50%;
    cursor: pointer;
    padding: 2px;
    background: white;
}

@media (max-width: 767px) {
    .app-container {
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-xl), 0 0 0 8px #2C2C2C, 0 0 0 10px #4A4A4A;
        height: 96dvh;
    }
    .diary-content { line-height: 2; padding-bottom: 10px; }
}
@media (min-width: 768px) {
    .app-container {
        width: 520px;
        height: 693px;
        max-height: 90vh;
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-xl), 0 0 0 8px #2C2C2C, 0 0 0 10px #4A4A4A;
    }
}