.note-form{display:flex;flex-direction:column;gap:.5rem}.note-textarea{width:90%;resize:vertical;padding:.9em 1.3em;border-radius:10px;border:2px solid #cbd5e1;font-size:1.15rem;background:#f4f7fb;transition:border .2s,box-shadow .2s;box-shadow:0 2px 8px #64748b17;font-weight:500;min-height:60px}.note-form-actions{display:flex;justify-content:flex-end;align-items:center;width:100%;margin-top:.5rem}.note-form-btn{padding:.4rem 1rem;font-size:1.1rem;border-radius:8px;background:#44f;color:#fff;border:none;cursor:pointer;font-weight:600;box-shadow:0 2px 8px #7c83f717;transition:background .2s,transform .2s}.note-form-btn:hover{background:#6366f1;transform:scale(1.05)}#root,.app-header h1,.form,.note-item{box-sizing:border-box}@media (max-width: 600px){#root{max-width:98vw;margin:12px auto;padding:1rem .5rem;border-radius:18px}.app-header{align-items:center!important;justify-content:center;width:100%}.app-header h1{font-size:2rem;padding:1.2rem .5rem 1rem;margin:0 auto;display:flex;align-items:center;justify-content:center;width:100%}.subtitle{font-size:1rem;text-align:center}.notes-list{gap:1rem;margin-top:1rem}.note-item{padding:1rem .7rem;min-width:0;font-size:1rem}form{flex-direction:column;gap:.7rem;padding:.7rem .5rem;margin-bottom:1rem}input{font-size:1rem;margin-right:0;width:100%}button{width:100%;margin-left:0;font-size:1rem;padding:.7rem 0}}body{background:linear-gradient(120deg,#fdf6e3,#e0e7ff);font-family:Segoe UI,Roboto,Arial,sans-serif;margin:0;min-height:100vh;background-attachment:fixed}#root{max-width:940px;margin:48px auto;padding:2.7rem 2.2rem 2rem;text-align:center;background:#ffffffa6;border-radius:28px;box-shadow:0 12px 40px #3c3c782e;position:relative;-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);border:1.5px solid rgba(200,200,255,.18);animation:fadeIn .7s cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}.app-header{margin-bottom:2.2rem;display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;text-align:center}.app-header h1{font-size:2.9rem;display:flex;align-items:center;justify-content:center;color:#6366f1;max-width:700px;min-width:350px;margin:0 auto;padding:2.7rem 3.2rem 1rem;text-align:center;position:relative;animation:fadeIn .7s cubic-bezier(.4,0,.2,1)}.subtitle{color:#64748b;font-size:1.18rem;font-weight:500;text-align:center!important;text-shadow:0 1px 4px #e0e7ff44;width:100%}.app-main{align-items:center;flex-direction:column;gap:2rem;align-items:stretch}.app{max-width:500px;margin:auto;background:#fff;padding:2rem;border-radius:8px;box-shadow:0 0 10px #ccc}input{padding:.5rem;width:90%}.notes-list{display:flex;flex-direction:column;gap:1.7rem;margin-top:2rem;align-items:center;width:100%}.note-item{background:#f8faff;border-radius:18px;padding:1.5rem 2rem;box-shadow:0 6px 24px #64748b21;display:flex;align-items:center;justify-content:space-between;transition:box-shadow .25s,transform .18s;border:1.5px solid #e0e7ff;position:relative;animation:fadeIn .7s cubic-bezier(.4,0,.2,1);width:100%}.note-item:hover{box-shadow:0 10px 32px #64748b30;transform:translateY(-2px) scale(1.02);border-color:#6366f1}form{display:flex;gap:1rem;justify-content:center;align-items:center;margin-bottom:1.5rem;background:#f8faff;border-radius:18px;box-shadow:0 4px 18px #64748b1a;padding:1.2rem 1.5rem;border:1.5px solid #e0e7ff}input{flex:1;padding:.9em 1.3em;border-radius:10px;border:2px solid #cbd5e1;font-size:1.15rem;background:#f4f7fb;transition:border .2s,box-shadow .2s;box-shadow:0 2px 8px #64748b17;font-weight:500;margin-right:1rem}button{padding:.7rem 1.5rem;background:#7c83f7;color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:1.1rem;font-weight:600;box-shadow:0 2px 8px #7c83f717;transition:background .2s,transform .2s;margin-left:.5rem}body{font-family:Segoe UI,Roboto,Arial,sans-serif}.note-item p{margin:0;font-size:1.18rem;color:#334155;word-break:break-word;text-align:left;font-weight:500;letter-spacing:.01em}.note-item button{background:#f22;color:#fff;border:none;border-radius:50%;padding:.6em .8em;font-size:1.25rem;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 2px 12px #f8717121;display:flex;align-items:center;justify-content:center;border:2px solid #fff0;width:65px}form{display:flex;gap:.7rem;justify-content:center;margin-bottom:.5rem}form input{flex:1;padding:.8em 1.2em;border-radius:10px;border:2px solid #cbd5e1;font-size:1.13rem;background:#f8fafcd9;transition:border .2s,box-shadow .2s;box-shadow:0 2px 8px #64748b17;font-weight:500}form input:focus{outline:none;border-color:#6366f1;box-shadow:0 4px 16px #6366f121}form button{background:linear-gradient(90deg,#6366f1 60%,#818cf8);color:#fff;border:none;border-radius:10px;padding:.8em 1.4em;font-size:1.13rem;cursor:pointer;font-weight:600;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 2px 12px #6366f121;letter-spacing:.01em}form button:hover{background:linear-gradient(90deg,#4338ca 60%,#6366f1);transform:scale(1.09);box-shadow:0 6px 24px #6366f130}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover body{margin:0;font-family:Segoe UI,Roboto,Arial,sans-serif}