:root {
  --text2: #a49f95;
  --text3: #6f6a62;
  --focus-ring: #e85d26;
  --tap-size: 44px;
}
button, [role="button"], a, input, select, textarea { touch-action: manipulation; }
button:focus-visible, [role="button"]:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.skip-link {
  position: fixed; left: 12px; top: -80px; z-index: 10000;
  padding: 10px 14px; border-radius: 8px; background: #fff; color: #111;
}
.skip-link:focus { top: 12px; }
.logout-btn { min-width: var(--tap-size); min-height: var(--tap-size); border-radius: 8px; }
.nav-btn, .inner-tab, .fin-scope .tab-btn { min-height: 40px; }
.m-step, .ff-bar > .m-step:first-child { min-height: 28px; flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; }
.modal-close { min-width: var(--tap-size); min-height: var(--tap-size); }
.form-group[style*="position:relative"] > button[aria-label="Lihat password"] {
  width: var(--tap-size) !important; height: var(--tap-size) !important;
  min-width: var(--tap-size); min-height: var(--tap-size);
  top: 0 !important; right: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
}
.mobile-price-primary { font-weight: 800 !important; color: var(--text) !important; }
.mobile-price-primary .mono, .mobile-price-primary.mono { color: var(--green); font-size: 1.05em; }
.mobile-price-due .mono, .mobile-price-due.mono { color: var(--yellow); }
.fin-scope .total-row, .fin-scope tr.mobile-price-primary { background: rgba(232,93,38,.07); }
.fin-scope .page-header { gap: 14px; }
.fin-scope .modal-footer { position: sticky; bottom: 0; background: var(--bg2); z-index: 2; }
.ui-scroll-hint { display: none; }
@media (max-width: 768px) {
  body { padding-bottom: 12px; }
  .content { padding: 12px; }
  #page-content, #mainContent { padding-bottom: 12px; }
  label, .field-label, .card-title, .metric-label, .stat-label { font-size: 12px !important; }
  .detail-row { align-items: flex-start; gap: 12px; padding: 9px 0; }
  .detail-label { min-width: 38%; }
  .detail-val { word-break: normal; overflow-wrap: anywhere; }
  .fin-scope .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .fin-scope .stat-card { padding: 15px; }
  .fin-scope .stat-value { font-size: clamp(17px, 5vw, 21px); overflow-wrap: anywhere; }
  .fin-scope .toolbar > * { flex: 1 1 100%; min-width: 0; }
  .fin-scope .filter-select { min-height: var(--tap-size); width: 100%; }
  .modal-overlay, .fin-scope .modal-overlay {
    align-items: flex-end; padding: 0;
  }
  .modal, .fin-scope .modal {
    width: 100%; max-width: none; max-height: min(94dvh, 94vh);
    border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom);
  }
  .fin-scope .modal-header { padding: 16px; }
  .fin-scope .modal-body { padding: 16px; }
  .fin-scope .modal-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .fin-scope .modal-footer .btn { min-height: var(--tap-size); }
  .section-hdr, .fin-scope .page-header { align-items: flex-start; flex-wrap: wrap; }
  .section-hdr .add-btn, .fin-scope .page-header .btn { min-height: var(--tap-size); }
  .btn, .add-btn, .btn-sm, .role-btn, .upload-area,
  .fin-scope .btn, .fin-scope .btn-sm, .inner-tab, .fin-scope .tab-btn {
    min-height: var(--tap-size);
  }
  .fin-scope button { min-width: var(--tap-size); }
  .m-step, .ff-bar > .m-step:first-child { min-height: var(--tap-size); }
  .m-step button { min-width: 40px; }
  .topbar { padding-block: 8px; }
  .role-pill { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #toast, .notif { left: 12px; right: 12px; max-width: none; transform: none; text-align: left; }
  #toast { bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .metrics, .fin-scope .stats-grid { grid-template-columns: 1fr 1fr; }
  .metric { padding: 10px 7px; }
  .fin-scope .modal-footer { flex-direction: column-reverse; }
  .fin-scope .modal-footer .btn { width: 100%; justify-content: center; }
}
@media (prefers-contrast: more) {
  :root { --border: rgba(255,255,255,.18); --border2: rgba(255,255,255,.3); }
}