*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#333;background-color:#fafafa}#root{width:100vw;height:100vh}.app{display:flex;height:100vh}.sidebar{width:300px;background-color:#f8f9fa;border-right:1px solid #e9ecef;display:flex;flex-direction:column}.sidebar-header{padding:1rem;border-bottom:1px solid #e9ecef}.sidebar-header h1{font-size:1.2rem;font-weight:600;margin-bottom:.5rem}.repo-selector,.vault-selector{margin-bottom:1rem}.repo-selector select,.vault-selector select,.vault-select{width:100%;padding:.5rem;border:1px solid #ced4da;border-radius:4px;background-color:#fff;font-size:.875rem;height:2.5rem;box-sizing:border-box}.vault-create-btn{width:100%;font-size:.875rem;height:2.5rem;box-sizing:border-box}.vault-delete-btn{padding:.5rem;font-size:.875rem;height:2.5rem;width:2.5rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background-color:#fff;border:1px solid #ced4da;color:#6c757d}.vault-delete-btn:hover{background-color:#f8f9fa;color:#dc3545;border-color:#dc3545}.search-box{width:100%;padding:.5rem;border:1px solid #ced4da;border-radius:4px;margin-bottom:1rem}.notes-list{flex:1;overflow-y:auto}.note-item{padding:.75rem 1rem;border-bottom:1px solid #e9ecef;cursor:pointer;transition:background-color .2s}.note-item:hover,.note-item.active{background-color:#e9ecef}.note-title{font-weight:500;margin-bottom:.25rem}.note-preview{font-size:.875rem;color:#6c757d;line-height:1.4}.note-tags{margin-top:.25rem}.tag{display:inline-block;background-color:#e9ecef;color:#495057;padding:.125rem .5rem;border-radius:12px;font-size:.75rem;margin-right:.25rem}.main-content{flex:1;display:flex;flex-direction:column}.editor-header{padding:1rem;border-bottom:1px solid #e9ecef;background-color:#fff}.note-title-input{width:100%;font-size:1.5rem;font-weight:600;border:none;outline:none;padding:.5rem 0;background:transparent}.note-tags-input{width:100%;padding:.5rem 0;border:none;outline:none;font-size:.875rem;color:#6c757d;background:transparent}.editor{flex:1;display:flex;flex-direction:column}.editor-textarea{flex:1;padding:1.5rem;border:none;outline:none;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;line-height:1.6;resize:none;background:#fff}.toolbar{padding:.5rem 1rem;background-color:#f8f9fa;border-top:1px solid #e9ecef;display:flex;justify-content:space-between;align-items:center}.toolbar-left{display:flex;gap:.5rem;align-items:center}.toolbar-right{font-size:.875rem;color:#6c757d}.btn{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:4px;background-color:#fff;cursor:pointer;font-size:.875rem;transition:all .2s}.btn:hover{background-color:#f8f9fa}.btn-primary{background-color:#007bff;border-color:#007bff;color:#fff}.btn-primary:hover{background-color:#0056b3;border-color:#0056b3}.btn-danger{background-color:#dc3545;border-color:#dc3545;color:#fff}.btn-danger:hover{background-color:#c82333;border-color:#bd2130}.login-page{display:flex;align-items:center;justify-content:center;height:100vh;width:100vw;flex-direction:column;gap:2rem;position:fixed;top:0;left:0}.login-card{text-align:center;padding:2rem;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin:0 auto;max-width:400px;width:90%}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;flex-direction:column;gap:1rem;color:#6c757d}.keyboard-hint{position:fixed;bottom:1rem;right:1rem;background:#000c;color:#fff;padding:.5rem;border-radius:4px;font-size:.75rem;opacity:0;transition:opacity .3s}.keyboard-hint.show{opacity:1}.github-connect-card{text-align:center;padding:3rem;background:#fff;border-radius:12px;box-shadow:0 4px 20px #0000001a;max-width:500px;width:90%;margin:0 auto}.github-icon{color:#333;margin-bottom:1.5rem}.github-connect-card h1{font-size:2rem;margin-bottom:.5rem;color:#333}.subtitle{color:#6c757d;margin-bottom:2rem;font-size:1.1rem;line-height:1.5}.permissions-list{text-align:left;margin:2rem 0;padding:1.5rem;background-color:#f8f9fa;border-radius:8px}.permissions-list h3{color:#333;margin-bottom:1rem;font-size:1rem}.permissions-list ul{list-style:none;padding:0}.permissions-list li{margin-bottom:1rem;padding-left:1.5rem;position:relative}.permissions-list li:before{content:"✓";position:absolute;left:0;color:#28a745;font-weight:700}.permissions-list strong{display:block;color:#333;margin-bottom:.25rem}.permissions-list span{color:#6c757d;font-size:.9rem}.privacy-note{background-color:#e8f5e8;border:1px solid #d4edda;border-radius:8px;padding:1.5rem;margin:2rem 0;text-align:left}.privacy-note h4{color:#155724;margin-bottom:.5rem;font-size:1rem}.privacy-note p{color:#155724;font-size:.9rem;line-height:1.5;margin:0}.btn-large{padding:1rem 2rem;font-size:1rem;font-weight:500;display:flex;align-items:center;justify-content:center;margin:2rem auto 1rem;min-width:200px}.learn-more{margin-top:1rem}.learn-more a{color:#007bff;text-decoration:none;font-size:.9rem}.learn-more a:hover{text-decoration:underline}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;border-radius:8px;box-shadow:0 4px 20px #0000004d;max-width:500px;width:90%;max-height:80vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e9ecef}.modal-header h2{margin:0;font-size:1.25rem;color:#333}.modal-close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6c757d;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.modal-close-btn:hover{color:#333}.modal-body{padding:1.5rem}.modal-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:1rem 1.5rem 1.5rem;border-top:1px solid #e9ecef}.warning-message{background-color:#fff3cd;border:1px solid #ffeaa7;border-radius:4px;padding:1rem;margin-bottom:1.5rem}.warning-message p{margin:0 0 .5rem}.warning-message p:last-child{margin-bottom:0}.delete-options{margin-bottom:1.5rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;margin-bottom:.5rem}.checkbox-label input[type=checkbox]{margin:0}.info-message{color:#6c757d;font-size:.875rem;margin:.5rem 0 0 1.5rem}.confirmation-section{margin-bottom:1rem}.confirmation-section p{margin-bottom:.5rem;font-weight:500}.confirmation-input{width:100%;padding:.5rem;border:1px solid #ced4da;border-radius:4px;font-size:1rem}.confirmation-input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}