/* Neutral page/card surfaces. Text, branded primary actions, selection ticks,
   header/footer/nav, checkout, receipts and OTP/PIN stay unchanged. */
html[data-ak-surface] body[data-page] {
    --ak-surface-page: #f3f3f3;
    --ak-surface-card: #fdfdfd;
    --ak-surface-field: #ffffff;
    --ak-surface-raised: 5px 6px 16px rgba(100,100,100,.13), -4px -4px 12px rgba(255,255,255,.8), inset 0 1px 0 #fff;
    --ak-surface-inset: inset 2px 2px 5px rgba(100,100,100,.1), inset -2px -2px 5px #fff;
    --ak-surface-button: 0 2px 0 rgba(80,80,80,.14), 3px 4px 9px rgba(100,100,100,.18), -2px -2px 7px rgba(255,255,255,.8), inset 0 1px 0 rgba(255,255,255,.5);
    background: var(--ak-surface-page) !important;
}
html[data-ak-surface] body[data-page] > main {
    background: var(--ak-surface-page) !important;
}
/* Remove only the old decorative page washes, never original img assets. */
html[data-ak-surface] body[data-page]::before,
html[data-ak-surface] body[data-page]::after,
html[data-ak-surface] body[data-page] > main.auth-page::before,
html[data-ak-surface] body[data-page] > main.auth-page::after { content: none !important; }
html[data-ak-surface] body[data-page] > .ak-water-bg { display: none !important; }
html[data-ak-surface] body[data-page] main .auth-main {
    background: var(--ak-surface-page) !important;
}
/* Keep branded dark balance cards and semantic selected/status surfaces intact
   so existing white text and payment-state contrast remain readable. */
html[data-ak-surface] body[data-page] main :is(
    .form-card, .info-card, .auth-card, .profile-card.rd-card, .rd-menu-item,
    .mo-card, .mc-card, .mc-item, .tc-card, .tc-summary-card, .bh-item,
    .go-card, .go-panel, .sr-item, .wth-item, .wth-summary-card, .agh-item,
    .dashboard-card, .profile-card, .contact-card, .faq-item, .download-card,
    .complaint-card, .dashboard-panel, .simple-service-card, .wallet-form-card,
    .wallet-history-card, .profile-summary-panel, .ak-app-info-card,
    .ak-app-platform-card, .ak-app-security-card, .rd-task-card, .rd-order-item,
    .utility-panel, .quantity-card, .utility-support-link, .utility-card, .tc-rate-item,
    .info-hero, .nt-item, .coupon-suggestions, .support-highlights > article,
    .dashboard-greeting, .dashboard-command-center, .dashboard-service-health,
    .dashboard-coupons, .dashboard-panel-links, .dashboard-metrics > article,
    .wallet-stats > article, .quick-action-card, .service-health-metrics > article,
    .service-health-item, .hero-meta-card, .ticket-pane, .conversation-panel
):not(.selected):not([aria-pressed="true"]):not(:is(.wallet-banner, .wallet-primary-card, .ak-wallet-pay-card, .hero-highlight-card, [role="dialog"] *, .checkout-shell *, .checkout-modal *, .payment-handshake *, .receipt *, .receipt-modal *)) {
    background: var(--ak-surface-card) !important;
    border-color: #e2e2e2 !important;
    box-shadow: var(--ak-surface-raised) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Selected packs keep their original tick and brand outline, not a blue wash. */
html[data-ak-surface] body:is([data-page="utility-credits"], [data-page="sahi-recharge"], [data-page="gifting-order"]) main .utility-grid .utility-card.selected {
    background: var(--ak-surface-card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Only Profile Settings, never the neighbouring Load Balance/payment dialog. */
html[data-ak-surface] body[data-page="reseller-dashboard"] #rdSettingsOverlay {
    background: var(--ak-surface-page) !important;
}
html[data-ak-surface] body[data-page="reseller-dashboard"] #rdSettingsOverlay :is(
    .rd-settings-overlay__panel, .rd-settings-panel__head, .rd-settings-profile-card,
    .rd-profile-progress, .rd-settings-feature-card, .rd-settings-section,
    .kyc-doc-card, .kyc-doc-example, .kyc-doc-preview
) {
    background: var(--ak-surface-card) !important;
    border-color: #e2e2e2 !important;
}
html[data-ak-surface] body[data-page] main :is(
    .form-card, .info-card, .auth-card, .profile-card.rd-card, .rd-menu-item,
    .mo-card, .mc-card, .mc-item, .tc-card, .tc-summary-card, .bh-item,
    .go-card, .go-panel, .sr-item, .wth-item, .wth-summary-card, .agh-item,
    .nt-item, .dashboard-card, .profile-card, .wallet-card, .contact-card,
    .faq-item, .download-card, .complaint-card, .dashboard-panel, .wallet-banner,
    .hero-highlight-card, .simple-service-card, .wallet-form-card, .wallet-history-card,
    .wallet-primary-card, .ak-wallet-pay-card, .profile-summary-panel,
    .ak-app-info-card, .ak-app-platform-card, .ak-app-security-card
):not(:is([role="dialog"] *, .checkout-shell *, .payment-handshake *, .receipt *, .receipt-modal *)) {
    border-radius: 20px !important;
    box-shadow: var(--ak-surface-raised) !important;
}
html[data-ak-surface] body[data-page] main :is(
    .rd-task-card, .rd-order-item, .utility-panel, .quantity-card, .utility-support-link,
    .utility-card, .rd-settings-btn, .rd-balance-open, .tc-rate-item
):not(.selected):not([aria-pressed="true"]):not(:focus-visible):not(:is([role="dialog"] *, .checkout-shell *, .payment-handshake *)) {
    border-radius: 13px !important;
    box-shadow: var(--ak-surface-raised) !important;
}
/* Preserve the page's existing selected pack outline, ticks and status colours. */
html[data-ak-surface] body[data-page] main :is(.btn, .qty-btn, .go-qty__btn, .go-confirm, .rd-fab, .sr-add-team-btn):not(:disabled):not([aria-disabled="true"]):not(.is-processing):not(:focus-visible):not(:is([role="dialog"] *, .checkout-shell *, .checkout-modal *, .payment-handshake *)) {
    border-radius: 12px !important;
    box-shadow: var(--ak-surface-button) !important;
}
/* Neutral secondary controls; original branded hover/focus feedback is kept. */
html[data-ak-surface] body[data-page] main :is(.btn.ghost, .qty-btn, .go-qty__btn):not(:hover):not(:focus-visible):not(:disabled):not(:is([role="dialog"] *, .checkout-shell *, .checkout-modal *, .payment-handshake *)) {
    background: var(--ak-surface-card) !important;
    border-color: #d6d6d6 !important;
}
/* Existing native/external label nodes and all input handlers are retained. */
html[data-ak-surface] body[data-page] main .ak-surface-field.ak-surface-field {
    position: relative !important;
    margin-top: 9px !important;
    padding-top: 0 !important;
    min-width: 0;
    overflow: visible;
}
html[data-ak-surface] body[data-page] main .ak-surface-field > .ak-surface-caption.ak-surface-caption {
    position: absolute !important;
    top: -8px !important;
    left: 12px !important;
    right: auto !important;
    width: max-content !important;
    max-width: calc(100% - 54px);
    margin: 0 !important;
    padding: 0 4px !important;
    box-sizing: border-box;
    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    transform: none !important;
    z-index: 2;
    pointer-events: none;
    border-radius: 3px;
    background-color: var(--ak-surface-field) !important;
    transition: top .18s ease, font-size .18s ease;
}
html[data-ak-surface] body[data-page] main .ak-surface-field :is(.ak-surface-control, .ak-surface-frame) {
    box-sizing: border-box;
    height: 48px !important;
    min-height: 48px !important;
    margin-top: 0 !important;
    border-radius: 12px !important;
    background-color: var(--ak-surface-field) !important;
}
/* Keep native select arrows; remove gradients only from text fields/frames. */
html[data-ak-surface] body[data-page] main .ak-surface-field :is(input.ak-surface-control, textarea.ak-surface-control, .ak-surface-frame) {
    background-image: none !important;
}
html[data-ak-surface] body[data-page] main .ak-surface-field :is(.ak-surface-control, .ak-surface-frame):not(:focus):not(:focus-within):not([aria-invalid="true"]) {
    border-color: #d6d6d6 !important;
}
html[data-ak-surface] body[data-page] main .ak-surface-field .ak-surface-control {
    width: 100%;
    padding: 11px 15px !important;
    font-size: 14px !important;
    line-height: 24px !important;
}
html[data-ak-surface] body[data-page] main .ak-surface-field :is(.ak-surface-control, .ak-surface-frame):not(:focus):not(:focus-within):not(:disabled) {
    box-shadow: var(--ak-surface-inset) !important;
}
html[data-ak-surface] body[data-page] main .ak-surface-field select.ak-surface-control { padding-right: 40px !important; }
html[data-ak-surface] body[data-page] main .ak-surface-field textarea.ak-surface-control {
    height: auto !important;
    min-height: 92px !important;
}
html[data-ak-surface] body[data-page] main .ak-surface-field .password-input-wrap .ak-surface-control { padding-right: 52px !important; }
html[data-ak-surface] body[data-page] main .ak-surface-field .password-toggle { top: 24px !important; }
/* A framed field must have ONE box, not a second padded input inside it.
   This beats the later shared service-control gradient/height rules. */
html[data-ak-surface] body[data-page] main .ak-surface-field .ak-surface-frame {
    display: flex;
    align-items: center;
    gap: 8px !important;
    padding-left: 12px !important;
}
html[data-ak-surface] body[data-page] main .ak-surface-field .ak-surface-frame .ak-surface-inline {
    box-sizing: border-box;
    flex: 1 1 0%;
    width: 100%;
    min-width: 0;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    font-size: 14px !important;
    line-height: normal !important;
    text-indent: 0 !important;
}
html[data-ak-surface] body[data-page] main .ak-surface-frame :is(.utility-profile-control__icon, .go-field__icon) {
    width: 24px !important;
    height: 24px !important;
    background: var(--ak-surface-page) !important;
}
@supports selector(label:has(input)) {
    html[data-ak-surface] body[data-page] main .ak-surface-field:not(.ak-surface-field--raised):not(:focus-within):has(:is(.ak-surface-control, .ak-surface-inline):placeholder-shown) > .ak-surface-caption.ak-surface-caption {
        top: 16px !important;
        font-size: 14px !important;
        background-color: transparent !important;
    }
    html[data-ak-surface] body[data-page] main .ak-surface-field--framed:not(:focus-within):has(.ak-surface-inline:placeholder-shown) > .ak-surface-caption.ak-surface-caption { left: 41px !important; }
    html[data-ak-surface] body[data-page] main .ak-surface-field:not(:focus-within) :is(.ak-surface-control, .ak-surface-inline)::placeholder { opacity: 0 !important; }
}
/* Coupon and quantity stay in their original layout; no PIN/payment selectors. */
html[data-ak-surface] body[data-page] main :is(.coupon-row > input, .quantity-controls > input, .go-qty__input) {
    background: var(--ak-surface-field) !important;
    border-radius: 12px !important;
    box-sizing: border-box;
    min-width: 0;
}
html[data-ak-surface] body[data-page] main :is(.coupon-row > input, .quantity-controls > input, .go-qty__input):not(:focus):not([aria-invalid="true"]) {
    border-color: #d6d6d6 !important;
    box-shadow: var(--ak-surface-inset) !important;
}
html[data-ak-surface] body[data-page] main .coupon-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
html[data-ak-surface] body[data-page] main .coupon-row > input {
    flex: 1 1 0%;
    width: 0;
    height: 48px !important;
    padding: 11px 15px !important;
    font-size: 14px !important;
}
html[data-ak-surface] body[data-page] main .coupon-row > .btn {
    flex: 0 0 auto;
    min-height: 48px;
    font-size: 14px !important;
    padding-inline: 16px;
}
/* Border-floating layout without changing the original order/filter layouts. */
html[data-ak-surface] body[data-page] main .ak-surface-field--framed { gap: 7px; }
html[data-ak-surface] body[data-page] main.info-page :is(.info-card, .info-hero) { border-radius: 20px !important; }
html[data-ak-surface] body.support-compact-reseller main :is(.ticket-pane, .conversation-panel) { border-radius: 18px; box-shadow: var(--ak-surface-raised); }
@media (max-width: 600px) {
    html[data-ak-surface] body[data-page] { --ak-surface-raised: 3px 4px 11px rgba(100,100,100,.12), -3px -3px 10px rgba(255,255,255,.8), inset 0 1px 0 #fff; }
    html[data-ak-surface] body[data-page] main .ak-surface-field :is(input.ak-surface-control, textarea.ak-surface-control),
    html[data-ak-surface] body[data-page] main .ak-surface-field .ak-surface-frame .ak-surface-inline,
    html[data-ak-surface] body[data-page] main .coupon-row > input { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-ak-surface] body[data-page] main .ak-surface-caption { transition: none !important; }
}
 
/* AK EMBOSSED BUTTON EFFECTS START
   Approved expansion: selectable cards, checkout actions and OTP/PIN shadows.
   Effects only; colour, borders, dimensions, QR geometry and JS stay unchanged.
   Scrims, disabled/busy controls and original focus outlines are preserved. */
html:is([data-ak-embossed], [data-ak-surface]) body[data-page] :is(main, #rdSettingsOverlay, #rdTopupOverlay, #checkout-channel-modal,
    #checkout-wallet-pin-modal, .checkout-modal, .checkout-shell, .go-modal,
    .wallet-load-modal, .wallet-details-modal, .ak-receipt-dialog, .payment-handshake) :is(
    button:not(.mo-order__toggle), .btn, input[type="submit"], .ak-home-hero-cta, .auth-switch-btn,
    .auth-icon-button, .link-button, .plan-tab, .qty-btn, .go-qty__btn,
    .go-confirm, .rd-settings-btn, .rd-balance-open, .rd-copy-btn, .rd-fab,
    .sr-add-team-btn, .utility-card, .plan-result-row, a.service-card
):not(:where(
    header.site-header *, .site-footer *, .password-toggle, [role="switch"],
    [class*="scrim"], [class*="backdrop"], [aria-busy="true"] *, .is-processing *
)):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-processing):not(:focus-visible) {
    box-shadow: 5px 5px 11px rgba(95,95,95,.24),
        -4px -4px 10px rgba(255,255,255,.9),
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -1px 0 rgba(0,0,0,.09) !important;
    transition: box-shadow .18s ease, translate .18s ease, scale .12s ease;
}
@media (hover: hover) and (pointer: fine) {
html:is([data-ak-embossed], [data-ak-surface]) body[data-page] :is(main, #rdSettingsOverlay, #rdTopupOverlay, #checkout-channel-modal,
    #checkout-wallet-pin-modal, .checkout-modal, .checkout-shell, .go-modal,
    .wallet-load-modal, .wallet-details-modal, .ak-receipt-dialog, .payment-handshake) :is(
    button:not(.mo-order__toggle), .btn, input[type="submit"], .ak-home-hero-cta, .auth-switch-btn,
    .auth-icon-button, .link-button, .plan-tab, .qty-btn, .go-qty__btn,
    .go-confirm, .rd-settings-btn, .rd-balance-open, .rd-copy-btn, .rd-fab,
    .sr-add-team-btn, .utility-card, .plan-result-row, a.service-card
):not(:where(
    header.site-header *, .site-footer *, .password-toggle, [role="switch"],
    [class*="scrim"], [class*="backdrop"], [aria-busy="true"] *, .is-processing *
)):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-processing):not(:focus-visible):hover {
    box-shadow: 6px 7px 15px rgba(95,95,95,.26),
        -5px -5px 12px rgba(255,255,255,.95),
        inset 0 1px 0 rgba(255,255,255,.55),
        inset 0 -1px 0 rgba(0,0,0,.1) !important;
    translate: 0 -1px;
}
}
/* Selected cards remain recessed; their existing colour/tick/outline remains. */
html:is([data-ak-embossed], [data-ak-surface]) body[data-page] :is(main, #rdSettingsOverlay, #rdTopupOverlay, #checkout-channel-modal,
    #checkout-wallet-pin-modal, .checkout-modal, .checkout-shell, .go-modal,
    .wallet-load-modal, .wallet-details-modal, .ak-receipt-dialog, .payment-handshake) :is(
    button:not(.mo-order__toggle), .btn, input[type="submit"], .ak-home-hero-cta, .auth-switch-btn,
    .auth-icon-button, .link-button, .plan-tab, .qty-btn, .go-qty__btn,
    .go-confirm, .rd-settings-btn, .rd-balance-open, .rd-copy-btn, .rd-fab,
    .sr-add-team-btn, .utility-card, .plan-result-row, a.service-card
):not(:where(
    header.site-header *, .site-footer *, .password-toggle, [role="switch"],
    [class*="scrim"], [class*="backdrop"], [aria-busy="true"] *, .is-processing *
)):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-processing):is(.utility-card, .plan-tab, .auth-switch-btn, .plan-result-row):is(.selected, .active, .is-active, [aria-pressed="true"], [aria-selected="true"]):not(:focus-visible) {
    box-shadow: inset 3px 3px 7px rgba(60,60,60,.24),
        inset -2px -2px 6px rgba(255,255,255,.35),
        1px 1px 3px rgba(95,95,95,.1) !important;
    translate: 0 0;
}
/* Also works when a keyboard-focused button is pressed; outline is untouched. */
html:is([data-ak-embossed], [data-ak-surface]) body[data-page] :is(main, #rdSettingsOverlay, #rdTopupOverlay, #checkout-channel-modal,
    #checkout-wallet-pin-modal, .checkout-modal, .checkout-shell, .go-modal,
    .wallet-load-modal, .wallet-details-modal, .ak-receipt-dialog, .payment-handshake) :is(
    button:not(.mo-order__toggle), .btn, input[type="submit"], .ak-home-hero-cta, .auth-switch-btn,
    .auth-icon-button, .link-button, .plan-tab, .qty-btn, .go-qty__btn,
    .go-confirm, .rd-settings-btn, .rd-balance-open, .rd-copy-btn, .rd-fab,
    .sr-add-team-btn, .utility-card, .plan-result-row, a.service-card
):not(:where(
    header.site-header *, .site-footer *, .password-toggle, [role="switch"],
    [class*="scrim"], [class*="backdrop"], [aria-busy="true"] *, .is-processing *
)):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-processing):active {
    box-shadow: inset 3px 3px 7px rgba(60,60,60,.24),
        inset -2px -2px 6px rgba(255,255,255,.35),
        1px 1px 3px rgba(95,95,95,.1) !important;
    translate: 0 1px;
    scale: .98;
}

/* My Orders already uses the outer .mo-order as its tactile card. Keep the
   full-width toggle visually transparent so it cannot create a second card. */
html[data-ak-surface] body[data-page="my-order"] main.mo-page .mo-order > .mo-order__toggle,
html[data-ak-surface] body[data-page="my-order"] main.mo-page .mo-order > .mo-order__toggle:hover,
html[data-ak-surface] body[data-page="my-order"] main.mo-page .mo-order > .mo-order__toggle:focus-visible,
html[data-ak-surface] body[data-page="my-order"] main.mo-page .mo-order > .mo-order__toggle:active,
html[data-ak-surface] body[data-page="my-order"] main.mo-page .mo-order > .mo-order__toggle[aria-expanded="true"] {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    translate: none !important;
    scale: 1 !important;
}

html[data-ak-surface] body[data-page="my-order"] main.mo-page .mo-order > .mo-order__toggle:active {
    transform: scale(0.992);
}
/* Static checkout information gets depth, not a false clickable/press state.
   Never scale/translate a QR, PIN grid, dialog or payment-status container. */
html:is([data-ak-embossed], [data-ak-surface]) body[data-page] :is(#checkout-channel-modal, .checkout-modal, .checkout-shell, #rdTopupOverlay, .wallet-load-modal) :is(
    .checkout-channel-summary, .checkout-channel-wallet, .checkout-refined-wallet-balance,
    .checkout-premium-qr-surface, .rd-topup-panel, .rd-topup-preview
) {
    box-shadow: 4px 4px 11px rgba(95,95,95,.14),
        -3px -3px 9px rgba(255,255,255,.8),
        inset 0 1px 0 rgba(255,255,255,.5) !important;
}
/* Shadows only: retain every digit's width, masking, inputmode and focus flow. */
html:is([data-ak-embossed], [data-ak-surface]) body[data-page] :is(
    input[data-otp-box], input[data-pin-box], input[data-wallet-pin-digit],
    .checkout-wallet-pin-boxes input, .go-pin-boxes input, .rd-pin-boxes input,
    input[data-mobile-otp], input#profileWalletPinCurrent, input#profileWalletPinOtp,
    input#profileWalletPinNew, input#profileWalletPinConfirm
):not([type="hidden"]):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(:where(.is-processing *, [aria-busy="true"] *)):not(:focus) {
    box-shadow: inset 2px 2px 5px rgba(60,60,60,.17),
        inset -2px -2px 5px rgba(255,255,255,.75),
        0 1px 0 rgba(255,255,255,.8) !important;
}
html:is([data-ak-embossed], [data-ak-surface]) body[data-page] :is(
    input[data-otp-box], input[data-pin-box], input[data-wallet-pin-digit],
    .checkout-wallet-pin-boxes input, .go-pin-boxes input, .rd-pin-boxes input,
    input[data-mobile-otp], input#profileWalletPinCurrent, input#profileWalletPinOtp,
    input#profileWalletPinNew, input#profileWalletPinConfirm
):not([type="hidden"]):not(:disabled):not([readonly]):not([aria-invalid="true"]):not(:where(.is-processing *, [aria-busy="true"] *)):focus {
    box-shadow: inset 3px 3px 6px rgba(60,60,60,.2),
        inset -2px -2px 5px rgba(255,255,255,.75),
        0 0 0 2px rgba(95,95,95,.15) !important;
}
@media (prefers-reduced-motion: reduce) {
html:is([data-ak-embossed], [data-ak-surface]) body[data-page] :is(main, #rdSettingsOverlay, #rdTopupOverlay, #checkout-channel-modal,
    #checkout-wallet-pin-modal, .checkout-modal, .checkout-shell, .go-modal,
    .wallet-load-modal, .wallet-details-modal, .ak-receipt-dialog, .payment-handshake) :is(
    button:not(.mo-order__toggle), .btn, input[type="submit"], .ak-home-hero-cta, .auth-switch-btn,
    .auth-icon-button, .link-button, .plan-tab, .qty-btn, .go-qty__btn,
    .go-confirm, .rd-settings-btn, .rd-balance-open, .rd-copy-btn, .rd-fab,
    .sr-add-team-btn, .utility-card, .plan-result-row, a.service-card
):not(:where(
    header.site-header *, .site-footer *, .password-toggle, [role="switch"],
    [class*="scrim"], [class*="backdrop"], [aria-busy="true"] *, .is-processing *
)):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-processing) {
    transition: none !important;
    translate: none !important;
    scale: none !important;
}
}
/* AK EMBOSSED BUTTON EFFECTS END */

/* AK READABLE TYPOGRAPHY START
   A lighter hierarchy, not smaller type. No layout, visibility or colour changes
   to actions/statuses/dark branded surfaces. Icon fonts and previews excluded. */
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]):is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) body :is(main, .admin-wrap, #rdSettingsOverlay, #rdTopupOverlay, [role="dialog"]) :is(p, small, li, td, dt, dd, span):not(:where(
    h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, strong *, b *, button *, .btn *,
    .edPreviewFrame *, .edWidgetStage *, .public-theme-preview *, .receipt-shell *, .ak-receipt-dialog *, svg *, [aria-hidden="true"], [class*="icon"], [class*="icon"] *, [class*="Icon"], [class*="Icon"] *
)) { font-weight: 400 !important; }
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]):is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) body :is(main, .admin-wrap, #rdSettingsOverlay, #rdTopupOverlay, [role="dialog"]) :is(
    label, legend, summary, button, .btn, .btn span,
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select, textarea
):not(:where(.edPreviewFrame *, .edWidgetStage *, .public-theme-preview *, .receipt-shell *, .ak-receipt-dialog *, svg *, [aria-hidden="true"], [class*="icon"], [class*="icon"] *, [class*="Icon"], [class*="Icon"] *)) { font-weight: 500 !important; }
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]):is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) body :is(main, .admin-wrap, #rdSettingsOverlay, #rdTopupOverlay, [role="dialog"]) :is(
    h1, h2, h3, h4, h5, h6, strong, b, th,
    h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
    .admin-card-title, .bank-kpi-copy strong
):not(:where(.edPreviewFrame *, .edWidgetStage *, .public-theme-preview *, .receipt-shell *, .ak-receipt-dialog *, svg *, [aria-hidden="true"], [class*="icon"], [class*="icon"] *, [class*="Icon"], [class*="Icon"] *)) { font-weight: 600 !important; }
/* Navigation/header weights only: all original colours remain intact. */
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]):is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) body :is(
    .admin-sidebar .admin-nav-label, .admin-sidebar .admin-nav-section,
    .user-dashboard-sidebar__nav a, .ak-shell-page-heading strong, .user-name
) { font-weight: 500 !important; }
/* Dark charcoal only on ordinary text over the light workspace/cards. */
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]):is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) body :is(main, .admin-wrap, #rdSettingsOverlay, #rdTopupOverlay, [role="dialog"]) :is(
    h1, h2, h3, h4, h5, h6, p, label, legend, .admin-card-title
):not(:where(button, button *, .btn, .btn *, a, a *, thead *, tfoot *,
    header.site-header *, .site-footer *, .footer, .footer *,
    .bank-hero, .bank-hero *, .wallet-hero, .wallet-hero *,
    .wallet-banner, .wallet-banner *, .wallet-primary-card, .wallet-primary-card *,
    .hero-highlight-card, .hero-highlight-card *, .collection-primary-card, .collection-primary-card *,
    .checkout-modal *, .checkout-shell *, .payment-handshake *, .ak-wallet-pay-card *,
    .walletTableFooter *, .walletSummary *, .table-summary *, .pagination-bar *,
    .table-pagination *, .walletPagination *, .walletFooter *, .servicesHistoryFooter *,
    .coupon-table-footer *, .tableFooter *, .pager *,
    [data-tone], [data-tone] *, [role="status"], [role="status"] *, [role="alert"], [role="alert"] *,
    [class*="status"], [class*="status"] *, [class*="Status"], [class*="Status"] *,
    .badge, .badge *, .pill, .pill *, [class*="success"], [class*="success"] *,
    [class*="error"], [class*="error"] *, [class*="danger"], [class*="danger"] *,
    [class*="warning"], [class*="warning"] *, [class*="pending"], [class*="pending"] *,
    .selected, .selected *, .active, .active *, .is-active, .is-active *,
    [aria-selected="true"], [aria-selected="true"] *, [aria-pressed="true"], [aria-pressed="true"] *,
    .edPreviewFrame *, .edWidgetStage *, .public-theme-preview *, .receipt-shell *, .ak-receipt-dialog *, svg *, [aria-hidden="true"], [class*="icon"], [class*="icon"] *, [class*="Icon"], [class*="Icon"] *)) {
    color: #202a35 !important;
    -webkit-text-fill-color: currentColor !important;
}
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]):is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) body :is(main, .admin-wrap, #rdSettingsOverlay, #rdTopupOverlay, [role="dialog"]) :is(
    small, dt, .muted, .help-text, .form-note, .input-note, .workspace-subtext
):not(:where(button, button *, .btn, .btn *, a, a *, thead *, tfoot *,
    header.site-header *, .site-footer *, .footer, .footer *,
    .bank-hero, .bank-hero *, .wallet-hero, .wallet-hero *,
    .wallet-banner, .wallet-banner *, .wallet-primary-card, .wallet-primary-card *,
    .hero-highlight-card, .hero-highlight-card *, .collection-primary-card, .collection-primary-card *,
    .checkout-modal *, .checkout-shell *, .payment-handshake *, .ak-wallet-pay-card *,
    .walletTableFooter *, .walletSummary *, .table-summary *, .pagination-bar *,
    .table-pagination *, .walletPagination *, .walletFooter *, .servicesHistoryFooter *,
    .coupon-table-footer *, .tableFooter *, .pager *,
    [data-tone], [data-tone] *, [role="status"], [role="status"] *, [role="alert"], [role="alert"] *,
    [class*="status"], [class*="status"] *, [class*="Status"], [class*="Status"] *,
    .badge, .badge *, .pill, .pill *, [class*="success"], [class*="success"] *,
    [class*="error"], [class*="error"] *, [class*="danger"], [class*="danger"] *,
    [class*="warning"], [class*="warning"] *, [class*="pending"], [class*="pending"] *,
    .selected, .selected *, .active, .active *, .is-active, .is-active *,
    [aria-selected="true"], [aria-selected="true"] *, [aria-pressed="true"], [aria-pressed="true"] *,
    .edPreviewFrame *, .edWidgetStage *, .public-theme-preview *, .receipt-shell *, .ak-receipt-dialog *, svg *, [aria-hidden="true"], [class*="icon"], [class*="icon"] *, [class*="Icon"], [class*="Icon"] *)) {
    color: #46515f !important;
    -webkit-text-fill-color: currentColor !important;
}
/* AK READABLE TYPOGRAPHY END */

/* AK CHROME EFFECTS START
   Effects only. Keep brand colours, geometry, fixed-header stacking and menu behaviour.
   Do not transform header/footer controls or replace existing keyboard focus rings. */
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) header#site-header {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16), inset 0 -1px 0 rgba(255, 255, 255, .12) !important;
}
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) header#site-header .header-secondary {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -2px 4px rgba(0, 0, 0, .14), 0 3px 8px rgba(0, 0, 0, .10) !important;
}
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) footer.site-footer .ak-footer {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 -7px 24px rgba(0, 0, 0, .12) !important;
}
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) footer.site-footer :is(.ak-footer-bank__support, .ak-footer-bank__trust) {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px -1px 0 rgba(0, 0, 0, .12), 0 5px 14px rgba(0, 0, 0, .16) !important;
}
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) :is(
    header#site-header .category-chip,
    header#site-header .cta-btn,
    header#site-header .nav-toggle,
    header#site-header .ak-public-account > summary,
    header#site-header .ak-shell-identity,
    header#site-header .ak-shell-bell,
    header#site-header .ak-shell-balance-refresh,
    footer.site-footer .ak-footer-bank__socials a,
    footer.site-footer .ak-footer-bank__support > a,
    footer.site-footer .ak-footer-bank__app-banner,
    footer.site-footer .footer-link-row > a
):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-processing):not(:where([aria-busy="true"] *, .is-processing *)):not(:focus-visible) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .16), 0 2px 5px rgba(0, 0, 0, .16) !important;
    transition: box-shadow 150ms ease !important;
}
@media (hover: hover) and (pointer: fine) {
    html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) :is(
    header#site-header .category-chip,
    header#site-header .cta-btn,
    header#site-header .nav-toggle,
    header#site-header .ak-public-account > summary,
    header#site-header .ak-shell-identity,
    header#site-header .ak-shell-bell,
    header#site-header .ak-shell-balance-refresh,
    footer.site-footer .ak-footer-bank__socials a,
    footer.site-footer .ak-footer-bank__support > a,
    footer.site-footer .ak-footer-bank__app-banner,
    footer.site-footer .footer-link-row > a
):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-processing):not(:where([aria-busy="true"] *, .is-processing *)):not(:focus-visible):hover {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 4px 9px rgba(0, 0, 0, .22) !important;
    }
}
html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) :is(
    header#site-header .category-chip,
    header#site-header .cta-btn,
    header#site-header .nav-toggle,
    header#site-header .ak-public-account > summary,
    header#site-header .ak-shell-identity,
    header#site-header .ak-shell-bell,
    header#site-header .ak-shell-balance-refresh,
    footer.site-footer .ak-footer-bank__socials a,
    footer.site-footer .ak-footer-bank__support > a,
    footer.site-footer .ak-footer-bank__app-banner,
    footer.site-footer .footer-link-row > a
):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-processing):not(:where([aria-busy="true"] *, .is-processing *)):not(:focus-visible):is(:active, .active, .is-active, [aria-current="page"], [aria-pressed="true"], [aria-expanded="true"]) {
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .24), inset -1px -1px 2px rgba(255, 255, 255, .16) !important;
}
@media (prefers-reduced-motion: reduce) {
    html:is([data-ak-workspace], [data-ak-surface], [data-ak-embossed]) :is(
    header#site-header .category-chip,
    header#site-header .cta-btn,
    header#site-header .nav-toggle,
    header#site-header .ak-public-account > summary,
    header#site-header .ak-shell-identity,
    header#site-header .ak-shell-bell,
    header#site-header .ak-shell-balance-refresh,
    footer.site-footer .ak-footer-bank__socials a,
    footer.site-footer .ak-footer-bank__support > a,
    footer.site-footer .ak-footer-bank__app-banner,
    footer.site-footer .footer-link-row > a
):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):not(.is-processing):not(:where([aria-busy="true"] *, .is-processing *)):not(:focus-visible) {
        transition: none !important;
    }
}
/* AK CHROME EFFECTS END */