html{scroll-behavior:smooth}a{text-decoration:none;color:#fcfcfc}*{font-family:Poppins,sans-serif}.poppins-thin{font-family:Poppins,sans-serif;font-weight:100;font-style:normal}.poppins-extralight{font-family:Poppins,sans-serif;font-weight:200;font-style:normal}.poppins-light{font-family:Poppins,sans-serif;font-weight:300;font-style:normal}.poppins-regular{font-family:Poppins,sans-serif;font-weight:400;font-style:normal}.poppins-medium{font-family:Poppins,sans-serif;font-weight:500;font-style:normal}.poppins-semibold{font-family:Poppins,sans-serif;font-weight:600;font-style:normal}.poppins-bold{font-family:Poppins,sans-serif;font-weight:700;font-style:normal}.poppins-extrabold{font-family:Poppins,sans-serif;font-weight:800;font-style:normal}.poppins-black{font-family:Poppins,sans-serif;font-weight:900;font-style:normal}.poppins-thin-italic{font-family:Poppins,sans-serif;font-weight:100;font-style:italic}.poppins-extralight-italic{font-family:Poppins,sans-serif;font-weight:200;font-style:italic}.poppins-light-italic{font-family:Poppins,sans-serif;font-weight:300;font-style:italic}.poppins-regular-italic{font-family:Poppins,sans-serif;font-weight:400;font-style:italic}.poppins-medium-italic{font-family:Poppins,sans-serif;font-weight:500;font-style:italic}.poppins-semibold-italic{font-family:Poppins,sans-serif;font-weight:600;font-style:italic}.poppins-bold-italic{font-family:Poppins,sans-serif;font-weight:700;font-style:italic}.poppins-extrabold-italic{font-family:Poppins,sans-serif;font-weight:800;font-style:italic}.poppins-black-italic{font-family:Poppins,sans-serif;font-weight:900;font-style:italic}*{margin:0;padding:0;box-sizing:border-box}body{background:#252525;color:#fcfcfc}.navbar{display:flex;justify-content:space-between;align-items:center;padding:24px 80px}.logo{font-size:1.4rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px}.nav-links{display:flex;gap:24px;align-items:center}.nav-links a{color:#fcfcfc;text-decoration:none;opacity:.8}.nav-links a:hover{opacity:1}.nav-btn{background:transparent;border:1px solid #fcfcfc;color:#fcfcfc;padding:8px 16px;border-radius:6px;cursor:pointer;font-weight:600;letter-spacing:.7px;font-size:.8rem}.hero{display:flex;justify-content:space-between;align-items:center;padding:80px;gap:60px}.hero-text{max-width:500px}.hero-text h1{font-size:2.5rem;line-height:1.2}.hero-text p{margin:20px 0 30px;opacity:.8;font-size:.9rem}.primary-btn{background:#fcfcfc;color:#252525;border:none;padding:12px 22px;border-radius:8px;font-weight:600;letter-spacing:.7px;cursor:pointer}.note-card{background:#2f2f2f;padding:16px;border-radius:10px;width:260px}.note-card p{opacity:.7;font-size:.9rem}.note-card.faded{opacity:.5}.features{padding:110px 80px;text-align:center}.features-header{max-width:640px;margin:0 auto 40px}.features-header h2{font-size:2.3rem;margin-bottom:14px}.features-header p{opacity:.7;line-height:1.6;font-size:.9rem}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.feature-box{background:#2f2f2f;padding:20px;border-radius:18px;text-align:left;transition:transform .3s ease,background .3s ease}.feature-icon{width:42px;height:42px;border-radius:12px;background:#fcfcfc14;display:flex;align-items:center;justify-content:center;margin-bottom:18px}.feature-icon svg{font-size:1.4rem;color:#fcfcfc}.feature-box h3{font-size:1.15rem;margin-bottom:10px}.feature-box p{opacity:.75;line-height:1.55;font-size:.9rem}.feature-box:hover{transform:translateY(-6px);background:#343434}.faqs{padding:110px 80px;max-width:900px;margin:auto}.faqs-header{text-align:center;margin-bottom:60px}.faqs-header h2{font-size:2.2rem;margin-bottom:14px}.faqs-header p{opacity:.7;line-height:1.6}.faq-list{display:flex;flex-direction:column;gap:16px}.faq-item{background:#2f2f2f;border-radius:14px;overflow:hidden}.faq-question{width:100%;background:transparent;border:none;color:#fcfcfc;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:1rem;font-weight:500}.faq-icon{font-size:1.2rem;transition:transform .25s ease}.faq-answer{padding:0 24px 20px;opacity:.75;line-height:1.6;font-size:.95rem}.faq-item.open .faq-icon{transform:rotate(45deg)}.footer{border-top:1px solid #333;padding:60px 80px 30px}.footer-content{display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;margin-bottom:40px}.footer-brand h3{font-size:1.3rem;margin-bottom:12px}.footer-brand p{opacity:.7;line-height:1.6;max-width:320px;font-size:.9rem}.footer-links h4{font-size:.95rem;margin-bottom:14px}.footer-links a{display:block;color:#fcfcfc;text-decoration:none;opacity:.7;margin-bottom:10px;font-size:.9rem}.footer-links a:hover{opacity:1}.footer-icons{display:flex;gap:14px}.footer-icons a{width:36px;height:36px;border-radius:10px;background:#2f2f2f;display:flex;align-items:center;justify-content:center;color:#fcfcfc;transition:background .25s ease,transform .25s ease}.footer-icons a:hover{background:#343434;transform:translateY(-3px)}.footer-bottom{text-align:center;opacity:.6;font-size:.85rem}.hero-preview{display:flex;flex-direction:column;align-items:center;gap:20px}.notes{position:relative;width:320px;aspect-ratio:1/1}.note-ui{position:absolute;right:0;top:0;background:#8c1e32;color:#fff;border-radius:18px;padding:24px;width:320px;box-shadow:0 4px 10px #0000004d;aspect-ratio:1/1;opacity:1;transition:.3s ease;display:flex;align-items:center;flex-direction:column;justify-content:space-between}.note-ui:nth-child(1){background:#285096;transform:rotate(-7deg) translateY(4px) translate(-18px)}.note-text{font-size:1.2rem;line-height:1.4;font-weight:600;margin-bottom:.5rem}.note-desc{line-height:1.5;margin:0;opacity:.7;font-size:.9rem;white-space:pre-wrap;word-break:break-word;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.note-footer{display:flex;justify-content:space-between;align-items:center;margin-top:24px;font-size:.85rem;width:100%}.edit-btn{background:#252525;color:#fcfcfc;border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}@media screen and (max-width:850px){.navbar{display:flex;justify-content:space-between;align-items:center;padding:24px 20px}.hero{display:flex;justify-content:space-between;align-items:center;padding:50px 20px;gap:40px;flex-direction:column}.features{padding:50px 20px;text-align:center}.features .feature-grid{grid-template-columns:repeat(2,1fr)}.faqs{padding:50px 20px;max-width:900px;margin:auto}.footer{border-top:1px solid #333;padding:30px 20px 20px}}@media screen and (max-width:500px){.hero-text h1,.features-header h2,.faqs-header h2{font-size:2rem;line-height:1.2}.faq-question{padding:15px}.feature-box{padding:10px}.feature-icon{margin-bottom:10px}.feature-box h3{font-size:1rem;margin-bottom:5px}.notes{position:relative;width:300px;aspect-ratio:1 / 1}.note-ui{width:300px}.footer-content{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:20px}}@media screen and (max-width:450px){.hero-text h1,.features-header h2,.faqs-header h2{font-size:1.6rem;line-height:1.2}.feature-box{border-radius:10px}.feature-icon svg{font-size:1.1rem;color:#fcfcfc}.feature-icon{width:35px;height:35px;border-radius:5px}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.navbar{display:flex;justify-content:space-between;align-items:center;padding:10px}.nav-links{display:flex;gap:10px;align-items:center}.nav-links a{color:#fcfcfc;text-decoration:none;opacity:.8;font-size:.7rem}.feature-box p{opacity:.75;line-height:1.55;font-size:.7rem}.feature-box h3{font-size:.8rem;margin-bottom:5px}.faq-question span{text-align:left;font-size:.9rem}.faq-answer{padding:0 24px 20px;opacity:.75;line-height:1.6;font-size:.75rem}}.main-container{max-width:1280px;margin:0 auto}.signup{height:100vh;display:flex;align-items:center;justify-content:center;padding:15px}.signup-card{width:380px;padding:40px 20px;background:#1c1c1cb3;border-radius:16px;border:3px solid rgb(151 151 151 / 10%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center}.signup-title{font-weight:600;font-size:28px;margin-bottom:30px;color:#fcfcfc}.signup-form{width:100%;display:flex;flex-direction:column;gap:14px}.signup-form input{padding:10px 12px;border-radius:6px;border:none;outline:none;font-size:14px;background:#2a2a2ae6;color:#fcfcfc;transition:all .2s ease}.signup-form input::placeholder{color:#aaa}.signup-form button{padding:10px 12px;border-radius:6px;border:none;background:#a91233;color:#fff;font-weight:500;font-size:16px;cursor:pointer;transition:all .2s ease}.signup-form button:hover{background:#ce1c43}.signup-footer{margin-top:22px;font-size:14px;color:#ccc}.signup-footer a{color:#ce1c43;font-weight:500}.toast-container{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:9999}.toast{min-width:220px;padding:12px 16px;border-radius:6px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:10px;animation:slideIn .3s ease,fadeOut .3s ease 2.7s forwards}.toast.success{background:#303030}.toast.error{background:#a91233}.toast button{background:none;border:none;color:#fff;cursor:pointer;font-size:14px}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{to{opacity:0;transform:translateY(10px)}}.signin{height:100vh;display:flex;align-items:center;justify-content:center;padding:15px}.signin-card{width:380px;padding:40px 20px;background:#1c1c1cb3;border-radius:16px;border:3px solid rgb(151 151 151 / 10%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center}.signin-title{font-weight:600;font-size:28px;margin-bottom:30px;color:#fcfcfc}.signin-form{width:100%;display:flex;flex-direction:column;gap:14px}.signin-form input{padding:10px 12px;border-radius:6px;border:none;outline:none;font-size:14px;background:#2a2a2ae6;color:#fcfcfc;transition:all .2s ease}.signin-form input::placeholder{color:#aaa}.signin-form button{padding:10px 12px;border-radius:6px;border:none;background:#a91233;color:#fff;font-weight:500;font-size:16px;cursor:pointer;transition:all .2s ease}.signin-form button:hover{background:#ce1c43}.signin-footer{margin-top:22px;font-size:14px;color:#ccc}.signin-footer a{color:#ce1c43;font-weight:500}.dashboard{display:flex;min-height:100vh;background:#252525;color:#fcfcfc;font-family:system-ui,-apple-system,sans-serif}.sidebar{width:70px;background:#1c1c1c;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:20px 0;gap:30px;flex-shrink:0}.sidebar>div:has(.new-note-btn){display:flex;align-items:center;flex-direction:column;gap:20px}.new-note-btn{background:#333;border:none;color:#fff;font-size:24px;border-radius:50%;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.new-note-btn:hover{background:#555;transform:scale(1.1)}.sidebar-colors{display:flex;flex-direction:column;gap:12px;opacity:0;transform:translate(-20px);transition:opacity .3s ease,transform .3s ease}.sidebar-colors.visible{opacity:1;transform:translate(0)}.sidebar-colors span{width:20px;height:20px;border-radius:50%;cursor:pointer;transition:transform .2s ease;border:2px solid transparent}.sidebar-colors span:hover{transform:scale(1.3);border-color:#ffffff4d}.notes-main{flex:1;padding:40px;max-width:calc(100% - 70px);box-sizing:border-box}.notes-title{margin:0 0 30px;font-size:20px;font-weight:600}.notes-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}.note-card{padding:20px;border-radius:16px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 10px #0000004d;min-height:180px;color:#fff;width:auto}.note-card:hover{transform:translateY(-8px);box-shadow:0 12px 20px #0006}.note-content{flex:1}.note-heading{font-size:1.1rem;font-weight:600;margin:0 0 8px;line-height:1.4;word-break:break-word;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.note-description{font-size:1rem;line-height:1.5;margin:0;opacity:.9;white-space:pre-wrap;word-break:break-word;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.note-footer{display:flex;justify-content:space-between;align-items:center;font-size:13px;opacity:.8;margin-top:16px}.note-actions{display:flex;align-items:center;gap:12px}.edit-btn{border:none;color:inherit;cursor:pointer;font-size:16px;opacity:.7;transition:opacity .2s}.edit-btn:hover{opacity:1}.star-icon{font-size:16px;opacity:.7}.star-icon.filled{color:gold;opacity:1}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{padding:20px;border-radius:16px;max-width:500px;width:90%;color:#fff;display:flex;flex-direction:column;gap:16px;box-shadow:0 8px 20px #00000080}.modal-input,.modal-textarea{width:100%;background:transparent;border:none;color:#fff;padding:12px 0;border-radius:8px;font-size:1rem;outline:none;transition:border .2s}.modal-input::placeholder,.modal-textarea::placeholder,.ios-textarea::placeholder{color:#d4d4d4}.modal-input:focus,.modal-textarea:focus{border-color:transparent}.modal-textarea{min-height:120px;resize:vertical}.modal-buttons{display:flex;justify-content:flex-end;gap:12px}.modal-btn{padding:10px 15px;border:none;border-radius:8px;cursor:pointer;font-size:.9rem;transition:background .2s;display:flex;align-items:center;gap:6px}.modal-btn.cancel,.modal-btn.delete{background:#555;color:#fff}.modal-btn.cancel:hover,.modal-btn.delete:hover{background:#777}.modal-btn.create,.modal-btn.update{background:#000;color:#fff}.modal-btn.create:hover,.modal-btn.update:hover{background:#232323}.modal-btn.delete{background:#f44336}.modal-btn.delete:hover{background:#ef5350}.profile-section{margin-top:auto;position:relative}.profile-btn{width:40px;height:40px;border-radius:50%;background:#4caf50;color:#fff;font-size:14px;font-weight:600;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.profile-btn:hover{transform:scale(1.1);box-shadow:0 0 15px #4caf5080}.profile-menu{position:absolute;bottom:60px;width:auto;background:#2c2c2c;border-radius:12px;padding:12px;box-shadow:0 8px 25px #0009;z-index:100;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.profile-menu-header{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid #444;margin-bottom:12px}.profile-initials{width:40px;height:40px;border-radius:50%;background:#4caf50;color:#fff;font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.user-name{font-size:14px;font-weight:600;margin:0}.user-email{font-size:12px;opacity:.7;margin:4px 0 0}.logout-btn{width:100%;background:none;border:none;color:#ff6b6b;font-size:14px;padding:10px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background .2s}.logout-btn:hover{background:#ff6b6b26}@media(max-width:1300px){.notes-grid{grid-template-columns:repeat(4,1fr);gap:16px}}@media(max-width:1000px){.notes-grid{grid-template-columns:repeat(3,1fr);gap:16px}}@media(max-width:768px){.notes-grid{grid-template-columns:repeat(2,1fr);gap:16px}.notes-main{max-width:100%}.dashboard{flex-direction:column}.sidebar{width:100%;height:auto;flex-direction:row;padding:16px;justify-content:space-between;gap:40px}.sidebar>div:has(.new-note-btn){display:flex;align-items:center;flex-direction:row;gap:20px}.profile-section{margin-top:0}.profile-menu{top:60px;right:0;height:max-content;position:absolute}.sidebar-colors{flex-direction:row}.notes-main{padding:24px}.notes-title{font-size:28px}}@media(max-width:600px){.notes-grid{grid-template-columns:repeat(1,1fr)}.notes-title{font-size:1rem}.notes-title{font-weight:500}.notes-main{padding:16px}.note-card{padding:16px;min-height:150px}.note-heading{font-size:1rem}.note-description{font-size:.9rem}.modal{padding:16px}}.modal-overlay{position:fixed;inset:0;background:#0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000}.ios-modal{width:90%;max-width:600px;height:80vh;border-radius:20px;display:flex;flex-direction:column;padding:20px;box-shadow:0 20px 40px #0000004d}.modal-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.back-btn,.done-btn{background:none;border:none;color:#ff9f0a;font-size:1.1rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:5px}.ios-textarea{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:1.2rem;line-height:1.5;resize:none}.ios-textarea:first-line{font-weight:700;font-size:1.6rem}.note-card{border-radius:12px;padding:15px;height:160px;cursor:pointer;transition:transform .2s}.note-card:hover{transform:translateY(-5px)}.modal-actions{display:flex;align-items:center;justify-content:center;gap:1rem}.notes-main{position:relative}.no-notes{text-align:center;margin-top:20px;color:#999;font-size:1rem;border:1px dashed #99999934;padding:20px;height:500px;width:100%;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:.25s all;cursor:pointer;border-width:thick}