/**
 * auth.css
 * Styling untuk auth-gate (layar login & menunggu-aktivasi) — Fase 1 SaaS.
 * Memakai token yang sama dengan tokens.css supaya ikut tema dark/light app.
 */

#auth-gate {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-gradient);
}

#auth-gate.auth-gate-hidden {
  display: none;
}

.auth-gate-screen {
  position: relative; /* di atas .auth-bg-layer (z-index 0) — lihat blok di bawah */
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end; /* kartu nempel ke bawah, bukan center vertikal */
  justify-content: center;
  padding: var(--sp-5);
  padding-bottom: var(--sp-6); /* jarak dari tepi bawah browser */
  overflow-y: auto; /* jaga-jaga kalau konten kartu lebih tinggi dari viewport (mis. HP landscape pendek) */
}

/* Wrapper konten (`screen` di authGate.js) — diberi transition di sini
   supaya .auth-screen-hidden di bawah bisa fade+scale mulus. */
.auth-gate-content {
  width: 100%;
  height: 100%;
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              filter var(--duration-base) var(--ease-standard);
}

/* Dipasang SAAT wizard aktivasi (openActivationWizard) dibuka, supaya kartu
   status di belakangnya (login/menunggu-aktivasi) tidak lagi tampil
   tumpang-tindih dengan panel wizard di depannya — cukup SATU panel kaca
   yang terlihat dalam satu waktu, foto latar tetap terlihat penuh di
   baliknya. Dilepas lagi begitu wizard ditutup (lihat authGate.js). */
.auth-gate-content.auth-screen-hidden {
  opacity: 0;
  transform: scale(0.97);
  filter: blur(2px);
  pointer-events: none;
}

/* ---- Background fullframe alur registrasi (authBackground.js) ----
   Dimount SEKALI oleh mountAuthBackground() sebagai anak pertama #auth-gate
   dan tidak ikut di-remount tiap render...Screen — supaya cross-fade antar
   state (login → wizard, antar-langkah wizard) mulus tanpa flicker.
   position:absolute mengeluarkannya dari flex flow #auth-gate; z-index:0
   (dipasangkan dengan .auth-gate-screen di atas) memastikan ia tetap di
   PALING BELAKANG walau flex item lain (kartu) muncul belakangan di DOM. */
.auth-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Statis, selalu ada, paling belakang — fallback saat slot gambar admin
   masih null/kosong atau gagal load. Sama persis dengan gradient tema
   default #auth-gate supaya tidak ada "loncatan" visual saat pertama kali
   auth-bg-layer di-mount sebelum gambar pertama selesai preload. */
.auth-bg-gradient {
  position: absolute;
  inset: 0;
  background: var(--bg-gradient);
}

.auth-bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  will-change: opacity;
  transition: opacity 700ms ease-in-out;
}
.auth-bg-img.is-active {
  opacity: 1;
}

/* Tema light + foto belakang terang bisa bikin kontras panel-vs-foto lebih
   lemah dibanding dark — overlay gradasi gelap TIPIS ini menyamakan rasa
   kontras di kedua tema. Elemen ini anak dari .auth-bg-layer (z-index 0),
   jadi otomatis tetap di BAWAH .auth-gate-screen (z-index 1) — tidak pernah
   menutupi panel atau teks di atasnya.
   Sengaja dibuat sebagai VIGNETTE (gelap cuma di tepi atas & bawah, bening
   di tengah) alih-alih gradient rata dari atas-ke-bawah — versi lama bikin
   SELURUH foto terlihat suram/gelap walau di bagian yang tidak ditempati
   kartu sekalipun. Alpha maksimum juga diturunkan (dari .35 → .22) supaya
   foto tetap terlihat natural, kontras tambahan hanya secukupnya untuk
   menopang keterbacaan teks putih di atasnya. */
[data-theme="light"] .auth-bg-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 60%, rgba(0,0,0,.22) 100%);
}

.auth-gate-loading {
  color: var(--text-faint);
}

.auth-spinner svg,
.auth-plans-loading svg {
  animation: auth-spin 0.9s linear infinite;
}

@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  /* Glassmorphism tipis (readability-first) — lihat §6 spec: transparansi
     seminimal mungkin (90% opaque, bukan transparan penuh), blur secukupnya
     untuk memisahkan panel dari foto background di belakangnya, TIDAK ada
     teks yang diberi opacity < 1 (lihat .auth-title/.auth-desc/dll — warna
     teks tetap solid, tidak disentuh di sini). */
  background: color-mix(in srgb, var(--panel) var(--auth-glass-bg-alpha), transparent);
  backdrop-filter: blur(var(--auth-glass-blur)) saturate(1.1);
  -webkit-backdrop-filter: blur(var(--auth-glass-blur)) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, var(--auth-glass-border-alpha));
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45); /* pisahkan panel dari foto di belakangnya */
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  overflow: hidden;
}
.auth-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient-signal);
}

.auth-card-wide {
  max-width: 420px;
  text-align: left;
}

.auth-wordmark {
  margin-bottom: var(--sp-2);
}

.auth-wordmark-logo {
  height: 32px;
  width: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.auth-tagline {
  color: #ffffff;
  font-size: 14px;
  margin: 0 0 var(--sp-5);
}

.btn-google {
  width: 100%;
  justify-content: center;
  gap: var(--sp-2);
}

/* Tombol "Kembali" di layar login — cuma tampil kalau layar ini dibuka
   lewat alur landing→pricing→login baru (bukan lagi satu-satunya layar
   pertama), lihat renderLoginScreen() di authGate.js. */
.auth-login-back-btn {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  color: #fff;
}
.auth-login-back-btn:hover { background: rgba(255, 255, 255, 0.12); }

/* Hint paket yang dipilih user di pricingScreen.js sebelum sampai di layar
   login ini — murni informatif, belum menyambung ke aktivasi tier apapun. */
.auth-selected-plan-hint {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin: 0 0 var(--sp-4);
}
.auth-selected-plan-hint strong { color: #fff; }

.auth-login-reassure {
  margin: var(--sp-3) 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
}
.auth-login-legal {
  margin: var(--sp-2) 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
}
.auth-login-legal a { color: inherit; text-decoration: underline; }

.auth-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--gradient-signal);
  color: #fff;
  box-shadow: var(--elevation-signal);
  margin-bottom: var(--sp-3);
}

.auth-status-icon-danger {
  background: rgba(229, 72, 77, 0.14);
  color: var(--danger);
}

.auth-title {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0 0 var(--sp-2);
  color: #ffffff;
}

.auth-desc {
  color: #fff;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 var(--sp-4);
}

.auth-email-field {
  text-align: left;
  margin-bottom: var(--sp-3);
}
.auth-email-field label {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 4px;
}
.auth-email-field input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.auth-email-field input:hover { border-color: var(--text-faint); }
.auth-email-field input:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent);
}
.auth-email-field input.input-invalid { border-color: var(--danger); }
.auth-email-field input::placeholder { color: var(--text-hint); opacity: 0.8; }
.auth-email-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
}

.auth-plans {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.auth-plans-loading,
.auth-plans-empty {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
}

.auth-plan-card {
  position: relative;
  flex: 1 1 120px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  background: var(--panel-alt);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  /* Kartu paket sekarang tombol (tap = buka WhatsApp dgn narasi otomatis),
     jadi reset gaya bawaan <button> supaya tetap terlihat seperti kartu. */
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
}

/* Badge diskon — otomatis muncul kalau admin isi `discount_price` paket ini
   di planManager.js (dashboard admin), tanpa perlu update apa pun di sini. */
.auth-plan-discount-badge {
  position: absolute;
  top: -8px;
  right: var(--sp-2);
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: var(--elevation-1);
}

.auth-plan-price-original {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-faint);
  text-decoration: line-through;
  margin-right: 4px;
}
.auth-plan-card:hover { border-color: var(--signal); transform: translateY(-1px); box-shadow: var(--elevation-2); }
.auth-plan-card:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.auth-plan-card.is-selected {
  border-color: var(--signal);
  box-shadow: 0 0 0 2px var(--signal) inset;
}
/* Kartu tanpa warna kustom tetap pakai highlight lembut lama saat terpilih;
   kartu BERWARNA kustom mempertahankan warnanya sendiri saat terpilih (cuma
   ring aksen di atas, lihat aturan .is-selected umum), supaya warna pilihan
   admin tidak "hilang" begitu user tap kartunya. */
.auth-plan-card.is-selected:not(.has-custom-color) {
  background: var(--signal-soft);
}

/* ---- Warna kartu kustom ----
   --plan-bg / --plan-text dipasang inline per-kartu oleh authGate.js, sinkron
   dengan warna yang diatur admin di planManager.js. Teks otomatis kontras
   (gelap di kartu terang, terang di kartu gelap) lewat var(--plan-text). */
.auth-plan-card.has-custom-color {
  background: var(--plan-bg);
  border-color: color-mix(in srgb, var(--plan-bg) 75%, black 12%);
}
.auth-plan-card.has-custom-color .auth-plan-name,
.auth-plan-card.has-custom-color .auth-plan-price,
.auth-plan-card.has-custom-color .auth-plan-duration {
  color: var(--plan-text);
}
.auth-plan-card.has-custom-color .auth-plan-price-original {
  color: color-mix(in srgb, var(--plan-text) 65%, transparent);
}
.auth-plan-card.has-custom-color .auth-plan-cta {
  color: var(--plan-text);
  border-top-color: color-mix(in srgb, var(--plan-text) 25%, transparent);
}

.auth-plan-cta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--success);
}

.auth-plan-name {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: var(--sp-1);
}

.auth-plan-price {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--signal);
}

.auth-plan-duration {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: var(--sp-1);
}

.auth-wizard-open-btn {
  width: 100%;
  justify-content: center;
  gap: 6px;
  margin-bottom: var(--sp-2);
}

.auth-wizard-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 var(--sp-4);
}

/* ---- Modal wizard aktivasi/perpanjangan (openActivationWizard) ----
   Overlay-nya PERLU class z-index khusus di bawah ini: #auth-gate memakai
   var(--z-modal), sama dengan tier yang biasa dipakai modal.js untuk PANEL
   (bukan overlay-nya, yang defaultnya var(--z-overlay) — LEBIH RENDAH dari
   #auth-gate). Tanpa override ini modal wizard akan tersembunyi DI BALIK
   layar auth-gate saat dibuka dari sana.
   Kartu status di belakangnya (.auth-card) di-fade-out lewat class
   .auth-screen-hidden (dipasang authGate.js) begitu wizard ini dibuka —
   jadi TIDAK ada lagi 2 panel kaca tumpang-tindih dalam satu waktu, cuma
   panel wizard ini yang terlihat di atas foto latar. Background overlay
   bawaan modal.js (`--overlay-bg`, gelap solid) tetap di-override jadi
   transparent: foto background (.auth-bg-layer, ikut berganti per-langkah
   lewat setBg) harus tetap terlihat natural/asli sesuai sumber gambarnya
   di semua langkah, TIDAK digelapkan maupun di-blur oleh overlay ini. */
.auth-tutorial-overlay {
  z-index: calc(var(--z-modal) + 10);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none; /* sengaja tidak di-blur (lihat komentar di atas) */
  /* Samakan posisi dengan .auth-gate-screen di belakangnya: menempel ke
     bawah (bukan center) dengan jarak dari tepi bawah browser, supaya saat
     kartu belakang fade-out & panel wizard fade-in, posisinya tidak
     "loncat" dari bawah ke tengah. overflow-y:auto jaga-jaga kalau isi
     langkah (mis. grid kartu paket) lebih tinggi dari viewport. */
  align-items: flex-end;
  padding-bottom: var(--sp-6);
  overflow-y: auto;
}

.auth-tutorial-panel { max-width: 360px; }

/* Wizard butuh sedikit lebih lebar dari modal teks biasa karena berisi
   input email & grid kartu paket, bukan cuma paragraf. Sama seperti
   .auth-card, wizard ini juga tampil di atas .auth-bg-layer (background
   dissolve ikut ganti per-langkah — lihat authGate.js), jadi butuh
   glassmorphism yang sama. Karena kartu di belakangnya sekarang disembunyikan
   (bukan lagi dibiarkan overlap), lebar dibuat senyaman .auth-card supaya
   konten (input email, grid kartu paket) punya ruang cukup. Override
   .modal-panel default (background solid var(--panel)) karena auth.css
   di-load setelah components.css. */
.auth-wizard-panel {
  max-width: 360px;
  background: color-mix(in srgb, var(--panel) var(--auth-glass-bg-alpha), transparent);
  backdrop-filter: blur(var(--auth-glass-blur)) saturate(1.1);
  -webkit-backdrop-filter: blur(var(--auth-glass-blur)) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, var(--auth-glass-border-alpha));
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45);
}

.auth-wizard-step { text-align: center; }

.auth-wizard-step-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--sp-2);
}

.auth-wizard-step .auth-plans,
.auth-wizard-step .auth-email-field {
  margin-bottom: var(--sp-3);
}

.auth-tutorial { text-align: center; }

.auth-tutorial-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-signal);
  color: #fff;
  box-shadow: var(--elevation-signal);
  margin-bottom: var(--sp-3);
}

.auth-tutorial-title {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 0 0 var(--sp-2);
  color: #ffffff;
}

.auth-tutorial-body {
  font-size: 13px;
  line-height: 1.55;
  color: #fff;
  margin: 0 0 var(--sp-4);
}

/* ---- Kotak info pembayaran (Langkah 3 wizard aktivasi) ----
   Dulu nomor & daftar e-wallet ketimbun di tengah paragraf (susah di-scan
   mata, apalagi nomornya perlu disalin manual). Sekarang dipisah jadi kotak
   sendiri: daftar e-wallet horizontal di atas, nomor tujuan + tombol salin
   di bawahnya — dipisahkan garis tipis supaya jelas dua kelompok info yang
   beda. Warna pakai putih transparan (bukan token --panel/--border) supaya
   kontras terjamin di atas foto latar apa pun, konsisten dengan pola teks
   putih lain di file ini (.auth-tutorial-body, .auth-plan-name, dst). */
.auth-payment-box {
  text-align: left;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  margin: 0 0 var(--sp-4);
}

.auth-payment-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--sp-2);
}

.auth-payment-wallets {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.auth-payment-wallet {
  flex: 1 1 0;
  text-align: center;
  padding: 6px 2px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.auth-payment-phone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
}

.auth-payment-phone {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}

.auth-payment-copy {
  flex-shrink: 0;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}
.auth-payment-copy:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
}
.auth-payment-copy.is-copied {
  color: var(--success);
  border-color: var(--success);
  background: rgba(47, 174, 122, 0.14);
}

.auth-tutorial-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: var(--sp-4);
}

.auth-tutorial-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.auth-tutorial-dot.is-active {
  background: var(--signal);
  transform: scale(1.2);
}

.auth-tutorial-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.auth-tutorial-actions .btn svg { vertical-align: -2px; }

/* ---- Banner notifikasi langganan mendekati habis (di dalam builder) ---- */
.subscription-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  background: rgba(255, 182, 72, 0.14);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-2) var(--sp-4);
  font-size: 12.5px;
  line-height: 1.4;
}

.subscription-banner svg {
  color: var(--spark);
  flex-shrink: 0;
  margin-top: 1px; /* sejajar optis dengan baris pertama teks saat body 2 baris (ada daftar detail) */
}

.subscription-banner-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Daftar fitur terdampak (Fase 3B §4.4) — proyeksi "akan terjadi" kalau
   langganan dibiarkan habis, lihat detectAffectedFeatures() di
   downgradeNotice.js. Sengaja dibuat ringkas (font lebih kecil dari pesan
   utama) supaya tetap terasa sebagai detail pendukung, bukan menyaingi
   pesan ajakan perpanjang di atasnya. */
.subscription-banner-details {
  margin: 2px 0 0;
  padding-left: 18px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.subscription-banner-details li {
  margin-bottom: 1px;
}

.subscription-banner-close {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: var(--sp-1);
  flex-shrink: 0;
}

.subscription-banner-close:hover {
  color: var(--text);
}

/* Varian untuk status 'expired' (Lite/Pro yang langganannya habis) — sejak
   FASE 3, status ini tidak lagi mengunci builder (lihat authGate.js), jadi
   banner ini satu-satunya ajakan perpanjang yang tersisa. Nada warna sedikit
   lebih tegas (danger) dari varian expiring_soon (spark/kuning), tapi teks
   pesannya tetap suportif, bukan mengancam — lihat subscriptionBanner.js. */
.subscription-banner-expired {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.subscription-banner-expired svg {
  color: var(--danger);
}

/* ---- Kolom "Akun Saya" di sidebar builder (accountPanel.js) ---- */
.account-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.account-identity {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.account-avatar {
  width: 38px;
  height: 38px;
  font-size: 15px;
  flex-shrink: 0;
}

.account-identity-text {
  flex: 1;
  min-width: 0;
}

.account-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-email {
  font-size: 11.5px;
  color: var(--text-hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-role-badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  background: var(--gradient-signal);
  box-shadow: 0 2px 6px rgba(255,106,26,0.25);
  border-radius: 999px;
  padding: 3px 8px;
}

/* Baris "Tier" (Free/Lite/Pro) di modal Akun Saya — lihat renderTierRow()
   di accountPanel.js, FASE 3 PROMPT-IMPLEMENTASI-TIER-SAAS.md poin 5.3. */
.account-tier-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.account-tier-row svg { flex-shrink: 0; color: var(--text-faint); }

.account-tier-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding: 2px 9px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
}
.account-tier-badge-free { color: var(--text-muted); }
.account-tier-badge-lite { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.account-tier-badge-pro {
  color: #fff;
  background: var(--gradient-signal);
  border-color: transparent;
}

.account-tier-note {
  font-size: 11px;
  color: var(--text-hint);
}

/* Tombol "Upgrade" (hanya tier Free, lihat renderTierRow() di accountPanel.js)
   didorong ke ujung kanan baris tier lewat margin-left:auto — supaya badge
   & catatan tier tetap rapat ke ikon di kiri, tombolnya sendiri yang
   menjorok ke kanan seperti aksi pada baris tsb. */
.account-upgrade-btn {
  flex-shrink: 0;
  margin-left: auto;
}

.account-plan-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.account-plan-row svg { flex-shrink: 0; color: var(--text-faint); }

.account-usage {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-usage-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}

.account-usage-row svg { flex-shrink: 0; color: var(--text-faint); }

.account-usage-text {
  font-size: 12px;
  line-height: 1.35;
}

.account-usage-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  overflow: hidden;
}

.account-usage-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--success);
  transition: width var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}

.account-usage-bar-fill.warning { background: var(--spark); }
.account-usage-bar-fill.danger { background: var(--danger); }

/* Disklaimer ganti paket di modal "Akun Saya": kartu kecil beraksen
   kuning/oranye (var(--spark)) supaya terbaca sebagai peringatan tapi
   tidak semencolok error. */
.account-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid color-mix(in srgb, var(--spark) 45%, var(--border));
  background: color-mix(in srgb, var(--spark) 12%, transparent);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}
.account-disclaimer > svg { flex-shrink: 0; margin-top: 1px; color: var(--spark); }
.account-disclaimer-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.account-disclaimer-body p { margin: 0; }
.account-disclaimer-body strong { color: var(--text); }

.account-signout {
  align-self: stretch;
  justify-content: center;
  color: var(--danger);
}
.account-signout:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }

/* Nama & email akun dipotong ellipsis di desktop; di mobile ditampilkan
   utuh (wrap) supaya tetap terbaca lengkap, konsisten dengan teks lain
   di bagian builder (lihat app.css & components.css). */
@media (max-width: 720px) {
  .account-name,
  .account-email {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
  }
}

/* ---- Sudut membulat & warna teks putih, khusus popup di alur sign up
   (.auth-card & wizard aktivasi) — SUPAYA SERAGAM dengan gaya UI builder
   (kartu/tombol/modal di builder semuanya rounded, lihat --radius-* di
   tokens.css). Kolom email dibuat KAPSUL PENUH (border-radius 999px),
   seirama dengan elemen pill lain di builder (badge diskon, usage bar).
   Scoped ke class/context auth-* saja — TIDAK menyentuh modal generik
   lain di builder (confirmDialog/alertDialog/promptDialog dkk), yang
   memang sudah rounded lewat .modal-panel bawaan (components.css). */
.auth-card,
.auth-wizard-panel,
.auth-tutorial-panel {
  border-radius: var(--radius-lg);
}

.auth-email-field input {
  border-radius: 999px;
  padding-left: var(--sp-4); /* kapsul butuh sedikit ekstra ruang di kiri-kanan biar teks tidak mepet lengkung */
  padding-right: var(--sp-4);
}

/* Ikon close ("×") wizard sekarang duduk di atas kartu kaca gelap (bukan
   panel solid var(--panel) seperti modal generik lainnya) — warnai putih
   supaya tetap terlihat jelas, konsisten dengan teks lain di popup ini. */
.auth-wizard-panel .modal-close-btn {
  color: rgba(255, 255, 255, 0.75);
}
.auth-wizard-panel .modal-close-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

/* ---- Splash Popup Registrasi (signupSplashPopup.js) ----
   Gambar persegi (1:1) yang diatur admin (tab "Splash Popup Registrasi"),
   muncul 4 detik setelah layar login tampil & menutup sendiri 9 detik
   kemudian kalau diabaikan (lihat signupSplashPopup.js untuk timing).
   z-index sengaja SEDIKIT DI BAWAH wizard aktivasi (.auth-tutorial-overlay,
   z-modal+10) tapi tetap di atas #auth-gate (z-modal) — kalau user langsung
   tap "Lanjutkan dengan Google"/wizard sebelum 9 detik, wizard modal boleh
   menutupi splash, tidak sebaliknya. */
.signup-splash-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(var(--overlay-blur));
  backdrop-filter: blur(var(--overlay-blur));
  animation: signupSplashFadeIn 0.25s var(--ease-standard) both;
}

.signup-splash-card {
  position: relative;
  width: min(320px, 82vw);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.25);
  animation: signupSplashPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.signup-splash-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.signup-splash-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background var(--duration-fast) var(--ease-standard);
}
.signup-splash-close:hover {
  background: rgba(0, 0, 0, 0.78);
}

@keyframes signupSplashFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes signupSplashPopIn {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---- Notifikasi "baru saja terjadi" (Fase 3B §4.4, downgradeNoticeModal.js) ----
   customDialog generik (modal.js) dipakai sebagai basis — panel ini cuma
   menambah sedikit gaya khusus: ikon info di tengah-atas (bukan tone
   danger/alert-triangle seperti confirmDialog "danger", karena ini murni
   informasi apa yang berubah, bukan peringatan yang perlu tindakan segera)
   dan daftar butir fitur terdampak dengan penekanan lebih dari daftar
   ringkas di subscription-banner. */
.downgrade-notice-panel .downgrade-notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--panel-alt);
  color: var(--signal);
  margin: 0 auto var(--sp-3);
}

.downgrade-notice-panel .modal-title {
  text-align: center;
}

.downgrade-notice-panel .modal-message {
  text-align: center;
}

.downgrade-notice-list {
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-3) + 18px);
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
}
.downgrade-notice-list li {
  margin-bottom: 4px;
}
.downgrade-notice-list li:last-child {
  margin-bottom: 0;
}

.downgrade-notice-footnote {
  font-size: 12px;
  color: var(--text-hint);
}

/* ---------- Voucher paket gratis di modal Akun Saya (lihat accountPanel.js) ---------- */
.account-voucher {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md, 10px);
  border: 1px dashed var(--border);
  background: var(--panel-alt);
}
.account-voucher-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: var(--text-muted);
  text-align: left;
}
.account-voucher-toggle svg { flex-shrink: 0; color: var(--text-faint); }
.account-voucher-toggle strong { color: var(--signal); font-weight: 700; }
.account-voucher-form[hidden] { display: none; }
.account-voucher-input-row { display: flex; gap: 8px; }
.account-voucher-input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  box-sizing: border-box;
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: 600 16px var(--font-body); /* 16px mencegah zoom otomatis di iOS */
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.account-voucher-input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-faint); }
.account-voucher-input:focus { outline: none; border-color: var(--signal); }
.account-voucher-input:disabled { opacity: 0.6; }
.account-voucher-btn { flex-shrink: 0; min-width: 64px; }
.account-voucher-msg { margin: 6px 0 0; min-height: 0; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.account-voucher-msg:empty { display: none; }
.account-voucher-msg.error { color: var(--danger); }
.account-voucher-msg.success { color: var(--success); }

/* ---------- Kolom kode voucher di layar login & wizard aktivasi (authGate.js) ---------- */
.auth-login-voucher {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md, 10px);
  border: 1px dashed var(--border);
  background: var(--panel-alt);
}
.auth-login-voucher .account-voucher-input { width: 100%; }
.auth-wizard-voucher { margin-top: 12px; }
.auth-wizard-voucher:empty { display: none; }

/* ---------- Ajak teman di modal Akun Saya (referralSection.js) ---------- */
.account-referral {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid color-mix(in srgb, var(--signal) 35%, var(--border));
  background: color-mix(in srgb, var(--signal) 6%, var(--panel));
}
.account-referral-head { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.account-referral-head svg { color: var(--signal); flex-shrink: 0; }
.account-referral-desc { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.account-referral-code-row { display: flex; align-items: center; gap: 8px; }
.account-referral-code {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px dashed var(--signal);
  background: var(--panel);
  color: var(--text);
  font: 700 17px var(--font-body);
  letter-spacing: 0.14em;
  text-align: center;
  user-select: all;
}
.account-referral-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-muted); }
.account-referral-stats strong { color: var(--text); }
.account-referral-note { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--text-faint); }
.account-referral-apply .account-voucher { border-style: solid; }