*{margin:0;padding:0;box-sizing:border-box}body{background:#f0f4ff;font-family:Segoe UI,sans-serif}.app{max-width:500px;margin:60px auto;padding:0 20px}h1{font-size:32px;color:#2c3e50;margin-bottom:4px}.subtitle{color:#888;margin-bottom:28px;font-size:15px}.input-area{display:flex;gap:10px;margin-bottom:14px}.input-area input{flex:1;padding:12px 16px;font-size:15px;border:2px solid #ddd;border-radius:10px;outline:none;transition:border-color .2s}.input-area input:focus{border-color:#5c7cfa}.input-area button{padding:12px 20px;background:#5c7cfa;color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s}.input-area button:hover{background:#4263eb}.count{font-size:13px;color:#aaa;margin-bottom:16px}.note-card{background:white;border-radius:12px;padding:16px 18px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 8px #0000000f;border-left:4px solid #5c7cfa}.note-card p{font-size:15px;color:#2c3e50;flex:1;margin-right:12px;line-height:1.5}.note-card button{background:none;border:none;color:#e74c3c;font-size:13px;cursor:pointer;white-space:nowrap;font-weight:600;padding:4px 8px;border-radius:6px;transition:background .2s}.note-card button:hover{background:#fdecea}.empty{text-align:center;color:#bbb;font-size:15px;margin-top:40px}