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

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    }
    
    /* ==============================
    BODY
    ============================== */
    
   /* ==============================
BODY (GLOBAL APP BACKGROUND)
============================== */

body{

    font-family:Inter,Arial,sans-serif;
    
    color:white;
    
    min-height:100vh;
    
    display:flex;
    flex-direction:column;
    
    background:#020611;
    
    overflow-x:hidden;
    
    position:relative;
    
    }

    /* ==============================
STARS
============================== */

body::before{

    content:"";
    
    position:fixed;
    
    top:0;
    left:0;
    
    width:100%;
    height:100%;
    
    background-image:
    radial-gradient(1px 1px at 10% 20%, white, transparent),
    radial-gradient(1px 1px at 20% 80%, white, transparent),
    radial-gradient(1px 1px at 30% 40%, white, transparent),
    radial-gradient(1px 1px at 40% 60%, white, transparent),
    radial-gradient(1px 1px at 50% 10%, white, transparent),
    radial-gradient(1px 1px at 60% 90%, white, transparent),
    radial-gradient(1px 1px at 70% 30%, white, transparent),
    radial-gradient(2px 2px at 80% 70%, white, transparent),
    radial-gradient(2px 2px at 90% 40%, white, transparent);
    
    background-size:500px 500px;
    
    opacity:0.6;
    
    z-index:-2;
    
    animation:starsMove 140s linear infinite;
    
    }

    /* ==============================
NEBULA
============================== */

body::after{

    content:"";
    
    position:fixed;
    
    top:-300px;
    left:-300px;
    
    width:1200px;
    height:1200px;
    
    background:
    
    radial-gradient(circle at 20% 30%, rgba(46,204,113,0.18), transparent),
    radial-gradient(circle at 70% 40%, rgba(0,140,255,0.15), transparent),
    radial-gradient(circle at 50% 80%, rgba(120,80,255,0.18), transparent);
    
    filter:blur(140px);
    
    z-index:-3;
    
    }

    /* ==============================
STAR MOVEMENT
============================== */

@keyframes starsMove{

    from{
    transform:translateY(0);
    }
    
    to{
    transform:translateY(-600px);
    }
    
    }
    
    /* ==============================
    APP CONTAINER
    ============================== */
    
    .app-container{
    
    width:100%;
    max-width:1200px;
    
    margin:auto;
    
    padding:20px;
    
    }
    
    /* ==============================
    CARD
    ============================== */
    
    .card{
    
    background:#161a21;
    
    border-radius:10px;
    
    padding:25px;
    
    box-shadow:0 0 20px rgba(0,0,0,0.4);
    
    }
    
    /* ==============================
    INPUTS
    ============================== */
    
    input{
    
    width:100%;
    
    padding:12px;
    
    margin-top:10px;
    
    background:#0f1115;
    
    border:1px solid #333;
    
    border-radius:6px;
    
    color:white;
    
    font-size:14px;
    
    }
    
    /* ==============================
    BUTTON
    ============================== */
    
    button{
    
    width:100%;
    
    padding:12px;
    
    margin-top:15px;
    
    border:none;
    
    border-radius:6px;
    
    font-weight:bold;
    
    cursor:pointer;
    
    }
    
    /* ==============================
    PRIMARY BUTTON
    ============================== */
    
    .btn-primary{
    
    background:#2ecc71;
    
    color:black;
    
    }
    
    /* ==============================
    LINK
    ============================== */
    
    a{
    
    color:#aaa;
    
    text-decoration:none;
    
    font-size:13px;
    
    }
    
    /* ==============================
    LOGIN LAYOUT
    ============================== */
    
    .auth-page{
        min-height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:20px;
        }
    
    /* ==============================
    ACCOUNT CARD
    ============================== */
    
    .account-card{
    
    background:#161a21;
    
    border-radius:10px;
    
    padding:20px;
    
    margin-bottom:15px;
    
    }
    
    /* ==============================
    ACCOUNT GRID
    ============================== */
    
    .account-grid{
    
    display:grid;
    
    grid-template-columns:1fr;
    
    gap:15px;
    
    }
    
    /* ==============================
    RESPONSIVE
    ============================== */
    
    @media (min-width:768px){
    
    .account-grid{
    
    grid-template-columns:1fr 1fr;
    
    }
    
    }
    
    @media (min-width:1100px){
    
    .account-grid{
    
    grid-template-columns:1fr 1fr 1fr;
    
    }
    
    }
    .login-wrapper{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:30px;
        width:100%;
        max-width:420px;
        margin:auto;
        
        position:relative;
        }

        @media (min-width:900px){

            .login-wrapper{
            
            flex-direction:row;
            align-items:center;
            
            }
            
            }

            .login-animation{

                position:absolute;
                
                top:-140px;
                left:50%;
                
                transform:translateX(-50%);
                
                width:260px;
                
                z-index:5;
                
                pointer-events:none;
                
                }
                .login-lottie{
                    width:100%;
                    height:auto;
                    }

                    .login-animation{
                        margin-bottom:-10px;
                        }


                        .login-wrapper{
                            transform: translateY(-40px);
                            }





/* =========================
SPACE BACKGROUND
========================= */

/* =========================
SPACE BACKGROUND
========================= */





    .login-animation::before{

        content:"";
        
        position:absolute;
        
        width:300px;
        height:300px;
        
        background:radial-gradient(circle,#2ecc71,transparent);
        
        filter:blur(120px);
        
        opacity:0.25;
        
        top:50%;
        left:50%;
        
        transform:translate(-50%,-50%);
        
        z-index:-1;
        
        }

        .card{

            background:rgba(22,26,33,0.75);
            
            backdrop-filter:blur(10px);
            
            border-radius:12px;
            
            padding:25px;
            
            box-shadow:0 10px 40px rgba(0,0,0,0.6);
            
            }



            /* ==============================
UNIVERSE BACKGROUND
============================== */


    
    /* estrellas lejanas */
    
  
    
 
    
    /* movimiento */
    
    @keyframes starsMove{
    
    from{
    transform:translateY(0px);
    }
    
    to{
    transform:translateY(-600px);
    }
    
    }
    .comet{

        position:fixed;
        
        top:22%;
        left:65%;
        
        width:220px;
        height:2px;
        
        background:linear-gradient(
        90deg,
        rgba(255,255,255,0),
        rgba(255,255,255,0.8)
        );
        
        border-radius:50px;
        
        box-shadow:
        0 0 6px white,
        0 0 12px #00e5ff,
        0 0 30px #00e5ff;
        
        filter:blur(0.3px);
        
        transform:rotate(-18deg);
        
        z-index:-1;
        
        opacity:.85;
        
        animation:cometDrift 12s ease-in-out infinite;
        
        }

        .comet::after{

            content:"";
            
            position:absolute;
            
            left:-300px;
            
            top:-1px;
            
            width:300px;
            height:2px;
            
            background:linear-gradient(
            90deg,
            rgba(255,255,255,0),
            rgba(255,255,255,0.2),
            rgba(255,255,255,0.6)
            );
            
            filter:blur(2px);
            
            opacity:.7;
            
            }
            @keyframes cometDrift{

                0%{
                transform:rotate(-18deg) translateX(0px);
                }
                
                50%{
                transform:rotate(-18deg) translateX(30px);
                }
                
                100%{
                transform:rotate(-18deg) translateX(0px);
                }
                
                }
    .login-card h2{
        margin-bottom:15px;
        }
        .login-card{

            position:relative;
            
            z-index:2;
            
            margin-top:120px;
            
            }

        .btn-primary{

            background:#2ecc71;
            color:black;
            transition:.2s;
            
            }
            
            .btn-primary:hover{
            
            background:#38d97a;
            transform:translateY(-1px);
            
            }



/* ==============================
TOAST NOTIFICATIONS
============================== */

#toast-container{

    position:fixed;
    
    top:20px;
    right:20px;
    
    display:flex;
    flex-direction:column;
    gap:10px;
    
    z-index:9999;
    
    }
    
    .toast{
    
    min-width:220px;
    
    padding:12px 16px;
    
    border-radius:8px;
    
    color:white;
    
    font-size:14px;
    
    box-shadow:0 10px 30px rgba(0,0,0,0.5);
    
    animation:toastSlide .3s ease;
    
    }
    
    /* colores */
    
    .toast-success{
    background:#2ecc71;
    }
    
    .toast-warning{
    background:#f1c40f;
    color:black;
    }
    
    .toast-error{
    background:#e74c3c;
    }
    
    /* animación */
    
    @keyframes toastSlide{
    
    from{
    transform:translateX(40px);
    opacity:0;
    }
    
    to{
    transform:translateX(0);
    opacity:1;
    }
    
    }


    /* ==============================
EMPTY STATE
============================== */

.empty-state{

    display:flex;
    
    flex-direction:column;
    
    align-items:center;
    
    justify-content:center;
    
    text-align:center;
    
    padding:60px 20px;
    
    color:#bbb;
    
    }
    
    .empty-state h3{
    
    margin-top:20px;
    
    font-size:18px;
    
    }
    
    .empty-state p{
    
    margin-top:10px;
    
    font-size:14px;
    
    color:#888;
    
    }


    .account-number{
        font-size:16px;
        font-weight:600;
        }
        
        .account-tenant{
        font-size:12px;
        color:#999;
        margin-bottom:10px;
        }
        
        .account-metrics{
        
        display:flex;
        justify-content:space-between;
        
        margin:10px 0;
        
        }
        
        .account-metrics span{
        
        display:block;
        
        font-weight:600;
        
        margin-top:4px;
        
        }
        
        .account-status{
        
        font-size:12px;
        margin:10px 0;
        
        }
        
        .account-status.active{
        color:#2ecc71;
        }
        
        .account-status.suspended{
        color:#e74c3c;
        }


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

.app-header{

    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    margin-bottom:25px;
    
    }
    
    .app-title{
    
    font-size:20px;
    font-weight:600;
    
    }
    
    .app-user{
    
    font-size:14px;
    
    color:#aaa;
    
    }


    /* =========================
ACCOUNT CARD
========================= */

.account-card{

    background:rgba(22,26,33,0.75);
    
    border-radius:14px;
    
    padding:18px;
    
    display:flex;
    
    flex-direction:column;
    
    gap:14px;
    
    border:1px solid rgba(255,255,255,0.05);
    
    }
    
    /* top */
    
    .account-top{
    
    display:flex;
    
    flex-direction:column;
    
    }
    
    .account-number{
    
    font-size:16px;
    font-weight:600;
    
    }
    
    .account-tenant{
    
    font-size:12px;
    color:#888;
    
    }
    
    /* metrics */
    
    .account-metrics{
    
    display:flex;
    
    justify-content:space-between;
    
    }
    
    .metric{
    
    display:flex;
    
    flex-direction:column;
    
    }
    
    .metric-label{
    
    font-size:11px;
    
    color:#888;
    
    }
    
    .metric-value{
    
    font-size:16px;
    
    font-weight:600;
    
    }
    
    /* footer */
    
    .account-footer{
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    margin-top:5px;
    
    }
    
    .account-status{
    
    font-size:12px;
    
    padding:4px 8px;
    
    border-radius:6px;
    
    }
    
    .account-status.active{
    
    background:#2ecc7120;
    
    color:#2ecc71;
    
    }
    
    .account-status.suspended{
    
    background:#e74c3c20;
    
    color:#e74c3c;
    
    }


    .account-grid{

        display:grid;
        
        grid-template-columns:1fr;
        
        gap:15px;
        
        margin-top:15px;
        
        }
        
        @media (min-width:600px){
        
        .account-grid{
        
        grid-template-columns:1fr 1fr;
        
        }
        
        }
        
        @media (min-width:1000px){
        
        .account-grid{
        
        grid-template-columns:1fr 1fr 1fr;
        
        }
        
        }



        /* =============================
TERMINAL
============================= */

#topbar{
    height:55px;
    background:#161a21;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 15px;
    border-bottom:1px solid #222;
    }
    
    .logo{
    font-weight:700;
    font-size:15px;
    }
    
    .priceValue{
    color:#2ecc71;
    font-weight:600;
    }
    
    #controls{
    padding:10px;
    background:#161a21;
    display:flex;
    flex-direction:column;
    gap:10px;
    border-bottom:1px solid #222;
    }
    
    #markets{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    }
    
    .market-btn{
    background:#0f1115;
    border:1px solid #333;
    color:#DDD;
    padding:6px 10px;
    border-radius:6px;
    cursor:pointer;
    font-size:13px;
    }
    
    .market-btn.active{
    background:#2ecc71;
    color:black;
    border:none;
    }
    
    #timeframes{
    display:flex;
    gap:6px;
    }
    
    .tf-btn{
    background:#0f1115;
    border:1px solid #333;
    color:#DDD;
    padding:6px 10px;
    border-radius:6px;
    cursor:pointer;
    }
    
    .tf-btn.active{
    background:#2ecc71;
    color:black;
    }
    
    #chart{
    height:60vh;
    }
    
    #orderPanel{
    padding:20px;
    display:flex;
    justify-content:center;
    background:#0f1115;
    }
    
    .order-card{
    background:#161a21;
    padding:20px;
    border-radius:12px;
    width:260px;
    }
    
    .buy-btn{
    flex:1;
    background:#1f8f5f;
    border:none;
    color:white;
    padding:12px;
    border-radius:8px;
    cursor:pointer;
    }
    
    .sell-btn{
    flex:1;
    background:#8e2e2e;
    border:none;
    color:white;
    padding:12px;
    border-radius:8px;
    cursor:pointer;
    }

    .accountInfo{
        display:flex;
        align-items:center;
        gap:20px;
        position:relative;
        }
        
        .account-selector{
        cursor:pointer;
        display:flex;
        align-items:center;
        gap:6px;
        font-weight:600;
        }
        
        .arrow{
        font-size:12px;
        opacity:0.7;
        }
        
        .accounts-dropdown{
        position:absolute;
        top:28px;
        left:0;
        background:#111;
        border:1px solid #333;
        border-radius:6px;
        display:none;
        flex-direction:column;
        min-width:140px;
        z-index:100;
        }
        
        .account-option{
        padding:8px 12px;
        color:#fff;
        text-decoration:none;
        font-size:14px;
        }
        
        .account-option:hover{
        background:#222;
        }

        #splash-overlay{
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            
            background:rgba(5,7,12,0.92); /* negro suave */
            
            display:flex;
            align-items:center;
            justify-content:center;
            
            z-index:999999;
            
            transition:opacity .5s ease;
            }
            
            /* centro */
            
            .splash-center{
            display:flex;
            flex-direction:column;
            align-items:center;
            }
            
            /* logo pequeño */
            
            .splash-logo{
            width:65px;
            margin-bottom:18px;
            
            /* animación flotante */
            animation:floatLogo 2.2s ease-in-out infinite;
            }
            
            /* animación del logo */
            
            @keyframes floatLogo{
            0%{transform:translateY(0px); opacity:.85;}
            50%{transform:translateY(-6px); opacity:1;}
            100%{transform:translateY(0px); opacity:.85;}
            }
            
            /* loader */
            
            .splash-loader{
            width:26px;
            height:26px;
            
            border:2px solid rgba(255,255,255,0.15);
            border-top:2px solid #00e5ff;
            
            border-radius:50%;
            
            animation:spin 1s linear infinite;
            }
            
            @keyframes spin{
            0%{transform:rotate(0deg);}
            100%{transform:rotate(360deg);}
            }