:root {
    --brand: #0d6efd;
    --brand-dark: #0a58ca;
    --ok: #198754;
    --warn: #fd7e14;
    --danger: #dc3545;
  }

  body {
    font-family: 'Sarabun', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #f2f4f8;
    -webkit-tap-highlight-color: transparent;
    padding-bottom: 2rem;
  }

  .app-header {
    background: linear-gradient(135deg, var(--brand) 0%, #6610f2 100%);
    color: #fff;
    padding: 1.1rem 1rem 1.4rem;
    border-radius: 0 0 1.25rem 1.25rem;
    box-shadow: 0 4px 14px rgba(13, 110, 253, .25);
  }
  .app-header h1 { font-size: 1.25rem; font-weight: 700; margin: 0; }
  .app-header .subtitle { font-size: .85rem; opacity: .9; }

  .container-app { max-width: 640px; }

  .card-soft {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .07);
  }

  /* ปุ่มใหญ่หน้าแรก */
  .btn-action {
    border: none;
    border-radius: 1rem;
    padding: 1.4rem .75rem;
    width: 100%;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    box-shadow: 0 6px 16px rgba(16, 24, 40, .16);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  }
  .btn-action:active { transform: scale(.97); filter: brightness(.95); }
  .btn-action .icon { display: block; font-size: 2.2rem; line-height: 1; margin-bottom: .4rem; }
  .btn-borrow { background: linear-gradient(135deg, #0d6efd, #4dabf7); }
  .btn-return { background: linear-gradient(135deg, #198754, #40c057); }
  .btn-verify { background: linear-gradient(135deg, #0dcaf0, #0aa2c0); }
  .btn-verify .icon { font-size: 1.9rem; }
  .verify-count { font-weight: 400; font-size: .9rem; opacity: .9; }

  /* กล่องสแกน */
  #reader { width: 100%; border-radius: .75rem; overflow: hidden; background: #000; }
  #reader video { width: 100% !important; height: auto !important; border-radius: .75rem; }
  #reader img[alt="Info icon"] { display: none; }

  /* โหมดสแกนต่อเนื่อง */
  #scanFeedback:empty { display: none; }
  .scan-flash {
    border-radius: .6rem;
    padding: .5rem .75rem;
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
    animation: flashIn .18s ease-out;
  }
  .scan-flash.ok   { background: #d1e7dd; color: #0f5132; }
  .scan-flash.bad  { background: #f8d7da; color: #842029; }
  .scan-flash.wait { background: #e7f1ff; color: #084298; }
  @keyframes flashIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

  .scan-list {
    max-height: 9.5rem;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: .6rem;
    background: #fff;
  }
  .scan-list .scan-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem .6rem;
    font-size: .82rem;
    border-bottom: 1px solid #f1f3f5;
  }
  .scan-list .scan-item:last-child { border-bottom: none; }
  .scan-list .scan-item .txt { flex: 1 1 auto; min-width: 0; }
  .scan-list .scan-item .txt .t1 { font-weight: 600; }
  .scan-list .scan-item .txt .t2 { color: #6c757d; font-size: .76rem; }

  .badge-status { font-size: .8rem; padding: .35rem .6rem; border-radius: .5rem; }
  .status-available { background: #d1e7dd; color: #0f5132; }
  .status-borrowed  { background: #fff3cd; color: #664d03; }
  .status-pending   { background: #cff4fc; color: #055160; }
  .status-overdue   { background: #f8d7da; color: #842029; }

  /* ป้าย "เช่า" — เป็นธงติดอุปกรณ์ ไม่ใช่สถานะรับ-คืน จึงใช้สีแยกจาก .status-* ข้างบน
     เพื่อไม่ให้ผู้ใช้สับสนว่าเป็นสถานะที่ 4 ของการรับ-คืน */
  .badge-rental {
    font-size: .75rem; padding: .3rem .55rem; border-radius: .5rem;
    background: #e2d9f3; color: #4b2e83; font-weight: 600;
  }

  .stat-box { border-radius: .9rem; padding: .8rem .5rem; text-align: center; background: #fff; }
  .stat-box .num { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
  .stat-box .lbl { font-size: .75rem; color: #6c757d; }

  .form-control-lg, .form-select-lg { border-radius: .75rem; font-size: 1rem; }
  .input-code { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }

  .table-sm td, .table-sm th { vertical-align: middle; font-size: .875rem; }

  .qr-card {
    border: 1px dashed #adb5bd;
    border-radius: .75rem;
    padding: .75rem;
    text-align: center;
    background: #fff;
    break-inside: avoid;
  }
  .qr-card canvas, .qr-card img { max-width: 100%; height: auto; }
  .qr-card .qr-id { font-weight: 700; margin-top: .4rem; font-size: .95rem; }
  .qr-card .qr-name { font-size: .78rem; color: #495057; word-break: break-word; }

  .fab-link {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 1030;
    border-radius: 2rem; box-shadow: 0 6px 16px rgba(16, 24, 40, .25);
  }

  @media print {
    .no-print { display: none !important; }
    body { background: #fff; padding: 0; }
    .qr-card { border: 1px solid #ced4da; page-break-inside: avoid; }
  }