:root{--primary:#2563eb;--primary-dark:#1d4ed8;--bg-body:#f8fafc;--surface:#fff;--text-main:#1e293b;--text-muted:#6b7280;--danger:#dc2626;--success:#16a34a;--border:#e5e7eb;--shadow-sm:0 1px 3px 0 #0000001a;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000000d;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--radius-sm:8px;--radius:12px}*{box-sizing:border-box}body{min-height:100vh;color:var(--text-main);background:linear-gradient(135deg,#f1f5f9 0%,#e2e8f0 100%);margin:0;padding:1rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.6}.container{background:var(--surface);border-radius:var(--radius);width:100%;max-width:1200px;box-shadow:var(--shadow-lg);border:1px solid var(--border);margin:0 auto;padding:2rem}h1{text-align:center;color:var(--text-main);letter-spacing:-.025em;margin:0 0 .5rem;font-size:clamp(2rem,5vw,2.5rem);font-weight:700}.subtitle{text-align:center;color:var(--text-muted);margin-bottom:2.5rem;font-size:1rem;font-weight:400}.input-section{border-radius:var(--radius);border:1px solid var(--border);background:#fafbfc;flex-direction:column;gap:1rem;margin-bottom:2rem;padding:1.5rem;display:flex}textarea{border:1px solid var(--border);border-radius:var(--radius-sm);resize:vertical;background:var(--surface);width:100%;min-height:120px;padding:1rem;font-family:inherit;font-size:1rem;line-height:1.5;transition:all .2s}textarea:focus{border-color:var(--primary);background:var(--surface);outline:none;box-shadow:0 0 0 3px #2563eb1a}.primary-btn{background:var(--primary);color:#fff;border-radius:var(--radius-sm);cursor:pointer;box-shadow:var(--shadow-md);border:none;justify-content:center;align-self:flex-start;align-items:center;padding:.875rem 1.75rem;font-size:.95rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.primary-btn:hover{background:var(--primary-dark);box-shadow:var(--shadow-lg);transform:translateY(-1px)}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.search-wrapper{flex:1;min-width:250px}.search-input{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;padding:.875rem 1.25rem;font-size:.95rem;transition:all .2s}.search-input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #2563eb1a}.stats{border-radius:var(--radius);border:1px solid var(--border);color:var(--text-muted);white-space:nowrap;background:#f9fafb;padding:.5rem 1rem;font-size:.875rem;font-weight:500}.notes-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;padding:0;list-style:none;display:grid}.note-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;min-height:180px;padding:1.5rem;transition:all .2s;display:flex}.note-card:hover{box-shadow:var(--shadow-lg);border-color:#e5e7eb;transform:translateY(-2px)}.note-text{color:var(--text-main);flex:1;margin:0 0 1rem;font-size:.95rem;line-height:1.6}.card-footer{border-top:1px solid #f3f4f6;gap:.5rem;padding-top:1rem;display:flex}.icon-btn{border-radius:var(--radius-sm);cursor:pointer;border:1px solid #0000;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:.625rem 1rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:all .2s;display:inline-flex}.edit-btn{color:var(--primary);background:#eff6ff;border-color:#2563eb33}.edit-btn:hover{border-color:var(--primary);background:#dbeafe}.delete-btn{color:var(--danger);background:#fef2f2;border-color:#dc262633}.delete-btn:hover{border-color:var(--danger);background:#fee2e2}.empty-state{text-align:center;color:var(--text-muted);margin-top:3rem;padding:2rem;font-size:1rem}@media (width<=768px){body{padding:.5rem}.container{box-shadow:none;border:none;border-radius:0;margin:0;padding:1.5rem}.toolbar{flex-direction:column;align-items:stretch;gap:1rem}.search-wrapper{min-width:auto}.stats{text-align:center;order:-1}.primary-btn{align-self:stretch}.notes-grid{grid-template-columns:1fr;gap:1rem}}@media (width<=480px){.container{padding:1rem}.icon-btn span{display:none}.icon-btn{padding:.75rem;font-size:.8rem}h1{font-size:1.75rem}}