body{color:#f5f5f5;background-color:#1e1e2f;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.app{text-align:center;padding:20px}.title{color:#ffda77;margin-bottom:10px;font-size:2.5rem}.instructions-btn{color:#1e1e2f;cursor:pointer;background:#7df;border:none;border-radius:8px;margin-bottom:20px;padding:8px 15px;font-weight:700;transition:all .2s}.instructions-btn:hover{background:#5ce;transform:scale(1.05)}.note-input{margin-bottom:20px}.note-input textarea{color:#f5f5f5;resize:none;background:#2a2a40;border:none;border-radius:10px;outline:none;width:300px;height:80px;padding:10px;font-size:1rem}.note-input button{cursor:pointer;color:#fff;background:#ff77e9;border:none;border-radius:8px;margin-left:10px;padding:10px 20px;font-weight:700;transition:all .2s}.note-input button:hover{background:#f4c;transform:scale(1.05)}.search-bar{color:#f5f5f5;background:#2a2a40;border:none;border-radius:8px;outline:none;width:250px;margin-bottom:20px;padding:10px;font-size:1rem}.export-import{justify-content:center;gap:15px;margin:20px 0;display:flex}.export-import button{color:#1e1e2f;cursor:pointer;background:#7df;border:none;border-radius:8px;padding:8px 15px;font-weight:700;transition:all .2s}.export-import button:hover{background:#5ce;transform:scale(1.05)}.import-label{color:#fff;cursor:pointer;background:#ff77e9;border-radius:8px;padding:8px 15px;font-weight:700;transition:all .2s;display:inline-block;position:relative}.import-label:hover{background:#f4c;transform:scale(1.05)}.import-label input{display:none}.notes-container{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px;padding:20px;display:grid}.note{cursor:grab;border-radius:12px;padding:15px;transition:transform .2s,box-shadow .2s;position:relative;box-shadow:0 4px 6px #0000004d}.note p{word-wrap:break-word;white-space:pre-wrap;margin:0}.note-buttons{gap:5px;display:flex;position:absolute;top:8px;right:8px}.note-buttons button{cursor:pointer;background:0 0;border:none;font-size:1.1rem}.edit-textarea{resize:none;color:#333;background:#fff;border:1px solid #ccc;border-radius:8px;width:100%;min-height:60px;padding:8px;font-size:1rem}footer{color:#aaa;margin-top:30px;font-size:.9rem}footer a{color:#7df;text-decoration:none}footer a:hover{text-decoration:underline}.fade-in{animation:.4s ease-in-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)rotate(-2deg)}to{opacity:1;transform:scale(1)rotate(0)}}.modal-backdrop{z-index:100;background-color:#000000bf;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-content{color:#f5f5f5;text-align:left;background:#2a2a40;border-radius:12px;width:90%;max-width:500px;padding:25px;position:relative}.modal-content h2{text-align:center;color:#ffda77}.modal-content ul{padding-left:20px}.modal-content button{color:#1e1e2f;cursor:pointer;background:#7df;border:none;border-radius:8px;margin:20px auto 0;padding:8px 15px;font-weight:700;transition:all .2s;display:block}.modal-content button:hover{background:#5ce;transform:scale(1.05)}