:root{
  --bg:#0b0f14;
  --card:#111824;
  --muted:#9fb0c0;
  --text:#e7eef6;
  --line:#223246;
  --accent:#4aa3ff;
  --danger:#ff6b6b;
  --ok:#7ee787;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 14px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 900px at 20% 0%, #121c2a 0%, var(--bg) 55%);
  color:var(--text);
}
.app{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:18px;
}
.topbar{
  width:min(920px, 100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  margin-bottom:14px;
}
.brand{ font-weight:750; letter-spacing:.3px; }
.hint{ color:var(--muted); font-size:14px; text-align:right; }
.root{ width:min(920px, 100%); }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width: 860px){ .grid.two{ grid-template-columns:1fr 1fr; } }
h1,h2,h3{ margin:0 0 10px 0; }
h1{ font-size:26px; }
h2{ font-size:20px; }
p{ margin:0 0 10px 0; color:var(--muted); line-height:1.45; }
.hr{ height:1px; background:var(--line); margin:14px 0; }
.btnrow{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.btn{
  border:1px solid var(--line);
  background:#0e1520;
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:650;
}
.btn:hover{ border-color:#2b3f58; }
.btn.primary{ border-color: rgba(74,163,255,.45); background: rgba(74,163,255,.10); }
.btn.ghost{ background: transparent; }
.btn.danger{ border-color: rgba(255,107,107,.5); background: rgba(255,107,107,.08); }
.badge{
  display:inline-block;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:13px;
}
.progress{
  width:100%;
  height:10px;
  background:#0e1520;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
}
.progress > div{
  height:100%;
  background: linear-gradient(90deg, rgba(74,163,255,.35), rgba(74,163,255,.8));
  width:0%;
}
.field{ display:flex; flex-direction:column; gap:8px; }
.label{ font-weight:700; }
.input, textarea{
  width:100%;
  border:1px solid var(--line);
  background:#0e1520;
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  font-size:15px;
}
textarea{ min-height:92px; resize:vertical; }
.radioGroup, .checkGroup{ display:flex; flex-direction:column; gap:8px; }
.choice{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0e1520;
}
.choice input{ margin-top:3px; }
.choice span{ color:var(--text); }
.choice small{ display:block; color:var(--muted); margin-top:3px; }
.note{
  border:1px dashed rgba(159,176,192,.35);
  border-radius:12px;
  padding:10px 12px;
  color:var(--muted);
}
.kv{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:8px 12px;
  align-items:center;
}
.kv div{ padding:8px 0; border-bottom:1px solid rgba(34,50,70,.65); }
.kv div:last-child, .kv div:nth-last-child(2){ border-bottom:none; }
.footer{ width:min(920px, 100%); color:var(--muted); padding:16px 6px 6px; }
.small{ font-size:13px; color:var(--muted); }
.warn{ color: var(--danger); }
.ok{ color: var(--ok); }