styles.css

/* Simple responsive styles for Notes App */
:root{--bg:#f7f7fb;--card:#fff;--accent:#2563eb;--muted:#6b7280}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:#111}
.site-header{background:linear-gradient(90deg,#111827,#1f2937);color:white;padding:12px 16px}
.site-header h1{margin:0;font-size:20px}
.container{max-width:900px;margin:20px auto;padding:16px}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.toolbar input{flex:1;padding:10px;border-radius:8px;border:1px solid #e5e7eb;background:white}
.btn{padding:8px 12px;border-radius:8px;border:1px solid #d1d5db;background:white;cursor:pointer}
.btn.primary{background:var(--accent);color:white;border-color:rgba(0,0,0,0.08)}
.editor{background:var(--card);padding:12px;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,0.04);margin-bottom:12px}
.editor.hidden{display:none}
.editor .title{width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:6px;margin-bottom:8px}
.editor .content{width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:6px}
.editor-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.note-card{background:var(--card);padding:12px;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,0.04);position:relative;display:flex;flex-direction:column;gap:8px}
.note-title{font-weight:600}
.note-body{white-space:pre-wrap;flex:1;color:var(--muted);font-size:14px}
.note-meta{font-size:12px;color:var(--muted)}
.card-actions{display:flex;gap:6px;margin-top:8px}
.action{background:transparent;border:0;color:var(--muted);cursor:pointer;padding:6px;border-radius:6px}
.action:hover{background:#f3f4f6}
.empty{padding:24px;text-align:center;color:var(--muted)}
@media (max-width:480px){.toolbar{flex-direction:column;align-items:stretch}.card-actions{justify-content:flex-end}}