/* ==========================================================================
   InfiArtt — Gaya per halaman / area
   Semua tampilan yang dulu ditulis di view (style="" dan <style>) ada di sini.
   Urutan muat: tokens.css → ui.css → style.css → pages.css (file ini).
   Halaman mandiri (KB, artikel, kartu profil, proyek, maintenance) memuat
   tokens.css → ui.css → [kb.css / kb-page.css] → pages.css.

   Aturan:
   - Warna, huruf, jarak: pakai token dari tokens.css.
   - Kelas diberi awalan area (circles-, events-, adm-…) agar tidak bentrok.
   - Aturan yang dulu hanya berlaku di satu halaman dibatasi dengan kelas
     halaman, mis. :where(.page-circles-index) …; :where() menjaga
     spesifisitas tetap sama seperti aslinya.
   - View tidak boleh menulis gaya (dijaga scripts/check_view_styles.sh).
   ========================================================================== */


/* ##########################################################################
   AREA: legal-misc
   ########################################################################## */

/* ==========================================================================
   Area: legal, halaman galat, formulir publik, Dev Center, maintenance, proyek
   Prefiks kelas: legal- err- forms- devc- maint- proj-
   Dipindahkan dari atribut style="" dan blok <style> di view (refaktor murni:
   tampilan harus tetap sama persis).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dokumen legal (legal/*.en.php dan *.id.php memakai kelas yang sama)
   -------------------------------------------------------------------------- */
.legal-page {
  padding-top: 3rem;
  padding-bottom: 4rem;
}
.legal-header {
  margin-bottom: 2.5rem;
}
.legal-title {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
}
.legal-card {
  padding: 2rem;
  line-height: 1.8;
}
.legal-h3 {
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   Halaman galat (errors/400, 403, 404)
   -------------------------------------------------------------------------- */
.err-wrap {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.err-box {
  text-align: center;
  padding: 4rem 0;
}
.err-box--narrow {
  max-width: 520px;
}
.err-code {
  font-size: 8rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 1rem;
}
.err-code--accent {
  color: var(--color-accent);
}
.err-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--color-text);
}
.err-lead {
  max-width: 400px;
}
.err-detail {
  margin-bottom: 2rem;
  text-align: left;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Formulir publik (forms/show, forms/thanks)
   -------------------------------------------------------------------------- */
.forms-page {
  margin-top: 4rem;
  padding-bottom: 5rem;
}
.forms-bar {
  background: var(--color-primary);
  height: 12px;
  width: 100%;
}
.forms-bar--success {
  background: var(--color-success);
}
.forms-body {
  padding: 3rem 2rem;
}
.forms-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--color-text);
  font-size: 2rem;
}
.forms-title--thanks {
  margin-bottom: 1rem;
}
.forms-desc {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}
.forms-login {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* .form-group dan .form-label (style.css) mengatur margin dan ukuran huruf
   sendiri; dua kelas supaya aturan ini tetap menang seperti gaya inline dulu. */
.form-group.forms-field {
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  background: var(--color-surface-2);
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
}
.form-label.forms-label {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
select.forms-select {
  appearance: auto;
}
.forms-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 3rem;
}
.btn.forms-submit {
  font-size: 1.1rem;
  padding: 0.8rem 2.5rem;
}
.forms-thanks-body {
  padding: 5rem 2rem;
}
.forms-thanks-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}
.forms-thanks-msg {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  margin-left: auto;
  margin-right: auto;
}
.forms-thanks-msg--md {
  max-width: 600px;
  text-align: left;
}
.forms-thanks-msg--sm {
  max-width: 500px;
}
.btn.forms-thanks-btn {
  padding: 0.8rem 2rem;
}

/* --------------------------------------------------------------------------
   Dev Center (devcenter/index, show, stats)
   -------------------------------------------------------------------------- */
.badge.devc-badge-xs {
  font-size: 0.7rem;
}
.devc-date {
  color: var(--color-text-dim);
  font-size: 0.8rem;
}

/* devcenter/show */
.devcenter-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}
@media (max-width: 900px) {
  .devcenter-layout { grid-template-columns: 1fr; }
}
.devc-show-title {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  line-height: 1.25;
}
.devc-dim {
  color: var(--color-text-dim);
  font-size: 0.875rem;
}
.devc-back,
.proj-back {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}
.devc-toc-aside {
  position: sticky;
  top: calc(70px + 2rem);
  align-self: start;
}
.devc-toc-heading {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}
.devc-issue-card {
  padding: 1.25rem;
  margin-top: 1rem;
}
.devc-issue-text {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}
/* Daftar isi (dibangun JS di #toc) */
.page-devc-show #toc ol { list-style: none; padding: 0; margin: 0; }
.page-devc-show #toc li { margin-bottom: 0.4rem; }
.page-devc-show #toc a { color: var(--color-text-muted); font-size: 0.85rem; text-decoration: none; display: block; padding: 0.2rem 0; border-left: 2px solid var(--color-border); padding-left: 0.75rem; transition: all 0.15s; }
.page-devc-show #toc a:hover,
.page-devc-show #toc a.toc-active { color: var(--color-primary-text); border-left-color: var(--color-primary); }
.page-devc-show #toc .toc-h3 a { padding-left: 1.5rem; font-size: 0.8rem; }

/* devcenter/stats (pembungkus .container.page-devc-stats) */
.container.page-devc-stats {
  padding-top: 2rem;
  padding-bottom: 2rem;
  max-width: 1000px;
  margin: auto;
}
.page-devc-stats .telemetry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.page-devc-stats .telemetry-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.page-devc-stats .telemetry-card h3 {
  margin-top: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.page-devc-stats .telemetry-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary-text);
  margin: 0.5rem 0;
}
.page-devc-stats .telemetry-table {
  width: 100%;
  border-collapse: collapse;
}
.page-devc-stats .telemetry-table th,
.page-devc-stats .telemetry-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.page-devc-stats .telemetry-table th {
  background: var(--color-surface-2);
  font-weight: 600;
}
.page-devc-stats .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.page-devc-stats .bar-chart-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.page-devc-stats .bar-chart-label {
  width: 150px;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* --bar-width diisi view (persentase data) */
.page-devc-stats .bar-chart-bar {
  width: var(--bar-width);
  height: 20px;
  background: var(--color-primary);
  border-radius: 4px;
  margin-right: 10px;
  transition: width 0.5s ease;
}
.page-devc-stats .bar-chart-bar.devc-bar--success {
  background: var(--color-success);
}
.page-devc-stats .bar-chart-val {
  font-size: 0.85rem;
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   Proyek: projects/show
   -------------------------------------------------------------------------- */
.proj-show-page {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.proj-cover-img {
  width: 100%;
  border-radius: 1rem;
  object-fit: cover;
  max-height: 360px;
}
.proj-cover-fallback {
  height: 200px;
  border-radius: 1rem;
  margin-bottom: 2rem;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  font-weight: 800;
  color: var(--color-text-muted);
}
.proj-show-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
.proj-show-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
}
.proj-tech-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-dim);
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   Halaman mandiri: projects/index (body.page-projects) dan
   maintenance/index (body.page-maintenance). Keduanya hanya memuat tokens.css
   dan ui.css. Cakupan memakai :where() supaya spesifisitas setiap selektor
   sama dengan aslinya di blok <style> halaman; berkas ini harus dimuat
   SESUDAH ui.css (seperti blok <style> dulu) agar urutan kaskade tetap sama.
   -------------------------------------------------------------------------- */

/* ---- projects/index ---- */
:where(html:has(> body.page-projects)),
:where(html:has(> body.page-projects)) *,
:where(html:has(> body.page-projects)) *::before,
:where(html:has(> body.page-projects)) *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root:where(:has(> body.page-projects)) {
  --bg:           var(--color-bg);
  --bg-card:      var(--color-surface);
  --bg-card-hover:var(--color-surface-2);
  --border:       var(--color-border);
  --accent:       var(--color-primary);      /* hanya border & aksen non-teks */
  --accent-text:  var(--color-primary-text);
  --accent-deep:  var(--color-primary-solid);
  --accent2-deep: var(--color-primary-solid);
  --accent2:      var(--color-primary);
  --text:         var(--color-text);
  --text-muted:   var(--color-text-muted);
  --text-dim:     var(--color-text-dim);
  --radius:       14px;
  --shadow:       var(--shadow-lg);
}

body:where(.page-projects) {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

:where(body.page-projects) .page-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--border);
  padding: 5rem 1.5rem 3.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
:where(body.page-projects) .page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}
:where(body.page-projects) .page-header__label {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--color-info-bg);
  padding: .35rem .9rem;
  border-radius: 99px;
  border: 1px solid var(--color-primary);
  margin-bottom: 1.25rem;
}
:where(body.page-projects) .page-header h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--color-text);
  margin-bottom: .75rem;
}
:where(body.page-projects) .page-header__sub {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 500px;
  margin: 0 auto;
}

:where(body.page-projects) .filter-form {
  display: flex;
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 0;
}
:where(body.page-projects) .filter-form input[type="text"],
:where(body.page-projects) .filter-form select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}
:where(body.page-projects) .filter-form input[type="text"]:focus,
:where(body.page-projects) .filter-form select:focus {
  border-color: var(--accent);
}
:where(body.page-projects) .filter-form input[type="text"] {
  flex: 1;
}
:where(body.page-projects) .filter-form button {
  background: var(--accent-deep);
  color: var(--color-primary-foreground);
  border: none;
  padding: 0 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
:where(body.page-projects) .filter-form button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

:where(body.page-projects) .projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
}

:where(body.page-projects) .project-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
:where(body.page-projects) .project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--color-primary);
}
/* Tautan pembungkus kartu: tidak membuat kotak sendiri */
.proj-card-link {
  display: contents;
  text-decoration: none;
  color: inherit;
}
/* --proj-cover-bg diisi view (warna latar per judul) */
:where(body.page-projects) .project-card__cover {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--proj-cover-bg);
}
:where(body.page-projects) .project-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
:where(body.page-projects) .project-card:hover .project-card__cover img { transform: scale(1.05); }
:where(body.page-projects) .project-card__initial {
  font-size: 4rem;
  font-weight: 800;
  color: var(--color-text-muted);
  letter-spacing: -.05em;
  user-select: none;
}
:where(body.page-projects) .project-card__status {
  position: absolute;
  top: .75rem;
  right: .75rem;
}
:where(body.page-projects) .project-card__body {
  padding: 1.2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
:where(body.page-projects) .project-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
:where(body.page-projects) .project-card__desc {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
:where(body.page-projects) .project-card__tech {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
:where(body.page-projects) .project-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.2rem;
  border-top: 1px solid var(--border);
}
:where(body.page-projects) .project-card__date {
  font-size: .78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .3rem;
}
:where(body.page-projects) .project-card__links {
  display: flex;
  align-items: center;
  gap: .5rem;
}
:where(body.page-projects) .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  text-decoration: none;
  transition: all .2s;
}
:where(body.page-projects) .icon-btn:hover {
  border-color: var(--color-primary);
  color: var(--accent-text);
  background: var(--color-info-bg);
}

:where(body.page-projects) .badge {
  display: inline-flex;
  align-items: center;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .25rem .65rem;
  border-radius: 99px;
}
:where(body.page-projects) .badge--green  { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success); }
:where(body.page-projects) .badge--amber  { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning); }
:where(body.page-projects) .badge--gray   { background: var(--color-surface-2); color: var(--color-text-muted); border: 1px solid var(--color-border); }
:where(body.page-projects) .badge--blue   { background: var(--color-surface-2); color: var(--color-secondary); border: 1px solid var(--color-secondary); }
:where(body.page-projects) .badge--tech   { background: var(--color-info-bg); color: var(--color-primary-text); border: 1px solid var(--color-primary); font-size: .68rem; text-transform: none; letter-spacing: 0; font-weight: 500; }

:where(body.page-projects) .empty-state {
  text-align: center;
  padding: 5rem 1.5rem;
  color: var(--text-muted);
}
:where(body.page-projects) .empty-state__icon { font-size: 3rem; margin-bottom: 1rem; opacity: .4; }
:where(body.page-projects) .empty-state h2 { font-size: 1.3rem; font-weight: 700; color: var(--text-dim); margin-bottom: .5rem; }

:where(body.page-projects) .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: 0 1.5rem 4rem;
  flex-wrap: wrap;
}
:where(body.page-projects) .pagination a,
:where(body.page-projects) .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;   /* SC 2.5.5: 2.4rem hanya 38.4px */
  min-height: 44px;
  padding: 0 .6rem;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  transition: all .2s;
}
:where(body.page-projects) .pagination a:hover { border-color: var(--color-primary); color: var(--text); }
:where(body.page-projects) .pagination .current {
  background: var(--accent-deep);
  border-color: transparent;
  color: var(--color-primary-foreground);
  box-shadow: var(--shadow-sm);
}
:where(body.page-projects) .pagination .disabled { opacity: .35; cursor: not-allowed; }

/* ---- maintenance/index ---- */
:where(html:has(> body.page-maintenance)),
:where(html:has(> body.page-maintenance)) *,
:where(html:has(> body.page-maintenance)) *::before,
:where(html:has(> body.page-maintenance)) *::after { box-sizing: border-box; margin: 0; padding: 0; }

html:where(:has(> body.page-maintenance)),
body:where(.page-maintenance) {
  height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

/* Lapisan latar (dulu "starfield"/grid; isinya sudah kosong). Deklarasi
   background/pointer-events lama di ::before tidak sah dan diabaikan
   peramban, jadi tidak ikut dipindahkan. */
body:where(.page-maintenance)::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
}
body:where(.page-maintenance)::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: none;
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

:where(body.page-maintenance) .page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
:where(body.page-maintenance) .logo {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-primary-text);
  letter-spacing: 0.05em;
  margin-bottom: 3rem;
  opacity: 0.8;
}
:where(body.page-maintenance) .card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 3rem;
  max-width: 680px;
  width: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
:where(body.page-maintenance) .card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--color-primary);
}
:where(body.page-maintenance) .type-icon {
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: 1.5rem;
  display: block;
}
:where(body.page-maintenance) h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}
:where(body.page-maintenance) .type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-info-bg);
  color: var(--color-primary-text);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}
:where(body.page-maintenance) .detail-text {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 2rem;
  border-left: 3px solid var(--color-primary);
  padding-left: 1rem;
  background: var(--color-info-bg);
  padding: 0.85rem 1rem;
  border-radius: 0 8px 8px 0;
}
:where(body.page-maintenance) .custom-message {
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 2rem;
  white-space: pre-wrap;
}
:where(body.page-maintenance) .countdown-section {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  text-align: center;
}
:where(body.page-maintenance) .countdown-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
:where(body.page-maintenance) .countdown-grid {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
:where(body.page-maintenance) .countdown-unit {
  min-width: 80px;
}
:where(body.page-maintenance) .countdown-value {
  font-variant-numeric: tabular-nums;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary-text);
  line-height: 1;
  display: block;
}
:where(body.page-maintenance) .countdown-name {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.35rem;
  display: block;
}
:where(body.page-maintenance) .countdown-sep {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-border);
  align-self: center;
  padding-top: 0.2rem;
}
:where(body.page-maintenance) .eta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 0.75rem;
}
:where(body.page-maintenance) .status-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-bottom: 2rem;
}
:where(body.page-maintenance) .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-warning);
  flex-shrink: 0;
}
:where(body.page-maintenance) .divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2rem 0;
}
:where(body.page-maintenance) .contact-row {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
}
:where(body.page-maintenance) .contact-row a {
  color: var(--color-primary-text);
  text-decoration: none;
}
:where(body.page-maintenance) .contact-row a:hover {
  text-decoration: underline;
}
:where(body.page-maintenance) .admin-link {
  display: block;
  text-align: center;
  margin-top: 2.5rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.2s;
}
:where(body.page-maintenance) .admin-link:hover { opacity: 1; color: var(--color-primary-text); }
:where(body.page-maintenance) .footer-text {
  margin-top: 2.5rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: center;
}
@media (max-width: 640px) {
  :where(body.page-maintenance) .card { padding: 2rem 1.5rem; }
  :where(body.page-maintenance) .countdown-value { font-size: 2rem; }
  :where(body.page-maintenance) .countdown-unit { min-width: 60px; }
}


/* ##########################################################################
   AREA: events
   ########################################################################## */

/* ==========================================================================
   Area: events, admin events, programs, certificates
   Styles moved out of the views (formerly inline style="" and <style> blocks);
   values are the former inline values, unchanged.
   Class prefixes: events-, adm-events-, programs-, cert-.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared: modals and their controls (admin attendees, certificate, event page)
   -------------------------------------------------------------------------- */

.events-modal {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.events-modal-title {
  margin: 0 0 1rem 0;
  color: var(--color-text);
  font-size: 1.3rem;
  font-weight: 800;
}

.events-modal-input {
  width: 100%;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-hover);
  color: var(--color-text);
  padding: 0.75rem;
  border-radius: 8px;
  font-size: 1rem;
}

.events-modal-cancel {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-weight: bold;
  padding: 0.75rem 1rem;
}

.events-modal-submit {
  background: var(--color-accent);
  border: none;
  color: var(--color-bg);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}

.events-modal-box {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  padding: 2.2rem;
  border-radius: 18px;
  width: 100%;
  max-width: 480px;
}

.events-modal-title-lg {
  margin: 0 0 1rem 0;
  color: var(--color-text);
  font-size: 1.4rem;
  font-weight: 800;
}

.events-modal-danger {
  background: var(--color-danger);
  border: none;
  color: var(--color-bg);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Admin: events list, form, attendees (src/Views/admin/events)
   -------------------------------------------------------------------------- */

/* compound with .container: .container (and its mobile @media rule) set max-width/margin-inline/padding-inline */
.container.adm-events-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.adm-events-title {
  color: var(--color-text);
  font-size: 1.8rem;
  font-weight: 900;
  margin: 0.3rem 0 0 0;
}

.adm-events-subtitle {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0.2rem 0 0 0;
}

.adm-events-session-close {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  padding: 0.75rem 1.4rem;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.adm-events-session-open {
  background: var(--color-success);
  color: var(--color-bg);
  border: none;
  padding: 0.75rem 1.4rem;
  border-radius: 10px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  box-shadow: var(--shadow-sm);
}

.adm-events-complete {
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  padding: 0.75rem 1.4rem;
  border-radius: 10px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  box-shadow: var(--shadow-sm);
}

.adm-events-export {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 0.75rem 1.2rem;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.adm-events-edit-link {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}

.adm-events-flash {
  background: var(--color-success-bg);
  color: var(--color-success);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--color-success);
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.adm-events-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.adm-events-stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.4rem;
}

.adm-events-stat-value {
  color: var(--color-text);
  font-size: 1.6rem;
  font-weight: 900;
  margin-top: 0.4rem;
}

.adm-events-stat-attended {
  color: var(--color-success);
  font-size: 1.6rem;
  font-weight: 900;
  margin-top: 0.4rem;
}

.adm-events-stat-rate {
  color: var(--color-accent);
  font-size: 1.6rem;
  font-weight: 900;
  margin-top: 0.4rem;
}

.adm-events-share {
  background: var(--color-info-bg);
  border: 1px solid var(--color-primary);
  border-radius: 16px;
  padding: 1.4rem;
  margin-bottom: 2rem;
}

.adm-events-share-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.adm-events-share-title {
  color: var(--color-text);
  font-size: 1.1rem;
  font-weight: 900;
  margin: 0;
}

.adm-events-regen {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}

.adm-events-share-note {
  color: var(--color-warning);
  font-size: 0.85rem;
  margin: 0 0 0.8rem;
}

.adm-events-share-body {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: center;
}

.adm-events-share-link {
  flex: 1;
  min-width: 260px;
}

.adm-events-share-label {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.adm-events-share-input {
  flex: 1;
  min-width: 0;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-hover);
  color: var(--color-text);
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  font-size: 0.85rem;
}

.adm-events-copy {
  background: var(--color-accent);
  border: none;
  color: var(--color-bg);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.adm-events-code-label {
  margin-top: 0.9rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.adm-events-code {
  color: var(--color-accent);
  font-family: monospace;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 3px;
}

.adm-events-code-hint {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  margin: 0.4rem 0 0;
}

/* QR code needs a white quiet zone in both themes (literal white on purpose) */
.adm-events-qr {
  background: #fff;
  padding: 10px;
  border-radius: 12px;
  display: inline-block;
  line-height: 0;
}

.adm-events-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.75rem;
}

.adm-events-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
}

.adm-events-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.adm-events-table-head {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.adm-events-cell {
  padding: 1rem 1.2rem;
}

.adm-events-cell-end {
  padding: 1rem 1.2rem;
  text-align: right;
}

.adm-events-cell-empty {
  padding: 3rem;
  text-align: center;
  color: var(--color-text-muted);
}

.adm-events-ticket {
  font-family: monospace;
  color: var(--color-accent);
}

.adm-events-pill-attended {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  font-weight: 800;
  font-size: 0.8rem;
}

.adm-events-pill-cancelled {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.8rem;
}

.adm-events-pill-waiting {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.8rem;
}

/* !important: inside <td>, the prose-link rule in style.css (specificity 0,2,1) would win */
.adm-events-cert-link {
  color: var(--color-accent) !important;
  font-family: monospace;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: underline !important;
}

.adm-events-row-edit {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  margin-right: 0.4rem;
}

.adm-events-row-reset {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.adm-events-row-attend {
  background: var(--color-accent);
  border: none;
  color: var(--color-bg);
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.adm-events-modal-box {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  padding: 2rem;
  border-radius: 16px;
  width: 100%;
  max-width: 460px;
}

.adm-events-modal-text {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-bottom: 1.2rem;
}

.adm-events-modal-field {
  margin-bottom: 1.2rem;
}

.container.adm-events-form-container {
  max-width: 800px;
  margin: 2.5rem auto;
  padding: 0 1rem;
}

.adm-events-form-title {
  color: var(--color-text);
  margin: 0.3rem 0 0 0;
  font-weight: 900;
  font-size: 1.8rem;
}

.adm-events-form-manage {
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 800;
  text-decoration: none;
  font-size: 0.9rem;
}

.adm-events-form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 2.2rem;
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.adm-events-input-lg {
  width: 100%;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-hover);
  color: var(--color-text);
  padding: 0.8rem;
  border-radius: 8px;
  font-size: 1rem;
}

.adm-events-textarea {
  width: 100%;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-hover);
  color: var(--color-text);
  padding: 0.8rem;
  border-radius: 8px;
  resize: vertical;
  line-height: 1.6;
  font-size: 0.95rem;
}

.adm-events-input {
  width: 100%;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-hover);
  color: var(--color-text);
  padding: 0.8rem;
  border-radius: 8px;
  font-size: 0.95rem;
}

.adm-events-hint {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  margin: 0.3rem 0 0 0;
}

.adm-events-cert-option {
  background: var(--color-info-bg);
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  padding: 1.2rem;
  margin-bottom: 2rem;
}

/* Kategori acara & pilihan template sertifikat (admin/events/form.php) */
.adm-events-cert-templates {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.2rem;
  margin: 0 0 2rem;
}
.adm-events-cert-templates legend {
  padding: 0 0.4rem;
}
/* Satu penanda tangan di formulir acara */
.adm-events-signer {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0 0;
}
/* Peran penerima sertifikat per peserta (admin/events/attendees.php) */
.adm-events-role-form {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.4rem;
}
.adm-events-role-form label {
  flex-basis: 100%;
}
.adm-events-role-select {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-hover);
  color: var(--color-text);
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  font-size: 0.85rem;
}
.adm-events-role-save {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

/* beats input[type="checkbox"] { width/height: 1.35rem } (0,1,1) */
input[type="checkbox"].adm-events-checkbox {
  width: 20px;
  height: 20px;
  accent-color: var(--color-accent);
}

.adm-events-advanced {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.adm-events-advanced-title {
  color: var(--color-text);
  font-size: 1.15rem;
  margin: 0 0 1.2rem 0;
  font-weight: 800;
}

.adm-events-select {
  width: 100%;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-hover);
  color: var(--color-text);
  padding: 0.8rem;
  border-radius: 8px;
}

.adm-events-label-sm {
  display: block;
  color: var(--color-text);
  margin-bottom: 0.4rem;
  font-weight: bold;
  font-size: 0.9rem;
}

.adm-events-input-sm {
  width: 100%;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-hover);
  color: var(--color-text);
  padding: 0.75rem;
  border-radius: 8px;
}

.adm-events-form-cancel {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
}

.adm-events-form-submit {
  background: var(--color-accent);
  border: none;
  color: var(--color-bg);
  padding: 0.8rem 1.8rem;
  border-radius: 8px;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.adm-events-danger-zone {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px dashed var(--color-danger);
}

.adm-events-delete {
  background: transparent;
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}

.adm-events-list-title {
  color: var(--color-text);
  font-size: 1.8rem;
  font-weight: 900;
  margin: 0 0 0.3rem 0;
}

.adm-events-create {
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 0.75rem 1.4rem;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  box-shadow: var(--shadow-sm);
}

.adm-events-row-title {
  color: var(--color-text);
  font-weight: 800;
  font-size: 1.05rem;
}

.adm-events-row-meta {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  margin-top: 0.2rem;
}

/* !important: inside <td>, the prose-link rule in style.css (specificity 0,2,1) would win */
.adm-events-row-link {
  color: var(--color-accent) !important;
  text-decoration: underline !important;
}

.adm-events-pill-open {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-weight: 800;
  font-size: 0.8rem;
}

.adm-events-pill-closed {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.8rem;
}

.adm-events-row-count {
  color: var(--color-success);
  font-weight: 900;
  font-size: 1rem;
}

.adm-events-row-manage {
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  font-weight: 800;
  font-size: 0.85rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.adm-events-row-edit-link {
  background: var(--color-surface-2);
  color: var(--color-text);
  padding: 0.45rem 0.8rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
}

/* Attendance-session stat: colour follows the session state */
.adm-events-stat-session {
  font-size: 1.3rem;
  font-weight: 900;
  margin-top: 0.4rem;
}
.adm-events-stat-session.is-open { color: var(--color-success); }
.adm-events-stat-session.is-closed { color: var(--color-warning); }

/* Attendee filter tabs (is-active = the current filter) */
.adm-events-tab {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  background: transparent;
  color: var(--color-text-muted);
}
.adm-events-tab--all.is-active { background: var(--color-accent); color: var(--color-bg); }
.adm-events-tab--attended.is-active { background: var(--color-success); color: var(--color-bg); }
.adm-events-tab--waiting.is-active { background: var(--color-surface-2); color: var(--color-text); }

/* --------------------------------------------------------------------------
   Certificate (src/Views/events/certificate.php)
   -------------------------------------------------------------------------- */

.cert-page {
  padding: 2rem 1rem;
  max-width: 1100px;
  margin: 0 auto;
}

.cert-flash-success {
  margin-bottom: 1.5rem;
  background: var(--color-success-bg);
  color: var(--color-success);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--color-success);
  font-weight: 700;
}

.cert-flash-error {
  margin-bottom: 1.5rem;
  background: var(--color-danger-bg);
  color: var(--color-danger);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--color-danger);
  font-weight: 700;
}

.cert-toolbar {
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.2rem;
  border-radius: 14px;
}

.cert-back {
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.cert-toolbar-title {
  color: var(--color-text);
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0.3rem 0 0 0;
}

.cert-action {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 0.7rem 1.1rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

.cert-locked {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
  padding: 0.7rem 1.1rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
}

.cert-print {
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  font-weight: 900;
  font-size: 0.95rem;
  cursor: pointer;
}

.cert-canvas {
  background: var(--color-bg);
  color: var(--color-text);
  border: 12px solid var(--color-text);
  outline: 3px solid var(--color-warning);
  padding: 3.5rem;
  border-radius: 4px;
  position: relative;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-sans);
}

.cert-watermark {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}

.cert-header {
  text-align: center;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 1.5rem;
  position: relative;
}

.cert-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
}

.cert-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cert-logo {
  height: 52px;
  width: auto;
  object-fit: contain;
}

.cert-brand-text {
  text-align: left;
}

.cert-org {
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 1.5px;
  color: var(--color-text);
}

.cert-org-sub {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cert-verified {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cert-heading {
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 4px;
  color: var(--color-primary-text);
  text-transform: uppercase;
  margin: 0;
}

.cert-credential {
  color: var(--color-text-muted);
  font-size: 1rem;
  margin: 0.5rem 0 0 0;
  letter-spacing: 1px;
}

.cert-code {
  color: var(--color-text);
  font-family: monospace;
}

.cert-body {
  text-align: center;
  padding: 2.5rem 1rem;
  position: relative;
}

.cert-presented {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin-bottom: 0.8rem;
}

.cert-recipient {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--color-text);
  margin: 0 0 1.2rem 0;
  text-decoration: underline;
  text-decoration-color: var(--color-warning);
  text-underline-offset: 8px;
}

.cert-participation {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.6;
}

.cert-event {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-primary-text);
  margin: 1rem 0;
  line-height: 1.3;
}

.cert-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 2px solid var(--color-border);
  padding-top: 1.5rem;
  position: relative;
}

/* QR code needs a white quiet zone (literal white on purpose) */
.cert-qr {
  width: 68px;
  height: 68px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 2px;
  background: #fff;
  display: block;
}

.cert-qr-caption {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
  display: block;
}

.cert-issued {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: left;
}

.cert-validity {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  word-break: break-all;
  max-width: 260px;
}

.cert-verify-url {
  color: var(--color-link);
  font-weight: 600;
}

.cert-seal {
  text-align: center;
  position: relative;
  width: 130px;
  height: 130px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cert-seal-svg {
  overflow: visible;
}

.cert-seal-ribbon {
  fill: var(--color-danger);
}

.cert-seal-gold {
  fill: var(--color-warning);
}

.cert-seal-gap {
  fill: var(--color-bg);
}

.cert-seal-ring {
  fill: var(--color-primary);
  stroke: var(--color-warning);
}

.cert-seal-ring-text {
  font-family: var(--font-sans);
  fill: var(--color-primary-foreground);
}

.cert-seal-core {
  fill: var(--color-warning);
  stroke: var(--color-bg);
}

.cert-seal-label {
  font-family: var(--font-sans);
  fill: var(--color-warning);
}

.cert-signature {
  text-align: right;
  min-width: 220px;
}

.cert-signer {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-text);
  padding-bottom: 0.35rem;
  display: inline-block;
}

.cert-community {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.cert-modal-box {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  padding: 2.2rem;
  border-radius: 18px;
  width: 100%;
  max-width: 460px;
}

.cert-modal-warning {
  color: var(--color-warning);
  font-size: 0.85rem;
  margin-bottom: 1.2rem;
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  padding: 0.8rem;
  border-radius: 8px;
  line-height: 1.5;
}

/* Print: moved from the page's <style> block, scoped to the certificate page.
   The A4-landscape page box is a named page so it only applies when printing
   this page (a bare @page rule would affect printing every page). */
@page events-cert {
  size: A4 landscape;
  margin: 0;
}
@media print {
  body:has(.page-events-cert) {
    page: events-cert;
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body:has(.page-events-cert) :is(header, nav, footer, .no-print, .admin-layout-sidebar) {
    display: none !important;
  }
  body:has(.page-events-cert) #main-content {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .page-events-cert .certificate-wrapper {
    box-shadow: none !important;
    border: 10px solid var(--color-text) !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    page-break-inside: avoid !important;
  }
}

/* --------------------------------------------------------------------------
   Sertifikat dari template (src/Views/certificates/render.php)
   Kertas A4 mendatar 297 x 210 mm. Posisi & ukuran tiap elemen datang dari
   variabel --x --y --w --h (mm) dan --fs (pt). Satuan cqw membuat 1 mm =
   100cqw/297, jadi di layar sertifikat mengikuti lebar kotaknya dan saat
   dicetak ukurannya persis A4.
   -------------------------------------------------------------------------- */
.certx-page {
  --mm: calc(100cqw / 297);
  position: relative;
  width: 100%;
  aspect-ratio: 297 / 210;
  container-type: inline-size;
  overflow: hidden;
  color: var(--color-text);
  font-family: var(--font-sans);
  box-shadow: 0 0 0 1px var(--color-border);
}
.certx-bg-white   { background: var(--color-bg); }
.certx-bg-soft    { background: var(--color-surface-2); }
.certx-bg-primary { background: var(--color-primary); }
.certx-page-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.certx-el {
  --mm: calc(100cqw / 297);
  position: absolute;
  left: calc(var(--x) * var(--mm));
  top: calc(var(--y) * var(--mm));
  width: calc(var(--w) * var(--mm));
  height: calc(var(--h) * var(--mm));
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Teks: --fs dalam poin (1 pt = 0.3528 mm) */
.certx-text {
  font-size: calc(var(--fs) * var(--fit, 1) * 0.3528 * var(--mm));
  font-weight: var(--fw);
  letter-spacing: calc(var(--tr) * 1em);
  line-height: 1.2;
  overflow-wrap: anywhere;
  font-family: inherit;
}
.certx-f-serif { font-family: 'Merriweather', Georgia, serif; }
.certx-a-left   { text-align: left; }
.certx-a-center { text-align: center; }
.certx-a-right  { text-align: right; }
.certx-italic   { font-style: italic; }
.certx-upper    { text-transform: uppercase; }
.certx-underline {
  text-decoration: underline;
  text-decoration-color: var(--color-warning);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.15em;
}
.certx-c-text    { color: var(--color-text); }
.certx-c-muted   { color: var(--color-text-muted); }
.certx-c-primary { color: var(--color-primary-text); }
.certx-c-accent  { color: var(--color-warning); }
.certx-c-success { color: var(--color-success); }
.certx-c-danger  { color: var(--color-danger); }
.certx-c-white   { color: var(--color-bg); }
.certx-line  { background: currentColor; }
.certx-frame {
  border: calc(var(--bw) * var(--mm)) solid currentColor;
}
.certx-logo,
.certx-image {
  object-fit: contain;
}
/* QR butuh latar putih agar terbaca pemindai (putih literal disengaja) */
.certx-qr {
  background: #fff;
  padding: calc(1 * var(--mm));
}
.certx-qr canvas,
.certx-qr img {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.certx-seal-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* ── Editor sertifikat (src/Views/admin/certificates/*) ───────────────────── */
.certed-grid {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  grid-template-areas: "list preview" "props props";
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 1400px) {
  .certed-grid {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(280px, 360px);
    grid-template-areas: "list preview props";
  }
}
@media (max-width: 900px) {
  .certed-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "list" "preview" "props"; }
}
.certed-elements { grid-area: list; }
.certed-preview  { grid-area: preview; }
.certed-props    { grid-area: props; }
.certed-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  background: var(--color-surface);
  min-width: 0;
}
.certed-h {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}
.certed-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0.25rem;
  max-height: 60vh;
  overflow-y: auto;
  border: 2px solid var(--color-border-hover);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.certed-list:focus-visible {
  outline: var(--focus-outline);
  box-shadow: var(--focus-halo);
}
.certed-opt {
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.95rem;
}
.certed-opt.is-selected {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  font-weight: 700;
}
.certed-canvas { margin-top: 0.75rem; }
.certed-sample {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.certed-sample legend { float: left; margin-right: 0.5rem; }
/* Penanda elemen terpilih / diangkat di pratinjau (tidak ikut tercetak: hanya di editor) */
.certed-canvas .certed-selected {
  outline: calc(0.6 * var(--mm)) dashed var(--color-primary);
  outline-offset: calc(0.4 * var(--mm));
}
.certed-canvas .certed-grabbed {
  outline: calc(0.8 * var(--mm)) solid var(--color-focus-text);
  outline-offset: calc(0.4 * var(--mm));
  box-shadow: 0 0 0 calc(1.6 * var(--mm)) var(--color-focus);
}
.certed-canvas .certed-empty-image {
  border: calc(0.4 * var(--mm)) dashed var(--color-text-muted);
}
.certed-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
}
.certed-props .certed-4 { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.certed-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  margin: 0 0 1rem;
}
.certed-fieldset legend { font-weight: 700; padding: 0 0.3rem; }
.certed-narrow { max-width: 10rem; }
.certed-help {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  background: var(--color-surface);
}
.certed-help summary { font-weight: 700; cursor: pointer; }
.certed-help li { margin-bottom: 0.35rem; }
.certed-savebar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-md);
}
/* Terapkan terkunci sampai desain dijelaskan: tetap bisa difokus agar alasannya terbaca */
#certed-save.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.certed-describe h3 {
  font-size: 1.05rem;
  margin: 1.25rem 0 0.5rem;
}
.certed-describe li { margin-bottom: 0.35rem; }
.certed-versions li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}
.certed-table th[scope="row"] { font-weight: 700; }
.certed-table .badge { margin-left: 0.5rem; }
.certed-new { max-width: 40rem; padding: 1.25rem; }

/* Banyak sertifikat dalam satu halaman (admin/events/certificates.php) */
.certx-batch-item { margin-bottom: 2.5rem; }
.certx-batch-label {
  font-size: 1rem;
  margin: 0 0 0.5rem;
}
@media print {
  .page-events-cert.certx-batch { padding: 0; max-width: none; }
  .certx-batch-item { margin: 0; break-after: page; page-break-after: always; }
  .certx-batch-item:last-child { break-after: auto; page-break-after: auto; }
  .certx-batch-label { display: none; }
}

@media print {
  body:has(.page-events-cert) .certx-page {
    width: 297mm;
    height: 210mm;
    aspect-ratio: auto;
    box-shadow: none;
    page-break-inside: avoid;
  }
  body:has(.page-events-cert) :is(#a11y-widget-container, #back-to-top) {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Check-in result (src/Views/events/checkin_result.php)
   -------------------------------------------------------------------------- */

.events-checkin-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.events-checkin-card {
  width: 100%;
  max-width: 520px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 2rem;
  text-align: center;
}

.events-checkin-message {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1.4rem;
}

.events-checkin-event {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0 0 1.4rem;
}

.events-checkin-cert {
  display: block;
  width: 100%;
  background: var(--color-success);
  color: var(--color-bg);
  padding: 0.9rem;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  margin-bottom: 0.8rem;
}

.events-checkin-note {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  background: var(--color-surface);
  padding: 0.8rem;
  border-radius: 8px;
  margin: 0 0 0.8rem;
  line-height: 1.5;
}

.events-checkin-register {
  display: block;
  width: 100%;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 0.9rem;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  margin-bottom: 0.8rem;
}

/* --checkin-color is set in the view from the result status */
.events-checkin-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--checkin-color) 13%, transparent);
  border: 2px solid var(--checkin-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  color: var(--checkin-color);
}
/* h1 prefix: beats the global :focus-visible outline (the heading is focused by script) */
h1.events-checkin-heading {
  color: var(--checkin-color);
  font-size: 1.6rem;
  font-weight: 900;
  margin: 0 0 0.6rem;
  outline: none;
}

/* --------------------------------------------------------------------------
   Events list (src/Views/events/index.php)
   -------------------------------------------------------------------------- */

.container.events-index-container {
  max-width: 1000px;
  margin: 3rem auto;
  padding: 0 1rem;
}

.events-index-title {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-text);
}

/* compound: beats .btn-primary and .btn-primary:hover (0,2,0), which the inline style used to override */
.btn.btn-primary.events-index-create {
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
}

.events-index-flash {
  background: var(--color-success-bg);
  color: var(--color-success);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  border-left: 4px solid var(--color-success);
}

.events-index-empty {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--color-surface);
  border-radius: 12px;
  border: 1px dashed var(--color-border);
}

.events-index-empty-title {
  color: var(--color-text);
  font-size: 1.25rem;
  margin: 0 0 0.5rem 0;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.events-card {
  display: block;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}

.events-card-media {
  height: 160px;
  background: var(--color-surface-raised);
  position: relative;
}

.events-card-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.events-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.events-card-date {
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.events-card-title {
  color: var(--color-text);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

/* --status-color is set in the view (upcoming / past / cancelled) */
.events-card-status {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--status-color);
  color: var(--color-bg);
  font-size: 0.75rem;
  font-weight: bold;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
}

/* Moved from the page's <style> block, scoped to this page */
.page-events-index .container a:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
}
/* The card's inline border used to override the hover border-color above; keep that */
.page-events-index .container a.events-card:hover {
  border-color: var(--color-border);
}

/* --------------------------------------------------------------------------
   Event detail (src/Views/events/show.php)
   -------------------------------------------------------------------------- */

.container.events-show-container {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 0 3rem 0;
}

.events-organizer-bar {
  background: var(--color-info-bg);
  border: 1px solid var(--color-accent);
  border-radius: 12px;
  margin: 1.5rem 1rem 0 1rem;
  padding: 1rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.events-organizer-badge {
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 800;
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  text-transform: uppercase;
  margin-right: 0.5rem;
}

.events-organizer-manage {
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 800;
  font-size: 0.9rem;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  box-shadow: var(--shadow-sm);
}

.events-organizer-edit {
  background: var(--color-surface-2);
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  text-decoration: none;
}

.events-hero {
  background: var(--color-surface-raised);
  border-radius: 0 0 24px 24px;
  overflow: hidden;
  margin-bottom: 2.5rem;
  position: relative;
  border-bottom: 1px solid var(--color-border);
}

.events-hero-cover {
  width: 100%;
  height: 320px;
  object-fit: cover;
  opacity: 0.45;
}

.events-hero-placeholder {
  width: 100%;
  height: 220px;
  background: var(--color-surface-2);
}

.events-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
}

.events-hero-status {
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.events-hero-type {
  background: var(--color-surface-2);
  color: var(--color-text);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.8rem;
}

.events-hero-cert {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.8rem;
}

.events-hero-title {
  color: var(--color-text);
  font-size: 2.6rem;
  font-weight: 900;
  margin: 0 0 0.5rem 0;
  line-height: 1.15;
  text-shadow: none;
}

.events-hero-host {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 1.05rem;
}

.events-show-flash-success {
  margin: 0 1.5rem 2rem 1.5rem;
  background: var(--color-success-bg);
  color: var(--color-success);
  padding: 1.2rem;
  border-radius: 12px;
  border: 1px solid var(--color-success);
  font-weight: 600;
  font-size: 1.05rem;
}

.events-show-flash-error {
  margin: 0 1.5rem 2rem 1.5rem;
  background: var(--color-danger-bg);
  color: var(--color-danger);
  padding: 1.2rem;
  border-radius: 12px;
  border: 1px solid var(--color-danger);
  font-weight: 600;
  font-size: 1.05rem;
}

.events-show-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  padding: 0 1.5rem;
}

.events-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.events-panel-title {
  color: var(--color-text);
  font-size: 1.5rem;
  margin-top: 0;
  margin-bottom: 1.2rem;
  font-weight: 800;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.75rem;
}

.events-description {
  color: var(--color-text);
  line-height: 1.7;
  font-size: 1.05rem;
  white-space: pre-wrap;
}

.events-resources {
  background: var(--color-info-bg);
  border: 1px solid var(--color-primary);
  border-radius: 16px;
  padding: 1.8rem;
  margin-bottom: 2rem;
}

.events-resource-materials {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-accent);
  color: var(--color-text);
  padding: 0.8rem 1.4rem;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s;
}

.events-resource-recording {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-danger);
  color: var(--color-text);
  padding: 0.8rem 1.4rem;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s;
}

.events-a11y {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.5rem;
}

.events-a11y-title {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.events-a11y-text {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

.events-sidebar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 1.8rem;
  position: sticky;
  top: 2rem;
  box-shadow: var(--shadow-sm);
}

.events-date-box {
  background: var(--color-info-bg);
  border: 1px solid var(--color-primary);
  padding: 0.8rem 1rem;
  border-radius: 14px;
  text-align: center;
  min-width: 68px;
}

.events-date-day {
  color: var(--color-accent);
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1;
}

.events-date-month {
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 0.2rem;
}

.events-date-full {
  color: var(--color-text);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}

.events-location {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.events-location-label {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.events-location-link {
  color: var(--color-accent);
  text-decoration: underline;
  word-break: break-all;
}

/* compound: beats .btn regardless of stylesheet order */
.btn.events-login-link {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 1rem;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  font-size: 1.05rem;
  box-shadow: var(--shadow-sm);
}

.events-attended {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
  border-radius: 12px;
  padding: 1.2rem;
  text-align: center;
  margin-bottom: 1rem;
}

.events-attended-title {
  color: var(--color-success);
  font-weight: 900;
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

.events-status-text {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0 0 1rem 0;
}

.events-cert-link {
  display: block;
  width: 100%;
  background: var(--color-success);
  color: var(--color-bg);
  padding: 0.9rem;
  border-radius: 10px;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s;
}

.events-cert-wait {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0.5rem 0 0 0;
  background: var(--color-surface);
  padding: 0.8rem;
  border-radius: 8px;
  line-height: 1.5;
}

.events-pass {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.2rem;
  text-align: center;
}

.events-pass-label {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.events-pass-code {
  color: var(--color-accent);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 1px;
  margin: 0.2rem 0;
}

.events-checkin {
  background: var(--color-info-bg);
  border: 2px solid var(--color-accent);
  border-radius: 14px;
  padding: 1.3rem;
  margin-bottom: 1rem;
  text-align: center;
}

.events-checkin-title {
  color: var(--color-text);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}

.events-code-label {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  text-align: left;
}

.events-code-input {
  width: 100%;
  text-align: center;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-hover);
  color: var(--color-text);
  padding: 0.8rem;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 0.8rem;
}

.events-checkin-submit {
  width: 100%;
  min-height: 52px;
  background: var(--color-accent);
  border: none;
  color: var(--color-bg);
  padding: 1rem;
  border-radius: 10px;
  font-weight: 900;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s;
}

.events-checkin-alt {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  margin: 0.8rem 0 0 0;
}

.events-waiting-title {
  color: var(--color-warning);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.events-cancel-rsvp {
  width: 100%;
  background: transparent;
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  padding: 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
}

.events-closed {
  background: var(--color-surface);
  color: var(--color-text-muted);
  text-align: center;
  padding: 1rem;
  border-radius: 10px;
  font-weight: 700;
}

.events-full {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  text-align: center;
  padding: 1rem;
  border-radius: 10px;
  font-weight: 700;
}

.events-rsvp-open {
  width: 100%;
  min-height: 50px;
  background: var(--color-accent);
  border: none;
  color: var(--color-bg);
  padding: 1rem;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 900;
  font-size: 1.1rem;
  box-shadow: var(--shadow-sm);
}

.events-phone-code {
  width: 70px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-hover);
  color: var(--color-text);
  padding: 0.75rem;
  border-radius: 8px;
  text-align: center;
}

.events-phone-number {
  flex-grow: 1;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-hover);
  color: var(--color-text);
  padding: 0.75rem;
  border-radius: 8px;
}

/* Organizer bar: attendance-session state */
.events-organizer-state { font-weight: 800; }
.events-organizer-state.is-open { color: var(--color-success); }
.events-organizer-state.is-closed { color: var(--color-warning); }

/* --------------------------------------------------------------------------
   Certificate verification (src/Views/events/verify.php)
   -------------------------------------------------------------------------- */

.events-verify-page {
  padding: 3rem 1rem;
  max-width: 760px;
  margin: 0 auto;
}

.events-verify-valid {
  background: var(--color-surface);
  border: 2px solid var(--color-success);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.events-verify-badge-valid {
  background: var(--color-success-bg);
  color: var(--color-success);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.35rem 1rem;
  border-radius: 20px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.events-verify-title {
  color: var(--color-text);
  font-size: 1.8rem;
  font-weight: 900;
  margin: 0 0 0.5rem 0;
}

.events-verify-desc {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0 0 2rem 0;
}

.events-verify-details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.5rem;
  text-align: left;
  margin-bottom: 2rem;
}

.events-verify-row {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
}

.events-verify-name {
  color: var(--color-text);
  font-size: 1.3rem;
  font-weight: 900;
  margin-top: 0.2rem;
}

.events-verify-event {
  color: var(--color-accent);
  font-size: 1.15rem;
  font-weight: 800;
  margin-top: 0.2rem;
}

.events-verify-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
}

.events-verify-code {
  color: var(--color-text);
  font-weight: 800;
  font-size: 0.95rem;
  margin-top: 0.2rem;
  font-family: monospace;
}

.events-verify-value {
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.95rem;
  margin-top: 0.2rem;
}

.events-verify-attended {
  color: var(--color-success);
  font-weight: 800;
  font-size: 0.95rem;
  margin-top: 0.2rem;
}

.events-verify-event-link {
  background: var(--color-surface-2);
  color: var(--color-text);
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--color-border);
}

.events-verify-invalid {
  background: var(--color-surface);
  border: 2px solid var(--color-danger);
  border-radius: 20px;
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.events-verify-badge-invalid {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.35rem 1rem;
  border-radius: 20px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.events-verify-invalid-desc {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0 auto 2rem auto;
  max-width: 500px;
  line-height: 1.6;
}

.events-verify-back {
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 0.8rem 1.8rem;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Programs (src/Views/programs)
   -------------------------------------------------------------------------- */

.programs-card-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container.programs-container {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.programs-header {
  margin-bottom: 3rem;
}

.programs-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.programs-subtitle {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

.programs-featured {
  margin-bottom: 4rem;
}

/* beats .card and .card:hover (0,2,0) */
article.card.programs-featured-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.programs-featured-media {
  height: 250px;
  overflow: hidden;
}

.programs-title-link {
  color: inherit;
  text-decoration: none;
}

.programs-featured-text {
  line-height: 1.6;
}

.programs-all-title {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
}

.empty-state.programs-empty {
  padding: 3rem;
  background: var(--color-surface);
  border-radius: 8px;
}

.programs-card-media {
  height: 160px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

/* compound selectors below beat the component rules (.card__body, .badge, ...) regardless of stylesheet order */
.card__body.programs-card-body {
  padding: 1.25rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.badge.programs-badge-sm {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
}

.card__title.programs-card-title {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.programs-card-text {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  flex-grow: 1;
}

.programs-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.pagination.programs-pagination {
  margin-top: 3rem;
  text-align: center;
}

.programs-detail {
  padding-top: 2rem;
  padding-bottom: 5rem;
}

.programs-detail-header {
  margin-bottom: 3rem;
  text-align: center;
}

.programs-detail-title {
  font-size: 2.8rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.programs-detail-lead {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
}

.programs-detail-figure {
  margin-bottom: 3rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.programs-detail-img {
  width: 100%;
  height: auto;
  display: block;
}

.markdown-body.programs-detail-content {
  font-size: 1.1rem;
  line-height: 1.8;
}


/* ##########################################################################
   AREA: circles
   ########################################################################## */

/* ==========================================================================
   AREA: CIRCLES — circles (circles-), admin wall (wall-adm-),
   pengumuman (ann-), hasil pencarian (search-page-)
   Gaya yang dulu inline / di blok <style> view. Nilai sama persis dengan
   gaya lama; tampilan halaman tidak berubah. Kelas yang menempel pada .btn
   atau .card ditulis majemuk (.btn.x / .card.x) supaya tetap menang atas
   .btn-primary, .card:hover, dst. seperti gaya inline dulu.
   Aturan yang dipindah dari blok <style> view dibatasi ke halamannya lewat
   :where(.page-…) — :where() tidak menambah spesifisitas, jadi urutan
   menang/kalah terhadap style.css sama seperti dulu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Warna pilihan pengguna: view hanya mengirim data lewat --swatch
   -------------------------------------------------------------------------- */
.user-swatch[style*="--swatch"] { background: var(--swatch); }
.color-option__swatch[style*="--swatch"] { background: var(--swatch); }
.circles-swatch-12 { width: 12px; height: 12px; }
.circles-swatch-24 { width: 24px; height: 24px; }
.circles-swatch-40 { width: 40px; height: 40px; }
.circles-swatch-48 { width: 48px; height: 48px; }
.circles-swatch-56 { width: 56px; height: 56px; }

/* --------------------------------------------------------------------------
   Circles: bersama
   -------------------------------------------------------------------------- */
.container.circles-page { padding-top: 6rem; padding-bottom: 4rem; }
.container.circles-page--600 { max-width: 600px; }
.container.circles-page--800 { max-width: 800px; }
.container.circles-page--900 { max-width: 900px; }

.circles-head { border-bottom: 1px solid var(--color-border); padding-bottom: 2rem; margin-bottom: 2rem; }
.circles-head-row {
    display: flex; justify-content: space-between; align-items: flex-end;
    border-bottom: 1px solid var(--color-border); padding-bottom: 2rem; margin-bottom: 2rem;
}
.circles-kbd {
    font-size: 0.65rem; background: var(--color-code-bg); border: 1px solid var(--color-border);
    padding: 0.15rem 0.3rem; border-radius: 4px; font-family: var(--font-mono);
    letter-spacing: 2px; color: var(--color-text-muted); text-transform: uppercase;
}
.circles-sub { margin: 0.5rem 0 0 0; }
.circles-sub-sm { margin: 0.25rem 0 0 0; }
.circles-rel { position: relative; }
.circles-va-middle { vertical-align: middle; }
.circles-ml-200 { margin-left: 2rem; }

/* Kartu */
.card.circles-pad-2 { padding: 2rem; }
.card.circles-border-default { border-color: var(--color-border); }
.card.circles-border-primary { border-color: var(--color-primary); }
.card.circles-border-danger { border-color: var(--color-danger); }
.card.circles-empty-card { text-align: center; padding: 4rem 2rem; }
.card.circles-span-all { grid-column: 1 / -1; }

/* Tombol */
.btn.circles-tone-win { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success); }
.btn.circles-tone-loss { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger); }
.btn.circles-cta { font-weight: bold; padding: 0.75rem 2rem; text-decoration: none; }
.btn.circles-btn-compact { font-size: 0.85rem; padding: 0.4rem 1rem; }
.btn.circles-btn-ghost { background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.btn.circles-btn-danger-solid { background: var(--color-danger); color: var(--color-bg); border: none; }
.btn.circles-btn-primary-solid { background: var(--color-primary); color: var(--color-primary-foreground); border: none; }
.btn.circles-pad-0512 { padding: 0.5rem 1.25rem; }
.btn.circles-pad-0615 { padding: 0.6rem 1.5rem; }
.btn.circles-pad-0620 { padding: 0.6rem 2rem; }
.btn.circles-pad-0715 { padding: 0.75rem 1.5rem; }
.btn.circles-filter-btn {
    background: var(--color-bg); border: 1px solid var(--color-border); padding: 0.5rem 1rem;
    color: var(--color-text); display: flex; align-items: center; gap: 0.5rem;
}

/* Menu filter (tampil/sembunyi lewat .show di JS) */
.circles-filter-menu {
    position: absolute; top: 100%; margin-top: 0.5rem;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px;
    padding: 0.5rem; width: 150px; z-index: 10; box-shadow: 0 10px 15px -3px var(--color-overlay);
}
.circles-filter-menu--left { left: 0; }
.circles-filter-menu--right { right: 0; }
.circles-filter-link { display: block; padding: 0.5rem 1rem; color: var(--color-text); text-decoration: none; border-radius: 4px; }

/* Linimasa catatan */
.circles-timeline { border-left: 2px solid var(--color-border); padding-left: 2rem; margin-left: 1rem; }
.circles-note-del { background: none; border: none; padding: 0; cursor: pointer; color: var(--color-danger); opacity: 0.7; }
.circles-note-del:hover { opacity: 1; }
.circles-note-foot {
    margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border);
    display: flex; gap: 1rem; align-items: center;
}
.circles-comment-link {
    display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-muted); text-decoration: none;
    font-size: 0.85rem; padding: 0.25rem 0.5rem; border-radius: 4px; transition: background 0.2s;
}
.circles-comment-link:hover { background: var(--color-surface); }

/* Modal konfirmasi (display diatur JS) */
.circles-modal {
    position: fixed; inset: 0; z-index: 999; align-items: center; justify-content: center;
    background: var(--color-overlay);
}
.circles-modal--z9999 { z-index: 9999; }
.circles-dialog {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px;
    padding: 2rem; max-width: 500px; width: 90%; box-shadow: var(--shadow-lg);
}
.circles-dialog--narrow { max-width: 450px; }
.circles-dialog--danger { border-color: var(--color-danger); }
.circles-dialog--relative { position: relative; }
.circles-dialog-title { margin: 0; font-size: 1.25rem; color: var(--color-text); }
.circles-dialog-actions {
    display: flex; gap: 0.75rem; justify-content: flex-end;
    border-top: 1px solid var(--color-border); padding-top: 1.25rem;
}
.circles-modal-x {
    background: none; border: none; color: var(--color-text-muted); cursor: pointer;
    font-size: 1.5rem; line-height: 1;
}
.circles-modal-x--pad { padding: 0.25rem; }
.circles-modal-corner-x {
    position: absolute; top: 1rem; right: 1rem; background: none; border: none;
    color: var(--color-text-muted); cursor: pointer;
}

/* Isian formulir */
.circles-input {
    width: 100%; padding: 0.75rem; background: var(--color-bg); border: 1px solid var(--color-border);
    color: var(--color-text); border-radius: 4px;
}
.circles-input--surface { background: var(--color-surface); }
.circles-resize-y { resize: vertical; }

/* Lencana peran */
.circles-role-badge {
    font-size: 0.7rem; background: var(--color-primary); color: var(--color-primary-foreground);
    padding: 0.15rem 0.5rem; border-radius: 4px; margin-left: 0.5rem;
}
.circles-you-badge {
    font-size: 0.7rem; background: var(--color-surface-2); color: var(--color-text-muted);
    padding: 0.15rem 0.5rem; border-radius: 4px; margin-left: 0.25rem;
}

/* --------------------------------------------------------------------------
   circles/index.php
   -------------------------------------------------------------------------- */
.circles-index-title { margin: 0; font-size: 2.5rem; color: var(--color-text); }
.circles-empty-icon { color: var(--color-text-dim); margin-bottom: 1rem; }
.card.circles-card-link { text-decoration: none; display: block; transition: transform 0.2s, box-shadow 0.2s; }
.user-chip.circles-chip-gap { margin-left: 1rem; }
.circles-card-desc {
    font-size: 0.85rem; color: var(--color-text-muted); margin: 0.75rem 0 0 0; font-style: italic;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.circles-card-joined {
    font-size: 0.8rem; margin-top: 1rem; border-top: 1px solid var(--color-border); padding-top: 0.75rem;
}
.circles-feed { margin-top: 4rem; }
.circles-feed-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    border-bottom: 1px solid var(--color-border); padding-bottom: 1rem; margin-bottom: 2rem;
    flex-wrap: wrap; gap: 1rem;
}
.circles-feed-item { position: relative; margin-bottom: 2rem; }
.circles-feed-dot {
    position: absolute; left: -2.5rem; top: 0; width: 16px; height: 16px; border-radius: 50%;
    border: 4px solid var(--color-bg);
}
.circles-feed-dot--win { background: var(--color-success); }
.circles-feed-dot--loss { background: var(--color-danger); }
.card.circles-feed-card { padding: 1.5rem; }
.circles-feed-avatar { width: 24px; height: 24px; border-radius: 50%; }
.circles-type-badge {
    display: inline-block; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.7rem;
    font-weight: bold; text-transform: uppercase; margin-bottom: 0.5rem;
}
.circles-type-badge--win { background: var(--color-success-bg); color: var(--color-success); }
.circles-type-badge--loss { background: var(--color-danger-bg); color: var(--color-danger); }
.circles-feed-body { color: var(--color-text); line-height: 1.6; font-size: 0.95rem; white-space: pre-wrap; }
.circles-create-modal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-overlay);
    z-index: 9999; padding: 2rem; overflow-y: auto;
}
.card.circles-create-card {
    max-width: 500px; margin: 2rem auto; background: var(--color-bg); padding: 2rem;
    border: 1px solid var(--color-border); position: relative;
}

/* Dulu blok <style> di circles/index.php (berlaku di seluruh halaman itu) */
:where(.page-circles-index) .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
:where(.page-circles-index) .dropdown-menu.show { display: block !important; }
:where(.page-circles-index) .dropdown-menu a:hover { background: var(--color-surface-2); }

/* --------------------------------------------------------------------------
   circles/show.php
   -------------------------------------------------------------------------- */
.circles-show-title { margin: 0.5rem 0 0 0; font-size: 2.5rem; }
.circles-show-sub { margin: 0.5rem 0 0 0; font-size: 0.9rem; letter-spacing: 0.5px; text-transform: uppercase; }
.circles-show-desc {
    margin: 1.25rem 0 0 0; font-size: 1rem; color: var(--color-text); max-width: 800px; line-height: 1.6;
    border-left: 3px solid var(--color-primary); padding-left: 1rem; background: var(--color-info-bg);
    padding: 0.75rem 1rem; border-radius: 0 8px 8px 0; font-style: italic;
}
.btn.circles-btn-invite { background: var(--color-surface-2); color: var(--color-secondary); border: 1px solid var(--color-secondary); }
.btn.circles-btn-settings {
    background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border);
    text-decoration: none; display: flex; align-items: center; gap: 0.5rem;
}
.circles-prompt-title { margin-top: 0; font-size: 1.5rem; }
.circles-members-title { margin-top: 0; font-size: 1.25rem; color: var(--color-text); margin-bottom: 1.5rem; }
.circles-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.card.circles-member-card {
    display: flex; align-items: center; gap: 1rem; padding: 1.5rem; text-decoration: none;
    transition: transform 0.2s, border-color 0.2s;
}
.card.circles-member-card:hover { border-color: var(--color-text); }
.circles-member-name {
    font-weight: 600; font-size: 1.1rem; color: var(--color-text);
    white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.circles-invite-icon { vertical-align: middle; margin-right: 0.5rem; }
.circles-invite-desc { margin-top: 0; margin-bottom: 1.25rem; font-size: 0.95rem; }
.circles-invite-input {
    flex: 1; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text);
    padding: 0.75rem 1rem; border-radius: 6px; font-size: 0.95rem; font-family: monospace;
}
.btn.circles-copy-btn {
    background: var(--color-primary); color: var(--color-primary-foreground); border: none;
    padding: 0.75rem 1.25rem; white-space: nowrap; display: flex; align-items: center; gap: 0.5rem;
}
.circles-dialog-foot-right { text-align: right; border-top: 1px solid var(--color-border); padding-top: 1.25rem; }

/* --------------------------------------------------------------------------
   circles/join.php
   -------------------------------------------------------------------------- */
.card.circles-join-card { padding: 3rem 2rem; text-align: center; }
.circles-join-form { text-align: left; margin-top: 2rem; }
.btn.circles-join-submit { width: 100%; justify-content: center; padding: 1rem; }

/* --------------------------------------------------------------------------
   circles/draft.php
   -------------------------------------------------------------------------- */
.circles-draft-title { margin: 0.5rem 0 0 0; font-size: 2.5rem; }
.circles-drafts { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 3rem; }
.circles-draft-select {
    background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border);
    padding: 0.75rem; border-radius: 4px; font-size: 1rem; width: 200px;
}
.circles-anon-label { padding: 0.75rem 0; }
.btn.circles-drop-btn { padding: 1rem 2rem; font-size: 1.1rem; font-weight: bold; }
/* Kotak draf yang dibuat JS */
.circles-draft-preview {
    color: var(--color-text-muted); font-size: 1rem; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 400px;
}
.circles-draft-remove { background: none; border: none; color: var(--color-danger); cursor: pointer; font-size: 0.9rem; }

/* Dulu blok <style> di circles/draft.php */
:where(.page-circles-draft) .draft-note {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    overflow: hidden;
    transition: all 0.2s;
}
:where(.page-circles-draft) .draft-note.win { border-left: 4px solid var(--color-success); }
:where(.page-circles-draft) .draft-note.loss { border-left: 4px solid var(--color-danger); }
:where(.page-circles-draft) .draft-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    background: var(--color-surface);
}
:where(.page-circles-draft) .draft-body {
    padding: 0 1.5rem 1.5rem 1.5rem;
    display: none;
}
:where(.page-circles-draft) .draft-note.expanded .draft-body { display: block; }
:where(.page-circles-draft) .draft-note.expanded .draft-header {
    background: transparent;
    border-bottom: 1px solid var(--color-border);
}
:where(.page-circles-draft) .draft-textarea {
    width: 100%;
    min-height: 200px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
    padding: 1rem;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    margin-top: 1rem;
}
:where(.page-circles-draft) .draft-textarea:focus {
    outline: var(--focus-outline);
    border-color: var(--color-primary);
    box-shadow: var(--focus-halo);
}

/* --------------------------------------------------------------------------
   circles/history.php
   -------------------------------------------------------------------------- */
.circles-history-title { margin: 0; font-size: 2rem; color: var(--color-text); }
.card.circles-owner-bar {
    padding: 1rem 1.5rem; margin-bottom: 1rem; display: flex; justify-content: space-between;
    align-items: center; border-color: var(--color-danger); background: var(--color-danger-bg);
}
.card.circles-filter-bar {
    padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; background: var(--color-surface);
    border-color: var(--color-border); position: relative;
}
.circles-view-select {
    background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border);
    padding: 0.5rem; border-radius: 4px; font-size: 0.9rem; cursor: pointer;
}
.circles-date-head { position: relative; margin-bottom: 2rem; margin-top: 2rem; }
.circles-date-head--collapsed { margin-bottom: 1rem; }
.circles-date-dot {
    position: absolute; left: -2.5rem; top: 1.25rem; transform: translateY(-50%);
    width: 16px; height: 16px; border-radius: 50%; background: var(--color-primary);
    border: 4px solid var(--color-bg);
}
.card.circles-acc-toggle {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border);
    cursor: pointer; text-align: left; transition: background 0.2s;
}
.circles-acc-date { margin: 0; color: var(--color-primary-text); font-size: 1.2rem; }
.circles-acc-icon { transition: transform 0.2s; }
/* display diatur JS (inline display:none saat tertutup) */
.circles-acc-body { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; }
.card.circles-note-card { padding: 1.5rem; }
.card.circles-note-card--win { border-left: 4px solid var(--color-success); }
.card.circles-note-card--loss { border-left: 4px solid var(--color-danger); }
.circles-note-head {
    display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border); padding-bottom: 0.75rem;
}
.circles-note-label { margin: 0; font-size: 1.1rem; }
.circles-privacy-badge {
    font-size: 0.75rem; color: var(--color-text-muted); background: var(--color-surface-2);
    padding: 0.25rem 0.5rem; border-radius: 4px;
}
.circles-note-body { color: var(--color-text); line-height: 1.7; font-size: 1rem; white-space: pre-wrap; }

/* Dulu blok <style> di circles/history.php */
:where(.page-circles-history) .dropdown-menu.show { display: block !important; }
:where(.page-circles-history) .dropdown-menu a:hover { background: var(--color-surface-2); }
:where(.page-circles-history) .accordion-toggle:hover { background: var(--color-surface-2) !important; }
:where(.page-circles-history) svg.rotated { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   circles/settings.php
   -------------------------------------------------------------------------- */
.circles-settings-title { margin: 0.5rem 0 0 0; font-size: 2rem; }
.circles-settings-input {
    width: 100%; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text);
    padding: 0.75rem 1rem; border-radius: 6px; font-size: 1rem; box-sizing: border-box;
}
.circles-settings-textarea {
    width: 100%; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text);
    padding: 0.75rem 1rem; border-radius: 6px; font-size: 0.95rem; box-sizing: border-box;
    resize: vertical; font-family: inherit;
}
.circles-settings-select {
    width: 100%; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text);
    padding: 0.75rem; border-radius: 6px; font-size: 1rem;
}
.circles-readonly {
    padding: 0.75rem 1rem; background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: 6px; color: var(--color-text); font-size: 1rem;
}
.circles-readonly--multi { color: var(--color-text-muted); font-size: 0.95rem; white-space: pre-wrap; }
.circles-count { font-size: 0.9rem; font-weight: normal; }
.circles-member-row {
    display: flex; align-items: center; justify-content: space-between; padding: 1rem;
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px;
}
.btn.circles-member-action {
    background: none; color: var(--color-text-muted); border: 1px solid var(--color-border);
    font-size: 0.8rem; padding: 0.35rem 0.75rem;
}
.btn.circles-member-action:hover { color: var(--color-danger); border-color: var(--color-danger); }
.btn.circles-btn-transfer {
    background: var(--color-info-bg); color: var(--color-primary-text); border: 1px solid var(--color-primary);
    padding: 0.75rem 1.5rem; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   circles/notes/show.php — dulu blok <style>; .page-circles-note ada di
   .note-container (pembungkus terluar halaman)
   -------------------------------------------------------------------------- */
.note-container:where(.page-circles-note) { max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
:where(.page-circles-note) .note-card { background: var(--color-surface); border-radius: 12px; padding: 2rem; margin-bottom: 2rem; box-shadow: var(--shadow-sm); }
:where(.page-circles-note) .note-card--win { border-left: 4px solid var(--color-success); }
:where(.page-circles-note) .note-card--loss { border-left: 4px solid var(--color-danger); }
:where(.page-circles-note) .author-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
:where(.page-circles-note) .author-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
:where(.page-circles-note) .author-info h4 { margin: 0; font-size: 1.1rem; color: var(--color-text); }
:where(.page-circles-note) .author-info span { font-size: 0.85rem; color: var(--color-text-muted); }
:where(.page-circles-note) .note-content { font-size: 1.1rem; line-height: 1.7; color: var(--color-text); white-space: pre-wrap; margin-bottom: 2rem; }

:where(.page-circles-note) .reaction-bar { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); position: relative; }
:where(.page-circles-note) .react-btn-container { position: relative; }
:where(.page-circles-note) .react-btn { background: none; border: none; color: var(--color-text-muted); font-size: 1rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.5rem 1rem; border-radius: 6px; transition: background 0.2s; }
:where(.page-circles-note) .react-btn:hover { background: var(--color-surface-2); }
:where(.page-circles-note) .react-btn.reacted { color: var(--color-primary-text); }

:where(.page-circles-note) .reaction-popover {
    position: absolute; bottom: 100%; left: 0; background: var(--color-surface-raised); border-radius: 30px; padding: 0.25rem 0.5rem; display: flex; gap: 0.5rem; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: all 0.2s; transform: translateY(10px); z-index: 10;
}
:where(.page-circles-note) .react-btn-container:hover .reaction-popover,
:where(.page-circles-note) .react-btn-container:focus-within .reaction-popover {
    opacity: 1; pointer-events: auto; transform: translateY(-5px);
}
:where(.page-circles-note) .emoji-btn { font-size: 1.5rem; background: none; border: none; cursor: pointer; transition: transform 0.2s; padding: 0.25rem; line-height: 1; }
:where(.page-circles-note) .emoji-btn:hover { transform: scale(1.3) translateY(-2px); }

:where(.page-circles-note) .comments-section { background: var(--color-surface); border-radius: 12px; padding: 2rem; box-shadow: var(--shadow-sm); }
:where(.page-circles-note) .comment-form { display: flex; gap: 1rem; margin-bottom: 2rem; }
:where(.page-circles-note) .comment-input { flex: 1; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 20px; padding: 0.75rem 1rem; color: var(--color-text); font-size: 0.95rem; }
:where(.page-circles-note) .comment-input:focus { outline: none; border-color: var(--color-primary); }
:where(.page-circles-note) .comment-submit { background: var(--color-primary); color: var(--color-primary-foreground); border: none; border-radius: 20px; padding: 0 1.5rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
:where(.page-circles-note) .comment-submit:hover { opacity: 0.9; }

:where(.page-circles-note) .comment-list { display: flex; flex-direction: column; gap: 1.5rem; }
:where(.page-circles-note) .comment-item { display: flex; gap: 1rem; }
:where(.page-circles-note) .comment-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
:where(.page-circles-note) .comment-body { flex: 1; background: var(--color-surface-2); padding: 1rem; border-radius: 12px; border-top-left-radius: 4px; }
:where(.page-circles-note) .comment-author { font-weight: 600; color: var(--color-text); margin: 0 0 0.25rem 0; font-size: 0.95rem; }
:where(.page-circles-note) .comment-text { color: var(--color-text-muted); margin: 0; font-size: 0.95rem; line-height: 1.5; white-space: pre-wrap; }
:where(.page-circles-note) .comment-actions { margin-top: 0.5rem; display: flex; gap: 1rem; align-items: center; font-size: 0.8rem; }
:where(.page-circles-note) .comment-action-btn { background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 0; font-weight: 500; }
:where(.page-circles-note) .comment-action-btn:hover { color: var(--color-text); text-decoration: underline; }
:where(.page-circles-note) .comment-action-btn.reacted { color: var(--color-primary-text); }

/* Gaya yang dulu inline di halaman catatan */
.circles-back-link { display: inline-block; margin-bottom: 1.5rem; color: var(--color-text-muted); text-decoration: none; }
/* display diatur PHP/JS (inline display:none bila belum ada reaksi) */
.circles-reaction-counts { display: flex; gap: 0.5rem; font-size: 0.9rem; color: var(--color-text-muted); margin-right: auto; align-items: center; }
.circles-reaction-pill {
    display: flex; align-items: center; background: var(--color-primary); color: var(--color-primary-foreground);
    border-radius: 10px; padding: 2px 6px; justify-content: center; font-size: 0.75rem;
}
.circles-ml-4px { margin-left: 4px; }
.circles-comments-title { margin-top: 0; margin-bottom: 1.5rem; color: var(--color-text); font-size: 1.2rem; }
.circles-login-hint { background: var(--color-surface-2); padding: 1rem; border-radius: 8px; text-align: center; margin-bottom: 2rem; }
.reaction-popover.circles-popover--comment { bottom: 100%; left: -20px; }
/* display diatur PHP/JS */
.circles-comment-count {
    display: flex; align-items: center; gap: 4px; margin-left: auto; background: var(--color-primary);
    padding: 2px 6px; border-radius: 10px; font-size: 0.75rem; color: var(--color-primary-foreground);
}

/* ==========================================================================
   admin/wall/index.php (wall-adm-)
   ========================================================================== */
.alert.wall-adm-flash { margin-bottom: 1.5rem; padding: 1rem; border-radius: 8px; }
.alert.wall-adm-flash--success { background: var(--color-success-bg); border: 1px solid var(--color-success); color: var(--color-success); }
.alert.wall-adm-flash--danger { background: var(--color-danger-bg); border: 1px solid var(--color-danger); color: var(--color-danger); }
.card.wall-adm-section {
    padding: 1.75rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px;
}
.card.wall-adm-section--spaced { margin-bottom: 2.5rem; }
.wall-adm-h2 { font-size: 1.2rem; font-weight: 700; color: var(--color-text); margin: 0 0 1rem; }
.wall-adm-msg-cell { max-width: 300px; }
.wall-adm-msg { font-size: 0.9rem; color: var(--color-text); font-style: italic; line-height: 1.4; }
.wall-adm-bank-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.wall-adm-question {
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 10px; padding: 1rem;
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
}
.wall-adm-option {
    font-size: 0.78rem; background: var(--color-surface); padding: 0.2rem 0.6rem; border-radius: 6px;
    color: var(--color-text-muted);
}
.wall-adm-dialog {
    background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border);
    border-radius: 14px; padding: 2rem; max-width: 550px; width: 90%; margin: auto;
}
.wall-adm-dialog-title { margin: 0 0 1rem; color: var(--color-text); font-size: 1.15rem; }
.wall-adm-input {
    width: 100%; background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border);
    border-radius: 8px; padding: 0.6rem;
}
.wall-adm-option-input {
    background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border);
    border-radius: 6px; padding: 0.5rem;
}

/* ==========================================================================
   announcements/index.php (ann-)
   ========================================================================== */
.ann-page { max-width: 800px; margin: 4rem auto; padding: 0 1rem; min-height: 70vh; }
.ann-title { color: var(--color-text); margin-bottom: 0.5rem; font-weight: 800; font-size: 2.5rem; text-align: center; }
.ann-lead {
    color: var(--color-text-muted); text-align: center; margin-bottom: 4rem; font-size: 1.1rem;
    max-width: 600px; margin-left: auto; margin-right: auto;
}
.ann-empty {
    background: var(--color-surface); border: 1px solid var(--color-border); padding: 4rem 2rem;
    border-radius: 16px; text-align: center;
}
.ann-empty-icon { font-size: 3rem; margin-bottom: 1rem; display: block; }
.ann-item {
    background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-secondary);
    padding: 2rem; border-radius: 12px; position: relative; overflow: hidden;
}
.ann-live {
    position: absolute; top: 1rem; right: 1rem; background: var(--color-surface-2); color: var(--color-secondary);
    padding: 0.25rem 0.75rem; border-radius: 99px; font-size: 0.75rem; font-weight: bold;
    display: flex; align-items: center; gap: 0.25rem;
}
.ann-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-secondary); box-shadow: none; }
/* Jenis pengumuman (info = bawaan di atas) */
.ann-item--success { border-left-color: var(--color-success); }
.ann-item--success .ann-live { background: var(--color-success-bg); color: var(--color-success); }
.ann-item--success .ann-live-dot { background: var(--color-success); }
.ann-item--warning { border-left-color: var(--color-warning); }
.ann-item--warning .ann-live { background: var(--color-warning-bg); color: var(--color-warning); }
.ann-item--warning .ann-live-dot { background: var(--color-warning); }
.ann-item--danger { border-left-color: var(--color-danger); }
.ann-item--danger .ann-live { background: var(--color-danger-bg); color: var(--color-danger); }
.ann-item--danger .ann-live-dot { background: var(--color-danger); }
.ann-icon { font-size: 1.5rem; margin-top: 0.1rem; }
.ann-item-title { color: var(--color-text); margin: 0 0 0.25rem 0; font-size: 1.3rem; }
.ann-body { color: var(--color-text); line-height: 1.7; margin-left: 2.5rem; }

/* ==========================================================================
   search/results.php (search-page-)
   ========================================================================== */
.container.search-page { padding-top: 5rem; padding-bottom: 5rem; }
.search-page-form { max-width: 700px; margin: 0 auto 3rem; }
.form-input.search-page-input { flex: 1; font-size: 1.125rem; padding: 1rem 1.25rem; }
.search-page-term { color: var(--color-secondary); }
.search-page-date { color: var(--color-text-dim); font-size: 0.8rem; }
.search-page-pager { margin-top: 3rem; }
.search-page-intro { text-align: center; color: var(--color-text-muted); padding: 3rem 0; }
.search-page-intro-icon { font-size: 4rem; margin-bottom: 1rem; }
.search-page-intro-title { font-size: 1.75rem; font-weight: 700; color: var(--color-text); margin-bottom: 1rem; }


/* ##########################################################################
   AREA: wall-users
   ########################################################################## */

/* ==========================================================================
   Area: Wall of Connections, profil & pengaturan pengguna, redeem, halaman statis
   View: wall/{header,footer,index,manage,quiz}.php, users/{profile,settings,
         not_found,about_card}.php, redeem/index.php, pages/show.php

   Pengganti atribut style="" dan blok <style> di view-view itu. Gaya inline
   dulu selalu menang atas aturan lain, jadi selektor di sini sengaja diberi
   lingkup induk + nama tag (mis. `.wall-page h1.wall-hero-title`) supaya
   tetap mengalahkan aturan komponen (.btn, .card, .nav-dropdown__item:hover,
   label:has(> input[type=radio]) …) tanpa !important.
   Aturan yang dipindah dari blok <style> memakai :where(lingkup) agar
   spesifisitasnya tetap sama seperti aslinya.
   ========================================================================== */


/* --------------------------------------------------------------------------
   pages/show.php — lingkup: .page-show-container
   -------------------------------------------------------------------------- */
div.page-show-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.page-show-container header.page-show-header {
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
}
.page-show-container h1.page-show-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0;
}
.page-show-container article.page-show-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text);
}

/* Dulu blok <style> di pages/show.php */
:where(.page-show-container) .page-content h1,
:where(.page-show-container) .page-content h2,
:where(.page-show-container) .page-content h3,
:where(.page-show-container) .page-content h4 {
  color: var(--color-text);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}
:where(.page-show-container) .page-content p { margin-bottom: 1.5rem; }
:where(.page-show-container) .page-content a { color: var(--color-primary-text); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
:where(.page-show-container) .page-content a:hover { border-color: var(--color-primary); }
:where(.page-show-container) .page-content ul,
:where(.page-show-container) .page-content ol { margin-bottom: 1.5rem; padding-left: 2rem; }
:where(.page-show-container) .page-content li { margin-bottom: 0.5rem; }
:where(.page-show-container) .page-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.5rem 0; }
:where(.page-show-container) .page-content blockquote { border-left: 4px solid var(--color-primary); margin: 1.5rem 0; padding: 0.5rem 0 0.5rem 1.5rem; color: var(--color-text-muted); font-style: italic; background: var(--color-info-bg); }


/* --------------------------------------------------------------------------
   redeem/index.php — lingkup: .redeem-page
   -------------------------------------------------------------------------- */
.container.redeem-page {
  padding-top: 5rem;
  padding-bottom: 5rem;
  max-width: 600px;
}
.redeem-page div.redeem-intro {
  text-align: center;
  margin-bottom: 3rem;
}
.redeem-page div.redeem-emoji {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.redeem-page h1.redeem-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}
.redeem-page form.redeem-card {
  padding: 2.5rem;
  text-align: center;
}
.redeem-page label.redeem-label-hidden {
  display: none;
}
.redeem-page input.redeem-input {
  font-size: 1.25rem;
  padding: 1rem;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: bold;
}
.redeem-page button.redeem-submit {
  width: 100%;
  justify-content: center;
  font-size: 1.1rem;
  padding: 1rem;
}


/* --------------------------------------------------------------------------
   users/not_found.php — lingkup: .users-not-found
   -------------------------------------------------------------------------- */
section.users-not-found {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 3rem 1.5rem;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.users-not-found div.users-nf-container {
  max-width: 600px;
}
.users-not-found div.users-nf-emoji {
  font-size: 4rem;
  margin-bottom: 1rem;
}
.users-not-found h1.users-nf-title {
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}
.users-not-found p.users-nf-text {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}
.users-not-found a.users-nf-btn {
  padding: 0.75rem 1.5rem;
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   wall/header.php — lingkup: .wall-nav-header
   -------------------------------------------------------------------------- */
/* Penanda palsu .nav-header/.site-footer agar BaseController tidak menyuntik
   nav & footer situs utama; hanya ada di HTML, tidak pernah tampil. */
div.wall-hidden-marker {
  display: none;
}
/* Mengalahkan .nav-header (fixed) di style.css: header Wall menempel (sticky).
   Sisa .nav-header (garis atas 4px, tinggi navbar, left/right 0) tetap berlaku. */
header.wall-nav-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0.75rem 0;
}
.wall-nav-header img.wall-hdr-logo {
  height: 36px;
  width: auto;
  border-radius: 4px;
}
.wall-nav-header span.wall-hdr-brand {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-secondary);
  letter-spacing: -0.5px;
}
.wall-nav-header div.wall-hdr-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.wall-nav-header a.wall-hdr-link {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}
.wall-nav-header a.wall-hdr-link:hover {
  color: var(--color-text);
}
.wall-nav-header a.wall-hdr-link-wall {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
}
.wall-nav-header a.wall-hdr-link-wall:hover {
  color: var(--color-primary-text);
}
.wall-nav-header div.wall-hdr-notif {
  position: relative;
}
/* Warna diubah main.js lewat el.style.color (ada/tidak ada notifikasi) */
.wall-nav-header button.wall-hdr-notif-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  position: relative;
  transition: color 0.2s;
}
/* display diatur main.js (style="display:none" di view) */
.wall-nav-header span.wall-hdr-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--color-danger);
  color: var(--color-bg);
  font-size: 0.65rem;
  font-weight: bold;
  padding: 0 4px;
  border-radius: 10px;
  border: 2px solid var(--color-surface);
  line-height: 1.2;
}
.wall-nav-header div.wall-hdr-notif-dd {
  right: -20px;
  width: 340px;
  padding: 0;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  backdrop-filter: blur(16px);
  position: absolute;
  z-index: 1000;
  top: 100%;
}
.wall-nav-header button.wall-hdr-notif-action {
  background: none;
  border: none;
  color: var(--color-primary-text);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}
.wall-nav-header button.wall-hdr-notif-clear {
  color: var(--color-danger);
}
.wall-nav-header div.wall-hdr-notif-list {
  max-height: 380px;
  overflow-y: auto;
}
.wall-nav-header div.wall-hdr-notif-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.wall-nav-header div.wall-hdr-user {
  display: flex;
  align-items: center;
  list-style: none;
  position: relative;
}
.wall-nav-header button.wall-hdr-user-btn {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--color-text);
  padding: 0.5rem;
}
.wall-nav-header img.wall-hdr-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.wall-nav-header span.wall-hdr-avatar-initial {
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-foreground);
  font-weight: bold;
  font-size: 0.85rem;
}
.wall-nav-header span.wall-hdr-user-name {
  font-weight: 600;
  font-size: 0.88rem;
}
.wall-nav-header ul.wall-hdr-user-menu {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 200px;
  z-index: 1000;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
/* Mengalahkan .nav-dropdown__item:hover (garis bawah) seperti gaya inline dulu */
.wall-nav-header a.wall-hdr-dd-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.88rem;
}
.wall-nav-header li.wall-hdr-dd-divider {
  border-top: 1px solid var(--color-border);
  margin: 0.25rem 0;
}
.wall-nav-header button.wall-hdr-dd-logout {
  background: none;
  border: none;
  color: var(--color-danger);
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
}
.wall-nav-header div.wall-hdr-auth {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-left: 1px solid var(--color-border);
  padding-left: 1rem;
}
.wall-nav-header a.wall-hdr-signin {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   wall/footer.php — lingkup: .wall-footer
   -------------------------------------------------------------------------- */
footer.wall-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  margin-top: 4rem;
  padding: 3rem 0 2.5rem;
  color: var(--color-text-muted);
}
.wall-footer span.wall-footer-brand {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.5px;
}
.wall-footer p.wall-footer-desc {
  margin: 0;
  max-width: 600px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.wall-footer div.wall-footer-powered {
  background: var(--color-info-bg);
  border: 1px solid var(--color-primary);
  padding: 0.6rem 1.25rem;
  border-radius: 99px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-primary-text);
}
.wall-footer a.wall-footer-link {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}
.wall-footer button.wall-footer-btn {
  background: none;
  border: none;
  color: var(--color-primary-text);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: inherit;
}


/* --------------------------------------------------------------------------
   Halaman isi Wall (wall/index.php, manage.php, quiz.php) — lingkup: .wall-page
   -------------------------------------------------------------------------- */
.container.wall-index {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.container.wall-manage {
  padding-top: 2.5rem;
  padding-bottom: 3rem;
  max-width: 800px;
}
.container.wall-quiz {
  padding-top: 2.5rem;
  padding-bottom: 3rem;
  max-width: 700px;
}

/* Alert (index) */
.wall-page div.wall-alert-success {
  margin-bottom: 1.5rem;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
  padding: 1rem 1.25rem;
  border-radius: 12px;
  color: var(--color-success);
  font-weight: 600;
}
.wall-page div.wall-alert-danger {
  margin-bottom: 1.5rem;
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  padding: 1rem 1.25rem;
  border-radius: 12px;
  color: var(--color-danger);
  font-weight: 600;
}

/* Hero */
.wall-page section.wall-hero {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 3rem 2rem;
  margin-bottom: 2.5rem;
  text-align: center;
}
.wall-page h1.wall-hero-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 0.75rem;
  letter-spacing: -0.5px;
}
.wall-page p.wall-hero-lead {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  max-width: 650px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}
.wall-page button.wall-hero-btn {
  padding: 0.75rem 1.5rem;
  font-weight: 700;
}
.wall-page button.wall-hero-btn-outline {
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  border-color: var(--color-primary);
}
.wall-page button.wall-hero-btn-ghost {
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Kuis milik pengguna */
.wall-page section.wall-section {
  margin-bottom: 2.5rem;
}
.wall-page div.wall-quiz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.wall-page div.wall-quiz-card {
  padding: 1.25rem;
  border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.wall-page h3.wall-quiz-card-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--color-text);
}
.wall-page p.wall-quiz-card-meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}

/* Umpan Echo */
.wall-page h2.wall-feed-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.wall-page div.wall-empty {
  padding: 4rem 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  text-align: center;
}
.wall-page h3.wall-empty-title {
  color: var(--color-text);
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}
.wall-page p.wall-empty-text {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}
.wall-page div.wall-echo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}
.wall-page article.wall-echo-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  border-radius: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform 0.2s, border-color 0.2s;
}
/* Dulu onmouseover/onmouseout di view */
.wall-page article.wall-echo-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.wall-page div.wall-echo-recipient {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary-text);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wall-page p.wall-echo-message {
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
  font-style: italic;
}
.wall-page div.wall-echo-footer {
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wall-page div.wall-echo-song {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.wall-page div.wall-echo-date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}

/* Dialog (echo, kuis, thought box, hasil) */
.wall-page dialog.wall-dialog {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2rem;
  width: 90%;
  margin: auto;
}
.wall-page dialog.wall-dialog-echo       { max-width: 550px; }
.wall-page dialog.wall-dialog-quiz       { max-width: 700px; }
.wall-page dialog.wall-dialog-thoughtbox { max-width: 650px; }
.wall-page dialog.wall-dialog-results    { max-width: 480px; }
.wall-page h2.wall-dialog-title {
  font-size: 1.3rem;
  margin: 0 0 0.5rem;
  color: var(--color-text);
}
.wall-page p.wall-dialog-intro {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  margin: 0 0 1.5rem;
}
.wall-page p.wall-dialog-step {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  margin: 0 0 1.25rem;
}
.wall-page p.wall-dialog-note {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  margin: 0;
}
.wall-page div.wall-field-lg {
  margin-bottom: 1.25rem;
}
.wall-page label.wall-field-label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 0.4rem;
}
.wall-page small.wall-field-help {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}
.wall-page textarea.wall-textarea {
  width: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.75rem;
  font-family: inherit;
}
.wall-page input.wall-input {
  width: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.6rem;
}
.wall-page input.wall-accent {
  accent-color: var(--color-primary);
}

/* Wizard kuis: daftar pertanyaan. Label berisi checkbox/radio diberi tiga
   tingkat lingkup agar mengalahkan label:has(> input[type=radio]) di style.css. */
.wall-page div.wall-q-list {
  max-height: 340px;
  overflow-y: auto;
  padding-right: 0.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.wall-page div.wall-q-item {
  background: var(--color-bg);
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid var(--color-border);
}
.wall-page .q-item-block label.wall-q-check {
  display: flex;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  cursor: pointer;
}
.wall-page .q-item-block label.wall-q-option {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-surface);
  padding: 0.4rem;
  border-radius: 6px;
  cursor: pointer;
}
/* Blok pertanyaan kustom yang dibuat addCustomQuestionBlock() */
.wall-page div.wall-q-custom {
  background: var(--color-info-bg);
  border: 1px solid var(--color-primary);
  padding: 1rem;
  border-radius: 10px;
}
.wall-page input.wall-q-custom-input {
  width: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.5rem;
  margin-bottom: 0.75rem;
}
.wall-page div.wall-q-custom-hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}
.wall-page .q-item-block label.wall-q-custom-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-surface);
  padding: 0.4rem;
  border-radius: 6px;
}
.wall-page input.wall-q-custom-opt-input {
  width: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.3rem;
}

/* wall/manage.php */
.wall-page div.wall-manage-alert-success {
  margin-bottom: 2rem;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
  padding: 1.5rem;
  border-radius: 16px;
  color: var(--color-success);
}
.wall-page h2.wall-manage-published-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: var(--color-text);
}
.wall-page p.wall-manage-published-text {
  margin: 0 0 1rem;
  color: var(--color-text);
  font-size: 0.95rem;
}
.wall-page div.wall-share-box {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  background: var(--color-bg);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
.wall-page input.wall-share-input {
  width: 100%;
  background: none;
  border: none;
  color: var(--color-primary-text);
  font-weight: 700;
  font-family: inherit;
  font-size: 0.9rem;
}
.wall-page div.wall-manage-alert-danger {
  margin-bottom: 1.5rem;
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  padding: 1rem;
  border-radius: 12px;
  color: var(--color-danger);
  font-weight: 600;
}
.wall-page div.wall-pin-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 3rem 2rem;
  text-align: center;
}
.wall-page h1.wall-pin-title {
  font-size: 1.6rem;
  color: var(--color-text);
  font-weight: 800;
  margin: 0 0 0.5rem;
}
.wall-page p.wall-pin-text {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0 0 1.75rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.wall-page form.wall-pin-form {
  max-width: 320px;
  margin: 0 auto;
}
.wall-page input.wall-pin-input {
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: 2px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.75rem;
}
.wall-page button.wall-pin-submit {
  width: 100%;
  padding: 0.75rem;
  font-weight: 700;
}
.wall-page h1.wall-responses-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 0.25rem;
}
.wall-page div.wall-manage-empty {
  padding: 3.5rem 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  text-align: center;
}
.wall-page div.wall-manage-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.wall-page h3.wall-manage-empty-title {
  color: var(--color-text);
  margin: 0 0 0.5rem;
}
.wall-page div.wall-sub-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.wall-page div.wall-sub-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.5rem;
}
.wall-page div.wall-sub-date {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}
.wall-page div.wall-score-pill {
  background: var(--color-info-bg);
  border: 1px solid var(--color-primary);
  padding: 0.4rem 0.85rem;
  border-radius: 99px;
  color: var(--color-primary-text);
  font-weight: 800;
  font-size: 0.9rem;
}
.wall-page details.wall-sub-details {
  border-top: 1px solid var(--color-border);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}
.wall-page summary.wall-sub-summary {
  cursor: pointer;
  color: var(--color-primary-text);
  font-weight: 600;
  font-size: 0.88rem;
}
.wall-page ul.wall-answer-list {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.wall-page li.wall-answer-item {
  list-style: none;
}
.wall-page div.wall-answer-open {
  background: var(--color-info-bg);
  border-left: 3px solid var(--color-primary);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  color: var(--color-text);
  font-style: italic;
}
.wall-page span.wall-answer-correct {
  color: var(--color-success);
  margin-left: 0.5rem;
}

/* wall/quiz.php */
.wall-page div.wall-result-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 3rem 2rem;
  text-align: center;
  margin-bottom: 2rem;
}
.wall-page div.wall-result-emoji {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}
.wall-page h1.wall-quiz-title {
  font-size: 1.8rem;
  color: var(--color-text);
  font-weight: 800;
  margin: 0 0 0.5rem;
}
.wall-page p.wall-result-score {
  color: var(--color-primary-text);
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 1.25rem;
}
.wall-page div.wall-result-msg {
  background: var(--color-info-bg);
  border: 1px solid var(--color-primary);
  padding: 1.25rem;
  border-radius: 12px;
  font-size: 1.05rem;
  color: var(--color-text);
  font-style: italic;
  margin-bottom: 2rem;
}
.wall-page a.wall-result-btn {
  padding: 0.75rem 1.75rem;
  font-weight: 700;
}
.wall-page div.wall-take-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  margin-bottom: 2rem;
}
.wall-page div.wall-quiz-eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary-text);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.35rem;
}
.wall-page input.wall-name-input {
  width: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.75rem;
  font-family: inherit;
  font-size: 1rem;
}
.wall-page div.wall-question-list {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-bottom: 2.5rem;
}
.wall-page div.wall-question {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.25rem;
}
.wall-page h2.wall-question-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 1rem;
}
.wall-page textarea.wall-open-answer {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  padding: 0.75rem;
  font-family: inherit;
  font-size: 0.95rem;
}
.wall-page div.wall-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.wall-page .wall-quiz-options label.wall-quiz-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--color-text);
  transition: background 0.2s, border-color 0.2s;
}
/* Dulu onmouseover/onmouseout di view */
.wall-page .wall-quiz-options label.wall-quiz-option:hover {
  border-color: var(--color-primary);
}
.wall-page input.wall-quiz-radio {
  accent-color: var(--color-primary);
  transform: scale(1.1);
}
.wall-page button.wall-quiz-submit {
  width: 100%;
  padding: 0.9rem;
  font-weight: 800;
  font-size: 1.05rem;
  border-radius: 10px;
}


/* --------------------------------------------------------------------------
   users/profile.php — lingkup: .users-profile-page (pada tiap <section>)
   -------------------------------------------------------------------------- */
section.users-profile-hero {
  background: var(--color-info-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 3rem 1.5rem;
}
.users-profile-page div.users-profile-container {
  max-width: 860px;
}
.users-profile-page img.users-avatar-img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--color-border);
}
.users-profile-page div.users-avatar-initial {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-primary-foreground);
  box-shadow: 0 0 0 4px var(--color-border);
}
.users-profile-page h1.users-profile-name {
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 0.25rem;
  color: var(--color-text);
  text-shadow: none;
  line-height: 1.2;
}
.users-profile-page span.users-va-middle {
  vertical-align: middle;
}
/* Pemisah ", " khusus pembaca layar */
.users-profile-page span.users-sr-sep {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
.users-profile-page span.users-username-chip {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  padding: 0.2rem 0.75rem;
  border-radius: 99px;
  border: 1px solid var(--color-border);
  letter-spacing: 0;
  vertical-align: middle;
  margin-left: 0.5rem;
  display: inline-block;
}
.users-profile-page span.users-webmaster-badge {
  font-size: 0.8rem;
  background: var(--color-info-bg);
  color: var(--color-primary-text);
  border: 1px solid var(--color-primary);
  border-radius: 99px;
  padding: 0.2rem 0.6rem;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 0.5rem;
  display: inline-block;
}
.users-profile-page p.users-member-since {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.users-profile-page p.users-profession {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-primary-text);
}
.users-profile-page button.users-qr-btn {
  margin-bottom: 1rem;
  border-radius: 99px;
  gap: 0.5rem;
}
.users-profile-page dialog.users-qr-dialog {
  border: none;
  border-radius: 1.5rem;
  padding: 2rem;
  background: var(--color-surface);
  color: var(--color-text);
  margin: auto;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
}
.users-profile-page div.users-qr-box {
  margin: 0 auto 1.5rem auto;
  background: #fff; /* sengaja putih di kedua tema: zona sunyi QR harus putih agar bisa dipindai */
  padding: 1rem;
  border-radius: 1rem;
  width: max-content;
}
.users-profile-page div.users-role-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
}
.users-profile-page div.users-role-name {
  font-weight: 700;
  color: var(--color-primary-text);
  font-size: 0.85rem;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}
.users-profile-page span.users-text-dim {
  color: var(--color-text-dim);
}
.users-profile-page div.users-stats {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.users-profile-page div.users-stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-text);
}
.users-profile-page div.users-stat-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
section.section.users-redeem-section {
  padding-top: 2.5rem;
  padding-bottom: 0;
}
/* Mengalahkan .card:hover (warna tepi) seperti gaya inline dulu */
.users-profile-page div.users-redeem-card {
  padding: 1.5rem;
  border-left: 4px solid var(--color-primary);
  background: var(--color-info-bg);
}
.users-profile-page form.users-redeem-form {
  display: flex;
  gap: 0.5rem;
  max-width: 400px;
}
section.section.users-section-pad {
  padding-top: 2.5rem;
}
.users-profile-page header.users-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}
.users-profile-page div.users-events-empty {
  text-align: center;
  padding: 3rem;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border-radius: 12px;
  border: 1px dashed var(--color-border);
}
.users-profile-page div.users-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}
/* Tiga tingkat: latar tetap menang atas a:focus-visible:not([class*=btn]) */
.users-profile-page .users-profile-container a.users-event-card {
  display: block;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.875rem;
  padding: 1.25rem 1.5rem;
  transition: border-color 0.2s, transform 0.2s;
}
/* Warna status acara dikirim view lewat --users-badge-color / --users-badge-bg */
.users-profile-page span.users-event-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--users-badge-color);
  background: var(--users-badge-bg);
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
}
.users-profile-page time.users-time {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.users-profile-page h3.users-event-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  color: var(--color-text);
}
.users-profile-page p.users-event-reason {
  color: var(--color-danger);
  font-size: 0.85rem;
  margin: 0.25rem 0 0 0;
}
.users-profile-page div.users-posts-empty {
  text-align: center;
  padding: 3rem;
  color: var(--color-text-muted);
}
.users-profile-page article.users-post-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.875rem;
  padding: 1.25rem 1.5rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  transition: border-color 0.2s, transform 0.2s;
}
.users-profile-page div.users-post-main {
  flex: 1;
  min-width: 0;
}
/* Warna kategori dikirim view lewat --users-cat-color */
.users-profile-page span.users-post-cat {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--users-cat-color);
  background: var(--color-surface-2);
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
}
.users-profile-page h3.users-post-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  line-height: 1.4;
}
.users-profile-page p.users-post-excerpt {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* Dulu blok <style> di users/profile.php (nama kelas hanya dipakai di sana) */
.profile-post-card:hover { border-color: var(--color-primary) !important; transform: translateY(-1px); }
.profile-post-link:hover { color: var(--color-primary-text) !important; }


/* --------------------------------------------------------------------------
   users/settings.php — lingkup: .users-settings-page
   -------------------------------------------------------------------------- */
/* Dulu blok <style> di users/settings.php */
:where(.users-settings-page) .settings-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
  align-items: start;
}
:where(.users-settings-page) .settings-sidebar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  overflow: hidden;
}
:where(.users-settings-page) .settings-tab {
  display: block;
  width: 100%;
  text-align: left;
  padding: 1rem 1.5rem;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
:where(.users-settings-page) .settings-tab:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}
:where(.users-settings-page) .settings-tab.active {
  background: var(--color-info-bg);
  border-left-color: var(--color-primary);
  color: var(--color-primary-text);
}
:where(.users-settings-page) .settings-panel {
  display: none;
}
:where(.users-settings-page) .settings-panel.active {
  display: block;
}
@media (max-width: 768px) {
  :where(.users-settings-page) .settings-layout {
    grid-template-columns: 1fr;
  }
  :where(.users-settings-page) .settings-sidebar {
    display: flex;
    overflow-x: auto;
    border-radius: 0.5rem;
  }
  :where(.users-settings-page) .settings-tab {
    border-left: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
  }
  :where(.users-settings-page) .settings-tab.active {
    border-left-color: transparent;
    border-bottom-color: var(--color-primary);
  }
}

.container.users-settings-page {
  padding-top: 2rem;
  padding-bottom: 5rem;
}
.users-settings-page h1.users-settings-title {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
}
.users-settings-page div.users-onboard-alert {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  color: var(--color-warning);
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  padding: 15px;
  flex-wrap: wrap;
  gap: 1rem;
}
.users-settings-page div.users-onboard-text {
  flex: 1;
  min-width: 260px;
}
.users-settings-page strong.users-onboard-title {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
  color: var(--color-text);
}
/* Mengalahkan .card:hover (warna tepi) seperti gaya inline dulu */
.users-settings-page div.users-danger-panel {
  padding: 2rem;
  border: 1px solid var(--color-danger);
}
.users-settings-page h3.users-settings-h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
}
.users-settings-page h3.users-settings-h3-icon {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.users-settings-page h3.users-settings-h3-danger {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-danger);
  padding-bottom: 0.5rem;
  color: var(--color-danger);
}
.users-settings-page form.users-form-gap {
  margin-bottom: 3rem;
}
.users-settings-page div.users-avatar-row {
  max-width: 600px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.users-settings-page img.users-settings-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
}
.users-settings-page input.users-file-input {
  padding: 0.5rem;
  height: auto;
}
.users-settings-page div.users-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 600px;
  margin-bottom: 1rem;
}
.users-settings-page div.users-form-row-sm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 400px;
}
.users-settings-page div.users-mw-600 {
  max-width: 600px;
}
.users-settings-page input.users-mw-400 {
  max-width: 400px;
}
.users-settings-page h4.users-settings-h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--color-text-muted);
}
.users-settings-page div.users-skills-box {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  max-width: 600px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 10px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 15px;
  background: var(--color-surface);
}
/* Tiga tingkat: mengalahkan label:has(> input[type=checkbox]) di style.css */
.users-settings-page .users-skills-box label.users-skill-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9em;
}
.users-settings-page div.users-wa-group {
  max-width: 400px;
  margin-bottom: 1.5rem;
}
.users-settings-page div.users-wa-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.users-settings-page div.users-otp-row {
  display: flex;
  gap: 8px;
}
/* display diatur JS (style="display: none" di view) */
.users-settings-page p.users-otp-msg {
  color: var(--color-success);
  font-weight: bold;
  font-size: 0.9em;
  margin-bottom: 1.5rem;
}
.users-settings-page p.users-otp-error {
  color: var(--color-danger);
  font-weight: bold;
  font-size: 0.9em;
  margin-bottom: 1.5rem;
}
.users-settings-page div.users-2fa-on {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
  padding: 1.5rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}
.users-settings-page p.users-2fa-on-text {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-left: 2.25rem;
}
.users-settings-page button.users-btn-danger-ghost {
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.users-settings-page div.users-2fa-setup {
  background: var(--color-surface-2);
  padding: 1.5rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}
.users-settings-page div.users-qr-white {
  background: #fff; /* sengaja putih di kedua tema: zona sunyi QR harus putih agar bisa dipindai */
  display: inline-block;
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
.users-settings-page p.users-2fa-secret {
  color: var(--color-text-dim);
  font-size: 0.85rem;
  font-family: var(--font-mono);
  margin-bottom: 1.5rem;
}
.users-settings-page div.users-2fa-form-row {
  display: flex;
  gap: 0.5rem;
  max-width: 300px;
}
.users-settings-page input.users-2fa-code {
  font-family: var(--font-mono);
  text-align: center;
  letter-spacing: 0.25rem;
}
.users-settings-page button.users-passkey-remove {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  padding: 0.4rem 0.8rem;
}
/* Status passkey: registerPasskey() mengganti kelas is-danger / is-success */
.users-settings-page span.users-passkey-status {
  margin-left: 1rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.users-settings-page span.users-passkey-status.is-danger {
  color: var(--color-danger);
}
.users-settings-page span.users-passkey-status.is-success {
  color: var(--color-success);
}
/* Tiga tingkat: mengalahkan .form-input:valid/:invalid:not(:placeholder-shown) */
.users-settings-page .form-group input.users-del-input {
  max-width: 400px;
  border-color: var(--color-danger);
}
.users-settings-page button.users-btn-delete {
  background: var(--color-danger);
  color: var(--color-bg);
}


/* --------------------------------------------------------------------------
   users/about_card.php — halaman mandiri (hanya tokens.css + ui.css).
   Lingkup: body.page-about-card. Dulu blok <style> di <head>; file ini harus
   dimuat SETELAH ui.css agar urutan cascade-nya sama.
   -------------------------------------------------------------------------- */
:root:has(> body.page-about-card) {
  --bg-color: var(--color-bg);
  --card-bg: var(--color-surface);
  --text-main: var(--color-text);
  --text-muted: var(--color-text-muted);
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-dark);
}
/* Dulu `*`: :where() menjaga spesifisitas nol seperti aslinya */
:where(:root:has(> body.page-about-card), :root:has(> body.page-about-card) *) { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font-sans); }

body:where(.page-about-card) {
  background: var(--color-bg);
  color: var(--text-main);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
}

:where(body.page-about-card) .card-container {
  background: var(--color-surface);
  width: 100%;
  max-width: 420px;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  position: relative;
  transform-style: preserve-3d;
}

:where(body.page-about-card) .card-header { height: 120px; background: var(--primary); position: relative; transform: translateZ(20px); }
:where(body.page-about-card) .avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--card-bg); box-shadow: var(--shadow-md); position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%) translateZ(40px); object-fit: cover; background: var(--color-surface-raised); }
:where(body.page-about-card) .card-body { padding: 4rem 2rem 2rem; text-align: center; transform: translateZ(30px); }
:where(body.page-about-card) .name { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.25rem; }
:where(body.page-about-card) .badge { display: inline-block; background: var(--color-info-bg); color: var(--color-primary-text); padding: 0.25rem 0.75rem; border-radius: 99px; font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; margin-bottom: 0.75rem; border: 1px solid var(--color-primary); }
:where(body.page-about-card) .profession { font-size: 1rem; color: var(--text-muted); margin-bottom: 1.5rem; font-weight: 500; }

:where(body.page-about-card) .section { text-align: left; margin-bottom: 1.5rem; padding: 1rem; background: var(--color-surface-2); border-radius: 1rem; }
:where(body.page-about-card) .section h4 { font-size: 0.85rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.75rem; letter-spacing: 1px; }
:where(body.page-about-card) .section p { font-size: 0.95rem; line-height: 1.5; margin-bottom: 0.5rem; }
:where(body.page-about-card) .section ul { list-style: none; padding-left: 0; }
:where(body.page-about-card) .section ul li { font-size: 0.9rem; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.5rem; }
:where(body.page-about-card) .section ul li::before { content: "•"; color: var(--color-primary-text); font-weight: bold; font-size: 1.25rem; line-height: 0; }

:where(body.page-about-card) .social-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 2rem; }
:where(body.page-about-card) .social-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.75rem; color: var(--text-main); text-decoration: none; font-size: 0.85rem; font-weight: 600; transition: all 0.2s; }
:where(body.page-about-card) .social-btn:hover { background: var(--color-surface-2); }

:where(body.page-about-card) .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem; }
:where(body.page-about-card) .actions-full { display: flex; flex-direction: column; gap: 0.75rem; }

:where(body.page-about-card) .btn { padding: 0.85rem; border-radius: 0.75rem; font-size: 0.95rem; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; border: none; transition: 0.2s; display: flex; justify-content: center; align-items: center; gap: 0.5rem; }
:where(body.page-about-card) .btn-primary { background: var(--primary); color: var(--color-primary-foreground); }
:where(body.page-about-card) .btn-primary:hover { background: var(--primary-hover); }
:where(body.page-about-card) .btn-secondary { background: var(--color-surface-2); color: var(--color-text); }
:where(body.page-about-card) .btn-secondary:hover { background: var(--color-border); }

/* Modal for QR */
:where(body.page-about-card) .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-overlay); display: none; align-items: center; justify-content: center; z-index: 100; }
:where(body.page-about-card) .modal-content { background: var(--color-surface-raised); padding: 2rem; border-radius: 1.5rem; text-align: center; color: var(--color-text); max-width: 300px; width: 90%; }
:where(body.page-about-card) #qrcode img { margin: 0 auto 1rem; border-radius: 0.5rem; }
:where(body.page-about-card) .close-modal { margin-top: 1rem; padding: 0.5rem 1.5rem; background: var(--color-surface-2); color: var(--color-text); border-radius: 99px; cursor: pointer; font-weight: 600; border: none; }

/* Penanda .nav-header palsu agar BaseController tidak menyuntik layout global */
:where(body.page-about-card) div.users-card-marker { display: none; }

/* Print fixes for PDF */
@media print {
  body:where(.page-about-card) { background: var(--color-bg); color: var(--color-text); padding: 0; }
  :where(body.page-about-card) .card-container { box-shadow: none; border: 1px solid var(--color-border); max-width: 100%; transform: none !important; background: var(--color-bg); }
  :where(body.page-about-card) .card-header,
  :where(body.page-about-card) .avatar,
  :where(body.page-about-card) .card-body { transform: none !important; }
  :where(body.page-about-card) .actions,
  :where(body.page-about-card) .actions-full { display: none !important; }
  :where(body.page-about-card) .section { background: var(--color-surface); color: var(--color-text); }
  :where(body.page-about-card) .section h4 { color: var(--color-text-muted); }
  :where(body.page-about-card) .social-btn { color: var(--color-text); border-color: var(--color-border); }
}


/* ##########################################################################
   AREA: content
   ########################################################################## */

/* ==========================================================================
   AREA: KONTEN — forum, KB (kbx-), posts, reports, software (sw-), tickets
   Gaya yang dulu inline di view. Nilai sama persis dengan atribut style=""
   lama; tampilan halaman tidak berubah.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Forum (bersama)
   -------------------------------------------------------------------------- */
.container.forum-page { padding-top: 4rem; padding-bottom: 4rem; }
.forum-title { font-size: 2rem; font-weight: 700; color: var(--color-text); margin: 0 0 0.5rem 0; }
.forum-min-w-0 { min-width: 0; }
.forum-author { color: var(--author-color); font-weight: 500; }
.forum-avatar {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    flex-shrink: 0; border: 2px solid var(--color-surface-2);
}
.badge.forum-badge-xs { font-size: 0.7rem; padding: 0.1rem 0.4rem; }

/* forum/board.php */
.badge.forum-filter { text-decoration: none; font-size: 0.875rem; padding: 0.5rem 1rem; }
.forum-list {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 1rem; overflow: hidden;
}
.forum-empty { padding: 3rem; text-align: center; color: var(--color-text-muted); }
.forum-empty-icon { font-size: 3rem; margin-bottom: 1rem; }
.forum-empty-title { margin: 0 0 0.5rem 0; color: var(--color-text); }
.forum-thread-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.5rem; text-decoration: none;
    border-bottom: 1px solid var(--color-border); transition: background 0.2s;
}
.forum-row-main { display: flex; gap: 1rem; align-items: center; flex: 1; min-width: 0; }
.forum-row-title {
    margin: 0; font-size: 1rem; color: var(--color-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.forum-row-stats {
    display: flex; gap: 1.5rem; align-items: center; color: var(--color-text-muted);
    font-size: 0.875rem; flex-shrink: 0; margin-left: 1rem;
}
:where(.page-forum-board) .thread-row:hover { background: var(--color-surface-2) !important; }
:where(.page-forum-board) .thread-row:last-child { border-bottom: none !important; }
:where(.page-forum-board) .badge--info { background: var(--color-surface-2); color: var(--color-secondary); }

/* forum/create.php, forum/thread.php */
.container.forum-page--800 { max-width: 800px; }
.forum-panel {
    background: var(--color-surface); padding: 2rem; border-radius: 1rem;
    border: 1px solid var(--color-border); box-shadow: var(--shadow-md);
}
.forum-create-title { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin: 0 0 1.5rem 0; }
.forum-flash { padding: 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem; }
.forum-flash--error { background: var(--color-danger-bg); border: 1px solid var(--color-danger); color: var(--color-danger); }
.forum-flash--success { background: var(--color-success-bg); border: 1px solid var(--color-success); color: var(--color-success); }
.form-input.forum-editor { flex: 1; resize: vertical; min-height: 250px; }
.form-input.forum-editor--reply { min-height: 150px; }
.markdown-preview-box.forum-preview--reply { min-height: 150px; }
.forum-preview-placeholder { color: var(--color-text-muted); font-style: italic; }

/* forum/index.php */
.forum-hero { text-align: center; margin-bottom: 3rem; }
.forum-index-title { font-size: 2.5rem; font-weight: 700; color: var(--color-text); margin-bottom: 1rem; }
.forum-index-desc { color: var(--color-text-muted); font-size: 1.125rem; max-width: 600px; margin: 0 auto; }
.forum-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.forum-board-card {
    display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 1rem;
    text-decoration: none; color: var(--color-text); transition: all 0.2s; box-shadow: var(--shadow-md);
}
.forum-board-icon {
    width: 48px; height: 48px; background: var(--color-surface-2); border-radius: 0.75rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.forum-cover-img { width: 100%; height: 100%; object-fit: cover; }
.forum-board-name { margin: 0 0 0.25rem 0; font-size: 1.25rem; color: var(--color-primary-text); }
.forum-board-desc { margin: 0; color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.5; }
.forum-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* forum/thread.php */
.forum-thread-card {
    background: var(--color-surface); padding: 2rem; border-radius: 1rem;
    border: 1px solid var(--color-border); margin-bottom: 2rem;
}
.forum-vote-col {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    flex-shrink: 0; min-width: 40px;
}
.forum-thread-title {
    margin: 0 0 1rem 0; font-size: 2rem; font-weight: 700; color: var(--color-text);
    word-wrap: break-word;
}
.forum-avatar-32 { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.forum-poster { font-weight: 600; color: var(--author-color); }
.badge.forum-badge-role { font-size: 0.65rem; padding: 0.1rem 0.3rem; }
.badge.forum-badge-role--spaced { margin-left: 0.25rem; }
/* Warna gelar reputasi datang dari data (--rep-*). */
.forum-rep-badge {
    display: inline-block; vertical-align: middle; font-size: 0.65rem; font-weight: 600;
    padding: 0.1rem 0.3rem; border-radius: 4px;
    background: var(--rep-bg); color: var(--rep-color); border: 1px solid var(--rep-border);
}
.forum-rep-badge--spaced { margin-left: 0.25rem; }
.forum-admin-bar {
    display: flex; gap: 0.5rem; margin-bottom: 2rem; background: var(--color-surface-2);
    padding: 0.75rem; border-radius: 0.5rem; border: 1px solid var(--color-border);
}
.btn.forum-btn-xs { padding: 0.25rem 0.75rem; font-size: 0.875rem; }
.forum-move-select {
    padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.25rem;
    border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
}
.markdown-body.forum-body { line-height: 1.6; font-size: 1rem; }
.markdown-body.forum-body--reply { font-size: 0.9375rem; }
.forum-replies-heading {
    font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem;
    padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border);
}
.reply-card.forum-reply {
    display: flex; gap: 1rem; background: var(--color-surface); padding: 1.5rem;
    border-radius: 1rem; border: 1px solid var(--reply-border); margin-bottom: 1rem;
}
.forum-accepted-mark { color: var(--color-success); font-size: 1.5rem; margin-top: 0.5rem; }
.forum-reply-author {
    margin: 0; font-weight: 700; font-size: 1.1rem; color: var(--author-color);
    display: flex; align-items: center; gap: 0.5rem;
}
.btn.forum-btn-accept {
    padding: 0.25rem 0.5rem; font-size: 0.75rem;
    border-color: var(--color-success); color: var(--color-success);
}
.forum-mb-300 { margin-bottom: 3rem; }
.forum-locked {
    background: var(--color-danger-bg); border: 1px solid var(--color-danger);
    padding: 1.5rem; border-radius: 1rem; text-align: center;
}
.forum-locked-text { color: var(--color-danger); margin: 0; font-weight: 500; }
.forum-reply-form {
    background: var(--color-surface); padding: 1.5rem; border-radius: 1rem;
    border: 1px solid var(--color-border);
}
.forum-reply-form-title { margin: 0 0 1rem 0; font-size: 1.125rem; }
.forum-join {
    background: var(--color-surface-2); border: 1px dashed var(--color-border);
    padding: 2rem; border-radius: 1rem; text-align: center;
}
.forum-join-desc { margin: 0 0 1.5rem 0; color: var(--color-text-muted); }

/* dulu <style> di forum/thread.php */
:where(.page-forum-thread) .vote-btn {
    background: transparent; border: none; color: var(--color-text-muted);
    font-size: 1.25rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem;
    line-height: 1; transition: all 0.2s;
}
:where(.page-forum-thread) .vote-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
:where(.page-forum-thread) .vote-btn--active { color: var(--color-primary-text); }
:where(.page-forum-thread) .badge--info { background: var(--color-surface-2); color: var(--color-secondary); }

/* --------------------------------------------------------------------------
   Posts
   -------------------------------------------------------------------------- */
/* dulu <style> di posts/index.php; :where() menjaga spesifisitas aslinya */
/* ── Page Header ─────────────────────────────────────── */
:where(body.page-posts-index) .page-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 5rem 1.5rem 3.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
:where(body.page-posts-index) .page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
}
:where(body.page-posts-index) .page-header__label {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-primary-text);
    background: var(--color-info-bg);
    padding: .35rem .9rem;
    border-radius: 99px;
    border: 1px solid var(--color-primary);
    margin-bottom: 1.25rem;
}
:where(body.page-posts-index) .page-header h1 {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--color-text);
    margin-bottom: .75rem;
}
:where(body.page-posts-index) .page-header__sub {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    max-width: 480px;
    margin: 0 auto;
}

/* ── Container ───────────────────────────────────────── */
:where(body.page-posts-index) .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ── Search & Filter Form ────────────────────────────── */
:where(body.page-posts-index) .filter-form {
    display: flex;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 0;
}
:where(body.page-posts-index) .filter-form input[type="text"],
:where(body.page-posts-index) .filter-form select {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}
:where(body.page-posts-index) .filter-form input[type="text"]:focus,
:where(body.page-posts-index) .filter-form select:focus {
    border-color: var(--color-primary);
}
:where(body.page-posts-index) .filter-form input[type="text"] {
    flex: 1;
}
:where(body.page-posts-index) .filter-form button {
    background: var(--color-primary);
    color: var(--color-primary-foreground);
    border: none;
    padding: 0 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
:where(body.page-posts-index) .filter-form button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* ── Posts Grid ──────────────────────────────────────── */
:where(body.page-posts-index) .posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1.5rem;
    padding: 2.5rem 1.5rem 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Post Card ───────────────────────────────────────── */
:where(body.page-posts-index) .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    text-decoration: none;
    color: inherit;
}
:where(body.page-posts-index) .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}
:where(body.page-posts-index) .card__cover {
    height: 180px;
    position: relative;
    overflow: hidden;
}
:where(body.page-posts-index) .card__cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
:where(body.page-posts-index) .card:hover .card__cover-img {
    transform: scale(1.05);
}
:where(body.page-posts-index) .card__cover-gradient {
    width: 100%;
    height: 100%;
}
:where(body.page-posts-index) .card__badge {
    position: absolute;
    top: .75rem;
    left: .75rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .3rem .75rem;
    border-radius: 99px;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
:where(body.page-posts-index) .card__body {
    padding: 1.25rem 1.25rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
:where(body.page-posts-index) .card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
:where(body.page-posts-index) .card__excerpt {
    font-size: .875rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
:where(body.page-posts-index) .card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--color-border);
    font-size: .8rem;
    color: var(--color-text-muted);
    gap: .5rem;
}
:where(body.page-posts-index) .card__author {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
    color: var(--color-text-dim);
}
:where(body.page-posts-index) .card__author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 700;
    color: var(--color-primary-foreground);
    flex-shrink: 0;
}
:where(body.page-posts-index) .card__stats {
    display: flex;
    align-items: center;
    gap: .9rem;
}
:where(body.page-posts-index) .card__stat {
    display: flex;
    align-items: center;
    gap: .3rem;
    color: var(--color-text-muted);
}
:where(body.page-posts-index) .card__stat svg {
    opacity: .7;
}

/* ── Empty State ─────────────────────────────────────── */
:where(body.page-posts-index) .empty-state {
    text-align: center;
    padding: 5rem 1.5rem;
    color: var(--color-text-muted);
}
:where(body.page-posts-index) .empty-state__icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: .4;
}
:where(body.page-posts-index) .empty-state h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text-dim);
    margin-bottom: .5rem;
}
:where(body.page-posts-index) .empty-state p {
    font-size: .9rem;
}

/* ── Pagination ──────────────────────────────────────── */
:where(body.page-posts-index) .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding: 0 1.5rem 4rem;
    flex-wrap: wrap;
}
:where(body.page-posts-index) .pagination a,
:where(body.page-posts-index) .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;   /* SC 2.5.5: 2.4rem hanya 38.4px */
    min-height: 44px;
    padding: 0 .6rem;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-dim);
    transition: all .2s ease;
}
:where(body.page-posts-index) .pagination a:hover {
    border-color: var(--color-primary);
    color: var(--color-text);
    background: var(--color-surface-2);
}
:where(body.page-posts-index) .pagination .current {
    background: var(--color-primary);
    border-color: transparent;
    color: var(--color-primary-foreground);
    box-shadow: var(--shadow-sm);
}
:where(body.page-posts-index) .pagination .disabled {
    opacity: .35;
    cursor: not-allowed;
}
.posts-cover-fill { background: var(--cover-bg); }

/* --------------------------------------------------------------------------
   Software (sw-)
   -------------------------------------------------------------------------- */
/* software/index.php */
.sw-card-cover {
    height: 140px; display: flex; align-items: center; justify-content: center;
    background: var(--color-surface-2); font-size: 3.5rem;
}
.sw-mt-300 { margin-top: 3rem; }

/* software/show.php */
.container.sw-page { padding-top: 5rem; padding-bottom: 5rem; }
.software-layout { display: grid; grid-template-columns: 1fr 340px; gap: 3rem; align-items: start; }
.software-sidebar { position: sticky; top: calc(70px + 2rem); }
/* dulu <style> di software/show.php (teksnya tersimpan di file bahasa) */
@media (max-width: 768px) {
    .software-layout { grid-template-columns: 1fr !important; }
    .software-sidebar { position: static !important; }
}
.sw-cover-img { width: 100%; border-radius: 1rem; margin-bottom: 2rem; object-fit: cover; max-height: 380px; }
.sw-cover-placeholder {
    height: 200px; border-radius: 1rem; margin-bottom: 2rem; background: var(--color-surface-2);
    display: flex; align-items: center; justify-content: center; font-size: 6rem;
}
.sw-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: var(--color-text); margin-bottom: 2rem; }
.card.sw-card-pad { padding: 2rem; }
.sw-locked-box {
    background: var(--color-info-bg); border: 1px solid var(--color-primary);
    padding: 2rem; border-radius: 1rem; text-align: center;
}
.sw-locked-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.sw-locked-title { margin-bottom: 0.5rem; font-size: 1.1rem; color: var(--color-text); }
.sw-locked-desc { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 1.25rem; }
.btn.sw-btn-block { width: 100%; justify-content: center; }
/* .btn[aria-disabled="true"] (0,2,0) juga mengatur opacity/cursor: selektor dibuat lebih spesifik */
.btn.btn--secondary.sw-btn-disabled { width: 100%; justify-content: center; opacity: 0.5; cursor: not-allowed; }
.sw-password-box {
    margin-top: 1.5rem; margin-bottom: 1rem; background: var(--color-warning-bg);
    border: 1px solid var(--color-warning); padding: 1rem; border-radius: 0.75rem;
}
.sw-password-label {
    color: var(--color-warning); display: block; margin-bottom: 0.5rem; font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.sw-password-code {
    background: var(--color-surface); border: 1px solid var(--color-border); padding: 0.5rem 0.75rem;
    border-radius: 0.5rem; color: var(--color-text); flex-grow: 1; font-size: 1.1rem;
    user-select: all; margin: 0;
}
.sw-filename { word-break: break-all; font-family: var(--font-mono); font-size: 0.8rem; }
.sw-terms { font-size: 0.8rem; color: var(--color-text-dim); margin-top: 1.5rem; line-height: 1.5; }

/* software/download.php */
.container.sw-page-narrow { padding-top: 4rem; padding-bottom: 4rem; }
.sw-dl-box {
    background: var(--color-surface); border: 1px solid var(--color-border); padding: 3rem;
    border-radius: 1rem; text-align: center; box-shadow: var(--shadow-lg);
}
.sw-dl-box--locked { border-color: var(--color-danger); }
.sw-dl-icon { font-size: 3rem; margin-bottom: 1rem; }
.sw-dl-title { color: var(--color-text); margin-bottom: 1rem; }
.sw-dl-desc { color: var(--color-text-muted); margin-bottom: 2rem; font-size: 1.1rem; line-height: 1.6; }
.btn.sw-dl-btn { display: inline-flex; min-width: 200px; justify-content: center; }
.sw-progress-track {
    width: 100%; max-width: 300px; height: 6px; background: var(--color-info-bg);
    border-radius: 3px; margin: 0 auto; overflow: hidden; position: relative;
}
.sw-progress-bar {
    position: absolute; top: 0; left: 0; bottom: 0; background: var(--color-primary);
    width: 50%; border-radius: 3px; animation: sw-progress 2.5s ease-in-out infinite;
}
/* dulu <style> di software/download.php (keyframes tersimpan di file bahasa) */
@keyframes sw-progress {
    0% { left: -50%; width: 50%; }
    50% { left: 25%; width: 50%; }
    100% { left: 100%; width: 50%; }
}
@media (prefers-reduced-motion: reduce) { .sw-progress-bar { animation: none !important; } }
.sw-dl-manual { color: var(--color-text-dim); font-size: 0.9rem; }
/* !important: aturan tautan-di-paragraf style.css (0,2,1) memberi ketebalan garis 1px;
   shorthand inline lama mengembalikannya ke auto. */
.sw-link-underline { text-decoration: underline !important; }

/* --------------------------------------------------------------------------
   Reports
   -------------------------------------------------------------------------- */
/* reports/index.php */
.container.reports-page { padding-top: 5rem; padding-bottom: 5rem; }
.reports-hero { text-align: center; max-width: 800px; margin: 0 auto 3rem; }
.reports-kicker {
    font-size: 0.85rem; font-weight: 700; color: var(--color-primary-text);
    text-transform: uppercase; letter-spacing: 1px;
}
.reports-title { font-size: 2.5rem; font-weight: 800; margin: 0.5rem 0 1rem; color: var(--color-text); }
.reports-desc { color: var(--color-text-muted); font-size: 1.05rem; line-height: 1.6; margin: 0; }
.reports-filters { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.btn.reports-pill { border-radius: 99px; padding: 0.4rem 1.25rem; }
.empty-state.reports-empty {
    padding: 4rem 2rem; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: 16px;
}
.empty-state__icon.reports-empty-icon { font-size: 3rem; margin-bottom: 1rem; }
.reports-empty-title { font-size: 1.2rem; font-weight: 700; color: var(--color-text); margin: 0 0 0.5rem; }
.reports-empty-desc { color: var(--color-text-muted); font-size: 0.9rem; margin: 0; }
.reports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.75rem; }
.card.reports-card {
    display: flex; flex-direction: column; height: 100%; border-radius: 16px;
    border: 1px solid var(--color-border); padding: 1.75rem; background: var(--color-surface);
    transition: transform 0.2s, border-color 0.2s;
}
/* dulu onmouseover/onmouseout */
.card.reports-card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.reports-type-pill {
    font-size: 0.78rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 99px;
    background: var(--color-info-bg); color: var(--color-primary-text);
}
.reports-card-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 0.75rem; line-height: 1.4; }
.reports-summary { color: var(--color-text-muted); font-size: 0.88rem; line-height: 1.6; margin: 0 0 1.25rem; flex: 1; }
.reports-metrics {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-bottom: 1.25rem;
    background: var(--color-surface-2); padding: 0.75rem; border-radius: 8px; border: 1px solid var(--color-border);
}
.reports-metric-label { font-size: 0.7rem; color: var(--color-text-muted); text-transform: uppercase; }
.reports-card-footer {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid var(--color-border); padding-top: 1rem; margin-top: auto;
}
.reports-mt-300 { margin-top: 3rem; }

/* reports/show.php */
.container.reports-page-show { padding-top: 4rem; padding-bottom: 5rem; }
.reports-article { max-width: 860px; margin: 0 auto; }
.reports-back { color: var(--color-text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; }
.reports-type-pill--lg { font-size: 0.8rem; padding: 0.3rem 0.85rem; }
.reports-show-title { font-size: 2.2rem; font-weight: 800; color: var(--color-text); margin: 0 0 1.25rem; line-height: 1.3; }
.reports-summary-box {
    background: var(--color-surface); border-left: 4px solid var(--color-primary); border-radius: 0 12px 12px 0;
    padding: 1.25rem 1.5rem; margin-bottom: 2rem; color: var(--color-text); font-size: 1rem; line-height: 1.6;
}
.reports-summary-label {
    display: block; font-size: 0.85rem; text-transform: uppercase; color: var(--color-primary-text);
    margin-bottom: 0.3rem; letter-spacing: 0.5px;
}
.reports-mb-250 { margin-bottom: 2.5rem; }
.reports-section-title {
    font-size: 1rem; text-transform: uppercase; font-weight: 700; color: var(--color-text-muted);
    margin: 0 0 1rem; letter-spacing: 0.5px;
}
.reports-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.reports-metric-card {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px;
    padding: 1.25rem; text-align: center;
}
.reports-metric-value { font-size: 1.8rem; font-weight: 800; color: var(--color-primary-text); margin-bottom: 0.2rem; }
.reports-metric-name { font-size: 0.82rem; color: var(--color-text-muted); font-weight: 600; }
.reports-pdf-banner {
    background: var(--color-success-bg); border: 1px solid var(--color-success); border-radius: 12px;
    padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;
}
.reports-pdf-icon { font-size: 1.8rem; }
.reports-pdf-desc { color: var(--color-text-muted); font-size: 0.82rem; }
.btn.reports-pdf-btn { padding: 0.6rem 1.5rem; font-weight: 600; font-size: 0.9rem; }
.markdown-body.reports-body {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px;
    padding: 2.5rem; color: var(--color-text); line-height: 1.8; font-size: 1.02rem;
}
.reports-show-footer {
    margin-top: 2.5rem; border-top: 1px solid var(--color-border); padding-top: 1.5rem;
    display: flex; justify-content: space-between; align-items: center;
    color: var(--color-text-muted); font-size: 0.88rem;
}

/* --------------------------------------------------------------------------
   Tickets
   -------------------------------------------------------------------------- */
.container.tickets-page { padding-top: 5rem; padding-bottom: 5rem; }
.tickets-title { font-size: 2rem; font-weight: 800; color: var(--color-text); }

/* tickets/index.php */
.tickets-incident-banner {
    background: var(--color-danger-bg); border: 1px solid var(--color-danger); border-radius: 12px;
    padding: 1.25rem 1.5rem; margin-bottom: 2rem; color: var(--color-text);
}
.tickets-incident-status {
    display: flex; align-items: center; gap: 0.6rem; color: var(--color-danger);
    font-weight: 700; margin-bottom: 0.4rem; font-size: 1rem;
}
.tickets-incident-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem; }
.tickets-incident-desc { font-size: 0.9rem; color: var(--color-text-muted); margin: 0; line-height: 1.6; }
.tickets-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;
}
/* .admin-table td (0,1,1) juga mengatur warna sel */
.admin-table td.tickets-id-cell { font-family: var(--font-mono); color: var(--color-text-muted); }

/* tickets/incident.php */
.card.tickets-incident-card {
    padding: 3rem 2.5rem; text-align: center; border-color: var(--color-danger);
    background: var(--color-surface); position: relative; overflow: hidden;
}
.tickets-incident-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-danger); }
.tickets-incident-icon {
    width: 80px; height: 80px; border-radius: 50%; background: var(--color-danger-bg);
    border: 2px solid var(--color-danger); display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; margin: 0 auto 1.5rem;
}
.badge.tickets-incident-badge {
    background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger);
    padding: 0.4rem 1rem; font-size: 0.8rem; font-weight: 700; margin-bottom: 1.25rem; display: inline-block;
}
.tickets-incident-h1 { font-size: 1.75rem; font-weight: 800; color: var(--color-text); margin: 0 0 1rem; }
.tickets-incident-lead {
    color: var(--color-text-muted); font-size: 0.98rem; line-height: 1.7;
    max-width: 600px; margin: 0 auto 2.5rem;
}
.btn.tickets-btn-lg { padding: 0.75rem 2rem; }

/* tickets/create.php */
.tickets-mb-250 { margin-bottom: 2.5rem; }
.card.tickets-card-pad { padding: 2.5rem; }
/* Tanpa !important: atribut hidden ([hidden] display:none !important) tetap menyembunyikannya. */
.tickets-loading {
    display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem;
    color: var(--color-text-muted); font-size: 0.875rem;
}
.spinner.tickets-spinner-16 { width: 16px; height: 16px; }
.form-input.tickets-file-input { padding: 0.5rem; }
.form-group.tickets-oath-box {
    background: var(--color-danger-bg); border: 1px solid var(--color-danger);
    padding: 1rem; border-radius: 0.5rem;
}
.tickets-oath-text { font-size: 0.9rem; line-height: 1.5; color: var(--color-text); }
/* dulu <style> di tickets/create.php */
:where(.page-tickets-create) .wizard-steps { display: flex; justify-content: space-between; margin-bottom: 2rem; position: relative; }
:where(.page-tickets-create) .wizard-steps::before { content: ''; position: absolute; top: 15px; left: 0; width: 100%; height: 2px; background: var(--color-border); z-index: 1; }
:where(.page-tickets-create) .wizard-step { position: relative; z-index: 2; background: var(--color-bg); padding: 0 1rem; text-align: center; color: var(--color-text-muted); font-weight: bold; }
:where(.page-tickets-create) .wizard-step.active { color: var(--color-primary-text); }
:where(.page-tickets-create) .wizard-step-circle { width: 32px; height: 32px; border-radius: 50%; background: var(--color-bg-alt); border: 2px solid var(--color-border); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem; }
:where(.page-tickets-create) .wizard-step.active .wizard-step-circle { border-color: var(--color-primary); background: var(--color-info-bg); }
:where(.page-tickets-create) .wizard-step.completed .wizard-step-circle { background: var(--color-primary); color: var(--color-primary-foreground); border-color: var(--color-primary); }
:where(.page-tickets-create) .step-pane { display: none; }
:where(.page-tickets-create) .step-pane.active { display: block; }

/* tickets/show.php */
.card.tickets-card-head { padding: 2rem; margin-bottom: 2rem; }
.tickets-show-title { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.25rem; }
.tickets-show-id { color: var(--color-text-muted); font-size: 1.2rem; font-weight: normal; }
.tickets-report-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.tickets-section-label {
    font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--color-text-dim); margin-bottom: 0.75rem;
}
.tickets-report-body {
    background: var(--color-surface-2); border-radius: 0.75rem; padding: 1.25rem; color: var(--color-text);
    line-height: 1.7; white-space: pre-wrap; word-break: break-word;
}
.tickets-attach-title { font-size: 0.875rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 0.5rem; }
.tickets-attach-img { max-width: 100%; max-height: 400px; border-radius: 0.5rem; border: 1px solid var(--color-border); }
.tickets-attach-video { max-width: 100%; max-height: 400px; border-radius: 0.5rem; background: var(--color-surface-2); }
.tickets-thread-title {
    font-size: 1rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 1rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.badge.tickets-badge-xs { font-size: 0.65rem; vertical-align: middle; }
.ticket-message__body.tickets-prewrap { white-space: pre-wrap; word-break: break-word; }
.tickets-closed {
    background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 0.75rem;
    padding: 1.5rem; text-align: center; margin-top: 2rem;
}
.tickets-closed-text { color: var(--color-text-muted); margin: 0 0 1rem; }
.tickets-rating-card {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px;
    padding: 1.25rem; margin-top: 1rem;
}
.tickets-rating-label { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 0.4rem; }
.tickets-rating-stars { font-size: 1.5rem; color: var(--color-warning); margin-bottom: 0.4rem; }
.tickets-rating-feedback {
    font-size: 0.9rem; color: var(--color-text); font-style: italic;
    margin: 0.5rem 0 0; word-break: break-word;
}
.tickets-rate-form {
    background: var(--color-surface); border: 1px dashed var(--color-primary); border-radius: 12px;
    padding: 1.5rem; margin-top: 1rem; text-align: left;
}
.tickets-rate-title { margin: 0 0 0.3rem; font-size: 1.1rem; color: var(--color-text); }
.tickets-rate-desc { margin: 0 0 1.25rem; font-size: 0.88rem; color: var(--color-text-muted); }
.tickets-star-row { display: flex; gap: 0.5rem; font-size: 2rem; cursor: pointer; }
.tickets-star-input { display: none; }
.tickets-star { color: var(--color-warning); transition: transform 0.15s; }
.tickets-star--dim { opacity: 0.4; } /* dipasang oleh updateStarRating() */
.tickets-mb-125 { margin-bottom: 1.25rem; }
.form-textarea.tickets-feedback { width: 100%; box-sizing: border-box; border-radius: 8px; }
.btn.tickets-rate-btn { padding: 0.6rem 1.5rem; font-weight: 600; font-size: 0.9rem; }
.card.tickets-reply-card { padding: 2rem; margin-top: 2rem; }
.tickets-reply-title { font-size: 1.125rem; font-weight: 600; color: var(--color-text); margin-bottom: 1.5rem; }
.form-textarea.tickets-editor { flex: 1; resize: vertical; min-height: 150px; }
.markdown-preview-box.tickets-preview { min-height: 150px; }
.tickets-preview-placeholder { color: var(--color-text-muted); font-style: italic; }

/* --------------------------------------------------------------------------
   KB (kbx-) — halaman mandiri kb/contribute.php, kb/history.php, kb/layout.php
   (.kb-* milik kb.css / kb-page.css)
   -------------------------------------------------------------------------- */
.kbx-link-dim { color: var(--kb-text-dim); text-decoration: none; }

/* kb/history.php */
.kbx-history-title { margin-top: 0; font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; }
.kbx-history-desc { color: var(--kb-text-dim); margin-bottom: 2rem; }
.kbx-history-empty {
    text-align: center; color: var(--kb-text-dim); padding: 3rem 0;
    border: 1px dashed var(--kb-border); border-radius: 8px;
}
.kbx-rev-title { margin: 0 0 0.25rem 0; font-size: 1.1rem; }
.kbx-meta-dim { color: var(--kb-text-dim); font-size: 0.9rem; }

/* kb/contribute.php */
.col.kbx-col-2 { flex: 2; }
.kbx-folder-toggle {
    display: flex; align-items: center; gap: 0.5rem; font-weight: 600;
    cursor: pointer; color: var(--kb-accent);
}
.form-control.kbx-status-select { margin: 0; padding: 0.5rem; width: auto; }
.kbx-point-fields { flex-grow: 1; display: flex; flex-direction: column; gap: 0.5rem; }

/* kb/layout.php — parseTipis() */
/* !important: .markdown-body a (kb.css, 0,1,1) memberi text-decoration-color transparan;
   shorthand inline lama mengembalikan garis bawah yang terlihat. */
.kbx-tipis-link { color: var(--kb-accent); text-decoration: underline !important; }
.kbx-tipis-list {
    list-style: none; padding: 0; margin: 0.35rem 0 0.5rem 0;
    display: flex; flex-direction: column; gap: 0.45rem;
}
.kbx-tipis-item {
    display: flex; gap: 0.5rem; align-items: flex-start; line-height: 1.5;
    color: var(--kb-text-dim); font-weight: 500;
}
.kbx-tipis-bullet {
    color: var(--kb-accent); font-weight: bold; flex-shrink: 0;
    font-size: 1.1rem; line-height: 1.2;
}
.kbx-tipis-line { margin-top: 0.35rem; line-height: 1.6; }

/* kb/layout.php — renderTree(); indentasi per level datang dari data (--tree-indent) */
.kb-tree-link.kbx-tree-indent { padding-left: var(--tree-indent); }
.kbx-tree-spacer { width: 16px; display: inline-block; }

/* kb/layout.php */
.kbx-create-link {
    color: var(--kb-accent); text-decoration: none; font-weight: 600; font-size: 0.95rem;
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem;
}
/* dulu style="display:none" yang tidak pernah diubah JavaScript */
.kb-search-listbox.kbx-listbox-hidden { display: none; }
.kbx-notice-title { margin: 0 0 0.25rem 0; font-size: 1.05rem; font-weight: 700; }
.kb-article-meta.kbx-article-meta {
    display: flex; justify-content: space-between; align-items: flex-end;
    border-bottom: 1px solid var(--kb-border); padding-bottom: 1rem; margin-bottom: 2rem;
}
.kbx-inline-relative { position: relative; display: inline-block; }
.kbx-avail-label { font-size: 0.8rem; color: var(--kb-text-dim); margin-left: 0.5rem; }
.kbx-lang-link { margin-left: 0.25rem; font-size: 0.8rem; color: var(--kb-accent); text-decoration: none; }
/* Warna gelar reputasi datang dari data (--rep-*). */
.kbx-rep-badge {
    display: inline-block; vertical-align: middle; font-size: 0.75rem; font-weight: 600;
    padding: 0.1rem 0.4rem; border-radius: 4px;
    background: var(--rep-bg); color: var(--rep-color); border: 1px solid var(--rep-border);
    margin-left: 0.25rem; margin-right: 0.25rem;
}
.kbx-helpful {
    font-size: 0.85rem; color: var(--kb-text-dim); margin-top: -1rem; margin-bottom: 2rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.markdown-body.kbx-md-lead { font-size: 1.05rem; line-height: 1.7; color: var(--kb-text); }
.markdown-body.kbx-md-point { margin-top: 0.5rem; line-height: 1.6; }
.markdown-body.kbx-md-small { font-size: 0.95rem; color: var(--kb-text); }
.markdown-body.kbx-md-spaced { margin-bottom: 2.5rem; }
.markdown-body.kbx-md-step { margin-top: 0.2rem; flex-grow: 1; }
.kbx-mb-300 { margin-bottom: 3rem; }
.kbx-mb-250 { margin-bottom: 2.5rem; }
.kbx-mb-010 { margin-bottom: 0.1rem; }
.kbx-mt-300 { margin-top: 3rem; }
.kbx-section-h2 { font-size: 1.5rem; font-weight: 700; }
.kbx-points-list {
    display: flex; flex-direction: column; gap: 1.5rem;
    padding-left: 0; list-style: none; margin: 0;
}
.kbx-point-title { margin: 0; font-size: 1.2rem; font-weight: 600; color: var(--kb-accent); }
.kbx-related { margin-bottom: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--kb-border); }
.kbx-related-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; color: var(--kb-text-dim); }
.kbx-label-strong { color: var(--kb-text); display: block; margin-bottom: 0.25rem; }
.kbx-permalink { font-size: 0.85rem; margin-top: 0.1rem; margin-bottom: 1rem; }
.kbx-permalink--loose { margin-bottom: 1.5rem; }
.kbx-steps-list { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3rem; }
.kbx-folder-list {
    list-style: none; padding: 0; display: flex; flex-direction: column;
    gap: 1rem; margin-top: 1.5rem;
}
.kbx-folder-link {
    display: flex; align-items: center; gap: 0.5rem; font-weight: 600;
    font-size: 1.1rem; color: var(--kb-accent); text-decoration: none;
}
.kbx-folder-excerpt { margin-top: 0.5rem; margin-bottom: 0; color: var(--kb-text-dim); font-size: 0.95rem; }
.kbx-pager {
    display: flex; justify-content: space-between; gap: 1rem;
    margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--kb-border);
}
.kb-nav-btn.kbx-nav-btn {
    display: flex; flex-direction: column; padding: 1rem; border: 1px solid var(--kb-border);
    border-radius: 8px; text-decoration: none; color: var(--kb-text); flex: 1; transition: all 0.2s;
}
.kb-nav-btn.kbx-nav-btn--next { text-align: right; }
.kbx-nav-label { font-size: 0.85rem; color: var(--kb-text-dim); margin-bottom: 0.25rem; }
.kbx-nav-title { font-weight: 600; font-size: 1.1rem; }
.kbx-feedback { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--kb-border); text-align: center; }
.kbx-feedback-h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; }
.kbx-feedback-thanks { font-size: 1.25rem; font-weight: 600; color: var(--kb-accent); }
.kbx-rating-btn {
    background: none; border: none; padding: 0.25rem; cursor: pointer;
    color: var(--kb-text-dim); transition: all 0.2s; outline-offset: 2px;
}
/* dipasang JavaScript saat bintang disorot (dulu b.style.color) */
.kbx-rating-btn.is-lit { color: var(--color-accent); }
.kbx-no-pointer { pointer-events: none; }
.kbx-rating-label { height: 1.5rem; color: var(--kb-text-dim); margin-top: 0.5rem; font-weight: 600; }
.kbx-report-trigger {
    background: none; border: none; color: var(--kb-text-dim); text-decoration: underline;
    cursor: pointer; font-size: 0.85rem; min-height: 44px; padding: 0 0.5rem; transition: color 0.2s;
}
.kbx-report-icon { margin-right: 0.25rem; vertical-align: -1px; }
.kb-palette.kbx-dialog { padding: 2rem; background: var(--kb-bg); }
.kbx-dialog-h2 { margin-top: 0; font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.kbx-dialog-desc { color: var(--kb-text-dim); margin-bottom: 1.5rem; }
/* Tanpa !important: JavaScript mengubah display #kb-report-actions. */
.kbx-dialog-actions { display: flex; gap: 1rem; justify-content: flex-end; }
.kbx-btn-cancel {
    background: none; border: 1px solid var(--kb-border); color: var(--kb-text);
    padding: 0.5rem 1.5rem; border-radius: 8px; cursor: pointer;
}
.kbx-search-empty { padding: 1rem; color: var(--kb-text-dim); }
/* dipasang JavaScript saat alasan laporan kosong (dulu style.borderColor) */
.kb-textarea.kbx-invalid { border-color: var(--color-danger); }

/* posts/show.php (halaman mandiri, <body class="page-post">): dulu <style> di <head>;
   :where() menjaga spesifisitas aslinya. */
/* Dulu "*" (spesifisitas 0) di halaman ini: juga mengenai <html> dan <body>. */
:where(html:has(> body.page-post)),
:where(html:has(> body.page-post)) *,
:where(html:has(> body.page-post)) *::before,
:where(html:has(> body.page-post)) *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* dulu :root di posts/show.php */
body:where(.page-post) {
    --bg:         var(--color-bg);
    --bg-card:    var(--color-surface);
    --border:     var(--color-border);
    --accent:     var(--color-primary);
    --accent-text: var(--color-primary-text);
    --accent2:    var(--color-primary);
    --text:       var(--color-text);
    --text-muted: var(--color-text-muted);
    --text-dim:   var(--color-text-dim);
    --radius:     14px;
    --prose-max:  720px;
}

body:where(.page-post) {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.7;
}

:where(body.page-post) .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--accent);
    color: var(--color-primary-foreground);
    padding: 8px;
    z-index: 10000;
    transition: top 0.2s;
}
:where(body.page-post) .skip-link:focus { top: 0; }

:where(body.page-post) .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ── Back Link ───────────────────────────────────────── */
:where(body.page-post) .back-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    padding: 1.5rem 1.5rem .5rem;
    max-width: 1000px;
    margin: 0 auto;
    display: block;
    width: fit-content;
    transition: color .2s;
}
:where(body.page-post) .back-link:hover { color: var(--accent-text); }

/* ── Article Wrapper ─────────────────────────────────── */
:where(body.page-post) .article-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
}

/* ── Cover ───────────────────────────────────────────── */
:where(body.page-post) .post-cover {
    width: 100%;
    max-width: 800px;
    margin: 1.5rem auto 0;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    max-height: 380px;
}
:where(body.page-post) .post-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
:where(body.page-post) .post-cover--gradient {
    display: flex;
    align-items: center;
    justify-content: center;
}
:where(body.page-post) .post-cover--gradient .cover-initial {
    font-size: 5rem;
    font-weight: 800;
    color: var(--color-text-muted);
    letter-spacing: -.05em;
}

/* ── Category Badge ──────────────────────────────────── */
:where(body.page-post) .category-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .3rem .85rem;
    border-radius: 99px;
    margin: 1.75rem 0 .85rem;
}
:where(body.page-post) .category-badge--coding { background: var(--color-info-bg); color: var(--color-primary-text); border: 1px solid var(--color-primary); }
:where(body.page-post) .category-badge--audio { background: var(--color-warning-bg); color: var(--color-accent); border: 1px solid var(--color-accent); }
:where(body.page-post) .category-badge--general { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success); }
:where(body.page-post) .category-badge--default { background: var(--color-surface-2); color: var(--color-secondary); border: 1px solid var(--color-secondary); }

/* ── Post Title ──────────────────────────────────────── */
:where(body.page-post) .post-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.25;
    color: var(--color-text);
    margin-bottom: 1.25rem;
}

/* ── Meta ────────────────────────────────────────────── */
:where(body.page-post) .post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
    font-size: .875rem;
    color: var(--text-muted);
}
:where(body.page-post) .post-meta__author {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--text-dim);
}
:where(body.page-post) .post-meta__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    color: var(--color-primary-foreground);
    flex-shrink: 0;
}
:where(body.page-post) .post-meta__sep { color: var(--border); }
:where(body.page-post) .post-meta__item { display: flex; align-items: center; gap: .35rem; }

/* ── Post Content ────────────────────────────────────── */
:where(body.page-post) .post-content {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--text-dim);
}
:where(body.page-post) .post-content h2,
:where(body.page-post) .post-content h3,
:where(body.page-post) .post-content h4 {
    font-family: var(--font-sans);
    color: var(--text);
    margin: 2rem 0 .75rem;
    letter-spacing: -.02em;
}
:where(body.page-post) .post-content h2 { font-size: 1.5rem; }
:where(body.page-post) .post-content h3 { font-size: 1.2rem; }
:where(body.page-post) .post-content p { margin-bottom: 1.35rem; }
:where(body.page-post) .post-content a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
:where(body.page-post) .post-content a:hover { color: var(--accent-text); }
:where(body.page-post) .post-content code {
    font-size: .88em;
    background: var(--color-code-bg);
    color: var(--color-primary-text);
    padding: .15em .45em;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
:where(body.page-post) .post-content pre {
    background: var(--color-code-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}
:where(body.page-post) .post-content pre code {
    background: none;
    padding: 0;
    color: var(--color-text);
}
:where(body.page-post) .post-content blockquote {
    border-left: 3px solid var(--accent);
    padding: .75rem 1.25rem;
    background: var(--color-info-bg);
    border-radius: 0 8px 8px 0;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--text-dim);
}
:where(body.page-post) .post-content ul,
:where(body.page-post) .post-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.35rem;
}
:where(body.page-post) .post-content li { margin-bottom: .35rem; }
:where(body.page-post) .post-content img {
    max-width: 100%;
    border-radius: 10px;
    margin: 1.25rem 0;
}
:where(body.page-post) .post-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}

/* ── Like Button ─────────────────────────────────────── */
:where(body.page-post) .post-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.5rem 0;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
:where(body.page-post) .like-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem 1.4rem;
    border-radius: 99px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-dim);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    font-family: var(--font-sans);
}
:where(body.page-post) .like-btn:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
    background: var(--color-danger-bg);
}
:where(body.page-post) .like-btn[aria-pressed="true"] {
    border-color: var(--color-danger);
    color: var(--color-danger);
    background: var(--color-danger-bg);
}
:where(body.page-post) .like-btn[aria-pressed="true"] .like-btn__icon {
    fill: var(--color-danger);
}
:where(body.page-post) .like-btn__icon { transition: fill .2s, transform .2s; }
:where(body.page-post) .like-btn:active .like-btn__icon { transform: scale(1.3); }
:where(body.page-post) .like-btn__count { min-width: 1.5ch; text-align: center; }

/* ── Share ───────────────────────────────────────────── */
:where(body.page-post) .share-section {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .75rem;
}
:where(body.page-post) .share-label {
    font-size: .8rem;
    color: var(--text-muted);
    font-weight: 500;
}
:where(body.page-post) .copy-link-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    border-radius: 99px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-dim);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    font-family: var(--font-sans);
}
:where(body.page-post) .copy-link-btn:hover {
    border-color: var(--color-primary);
    color: var(--accent-text);
    background: var(--color-info-bg);
}

/* ── Comments Section ────────────────────────────────── */
:where(body.page-post) .comments-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}
:where(body.page-post) .comments-heading {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2rem;
}
:where(body.page-post) .comments-heading span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    background: var(--color-info-bg);
    color: var(--accent-text);
    border-radius: 99px;
    font-size: .8rem;
    padding: 0 .5rem;
    margin-left: .5rem;
}

/* Comment Form */
:where(body.page-post) .comment-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 2rem;
}
:where(body.page-post) .comment-form textarea {
    width: 100%;
    min-height: 100px;
    background: var(--color-surface-raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: .9rem;
    padding: .75rem 1rem;
    resize: vertical;
    outline: none;
    transition: border-color .2s;
}
:where(body.page-post) .comment-form textarea:focus {
    border-color: var(--color-primary);
    outline: var(--focus-outline);
    box-shadow: var(--focus-halo);
}
:where(body.page-post) .comment-form__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: .75rem;
}
:where(body.page-post) .btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem 1.4rem;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: var(--font-sans);
    transition: all .2s;
    text-decoration: none;
}
:where(body.page-post) .btn--primary {
    background: var(--accent);
    color: var(--color-primary-foreground);
    box-shadow: var(--shadow-sm);
}
:where(body.page-post) .btn--primary:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
:where(body.page-post) .btn--ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}
:where(body.page-post) .btn--ghost:hover {
    color: var(--text);
    border-color: var(--color-primary);
    background: var(--color-info-bg);
}
:where(body.page-post) .btn--sm { padding: .4rem .9rem; font-size: .8rem; }

/* Login prompt */
:where(body.page-post) .login-prompt {
    text-align: center;
    padding: 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 2rem;
    color: var(--text-muted);
    font-size: .9rem;
}
:where(body.page-post) .login-prompt a {
    color: var(--accent-text);
    font-weight: 600;
    text-decoration: none;
}
:where(body.page-post) .login-prompt a:hover { text-decoration: underline; }

/* Comment list */
:where(body.page-post) .comment-list { display: flex; flex-direction: column; gap: 1.25rem; }
:where(body.page-post) .comment {
    display: flex;
    gap: .9rem;
}
:where(body.page-post) .comment--reply {
    margin-top: 1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--border);
}
:where(body.page-post) .comment__avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    color: var(--color-primary-foreground);
}
:where(body.page-post) .comment__body { flex: 1; min-width: 0; }
:where(body.page-post) .comment__meta {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .35rem;
}
:where(body.page-post) .comment__author {
    font-size: .875rem;
    font-weight: 700;
    color: var(--text);
}
:where(body.page-post) .comment__time {
    font-size: .78rem;
    color: var(--text-muted);
}
:where(body.page-post) .comment__content {
    font-size: .9rem;
    color: var(--text-dim);
    line-height: 1.65;
}
:where(body.page-post) .comment__reply-btn {
    margin-top: .5rem;
}
:where(body.page-post) .comment-replies {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Reply form */
:where(body.page-post) .reply-form {
    margin-top: .75rem;
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
}
:where(body.page-post) .reply-form textarea {
    width: 100%;
    min-height: 70px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: .875rem;
    padding: .6rem .85rem;
    resize: vertical;
    outline: none;
    transition: border-color .2s;
}
:where(body.page-post) .reply-form textarea:focus { border-color: var(--color-primary); outline: var(--focus-outline); box-shadow: var(--focus-halo); }
:where(body.page-post) .reply-form__footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .6rem;
}

/* Empty comments */
:where(body.page-post) .no-comments {
    text-align: center;
    color: var(--text-muted);
    padding: 2.5rem 1rem;
    font-size: .9rem;
}
:where(body.page-post) .no-comments strong { display: block; color: var(--text-dim); margin-bottom: .35rem; font-size: 1rem; }

/* Toast notification */
:where(body.page-post) #toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(2rem);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-primary);
    color: var(--text);
    padding: .75rem 1.5rem;
    border-radius: 99px;
    font-size: .875rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity .3s, transform .3s;
    pointer-events: none;
    z-index: 9999;
    box-shadow: var(--shadow-lg);
}
:where(body.page-post) #toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* ── Reading Progress Bar ─────────────────────────────── */
:where(body.page-post) #reading-progress {
    position: fixed;
    top: 0; left: 0;
    width: var(--read-progress, 0%); /* diisi JavaScript lewat --read-progress */
    height: 3px;
    background: var(--color-primary);
    z-index: 9999;
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
}

/* ── Copy Code Button ────────────────────────────────────── */
:where(body.page-post) .code-block-wrap { position: relative; }
:where(body.page-post) .code-copy-btn {
    position: absolute;
    top: 0.6rem; right: 0.6rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.73rem;
    font-weight: 600;
    font-family: var(--font-sans);
    background: var(--color-info-bg);
    color: var(--color-primary-text);
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
}
:where(body.page-post) .code-block-wrap:hover .code-copy-btn { opacity: 1; }
:where(body.page-post) .code-copy-btn:hover { background: var(--color-surface-2); }
:where(body.page-post) .code-copy-btn.copied { color: var(--color-success); border-color: var(--color-success); }

/* ── Related Posts ───────────────────────────────────────── */
:where(body.page-post) .related-section { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
:where(body.page-post) .related-heading { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 1.25rem; }
:where(body.page-post) .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
:where(body.page-post) .related-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color 0.2s, transform 0.2s;
}
:where(body.page-post) .related-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
:where(body.page-post) .related-card__cat { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-text); margin-bottom: 0.4rem; }
:where(body.page-post) .related-card__excerpt { font-size: 0.8rem; color: var(--text-muted); line-height: 1.55; }

/* ── Text-to-Speech (TTS) Player ────────────────────────────── */
:where(body.page-post) .tts-player {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
:where(body.page-post) .tts-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
:where(body.page-post) .tts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
}
:where(body.page-post) .tts-btn:hover { background: var(--color-info-bg); border-color: var(--accent); color: var(--accent-text); }
:where(body.page-post) .tts-btn:disabled { opacity: 0.5; cursor: not-allowed; }
:where(body.page-post) .tts-status { flex-grow: 1; font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }
:where(body.page-post) .tts-settings-toggle {
    font-size: 0.85rem; font-weight: 600; color: var(--text-dim); cursor: pointer; outline: none; transition: color 0.2s;
    display: flex; align-items: center; gap: 0.4rem; list-style-type: none;
}
:where(body.page-post) .tts-settings-toggle::-webkit-details-marker { display: none; }
:where(body.page-post) .tts-settings-toggle:hover { color: var(--text); }
:where(body.page-post) .tts-settings { border-top: 1px solid var(--color-border); padding-top: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
:where(body.page-post) .tts-setting-group { display: flex; flex-direction: column; gap: 0.4rem; }
:where(body.page-post) .tts-setting-group label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
:where(body.page-post) .tts-setting-group input[type="range"] { width: 100%; cursor: pointer; accent-color: var(--accent); }
:where(body.page-post) .tts-setting-group select { 
    width: 100%; padding: 0.4rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 0.85rem; outline: none; cursor: pointer;
}

/* dulu <style> kedua di posts/show.php (kotak seri) */
:where(body.page-post) .post-series-details summary::-webkit-details-marker { display: none; }
:where(body.page-post) .post-series-details[open] .details-chevron { transform: rotate(180deg); }
:where(body.page-post) .details-chevron { transition: transform 0.2s; display: inline-flex; }

/* posts/show.php — dulu atribut style="" (variabel --bg-card, --text, dst. ada di body.page-post) */
.posts-cat-badge {
    background: var(--color-info-bg); color: var(--color-primary-text);
    border: 1px solid var(--color-primary); text-decoration: none;
}
.posts-series-box {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 2rem; padding: 1.5rem;
}
.posts-series-title { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--text); }
.posts-series-icon { vertical-align: middle; margin-right: 0.25rem; color: var(--accent-text); }
.posts-series-desc { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; }
.posts-series-toc { border-top: 1px solid var(--color-border); padding-top: 1rem; }
.posts-series-summary {
    font-size: 0.85rem; font-weight: 600; color: var(--text-dim); cursor: pointer;
    display: flex; align-items: center; gap: 0.5rem; user-select: none;
}
.posts-series-list {
    margin: 1rem 0 0 0; padding-left: 0; list-style: none;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.posts-series-item {
    display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.5rem 0.75rem;
    border-radius: 8px; border-left: 2px solid transparent;
}
.posts-series-item--current { background: var(--color-info-bg); border-left: 2px solid var(--accent); }
.posts-series-part { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; flex-shrink: 0; margin-top: 0.15rem; }
.posts-series-current { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.posts-series-link { font-size: 0.95rem; color: var(--accent-text); text-decoration: none; }
.post-content.posts-content--locked { position: relative; overflow: hidden; max-height: 500px; }
.posts-paywall {
    position: absolute; bottom: 0; left: 0; right: 0; height: 350px;
    background: linear-gradient(to bottom, transparent, var(--color-bg) 80%);
    display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2rem; z-index: 10;
}
.posts-paywall-card {
    background: var(--color-surface); border: 1px solid var(--color-border); padding: 2.5rem;
    border-radius: 1rem; text-align: center; box-shadow: var(--shadow-lg); max-width: 90%; width: 450px;
}
.posts-paywall-icon { font-size: 2.5rem; margin-bottom: 1rem; }
/* .post-content h2 / p (0,1,1) juga mengenai elemen ini */
.post-content .posts-paywall-title { margin-bottom: 0.75rem; color: var(--color-text); font-size: 1.5rem; font-weight: 700; }
.post-content .posts-paywall-desc { color: var(--color-text-muted); margin-bottom: 1.5rem; line-height: 1.6; }
.btn.posts-btn-block { width: 100%; justify-content: center; }
.posts-series-nav {
    margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border);
    display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between;
}
.btn.posts-series-btn {
    flex: 1; min-width: 200px; display: flex; flex-direction: column; align-items: flex-start;
    text-align: left; padding: 1rem; height: auto;
}
.btn.posts-series-btn--next { align-items: flex-end; text-align: right; }
.posts-series-nav-label {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); margin-bottom: 0.25rem;
}
.posts-series-nav-title { font-weight: 600; color: var(--text); white-space: normal; line-height: 1.4; }
.posts-on-primary { color: var(--color-primary-foreground); }
.posts-series-spacer { flex: 1; min-width: 200px; }
.posts-tag {
    font-size: 0.8rem; padding: 0.3rem 0.8rem; background: var(--color-surface-2);
    border: 1px solid var(--color-border); border-radius: 99px; color: var(--text-muted);
    text-decoration: none; transition: all 0.2s;
}
.posts-bookmark-gap { margin-left: 0.5rem; }
.btn.posts-share-btn { padding: 0.3rem 0.5rem; }


/* ##########################################################################
   AREA: dash-embeds
   ########################################################################## */

/* ==========================================================================
   Area: dasbor pengguna, halaman admin root, sidebar admin, dan embed
   Prefiks: dash-, adm-, adm-side-, emb- (embed lama tetap .pwned-*, .pwd-*, .qr-*)
   Dipindahkan dari atribut style="" dan blok <style> di view; nilai sama persis.
   ========================================================================== */

/* --------------------------------------------------------------------------
   admin/broadcast.php
   -------------------------------------------------------------------------- */
.adm-bc-h-icon { vertical-align: middle; margin-right: 0.5rem; }
.adm-bc-btn-icon { margin-right: 0.5rem; }

.adm-bc-type {
  padding: 0.6rem 1rem;
  border: 2px solid var(--color-border);
  transition: all 0.2s;
}
.adm-bc-type.is-info    { border-color: var(--color-secondary); background: var(--color-surface-2); }
.adm-bc-type.is-success { border-color: var(--color-success);   background: var(--color-success-bg); }
.adm-bc-type.is-warning { border-color: var(--color-warning);   background: var(--color-warning-bg); }
.adm-bc-accent-info    { accent-color: var(--color-secondary); }
.adm-bc-accent-success { accent-color: var(--color-success); }
.adm-bc-accent-warning { accent-color: var(--color-warning); }

.adm-bc-field {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  transition: border-color 0.2s;
}
.adm-bc-field:focus { border-color: var(--color-primary); }
.adm-bc-field--text { font-family: var(--font-sans); resize: vertical; }
.adm-bc-field--url  { font-family: var(--font-mono); }
.adm-bc-count.is-over { color: var(--color-danger); }

.btn.adm-bc-send { padding: 0.85rem; }

.adm-bc-preview {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
  min-height: 80px;
}
.adm-bc-preview-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}
.adm-bc-preview-icon.is-success { background: var(--color-success-bg); }
.adm-bc-preview-icon.is-warning { background: var(--color-warning-bg); }
.adm-bc-preview-msg { color: var(--color-text); font-size: 0.9rem; line-height: 1.5; }
.adm-bc-placeholder { font-style: italic; }
.adm-bc-preview-link { color: var(--color-primary-text); font-size: 0.8rem; font-family: var(--font-mono); }

.btn.adm-bc-tpl {
  text-align: left;
  background: var(--color-surface-2);
  border: 1px solid var(--color-secondary);
  color: var(--color-text);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  justify-content: flex-start;
}
.btn.adm-bc-tpl--success { background: var(--color-success-bg); border-color: var(--color-success); }
.btn.adm-bc-tpl--warning { background: var(--color-warning-bg); border-color: var(--color-warning); }

.adm-bc-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  align-items: center;
  justify-content: center;
  background: var(--color-overlay);
}
.adm-bc-modal-box {
  background: var(--color-surface);
  border: 1px solid var(--color-secondary);
  border-radius: 12px;
  padding: 2rem;
  max-width: 450px;
  width: 90%;
  box-shadow: var(--shadow-lg);
}
.adm-bc-modal-title { margin: 0 0 1rem 0; font-size: 1.25rem; color: var(--color-secondary); }
.adm-bc-modal-actions { padding-top: 1.25rem; }
.btn.adm-bc-cancel {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   admin/crash_reports.php
   -------------------------------------------------------------------------- */
.adm-crash-mt20 { margin-top: 20px; }
.adm-crash-icon {
  background: var(--color-danger);
  color: var(--color-bg);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
}
.adm-crash-notes {
  background: var(--color-surface-2);
  padding: 1rem;
  border-radius: 0.75rem;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  white-space: pre-wrap;
  line-height: 1.5;
  border: 1px solid var(--color-border);
}
.form-group.adm-crash-actions { padding-top: 1.5rem; }
.form-select.adm-crash-status { min-width: 150px; }

/* --------------------------------------------------------------------------
   admin/dashboard.php
   -------------------------------------------------------------------------- */
.admin-stat-card.adm-dash-stat--info    { background: var(--color-info-bg); }
.admin-stat-card.adm-dash-stat--success { background: var(--color-success-bg); }
.adm-dash-h { margin-bottom: 1.25rem; }
.adm-dash-h-lg { font-size: 1.125rem; }
.adm-dash-grid-12 { grid-template-columns: 1fr 2fr; }
.adm-dash-bar-head { margin-bottom: 0.3rem; }
.adm-dash-link { color: var(--color-text); text-decoration: none; font-weight: 500; }
.adm-dash-link--clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; }
.adm-dash-track {
  background: var(--color-surface-2);
  border-radius: 99px;
  height: 5px;
  overflow: hidden;
}
.adm-dash-track--6 { height: 6px; }
.adm-dash-fill {
  width: var(--bar-width);
  height: 100%;
  background: var(--bar-color);
  border-radius: 99px;
}
.adm-dash-cat { margin-bottom: 0.875rem; }
.adm-dash-cat-head { font-size: 0.82rem; margin-bottom: 0.3rem; }
.adm-dash-fw500 { font-weight: 500; }

/* --------------------------------------------------------------------------
   admin/kb/index.php
   -------------------------------------------------------------------------- */
.adm-kb-order-col { width: 50px; }

/* --------------------------------------------------------------------------
   admin/kb_reports.php
   -------------------------------------------------------------------------- */
.adm-kbr-scroll { overflow-x: auto; }
.adm-kbr-table { border-collapse: collapse; text-align: left; }
.adm-kbr-th { padding: 1rem; color: var(--color-text); }
.adm-kbr-td { padding: 1rem; }
.adm-kbr-reason { max-width: 300px; }
.adm-kbr-redacted {
  color: var(--color-primary-text);
  font-weight: 500;
  text-decoration: line-through;
  opacity: 0.5;
}
.adm-kbr-fw500 { font-weight: 500; }
.adm-kbr-badge {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}
.adm-kbr-badge--open     { background: var(--color-warning-bg); color: var(--color-warning); }
.adm-kbr-badge--resolved { background: var(--color-success-bg); color: var(--color-success); }
.adm-kbr-form { max-width: 250px; }
.adm-kbr-input {
  padding: 0.4rem;
  background: var(--color-surface-raised);
  color: var(--color-text);
  border: 1px solid var(--color-border-hover);
  border-radius: 4px;
}
.adm-kbr-resolve {
  padding: 0.4rem 0.8rem;
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

/* --------------------------------------------------------------------------
   admin/menus.php (blok <style> lama, dicakup .page-adm-menus pada .admin-layout)
   -------------------------------------------------------------------------- */
.page-adm-menus .menu-tab-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 0.75rem 1.5rem;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.page-adm-menus .menu-tab-btn[aria-selected="true"] {
  background: var(--color-bg);
  color: var(--color-primary-text);
  border-bottom-color: transparent;
  border-top: 3px solid var(--color-primary);
}
.page-adm-menus .menu-tab-panel {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0 8px 8px 8px;
  padding: 1.75rem;
  margin-bottom: 2rem;
}
.page-adm-menus .menu-item-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
/* dulu style="" yang diisi JS untuk sub-link */
.page-adm-menus .menu-item-card.is-child {
  background: var(--color-surface-2);
  border-color: var(--color-border);
}
.page-adm-menus .menu-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}
.page-adm-menus .menu-item-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr 1.2fr;
  gap: 1rem;
}
@media (max-width: 1100px) {
  .page-adm-menus .menu-item-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .page-adm-menus .menu-item-grid { grid-template-columns: 1fr; }
}
.page-adm-menus .submenu-list {
  margin-top: 1rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--color-primary);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.page-adm-menus .sr-live-region {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alert.adm-menus-alert { background: var(--color-success-bg); border: 1px solid var(--color-success); }
.adm-menus-form { margin-top: -1px; }
.adm-menus-head { margin-bottom: 1.25rem; }
.adm-menus-h2 { margin: 0 0 0.25rem; }
.adm-menus-desc { font-size: 0.88rem; }
.adm-menus-list { list-style: none; margin: 0 0 1.5rem; }
.btn.adm-menus-save { padding: 0.75rem 2rem; }
.adm-menus-opts { margin-top: 0.75rem; }
.adm-menus-accent { accent-color: var(--color-primary); }
.adm-menus-sublist { list-style: none; }
.btn.adm-menus-addsub { align-self: flex-start; }

/* --------------------------------------------------------------------------
   admin/partials/sidebar.php (blok <style> lama; selektor .admin-sidebar-* khas sidebar)
   -------------------------------------------------------------------------- */
.admin-sidebar-group {
  margin-bottom: 0.5rem;
}
.admin-sidebar-group__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  text-align: left;
  transition: all 0.2s;
  outline: none;
}
.admin-sidebar-group__header:hover,
.admin-sidebar-group__header:focus-visible {
  color: var(--color-text);
  background: var(--color-surface);
  outline: 2px solid var(--color-primary);
}
.admin-sidebar-group__header.active {
  color: var(--color-primary-text);
}
.admin-sidebar-group__arrow {
  font-size: 0.75rem;
  transition: transform 0.25s ease;
  opacity: 0.6;
}
.admin-sidebar-group.open .admin-sidebar-group__arrow {
  transform: rotate(180deg);
}
.admin-sidebar-submenu {
  list-style: none;
  padding: 0 0 0 1rem;
  margin: 0;
  display: none;
}
.admin-sidebar-group.open .admin-sidebar-submenu {
  display: block;
}
.admin-sidebar-submenu .admin-sidebar__link {
  padding: 0.5rem 0.85rem;
  font-size: 0.84rem;
  border-left: 2px solid var(--color-border);
  border-radius: 0 6px 6px 0;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
}
.admin-sidebar-submenu .admin-sidebar__link--active {
  border-left-color: var(--color-primary);
  background: var(--color-info-bg);
  color: var(--color-primary-text);
}.adm-side-nav { padding-top: 0.5rem; }
.adm-side-list { list-style: none; }
.adm-side-icon { margin-right: 0.5rem; }
.adm-side-icon-sm { margin-right: 0.4rem; }
.adm-side-back { color: var(--color-text-dim); }

/* --------------------------------------------------------------------------
   dashboard (bersama: index, connected, shortlinks)
   -------------------------------------------------------------------------- */
.container.dash-pad { padding-top: 5rem; padding-bottom: 5rem; }
.container.dash-narrow { max-width: 800px; }
.dash-title { font-size: 2.5rem; }
.dash-scroll-x { overflow-x: auto; }
.dash-table { border-collapse: collapse; text-align: left; }
.dash-cell { padding: 1rem; }

/* --------------------------------------------------------------------------
   dashboard/connected.php
   -------------------------------------------------------------------------- */
.dash-conn-empty { padding: 3rem; color: var(--color-text-dim); }
.dash-conn-empty-icon { font-size: 3rem; }
.dash-conn-empty-title { font-size: 1.17rem; }
.dash-conn-dim { color: var(--color-text-dim); }
.dash-conn-list { list-style: none; }
.dash-conn-icon {
  width: 48px;
  height: 48px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.dash-conn-meta { margin: 0; font-size: 0.85rem; color: var(--color-text-dim); margin-top: 0.2rem; }
.dash-conn-id { font-family: var(--font-mono); opacity: 0.5; }
.btn.btn--ghost.dash-conn-revoke { border-color: var(--color-danger); }

/* --------------------------------------------------------------------------
   dashboard/index.php
   -------------------------------------------------------------------------- */
.btn.btn--ghost.dash-idx-apps { border-color: var(--color-primary); }
.dash-idx-progress {
  background: var(--color-info-bg);
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.dash-idx-mb02 { margin-bottom: 0.2rem; }
/* Tautan judul di dalam <td>: aturan tautan isi (:where(main) td a, spesifisitas
   0,2,1 dan :visited 0,3,1) dulu kalah oleh style="" inline, jadi perlu !important. */
.dash-post-link { color: inherit !important; text-decoration: none !important; }
.dash-post-link:hover { text-decoration: underline !important; }
.dash-idx-reject {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-danger);
  background: var(--color-danger-bg);
  padding: 0.5rem;
  border-radius: 0.25rem;
}

/* --------------------------------------------------------------------------
   dashboard/post_form.php 
   -------------------------------------------------------------------------- */
/* Dulu inline: background shorthand juga menghapus panah .form-select, dan
   tepinya menang atas .form-select:focus. Selektor 0,3,0 meniru itu. */
.form-group .form-select.dash-pf-format {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   dashboard/shortlinks.php (blok <style> lama berlaku se-halaman, termasuk
   modal onboarding di footer; dicakup body.page-dash-shortlinks lewat $bodyClass)
   -------------------------------------------------------------------------- */
body.page-dash-shortlinks .shortlinks-grid {
  display: grid;
  gap: 24px;
}
body.page-dash-shortlinks .points-display {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body.page-dash-shortlinks .points-value {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-primary-text);
  line-height: 1;
}
body.page-dash-shortlinks .progress-bar-container {
  width: 100%;
  background-color: var(--color-surface);
  border-radius: 6px;
  height: 16px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
body.page-dash-shortlinks .progress-bar {
  height: 100%;
  background-color: var(--color-primary);
  transition: width 0.3s ease;
}
body.page-dash-shortlinks .points-explanation {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
body.page-dash-shortlinks .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
body.page-dash-shortlinks .form-group label {
  font-weight: 600;
  font-size: 1rem;
}
body.page-dash-shortlinks .form-control {
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
body.page-dash-shortlinks .form-control:focus {
  outline: var(--focus-outline);
  border-color: var(--color-primary);
  box-shadow: var(--focus-halo);
}
body.page-dash-shortlinks .hint-text {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
body.page-dash-shortlinks .flex-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
body.page-dash-shortlinks .feedback {
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 4px;
}
body.page-dash-shortlinks .feedback.success { color: var(--color-success); }
body.page-dash-shortlinks .feedback.error { color: var(--color-danger); }
body.page-dash-shortlinks .url-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.page-dash-shortlinks .dest-url {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
}
body.page-dash-shortlinks .checkbox-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
body.page-dash-shortlinks .checkbox-group input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
body.page-dash-shortlinks .checkbox-group label {
  font-weight: 400;
  cursor: pointer;
}
/* lebar progres dulu style="width: X%" */
body.page-dash-shortlinks .progress-bar { width: var(--bar-width); }
.dash-sl-flash {
  border-radius: 8px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}
.dash-sl-flash--ok  { background: var(--color-success-bg); border: 1px solid var(--color-success); color: var(--color-success); }
.dash-sl-flash--err { background: var(--color-danger-bg);  border: 1px solid var(--color-danger);  color: var(--color-danger); }
body.page-dash-shortlinks .card.dash-sl-card { padding: 24px; }
/* dulu inline: menang juga atas .card:hover */
body.page-dash-shortlinks .card.dash-sl-rules { border: 1px solid var(--color-danger); background: var(--color-danger-bg); }
.dash-sl-gap8 { gap: 8px; }
.dash-sl-rules-list { padding-left: 1.5rem; line-height: 1.6; }
.dash-sl-grow { flex-grow: 1; }
.dash-sl-empty { padding: 40px; }
.dash-sl-inline { display: inline; }

/* ==========================================================================
   EMBED ([embed:slug] dari src/Helpers/Markdown.php; bisa tampil di dalam
   .post-content). Selektor dimulai dari kelas akar embed supaya menang atas
   aturan tipografi isi artikel seperti dulu gaya inline.
   ========================================================================== */

/* embeds/cosmic-rage.php */
.cosmic-rage-embed {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  overflow: hidden;
}
.cosmic-rage-embed .emb-cr-head { padding: 1rem 1.5rem; }
/* Tab: dulu warna & garis bawah diset JS lewat style; kini dari kelas .active */
.cosmic-rage-embed .cr-tab {
  background: none;
  border: none;
  color: var(--color-text-muted);
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: 600;
  border-bottom: 2px solid transparent;
}
.cosmic-rage-embed .cr-tab.active {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}
.cosmic-rage-embed .form-control.emb-cr-field {
  width: 100%;
  padding: 0.6rem;
  border-radius: 0.5rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
/* 0,3,0: dulu inline juga menang atas .btn--primary:hover */
.cosmic-rage-embed .btn.emb-cr-btn {
  padding: 0.8rem;
  border-radius: 0.5rem;
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}
.cosmic-rage-embed .emb-cr-result {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  text-align: center;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
}

/* embeds/password-gen.php (blok <style> lama; kelas .pwd-* khas embed ini).
   Catatan: dulu blok <style> ada di dalam isi artikel, sesudah aturan
   seperti .post-content h3 (0,1,1) di head, jadi menang karena urutan saat
   spesifisitasnya sama. Di file ini urutan tidak terjamin, maka selektor
   "kelas + elemen" diawali kelas akar embed (0,2,1). */
.pwd-embed {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  overflow: hidden;
  margin: 2rem 0;
  color: var(--color-text);
  font-family: var(--font-sans);
}
.pwd-header {
  background: var(--color-surface-2);
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.pwd-embed .pwd-header h3 { /* +.pwd-embed: lihat catatan di atas */
  margin: 0;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pwd-body {
  padding: 1.5rem;
}
.pwd-display-wrap {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.pwd-input {
  flex: 1;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  color: var(--color-primary-text);
  font-size: 1.5rem;
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
  font-family: var(--font-mono);
  letter-spacing: 2px;
  width: 100%;
}
.pwd-input:focus {
  outline: var(--focus-outline); box-shadow: var(--focus-halo);
  outline-offset: 2px;
}
.pwd-btn-copy {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 0 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pwd-btn-copy:hover {
  background: var(--color-surface-raised);
}
.pwd-btn-copy:focus {
  outline: var(--focus-outline); box-shadow: var(--focus-halo);
  outline-offset: 2px;
}
.pwd-strength-bar {
  height: 8px;
  background: var(--color-surface-2);
  border-radius: 4px;
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.pwd-strength-fill {
  height: 100%;
  width: var(--pwd-fill, 0%); /* diisi JS lewat setProperty */
  background: var(--color-danger);
  transition: width 0.3s ease, background 0.3s ease;
}
.pwd-status {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}
.pwd-status-time {
  font-weight: 700;
}
.pwd-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.pwd-control-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pwd-range-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pwd-range {
  flex: 1;
  cursor: pointer;
}
.pwd-range:focus {
  outline: var(--focus-outline); box-shadow: var(--focus-halo);
  outline-offset: 2px;
}
.pwd-len-val {
  font-weight: bold;
  min-width: 2rem;
  text-align: right;
}
.pwd-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}
.pwd-check-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
}
.pwd-check-input {
  width: 1.2rem;
  height: 1.2rem;
  cursor: pointer;
}
.pwd-check-input:focus {
  outline: var(--focus-outline); box-shadow: var(--focus-halo);
  outline-offset: 2px;
}
.pwd-btn-gen {
  width: 100%;
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  border: none;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: opacity 0.2s;
}
.pwd-btn-gen:hover {
  opacity: 0.9;
}
.pwd-btn-gen:focus {
  outline: var(--focus-outline); box-shadow: var(--focus-halo);
  outline-offset: 2px;
}
/* Warna tingkat kekuatan: dulu JS menulis style.background / style.color */
.pwd-strength-fill.is-fair    { background: var(--color-warning); }
.pwd-strength-fill.is-strong  { background: var(--color-success); }
.pwd-strength-fill.is-vstrong { background: var(--color-secondary); }
.pwd-status-time.is-none    { color: var(--color-text-muted); }
.pwd-status-time.is-weak    { color: var(--color-danger); }
.pwd-status-time.is-fair    { color: var(--color-warning); }
.pwd-status-time.is-strong  { color: var(--color-success); }
.pwd-status-time.is-vstrong { color: var(--color-secondary); }

/* embeds/pwned-email.php dan embeds/pwned-scanner.php (blok <style> lama).
   Keduanya memakai nama .pwned-* yang sama dengan nilai berbeda, jadi dicakup
   kelas akar .emb-pwned-email / .emb-pwned-scan. :where() menjaga spesifisitas
   tetap seperti aslinya; selektor "kelas + elemen" (p, h4, a, svg) diberi kelas
   akar sungguhan agar tetap menang atas .post-content p/h4/a seperti dulu
   (dulu menang karena urutan). */

/* --- pwned-email --- */
.pwned-app:where(.emb-pwned-email) {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
  font-family: var(--font-sans);
  color: var(--color-text);
  margin: 2rem 0;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
}

.pwned-app:where(.emb-pwned-email)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--color-secondary);
}

:where(.emb-pwned-email) .pwned-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.emb-pwned-email .pwned-header svg {
  color: var(--color-secondary);
}

:where(.emb-pwned-email) .pwned-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

:where(.emb-pwned-email) .pwned-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 1.5rem 0;
  line-height: 1.5;
}

:where(.emb-pwned-email) .pwned-input-group {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

:where(.emb-pwned-email) .pwned-input {
  flex-grow: 1;
  background: var(--color-surface-raised);
  border: 2px solid var(--color-text);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  outline: none;
  transition: all 0.2s;
}

:where(.emb-pwned-email) .pwned-input:focus {
  outline: var(--focus-outline); box-shadow: var(--focus-halo);
}

:where(.emb-pwned-email) .pwned-btn {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  border: none;
  border-radius: 8px;
  padding: 0 1.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

:where(.emb-pwned-email) .pwned-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

:where(.emb-pwned-email) .pwned-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

:where(.emb-pwned-email) .pwned-terminal {
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-success);
  height: 120px;
  overflow-y: auto;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.emb-pwned-email .pwned-terminal p { margin: 0; opacity: 0.9; }
:where(.emb-pwned-email) .pwned-terminal .term-info { color: var(--color-link); }
:where(.emb-pwned-email) .pwned-terminal .term-warn { color: var(--color-warning); }
:where(.emb-pwned-email) .pwned-terminal .term-err { color: var(--color-danger); }
:where(.emb-pwned-email) .pwned-terminal .term-success { color: var(--color-success); }

:where(.emb-pwned-email) .pwned-status {
  padding: 1.25rem;
  border-radius: 8px;
  display: none;
}

.emb-pwned-email .pwned-status h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
}

.emb-pwned-email .pwned-status p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

:where(.emb-pwned-email) .pwned-status.safe {
  display: block;
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

:where(.emb-pwned-email) .pwned-status.failed {
  display: block;
  background: var(--color-warning-bg);
  color: var(--color-text);
  border: 1px solid var(--color-warning);
}

:where(.emb-pwned-email) .pwned-label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 700;
  color: var(--color-text);
}

:where(.emb-pwned-email) .pwned-note {
  margin: 0.5rem 0 1rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

:where(.emb-pwned-email) .pwned-status.leaked {
  display: block;
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

:where(.emb-pwned-email) .breach-list {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

:where(.emb-pwned-email) .breach-tag {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

:where(.emb-pwned-email) .pwned-footer {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
}
.emb-pwned-email .pwned-footer a { color: var(--color-link); text-decoration: none; }
.emb-pwned-email .pwned-footer a:hover { text-decoration: underline; }

/* --- pwned-scanner --- */
.pwned-app:where(.emb-pwned-scan) {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
  font-family: var(--font-sans);
  color: var(--color-text);
  margin: 2rem 0;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
}

.pwned-app:where(.emb-pwned-scan)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--color-primary);
}

:where(.emb-pwned-scan) .pwned-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.emb-pwned-scan .pwned-header svg {
  color: var(--color-primary-text);
}

:where(.emb-pwned-scan) .pwned-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

:where(.emb-pwned-scan) .pwned-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 1.5rem 0;
  line-height: 1.5;
}

:where(.emb-pwned-scan) .pwned-input-group {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

:where(.emb-pwned-scan) .pwned-input {
  flex-grow: 1;
  background: var(--color-surface-raised);
  border: 2px solid var(--color-text);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  color: var(--color-text);
  font-size: 0.95rem;
  outline: none;
  transition: all 0.2s;
}

:where(.emb-pwned-scan) .pwned-input:focus {
  outline: var(--focus-outline); box-shadow: var(--focus-halo);
}

:where(.emb-pwned-scan) .pwned-btn {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  border: none;
  border-radius: 8px;
  padding: 0 1.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

:where(.emb-pwned-scan) .pwned-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

:where(.emb-pwned-scan) .pwned-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

:where(.emb-pwned-scan) .pwned-terminal {
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-success);
  height: 150px;
  overflow-y: auto;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.emb-pwned-scan .pwned-terminal p {
  margin: 0;
  opacity: 0.9;
}

:where(.emb-pwned-scan) .pwned-terminal .term-info { color: var(--color-link); }
:where(.emb-pwned-scan) .pwned-terminal .term-warn { color: var(--color-warning); }
:where(.emb-pwned-scan) .pwned-terminal .term-err { color: var(--color-danger); }
:where(.emb-pwned-scan) .pwned-terminal .term-success { color: var(--color-success); }

:where(.emb-pwned-scan) .pwned-status {
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  display: none;
}

:where(.emb-pwned-scan) .pwned-status.safe {
  display: block;
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

:where(.emb-pwned-scan) .pwned-status.failed {
  display: block;
  background: var(--color-warning-bg);
  color: var(--color-text);
  border: 1px solid var(--color-warning);
}

:where(.emb-pwned-scan) .pwned-label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 700;
  color: var(--color-text);
}

:where(.emb-pwned-scan) .pwned-note {
  margin: 0.5rem 0 1rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

:where(.emb-pwned-scan) .pwned-status.leaked {
  display: block;
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

:where(.emb-pwned-scan) .pwned-footer {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
}
.emb-pwned-scan .pwned-footer a { color: var(--color-link); text-decoration: none; }
.emb-pwned-scan .pwned-footer a:hover { text-decoration: underline; }

/* embeds/qr-generator.php (blok <style> lama; kelas .qr-* khas embed ini).
   "kelas + elemen" diawali .qr-embed, lihat catatan password-gen. */
.qr-embed {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  overflow: hidden;
  margin: 2rem 0;
  color: var(--color-text);
  font-family: var(--font-sans);
}
.qr-header {
  background: var(--color-surface-2);
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.qr-embed .qr-header h3 {
  margin: 0;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.qr-body {
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .qr-body {
    grid-template-columns: 1fr 300px;
  }
}
.qr-input-pane {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.qr-textarea {
  width: 100%;
  min-height: 150px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  font-family: inherit;
  resize: vertical;
}
.qr-textarea:focus {
  outline: var(--focus-outline); box-shadow: var(--focus-halo);
  outline-offset: 2px;
}
.qr-controls {
  display: flex;
  gap: 0.5rem;
}
.qr-btn {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s;
  flex: 1;
  text-align: center;
}
.qr-btn:hover {
  background: var(--color-surface-raised);
}
.qr-btn:focus {
  outline: var(--focus-outline); box-shadow: var(--focus-halo);
  outline-offset: 2px;
}
.qr-btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  border: none;
}
.qr-btn-primary:hover {
  opacity: 0.9;
  background: var(--color-primary);
}

.qr-preview-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: var(--color-surface-2);
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
}
.qr-box {
  background: #fff; /* allow-color: QR code quiet zone must stay white for scanners */
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 200px;
}
.qr-embed .qr-box img, .qr-embed .qr-box canvas {
  max-width: 100%;
  display: block;
}
.qr-empty-text {
  color: #484949; /* allow-color: teks di kotak QR yang selalu putih (= --color-text-muted tema terang) */
  text-align: center;
  font-size: 0.9rem;
}

/* embeds/status-checker.php */
.system-status-embed {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow-md);
}
/* --sc-overall diisi view (warna status keseluruhan) */
.emb-sc-banner {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.emb-sc-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sc-overall); }
.emb-sc-overall { color: var(--sc-overall); }
.emb-sc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.emb-sc-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem;
}
.emb-sc-badge {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
}
.emb-sc-badge--ok      { background: var(--color-success-bg); color: var(--color-success); }
.emb-sc-badge--danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.emb-sc-badge--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.emb-sc-foot { font-size: 0.82rem; padding-top: 1.25rem; }
.emb-sc-admin {
  margin-left: 1rem;
  color: var(--color-primary-text);
  background: var(--color-info-bg);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}
.system-status-embed .btn.emb-sc-refresh {
  padding: 0.4rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}


/* ##########################################################################
   AREA: admin-1
   ########################################################################## */

/* ==========================================================================
   AREA admin-1: pengumuman, glosarium, posting, laporan, peran, software
   (src/Views/admin/{announcements,glossary,posts,reports,roles,software}).
   Pengganti atribut style="" lama. Selektor diawali .admin-layout .admin-main
   agar mengalahkan aturan komponen (.btn, .card, .admin-table td, label:has(...))
   seperti gaya inline dulu, tanpa !important.
   ========================================================================== */

/* admin/announcements/index.php */
.admin-layout .admin-main .adm-ann-btn-new {
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: bold;
  border-radius: 8px;
}
.admin-layout .admin-main .adm-ann-flash-success {
  margin-bottom: 2rem;
  background: var(--color-success-bg);
  color: var(--color-success);
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid var(--color-success);
}
.admin-layout .admin-main .adm-ann-flash-error {
  margin-bottom: 2rem;
  background: var(--color-danger-bg);
  color: var(--color-danger);
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid var(--color-danger);
}
.admin-layout .admin-main .adm-ann-table-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
}
.admin-layout .admin-main .adm-ann-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.admin-layout .admin-main .adm-ann-edit-link {
  /* !important: tautan di dalam <td> kena aturan tautan isi style.css (termasuk :visited) */
  color: var(--color-accent) !important;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9rem;
  margin-right: 1rem;
}
.admin-layout .admin-main .adm-ann-inline-form {
  display: inline;
}
.admin-layout .admin-main .adm-ann-delete-btn {
  background: none;
  border: none;
  color: var(--color-danger);
  font-weight: bold;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0;
}

/* admin/announcements/form.php */
.admin-layout .admin-main .adm-ann-form-wrap {
  max-width: 800px;
  margin: 3rem auto;
  padding: 0 1rem;
}
.admin-layout .admin-main .adm-ann-form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 2rem;
  border-radius: 16px;
}
.admin-layout .admin-main .adm-ann-input {
  width: 100%;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-hover);
  color: var(--color-text);
  padding: 0.75rem;
  border-radius: 8px;
}
.admin-layout .admin-main .adm-ann-textarea {
  width: 100%;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-hover);
  color: var(--color-text);
  padding: 0.75rem;
  border-radius: 8px;
  resize: vertical;
}
.admin-layout .admin-main .adm-ann-check {
  width: 1.2rem;
  height: 1.2rem;
}
.admin-layout .admin-main .adm-ann-check-hint {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-top: 0.5rem;
  margin-left: 2rem;
}
.admin-layout .admin-main .adm-ann-btn-cancel {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
}
.admin-layout .admin-main .adm-ann-btn-submit {
  background: var(--color-accent);
  border: none;
  color: var(--color-bg);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}

/* admin/glossary/index.php */
.admin-layout .admin-main .adm-gloss-flash-success {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--color-success);
}
.admin-layout .admin-main .adm-gloss-flash-error {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--color-danger);
}
.admin-layout .admin-main .adm-gloss-filter-card {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
}
.admin-layout .admin-main .adm-gloss-search-col {
  flex: 1;
  min-width: 240px;
  position: relative;
}
.admin-layout .admin-main .adm-gloss-filter-input {
  width: 100%;
  padding: 0.6rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
}
.admin-layout .admin-main .adm-gloss-cat-col {
  min-width: 180px;
}
.admin-layout .admin-main .adm-gloss-empty {
  padding: 4rem 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  text-align: center;
}
.admin-layout .admin-main .adm-gloss-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.admin-layout .admin-main .adm-gloss-empty-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}
.admin-layout .admin-main .adm-gloss-empty-text {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}
.admin-layout .admin-main .adm-gloss-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-layout .admin-main .adm-gloss-head-row {
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.admin-layout .admin-main .adm-gloss-cell {
  padding: 0.75rem 1rem;
}
.admin-layout .admin-main .adm-gloss-cell-center {
  padding: 0.75rem 1rem;
  text-align: center;
}
.admin-layout .admin-main .adm-gloss-cell-right {
  padding: 0.75rem 1rem;
  text-align: right;
}
.admin-layout .admin-main .adm-gloss-cell-term {
  padding: 0.75rem 1rem;
  font-weight: 600;
}
.admin-layout .admin-main .adm-gloss-badge-sm {
  font-size: 0.7rem;
}
.admin-layout .admin-main .adm-gloss-cell-slug {
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-primary-text);
}
.admin-layout .admin-main .adm-gloss-slug-link {
  /* !important: tautan di dalam <td> kena aturan tautan isi style.css (termasuk :visited/:hover) */
  color: inherit !important;
  text-decoration: underline !important;
}
.admin-layout .admin-main .adm-gloss-cell-def {
  padding: 0.75rem 1rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  max-width: 320px;
}

/* admin/glossary/form.php */
.admin-layout .admin-main .adm-gloss-form-card {
  max-width: 850px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 2rem;
}
.admin-layout .admin-main .adm-gloss-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
  font-family: inherit;
}
.admin-layout .admin-main .adm-gloss-input-mono {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
  font-family: var(--font-mono);
}
.admin-layout .admin-main .adm-gloss-hint {
  color: var(--color-text-dim);
  display: block;
  margin-top: 0.35rem;
}
.admin-layout .admin-main .adm-gloss-textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
  font-family: inherit;
  resize: vertical;
  line-height: 1.6;
}
.admin-layout .admin-main .adm-gloss-check-label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
}
.admin-layout .admin-main .adm-gloss-check {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}
.admin-layout .admin-main .adm-gloss-check-hint {
  color: var(--color-text-dim);
  display: block;
  margin-top: 0.25rem;
  margin-left: 2rem;
}
.admin-layout .admin-main .adm-gloss-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
}
.admin-layout .admin-main .adm-gloss-btn-save {
  font-weight: 600;
  padding: 0.75rem 2rem;
}

/* admin/posts/index.php */
.admin-layout .admin-main .adm-posts-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
}
.admin-layout .admin-main .adm-posts-col-check {
  width: 2rem;
}
.admin-layout .admin-main .adm-posts-cell-title {
  max-width: 280px;
}

/* admin/posts/form.php */
.admin-layout .admin-main .adm-posts-form-card {
  padding: 2.5rem;
  max-width: 900px;
}
.admin-layout .admin-main .adm-posts-series-box {
  grid-column: 1 / -1;
  background: var(--color-surface-raised);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
.admin-layout .admin-main .adm-posts-series-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}
.admin-layout .admin-main .adm-posts-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.admin-layout .admin-main .adm-posts-link-btn {
  background: none;
  border: none;
  color: var(--color-primary-text);
  cursor: pointer;
  font-size: 0.8rem;
  text-decoration: underline;
}
.admin-layout .admin-main .adm-posts-full-row {
  grid-column: 1 / -1;
}
.admin-layout .admin-main .adm-posts-content-input {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  flex: 1;
  resize: vertical;
  min-height: 400px;
}
.admin-layout .admin-main .adm-posts-preview-box {
  min-height: 400px;
}
.admin-layout .admin-main .adm-posts-preview-placeholder {
  color: var(--color-text-muted);
  font-style: italic;
}
.admin-layout .admin-main .adm-posts-cat-box {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
  max-height: 250px;
  overflow-y: auto;
}
.admin-layout .admin-main .adm-posts-cat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}
.admin-layout .admin-main .adm-posts-tag-box {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.admin-layout .admin-main .adm-posts-popular-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-right: 0.5rem;
}
.admin-layout .admin-main .adm-posts-tag-suggest {
  font-size: 0.75rem;
  background: var(--color-info-bg);
  color: var(--color-primary-text);
  border: 1px solid var(--color-primary);
  padding: 0.2rem 0.5rem;
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.2s;
}
.admin-layout .admin-main .adm-posts-tag-count {
  opacity: 0.7;
  font-size: 0.65rem;
}
.admin-layout .admin-main .adm-posts-tag-item-count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: var(--color-surface);
  padding: 0.1rem 0.4rem;
  border-radius: 99px;
}

/* admin/reports/index.php */
.admin-layout .admin-main .adm-reports-flash-success {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--color-success);
}
.admin-layout .admin-main .adm-reports-flash-error {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--color-danger);
}
.admin-layout .admin-main .adm-reports-empty {
  padding: 4rem 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  text-align: center;
}
.admin-layout .admin-main .adm-reports-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.admin-layout .admin-main .adm-reports-empty-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}
.admin-layout .admin-main .adm-reports-empty-text {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}
.admin-layout .admin-main .adm-reports-type-badge {
  background: var(--color-info-bg);
  color: var(--color-primary-text);
}
.admin-layout .admin-main .adm-reports-row-btn {
  margin-right: 0.3rem;
}

/* admin/reports/form.php */
.admin-layout .admin-main .adm-reports-form-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}
.admin-layout .admin-main .adm-reports-metrics-title {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  color: var(--color-text);
}
.admin-layout .admin-main .adm-reports-metrics-desc {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.admin-layout .admin-main .adm-reports-side-title {
  margin: 0 0 1rem;
  font-size: 1rem;
  color: var(--color-text);
}
.admin-layout .admin-main .adm-reports-field-type {
  margin-bottom: 1.25rem;
}
.admin-layout .admin-main .adm-reports-check {
  accent-color: var(--color-primary);
  transform: scale(1.2);
}
.admin-layout .admin-main .adm-reports-btn-save {
  width: 100%;
  padding: 0.75rem;
  font-weight: 600;
}
.admin-layout .admin-main .adm-reports-pdf-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--color-text);
}
.admin-layout .admin-main .adm-reports-pdf-desc {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.admin-layout .admin-main .adm-reports-pdf-current {
  margin-bottom: 1rem;
  font-size: 0.85rem;
  background: var(--color-surface);
  padding: 0.6rem;
  border-radius: 6px;
}

/* admin/roles/index.php */
.admin-layout .admin-main .adm-roles-title {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
}
.admin-layout .admin-main .adm-roles-table-card {
  overflow-x: auto;
}
.admin-layout .admin-main .adm-roles-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.admin-layout .admin-main .adm-roles-col-perms {
  padding: 1rem;
  width: 50%;
}
.admin-layout .admin-main .adm-roles-cell-slug {
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.admin-layout .admin-main .adm-roles-no-perms {
  color: var(--color-text-dim);
  font-size: 0.85rem;
}
.admin-layout .admin-main /* Halaman role: permission dikelompokkan dengan keterangannya */
.adm-roles-perm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.adm-roles-group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin: 0 0 1.25rem;
}
.adm-roles-group legend {
  font-weight: 700;
  padding: 0 0.4rem;
}
.adm-roles-perm {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.75rem;
  align-items: start;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}
.adm-roles-perm:last-of-type { border-bottom: 0; }
.adm-roles-perm input { margin-top: 0.3rem; }
.adm-roles-perm label { font-weight: 700; }
.adm-roles-perm-desc {
  grid-column: 2;
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.adm-users-role-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.adm-roles-perm-chip {
  font-size: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  color: var(--color-text-muted);
}
.admin-layout .admin-main .adm-roles-inline-form {
  display: inline;
}
.admin-layout .admin-main .adm-roles-locked {
  font-size: 0.8rem;
  color: var(--color-text-dim);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: var(--color-surface);
}

/* admin/roles/form.php */
.admin-layout .admin-main .adm-roles-form-card {
  padding: 2rem;
  max-width: 800px;
}
.admin-layout .admin-main .adm-roles-input {
  width: 100%;
  max-width: 400px;
}
.admin-layout .admin-main .adm-roles-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
.admin-layout .admin-main .adm-roles-perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}
.admin-layout .admin-main .adm-roles-perm-check {
  margin-top: 0.2rem;
  transform: scale(1.2);
  accent-color: var(--color-primary);
}
.admin-layout .admin-main .adm-roles-perm-slug {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.admin-layout .admin-main .adm-roles-actions {
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
  text-align: right;
}
.admin-layout .admin-main .adm-roles-btn-cancel {
  margin-right: 1rem;
  text-decoration: none;
}

/* admin/software/index.php */
.admin-layout .admin-main .adm-sw-orphan-card {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border-left: 4px solid var(--color-warning);
  background: var(--color-surface-2);
}
.admin-layout .admin-main .adm-sw-cell-file {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-layout .admin-main .adm-sw-orphan-title {
  margin-top: 3rem;
  margin-bottom: 1rem;
  color: var(--color-warning);
  font-size: 1.25rem;
}
.admin-layout .admin-main .adm-sw-cell-path {
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}

/* admin/software/form.php */
.admin-layout .admin-main .adm-sw-form-card {
  padding: 2.5rem;
  max-width: 900px;
}
.admin-layout .admin-main .adm-sw-publish-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 0.5rem;
}
.admin-layout .admin-main .adm-sw-check {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-primary);
}
.admin-layout .admin-main .adm-sw-grow {
  flex-grow: 1;
}
.admin-layout .admin-main .adm-sw-current-file {
  background: var(--color-surface-2);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--color-border);
}
.admin-layout .admin-main .adm-sw-current-name {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text);
}
.admin-layout .admin-main .adm-sw-dropzone {
  background: var(--color-info-bg);
  border: 2px dashed var(--color-primary);
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}
.admin-layout .admin-main .adm-sw-dropzone-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}
.admin-layout .admin-main .adm-sw-file-input {
  display: none;
}
.admin-layout .admin-main .adm-sw-dropzone-hint {
  font-size: 0.78rem;
  color: var(--color-text-dim);
}
.admin-layout .admin-main .adm-sw-selected {
  margin-top: 1rem;
  background: var(--color-surface-2);
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
}
.admin-layout .admin-main .adm-sw-file-size {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.admin-layout .admin-main .adm-sw-progress-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}
.admin-layout .admin-main .adm-sw-progress-track {
  background: var(--color-surface-2);
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
}
.admin-layout .admin-main .adm-sw-progress-bar {
  width: var(--progress, 0%); /* persen unggahan, diisi JS */
  height: 100%;
  background: var(--color-primary);
  border-radius: 99px;
  transition: width 0.15s ease;
}
.admin-layout .admin-main .adm-sw-done {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
  border-radius: 0.75rem;
  text-align: left;
}
.admin-layout .admin-main .adm-sw-error {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  border-radius: 0.5rem;
  color: var(--color-danger);
  font-size: 0.875rem;
}
.admin-layout .admin-main .adm-sw-desc-input {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  flex: 1;
  resize: vertical;
  min-height: 300px;
}
.admin-layout .admin-main .adm-sw-preview-box {
  min-height: 300px;
}
.admin-layout .admin-main .adm-sw-preview-placeholder {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Lencana tipe & status: warna datang dari PHP sebagai variabel CSS. */
.admin-layout .admin-main .adm-ann-type-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: bold;
  background: var(--type-bg);
  color: var(--type-color);
  text-transform: uppercase;
}
.admin-layout .admin-main .adm-ann-status {
  color: var(--status-color);
  font-weight: bold;
  font-size: 0.85rem;
}

/* posts/index: tab status */
.admin-layout .admin-main .adm-posts-tab {
  color: var(--color-text-muted);
  font-weight: normal;
}
.admin-layout .admin-main .adm-posts-tab.is-active {
  color: var(--color-primary);
  font-weight: bold;
}
/* display diatur JS (none/flex) lewat style inline */
.admin-layout .admin-main .adm-posts-bulk-toolbar {
  background: var(--color-info-bg);
  border: 1px solid var(--color-primary);
  border-radius: 0.75rem;
  padding: 0.875rem 1.25rem;
  margin-bottom: 1rem;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* posts/form: label kategori (indentasi = data dari PHP) */
.admin-layout .admin-main .adm-posts-cat-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding-left: var(--cat-indent, 0rem);
  font-size: 0.85rem;
}
/* display diatur JS (none/block) lewat style inline */
.admin-layout .admin-main .adm-posts-tag-results {
  position: absolute;
  top: 4.5rem;
  left: 1rem;
  right: 1rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: var(--shadow-md);
}
.admin-layout .admin-main .adm-posts-tag-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-layout .admin-main .adm-posts-tag-item:hover {
  background: var(--color-info-bg);
}
.admin-layout .admin-main .adm-posts-toast {
  font-size: 0.8rem;
  color: var(--color-primary-text);
  margin-left: 1rem;
}
.admin-layout .admin-main .adm-posts-draft-banner {
  background: var(--color-info-bg);
  border: 1px solid var(--color-primary);
  border-radius: 0.75rem;
  padding: 0.875rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.admin-layout .admin-main .adm-posts-save-indicator {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  transition: opacity 0.3s;
}
.admin-layout .admin-main .adm-posts-save-indicator.is-faded {
  opacity: 0.4;
}

/* reports/form: pengganti fungsi inputStyle() lama */
.admin-layout .admin-main .adm-reports-input {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-family: var(--font-sans);
  box-sizing: border-box;
}
.admin-layout .admin-main .adm-reports-flex-2 { flex: 2; }
.admin-layout .admin-main .adm-reports-flex-1 { flex: 1; }
.admin-layout .admin-main .adm-reports-input-mono {
  font-family: var(--font-mono);
  line-height: 1.6;
}
.admin-layout .admin-main .adm-reports-input-file { padding: 0.5rem; }

/* roles/form: kartu izin; .is-checked diberi PHP bila izin dimiliki */
.admin-layout .admin-main .adm-roles-perm {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  cursor: pointer;
  background: var(--color-surface);
  transition: all 0.2s;
}
.admin-layout .admin-main .adm-roles-perm.is-checked {
  border-color: var(--color-primary);
  background: var(--color-info-bg);
}
.admin-layout .admin-main .adm-roles-perm-name {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.15rem;
}
.admin-layout .admin-main .adm-roles-perm.is-checked .adm-roles-perm-name {
  color: var(--color-primary);
}

/* software/form: keadaan yang diatur JS */
.admin-layout .admin-main .adm-sw-dropzone.is-dragover {
  border-color: var(--color-primary);
  background: var(--color-info-bg);
}
/* Tombol terbit dikunci sampai berkas diunggah (JS melepas kelas ini) */
.admin-layout .admin-main .adm-sw-publish-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   admin/posts/analytics.php — halaman diberi kelas .page-adm-posts-analytics
   pada .admin-container. Aturan dari blok <style> lama dibungkus :where() agar
   spesifisitasnya tetap sama seperti dulu (blok itu dulu dimuat setelah
   style.css/ui.css; file area ini juga harus dimuat setelahnya).
   -------------------------------------------------------------------------- */
.page-adm-posts-analytics .adm-posts-col-percent { min-width: 200px; }
.page-adm-posts-analytics .adm-posts-percent-label { min-width: 40px; font-weight: bold; }
.page-adm-posts-analytics .adm-posts-progress {
  height: 10px;
  background-color: var(--color-surface-2);
  border-radius: 5px;
  overflow: hidden;
}
/* Lebar = data (persen pembaca) dari PHP */
.page-adm-posts-analytics .adm-posts-progress-bar {
  width: var(--bar-width);
  height: 100%;
}

:where(.page-adm-posts-analytics) .progress-bar.bg-success { background-color: var(--color-success); }
:where(.page-adm-posts-analytics) .progress-bar.bg-warning { background-color: var(--color-warning); }
:where(.page-adm-posts-analytics) .progress-bar.bg-danger { background-color: var(--color-danger); }
:where(.page-adm-posts-analytics) .admin-table { width: 100%; border-collapse: collapse; }
:where(.page-adm-posts-analytics) .admin-table th, :where(.page-adm-posts-analytics) .admin-table td { padding: 12px 15px; border-bottom: 1px solid var(--color-border); text-align: left; }
:where(.page-adm-posts-analytics) .admin-table th { background-color: var(--color-surface); font-weight: 600; }
:where(.page-adm-posts-analytics) .text-center { text-align: center !important; }
:where(.page-adm-posts-analytics) .text-muted { color: var(--color-text-muted); }
:where(.page-adm-posts-analytics) .text-small { font-size: 0.85em; }
:where(.page-adm-posts-analytics) .badge-primary { background: var(--color-primary); color: var(--color-primary-foreground); padding: 3px 8px; border-radius: 12px; font-size: 0.9em; font-weight: bold; }
:where(.page-adm-posts-analytics) .d-flex { display: flex; }
:where(.page-adm-posts-analytics) .align-items-center { align-items: center; }
:where(.page-adm-posts-analytics) .gap-2 { gap: 0.5rem; }
:where(.page-adm-posts-analytics) .flex-grow-1 { flex-grow: 1; }


/* ##########################################################################
   AREA: admin-2
   ########################################################################## */

/* ==========================================================================
   Area admin-2: dev center, email templates, media, migrations, newsletter,
   OAuth clients, pages, programs, projects, redeem codes, snippets, socials,
   tickets (src/Views/admin/...).
   Pengganti atribut style="" di view tersebut; nilainya sama persis dengan
   gaya inline lama. Selektor diberi kelas komponen (.card, .btn, .form-input …)
   agar menang atas aturan komponen seperti dulu gaya inline menang.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dev Center & Projects: formulir (devcenter/form.php, projects/form.php)
   -------------------------------------------------------------------------- */
.card.adm-devc-card,
.card.adm-proj-card {
  padding: 2.5rem;
  max-width: 900px;
}
.form-group.adm-devc-publish,
.form-group.adm-proj-publish {
  display: flex;
  align-items: flex-end;
  padding-bottom: 1.5rem;
}
input[type="checkbox"].adm-devc-check,
input[type="checkbox"].adm-proj-check {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-primary);
}
.badge.adm-devc-badge,
.badge.adm-proj-badge {
  font-size: 0.7rem;
}
.adm-devc-placeholder,
.adm-proj-placeholder {
  color: var(--color-text-muted);
  font-style: italic;
}
.form-textarea.adm-devc-editor,
.form-textarea.adm-proj-editor {
  font-family: var(--font-mono);
  flex: 1;
  resize: vertical;
}
.form-textarea.adm-devc-editor { font-size: 0.875rem; min-height: 450px; }
.form-textarea.adm-proj-editor { font-size: 0.9rem; min-height: 300px; }
.markdown-preview-box.adm-devc-preview { min-height: 450px; }
.markdown-preview-box.adm-proj-preview { min-height: 300px; }

/* --------------------------------------------------------------------------
   Email templates (email-templates/index.php, edit.php)
   -------------------------------------------------------------------------- */
.alert.adm-mail-alert-success,
.alert.adm-mail-alert-danger {
  margin-bottom: 20px;
  padding: 15px;
}
.alert.adm-mail-alert-success {
  background: var(--color-success-bg);
  border-left: 4px solid var(--color-success);
  color: var(--color-success);
}
.alert.adm-mail-alert-danger {
  background: var(--color-danger-bg);
  border-left: 4px solid var(--color-danger);
  color: var(--color-danger);
}
.admin-table th.adm-mail-th-actions {
  width: 100px;
}
.adm-mail-code {
  background: var(--color-info-bg);
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--color-primary-text);
  font-size: 13px;
  font-family: monospace;
}
.form-group.adm-mail-group {
  margin-bottom: 20px;
}
.adm-mail-label,
.adm-mail-label-muted {
  display: block;
  margin-bottom: 8px;
}
.adm-mail-label-muted {
  color: var(--color-text-muted);
}
.adm-mail-label {
  color: var(--color-text);
  font-weight: 500;
}
/* border !important: .form-input:valid/:invalid:not(:placeholder-shown)
   (spesifisitas 0,3,0) mewarnai tepi; gaya inline lama menimpanya. */
input.form-input.adm-mail-input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-border-hover) !important;
  background: var(--color-surface-raised);
  color: var(--color-text);
  border-radius: 4px;
}
input.form-input.adm-mail-input--readonly {
  background: var(--color-surface-2);
  cursor: not-allowed;
  color: var(--color-text-muted);
}
.adm-mail-hint {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.adm-mail-body {
  width: 100%;
  height: 500px;
  padding: 15px;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid var(--color-border-hover);
  background: var(--color-surface-raised);
  color: var(--color-text);
  border-radius: 4px;
  resize: vertical;
}
.btn.adm-mail-save {
  padding: 12px 24px;
}

/* --------------------------------------------------------------------------
   Media library (media/index.php)
   -------------------------------------------------------------------------- */
.adm-media-upload {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  border-radius: 1rem;
  margin-bottom: 2rem;
}
.adm-media-field {
  flex: 1;
  min-width: 250px;
}
.adm-media-field-wide {
  flex: 2;
  min-width: 250px;
}
.btn.adm-media-upload-btn {
  padding: 0.75rem 1.5rem;
}
.adm-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.adm-media-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.adm-media-thumb {
  height: 160px;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.adm-media-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.adm-media-icon {
  font-size: 3rem;
}
.adm-media-name {
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.badge.adm-media-badge {
  font-size: 0.65rem;
}
.adm-media-shortcode {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--color-code-bg);
  padding: 0.5rem;
  border-radius: 0.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.adm-media-slug {
  color: var(--color-secondary);
}
.adm-media-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}
.adm-media-delete {
  background: none;
  border: none;
  color: var(--color-danger);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Database migrations (migrations/index.php)
   Dulu blok <style> di view; dibatasi ke halaman lewat .page-adm-mig
   (pada .admin-layout).
   -------------------------------------------------------------------------- */
.page-adm-mig .card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}
/* .card:hover dari style.css dulu menang atas .card halaman ini; jaga itu. */
.page-adm-mig .card:hover {
  border-color: var(--color-border-hover);
}
.page-adm-mig .badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  margin-left: 0.5rem;
  vertical-align: middle;
}
.page-adm-mig .warning-banner {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--color-warning);
  font-weight: 500;
}
.page-adm-mig .admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.page-adm-mig .admin-table th,
.page-adm-mig .admin-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.9rem;
}
.page-adm-mig .admin-table th {
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}
.page-adm-mig .admin-table tbody tr:last-child td {
  border-bottom: none;
}
.page-adm-mig .btn-run {
  background: var(--color-success);
  color: var(--color-bg);
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s;
}
.page-adm-mig .btn-run:hover {
  background: color-mix(in srgb, var(--color-success) 85%, var(--color-text));
}
.page-adm-mig .row-success {
  border-left: 3px solid var(--color-success) !important;
}
.page-adm-mig .badge.adm-mig-badge-muted {
  background: var(--color-text-muted);
}
.adm-mig-uptodate {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--color-success-bg);
  border: 1px dashed var(--color-success);
  border-radius: 8px;
  color: var(--color-success);
  text-align: center;
}

/* Kotak pesan flash (migrations/index.php, socials/index.php) */
.adm-mig-flash-success,
.adm-mig-flash-danger,
.adm-socials-flash-success,
.adm-socials-flash-danger {
  border-radius: 8px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}
.adm-mig-flash-success,
.adm-socials-flash-success {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
  color: var(--color-success);
}
.adm-mig-flash-danger,
.adm-socials-flash-danger {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}

/* --------------------------------------------------------------------------
   Newsletter (newsletter/index.php)
   -------------------------------------------------------------------------- */
.adm-news-digest {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-secondary);
}
.adm-news-digest-title {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--color-secondary);
}
.adm-news-digest-text {
  color: var(--color-text-muted);
  font-size: 14px;
  margin-bottom: 1rem;
  line-height: 1.5;
}
/* Tiga kelas: harus menang atas .btn--primary:hover (0,2,0), seperti gaya inline dulu. */
.btn.btn--primary.adm-news-digest-btn {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  border: none;
}
.adm-news-section-title {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   OAuth clients (oauth/index.php, oauth/form.php)
   -------------------------------------------------------------------------- */
.adm-oauth-reveal {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
}
.adm-oauth-secret {
  background: var(--color-surface-2);
  padding: 1rem;
  border-radius: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  word-break: break-all;
  border: 1px solid var(--color-border);
}
.adm-oauth-scroll {
  overflow-x: auto;
}
/* Tabel polos (oauth, pages, redeem codes) */
.adm-oauth-table,
.adm-pages-table,
.adm-redeem-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.adm-oauth-empty {
  padding: 2rem;
  text-align: center;
  color: var(--color-text-dim);
}
.adm-oauth-client-id {
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-secondary);
}
.badge.adm-oauth-role {
  background: var(--color-primary-glow);
  color: var(--color-primary-text);
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.adm-oauth-none {
  opacity: 0.5;
}
.btn.adm-oauth-btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}
.adm-oauth-inline-form {
  display: inline;
}
.adm-oauth-hint {
  font-size: 0.85rem;
  color: var(--color-text-dim);
  margin-top: 0.5rem;
}
.form-group.adm-oauth-secret-box {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--color-surface-2);
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
}
.form-label.adm-oauth-label-secondary {
  color: var(--color-secondary);
}
.form-input.adm-oauth-readonly {
  opacity: 0.7;
  font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
   Custom pages (pages/index.php, pages/form.php)
   -------------------------------------------------------------------------- */
.container.adm-pages-container {
  max-width: 900px;
  padding: 2rem 1rem;
}
.container.adm-pages-container--wide {
  max-width: 1200px;
}
.adm-pages-title {
  margin: 0;
  font-size: 2rem;
}
.adm-pages-flash-success,
.adm-pages-flash-danger {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}
.adm-pages-flash-success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}
.adm-pages-flash-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}
.adm-pages-tag {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
}
.adm-pages-tag--md {
  background: var(--color-info-bg);
  color: var(--color-primary-text);
}
.adm-pages-tag--html {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
.btn.adm-pages-btn {
  padding: 0.3rem 0.8rem;
}
.adm-pages-form {
  background: var(--color-surface);
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid var(--color-border);
}
.adm-pages-input {
  width: 100%;
  padding: 0.8rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 8px;
}
.adm-pages-textarea {
  font-family: var(--font-mono);
  resize: vertical;
}

/* --------------------------------------------------------------------------
   Programs (programs/form.php)
   -------------------------------------------------------------------------- */
.form-group.adm-prog-wide {
  flex: 2;
}
.form-input.adm-prog-content {
  height: 300px;
}

/* --------------------------------------------------------------------------
   Redeem codes (redeem_codes/index.php)
   -------------------------------------------------------------------------- */
.adm-redeem-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
  align-items: start;
}
.form-input.adm-redeem-dur {
  width: 80px;
}
.card.adm-redeem-scroll {
  overflow-x: auto;
}
.adm-redeem-code {
  padding: 1rem;
  font-family: var(--font-mono);
  font-weight: bold;
  color: var(--color-primary-text);
}
.adm-redeem-dim {
  color: var(--color-text-dim);
}

/* --------------------------------------------------------------------------
   Snippets (snippets/index.php, snippets/form.php)
   -------------------------------------------------------------------------- */
.adm-snip-title {
  font-weight: 500;
}
.adm-snip-shortcode {
  background: var(--color-surface-2);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  color: var(--color-secondary);
  cursor: pointer;
}
.badge.adm-snip-lang {
  background: var(--color-code-bg);
}
.form-input.adm-snip-code {
  font-family: var(--font-mono);
  background: var(--color-code-bg);
}

/* --------------------------------------------------------------------------
   Social media wall (socials/index.php)
   -------------------------------------------------------------------------- */
.adm-socials-title {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
  color: var(--color-text);
}
.adm-socials-intro {
  margin: 0 0 1.5rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.adm-socials-field {
  margin-bottom: 1.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.25rem;
  border-radius: 12px;
}
.adm-socials-input {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-family: var(--font-sans);
  box-sizing: border-box;
}
.adm-socials-hint {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 0.35rem;
}
.btn.adm-socials-save {
  padding: 0.75rem 2.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Support tickets (tickets/index.php)
   -------------------------------------------------------------------------- */
.adm-tickets-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.adm-tickets-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.adm-tickets-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.adm-tickets-stat-icon--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
.adm-tickets-stat-icon--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.adm-tickets-stat-icon--info {
  background: var(--color-info-bg);
  color: var(--color-primary-text);
}
.adm-tickets-stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-text);
}
.admin-table td.adm-tickets-item {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-table td.adm-tickets-feedback-cell {
  max-width: 220px;
}
.adm-tickets-feedback {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ##########################################################################
   AREA: admin-forms-users
   ########################################################################## */

/* ==========================================================================
   Admin: Forms, Site Settings, Users, WhatsApp
   Gaya yang dulu inline (style="") di src/Views/admin/forms, site-settings,
   users dan whatsapp. Selektor gabungan (.btn.adm-…, .card.adm-…) menjaga
   kelas area tetap menang atas aturan komponen, seperti gaya inline dulu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Forms builder (admin/forms/*)
   -------------------------------------------------------------------------- */
.container.adm-forms-page {
    margin-top: 2rem;
    padding-bottom: 5rem;
}
.adm-forms-title {
    margin: 0;
    font-size: 1.8rem;
    color: var(--color-primary-text);
}
.adm-forms-subtitle {
    margin: 0;
    margin-top: 0.5rem;
    color: var(--color-text-muted);
}
.btn.adm-forms-btn-compact {
    padding: 0.4rem 0.8rem;
}
.adm-forms-tab-active {
    padding: 0.75rem 1.5rem;
    color: var(--color-primary-text);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid var(--color-primary);
}
.adm-forms-tab {
    padding: 0.75rem 1.5rem;
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid transparent;
}
.adm-forms-empty {
    text-align: center;
    padding: 4rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
}
.adm-forms-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}
.adm-forms-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}
.adm-forms-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1.5rem;
}
.adm-forms-stat-title {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    color: var(--color-text);
}
.adm-forms-stat-count {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1rem;
}
.adm-forms-muted-italic {
    color: var(--color-text-muted);
    font-style: italic;
}
.adm-forms-option-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.adm-forms-option-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
}
.adm-forms-option-label {
    font-weight: 500;
    color: var(--color-text);
    word-break: break-all;
    padding-right: 1rem;
}
.adm-forms-bar-track {
    background: var(--color-surface-2);
    border-radius: 4px;
    height: 8px;
    width: 100%;
    overflow: hidden;
}
.adm-forms-text-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.adm-forms-text-item {
    background: var(--color-surface-2);
    padding: 0.8rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-text);
    line-height: 1.5;
}
.adm-forms-badge-login {
    font-size: 0.75rem;
    background: var(--color-surface-2);
    color: var(--color-secondary);
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
}
.adm-forms-badge-public {
    font-size: 0.75rem;
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
}
.adm-forms-ext-link {
    margin-left: 0.5rem;
    text-decoration: none !important;
}
.adm-forms-status-active {
    color: var(--color-success);
    font-weight: 500;
}
.adm-forms-status-inactive {
    color: var(--color-danger);
    font-weight: 500;
}
.adm-forms-count-link {
    color: var(--color-secondary) !important;
    font-weight: bold;
    text-decoration: none !important;
}
.adm-forms-date-cell {
    color: var(--color-text-dim);
    font-size: 0.9rem;
}
.btn.adm-forms-btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}
.adm-forms-table-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    overflow: hidden;
}
.table-responsive.adm-forms-table-scroll {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: auto;
}
.adm-forms-thead {
    position: sticky;
    top: 0;
    background: var(--color-surface-2);
    z-index: 10;
}
.adm-forms-th {
    border-bottom: 2px solid var(--color-primary);
    padding: 1rem;
    font-weight: 600;
    color: var(--color-text);
    min-width: 150px;
}
.adm-forms-value-cell {
    padding: 1rem;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adm-forms-section-title {
    margin-top: 0;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}
.adm-forms-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}
.adm-forms-empty-fields {
    text-align: center;
    padding: 3rem;
    color: var(--color-text-muted);
}
.btn.adm-forms-btn-lg {
    font-size: 1.1rem;
    padding: 0.8rem 2rem;
}
.modal-overlay.adm-forms-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-overlay);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.adm-forms-modal-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    width: 100%;
    max-width: 600px;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
}
.adm-forms-grid-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
}
.adm-forms-select-native {
    appearance: auto;
}
.adm-forms-options-box {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
}
.btn.adm-forms-btn-xs {
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
}
.adm-forms-type-badge {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    background: var(--color-surface-2);
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    color: var(--color-primary-text);
}

/* Batang persentase di analytics: lebar dari data (--bar-width di view) */
.adm-forms-bar-fill {
    background: var(--color-primary);
    height: 100%;
    width: var(--bar-width);
    border-radius: 4px;
    transition: width 0.5s ease;
}
/* Baris pertanyaan yang dibuat JS di form.php */
.adm-forms-field-row {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 1rem;
    border-radius: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.btn.adm-forms-btn-opt {
    padding: 0.3rem 0.6rem;
}

/* --------------------------------------------------------------------------
   Users (admin/users/*)
   -------------------------------------------------------------------------- */
.adm-users-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}
.adm-users-search-input {
    width: 250px;
}
.card.adm-users-table-card {
    overflow-x: auto;
}
.adm-users-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.adm-users-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.adm-users-avatar-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
}
.btn.adm-users-btn-verify {
    padding: 0.25rem 0.5rem;
    border-color: var(--color-success);
    color: var(--color-success);
    text-decoration: none;
}
.btn.adm-users-btn-xs {
    padding: 0.25rem 0.5rem;
    text-decoration: none;
}
.adm-users-edit-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}
.adm-users-card-title {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.75rem;
}
.form-label.adm-users-label-dim {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-text-dim);
}
.form-input.adm-users-input-readonly {
    width: 100%;
    opacity: 0.7;
}
.adm-users-hint {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.35rem;
}
.adm-users-assign-form {
    margin-bottom: 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 1.25rem;
    border-radius: 0.5rem;
}
.adm-users-field-role {
    flex: 1;
    min-width: 200px;
}
.adm-users-field-duration {
    flex: 1;
    min-width: 150px;
}
.adm-users-role-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1rem;
}
.adm-users-text-dim {
    color: var(--color-text-dim);
}
.adm-users-only-role {
    font-size: 0.75rem;
    color: var(--color-text-dim);
    text-transform: uppercase;
}
.adm-users-logs-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: 3rem 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.adm-users-logs-empty-icon {
    font-size: 2.5rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}
.adm-users-logs-scroll {
    overflow-y: auto;
    max-height: 500px;
    padding-right: 1rem;
}
.adm-users-log-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.adm-users-log-item {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.adm-users-log-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}
.adm-users-log-desc {
    font-size: 0.9rem;
    color: var(--color-text-dim);
    margin: 0;
}

/* --------------------------------------------------------------------------
   WhatsApp (admin/whatsapp/*)
   -------------------------------------------------------------------------- */
.modal-overlay.adm-wa-modal-overlay {
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-overlay);
    z-index: 9999;
}
.modal.adm-wa-modal {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    width: 100%;
    max-width: 500px;
    padding: 0;
}
.modal__close.adm-wa-modal-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-muted);
    cursor: pointer;
}
input.adm-wa-input {
    width: 100%;
    padding: 0.75rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: 0.5rem;
    outline: none;
}
input[type="radio"].adm-wa-mode-radio {
    margin-top: 3px;
    accent-color: var(--color-primary);
    width: 18px;
    height: 18px;
}
.card.adm-wa-connected-card {
    max-width: 600px;
    margin: 3rem auto;
    text-align: center;
    padding: 3rem;
}
.adm-wa-connected-icon {
    font-size: 4rem;
    color: var(--color-success);
    margin-bottom: 1rem;
}
.adm-wa-instance-box {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.adm-wa-instance-id {
    color: var(--color-text);
    font-size: 1rem;
    word-break: break-all;
}
.card.adm-wa-pairing-card {
    max-width: 700px;
    margin: 0 auto 2rem auto;
    text-align: center;
    padding: 2.5rem 3rem;
}
.adm-wa-pairing-code {
    display: inline-block;
    background: var(--color-surface-2);
    border: 4px solid var(--color-success);
    border-radius: 1.25rem;
    padding: 1.5rem 3rem;
    margin-bottom: 1.5rem;
    letter-spacing: 0.4em;
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-family: 'Courier New', Courier, monospace;
    font-weight: 900;
    color: var(--color-success);
    user-select: all;
    cursor: text;
}
.card.adm-wa-request-card {
    max-width: 700px;
    margin: 0 auto 2rem auto;
    padding: 2rem 2.5rem;
}
.adm-wa-phone-field {
    flex: 1;
    min-width: 200px;
}
input.adm-wa-phone-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: 1rem;
}
.btn.adm-wa-btn-pairing {
    white-space: nowrap;
    padding: 0.75rem 1.5rem;
}
.adm-wa-phone-hint {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin-top: 0.75rem;
}
.card.adm-wa-qr-card {
    max-width: 700px;
    margin: 0 auto 2rem auto;
    text-align: center;
    padding: 2rem;
}
/* allow-color: QR code needs a white quiet zone to scan, in both themes */
.adm-wa-qr-box {
    background: #fff;
    padding: 1.5rem;
    border-radius: 1rem;
    display: inline-block;
    margin-bottom: 1.5rem;
}
.adm-wa-qr-img {
    width: min(480px, 100%);
    height: auto;
    display: block;
    border-radius: 0.5rem;
}
.adm-wa-qr-expiry {
    color: var(--color-warning);
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}
.card.adm-wa-waiting-card {
    max-width: 600px;
    margin: 0 auto 2rem auto;
    text-align: center;
    padding: 2.5rem;
}
.adm-wa-waiting-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}
select.adm-wa-filter-select {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
}
.adm-wa-table {
    width: 100%;
    border-collapse: collapse;
}
.adm-wa-table-head-row {
    border-bottom: 2px solid var(--color-border);
    text-align: left;
}
.adm-wa-instance-tag {
    background: var(--color-surface-2);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}
.adm-wa-message {
    background: var(--color-surface-2);
    padding: 0.75rem;
    border-radius: 0.5rem;
    border-left: 3px solid var(--color-primary);
    word-break: break-word;
}
.card.adm-wa-broadcast-card {
    background: var(--color-surface-raised);
    border-radius: 1rem;
}
.adm-wa-status-dot {
    font-size: .6em;
    vertical-align: middle;
}

/* Pilihan mode koneksi di modal "Create New WA Instance" (index.php);
   JS memindahkan .is-selected saat radio berubah. */
.adm-wa-mode-option {
    padding: 0.85rem 1rem;
    border: 2px solid var(--color-border);
    border-radius: 0.6rem;
}
.adm-wa-mode-option.is-selected {
    border-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Site settings (admin/site-settings/index.php)
   -------------------------------------------------------------------------- */
/* Tab, panel dan bilah simpan (dulu blok <style> di view; nama kelasnya
   hanya dipakai di halaman ini) */
.settings-nav-tabs {

    display: flex;

    gap: 0.5rem;

    border-bottom: 1px solid var(--color-border);

    margin-bottom: 2rem;

    overflow-x: auto;

    padding-bottom: 1px;

}

.settings-nav-tab {

    padding: 0.75rem 1.25rem;

    font-size: 0.95rem;

    font-weight: 600;

    color: var(--color-text-muted);

    background: transparent;

    border: none;

    border-bottom: 3px solid transparent;

    cursor: pointer;

    transition: all 0.2s;

    white-space: nowrap;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}

.settings-nav-tab:hover {

    color: var(--color-text);

    background: var(--color-surface);

    border-radius: 8px 8px 0 0;

}

.settings-nav-tab.active {

    color: var(--color-primary-text);

    border-bottom-color: var(--color-primary);

}

.settings-tab-pane {

    display: none;

}

.settings-tab-pane.active {

    display: block;

}

.sticky-save-bar {

    position: sticky;

    bottom: 1.5rem;

    background: var(--color-surface-raised);

    border: 1px solid var(--color-border);

    box-shadow: var(--shadow-lg);

    border-radius: 14px;

    padding: 1rem 1.5rem;

    margin-top: 2rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    z-index: 100;

}

/* Kolom isian (dulu fungsi PHP inputStyle()) */
.adm-settings-input {
    width: 100%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-family: var(--font-sans);
    box-sizing: border-box;
}
.adm-settings-input--mono {
    font-family: var(--font-mono);
}
.adm-settings-input--resize {
    resize: vertical;
}
.adm-settings-input--dark {
    color-scheme: dark;
}
.adm-settings-flash {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--color-success);
}
.adm-settings-live-banner {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.adm-settings-live-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-danger);
    font-weight: 600;
}
.adm-settings-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-danger);
}
.btn.adm-settings-preview-btn {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger);
    color: var(--color-text);
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    text-decoration: none;
}
.adm-settings-card-title {
    margin: 0 0 0.4rem;
    font-size: 1.3rem;
    color: var(--color-text);
}
/* Logo resmi di Pengaturan Situs */
.adm-settings-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}
.adm-settings-logo-preview {
  width: 120px;
  height: 120px;
  object-fit: contain;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  /* kotak-kotak tipis agar bagian transparan logo terlihat */
  background-color: var(--color-bg);
  background-image: conic-gradient(var(--color-surface-2) 25%, transparent 0 50%, var(--color-surface-2) 0 75%, transparent 0);
  background-size: 16px 16px;
}
.adm-settings-card-intro {
    margin: 0 0 2rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}
.adm-settings-hint {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 0.35rem;
}
.adm-settings-label-note {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}
.adm-settings-counter {
    text-align: right;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}
.adm-settings-social {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
}
.adm-settings-social-body {
    flex: 1;
    min-width: 0;
}
.adm-settings-social-label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}
input.adm-settings-social-input {
    width: 100%;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 0.85rem;
    font-family: var(--font-mono);
    outline: none;
    padding: 0;
}
.adm-settings-maint-intro {
    margin: 0.4rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}
.adm-settings-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
    gap: 0.75rem;
}
.adm-settings-type-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
}
.adm-settings-choice-desc {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}
.adm-settings-toggle-title {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-text);
}
.adm-settings-toggle-desc {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
    line-height: 1.4;
}
.adm-settings-saved {
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--color-success);
}
.adm-settings-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.btn.adm-settings-test-btn {
    background: var(--color-surface-2);
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
    padding: 0.6rem 1.2rem;
}
.adm-settings-smtp-result {
    font-size: 0.85rem;
}
.adm-settings-save-note {
    font-size: 0.88rem;
    color: var(--color-text-muted);
}
.btn.adm-settings-save-btn {
    padding: 0.75rem 2.5rem;
    font-weight: 600;
    font-size: 1rem;
}
.adm-settings-hidden-form {
    display: none;
}

/* Kartu & tombol Maintenance: .is-live saat mode maintenance aktif */
.card.adm-settings-maint-card {
    padding: 2rem;
    position: relative;
    overflow: hidden;
}
.card.adm-settings-maint-card.is-live {
    border-color: var(--color-danger);
    background: var(--color-danger-bg);
}
.btn.adm-settings-maint-toggle {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success);
    color: var(--color-success);
    font-weight: 600;
    padding: 0.6rem 1.2rem;
}
.btn.adm-settings-maint-toggle.is-live {
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* Kartu jenis maintenance (radio tersembunyi); JS mengatur .is-selected */
.adm-settings-type-option {
    padding: 0.85rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid var(--color-border);
    background: var(--color-bg);
    transition: all 0.2s;
}
.adm-settings-type-option:hover,
.adm-settings-type-option.is-selected {
    border-color: var(--color-primary);
}
.adm-settings-type-option.is-selected {
    background: var(--color-info-bg);
}
.adm-settings-type-radio {
    display: none;
}

/* Pilihan mode registrasi / tiket */
.adm-settings-choice {
    cursor: pointer;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    border: 2px solid var(--color-border);
    background: var(--color-bg);
    transition: all 0.2s;
}
.adm-settings-choice.is-selected {
    border-color: var(--color-primary);
    background: var(--color-info-bg);
}
.adm-settings-choice--danger.is-selected {
    background: var(--color-danger-bg);
}
.adm-settings-choice-radio {
    margin-top: 0.15rem;
    accent-color: var(--color-primary);
}
.adm-settings-toggle-check {
    margin-top: 0.2rem;
    accent-color: var(--color-primary);
}

/* Penghitung meta description: .is-over di atas 140 karakter */
.adm-settings-desc-count.is-over {
    color: var(--color-warning);
}
/* Hasil uji SMTP: data-state diisi JS */
.adm-settings-smtp-result[data-state="pending"] {
    color: var(--color-text-muted);
}
.adm-settings-smtp-result[data-state="ok"] {
    color: var(--color-success);
}
.adm-settings-smtp-result[data-state="error"] {
    color: var(--color-danger);
}


/* ##########################################################################
   AREA: layout-auth
   ########################################################################## */

/* ==========================================================================
   Area: layout & auth
   Gaya yang dulu ditulis inline (style="" / <style>) di:
     src/Views/layouts/{nav,footer,accessibility_widget,onboarding_modal,socials}.php
     src/Views/auth/*.php, src/Views/home/index.php, src/Views/oauth/authorize.php
   Prefiks kelas: lay-, a11yw-, auth-x-, home-, oauth-.
   Nilai disalin persis dari gaya inline lama. Selektor majemuk
   (mis. .btn.auth-x-…) dipakai agar kelas ini tetap menang atas aturan
   komponen di style.css, seperti gaya inline dulu.
   ========================================================================== */

/* ── Bersama (auth) ─────────────────────────────────────────────────────── */
.auth-x-text-left { text-align: left; }

/* ── auth/2fa.php ───────────────────────────────────────────────────────── */
.container.auth-x-2fa-wrap {
  padding-top: 5rem;
  padding-bottom: 5rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-x-2fa-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 3rem;
  border-radius: 1rem;
  width: 100%;
  max-width: 450px;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.auth-x-2fa-icon {
  width: 64px;
  height: 64px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-primary-foreground);
}
.auth-x-2fa-desc {
  color: var(--color-text-muted);
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.6;
}
.auth-x-2fa-limit {
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 2rem;
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: left;
}
.alert.auth-x-alert-left {
  margin-bottom: 1.5rem;
  text-align: left;
}
.form-input.auth-x-2fa-code {
  font-size: 2rem;
  text-align: center;
  letter-spacing: 0.5rem;
  font-family: var(--font-mono);
  padding: 1rem;
}
.btn.auth-x-2fa-submit {
  width: 100%;
  justify-content: center;
  padding: 0.8rem;
  font-size: 1.1rem;
  margin-top: 1rem;
}

/* ── auth/2fa_timeout.php ───────────────────────────────────────────────── */
.container.auth-x-timeout-wrap {
  padding-top: 5rem;
  padding-bottom: 5rem;
  text-align: center;
}
.card.auth-x-timeout-card {
  padding: 3rem;
  max-width: 450px;
  margin: 0 auto;
}
.auth-x-timeout-title {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

/* ── auth/forgot_password.php ───────────────────────────────────────────── */
.auth-x-lead {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 1.75rem;
  text-align: center;
}
.alert.auth-x-alert-mb125 { margin-bottom: 1.25rem; }

/* ── auth/login.php ─────────────────────────────────────────────────────── */
.auth-x-login-incognito {
  background: var(--color-info-bg);
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  text-align: center;
  color: var(--color-text-muted);
}
.auth-x-icon-inline {
  vertical-align: middle;
  margin-right: 0.25rem;
}
.auth-x-link-strong {
  color: var(--color-primary-text);
  text-decoration: underline;
  font-weight: 600;
}
/* Tombol tab: JS mengganti className-nya, jadi gaya diikat ke wadah. */
.auth-tabs > .btn { flex: 1; }
.auth-x-or {
  position: relative;
  text-align: center;
  margin: 1.5rem 0;
}
.auth-x-or-rule {
  border: 0;
  border-top: 1px solid var(--color-border);
}
.auth-x-or-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-surface);
  padding: 0 10px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.btn.auth-x-passkey {
  width: 100%;
  display: flex;
  justify-content: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.auth-x-icon-mr050 { margin-right: 0.5rem; }
.btn.auth-x-passkey2 {
  margin-top: 1rem;
  display: none;
}
.btn.auth-x-lang {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}
.btn.auth-x-lang--gap { margin-left: 0.5rem; }
.btn.auth-x-lang.is-current {
  border-color: var(--color-primary);
  color: var(--color-primary-text);
}

/* ── auth/register.php ──────────────────────────────────────────────────── */
.auth-x-reg-banner {
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.auth-x-reg-banner--closed {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
}
.auth-x-reg-banner--invite {
  background: var(--color-info-bg);
  border: 1px solid var(--color-primary);
}
.auth-x-reg-title-danger {
  font-weight: 700;
  color: var(--color-danger);
  margin-bottom: 0.35rem;
}
.auth-x-reg-title-primary {
  font-weight: 700;
  color: var(--color-primary-text);
  margin-bottom: 0.35rem;
}
.auth-x-reg-banner-text {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.auth-x-optional {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.form-label.auth-x-terms-label {
  font-size: 0.85rem;
  font-weight: normal;
  color: var(--color-text-muted);
}

/* ── auth/reset_password.php ────────────────────────────────────────────── */
.auth-x-rp-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 0.75rem;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.auth-x-rp-track {
  height: 4px;
  background: var(--color-surface-2);
  border-radius: 99px;
  overflow: hidden;
}
/* width/background diubah JS lewat style (data kekuatan sandi). */
.auth-x-rp-bar {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  transition: width 0.3s, background 0.3s;
}
/* color diubah JS lewat style. */
.auth-x-rp-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.3rem;
}
.auth-x-rp-hint {
  font-size: 0.75rem;
  margin-top: 0.3rem;
}

/* ── auth/verify-email-error.php (dulu <style> di view) ─────────────────── */
.page-auth-verify-error .result-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--color-bg);
}
.page-auth-verify-error .result-card {
    background: var(--color-surface);
    border: 1px solid var(--color-danger);
    border-radius: 20px;
    padding: 3rem 2.5rem;
    max-width: 440px;
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-auth-verify-error .result-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-danger);
}
.page-auth-verify-error .result-icon {
    width: 90px; height: 90px;
    background: var(--color-danger-bg);
    border: 2px solid var(--color-danger);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 1.5rem;
}

/* ── auth/verify-email-success.php (dulu <style> di view) ───────────────── */
.page-auth-verify-success .result-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--color-bg);
}
.page-auth-verify-success .result-card {
    background: var(--color-surface);
    border: 1px solid var(--color-success);
    border-radius: 20px;
    padding: 3rem 2.5rem;
    max-width: 440px;
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-auth-verify-success .result-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-success);
}
.page-auth-verify-success .result-icon {
    width: 90px; height: 90px;
    background: var(--color-success-bg);
    border: 2px solid var(--color-success);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 1.5rem;
}
.page-auth-verify-success .result-redirect {
    font-size: 0.8rem;
    color: var(--color-text-dim);
    margin-top: 1rem;
}

/* Gaya inline lama kedua halaman hasil verifikasi */
.auth-x-result-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.6rem;
}
.auth-x-result-title--lg {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.6rem;
}
.auth-x-result-desc {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0 0 2rem;
}
.auth-x-result-desc--lg {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0 0 2rem;
}
.btn.auth-x-result-btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  text-decoration: none;
  border-radius: 10px;
}
.btn.auth-x-result-btn--lg {
  display: inline-block;
  padding: 0.85rem 2.5rem;
  text-decoration: none;
  border-radius: 10px;
}
.auth-x-result-btn-alt {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  text-decoration: none;
  border-radius: 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* ── auth/verify-email.php (dulu <style> di view) ───────────────────────── */
.page-auth-verify .verify-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background:
        var(--color-bg);
}

.page-auth-verify .verify-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 3rem 2.5rem;
    max-width: 480px;
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-auth-verify .verify-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
}

.page-auth-verify .verify-icon {
    width: 80px;
    height: 80px;
    background: var(--color-info-bg);
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin: 0 auto 1.5rem;
}

.page-auth-verify .verify-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.5rem;
}

.page-auth-verify .verify-email-badge {
    display: inline-block;
    background: var(--color-info-bg);
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    padding: 0.35rem 0.9rem;
    font-size: 0.88rem;
    color: var(--color-primary-text);
    margin: 0.75rem 0 1.25rem;
    word-break: break-all;
}

.page-auth-verify .verify-desc {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0 0 2rem;
}

.page-auth-verify .resend-btn {
    width: 100%;
    padding: 0.85rem 1.5rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--color-border);
    background: var(--color-info-bg);
    color: var(--color-primary-text);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.page-auth-verify .resend-btn:hover:not(:disabled) {
    background: var(--color-surface-2);
    border-color: var(--color-primary);
}

.page-auth-verify .resend-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-auth-verify .countdown-ring {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    min-height: 22px;
}

.page-auth-verify .countdown-ring svg {
    flex-shrink: 0;
}

.page-auth-verify .status-msg {
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: none;
}

.page-auth-verify .status-msg.success {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success);
    color: var(--color-success);
    display: block;
}

.page-auth-verify .status-msg.error {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
    display: block;
}

.page-auth-verify .verify-hint {
    font-size: 0.78rem;
    color: var(--color-text-dim);
    margin-top: 1.5rem;
    line-height: 1.5;
}

.page-auth-verify .verify-hint a {
    color: var(--color-primary-text);
    text-decoration: none;
}

/* Gaya inline lama auth/verify-email.php */
.auth-x-verify-warning {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: left;
  font-size: 0.85rem;
  color: var(--color-warning);
  line-height: 1.5;
}
.auth-x-mb125 { margin-bottom: 1.25rem; }
.btn.auth-x-verify-change {
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  margin-left: 0.5rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.auth-x-verify-change-form {
  background: var(--color-surface-2);
  padding: 1rem;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  text-align: left;
}
.auth-x-verify-label {
  font-size: 0.85rem;
  color: var(--color-text);
  font-weight: 600;
  display: block;
  margin-bottom: 0.4rem;
}
.form-input.auth-x-verify-input {
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
}
.btn.auth-x-verify-update {
  white-space: nowrap;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}
.btn.auth-x-verify-skip {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 0.75rem;
  border-radius: 10px;
  text-decoration: none;
  font-size: 0.9rem;
}
.auth-x-verify-progress {
  height: 3px;
  background: var(--color-surface-2);
  border-radius: 3px;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
/* Lebar awal dari PHP (--bar-width); JS lalu menimpa style.width. */
.auth-x-verify-progress-bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: 3px;
  transition: width 1s linear;
  width: var(--bar-width);
}

/* ── oauth/authorize.php ────────────────────────────────────────────────── */
.container.oauth-wrap {
  padding-top: 5rem;
  padding-bottom: 5rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oauth-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 3rem;
  border-radius: 1rem;
  width: 100%;
  max-width: 500px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.oauth-logo {
  width: 64px;
  height: 64px;
  background: var(--color-primary);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-primary-foreground);
}
.oauth-logo-client {
  width: 64px;
  height: 64px;
  background: var(--color-surface-2);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  border: 1px solid var(--color-border);
}
.oauth-accounts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}
.oauth-account-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.oauth-account-avatar {
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-foreground);
  font-weight: bold;
  font-size: 1.2rem;
}
.oauth-grow { flex-grow: 1; }
.oauth-account-name {
  color: var(--color-text);
  font-weight: 600;
  font-size: 1.05rem;
}
.oauth-alt {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.oauth-alt-link {
  color: var(--color-primary-text);
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.oauth-desc {
  color: var(--color-text-muted);
  margin-bottom: 2rem;
  font-size: 1rem;
  line-height: 1.6;
}
.oauth-scopes {
  background: var(--color-surface-2);
  padding: 1.5rem;
  border-radius: 0.5rem;
  text-align: left;
  margin-bottom: 2rem;
  border: 1px solid var(--color-border);
}
.oauth-scopes-title {
  color: var(--color-text);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
.oauth-scope-list {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.oauth-scope {
  margin-bottom: 0.8rem;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}
.oauth-scope-last {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}
.oauth-whoami {
  color: var(--color-text-dim);
  font-size: 0.85rem;
  margin-bottom: 2rem;
}
.oauth-inline { display: inline; }
.oauth-linkbtn {
  background: none;
  border: none;
  color: var(--color-primary-text);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.oauth-link {
  color: var(--color-primary-text);
  text-decoration: underline;
}
.btn.oauth-action {
  width: 100%;
  justify-content: center;
  padding: 0.8rem;
}
.oauth-redirect-note {
  font-size: 0.8rem;
  color: var(--color-text-dim);
  margin-top: 2rem;
}
.oauth-redirect-uri {
  font-family: var(--font-mono);
  word-break: break-all;
  opacity: 0.7;
}

/* ── layouts/socials.php ────────────────────────────────────────────────── */
.lay-social-wall {
  max-width: 1200px;
  margin: 4rem auto;
  padding: 0 1.5rem;
}
.lay-social-head {
  text-align: center;
  margin-bottom: 2.5rem;
}
.lay-social-title {
  color: var(--color-text);
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 0.5rem 0;
}
.lay-social-desc {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  margin: 0;
}
.lay-social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.lay-social-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--color-border);
  padding: 2px;
  border-radius: 16px;
}
.lay-social-card-inner {
  background: var(--color-surface);
  width: 100%;
  height: 100%;
  border-radius: 14px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.lay-social-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: #fff; /* allow-color: warna logo merek */
}
/* allow-color: Facebook brand logo colors */
.lay-social-logo--fb { background: #1877F2; }
/* allow-color: Instagram brand logo colors */
.lay-social-logo--ig { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
/* allow-color: TikTok brand logo colors */
.lay-social-logo--tiktok {
  background: #000;
  border: 2px solid #25F4EE;
  box-shadow: 2px 2px 0px #FE2C55;
}
.lay-social-handle {
  color: var(--color-text);
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
}
.lay-social-text {
  color: var(--color-text-muted);
  margin: 0 0 1.5rem 0;
  font-size: 0.9rem;
}
.lay-social-cta {
  display: inline-block;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-hover);
  color: var(--color-text);
  padding: 0.5rem 1.5rem;
  border-radius: 99px;
  font-weight: bold;
  font-size: 0.9rem;
}
.lay-social-yt {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.lay-social-yt-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--color-danger);
}
.lay-social-yt-title {
  margin: 0;
  font-size: 1.2rem;
  color: var(--color-text);
}
.lay-social-yt-frame {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface-2);
  position: relative;
  min-height: 200px;
}
.lay-social-yt-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.lay-social-yt-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  border-radius: 8px;
  color: var(--color-text-muted);
  min-height: 200px;
}
/* dulu <style> di akhir socials.php; .social-card hanya dipakai di sana */
.social-card { transition: transform 0.2s; } .social-card:hover, .social-card:focus { transform: scale(1.02); }

/* ── layouts/footer.php (gaya inline lama) ──────────────────────────────── */
.lay-footer-sublist {
  list-style: none;
  padding-left: 1rem;
  margin-top: 0.25rem;
}
.footer__link.lay-footer-logout {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-danger);
  font: inherit;
}
.footer__link.lay-footer-link-accent {
  color: var(--color-accent);
  font-weight: bold;
}
.lay-footer-newsletter {
  border-top: 1px solid var(--color-border);
  margin-top: 2rem;
  padding-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.lay-footer-nl-desc {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
/* display diubah JS (form disembunyikan setelah berhasil), jadi tanpa utilitas !important */
.lay-footer-nl-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.lay-footer-nl-input {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 0.5rem;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  /* !important: gaya inline lama mengalahkan body.using-keyboard *:focus (style.css) */
  outline: none !important;
  width: 220px;
}
/* display/background/color/border diubah JS */
.lay-footer-nl-msg {
  font-size: 0.82rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
}
.footer__bottom.lay-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.lay-footer-recaptcha {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.75rem;
  max-width: 400px;
  line-height: 1.4;
}
.btn.lay-footer-lang {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}

/* Dialog konfirmasi (#custom-confirm-modal); display diubah JS */
.modal-overlay.lay-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-overlay);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}
.lay-confirm-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  width: 100%;
  max-width: 450px;
  padding: 2rem;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.lay-confirm-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--color-danger);
}
.lay-confirm-title {
  margin-top: 0;
  color: var(--color-text);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.lay-confirm-msg {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  margin-bottom: 2rem;
  line-height: 1.5;
}
.btn.lay-confirm-btn {
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
}

/* Isi yang dibangun JS untuk formulir tersemat (footer.php) */
.lay-spin-inline {
  display: inline-block;
  animation: lay-spin 1s linear infinite;
}
.lay-embed-notice-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.lay-embed-notice-title {
  margin: 0 0 0.5rem 0;
  color: var(--color-text);
}
.lay-embed-notice-text {
  margin: 0;
  color: var(--color-text-muted);
}

/* Modal pengumuman: display/opacity/transform/warna tepi & tautan diubah JS */
.lay-ann-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  z-index: 999998;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lay-ann-toast {
  width: calc(100% - 2rem);
  max-width: 500px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-link);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 2rem;
  position: relative;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.lay-ann-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: var(--color-surface-2);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.lay-ann-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-right: 2rem;
}
.lay-ann-icon {
  font-size: 1.5rem;
  background: var(--color-surface-2);
  padding: 0.5rem;
  border-radius: 50%;
}
.lay-ann-title {
  margin: 0;
  color: var(--color-text);
  font-size: 1.3rem;
  font-weight: 800;
}
.lay-ann-content {
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.5rem;
}
.lay-ann-foot {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.announcement-link.lay-ann-link {
  color: var(--color-link);
  text-decoration: none;
  font-weight: bold;
  background: var(--color-surface);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: background 0.2s;
}

/* ── layouts/onboarding_modal.php (dulu <style> di view) ─────────────────── */
.onboarding-modal {
    border: none;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    background: var(--color-surface);
    color: var(--color-text);
    padding: 0;
    max-width: 520px;
    width: 92%;
    max-height: 90vh;
    margin: auto;
    overflow-y: auto;
}
.onboarding-modal::backdrop {
    background: var(--color-overlay);
}
.onboarding-content {
    padding: 24px;
    position: relative;
}
.onboarding-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--color-text-muted);
    cursor: pointer;
}
.onboarding-header {
    text-align: center;
    margin-bottom: 24px;
}
.onboarding-step {
    display: none;
}
.onboarding-step.active {
    display: block;
}
.skill-checkbox-card:hover,
.skill-checkbox-card:focus-within {
    background: var(--color-surface-2) !important;
    border-color: var(--color-primary) !important;
}
.onboarding-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    gap: 0.5rem;
    flex-wrap: wrap;
}
@media (max-width: 600px) {
    .onboarding-content {
        padding: 16px;
    }
    .onboarding-header h2 {
        font-size: 1.25rem;
    }
    .onboarding-actions {
        flex-direction: column;
    }
    .onboarding-actions > div {
        display: flex;
        gap: 0.5rem;
        width: 100%;
    }
    .onboarding-actions button {
        width: 100%;
    }
}

/* Gaya inline lama layouts/onboarding_modal.php */
/* Dulu memakai --bg-card/--accent/--text-muted yang tidak pernah didefinisikan,
   sehingga bar kemajuan tidak terlihat sama sekali. Sekarang memakai token. */
.lay-ob-progress {
  margin-bottom: 20px;
  background: var(--color-surface-2);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}
.lay-ob-progress-bar {
  width: var(--ob-progress);
  height: 100%;
  background: var(--color-primary);
  transition: width 0.3s ease;
}
.lay-ob-progress-text {
  text-align: center;
  font-size: 0.85em;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}
.lay-ob-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.lay-ob-otp-row {
  display: flex;
  gap: 8px;
}
.lay-ob-otp-ok {
  color: var(--color-success);
  font-weight: bold;
  font-size: 0.9em;
}
.lay-ob-otp-err {
  color: var(--color-danger);
  font-weight: bold;
  font-size: 0.9em;
  margin-top: 0.5rem;
}
.form-group.lay-ob-skills-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.lay-ob-skills-legend {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 1rem;
  color: var(--color-text);
}
.lay-ob-skills-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
}
/* Spesifisitas (0,3,0) agar menang atas label:has(> input[type="checkbox"]):not(.color-option)
   (0,2,2) di style.css, seperti gaya inline dulu. background/border-color tetap
   kalah oleh aturan :hover/:focus-within !important di atas, seperti dulu. */
.skills-grid .skill-checkbox-card.lay-ob-skill {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.15s ease;
}
/* (0,2,0) agar menang atas input[type="checkbox"] (0,1,1) di style.css */
.skill-checkbox-card .lay-ob-skill-check {
  margin-top: 3px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}
.lay-ob-skill-text {
  font-size: 0.92rem;
  color: var(--color-text);
  line-height: 1.4;
  word-break: break-word;
}

/* ── layouts/accessibility_widget.php (dulu <style> di view, dipindah utuh) ── */
/* 
    WCAG 2.2 AAA Base Widget Styles
    Target sizes are min 44x44px. 
    Contrast ratios > 7.0:1 (text on surface tokens, see tokens.css)
    Focus indicators are solid, 3px thick.
*/
.a11y-widget-container {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 100000; /* Always on top */
}
/* Ruang di bawah footer supaya baris terakhir halaman (hak cipta, pemilih
   bahasa) bisa digulir ke atas tombol widget yang melayang: tombol 60px
   pada jarak 30px dari bawah, ditambah sedikit ruang. */
.site-footer {
    padding-bottom: 104px;
}

/* Floating Button */
.a11y-toggle-btn {
    background-color: var(--color-text);
    color: var(--color-bg);
    border: 3px solid var(--color-bg);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.a11y-toggle-btn:hover {
    background-color: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-text);
}
.a11y-toggle-btn:focus-visible {
    outline: var(--focus-outline);
    box-shadow: var(--focus-halo);
}

/* Panel */
.a11y-panel {
    position: absolute;
    bottom: 80px;
    left: 0;
    width: 320px;
    background-color: var(--color-surface-raised);
    color: var(--color-text);
    border: 4px solid var(--color-text);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.a11y-panel:not([hidden]) {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.a11y-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 2px solid var(--color-text);
    background-color: var(--color-text);
    color: var(--color-bg);
}
.a11y-panel-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
}

.a11y-close-btn {
    background: transparent;
    color: var(--color-bg);
    border: 2px solid transparent;
    cursor: pointer;
    width: 44px; /* Minimum AAA target size */
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.a11y-close-btn:hover {
    background-color: var(--color-bg);
    color: var(--color-text);
}
.a11y-close-btn:focus-visible {
    outline: var(--focus-outline);
    box-shadow: var(--focus-halo);
}

.a11y-panel-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.a11y-feature-btn {
    background-color: var(--color-surface-raised);
    color: var(--color-text);
    border: 3px solid var(--color-text);
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    min-height: 50px; /* Surpasses AAA 44px */
    text-align: left;
    transition: background-color 0.2s, color 0.2s;
}
.a11y-feature-btn:hover {
    background-color: var(--color-surface-2);
}
.a11y-feature-btn:focus-visible {
    outline: var(--focus-outline);
    box-shadow: var(--focus-halo);
}
.a11y-feature-btn[aria-pressed="true"] {
    background-color: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
}
.a11y-feature-btn[aria-pressed="true"]:focus-visible {
    outline: var(--focus-outline);
    box-shadow: var(--focus-halo);
}

.a11y-reset-btn {
    background-color: var(--color-danger);
    color: var(--color-bg);
    border: 3px solid var(--color-danger);
    border-radius: 6px;
    padding: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
    min-height: 44px;
}
.a11y-reset-btn:hover {
    background-color: var(--color-text);
    border-color: var(--color-text);
}
.a11y-reset-btn:focus-visible {
    outline: var(--focus-outline);
    box-shadow: var(--focus-halo);
}

/* 
    Accessibility Feature Overrides
*/

/* 1. High Contrast
   Palet tetap hitam-putih-kuning. Setiap selektor memakai :is(#a11y-hc, ...)
   agar berbobot setara ID: dulu "body.a11y-high-contrast *" (0,1,1) kalah
   oleh aturan komponen !important yang lebih spesifik, sehingga judul kartu,
   tombol dan tab tetap gelap di atas hitam. Elemen #a11y-hc tidak ada; itu
   hanya penambah bobot. */
body.a11y-high-contrast {
    background-color: #000000 !important; /* allow-color: fixed high-contrast palette, independent of theme */
    color: #FFFFFF !important; /* allow-color: fixed high-contrast palette */
}
body.a11y-high-contrast :is(#a11y-hc, *) {
    background-color: transparent !important;
    color: #FFFFFF !important; /* allow-color: fixed high-contrast palette */
    border-color: #FFFFFF !important; /* allow-color: fixed high-contrast palette */
    box-shadow: none !important;
    text-shadow: none !important;
}
body.a11y-high-contrast :is(#a11y-hc, img, video, svg) {
    filter: contrast(150%) grayscale(100%) !important;
}
body.a11y-high-contrast :is(#a11y-hc, a),
body.a11y-high-contrast :is(#a11y-hc, a) * {
    color: #FFDD00 !important; /* allow-color: fixed high-contrast palette */
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
}
/* Tombol berbentuk tautan (.btn) tetap putih dengan tepi, bukan kuning bergaris bawah */
body.a11y-high-contrast :is(#a11y-hc, a)[class*="btn"],
body.a11y-high-contrast :is(#a11y-hc, a)[class*="btn"] * {
    color: #FFFFFF !important; /* allow-color: fixed high-contrast palette */
    text-decoration: none !important;
}
/* Yang hilang karena semua latar & bayangan dibuang di atas: */
/* Fokus keyboard (sorotan tautan biasanya dari latar kuning + bayangan) */
body.a11y-high-contrast :is(#a11y-hc, *):focus-visible {
    outline: 3px solid #FFDD00 !important; /* allow-color: fixed high-contrast palette */
    outline-offset: 2px !important;
}
/* Tautan yang difokus: aturan fokus biasa memberi teks hitam (untuk latar kuning) */
body.a11y-high-contrast :is(#a11y-hc, a):focus-visible,
body.a11y-high-contrast :is(#a11y-hc, a):focus-visible * {
    color: #FFDD00 !important; /* allow-color: fixed high-contrast palette */
}
/* Pilihan yang sedang aktif (tab, tombol bahasa, filter) tidak boleh hanya dibedakan lewat warna */
body.a11y-high-contrast :is(#a11y-hc, [aria-selected="true"], [aria-pressed="true"], [aria-current]:not([aria-current="false"]), .active, .is-active) {
    outline: 2px solid #FFFFFF !important; /* allow-color: fixed high-contrast palette */
    outline-offset: 2px;
    text-decoration: underline !important;
}
/* Isian progress bar */
body.a11y-high-contrast :is(#a11y-hc, .sw-progress-bar, .adm-sw-progress-bar, .adm-posts-progress-bar, .progress-bar,
  .adm-forms-bar-fill, .adm-dash-fill, .pwd-strength-fill, .lay-ob-progress-bar,
  .bar-chart-bar, #reading-progress, .flash-message__progress, .nav-hamburger__bar) {
    background-color: #FFFFFF !important; /* allow-color: fixed high-contrast palette */
    opacity: 1 !important;
}
/* Checkbox & radio kustom: tanda terpilih */
body.a11y-high-contrast :is(#a11y-hc, .form-check__input):checked,
body.a11y-high-contrast :is(#a11y-hc, .form-radio__input):checked::after {
    background-color: #FFFFFF !important; /* allow-color: fixed high-contrast palette */
}
/* Warna lingkaran/pengguna adalah informasi */
body.a11y-high-contrast :is(#a11y-hc, .user-swatch, .color-option__swatch)[style*="--swatch"] {
    background-color: var(--swatch) !important;
}

/* 2. Large Text
   Skala akar (rem) dinaikkan sekali. Dulu "* { font-size: 120% }" berlipat di
   setiap tingkat elemen: teks bersarang jadi 2-3x lebih besar dan judul malah
   lebih kecil dari paragraf. */
html:has(> body.a11y-large-text) {
    font-size: 120% !important;
}
body.a11y-large-text :where(p, li, dd, td, th, label, blockquote, figcaption) {
    line-height: 1.8 !important;
}
/* Except for icons which might break if resized with em/rem too aggressively, but generally okay */

/* 3. Dyslexia Friendly */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.2.5/files/opendyslexic-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'OpenDyslexic';
    src: url('https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.2.5/files/opendyslexic-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* Kelas dipasang oleh tombol data-a11y-toggle="dyslexia-font" → body.a11y-dyslexia-font */
body.a11y-dyslexia-font, body.a11y-dyslexia-font * {
    font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important;
    letter-spacing: 0.15em !important;
    word-spacing: 0.3em !important;
}

/* 4. Highlight Links */
body.a11y-highlight-links a, 
body.a11y-highlight-links button {
    background-color: var(--color-focus) !important;
    color: var(--color-focus-text) !important;
    border: 3px solid var(--color-focus-text) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 3px !important;
}
body.a11y-highlight-links a *, 
body.a11y-highlight-links button * {
    color: var(--color-focus-text) !important;
}

/* ── Kontrol tambahan: select & pemilih warna ── */
.a11y-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.a11y-field__label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}
.a11y-theme {
    border: 0;
    margin: 0;
    padding: 0;
}
.a11y-theme legend {
    padding: 0;
    margin-bottom: 4px;
}
.a11y-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}
.a11y-radio:hover {
    background: var(--color-surface-2);
}
/* input[type] menaikkan spesifisitas agar tetap menang atas input[type="radio"] di
   style.css, yang di halaman mandiri dimuat setelah pages.css. */
.a11y-radio input[type="radio"] {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.a11y-radio input:focus-visible {
    outline: var(--focus-outline);
    box-shadow: var(--focus-halo);
}
.a11y-select,
.a11y-color {
    min-height: 44px;
    width: 100%;
    border: 3px solid var(--color-border-hover);
    border-radius: 6px;
    background-color: var(--color-surface-raised);
    color: var(--color-text);
    font-size: 1.05rem;
    font-weight: 600;
    padding: 8px;
    cursor: pointer;
}
.a11y-select:focus-visible,
.a11y-color:focus-visible {
    outline: var(--focus-outline);
    box-shadow: var(--focus-halo);
}
.a11y-note {
    margin: 4px 0 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-danger);
}
.a11y-note:empty { display: none; }

/* 5. Mode Baca Nyaman (WCAG 2.2 AAA - SC 1.4.8 Visual Presentation)
      Menyediakan mekanisme untuk: lebar blok teks <= 80 karakter,
      teks tidak rata kanan-kiri, spasi baris >= 1.5, dan jarak antarparagraf
      >= 1.5x spasi baris. 68ch pada font situs setara sekitar 74 karakter. */
body.a11y-reading-mode p,
body.a11y-reading-mode li,
body.a11y-reading-mode dd,
body.a11y-reading-mode blockquote,
body.a11y-reading-mode .markdown-body > *,
body.a11y-reading-mode .post-content > *,
body.a11y-reading-mode .prose > * {
    max-width: 66ch !important; /* ~77 karakter pada font situs, di bawah batas 80 */
    line-height: 1.6 !important;
    text-align: left !important;
}
/* Jarak antarparagraf wajib >= 1.5x spasi baris = 2.4em. Margin antar-saudara
   saling collapse sehingga margin-top saja tidak cukup; flex gap tidak pernah
   collapse dan berlaku di setiap pasangan anak. */
body.a11y-reading-mode .markdown-body,
body.a11y-reading-mode .post-content,
body.a11y-reading-mode .prose {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2.4em !important;
}
body.a11y-reading-mode .markdown-body + .markdown-body,
body.a11y-reading-mode p + p {
    margin-top: 2.4em !important;
}

/* 6. Skema Warna Pilihan Pengguna (SC 1.4.8: foreground & background
      dapat dipilih pengguna). --a11y-fg / --a11y-bg disetel dari JS. */
body.a11y-scheme {
    background-color: var(--a11y-bg) !important;
    color: var(--a11y-fg) !important;
}
body.a11y-scheme * {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--a11y-fg) !important;
    border-color: var(--a11y-fg) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
/* Gambar tidak ikut diwarnai. Tanpa alas netral, logo yang gelap jadi tidak
   terlihat saat pengguna memilih latar gelap (SVG sebaris tetap aman karena
   memakai currentColor). */
body.a11y-scheme img,
body.a11y-scheme video {
    background-color: #FFFFFF !important; /* allow-color: neutral white backing so dark logos stay visible on any user-chosen scheme */
}
body.a11y-scheme a,
body.a11y-scheme a * {
    color: var(--a11y-fg) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
    font-weight: 700 !important;
}

/* Widget-nya sendiri harus tetap terbaca apa pun warna yang dipilih pengguna,
   kalau tidak, panel ini justru jadi tidak bisa dipakai untuk membatalkannya. */
body.a11y-scheme #a11y-widget-container .a11y-panel,
body.a11y-scheme #a11y-widget-container .a11y-feature-btn,
body.a11y-scheme #a11y-widget-container .a11y-select,
body.a11y-scheme #a11y-widget-container .a11y-color {
    background-color: var(--color-surface-raised) !important;
    color: var(--color-text) !important;
    border-color: var(--color-text) !important;
}
body.a11y-scheme #a11y-widget-container .a11y-panel *,
body.a11y-scheme #a11y-widget-container .a11y-field__label {
    color: var(--color-text) !important;
}
body.a11y-scheme #a11y-widget-container .a11y-panel-header,
body.a11y-scheme #a11y-widget-container .a11y-panel-header *,
body.a11y-scheme #a11y-widget-container .a11y-feature-btn[aria-pressed="true"],
body.a11y-scheme #a11y-widget-container .a11y-toggle-btn {
    background-color: var(--color-text) !important;
    color: var(--color-bg) !important;
    border-color: var(--color-text) !important;
}
body.a11y-scheme #a11y-widget-container .a11y-reset-btn {
    background-color: var(--color-danger) !important;
    color: var(--color-bg) !important;
    border-color: var(--color-danger) !important;
}
body.a11y-scheme #a11y-widget-container .a11y-note {
    color: var(--color-danger) !important;
}

/* 7. Reduced Motion (WCAG 2.3.3 AAA) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── layouts/footer.php (dulu blok <style> di view) ─────────────────────── */
@keyframes lay-spin { 100% { transform: rotate(360deg); } }
details.embedded-form-details > summary::-webkit-details-marker {
  display: none;
}

#announcement-close:hover, #announcement-close:focus { background: var(--color-border) !important; color: var(--color-text) !important; }
#announcement-link:hover, #announcement-link:focus { background: var(--color-surface-2) !important; }

.shortcuts-modal {
    position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s;
}
.shortcuts-modal.is-active { opacity: 1; visibility: visible; }
.shortcuts-modal__backdrop { position: absolute; inset: 0; background: var(--color-overlay); }
.shortcuts-modal__content {
    position: relative; background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto;
    box-shadow: var(--shadow-lg); transform: translateY(20px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.shortcuts-modal.is-active .shortcuts-modal__content { transform: translateY(0) scale(1); }
.shortcuts-modal__header {
    display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}
.shortcuts-modal__header h2 { margin: 0; font-size: 1.2rem; font-weight: 600; }
.shortcuts-modal__close {
    background: none; border: none; color: var(--color-text-muted); cursor: pointer;
    padding: 0.25rem; border-radius: var(--radius-sm); transition: all 0.2s;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; /* SC 2.5.5 */
}
.shortcuts-modal__close:hover { background: var(--color-surface-2); color: var(--color-text); }
.shortcuts-modal__body { padding: 1.5rem; }
.shortcuts-table { width: 100%; border-collapse: collapse; text-align: left; }
/* Dulu dipasang JS lewat tableEl.style.* */
.shortcuts-modal .shortcuts-table {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.shortcut-item-row { border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.shortcut-item-row:nth-child(even) { background: var(--color-surface-2); }
.shortcut-item-row:last-child { border-bottom: none; }
.shortcut-item__label { padding: 0.85rem 1rem; font-weight: 500; font-size: 0.95rem; color: var(--color-text); }
.shortcut-item__keys { padding: 0.85rem 1rem; text-align: right; }
.shortcut-item__keys kbd {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-bottom-width: 2px; border-radius: 4px; padding: 0.25rem 0.5rem;
    font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--color-primary-text);
}

/* Dulu hanya dicetak bila RECAPTCHA_SITE_KEY ada; lencana itu memang hanya
   muncul bila skrip reCAPTCHA dimuat, jadi aturan global setara. */
.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ── layouts/nav.php (dulu <style> di view) ─────────────────────────────── */
.kbd-nav-hint {
    font-size: 0.75rem;
    background: var(--color-code-bg);
    border: 1px solid var(--color-border);
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    letter-spacing: 1.5px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-left: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.2s, opacity 0.2s;
    pointer-events: none;
    vertical-align: middle;
}
/* Hanya tampilkan jika pengguna melakukan navigasi menggunakan keyboard (Tab) */
.nav__item:focus-within .kbd-nav-hint,
.nav__link:focus-visible .kbd-nav-hint,
.nav-dropdown__item:focus-visible .kbd-nav-hint,
.nav-logo:focus-visible .kbd-nav-hint {
    opacity: 1;
    visibility: visible;
}

/* ── layouts/nav.php (gaya inline lama) ─────────────────────────────────── */
/* Selektor majemuk (.nav-…​.lay-nav-…) menang atas aturan komponen nav di
   style.css seperti gaya inline dulu. Tidak ada !important baru: aturan
   !important milik style.css (mis. .nav-dropdown--right, [hidden]) tetap
   menang, persis seperti dulu atas gaya inline. */
.nav-logo.lay-nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lay-nav-logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
}
.lay-nav-logo-text {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.nav-item.lay-nav-item-dd {
  position: relative;
  display: flex;
  align-items: center;
  list-style: none;
}
.nav-dropdown__trigger.lay-nav-dd-trigger {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--color-text);
  padding: 0.5rem;
  font-family: inherit;
}
/* Tombol pengguna: sama, tanpa font-family */
.nav-dropdown__trigger.lay-nav-user-trigger {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--color-text);
  padding: 0.5rem;
}
.nav-dropdown__name.lay-nav-dd-name {
  font-weight: 500;
  font-size: 0.95rem;
}
.nav-dropdown.lay-nav-dd-menu {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  left: 0;
  right: auto;
  min-width: 220px;
  top: calc(100% + 0.5rem);
  position: absolute;
  z-index: 1000;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.lay-nav-badge {
  font-size: 0.75rem;
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  font-weight: 800;
  padding: 0.1rem 0.35rem;
  border-radius: 99px;
  margin-left: 0.35rem;
  vertical-align: middle;
  text-transform: uppercase;
}
.lay-nav-rel { position: relative; }
.lay-nav-chev { margin-left: 4px; }
.nav-dropdown__item.lay-nav-dd-all {
  font-weight: bold;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.5rem;
}
.nav-dropdown__item.lay-nav-dd-circle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* --swatch: warna circle pilihan pengguna (data) */
.user-swatch.lay-nav-swatch {
  width: 10px;
  height: 10px;
  background: var(--swatch);
}
.nav-search.lay-nav-search {
  position: relative;
  margin: 0;
}
.nav-search__wrapper.lay-nav-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-search__shortcut.lay-nav-search-kbd {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-mono);
}
.nav-user.lay-nav-user {
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* color diubah JS (main.js) lewat style */
.lay-nav-notif-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  position: relative;
  transition: color 0.2s;
}
/* display diubah JS */
.lay-nav-notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--color-danger);
  color: var(--color-bg);
  font-size: 0.75rem;
  font-weight: bold;
  padding: 0 4px;
  border-radius: 10px;
  border: 2px solid var(--color-surface);
  line-height: 1.2;
}
.nav-dropdown.lay-nav-notif-dd {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  left: auto;
  transform: none;
  width: 340px;
  max-width: calc(100vw - 2rem);
  padding: 0;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  z-index: 1000;
}
.lay-nav-notif-head {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lay-nav-notif-action {
  background: none;
  border: none;
  color: var(--color-primary-text);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}
.lay-nav-notif-action--danger {
  background: none;
  border: none;
  color: var(--color-danger);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}
.lay-nav-notif-list {
  max-height: 380px;
  overflow-y: auto;
}
.lay-nav-notif-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.lay-nav-notif-summary {
  padding: 0.75rem 1rem;
  background: var(--color-surface-2);
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.nav-avatar.lay-nav-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.nav-avatar.lay-nav-avatar-initial {
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-foreground);
  font-weight: bold;
}
.nav-dropdown.lay-nav-user-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  left: auto;
  transform: none;
  min-width: 220px;
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  z-index: 1000;
}
.lay-nav-acc-img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
}
.lay-nav-switch-label {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: bold;
  letter-spacing: 0.05em;
}
.nav-dropdown__item.lay-nav-justify-start { justify-content: flex-start; }
.nav-avatar.lay-nav-avatar-sm {
  width: 20px;
  height: 20px;
  font-size: 0.6rem;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-foreground);
  font-weight: bold;
  margin-right: 0.5rem;
}
.nav-dropdown__item.lay-nav-dd-logout {
  opacity: 0.8;
  font-size: 0.85rem;
}
/* (0,3,0) agar menang atas .nav-overlay__link:hover (background, color) */
.nav-overlay__list .nav-overlay__link.lay-nav-ov-toggle {
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  cursor: pointer;
}
/* transform diubah JS */
.lay-nav-ov-chev { transition: transform 0.2s; }
.lay-nav-ov-sub {
  list-style: none;
  margin: 0.5rem 0 0 1rem;
  padding: 0;
  border-left: 2px solid var(--color-border);
  padding-left: 1rem;
}
.nav-overlay__link.lay-nav-ov-sublink {
  font-size: 1.1rem;
  padding: 0.5rem 0;
}
.lay-nav-ov-logout { padding: 1.5rem 2rem 0; }

/* ── home/index.php ─────────────────────────────────────────────────────── */
/* Acara mendatang */
.section.home-event-section {
  padding: 2rem 1rem;
  background: transparent;
}
.container.home-w900 { max-width: 900px; }
/* Gaya inline lama juga memuat "md:flex-direction: row" (bukan CSS sah,
   diabaikan peramban), jadi tidak disalin. */
.home-event-card {
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.home-event-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: bold;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  z-index: 10;
}
.home-event-body {
  flex: 1;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.home-event-meta {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: flex;
  gap: 1rem;
}
.home-event-title {
  color: var(--color-text);
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0 0 1rem 0;
  line-height: 1.2;
}
.home-event-desc {
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.6;
  max-width: 500px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.btn.home-event-cta {
  background: var(--color-accent);
  color: var(--color-bg);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
}
/* --cover: gambar sampul acara (data dari PHP) */
.home-event-cover {
  flex: 1;
  min-height: 250px;
  background: var(--cover) center/cover no-repeat;
}
.home-fill {
  width: 100%;
  height: 100%;
}
.home-event-cover-empty {
  flex: 1;
  min-height: 250px;
  background: var(--color-info-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Siapa kami */
.container.home-about-wrap {
  max-width: 1000px;
  text-align: center;
}
.section__header.home-about-head {
  justify-content: center;
  margin-bottom: 2rem;
}
.home-kicker {
  color: var(--color-accent);
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.section__title.home-about-title {
  font-size: 2.2rem;
  margin: 0;
}
.home-about-lead {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text-muted);
  max-width: 800px;
  margin: 0 auto 3rem auto;
}
.home-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  text-align: left;
}
.home-pillar {
  background: var(--color-surface);
  /* !important: gaya inline lama (border) mengalahkan border-color dari
     .hover-card-lift:hover di bawah; hanya transform & bayangan yang berubah. */
  border: 1px solid var(--color-border) !important;
  padding: 2rem;
  border-radius: 16px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.home-pillar-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.home-pillar-icon--1 {
  background: var(--color-info-bg);
  color: var(--color-primary-text);
}
.home-pillar-icon--2 {
  background: var(--color-surface-2);
  color: var(--color-secondary);
}
.home-pillar-icon--3 {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.home-pillar-title {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
  color: var(--color-text);
}
.home-pillar-text {
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 0;
}
/* dulu <style> di akhir home/index.php; dibatasi ke seksi "Siapa kami" */
/* Hover Card Lift */
#section-about .hover-card-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

/* Statistik */
.home-stats {
  background: var(--color-surface);
  padding: 3rem 1.5rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.home-stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: center;
  gap: 2rem;
}
.home-stat-num {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}
.home-stat-label {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Tulisan terbaru & populer */
.home-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}
.home-posts-heading {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.home-post-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.home-post-item {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
}
.home-post-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
}
.home-post-meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  display: flex;
  gap: 1rem;
}

/* Denyut komunitas */
.home-community-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.home-thread {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
}
.home-thread-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.home-thread-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.home-thread-initial {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.home-thread-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  line-height: 1.4;
}

/* Ajakan bergabung (tamu) */
.home-cta {
  padding: 4rem 1.5rem;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.container.home-cta-wrap {
  max-width: 700px;
  text-align: center;
}
.home-cta-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1.5rem;
  box-shadow: var(--shadow-sm);
}
.home-cta-title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
}
.home-cta-desc {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 480px;
  margin-inline: auto;
}
.btn.home-cta-login { border-color: var(--color-border); }


/* ##########################################################################
   PERBAIKAN SETELAH PEMBANDINGAN
   ########################################################################## */

/* Tautan berbentuk tombol/judul di dalam sel tabel atau daftar. Dulu gaya inline
   mengalahkan aturan "tautan di dalam isi" di style.css (spesifisitas 0,2,1);
   sebagai kelas biasa mereka kalah, jadi warna & garis bawahnya dikunci. */
.adm-events-row-manage,
.adm-events-row-manage:visited {
  color: var(--color-bg) !important;
  text-decoration: none !important;
}
.adm-events-row-edit-link,
.adm-events-row-edit-link:visited {
  color: var(--color-text) !important;
  text-decoration: none !important;
}
.kbx-folder-link,
.kbx-folder-link:visited {
  color: var(--kb-accent) !important;
  text-decoration: none !important;
}

/* ── Editorial: pemeriksaan otomatis, linimasa catatan, pratinjau ─────────── */
.edl-checks { margin: 0 0 1rem; padding-left: 1.25rem; }
.edl-check { margin-bottom: 0.4rem; line-height: 1.5; }
.edl-check--warning::marker { color: var(--color-warning); }
.edl-timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--color-border); }
.edl-item { position: relative; margin: 0 0 1rem; padding: 0.25rem 0 0.25rem 1rem; }
.edl-item::before { content: ""; position: absolute; left: -7px; top: 0.6rem; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); }
.edl-item--event::before { background: var(--color-text-muted); }
.edl-item--resolved { opacity: 0.75; }
.edl-item__head { margin: 0 0 0.25rem; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; }
.edl-item--event .edl-item__head { color: var(--color-text-muted); }
.edl-quote { margin: 0.25rem 0 0.5rem; padding: 0.5rem 0.75rem; border-left: 3px solid var(--color-accent); background: var(--color-surface-raised); font-style: italic; }
.edl-body { line-height: 1.6; overflow-wrap: anywhere; }
.edl-preview { max-height: 70vh; overflow: auto; padding: 1rem; border: 1px solid var(--color-border); border-radius: 8px; }
.edl-schedule { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.75rem 1rem; }
@media (forced-colors: active) {
  .edl-item::before { background: CanvasText; forced-color-adjust: none; }
  .edl-quote { border-left-color: CanvasText; }
}

/* ── Editorial: cover & usulan cover ─────────────────────────────────────── */
.edl-cover-img { display: block; width: 100%; max-width: 480px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border); }
.edl-cover-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.edl-cover-card { display: flex; flex-direction: column; gap: 0.5rem; }
.post-cover__ai { margin: 0.25rem 0 0; text-align: right; }

/* ── Transkrip rekaman acara ─────────────────────────────────────────────── */
.events-transcripts { margin: 1.5rem 0; }
.events-transcript { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.events-transcript > summary { cursor: pointer; font-weight: 700; }
.events-transcript__body { max-height: 60vh; overflow: auto; margin-top: 0.75rem; line-height: 1.7; }

/* ── KB: artikel terkait berdasarkan makna ───────────────────────────────── */
.kbx-semantic-related { margin: 2rem 0 1.5rem; }
.kbx-semantic-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.kbx-semantic-list li { padding: 0.75rem 1rem; border: 1px solid var(--color-border); border-radius: 8px; }
.kbx-semantic-list a { font-weight: 700; }

/* ── Turnstile (anti-robot) ──────────────────────────────────────────────── */
.captcha-box { margin: 0.75rem 0; min-height: 0; }
.captcha-status:empty { display: none; }

/* ── Editorial: perbandingan revisi ──────────────────────────────────────── */
.cmp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.cmp-item { padding: 0.75rem 1rem; border-left: 4px solid var(--color-border); background: var(--color-surface-raised); border-radius: 4px; }
.cmp-item--added { border-left-color: var(--color-success); }
.cmp-item--removed { border-left-color: var(--color-danger); }
.cmp-item--changed { border-left-color: var(--color-warning); }
.cmp-line { line-height: 1.8; overflow-wrap: anywhere; }
.cmp-line del { background: var(--color-danger-bg); color: var(--color-text); text-decoration: line-through; }
.cmp-line ins { background: var(--color-success-bg); color: var(--color-text); text-decoration: underline; }
@media (forced-colors: active) {
  .cmp-item { border-left-color: CanvasText; }
  .cmp-line del, .cmp-line ins { background: none; }
}

/* ── Pratinjau pesan WhatsApp ────────────────────────────────────────────── */
.wa-preview { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; margin: 0; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface-raised); }