:root{
  --bg:#f9fafb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#0ea5e9;
  --brand-600:#0284c7;
  --radius:14px;
  --shadow:0 4px 24px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.5 system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial;
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; background:#fff; border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px}
.brand img{height:28px}
.main{
  max-width:960px; margin:32px auto; padding:0 20px; display:grid; gap:24px;
}
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:24px;
}
h1{margin:0 0 14px; font-size:24px}
h2{margin:0 0 10px; font-size:18px}
.muted{color:var(--muted)}
.avatar{width:80px; height:80px; border-radius:50%; object-fit:cover; background:#f3f4f6; border:1px solid var(--line)}
.row{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.actions{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:600}
.btn:hover{background:#f3f4f6}
.btn-primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-600)}
.btn-danger{background:#ef4444; color:#fff; border-color:#ef4444}
.section{margin-top:20px}

.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; text-decoration:none; color:inherit}
.brand img{height:28px}

/* nicer neutral pill for header Home button */
.topbar .btn.btn-secondary{
  text-decoration: none;
  background: #eef2f7;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.topbar .btn.btn-secondary:hover{
  background: #e6ebf2;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.topbar .btn.btn-secondary:focus-visible{
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}