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




/* Light Theme */
.light{
background:#f4f4f4;
color:black;
}
.portfolio-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:15px;
 margin-top:10px;
}

.pcol{
 background:#111;
 padding:12px;
 border-radius:10px;
 text-align:center;
}

.light .pcol{
 background:#f3f3f3;
}

.pcol h4{
 margin:5px 0;
 color:#00e5ff;
}

.pcol p{
 margin:4px 0;
 font-size:13px;
 color:#aaa;
}

.pcol span{
 display:block;
 font-size:16px;
 margin-bottom:6px;
}

.big{
 font-size:22px;
 font-weight:bold;
}

.profit{
 color:#00c853;
 font-weight:bold;
}

.loss{
 color:#ff1744;
 font-weight:bold;
}

.neutral{
 color:#999;
 font-weight:bold;
}


.light .box{background:white;color:black}
.light .nav{background:#e5e7eb;color:black}
.light .card{background:white;color:black}

/* Layout */

.center{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.card{
background:#1e293b;
padding:35px;
width:320px;
border-radius:14px;
box-shadow:0 0 30px #000;
text-align:center;
}

input,select{
width:100%;
padding:12px;
margin:10px 0;
border:none;
border-radius:8px;
}

button{
width:100%;
padding:12px;
background:#22c55e;
border:none;
border-radius:8px;
color:white;
font-size:16px;
cursor:pointer;
}

/* Navbar */

.nav{
background:#020617;
padding:15px;
display:flex;
justify-content:space-between;
align-items:center;
}

.nav-right{
display:flex;
gap:10px;
}

/* Buttons */

.settings-btn{
background:white;
color:#020617;
padding:10px 18px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
text-align:center;          /* ADD THIS */
display:flex;               /* ADD THIS */
justify-content:center;     /* ADD THIS */
align-items:center;         /* ADD THIS */
}


.logout-btn{
background:#ef4444;
padding:10px 18px;
border-radius:8px;
color:white;
text-decoration:none;
font-weight:bold;
}

/* Content */

.container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
padding:25px;
}

.box{
background:#1e293b;
padding:20px;
border-radius:12px;
}

/* Webhook status */

.webhook{
margin-top:15px;
font-weight:bold;
}

.on{color:#22c55e;}
.off{color:#ef4444;}

/* Signals */

.signal-box{
max-height:300px;
overflow-y:auto;
border:1px solid #334155;
border-radius:10px;
}

.signal-box table{
width:100%;
border-collapse:collapse;
}

.signal-box th{
background:#020617;
position:sticky;
top:0;
}

.signal-box td,th{
padding:8px;
border-bottom:1px solid #334155;
text-align:center;
}
/* SIGNAL COLORS */

.buy{
background:rgba(34,197,94,0.15);
color:#22c55e;
font-weight:bold;
}

.sell{
background:rgba(239,68,68,0.15);
color:#ef4444;
font-weight:bold;
}
/* 2 column grid */
.grid2{
grid-template-columns:repeat(2,1fr);
}

/* Full width box */
.full{
grid-column:1/-1;
}
/* ===== MARKET TIMER ===== */

.market-timer{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* Digital Clock */
.digital{
    font-family:'Courier New', monospace;
    font-size:26px;      /* SAME HEIGHT AS NAV */
    letter-spacing:2px;
    padding:8px 20px;
    border-radius:10px;
    background:#000;
    box-shadow:0 0 15px currentColor;
    transition:0.3s;
}

/* Market OPEN */
.digital.open{
    color:#22c55e;
    text-shadow:0 0 12px #22c55e;
}

/* Market CLOSED */
.digital.closed{
    color:#ef4444;
    text-shadow:0 0 12px #ef4444;
}

/* Blink animation */
@keyframes blink{
0%{opacity:1}
50%{opacity:.25}
100%{opacity:1}
}

.blink{
 animation:blink 1s infinite;
}

/* Mobile */
@media(max-width:600px){
 .digital{
    font-size:18px;
    padding:6px 14px;
 }
}

/* Reduce vertical gap between sections */
.top-tiles{
 padding-bottom:5px !important;
}

.signals-section{
 padding-top:5px !important;
}