/* account.juarakargo.com. Warna, huruf, jarak, dan komponen dari Juara Kargo Design System (Gerbang, Akun);
   berkas ini hanya menyusun bagian yang tidak ada di komponen. */
html, body { margin: 0; min-height: 100%; background: var(--surface-subtle); color: var(--ink); font-family: var(--font-sans); }
body { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
.akun-boot { min-height: 100vh; display: grid; place-items: center; }
.akun-boot .jls-kemajuan { width: min(240px, 60vw); }
.akun-kerangka { display: block; height: 240px; }
.akun-catatan { margin: 0; color: var(--ink-muted); font: 400 14px/20px var(--font-sans); }
.akun-subjudul { margin: 0; font: 700 16px/22px var(--font-sans); }
.akun-form { display: grid; gap: var(--space-3); max-width: 480px; }
.akun-foto { display: grid; gap: var(--space-2); }
.akun-pilihan { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.jls-avatar.akun-avatar-foto[data-rekan] { box-shadow: 0 0 0 2px var(--rekan); }
.akun-warna { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.akun-warna__pilihan { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3) 0 var(--space-2); border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; font: 500 14px/20px var(--font-sans); }
.akun-warna__pilihan input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.akun-warna__contoh { width: 24px; height: 24px; border-radius: 50%; background: var(--rekan); }
.akun-warna__pilihan:has(input:checked) { box-shadow: inset 0 0 0 2px var(--rekan); font-weight: 700; }
.akun-warna__pilihan:has(input:focus-visible) { outline: var(--border-strong) solid var(--focus); outline-offset: 2px; }