:root {
  --amber: #ffcc66;
  --cyan: #64d9ff;
  --blue: #7cb8ff;
}

.bot-shell {
  max-width: 1480px;
}

.bot-control-grid {
  grid-template-columns: minmax(330px, 560px);
  margin-bottom: 16px;
}

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.creator-signature {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.3;
}

.creator-signature strong {
  color: var(--accent);
  font-weight: 900;
}

.site-nav a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a.active {
  color: #07130f;
  border-color: var(--accent);
  background: var(--accent);
}

.inline-check {
  min-height: 42px;
  align-content: end;
}

.readonly-control {
  min-height: 42px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  background: #101615;
}

.scan-row {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 16px;
}

.scan-row button {
  min-width: 210px;
}

.bot-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.bot-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bot-visual-grid {
  grid-template-columns: minmax(0, 1.85fr) minmax(330px, 0.62fr);
  align-items: stretch;
}

.bot-chart-panel {
  display: flex;
  flex-direction: column;
}

.chart-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.bot-chart {
  flex: 1;
  min-height: 680px;
}

.bot-chart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.bot-chart-bg,
.bot-panel-bg {
  fill: #080f18;
}

.bot-grid {
  stroke: rgba(159, 176, 170, 0.18);
  stroke-width: 1;
}

.bot-price-path,
.bot-ema,
.bot-rsi-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bot-price-path {
  stroke: var(--cyan);
  stroke-width: 2.6;
}

.bot-ema.fast {
  stroke: var(--amber);
  stroke-width: 1.7;
}

.bot-ema.slow {
  stroke: var(--blue);
  stroke-width: 1.7;
}

.bot-volume-bar {
  opacity: 0.52;
}

.bot-volume-bar.up {
  fill: var(--bull);
}

.bot-volume-bar.down {
  fill: var(--bear);
}

.bot-rsi-zone.low {
  fill: rgba(64, 211, 138, 0.08);
}

.bot-rsi-zone.high {
  fill: rgba(255, 111, 125, 0.08);
}

.bot-rsi-line-threshold {
  stroke: rgba(237, 245, 241, 0.32);
  stroke-width: 1;
  stroke-dasharray: 5 6;
}

.bot-rsi-path {
  stroke: #edf5f1;
  stroke-width: 2;
}

.bot-chart-label {
  fill: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.bot-entry-marker {
  filter: drop-shadow(0 0 8px rgba(237, 245, 241, 0.65));
  stroke: #edf5f1;
  stroke-width: 2.7;
}

.bot-entry-marker.long {
  fill: var(--bull);
}

.bot-entry-marker.short {
  fill: var(--bear);
}

.bot-exit-marker {
  filter: drop-shadow(0 0 9px rgba(237, 245, 241, 0.72));
  stroke: #edf5f1;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.bot-exit-marker.tp {
  fill: var(--bull);
}

.bot-exit-marker.sl {
  fill: var(--bear);
}

.bot-exit-marker.be {
  fill: var(--amber);
}

.bot-marker-label {
  fill: #edf5f1;
  font-size: 13px;
  font-weight: 900;
  paint-order: stroke;
  pointer-events: none;
  stroke: #07100d;
  stroke-linejoin: round;
  stroke-width: 4px;
}

.bot-marker-label.entry {
  fill: #edf5f1;
  font-size: 14px;
}

.bot-exit-group.tp .bot-marker-label {
  fill: var(--bull);
}

.bot-exit-group.sl .bot-marker-label {
  fill: var(--bear);
}

.bot-exit-group.be .bot-marker-label {
  fill: var(--amber);
}

.bot-active-line {
  filter: drop-shadow(0 0 8px rgba(237, 245, 241, 0.48));
  opacity: 0.96;
  stroke-width: 3.1;
  stroke-dasharray: 10 6;
}

.bot-active-line.entry {
  stroke: #edf5f1;
}

.bot-active-line.tp {
  stroke: var(--bull);
}

.bot-active-line.sl {
  stroke: var(--bear);
}

.bot-active-label-bg {
  fill: #101615;
  stroke-width: 1.5;
}

.bot-active-label-bg.entry {
  stroke: #edf5f1;
}

.bot-active-label-bg.tp {
  stroke: var(--bull);
}

.bot-active-label-bg.sl {
  stroke: var(--bear);
}

.bot-active-label {
  fill: #edf5f1;
  font-size: 11px;
  font-weight: 900;
  pointer-events: none;
}

.bot-active-label.tp {
  fill: var(--bull);
}

.bot-active-label.sl {
  fill: var(--bear);
}

.bot-side-panels {
  display: grid;
  gap: 16px;
  align-self: stretch;
}

.info-card {
  padding: 16px;
}

.info-stack,
.signal-status {
  display: grid;
  gap: 8px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #101615;
}

.info-row span {
  color: var(--muted);
  font-size: 0.82rem;
}

.info-row strong {
  color: var(--text);
  text-align: right;
  font-size: 0.9rem;
}

.signal-status {
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 8px;
  padding: 12px;
  background: #101615;
}

.signal-status.bullish {
  border-left-color: var(--bull);
}

.signal-status.bearish {
  border-left-color: var(--bear);
}

.signal-status.neutral {
  border-left-color: var(--line);
}

.signal-note {
  color: var(--amber);
  font-size: 0.85rem;
  font-weight: 900;
}

.trade-row.tp {
  background: rgba(64, 211, 138, 0.07);
}

.trade-row.sl {
  background: rgba(255, 111, 125, 0.07);
}

.trade-row.be,
.trade-row.eod {
  background: rgba(255, 204, 102, 0.07);
}

.bot-shell table {
  min-width: 980px;
}

@media (max-width: 1180px) {
  .bot-control-grid,
  .bot-metrics,
  .bot-summary-grid,
  .bot-visual-grid {
    grid-template-columns: 1fr;
  }

  .bot-chart {
    min-height: 520px;
  }

}