/* TimeKeeper HR v20 — mobile-only responsive design. No Django API changes. */
:root{--tkm-ink:#142c48;--tkm-muted:#74869f;--tkm-blue:#2d6cf5;--tkm-green:#148d71;--tkm-line:#e1e9f4;--tkm-bg:#f4f7fc}
body[data-portal="mobile"]{margin:0;overflow-x:hidden;background:var(--tkm-bg);color:var(--tkm-ink);-webkit-text-size-adjust:100%;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body[data-portal="mobile"] *{box-sizing:border-box}
body[data-portal="mobile"] button,body[data-portal="mobile"] a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
body[data-portal="mobile"] button:focus-visible,body[data-portal="mobile"] a:focus-visible,body[data-portal="mobile"] input:focus-visible,body[data-portal="mobile"] select:focus-visible,body[data-portal="mobile"] textarea:focus-visible{outline:3px solid #81b0ff;outline-offset:2px}
body[data-portal="mobile"] svg{width:21px;height:21px;display:block;flex-shrink:0}
body[data-portal="mobile"] .mobileApp{min-height:100dvh;max-width:100vw;overflow-x:clip;background:var(--tkm-bg)}
body[data-portal="mobile"] .mobileHeader{position:sticky;top:0;z-index:25;height:auto;min-height:70px;padding:0 16px;background:#fff;border-bottom:1px solid #e6edf6;box-shadow:0 2px 18px #122b4b06}
body[data-portal="mobile"] .mobileHeaderInner{width:min(100%,680px);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:70px}
body[data-portal="mobile"] .mobileBrand{display:flex;align-items:center;gap:11px;min-width:0}
body[data-portal="mobile"] .mobileBrand .mobileSymbol{width:41px;height:41px;min-width:41px;border-radius:14px;font-size:23px;letter-spacing:-2px;background:linear-gradient(135deg,#3984ff,#285ee1);color:white;box-shadow:0 5px 14px #2e6bea2c}
body[data-portal="mobile"] .mobileBrand b{display:block;font-size:16px;font-weight:800;letter-spacing:-.45px;line-height:1.15;color:#162f50}
body[data-portal="mobile"] .mobileBrand>div span{display:block;margin-top:4px;color:#8496ac;font-size:11px}
body[data-portal="mobile"] .mobileAvatar{width:40px;height:40px;min-width:40px;background:#eaf1ff;border:1px solid #dce7fa;color:#1c56ab;border-radius:14px;font-weight:800;font-size:13px}
body[data-portal="mobile"] .phoneMain.mobileMain{width:100%;max-width:700px;min-width:0;margin:0 auto!important;padding:0 clamp(12px,4vw,22px) calc(112px + env(safe-area-inset-bottom))!important;position:relative;overflow-wrap:anywhere}
body[data-portal="mobile"] .mobileGreeting{padding:24px 2px 19px}
body[data-portal="mobile"] .mobileDate{font-size:12px;font-weight:700;color:#6e87ab;letter-spacing:.15px;text-transform:capitalize}
body[data-portal="mobile"] .mobileGreeting h1{font-size:clamp(24px,6.2vw,31px);line-height:1.18;letter-spacing:-1px;color:#102b4e;overflow-wrap:anywhere;margin:9px 0 7px}
body[data-portal="mobile"] .mobileGreeting p{font-size:13px;line-height:1.45;color:#8192ab}
body[data-portal="mobile"] .mobileHero{padding:clamp(18px,5vw,27px);min-height:0;border-radius:24px;display:flex;flex-direction:column;gap:0;background:linear-gradient(132deg,#133456 0%,#142c46 61%,#1d4570 100%);color:#fff;box-shadow:0 16px 30px #132f5021}
body[data-portal="mobile"] .mobileHeroTop{gap:10px;align-items:center}
body[data-portal="mobile"] .mobileHeroTop>span:first-child{color:#b7d0ed;font-size:10px;letter-spacing:1.45px;font-weight:800}
body[data-portal="mobile"] .mobileState{font-size:10px;padding:6px 10px;color:#d9e8fa;border:1px solid #ffffff48;background:#ffffff10;border-radius:999px;font-weight:750;white-space:normal;text-align:right}
body[data-portal="mobile"] .mobileState.active{color:#dbfff0;background:#17a47d29;border-color:#77d9b6}
body[data-portal="mobile"] .mobileHeroContent{margin:15px 0 2px;min-width:0}
body[data-portal="mobile"] .mobileHeroContent h2{font-size:clamp(21px,5.5vw,27px)!important;letter-spacing:-.55px;color:#fff;line-height:1.2;margin:0 0 8px}
body[data-portal="mobile"] .mobileHeroContent p{font-size:13px;line-height:1.5;color:#c5d6e8;margin:0;max-width:420px}
body[data-portal="mobile"] .mobileHeroButton{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:55px;border:0;border-radius:15px;background:#fff;color:#16487d;font-weight:800;font-size:14px;text-align:left;padding:12px 16px;box-shadow:0 5px 12px #071b2c18}
body[data-portal="mobile"] .mobileHeroButton>span{display:flex;align-items:center;gap:11px;min-width:0}
body[data-portal="mobile"] .mobileHeroButton svg{width:20px;height:20px}
body[data-portal="mobile"] .mobileHeroButton>svg:last-child{width:18px;height:18px;opacity:.7}
body[data-portal="mobile"] .mobileSectionHeading{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:26px 2px 12px}
body[data-portal="mobile"] .mobileSectionHeading h2{font-size:18px!important;font-weight:800;letter-spacing:-.45px;color:#18395d;min-width:0}
body[data-portal="mobile"] .mobileTextButton{border:0;background:none;color:#2f67bd;font-weight:800;font-size:12px;display:inline-flex;align-items:center;gap:4px;padding:8px 0;white-space:nowrap}
body[data-portal="mobile"] .mobileTextButton svg{width:15px;height:15px}
body[data-portal="mobile"] .mobileProgressGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body[data-portal="mobile"] .mobileProgressCard{padding:17px 15px 16px;border-radius:20px;border:1px solid #e2eaf4;background:#fff;min-width:0;min-height:195px;box-shadow:0 6px 23px #23466d08;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
body[data-portal="mobile"] .mobileProgressIcon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:#2e70f0;background:#eaf1ff;margin:0 0 3px}
body[data-portal="mobile"] .mobileProgressIcon.green{color:#13977d;background:#e6f8f3}
body[data-portal="mobile"] .mobileProgressIcon svg{width:20px;height:20px}
body[data-portal="mobile"] .mobileProgressCard>span{font-size:12px;color:#435d7c;font-weight:750;line-height:1.3;min-height:0}
body[data-portal="mobile"] .mobileProgressCard>strong{font-size:clamp(22px,5.6vw,31px);font-variant-numeric:tabular-nums;letter-spacing:-.85px;line-height:1.1;color:#183755}
body[data-portal="mobile"] .mobileProgressCard>small{font-size:11px;color:#8395ad;line-height:1.35;min-height:0}
body[data-portal="mobile"] .mobileProgressCard .progress{width:100%;height:7px;min-height:7px;background:#edf2f9;margin-top:auto;border-radius:99px;overflow:hidden}
body[data-portal="mobile"] .mobileProgressCard .progress>span{height:100%;background:linear-gradient(90deg,#316df6,#5d9dff)}
body[data-portal="mobile"] .mobileProgressCard .progress.shifts>span{background:linear-gradient(90deg,#128d74,#38c4a0)}
body[data-portal="mobile"] .mobileProgressCard>b{font-size:11px;color:#697f9c;margin-top:2px}
body[data-portal="mobile"] .mobileNextShift{width:100%;display:flex;align-items:center;gap:14px;border:1px solid #e1eaf6;background:white;border-radius:19px;padding:16px;min-height:88px;text-align:left;box-shadow:0 6px 20px #23466d07;overflow:hidden}
body[data-portal="mobile"] .mobileShiftDate{width:55px;min-width:55px;padding:9px 6px;border-radius:14px;background:#eaf2ff;color:#2e65ae;display:grid;gap:3px;place-items:center}
body[data-portal="mobile"] .mobileShiftDate strong{font-size:25px;line-height:1;font-weight:800}
body[data-portal="mobile"] .mobileShiftDate span{font-size:11px;font-weight:700}
body[data-portal="mobile"] .mobileNextText{flex:1;min-width:0;display:grid;gap:6px}
body[data-portal="mobile"] .mobileNextText b{font-size:14px;font-weight:800;color:#203b5a;line-height:1.35;overflow-wrap:anywhere}
body[data-portal="mobile"] .mobileNextText>span{font-size:12px;color:#7287a2}
body[data-portal="mobile"] .mobileShiftArrow{flex-shrink:0;color:#7c94b6}
body[data-portal="mobile"] .mobileShiftArrow svg{width:17px;height:17px}
body[data-portal="mobile"] .mobileQuick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:15px}
body[data-portal="mobile"] .mobileQuick>button{text-align:left;background:#fff;border:1px solid #e3eaf5;border-radius:19px;padding:16px 15px;min-height:135px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;box-shadow:0 5px 16px #23466d05;min-width:0}
body[data-portal="mobile"] .mobileQuickIcon{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:#eaf2ff;color:#336ab8;margin-bottom:4px}
body[data-portal="mobile"] .mobileQuickIcon svg{width:19px;height:19px}
body[data-portal="mobile"] .mobileQuick b{font-size:14px;font-weight:800;color:#264465}
body[data-portal="mobile"] .mobileQuick small{font-size:11px;line-height:1.3;color:#8496ae}
body[data-portal="mobile"] .bottomNav.mobileTabs{left:0;right:0;bottom:0;z-index:60;position:fixed;margin:0;padding:7px max(7px,calc((100vw - 670px)/2)) calc(7px + env(safe-area-inset-bottom));background:rgba(255,255,255,.98);border-top:1px solid #e3eaf4;box-shadow:0 -9px 28px #142f4b11;display:flex;justify-content:center;gap:0;align-items:flex-end}
body[data-portal="mobile"] .mobileTabs button{flex:1 1 0;min-width:0;min-height:58px;background:transparent;border:0;border-radius:15px;padding:7px 1px 5px;color:#7c90a8;font-size:10px;font-weight:750;display:flex;flex-direction:column;gap:5px;justify-content:center;align-items:center;overflow:hidden}
body[data-portal="mobile"] .mobileTabs button.active{color:#286fee}
body[data-portal="mobile"] .mobileTabs button .ico{height:24px;display:grid;place-items:center}
body[data-portal="mobile"] .mobileTabs button .ico svg{width:23px;height:23px}
body[data-portal="mobile"] .mobileTabs button.scan{flex:0 0 64px;min-height:67px;max-height:73px;border-radius:20px;background:linear-gradient(145deg,#347efa,#2668ea);color:#fff;box-shadow:0 9px 21px #2e6df03f;margin-top:-23px;margin-left:2px;margin-right:2px;padding:9px 5px}
body[data-portal="mobile"] .mobileTabs button.scan .ico svg{width:26px;height:26px}
body[data-portal="mobile"] .mobileTabs button.scan .mobileNavLabel{font-size:10px}
body[data-portal="mobile"] .mobileSectionTop{padding:25px 2px 18px}
body[data-portal="mobile"] .mobileSectionTop>span{font-size:11px;letter-spacing:1.15px;color:#356ec5;font-weight:850}
body[data-portal="mobile"] .mobileSectionTop h1{font-size:clamp(24px,6.5vw,31px);font-weight:850;letter-spacing:-.8px;color:#183653;margin:7px 0 7px}
body[data-portal="mobile"] .mobileSectionTop p{color:#8193a9;font-size:13px;line-height:1.5}
body[data-portal="mobile"] .mobileSummaryBar{border:1px solid #e1eaf5;background:white;border-radius:18px;padding:15px;display:grid;grid-template-columns:1fr 1fr auto;gap:9px;align-items:center;margin-bottom:14px}
body[data-portal="mobile"] .mobileSummaryBar>div{display:grid;gap:3px}
body[data-portal="mobile"] .mobileSummaryBar strong{font-size:22px;letter-spacing:-.6px;color:#194275;font-variant-numeric:tabular-nums}
body[data-portal="mobile"] .mobileSummaryBar span{font-size:11px;color:#7d91ab}
body[data-portal="mobile"] .mobileRefreshIcon{width:42px;height:42px;border-radius:14px;border:0;background:#edf4ff;color:#2867c1;display:grid;place-items:center}
body[data-portal="mobile"] .mobileList{display:grid;gap:10px}
body[data-portal="mobile"] .mobileScheduleDay,body[data-portal="mobile"] .mobileHistoryItem{border:1px solid #e3ebf6;background:white;border-radius:17px;padding:13px;display:flex;gap:13px;align-items:center;min-width:0}
body[data-portal="mobile"] .mobileScheduleDate{width:48px;height:52px;min-width:48px;border-radius:12px;background:#eaf2ff;color:#2867b3;display:grid;place-content:center;justify-items:center;gap:2px}
body[data-portal="mobile"] .mobileScheduleDate strong{font-size:19px;line-height:1}
body[data-portal="mobile"] .mobileScheduleDate small{font-size:11px;font-weight:750}
body[data-portal="mobile"] .mobileScheduleContent{flex:1;min-width:0;display:grid;gap:5px}
body[data-portal="mobile"] .mobileScheduleContent b{font-size:13px;line-height:1.35;color:#294666;overflow-wrap:anywhere}
body[data-portal="mobile"] .mobileScheduleContent small{font-size:11px;color:#8898ad}
body[data-portal="mobile"] .mobileScheduleHours{font-size:12px;font-weight:750;color:#3467ac;white-space:nowrap}
body[data-portal="mobile"] .mobileScheduleDay.isRest{background:#f9fbfe}
body[data-portal="mobile"] .mobileScheduleDay.isRest .mobileScheduleDate{background:#eef1f7;color:#8393ab}
body[data-portal="mobile"] .mobileScheduleDay.isRest .mobileScheduleHours{color:#8a9bb0}
body[data-portal="mobile"] .mobileHistoryIcon{width:42px;height:42px;min-width:42px;display:grid;place-items:center;background:#ecf3ff;color:#326ed5;border-radius:12px}
body[data-portal="mobile"] .mobileHistoryInfo{flex:1;min-width:0;display:grid;gap:4px}
body[data-portal="mobile"] .mobileHistoryInfo b{font-size:13px;color:#2a4667}
body[data-portal="mobile"] .mobileHistoryInfo span,body[data-portal="mobile"] .mobileHistoryInfo small{font-size:11px;color:#8295ab}
body[data-portal="mobile"] .mobileHistoryItem>strong{font-size:14px;color:#1e497e;white-space:nowrap}
body[data-portal="mobile"] .mobileEmpty{border-radius:17px;padding:28px 18px;background:#fff;color:#8094ae;text-align:center;border:1px dashed #dbe5f3;font-size:13px;line-height:1.5}
body[data-portal="mobile"] .mobileSegment{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#e6edf7;border-radius:16px;margin:0 0 16px}
body[data-portal="mobile"] .mobileSegment button{min-width:0;min-height:46px;padding:8px 7px;border:0;border-radius:12px;background:none;font-size:12px;color:#70849e;font-weight:750;line-height:1.25;white-space:normal}
body[data-portal="mobile"] .mobileSegment button.active{background:white;color:#245ca9;box-shadow:0 3px 12px #24496b12}
body[data-portal="mobile"] .mobileRequestCreate{background:#fff;border:1px solid #dfe9f7;border-radius:21px;padding:20px;display:grid;gap:12px}
body[data-portal="mobile"] .mobileRequestIcon{width:46px;height:46px;display:grid;place-items:center;background:#edf4ff;color:#2c6fda;border-radius:13px}
body[data-portal="mobile"] .mobileRequestCreate h2{font-size:18px;color:#233f5d;line-height:1.3;margin:0 0 5px}
body[data-portal="mobile"] .mobileRequestCreate p{font-size:13px;line-height:1.45;color:#7d91aa}
body[data-portal="mobile"] .mobileRequestCreate .btn{min-height:50px;margin-top:3px}
body[data-portal="mobile"] .mobileRequestList{margin-top:20px}
body[data-portal="mobile"] .mobileRequestItem{padding:16px;background:white;border:1px solid #e0e9f4;border-radius:17px;display:grid;gap:10px}
body[data-portal="mobile"] .mobileRequestLine{display:flex;align-items:center;justify-content:space-between;gap:10px}
body[data-portal="mobile"] .mobileRequestLine b{font-size:14px;color:#294365}
body[data-portal="mobile"] .mobileRequestItem p{font-size:13px;color:#657b96;line-height:1.4}
body[data-portal="mobile"] .mobileDecisionNote{font-size:12px;padding:11px;border-radius:11px;background:#f1f6fc;color:#516f92}
body[data-portal="mobile"] .mobileCount{font-size:12px;font-weight:750;color:#2b65ba;background:#e5efff;border-radius:999px;padding:6px 11px}
body[data-portal="mobile"] .mobileProfile{display:flex;align-items:center;gap:12px;min-width:0}
body[data-portal="mobile"] .mobileProfileIcon{min-width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:#edf4ff;color:#2d65bb;font-weight:800}
body[data-portal="mobile"] .mobileProfile .muted{overflow-wrap:anywhere}
body[data-portal="mobile"] #mobileProfileHistory,body[data-portal="mobile"] #mobileProfileExit{display:flex;align-items:center;justify-content:center;gap:11px;min-height:52px}
body[data-portal="mobile"] .salaryHero{margin-top:22px!important;border-radius:23px!important;padding:23px!important;background:linear-gradient(135deg,#14385a,#2768b6)!important}
body[data-portal="mobile"] .salaryHero h2{font-size:25px!important}
body[data-portal="mobile"] .salaryHeroIcon{font-size:33px;padding:10px 16px}
body[data-portal="mobile"] .salarySlip{border-radius:20px;padding:18px;gap:14px;min-width:0}
body[data-portal="mobile"] .salarySlip .row{flex-wrap:wrap}
body[data-portal="mobile"] .salaryBig{font-size:clamp(25px,6.5vw,32px)}
body[data-portal="mobile"] .salaryFacts{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
body[data-portal="mobile"] .salaryFacts>div{min-width:0}
body[data-portal="mobile"] .salaryFacts b{overflow-wrap:anywhere}
body[data-portal="mobile"] .salaryPaymentRow{gap:10px}
body[data-portal="mobile"] .salaryCompliance{margin:14px 0;line-height:1.5}
body[data-portal="mobile"] .leavePhoneHero{border-radius:22px;padding:22px;background:linear-gradient(135deg,#143859,#2868b5)}
body[data-portal="mobile"] .leavePhoneHero h2{font-size:24px!important}
body[data-portal="mobile"] .leavePhoneHero .btn{min-height:50px}
body[data-portal="mobile"] .leavePhoneStats>div{padding:15px;min-width:0}
body[data-portal="mobile"] .leavePhoneStats strong{font-size:clamp(22px,5vw,28px)}
body[data-portal="mobile"] .leavePhoneList{min-width:0}
body[data-portal="mobile"] .leaveItem{padding:14px;min-width:0}
body[data-portal="mobile"] .leaveItemTop{gap:9px}
body[data-portal="mobile"] .leaveItemBadge{width:36px;height:36px;min-width:36px}
body[data-portal="mobile"] .leaveItemInfo strong{font-size:14px}
body[data-portal="mobile"] .leaveItemDetails{padding:9px 0 10px 0;margin:0}
body[data-portal="mobile"] .leaveItemFoot{margin:0;padding-top:10px;gap:9px}
body[data-portal="mobile"] .modalOverlay{padding:0;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;z-index:100}
body[data-portal="mobile"] .modalOverlay .dialog{width:100%;max-width:680px;max-height:min(93dvh,950px);overflow-y:auto;overscroll-behavior:contain;padding:22px clamp(16px,4vw,26px) calc(24px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;box-shadow:0 -20px 60px #0e213d35}
body[data-portal="mobile"] .modalOverlay .dialog header{position:sticky;top:-22px;z-index:2;background:#fff;margin:-22px calc(-1 * clamp(16px,4vw,26px)) 18px;padding:19px clamp(16px,4vw,26px) 15px;border-bottom:1px solid #ebeff5;border-radius:24px 24px 0 0}
body[data-portal="mobile"] .modalOverlay .dialog header h2{font-size:19px;line-height:1.3}
body[data-portal="mobile"] .modalOverlay .dialog input,body[data-portal="mobile"] .modalOverlay .dialog select,body[data-portal="mobile"] .modalOverlay .dialog textarea{font-size:16px;min-height:48px}
body[data-portal="mobile"] .modalOverlay .dialog textarea{min-height:96px}
body[data-portal="mobile"] .modalOverlay .dialog .btn{min-height:48px}
body[data-portal="mobile"] .modalOverlay .dialog .leaveDateGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-portal="mobile"] .modalOverlay .dialog .leaveFormActions{display:flex;flex-direction:column-reverse}
body[data-portal="mobile"] .modalOverlay .dialog .leaveFormActions>.btn{width:100%}
body[data-portal="mobile"] .scanner video{max-height:65dvh;object-fit:cover}
body[data-portal="mobile"] .installBanner{margin:10px auto;border-radius:14px;max-width:700px;gap:8px;align-items:center}
@media (max-width:375px){
 body[data-portal="mobile"] .mobileProgressCard{padding:14px 12px;min-height:194px}
 body[data-portal="mobile"] .mobileProgressCard>span{font-size:11px}
 body[data-portal="mobile"] .mobileProgressCard>strong{font-size:23px}
 body[data-portal="mobile"] .mobileTabs button{font-size:9px}
 body[data-portal="mobile"] .mobileTabs button.scan{flex-basis:55px;min-height:63px}
 body[data-portal="mobile"] .mobileScheduleDay{flex-wrap:wrap}
 body[data-portal="mobile"] .mobileScheduleHours{margin-left:60px;margin-top:-7px}
}
@media (max-width:335px){
 body[data-portal="mobile"] .mobileGreeting h1{font-size:23px}
 body[data-portal="mobile"] .mobileProgressGrid{grid-template-columns:1fr}
 body[data-portal="mobile"] .mobileProgressCard{min-height:166px}
 body[data-portal="mobile"] .mobileTabs button{font-size:9px;gap:4px}
 body[data-portal="mobile"] .mobileTabs button.scan{flex-basis:51px}
 body[data-portal="mobile"] .mobileTabs button .ico svg{width:20px;height:20px}
 body[data-portal="mobile"] .mobileHeroTop{flex-wrap:wrap}
 body[data-portal="mobile"] .mobileSummaryBar{grid-template-columns:1fr 1fr auto;padding:12px}
 body[data-portal="mobile"] .modalOverlay .dialog .leaveDateGrid{grid-template-columns:1fr}
}
@media (min-width:721px){
 body[data-portal="mobile"] .mobileMain{padding-left:22px;padding-right:22px}
 body[data-portal="mobile"] .mobileProgressGrid{gap:15px}
}
@media (prefers-reduced-motion:reduce){body[data-portal="mobile"] *,body[data-portal="mobile"] *::before,body[data-portal="mobile"] *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* TimeKeeper HR v25 — mobile QR scanner cleanup */
body[data-portal="mobile"] .modalOverlay .dialog.scanDialog{padding-bottom:calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:0;min-height:min(78dvh,760px)}
body[data-portal="mobile"] .modalOverlay .dialog.scanDialog header{margin-bottom:12px}
body[data-portal="mobile"] .scanSheet{display:grid;grid-template-rows:auto 1fr;gap:12px;min-height:min(68dvh,620px)}
body[data-portal="mobile"] .scanLead{margin:0;color:#7588a4;font-size:12px;line-height:1.45}
body[data-portal="mobile"] .scanStage{position:relative;min-height:min(58dvh,520px);border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#0e2238,#182f49);box-shadow:0 18px 40px rgba(14,33,61,.16)}
body[data-portal="mobile"] .scanStage::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.08);border-radius:24px;pointer-events:none}
body[data-portal="mobile"] .scanStage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0f2236}
body[data-portal="mobile"] .scanStageOverlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:16px;pointer-events:none;background:linear-gradient(180deg,rgba(7,19,33,.18) 0%,rgba(7,19,33,.04) 38%,rgba(7,19,33,.28) 100%)}
body[data-portal="mobile"] .scanBadge{align-self:flex-start;max-width:80%;padding:9px 12px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 24px rgba(0,0,0,.12)}
body[data-portal="mobile"] .scanBadge.waiting{background:rgba(255,255,255,.86);color:#27476c}
body[data-portal="mobile"] .scanBadge.ready{background:rgba(15,33,57,.56);color:#eef5ff;border:1px solid rgba(255,255,255,.16)}
body[data-portal="mobile"] .scanBadge.success{background:rgba(22,156,115,.9);color:#fff}
body[data-portal="mobile"] .scanBadge.error{background:rgba(202,74,74,.92);color:#fff}
body[data-portal="mobile"] .scanTarget{position:relative;width:min(74vw,290px);height:min(74vw,290px);margin:auto;border-radius:26px;box-shadow:inset 0 0 0 200vmax rgba(7,18,31,.24);background:rgba(255,255,255,.03)}
body[data-portal="mobile"] .scanTarget::before{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.22);border-radius:26px}
body[data-portal="mobile"] .scanTargetCenter{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:8px 12px;border-radius:999px;background:rgba(11,25,43,.52);color:#fff;font-size:11px;font-weight:700;line-height:1.2;white-space:nowrap;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body[data-portal="mobile"] .scanCorner{position:absolute;width:34px;height:34px;border-color:#fff;border-style:solid}
body[data-portal="mobile"] .scanCorner.tl{top:12px;left:12px;border-width:4px 0 0 4px;border-top-left-radius:12px}
body[data-portal="mobile"] .scanCorner.tr{top:12px;right:12px;border-width:4px 4px 0 0;border-top-right-radius:12px}
body[data-portal="mobile"] .scanCorner.bl{bottom:12px;left:12px;border-width:0 0 4px 4px;border-bottom-left-radius:12px}
body[data-portal="mobile"] .scanCorner.br{bottom:12px;right:12px;border-width:0 4px 4px 0;border-bottom-right-radius:12px}
body[data-portal="mobile"] .scanLine{position:absolute;left:18px;right:18px;top:50%;height:2px;background:linear-gradient(90deg,rgba(60,136,255,0),#7db2ff,#ffffff,#7db2ff,rgba(60,136,255,0));box-shadow:0 0 18px rgba(125,178,255,.8);animation:scanPulse 2.2s ease-in-out infinite}
body[data-portal="mobile"] .scanErrorCard,body[data-portal="mobile"] .scanResult{display:grid;justify-items:center;text-align:center;gap:10px;padding:10px 2px 4px}
body[data-portal="mobile"] .scanErrorIcon,body[data-portal="mobile"] .scanResultIcon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:#e8f1ff;color:#2e68d2;font-size:28px;font-weight:900}
body[data-portal="mobile"] .scanResultIcon.warn{background:#fff4db;color:#bd7a05}
body[data-portal="mobile"] .scanErrorCard h3{margin:0;font-size:18px;color:#183552}
body[data-portal="mobile"] .scanErrorCard p,body[data-portal="mobile"] .scanResult p{margin:0;color:#667d99;line-height:1.5}
body[data-portal="mobile"] .scanErrorActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:6px}
@keyframes scanPulse{0%{transform:translateY(-96px);opacity:.9}50%{transform:translateY(0);opacity:1}100%{transform:translateY(96px);opacity:.9}}
@media (max-width:420px){
 body[data-portal="mobile"] .scanSheet{min-height:min(70dvh,640px)}
 body[data-portal="mobile"] .scanStage{min-height:min(56dvh,470px)}
 body[data-portal="mobile"] .scanTarget{width:min(77vw,274px);height:min(77vw,274px)}
 body[data-portal="mobile"] .scanTargetCenter{white-space:normal;text-align:center;max-width:74%}
}
@media (max-width:360px){
 body[data-portal="mobile"] .scanStageOverlay{padding:12px}
 body[data-portal="mobile"] .scanBadge{font-size:11px;padding:8px 10px;max-width:86%}
 body[data-portal="mobile"] .scanTarget{width:min(80vw,250px);height:min(80vw,250px)}
 body[data-portal="mobile"] .scanCorner{width:28px;height:28px}
 body[data-portal="mobile"] .scanTargetCenter{font-size:10px;bottom:14px}
}

/* TimeKeeper HR v26 — scanner top focus + force no-scroll modal */
body[data-portal="mobile"] .modalOverlay .dialog.scanDialog{max-height:min(88dvh,860px)!important;overflow:hidden!important;padding:18px 14px calc(14px + env(safe-area-inset-bottom))!important;border-radius:26px 26px 0 0!important;display:flex;flex-direction:column}
body[data-portal="mobile"] .modalOverlay .dialog.scanDialog header{position:relative!important;top:auto!important;margin:0 0 12px!important;padding:0 6px 0 2px!important;border:0!important;border-radius:0!important;background:transparent!important;display:flex;align-items:center}
body[data-portal="mobile"] .modalOverlay .dialog.scanDialog header h2{font-size:17px!important;font-weight:800!important;color:#173656}
body[data-portal="mobile"] .scanSheetTop{display:block;min-height:auto!important}
body[data-portal="mobile"] .scanStageTop{min-height:min(72dvh,640px)!important;height:min(72dvh,640px);border-radius:28px!important;background:#10263d;box-shadow:0 24px 54px rgba(10,31,53,.22)!important;overflow:hidden;position:relative}
body[data-portal="mobile"] .scanStageTop video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0f2236}
body[data-portal="mobile"] .scanStageOverlayTop{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:14px;background:linear-gradient(180deg,rgba(10,24,40,.18) 0%,rgba(10,24,40,.04) 28%,rgba(10,24,40,.08) 55%,rgba(10,24,40,.34) 100%)}
body[data-portal="mobile"] .scanStageHead{display:flex;justify-content:flex-start;align-items:center}
body[data-portal="mobile"] .scanBadge{align-self:flex-start;max-width:88%;padding:10px 13px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 24px rgba(0,0,0,.12)}
body[data-portal="mobile"] .scanBadge.waiting{background:rgba(255,255,255,.9);color:#26486e}
body[data-portal="mobile"] .scanBadge.ready{background:rgba(16,37,62,.66);color:#eef5ff;border:1px solid rgba(255,255,255,.16)}
body[data-portal="mobile"] .scanBadge.success{background:rgba(22,156,115,.92);color:#fff}
body[data-portal="mobile"] .scanTargetTop{position:relative;width:min(76vw,288px);height:min(76vw,288px);justify-self:center;align-self:start;margin-top:clamp(10px,8vh,64px);border-radius:28px;box-shadow:inset 0 0 0 200vmax rgba(6,16,29,.28);background:rgba(255,255,255,.03)}
body[data-portal="mobile"] .scanTargetTop::before{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.26);border-radius:28px}
body[data-portal="mobile"] .scanCorner{position:absolute;width:36px;height:36px;border-color:#fff;border-style:solid;filter:drop-shadow(0 3px 12px rgba(0,0,0,.18))}
body[data-portal="mobile"] .scanCorner.tl{top:12px;left:12px;border-width:4px 0 0 4px;border-top-left-radius:14px}
body[data-portal="mobile"] .scanCorner.tr{top:12px;right:12px;border-width:4px 4px 0 0;border-top-right-radius:14px}
body[data-portal="mobile"] .scanCorner.bl{bottom:12px;left:12px;border-width:0 0 4px 4px;border-bottom-left-radius:14px}
body[data-portal="mobile"] .scanCorner.br{bottom:12px;right:12px;border-width:0 4px 4px 0;border-bottom-right-radius:14px}
body[data-portal="mobile"] .scanLine{position:absolute;left:18px;right:18px;top:50%;height:2px;background:linear-gradient(90deg,rgba(60,136,255,0),#7db2ff,#ffffff,#7db2ff,rgba(60,136,255,0));box-shadow:0 0 18px rgba(125,178,255,.8);animation:scanPulseTop 2.35s ease-in-out infinite}
body[data-portal="mobile"] .scanBottomDock{align-self:end}
body[data-portal="mobile"] .scanHelperCard{padding:12px 14px;border-radius:18px;background:rgba(12,27,46,.68);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 14px 28px rgba(0,0,0,.14);display:grid;gap:4px}
body[data-portal="mobile"] .scanHelperCard strong{font-size:12px;letter-spacing:.02em}
body[data-portal="mobile"] .scanHelperCard span{font-size:12px;line-height:1.35;color:rgba(255,255,255,.88)}
@keyframes scanPulseTop{0%{transform:translateY(-106px);opacity:.92}50%{transform:translateY(0);opacity:1}100%{transform:translateY(106px);opacity:.92}}
@media (max-width:420px){
 body[data-portal="mobile"] .scanStageTop{height:min(70dvh,600px);min-height:min(70dvh,600px)!important}
 body[data-portal="mobile"] .scanTargetTop{width:min(78vw,276px);height:min(78vw,276px);margin-top:clamp(8px,7vh,48px)}
}
@media (max-width:360px){
 body[data-portal="mobile"] .modalOverlay .dialog.scanDialog{padding:16px 12px calc(12px + env(safe-area-inset-bottom))!important}
 body[data-portal="mobile"] .scanStageOverlayTop{padding:12px}
 body[data-portal="mobile"] .scanBadge{font-size:11px;padding:9px 11px}
 body[data-portal="mobile"] .scanTargetTop{width:min(80vw,246px);height:min(80vw,246px)}
 body[data-portal="mobile"] .scanCorner{width:30px;height:30px}
 body[data-portal="mobile"] .scanHelperCard{padding:10px 12px}
}