/* ═══════════════════════════════════════════════
   「汀」CSS  v2.0  — 水雾 & 暮霭 双色系
   ═══════════════════════════════════════════════ */

/* ─── Fonts & Base ───────────────────────────── */
:root {
    --font-serif: 'Noto Serif SC', serif;
    --font-sans: 'Noto Serif SC', serif;
}

/* ═══════════════════════════════════════════════
   水雾 · 明亮
   ═══════════════════════════════════════════════ */
[data-color="mist"][data-mode="light"] {
    --bg-primary:   #F8F9FA;
    --bg-secondary: #F0F3F6;
    --bg-sidebar:   #EBEFF3;
    --text-primary:   #2D2D2D;
    --text-secondary: #7B8794;
    --title-color:    #5B7282;
    --border:  #DDE3E8;
    --shadow:  rgba(0,0,0,.04);
    --overlay-bg: rgba(0,0,0,.3);
    --accent-orange: #6B9A9F;
    --accent-teal:   #5B8290;
    --accent-rose:   #6B7B8A;
    --accent-purple: #8B7EC8;
    --mood-bg-warm: rgba(107,154,159,.10);
    --mood-bg-cool: rgba(91,114,130,.08);
    background: radial-gradient(ellipse at 50% 30%, #F8F9FA 0%, #EDF1F4 100%);
}

/* ═══════════════════════════════════════════════
   水雾 · 暗夜
   ═══════════════════════════════════════════════ */
[data-color="mist"][data-mode="dark"] {
    --bg-primary:   #0D1117;
    --bg-secondary: #131820;
    --bg-sidebar:   #10151D;
    --text-primary:   #C8CCD2;
    --text-secondary: #6B7888;
    --title-color:    #8798A5;
    --border:  #1E2530;
    --shadow:  rgba(0,0,0,.3);
    --overlay-bg: rgba(0,0,0,.5);
    --accent-orange: #7EA8B0;
    --accent-teal:   #6E95A0;
    --accent-rose:   #7B8C9A;
    --accent-purple: #8B7EC8;
    --mood-bg-warm: rgba(126,168,176,.10);
    --mood-bg-cool: rgba(135,152,165,.08);
    background:
        radial-gradient(1.5px 1.5px at 10% 7%,  rgba(180,210,220,.18), transparent),
        radial-gradient(1px 1px   at 25% 18%, rgba(180,210,220,.12), transparent),
        radial-gradient(1px 1px   at 42% 5%,  rgba(180,210,220,.22), transparent),
        radial-gradient(1px 1px   at 60% 20%, rgba(180,210,220,.10), transparent),
        radial-gradient(1px 1px   at 77% 8%,  rgba(180,210,220,.16), transparent),
        radial-gradient(1.5px 1.5px at 90% 14%, rgba(180,210,220,.14), transparent),
        radial-gradient(1px 1px   at 16% 27%, rgba(180,210,220,.08), transparent),
        radial-gradient(1px 1px   at 33% 32%, rgba(180,210,220,.20), transparent),
        radial-gradient(2px 2px   at 54% 10%, rgba(180,210,220,.25), transparent),
        radial-gradient(1px 1px   at 70% 28%, rgba(180,210,220,.11), transparent),
        radial-gradient(1px 1px   at 82% 24%, rgba(180,210,220,.09), transparent),
        radial-gradient(1px 1px   at 8%  40%, rgba(180,210,220,.13), transparent),
        radial-gradient(1px 1px   at 23% 44%, rgba(180,210,220,.07), transparent),
        radial-gradient(1px 1px   at 47% 37%, rgba(180,210,220,.10), transparent),
        radial-gradient(1px 1px   at 67% 41%, rgba(180,210,220,.15), transparent),
        radial-gradient(1px 1px   at 87% 35%, rgba(180,210,220,.08), transparent),
        #0D1117;
}

/* ═══════════════════════════════════════════════
   暮霭 · 明亮
   ═══════════════════════════════════════════════ */
[data-color="dusk"][data-mode="light"] {
    --bg-primary:   #FBF9F8;
    --bg-secondary: #F5F2F3;
    --bg-sidebar:   #EFEAEC;
    --text-primary:   #2D2D2D;
    --text-secondary: #8A8086;
    --title-color:    #78636E;
    --border:  #E5DEE2;
    --shadow:  rgba(0,0,0,.04);
    --overlay-bg: rgba(0,0,0,.3);
    --accent-orange: #B87A8A;
    --accent-teal:   #9B7A8A;
    --accent-rose:   #8A7A88;
    --accent-purple: #8B7EC8;
    --mood-bg-warm: rgba(184,122,138,.10);
    --mood-bg-cool: rgba(155,122,138,.08);
    background: radial-gradient(ellipse at 50% 30%, #FBF9F8 0%, #F2EEEF 100%);
}

/* ═══════════════════════════════════════════════
   暮霭 · 暗夜
   ═══════════════════════════════════════════════ */
[data-color="dusk"][data-mode="dark"] {
    --bg-primary:   #121015;
    --bg-secondary: #18151C;
    --bg-sidebar:   #151218;
    --text-primary:   #C8C4CA;
    --text-secondary: #7A7680;
    --title-color:    #9B8A96;
    --border:  #221E26;
    --shadow:  rgba(0,0,0,.3);
    --overlay-bg: rgba(0,0,0,.5);
    --accent-orange: #B894A0;
    --accent-teal:   #A08A96;
    --accent-rose:   #94848E;
    --accent-purple: #8B7EC8;
    --mood-bg-warm: rgba(184,148,160,.10);
    --mood-bg-cool: rgba(160,138,150,.08);
    background:
        radial-gradient(1.5px 1.5px at 10% 7%,  rgba(210,180,200,.20), transparent),
        radial-gradient(1px 1px   at 25% 18%, rgba(210,180,200,.13), transparent),
        radial-gradient(1px 1px   at 42% 5%,  rgba(210,180,200,.25), transparent),
        radial-gradient(1px 1px   at 60% 20%, rgba(210,180,200,.11), transparent),
        radial-gradient(1px 1px   at 77% 8%,  rgba(210,180,200,.18), transparent),
        radial-gradient(1.5px 1.5px at 90% 14%, rgba(210,180,200,.15), transparent),
        radial-gradient(1px 1px   at 16% 27%, rgba(210,180,200,.09), transparent),
        radial-gradient(1px 1px   at 33% 32%, rgba(210,180,200,.22), transparent),
        radial-gradient(2px 2px   at 54% 10%, rgba(210,180,200,.28), transparent),
        radial-gradient(1px 1px   at 70% 28%, rgba(210,180,200,.12), transparent),
        radial-gradient(1px 1px   at 82% 24%, rgba(210,180,200,.10), transparent),
        radial-gradient(1px 1px   at 8%  40%, rgba(210,180,200,.14), transparent),
        radial-gradient(1px 1px   at 23% 44%, rgba(210,180,200,.08), transparent),
        radial-gradient(1px 1px   at 47% 37%, rgba(210,180,200,.11), transparent),
        radial-gradient(1px 1px   at 67% 41%, rgba(210,180,200,.17), transparent),
        radial-gradient(1px 1px   at 87% 35%, rgba(210,180,200,.09), transparent),
        #121015;
}

/* ─── Reset ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--text-primary);
    background: var(--bg-primary);
    scroll-behavior: smooth;
    /* background is set on html via attribute selectors above */
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ─── Topbar ─────────────────────────────────── */
.topbar {
    height: 48px;
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.topbar-title {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--text-primary);
    margin: 0 12px;
}

/* ─── Hamburger ──────────────────────────────── */
.hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 22px;
    color: var(--text-primary);
    cursor: pointer;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
.hamburger:hover { background: var(--bg-secondary); }

/* ─── Theme & Color Toggles ──────────────────── */
.theme-toggle, .color-toggle {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
.theme-toggle:hover, .color-toggle:hover { background: var(--bg-secondary); }

/* ─── Import Button ──────────────────── */
.btn-import {
    background: none;
    border: 1px solid var(--border);
    font-size: 14px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--text-secondary);
    margin-left: 4px;
}
.btn-import:hover { border-color: var(--accent-orange); color: var(--accent-orange); }

/* ─── Tabs ───────────────────────────────────── */
.topbar-tabs {
    display: flex;
    gap: 0;
    margin-left: 8px;
}

.sidebar-tabs {
    display: none;
    gap: 0;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.tab {
    background: none;
    border: none;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 300;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px 14px;
    min-width: 44px;
    min-height: 44px;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.tab:hover { color: var(--text-primary); }

.tab.active { font-weight: 400; color: var(--text-primary); }

.tab[data-author="卷宝"].active { border-bottom-color: var(--accent-orange); }
.tab[data-author="小克"].active { border-bottom-color: var(--accent-teal); }
.tab[data-author="然然"].active { border-bottom-color: var(--accent-rose); }

/* ─── Topbar Search ─────────────────────────── */
.topbar-search {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 1 240px;
    margin-left: 8px;
}

.search-input {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 300;
    outline: none;
    min-height: 32px;
}

.search-input:focus { border-color: var(--accent-orange); }

.search-input::placeholder { color: var(--text-secondary); }

.search-clear {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
    min-width: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-clear:hover { color: var(--text-primary); background: var(--bg-secondary); }

/* ─── Sidebar Search (mobile) ──────────────── */
.sidebar-search {
    display: none;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    gap: 6px;
    align-items: center;
}

.search-input-sidebar {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 300;
    outline: none;
    min-height: 40px;
}

.search-input-sidebar:focus { border-color: var(--accent-orange); }

.search-input-sidebar::placeholder { color: var(--text-secondary); }

.search-submit-sidebar {
    background: var(--accent-orange);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    padding: 0 12px;
    min-height: 40px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-submit-sidebar:hover { opacity: 0.9; }

/* ─── Main Layout ────────────────────────────── */
.main-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ─── Overlay ────────────────────────────────── */
.overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 50;
    top: 48px;
}

.overlay.show { display: block; }

/* ─── Sidebar ────────────────────────────────── */
.sidebar {
    width: 240px;
    min-width: 240px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-list {
    flex: 1;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.sidebar-item {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    cursor: pointer;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--border);
    min-height: 44px;
    gap: 4px;
}

.sidebar-item:hover { background: var(--bg-secondary); }
.sidebar-item.active {
    background: var(--bg-secondary);
    border-left-color: var(--accent-orange);
}

.sidebar-item .si-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sidebar-item .si-author {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-secondary);
}

.sidebar-item .si-date {
    font-size: 12px;
    color: var(--text-secondary);
}

.sidebar-item .si-emoji {
    font-size: 14px;
}

.sidebar-item .si-title {
    font-size: 13px;
    font-weight: 300;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Mood Filter ───────────────────────────── */
.mood-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    max-height: 120px;
    overflow-y: auto;
}

.mood-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 300;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    min-height: 28px;
}

.mood-filter-chip:hover { border-color: var(--border); color: var(--text-primary); }

.mood-filter-chip.active {
    border-color: var(--accent-orange);
    color: var(--text-primary);
    font-weight: 400;
}

/* ─── Load More ────────────────────────────── */
.load-more-wrap {
    padding: 8px 12px;
    border-top: 1px solid var(--border);
}

.load-more {
    width: 100%;
    padding: 8px;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 300;
    cursor: pointer;
    border-radius: 6px;
    min-height: 36px;
}

.load-more:hover { color: var(--text-primary); }

/* ─── Content ────────────────────────────────── */
.content {
    flex: 1;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding: 32px 40px;
    max-width: 800px;
}

/* ─── Empty State ────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60vh;
    color: var(--text-secondary);
}

.empty-icon { font-size: 48px; margin-bottom: 12px; }

/* ─── View Mode ──────────────────────────────── */
.view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.view-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.diary-title {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--title-color);
    line-height: 1.4;
}

.btn-write, .btn-edit, .btn-delete {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 300;
    padding: 4px 14px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    min-width: 44px;
    min-height: 30px;
}
.btn-write:hover, .btn-edit:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}
.btn-delete:hover {
    color: #D45353;
    border-color: #D45353;
    background: rgba(212, 83, 83, 0.06);
}

.btn-export {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 300;
    padding: 4px 14px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    min-width: 44px;
    min-height: 30px;
}
.btn-export:hover {
    color: var(--accent-teal);
    border-color: var(--accent-teal);
    background: rgba(127, 166, 160, 0.08);
}

/* ─── Moods Display ──────────────────────────── */
.diary-moods {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.mood-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 300;
    color: var(--text-primary);
}

.mood-tag.warm { background: var(--mood-bg-warm); }
.mood-tag.cool  { background: var(--mood-bg-cool); }

.diary-meta {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    font-weight: 300;
}

.diary-author { color: var(--accent-orange); }

/* ─── Markdown Body ──────────────────────────── */
.markdown-body {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-primary);
    word-break: break-word;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3 {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--title-color);
    margin: 1.2em 0 0.6em;
}

.markdown-body h2 { font-size: 20px; }
.markdown-body h3 { font-size: 18px; }

.markdown-body p { margin: 0.6em 0; }

.markdown-body strong { font-weight: 600; }
.markdown-body em { font-style: italic; }

.markdown-body ul, .markdown-body ol {
    padding-left: 1.5em;
    margin: 0.6em 0;
}

.markdown-body li { margin: 0.2em 0; }

.markdown-body blockquote {
    border-left: 3px solid var(--accent-orange);
    padding-left: 16px;
    margin: 1em 0;
    color: var(--text-secondary);
}

.markdown-body hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5em 0;
}

.markdown-body code {
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: var(--font-sans);
}

.markdown-body pre {
    background: var(--bg-secondary);
    padding: 12px 16px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1em 0;
}

.markdown-body pre code {
    background: none;
    padding: 0;
}

/* ─── Comments ───────────────────────────────── */
.comments-section {
    margin-top: 32px;
}

.comments-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin-bottom: 16px;
}

.comments-header {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.comment-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
}

.comment-meta {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.comment-author {
    font-weight: 400;
    font-size: 13px;
}

.comment-author[data-author="卷宝"] { color: var(--accent-orange); }
.comment-author[data-author="小克"] { color: var(--accent-teal); }
.comment-author[data-author="然然"] { color: var(--accent-rose); }

.comment-body {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--text-primary);
}

.comment-delete {
    display: none;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
}

.comment-item:hover .comment-delete { display: inline; }
.comment-delete:hover { color: #D45353; background: var(--bg-secondary); }

.comment-input-row {
    display: flex;
    gap: 8px;
}

.comment-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 300;
    outline: none;
    min-height: 44px;
}

.comment-input:focus { border-color: var(--accent-orange); }

.comment-send {
    padding: 8px 16px;
    background: var(--accent-orange);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    min-height: 44px;
    min-width: 56px;
}

.comment-send:hover { opacity: 0.9; }

/* ─── Author Selection ───────────────── */
.edit-author-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.author-select {
    display: flex;
    gap: 4px;
}

.author-btn {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 300;
    padding: 4px 14px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    min-height: 32px;
}
.author-btn:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.author-btn[data-author="卷宝"].active { border-color: var(--accent-orange); color: var(--accent-orange); font-weight: 400; }
.author-btn[data-author="小克"].active { border-color: var(--accent-teal); color: var(--accent-teal); font-weight: 400; }
.author-btn[data-author="然然"].active { border-color: var(--accent-rose); color: var(--accent-rose); font-weight: 400; }

/* ─── Edit Mode ──────────────────────────────── */
.edit-mode {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 700px;
}

.edit-label {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: block;
}

.edit-title {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    outline: none;
    min-height: 44px;
}

.edit-title:focus { border-color: var(--accent-orange); }

.mood-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mood-btn {
    height: 36px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 13px;
    font-family: var(--font-sans);
    font-weight: 300;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.mood-btn:hover { background: var(--mood-bg-warm); }

.mood-btn.selected {
    border-color: var(--accent-orange);
    background: var(--mood-bg-warm);
}

.edit-textarea {
    width: 100%;
    min-height: 300px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
    outline: none;
    resize: vertical;
}

.edit-textarea:focus { border-color: var(--accent-orange); }

.edit-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-preview, .btn-save, .btn-cancel {
    padding: 8px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    min-height: 44px;
    min-width: 60px;
}

.btn-save {
    background: var(--accent-orange);
    color: #fff;
    border: none;
}
.btn-save:hover { opacity: 0.9; }

.btn-cancel {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.btn-cancel:hover { color: var(--text-primary); }

.btn-preview {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.btn-preview:hover { border-color: var(--text-secondary); }

.preview-area {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    max-height: 500px;
    overflow-y: auto;
}

/* ─── FAB (Floating Action Button) ───────────── */
.fab-write {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-orange);
    color: #fff;
    border: none;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 12px var(--shadow);
    z-index: 80;
    align-items: center;
    justify-content: center;
}
.fab-write:hover { opacity: 0.9; }

/* ─── Responsive: Tablet (≤768px) ────────────── */
@media (max-width: 768px) {

    .topbar-tabs { display: none; }

    .topbar-search { display: none; }

    .sidebar-search { display: block; }

    .sidebar-tabs { display: flex; }

    .hamburger { display: flex; }

    .main-layout { position: relative; }

    .sidebar {
        position: fixed;
        left: -280px;
        top: 48px;
        bottom: 0;
        width: 280px;
        min-width: 280px;
        z-index: 60;
        transition: none;
        border-right: none;
        box-shadow: none;
    }

    .sidebar.open { left: 0; box-shadow: 2px 0 12px var(--shadow); }

    .content {
        padding: 24px 20px;
        max-width: 100%;
    }

    .diary-title { font-size: 20px; }
}

/* ─── Responsive: Mobile (≤480px) ────────────── */
@media (max-width: 480px) {

    .content { padding: 20px 16px; }

    .diary-title { font-size: 20px; }

    .markdown-body {
        font-size: 15px;
    }

    .mood-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .mood-btn {
        height: 34px;
        padding: 3px 8px;
        font-size: 12px;
    }

    .comment-input-row {
        flex-direction: row;
    }

    .comment-input { border-radius: 8px 0 0 8px; flex: 1; }

    .comment-send { border-radius: 0 8px 8px 0; }

    .edit-textarea { min-height: 50vh; }

    .fab-write { display: flex; }

    .btn-write { display: none; }

    .view-actions {
        display: flex;
        gap: 4px;
    }
    .btn-edit, .btn-delete, .btn-export {
        font-size: 12px;
        padding: 3px 10px;
        min-width: 38px;
        min-height: 28px;
        border-radius: 14px;
    }

    .sidebar-item { padding: 12px 16px; }

    /* Hide color toggle on small screens, keep only theme toggle */
    .color-toggle { font-size: 16px; width: 36px; height: 36px; }
}