/* =====================================================================
   RESET
   ===================================================================== */
*{ box-sizing: border-box; }
html, body{ margin: 0; min-height: 100%; }

body{
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, color .2s;
}

h1, h2, h3{ margin: 0; font-weight: 700; letter-spacing: -.01em; }
p{ margin: 0; }
button{ font-family: inherit; }

/* app-like feel: teks non-interaktif gak bisa di-select/drag/context-menu */
h1, h2, h3, p, label, .muted, .val, .label{
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
button, input, select, textarea, a{
  -webkit-user-select: auto; user-select: auto;
  -webkit-touch-callout: default; touch-action: manipulation;
}

/* WAJIB: komponen kayak .modal-bg.open{display:flex} atau .tabpane.active
   punya specificity class-vs-class jadi aman, TAPI [hidden] (dipakai di
   lock-overlay) specificity-nya sama kayak class display:flex manapun --
   tanpa ini elemen hidden="" bisa ketiban keliatan. */
[hidden]{ display: none !important; }