body{
background:#020403;
font-family:'Share Tech Mono',monospace;
color:#00ff9c;
margin:0;
overflow:hidden;
}

body::before{
content:"";
position:fixed;
width:100%;
height:100%;
background:
linear-gradient(rgba(0,255,150,.07) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,255,150,.07) 1px,transparent 1px);
background-size:40px 40px;
z-index:-1;
}

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 20px;
background:#031b16;
border-bottom:1px solid #00ff9c33;
}

.logo{
font-size:18px;
letter-spacing:2px;
}

.clock{
color:white;
}

.container{
display:grid;
grid-template-columns:3fr 1fr;
grid-template-rows:60vh 40vh;
gap:8px;
padding:8px;
height:calc(100vh - 60px);
}

.panel{
background:rgba(0,20,10,.7);
backdrop-filter:blur(6px);
border:1px solid rgba(0,255,150,.2);
box-shadow:0 0 20px rgba(0,255,150,.15);
padding:6px;
overflow:hidden;
}

.chart{
grid-column:1/2;
grid-row:1/2;
}

.watchlist{
grid-column:2/3;
grid-row:1/2;
}

.bottom{
grid-column:1/3;
grid-row:2/3;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
}

#pairSelector{
background:#021b14;
color:#00ff9c;
border:1px solid #00ff9c;
padding:4px 8px;
font-family:'Share Tech Mono',monospace;
font-size:13px;
cursor:pointer;
}

.marketBar{
position:fixed;
top:55px;
left:50%;
transform:translateX(-50%);
width:90%;
height:32px;
overflow:hidden;
background:rgba(0,20,10,.6);
backdrop-filter:blur(10px);
border:1px solid rgba(0,255,150,.25);
border-radius:12px;
box-shadow:0 0 15px rgba(0,255,150,.25);
z-index:900;
}

.ticker{
display:flex;
white-space:nowrap;
align-items:center;
height:100%;
animation:scrollTicker 30s linear infinite;
}

.ticker span{
margin-right:40px;
font-size:13px;
letter-spacing:1px;
}

@keyframes scrollTicker{
from{transform:translateX(100%)}
to{transform:translateX(-100%)}
}

.signalBox{
position:fixed;
bottom:20px;
right:20px;
background:#021b14;
border:1px solid #00ff9c;
padding:10px;
font-size:13px;
box-shadow:0 0 10px #00ff9c55;
z-index:999;
}

.green{color:#00ff9c}
.red{color:#ff4d4d}
.white{color:#ffffff}

.live-dot{
width:10px;
height:10px;
background:#00ff9c;
border-radius:50%;
display:inline-block;
animation:blink 1.5s infinite;
box-shadow:0 0 8px #00ff9c;
}

@keyframes blink{
0%{opacity:1}
50%{opacity:0.2}
100%{opacity:1}
}