:root{
  --bg: #f7f9fc;
  --card: #ffffff;
  --text: #0f1724;
  --muted: #6b7280;
  --accent: #2563eb;
}

*{box-sizing:border-box}
body{font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; background:var(--bg); color:var(--text)}
.container, .content{max-width:900px; margin:20px auto; padding:0 16px}
.site-header{background:linear-gradient(90deg, #60a5fa, #2563eb); color:#fff; padding:22px 16px; border-radius:8px; margin:16px auto; max-width:900px}
.site-header h1{margin:0; font-size:1.6rem}
.role{margin:6px 0 0; opacity:0.95}
.card{background:var(--card); padding:14px 16px; border-radius:8px; box-shadow:0 6px 18px rgba(15,23,42,0.06); margin:14px 0}
.card h2{margin:0 0 8px}
.card ul{margin:0; padding-left:18px}
.site-footer{max-width:900px; margin:8px auto 40px; padding:0 16px; text-align:center}
#actionBtn{background:var(--accent); color:#fff; border:0; padding:10px 14px; border-radius:8px; cursor:pointer}

@media (max-width:640px){
  .site-header{padding:16px}
  .container, .content{padding:0 12px}
}