:root{--bg:#f7f8fa;--panel:#ffffff;--ink:#1f2937;--muted:#6b7280;--line:#e5e7eb;--brand:#111827;--danger:#b91c1c;--mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;--sans:'IBM Plex Sans','Segoe UI',sans-serif}*{box-sizing:border-box}body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);min-height:100vh;padding:18px}.app-shell{max-width:1120px;margin:0 auto;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);box-shadow:0 8px 28px rgba(15,23,42,.08)}.app-header{padding:16px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border-bottom:1px solid var(--line)}.app-header h1{margin:0;font-size:1.1rem;letter-spacing:-.01em}.app-header p{margin:4px 0 0;font-size:.86rem;color:var(--muted)}.header-actions,.sidebar-bottom,.toolbar-actions{display:flex;gap:8px;flex-wrap:wrap}.workspace{display:grid;grid-template-columns:270px 1fr;min-height:72vh}.doc-sidebar{border-right:1px solid var(--line);background:#fbfbfc;display:flex;flex-direction:column}.sidebar-bottom,.sidebar-top{padding:10px}#docName,#searchInput,.btn,.rich-editor{font-family:inherit}#docName,#searchInput{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 10px;color:var(--ink);background:#fff}#docName:focus,#searchInput:focus,.rich-editor:focus{outline:0;border-color:#9ca3af;box-shadow:0 0 0 3px rgba(156,163,175,.2)}.doc-list{margin:0;padding:0 8px;list-style:none;flex:1;overflow:auto}.doc-item{border:1px solid transparent;border-radius:8px;padding:10px;cursor:pointer;margin-bottom:6px;background:0 0}.doc-item:hover{background:#f3f4f6}.doc-item.active{border-color:#d1d5db;background:#f3f4f6}.doc-item-name{display:block;font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.doc-item-meta{color:var(--muted);font-size:.74rem;margin-top:3px}.editor-pane{display:flex;flex-direction:column;min-width:0}.editor-toolbar{padding:10px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:8px}.format-toolbar{padding:8px 10px;border-bottom:1px solid var(--line);display:flex;align-items:center;flex-wrap:wrap;gap:6px;background:#fbfbfc}.format-btn{min-width:36px;padding:6px 8px}.color-field{font-size:.72rem;color:var(--muted);margin-left:6px}#highlightColor,#textColor{width:32px;height:28px;padding:0;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer}#fontSizeSelect{height:28px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font-size:.78rem;padding:0 4px}.rich-editor{flex:1;border:0;width:100%;padding:16px;line-height:1.6;font-size:.94rem;color:#111827;background:#fff;font-family:var(--mono);overflow:auto}.rich-editor:empty::before{content:'Start typing your text here...';color:#9ca3af}.rich-editor ol,.rich-editor ul{list-style-position:inside;padding-left:0}.status-bar{border-top:1px solid var(--line);background:#fbfbfc;color:var(--muted);padding:7px 10px;display:flex;gap:12px;flex-wrap:wrap;font-size:.75rem}.btn{border:1px solid var(--line);border-radius:8px;background:#fff;padding:8px 11px;font-size:.82rem;cursor:pointer;color:var(--ink)}.btn:hover{border-color:#9ca3af}.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn-primary:hover{background:#000;border-color:#000}.btn-danger{color:#fff;border-color:var(--danger);background:var(--danger)}@media (max-width:920px){.workspace{grid-template-columns:1fr}.doc-sidebar{border-right:none;border-bottom:1px solid var(--line)}.app-header,.editor-toolbar{grid-template-columns:1fr;align-items:start}}@media print{@page{margin:10mm}.app-header,.doc-sidebar,.editor-toolbar,.format-toolbar,.status-bar{display:none}body{padding:0;background:#fff}.app-shell{border:0;box-shadow:none;max-width:none;width:100%;margin:0;border-radius:0;overflow:visible}.editor-pane,.workspace{display:block;width:100%;min-height:auto}.editor-pane{padding:10mm}.rich-editor{white-space:pre-wrap;min-height:auto;padding:0;width:100%;-webkit-print-color-adjust:exact;print-color-adjust:exact}.rich-editor *{-webkit-print-color-adjust:exact;print-color-adjust:exact}}