:root{
  --bg:#f6f7fb; --card:#fff; --muted:#6b6f76; --accent:#3b82f6; --danger:#ef4444;
  --radius:10px; --gap:12px; font-family: Inter, system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body,#root{height:100%}
body{
  margin:0; background:var(--bg); color:#0f1724; -webkit-font-smoothing:antialiased;
  padding:24px;
}
.wrap{max-width:1000px;margin:0 auto}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
h1{margin:0;font-size:20px}
.card{background:var(--card);padding:14px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(15,23,42,0.06)}
.user-area{font-size:14px}
.msg{color:var(--danger);margin-top:8px;font-size:13px}
.hidden{display:none}

/* Auth */
#auth{max-width:420px;margin-bottom:20px}
#auth input{width:100%;padding:10px;margin:8px 0;border:1px solid #e6e9ee;border-radius:8px}
.row{display:flex;gap:8px}
button{cursor:pointer;border:0;padding:9px 12px;border-radius:8px;background:var(--accent);color:#fff}
button.ghost{background:transparent;border:1px solid #dde6ff;color:var(--accent)}
button.danger{background:var(--danger)}
button:active{transform:translateY(1px)}

/* notes layout */
.notes-grid{display:grid;grid-template-columns:300px 1fr;gap:16px}
.controls{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.controls input{flex:1;padding:8px;border-radius:8px;border:1px solid #e6e9ee}
.notes-list{list-style:none;padding:0;margin:0;max-height:60vh;overflow:auto}
.notes-list li{padding:8px;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.notes-list li:hover{background:#f2f6ff}
.notes-list .meta{font-size:12px;color:var(--muted)}
.notes-list .title{font-weight:600}

/* editor */
.editor{display:flex;flex-direction:column}
#noteTitle{padding:10px;border-radius:8px;border:1px solid #e6e9ee;margin-bottom:8px}
#noteBody{flex:1;min-height:320px;padding:12px;border-radius:8px;border:1px solid #e6e9ee;resize:vertical}
.editor-footer{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
#saveStatus{font-size:13px;color:var(--muted)}

/* responsive */
@media (max-width:800px){
  .notes-grid{grid-template-columns:1fr; }
  .sidebar{order:2}
  .editor{order:1}
}