:root {
  --bg: #0b1020;
  --card: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.12);
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.65);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(110, 231, 255, 0.18), transparent 60%),
              radial-gradient(900px 500px at 80% 30%, rgba(167, 139, 250, 0.14), transparent 60%),
              var(--bg);
  color: var(--text);
}

.container { max-width: 1100px; margin: 28px auto; padding: 0 16px 42px; }
.header { display:flex; gap:16px; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
h1 { margin:0 0 6px; font-size:22px; }
h2 { margin:0 0 12px; font-size:16px; }
.sub { margin:0; color:var(--muted); font-size:13px; line-height:1.5; max-width:720px; }
.header-actions { display:flex; gap:10px; align-items:center; }
.link { color: rgba(110,231,255,0.95); text-decoration:none; font-weight:700; }
.link:hover { text-decoration:underline; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  margin: 12px 0;
}

.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 920px) { .grid { grid-template-columns:1fr; } .header { flex-direction:column; } }

.row { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 920px) { .row { grid-template-columns:1fr; } }

.row-inline { display:flex; gap:10px; align-items:center; }
.field { display:flex; flex-direction:column; gap:6px; }
label { font-size:12px; color:var(--muted); }

.input, .textarea {
  width:100%;
  border-radius:10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10, 14, 28, 0.6);
  color: var(--text);
  padding: 10px 12px;
  outline:none;
}
.textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.input:focus, .textarea:focus { border-color: rgba(110,231,255,0.5); }

.btn {
  border: 1px solid rgba(110,231,255,0.35);
  background: rgba(110,231,255,0.18);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 12px;
  cursor:pointer;
  font-weight:600;
}
.btn:hover { background: rgba(110,231,255,0.24); }
.btn-secondary { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); }
.btn-secondary:hover { background: rgba(255,255,255,0.12); }
.btn-danger { border-color: rgba(255,107,107,0.45); background: rgba(255,107,107,0.18); }
.btn-danger:hover { background: rgba(255,107,107,0.24); }

.pre {
  margin: 10px 0 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  overflow:auto;
  min-height:120px;
  font-size:12px;
  line-height:1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.muted { color: var(--muted); font-size:12px; margin-bottom:10px; }
.table-wrap { overflow:auto; }
.table { width:100%; border-collapse:collapse; font-size:12px; }
.table th, .table td { border-bottom:1px solid rgba(255,255,255,0.12); padding:10px 8px; text-align:left; vertical-align:top; }
.table th { color: rgba(255,255,255,0.75); font-weight:700; }