*,*:before,*:after{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:system-ui,sans-serif;color:#1a1a1a;background:#f4f4f5}.auth-view{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1.5rem;overflow-y:auto}.auth-card{width:100%;max-width:400px;min-height:22rem;padding:1.75rem;background:#fff;border:1px solid #e4e4e7;border-radius:10px;box-shadow:0 1px 3px #0000000f}.auth-title{margin:0 0 1.25rem;font-size:1.5rem;font-weight:600;text-align:center}.auth-tabs{display:flex;gap:.25rem;margin-bottom:1.25rem;padding:.25rem;background:#f4f4f5;border-radius:8px}.auth-tab{flex:1;padding:.5rem .75rem;font-size:.875rem;font-weight:600;border:none;border-radius:6px;background:transparent;color:#18181b;cursor:pointer}.auth-tab:hover:not(.auth-tab--active){background:#e4e4e7}.auth-tab--active{background:#18181b;color:#fff;box-shadow:0 1px 3px #00000026}.auth-tab--active:hover{color:#fff;background:#27272a}.auth-form{display:flex;flex-direction:column;gap:.5rem;min-height:16.5rem}.auth-hint-slot{min-height:2.75rem}.auth-hint-slot[aria-hidden=true] .auth-hint{visibility:hidden}#auth-view[hidden],#app-view[hidden]{display:none!important}.auth-label{font-size:.875rem;font-weight:500;margin-top:.25rem}.auth-input{padding:.5rem .65rem;font-size:1rem;border:1px solid #d4d4d8;border-radius:6px}.auth-input:focus{outline:2px solid #a1a1aa;outline-offset:1px}.auth-hint{margin:0;font-size:.75rem;color:#71717a}.auth-hint[hidden],.auth-input--password[hidden],.auth-label[hidden]{display:none}.auth-error{margin:.25rem 0 0;font-size:.875rem;color:#b91c1c}.auth-submit{margin-top:auto;padding-top:.75rem;width:100%}.app{display:flex;flex-direction:column;height:100vh}.app-body{display:flex;flex:1;min-height:0}.error-banner{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;background:#fef2f2;border-bottom:1px solid #fecaca;color:#991b1b}.error-banner-message{flex:1;margin:0;font-size:.875rem;line-height:1.4}.error-banner-dismiss{flex-shrink:0;border:none;background:transparent;color:#991b1b;font-size:1.25rem;line-height:1;padding:0 .25rem;cursor:pointer}.error-banner-dismiss:hover{color:#7f1d1d}.sidebar{width:280px;flex-shrink:0;display:flex;flex-direction:column;background:#fff;border-right:1px solid #e4e4e7}.sidebar-header{display:flex;flex-direction:column;gap:.75rem;padding:1rem;border-bottom:1px solid #e4e4e7}.sidebar-user h1{margin:0;font-size:1.125rem;font-weight:600}.sidebar-username{margin:.15rem 0 0;font-size:.8rem;color:#71717a}.sidebar-actions{display:flex;flex-wrap:wrap;gap:.5rem}.btn{padding:.35rem .75rem;font-size:.875rem;border:1px solid #d4d4d8;border-radius:6px;background:#fff;cursor:pointer}.btn:hover{background:#f4f4f5}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.btn-primary,.auth-submit{background-color:#18181b;color:#fff;border-color:#18181b;font-weight:600}.btn.btn-primary:hover,.auth-submit:hover{background-color:#27272a;color:#fff;border-color:#27272a}.btn-danger{color:#b91c1c;border-color:#fecaca}.btn-danger:hover:not(:disabled){background:#fef2f2}.editor-toolbar{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.save-status{margin-left:auto;font-size:.875rem;color:#71717a;min-height:1.25rem}.save-status--saved{color:#16a34a}.save-status--error{color:#dc2626}.note-list{flex:1;margin:0;padding:.5rem;list-style:none;overflow-y:auto}.note-item{padding:.6rem .75rem;margin-bottom:.25rem;border-radius:6px;cursor:pointer}.note-item:hover{background:#f4f4f5}.note-item.active{background:#e4e4e7}.note-item-title{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-item-preview{font-size:.8rem;color:#71717a;margin-top:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.empty-state{padding:1rem .75rem;font-size:.875rem;color:#71717a;line-height:1.4;list-style:none}.editor-empty{margin:0 0 1rem;font-size:1rem;color:#71717a;line-height:1.5}.editor{flex:1;display:flex;flex-direction:column;min-width:0;padding:1rem 1.25rem;background:#fafafa}.editor-title{font-size:1.5rem;font-weight:600;border:none;border-bottom:1px solid #e4e4e7;padding:.5rem 0;margin-bottom:.75rem;background:transparent;outline:none}.editor-title:focus{border-bottom-color:#71717a}.editor-body{flex:1;resize:none;border:none;font-size:1rem;line-height:1.5;padding:0;background:transparent;outline:none}