:root{
  --bg:#f6f6fb;
  --card:#ffffff;
  --text:#1b1b1f;
  --muted:#666;
  --line:#e6e6ef;
  --brand:#2b57ff;
  --brand2:#ffcc00;
  --radius:16px;
}

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

a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1100px;margin:0 auto;padding:0 14px}

.topbar{
  background:linear-gradient(90deg,var(--brand),#5f7dff);
  color:#fff;
  border-bottom:5px solid var(--brand2);
}
.topbar-inner{padding:14px 0}

.brand{display:flex;gap:10px;align-items:center;color:#fff;text-decoration:none}
.brand-name{font-weight:bold;font-size:20px;letter-spacing:.4px}
.brand-tagline{font-size:12px;opacity:.9}

.layout{
  display:grid;
  grid-template-columns:240px 1fr 260px;
  gap:16px;
  padding:16px 0;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
}

.card-title{font-weight:bold;margin-bottom:10px}

.menu a{
  display:block;
  padding:8px 10px;
  border-radius:12px;
}
.menu a:hover{background:#f1f3ff}

.muted{color:var(--muted);font-size:13px}

.list a{
  display:block;
  padding:7px 0;
  border-bottom:1px dashed var(--line);
}
.list a:last-child{border-bottom:0}

.pill{
  display:inline-block;
  background:#fff3b0;
  border:1px solid #ffe37a;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
}

.footer{
  margin-top:10px;
  padding:18px 0;
  color:var(--muted);
  font-size:13px;
  text-align:center;
}
.footer-grid{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  text-align:left;
}
.footer-links a{margin-left:10px}

.footer-copy{margin-top:10px}

@media(max-width:980px){
  .layout{grid-template-columns:1fr}
  .footer-grid{flex-direction:column;align-items:flex-start}
}