/* =====================================================================
   KOMPONEN v2 — Bontang Akuatik
   =====================================================================
   Dimuat SETELAH components.css pada setiap halaman.

   Kelas yang juga didefinisikan stylesheet halaman (admin.css, peserta.css)
   ditulis dengan :where() sehingga spesifisitasnya nol — gaya khusus
   halaman selalu menang dan tidak ada tampilan lama yang berubah tanpa
   sengaja. Kelas yang benar-benar baru ditulis normal.
   ===================================================================== */

/* ---------------------------------------------------------------------
   ATRIBUT [hidden] HARUS SELALU MENANG
   ---------------------------------------------------------------------
   Aturan bawaan browser `[hidden] { display: none }` punya spesifisitas
   yang KALAH dari kelas seperti `.lock-panel { display: flex }`. Akibatnya
   elemen yang disembunyikan lewat `el.hidden = true` tetap terlihat —
   termasuk tab khusus koordinator dan panel akses terkunci.
   Satu aturan ini menutup seluruh kelas bug tersebut sekaligus.
   --------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* ---------------- Utilitas ---------------- */
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger  { color: var(--color-danger); }
.container--narrow { max-width: 860px; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; background: var(--color-bg-section);
  padding: 1px 6px; border-radius: 5px; border: 1px solid var(--color-border);
}
code.code-warn {
  border-color: var(--badge-warning-border);
  background: var(--badge-warning-bg);
  color: var(--badge-warning-text);
}

.cell-primary { font-weight: 600; color: var(--color-text-heading); }
.cell-sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }

/* ---------------- Tombol tambahan ---------------- */
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-text-secondary); }
.btn-ghost:hover { background: var(--color-bg-section); color: var(--color-text-heading); }
.btn-lg { padding: 14px 28px; font-size: 15.5px; }
.btn.is-disabled, .btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------------- Badge bersama ---------------- */
:where(.status-badge) {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.5;
  border: 1px solid transparent; white-space: nowrap;
}
:where(.status-badge).success  { background: var(--badge-success-bg); color: var(--badge-success-text); border-color: var(--badge-success-border); }
:where(.status-badge).warning  { background: var(--badge-warning-bg); color: var(--badge-warning-text); border-color: var(--badge-warning-border); }
:where(.status-badge).danger   { background: var(--badge-danger-bg);  color: var(--badge-danger-text);  border-color: var(--badge-danger-border); }
:where(.status-badge).info     { background: var(--badge-info-bg);    color: var(--badge-info-text);    border-color: var(--badge-info-border); }
:where(.status-badge).personal { background: var(--color-accent-soft); color: var(--color-accent); border-color: var(--color-accent); }
:where(.status-badge).muted    { background: var(--color-bg-section); color: var(--color-text-secondary); border-color: var(--color-border); }
:where(.status-badge) svg { width: 12px; height: 12px; }

.badge-muted { background: var(--color-bg-section); color: var(--color-text-secondary); border: 1px solid var(--color-border); }

.manual-flag {
  display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--color-accent); background: var(--color-accent-soft);
  border-radius: 4px; padding: 1px 5px;
}

/* ---------------- Kartu detail bersama ---------------- */
.detail-card {
  background: var(--color-bg-section); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 16px;
}
:where(.detail-row) {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 7px 0; border-bottom: 1px dashed var(--color-border); font-size: 14px;
}
:where(.detail-row):last-child { border-bottom: none; }
:where(.detail-row) > span:first-child { color: var(--color-text-secondary); flex: 0 0 auto; }
:where(.detail-row) strong { text-align: right; color: var(--color-text-heading); word-break: break-word; }

/* ---------------- Info banner bersama ---------------- */
:where(.info-banner) {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--color-primary-light); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 16px;
  font-size: 13.5px; line-height: 1.55; color: var(--color-text-main);
}
:where(.info-banner) p { margin: 0; }
.info-banner--soft { background: var(--color-bg-section); border-left-color: var(--color-text-secondary); }
.info-banner--warning { background: var(--badge-warning-bg); border-left-color: var(--color-warning); }

/* =====================================================================
   CHECKLIST PASSWORD REAL-TIME
   Centang hijau saat syarat terpenuhi, titik abu saat belum.
   ===================================================================== */
.pw-checklist { margin-top: 10px; }
.pw-meter { height: 5px; border-radius: 999px; background: var(--color-border); overflow: hidden; margin-bottom: 10px; }
.pw-meter__bar {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--color-danger), var(--color-warning), var(--color-success));
  background-size: 300% 100%; background-position: 0 0;
  transition: width .25s ease;
}
.pw-checklist.is-valid .pw-meter__bar { background-position: 100% 0; }

.pw-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pw-rule {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.8px; line-height: 1.4; color: var(--color-text-secondary);
  transition: color .2s ease;
}
.pw-rule__icon { width: 15px; height: 15px; flex: 0 0 auto; }
.pw-rule.is-pending .pw-rule__icon { fill: var(--color-border-strong); stroke: none; }
.pw-rule.is-passed { color: var(--color-success); font-weight: 600; }
.pw-rule.is-passed .pw-rule__icon {
  fill: none; stroke: var(--color-success); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}
.pw-match { margin-top: 8px; font-size: 12.8px; font-weight: 600; }
.pw-match.is-ok  { color: var(--color-success); }
.pw-match.is-bad { color: var(--color-danger); }

/* =====================================================================
   PAGINATION — dirender penuh di frontend, tanpa request database
   ===================================================================== */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border);
}
.pager__size { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--color-text-secondary); }
.pager__select {
  padding: 6px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-card);
  color: var(--color-text-main); font: inherit; font-size: 13px; cursor: pointer;
}
.pager__info { white-space: nowrap; }
.pager__nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pager__numbers { display: flex; align-items: center; gap: 4px; }
.pager__btn, .pager__num {
  border: 1px solid var(--color-border); background: var(--color-card);
  color: var(--color-text-main); font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition);
}
.pager__num { min-width: 36px; text-align: center; padding: 7px 9px; }
.pager__btn:hover:not(:disabled), .pager__num:hover:not(.is-active) {
  border-color: var(--color-primary); color: var(--color-primary);
}
.pager__btn:disabled { opacity: .45; cursor: not-allowed; }
.pager__num.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pager__gap { color: var(--color-text-secondary); padding: 0 2px; }

@media (max-width: 560px) {
  .pager { flex-direction: column; align-items: stretch; }
  .pager__nav { justify-content: space-between; }
  .pager__info { font-size: 12px; }
}

/* =====================================================================
   NAVIGASI BAWAH (mobile) — menu utama dalam jangkauan ibu jari
   ===================================================================== */
.bottom-nav { display: none; }

@media (max-width: 820px) {
  .bottom-nav {
    display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottom-nav);
    grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--color-card);
    border-top: 1px solid var(--color-border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 20px rgba(15, 42, 68, .10);
  }
  .bottom-nav__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: none; cursor: pointer; font: inherit;
    font-size: 10.5px; font-weight: 600; letter-spacing: .1px;
    color: var(--color-text-secondary); padding: 7px 2px 5px;
    border-radius: var(--radius-md); transition: var(--transition); min-height: 52px;
  }
  .bottom-nav__item .ic { width: 21px; height: 21px; }
  .bottom-nav__item.is-active { color: var(--color-primary); background: var(--color-primary-light); }
  .bottom-nav__item:active { transform: scale(.94); }

  /* Tab bar atas disembunyikan; navigasi berpindah ke bawah layar. */
  body.has-bottom-nav .tabs { display: none; }
  body.has-bottom-nav .admin-page { padding-bottom: 84px; }
}

/* =====================================================================
   MENU PROFIL DI NAVBAR — rumah baru untuk Pengaturan
   ===================================================================== */
.usermenu { position: relative; }
.usermenu__trigger {
  display: flex; align-items: center; gap: 9px;
  background: none; border: 1px solid var(--color-border);
  border-radius: 999px; padding: 5px 12px 5px 5px; cursor: pointer;
  font: inherit; color: var(--color-text-main); transition: var(--transition);
}
.usermenu__trigger:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.usermenu__avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--gradient-header); color: #fff;
  font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
}
.usermenu__meta { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.usermenu__name { font-size: 13px; font-weight: 600; color: var(--color-text-heading); }
.usermenu__role { font-size: 11px; color: var(--color-text-secondary); }
.usermenu__caret { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; opacity: .6; }

.usermenu__panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: var(--z-dropdown);
  min-width: 250px; padding: 8px;
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: usermenuIn .18s ease;
}
@keyframes usermenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.usermenu__header {
  padding: 10px 12px 12px; border-bottom: 1px solid var(--color-border); margin-bottom: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.usermenu__header strong { font-size: 14px; color: var(--color-text-heading); }
.usermenu__header span { font-size: 12px; color: var(--color-text-secondary); }
.usermenu__theme {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px 12px; font-size: 13px; color: var(--color-text-secondary);
}
.usermenu__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--color-text-main);
  border-radius: var(--radius-sm); text-align: left; transition: var(--transition);
}
.usermenu__item:hover { background: var(--color-bg-section); color: var(--color-text-heading); }
.usermenu__item.is-active { background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; }
.usermenu__item svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .75; }
.usermenu__item--danger { color: var(--color-danger); }
.usermenu__item--danger:hover { background: var(--badge-danger-bg); color: var(--color-danger); }
.usermenu__sep { height: 1px; background: var(--color-border); margin: 6px 4px; }

.ui-segment--sm button { padding: 5px 11px; font-size: 12px; }

@media (max-width: 640px) {
  .usermenu__meta { display: none; }
  .usermenu__trigger { padding: 4px; }
  .usermenu__panel { right: -6px; min-width: min(280px, calc(100vw - 28px)); }
}

/* =====================================================================
   BANNER APLIKASI (mis. ajakan memperbarui password)
   ===================================================================== */
.app-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; margin: 0 0 20px;
  border-radius: var(--radius-lg); border: 1px solid var(--color-border);
  background: var(--color-card); box-shadow: var(--shadow-sm);
}
.app-banner--warning { border-color: var(--badge-warning-border); background: var(--badge-warning-bg); }
.app-banner--inline { margin-bottom: 16px; }
.app-banner__icon { font-size: 22px; line-height: 1; flex: 0 0 auto; }
/* Ikon mata pada banner "lihat sebagai" sengaja berupa SVG, bukan emoji:
   gambar emoji mata berbeda-beda antar sistem operasi dan terlalu mencolok
   untuk sebuah penanda status. SVG-nya mewarisi warna teks banner, dan
   ukurannya dikunci di sini karena SVG mengabaikan font-size. */
.app-banner__icon--svg { display: inline-flex; align-items: center; }
.app-banner__icon--svg svg { width: 21px; height: 21px; display: block; }
.app-banner__body { flex: 1 1 240px; display: flex; flex-direction: column; gap: 3px; }
.app-banner__body strong { font-size: 14.5px; color: var(--color-text-heading); }
.app-banner__body span { font-size: 13px; color: var(--color-text-main); line-height: 1.5; }
.app-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.notice-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 16px; border-radius: var(--radius-md);
  background: var(--badge-warning-bg); border: 1px solid var(--badge-warning-border);
  color: var(--badge-warning-text); font-size: 13.5px; line-height: 1.5;
}
.notice-strip__body { flex: 1 1 260px; }

/* =====================================================================
   MODAL PEMBERITAHUAN PERUBAHAN SISTEM
   ===================================================================== */
.notice-backdrop {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: grid; place-items: center; padding: 20px;
  background: var(--overlay-bg); animation: noticeIn .22s ease;
}
.notice-backdrop.is-closing { opacity: 0; transition: opacity .2s ease; }
@keyframes noticeIn { from { opacity: 0; } to { opacity: 1; } }
.notice-card {
  width: min(520px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 26px 24px 22px; text-align: center;
}
.notice-card__icon { font-size: 38px; margin-bottom: 6px; }
.notice-card h2 { font-size: 20px; color: var(--color-text-heading); margin-bottom: 14px; }
.notice-card__body { text-align: left; font-size: 14px; line-height: 1.65; color: var(--color-text-main); }
.notice-card__body p { margin: 0 0 12px; }
.notice-card__body ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 9px; }
.notice-card__body li { position: relative; padding-left: 24px; }
.notice-card__body li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--color-success); font-weight: 800; }
.notice-card__outro { color: var(--color-text-secondary); font-size: 13px; }
.notice-card .btn { margin-top: 6px; }

/* =====================================================================
   BANNER "LIHAT SEBAGAI" (impersonasi)
   ===================================================================== */
.impersonation-banner {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-banner);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  width: min(560px, calc(100vw - 24px));
  padding: 11px 16px; border-radius: 999px;
  background: var(--color-text-heading); color: var(--color-bg);
  box-shadow: var(--shadow-lg); font-size: 13px;
}
.impersonation-banner__dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent);
  animation: impPulse 1.6s ease-in-out infinite; flex: 0 0 auto;
}
@keyframes impPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.impersonation-banner__text { flex: 1 1 auto; min-width: 0; }
.impersonation-banner__btn {
  border: none; background: var(--color-accent); color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 7px 15px; border-radius: 999px; cursor: pointer; flex: 0 0 auto;
}
.impersonation-banner__btn:hover { background: var(--color-accent-hover); }
body.has-impersonation-banner { padding-bottom: 70px; }
@media (max-width: 820px) {
}

/* =====================================================================
   PANEL AKSES TERKUNCI (pembayaran belum dikonfirmasi)
   ===================================================================== */
.lock-panel {
  display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
  padding: 24px; margin-bottom: 24px; border-radius: var(--radius-lg);
  background: var(--color-card); border: 1px solid var(--badge-warning-border);
  border-left: 4px solid var(--color-warning); box-shadow: var(--shadow-sm);
}
.lock-panel.is-expired { border-color: var(--color-border); border-left-color: var(--color-accent); }
.lock-panel__icon { font-size: 34px; line-height: 1; flex: 0 0 auto; }
.lock-panel__body { flex: 1 1 260px; }
.lock-panel__body h2 { font-size: 18px; color: var(--color-text-heading); margin-bottom: 7px; }
.lock-panel__body p { font-size: 14px; line-height: 1.6; color: var(--color-text-main); margin: 0; }
.lock-panel__meta { margin-top: 14px; display: grid; gap: 7px; }
.lock-meta__row {
  display: flex; justify-content: space-between; gap: 14px; font-size: 13px;
  padding-bottom: 6px; border-bottom: 1px dashed var(--color-border);
}
.lock-meta__row span { color: var(--color-text-secondary); }
.lock-panel__actions { flex: 0 0 auto; align-self: center; }
@media (max-width: 640px) {
  .lock-panel { flex-direction: column; }
  .lock-panel__actions { width: 100%; }
  .lock-panel__actions .btn { width: 100%; }
}

/* =====================================================================
   PERIODE PELATIHAN (enrollment)
   ===================================================================== */
.enrollment-list {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.enrollment-card {
  padding: 16px; border-radius: var(--radius-lg);
  background: var(--color-card); border: 1px solid var(--color-border);
  transition: var(--transition);
}
.enrollment-card.is-current { border-color: var(--color-primary); box-shadow: var(--shadow-glow); }
.enrollment-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.enrollment-card__seq {
  font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--color-text-secondary);
}
.enrollment-card__range { font-size: 14.5px; font-weight: 600; color: var(--color-text-heading); }
.enrollment-card__meta {
  display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 7px;
  font-size: 12.5px; color: var(--color-text-secondary);
}
.enrollment-card__note { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--color-primary); }
.enrollment-card__catatan { margin-top: 9px; font-size: 12.5px; color: var(--color-text-secondary); font-style: italic; }

.enrollment-inline-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.enrollment-inline-list li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--color-bg-section); font-size: 13px;
}
.enrollment-inline-list li .btn { margin-left: auto; }

/* =====================================================================
   HALAMAN AUTH — langkah reset password, OTP, identitas
   ===================================================================== */
.fp-steps { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0 0 22px; padding: 0; }
.fp-steps__item {
  flex: 1 1 0; display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--color-text-secondary);
  padding-bottom: 9px; border-bottom: 2px solid var(--color-border); transition: var(--transition);
}
.fp-steps__item span {
  width: 21px; height: 21px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 11px;
  background: var(--color-border); color: var(--color-text-secondary);
}
.fp-steps__item.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.fp-steps__item.is-active span { background: var(--color-primary); color: #fff; }
.fp-steps__item.is-done { color: var(--color-success); border-bottom-color: var(--color-success); }
.fp-steps__item.is-done span { background: var(--color-success); color: #fff; }

.fp-verified {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--badge-success-text);
  background: var(--badge-success-bg); border: 1px solid var(--badge-success-border);
  border-radius: 999px; padding: 5px 14px; margin-bottom: 14px;
}
.fp-verified::before { content: "\2713"; font-weight: 800; }

.fp-fallback {
  margin-top: 18px; padding: 14px; border-radius: var(--radius-md);
  background: var(--badge-warning-bg); border: 1px solid var(--badge-warning-border);
}
.fp-fallback p { font-size: 13px; margin: 0 0 10px; color: var(--badge-warning-text); }

.otp-input {
  text-align: center; font-size: 26px; font-weight: 700;
  letter-spacing: 11px; padding-left: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.up-identity {
  display: grid; gap: 9px; margin-bottom: 20px; padding: 14px 16px;
  background: var(--color-bg-section); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.up-identity > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.up-identity span { color: var(--color-text-secondary); }
.up-identity strong { color: var(--color-text-heading); }

.success-hero { text-align: center; margin-bottom: 16px; }
.success-hero__icon { font-size: 42px; }
.success-hero h3 { font-size: 18px; color: var(--color-text-heading); margin-top: 4px; }

/* =====================================================================
   HALAMAN PROFIL
   ===================================================================== */
.profile-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.profile-hero__avatar {
  width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 20px; font-weight: 700;
  background: var(--gradient-header); color: #fff;
}
.profile-hero__meta h1 { font-size: 22px; color: var(--color-text-heading); margin: 0; }
.profile-hero__meta p { font-size: 13.5px; color: var(--color-text-secondary); margin: 3px 0 0; }

.profile-form { display: grid; gap: 18px; }
.profile-card {
  padding: 20px; border-radius: var(--radius-lg);
  background: var(--color-card); border: 1px solid var(--color-border);
}
.profile-card__title { font-size: 16px; color: var(--color-text-heading); margin: 0 0 14px; }
.profile-subtitle { font-size: 13.5px; color: var(--color-text-secondary); margin: 16px 0 8px; }
.profile-enrollment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.profile-enrollment-list li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--color-bg-section); font-size: 13px;
}
.profile-enrollments { margin-top: 6px; }

.settings-identity {
  display: grid; gap: 8px; margin-bottom: 16px; padding: 12px 14px;
  background: var(--color-bg-section); border-radius: var(--radius-md);
}
.settings-identity > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.settings-identity span { color: var(--color-text-secondary); }

/* =====================================================================
   DASHBOARD PESERTA — hitung mundur & modal absensi
   ===================================================================== */
.jadwal-countdown { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.jadwal-card.is-live { border-color: var(--color-success); box-shadow: 0 0 0 3px var(--badge-success-bg); }
.jadwal-card.is-live .jadwal-countdown { color: var(--color-success); }

.absen-summary {
  display: grid; gap: 4px; padding: 14px 16px; margin-bottom: 16px;
  background: var(--color-bg-section); border-radius: var(--radius-md);
  font-size: 13px; color: var(--color-text-secondary);
}
.absen-summary strong { font-size: 15px; color: var(--color-text-heading); }
.absen-summary__status { font-weight: 600; color: var(--color-primary); }

.cal-dot.selesai { background: var(--color-text-secondary); }
.cal-legend .dot.selesai, .cal-legend i.dot.selesai { background: var(--color-text-secondary); }

/* =====================================================================
   PANEL ADMIN — elemen baru
   ===================================================================== */
.modal-inline-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--color-border);
}
.modal-inline-actions .btn svg { width: 15px; height: 15px; }

.conflict-box {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 10px; padding: 13px 15px; border-radius: var(--radius-md);
  background: var(--badge-danger-bg); border: 1px solid var(--badge-danger-border);
  color: var(--badge-danger-text); font-size: 13px;
}
.conflict-box p { margin: 3px 0 0; }
.conflict-box .btn { margin-left: auto; }

.nomor-editor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nomor-editor__prefix {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px; font-weight: 700; letter-spacing: 2px;
  padding: 11px 14px; border-radius: var(--radius-md);
  background: var(--color-disabled-bg); color: var(--color-disabled-text);
  border: 1px solid var(--color-border); user-select: none;
}
.nomor-editor__urut { max-width: 130px; letter-spacing: 2px; font-weight: 700; }

.file-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-field__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-field__label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 16px; border-radius: var(--radius-md);
  border: 1.5px dashed var(--color-border-strong); background: var(--color-bg-section);
  font-size: 13.5px; font-weight: 600; color: var(--color-text-main); transition: var(--transition);
}
.file-field__label:hover { border-color: var(--color-primary); color: var(--color-primary); }
.file-field__label svg { width: 16px; height: 16px; }
.file-field__input:focus-visible + .file-field__label { box-shadow: var(--shadow-glow); }
.file-field__info { flex: 1 1 180px; font-size: 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.zip-progress { margin-top: 14px; }
.zip-progress__bar { height: 8px; border-radius: 999px; background: var(--color-border); overflow: hidden; }
.zip-progress__bar > div { height: 100%; width: 0; background: var(--color-primary); transition: width .2s ease; }
.zip-progress__label { margin-top: 8px; font-size: 12.5px; color: var(--color-text-secondary); }

.penulis-stats { margin-bottom: 20px; }
.penulis-stats__title { font-size: 14px; color: var(--color-text-secondary); margin: 0 0 12px; font-weight: 600; }
.penulis-stats__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.penulis-stat {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  border-radius: var(--radius-md); background: var(--color-card); border: 1px solid var(--color-border);
}
.penulis-stat__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--color-primary-light); color: var(--color-primary);
}
.penulis-stat__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.penulis-stat__body strong { font-size: 13.5px; color: var(--color-text-heading); }
.penulis-stat__body span { font-size: 11.5px; color: var(--color-text-secondary); }
.penulis-stat__count { font-size: 20px; font-weight: 800; color: var(--color-primary); text-align: center; line-height: 1; }
.penulis-stat__count small { display: block; font-size: 10px; font-weight: 600; color: var(--color-text-secondary); }

.health-grid {
  display: grid; gap: 10px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.health-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg-section);
}
.health-item__count { font-size: 22px; font-weight: 800; line-height: 1; min-width: 34px; text-align: center; }
.health-item__body { display: flex; flex-direction: column; gap: 2px; }
.health-item__body strong { font-size: 13px; color: var(--color-text-heading); }
.health-item__body span { font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.4; }
.health-item.ok { border-color: var(--badge-success-border); }
.health-item.ok .health-item__count { color: var(--color-success); }
.health-item.warn { border-color: var(--badge-warning-border); background: var(--badge-warning-bg); }
.health-item.warn .health-item__count { color: var(--color-warning); }
.health-item.info .health-item__count { color: var(--color-text-secondary); }

.health-detail { margin-top: 8px; }
.health-dupes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; font-size: 13px; }
.health-dupes > li {
  padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--color-bg-section); border: 1px solid var(--color-border);
}
.health-dupes ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.health-dupes ul li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--color-text-secondary); }
.health-dupes ul li .btn { margin-left: auto; }

.attendees-status { margin-bottom: 12px; font-size: 13px; }
.attendees-item__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attendees-item__info small { font-size: 11.5px; color: var(--color-text-secondary); }
.attendees-item__actions { flex: 0 0 auto; }

.data-table--compact th, .data-table--compact td { padding: 8px 10px; font-size: 12.5px; }
.pivot-no { width: 44px; text-align: center; }
.pivot-nama { min-width: 170px; text-align: left; }

/* ---------------- Keterangan konteks di atas tabel ---------------- */
.table-hint {
  margin: 0 0 12px; font-size: 12.5px; line-height: 1.5;
  color: var(--color-text-secondary);
  display: flex; align-items: center; gap: 7px;
}
.table-hint strong { color: var(--color-primary); }

/* Baris peserta yang periodenya sudah berakhir — tetap terbaca,
   tetapi jelas bukan prioritas operasional harian. */
.data-table tr.is-inactive td { opacity: .62; }
.data-table tr.is-inactive:hover td { opacity: 1; }

.hapus-ringkas {
  list-style: none; margin: 0 0 16px; padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--badge-danger-bg); border: 1px solid var(--badge-danger-border);
  color: var(--badge-danger-text); font-size: 13px;
  display: grid; gap: 5px;
}
.hapus-ringkas li::before { content: "• "; }

/* =====================================================================
   TOMBOL MATA PASSWORD
   Ukuran sentuh 36px, kontras cukup, dan umpan balik jelas saat ditekan.
   ===================================================================== */
.password-wrap { position: relative; }
.password-wrap > input { padding-right: 46px; }
.password-wrap .password-toggle {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  border-radius: 50%; color: var(--color-text-secondary);
  transition: color .18s ease, background-color .18s ease;
}
.password-wrap .password-toggle:hover,
.password-wrap .password-toggle:focus-visible {
  color: var(--color-primary); background: var(--color-primary-light);
}
.password-wrap .password-toggle:active { transform: translateY(-50%) scale(.9); }
.password-wrap .password-toggle svg { width: 22px; height: 22px; pointer-events: none; display: block; }
.password-wrap .password-toggle:disabled { opacity: .4; cursor: not-allowed; }

/* =====================================================================
   FOOTER — informasi kontak klub
   ===================================================================== */
.footer-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.footer-contact h4 { margin-bottom: 14px; }
.footer-contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.footer-contact__list li { display: flex; align-items: flex-start; gap: 11px; }
.footer-contact__icon {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px;
  background: rgba(255, 255, 255, .12);
}
.footer-contact__list li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.footer-contact__label {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; opacity: .65;
}
.footer-contact__list a,
.footer-contact__list li span:not(.footer-contact__label):not(.footer-contact__icon) {
  font-size: 13.5px; line-height: 1.5; word-break: break-word;
}
.footer-contact__list a { text-decoration: none; }
.footer-contact__list a:hover { text-decoration: underline; }

/* =====================================================================
   TOMBOL BANTUAN MENGAMBANG (FAQ + WhatsApp)
   Berada di sudut kiri bawah dan dapat digeser pengguna.
   ===================================================================== */
/* Posisi bawaan: sudut KANAN bawah — jangkauan alami ibu jari kanan saat
   ponsel dipegang satu tangan. JavaScript hanya menimpanya dengan left/top
   inline setelah pengguna menggeser tombol sendiri. */
.help-widget {
  position: fixed; z-index: var(--z-fab);
  right: 16px; left: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.help-widget.is-dragging { cursor: grabbing; user-select: none; }
.help-widget.is-dragging .help-fab { transition: none; box-shadow: var(--shadow-lg); }

.help-fab {
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: grab;
  display: grid; place-items: center; touch-action: none;
  background: var(--gradient-header); color: #fff;
  box-shadow: 0 6px 20px rgba(15, 42, 68, .28);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease;
}
.help-fab svg { width: 26px; height: 26px; pointer-events: none; }
.help-fab:hover { transform: scale(1.07); box-shadow: 0 10px 26px rgba(15, 42, 68, .34); }
.help-fab:active { cursor: grabbing; transform: scale(.95); }
.help-widget.is-open .help-fab { background: var(--color-text-heading); }

/* Panel muncul dari sisi tombol; arahnya menyesuaikan posisi tombol
   agar tidak pernah keluar layar setelah digeser. */
.help-panel {
  position: absolute; left: 0; bottom: calc(100% + 12px);
  width: min(360px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 130px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: helpIn .2s cubic-bezier(.16, 1, .3, 1);
}
.help-widget:not(.is-bottom) .help-panel { bottom: auto; top: calc(100% + 12px); }
.help-widget.is-right .help-panel { left: auto; right: 0; }
@keyframes helpIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.help-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 16px; border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-section);
}
.help-panel__head strong { display: block; font-size: 15px; color: var(--color-text-heading); }
.help-panel__head span { font-size: 12px; color: var(--color-text-secondary); }
.help-panel__close {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: transparent; cursor: pointer;
  color: var(--color-text-secondary); display: grid; place-items: center;
  transition: var(--transition);
}
.help-panel__close svg { width: 17px; height: 17px; }
.help-panel__close:hover { background: var(--color-border); color: var(--color-text-heading); }

.help-panel__body { flex: 1 1 auto; overflow-y: auto; padding: 6px; }

.help-faq { border-bottom: 1px solid var(--color-border); }
.help-faq:last-child { border-bottom: none; }
.help-faq > summary {
  list-style: none; cursor: pointer; padding: 12px 12px 12px 34px; position: relative;
  font-size: 13.5px; font-weight: 600; line-height: 1.45;
  color: var(--color-text-heading); border-radius: var(--radius-sm);
  transition: background-color .15s ease;
}
.help-faq > summary::-webkit-details-marker { display: none; }
.help-faq > summary:hover { background: var(--color-bg-section); }
.help-faq > summary::before {
  content: ""; position: absolute; left: 13px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(-45deg); transition: transform .2s ease;
}
.help-faq[open] > summary::before { transform: rotate(45deg); margin-top: -3px; }
.help-faq__body {
  padding: 0 12px 14px 34px; font-size: 13px; line-height: 1.65;
  color: var(--color-text-main);
}
.help-faq__body p { margin: 0 0 10px; }
.help-faq__cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--color-success); color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: none;
  transition: var(--transition);
}
.help-faq__cta svg { width: 15px; height: 15px; }
.help-faq__cta:hover { filter: brightness(1.08); }
.help-faq__cta[href] { background: var(--color-accent); }

.help-panel__foot {
  flex: 0 0 auto; padding: 13px 16px;
  border-top: 1px solid var(--color-border); background: var(--color-bg-section);
}
.help-panel__foot p { margin: 0 0 9px; font-size: 12.5px; color: var(--color-text-secondary); }
.help-panel__foot .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.help-panel__foot .btn svg { width: 17px; height: 17px; }

/* =====================================================================
   TUMPUKAN ELEMEN MENGAMBANG DI TEPI BAWAH LAYAR
   =====================================================================
   Empat hal berebut sudut bawah layar: navigasi bawah, banner offline,
   banner "lihat sebagai", dan tombol bantuan. Menaikkan z-index tidak
   menyelesaikan apa pun di sini — yang di atas hanya MENUTUPI yang di
   bawah, dan menu pertama navigasi bawah jadi tidak bisa ditekan sama
   sekali. Maka yang diatur POSISINYA, bukan lapisannya.

   Tingginya dinyatakan sebagai variabel, lalu tiap elemen diletakkan di
   atas jumlah tinggi elemen di bawahnya. Dengan begitu urutan tumpukan
   tetap benar pada keempat kombinasi yang mungkin terjadi — ada/tidaknya
   navigasi bawah, sedang/tidak offline, sedang/tidak "lihat sebagai" —
   tanpa perlu menulis aturan untuk setiap kombinasi satu per satu.

   Nilai bawaan nol, jadi di layar lebar yang tidak memakai navigasi bawah
   perhitungannya runtuh menjadi jarak 16 px yang lama. */
:root {
  --tumpuk-nav: 0px;      /* tinggi navigasi bawah      */
  --tumpuk-offline: 0px;  /* tinggi banner offline      */
  --tumpuk-samar: 0px;    /* tinggi banner lihat-sebagai */
  --tumpuk-jarak: 16px;   /* jarak dari elemen di bawah */
}
body.has-impersonation-banner { --tumpuk-samar: 52px; }
/* :has() dipakai karena banner offline dimunculkan JS lewat kelas .show
   pada elemennya sendiri, tanpa menyentuh <body>. Peramban yang belum
   mendukungnya hanya kembali ke perilaku lama (banner saling menimpa
   sesaat saat offline), bukan rusak. */
body:has(#ui-offline-banner.show) { --tumpuk-offline: 42px; }

.impersonation-banner {
  bottom: calc(var(--tumpuk-nav) + var(--tumpuk-offline) + var(--tumpuk-jarak)
               + env(safe-area-inset-bottom, 0px));
}
.help-widget {
  bottom: calc(var(--tumpuk-nav) + var(--tumpuk-offline) + var(--tumpuk-samar)
               + var(--tumpuk-jarak) + env(safe-area-inset-bottom, 0px));
}
#ui-offline-banner {
  bottom: calc(var(--tumpuk-nav) + env(safe-area-inset-bottom, 0px));
}
.pwa-banner {
  bottom: calc(var(--tumpuk-nav) + var(--tumpuk-offline) + var(--tumpuk-samar)
               + 20px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 820px) {
  /* Tinggi navigasi bawah: padding 6+6 ditambah tinggi minimum tombol 52 px. */
  body.has-bottom-nav { --tumpuk-nav: calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* Area aman perangkat sudah termasuk di --tumpuk-nav, jangan dihitung dua kali. */
  body.has-bottom-nav .impersonation-banner,
  body.has-bottom-nav .help-widget,
  body.has-bottom-nav #ui-offline-banner,
  body.has-bottom-nav .pwa-banner { padding-bottom: revert; }
  body.has-bottom-nav #ui-offline-banner { padding-bottom: 9px; }
  /* Ruang bawah halaman menyesuaikan tinggi tumpukan agar baris terakhir
     tabel tidak tertutup apa pun. */
  body.has-bottom-nav.has-impersonation-banner { padding-bottom: 132px; }
}

@media (max-width: 480px) {
  .help-fab { width: 50px; height: 50px; }
  .help-fab svg { width: 24px; height: 24px; }
}

/* =====================================================================
   SASARAN SENTUH
   =====================================================================
   Tombol ikon berukuran 34 px nyaman diklik dengan tetikus, tetapi di
   bawah ambang yang nyaman untuk ibu jari. Pembesaran hanya diterapkan
   pada perangkat berpenunjuk kasar (layar sentuh), sehingga tabel di
   desktop tidak ikut melebar. Jarak antartombol dinaikkan bersamaan agar
   sasaran yang membesar tidak saling menimpa — itulah yang membuat orang
   menekan tombol hapus padahal bermaksud menekan tombol ubah. */
@media (pointer: coarse) {
  .icon-btn { width: 42px; height: 42px; }
  .action-btns { gap: 10px; }
  .ui-segment button { padding: 10px 16px; }
  .ui-segment--sm button { padding: 8px 13px; }
  .modal-close { min-width: 42px; min-height: 42px; }
}

/* Ikon di dalam pengalih tampilan disamakan ukurannya dengan teksnya. */
.ui-segment button { display: inline-flex; align-items: center; gap: 6px; }
.ui-segment button .ic { width: 15px; height: 15px; flex: 0 0 auto; }

/* Dialog yang difokuskan sebagai wadah (lihat UI.modal) tidak boleh
   menampilkan cincin fokus — fokusnya bersifat teknis, bukan penanda
   kendali yang siap ditekan. */
.modal[tabindex="-1"]:focus { outline: none; }

/* =====================================================================
   SASARAN SENTUH TAUTAN AJAKAN
   =====================================================================
   Tautan sebaris di dalam kalimat boleh setinggi barisnya, tetapi tautan
   yang berdiri sendiri sebagai ajakan bertindak — "Daftar di sini",
   "Kirim Email" — hanya setinggi 19-20 px. Di layar sentuh itu terlalu
   tipis untuk dijangkau ibu jari dengan pasti. Padding vertikal
   menaikkannya melewati ambang nyaman tanpa mengubah tata letak, karena
   tautannya inline-block di dalam baris teks yang sudah punya ruang. */
.auth-footer a,
.contact-card a,
.auth-body a:not(.btn) {
  display: inline-block;
  padding-block: 6px;
  min-height: 24px;
}
@media (pointer: coarse) {
  .auth-footer a,
  .contact-card a,
  .auth-body a:not(.btn) { padding-block: 11px; }
}

/* =====================================================================
   TOMBOL TUTUP DIALOG — silang merah di sudut kanan atas
   =====================================================================
   Tombolnya sebenarnya sudah ada di kepala dialog, tetapi admin.css
   memberi .modal-close aturan `font-size: 0` (dibuat untuk tombol berisi
   ikon SVG) sedangkan UI.modal mengisinya dengan karakter "×". Hasilnya
   silang itu dirender setinggi nol alias tidak pernah terlihat: pengguna
   kehilangan satu-satunya penanda "tutup" di sudut kanan atas dan hanya
   bisa menekan Esc atau menebak latar belakang bisa diklik.

   Berkas ini dimuat PALING AKHIR di seluruh halaman, jadi satu aturan di
   sini berlaku untuk semua jenis dialog — dialog aplikasi, dialog pemasangan
   PWA, kartu pemberitahuan, dan panel bantuan — tanpa perlu menyentuh
   berkas gaya per halaman dan tanpa !important. */
.modal-close,
.pwa-modal-close,
.notice-card__close,
.help-panel__close {
  flex: 0 0 auto;
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1; font-weight: 700;
  font-family: inherit;
  border-radius: 10px;
  border: 1px solid var(--badge-danger-border);
  background: var(--badge-danger-bg);
  color: var(--color-danger);
  cursor: pointer;
  transition: var(--transition);
}
/* Varian berikon: ukuran ikon disamakan, warnanya mengikuti tombol. */
.modal-close svg,
.pwa-modal-close svg,
.notice-card__close svg,
.help-panel__close svg { width: 18px; height: 18px; }

.modal-close:hover,
.pwa-modal-close:hover,
.notice-card__close:hover,
.help-panel__close:hover,
.modal-close:focus-visible,
.pwa-modal-close:focus-visible,
.notice-card__close:focus-visible,
.help-panel__close:focus-visible {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
  /* Tanpa putaran 90°: sasaran sentuh tetap diam saat jari mendekat. */
  transform: none;
}
.modal-close:focus-visible,
.pwa-modal-close:focus-visible,
.notice-card__close:focus-visible,
.help-panel__close:focus-visible { outline: 2px solid var(--color-danger); outline-offset: 2px; }

/* Kepala dialog tanpa judul: tombol tutup tetap di kanan atas, tanpa
   garis pemisah yang menggantung di atas isi yang kosong. */
.modal-header--tanpa-judul {
  justify-content: flex-end;
  border-bottom: none;
  padding-bottom: 0;
  background: transparent;
}
.modal-header--tanpa-judul h3 { display: none; }

/* Kartu pemberitahuan: tombol tutup mengambang di sudut kartu, dan judul
   diberi ruang supaya tidak pernah berada di bawah tombol. */
.notice-card { position: relative; }
.notice-card__close { position: absolute; top: 12px; right: 12px; }
.notice-card h2 { padding-right: 44px; }

/* Dialog pemasangan PWA memakai posisi absolut miliknya sendiri; hanya
   jaraknya yang disamakan dengan dialog lain. */
.pwa-modal-close { top: 12px; right: 12px; }

@media (pointer: coarse) {
  .modal-close,
  .pwa-modal-close,
  .notice-card__close,
  .help-panel__close { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-close,
  .pwa-modal-close,
  .notice-card__close,
  .help-panel__close { transition: none; }
}