:root{--bg: #0f1117;--surface: #1a1d27;--surface2: #22263a;--border: #2e3250;--accent: #2563eb;--accent-hover: #1d4ed8;--danger: #dc2626;--text: #e1e4f0;--text2: #8890b5;--green: #16a34a;--yellow: #d97706;--radius: 8px;--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%}body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}.screen{height:100%}.hidden{display:none!important}#auth-screen{display:flex;align-items:center;justify-content:center;height:100%;background:var(--bg)}.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;width:360px;display:flex;flex-direction:column;gap:1rem}.auth-card h1{font-size:1.8rem;letter-spacing:-.5px;color:var(--accent)}.auth-card .subtitle{color:var(--text2);margin-top:-.5rem;font-size:.85rem}label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--text2);text-transform:uppercase;letter-spacing:.05em}.auth-actions{display:flex;gap:.5rem;margin-top:.25rem}button{cursor:pointer;border:none;border-radius:6px;padding:.5rem 1rem;font-size:.9rem;font-family:inherit;transition:background .15s,color .15s}button.primary{background:var(--accent);color:#fff;font-weight:600}button.primary:hover{background:var(--accent-hover)}button.ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}button.ghost:hover{background:var(--surface2);color:var(--text)}button.danger{background:var(--danger);color:#fff}button.danger:hover{background:#b91c1c}button.small{padding:.3rem .7rem;font-size:.8rem}button.tiny{padding:.15rem .5rem;font-size:.75rem}button:disabled{opacity:.55;cursor:not-allowed}input,textarea{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:.45rem .7rem;font-size:.9rem;font-family:inherit;outline:none;transition:border-color .15s}input:focus,textarea:focus{border-color:var(--accent)}input::placeholder{color:var(--text2)}#topbar{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;background:var(--surface);border-bottom:1px solid var(--border);gap:1rem;flex-shrink:0}.topbar-left,.topbar-right{display:flex;align-items:center;gap:.75rem}.logo{font-size:1rem;font-weight:700;color:var(--accent);letter-spacing:-.5px;min-width:fit-content}.db-selector{display:flex;gap:.4rem;align-items:center}.db-selector input{width:180px}.user-label{color:var(--text2);font-size:.8rem}.sync-badge{font-size:.75rem;padding:.2rem .6rem;border-radius:999px;font-weight:600;letter-spacing:.02em;border:1px solid var(--border);white-space:nowrap}.sync-badge.sync-now{color:var(--accent);border-color:var(--accent);cursor:pointer}.sync-badge.sync-now:hover{background:#2563eb1a}.sync-badge.syncing{color:var(--yellow);border-color:var(--yellow);cursor:default}.sync-badge.live{color:var(--green);border-color:var(--green);cursor:default}.sync-badge.error{color:var(--danger);border-color:var(--danger);cursor:default}.topbar-divider{color:var(--border);font-size:1rem;-webkit-user-select:none;user-select:none;padding:0 .1rem}.sync-area{display:flex;align-items:center;gap:.5rem}.toggle-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.8rem;color:var(--text2);-webkit-user-select:none;user-select:none;white-space:nowrap}.toggle-label input[type=checkbox]{display:none}.toggle-switch{width:30px;height:17px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;position:relative;transition:background .2s,border-color .2s;flex-shrink:0}.toggle-switch:after{content:"";width:11px;height:11px;background:var(--text2);border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .2s,background .2s}.toggle-label input:checked+.toggle-switch{background:var(--accent);border-color:var(--accent)}.toggle-label input:checked+.toggle-switch:after{transform:translate(13px);background:#fff}#main-screen{display:flex;flex-direction:column;height:100%}.app-body{display:flex;flex:1;overflow:hidden}#doc-list-panel{width:280px;min-width:200px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:.6rem .75rem;border-bottom:1px solid var(--border);font-size:.8rem;color:var(--text2);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.db-stats{background:var(--surface2);border-bottom:1px solid var(--border);padding:.5rem .75rem}.stat-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:.3rem;font-size:.75rem}.stat-item:last-child{margin-bottom:0}.stat-label{color:var(--text2);font-weight:500}.stat-value{color:var(--text1);font-family:var(--font-mono);font-weight:600}.stat-value.sync-unknown{color:var(--text2)}.stat-value.sync-synced{color:#22c55e}.stat-value.sync-syncing{color:#f59e0b}.stat-value.sync-error{color:#ef4444}.doc-list{flex:1;overflow-y:auto;padding:.25rem 0}.doc-list .hint{color:var(--text2);font-size:.8rem;padding:1rem .75rem}.doc-list-loading{display:flex;align-items:center;gap:.5rem;padding:1rem .75rem;color:var(--text2);font-size:.8rem}.spinner{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.doc-item{padding:.55rem .75rem;cursor:pointer;border-left:3px solid transparent;transition:background .1s;display:flex;flex-direction:column;gap:2px}.doc-item:hover{background:var(--surface2)}.doc-item.active{background:var(--surface2);border-left-color:var(--accent)}.doc-item.deleted{opacity:.45}.doc-item-id{font-family:var(--font-mono);font-size:.8rem;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.doc-item-meta{font-size:.72rem;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono)}@keyframes flash-in{0%{background:var(--surface2)}to{background:transparent}}.doc-item.flash{animation:flash-in 1s ease}#editor-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}.editor-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text2)}#editor-active{display:flex;flex-direction:column;height:100%}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;border-bottom:1px solid var(--border);background:var(--surface);gap:.5rem}.editor-meta{display:flex;flex-direction:column;gap:2px;min-width:0}.doc-id{font-family:var(--font-mono);font-size:.85rem;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.doc-rev{font-family:var(--font-mono);font-size:.72rem;color:var(--text2)}#editor-textarea{flex:1;resize:none;border:none;border-radius:0;background:var(--bg);font-family:var(--font-mono);font-size:.875rem;line-height:1.7;padding:1rem;color:var(--text)}.editor-footer{padding:.4rem 1rem;border-top:1px solid var(--border);background:var(--surface)}.editor-actions{display:flex;gap:.4rem;margin-left:auto}#changes-log-wrap{background:var(--surface);border-top:1px solid var(--border);font-size:.75rem;flex-shrink:0}#toggle-log{width:100%;text-align:left;padding:.35rem .75rem;border-radius:0;border:none;border-bottom:1px solid transparent;font-size:.72rem;color:var(--text2)}#toggle-log.open{border-bottom-color:var(--border)}.changes-log{max-height:130px;overflow-y:auto;padding:.25rem .75rem;list-style:none;display:flex;flex-direction:column-reverse}.changes-log li{padding:.2rem 0;border-bottom:1px solid var(--border);display:flex;gap:.75rem;color:var(--text2);font-family:var(--font-mono)}.changes-log li .ts{color:var(--text2);flex-shrink:0}.changes-log li .dir{color:var(--accent);flex-shrink:0;min-width:3ch}.changes-log li .id{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.changes-log li .rev{color:var(--text2)}.error{color:var(--danger);font-size:.8rem}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}