/* BytePay Premium Mobile — Fintech App Standard (< 992px) */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

@media (max-width: 991.98px) {
    :root {
        --bp-primary: #F97316;
        --bp-primary-rgb: 249, 115, 22;
        --bp-primary-dark: #EA580C;
        --bp-success: #F97316;
        --bp-success-rgb: 249, 115, 22;
        --bp-danger: #F04438;
        --bp-teal: #FB923C;
        --bp-teal-rgb: 251, 146, 60;
        --bp-bg: #F5F5F7;
        --bp-card: #FFFFFF;
        --bp-text: #1A1A1A;
        --bp-text-muted: #8E8E93;
        --bp-border: rgba(0, 0, 0, 0.06);
        --bp-radius: 16px;
        --bp-radius-sm: 14px;
        --bp-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        --bp-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.03);
        --bp-header-h: 56px;
        --bp-tabbar-h: 68px;

        --dk-brand: var(--bp-primary);
        --dk-brand-rgb: var(--bp-primary-rgb);
        --dk-brand-2: var(--bp-primary-dark);
        --dk-brand-dark: #C2410C;
        --dk-brand-glow: var(--bp-teal);
        --dk-brand-glow-rgb: var(--bp-teal-rgb);
        --dk-success: var(--bp-success);
        --dk-danger: var(--bp-danger);
        --dk-bg: var(--bp-bg);
        --dk-card: var(--bp-card);
        --dk-card-2: #FAFAFA;
        --dk-text: var(--bp-text);
        --dk-text-muted: var(--bp-text-muted);
        --dk-line: var(--bp-border);
        --dk-radius: var(--bp-radius);
        --dk-radius-sm: var(--bp-radius-sm);
        --dk-shadow-card: var(--bp-shadow-soft), var(--bp-shadow);
        --dk-shadow-fab: 0 14px 32px rgba(var(--bp-primary-rgb), 0.35);
        --dk-role-gradient: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
        --dk-role-gradient-deep: linear-gradient(135deg, #EA580C 0%, #F97316 52%, #FB923C 100%);
        --front-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    body.dashboard-user-layout {
        font-family: var(--front-font-primary);
        background: var(--bp-bg) !important;
        -webkit-font-smoothing: antialiased;
        padding-bottom: calc(var(--bp-tabbar-h) + env(safe-area-inset-bottom));
    }

    body.dashboard-home-route .dashboard-main-area,
    body.dashboard-home-route .dashboard-main-content {
        background: var(--bp-bg) !important;
        padding-top: 0 !important;
    }

    body.dashboard-home-route .dashboard-main-content > .container,
    body.dashboard-home-route .dashboard-main-content > .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    /* Hide legacy desktop dashboard on mobile */
    body.dashboard-home-route .user-dashboard {
        display: none !important;
    }

    /* App header */
    .dk-mobile-header {
        position: sticky;
        top: 0;
        z-index: 1040;
        height: var(--bp-header-h);
        padding: 8px 16px !important;
        background: rgba(255, 255, 255, 0.94) !important;
        border-bottom: 1px solid var(--bp-border);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .dk-mobile-header__profile {
        gap: 10px;
    }

    .dk-greet__txt {
        font-size: 17px;
        font-weight: 700;
        color: var(--bp-text);
        letter-spacing: -0.01em;
    }

    .dk-avatar {
        width: 42px;
        height: 42px;
        border: 2px solid rgba(var(--bp-primary-rgb), 0.14);
        box-shadow: 0 2px 8px rgba(var(--bp-primary-rgb), 0.1);
    }

    .dk-mobile-header__actions {
        gap: 6px;
    }

    .dk-icon-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: transparent;
        border: 0;
        color: var(--bp-text);
        font-size: 18px;
    }

    .dk-icon-btn--help {
        position: relative;
        font-size: 14px;
        font-weight: 700;
        color: var(--bp-primary);
    }

    .dk-icon-btn--help .dk-help-badge {
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 8px;
        font-weight: 800;
        color: #EC4899;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }

    .dk-icon-btn .badge-num {
        background: var(--bp-danger);
        border: 2px solid #fff;
        font-size: 9px;
        font-weight: 700;
        min-width: 16px;
        height: 16px;
        top: -2px;
        right: -2px;
    }

    /* Dashboard shell */
    .dk-mobile-dashboard {
        padding: 0 0 24px;
    }

    .dk-hero {
        padding: 12px 0 8px;
        background:
            radial-gradient(ellipse 120% 80% at 50% -20%, rgba(53, 99, 233, 0.14), transparent 55%),
            var(--bp-bg);
    }

    .dk-wallet-track {
        gap: 12px;
        padding: 0 16px 6px;
        scroll-snap-type: x mandatory;
        scroll-padding: 16px;
    }

    .dk-wallet-card {
        flex: 0 0 calc(100% - 32px);
        scroll-snap-align: center;
        min-height: 196px;
        border-radius: 22px !important;
        padding: 18px 18px 16px !important;
        border: none !important;
        background:
            radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.2) 0 32px, transparent 33px),
            radial-gradient(circle at 8% 92%, rgba(255, 255, 255, 0.06) 0 56px, transparent 57px),
            linear-gradient(145deg, #2849B8 0%, #3563E9 35%, #3B82F6 62%, #14B8A6 100%) !important;
        box-shadow:
            0 20px 44px rgba(var(--bp-primary-rgb), 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }

    .dk-wallet-card::before,
    .dk-wallet-card::after {
        display: none !important;
    }

    .dk-wc__top {
        margin-bottom: 4px;
    }

    .dk-wc__badge {
        background: rgba(255, 255, 255, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 999px;
        padding: 4px 10px;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.92);
    }

    .dk-wc__tools .dk-wc__act {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .dk-wc__id {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.75);
        margin-bottom: 2px;
    }

    .dk-wc__amount {
        font-size: 34px !important;
        font-weight: 800 !important;
        letter-spacing: -0.03em;
        line-height: 1.05;
        color: #fff !important;
        margin: 6px 0 14px;
    }

    .dk-wc__actions {
        gap: 10px;
    }

    .dk-wc__action {
        flex: 1;
        min-height: 44px !important;
        border-radius: 13px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        gap: 6px;
    }

    .dk-wc__action--primary {
        background: #fff !important;
        color: var(--bp-primary) !important;
        border: none !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    }

    .dk-wc__action--secondary {
        background: rgba(255, 255, 255, 0.12) !important;
        color: #fff !important;
        border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    }

    .dk-dots {
        gap: 6px;
        padding-top: 4px;
    }

    .dk-dots span {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: rgba(var(--bp-primary-rgb), 0.2);
        transition: width 0.2s ease, background 0.2s ease;
    }

    .dk-dots span[data-active="1"] {
        width: 20px;
        background: var(--bp-primary);
    }

    /* KYC banner */
    .dk-kyc {
        margin: 8px 16px 0;
        border-radius: 16px;
        background: #FFFAEB;
        border: 1px solid #FEDF89;
        padding: 12px 14px;
    }

    .dk-kyc[data-state="pending"] {
        background: #EFF8FF;
        border-color: #B2DDFF;
    }

    .dk-kyc[data-state="rejected"] {
        background: #FEF3F2;
        border-color: #FECDCA;
    }

    .dk-kyc__title {
        font-size: 13px;
        font-weight: 700;
        color: var(--bp-text);
    }

    .dk-kyc__sub {
        font-size: 11px;
        color: var(--bp-text-muted);
    }

    .dk-kyc__cta {
        font-size: 12px;
        font-weight: 700;
        color: var(--bp-primary);
        white-space: nowrap;
    }

    /* Section cards */
    .dk-section {
        margin: 12px 16px 0 !important;
        padding: 16px !important;
        border-radius: 20px !important;
        background: var(--bp-card) !important;
        border: 1px solid var(--bp-border) !important;
        box-shadow: var(--bp-shadow-soft) !important;
    }

    .dk-section__head {
        margin-bottom: 14px;
    }

    .dk-section__title {
        font-size: 15px;
        font-weight: 700;
        color: var(--bp-text);
        letter-spacing: -0.02em;
    }

    .dk-section__link,
    .dk-action-hub__more {
        font-size: 12px;
        font-weight: 600;
        color: var(--bp-primary);
    }

    /* Fintech circular quick actions */
    .dk-action-hub {
        padding-bottom: 18px !important;
    }

    .dk-action-hub__primary {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 4px 8px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
    }

    .dk-action-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 4px 2px !important;
        text-align: center;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        min-height: auto !important;
    }

    .dk-action-card:active {
        transform: scale(0.96);
    }

    .dk-action-card__icon {
        width: 54px !important;
        height: 54px !important;
        border-radius: 18px !important;
        display: grid !important;
        place-items: center;
        margin: 0 !important;
        background: #F0F4FF !important;
        border: 1px solid rgba(var(--bp-primary-rgb), 0.08);
        box-shadow: 0 4px 12px rgba(var(--bp-primary-rgb), 0.08);
    }

    .dk-action-card[data-tone="success"] .dk-action-card__icon {
        background: #ECFDF3 !important;
        border-color: rgba(var(--bp-success-rgb), 0.12);
    }

    .dk-action-card[data-tone="danger"] .dk-action-card__icon,
    .dk-action-card[data-tone="warning"] .dk-action-card__icon {
        background: #FEF3F2 !important;
        border-color: rgba(240, 68, 56, 0.12);
    }

    .dk-action-card[data-tone="agent"] .dk-action-card__icon,
    .dk-action-card[data-tone="merchant"] .dk-action-card__icon {
        background: #F4F3FF !important;
    }

    .dk-action-card__copy {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .dk-action-card__copy strong {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--bp-text) !important;
        line-height: 1.25;
    }

    .dk-action-card__copy small {
        display: none !important;
    }

    /* Secondary quick actions grid */
    .dk-quick-actions-panel {
        margin-top: 12px !important;
    }

    .dk-action-hub__subhead {
        margin-bottom: 12px;
        font-size: 13px;
        font-weight: 700;
        color: var(--bp-text);
    }

    .dk-qa-grid--compact {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 10px 8px !important;
    }

    .dk-qa-tile {
        border-radius: 14px !important;
        min-height: 96px !important;
        padding: 10px 4px 12px !important;
        background: #F8FAFC;
        border: 1px solid var(--bp-border);
        gap: 8px !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    .dk-qa-tile__ic {
        width: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
        flex-shrink: 0;
    }

    .dk-qa-tile__lb {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--dk-text) !important;
        line-height: 1.25 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        word-break: break-word;
        overflow-wrap: anywhere;
        min-height: 2.5em;
    }

    /* Snapshot stats rail */
    .dk-snapshot-section {
        margin-bottom: 0 !important;
        padding-bottom: 10px !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-bottom: none !important;
    }

    .dk-stats-rail {
        margin: 0 16px 12px;
        padding: 0 0 4px;
        gap: 10px;
    }

    .dk-stat-card {
        border-radius: 16px !important;
        min-width: 132px;
        padding: 12px 14px !important;
        background: var(--bp-card);
        border: 1px solid var(--bp-border);
        box-shadow: var(--bp-shadow-soft);
    }

    .dk-stat-card__lb {
        font-size: 10px;
        font-weight: 600;
        color: var(--bp-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .dk-stat-card__val {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--bp-text);
        margin-top: 4px;
    }

    /* Insight chart */
    .dk-insight {
        padding: 16px !important;
    }

    .dk-seg {
        background: #F2F4F7;
        border-radius: 12px;
        padding: 3px;
    }

    .dk-seg__btn {
        border-radius: 10px !important;
        font-size: 12px;
        font-weight: 600;
        padding: 8px 14px;
        color: var(--bp-text-muted);
    }

    .dk-seg__btn[data-active="1"] {
        background: var(--bp-primary) !important;
        color: #fff !important;
        box-shadow: 0 2px 8px rgba(var(--bp-primary-rgb), 0.25);
    }

    .dk-insight__num {
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--bp-text);
    }

    .dk-insight__sub {
        font-size: 12px;
        color: var(--bp-text-muted);
    }

    .dk-chart-shell {
        border-radius: 14px;
        background: #F8FAFC;
        border: 1px solid var(--bp-border);
        padding: 4px 0;
    }

    /* Activity / transactions */
    .dk-activity-section {
        padding-bottom: 8px !important;
    }

    .dk-trx-group__title {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--bp-text-muted);
        margin: 12px 0 8px;
        padding-left: 2px;
    }

    .dk-trx-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .dk-trx-row {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        border-radius: 16px !important;
        border: 1px solid var(--bp-border) !important;
        background: #FAFBFC !important;
        padding: 12px 14px !important;
        min-height: 68px;
        text-align: left;
        box-shadow: none !important;
    }

    .dk-trx-row:active {
        background: #F2F4F7 !important;
        transform: scale(0.99);
    }

    .dk-trx-row__ic {
        width: 42px !important;
        height: 42px !important;
        border-radius: 14px !important;
        flex-shrink: 0;
    }

    .dk-trx-row__body {
        flex: 1;
        min-width: 0;
    }

    .dk-trx-row__main {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
    }

    .dk-trx-row__title {
        font-size: 13px;
        font-weight: 600;
        color: var(--bp-text);
        line-height: 1.3;
    }

    .dk-trx-row__amt {
        font-size: 13px !important;
        font-weight: 700 !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .dk-trx-row__amt[data-dir="in"] {
        color: var(--bp-success) !important;
    }

    .dk-trx-row__amt[data-dir="out"] {
        color: var(--bp-text) !important;
    }

    .dk-trx-row__meta {
        margin-top: 2px;
        font-size: 11px;
        color: var(--bp-text-muted);
    }

    .dk-trx-row__badge {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 2px 6px;
        border-radius: 6px;
        background: rgba(var(--bp-primary-rgb), 0.1);
        color: var(--bp-primary);
    }

    /* Bottom tab bar */
    .dk-tabbar {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        padding-bottom: env(safe-area-inset-bottom);
        background: rgba(255, 255, 255, 0.98) !important;
        border-top: 1px solid var(--bp-border) !important;
        box-shadow: 0 -8px 32px rgba(16, 24, 40, 0.06);
    }

    .dk-tabbar__inner {
        min-height: var(--bp-tabbar-h);
        padding: 6px 8px 4px;
    }

    .dk-tab {
        color: var(--bp-text-muted) !important;
        font-size: 10px;
        font-weight: 600;
        gap: 3px;
        min-height: 48px;
    }

    .dk-tab i {
        font-size: 18px;
    }

    .dk-tab.is-active,
    .dk-tab[data-active="1"] {
        color: var(--bp-primary) !important;
    }

    .dk-fab-slot {
        position: relative;
    }

    .dk-fab {
        width: 58px !important;
        height: 58px !important;
        bottom: 18px !important;
        background: var(--bp-primary) !important;
        color: #fff !important;
        border: 3px solid #fff;
        box-shadow: var(--dk-shadow-fab) !important;
    }

    .dk-fab i {
        color: #fff !important;
        font-size: 20px;
    }

    .dk-fab.is-active {
        transform: scale(1.04);
    }

    .dk-fab-slot::after {
        content: 'Home';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        font-size: 10px;
        font-weight: 700;
        color: var(--bp-primary);
        pointer-events: none;
    }

    /* Bottom sheets */
    .dk-sheet {
        border-radius: 24px 24px 0 0 !important;
        background: var(--bp-card) !important;
    }

    .dk-sheet__handle {
        width: 40px;
        height: 4px;
        background: #D0D5DD;
        border-radius: 999px;
        margin: 10px auto 6px;
    }

    .dk-sheet__title,
    .quick-function-menu__heading {
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .dk-notif-panel {
        border-radius: 24px 24px 0 0 !important;
    }

    .dk-notif-item {
        border-radius: 14px;
        margin-bottom: 6px;
    }

    /* PWA prompt */
    .dk-pwa-prompt {
        border-radius: 18px;
        border: 1px solid var(--bp-border);
        box-shadow: var(--bp-shadow);
        margin: 0 16px 12px;
    }

    /* Empty states */
    .dk-mobile-empty,
    .dk-wallet-empty {
        border-radius: 16px;
        background: #F8FAFC;
        border: 1px dashed var(--bp-border);
    }

    /* Skeleton */
    .dk-skeleton {
        background: linear-gradient(90deg, #EEF2F6 25%, #F8FAFC 50%, #EEF2F6 75%);
        background-size: 200% 100%;
        animation: bp-shimmer 1.2s ease-in-out infinite;
        border-radius: 12px;
    }

    @keyframes bp-shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* ==========================================================
       OPay-style dashboard home (orange theme)
       ========================================================== */
    .dk-opay-home {
        padding: 0 0 24px;
        background: var(--bp-bg);
    }

    .dk-opay-wallet {
        padding: 8px 16px 0;
    }

    .dk-opay-wallet__card {
        border-radius: 18px;
        padding: 16px 16px 14px;
        color: #fff;
        background: linear-gradient(145deg, #EA580C 0%, #F97316 55%, #FB923C 100%);
        box-shadow: 0 12px 28px rgba(var(--bp-primary-rgb), 0.28);
    }

    .dk-opay-wallet__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 8px;
    }

    .dk-opay-wallet__label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.92);
    }

    .dk-opay-wallet__eye {
        border: 0;
        background: transparent;
        color: rgba(255, 255, 255, 0.9);
        padding: 0 4px;
        font-size: 14px;
    }

    .dk-opay-wallet__history {
        font-size: 12px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.95);
        text-decoration: none;
        white-space: nowrap;
    }

    .dk-opay-wallet__balance-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        text-decoration: none;
        color: inherit;
        margin-bottom: 14px;
    }

    .dk-opay-wallet__amount {
        font-size: 32px !important;
        font-weight: 800 !important;
        letter-spacing: -0.03em;
        color: #fff !important;
        margin: 0 !important;
    }

    .dk-opay-wallet__chevron {
        font-size: 14px;
        opacity: 0.85;
    }

    .dk-opay-wallet__cta-row {
        display: flex;
        justify-content: flex-end;
    }

    .dk-opay-wallet__add {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.95);
        color: var(--bp-primary-dark);
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .dk-opay-wallet__dots {
        justify-content: center;
        padding-top: 10px;
    }

    .dk-opay-wallet__dots span {
        background: rgba(var(--bp-primary-rgb), 0.2);
    }

    .dk-opay-wallet__dots span[data-active="1"] {
        background: var(--bp-primary);
    }

    .dk-opay-card {
        margin: 12px 16px 0;
        padding: 14px 12px;
        border-radius: 16px;
        background: var(--bp-card);
        border: 1px solid var(--bp-border);
        box-shadow: var(--bp-shadow-soft);
    }

    .dk-opay-recent__empty {
        padding: 16px 8px;
        text-align: center;
        font-size: 13px;
        color: var(--bp-text-muted);
    }

    .dk-opay-recent__row {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 10px 6px;
        border: 0;
        background: transparent;
        text-align: left;
    }

    .dk-opay-recent__row + .dk-opay-recent__row {
        border-top: 1px solid var(--bp-border);
    }

    .dk-opay-recent__icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #FFF7ED;
        color: var(--bp-primary);
        flex-shrink: 0;
    }

    .dk-opay-recent__copy {
        flex: 1;
        min-width: 0;
        display: grid;
        gap: 2px;
    }

    .dk-opay-recent__copy strong {
        font-size: 13px;
        font-weight: 700;
        color: var(--bp-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dk-opay-recent__copy span {
        font-size: 11px;
        color: var(--bp-text-muted);
    }

    .dk-opay-recent__meta {
        display: grid;
        gap: 2px;
        text-align: right;
        flex-shrink: 0;
    }

    .dk-opay-recent__meta strong {
        font-size: 13px;
        font-weight: 700;
        color: var(--bp-text);
    }

    .dk-opay-recent__meta em {
        font-style: normal;
        font-size: 11px;
        font-weight: 600;
        color: var(--bp-text-muted);
    }

    .dk-opay-recent__meta em.is-success {
        color: var(--bp-primary);
    }

    .dk-opay-quick__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .dk-opay-quick__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 8px 4px;
        text-decoration: none;
        color: var(--bp-text);
        font-size: 12px;
        font-weight: 600;
        text-align: center;
    }

    .dk-opay-quick__icon {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        background: #FFF7ED;
        color: var(--bp-primary);
    }

    .dk-opay-services__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px 8px;
    }

    .dk-opay-services__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 4px 2px;
        border: 0;
        background: transparent;
        text-decoration: none;
        color: var(--bp-text);
        font-size: 11px;
        font-weight: 600;
        text-align: center;
        line-height: 1.25;
    }

    .dk-opay-services__icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #FFF7ED;
        color: var(--bp-primary);
    }

    .dk-opay-promo {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 12px 16px 0;
        padding: 14px 16px;
        border-radius: 16px;
        background: var(--bp-card);
        border: 1px solid var(--bp-border);
        box-shadow: var(--bp-shadow-soft);
    }

    .dk-opay-promo__icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: #FFF7ED;
        color: var(--bp-primary);
        font-size: 18px;
        flex-shrink: 0;
    }

    .dk-opay-promo__copy {
        flex: 1;
        min-width: 0;
        display: grid;
        gap: 4px;
    }

    .dk-opay-promo__copy strong {
        font-size: 13px;
        font-weight: 700;
        color: var(--bp-text);
        line-height: 1.3;
    }

    .dk-opay-promo__copy span {
        font-size: 11px;
        color: var(--bp-text-muted);
        line-height: 1.35;
    }

    .dk-opay-promo__cta {
        flex-shrink: 0;
        padding: 8px 14px;
        border-radius: 999px;
        background: var(--bp-primary);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
    }

    .dk-opay-kyc {
        margin-top: 12px;
    }

    .dk-opay-activity {
        margin-top: 12px;
    }

    body.dashboard-home-route .dk-mobile-header {
        border-bottom: 0;
        background: var(--bp-bg) !important;
    }
}

/* Form screens on mobile */
@media (max-width: 991.98px) {
    .dashboard-main-content .card,
    .dashboard-main-content .single-form-card,
    .dashboard-main-content .site-card {
        border-radius: 20px !important;
        border: 1px solid var(--bp-border) !important;
        box-shadow: var(--bp-shadow-soft) !important;
    }

    .dashboard-main-content .form-control,
    .dashboard-main-content .form-select {
        min-height: 48px;
        border-radius: 14px;
        border-color: var(--bp-border);
        font-size: 15px;
    }

    .dashboard-main-content .btn-primary {
        background: var(--bp-primary) !important;
        border-color: var(--bp-primary) !important;
        min-height: 48px;
        border-radius: 14px;
        font-weight: 700;
    }

    .dashboard-main-content .page-title,
    .dashboard-main-content h4.title {
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--bp-text);
    }
}

/* Dark mode */
@media (max-width: 991.98px) {
    @media (prefers-color-scheme: dark) {
        body.dashboard-user-layout:not(.dk-theme-light) {
            --bp-bg: #0B1220;
            --bp-card: #111827;
            --bp-text: #F9FAFB;
            --bp-text-muted: #9CA3AF;
            --bp-border: rgba(255, 255, 255, 0.08);
        }
    }

    body.dk-theme-dark,
    body.dk-theme-dark.dashboard-user-layout {
        --bp-bg: #0B1220;
        --bp-card: #111827;
        --bp-text: #F9FAFB;
        --bp-text-muted: #9CA3AF;
        --bp-border: rgba(255, 255, 255, 0.08);
        --dk-bg: var(--bp-bg);
        --dk-card: var(--bp-card);
        --dk-text: var(--bp-text);
        --dk-text-muted: var(--bp-text-muted);
        --dk-line: var(--bp-border);
        background: var(--bp-bg) !important;
    }

    body.dk-theme-dark .dk-mobile-header {
        background: rgba(17, 24, 39, 0.96) !important;
    }

    body.dk-theme-dark .dk-section,
    body.dk-theme-dark .dk-insight,
    body.dk-theme-dark .dk-snapshot-section,
    body.dk-theme-dark .dk-activity-section,
    body.dk-theme-dark .dk-quick-actions-panel,
    body.dk-theme-dark .dk-action-hub {
        background: var(--bp-card) !important;
    }

    body.dk-theme-dark .dk-icon-btn {
        background: #1F2937;
        color: #F9FAFB;
    }

    body.dk-theme-dark .dk-action-card__icon {
        background: #1F2937 !important;
        border-color: var(--bp-border);
    }

    body.dk-theme-dark .dk-qa-tile {
        background: #1F2937;
    }

    html[data-theme="dark"] .dk-qa-tile__lb,
    body.dk-theme-dark .dk-qa-tile__lb {
        color: #E5E7EB !important;
    }

    @media (prefers-color-scheme: dark) {
        body.dashboard-user-layout:not(.dk-theme-light) .dk-qa-tile__lb {
            color: #E5E7EB !important;
        }
    }

    body.dk-theme-dark .dk-trx-row {
        background: #1F2937 !important;
    }

    body.dk-theme-dark .dk-stat-card {
        background: #1F2937;
    }

    body.dk-theme-dark .dk-tabbar {
        background: rgba(17, 24, 39, 0.98) !important;
    }

    body.dk-theme-dark .dk-chart-shell {
        background: #1F2937;
    }
}

/* Wallet Receive QR modal — mobile polish + orange theme */
@media (max-width: 991.98px) {
    body.modal-open .dk-tabbar,
    body.modal-open .dk-fab-slot {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }

    .wallet-receive-qr-modal {
        z-index: 1066 !important;
    }

    .wallet-receive-qr-modal.show ~ .modal-backdrop,
    .modal-backdrop.show {
        z-index: 1060 !important;
    }

    .wallet-receive-qr-modal .modal-dialog {
        max-width: min(420px, calc(100% - 24px));
        margin: auto;
        min-height: calc(100% - 1rem);
        display: flex;
        align-items: center;
    }

    .wallet-receive-qr-modal .modal-content {
        border-radius: 20px;
        border: 1px solid var(--bp-border);
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
    }

    .wallet-receive-qr-modal__hero {
        background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
        border-bottom-color: rgba(var(--bp-primary-rgb), 0.12);
    }

    .wallet-receive-qr-modal__mark {
        background: rgba(var(--bp-primary-rgb), 0.12);
        border-color: rgba(var(--bp-primary-rgb), 0.18);
        color: var(--bp-primary);
    }

    .wallet-receive-qr-modal__eyebrow {
        color: var(--bp-primary);
    }

    .wallet-receive-qr-modal__summary > div {
        border-color: rgba(var(--bp-primary-rgb), 0.12);
        background: #FFF7ED;
    }

    .wallet-receive-qr-modal__scan-card {
        border-color: rgba(var(--bp-primary-rgb), 0.12);
        background: #FFFBF5;
    }

    .wallet-receive-qr-modal__url {
        border-color: rgba(var(--bp-primary-rgb), 0.12);
    }

    .wallet-receive-qr-modal__url .form-control {
        background: #FFF7ED;
        font-size: 11px;
    }

    .wallet-receive-qr-modal__footer {
        border-top-color: rgba(var(--bp-primary-rgb), 0.1);
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .wallet-receive-qr-modal__primary {
        background: var(--bp-primary) !important;
        border-color: var(--bp-primary) !important;
        color: #fff !important;
        box-shadow: 0 8px 18px rgba(var(--bp-primary-rgb), 0.24);
    }

    .wallet-receive-qr-modal__secondary {
        background: #fff !important;
        border: 1px solid rgba(var(--bp-primary-rgb), 0.28) !important;
        color: var(--bp-primary-dark) !important;
    }

    .wallet-receive-qr-modal__secondary:hover,
    .wallet-receive-qr-modal__secondary:focus {
        background: #FFF7ED !important;
        color: var(--bp-primary-dark) !important;
    }
}