:root{--primary-color: #4a90e2;--secondary-color: #f39c12;--danger-color: #e74c3c;--success-color: #2ecc71;--background-color: #f5f6fa;--text-color: #2c3e50}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0;padding:20px;background-color:var(--background-color);color:var(--text-color)}h2{color:var(--primary-color);border-bottom:2px solid var(--primary-color);padding-bottom:10px}ul{list-style:none;padding:0}.note{display:flex;align-items:center;background:#fff;padding:15px;margin:10px 0;border-radius:8px;box-shadow:0 2px 4px #0000001a;transition:transform .2s}.note:hover{transform:translateY(-2px)}.note button{background:none;border:none;cursor:pointer;padding:8px;margin:0 5px;transition:transform .2s}.note button:hover{transform:scale(1.1)}.star-button{color:var(--secondary-color);font-size:1.2em}.delete-button{color:var(--danger-color);font-size:1.2em}.note-content{flex-grow:1;margin:0 15px}.filter-button{background-color:var(--primary-color);color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;transition:background-color .3s}.filter-button:hover{background-color:#357abd}.error{color:#fff;background:var(--danger-color);padding:15px;border-radius:5px;margin-bottom:20px}.add-note-form{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin:20px 0}.add-note-form input[type=text]{width:100%;padding:10px;margin:10px 0;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.add-note-form button{background-color:var(--success-color);color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;transition:background-color .3s}.add-note-form button:hover{background-color:#27ae60}.footer{margin-top:40px;padding:20px;text-align:center;color:#666;font-style:italic}.loading-container{display:flex;justify-content:center;align-items:center;min-height:70px}.loading-spinner{color:var(--primary-color);font-size:3rem}.importance-toggle{display:flex;align-items:center;gap:8px;margin:15px 0}.star-checkbox{display:none}.star-label{cursor:pointer;color:var(--secondary-color);font-size:1.5em}.star-label:hover{transform:scale(1.1);transition:transform .2s}.add-note-form{display:flex;flex-direction:column;gap:15px}.add-note-form input[type=text]{font-size:1rem;padding:12px}.input-wrapper{display:flex;align-items:center;gap:10px;margin-bottom:15px}
