/* Token warna dan font mengikuti tema situs Premiere Educandum. */
:root {
  --pe-brand: #1B2C5E;
  --pe-brand-deep: #142248;
  --pe-brand-lift: #2C4488;
  --pe-brand-soft: #E9EDF7;
  --pe-accent: #FFD017;
  --pe-accent-ink: #14203F;
  --pe-on-brand: #FFFFFF;

  --pe-bg: #F4F6FA;
  --pe-surface: #FFFFFF;
  --pe-ink: #1A2233;
  --pe-muted: #566176;
  --pe-line: #DDE3EC;
  --pe-field: #C4CCDA;
  --pe-link: #1B2C5E;

  --pe-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --pe-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pe-mono: ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace;

  --pe-radius: 8px;
  --pe-shadow: 0 1px 2px rgba(20, 34, 72, .06), 0 8px 24px rgba(20, 34, 72, .07);

  --btn-primary-bg: #1B2C5E;
  --btn-primary-hover: #2C4488;
  --btn-primary-ink: #FFFFFF;

  --err: #B3261E;
  --err-soft: #FBEDEC;
  --err-line: #EFC6C2;
  --warn: #8A5A00;
  --warn-soft: #FFF6D6;
  --warn-line: #F0DE9B;
  --good: #1B6B3F;
  --good-soft: #E7F4EC;
  --good-line: #BFE0CC;
  --info: #24508F;
  --info-soft: #E6EEF9;

  --chart-bar: #1B2C5E;
  --chart-now: #E8B500;
  --chart-grid: #E6EAF1;
  --chart-baseline: #B9C2D0;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pe-bg: #0F1524;
    --pe-surface: #182036;
    --pe-ink: #E8ECF4;
    --pe-muted: #A6B1C6;
    --pe-line: #2B3652;
    --pe-field: #3F4C6E;
    --pe-link: #B4C6F6;
    --pe-brand-soft: #222D4C;
    --pe-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);

    --btn-primary-bg: #FFD017;
    --btn-primary-hover: #FFDD57;
    --btn-primary-ink: #14203F;

    --err: #F2B8B5;
    --err-soft: #3A1F24;
    --err-line: #6B3438;
    --warn: #F2D675;
    --warn-soft: #33290F;
    --warn-line: #5C4A17;
    --good: #8FD6AC;
    --good-soft: #14301F;
    --good-line: #27543A;
    --info: #A9C4F2;
    --info-soft: #1D2C4B;

    --chart-bar: #B4C6F6;
    --chart-now: #FFD017;
    --chart-grid: #263149;
    --chart-baseline: #4A5875;

    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pe-bg);
  color: var(--pe-ink);
  font-family: var(--pe-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--pe-link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
code, .mono { font-family: var(--pe-mono); font-size: .92em; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--pe-accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px; top: -48px;
  z-index: 10;
  padding: 8px 14px;
  background: var(--pe-accent);
  color: var(--pe-accent-ink);
  border-radius: 6px;
  font-weight: 600;
}
.skip-link:focus { top: 8px; }

.muted { color: var(--pe-muted); }
.nowrap { white-space: nowrap; }
.mono-wrap { font-family: var(--pe-mono); font-size: 13px; overflow-wrap: anywhere; }

/* Kerangka halaman publik -------------------------------------------------- */

.site-head {
  background: var(--pe-brand);
  color: var(--pe-on-brand);
  border-bottom: 3px solid var(--pe-accent);
}
.site-head__in {
  max-width: 1160px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  flex-wrap: wrap;
}
.brand, .admin-brand {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  line-height: 1.25;
}
.brand__name { font-family: var(--pe-serif); font-size: 21px; font-weight: 700; color: #fff; }
.brand__sub { font-size: 13px; color: rgba(255, 255, 255, .78); }

.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.site-nav a {
  padding: 6px 10px;
  border-radius: 6px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
}
.site-nav a:hover { background: rgba(255, 255, 255, .12); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--pe-accent); border-radius: 6px 6px 0 0; }
.site-nav__lang { border: 1px solid rgba(255, 255, 255, .4); margin-left: 6px; }

.public-main { max-width: 1160px; margin: 0 auto; padding: 44px 24px 56px; }

.site-foot { border-top: 1px solid var(--pe-line); }
.site-foot__in {
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  font-size: 13.5px;
  color: var(--pe-muted);
}

.register-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
}
.intro { position: sticky; top: 28px; }

.kicker {
  margin-bottom: 10px;
  color: var(--pe-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.title {
  font-family: var(--pe-serif);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 18px;
  padding-bottom: 14px;
  position: relative;
}
.title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 72px; height: 3px;
  background: var(--pe-accent);
}
.lead { font-size: 17px; color: var(--pe-muted); }
.intro__h { margin: 30px 0 14px; font-size: 16px; font-weight: 700; }
.intro__login { margin-top: 24px; font-size: 15px; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 16px 42px;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--pe-brand-soft);
  color: var(--pe-link);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13.5px; top: 30px; bottom: 2px;
  width: 1px;
  background: var(--pe-line);
}
.steps strong { display: block; font-weight: 600; }
.steps span { color: var(--pe-muted); font-size: 15px; }

/* Kartu dan form ----------------------------------------------------------- */

.card {
  background: var(--pe-surface);
  border: 1px solid var(--pe-line);
  border-radius: var(--pe-radius);
  box-shadow: var(--pe-shadow);
}
.card--pad { padding: 28px; }
.narrow { max-width: 640px; margin: 0 auto; }

.form-card { padding: 28px; }
.req-note { font-size: 14px; color: var(--pe-muted); margin-bottom: 20px; }
.req { color: var(--err); font-weight: 700; }

.group { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.group legend {
  display: block;
  width: 100%;
  padding: 0 0 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--pe-line);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pe-muted);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}
.field { min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field > label {
  display: block;
  margin-bottom: 5px;
  font-size: 14.5px;
  font-weight: 600;
}
input[type="text"], input[type="email"], input[type="url"], input[type="number"],
input[type="password"], input[type="search"], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--pe-field);
  border-radius: 6px;
  background: var(--pe-surface);
  color: var(--pe-ink);
  font: inherit;
}
textarea { min-height: 72px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--pe-muted); opacity: .75; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--pe-link);
  outline-offset: 0;
}
input[type="checkbox"] {
  width: 18px; height: 18px;
  margin: 0;
  flex: none;
  accent-color: var(--pe-brand-lift);
}
.field__help { margin: 5px 0 0; font-size: 13.5px; color: var(--pe-muted); line-height: 1.4; }
.field__note {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: 6px;
  color: var(--warn);
  font-size: 13.5px;
  line-height: 1.4;
}
.field__error { margin: 5px 0 0; font-size: 13.5px; font-weight: 600; color: var(--err); line-height: 1.4; }
.field--error input, .field--error select { border-color: var(--err); }

.check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; cursor: pointer; }
.check input { margin-top: 3px; }
.check--inline { align-items: center; white-space: nowrap; }
.check--inline input { margin-top: 0; }

.consent { padding-top: 4px; margin-bottom: 20px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.reg-form .form-actions { margin-top: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--pe-field);
  border-radius: 6px;
  background: var(--pe-surface);
  color: var(--pe-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--pe-brand-soft); }
.btn:disabled { opacity: .65; cursor: progress; }
.btn--primary { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-ink); }
.btn--primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }
.btn--danger { color: var(--err); border-color: var(--err-line); }
.btn--danger:hover { background: var(--err-soft); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--lg { min-height: 48px; padding: 10px 24px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }

.linklike {
  border: 0; padding: 0; background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.linklike--danger { color: var(--err); font-size: 14px; }

.notice {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid var(--pe-line);
  border-radius: 6px;
  font-size: 15px;
}
.notice ul { margin: 6px 0 0; padding-left: 20px; }
.notice--error { background: var(--err-soft); border-color: var(--err-line); color: var(--err); }
.notice--error a { color: inherit; }
.notice--warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.notice--warn a { color: inherit; font-weight: 600; }
.notice--success { background: var(--good-soft); border-color: var(--good-line); color: var(--good); }

.code-box {
  margin: 18px 0;
  padding: 16px 18px;
  border-left: 4px solid var(--pe-accent);
  background: var(--pe-brand-soft);
  border-radius: 0 6px 6px 0;
}
.code-box__label { display: block; font-size: 13.5px; color: var(--pe-muted); }
.code-box__value { font-family: var(--pe-mono); font-size: 26px; letter-spacing: .04em; }

.status-form { margin-top: 18px; }
.status-result { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--pe-line); }
.status-result h2 { font-family: var(--pe-serif); font-size: 23px; margin-bottom: 6px; }

.tracker { list-style: none; display: flex; gap: 6px; margin: 18px 0; padding: 0; }
.tracker li {
  flex: 1;
  padding-top: 9px;
  border-top: 4px solid var(--pe-line);
  font-size: 13.5px;
  color: var(--pe-muted);
}
.tracker li.is-done { border-top-color: var(--btn-primary-bg); color: var(--pe-ink); font-weight: 600; }

/* Kerangka admin ----------------------------------------------------------- */

.admin-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.admin-side {
  background: var(--pe-brand);
  color: #fff;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-right: 3px solid var(--pe-accent);
}
.admin-brand { padding: 0 8px; }
.admin-brand .brand__name { font-size: 18px; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 10px;
  border-radius: 6px;
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
}
.admin-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.admin-nav a[aria-current="page"] { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; }
.nav-count {
  min-width: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--pe-accent);
  color: var(--pe-accent-ink);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}
.admin-side__foot {
  margin-top: auto;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-size: 14px;
}
.admin-side__foot a, .admin-side__foot .linklike { color: rgba(255, 255, 255, .85); }

.admin-main { padding: 26px 32px 48px; min-width: 0; max-width: 1320px; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 20px;
}
.page-head h1 { font-family: var(--pe-serif); font-size: 28px; letter-spacing: -.01em; margin-bottom: 3px; }
.page-head p { margin: 0; }
.crumb { margin-bottom: 8px; font-size: 14px; }

.panel { margin-bottom: 18px; min-width: 0; }
.panel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--pe-line);
}
.panel__head h2 { font-size: 15.5px; font-weight: 700; }
.panel__head a, .panel__head span { font-size: 14px; }
.panel__body { padding: 16px 18px; }
.panel__note { padding: 12px 18px 0; margin: 0; font-size: 14px; }
.panel__body.field-grid { padding-top: 16px; }

.stack > * + * { margin-top: 12px; }
.stack-sm > * + * { margin-top: 10px; }

.empty { padding: 28px 18px; text-align: center; }
.share-url { display: inline-block; padding: 6px 10px; background: var(--pe-brand-soft); border-radius: 6px; overflow-wrap: anywhere; font-size: 13.5px; }

/* Ringkasan */
.pipeline {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.pipeline__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: var(--pe-surface);
  border: 1px solid var(--pe-line);
  border-top: 3px solid var(--pe-line);
  border-radius: var(--pe-radius);
}
.pipeline__stage.has-work { border-top-color: var(--pe-accent); }
.pipeline__label { font-size: 14px; color: var(--pe-muted); }
.pipeline__value { font-size: 32px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pipeline__stage a { font-size: 14px; font-weight: 500; }
.pipeline-note { margin: 0 0 18px; font-size: 14px; }

.dash-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; align-items: start; }
.dash-grid > .panel { margin: 0; grid-column: span 2; }
.dash-grid > .dash-queue, .dash-grid > .dash-chart { grid-column: span 3; }

.queue { list-style: none; margin: 0; padding: 0; }
.queue li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 10px 18px;
}
.queue li + li { border-top: 1px solid var(--pe-line); }
.queue__main { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: inherit; line-height: 1.35; }
.queue__main:hover strong { text-decoration: underline; }
.queue__main .muted { font-size: 14px; }
.queue__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13.5px; }
.late { color: var(--err); font-weight: 600; }

.rank { list-style: none; margin: 0; padding: 4px 18px 10px; }
.rank li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: 15px; }
.rank li + li { border-top: 1px solid var(--pe-line); }
.rank strong { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Grafik */
.chart-wrap { position: relative; padding: 12px 14px 0; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart-baseline { stroke: var(--chart-baseline); stroke-width: 1; }
.chart-axis { fill: var(--pe-muted); font-size: 12px; font-family: var(--pe-sans); }
.chart-value { fill: var(--pe-ink); font-size: 13px; font-weight: 600; font-family: var(--pe-sans); }
.chart-bar { fill: var(--chart-bar); }
.chart-bar-now { fill: var(--chart-now); }
.chart-hit { fill: transparent; cursor: default; outline: none; }
.chart-hit:hover, .chart-hit:focus { fill: var(--pe-brand-soft); fill-opacity: .55; }
.chart-tip {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--pe-ink);
  color: var(--pe-surface);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
.chart-tip strong { display: block; }
.chart-key { display: flex; align-items: center; gap: 7px; margin: 4px 18px 0; font-size: 13px; }
.chart-key__swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--chart-now); }
.chart-table { padding: 8px 18px 14px; font-size: 14px; }
.chart-table summary { cursor: pointer; color: var(--pe-link); }
.mini-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.mini-table th { text-align: left; font-weight: 600; color: var(--pe-muted); font-size: 13px; }
.mini-table th, .mini-table td { padding: 4px 0; border-bottom: 1px solid var(--pe-line); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Tabel data */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--pe-line);
}
.tabs a {
  padding: 8px 12px;
  color: var(--pe-muted);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs a:hover { color: var(--pe-ink); }
.tabs a[aria-current="page"] { color: var(--pe-ink); font-weight: 600; border-bottom-color: var(--btn-primary-bg); }
.tabs span { font-size: 13px; color: var(--pe-muted); font-variant-numeric: tabular-nums; }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.filters__search { flex: 1 1 280px; min-width: 0; }

.bulkbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 10px;
}
.bulkbar select { width: auto; flex: 0 1 260px; }
.bulkbar input[type="text"] { flex: 1 1 240px; width: auto; }
.bulkbar__count { font-size: 14px; color: var(--pe-muted); min-width: 68px; font-variant-numeric: tabular-nums; }

.table-card { overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.data-table th {
  padding: 9px 12px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pe-muted);
  border-bottom: 1px solid var(--pe-line);
  white-space: nowrap;
}
.data-table td { padding: 10px 12px; vertical-align: top; border-bottom: 1px solid var(--pe-line); overflow-wrap: anywhere; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--pe-brand-soft); }
.data-table--compact td { padding: 8px 12px; }
.col-check { width: 40px; padding-right: 0 !important; }
.row-title { font-weight: 600; text-decoration: none; }
.row-title:hover { text-decoration: underline; }
.row-line { display: block; }
.row-sub { display: block; font-size: 13.5px; color: var(--pe-muted); line-height: 1.4; }
.data-table td .tag { margin-top: 3px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--pe-brand-soft);
  color: var(--pe-ink);
}
.chip__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip--warn { background: var(--warn-soft); color: var(--warn); }
.chip--info { background: var(--info-soft); color: var(--info); }
.chip--brand { background: var(--pe-brand-soft); color: var(--pe-link); }
.chip--good { background: var(--good-soft); color: var(--good); }
.chip--muted { background: transparent; border: 1px solid var(--pe-line); color: var(--pe-muted); }

.tag {
  display: inline-block;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 19px;
  white-space: nowrap;
  border: 1px solid var(--pe-line);
  color: var(--pe-muted);
}
.tag--good { color: var(--good); border-color: var(--good-line); background: var(--good-soft); }
.tag--warn { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }
.tag--danger { color: var(--err); border-color: var(--err-line); background: var(--err-soft); }

.pager { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 16px; font-size: 14.5px; color: var(--pe-muted); }

/* Detail */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.detail-grid > * { min-width: 0; }

.reg-form--admin .group { padding: 0 18px; margin: 18px 0 4px; }
.reg-form--admin .form-actions { padding: 14px 18px 18px; margin: 0; }

.facts { display: grid; grid-template-columns: 130px minmax(0, 1fr); margin: 0; padding: 8px 18px 14px; gap: 0 14px; }
.facts dt { padding: 7px 0; color: var(--pe-muted); font-size: 14px; }
.facts dd { margin: 0; padding: 7px 0; overflow-wrap: anywhere; }

.signal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flag-list { list-style: none; margin: 0; padding: 0; }
.flag-list li + li { margin-top: 10px; }
.flag-list strong { display: block; color: var(--err); font-size: 14.5px; }
.flag-list span { font-size: 13.5px; line-height: 1.4; display: block; }

.timeline { list-style: none; margin: 0; padding: 6px 18px 12px; font-size: 14px; }
.timeline li { padding: 7px 0; }
.timeline li + li { border-top: 1px solid var(--pe-line); }
.timeline span { display: block; }
.timeline time { font-size: 13px; }

.danger-zone { text-align: right; padding: 0 2px 8px; }

.xml-preview > summary { padding: 14px 18px; font-weight: 600; font-size: 15px; cursor: pointer; }
.xml-preview[open] > summary { border-bottom: 1px solid var(--pe-line); }
.code {
  margin: 12px 0 0;
  padding: 14px 18px;
  max-height: 420px;
  overflow: auto;
  background: var(--pe-bg);
  border-top: 1px solid var(--pe-line);
  border-radius: 0 0 var(--pe-radius) var(--pe-radius);
  font-size: 12.5px;
  line-height: 1.5;
}

.howto { margin: 0; padding: 14px 18px 14px 36px; font-size: 14.5px; }
.howto li + li { margin-top: 8px; }
.detail-side .panel__body { font-size: 14.5px; }

.form-actions--split { padding: 14px 12px 4px; margin: 0; }
.panel .data-table + .form-actions { padding: 14px 12px 16px; margin: 0; }
.panel form > .panel__note { padding: 4px 12px 14px; }

.checks { list-style: none; margin: 0; padding: 8px 18px 12px; font-size: 14.5px; }
.checks li { display: flex; gap: 10px; padding: 5px 0; }
.checks__mark { font-weight: 700; font-size: 12.5px; min-width: 24px; padding-top: 2px; white-space: nowrap; }
.is-ok .checks__mark { color: var(--good); }
.is-bad .checks__mark { color: var(--err); }

/* Masuk dan setup */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 28px;
  background: var(--pe-surface);
  border: 1px solid var(--pe-line);
  border-top: 4px solid var(--pe-accent);
  border-radius: var(--pe-radius);
  box-shadow: var(--pe-shadow);
}
.auth-brand { font-family: var(--pe-serif); font-weight: 700; font-size: 18px; margin-bottom: 14px; }
.auth-card h1 { font-size: 22px; margin-bottom: 12px; font-family: var(--pe-serif); }
.auth-card .field { margin-bottom: 14px; }

/* Layar sempit ------------------------------------------------------------- */

@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid > .panel, .dash-grid > .dash-queue, .dash-grid > .dash-chart { grid-column: span 1; }
  .dash-grid > .dash-queue, .dash-grid > .dash-chart { grid-column: 1 / -1; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .register-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .intro { position: static; }
  .public-main { padding: 28px 16px 40px; }
  .site-head__in, .site-foot__in { padding-left: 16px; padding-right: 16px; }

  .admin-shell { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .admin-side {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 12px 16px;
    border-right: 0;
    border-bottom: 3px solid var(--pe-accent);
  }
  .admin-brand { padding: 0; flex: 1 1 auto; }
  .admin-side__foot { order: 2; margin: 0; padding: 0; flex-direction: row; gap: 12px; font-size: 13.5px; }
  .admin-nav { order: 3; flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .admin-nav a { padding: 6px 10px; gap: 8px; font-size: 14.5px; }
  .admin-main { padding: 20px 16px 40px; }
  .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .form-card, .card--pad { padding: 20px 16px; }
  .btn--lg { width: 100%; }
  .site-nav { margin-left: -10px; }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }

  /* Tabel berubah menjadi kartu agar tidak perlu gulir ke samping. */
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { position: relative; padding: 10px 14px 10px 44px; border-bottom: 1px solid var(--pe-line); }
  .data-table tbody tr:last-child { border-bottom: 0; }
  .data-table td, .data-table--compact td { padding: 3px 0; border: 0; }
  .data-table td.col-check { position: absolute; left: 14px; top: 12px; width: auto; padding: 0 !important; }
  .data-table td.num { text-align: left; }
  .data-table td[data-label="Masuk"]::before,
  .data-table td[data-label="Dibuat"]::before,
  .data-table td[data-label="Akun"]::before,
  .data-table td[data-label="Peran"]::before {
    content: attr(data-label) ": ";
    color: var(--pe-muted);
    font-size: 13.5px;
  }
  .bulkbar select, .bulkbar input[type="text"] { flex: 1 1 100%; }
  .bulkbar .btn { flex: 1 1 100%; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dt { padding-bottom: 0; }
  .facts dd { padding-top: 0; }
}

@media print {
  .site-head, .site-foot, .admin-side, .bulkbar, .filters { display: none; }
  .admin-shell { display: block; }
  body { background: #fff; }
}

@media (forced-colors: active) {
  .chart-bar { fill: CanvasText; }
  .chart-bar-now { fill: Highlight; }
}