/* LeuwongRR Step 10 mobile + production polish */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; height: auto; }
.table-responsive { border-radius: 16px; }
.card, .neon-card { overflow: hidden; }
.btn[disabled] { opacity: .75; cursor: not-allowed; }
.form-control, .form-select, .btn { min-height: 42px; }
.alert { border-radius: 16px; }

@media (max-width: 768px) {
  .container { padding-left: 14px; padding-right: 14px; }
  .navbar-brand img { height: 32px; }
  .navbar .btn, .navbar .nav-link { width: 100%; text-align: left; margin-top: 6px; }
  main.container { padding-top: 16px !important; padding-bottom: 24px !important; }
  h1, .h1 { font-size: 1.7rem; }
  h2, .h2 { font-size: 1.45rem; }
  h3, .h3 { font-size: 1.25rem; }
  .card-body { padding: 1rem !important; }
  .row.g-3, .row.g-4 { --bs-gutter-y: .8rem; }
  .table { min-width: 720px; font-size: .88rem; }
  .d-flex.flex-wrap.gap-2 > .btn { flex: 1 1 100%; }
  input, select, textarea { font-size: 16px !important; }
}

@media (max-width: 420px) {
  .btn { width: 100%; margin-bottom: .35rem; }
  .badge { white-space: normal; }
}