:root{
  --bg:#f4f7fb;
  --card:#ffffff;
  --text:#14213d;
  --muted:#5b657a;
  --line:#d9e1ef;
  --accent:#1f4ea3;
  --accent-dark:#14356f;
  --soft:#eef4ff;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:linear-gradient(180deg,#f7f9fd 0,#eef3fb 100%);
  color:var(--text);
}
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:32px 18px 48px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px;
  box-shadow:0 12px 35px rgba(16,40,88,.06);
}
.hero{
  margin-bottom:20px;
  background:linear-gradient(135deg,#1f4ea3 0,#245cbf 45%,#6da4ff 100%);
  color:#fff;
  border:none;
}
.hero p{color:rgba(255,255,255,.92)}
.badge{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:inherit;
  font-size:12px;
  font-weight:bold;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:12px;
}
h1,h2{margin:0 0 14px}
p{line-height:1.55;margin:0 0 12px}
label{
  display:block;
  font-weight:bold;
  margin:14px 0 8px;
}
input[type=file],input[type=text]{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
button,.link-btn{
  display:inline-block;
  margin-top:16px;
  padding:12px 18px;
  border:none;
  border-radius:12px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  cursor:pointer;
}
button:hover,.link-btn:hover{background:var(--accent-dark)}
.muted{color:var(--muted)}
.small{font-size:13px}
.mapping,.notes{margin:0;padding-left:20px}
.mapping li,.notes li{margin:8px 0;line-height:1.45}
.stats{margin-top:18px}
.stat{
  background:var(--soft);
  border:1px solid #dbe7ff;
  border-radius:16px;
  padding:16px;
}
.stat strong{
  display:block;
  font-size:28px;
  margin-bottom:4px;
}
code{
  background:#eef2f8;
  border-radius:8px;
  padding:2px 6px;
}