.login-page{background:white}.login-layout{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-story{background:linear-gradient(135deg,#f2eef9,#f8f6fc 65%,#f3eff9);padding:44px 56px 30px;display:flex;flex-direction:column;overflow:hidden;position:relative;min-height:820px}.login-story>.brand{font-size:38px}.story-content{margin:auto 0;padding:55px 0 35px;position:relative;z-index:1}.story-label{display:flex;align-items:center;gap:8px;font-size:8px;font-weight:600;letter-spacing:1.4px;color:#a393b9;margin-bottom:25px}.story-label>.story-dot{height:5px;width:5px;border-radius:50%;background:#b39bd3}.story-content h2{font-size:clamp(29px,3.25vw,47px);line-height:1.25;letter-spacing:-1.8px;font-weight:550;color:#332c46;margin:0 0 23px}.story-content h2 em{font-style:normal;color:#a58cc9}.story-content>p{font-size:12px;color:#a099ad;line-height:1.9}.loyalty-illustration{position:relative;max-width:460px;margin:58px 0 20px;padding:30px 0 30px 18px}.illustration-orbit{position:absolute;inset:-45px -20px -20px;border:1px solid #dfd6ee;border-radius:50%;transform:rotate(-20deg)}.illustration-orbit:after{content:'';position:absolute;inset:25px;border:1px dashed #dfd6ee;border-radius:50%}.sample-loyalty-card{background:linear-gradient(130deg,#fff,#fdfbff);border:1px solid #e8e0f2;border-radius:18px;padding:25px;box-shadow:0 20px 50px #70568e13;transform:rotate(-6deg);position:relative}.sample-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.mini-wordmark{font-size:26px;font-weight:750;letter-spacing:-2px}.sample-card-header>span:last-child{font-size:7px;letter-spacing:1.5px;color:#b7a8ca}.sample-card-title{font-size:13px;color:#8a759f;margin-bottom:18px}.sample-stamps{display:flex;justify-content:space-between;gap:10px}.sample-stamps span{display:grid;place-items:center;border-radius:50%;height:40px;width:40px;background:#ece5f7;color:#a38abb;font-weight:700;font-size:24px}.sample-stamps .unfilled{border:1px dashed #d9cce9;background:white;color:#d1c0e2;font-size:21px}.sample-card-footer{display:flex;justify-content:space-between;align-items:center;font-size:7px;color:#b1a4c0;border-top:1px solid #f0eaf7;margin-top:24px;padding-top:15px}.floating-note,.floating-tag{position:absolute;z-index:2;font-size:8px;background:white;border:1px solid #e9e4f1;box-shadow:0 6px 20px #6045770a;border-radius:9px;padding:11px 14px;color:#a18caf}.floating-note{right:-10px;top:-10px;transform:rotate(4deg)}.floating-note .note-symbol{color:#ad92cc;margin-right:6px;font-size:17px}.floating-tag{bottom:0;right:0;transform:rotate(3deg)}.floating-tag .note-symbol{display:inline-grid;place-items:center;background:#eaf4ee;border-radius:50%;width:19px;height:19px;margin-right:5px;color:#90b49e}.story-footer{display:flex;justify-content:space-between;gap:15px;font-size:8px;color:#b4a9c4;padding-top:25px}.login-main{display:flex;flex-direction:column;padding:35px 50px 27px;min-width:0}.login-top{display:flex;justify-content:flex-end;align-items:center}.mobile-brand{display:none}.login-form-wrap{width:100%;max-width:345px;margin:auto;padding:70px 0}.login-form-wrap h1{font-size:31px;font-weight:600;letter-spacing:-1px;margin:12px 0}.login-subtitle{font-size:12px;color:#9499a7;line-height:1.7;margin-bottom:32px}.role-tabs{display:flex;background:#f6f6f9;border:1px solid #efeff4;border-radius:9px;padding:4px;margin-bottom:31px;gap:3px}.role-tabs button{flex:1;border:0;background:none;padding:9px 5px;border-radius:6px;font-size:11px;color:#9a9daa}.role-tabs button.is-active{background:white;color:#7759a8;box-shadow:0 2px 5px #26233b0a;font-weight:600}.login-form-wrap .field{margin-bottom:20px;font-size:11px;color:#72788a}.login-form-wrap .field input{height:45px;border-color:#e3e5ed;font-size:12px}.login-form-wrap input::placeholder{color:#b2b7c4}.login-submit{width:100%;justify-content:space-between;margin-top:9px;padding:12px 17px;font-size:12px;height:45px}.login-submit:disabled{opacity:.55}.password-wrap{position:relative;display:flex}.password-wrap input{padding-inline-end:45px}.password-wrap button{position:absolute;inset-inline-end:5px;top:5px;bottom:5px;background:transparent;border:0;width:34px;color:#a29bb1;font-size:16px;border-radius:6px}.login-help{display:flex;gap:10px;margin-top:27px;padding-top:23px;border-top:1px solid #f0f0f5;font-size:10px;line-height:1.9;color:#a4a7b4}.login-help>span{font-size:19px;color:#b6a9cd}.login-footer{text-align:center;font-size:9px;color:#b8bbc6;margin:0}.text-button{border:0;background:none;color:var(--purple);padding:0;font-size:11px;margin-bottom:16px}.otp-input{text-align:center;letter-spacing:8px}.portal-header{display:flex;justify-content:space-between;align-items:center;gap:15px;max-width:1240px;padding:26px 40px;margin:auto;border-bottom:1px solid var(--line)}.portal-header .brand{font-size:32px}.portal-main{max-width:1160px;margin:auto;padding:42px 40px 45px}.portal-main h1{font-size:31px;letter-spacing:-1px;line-height:1.3;margin-bottom:8px}.portal-main h2{font-size:19px;font-weight:600;letter-spacing:-.4px}.portal-footer{display:flex;justify-content:center;align-items:center;gap:13px;padding:25px;font-size:19px;font-weight:700;color:#c1b5d3;letter-spacing:-1px}.portal-footer span{font-size:9px;font-weight:400;color:#aeb0bd;letter-spacing:0}.wallet-grid{display:grid;grid-template-columns:390px minmax(0,1fr);gap:35px;align-items:start}.wallet-pass{border:1px solid #e4daef;border-radius:20px;background:linear-gradient(145deg,#f1ebfa,#faf8ff 70%);padding:28px 32px;text-align:center;box-shadow:0 8px 30px #68527905}.wallet-pass-head{display:flex;align-items:center;justify-content:space-between;text-align:left;color:#9982b7;margin-bottom:32px}.wallet-pass-head>span:last-child{font-size:7px;letter-spacing:1.5px}.wallet-pass h2{font-size:21px;line-height:1.5;color:#76628e;margin:0 0 10px}.wallet-pass>p{font-size:11px;line-height:1.8;color:#a194b1;margin:0 auto 25px;max-width:260px}.qr-frame{background:white;border:1px solid #e8e1f0;padding:20px;border-radius:16px;box-shadow:0 5px 15px #77628c0a;width:max-content;max-width:100%;margin:0 auto 20px}#qrcode{width:220px;height:220px;display:grid;place-items:center;font-size:12px;line-height:1.6;color:#8a739f}#qrcode img,#qrcode canvas{max-width:100%;height:auto}.qr-progress{margin-top:16px;height:4px;background:#f0edf6;border-radius:8px;overflow:hidden}#timer-bar{height:100%;border-radius:8px;transition:width 1s linear;background:#b39cda}#timer-bar.bg-red-500{background:#d49898}.wallet-pass .pass-safety{font-size:9px;max-width:240px;margin-bottom:18px}.wallet-pass>.btn{font-size:10px;border-color:#e1d8ed;color:#9b84b4;background:#ffffffb0}.pass-bottom{display:flex;align-items:center;justify-content:center;gap:9px;padding-top:24px;margin-top:24px;border-top:1px solid #e7dff0;color:#b3a2c7;font-size:9px}.pass-bottom>span:first-child{font-size:20px}.wallet-history{padding-top:10px}.wallet-history .section-heading{margin-bottom:25px}.wallet-history h2{font-size:19px}.wallet-business{border:1px solid var(--line);border-radius:13px;padding:25px;background:#fff;margin-bottom:17px}.wallet-business .section-heading{margin-bottom:23px}.wallet-business h3{font-size:13px;font-weight:550;margin:0 0 3px}.wallet-business small{font-size:10px;color:#9e9bad}.wallet-business .section-heading>span{color:#baabca;font-size:21px}.wallet-balance{display:flex;align-items:baseline;gap:7px}.wallet-balance strong{font-size:28px;font-weight:550;letter-spacing:-1px}.wallet-balance>span{font-size:10px;color:#9696a6}.wallet-balance small{margin-inline-start:auto;font-size:9px}.wallet-track{background:#f2eef7;height:5px;border-radius:7px;overflow:hidden;margin-top:17px}.wallet-track>span{display:block;height:100%;background:#b29bd4;border-radius:7px}.wallet-business:nth-child(3n) .avatar{background:#eff4ed;color:#96a987}.wallet-business:nth-child(3n) .wallet-track>span{background:#b4c4a9}.wallet-caption{font-size:10px;line-height:1.8;color:#aaabb7;margin-top:25px}.wallet-empty{background:white;border:1px dashed #e1dbea;border-radius:14px;padding:50px 30px;text-align:center}.wallet-empty>span{font-size:45px;color:#b39acb}.wallet-empty h3{font-size:16px;margin:16px 0 10px}.wallet-empty p{font-size:12px;line-height:1.9;color:#9a99a9;max-width:300px;margin:auto}.scanner-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr);gap:26px;align-items:start}.scanner-panel{padding:28px}.scanner-panel h2{font-size:19px;line-height:1.5}.scanner-panel .muted{font-size:11px}.scanner-symbol{color:#c4b4d5;font-size:32px}.scanner-footnote{font-size:10px;color:#a5a6b5;text-align:center;margin:20px auto 0;max-width:320px;line-height:1.8}#reader{width:100%;overflow:hidden;border:1px solid #e7e1ee!important;border-radius:13px;background:#fcfbff;min-height:300px;padding:15px;font-size:12px;color:#8f819e}#reader img{opacity:.4;max-width:70px}#reader video{border-radius:10px;width:100%!important}#reader button{font-family:inherit;background:#fff;border:1px solid #dcd3e8;border-radius:7px;color:#8c719f;padding:9px 12px;font-size:10px;margin-top:10px}#reader select{border:1px solid #e0d7eb;border-radius:7px;padding:7px;font-size:11px;max-width:100%;background:white}#reader a{color:#a087b8;text-decoration:underline;font-size:10px}#reader__scan_region{min-height:190px;display:grid;place-items:center}#reader__dashboard_section_csr span{color:#9b89ac!important}#scan-result{margin:18px 0 0;overflow-wrap:anywhere}.program-card{position:relative;background:linear-gradient(145deg,#eee7f8,#faf8fd);border:1px solid #e5dcf0;border-radius:13px;padding:27px;margin-bottom:27px;overflow:hidden}.program-card .eyebrow{font-size:8px;letter-spacing:1.4px;margin-bottom:40px}.program-symbol{position:absolute;right:25px;top:30px;color:#d0bfe0;font-size:40px}.program-card h2{font-size:21px;color:#897099;line-height:1.45}.program-goal{display:flex;align-items:center;gap:10px;margin:22px 0}.program-goal strong{font-size:43px;font-weight:550;letter-spacing:-2px;color:#ac8fc4}.program-goal span{font-size:10px;color:#b29ac2;max-width:85px;line-height:1.8}.program-reward{border-top:1px solid #e4daee;padding-top:20px}.program-reward>span{font-size:7px;letter-spacing:1.6px;color:#bca7ce}.program-reward p{font-size:12px;color:#96809f;line-height:1.8;margin:8px 0 0}.scanner-guide{padding:0 8px}.scanner-guide h3{font-size:12px;font-weight:550;margin-bottom:22px}.scanner-guide ol{list-style:none;margin:0;padding:0}.scanner-guide li{display:flex;gap:14px;margin-bottom:22px}.scanner-guide li>span{height:25px;width:25px;display:grid;place-items:center;font-size:9px;border:1px solid #e6e0ee;border-radius:7px;color:#bba9cc;background:white}.scanner-guide strong{font-size:11px;font-weight:500;color:#898095}.scanner-guide p{font-size:10px;color:#aaa4b3;margin:5px 0 0}
[dir=rtl] .story-content h2{letter-spacing:0}[dir=rtl] .wallet-pass-head{text-align:right}
@media(min-width:1600px){.login-story{padding-inline:90px}.login-main{padding-inline:90px}.loyalty-illustration{margin-top:75px}}
@media(max-width:1000px){.login-story{padding:35px;min-height:780px}.story-content h2{font-size:33px}.loyalty-illustration{padding-inline-start:0;margin-top:40px}.sample-loyalty-card{padding:20px}.sample-stamps span{height:33px;width:33px;font-size:21px}.floating-note{right:-10px;font-size:7px}.login-main{padding:30px}.story-footer{flex-direction:column;gap:6px}.portal-main{padding:32px 25px}.portal-header{padding:22px 25px}.wallet-grid{grid-template-columns:350px minmax(0,1fr);gap:25px}.wallet-pass{padding:25px}.scanner-grid{grid-template-columns:minmax(0,1.4fr) minmax(245px,1fr)}}
@media(max-width:760px){.login-layout{display:block}.login-story{display:none}.login-main{min-height:100dvh;padding:24px}.login-top{justify-content:space-between}.mobile-brand{display:block}.login-form-wrap{padding:55px 0;max-width:360px}.login-footer{font-size:8px}.login-form-wrap h1{font-size:29px}.portal-main{padding:28px 20px}.portal-header{padding:20px}.portal-header .brand{font-size:28px}.portal-header .brand-symbol{width:31px;height:31px;font-size:24px}.portal-header .heading-actions{width:auto;gap:6px}.portal-header .badge{display:none}.portal-main h1{font-size:27px}.portal-main .page-heading{align-items:start;flex-direction:column}.wallet-grid,.scanner-grid{grid-template-columns:1fr;gap:28px}.wallet-pass{max-width:430px;width:100%;margin:auto}.wallet-history{padding:0}.wallet-pass h2{max-width:270px;margin-inline:auto}.wallet-business{padding:23px}.scanner-panel{padding:22px;margin-bottom:0}.program-card{padding:25px}.program-card .eyebrow{margin-bottom:25px}.program-goal{margin:15px 0}.scanner-guide{margin-top:25px}.portal-footer{padding-top:0}.qr-frame{padding:18px}.portal-header .btn{font-size:9px;padding:7px 9px}.wallet-pass .pass-safety{color:#8e7c9f}}

.login-subtitle,.login-form-wrap .field,.login-help,.login-footer,.role-tabs button,.text-button,.wallet-caption,.wallet-business small,.wallet-balance>span,.wallet-empty p,.scanner-footnote,.scanner-guide p,.portal-footer span{color:#717789}.story-content>p,.story-footer{color:#81768e}.story-label{color:#857197}.login-form-wrap input::placeholder{color:#858b9c}.wallet-pass h2{color:#6c557f}.wallet-pass>p,.wallet-pass .pass-safety,.pass-bottom,.wallet-pass-head,.wallet-pass>.btn{color:#846a96}.program-goal span,.program-reward>span{color:#8d729f}.program-reward p,.program-card h2,.scanner-guide strong{color:#7e658d}.login-help{font-size:11px}.login-subtitle{font-size:13px}.login-form-wrap .field{font-size:12px}.role-tabs button{font-size:12px}.login-submit{font-size:13px}.wallet-caption,.scanner-footnote,.scanner-guide p{font-size:11px}.wallet-business small,.wallet-balance>span{font-size:11px}.wallet-balance{flex-wrap:wrap}.wallet-empty p{font-size:13px}.wallet-pass>p{font-size:12px}.wallet-pass .pass-safety{font-size:10px}.wallet-pass .qr-status{font-size:11px;margin:0 0 12px;color:#795c8d}.wallet-pass .qr-status:empty{display:none}.login-help>span{flex-shrink:0}.portal-main .heading-actions{width:auto}.wallet-pass .btn:disabled{opacity:.55}#qrcode{width:220px;max-width:100%;height:auto;aspect-ratio:1}#qrcode img,#qrcode canvas{max-width:100%;height:auto!important}.qr-frame{width:262px;max-width:100%}#reader img{max-width:100%}
@media(max-width:360px){.wallet-pass{padding:22px 18px}.qr-frame{padding:13px}.portal-main{padding-inline:15px}.login-main{padding:20px}.login-form-wrap{padding-block:50px}.portal-header{padding-inline:15px}.wallet-balance small{width:100%;margin:0}}

/* Login localization: keep natural reading order and separate controls from text. */
.login-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.login-story,.login-main{min-width:0;text-align:start}
.login-page .story-label{font-size:11px;letter-spacing:.06em;line-height:1.6}
.login-page .story-dot{display:inline-block;flex-shrink:0}
.login-page .story-content h2{line-height:1.35}
.login-page .story-content>p{font-size:14px;line-height:1.85;max-width:390px;color:#71617e}
.login-page .sample-card-header>span:last-child{font-size:10px;letter-spacing:.04em}
.login-page .sample-card-title{font-size:15px;line-height:1.6;color:#746082}
.login-page .sample-card-footer{font-size:10px;line-height:1.65;color:#766485;gap:14px}
.login-page .sample-card-footer>span:first-child{min-width:0}
.login-page .floating-note,.login-page .floating-tag{display:flex;align-items:center;gap:8px;font-size:10px;line-height:1.6;max-width:85%;color:#766485}
.login-page .floating-note .note-symbol,.login-page .floating-tag .note-symbol{flex-shrink:0;margin:0}
.login-page .floating-note{right:auto;left:auto;inset-inline-end:-10px}
.login-page .floating-tag{right:auto;left:auto;inset-inline-end:0}
.login-page .story-footer{font-size:10px;line-height:1.7;color:#766485}
.login-page .story-footer>span{min-width:0}
.login-page .login-form-wrap{max-width:375px}
.login-page .login-form-wrap .field{font-size:13px;line-height:1.6;text-align:start}
.login-page .login-form-wrap .field input{height:48px;font-size:14px}
.login-page .login-form-wrap input::placeholder{color:#6b7280;opacity:1}
.login-page .login-subtitle,.login-page .login-help{font-size:13px;line-height:1.75;color:#626a7b}
.login-page .login-help p{margin:0;min-width:0}
.login-page .login-help .help-symbol{flex-shrink:0;font-size:20px;color:#8c719f;line-height:1.5}
.login-page .login-footer{font-size:11px;line-height:1.7;color:#626a7b}
.login-page .role-tabs button{min-height:42px;font-size:13px;line-height:1.5}
.login-page .password-wrap input{padding:12px 88px 12px 14px}
.login-page .password-wrap button{inset-inline-end:4px;width:76px;top:4px;bottom:4px;font-size:12px;font-weight:600;color:#644f7b;display:flex;align-items:center;justify-content:center;line-height:1.4;padding:4px;border-radius:6px}
.login-page .password-wrap button:hover{background:#f3eff8}
.login-page :is(button,input,select,a):focus-visible{outline:3px solid #1767ba;outline-offset:3px}
.login-page .login-submit{min-height:48px;height:auto;font-size:14px;gap:12px}
.login-page .login-submit-arrow{display:inline-block;flex-shrink:0}
.login-page .otp-input{direction:ltr;text-align:center!important;letter-spacing:4px}
html[dir=rtl] .login-page .story-label,html[dir=rtl] .login-page .sample-card-header>span:last-child{letter-spacing:normal}
html[dir=rtl] .login-page .story-content h2{font-size:clamp(29px,3.1vw,44px);line-height:1.55;letter-spacing:normal}
html[dir=rtl] .login-page .login-form-wrap h1{line-height:1.5;letter-spacing:normal}
html[dir=rtl] .login-page .password-wrap input{padding-left:88px;padding-right:14px;text-align:right}
html[dir=rtl] .login-page input[type=email],html[dir=rtl] .login-page input[type=tel]{direction:ltr;text-align:right}
html[dir=rtl] .login-page .login-submit-arrow{transform:scaleX(-1)}
html[dir=rtl] .login-page .sample-loyalty-card{transform:rotate(6deg)}
html[dir=rtl] .login-page .illustration-orbit{transform:rotate(20deg)}
html[dir=rtl] .login-page .floating-note{transform:rotate(-4deg)}
html[dir=rtl] .login-page .floating-tag{transform:rotate(-3deg)}
@media(max-width:1000px) and (min-width:761px){.login-page .login-main,.login-page .login-story{padding-inline:28px}.login-page .floating-note,.login-page .floating-tag{font-size:9px}.login-page .sample-card-header>span:last-child,.login-page .sample-card-footer{font-size:9px}}
@media(max-width:760px){.login-page .login-form-wrap{padding-block:42px}.login-page .login-main{gap:12px}.login-page .login-help{font-size:12px}.login-page .login-top{gap:12px}.login-page .mor-language{margin-inline-start:auto}.login-page .login-form-wrap h1{font-size:28px}}