@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Roboto:wght@400;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:roboto;color:#000;transition:all .3s ease}body{margin:50px}main{margin:10px}.login input,.section__social button{margin-bottom:22px;border:none;outline:none;border-radius:10px;width:100%;height:56px;font-family:nunito;font-size:16px;transition:border-color .3s ease,box-shadow .3s ease}.login input[type=email],.login input[type=password]{border:1px solid #747474;padding:16px 46px 16px 18px}.login input:focus{border-color:#000;box-shadow:0 0 5px #0003}.login span{font-size:14px;text-align:right;margin-bottom:38px}.login input[type=submit]{background:#000;color:#fff;border-radius:20vw;cursor:pointer;transition:background-color .3s ease,transform .3s ease}.login input[type=submit]:hover{background:#333;transform:scale(1.05)}.section__line{display:flex;align-items:center;text-align:center;margin-bottom:22px}.section__line:before,.section__line:after{content:"";flex:1;border-bottom:1px solid #D8DADC}.section__line:before{margin-right:10px}.section__line:after{margin-left:10px}.section__social{display:flex;gap:15px}.section__social button{display:flex;align-items:center;justify-content:space-around;border:1px solid #D8DADC;height:56px;background:#fff;border-radius:10px;transition:background-color .3s ease,transform .3s ease}.section__social button:hover{background:#f0f0f0;transform:translateY(-3px)}.section__social_img{transform:translateY(-30px)}footer p+b{font-family:nunito;font-size:14px}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.submit-button{background-color:#000;color:#fff;height:3rem;font-size:1.2rem;border-radius:20vw;animation:pulse 2s infinite;transition:background-color .3s ease}.submit-button:hover{background-color:#333}*{margin:0;padding:0;box-sizing:border-box;font-family:nunito;color:#000;transition:all .3s ease}header,main,footer{margin:0 20px}header{margin-top:47px}.header__logo{width:100%;display:flex;justify-content:flex-end}.back-button{display:inline-block;margin-top:10px;padding:10px 15px;background-color:#575657;color:#fff;border:none;border-radius:5px;text-decoration:none;font-weight:700;cursor:pointer;transition:background-color .3s ease,transform .3s ease}.back-button:hover{background-color:#500a50;transform:translateY(-2px)}main{margin-bottom:50px}.section__form{display:flex;flex-direction:column}.section__form h1{padding-bottom:38px;font-family:nunito;font-size:30px;animation:fadeIn .5s ease}.login{display:flex;flex-direction:column}.login label{font-size:14px;padding-bottom:6px}.login input{margin-bottom:22px;border:none;outline:none;border-radius:10px;width:100%;height:56px;font-family:nunito;font-size:16px;transition:border-color .3s ease,box-shadow .3s ease}.login input[type=text],.login input[type=email],.login input[type=password]{border:1px solid #747474;padding:16px 18px}.login input[type=text]:focus,.login input[type=email]:focus,.login input[type=password]:focus{border-color:#000;box-shadow:0 0 5px #0003}.login input[type=password]{padding-right:46px}.login span{font-size:14px;text-align:left;margin-bottom:38px}.login input[type=submit]{background:#000;color:#fff;transition:background-color .3s ease,transform .3s ease}.login input[type=submit]:hover{background:#333;transform:translateY(-2px)}footer{text-align:center}footer p b{font-family:nunito;font-size:14px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}body{background:#eee;display:flex;justify-content:center;padding:24px}.empty{margin-top:5rem}.empty-text{color:#fff;font-size:1.2rem;text-align:center}.actions{display:flex;flex-direction:column;background-color:#98979711;padding:5px;border-radius:5px}.content_data{width:80%}h3{font-size:1.5rem}p{color:#000}.edit{background-color:#1b1b1b82;margin:5px;padding:2px;border-radius:5px;color:#fff;border:none;width:2rem}.edit:hover{transform:translate(5px)}.delete{background-color:#ff0000c0;margin:5px;padding:2px;border-radius:5px;color:#fff;border:none;width:2rem}.delete:hover{transform:translate(5px)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:#fff;padding:20px 30px;border-radius:12px;width:350px;max-width:90%;text-align:center;box-shadow:0 6px 15px #0000004d;animation:fadeIn .3s ease-in-out}.modal p{font-size:1.1rem;color:#fff;margin-bottom:20px}.modal-actions{display:flex;justify-content:space-between;gap:15px}.modal-actions button{flex:1;padding:10px;border-radius:8px;border:none;font-size:1rem;cursor:pointer;transition:transform .2s ease,opacity .2s ease}.modal-actions .discard{background-color:#e0e0e0;color:#333}.modal-actions .discard:hover{background-color:#cfcfcf;transform:translateY(-2px)}.modal-actions .save{background-color:#ff4d4d;color:#fff}.modal-actions .save:hover{background-color:#e63939;transform:translateY(-2px)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}.header-container{display:flex;flex-direction:column;background:#1e1e1e;padding:1rem;color:#fff}.header{display:flex;justify-content:space-between;align-items:center}.logo{font-size:1.5rem;font-weight:700;color:#fff;font-size:2rem}.btn-search{background:none;border:none;cursor:pointer;padding:0}.btn-search img{width:24px;height:24px}.search-box{margin-top:.8rem;display:flex;align-items:center;background:#2a2a2a;border-radius:30px;padding:.5rem 1rem;animation:fadeIn .2s ease-in-out}.search-box input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:16px}.search-box input::placeholder{color:#aaa}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}:root{--screen-bg: #1e1e1e;--card-radius: 12px;--text-light: #fff}body{background:#eee;display:flex;justify-content:center}.screen{width:360px;height:700px;background:var(--screen-bg);border-radius:18px;padding:18px;box-shadow:0 6px 20px #0000001f;color:var(--text-light);position:relative;overflow:hidden}.note-card{position:relative;margin-top:1rem;padding:14px;border-radius:12px;display:flex;flex-direction:row;justify-content:space-between;min-height:90px;box-shadow:0 2px 6px #00000026;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .2s ease}.note-card:hover{transform:translateY(-2px)}.note-content{flex:1}.note-title{font-size:16px;font-weight:600;margin:0 0 6px;color:#111}.note-preview{font-size:14px;color:#000;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-actions{display:flex;justify-content:flex-end;margin-top:8px;gap:10px}.note-actions img{width:2px;height:2px;opacity:.7;cursor:pointer;transition:opacity .2s ease}.note-actions img:hover{opacity:1}.notes-list{display:flex;flex-direction:column;gap:12px;right:0;padding-bottom:90px;overflow:auto;height:calc(100% - 120px)}.containerbtn{display:flex;justify-content:space-between}.fab{background-color:#3c3c3c;box-shadow:0 4px 18px #3c3c3c;margin-top:5em;position:relative;border-radius:50%;width:4rem;height:4rem;border:none;margin-left:auto}.fab:hover{transform:translateY(-8px)}:root{--bg-dark: #1e1e1e;--card-bg: #2b2b2b;--text-light: #fff;--accent-red: #e74c3c;--accent-green: #2ecc71;--accent-gray: #444}.editor-screen{width:360px;height:780px;margin:auto;background:var(--bg-dark);color:var(--text-light);border-radius:18px;box-shadow:0 6px 20px #0003;display:flex;flex-direction:column;overflow:hidden;padding:18px}.editor-header{display:flex;align-items:center;gap:10px;margin-bottom:20px}.editor-header h2{font-size:1.2rem;font-weight:600;color:#fff}.back-btn{background:var(--accent-gray);border:none;border-radius:8px;padding:6px 10px;margin-left:-1rem;color:var(--text-light);cursor:pointer}.back-btn:hover{background:#555;transform:translatey(-5px)}.editor-form{display:flex;flex-direction:column;gap:12px;flex:1}.editor-title{background:transparent;border:none;border-bottom:1px solid #555;color:var(--text-light);font-size:1.1rem;padding:6px 0;outline:none}.editor-content{flex:1;background:transparent;border:none;border-radius:8px;font-size:.95rem;color:var(--text-light);line-height:1.4;outline:none;resize:none;padding:6px 0}.editor-actions{display:flex;justify-content:space-between;margin-top:auto}.btn-save-main{background:var(--accent-green);border:none;color:#fff;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:500}.btn-cancel{background:var(--accent-gray);border:none;color:#fff;padding:10px 16px;border-radius:8px;cursor:pointer}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;align-items:center;justify-content:center;z-index:999}.modal{background:var(--card-bg);color:var(--text-light);padding:20px 25px;border-radius:12px;text-align:center;width:260px;box-shadow:0 6px 16px #00000040}.modal-actions{margin-top:15px;display:flex;justify-content:space-between;gap:10px}.btn-discard{background:var(--accent-red);border:none;color:#fff;padding:8px 14px;border-radius:6px;cursor:pointer}.btn-save{background:var(--accent-green);border:none;color:#fff;padding:8px 14px;border-radius:6px;cursor:pointer}.btn-discard:hover{background:#c0392b}.btn-save:hover{background:#27ae60}