/* ── Navbar trader status dot ──────────────────────────────────── */
.trader-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.trader-dot-stopped { background: #ef4444; }
.trader-dot-running {
  background: #10b981;
  box-shadow: 0 0 0 0 #10b981;
  animation: dot-pulse 1.2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 #10b98166; }
  70%  { box-shadow: 0 0 0 6px #10b98100; }
  100% { box-shadow: 0 0 0 0 #10b98100; }
}

/* ── Running flash animation ───────────────────────────────────── */
@keyframes running-flash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}
.status-running {
  animation: running-flash 1s ease-in-out infinite;
  color: #10b981;
  font-weight: 700;
}

/* ── CSS Variables ─────────────────────────────────────────────── */
:root {
  --bg: #0a1428;
  --bg2: #0f1e3d;
  --bg3: #16294f;
  --border: #20407a;
  --text: #dbe7ff;
  --text-muted: #7089b8;
  --accent: #3b82f6;
  --accent2: #22d3ee;
  --red: #f43f5e;
  --nav-bg: #0a1428;
}

[data-mode="colorful"], .mode-colorful {
  --bg: #050818;
  --bg2: #0a0f2e;
  --bg3: #0f1840;
  --border: #1a2a6c;
  --text: #e0f0ff;
  --text-muted: #6a8cbf;
  --accent: #00ffcc;
  --accent2: #ff6b35;
  --red: #ff2d55;
  --nav-bg: #080c22;
}

/* ── Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh;
}

/* ── Navbar ────────────────────────────────────────────────────── */
.navbar {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  padding: .6rem 0;
}

.navbar-brand { color: var(--text) !important; font-size: 1.1rem; }

.nav-link {
  color: var(--text-muted) !important;
  padding: .4rem .8rem !important;
  border-radius: .4rem;
  transition: all .2s;
}
.nav-link:hover, .nav-link.active {
  color: var(--text) !important;
  background: var(--bg3);
}
.nav-link.active { color: var(--accent) !important; }

/* ── Stat Cards ────────────────────────────────────────────────── */
.stat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  transition: border-color .2s;
}
.stat-card:hover { border-color: var(--accent); }

.stat-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  font-weight: 600;
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin: .25rem 0;
}

.stat-sub {
  font-size: .75rem;
  color: var(--text-muted);
}

/* ── Chart container ───────────────────────────────────────────── */
.chart-container {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1rem;
}

#priceChart {
  border-radius: .5rem;
  overflow: hidden;
}

/* ── Span buttons ──────────────────────────────────────────────── */
.btn-outline-warning {
  color: var(--accent);
  border-color: var(--accent);
}
.btn-outline-warning:hover,
.btn-outline-warning.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

/* ── Tables ────────────────────────────────────────────────────── */
.table { color: var(--text); }
.table thead tr { color: var(--text-muted); font-size: .72rem; text-transform: uppercase; }
.table tbody tr:hover { background: var(--bg3); }
.table-sm td, .table-sm th { padding: .35rem .5rem; }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn-warning  { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 600; }
.btn-success  { background: var(--accent2); border-color: var(--accent2); }
.btn-outline-danger { color: var(--red); border-color: var(--red); }
.btn-outline-danger:hover { background: var(--red); color: #fff; }

/* ── Forms ─────────────────────────────────────────────────────── */
.form-control, .input-group-text, .form-select {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--text);
}
.form-control:focus {
  background: var(--bg3);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.form-control::placeholder { color: var(--text-muted); }
.input-group-text { color: var(--text-muted); }
.form-text { color: var(--text-muted); font-size: .75rem; }
.form-label { color: var(--text); }
.form-check-input { background-color: var(--bg3); border-color: var(--border); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.font-mono { font-family: 'Courier New', monospace; font-size: .85rem; }

/* ── Badges ────────────────────────────────────────────────────── */
.badge.bg-secondary { background: var(--bg3) !important; color: var(--text-muted); }

/* ── Login page ────────────────────────────────────────────────── */
.login-page { background: radial-gradient(ellipse at center, #1a1f35 0%, #0d0f14 70%); }
.login-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 1rem;
}
.login-logo {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  font-size: 2.5rem;
  color: #000;
}
.login-logo i { line-height: 1; }

/* ── Settings sections ─────────────────────────────────────────── */
.settings-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: .75rem;
  overflow: hidden;
}
.settings-section-title {
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  padding: .75rem 1.25rem;
  font-weight: 600;
  font-size: .9rem;
}
.settings-body { padding: 1.25rem; }

/* ── Mode cards ────────────────────────────────────────────────── */
.mode-card {
  display: block;
  cursor: pointer;
  border: 2px solid var(--border);
  border-radius: .75rem;
  padding: .75rem;
  transition: all .2s;
}
.mode-card:hover { border-color: var(--text-muted); }
.mode-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.mode-preview {
  border-radius: .5rem;
  height: 80px;
  padding: .5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mode-preview-dark    { background: #0d0f14; border: 1px solid #2a3050; }
.mode-preview-colorful { background: #050818; border: 1px solid #1a2a6c; }

.mini-chart {
  height: 35px;
  border-radius: .25rem;
  position: relative;
  overflow: hidden;
}
.dark-chart {
  background: linear-gradient(90deg, transparent 0%, #f59e0b22 50%, transparent 100%);
  border-bottom: 2px solid #f59e0b;
}
.colorful-chart {
  background: linear-gradient(90deg, transparent 0%, #00ffcc22 50%, transparent 100%);
  border-bottom: 2px solid #00ffcc;
}

/* ── Alerts ────────────────────────────────────────────────────── */
.alert {
  border-radius: .6rem;
  border: 1px solid;
}
.alert-danger  { background: #ef444418; border-color: #ef4444; color: #fca5a5; }
.alert-success { background: #10b98118; border-color: #10b981; color: #6ee7b7; }

/* ── Colorful mode glow accents ────────────────────────────────── */
[data-mode="colorful"] .stat-card { box-shadow: 0 0 20px #00ffcc08; }
[data-mode="colorful"] .stat-card:hover { box-shadow: 0 0 20px #00ffcc25; border-color: var(--accent); }
[data-mode="colorful"] .stat-value { text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent); }
[data-mode="colorful"] .navbar { box-shadow: 0 1px 20px #00ffcc18; }
[data-mode="colorful"] .login-logo {
  background: linear-gradient(135deg, #00ffcc, #0066ff);
  box-shadow: 0 0 30px #00ffcc55;
}

/* ── Quick trade presets ────────────────────────────────────────── */
.preset-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 600;
  padding: .15rem .45rem;
  border-radius: .3rem;
  transition: all .15s;
}
.preset-btn:hover, .preset-btn.active-preset {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}
.quick-trade-btn { position: relative; }
.hotkey-badge {
  position: absolute;
  top: 3px; right: 5px;
  font-size: .55rem;
  font-weight: 700;
  opacity: .6;
  background: rgba(0,0,0,.25);
  border-radius: 3px;
  padding: 0 3px;
}

/* ── Manual trade live price bar ──────────────────────────────── */
.manual-price-bar {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .5rem .85rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.manual-price-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  transition: color .3s;
}
@keyframes price-flash-kf {
  0%   { color: #fff; }
  100% { color: var(--accent); }
}
.price-flash { animation: price-flash-kf .5s ease-out; }

/* ── Manual trade status ───────────────────────────────────────── */
@keyframes trade-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.2; transform: scale(1.15); }
}
.trade-flash { animation: trade-blink .6s ease-in-out infinite; }

.trade-status-box {
  border-radius: .6rem;
  border: 1px solid var(--border);
  padding: .65rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  transition: background .3s, border-color .3s;
  min-height: 52px;
}
.trade-status-icon { font-size: 1.2rem; flex-shrink: 0; }

.trade-status-idle     { background: var(--bg3); border-color: var(--border); }
.trade-status-idle .trade-status-icon { color: var(--text-muted); }

.trade-status-buying   { background: #ef444418; border-color: #ef4444; animation: trade-blink .7s ease-in-out infinite; }
.trade-status-buying .trade-status-icon { color: #ef4444; }

.trade-status-selling  { background: #ef444418; border-color: #ef4444; animation: trade-blink .7s ease-in-out infinite; }
.trade-status-selling .trade-status-icon { color: #ef4444; }

.trade-status-done-buy  { background: #10b98118; border-color: #10b981; }
.trade-status-done-buy  .trade-status-icon { color: #10b981; }

.trade-status-done-sell { background: #10b98118; border-color: #10b981; }
.trade-status-done-sell .trade-status-icon { color: #10b981; }

.trade-status-error    { background: #f59e0b18; border-color: #f59e0b; }
.trade-status-error .trade-status-icon { color: #f59e0b; }

/* Badge colours */
.badge.trade-status-idle     { background: var(--bg3)!important; color: var(--text-muted); }
.badge.trade-status-buying,
.badge.trade-status-selling  { background: #ef4444!important; animation: trade-blink .7s ease-in-out infinite; }
.badge.trade-status-done-buy,
.badge.trade-status-done-sell{ background: #10b981!important; }
.badge.trade-status-error    { background: #f59e0b!important; color:#000; }

.smaller { font-size: .7rem; white-space: pre-line; }
.font-mono { font-family: 'Courier New', monospace; }

/* ── Market Pulse strip ─────────────────────────────────────────── */
.market-pulse {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: .6rem 1.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.pulse-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  flex: 1;
}
.pulse-label {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  font-weight: 600;
}
.pulse-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pulse-sub {
  font-size: .65rem;
  color: var(--text-muted);
}
.pulse-sep {
  width: 1px;
  height: 32px;
  background: var(--border);
  flex-shrink: 0;
}
/* Fear & Greed colours */
.fng-extreme-fear  { color: #ef4444 !important; }
.fng-fear          { color: #f97316 !important; }
.fng-neutral       { color: var(--text) !important; }
.fng-greed         { color: #84cc16 !important; }
.fng-extreme-greed { color: #10b981 !important; }
/* RSI zones */
.rsi-overbought { color: #ef4444 !important; }
.rsi-oversold   { color: #10b981 !important; }
.rsi-neutral    { color: var(--text) !important; }

/* ── Strategy pill ─────────────────────────────────────────────── */
.strategy-pill {
  display: inline-flex;
  align-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: .78rem;
  font-weight: 700;
  padding: .2rem .65rem;
  border-radius: .4rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── Summary page ──────────────────────────────────────────────── */
.summary-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: .75rem;
  overflow: hidden;
  height: 100%;
}
.summary-card-title {
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  padding: .75rem 1.25rem;
  font-weight: 700;
  font-size: .95rem;
}
.summary-body { padding: 1.25rem; }

.mini-stat {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .6rem .8rem;
  text-align: center;
}
.mini-stat-label { font-size: .65rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: .05em; }
.mini-stat-value { font-size: 1.3rem; font-weight: 700; line-height: 1.2; }

.pnl-bar {
  border-radius: .5rem;
  padding: .75rem 1rem;
  border: 1px solid;
}
.pnl-profit { background: #10b98112; border-color: #10b981; }
.pnl-loss   { background: #ef444412; border-color: #ef4444; }
.pnl-value  { font-size: 1.4rem; font-weight: 700; }
.pnl-profit .pnl-value { color: #10b981; }
.pnl-loss   .pnl-value { color: #ef4444; }

.progress { border-radius: 3px; }

/* ── Notification page ─────────────────────────────────────────── */
.condition-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .85rem 1rem;
}
.alert-secondary {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--text-muted);
}
.alert-secondary a { color: var(--accent); }

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Responsive tweaks ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .stat-value { font-size: 1.1rem; }
  #priceChart  { height: 260px !important; }
}

/* login-hi-vis  high-visibility login overrides */
.login-page { background: radial-gradient(ellipse at center, #10142a 0%, #05060c 78%); }
.login-card {
  border: 2px solid var(--accent);
  box-shadow: 0 22px 60px rgba(0,0,0,.65),
              0 0 46px color-mix(in srgb, var(--accent) 34%, transparent) !important;
}
.login-logo { width: 96px; height: 96px; font-size: 3.2rem;
  box-shadow: 0 0 34px color-mix(in srgb, var(--accent) 50%, transparent); }
.login-title { font-size: 1.95rem; letter-spacing: .5px; }
.login-card .form-label { font-size: .98rem; }
.login-card .form-control { font-weight: 600; }
.login-card .input-group-text { font-size: 1.15rem; }
.login-card .btn-lg { font-size: 1.1rem; padding-top:.6rem; padding-bottom:.6rem; }
.login-card .text-muted { color: var(--text) !important; opacity: .85; }

/* login-contrast-2  (stronger login contrast) */
.login-page { background: radial-gradient(ellipse at center, #0a0f24 0%, #000008 80%); }
.login-card {
  background: #10152b;
  border: 2.5px solid var(--accent);
  box-shadow: 0 0 0 1px #ffffff26, 0 24px 70px #000a,
              0 0 60px color-mix(in srgb, var(--accent) 45%, transparent) !important;
}
.login-card .login-title { color:#ffffff !important;
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent); }
.login-card .form-label { color:#ffffff !important; font-weight:700; }
.login-card .form-control { background:#05070f; color:#ffffff; border-color:var(--accent); font-weight:700; }
.login-card .form-control::placeholder { color:#9fb0d0; opacity:1; }
.login-card .input-group-text { background:#05070f; color:var(--accent); border-color:var(--accent); }
.login-card .text-muted { color:#cfe0ff !important; opacity:1; }
.login-card .btn-warning { color:#000; font-weight:800; }