/* Dark theme for the CBQ screens and the pre-login screens (generated from cb-home.css + cb-auth.css: every light
   background / border / text colour is mapped to Nairo's own dark surfaces, so all pages follow the light/dark button).
   Crimson headers, bars and buttons stay crimson in both themes. */
:root[data-theme="dark"] :is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .sheet{background:#0F141B}
/* Apple Pay / Click To Pay tile art is hardcoded black (#111/#1a1a1a), not currentColor,
   so it disappears against a dark card background unless inverted here. */
:root[data-theme="dark"] [data-action="apple-pay"] svg,:root[data-theme="dark"] [data-action="click-to-pay"] svg{filter:invert(1) brightness(1.6)}
:root[data-theme="dark"] :is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .card{background:#171E28}
:root[data-theme="dark"] #s-home .cbh .tabs{background:#1E2733}
:root[data-theme="dark"] #s-home .cbh .tab{border-left:1px solid #2B3542}
:root[data-theme="dark"] #s-home .cbh .tab:nth-child(1){color:#F0709A}
:root[data-theme="dark"] #s-home .cbh .inv{border:1px solid #2B3542;background:#1E2733}
:root[data-theme="dark"] :is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .avmenu{background:#171E28}
:root[data-theme="dark"] #s-cards .cbh .card{background:#171E28}
:root[data-theme="dark"] #cards-hdr .avmenu{background:#171E28;color:#E9EFF5}
:root[data-theme="dark"] #cards-hdr .avitem + .avitem{border-top:1px solid #2B3542}
:root[data-theme="dark"] #cards-hdr .avitem:active,:root[data-theme="dark"] #cards-hdr .avitem:focus-visible{background:#1E2733}
:root[data-theme="dark"] #auth #v-login .reg-form,:root[data-theme="dark"] #auth #v-register .reg-form{background:#0F141B;color:#E9EFF5}
:root[data-theme="dark"] #auth #v-login .field input:not(.pin-digit),:root[data-theme="dark"] #auth #v-register .field input:not(.pin-digit){border:1.5px solid #2B3542;background:#171E28;color:#E9EFF5}
:root[data-theme="dark"] #auth #v-login .field input:not(.pin-digit)::placeholder,:root[data-theme="dark"] #auth #v-register .field input:not(.pin-digit)::placeholder{color:#9AA7B5}
:root[data-theme="dark"] #auth #v-login .field input:not(.pin-digit):focus,:root[data-theme="dark"] #auth #v-register .field input:not(.pin-digit):focus{background:#171E28}
:root[data-theme="dark"] #auth #v-login .field-ic .field-icon,:root[data-theme="dark"] #auth #v-register .field-ic .field-icon{color:#F0709A}
:root[data-theme="dark"] #auth #v-login .field-ic .eye,:root[data-theme="dark"] #auth #v-register .field-ic .eye{color:#9AA7B5}
:root[data-theme="dark"] #auth #v-login .reg-form .field label,:root[data-theme="dark"] #auth #v-register .reg-form .field label{color:#E9EFF5}
:root[data-theme="dark"] #auth #v-register .reg-form .field label .opt{color:#9AA7B5}
:root[data-theme="dark"] #auth #v-register .pin-digit{border:1.5px solid #2B3542;background:#171E28;color:#E9EFF5}
:root[data-theme="dark"] #auth #v-register .terms-row{color:#E9EFF5}
:root[data-theme="dark"] #auth #v-register .terms-row a{color:#F0709A}
:root[data-theme="dark"] #auth #v-register .reg-kyc-hint{color:#9AA7B5}
:root[data-theme="dark"] #auth #v-login .switch-link,:root[data-theme="dark"] #auth #v-register .switch-link{color:#9AA7B5}
:root[data-theme="dark"] #auth #v-login .switch-link a,:root[data-theme="dark"] #auth #v-register .switch-link a{color:#F0709A}
:root[data-theme="dark"] #bio .sheet{background:#0F141B;color:#E9EFF5}
:root[data-theme="dark"] #welcome .login{background:#0F141B;color:#E9EFF5}
:root[data-theme="dark"] #welcome .login .status{color:#E9EFF5}
:root[data-theme="dark"] #welcome .login .batt{background:#3A4350}
:root[data-theme="dark"] #welcome .brand{color:#F0709A}
:root[data-theme="dark"] #welcome .lang{color:#F0709A}
:root[data-theme="dark"] #welcome .avatar2{background:#171E28;border:3px solid #0F141B}
:root[data-theme="dark"] #welcome .who2 .wb{color:#E9EFF5}
:root[data-theme="dark"] #welcome .who2 .nm{color:#E9EFF5}
:root[data-theme="dark"] #welcome .opt{border:1.5px solid #2B3542;background:#171E28;color:#E9EFF5}
:root[data-theme="dark"] #welcome .ver{color:#E9EFF5}
:root[data-theme="dark"] #bio .vcard{border:1px solid #2B3542;background:#171E28}
:root[data-theme="dark"] #bio .vhead{background:#1E2733;border-bottom:1px solid #2B3542;color:#E9EFF5}
:root[data-theme="dark"] #bio .vtext{color:#E9EFF5;border-bottom:1px solid #2B3542}
:root[data-theme="dark"] #bio .vrow{border-bottom:1px solid #2B3542}
:root[data-theme="dark"] #bio .vinfo{color:#E9EFF5}
:root[data-theme="dark"] #bio .vinfo .end{color:#F0709A}
:root[data-theme="dark"] #bio .vpill{background:#173A1B;color:#7BE36A}
:root[data-theme="dark"] #bio .vpin p{color:#E9EFF5}
:root[data-theme="dark"] #bio .pbox{border:1.5px solid #2B3542;background:#171E28;color:#E9EFF5}
:root[data-theme="dark"] #bio .pbox.on:empty::after{background:#E9EFF5}
:root[data-theme="dark"] #bio .vpin .verr{color:#F87171}
:root[data-theme="dark"] #bio .vpill.frozen{background:#3A2412;color:#F7B266}
:root[data-theme="dark"] #auth #v-login .bio-or{color:#9AA7B5}
:root[data-theme="dark"] #auth #v-login .bio-or::before,:root[data-theme="dark"] #auth #v-login .bio-or::after{background:#2B3542}
:root[data-theme="dark"] #auth #v-login .bio-opt{border:1.5px solid #2B3542;background:#171E28;color:#F0709A}
:root[data-theme="dark"] #auth #v-login .bio-opt span{color:#E9EFF5}
:root[data-theme="dark"] #auth #v-login .bio-opt:active{background:#2A1219}
:root[data-theme="dark"] .bio-switch::after{background:#171E28}
:root[data-theme="dark"] .bio-offer .bo-sheet{background:#171E28;color:#E9EFF5}
:root[data-theme="dark"] .bio-offer .bo-ic{color:#F0709A}
:root[data-theme="dark"] .bio-offer p{color:#E9EFF5}
:root[data-theme="dark"] .bio-offer .bo-no{color:#F0709A}
:root[data-theme="dark"] #auth #v-terms.auth-view{background:#171E28;color:#E9EFF5}
:root[data-theme="dark"] #auth #v-terms .back-link,:root[data-theme="dark"] #auth #v-terms .terms-doc h3{color:#F0709A}

/* tokens the CBQ screens read (ink / band / line / crimson) */
:root[data-theme="dark"] :is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers,#s-cards) .cbh{--ink:#E9EFF5;--band:#1E2733;--line:#2B3542;--crimson:#F0709A;}
/* white cut-outs inside the tile icons should match the card they sit on, not glow */
:root[data-theme="dark"] :is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers,#s-cards) .cbh .ic svg [fill="#fff"]{fill:#171E28;}
:root[data-theme="dark"] :is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers,#s-cards) .cbh .ic svg [stroke="#fff"]{stroke:#171E28;}
:root[data-theme="dark"] :is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers,#s-cards) .cbh .sheet{color:#E9EFF5;}
/* welcome-back: the phone status icons are black-on-white in the reference */
:root[data-theme="dark"] #welcome .sicons svg{filter:invert(1);}
:root[data-theme="dark"] #welcome .lang{color:#F0709A;}
:root[data-theme="dark"] #welcome .who2 .nm,:root[data-theme="dark"] #welcome .who2 .wb{color:#E9EFF5;}
:root[data-theme="dark"] #welcome .opt.yellow{background:#fdd835;color:#1f1f1f;}
:root[data-theme="dark"] #auth #v-terms .terms-doc,:root[data-theme="dark"] #auth #v-terms .terms-doc p,:root[data-theme="dark"] #auth #v-terms .terms-doc li{color:#E9EFF5;}
:root[data-theme="dark"] #auth #v-terms .terms-disclaimer{background:#2A1219;color:#F0709A;}
:root[data-theme="dark"] #bio .vinfo .end{color:#F0709A;}
:root[data-theme="dark"] #bio .vpill{color:#7BE36A;}
/* keep the sign-in header + form on the same page tone */
:root[data-theme="dark"] #auth{background:#0F141B;}