body {
  background:#111;
  color:#fff;
  font-family:Arial, sans-serif;
  margin:0;
}

.container {
  max-width:800px;
  margin:0 auto;
  padding:20px;
  text-align:center;
}

.header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px;
  background:#222;
  border-radius:6px;
}

.header h2 { margin:0; }
.header small { display:block; color:#aaa; }

.logout-btn {
  color:#fff;
  background:#c00;
  padding:5px 10px;
  text-decoration:none;
  border-radius:4px;
}

.panel {
  padding:15px;
  margin:15px 0;
  background:#1a1a1a;
  border-radius:6px;
}

.panel h3 { margin-top:0; }

.alert {
  background:#333;
  padding:10px;
  margin-top:10px;
  border-radius:6px;
}

.btn {
  padding:8px 12px;
  margin:5px;
  border:none;
  border-radius:4px;
  cursor:pointer;
}

.buy { background:#0a0; color:#fff; }
.ignore { background:#555; color:#fff; }

.small-gray {
  color:#888;
  font-size:0.9em;
}

.account-panel { text-align:center; }

.account-row {
  display:flex;
  justify-content:space-between;
  margin:10px 0;
}

.account-value, .mark-price {
  font-size:1.2em;
  font-weight:bold;
}

.usd { color:#0f0; }   /* green for USD */
.inr { color:#f33; }   /* red for INR */

.indicators-row {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
  text-align:center;
  margin-top:10px;
}

.indicator-col {
  background:#1a1a1a;
  padding:10px;
  border-radius:6px;
}

.trade-grid {
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:20px;
  margin:15px 0;
}

.trade-col { text-align:center; }

input {
  width:80%;
  padding:6px;
  border-radius:4px;
  border:1px solid #444;
  background:#222;
  color:#fff;
}

.login-panel {
  max-width:400px;
  margin:0 auto;
}

.login-form .form-group {
  margin:15px 0;
}

.error {
  color:#f33;
  margin-bottom:10px;
}

.success {
  color:#0f0;
  margin-bottom:10px;
}

/* 📱 Responsive adjustments */
@media (max-width: 600px) {
  .indicators-row {
    grid-template-columns: repeat(2, 1fr);
  }
}