@font-face { font-family: Inter; src: url("./fonts/inter-latin-variable.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Noto Sans SC"; src: url("./fonts/noto-sans-sc-v40-chinese-simplified-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root { color-scheme: light; --ink:#27333d; --muted:#73808a; --line:#dfe5e8; --surface:#fff; --canvas:#f5f7f8; --accent:#527e8d; --accent-soft:#e9f2f4; --danger:#a95555; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--canvas); color:var(--ink); font-family:Inter,"Noto Sans SC","Microsoft YaHei",sans-serif; }
button, input, textarea { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
.hidden { display:none !important; }
.documents-app { min-height:100vh; display:grid; grid-template-rows:44px minmax(0,1fr); }
.documents-header { position:relative; z-index:8; display:grid; grid-template-columns:max-content minmax(0,1fr) max-content; align-items:center; gap:6px; border-bottom:1px solid #dfe5ec; padding:5px 8px; background:#f8fafc; }
.documents-brand { min-width:0; padding:0 5px 0 2px; }
.documents-brand h1 { margin:0; color:#25303b; font-size:14px; font-weight:700; line-height:1; letter-spacing:-.02em; white-space:nowrap; }
.documents-main-nav { display:flex; min-width:0; gap:2px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.documents-main-nav::-webkit-scrollbar { display:none; }
.documents-main-nav > a,.documents-nav-dropdown > summary { flex:0 0 auto; min-height:30px; border:1px solid transparent; border-radius:5px; padding:0 8px; color:#52606d; background:transparent; font-size:11px; font-weight:600; line-height:28px; text-decoration:none; white-space:nowrap; cursor:pointer; }
.documents-main-nav > a:hover,.documents-nav-dropdown > summary:hover { border-color:#dce3ea; background:#eef2f6; color:#24313d; }
.documents-main-nav > a.active { border-color:#d5e2e8; background:#e9f1f4; box-shadow:inset 0 -2px 0 #39768a; color:#1d5264; }
.documents-nav-dropdown { position:relative; flex:0 0 auto; }
.documents-nav-dropdown > summary { display:block; width:25px; padding:0; text-align:center; list-style:none; }
.documents-nav-dropdown > summary::-webkit-details-marker { display:none; }
.documents-nav-dropdown > div { position:fixed; z-index:20; display:grid; min-width:112px; margin-top:3px; border:1px solid var(--line); border-radius:7px; padding:5px; background:#fff; box-shadow:0 12px 32px rgba(39,51,61,.14); }
.documents-nav-dropdown > div a { border-radius:5px; padding:7px 9px; color:#52606d; font-size:10px; text-decoration:none; white-space:nowrap; }
.documents-nav-dropdown > div a:hover { background:#eef2f4; }
.documents-header-actions { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.documents-header-actions a, .documents-header-actions button { border:1px solid var(--line); border-radius:6px; padding:6px 9px; color:#52636e; background:#fff; font-size:10px; text-decoration:none; }
.cloud-status { color:#5c7b69; font-size:10px; }
.cloud-status[data-state="saving"] { color:#94713d; }
.cloud-status[data-state="error"] { color:var(--danger); }
.documents-layout { display:grid; grid-template-columns:210px minmax(0,1fr); min-height:0; }
.documents-sidebar { position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-height:0; border-right:1px solid var(--line); padding:5px 26px 5px 8px; background:#f4f7fb; }
.documents-sidebar-tools { display:grid; width:100%; min-width:0; gap:5px; padding:1px 0 7px; border-bottom:1px solid #dfe5ec; }
.primary-button { border:1px solid #4e7886 !important; color:#fff !important; background:#5b8491 !important; }
.documents-sidebar-tools button, .documents-sidebar-tools input { min-height:27px; border:1px solid #d8e0e3; border-radius:5px; padding:4px 6px; background:#fff; font-size:9px; }
.documents-sidebar-tools input { width:100%; min-width:0; }
.documents-create-actions { display:grid; width:100%; min-width:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
.documents-create-actions button { min-width:0; padding-inline:4px; white-space:nowrap; }
.documents-sidebar-toggle { position:absolute; top:0; right:0; z-index:4; width:20px; height:100%; border:0; border-left:1px solid #d5dde0; border-right:1px solid #d5dde0; padding:0; background:#edf1f2; cursor:pointer; }
.documents-sidebar-toggle::before { content:"‹"; color:#75848c; font-size:13px; }
.documents-layout.sidebar-collapsed { grid-template-columns:20px minmax(0,1fr); }
.documents-layout.sidebar-collapsed .documents-sidebar-tools,.documents-layout.sidebar-collapsed .document-list,.documents-layout.sidebar-collapsed .document-list-empty { display:none; }
.documents-layout.sidebar-collapsed .documents-sidebar { border-right:0; background:transparent; }
.documents-layout.sidebar-collapsed .documents-sidebar { padding:0; }
.documents-layout.sidebar-collapsed .documents-sidebar-toggle { right:0; }
.documents-layout.sidebar-collapsed .documents-sidebar-toggle::before { content:"›"; }
.archive-toggle { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:9px; }
.archive-toggle input { width:12px; min-width:12px; min-height:12px; margin:0; padding:0; }
.folder-depth-hint { margin-top:-21px; margin-left:auto; color:#99a3a8; font-size:8px; pointer-events:none; }
.document-list { min-height:0; overflow:auto; padding:1px 0; }
.document-list-item { position:relative; width:100%; min-height:27px; display:grid; grid-template-columns:42px minmax(0,1fr); gap:5px; align-items:center; border:0; border-radius:0; padding:4px 6px 4px 12px; color:var(--ink); background:transparent; text-align:left; cursor:pointer; }
.document-list-item::before { position:absolute; left:3px; width:4px; height:4px; border-radius:50%; background:#91a0af; content:""; }
.document-list-item:hover { background:#e8edf2; }
.document-list-item.active { color:#1d5264; background:#dfe9f0; box-shadow:inset 2px 0 0 #0e7490; }
.document-list-item.archived { opacity:.58; }
.document-folder { margin:0; }
.document-folder-header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:5px; align-items:center; min-height:27px; border-radius:0; padding:4px 3px; color:#4b5b67; font-size:9.5px; font-weight:700; cursor:grab; }
.document-folder-header:hover,.document-folder-header.drop-target { background:#e8edf2; }
.document-folder-root > .document-folder-header { color:#30485f; background:#e8eef5; box-shadow:inset 2px 0 0 #7891aa; }
.document-folder-header[data-drop-mode="before"] { box-shadow:inset 0 2px #6e98a5; }
.document-folder-header[data-drop-mode="after"] { box-shadow:inset 0 -2px #6e98a5; }
.document-folder-header button { border:0; padding:1px 4px; color:#87939a; background:transparent; font-size:12px; }
.document-folder-items { position:relative; margin-left:7px; border-left:1px solid #cbd6e1; padding-left:7px; }
.document-folder-root > .document-folder-items { margin-left:0; border-left:0; padding-left:0; }
.document-folder-empty { padding:4px 5px 5px; color:#98a2a8; font-size:8px; }
.document-list-item.dragging { opacity:.35; }
.document-list-item strong { color:#73828b; font-size:8px; font-weight:700; }
.document-list-item span { overflow:hidden; font-size:10px; font-weight:560; text-overflow:ellipsis; white-space:nowrap; }
.document-list-empty { padding:15px; color:var(--muted); font-size:10px; line-height:1.6; }
.document-workspace { min-width:0; min-height:0; background:#fff; }
.document-welcome { height:100%; display:grid; place-content:center; justify-items:center; padding:30px; text-align:center; }
.document-welcome > span { color:#8ca0a8; font-size:9px; font-weight:750; letter-spacing:.18em; }
.document-welcome h2 { margin:10px 0 5px; font-size:19px; }
.document-welcome p { margin:0 0 18px; color:var(--muted); font-size:11px; }
.document-welcome button { border-radius:7px; padding:8px 14px; font-size:11px; }
.document-editor { height:100%; display:grid; grid-template-rows:auto auto minmax(0,1fr); min-height:0; }
.document-editor-header { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:64px; border-bottom:1px solid var(--line); padding:10px 15px; }
.document-identity { display:grid; grid-template-columns:auto minmax(180px,560px); gap:4px 8px; align-items:center; min-width:0; }
.document-identity > span { grid-row:1; color:#66818a; font-size:9px; font-weight:700; }
.document-identity input { grid-column:2; grid-row:1; min-width:0; border:0; padding:3px 0; color:#202b32; background:transparent; font-size:17px; font-weight:650; outline:none; }
.document-identity small { grid-column:2; color:var(--muted); font-size:9px; }
.document-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.document-actions button { min-height:28px; border:1px solid var(--line); border-radius:6px; padding:5px 8px; color:#596872; background:#fff; font-size:9px; }
.document-actions .danger-button { color:var(--danger); }
.editor-mode-tabs { display:flex; align-items:center; gap:2px; min-height:34px; border-bottom:1px solid var(--line); padding:4px 12px; background:#fafbfb; }
.editor-mode-tabs button { border:0; border-radius:5px; padding:5px 9px; color:#687780; background:transparent; font-size:9px; }
.editor-mode-tabs button.active { color:#315665; background:#e5eef1; }
.editor-mode-tabs > span { margin-left:auto; color:#95a0a6; font-size:8px; }
.markdown-workspace { display:grid; grid-template-columns:1fr 1fr; min-height:0; }
.markdown-editor-pane, .markdown-preview { min-width:0; min-height:0; }
.markdown-editor-pane { border-right:1px solid var(--line); }
.markdown-editor-pane textarea { width:100%; height:100%; resize:none; border:0; padding:22px 25px 60px; color:#34414a; background:#fbfcfc; font:12px/1.75 "Cascadia Code",Consolas,"Noto Sans SC",monospace; outline:none; }
.markdown-preview { overflow:auto; padding:22px 28px 60px; }
.markdown-workspace.mode-edit { grid-template-columns:1fr; }
.markdown-workspace.mode-edit .markdown-preview { display:none; }
.markdown-workspace.mode-preview { grid-template-columns:1fr; }
.markdown-workspace.mode-preview .markdown-editor-pane { display:none; }
.markdown-body { color:#34414a; font-size:12px; line-height:1.75; }
.markdown-body h1,.markdown-body h2,.markdown-body h3 { margin:1.3em 0 .55em; color:#202d35; line-height:1.3; }
.markdown-body h1 { border-bottom:1px solid var(--line); padding-bottom:7px; font-size:22px; }
.markdown-body h2 { font-size:17px; }.markdown-body h3 { font-size:14px; }
.markdown-body p { margin:.6em 0; }.markdown-body ul,.markdown-body ol { padding-left:22px; }
.markdown-body blockquote { margin:12px 0; border-left:3px solid #9cb7c0; padding:5px 12px; color:#65747c; background:#f5f8f9; }
.markdown-body code { border-radius:4px; padding:2px 4px; background:#eef2f3; font:10px/1.5 Consolas,monospace; }
.markdown-body pre { overflow:auto; border:1px solid var(--line); border-radius:7px; padding:12px; background:#f5f7f8; }
.markdown-body pre code { padding:0; background:none; }
.markdown-body table { width:100%; border-collapse:collapse; margin:12px 0; font-size:10px; }
.markdown-body th,.markdown-body td { border:1px solid #dce3e6; padding:6px 8px; text-align:left; }.markdown-body th { background:#f1f5f6; }
.markdown-body a { color:#3f7182; }
.flow-sequence { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:14px 0; border:1px solid #d8e4e8; border-radius:8px; padding:12px; background:#f7fbfc; }
.flow-node { border:1px solid #bcd2da; border-radius:7px; padding:6px 10px; color:#315563; background:#fff; font-size:10px; font-weight:650; }.flow-arrow { color:#7d9da8; }
.relation-dialog { width:min(760px,calc(100vw - 24px)); max-height:82vh; border:0; border-radius:10px; padding:0; box-shadow:0 22px 70px rgba(37,49,57,.24); }
.relation-dialog::backdrop { background:rgba(36,45,51,.3); }
.relation-panel { display:grid; grid-template-rows:auto auto auto minmax(180px,1fr) auto; max-height:82vh; }
.relation-panel > header { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding:13px 15px; }.relation-panel h2 { margin:0;font-size:15px; }.relation-panel header p { margin:3px 0 0;color:var(--muted);font-size:9px; }.relation-panel header button { border:0;background:transparent;font-size:18px; }
.relation-panel > input { margin:10px 12px 6px; border:1px solid var(--line); border-radius:6px; padding:7px 9px; font-size:10px; }
.relation-type-tabs { display:flex; gap:4px; padding:0 12px 7px; }.relation-type-tabs button { border:0;border-radius:5px;padding:5px 9px;color:#667780;background:#eef2f3;font-size:9px; }.relation-type-tabs button.active { color:#fff;background:#658895; }
.relation-candidates { overflow:auto; border-top:1px solid var(--line); padding:6px 12px; }
.relation-candidate { display:grid; grid-template-columns:auto 60px minmax(0,1fr); gap:8px; align-items:center; border-radius:6px; padding:7px; font-size:10px; }.relation-candidate:hover { background:#f1f5f6; }.relation-candidate small { color:#72818a;font-size:8px; }.relation-candidate span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.relation-panel footer { display:flex; align-items:center; justify-content:flex-end; gap:7px; border-top:1px solid var(--line); padding:10px 12px; }.relation-panel footer span { margin-right:auto;color:var(--muted);font-size:9px; }.relation-panel footer button { border:1px solid var(--line);border-radius:6px;padding:6px 10px;background:#fff;font-size:9px; }
.folder-dialog { width:min(390px,calc(100vw - 24px)); border:0; border-radius:10px; padding:0; box-shadow:0 22px 70px rgba(37,49,57,.24); }
.folder-dialog::backdrop { background:rgba(36,45,51,.3); }
.folder-panel { display:grid; gap:12px; }
.folder-panel > header { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding:14px 16px; }.folder-panel h2 { margin:0;font-size:15px; }.folder-panel header p { margin:4px 0 0;color:var(--muted);font-size:9px; }.folder-panel header button { border:0;background:transparent;font-size:18px; }
.folder-panel > label { display:grid; gap:5px; padding:0 16px; color:#687780; font-size:9px; font-weight:650; }.folder-panel input,.folder-panel select { width:100%; border:1px solid var(--line); border-radius:6px; padding:8px 9px; color:var(--ink); background:#fff; font-size:10px; }
.folder-panel footer { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:7px; border-top:1px solid var(--line); padding:11px 16px; }.folder-panel footer button { border:1px solid var(--line);border-radius:6px;padding:6px 10px;background:#fff;font-size:9px; }.folder-panel .danger-button { color:var(--danger); }
.documents-auth { position:fixed;inset:0;display:grid;place-items:center;background:#f4f6f7; }.documents-auth > div { width:min(360px,calc(100vw - 30px));border:1px solid var(--line);border-radius:10px;padding:24px;background:#fff;text-align:center; }.documents-auth h1 { font-size:18px; }.documents-auth p { color:var(--muted);font-size:11px; }.documents-auth a { display:inline-block;border-radius:6px;padding:8px 12px;color:#fff;background:var(--accent);font-size:11px;text-decoration:none; }
@media(max-width:760px){.documents-layout{grid-template-columns:210px minmax(0,1fr)}.documents-layout.sidebar-collapsed{grid-template-columns:20px minmax(0,1fr)}.document-editor-header{align-items:flex-start;flex-direction:column}.document-actions{justify-content:flex-start}.markdown-workspace{grid-template-columns:1fr}}
@media(max-width:700px){.documents-header{grid-template-columns:max-content minmax(0,1fr) max-content;gap:5px;padding:5px 6px}.documents-brand h1{max-width:76px;overflow:hidden;text-overflow:ellipsis}.documents-main-nav > a{padding-inline:6px}.cloud-status{display:none}}
@media(max-width:520px){.documents-header-actions a{padding-inline:6px}.documents-layout{grid-template-columns:150px minmax(0,1fr)}.documents-layout.sidebar-collapsed{grid-template-columns:20px minmax(0,1fr)}.documents-sidebar{max-height:none;border-right:1px solid var(--line);border-bottom:0;padding-left:6px;padding-right:24px}.document-workspace{min-height:0}.document-identity{grid-template-columns:auto minmax(0,1fr)}.document-actions .danger-button{display:none}}