/* Mobile App Shell — tabbar + header บน desktop เมื่อ body.mobile-app-enabled */

body.mt-auth-screen #s-billscan-sup-dash,
body.mt-auth-screen #bs-sup-dashboard,
body.mt-auth-screen .app > .screen:not(#s-login):not(#s-admin-first-login):not(#s-admin-set-password) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

#s-billscan-sup-dash[hidden] {
  display: none !important;
  visibility: hidden !important;
}

/* ซ่อนแผงสรุป PC กลางจอถาวร — ใช้ senior board + header แทน */
#mob-pc-summary {
  display: none !important;
}

@media (min-width: 960px) {
  /* Desktop ปกติ — ซ่อน mobile chrome จนกว่าจะเปิด mobile shell (checker/sup) */
  body:not(.mobile-app-enabled) #mobile-app-header,
  body:not(.mobile-app-enabled) #mobile-app-tabbar,
  body:not(.mobile-app-enabled) #mobile-pending-fab {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.mobile-app-enabled:not(.admin-pc-portal) #mobile-app-header {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9988 !important;
    box-shadow: 0 4px 20px rgba(7, 30, 66, 0.22);
  }

  body.mobile-app-enabled:not(.admin-pc-portal) .mobile-only-screen.active {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }

  body.mobile-app-enabled:not(.admin-pc-portal) .app {
    padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.mobile-app-enabled:not(.admin-pc-portal) .pc-panel {
    padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px) + 20px) !important;
  }

  body.mobile-app-enabled:not(.admin-pc-portal) #mobile-app-tabbar {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99999 !important;
    min-height: calc(58px + env(safe-area-inset-bottom, 0px));
    padding: 28px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid rgba(21, 101, 192, 0.12);
    box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.08);
    align-items: flex-end;
    justify-content: space-around;
    overflow: visible;
    isolation: isolate;
  }

  body.mobile-app-enabled:not(.admin-pc-portal) #mobile-pending-fab {
    display: none !important;
  }

  /* หน้า login — ไม่แสดง header/tabbar/pc-panel */
  body:has(#s-login.active) #pc-panel,
  body:has(#s-login.active) #mobile-app-tabbar,
  body:has(#s-login.active) #mobile-app-header,
  body:has(#s-admin-first-login.active) #pc-panel,
  body:has(#s-admin-first-login.active) #mobile-app-tabbar,
  body:has(#s-admin-set-password.active) #pc-panel,
  body:has(#s-login.active) #s-billscan-sup-dash,
  body:has(#s-admin-first-login.active) #s-billscan-sup-dash,
  body:has(#s-admin-set-password.active) #s-billscan-sup-dash,
  body:has(#s-login.active) #bs-sup-dashboard,
  body:has(#s-admin-first-login.active) #bs-sup-dashboard,
  body:has(#s-admin-set-password.active) #bs-sup-dashboard,
  body:has(#s-login.active) .app > .screen:not(#s-login):not(#s-admin-first-login):not(#s-admin-set-password),
  body:has(#s-admin-first-login.active) .app > .screen:not(#s-login):not(#s-admin-first-login):not(#s-admin-set-password),
  body:has(#s-admin-set-password.active) .app > .screen:not(#s-login):not(#s-admin-first-login):not(#s-admin-set-password) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.cam-overlay-open #mobile-app-tabbar,
  body.cam-overlay-open.mobile-app-enabled #mobile-app-tabbar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 959px) {
  /* Bottom bar แสดงตลอดบนทุกหน้า (ยกเว้น login) — ไม่ซ่อนเมื่อ mobile-app-deep */

  /* CSS fallback: แสดง tab bar เมื่ออยู่หน้า mobile shell แม้ JS ยังไม่ทำงาน */
  .app:has(#s-mobile-home.active) ~ #mobile-app-tabbar,
  .app:has(#s-mobile-work.active) ~ #mobile-app-tabbar,
  .app:has(#s-mobile-profile.active) ~ #mobile-app-tabbar,
  .app:has(#s-mobile-leave-swap.active) ~ #mobile-app-tabbar,
  .app:has(#s-mobile-alerts.active) ~ #mobile-app-tabbar,
  .app:has(#s-attendance-hub.active) ~ #mobile-app-tabbar {
    display: flex !important;
  }

  .app:has(#s-mobile-home.active) #mob-pc-summary {
    display: none !important;
  }

  body.mobile-app-enabled.mobile-app-deep .app {
    padding-top: 0 !important;
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.mobile-app-enabled.mob-on-checkin .app {
    padding-top: 0 !important;
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.mobile-app-enabled #s-checkin.active > div:nth-child(2) {
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
  }

  body.mobile-app-enabled #s-night-shift.ns-wrap {
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
  }

  body.mobile-app-enabled.mobile-app-deep .screen.active .hdr + div,
  body.mobile-app-enabled.mobile-app-deep .screen.active > div:not(.hdr):last-child {
    box-sizing: border-box;
  }

  body.mobile-app-enabled.mobile-app-deep #s-attendance-hub.ah-att-wrap {
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }

  body.mobile-app-enabled .mobile-only-screen.active {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  body.mobile-app-enabled #mobile-app-header {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9988;
    margin-bottom: 0;
    box-shadow: 0 4px 20px rgba(7, 30, 66, 0.22);
    contain: layout style paint;
  }

  body.mobile-app-enabled #mobile-app-header .mob-home-topbar {
    margin-bottom: 0;
  }

  body.mobile-app-enabled .app {
    padding-top: calc(58px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  }

  body.mobile-app-enabled #page-dashboard {
    padding-top: calc(58px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
  }

  /* Dashboard บนมือถือ — ซ่อน header กลาง ใช้ db-hdr แทน */
  body.mobile-app-enabled.mobile-dashboard-open #mobile-app-header {
    display: none !important;
  }

  /* Attendance Hub บนมือถือ — ซ่อน global header และลบ padding-top ของ .app */
  body.mobile-app-enabled.mob-on-attendance-hub #mobile-app-header {
    display: none !important;
  }

  body.mobile-app-enabled.mob-on-checkin #mobile-app-header {
    display: none !important;
  }

  body.mobile-app-enabled.mob-on-attendance-hub .app {
    padding-top: 0 !important;
  }

  body.mobile-app-enabled.mobile-dashboard-open #page-dashboard {
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 10001 !important;
  }

  body.mobile-app-enabled.mobile-dashboard-open #page-dashboard > .db-hdr {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    flex-shrink: 0;
  }

  body.mobile-app-enabled .mobile-only-screen.active .mob-body,
  body.mobile-app-enabled .mobile-only-screen.active .mob-home-body {
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }

  /* ซ่อน header ย่อยของแต่ละหน้า — ใช้แถบบนกลางแทน (เก็บ Attendance Hub + profile sub ไว้) */
  body.mobile-app-enabled:not(.mobile-app-deep) .mob-top,
  body.mobile-app-enabled:not(.mobile-app-deep) .py-hdr,
  body.mobile-app-enabled:not(.mobile-app-deep) #s-admin-employee-profile > .ah-hdr {
    display: none !important;
  }

  /* Attendance Hub — แสดงแถบ Back + หัวข้อ */
  body.mobile-app-enabled:not(.mobile-app-deep) #s-attendance-hub .ah-att-hdr {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    flex-shrink: 0;
  }

  body.mobile-app-enabled:not(.mobile-app-deep) #s-attendance-hub .ah-att-top {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 20;
    background: #f0f4fa;
    box-shadow: none;
  }

  body.mobile-app-enabled:not(.mobile-app-deep) #s-attendance-hub .ah-att-tabs {
    position: relative;
    z-index: 21;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  }

  html.dark body.mobile-app-enabled:not(.mobile-app-deep) #s-attendance-hub .ah-att-top {
    background: #0b1120;
  }

  body.mobile-app-enabled:not(.mobile-app-deep) #page-dashboard > .db-hdr {
    display: none !important;
  }

  /* หน้าย่อยจากแท็บข้อมูลของฉัน — แสดงแถบ Back (เลื่อนตามเนื้อหา ไม่ sticky ทับเมนู) */
  body.mobile-app-enabled.mobile-profile-sub #s-admin-employee-profile > .ah-hdr,
  body.mobile-app-enabled.mobile-profile-sub #s-payroll > .py-hdr,
  body.mobile-app-enabled.mobile-profile-sub #page-dashboard > .db-hdr,
  body.mobile-app-enabled.mobile-profile-sub #s-admin-settings > .ah-hdr,
  body.mobile-app-enabled.mobile-profile-sub #s-admin-products > .ah-hdr,
  body.mobile-app-enabled.mobile-profile-sub #s-admin-employees > .ah-hdr,
  body.mobile-app-enabled.mobile-profile-sub #s-admin-route-hub > .ah-hdr,
  body.mobile-app-enabled.mobile-profile-sub #s-admin-routes > .ah-hdr,
  body.mobile-app-enabled.mobile-profile-sub #s-admin-accounts > .ah-hdr,
  body.mobile-app-enabled.mobile-profile-sub #s-admin-branches > .ah-hdr,
  body.mobile-app-enabled.mobile-profile-sub #s-pricing-admin > .ah-hdr {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    z-index: 1;
    flex-shrink: 0;
  }

  body.mobile-app-enabled.mobile-profile-sub #s-admin-settings,
  body.mobile-app-enabled.mobile-profile-sub #s-admin-products,
  body.mobile-app-enabled.mobile-profile-sub #s-admin-employees,
  body.mobile-app-enabled.mobile-profile-sub #s-admin-route-hub,
  body.mobile-app-enabled.mobile-profile-sub #s-admin-routes,
  body.mobile-app-enabled.mobile-profile-sub #s-admin-accounts,
  body.mobile-app-enabled.mobile-profile-sub #s-admin-branches,
  body.mobile-app-enabled.mobile-profile-sub #s-pricing-admin,
  body.mobile-app-enabled.mobile-profile-sub #s-admin-employee-profile {
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  }

  /* การตั้งค่า / จัดการระบบ — balanced 2×2 grid + minimalist cards */
  body.mobile-app-enabled #s-admin-settings .ah-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 14px 16px 20px;
    background: #f0f4fa;
  }

  body.mobile-app-enabled #s-admin-settings .ah-tile {
    border: none;
    border-radius: 12px;
    padding: 18px 12px 16px;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.07);
    background: #fff;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    -webkit-tap-highlight-color: transparent;
  }

  body.mobile-app-enabled #s-admin-settings .ah-tile:active {
    transform: scale(0.98);
    box-shadow: 0 1px 8px rgba(15, 23, 42, 0.06);
  }

  body.mobile-app-enabled #s-admin-settings .ah-tile:hover {
    transform: none;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.07);
  }

  body.mobile-app-enabled #s-admin-settings .ah-tile-ic {
    border: none;
    width: 48px;
    height: 48px;
    margin: 0 0 12px;
    border-radius: 12px;
    flex-shrink: 0;
  }

  body.mobile-app-enabled #s-admin-settings .ah-tile-ic .ah-tile-img {
    width: 28px;
    height: 28px;
  }

  body.mobile-app-enabled #s-admin-settings .ah-tile-t {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-top: 0;
    line-height: 1.35;
  }

  body.mobile-app-enabled #s-admin-settings .ah-tile-d {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 6px;
    line-height: 1.45;
    max-width: 100%;
  }

  body.mobile-app-enabled #s-admin-settings .ah-wrap {
    background: #f0f4fa;
  }

  html.dark body.mobile-app-enabled #s-admin-settings .ah-settings-grid {
    background: #0f172a;
  }

  html.dark body.mobile-app-enabled #s-admin-settings .ah-tile {
    background: #1e293b;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
  }

  html.dark body.mobile-app-enabled #s-admin-settings .ah-tile-t {
    color: #e2e8f0;
  }

  html.dark body.mobile-app-enabled #s-admin-settings .ah-tile-d {
    color: #64748b;
  }

  /* โปรไฟล์พนักงาน — read-only mobile layout */
  body.mobile-app-enabled #s-admin-employee-profile.aep-view-only .aep-wrap {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  body.mobile-app-enabled #s-admin-employee-profile.aep-view-only .aep-section {
    margin-left: 16px;
    margin-right: 16px;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(15, 23, 42, 0.08);
    border: none;
    padding: 16px 14px;
  }

  body.mobile-app-enabled #s-admin-employee-profile.aep-view-only .aep-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
  }

  body.mobile-app-enabled #s-admin-employee-profile.aep-view-only .aep-row.aep-row-full {
    grid-template-columns: 1fr;
  }

  body.mobile-app-enabled #s-admin-employee-profile.aep-view-only .aep-inp.aep-mask-char {
    font-size: 15px;
    letter-spacing: 0.05em;
    font-weight: 500;
    color: #475569;
  }

  body.mobile-app-enabled #s-admin-employee-profile.aep-view-only .aep-view-only-note {
    margin-top: 8px;
    padding: 0 20px 12px;
  }

  body.mobile-app-enabled:not(.mobile-app-deep) #s-attendance-hub .ah-att-scroll {
    padding-top: 0;
  }

  body.mobile-app-enabled.ah-att-map-tab-on #s-attendance-hub.screen.active .ah-att-scroll {
    overflow: hidden;
  }

  body.mobile-app-enabled.ah-att-map-tab-on #s-attendance-hub.screen.active.ah-att-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding-bottom: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  body.mobile-app-enabled.ah-att-map-tab-on #s-attendance-hub.screen.active {
    overflow: hidden;
  }

  body.mobile-app-enabled.ah-att-map-tab-on #s-attendance-hub.screen.active .ah-att-scroll {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.mobile-app-enabled.ah-att-map-tab-on #s-attendance-hub.screen.active #ah-att-pane-map.on {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: auto !important;
    padding: 0;
    overflow: hidden;
  }

  body.mobile-app-enabled.ah-att-map-tab-on #s-attendance-hub.screen.active .ah-att-map-layout {
    flex: 1;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.mobile-app-enabled.ah-att-map-tab-on #s-attendance-hub.screen.active .ah-att-map-stage {
    flex: 1 1 52%;
    min-height: 0;
    max-height: 52%;
    padding: 8px 8px 0;
  }

  body.mobile-app-enabled.ah-att-map-tab-on #s-attendance-hub.screen.active .ah-att-map-canvas-wrap {
    flex: 1 1 auto;
    height: auto;
    min-height: 130px;
    max-height: none;
  }

  body.mobile-app-enabled.ah-att-map-tab-on #s-attendance-hub.screen.active .ah-att-map-dock {
    flex: 1 1 48%;
    min-height: 118px;
    max-height: 48%;
    margin: 6px 8px 10px;
    padding: 10px 12px 14px;
    box-sizing: border-box;
  }

  body.mobile-app-enabled.ah-att-map-tab-on #s-attendance-hub.screen.active .ah-att-map-online {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-app-enabled.ah-att-map-tab-on #s-attendance-hub.screen.active .ah-att-map-chip {
    min-height: 100px;
    max-height: 112px;
    padding: 8px 8px 6px;
  }

  /* ── OSA flow (เลือกสาขา → คีย์) — header ย่อย + ปุ่มบันทึกเหนือ bottom nav ── */
  body.mobile-app-enabled.mob-on-osa-flow #mobile-app-header {
    display: none !important;
  }

  body.mobile-app-enabled.mob-on-osa-flow .app {
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  body.mobile-app-enabled.mob-on-osa-flow #s-osa.active,
  body.mobile-app-enabled.mob-on-osa-flow #s-catlist.active {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden !important;
  }

  body.mobile-app-enabled.mob-on-osa-flow #s-osa.active #osa-body,
  body.mobile-app-enabled.mob-on-osa-flow #s-catlist.active #cat-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-app-enabled.mob-on-osa-flow #s-osa .osa-sticky-head,
  body.mobile-app-enabled.mob-on-osa-flow #s-catlist .catlist-sticky-head {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 30;
  }

  body.mobile-app-enabled.mob-on-osa-flow #s-osa .hdr-back,
  body.mobile-app-enabled.mob-on-osa-flow #s-catlist .hdr-back,
  body.mobile-app-enabled.mob-on-osa-flow #s-photo .hdr-back,
  body.mobile-app-enabled.mob-on-osa-flow #s-store .hdr-back,
  body.mobile-app-enabled.mob-on-osa-flow #s-account .hdr-back {
    padding: 6px 10px;
    font-size: 22px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1565C0;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(21, 101, 192, 0.08);
  }

  body.mobile-app-enabled #s-osa.active .submit-bar,
  body.mobile-app-enabled #s-catlist.active .catlist-submit-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(108px + env(safe-area-inset-bottom, 0px));
    z-index: 99990;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.12);
    background: #fff;
  }

  body.mobile-app-enabled #s-osa.active #osa-body {
    padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.mobile-app-enabled #s-catlist.active #cat-list {
    padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.mobile-app-enabled.mob-on-osa-flow #s-photo.active > div:nth-child(2),
  body.mobile-app-enabled.mob-on-osa-flow #s-store.active #store-list,
  body.mobile-app-enabled.mob-on-osa-flow #s-account.active .acc-grid {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.dark body.mobile-app-enabled #s-osa.active .submit-bar,
  html.dark body.mobile-app-enabled #s-catlist.active .catlist-submit-bar {
    background: #111827;
  }

  body.mobile-app-enabled #ah-att-checkin-fab-wrap {
    display: none !important;
  }

  body.mobile-app-enabled #mobile-pending-fab {
    display: none !important;
  }

  /* หน้าแรกมือถือใช้ senior board — ไม่แสดงแผงสรุป PC */
  body.mobile-app-enabled #mob-pc-summary {
    display: none !important;
  }

  body.mobile-app-enabled #acc-my-dashboard {
    display: none !important;
  }

  body.mobile-app-enabled #s-checker-home.active,
  body.mobile-app-enabled #s-admin-home.active {
    display: none !important;
  }

  #mobile-app-tabbar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    min-height: calc(58px + env(safe-area-inset-bottom, 0px));
    padding: 28px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid rgba(21, 101, 192, 0.12);
    box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.08);
    align-items: flex-end;
    justify-content: space-around;
    overflow: visible;
    isolation: isolate;
  }

  #mobile-app-tabbar::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 28px;
    background: inherit;
    pointer-events: none;
    z-index: 0;
  }

  body.mobile-app-enabled #mobile-app-tabbar {
    display: flex;
  }
  /* ล็อก bottom nav ตลอด (ยกเว้น admin/staff desktop roles) */
  body.mobile-app-enabled:not([data-role="admin"]):not([data-role="staff"]) #mobile-app-tabbar {
    display: flex !important;
  }
  body.mobile-app-enabled[data-role="admin"] #mobile-app-tabbar,
  body.mobile-app-enabled[data-role="staff"] #mobile-app-tabbar {
    display: none !important;
  }

  body.cam-overlay-open #mobile-app-tabbar,
  body.cam-overlay-open.mobile-app-enabled #mobile-app-tabbar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.cam-overlay-open #mobile-app-header {
    display: none !important;
  }

  #camera-overlay {
    z-index: 100000 !important;
  }

  #lightbox-overlay {
    z-index: 100001 !important;
  }

  .mob-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    padding: 0 0 2px;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: visible;
    z-index: 1;
  }

  .mob-tab-ic {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: -22px;
    position: relative;
    z-index: 3;
    background: linear-gradient(160deg, #ffffff 0%, #eef2f8 100%);
    border: 2.5px solid rgba(255, 255, 255, 0.98);
    box-shadow:
      0 6px 18px rgba(15, 23, 42, 0.16),
      0 2px 4px rgba(21, 101, 192, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .mob-tab:active .mob-tab-ic {
    transform: scale(0.94);
  }

  .mob-tab-ic img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
    background: transparent;
    border-radius: 0;
  }

  .mob-tab.on .mob-tab-ic {
    background: linear-gradient(160deg, #e8f4fd 0%, #bbdefb 100%);
    border-color: rgba(255, 255, 255, 1);
    box-shadow:
      0 8px 22px rgba(21, 101, 192, 0.32),
      0 2px 6px rgba(13, 71, 161, 0.15);
  }

  .mob-tab.on {
    color: #1565C0;
  }

  .mob-tab-lbl {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    padding: 0 1px;
  }

  .mob-tab.on .mob-tab-lbl {
    color: #1565C0;
  }

  .mob-tab-fab {
    flex: 1.15 1 0;
    min-width: 0;
    margin-top: 0;
    justify-content: flex-end;
  }

  .mob-tab-fab-lbl {
    font-size: 10px;
    line-height: 1.25;
    color: #1565C0;
    max-width: 72px;
    margin-top: 1px;
  }

  html.dark .mob-tab-fab-lbl {
    color: #60a5fa;
  }

  .mob-tab-badge {
    position: absolute;
    top: -22px;
    right: calc(50% - 26px);
    z-index: 4;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #C62828;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
  }

  .mob-tab-badge.show {
    display: flex;
  }

  /* Mobile screens */
  .mob-wrap {
    background: #f0f4fa;
    min-height: 100%;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .mob-top {
    background: linear-gradient(160deg, #1565C0 0%, #0D47A1 100%);
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 18px;
    color: #fff;
  }

  .mob-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  .mob-greet {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 2px;
  }

  .mob-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
  }

  .mob-sub {
    font-size: 11px;
    opacity: 0.85;
    margin-top: 4px;
  }

  .mob-top-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }

  .mob-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
  }

  .mob-body {
    padding: 14px 16px 8px;
    margin-top: -10px;
  }

  .mob-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e3eaf5;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.06);
  }

  .mob-card-title {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
  }

  .mob-alerts-pending[role="button"] {
    cursor: pointer;
  }

  .mob-pending-tap-hint {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #1565C0;
    text-align: center;
  }

  body.mobile-app-enabled #mob-pc-leaves-box,
  body.mobile-app-enabled #mob-pc-swap-box,
  body.mobile-app-enabled #mob-pc-night-shift-box {
    display: none !important;
  }

  .mob-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 13px;
    color: #334155;
  }

  .mob-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .mob-status-dot.ok { background: #2E7D32; }
  .mob-status-dot.wait { background: #F57C00; }
  .mob-status-dot.off { background: #cbd5e1; }

  .mob-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    transition: transform 0.15s ease;
    position: relative;
  }

  .mob-action-soon {
    opacity: 1;
    cursor: not-allowed;
    background: #f8fafc;
    border-color: #e2e8f0;
  }

  .mob-action-soon .mob-action-ic {
    opacity: 0.55;
    filter: grayscale(1);
  }

  .mob-action-soon .mob-action-t {
    color: #94a3b8;
  }

  .mob-action-soon .mob-action-d {
    color: #cbd5e1;
  }

  .mob-action-soon-badge {
    position: absolute;
    top: 8px;
    right: 10px;
    background: #94a3b8;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
    z-index: 2;
    box-shadow: none;
  }

  .mob-action:active:not(.mob-action-soon) {
    transform: scale(0.98);
  }

  .mob-action-ic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #E3F2FD;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  }

  /* แท็บงาน — พื้นหลังพาสเทลตามเมนู */
  #s-mobile-work .mob-work-osa .mob-action-ic {
    background: linear-gradient(145deg, #dbeafe 0%, #bfdbfe 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 8px rgba(21, 101, 192, 0.12);
  }

  #s-mobile-work .mob-work-promo-active .mob-action-ic,
  #s-mobile-work .mob-work-promo-soon .mob-action-ic {
    background: linear-gradient(145deg, #fce7f3 0%, #fbcfe8 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 8px rgba(219, 39, 119, 0.1);
  }

  #s-mobile-work .mob-work-sos .mob-action-ic,
  #s-mobile-work .mob-work-sos-soon .mob-action-ic {
    background: linear-gradient(145deg, #ccfbf1 0%, #99f6e4 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 8px rgba(13, 148, 136, 0.12);
  }

  #s-mobile-work .mob-work-expiry .mob-action-ic {
    background: linear-gradient(145deg, #fef3c7 0%, #fde68a 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 8px rgba(217, 119, 6, 0.12);
  }

  #s-mobile-work .mob-work-npd .mob-action-ic {
    background: linear-gradient(145deg, #dcfce7 0%, #bbf7d0 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 8px rgba(22, 163, 74, 0.12);
  }

  #s-mobile-work .mob-work-audit .mob-action-ic {
    background: linear-gradient(145deg, #e0e7ff 0%, #c7d2fe 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 8px rgba(79, 70, 229, 0.12);
  }

  .mob-action-ic img {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  .mob-action-t {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
  }

  .mob-action-d {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
  }

  .mob-action-arrow {
    margin-left: auto;
    color: #cbd5e1;
    font-size: 18px;
  }

  .mob-list-empty {
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
    padding: 20px 8px;
  }

  /* Profile — grid menu & layout */
  body.mobile-app-enabled #s-mobile-profile.active {
    background: #f3f4f6;
  }

  .mob-profile-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 10px 14px calc(24px + env(safe-area-inset-bottom, 0px));
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }

  .mob-profile-hdr {
    padding: 4px 4px 2px;
  }

  .mob-profile-hdr-eyebrow {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
  }

  .mob-profile-hdr-name {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: #0f172a;
    letter-spacing: -0.02em;
  }

  .mob-profile-hdr-sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: #64748b;
  }

  .mob-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .mob-profile-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 108px;
    padding: 14px 12px 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }

  .mob-profile-card:active {
    transform: scale(0.98);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  @media (hover: hover) {
    .mob-profile-card:hover {
      box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.08);
    }
  }

  .mob-profile-card-ic {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    overflow: hidden;
  }

  .mob-profile-card-ic img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
  }

  .mob-profile-card-ic.employee { background: #eff6ff; }
  .mob-profile-card-ic.payroll { background: #ecfdf5; }
  .mob-profile-card-ic.dash { background: #f5f3ff; }
  .mob-profile-card-ic.settings { background: #f1f5f9; }

  .mob-profile-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
  }

  .mob-profile-card-sub {
    font-size: 10px;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.35;
    margin-top: auto;
  }

  .mob-profile-logout-wrap {
    margin-top: 4px;
    padding-top: 4px;
  }

  .mob-profile-logout-btn {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1.5px solid rgba(198, 40, 40, 0.32);
    border-radius: 12px;
    background: transparent;
    color: #c62828;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  }

  .mob-profile-logout-btn:active {
    transform: scale(0.98);
    background: rgba(198, 40, 40, 0.06);
    border-color: rgba(198, 40, 40, 0.45);
  }

  @media (hover: hover) {
    .mob-profile-logout-btn:hover {
      background: rgba(198, 40, 40, 0.04);
      border-color: rgba(198, 40, 40, 0.4);
    }
  }

  .mob-profile-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    font-family: inherit;
    text-align: left;
  }

  .mob-profile-ic {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #E3F2FD;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  }

  .mob-profile-ic-emoji {
    font-size: 20px;
    line-height: 1;
  }

  /* แท็บข้อมูลฉัน — พื้นหลังพาสเทลตามเมนู */
  #s-mobile-profile .mob-prof-employee .mob-profile-ic {
    background: linear-gradient(145deg, #dbeafe 0%, #bfdbfe 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 8px rgba(21, 101, 192, 0.12);
  }

  #s-mobile-profile .mob-prof-payroll .mob-profile-ic {
    background: linear-gradient(145deg, #d1fae5 0%, #a7f3d0 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 8px rgba(5, 150, 105, 0.12);
  }

  #s-mobile-profile .mob-prof-dash .mob-profile-ic {
    background: linear-gradient(145deg, #ede9fe 0%, #ddd6fe 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 8px rgba(109, 40, 217, 0.12);
  }

  #s-mobile-profile .mob-prof-settings .mob-profile-ic {
    background: linear-gradient(145deg, #e2e8f0 0%, #cbd5e1 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 8px rgba(71, 85, 105, 0.1);
  }

  #s-mobile-profile .mob-prof-logout .mob-profile-ic {
    background: linear-gradient(145deg, #fee2e2 0%, #fecaca 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 8px rgba(220, 38, 38, 0.1);
  }

  .mob-profile-ic img {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  .mob-profile-row:last-child {
    border-bottom: none;
  }

  html.dark #mobile-app-tabbar {
    background: rgba(17, 24, 39, 0.98) !important;
    border-top-color: #1e293b !important;
  }

  html.dark #mobile-app-tabbar::before {
    background: rgba(17, 24, 39, 0.98);
  }

  html.dark .mob-tab { color: #94a3b8; }
  html.dark .mob-tab.on { color: #60a5fa; }
  html.dark .mob-tab-ic {
    background: linear-gradient(160deg, #1e293b 0%, #111827 100%);
    border-color: rgba(30, 41, 59, 0.95);
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.4),
      0 2px 4px rgba(96, 165, 250, 0.1);
  }
  html.dark .mob-tab.on .mob-tab-ic {
    background: linear-gradient(160deg, #1e3a5f 0%, #0d47a1 100%);
    border-color: rgba(51, 65, 85, 0.9);
    box-shadow:
      0 8px 22px rgba(21, 101, 192, 0.4),
      0 2px 6px rgba(0, 0, 0, 0.25);
  }
  html.dark .mob-wrap { background: #0f172a; }
  html.dark .mob-card,
  html.dark .mob-action {
    background: #111827 !important;
    border-color: #1e293b !important;
  }
  html.dark .mob-action-t { color: #e2e8f0; }
  html.dark .mob-card-title { color: #64748b; }

  html.dark #s-mobile-work .mob-work-osa .mob-action-ic {
    background: linear-gradient(145deg, rgba(30, 58, 138, 0.55) 0%, rgba(29, 78, 216, 0.35) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  html.dark #s-mobile-work .mob-work-promo-active .mob-action-ic,
  html.dark #s-mobile-work .mob-work-promo-soon .mob-action-ic {
    background: linear-gradient(145deg, rgba(157, 23, 77, 0.4) 0%, rgba(190, 24, 93, 0.28) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  html.dark #s-mobile-work .mob-work-sos .mob-action-ic,
  html.dark #s-mobile-work .mob-work-sos-soon .mob-action-ic {
    background: linear-gradient(145deg, rgba(15, 118, 110, 0.45) 0%, rgba(13, 148, 136, 0.3) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  html.dark #s-mobile-work .mob-work-expiry .mob-action-ic {
    background: linear-gradient(145deg, rgba(180, 83, 9, 0.4) 0%, rgba(217, 119, 6, 0.28) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  html.dark #s-mobile-work .mob-work-npd .mob-action-ic {
    background: linear-gradient(145deg, rgba(21, 128, 61, 0.45) 0%, rgba(22, 163, 74, 0.3) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  html.dark #s-mobile-work .mob-work-audit .mob-action-ic {
    background: linear-gradient(145deg, rgba(67, 56, 202, 0.45) 0%, rgba(79, 70, 229, 0.3) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  html.dark #s-mobile-profile .mob-prof-employee .mob-profile-ic {
    background: linear-gradient(145deg, rgba(30, 58, 138, 0.55) 0%, rgba(29, 78, 216, 0.35) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  html.dark #s-mobile-profile .mob-prof-payroll .mob-profile-ic {
    background: linear-gradient(145deg, rgba(6, 95, 70, 0.45) 0%, rgba(5, 150, 105, 0.3) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  html.dark #s-mobile-profile .mob-prof-dash .mob-profile-ic {
    background: linear-gradient(145deg, rgba(91, 33, 182, 0.45) 0%, rgba(109, 40, 217, 0.3) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  html.dark #s-mobile-profile .mob-prof-settings .mob-profile-ic {
    background: linear-gradient(145deg, rgba(51, 65, 85, 0.55) 0%, rgba(71, 85, 105, 0.35) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  html.dark #s-mobile-profile .mob-prof-logout .mob-profile-ic {
    background: linear-gradient(145deg, rgba(153, 27, 27, 0.4) 0%, rgba(220, 38, 38, 0.28) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  /* ── Mobile Home v2 (layout ตาม staff office app) ── */
  .mob-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .mob-home-v2 {
    background: #eef2f8;
    padding-bottom: 0;
  }

  .mob-home-header {
    background: linear-gradient(105deg, #071e42 0%, #0c3d7a 42%, #1565C0 100%);
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 12px;
    color: #fff;
    position: relative;
  }

  .mob-home-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    min-height: 44px;
  }

  .mob-home-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
  }

  .mob-home-icon-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    -webkit-tap-highlight-color: transparent;
  }

  .mob-home-icon-btn.dark-mode-toggle-btn {
    font-size: 17px;
    line-height: 1;
  }

  .mob-home-icon-btn:active {
    background: rgba(0, 0, 0, 0.35);
  }

  /* กระดิ่งแจ้งเตือน — ไม่มีแจ้งเตือน: ขอบขาว / มีแจ้งเตือน: เหลือง + badge แดง */
  .mob-home-bell {
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-bell-ic {
    position: relative;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mob-bell-svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  .mob-bell-svg--outline {
    color: #fff;
  }

  .mob-bell-svg--filled {
    display: none;
  }

  .mob-home-bell.has-alert .mob-bell-svg--outline {
    display: none;
  }

  .mob-home-bell.has-alert .mob-bell-svg--filled {
    display: block;
  }

  .mob-bell-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #C62828;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border: 2px solid rgba(7, 30, 66, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    box-sizing: border-box;
  }

  .mob-bell-badge.show {
    display: flex;
  }

  /* Role badge — มุมขวาบน header */
  .mt-role-badge-wrap {
    position: relative;
    flex-shrink: 0;
  }

  .mt-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 148px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  .mt-role-badge.is-switchable {
    cursor: pointer;
    padding-right: 8px;
  }

  .mt-role-badge.is-switchable:active {
    background: rgba(255, 255, 255, 0.22);
  }

  .mt-role-badge-caret {
    font-size: 9px;
    opacity: 0.85;
    flex-shrink: 0;
  }

  .mt-role-badge-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 196px;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e3eaf5;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
    z-index: 10050;
  }

  .mt-role-badge-menu-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
  }

  .mt-role-badge-menu-item:hover,
  .mt-role-badge-menu-item.is-active {
    background: #E3F2FD;
    color: #1565C0;
  }

  .mob-header-bell-24 .mob-bell-ic,
  .mob-header-bell-24 .mob-bell-svg {
    width: 24px;
    height: 24px;
  }

  .mob-header-bell-24 {
    width: 36px;
    height: 36px;
  }

  #mob-header-status-pill {
    display: none !important;
  }

  body.mobile-app-enabled .mob-status-block {
    margin-bottom: 10px;
  }

  body.mobile-app-enabled .mob-home-senior-board {
    margin-top: 0;
    margin-bottom: 12px;
  }

  body.mobile-app-enabled .mob-day-pulse {
    margin-bottom: 12px;
  }

  body.mobile-app-enabled .mob-top-oos-section {
    margin-bottom: 12px;
  }

  html.dark .mt-role-badge-menu {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }

  html.dark .mt-role-badge-menu-item {
    color: #e2e8f0;
  }

  html.dark .mt-role-badge-menu-item:hover,
  html.dark .mt-role-badge-menu-item.is-active {
    background: rgba(30, 58, 138, 0.45);
    color: #93c5fd;
  }

  .mob-alerts-back {
    flex-shrink: 0;
    margin-right: 4px;
  }

  .mob-home-clock-wrap {
    flex-shrink: 0;
    min-width: 0;
    text-align: left;
  }

  .mob-home-clock {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .mob-home-date {
    font-size: 10px;
    opacity: 0.82;
    margin-top: 3px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .mob-home-top-sep {
    width: 1px;
    height: 38px;
    background: rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
  }

  .mob-home-user-block {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .mob-home-user-greet {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mob-home-user-greet #mob-greet {
    font-weight: 600;
    margin-right: 4px;
  }

  .mob-home-user-greet #mob-user-name {
    font-weight: 700;
  }

  .mob-home-user-role {
    font-size: 10px;
    opacity: 0.78;
    margin-top: 2px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mob-home-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
    border: 2px solid rgba(255, 255, 255, 0.55);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 10px rgba(7, 30, 66, 0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  .mob-home-avatar.has-photo {
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.45), 0 4px 14px rgba(7, 30, 66, 0.22);
  }

  .mob-home-avatar-ph {
    font-size: 20px;
    line-height: 1;
    opacity: 0.92;
  }

  .mob-home-avatar:active {
    background: rgba(255, 255, 255, 0.28);
  }

  .mob-home-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mob-home-body {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    background: #eef2f8;
  }

  body.mobile-app-enabled.mob-on-home .mob-status-block {
    padding: 22px 12px 10px;
  }

  .mob-status-block {
    padding: 12px 12px 10px;
  }

  .mob-hero-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background:
      radial-gradient(ellipse 140px 100px at 88% 22%, rgba(100, 181, 246, 0.38) 0%, transparent 72%),
      radial-gradient(ellipse 100px 80px at 92% 68%, rgba(100, 181, 246, 0.22) 0%, transparent 70%),
      linear-gradient(145deg, #071e42 0%, #0c3d7a 48%, #0D47A1 100%);
    box-shadow: 0 4px 18px rgba(13, 71, 161, 0.22), 0 1px 3px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  .mob-hero-deco {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 30, 66, 0.05) 0%, rgba(7, 30, 66, 0.22) 100%);
    pointer-events: none;
    z-index: 0;
  }

  .mob-hero-stars,
  .mob-hero-stars .mob-star {
    display: none !important;
  }

  .mob-hero-liquid {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
  }

  .mob-hero-liquid::before,
  .mob-hero-liquid::after {
    content: '';
    position: absolute;
    width: 130%;
    height: 130%;
    border-radius: 42%;
    filter: blur(2px);
    will-change: transform;
  }

  .mob-hero-liquid::before {
    top: -35%;
    left: -28%;
    background: radial-gradient(circle at 40% 40%, rgba(100, 181, 246, 0.42) 0%, rgba(21, 101, 192, 0.12) 45%, transparent 70%);
    animation: mobLiquidDriftA 20s ease-in-out infinite alternate;
  }

  .mob-hero-liquid::after {
    bottom: -40%;
    right: -32%;
    background: radial-gradient(circle at 55% 55%, rgba(66, 165, 245, 0.38) 0%, rgba(13, 71, 161, 0.1) 50%, transparent 72%);
    animation: mobLiquidDriftB 26s ease-in-out infinite alternate-reverse;
  }

  @keyframes mobLiquidDriftA {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    50% { transform: translate(6%, 8%) scale(1.06) rotate(3deg); }
    100% { transform: translate(-4%, 5%) scale(0.96) rotate(-2deg); }
  }

  @keyframes mobLiquidDriftB {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-7%, -5%) scale(1.08); }
    100% { transform: translate(5%, -3%) scale(0.94); }
  }

  body.mobile-app-enabled:not(.mob-on-home) .mob-hero-liquid::before,
  body.mobile-app-enabled:not(.mob-on-home) .mob-hero-liquid::after {
    animation-play-state: paused;
  }

  @media (prefers-reduced-motion: reduce) {
    .mob-hero-liquid::before,
    .mob-hero-liquid::after {
      animation: none;
    }
  }

  .mob-hero-inner {
    position: relative;
    z-index: 1;
    padding: 18px 16px 14px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .mob-hero-brand {
    position: absolute;
    top: 22px;
    right: 14px;
    left: auto;
    width: min(38%, 132px);
    max-width: 132px;
    text-align: right;
    pointer-events: none;
    z-index: 2;
    opacity: 0.94;
  }

  .mob-hero-brand-kc {
    display: block;
    font-size: clamp(10px, 2.85vw, 13px);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  .mob-hero-brand-team {
    display: block;
    margin-top: 2px;
    font-size: clamp(8px, 2.2vw, 10px);
    font-weight: 600;
    letter-spacing: 0.22em;
    color: #90CAF9;
    line-height: 1.2;
  }

  .mob-hero-brand-rule {
    display: block;
    height: 2px;
    width: 100%;
    max-width: 52px;
    margin-top: 4px;
    margin-left: auto;
    background: #E4002B;
    border-radius: 1px;
  }

  .mob-hero-brand-watermark {
    display: none !important;
  }

  .mob-hero-content {
    flex: 1;
    min-height: 0;
    max-width: calc(100% - 118px);
    padding-right: 6px;
    position: relative;
    z-index: 1;
  }

  .mob-hero-title {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.92;
    margin-bottom: 10px;
    line-height: 1.35;
    padding-top: 2px;
  }

  /* แถบเส้นสถานะแนวตั้ง — gradient + glow ให้ดูมีมิติ */
  .mob-hero-timeline {
    position: relative;
    padding-left: 0;
    --mob-track-x: 11px;
  }

  .mob-hero-timeline::before {
    content: '';
    position: absolute;
    left: calc(var(--mob-track-x) - 1.5px);
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.16) 50%,
      rgba(255, 255, 255, 0.06) 100%
    );
    box-shadow:
      inset 0 1px 3px rgba(0, 0, 0, 0.35),
      inset 0 -1px 2px rgba(255, 255, 255, 0.06);
  }

  .mob-hero-timeline::after {
    content: '';
    position: absolute;
    left: calc(var(--mob-track-x) - 1.5px);
    top: 8px;
    width: 3px;
    height: calc(100% - 16px);
    border-radius: 3px;
    background: linear-gradient(
      180deg,
      #86efac 0%,
      #4ade80 38%,
      #2dd4bf 72%,
      #22d3ee 100%
    );
    box-shadow:
      0 0 6px rgba(74, 222, 128, 0.55),
      0 0 14px rgba(34, 211, 238, 0.28);
    transform: scaleY(var(--mob-track-scale, 0));
    transform-origin: top center;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    will-change: transform;
  }

  .mob-hero-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    padding-bottom: 12px;
  }

  .mob-hero-step:last-child {
    padding-bottom: 0;
  }

  .mob-hero-node {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    margin-left: calc(var(--mob-track-x) - 6.5px);
    position: relative;
    z-index: 1;
    border: 2px solid rgba(255, 255, 255, 0.38);
    background: radial-gradient(
      circle at 38% 32%,
      rgba(30, 58, 95, 0.95) 0%,
      rgba(7, 30, 66, 0.98) 68%
    );
    box-shadow:
      inset 0 2px 4px rgba(0, 0, 0, 0.4),
      0 1px 0 rgba(255, 255, 255, 0.14);
    transition:
      background 0.35s ease,
      border-color 0.35s ease,
      box-shadow 0.35s ease,
      transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mob-hero-step.done .mob-hero-node {
    border-color: rgba(187, 247, 208, 0.95);
    background: radial-gradient(
      circle at 32% 28%,
      #ecfdf5 0%,
      #86efac 38%,
      #4ade80 72%,
      #22c55e 100%
    );
    box-shadow:
      0 0 0 2px rgba(74, 222, 128, 0.22),
      0 0 10px rgba(74, 222, 128, 0.45),
      inset 0 1px 2px rgba(255, 255, 255, 0.55);
  }

  .mob-hero-step.current .mob-hero-node {
    transform: scale(1.18);
    border-color: rgba(255, 255, 255, 0.98);
    background: radial-gradient(
      circle at 34% 30%,
      #ffffff 0%,
      #e0f7fa 42%,
      #4dd0e1 78%,
      #26c6da 100%
    );
    box-shadow:
      0 0 0 3px rgba(38, 198, 218, 0.28),
      0 0 0 6px rgba(38, 198, 218, 0.12),
      0 0 14px rgba(38, 198, 218, 0.62),
      0 2px 8px rgba(0, 0, 0, 0.22),
      inset 0 1px 3px rgba(255, 255, 255, 0.92);
  }

  .mob-hero-step-body {
    flex: 1;
    min-width: 0;
  }

  .mob-hero-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
  }

  .mob-hero-lbl {
    font-size: 12px;
    opacity: 0.85;
    min-width: 48px;
  }

  .mob-hero-val {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .mob-hero-loc {
    font-size: 10px;
    opacity: 0.78;
    margin: 0 0 2px;
    line-height: 1.35;
  }

  .mob-hero-msg {
    font-size: 11px;
    font-weight: 600;
    margin: 4px 0 0;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    display: inline-block;
  }

  .mob-hero-msg.ok { background: rgba(46, 125, 50, 0.35); }
  .mob-hero-msg.active { background: rgba(255, 255, 255, 0.18); }

  .mob-hero-osa,
  .mob-hero-sup {
    font-size: 11px;
    opacity: 0.92;
    color: rgba(255, 255, 255, 0.9);
  }

  .mob-hero-osa .mob-status-row,
  .mob-hero-sup .mob-status-row {
    padding: 0;
  }

  .mob-hero-osa .mob-status-dot,
  .mob-hero-sup .mob-status-dot {
    border: 1px solid rgba(255, 255, 255, 0.4);
  }

  .mob-hero-actions {
    display: none !important;
  }

  @keyframes mobCheckinLaunch {
    0% { transform: scale(1); }
    35% { transform: scale(0.94); }
    70% { transform: scale(1.02); }
    100% { transform: scale(1); }
  }

  .mob-checkin-press {
    transform: scale(0.96) !important;
  }

  .mob-checkin-launch {
    animation: mobCheckinLaunch 0.32s ease-out;
  }

  #mobile-app-tabbar .mob-tab-fab.mob-tab-fab-press .mob-tab-ic,
  #mobile-app-tabbar .mob-tab-fab.mob-checkin-launch .mob-tab-ic {
    animation: mobTabFabPress 0.28s ease-out;
  }

  @keyframes mobTabFabPress {
    0% { transform: scale(1); }
    40% { transform: scale(0.88); }
    100% { transform: scale(1); }
  }

  .mob-hero-btn-main {
    flex: 1.35;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    border: none;
    border-radius: 999px;
    background: #fff;
    color: #1565C0;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    position: relative;
    isolation: isolate;
    transition:
      background-color 0.28s ease,
      color 0.28s ease,
      transform 0.18s ease,
      box-shadow 0.28s ease;
  }

  .mob-hero-btn-main.mob-hero-btn-needs-in {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 52%, #1B5E20 100%);
    color: #fff;
    box-shadow:
      0 4px 16px rgba(46, 125, 50, 0.38),
      0 2px 6px rgba(0, 0, 0, 0.12);
  }

  .mob-hero-btn-main.mob-hero-btn-checked-in {
    background: linear-gradient(135deg, #1976D2 0%, #1565C0 50%, #0D47A1 100%);
    color: #fff;
    box-shadow:
      0 4px 14px rgba(21, 101, 192, 0.35),
      0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .mob-hero-btn-main.mob-hero-btn-done {
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.88);
    box-shadow: none;
  }

  .mob-hero-btn-main.mob-hero-btn-pulse::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 999px;
    background: rgba(76, 175, 80, 0.42);
    z-index: -1;
    animation: mobHeroBtnPulse 2.6s ease-in-out infinite;
    pointer-events: none;
  }

  @keyframes mobHeroBtnPulse {
    0%, 100% {
      transform: scale(0.98);
      opacity: 0.65;
    }
    50% {
      transform: scale(1.12);
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mob-hero-btn-main.mob-hero-btn-pulse::after {
      animation: none;
      display: none;
    }
  }

  .mob-hero-btn-main.mob-hero-btn-needs-in:hover,
  .mob-hero-btn-main.mob-hero-btn-checked-in:hover {
    color: #fff;
  }

  .mob-hero-btn-main:hover {
    background: #E3F2FD;
    color: #0D47A1;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(21, 101, 192, 0.28);
  }

  .mob-hero-btn-main:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.2);
    background: #BBDEFB;
  }

  @media (hover: none) {
    .mob-hero-btn-main:active {
      background: #E3F2FD;
      transform: scale(0.98);
    }
  }

  .mob-hero-btn-main.mob-hero-btn-only {
    flex: 1 1 100%;
    width: 100%;
    padding: 12px 16px;
    font-size: 13px;
    min-height: 46px;
  }

  @media (max-width: 360px) {
    body.mobile-app-enabled.mob-on-home .mob-status-block {
      padding: 18px 10px 8px;
    }

    .mob-hero-inner {
      padding: 16px 12px 12px;
    }

    .mob-hero-brand {
      width: min(36%, 112px);
      top: 18px;
      right: 10px;
    }

    .mob-hero-brand-kc {
      font-size: 10px;
    }

    .mob-hero-brand-team {
      font-size: 8px;
      letter-spacing: 0.16em;
    }

    .mob-hero-content {
      max-width: calc(100% - 104px);
    }
  }

  .mob-hero-quota {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
  }

  .mob-hero-quota-title {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
  }

  .mob-hero-quota-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }

  .mob-hero-quota-item {
    text-align: center;
    padding: 8px 4px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, background 0.15s ease;
  }

  .mob-hero-quota-item:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.2);
  }

  .mob-hero-quota-item--annual { background: rgba(232, 245, 233, 0.22); }
  .mob-hero-quota-item--personal { background: rgba(255, 243, 224, 0.22); }
  .mob-hero-quota-item--sick { background: rgba(227, 242, 253, 0.22); }

  .mob-hero-quota-val {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
  }

  .mob-hero-quota-item--annual .mob-hero-quota-val { color: #A5D6A7; }
  .mob-hero-quota-item--personal .mob-hero-quota-val { color: #FFCC80; }
  .mob-hero-quota-item--sick .mob-hero-quota-val { color: #90CAF9; }

  .mob-hero-quota-lbl {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.78);
    margin-top: 3px;
    line-height: 1.25;
  }

  .mob-hero-quota-used {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
  }

  .mob-hero-quota-loading {
    grid-column: 1 / -1;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    padding: 6px 0;
  }

  .mob-hero-quota-tap {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 3px;
    font-weight: 600;
  }

  /* Supervisor — inline pending approval queue (P1) */
  .mob-sup-pending-queue {
    margin: 0 14px 12px;
  }

  .mob-sup-pending-toggle {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #FFF8E1, #FFECB3);
    box-shadow: 0 4px 16px rgba(21, 101, 192, 0.08);
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-sup-pending-toggle:active {
    transform: scale(0.99);
    opacity: 0.95;
  }

  .mob-sup-pending-toggle-title {
    font-size: 13px;
    font-weight: 700;
    color: #5D4037;
    flex: 1;
    text-align: left;
  }

  .mob-sup-pending-badge {
    background: #C62828;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
  }

  .mob-sup-pending-badge.is-zero {
    background: #94a3b8;
  }

  .mob-sup-pending-chevron {
    font-size: 12px;
    color: #8D6E63;
    transition: transform 0.2s ease;
  }

  .mob-sup-pending-toggle[aria-expanded="false"] .mob-sup-pending-chevron {
    transform: rotate(-90deg);
  }

  .mob-sup-pending-body {
    margin-top: 8px;
  }

  .mob-sup-pending-body.is-collapsed {
    display: none;
  }

  .mob-sup-pending-empty {
    display: none;
    text-align: center;
    padding: 14px 12px;
    font-size: 12px;
    color: #94a3b8;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(21, 101, 192, 0.06);
  }

  .mob-sup-pending-body.is-empty .mob-sup-pending-empty {
    display: block;
  }

  .mob-sup-pending-body.is-empty #mob-sup-pending-cards {
    display: none;
  }

  .mob-sup-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(21, 101, 192, 0.08);
    border: none;
    padding: 14px;
    margin-bottom: 8px;
  }

  .mob-approval-card .mob-approval-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
  }

  .mob-approval-type {
    font-size: 11px;
    font-weight: 700;
    color: #E65100;
  }

  .mob-approval-type.swap { color: #2E7D32; }
  .mob-approval-type.night { color: #303F9F; }
  .mob-approval-type.leave { color: #E65100; }

  .mob-approval-date {
    font-size: 10px;
    color: #94a3b8;
    white-space: nowrap;
  }

  .mob-approval-emp {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
  }

  .mob-approval-meta {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
    line-height: 1.4;
  }

  .mob-approval-reason {
    font-size: 11px;
    color: #475569;
    font-style: italic;
    margin-top: 4px;
    line-height: 1.35;
  }

  .mob-approval-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
  }

  .mob-btn {
    min-height: 48px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
  }

  .mob-btn-approve {
    background: #E8F5E9;
    color: #2E7D32;
  }

  .mob-btn-reject {
    background: #FFEBEE;
    color: #C62828;
  }

  .mob-btn:disabled {
    opacity: 0.55;
    pointer-events: none;
  }

  .mob-sup-pending-more {
    width: 100%;
    margin-top: 4px;
    padding: 10px;
    border: none;
    border-radius: 10px;
    background: #f1f5f9;
    color: #1565C0;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
  }

  /* Top OOS Alert Cards (P2) */
  .mob-top-oos-section {
    margin: 0 14px 14px;
  }

  .mob-top-oos-hdr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
  }

  .mob-top-oos-hdr .mob-home-section-title {
    margin: 0;
    font-size: 14px;
  }

  .mob-top-oos-date {
    font-size: 10px;
    color: #94a3b8;
    white-space: nowrap;
  }

  .mob-oos-alert-card {
    position: relative;
    padding-top: 16px;
  }

  .mob-oos-rank {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 11px;
    font-weight: 800;
    color: #C62828;
    background: #FFEBEE;
    padding: 2px 8px;
    border-radius: 999px;
  }

  .mob-oos-product {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
    padding-right: 44px;
    margin-bottom: 8px;
  }

  .mob-oos-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #64748b;
    margin-bottom: 10px;
  }

  .mob-oos-logo {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .mob-oos-stores {
    font-weight: 700;
    color: #C62828;
    background: #FFEBEE;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
  }

  .mob-oos-reason-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    margin: 0 0 8px;
    background: #f1f5f9;
  }

  .mob-oos-reason-bar .seg-dc { background: #1565C0; }
  .mob-oos-reason-bar .seg-shelf { background: #E65100; }
  .mob-oos-reason-bar .seg-sup { background: #7B1FA2; }
  .mob-oos-reason-bar .seg-other { background: #94a3b8; }

  .mob-oos-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 10px;
    color: #64748b;
    margin-bottom: 12px;
  }

  .mob-oos-legend .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 3px;
    vertical-align: middle;
  }

  .mob-oos-legend .dot.dc { background: #1565C0; }
  .mob-oos-legend .dot.shelf { background: #E65100; }
  .mob-oos-legend .dot.sup { background: #7B1FA2; }
  .mob-oos-legend .dot.other { background: #94a3b8; }

  .mob-oos-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mob-btn-outline {
    background: #fff;
    color: #1565C0;
    border: 1.5px solid #BBDEFB;
  }

  .mob-btn-warn {
    background: #FFF3E0;
    color: #E65100;
  }

  .mob-top-oos-empty {
    text-align: center;
    padding: 16px 12px;
    font-size: 12px;
    color: #94a3b8;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(21, 101, 192, 0.06);
  }

  /* OOS store list modal */
  .mob-oos-stores-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10070;
    background: rgba(15, 23, 42, 0.45);
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }

  .mob-oos-stores-overlay.open {
    display: flex;
  }

  .mob-oos-stores-sheet {
    width: 100%;
    max-height: min(75vh, 560px);
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mob-oos-stores-hdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  .mob-oos-stores-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
  }

  .mob-oos-stores-sub {
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
  }

  .mob-oos-stores-close {
    border: none;
    background: #f1f5f9;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
  }

  .mob-oos-store-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12px;
  }

  .mob-oos-store-row:last-child {
    border-bottom: none;
  }

  .mob-oos-store-pin {
    font-size: 16px;
    flex-shrink: 0;
  }

  .mob-oos-store-name {
    font-weight: 600;
    color: #334155;
  }

  .mob-oos-store-checker {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 2px;
  }

  /* Profile — leave quota (top row, 3 columns) */
  .mob-profile-quota {
    padding: 14px 12px;
    margin-bottom: 0;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  }

  .mob-profile-quota-title {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 10px;
    padding-left: 2px;
  }

  .mob-profile-quota-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .mob-profile-quota-item {
    text-align: center;
    padding: 10px 6px 8px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid rgba(21, 101, 192, 0.06);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
    min-height: 0;
    width: 100%;
  }

  .mob-profile-quota-item--annual { background: #ecfdf5; }
  .mob-profile-quota-item--personal { background: #fff7ed; }
  .mob-profile-quota-item--sick { background: #eff6ff; }

  .mob-profile-quota-val {
    font-size: 16px;
    font-weight: 800;
    color: #1565C0;
    line-height: 1.15;
  }

  .mob-profile-quota-item--annual .mob-profile-quota-val { color: #15803d; }
  .mob-profile-quota-item--personal .mob-profile-quota-val { color: #c2410c; }
  .mob-profile-quota-item--sick .mob-profile-quota-val { color: #1d4ed8; }

  .mob-profile-quota-lbl {
    font-size: 9px;
    font-weight: 600;
    color: #64748b;
    margin-top: 3px;
    line-height: 1.2;
    padding: 0 1px;
  }

  .mob-profile-quota-used {
    font-size: 8px;
    color: #94a3b8;
    margin-top: 2px;
    line-height: 1.2;
  }

  .mob-profile-quota-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 14px 10px;
    font-size: 12px;
    color: #94a3b8;
  }

  .mob-profile-quota-tap {
    font-size: 7px;
    color: #1565C0;
    margin-top: 3px;
    font-weight: 600;
    line-height: 1.15;
  }

  html.dark body.mobile-app-enabled #s-mobile-profile.active {
    background: #0b1120;
  }

  html.dark .mob-profile-hdr-name {
    color: #f1f5f9;
  }

  html.dark .mob-profile-hdr-eyebrow,
  html.dark .mob-profile-hdr-sub {
    color: #94a3b8;
  }

  html.dark .mob-profile-card {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25);
  }

  html.dark .mob-profile-card-title {
    color: #e2e8f0;
  }

  html.dark .mob-profile-card-sub {
    color: #64748b;
  }

  html.dark .mob-profile-quota {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.12);
  }

  html.dark .mob-profile-quota-title {
    color: #e2e8f0;
  }

  html.dark .mob-profile-logout-btn {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.35);
  }

  html.dark .mob-profile-logout-btn:active {
    background: rgba(248, 113, 113, 0.08);
  }

  /* Team OSA cards (P3) */
  .mob-team-zone-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #f8fafc, #e3f2fd);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(21, 101, 192, 0.06);
  }

  .mob-team-zone-pct {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    min-width: 64px;
    text-align: center;
  }

  .mob-team-zone-pct.good { color: #2E7D32; }
  .mob-team-zone-pct.warn { color: #F57C00; }
  .mob-team-zone-pct.bad { color: #C62828; }

  .mob-team-zone-title {
    font-size: 12px;
    font-weight: 700;
    color: #1565C0;
    margin-bottom: 4px;
  }

  .mob-team-zone-stats {
    font-size: 11px;
    color: #64748b;
  }

  .mob-team-pending {
    color: #C62828;
    font-weight: 700;
  }

  .mob-team-card {
    padding: 14px;
  }

  .mob-team-hdr {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
  }

  .mob-team-ava {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #E3F2FD;
    color: #1565C0;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }

  .mob-team-ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mob-team-info {
    flex: 1;
    min-width: 0;
  }

  .mob-team-name {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
  }

  .mob-team-accounts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }

  .mob-acc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 999px;
    border: none;
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
  }

  .mob-acc-chip:active {
    transform: scale(0.97);
    background: #e2e8f0;
  }

  .mob-acc-chip img {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
  }

  .mob-team-pending-lbl {
    font-size: 10px;
    color: #C62828;
    font-weight: 600;
    margin-top: 4px;
  }

  .mob-team-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }

  .mob-metric {
    text-align: center;
    background: #f8fafc;
    border-radius: 10px;
    padding: 8px 4px;
  }

  .mob-metric-val {
    font-size: 18px;
    font-weight: 800;
    color: #1565C0;
    line-height: 1.2;
  }

  .mob-metric-val.good { color: #2E7D32; }
  .mob-metric-val.warn { color: #F57C00; }
  .mob-metric-val.bad { color: #C62828; }

  .mob-metric-lbl {
    font-size: 9px;
    color: #94a3b8;
    margin-top: 2px;
    font-weight: 600;
  }

  .mob-btn-nudge {
    width: 100%;
    background: linear-gradient(135deg, #1565C0, #0D47A1);
    color: #fff;
    min-height: 48px;
    box-shadow: 0 4px 14px rgba(21, 101, 192, 0.28);
  }

  .mob-team-done-badge {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #2E7D32;
    background: #E8F5E9;
    border-radius: 10px;
    padding: 10px;
  }

  /* Supervisor Work tab — branch keying status */
  .mob-work-sup-intro {
    margin-bottom: 10px;
  }

  .mob-work-sup-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px;
    line-height: 1.3;
  }

  .mob-work-sup-sub {
    font-size: 11px;
    color: #64748b;
    margin: 0;
    line-height: 1.35;
  }

  .mob-work-sup-sum-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #f8fafc 0%, #e8f0fe 100%);
    border: 1px solid #e3eaf5;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
  }

  .mob-work-sup-sum-pct {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    min-width: 58px;
    text-align: center;
  }

  .mob-work-sup-sum-pct.good { color: #2E7D32; }
  .mob-work-sup-sum-pct.warn { color: #F57C00; }
  .mob-work-sup-sum-pct.bad { color: #C62828; }

  .mob-work-sup-sum-title {
    font-size: 12px;
    font-weight: 700;
    color: #1565C0;
    margin-bottom: 2px;
  }

  .mob-work-sup-sum-stats {
    font-size: 11px;
    color: #64748b;
    line-height: 1.35;
  }

  .mob-work-sup-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }

  .mob-chip-filter {
    border: 1px solid #e3eaf5;
    background: #fff;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
  }

  .mob-chip-filter.on {
    background: #1565C0;
    border-color: #1565C0;
    color: #fff;
  }

  .mob-work-branch-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .mob-work-branch-card {
    padding: 12px 14px;
  }

  .mob-branch-hdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
  }

  .mob-branch-store {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
  }

  .mob-branch-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .mob-branch-badge.pending {
    background: rgba(198, 40, 40, 0.1);
    color: #C62828;
  }

  .mob-branch-badge.done {
    background: rgba(46, 125, 50, 0.12);
    color: #2E7D32;
  }

  .mob-branch-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: #64748b;
    margin-bottom: 8px;
  }

  .mob-branch-account {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mob-branch-account img {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .mob-branch-checker {
    flex-shrink: 0;
    font-weight: 600;
    color: #475569;
  }

  .mob-branch-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    color: #94a3b8;
  }

  .mob-branch-osa {
    font-weight: 700;
    font-size: 11px;
  }

  .mob-branch-osa.good { color: #2E7D32; }
  .mob-branch-osa.warn { color: #F57C00; }
  .mob-branch-osa.bad { color: #C62828; }

  .mob-branch-nudge {
    width: 100%;
    margin-top: 10px;
  }

  body.mobile-app-enabled.mob-on-work #s-mobile-work .mob-body {
    margin-top: 0;
    padding-top: 14px;
  }

  body.mobile-app-enabled.mob-on-work #mob-task-center {
    padding-top: 4px;
  }

  .mob-work-mission-section {
    margin-bottom: 12px;
  }

  .mob-work-mission-hdr {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 10px;
  }

  .mob-work-mission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .mob-work-mission-grid--single {
    grid-template-columns: 1fr;
  }

  .mob-mission-ic--promo {
    background: linear-gradient(145deg, #fce7f3 0%, #fbcfe8 100%);
  }

  .mob-mission-card--soon {
    opacity: 0.88;
    cursor: not-allowed;
  }

  .mob-mission-card--soon .mob-mission-t,
  .mob-mission-card--soon .mob-mission-d {
    color: #94a3b8;
  }

  .mob-mission-soon-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #94a3b8;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    line-height: 1.2;
  }

  .mob-mission-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-height: 108px;
    padding: 12px 8px 10px;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-mission-card:active {
    transform: scale(0.98);
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.08);
  }

  @media (hover: hover) {
    .mob-mission-card:hover {
      transform: translateY(-2px);
      border-color: #c5d9f5;
      box-shadow: 0 6px 18px rgba(21, 101, 192, 0.12);
    }
  }

  .mob-mission-ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .mob-mission-ic--osa {
    color: #1565C0;
    background: linear-gradient(145deg, #E3F2FD 0%, #BBDEFB 100%);
  }

  .mob-mission-ic--osa svg {
    width: 22px;
    height: 22px;
  }

  .mob-mission-ic img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
  }

  .mob-mission-glyph {
    font-size: 18px;
    line-height: 1;
    color: #1565C0;
  }

  .mob-mission-t {
    font-size: 11px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
    padding: 0 2px;
  }

  .mob-mission-d {
    font-size: 9px;
    color: #64748b;
    line-height: 1.35;
    padding: 0 4px;
  }

  body.mobile-app-enabled.mob-on-work .mob-task-tabs {
    position: relative;
    z-index: 2;
    margin-top: 4px;
    margin-bottom: 14px;
    scroll-margin-top: calc(64px + env(safe-area-inset-top, 0px));
  }

  /* Work tab — consolidated dashboard accordions */
  .mob-work-dash-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
    margin-bottom: 16px;
  }

  .mob-work-field-hint {
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
    margin: 0 0 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e8edf3;
  }

  .mob-dash-acc {
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.07);
    overflow: hidden;
  }

  .mob-dash-acc-hdr {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-dash-acc-hdr:active {
    background: #f8fafc;
  }

  .mob-dash-acc.is-open .mob-dash-acc-hdr {
    border-bottom: 1px solid #f1f5f9;
  }

  .mob-dash-acc-ic {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
  }

  .mob-dash-acc-titles {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mob-dash-acc-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
  }

  .mob-dash-acc-sub {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
  }

  .mob-dash-acc-cover {
    font-size: 16px;
    font-weight: 800;
    color: #1565C0;
    flex-shrink: 0;
    min-width: 48px;
    text-align: right;
    line-height: 1.2;
  }

  .mob-dash-acc-cover.good { color: #2E7D32; }
  .mob-dash-acc-cover.warn { color: #F57C00; }
  .mob-dash-acc-cover.bad { color: #C62828; }
  .mob-dash-acc-cover-muted { color: #cbd5e1 !important; font-weight: 600 !important; }
  .mob-dash-acc-cover-alert { color: #B91C1C !important; font-weight: 900 !important; }

  #mob-dash-osa-cover { font-size: 18px; }
  #mob-dash-oos-cover { font-size: 18px; }

  .mob-dash-chart-label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    margin: 0 0 8px;
    padding-left: 2px;
  }

  .mob-dash-osa-chart-panel {
    padding: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e3eaf5;
    border-radius: 14px;
  }

  .mob-dash-chart-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
  }

  .mob-dash-chart-toggle-btn {
    flex: 1;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #cfe3f8;
    border-radius: 10px;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  }

  .mob-dash-chart-toggle-btn.is-active {
    background: linear-gradient(135deg, #e3f2fd 0%, #f0f7ff 100%);
    border-color: #90caf9;
    color: #1565C0;
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.12);
  }

  .mob-dash-chart-toggle-btn:active {
    transform: scale(0.98);
  }

  .mob-dash-chart-hint {
    margin: 10px 0 0;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.4;
    text-align: center;
  }

  .mob-dash-chart-empty {
    text-align: center;
    padding: 28px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
  }

  .mob-dash-chart-label + .mob-dash-chart-wrap {
    margin-bottom: 14px;
  }

  .mob-dash-acc-chevron {
    font-size: 12px;
    color: #94a3b8;
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .mob-dash-acc.is-open .mob-dash-acc-chevron {
    transform: rotate(180deg);
  }

  .mob-dash-acc-body {
    display: none;
    padding: 0 14px;
    overflow: hidden;
  }

  .mob-dash-acc.is-open .mob-dash-acc-body {
    display: block;
    padding: 12px 14px 14px;
  }

  .mob-dash-acc-body-inner {
    min-height: 0;
    overflow: visible;
  }

  #mob-dash-acc-history.is-open .mob-dash-acc-body-inner {
    overflow: auto;
    max-height: min(60vh, 420px);
  }

  .mob-dash-kpi-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }

  .mob-dash-mini-kpi {
    background: #f8fafc;
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mob-dash-mini-kpi .lbl {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 600;
  }

  .mob-dash-mini-kpi .val {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
  }

  .mob-dash-mini-kpi .val.good { color: #2E7D32; }
  .mob-dash-mini-kpi .val.warn { color: #F57C00; }
  .mob-dash-mini-kpi .val.bad { color: #C62828; }
  .mob-dash-mini-kpi .val.muted { color: #cbd5e1; font-weight: 600; }

  .mob-dash-chart-wrap {
    position: relative;
    height: 160px;
    margin-bottom: 10px;
  }

  .mob-dash-chart-wrap--osa {
    height: auto;
    min-height: 200px;
    margin-bottom: 0;
    padding: 4px 0;
  }

  .mob-dash-chart-wrap--osa canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
  }

  .mob-dash-chart-wrap:last-child {
    margin-bottom: 0;
  }

  .mob-work-oos-cards,
  .mob-work-payroll-cards {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-x: hidden;
    width: 100%;
  }

  .mob-work-oos-cards .db-oos-acct-card-hdr {
    margin-left: 0;
    margin-right: 0;
  }

  .mob-work-oos-cards .db-oos-product-card {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .mob-work-payroll-cards .db-payroll-emp-card {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .mob-work-payroll-cards .db-payroll-emp-card-stats {
    grid-template-columns: 1fr 1fr;
  }

  .mob-team-checkin-head,
  .mob-team-checkin-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 52px 52px;
    gap: 6px 8px;
    align-items: start;
    padding: 8px 10px;
    border-bottom: 1px solid #e8ecf0;
  }

  .mob-team-checkin-head {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: #f8fafc;
    border-radius: 8px 8px 0 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .mob-team-checkin-row:last-child {
    border-bottom: none;
  }

  .mob-team-checkin-name {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
    word-break: break-word;
  }

  .mob-team-checkin-store {
    font-size: 11px;
    color: #64748b;
    line-height: 1.35;
    word-break: break-word;
  }

  .mob-team-checkin-time {
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
  }

  .mob-team-checkin-in { color: #16a34a; }
  .mob-team-checkin-out { color: #2563eb; }
  .mob-team-checkin-out.is-working {
    color: #ea580c;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
  }

  html.dark .mob-team-checkin-head {
    background: #0f172a;
    color: #94a3b8;
    border-color: #334155;
  }

  html.dark .mob-team-checkin-row { border-color: #334155; }
  html.dark .mob-team-checkin-name { color: #e2e8f0; }
  html.dark .mob-team-checkin-store { color: #94a3b8; }
  html.dark .mob-team-checkin-in { color: #4ade80; }
  html.dark .mob-team-checkin-out { color: #60a5fa; }
  html.dark .mob-team-checkin-out.is-working { color: #fb923c; }

  body.mobile-app-enabled.mob-on-work #s-mobile-work .mob-body {
    min-height: auto;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  body.mobile-app-enabled.mob-on-work #mob-task-center {
    padding-bottom: 8px;
  }

  html.dark .mob-dash-acc {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
  }

  html.dark .mob-dash-acc-title { color: #e2e8f0; }
  html.dark .mob-dash-osa-chart-panel {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    border-color: #334155;
  }
  html.dark .mob-dash-chart-toggle-btn {
    background: #1e293b;
    border-color: #475569;
    color: #cbd5e1;
  }
  html.dark .mob-dash-chart-toggle-btn.is-active {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e293b 100%);
    border-color: #64b5f6;
    color: #90caf9;
  }
  html.dark .mob-dash-mini-kpi { background: #0f172a; }
  html.dark .mob-dash-mini-kpi .val { color: #e2e8f0; }

  /* Task & Operation Center */
  .mob-task-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    padding: 4px;
    background: #e8f0fe;
    border-radius: 12px;
  }

  .mob-task-tab {
    flex: 1;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    padding: 10px 8px;
    border-radius: 10px;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.25;
    touch-action: manipulation;
  }

  .mob-task-tab.on {
    background: #fff;
    color: #1565C0;
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.12);
  }

  .mob-task-pane {
    display: none;
  }

  .mob-task-pane[hidden] {
    display: none !important;
  }

  .mob-task-pane.on {
    display: block;
  }

  .mob-task-box {
    background: #fff;
    border: 1px solid #e3eaf5;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.05);
  }

  .mob-task-box-soon {
    background: #f8fafc;
    border-color: #e2e8f0;
    opacity: 0.92;
  }

  .mob-task-box-hdr {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
  }

  .mob-task-box-ic {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
  }

  .mob-task-box-hdr-text {
    flex: 1;
    min-width: 0;
  }

  .mob-task-box-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
  }

  .mob-task-box-sub {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
    line-height: 1.35;
  }

  .mob-task-box-badge {
    flex-shrink: 0;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    background: #C62828;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mob-task-box-badge.is-zero {
    background: #e2e8f0;
    color: #94a3b8;
  }

  .mob-task-soon-badge {
    position: static;
    flex-shrink: 0;
    align-self: flex-start;
  }

  .mob-task-box-soon-note {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.4;
    padding: 8px 10px;
    background: #f1f5f9;
    border-radius: 10px;
  }

  .mob-task-box-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
  }

  .mob-task-box-body:empty {
    display: none;
    margin-bottom: 0;
  }

  .mob-task-box-link {
    width: 100%;
    border: none;
    background: #f1f5f9;
    color: #1565C0;
    font-size: 12px;
    font-weight: 600;
    padding: 10px;
    border-radius: 10px;
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
  }

  .mob-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mob-history-list .mob-list-empty {
    padding: 8px 0;
  }

  .mob-history-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 12px;
  }

  .mob-history-hdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
  }

  .mob-history-status {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .mob-history-status.is-approved {
    background: #dcfce7;
    color: #166534;
  }

  .mob-history-status.is-rejected {
    background: #fee2e2;
    color: #b91c1c;
  }

  .mob-history-emp {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
  }

  .mob-history-date,
  .mob-history-meta,
  .mob-history-action {
    font-size: 11px;
    color: #64748b;
    line-height: 1.4;
  }

  .mob-history-reason {
    margin-top: 4px;
    font-size: 11px;
    color: #475569;
    font-style: italic;
  }

  .mob-approval-type.checkin {
    background: #e0f2fe;
    color: #0369a1;
  }

  .mob-task-crisis-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fff8f8;
    border: 1px solid #fecaca;
    border-radius: 10px;
    font-size: 11px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-task-crisis-item:last-child {
    margin-bottom: 0;
  }

  .mob-task-crisis-item:active {
    transform: scale(0.99);
    opacity: 0.92;
  }

  .mob-task-crisis-store {
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
  }

  .mob-task-crisis-meta {
    font-size: 10px;
    color: #64748b;
    margin-top: 2px;
  }

  .mob-task-crisis-pct {
    font-weight: 800;
    font-size: 13px;
    flex-shrink: 0;
  }

  .mob-task-crisis-pct.bad { color: #C62828; }
  .mob-task-crisis-pct.warn { color: #F57C00; }

  .mob-task-crisis-pct.pending {
    color: #FF1744;
    font-weight: 900;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    background: rgba(255, 23, 68, 0.16);
    border: 1px solid rgba(255, 23, 68, 0.42);
    padding: 5px 9px;
    border-radius: 8px;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 5px rgba(255, 23, 68, 0.18);
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.35);
  }

  html.dark .mob-task-crisis-pct.pending {
    color: #FF6B7A;
    background: rgba(255, 82, 82, 0.22);
    border-color: rgba(255, 107, 122, 0.5);
  }

  html.dark .mob-work-mission-hdr { color: #94a3b8; }
  html.dark .mob-mission-card {
    background: #111827;
    border-color: #334155;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
  }
  html.dark .mob-mission-t { color: #e2e8f0; }
  html.dark .mob-mission-d { color: #94a3b8; }
  html.dark .mob-mission-ic--osa {
    color: #60a5fa;
    background: linear-gradient(145deg, #1e3a5f 0%, #1e293b 100%);
  }

  .mob-field-cat {
    margin-bottom: 16px;
  }

  .mob-field-cat-title {
    font-size: 12px;
    font-weight: 800;
    color: #475569;
    letter-spacing: 0.03em;
    margin: 0 0 10px 2px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mob-field-cat-ic {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
  }

  /* Checker work hub — hero + featured tasks */
  body.mobile-app-enabled.mob-on-work #b2c-wm {
    opacity: 0.016;
    top: 72%;
    width: min(56vw, 220px);
    height: min(56vw, 220px);
  }

  #s-mobile-work .mob-body {
    padding: 12px 14px 20px;
    background:
      radial-gradient(ellipse 120% 80% at 50% -20%, rgba(21, 101, 192, 0.08) 0%, transparent 55%),
      #eef2f8;
  }

  .mob-work-hero {
    margin-bottom: 14px;
  }

  .mob-work-hero-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 14px 12px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(135deg, #0c3d7a 0%, #1565C0 52%, #1976D2 100%);
    color: #fff;
    box-shadow: 0 8px 24px rgba(13, 71, 161, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.14);
    position: relative;
    overflow: hidden;
  }

  .mob-work-hero-card::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, transparent 70%);
    pointer-events: none;
  }

  .mob-work-hero-photo-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 14px rgba(7, 30, 66, 0.25);
  }

  .mob-work-hero-photo-wrap.has-photo {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(144, 202, 249, 0.35), 0 4px 14px rgba(7, 30, 66, 0.28);
  }

  .mob-work-hero-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mob-work-hero-photo-ph {
    font-size: 28px;
    line-height: 1;
    opacity: 0.9;
  }

  .mob-work-hero-info {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
  }

  .mob-work-hero-kicker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.82;
    margin-bottom: 4px;
  }

  .mob-work-hero-name {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mob-work-hero-meta {
    font-size: 11px;
    opacity: 0.88;
    margin-top: 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .mob-work-hero-stats {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    overflow: hidden;
  }

  .mob-work-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 12px 6px;
    min-width: 0;
  }

  .mob-work-stat-div {
    width: 1px;
    background: #e8edf3;
    margin: 10px 0;
    flex-shrink: 0;
  }

  .mob-work-stat-val {
    font-size: 13px;
    font-weight: 800;
    color: #1565C0;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .mob-work-stat-val.is-ok { color: #2E7D32; }
  .mob-work-stat-val.is-wait { color: #E65100; }
  .mob-work-stat-val.is-muted { color: #94a3b8; font-weight: 700; }

  .mob-work-stat-lbl {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    text-align: center;
  }

  .mob-work-featured {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 0;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 4px 16px rgba(21, 101, 192, 0.14);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }

  .mob-work-featured:active {
    transform: scale(0.985);
  }

  @media (hover: hover) {
    .mob-work-featured:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 22px rgba(21, 101, 192, 0.18);
    }
  }

  .mob-work-featured-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 42%, #e0f2fe 100%);
    pointer-events: none;
  }

  .mob-work-osa .mob-work-featured-shine {
    background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 48%, #e0f2fe 100%);
  }

  .mob-work-featured-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 14px;
  }

  .mob-work-featured-ic {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(21, 101, 192, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.12);
  }

  .mob-work-featured-ic img {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  .mob-work-featured-text {
    flex: 1;
    min-width: 0;
  }

  .mob-work-featured-t {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    margin-bottom: 4px;
  }

  .mob-work-featured-d {
    font-size: 11px;
    color: #475569;
    line-height: 1.45;
  }

  .mob-work-featured-go {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 800;
    color: #1565C0;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(21, 101, 192, 0.18);
    padding: 6px 10px;
    border-radius: 999px;
    white-space: nowrap;
  }

  .mob-work-soon-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
  }

  .mob-work-soon-card {
    position: relative;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 12px 10px 10px;
    min-height: 108px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .mob-work-soon-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #94a3b8;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.3;
  }

  .mob-work-soon-ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.65;
    filter: grayscale(0.85);
  }

  .mob-work-soon-ic img {
    width: 22px;
    height: 22px;
    object-fit: contain;
  }

  .mob-work-soon-t {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    line-height: 1.3;
    padding-right: 44px;
  }

  .mob-work-soon-d {
    font-size: 10px;
    color: #94a3b8;
    line-height: 1.35;
  }

  html.dark #s-mobile-work .mob-body {
    background: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(37, 99, 235, 0.12) 0%, transparent 55%), #0b1120;
  }

  html.dark .mob-work-hero-stats {
    background: #111827;
    border-color: #334155;
  }

  html.dark .mob-work-stat-div { background: #334155; }
  html.dark .mob-work-stat-lbl { color: #94a3b8; }
  html.dark .mob-work-stat-val { color: #60a5fa; }
  html.dark .mob-work-stat-val.is-ok { color: #4ade80; }
  html.dark .mob-work-stat-val.is-wait { color: #fb923c; }
  html.dark .mob-field-cat-title { color: #cbd5e1; }
  html.dark .mob-field-cat-ic { background: #1e293b; border-color: #334155; }
  html.dark .mob-work-featured-t { color: #e2e8f0; }
  html.dark .mob-work-featured-d { color: #94a3b8; }
  html.dark .mob-work-featured-go { background: rgba(15, 23, 42, 0.65); border-color: #334155; color: #60a5fa; }
  html.dark .mob-work-soon-card { background: #1e293b; border-color: #475569; }
  html.dark .mob-work-soon-t { color: #94a3b8; }
  html.dark .mob-work-soon-ic { background: #0f172a; border-color: #334155; }

  html.dark .mob-task-tabs { background: #1e293b; }
  html.dark .mob-task-tab.on { background: #111827; color: #60a5fa; }
  html.dark .mob-task-box { background: #111827; border-color: #334155; }
  html.dark .mob-task-box-title { color: #e2e8f0; }
  html.dark .mob-task-box-soon { background: #1e293b; }
  html.dark .mob-task-box-link { background: #1e293b; color: #60a5fa; }
  html.dark .mob-task-crisis-item { background: #2a1515; border-color: #7f1d1d; }
  html.dark .mob-task-crisis-store { color: #e2e8f0; }
  html.dark .mob-action-soon { background: #1e293b; border-color: #334155; }

  #mob-daily-report-content .mob-sup-card {
    margin-bottom: 10px;
  }

  #mob-daily-report-content .mob-list-empty {
    padding: 20px 12px;
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
  }

  /* Leave quota detail popup — กลางจอ */
  .mob-leave-quota-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10060;
    background: rgba(15, 23, 42, 0.45);
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .mob-leave-quota-overlay.open {
    display: flex;
  }

  .mob-leave-quota-sheet {
    width: 100%;
    max-width: 400px;
    max-height: min(85vh, 640px);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.92);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }

  .mob-leave-quota-overlay.open .mob-leave-quota-sheet {
    transform: scale(1);
    opacity: 1;
  }

  .mob-leave-quota-hdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #eef2f8;
    flex-shrink: 0;
  }

  .mob-leave-quota-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
  }

  .mob-leave-quota-sub {
    font-size: 11px;
    color: #64748b;
    margin-top: 3px;
    line-height: 1.4;
  }

  .mob-leave-quota-close {
    border: none;
    background: #f1f5f9;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 22px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    flex-shrink: 0;
  }

  .mob-leave-quota-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }

  .mob-leave-quota-summary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
  }

  .mob-leave-quota-summary-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 6px;
    text-align: center;
  }

  .mob-leave-quota-summary-box .n {
    font-size: 18px;
    font-weight: 800;
    color: #1565C0;
    line-height: 1.2;
  }

  .mob-leave-quota-summary-box .l {
    font-size: 10px;
    color: #64748b;
    margin-top: 2px;
  }

  .mob-leave-quota-empty {
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    padding: 24px 12px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px dashed #dbe4f0;
  }

  .mob-leave-quota-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .mob-leave-quota-item-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.06);
  }

  .mob-leave-quota-item-card.approved {
    border-color: rgba(46, 125, 50, 0.25);
    background: linear-gradient(135deg, #fff 0%, #f1f8e9 100%);
  }

  .mob-leave-quota-item-card.pending {
    border-color: rgba(245, 124, 0, 0.25);
    background: linear-gradient(135deg, #fff 0%, #fff8e1 100%);
  }

  .mob-leave-quota-item-card.rejected {
    border-color: rgba(198, 40, 40, 0.25);
    background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
  }

  .mob-leave-quota-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .mob-leave-quota-item-date {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
  }

  .mob-leave-quota-item-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
  }

  .mob-leave-quota-item-badge.approved {
    background: #E8F5E9;
    color: #2E7D32;
  }

  .mob-leave-quota-item-badge.pending {
    background: #FFF3E0;
    color: #E65100;
  }

  .mob-leave-quota-item-badge.rejected {
    background: #FFEBEE;
    color: #C62828;
  }

  .mob-leave-quota-item-days {
    font-size: 12px;
    font-weight: 600;
    color: #1565C0;
    margin-top: 4px;
  }

  .mob-leave-quota-item-reason {
    font-size: 12px;
    color: #475569;
    margin-top: 6px;
    line-height: 1.45;
    font-style: italic;
  }

  .mob-leave-quota-item-meta {
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
  }

  .mob-hero-btn-ic {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mob-hero-btn-ic img {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  .mob-hero-btn-sub {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 7px 4px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    backdrop-filter: blur(4px);
  }

  .mob-hero-btn-ic-sm {
    font-size: 15px;
    line-height: 1;
  }

  /* Home — สรุปงาน 2 คอลัมน์ (% OSA | OOS) */
  .mob-home-senior-board {
    margin-bottom: 18px;
  }

  .mob-senior-board-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .mob-senior-board-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 14px;
    border: 1px solid #e3eaf5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 6px -1px rgba(21, 101, 192, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease;
  }

  .mob-senior-board-card:active {
    transform: scale(0.98);
  }

  .mob-senior-board-lbl {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.3;
  }

  .mob-senior-board-val {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.05;
    color: #1565C0;
    letter-spacing: -0.02em;
  }

  .mob-senior-board-val.is-zero {
    color: #cbd5e1;
    font-weight: 700;
  }

  .mob-senior-board-val.is-alert {
    color: #C62828;
    font-weight: 900;
  }

  .mob-senior-board-hint {
    font-size: 9px;
    color: #94a3b8;
    margin-top: 2px;
  }

  html.dark .mob-senior-board-card {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25);
  }

  html.dark .mob-senior-board-lbl {
    color: #94a3b8;
  }

  html.dark .mob-senior-board-val {
    color: #64b5f6;
  }

  html.dark .mob-senior-board-val.is-zero {
    color: #475569;
  }

  html.dark .mob-senior-board-val.is-alert {
    color: #f87171;
  }

  .mob-home-section {
    margin-bottom: 18px;
  }

  .mob-home-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px;
  }

  .mob-home-section-sub {
    font-size: 11px;
    color: #64748b;
    margin: 0 0 12px;
  }

  .mob-pc-summary .mob-pc-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .mob-pc-summary .mob-pc-block {
    box-shadow: 0 2px 10px rgba(21, 101, 192, 0.07);
    border-color: #e3eaf5;
  }

  .mob-pc-summary .pc-panel-block-hdr {
    padding: 13px 14px;
  }

  .mob-pc-summary .pc-panel-block-body {
    font-size: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mob-pc-summary .pc-panel-block-title {
    font-size: 13px;
  }

  html.dark .mob-pc-summary .mob-pc-block {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  }

  .mob-app-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .mob-app-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e3eaf5;
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.06);
    transition: transform 0.15s ease;
  }

  .mob-app-card:active {
    transform: scale(0.98);
  }

  .mob-app-card-wide {
    grid-column: 1 / -1;
    border-style: dashed;
    border-color: #cbd5e1;
    background: #f8fafc;
  }

  .mob-app-ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #E3F2FD;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mob-app-ic img {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  .mob-app-ic-muted {
    background: #f1f5f9;
    font-size: 22px;
  }

  .mob-app-t {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.25;
  }

  .mob-app-d {
    font-size: 10px;
    color: #94a3b8;
    line-height: 1.35;
  }

  .mob-week-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mob-week-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e3eaf5;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
  }

  .mob-week-date {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    flex: 1;
    min-width: 0;
  }

  .mob-week-times {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }

  .mob-week-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
  }

  .mob-week-pill.in {
    background: #E3F2FD;
    color: #1565C0;
  }

  .mob-week-pill.out {
    background: #f1f5f9;
    color: #64748b;
  }

  .mob-home-cta {
    margin-top: 12px;
    width: 100%;
    border-radius: 14px !important;
  }

  html.dark .mob-home-v2,
  html.dark .mob-home-body {
    background: #0f172a;
  }

  html.dark .mob-home-section-title { color: #e2e8f0; }
  html.dark .mob-app-card,
  html.dark .mob-week-row {
    background: #111827;
    border-color: #1e293b;
  }

  html.dark .mob-app-t,
  html.dark .mob-week-date { color: #e2e8f0; }

  html.dark .mob-app-card-wide {
    background: #0f172a;
    border-color: #334155;
  }

  html.dark .mob-sup-card,
  html.dark .mob-top-oos-empty,
  html.dark .mob-team-zone-summary {
    background: #111827;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  }

  html.dark .mob-sup-pending-toggle {
    background: linear-gradient(135deg, #422006, #78350f);
  }

  html.dark .mob-sup-pending-toggle-title { color: #fde68a; }

  html.dark .mob-approval-emp,
  html.dark .mob-oos-product,
  html.dark .mob-team-name { color: #e2e8f0; }

  html.dark .mob-approval-meta,
  html.dark .mob-oos-meta,
  html.dark .mob-oos-legend,
  html.dark .mob-team-zone-stats { color: #94a3b8; }

  html.dark .mob-metric { background: #0f172a; }

  html.dark .mob-acc-chip {
    background: #1e293b;
    color: #cbd5e1;
  }

  html.dark .mob-btn-outline {
    background: #111827;
    border-color: #334155;
    color: #60a5fa;
  }

  html.dark .mob-btn-warn {
    background: #422006;
    color: #fdba74;
  }

  html.dark .mob-team-done-badge {
    background: #14532d;
    color: #86efac;
  }

  html.dark .mob-work-sup-title { color: #e2e8f0; }
  html.dark .mob-work-sup-sub { color: #94a3b8; }
  html.dark .mob-work-sup-sum-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f2744 100%);
    border-color: #334155;
  }
  html.dark .mob-work-sup-sum-title { color: #60a5fa; }
  html.dark .mob-work-sup-sum-stats { color: #94a3b8; }
  html.dark .mob-chip-filter {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
  }
  html.dark .mob-chip-filter.on {
    background: #1565C0;
    border-color: #1565C0;
    color: #fff;
  }
  html.dark .mob-branch-store { color: #e2e8f0; }
  html.dark .mob-branch-checker { color: #cbd5e1; }

  html.dark .mob-oos-stores-sheet {
    background: #111827;
  }

  html.dark .mob-oos-stores-title,
  html.dark .mob-oos-store-name { color: #e2e8f0; }
}

/* Route cards — checker home (mobile + PC) */
.mob-route-hint {
  font-size: 11px;
  color: #94a3b8;
  margin: 0 0 12px;
}

.mob-list-empty {
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
  padding: 20px 8px;
}

/* Route — ปฏิทินไทย (มิติ + มุมโค้ง ไม่ใช่ตาราง Excel) */
.mob-route-cal.mob-thcal {
  background: linear-gradient(165deg, #ffffff 0%, #f0f7ff 48%, #e8f2fc 100%);
  border: 1px solid rgba(21, 101, 192, 0.12);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(21, 101, 192, 0.05),
    0 10px 28px rgba(21, 101, 192, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  padding: 10px;
}

.mob-thcal-top {
  display: flex;
  gap: 8px;
  border-bottom: none;
  margin-bottom: 8px;
}

.mob-thcal-sidebar {
  width: 68px;
  flex-shrink: 0;
  border-right: none;
  border-radius: 16px;
  background: linear-gradient(160deg, #bbdefb 0%, #e3f2fd 38%, #ffffff 100%);
  padding: 12px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 4px 16px rgba(21, 101, 192, 0.18);
}

.mob-thcal-mnum {
  font-size: 34px;
  font-weight: 800;
  color: #1565C0;
  line-height: 1;
  margin-bottom: 2px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.mob-thcal-mth {
  font-size: 10px;
  font-weight: 800;
  color: #0D47A1;
  line-height: 1.2;
}

.mob-thcal-ybe {
  font-size: 9px;
  font-weight: 700;
  color: #1976D2;
  line-height: 1.2;
  margin-top: 1px;
}

.mob-thcal-men {
  font-size: 7px;
  font-weight: 800;
  color: #1565C0;
  letter-spacing: 0.06em;
  margin-top: 5px;
  line-height: 1.2;
}

.mob-thcal-yce {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.2;
}

.mob-thcal-main {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  padding: 6px;
  box-shadow:
    inset 0 1px 4px rgba(21, 101, 192, 0.06),
    0 2px 8px rgba(21, 101, 192, 0.06);
}

.mob-thcal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.mob-thcal-cell {
  border: none;
  text-align: center;
  min-width: 0;
}

.mob-thcal-cell:nth-child(7n) {
  border-right: none;
}

.mob-thcal-head {
  padding: 4px 1px 3px;
  background: transparent;
  border-radius: 10px;
}

.mob-thcal-head.is-sun {
  background: rgba(255, 235, 238, 0.65);
}

.mob-thcal-head.is-sat {
  background: rgba(227, 242, 253, 0.85);
}

.mob-thcal-dow-th {
  font-size: 8px;
  font-weight: 800;
  color: #0D47A1;
  line-height: 1.15;
}

.mob-thcal-dow-en {
  font-size: 6px;
  font-weight: 700;
  color: #1976D2;
  line-height: 1.15;
  letter-spacing: 0.03em;
  margin-top: 1px;
  opacity: 0.85;
}

.mob-thcal-date {
  padding: 5px 1px 6px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(21, 101, 192, 0.08);
}

.mob-thcal-daynum {
  font-size: 15px;
  font-weight: 800;
  color: #0D47A1;
  line-height: 1;
}

.mob-thcal-cell.is-sun .mob-thcal-dow-th,
.mob-thcal-cell.is-sun .mob-thcal-daynum {
  color: #C62828;
}

.mob-thcal-cell.is-sat .mob-thcal-dow-th,
.mob-thcal-cell.is-sat .mob-thcal-daynum {
  color: #1565C0;
}

.mob-thcal-cell.is-today .mob-thcal-date {
  background: linear-gradient(145deg, #ffffff 0%, #e3f2fd 100%);
  box-shadow:
    0 0 0 2px rgba(21, 101, 192, 0.25),
    0 4px 12px rgba(21, 101, 192, 0.2);
}

.mob-thcal-cell.is-today .mob-thcal-daynum {
  background: linear-gradient(145deg, #42a5f5 0%, #1565C0 55%, #0D47A1 100%);
  color: #fff;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 3px 10px rgba(21, 101, 192, 0.45);
}

.mob-thcal-branches {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.mob-thcal-branch {
  border-bottom: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 2px 6px rgba(21, 101, 192, 0.07),
    0 8px 20px rgba(21, 101, 192, 0.08);
  overflow: hidden;
}

.mob-thcal-branch.has-today-work {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(227, 242, 253, 0.75) 100%);
  box-shadow:
    0 2px 8px rgba(21, 101, 192, 0.1),
    0 10px 24px rgba(21, 101, 192, 0.12);
}

.mob-thcal-branch-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 6px;
  min-width: 0;
}

.mob-thcal-branch-hdr .mob-route-acct {
  font-size: 9px;
  padding: 3px 8px;
  margin-bottom: 0;
  flex-shrink: 0;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(21, 101, 192, 0.12);
}

.mob-thcal-branch-name {
  font-size: 11px;
  font-weight: 700;
  color: #0D47A1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mob-thcal-branch-row {
  display: flex;
  padding: 0 6px 8px;
  gap: 6px;
}

.mob-thcal-side-spacer {
  width: 68px;
  flex-shrink: 0;
  border-right: none;
  background: transparent;
}

.mob-thcal-grid-sched {
  flex: 1;
  min-width: 0;
  gap: 4px;
  padding: 0;
}

.mob-thcal-slot {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 2px;
  background: #fff;
  border-radius: 11px;
  box-shadow: 0 1px 4px rgba(21, 101, 192, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.mob-thcal-slot.is-work {
  background: linear-gradient(145deg, #f1f8e9 0%, #e8f5e9 100%);
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.16);
}

.mob-thcal-slot.is-off {
  background: linear-gradient(145deg, #fff5f5 0%, #ffebee 100%);
  box-shadow: 0 2px 8px rgba(198, 40, 40, 0.12);
}

.mob-thcal-slot.is-leave {
  background: linear-gradient(145deg, #fff8e1 0%, #ffecb3 100%);
  box-shadow: 0 2px 8px rgba(245, 124, 0, 0.14);
}

.mob-thcal-slot.is-empty {
  background: rgba(248, 250, 252, 0.9);
  box-shadow: inset 0 1px 3px rgba(21, 101, 192, 0.04);
}

.mob-thcal-slot.is-today {
  box-shadow:
    0 0 0 2px rgba(21, 101, 192, 0.35),
    0 4px 12px rgba(21, 101, 192, 0.18);
  transform: translateY(-1px);
}

.mob-thcal-val {
  font-size: 7px;
  font-weight: 700;
  color: #2E7D32;
  line-height: 1.15;
}

.mob-thcal-slot.is-off .mob-thcal-val {
  color: #C62828;
  font-size: 7px;
}

.mob-thcal-slot.is-leave .mob-thcal-val,
.mob-thcal-val-leave {
  color: #E65100;
  font-size: 6px;
  line-height: 1.2;
}

.mob-thcal-val-empty {
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 400;
}

.mob-thcal-date-tap,
.mob-thcal-slot-tap {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mob-thcal-date-tap:active,
.mob-thcal-slot-tap:active {
  transform: scale(0.96);
}

.mob-thcal-date-tap:focus-visible,
.mob-thcal-slot-tap:focus-visible {
  outline: 2px solid #1565C0;
  outline-offset: 1px;
}

/* ป๊อปอัพรายละเอียดวันในปฏิทิน */
.mob-cal-day-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(13, 71, 161, 0.35);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.mob-cal-day-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mob-cal-day-sheet {
  width: 100%;
  max-width: 400px;
  max-height: min(78vh, 580px);
  background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
  border-radius: 22px;
  box-shadow:
    0 8px 28px rgba(21, 101, 192, 0.16),
    0 20px 48px rgba(13, 71, 161, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.92);
  opacity: 0;
  transition: transform 0.26s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.22s ease;
}

.mob-cal-day-overlay.open .mob-cal-day-sheet {
  transform: scale(1);
  opacity: 1;
}

.mob-cal-day-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(21, 101, 192, 0.1);
  background: linear-gradient(180deg, #e3f2fd 0%, rgba(255, 255, 255, 0) 100%);
}

.mob-cal-day-title {
  font-size: 15px;
  font-weight: 800;
  color: #0D47A1;
  line-height: 1.35;
}

.mob-cal-day-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.mob-cal-day-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(21, 101, 192, 0.1);
  color: #1565C0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.mob-cal-day-body {
  overflow-y: auto;
  padding: 12px 14px 18px;
  -webkit-overflow-scrolling: touch;
}

.mob-cal-day-section {
  margin-bottom: 14px;
}

.mob-cal-day-section:last-child {
  margin-bottom: 0;
}

.mob-cal-day-section-title {
  font-size: 12px;
  font-weight: 800;
  color: #1565C0;
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}

.mob-cal-day-empty {
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
  padding: 14px 8px;
  background: rgba(248, 250, 252, 0.9);
  border-radius: 12px;
}

.mob-cal-day-route-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mob-cal-day-route {
  background: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(21, 101, 192, 0.08);
  border: 1px solid rgba(21, 101, 192, 0.08);
}

.mob-cal-day-route.is-work {
  border-color: rgba(46, 125, 50, 0.25);
  background: linear-gradient(135deg, #fff 0%, #f1f8e9 100%);
}

.mob-cal-day-route.is-off {
  border-color: rgba(198, 40, 40, 0.2);
  background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
}

.mob-cal-day-route-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.mob-cal-day-route-top .mob-route-acct {
  font-size: 9px;
  padding: 2px 8px;
  margin: 0;
}

.mob-cal-day-route-time {
  font-size: 11px;
  font-weight: 700;
  color: #2E7D32;
}

.mob-cal-day-route.is-off .mob-cal-day-route-time {
  color: #C62828;
}

.mob-cal-day-route-branch {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}

.mob-cal-day-route.is-extra {
  border-style: dashed;
}

.mob-cal-day-route-extra-tag {
  color: #E65100 !important;
  font-size: 10px;
}

.mob-cal-day-branch-visits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(21, 101, 192, 0.15);
}

.mob-cal-day-branch .mob-cal-day-att {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
}

.mob-cal-day-att-empty {
  opacity: 0.85;
}

.mob-cal-day-att-missing {
  font-size: 11px !important;
  font-weight: 600;
  color: #94a3b8 !important;
}

.mob-cal-day-att {
  background: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 8px;
  box-shadow: 0 2px 10px rgba(21, 101, 192, 0.08);
  border: 1px solid rgba(21, 101, 192, 0.08);
}

.mob-cal-day-att:last-child {
  margin-bottom: 0;
}

.mob-cal-day-att-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.mob-cal-day-att-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
}

.mob-cal-day-att-badge.in {
  background: #E3F2FD;
  color: #1565C0;
}

.mob-cal-day-att-badge.out {
  background: #E8F5E9;
  color: #2E7D32;
}

.mob-cal-day-att-time {
  font-size: 14px;
  font-weight: 800;
  color: #0D47A1;
}

.mob-cal-day-att-meta {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 8px;
}

.mob-cal-day-photo-lbl {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 6px;
}

.mob-cal-day-photo img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(21, 101, 192, 0.15);
}

.mob-cal-day-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mob-cal-day-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
}

.mob-cal-day-status-chip.leave {
  background: #FFF8E1;
  color: #856404;
}

.mob-cal-day-status-chip.off {
  background: #f1f5f9;
  color: #64748b;
}

.mob-cal-day-status-chip.pending {
  background: #FFF8E1;
  color: #E65100;
}

.mob-cal-day-req-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mob-cal-day-req {
  background: #f8fafc;
  border: 1px solid #e3eaf5;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 11px;
}

.mob-cal-day-req.pending {
  border-color: #FFE082;
  background: #FFFDE7;
}

.mob-cal-day-req.approved {
  border-color: #C8E6C9;
  background: #F1F8E9;
}

.mob-cal-day-req.rejected {
  border-color: #FFCDD2;
  background: #FFEBEE;
  opacity: 0.92;
}

.mob-cal-day-req-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.mob-cal-day-req-title {
  font-weight: 700;
  color: #1e293b;
  flex: 1;
  min-width: 0;
}

.mob-cal-day-req-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.mob-cal-day-req-badge.pending {
  background: #FFE082;
  color: #856404;
}

.mob-cal-day-req-badge.approved {
  background: #C8E6C9;
  color: #2E7D32;
}

.mob-cal-day-req-badge.rejected {
  background: #FFCDD2;
  color: #C62828;
}

.mob-cal-day-req-reason {
  margin-top: 4px;
  color: #64748b;
  font-size: 10px;
  line-height: 1.45;
}

/* PC panel — ปฏิทินในแถบสรุปขวา */
@media (min-width: 960px) {
  #pc-panel .pc-route-cal-wrap {
    margin: 0 -4px;
  }

  #pc-panel .pc-route-hint {
    margin-bottom: 8px;
  }

  #pc-panel .pc-route-cal-wrap .mob-route-cal.mob-thcal {
    padding: 8px;
    border-radius: 16px;
  }

  #pc-panel .pc-route-cal-wrap .mob-thcal-sidebar,
  #pc-panel .pc-route-cal-wrap .mob-thcal-side-spacer {
    width: 52px;
  }

  #pc-panel .pc-route-cal-wrap .mob-thcal-mnum {
    font-size: 26px;
  }

  #pc-panel .pc-route-cal-wrap .mob-thcal-mth {
    font-size: 9px;
  }

  #pc-panel .pc-route-cal-wrap .mob-thcal-ybe,
  #pc-panel .pc-route-cal-wrap .mob-thcal-yce {
    font-size: 8px;
  }

  #pc-panel .pc-route-cal-wrap .mob-thcal-men {
    font-size: 6px;
    margin-top: 3px;
  }

  #pc-panel .pc-route-cal-wrap .mob-thcal-dow-th {
    font-size: 7px;
  }

  #pc-panel .pc-route-cal-wrap .mob-thcal-dow-en {
    font-size: 5px;
  }

  #pc-panel .pc-route-cal-wrap .mob-thcal-daynum {
    font-size: 12px;
  }

  #pc-panel .pc-route-cal-wrap .mob-thcal-cell.is-today .mob-thcal-daynum {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  #pc-panel .pc-route-cal-wrap .mob-thcal-grid-body .mob-thcal-slot {
    min-height: 30px;
  }

  #pc-panel .pc-route-cal-wrap .mob-thcal-val {
    font-size: 6px;
  }

  #pc-panel .pc-route-cal-wrap .mob-thcal-branch-name {
    font-size: 10px;
  }
}

.mob-route-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mob-route-card {
  background: #f8fafc;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  padding: 12px 14px;
  transition: box-shadow 0.2s ease;
}

.mob-route-card-today {
  background: linear-gradient(135deg, #f0f7ff 0%, #fff 100%);
  border-color: #90caf9;
  box-shadow: 0 2px 10px rgba(21, 101, 192, 0.1);
}

.mob-route-card-off {
  opacity: 0.88;
}

.mob-route-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.mob-route-head-text {
  flex: 1;
  min-width: 0;
}

.mob-route-acct {
  font-size: 11px;
  font-weight: 700;
  color: #1565C0;
  background: #E3F2FD;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  display: inline-block;
  margin-bottom: 6px;
}

.mob-route-today-badge {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #1976D2, #0D47A1);
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 2px;
}

.mob-route-today-badge-off {
  background: #FFEBEE;
  color: #C62828;
}

.mob-route-store {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.35;
  margin-bottom: 0;
}

.mob-route-today-panel {
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.mob-route-today-panel.is-work {
  background: linear-gradient(135deg, #E8F5E9 0%, #F1F8E9 100%);
  border: 1px solid #C8E6C9;
}

.mob-route-today-panel.is-off {
  background: #FFEBEE;
  border: 1px solid #FFCDD2;
}

.mob-route-today-panel.is-empty {
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
}

.mob-route-today-panel-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
}

.mob-route-today-panel-time {
  font-size: 18px;
  font-weight: 700;
  color: #2E7D32;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.mob-route-today-panel.is-off .mob-route-today-panel-time {
  color: #C62828;
  font-size: 16px;
}

.mob-route-today-panel.is-empty .mob-route-today-panel-time {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
}

.mob-route-rest {
  border-top: 1px solid #e8edf3;
  padding-top: 10px;
}

.mob-route-rest-title {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.mob-route-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  margin-bottom: 6px;
  background: #fff;
  border: 1px solid #eef2f6;
}

.mob-route-row:last-child {
  margin-bottom: 0;
}

.mob-route-row.is-work {
  border-color: #E8F5E9;
}

.mob-route-row.is-off {
  background: #FFF8F8;
  border-color: #FFEBEE;
}

.mob-route-row-day {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  flex-shrink: 0;
}

.mob-route-row-val {
  font-size: 13px;
  font-weight: 700;
  color: #2E7D32;
  text-align: right;
}

.mob-route-row.is-off .mob-route-row-val {
  color: #C62828;
}

.mob-route-no-week {
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  padding: 4px 0 2px;
}

/* legacy grid — kept for older cached HTML */
.mob-route-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.mob-route-d {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #eef2f6;
  min-width: 0;
}

.mob-route-d-lbl {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  line-height: 1;
}

.mob-route-d-val {
  font-size: 9px;
  font-weight: 600;
  color: #cbd5e1;
  line-height: 1.2;
  text-align: center;
  word-break: break-word;
  max-width: 100%;
}

.mob-route-d.on {
  background: #E8F5E9;
  border-color: #C8E6C9;
}

.mob-route-d.on .mob-route-d-val {
  color: #2E7D32;
}

.mob-route-d.off {
  background: #FFEBEE;
  border-color: #FFCDD2;
}

.mob-route-d.off .mob-route-d-val {
  color: #C62828;
  font-size: 8px;
}

.mob-route-d.is-today {
  box-shadow: 0 0 0 2px #1565C0;
}

.mob-route-d.is-today .mob-route-d-lbl {
  color: #1565C0;
}

@media (min-width: 960px) {
  .mob-route-list {
    gap: 12px;
  }

  .mob-route-card {
    padding: 14px 16px;
  }

  .mob-route-store {
    font-size: 15px;
  }

  .mob-route-d {
    padding: 8px 4px;
  }

  .mob-route-d-lbl {
    font-size: 11px;
  }

  .mob-route-d-val {
    font-size: 10px;
  }
}

html.dark .mob-route-card {
  background: #0f172a;
  border-color: #1e293b;
}

html.dark .mob-route-card-today {
  background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
  border-color: #2563eb;
}

html.dark .mob-route-store { color: #e2e8f0; }
html.dark .mob-route-cal.mob-thcal {
  background: linear-gradient(165deg, #0f172a 0%, #111827 50%, #0b1220 100%);
  border-color: rgba(37, 99, 235, 0.25);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.2),
    0 14px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html.dark .mob-thcal-sidebar {
  background: linear-gradient(160deg, #1e3a5f 0%, #152238 45%, #0f172a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.35);
}
html.dark .mob-thcal-side-spacer {
  background: transparent;
}
html.dark .mob-thcal-mnum { color: #90caf9; }
html.dark .mob-thcal-mth { color: #e3f2fd; }
html.dark .mob-thcal-ybe { color: #64b5f6; }
html.dark .mob-thcal-men { color: #90caf9; }
html.dark .mob-thcal-yce { color: #94a3b8; }
html.dark .mob-thcal-top { border-color: transparent; }
html.dark .mob-thcal-main {
  background: rgba(15, 23, 42, 0.65);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.25);
}
html.dark .mob-thcal-head.is-sun { background: rgba(198, 40, 40, 0.12); }
html.dark .mob-thcal-head.is-sat { background: rgba(21, 101, 192, 0.18); }
html.dark .mob-thcal-dow-th { color: #e2e8f0; }
html.dark .mob-thcal-dow-en { color: #90caf9; }
html.dark .mob-thcal-date {
  background: #111827;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
html.dark .mob-thcal-daynum { color: #e2e8f0; }
html.dark .mob-thcal-cell.is-sun .mob-thcal-dow-th,
html.dark .mob-thcal-cell.is-sun .mob-thcal-daynum { color: #ef9a9a; }
html.dark .mob-thcal-cell.is-sat .mob-thcal-dow-th,
html.dark .mob-thcal-cell.is-sat .mob-thcal-daynum { color: #90caf9; }
html.dark .mob-thcal-cell.is-today .mob-thcal-date {
  background: linear-gradient(145deg, #1e3a5f 0%, #111827 100%);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35);
}
html.dark .mob-thcal-cell.is-today .mob-thcal-daynum {
  background: linear-gradient(145deg, #42a5f5 0%, #1565C0 100%);
  color: #fff;
}
html.dark .mob-thcal-cell { border-color: transparent; }
html.dark .mob-thcal-branches { background: transparent; }
html.dark .mob-thcal-branch {
  background: rgba(17, 24, 39, 0.92);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  border-color: transparent;
}
html.dark .mob-thcal-branch.has-today-work {
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(30, 58, 95, 0.55) 100%);
}
html.dark .mob-thcal-branch-name { color: #e2e8f0; }
html.dark .mob-thcal-slot {
  background: #111827;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.04);
}
html.dark .mob-thcal-slot.is-work {
  background: linear-gradient(145deg, rgba(46, 125, 50, 0.28) 0%, rgba(46, 125, 50, 0.14) 100%);
}
html.dark .mob-thcal-slot.is-off {
  background: linear-gradient(145deg, rgba(198, 40, 40, 0.22) 0%, rgba(198, 40, 40, 0.1) 100%);
}
html.dark .mob-thcal-slot.is-empty {
  background: rgba(15, 23, 42, 0.8);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
html.dark .mob-thcal-val { color: #81C784; }
html.dark .mob-thcal-slot.is-off .mob-thcal-val { color: #ef9a9a; }
html.dark .mob-cal-day-sheet {
  background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
}
html.dark .mob-cal-day-hdr {
  background: linear-gradient(180deg, #1e3a5f 0%, transparent 100%);
  border-color: rgba(37, 99, 235, 0.2);
}
html.dark .mob-cal-day-title { color: #e2e8f0; }
html.dark .mob-cal-day-sub { color: #94a3b8; }
html.dark .mob-cal-day-close {
  background: rgba(37, 99, 235, 0.2);
  color: #90caf9;
}
html.dark .mob-cal-day-empty {
  background: rgba(15, 23, 42, 0.8);
  color: #94a3b8;
}
html.dark .mob-cal-day-route,
html.dark .mob-cal-day-att {
  background: #111827;
  border-color: #1e293b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
html.dark .mob-cal-day-route-branch { color: #e2e8f0; }
html.dark .mob-cal-day-att-time { color: #90caf9; }
html.dark .mob-route-d {
  background: #111827;
  border-color: #1e293b;
}

html.dark .mob-route-d.on {
  background: rgba(46, 125, 50, 0.2);
  border-color: rgba(46, 125, 50, 0.4);
}

html.dark .mob-route-d.off {
  background: rgba(198, 40, 40, 0.15);
  border-color: rgba(198, 40, 40, 0.35);
}

/* ── Mobile UX polish: header · day pulse · pull refresh · PWA · celebrate ── */
@media (max-width: 959px) {
  .mob-home-topbar {
    margin-bottom: 0;
    align-items: center;
  }

  body.mobile-app-enabled #mobile-app-header .mob-home-header {
    padding: calc(6px + env(safe-area-inset-top, 0px)) 10px 6px;
  }

  body.mobile-app-enabled #mobile-app-header .mob-home-topbar {
    min-height: 36px;
    gap: 8px;
  }

  body.mobile-app-enabled #mobile-app-header .mob-home-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 16px;
  }

  body.mobile-app-enabled #mobile-app-header .mob-home-avatar {
    width: 34px;
    height: 34px;
  }

  body.mobile-app-enabled #mobile-app-header .mob-home-date {
    display: none;
  }

  body.mobile-app-enabled #mobile-app-header .mob-home-top-sep {
    height: 28px;
  }

  body.mobile-app-enabled #mobile-app-header .mob-header-status-pill {
    margin-top: 2px;
    padding: 1px 6px;
    font-size: 9px;
  }

  .mob-home-topbar-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mob-header-clock .mob-home-clock {
    font-size: 17px;
  }

  .mob-header-clock .mob-home-date {
    font-size: 9px;
    max-width: 88px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mob-header-greet-line {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #mob-header-greet {
    font-weight: 600;
    opacity: 0.92;
  }

  #mob-header-name {
    font-weight: 700;
  }

  .mob-header-sub {
    font-size: 10px;
    opacity: 0.85;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
  }

  .mob-header-status-pill {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.16);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mob-header-status-pill.ok {
    background: rgba(46, 125, 50, 0.35);
  }

  .mob-header-status-pill.wait {
    background: rgba(245, 124, 0, 0.35);
  }

  .mob-header-status-pill.active {
    background: rgba(255, 255, 255, 0.22);
  }

  .mob-header-status-pill.off {
    background: rgba(255, 255, 255, 0.1);
    opacity: 0.9;
  }

  #s-mobile-home {
    position: relative;
  }

  .mob-pull-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    pointer-events: none;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
  }

  .mob-pull-indicator.visible {
    transform: translateY(0);
    opacity: 1;
  }

  .mob-pull-indicator.ready {
    color: #1565C0;
  }

  .mob-pull-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid #cbd5e1;
    border-top-color: #1565C0;
    border-radius: 50%;
    animation: mobPullSpin 0.8s linear infinite;
    opacity: 0;
  }

  .mob-pull-indicator.loading .mob-pull-spinner {
    opacity: 1;
  }

  @keyframes mobPullSpin {
    to { transform: rotate(360deg); }
  }

  .mob-day-pulse {
    padding: 0 12px 12px;
  }

  .mob-day-pulse-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e3eaf5;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .mob-day-pulse-card.mob-day-pulse--done {
    border-color: rgba(46, 125, 50, 0.35);
    box-shadow: 0 4px 20px rgba(46, 125, 50, 0.12);
  }

  .mob-day-ring-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
  }

  .mob-day-ring {
    width: 64px;
    height: 64px;
    transform: rotate(-90deg);
  }

  .mob-day-ring-bg {
    fill: none;
    stroke: #e8edf3;
    stroke-width: 5;
  }

  .mob-day-ring-fg {
    fill: none;
    stroke: #1565C0;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.45s ease;
  }

  .mob-day-pulse--done .mob-day-ring-fg {
    stroke: #2E7D32;
  }

  .mob-day-ring-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #1565C0;
  }

  .mob-day-pulse--done .mob-day-ring-pct {
    color: #2E7D32;
  }

  .mob-day-pulse-body {
    flex: 1;
    min-width: 0;
  }

  .mob-day-pulse-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 4px;
  }

  .mob-day-pulse-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
  }

  .mob-day-pulse-sub {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
    line-height: 1.4;
  }

  .mob-day-pulse-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 8px;
    font-size: 10px;
    color: #64748b;
    text-align: center;
  }

  .mob-day-pulse-stats b {
    display: block;
    font-size: 14px;
    color: #1565C0;
    font-weight: 800;
  }

  .mob-day-pulse-btn {
    margin-top: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #1565C0, #0D47A1);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(21, 101, 192, 0.28);
    transition:
      transform 0.2s ease,
      box-shadow 0.22s ease,
      background 0.22s ease;
  }

  @media (hover: hover) {
    .mob-day-pulse-btn:hover {
      transform: translateY(-2px);
      background: linear-gradient(135deg, #1976D2, #1565C0);
      box-shadow: 0 8px 22px rgba(21, 101, 192, 0.38);
    }
  }

  .mob-day-pulse-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 3px 10px rgba(21, 101, 192, 0.24);
  }

  .mob-tab-fab.mob-tab-fab-pulse .mob-tab-ic {
    animation: mobFabPulseBlue 2.6s ease-in-out infinite;
  }

  @keyframes mobFabPulseBlue {
    0%, 100% {
      transform: scale(1);
      box-shadow:
        0 8px 26px rgba(21, 101, 192, 0.42),
        0 0 0 0 rgba(66, 165, 245, 0.38);
    }
    50% {
      transform: scale(1.05);
      box-shadow:
        0 10px 30px rgba(21, 101, 192, 0.52),
        0 0 0 10px rgba(66, 165, 245, 0);
    }
  }

  body.mobile-app-enabled #mobile-app-tabbar .mob-tab-fab .mob-tab-ic {
    width: 56px;
    height: 56px;
    margin-top: -30px;
    background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
    border: 3px solid #fff;
    box-shadow:
      0 8px 26px rgba(21, 101, 192, 0.48),
      0 4px 10px rgba(13, 71, 161, 0.22);
    transition:
      transform 0.22s ease,
      box-shadow 0.22s ease,
      background 0.22s ease;
  }

  @media (hover: hover) {
    body.mobile-app-enabled #mobile-app-tabbar .mob-tab-fab:hover .mob-tab-ic {
      transform: translateY(-3px) scale(1.04);
      background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
      box-shadow:
        0 12px 32px rgba(21, 101, 192, 0.55),
        0 6px 14px rgba(13, 71, 161, 0.28);
    }

    body.mobile-app-enabled #mobile-app-tabbar .mob-tab-fab:hover .mob-tab-fab-lbl {
      color: #0D47A1;
    }
  }

  body.mobile-app-enabled #mobile-app-tabbar .mob-tab-fab.mob-tab-fab-active-shift .mob-tab-ic {
    background: linear-gradient(135deg, #1976D2 0%, #1565C0 50%, #0D47A1 100%);
    box-shadow:
      0 8px 26px rgba(21, 101, 192, 0.42),
      0 4px 10px rgba(13, 71, 161, 0.2);
  }

  body.mobile-app-enabled #mobile-app-tabbar .mob-tab-fab.mob-tab-fab-active-shift .mob-tab-fab-lbl {
    color: #1565C0;
  }

  body.mobile-app-enabled #mobile-app-tabbar .mob-tab-fab.mob-tab-fab-done .mob-tab-ic {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    box-shadow: 0 6px 16px rgba(71, 85, 105, 0.28);
  }

  body.mobile-app-enabled #mobile-app-tabbar .mob-tab-fab .mob-tab-ic img {
    width: 28px;
    height: 28px;
  }

  body.mobile-app-enabled #mobile-app-tabbar .mob-tab-fab .mob-tab-fab-lbl {
    font-weight: 800;
    font-size: 10px;
    color: #0D47A1;
  }

  /* P4 — home polish */

  body.mobile-app-enabled.mob-on-home .mob-home-body {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }

  body.mobile-app-enabled .mob-home-section.mob-sup-only,
  body.mobile-app-enabled .mob-top-oos-section,
  body.mobile-app-enabled .mob-sup-pending-queue {
    scroll-margin-bottom: 80px;
  }

  .mob-pwa-install {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 99990;
  }

  .mob-pwa-install-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #071e42, #1565C0);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(7, 30, 66, 0.35);
  }

  .mob-pwa-install-ic {
    font-size: 22px;
    flex-shrink: 0;
  }

  .mob-pwa-install-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    opacity: 0.92;
  }

  .mob-pwa-install-text strong {
    font-size: 13px;
    opacity: 1;
  }

  .mob-pwa-install-btn {
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    padding: 8px 14px;
    background: #fff;
    color: #1565C0;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
  }

  .mob-pwa-install-close {
    flex-shrink: 0;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
  }

  .ci-success-card.mob-celebrate {
    animation: mobCelebratePop 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
  }

  .ci-success-card.mob-celebrate::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 20% 30%, rgba(255, 213, 79, 0.5) 0 8px, transparent 9px),
      radial-gradient(circle at 80% 25%, rgba(46, 125, 50, 0.45) 0 6px, transparent 7px),
      radial-gradient(circle at 65% 75%, rgba(21, 101, 192, 0.4) 0 7px, transparent 8px),
      radial-gradient(circle at 30% 70%, rgba(244, 67, 54, 0.35) 0 5px, transparent 6px);
    animation: mobConfettiFade 1.2s ease forwards;
  }

  @keyframes mobCelebratePop {
    0% { transform: scale(0.88); opacity: 0.6; }
    100% { transform: scale(1); opacity: 1; }
  }

  @keyframes mobConfettiFade {
    0% { opacity: 1; transform: scale(0.8); }
    100% { opacity: 0; transform: scale(1.15); }
  }

  html.dark .mob-day-pulse-card {
    background: #111827;
    border-color: #1e293b;
  }

  html.dark .mob-day-pulse-title {
    color: #e2e8f0;
  }

  html.dark .mob-day-pulse-sub,
  html.dark .mob-day-pulse-label {
    color: #94a3b8;
  }

  html.dark .mob-day-ring-bg {
    stroke: #334155;
  }

  /* Geofencing card — mobile home */
  .mob-geo-section {
    margin: 0 0 16px;
  }

  .mob-geo-section.mob-geo-enter .mob-geo-card {
    animation: mobGeoSlideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  @keyframes mobGeoSlideUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .mob-geo-card {
    position: relative;
    overflow: hidden;
    display: none;
    background: linear-gradient(135deg, #1565C0, #0D47A1);
    border-radius: 16px;
    color: #fff;
    box-shadow: 0 6px 20px rgba(21, 101, 192, 0.28);
  }

  .mob-geo-card.ch-geo-card--active {
    display: block !important;
  }

  .mob-geo-card-glow {
    position: absolute;
    top: -40%;
    right: -20%;
    width: 60%;
    height: 80%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
    pointer-events: none;
  }

  .mob-geo-card-inner {
    position: relative;
    padding: 14px;
  }

  .mob-geo-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }

  .mob-geo-pin {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }

  .mob-geo-card-text {
    flex: 1;
    min-width: 0;
  }

  .mob-geo-card-title {
    font-size: 13px;
    font-weight: 700;
  }

  .mob-geo-store {
    font-size: 11px;
    opacity: 0.92;
    margin-top: 2px;
  }

  .mob-geo-dist-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.22);
    padding: 4px 8px;
    border-radius: 999px;
  }

  .mob-geo-btn {
    width: 100%;
    padding: 11px;
    background: #fff;
    color: #1565C0;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
  }

  /* แท็บ แจ้งลา/สลับวัน */
  .mob-tab-ic.mob-tab-ic-emoji {
    font-size: 22px;
    line-height: 1;
  }

  .mob-tab-lbl-compact {
    font-size: 9px;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  body.mobile-app-enabled #s-mobile-leave-swap.active {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #f3f4f6;
  }

  body.mobile-app-enabled #s-mobile-leave-swap.active .mob-ls-body {
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }

  /* Header กระชับขึ้น ~30% บนหน้าแจ้งลา/สลับวัน */
  body.mobile-app-enabled.mob-on-leave-swap #mobile-app-header .mob-home-header {
    padding: calc(4px + env(safe-area-inset-top, 0px)) 10px 4px;
  }

  body.mobile-app-enabled.mob-on-leave-swap #mobile-app-header .mob-home-topbar {
    min-height: 0;
    gap: 6px;
    align-items: flex-start;
  }

  body.mobile-app-enabled.mob-on-leave-swap .mob-home-topbar-main {
    align-items: flex-start;
    gap: 6px;
  }

  body.mobile-app-enabled.mob-on-leave-swap .mob-header-clock .mob-home-clock {
    font-size: 14px;
    line-height: 1.15;
  }

  body.mobile-app-enabled.mob-on-leave-swap .mob-home-top-sep {
    height: 22px;
    margin-top: 2px;
  }

  body.mobile-app-enabled.mob-on-leave-swap .mob-header-user-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    padding-right: 2px;
  }

  body.mobile-app-enabled.mob-on-leave-swap .mob-header-greet-line {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-width: 100%;
  }

  body.mobile-app-enabled.mob-on-leave-swap #mob-header-greet {
    display: block;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.88;
    margin-bottom: 1px;
  }

  body.mobile-app-enabled.mob-on-leave-swap #mob-header-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    word-break: break-word;
  }

  body.mobile-app-enabled.mob-on-leave-swap .mob-header-sub {
    display: none;
  }

  body.mobile-app-enabled.mob-on-leave-swap .mob-header-status-pill {
    margin-top: 0;
    padding: 3px 8px;
    font-size: 9px;
    line-height: 1.25;
    max-width: 100%;
    white-space: normal;
    text-align: left;
  }

  body.mobile-app-enabled.mob-on-leave-swap .mob-home-topbar-actions .mob-home-icon-btn,
  body.mobile-app-enabled.mob-on-leave-swap .mob-home-topbar-actions .mob-home-avatar {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  body.mobile-app-enabled.mob-on-leave-swap .app {
    padding-top: calc(50px + env(safe-area-inset-top, 0px));
  }

  .mob-ls-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 10px 14px 24px;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }

  .mob-ls-page-hdr {
    padding: 4px 4px 6px;
  }

  .mob-ls-page-eyebrow {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
  }

  .mob-ls-page-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: #0f172a;
    letter-spacing: -0.02em;
  }

  .mob-ls-page-sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #64748b;
  }

  .mob-ls-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    padding: 20px 18px 22px;
  }

  .mob-ls-acc {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
  }

  .mob-ls-acc-hdr {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-ls-acc-hdr:active {
    background: #f8fafc;
  }

  .mob-ls-acc.is-open .mob-ls-acc-hdr {
    border-bottom: 1px solid #f1f5f9;
  }

  .mob-ls-acc-titles {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .mob-ls-acc-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: #166534;
  }

  .mob-ls-acc-title.leave {
    color: #c2410c;
  }

  .mob-ls-acc-sub {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.3;
  }

  .mob-ls-acc-chevron {
    font-size: 12px;
    color: #94a3b8;
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .mob-ls-acc.is-open .mob-ls-acc-chevron {
    transform: rotate(180deg);
  }

  .mob-ls-acc-body {
    display: grid;
    grid-template-rows: 0fr;
    padding: 0 18px;
    overflow: hidden;
    transition: grid-template-rows 0.32s ease, padding 0.28s ease;
  }

  .mob-ls-acc.is-open .mob-ls-acc-body {
    grid-template-rows: 1fr;
    padding: 16px 18px 20px;
  }

  .mob-ls-acc-body-inner {
    min-height: 0;
    overflow: hidden;
  }

  .mob-ls-card-h {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #166534;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
  }

  .mob-ls-card-h.leave {
    color: #c2410c;
  }

  .mob-ls-card-ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    background: #ecfdf5;
  }

  .mob-ls-card-ic.leave {
    background: #fff7ed;
  }

  .mob-ls-field {
    margin-bottom: 16px;
  }

  .mob-ls-field:last-of-type {
    margin-bottom: 18px;
  }

  .mob-ls-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    padding-left: 2px;
  }

  .mob-ls-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 13px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font-size: 16px;
    font-family: inherit;
    background: #fff;
    color: #111827;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  }

  .mob-ls-input::placeholder {
    color: #9ca3af;
  }

  .mob-ls-input:focus {
    outline: none;
    border-color: #93c5fd;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.45);
  }

  .mob-ls-textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.5;
  }

  .mob-ls-btn {
    width: 100%;
    min-height: 50px;
    margin-top: 2px;
    padding: 14px 18px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  }

  .mob-ls-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
  }

  @media (hover: hover) {
    .mob-ls-btn:hover {
      transform: scale(0.99);
      filter: brightness(1.04);
    }
    .mob-ls-btn:active {
      transform: scale(0.98);
    }
  }

  .mob-ls-btn-swap {
    background: linear-gradient(160deg, #22c55e 0%, #16a34a 100%);
  }

  .mob-ls-btn-leave {
    background: linear-gradient(160deg, #ef4444 0%, #dc2626 100%);
  }

  .mob-ls-status {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    text-align: center;
    line-height: 1.45;
  }

  .mob-swap-step-label {
    font-size: 15px;
    font-weight: 800;
    color: #1565C0;
    margin: 0 0 12px;
    line-height: 1.4;
  }

  .mob-swap-mode-btn {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    margin-bottom: 12px;
    padding: 16px 14px;
    border: 2px solid #cfe0f7;
    border-radius: 16px;
    background: #fff;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    min-height: 72px;
    box-shadow: 0 2px 10px rgba(21, 101, 192, 0.08);
    -webkit-tap-highlight-color: transparent;
  }

  .mob-swap-mode-btn:active {
    transform: scale(0.99);
    border-color: #1565C0;
    background: #f0f7ff;
  }

  .mob-swap-mode-ic {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #E3F2FD;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
  }

  .mob-swap-mode-ic.branch { background: #E8F5E9; }

  .mob-swap-mode-t {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    margin-bottom: 4px;
  }

  .mob-swap-mode-d {
    display: block;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
  }

  .mob-swap-back-btn {
    border: none;
    background: transparent;
    color: #1565C0;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    padding: 0 0 10px;
    margin-bottom: 4px;
    cursor: pointer;
  }

  .mob-swap-hint-box {
    background: #FFF8E1;
    border: 1px solid #FFE082;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    color: #5d4037;
    line-height: 1.5;
    margin-bottom: 14px;
  }

  .mob-swap-pairs-title {
    font-size: 14px;
    font-weight: 800;
    color: #334155;
    margin-bottom: 8px;
  }

  .mob-swap-pairs-hint {
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
    margin: -4px 0 10px;
  }

  .mob-swap-req {
    color: #C62828;
    font-weight: 800;
  }

  .mob-swap-pair-row {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
  }

  .mob-swap-pair-lbl {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 8px;
  }

  .mob-swap-pair-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
  }

  .mob-swap-pair-arrow {
    font-size: 18px;
    font-weight: 800;
    color: #1565C0;
    text-align: center;
  }

  .mob-swap-add-pair-btn {
    width: 100%;
    min-height: 48px;
    border: 2px dashed #90CAF9;
    border-radius: 12px;
    background: #f0f7ff;
    color: #1565C0;
    font-size: 15px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    margin-bottom: 12px;
  }

  .mob-swap-remove-pair {
    margin-top: 8px;
    border: none;
    background: transparent;
    color: #C62828;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    padding: 4px 0;
  }

  .mob-swap-loading,
  .mob-swap-empty {
    font-size: 13px;
    color: #64748b;
    text-align: center;
    padding: 12px;
  }

  html.dark .mob-swap-mode-btn { background: #1e293b; border-color: #334155; }
  html.dark .mob-swap-mode-t { color: #e2e8f0; }
  html.dark .mob-swap-mode-d { color: #94a3b8; }
  html.dark .mob-swap-hint-box { background: #422006; border-color: #78350f; color: #fde68a; }
  html.dark .mob-swap-pair-row { background: #0f172a; border-color: #334155; }

  html.dark body.mobile-app-enabled #s-mobile-leave-swap.active {
    background: #0b1120;
  }

  html.dark .mob-ls-page-title {
    color: #f1f5f9;
  }

  html.dark .mob-ls-page-eyebrow,
  html.dark .mob-ls-page-sub {
    color: #94a3b8;
  }

  html.dark .mob-ls-card {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25);
  }

  html.dark .mob-ls-acc {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25);
  }

  html.dark .mob-ls-acc-hdr:active {
    background: #0f172a;
  }

  html.dark .mob-ls-acc.is-open .mob-ls-acc-hdr {
    border-bottom-color: #334155;
  }

  html.dark .mob-ls-acc-title.swap {
    color: #4ade80;
  }

  html.dark .mob-ls-acc-title.leave {
    color: #fb923c;
  }

  html.dark .mob-ls-acc-sub {
    color: #64748b;
  }

  html.dark .mob-ls-card-h {
    border-bottom-color: #334155;
  }

  html.dark .mob-ls-label {
    color: #cbd5e1;
  }

  html.dark .mob-ls-input {
    background: #0f172a;
    border-color: #374151;
    color: #e2e8f0;
  }

  html.dark .mob-ls-input:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
  }
}

/* Desktop fallback — หน้าแจ้งลา/สลับวัน */
#s-mobile-leave-swap.active {
  background: #f3f4f6;
}

#s-mobile-leave-swap.active .mob-ls-body {
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

html.dark #s-mobile-leave-swap.active {
  background: #0b1120;
}