:root {
    /* Dark Navy */
    --bg: #0d1b35;
    --surface: #162641;
    --surface2: #1e3052;
    --border: #2c4c7c;
    --text: #e8f0fc;
    --muted: #8ab4d8;
    --accent: #f5821f;
    --accent2: #ff9840;
    --navy: #001e50;
    --accent-blue: #38bdf8;
    --green: #22c55e;
    --amber: #f59e0b;
    --red: #ef4444;
    --gold: #fbbf24;
    --radius: 12px;
    --radius-sm: 8px;
  }
  /* สลับแท็บแบบจางข้ามกัน — ค่าปริยายของเบราว์เซอร์คือ 250ms ซึ่งหน่วงเกินไป
     สำหรับการกดเมนูล่างรัว ๆ · เบราว์เซอร์ที่ไม่รองรับจะข้ามกฎนี้ทั้งก้อน */
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .16s; }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; font-size: 15px; min-height: 100vh; }

  /* ── Loading overlay ── */
  #loadingOverlay {
    position: fixed; inset: 0; background: var(--bg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 9999; transition: opacity 0.35s ease;
  }
  #loadingOverlay.fade-out { opacity: 0; pointer-events: none; }
  .loading-logo { font-size: 26px; font-weight: 700; color: var(--text); letter-spacing: -0.5px; margin-bottom: 24px; }
  .loading-logo span { color: #f5821f; }
  .loading-spinner {
    width: 34px; height: 34px; border: 3px solid var(--border);
    border-top-color: #f5821f; border-radius: 50%;
    animation: spin 0.75s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── Login page ── */
  .login-wrap {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px;
    background-image:
      radial-gradient(ellipse at 20% 60%, rgba(26,86,219,0.2) 0%, transparent 55%),
      radial-gradient(ellipse at 80% 20%, rgba(245,130,31,0.12) 0%, transparent 50%);
  }
  .login-card {
    background: var(--surface); border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius); padding: 40px 36px; width: 100%; max-width: 380px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.05) inset;
    position: relative; overflow: hidden;
    animation: card-in 0.4s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
  .login-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #1a56db 0%, #f5821f 50%, #1a56db 100%);
    background-size: 200%; animation: border-anim 4s linear infinite;
  }
  @keyframes border-anim { 0% { background-position: 0%; } 100% { background-position: 200%; } }
  .login-icon { display: flex; justify-content: center; margin-bottom: 16px; }
  .login-logo {
    font-size: 26px; font-weight: 700; letter-spacing: -1px; margin-bottom: 6px; text-align: center;
    background: linear-gradient(135deg, #f5821f 0%, #ffb060 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  }
  .login-sub { color: var(--muted); font-size: 13px; margin-bottom: 32px; text-align: center; }
  .login-footer { margin-top: 20px; text-align: center; font-size: 12px; color: var(--muted); line-height: 1.9; max-width: 340px; }
  .field { margin-bottom: 16px; }
  .field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
  .field input, .field select {
    width: 100%; padding: 11px 14px; background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text); font-size: 15px; outline: none; transition: border 0.2s;
  }
  .field input:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,130,31,0.15); }
  .btn-primary {
    width: 100%; padding: 13px; color: #fff; border: none;
    border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; cursor: pointer;
    background: linear-gradient(135deg, #f5821f 0%, #ff9a3c 100%);
    box-shadow: 0 4px 14px rgba(245,130,31,0.35);
    transition: all 0.2s; letter-spacing: 0.3px;
  }
  .btn-primary:hover { box-shadow: 0 6px 20px rgba(245,130,31,0.48); transform: translateY(-1px); }
  .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(245,130,31,0.3); }
  .err { color: var(--red); font-size: 13px; margin-top: 8px; display: none; }

  .app { display: none; min-height: 100vh; }
  .topbar {
    background: linear-gradient(90deg, #001028 0%, #001840 100%);
    border-bottom: 3px solid #f5821f;
    padding: 0 20px; --topbar-h: 56px; display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 16px rgba(0,0,0,0.28);
  }
  .topbar-logo { font-size: 18px; font-weight: 700; color: #ffffff; letter-spacing: -0.5px; flex-shrink: 0; }
  .topbar-logo span { color: #f5821f; }
  .topbar-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .avatar { width: 32px; height: 32px; border-radius: 50%; background: #f5821f; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
  .btn-logout { background: none; border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.8); padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; }
  .btn-logout:hover { color: #fff; border-color: #f5821f; }

  /* ===== STEP BADGE ===== */
  .step-badge-wrap { position: relative; }
  .step-badge-btn {
    cursor: pointer; display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px; padding: 5px 10px;
  }
  .step-badge-btn:hover { background: rgba(255,255,255,0.13); }
  .step-badge-label { font-size: 12px; color: rgba(255,255,255,0.85); }
  .step-badge-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #3b82f6; flex-shrink: 0;
    transition: background .3s;
  }
  .step-badge-dot.dot-red    { background: #ef4444; animation: sbPulse 1.5s ease-in-out infinite; }
  .step-badge-dot.dot-amber  { background: #f59e0b; animation: sbPulse 2s ease-in-out infinite; }
  .step-badge-dot.dot-blue   { background: #3b82f6; }
  .step-badge-dot.dot-green  { background: #22c55e; }
  @keyframes sbPulse { 0%,100%{opacity:1} 50%{opacity:.35} }

  .step-badge-dd {
    display: none; position: absolute; top: calc(100% + 8px); right: 0;
    width: 260px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 14px 16px; z-index: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  }
  .step-badge-dd.open { display: block; }
  .sb-dd-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .sb-dd-title { font-size: 13px; font-weight: 600; color: var(--text); }
  .sb-dd-tag { font-size: 10px; font-weight: 500; background: rgba(99,102,241,0.12);
               color: #818cf8; border-radius: 20px; padding: 2px 8px; }
  .sb-info-row { display: flex; justify-content: space-between; align-items: center;
                 padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
  .sb-info-row:last-of-type { border-bottom: none; }
  .sb-info-label { color: var(--muted); }
  .sb-info-val { font-weight: 600; }

  .sb-pt-compare { margin-top: 10px; background: var(--surface2);
                   border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
  .sb-pt-title { font-size: 10px; color: var(--muted); margin-bottom: 8px; font-weight: 500; }
  .sb-pt-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
  .sb-pt-row:last-child { margin-bottom: 0; }
  .sb-pt-tag { font-size: 10px; font-weight: 500; border-radius: 4px; padding: 2px 6px;
               white-space: nowrap; flex-shrink: 0; min-width: 60px; text-align: center; }
  .sb-pt-tag.cur  { background: rgba(59,130,246,0.15); color: #60a5fa; }
  .sb-pt-tag.next { background: rgba(245,158,11,0.15); color: #fbbf24; }
  .sb-pt-bar-bg { flex: 1; background: var(--border); border-radius: 4px; height: 18px;
                  overflow: hidden; position: relative; }
  .sb-pt-bar-fill { height: 18px; border-radius: 4px; display: flex; align-items: center;
                    padding-left: 6px; font-size: 10px; font-weight: 600; color: #fff; white-space: nowrap; }
  .sb-pt-diff { margin-top: 4px; text-align: right; font-size: 11px; font-weight: 600; color: #22c55e; }

  .sb-prog-wrap { margin-top: 10px; }
  .sb-prog-head { display: flex; justify-content: space-between; font-size: 11px;
                  color: var(--muted); margin-bottom: 4px; }
  .sb-prog-bg { background: var(--surface2); border-radius: 6px; height: 8px;
                border: 1px solid var(--border); overflow: hidden; }
  .sb-prog-fill { height: 8px; border-radius: 6px; background: linear-gradient(90deg,#3b82f6,#f59e0b); transition: width .4s; }
  .sb-prog-foot { display: flex; justify-content: space-between; font-size: 10px;
                  color: var(--muted); margin-top: 3px; }

  .nav-tabs { display: flex; gap: 4px; padding: 16px 20px 0; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; scroll-behavior: smooth; }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tab { padding: 8px 16px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer; font-size: 14px; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; transition: all 0.2s; white-space: nowrap; flex-shrink: 0; }
  .nav-tab.active { color: #f5821f; border-bottom-color: #f5821f; font-weight: 600; }
  /* Desktop: icon + label sit inline (unchanged look) */
  .nav-tab .nt-ic { margin-right: 5px; }
  .nav-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
  /* Focus ring for keyboard nav */
  .nav-tab:focus-visible { outline: 2px solid #f5821f; outline-offset: -2px; border-radius: 6px; }
  button:focus-visible { outline: 2px solid #f5821f; outline-offset: 2px; }

  /* Admin: แถวกลุ่ม + แถวแท็บย่อย */
  #adminView .nav-tabs.g-row { border-bottom: none; padding-bottom: 0; }
  #adminView .nav-tab.g-btn { font-weight: 600; }
  #adminView .nav-tabs.g-sub { display: none; padding-top: 4px; }
  #adminView .nav-tabs.g-sub.on { display: flex; }
  #adminView .nav-tabs.g-sub .nav-tab { font-size: 13px; padding: 6px 13px; }
  .g-dot { display: none; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: #ef4444; vertical-align: middle; }
  .g-dot.on { display: inline-block; }
  /* ตัวเลขแจ้งเตือนบนแท็บ — display:none ยังอยู่ inline เพราะ JS สั่งเปิด/ปิดด้วย style.display */
  .tab-badge { margin-left: 5px; padding: 1px 6px; border-radius: 20px; font-size: 10px; font-weight: 700; color: #fff; vertical-align: middle; background: #f59e0b; }
  .tab-badge.red { background: #ef4444; }

  /* หน้ากรอกข้อมูล: คำอ่านยอดเงิน + แถบเตือนก่อนกดบันทึก */
  .f-hint { min-height: 14px; margin-top: 3px; font-size: 11px; color: var(--muted); }
  .entry-warn { margin: 10px 0 0; padding: 9px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.75;
    background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.45); color: var(--text); }
  .btn-sm.btn-book { border-color: rgba(34,197,94,.5); color: #16a34a; font-weight: 600; }
  .btn-sm.btn-book:hover { border-color: #16a34a; background: rgba(34,197,94,.10); }

  .main { padding: 20px; max-width: 900px; margin: 0 auto; }

  .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; transition: box-shadow 0.2s, transform 0.2s; }
  .card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.14); }
  /* Disabled button styling */
  button:disabled { opacity: 0.45; cursor: not-allowed; }
  /* Input/select: prevent horizontal overflow on small screens */
  input, select, textarea { max-width: 100%; box-sizing: border-box; }
  .card-title { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
  .card-value { font-size: 28px; font-weight: 700; }

  .grade { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 700; font-size: 14px; }
  .grade-I { background: rgba(138,180,216,0.12); color: #a0c4e0; }
  .grade-M { background: rgba(56,189,248,0.13); color: #38bdf8; }
  .grade-G { background: rgba(34,197,94,0.13); color: #4ade80; }
  .grade-V { background: rgba(251,191,36,0.15); color: #fbbf24; }
  .grade-E { background: rgba(245,130,31,0.15); color: #f5821f; border: 1px solid #f5821f; }

  .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
  .stat-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; transition: transform 0.15s, box-shadow 0.15s; }
  .stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
  /* ป้ายการ์ดสถิติเป็นไทยปนอังกฤษ — uppercase + letter-spacing ทำให้กว้างเกินจนตัดบรรทัดกลางคำ
     ปล่อยตัวพิมพ์ตามที่เขียนไว้ และบีบ letter-spacing ลง จะได้อยู่บรรทัดเดียว */
  .stat-label { font-size: 11px; color: var(--muted); letter-spacing: 0.2px; margin-bottom: 6px; line-height: 1.35; }
  .stat-value { font-size: 22px; font-weight: 700; }
  .stat-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

  .progress-wrap { margin: 16px 0; }
  .progress-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
  .progress-bar { height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; }
  .progress-fill { height: 100%; border-radius: 4px; transition: width 0.6s; background: var(--accent); }

  .todo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-top: 12px; }

  .form-section { margin-bottom: 24px; padding-left: 12px; border-left: 3px solid var(--border); }
  .form-title { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
  .form-section:focus-within { border-left-color: var(--accent); }
  .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .form-field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
  .form-field input, .form-field select {
    width: 100%; padding: 9px 12px; background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text); font-size: 14px; outline: none; transition: border 0.2s;
  }
  .form-field input:focus, .form-field select:focus { border-color: var(--accent); }
  .checkbox-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
  .checkbox-item { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
  .checkbox-item input { width: auto; accent-color: var(--accent); }

  .table-wrap { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th { text-align: left; padding: 10px 12px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); white-space: nowrap; }
  td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
  tr:last-child td { border-bottom: none; }
  tr:nth-child(even) td { background: rgba(255,255,255,0.025); }
  tr:hover td { background: var(--surface2); }
  /* sticky freeze cell keeps its own bg — must override zebra/hover */
  tr:nth-child(even) td.col-freeze { background: var(--surface); }
  tr:hover td.col-freeze { background: var(--surface2); }
  html[data-theme="light"] tr:nth-child(even) td { background: rgba(0,0,0,0.025); }
  html[data-theme="light"] tr:nth-child(even) td.col-freeze { background: var(--surface); }
  html[data-theme="light"] tr:hover td.col-freeze { background: var(--surface2); }
  .btn-del { background: none; border: none; color: var(--red); cursor: pointer; font-size: 16px; padding: 2px 6px; }
  .btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 6px; cursor: pointer; border: 1px solid var(--border); background: var(--surface2); color: var(--text); }
  .btn-sm:hover { border-color: var(--accent); }
  .alf-btn { padding: 4px 12px; font-size: 12px; border-radius: 20px; cursor: pointer; border: 1px solid var(--border); background: var(--surface2); color: var(--muted); font-weight: 500; transition: all .15s; }
  .alf-btn:hover { border-color: var(--accent); color: var(--text); }
  .active-chip { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
  .btn-add { padding: 10px 20px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; }
  .btn-add:hover { background: var(--accent2); }

  .team-section { margin-bottom: 28px; }
  .team-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .team-name { font-size: 16px; font-weight: 600; }
  .team-badge { font-size: 12px; background: var(--surface2); border: 1px solid var(--border); padding: 3px 10px; border-radius: 20px; color: var(--muted); }
  .member-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface2); border-radius: var(--radius-sm); margin-bottom: 6px; }
  .member-name { flex: 1; font-size: 14px; }
  .member-pts { font-size: 13px; color: var(--muted); }
  .pct-bar { width: 80px; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
  .pct-fill { height: 100%; border-radius: 3px; }

  .month-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
  .month-nav select { padding: 7px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; }
  .month-nav label { font-size: 13px; color: var(--muted); }


  /* ── Light mode ── */
  html[data-theme="light"] {
    --bg: #f0f5fc;
    --surface: #ffffff;
    --surface2: #e4edf8;
    --border: #b8cde4;
    --text: #001840;
    --muted: #4a6f9e;
    --accent: #f5821f;
    --accent2: #001840;
    --accent-blue: #0066cc;
  }
  html[data-theme="light"] body { background: var(--bg); }
  html[data-theme="light"] .topbar { background: #001840; border-bottom-color: #f5821f; }
  html[data-theme="light"] .login-card { box-shadow: 0 4px 24px rgba(0,24,64,0.12); }
  html[data-theme="light"] .grade-I { background: #e4edf8; color: #4a6f9e; }
  html[data-theme="light"] .grade-M { background: #dbeafe; color: #1d4ed8; }
  html[data-theme="light"] .grade-G { background: #dcfce7; color: #15803d; }
  html[data-theme="light"] .grade-V { background: #fef3c7; color: #d97706; }
  html[data-theme="light"] .grade-E { background: #fed7aa; color: #ea580c; border: 1px solid #f5821f; }
  html[data-theme="light"] .premium-badge { background: #fed7aa; color: #ea580c; }
  html[data-theme="light"] .nav-tab.active { color: #f5821f; border-bottom-color: #f5821f; }
  html[data-theme="light"] tr:hover td { background: var(--surface2); }

  /* Light theme — button + card fixes */
  html[data-theme="light"] .btn-add:hover,
  html[data-theme="light"] .btn-primary:hover { background: #e06b10; }
  html[data-theme="light"] .btn-sm { background: #fff; border-color: #b8cde4; color: #001840; }
  html[data-theme="light"] .btn-sm:hover { border-color: #f5821f; color: #f5821f; }
  html[data-theme="light"] .btn-del { color: #dc2626; }
  html[data-theme="light"] .card { box-shadow: 0 1px 4px rgba(0,24,64,0.07); }
  html[data-theme="light"] .stat-card { background: #fff; border-color: #cddaec; }
  html[data-theme="light"] .month-nav select,
  html[data-theme="light"] .form-field input,
  html[data-theme="light"] .form-field select { background: #fff; border-color: #b8cde4; color: #001840; }
  html[data-theme="light"] .month-nav select:focus,
  html[data-theme="light"] .form-field input:focus,
  html[data-theme="light"] .form-field select:focus { border-color: #f5821f; box-shadow: 0 0 0 2px rgba(245,130,31,0.15); }
  html[data-theme="light"] #histSummary { color: #4a6f9e; }
  html[data-theme="light"] #hist-summary { background: #f0f7ff; border-color: #cddaec; }
  html[data-theme="light"] .step-badge-btn { background: rgba(0,24,64,0.06); border-color: rgba(0,24,64,0.2); color: #001840; }
  html[data-theme="light"] .step-badge-btn:hover { background: rgba(0,24,64,0.1); }

  /* ── Theme toggle button ── */
  .btn-theme {
    background: none; border: 1px solid var(--border); color: var(--muted);
    padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 16px;
    transition: all 0.2s; line-height: 1;
  }
  .btn-theme:hover { color: var(--text); border-color: var(--muted); }
  .btn-secondary { padding: 8px 18px; background: var(--surface2); border: 1px solid var(--border); color: var(--muted); border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; transition: all 0.2s; }
  .btn-secondary:hover { color: var(--text); border-color: var(--muted); }

  .hidden { display: none !important; }
  .tab-pane { display: none; }
  .tab-pane.active { display: block; }

  .toast { position: fixed; bottom: 24px; right: 24px; background: var(--green); color: #fff; padding: 12px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; z-index: 999; transform: translateY(80px); opacity: 0; transition: all 0.3s; }
  .toast.show { transform: translateY(0); opacity: 1; }
  /* ปุ่ม "เลิกทำ" ใน toast — ต้องกดได้จริงบนมือถือ จึงตั้งความสูงขั้นต่ำไว้ */
  .toast-undo {
    margin-left: 10px; padding: 5px 12px; min-height: 30px;
    border: 1px solid rgba(255,255,255,.55); border-radius: 8px;
    background: rgba(255,255,255,.16); color: #fff;
    font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
  }
  .toast-undo:hover { background: rgba(255,255,255,.3); }
  /* ── Freeze first column (annual table) ── */
  .col-freeze {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
  }
  .col-freeze-head {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--surface);
  }
  /* right-side shadow to indicate frozen column */
  .col-freeze::after, .col-freeze-head::after {
    content: '';
    position: absolute;
    top: 0; right: -6px; bottom: 0;
    width: 6px;
    background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);
    pointer-events: none;
  }
  html[data-theme="light"] .col-freeze,
  html[data-theme="light"] .col-freeze-head { background: var(--surface); }

  /* Inline confirm popup (replaces browser confirm()) */
  .inline-confirm { display:inline-flex; align-items:center; gap:6px; background:var(--surface2); border:1px solid var(--red); border-radius:6px; padding:3px 8px; font-size:12px; }
  .inline-confirm span { color:var(--muted); }
  .inline-confirm button { background:none; border:none; cursor:pointer; font-size:12px; padding:0 4px; border-radius:4px; }
  .inline-confirm .cf-yes { color:var(--red); font-weight:600; }
  .inline-confirm .cf-no { color:var(--muted); }

  /* ── Hero what-if buttons ── */
  .hero-wi-btn {
    background:var(--surface2); border:1px solid var(--border); color:var(--text);
    width:26px; height:26px; border-radius:6px; font-size:16px; line-height:1;
    cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
    font-weight:600; transition:background .15s,border-color .15s;
  }
  .hero-wi-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
  @keyframes hero-alert-pulse {
    0%,100% { box-shadow:0 0 0 0 rgba(245,158,11,0.5); }
    50%      { box-shadow:0 0 0 7px rgba(245,158,11,0); }
  }
  .hero-alert-pulse { animation:hero-alert-pulse 1.6s ease infinite; }

  .premium-badge { display: inline-block; font-size: 11px; background: rgba(245,130,31,0.18); color: #f5821f; padding: 2px 7px; border-radius: 10px; margin-left: 4px; }

  /* ===== iOS / Mobile Responsive ===== */

  /* Prevent iOS auto-zoom on input focus */
  input, select, textarea {
    font-size: 16px !important;
  }
  .form-field input, .form-field select {
    min-height: 44px; /* iOS touch target */
  }
  .btn-logout, .btn-sm, .btn-add, .btn-primary {
    min-height: 40px;
  }

  /* Nav tabs already have overflow/scroll in base style — these iOS rules are kept for safety */
  .nav-tabs { padding-bottom: 0; }

  /* ── Tablet / iPad portrait (≤768px) ── */
  @media (max-width: 768px) {
    .main { padding: 14px; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .topbar { padding: 0 14px; }
    .card { padding: 14px; }
    /* Step badge dropdown: fixed so it's never clipped off screen */
    .step-badge-dd {
      position: fixed !important;
      top: 60px !important;
      right: 8px !important;
      left: 8px !important;
      width: auto !important;
      max-height: calc(100vh - 80px);
      overflow-y: auto;
    }
    /* Topbar right area: tighten gap on tablet */
    .topbar-user { gap: 7px; }
    /* ── Bottom Nav (iPad/tablet) — scoped to staff main nav only ── */
    .hamburger-btn { display: none !important; }
    #staffView > .nav-tabs {
      display: flex !important;
      flex-direction: row !important;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 300;
      padding: 0 !important;
      gap: 0 !important;
      border-top: 1px solid var(--border) !important;
      border-bottom: none !important;
      background: var(--surface);
      justify-content: space-around;
      box-shadow: 0 -2px 12px rgba(0,0,0,.2);
    }
    #staffView > .nav-tabs > .nav-tab {
      flex: 1; min-width: 0;
      border-radius: 0 !important;
      border-bottom: none !important;
      border-top: 2px solid transparent;
      padding: 9px 3px 7px !important;
      font-size: 11px !important;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      text-align: center;
    }
    #staffView > .nav-tabs > .nav-tab .nt-ic { margin-right: 0; font-size: 20px; line-height: 1; }
    /* แถบเรียบ ไม่มีปุ่มให้เห็น — ไอคอนเทาๆ แล้วค่อยมีสีเฉพาะอันที่เลือก */
    #staffView > .nav-tabs > .nav-tab {
      border-top-color: transparent !important;
      background: none !important;
    }
    #staffView > .nav-tabs > .nav-tab .nt-ic {
      filter: grayscale(1); opacity: .45;
      transition: filter .18s ease, opacity .18s ease, transform .18s ease;
    }
    #staffView > .nav-tabs > .nav-tab.active .nt-ic {
      filter: none; opacity: 1; transform: scale(1.14);
    }
    #staffView > .nav-tabs > .nav-tab.active { color: #f5821f !important; font-weight: 700; }
    #staffView > .nav-tabs > .nav-tab:active .nt-ic { transform: scale(.92); }
    /* กัน label ล้น → ไม่ให้ nav กลายเป็น scroll แนวนอน */
    #staffView > .nav-tabs { overflow: visible !important; }
    #staffView > .nav-tabs > .nav-tab .nt-lb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    /* Light theme — bottom nav */
    html[data-theme="light"] #staffView > .nav-tabs { background: #fff; border-top-color: #cddaec !important; box-shadow: 0 -2px 12px rgba(0,24,64,.10); }
    html[data-theme="light"] #staffView > .nav-tabs > .nav-tab { color: #4a6f9e; }
    html[data-theme="light"] #staffView > .nav-tabs > .nav-tab.active { color: #c2410c !important; }
    #staffView .main { padding-bottom: 72px; }
    /* appFooter อยู่นอก .main จึงถูก bottom nav ทับเหมือนกัน */
    #appFooter { margin-bottom: 56px; }
    /* เกณฑ์ KPI: 3 ตารางแคบไปบน iPad แนวตั้ง → 2 คอลัมน์ */
    #st-tables { grid-template-columns: repeat(2, 1fr) !important; }
  }

  /* ── Intermediate: large phone / small tablet (600px–768px) ── */
  @media (max-width: 600px) {
    /* Admin section headers: allow wrapping */
    .admin-header-row { flex-wrap: wrap !important; gap: 8px !important; }
  }

  /* ── Compact landscape (short viewport, e.g. phone/iPad landscape) ── */
  @media (orientation: landscape) and (max-height: 600px) {
    .topbar { --topbar-h: 46px; }
    .main { padding: 8px 14px; }
    .card { margin-bottom: 8px; padding: 10px 14px; }
    .nav-tabs { padding: 8px 14px 0; }
  }

  /* iPhone (480px) */
  @media (max-width: 480px) {
    .main { padding: 10px; }
    .topbar { padding: 0 10px; --topbar-h: 52px; }
    .topbar-logo { font-size: 15px; }
    /* nameEl always hidden — shown only in profile modal header */
    .btn-theme { padding: 4px 7px; font-size: 14px; } /* compact theme toggle on mobile */
    .btn-logout { padding: 5px 8px; font-size: 12px; }
    #pointBadge { font-size: 11px !important; padding: 2px 7px !important; } /* compact Point badge on mobile */
    #waitBadge { font-size: 11px !important; padding: 2px 7px !important; gap: 3px !important; } /* compact Wait badge on mobile */
    /* On very small screens: show grade only, hide " · X pt" part */
    #pointBadgePt { display: none; }
    #pointBadge span[style*="opacity"] { display: none; }
    /* Hide Region·MktType chip on mobile — access via avatar → profile */
    #userChip { display: none !important; }
    /* Fix date input overflow */
    input[type="date"] { width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; }
    /* Step badge dropdown — fixed position on mobile so it's never clipped */
    .step-badge-dd {
      position: fixed !important;
      top: 60px !important;
      right: 8px !important;
      left: 8px !important;
      width: auto !important;
      max-height: calc(100vh - 80px);
      overflow-y: auto;
    }

    .nav-tabs { padding: 10px 10px 0; gap: 2px; }
    .nav-tab { padding: 7px 11px; font-size: 13px; }

    .card { padding: 12px 10px; border-radius: 8px; margin-bottom: 10px; }

    /* 1-column form on small phones */
    .form-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }

    /* Larger touch targets */
    .form-field input, .form-field select { min-height: 46px; padding: 10px 12px; }
    .btn-add, .btn-primary { width: 100%; padding: 13px; font-size: 15px; }
    .btn-sm { padding: 7px 12px; font-size: 13px; }

    /* Month nav wraps nicely */
    .month-nav { gap: 6px; }
    .month-nav label { font-size: 12px; }
    .month-nav select { padding: 8px 10px; font-size: 14px; }

    /* Dashboard filter: hide Region/Mkt Type labels to save space */
    .dash-filter-label { display: none; }
    /* Export buttons go full-width on own row */
    .dash-export-btns { margin-left: 0 !important; width: 100%; justify-content: flex-end; }

    /* History filter stack */
    .month-nav { flex-wrap: wrap; }

    /* Checkbox row */
    .checkbox-row { gap: 12px; }
    .checkbox-item { font-size: 14px; }
    .checkbox-item input[type=checkbox] { width: 18px; height: 18px; }

    /* SMC sub-tabs */
    #tab-smc .nav-tab { font-size: 12px; padding: 6px 10px; }

    /* Login card */
    .login-card { padding: 28px 20px; margin: 0 10px; }
    .login-logo { font-size: 22px; }
    /* Toast: avoid covering FAB on mobile */
    /* toast: ตำแหน่งกำหนดรวมที่ section "มุมล่างขวา" ด้านล่าง */

    /* ── Bottom Nav (mobile ≤480px) — scoped to staff main nav only ── */
    .hamburger-btn { display: none !important; }
    #staffView > .nav-tabs {
      display: flex !important;
      flex-direction: row !important;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 300;
      padding: 0 0 env(safe-area-inset-bottom) !important;
      gap: 0 !important;
      border-top: 1px solid var(--border) !important;
      border-bottom: none !important;
      background: var(--surface);
      justify-content: space-around;
      box-shadow: 0 -2px 12px rgba(0,0,0,.25);
    }
    #staffView > .nav-tabs.mobile-open { top: unset !important; flex-direction: row !important; border-bottom: none !important; }
    #staffView > .nav-tabs > .nav-tab {
      flex: 1; min-width: 0;
      border-radius: 0 !important;
      border-bottom: none !important;
      border-top: 2.5px solid transparent;
      padding: 8px 1px 6px !important;
      font-size: 9.5px !important;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      text-align: center;
    }
    #staffView > .nav-tabs > .nav-tab .nt-ic { margin-right: 0; font-size: 17px; line-height: 1; }
    /* แถบเรียบ ไม่มีปุ่มให้เห็น — ไอคอนเทาๆ แล้วค่อยมีสีเฉพาะอันที่เลือก */
    #staffView > .nav-tabs > .nav-tab {
      border-top-color: transparent !important;
      background: none !important;
    }
    #staffView > .nav-tabs > .nav-tab .nt-ic {
      filter: grayscale(1); opacity: .45;
      transition: filter .18s ease, opacity .18s ease, transform .18s ease;
    }
    #staffView > .nav-tabs > .nav-tab.active .nt-ic {
      filter: none; opacity: 1; transform: scale(1.14);
    }
    #staffView > .nav-tabs > .nav-tab.active { color: #f5821f !important; font-weight: 700; }
    #staffView > .nav-tabs > .nav-tab:active .nt-ic { transform: scale(.92); }
    /* กัน label ล้น → ไม่ให้ nav กลายเป็น scroll แนวนอน */
    #staffView > .nav-tabs { overflow: visible !important; }
    #staffView > .nav-tabs > .nav-tab .nt-lb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    /* Light theme — bottom nav */
    html[data-theme="light"] #staffView > .nav-tabs { background: #fff; border-top-color: #cddaec !important; box-shadow: 0 -2px 12px rgba(0,24,64,.10); }
    html[data-theme="light"] #staffView > .nav-tabs > .nav-tab { color: #4a6f9e; }
    html[data-theme="light"] #staffView > .nav-tabs > .nav-tab.active { color: #c2410c !important; }
    .mobile-theme-row { display: none !important; }
    #staffView .main { padding-bottom: 78px !important; }
    /* appFooter อยู่นอก .main (เป็นลูกสุดท้ายของ .app) จึงถูก bottom nav ทับ */
    #appFooter { margin-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

    /* ── เกณฑ์ KPI: 3 ตารางเรียงกันบนจอ 375px แคบเกินจนเบี้ยว ── */
    #st-tables { grid-template-columns: 1fr !important; }
    #tab-step .card { padding: 12px 10px !important; }
    #tab-step table { font-size: 11px; }
    #tab-step th, #tab-step td { padding: 5px 6px !important; }

    /* ── หน้าการคำนวณ: ให้ทุกอย่างยุบเป็นคอลัมน์เดียว ── */
    #tab-smc [style*="grid-template-columns:repeat(3,1fr)"],
    #tab-smc [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
    /* form-field ถูกตั้ง flex:0 0 auto + min-width ไว้ เลยไม่ยอมหด */
    #tab-smc .form-field { flex: 1 1 100% !important; min-width: 0 !important; }
    #tab-smc .card { padding: 12px 12px !important; }
    #tab-smc table { font-size: 11.5px; }
    /* ปุ่ม sub-tab ของหน้าคำนวณ ให้เลื่อนแนวนอนได้แทนที่จะดันจอ */
    #tab-smc .nav-tab { font-size: 11.5px !important; padding: 6px 9px !important; }
    /* sub-tab 5 อัน — ให้เลื่อนแนวนอนแทนที่จะดันจอ */
    #tab-smc > div:first-child { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap !important; }
    #tab-smc > div:first-child::-webkit-scrollbar { display: none; }
    #tab-smc > div:first-child .nav-tab { flex: 0 0 auto; }

    /* ── FAB: ซ่อน — bottom nav มี tab "กรอกข้อมูล" อยู่แล้ว ไม่ต้องมีปุ่มลอยซ้ำ ── */
    .fab-add { display: none !important; }

    /* ── History: compact horizontal scroll on mobile ── */
    /* (เดิมมีกฎ #historyTableWrap ตรงนี้ — element นั้นไม่มีอยู่จริงใน HTML
        ตอนนี้หน้าประวัติบนมือถือใช้ card view แทน ดูที่ #historyCards) */

    /* Annual + Report stat grids — 2 col on mobile */
    #annual-stat-row { grid-template-columns: 1fr 1fr !important; }
    #tab-report > div[style*="repeat(3"] { display: grid !important; grid-template-columns: 1fr 1fr !important; }
    #tab-report > div[style*="repeat(2"] { display: grid !important; grid-template-columns: 1fr !important; }
    #rp-point-detail { grid-template-columns: 1fr 1fr !important; }
    .month-nav button { padding: 7px 10px !important; font-size: 12px !important; }

    /* ── Dashboard mobile: 2-col stat card ── */
    #gradeCard { display: grid !important; grid-template-columns: 1fr 1fr !important; padding: 0 !important; }
    .grade-card-sep { display: none !important; }
    #gradeSection { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 14px 10px !important; min-width: unset !important; }
    #dashPointCell { padding: 12px 14px !important; border-bottom: 1px solid var(--border); }
    #dashPointCell #pointEl { font-size: 16px !important; }
    #dashStepCell { text-align: left !important; padding: 12px 14px !important; }

    /* ── Hero card: stack vertically on mobile ── */
    .hero-inner { flex-direction: column !important; }
    .hero-sep   { display: none !important; }
    .hero-right {
      flex-direction: row !important;
      justify-content: space-around !important;
      min-width: unset !important;
      width: 100% !important;
      padding: 10px 14px 12px !important;
      border-top: 1px solid var(--border);
      box-sizing: border-box;
    }
  }

  /* ── Print CSS for PDF export ── */
  @media print {
    body * { visibility: hidden; }
    #print-report, #print-report * { visibility: visible; }
    #print-report { position: fixed; left: 0; top: 0; width: 100%; background: #fff; color: #000; padding: 20px; }
    #print-report h2 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
    #print-report table { width: 100%; border-collapse: collapse; font-size: 12px; }
    #print-report th, #print-report td { border: 1px solid #ccc; padding: 5px 8px; }
    #print-report th { background: #f0f0f0; font-weight: 600; }
    #print-report .no-print { display: none; }
  }

  /* Mobile theme row — hidden by default (only shown inside hamburger dropdown on mobile) */
  .mobile-theme-row { display: none; }

  /* Hamburger — hidden by default */
  .hamburger-btn { display: none; background: none; border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.8); border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 18px; line-height: 1; }

  /* FAB — hidden by default, shown on mobile */
  .fab-add { display: none; position: fixed; bottom: 24px; right: 20px; width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 26px; font-weight: 300; border: none; cursor: pointer; z-index: 200; box-shadow: 0 4px 16px rgba(0,0,0,0.25); align-items: center; justify-content: center; line-height: 1; }
  .fab-add:active { transform: scale(0.94); }

  /* ===== UI POLISH — safe area, transitions, form focus ===== */

  /* iOS safe area (notch / home bar) */
  .app { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .fab-add { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  /* ── มุมล่างขวา: จัดชั้นไม่ให้ทับกัน (nav → 💬 feedback → toast) ──
     Desktop  : ไม่มี nav      · 💬 24→72px   · toast 80px
     iPad     : nav ~52px      · 💬 64→112px  · toast 120px
     Mobile   : nav ~44px+safe · 💬 56→104px  · toast 112px          */
  #feedbackFab { bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; right: 24px !important; }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); right: 24px; }

  @media (min-width: 481px) and (max-width: 768px) {
    #feedbackFab { bottom: 64px !important; }
    .toast { bottom: 120px !important; right: 24px; }
  }
  @media (max-width: 480px) {
    #feedbackFab { bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important; right: 16px !important; }
    .toast { bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important; left: 16px; right: 16px; }
  }

  /* Toast — polished */
  .toast { border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.22); font-size: 14px; padding: 12px 20px; }

  /* Nav tab smooth transition */
  .nav-tab { transition: color 0.15s, border-bottom-color 0.15s, background 0.15s; }

  /* Form field focus glow (matching login field) */
  .form-field input:focus, .form-field select:focus {
    box-shadow: 0 0 0 3px rgba(245,130,31,0.15);
  }

  /* Btn-add hover lift */
  .btn-add { transition: background 0.2s, transform 0.15s, box-shadow 0.15s; }
  .btn-add:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,130,31,0.3); }
  .btn-add:active { transform: translateY(0); }

  /* FAB press */
  .fab-add { transition: transform 0.15s, box-shadow 0.15s; }
  .fab-add:hover { box-shadow: 0 6px 22px rgba(245,130,31,0.4); }
  .fab-add:active { transform: scale(0.93); }

  /* Nav tabs scroll-fade — right edge only, so first tab is always fully visible */
  .nav-tabs {
    -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%);
    mask-image: linear-gradient(to right, #000 80%, transparent 100%);
  }

  /* Light theme loading overlay */
  html[data-theme="light"] #loadingOverlay { background: var(--bg); }
  html[data-theme="light"] .login-card { box-shadow: 0 12px 40px rgba(0,24,64,0.14), 0 1px 0 rgba(255,255,255,0.9) inset; border-color: rgba(0,24,64,0.1); }
  html[data-theme="light"] .login-logo { background: linear-gradient(135deg, #d96b10 0%, #f5821f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ── UX/UI Enhancements ── */

/* Confirm bottom sheet */
@keyframes sheet-up   { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes sheet-fade { from { opacity: 0 } to { opacity: 1 } }
.confirm-sheet-bg {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end;
  animation: sheet-fade .15s ease;
}
.confirm-sheet-box {
  width: 100%; background: var(--bg);
  border-radius: 18px 18px 0 0;
  padding: 20px 20px env(safe-area-inset-bottom,0);
  animation: sheet-up .22s cubic-bezier(.25,.46,.45,.94);
}
.confirm-sheet-icon { font-size: 32px; text-align: center; margin-bottom: 6px; }
.confirm-sheet-msg  { font-size: 16px; font-weight: 600; color: var(--text); text-align: center; margin-bottom: 20px; }
.confirm-sheet-btn  { width: 100%; padding: 14px; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; margin-bottom: 10px; cursor: pointer; }
.confirm-sheet-yes  { background: #ef4444; color: #fff; }
.confirm-sheet-no   { background: var(--surface2); color: var(--text); }

/* Pull-to-refresh bar */
#ptr-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999;
  background: var(--accent); transform-origin: left;
  transform: scaleX(0); pointer-events: none;
}
#ptr-spinner {
  position: fixed; top: 56px; left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 6px 14px;
  font-size: 12px; color: var(--muted);
  z-index: 9998; display: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* Animate-count element */
.anim-num { display: inline-block; }

/* Step preview chip in form */
#step-preview-chip {
  display: none; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px; font-size: 12px;
  background: rgba(6,182,212,.1); border: 1px solid rgba(6,182,212,.3);
  color: #06b6d4; font-weight: 600; margin-top: 8px;
}

/* Swipe tab transition hint */
.tab-pane { touch-action: pan-y; }

/* What's New toast animation */
@keyframes slideUpFade {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Step-up Care Bottom Sheet ─────────────────────────────────── */
.care-sheet-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .3s ease;
}
.care-sheet-overlay.visible { opacity: 1; }

.care-sheet {
  width: 100%; max-width: 480px;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  padding: 28px 24px calc(40px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform .38s cubic-bezier(.34,1.2,.64,1);
  text-align: center;
  box-shadow: 0 -8px 40px rgba(0,0,0,.35);
}
.care-sheet-overlay.visible .care-sheet { transform: translateY(0); }

.care-sheet-handle {
  width: 40px; height: 4px;
  background: var(--border); border-radius: 2px;
  margin: 0 auto 20px;
}
/* ข้อความยินดี — อยู่ในใบเดียวกับ Step (เดิมแยกเป็นแบนเนอร์ เลยเด้ง 2 รอบ) */
.care-sheet-hd {
  font-size: 17px; font-weight: 800; color: var(--accent);
  margin-bottom: 14px; line-height: 1.4;
}
.care-sheet-step {
  font-size: 42px; font-weight: 900;
  background: linear-gradient(135deg, #f5821f, #ff9840);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1.1; margin-bottom: 4px;
}
.care-sheet-label {
  font-size: 13px; color: var(--muted); margin-bottom: 20px; font-weight: 500;
}
.care-sheet-emoji { font-size: 36px; margin-bottom: 10px; }
.care-sheet-msg {
  font-size: 16px; font-weight: 600; color: var(--text);
  line-height: 1.5; margin-bottom: 28px; padding: 0 8px;
}
.care-sheet-close {
  display: block; width: 100%;
  padding: 14px; border-radius: 14px; border: none;
  background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: opacity .15s;
}
.care-sheet-close:active { opacity: .8; }

/* ── #139 Mini Crossell Chart ─────────────────────────────────── */
.dash-cs-row { display: flex; gap: 10px; margin-bottom: 4px; }
.dash-cs-item {
  flex: 1; min-width: 0; text-align: center;
  background: var(--surface2, rgba(255,255,255,.04));
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 6px;
}
.dash-cs-label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.dash-cs-ring { position: relative; width: 52px; height: 52px; margin: 0 auto 6px; }
.dash-cs-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dash-cs-ring-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.dash-cs-n { font-size: 10px; color: var(--muted); margin-top: 2px; }
.dash-cs-b { font-size: 9px; color: var(--muted); margin-top: 1px; }
/* Ring colours — darker in light theme for contrast on white */
:root { --cs-good: #22c55e; --cs-mid: #f59e0b; --cs-low: #f87171; }
html[data-theme="light"] { --cs-good: #16a34a; --cs-mid: #d97706; --cs-low: #dc2626; }
html[data-theme="light"] .dash-cs-item { background: #f7fafd; border-color: #cddaec; }

/* ช่องบังคับกรอกในฟอร์ม */
.req { color: var(--red, #ef4444); font-weight: 700; margin-left: 1px; }

/* input[type=date] ของ WebKit มีความกว้างขั้นต่ำในตัว → ล้นออกนอกช่อง grid
   (เดิมกฎนี้อยู่แค่ใน @media ≤480px จอใหญ่กว่านั้นเลยยังล้น) */
input[type="date"] { max-width: 100%; min-width: 0; }
/* grid item ต้องยอมให้บีบได้ ไม่งั้น min-width:auto จะดันคอลัมน์ */
.form-field, .form-grid > *, [style*="grid-template-columns"] > .form-field { min-width: 0; }

/* ── หน้าประวัติ: Card view (มือถือ/iPad) ────────────────────────
   desktop ใช้ตาราง 25 คอลัมน์เหมือนเดิม · ≤768px สลับมาเป็น card    */
#historyCards { display: none; }
@media (max-width: 768px) {
  #histTable { display: none; }
  #histTable + #historyCards, #historyCards { display: block; }
  /* .table-wrap ที่ครอบ #histTable ไม่ต้อง scroll แนวนอนแล้ว */
  #tab-history .table-wrap:has(#histTable) { overflow-x: visible; }
}
/* ── สรุปรายปี: Card view (มือถือ/iPad) ──────────────────────────
   desktop ใช้ตาราง 12 คอลัมน์เหมือนเดิม · ≤768px สลับมาเป็นการ์ดรายเดือน
   (แนวเดียวกับหน้าประวัติ — ตารางกว้าง 700px บนจอ 375px อ่านไม่ไหว)    */
#annual-cards { display: none; }
@media (max-width: 768px) {
  #tab-annual .annual-tbl-wrap { display: none; }
  #annual-cards { display: block; }
}
.ac-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px;
           padding: 11px 13px; margin-bottom: 8px; }
.ac-card.cur { border-color: var(--accent); background: rgba(245,130,31,.07); }
.ac-card.sum { border-color: var(--accent-blue,#60a5fa); background: rgba(96,165,250,.09); }
.ac-hd { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.ac-mon { font-size: 14px; font-weight: 700; flex: 1; }
.ac-pt { font-size: 15px; font-weight: 800; color: var(--amber,#d97706); }
.ac-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px 6px; }
.ac-cell { text-align: center; }
.ac-lb { font-size: 9.5px; color: var(--muted); margin-bottom: 1px; }
.ac-vl { font-size: 13px; font-weight: 700; }
.ac-sub { font-size: 9.5px; font-weight: 600; color: #22c55e; margin-top: 1px; }

.hc { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
      margin-bottom: 8px; overflow: hidden; }
.hc.wait { border-color: #FAC775; background: #FAEEDA; color: #5d3a00; }
html[data-theme="light"] .hc { box-shadow: 0 1px 4px rgba(0,24,64,.06); }
.hc-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; }
.hc-n { font-size: 11px; color: var(--muted); font-weight: 700; min-width: 18px; }
.hc-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-badge { font-size: 10px; font-weight: 600; padding: 2px 9px; border-radius: 10px; flex-shrink: 0; }
.hc-badge.book { background: #EAF3DE; color: #27500A; }
.hc-badge.wait { background: #FAEEDA; color: #633806; border: .5px solid #FAC775; }
.hc-meta { padding: 0 12px 9px; font-size: 11.5px; color: var(--muted);
           display: flex; flex-wrap: wrap; gap: 4px 8px; }
.hc-nums { display: flex; border-top: 1px solid var(--border); }
.hc-num { flex: 1; min-width: 0; padding: 8px 10px; }
.hc-num + .hc-num { border-left: 1px solid var(--border); }
@media (max-width: 380px) {
  .hc-num { padding: 8px 7px; }
  .hc-num-v { font-size: 13.5px; }
  .hc-num-l { font-size: 9px; }
}
.hc-num-l { font-size: 9.5px; color: var(--muted); font-weight: 600; letter-spacing: .2px; }
.hc-num-v { font-size: 15px; font-weight: 800; margin-top: 2px; }
.hc-num-v.nu { color: var(--accent); }
.hc-num-v small { font-size: 9.5px; font-weight: 600; opacity: .65; margin-left: 1px; }
/* ผลงานนับคัน — ไล่สีเหมือน Step chip ในตาราง */
.hc-num-v.cars.s2  { color: #22d3ee; }
.hc-num-v.cars.s15 { color: #4ade80; }
.hc-num-v.cars.s1  { color: #fbbf24; }
.hc-num-v.cars.s0  { color: var(--muted); }
html[data-theme="light"] .hc-num-v.cars.s2  { color: #0e7490; }
html[data-theme="light"] .hc-num-v.cars.s15 { color: #15803d; }
html[data-theme="light"] .hc-num-v.cars.s1  { color: #b45309; }
.hc-cs { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 12px;
         border-top: 1px solid var(--border); align-items: center; }
.hc-chip { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 8px;
           background: var(--surface2); border: .5px solid var(--border); white-space: nowrap; }
.hc-chip.smc { color: #0ea5e9; } .hc-chip.pa { color: #22c55e; }
.hc-chip.ew  { color: #f59e0b; } .hc-chip.mo { color: #a78bfa; }
.hc-chip.none { color: var(--muted); font-weight: 400; }
.hc-acts { display: flex; gap: 0; border-top: 1px solid var(--border); }
.hc-act { flex: 1; padding: 9px 4px; text-align: center; font-size: 12px; font-weight: 600;
          background: none; border: none; cursor: pointer; color: var(--muted); font-family: inherit; }
.hc-act + .hc-act { border-left: 1px solid var(--border); }
.hc-act.edit { color: var(--accent-blue, #38bdf8); }
.hc-act.del  { color: var(--red, #ef4444); }
/* "Book แล้ว" คือปุ่มที่กดบ่อยที่สุดในการ์ด รอ Book — ให้เด่นกว่าปุ่มอื่น */
.hc-act.book { color: #16a34a; background: rgba(34,197,94,.10); }
.hc-more { display: none; padding: 2px 12px 10px; border-top: 1px solid var(--border); }
.hc.open .hc-more { display: block; }
.hc-row { display: flex; justify-content: space-between; font-size: 11.5px; padding: 4px 0; }
.hc-row span:first-child { color: var(--muted); }
.hc-row span:last-child { font-weight: 600; }
.hc-act.more::after { content: ' ▾'; }
.hc.open .hc-act.more::after { content: ' ▴'; }

/* ── ค่างวดรถ: การ์ด "ส่งลูกค้า" (capture-friendly) ──────────────
   บังคับพื้นขาว/ตัวหนังสือเข้มเสมอ ไม่ตาม theme — แคปส่ง LINE แล้วอ่านง่าย
   กว้างพอดีจอมือถือ ไม่ต้อง scroll แนวนอน                          */
.iq-card {
  max-width: 400px; margin: 0 auto;
  background: #ffffff; color: #0f172a;
  border: 1px solid #dbe4f0; border-radius: 16px;
  overflow: hidden; box-shadow: 0 4px 20px rgba(0,24,64,.10);
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.iq-head { background: linear-gradient(135deg,#001840 0%,#003a7a 100%); padding: 16px 18px 14px; }
.iq-head-t { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: -.2px; }
.iq-head-s { font-size: 11px; color: rgba(255,255,255,.7); margin-top: 2px; }
.iq-facts { display: flex; background: #f4f8fd; border-bottom: 1px solid #e3ebf5; }
.iq-fact { flex: 1; padding: 11px 8px; text-align: center; border-right: 1px solid #e3ebf5; }
.iq-fact:last-child { border-right: none; }
.iq-fact-l { font-size: 9.5px; color: #64748b; font-weight: 600; letter-spacing: .2px; }
.iq-fact-v { font-size: 14px; font-weight: 800; color: #0f172a; margin-top: 3px; }
.iq-fact-v.hl { color: #c2410c; }
.iq-body { padding: 6px 14px 4px; }
.iq-row { display: flex; align-items: center; padding: 11px 4px; border-bottom: 1px solid #eef3f9; }
.iq-row:last-child { border-bottom: none; }
.iq-term { width: 74px; flex-shrink: 0; }
.iq-term-n { font-size: 17px; font-weight: 800; color: #001840; line-height: 1; }
.iq-term-u { font-size: 10px; color: #64748b; margin-top: 2px; }
.iq-pays { flex: 1; display: flex; gap: 8px; justify-content: flex-end; text-align: right; }
.iq-pay-l { font-size: 9.5px; color: #64748b; font-weight: 600; margin-bottom: 2px; white-space: nowrap; }
.iq-pay-v { font-size: 19px; font-weight: 800; color: #0f172a; line-height: 1; letter-spacing: -.4px; }
.iq-pay-v.ins { color: #1d4ed8; }
.iq-pay-u { font-size: 9.5px; color: #94a3b8; margin-top: 2px; }
/* ส่วนต่าง — ทำประกันแล้วจ่ายเพิ่มเดือนละเท่าไหร่ */
.iq-diff { display: inline-block; margin-top: 4px; font-size: 9.5px; font-weight: 700;
           color: #b45309; background: #fef3c7; border: .5px solid #fde68a;
           border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.iq-sep { width: 1px; background: #e3ebf5; margin: 2px 2px; }
.iq-foot { background: #f8fafc; border-top: 1px solid #e3ebf5; padding: 10px 16px 12px; }
.iq-note { font-size: 10px; color: #64748b; line-height: 1.55; }
.iq-date { font-size: 10px; color: #94a3b8; margin-top: 5px; }
.iq-empty { text-align: center; padding: 26px 16px; color: #94a3b8; font-size: 12px; }
@media (max-width: 400px) {
  .iq-pay-v { font-size: 17px; }
  .iq-term { width: 64px; }
}

/* ── #147 Entry Form Reskin ───────────────────────────────────── */
.form-section {
  margin-bottom: 14px !important;
  padding: 0 !important;
  padding-left: 0 !important;
  border-left: none !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface2, rgba(255,255,255,.025));
}
.form-section:focus-within {
  border-color: rgba(245,130,31,.45) !important;
  box-shadow: 0 0 0 2px rgba(245,130,31,.08);
}
.form-title {
  display: flex !important;
  align-items: center;
  gap: 7px;
  margin-bottom: 0 !important;
  padding: 9px 14px !important;
  border-bottom: 1px solid var(--border);
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  text-transform: uppercase;
  letter-spacing: .6px;
  background: rgba(245,130,31,.06);
}
.form-body { padding: 14px 16px; }
html[data-theme="light"] .form-section { background: #ffffff !important; }
html[data-theme="light"] .form-title { background: rgba(245,130,31,.07); }

/* ── ปุ่มกลาง bottom nav: วงกลมนูนขึ้นมา (แบบแอปธนาคาร) ─────────── */
.nt-center { position: relative; }
.nt-center .nt-ic {
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f5821f 0%, #ff9a3c 100%);
  color: #fff; font-size: 22px !important; line-height: 1;
  margin-top: -26px; margin-bottom: 1px;
  border: 3px solid var(--surface);
  box-shadow: 0 4px 14px rgba(245,130,31,.45);
  transition: transform .15s ease, box-shadow .15s ease;
}
html[data-theme="light"] .nt-center .nt-ic { border-color: #fff; }
.nt-center.active .nt-ic { transform: scale(1.06) !important; box-shadow: 0 6px 20px rgba(245,130,31,.6); }
.nt-center:active .nt-ic { transform: scale(.94) !important; }
.nt-center .nt-lb { font-weight: 700; color: var(--accent); }
/* desktop ยังเป็น tab แถวบน — ไม่ต้องทำวงกลม */
@media (min-width: 769px) {
  .nt-center .nt-ic {
    width: auto; height: auto; border-radius: 0; background: none;
    color: inherit; font-size: inherit !important; margin: 0 5px 0 0;
    border: none; box-shadow: none; display: inline;
  }
  .nt-center .nt-lb { font-weight: inherit; color: inherit; }
}


/* ปุ่มกลางเป็นวงกลมสีอยู่แล้ว ไม่ต้องทำเทา */
#staffView > .nav-tabs > .nav-tab.nt-center .nt-ic { filter: none !important; opacity: 1 !important; }
#staffView > .nav-tabs > .nav-tab.nt-center:not(.active) .nt-ic {
  background: var(--surface2); color: var(--muted);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
html[data-theme="light"] #staffView > .nav-tabs > .nav-tab.nt-center:not(.active) .nt-ic {
  background: #e4edf8; color: #4a6f9e;
}
#staffView > .nav-tabs > .nav-tab.nt-center.active .nt-ic {
  background: linear-gradient(135deg,#f5821f 0%,#ff9a3c 100%); color: #fff;
}
#staffView > .nav-tabs > .nav-tab.nt-center:not(.active) .nt-lb { color: var(--muted); font-weight: 600; }

/* ── Bottom nav: แถบเดียวเรียบ ไม่มีเส้นคั่น ไม่มี label ────────── */
@media (max-width: 768px) {
  /* ไม่มีเส้นขีดบนปุ่มใดๆ — ให้เป็นแถบเดียวกันทั้งแถบ */
  #staffView > .nav-tabs > .nav-tab,
  #staffView > .nav-tabs > .nav-tab.active {
    border: none !important;
    border-top: none !important;
    border-radius: 0 !important;
    gap: 0 !important;
  }
  /* ซ่อนชื่อปุ่ม เหลือแต่ไอคอน */
  #staffView > .nav-tabs > .nav-tab .nt-lb { display: none !important; }
  #staffView > .nav-tabs > .nav-tab {
    padding: 11px 2px !important;
    justify-content: center;
  }
  #staffView > .nav-tabs > .nav-tab .nt-ic { font-size: 23px !important; margin: 0 !important; }
  /* ปุ่มกลางยังนูน แต่ชิดกลางแถบพอดีเมื่อไม่มี label */
  #staffView > .nav-tabs > .nav-tab.nt-center .nt-ic {
    width: 48px; height: 48px; font-size: 21px !important;
    margin-top: -22px !important; margin-bottom: 0 !important;
  }
  /* แถบเตี้ยลงเพราะไม่มี label → ลดที่เว้นให้เนื้อหา */
  #staffView .main { padding-bottom: 62px !important; }
  #appFooter { margin-bottom: calc(46px + env(safe-area-inset-bottom, 0px)); }
}

/* ══ Bottom nav — เวอร์ชันสรุป (ทับกฎที่สะสมมาก่อนหน้า) ══════════
   ไอคอน SVG เส้น · แถบเดียวเรียบ ไม่มีเส้นคั่น ไม่มี label
   ไม่มีวงกลม/ขอบใดๆ · ปกติเทา → มีสีเฉพาะอันที่เลือก              */
@media (max-width: 768px) {
  #staffView > .nav-tabs > .nav-tab,
  #staffView > .nav-tabs > .nav-tab.active,
  #staffView > .nav-tabs > .nav-tab.nt-center,
  #staffView > .nav-tabs > .nav-tab.nt-center.active {
    border: none !important; border-radius: 0 !important;
    background: none !important; box-shadow: none !important;
    padding: 11px 2px !important; gap: 0 !important;
    display: flex; align-items: center; justify-content: center;
  }
  #staffView > .nav-tabs > .nav-tab .nt-lb { display: none !important; }

  /* กล่องไอคอน — ไม่มีวงกลม ไม่มีพื้น ไม่มีขอบ ทุกปุ่มเท่ากันหมด */
  #staffView > .nav-tabs > .nav-tab .nt-ic,
  #staffView > .nav-tabs > .nav-tab.nt-center .nt-ic {
    width: 26px !important; height: 26px !important;
    margin: 0 !important; padding: 0 !important;
    background: none !important; border: none !important;
    border-radius: 0 !important; box-shadow: none !important;
    filter: none !important; opacity: 1 !important;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted);
    transition: color .18s ease, transform .18s ease;
  }
  #staffView > .nav-tabs > .nav-tab .nt-ic svg { width: 100%; height: 100%; display: block; }

  /* เลือกอยู่ → เปลี่ยนสี */
  #staffView > .nav-tabs > .nav-tab.active .nt-ic,
  #staffView > .nav-tabs > .nav-tab.nt-center.active .nt-ic {
    color: var(--accent) !important;
    transform: scale(1.12);
  }
  html[data-theme="light"] #staffView > .nav-tabs > .nav-tab.active .nt-ic,
  html[data-theme="light"] #staffView > .nav-tabs > .nav-tab.nt-center.active .nt-ic { color: #c2410c !important; }
  #staffView > .nav-tabs > .nav-tab:active .nt-ic { transform: scale(.9); }

  /* ปุ่มกรอกข้อมูลหนาขึ้นนิดให้เด่นกว่าเพื่อน แต่ยังไม่มีขอบ */
  #staffView > .nav-tabs > .nav-tab.nt-center .nt-ic svg { stroke-width: 2.4; }
  #staffView > .nav-tabs > .nav-tab.nt-center .nt-ic { width: 29px !important; height: 29px !important; }
}
/* desktop — ไอคอนอยู่หน้า label ตามเดิม */
@media (min-width: 769px) {
  .nav-tab .nt-ic { display: inline-flex; width: 17px; height: 17px; vertical-align: -3px; }
  .nav-tab .nt-ic svg { width: 100%; height: 100%; }
}

/* ── Topbar สไตล์แอปธนาคาร (มือถือ/iPad): avatar ซ้าย · โลโก้กลาง · ไอคอนขวา ──
   ของเดิมยัดไว้ 6 อย่างในแถวเดียว แน่นและอ่านยากบนจอ 375px            */
@media (max-width: 768px) {
  .topbar { position: relative; padding: 0 12px; --topbar-h: 56px; }

  /* โลโก้อยู่กึ่งกลางจริง ไม่ขยับตามของสองข้าง
     50% คิดจากความสูงทั้งแถบซึ่งรวมที่กันแถบสถานะไว้ด้วย จึงต้องเลื่อนลงมาครึ่งหนึ่ง
     ไม่งั้นโลโก้จะลอยสูงกว่ารูปโปรไฟล์กับปุ่มข้าง ๆ */
  .topbar > div:first-child {
    position: absolute; left: 50%; top: calc(50% + env(safe-area-inset-top, 0px) / 2);
    transform: translate(-50%, -50%); pointer-events: none;
  }
  /* กล่องที่ครอบอยู่ตั้ง pointer-events:none ไว้ (กันไม่ให้บังของสองข้าง)
     ต้องเปิดคืนให้เฉพาะตัวโลโก้ ไม่งั้นแตะไม่ติดบนมือถือ */
  .topbar-logo { font-size: 15px; white-space: nowrap; pointer-events: auto; }

  /* avatar ย้ายไปซ้ายสุด + วงแหวนสีเกรด */
  .topbar-user { width: 100%; justify-content: flex-end; gap: 8px; }
  .avatar {
    order: -1; margin-right: auto;
    width: 34px; height: 34px; font-size: 13px;
    box-shadow: 0 0 0 2px rgba(255,255,255,.25);
  }

  /* ขวา: เหลือ 2 ปุ่มกลม — Step (กดดูรายละเอียด) กับ theme */
  .step-badge-btn {
    height: 34px; min-width: 34px; padding: 0 10px;
    border-radius: 17px; justify-content: center;
    background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28);
  }
  .step-badge-label { font-size: 12px; font-weight: 700; }
  .btn-theme {
    width: 34px; height: 34px; padding: 0 !important;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  }

  /* ย้ายมาอยู่บน Step badge เป็นจุดแดงแทน (Point ดูได้ที่การ์ดหน้าภาพรวม) */
  #pointBadge, #userChip { display: none !important; }
  #waitBadge {
    /* absolute วัดจากขอบบนสุดของแถบ ซึ่งไม่นับ padding ที่กันแถบสถานะไว้
       ถ้าใช้ 6px เฉย ๆ ตัวเลขจะไปนั่งใต้นาฬิกาตอนเปิดจากแอปที่ติดตั้งไว้ */
    position: absolute; top: calc(6px + env(safe-area-inset-top, 0px)); right: 50px;
    min-width: 17px; height: 17px; padding: 0 4px !important;
    border-radius: 9px; background: #ef4444 !important; border: 1.5px solid #001840 !important;
    color: #fff !important; font-size: 10px !important; font-weight: 700;
    display: flex !important; align-items: center; justify-content: center;
    gap: 0 !important; z-index: 2;
  }
  #waitBadge > span:not(#waitBadgeCount) { display: none; }
}

/* Topbar — ปุ่มขวาเป็นไอคอนเส้นให้เข้าชุดกับ bottom nav */
@media (max-width: 768px) {
  .topbar-user > *:not(.avatar):not(.step-badge-wrap):not(.btn-theme):not(#waitBadge) { display: none !important; }
  .btn-theme { font-size: 15px; }
  /* กัน dropdown ของ step badge หลุดขอบจอ */
  .step-badge-dd { right: 8px !important; left: 8px !important; width: auto !important; }
}

/* รูปโปรไฟล์ — วางเป็น background-image จึงต้องครอบให้เต็มวงกลม */
.avatar, #ep-avatar-circle, #ep-pic { background-size: cover; background-position: center; overflow: hidden; }
#ep-pic { cursor: default; }

/* Admin — filter chip หน้าการใช้งาน */
.ua-f.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

/* ===== โหมดดูหน้าจอแทนผู้ใช้ (admin) — ซ่อนสิ่งที่แก้ข้อมูลได้ =====
   การกันจริงอยู่ที่ api() ใน app.js — ตรงนี้แค่ทำให้ไม่สับสน */
body.view-as #staffView > .nav-tabs > .nav-tab.nt-center,
body.view-as #feedbackFab,
body.view-as #fabAdd { display: none !important; }
body.view-as .avatar { pointer-events: none; opacity: .75; }

/* ===== เผื่อที่ให้แถบสถานะของมือถือ (นาฬิกา · แบตเตอรี่) =====
   เปิดจากเบราว์เซอร์ไม่มีปัญหา เพราะเบราว์เซอร์กันที่ให้เอง
   แต่พอติดตั้งเป็นแอปแล้วเปิดจากไอคอน หน้าเว็บจะยืดขึ้นไปเต็มจอ
   (viewport-fit=cover + status-bar-style: black-translucent ที่ตั้งไว้ใน index.html)
   ถ้าไม่เผื่อที่ นาฬิกากับแบตจะทับโลโก้และรูปโปรไฟล์บนแถบบน
   env() คืน 0 บนเครื่องที่ไม่มีรอยบาก จึงไม่กระทบจอคอมฯ
   ต้องอยู่ท้ายไฟล์ — media query ด้านบนใช้ padding แบบย่อ ซึ่งจะล้าง padding-top ทิ้ง */
.topbar {
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--topbar-h, 56px) + env(safe-area-inset-top, 0px));
}

/* ===== คู่มือในระบบ (แท็บ คำนวน/เกณฑ์ → 📕 คู่มือ) ===== */
.g-sec { margin-bottom: 10px; }
.g-body { padding: 0 16px 16px; font-size: 13.5px; line-height: 1.68; color: var(--text); }
.g-body p { margin: 0 0 10px; }
.g-body b { font-weight: 700; }
.g-body ul, .g-body ol { margin: 0 0 10px; padding-left: 20px; }
.g-body li { margin-bottom: 6px; }

.g-body .g-tb { width: 100%; border-collapse: collapse; margin: 4px 0 12px; font-size: 12.5px; }
.g-body .g-tb th { text-align: left; background: var(--surface2); color: var(--muted);
                   font-weight: 700; padding: 7px 10px; border-bottom: 1px solid var(--border); }
.g-body .g-tb td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.g-body .g-tb td:first-child { font-weight: 700; white-space: nowrap; }
.g-body .g-tb tr:last-child td { border-bottom: none; }

/* กล่องเน้น: tip = รู้ไว้ดี · warn = ไม่รู้แล้วพลาด */
.g-body .g-tip, .g-body .g-warn {
  border-radius: 9px; padding: 10px 13px; margin: 10px 0; font-size: 12.5px; line-height: 1.6;
}
.g-body .g-tip  { background: var(--surface2); color: var(--muted); border-left: 3px solid var(--accent-blue); }
.g-body .g-warn { background: rgba(245,130,31,.10); border-left: 3px solid var(--accent); }

/* มือถือ: ตารางกว้างเกินจอได้ ให้เลื่อนเฉพาะตัวตาราง ไม่ใช่ทั้งหน้า */
@media (max-width: 600px) {
  .g-body { font-size: 13px; }
  .g-body .g-tb { display: block; overflow-x: auto; white-space: normal; }
  .g-body .g-tb td:first-child { white-space: normal; }
}