/* ============================================================================
   CONNECT+ — VS UI base (VIRCANSASTUDIO Design System v2.0)
   Terjemahan production 16 primitive resmi (design-system/components.md)
   + helper editorial. SEMUA nilai dari tokens.css — dilarang hardcode.
   Muat setelah: fonts.css, tokens.css.
   ============================================================================ */

/* ===== Base (base.css source) ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01";
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  margin: 0;
}
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--border-default); margin: var(--space-5) 0; }
::selection { background: var(--vs-yellow); color: var(--vs-black); }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }
button { font-family: var(--font-body); }
input, select, textarea { font-family: var(--font-body); }
@keyframes vs-spin { to { transform: rotate(360deg); } }
@keyframes vs-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===== Helper editorial ===== */
.vs-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.vs-kicker--sm { letter-spacing: var(--ls-label-sm); }
.vs-hairline { height: 1px; background: var(--border-default); border: 0; margin: 0; }
.vs-hairline--faint { background: var(--border-faint); }
.vs-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ===== Button ===== */
.vs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  height: var(--field-h); padding: 0 var(--space-6);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-semibold);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.vs-btn:focus-visible { box-shadow: var(--shadow-focus); }
.vs-btn--primary, .vs-btn:not([class*="vs-btn--"]) { background: var(--primary); color: var(--primary-contrast); }
.vs-btn--primary:hover, .vs-btn:not([class*="vs-btn--"]):hover { background: var(--primary-hover); }
.vs-btn--primary:active { background: var(--primary-active); }
.vs-btn--brand { background: var(--brand); color: var(--brand-ink); }
.vs-btn--brand:hover { background: var(--brand-line); }
.vs-btn--brand:focus-visible { box-shadow: var(--shadow-focus-brand); }
.vs-btn--secondary { background: var(--surface-0); color: var(--text-strong); border-color: var(--border-input); }
.vs-btn--secondary:hover { background: var(--surface-1); }
.vs-btn--ghost { background: transparent; color: var(--text-muted); }
.vs-btn--ghost:hover { background: var(--surface-1); color: var(--text-strong); }
.vs-btn--danger { background: var(--accent-red); color: var(--primary-contrast); }
.vs-btn--danger:hover { filter: brightness(.94); }
.vs-btn--sm { height: var(--field-h-sm); padding: 0 var(--space-5); font-size: var(--text-xs); border-radius: var(--radius-xs); }
.vs-btn--lg { height: var(--field-h-lg); padding: 0 var(--space-8); font-size: var(--text-md); }
.vs-btn--block { display: flex; width: 100%; }
.vs-btn[disabled], .vs-btn--disabled { background: var(--ink-100); color: var(--text-disabled); border-color: transparent; cursor: not-allowed; pointer-events: none; }
.vs-btn__icon { display: inline-flex; flex: 0 0 auto; }
.vs-btn__spin {
  width: 14px; height: 14px; border-radius: var(--radius-pill);
  border: 2px solid rgba(255,255,255,.35); border-top-color: currentColor;
  animation: vs-spin .7s linear infinite;
}

/* ===== IconButton ===== */
.vs-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--field-h-sm); height: var(--field-h-sm); flex: 0 0 auto;
  border: 1px solid transparent; border-radius: var(--radius-xs);
  background: transparent; color: var(--text-muted); cursor: pointer; padding: 0;
  transition: background .12s ease, color .12s ease;
}
.vs-iconbtn:hover { background: var(--surface-1); color: var(--text-strong); }
.vs-iconbtn--outline { border-color: var(--border-input); background: var(--surface-0); }
.vs-iconbtn--solid { background: var(--primary); color: var(--primary-contrast); }
.vs-iconbtn--solid:hover { background: var(--primary-hover); color: var(--primary-contrast); }
.vs-iconbtn--brand { background: var(--brand); color: var(--brand-ink); }
.vs-iconbtn--sm { width: 28px; height: 28px; }
.vs-iconbtn--lg { width: var(--field-h); height: var(--field-h); border-radius: var(--radius-sm); }
.vs-iconbtn--danger:hover { background: var(--tag-danger-bg); color: var(--accent-red); }

/* ===== Tag (Fresh Tag System) ===== */
.vs-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 26px; padding: 0 var(--space-4);
  border: 1px solid; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--fw-medium); white-space: nowrap;
}
.vs-tag--sm { height: 22px; padding: 0 var(--space-3); font-size: var(--text-2xs); }
.vs-tag--square { border-radius: var(--radius-xs); }
.vs-tag__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; flex: 0 0 auto; }
.vs-tag__x { border: 0; background: transparent; color: inherit; cursor: pointer; display: inline-flex; padding: 0; margin-left: var(--space-1); }
.vs-tag--success  { background: var(--tag-success-bg);  border-color: var(--tag-success-border);  color: var(--tag-success-text); }
.vs-tag--mint     { background: var(--tag-mint-bg);     border-color: var(--tag-mint-border);     color: var(--tag-mint-text); }
.vs-tag--info     { background: var(--tag-info-bg);     border-color: var(--tag-info-border);     color: var(--tag-info-text); }
.vs-tag--blue     { background: var(--tag-blue-bg);     border-color: var(--tag-blue-border);     color: var(--tag-blue-text); }
.vs-tag--purple   { background: var(--tag-purple-bg);   border-color: var(--tag-purple-border);   color: var(--tag-purple-text); }
.vs-tag--pink     { background: var(--tag-pink-bg);     border-color: var(--tag-pink-border);     color: var(--tag-pink-text); }
.vs-tag--warning  { background: var(--tag-warning-bg);  border-color: var(--tag-warning-border);  color: var(--tag-warning-text); }
.vs-tag--orange   { background: var(--tag-orange-bg);   border-color: var(--tag-orange-border);   color: var(--tag-orange-text); }
.vs-tag--danger   { background: var(--tag-danger-bg);   border-color: var(--tag-danger-border);   color: var(--tag-danger-text); }
.vs-tag--neutral  { background: var(--tag-neutral-bg);  border-color: var(--tag-neutral-border);  color: var(--tag-neutral-text); }
.vs-tag--identity { background: var(--tag-identity-bg); border-color: var(--tag-identity-border); color: var(--tag-identity-text); }

/* ===== Badge ===== */
.vs-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: var(--fw-semibold);
  background: var(--primary); color: var(--primary-contrast);
}
.vs-badge--brand { background: var(--brand); color: var(--brand-ink); }
.vs-badge--danger { background: var(--accent-red); color: var(--primary-contrast); }
.vs-badge--neutral { background: var(--ink-100); color: var(--text-muted); }
.vs-badge--sm { min-width: 16px; height: 16px; font-size: 9.5px; padding: 0 var(--space-2); }
.vs-badge--dot { min-width: 8px; width: 8px; height: 8px; padding: 0; }

/* ===== Avatar ===== */
.vs-avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--radius-pill); overflow: visible;
  background: var(--ink-100); color: var(--ink-600);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-sm);
  user-select: none;
}
.vs-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.vs-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.vs-avatar--sm { width: 32px; height: 32px; font-size: var(--text-2xs); }
.vs-avatar--lg { width: 56px; height: 56px; font-size: var(--text-h4); }
.vs-avatar--xl { width: 72px; height: 72px; font-size: var(--text-h3); }
.vs-avatar--rounded { border-radius: var(--radius-sm); }
.vs-avatar--square { border-radius: var(--radius-xs); }
.vs-avatar--ink { background: var(--primary); color: var(--primary-contrast); }
.vs-avatar--brand { background: var(--brand); color: var(--brand-ink); }
.vs-avatar__status {
  position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: var(--radius-pill);
  border: 2px solid var(--surface-0);
}
.vs-avatar__status--online { background: var(--accent-mint); }
.vs-avatar__status--busy { background: var(--accent-red); }
.vs-avatar__status--away { background: var(--accent-orange); }
.vs-avatar__status--offline { background: var(--ink-300); }

/* ===== Card / StatCard ===== */
.vs-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-7);
}
.vs-card--flat { box-shadow: none; }
.vs-card--pop { box-shadow: var(--shadow-pop); }
.vs-card--p0 { padding: 0; }
.vs-card--p-sm { padding: var(--space-5); }
.vs-card--p-lg { padding: var(--space-9); }
.vs-card--interactive { transition: transform .16s ease, box-shadow .16s ease; }
.vs-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.vs-card--accent { border-top: 3px solid var(--brand); }
.vs-card--ink { background: var(--bg-ink); border-color: var(--bg-ink); color: var(--text-on-dark); }
.vs-card__title { font-family: var(--font-display); font-size: 17px; font-weight: var(--fw-bold); color: var(--text-strong); }

.vs-stat { display: flex; flex-direction: column; gap: var(--space-3); }
.vs-stat__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.vs-stat__label {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--text-subtle);
}
.vs-stat__icon {
  width: 34px; height: 34px; border-radius: var(--radius-xs);
  background: var(--bg-inset); color: var(--text-strong);
  display: inline-flex; align-items: center; justify-content: center;
}
.vs-stat__value {
  font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display); color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.vs-stat__delta { font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-semibold); }
.vs-stat__delta--up { color: var(--accent-mint); }
.vs-stat__delta--down { color: var(--accent-red); }
.vs-stat__foot { font-size: var(--text-xs); color: var(--text-muted); }

/* ===== Field / Input / Select / Textarea ===== */
.vs-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.vs-field__label { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-strong); }
.vs-field__opt { font-weight: var(--fw-regular); color: var(--text-subtle); }
.vs-field__req { color: var(--accent-red); }
.vs-field__hint { font-size: 12px; color: var(--text-subtle); }
.vs-field__hint--error { color: var(--accent-red); }
.vs-input, .vs-sel, .vs-textarea {
  width: 100%; height: var(--field-h);
  border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  background: var(--surface-0); color: var(--text-strong);
  font-family: var(--font-body); font-size: var(--text-sm);
  padding: 0 var(--space-5); outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.vs-input:hover, .vs-sel:hover, .vs-textarea:hover { border-color: var(--ink-300); }
.vs-input:focus, .vs-sel:focus, .vs-textarea:focus { border-color: var(--border-strong); box-shadow: var(--shadow-focus); }
.vs-input::placeholder, .vs-textarea::placeholder { color: var(--text-subtle); }
.vs-input--sm { height: var(--field-h-sm); border-radius: var(--radius-xs); font-size: var(--text-xs); }
.vs-input--lg { height: var(--field-h-lg); }
/* Padanan `--lg` untuk select. Tanpa ini, satu langkah form yang memuat input
   52px dan select 44px berakhir dengan garis bawah yang tidak sejajar. Tinggi
   DASAR `.vs-sel` sengaja TIDAK diubah — admin memakainya pada 44px. */
.vs-sel--lg { height: var(--field-h-lg); }
.vs-input--error, .vs-sel--error { border-color: var(--accent-red); border-width: 1.5px; }
.vs-input[disabled], .vs-sel[disabled] { background: var(--bg-inset); color: var(--text-disabled); cursor: not-allowed; }
.vs-textarea { height: auto; min-height: 88px; padding: 11px var(--space-5); line-height: 1.55; resize: vertical; }
/* wrap dengan affix / prefix */
.vs-inputwrap {
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--field-h); padding: 0 var(--space-5);
  border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  background: var(--surface-0);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.vs-inputwrap:hover { border-color: var(--ink-300); }
.vs-inputwrap:focus-within { border-color: var(--border-strong); box-shadow: var(--shadow-focus); }
.vs-inputwrap > input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent;
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-strong); padding: 0;
}
.vs-inputwrap > input::placeholder { color: var(--text-subtle); }
.vs-inputwrap__affix { display: inline-flex; color: var(--text-subtle); flex: 0 0 auto; }
.vs-inputwrap__prefix { font-size: var(--text-sm); color: var(--text-muted); flex: 0 0 auto; }
.vs-inputwrap--sm { height: var(--field-h-sm); border-radius: var(--radius-sm); }
.vs-inputwrap--lg { height: var(--field-h-lg); }
/* Varian error milik pembungkus sendiri. Memakai `.vs-input--error` di div ini
   tidak pernah terlihat: `.vs-inputwrap` menulis `border` SHORTHAND beberapa
   baris SESUDAHNYA, jadi ia mengembalikan warna dan tebalnya. Aturan ini lahir
   paling akhir supaya ia yang menang. */
.vs-inputwrap--error { border-color: var(--accent-red); border-width: 1.5px; }
.vs-selwrap { position: relative; }
.vs-selwrap .vs-sel { appearance: none; -webkit-appearance: none; padding-right: var(--space-9); }
.vs-selwrap__chev {
  position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%);
  color: var(--text-subtle); pointer-events: none; display: inline-flex;
}

/* ===== Checkbox / Switch / Radio ===== */
.vs-check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.vs-check input { position: absolute; opacity: 0; pointer-events: none; }
.vs-check__box {
  width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto;
  border: 1.5px solid var(--border-input); border-radius: 5px;
  background: var(--surface-0);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--primary-contrast); transition: all .12s ease;
}
.vs-check__box svg { opacity: 0; }
.vs-check input:checked + .vs-check__box { background: var(--primary); border-color: var(--primary); }
.vs-check input:checked + .vs-check__box svg { opacity: 1; }
.vs-check input:focus-visible + .vs-check__box { box-shadow: var(--shadow-focus); }
.vs-check__label { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.35; }
.vs-check__desc { font-size: var(--text-xs); color: var(--text-subtle); }
/* Kolom label + keterangan di sebelah kotaknya. Sebelumnya ditulis sebagai
   `style="display:flex;flex-direction:column;gap:2px"` inline di JS — tata
   letak yang tidak pernah terlihat saat CSS disisir. */
.vs-check__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.vs-check--disabled { cursor: not-allowed; opacity: .55; }

.vs-switch { display: inline-flex; align-items: center; gap: var(--space-4); cursor: pointer; }
.vs-switch input { position: absolute; opacity: 0; pointer-events: none; }
.vs-switch__track {
  width: 40px; height: 24px; flex: 0 0 auto; border-radius: var(--radius-pill);
  background: var(--ink-200); position: relative; transition: background .15s ease;
}
.vs-switch__thumb {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: var(--radius-pill); background: var(--surface-0);
  box-shadow: var(--shadow-xs); transition: transform .15s ease;
}
.vs-switch input:checked ~ .vs-switch__track { background: var(--primary); }
.vs-switch--brand input:checked ~ .vs-switch__track { background: var(--brand); }
.vs-switch input:checked ~ .vs-switch__track .vs-switch__thumb { transform: translateX(16px); }
.vs-switch input:focus-visible ~ .vs-switch__track { box-shadow: var(--shadow-focus); }
.vs-switch__label { font-size: var(--text-sm); color: var(--text-body); }
.vs-switch--sm .vs-switch__track { width: 32px; height: 19px; }
.vs-switch--sm .vs-switch__thumb { width: 13px; height: 13px; }
.vs-switch--sm input:checked ~ .vs-switch__track .vs-switch__thumb { transform: translateX(13px); }

.vs-radio { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.vs-radio input { position: absolute; opacity: 0; pointer-events: none; }
.vs-radio__circle {
  width: 19px; height: 19px; margin-top: 1px; flex: 0 0 auto;
  border-radius: var(--radius-pill); border: 1.5px solid var(--border-input);
  background: var(--surface-0);
  display: inline-flex; align-items: center; justify-content: center; transition: all .12s ease;
}
.vs-radio__dot { width: 9px; height: 9px; border-radius: var(--radius-pill); background: transparent; transition: all .12s ease; }
.vs-radio input:checked + .vs-radio__circle { border-color: var(--primary); border-width: 2px; }
.vs-radio input:checked + .vs-radio__circle .vs-radio__dot { background: var(--primary); }
.vs-radio input:focus-visible + .vs-radio__circle { box-shadow: var(--shadow-focus); }

/* ===== Alert ===== */
.vs-alert {
  display: flex; gap: var(--space-4); align-items: flex-start;
  border: 1px solid; border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
}
.vs-alert__icon { display: inline-flex; flex: 0 0 auto; margin-top: 1px; }
.vs-alert__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.vs-alert__title { font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.vs-alert__msg { font-size: var(--text-xs); line-height: 1.5; }
.vs-alert__close { border: 0; background: transparent; color: inherit; cursor: pointer; display: inline-flex; padding: 2px; border-radius: var(--radius-xs); }
.vs-alert--info     { background: var(--tag-info-bg);     border-color: var(--tag-info-border);     color: var(--tag-info-text); }
.vs-alert--success  { background: var(--tag-success-bg);  border-color: var(--tag-success-border);  color: var(--tag-success-text); }
.vs-alert--warning  { background: var(--tag-warning-bg);  border-color: var(--tag-warning-border);  color: var(--tag-warning-text); }
.vs-alert--danger   { background: var(--tag-danger-bg);   border-color: var(--tag-danger-border);   color: var(--tag-danger-text); }
.vs-alert--neutral  { background: var(--tag-neutral-bg);  border-color: var(--tag-neutral-border);  color: var(--tag-neutral-text); }
.vs-alert--identity { background: var(--tag-identity-bg); border-color: var(--tag-identity-border); color: var(--tag-identity-text); }

/* ===== Toast ===== */
.vs-toaststack {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 90;
  display: flex; flex-direction: column; gap: var(--space-3); max-width: 360px; width: calc(100% - 2 * var(--space-6));
}
.vs-toast {
  display: flex; gap: var(--space-4); align-items: flex-start;
  background: var(--surface-0); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
  padding: var(--space-4) var(--space-5); overflow: hidden; position: relative;
}
.vs-toast__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.vs-toast--success .vs-toast__bar { background: var(--tag-success-text); }
.vs-toast--danger .vs-toast__bar { background: var(--accent-red); }
.vs-toast--warning .vs-toast__bar { background: var(--tag-warning-text); }
.vs-toast--info .vs-toast__bar { background: var(--tag-info-text); }
.vs-toast--neutral .vs-toast__bar { background: var(--ink-300); }
.vs-toast--identity .vs-toast__bar { background: var(--brand); }
.vs-toast__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; padding-left: var(--space-2); }
.vs-toast__title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.vs-toast__msg { font-size: var(--text-xs); color: var(--text-muted); }
.vs-toast__action { border: 0; background: transparent; padding: 0; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-strong); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; align-self: flex-start; }
.vs-toast__close { border: 0; background: transparent; color: var(--text-subtle); cursor: pointer; display: inline-flex; padding: 2px; border-radius: var(--radius-xs); }
.vs-toast__close:hover { color: var(--text-strong); }

/* ===== Tooltip ===== */
.vs-tip { position: relative; display: inline-flex; }
.vs-tip__pop {
  position: absolute; z-index: 60; pointer-events: none;
  background: var(--ink-900); color: var(--text-on-dark);
  font-size: var(--text-2xs); line-height: 1.4; white-space: nowrap;
  padding: 5px 9px; border-radius: var(--radius-xs); box-shadow: var(--shadow-pop);
  opacity: 0; transition: opacity .12s ease;
}
.vs-tip:hover .vs-tip__pop, .vs-tip:focus-within .vs-tip__pop { opacity: 1; }
.vs-tip--top .vs-tip__pop { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.vs-tip--bottom .vs-tip__pop { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.vs-tip--left .vs-tip__pop { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.vs-tip--right .vs-tip__pop { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }

/* ===== Dialog ===== */
.vs-dialog__overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(5,5,5,.44);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
}
.vs-dialog {
  background: var(--surface-0); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  width: 100%; max-width: 520px; max-height: calc(100vh - 2 * var(--space-8));
  display: flex; flex-direction: column; overflow: hidden;
}
.vs-dialog--sm { max-width: 420px; }
.vs-dialog--lg { max-width: 720px; }
.vs-dialog__head { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-7) var(--space-7) 0; }
.vs-dialog__titles { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.vs-dialog__title { font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--fw-bold); color: var(--text-strong); }
.vs-dialog__desc { font-size: var(--text-xs); color: var(--text-muted); }
.vs-dialog__body { padding: var(--space-6) var(--space-7); overflow-y: auto; font-size: var(--text-sm); color: var(--text-body); line-height: 1.55; }
.vs-dialog__foot {
  display: flex; justify-content: flex-end; gap: var(--space-3);
  padding: var(--space-5) var(--space-7);
  border-top: 1px solid var(--border-faint); background: var(--surface-1);
}
.vs-dialog__close { margin-left: auto; }
[hidden] { display: none !important; }

/* ===== Tabs ===== */
.vs-tabs { display: flex; gap: var(--space-1); }
.vs-tabs--underline { border-bottom: 1px solid var(--border-default); gap: var(--space-6); }
.vs-tabs--underline .vs-tab {
  display: inline-flex; align-items: center; gap: var(--space-3);
  height: var(--field-h); padding: 0 2px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted);
  cursor: pointer; text-decoration: none; transition: color .12s ease, border-color .12s ease;
}
.vs-tabs--underline .vs-tab:hover { color: var(--text-strong); }
.vs-tabs--underline .vs-tab.is-active { color: var(--text-strong); border-bottom-color: var(--vs-black); font-weight: var(--fw-semibold); }
.vs-tabs--segmented {
  background: var(--bg-inset); border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm); padding: 3px; gap: 2px; display: inline-flex;
}
.vs-tabs--segmented .vs-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  height: 32px; padding: 0 var(--space-5);
  border: 0; border-radius: var(--radius-xs); background: transparent;
  font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-muted);
  cursor: pointer; text-decoration: none; transition: all .15s ease;
}
.vs-tabs--segmented .vs-tab.is-active { background: var(--surface-0); color: var(--text-strong); box-shadow: var(--shadow-xs); font-weight: var(--fw-semibold); }
.vs-tab__badge { font-family: var(--font-mono); }

/* ===== Dropdown menu (pattern GUI/08/DROPDOWN-MENU) ===== */
.vs-dd { position: relative; display: inline-flex; }
.vs-dd__menu {
  position: absolute; top: calc(100% + 6px); z-index: 50; min-width: 200px;
  background: var(--surface-0); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-pop);
  padding: 6px; display: none; flex-direction: column;
}
.vs-dd.is-open > .vs-dd__menu { display: flex; }
.vs-dd__menu--right { right: 0; }
.vs-dd__menu--left { left: 0; }
.vs-dd__item {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: 38px; padding: 0 var(--space-4); border: 0; border-radius: 7px;
  background: transparent; cursor: pointer; text-align: left; text-decoration: none;
  font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-body);
}
.vs-dd__item:hover { background: var(--surface-1); }
.vs-dd__item--danger { color: var(--accent-red); }
.vs-dd__item--danger:hover { background: var(--tag-danger-bg); }
.vs-dd__sep { height: 1px; background: var(--border-faint); margin: 5px 4px; }
.vs-dd__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--text-subtle); padding: 7px 10px 5px; }

/* ===== Empty state (GUI/09/EMPTY-STATE) ===== */
.vs-empty {
  border: 1.5px dashed var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-7);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center;
}
.vs-empty__icon {
  width: 48px; height: 48px; border-radius: var(--radius-pill);
  background: var(--bg-inset); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
}
.vs-empty__title { font-family: var(--font-display); font-size: 16px; font-weight: var(--fw-bold); color: var(--text-strong); }
.vs-empty__msg { font-size: var(--text-xs); color: var(--text-muted); max-width: 320px; }

/* ===== Spinner / skeleton ===== */
.vs-spin {
  width: 20px; height: 20px; border-radius: var(--radius-pill);
  border: 2.5px solid var(--ink-100); border-top-color: var(--ink-900);
  animation: vs-spin .7s linear infinite; display: inline-block;
}
.vs-skel {
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--line-100) 25%, var(--ink-100) 37%, var(--line-100) 63%);
  background-size: 400% 100%;
  animation: vs-shimmer 1.4s ease infinite;
}
.vs-skel--block { border-radius: var(--radius-sm); }

/* ===== Progress ===== */
.vs-progress { height: 8px; border-radius: var(--radius-pill); background: var(--bg-inset); overflow: hidden; }
.vs-progress__fill { height: 100%; background: var(--ink-900); border-radius: var(--radius-pill); transition: width .3s ease; }
.vs-progress__fill--brand { background: var(--vs-yellow); border-right: 2px solid var(--vs-yellow-shadow); }

/* ===== Drawer (panel samping kanan) — CMS 17.04.01 D15 =====
   Anatomi mengikuti vs-dialog (head/body/foot + __close); overlay scrim,
   fokus-trap & Esc di JS (admin.js). Scroll-lock via body.has-drawer
   (pelajaran modal-overlay-fix: kunci body, bukan backdrop-filter). */
.vs-drawer__overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(5, 5, 5, .44);
  opacity: 0; pointer-events: none; transition: opacity .16s ease;
}
.vs-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 81;
  width: min(420px, 94vw);
  background: var(--surface-0); border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .16s ease-out;
}
.vs-drawer--lg { width: min(520px, 96vw); }
.vs-drawer.is-open { transform: translateX(0); }
.vs-drawer__overlay.is-open { opacity: 1; pointer-events: auto; }
body.has-drawer { overflow: hidden; }
.vs-drawer__head {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--border-faint);
}
.vs-drawer__titles { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.vs-drawer__title { font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--fw-bold); color: var(--text-strong); }
.vs-drawer__desc { font-size: var(--text-xs); color: var(--text-muted); }
.vs-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.vs-drawer__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-faint); background: var(--surface-0);
}
@media (prefers-reduced-motion: reduce) {
  .vs-drawer, .vs-drawer__overlay { transition: none; }
}

/* ===== Verified seal (cms4) — standar universal ala Instagram: segel biru
   #0095F6 + centang putih, ikon-only (markup: partials/verified-badge.php).
   Biru sengaja hardcode: konvensi lintas-platform, bukan warna brand. ===== */
.vs-verified { display: inline-flex; align-items: center; flex: 0 0 auto; vertical-align: middle; }


/* ===== Chip pilihan (multi-select) — kontrak BERSAMA publik + admin (cms6).
   Dipindah dari public.css: pola ini dipakai form registrasi publik DAN drawer
   Sunting Paket di admin, sedangkan layouts/admin.php tidak memuat public.css.
   Dibangun di atas primitive DS Checkbox/Radio (.vs-check/.vs-radio) — bukan
   komponen baru. Design System tidak punya komponen bernama "Chip"; nama
   kanoniknya Tag (GUI/07/TAG-VARIANTS) untuk penanda non-interaktif, sedangkan
   ini kontrol pilihan. ===== */
.reg-chips, .reg-cards { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.reg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.reg-chip, .reg-card {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: var(--field-h); padding: 0 var(--space-5); cursor: pointer;
  border: 1px solid var(--border-input); border-radius: var(--radius-pill);
  background: var(--surface-0); font-size: var(--text-sm); color: var(--text-body);
  transition: border-color .12s ease, background .12s ease;
}
.reg-card { border-radius: var(--radius-sm); padding: var(--space-5); min-height: calc(var(--field-h) + var(--space-4)); }
.reg-chip input, .reg-card input { position: absolute; opacity: 0; pointer-events: none; }
.reg-chip:hover, .reg-card:hover { border-color: var(--ink-300); }
.reg-chip:has(input:checked), .reg-card:has(input:checked) { border-color: var(--border-strong); background: var(--surface-1); color: var(--text-strong); font-weight: var(--fw-semibold); }
.reg-chip:has(input:focus-visible), .reg-card:has(input:focus-visible) { box-shadow: var(--shadow-focus); border-color: var(--border-strong); }
.reg-chip.vs-check, .reg-card.vs-radio { position: relative; }
.reg-chip .vs-check__box, .reg-card .vs-radio__circle { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .reg-chip, .reg-card { transition: none; } }