* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  background: linear-gradient(160deg, #0c1220 0%, #141c2e 45%, #0f172a 100%);
  color: #e8eef7;
  line-height: 1.5;
}
.wrap { max-width: 920px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: #1e3a5f;
  color: #93c5fd;
  border: 1px solid #2563eb44;
}
.hero { margin-bottom: 1.5rem; }
.hero h1 { margin: .5rem 0 .35rem; font-size: 1.85rem; font-weight: 700; }
.hero .sub { color: #94a3b8; margin: 0; max-width: 52rem; }
.card {
  background: rgba(26, 35, 50, .92);
  border: 1px solid #2d3a52;
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
  margin-bottom: 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.card.ok { border-color: #166534; background: rgba(20, 50, 35, .5); }
.card.warn { border-color: #854d0e; background: rgba(60, 40, 10, .35); }
h2 { margin: 0 0 .75rem; font-size: 1.15rem; color: #f1f5f9; }
h3 { margin: 1rem 0 .5rem; font-size: .95rem; color: #cbd5e1; }
.hint, .muted { color: #94a3b8; font-size: .9rem; }
.flow {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin: 1rem 0;
}
.flow-step {
  flex: 1 1 140px;
  min-width: 120px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: .65rem .75rem;
  text-align: center;
  font-size: .82rem;
}
.flow-step strong { display: block; color: #7dd3fc; margin-bottom: .2rem; }
.flow-arrow { color: #475569; font-size: 1.2rem; flex: 0 0 auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid #2d3a52; vertical-align: top; }
th { color: #94a3b8; width: 38%; font-weight: 500; }
td code { color: #7dd3fc; word-break: break-all; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin: .75rem 0; }
.kpi {
  background: #0f172a;
  border-radius: 10px;
  padding: .75rem;
  border: 1px solid #334155;
}
.kpi .label { font-size: .75rem; color: #94a3b8; text-transform: uppercase; }
.kpi .val { font-size: 1.25rem; font-weight: 700; color: #4ade80; }
label { display: block; margin: 1rem 0 .5rem; }
input[type=email] {
  width: 100%;
  padding: .65rem .75rem;
  border-radius: 8px;
  border: 1px solid #334155;
  background: #0f172a;
  color: #e8eef7;
  font-size: 1rem;
}
.cta {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border: 0;
  padding: .85rem 1.5rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-top: .5rem;
}
.cta:hover { filter: brightness(1.08); }
.px { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
a { color: #7dd3fc; }
ul.check { margin: .5rem 0; padding-left: 1.2rem; }
ul.check li { margin: .35rem 0; }
.param-empty { color: #64748b; font-style: italic; }
.row-highlight td code { color: #fde68a; }
.card-accent { border-color: #1d4ed8; background: rgba(30, 58, 95, .45); }
.warn-inline { margin-top: .75rem; padding: .5rem .65rem; background: rgba(120, 53, 15, .35); border-radius: 8px; }
.pre-box {
  margin: .35rem 0 1rem;
  padding: .75rem .85rem;
  background: #0a0f18;
  border: 1px solid #334155;
  border-radius: 8px;
  font-size: .82rem;
  line-height: 1.45;
  color: #bae6fd;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
}
.headers-table th { width: 28%; }
@media (max-width: 600px) { .flow-arrow { display: none; } }