/*==================================================
            SMARTMONEY TRADING SIMULATOR
==================================================*/

:root{

    --bg:#0f172a;
    --header:#111827;
    --card:#1e293b;
    --border:#334155;

    --green:#22c55e;
    --red:#ef4444;

    --white:#ffffff;
    --text:#cbd5e1;
    --text2:#94a3b8;

    --radius:18px;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{

    background:var(--bg);

    color:white;

}

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

header{

    width:100%;

    height:100px;

    background:var(--header);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 35px;

    border-bottom:1px solid var(--border);

}

/*==================================================
                    LOGO
==================================================*/

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo img{

    width:80px;

    height:80px;

    object-fit:contain;

}

.logo h1{

    font-size:32px;

    color:var(--green);

    line-height:1;

}

.logo p{

    color:var(--text);

    margin-top:6px;

}

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

.market{

    display:flex;

    gap:40px;

}

.market-item{

    text-align:right;

}

.market-item span{

    color:var(--text2);

    font-size:13px;

}

.market-item h2{

    margin-top:6px;

    font-size:26px;

}

.green{

    color:var(--green);

}

.red{

    color:var(--red);

}
/*==================================================
                DASHBOARD
==================================================*/

.dashboard{

    display:grid;

    grid-template-columns:320px minmax(0,1fr) 320px;

    gap:20px;

    padding:20px;

    align-items:start;

}

/* LEFT */

.left{

    display:flex;

    flex-direction:column;

    gap:20px;

}

/* CENTER */

main{

    display:flex;

    flex-direction:column;

    gap:20px;

    min-width:0;

}

/* RIGHT */

.right{

    display:flex;

    flex-direction:column;

    gap:20px;

}

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

.card{

    background:var(--card);

    border-radius:var(--radius);

    padding:20px;

    border:1px solid rgba(255,255,255,.05);

    box-shadow:0 10px 25px rgba(0,0,0,.25);

}

/*==================================================
                    TABLE
==================================================*/

table{

    width:100%;

    border-collapse:collapse;

}

th{

    color:var(--text2);

    text-align:left;

    font-size:14px;

    padding-bottom:15px;

}

td{

    padding:12px 0;

    border-top:1px solid rgba(255,255,255,.05);

}

/*==================================================
                CHART
==================================================*/

.chart-card{

    min-height:600px;

}

#chart{

    width:100%;

    height:500px;

}

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

.chart-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:20px;

}
.stock-info h2{

    font-size:34px;

    font-weight:700;

    color:white;

    margin:0;

}
.stock-info p{

    color:#94a3b8;

    font-size:15px;

    margin-top:4px;

}
.stock-price{

    display:flex;

    gap:12px;

    margin-top:10px;

    align-items:center;

}
#lastPrice{

    font-size:28px;

    font-weight:700;

    color:#22c55e;

}
#priceChange{

    font-size:18px;

    font-weight:600;

}

/*==================================================
            TITLE ROW
==================================================*/

.title-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.title-row button{

    background:#334155;

    color:white;

    border:none;

    padding:8px 15px;

    border-radius:8px;

    margin-left:8px;

    cursor:pointer;

}

.title-row button:hover{

    background:var(--green);

}

/*==================================================
                FORM
==================================================*/

label{

    display:block;

    margin-top:15px;

    margin-bottom:8px;

    color:var(--text);

}

select,
input{

    width:100%;

    background:#0f172a;

    color:white;

    border:1px solid var(--border);

    border-radius:10px;

    padding:13px;

}

button{

    border:none;

    border-radius:10px;

    padding:14px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.25s;

}

/*====================================
        BUY BUTTON
====================================*/

#buyBtn{

    width:100%;

    margin-top:18px;

    background:#22c55e;

    color:white;

    font-size:18px;

    font-weight:700;

    border:none;

    border-radius:12px;

    height:52px;

    transition:.25s;

}

#buyBtn:hover{

    background:#16a34a;

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(34,197,94,.35);

}

/*====================================
        SELL BUTTON
====================================*/

#sellBtn{

    width:100%;

    margin-top:15px;

    background:#ef4444;

    color:white;

    font-size:18px;

    font-weight:700;

    border:none;

    border-radius:12px;

    height:52px;

    transition:.25s;

}

#sellBtn:hover{

    background:#dc2626;

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(239,68,68,.35);

}
.timeframe{

    display:flex;

    align-items:center;

    gap:10px;

}
.timeframe button{

    width:60px;

    height:38px;

    border:none;

    border-radius:10px;

    background:#334155;

    color:white;

    font-weight:600;

    cursor:pointer;

}
.timeframe button.active{

    background:#22c55e;

}
.timeframe button:hover{

    background:#22c55e;

}

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

.account-item{

    display:flex;

    justify-content:space-between;

    margin:18px 0;

    padding-bottom:14px;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.account-item span{

    color:var(--text);

}

.account-item strong{

    color:white;

}

/*==================================================
                NEWS
==================================================*/

#news{

    color:var(--text);

    line-height:1.8;

    min-height:180px;

}

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

@media(max-width:1200px){

.dashboard{

    grid-template-columns:1fr;

}

header{

    height:auto;

    padding:20px;

    flex-direction:column;

    gap:20px;

}

.market{

    width:100%;

    justify-content:space-between;

}

}
/* ==========================
   COPYRIGHT
========================== */

.copyright{

    width:100%;

    text-align:center;

    padding:25px 0 35px;

    border-top:1px solid rgba(255,255,255,.08);

    color:#94a3b8;

    font-size:14px;

    margin-top:40px;

}

.copyright p{

    margin:8px 0;

}

.copyright p:last-child{

    color:#22c55e;

    font-weight:600;

}
/* ==========================
   HISTORY SCROLLBAR
========================== */

.history-table{

    max-height:500px;
    overflow-y:auto;

    scrollbar-width:thin;
    scrollbar-color:#475569 transparent;

}

.history-table thead th{

    position:sticky;
    top:0;

    background:#1e293b;

    z-index:100;

    padding-top:10px;
    padding-bottom:10px;

}

.history-table::-webkit-scrollbar{

    width:10px;

}

.history-table::-webkit-scrollbar-track{

    background:transparent;

}

.history-table::-webkit-scrollbar-thumb{

    background:#475569;

    border-radius:999px;

}

.history-table::-webkit-scrollbar-thumb:hover{

    background:#64748b;

}
.copyright{

    width:100%;

    text-align:center;

    padding:35px 20px;

    margin-top:40px;

    border-top:1px solid rgba(255,255,255,.08);

    color:#94a3b8;

}

.copyright p{

    margin:8px 0;

}

.copyright p:last-child{

    color:#22c55e;

    font-weight:700;

}

/* ==========================
   WATCHLIST SCROLLBAR
========================== */

.watchlist-table{

    max-height:450px;
    overflow-y:auto;

}

.watchlist-table thead th{

    position: sticky;

    top: 0;

    background: #1e293b;

    z-index: 100;

    padding-top: 10px;

    padding-bottom: 10px;

}

/* Chrome / Edge */

.watchlist-table{

    max-height:450px;
    overflow-y:auto;

    scrollbar-width:thin;
    scrollbar-color:#475569 transparent;

}

/* Chrome / Edge */

.watchlist-table::-webkit-scrollbar{

    width:10px;

}

.watchlist-table::-webkit-scrollbar-track{

    background:transparent;

}

.watchlist-table::-webkit-scrollbar-thumb{

    background:#475569;

    border-radius:999px;

}

.watchlist-table::-webkit-scrollbar-thumb:hover{

    background:#64748b;

}

.logo-title{

    display:flex;
    align-items:center;
    gap:10px;

}
/*==================================
        UPDATE BUTTON
==================================*/

.update-panel{

    position:absolute;

    top:42px;

    left:0;

    width:340px;

    max-height:420px;

    background:#1e293b;

    border:1px solid #334155;

    border-radius:16px;

    box-shadow:0 20px 50px rgba(0,0,0,.45);

    display:none;

    overflow:hidden;

    z-index:9999;

}
.update-header{

    padding:18px 20px;

    border-bottom:1px solid rgba(255,255,255,.08);

    background:#1e293b;

}

.update-header h3{

    font-size:22px;

    margin-bottom:4px;

}

.update-header small{

    color:#94a3b8;

}
.logo-title{

    display:flex;

    align-items:center;

    gap:8px;

    position:relative;

}
.update-btn{

    width:22px;

    height:22px;

    border-radius:50%;

    background:#f59e0b;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    font-size:12px;

    font-weight:bold;

    transition:.25s;

}

.update-btn:hover{

    background:#d97706;

}
.update-body{

    max-height:300px;

    overflow-y:auto;

    padding:20px;

}
/*==================================
        UPDATE BUTTON scrollbar
==================================*/
.update-body::-webkit-scrollbar{

    width:6px;

}

.update-body::-webkit-scrollbar-track{

    background:#1e293b;

}

.update-body::-webkit-scrollbar-thumb{

    background:#475569;

    border-radius:10px;

}

.update-body::-webkit-scrollbar-thumb:hover{

    background:#64748b;

}
.version{

    padding-bottom:18px;

    margin-bottom:18px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.version:last-child{

    border-bottom:none;

    margin-bottom:0;

}
.version h4{

    color:#22c55e;

    font-size:18px;

    margin-bottom:4px;

}

.version small{

    color:#94a3b8;

}
.version ul{

    margin-top:15px;

    padding-left:18px;

}

.version li{

    margin:8px 0;

    line-height:1.5;

    color:#e2e8f0;

}

/*==================================
        WELCOME MODAL
==================================*/


.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(8px);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.modal-box{

    width:850px;

    max-width:92%;

    background:#1e293b;

    border-radius:20px;

    padding:35px;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:0 20px 60px rgba(0,0,0,.45);

}

.modal-top{

    display:flex;

    align-items:center;

    gap:25px;

    margin-bottom:20px;

}

.modal-logo{

    width:90px;

}

.modal-top h2{

    color:#22c55e;

    margin-bottom:6px;

    font-size:34px;

}

.modal-top p{

    color:#94a3b8;

}

.modal-content{

    margin-top:25px;

}

.modal-content h3{

    margin-bottom:15px;

}

.modal-content p{

    color:#cbd5e1;

    line-height:1.8;

    margin-bottom:18px;

}

.modal-content ul{

    padding-left:20px;

}

.modal-content li{

    margin-bottom:10px;

    color:#cbd5e1;

}

.modal-footer{

    margin-top:35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.modal-footer small{

    color:#22c55e;

}

#closeWelcome{

    background:#22c55e;

    color:#fff;

    border:none;

    padding:14px 35px;

    border-radius:12px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

}

#closeWelcome:hover{

    background:#16a34a;

}
/*==================================
        LOAN CENTER
==================================*/

.loan{

    display:flex;

    flex-direction:column;

    gap:10px;

}

#borrowBtn{

    width:100%;

    background:#3b82f6;

    color:white;

    margin-top:10px;

    font-weight:700;

}

#borrowBtn:hover{

    background:#2563eb;

}

#repayBtn{

    width:100%;

    background:#f59e0b;

    color:white;

    margin-top:10px;

    font-weight:700;

}

#repayBtn:hover{

    background:#d97706;

}
.blue{

    color:#3b82f6;

    font-weight:700;

}

.orange{

    color:#f59e0b;

    font-weight:700;

}
/* =====================================
   LOAN TOOLTIP INFORMATION
===================================== */

.loan-title{

    display:flex;
    align-items:center;
    gap:8px;

}

.loan-help{

    position:relative;

    width:18px;
    height:18px;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    font-size:11px;
    font-weight:700;

    display:flex;
    justify-content:center;
    align-items:center;

    cursor:help;

    transition:.25s;

}

.loan-help:hover{

    background:#3b82f6;
    transform:scale(1.08);

}

.loan-tooltip{

    position:absolute;

    top:28px;

    right:0;

    width:290px;

    background:#1e293b;

    border:1px solid #334155;

    border-radius:14px;

    padding:16px;

    display:none;

    z-index:9999;

    box-shadow:0 15px 35px rgba(0,0,0,.45);

}

.loan-help:hover .loan-tooltip{

    display:block;

}

.loan-tooltip h4{

    margin:0 0 10px;
    color:#22c55e;

}

.loan-rate{

    display:flex;

    justify-content:space-between;

    margin:8px 0;

    font-size:13px;

}

.loan-rate strong{

    color:#22c55e;

}

.loan-tooltip small{

    display:block;

    margin-top:10px;

    line-height:1.6;

    color:#94a3b8;

}

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

.card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.card-header h3{

    margin:0;

}

.card-actions{

    display:flex;

    gap:8px;

}

.card-actions button{

    width:30px;
    height:30px;

    border:none;

    border-radius:8px;

    background:#374151;

    color:#cbd5e1;

    font-size:14px;

    cursor:pointer;

    transition:.2s;

    display:flex;

    justify-content:center;

    align-items:center;

}

.card-actions button:hover{

    background:#2563eb;

    color:white;

    transform:translateY(-2px);

}

.market-alert h4{

    color:#ff5252;
    margin-bottom:12px;
    font-size:20px;

}

.market-alert p{

    margin:8px 0;
    line-height:1.6;

}

.market-alert.success h4{

    color:#22c55e;

}
/* =====================================
   SAVE 
===================================== */
.save-row{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.save-row span{

    color:#cbd5e1;

}

.save-row b{

    color:#fff;

    font-weight:700;

}

.save-time{

    margin-top:20px;

    text-align:center;

    color:#94a3b8;

    line-height:1.6;

}
.pink{

    color:#ffc0cb;
    font-weight:700;

}
/* ===========================
   Portfolio Scroll
=========================== */

.portfolio-table{

    max-height:340px;
    overflow-y:auto;

}

.portfolio-table table{

    width:100%;
    border-collapse:collapse;

}

.portfolio-table thead th{

    position:sticky;
    top:0;
    background:#1f2937;
    z-index:10;

}

.portfolio-table::-webkit-scrollbar{

    width:6px;

}

.portfolio-table::-webkit-scrollbar-thumb{

    background:#4b5563;
    border-radius:20px;

}