/*
 * Teisou Account — component styles, dibangun di atas tokens.css.
 * Dipakai oleh _preview.html (style guide hidup) dan nantinya oleh
 * index.html (shell SPA) begitu halaman-halaman asli dibangun.
 */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/PlusJakartaSans-Variable.woff2') format('woff2-variations'),
       url('../assets/fonts/PlusJakartaSans-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html { color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-default);
  background: var(--surface-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin: 0 0 var(--space-2);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-3); color: var(--text-default); }

a { color: var(--color-pink); }

.num, .mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, 'SF Mono', 'Cascadia Code', monospace; }

/* Mesh gradient sangat halus di area hero — radial pink/blue 6-8% opacity,
   bukan solid, supaya latar tidak terasa putih polos tapi tetap tenang. */
.mesh-bg {
  position: relative;
  isolation: isolate;
}
.mesh-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(var(--color-pink-rgb), 0.08), transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 0%, rgba(91, 155, 239, 0.07), transparent 60%);
}

.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 28px; height: 28px; }

/* Koin resmi (js/ui/coin.js). Gambar berwarna penuh, jadi tidak ikut stroke/fill .icon. */
.coin { flex-shrink: 0; display: block; }
.coin-amount { display: inline-flex; align-items: center; vertical-align: middle; color: var(--color-coin-text); font-weight: 800; }
.coin-amount-16 { gap: 4px; }
.coin-amount-20, .coin-amount-24 { gap: 6px; }
.coin-amount-28 { gap: 10px; }
.coin-amount-48 { gap: 12px; }

/* ============ Layout shell ============ */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 264px;
  flex-shrink: 0;
  padding: var(--space-6) var(--space-4);
  border-right: 1px solid var(--surface-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  /* "Kaca" mengambang: sidebar menempel (sticky) dan sedikit tembus
     pandang di atas konten yang discroll, bukan panel putih polos. */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  background: var(--surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.sidebar-brand { display: flex; padding: 0 var(--space-2); }
.sidebar-brand img { height: 40px; width: auto; }

.sidebar-identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
}
.sidebar-identity .avatar { width: 40px; height: 40px; }
.sidebar-identity .name { font-weight: 700; font-size: var(--text-sm); color: var(--text-strong); line-height: 1.25; }
.sidebar-identity .id { font-size: var(--text-xs); color: var(--text-faint); }

.sidebar-nav { display: flex; flex-direction: column; gap: var(--space-1); }

.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  margin-left: 3px; /* ruang untuk accent bar milik .active, supaya layout tidak "lompat" saat state berubah */
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--text-sm);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  min-height: var(--touch-target);
}
.sidebar-link:hover { background: var(--color-pink-soft); color: var(--color-pink); transform: translateX(2px); }
.sidebar-link.active {
  background: linear-gradient(90deg, var(--color-pink-soft), transparent);
  color: var(--color-pink);
  font-weight: 700;
}
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: -3px; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--gradient-primary);
}
.sidebar-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.content-col {
  flex: 1;
  min-width: 0;
  padding: var(--space-8) var(--space-6) var(--space-16);
}
.content-max {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Mobile: sidebar jadi tab bar bawah */
@media (max-width: 1023px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: auto;
    height: auto;
    width: auto;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border-right: none;
    border-top: 1px solid var(--surface-border);
    background: var(--surface-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: var(--space-2) var(--space-2);
    padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
    z-index: 40;
    gap: 0;
  }
  .sidebar-identity, .sidebar-brand { display: none; }
  /* Tab bar cukup 5 item: Ikhtisar, Keamanan, Sesi, Aplikasi, Keluar.
     Email/Password/Hapus akun tetap bisa dicapai dari halaman Keamanan;
     tema mengikuti preferensi sistem di mobile. */
  .sidebar-link[data-mobile-hide] { display: none; }
  .sidebar-nav { flex-direction: row; width: 100%; justify-content: space-around; }
  .sidebar-link { flex-direction: column; gap: 2px; padding: var(--space-1) var(--space-2); margin-left: 0; font-size: var(--text-xs); border-radius: var(--radius-sm); }
  .sidebar-link span.label-text { font-size: 10px; }
  .sidebar-link:hover { transform: none; }
  /* Di tab bar bawah, accent bar vertikal (dibuat untuk sidebar tegak)
     tidak masuk akal secara visual — gantinya titik kecil di ATAS ikon. */
  .sidebar-link.active::before {
    left: 50%; top: 2px; bottom: auto;
    width: 16px; height: 3px;
    transform: translateX(-50%);
  }
  .content-col { padding: var(--space-6) var(--space-4) calc(var(--space-16) + 56px); }
}

/* ============ Page transition ============ */

.page-enter {
  /* `backwards`, bukan `both`: dengan `both`, transform translateY(0) tetap
     menempel setelah animasi selesai dan menjadikan #app containing block
     untuk elemen position:fixed — tab bar bawah di mobile ikut terseret
     ke bawah halaman, bukan menempel di viewport. */
  animation: page-fade-in var(--duration-page) var(--ease-out) backwards;
}
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ Card ============ */

.card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1), var(--inset-highlight);
}
.card-pad { padding: var(--space-5); }

/* Garis gradien tipis di tepi paling atas halaman — detail kecil yang
   banyak dipakai produk "premium" (Linear, Vercel) supaya halaman terasa
   bermerek sejak piksel pertama, bukan form admin polos. */
.top-accent-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 3px;
  background: linear-gradient(90deg, var(--color-pink), var(--color-pink-light), var(--color-blue));
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .top-accent-bar { animation: accent-shimmer 8s linear infinite; }
}
@keyframes accent-shimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

/* ============ Buttons ============ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  user-select: none;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active { transform: scale(0.97); }

.btn-primary {
  position: relative;
  overflow: hidden; /* menampung sapuan "shine" di bawah */
  background: var(--gradient-primary);
  color: var(--text-on-gradient);
  box-shadow: var(--glow-pink-soft);
}
.btn-primary:hover { box-shadow: var(--glow-pink); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(0.97); }
/* Sapuan cahaya diagonal tipis saat hover — detail "premium" kecil,
   dibangun murni dengan transform (bukan posisi/ukuran) supaya ringan
   dan tetap mulus walau dihormati prefers-reduced-motion. */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 650ms var(--ease-out);
}
.btn-primary:hover::after { transform: translateX(40%); }
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after { display: none; }
}

.btn-secondary {
  background: var(--surface-card);
  color: var(--text-strong);
  border-color: var(--surface-border);
}
.btn-secondary:hover { background: var(--color-pink-soft); border-color: transparent; color: var(--color-pink); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover { background: var(--surface-border); color: var(--text-strong); }

.btn-destructive {
  background: var(--surface-card);
  color: var(--color-red);
  border-color: rgba(239, 68, 68, 0.3);
}
.btn-destructive:hover { background: var(--color-red-soft); }

.btn-sm { min-height: 36px; padding: 0 var(--space-4); font-size: var(--text-xs); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none; }

.btn-social {
  background: var(--surface-card);
  border-color: var(--surface-border);
  color: var(--text-strong);
}
.btn-social:hover { background: var(--color-pink-soft); border-color: transparent; }

/* ============ Form fields ============ */

.field { margin-bottom: var(--space-5); }
.field-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: var(--space-2);
}
.field-input {
  width: 100%;
  min-height: var(--touch-target);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-border);
  background: var(--surface-card);
  color: var(--text-strong);
  font-family: inherit;
  font-size: var(--text-base);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.field-input::placeholder { color: var(--text-faint); }
.field-input:focus { outline: none; border-color: var(--color-pink); box-shadow: 0 0 0 3px rgba(var(--color-pink-rgb), 0.15); }
.field-input.has-error { border-color: var(--color-red); }
.field-help { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }
.field-error { font-size: var(--text-xs); color: var(--color-red); margin-top: var(--space-2); display: flex; align-items: center; gap: 4px; }

.field-meter {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-border);
  margin-top: var(--space-2);
  overflow: hidden;
}
.field-meter > span { display: block; height: 100%; border-radius: inherit; transition: width var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out); }
.field-meter.weak > span { width: 33%; background: var(--color-red); }
.field-meter.ok > span { width: 66%; background: var(--color-amber); }
.field-meter.strong > span { width: 100%; background: var(--color-green); }

/* ============ Toggle switch ============ */

.switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; min-height: var(--touch-target); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track {
  width: 40px; height: 24px;
  background: var(--surface-border);
  border-radius: var(--radius-pill);
  position: relative;
  transition: background var(--duration-base) var(--ease-out);
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface-card);
  box-shadow: var(--shadow-1);
  transition: transform var(--duration-base) var(--ease-out);
}
.switch input:checked + .switch-track { background: var(--gradient-primary); box-shadow: var(--glow-pink-soft); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { box-shadow: var(--focus-ring); }

/* ============ Chip ============ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
}
.chip-success { background: var(--color-green-soft); color: var(--color-green); box-shadow: inset 0 0 0 1px rgba(34,197,94,0.25); }
.chip-warning { background: var(--color-amber-soft); color: var(--color-amber); box-shadow: inset 0 0 0 1px rgba(245,158,11,0.25); }
.chip-info { background: var(--color-blue-soft); color: var(--color-blue); box-shadow: inset 0 0 0 1px rgba(91,155,239,0.25); }
.chip-neutral { background: var(--surface-border); color: var(--text-muted); }

/* ============ Skeleton loader ============ */

.skeleton {
  background: linear-gradient(90deg, var(--surface-border) 25%, rgba(255,255,255,0.5) 37%, var(--surface-border) 63%);
  background-size: 400% 100%;
  animation: skeleton-sheen 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
@keyframes skeleton-sheen { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ============ Toast ============ */

.toast-region {
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 100;
  max-width: calc(100vw - var(--space-8));
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--text-strong);
  color: var(--surface-bg);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-green);
  box-shadow: var(--shadow-3);
  font-size: var(--text-sm);
  font-weight: 600;
  animation: toast-in var(--duration-page) var(--ease-out) both;
}
.toast.toast-success { border-left-color: var(--color-green); }
.toast.toast-error { border-left-color: var(--color-red); }
.toast.toast-success .icon { color: var(--color-green); }
.toast.toast-error .icon { color: var(--color-red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ============ Dialog ============ */

.dialog-backdrop {
  position: fixed; inset: 0;
  background: var(--surface-overlay-scrim);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  padding: var(--space-4);
}
.dialog {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: var(--space-6);
  max-width: 420px;
  width: 100%;
  animation: dialog-in var(--duration-base) var(--ease-out) both;
}
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.dialog-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); justify-content: flex-end; }

/* ============ Empty state ============ */

.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-6);
}
.empty-state img { width: 96px; height: 96px; margin-bottom: var(--space-4); }
.empty-state h3 { margin-bottom: var(--space-1); }
.empty-state p { color: var(--text-muted); max-width: 320px; margin: 0 auto; }

/* ============ Avatar ============ */

.avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid var(--surface-card);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg {
  width: 88px; height: 88px; font-size: var(--text-xl); border-width: 3px;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.18); /* cincin lembut ekstra di luar border putih, bukan solid tapi berlapis */
}

/* ============ Profile hero card ============ */

.profile-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden; /* menampung blob dekoratif di belakang konten */
  border-radius: var(--radius-lg);
  background: var(--gradient-primary);
  color: var(--text-on-gradient);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  box-shadow: var(--shadow-2);
}
/* Dua lingkaran blur sangat halus — kedalaman tanpa menambah elemen DOM
   atau JS. Hanya `transform` yang dianimasikan (murah secara render),
   dan dimatikan total kalau pengguna minta gerak dikurangi. */
.profile-hero::before, .profile-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  filter: blur(40px);
  z-index: -1;
}
.profile-hero::before { width: 180px; height: 180px; top: -70px; right: -40px; }
.profile-hero::after { width: 140px; height: 140px; bottom: -60px; right: 120px; background: rgba(255,255,255,0.15); }
@media (prefers-reduced-motion: no-preference) {
  .profile-hero::before { animation: blob-drift-1 14s ease-in-out infinite; }
  .profile-hero::after { animation: blob-drift-2 18s ease-in-out infinite; }
}
@keyframes blob-drift-1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, 10px); } }
@keyframes blob-drift-2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10px, -8px); } }
.profile-hero .meta { flex: 1; min-width: 200px; }
.profile-hero h2 { color: #fff; margin-bottom: 2px; }
.profile-hero .id-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255,255,255,0.2);
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
  border: none;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}
.profile-hero .id-pill:hover { background: rgba(255,255,255,0.3); }
.profile-hero .id-pill:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.6); }
.profile-hero .verified-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.2);
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 700;
  margin-top: var(--space-2);
}

.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
@media (max-width: 540px) { .summary-grid { grid-template-columns: 1fr; } }

.summary-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.summary-card:hover { box-shadow: var(--shadow-2), var(--inset-highlight); transform: translateY(-2px); }
.summary-card .summary-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--_accent-soft, var(--color-pink-soft));
  color: var(--_accent, var(--color-pink));
  flex-shrink: 0;
}
/* Satu warna per kartu ringkasan (Keamanan/Sesi/Aplikasi/Email) — bukan
   dekorasi, tapi bantuan scan-cepat: mata langsung tahu kartu mana yang
   mana tanpa membaca labelnya dulu. Tetap di dalam palet brand. Lewat
   custom property supaya tidak perlu !important untuk menang atas rule
   dasar di atas. */
.summary-icon-blue { --_accent-soft: var(--color-blue-soft); --_accent: var(--color-blue); }
.summary-icon-green { --_accent-soft: var(--color-green-soft); --_accent: var(--color-green); }
.summary-icon-amber { --_accent-soft: var(--color-amber-soft); --_accent: var(--color-amber); }
.summary-card .summary-body { flex: 1; min-width: 0; }
.summary-card .summary-label { font-size: var(--text-xs); color: var(--text-muted); }
.summary-card .summary-value { font-weight: 700; color: var(--text-strong); }
.summary-card .chevron { color: var(--text-faint); }

/* ============ Page head & overview grid ============ */

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.page-head h1 { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 var(--space-1); }
.page-head p { margin: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.section-head h3 { margin: 0; }
.section-head a { font-weight: 600; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-8); align-items: start; }
@media (max-width: 760px) { .overview-grid { grid-template-columns: 1fr; } }
.activity-row { display: flex; gap: var(--space-3); align-items: flex-start; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
.activity-title { font-weight: 600; font-size: var(--text-sm); color: var(--text-strong); }
.activity-meta { font-size: var(--text-xs); color: var(--text-muted); }

/* ============ Connected app card ============ */

.app-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
}
.app-row + .app-row { border-top: 1px solid var(--surface-border); }
.app-row { transition: background var(--duration-fast) var(--ease-out); }
.app-row .app-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  object-fit: cover;
  box-shadow: var(--shadow-1), 0 0 0 1px var(--surface-border);
}
.app-row:hover { background: var(--surface-border); }
.app-row:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.app-row:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.app-row .app-body { flex: 1; min-width: 0; }
.app-row .app-name { font-weight: 700; color: var(--text-strong); display: flex; align-items: center; gap: var(--space-2); }
.app-row .app-sub { font-size: var(--text-sm); color: var(--text-muted); }
.app-row[data-accent="kana-master"] .app-name { }
.app-row[data-accent="kana-master"] .connected-dot { background: var(--color-app-kana-master); }
.app-row[data-accent="cash-manager"] .connected-dot { background: var(--color-app-cash-manager); }
.connected-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ============ Login split layout ============ */

.login-shell {
  min-height: 100vh;
  display: flex;
}
.login-brand {
  flex: 0 0 44%;
  max-width: 560px;
  background: linear-gradient(160deg, var(--color-pink) 0%, #FF8FA3 55%, #FFC2CE 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-10);
  position: relative;
  overflow: hidden;
}
.login-brand::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 90%, rgba(255,255,255,0.18), transparent 55%);
}
.login-brand::before {
  content: '';
  position: absolute;
  width: 240px; height: 240px;
  border-radius: 50%;
  top: -80px; left: -60px;
  background: rgba(255,255,255,0.12);
  filter: blur(60px);
}
@media (prefers-reduced-motion: no-preference) {
  .login-brand::before { animation: blob-drift-1 16s ease-in-out infinite; }
}
.login-brand > * { position: relative; z-index: 1; }
/* Wordmark: aset sudah transparan (latar putihnya dihapus), jadi aman
   ditaruh langsung di atas gradien. */
.login-brand .brand-wordmark { height: 52px; width: auto; align-self: flex-start; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.12)); }
.login-brand .brand-body { display: flex; flex-direction: column; gap: var(--space-4); }
.login-brand .brand-text { display: flex; flex-direction: column; gap: var(--space-4); }
.login-brand .brand-mascot { width: 168px; filter: drop-shadow(0 12px 24px rgba(0,0,0,0.18)); }
.login-brand h1 { color: #fff; font-size: var(--text-3xl, 2.4rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 420px; margin: 0; }
.login-brand p { color: rgba(255,255,255,0.9); max-width: 420px; margin: 0; }
.login-brand .app-logos { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); position: relative; }
.login-brand .app-logos img { width: 44px; height: 44px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.6); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
.login-brand .app-logos-plus { width: 44px; height: 44px; border-radius: 12px; border: 2px dashed rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; }
.login-brand .app-logos-caption { font-size: var(--text-xs); font-weight: 600; color: rgba(255,255,255,0.9); margin-left: var(--space-1); }
.login-brand .brand-foot { font-size: var(--text-xs); color: rgba(255,255,255,0.8); margin: 0; }
.login-brand .brand-foot a { color: inherit; text-decoration: none; }
.login-brand .brand-foot a:hover { text-decoration: underline; }
.login-sub { margin-bottom: var(--space-5); }
.login-row { display: flex; justify-content: flex-end; margin: calc(var(--space-3) * -1) 0 var(--space-4); }
.login-row a { font-weight: 600; }

.login-form-col {
  flex: 1 1 58%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.login-form-wrap { width: 100%; max-width: 420px; }

@media (max-width: 900px) {
  .login-shell { flex-direction: column; }
  .login-brand { flex: 0 0 auto; max-width: none; padding: var(--space-6) var(--space-5); gap: var(--space-4); border-radius: 0 0 28px 28px; }
  .login-brand .brand-wordmark { height: 40px; }
  .login-brand .brand-body { flex-direction: row; align-items: center; gap: var(--space-4); }
  .login-brand .brand-text { gap: var(--space-2); }
  .login-brand .brand-mascot { width: 84px; flex-shrink: 0; }
  .login-brand h1 { font-size: var(--text-xl); }
  .login-brand p, .login-brand .brand-foot, .login-brand .app-logos-caption, .login-brand .app-logos-plus { display: none; }
  .login-brand .app-logos { margin-top: 0; }
  .login-brand .app-logos img { width: 28px; height: 28px; border-radius: 8px; }
}

/* ============ Section banner (verify email, dsb) ============ */

.banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}
.banner-warning { background: var(--color-amber-soft); color: #92620A; }
.banner-info { background: var(--color-blue-soft); color: #2D5FA3; }
.banner .banner-action { margin-left: auto; flex-shrink: 0; }

/* ============ Utility ============ */

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--text-sm); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* ============ Tombol bahasa (pojok kanan atas, semua halaman akun) ============ */
#lang-fab {
  position: fixed; top: var(--space-3); right: var(--space-3); z-index: 60;
  min-width: 40px; min-height: 36px; padding: 0 var(--space-3);
  border: 1px solid var(--surface-border); border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-strong);
  font-family: inherit; font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.04em;
  box-shadow: var(--shadow-1); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
#lang-fab:hover { background: var(--color-pink-soft); color: var(--color-pink); }
#lang-fab:focus-visible { outline: 2px solid var(--color-pink); outline-offset: 2px; }