:root { --border:#e5e5e5; --muted:#666; --danger:#b00; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; color:#111; }
a { color: inherit; }
.wrap { max-width: 980px; margin: 0 auto; padding: 16px; }
.topbar { border-bottom: 1px solid var(--border); background: #fff; position: sticky; top: 0; }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { font-weight: 700; }
.nav a { margin-left: 12px; text-decoration: none; }
.nav a:hover { text-decoration: underline; }
h1 { margin: 8px 0 12px; }
.card { border:1px solid var(--border); border-radius: 10px; padding: 14px; background:#fff; }
.grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 860px) { .grid { grid-template-columns: 1fr 1fr; } }
.label { display:block; margin-bottom:6px; font-weight:600; }
.input { width:100%; padding:10px; border:1px solid #ccc; border-radius:8px; }
.btn { padding:10px 12px; border:1px solid #ccc; border-radius:8px; background:#fff; cursor:pointer; }
.btn:hover { border-color:#999; }
.btn.primary { border-color:#111; }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.muted { color: var(--muted); }
.error { color: var(--danger); }
.table { width:100%; border-collapse: collapse; margin-top: 12px; }
.table th, .table td { text-align:left; padding: 8px; border-bottom: 1px solid #eee; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.hint { margin-top: 16px; padding: 12px; border:1px dashed var(--border); border-radius: 10px; color: var(--muted); }
.footer { border-top:1px solid var(--border); color: var(--muted); }
.spacer { height: 10px; }