/* Halaman biasa: login, akun, pengguna, riwayat, pemasangan. Memakai token warna dari app.css. */
.hal-wrap { max-width: 940px; margin: 0 auto; padding-inline: clamp(16px, 3vw, 28px); padding-block: 28px 72px; display: flex; flex-direction: column; gap: 20px; }
.hal-wrap.sempit { max-width: 440px; padding-block: 9vh 72px; }
.hal-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.hal-head h1 { font-size: clamp(24px, 4vw, 30px); }
a.btn { text-decoration: none; display: inline-block; color: var(--ink); }
a.btn.btn-primary { color: var(--accent-ink); }
.card h2.ch { font-size: 15px; font-weight: 700; }
input[type="password"] { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px; min-height: 38px; max-width: 100%; width: 100%; }
.form-kolom { gap: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .check { align-self: end; }
.check { white-space: normal; }
.ok { background: var(--good-bg); color: var(--good-ink); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.hal-wrap > .err, .hal-wrap > .ok, .hal-wrap > .notice { margin: 0; }
.profil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; margin: 0; }
.profil dt { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.profil dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.daftar-peran { padding-left: 18px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; max-width: 72ch; }
.daftar-user { list-style: none; padding: 0; display: flex; flex-direction: column; }
.daftar-user > li { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.daftar-user > li:last-child { border-bottom: 0; }
.user-baris { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.user-nama { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.user-login { margin-left: auto; }
details > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px; width: fit-content; }
details[open] > summary { margin-bottom: 12px; }
details form { display: flex; flex-direction: column; gap: 14px; background: var(--surface-2); border-radius: 10px; padding: 14px; }
@media (max-width: 600px) {
  .form-grid, .profil { grid-template-columns: minmax(0, 1fr); }
  .user-login { margin-left: 0; flex-basis: 100%; }
}