:root{
            --fd-bg:#f3f7ff;
            --fd-bg-soft:#eef4ff;
            --fd-card:#ffffff;
            --fd-card-2:#f8fbff;
            --fd-line:#dbe7ff;
            --fd-line-soft:#e9f0ff;
            --fd-text:#081226;
            --fd-text-2:#12213f;
            --fd-muted:#667694;
            --fd-blue:#155dfc;
            --fd-blue-2:#2563eb;
            --fd-blue-3:#0f3fbf;
            --fd-blue-soft:#e9f1ff;
            --fd-green:#16a34a;
            --fd-green-2:#22c55e;
            --fd-green-soft:#ecfdf3;
            --fd-red:#dc2626;
            --fd-gold:#eab308;
            --fd-shadow:0 16px 42px rgba(17,39,84,.10);
            --fd-shadow-soft:0 10px 28px rgba(17,39,84,.08);
            --fd-radius-xl:28px;
            --fd-radius-lg:22px;
            --fd-radius-md:18px;
        }

        *{box-sizing:border-box}

        html,body{
            margin:0;
            padding:0;
            background:
                radial-gradient(circle at top left, rgba(37,99,235,.08), transparent 28%),
                radial-gradient(circle at top right, rgba(34,197,94,.06), transparent 22%),
                linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
            color:var(--fd-text);
            font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
        }

        body,button,input,select,textarea{font-weight:600}
        h1,h2,h3,h4,h5,strong,b{font-weight:800!important;letter-spacing:-.02em;color:var(--fd-text)}
        p,span,small,div,a{color:inherit}
        .hidden{display:none!important}

        .page.page-light{
            max-width:520px;
            margin:0 auto;
            min-height:100vh;
            padding:18px 16px 118px;
            background:transparent;
        }

        .ft-topbar{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin-bottom:18px;
        }

        .icon-btn{
            width:46px;
            height:46px;
            border:none;
            border-radius:16px;
            background:rgba(255,255,255,.92);
            color:var(--fd-blue-2);
            box-shadow:var(--fd-shadow-soft);
            display:flex;
            align-items:center;
            justify-content:center;
            backdrop-filter:blur(14px);
        }

        .icon-btn svg{width:20px;height:20px}
        .ft-topbar-center h1{
            margin:0;
            font-size:1.22rem;
            text-align:center;
            color:var(--fd-text);
        }

        .wallet-hero-card,
        .panel-light,
        .plan-status-card,
        .binance-connect-card,
        .referral-pending-card,
        .account-light-card{
            border:1px solid var(--fd-line);
            background:rgba(255,255,255,.94);
            box-shadow:var(--fd-shadow);
            backdrop-filter:blur(16px);
        }

        .wallet-hero-card{
            display:grid;
            gap:14px;
            padding:20px;
            border-radius:30px;
            margin-bottom:16px;
            background:
                radial-gradient(circle at top right, rgba(34,197,94,.10), transparent 24%),
                radial-gradient(circle at bottom left, rgba(21,93,252,.12), transparent 30%),
                linear-gradient(180deg,#ffffff 0%,#f6faff 100%);
        }

        .wallet-hero-top{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:14px;
        }

        .wallet-hero-top small{
            display:block;
            color:var(--fd-blue-2);
            text-transform:uppercase;
            letter-spacing:.08em;
            font-size:.72rem;
            font-weight:900;
            margin-bottom:8px;
        }

        .wallet-hero-top h2{
            margin:0;
            font-size:1.35rem;
            line-height:1.04;
        }

        .wallet-hero-top p{
            margin:8px 0 0;
            color:var(--fd-muted);
            font-size:.92rem;
            line-height:1.48;
            font-weight:700;
        }

        .wallet-hero-badge{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            border-radius:999px;
            padding:10px 14px;
            white-space:nowrap;
            font-size:.76rem;
            font-weight:900;
            color:#166534;
            background:var(--fd-green-soft);
            border:1px solid #005a20;
            box-shadow:0 8px 20px rgba(22,163,74,.10);
        }

        .wallet-hero-badge.pending{
            color:#92400e;
            background:#fff7ed;
            border-color:#fed7aa;
        }

        .wallet-hero-grid,
        .summary-grid{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:12px;
        }

        .hero-stat,
        .summary-card{
            border-radius:20px;
            background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
            border:1px solid var(--fd-line-soft);
            box-shadow:0 8px 18px rgba(17,39,84,.05);
            padding:15px 14px;
        }

        .hero-stat span,
        .summary-card span{
            display:block;
            color:var(--fd-muted);
            font-size:.74rem;
            margin-bottom:8px;
            font-weight:800;
        }

        .hero-stat strong,
        .summary-card strong{
            display:block;
            font-size:1.08rem;
            line-height:1.15;
        }

        .panel-light{
            padding:18px;
            border-radius:28px;
            margin-bottom:16px;
            background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
        }

        .panel-light-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-bottom:14px;
        }

        .panel-light-head h3{
            margin:0;
            font-size:1.08rem;
        }

        .panel-mini-badge,
        .mini-status-badge,
        .badge{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            border-radius:999px;
            padding:8px 12px;
            font-size:.74rem;
            font-weight:900;
            white-space:nowrap;
        }

        .panel-mini-badge{
            color:var(--fd-blue-3);
            background:var(--fd-blue-soft);
            border:1px solid #cfe0ff;
        }

        .mini-status-badge.success,
        .badge.success{
            color:#166534;
            background:var(--fd-green-soft);
            border:1px solid #bbf7d0;
        }

        .mini-status-badge.warning,
        .badge.warning{
            color:#92400e;
            background:#fff7ed;
            border:1px solid #fed7aa;
        }

        .mini-status-badge.danger,
        .badge.danger{
            color:#b91c1c;
            background:#fef2f2;
            border:1px solid #fecaca;
        }

        .plan-status-card{
            border-radius:24px;
            padding:18px;
            background:
                radial-gradient(circle at top right, rgba(234,179,8,.12), transparent 24%),
                radial-gradient(circle at bottom left, rgba(21,93,252,.10), transparent 28%),
                linear-gradient(180deg,#ffffff 0%,#f9fbff 100%);
            margin-bottom:14px;
        }

        .plan-status-top{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:12px;
            margin-bottom:14px;
        }

        .plan-status-top small{
            display:block;
            color:var(--fd-blue-2);
            text-transform:uppercase;
            letter-spacing:.08em;
            font-size:.72rem;
            font-weight:900;
            margin-bottom:8px;
        }

        .plan-status-top h4{
            margin:0;
            font-size:1.08rem;
            line-height:1.08;
        }

        .plan-status-top p{
            margin:8px 0 0;
            color:var(--fd-muted);
            font-size:.88rem;
            line-height:1.5;
            font-weight:700;
        }

        .plan-price-box{
            min-width:108px;
            text-align:right;
        }

        .plan-price-box span{
            display:block;
            color:var(--fd-muted);
            font-size:.74rem;
            margin-bottom:8px;
            font-weight:800;
        }

        .plan-price-box strong{
            display:block;
            font-size:1.4rem;
            line-height:1;
            color:var(--fd-blue-3);
        }

        .payment-order-box{
            border-radius:20px;
            padding:16px;
            background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
            border:1px solid var(--fd-line-soft);
        }

        .payment-order-box p{
            margin:0;
            color:var(--fd-muted);
            font-size:.88rem;
            line-height:1.5;
            font-weight:700;
        }

        .payment-order-meta{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:12px;
            margin-top:12px;
        }

        .payment-meta-card{
            border-radius:16px;
            padding:12px;
            background:#f7fbff;
            border:1px solid var(--fd-line-soft);
        }

        .payment-meta-card span{
            display:block;
            color:var(--fd-muted);
            font-size:.72rem;
            margin-bottom:6px;
            font-weight:800;
        }

        .payment-meta-card strong{
            display:block;
            font-size:.94rem;
            line-height:1.2;
            word-break:break-word;
        }

        .action-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:10px;
            margin-top:14px;
        }

        .primary-btn,
        .secondary-btn,
        .success-btn,
        .danger-btn{
            width:100%;
            border:none;
            border-radius:16px;
            padding:14px 14px;
            font-size:.93rem;
            font-weight:900;
            min-height:48px;
            cursor:pointer;
        }

        .primary-btn{
            background:linear-gradient(135deg,var(--fd-blue),var(--fd-blue-3));
            color:#fff;
            box-shadow:0 14px 28px rgba(21,93,252,.22);
        }

        .secondary-btn{
            background:linear-gradient(180deg,#eef5ff 0%,#e4efff 100%);
            color:var(--fd-blue-3);
            box-shadow:0 10px 18px rgba(37,99,235,.08);
        }

        .success-btn{
            background: linear-gradient(180deg, #ffc800, #d1b000);
            color:#000000;
            box-shadow:0 10px 18px rgba(22,163,74,.10);
        }

        .danger-btn{
            background:linear-gradient(180deg,#fff1f2 0%,#ffe4e6 100%);
            color:#b91c1c;
            box-shadow:0 10px 18px rgba(220,38,38,.08);
        }

        .primary-btn:disabled,
        .secondary-btn:disabled,
        .success-btn:disabled,
        .danger-btn:disabled{
            opacity:.55;
            cursor:not-allowed;
        }

        .referral-pending-card{
            border-radius:24px;
            padding:18px;
            background:
                radial-gradient(circle at top right, rgba(34,197,94,.10), transparent 24%),
                radial-gradient(circle at bottom left, rgba(21,93,252,.10), transparent 28%),
                linear-gradient(180deg,#ffffff 0%,#f9fbff 100%);
        }

        .referral-pending-card p{
            margin:8px 0 0;
            color:var(--fd-muted);
            font-size:.88rem;
            line-height:1.5;
            font-weight:700;
        }

        .binance-connect-card{
            border-radius:24px;
            padding:18px;
            background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
        }

        .binance-connect-card small.kicker{
            display:block;
            color:var(--fd-blue-2);
            text-transform:uppercase;
            letter-spacing:.08em;
            font-size:.72rem;
            font-weight:900;
            margin-bottom:10px;
        }

        .connect-note{
            margin:0 0 14px;
            color:var(--fd-muted);
            font-size:.88rem;
            line-height:1.5;
            font-weight:700;
        }

        .exchange-form-grid{
            display:grid;
            gap:12px;
        }

        .form-row{
            display:grid;
            gap:8px;
        }

        .form-row label{
            font-size:.82rem;
            font-weight:800;
            color:var(--fd-text-2);
        }

        .form-control{
            width:100%;
            border:1px solid var(--fd-line);
            border-radius:16px;
            padding:13px 14px;
            font-size:.94rem;
            outline:none;
            background:#f8fbff;
            color:var(--fd-text);
            min-height:48px;
        }

        .form-control:focus{
            border-color:#bfd4ff;
            background:#fff;
            box-shadow:0 0 0 4px rgba(37,99,235,.08);
        }

        .field-inline{
            display:grid;
            grid-template-columns:1fr auto;
            gap:8px;
            align-items:center;
        }

        .field-action-btn{
            border:none;
            border-radius:14px;
            min-height:48px;
            padding:0 14px;
            background:#eef3ff;
            color:#2442a6;
            font-size:.82rem;
            font-weight:800;
            cursor:pointer;
            white-space:nowrap;
        }

        .field-action-btn.dark{
            background:#111827;
            color:#fff;
        }

        .masked-box{
            width:100%;
            min-height:48px;
            border:1px dashed #ccd8ea;
            border-radius:14px;
            background:#f8fbff;
            padding:12px 14px;
            display:flex;
            align-items:center;
            color:#5f6f86;
            font-size:.82rem;
            word-break:break-all;
        }

        .validation-box{
            border-radius:18px;
            padding:14px;
            font-size:.84rem;
            line-height:1.55;
            border:1px solid #dbe4f0;
            background:#f8fbff;
            color:#344054;
        }

        .validation-box.success{
            background:#ecfdf3;
            border-color:#abefc6;
            color:#067647;
        }

        .validation-box.error{
            background:#fef3f2;
            border-color:#fecdca;
            color:#b42318;
        }

        .validation-box.warning{
            background:#fffaeb;
            border-color:#fedf89;
            color:#b54708;
        }

        .validation-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            flex-wrap:wrap;
        }

        .validation-title{
            font-weight:900;
            font-size:.83rem;
        }

        .validation-meta{
            margin-top:8px;
            display:grid;
            gap:6px;
        }

        .account-list-light,
        .stats-list{
            display:grid;
            gap:12px;
        }

        .account-light-card{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:14px;
            border-radius:20px;
            background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
            border:1px solid var(--fd-line-soft);
            box-shadow:0 10px 22px rgba(17,39,84,.05);
        }

        .account-light-copy{
            min-width:0;
            flex:1;
        }

        .account-light-copy strong{
            display:block;
            font-size:.98rem;
            line-height:1.1;
        }

        .account-light-copy p{
            margin:5px 0 0;
            color:var(--fd-muted);
            font-size:.84rem;
            line-height:1.45;
            font-weight:700;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }

        .account-light-meta{
            text-align:right;
            display:grid;
            gap:8px;
            justify-items:end;
        }

        .mini-actions{
            display:flex;
            gap:6px;
            flex-wrap:wrap;
            justify-content:flex-end;
        }

        .mini-btn{
            border:none;
            border-radius:10px;
            padding:8px 10px;
            font-size:.76rem;
            font-weight:700;
            cursor:pointer;
            background:#eff4ff;
            color:#2143a6;
        }

        .mini-btn.delete{
            background:#ffe9e9;
            color:#b42318;
        }

        .mini-btn.success{
            background:#e8fff2;
            color:#067647;
        }

        .mini-btn:disabled{
            opacity:.55;
            cursor:not-allowed;
        }

        .empty-box{
            padding:20px 14px;
            text-align:center;
            color:var(--fd-muted);
            border:1px dashed var(--fd-line);
            border-radius:18px;
            background:#fbfdff;
            font-weight:700;
        }

        .stats-row-card{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:14px;
            border-radius:20px;
            background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
            border:1px solid var(--fd-line-soft);
            box-shadow:0 10px 22px rgba(17,39,84,.05);
        }

        .stats-row-left{
            display:flex;
            align-items:center;
            gap:12px;
            min-width:0;
        }

        .stats-icon-box{
            width:42px;
            height:42px;
            border-radius:14px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:linear-gradient(180deg,#eef5ff 0%,#e4efff 100%);
            color:var(--fd-blue-3);
            font-size:1rem;
            font-weight:900;
            box-shadow:0 10px 18px rgba(37,99,235,.08);
            flex:0 0 42px;
        }

        .stats-row-left small{
            color:var(--fd-muted);
            font-size:.86rem;
            font-weight:800;
            line-height:1.4;
        }

        .stats-row-card strong{
            font-size:1rem;
            white-space:nowrap;
        }

        .section-note{
            font-size:.8rem;
            color:var(--fd-muted);
            line-height:1.55;
            margin:10px 0 0;
        }

        .logout-wrap{
            margin-top:8px;
            margin-bottom:16px;
        }

        .logout-light-btn{
            width:100%;
            border:none;
            border-radius:18px;
            padding:16px 18px;
            background:linear-gradient(135deg, #b000f9, #c2188b);
            color:#fff;
            font-weight:900;
            font-size:.98rem;
            box-shadow:0 16px 30px rgba(15,23,42,.18);
        }

        .toast-wrap{
            position:fixed;
            left:50%;
            bottom:92px;
            transform:translateX(-50%);
            width:min(92vw,420px);
            display:grid;
            gap:10px;
            z-index:80;
            pointer-events:none;
        }

        .toast{
            padding:14px 16px;
            border-radius:16px;
            color:#fff;
            font-size:.88rem;
            font-weight:800;
            box-shadow:0 16px 32px rgba(15,23,42,.24);
            transform:translateY(0);
            opacity:1;
            transition:all .24s ease;
            text-align:center;
        }

        .toast.info{background:#0f172a}
        .toast.success{background:linear-gradient(135deg,#16a34a,#15803d)}
        .toast.error{background:linear-gradient(135deg,#dc2626,#b91c1c)}

        @media (max-width:420px){
            .page.page-light{
                padding-left:14px;
                padding-right:14px;
            }

            .wallet-hero-grid,
            .summary-grid,
            .payment-order-meta,
            .action-grid{
                grid-template-columns:1fr;
            }

            .wallet-hero-top,
            .plan-status-top,
            .account-light-card,
            .stats-row-card{
                align-items:flex-start;
            }

            .account-light-card{
                flex-direction:column;
            }

            .account-light-meta{
                align-items:flex-start;
                width:100%;
            }

            .mini-actions{
                justify-content:flex-start;
            }

            .field-inline{
                grid-template-columns:1fr;
            }
        }
        .api-mask-line{
    font-size:.75rem;
    color:#64748b;
    max-width:180px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


.screen-loader{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
}

.screen-loader-inner{
    display:flex;
    flex-direction:column;   /* pone texto arriba y gif abajo */
    align-items:center;
    justify-content:center;
}

.screen-loader-text{
    display:block;
    width:100%;
    text-align:center;
    margin-bottom:14px;     /* separación del gif */
    color:#155dfc;
    font-size:16px;
    font-weight:800;
}

.screen-loader-logo{
    width:120px;
    height:auto;
}