:root{
  --bg:#f4f6f8;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --brand:#0b3d91;
  --warnbg:#fff3cd;
  --warnbd:#ffc107;
  --border:#e5e7eb;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
}
header{
  background:var(--brand);
  color:#fff;
  padding:22px 14px;
}
.header-wrap{
  max-width:1050px;
  margin:0 auto;
}
.header-wrap h1{ margin:0 0 6px 0; font-size:26px; }
.header-wrap p{ margin:0; opacity:.95; }

nav{
  background:#082e6d;
}
.nav-wrap{
  max-width:1050px;
  margin:0 auto;
  padding:10px 14px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.nav-wrap a{
  color:#fff;
  text-decoration:none;
  font-size:14px;
  opacity:.95;
}
.nav-wrap a:hover{ text-decoration:underline; }

.container{
  max-width:1050px;
  margin:18px auto 30px;
  padding:0 14px;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  padding:18px;
  margin:14px 0;
}
.notice{
  background:var(--warnbg);
  border:1px solid var(--warnbd);
  border-left:6px solid var(--warnbd);
  padding:14px;
  border-radius:8px;
  margin:14px 0;
}
h2{ margin:0 0 10px 0; color:var(--brand); }
h3{ margin:14px 0 8px; color:var(--brand); }

ul{ margin:10px 0 0 18px; }
a{ color:var(--brand); }
small, .muted{ color:var(--muted); }

.cta{
  display:inline-block;
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  padding:12px 16px;
  border-radius:6px;
  margin-top:8px;
}
.cta:hover{ filter:brightness(1.05); }

.footer{
  margin-top:26px;
  padding:20px 14px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}
.footer a{
  color:var(--brand);
  text-decoration:none;
}
.footer a:hover{ text-decoration:underline; }

.hr{
  height:1px;
  background:var(--border);
  margin:14px 0;
}
.badge{
  display:inline-block;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
  background:#fff;
}