@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
:root{--navy:#102f50;--muted:#607b92;--line:#d7e7f3;--blue:#086595;--teal:#06afc1;--paper:#fff;--soft:#f5faff}
*{box-sizing:border-box}html{min-height:100%;background:#f1f8fd}body{margin:0;min-height:100vh;color:var(--navy);font-family:Cairo,Tahoma,sans-serif;line-height:1.8;background:radial-gradient(ellipse at 88% 23%,#ddf4fc 0,transparent 44%),radial-gradient(ellipse at 6% 57%,#dcecf8 0,transparent 42%),linear-gradient(135deg,#fbfdff 0%,#eef8ff 58%,#fafdff 100%)}[hidden]{display:none!important}
.page-shell{max-width:1920px;margin:auto;min-height:100vh;display:flex;flex-direction:column}.topbar{min-height:105px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px clamp(20px,5.5vw,92px);background:#ffffffb8;border-bottom:1px solid #d5e9f4;backdrop-filter:blur(12px)}.topbar-brand{display:flex;align-items:center;gap:15px}.topbar-brand img{width:72px;height:72px;object-fit:contain}.brand-copy{display:flex;flex-direction:column;gap:3px}.brand-copy b{font-size:clamp(17px,1.45vw,23px);font-weight:800}.brand-copy small{font-size:13px;color:var(--muted)}.shell{width:100%;max-width:1160px;margin:auto;padding:0 20px 50px;flex:1}.hero{text-align:center;padding:37px 12px 24px}.eyebrow{color:#0089aa;font-size:11px;font-weight:800;letter-spacing:2px}.hero h1{font-size:clamp(29px,3.2vw,43px);margin:8px 0 5px;font-weight:800;color:#082b50}.hero p{color:#59748c;font-size:15px;margin:0}.card{background:#fffffff2;border:1px solid var(--line);border-radius:21px;box-shadow:0 14px 35px #0d416a10;padding:25px 29px;margin:0 0 18px}.narrow{max-width:640px;margin:13px auto 35px}.section-heading{display:flex;gap:15px;align-items:center;margin-bottom:19px}.heading-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;flex-shrink:0;background:#e2f5fa;color:#0787a6;font-size:28px;font-weight:800}.section-heading h2{margin:0;font-size:21px;font-weight:800}.section-heading p{margin:0;font-size:13px}.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.sectionhead h2{margin:0}h2{font-size:21px;line-height:1.5;margin:0 0 13px}h3{font-size:17px;margin:0 0 9px}p{margin:5px 0 14px;color:var(--muted)}label{display:block;font-weight:700;color:#294962;margin:9px 0}input:not([type=checkbox]):not([type=radio]){display:block;width:100%;min-height:58px;background:#fcfeff;border:1.5px solid #bdd4e7;border-radius:13px;padding:12px 18px;color:#153b59;font:700 17px Cairo,Tahoma,sans-serif;outline:none;margin:9px 0 16px;direction:ltr;text-align:center}input:focus-visible,button:focus-visible,canvas:focus-visible{outline:3px solid #3ba3bb;outline-offset:2px}input:not([type=checkbox]):not([type=radio]):focus{border-color:#0a9dbb;box-shadow:0 0 0 4px #05a5be1c}button{min-height:49px;border:0;border-radius:13px;background:linear-gradient(110deg,var(--teal),var(--blue));color:#fff;padding:10px 22px;font:800 15px Cairo,Tahoma,sans-serif;cursor:pointer;box-shadow:0 8px 16px #0788a521;margin:5px 5px 5px 0}button:hover{filter:brightness(1.05)}button:disabled{opacity:.6;cursor:not-allowed}button.secondary{background:#fff;color:#136786;border:1px solid #b9d5e6;box-shadow:none}#message:not(:empty){max-width:1080px;margin:12px auto 19px;padding:13px 18px;border:1px solid #c8e6f1;border-radius:13px;background:#eaf8fc;color:#176d89}.error{color:#9c2834!important;background:#fff0f0!important;border-color:#f2ccca!important}.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.field{background:#f6fafd;border:1px solid #dfebf4;border-radius:13px;padding:14px;min-width:0}.field small{display:block;font-size:12px;color:#688098}.field strong{display:block;font-size:15px;overflow-wrap:anywhere}.consent-item{transition:transform .15s,border-color .15s}.consent-item:hover{transform:translateY(-2px);border-color:#84c7de}.consent-item h3{font-weight:800;color:#0b4f79}.sectiontitle{padding:12px 16px;background:#edf8fd;border:1px solid #d9ebf4;border-radius:12px;font-weight:800}.clause{padding:15px 6px;border-bottom:1px solid #e5edf1}.answers{display:flex;flex-wrap:wrap;gap:12px;margin:13px 0}.answers label{margin:0;padding:9px 14px;background:#f7fbfe;border:1px solid #dce9f2;border-radius:11px;font-weight:600;cursor:pointer}.answers input{accent-color:#079caf}.agree{display:flex;gap:10px;align-items:flex-start;margin:17px 0}.agree input{margin-top:9px;accent-color:#079caf}canvas{width:100%;height:auto;display:block;background:#fff;border:2px dashed #a2c4d8;border-radius:13px;touch-action:none}footer{text-align:center;color:#71879e;font-size:12px;padding:18px}#logout{white-space:nowrap}#signArea button,#otpPanel button{max-width:100%}
@media(max-width:700px){.topbar{padding:13px 16px;min-height:78px}.topbar-brand img{width:51px;height:51px}.brand-copy b{font-size:15px}.brand-copy small{font-size:10px}.shell{padding:0 13px 35px}.hero{padding:24px 6px 20px}.hero h1{font-size:29px}.hero p{font-size:12px}.card{border-radius:16px;padding:18px 16px;margin-bottom:13px}.row{grid-template-columns:1fr}.narrow{margin:8px auto 28px}.section-heading h2{font-size:18px}.section-heading p{font-size:11px}.heading-icon{width:45px;height:45px;font-size:24px}button{min-height:50px}.answers{gap:8px}.answers label{flex:1 1 125px;text-align:center}}
@media(max-width:420px){.brand-copy small{max-width:180px}.topbar-brand{gap:8px}.topbar-brand img{width:43px;height:43px}.topbar{gap:6px}.topbar #logout{padding:8px;font-size:11px}.hero h1{font-size:26px}#start,#loginVerify,#submit,#verifyOtp{width:100%;margin-inline:0}}
/* Medical leave portal-inspired mobile-first consent experience */
:root{--page:#eef2f7;--page2:#fafbfe;--card:#fff;--ink:#172033;--quiet:#667085;--border:#dbe2ec;--accent:#e9662e;--accent2:#f68b48;color-scheme:light}
:root[data-theme=dark]{--page:#111016;--page2:#19151e;--card:#211a27;--ink:#f8f5f9;--quiet:#bfb5c4;--border:#4b3d53;--accent:#f06a27;--accent2:#ff8548;color-scheme:dark}
html,body{background:var(--page);color:var(--ink)}body{background:radial-gradient(circle at 100% 0%,#16b3c718,transparent 36rem),radial-gradient(circle at 0 100%,#f06a2712,transparent 34rem),linear-gradient(145deg,var(--page),var(--page2))}
.topbar{background:var(--card);border-color:var(--border);padding:12px clamp(14px,4vw,56px);min-height:82px}.brand-copy b,.hero h1,.section-heading h2,.sectionhead h2,h2,h3{color:var(--ink)}.brand-copy small,.hero p,p,.field small,.sectionhead p{color:var(--quiet)}
.card{background:var(--card);border-color:var(--border);box-shadow:0 12px 35px #0000000b;border-radius:19px}button:not(.secondary):not(.tab){background:linear-gradient(120deg,var(--accent),var(--accent2));box-shadow:0 6px 14px #d9712820}button.secondary{background:var(--card);border-color:var(--border);color:var(--ink)}.heading-icon{background:#f06a271b;color:var(--accent)}label{color:var(--ink)}.field,.sectiontitle,.answers label{background:var(--page2);border-color:var(--border);color:var(--ink)}.field strong{color:var(--ink)}.top-actions{display:flex;align-items:center;gap:7px}.top-actions button{margin:0}.theme-toggle{min-width:43px;padding:8px}.shell{max-width:1050px}.narrow{max-width:490px}.hero{padding:26px 12px 25px}.eyebrow{color:var(--accent)}
.consent-tabs{display:flex;gap:9px;padding:5px;background:var(--card);border:1px solid var(--border);border-radius:16px;margin:0 0 17px}.consent-tabs .tab{flex:1;min-height:49px;margin:0;border:0;border-radius:12px;color:var(--quiet);background:transparent;box-shadow:none;font-size:14px;padding:8px}.consent-tabs .tab.active{background:var(--accent);color:#fff}.count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:99px;background:#80808024;color:inherit;margin-inline-start:5px}.consent-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.consent-item{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}.consent-card-title{display:flex;justify-content:space-between;align-items:start;gap:10px}.consent-card-title h3{margin:0;color:var(--ink)}.status-pill{font-size:11px;border-radius:99px;padding:4px 9px;white-space:nowrap;font-weight:800}.status-pill.success{color:#147548;background:#e7f7ed}.status-pill.waiting{color:#a76304;background:#fff3d8}.consent-meta{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--quiet)}.consent-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}.consent-actions button{margin:0;flex:1}.empty-state{grid-column:1/-1;text-align:center;padding:32px}
.consent-overlay{position:fixed;inset:0;background:#080c1699;z-index:50;padding:20px;overflow-y:auto;display:flex;align-items:flex-start;justify-content:center}.consent-dialog{background:var(--page);color:var(--ink);border-radius:22px;width:min(100%,940px);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;box-shadow:0 24px 80px #0005;overflow:hidden}.dialog-bar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;background:var(--card);border-bottom:1px solid var(--border)}.dialog-bar>div{display:flex;gap:7px}.dialog-bar button{margin:0;padding:7px 13px;min-height:42px}.dialog-content{overflow-y:auto;padding:17px 20px 25px;overscroll-behavior:contain}.dialog-content .card{margin-bottom:14px}.dialog-open{overflow:hidden}#doc .row{grid-template-columns:repeat(2,minmax(0,1fr))}#terms .clause{font-size:15px;line-height:2}#signature{height:200px;object-fit:contain}
.otp-component{position:relative;display:flex;flex-direction:column;margin:16px auto 20px;max-width:410px}.otp-boxes{display:flex;direction:ltr;justify-content:space-between;gap:7px;cursor:text;pointer-events:auto}.otp-square{flex:1;min-width:0;height:60px;display:grid;place-items:center;background:var(--card);border:1.8px solid var(--border);border-radius:12px;color:var(--ink);font:800 26px Cairo,Tahoma,sans-serif;transition:border .1s,box-shadow .1s}.otp-square.current{border-color:var(--accent);box-shadow:0 0 0 3px #ee74251b}.otp-component .otp-native{position:absolute;direction:ltr!important;top:36px;left:0!important;right:0!important;width:100%!important;height:60px!important;min-height:0!important;padding:0!important;margin:0!important;opacity:.015!important;background:transparent!important;border:0!important;color:transparent!important;z-index:1;cursor:text;caret-color:transparent}.otp-component:focus-within .otp-square.current{border-color:var(--accent);box-shadow:0 0 0 3px #ee742533}.otp-component label{margin-bottom:12px}#message{position:fixed;bottom:16px;left:50%;transform:translate(-50%,20px);z-index:100;opacity:0;pointer-events:none;max-width:min(90vw,600px);transition:opacity .2s,transform .2s}#message.toast-visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:700px){.topbar{min-height:70px}.consent-grid{grid-template-columns:1fr}.consent-overlay{padding:0}.consent-dialog{width:100%;height:100dvh;max-height:none;border-radius:0}.dialog-content{padding:13px;flex:1}.dialog-bar{padding:10px 13px}.dialog-bar strong{font-size:14px}.dialog-bar button{font-size:12px;padding:5px 8px}.consent-tabs .tab{font-size:12px;padding:8px 5px}.otp-square{height:53px;font-size:24px}.otp-component .otp-native{height:53px!important}.otp-component{max-width:100%}.hero{padding:18px 5px}.hero h1{font-size:27px}#doc .row{grid-template-columns:1fr}#signature{height:170px}}
@media(max-width:370px){.otp-boxes{gap:4px}.otp-square{height:47px;font-size:21px}.otp-component .otp-native{height:47px!important}.brand-copy small{font-size:9px}}
@media print{.topbar,.hero,footer,#message,#login,#loginOtp,#list,.dialog-bar,#signArea,#otpPanel,.consent-actions{display:none!important}html,body,.page-shell,.shell{background:#fff!important;padding:0!important;margin:0!important;max-width:none!important;color:#000!important}.consent-overlay{position:static!important;background:#fff!important;display:block!important;padding:0!important;overflow:visible!important}.consent-dialog{display:block!important;max-height:none!important;width:100%!important;box-shadow:none!important;overflow:visible!important;border-radius:0!important}.dialog-content{overflow:visible!important;padding:0!important}.card{border:0!important;box-shadow:none!important;margin:0 0 12px!important;padding:5px!important;break-inside:avoid}#terms .clause{break-inside:avoid}.field{border:1px solid #ddd!important;background:#fff!important}button{display:none!important}}

.approval-declaration{display:flex;align-items:flex-start;gap:12px;background:#edf8fd;border:1px solid #9ac9da;padding:16px;border-radius:14px;font-weight:800;font-size:16px;line-height:1.9}.approval-declaration input{width:22px;height:22px;flex-shrink:0;accent-color:#078ba2}.otp-modal:not([hidden]){position:fixed;inset:0;z-index:110;background:#071b35ac;display:grid;place-items:center;padding:14px}.otp-modal-card{width:min(100%,480px);background:var(--card,#fff);color:var(--ink,#123);padding:26px;border-radius:20px;box-shadow:0 20px 80px #0005;max-height:92dvh;overflow:auto}.otp-modal-card #closeOtpModal{float:left}.otp-modal-card #otpPanel{box-shadow:none;border:0;padding:8px 0;margin:0}.saved-signature{border:1px solid #ccdce7;border-radius:12px;padding:14px;margin-top:16px;break-inside:avoid}.saved-signature img{display:block;max-width:320px;width:100%;max-height:130px;object-fit:contain;background:white}.saved-signature p{color:inherit;font-weight:700}.answers input:disabled{opacity:1;accent-color:#078ba2}@media print{.otp-modal{display:none!important}.saved-signature{display:block!important}}

.signature-hint{font-size:14px;line-height:1.8;color:var(--muted);margin:12px 0}.image-preview:not([hidden]){position:fixed;inset:0;z-index:200;background:#061729bb;display:grid;place-items:center;padding:15px}.image-preview-panel{width:min(96vw,750px);padding:16px;background:#fff;border-radius:18px}.image-preview-panel img{display:block;max-height:75dvh;max-width:100%;width:100%;object-fit:contain}.saved-signature button{margin-top:8px}@media print{#imagePreview,.saved-signature button{display:none!important}}

/* OTP login resend feedback */
.resend-info{margin:10px 0 8px;color:#52677f;text-align:center;font-size:13px;min-height:1.5em}.resend-info:empty{display:none}

/* QeConsentPortal — compact login OTP layout (UI only) */
#loginOtp{padding:26px 29px 25px}
#loginOtp>.section-heading{margin-bottom:12px}
#loginOtp>.section-heading+p{margin:0 0 17px;font-size:14px;line-height:1.8}
#loginOtp .otp-component{margin:0 auto 16px;max-width:365px}
#loginOtp .otp-component label{margin:0 0 10px;font-size:14px}
#loginOtp .otp-boxes{gap:8px}
#loginOtp .otp-square{height:54px;border-radius:11px;font-size:23px}
#loginOtp .otp-component .otp-native{top:34px;height:54px!important}
#loginOtp .login-otp-controls{display:flex;flex-direction:column;gap:12px;max-width:365px;margin:0 auto}
#loginOtp .otp-confirm{width:100%;margin:0;min-height:49px;border-radius:11px}
#loginOtp .otp-resend-status{display:flex;justify-content:center;align-items:center;gap:7px;min-height:26px;padding:0 6px}
#loginOtp .otp-clock{font-size:19px;line-height:1;color:var(--quiet)}
#loginOtp .resend-info{margin:0;min-height:0;font-size:12px;line-height:1.8;color:var(--quiet)}
#loginOtp .otp-resend-status:has(.resend-info:empty){display:none}
#loginOtp .otp-secondary-actions{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:9px}
#loginOtp .otp-secondary-actions button{margin:0;min-width:0;min-height:46px;padding:9px 10px;border-radius:11px;font-size:13px;box-shadow:none}
#loginOtp #resendLogin:disabled{opacity:.52;background:var(--page2);color:var(--quiet)}
#loginOtp .otp-back{font-weight:700}
@media(max-width:700px){#loginOtp{padding:21px 18px 22px}#loginOtp .otp-component,#loginOtp .login-otp-controls{max-width:365px}#loginOtp .otp-square{height:51px}#loginOtp .otp-component .otp-native{height:51px!important}}
@media(max-width:380px){#loginOtp{padding:19px 14px}#loginOtp .otp-boxes{gap:5px}#loginOtp .otp-square{height:46px;font-size:21px}#loginOtp .otp-component .otp-native{height:46px!important}#loginOtp .otp-secondary-actions button{font-size:12px}}

/* Consent UI v1: clickable cards and an in-page, scrollable print viewer. */
.consent-clickable{cursor:pointer;user-select:none}.consent-clickable:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 30px #0a385215}.consent-clickable:active{transform:translateY(0)}
.consent-clickable:focus-visible{outline:3px solid #319fda;outline-offset:3px}
#doc:not([hidden]) .dialog-content{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.print-viewer-overlay:not([hidden]){position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:#081b35bb;padding:16px}
.print-viewer-panel{width:min(1120px,100%);height:min(94dvh,1100px);display:flex;flex-direction:column;min-height:0;background:#edf2f8;border-radius:16px;overflow:hidden;box-shadow:0 25px 85px #0005}
.print-viewer-toolbar{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;background:#fff;border-bottom:1px solid #d8e5f0}
.print-viewer-toolbar strong{color:#174362;white-space:nowrap}.print-viewer-actions{display:flex;flex-wrap:wrap;gap:5px}.print-viewer-actions button{min-height:37px;padding:5px 12px;margin:0;box-shadow:none;font-size:12px}
#printViewerFrame{width:100%;flex:1 1 auto;min-height:0;display:block;border:0;background:#fff}
body.print-viewer-open{overflow:hidden}
@media(max-width:700px){.print-viewer-overlay:not([hidden]){padding:0}.print-viewer-panel{width:100%;height:100dvh;max-height:none;border-radius:0}.print-viewer-toolbar{align-items:flex-start;flex-direction:column;padding:8px 12px}.print-viewer-toolbar strong{font-size:13px}.print-viewer-actions{width:100%;justify-content:space-between}.print-viewer-actions button{font-size:11px;flex:1;padding:5px 6px}}
@media print{#printViewer{display:none!important}}

.print-viewer-error:not([hidden]){padding:12px 16px;background:#fff1f0;border-bottom:1px solid #ffccc7;color:#a61d24;font-weight:600;text-align:center}

/* v3: compact OTP explanation, one message inside the verification card. */
#loginOtp .login-otp-hint:not([hidden]){margin:0 auto 14px;max-width:365px;padding:9px 12px;border:1px solid #cde9f1;border-radius:10px;background:#effaff;color:#28617b;font:600 12px/1.85 Cairo,Tahoma,sans-serif;text-align:center}
/* Reading toolbar remains attached; the iframe owns the document scroll. */
.print-viewer-toolbar,.print-viewer-actions button{font-family:Cairo,Tahoma,sans-serif}
.print-viewer-notice:not([hidden]){background:#eaf6fc;border-bottom:1px solid #cce5f1;padding:9px 15px;font:600 12px/1.75 Cairo,Tahoma,sans-serif;color:#23617c;text-align:center}
.print-viewer-actions button:disabled{cursor:wait;opacity:.55}
#printViewerFrame{overscroll-behavior:contain}
@media(max-width:700px){
 .print-viewer-panel{height:100dvh;min-height:0}
 .print-viewer-toolbar{gap:9px;padding:12px 12px 9px}
 .print-viewer-toolbar strong{font-size:15px;line-height:1.6}
 .print-viewer-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;direction:rtl}
 .print-viewer-actions button{font-size:12px;min-width:0;min-height:43px;white-space:nowrap;padding:7px 3px}
 .print-viewer-notice:not([hidden]){font-size:12px;padding:8px 11px}
}