/* ==========================================
Dashboard
========================================== */

.dashboard-preview{

    background:#07111F;
    
    }
    
    .dashboard-grid{
    
    display:grid;
    
    grid-template-columns:1.2fr .9fr;
    
    gap:40px;
    
    margin-top:60px;
    
    }
    
    .buyer-intelligence{
    
    padding:35px;
    
    }
    
    .card-header{
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    margin-bottom:30px;
    
    }
    
    .live-badge{
    
    color:#22C55E;
    
    font-weight:700;
    
    }
    
    .buyer-profile{
    
    display:flex;
    
    align-items:center;
    
    gap:18px;
    
    margin-bottom:30px;
    
    }
    
    .avatar{
    
    width:70px;
    
    height:70px;
    
    border-radius:50%;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    font-size:22px;
    
    font-weight:700;
    
    background:linear-gradient(135deg,#2563EB,#38BDF8);
    
    }
    
    .probability{
    
    margin-bottom:20px;
    
    }
    
    .probability h1{
    
    font-size:60px;
    
    color:#38BDF8;
    
    }
    
    .progress{
    
    height:12px;
    
    border-radius:20px;
    
    background:#1E293B;
    
    overflow:hidden;
    
    margin-bottom:30px;
    
    }
    
    .progress-fill{
    
    width:84%;
    
    height:100%;
    
    background:linear-gradient(90deg,#2563EB,#38BDF8);
    
    transition:1s;
    
    }
    
    .buyer-details{
    
    display:grid;
    
    grid-template-columns:repeat(2,1fr);
    
    gap:20px;
    
    margin-bottom:30px;
    
    }
    
    .buyer-details label{
    
    display:block;
    
    font-size:13px;
    
    color:#94A3B8;
    
    margin-bottom:6px;
    
    }
    
    .dashboard-side{
    
    display:flex;
    
    flex-direction:column;
    
    gap:25px;
    
    }
    
    .kpi-grid{
    
    display:grid;
    
    grid-template-columns:repeat(2,1fr);
    
    gap:20px;
    
    }
    
    .kpi-card{
    
    padding:28px;
    
    text-align:center;
    
    }
    
    .kpi-card h2{
    
    font-size:42px;
    
    color:#60A5FA;
    
    }
    
    .activity-card{
    
    padding:30px;
    
    }
    
    .activity-card ul{
    
    margin-top:20px;
    
    }
    
    .activity-card li{
    
    padding:14px 0;
    
    border-bottom:1px solid rgba(255,255,255,.06);
    
    }
    
    @media(max-width:992px){
    
    .dashboard-grid{
    
    grid-template-columns:1fr;
    
    }

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

.gauge{

    position:relative;
    
    width:180px;
    
    height:180px;
    
    margin:auto;
    
    }
    
    .gauge svg{
    
    transform:rotate(-90deg);
    
    }
    
    .gauge-bg{
    
    fill:none;
    
    stroke:#1E293B;
    
    stroke-width:12;
    
    }
    
    .gauge-progress{
    
    fill:none;
    
    stroke:#38BDF8;
    
    stroke-width:12;
    
    stroke-linecap:round;
    
    stroke-dasharray:471;
    
    stroke-dashoffset:471;
    
    transition:2s;
    
    }
    
    .gauge-text{
    
    position:absolute;
    
    top:50%;
    
    left:50%;
    
    transform:translate(-50%,-50%);
    
    text-align:center;
    
    }
    
    .gauge-text h1{
    
    font-size:42px;
    
    }
    
    .recommendation{
    
    margin:35px 0;
    
    }
    
    .broker-card{
    
    display:flex;
    
    align-items:center;
    
    justify-content:space-between;
    
    background:rgba(255,255,255,.04);
    
    padding:18px;
    
    border-radius:18px;
    
    margin-top:15px;
    
    }
    
    .score{
    
    font-size:22px;
    
    font-weight:700;
    
    color:#22C55E;
    
    }
    
    /* ========================= */
    
    .revenue-card{
    
    padding:28px;
    
    }
    
    .bar{
    
    margin-top:25px;
    
    }
    
    .bar span{
    
    display:block;
    
    margin-bottom:8px;
    
    }
    
    .line{
    
    height:10px;
    
    background:#1E293B;
    
    border-radius:20px;
    
    overflow:hidden;
    
    margin-bottom:8px;
    
    }
    
    .fill{
    
    height:100%;
    
    width:0;
    
    transition:2s;
    
    background:linear-gradient(90deg,#2563EB,#38BDF8);
    
    }
    
    .pf{
    
    width:82%;
    
    }
    
    .bayut{
    
    width:60%;
    
    }
    
    .google{
    
    width:42%;
    
    }
    
    .referral{
    
    width:96%;
    
    }
    
    /* ========================= */
    
    .leaderboard{
    
    padding:28px;
    
    }
    
    .leader{
    
    display:flex;
    
    justify-content:space-between;
    
    margin-top:20px;
    
    }
    
    .progress-small{
    
    height:8px;
    
    background:#1E293B;
    
    border-radius:20px;
    
    overflow:hidden;
    
    margin:8px 0 20px;
    
    }
    
    .progress-small div{
    
    height:100%;
    
    background:#38BDF8;
    
    }
    
    }

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

#toastContainer{

    position:fixed;
    
    right:35px;
    
    top:100px;
    
    z-index:9999;
    
    display:flex;
    
    flex-direction:column;
    
    gap:18px;
    
    }
    
    .toast{
    
    background:rgba(15,23,42,.92);
    
    backdrop-filter:blur(18px);
    
    border:1px solid rgba(255,255,255,.08);
    
    padding:18px 24px;
    
    border-radius:18px;
    
    min-width:280px;
    
    animation:slideIn .5s;
    
    box-shadow:0 20px 50px rgba(0,0,0,.45);
    
    }
    
    .toast strong{
    
    display:block;
    
    margin-bottom:5px;
    
    }
    
    @keyframes slideIn{
    
    from{
    
    transform:translateX(120px);
    
    opacity:0;
    
    }
    
    to{
    
    transform:translateX(0);
    
    opacity:1;
    
    }
    
    }

    .trend-card{

        padding:28px;
        
        }
        
        .trend-chart{
        
        width:100%;
        
        margin-top:20px;
        
        }
        
        .trend-chart circle{
        
        fill:#38BDF8;
        
        }
        
        #trendLine{
        
        stroke-dasharray:1000;
        
        stroke-dashoffset:1000;
        
        animation:drawLine 3s forwards;
        
        }
        
        @keyframes drawLine{
        
        to{
        
        stroke-dashoffset:0;
        
        }
        
        }

        .live-ticker{

            margin-top:70px;
            
            overflow:hidden;
            
            border-top:1px solid rgba(255,255,255,.08);
            
            padding:20px 0;
            
            }
            
            .ticker-track{
            
            white-space:nowrap;
            
            display:inline-block;
            
            animation:tickerMove 28s linear infinite;
            
            font-size:15px;
            
            color:#CBD5E1;
            
            }
            
            @keyframes tickerMove{
            
            from{
            
            transform:translateX(100%);
            
            }
            
            to{
            
            transform:translateX(-100%);
            
            }
            
            }