:root{
  --bg:#eef3f7;
  --topbar:#223447;
  --btn-blue:#2f4f7c;
  --btn-blue-dark:#27456e;
  --btn-outline:#c6d2e2;
  --btn-red:#b3281e;
  --text:#1d2b3a;
  --muted:#6d7d8c;
  --card:#ffffff;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Segoe UI", SegoeUI, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

.topbar{
  height:56px;
  background:var(--topbar);
  display:flex;
  align-items:center;
  padding:0 16px;
  color:#fff;
  gap:18px;
}
.brand{
  font-size:20px;
  font-weight:700;
}
.nav-btn{
  background:#ffffff;
  color:#2c3e50;
  border:none;
  padding:6px 20px;
  border-radius:18px;
  font-weight:600;
  font-size:13px;
  box-shadow: inset 0 0 0 1px #d9e2ef;
}
.nav-btn.primary{
  background:var(--btn-blue);
  color:#fff;
  box-shadow:none;
}

.page{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:calc(100vh - 56px);
}

.center-card{
  width:420px;
  background:var(--card);
  border-radius:18px;
  padding:28px 28px 26px;
  box-shadow:0 1px 0 #e6edf5;
  text-align:center;
}
.center-card h1{
  margin:0 0 6px;
  font-size:22px;
  font-weight:700;
}
.center-card p{
  margin:0 0 16px;
  font-size:13px;
  color:var(--muted);
}
.action-btn{
  width:100%;
  border-radius:14px;
  padding:10px 14px;
  margin:8px 0;
  font-size:13px;
  border:1px solid var(--btn-outline);
  background:#fff;
  color:var(--text);
}
.action-btn.primary{
  background:var(--btn-blue);
  border-color:var(--btn-blue);
  color:#fff;
}
.action-btn.red{
  background:var(--btn-red);
  border-color:var(--btn-red);
  color:#fff;
}