/* ================= RESET ================= */



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



:root {

    --primary-color: #2563eb;

    --primary-dark: #1d4ed8;

    --secondary-color: #06b6d4;

    --accent-color: #7c3aed;



    --page-background: #eef4ff;

    --card-background: #ffffff;

    --soft-blue: #dbeafe;



    --text-dark: #172033;

    --text-light: #64748b;

    --border-color: #e2e8f0;



    --container-width: 540px;



    --small-shadow: 0 5px 15px rgba(37, 99, 235, 0.08);

    --card-shadow: 0 12px 30px rgba(30, 64, 175, 0.14);

}



html {

    scroll-behavior: smooth;

}



body {

    min-height: 100vh;

    overflow-x: hidden;

    background: #dce7f8;

    color: var(--text-dark);

    font-family: Arial, Helvetica, sans-serif;

}



button,

input,

a {

    font-family: inherit;

    -webkit-tap-highlight-color: transparent;

}



button {

    border: none;

    outline: none;

    cursor: pointer;

}



a {

    color: inherit;

    text-decoration: none;

}





/* ================= WITHDRAW APP ================= */



.withdraw-app {

    width: 100%;

    max-width: var(--container-width);

    min-height: 100vh;

    margin: 0 auto;

    overflow: hidden;

    background:

        linear-gradient(

            180deg,

            #f8fafc,

            #eff6ff

        );

}





/* ================= HEADER ================= */



.withdraw-header {

    position: sticky;

    top: 0;

    z-index: 100;

    display: grid;

    grid-template-columns: 50px 1fr 50px;

    align-items: center;

    min-height: 82px;

    padding: 12px 18px;

    background:

        linear-gradient(

            135deg,

            var(--primary-color),

            var(--secondary-color)

        );

    box-shadow: 0 5px 15px rgba(30, 64, 175, 0.12);

}



.withdraw-header h1 {

    color: #ffffff;

    font-size: 25px;

    font-weight: 800;

    text-align: center;

}



.back-button {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    border-radius: 50%;

    color: #ffffff;

    font-size: 24px;

    transition:

        transform 0.2s ease,

        background 0.2s ease;

}



.back-button:active {

    background: rgba(255, 255, 255, 0.2);

    transform: scale(0.92);

}





/* ================= WITHDRAW HERO ================= */



.withdraw-hero {

    position: relative;

    min-height: 365px;

    padding: 112px 18px 0;

    border-radius: 0 0 45px 45px;

    background:

        linear-gradient(

            145deg,

            var(--primary-color),

            var(--secondary-color)

        );

}



.withdraw-hero::before {

    position: absolute;

    top: -130px;

    left: -120px;

    width: 330px;

    height: 330px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.07);

    content: "";

}



.withdraw-hero::after {

    position: absolute;

    right: -100px;

    bottom: -110px;

    width: 270px;

    height: 270px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.07);

    content: "";

}





/* ================= DETAIL BUTTON ================= */



.detail-button {

    position: absolute;

    top: 34px;

    right: 0;

    z-index: 4;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-width: 122px;

    min-height: 50px;

    padding: 11px 18px;

    border-radius: 28px 0 0 28px;

    background: #172033;

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;

}





/* ================= BALANCE TYPE ================= */



.balance-type-section {

    position: relative;

    z-index: 5;

}



.balance-type-section > h2 {

    color: #ffffff;

    font-size: 22px;

    font-weight: 800;

}



.balance-type-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 17px;

    margin-top: 20px;

    transform: translateY(48px);

}



.balance-type-card {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 0;

    min-height: 180px;

    padding: 20px 12px;

    border: 3px solid transparent;

    border-radius: 18px;

    background: #ffffff;

    color: var(--text-dark);

    box-shadow: var(--card-shadow);

    flex-direction: column;

    transition:

        border-color 0.2s ease,

        transform 0.2s ease,

        background 0.2s ease;

}



.balance-type-card:active {

    transform: scale(0.97);

}



.balance-type-card.active {

    border-color: var(--primary-color);

    background:

        linear-gradient(

            145deg,

            #ffffff,

            #eff6ff

        );

}



.balance-type-name {

    font-size: 18px;

    font-weight: 800;

}



.balance-type-card strong {

    margin-top: 17px;

    font-size: 29px;

    font-weight: 800;

}



.balance-type-card > i {

    margin-top: 23px;

    color: var(--text-light);

    font-size: 18px;

}



.selected-dot {

    width: 12px;

    height: 12px;

    margin-top: 12px;

    border-radius: 50%;

    background: transparent;

}



.balance-type-card.active .selected-dot {

    background:

        linear-gradient(

            135deg,

            var(--primary-color),

            var(--secondary-color)

        );

    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.1);

}





/* ================= WITHDRAW MAIN ================= */



.withdraw-main {

    padding: 90px 18px 40px;

}





/* ================= SECTION HEADINGS ================= */



.withdraw-amount-section > h2,

.section-heading h2 {

    color: var(--text-dark);

    font-size: 21px;

    font-weight: 800;

}





/* ================= WITHDRAW INPUT ================= */



.withdraw-input-wrapper {

    position: relative;

    display: flex;

    align-items: center;

    margin-top: 17px;

}



.input-currency {

    position: absolute;

    left: 20px;

    color: var(--primary-color);

    font-size: 21px;

    font-weight: 800;

}



.withdraw-input-wrapper input {

    width: 100%;

    min-height: 78px;

    padding: 18px 85px 18px 47px;

    border: 2px solid transparent;

    border-radius: 15px;

    outline: none;

    background: #ffffff;

    color: var(--text-dark);

    font-size: 17px;

    font-weight: 700;

    box-shadow: var(--small-shadow);

    transition:

        border-color 0.2s ease,

        box-shadow 0.2s ease;

}



.withdraw-input-wrapper input::placeholder {

    color: #94a3b8;

    font-size: 14px;

    font-weight: 600;

}



.withdraw-input-wrapper input:focus {

    border-color: var(--primary-color);

    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);

}



.withdraw-input-wrapper input::-webkit-inner-spin-button,

.withdraw-input-wrapper input::-webkit-outer-spin-button {

    margin: 0;

    appearance: none;

    -webkit-appearance: none;

}



.whole-amount-button {

    position: absolute;

    right: 18px;

    padding: 8px;

    background: transparent;

    color: var(--primary-color);

    font-size: 16px;

    font-weight: 800;

}



.amount-message {

    min-height: 18px;

    margin-top: 7px;

    color: #ef4444;

    font-size: 13px;

    font-weight: 600;

}





/* ================= RECEIVING ACCOUNT ================= */



.receiving-account-section {

    margin-top: 25px;

}



.section-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}



.withdraw-rule-button {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 0 8px 12px;

    background: transparent;

    color: var(--primary-color);

    font-size: 16px;

    font-weight: 800;

}



.receiving-account-list {

    display: flex;

    gap: 14px;

    margin-top: 18px;

    flex-direction: column;

}



.receiving-account-card {

    display: grid;

    grid-template-columns: 60px 1fr auto;

    align-items: center;

    gap: 14px;

    width: 100%;

    min-height: 92px;

    padding: 15px 18px;

    border: 2px dashed #cbd5e1;

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.72);

    text-align: left;

    transition:

        border-color 0.2s ease,

        background 0.2s ease,

        transform 0.2s ease;

}



.receiving-account-card:active {

    transform: scale(0.98);

}



.receiving-account-card.selected {

    border-color: var(--primary-color);

    background: #eff6ff;

}



.receiving-account-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;

    height: 54px;

    border-radius: 50%;

    font-weight: 800;

}



.bank-icon {

    background: #dbeafe;

    color: var(--primary-color);

    font-size: 21px;

}



.usdt-icon {

    background: #ccfbf1;

    color: #0f766e;

    font-size: 12px;

}



.receiving-account-information {

    display: flex;

    min-width: 0;

    flex-direction: column;

}



.receiving-account-information strong {

    color: var(--text-dark);

    font-size: 16px;

}



.receiving-account-information small {

    margin-top: 5px;

    color: var(--text-light);

    font-size: 12px;

    font-weight: 600;

}



.account-add-icon {

    color: var(--primary-color);

    font-size: 17px;

}





/* ================= SUBMIT BUTTON ================= */



.withdraw-submit-button {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 68px;

    margin-top: 22px;

    border-radius: 35px;

    background:

        linear-gradient(

            135deg,

            var(--primary-color),

            var(--secondary-color)

        );

    color: #ffffff;

    font-size: 19px;

    font-weight: 800;

    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.25);

    transition:

        transform 0.2s ease,

        opacity 0.2s ease;

}



.withdraw-submit-button:active:not(:disabled) {

    transform: scale(0.97);

}



.withdraw-submit-button:disabled {

    cursor: not-allowed;

    background: #cbd5e1;

    color: #94a3b8;

    opacity: 0.85;

    box-shadow: none;

}





/* ================= RESPONSIVE ================= */



@media (min-width: 600px) {

    .withdraw-app {

        box-shadow: 0 0 40px rgba(15, 23, 42, 0.15);

    }

}



@media (max-width: 440px) {

    .withdraw-header {

        min-height: 74px;

        padding-right: 13px;

        padding-left: 13px;

    }



    .withdraw-header h1 {

        font-size: 22px;

    }



    .withdraw-hero {

        min-height: 345px;

        padding-right: 13px;

        padding-left: 13px;

    }



    .balance-type-section > h2 {

        font-size: 20px;

    }



    .balance-type-grid {

        gap: 11px;

    }



    .balance-type-card {

        min-height: 165px;

        padding-right: 8px;

        padding-left: 8px;

    }



    .balance-type-name {

        font-size: 16px;

    }



    .balance-type-card strong {

        font-size: 25px;

    }



    .withdraw-main {

        padding-right: 13px;

        padding-left: 13px;

    }



    .withdraw-amount-section > h2,

    .section-heading h2 {

        font-size: 18px;

    }



    .withdraw-input-wrapper input {

        min-height: 72px;

        font-size: 16px;

    }



    .receiving-account-card {

        grid-template-columns: 52px 1fr auto;

        gap: 10px;

        min-height: 88px;

        padding-right: 13px;

        padding-left: 13px;

    }



    .receiving-account-icon {

        width: 48px;

        height: 48px;

    }



    .receiving-account-information strong {

        font-size: 14px;

    }



    .withdraw-rule-button {

        font-size: 14px;

    }

}



@media (max-width: 350px) {

    .balance-type-grid {

        gap: 8px;

    }



    .balance-type-card {

        min-height: 155px;

    }



    .balance-type-name {

        font-size: 14px;

    }



    .balance-type-card strong {

        font-size: 22px;

    }



    .receiving-account-information small {

        font-size: 10px;

    }

}



/* =========================================

   WITHDRAW FUNCTIONAL STATES

========================================= */



.withdraw-available-balance {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin: 10px 2px 0;

    color: #718188;

    font-size: 13px;

}



.withdraw-available-balance strong {

    color: #087d9f;

    font-size: 15px;

}



.withdraw-input-wrapper:focus-within {

    border-color: #0ba9c4;

    box-shadow: 0 0 0 3px rgba(11, 169, 196, 0.12);

}



.amount-message {

    min-height: 20px;

}



.amount-message.error {

    color: #e64747;

}



.amount-message.success {

    color: #079b70;

}



.receiving-account-card {

    border: 2px solid transparent;

    transition:

        border-color 0.2s ease,

        background 0.2s ease,

        transform 0.2s ease;

}



.receiving-account-card:active {

    transform: scale(0.98);

}



.receiving-account-card.bound {

    background: #f4fcfe;

}



.receiving-account-card.selected {

    border-color: #0ba9c4;

    background: #eafaff;

    box-shadow: 0 8px 20px rgba(8, 137, 165, 0.12);

}



.receiving-account-card.selected .account-add-icon {

    color: #08a879;

}



.withdraw-submit-button:disabled {

    cursor: not-allowed;

    opacity: 0.45;

    box-shadow: none;

}





/* =========================================

   WITHDRAW POPUPS

========================================= */



body.withdraw-popup-open {

    overflow: hidden;

}



.withdraw-popup {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: grid;

    place-items: center;

    padding: 20px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:

        opacity 0.25s ease,

        visibility 0.25s ease;

}



.withdraw-popup.open {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

}



.withdraw-popup-backdrop {

    position: absolute;

    inset: 0;

    background: rgba(2, 22, 31, 0.7);

    backdrop-filter: blur(5px);

}



.withdraw-popup-dialog {

    position: relative;

    z-index: 2;

    width: min(100%, 430px);

    padding: 28px 22px 22px;

    border: 1px solid #d9edf3;

    border-radius: 24px;

    background: #ffffff;

    box-shadow: 0 25px 70px rgba(0, 50, 68, 0.3);

    transform: translateY(24px) scale(0.96);

    transition: transform 0.25s ease;

}



.withdraw-popup.open .withdraw-popup-dialog {

    transform: translateY(0) scale(1);

}



.account-popup-dialog {

    max-height: calc(100vh - 30px);

    overflow-y: auto;

}



.withdraw-popup-close {

    position: absolute;

    top: 14px;

    right: 14px;

    width: 36px;

    height: 36px;

    display: grid;

    place-items: center;

    border: 0;

    border-radius: 50%;

    background: #edf8fb;

    color: #49616b;

    font-size: 17px;

    cursor: pointer;

}



.withdraw-popup-icon {

    width: 66px;

    height: 66px;

    display: grid;

    place-items: center;

    margin: 0 auto 15px;

    border-radius: 20px;

    background: linear-gradient(135deg, #16c8df, #087d9f);

    color: #ffffff;

    font-size: 27px;

    box-shadow: 0 10px 25px rgba(8, 145, 174, 0.25);

}



.withdraw-popup.success .withdraw-popup-icon {

    background: linear-gradient(135deg, #20cf99, #07976d);

}



.withdraw-popup-dialog h2 {

    margin: 0;

    color: #16323d;

    text-align: center;

    font-size: 24px;

}



.withdraw-popup-message {

    margin: 9px auto 20px;

    color: #718188;

    text-align: center;

    font-size: 14px;

    line-height: 1.5;

}



.receiving-account-form {

    display: grid;

    gap: 14px;

}



.account-input-group {

    display: grid;

    gap: 7px;

    margin-bottom: 13px;

}



.account-input-group[hidden] {

    display: none !important;

}



.account-input-group span {

    color: #536971;

    font-size: 13px;

    font-weight: 700;

}



.account-input-group input,

.account-input-group select {

    width: 100%;

    min-height: 49px;

    padding: 0 14px;

    border: 1px solid #d8e7eb;

    border-radius: 13px;

    outline: none;

    background: #f8fcfd;

    color: #173641;

    font-size: 14px;

}



.account-input-group input:focus,

.account-input-group select:focus {

    border-color: #0ba9c4;

    box-shadow: 0 0 0 3px rgba(11, 169, 196, 0.1);

}



.account-form-error {

    min-height: 20px;

    margin: -5px 0 0;

    color: #e64747;

    font-size: 13px;

    font-weight: 700;

}



.withdraw-summary {

    overflow: hidden;

    border: 1px solid #dfedf1;

    border-radius: 15px;

}



.withdraw-summary-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    padding: 13px 14px;

    border-bottom: 1px solid #e7f0f3;

}



.withdraw-summary-row:last-child {

    border-bottom: 0;

}



.withdraw-summary-row span {

    color: #6c7d84;

    font-size: 13px;

}



.withdraw-summary-row strong {

    max-width: 58%;

    color: #173641;

    text-align: right;

    font-size: 14px;

    overflow-wrap: anywhere;

}



.balance-after-row {

    background: #effbfe;

}



.balance-after-row strong {

    color: #087d9f;

    font-size: 17px;

}



.shortfall-row strong {

    color: #e64747;

}



.withdraw-rules-list {

    margin: 0;

    padding: 5px 5px 5px 25px;

    color: #536971;

    font-size: 14px;

    line-height: 1.65;

}



.withdraw-popup [hidden] {

    display: none !important;

}



.withdraw-popup-actions {

    display: grid;

    grid-template-columns: 1fr 1.45fr;

    gap: 11px;

    margin-top: 20px;

}



.withdraw-popup-cancel,

.withdraw-popup-action {

    min-height: 50px;

    border-radius: 14px;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

}



.withdraw-popup-cancel {

    border: 1px solid #d6e5e9;

    background: #ffffff;

    color: #61757d;

}



.withdraw-popup-action {

    border: 0;

    background: linear-gradient(135deg, #14c8df, #087d9f);

    color: #ffffff;

    box-shadow: 0 9px 20px rgba(8, 137, 165, 0.22);

}



.withdraw-popup-action:disabled {

    cursor: wait;

    opacity: 0.65;

}



@media (max-width: 480px) {

    .withdraw-popup {

        align-items: end;

        padding: 12px;

    }



    .withdraw-popup-dialog {

        width: 100%;

        padding: 27px 18px 18px;

        border-radius: 24px 24px 18px 18px;

    }

}



/* =========================================

   WITHDRAWAL SECURITY GATE

========================================= */



.withdraw-security-section {

    margin-top: 25px;

    padding: 17px;

    border: 1px solid #cfe3f8;

    border-radius: 18px;

    background:

        linear-gradient(

            145deg,

            rgba(255, 255, 255, 0.96),

            rgba(239, 248, 255, 0.96)

        );

    box-shadow: 0 10px 24px rgba(30, 64, 175, 0.08);

}



.withdraw-security-heading,

.withdraw-security-heading > div,

.withdraw-security-status,

.withdraw-pin-control {

    display: flex;

    align-items: center;

}



.withdraw-security-heading {

    justify-content: space-between;

    gap: 12px;

}



.withdraw-security-heading > div {

    min-width: 0;

    gap: 10px;

}



.withdraw-security-icon {

    display: grid;

    flex: 0 0 auto;

    width: 38px;

    height: 38px;

    place-items: center;

    border-radius: 12px;

    background: linear-gradient(135deg, #2563eb, #06b6d4);

    color: #ffffff;

    font-size: 16px;

    box-shadow: 0 7px 14px rgba(37, 99, 235, 0.2);

}



.withdraw-security-heading h2 {

    margin: 0;

    color: var(--text-dark);

    font-size: 16px;

    font-weight: 800;

}



.withdraw-security-heading small {

    display: block;

    margin-top: 3px;

    color: var(--text-light);

    font-size: 10px;

    font-weight: 600;

}



.withdraw-security-manage {

    display: inline-flex;

    flex: 0 0 auto;

    align-items: center;

    gap: 5px;

    min-height: 34px;

    padding: 7px 10px;

    border: 1px solid #bfdbfe;

    border-radius: 10px;

    background: #eff6ff;

    color: #1d4ed8;

    font-size: 11px;

    font-weight: 800;

}



.withdraw-security-status-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 9px;

    margin-top: 15px;

}



.withdraw-security-status {

    min-width: 0;

    gap: 9px;

    min-height: 58px;

    padding: 10px;

    border: 1px solid #dbe7f3;

    border-radius: 13px;

    background: rgba(255, 255, 255, 0.8);

}



.withdraw-security-status > i {

    flex: 0 0 auto;

    color: #64748b;

    font-size: 16px;

}



.withdraw-security-status > span {

    min-width: 0;

}



.withdraw-security-status strong,

.withdraw-security-status small {

    display: block;

}



.withdraw-security-status strong {

    color: var(--text-dark);

    font-size: 11px;

    line-height: 1.3;

}



.withdraw-security-status small {

    margin-top: 3px;

    color: #64748b;

    font-size: 10px;

    font-weight: 700;

}



.withdraw-security-status[data-status="approved"] {

    border-color: #9ee2ca;

    background: #effcf7;

}



.withdraw-security-status[data-status="approved"] > i,

.withdraw-security-status[data-status="approved"] small {

    color: #07825e;

}



.withdraw-security-status[data-status="pending"] {

    border-color: #f5d58a;

    background: #fffaf0;

}



.withdraw-security-status[data-status="pending"] > i,

.withdraw-security-status[data-status="pending"] small {

    color: #a16207;

}



.withdraw-security-status[data-status="rejected"],

.withdraw-security-status[data-status="not_submitted"],

.withdraw-security-status[data-status="error"] {

    border-color: #fecaca;

    background: #fff7f7;

}



.withdraw-security-status[data-status="rejected"] > i,

.withdraw-security-status[data-status="rejected"] small,

.withdraw-security-status[data-status="not_submitted"] > i,

.withdraw-security-status[data-status="not_submitted"] small,

.withdraw-security-status[data-status="error"] > i,

.withdraw-security-status[data-status="error"] small {

    color: #c2413b;

}



.withdraw-pin-field {

    display: block;

    margin-top: 15px;

}



.withdraw-pin-field > span:first-child {

    display: block;

    margin: 0 2px 7px;

    color: var(--text-dark);

    font-size: 12px;

    font-weight: 800;

}



.withdraw-pin-control {

    position: relative;

    min-height: 52px;

    overflow: hidden;

    border: 1px solid #cbdcec;

    border-radius: 13px;

    background: #ffffff;

    transition:

        border-color 0.2s ease,

        box-shadow 0.2s ease;

}



.withdraw-pin-control:focus-within {

    border-color: #2563eb;

    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11);

}



.withdraw-pin-control > i {

    flex: 0 0 auto;

    margin-left: 15px;

    color: #2563eb;

    font-size: 14px;

}



.withdraw-pin-control input {

    width: 100%;

    min-width: 0;

    min-height: 50px;

    padding: 12px 48px 12px 11px;

    border: 0;

    outline: 0;

    background: transparent;

    color: var(--text-dark);

    font-size: 16px;

    font-weight: 800;

    letter-spacing: 0.18em;

}



.withdraw-pin-control input::placeholder {

    color: #94a3b8;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: normal;

}



.withdraw-pin-control input:disabled {

    cursor: not-allowed;

    opacity: 0.65;

}



.withdraw-pin-toggle {

    position: absolute;

    top: 50%;

    right: 4px;

    display: grid;

    width: 42px;

    height: 42px;

    place-items: center;

    border-radius: 10px;

    background: transparent;

    color: #64748b;

    transform: translateY(-50%);

}



.withdraw-pin-toggle:disabled {

    cursor: not-allowed;

    opacity: 0.45;

}



.withdraw-security-message {

    min-height: 16px;

    margin: 8px 2px 0;

    color: #64748b;

    font-size: 10px;

    font-weight: 650;

    line-height: 1.45;

}



.withdraw-security-message.success {

    color: #07825e;

}



.withdraw-security-message.error {

    color: #c2413b;

}



html:is(.dark-theme, [data-marathon-theme="dark"])

.withdraw-security-section {

    border-color: #334155;

    background:

        linear-gradient(

            145deg,

            rgba(30, 41, 59, 0.98),

            rgba(15, 23, 42, 0.98)

        );

}



html:is(.dark-theme, [data-marathon-theme="dark"])

.withdraw-security-manage {

    border-color: #3b5b86;

    background: #172554;

    color: #93c5fd;

}



html:is(.dark-theme, [data-marathon-theme="dark"])

.withdraw-security-status {

    border-color: #334155;

    background: #172033;

}



html:is(.dark-theme, [data-marathon-theme="dark"])

.withdraw-security-status[data-status="approved"] {

    border-color: #166c54;

    background: #12372f;

}



html:is(.dark-theme, [data-marathon-theme="dark"])

.withdraw-security-status[data-status="pending"] {

    border-color: #805f20;

    background: #3b2c13;

}



html:is(.dark-theme, [data-marathon-theme="dark"])

:is(

    .withdraw-security-status[data-status="rejected"],

    .withdraw-security-status[data-status="not_submitted"],

    .withdraw-security-status[data-status="error"]

) {

    border-color: #7f3538;

    background: #3b1e24;

}



html:is(.dark-theme, [data-marathon-theme="dark"])

.withdraw-pin-control {

    border-color: #475569;

    background: #172033;

}



@media (max-width: 440px) {

    .withdraw-security-section {

        padding: 14px;

    }



    .withdraw-security-status-grid {

        grid-template-columns: 1fr;

    }



    .withdraw-security-status {

        min-height: 52px;

    }

}





/* =========================================

   INR / USDT WALLET MODES

========================================= */



.receiving-account-card[hidden],

.detail-button[hidden],

.withdraw-rule-button[hidden],

.usdt-setup-notice[hidden] {

    display: none !important;

}



.balance-type-card > small {

    margin-top: 10px;

    color: var(--text-light);

    font-size: 11px;

    font-weight: 700;

}



.balance-type-card[data-wallet-currency="USDT"] strong {

    max-width: 100%;

    font-size: 22px;

    overflow-wrap: anywhere;

}



.balance-type-card[data-wallet-currency="USDT"].active {

    border-color: #0aa6bd;

    background: linear-gradient(145deg, #ffffff, #ecfeff);

}



.usdt-setup-notice {

    display: grid;

    grid-template-columns: 46px 1fr;

    align-items: start;

    gap: 13px;

    margin-top: 22px;

    padding: 16px;

    border: 1px solid #8ed8e2;

    border-radius: 16px;

    background: #effcfe;

    color: #234751;

}



.usdt-setup-icon {

    display: grid;

    place-items: center;

    width: 46px;

    height: 46px;

    border-radius: 13px;

    background: linear-gradient(135deg, #16c6da, #0787a6);

    color: #ffffff;

    font-size: 19px;

}



.usdt-setup-notice strong,

.usdt-setup-notice small {

    display: block;

}



.usdt-setup-notice strong {

    color: #123945;

    font-size: 14px;

}



.usdt-setup-notice small {

    margin-top: 5px;

    color: #60777f;

    font-size: 11px;

    line-height: 1.5;

}



.withdraw-input-wrapper input:disabled {

    cursor: not-allowed;

    background: #edf3f6;

    color: #84969d;

    box-shadow: none;

}



.whole-amount-button:disabled {

    cursor: not-allowed;

    color: #9aabb2;

}



body[data-withdraw-currency="USDT"] .input-currency {

    left: 17px;

    font-size: 12px;

}



body[data-withdraw-currency="USDT"] .withdraw-input-wrapper input {

    padding-left: 62px;

}



body[data-withdraw-currency="USDT"] .withdraw-submit-button:disabled {

    opacity: 1;

    background: #d6e3e8;

    color: #698089;

}



@media (max-width: 380px) {

    .balance-type-card[data-wallet-currency="USDT"] strong {

        font-size: 17px;

    }



    .usdt-setup-notice {

        grid-template-columns: 40px 1fr;

        padding: 13px;

    }



    .usdt-setup-icon {

        width: 40px;

        height: 40px;

    }

}



/* =========================================

   WITHDRAWAL DETAIL MODAL

========================================= */



body.withdraw-detail-open {

    overflow: hidden;

}



.withdraw-detail-modal {

    position: fixed;

    inset: 0;

    z-index: 100001;

    display: grid;

    place-items: center;

    padding: 20px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:

        opacity 0.25s ease,

        visibility 0.25s ease;

}



.withdraw-detail-modal.open {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

}



.withdraw-detail-backdrop {

    position: absolute;

    inset: 0;

    background: rgba(2, 22, 31, 0.72);

    backdrop-filter: blur(5px);

}



.withdraw-detail-dialog {

    position: relative;

    z-index: 2;

    width: min(100%, 450px);

    max-height: calc(100vh - 35px);

    overflow-y: auto;

    padding: 28px 20px 20px;

    border: 1px solid #d9edf3;

    border-radius: 24px;

    background: #ffffff;

    box-shadow: 0 25px 70px rgba(0, 50, 68, 0.3);

    transform: translateY(24px) scale(0.96);

    transition: transform 0.25s ease;

}



.withdraw-detail-modal.open

.withdraw-detail-dialog {

    transform: translateY(0) scale(1);

}



.withdraw-detail-close {

    position: absolute;

    top: 14px;

    right: 14px;

    width: 36px;

    height: 36px;

    display: grid;

    place-items: center;

    border: 0;

    border-radius: 50%;

    background: #edf8fb;

    color: #49616b;

    font-size: 17px;

    cursor: pointer;

}



.withdraw-detail-icon {

    width: 64px;

    height: 64px;

    display: grid;

    place-items: center;

    margin: 0 auto 14px;

    border-radius: 19px;

    background: linear-gradient(135deg, #ff836f, #df4d4d);

    color: #ffffff;

    font-size: 25px;

}



.withdraw-detail-dialog > h2 {

    margin: 0;

    color: #16323d;

    text-align: center;

    font-size: 23px;

}



.withdraw-detail-description {

    margin: 8px auto 18px;

    color: #718188;

    text-align: center;

    font-size: 13px;

}



.withdraw-detail-statistics {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 9px;

}



.withdraw-detail-statistic {

    padding: 13px;

    border-radius: 14px;

    background: #f4fafb;

}



.withdraw-detail-statistic span {

    display: block;

    margin-bottom: 5px;

    color: #798a90;

    font-size: 10px;

}



.withdraw-detail-statistic strong {

    display: block;

    color: #173641;

    font-size: 15px;

    overflow-wrap: anywhere;

}



.withdraw-detail-statistic.pending-stat strong {

    color: #d58a0a;

}



.withdraw-detail-statistic.success-stat strong {

    color: #079b70;

}



.withdraw-history-section {

    margin-top: 19px;

}



.withdraw-history-section h3 {

    margin: 0 0 11px;

    color: #173641;

    font-size: 16px;

}



.withdraw-detail-list {

    display: grid;

    gap: 9px;

    max-height: 310px;

    overflow-y: auto;

}



.withdraw-detail-record {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px;

    border: 1px solid #e0edf1;

    border-radius: 14px;

}



.withdraw-record-icon {

    flex: 0 0 42px;

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 12px;

    background: #fff0ee;

    color: #df514a;

}



.withdraw-record-information {

    min-width: 0;

    flex: 1;

}



.withdraw-record-information strong {

    display: block;

    color: #173641;

    font-size: 13px;

}



.withdraw-record-information small {

    display: block;

    margin-top: 3px;

    color: #89979c;

    font-size: 9px;

    overflow-wrap: anywhere;

}



.withdraw-record-status {

    display: inline-block;

    margin-top: 4px;

    padding: 3px 6px;

    border-radius: 999px;

    font-size: 8px;

    font-weight: 800;

    text-transform: uppercase;

}



.withdraw-record-status.pending {

    background: #fff3d9;

    color: #d58a0a;

}



.withdraw-record-status.successful {

    background: #e1f8ef;

    color: #079b70;

}



.withdraw-record-status.failed {

    background: #ffe7e5;

    color: #df514a;

}



.withdraw-record-amount {

    text-align: right;

}



.withdraw-record-amount strong {

    display: block;

    color: #df514a;

    font-size: 13px;

}



.withdraw-record-amount small {

    display: block;

    margin-top: 3px;

    color: #87969b;

    font-size: 9px;

}



.withdraw-detail-empty {

    padding: 30px 15px;

    text-align: center;

}



.withdraw-detail-empty i {

    margin-bottom: 11px;

    color: #a9dce5;

    font-size: 40px;

}



.withdraw-detail-empty h3 {

    margin: 0 0 5px;

    color: #37545e;

    font-size: 17px;

}



.withdraw-detail-empty p {

    margin: 0;

    color: #8a989d;

    font-size: 11px;

}



.withdraw-detail-done {

    width: 100%;

    min-height: 49px;

    margin-top: 19px;

    border: 0;

    border-radius: 14px;

    background: linear-gradient(135deg, #14c8df, #087d9f);

    color: #ffffff;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

}



@media (max-width: 480px) {

    .withdraw-detail-modal {

        align-items: end;

        padding: 12px;

    }



    .withdraw-detail-dialog {

        width: 100%;

        padding: 27px 17px 18px;

        border-radius: 24px 24px 18px 18px;

    }

}