/* responsive (โหลดเป็นไฟล์สุดท้ายเพื่อให้ override ได้) */
/* ---------- responsive ---------- */
/* แท็บเล็ต */
@media (max-width: 960px) {
  .grid { grid-template-columns: 1fr; }
  .cards { gap: 16px; }
}
/* มือถือ */
@media (max-width: 760px) {
  body { font-size: 14px; }
  .topbar { padding: calc(14px + env(safe-area-inset-top)) 16px 4px; gap: 10px; }
  .page-title { font-size: 18px; }
  main { padding: 8px 16px calc(170px + env(safe-area-inset-bottom)); }
  .user-chip { max-width: 160px; }
  .loan-banner { gap: 14px; padding: 12px 14px; margin-bottom: 16px; }
  .lb-go { display: none; }

  .toolbar { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px; }
  .toolbar .seg { display: flex; }
  .toolbar .seg button { flex: 1; padding: 8px 0; }
  .nav { gap: 8px; }
  .nav .picker-btn { flex: 1; min-width: 0; padding: 10px 12px; }
  .nav #today { padding: 10px 14px; }
  .period-label { font-size: 17px; margin-bottom: 12px; }

  .cards { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
  .card { padding: 16px; border-radius: 18px; }
  .stat .v { font-size: clamp(15px, 4.6vw, 20px); margin-top: 6px; }
  .stat .k i { width: 24px; height: 24px; border-radius: 8px; }
  .grid { gap: 16px; margin-bottom: 16px; }
  .chart-box { height: 220px; }

  .list-head { gap: 10px; }
  .list-head input { width: 100%; order: 3; }
  .tx { gap: 10px; padding: 10px 6px; }
  .tx .ico { width: 36px; height: 36px; border-radius: 12px; }
  .tx .acts { display: none; }

  /* ช่องกรอก 16px กัน iOS ซูมอัตโนมัติ */
  input, textarea, .date-field { font-size: 16px; }
  dialog form { padding: 22px 20px; }
  .fab { width: 56px; height: 56px; right: calc(18px + env(safe-area-inset-right)); bottom: calc(92px + env(safe-area-inset-bottom)); }

  #login-view { padding: 72px 16px 24px; align-items: start; }
  .login-card { padding: 32px 22px; margin: auto 0; }
  .theme-fab { top: calc(16px + env(safe-area-inset-top)); right: 16px; }
}
/* มือถือจอเล็ก */
@media (max-width: 480px) {
  .topbar #user-name { display: none; }
  .topbar .user-chip { padding: 0 5px; }
  .topbar { gap: 8px; }
  .topbar .account, .topbar .account-actions { gap: 6px; }
  .topbar .btn-icon, .topbar .user-chip { width: 34px; height: 34px; border-radius: 11px; }
  .topbar .user-chip .avatar { width: 26px; height: 26px; }
  .topbar .demo-badge { padding: 3px 8px; font-size: 11px; }
  .topbar-logo { display: none !important; }
  .row2 { grid-template-columns: 1fr; gap: 0; }
  .card-head { flex-wrap: wrap; }
  .dialog-actions { gap: 8px; }
  .dialog-actions .btn { padding: 10px 14px; white-space: nowrap; }
  .btn-copy span { display: none; } /* จอเล็ก: เหลือแค่ icon (มี tooltip/aria-label) */
}
/* จอแคบมาก: ซ่อนป้ายโหมดทดลองใน topbar ให้ปุ่มพอดี */
@media (max-width: 400px) {
  .topbar .demo-badge { display: none; }
}