:root{--bg: #0a0a0f;--card: #12121a;--text: #e0e0e8;--muted: #6b6b80;--accent: #ff6b6b;--btn: #1a1a24;--btn-hover: #00d4aa}*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.app{width:100%;max-width:600px}h1{text-align:center;margin-bottom:20px;color:var(--accent)}.form{background:var(--card);padding:20px;border-radius:12px;margin-bottom:20px;display:flex;gap:12px}.input{flex:1;padding:10px 14px;background:var(--bg);border:1px solid var(--muted);border-radius:8px;color:var(--text);font-size:1rem;outline:none;transition:border-color .2s}.input:focus{border-color:var(--accent)}.btn-add{padding:0 16px;background:var(--accent);color:var(--bg);border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:background .2s}.btn-add:hover{background:var(--btn-hover)}.list{display:flex;flex-direction:column;gap:12px}.note{background:var(--card);padding:14px 16px;border-radius:10px;display:flex;justify-content:space-between;align-items:center}.note .text{color:var(--text)}.btn-delete{background:transparent;color:var(--muted);border:none;font-size:1.2rem;cursor:pointer;transition:color .2s}.btn-delete:hover{color:#ff5f57}@media(max-width:480px){.app{margin:10px}.form{flex-direction:column;padding:15px}.input{margin-bottom:8px}}.search-bar{margin-bottom:16px}.search-bar .input{width:100%}.note{gap:12px}.note .text{flex:1;white-space:pre-wrap;overflow-wrap:anywhere}.favorite{background:none;border:0;color:#7b899d;font-size:24px;cursor:pointer}.favorite:hover,.favorite.is-favorite{color:#f9ca57}.empty-note{list-style:none;text-align:center;padding:18px;color:#8c93a9}.btn-delete{font-size:24px;line-height:1}