.login-container{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:var(--space-4)}.login-form{background:#fff;padding:var(--space-8);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:480px}.login-header{text-align:center;margin-bottom:var(--space-6)}.login-header h2{font-size:1.5rem;font-weight:600;color:var(--color-gray-900);margin-bottom:var(--space-2);display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.login-footer{margin-top:var(--space-6);text-align:left;color:var(--color-gray-600)}.auth-section{display:flex;flex-direction:column;gap:var(--space-4)}.auth-btn{padding:var(--space-4) var(--space-6);font-size:1.125rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.auth-divider{position:relative;text-align:center;margin:var(--space-2) 0}.auth-divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background-color:var(--color-gray-300)}.auth-divider span{background:#fff;padding:0 var(--space-4);color:var(--color-gray-500);font-size:.875rem}.security-info{background-color:var(--color-gray-50);padding:var(--space-4);border-radius:var(--border-radius);margin-top:var(--space-4)}.security-info h3{font-size:1rem;font-weight:600;margin-bottom:var(--space-3);color:var(--color-gray-900)}.security-info ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-2)}.security-info li{font-size:.875rem;line-height:1.4}.compatibility-warning{background-color:#fef3cd;border:1px solid #fde68a;color:#92400e;padding:var(--space-3);border-radius:var(--border-radius);margin-top:var(--space-4)}.notes-app{display:grid;grid-template-columns:350px 1fr;gap:var(--space-6);height:70vh;background:#fff;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}.notes-sidebar{background-color:var(--color-gray-50);border-right:var(--border-width) solid var(--color-gray-200);display:flex;flex-direction:column}.sidebar-header{padding:var(--space-4);border-bottom:var(--border-width) solid var(--color-gray-200)}.create-btn{width:100%;font-size:1rem;padding:var(--space-3) var(--space-4)}.notes-main{display:flex;flex-direction:column}.notes-list{flex:1;overflow-y:auto}.notes-loading,.notes-error,.notes-empty{padding:var(--space-6);text-align:center;color:var(--color-gray-500)}.note-item{padding:var(--space-4);border-bottom:var(--border-width) solid var(--color-gray-200);cursor:pointer;transition:background-color .2s ease}.note-item:hover{background-color:var(--color-gray-100)}.note-item.active{background-color:var(--color-primary-light);border-left:4px solid var(--color-primary)}.note-title{font-weight:600;font-size:1rem;margin-bottom:var(--space-1);color:var(--color-gray-900)}.note-preview{font-size:.875rem;color:var(--color-gray-600);line-height:1.4;margin-bottom:var(--space-2)}.note-meta{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:var(--color-gray-400)}.note-tags{display:flex;gap:var(--space-1);flex-wrap:wrap}.tag{background-color:var(--color-gray-200);color:var(--color-gray-700);padding:2px var(--space-2);border-radius:calc(var(--border-radius) / 2);font-size:.75rem;font-weight:500;display:inline-flex;align-items:center;gap:var(--space-1)}.tag-remove{background:none;border:none;color:var(--color-gray-500);cursor:pointer;padding:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.tag-remove:hover{background-color:var(--color-gray-300);color:var(--color-gray-700)}.notes-placeholder{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-8)}.placeholder-content{text-align:center;max-width:600px}.placeholder-content h2{font-size:2rem;font-weight:600;color:var(--color-gray-900);margin-bottom:var(--space-4)}.features{display:grid;gap:var(--space-6);margin:var(--space-8) 0;text-align:left}.feature{display:flex;gap:var(--space-4);align-items:flex-start}.feature-icon{font-size:2rem;flex-shrink:0}.feature h3{font-size:1.125rem;font-weight:600;color:var(--color-gray-900);margin-bottom:var(--space-1)}.feature p{color:var(--color-gray-600);line-height:1.6}.note-editor{flex:1;display:flex;flex-direction:column;padding:var(--space-6)}.editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-6);padding-bottom:var(--space-4);border-bottom:var(--border-width) solid var(--color-gray-200)}.editor-header h2{font-size:1.25rem;font-weight:600;color:var(--color-gray-900)}.close-btn{width:40px;height:40px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;font-size:1.25rem}.editor-form{flex:1;display:flex;flex-direction:column}.title-input{font-size:1.5rem;font-weight:600;border:none;border-bottom:2px solid var(--color-gray-200);border-radius:0;padding:var(--space-4) 0;margin-bottom:var(--space-4)}.title-input:focus{border-bottom-color:var(--color-primary);box-shadow:none}.tags-container{margin-bottom:var(--space-4)}.tags-list{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-3);min-height:32px;align-items:center}.tag-input-container{display:flex;gap:var(--space-2);align-items:center}.tag-input{flex:1}.editor-content{flex:1;display:flex;flex-direction:column}.content-textarea{flex:1;resize:none;min-height:300px;line-height:1.6;font-family:var(--font-mono)}.editor-actions{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-4);padding-top:var(--space-4);border-top:var(--border-width) solid var(--color-gray-200)}.editor-info{margin-top:var(--space-4);padding:var(--space-3) var(--space-4);background-color:var(--color-gray-50);border-radius:var(--border-radius);text-align:center;color:var(--color-gray-600)}@media (max-width: 768px){.notes-app{grid-template-columns:1fr;height:auto;min-height:70vh}.notes-sidebar{border-right:none;border-bottom:var(--border-width) solid var(--color-gray-200)}.login-form{padding:var(--space-6);margin:var(--space-4)}.features{gap:var(--space-4)}.feature{gap:var(--space-3)}.note-editor{padding:var(--space-4)}}:root{--color-primary: #4f46e5;--color-primary-hover: #4338ca;--color-primary-light: #e0e7ff;--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--color-gray-50: #f9fafb;--color-gray-100: #f3f4f6;--color-gray-200: #e5e7eb;--color-gray-300: #d1d5db;--color-gray-400: #9ca3af;--color-gray-500: #6b7280;--color-gray-600: #4b5563;--color-gray-700: #374151;--color-gray-800: #1f2937;--color-gray-900: #111827;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;--font-mono: "SF Mono", "Monaco", "Inconsolata", monospace;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-12: 3rem;--space-16: 4rem;--border-radius: .5rem;--border-radius-lg: .75rem;--border-width: 1px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)}*,*:before,*:after{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased;font-family:var(--font-family);background-color:var(--color-gray-50);color:var(--color-gray-900)}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);color:#fff;padding:var(--space-6) 0;box-shadow:var(--shadow-lg)}.header-content{max-width:1200px;margin:0 auto;padding:0 var(--space-6)}.app-title{font-size:2.5rem;font-weight:700;margin-bottom:var(--space-2);display:flex;align-items:center;gap:var(--space-3)}.logo{font-size:2rem}.app-subtitle{font-size:1.125rem;opacity:.9;max-width:600px}.app-main{flex:1;max-width:1200px;margin:0 auto;width:100%;padding:var(--space-8) var(--space-6)}.app-footer{background-color:var(--color-gray-800);color:var(--color-gray-300);padding:var(--space-4) 0;text-align:center}.footer-content{max-width:1200px;margin:0 auto;padding:0 var(--space-6)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-2) var(--space-4);border-radius:var(--border-radius);border:var(--border-width) solid transparent;font-weight:500;text-decoration:none;cursor:pointer;transition:all .2s ease;gap:var(--space-2)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-hover)}.btn-ghost{background-color:transparent;color:var(--color-gray-600);border-color:var(--color-gray-300)}.btn-ghost:hover:not(:disabled){background-color:var(--color-gray-100);color:var(--color-gray-900)}.btn-small{padding:var(--space-1) var(--space-2);font-size:.875rem}.btn-large{padding:var(--space-4) var(--space-6);font-size:1.125rem}.btn-full{width:100%}.input{display:block;width:100%;padding:var(--space-3) var(--space-4);border:var(--border-width) solid var(--color-gray-300);border-radius:var(--border-radius);font-size:1rem;transition:border-color .2s ease,box-shadow .2s ease}.input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.input:disabled{background-color:var(--color-gray-100);cursor:not-allowed}.form-group{margin-bottom:var(--space-4)}.form-group label{display:block;margin-bottom:var(--space-2);font-weight:500;color:var(--color-gray-700)}.error-message{background-color:#fef2f2;color:var(--color-error);padding:var(--space-3) var(--space-4);border-radius:var(--border-radius);border:var(--border-width) solid #fecaca;margin-bottom:var(--space-4)}@media (max-width: 768px){.app-title{font-size:2rem}.app-main{padding:var(--space-4)}.header-content{padding:0 var(--space-4)}}