/* ==========================================================================
   KSM168 Electrical — shell.css (F4): pelengkap shell aplikasi di atas komponen F2.
   Dimuat SEMUA layout (bukan data-page-style). Hanya token var(--…); kelas berawalan shell-
   (dan sg- untuk /_dev/styleguide). Isi: menu akun, panel notifikasi, judul topbar, sub-menu
   sidebar, aksi easy-bar, banner impersonate, kartu login/setup/password, halaman galat,
   pratinjau shell, styleguide.
   ========================================================================== */

/* ---- Menu akun ------------------------------------------------------- */
/* Menu akun lebih tinggi dari .menu bawaan (28rem) supaya "Keluar" tidak tersembunyi di
   scroll internal saat item 44px (Mobile/Easy UI). */
.shell-account {
  min-width: 16rem;
  max-height: min(42rem, calc(100vh - 5rem));
  max-height: min(42rem, calc(100dvh - 5rem));
}

.shell-account__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2-5) var(--space-1-5);
}

.shell-account__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--leading-tight);
}

.shell-account__name {
  overflow: hidden;
  color: var(--heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-account__role {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.shell-account__mode {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  margin: var(--space-1) var(--space-1) var(--space-1-5);
  padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.shell-account__mode strong {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

.shell-account__mode .icon {
  flex: none;
}

.shell-account__logout {
  display: contents;
}

.shell-account-btn__name {
  max-width: 11rem;
  overflow: hidden;
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-account-btn__caret {
  display: none;
  color: var(--text-subtle);
}

@media (min-width: 1024px) {
  .shell-account-btn__caret {
    display: inline-block;
  }
}

.account-btn[aria-expanded="true"],
.shell-avatar-btn[aria-expanded="true"],
.shell-bell[aria-expanded="true"] {
  background: var(--surface-3);
}

.shell-avatar-btn .avatar {
  --avatar-size: 2rem;
}

/* ---- Panel notifikasi ------------------------------------------------ */
.shell-notif {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  width: min(24rem, calc(100vw - 1rem));
  max-height: min(34rem, calc(100vh - 5rem));
  max-height: min(34rem, calc(100dvh - 5rem));
  overflow: hidden;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  animation: shell-pop var(--duration-fast) var(--ease-out);
}

.shell-notif:focus {
  outline: none;
}

.shell-notif__head {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
}

.shell-notif__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--heading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.shell-notif__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.shell-notif__list {
  margin: 0;
  padding: var(--space-1);
  list-style: none;
}

.shell-notif__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2-5) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.shell-notif__item:hover {
  background: var(--surface-3);
  text-decoration: none;
}

.shell-notif__item:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: -2px;
}

.shell-notif__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-muted);
}

.shell-notif__icon .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.shell-notif__icon[data-sev="critical"] {
  background: var(--status-crit-bg);
  color: var(--status-crit-fg);
}

.shell-notif__icon[data-sev="attention"] {
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
}

.shell-notif__icon[data-sev="normal"] {
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
}

.shell-notif__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.shell-notif__item-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.shell-notif__item.is-unread .shell-notif__item-title {
  color: var(--heading);
  font-weight: var(--weight-semibold);
}

.shell-notif__item-body {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shell-notif__time {
  color: var(--text-subtle);
  font-size: var(--text-xs);
}

.shell-notif__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.375rem;
  border-radius: 50%;
  background: var(--accent);
}

.shell-notif__foot {
  flex: none;
  padding: var(--space-1);
  border-top: var(--border-width) solid var(--border);
}

.shell-notif__skeleton {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
}

.shell-notif__skeleton .skeleton--circle {
  flex: none;
  width: 2rem;
  height: 2rem;
}

.shell-notif__skeleton-lines {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-2);
}

.shell-notif__empty {
  padding: var(--space-8) var(--space-4);
}

@keyframes shell-pop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

/* ---- Topbar: judul + breadcrumb -------------------------------------- */
.shell-heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  line-height: var(--leading-tight);
}

.shell-heading__crumbs {
  display: none;
  min-width: 0;
}

@media (min-width: 768px) {
  .shell-heading__crumbs {
    display: block;
  }
}

.shell-heading__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-xs);
  list-style: none;
  white-space: nowrap;
}

.shell-heading__item {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-heading__item + .shell-heading__item::before {
  content: "›";
  padding-right: var(--space-1);
  color: var(--text-subtle);
}

.shell-heading__item a {
  color: inherit;
}

.shell-heading__item a:hover {
  color: var(--text);
  text-decoration: underline;
}

/* ---- Sidebar: sub-menu, versi --------------------------------------- */
.shell-subnav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0.125rem 0 var(--space-1) var(--space-5);
  padding-left: var(--space-2);
  border-left: var(--border-width) solid var(--border);
}

@media (pointer: fine) {
  .shell-subnav__item {
    min-height: 2.25rem;
  }
}

.shell-subnav__item .nav-item__icon {
  width: 1.125rem;
  height: 1.125rem;
}

.shell-nav-parent {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

.shell-nav-caret {
  flex: none;
  color: var(--text-subtle);
}

.shell-version {
  padding: var(--space-1) var(--space-3);
  overflow: hidden;
  color: var(--text-subtle);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-nav-empty {
  padding: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

@media (min-width: 1024px) {
  :root[data-sidebar="collapsed"] .shell-subnav,
  :root[data-sidebar="collapsed"] .shell-nav-caret,
  :root[data-sidebar="collapsed"] .shell-version,
  :root[data-sidebar="collapsed"] .shell-nav-empty {
    display: none;
  }
}

/* ---- Easy-bar: aksi Scan / Riwayat ----------------------------------- */
.shell-easy-action {
  flex: none;
}

.shell-easy-action[aria-current="page"] {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
  color: var(--accent-text-strong);
}

@media (max-width: 639.98px) {
  .shell-easy-action {
    width: var(--control-h);
    padding: 0;
  }

  .shell-easy-action__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---- Banner impersonate --------------------------------------------- */
.shell-imp {
  gap: var(--space-3);
}

.shell-imp__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-imp form {
  display: contents;
}

.shell-imp__stop {
  position: relative;
}

/* Area sentuh ≥ 44px walau tombol (30px) muat di banner setinggi 40px: 30 + 2 × 7 = 44.
   Di Mobile UI banner setinggi 48px (--banner-h) dan tombolnya sendiri 44px. */
.shell-imp__stop::after {
  content: "";
  position: absolute;
  inset: -0.4375rem -0.25rem;
}

/* ---- Pilihan mode (login tahap 2 & dialog Ganti mode) --------------- */
.shell-mode {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.shell-mode .segmented__label .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.shell-mode-form__current {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.shell-mode-form__current strong {
  color: var(--text);
}

/* ---- Kartu auth: login, 2FA, masuk otomatis, setup, password -------- */
/* layouts.css memberi #app-main display:block (selector id); kartu auth harus tetap di tengah. */
/* Kartu dijangkar di atas (bukan tengah vertikal): saat tinggi kartu beranimasi antar-tahap,
   tepi atas dan judul tidak ikut bergeser. */
#app-main.auth-shell__main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(0px, 7vh, 4.5rem);
}

@media (max-width: 639.98px) {
  #app-main.auth-shell__main {
    padding-top: 0;
  }
}

.auth-stage > .auth-card__header {
  margin-bottom: var(--space-2);
}

.shell-auth-icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--accent-subtle);
  color: var(--accent-text-strong);
}

.shell-auth-icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.shell-auth-icon--ok {
  background: var(--status-ok-bg);
  color: var(--status-ok-fg);
}

.shell-auth-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-4);
  font-size: var(--text-sm);
}

.shell-auth-links .link-btn,
.auth-card__subtitle .link-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
}

.auth-card__subtitle .link-btn {
  min-height: 0;
}

@media (pointer: coarse) {
  .auth-card__subtitle .link-btn {
    min-height: var(--touch);
  }
}

.shell-otp {
  padding-left: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4em;
  text-align: center;
}

.shell-otp--recovery {
  padding-left: 0.08em;
  font-size: var(--text-lg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shell-auto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) solid var(--accent-border);
  border-radius: var(--radius-card);
  background: var(--accent-subtle);
}

.shell-auto__icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
}

.shell-auto__text strong {
  color: var(--accent-text-strong);
}

.shell-auto__bar {
  grid-column: 1 / -1;
  height: 0.25rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}

.shell-auto__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.is-running .shell-auto__fill {
  animation: shell-auto-fill var(--auto-delay, 1600ms) linear forwards;
}

@keyframes shell-auto-fill {
  to {
    transform: scaleX(1);
  }
}

.shell-strength {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.shell-strength__bars {
  display: grid;
  flex: 0 0 7rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
}

.shell-strength__bars > span {
  height: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}

.shell-strength__label strong {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

.shell-strength[data-score="1"] .shell-strength__bars > span:nth-child(-n + 1),
.shell-strength[data-score="2"] .shell-strength__bars > span:nth-child(-n + 2) {
  background: var(--status-crit-solid);
}

.shell-strength[data-score="3"] .shell-strength__bars > span:nth-child(-n + 3) {
  background: var(--status-warn-solid);
}

.shell-strength[data-score="4"] .shell-strength__bars > span,
.shell-strength[data-score="5"] .shell-strength__bars > span {
  background: var(--status-ok-solid);
}

.shell-rules {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  list-style: none;
}

.shell-rules__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1-5);
}

.shell-rules__item .icon {
  width: 1rem;
  height: 1rem;
  margin-top: 0.0625rem;
  color: var(--text-subtle);
}

.shell-rules__item.is-ok {
  color: var(--text);
}

.shell-rules__item.is-ok .icon {
  color: var(--status-ok);
}

.shell-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.shell-steps__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding-top: var(--space-2);
  border-top: 3px solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.shell-steps__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-steps__num {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.shell-steps__item[aria-current="step"] {
  border-top-color: var(--accent);
  color: var(--accent-text-strong);
  font-weight: var(--weight-semibold);
}

.shell-steps__item[aria-current="step"] .shell-steps__num {
  background: var(--accent);
  color: var(--accent-fg);
}

.shell-steps__item.is-done {
  border-top-color: var(--status-ok-solid);
  color: var(--text);
}

.shell-steps__item.is-done .shell-steps__num {
  background: var(--status-ok-solid);
  color: var(--status-ok-solid-fg);
}

.shell-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* <legend> di fieldset flex bukan item flex: jarak ke isi lewat margin. */
.shell-step__title {
  margin-bottom: var(--space-2);
  padding: 0;
  color: var(--heading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.shell-step__text {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.shell-step > [data-setup-admin-fields] {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.shell-setup__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.shell-setup__nav [data-setup-back] {
  margin-right: auto;
}

.shell-setup__nav [data-setup-next] {
  flex: 1 1 12rem;
}

@media (min-width: 480px) {
  .shell-setup__nav [data-setup-next] {
    flex: 0 0 auto;
    min-width: 12rem;
  }
}

.shell-setup__summary dd {
  font-weight: var(--weight-semibold);
}

.shell-theme-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch);
  color: var(--text-muted);
}

.shell-theme-link:hover {
  color: var(--text);
}

.shell-version-inline {
  font-variant-numeric: tabular-nums;
}

.shell-noscript {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-banner);
}

/* ---- Halaman galat & offline ----------------------------------------- */
.shell-error__icon {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-xl);
  background: var(--surface-3);
  color: var(--text-muted);
}

.shell-error__icon .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.shell-error__icon[data-tone="warn"] {
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
}

.shell-error__icon[data-tone="crit"] {
  background: var(--status-crit-bg);
  color: var(--status-crit-fg);
}

.shell-error__ref {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.shell-error__ref-label {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.shell-error__ref-code {
  color: var(--heading);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  -webkit-user-select: all;
  user-select: all;
}

.shell-error__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  max-width: 28rem;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.shell-error__debug {
  width: 100%;
  margin-top: var(--space-4);
  text-align: left;
}

.shell-error__debug summary {
  color: var(--text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
}

.shell-error__debug pre {
  max-height: 40vh;
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  overflow: auto;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: pre-wrap;
  word-break: break-word;
}

.shell-error-card .error-page {
  padding: 0;
}

.shell-offline-tips {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  list-style: none;
  text-align: left;
}

.shell-offline-tips li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.shell-offline-tips .icon {
  margin-top: 0.125rem;
}

/* ---- Pratinjau shell (/_dev/shell/easy) ------------------------------ */
.shell-preview-map {
  overflow: auto;
  cursor: default;
  touch-action: auto;
}

.shell-preview-map:active {
  cursor: default;
}

.shell-preview-map__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4) var(--space-16);
}

.shell-preview-map__node {
  width: 100%;
}

/* ---- Styleguide (/_dev/styleguide) ------------------------------------ */
.sg-controls {
  align-items: center;
}

.sg-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sg-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--border);
  scroll-margin-top: calc(var(--chrome-top) + var(--header-offset) + var(--space-4));
}

.sg-section__title {
  color: var(--heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.sg-narrow {
  max-width: 34rem;
}

.sg-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-3);
}

.sg-swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  font-size: var(--text-xs);
}

.sg-swatch__chip {
  height: 3rem;
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius);
}

.sg-swatch__chip[data-token="bg"] { background: var(--bg); }
.sg-swatch__chip[data-token="surface"] { background: var(--surface); }
.sg-swatch__chip[data-token="surface-2"] { background: var(--surface-2); }
.sg-swatch__chip[data-token="surface-3"] { background: var(--surface-3); }
.sg-swatch__chip[data-token="border"] { background: var(--border); }
.sg-swatch__chip[data-token="border-strong"] { background: var(--border-strong); }
.sg-swatch__chip[data-token="accent"] { background: var(--accent); }
.sg-swatch__chip[data-token="accent-subtle"] { background: var(--accent-subtle); }
.sg-swatch__chip[data-token="danger"] { background: var(--danger); }
.sg-swatch__chip[data-status-tone="ok"] { background: var(--status-ok-solid); }
.sg-swatch__chip[data-status-tone="warn"] { background: var(--status-warn-solid); }
.sg-swatch__chip[data-status-tone="crit"] { background: var(--status-crit-solid); }
.sg-swatch__chip[data-status-tone="none"] { background: var(--status-none-solid); }
.sg-swatch__chip[data-status-tone="info"] { background: var(--status-info-solid); }
.sg-swatch__chip[data-chart="1"] { background: var(--chart-1); }
.sg-swatch__chip[data-chart="2"] { background: var(--chart-2); }
.sg-swatch__chip[data-chart="3"] { background: var(--chart-3); }
.sg-swatch__chip[data-chart="4"] { background: var(--chart-4); }
.sg-swatch__chip[data-chart="5"] { background: var(--chart-5); }
.sg-swatch__chip[data-chart="6"] { background: var(--chart-6); }
.sg-node-cards {
  align-items: flex-start;
}

.sg-swatch__name {
  font-weight: var(--weight-semibold);
}

.sg-swatch__code {
  overflow: hidden;
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sg-ill-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sg-ill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
}

.sg-ill-row__label {
  flex: 0 0 100%;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.sg-ill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 6.5rem;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-2xs);
  text-align: center;
}

.sg-tree-card {
  max-width: 28rem;
  padding: var(--space-2);
}

.sg-frame {
  position: relative;
  overflow: hidden;
  border: var(--border-width) dashed var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--bg);
}

.sg-frame .easy-bar,
.sg-frame .m-header,
.sg-frame .console-strip,
.sg-frame .banner {
  position: relative;
  top: auto;
  z-index: auto;
}

.sg-frame--sidebar {
  max-width: 16rem;
  padding: var(--space-2);
  background: var(--surface);
}

.sg-sidebar-sample {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.sg-frame--phone {
  max-width: 24rem;
}

.sg-frame--phone .submit-bar,
.sg-frame--phone .bottom-nav {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: auto;
  transform: none;
}

.sg-frame--phone .submit-bar {
  flex-direction: column;
  align-items: stretch;
  padding: var(--space-2) var(--space-4) var(--space-3);
}

.sg-frame--phone .submit-bar > .btn {
  width: 100%;
}

/* Contoh .submit-bar di halaman yang sama menyembunyikan .bottom-nav lewat :has() (layouts.css);
   contoh bottom nav di bingkai tetap ditampilkan. */
.sg-frame--phone .bottom-nav {
  display: grid !important;
}

.sg-phone-body {
  min-height: 6rem;
  padding: var(--space-4);
}

/* ---- Target sentuh ≥ 44px di perangkat sentuh -------------------------- */
@media (pointer: coarse) {
  .easy-bar__brand,
  .sidebar__brand,
  .auth-shell__brand {
    min-width: var(--touch);
    min-height: var(--touch);
  }

  .shell-notif__head .btn {
    min-height: var(--touch);
  }

  .shell-notif__head .btn--icon {
    width: var(--touch);
  }
}

/* ---- Layar sangat sempit (< 420px) ----------------------------------- */
@media (max-width: 419.98px) {
  .easy-bar {
    gap: var(--space-2);
    padding-right: max(var(--space-2), var(--safe-right));
    padding-left: max(var(--space-2), var(--safe-left));
  }

  .easy-bar__meta {
    display: none;
  }

  .shell-steps__item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
}