* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: "PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  background:#f0f2f5;
  color:#333;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.topbar {
  background:linear-gradient(135deg,#1e3a8a,#3b82f6);
  color:#fff;
  padding:0 32px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.brand { display:flex; align-items:center; gap:12px; }
.logo {
  width:36px; height:36px;
  background:#fff; color:#1e3a8a;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px;
}
.title { font-size:20px; font-weight:600; letter-spacing:1px; }
.user-area { display:flex; align-items:center; gap:14px; }
.username { font-size:14px; opacity:.95; }
.btn-logout {
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.5);
  color:#fff;
  padding:6px 14px;
  border-radius:6px;
  cursor:pointer;
  font-size:13px;
  transition:background .2s;
}
.btn-logout:hover { background:rgba(255,255,255,.3); }

main { flex:1; width:100%; max-width:1100px; margin:0 auto; padding:32px 24px; }
.welcome { font-size:15px; color:#666; margin-bottom:24px; }

.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:20px;
}
.card {
  background:#fff;
  border-radius:12px;
  padding:24px 20px;
  text-align:center;
  cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  border:1px solid #e8eaef;
  transition:transform .15s, box-shadow .15s, border-color .15s;
  position:relative;
}
.card:hover {
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(30,58,138,.12);
  border-color:#3b82f6;
}
.card .icon { font-size:44px; line-height:1.2; }
.card .name { font-size:17px; font-weight:600; margin-top:12px; }
.card .desc { font-size:13px; color:#999; margin-top:6px; }
.card .badge {
  position:absolute; top:12px; right:12px;
  font-size:11px; padding:2px 8px; border-radius:10px;
}
.badge-ready { background:#ecfdf5; color:#059669; }
.badge-pending { background:#fef3c7; color:#b45309; }
.badge-none { display:none; }

.footer {
  text-align:center;
  color:#aaa;
  font-size:12px;
  padding:20px;
}