* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; color: #333; height: 100vh; display: flex; flex-direction: column; }
a { color: #0969da; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Login */
.login-page { display: flex; align-items: center; justify-content: center; }
.login-box { text-align: center; background: #fff; padding: 60px 80px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.login-box h1 { margin-bottom: 8px; }
.login-box p { color: #666; margin-bottom: 32px; }
.btn-login { display: inline-block; background: #24292f; color: #fff; padding: 10px 32px; border-radius: 6px; font-size: 16px; }
.btn-login:hover { background: #32383f; text-decoration: none; }

/* Top bar */
.top-bar { display: flex; align-items: center; justify-content: space-between; background: #24292f; color: #fff; padding: 0 16px 0 24px; height: 48px; flex-shrink: 0; }
.top-bar .logo { font-size: 18px; font-weight: 600; margin-right: 16px; }
.top-actions { display: flex; align-items: center; gap: 6px; }
.top-actions button { background: #2f363d; color: #fff; border: 1px solid #444; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.top-actions button:hover { background: #3d444d; }
.top-actions .btn-danger { color: #f85149; border-color: #f85149; }
.top-actions .btn-danger:hover { background: #f85149; color: #fff; }
.user-info span { margin-right: 16px; }
.user-info a { color: #ccc; }

/* Search box */
.search-box { position: relative; flex: 1; max-width: 360px; margin: 0 24px; }
.search-box input { width: 100%; padding: 6px 12px; border: 1px solid #444; border-radius: 6px; background: #2f363d; color: #fff; font-size: 13px; outline: none; }
.search-box input::placeholder { color: #8b949e; }
.search-box input:focus { border-color: #0969da; background: #1c2128; }
.search-results { position: absolute; top: 36px; left: 0; right: 0; background: #fff; border: 1px solid #d0d7de; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); max-height: 360px; overflow-y: auto; z-index: 100; }
.sr-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
.sr-item:hover { background: #f6f8fa; }
.sr-item:last-child { border-bottom: none; }
.sr-title { font-size: 14px; font-weight: 500; color: #24292f; }
.sr-snippet { font-size: 12px; color: #57606a; margin-top: 3px; line-height: 1.4; }
.sr-loading, .sr-empty { padding: 16px; text-align: center; color: #8b949e; font-size: 13px; }

/* Search filters (v2.4.0) */
.search-filters { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #e1e4e8; background: #f6f8fa; border-radius: 8px 8px 0 0; flex-wrap: wrap; }
.search-filters select, .search-filters input[type="date"] { font-size: 12px; padding: 3px 6px; border: 1px solid #d0d7de; border-radius: 4px; background: #fff; color: #333; outline: none; }
.search-filters select:focus, .search-filters input:focus { border-color: #0969da; }
.search-filters button { background: none; border: 1px solid #d0d7de; border-radius: 4px; padding: 3px 8px; cursor: pointer; font-size: 12px; }
.search-filters button:hover { background: #eaeef2; }
.sf-sep { color: #8b949e; font-size: 12px; }
.sr-stats { padding: 6px 14px; font-size: 12px; color: #8b949e; border-bottom: 1px solid #f0f0f0; }
.sr-date { color: #8b949e; font-size: 11px; margin-left: 6px; font-weight: normal; }
.sr-tag { display: inline-block; background: #ddf4ff; color: #0969da; font-size: 10px; padding: 1px 6px; border-radius: 8px; margin-left: 4px; font-weight: normal; }
mark { background: #fff3a3; color: #333; padding: 0 2px; border-radius: 2px; }

/* Lightbox */
.lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9999; align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 4px 32px rgba(0,0,0,0.5); transition: transform 0.15s ease; }

/* Toast */
.toast { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); padding: 10px 20px; border-radius: 6px; color: #fff; font-size: 14px; z-index: 10000; box-shadow: 0 4px 12px rgba(0,0,0,0.15); animation: toastIn 0.2s ease; }
.toast.error { background: #d73a49; }
.toast.success { background: #2da44e; }
.toast.info { background: #0969da; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Rename box */
.rename-box { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; }
.rename-box input { padding: 4px 8px; border: 1px solid #0969da; border-radius: 4px; font-size: 13px; width: 200px; outline: none; }
.rename-box button { padding: 3px 8px; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; background: #f0f0f0; }
.rename-box button:hover { background: #e0e0e0; }

/* Layout */
.main-layout { display: flex; flex: 1; overflow: hidden; }
.sidebar { width: 260px; background: #fff; border-right: 1px solid #e1e4e8; overflow: hidden; flex-shrink: 0; display: flex; flex-direction: column; }
.sidebar-header { padding: 12px 16px; font-weight: 600; border-bottom: 1px solid #e1e4e8; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.sort-select { font-size: 12px; padding: 2px 6px; border: 1px solid #d0d7de; border-radius: 4px; background: #f6f8fa; color: #555; outline: none; cursor: pointer; }
.sort-select:focus { border-color: #0969da; }
.content-area { flex: 1; overflow-y: auto; padding: 24px 48px; background: #fff; display: flex; flex-direction: column; }

/* Tree */
.file-tree { padding: 8px 0; flex: 1; overflow-y: auto; min-height: 0; }
.tree-item { cursor: pointer; padding: 4px 8px; font-size: 14px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-item:hover { background: #f0f0f0; }
.tree-item.active { background: #dbeafe; }
.tree-item .icon { margin-right: 4px; }
.tree-children { }

/* Article */
.article { max-width: 800px; }
.article h1 { font-size: 2em; margin: 0.67em 0; border-bottom: 1px solid #e1e4e8; padding-bottom: 0.3em; }
.article h2 { font-size: 1.5em; margin: 0.83em 0; border-bottom: 1px solid #e1e4e8; padding-bottom: 0.3em; }
.article h3 { font-size: 1.17em; margin: 1em 0; }
.article p { margin: 16px 0; line-height: 1.7; }
.article pre { background: #f6f8fa; padding: 16px; border-radius: 6px; overflow-x: auto; margin: 16px 0; }
.article code { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 0.9em; }
.article pre code { background: none; padding: 0; }
.article ul, .article ol { padding-left: 2em; margin: 16px 0; }
.article blockquote { border-left: 4px solid #d0d7de; padding: 0 16px; color: #57606a; margin: 16px 0; }
.article table { border-collapse: collapse; margin: 16px 0; width: 100%; font-size: 14px; }
.article th, .article td { border: 1px solid #d0d7de; padding: 6px 13px; text-align: left; }
.article th { background: #f6f8fa; font-weight: 600; }
.article tr:nth-child(even) { background: #f9fafb; }
.article img { max-width: 100%; }
.article hr { border: none; border-top: 1px solid #e1e4e8; margin: 24px 0; }

.loading { color: #999; padding: 20px; }
.error { color: #c00; padding: 20px; }

/* Editor bar */
.editor-bar { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #e1e4e8; }
.editor-bar button { background: #f6f8fa; border: 1px solid #d0d7de; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.editor-bar button:hover { background: #eaeef2; }
.btn-save { background: #2da44e !important; color: #fff !important; border-color: #2da44e !important; }
.btn-save:hover { background: #2c974b !important; }
.save-status { margin-left: 12px; font-size: 13px; }

/* Editor */
.editor-wrap { display: flex; flex: 1; gap: 0; min-height: 0; height: calc(100vh - 160px); }
.editor { flex: 1; resize: none; border: 1px solid #d0d7de; border-radius: 6px; padding: 16px; font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; font-size: 14px; line-height: 1.6; outline: none; height: 100%; }
.editor:focus { border-color: #0969da; box-shadow: 0 0 0 3px rgba(9,105,218,0.1); }
.preview-pane { flex: 1; padding: 16px 24px; border: 1px solid #d0d7de; border-left: none; border-radius: 0 6px 6px 0; overflow-y: auto; height: 100%; background: #fafbfc; }

/* Meta: tags & summary */
.meta-summary { color: #57606a; font-size: 14px; margin-bottom: 12px; padding: 8px 12px; background: #f6f8fa; border-radius: 6px; border-left: 3px solid #0969da; }
.meta-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tag-badge { display: inline-block; background: #ddf4ff; color: #0969da; font-size: 12px; padding: 2px 10px; border-radius: 12px; }

/* Tag cloud filter */
.tag-search-wrap { padding: 8px 12px 0; flex-shrink: 0; }
.tag-search { width: 100%; padding: 6px 10px; border: 1px solid #d0d7de; border-radius: 6px; font-size: 13px; outline: none; }
.tag-search:focus { border-color: #0969da; box-shadow: 0 0 0 2px rgba(9,105,218,0.1); }
.tag-cloud { padding: 8px 12px; max-height: 240px; overflow-y: auto; flex-shrink: 0; }
.tag-filter-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-filter-item { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 12px; background: #f0f0f0; color: #555; cursor: pointer; transition: all 0.15s; }
.tag-filter-item:hover { background: #ddf4ff; color: #0969da; }
.tag-filter-item.active { background: #0969da; color: #fff; }
.tag-filter-item small { margin-left: 2px; opacity: 0.7; }

/* Task list (interactive checkboxes) */
.article .task-list-item { list-style: none; margin-left: -1.5em; padding: 6px 8px; border-radius: 6px; transition: background 0.15s; }
.article .task-list-item:hover { background: #f5f5f5; }
.article .task-list-item-checkbox { width: 16px; height: 16px; margin-right: 8px; cursor: pointer; accent-color: #0969da; vertical-align: middle; }
.article .task-list-item-checkbox:checked + * { color: #8b949e; text-decoration: line-through; }
.task-done-flash { animation: flashBg 0.6s ease; }
@keyframes flashBg { 0% { background: #ddf4ff; } 100% { background: transparent; } }

/* History panel */
.history-panel { position: fixed; top: 48px; right: 0; width: 380px; height: calc(100vh - 48px); background: #fff; border-left: 1px solid #d0d7de; box-shadow: -4px 0 16px rgba(0,0,0,0.08); z-index: 200; display: flex; flex-direction: column; }
.history-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e1e4e8; flex-shrink: 0; }
.history-header h3 { font-size: 16px; margin: 0; }
.history-close { background: none; border: none; font-size: 18px; cursor: pointer; color: #666; padding: 4px 8px; border-radius: 4px; }
.history-close:hover { background: #f0f0f0; }
.history-content { flex: 1; overflow-y: auto; padding: 12px 16px; }
.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-item { padding: 12px 14px; border: 1px solid #e1e4e8; border-radius: 8px; transition: border-color 0.15s; }
.history-item:hover { border-color: #0969da; }
.history-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.history-sha { font-family: monospace; font-size: 12px; background: #f0f0f0; padding: 2px 8px; border-radius: 4px; color: #0969da; }
.history-date { font-size: 12px; color: #8b949e; }
.history-msg { font-size: 13px; color: #333; margin-bottom: 4px; word-break: break-all; }
.history-author { font-size: 12px; color: #666; margin-bottom: 8px; }
.history-item-actions { display: flex; gap: 6px; }
.btn-sm { font-size: 12px; padding: 4px 10px; border: 1px solid #d0d7de; border-radius: 4px; background: #f6f8fa; cursor: pointer; color: #333; }
.btn-sm:hover { background: #eaeef2; border-color: #0969da; }
.history-view-banner { background: #fff8c5; border: 1px solid #d4a72c; padding: 10px 16px; border-radius: 6px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; font-size: 14px; }

/* Diff panel */
.diff-panel { position: fixed; top: 48px; left: 0; right: 0; bottom: 0; background: #fff; z-index: 300; display: flex; flex-direction: column; }
.diff-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-bottom: 1px solid #e1e4e8; flex-shrink: 0; background: #f6f8fa; }
.diff-header h3 { font-size: 16px; margin: 0; }
.diff-actions { display: flex; gap: 8px; align-items: center; }
.btn-restore { background: #2da44e; color: #fff; border: 1px solid #2da44e; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.btn-restore:hover { background: #2c974b; }
.diff-content { flex: 1; overflow: auto; padding: 16px 24px; font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 13px; line-height: 1.5; background: #fafbfc; margin: 0; white-space: pre-wrap; word-break: break-all; }
.diff-add { background: #ccffd8; color: #116329; display: block; }
.diff-del { background: #ffd7d5; color: #82071e; display: block; }
.diff-range { color: #0969da; display: block; font-weight: 600; }
.diff-header-line { color: #666; display: block; font-weight: 600; }
.diff-ctx { display: block; }

/* Tag manager button */
.btn-tag-manage { background: none; border: none; cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px; opacity: 0.6; transition: opacity 0.15s; }
.btn-tag-manage:hover { opacity: 1; background: #f0f0f0; }

/* Tag manager panel */
.tag-manager-panel { position: fixed; top: 48px; right: 0; width: 420px; height: calc(100vh - 48px); background: #fff; border-left: 1px solid #d0d7de; box-shadow: -4px 0 16px rgba(0,0,0,0.08); z-index: 200; display: flex; flex-direction: column; }
.tm-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e1e4e8; flex-shrink: 0; }
.tm-header h3 { font-size: 16px; margin: 0; }
.tm-content { flex: 1; overflow-y: auto; padding: 16px 20px; }
.tm-stats { display: flex; gap: 12px; margin-bottom: 16px; }
.tm-stat-card { flex: 1; text-align: center; padding: 16px; background: #f6f8fa; border-radius: 8px; border: 1px solid #e1e4e8; }
.tm-stat-num { font-size: 28px; font-weight: 700; color: #0969da; }
.tm-stat-label { font-size: 12px; color: #666; margin-top: 4px; }
.tm-actions { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tm-tag-list { display: flex; flex-direction: column; gap: 10px; }
.tm-tag-item { padding: 12px 14px; border: 1px solid #e1e4e8; border-radius: 8px; transition: border-color 0.15s; }
.tm-tag-item:hover { border-color: #0969da; }
.tm-tag-info { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tm-tag-count { font-size: 12px; color: #666; }
.tm-tag-recent { display: flex; flex-direction: column; gap: 4px; }
.tm-recent-file { font-size: 12px; color: #333; padding: 3px 8px; border-radius: 4px; cursor: pointer; transition: background 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-recent-file:hover { background: #f0f0f0; }
.tm-recent-file small { color: #8b949e; margin-left: 6px; }

/* Wiki links */
.wiki-link { color: #0969da; text-decoration: none; border-bottom: 1px dashed #0969da; cursor: pointer; }
.wiki-link:hover { border-bottom-style: solid; }
.wiki-link-missing { color: #999; border-bottom-color: #ccc; cursor: help; }

/* Backlinks section */
.backlinks-section { margin-top: 32px; padding-top: 16px; border-top: 1px solid #e1e4e8; }
.backlinks-title { font-size: 14px; font-weight: 600; color: #57606a; margin-bottom: 8px; }
.backlink-item { font-size: 13px; color: #0969da; padding: 4px 8px; border-radius: 4px; cursor: pointer; transition: background 0.15s; }
.backlink-item:hover { background: #f0f0f0; }

/* Graph panel */
.graph-panel { position: fixed; top: 48px; left: 0; right: 0; bottom: 0; background: #fff; z-index: 300; display: flex; flex-direction: column; }
.graph-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-bottom: 1px solid #e1e4e8; flex-shrink: 0; background: #f6f8fa; }
.graph-header h3 { font-size: 16px; margin: 0; }
.graph-body { flex: 1; overflow: hidden; }
.graph-body canvas { width: 100%; height: 100%; display: block; }

/* Format toolbar */
.format-toolbar { display: flex; align-items: center; gap: 2px; padding: 4px 8px; border: 1px solid #d0d7de; border-top: none; background: #f6f8fa; border-radius: 0 0 6px 6px; flex-wrap: wrap; }
.format-toolbar button { background: none; border: 1px solid transparent; padding: 3px 8px; border-radius: 4px; cursor: pointer; font-size: 13px; color: #333; line-height: 1.2; }
.format-toolbar button:hover { background: #eaeef2; border-color: #d0d7de; }
.ft-sep { width: 1px; height: 18px; background: #d0d7de; margin: 0 4px; }

/* Split pane */
.split-pane { display: flex; flex: 1; gap: 0; min-height: 0; height: calc(100vh - 180px); }
.split-editor { flex: 1; overflow: hidden; }
.split-preview { flex: 1; padding: 16px 24px; border-left: 1px solid #d0d7de; overflow-y: auto; background: #fafbfc; height: 100%; }

/* EasyMDE overrides */
.EasyMDEContainer { height: 100%; display: flex; flex-direction: column; }
.EasyMDEContainer .CodeMirror { flex: 1; height: auto; border: 1px solid #d0d7de; border-radius: 6px; font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; font-size: 14px; }
.EasyMDEContainer .CodeMirror-focused { border-color: #0969da; box-shadow: 0 0 0 3px rgba(9,105,218,0.1); }
.editor-wrap { display: none; }

/* v2.5.0 备份提醒徽章 */
.backup-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    transition: all 0.2s;
    margin-right: 8px;
}
.backup-badge.backup-warn {
    background: #fff8c5;
    color: #7d4e00;
    border-color: #d4a72c;
}
.backup-badge.backup-warn:hover {
    background: #ffdf5d;
    border-color: #b8860b;
}
.backup-badge.backup-ok {
    background: #dafbe1;
    color: #116329;
    border-color: #4ac26b;
}