/* Halaman masuk, aktivasi, reset, dan konsol platform memakai tema platform, bukan tema vendor.
   Komposisi mengikuti login VS OS 12.33 (hero lembut + panel form). Library 12.04.02 tidak
   punya specimen login, jadi desain owner yang sudah disetujui itulah acuannya.
   Dua kolom ↔ satu kolom lewat auto-fit, tanpa @media. */
.omni-auth { min-height: 100dvh; display: grid; place-items: center; padding: clamp(var(--space-4), 3vw, var(--space-9)); background: var(--bg-app); }
.omni-auth__shell { width: 100%; max-width: var(--container-md); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-3); padding: var(--space-3); background: var(--surface-0); border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); }
.omni-auth__hero { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-9); padding: clamp(var(--space-6), 5vw, var(--space-10)) clamp(var(--space-6), 4vw, var(--space-9)); border-radius: var(--radius-lg); background: var(--brand-gradient-soft); color: var(--text-strong); }
.omni-auth__mark { font-family: var(--font-display); font-weight: 800; font-size: var(--text-h4); letter-spacing: var(--ls-tight); color: var(--text-strong); }
.omni-auth__title { font-size: clamp(var(--text-h2), 2vw + 1.2rem, var(--text-display)); letter-spacing: var(--ls-display); line-height: var(--lh-tight); text-wrap: balance; margin-top: var(--space-5); }
.omni-auth__sub { max-width: 34ch; margin-top: var(--space-5); color: var(--text-muted); font-size: var(--text-sm); line-height: var(--lh-relaxed); }
.omni-auth__panel { min-width: 0; padding: clamp(var(--space-6), 5vw, var(--space-11)) clamp(var(--space-5), 4vw, var(--space-10)); display: flex; flex-direction: column; gap: var(--space-6); justify-content: center; }
.omni-auth__panel h1 { font-size: var(--text-h2); }
.omni-auth__lead { color: var(--text-muted); font-size: var(--text-sm); max-width: 42ch; margin-top: var(--space-3); }
.omni-auth form { display: grid; gap: var(--space-5); }
.omni-auth__foot { color: var(--text-muted); font-size: var(--text-xs); }
.omni-auth__foot a { color: var(--text-strong); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
.omni-passbtn { width: var(--field-h); height: calc(var(--field-h) - 2px); margin-right: -10px; /* sasaran ketuk 44px, tetap di dalam kotak isian */ border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-right: -8px; }
.omni-passbtn:hover { background: var(--surface-1); color: var(--text-strong); }
.omni-secret { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--ls-label-sm); padding: var(--space-4); border: 1px solid var(--line-200); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text-strong); overflow-wrap: anywhere; user-select: all; }
.omni-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-sm); }
.omni-codes span { padding: var(--space-3) var(--space-4); border: 1px solid var(--line-200); border-radius: var(--radius-xs); background: var(--surface-1); text-align: center; user-select: all; }
.omni-steps { display: flex; gap: var(--space-2); }
.omni-steps span { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--ink-100); }
.omni-steps span[data-on="1"] { background: var(--ink-900); }

/* Tabel konsol platform: tabel di ruang luas, kartu di ruang sempit, lewat container query. */
.omni-tablewrap { container: tbl / inline-size; }
.omni-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.omni-table th { text-align: left; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-medium); padding: var(--space-4); border-bottom: 1px solid var(--line-200); white-space: nowrap; }
.omni-table td { padding: var(--space-4); border-bottom: 1px solid var(--line-100); vertical-align: middle; min-width: 0; }
.omni-table td b { color: var(--text-strong); font-weight: var(--fw-semibold); display: block; }
.omni-table td small { color: var(--text-muted); font-size: var(--text-xs); display: block; overflow-wrap: anywhere; }
.omni-table .is-mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.omni-table .is-actions { text-align: right; white-space: nowrap; }
@container tbl (max-width: 640px) {
  .omni-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .omni-table, .omni-table tbody, .omni-table tr, .omni-table td { display: block; width: 100%; }
  .omni-table tr { padding: var(--space-4) 0; border-bottom: 1px solid var(--line-100); }
  .omni-table td { border: 0; padding: var(--space-2) 0; display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; }
  .omni-table td::before { content: attr(data-label); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--text-muted); flex: 0 0 auto; }
  .omni-table td.is-lead { display: block; }
  .omni-table td.is-lead::before { content: none; }
  .omni-table .is-actions { text-align: left; justify-content: flex-start; flex-wrap: wrap; white-space: normal; }
  .omni-table .is-actions::before { content: none; }
}

/* Konsol platform: satu kolom di semua lebar, tanpa navigasi samping. */
.omni-app.omni-app--plain { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top" "main" "mark"; }
.omni-app--plain .omni-mark { grid-area: mark; }
.omni-app--plain .omni-body { margin-inline: auto; }
.omni-app--plain .omni-pagehead { justify-content: center; }
.omni-app--plain .omni-pagehead > * { max-width: var(--container-lg); }