:root { color-scheme: light; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: #f6f7f9;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 18px; }

.card {
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

h1 { margin: 0 0 10px; font-size: 18px; }
h2 { margin: 16px 0 10px; font-size: 15px; }

.muted { color: #556; font-size: 12px; line-height: 1.4; }

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

label { display:block; font-size:12px; color:#334; margin:0 0 6px; }

input, select, button { font: inherit; }

input, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d7dbe6;
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  box-sizing: border-box;
}

.row { display:flex; gap:10px; flex-wrap:wrap; }
.row > div { flex:1; min-width:220px; }

.btns { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

button {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
}

.primary { background: #1f6feb; color: #fff; }
.secondary { background: #eef2ff; color: #1b2a6b; }

.pill {
  display:inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 12px;
  margin: 4px 6px 0 0;
}

.out { padding:12px; border-radius:12px; margin-top:10px; }
.ok  { background:#ecfdf3; border:1px solid #b7f0c8; }
.err { background:#fff1f2; border:1px solid #fecdd3; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

.note { font-size: 12px; color:#445; line-height:1.5; }

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