:root { color-scheme: light; --ink:#202630; --muted:#71808e; --line:rgb(43 61 80 / 12%); --paper:#f8fafb; --card:rgb(255 255 255 / 86%); --accent:#39b5e8; --accent-deep:#168dbd; --shadow:0 18px 55px rgb(47 76 96 / 12%); font-family:"LXGW WenKai Screen","Microsoft YaHei",sans-serif; }
@media (prefers-color-scheme:dark) { :root { color-scheme:dark; --ink:#e9eef2; --muted:#a4b0bb; --line:rgb(213 230 241 / 14%); --paper:#151b20; --card:rgb(28 37 44 / 90%); --shadow:0 18px 55px rgb(0 0 0 / 24%); } }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:radial-gradient(circle at 8% 4%,rgb(57 181 232 / 10%),transparent 24rem),var(--paper); color:var(--ink); } button,input,textarea { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; }
.app-shell { min-height:100vh; } .topbar { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; height:74px; padding:0 clamp(20px,5vw,72px); border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--paper) 86%,transparent); backdrop-filter:blur(18px); }
.brand { display:inline-flex; align-items:center; gap:11px; color:inherit; text-decoration:none; } .brand-mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line)); border-radius:11px 11px 11px 4px; color:var(--accent-deep); font-weight:800; } .brand strong,.brand small { display:block; } .brand strong { font-size:1rem; } .brand small { margin-top:2px; color:var(--muted); font-size:.68rem; } .topbar-actions { display:flex; align-items:center; gap:12px; } .user-badge { color:var(--muted); font-size:.82rem; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:8px 15px; border:1px solid transparent; border-radius:9px; cursor:pointer; text-decoration:none; transition:transform .2s ease,border-color .2s ease,background-color .2s ease,box-shadow .2s ease; } .button:hover { transform:translateY(-1px); } .button-primary { background:var(--accent); color:#fff; box-shadow:0 8px 20px rgb(57 181 232 / 20%); } .button-primary:hover { background:var(--accent-deep); } .button-secondary { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); background:color-mix(in srgb,var(--accent) 9%,transparent); color:var(--accent-deep); } .button-ghost { border-color:var(--line); background:transparent; color:var(--muted); } .button-wide { width:100%; }
.login-view { display:grid; place-items:center; min-height:calc(100vh - 74px); padding:30px; } .login-card { width:min(100%,450px); padding:clamp(30px,6vw,58px); border:1px solid var(--line); border-radius:22px 22px 22px 7px; background:var(--card); box-shadow:var(--shadow); } .eyebrow { color:var(--accent-deep); font-size:.68rem; font-weight:800; letter-spacing:.13em; } .login-card h1 { margin:13px 0 14px; font-size:clamp(1.8rem,5vw,2.5rem); } .login-card p { margin:0 0 28px; color:var(--muted); line-height:1.85; } .login-note { display:block; margin-top:15px; color:var(--muted); text-align:center; font-size:.74rem; }
.workspace { display:grid; grid-template-columns:minmax(235px,285px) minmax(0,1fr); width:min(1440px,100%); min-height:calc(100vh - 74px); margin:0 auto; } .sidebar { padding:34px 22px; border-right:1px solid var(--line); } .sidebar-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:22px; } .sidebar-heading h2 { margin:6px 0 0; font-size:1.45rem; } .icon-button { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--accent-deep); font-size:1.3rem; cursor:pointer; } .search-box { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; color:var(--muted); } .search-box input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:.82rem; } .post-list { display:grid; gap:5px; margin-top:18px; } .post-item { display:block; width:100%; padding:10px 11px; border:1px solid transparent; border-radius:9px; background:transparent; color:inherit; text-align:left; cursor:pointer; } .post-item:hover,.post-item.active { border-color:var(--line); background:color-mix(in srgb,var(--accent) 8%,transparent); } .post-item strong,.post-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .post-item strong { font-size:.84rem; font-weight:650; } .post-item small { margin-top:4px; color:var(--muted); font-size:.69rem; } .draft-label { color:#d89132; } .sidebar-link { display:flex; justify-content:space-between; width:100%; margin-top:28px; padding:11px; border:0; border-top:1px solid var(--line); background:transparent; color:var(--muted); text-align:left; cursor:pointer; font-size:.78rem; }
.editor-panel { min-width:0; } .empty-editor { display:grid; place-items:center; align-content:center; min-height:calc(100vh - 74px); padding:30px; text-align:center; } .empty-mark { color:var(--accent); font-size:2.3rem; } .empty-editor h2 { margin:15px 0 6px; } .empty-editor p { margin:0 0 22px; color:var(--muted); } .editor-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:72px; padding:16px clamp(20px,5vw,62px); border-bottom:1px solid var(--line); } .toolbar-actions { display:flex; flex-wrap:wrap; gap:8px; } .status-dot { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:#aeb8bf; } .status-dot.saved { background:#52b788; } .status-dot.dirty { background:#d89132; } .editor-state-text { color:var(--muted); font-size:.76rem; } .editor-scroll { max-width:890px; margin:0 auto; padding:38px clamp(20px,6vw,82px) 100px; } .editor-notice { margin-bottom:20px; padding:10px 13px; border-radius:9px; background:color-mix(in srgb,#d89132 14%,transparent); color:#9b651e; font-size:.82rem; } .title-row { display:flex; align-items:end; gap:15px; } .title-input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--ink); font-size:clamp(1.8rem,4vw,2.6rem); font-weight:750; } .path-label { max-width:270px; overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; font-size:.7rem; } .meta-grid { display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:12px; margin:32px 0 14px; } .meta-grid label,.cover-field { display:grid; gap:7px; color:var(--muted); font-size:.7rem; } .meta-grid input,.cover-field input { width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; outline:0; background:var(--card); color:var(--ink); font-size:.82rem; } .markdown-field { display:grid; gap:9px; margin-top:32px; color:var(--muted); font-size:.72rem; } .markdown-field textarea { width:100%; min-height:560px; resize:vertical; padding:0; border:0; outline:0; background:transparent; color:var(--ink); font:1rem/1.9 ui-monospace,SFMono-Regular,Consolas,monospace; }
.preview-panel { min-width:0; } .preview-panel .editor-toolbar { padding-left:clamp(20px,5vw,62px); } .markdown-preview { max-width:820px; margin:0 auto; padding:40px clamp(20px,6vw,82px) 100px; line-height:1.9; } .markdown-preview h1,.markdown-preview h2,.markdown-preview h3 { line-height:1.35; } .markdown-preview pre { overflow:auto; padding:15px; border-radius:9px; background:color-mix(in srgb,var(--ink) 8%,transparent); } .markdown-preview code { padding:2px 5px; border-radius:4px; background:color-mix(in srgb,var(--accent) 12%,transparent); } .markdown-preview blockquote { margin-left:0; padding-left:15px; border-left:3px solid var(--accent); color:var(--muted); } .markdown-preview img { max-width:100%; border-radius:9px; } .toast { position:fixed; right:24px; bottom:24px; z-index:10; max-width:min(380px,calc(100vw - 48px)); padding:12px 15px; border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:var(--shadow); opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .2s ease,transform .2s ease; } .toast.show { opacity:1; transform:translateY(0); }
@media (max-width:760px) { .workspace { display:block; } .sidebar { border-right:0; border-bottom:1px solid var(--line); padding:22px 17px 16px; } .post-list { display:flex; overflow-x:auto; padding-bottom:2px; } .post-item { min-width:190px; } .sidebar-link { margin-top:14px; } .editor-toolbar { align-items:flex-start; flex-direction:column; } .toolbar-actions { width:100%; } .toolbar-actions .button { flex:1; } .meta-grid { grid-template-columns:1fr; } .title-row { display:block; } .path-label { display:block; margin-top:9px; } .editor-scroll { padding-top:25px; } .markdown-field textarea { min-height:430px; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }