.reward-transfer-page {
    min-height: 70vh;
    background:
        radial-gradient(circle at 10% 0%, rgba(13, 110, 253, 0.08), transparent 32rem),
        radial-gradient(circle at 100% 20%, rgba(25, 135, 84, 0.07), transparent 28rem),
        #f7f9fc;
}

.reward-breadcrumb {
    font-size: 0.9rem;
}

.reward-breadcrumb a {
    color: #4f5f75;
    text-decoration: none;
}

.reward-breadcrumb a:hover {
    color: #0d6efd;
}

.transfer-shell {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8edf4;
    border-radius: 22px;
    box-shadow: 0 18px 55px rgba(34, 53, 84, 0.1);
}

.transfer-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 2rem 2.25rem;
    color: #fff;
}

.transfer-hero-points {
    background: linear-gradient(135deg, #315bd8 0%, #5c78e8 55%, #6b8df2 100%);
}

.transfer-hero-wallet {
    background: linear-gradient(135deg, #087a55 0%, #14936c 55%, #2eaa81 100%);
}

.transfer-hero-icon {
    display: inline-flex;
    flex: 0 0 70px;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    font-size: 1.75rem;
}

.transfer-hero h1 {
    color: #fff;
    font-weight: 700;
}

.transfer-hero p:not(.transfer-eyebrow) {
    max-width: 640px;
    color: rgba(255, 255, 255, 0.86);
}

.transfer-eyebrow {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.transfer-body {
    padding: 2rem 2.25rem 2.25rem;
}

.balance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.balance-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
    padding: 1rem 1.1rem;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #fafcff);
}

.balance-card-featured {
    border-color: rgba(25, 135, 84, 0.24);
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.08), rgba(25, 135, 84, 0.02));
}

.balance-card-secondary {
    background: #fbfcfe;
}

.balance-icon {
    display: inline-flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1.15rem;
}

.balance-icon-reward {
    color: #a66b00;
    background: #fff3cd;
}

.balance-icon-wallet {
    color: #087a55;
    background: #dff5ec;
}

.balance-icon-user {
    color: #315bd8;
    background: #e5ebff;
}

.balance-label {
    display: block;
    margin-bottom: 0.2rem;
    color: #6b778a;
    font-size: 0.84rem;
}

.balance-value {
    display: block;
    overflow-wrap: anywhere;
    color: #18243a;
    font-size: 1.25rem;
    line-height: 1.25;
}

.balance-value-small {
    font-size: 1.05rem;
}

.transfer-body .form-control,
.transfer-body .input-group-text {
    border-color: #dce3ed;
}

.transfer-body .form-control:focus {
    border-color: #8eb3ff;
    box-shadow: 0 0 0 0.22rem rgba(13, 110, 253, 0.12);
}

.transfer-body textarea.form-control {
    resize: vertical;
}

.transfer-amount-group .form-control {
    min-width: 0;
    font-weight: 700;
}

.amount-unit {
    color: #5c6778;
    font-size: 0.9rem;
    font-weight: 600;
}

.quick-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.quick-amounts .btn {
    border-radius: 999px;
}

.transfer-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid #cfe2ff;
    border-radius: 14px;
    color: #25486e;
    background: #f0f6ff;
}

.transfer-notice > i {
    margin-top: 0.15rem;
    color: #0d6efd;
    font-size: 1.15rem;
}

.transfer-notice p {
    margin-top: 0.15rem;
    color: #5a6c82;
    font-size: 0.9rem;
}

.transfer-notice-warning {
    border-color: #ffe69c;
    color: #6b5200;
    background: #fff9e6;
}

.transfer-notice-warning > i {
    color: #c58a00;
}

.transfer-notice-warning p {
    color: #75683c;
}

.transfer-result {
    padding: 1.25rem;
    border: 1px solid #badbcc;
    border-radius: 16px;
    background: #f2fbf7;
}

.transfer-result-header {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.transfer-result-icon {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    background: #198754;
}

.transfer-result h2 {
    margin-bottom: 0.15rem;
    color: #146c43;
    font-size: 1.1rem;
    font-weight: 700;
}

.transfer-result-message {
    margin-bottom: 0;
    color: #416653;
}

.transfer-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(25, 135, 84, 0.15);
    border-radius: 12px;
    background: #fff;
}

.transfer-result-item {
    min-width: 0;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid #edf1f4;
}

.transfer-result-item:nth-child(odd) {
    border-right: 1px solid #edf1f4;
}

.transfer-result-label {
    display: block;
    margin-bottom: 0.2rem;
    color: #748094;
    font-size: 0.78rem;
}

.transfer-result-value {
    display: block;
    overflow-wrap: anywhere;
    color: #1d2a3d;
    font-size: 0.94rem;
    font-weight: 650;
}

.transfer-switch {
    padding: 0.9rem 1rem;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    color: #59677b;
    background: rgba(255, 255, 255, 0.82);
    text-align: center;
}

.transfer-switch a {
    font-weight: 600;
    text-decoration: none;
}

.transfer-switch a:hover {
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .reward-transfer-page {
        padding-top: 1rem !important;
    }

    .transfer-shell {
        border-radius: 18px;
    }

    .transfer-hero {
        align-items: flex-start;
        padding: 1.5rem;
    }

    .transfer-hero-icon {
        flex-basis: 54px;
        width: 54px;
        height: 54px;
        border-radius: 16px;
        font-size: 1.25rem;
    }

    .transfer-hero h1 {
        font-size: 1.35rem;
    }

    .transfer-body {
        padding: 1.25rem;
    }

    .balance-grid,
    .transfer-result-grid {
        grid-template-columns: 1fr;
    }

    .transfer-result-item:nth-child(odd) {
        border-right: 0;
    }
}

@media (max-width: 420px) {
    .transfer-hero {
        gap: 0.85rem;
        padding: 1.25rem;
    }

    .transfer-hero-icon {
        display: none;
    }

    .balance-value {
        font-size: 1.08rem;
    }

    .quick-amounts .btn {
        flex: 1 1 calc(50% - 0.5rem);
    }
}