:root {
  --bg: #0b1220;
  --surface: #121a2b;
  --card: #18233a;
  --text: #e9eef7;
  --muted: #9fb0cc;
  --primary: #58a6ff;
  --danger: #ff6b6b;
  --success: #2ecc71;
  --border: #24324f;
  --shadow: rgba(0, 0, 0, 0.3);
  --radius: 12px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji'; background: linear-gradient(180deg, var(--bg), #0a0f1a); color: var(--text); }
header { padding: 28px 20px 10px; text-align: center; }
h1 { margin: 0 0 6px; font-size: 28px; }
.subtitle { margin: 0; color: var(--muted); }
main { max-width: 920px; margin: 0 auto; padding: 20px; display: grid; grid-template-columns: 1fr; gap: 16px; }
section { background: radial-gradient(1200px 400px at 10% 0%, #1a2744 0%, var(--surface) 40%, var(--surface) 100%); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 18px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.02); padding: 16px; }
.create h2, .list h2 { margin-top: 0; }
label { display: block; margin-bottom: 8px; color: var(--muted); }
textarea { width: 100%; padding: 12px; border-radius: 10px; background: var(--card); color: var(--text); border: 1px solid var(--border); outline: none; resize: vertical; min-height: 80px; transition: border-color .15s ease, box-shadow .15s ease; }
textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.2); }
.actions { display: flex; justify-content: flex-end; margin-top: 10px; }
button { appearance: none; border: 1px solid var(--border); background: linear-gradient(180deg, #2b3d65, #233255); color: var(--text); padding: 10px 14px; border-radius: 10px; cursor: pointer; transition: transform .06s ease, box-shadow .15s ease, border-color .15s ease; box-shadow: 0 6px 14px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05); }
button:hover { transform: translateY(-1px); border-color: var(--primary); box-shadow: 0 10px 18px rgba(0,0,0,0.3); }
button:active { transform: translateY(0); }
.list-header { display: flex; align-items: center; justify-content: space-between; }
#refresh-btn { font-size: 14px; }
ul.notes { list-style: none; margin: 12px 0 0; padding: 0; }
.note { display: flex; align-items: flex-start; gap: 12px; background: linear-gradient(180deg, #1d2a46, #1a253f); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.note .meta { flex: 1 1 auto; }
.note .meta .text { margin: 0 0 6px; white-space: pre-wrap; }
.note .meta .timestamp { color: var(--muted); font-size: 12px; }
.note .actions { display: flex; gap: 8px; align-items: center; }
.btn-danger { background: linear-gradient(180deg, #b14f4f, #8d3b3b); border-color: #7a2d2d; }
.status { margin: 8px 0 0; min-height: 1.2em; }
.status.ok { color: var(--success); }
.status.err { color: var(--danger); }
.muted { color: var(--muted); }
footer { max-width: 920px; margin: 8px auto 24px; padding: 0 20px; color: var(--muted); display: flex; gap: 12px; align-items: center; }
footer a { color: var(--primary); text-decoration: none; }
footer a:hover { text-decoration: underline; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); vertical-align: middle; margin-right: 4px; }
.dot.green { background: var(--success); }
.dot.red { background: var(--danger); }