/* Metive Home v2 — calm Apple-inspired hierarchy for the student PWA. */
body.metive-home-v2-enabled {
  --mh2-blue: #0a84ff;
  --mh2-blue-soft: rgba(10,132,255,.10);
  --mh2-green: #30d158;
  --mh2-orange: #ff9f0a;
  --mh2-purple: #5e5ce6;
  --mh2-surface: rgba(255,255,255,.78);
  --mh2-surface-strong: rgba(255,255,255,.92);
  --mh2-line: rgba(60,60,67,.10);
  --mh2-shadow: 0 18px 48px rgba(25,39,67,.075);
  --mh2-shadow-soft: 0 8px 26px rgba(25,39,67,.05);
  background-image:
    radial-gradient(circle at 5% -5%, rgba(10,132,255,.10), transparent 30rem),
    radial-gradient(circle at 100% 7%, rgba(94,92,230,.07), transparent 26rem),
    linear-gradient(180deg,#f9fbff 0%,#f4f6fa 44%,#f5f6f8 100%);
}

[data-theme="dark"] body.metive-home-v2-enabled,
body.metive-home-v2-enabled[data-theme="dark"] {
  --mh2-surface: rgba(29,29,31,.78);
  --mh2-surface-strong: rgba(32,32,35,.94);
  --mh2-line: rgba(255,255,255,.10);
  --mh2-shadow: 0 18px 48px rgba(0,0,0,.30);
  --mh2-shadow-soft: 0 8px 26px rgba(0,0,0,.22);
  background-image:
    radial-gradient(circle at 5% -5%, rgba(10,132,255,.16), transparent 30rem),
    radial-gradient(circle at 100% 7%, rgba(94,92,230,.12), transparent 26rem),
    linear-gradient(180deg,#09090a 0%,#000 52%,#070708 100%);
}

.metive-home-v2-enabled #view-home {
  animation: mh2-enter .42s cubic-bezier(.16,1,.3,1);
  padding-bottom: 34px;
}

.metive-home-v2-enabled .home-topbar {
  align-items:flex-start;
  margin: 0 0 18px;
  padding: 3px 2px 0;
}
.metive-home-v2-enabled .home-greeting-box { gap: 2px; }
.metive-home-v2-enabled .home-date {
  margin:0 0 5px;
  color:var(--text-muted);
  font-size:.74rem;
  font-weight:650;
  letter-spacing:.015em;
  text-transform:none;
}
.metive-home-v2-enabled .time-greeting {
  display:flex;
  flex-direction:column;
  gap:1px;
  color:var(--text-muted);
  font-size:.82rem;
  font-weight:560;
  line-height:1.2;
}
.metive-home-v2-enabled .time-greeting strong {
  display:block;
  color:var(--text-head);
  font-size:2rem;
  line-height:1.08;
  letter-spacing:-.045em;
  font-weight:780;
}
.metive-home-v2-enabled .time-greeting #homeGreetingName {
  color:inherit!important;
}
.metive-home-v2-enabled .home-avatar {
  width:48px;
  height:48px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 8px 24px rgba(28,43,76,.10);
  cursor:pointer;
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease;
}
.metive-home-v2-enabled .home-avatar:active { transform:scale(.94); }

/* Keep team stories, but make the strip quieter and secondary. */
.metive-home-v2-enabled .stories-wrap { margin: 0 -3px 18px; }
.metive-home-v2-enabled .stories-container { gap:12px; padding:2px 3px 7px; }
.metive-home-v2-enabled .story-ring { width:56px!important; height:56px!important; }
.metive-home-v2-enabled .story-name { font-size:.67rem; font-weight:560; color:var(--text-muted); }

/* Live Activity style attendance card. */
.metive-home-v2-enabled .hero-section.metive-live-card {
  position:relative;
  overflow:hidden;
  margin:0 0 20px;
  padding:20px;
  min-height:0;
  border-radius:28px;
  color:var(--text-head);
  border:1px solid var(--mh2-line);
  background:linear-gradient(145deg,var(--mh2-surface-strong),var(--mh2-surface));
  box-shadow:var(--mh2-shadow);
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  transition:background .35s ease,border-color .35s ease,transform .28s cubic-bezier(.16,1,.3,1);
}
.metive-home-v2-enabled .hero-section.metive-live-card::after {
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  right:-90px;
  top:-110px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(10,132,255,.14),transparent 70%);
  pointer-events:none;
}
.metive-home-v2-enabled .hero-section.metive-live-card.is-active {
  border-color:rgba(48,209,88,.20);
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(245,255,249,.82));
}
.metive-home-v2-enabled[data-theme="dark"] .hero-section.metive-live-card.is-active {
  background:linear-gradient(145deg,rgba(28,33,30,.96),rgba(18,24,20,.84));
}
.metive-home-v2-enabled .mh2-live-head {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.metive-home-v2-enabled .mh2-live-label {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-head);
  font-size:.75rem;
  font-weight:760;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.metive-home-v2-enabled .mh2-live-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--text-muted);
  box-shadow:0 0 0 5px rgba(142,142,147,.08);
}
.metive-home-v2-enabled .is-active .mh2-live-dot {
  background:var(--mh2-green);
  box-shadow:0 0 0 5px rgba(48,209,88,.11);
  animation:mh2-pulse 1.9s ease-in-out infinite;
}
.metive-home-v2-enabled .week-badge {
  position:static!important;
  width:auto!important;
  margin:0!important;
  padding:6px 9px!important;
  border-radius:999px!important;
  border:0!important;
  background:var(--mh2-blue-soft)!important;
  color:var(--mh2-blue)!important;
  font-size:.66rem!important;
  line-height:1!important;
  font-weight:700!important;
  box-shadow:none!important;
}
.metive-home-v2-enabled .mh2-live-duration {
  position:relative;
  z-index:1;
  margin:19px 0 6px;
  color:var(--text-head);
  font-variant-numeric:tabular-nums;
  font-size:2.25rem;
  line-height:1;
  letter-spacing:-.055em;
  font-weight:720;
}
.metive-home-v2-enabled .mh2-live-caption {
  color:var(--text-muted);
  font-size:.75rem;
  font-weight:560;
}
.metive-home-v2-enabled .home-clock { display:none!important; }
.metive-home-v2-enabled #homePresenceStatus {
  position:relative;
  z-index:1;
  justify-content:flex-start!important;
  min-height:25px;
  margin:13px 0 0!important;
}
.metive-home-v2-enabled #homePresenceStatus .badge,
.metive-home-v2-enabled #homePresenceStatus > * {
  font-size:.7rem!important;
}
.metive-home-v2-enabled .hero-section .home-btn-container {
  position:relative;
  z-index:1;
  margin:18px 0 0!important;
}
.metive-home-v2-enabled .hero-section #btnHomeAction {
  min-height:52px;
  margin:0;
  border-radius:17px!important;
  font-size:.92rem;
  font-weight:720;
  letter-spacing:-.01em;
  box-shadow:none!important;
  transition:transform .16s cubic-bezier(.16,1,.3,1),opacity .16s ease,background .2s ease;
}
.metive-home-v2-enabled .hero-section #btnHomeAction:active { transform:scale(.975); }

/* Hide legacy split widgets; their data is now merged into Next Up. */
.metive-home-v2-enabled #upcomingSection,
.metive-home-v2-enabled #ujianSection,
.metive-home-v2-enabled #jadwalKuliahSection { display:none!important; }

.mh2-section { margin:24px 0 0; }
.mh2-section-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:0 2px 11px;
}
.mh2-section-head h2 {
  margin:0;
  color:var(--text-head);
  font-size:1.18rem;
  line-height:1.15;
  font-weight:760;
  letter-spacing:-.035em;
}
.mh2-section-head p {
  margin:4px 0 0;
  color:var(--text-muted);
  font-size:.72rem;
}
.mh2-see-all {
  border:0;
  background:transparent;
  color:var(--mh2-blue);
  padding:5px 2px;
  font:inherit;
  font-size:.74rem;
  font-weight:650;
  cursor:pointer;
}
.mh2-see-all:active { opacity:.55; }

.mh2-next-card,
.mh2-progress-card {
  overflow:hidden;
  border:1px solid var(--mh2-line);
  border-radius:22px;
  background:var(--mh2-surface-strong);
  box-shadow:var(--mh2-shadow-soft);
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
}
.mh2-next-list { display:flex; flex-direction:column; }
.mh2-next-row {
  position:relative;
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:12px;
  align-items:center;
  min-height:78px;
  padding:13px 15px;
}
.mh2-next-row + .mh2-next-row::before {
  content:"";
  position:absolute;
  left:75px;
  right:0;
  top:0;
  height:1px;
  background:var(--mh2-line);
}
.mh2-next-icon {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:var(--mh2-blue-soft);
  color:var(--mh2-blue);
  font-size:1.05rem;
}
.mh2-next-row[data-source="exam"] .mh2-next-icon { background:rgba(255,159,10,.11); color:var(--mh2-orange); }
.mh2-next-row[data-source="calendar"] .mh2-next-icon { background:rgba(94,92,230,.10); color:var(--mh2-purple); }
.mh2-next-copy { min-width:0; }
.mh2-next-kicker {
  color:var(--text-muted);
  font-size:.62rem;
  font-weight:680;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.mh2-next-copy strong {
  display:block;
  margin-top:3px;
  color:var(--text-head);
  font-size:.86rem;
  line-height:1.35;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mh2-next-copy small {
  display:block;
  margin-top:3px;
  color:var(--text-muted);
  font-size:.69rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mh2-next-time {
  align-self:flex-start;
  padding-top:4px;
  color:var(--text-head);
  font-size:.76rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.mh2-empty {
  min-height:118px;
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--text-muted);
}
.mh2-empty strong { display:block; color:var(--text-head); font-size:.86rem; }
.mh2-empty span { display:block; margin-top:4px; font-size:.72rem; }

.mh2-progress-card { padding:18px; }
.mh2-progress-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.mh2-progress-metric {
  min-width:0;
  padding:13px 12px;
  border-radius:16px;
  background:rgba(118,118,128,.055);
}
.mh2-progress-metric strong {
  display:block;
  color:var(--text-head);
  font-size:1.18rem;
  line-height:1.1;
  font-weight:720;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}
.mh2-progress-metric span {
  display:block;
  margin-top:5px;
  color:var(--text-muted);
  font-size:.65rem;
  line-height:1.25;
  font-weight:560;
}
.mh2-progress-foot {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  color:var(--text-muted);
  font-size:.7rem;
}
.mh2-progress-dot { width:7px; height:7px; border-radius:50%; background:var(--mh2-blue); }

/* Leaderboard now lives in Main Menu. */
#submenu-leaderboard .card {
  margin:0!important;
  border-radius:22px!important;
  background:var(--mh2-surface-strong)!important;
  border:1px solid var(--mh2-line)!important;
  box-shadow:var(--mh2-shadow-soft)!important;
}
#submenu-leaderboard .card > div:first-child { margin-bottom:12px!important; }

/* Refine Main Menu into an iOS settings-like surface. */
.metive-home-v2-enabled #menu-main-layer > div:first-child {
  font-size:1.85rem!important;
  font-weight:760!important;
  letter-spacing:-.045em!important;
  padding:2px 2px 0!important;
  margin-bottom:18px!important;
}
.metive-home-v2-enabled .menu-list-card {
  border-radius:22px!important;
  border:1px solid var(--mh2-line)!important;
  background:var(--mh2-surface-strong)!important;
  box-shadow:var(--mh2-shadow-soft)!important;
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
}
.metive-home-v2-enabled .menu-item-link {
  min-height:58px;
  padding:12px 15px!important;
  transition:background .16s ease,transform .16s cubic-bezier(.16,1,.3,1)!important;
}
.metive-home-v2-enabled .menu-item-link:active { transform:scale(.985); }
.metive-home-v2-enabled .menu-icon {
  width:34px;
  height:34px;
  margin-right:12px!important;
  border-radius:10px;
  background:var(--mh2-blue-soft);
  font-size:1rem!important;
}
.metive-home-v2-enabled .menu-text { font-size:.88rem!important; font-weight:650!important; }
.metive-home-v2-enabled .menu-divider { margin-left:61px!important; background:var(--mh2-line)!important; }
.metive-home-v2-enabled .submenu-title { font-weight:720!important; letter-spacing:-.03em!important; }
.metive-home-v2-enabled .back-btn { border-radius:999px!important; background:var(--mh2-surface)!important; }

/* Floating iOS tab bar. */
.metive-home-v2-enabled .bottom-nav {
  bottom:calc(env(safe-area-inset-bottom) + 12px)!important;
  width:min(360px,calc(100% - 28px))!important;
  max-width:none!important;
  justify-content:space-around!important;
  gap:2px!important;
  padding:8px 9px!important;
  border-radius:26px!important;
  border:1px solid rgba(255,255,255,.56)!important;
  background:rgba(250,250,252,.74)!important;
  box-shadow:0 14px 38px rgba(20,31,54,.14)!important;
  backdrop-filter:blur(26px) saturate(170%)!important;
  -webkit-backdrop-filter:blur(26px) saturate(170%)!important;
}
.metive-home-v2-enabled[data-theme="dark"] .bottom-nav {
  border-color:rgba(255,255,255,.10)!important;
  background:rgba(25,25,27,.76)!important;
}
.metive-home-v2-enabled .bottom-nav .nav-item {
  min-width:66px;
  border-radius:18px!important;
  transition:transform .15s cubic-bezier(.16,1,.3,1),background .16s ease!important;
}
.metive-home-v2-enabled .bottom-nav .nav-item:active { transform:scale(.92); }
.metive-home-v2-enabled .bottom-nav .nav-item.active { background:var(--mh2-blue-soft)!important; }

@keyframes mh2-enter {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:none; }
}
@keyframes mh2-pulse {
  0%,100% { transform:scale(1); opacity:1; }
  50% { transform:scale(.78); opacity:.62; }
}

@media(max-width:390px) {
  .metive-home-v2-enabled .time-greeting strong { font-size:1.78rem; }
  .metive-home-v2-enabled .mh2-live-duration { font-size:2.05rem; }
  .mh2-progress-grid { gap:7px; }
  .mh2-progress-metric { padding:12px 9px; }
}

@media(prefers-reduced-motion:reduce) {
  .metive-home-v2-enabled *,
  .metive-home-v2-enabled *::before,
  .metive-home-v2-enabled *::after { animation:none!important; transition:none!important; }
}