body{
 background:linear-gradient(135deg,#01060b,#062230);
 margin:0;
 font-family:'Segoe UI',Inter,sans-serif;
 color:#bdfaff;
}

.fx-term{
 display:grid;
 grid-template-columns:330px auto;
 grid-template-rows:1fr 260px;
 height:100vh;
}

/* LEFT */

.left-panel{
 background:linear-gradient(180deg,#021118,#062a3d);
 border-right:1px solid #00ffff33;
 padding:10px;
}

.brand{
 font-size:22px;
 color:#00ffff;
 text-align:center;
 margin-bottom:10px;
 text-shadow:0 0 15px #00ffffcc;
}

.panel-title{
 border-bottom:1px solid #00ffff44;
 margin-bottom:4px;
 color:#00ffff;
}

.symbols{
 max-height:260px;
 overflow:auto;
}

.symbols div{
 padding:6px;
 cursor:pointer;
}
.symbols div:hover{
 background:#00ffff11;
}

.order-panel input,
select{
 width:100%;
 background:#000;
 color:#0ff;
 border:1px solid #00ffff55;
 margin-bottom:4px;
}

.lotbox{
 display:flex;
 gap:3px;
}
.lotbox button{
 background:#00ffff;
}

.execute-btn{
 width:100%;
 background:#00ffff;
 border:none;
 padding:8px;
 margin-top:6px;
}


/* CHART */

.chart-panel{
 background:#000;
}


/* BOTTOM */

.bottom-panel{
 grid-column:1/-1;
 background:#02080e;
 border-top:1px solid #00ffff44;
}

.tabs{
 display:flex;
}

.tab{
 border:none;
 background:#02080e;
 color:#0ff;
 padding:6px 12px;
 border-bottom:2px solid transparent;
}
.tab.active{
 border-bottom:2px solid cyan;
 background:#00ffff22;
}

.tab-content{
 display:none;
 height:210px;
 overflow:auto;
}
.tab-content.active{
 display:block;
}


table{
 width:100%;
 border-collapse:collapse;
 font-size:12px;
}

th,td{
 padding:4px;
 border:1px solid #00ffff22;
}

tr:hover{
 background:#00ffff22;
}

.placeholder{
 padding:10px;
}
