body{
margin:0;
background:#0f172a;
color:white;
font-family:Arial;
}

.container{
max-width:480px;
margin:auto;
padding-bottom:80px;
}

.header{
padding:12px;
background:#111827;
}

.header h3{
margin:0;
}

.price-box{
font-size:18px;
margin-top:4px;
}

.green{color:#16a34a;}
.red{color:#dc2626;}

.section{
/*padding:10px;*/
}

#tv_chart_container{
border-radius:12px;
overflow:hidden;
}

/* ORDER BOOK */

.orderbook-wrapper{
background:#0b1220;
border-radius:12px;
padding:10px;
}

.orderbook-box{
margin-bottom:8px;
}

.ob-header{
display:flex;
justify-content:space-between;
font-size:11px;
color:#9ca3af;
padding:4px 6px;
}

.ob-body{
max-height:160px;
overflow-y:auto;
font-size:12px;
}

.order-row{
display:flex;
justify-content:space-between;
padding:3px 6px;
}

.ask-row{color:#dc2626;}
.bid-row{color:#16a34a;}

.current-price{
text-align:center;
padding:8px;
font-size:16px;
font-weight:bold;
border-top:1px solid #1f2937;
border-bottom:1px solid #1f2937;
margin:6px 0;
}

/* TRADE PANEL */

.trade-box{
background:#111827;
padding:1px;
border-radius:12px;
}

.trade-box input{
width:100%;
padding:8px;
margin-bottom:10px;
border-radius:6px;
border:none;
}

.buy-sell{
display:flex;
gap:10px;
}

.buy-sell button{
flex:1;
padding:10px;
border:none;
border-radius:6px;
font-weight:bold;
color:white;
cursor:pointer;
}

.buy{background:#16a34a;}
.sell{background:#dc2626;}
/* TIMER DESIGN */

.timer-wrapper{
position:relative;
}

.timer-circle{
position:relative;
width:70px;
height:70px;
}

.timer-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:14px;
font-weight:bold;
color:#facc15;
}

/* POPUP */

.popup-overlay{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.7);
justify-content:center;
align-items:center;
z-index:9999;
}

.popup-box{
background:#111827;
padding:30px;
border-radius:16px;
text-align:center;
width:260px;
animation:popupFade 0.3s ease;
}

.popup-message{
font-size:18px;
margin-top:10px;
color:#facc15;
font-weight:bold;
}

@keyframes popupFade{
from{transform:scale(0.8);opacity:0;}
to{transform:scale(1);opacity:1;}
}
/* TRADE CARD */

.trade-card{
background:#0f172a;
padding:15px;
border-radius:16px;
border:1px solid #1f2937;
}

.trade-label{
font-size:13px;
color:#9ca3af;
margin-bottom:6px;
margin-top:12px;
}

/* BALANCE BUTTONS */

.balance-buttons{
display:flex;
gap:8px;
flex-wrap:wrap;
}

.bal-btn{
flex:1;
background:#111827;
border:1px solid #1f2937;
color:white;
padding:8px 0;
border-radius:8px;
font-size:13px;
cursor:pointer;
}

.bal-btn.active{
background:#facc15;
color:black;
font-weight:bold;
}

/* QUANTITY */

.qty-box{
display:flex;
align-items:center;
gap:8px;
}

.qty-box input{
flex:1;
background:#111827;
border:1px solid #1f2937;
color:white;
text-align:center;
padding:8px;
border-radius:8px;
}

.qty-btn{
background:#facc15;
border:none;
width:35px;
height:35px;
border-radius:8px;
font-size:18px;
font-weight:bold;
cursor:pointer;
}

/* MULTIPLIER */

.multiplier{
display:flex;
gap:6px;
flex-wrap:wrap;
margin-top:10px;
}

.multiplier button{
flex:1;
background:#111827;
border:1px solid #1f2937;
color:white;
padding:6px 0;
border-radius:6px;
font-size:12px;
cursor:pointer;
}

/* TOTAL */

.total-box{
margin-top:12px;
background:#111827;
border:1px solid #facc15;
padding:10px;
border-radius:10px;
text-align:center;
color:#facc15;
font-weight:bold;
}

/* UP DOWN */

.trade-actions{
display:flex;
gap:10px;
margin-top:15px;
}

.up-btn{
flex:1;
background:#16a34a;
border:none;
padding:12px;
border-radius:10px;
color:white;
font-weight:bold;
font-size:15px;
cursor:pointer;
}

.down-btn{
flex:1;
background:#dc2626;
border:none;
padding:12px;
border-radius:10px;
color:white;
font-weight:bold;
font-size:15px;
cursor:pointer;
}