:root{--accent:#2b6cb0;--muted:#666}
*{box-sizing:border-box}
body{font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;line-height:1.4;margin:0;background:#f7fafc;color:#111}
.container{max-width:920px;margin:28px auto;padding:20px;background:#fff;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
h1{margin:0 0 12px}
.form-row{display:flex;gap:8px;margin:8px 0}
input[type=text],input,button{padding:10px;border-radius:8px;border:1px solid #e2e8f0}
input{flex:1}
button{background:var(--accent);color:#fff;border:none;cursor:pointer}
button:disabled{opacity:0.6;cursor:not-allowed}
.status{margin-top:8px;color:var(--muted)}
.notes-list{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.note-card{border:1px solid #edf2f7;padding:10px;border-radius:8px;background:#fff}
.note-meta{font-size:13px;color:var(--muted);margin-bottom:6px}
.note-actions{display:flex;gap:8px}
.preview-area{position:fixed;inset:40px;background:#fff;padding:12px;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,0.3);display:none;flex-direction:column}
.preview-area.visible{display:flex}
#previewContent{flex:1;overflow:auto}
footer{margin-top:20px;text-align:center;color:var(--muted)}
.small{font-size:12px;color:var(--muted)}