/* ============================================================
   かぜXONE — account-card.css
   Kartu "Home Hero" versi baru: info akun real-time + jam digital.
   Menggantikan tampilan lama (avatar generik + tombol unduh saja)
   tanpa mengubah struktur .panel/.home-hero yang sudah ada.
   ============================================================ */

.home-hero{
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-deep-rgb),.05) 60%,var(--glass-bg-2));
  position:relative;overflow:hidden;
}
.home-hero::before{content:'';position:absolute;top:-40%;right:-20%;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.18),transparent 65%);pointer-events:none}
.home-hero::after{content:'';position:absolute;bottom:-50%;left:-10%;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-deep-rgb),.14),transparent 65%);pointer-events:none}

/* Baris atas: salam waktu real-time + jam digital */
.acc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:relative;z-index:1;margin-bottom:18px}
.acc-greet{min-width:0}
.acc-greet-hi{font-size:13px;color:var(--text-dim);font-weight:500;letter-spacing:.2px;display:flex;align-items:center;gap:6px}
.acc-greet-hi .ic{width:14px;height:14px;flex-shrink:0}
.acc-greet-name{font-family:'JudulFont','Inter',sans-serif;font-size:19px;font-weight:700;letter-spacing:.2px;line-height:1.25;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}

.acc-clock{text-align:right;flex-shrink:0}
.acc-clock-time{font-variant-numeric:tabular-nums;font-size:22px;font-weight:700;letter-spacing:.5px;line-height:1}
.acc-clock-time span{font-size:13px;font-weight:600;opacity:.6;margin-left:2px}
.acc-clock-date{font-size:10.5px;color:var(--text-dim);margin-top:4px;letter-spacing:.2px;white-space:nowrap}

/* Grid info akun: Nama / Role / Expired */
.acc-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;position:relative;z-index:1;margin-bottom:16px}
.acc-info-item{background:rgba(var(--accent-rgb),.06);border:1px solid var(--glass-border);border-radius:13px;padding:11px 12px;min-width:0}
.acc-info-lbl{font-size:9.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.6px;font-weight:600;display:flex;align-items:center;gap:4px}
.acc-info-lbl .ic{width:11px;height:11px;flex-shrink:0}
.acc-info-val{font-size:13px;font-weight:700;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.1px}
.acc-info-val.role-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:rgba(var(--accent-rgb),.14);border:1px solid var(--glass-border-strong);font-size:11px;margin-top:6px}
.acc-info-val.expired-ok{color:var(--ok)}
.acc-info-val.expired-warn{color:#fbbf24}
.acc-info-val.expired-bad{color:var(--err)}

.home-cta{position:relative;z-index:1}

@media (max-width:420px){
  .acc-info-grid{gap:7px}
  .acc-info-item{padding:9px 8px}
  .acc-info-val{font-size:11.5px}
  .acc-clock-time{font-size:19px}
  .acc-greet-name{font-size:17px}
}