@import url(https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap);:root{--bg-color:#050b14;--bg-gradient:linear-gradient(135deg,#050b14,#0a192f);--card-bg:#10213e66;--card-border:#ffffff1a;--card-shadow:0 8px 32px 0 #0000005e;--glow-color:#3b82f680;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--accent-color:#3b82f6;--accent-hover:#2563eb;--danger-color:#ef4444;--danger-hover:#dc2828;--success-color:#10b981}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;font-family:Outfit,sans-serif;margin:0;padding:0}body{background:#050b14;background:var(--bg-color);background-image:linear-gradient(135deg,#050b14,#0a192f);background-image:var(--bg-gradient);color:#f8fafc;color:var(--text-primary);min-height:100vh;overflow-x:hidden;position:relative}body:after,body:before{border-radius:50%;content:"";filter:blur(100px);height:400px;opacity:.5;pointer-events:none;position:fixed;width:400px;z-index:-1}body:before{background:#3b82f64d;left:-100px;top:-100px}body:after{background:#8b5cf633;bottom:-100px;right:-100px}a{color:#f8fafc;color:var(--text-primary);text-decoration:none;transition:all .3s ease}.glass{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:#10213e66;background:var(--card-bg);border:1px solid #ffffff1a;border:1px solid var(--card-border);border-radius:16px;box-shadow:0 8px 32px 0 #0000005e;box-shadow:var(--card-shadow)}.App{display:flex;flex-direction:column;margin:0 auto;max-width:1400px;min-height:100vh;width:100%}.header-nav{align-items:center;border-radius:16px;display:flex;justify-content:space-between;margin:1rem;padding:1rem 2rem;position:-webkit-sticky;position:sticky;top:0;transition:all .3s ease;z-index:50}.header-nav .logo h1 a{-webkit-text-fill-color:#0000;align-items:center;background:linear-gradient(90deg,#60a5fa,#a78bfa);-webkit-background-clip:text;display:flex;font-size:1.5rem;font-weight:700;gap:.5rem;letter-spacing:1px}.header-nav ul{display:flex;gap:2rem;list-style:none}.header-nav ul li a{align-items:center;color:#94a3b8;color:var(--text-secondary);display:flex;font-weight:500;gap:.5rem;transition:color .3s ease}.header-nav ul li a.active,.header-nav ul li a:hover{color:#3b82f6;color:var(--accent-color)}.header-nav ul li.logout-btn a{color:#ef4444;color:var(--danger-color);cursor:pointer}.header-nav ul li.logout-btn a:hover{color:#dc2828;color:var(--danger-hover)}.mobile-menu-btn{background:none;border:none;color:#f8fafc;color:var(--text-primary);cursor:pointer;display:none}.login-page{align-items:center;display:flex;justify-content:center;min-height:100vh;padding:1rem}.auth-card{display:flex;flex-direction:column;gap:1.5rem;max-width:450px;padding:2.5rem;position:relative;width:100%}.auth-card h2{font-size:2rem;font-weight:700;margin-bottom:.5rem;text-align:center}.auth-card h3{color:#ef4444;color:var(--danger-color);font-size:.9rem;margin-top:1rem;text-align:center}.input-group{align-items:center;background:#ffffff08;border:1px solid #ffffff1a;border:1px solid var(--card-border);border-radius:12px;display:flex;margin-bottom:1.2rem;padding:.5rem 1rem;position:relative;transition:all .3s ease}.input-group:focus-within{border-color:#3b82f6;border-color:var(--accent-color);box-shadow:0 0 0 2px #3b82f633}.input-icon{color:#64748b;color:var(--text-muted);height:20px;width:20px}.input-group input,.input-group textarea{background:#0000;border:none;color:#f8fafc;color:var(--text-primary);font-size:1rem;outline:none;padding:.75rem;width:100%}.input-group textarea{min-height:120px;resize:vertical}.submit-btn{align-items:center;background:#3b82f6;background:var(--accent-color);border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;font-size:1rem;font-weight:600;gap:.5rem;justify-content:center;margin-top:.5rem;padding:1rem;transition:all .3s ease;width:100%}.submit-btn:hover{background:#2563eb;background:var(--accent-hover);box-shadow:0 4px 12px #3b82f680;box-shadow:0 4px 12px var(--glow-color);transform:translateY(-2px)}.auth-footer{color:#94a3b8;color:var(--text-secondary);font-size:.95rem;margin-top:1.5rem;text-align:center}.auth-footer span{color:#3b82f6;color:var(--accent-color);cursor:pointer;font-weight:600;transition:color .3s}.auth-footer span:hover{color:#2563eb;color:var(--accent-hover)}.notes-page section{margin:0 auto;max-width:1400px;padding:2rem}.note-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.note-card{cursor:pointer;display:flex;flex-direction:column;overflow:hidden;padding:1.5rem;position:relative;transition:transform .3s ease,box-shadow .3s ease}.note-card:hover{border-color:#fff3;box-shadow:0 10px 30px #00000080;transform:translateY(-5px)}.note-card:before{background:#3b82f6;background:var(--accent-color);content:"";height:100%;left:0;opacity:.5;position:absolute;top:0;transition:opacity .3s ease;width:4px}.note-card:hover:before{opacity:1}.note-card-header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:1rem}.note-card-title{color:#f8fafc;color:var(--text-primary);font-size:1.25rem;font-weight:600;overflow:hidden;padding-right:1rem;text-overflow:ellipsis;white-space:nowrap}.note-actions{display:flex;gap:.5rem}.icon-btn{align-items:center;background:#ffffff0d;border:1px solid #0000;border-radius:8px;color:#94a3b8;color:var(--text-secondary);cursor:pointer;display:flex;height:32px;justify-content:center;transition:all .2s ease;width:32px}.icon-btn:hover{background:#ffffff1a;color:#f8fafc;color:var(--text-primary)}.icon-btn.delete:hover{background:#ef44441a;border-color:#ef444433;color:#ef4444;color:var(--danger-color)}.note-content{-webkit-line-clamp:5;-webkit-box-orient:vertical;color:#94a3b8;color:var(--text-secondary);display:-webkit-box;flex-grow:1;line-height:1.6;margin-bottom:1.5rem;overflow:hidden}.note-footer{align-items:center;border-top:1px solid #ffffff1a;border-top:1px solid var(--card-border);color:#64748b;color:var(--text-muted);display:flex;font-size:.85rem;justify-content:space-between;margin-top:auto;padding-top:1rem}.create-note-container{display:flex;justify-content:center;padding:2rem 1rem}.form-card{max-width:700px;padding:2.5rem;width:100%}.form-card h2{align-items:center;display:flex;font-size:1.8rem;font-weight:700;gap:.75rem;margin-bottom:2rem}@media (max-width:768px){.header-nav{flex-wrap:wrap;margin:.5rem;padding:1rem}.header-nav ul{border-top:1px solid #ffffff1a;border-top:1px solid var(--card-border);display:none;flex-direction:column;gap:1rem;margin-top:1rem;padding-top:1rem;width:100%}.header-nav ul.mobile-active{display:flex}.mobile-menu-btn{display:block}.note-grid{grid-template-columns:1fr}.notes-page section{padding:1rem}.form-card{padding:1.5rem}}