/* Finance v2 — stylesheet produksi (sumber tunggal), diport sekali dari _prototypes/finance-v2 pada 24 Sep 2026.
   Semua aturan terlingkup .fin2 (akar modul #/finance dan .fin2-layer-root di #adminOverlay); token ink = skala app.css.
   Perubahan berikutnya disunting langsung di sini, bukan lewat skrip. */
/* == FIN2-PRIMITIVES == */
/* DIHASILKAN oleh tools/sync-ds.py dari kontrak .jsx 16 primitive di 12.04.00. Jangan disunting tangan. */

/* ---- buttons/Button ---- */
.fin2 .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;
}
.fin2 .vs-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.fin2 .vs-btn:active { transform: translateY(0.5px); }
.fin2 .vs-btn[disabled] { cursor: not-allowed; opacity: .42; }
.fin2 .vs-btn--block { width: 100%; }
.fin2 .vs-btn--sm { --_h: 36px; --_px: 14px; --_fs: 14px; --_radius: var(--radius-xs); }
.fin2 .vs-btn--lg { --_h: 52px; --_px: 24px; --_fs: 16px; }

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

.fin2 .vs-btn--brand { background: var(--brand); color: var(--brand-ink); }
.fin2 .vs-btn--brand:hover:not([disabled]) { background: #F0E900; }
.fin2 .vs-btn--brand:active:not([disabled]) { background: var(--brand-line); }
.fin2 .vs-btn--brand:focus-visible { box-shadow: var(--shadow-focus-brand); }

.fin2 .vs-btn--secondary { background: var(--surface-0); color: var(--text-strong); border-color: var(--border-input); }
.fin2 .vs-btn--secondary:hover:not([disabled]) { background: var(--surface-1); border-color: var(--ink-400); }
.fin2 .vs-btn--secondary:active:not([disabled]) { background: var(--ink-050); }

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

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

.fin2 .vs-btn__icon { display: inline-flex; flex: 0 0 auto; }
.fin2 .vs-btn__icon svg { display: block; width: 1.05em; height: 1.05em; }
.fin2 .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 ---- */
.fin2 .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;
}
.fin2 .vs-iconbtn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.fin2 .vs-iconbtn:active { transform: translateY(0.5px); }
.fin2 .vs-iconbtn[disabled] { cursor: not-allowed; opacity: .42; }
.fin2 .vs-iconbtn svg { display: block; width: 20px; height: 20px; }
.fin2 .vs-iconbtn--sm { --_s: 36px; --_radius: var(--radius-xs); }
.fin2 .vs-iconbtn--sm svg { width: 18px; height: 18px; }
.fin2 .vs-iconbtn--lg { --_s: 52px; }

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

/* ---- data-display/Avatar ---- */
.fin2 .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;
}
.fin2 .vs-avatar--xs { --_s: 24px; font-size: 10px; }
.fin2 .vs-avatar--sm { --_s: 32px; font-size: 12px; }
.fin2 .vs-avatar--md { --_s: 40px; font-size: 14px; }
.fin2 .vs-avatar--lg { --_s: 52px; font-size: 18px; }
.fin2 .vs-avatar--xl { --_s: 72px; font-size: 24px; }
.fin2 .vs-avatar--rounded { border-radius: var(--radius-sm); }
.fin2 .vs-avatar--square { border-radius: var(--radius-xs); }
.fin2 .vs-avatar--ink { background: var(--primary); color: var(--primary-contrast); }
.fin2 .vs-avatar--brand { background: var(--brand); color: var(--brand-ink); }
.fin2 .vs-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fin2 .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 ---- */
.fin2 .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;
}
.fin2 .vs-badge--sm { min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
.fin2 .vs-badge--dot { min-width: 0; width: 8px; height: 8px; padding: 0; }
.fin2 .vs-badge--ink { background: var(--primary); color: var(--primary-contrast); }
.fin2 .vs-badge--brand { background: var(--brand); color: var(--brand-ink); }
.fin2 .vs-badge--danger { background: var(--accent-red); color: #fff; }
.fin2 .vs-badge--neutral { background: var(--ink-100); color: var(--text-muted); }

/* ---- data-display/Tag ---- */
.fin2 .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;
}
.fin2 .vs-tag--sm { height: 22px; padding: 0 9px; font-size: 12px; }
.fin2 .vs-tag--square { border-radius: var(--radius-xs); }
.fin2 .vs-tag__dot { width: 6px; height: 6px; border-radius: 100px; background: currentColor; flex: 0 0 auto; }
.fin2 .vs-tag__icon { display: inline-flex; }
.fin2 .vs-tag__icon svg { display: block; width: 13px; height: 13px; }
.fin2 .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;
}
.fin2 .vs-tag__x:hover { opacity: 1; }
.fin2 .vs-tag__x svg { width: 12px; height: 12px; }
.fin2 .vs-tag--success {background:var(--tag-success-bg);border-color:var(--tag-success-border);color:var(--tag-success-text);}
.fin2 .vs-tag--mint {background:var(--tag-mint-bg);border-color:var(--tag-mint-border);color:var(--tag-mint-text);}
.fin2 .vs-tag--info {background:var(--tag-info-bg);border-color:var(--tag-info-border);color:var(--tag-info-text);}
.fin2 .vs-tag--blue {background:var(--tag-blue-bg);border-color:var(--tag-blue-border);color:var(--tag-blue-text);}
.fin2 .vs-tag--purple {background:var(--tag-purple-bg);border-color:var(--tag-purple-border);color:var(--tag-purple-text);}
.fin2 .vs-tag--pink {background:var(--tag-pink-bg);border-color:var(--tag-pink-border);color:var(--tag-pink-text);}
.fin2 .vs-tag--warning {background:var(--tag-warning-bg);border-color:var(--tag-warning-border);color:var(--tag-warning-text);}
.fin2 .vs-tag--orange {background:var(--tag-orange-bg);border-color:var(--tag-orange-border);color:var(--tag-orange-text);}
.fin2 .vs-tag--danger {background:var(--tag-danger-bg);border-color:var(--tag-danger-border);color:var(--tag-danger-text);}
.fin2 .vs-tag--neutral {background:var(--tag-neutral-bg);border-color:var(--tag-neutral-border);color:var(--tag-neutral-text);}
.fin2 .vs-tag--identity {background:var(--tag-identity-bg);border-color:var(--tag-identity-border);color:var(--tag-identity-text);}

/* ---- feedback/Alert ---- */
.fin2 .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;
}
.fin2 .vs-alert__icon { flex: 0 0 auto; margin-top: 1px; display: inline-flex; }
.fin2 .vs-alert__icon svg, .fin2 .vs-alert__icon i { width: 18px; height: 18px; display: block; }
.fin2 .vs-alert__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fin2 .vs-alert__title { font-size: 14px; font-weight: 700; line-height: 1.35; }
.fin2 .vs-alert__msg { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.fin2 .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; }
.fin2 .vs-alert__close:hover { opacity: 1; }
.fin2 .vs-alert__close svg { width: 16px; height: 16px; display: block; }

/* ---- feedback/Dialog ---- */
.fin2 .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;
}
.fin2 .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);
}
.fin2 .vs-dialog--sm { max-width: 380px; }
.fin2 .vs-dialog--lg { max-width: 640px; }
.fin2 .vs-dialog__head { display: flex; align-items: flex-start; gap: 16px; padding: 22px 22px 0; }
.fin2 .vs-dialog__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fin2 .vs-dialog__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--text-strong); }
.fin2 .vs-dialog__desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.fin2 .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); }
.fin2 .vs-dialog__close:hover { background: var(--surface-1); color: var(--text-strong); }
.fin2 .vs-dialog__close svg { width: 18px; height: 18px; display: block; }
.fin2 .vs-dialog__body { padding: 16px 22px; overflow: auto; font-size: 14px; color: var(--text-body); line-height: 1.55; }
.fin2 .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) { .fin2 .vs-dialog, .fin2 .vs-dialog__overlay { animation: none; } }

/* ---- feedback/Toast ---- */
.fin2 .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;
}
.fin2 .vs-toast__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.fin2 .vs-toast__icon { flex: 0 0 auto; margin-left: 16px; margin-top: 1px; display: inline-flex; width: 20px; height: 20px; }
.fin2 .vs-toast__icon svg, .fin2 .vs-toast__icon i { width: 19px; height: 19px; display: block; }
.fin2 .vs-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fin2 .vs-toast__title { font-size: 14px; font-weight: 700; color: var(--text-strong); line-height: 1.35; }
.fin2 .vs-toast__msg { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.fin2 .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; }
.fin2 .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; }
.fin2 .vs-toast__close:hover { color: var(--text-strong); background: var(--surface-1); }
.fin2 .vs-toast__close svg { width: 16px; height: 16px; display: block; }

/* ---- feedback/Tooltip ---- */
.fin2 .vs-tip { position: relative; display: inline-flex; }
.fin2 .vs-tip__pop {
  position: absolute; z-index: 60; pointer-events: none; opacity: 0; transform: translateY(2px);
  background: var(--ink-950); 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;
}
.fin2 .vs-tip:hover .vs-tip__pop, .fin2 .vs-tip:focus-within .vs-tip__pop { opacity: 1; transform: translateY(0); }
.fin2 .vs-tip__pop::after { content: ""; position: absolute; width: 7px; height: 7px; background: var(--ink-950); transform: rotate(45deg); }
.fin2 .vs-tip--top .vs-tip__pop { bottom: calc(100% + 8px); left: 50%; translate: -50% 0; }
.fin2 .vs-tip--top .vs-tip__pop::after { bottom: -3px; left: 50%; margin-left: -3.5px; }
.fin2 .vs-tip--bottom .vs-tip__pop { top: calc(100% + 8px); left: 50%; translate: -50% 0; }
.fin2 .vs-tip--bottom .vs-tip__pop::after { top: -3px; left: 50%; margin-left: -3.5px; }
.fin2 .vs-tip--left .vs-tip__pop { right: calc(100% + 8px); top: 50%; translate: 0 -50%; }
.fin2 .vs-tip--left .vs-tip__pop::after { right: -3px; top: 50%; margin-top: -3.5px; }
.fin2 .vs-tip--right .vs-tip__pop { left: calc(100% + 8px); top: 50%; translate: 0 -50%; }
.fin2 .vs-tip--right .vs-tip__pop::after { left: -3px; top: 50%; margin-top: -3.5px; }

/* ---- forms/Checkbox ---- */
.fin2 .vs-check { display: inline-flex; align-items: flex-start; gap: 10px; font-family: var(--font-body); cursor: pointer; user-select: none; }
.fin2 .vs-check--disabled { cursor: not-allowed; opacity: .5; }
.fin2 .vs-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.fin2 .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;
}
.fin2 .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; }
.fin2 .vs-check input:checked + .vs-check__box { background: var(--primary); border-color: var(--primary); }
.fin2 .vs-check input:checked + .vs-check__box svg { opacity: 1; transform: scale(1); }
.fin2 .vs-check input:indeterminate + .vs-check__box { background: var(--primary); border-color: var(--primary); }
.fin2 .vs-check input:focus-visible + .vs-check__box { box-shadow: var(--shadow-focus); }
.fin2 .vs-check__body { display: flex; flex-direction: column; gap: 2px; }
.fin2 .vs-check__label { font-size: 14px; font-weight: 500; color: var(--text-strong); line-height: 1.35; }
.fin2 .vs-check__desc { font-size: 12.5px; color: var(--text-subtle); line-height: 1.4; }

/* ---- forms/Input ---- */
.fin2 .vs-field { display: flex; flex-direction: column; gap: 7px; font-family: var(--font-body); }
.fin2 .vs-field__label { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.fin2 .vs-field__label .vs-field__opt { color: var(--text-subtle); font-weight: 400; }
.fin2 .vs-field__req { color: var(--accent-red); margin-left: 2px; }
.fin2 .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;
}
.fin2 .vs-input--sm { --_h: 36px; border-radius: var(--radius-xs); }
.fin2 .vs-input--lg { --_h: 52px; }
.fin2 .vs-input:focus-within { border-color: var(--ink-950); box-shadow: var(--shadow-focus); }
.fin2 .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;
}
.fin2 .vs-input input::placeholder { color: var(--text-disabled); }
.fin2 .vs-input__affix { display: inline-flex; align-items: center; color: var(--text-subtle); font-size: 14px; flex: 0 0 auto; }
.fin2 .vs-input__affix svg { width: 18px; height: 18px; display: block; }
.fin2 .vs-input--error { border-color: var(--accent-red); }
.fin2 .vs-input--error:focus-within { box-shadow: 0 0 0 3px rgba(245,54,94,.18); }
.fin2 .vs-input--disabled { background: var(--ink-050); cursor: not-allowed; }
.fin2 .vs-input--disabled input { cursor: not-allowed; color: var(--text-disabled); }
.fin2 .vs-field__hint { font-size: 12.5px; color: var(--text-subtle); }
.fin2 .vs-field__hint--error { color: var(--accent-red); }

/* ---- forms/Select ---- */
.fin2 .vs-selfield { display: flex; flex-direction: column; gap: 7px; font-family: var(--font-body); }
.fin2 .vs-selfield__label { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.fin2 .vs-sel {
  --_h: 44px; position: relative; width: 100%;
}
.fin2 .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;
}
.fin2 .vs-sel select:focus { outline: none; border-color: var(--ink-950); box-shadow: var(--shadow-focus); }
.fin2 .vs-sel select:disabled { background: var(--ink-050); color: var(--text-disabled); cursor: not-allowed; }
.fin2 .vs-sel--sm select { --_h: 36px; height: 36px; border-radius: var(--radius-xs); }
.fin2 .vs-sel--placeholder select { color: var(--text-disabled); }
.fin2 .vs-sel__chev { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-subtle); }
.fin2 .vs-sel__chev svg { display: block; width: 18px; height: 18px; }
.fin2 .vs-sel--error select { border-color: var(--accent-red); }
.fin2 .vs-selfield__hint { font-size: 12.5px; color: var(--text-subtle); }
.fin2 .vs-selfield__hint--error { color: var(--accent-red); }

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

/* ---- navigation/Tabs ---- */
.fin2 .vs-tabs { font-family: var(--font-body); }
/* underline */
.fin2 .vs-tabs--underline { display: flex; gap: 4px; border-bottom: 1px solid var(--border-default); }
.fin2 .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;
}
.fin2 .vs-tabs--underline .vs-tab:hover { color: var(--text-strong); }
.fin2 .vs-tabs--underline .vs-tab[aria-selected="true"] { color: var(--text-strong); border-bottom-color: var(--vs-black); }
/* segmented */
.fin2 .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); }
.fin2 .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;
}
.fin2 .vs-tabs--segmented .vs-tab:hover { color: var(--text-strong); }
.fin2 .vs-tabs--segmented .vs-tab[aria-selected="true"] { background: var(--surface-0); color: var(--text-strong); box-shadow: var(--shadow-xs); }
.fin2 .vs-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }
.fin2 .vs-tab__icon { display: inline-flex; }
.fin2 .vs-tab__icon svg, .fin2 .vs-tab__icon i { width: 16px; height: 16px; display: block; }
.fin2 .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;
}
.fin2 .vs-tab[aria-selected="true"] .vs-tab__badge { background: var(--vs-black); color: #fff; }

/* ---- surfaces/Card ---- */
.fin2 .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;
}
.fin2 .vs-card--flat { box-shadow: none; }
.fin2 .vs-card--card { box-shadow: var(--shadow-card); }
.fin2 .vs-card--pop { box-shadow: var(--shadow-pop); }
.fin2 .vs-card--p0 { padding: 0; }
.fin2 .vs-card--p-sm { padding: var(--space-5); }
.fin2 .vs-card--p-md { padding: var(--space-7); }
.fin2 .vs-card--p-lg { padding: var(--space-9); }
.fin2 .vs-card--interactive { cursor: pointer; }
.fin2 .vs-card--interactive:hover { box-shadow: var(--shadow-pop); transform: translateY(-2px); border-color: var(--ink-200); }
.fin2 .vs-card--accent { border-top: 3px solid var(--brand); }
.fin2 .vs-card--ink { background: var(--bg-ink); color: var(--text-on-dark); border-color: transparent; }
.fin2 .vs-card--ink .vs-card__title { color: #fff; }
.fin2 .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 ---- */
.fin2 .vs-stat { display: flex; flex-direction: column; gap: 10px; }
.fin2 .vs-stat__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fin2 .vs-stat__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-label-sm); text-transform: uppercase; color: var(--text-subtle); }
.fin2 .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; }
.fin2 .vs-stat__icon svg { width: 18px; height: 18px; }
.fin2 .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; }
.fin2 .vs-stat__foot { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.fin2 .vs-stat__delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fin2 .vs-stat__delta svg { width: 14px; height: 14px; }
.fin2 .vs-stat__delta--up { color: var(--accent-mint); }
.fin2 .vs-stat__delta--down { color: var(--accent-red); }

/* == FIN2-CORE == */
/* finance-v2 · fin2-core.css
   Token-only (SPEC §8.8): warna, spasi, radius, bayangan, tipografi hanya dari design-system/tokens.css.
   Ambang responsif hanya tabel SPEC §7.1. Primitive vs-* tidak disunting; override terlingkup .fin2 (§2.10).
   Urutan: token lokal · dasar · shell · kerangka · lingkup · toolbar · kartu/daftar/grid · pager/bulk ·
   atom & unit · grafik · overlay · state · form · kontrol prototype · etalase · responsif · gerak. */

/* ---------- token lokal §5.1, §7.2 ---------- */
.fin2 {
  --fin2-z-sticky: 10;
  --fin2-z-actionbar: 30;
  --fin2-z-mnav: 40;
  --fin2-z-pop: 1100;
  --fin2-z-scrim: 1200;
  --fin2-z-drawer: 1201;
  --fin2-z-screen: 1250;
  --fin2-z-sheet: 1280;
  --fin2-z-dialog: 1290;
  --fin2-z-proto: 1300;
  --fin2-z-confirm: 1500;
  --fin2-z-toast: 1600;
  --fin2-scrim: color-mix(in srgb, var(--ink-950) 42%, transparent);
  --fin2-ctl-h: var(--field-h-sm);
  --fin2-fade: var(--space-6);
  --fin2-ease: cubic-bezier(.2, .7, .3, 1);
  --fin2-0: calc(var(--space-1) * 0);   /* nol BERSATUAN untuk cadangan var() di dalam calc() (--space-0 = 0 tanpa satuan → calc tidak sah) */
}
:root[data-fin2-touch="true"] .fin2 { --fin2-ctl-h: var(--field-h); }
@media (pointer:coarse) { .fin2 { --fin2-ctl-h: var(--field-h); } }
@media (max-width:720px) { .fin2 { --fin2-mnav-h: calc(var(--field-h-lg) + var(--space-2) * 2 + env(safe-area-inset-bottom)); } }

/* ---------- dasar ---------- */

.fin2 { background: var(--bg-app); color: var(--text-body); font-family: var(--font-body); }
:where(.fin2) button, :where(.fin2) input, :where(.fin2) select, :where(.fin2) textarea { font: inherit; color: inherit; }
:where(.fin2) ol, :where(.fin2) ul { margin: 0; }
.fin2 .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; clip-path: inset(50%); }
.fin2-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* wadah gulir/klip menjadi containing block agar teks sr-only (absolute) ikut terpotong, bukan melebarkan halaman */
.fin2-card, .fin2-steps, .fin2-nav__tabs, .fin2-subnav__tabs, .fin2-grid__scroll, .fin2-ch__table, .fin2-detail__body, .fin2-sheet__body, .fin2-pop, .fin2-panel { position: relative; }
.fin2 h2[tabindex="-1"]:focus-visible, .fin2 h3[tabindex="-1"]:focus-visible { box-shadow: none; outline: none; }
.fin2-late { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--tag-danger-text); white-space: nowrap; }
.fin2-cell__b { display: block; font-weight: var(--fw-semibold); color: var(--text-strong); overflow-wrap: anywhere; }
/* C28: sub-baris tidak memotong token di tengah (break-word); nomor/kode mono satu potong */
.fin2-cell__s { display: block; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); overflow-wrap: break-word; }
.fin2-cell__s .fin2-mono, .fin2-cell__b .fin2-mono, .fin2-row__meta .fin2-mono { white-space: nowrap; }
.fin2-warn, .fin2-cell__s.fin2-warn { color: var(--tag-warning-text); }

/* ---------- shell §2.1–2.4 (konteks as-built, L9) ---------- */

   /* topbar satu baris (64/52 as-built) */

/* mini (320–349): label permanen "Data contoh prototype" (L7) utuh sebaris — ikon tag disembunyikan, celah dirapatkan */

.fin2-root { container: finroot / inline-size; min-width: 0; }
#fin2Body { container: finbody / inline-size; display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; padding-top: var(--space-5); font-size: var(--text-sm); }
.fin2-ov, .fin2-pop, .fin2-toasts { font-size: var(--text-sm); }
#fin2Body > * { min-width: 0; }
/* C10 (SPEC §2.1): blok badan layar bertumpuk berjarak --space-5 */
.fin2-screen { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.fin2-screen > * { min-width: 0; }

/* indikator gulir tepi (strip tab, sub-nav, mnav) §2.5 */
.fin2 [data-fade="x"][data-more-right="true"] { mask-image: linear-gradient(to right, var(--ink-950) calc(100% - var(--fin2-fade)), transparent); }
.fin2 [data-fade="x"][data-more-left="true"] { mask-image: linear-gradient(to left, var(--ink-950) calc(100% - var(--fin2-fade)), transparent); }
.fin2 [data-fade="x"][data-more-left="true"][data-more-right="true"] { mask-image: linear-gradient(to right, transparent, var(--ink-950) var(--fin2-fade), var(--ink-950) calc(100% - var(--fin2-fade)), transparent); }

/* ---------- nav tab primer + Lainnya §2.5 ---------- */
.fin2-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-3); box-shadow: inset 0 -1px 0 var(--border-default); }
.fin2-nav__tabs { min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-bottom: 0; }
.fin2-nav__tabs::-webkit-scrollbar { display: none; }
.fin2 .fin2-nav .vs-tab { flex: 0 0 auto; margin-bottom: 0; white-space: nowrap; }
.fin2 .fin2-nav .vs-tab:focus-visible { box-shadow: inset 0 0 0 var(--space-2) var(--focus-ring); border-radius: var(--radius-xs); }
.fin2 .fin2-nav .vs-tab__badge { background: var(--surface-0); color: var(--text-strong); }
.fin2 .fin2-nav .vs-tab[aria-selected="true"] .vs-tab__badge { background: var(--ink-950); color: var(--text-on-dark); }
.fin2-nav > .fin2-more { margin-bottom: var(--space-2); }
.fin2-more.is-current { border-color: var(--border-strong); }
/* kompak (data-fin2-w≠lebar = #fin2Body ≤700; nav di luar container finbody, lebarnya sama): grid 4 kolom sama lebar
   (3 tab + Lainnya), ikon 20 di atas label penuh ≤2 baris, badge di pojok ikon, terpilih = fill tinta (README F25) */
:root:not([data-fin2-w="lebar"]) .fin2-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: var(--space-2); padding-bottom: var(--space-2); }
:root:not([data-fin2-w="lebar"]) .fin2-nav__tabs { grid-column: span 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); overflow: visible; mask-image: none; }
:root:not([data-fin2-w="lebar"]) .fin2 .fin2-nav .vs-tab, :root:not([data-fin2-w="lebar"]) .fin2 .fin2-nav > .fin2-more { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--space-2); min-width: 0; height: auto; min-height: var(--field-h-lg); margin: 0; padding: var(--space-3) 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-normal); text-align: center; white-space: normal; }
:root:not([data-fin2-w="lebar"]) .fin2 .fin2-nav > .fin2-more { position: relative; }
:root:not([data-fin2-w="lebar"]) .fin2 .fin2-nav .vs-tab:hover, :root:not([data-fin2-w="lebar"]) .fin2 .fin2-nav > .fin2-more:hover { color: var(--text-strong); }
:root:not([data-fin2-w="lebar"]) .fin2 .fin2-nav .vs-tab[aria-selected="true"], :root:not([data-fin2-w="lebar"]) .fin2 .fin2-nav > .fin2-more.is-current { background: var(--ink-950); color: var(--text-on-dark); }
:root:not([data-fin2-w="lebar"]) .fin2 .fin2-nav .vs-tab:focus-visible, :root:not([data-fin2-w="lebar"]) .fin2 .fin2-nav > .fin2-more:focus-visible { border-radius: var(--radius-sm); box-shadow: var(--shadow-focus); }
:root:not([data-fin2-w="lebar"]) .fin2 .fin2-nav .vs-tab[aria-selected="true"]:focus-visible, :root:not([data-fin2-w="lebar"]) .fin2 .fin2-nav > .fin2-more.is-current:focus-visible { box-shadow: var(--shadow-focus-brand); }
:root:not([data-fin2-w="lebar"]) .fin2 .fin2-nav .vs-tab__icon svg, :root:not([data-fin2-w="lebar"]) .fin2 .fin2-nav > .fin2-more .vs-btn__icon svg { width: var(--space-6); height: var(--space-6); }
:root:not([data-fin2-w="lebar"]) .fin2-nav .fin2-nav__l { max-width: 100%; }
:root:not([data-fin2-w="lebar"]) .fin2-more__chev { display: none; }
:root:not([data-fin2-w="lebar"]) .fin2 .fin2-nav .vs-tab__badge { position: absolute; top: var(--space-1); left: calc(50% + var(--space-2)); background: var(--ink-950); color: var(--text-on-dark); box-shadow: 0 0 0 2px var(--bg-app); }
:root:not([data-fin2-w="lebar"]) .fin2 .fin2-nav .vs-tab[aria-selected="true"] .vs-tab__badge { background: var(--surface-0); color: var(--text-strong); box-shadow: 0 0 0 2px var(--ink-950); }

/* ---------- kepala modul §2.6 ---------- */
.fin2-head { display: flex; flex-direction: column; gap: var(--space-5); }
.fin2-head__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-4); }
.fin2-head__titles { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.fin2-head__tl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }   /* E2 untuk kepala modul kompak */
.fin2-head__tl > .fin2-head__title { flex: 1 1 20ch; min-width: 0; }
.fin2-head__tl > .fin2-head__acts { flex: 0 1 auto; margin-left: auto; }
.fin2-head__why { display: none; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
:root[data-fin2-touch="true"] .fin2-head__why, :root:not([data-fin2-w="lebar"]) .fin2-head__why { display: block; margin-top: calc(var(--space-5) * -1 + var(--space-2)); }   /* C14 kepala: alasan aksi nonaktif terlihat saat sentuh/kompak */
.fin2-head__title { font-size: var(--text-h3); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--text-strong); overflow-wrap: anywhere; }
.fin2-head__desc { max-width: 64ch; font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-1); }
.fin2-head__meta > * { flex: 0 1 auto; }
.fin2-head__acts { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: var(--space-3); }
.fin2-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.fin2-crumb__l { padding: var(--space-1) var(--space-1); border: 0; border-radius: var(--radius-xs); background: transparent; font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fin2-crumb__l:hover { color: var(--text-strong); }
:root[data-fin2-touch="true"] .fin2-crumb__l { min-height: var(--field-h); min-width: var(--field-h); }
.fin2-crumb__sep { display: inline-flex; color: var(--text-muted); }
.fin2-crumb__cur { line-height: var(--lh-normal); }
.fin2-subnav__tabs { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fin2-subnav__tabs::-webkit-scrollbar { display: none; }
.fin2-subnav__tabs .vs-tab { flex: 0 0 auto; justify-content: center; white-space: nowrap; }

/* ---------- bar lingkup §2.8 ---------- */
.fin2-scope { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.fin2-scope__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.fin2-scope__row > * { flex: 0 1 auto; min-width: 0; }
.fin2-scope__per { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.fin2-scope__sum { margin-left: auto; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.fin2-scope__row2 { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.fin2-scope__row2 > * { flex: 0 1 auto; }
.fin2-scope__nav .fin2-dnav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; }
.fin2-scope__range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.fin2-dnav { display: inline-flex; align-items: center; gap: var(--space-2); }
.fin2-dnav__label { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 18ch; min-height: var(--fin2-ctl-h); padding: var(--space-1) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; text-align: center; cursor: pointer; }
.fin2-dnav__label:hover, .fin2-dnav__label[aria-expanded="true"] { background: var(--surface-1); border-color: var(--border-default); }
.fin2-dnav__l1 { font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--text-strong); }
.fin2-dnav__l2 { font-family: var(--font-body); font-size: var(--text-xs); line-height: var(--lh-snug); color: var(--text-muted); }
.fin2-scope__trigger { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--fin2-ctl-h); padding: 0 var(--space-4); border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--surface-0); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-strong); text-align: left; cursor: pointer; }
.fin2-scope__trigger:hover { background: var(--surface-1); }
.fin2-scope__tl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-fin2-w="mini"] .fin2-scope__trigger { padding-block: var(--space-2); }
:root[data-fin2-w="mini"] .fin2-scope__tl { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; line-height: var(--lh-snug); }   /* mini: periode · brand boleh 2 baris */
.fin2-mp { display: flex; flex-direction: column; gap: var(--space-2); }
.fin2-mp__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.fin2-mp__y { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--fw-semibold); text-align: center; color: var(--text-strong); }
.fin2-mp__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-2); }
.fin2-mp__m { min-height: var(--fin2-ctl-h); border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--surface-0); font-size: var(--text-sm); color: var(--text-body); cursor: pointer; }
.fin2-mp__m:hover { background: var(--surface-1); }
.fin2-mp__m[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); font-weight: var(--fw-semibold); }
.fin2-mp__m[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }

/* ---------- sistem toolbar §3 ---------- */
.fin2-card { min-width: 0; background: var(--surface-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: clip; }
/* E2: judul flex 1 1 20ch, aksi flex 0 1 auto, bungkus → aksi turun ke baris sendiri saat kolom judul < 20ch */
.fin2-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3) var(--space-4); padding: var(--space-4) var(--space-5); }
.fin2-card__titles { display: flex; flex: 1 1 min(100%, 28ch); flex-direction: column; gap: var(--space-1); min-width: 0; }
.fin2-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-h4); font-weight: var(--fw-bold); color: var(--text-strong); overflow-wrap: anywhere; }
.fin2-card__count { display: inline-flex; align-items: center; min-height: var(--space-6); padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--ink-050); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.fin2-card__meta { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fin2-card__acts { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); min-width: 0; max-width: 100%; }
.fin2-card__pad { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding: 0 var(--space-5) var(--space-5); }
.fin2-card > .fin2-card__pad:first-child { padding-top: var(--space-5); }
.fin2-card__body { min-width: 0; }
.fin2-card__body > .fin2-state { margin: var(--space-3) var(--space-5) var(--space-5); }
.fin2-card__body > .fin2-state--loading { margin: 0; }
.fin2-card > .fin2-alert { margin: 0 var(--space-5) var(--space-3); }
.fin2-card[aria-busy="true"] .fin2-card__body { opacity: .6; }
.fin2-card[aria-busy="true"] .fin2-pager, .fin2-card[aria-busy="true"] .fin2-bulk { opacity: .6; pointer-events: none; }

.fin2-tb-views { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding: 0 var(--space-5) var(--space-3); }
.fin2-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.fin2-viewbar__list { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.fin2-viewbar--quiet { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); flex: 1 1 100%; min-width: 0; }   /* owner 23 Sep: label di atas, chip sebaris di bawah (dua tingkat rapi) */
.fin2-viewbar--quiet > .fin2-viewbar__list { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.fin2-viewbar--quiet > .fin2-viewbar__label { display: block; min-height: 0; margin: 0; }
.fin2-viewbar__label { font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-viewbar__sep { width: 1px; height: var(--space-6); background: var(--border-default); }
.fin2-tb-sum, .fin2-tb-note { margin-left: auto; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-tb-sum { font-family: var(--font-body); font-variant-numeric: tabular-nums; }   /* E7: label body, nilai <b.fin2-amt> mono */
.fin2-tb-sum b { font-weight: var(--fw-semibold); }
.fin2-tb-note + .fin2-tb-sum { margin-left: 0; }

.fin2-chip { display: inline-flex; align-items: center; gap: var(--space-3); max-width: 100%; min-height: var(--fin2-ctl-h); padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--ink-050); color: var(--text-body); font-size: var(--text-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); white-space: nowrap; cursor: pointer; }
.fin2-chip__l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* chip terisi (owner 23 Sep): tidak terpilih = fill --ink-050 tanpa garis, hover --ink-100; terpilih = fill tinta */
.fin2-chip:hover { color: var(--text-strong); background: var(--ink-100); }
.fin2-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.fin2-chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); font-weight: var(--fw-semibold); }
.fin2-chip__n { display: inline-flex; align-items: center; justify-content: center; min-width: var(--space-6); height: var(--space-6); padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--primary); color: var(--primary-contrast); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-bold); font-style: normal; line-height: 1; font-variant-numeric: tabular-nums; }
.fin2-chip[aria-pressed="true"] .fin2-chip__n { background: var(--primary-contrast); color: var(--primary); }
.fin2-chip--quiet { border-color: transparent; background: var(--surface-1); }
.fin2-chip--quiet:hover { border-color: transparent; background: var(--ink-050); color: var(--text-strong); }
.fin2-chip--quiet .fin2-chip__n { background: var(--ink-100); color: var(--text-strong); }
.fin2-chip--quiet[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.fin2-chip--quiet[aria-pressed="true"] .fin2-chip__n { background: var(--primary-contrast); color: var(--primary); }
/* owner 23 Sep: chip view berwarna status (triad --tag-*) supaya mudah dilihat; terpilih tetap fill tinta */
.fin2-chip[data-tone="success"] { background: var(--tag-success-bg); border-color: var(--tag-success-border); color: var(--tag-success-text); }
.fin2-chip[data-tone="success"] .fin2-chip__n { background: var(--tag-success-text); color: var(--surface-0); }
.fin2-chip[data-tone="mint"] { background: var(--tag-mint-bg); border-color: var(--tag-mint-border); color: var(--tag-mint-text); }
.fin2-chip[data-tone="mint"] .fin2-chip__n { background: var(--tag-mint-text); color: var(--surface-0); }
.fin2-chip[data-tone="info"] { background: var(--tag-info-bg); border-color: var(--tag-info-border); color: var(--tag-info-text); }
.fin2-chip[data-tone="info"] .fin2-chip__n { background: var(--tag-info-text); color: var(--surface-0); }
.fin2-chip[data-tone="blue"] { background: var(--tag-blue-bg); border-color: var(--tag-blue-border); color: var(--tag-blue-text); }
.fin2-chip[data-tone="blue"] .fin2-chip__n { background: var(--tag-blue-text); color: var(--surface-0); }
.fin2-chip[data-tone="purple"] { background: var(--tag-purple-bg); border-color: var(--tag-purple-border); color: var(--tag-purple-text); }
.fin2-chip[data-tone="purple"] .fin2-chip__n { background: var(--tag-purple-text); color: var(--surface-0); }
.fin2-chip[data-tone="pink"] { background: var(--tag-pink-bg); border-color: var(--tag-pink-border); color: var(--tag-pink-text); }
.fin2-chip[data-tone="pink"] .fin2-chip__n { background: var(--tag-pink-text); color: var(--surface-0); }
.fin2-chip[data-tone="warning"] { background: var(--tag-warning-bg); border-color: var(--tag-warning-border); color: var(--tag-warning-text); }
.fin2-chip[data-tone="warning"] .fin2-chip__n { background: var(--tag-warning-text); color: var(--surface-0); }
.fin2-chip[data-tone="orange"] { background: var(--tag-orange-bg); border-color: var(--tag-orange-border); color: var(--tag-orange-text); }
.fin2-chip[data-tone="orange"] .fin2-chip__n { background: var(--tag-orange-text); color: var(--surface-0); }
.fin2-chip[data-tone="danger"] { background: var(--tag-danger-bg); border-color: var(--tag-danger-border); color: var(--tag-danger-text); }
.fin2-chip[data-tone="danger"] .fin2-chip__n { background: var(--tag-danger-text); color: var(--surface-0); }
.fin2-chip[data-tone="neutral"] { background: var(--tag-neutral-bg); border-color: var(--tag-neutral-border); color: var(--tag-neutral-text); }
.fin2-chip[data-tone="neutral"] .fin2-chip__n { background: var(--tag-neutral-text); color: var(--surface-0); }
.fin2-chip[data-tone]:hover { color: var(--text-strong); border-color: var(--border-strong); }
.fin2-chip[data-tone][aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.fin2-chip[data-tone][aria-pressed="true"] .fin2-chip__n { background: var(--primary-contrast); color: var(--primary); }

.fin2-tb-sentinel { height: 1px; margin-bottom: -1px; }
.fin2-tb-row { position: sticky; top: var(--fin2-bulk-h, var(--space-0)); z-index: var(--fin2-z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: var(--surface-0); border-top: 1px solid var(--border-faint); border-bottom: 1px solid var(--border-faint); }
.fin2-tb-row > * { flex: 0 1 auto; min-width: 0; }
.fin2-tb-row.is-stuck { box-shadow: var(--shadow-xs); }
.fin2-search { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); flex: 1 1 30ch; min-width: min(100%, 24ch); min-height: var(--fin2-ctl-h); padding: 0 var(--space-4); border-radius: var(--radius-sm); background: var(--surface-0); box-shadow: inset 0 0 0 1px var(--border-input); cursor: text; }
.fin2-tb-row > .fin2-search { flex: 1 1 30ch; }
/* kontrol (filter, urutkan, kolom, tampilan) satu kelompok: bila baris patah, turun bersama, tidak menyisakan satu tombol sendirian */
.fin2-tb-row__ctl { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; }
.fin2-search:focus-within { box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-focus); }
.fin2-search__ic { display: inline-flex; color: var(--text-muted); }
.fin2-search input { align-self: stretch; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font-size: var(--text-sm); color: var(--text-strong); text-overflow: ellipsis; }
.fin2-search input::placeholder { color: var(--text-muted); }
.fin2-search input::-webkit-search-cancel-button { appearance: none; }
.fin2-search__x { display: inline-flex; align-items: center; justify-content: center; width: var(--fin2-ctl-h); height: var(--fin2-ctl-h); margin-right: calc(var(--space-4) * -1); border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-muted); cursor: pointer; }
.fin2-search__x:hover { color: var(--text-strong); background: var(--surface-1); }
.fin2-kbd { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); border: 1px solid var(--border-default); border-bottom-width: 2px; border-radius: var(--radius-xs); background: var(--surface-0); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-medium); line-height: 1; color: var(--text-muted); }
@media (pointer:coarse) { .fin2-search .fin2-kbd { display: none; } }

.fin2-drop { position: relative; min-width: 0; max-width: 100%; }
.fin2-drop__btn, .fin2-tb-filterbtn { display: inline-flex; align-items: center; gap: var(--space-3); max-width: 100%; min-height: var(--fin2-ctl-h); padding: 0 var(--space-4); border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--surface-0); color: var(--text-body); font-size: var(--text-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); white-space: nowrap; cursor: pointer; }
.fin2-drop__btn:hover, .fin2-tb-filterbtn:hover { background: var(--surface-1); }
.fin2-drop__btn:focus-visible, .fin2-tb-filterbtn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.fin2-drop__btn[data-on="true"], .fin2-drop__btn[aria-expanded="true"], .fin2-tb-filterbtn[data-active="true"] { border-color: var(--border-strong); color: var(--text-strong); font-weight: var(--fw-semibold); }
.fin2-drop__btn--block { width: 100%; justify-content: space-between; }
.fin2-drop__l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fin2-drop__ic, .fin2-drop__chev { display: inline-flex; color: var(--text-muted); }
.fin2-drop__n { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: var(--space-6); height: var(--space-6); padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--ink-950); color: var(--text-on-dark); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: 1; }
.fin2-vsw { display: inline-flex; gap: var(--space-1); padding: var(--space-1); background: var(--ink-050); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); }
.fin2-vsw > button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: calc(var(--fin2-ctl-h) - var(--space-1) * 2); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; }
:root[data-fin2-touch="true"] .fin2-vsw > button { min-height: var(--field-h); }
.fin2-vsw > button:hover { color: var(--text-strong); }
.fin2-vsw > button[aria-pressed="true"] { background: var(--surface-0); color: var(--text-strong); font-weight: var(--fw-semibold); box-shadow: var(--shadow-xs); }
.fin2-vsw > span { display: inline-flex; }

.fin2-tb-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); }
.fin2-tb-tags__l { margin-right: var(--space-1); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.fin2-ftag { display: inline-flex; align-items: center; max-width: 100%; min-height: var(--fin2-ctl-h); padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer; }
.fin2-ftag:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.fin2-ftag:hover .vs-tag { border-color: var(--border-strong); }
.fin2-linkbtn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--fin2-ctl-h); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-xs); background: transparent; font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fin2-linkbtn:hover { color: var(--text-strong); }
.fin2-linkbtn > span[aria-hidden] { display: inline-flex; }

/* popover & opsi §3.4, §3.8 */
.fin2-pop { position: fixed; z-index: var(--fin2-z-pop); min-width: min(26ch, 92vw); max-width: min(360px, 92vw); max-height: min(60dvh, 420px); overflow: auto; overscroll-behavior: contain; padding: var(--space-2); background: var(--surface-0); border: 1px solid var(--border-default); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); }
.fin2-pop--more { width: min(480px, 92vw); max-width: min(480px, 92vw); max-height: min(70dvh, 520px); padding: var(--space-3); }
.fin2-pop--menu { min-width: min(28ch, 92vw); }
.fin2-pop__ttl { padding: var(--space-2) var(--space-4) var(--space-1); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.fin2-pop__txt, .fin2-pop__empty { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-pop__hint { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-pop__sep { height: 1px; margin: var(--space-2) var(--space-1); background: var(--border-faint); }
.fin2-pop__grp + .fin2-pop__grp { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-faint); }
.fin2-pop__range { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16ch), 1fr)); gap: var(--space-3); padding: var(--space-3) var(--space-2); }
.fin2-pop__fld { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.fin2-pop__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-3) var(--space-2) var(--space-1); border-top: 1px solid var(--border-faint); }
.fin2-opt { display: grid; grid-template-columns: var(--space-5) minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--fin2-ctl-h); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-body); font-size: var(--text-sm); line-height: var(--lh-snug); text-align: left; cursor: pointer; }
.fin2-opt:hover { background: var(--surface-1); }
.fin2-opt:focus-visible { outline: none; background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-strong); }
.fin2-opt[aria-selected="true"], .fin2-opt[aria-checked="true"] { color: var(--text-strong); font-weight: var(--fw-semibold); }
.fin2-opt[aria-disabled="true"] { color: var(--text-muted); cursor: not-allowed; }
.fin2-opt__ck { display: inline-flex; color: var(--text-strong); }
.fin2-opt__box { margin-top: 0; }
.fin2-opt__box.is-on { background: var(--primary); border-color: var(--primary); }
.fin2-opt__box.is-on svg { opacity: 1; transform: none; }
.fin2-opt__l { min-width: 0; overflow-wrap: anywhere; }
.fin2-opt__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.fin2-mi { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); width: 100%; min-height: var(--fin2-ctl-h); padding: var(--space-1) var(--space-4); border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-body); font-size: var(--text-sm); line-height: var(--lh-snug); text-align: left; cursor: pointer; }
.fin2-mi:hover { background: var(--surface-1); }
.fin2-mi:focus-visible { outline: none; background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-strong); }
.fin2-mi__ic { display: inline-flex; width: var(--space-5); color: var(--text-muted); }
.fin2-mi__r { display: block; font-size: var(--text-xs); color: var(--text-muted); }
.fin2-mi--danger, .fin2-mi--danger .fin2-mi__ic { color: var(--tag-danger-text); }
.fin2-mi--danger:hover { background: var(--tag-danger-bg); }
.fin2-mi[aria-disabled="true"] { color: var(--text-muted); cursor: not-allowed; }
.fin2-moremenu { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24ch), 1fr)); gap: var(--space-4); }
.fin2-moremenu__grp { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fin2-moremenu__l { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.fin2-moremenu__it { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: var(--fin2-ctl-h); padding: 0 var(--space-3); border-radius: var(--radius-xs); font-size: var(--text-sm); color: var(--text-body); }
.fin2-moremenu__it:hover { background: var(--surface-1); }
.fin2-moremenu__it:focus-visible { outline: none; background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-strong); }
.fin2-moremenu__it[aria-current="page"] { background: var(--surface-1); color: var(--text-strong); font-weight: var(--fw-semibold); }
.fin2-moremenu__it > span { display: inline-flex; min-width: 0; }
.fin2-moremenu__ic { color: var(--text-muted); }

/* ---------- daftar komposit §4.2 ---------- */
.fin2-list { display: flex; flex-direction: column; }
.fin2-list__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-5) var(--space-2) var(--space-3); background: var(--surface-1); border-top: 1px solid var(--border-faint); font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-top: 1px solid var(--border-faint); }
.fin2-row.has-pick { grid-template-columns: auto minmax(0, 1fr) auto; padding-left: var(--space-3); }
.fin2-row:hover { background: var(--surface-1); }
.fin2-row.is-current { background: var(--surface-1); outline: 1px solid var(--border-strong); outline-offset: -1px; }
.fin2-row__hit, .fin2-row__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); width: 100%; min-width: 0; min-height: var(--field-h-lg); padding: var(--space-3) var(--space-5); border: 0; background: transparent; color: inherit; text-align: left; }
.fin2-row.has-lead > .fin2-row__hit, .fin2-row.has-lead > .fin2-row__body { grid-template-columns: auto minmax(0, 1fr) auto; }
.fin2-row.has-pick > .fin2-row__hit, .fin2-row.has-pick > .fin2-row__body { padding-left: var(--space-2); }
.fin2-row__hit { cursor: pointer; border-radius: 0; }
.fin2-row__hit:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--border-strong), inset 0 0 0 var(--space-2) var(--focus-ring); }
.fin2-row__lead { display: inline-flex; align-self: start; }
.fin2-ic { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: var(--field-h-sm); height: var(--field-h-sm); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--ink-050); color: var(--text-muted); }
.fin2-row__main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fin2-row__title { overflow: hidden; font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--text-strong); text-overflow: ellipsis; white-space: nowrap; }
.fin2-row__code { font-size: var(--text-xs); font-weight: var(--fw-regular); color: var(--text-muted); }
.fin2-row__meta { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); overflow-wrap: anywhere; }
.fin2-row__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.fin2-row__end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); text-align: right; }
.fin2-row__end2 { display: inline-flex; align-items: center; gap: var(--space-3); }
.fin2-row__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); padding-right: var(--space-5); }

/* ---------- grid ↔ kartu §4.3 ---------- */
.fin2-grid { min-width: 0; }
.fin2-grid__scroll { min-width: 0; overflow-x: auto; }
.fin2-grid__scroll[data-more-right="true"] { mask-image: linear-gradient(to right, var(--ink-950) calc(100% - var(--fin2-fade)), transparent); }
.fin2-grid__scroll:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--space-2) var(--focus-ring); }
.fin2-grid__inner { min-width: calc(var(--min-ch, 80) * 1ch); }
.fin2-grid__row { position: relative; display: grid; grid-template-columns: var(--fin2-cols); align-items: center; column-gap: var(--space-4); padding: 0 var(--space-4); border-top: 1px solid var(--border-faint); }
.fin2-grid__row--head { min-height: var(--fin2-ctl-h); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.fin2-grid__body .fin2-grid__row:first-child { border-top: 0; }
.fin2-grid__body .fin2-grid__row:hover, .fin2-grid__row.is-sel { background: var(--surface-1); }
.fin2-grid__row.is-current { background: var(--surface-1); outline: 1px solid var(--border-strong); outline-offset: -1px; }
.fin2-grid__row.fin2-grid__row--group { display: block; padding: 0; }
.fin2-grid__row.fin2-grid__row--group:hover { background: transparent; }
.fin2-grid__th { min-width: 0; padding: var(--space-3) 0; font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-grid__th[data-align="end"] { text-align: right; }
.fin2-grid__th[data-align="end"] .fin2-grid__sort { justify-content: flex-end; }
.fin2-grid__sort { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--fin2-ctl-h); padding: 0; border: 0; background: transparent; font-size: inherit; font-weight: inherit; color: inherit; cursor: pointer; }
.fin2-grid__sort:hover { color: var(--text-strong); }
:root[data-fin2-touch="true"] .fin2-grid__sort { min-width: var(--fin2-ctl-h); }
.fin2-grid__th[aria-sort="ascending"], .fin2-grid__th[aria-sort="descending"] { color: var(--text-strong); }
.fin2-grid__cell { min-width: 0; padding: var(--space-3) 0; font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-body); overflow-wrap: break-word; }
.fin2-grid__cell[data-align="end"] { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.fin2-grid__cell[data-card="status"] { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fin2-grid__cell[data-card="act"] { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fin2-grid__cell--pick, .fin2-grid__cell--kebab, .fin2-grid__cell[data-card="act"], .fin2-grid__cell .vs-btn, .fin2-grid__cell a { position: relative; z-index: 1; }
.fin2-grid__cell--kebab { display: flex; justify-content: flex-end; }
.fin2-grid__th--pick, .fin2-grid__cell--pick { display: flex; align-items: center; }
.fin2-rowlink { display: flex; flex-direction: column; gap: var(--space-1); padding: 0; border: 0; background: transparent; color: inherit; font-size: inherit; line-height: inherit; text-align: left; cursor: pointer; min-width: 0; max-width: 100%; }
.fin2-rowlink::after { content: ''; position: absolute; inset: 0; }
.fin2-rowlink:focus-visible { outline: none; box-shadow: none; }
.fin2-rowlink:focus-visible::after { box-shadow: inset 0 0 0 1px var(--border-strong), inset 0 0 0 var(--space-2) var(--focus-ring); }
.fin2-grid__row.fin2-grid__row--full, .fin2-grid__row.fin2-grid__row--gfoot { display: block; padding: 0; }
.fin2-grid__row--full:hover, .fin2-grid__row--gfoot:hover { background: transparent; }
.fin2-grid__fcell { min-width: 0; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-body); }
.fin2-grid__row--total { background: var(--surface-1); border-top: 1px solid var(--border-default); }
.fin2-grid__row--total .fin2-grid__cell { font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2-grid__totl { font-weight: var(--fw-bold); color: var(--text-strong); }
.fin2-grid__why { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-grid__why > svg { margin-top: var(--space-1); }
.fin2-group__foot { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-5); background: var(--surface-1); border-top: 1px solid var(--border-faint); }
.fin2-grid__row--gfoot .fin2-group__foot { border-top: 0; }   /* E8: garis atas sudah dari baris grid (tanpa garis ganda) */
.fin2-group__frow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-4); font-size: var(--text-xs); line-height: var(--lh-normal); }
.fin2-group__fl { color: var(--text-muted); text-align: right; }
.fin2-group__fv { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-body); white-space: nowrap; }
.fin2-group__frow.is-strong .fin2-group__fl, .fin2-group__frow.is-strong .fin2-group__fv { font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2-grid__sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: var(--surface-1); border-top: 1px solid var(--border-faint); font-size: var(--text-xs); color: var(--text-muted); }
.fin2-grid__sum b { font-family: var(--font-mono); font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2-grid__cardmeta { display: none; }
/* mode kartu (kompak) */
.fin2-grid--card .fin2-grid__inner { min-width: 0; }
.fin2-grid--card .fin2-grid__row { grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 0; row-gap: var(--space-2); align-items: start; padding: var(--space-4); }
.fin2-grid--card .fin2-grid__cell { padding: 0; }
.fin2-grid--card [data-card="pick"] { grid-column: 1; grid-row: 1; margin: calc(var(--space-3) * -1) var(--space-3) 0 calc(var(--space-3) * -1); }
.fin2-grid--card [data-card="title"] { grid-column: 2; grid-row: 1; font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2-grid--card [data-card="title"] .fin2-cell__s { font-weight: var(--fw-regular); }   /* E8: sub judul kartu tidak tebal */
.fin2-grid--card [data-card="amt"] { grid-column: 3; grid-row: 1; align-items: flex-end; margin-left: var(--space-3); white-space: nowrap; }
.fin2-grid--card [data-card="kebab"] { grid-column: 4; grid-row: 1; margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0 var(--space-2); }
.fin2-grid--card [data-card="sub"] { grid-column: 2 / -1; order: 1; }
.fin2-grid--card .fin2-grid__cardmeta { display: block; grid-column: 2 / -1; order: 2; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-grid--card [data-card="kv"] { grid-column: 2 / -1; order: 3; display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); text-align: right; }   /* E8: data-align=end tetap label sebaris nilai (481–700) */
.fin2-grid--card [data-card="kv"]::before { content: attr(data-l); flex: 1 1 auto; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-regular); font-variant-numeric: normal; color: var(--text-muted); text-align: left; }
.fin2-grid--card [data-card="kv"][data-empty="true"], .fin2-grid--card .fin2-grid__row--total [data-empty="true"] { display: none; }
.fin2-grid--card [data-card="status"] { grid-column: 2 / -1; order: 4; }
.fin2-grid--card [data-card="act"] { grid-column: 2 / -1; order: 5; }
.fin2-grid--card [data-card="act"] > * { flex: 1 1 auto; }
.fin2-grid--card [data-card="meta"] { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; clip-path: inset(50%); }
.fin2-grid--card [data-card="hide"], .fin2-grid--card [data-card="amt"][data-empty="true"] { display: none; }
.fin2-grid--card .fin2-grid__row.fin2-grid__row--group, .fin2-grid--card .fin2-grid__row.fin2-grid__row--full, .fin2-grid--card .fin2-grid__row.fin2-grid__row--gfoot { display: block; padding: 0; }   /* E8: baris penuh/kaki grup tanpa padding kartu (tanpa blok bertumpuk ganda) */

/* grup baris §4.4 */
.fin2-group__head { display: grid; grid-template-columns: minmax(min(100%, 22ch), max-content) minmax(0, 1fr); align-items: center; gap: var(--space-2) var(--space-4); min-height: var(--fin2-ctl-h); padding: var(--space-3) var(--space-5); background: var(--surface-1); }
.fin2-group__l { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.fin2-group__l b { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text-strong); }
.fin2-group__n { font-size: var(--text-xs); color: var(--text-muted); }
.fin2-group__r { min-width: 0; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); text-align: right; white-space: normal; overflow-wrap: break-word; }

/* ---------- pager §4.5 ---------- */
.fin2-pager { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-faint); }
.fin2-pager__info { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fin2-pager__ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.fin2-pg { min-width: var(--fin2-ctl-h); height: var(--fin2-ctl-h); padding: 0 var(--space-2); border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--surface-0); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); cursor: pointer; }
.fin2-pg:hover { background: var(--surface-1); }
.fin2-pg:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.fin2-pg[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); font-weight: var(--fw-semibold); }
.fin2-pg__gap { min-width: var(--space-7); font-family: var(--font-mono); font-size: var(--text-xs); text-align: center; color: var(--text-muted); }
.fin2-pager__of { padding: 0 var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }

/* ---------- bulk §4.6 ---------- */
.fin2-bulk { position: sticky; top: 0; z-index: calc(var(--fin2-z-sticky) + 1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 var(--space-5) var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); border-radius: var(--radius-sm); background: var(--ink-950); color: var(--text-on-dark); box-shadow: calc(var(--space-5) * -1) 0 0 var(--surface-0), var(--space-5) 0 0 var(--surface-0); }
.fin2-bulk__sumw { white-space: nowrap; }
.fin2-bulk__exc { display: inline-block; font-family: var(--font-body); font-weight: var(--fw-regular); }   /* E4: kotak atomik (turun baris utuh, tidak menumpuk kotak inline jumlah) */
.fin2-bulk__n { font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.fin2-bulk__n { flex: 0 1 auto; }
.fin2-bulk__mid { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.fin2-bulk__acts { display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-left: auto; }
.fin2-bulk__btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--fin2-ctl-h); padding: 0 var(--space-4); border: 1px solid var(--text-on-dark-muted); border-radius: var(--radius-xs); background: transparent; color: var(--text-on-dark); font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: 1; white-space: nowrap; cursor: pointer; }
.fin2-bulk__btn:hover, .fin2-bulk__btn:focus-visible { background: var(--text-on-dark); color: var(--ink-950); outline: none; }
.fin2-bulk__btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.fin2-bulk__ic { display: none; }
.fin2-bulk :focus-visible { box-shadow: var(--shadow-focus-brand); }
.fin2-bulk__prog { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.fin2-bulk__st { font-size: var(--text-xs); color: var(--text-on-dark-muted); }
.fin2-bulk--done { display: block; padding: 0; background: transparent; color: inherit; }

/* ---------- action bar kompak §2.9 ---------- */
.fin2-actionbar { position: sticky; bottom: 0; z-index: var(--fin2-z-actionbar); margin: 0 calc(var(--space-7) * -1); padding: var(--space-2) var(--space-7) calc(var(--space-2) + env(safe-area-inset-bottom)); background: var(--surface-0); border-top: 1px solid var(--border-default); box-shadow: var(--shadow-xs); }
.fin2-actionbar .fin2-bulk { position: static; margin: 0; }
.fin2-actionbar--demo { position: static; margin: 0; padding: var(--space-2) var(--space-5); border: 1px solid var(--border-default); border-radius: var(--radius-sm); box-shadow: none; }

/* ---------- atom & unit bersama §4.7 ---------- */
.fin2-amt { font-family: var(--font-mono); font-weight: var(--fw-semibold); color: var(--text-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin2-amt--sm { font-size: var(--text-sm); }
.fin2-amt--md { font-size: var(--text-md); }
.fin2-amt--h4 { font-size: var(--text-h4); }
.fin2-amt--h3 { font-size: var(--text-h3); font-weight: var(--fw-bold); }
.fin2-amt--h2 { font-size: var(--text-h2); font-weight: var(--fw-bold); }
.fin2-amt--in { color: var(--accent-mint); }
.fin2-amt--out { color: var(--tag-danger-text); }
.fin2-amt--strike { color: var(--text-muted); }
.fin2-amt--nil, .fin2-nil { color: var(--text-muted); font-weight: var(--fw-regular); }
.fin2-amt--nil > .sr-only, .fin2-nil > .sr-only { font-family: var(--font-body); }   /* E7: teks sr bukan mono */
/* C26: tag satu baris; teks (.vs-tag__t, dibungkus core) dielipsis dan diberi title penuh bila tetap tak muat */
.fin2 .vs-tag { max-width: 100%; height: auto; min-height: calc(var(--space-6) + var(--space-1) * 3); padding-block: var(--space-1); white-space: nowrap; line-height: var(--lh-snug); text-align: left; }
.fin2 .vs-tag__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fin2 .vs-tag__dot, .fin2 .vs-tag__icon { flex: 0 0 auto; }
.fin2-alert { align-items: flex-start; }
.fin2 .fin2-alert .vs-alert__msg, .fin2 .fin2-alert .vs-alert__title { color: inherit; }
.fin2-alert--info { background: var(--tag-info-bg); border-color: var(--tag-info-border); color: var(--tag-info-text); }
.fin2-alert--success { background: var(--tag-success-bg); border-color: var(--tag-success-border); color: var(--tag-success-text); }
.fin2-alert--warning { background: var(--tag-warning-bg); border-color: var(--tag-warning-border); color: var(--tag-warning-text); }
.fin2-alert--danger { background: var(--tag-danger-bg); border-color: var(--tag-danger-border); color: var(--tag-danger-text); }
.fin2-alert--neutral { background: var(--tag-neutral-bg); border-color: var(--tag-neutral-border); color: var(--tag-neutral-text); }
.fin2-alert--identity { background: var(--tag-identity-bg); border-color: var(--tag-identity-border); color: var(--tag-identity-text); }
.fin2-alert__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.fin2-alert ul, .fin2-state__errs { margin: var(--space-2) 0 0; padding-left: var(--space-5); font-size: var(--text-xs); line-height: var(--lh-normal); }

.fin2-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fin2-tile-min, 18ch)), 1fr)); gap: var(--space-3); }
.fin2-tile { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-5); background: var(--surface-0); border: 1px solid var(--border-default); border-radius: var(--radius-sm); }
.fin2-tile__l { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-tile__v { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--text-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin2-tile__s { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-tile--mint .fin2-tile__v { color: var(--accent-mint); }
.fin2-tile--warning .fin2-tile__v { color: var(--tag-warning-text); }
.fin2-tile--danger .fin2-tile__v { color: var(--tag-danger-text); }
.fin2-tile--muted .fin2-tile__v { color: var(--text-muted); }
.fin2-tile--ink { background: var(--ink-950); border-color: var(--ink-950); }
.fin2-tile--ink .fin2-tile__l, .fin2-tile--ink .fin2-tile__s { color: var(--text-on-dark-muted); }
.fin2-tile--ink .fin2-tile__v { color: var(--text-on-dark); }
/* C18: CASH-FLOW chip--net = kotak 9px radius 3 → calc(--space-3 + 1px), calc(--radius-xs / 2) */
.fin2-chipdot { display: inline-block; flex: 0 0 auto; width: calc(var(--space-3) + 1px); height: calc(var(--space-3) + 1px); border-radius: calc(var(--radius-xs) / 2); }
.fin2-chipdot--net { background: var(--vs-yellow); border: 1px solid var(--vs-yellow-shadow); }
.fin2-chipdot--in { background: var(--ink-950); }
.fin2-tile--ink .fin2-chipdot--in { background: var(--text-on-dark); }
.fin2-chipdot--out { background: var(--ink-400); }
/* C30: baris metrik kompak = tiap pasangan label + nilai dalam satu kotak kecil; tile tinta (focal) tetap tinta */
.fin2-tiles--inline { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fin2-tiles--inline .fin2-tile { flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); padding: var(--space-1) var(--space-3); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); background: var(--surface-1); }
.fin2-tiles--inline .fin2-tile__v { font-family: var(--font-mono); font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2-tiles--inline .fin2-tile__l { color: var(--text-muted); }
.fin2-tiles--inline .fin2-tile__s { display: none; }
.fin2-tiles--inline .fin2-tile--ink { background: var(--ink-950); border-color: var(--ink-950); }
.fin2-tiles--inline .fin2-tile--ink .fin2-tile__l { color: var(--text-on-dark-muted); }
.fin2-tiles--inline .fin2-tile--ink .fin2-tile__v { color: var(--text-on-dark); }

.fin2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fin2-kpi-min, 36ch)), 1fr)); gap: var(--space-5); }
.fin2-kpi { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding: var(--space-7); background: var(--surface-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.fin2-kpi__head { display: flex; align-items: center; gap: var(--space-3); }
.fin2-kpi__ic { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--ink-050); color: var(--text-strong); }
.fin2-kpi--rev .fin2-kpi__ic { background: var(--tag-mint-bg); border-color: var(--tag-mint-border); color: var(--accent-mint); }
.fin2-kpi--exp .fin2-kpi__ic { background: var(--tag-orange-bg); border-color: var(--tag-orange-border); color: var(--tag-orange-text); }
.fin2-kpi__l { font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-kpi__v { font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--text-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin2-kpi__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.fin2-kpi__sub { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-kpi__dl { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--vs-yellow); }
.fin2-kpi--profit { background: var(--brand-gradient); border-color: var(--border-default); box-shadow: var(--shadow-identity); }
.fin2-kpi--profit .fin2-kpi__ic { background: color-mix(in srgb, var(--text-on-dark) 16%, transparent); border-color: transparent; color: var(--text-on-dark); }
.fin2-kpi--profit .fin2-kpi__l, .fin2-kpi--profit .fin2-kpi__sub { color: var(--text-on-dark-muted); }
.fin2-kpi--profit .fin2-kpi__v { color: var(--text-on-dark); }
.fin2-spark { position: relative; display: block; width: 100%; height: var(--space-8); }
.fin2-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fin2-spark polyline { fill: none; stroke: var(--ink-950); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fin2-spark--mint polyline { stroke: var(--accent-mint); }
.fin2-spark--orange polyline { stroke: var(--tag-orange-text); }
.fin2-spark--ondark polyline { stroke: var(--text-on-dark); }
.fin2-spark__dot { position: absolute; right: 0; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-pill); background: var(--ink-950); transform: translate(50%, -50%); }
.fin2-spark--mint .fin2-spark__dot { background: var(--accent-mint); }
.fin2-spark--orange .fin2-spark__dot { background: var(--tag-orange-text); }
.fin2-spark--ondark .fin2-spark__dot { background: var(--text-on-dark); }

.fin2-kv { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.fin2-kv__row { display: grid; grid-template-columns: var(--fin2-kv-cols, minmax(12ch, 2fr) minmax(0, 3fr)); align-items: baseline; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-faint); }
.fin2-kv__row:last-child { border-bottom: 0; }
.fin2-kv dt { font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-kv dd { display: flex; align-items: center; gap: var(--space-2); min-width: 0; margin: 0; font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-strong); overflow-wrap: anywhere; }
.fin2-kv__t { min-width: 0; }
.fin2-kv__v--mono .fin2-kv__t { font-family: var(--font-mono); font-weight: var(--fw-medium); }
.fin2-kv__v--muted { color: var(--text-muted); font-weight: var(--fw-regular); }
.fin2-kv dd .vs-iconbtn { flex-shrink: 0; margin: calc(var(--space-3) * -1) 0; }
.fin2-kv--compact .fin2-kv__row { padding: var(--space-2) 0; }

.fin2-tl { display: flex; flex-direction: column; padding: 0; list-style: none; }
.fin2-tl__item { display: grid; grid-template-columns: var(--space-7) minmax(0, 1fr); gap: var(--space-4); }
.fin2-tl__rail { display: flex; flex-direction: column; align-items: center; }
.fin2-tl__node { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: var(--space-7); height: var(--space-7); border: 1px solid; border-radius: var(--radius-pill); }
.fin2-tl__node--neutral { background: var(--tag-neutral-bg); border-color: var(--tag-neutral-border); color: var(--tag-neutral-text); }
.fin2-tl__node--success { background: var(--tag-success-bg); border-color: var(--tag-success-border); color: var(--tag-success-text); }
.fin2-tl__node--mint { background: var(--tag-mint-bg); border-color: var(--tag-mint-border); color: var(--tag-mint-text); }
.fin2-tl__node--blue { background: var(--tag-blue-bg); border-color: var(--tag-blue-border); color: var(--tag-blue-text); }
.fin2-tl__node--info { background: var(--tag-info-bg); border-color: var(--tag-info-border); color: var(--tag-info-text); }
.fin2-tl__node--warning { background: var(--tag-warning-bg); border-color: var(--tag-warning-border); color: var(--tag-warning-text); }
.fin2-tl__node--danger { background: var(--tag-danger-bg); border-color: var(--tag-danger-border); color: var(--tag-danger-text); }
.fin2-tl__node--purple { background: var(--tag-purple-bg); border-color: var(--tag-purple-border); color: var(--tag-purple-text); }
.fin2-tl__line { flex: 1; width: 1px; margin: var(--space-2) 0; background: var(--border-default); }
.fin2-tl__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding-bottom: var(--space-6); }
.fin2-tl__item:last-child .fin2-tl__body { padding-bottom: 0; }
.fin2-tl__txt { font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-body); }
.fin2-tl__txt b { font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2-tl__time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.fin2-tl__note { padding: var(--space-3) var(--space-4); background: var(--surface-1); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-body); }

.fin2-att { display: flex; flex-direction: column; gap: var(--space-2); padding: 0; list-style: none; }
.fin2-att__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); }
.fin2-att__item:hover { background: var(--surface-1); }
.fin2-att__ic { display: inline-flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--ink-050); color: var(--text-muted); }
.fin2-att__txt { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fin2-att__name { overflow: hidden; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-strong); text-overflow: ellipsis; white-space: nowrap; }
.fin2-att__meta { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-att__size { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.fin2-att__note { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }

.fin2-up { display: flex; flex-direction: column; gap: var(--space-3); }
.fin2-up__zone { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-7); border: 2px dashed var(--border-input); border-radius: var(--radius-md); text-align: center; cursor: pointer; }
.fin2-up__zone:hover { border-color: var(--ink-500); background: var(--surface-1); }
.fin2-up__zone:focus-within { border-color: var(--border-strong); box-shadow: var(--shadow-focus); }
.fin2-up[data-state="error"] .fin2-up__zone { border-color: var(--tag-danger-border); }
.fin2-up[data-state="drag"] .fin2-up__zone { border-color: var(--border-strong); background: var(--surface-1); }
.fin2-up__ic { display: inline-flex; align-items: center; justify-content: center; width: var(--space-9); height: var(--space-9); border-radius: var(--radius-pill); background: var(--ink-050); color: var(--text-strong); }
.fin2-up__t { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-body); }
.fin2-up__m { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-up__in { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; }
.fin2-up__file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-sm); }
.fin2-up__fic { display: inline-flex; color: var(--text-muted); }
.fin2-up__fname { overflow: hidden; font-size: var(--text-sm); color: var(--text-strong); text-overflow: ellipsis; white-space: nowrap; }
.fin2-up__err { font-size: var(--text-xs); color: var(--tag-danger-text); }

.fin2-steps { display: flex; align-items: flex-start; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.fin2-step { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: var(--space-3); min-width: 12ch; }
.fin2-step__dot { display: inline-flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: var(--surface-0); color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.fin2-step--done .fin2-step__dot { background: var(--ink-950); border-color: var(--ink-950); color: var(--text-on-dark); }
.fin2-step--cur .fin2-step__dot { background: var(--vs-yellow); border: 2px solid var(--ink-950); color: var(--ink-950); font-weight: var(--fw-bold); }
.fin2-step--rejected .fin2-step__dot { background: var(--tag-danger-bg); border-color: var(--tag-danger-border); color: var(--tag-danger-text); }
.fin2-step__l { font-size: var(--text-xs); line-height: var(--lh-normal); text-align: center; color: var(--text-muted); }
.fin2-step--cur .fin2-step__l { font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2-steps__line { flex: 1 1 var(--space-6); min-width: var(--space-5); height: 2px; margin-top: calc(var(--space-8) / 2 - 1px); background: var(--ink-100); }
.fin2-steps__line.is-done { background: var(--ink-950); }

.fin2-out { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-5) var(--space-5); border: 1px solid var(--border-default); border-radius: var(--radius-sm); text-align: center; }
.fin2-out__ic { display: inline-flex; align-items: center; justify-content: center; width: var(--field-h); height: var(--field-h); border: 1px solid var(--tag-mint-border); border-radius: var(--radius-pill); background: var(--tag-mint-bg); color: var(--tag-mint-text); }
.fin2-out--danger .fin2-out__ic { background: var(--tag-danger-bg); border-color: var(--tag-danger-border); color: var(--tag-danger-text); }
.fin2-out--warning .fin2-out__ic { background: var(--tag-warning-bg); border-color: var(--tag-warning-border); color: var(--tag-warning-text); }
.fin2-out--purple .fin2-out__ic { background: var(--tag-purple-bg); border-color: var(--tag-purple-border); color: var(--tag-purple-text); }
.fin2-out__t { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2-out__amt { font-family: var(--font-mono); font-size: var(--text-h2); font-weight: var(--fw-bold); color: var(--text-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin2-out__meta { font-family: var(--font-body); font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); font-variant-numeric: tabular-nums; }   /* E7: nama orang bukan mono */

.fin2-bd { display: flex; flex-direction: column; gap: var(--space-1); }
.fin2-bd__line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; }
.fin2-bd__l { min-width: 0; font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-bd__l small { display: block; font-size: var(--text-xs); color: var(--text-muted); }
.fin2-bd__v { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin2-bd__line.is-strong .fin2-bd__l, .fin2-bd__line.is-strong .fin2-bd__v { font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2-bd__sep { height: 1px; margin: var(--space-2) 0; background: var(--border-default); }
.fin2-bd__rule { height: 2px; margin: var(--space-3) 0 var(--space-2); background: var(--ink-950); }
.fin2-bd__out { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); padding: var(--space-4) var(--space-5); background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-sm); }
.fin2-bd__outk { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.fin2-bd__outv { font-family: var(--font-mono); font-size: var(--text-h3); font-weight: var(--fw-bold); color: var(--text-strong); white-space: nowrap; }

.fin2-ph { display: flex; flex-direction: column; padding: 0; list-style: none; }
.fin2-ph__row { display: grid; grid-template-columns: minmax(6ch, auto) minmax(0, 1fr) auto; align-items: start; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-faint); }
.fin2-ph__date b, .fin2-ph__date small { display: block; font-family: var(--font-mono); font-size: var(--text-xs); }
.fin2-ph__date b { font-weight: var(--fw-bold); color: var(--text-strong); }
.fin2-ph__date small, .fin2-ph__txt small { color: var(--text-muted); }
.fin2-ph__txt { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fin2-ph__txt b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2-ph__txt small { font-size: var(--text-xs); line-height: var(--lh-normal); overflow-wrap: anywhere; }
.fin2-ph__end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.fin2-ph__amt { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text-strong); white-space: nowrap; }
.fin2-ph__amt.is-out { color: var(--tag-danger-text); }
.fin2-ph__total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
.fin2-ph__total b { font-family: var(--font-mono); font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--text-strong); }

.fin2-inv { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; padding: var(--space-7); background: var(--surface-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.fin2-inv--compact { gap: var(--space-4); padding: var(--space-5); }
.fin2-inv__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.fin2-inv__id { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fin2-inv__kick { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.fin2-inv__no { font-size: var(--text-h3); letter-spacing: var(--ls-tight); overflow-wrap: anywhere; }
.fin2-inv--compact .fin2-inv__no { font-size: var(--text-h4); }
.fin2-inv__dates { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-inv__dates .fin2-mono { white-space: nowrap; }
/* C33: nama brand dan tag status sebaris (tetap sejajar saat kepala membungkus) */
.fin2-inv__brand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.fin2-inv__bname { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label-sm); color: var(--text-strong); }
.fin2-inv__parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22ch), 1fr)); gap: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--surface-1); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); }
.fin2-inv__parties > div { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fin2-inv__parties b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); overflow-wrap: anywhere; }
.fin2-inv__parties small { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.fin2-inv__k { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.fin2-inv__items { padding: 0; list-style: none; }
.fin2-inv__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-faint); }
.fin2-inv__item > span:first-child { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fin2-inv__item b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2-inv__item small { font-size: var(--text-xs); color: var(--text-muted); }
.fin2-inv__tots { display: flex; flex-direction: column; gap: var(--space-2); align-self: flex-end; width: 100%; max-width: min(100%, 40ch); }
.fin2-inv__tot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
.fin2-inv__tot b { font-family: var(--font-mono); font-weight: var(--fw-regular); color: var(--text-strong); white-space: nowrap; }
.fin2-inv__tot.is-strong span, .fin2-inv__tot.is-strong b { font-weight: var(--fw-bold); color: var(--text-strong); }
.fin2-inv__rule { display: block; height: 2px; margin: var(--space-1) 0; background: var(--ink-950); }
.fin2-inv__tot.is-out span { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--text-strong); }
.fin2-inv__tot.is-out b { font-size: var(--text-h4); font-weight: var(--fw-bold); }
.fin2-inv__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--border-faint); }
.fin2-inv__pay { flex: 1 1 24ch; font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }

.fin2-sbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid; border-radius: var(--radius-sm); }
.fin2-sbar--synced { background: var(--tag-success-bg); border-color: var(--tag-success-border); color: var(--tag-success-text); }
.fin2-sbar--warning { background: var(--tag-warning-bg); border-color: var(--tag-warning-border); color: var(--tag-warning-text); }
.fin2-sbar--error { background: var(--tag-danger-bg); border-color: var(--tag-danger-border); color: var(--tag-danger-text); }
.fin2-sbar--syncing { background: var(--ink-050); border-color: var(--border-default); color: var(--text-muted); }
.fin2-sbar__ic { display: inline-flex; }
.fin2-sbar__t { min-width: 0; font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: var(--lh-normal); }
.fin2-sbar__meta { margin-left: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-regular); }
.fin2-sbar__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.fin2 .fin2-sbar .vs-btn--ghost, .fin2 .fin2-sbar .vs-iconbtn { color: inherit; }

.fin2-prog { display: flex; flex-direction: column; gap: var(--space-2); }
.fin2-prog__row { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); color: var(--text-body); }
.fin2-prog__row b { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-regular); color: var(--text-muted); }
.fin2-prog__bar { height: var(--space-3); overflow: hidden; border-radius: var(--radius-pill); background: var(--ink-050); }
.fin2-prog__bar > i { display: block; height: 100%; border-radius: inherit; background: var(--ink-950); }
.fin2-prog--dark .fin2-prog__row { font-size: var(--text-xs); color: var(--text-on-dark-muted); }
.fin2-prog--dark .fin2-prog__row b { color: var(--text-on-dark); }
.fin2-prog--dark .fin2-prog__bar { background: color-mix(in srgb, var(--text-on-dark) 24%, transparent); }
.fin2-prog--dark .fin2-prog__bar > i { background: var(--text-on-dark); }

.fin2-cf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.fin2-cf__stats { display: flex; flex: 1 1 26ch; flex-direction: column; gap: var(--space-5); min-width: 0; max-width: 40ch; }
.fin2-cf__stat { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-faint); }
.fin2-cf__stat:last-child { padding-bottom: 0; border-bottom: 0; }
.fin2-cf__l { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.fin2-cf__v { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--fw-bold); color: var(--text-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin2-cf__v--net { font-size: var(--text-h2); color: var(--accent-mint); }
.fin2-cf__plot { flex: 999 1 36ch; min-width: 0; }

.fin2-aging { display: grid; grid-template-columns: minmax(0, 1fr) minmax(28ch, 36ch); align-items: start; gap: var(--space-6); }
.fin2-aging__list { min-width: 0; }
.fin2-aging__side { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; padding: var(--space-7); background: var(--surface-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.fin2-aging__total { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-faint); }
.fin2-aging__k { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.fin2-aging__tv { font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--fw-bold); color: var(--text-strong); white-space: nowrap; }
.fin2-aging__bk { display: flex; flex-direction: column; gap: var(--space-4); }
.fin2-ag { display: flex; flex-direction: column; gap: var(--space-2); }
.fin2-ag__top { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-body); }
.fin2-ag__top b { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-strong); white-space: nowrap; }
.fin2-ag__track { height: var(--space-3); overflow: hidden; border-radius: var(--radius-pill); background: var(--ink-050); }
.fin2-ag__track i { display: block; height: 100%; border-radius: inherit; background: var(--ink-950); }
/* C34: ≤30 hari tinta · 31–60 oranye · >60 danger (FM 516-548), dari kunci/label bucket, bukan urutan */
.fin2-ag--orange .fin2-ag__track i { background: var(--tag-orange-text); }
.fin2-ag--danger .fin2-ag__track i { background: var(--tag-danger-text); }

.fin2-sum { display: flex; flex-direction: column; gap: var(--space-1); max-width: 72ch; }
/* baris komposit (L5): label | (tag + nilai); kolom kanan boleh menyusut, tag turun di atas nilai saat sempit */
.fin2-sum__row { display: grid; grid-template-columns: minmax(min(100%, 12ch), 1fr) minmax(min-content, max-content); align-items: center; gap: var(--space-4); padding: var(--space-3) 0; font-size: var(--text-sm); color: var(--text-body); }
.fin2-sum__l { min-width: 0; overflow-wrap: break-word; }
.fin2-sum__l small { display: block; font-size: var(--text-xs); color: var(--text-muted); }
.fin2-sum__r { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-3); min-width: 0; }
.fin2-sum__r > * { flex: 0 1 auto; }
.fin2-sum__v { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin2-sum__row--minus { border-bottom: 1px solid var(--border-faint); }
.fin2-sum__row--minus .fin2-sum__v { color: var(--tag-danger-text); }
.fin2-sum__row--plus .fin2-sum__v { color: var(--accent-mint); }
.fin2-sum__row--sub, .fin2-sum__row--sub .fin2-sum__v { font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2-sum__row--ink { margin-top: var(--space-3); padding: var(--space-5); border-radius: var(--radius-sm); background: var(--ink-950); color: var(--text-on-dark); font-weight: var(--fw-semibold); }
.fin2-sum__row--ink .fin2-sum__v { font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--text-on-dark); }

.fin2-rc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22ch), 1fr)); gap: var(--space-3); }
.fin2-rc__opt { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--space-3); min-height: var(--field-h); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--surface-0); color: var(--text-body); text-align: left; cursor: pointer; }
.fin2-rc__opt:hover { background: var(--surface-1); }
.fin2-rc__opt[aria-checked="true"] { border-color: var(--border-strong); outline: 1px solid var(--border-strong); outline-offset: -2px; }
.fin2-rc__opt:focus-visible { box-shadow: var(--shadow-focus); }
.fin2-rc__ring { display: inline-flex; align-items: center; justify-content: center; width: var(--space-6); height: var(--space-6); border: 2px solid var(--text-subtle); border-radius: var(--radius-pill); }
.fin2-rc__ring > span { width: var(--space-3); height: var(--space-3); border-radius: var(--radius-pill); }
.fin2-rc__opt[aria-checked="true"] .fin2-rc__ring { border-color: var(--ink-950); }
.fin2-rc__opt[aria-checked="true"] .fin2-rc__ring > span { background: var(--ink-950); }
.fin2-rc__ic { display: inline-flex; color: var(--text-muted); }
.fin2-rc__txt { display: flex; flex-direction: column; min-width: 0; }
.fin2-rc__l { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2-rc__d { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }

.fin2-skelwrap { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.fin2-skel { display: block; 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%; }
.fin2-skel__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
.fin2-skel--ic { width: var(--field-h-sm); height: var(--field-h-sm); border-radius: var(--radius-sm); }
.fin2-skel__lines { display: flex; flex-direction: column; gap: var(--space-3); }
.fin2-skel--l1 { width: 52%; height: var(--space-4); }
.fin2-skel--l2 { width: 34%; height: var(--space-3); }
.fin2-skel--amt { width: 12ch; height: var(--space-4); }
.fin2-skel--title { width: 48%; height: var(--space-6); }
.fin2-skel__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18ch), 1fr)); gap: var(--space-3); }
.fin2-skel--tile { height: calc(var(--space-12) + var(--space-3)); border-radius: var(--radius-sm); }
.fin2-skel--chart { height: calc(var(--space-14) * 2); border-radius: var(--radius-md); }
.fin2-skel__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 32ch), 1fr)); gap: var(--space-4); }
.fin2-skel--card { height: var(--space-14); border-radius: var(--radius-md); }
.fin2-skel__kv { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-4); }

/* ---------- grafik §4.8 ---------- */
.fin2-ch { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.fin2-ch__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.fin2-ch__lgs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fin2-ch__lg { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--fin2-ctl-h); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-body); font-size: var(--text-xs); cursor: pointer; }
.fin2-ch__lg:hover { background: var(--surface-1); }
.fin2-ch__lg--static { cursor: default; }
.fin2-ch__lg--static:hover { background: transparent; }
.fin2-ch__lg[aria-disabled="true"] { cursor: not-allowed; }
.fin2-ch__lg:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.fin2-ch__lg[aria-pressed="false"] { color: var(--text-muted); text-decoration: line-through; }
.fin2-ch__lg[aria-pressed="false"] .fin2-ch__sw { opacity: .4; }
.fin2-ch__sw { display: inline-block; flex: 0 0 auto; width: var(--space-4); height: var(--space-4); margin-right: var(--space-2); border-radius: var(--radius-xs); background: var(--ink-950); vertical-align: middle; }
.fin2-ch__sw--out, .fin2-ch__sw--muted { background: var(--ink-400); }
.fin2-ch__sw--dash { height: 2px; background: repeating-linear-gradient(90deg, var(--ink-400) 0 var(--space-1), transparent var(--space-1) var(--space-2)); border-radius: 0; }
.fin2-ch__live { min-height: calc(var(--text-xs) * 1.5); font-family: var(--font-body); font-variant-numeric: tabular-nums; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-ch__plot { position: relative; min-width: 0; border-radius: var(--radius-sm); }
.fin2-ch__plot:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.fin2-ch__svg { display: block; width: 100%; overflow: visible; }
.fin2-ch text { font-family: var(--font-mono); font-size: var(--text-xs); fill: var(--text-muted); }
.fin2-ch .fin2-ch__ax.is-on { fill: var(--text-strong); }
.fin2-ch .fin2-ch__loss { font-family: var(--font-body); fill: var(--tag-danger-text); font-weight: var(--fw-semibold); }
.fin2-ch .fin2-ch__xl--w, .fin2-ch__tipt--w { font-family: var(--font-body); }   /* label kategori kata (brand, nama) — bukan tanggal/angka */
.fin2-ch__grid { stroke: var(--border-faint); stroke-width: 1; }
.fin2-ch__zero { stroke: var(--border-strong); stroke-width: 1; }
.fin2-ch__in, .fin2-ch__ink { fill: var(--ink-950); }
.fin2-ch__out, .fin2-ch__muted { fill: var(--ink-400); }
.fin2-ch__bar.is-hot { fill: var(--brand); stroke: var(--brand-line); stroke-width: 1; }
.fin2-ch__line, .fin2-ch__line.fin2-ch__ink, .fin2-ch__line.fin2-ch__in { fill: none; stroke: var(--ink-950); stroke-width: 2.2; stroke-linecap: round; }
.fin2-ch__line.fin2-ch__muted, .fin2-ch__line.fin2-ch__out { fill: none; stroke: var(--ink-400); }
.fin2-ch__line.is-dash { stroke-width: 1.5; stroke-dasharray: 4 5; }
.fin2-ch__area { fill: color-mix(in srgb, var(--ink-950) 8%, transparent); }
.fin2-ch__cross { stroke: var(--ink-950); stroke-width: 1; stroke-dasharray: 3 4; opacity: .45; }
.fin2-ch__dot { fill: var(--surface-0); stroke: var(--ink-400); stroke-width: 1.5; }
.fin2-ch__dot.is-hot { fill: var(--brand); stroke: var(--ink-950); stroke-width: 2; }
.fin2-ch__hit { fill: transparent; cursor: pointer; }
.fin2-ch__tip { position: absolute; z-index: 5; min-width: min(20ch, 100%); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--ink-950); color: var(--text-on-dark); box-shadow: var(--shadow-pop); pointer-events: none; }
.fin2-ch__tipt { margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-on-dark-muted); }
.fin2-ch__tipr { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-xs); white-space: nowrap; }
.fin2-ch__tipr b { font-family: var(--font-mono); font-weight: var(--fw-semibold); }
.fin2-ch__tip .fin2-ch__sw--in, .fin2-ch__tip .fin2-ch__sw--ink { background: var(--vs-yellow); }
.fin2-ch__table { overflow-x: auto; }
.fin2-ch__tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.fin2-ch__tbl th, .fin2-ch__tbl td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-faint); text-align: left; }
.fin2-ch__tbl thead th { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.fin2-ch__tbl tbody th { font-weight: var(--fw-medium); color: var(--text-strong); }
.fin2-ch__tbl [data-align="end"] { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin2-hb { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-2) 0; }
.fin2-hb__row { display: grid; grid-template-columns: minmax(10ch, 18ch) minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); cursor: pointer; }
.fin2-hb__l { overflow: hidden; font-size: var(--text-sm); color: var(--text-body); text-overflow: ellipsis; white-space: nowrap; }
.fin2-hb__row.is-on .fin2-hb__l { font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2-hb__t { height: var(--space-6); overflow: hidden; border-radius: var(--radius-xs); background: var(--ink-050); }
.fin2-hb__f { display: block; height: 100%; border-radius: inherit; background: var(--ink-950); }
.fin2-hb__f.is-hot { background: var(--brand); }
.fin2-hb__v { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-strong); white-space: nowrap; }
.fin2-ch--donut { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-8); }
.fin2-ch--donut > .fin2-ch__tools, .fin2-ch--donut > .fin2-ch__live, .fin2-ch--donut > .fin2-ch__table { flex: 1 1 100%; }
.fin2-ch--donut > .fin2-ch__plot { flex: 0 0 auto; width: min(168px, 100%); }
.fin2-ch--donut .fin2-ch__svg { height: auto; }
.fin2-dn__track { fill: none; stroke: var(--surface-0); stroke-width: 22; }   /* F60: celah antar-segmen = warna kartu (pemisah 2px) */
.fin2-dn__edge { fill: none; stroke: var(--ink-500); stroke-width: 24; pointer-events: none; }   /* F60: tepi 1px --ink-500 (4,1:1) untuk segmen --ink-400/--ink-100 yang <3:1 terhadap kartu */
.fin2-dn__seg { fill: none; stroke-width: 22; cursor: pointer; }
.fin2-dn__seg--0 { stroke: var(--ink-950); }
.fin2-dn__seg--1 { stroke: var(--ink-700); }
.fin2-dn__seg--2 { stroke: var(--ink-500); }
.fin2-dn__seg--3 { stroke: var(--ink-400); }
.fin2-dn__seg--4 { stroke: var(--ink-100); }
.fin2-dn__seg.is-hot { stroke: var(--brand); stroke-width: 28; }
.fin2-ch .fin2-dn__v { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--fw-bold); fill: var(--text-strong); }
.fin2-ch .fin2-dn__k { font-family: var(--font-body); font-size: var(--text-xs); fill: var(--text-muted); }
.fin2-ch .fin2-dn__k--n { font-family: var(--font-mono); }
.fin2-dl { display: flex; flex: 1 1 28ch; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fin2-dl__r { display: grid; grid-template-columns: auto minmax(0, auto) minmax(var(--space-4), 1fr) auto auto; align-items: center; gap: var(--space-3); min-height: var(--fin2-ctl-h); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-body); font-size: var(--text-sm); text-align: left; cursor: pointer; }
.fin2-dl__r:hover, .fin2-dl__r.is-on { background: var(--surface-1); }
.fin2-dl__r:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.fin2-dl__r .fin2-ch__sw { margin-right: 0; }
.fin2-dl__l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin2-dl__lead { height: 1px; border-bottom: 1px dotted var(--border-default); }
.fin2-dl__p { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.fin2-dl__v { min-width: 9ch; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-strong); text-align: right; }
.fin2-dn__sw--0 { background: var(--ink-950); }
.fin2-dn__sw--1 { background: var(--ink-700); }
.fin2-dn__sw--2 { background: var(--ink-500); }
.fin2-dn__sw--3 { background: var(--ink-400); border: 1px solid var(--ink-500); }
.fin2-dn__sw--4 { background: var(--ink-100); border: 1px solid var(--ink-500); }

/* ---------- overlay §5 ---------- */
.fin2-ov { position: fixed; inset: 0; }
.fin2-ov--drawer { z-index: var(--fin2-z-drawer); }
.fin2-ov--screen { z-index: var(--fin2-z-screen); }
.fin2-ov--sheet { z-index: var(--fin2-z-sheet); }
.fin2-ov.fin2-ov--proto { z-index: var(--fin2-z-proto); }
.fin2 .vs-dialog__overlay.fin2-ov--dialog { z-index: var(--fin2-z-dialog); background: var(--fin2-scrim); }
.fin2 .vs-dialog__overlay.fin2-ov--confirm { z-index: var(--fin2-z-confirm); }
.fin2-ov__scrim { position: absolute; inset: 0; background: var(--fin2-scrim); backdrop-filter: blur(calc(var(--space-1) + 1px)); }
.fin2-drawer { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(440px, 92vw); height: 100dvh; background: var(--surface-0); box-shadow: var(--shadow-pop); }
.fin2-drawer--wide { width: min(640px, 94vw); }
.fin2-fullscreen { position: absolute; inset: 0; display: flex; flex-direction: column; height: 100dvh; background: var(--surface-0); }
.fin2-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.fin2-panel--idle { align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-8) var(--space-7); background: var(--surface-1); border-style: dashed; box-shadow: none; text-align: center; }
.fin2-panel__t { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--text-strong); }
.fin2-panel__b { max-width: 40ch; font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-muted); }

.fin2-detail { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100%; }
.fin2-detail__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-faint); }
.fin2-detail--screen .fin2-detail__head { grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: var(--space-2); padding-top: calc(var(--space-3) + env(safe-area-inset-top)); }
.fin2-detail__lead { display: flex; }
.fin2-detail--screen .fin2-detail__lead { grid-column: 1; grid-row: 1; margin-left: calc(var(--space-3) * -1); }
.fin2-detail--screen .fin2-detail__tools { grid-column: 2; grid-row: 1; }
.fin2-detail--screen .fin2-detail__titles { grid-column: 1 / -1; grid-row: 2; }
.fin2-detail__titles { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fin2-detail__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-detail__title { font-size: var(--text-h4); line-height: var(--lh-snug); color: var(--text-strong); overflow-wrap: anywhere; }
.fin2-detail__code { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--text-muted); }
.fin2-detail__desc { font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-detail__tools { display: flex; align-items: center; gap: var(--space-1); }
.fin2-detail__pos { padding: 0 var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.fin2-detail__banner { padding: var(--space-3) var(--space-5) 0; }
.fin2-detail__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--space-5); min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--space-5); }
.fin2-detail__body > .fin2-state--loading { margin: calc(var(--space-5) * -1); }
.fin2-detail__sec { display: flex; flex-direction: column; gap: var(--space-3); }
.fin2-detail__h { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-semibold); letter-spacing: var(--ls-normal); color: var(--text-strong); }
.fin2-detail__sub { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-detail__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: var(--surface-0); border-top: 1px solid var(--border-default); }
.fin2-detail__p { display: flex; flex-wrap: wrap; min-width: 0; }
.fin2-detail__p .vs-btn { width: 100%; }
.fin2-detail__s { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.fin2-detail--drawer .fin2-detail__foot { background: var(--surface-1); }
.fin2-detail--screen .fin2-detail__foot { padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); }
:root[data-fin2-w="mini"] .fin2-detail__foot { grid-template-columns: minmax(0, 1fr); }
:root[data-fin2-w="mini"] .fin2-detail__s { justify-content: stretch; }
:root[data-fin2-w="mini"] .fin2-detail__s > * { flex: 1 1 auto; }

.fin2 .vs-dialog { max-width: min(480px, 92vw); max-height: calc(100dvh - var(--space-9)); }
.fin2 .vs-dialog--sm { max-width: min(380px, 92vw); }
.fin2 .vs-dialog--lg { max-width: min(640px, 92vw); }
.fin2 .fin2-dialog--xl { max-width: min(900px, 94vw); }
.fin2 .vs-dialog__head { align-items: flex-start; }
.fin2-dialog__x { flex: 0 0 auto; margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0 0; }
.fin2 .vs-dialog__body { display: flex; flex-direction: column; gap: var(--space-5); font-size: var(--text-sm); }
.fin2 .vs-dialog__foot { flex-wrap: wrap; padding: var(--space-4) var(--space-6); background: var(--surface-1); border-top: 1px solid var(--border-faint); }
/* C1: label panjang (nominal) turun baris di dalam tombol, tombol tidak pernah keluar kotak dialog */
.fin2 .vs-dialog__foot > .vs-btn { flex: 0 1 auto; min-width: 0; max-width: 100%; height: auto; min-height: var(--_h); padding-block: var(--space-2); white-space: normal; line-height: var(--lh-snug); text-align: center; }
.fin2 .fin2-dialog--confirm .vs-dialog__body { padding: var(--space-6) var(--space-6) var(--space-2); }
.fin2 .fin2-dialog--confirm .vs-dialog__foot { padding-top: var(--space-4); background: transparent; border-top: 0; }
.fin2 .fin2-dialog--lightbox .vs-dialog__body { padding: var(--space-5); background: var(--bg-ink); }
.fin2-lightbox { margin: 0; }
.fin2-lightbox img { width: 100%; max-height: 70dvh; object-fit: contain; }
.fin2-lightbox__cap { margin-top: var(--space-3); font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-on-dark-muted); }
.fin2-confirm { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); }
.fin2-confirm__disc { display: inline-flex; align-items: center; justify-content: center; width: var(--space-9); height: var(--space-9); border-radius: var(--radius-pill); background: var(--ink-050); color: var(--text-strong); }
.fin2-confirm__disc--danger { background: var(--tag-danger-bg); color: var(--tag-danger-text); }
.fin2-confirm__disc--unsaved { background: var(--tag-warning-bg); color: var(--tag-warning-text); }
.fin2-confirm__txt { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.fin2-confirm__t { font-size: var(--text-md); line-height: var(--lh-snug); color: var(--text-strong); }
.fin2-confirm__b { font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-confirm__b b { font-weight: var(--fw-bold); color: var(--text-strong); }
.fin2-confirm__note { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }

.fin2-sheet { position: absolute; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: min(560px, 92vw); max-height: 88dvh; margin: 0 auto; background: var(--surface-0); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-pop); }
.fin2-sheet__grab { flex: 0 0 auto; width: var(--space-9); height: var(--space-2); margin: var(--space-3) auto 0; border-radius: var(--radius-pill); background: var(--border-default); }
.fin2-sheet__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-6); }
.fin2-sheet__title { font-size: var(--text-h4); color: var(--text-strong); }
.fin2-sheet__desc { padding: 0 var(--space-6) var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.fin2-sheet__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--space-5); min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 var(--space-6) var(--space-5); }
.fin2-sheet__foot { padding: var(--space-3) var(--space-6) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--surface-0); border-top: 1px solid var(--border-default); }
.fin2-sheet__foot2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); }
.fin2-fsheet { display: flex; flex-direction: column; gap: var(--space-5); }
.fin2-fs { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; border: 0; }
.fin2-fs__lg { padding: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2-fs__range { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16ch), 1fr)); gap: var(--space-3); padding-top: var(--space-3); }
.fin2-srow { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); min-height: var(--field-h); padding: 0 var(--space-2); border-bottom: 1px solid var(--border-faint); cursor: pointer; }
.fin2-srow:has(> .fin2-srow__mk--radio) { grid-template-columns: minmax(0, 1fr) auto; }
.fin2-srow:has(.fin2-srow__in:focus-visible) { border-radius: var(--radius-xs); box-shadow: var(--shadow-focus); }
.fin2-srow__in { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; }
.fin2-srow__mk { display: inline-flex; align-items: center; justify-content: center; width: var(--space-6); height: var(--space-6); border: 2px solid var(--text-subtle); border-radius: var(--radius-xs); background: var(--surface-0); color: var(--primary-contrast); }
.fin2-srow__mk--radio { display: none; }
.fin2-srow__mk svg { opacity: 0; }
.fin2-srow__in:checked + .fin2-srow__mk { background: var(--ink-950); border-color: var(--ink-950); }
.fin2-srow__in:checked + .fin2-srow__mk svg { opacity: 1; }
.fin2-srow__l { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; font-size: var(--text-md); color: var(--text-body); }
.fin2-srow__in:checked ~ .fin2-srow__l { font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2-srow__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.fin2-srow__ck { display: inline-flex; color: var(--text-strong); opacity: 0; }
.fin2-srow__in:checked ~ .fin2-srow__ck { opacity: 1; }
.fin2-asheet { display: flex; flex-direction: column; gap: var(--space-3); }
.fin2-asheet__grp { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.fin2-asheet__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-4); min-height: var(--field-h-lg); padding: 0 var(--space-5); border: 0; border-bottom: 1px solid var(--border-faint); background: var(--surface-0); color: var(--text-strong); font-size: var(--text-md); font-weight: var(--fw-medium); text-align: left; cursor: pointer; }
.fin2-asheet__row:last-child { border-bottom: 0; }
.fin2-asheet__row:focus-visible { outline: none; background: var(--surface-1); box-shadow: inset 0 0 0 var(--space-2) var(--focus-ring); }
.fin2-asheet__row--danger { color: var(--tag-danger-text); }
.fin2-asheet__row[aria-disabled="true"] { color: var(--text-muted); cursor: not-allowed; }
.fin2-asheet__ic { display: inline-flex; }
.fin2-asheet__r { display: block; font-size: var(--text-xs); color: var(--text-muted); }
.fin2-asheet__cancel { min-height: var(--field-h-lg); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-0); color: var(--text-strong); font-size: var(--text-md); font-weight: var(--fw-bold); cursor: pointer; }
.fin2-moresheet { display: flex; flex-direction: column; gap: var(--space-5); }
.fin2-moresheet__grp { display: flex; flex-direction: column; }
.fin2-moresheet__l { padding-bottom: var(--space-2); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-normal); color: var(--text-muted); }
.fin2-moresheet__it { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); min-height: var(--field-h); padding: 0 var(--space-2); border-bottom: 1px solid var(--border-faint); font-size: var(--text-md); color: var(--text-body); }
.fin2-moresheet__it > span { display: inline-flex; min-width: 0; }
.fin2-moresheet__it[aria-current="page"] { background: var(--surface-1); color: var(--text-strong); font-weight: var(--fw-semibold); }
.fin2-moresheet__ic { color: var(--text-muted); }

.fin2-toasts { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: var(--fin2-z-toast); display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); pointer-events: none; }
.fin2-toast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-4); width: min(360px, 92vw); padding: var(--space-4); border-radius: var(--radius-sm); background: var(--ink-950); color: var(--text-on-dark); box-shadow: var(--shadow-pop); pointer-events: auto; }
.fin2-toast__ic { display: inline-flex; padding-top: var(--space-1); }
.fin2-toast--success .fin2-toast__ic { color: var(--accent-mint); }
.fin2-toast--info .fin2-toast__ic { color: var(--accent-blue); }
.fin2-toast--danger .fin2-toast__ic { color: var(--accent-red); }
.fin2-toast__txt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; }
.fin2-toast__t { font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.fin2-toast__b { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-on-dark-muted); overflow-wrap: anywhere; }
.fin2-toast__act { min-height: var(--fin2-ctl-h); margin-left: calc(var(--space-2) * -1); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-on-dark); font-size: var(--text-xs); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fin2-toast__x { display: inline-flex; align-items: center; justify-content: center; width: var(--fin2-ctl-h); height: var(--fin2-ctl-h); margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0 0; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-on-dark-muted); cursor: pointer; }
.fin2-toast__x:hover { color: var(--text-on-dark); }
.fin2-toast :focus-visible { outline: none; box-shadow: var(--shadow-focus-brand); }
:root:not([data-fin2-w="lebar"]) .fin2-toasts { right: var(--space-4); left: var(--space-4); bottom: calc(var(--fin2-mnav-h, var(--fin2-0)) + var(--fin2-ab-h, var(--fin2-0)) + var(--space-3)); align-items: stretch; }
:root:not([data-fin2-w="lebar"]) .fin2-toast { width: auto; }

/* C14: alasan kontrol nonaktif tampil sebagai teks di bawah kontrol di kaki detail/dialog/sheet dan action bar (sentuh/kompak) */
:root[data-fin2-touch="true"] .fin2 :is(.fin2-detail__foot, .vs-dialog__foot, .fin2-sheet__foot, .fin2-actionbar) .fin2-reason, :root:not([data-fin2-w="lebar"]) .fin2 :is(.fin2-detail__foot, .vs-dialog__foot, .fin2-sheet__foot, .fin2-actionbar) .fin2-reason { position: static; display: block; flex: 1 0 100%; width: auto; height: auto; margin: var(--space-1) 0 0; overflow: visible; white-space: normal; clip-path: none; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); text-align: left; }
/* C2: toast diangkat di atas kaki lapisan teratas / panel detail (--fin2-toast-lift diisi core.placeToasts) */
.fin2-toasts { margin-bottom: var(--fin2-toast-lift, var(--space-0)); }

/* ---------- state §6.1 ---------- */
.fin2-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-8) var(--space-7); background: var(--surface-0); border: 1px dashed var(--border-default); border-radius: var(--radius-md); text-align: center; }
.fin2-state__disc { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: var(--space-10); height: var(--space-10); border-radius: var(--radius-pill); background: var(--ink-050); color: var(--text-muted); }
.fin2-state__txt { display: flex; flex-direction: column; gap: var(--space-2); max-width: 48ch; }
.fin2-state__t { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--text-strong); }
.fin2-state__b { font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-state__code { font-family: var(--font-body); font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); overflow-wrap: anywhere; }   /* E7: label body, kode .fin2-mono */
.fin2-state--error .fin2-state__disc { background: var(--tag-danger-bg); color: var(--tag-danger-text); }
.fin2-state--error .fin2-state__code { color: var(--tag-danger-text); }
.fin2-state--denied .fin2-state__disc { background: var(--tag-warning-bg); color: var(--tag-warning-text); }
.fin2-state--loading { display: block; padding: 0; background: transparent; border: 0; text-align: left; }
.fin2-state--next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: var(--space-5); background: var(--surface-1); border-style: solid; border-color: var(--border-faint); text-align: left; }

/* ---------- form §5.5 + override primitive §2.10 ---------- */
.fin2-form { display: flex; flex-direction: column; gap: var(--space-5); }
.fin2-f__sec { padding-top: var(--space-2); border-top: 1px solid var(--border-faint); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2-f__sec:first-child { padding-top: 0; border-top: 0; }
.fin2-textarea { width: 100%; min-height: calc(var(--field-h) * 2); padding: var(--space-4); border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--surface-0); font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-strong); resize: vertical; }
.fin2-textarea:focus { outline: none; border-color: var(--ink-950); box-shadow: var(--shadow-focus); }
.fin2-textarea::placeholder { color: var(--text-muted); }
.fin2-textarea[aria-invalid="true"] { border-color: var(--accent-red); }
.fin2-in--rp input { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.fin2-ro { display: flex; align-items: center; min-height: var(--field-h); padding: 0 var(--space-4); background: var(--surface-1); border: 1px dashed var(--border-input); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-body); }
.fin2-checkrow, .fin2-switchrow { min-height: var(--field-h); align-items: center; }
.fin2-pick { position: relative; z-index: 1; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: var(--fin2-ctl-h); height: var(--fin2-ctl-h); border-radius: var(--radius-xs); cursor: pointer; }
.fin2-pick .vs-check { position: relative; }
.fin2-pick input:disabled + .vs-check__box { opacity: .42; }
.fin2 .vs-check__box svg { opacity: 0; }
.fin2 .vs-check input:checked + .vs-check__box svg { opacity: 1; transform: scale(1); }
.fin2 .vs-tab { min-height: var(--fin2-ctl-h); color: var(--text-muted); }
.fin2 .vs-tabs--segmented .vs-tab { min-height: var(--fin2-ctl-h); font-size: var(--text-sm); }
.fin2 .vs-tab__badge { min-width: var(--space-6); height: var(--space-6); font-size: var(--text-xs); }
.fin2 .vs-field__hint, .fin2 .vs-check__desc, .fin2 .vs-selfield__hint { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 .vs-field__hint--error, .fin2 .vs-field__req { color: var(--tag-danger-text); }
.fin2 .vs-input input::placeholder, .fin2 .vs-sel--placeholder select { color: var(--text-muted); }
.fin2 .vs-input input:focus-visible { box-shadow: none; outline: none; }
.fin2 .vs-input input { align-self: stretch; }
:root[data-fin2-touch="true"] .fin2-ov .vs-input:not(.vs-input--sm) { --_h: calc(var(--field-h) + 2px); }
.fin2 .vs-input__affix { color: var(--text-muted); }
.fin2 .vs-alert__msg, .fin2 .vs-dialog__desc { font-size: var(--text-sm); }
.fin2 .vs-tip__pop { font-size: var(--text-xs); }
.fin2 .vs-stat__label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: var(--lh-normal); letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.fin2 .vs-check__box { border-color: var(--text-subtle); }
.fin2 .vs-btn--sm { --_h: var(--fin2-ctl-h); }
/* tombol aksi berlabel panjang di alert/state/etalase ("Agustus 2026 · 2 transaksi · Rp 800.000"): label boleh turun baris
   di dalam tombol, tombol tidak pernah melebihi wadah (tinggi min tetap --_h) */
.fin2 :is(.fin2-alert__acts, .fin2-state, .fin2-kit-sec) .vs-btn { max-width: 100%; height: auto; min-height: var(--_h); padding-block: var(--space-2); white-space: normal; text-align: left; }
.fin2 :is(.fin2-alert__acts, .fin2-state, .fin2-kit-sec) .vs-btn > span:last-child { min-width: 0; overflow-wrap: break-word; }
.fin2 .vs-iconbtn--sm { --_s: var(--fin2-ctl-h); }
.fin2 .vs-input--sm { --_h: var(--fin2-ctl-h); }
.fin2 .vs-sel--sm select { height: var(--fin2-ctl-h); }
.fin2 .vs-dialog__overlay { z-index: var(--fin2-z-dialog); }
.fin2 .vs-btn[aria-disabled="true"], .fin2 .vs-iconbtn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
@media (pointer:coarse) { .fin2 input, .fin2 select, .fin2 textarea { font-size: var(--text-md); } }

/* ---------- kontrol prototype §6.4 ---------- */
.fin2-proto { display: flex; flex-direction: column; gap: var(--space-5); }
.fin2-proto__sub { font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2-proto__grp { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.fin2-proto__lg { padding: 0; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.fin2-proto__sws { display: flex; flex-direction: column; gap: var(--space-3); }
.fin2-proto__state { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.fin2-keys { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.fin2-keys th, .fin2-keys td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-faint); text-align: left; }
.fin2-keys thead th { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }

/* ---------- etalase #/finance/_kit ---------- */
.fin2-kit { display: flex; flex-direction: column; gap: var(--space-5); }
.fin2-kit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22ch), 1fr)); gap: var(--space-4); }
.fin2-kit-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 40ch), 1fr)); }
/* spesimen uang: sel muat Rp 1.250.000.000 ukuran h3 (resep §7.3 tile nominal + padding spesimen) */
.fin2-kit-grid--amt { grid-template-columns: repeat(auto-fit, minmax(min(100%, 34ch), 1fr)); }
.fin2-kit-spec { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-4); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); }
.fin2-kit-spec__l { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.fin2-kit-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.fin2-kit-row > * { flex: 0 1 auto; }
.fin2-kit-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.fin2-kit-note { font-size: var(--text-xs); color: var(--text-muted); }
.fin2-kit-ink { padding: var(--space-4); background: var(--ink-950); border-radius: var(--radius-sm); }
.fin2-kit-board { display: grid; grid-template-columns: minmax(30ch, 1fr) minmax(34ch, min(42%, 72ch)); align-items: start; gap: var(--space-5); }
.fin2-kit-board > [data-slot="panel"] { position: sticky; top: var(--space-5); display: flex; min-width: 0; max-height: calc(100dvh - var(--space-10)); }
.fin2-kit-board > [data-slot="panel"] > .fin2-panel { flex: 1 1 auto; }
.fin2-kit-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 40ch), 1fr)); gap: var(--space-4); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-faint); }
.fin2-kit-chart { min-width: 0; }
.fin2-kit-sparks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20ch), 1fr)); gap: var(--space-4); }
.fin2-kit-spark { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.fin2-kit-headspec { padding: var(--space-4); border: 1px dashed var(--border-default); border-radius: var(--radius-sm); }
.fin2-kit-narrow { display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: 24ch; padding: var(--space-3); border: 1px dashed var(--border-default); border-radius: var(--radius-sm); }

/* ---------- responsif §7.1 (desktop-first, max-width saja) ---------- */
@media (max-width:720px) {
  
  
  
  
     /* E3: + tumpukan toast menetap */
  
  .fin2-actionbar { bottom: var(--fin2-mnav-h); margin: 0 calc(var(--space-5) * -1); padding: var(--space-2) var(--space-5); }
}
@media (max-width:560px) {
  .fin2-sheet { width: 100%; }
  .fin2 .vs-dialog__overlay.fin2-ov--dialog:not(.fin2-ov--confirm) { align-items: flex-end; padding: 0; }
  .fin2 .fin2-ov--dialog:not(.fin2-ov--confirm) .vs-dialog { width: 100%; max-width: 100%; max-height: 88dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .fin2 .fin2-ov--dialog:not(.fin2-ov--confirm) .vs-dialog__foot { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
  /* C1: ≤560 kaki dialog & konfirmasi bertumpuk, lebar penuh, "Batal" (fokus awal) tetap di atas */
  .fin2 .fin2-ov--dialog .vs-dialog__foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .fin2 .fin2-ov--dialog .vs-dialog__foot > .vs-btn { width: 100%; }
  .fin2 .vs-dialog__overlay.fin2-ov--confirm { padding: var(--space-4); }
}
@container finroot (max-width:900px) {
  .fin2-nav, #fin2Body { --fin2-ctl-h: var(--field-h); }
  /* E8: baris BADAN grid ≥44 (target sentuh) */
  .fin2-grid__body > .fin2-grid__row:not(.fin2-grid__row--group):not(.fin2-grid__row--full):not(.fin2-grid__row--gfoot) { min-height: var(--field-h); }
}
@container finbody (max-width:700px) {
  .fin2-head__row { grid-template-columns: minmax(0, 1fr); }
  .fin2-head__sum .fin2-tiles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .fin2-head__sum .fin2-tile { flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); padding: var(--space-1) var(--space-3); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); background: var(--surface-1); }
  .fin2-head__sum .fin2-tile__v { font-family: var(--font-mono); font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
  .fin2-head__sum .fin2-tile__s { display: none; }
  .fin2-head__sum .fin2-tile--ink { background: var(--ink-950); border-color: var(--ink-950); }
  .fin2-head__sum .fin2-tile--ink .fin2-tile__l { color: var(--text-on-dark-muted); }
  .fin2-head__sum .fin2-tile--ink .fin2-tile__v { color: var(--text-on-dark); }
  .fin2-scope__sum { margin-left: 0; text-align: left; }
  .fin2-row, .fin2-row.has-pick { grid-template-columns: minmax(0, 1fr); }
  .fin2-row.has-pick { grid-template-columns: auto minmax(0, 1fr); }
  .fin2-row__hit, .fin2-row__body { grid-template-columns: minmax(0, 1fr); padding: var(--space-3) var(--space-4); }
  .fin2-row.has-lead > .fin2-row__hit, .fin2-row.has-lead > .fin2-row__body { grid-template-columns: auto minmax(0, 1fr); }
  .fin2-row__end { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2); text-align: left; }
  .fin2-row.has-lead .fin2-row__end { grid-column: 2; }
  .fin2-row__acts { grid-column: 1 / -1; padding: 0 var(--space-4) var(--space-3); justify-content: flex-start; }
  .fin2-row.has-lead .fin2-row__acts { padding-left: calc(var(--field-h-sm) + var(--space-4) * 2); }
  .fin2-row.has-pick .fin2-row__acts { grid-column: 2; padding-left: var(--space-4); }
  .fin2-row__acts > * { flex: 1 1 auto; }
  .fin2-group__head { grid-template-columns: minmax(0, 1fr); }
  .fin2-group__r { text-align: left; }
  .fin2-aging { grid-template-columns: minmax(0, 1fr); }
  .fin2-cf__stats { max-width: none; }
  .fin2-kit-board { grid-template-columns: minmax(0, 1fr); }
  .fin2-kit-board > [data-slot="panel"] { display: none; }
  .fin2-steps { padding-bottom: var(--space-1); }
}
@container finbody (max-width:480px) {
  .fin2-card__head { padding: var(--space-4); }
  /* E1 [ORK] ruang layar ponsel: (a) meta hitungan kartu sr-only (tetap aria-live; angka sudah di chip) */
  .fin2-card__meta--count { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; clip-path: inset(50%); }
  /* (b) label grup view sekunder di baris sendiri DI ATAS chip; chip wrap selebar kartu */
  .fin2-viewbar--quiet { flex: 1 1 100%; }
  /* (c) antar-baris chip --space-2, tinggi chip tetap --fin2-ctl-h (≥44 sentuh) */
  .fin2-tb-views { row-gap: var(--space-2); }
  .fin2-viewbar, .fin2-viewbar__list, .fin2-viewbar--quiet { gap: var(--space-2); }
  /* owner 23 Sep: chip view jadi grid 2 kolom sama lebar (hemat ruang, rapi); label kiri, hitungan kanan */
  .fin2-viewbar { flex: 1 1 100%; }
  .fin2-viewbar__list, .fin2-viewbar--quiet > .fin2-viewbar__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16ch), 1fr)); width: 100%; }
  .fin2-viewbar__list > .fin2-chip { justify-content: space-between; width: 100%; padding: var(--space-1) var(--space-3); white-space: normal; text-align: left; }
  .fin2-viewbar__list > .fin2-chip .fin2-chip__l { overflow: visible; text-overflow: clip; overflow-wrap: normal; }   /* label penuh, boleh 2 baris di dalam tinggi chip yang sama */
  .fin2-viewbar--quiet { align-items: stretch; }
  /* (d) meta kepala (badge Akses + Panduan) satu baris rapat: area ketuk Panduan tetap 44, tinggi baris = tinggi badge */
  .fin2-head__meta { gap: calc(var(--fin2-ctl-h) - var(--space-7)) var(--space-3); margin-top: var(--space-2); }   /* bila membungkus: jarak baris = kelebihan area ketuk, tidak menumpuk */
  .fin2-head__meta > .fin2-linkbtn { margin-block: calc((var(--space-7) - var(--fin2-ctl-h)) / 2); }
  .fin2-tile--mini-hide { display: none; }
  .fin2-tb-views, .fin2-tb-tags { padding-inline: var(--space-4); }
  .fin2-tb-row { padding-inline: var(--space-4); }
  .fin2-tb-row { flex-wrap: nowrap; }
  .fin2-tb-row > .fin2-search { flex: 1 1 0; min-width: 0; }
  .fin2-tb-row > .fin2-tb-filterbtn { flex: 0 0 auto; }
  .fin2-head__desc { display: none; }
  .fin2-card__pad { padding-inline: var(--space-4); }
  .fin2-pager { grid-template-columns: minmax(0, 1fr); padding-inline: var(--space-4); }
  .fin2-pager__ctl { justify-content: space-between; }
  .fin2-bulk { margin-inline: var(--space-4); }
  .fin2-bulk__mid { order: 3; flex-basis: 100%; }
  /* SPEC §7.1 bulk 2 baris: (1) hitungan + jumlah + Batalkan (ikon x 44), (2) aksi primer lebar penuh.
     "Pilih semua N hasil" sudah ada di kepala daftar → tidak diulang di bulk (tetap tampil bila kepala daftar tidak punya) */
  .fin2-bulk__n { order: 1; flex: 1 1 0; min-width: 0; }
  .fin2-bulk__mid { order: 2; flex: 0 0 auto; flex-basis: auto; }
  .fin2-bulk__acts { order: 3; flex: 1 1 100%; margin-left: 0; }
  .fin2-bulk__acts > * { flex: 1 1 auto; }
  .fin2-bulk__btn--clear { justify-content: center; width: var(--field-h); min-width: var(--field-h); padding: 0; }
  .fin2-bulk__btn--clear .fin2-bulk__ic { display: inline-flex; }
  .fin2-bulk__btn--clear .fin2-bulk__cl { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; clip-path: inset(50%); }
  #fin2Body:has(.fin2-list__head [data-act="fin2:selall"]) .fin2-bulk__btn--selall { display: none; }
  #fin2Body:not(:has(.fin2-list__head [data-act="fin2:selall"])) .fin2-bulk__mid:has(.fin2-bulk__btn--selall) { flex: 1 1 100%; }
  .fin2-list__head > .fin2-linkbtn { grid-column: 2 / -1; justify-self: start; }   /* "Pilih semua N hasil" turun baris sendiri (label tidak terjepit) */
  .fin2-tiles { grid-template-columns: minmax(0, 1fr); }
  .fin2-kv__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .fin2-kv dd .vs-iconbtn { margin-block: 0 calc(var(--space-3) * -1); }   /* bertumpuk: target 44 tidak naik menutupi label dt */
  .fin2-grid--card [data-card="kv"] { flex-direction: column; align-items: flex-start; text-align: left; }
  .fin2-kpi, .fin2-inv, .fin2-aging__side { padding: var(--space-5); }
  .fin2-att__item { grid-template-columns: auto minmax(0, 1fr); }
  .fin2-att__item > .fin2-att__size, .fin2-att__item > .vs-btn, .fin2-att__item > .fin2-att__note { grid-column: 2; justify-self: start; }
  .fin2-sbar { grid-template-columns: auto minmax(0, 1fr); }
  .fin2-sbar__acts { grid-column: 1 / -1; justify-content: flex-start; }
  .fin2-state--next { grid-template-columns: auto minmax(0, 1fr); }
  .fin2-state--next > .vs-btn { grid-column: 1 / -1; }
  .fin2-step__l--rest { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; clip-path: inset(50%); }
  .fin2-hb__row { grid-template-columns: minmax(0, 1fr) auto; }
  .fin2-hb__t { grid-column: 1 / -1; grid-row: 2; }
  .fin2-dl__r { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .fin2-dl__lead { display: none; }
}
:root[data-fin2-w="mini"] .fin2-ov .fin2-kv__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
:root[data-fin2-w="mini"] .fin2-ov .fin2-kv dd .vs-iconbtn { margin-block: 0 calc(var(--space-3) * -1); }
:root[data-fin2-w="mini"] .fin2-ov .fin2-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(14ch, var(--fin2-tile-need, 14ch))), 1fr)); }   /* E5: minimum kolom = nilai terpanjang (core.fitTiles) */
:root[data-fin2-w="mini"] .fin2-ov .fin2-tile--mini-hide { display: none; }
:root[data-fin2-w="mini"] .fin2-ov .fin2-step__l--rest { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; clip-path: inset(50%); }

/* ---------- gerak L8 / MOTION 1 ---------- */
@media (prefers-reduced-motion:no-preference) {
  .fin2-chip, .fin2-drop__btn, .fin2-tb-filterbtn, .fin2-opt, .fin2-mi, .fin2-row, .fin2-grid__row, .fin2-pg, .fin2-linkbtn, .fin2-bulk__btn, .fin2-vsw > button, .fin2-ch__lg, .fin2-dl__r, .fin2-rc__opt, .fin2-moremenu__it, .fin2-search, .fin2-tb-row, .fin2-up__zone { transition: color .12s ease, background-color .12s ease, border-color .12s ease, box-shadow .16s ease; }
  .fin2-ch__bar, .fin2-dn__seg { transition: fill .12s ease, stroke .12s ease, stroke-width .14s ease; }
  .fin2-prog__bar > i { transition: width .3s ease; }
  .fin2-skel { animation: fin2-shimmer 1.4s ease infinite; }
  .fin2-drawer { animation: fin2-slide .22s var(--fin2-ease); }
  .fin2-sheet, .fin2-fullscreen { animation: fin2-rise .22s var(--fin2-ease); }
  .fin2-ov__scrim { animation: fin2-fade .22s ease; }
  .fin2-toast { animation: fin2-rise .16s var(--fin2-ease); }
}
@media (prefers-reduced-motion:reduce) {
  :root:root .fin2 *, :root:root .fin2 *::before, :root:root .fin2 *::after { transition: none; animation-duration: 0s; animation-iteration-count: 1; }
}
@keyframes fin2-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes fin2-slide { from { opacity: 0; transform: translateX(var(--space-5)); } }
@keyframes fin2-rise { from { opacity: 0; transform: translateY(var(--space-5)); } }
@keyframes fin2-fade { from { opacity: 0; } }

/* ---------- F60 · indikator fokus ≥3:1 (WCAG 2.4.7 / 1.4.11) ----------
   Cincin DS --shadow-focus (tinta 14%) hanya ±1,37:1 dan kalah spesifisitas oleh bayangan tab segmented/vsw yang
   tertekan. Override terlingkup §2.10: garis 2px --border-strong (tinta) berjarak 2px di luar kontrol. Di permukaan tinta
   (bulk, toast, item aktif sidebar/mnav, tab kompak terpilih) garis --brand (kuning DS --focus-ring-brand, ±17:1 thd tinta).
   Di wadah yang memotong (strip tab, sub-nav segmented, mnav, sidebar, menu/opsi, wadah grid) garis masuk ke dalam (−2px).
   Awalan :is(.fin2-app, #fin2Layers, #fin2Toasts) ber-ID agar `outline:none` lama (primitive, layar) tidak menang. */
:is(.fin2-root[data-fin2-production], .fin2-layer-root, #fin2Toasts) :focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; }
:is(.fin2-root[data-fin2-production], .fin2-layer-root, #fin2Toasts) :is(h1, h2, h3, h4)[tabindex="-1"]:focus-visible, :is(.fin2-root[data-fin2-production], .fin2-layer-root, #fin2Toasts) :is([role="dialog"], [role="alertdialog"], .fin2-drawer, .fin2-sheet, .fin2-fullscreen)[tabindex="-1"]:focus-visible { outline: none; }
/* isian teks: wadah (vs-input, vs-sel, fin2-search, textarea) sudah berganti border --ink-950 saat fokus (≥3:1) */
:is(.fin2-root[data-fin2-production], .fin2-layer-root, #fin2Toasts) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, textarea):focus-visible { outline: none; }
/* kontrol tersembunyi → cincin di kotak tampaknya */
:is(.fin2-root[data-fin2-production], .fin2-layer-root, #fin2Toasts) :is(.vs-check input, .vs-switch input, .fin2-srow__in):focus-visible { outline: none; }
:is(.fin2-root[data-fin2-production], .fin2-layer-root, #fin2Toasts) .vs-check input:focus-visible + .vs-check__box, :is(.fin2-root[data-fin2-production], .fin2-layer-root, #fin2Toasts) .vs-switch input:focus-visible + .vs-switch__track { outline: 2px solid var(--border-strong); outline-offset: 2px; }
:is(.fin2-root[data-fin2-production], .fin2-layer-root, #fin2Toasts) .fin2-srow:has(.fin2-srow__in:focus-visible) { outline: 2px solid var(--border-strong); outline-offset: -2px; }
/* baris & tautan baris: cincin inset 1px tinta yang sudah ada (≥ keliling) tetap dipakai */
:is(.fin2-root[data-fin2-production], .fin2-layer-root, #fin2Toasts) :is(.fin2-row__hit, .fin2-rowlink):focus-visible { outline: none; }
:is(.fin2-root[data-fin2-production], .fin2-layer-root, #fin2Toasts) .fin2-row__hit:focus-visible, :is(.fin2-root[data-fin2-production], .fin2-layer-root, #fin2Toasts) .fin2-rowlink:focus-visible::after { box-shadow: inset 0 0 0 2px var(--border-strong), inset 0 0 0 var(--space-2) var(--surface-0); }   /* baris: inset 2px tinta + 2px putih (terlihat juga di baris terpilih ber-fill tinta) */
/* di dalam wadah yang memotong: garis ke dalam */

/* kontrol nonaktif-terfokus (aria-disabled, opacity .42/.5): garis ikut pudar → saat fokus opacity .72 (tetap tampak nonaktif, garis ≥3:1) */
:is(.fin2-root[data-fin2-production], .fin2-layer-root, #fin2Toasts) :is(.vs-btn, .vs-iconbtn, .fin2-bulk__btn, .fin2-mp__m)[aria-disabled="true"]:focus-visible { opacity: .72; }
/* permukaan tinta: garis kuning */
:is(.fin2-root[data-fin2-production], .fin2-layer-root, #fin2Toasts) :is(.fin2-bulk, .fin2-toast) :focus-visible, :root:not([data-fin2-w="lebar"]) :is(.fin2-root[data-fin2-production], .fin2-layer-root) .fin2-nav .vs-tab[aria-selected="true"]:focus-visible { outline-color: var(--brand); }   /* garis di dalam fill tinta; "Lainnya" aktif memakai garis tinta di luar */

/* ---------- WCAG 2.4.11 · fokus tidak tertutup bar lengket/fixed ----------
   Gulir-ke-fokus memberi ruang atas = toolbar lengket (+ bulk lengket di lebar), bawah = mnav + action bar. */
.fin2 { scroll-padding-top: calc(var(--fin2-stick-h, calc(var(--fin2-ctl-h) + var(--space-5))) + var(--space-3)); scroll-padding-bottom: calc(var(--fin2-mnav-h, var(--fin2-0)) + var(--fin2-ab-h, var(--fin2-0)) + var(--space-4)); }

/* atribut hidden selalu menang atas display komponen */
.fin2 [hidden] { display: none; }

/* == screen:permintaan == */
/* finance-v2 · css/screens/permintaan.css · komposisi layar Konfirmasi Dana (SPEC §10.1).
   Setiap selektor diawali [data-screen="permintaan"]; kelas baru berawalan fin2-permintaan-.
   Token-only; query hanya container finbody (SPEC §7.1, §8.8). */

/* ---------- papan daftar | panel (§7.3, [TANPA UNIT] as-built fdqFitBoard) ---------- */
.fin2 [data-screen="permintaan"] .fin2-permintaan-board { display: grid; grid-template-columns: minmax(30ch, 1fr) minmax(34ch, min(42%, 72ch)); align-items: start; gap: var(--space-5); min-width: 0; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-board.is-empty { grid-template-columns: minmax(0, 1fr); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-board > * { min-width: 0; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-board > [data-slot="panel"] { position: sticky; top: var(--space-5); display: flex; max-height: calc(100dvh - var(--space-10)); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-board > [data-slot="panel"] > .fin2-panel { flex: 1 1 auto; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-board > [data-slot="panel"] > .fin2-panel--idle { flex: 0 1 auto; width: 100%; }

/* papan setinggi viewport: kartu antrean dan panel bergulir sendiri; baris kontrol lengket di dalam kartu (§3.7) */
.fin2 [data-screen="permintaan"] .fin2-permintaan-board.is-board { height: var(--fin2-board-h); align-items: stretch; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-board.is-board > .fin2-permintaan-queue { min-height: 0; overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-board.is-board > [data-slot="panel"] { max-height: none; min-height: 0; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-board.is-board > [data-slot="panel"][data-open="false"] { align-self: start; }

/* kaki panel: primer kuning baris penuh, sekunder + "Aksi lain" di baris kedua (lebar panel ±42%) */
.fin2 [data-screen="permintaan"] .fin2-panel .fin2-detail__foot { grid-template-columns: minmax(0, 1fr); }
.fin2 [data-screen="permintaan"] .fin2-panel .fin2-detail__s { justify-content: stretch; }
.fin2 [data-screen="permintaan"] .fin2-panel .fin2-detail__s > * { flex: 1 1 auto; }

/* label keputusan memuat nominal ("Konfirmasi Rp 1.250.000.000 diterima"): boleh turun baris di dalam tombol,
   tidak pernah meluap dari tombol (R14); "Rp" dan angka dirangkai spasi tak-putus di JS */
.fin2 [data-screen="permintaan"] .fin2-detail__prim { height: auto; min-height: var(--_h); padding-block: var(--space-2); white-space: normal; line-height: var(--lh-snug); text-align: center; }
.fin2 [data-screen="permintaan"] .fin2-detail__prim > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* skeleton muat pertama meniru papan */
.fin2 [data-screen="permintaan"] .fin2-permintaan-skel { padding: var(--space-5); }

/* ---------- baris antrean ---------- */
.fin2 [data-screen="permintaan"] .fin2-permintaan-invalid { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--tag-danger-text); white-space: nowrap; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-queue .fin2-row__end .fin2-amt, .fin2 [data-screen="permintaan"] .fin2-permintaan-queue .fin2-permintaan-r1 .fin2-amt { font-weight: var(--fw-bold); }
/* kompak (≤3 baris teks, pola GUI/F3/APPROVAL): 1) pembayar | nominal (grid, L5) · 2) subline satu baris elipsis · 3) tag */
.fin2 [data-screen="permintaan"] .fin2-permintaan-r1 { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-3); min-width: 0; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-r1 > .fin2-row__title { min-width: 0; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-r1 > :last-child { white-space: nowrap; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-sub, .fin2 [data-screen="permintaan"] .fin2-permintaan-line { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }
/* toolbar antrean: basis cari = min-width SPEC (24ch) agar [Cari][Metode][Urutkan] tetap satu baris sampai kolom daftar ±571px (1366) */
.fin2 [data-screen="permintaan"]:is(:root[data-fin2-w="lebar"] *) .fin2-permintaan-queue .fin2-tb-row > .fin2-search { flex-basis: 24ch; }
/* tag baris & catatan bukti boleh dua baris (C26: layar yang membungkus memakai selektornya sendiri): "Tanpa bukti ·
   boleh dicocokkan rekening" di kolom antrean / panel sempit (1024, 320) tidak dielipsis */
.fin2 [data-screen="permintaan"] .fin2-permintaan-queue .fin2-row__tags .vs-tag, .fin2 [data-screen="permintaan"] .fin2-permintaan-mt__note .vs-tag { white-space: normal; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-queue .fin2-row__tags .vs-tag__t, .fin2 [data-screen="permintaan"] .fin2-permintaan-mt__note .vs-tag__t { overflow: visible; text-overflow: clip; overflow-wrap: break-word; }

/* ---------- detail: fakta ringkas (tile GUI/F3/RECONCILIATION, ukuran panel) ---------- */
.fin2 [data-screen="permintaan"] .fin2-permintaan-facts { gap: var(--space-3); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-facts .fin2-tile { padding: var(--space-4); background: var(--surface-1); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-facts .fin2-tile__v { font-family: var(--font-body); font-size: var(--text-md); }
/* nominal ≥ Rp 10.000.000 tidak muat trek 16ch: tile Nominal mengambil satu baris sendiri */
.fin2 [data-screen="permintaan"] .fin2-permintaan-facts--long .fin2-tile[data-k="amount"] { grid-column: 1 / -1; }

/* hasil keputusan: tone netral untuk data testing / batal dari sumber */
.fin2 [data-screen="permintaan"] .fin2-permintaan-outcome .fin2-out--neutral .fin2-out__ic { background: var(--ink-050); border-color: var(--border-default); color: var(--text-muted); }

/* ---------- Bukti · GUI/18/MANUAL-TRANSFER CL:3379-3415 ---------- */
.fin2 [data-screen="permintaan"] .fin2-permintaan-mt { display: grid; grid-template-columns: var(--space-13) minmax(0, 1fr); align-items: start; gap: var(--space-4); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-mt__thumb { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-mt__img { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: calc(var(--space-13) + var(--space-6)); padding: 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text-muted); cursor: zoom-in; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-mt__img img { width: 100%; height: 100%; object-fit: cover; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-mt__img--none { cursor: default; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-mt__img:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-mt__zoom { position: absolute; right: var(--space-2); bottom: var(--space-2); display: inline-flex; padding: var(--space-1); border-radius: var(--radius-xs); background: var(--surface-0); color: var(--text-strong); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-mt__file { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); text-align: center; overflow-wrap: anywhere; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-mt__kv { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-mt__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-faint); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-mt__row:last-child { border-bottom: 0; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-mt__row dt { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-mt__row dd { margin: 0; min-width: 0; font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-strong); text-align: right; overflow-wrap: anywhere; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-mt__row dd.fin2-mono { font-size: var(--text-xs); font-weight: var(--fw-medium); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-mt__row dd .fin2-amt { font-weight: var(--fw-bold); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-mt__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-body); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-mt__note > * { flex: 0 1 auto; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-mt__cap { padding-top: var(--space-3); border-top: 1px solid var(--border-faint); font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }

/* ---------- lipatan · AS accordion L545-560 ---------- */
.fin2 [data-screen="permintaan"] .fin2-permintaan-fold { border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-0); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-fold__s { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: var(--field-h); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); cursor: pointer; list-style: none; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-fold__s::-webkit-details-marker { display: none; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-fold__s:hover { background: var(--surface-1); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-fold__s:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-fold__chev { display: inline-flex; color: var(--text-muted); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-fold[open] .fin2-permintaan-fold__chev { transform: rotate(180deg); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-fold__b { padding: 0 var(--space-5) var(--space-5); font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--text-muted); }
@media (prefers-reduced-motion: no-preference) {
  .fin2 [data-screen="permintaan"] .fin2-permintaan-fold__chev { transition: transform .16s ease; }
}

/* rincian alokasi per batch */
.fin2 [data-screen="permintaan"] .fin2-permintaan-alloc { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
/* baris = grid minmax(0,1fr) auto (L5); sel kiri flex-wrap kode + label: label tidak pernah dipecah di tengah kata */
.fin2 [data-screen="permintaan"] .fin2-permintaan-alloc li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-faint); font-size: var(--text-xs); color: var(--text-muted); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-alloc li:last-child { border-bottom: 0; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-alloc li > .fin2-amt { white-space: nowrap; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-alloc__m { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); min-width: 0; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-alloc__m > .fin2-mono { flex: 0 0 auto; white-space: nowrap; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-alloc__l { flex: 1 1 16ch; min-width: 0; font-size: var(--text-sm); color: var(--text-body); overflow-wrap: break-word; }

/* ---------- keputusan ---------- */
.fin2 [data-screen="permintaan"] .fin2-permintaan-decide { padding-top: var(--space-4); border-top: 1px solid var(--border-default); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-say { font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-body); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-why { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-src { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-src > * { flex: 0 1 auto; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-src__n { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-ver { font-size: var(--text-xs); color: var(--text-muted); }

/* ---------- dialog kecualikan & buang ---------- */
.fin2 [data-screen="permintaan"] .fin2-permintaan-pick { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-1); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-pick__sum { font-size: var(--text-sm); color: var(--text-strong); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-pick__ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-pick__ul li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); padding: var(--space-2) 0; font-size: var(--text-sm); color: var(--text-body); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-pick__ul li > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin2 [data-screen="permintaan"] .fin2-permintaan-pick__more { font-size: var(--text-xs); color: var(--text-muted); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-cf__l { margin-top: var(--space-3); font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2 [data-screen="permintaan"] .fin2-permintaan-cf__ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }

/* panel sempit (sidebar penuh di 861-1100 px): navigasi kasus di baris sendiri, judul selebar panel */
@container finroot (max-width: 900px) {
  .fin2 [data-screen="permintaan"] .fin2-panel .fin2-detail__head { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2); }
  .fin2 [data-screen="permintaan"] .fin2-panel .fin2-detail__tools { grid-row: 1; justify-content: flex-end; }
  .fin2 [data-screen="permintaan"] .fin2-panel .fin2-detail__titles { grid-row: 2; }
}

/* ---------- kompak: satu kolom, detail = layar penuh (core) ---------- */
@container finbody (max-width: 700px) {
  .fin2 [data-screen="permintaan"] .fin2-permintaan-board { grid-template-columns: minmax(0, 1fr); }
  .fin2 [data-screen="permintaan"] .fin2-permintaan-board > [data-slot="panel"], .fin2 [data-screen="permintaan"] .fin2-permintaan-skel--panel { display: none; }
}
.fin2 [data-screen="permintaan"]:is(:root[data-fin2-w="mini"] *) .fin2-permintaan-mt, .fin2 [data-screen="permintaan"] :is(:root[data-fin2-w="mini"] *) .fin2-permintaan-mt { grid-template-columns: var(--space-12) minmax(0, 1fr); gap: var(--space-3); }

/* == screen:invoice == */
/* finance-v2 · css/screens/invoice.css · komposisi layar Invoice Selesai.
   Setiap selektor WAJIB diawali [data-screen="invoice"]; kelas baru berawalan fin2-invoice-.
   Token-only, tanpa query kecuali container finbody/finroot (SPEC §8.8).
   Baris = GUI/F3/OUTSTANDING-INVOICES FM 523-537: baris 1 nama + kode mono + tag, subline muted, nominal kanan. */

/* baris 1: nama (ellipsis) · kode mono · tag Legacy; tag tidak pernah menekan nama keluar kolom */
.fin2 [data-screen="invoice"] .fin2-invoice-l1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); min-width: 0; }
.fin2 [data-screen="invoice"] .fin2-invoice-l1 > .fin2-row__title { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.fin2 [data-screen="invoice"] .fin2-invoice-l1 > .fin2-row__code, .fin2 [data-screen="invoice"] .fin2-invoice-l1 > .vs-tag { flex: 0 0 auto; }

/* kolom nominal: nilai mono 600 + sub "saldo lama / sisa" (FM f3-li__amt) */
.fin2 [data-screen="invoice"] .fin2-invoice-amt { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.fin2 [data-screen="invoice"] .fin2-invoice-sub { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); white-space: nowrap; }

/* penyebab tertahan (as-built fcol-row__blockers): teks warning, bukan tag */
.fin2 [data-screen="invoice"] .fin2-invoice-blockers { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-1) 0 0; padding-left: var(--space-5); font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--tag-warning-text); list-style: disc; }

/* baris terpilih = fill netral (DATA-GRID row sel --surface-1), bukan garis warna pinggir */
.fin2 [data-screen="invoice"] .fin2-row.has-pick:has(.fin2-pick input:checked) { background: var(--surface-1); }

/* status bar bundle: "Checksum terverifikasi" = kalimat, bukan angka → font isi, baris sendiri */
.fin2 [data-screen="invoice"] .fin2-bulk--done .fin2-sbar__meta { display: block; margin-left: 0; font-family: var(--font-body); }

@container finbody (max-width:700px) {
  .fin2 [data-screen="invoice"] .fin2-invoice-amt { align-items: flex-start; }
  /* baris tiga-empat tingkat: kotak pilih sejajar baris pertama, bukan tengah kartu */
  .fin2 [data-screen="invoice"] .fin2-row.has-pick { align-items: start; }
  /* tombol baris sejajar teks; tombol ghost tunggal ("Lihat") tidak meregang jadi pita kosong */
  .fin2 [data-screen="invoice"] .fin2-row.has-pick .fin2-row__acts { padding-left: var(--space-2); }
  .fin2 [data-screen="invoice"] .fin2-row__acts > .vs-btn--ghost { flex: 0 1 auto; }
}

/* kartu invoice (pratinjau/drawer): tag status sebaris; keterangan kata-kata memakai font isi (mono hanya nomor/tanggal, L4) */
.fin2 [data-screen="invoice"] .fin2-invoice-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.fin2 [data-screen="invoice"] .fin2-inv__pay, .fin2 [data-screen="invoice"] .fin2-inv__parties > div:nth-child(2) small { font-family: var(--font-body); }

/* riwayat bundle: kode bundle BND-202609-0007 = ID → mono (SPEC §10.2, L4) */
.fin2 [data-screen="invoice"] .fin2-invoice-bundles .fin2-att__name { font-family: var(--font-mono); font-weight: var(--fw-semibold); }

/* == screen:ringkasan == */
/* finance-v2 · css/screens/ringkasan.css · komposisi layar Ringkasan Transaksi (SPEC §10.3).
   Setiap selektor diawali [data-screen="ringkasan"]; kelas baru berawalan fin2-ringkasan-.
   Token-only; query hanya container finbody (SPEC §8.8). */

/* kolom angka rata kanan diberi napas sebelum kolom teks berikutnya (lebar saja; kompak = kartu) */
.fin2 [data-screen="ringkasan"] .fin2-grid:not(.fin2-grid--card) [data-align="end"] { padding-right: var(--space-4); }

/* blok 3 · panel Posisi bulan ini (ui.panel, sama dengan "Posisi uang sekarang" Kas): grid StatCard datar (GUI/F1/KPI-CARDS)
   + tile tinta. Kartu jalur di dalam panel = kotak --surface-1 bergaris --border-faint (tangga permukaan, bukan kartu bertumpuk) */
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-pos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 32ch), 1fr)); gap: var(--space-4); min-width: 0; }

/* kartu jalur (owner 23 Sep: rapikan hierarki): baris label → satu angka bersih → dua kolom Masuk | Keluar */
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-stat, .fin2 [data-screen="ringkasan"] .fin2-ringkasan-total { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-5); border-radius: var(--radius-sm); }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-stat { background: var(--surface-1); border-color: var(--border-faint); }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-stat__top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); min-height: var(--space-8); }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-stat__ic { display: inline-flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-xs); background: var(--surface-0); color: var(--text-muted); }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-stat__l { font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--text-strong); }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-stat__note { display: flex; min-width: 0; }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-stat__v { margin: 0; font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--border-default); }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-flow > div { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-flow dt { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-flow dd { margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--text-body); white-space: nowrap; }
/* tile tinta Total: anatomi sama, warna di atas tinta */
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-total .fin2-ringkasan-stat__top { grid-template-columns: auto minmax(0, 1fr); }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-total .fin2-ringkasan-stat__l, .fin2 [data-screen="ringkasan"] .fin2-ringkasan-total .fin2-ringkasan-stat__v, .fin2 [data-screen="ringkasan"] .fin2-ringkasan-flow--ink dd { color: var(--text-on-dark); }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-flow--ink { border-top-color: color-mix(in srgb, var(--vs-white) 18%, transparent); }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-flow--ink dt, .fin2 [data-screen="ringkasan"] .fin2-ringkasan-total__s { color: var(--text-on-dark-muted); }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-total__s, .fin2 [data-screen="ringkasan"] .fin2-ringkasan-total__d { margin: 0; font-size: var(--text-xs); line-height: var(--lh-normal); }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-total__d { margin-top: auto; font-weight: var(--fw-semibold); color: var(--text-on-dark); }
/* Total (tinta) di atas selebar penuh: kiri label + angka + perbandingan, kanan Masuk | Keluar + catatan */
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-total { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "top flow" "val flow" "d s"; column-gap: var(--space-7); row-gap: var(--space-2); align-items: center; }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-total > .fin2-ringkasan-stat__top { grid-area: top; }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-total > .fin2-ringkasan-stat__v { grid-area: val; }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-total > .fin2-ringkasan-flow { grid-area: flow; align-self: center; padding-top: 0; border-top-style: none; }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-total > .fin2-ringkasan-total__s { grid-area: s; }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-total > .fin2-ringkasan-total__d { grid-area: d; margin-top: 0; }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-rp { font-family: var(--font-mono); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-rgrid .fin2-mono { white-space: nowrap; }
/* Pencocokan saldo dilipat: kepala saja */
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-recon.is-folded .fin2-card__head { padding-bottom: var(--space-4); }

/* blok 4 · Pencocokan saldo (GUI/F3/RECONCILIATION: 4 tile + grid) */
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-recon__tiles { padding: 0 var(--space-5) var(--space-4); }
/* dasar pembanding di atas grid: dibaca sebelum mengetik angka nyata */
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-recon__basis { padding: 0 var(--space-5) var(--space-4); }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-recon__foot { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-faint); }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-note { max-width: 72ch; margin: 0; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-num { color: var(--text-strong); font-weight: var(--fw-semibold); white-space: nowrap; }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-rgrid .fin2-grid__cell[data-card="act"] { flex-wrap: nowrap; }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-in { width: 100%; }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-in input { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-in input::placeholder { font-family: var(--font-body); }

/* blok 6 · Tidak ikut dijumlahkan */
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-excl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 36ch), 1fr)); gap: var(--space-5) var(--space-7); }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-excl .fin2-row { border: 0; }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-excl .fin2-row:hover { background: transparent; }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-excl .fin2-row__body { min-height: 0; padding: 0; align-items: start; }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-excl .fin2-row__title { white-space: normal; }

/* blok 7 · Rincian transaksi */
/* subtotal halaman: pasangan masuk · keluar berjarak jelas (pemisah body xs lebih kecil dari angka mono) */
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-psum { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-fix { align-self: flex-start; margin-top: var(--space-1); padding-inline: 0; }
/* kompak: baris tanpa status dana (keluar, antar kas, void) tidak menampilkan sel kosong */
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-rin .fin2-grid--card [data-card="status"][data-empty="true"] { display: none; }

/* dialog Koreksi: nomor pembayaran tidak patah di tanda hubung ("Rp" + angka sudah NBSP oleh FIN2.dialog, C1) */
.fin2 [data-screen="ringkasan"] .fin2-ringkasan-nw { white-space: nowrap; }

@container finbody (max-width:700px) {
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-pos { gap: var(--space-3); }
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-stat, .fin2 [data-screen="ringkasan"] .fin2-ringkasan-total { padding: var(--space-4); gap: var(--space-2); }
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-stat__v { font-size: var(--text-h4); }
  /* kompak: nama jalur | angka bersih sebaris, Masuk/Keluar + catatan selebar kartu (hemat tinggi) */
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-stat, .fin2 [data-screen="ringkasan"] .fin2-ringkasan-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); }
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-total { grid-template-areas: none; }
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-total > .fin2-ringkasan-stat__top, .fin2 [data-screen="ringkasan"] .fin2-ringkasan-total > .fin2-ringkasan-stat__v { grid-area: auto; }
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-total > .fin2-ringkasan-flow, .fin2 [data-screen="ringkasan"] .fin2-ringkasan-total > .fin2-ringkasan-total__s, .fin2 [data-screen="ringkasan"] .fin2-ringkasan-total > .fin2-ringkasan-total__d { grid-area: auto / 1 / auto / -1; }
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-stat__v { text-align: right; }
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-flow, .fin2 [data-screen="ringkasan"] .fin2-ringkasan-stat__note, .fin2 [data-screen="ringkasan"] .fin2-ringkasan-total__s, .fin2 [data-screen="ringkasan"] .fin2-ringkasan-total__d { grid-column: 1 / -1; }
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-flow, .fin2 [data-screen="ringkasan"] .fin2-ringkasan-total > .fin2-ringkasan-flow { padding-top: var(--space-2); border-top: 1px solid var(--border-default); }
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-total > .fin2-ringkasan-flow { border-top-color: color-mix(in srgb, var(--vs-white) 18%, transparent); }
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-in input { text-align: left; }
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-rgrid.fin2-grid--card [data-card="act"] { order: 3; }
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-rgrid.fin2-grid--card [data-l="Selisih"] { order: 4; }
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-rgrid.fin2-grid--card [data-card="amt"] { white-space: normal; }
}
@container finbody (max-width:480px) {
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-recon__tiles { padding-inline: var(--space-4); }
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-recon__foot, .fin2 [data-screen="ringkasan"] .fin2-ringkasan-recon__basis { padding-inline: var(--space-4); }
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-recon__tiles .fin2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* kartu Pencocokan mini: tag status ("Selisih − Rp 12.449.999") turun ke baris sendiri sesudah Selisih, supaya judul jalur +
     "hitungan fisik Rp …" tidak terhimpit di 320–390 (uang tidak pernah dipatah) */
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-rgrid.fin2-grid--card [data-card="amt"] { grid-column: 2 / -1; grid-row: auto; order: 5; margin-left: 0; align-items: flex-start; }
  /* blok 5 · tombol lompat bulan lebar penuh (turun baris di dalam tombol = core F59) */
  .fin2 [data-screen="ringkasan"] .fin2-ringkasan-off .fin2-alert__acts .vs-btn { width: 100%; }
}

/* == screen:transaksi == */
/* finance-v2 · css/screens/transaksi.css · komposisi layar Riwayat Transaksi.
   Setiap selektor WAJIB diawali [data-screen="transaksi"]; kelas baru berawalan fin2-transaksi-.
   Token-only, tanpa query kecuali container finbody/finroot (SPEC §8.8).
   Sel log = GUI/F3/LEDGER (nama menonjol, kode muted T17); kepala hari = GUI/07/DIVIDER berlabel;
   kwitansi = GUI/19/RECEIPT (ukuran mikro master disnap ke --text-xs, L4; tanpa shadow kartu, §1.5). */

/* baris log: sub Pihak (sumber · kode + tag brand) */
.fin2 [data-screen="transaksi"] .fin2-transaksi-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-1); }
.fin2 [data-screen="transaksi"] .fin2-transaksi-sub > * { flex: 0 1 auto; min-width: 0; }
/* sel Akun: nama + kode = dua item flex-wrap (L5). Kode turun baris sebagai kotak sendiri bila nama membungkus */
.fin2 [data-screen="transaksi"] .fin2-transaksi-acc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.fin2 [data-screen="transaksi"] .fin2-transaksi-acc > * { flex: 0 1 auto; min-width: 0; }
.fin2 [data-screen="transaksi"] .fin2-transaksi-acc__n { font-weight: var(--fw-medium); color: var(--text-strong); overflow-wrap: break-word; }
.fin2 [data-screen="transaksi"] .fin2-transaksi-acc__c { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.fin2 [data-screen="transaksi"] .fin2-transaksi-docs { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-body); }
.fin2 [data-screen="transaksi"] .fin2-transaksi-docs--0 { color: var(--text-muted); }
.fin2 [data-screen="transaksi"] .fin2-transaksi-when { display: block; font-family: var(--font-mono); white-space: nowrap; }
.fin2 [data-screen="transaksi"] .fin2-transaksi-log .fin2-grid__cell[data-card="amt"] { gap: var(--space-1); }
.fin2 [data-screen="transaksi"] .fin2-transaksi-log .fin2-grid__cell[data-card="status"] { flex-direction: column; align-items: flex-start; }
/* tag status: label dana panjang ("Menunggu konfirmasi Finance") membungkus di dalam pill, bukan dielipsis (C26 izinkan
   selektor layar). Juga tag filter aktif "Status dana: …, …" di ponsel (PERMINTAAN FONDASI: ftag multi-nilai di mini) */
.fin2 [data-screen="transaksi"] .fin2-transaksi-log .fin2-grid__cell[data-card="status"] .vs-tag, .fin2 [data-screen="transaksi"] .fin2-tb-tags .fin2-ftag .vs-tag { white-space: normal; }
.fin2 [data-screen="transaksi"] .fin2-transaksi-log .fin2-grid__cell[data-card="status"] .vs-tag__t, .fin2 [data-screen="transaksi"] .fin2-tb-tags .fin2-ftag .vs-tag__t { overflow: visible; }

/* total per hari: Masuk · Keluar · Net (dari day_totals mock). Label teks biasa, nilai mono (L4). */
.fin2 [data-screen="transaksi"] .fin2-transaksi-dt { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1) var(--space-3); font-family: var(--font-body); }
.fin2 [data-screen="transaksi"] .fin2-transaksi-dt__i { flex: 0 1 auto; white-space: nowrap; }
.fin2 [data-screen="transaksi"] .fin2-transaksi-dt__i + .fin2-transaksi-dt__i::before { content: '·'; margin-right: var(--space-3); color: var(--text-muted); }
/* kompak: ringkasan tersaring (Masuk · Keluar · Net) di baris sendiri, tiap pasangan tidak terpisah */
.fin2 [data-screen="transaksi"] .fin2-transaksi-sums { display: flex; justify-content: flex-start; gap: var(--space-1) var(--space-5); margin: 0; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border-faint); font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
/* strip kompak membungkus: pemisah titik tidak boleh jatuh di awal baris, jadi jarak saja */
.fin2 [data-screen="transaksi"] .fin2-transaksi-sums .fin2-transaksi-dt__i + .fin2-transaksi-dt__i::before { content: none; }
.fin2 [data-screen="transaksi"] .fin2-transaksi-ps { justify-content: flex-start; font-size: var(--text-xs); }

/* detail: satu focal (pihak + nominal) di atas rincian. Baris komposit = grid (L5); di mini (drawer layar penuh
   ≤480, di luar container finbody) nominal turun ke baris sendiri lewat atribut lebar <html> (SPEC §7.2). */
.fin2 [data-screen="transaksi"] .fin2-transaksi-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2) var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-faint); }
.fin2 [data-screen="transaksi"] .fin2-transaksi-hero__t { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fin2 [data-screen="transaksi"] .fin2-transaksi-hero__v { text-align: right; }
.fin2 [data-screen="transaksi"]:where(:root[data-fin2-w="mini"] *) .fin2-transaksi-hero { grid-template-columns: minmax(0, 1fr); }
.fin2 [data-screen="transaksi"]:where(:root[data-fin2-w="mini"] *) .fin2-transaksi-hero__v { text-align: left; }
.fin2 [data-screen="transaksi"] .fin2-transaksi-hero__n { margin: 0; font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--text-strong); overflow-wrap: anywhere; }
.fin2 [data-screen="transaksi"] .fin2-transaksi-hero__d { margin: 0; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="transaksi"] .fin2-transaksi-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fin2 [data-screen="transaksi"] .fin2-transaksi-diff { color: var(--tag-danger-text); }
.fin2 [data-screen="transaksi"] .fin2-detail__foot [data-fk="df-delete"] { color: var(--tag-danger-text); }
.fin2 [data-screen="transaksi"] .fin2-transaksi-dlg__fact { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }

/* Tambah Transaksi: chip aksi cepat (ViewBar) mengikuti arah terpilih */
.fin2 [data-screen="transaksi"] .fin2-transaksi-quick .fin2-viewbar__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fin2 [data-screen="transaksi"] .fin2-transaksi-quick .fin2-chip { flex: 0 1 auto; }
.fin2 [data-screen="transaksi"] .fin2-form:has(.fin2-rc__opt[data-v="in"][aria-checked="true"]) .fin2-transaksi-quick .fin2-chip[data-dir="out"], .fin2 [data-screen="transaksi"] .fin2-form:has(.fin2-rc__opt[data-v="out"][aria-checked="true"]) .fin2-transaksi-quick .fin2-chip[data-dir="in"] { display: none; }

/* kwitansi GUI/19/RECEIPT */
.fin2 [data-screen="transaksi"] .fin2-transaksi-rc { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; max-width: 40ch; margin: 0 auto; padding: var(--space-5) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-xs); background: var(--surface-0); font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-body); }
.fin2 [data-screen="transaksi"] .fin2-transaksi-rc__logo { align-self: center; height: var(--space-4); width: auto; }
.fin2 [data-screen="transaksi"] .fin2-transaksi-rc__brand { align-self: center; margin: 0; font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text-strong); }
.fin2 [data-screen="transaksi"] .fin2-transaksi-rc__addr, .fin2 [data-screen="transaksi"] .fin2-transaksi-rc__foot { margin: 0; text-align: center; color: var(--text-muted); }
.fin2 [data-screen="transaksi"] .fin2-transaksi-rc__cut { width: 100%; margin: 0; border: 0; border-bottom: 1px dashed var(--ink-400); }
.fin2 [data-screen="transaksi"] .fin2-transaksi-rc__meta { display: flex; flex-direction: column; gap: var(--space-1); color: var(--text-muted); overflow-wrap: anywhere; }
.fin2 [data-screen="transaksi"] .fin2-transaksi-rc__item, .fin2 [data-screen="transaksi"] .fin2-transaksi-rc__sum, .fin2 [data-screen="transaksi"] .fin2-transaksi-rc__total { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); }
.fin2 [data-screen="transaksi"] .fin2-transaksi-rc__item { color: var(--text-strong); }
.fin2 [data-screen="transaksi"] .fin2-transaksi-rc__item > :last-child, .fin2 [data-screen="transaksi"] .fin2-transaksi-rc__sum > :last-child, .fin2 [data-screen="transaksi"] .fin2-transaksi-rc__total > :last-child { white-space: nowrap; text-align: right; }
.fin2 [data-screen="transaksi"] .fin2-transaksi-rc__sum { color: var(--text-muted); }
.fin2 [data-screen="transaksi"] .fin2-transaksi-rc__total { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text-strong); }

@container finbody (max-width:700px) {
  .fin2 [data-screen="transaksi"] .fin2-transaksi-dt { justify-content: flex-start; }
  .fin2 [data-screen="transaksi"] .fin2-transaksi-log .fin2-grid__cell[data-card="status"] { flex-direction: row; }
}
@container finbody (max-width:480px) {
  .fin2 [data-screen="transaksi"] .fin2-transaksi-sums { padding-inline: var(--space-4); }
  .fin2 [data-screen="transaksi"] .fin2-group__r .fin2-transaksi-dt { display: flex; flex-direction: column; gap: 0; }
  .fin2 [data-screen="transaksi"] .fin2-group__r .fin2-transaksi-dt__i + .fin2-transaksi-dt__i::before { content: none; }
}
/* nomor rekening (731-090-2214) tidak dipotong di tanda hubung */
.fin2 [data-screen="transaksi"] .fin2-transaksi-nb { white-space: nowrap; }

/* == screen:refund == */
/* finance-v2 · css/screens/refund.css · komposisi layar Refund & Koreksi (SPEC §10.5).
   Setiap selektor diawali [data-screen="refund"]; kelas baru berawalan fin2-refund-.
   Token-only; tanpa kuning statis di layar (kuning hanya langkah aktif stepper di drawer, core). */

.fin2 [data-screen="refund"] .fin2-refund-skel { padding: var(--space-5); }

/* ---------- tabel antrean (GUI/11/DATA-GRID) ---------- */
.fin2 [data-screen="refund"] .fin2-refund-refs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fin2 [data-screen="refund"] .fin2-refund-refs > * { flex: 0 1 auto; }
.fin2 [data-screen="refund"] .fin2-refund-sla { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; font-size: var(--text-sm); }
.fin2 [data-screen="refund"] .fin2-refund-sla--danger { font-weight: var(--fw-semibold); color: var(--tag-danger-text); }
.fin2 [data-screen="refund"] .fin2-refund-sla--warning { color: var(--tag-warning-text); }
.fin2 [data-screen="refund"] .fin2-refund-sla--muted { color: var(--text-muted); }
.fin2 [data-screen="refund"] .fin2-refund-go { display: inline-flex; color: var(--text-muted); }
.fin2 [data-screen="refund"] .fin2-refund-queue .fin2-grid__row.is-link:hover .fin2-refund-go { color: var(--text-strong); }

/* ---------- drawer tiket ---------- */
.fin2 [data-screen="refund"] .fin2-refund-steps { padding: var(--space-4) var(--space-4) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-sm); }
.fin2 [data-screen="refund"] .fin2-refund-rej { display: flex; justify-content: flex-start; }
.fin2 [data-screen="refund"] .fin2-refund-brand { margin-left: var(--space-2); font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-muted); }
.fin2 [data-screen="refund"] .fin2-refund-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28ch), 1fr)); gap: var(--space-3); }
.fin2 [data-screen="refund"] .fin2-refund-note { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface-1); }
.fin2 [data-screen="refund"] .fin2-refund-note__k { font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="refund"] .fin2-refund-note__v { font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-body); overflow-wrap: anywhere; }
.fin2 [data-screen="refund"] .fin2-refund-entry { display: flex; justify-content: center; margin-top: var(--space-3); }
.fin2 [data-screen="refund"] .fin2-refund-say { font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-body); }

/* stepper 6 langkah muat di drawer (library APPROVAL 3 langkah): langkah selebar isi, garis penghubung yang menyusut */
.fin2 [data-screen="refund"] .fin2-refund-steps .fin2-step { min-width: 0; flex: 0 0 auto; }
.fin2 [data-screen="refund"] .fin2-refund-steps .fin2-step__l { white-space: nowrap; }
.fin2 [data-screen="refund"] .fin2-refund-steps .fin2-steps__line { flex: 1 1 var(--space-5); min-width: var(--space-3); }

/* == screen:tagihan == */
/* finance-v2 · css/screens/tagihan.css · komposisi layar Invoice & Tagihan.
   Setiap selektor WAJIB diawali [data-screen="tagihan"]; kelas baru berawalan fin2-tagihan-.
   Token-only, tanpa query kecuali container finbody/finroot (SPEC §8.8).
   Tabel = GUI/11/DATA-GRID; mode Kartu = GUI/19/INVOICE-CARD compact di kisi 40ch (as-built fin-invoice-cards). */

/* sel bertingkat: angka kuat di atas, tag/keterangan di bawah */
.fin2 [data-screen="tagihan"] .fin2-tagihan-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; }
.fin2 [data-screen="tagihan"] .fin2-tagihan-late { color: var(--tag-orange-text); font-weight: var(--fw-semibold); }
.fin2 [data-screen="tagihan"] .fin2-tagihan-chev { display: inline-flex; color: var(--text-muted); }
.fin2 [data-screen="tagihan"] .fin2-tagihan-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* lebar: sub-baris jatuh tempo di sel Status (kata font isi, tanggal mono; L4) selalu satu baris penuh di bawah tag */
.fin2 [data-screen="tagihan"] .fin2-grid__cell[data-card="status"] > .fin2-tagihan-due { flex: 1 0 100%; }

/* mode Kartu: kisi intrinsik, satu kolom di lebar sempit tanpa ambang baru */
.fin2 [data-screen="tagihan"] .fin2-tagihan-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 40ch), 1fr)); gap: var(--space-4); padding: var(--space-5); background: var(--surface-1); border-top: 1px solid var(--border-faint); }
.fin2 [data-screen="tagihan"] .fin2-tagihan-cell { display: flex; min-width: 0; }
.fin2 [data-screen="tagihan"] .fin2-tagihan-cell > .fin2-inv { flex: 1 1 auto; }

/* detail drawer (kicker "Invoice · 12 Sep 2026 · jatuh tempo …" memuat kata → font isi, L4) */
.fin2 [data-screen="tagihan"] .fin2-tagihan-who { display: flex; flex-direction: column; gap: var(--space-2); }
.fin2 [data-screen="tagihan"] .fin2-tagihan-name { font-weight: var(--fw-semibold); color: var(--text-strong); }
/* aksi pencatatan (konteks, nonaktif): nama aksi tidak pernah terpotong; alasan turun ke baris kedua bila sempit */
.fin2 [data-screen="tagihan"] .fin2-tagihan-acts .fin2-att__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.fin2 [data-screen="tagihan"] .fin2-tagihan-acts .fin2-att__ic { flex: 0 0 auto; }
.fin2 [data-screen="tagihan"] .fin2-tagihan-acts .fin2-att__txt { flex: 1 1 22ch; min-width: min(100%, 16ch); }
.fin2 [data-screen="tagihan"] .fin2-tagihan-acts .fin2-att__note { flex: 0 1 auto; margin-left: auto; }
/* tile Total · Dibayar · Saldo historis · Sisa: 2×2 bila nilai muat, satu per baris bila nilai (h3 nowrap, termasuk
   nominal panjang) lebih lebar dari separuh drawer. Tetap lokal sesudah E5: kisi core (--fin2-tile-need) hanya berlaku
   di overlay mini dan memberi 1 kolom × 4 di 390; drawer kompak/lebar memakai kisi dasar → 3+1 dan nominal panjang
   terpotong di 2 tile (844×390, 1024–1920) */
.fin2 [data-screen="tagihan"] .fin2-tiles.fin2-tagihan-tiles { display: flex; flex-wrap: wrap; }
.fin2 [data-screen="tagihan"] .fin2-tagihan-tiles > .fin2-tile { flex: 1 1 calc(50% - var(--space-3)); min-width: max-content; }
.fin2 [data-screen="tagihan"] .fin2-tagihan-bill { padding-top: var(--space-4); border-top: 1px solid var(--border-faint); }
.fin2 [data-screen="tagihan"] .fin2-tagihan-billhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }

@container finbody (max-width:700px) {
  /* kartu kompak: angka + tag sebaris agar kartu tidak memanjang */
  .fin2 [data-screen="tagihan"] .fin2-tagihan-stack { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
  /* kartu: status (fokus "Lewat jatuh tempo") langsung di bawah judul, lalu baris meta gabungan, lalu Jatuh tempo */
  .fin2 [data-screen="tagihan"] .fin2-grid--card [data-card="status"] { order: 1; }
  /* "Jatuh tempo 3 Sep 2026" satu baris (label + nilai), bukan dua tingkat */
  .fin2 [data-screen="tagihan"] .fin2-grid--card [data-card="kv"] { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: var(--space-1) var(--space-3); text-align: left; }
  .fin2 [data-screen="tagihan"] .fin2-grid--card [data-card="kv"]::before { flex: 0 1 auto; }
}
@container finbody (max-width:480px) {
  .fin2 [data-screen="tagihan"] .fin2-tagihan-cards { padding: var(--space-4); }
}

/* toolbar padat lebar (cari + 3 filter + Filter tambahan + Tampilan): cari tidak dipotong di bawah panjang placeholder.
   Kompak [Cari][Filter] mengikuti core (≤480 satu baris, cari boleh menyempit) agar tombol Filter tidak terdorong keluar kartu. */
.fin2 [data-screen="tagihan"] .fin2-tb-row > .fin2-search { min-width: min(100%, 44ch); }
/* Tampilan Tabel | Kartu: bila turun ke baris kedua (1024–1440) tetap di ujung kanan, bukan menempel kiri sendirian.
   Di baris yang sama dengan cari, cari (flex-grow) sudah mengisi ruang, jadi margin auto bernilai 0 */
.fin2 [data-screen="tagihan"] .fin2-tb-row__ctl { flex: 1 1 auto; }
.fin2 [data-screen="tagihan"] .fin2-tb-row__ctl > .fin2-vsw { margin-left: auto; }
@container finbody (max-width:700px) {
  .fin2 [data-screen="tagihan"] .fin2-tb-row > .fin2-search { min-width: 0; }
}
/* kartu: keterangan kata-kata memakai font isi; mono hanya nomor/telepon (L4) */
.fin2 [data-screen="tagihan"] .fin2-tagihan-cell .fin2-inv__pay, .fin2 [data-screen="tagihan"] .fin2-tagihan-cell .fin2-inv__parties > div:nth-child(2) small { font-family: var(--font-body); }
.fin2 [data-screen="tagihan"] .fin2-tagihan-cell .fin2-inv__parties > div:nth-child(2) b { font-family: var(--font-body); }

/* == screen:kas == */
/* finance-v2 · css/screens/kas.css · komposisi layar Kas & Bank (SPEC §10.7).
   Setiap selektor diawali [data-screen="kas"]; kelas baru berawalan fin2-kas-. Token-only.
   Unit: GUI/F1/KPI-CARDS (hero + kartu rekening varian MRR) · GUI/F3/CASH-FLOW (via core) · GUI/F3/APPROVAL (baris) ·
   GUI/13/AUDIT-DIFF (pratinjau sinkron saldo). */

/* ---------- Ringkasan: dua kartu atas (posisi + arus kas) ----------
   Hero minimal 44ch (§7.3); CASH-FLOW butuh stat | grafik sebaris (FM 421-447 grid 300px | 1fr), jadi kartu arus kas
   yang menyerap sisa lebar. Keduanya turun bertumpuk bila tidak muat (tanpa ambang). */
.fin2 [data-screen="kas"] .fin2-kas-top { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-5); min-width: 0; }
.fin2 [data-screen="kas"] .fin2-kas-top > .fin2-kas-pos { flex: 1 1 44ch; min-width: 0; }
.fin2 [data-screen="kas"] .fin2-kas-top > .fin2-kas-cfp { flex: 999 1 64ch; min-width: 0; }

/* hero "Posisi uang sekarang" (KPI-CARDS: label, angka display, fakta pendukung) */
.fin2 [data-screen="kas"] .fin2-kas-hero { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.fin2 [data-screen="kas"] .fin2-kas-hero__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.fin2 [data-screen="kas"] .fin2-kas-hero__top > * { flex: 0 1 auto; }
.fin2 [data-screen="kas"] .fin2-kas-hero__l { font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="kas"] .fin2-kas-hero__v { margin: 0; line-height: var(--lh-tight); }
.fin2 [data-screen="kas"] .fin2-kas-hero__v .fin2-amt { font-family: var(--font-display); letter-spacing: var(--ls-tight); color: var(--accent-mint); }
.fin2 [data-screen="kas"] .fin2-kas-hero[data-health="deficit"] .fin2-kas-hero__v .fin2-amt { color: var(--tag-danger-text); }
.fin2 [data-screen="kas"] .fin2-kas-hero__note { max-width: 64ch; margin: 0; font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="kas"] .fin2-kas-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18ch), 1fr)); gap: var(--space-4) var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-faint); }
.fin2 [data-screen="kas"] .fin2-kas-fact { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fin2 [data-screen="kas"] .fin2-kas-fact__l { font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="kas"] .fin2-kas-fact__v .fin2-amt { font-family: var(--font-display); }
.fin2 [data-screen="kas"] .fin2-kas-fact__s { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
/* tautan ke kartu Perlu tindakan (daftar yang bisa ditindak ada di bawah lipatan) */
.fin2 [data-screen="kas"] .fin2-kas-goq { align-self: flex-start; margin-left: calc(var(--space-2) * -1); }

/* lipatan "Rincian per rekening" */
.fin2 [data-screen="kas"] .fin2-kas-fold { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--space-2); min-height: var(--fin2-ctl-h); padding: 0 var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-0); font: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); cursor: pointer; }
.fin2 [data-screen="kas"] .fin2-kas-fold:hover { background: var(--surface-1); }
.fin2 [data-screen="kas"] .fin2-kas-fold:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.fin2 [data-screen="kas"] .fin2-kas-fold__ic { display: inline-flex; color: var(--text-muted); }
.fin2 [data-screen="kas"] .fin2-kas-foldbody { min-width: 0; }
.fin2 [data-screen="kas"] .fin2-kas-foldbody .fin2-kv dd { justify-content: flex-end; text-align: right; }

/* ---------- kartu rekening (KPI-CARDS varian MRR: kicker, nilai, sparkline, kaki) ---------- */
.fin2 [data-screen="kas"] .fin2-kas-accs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 32ch), 1fr)); gap: var(--space-4); }
.fin2 [data-screen="kas"] .fin2-kas-acc { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-5); background: var(--surface-0); border: 1px solid var(--border-default); border-radius: var(--radius-sm); }
.fin2 [data-screen="kas"] .fin2-kas-acc.is-archived { background: var(--surface-1); }
/* kicker + tag: tag turun ke baris sendiri bila kicker panjang (nomor rekening tidak dipatah di tengah) */
.fin2 [data-screen="kas"] .fin2-kas-acc__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-2) var(--space-3); }
.fin2 [data-screen="kas"] .fin2-kas-acc__top > * { flex: 0 1 auto; }
.fin2 [data-screen="kas"] .fin2-kas-acc__k { min-width: 0; margin: 0; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-muted); overflow-wrap: break-word; }
.fin2 [data-screen="kas"] .fin2-kas-acc__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fin2 [data-screen="kas"] .fin2-kas-acc__v { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; }
.fin2 [data-screen="kas"] .fin2-kas-acc__v .fin2-amt { font-family: var(--font-display); line-height: var(--lh-tight); }
.fin2 [data-screen="kas"] .fin2-kas-acc__vl { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="kas"] .fin2-kas-acc__foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15ch), 1fr)); gap: var(--space-3); margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--border-faint); }
.fin2 [data-screen="kas"] .fin2-kas-acc__foot > div { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fin2 [data-screen="kas"] .fin2-kas-acc__foot dt { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="kas"] .fin2-kas-acc__foot dd { margin: 0; font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-strong); white-space: nowrap; }
/* hitungan transaksi menunggu cair: keterangan di bawah nominalnya (sama dengan fakta hero), bukan fakta ketiga */
.fin2 [data-screen="kas"] .fin2-kas-acc__foot dd.fin2-kas-acc__fs { font-weight: var(--fw-regular); color: var(--text-muted); }
.fin2 [data-screen="kas"] .fin2-kas-acc__note { margin: 0; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="kas"] .fin2-kas-acc > .vs-btn { align-self: flex-start; }

/* ---------- Perlu tindakan (baris APPROVAL) ---------- */
/* uang di dalam kalimat meta: satu unit tak terpecah (§1.3) */
.fin2 [data-screen="kas"] .fin2-kas-rp { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin2 [data-screen="kas"] .fin2-kas-noperm { display: inline-flex; align-items: center; min-height: var(--fin2-ctl-h); font-size: var(--text-sm); color: var(--text-muted); }

/* ---------- Mutasi & Buku Kas ---------- */
.fin2 [data-screen="kas"] .fin2-kas-d { white-space: nowrap; }
.fin2 [data-screen="kas"] .fin2-kas-t { display: block; font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.fin2 [data-screen="kas"] .fin2-kas-mut .fin2-rowlink { width: 100%; }
.fin2 [data-screen="kas"] .fin2-kas-mt { display: grid; justify-items: start; gap: var(--space-1); width: 100%; min-width: 0; text-align: left; }
.fin2 [data-screen="kas"] .fin2-kas-mt__t { max-width: 100%; font-weight: var(--fw-semibold); color: var(--text-strong); overflow-wrap: anywhere; }
.fin2 [data-screen="kas"] .fin2-kas-mt__s { max-width: 100%; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); overflow-wrap: anywhere; }
.fin2 [data-screen="kas"] .fin2-kas-mt__tag { display: inline-flex; }
.fin2 [data-screen="kas"] .fin2-kas-gh { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1) var(--space-4); max-width: 60ch; margin-left: auto; text-align: right; }
.fin2 [data-screen="kas"] .fin2-kas-gh__i { flex: 0 1 auto; min-width: 0; }
.fin2 [data-screen="kas"] .fin2-kas-gh b { font-weight: var(--fw-semibold); white-space: nowrap; }

/* ---------- detail transaksi (drawer / layar penuh; overlay membawa data-screen) ---------- */
.fin2 [data-screen="kas"] .fin2-kas-dsec { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.fin2 [data-screen="kas"] .fin2-kas-dsec__t { margin: 0; font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-strong); }
.fin2 [data-screen="kas"] .fin2-kas-inl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.fin2 [data-screen="kas"] .fin2-kas-inl__t { font-size: var(--text-xs); font-weight: var(--fw-regular); color: var(--text-muted); }
.fin2 [data-screen="kas"] .fin2-kas-axis { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fin2 [data-screen="kas"] .fin2-kas-axis > * { flex: 0 1 auto; }
.fin2 [data-screen="kas"] .fin2-kas-src { margin: 0; font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-body); }
.fin2 [data-screen="kas"] .fin2-kas-muted { font-weight: var(--fw-regular); color: var(--text-muted); }
.fin2 [data-screen="kas"] .fin2-kas-sfacts { margin-bottom: var(--space-2); }
/* ringkasan dialog Catat dana cair tetap label | nilai di sheet sempit, agar field wajib cepat terlihat */
.fin2 [data-screen="kas"] .fin2-kv.fin2-kas-sfacts .fin2-kv__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-3); }

/* ---------- GUI/13/AUDIT-DIFF: pratinjau sinkron saldo ---------- */
.fin2 [data-screen="kas"] .fin2-kas-diff { display: flex; flex-direction: column; margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.fin2 [data-screen="kas"] .fin2-kas-diff__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-faint); }
.fin2 [data-screen="kas"] .fin2-kas-diff__row:last-child { border-bottom: 0; }
.fin2 [data-screen="kas"] .fin2-kas-diff__sys { display: inline-flex; align-items: center; justify-content: center; width: var(--space-7); height: var(--space-7); border-radius: var(--radius-pill); background: var(--ink-950); color: var(--text-on-dark); }
.fin2 [data-screen="kas"] .fin2-kas-diff__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.fin2 [data-screen="kas"] .fin2-kas-diff__txt { margin: 0; font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-body); }
.fin2 [data-screen="kas"] .fin2-kas-diff__txt b { font-weight: var(--fw-semibold); color: var(--text-strong); }
/* nama rekening satu unit: kotak inline yang membungkus menimpa kata tebal lain di baris yang sama */
.fin2 [data-screen="kas"] .fin2-kas-diff__acc { white-space: nowrap; }
.fin2 [data-screen="kas"] .fin2-kas-diff__why { margin: 0; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="kas"] .fin2-kas-diff__chg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; }
.fin2 [data-screen="kas"] .fin2-kas-diff__old, .fin2 [data-screen="kas"] .fin2-kas-diff__new { flex: 0 1 auto; padding: var(--space-1) var(--space-3); border: 1px solid; border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--lh-normal); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin2 [data-screen="kas"] .fin2-kas-diff__old { background: var(--surface-1); border-color: var(--line-200); color: var(--text-muted); }
.fin2 [data-screen="kas"] .fin2-kas-diff__new { background: var(--tag-success-bg); border-color: var(--tag-success-border); color: var(--tag-success-text); font-weight: var(--fw-semibold); }
.fin2 [data-screen="kas"] .fin2-kas-diff__arr { display: inline-flex; color: var(--ink-500); }
.fin2 [data-screen="kas"] .fin2-kas-diff__time { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.fin2 [data-screen="kas"] .fin2-kas-nochg { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: var(--text-sm); color: var(--tag-success-text); }
.fin2 [data-screen="kas"] .fin2-kas-nochg > span { display: inline-flex; }

/* ---------- kompak / mini (container finbody, ambang L6) ---------- */
@container finbody (max-width: 700px) {
  .fin2 [data-screen="kas"] .fin2-kas-gh { justify-content: flex-start; max-width: none; margin-left: 0; text-align: left; }
  .fin2 [data-screen="kas"] .fin2-kas-acc > .vs-btn { align-self: stretch; }
}
@container finbody (max-width: 480px) {
  .fin2 [data-screen="kas"] .fin2-kas-hero__v .fin2-amt { font-size: var(--text-h3); }
  .fin2 [data-screen="kas"] .fin2-kas-fold { align-self: stretch; justify-content: space-between; }
}

/* == screen:report == */
/* finance-v2 · css/screens/report.css · komposisi layar Laporan & Statistik (SPEC §10.8).
   Setiap selektor diawali [data-screen="report"]; kelas baru berawalan fin2-report-.
   Token-only; query hanya container finbody (SPEC §8.8). */

/* ---------- kerangka badan (kolom antarbagian = .fin2-screen core, C10) ---------- */
.fin2 [data-screen="report"] .fin2-report-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-5); min-width: 0; }
.fin2 [data-screen="report"] .fin2-report-row > .fin2-report-trend { flex: 2 1 48ch; min-width: 0; }
.fin2 [data-screen="report"] .fin2-report-row > .fin2-report-metrik { flex: 1 1 32ch; min-width: 0; }
.fin2 [data-screen="report"] .fin2-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 48ch), 1fr)); align-items: stretch; gap: var(--space-5); min-width: 0; }
.fin2 [data-screen="report"] .fin2-report-chart { min-width: 0; }

/* ---------- teks bantu ---------- */
.fin2 [data-screen="report"] .fin2-report-muted { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="report"] .fin2-report-sub { display: block; font-size: var(--text-xs); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="report"] .fin2-report-strong { font-weight: var(--fw-semibold); color: var(--text-strong); }
/* kode & angka mono tidak dipatah di tanda hubung ("FIN 0331-|0003"); teks di sekitarnya tetap membungkus */
.fin2 [data-screen="report"] span.fin2-mono, .fin2 [data-screen="report"] .fin2-report-nb { white-space: nowrap; }
/* Buku Kas: baris penuh "Tampilkan semua" rata kiri sejajar teks sel (tautan terbungkus tidak ke tengah) */
.fin2 [data-screen="report"] .fin2-grid__fcell .fin2-linkbtn { margin-left: calc(var(--space-2) * -1); text-align: left; }
.fin2 [data-screen="report"] .fin2-report-acc { display: block; font-weight: var(--fw-medium); color: var(--text-strong); }
.fin2 [data-screen="report"] .fin2-report-dtitle { display: block; overflow: hidden; color: var(--text-strong); text-overflow: ellipsis; white-space: nowrap; }
.fin2 [data-screen="report"] .fin2-report-note { margin: var(--space-3) 0 0; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); max-width: 64ch; }
.fin2 [data-screen="report"] .fin2-report-profit { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.fin2 [data-screen="report"] .fin2-report-danger { color: var(--tag-danger-text); }
.fin2 [data-screen="report"] .fin2-report-danger:hover { color: var(--tag-danger-text); background: var(--tag-danger-bg); }

/* ---------- GUI/F2/SPARKLINE varian A: Metrik pendukung ---------- */
.fin2 [data-screen="report"] .fin2-report-spk { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.fin2 [data-screen="report"] .fin2-report-spk__r { display: grid; grid-template-columns: minmax(0, 1fr) var(--space-13); align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-faint); }
.fin2 [data-screen="report"] .fin2-report-spk__r:last-child { border-bottom: 0; }
.fin2 [data-screen="report"] .fin2-report-spk__t { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fin2 [data-screen="report"] .fin2-report-spk__l { font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="report"] .fin2-report-spk__v, .fin2 [data-screen="report"] .fin2-report-spk__v .fin2-amt { font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--text-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin2 [data-screen="report"] .fin2-report-spk__a { grid-column: 1; min-width: 0; }
.fin2 [data-screen="report"] .fin2-report-spk__a .fin2-linkbtn { margin-left: calc(var(--space-2) * -1); }
.fin2 [data-screen="report"] .fin2-report-spk__g { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* ---------- GUI/F3/OUTSTANDING-INVOICES: kartu kiri tanpa padding ganda ---------- */
.fin2 [data-screen="report"] .fin2-report-rcv > .fin2-card__pad { padding: 0 0 var(--space-3); gap: 0; }
.fin2 [data-screen="report"] .fin2-report-rcv .fin2-list { border-bottom: 1px solid var(--border-faint); }
.fin2 [data-screen="report"] .fin2-report-rcv .fin2-state { margin: 0 var(--space-5); }

/* ---------- tabel 12 bulan: baris total = opsi totals grid core (C25c) ---------- */
.fin2 [data-screen="report"] .fin2-grid__row--total .fin2-amt { font-weight: var(--fw-bold); }

/* ---------- GUI/F3/EXPORT-REPORT ---------- */
.fin2 [data-screen="report"] .fin2-report-exp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 32ch), 1fr)); align-items: start; gap: var(--space-5) var(--space-8); }
.fin2 [data-screen="report"] .fin2-report-exp__col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.fin2 [data-screen="report"] .fin2-report-exp__l { margin: 0; font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="report"] .fin2-report-exp .fin2-rc { grid-template-columns: minmax(0, 1fr); }
.fin2 [data-screen="report"] .fin2-report-exp .fin2-form { gap: var(--space-2); }
.fin2 [data-screen="report"] .fin2-report-exp__err { margin: 0; }
.fin2 [data-screen="report"] .fin2-report-exp__scope { margin: 0; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); overflow-wrap: anywhere; }

/* ---------- drawer drill-down (GUI/F3/LEDGER) ---------- */
.fin2 [data-screen="report"] .fin2-report-dmeta, .fin2 [data-screen="report"] .fin2-report-dsum { margin: 0; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
/* ringkasan drill: tiap pasangan label+nilai satu item (L5: flex-wrap, item flex 0 1 auto), nilai tidak terpotong */
.fin2 [data-screen="report"] .fin2-report-dsum { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.fin2 [data-screen="report"] .fin2-report-dsum__i { flex: 0 1 auto; white-space: nowrap; }
.fin2 [data-screen="report"] .fin2-report-dsum b { font-family: var(--font-mono); font-weight: var(--fw-semibold); white-space: nowrap; }
.fin2 [data-screen="report"] .fin2-report-dgrid { min-width: 0; overflow: clip; border: 1px solid var(--border-default); border-radius: var(--radius-sm); }
.fin2 [data-screen="report"] .fin2-report-dsum__k { flex: 0 1 auto; font-weight: var(--fw-semibold); color: var(--text-body); }
/* deretan tag pendek dalam sel (Non-kas, Antar kas): flex-wrap, tag tidak meluber */
.fin2 [data-screen="report"] .fin2-report-tags { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); min-width: 0; }
.fin2 [data-screen="report"] .fin2-report-sub + .fin2-report-tags, .fin2 [data-screen="report"] .fin2-report-kat + .fin2-report-tags { margin-top: var(--space-1); }
.fin2 [data-screen="report"] .fin2-report-kat { display: block; min-width: 0; }
.fin2 [data-screen="report"] .fin2-report-kat .fin2-report-acc { font-weight: var(--fw-regular); color: var(--text-body); }   /* Deskripsi tetap fokus baris */
/* sel Kategori drill (flex-wrap core): nama akun + kode, lalu tag Non-kas di baris sendiri, tag tidak diregangkan */
.fin2 [data-screen="report"] [data-card="status"] > .fin2-report-kat, .fin2 [data-screen="report"] [data-card="status"] > .fin2-report-tags { flex: 1 1 100%; align-items: flex-start; margin-top: 0; }
.fin2 [data-screen="report"] .fin2-report-tags > .vs-tag { flex: 0 1 auto; min-width: 0; }

/* ---------- kompak ---------- */
@container finbody (max-width: 700px) {
  .fin2 [data-screen="report"] .fin2-report-exp { gap: var(--space-5); }
}

/* ---------- penyesuaian tata letak ---------- */
.fin2 [data-screen="report"] .fin2-report-exp__why { margin: 0; }

/* Piutang teratas = anatomi baris Purchasing › Payable (purchasing.css .fin2-purchasing-pr/-li): main + [umur][sisa][tag].
   Kolom daftar aging sempit → slot end turun ke baris kedua rata kanan; kolom end sejajar antarbaris lewat min-width */
.fin2 [data-screen="report"] .fin2-report-inv > .fin2-row__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.fin2 [data-screen="report"] .fin2-report-inv .fin2-row__main { flex: 1 1 30ch; min-width: min(100%, 24ch); }
.fin2 [data-screen="report"] .fin2-report-inv .fin2-row__end { flex: 0 1 auto; margin-left: auto; }
.fin2 [data-screen="report"] .fin2-report-li { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-4); }
.fin2 [data-screen="report"] .fin2-report-li > * { flex: 0 1 auto; }
.fin2 [data-screen="report"] .fin2-report-li > .fin2-report-age { min-width: 10ch; text-align: right; }
.fin2 [data-screen="report"] .fin2-report-li > .fin2-amt { min-width: 14ch; text-align: right; }
/* slot tag selebar label status terpanjang ("Menunggu pembayaran"), tag rata kanan: kolom nominal lurus antarbaris */
.fin2 [data-screen="report"] .fin2-report-lt { display: inline-flex; justify-content: flex-end; min-width: 20ch; }
.fin2 [data-screen="report"] .fin2-report-age { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); white-space: nowrap; }
.fin2 [data-screen="report"] .fin2-report-age.is-late { font-family: var(--font-mono); font-weight: var(--fw-semibold); color: var(--tag-danger-text); }
.fin2 [data-screen="report"] .fin2-report-spk__na { display: block; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); text-align: right; }
/* KPI 2 kolom (finroot ≤900): kartu Laba bersih mengisi baris kedua penuh, tidak yatim di setengah baris */
@container finroot (max-width: 900px) {
  .fin2 [data-screen="report"] .fin2-kpi--profit { grid-column: 1 / -1; }
}
/* Buku Kas = anatomi grup Kas & Bank › Mutasi (kas.css .fin2-kas-gh / .fin2-kas-mt): kepala "Saldo awal · saldo akhir",
   judul baris 600 membungkus, sub kode mono */
.fin2 [data-screen="report"] .fin2-report-gh { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1) var(--space-4); max-width: 60ch; margin-left: auto; text-align: right; }
.fin2 [data-screen="report"] .fin2-report-gh__i { flex: 0 1 auto; min-width: 0; }
.fin2 [data-screen="report"] .fin2-report-gh b { font-weight: var(--fw-semibold); white-space: nowrap; }
.fin2 [data-screen="report"] .fin2-report-mt { display: grid; justify-items: start; gap: var(--space-1); width: 100%; min-width: 0; text-align: left; }
.fin2 [data-screen="report"] .fin2-report-mt__t { max-width: 100%; font-weight: var(--fw-semibold); color: var(--text-strong); overflow-wrap: anywhere; }
.fin2 [data-screen="report"] .fin2-report-mt__s { max-width: 100%; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); overflow-wrap: anywhere; }
.fin2 [data-screen="report"] .fin2-report-mt > .fin2-report-tags { margin-top: 0; }
@container finbody (max-width: 700px) {
  .fin2 [data-screen="report"] .fin2-report-gh { justify-content: flex-start; max-width: none; margin-left: 0; text-align: left; }
  /* Piutang kompak: umur · sisa · tag selalu turun di bawah subline, rata kiri, tanpa lebar kolom (sama dengan Purchasing) */
  .fin2 [data-screen="report"] .fin2-report-inv .fin2-row__main { flex-basis: 100%; }
  .fin2 [data-screen="report"] .fin2-report-inv .fin2-row__end { margin-left: 0; }
  .fin2 [data-screen="report"] .fin2-report-li { justify-content: flex-start; gap: var(--space-2) var(--space-3); }
  .fin2 [data-screen="report"] .fin2-report-li > .fin2-report-age, .fin2 [data-screen="report"] .fin2-report-li > .fin2-amt, .fin2 [data-screen="report"] .fin2-report-lt { min-width: 0; text-align: left; }
}
@container finbody (max-width: 480px) {
  /* nilai rupiah pendek muat sebaris dengan labelnya (core ≤480 menumpuk label di atas nilai); kartu tidak perlu bertumpuk */
  .fin2 [data-screen="report"] .fin2-grid--card [data-card="kv"] { flex-direction: row; align-items: baseline; justify-content: space-between; text-align: right; }
  /* baris ink Laba bersih: label di baris pertama, tag margin + nilai di baris kedua rata kanan; tag tidak terlipat */
  .fin2 [data-screen="report"] .fin2-report-pl .fin2-sum__row--ink { flex-wrap: wrap; row-gap: var(--space-2); }
  .fin2 [data-screen="report"] .fin2-report-pl .fin2-sum__row--ink .fin2-sum__r { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
}

/* == screen:purchasing == */
/* finance-v2 · css/screens/purchasing.css · komposisi layar Purchasing.
   Setiap selektor WAJIB diawali [data-screen="purchasing"]; kelas baru berawalan fin2-purchasing-.
   Token-only, tanpa query kecuali container finbody/finroot (SPEC §8.8).
   Payable = GUI/F3/OUTSTANDING-INVOICES FM 516-548 (f3-li: umur mono · sisa mono 600 · tag);
   rincian item = GUI/11/BASIC-SUMMARY CL:1341-1382 (item + sub | qty | harga | subtotal, baris TOTAL bergaris atas). */

.fin2 [data-screen="purchasing"] .fin2-purchasing-due { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-chev { display: inline-flex; color: var(--text-muted); }

/* baris payable (f3-li): main + [umur][sisa][tag]. Kolom daftar aging bisa sempit (±374px di lebar 1024) → slot end
   turun ke baris kedua (rata kanan) alih-alih memeras main sampai 0; kolom end tetap sejajar antarbaris lewat min-width */
.fin2 [data-screen="purchasing"] .fin2-purchasing-pr > .fin2-row__hit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-pr .fin2-row__main { flex: 1 1 30ch; min-width: min(100%, 24ch); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-pr .fin2-row__end { flex: 0 1 auto; margin-left: auto; }
.fin2 [data-screen="purchasing"] .fin2-purchasing-li { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-4); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-li > * { flex: 0 1 auto; }
.fin2 [data-screen="purchasing"] .fin2-purchasing-li > .fin2-purchasing-age { min-width: 10ch; text-align: right; }
.fin2 [data-screen="purchasing"] .fin2-purchasing-li > .fin2-amt { min-width: 14ch; text-align: right; }
/* slot tag selebar tag terpanjang kamus purchaseStatus ("Sebagian dibayar" ±15,4ch) dan tag rata kanan di dalamnya:
   lebar [umur][sisa][tag] sama di semua baris, jadi nominal sisa rata antarbaris (review akhir visual) */
.fin2 [data-screen="purchasing"] .fin2-purchasing-lt { display: inline-flex; justify-content: flex-end; min-width: 16ch; }
/* umur: kata "tepat waktu" font isi; hanya angka "+65 hr" mono (L4) */
.fin2 [data-screen="purchasing"] .fin2-purchasing-age { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); white-space: nowrap; }
.fin2 [data-screen="purchasing"] .fin2-purchasing-age.is-late { font-family: var(--font-mono); color: var(--tag-danger-text); font-weight: var(--fw-semibold); }

/* panel Vendor spend di sisi aging: label + nilai sebaris, batang di bawah (sisi 28–36ch terlalu sempit untuk tiga kolom) */
.fin2 [data-screen="purchasing"] .fin2-purchasing-spend { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-5); border-top: 1px solid var(--border-faint); }
/* judul panel h3 (navigasi heading) berpenampilan sama dengan label sisi core p.fin2-aging__k: font isi, bukan display */
.fin2 [data-screen="purchasing"] .fin2-purchasing-spend > .fin2-aging__k { margin: 0; font-family: var(--font-body); line-height: var(--lh-normal); letter-spacing: normal; }
.fin2 [data-screen="purchasing"] .fin2-purchasing-spend__sub { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-spend .fin2-hb__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-spend .fin2-hb__t { grid-column: 1 / -1; grid-row: 2; }

/* rincian item (BASIC-SUMMARY): angka kanan mono; baris membungkus intrinsik bila lebar sempit */
.fin2 [data-screen="purchasing"] .fin2-purchasing-items { display: flex; flex-direction: column; min-width: 0; }
.fin2 [data-screen="purchasing"] .fin2-purchasing-items__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-faint); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-items__row--head { padding-block: var(--space-2); border-bottom-color: var(--border-default); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-items__item { display: flex; flex: 1 1 24ch; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fin2 [data-screen="purchasing"] .fin2-purchasing-items__item b { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-strong); overflow-wrap: anywhere; }
.fin2 [data-screen="purchasing"] .fin2-purchasing-items__item small { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-items__nums { display: grid; flex: 1 1 36ch; grid-template-columns: minmax(4ch, 0.5fr) minmax(12ch, 1fr) minmax(12ch, 1fr); gap: var(--space-4); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-items__nums > [data-align="end"] { text-align: right; white-space: nowrap; }
.fin2 [data-screen="purchasing"] .fin2-purchasing-items__row:not(.fin2-purchasing-items__row--head) .fin2-purchasing-items__nums { font-size: var(--text-sm); color: var(--text-muted); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-items__sub { font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-items__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border-default); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-items__total .fin2-mono { font-size: var(--text-md); white-space: nowrap; }

/* composer: repeater baris item, kisi intrinsik (dialog lg → 3 kolom, sheet ponsel → 1–2 kolom) */
.fin2 [data-screen="purchasing"] .fin2-purchasing-rep { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-lines { display: flex; flex-direction: column; gap: var(--space-3); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-line { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); background: var(--surface-1); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-line__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-line__lg { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
/* baris item: wrap intrinsik dengan basis per isi. Item dan Akun (label "5-2600 · Administrasi & umum") paling lebar,
   Qty paling sempit; urutan DOM = urutan tab (Item → Kategori → Akun → Qty → Harga) */
.fin2 [data-screen="purchasing"] .fin2-purchasing-line__grid { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-lf { flex: 1 1 14ch; min-width: min(100%, 7ch); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-lf--item { flex-basis: 24ch; }
.fin2 [data-screen="purchasing"] .fin2-purchasing-lf--acc { flex: 2 1 26ch; }
.fin2 [data-screen="purchasing"] .fin2-purchasing-lf--qty { flex-basis: 7ch; }
.fin2 [data-screen="purchasing"] .fin2-purchasing-lf--price { flex-basis: 16ch; }
.fin2 [data-screen="purchasing"] .fin2-purchasing-lf .vs-sel, .fin2 [data-screen="purchasing"] .fin2-purchasing-lf .vs-input { width: 100%; }
.fin2 [data-screen="purchasing"] .fin2-purchasing-lf input.fin2-mono { text-align: right; }
.fin2 [data-screen="purchasing"] .fin2-purchasing-rep__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-rep__foot > .vs-btn { justify-self: start; }
.fin2 [data-screen="purchasing"] .fin2-purchasing-total { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-total .fin2-amt { font-size: var(--text-md); font-weight: var(--fw-bold); }

/* skeleton Payable meniru susunan unit: daftar kiri + ringkasan kanan */
.fin2 [data-screen="purchasing"] .fin2-purchasing-skel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(28ch, 36ch); align-items: start; gap: var(--space-6); }
.fin2 [data-screen="purchasing"] .fin2-purchasing-skel__side { display: flex; flex-direction: column; gap: var(--space-4); }

@container finbody (max-width:700px) {
  .fin2 [data-screen="purchasing"] .fin2-purchasing-skel { grid-template-columns: minmax(0, 1fr); }
  /* kompak: umur · sisa · tag selalu turun di bawah subline, rata kiri, tanpa lebar kolom (SPEC §4.2 ≤700) */
  .fin2 [data-screen="purchasing"] .fin2-purchasing-pr .fin2-row__main { flex-basis: 100%; }
  .fin2 [data-screen="purchasing"] .fin2-purchasing-pr .fin2-row__end { margin-left: 0; }
  .fin2 [data-screen="purchasing"] .fin2-purchasing-li { justify-content: flex-start; gap: var(--space-2) var(--space-3); }
  .fin2 [data-screen="purchasing"] .fin2-purchasing-li > .fin2-purchasing-age, .fin2 [data-screen="purchasing"] .fin2-purchasing-li > .fin2-amt, .fin2 [data-screen="purchasing"] .fin2-purchasing-lt { min-width: 0; text-align: left; }
  /* kartu: "Jatuh tempo 6 Okt 2026" dan "Total Rp …" satu baris (label + nilai), bukan dua tingkat */
  .fin2 [data-screen="purchasing"] .fin2-grid--card [data-card="kv"] { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: var(--space-1) var(--space-3); text-align: left; }
  .fin2 [data-screen="purchasing"] .fin2-grid--card [data-card="kv"]::before { flex: 0 1 auto; }
}

/* == screen:rutin == */
/* finance-v2 · css/screens/rutin.css · komposisi layar Biaya Rutin.
   Setiap selektor WAJIB diawali [data-screen="rutin"]; kelas baru berawalan fin2-rutin-.
   Token-only, tanpa query kecuali container finbody/finroot (SPEC §8.8).
   Sel akun = nama menonjol + kode muted (T17), pola sama dengan log Riwayat Transaksi. */
/* sel Akun: nama + kode = dua item flex-wrap (L5). Kode turun baris sebagai kotak sendiri bila nama membungkus */
.fin2 [data-screen="rutin"] .fin2-rutin-acc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.fin2 [data-screen="rutin"] .fin2-rutin-acc > * { flex: 0 1 auto; min-width: 0; }
.fin2 [data-screen="rutin"] .fin2-rutin-acc__n { font-weight: var(--fw-medium); color: var(--text-strong); overflow-wrap: break-word; }
.fin2 [data-screen="rutin"] .fin2-rutin-acc__c { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.fin2 [data-screen="rutin"] .fin2-rutin-list .fin2-grid__cell[data-card="act"] { justify-content: flex-end; }
.fin2 [data-screen="rutin"] .fin2-rutin-more { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-muted); }

/* detail: nominal per periode sebagai satu focal */
.fin2 [data-screen="rutin"] .fin2-rutin-hero { display: flex; flex-direction: column; gap: var(--space-1); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-faint); }
.fin2 [data-screen="rutin"] .fin2-rutin-hero__l { font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }

@container finbody (max-width:700px) {
  .fin2 [data-screen="rutin"] .fin2-rutin-list .fin2-grid__cell[data-card="act"] { justify-content: flex-start; }
}
/* tag "Jatuh tempo" di baris sendiri di bawah nama / tanggal. Di kolom sempit (320 + nominal panjang)
   label tag membungkus di dalam pill, tidak dipotong elipsis */
.fin2 [data-screen="rutin"] .fin2-rutin-duetag { display: flex; margin-top: var(--space-2); }
.fin2 [data-screen="rutin"] .fin2-rutin-duetag .vs-tag { white-space: normal; }
.fin2 [data-screen="rutin"] .fin2-rutin-duetag .vs-tag__t { overflow: visible; }

/* == screen:aset == */
/* finance-v2 · css/screens/aset.css · komposisi layar Aset.
   Setiap selektor WAJIB diawali [data-screen="aset"]; kelas baru berawalan fin2-aset-.
   Token-only, tanpa query kecuali container finbody/finroot (SPEC §8.8).
   Tiles kepala = GUI/F3/RECONCILIATION (builder core); tabel = GUI/11/DATA-GRID; angka rata kanan mono tabular. */
.fin2 [data-screen="aset"] .fin2-aset-list .fin2-grid__cell[data-card="act"] { justify-content: flex-end; }

@container finbody (max-width:700px) {
  .fin2 [data-screen="aset"] .fin2-aset-list .fin2-grid__cell[data-card="act"] { justify-content: flex-start; }
}
.fin2 [data-screen="aset"] .fin2-aset-num { white-space: nowrap; }
/* summary tersaring: pasangan "Perolehan Rp …" dan "Nilai buku Rp …" masing-masing satu kotak, turun baris utuh */
.fin2 [data-screen="aset"] .fin2-aset-ps { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); color: var(--text-muted); }
.fin2 [data-screen="aset"] .fin2-aset-ps__i { flex: 0 1 auto; white-space: nowrap; }

/* == screen:anggaran == */
/* finance-v2 · css/screens/anggaran.css · komposisi layar Anggaran (SPEC §10.12).
   Setiap selektor diawali [data-screen="anggaran"]; kelas baru berawalan fin2-anggaran-.
   GUI/F3/BUDGET-VS-ACTUAL: track 16 → --space-5, radius 5 → --radius-xs, persen mono 11.5 → --text-xs. */

/* ---------- sel Kategori ---------- */
.fin2 [data-screen="anggaran"] .fin2-anggaran-name { display: block; overflow: hidden; font-weight: var(--fw-medium); color: var(--text-strong); text-overflow: ellipsis; white-space: nowrap; }
.fin2 [data-screen="anggaran"] .fin2-anggaran-sub { display: block; font-size: var(--text-xs); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="anggaran"] .fin2-anggaran-sub .fin2-mono { white-space: nowrap; }

/* ---------- sel Realisasi: track + persen + tag (tag = bukan warna saja) ---------- */
.fin2 [data-screen="anggaran"] .fin2-anggaran-real { display: grid; grid-template-columns: minmax(0, 1fr) 5ch 15ch; align-items: center; gap: var(--space-2) var(--space-3); width: 100%; min-width: 0; }
.fin2 [data-screen="anggaran"] .fin2-anggaran-track { display: block; height: var(--space-5); overflow: hidden; border-radius: var(--radius-xs); background: var(--ink-050); }
.fin2 [data-screen="anggaran"] .fin2-anggaran-fill { display: block; width: var(--pct); height: 100%; border-radius: inherit; background: var(--ink-950); }
.fin2 [data-screen="anggaran"] .fin2-anggaran-fill.is-over { background: var(--tag-danger-text); }
.fin2 [data-screen="anggaran"] .fin2-anggaran-real > .vs-tag { justify-self: start; }
.fin2 [data-screen="anggaran"] .fin2-anggaran-pct { font-size: var(--text-xs); color: var(--text-muted); text-align: right; white-space: nowrap; }

/* ---------- sel angka ---------- */
.fin2 [data-screen="anggaran"] .fin2-anggaran-muted .fin2-amt { color: var(--text-muted); }
.fin2 [data-screen="anggaran"] .fin2-anggaran-strong .fin2-amt { font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2 [data-screen="anggaran"] .fin2-anggaran-var { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--fw-semibold); white-space: nowrap; }
.fin2 [data-screen="anggaran"] .fin2-anggaran-varw { font-family: var(--font-body); }
.fin2 [data-screen="anggaran"] .fin2-anggaran-var.is-over, .fin2 [data-screen="anggaran"] .fin2-anggaran-var.is-over .fin2-amt { color: var(--tag-danger-text); }
.fin2 [data-screen="anggaran"] .fin2-anggaran-var.is-left, .fin2 [data-screen="anggaran"] .fin2-anggaran-var.is-left .fin2-amt { color: var(--accent-mint); }

/* jarak kolom 8 (unit: 14) agar lima kolom muat di kartu 726px tanpa gulir samping; mode kartu memakai jarak core */
.fin2 [data-screen="anggaran"] .fin2-anggaran-card .fin2-grid:not(.fin2-grid--card) .fin2-grid__row { column-gap: var(--space-3); }

/* ---------- baris Total = opsi totals grid core (--surface-1, C25c); nilai tebal seperti unit FM 599 ---------- */
.fin2 [data-screen="anggaran"] .fin2-grid__row--total .fin2-amt { font-weight: var(--fw-bold); }

/* ---------- lebar sempit (finroot ≤900 = kartu ≤900): tag status turun ke bawah track agar kolom angka tetap muat ---------- */
@container finroot (max-width: 900px) {
  .fin2 [data-screen="anggaran"] .fin2-anggaran-real { grid-template-columns: minmax(0, 1fr) 5ch; row-gap: var(--space-2); }
  .fin2 [data-screen="anggaran"] .fin2-anggaran-real > .vs-tag { grid-column: 1 / -1; }
  .fin2 [data-screen="anggaran"] .fin2-anggaran-name { white-space: normal; }
}

/* ---------- kompak: kartu per kategori ---------- */
@container finbody (max-width: 700px) {
  .fin2 [data-screen="anggaran"] .fin2-anggaran-name { white-space: normal; }
  /* kartu: track lebar penuh, tag kembali sebaris dengan persen */
  .fin2 [data-screen="anggaran"] .fin2-anggaran-real { grid-template-columns: minmax(0, 1fr) 5ch auto; }
  .fin2 [data-screen="anggaran"] .fin2-anggaran-real > .vs-tag { grid-column: auto; }
  /* kartu per kategori: judul → track lebar penuh → kv Anggaran/Aktual/Selisih */
  .fin2 [data-screen="anggaran"] .fin2-grid--card [data-card="status"] { order: 1; margin-block: var(--space-1) var(--space-2); }
}
@container finbody (max-width: 480px) {
  /* nilai rupiah pendek muat sebaris dengan labelnya (core ≤480 menumpuk label di atas nilai) */
  .fin2 [data-screen="anggaran"] .fin2-grid--card [data-card="kv"] { flex-direction: row; align-items: baseline; justify-content: space-between; text-align: right; }
}

/* hapus anggaran di dialog Ubah anggaran (owner 24 Sep 2026): aksi sekunder terpisah dari kaki dialog */
.fin2 .fin2-anggaran-del { display: flex; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-faint); }

/* == screen:database == */
/* finance-v2 · css/screens/database.css · komposisi layar Database (SPEC §10.13).
   Setiap selektor diawali [data-screen="database"]; kelas baru berawalan fin2-database-.
   Token-only; query hanya container finbody (SPEC §8.8). */

/* kolom sesudah Nominal (rata kanan) diberi napas di sisi kiri, tanpa melebarkan jalur kolom (Status tetap terlihat di 1024) */
.fin2 [data-screen="database"] .fin2-grid:not(.fin2-grid--card) .fin2-grid__th[data-align="end"] + .fin2-grid__th, .fin2 [data-screen="database"] .fin2-grid:not(.fin2-grid--card) .fin2-grid__cell[data-align="end"] + .fin2-grid__cell { padding-left: var(--space-4); }
.fin2 [data-screen="database"] .fin2-database-code { color: var(--text-strong); font-weight: var(--fw-semibold); white-space: nowrap; }
/* kartu kompak: judul Kode boleh patah di spasi ("FIN" / "0923-0008") bila nominal panjang + pilih + kebab memakan baris */
.fin2 [data-screen="database"] .fin2-grid--card .fin2-database-code { white-space: normal; }
.fin2 [data-screen="database"] .fin2-database-strong { font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2 [data-screen="database"] .fin2-database-1l { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin2 [data-screen="database"] .fin2-database-src { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; }
.fin2 [data-screen="database"] .fin2-database-srcl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.fin2 [data-screen="database"] .fin2-database-void .fin2-database-code { color: var(--text-muted); text-decoration: line-through; }
/* lebar: arah antar kas sebagai sub di sel Nominal (kolom Arah digabung) */
/* subtotal halaman: pasangan masuk · keluar berjarak jelas (pemisah body xs lebih kecil dari angka mono) */
.fin2 [data-screen="database"] .fin2-database-psum { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.fin2 [data-screen="database"] .fin2-database-dir { display: block; }

/* detail drawer */
.fin2 [data-screen="database"] .fin2-database-muted { color: var(--text-muted); font-weight: var(--fw-regular); }
.fin2 [data-screen="database"] .fin2-database-bad { color: var(--tag-danger-text); }
.fin2 [data-screen="database"] .fin2-database-tags { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.fin2 [data-screen="database"] .fin2-detail__foot [data-danger="true"]:not([aria-disabled="true"]) { color: var(--tag-danger-text); }

/* konfirmasi hapus: dua paragraf badan diberi jarak */
.fin2 [data-screen="database"] .fin2-confirm__b p { margin: 0; }
.fin2 [data-screen="database"] .fin2-confirm__b p + p { margin-top: var(--space-2); }

/* pratinjau bereskan yatim (dialog) */
.fin2 [data-screen="database"] .fin2-database-sweep { border-top: 1px solid var(--border-faint); }
.fin2 [data-screen="database"] .fin2-database-sweep .fin2-row__body { padding-inline: 0; }
.fin2 [data-screen="database"] .fin2-database-prog:empty { display: none; }
.fin2 [data-screen="database"] .fin2-database-prog { margin-top: var(--space-3); }

@container finbody (max-width:700px) {
  .fin2 [data-screen="database"] .fin2-database-src { align-items: flex-end; }
  .fin2 [data-screen="database"] .fin2-database-srcl { justify-content: flex-end; }
}
@container finbody (max-width:480px) {
  .fin2 [data-screen="database"] .fin2-database-src { align-items: flex-start; }
  /* kartu mini dengan pilih + kebab (Super Admin): nominal turun ke baris sendiri di bawah Kode, rata kanan,
     supaya nominal panjang tidak menimpa Kode di 320–390 (uang tidak pernah dipatah) */
  .fin2 [data-screen="database"] .fin2-grid--card.fin2-grid--kebab [data-card="amt"] { grid-column: 2 / -1; grid-row: 2; margin-left: 0; }
}

/* == screen:reconciliation == */
/* finance-v2 · css/screens/reconciliation.css · komposisi layar Rekonsiliasi (SPEC §10.14).
   Setiap selektor diawali [data-screen="reconciliation"]; kelas baru berawalan fin2-reconciliation-. Token-only.
   Unit: GUI/F3/RECONCILIATION FM 482-514 (tile + tabel dalam satu kartu) · GUI/09/EMPTY-STATE (state bersih). */

/* kartu paritas: 4 tile di atas tabel (tile ke-4 tinta = focal) */
.fin2 [data-screen="reconciliation"] .fin2-reconciliation-tiles { padding: 0 var(--space-5) var(--space-5); }
/* 4 tile sebaris bila muat (FM 489 repeat(4,1fr)); bila turun, tile tinta Paritas meregang selebar baris */
.fin2 [data-screen="reconciliation"] .fin2-reconciliation-tl { display: flex; flex-wrap: wrap; }
.fin2 [data-screen="reconciliation"] .fin2-reconciliation-tl > .fin2-tile { flex: 1 1 22ch; min-width: 0; }
.fin2 [data-screen="reconciliation"] .fin2-reconciliation-sub { margin: 0; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-faint); font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-strong); }
.fin2 [data-screen="reconciliation"] .fin2-reconciliation-src { font-weight: var(--fw-semibold); color: var(--text-strong); overflow-wrap: break-word; }
.fin2 [data-screen="reconciliation"] .fin2-reconciliation-nb { white-space: nowrap; }
.fin2 [data-screen="reconciliation"] .fin2-reconciliation-diff { color: var(--text-muted); }
.fin2 [data-screen="reconciliation"] .fin2-reconciliation-rp { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin2 [data-screen="reconciliation"] .fin2-reconciliation-diff.is-diff { color: var(--tag-danger-text); white-space: nowrap; }
.fin2 [data-screen="reconciliation"] .fin2-reconciliation-diff.is-diff .fin2-amt { color: inherit; }
/* kata arah selisih: font body, nominal tetap mono */
.fin2 [data-screen="reconciliation"] .fin2-reconciliation-dw { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-semibold); }

/* dua kartu pendek berdampingan (grid 48ch §7.3). Tabel antrean minCh 46 muat di kolom 48ch; tabel dobel posting minCh 72,
   jadi saat barisnya ada kolom pasangan minimum 74ch (berdampingan hanya bila tabel itu muat, bukan gulir sempit) */
.fin2 [data-screen="reconciliation"] .fin2-reconciliation-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 48ch), 1fr)); align-items: start; gap: var(--space-5); min-width: 0; }
.fin2 [data-screen="reconciliation"] .fin2-reconciliation-pair.is-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 74ch), 1fr)); }
.fin2 [data-screen="reconciliation"] .fin2-reconciliation-pair > .fin2-card { min-width: 0; }

/* state bersih: garis tegas (bukan putus-putus kosong), disc sukses */
.fin2 [data-screen="reconciliation"] .fin2-reconciliation-clean { border-style: solid; border-color: var(--border-faint); background: var(--surface-1); }
.fin2 [data-screen="reconciliation"] .fin2-reconciliation-clean .fin2-state__disc { background: var(--tag-success-bg); color: var(--tag-success-text); }

/* == screen:closing == */
/* finance-v2 · css/screens/closing.css · komposisi layar Closing (SPEC §10.15).
   Setiap selektor diawali [data-screen="closing"]; kelas baru berawalan fin2-closing-. Token-only.
   Unit: GUI/F3/MONTHLY-SUMMARY FM 603-621 (via core ui.summaryRows) · field Rp GUI/03 · GUI/11/DATA-GRID. */

/* dua kartu berdampingan, turun bertumpuk (grid 44ch §7.3) */
.fin2 [data-screen="closing"] .fin2-closing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 44ch), 1fr)); align-items: start; gap: var(--space-5); min-width: 0; }
.fin2 [data-screen="closing"] .fin2-closing-grid > * { min-width: 0; }

/* panel tutup kas harian */
.fin2 [data-screen="closing"] .fin2-closing-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="closing"] .fin2-closing-status > * { flex: 0 1 auto; }
.fin2 [data-screen="closing"] .fin2-closing-work { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--border-faint); }
.fin2 [data-screen="closing"] .fin2-closing-count input { font-family: var(--font-mono); font-size: var(--text-md); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; text-align: right; }
.fin2 [data-screen="closing"] .fin2-closing-diff { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); background: var(--surface-1); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); }
.fin2 [data-screen="closing"] .fin2-closing-diff__l { font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="closing"] .fin2-closing-diff__v { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.fin2 [data-screen="closing"] .fin2-closing-diff__v > * { flex: 0 1 auto; }
.fin2 [data-screen="closing"] .fin2-closing-diff__v .fin2-nil { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--fw-bold); color: var(--text-muted); }
.fin2 [data-screen="closing"] .fin2-closing-diff__s { max-width: 64ch; margin: 0; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="closing"] .fin2-closing-go { align-self: flex-start; }
.fin2 [data-screen="closing"] .fin2-closing-go.vs-btn--block { align-self: stretch; }
.fin2 [data-screen="closing"] .fin2-closing-done { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-faint); }
.fin2 [data-screen="closing"] .fin2-closing-done dd { flex-wrap: wrap; }
.fin2 [data-screen="closing"] .fin2-closing-note { max-width: 64ch; margin: 0; font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="closing"] .fin2-closing-last { margin: 0; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="closing"] .fin2-closing-rp { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* kompak: judul kecil rincian perkiraan setelah blok hitung */
.fin2 [data-screen="closing"] .fin2-closing-daycard.is-split .fin2-sum:first-child > .fin2-sum__row--ink { margin-top: 0; }
.fin2 [data-screen="closing"] .fin2-closing-bd { margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--border-faint); font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--text-muted); }

/* kartu tutup buku bulanan */
.fin2 [data-screen="closing"] .fin2-closing-per { display: block; font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2 [data-screen="closing"] .fin2-closing-per__s { display: block; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }

/* kompak: tiap periode satu baris grid (periode + status | aksi), bukan kartu bertingkat tiga */
@container finbody (max-width: 700px) {
  .fin2 [data-screen="closing"] .fin2-closing-percard .fin2-grid--card .fin2-grid__row:not(.fin2-grid__row--group):not(.fin2-grid__row--full):not(.fin2-grid__row--gfoot) { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: center; padding-block: var(--space-3); }
  .fin2 [data-screen="closing"] .fin2-closing-percard .fin2-grid--card [data-card="title"] { grid-column: 1; grid-row: 1; }
  .fin2 [data-screen="closing"] .fin2-closing-percard .fin2-grid--card [data-card="status"] { grid-column: 1; grid-row: 2; order: 0; }
  .fin2 [data-screen="closing"] .fin2-closing-percard .fin2-grid--card [data-card="act"] { grid-column: 2; grid-row: 1 / span 2; order: 0; }
  .fin2 [data-screen="closing"] .fin2-closing-percard .fin2-grid--card [data-card="act"] > * { flex: 0 1 auto; }
}
/* == screen:import == */
/* finance-v2 · css/screens/import.css · komposisi layar Import (SPEC §10.16).
   Setiap selektor diawali [data-screen="import"]; kelas baru berawalan fin2-import-.
   Token-only; query hanya container finbody (SPEC §8.8). */

/* kolom angka rata kanan diberi napas sebelum kolom teks berikutnya (lebar saja; kompak = kartu) */
.fin2 [data-screen="import"] .fin2-grid:not(.fin2-grid--card) [data-align="end"] { padding-right: var(--space-4); }

/* panel Import CSV (GUI/03/FILE-UPLOAD) */
.fin2 [data-screen="import"] .fin2-import-wrap { display: flex; flex-direction: column; min-width: 0; }
.fin2 [data-screen="import"] .fin2-import-panel .fin2-card__pad { gap: var(--space-4); }
.fin2 [data-screen="import"] .fin2-import-cols, .fin2 [data-screen="import"] .fin2-import-info { max-width: 72ch; margin: 0; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
/* "Kolom:" + daftar kolom yang membungkus per item (label tetap di kiri, item turun di bawah item) */
.fin2 [data-screen="import"] .fin2-import-cols { display: flex; align-items: baseline; gap: var(--space-2); }
.fin2 [data-screen="import"] .fin2-import-cols__l { flex: 0 0 auto; }
.fin2 [data-screen="import"] .fin2-import-collist { display: flex; flex: 1 1 0; flex-wrap: wrap; gap: var(--space-1) var(--space-4); min-width: 0; margin: 0; padding: 0; list-style: none; }
.fin2 [data-screen="import"] .fin2-import-collist > li { flex: 0 1 auto; min-width: 0; }
/* nama kolom = kotak kode kecil agar "Trx ID" dan "Trx Date" terbaca sebagai dua kolom (tangga --surface-1 + --border-faint) */
.fin2 [data-screen="import"] .fin2-import-coln { padding: 0 var(--space-1); border: 1px solid var(--border-faint); border-radius: var(--radius-xs); background: var(--surface-1); font-weight: var(--fw-semibold); color: var(--text-body); white-space: nowrap; }
.fin2 [data-screen="import"] .fin2-import-paste { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.fin2 [data-screen="import"] .fin2-import-toggle { padding-inline: 0; }
.fin2 [data-screen="import"] .fin2-import-pastebox { align-self: stretch; }
.fin2 [data-screen="import"] .fin2-import-pastebox .fin2-textarea { font-size: var(--text-xs); line-height: var(--lh-normal); }
.fin2 [data-screen="import"] .fin2-import-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.fin2 [data-screen="import"] .fin2-import-acts > .vs-btn { flex: 0 1 auto; }
.fin2 [data-screen="import"] .fin2-import-err { margin: 0; font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--tag-danger-text); }

/* job & hasil (WSP/18/STATUS-BAR) */
.fin2 [data-screen="import"] .fin2-import-job { display: flex; flex-direction: column; gap: var(--space-3); }
/* fokus hasil (tabindex -1): cincin 2px core F60, tanpa bayangan lokal ganda */
.fin2 [data-screen="import"] .fin2-import-result { border-radius: var(--radius-sm); }

/* pratinjau */
/* sesudah pratinjau layar digulir ke alert baris tidak valid: beri napas dari tepi atas */
.fin2 [data-screen="import"] .fin2-import-bad, .fin2 [data-screen="import"] .fin2-import-card { scroll-margin-top: var(--space-5); }
.fin2 [data-screen="import"] .fin2-import-badlist { margin: 0 0 var(--space-2); padding-left: var(--space-6); }
.fin2 [data-screen="import"] .fin2-import-badlist li + li { margin-top: var(--space-1); }
.fin2 [data-screen="import"] .fin2-import-trx { font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2 [data-screen="import"] .fin2-import-desc { display: block; min-width: 0; overflow-wrap: anywhere; color: var(--text-body); }
/* nama CoA boleh dua baris (tidak dipotong ellipsis) */
.fin2 [data-screen="import"] .fin2-import-coa { display: flex; flex-direction: column; min-width: 0; }
.fin2 [data-screen="import"] .fin2-import-coan { display: block; min-width: 0; overflow-wrap: anywhere; }

.fin2 [data-screen="import"] .fin2-import-why { flex: 1 1 100%; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }

/* pointer kasar: isi textarea kembali --text-md (cegah zoom iOS, SPEC §7.7) */
@media (pointer:coarse) {
  .fin2 [data-screen="import"] .fin2-import-pastebox .fin2-textarea { font-size: var(--text-md); }
}
/* kompak: kv CoA label kiri, kode + nama rata kanan; mini ≤480 mengikuti kv bertumpuk core (rata kiri) */
@container finbody (max-width:700px) {
  .fin2 [data-screen="import"] .fin2-grid--card .fin2-import-coa { flex: 0 1 auto; align-items: flex-end; text-align: right; }
}
@container finbody (max-width:480px) {
  .fin2 [data-screen="import"] .fin2-import-acts > .vs-btn { flex: 1 1 auto; }
  .fin2 [data-screen="import"] .fin2-grid--card .fin2-import-coa { align-items: flex-start; text-align: left; }
}

/* == screen:akun == */
/* finance-v2 · css/screens/akun.css · komposisi layar Kategori Keuangan (CoA) (SPEC §10.17).
   Setiap selektor diawali [data-screen="akun"]; kelas baru berawalan fin2-akun-.
   Pohon = ul bersarang; indentasi --space-6 per level (kompak --space-4); kepala level 1 = anatomi grup §4.4. */

.fin2 [data-screen="akun"] .fin2-akun-card { --fin2-akun-in: var(--space-6); }
.fin2 [data-screen="akun"] .fin2-akun-tree, .fin2 [data-screen="akun"] .fin2-akun-mains, .fin2 [data-screen="akun"] .fin2-akun-subs { margin: 0; padding: 0; list-style: none; }
.fin2 [data-screen="akun"] .fin2-akun-type { border-top: 1px solid var(--border-default); }

/* level 1 · account type */
.fin2 [data-screen="akun"] .fin2-akun-thead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: var(--fin2-ctl-h); padding: var(--space-3) var(--space-5); background: var(--surface-1); }
.fin2 [data-screen="akun"] .fin2-akun-tname { margin: 0; font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text-strong); }
.fin2 [data-screen="akun"] .fin2-akun-code { font-size: var(--text-xs); color: var(--text-muted); }

/* level 2 · main account */
.fin2 [data-screen="akun"] .fin2-akun-mhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-5) var(--space-2) calc(var(--space-5) + var(--fin2-akun-in)); border-top: 1px solid var(--border-faint); }
.fin2 [data-screen="akun"] .fin2-akun-mt { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); min-width: 0; }
.fin2 [data-screen="akun"] .fin2-akun-mname { margin: 0; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2 [data-screen="akun"] .fin2-akun-range { font-size: var(--text-xs); color: var(--text-muted); }
/* kode akun tidak pernah dipatah di tanda hubung ("1-11|00" di 320); kalimat rentang membungkus di spasi */
.fin2 [data-screen="akun"] span.fin2-mono { white-space: nowrap; }

/* level 3 · sub-account: nama menonjol + kode muted · tag status + scope · aksi */
.fin2 [data-screen="akun"] .fin2-akun-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2) var(--space-4); min-height: var(--field-h-lg); padding: var(--space-2) var(--space-5) var(--space-2) calc(var(--space-5) + var(--fin2-akun-in) * 2); border-top: 1px solid var(--border-faint); }
.fin2 [data-screen="akun"] .fin2-akun-st { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.fin2 [data-screen="akun"] .fin2-akun-sname { overflow: hidden; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-strong); text-overflow: ellipsis; white-space: nowrap; }
.fin2 [data-screen="akun"] .fin2-akun-sub.is-archived .fin2-akun-sname { color: var(--text-muted); }
.fin2 [data-screen="akun"] .fin2-akun-scode { font-size: var(--text-xs); color: var(--text-muted); }
.fin2 [data-screen="akun"] .fin2-akun-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.fin2 [data-screen="akun"] .fin2-akun-acts { display: flex; flex-wrap: nowrap; gap: var(--space-1); }
.fin2 [data-screen="akun"] .fin2-akun-none { padding: var(--space-3) var(--space-5) var(--space-3) calc(var(--space-5) + var(--fin2-akun-in) * 2); border-top: 1px solid var(--border-faint); font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }

/* mapping integrasi */
.fin2 [data-screen="akun"] .fin2-akun-selw { display: flex; flex-direction: column; gap: var(--space-1); width: 34ch; max-width: 100%; }
.fin2 [data-screen="akun"] .fin2-akun-sel, .fin2 [data-screen="akun"] .fin2-akun-sel select { width: 100%; }
.fin2 [data-screen="akun"] .fin2-akun-err { margin: 0; text-align: left; }
.fin2 [data-screen="akun"] .fin2-akun-bound { font-size: var(--text-sm); color: var(--text-strong); text-align: right; }
.fin2 [data-screen="akun"] .fin2-akun-bound.is-none { color: var(--text-muted); }
.fin2 [data-screen="akun"] .fin2-akun-mapcard .fin2-row__body { align-items: center; }
/* C14: alasan "Simpan" nonaktif terlihat saat sentuh atau bukan lebar (pemicu sama dengan alasan kaki overlay di core),
   di bawah tombol; lebar alasan tidak ikut melebarkan kolom aksi (contain) */
.fin2 [data-screen="akun"]:is(:root[data-fin2-touch="true"] *) .fin2-akun-map .fin2-row__acts .fin2-reason:not([hidden]), .fin2 [data-screen="akun"]:is(:root:not([data-fin2-w="lebar"]) *) .fin2-akun-map .fin2-row__acts .fin2-reason:not([hidden]) { position: static; flex: 1 0 100%; width: auto; height: auto; margin: 0; overflow: visible; white-space: normal; clip-path: none; contain: inline-size; font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); text-align: right; }

@container finbody (max-width: 700px) {
  .fin2 [data-screen="akun"] .fin2-akun-card { --fin2-akun-in: var(--space-4); }
  .fin2 [data-screen="akun"] .fin2-akun-thead { padding-inline: var(--space-4); }
  .fin2 [data-screen="akun"] .fin2-akun-mhead { padding-right: var(--space-4); padding-left: calc(var(--space-4) + var(--fin2-akun-in)); }
  .fin2 [data-screen="akun"] .fin2-akun-sub { grid-template-columns: minmax(0, 1fr) auto; padding-right: var(--space-4); padding-left: calc(var(--space-4) + var(--fin2-akun-in) * 2); }
  .fin2 [data-screen="akun"] .fin2-akun-st { grid-column: 1; grid-row: 1; }
  .fin2 [data-screen="akun"] .fin2-akun-acts { grid-column: 2; grid-row: 1 / span 2; }
  .fin2 [data-screen="akun"] .fin2-akun-tags { grid-column: 1; grid-row: 2; justify-content: flex-start; }
  .fin2 [data-screen="akun"] .fin2-akun-sname { white-space: normal; }
  .fin2 [data-screen="akun"] .fin2-akun-none { padding-left: calc(var(--space-4) + var(--fin2-akun-in) * 2); }
  .fin2 [data-screen="akun"] .fin2-akun-map .fin2-row__end { align-items: stretch; width: 100%; }
  .fin2 [data-screen="akun"] .fin2-akun-selw { width: 100%; min-width: 0; }
  .fin2 [data-screen="akun"] .fin2-akun-bound { text-align: left; }
  .fin2 [data-screen="akun"]:is(:root[data-fin2-touch="true"] *) .fin2-akun-map .fin2-row__acts .fin2-reason:not([hidden]), .fin2 [data-screen="akun"]:is(:root:not([data-fin2-w="lebar"]) *) .fin2-akun-map .fin2-row__acts .fin2-reason:not([hidden]) { text-align: left; }
}

/* == screen:pedoman == */
/* finance-v2 · css/screens/pedoman.css · komposisi layar Pedoman (SPEC §10.18).
   Setiap selektor diawali [data-screen="pedoman"]; kelas baru berawalan fin2-pedoman-.
   Anatomi AS split view L596-629: daftar | isi. Item aktif = fill tinta (tanpa tick kuning, L5). Tanpa kuning. */

/* ---------- split view ---------- */
.fin2 [data-screen="pedoman"] .fin2-pedoman-split { display: grid; grid-template-columns: minmax(28ch, 36ch) minmax(0, 1fr); align-items: start; gap: var(--space-5); min-width: 0; }
.fin2 [data-screen="pedoman"] .fin2-pedoman-split.is-single { grid-template-columns: minmax(0, 1fr); }
.fin2 [data-screen="pedoman"] .fin2-pedoman-split > * { min-width: 0; }
.fin2 [data-screen="pedoman"] .fin2-pedoman-split:not(.is-single) > .fin2-pedoman-nav { position: sticky; top: var(--space-5); max-height: calc(100dvh - var(--space-11)); overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.fin2 [data-screen="pedoman"] .fin2-pedoman-skel { padding: var(--space-5); }

/* daftar tautan artikel: grid ikon | judul + tag; aktif = fill --ink-950 */
.fin2 [data-screen="pedoman"] .fin2-pedoman-link .fin2-row__tags { margin-top: var(--space-1); }
.fin2 [data-screen="pedoman"] .fin2-pedoman-link .fin2-row__hit { color: inherit; text-decoration: none; }
.fin2 [data-screen="pedoman"] .fin2-pedoman-link.is-on { background: var(--ink-950); }
.fin2 [data-screen="pedoman"] .fin2-pedoman-link.is-on:hover { background: var(--ink-950); }
.fin2 [data-screen="pedoman"] .fin2-pedoman-link.is-on .fin2-row__title { color: var(--text-on-dark); }
.fin2 [data-screen="pedoman"] .fin2-pedoman-link.is-on .fin2-ic { background: color-mix(in srgb, var(--text-on-dark) 16%, transparent); border-color: color-mix(in srgb, var(--text-on-dark) 24%, transparent); color: var(--text-on-dark); }
.fin2 [data-screen="pedoman"] .fin2-pedoman-link.is-on .fin2-row__hit:focus-visible { box-shadow: inset 0 0 0 var(--space-1) var(--focus-ring-brand); }

/* ---------- kartu artikel ---------- */
.fin2 [data-screen="pedoman"] .fin2-pedoman-art .fin2-card__title { font-size: var(--text-h3); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); }
.fin2 [data-screen="pedoman"] .fin2-pedoman-art .fin2-card__pad { padding-top: 0; }
/* urutan isi: ringkasan → meta → isi (SPEC §10.18) */
.fin2 [data-screen="pedoman"] .fin2-pedoman-art__sum { max-width: 64ch; font-size: var(--text-md); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="pedoman"] .fin2-pedoman-art__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted); }
.fin2 [data-screen="pedoman"] .fin2-pedoman-art__sum + .fin2-pedoman-art__meta { margin-top: var(--space-3); }
.fin2 [data-screen="pedoman"] .fin2-pedoman-art__meta > * { flex: 0 1 auto; }

/* isi markdown: lebar baca 72ch, --text-md / --lh-relaxed */
.fin2 [data-screen="pedoman"] .fin2-pedoman-md { max-width: 72ch; margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border-faint); font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--text-body); }
.fin2 [data-screen="pedoman"] .fin2-pedoman-md > * + * { margin-top: var(--space-4); }
.fin2 [data-screen="pedoman"] .fin2-pedoman-md h4 { margin-top: var(--space-7); font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--text-strong); }
.fin2 [data-screen="pedoman"] .fin2-pedoman-md h4:first-child { margin-top: 0; }
.fin2 [data-screen="pedoman"] .fin2-pedoman-md h5 { margin-top: var(--space-6); font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2 [data-screen="pedoman"] .fin2-pedoman-md ul, .fin2 [data-screen="pedoman"] .fin2-pedoman-md ol { display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-7); }
.fin2 [data-screen="pedoman"] .fin2-pedoman-md strong { font-weight: var(--fw-semibold); color: var(--text-strong); }
.fin2 [data-screen="pedoman"] .fin2-pedoman-md code { padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); background: var(--ink-050); font-family: var(--font-mono); font-size: var(--text-sm); }
.fin2 [data-screen="pedoman"] .fin2-pedoman-md__a { font-weight: var(--fw-semibold); color: var(--text-strong); text-decoration: underline; }

/* layar penuh artikel (kompak) */
.fin2 [data-screen="pedoman"] .fin2-pedoman-screen .fin2-pedoman-md { margin-top: var(--space-4); }
/* hapus di kaki layar penuh = aksi berbahaya: teks bahaya (di lebar sudah bertanda bahaya di menu) */
.fin2 [data-screen="pedoman"] .fin2-pedoman-del { color: var(--tag-danger-text); }
.fin2 [data-screen="pedoman"] .fin2-pedoman-del:hover { color: var(--tag-danger-text); border-color: var(--tag-danger-text); }

/* baris "Kode: not_found · <slug>" (artikel tidak ditemukan): slug berstrip tidak pecah di tengah baris lalu menimpa
   token sebelumnya; token utuh turun baris, token yang lebih lebar dari kotak tetap boleh dipatah */
.fin2 [data-screen="pedoman"] .fin2-state__code .fin2-mono { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }

/* ---------- kompak: satu kolom; artikel dibuka sebagai layar penuh ---------- */
@container finbody (max-width: 700px) {
  .fin2 [data-screen="pedoman"] .fin2-pedoman-split { grid-template-columns: minmax(0, 1fr); }
  .fin2 [data-screen="pedoman"] .fin2-pedoman-split > .fin2-pedoman-art, .fin2 [data-screen="pedoman"] .fin2-pedoman-skel--art { display: none; }
  .fin2 [data-screen="pedoman"] .fin2-pedoman-split:not(.is-single) > .fin2-pedoman-nav { position: static; max-height: none; overflow: clip; }
}

/* == production-shell == (khusus produksi; bukan dari prototype) */
.fin2-mock-label { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: var(--text-sm); }
/* font produksi (Geist) sedikit lebih lebar dari Fivo prototype: nomor rekening boleh turun baris di tanda hubung */
.fin2 [data-screen="transaksi"] .fin2-transaksi-nb { white-space: normal; }