/* Pre-login screens in the CBQ look. Scoped under #splash, #auth, #welcome and #bio. */

/* ============ Splash + welcome + sign in + create account: CBQ look ============ */
#splash,#splash .splash-panel{background:linear-gradient(180deg,#C71255,#BF134F);}
#splash::before{content:none;}
#splash .splash-halo,#splash .splash-glow-ring,#splash .splash-shimmer,#splash .splash-map{display:none;}
#splash .splash-letter img,#splash .splash-wordmark-img{filter:brightness(0) invert(1);}


/* sign in / create account: crimson header band + white curved sheet, like the other CBQ screens */
#auth #v-login.auth-view,#auth #v-register.auth-view{padding:0;justify-content:flex-start;background:linear-gradient(180deg,#C71255,#BF134F);}
#auth #v-login .back-link-float,#auth #v-register .back-link-float{position:absolute;top:14px;left:14px;z-index:3;width:36px;height:36px;padding:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;justify-content:center;align-items:center;}
#auth #v-login .reg-header,#auth #v-register .reg-header{align-items:flex-start;text-align:left;padding:76px 22px 22px;margin:0;}
#auth #v-login .reg-badge,#auth #v-register .reg-badge{width:auto;height:34px;padding:0;margin:0 0 12px;background:none;border:0;box-shadow:none;border-radius:0;}
#auth #v-login .reg-badge img,#auth #v-register .reg-badge img{height:100%;width:auto;filter:brightness(0) invert(1);}
#auth #v-login .reg-header h2,#auth #v-register .reg-header h2{color:#fff;font-size:20px;font-weight:800;letter-spacing:-.2px;}
#auth #v-login .reg-header p,#auth #v-register .reg-header p{color:rgba(255,255,255,.88);font-size:12.5px;margin-top:4px;font-weight:500;}
#auth #v-login .reg-form,#auth #v-register .reg-form{flex:1;background:#fff;border-radius:14px 14px 0 0;padding:24px 20px 28px;gap:0;color:#1f1f1f;}
#auth #v-login .reg-form .field,#auth #v-register .reg-form .field{margin-bottom:12px;}

/* inputs: CBQ bordered boxes, crimson icon, no tinted circle */
#auth #v-login .field input:not(.pin-digit),#auth #v-register .field input:not(.pin-digit){height:48px;padding:0 44px 0 46px;border:1.5px solid #cfcfcf;border-radius:14px;background:#fff;color:#1f1f1f;font-size:16px;box-shadow:none;}
#auth #v-login .field input:not(.pin-digit)::placeholder,#auth #v-register .field input:not(.pin-digit)::placeholder{color:#8a8a8a;}
#auth #v-login .field input:not(.pin-digit):focus,#auth #v-register .field input:not(.pin-digit):focus{border-color:#C31352;background:#fff;box-shadow:0 0 0 3px rgba(195,19,82,.12);outline:none;}
#auth #v-login .field-ic .field-icon,#auth #v-register .field-ic .field-icon{left:14px;width:20px;height:20px;background:none;border-radius:0;color:#C31352;}
#auth #v-login .field-ic .field-icon svg,#auth #v-register .field-ic .field-icon svg{width:18px;height:18px;}
#auth #v-login .field-ic .eye,#auth #v-register .field-ic .eye{right:14px;color:#777;}
#auth #v-register .email-verify-btn{right:8px;height:34px;padding:0 14px;border-radius:8px;background:linear-gradient(180deg,#C71255,#BF134F);color:#fff;font-size:12.5px;font-weight:700;box-shadow:0 2px 3px rgba(80,0,20,.35);}
#auth #v-register #r-email{padding-right:92px;}
#auth #v-login .reg-form .field label,#auth #v-register .reg-form .field label{color:#1f1f1f;font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;}
#auth #v-register .reg-form .field label .opt{display:block;margin-top:2px;color:#6b6b6b;font-size:11.5px;font-weight:500;text-transform:none;letter-spacing:0;}
#auth #v-register .pin-row{display:flex;gap:10px;justify-content:center;margin-top:8px;}
#auth #v-register .pin-digit{width:46px;height:48px;border:1.5px solid #cfcfcf;border-radius:8px;background:#fff;color:#111;font-size:18px;box-shadow:none;}
#auth #v-register .pin-digit:focus{border-color:#C31352;box-shadow:none;outline:none;}
#auth #v-register .terms-row{color:#1f1f1f;font-size:13px;}
#auth #v-register .terms-row a{color:#C31352;font-weight:700;}
#auth #v-register .reg-kyc-hint{color:#6b6b6b;font-size:11.5px;}

/* primary button: the CBQ button (same gradient, radius and shadow as the quick buttons) */
#auth #v-login .btn-g,#auth #v-register .btn-g{width:100%;max-width:none;height:48px;padding:0;border:0;border-radius:8px;background:linear-gradient(180deg,#C71255,#BF134F);color:#fff;font-size:15px;font-weight:700;letter-spacing:0;box-shadow:0 2px 3px rgba(80,0,20,.35);transform:none;}
#auth #v-login .btn-g:hover,#auth #v-register .btn-g:hover{transform:none;box-shadow:0 2px 3px rgba(80,0,20,.35);}
#auth #v-login .btn-g:active,#auth #v-register .btn-g:active{filter:brightness(.92);transform:none;}
#auth #v-login .switch-link,#auth #v-register .switch-link{color:#6b6b6b;font-size:13px;margin-top:18px;}
#auth #v-login .switch-link a,#auth #v-register .switch-link a{color:#C31352;font-weight:800;}

/* ---- shared base for the two returning-user screens (from styles.css) ---- */
#welcome,#bio{font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;}
#welcome *,#bio *{box-sizing:border-box;margin:0;padding:0;}
#welcome .app,#bio .app{position:relative;width:100%;max-width:430px;height:100%;margin:0 auto;overflow:hidden;color:#fff;background:linear-gradient(180deg,#C71255,#BF134F);}
#welcome .status,#bio .status{position:absolute;top:0;left:0;right:0;height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 26px 0 52px;}
#welcome .clock,#bio .clock{font-size:19px;font-weight:700;letter-spacing:.2px;font-family:-apple-system,'SF Pro Text','Segoe UI',Roboto,sans-serif;}
#welcome .sicons,#bio .sicons{display:flex;align-items:center;gap:9px;}
#welcome .batt,#bio .batt{position:relative;width:31px;height:18px;border-radius:5px;background:rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;color:#fff;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;}
#welcome .batt::after,#bio .batt::after{content:"";position:absolute;right:-3px;top:6px;width:2px;height:6px;border-radius:0 2px 2px 0;background:rgba(255,255,255,.5);}
#bio .sheet{position:absolute;left:0;right:0;top:110px;bottom:0;background:#fff;border-radius:14px 14px 0 0;overflow-y:auto;color:#1f1f1f;padding:1px 14px 108px;scrollbar-width:none;}
#welcome [data-action],#bio [data-action]{cursor:pointer;-webkit-tap-highlight-color:transparent;}
#welcome [data-action]:focus-visible,#bio [data-action]:focus-visible{outline:2px solid #f7941d;outline-offset:2px;}
#welcome .brand img{display:block;height:37px;width:auto;}

/* ---- welcome back (ported from login.css) ---- */

#welcome .login{background:#fff;color:#1f1f1f;}
#welcome .login .status{color:#000;padding:0 26px 0 54px;}
#welcome .login .batt{background:#111;color:#fff;}
#welcome .login .batt::after{background:#666;}
#welcome .brand{position:absolute;left:17px;top:57px;height:37px;display:flex;align-items:center;gap:9px;color:#C31352;}
#welcome .brand .bn{font-size:10.5px;font-weight:800;line-height:12.4px;letter-spacing:.2px;text-align:left;text-transform:uppercase;}
#welcome .brand i{width:1px;height:37px;background:#C31352;opacity:.7;}
#welcome .brand svg{height:37px;width:auto;display:block;}
#welcome .lang{position:absolute;right:18px;top:64px;height:24px;display:flex;align-items:center;gap:11px;font-size:17px;font-weight:800;color:#C31352;cursor:pointer;}
#welcome .who2{position:absolute;left:0;right:0;top:196px;text-align:center;}
#welcome .avatar2{position:relative;width:123px;height:123px;margin:0 auto;border-radius:50%;background:#fff;border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.18);}
#welcome .avatar2 img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;}
#welcome .bellb{position:absolute;left:88px;top:-2px;width:41px;height:41px;border-radius:50%;background:#C31352;display:flex;align-items:center;justify-content:center;cursor:pointer;}
#welcome .who2 .wb{margin-top:13px;font-size:15.5px;line-height:19px;color:#1f1f1f;}
#welcome .who2 .nm{font-size:17px;line-height:20px;font-weight:800;color:#111;margin-top:1px;}
#welcome .opts{position:absolute;left:0;right:0;top:397px;display:grid;grid-template-columns:99.5px 101px 99.5px;grid-template-rows:95.4px 95.6px;gap:8px;justify-content:center;}
#welcome .opt{width:132px;height:132px;border:1.5px solid #cfcfcf;border-radius:14px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  font-size:13.4px;font-weight:500;line-height:16.6px;text-align:center;color:#1f1f1f;cursor:pointer;}
#welcome .opt svg{display:block;}
#welcome .opt.hi{margin-top:-9.7px;height:102px;border:0;box-shadow:0 3px 14px rgba(0,0,0,.14);}
#welcome .opt.yellow{background:#fdd835;border:0;gap:5px;}
#welcome .opt.yellow .tag{font-size:15px;font-weight:800;color:#C31352;letter-spacing:-.3px;white-space:nowrap;}
#welcome .idb{position:relative;display:inline-block;padding:0 6px;font-weight:300;color:#333;margin-left:1px;}
#welcome .idb::before,#welcome .idb::after{content:"";position:absolute;top:-2px;bottom:-2px;width:4px;border:1.4px solid #444;}
#welcome .idb::before{left:0;border-right:0;}
#welcome .idb::after{right:0;border-left:0;}
#welcome .ver{position:absolute;left:0;right:0;top:621px;text-align:center;font-size:12.8px;line-height:22px;color:#333;}
#welcome .lnav{position:absolute;left:0;right:0;bottom:0;height:78px;background:linear-gradient(180deg,#C71255,#BF134F);border-radius:21px 21px 0 0;
  display:grid;grid-template-columns:repeat(4,1fr);padding-top:9px;}
#welcome .li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font-size:11.6px;font-weight:600;cursor:pointer;height:44px;}
#welcome .li + .li::before{content:"";position:absolute;left:0;top:-2px;height:41px;width:1px;background:rgba(255,255,255,.28);}
#welcome .li svg{display:block;transform:scale(.86)}
#welcome .hbar{position:absolute;left:50%;bottom:8px;width:119px;height:4px;margin-left:-59.5px;border-radius:4px;background:rgba(255,255,255,.55);}

/* ---- PIN verification (ported from biometric.css; the fake keypad is not rendered) ---- */

#bio .bio{background:linear-gradient(180deg,#C71255,#C31352 60%,#BF134F);}
#bio .bio .bar{position:absolute;top:0;left:0;right:0;height:94px;display:flex;align-items:center;padding:29px 0 0 20px;color:#fff;}
#bio .bio .back{display:flex;align-items:center;justify-content:center;width:26px;height:26px;margin-right:6px;cursor:pointer;}
#bio .bio h1{font-size:17px;font-weight:400;letter-spacing:.1px;margin-left:6px;}
#bio .bio .sheet{top:94px;padding:23px 22px 0;overflow:hidden;}
#bio .vcard{border:1px solid #cfcfcf;border-radius:14px;overflow:hidden;background:#fff;}
#bio .vhead{height:34px;background:#f5f5f5;border-bottom:1px solid #e6e6e6;padding:0 14px;display:flex;align-items:center;font-size:14px;font-weight:700;color:#111;}
#bio .vtext{height:61px;display:flex;align-items:center;padding:0 14px;font-size:12.6px;color:#1f1f1f;border-bottom:1px solid #e6e6e6;}
#bio .vrow{height:68px;display:flex;align-items:center;padding:0 14px;border-bottom:1px solid #e6e6e6;}
#bio .vthumb{width:51px;height:35.5px;border-radius:6px;overflow:hidden;flex-shrink:0;}
#bio .vthumb svg{display:block;width:100%;height:100%;}
#bio .vsep{width:1px;height:35.5px;background:#cfcfcf;margin:0 13px 0 12px;flex-shrink:0;}
#bio .vinfo{flex:1;min-width:0;font-size:13px;line-height:17.5px;color:#1f1f1f;}
#bio .vinfo .end{color:#C31352;}
#bio .vpill{background:#dff5d6;color:#2e9a1c;font-size:12px;font-weight:600;letter-spacing:.5px;height:22px;padding:0 11px;border-radius:8px;display:flex;align-items:center;}
#bio .vpin{padding:23px 0 46px;text-align:center;}
#bio .vpin p{font-size:13px;line-height:18px;color:#1f1f1f;margin-bottom:19px;}
#bio .pins{display:flex;justify-content:center;gap:8.3px;}
#bio .pbox{position:relative;width:41.5px;height:45px;border:1.5px solid #cfcfcf;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;color:#111;}
#bio .pbox.on{border-color:#C31352;}
#bio .pbox.on:empty::after{content:"";width:1.5px;height:22px;background:#111;animation:cbCaret 1s steps(1) infinite;}

@keyframes cbCaret{50%{opacity:0;}}
#bio .pbox.on:empty::after{animation:cbCaret 1s steps(1) infinite;}
@media (prefers-reduced-motion:reduce){#bio .pbox.on:empty::after{animation:none;}}
#bio .vpin{position:relative;}
#bio .pins{cursor:text;}
#bio .vpin .verr{position:absolute;left:0;right:0;bottom:16px;margin:0;min-height:16px;font-size:12px;line-height:16px;color:#c42b2b;text-align:center;}
#bio .pins.shake{animation:cbShake .35s;}
@keyframes cbShake{20%,60%{transform:translateX(-6px);}40%,80%{transform:translateX(6px);}}
@media (prefers-reduced-motion:reduce){#bio .pins.shake{animation:none;}}
#bio .bio-input{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;font-size:16px;border:0;padding:0;background:transparent;color:transparent;caret-color:transparent;}
#bio .vrow[hidden],#bio .vtext[hidden]{display:none;}
#bio .vpill.frozen{background:#fde9d3;color:#a5560a;}

/* ---- biometric device unlock: Sign In buttons, Profile switch, offer sheet ---- */
#auth #v-login .bio-or{display:flex;align-items:center;gap:12px;margin:22px 0 14px;color:#6b6b6b;font-size:12.5px;font-weight:600;}
#auth #v-login .bio-or::before,#auth #v-login .bio-or::after{content:"";flex:1;height:1px;background:#e2e2e2;}
#auth #v-login .bio-opts{display:flex;gap:10px;}
#auth #v-login .bio-opt{flex:1;height:48px;display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid #cfcfcf;border-radius:14px;background:#fff;color:#C31352;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;}
#auth #v-login .bio-opt span{color:#1f1f1f;}
#auth #v-login .bio-opt:active{background:#fceaf0;border-color:#C31352;}
#auth #v-login .bio-opt:focus-visible{outline:2px solid #f7941d;outline-offset:2px;}
#auth #v-login .bio-opt[disabled]{opacity:.55;}
.bio-switch{position:relative;display:inline-block;width:40px;height:22px;border-radius:99px;background:#cfcfcf;transition:background .18s;flex:none;}
.bio-switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .18s;}
#bio-row[aria-pressed="true"] .bio-switch{background:#C31352;}
#bio-row[aria-pressed="true"] .bio-switch::after{transform:translateX(18px);}
@media (prefers-reduced-motion:reduce){.bio-switch,.bio-switch::after{transition:none;}}
.bio-offer{position:absolute;inset:0;z-index:60;display:flex;align-items:flex-end;background:rgba(0,0,0,.45);font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;}
.bio-offer .bo-sheet{width:100%;background:#fff;color:#1f1f1f;border-radius:14px 14px 0 0;padding:24px 20px 28px;}
.bio-offer .bo-ic{width:44px;height:44px;color:#C31352;margin-bottom:10px;}
.bio-offer .bo-ic svg{width:44px;height:44px;}
.bio-offer h3{font-size:17px;font-weight:800;margin-bottom:6px;}
.bio-offer p{font-size:13px;line-height:19px;color:#555;margin-bottom:18px;}
.bio-offer .bo-go{width:100%;height:48px;border:0;border-radius:8px;background:linear-gradient(180deg,#C71255,#BF134F);color:#fff;font-family:inherit;font-size:15px;font-weight:700;box-shadow:0 2px 3px rgba(80,0,20,.35);cursor:pointer;}
.bio-offer .bo-no{width:100%;height:44px;margin-top:8px;border:0;background:none;color:#C31352;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;}

/* Sign In is the first screen now, so it has no back arrow to make room for */
#auth #v-login .reg-header{padding-top:44px;}

/* ---- light/dark toggle on the pre-login screens ---- */
.pl-theme{position:absolute;z-index:9;box-sizing:content-box;width:24px;height:24px;padding:6px;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.pl-theme:focus-visible{outline:2px solid #f7941d;outline-offset:2px;}
.pl-theme.pl-auth,.pl-theme.pl-bio{top:14px;right:14px;background:rgba(255,255,255,.18);}
.pl-theme.pl-bio{top:25px;right:8px;background:none;}
.pl-theme.pl-welcome{top:52px;right:76px;background:none;}
/* these two screens reset padding on everything (#welcome *, #bio *), so restate it to keep a 36px tap target with the icon in the same place */
#welcome .pl-theme,#bio .pl-theme{box-sizing:content-box;padding:6px;}

/* ---- Terms view surface: it sits on its own page, not on the dark auth backdrop ---- */
#auth #v-terms.auth-view{background:#fff;color:#1f1f1f;}
#auth #v-terms .back-link,#auth #v-terms .terms-doc h3{color:#C31352;}

/* welcome: four options in one row; maroon wordmark on white */
#welcome .opts{grid-template-columns:repeat(4,1fr);grid-template-rows:96px;gap:8px;padding:0 16px;}
#welcome .opt.hi{margin-top:0;height:auto;}
#welcome .opt span{font-size:11.5px;text-align:center;}
:root[data-theme="dark"] #welcome .brand img,:root[data-theme="dark"] .lk-logo{filter:brightness(0) invert(1);}

/* one back button everywhere: rounded square, white chevron on a translucent tile over crimson */
#auth .back-link-float{position:absolute;top:14px;left:14px;z-index:3;width:40px;height:40px;padding:0;border:0;border-radius:12px;background:rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
#auth #v-terms .back-link{position:static;width:40px;height:40px;padding:0;margin:0 0 12px;border:0;border-radius:12px;background:#C31352;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
#sub-hdr .back,#bio .bio .back{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.18);margin-right:8px;}
#sub-hdr .back svg,#bio .bio .back svg{width:12px;height:20px;}
#auth #v-login .back-link-float,#auth #v-register .back-link-float{width:40px;height:40px;border-radius:12px;}
/* welcome: 2 x 2 (Biometric, Password / Register, Emergency Block) */
#welcome .opts{grid-template-columns:132px 132px;grid-template-rows:auto auto;gap:10px;justify-content:center;padding:0;top:auto;bottom:100px;}   /* explicit column widths matching the tile size + justify-content:center brings the four tiles into one tight, centered cluster instead of being spread across two 1fr columns with leftover space around each tile -- anchored to the bottom nav (not a fixed top offset) so it can never be covered when the real visible viewport is shorter than the design canvas (mobile browser address bar showing, etc.) */
/* Password login ("hi") lost its border/gained a shadow from the 3-column desktop layout's
   "raised card" treatment (line ~81) -- in this 2x2 layout it should look like its siblings. */
#welcome .opt.hi{border:1.5px solid #cfcfcf;box-shadow:none;}
#welcome .lnav{border-radius:0 !important;}

/* welcome-back header: logo and theme toggle share one centre line and equal 20px side margins */
#welcome .brand{left:20px;top:57px;height:34px;}
#welcome .brand img{height:34px;}
.pl-theme.pl-welcome{top:56px;right:14px;}

/* Real devices already have their own status bar (clock/signal/wifi/battery); this fake one was
   a CBQ-mockup decoration that duplicated it. Hidden everywhere via !important, since it's
   independently positioned/scoped across several different selectors in app.css/cb-home.css and
   this is simplest guaranteed way to remove it in every one of them without touching each. */
.status{display:none!important}

/* Welcome-Back layout made flow-based instead of fixed pixel offsets, so it always fits above
   the bottom nav regardless of how short the real visible viewport is (mobile browsers show/hide
   their own address bar, changing available height) -- fixed top/bottom offsets sized for one
   assumed canvas height kept overlapping different pieces of content on shorter real viewports. */
#welcome .app{display:flex;flex-direction:column;align-items:stretch;overflow-y:auto;}
#welcome .brand{position:static;margin:20px 0 0 20px;flex:none;}
#welcome .who2{position:static;margin:56px 0 0;flex:none;}
#welcome .opts{position:static;margin:30px 0 14px;flex:none;top:auto;bottom:auto;}
#welcome .lnav{position:relative;left:auto;right:auto;bottom:auto;margin-top:auto;flex:none;}