:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { margin:0; background:#0b0c10; color:#eaeaea; }
.wrap { max-width: 1050px; margin: 0 auto; padding: 18px; }
.top { padding: 14px; background:#13151c; border:1px solid #23263a; border-radius: 12px; }
h1 { margin:0 0 10px; font-size: 22px; }
h2 { margin:0 0 10px; font-size: 18px; }
.hint { opacity:.75; margin-top: 8px; font-size: 13px; }
.grid { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media(max-width: 920px){ .grid { grid-template-columns: 1fr; } }

.card { padding: 14px; background:#13151c; border:1px solid #23263a; border-radius: 12px; }
.form { display:grid; gap: 10px; }
label { display:grid; gap: 6px; font-size: 14px; }
input, textarea {
  padding: 9px 10px;
  background:#0f1117;
  border:1px solid #2b2f45;
  border-radius: 10px;
  color:#eaeaea;
  font-size: 14px;
}
.row { display:flex; gap:10px; flex-wrap: wrap; align-items: center; }
.btn { padding: 8px 12px; border:1px solid #2b2f45; background:#0f1117; color:#eaeaea; border-radius: 10px; cursor:pointer; }
.btn:hover { filter: brightness(1.1); }
.btn.primary { background:#161a2a; border-color:#3a3f63; }
.toggle { display:inline-flex; gap: 8px; align-items: center; user-select:none; }

.list { display:flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.item { padding: 10px; border:1px solid #2b2f45; background:#0f1117; border-radius: 12px; }
.meta { opacity:.8; font-size: 13px; }
.title { font-size: 16px; margin-top: 4px; }
.note { margin-top: 6px; white-space: pre-wrap; opacity:.95; }
.actions { margin-top: 8px; display:flex; gap: 8px; flex-wrap: wrap; }

.status { margin-top: 14px; min-height: 20px; opacity:.9; }
.status.ok { color:#8ff0a4; }
.status.err { color:#ff7b7b; }