/* DIHASILKAN oleh tools/sync-ds.py dari kontrak .jsx 16 primitive di 12.04.00. Jangan disunting tangan. */

/* ---- buttons/Button ---- */
.vs-btn {
  --_h: 44px; --_px: 18px; --_fs: 15px; --_radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: var(--_h); padding: 0 var(--_px); border-radius: var(--_radius);
  font-family: var(--font-body); font-size: var(--_fs); font-weight: 600;
  letter-spacing: -0.005em; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; user-select: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .04s ease;
}
.vs-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.vs-btn:active { transform: translateY(0.5px); }
.vs-btn[disabled] { cursor: not-allowed; opacity: .42; }
.vs-btn--block { width: 100%; }
.vs-btn--sm { --_h: 36px; --_px: 14px; --_fs: 14px; --_radius: var(--radius-xs); }
.vs-btn--lg { --_h: 52px; --_px: 24px; --_fs: 16px; }

.vs-btn--primary { background: var(--primary); color: var(--primary-contrast); }
.vs-btn--primary:hover:not([disabled]) { background: var(--primary-hover); }
.vs-btn--primary:active:not([disabled]) { background: var(--primary-active); }

.vs-btn--brand { background: var(--brand); color: var(--brand-ink); }
.vs-btn--brand:hover:not([disabled]) { background: #F0E900; }
.vs-btn--brand:active:not([disabled]) { 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:not([disabled]) { background: var(--surface-1); border-color: var(--ink-300); }
.vs-btn--secondary:active:not([disabled]) { background: var(--ink-050); }

.vs-btn--ghost { background: transparent; color: var(--text-strong); }
.vs-btn--ghost:hover:not([disabled]) { background: var(--surface-1); }
.vs-btn--ghost:active:not([disabled]) { background: var(--ink-050); }

.vs-btn--danger { background: var(--accent-red); color: #fff; }
.vs-btn--danger:hover:not([disabled]) { background: #E11D48; }

.vs-btn__icon { display: inline-flex; flex: 0 0 auto; }
.vs-btn__icon svg { display: block; width: 1.05em; height: 1.05em; }
.vs-btn__spin { width: 1em; height: 1em; border-radius: 100px; border: 2px solid currentColor; border-right-color: transparent; animation: vs-btn-spin .6s linear infinite; opacity: .9; }
@keyframes vs-btn-spin { to { transform: rotate(360deg); } }

/* ---- buttons/IconButton ---- */
.vs-iconbtn {
  --_s: 44px; --_radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--_s); height: var(--_s); border-radius: var(--_radius);
  border: 1px solid transparent; cursor: pointer; padding: 0;
  color: var(--text-strong); background: transparent;
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .04s ease;
}
.vs-iconbtn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.vs-iconbtn:active { transform: translateY(0.5px); }
.vs-iconbtn[disabled] { cursor: not-allowed; opacity: .42; }
.vs-iconbtn svg { display: block; width: 20px; height: 20px; }
.vs-iconbtn--sm { --_s: 36px; --_radius: var(--radius-xs); }
.vs-iconbtn--sm svg { width: 18px; height: 18px; }
.vs-iconbtn--lg { --_s: 52px; }

.vs-iconbtn--ghost:hover:not([disabled]) { background: var(--surface-1); }
.vs-iconbtn--ghost:active:not([disabled]) { background: var(--ink-050); }
.vs-iconbtn--outline { border-color: var(--border-input); background: var(--surface-0); }
.vs-iconbtn--outline:hover:not([disabled]) { background: var(--surface-1); border-color: var(--ink-300); }
.vs-iconbtn--solid { background: var(--primary); color: var(--primary-contrast); }
.vs-iconbtn--solid:hover:not([disabled]) { background: var(--primary-hover); }
.vs-iconbtn--brand { background: var(--brand); color: var(--brand-ink); }
.vs-iconbtn--brand:hover:not([disabled]) { background: #F0E900; }
.vs-iconbtn--brand:focus-visible { box-shadow: var(--shadow-focus-brand); }

/* ---- data-display/Avatar ---- */
.vs-avatar {
  --_s: 40px;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--_s); height: var(--_s); border-radius: 100px; flex: 0 0 auto;
  background: var(--ink-100); color: var(--text-strong); overflow: hidden;
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0; user-select: none;
}
.vs-avatar--xs { --_s: 24px; font-size: 10px; }
.vs-avatar--sm { --_s: 32px; font-size: 12px; }
.vs-avatar--md { --_s: 40px; font-size: 14px; }
.vs-avatar--lg { --_s: 52px; font-size: 18px; }
.vs-avatar--xl { --_s: 72px; font-size: 24px; }
.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 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-avatar__status {
  position: absolute; right: -1px; bottom: -1px; width: 28%; height: 28%;
  min-width: 8px; min-height: 8px; border-radius: 100px; border: 2px solid var(--surface-0); box-sizing: border-box;
}

/* ---- data-display/Badge ---- */
.vs-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; box-sizing: border-box;
}
.vs-badge--sm { min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
.vs-badge--dot { min-width: 0; width: 8px; height: 8px; padding: 0; }
.vs-badge--ink { 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: #fff; }
.vs-badge--neutral { background: var(--ink-100); color: var(--text-muted); }

/* ---- data-display/Tag ---- */
.vs-tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 11px; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1;
  border: 1px solid; white-space: nowrap; vertical-align: middle;
}
.vs-tag--sm { height: 22px; padding: 0 9px; font-size: 12px; }
.vs-tag--square { border-radius: var(--radius-xs); }
.vs-tag__dot { width: 6px; height: 6px; border-radius: 100px; background: currentColor; flex: 0 0 auto; }
.vs-tag__icon { display: inline-flex; }
.vs-tag__icon svg { display: block; width: 13px; height: 13px; }
.vs-tag__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-right: -3px; border: 0; padding: 0;
  background: transparent; color: currentColor; cursor: pointer; border-radius: 100px; opacity: .65;
}
.vs-tag__x:hover { opacity: 1; }
.vs-tag__x svg { width: 12px; height: 12px; }
.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);}

/* ---- feedback/Alert ---- */
.vs-alert {
  display: flex; gap: 12px; padding: 14px 16px; border: 1px solid; border-radius: var(--radius-sm);
  font-family: var(--font-body); align-items: flex-start;
}
.vs-alert__icon { flex: 0 0 auto; margin-top: 1px; display: inline-flex; }
.vs-alert__icon svg, .vs-alert__icon i { width: 18px; height: 18px; display: block; }
.vs-alert__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vs-alert__title { font-size: 14px; font-weight: 700; line-height: 1.35; }
.vs-alert__msg { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.vs-alert__close { flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; color: currentColor; opacity: .55; padding: 2px; margin: -2px -4px 0 0; border-radius: 6px; }
.vs-alert__close:hover { opacity: 1; }
.vs-alert__close svg { width: 16px; height: 16px; display: block; }

/* ---- feedback/Dialog ---- */
.vs-dialog__overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(5,5,5,.42); backdrop-filter: blur(3px);
  animation: vs-dialog-fade .16s ease;
}
.vs-dialog {
  position: relative; width: 100%; max-width: 480px; background: var(--surface-0);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); font-family: var(--font-body);
  display: flex; flex-direction: column; max-height: calc(100vh - 48px); overflow: hidden;
  animation: vs-dialog-rise .18s cubic-bezier(.2,.7,.3,1);
}
.vs-dialog--sm { max-width: 380px; }
.vs-dialog--lg { max-width: 640px; }
.vs-dialog__head { display: flex; align-items: flex-start; gap: 16px; padding: 22px 22px 0; }
.vs-dialog__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vs-dialog__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--text-strong); }
.vs-dialog__desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.vs-dialog__close { flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; color: var(--text-subtle); padding: 6px; margin: -6px -6px 0 0; border-radius: var(--radius-xs); }
.vs-dialog__close:hover { background: var(--surface-1); color: var(--text-strong); }
.vs-dialog__close svg { width: 18px; height: 18px; display: block; }
.vs-dialog__body { padding: 16px 22px; overflow: auto; font-size: 14px; color: var(--text-body); line-height: 1.55; }
.vs-dialog__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px 22px; }
@keyframes vs-dialog-fade { from { opacity: 0; } }
@keyframes vs-dialog-rise { from { opacity: 0; transform: translateY(8px) scale(.99); } }
@media (prefers-reduced-motion: reduce) { .vs-dialog, .vs-dialog__overlay { animation: none; } }

/* ---- feedback/Toast ---- */
.vs-toast {
  display: flex; gap: 12px; align-items: flex-start; width: 360px; max-width: 92vw;
  padding: 14px 14px 14px 0; background: var(--surface-0);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop); font-family: var(--font-body); position: relative; overflow: hidden;
}
.vs-toast__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.vs-toast__icon { flex: 0 0 auto; margin-left: 16px; margin-top: 1px; display: inline-flex; width: 20px; height: 20px; }
.vs-toast__icon svg, .vs-toast__icon i { width: 19px; height: 19px; display: block; }
.vs-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vs-toast__title { font-size: 14px; font-weight: 700; color: var(--text-strong); line-height: 1.35; }
.vs-toast__msg { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.vs-toast__action { align-self: flex-start; margin-top: 6px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--text-strong); text-decoration: underline; text-underline-offset: 2px; }
.vs-toast__close { flex: 0 0 auto; margin-right: 12px; border: 0; background: transparent; cursor: pointer; color: var(--text-subtle); padding: 2px; border-radius: 6px; }
.vs-toast__close:hover { color: var(--text-strong); background: var(--surface-1); }
.vs-toast__close svg { width: 16px; height: 16px; display: block; }

/* ---- feedback/Tooltip ---- */
.vs-tip { position: relative; display: inline-flex; }
.vs-tip__pop {
  position: absolute; z-index: 60; pointer-events: none; opacity: 0; transform: translateY(2px);
  background: var(--ink-900); color: #fff; font-family: var(--font-body); font-size: 12.5px;
  font-weight: 500; line-height: 1.35; padding: 7px 10px; border-radius: var(--radius-xs);
  white-space: nowrap; max-width: 240px; box-shadow: var(--shadow-pop);
  transition: opacity .14s ease, transform .14s ease;
}
.vs-tip:hover .vs-tip__pop, .vs-tip:focus-within .vs-tip__pop { opacity: 1; transform: translateY(0); }
.vs-tip__pop::after { content: ""; position: absolute; width: 7px; height: 7px; background: var(--ink-900); transform: rotate(45deg); }
.vs-tip--top .vs-tip__pop { bottom: calc(100% + 8px); left: 50%; translate: -50% 0; }
.vs-tip--top .vs-tip__pop::after { bottom: -3px; left: 50%; margin-left: -3.5px; }
.vs-tip--bottom .vs-tip__pop { top: calc(100% + 8px); left: 50%; translate: -50% 0; }
.vs-tip--bottom .vs-tip__pop::after { top: -3px; left: 50%; margin-left: -3.5px; }
.vs-tip--left .vs-tip__pop { right: calc(100% + 8px); top: 50%; translate: 0 -50%; }
.vs-tip--left .vs-tip__pop::after { right: -3px; top: 50%; margin-top: -3.5px; }
.vs-tip--right .vs-tip__pop { left: calc(100% + 8px); top: 50%; translate: 0 -50%; }
.vs-tip--right .vs-tip__pop::after { left: -3px; top: 50%; margin-top: -3.5px; }

/* ---- forms/Checkbox ---- */
.vs-check { display: inline-flex; align-items: flex-start; gap: 10px; font-family: var(--font-body); cursor: pointer; user-select: none; }
.vs-check--disabled { cursor: not-allowed; opacity: .5; }
.vs-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.vs-check__box {
  position: relative; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--border-input); border-radius: 6px; background: var(--surface-0);
  transition: background .15s ease, border-color .15s ease;
}
.vs-check__box svg { position: absolute; inset: 0; margin: auto; width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .12s ease, transform .12s ease; }
.vs-check input:checked + .vs-check__box { background: var(--primary); border-color: var(--primary); }
.vs-check input:checked + .vs-check__box svg { opacity: 1; transform: scale(1); }
.vs-check input:indeterminate + .vs-check__box { background: var(--primary); border-color: var(--primary); }
.vs-check input:focus-visible + .vs-check__box { box-shadow: var(--shadow-focus); }
.vs-check__body { display: flex; flex-direction: column; gap: 2px; }
.vs-check__label { font-size: 14px; font-weight: 500; color: var(--text-strong); line-height: 1.35; }
.vs-check__desc { font-size: 12.5px; color: var(--text-subtle); line-height: 1.4; }

/* ---- forms/Input ---- */
.vs-field { display: flex; flex-direction: column; gap: 7px; font-family: var(--font-body); }
.vs-field__label { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.vs-field__label .vs-field__opt { color: var(--text-subtle); font-weight: 400; }
.vs-field__req { color: var(--accent-red); margin-left: 2px; }
.vs-input {
  --_h: 44px;
  display: flex; align-items: center; gap: 9px; width: 100%; height: var(--_h);
  padding: 0 14px; box-sizing: border-box;
  background: var(--surface-0); border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.vs-input--sm { --_h: 36px; border-radius: var(--radius-xs); }
.vs-input--lg { --_h: 52px; }
.vs-input:focus-within { border-color: var(--ink-900); box-shadow: var(--shadow-focus); }
.vs-input input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-family: var(--font-body); font-size: 15px; color: var(--text-strong); padding: 0;
}
.vs-input input::placeholder { color: var(--text-disabled); }
.vs-input__affix { display: inline-flex; align-items: center; color: var(--text-subtle); font-size: 14px; flex: 0 0 auto; }
.vs-input__affix svg { width: 18px; height: 18px; display: block; }
.vs-input--error { border-color: var(--accent-red); }
.vs-input--error:focus-within { box-shadow: 0 0 0 3px rgba(245,54,94,.18); }
.vs-input--disabled { background: var(--ink-050); cursor: not-allowed; }
.vs-input--disabled input { cursor: not-allowed; color: var(--text-disabled); }
.vs-field__hint { font-size: 12.5px; color: var(--text-subtle); }
.vs-field__hint--error { color: var(--accent-red); }

/* ---- forms/Select ---- */
.vs-selfield { display: flex; flex-direction: column; gap: 7px; font-family: var(--font-body); }
.vs-selfield__label { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.vs-sel {
  --_h: 44px; position: relative; width: 100%;
}
.vs-sel select {
  appearance: none; -webkit-appearance: none; width: 100%; height: var(--_h);
  padding: 0 40px 0 14px; box-sizing: border-box;
  background: var(--surface-0); border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 15px; color: var(--text-strong); cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vs-sel select:focus { outline: none; border-color: var(--ink-900); box-shadow: var(--shadow-focus); }
.vs-sel select:disabled { background: var(--ink-050); color: var(--text-disabled); cursor: not-allowed; }
.vs-sel--sm select { --_h: 36px; height: 36px; border-radius: var(--radius-xs); }
.vs-sel--placeholder select { color: var(--text-disabled); }
.vs-sel__chev { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-subtle); }
.vs-sel__chev svg { display: block; width: 18px; height: 18px; }
.vs-sel--error select { border-color: var(--accent-red); }
.vs-selfield__hint { font-size: 12.5px; color: var(--text-subtle); }
.vs-selfield__hint--error { color: var(--accent-red); }

/* ---- forms/Switch ---- */
.vs-switch { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-body); cursor: pointer; user-select: none; }
.vs-switch--disabled { cursor: not-allowed; opacity: .5; }
.vs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.vs-switch__track {
  position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 100px;
  background: var(--ink-200); transition: background .18s ease;
}
.vs-switch__thumb {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 100px;
  background: #fff; box-shadow: 0 1px 3px rgba(5,5,5,.25); transition: transform .18s cubic-bezier(.4,.1,.2,1);
}
.vs-switch input:checked + .vs-switch__track { background: var(--primary); }
.vs-switch input:checked + .vs-switch__track .vs-switch__thumb { transform: translateX(18px); }
.vs-switch--brand input:checked + .vs-switch__track { background: var(--brand); }
.vs-switch--brand input:checked + .vs-switch__track .vs-switch__thumb { box-shadow: 0 1px 3px rgba(5,5,5,.35); }
.vs-switch input:focus-visible + .vs-switch__track { box-shadow: var(--shadow-focus); }
.vs-switch--sm .vs-switch__track { width: 34px; height: 20px; }
.vs-switch--sm .vs-switch__thumb { width: 16px; height: 16px; }
.vs-switch--sm input:checked + .vs-switch__track .vs-switch__thumb { transform: translateX(14px); }
.vs-switch__label { font-size: 14px; font-weight: 500; color: var(--text-strong); }

/* ---- navigation/Tabs ---- */
.vs-tabs { font-family: var(--font-body); }
/* underline */
.vs-tabs--underline { display: flex; gap: 4px; border-bottom: 1px solid var(--border-default); }
.vs-tabs--underline .vs-tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 14px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--text-subtle);
  margin-bottom: -1px; border-bottom: 2px solid transparent; transition: color .14s ease, border-color .14s ease;
}
.vs-tabs--underline .vs-tab:hover { color: var(--text-strong); }
.vs-tabs--underline .vs-tab[aria-selected="true"] { color: var(--text-strong); border-bottom-color: var(--vs-black); }
/* segmented */
.vs-tabs--segmented { display: inline-flex; gap: 3px; padding: 3px; background: var(--ink-050); border: 1px solid var(--line-200); border-radius: var(--radius-sm); }
.vs-tabs--segmented .vs-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 0; cursor: pointer;
  background: transparent; border-radius: var(--radius-xs); font-family: var(--font-body);
  font-size: 13.5px; font-weight: 600; color: var(--text-muted); transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.vs-tabs--segmented .vs-tab:hover { color: var(--text-strong); }
.vs-tabs--segmented .vs-tab[aria-selected="true"] { background: var(--surface-0); color: var(--text-strong); box-shadow: var(--shadow-xs); }
.vs-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }
.vs-tab__icon { display: inline-flex; }
.vs-tab__icon svg, .vs-tab__icon i { width: 16px; height: 16px; display: block; }
.vs-tab__badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 100px; background: var(--ink-100); color: var(--text-muted);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
}
.vs-tab[aria-selected="true"] .vs-tab__badge { background: var(--vs-black); color: #fff; }

/* ---- surfaces/Card ---- */
.vs-card {
  position: relative; background: var(--surface-0);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  color: var(--text-body); box-sizing: border-box;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.vs-card--flat { box-shadow: none; }
.vs-card--card { box-shadow: var(--shadow-card); }
.vs-card--pop { box-shadow: var(--shadow-pop); }
.vs-card--p0 { padding: 0; }
.vs-card--p-sm { padding: var(--space-5); }
.vs-card--p-md { padding: var(--space-7); }
.vs-card--p-lg { padding: var(--space-9); }
.vs-card--interactive { cursor: pointer; }
.vs-card--interactive:hover { box-shadow: var(--shadow-pop); transform: translateY(-2px); border-color: var(--ink-200); }
.vs-card--accent { border-top: 3px solid var(--brand); }
.vs-card--ink { background: var(--bg-ink); color: var(--text-on-dark); border-color: transparent; }
.vs-card--ink .vs-card__title { color: #fff; }
.vs-card__title { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--text-strong); margin: 0; }

/* ---- surfaces/StatCard ---- */
.vs-stat { display: flex; flex-direction: column; gap: 10px; }
.vs-stat__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vs-stat__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--text-subtle); }
.vs-stat__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-xs); background: var(--ink-050); color: var(--text-strong); flex: 0 0 auto; }
.vs-stat__icon svg { width: 18px; height: 18px; }
.vs-stat__value { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -0.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.vs-stat__foot { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.vs-stat__delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vs-stat__delta svg { width: 14px; height: 14px; }
.vs-stat__delta--up { color: var(--accent-mint); }
.vs-stat__delta--down { color: var(--accent-red); }