:root{--bg: #0e0e17;--sidebar-bg: #0b0b13;--header-bg: #0b0b13;--card-bg: #15152a;--card-border: rgba(255, 255, 255, .07);--active-bg: #3d2fa8;--active-text: #ffffff;--accent: #6366f1;--accent-hover: #4f46e5;--text: #e2e8f0;--text-muted: #8892a4;--text-faint: #3d4560;--input-bg: #11111e;--input-border: rgba(255, 255, 255, .09);--input-focus: rgba(99, 102, 241, .6);--badge-bg: rgba(255, 255, 255, .07);--badge-text: #a5b4fc;--danger: #f87171;--danger-bg: rgba(248, 113, 113, .12);--green: #4ade80;--yellow: #facc15;--drag-over-bg: rgba(99, 102, 241, .14);--drag-over-border: #6366f1;--shadow: 0 4px 24px rgba(0, 0, 0, .4);--radius: 10px;--radius-sm: 6px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100%}.page-item,.block-card,.topic-block-header{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}input,textarea{-webkit-user-select:text;user-select:text}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}button{font-family:inherit;cursor:pointer}input,textarea{font-family:inherit}.app{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}.app-body{display:flex;flex:1;overflow:hidden}.header{min-height:72px;background:var(--header-bg);border-bottom:1px solid var(--card-border);display:flex;flex-direction:column;justify-content:center;gap:8px;padding:10px 20px;flex-shrink:0;z-index:100}.header-row{display:flex;align-items:center;justify-content:space-between;width:100%;min-width:0}.header-secondary{justify-content:center}.header-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}.logo-bracket{font-size:16px;font-weight:700;color:var(--accent);font-family:Courier New,monospace}.logo-text{font-size:15px;font-weight:600;color:var(--text)}.save-status{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-muted);min-width:0;white-space:nowrap}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-faint)}.save-status.saving .status-dot,.save-status.unsaved .status-dot{background:var(--yellow)}.save-status.updated .status-dot{background:var(--green)}.save-status.error .status-dot{background:var(--danger)}.save-status.updated{color:var(--green)}.save-status.error{color:var(--danger)}.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.btn-save{display:flex;align-items:center;gap:7px;padding:8px 18px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:600;transition:background .15s}.btn-save:hover{background:var(--accent-hover)}.btn-save:disabled{cursor:wait;opacity:.75}.btn-attach{display:flex;align-items:center;gap:7px;padding:8px 16px;background:transparent;color:var(--text);border:1px solid var(--card-border);border-radius:var(--radius-sm);font-size:13px;font-weight:600;transition:background .15s,border-color .15s}.btn-attach:hover{background:var(--card-border);border-color:var(--accent)}.btn-attach:disabled{cursor:wait;opacity:.75}.backup-toast{position:fixed;right:20px;bottom:20px;z-index:350;max-width:min(340px,calc(100vw - 40px));padding:11px 14px;border:1px solid rgba(74,222,128,.3);border-radius:var(--radius-sm);background:#102018;box-shadow:var(--shadow);color:var(--green);font-size:13px;font-weight:650}.update-toast{position:fixed;right:20px;bottom:20px;z-index:400;display:flex;align-items:center;gap:14px;max-width:min(360px,calc(100vw - 40px));padding:11px 12px 11px 16px;border:1px solid var(--input-focus);border-radius:var(--radius-sm);background:var(--card-bg);box-shadow:var(--shadow);color:var(--text);font-size:13px;font-weight:650}.update-toast-actions{display:flex;align-items:center;gap:6px;margin-left:auto}.update-toast-btn{border:none;border-radius:var(--radius-sm);background:var(--accent);color:#fff;padding:7px 14px;font-size:13px;font-weight:650;cursor:pointer}.update-toast-btn:hover{background:var(--accent-hover)}.update-toast-dismiss{border:none;background:transparent;color:var(--text-muted);font-size:15px;line-height:1;padding:4px 6px;cursor:pointer}.update-toast-dismiss:hover{color:var(--text)}.sidebar{width:260px;flex-shrink:0;background:var(--sidebar-bg);border-right:1px solid var(--card-border);display:flex;flex-direction:column;overflow-y:auto;padding:16px 12px;gap:4px}.sidebar-top{display:flex;align-items:center;justify-content:space-between;padding:0 4px 10px}.sidebar-menu-label{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--text-muted)}.btn-add-page{width:28px;height:28px;border-radius:var(--radius-sm);background:var(--badge-bg);border:1px solid var(--card-border);color:var(--text-muted);font-size:18px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;line-height:1}.btn-add-page:hover{background:var(--accent);color:#fff;border-color:var(--accent)}.pages-list{list-style:none;display:flex;flex-direction:column;gap:2px;flex:1}.page-item{display:flex;align-items:center;border-radius:var(--radius-sm);position:relative;transition:background .15s}.page-item:hover{background:var(--badge-bg)}.page-item.active{background:var(--active-bg)}.page-item[draggable=true]{cursor:grab}.page-item.dragging{opacity:.5;cursor:grabbing}.page-item.drag-over{box-shadow:inset 0 2px 0 0 var(--active-text)}.page-item.active .page-btn{color:var(--active-text)}.page-item.active .page-icon svg{stroke:var(--active-text)}.page-btn{display:flex;align-items:center;gap:10px;flex:1;padding:9px 10px;background:none;border:none;color:var(--text-muted);font-size:13px;font-weight:500;text-align:left;transition:color .15s}.page-icon{display:flex;align-items:center;flex-shrink:0}.page-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page-menu-wrap{position:relative}.page-menu-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:none;border:none;color:var(--text-muted);border-radius:4px;opacity:0;transition:opacity .1s,background .1s;margin-right:4px}.page-item:hover .page-menu-btn,.page-item.active .page-menu-btn{opacity:1}.page-menu-btn:hover{background:var(--badge-bg)}.page-dropdown{position:absolute;right:0;top:32px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-sm);box-shadow:var(--shadow);z-index:50;min-width:130px;overflow:hidden}.page-dropdown button{display:block;width:100%;padding:9px 14px;background:none;border:none;text-align:left;font-size:13px;color:var(--text);transition:background .1s}.page-dropdown button:hover{background:var(--badge-bg)}.page-dropdown button.danger{color:var(--danger)}.page-dropdown button.danger:hover{background:var(--danger-bg)}.rename-input{flex:1;padding:8px 10px;background:transparent;border:none;outline:none;font-size:13px;color:var(--text);width:100%}.sidebar-tip{margin-top:auto;padding:14px;border:1px solid var(--card-border);border-radius:var(--radius);background:var(--badge-bg)}.tip-code-icon{color:var(--accent);margin-bottom:8px}.tip-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px}.tip-text{font-size:12px;color:var(--text-muted);line-height:1.6}.editor{flex:1;overflow-y:auto;padding:32px 40px;display:flex;flex-direction:column;gap:28px}.editor-empty{align-items:center;justify-content:center}.editor-empty-text{color:#888;font-size:15px;text-align:center}.editor-field{display:flex;flex-direction:column;gap:12px}.field-label{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--text-muted)}.title-input{width:100%;padding:14px 18px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);font-size:16px;font-weight:500;color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s}.title-input::placeholder{color:var(--text-faint)}.title-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--input-focus)}.blocks-list{display:flex;flex-direction:column;gap:12px}.block-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);position:relative;display:flex;flex-direction:column;transition:border-color .15s}.block-card:hover{border-color:#ffffff24}.block-card.sorting,.topic-block.sorting{opacity:.65;box-shadow:0 6px 18px #00000059;border-color:var(--drag-over-border)}.block-card.drag-over{border-color:var(--drag-over-border);background:var(--drag-over-bg);box-shadow:0 0 0 2px var(--input-focus)}.block-header{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#ffffff06;border-radius:var(--radius);min-height:44px}.block-card.editing .block-header{border-radius:var(--radius) var(--radius) 0 0;border-bottom:1px solid var(--card-border)}.drag-handle{display:flex;align-items:center;color:var(--text-faint);cursor:grab;padding:2px;flex-shrink:0;transition:color .15s}.block-header:hover .drag-handle{color:var(--text-muted)}.block-badge{font-size:11px;font-weight:700;color:var(--badge-text);background:var(--badge-bg);border-radius:4px;padding:2px 6px;min-width:26px;text-align:center;flex-shrink:0}.block-preview-inline{flex:1;min-width:0;overflow:hidden}.preview-inline{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--text-muted)}.preview-inline.h1{font-size:16px;font-weight:700;color:var(--text)}.preview-inline.h2{font-size:15px;font-weight:600;color:var(--text)}.preview-inline.h3{font-size:14px;font-weight:600;color:var(--text)}.preview-inline em{font-style:italic;color:var(--text-faint);font-size:12px;font-weight:400}.preview-inline.list,.preview-inline.paragraph{white-space:normal;overflow:visible}.preview-inline.paragraph .preview-line{display:block;white-space:pre-wrap;word-break:break-word}.preview-list-title{display:block;color:var(--text);font-weight:650}.preview-list-items{display:flex;flex-direction:column;gap:2px;margin-top:2px}.preview-list-item{position:relative;padding-left:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-list-item:before{content:"•";position:absolute;left:2px;color:var(--text-faint)}.block-actions{display:flex;align-items:center;gap:2px;flex-shrink:0;position:relative;opacity:0;transition:opacity .1s}.block-card:hover .block-actions{opacity:1}.block-action-btn{display:flex;align-items:center;background:none;border:none;padding:4px;border-radius:var(--radius-sm);color:var(--text-muted);transition:color .1s,background .1s}.block-action-btn:hover{color:var(--text);background:var(--badge-bg)}.block-action-btn.edit:hover{color:var(--accent);background:var(--badge-bg)}.block-action-btn.danger:hover{color:var(--danger);background:var(--danger-bg)}.copy-feedback{position:absolute;bottom:calc(100% + 4px);right:0;z-index:20;padding:3px 8px;border:1px solid var(--card-border);border-radius:var(--radius-sm);background:var(--card-bg);box-shadow:var(--shadow);color:var(--green);font-size:11px;font-weight:650;white-space:nowrap;pointer-events:none}.block-body{min-width:0;padding:16px 20px}.block-textarea{width:100%;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-sm);padding:10px 12px;font-size:14px;color:var(--text);outline:none;resize:vertical;line-height:1.7;transition:border-color .2s}.block-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--input-focus)}.text-editor{display:flex;flex-direction:column;gap:10px}.text-editor-footer{display:flex;justify-content:flex-end}.list-editor{display:flex;flex-direction:column;gap:8px}.list-title-input{width:100%;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-sm);padding:8px 10px;margin-bottom:4px;font-size:14px;font-weight:650;color:var(--text);outline:none;transition:border-color .2s}.list-title-input:focus{border-color:var(--accent)}.list-item-row{display:flex;align-items:center;gap:8px}.bullet{color:var(--text-muted);font-size:16px;flex-shrink:0}.list-item-row input{min-width:0;flex:1;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-sm);padding:7px 10px;font-size:13px;color:var(--text);outline:none;transition:border-color .2s}.list-item-row input:focus{border-color:var(--accent)}.btn-remove-item{background:none;border:none;color:var(--text-faint);font-size:12px;padding:4px 6px;border-radius:4px;transition:color .1s,background .1s;flex-shrink:0}.btn-remove-item:hover{color:var(--danger);background:var(--danger-bg)}.list-editor-footer{display:flex;align-items:center;justify-content:space-between;padding-top:4px}.btn-add-item{background:none;border:none;font-size:13px;color:var(--accent);padding:4px 0;transition:opacity .15s}.btn-add-item:hover{opacity:.8}.btn-done{padding:6px 14px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:12px;font-weight:600;transition:background .15s}.btn-done:hover{background:var(--accent-hover)}.add-block-area{position:relative;display:flex;flex-direction:column;align-items:center}.btn-add-block{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;border:1.5px dashed var(--card-border);border-radius:var(--radius);background:transparent;color:var(--accent);font-size:14px;font-weight:500;transition:border-color .2s,background .2s}.btn-add-block:hover{border-color:var(--accent);background:var(--drag-over-bg)}.add-plus{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;background:var(--accent);color:#fff;font-size:18px;line-height:1;font-weight:700}.block-type-menu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;min-width:180px;z-index:50}.block-type-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 16px;background:none;border:none;text-align:left;font-size:13px;color:var(--text);transition:background .1s}.block-type-menu button:hover{background:var(--badge-bg)}.menu-badge{font-size:11px;font-weight:700;color:var(--badge-text);background:var(--badge-bg);border-radius:4px;padding:2px 6px;min-width:24px;text-align:center}.topic-block{position:relative;border:1px solid rgba(99,102,241,.28);border-radius:var(--radius);background:#6366f10a}.topic-block.drag-over{border-color:var(--drag-over-border);background:var(--drag-over-bg)}.topic-block.menu-open{z-index:80}.topic-block-header{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#6366f114;border-bottom:1px solid rgba(99,102,241,.15);border-radius:var(--radius) var(--radius) 0 0;cursor:grab}.topic-block-header:active{cursor:grabbing}.topic-block-header:hover{background:#6366f11f}.topic-actions{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}.topic-title{flex:1;font-size:14px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.topic-title-input{flex:1;background:transparent;border:none;border-bottom:1.5px solid var(--accent);color:var(--text);font-size:14px;font-weight:600;outline:none;min-width:0;padding:1px 2px}.topic-edit-btn,.topic-delete-btn{display:flex;align-items:center;background:none;border:none;padding:4px;border-radius:var(--radius-sm);opacity:0;transition:opacity .1s,color .1s,background .1s;flex-shrink:0}.topic-block-header:hover .topic-edit-btn,.topic-block-header:hover .topic-delete-btn{opacity:1}.topic-edit-btn{color:var(--text-muted)}.topic-edit-btn:hover{color:var(--accent);background:var(--badge-bg)}.topic-delete-btn{color:var(--text-muted)}.topic-delete-btn:hover{color:var(--danger);background:var(--danger-bg)}.topic-block-body{padding:10px;display:flex;flex-direction:column;gap:8px}.topic-add-area{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start}.btn-add-sub-block{display:flex;align-items:center;gap:6px;padding:6px 12px;background:none;border:1px dashed var(--text-faint);border-radius:var(--radius-sm);color:var(--text-muted);font-size:13px;cursor:pointer;transition:border-color .15s,color .15s}.btn-add-sub-block:hover{border-color:var(--accent);color:var(--accent)}.topic-sub-menu{top:calc(100% + 6px);bottom:auto;left:0;transform:none;z-index:200}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto;background:#00000094;animation:modal-backdrop-in .18s ease}.token-modal{width:min(360px,100%);max-height:calc(100vh - 40px);overflow-y:auto;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;animation:modal-pop-in .2s cubic-bezier(.16,1,.3,1)}@keyframes modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes modal-pop-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media (prefers-reduced-motion: reduce){.modal-backdrop,.token-modal{animation:none}}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.modal-header h2{font-size:16px;font-weight:650;color:var(--text)}.modal-close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);font-size:16px}.modal-close:hover{background:var(--badge-bg);color:var(--text)}.token-field{display:flex;flex-direction:column;gap:7px}.token-field span{font-size:12px;font-weight:650;color:var(--text-muted)}.token-field input{width:100%;padding:10px 12px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-sm);color:var(--text);outline:none}.token-field input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--input-focus)}.token-error{margin-top:8px;color:var(--danger);font-size:13px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.btn-modal-secondary,.btn-modal-primary,.btn-modal-danger{border:none;border-radius:var(--radius-sm);padding:8px 13px;font-size:13px;font-weight:650}.btn-modal-secondary{background:var(--badge-bg);color:var(--text-muted)}.btn-modal-secondary:hover{color:var(--text)}.btn-modal-primary{background:var(--accent);color:#fff}.btn-modal-primary:hover{background:var(--accent-hover)}.btn-modal-danger{background:var(--danger);color:#fff}.btn-modal-danger:hover{filter:brightness(1.1)}.confirm-message{font-size:14px;line-height:1.5;color:var(--text-muted)}.token-modal--save{padding-top:28px;padding-bottom:28px}.token-modal--save .token-field{margin-top:6px}.token-modal--save .token-field input{padding:14px 12px}.token-modal--save .modal-actions{margin-top:28px}@media (max-width: 700px){.app input,.app textarea,.app select{font-size:16px}.app{overflow:auto}.app-body{min-height:0;flex-direction:column;overflow:visible}.header{min-height:72px;gap:8px;padding:10px 12px}.header-logo,.header-row{min-width:0}.logo-text{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.save-status{font-size:12px;overflow:hidden;text-overflow:ellipsis}.btn-save,.btn-attach{padding:8px 12px}.sidebar{width:100%;max-height:190px;border-right:none;border-bottom:1px solid var(--card-border);padding:10px 10px 8px;overflow:hidden}.sidebar-top{padding:0 2px 8px}.pages-list{flex:none;flex-direction:row;gap:6px;overflow-x:auto;overflow-y:visible;padding-bottom:4px;scrollbar-width:thin}.page-item{flex:0 0 auto;min-width:132px;max-width:210px}.page-menu-btn{opacity:1}.page-dropdown{right:0;top:34px}.editor{flex:none;overflow:visible;padding:18px 12px 28px;gap:20px}.title-input{padding:12px 14px;font-size:16px}.block-body{padding:12px 14px}.block-type-menu{width:min(260px,calc(100vw - 40px))}.modal-backdrop{align-items:center;padding:16px}.token-modal{width:100%}.backup-toast{right:12px;bottom:12px;max-width:calc(100vw - 24px)}.update-toast{right:12px;left:12px;bottom:12px;max-width:none}}@media (max-width: 420px){.header{align-items:stretch}.logo-text{display:none}.btn-save,.btn-attach{gap:6px;padding-inline:10px}.sidebar{max-height:172px}.page-item{min-width:118px}.editor{padding-inline:10px}.list-editor-footer,.modal-actions{align-items:stretch;flex-direction:column}.btn-modal-secondary,.btn-modal-primary{width:100%}}