:root,[data-theme=light]{--color-bg:#fff;--color-bg-secondary:#f7f6f3;--color-bg-hover:#37352f14;--color-bg-active:#37352f21;--color-text:#37352f;--color-text-secondary:#37352fa6;--color-text-muted:#37352f73;--color-border:#37352f1a;--color-accent:#2383e2;--color-danger:#e03e3e;--color-code-bg:#87837826;--color-sidebar-bg:#f7f6f3;--shadow-sm:0 1px 3px #0000001a;--shadow-md:0 3px 6px #0000001f;--radius:5px}[data-theme=dark]{--color-bg:#191919;--color-bg-secondary:#202020;--color-bg-hover:#ffffff14;--color-bg-active:#ffffff21;--color-text:#e9e9e7;--color-text-secondary:#ffffffa6;--color-text-muted:#ffffff73;--color-border:#ffffff21;--color-accent:#4d9fed;--color-danger:#f16565;--color-code-bg:#ffffff1a;--color-sidebar-bg:#202020;--shadow-sm:0 1px 3px #0006;--shadow-md:0 3px 6px #00000080;--radius:5px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--color-bg);color:var(--color-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;transition:background .15s,color .15s}button,input,textarea{color:inherit;font-family:inherit}button{cursor:pointer}.app-shell{height:100vh;display:flex;overflow:hidden}.auth-gate{justify-content:center;align-items:center;height:100vh;display:flex}.sidebar{background:var(--color-sidebar-bg);border-right:1px solid var(--color-border);flex-direction:column;width:240px;min-width:240px;padding:8px;display:flex;overflow-y:auto}.sidebar-header{justify-content:space-between;align-items:center;margin-bottom:8px;padding:6px 8px;display:flex}.sidebar-title{color:var(--color-text-secondary);font-size:13px;font-weight:600}.theme-toggle-btn{border-radius:var(--radius);color:var(--color-text-secondary);background:0 0;border:none;padding:4px 6px;font-size:14px;transition:background .12s,color .12s}.theme-toggle-btn:hover{background:var(--color-bg-hover);color:var(--color-text)}.page-list{flex-direction:column;flex:1;gap:1px;display:flex;overflow-y:auto}.page-list-item{border-radius:var(--radius);color:var(--color-text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;padding:5px 8px;font-size:14px;transition:background .12s;display:flex;position:relative}.page-list-item:hover{background:var(--color-bg-hover)}.page-list-item.active{background:var(--color-bg-active);color:var(--color-text)}.page-list-item-icon{text-align:center;flex-shrink:0;width:16px;font-size:14px}.page-list-item-title{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.page-delete-btn{color:var(--color-text-muted);opacity:0;background:0 0;border:none;border-radius:4px;padding:2px 4px;font-size:12px;transition:opacity .12s,background .12s,color .12s}.page-list-item:hover .page-delete-btn{opacity:1}.page-delete-btn:hover{background:var(--color-bg-active);color:var(--color-danger)}.new-page-btn{border-radius:var(--radius);color:var(--color-text-secondary);text-align:left;background:0 0;border:none;align-items:center;gap:6px;margin-top:4px;padding:5px 8px;font-size:14px;transition:background .12s,color .12s;display:flex}.new-page-btn:hover{background:var(--color-bg-hover);color:var(--color-text)}.empty-state{color:var(--color-text-muted);padding:16px;font-size:13px}.main-content{flex-direction:column;flex:1;display:flex;position:relative;overflow-y:auto}.save-status{color:var(--color-text-muted);z-index:5;font-size:12px;position:absolute;top:12px;right:20px}.save-status-error{color:var(--color-danger)}.share-btn{color:var(--color-text-secondary);border-radius:var(--radius);z-index:5;background:0 0;border:none;padding:5px 8px;font-size:13px;transition:background .12s,color .12s;position:absolute;top:10px;right:90px}.share-btn:before{content:"🔗 "}.share-btn:hover{background:var(--color-bg-hover);color:var(--color-text)}.cover-image-wrap{background:var(--color-bg-secondary);width:100%;height:30vh;min-height:180px;position:relative;overflow:hidden}.cover-image-wrap img{object-fit:cover;width:100%;height:100%;display:block}.remove-cover-btn{color:#fff;border-radius:var(--radius);opacity:0;background:#0000008c;border:none;padding:6px 10px;font-size:12px;transition:opacity .15s,background .12s;position:absolute;bottom:16px;right:16px}.cover-image-wrap:hover .remove-cover-btn{opacity:1}.remove-cover-btn:hover{background:#000000bf}.change-cover-btn{color:#fff;border-radius:var(--radius);opacity:0;background:#0000008c;border:none;padding:6px 10px;font-size:12px;transition:opacity .15s,background .12s;position:absolute;bottom:16px;right:130px}.cover-image-wrap:hover .change-cover-btn{opacity:1}.change-cover-btn:hover{background:#000000bf}.page-header{width:100%;max-width:900px;margin:0 auto;padding:40px 96px 0}.page-header.has-cover{margin-top:-44px}.page-icon-display{cursor:pointer;border-radius:var(--radius);justify-content:center;align-items:center;margin-bottom:8px;font-size:78px;line-height:1;transition:background .12s;display:inline-flex;position:relative}.page-icon-display:hover{background:var(--color-bg-hover)}.action-buttons-row{align-items:center;gap:4px;min-height:30px;padding:12px 0 6px;display:flex}.action-btn{color:var(--color-text-muted);background:0 0;border:none;border-radius:4px;align-items:center;gap:4px;padding:4px 6px;font-size:13px;transition:color .12s,background .12s;display:inline-flex}.action-btn:hover{color:var(--color-text);background:var(--color-bg-hover)}.action-btn.add-icon-btn:before{content:"😀"}.action-btn.add-cover-btn:before{content:"🖼️"}.page-title-input{width:100%;color:var(--color-text);background:0 0;border:none;outline:none;padding:3px 2px;font-size:40px;font-weight:700;line-height:1.2}.page-title-input::placeholder{color:var(--color-text-muted)}.icon-picker-wrap{display:inline-block;position:relative}.icon-picker-dropdown{background:var(--color-bg);border:1px solid var(--color-border);box-shadow:var(--shadow-md);z-index:30;border-radius:8px;width:296px;padding:10px;position:absolute;top:calc(100% + 6px);left:0}.emoji-grid{grid-template-columns:repeat(8,1fr);gap:2px;display:grid}.emoji-grid-item{background:0 0;border:none;border-radius:4px;padding:5px;font-size:20px;line-height:1;transition:background .1s}.emoji-grid-item:hover{background:var(--color-bg-hover)}.icon-picker-remove{border:none;border-top:1px solid var(--color-border);width:100%;color:var(--color-text-secondary);background:0 0;border-radius:0;margin-top:8px;padding:6px;font-size:13px;transition:color .12s}.icon-picker-remove:hover{color:var(--color-danger)}.cover-picker-dropdown{background:var(--color-bg);border:1px solid var(--color-border);box-shadow:var(--shadow-md);z-index:30;border-radius:8px;flex-wrap:wrap;align-items:center;gap:10px;margin:4px 0 12px;padding:14px;display:flex;position:relative}.cover-upload-btn{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);padding:7px 12px;font-size:13px;transition:background .12s}.cover-upload-btn:hover{background:var(--color-bg-hover)}.cover-picker-divider{color:var(--color-text-muted);font-size:12px}.cover-url-input{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg);min-width:180px;color:var(--color-text);outline:none;flex:1;padding:6px 8px;font-size:13px}.cover-url-input:focus{border-color:var(--color-accent)}.cover-picker-confirm-btn{background:var(--color-accent);color:#fff;border-radius:var(--radius);border:none;padding:7px 12px;font-size:13px;transition:opacity .12s}.cover-picker-confirm-btn:hover{opacity:.85}.cover-picker-cancel-btn{color:var(--color-text-secondary);border-radius:var(--radius);background:0 0;border:none;padding:7px 10px;font-size:13px;transition:background .12s}.cover-picker-cancel-btn:hover{background:var(--color-bg-hover)}.editor-wrap{flex:1;width:100%;max-width:900px;margin:0 auto;padding:8px 96px 120px;position:relative}.editor-wrap[data-readonly=true]{padding-bottom:60px}.slate-editable{outline:none;min-height:200px;font-size:16px;line-height:1.6}.slate-editable p{margin:0;padding:3px 2px}.el-heading-one{margin:0;padding:14px 2px 3px;font-size:28px;font-weight:700}.el-heading-two{margin:0;padding:10px 2px 3px;font-size:22px;font-weight:700}.el-heading-three{margin:0;padding:8px 2px 3px;font-size:18px;font-weight:700}.el-bulleted-list,.el-numbered-list{margin:0;padding:3px 2px 3px 26px}.el-list-item{padding:2px 0}.el-code-block{background:var(--color-code-bg);border-radius:var(--radius);white-space:pre-wrap;margin:4px 2px;padding:14px 16px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:13.5px;overflow-x:auto}.el-blockquote{border-left:3px solid var(--color-border);color:var(--color-text-secondary);margin:4px 2px;padding:3px 2px 3px 14px}.el-image-wrap{margin:6px 2px}.el-image-wrap img{border-radius:var(--radius);max-width:100%;display:block}.slate-placeholder{color:var(--color-text-muted)}.slash-menu{z-index:40;background:var(--color-bg);border:1px solid var(--color-border);box-shadow:var(--shadow-md);border-radius:8px;width:260px;max-height:320px;padding:4px;position:absolute;overflow-y:auto}.slash-menu-item{cursor:pointer;border-radius:4px;align-items:center;gap:10px;padding:7px 8px;font-size:14px;display:flex}.slash-menu-item .icon{text-align:center;width:20px;font-size:16px}.slash-menu-item.selected,.slash-menu-item:hover{background:var(--color-bg-hover)}.slash-menu-empty{color:var(--color-text-muted);padding:10px;font-size:13px}.shared-banner{background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border);color:var(--color-text-secondary);text-align:center;padding:8px 16px;font-size:13px}.share-dialog-overlay{z-index:100;background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.share-dialog{background:var(--color-bg);box-shadow:var(--shadow-md);border-radius:8px;width:440px;max-width:90vw;padding:20px}.share-dialog h3{margin:0 0 10px;font-size:16px}.share-dialog p{color:var(--color-text-secondary);margin:0 0 12px;font-size:13px}.share-link-row{gap:8px;display:flex}.share-link-row input{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg-secondary);color:var(--color-text);outline:none;flex:1;padding:7px 8px;font-size:12px}.share-dialog-close{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius);width:100%;margin-top:16px;padding:8px;font-size:13px}.share-dialog-close:hover{background:var(--color-bg-hover)}.copy-btn{background:var(--color-accent);color:#fff;border-radius:var(--radius);white-space:nowrap;border:none;padding:7px 12px;font-size:12px}.copy-btn:hover{opacity:.85}