.hb-hero{background:linear-gradient(135deg,#5B1FA8 0%,#7b3fd0 55%,#9b5de5 100%);color:#fff;border-radius:18px;padding:18px 16px;margin-bottom:6px;position:relative;overflow:hidden;box-shadow:0 8px 20px rgba(91,31,168,.35)}
.hb-hero::after{content:"";position:absolute;left:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.12)}
.hb-hero::before{content:"";position:absolute;left:40px;bottom:-45px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.08)}
.hb-hero .hb-hi{font-size:12px;opacity:.85}
.hb-hero .hb-name{font-size:18px;font-weight:bold;margin-top:4px;position:relative;z-index:1}
.hb-hero .hb-date{font-size:12px;opacity:.9;margin-top:6px;position:relative;z-index:1}
.hb-group{display:flex;align-items:center;gap:8px;margin:20px 2px 10px;font-weight:bold;font-size:13px;color:#3d3d4a}
.hb-group::before{content:"";width:5px;height:18px;border-radius:3px;background:var(--gc,#5B1FA8)}
.hb-group::after{content:"";flex:1;height:1px;background:linear-gradient(to left,transparent,rgba(0,0,0,.12))}
.hb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hb-tile{--c1:#7b3fd0;--c2:#4a1888;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:92px;padding:12px 4px;border-radius:16px;text-decoration:none;color:#fff;text-align:center;
  background:linear-gradient(160deg,var(--c1),var(--c2));box-shadow:0 5px 0 rgba(0,0,0,.22),0 9px 16px rgba(0,0,0,.18);transition:transform .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent;overflow:hidden}
.hb-tile::before{content:"";position:absolute;inset:0 0 55% 0;background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,0));border-radius:16px 16px 60% 60%}
.hb-tile:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.22),0 3px 6px rgba(0,0,0,.18)}
.hb-tile .hb-ic{font-size:28px;line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3));position:relative}
.hb-tile .hb-lb{font-size:11.5px;font-weight:bold;line-height:1.5;padding:0 4px;position:relative;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.hb-g1{--gc:#2e7d32}.hb-g1 .hb-tile{--c1:#43c05a;--c2:#1b7a35}
.hb-g2{--gc:#1565c0}.hb-g2 .hb-tile{--c1:#4aa3f0;--c2:#1456b0}
.hb-g3{--gc:#ef6c00}.hb-g3 .hb-tile{--c1:#ffa94d;--c2:#e0560a}
.hb-g4{--gc:#8e24aa}.hb-g4 .hb-tile{--c1:#b765d8;--c2:#6d1b8a}
.hb-g5{--gc:#00897b}.hb-g5 .hb-tile{--c1:#3fc9b6;--c2:#00695c}
.hb-badge{position:absolute;top:6px;left:6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#fff;color:#333;font-size:12px;font-weight:bold;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,.3);z-index:2}
.hb-badge.hb-alert{background:#e53935;color:#fff;animation:hbp 1.4s infinite}
@keyframes hbp{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}