:root{--bg: #f4f4f5;--text: #323232;--border: #c9c9cc;--primary: #4caf50;--primary-dark: #3d8b40;--danger: #b23c3c;--success: #4b5563;--card-bg: #ffffff;--card-shadow: 0 1px 4px rgba(0, 0, 0, .05)}*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:var(--bg);color:var(--text)}.container{max-width:720px;margin:2rem auto;padding:0 1rem}.top-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}h1{margin:0;font-size:1.6rem;font-weight:500}.save-note{margin:.25rem 0 0;font-size:.75rem;color:#6b7280}#search-input{width:230px;padding:.55rem .75rem;border:1px solid var(--border);border-radius:6px;font-size:.95rem;background:#fff}@media (max-width: 600px){.top-bar{flex-direction:column;align-items:stretch}#search-input{width:100%}}form{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}textarea,button{font-family:inherit;font-size:1rem}textarea{padding:.75rem;border:1px solid var(--border);border-radius:6px;resize:none;min-height:120px;background:#fff}.char-count{font-size:.75rem;color:#6d6d6d;text-align:right;margin-top:-.25rem}.form-actions{display:flex;justify-content:flex-end}button{padding:.55rem 1.25rem;border:none;border-radius:6px;background:var(--primary);color:#fff;cursor:pointer;transition:background .15s}button:hover{background:var(--primary-dark)}#notes-list{display:flex;flex-direction:column;gap:1.25rem}.note{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;box-shadow:var(--card-shadow);animation:fadeIn .2s ease-out;overflow:hidden}.note textarea{width:100%;border:none;padding:1rem;resize:none;font-size:.98rem;line-height:1.4;background:#fff}.note textarea:focus{outline:none}.note-footer{display:flex;align-items:center;gap:.5rem;border-top:1px solid var(--border);padding:.5rem .75rem;background:#f8f8f8}.note-meta{font-size:.75rem;color:#555;flex-grow:1}.copy-btn,.delete-btn{font-size:.85rem;padding:.35rem .8rem;border-radius:4px;border:none;cursor:pointer;transition:background .15s}.copy-btn{background:#e5e7eb;color:#333}.copy-btn:hover{background:#d4d4d8}.delete-btn{background:#fef2f2;color:var(--danger)}.delete-btn:hover{background:#fee2e2}.save-status{font-size:.75rem;color:var(--success);padding:0 1rem .5rem;opacity:0;transition:opacity .3s}.save-status.visible{opacity:1}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}