:root {
  --bg: #000000;
  --bg-2: #0a0a0c;
  --panel: #15161a;
  --panel-2: #1c1d22;
  --panel-hi: #26272d;
  --border: rgba(255,255,255,0.08);
  --border-hi: rgba(255,255,255,0.16);
  --text: #f5f5f7;
  --muted: #86868b;
  --accent: #0a84ff;
  --accent-2: #30d158;
  --buy: #30d158;
  --sell: #ff453a;
  --hold: #bf5af2;
  --bull: #30d158;
  --bear: #ff453a;
  --neutral: #98989d;
  --warn: #ff9f0a;
  --radius: 14px;
  --radius-lg: 18px;
  --shadow: 0 6px 24px rgba(0,0,0,0.35);
  --transition: 180ms cubic-bezier(0.33, 0, 0, 1);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}
button, input, select { font-family: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 8px; }
h1 { font-size: 20px; }
h2 { font-size: 18px; margin-top: 18px; }
h3 { font-size: 15px; color: var(--accent); }
code {
  background: var(--panel-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 10, 12, 0.75);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  position: sticky; top: 0; z-index: 20;
  gap: 16px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo { font-size: 22px; color: var(--accent); }
.brand .tag { color: var(--muted); font-size: 12px; display: block; }
.controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ctrl { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.ctrl.inline { gap: 6px; }
.controls input[type=range] { width: 120px; accent-color: var(--accent); }
.controls button {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); padding: 8px 16px;
  border-radius: 10px; cursor: pointer; font-size: 13px;
  font-weight: 500;
  transition: all var(--transition);
}
.controls button:hover { background: var(--panel-hi); border-color: var(--border-hi); }
.controls button:active { transform: scale(0.97); }
.controls .notify-btn.active {
  background: rgba(78, 163, 255, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}
.controls .notify-btn.active:hover { background: rgba(78, 163, 255, 0.25); }

.ios-hint {
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  z-index: 200;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.ios-hint-inner strong { display: block; margin-bottom: 6px; color: var(--accent); }
.ios-hint-inner p { margin: 0 0 10px 0; font-size: 13px; color: var(--text); line-height: 1.5; }
.ios-hint-inner button {
  background: var(--accent); color: #001a33; border: none;
  padding: 8px 14px; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 600;
}
.muted { color: var(--muted); font-size: 12px; }

.disclaimer {
  background: rgba(245, 158, 11, 0.08);
  border-bottom: 1px solid rgba(245, 158, 11, 0.25);
  color: #fcd34d;
  padding: 10px 20px;
  font-size: 13px;
}

.tabs {
  display: flex; gap: 4px; padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 10, 12, 0.6);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  overflow-x: auto;
  /* v207 — was position:sticky which caused a "floating middle" gap when
     the topbar's flex-wrap changed its height. Tab bar now flows in
     normal document order, sits directly below topbar. */
  position: relative; z-index: 15;
}
.tab {
  background: transparent; color: var(--muted);
  border: none; padding: 8px 14px;
  cursor: pointer; font-size: 13px; font-weight: 500;
  border-radius: 8px;
  white-space: nowrap;
  transition: all var(--transition);
}
.tab:hover { color: var(--text); background: var(--panel-2); }
.tab.active { color: var(--text); background: var(--panel-hi); }
.tab-content { display: none; padding: 20px; max-width: 1400px; margin: 0 auto; }
.tab-content.active { display: block; }

.status { color: var(--muted); font-size: 13px; margin-bottom: 12px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.card:hover { transform: translateY(-2px); border-color: var(--border-hi); background: var(--panel-2); }
.card:active { transform: translateY(0) scale(0.99); }
.card .card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.card .pair { font-weight: 600; font-size: 17px; letter-spacing: 0.3px; }
.direction-badge {
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px;
  letter-spacing: 1px;
}
.dir-BUY { background: rgba(34,197,94,.15); color: var(--buy); border: 1px solid rgba(34,197,94,.4); }
.dir-SELL { background: rgba(239,68,68,.15); color: var(--sell); border: 1px solid rgba(239,68,68,.4); }
.dir-HOLD { background: rgba(167,139,250,.15); color: var(--hold); border: 1px solid rgba(167,139,250,.4); }

.conf {
  margin: 10px 0 12px;
}
.conf-bar {
  height: 8px;
  background: var(--panel-2);
  border-radius: 4px;
  overflow: hidden;
}
.conf-bar span { display: block; height: 100%; transition: width .4s; }
.conf-label {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--muted); margin-bottom: 4px;
}
.conf-label b { color: var(--text); font-size: 13px; }

.levels { font-size: 13px; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; }
.levels .lbl { color: var(--muted); }
.levels .val { text-align: right; font-family: ui-monospace, monospace; }
.levels .pips { color: var(--muted); font-size: 11px; }

.card .vote-mini {
  display: flex; gap: 4px; margin-top: 10px;
  flex-wrap: wrap;
}
.vote-pill {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.vp-bullish { background: rgba(22,163,74,.2); color: #4ade80; }
.vp-bearish { background: rgba(220,38,38,.2); color: #f87171; }
.vp-neutral { background: rgba(100,116,139,.2); color: #94a3b8; }

.news-list { display: flex; flex-direction: column; gap: 10px; }
.news-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--neutral);
  padding: 12px 14px;
  border-radius: 6px;
}
.news-item.bullish { border-left-color: var(--bull); }
.news-item.bearish { border-left-color: var(--bear); }
.news-item .ni-head {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11px; color: var(--muted);
  margin-bottom: 4px;
}
.news-item .ni-title {
  font-size: 14px; margin-bottom: 4px; color: var(--text); font-weight: 500;
}
.news-item .ni-summary {
  font-size: 13px; color: var(--muted); line-height: 1.45;
}
.sent-tag {
  font-size: 10px; padding: 1px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.sent-bullish { background: rgba(22,163,74,.2); color: #4ade80; }
.sent-bearish { background: rgba(220,38,38,.2); color: #f87171; }
.sent-neutral { background: rgba(100,116,139,.2); color: #94a3b8; }

.cal-item {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 8px;
  display: grid; grid-template-columns: 120px 50px 1fr auto;
  gap: 12px; align-items: center;
  font-size: 13px;
}
.cal-impact-high { border-left: 3px solid var(--sell); }
.cal-impact-medium { border-left: 3px solid var(--warn); }
.cal-impact-low { border-left: 3px solid var(--neutral); }
.cal-country { font-weight: 600; }
.cal-values { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); }

.plat {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 14px 18px;
  margin-bottom: 12px;
  border-radius: 8px;
}
.plat ol { margin: 6px 0 0 20px; padding: 0; }
.plat li { margin-bottom: 4px; }

.calc {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 16px;
  border-radius: 8px;
  max-width: 560px;
  display: grid; gap: 10px;
}
.calc label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.calc input, .calc select {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); padding: 8px 10px;
  border-radius: 5px; font-size: 13px;
}
.calc button {
  background: var(--accent); color: #001a33;
  border: none; padding: 8px 14px;
  border-radius: 5px; cursor: pointer;
  font-size: 13px; font-weight: 600;
  justify-self: start;
}
#calc-result {
  font-size: 13px; padding: 10px; background: var(--panel-2);
  border-radius: 5px; display: none;
  font-family: ui-monospace, monospace;
}
#calc-result.visible { display: block; }

.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
}
.modal.hidden { display: none; }
.modal-content {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 100%; max-width: 700px;
  max-height: 90vh; overflow-y: auto;
  padding: 22px; position: relative;
}
.close-btn {
  position: absolute; top: 10px; right: 12px;
  background: transparent; color: var(--muted);
  border: none; font-size: 26px; cursor: pointer;
}
.close-btn:hover { color: var(--text); }

.modal-body h2 { display: flex; align-items: center; gap: 10px; }
.modal-body .dir-price { font-family: ui-monospace, monospace; color: var(--accent); }

.votes-table {
  width: 100%; border-collapse: collapse;
  margin: 10px 0; font-size: 13px;
}
.votes-table th, .votes-table td {
  text-align: left; padding: 7px 8px;
  border-bottom: 1px solid var(--border);
}
.votes-table th { color: var(--muted); font-weight: 500; font-size: 12px; }

.plan-steps { background: var(--panel-2); padding: 12px 16px; border-radius: 6px; }
.plan-steps ol { margin: 0 0 0 20px; }
.plan-steps li { margin-bottom: 4px; font-size: 13px; }

.perf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.perf-card {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 14px;
  border-radius: 8px;
  text-align: center;
}
.perf-card .big {
  font-size: 28px; font-weight: 700; color: var(--accent);
}
.perf-card .lbl {
  color: var(--muted); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer {
  padding: 16px 20px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  border-top: 1px solid var(--border);
  margin-top: 40px;
}

@media (max-width: 600px) {
  .topbar { flex-direction: column; align-items: stretch; }
  .controls { justify-content: space-between; }
  .cal-item { grid-template-columns: 1fr; gap: 4px; }
}

/* ============ Apple-style polish for new sections ============ */

.modal-content {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.modal { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.modal-actions {
  display: flex; align-items: center; gap: 12px;
  margin: 10px 0 14px;
  flex-wrap: wrap;
}
.take-trade-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all var(--transition);
}
.take-trade-btn:hover:not(:disabled) { background: #1a95ff; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(10,132,255,0.3); }
.take-trade-btn:disabled { background: var(--panel-2); color: var(--muted); cursor: not-allowed; }

/* Trades tab */
.trade-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: all var(--transition);
}
.trade-row:hover { border-color: var(--border-hi); }
.trade-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.trade-head .pair { font-weight: 600; font-size: 15px; }
.trade-head .trade-status { font-size: 12px; font-weight: 600; letter-spacing: 0.5px; }
.trade-levels { font-size: 13px; color: var(--muted); margin-bottom: 8px; font-family: ui-monospace, monospace; }
.trade-levels code { background: var(--panel-2); padding: 1px 6px; border-radius: 4px; color: var(--text); }
.trade-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.trade-actions button {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); padding: 5px 11px;
  border-radius: 8px; cursor: pointer; font-size: 12px;
  transition: all var(--transition);
}
.trade-actions button:hover { background: var(--panel-hi); border-color: var(--border-hi); }
.trade-delete:hover { background: rgba(255,69,58,0.15) !important; color: var(--sell) !important; border-color: rgba(255,69,58,0.4) !important; }

/* Forex Wisdom tab */
.wisdom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.wisdom-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: all var(--transition);
}
.wisdom-card:hover { border-color: var(--border-hi); }
.wisdom-card h3 { color: var(--text); font-size: 15px; margin-bottom: 10px; }
.wisdom-card ul { margin: 0; padding-left: 20px; font-size: 13px; }
.wisdom-card li { margin-bottom: 6px; color: var(--text); }
.wisdom-card strong { color: var(--accent); }

/* Refined buttons */
#refresh-btn, #auto-refresh { transition: all var(--transition); }

/* Smoother news items */
.news-item { border-radius: var(--radius); transition: all var(--transition); }
.news-item:hover { border-color: var(--border-hi); }

/* Perf cards richer */
.perf-card { border-radius: var(--radius); transition: all var(--transition); }
.perf-card:hover { border-color: var(--border-hi); }

/* Calendar items */
.cal-item { border-radius: var(--radius); transition: all var(--transition); }
.cal-item:hover { border-color: var(--border-hi); }

/* Plat cards */
.plat { border-radius: var(--radius); }

/* Smoother modal close */
.close-btn { transition: all var(--transition); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.close-btn:hover { background: var(--panel-2); color: var(--text); }

/* Calc inputs */
.calc { border-radius: var(--radius); }
.calc input, .calc select {
  border-radius: 8px;
  transition: all var(--transition);
}
.calc input:focus, .calc select:focus { outline: none; border-color: var(--accent); background: var(--panel-hi); }
.calc button { border-radius: 10px; transition: all var(--transition); }
.calc button:hover { background: #1a95ff; transform: translateY(-1px); }

/* Smooth header transitions */
.topbar, .tabs { transition: background var(--transition); }

/* Modal content padding upgrade */
.modal-content { padding: 26px 28px; }


.cal-warning {
  background: rgba(255, 159, 10, 0.1);
  border: 1px solid rgba(255, 159, 10, 0.35);
  color: var(--warn);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 14px;
}

.strategy-list { display: grid; gap: 8px; margin-bottom: 14px; }
.strategy-item {
  display: grid;
  grid-template-columns: 180px 80px 1fr;
  gap: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  align-items: center;
  transition: all var(--transition);
}
.strategy-item:hover { border-color: var(--border-hi); }
.strategy-item.strategy-bullish { border-left: 3px solid var(--buy); }
.strategy-item.strategy-bearish { border-left: 3px solid var(--sell); }
.strategy-name { font-weight: 600; }
.strategy-bias {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 5px;
  text-align: center;
}
.bias-bullish { background: rgba(48,209,88,0.15); color: var(--buy); }
.bias-bearish { background: rgba(255,69,58,0.15); color: var(--sell); }
.strategy-reason { color: var(--muted); font-size: 12px; }
@media (max-width: 600px) {
  .strategy-item { grid-template-columns: 1fr auto; }
  .strategy-reason { grid-column: 1 / -1; }
}

/* ============ Best-Setup visual treatment ============ */
.best-btn { border-radius: 10px; transition: all var(--transition); }
.best-btn.active {
  background: linear-gradient(135deg, #ffd60a, #ff9500);
  color: #000;
  border-color: #ffd60a;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(255,159,10,0.35);
}
.best-btn.active:hover { filter: brightness(1.1); }

.card-best {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, #ffd60a, #ff9500, #ff453a) border-box;
  box-shadow: 0 0 20px rgba(255,159,10,0.15), var(--shadow);
}
.card-best:hover {
  box-shadow: 0 0 30px rgba(255,159,10,0.25), var(--shadow);
  transform: translateY(-3px);
}
.best-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: linear-gradient(135deg, #ffd60a, #ff9500);
  color: #000;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 5px;
  z-index: 2;
}

/* ============ Per-signal Position Calculator ============ */
.calc-box {
  background: linear-gradient(135deg, rgba(48,209,88,0.06), rgba(10,132,255,0.06));
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 14px 0 18px;
}
.calc-box h3 {
  color: var(--text);
  margin-bottom: 12px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.calc-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.calc-inputs label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.calc-inputs input {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 16px;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  transition: border-color var(--transition);
}
.calc-inputs input:focus {
  outline: none;
  border-color: var(--accent);
}
.calc-presets {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.calc-preset {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all var(--transition);
}
.calc-preset:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.calc-warn {
  background: rgba(255,159,10,0.1);
  border: 1px solid rgba(255,159,10,0.3);
  color: var(--warn);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 10px;
}
.calc-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.calc-stat {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.calc-lbl {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.calc-val {
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
}
.calc-sub {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}
.calc-outcomes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.calc-outcome {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}
.calc-outcome .calc-val { font-size: 17px; }
.calc-loss { border-left: 3px solid var(--sell); }
.calc-loss .calc-val { color: var(--sell); }
.calc-tp1 { border-left: 3px solid var(--buy); }
.calc-tp1 .calc-val { color: var(--buy); }
.calc-tp2 { border-left: 3px solid var(--buy); }
.calc-tp2 .calc-val { color: var(--buy); }
.calc-tp3 { border-left: 3px solid var(--buy); }
.calc-tp3 .calc-val { color: var(--buy); }
.calc-broker {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
}
.calc-broker code {
  background: rgba(255,255,255,0.06);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
@media (max-width: 600px) {
  .calc-inputs { grid-template-columns: 1fr; }
  .calc-result-grid { grid-template-columns: 1fr; }
  .calc-outcomes { grid-template-columns: 1fr 1fr; }
}

/* ============ Cross-device sync UI ============ */
.sync-box {
  background: linear-gradient(135deg, rgba(10,132,255,0.08), rgba(48,209,88,0.06));
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.sync-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.sync-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 9px;
  border-radius: 5px;
}
.sync-on { background: rgba(48,209,88,0.15); color: var(--buy); }
.sync-off { background: rgba(255,69,58,0.12); color: var(--muted); }
.sync-body { display: flex; flex-direction: column; gap: 10px; }
.sync-body code { background: var(--panel-2); padding: 2px 8px; border-radius: 4px; color: var(--accent); font-weight: 600; }
.sync-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sync-actions input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-family: ui-monospace, monospace;
  min-width: 220px;
  flex: 1;
}
.sync-actions input:focus { outline: none; border-color: var(--accent); }
.sync-actions button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition);
}
.sync-actions button:hover { background: var(--panel-hi); border-color: var(--border-hi); }
#sync-set { background: var(--accent); color: #fff; border-color: var(--accent); }
#sync-set:hover { background: #1a95ff; border-color: #1a95ff; }

/* Inline status banner for sync — non-blocking, replaces alert() */
.sync-banner {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 280ms ease, background 200ms ease, border-color 200ms ease;
  border: 1px solid var(--border);
  background: var(--panel-2);
}
.sync-banner-ok {
  background: rgba(48, 209, 88, 0.12);
  border-color: rgba(48, 209, 88, 0.45);
  color: var(--buy);
}
.sync-banner-warn {
  background: rgba(255, 159, 10, 0.12);
  border-color: rgba(255, 159, 10, 0.45);
  color: var(--warn);
}
.sync-banner-info {
  background: rgba(10, 132, 255, 0.12);
  border-color: rgba(10, 132, 255, 0.45);
  color: var(--accent);
}

/* ============ Market bar (clock + sessions + next candle) ============ */
/* v253 — Removed position:sticky so the market bar scrolls with the page
   instead of staying pinned at top:62px while everything else scrolls past.
   User wanted it to behave like normal page content. backdrop-filter also
   removed because it was only needed for the translucent-while-pinned look. */
.market-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 22px;
  background: linear-gradient(180deg, rgba(15,15,18,0.95), rgba(10,10,12,0.95));
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  flex-wrap: wrap;
}
.market-bar .clock { font-family: ui-monospace, SF Mono, Menlo, monospace; }
.market-bar .clock strong { color: var(--text); font-weight: 600; }
.market-bar .clock-sep { color: var(--muted); opacity: 0.5; }
.market-bar .sessions strong { color: var(--text); }
.market-bar .sessions-active strong { color: var(--accent); }
.market-bar .sessions-peak {
  color: var(--warn);
  animation: pulse-glow 2.5s ease-in-out infinite;
}
.market-bar .sessions-peak strong { color: #ffd60a; }
.market-bar .next-candle strong { color: var(--accent); font-family: ui-monospace, monospace; }
@keyframes pulse-glow {
  0%, 100% { text-shadow: none; }
  50% { text-shadow: 0 0 8px rgba(255,159,10,0.6); }
}
@media (max-width: 600px) {
  .market-bar { padding: 8px 12px; font-size: 12px; gap: 8px; }
  .market-bar .clock-sep { display: none; }
}
/* v207 — old top:110px override no longer needed; tabs are not sticky */

/* ============ Per-card signal expiry timer ============ */
.card-timer {
  margin-top: 10px;
  padding: 6px 10px;
  background: rgba(10,132,255,0.08);
  border: 1px solid rgba(10,132,255,0.2);
  border-radius: 8px;
  font-size: 11px;
  color: var(--accent);
  text-align: center;
  font-weight: 500;
  transition: all var(--transition);
}
.card-timer strong { font-family: ui-monospace, monospace; font-weight: 700; }
.card-timer.timer-urgent {
  background: rgba(255,159,10,0.12);
  border-color: rgba(255,159,10,0.4);
  color: var(--warn);
  animation: pulse-glow 1.5s ease-in-out infinite;
}
.card-timer.timer-expired {
  background: rgba(255,69,58,0.1);
  border-color: rgba(255,69,58,0.3);
  color: var(--sell);
  animation: none;
}

/* ============ Per-signal note (card + modal) ============ */
.card-note-wrap {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.card-note-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #9aa);
  margin-bottom: 4px;
  letter-spacing: 0.2px;
}
.card-note {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0,0,0,0.25);
  color: inherit;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
  min-height: 38px;
  outline: none;
  transition: border-color 150ms;
}
.card-note:focus {
  border-color: rgba(10,132,255,0.6);
  background: rgba(0,0,0,0.35);
}
.card-note::placeholder { color: rgba(255,255,255,0.3); }
.card-note-status,
.modal-note-status {
  margin-top: 3px;
  font-size: 10px;
  min-height: 12px;
  color: var(--buy, #30d158);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.modal-note-wrap {
  margin: 14px 0;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.modal-note {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0,0,0,0.25);
  color: inherit;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
  outline: none;
  transition: border-color 150ms;
}
.modal-note:focus {
  border-color: rgba(10,132,255,0.6);
  background: rgba(0,0,0,0.35);
}
.modal-note::placeholder { color: rgba(255,255,255,0.3); }

/* ============ My Trades tab pulse + badge ============ */
.tab-badge {
  display: inline-block;
  background: var(--buy);
  color: #000;
  font-weight: 800;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
}
@keyframes tab-pulse-anim {
  0%, 100% { box-shadow: 0 0 0 0 rgba(48,209,88,0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(48,209,88,0); }
}
.tab.tab-pulse {
  background: rgba(48,209,88,0.15) !important;
  color: var(--buy) !important;
  animation: tab-pulse-anim 1.5s ease-in-out infinite;
}

/* ============ Trade modal status pill + clickable rows ============ */
.trade-status-pill {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 6px 12px;
  border-radius: 8px;
  text-transform: uppercase;
}
.trade-status-open  { background: rgba(10,132,255,0.15);  color: var(--accent); border: 1px solid rgba(10,132,255,0.4); }
.trade-status-won   { background: rgba(48,209,88,0.15);   color: var(--buy);    border: 1px solid rgba(48,209,88,0.4); }
.trade-status-lost  { background: rgba(255,69,58,0.15);   color: var(--sell);   border: 1px solid rgba(255,69,58,0.4); }
.trade-status-closed{ background: rgba(150,150,150,0.15); color: var(--muted);  border: 1px solid rgba(150,150,150,0.3); }

.modal-trade-action, .modal-trade-delete {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 14px; border-radius: 9px;
  cursor: pointer; font-size: 13px; font-weight: 500;
  transition: all var(--transition);
}
.modal-trade-action:hover { background: var(--panel-hi); border-color: var(--border-hi); }
.modal-trade-action[data-outcome="won"]:hover {
  background: rgba(48,209,88,0.18); color: var(--buy); border-color: rgba(48,209,88,0.5);
}
.modal-trade-action[data-outcome="lost"]:hover {
  background: rgba(255,69,58,0.18); color: var(--sell); border-color: rgba(255,69,58,0.5);
}
.modal-trade-delete:hover {
  background: rgba(255,69,58,0.15); color: var(--sell); border-color: rgba(255,69,58,0.4);
}

/* Make trade row body clickable */
.trade-row { cursor: pointer; }
.trade-row .trade-actions button { cursor: pointer; }
.trade-row:hover { transform: translateY(-1px); border-color: var(--accent); }

/* ============ Win probability indicator ============ */
.winprob {
  margin: 8px 0 10px;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.winprob strong { font-size: 13px; font-weight: 700; }
.winprob.wp-good { background: rgba(48,209,88,0.10); border-color: rgba(48,209,88,0.3); color: var(--buy); }
.winprob.wp-mid  { background: rgba(255,159,10,0.08); border-color: rgba(255,159,10,0.25); color: var(--warn); }
.winprob.wp-bad  { background: rgba(255,69,58,0.08);  border-color: rgba(255,69,58,0.25);  color: var(--sell); }

.winprob-modal {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  margin: 12px 0 16px;
  border-radius: 12px;
  border: 1px solid var(--border-hi);
}
.winprob-modal .winprob-num {
  font-size: 38px;
  font-weight: 800;
  font-family: ui-monospace, monospace;
  line-height: 1;
}
.winprob-modal .winprob-detail { font-size: 13px; line-height: 1.5; flex: 1; }
.winprob-modal.wp-good { background: rgba(48,209,88,0.08); }
.winprob-modal.wp-good .winprob-num { color: var(--buy); }
.winprob-modal.wp-mid  { background: rgba(255,159,10,0.06); }
.winprob-modal.wp-mid  .winprob-num { color: var(--warn); }
.winprob-modal.wp-bad  { background: rgba(255,69,58,0.06); }
.winprob-modal.wp-bad  .winprob-num { color: var(--sell); }
@media (max-width: 600px) {
  .winprob-modal { flex-direction: column; align-items: flex-start; gap: 8px; }
  .winprob-modal .winprob-num { font-size: 32px; }
}

/* ============ PRO badge — top-tier signals only ============ */
.card-pro {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, #ffd60a, #ff453a, #bf5af2, #0a84ff) border-box;
  box-shadow: 0 0 30px rgba(255,214,10,0.2), 0 0 50px rgba(191,90,242,0.1), var(--shadow);
  animation: pro-shimmer 3s ease-in-out infinite;
}
@keyframes pro-shimmer {
  0%, 100% { box-shadow: 0 0 30px rgba(255,214,10,0.2), 0 0 50px rgba(191,90,242,0.1), var(--shadow); }
  50%      { box-shadow: 0 0 40px rgba(255,214,10,0.35), 0 0 60px rgba(191,90,242,0.2), var(--shadow); }
}
.pro-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: linear-gradient(135deg, #ffd60a, #ff9500, #ff453a);
  color: #000;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 6px;
  z-index: 2;
  box-shadow: 0 2px 12px rgba(255,159,10,0.5);
}

/* Reality-check banner — keeps user grounded about win rates */
.reality-banner {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(255,159,10,0.06);
  border: 1px solid rgba(255,159,10,0.18);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.reality-banner strong { color: var(--warn); }
.reality-banner em { color: var(--muted); }

/* ============ Strategy attribution strip on each card ============ */
.card-strats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.strat-tag {
  background: rgba(10,132,255,0.12);
  border: 1px solid rgba(10,132,255,0.3);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.2px;
}
.card-best .strat-tag,
.card-pro .strat-tag {
  background: rgba(255,214,10,0.12);
  border-color: rgba(255,214,10,0.3);
  color: #ffd60a;
}

/* ============ Discipline warning banner in My Trades ============ */
.discipline-warning {
  background: linear-gradient(135deg, rgba(255,69,58,0.10), rgba(255,159,10,0.08));
  border: 1px solid rgba(255,69,58,0.35);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(255,69,58,0.15);
}
.dw-head {
  font-size: 15px;
  font-weight: 700;
  color: var(--sell);
  margin-bottom: 12px;
}
.dw-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  font-size: 13px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
}
.dw-stats strong { font-size: 14px; }
.dw-fix {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.dw-fix strong { color: #ffd60a; }

/* ============ EXTREME mode treatment ============ */
.best-btn.extreme {
  background: linear-gradient(135deg, #ff453a, #ff9f0a, #ffd60a);
  color: #000;
  border-color: #ff453a;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(255,69,58,0.5);
  animation: extreme-pulse 2s ease-in-out infinite;
}
@keyframes extreme-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(255,69,58,0.5); }
  50%      { box-shadow: 0 0 30px rgba(255,159,10,0.7); }
}
.card-extreme {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, #ff453a, #ff9f0a, #ffd60a) border-box;
  box-shadow: 0 0 40px rgba(255,69,58,0.25), 0 0 60px rgba(255,159,10,0.15), var(--shadow);
}
.extreme-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: linear-gradient(135deg, #ff453a, #ff9f0a, #ffd60a);
  color: #000;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 6px;
  z-index: 2;
  box-shadow: 0 2px 14px rgba(255,69,58,0.6);
}

/* Filter-blocked Take button */
.take-trade-btn.blocked {
  background: var(--panel-2);
  color: var(--muted);
  border: 1px dashed var(--border-hi);
  cursor: not-allowed;
  opacity: 0.7;
}
.take-trade-btn.blocked:hover { background: var(--panel-2); }
.filter-block-msg {
  font-size: 12px;
  color: var(--warn);
  background: rgba(255,159,10,0.08);
  border: 1px solid rgba(255,159,10,0.25);
  padding: 6px 10px;
  border-radius: 8px;
  margin-left: 8px;
  flex: 1;
}

/* ============ Smartness score + correlation/vol flags ============ */
.smart-score {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 6px;
}
.smart-score.sc-high { background: rgba(48,209,88,0.15); color: var(--buy); border: 1px solid rgba(48,209,88,0.4); }
.smart-score.sc-mid  { background: rgba(255,159,10,0.12); color: var(--warn); border: 1px solid rgba(255,159,10,0.3); }
.smart-score.sc-low  { background: rgba(255,69,58,0.10); color: var(--sell); border: 1px solid rgba(255,69,58,0.25); }

.corr-flag, .vol-flag {
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}
.corr-flag {
  background: rgba(255,159,10,0.10);
  border: 1px solid rgba(255,159,10,0.3);
  color: var(--warn);
}
.vol-flag.chaos {
  background: rgba(255,69,58,0.10);
  border: 1px solid rgba(255,69,58,0.3);
  color: var(--sell);
}
.vol-flag.dead {
  background: rgba(150,150,150,0.10);
  border: 1px solid rgba(150,150,150,0.25);
  color: var(--muted);
}

/* ============ Pattern-match learning note on cards ============ */
.pattern-note {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(150,150,150,0.08);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text);
}
.pattern-note.pn-up {
  background: rgba(48,209,88,0.10);
  border-color: rgba(48,209,88,0.3);
  color: var(--buy);
}
.pattern-note.pn-down {
  background: rgba(255,69,58,0.10);
  border-color: rgba(255,69,58,0.3);
  color: var(--sell);
}

/* ============ Strategy backtester UI ============ */
.backtest-box {
  background: linear-gradient(135deg, rgba(10,132,255,0.08), rgba(48,209,88,0.06));
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.backtest-box h3 { margin-bottom: 8px; }
.backtest-box p { font-size: 13px; }
.run-bt-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all var(--transition);
}
.run-bt-btn:hover:not(:disabled) { background: #1a95ff; transform: translateY(-1px); }
.run-bt-btn:disabled { background: var(--panel-2); color: var(--muted); cursor: not-allowed; }
#bt-progress {
  margin-top: 8px;
  font-size: 12px;
  font-family: ui-monospace, monospace;
}

/* ============ Regime + Calibration notes ============ */
.regime-note {
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(191,90,242,0.10);
  border: 1px solid rgba(191,90,242,0.3);
  color: var(--hold);
}
.cal-note {
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  background: rgba(10,132,255,0.08);
  border: 1px solid rgba(10,132,255,0.25);
  color: var(--accent);
  cursor: help;
}

/* ============ Equity curve ============ */
.equity-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.equity-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; font-size: 14px;
  flex-wrap: wrap; gap: 8px;
}
.equity-curve { display: block; }

/* ============ Trades action row + CSV button ============ */
.trades-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-bottom: 12px;
}
#export-csv,
#signal-recovery-btn {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border);
  padding: 7px 14px; border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 500;
  transition: all var(--transition);
}
#export-csv:hover,
#signal-recovery-btn:hover {
  background: var(--panel-hi); border-color: var(--accent); color: var(--accent);
}
/* Recovery button has a subtle accent stripe so it's findable at a glance —
   it's an "emergency" tool a user reaches for after a strategy outage, so
   should be visible but not loud. Yellow tone (warn) distinguishes it from
   the neutral export button next to it. */
#signal-recovery-btn {
  border-left: 3px solid #fbbf24;
}
#signal-recovery-btn:hover {
  border-color: #fbbf24;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
}

/* ============ Per-trade notes ============ */
.trade-notes-wrap {
  margin: 8px 0 0;
  font-size: 12px;
}
.trade-notes-wrap summary {
  cursor: pointer; padding: 4px 0; user-select: none;
  color: var(--muted);
}
.trade-notes-wrap summary em { color: var(--text); font-style: italic; font-weight: 400; }
.trade-notes-wrap[open] summary { color: var(--text); }
.trade-notes {
  width: 100%; min-height: 60px; max-height: 200px; resize: vertical;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px; font-family: inherit;
  margin-top: 6px;
}
.trade-notes:focus { outline: none; border-color: var(--accent); }

/* ============ Confidence breakdown panel ============ */
.conf-breakdown {
  margin: 10px 0 16px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
}
.conf-breakdown summary {
  cursor: pointer; padding: 2px 0; user-select: none;
  font-weight: 600; color: var(--accent);
}
.conf-breakdown table {
  width: 100%; margin-top: 10px;
  border-collapse: collapse;
}
.conf-breakdown td {
  padding: 5px 0; font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.conf-breakdown td:last-child { text-align: right; font-family: ui-monospace, monospace; font-weight: 600; }
.conf-breakdown .cb-pos { color: var(--buy); }
.conf-breakdown .cb-neg { color: var(--sell); }
.conf-breakdown .cb-zero { color: var(--muted); }
.conf-breakdown .cb-sep td { border-top: 2px solid var(--border-hi); padding-top: 8px; font-weight: 600; }
.conf-breakdown .cb-final td {
  border-top: 1px dashed var(--border);
  padding-top: 8px; font-weight: 700;
  color: var(--accent);
}

/* ════════════════════════════════════════════════════════════════════
   Smoothness + responsive polish pass — affects look & feel only,
   no functional changes. Touch targets, mobile breakpoints, reduce-
   motion support, smooth scrolling, skeleton loaders.
   ════════════════════════════════════════════════════════════════════ */

/* 1. Smooth global scroll (iOS especially benefits) */
html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
body { overscroll-behavior-y: contain; }

/* 2. Respect user accessibility preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 3. Better card grid on narrow phones — single-column below 480px */
@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; gap: 10px; }
  .card { padding: 14px; }
  .card .pair { font-size: 16px; }
  .levels { font-size: 13px; }
  .tab-content { padding: 14px; }
  .market-bar { font-size: 12px; padding: 6px 10px; gap: 6px; }
  .market-bar .clock-sep { display: none; }
  .topbar { padding: 10px 14px; gap: 10px; }
  .topbar .controls { gap: 8px; }
  .controls button { padding: 7px 12px; font-size: 13px; }
  .controls input[type=range] { width: 90px; }
  .conf-breakdown td { font-size: 12px; }
  .equity-wrap { padding: 12px; }
}

/* 4. Mobile bottom-sheet modal — feels native on phones */
@media (max-width: 600px) {
  .modal {
    padding: 0;
    align-items: flex-end;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .modal-content {
    max-height: 92vh;
    width: 100%;
    border-radius: 18px 18px 0 0;
    padding: 22px 16px 36px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: sheet-up 240ms cubic-bezier(0.33, 0, 0, 1);
  }
  .modal-content::before {
    content: '';
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
  }
  .close-btn { top: 14px; right: 14px; }
  .modal-actions { flex-direction: column; align-items: stretch; }
  .modal-actions .take-trade-btn,
  .modal-actions .modal-trade-action,
  .modal-actions .modal-trade-delete { width: 100%; }
}
@keyframes sheet-up {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* 5. Wide tables — let them scroll horizontally instead of overflowing */
.tab-content table.votes-table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) {
  .tab-content table.votes-table th,
  .tab-content table.votes-table td { padding: 6px 8px; font-size: 12px; white-space: nowrap; }
}

/* 6. Tab bar scroll-snap on mobile, hidden scrollbar */
.tabs { scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; }
.tabs::-webkit-scrollbar { display: none; }
.tab { scroll-snap-align: start; }

/* 7. Minimum tap target for accessibility (Apple HIG = 44pt, Material = 48dp) */
@media (max-width: 600px) {
  .controls button, .tab, .calc-preset, .trade-actions button, #export-csv, .run-bt-btn,
  #sync-set, #sync-pull, #sync-push, #sync-clear, .modal-trade-action, .modal-trade-delete,
  .take-trade-btn, .calc-btn, #ios-hint-dismiss {
    min-height: 40px;
  }
}

/* 8. Better tactile press response on cards + buttons */
.card { will-change: transform; transition: transform 200ms cubic-bezier(0.33, 0, 0, 1), border-color 200ms, background 200ms, box-shadow 300ms; }
.card:active { transform: scale(0.985); }
button { will-change: transform; }
button:active:not(:disabled) { transform: scale(0.96); }
.tab:active { transform: scale(0.96); }

/* 9. Smooth confidence bar animation */
.conf-bar span { transition: width 600ms cubic-bezier(0.33, 0, 0, 1), background 200ms; }

/* 10. Skeleton loader for the signals grid before first paint */
.skeleton-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px; height: 200px;
  position: relative; overflow: hidden;
}
.skeleton-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 11. Smoother focus rings for keyboard nav */
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* 12. Make sure long values don't break card layouts */
.levels .val, .strategy-name, .news-item .ni-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 13. Polish the equity curve on small screens */
@media (max-width: 600px) {
  .equity-wrap { padding: 12px 14px; }
  .equity-head { font-size: 13px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .equity-curve { max-height: 140px; }
}

/* 14. Smoother news item enter on tab switch */
.news-item, .cal-item, .trade-row, .perf-card {
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.news-item:hover, .cal-item:hover, .trade-row:hover, .perf-card:hover {
  transform: translateY(-1px);
}

/* 15. iOS PWA — respect safe areas (notch, home indicator) */
@supports (padding: env(safe-area-inset-top)) {
  .topbar { padding-top: max(14px, env(safe-area-inset-top)); }
  .modal-content { padding-bottom: max(36px, env(safe-area-inset-bottom)); }
}

/* 16. Loading state for the position calculator */
.calc-output:empty::before {
  content: 'Enter a risk amount to calculate position size';
  color: var(--muted); font-size: 12px;
  display: block; padding: 8px 12px;
  background: var(--panel-2); border-radius: 8px;
}

/* Composite edge score badge — visible alongside smart score and confidence */
.edge-score {
  display: inline-block;
  background: linear-gradient(135deg, rgba(255,214,10,0.15), rgba(255,159,10,0.15));
  border: 1px solid rgba(255,214,10,0.4);
  color: #ffd60a;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 4px;
}

/* Best Available fallback — top-3 by edge score when no full Best Setup exists */
.card-best-available { position: relative; }
.card-best-available::before {
  content: '⏳ BEST AVAILABLE';
  position: absolute;
  top: 10px; left: 12px;
  background: rgba(255,159,10,0.18);
  color: var(--warn);
  font-size: 9px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.8px;
  z-index: 3;
  border: 1px solid rgba(255,159,10,0.4);
}
/* v431 — the ::before badge is absolutely positioned at top:10px with
   z-index 3, so it floated ON TOP of the card's own header and covered the
   instrument name ("BEST AVAILABLE" sat over "BTC/USD"). Absolute elements
   take no space in flow, so the fix is to reserve that space explicitly:
   the badge occupies roughly 10px offset + 17px height, so 32px of extra
   top padding clears it with breathing room at every card width. */
.card-best-available .card {
  opacity: 0.92;
  padding-top: 32px;
}

/* System diagnostic panel */
.diag-box {
  background: linear-gradient(135deg, rgba(255,159,10,0.06), rgba(10,132,255,0.06));
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.diag-box h3 { color: var(--text); margin-bottom: 8px; }
.diag-box p { font-size: 13px; }

/* ============ Pro's Pick banner — the single best trade right now ============ */
.pro-pick-banner {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(255,214,10,0.10), rgba(10,132,255,0.10));
  border: 2px solid var(--border-hi);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.pro-pick-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,214,10,0.06) 50%, transparent 100%);
  opacity: 0; transition: opacity var(--transition);
}
.pro-pick-banner:hover { transform: translateY(-2px); border-color: var(--accent); }
.pro-pick-banner:hover::before { opacity: 1; }
.pp-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.pp-tier {
  background: #ffd60a; color: #000;
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  padding: 4px 10px; border-radius: 6px;
  box-shadow: 0 2px 12px rgba(255,159,10,0.4);
}
.pp-title { font-size: 13px; color: var(--muted); font-weight: 500; }
.pp-body { display: flex; flex-direction: column; gap: 8px; }
.pp-signal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-pair { font-size: 22px; font-weight: 700; letter-spacing: 0.5px; }
.pp-conf {
  background: rgba(255,214,10,0.18);
  border: 1px solid rgba(255,214,10,0.45);
  color: #ffd60a;
  font-size: 14px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  font-family: ui-monospace, monospace;
}
.pp-conf-pct { font-size: 16px; font-weight: 700; color: var(--text); }
.pp-levels { font-size: 13px; color: var(--text); font-family: ui-monospace, monospace; }
.pp-levels code { background: var(--panel-2); padding: 2px 6px; border-radius: 4px; color: var(--accent); }
.pp-reasons {
  font-size: 13px; color: var(--text);
  background: var(--panel-2); border-radius: 8px;
  padding: 8px 12px;
}
.pp-reasons strong { color: var(--accent); }
.pp-runnerup {
  font-size: 12px; color: var(--muted); padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.pp-runnerup strong { color: var(--text); }

/* ════════════════════════════════════════════════════════════════════
   RADIANT-style SMC Gold Signal — used ONLY by the XAU/USD Radiant
   strategy. Distinct gold visual treatment so it can never be confused
   with any other signal on the site.
   ════════════════════════════════════════════════════════════════════ */
.radiant-card {
  position: relative;
  grid-column: 1 / -1;
  margin-bottom: 12px;
  border-radius: 18px;
  padding: 22px 26px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at top right, rgba(255,214,10,0.18) 0%, transparent 65%),
    radial-gradient(ellipse at bottom left, rgba(255,159,10,0.14) 0%, transparent 65%),
    linear-gradient(135deg, #1a1408 0%, #2a1d09 50%, #1a1408 100%);
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 28px rgba(255,214,10,0.22),
    0 0 60px rgba(255,159,10,0.10),
    inset 0 0 30px rgba(255,159,10,0.05);
  animation: radiant-pulse 3.4s ease-in-out infinite;
}
.radiant-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(135deg, #ffd60a, #ff9500, #ffd60a, #d4a017, #ffd60a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  background-size: 300% 300%;
  animation: radiant-border 6s ease-in-out infinite;
}
@keyframes radiant-pulse {
  0%, 100% { box-shadow: 0 0 28px rgba(255,214,10,0.22), 0 0 60px rgba(255,159,10,0.10), inset 0 0 30px rgba(255,159,10,0.05); }
  50%      { box-shadow: 0 0 42px rgba(255,214,10,0.36), 0 0 90px rgba(255,159,10,0.18), inset 0 0 40px rgba(255,159,10,0.10); }
}
@keyframes radiant-border {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.radiant-glow {
  position: absolute;
  top: -50%; right: -20%; width: 80%; height: 200%;
  background: radial-gradient(ellipse, rgba(255,214,10,0.10) 0%, transparent 70%);
  pointer-events: none;
  animation: radiant-shimmer 8s linear infinite;
}
@keyframes radiant-shimmer {
  0%   { transform: translateX(-30%) rotate(15deg); }
  100% { transform: translateX(30%) rotate(15deg); }
}

.radiant-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; position: relative; z-index: 2;
}
.radiant-tag {
  background: linear-gradient(135deg, #ffd60a, #ff9500);
  color: #1a1408;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 5px 11px;
  border-radius: 6px;
  box-shadow: 0 2px 14px rgba(255,159,10,0.5);
}
.radiant-count { font-size: 12px; color: #d4a017 !important; font-weight: 600; }

.radiant-title {
  color: #ffd60a;
  font-size: 22px;
  font-weight: 700;
  margin: 6px 0 14px;
  position: relative; z-index: 2;
  letter-spacing: 0.3px;
  text-shadow: 0 0 24px rgba(255,214,10,0.4);
}

.radiant-block {
  position: relative; z-index: 2;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,214,10,0.25);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-family: ui-monospace, SF Mono, Menlo, monospace;
  font-size: 14px;
}
.radiant-block .rb-row {
  display: grid; grid-template-columns: 130px 1fr auto;
  gap: 8px; align-items: center;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255,214,10,0.10);
}
.radiant-block .rb-row:last-child { border-bottom: none; }
.radiant-block .rb-lbl { color: #d4a017; font-weight: 600; }
.radiant-block code {
  background: transparent;
  color: #fff;
  font-size: 15px; font-weight: 700;
  padding: 0;
}
.radiant-block .rr-tag {
  font-size: 11px;
  background: rgba(255,214,10,0.12);
  border: 1px solid rgba(255,214,10,0.3);
  color: #ffd60a;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}

.radiant-analysis {
  position: relative; z-index: 2;
  background: rgba(0,0,0,0.25);
  border-left: 3px solid #ffd60a;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: #f5e6c8;
}
.radiant-analysis strong { color: #ffd60a; display: block; margin-bottom: 6px; font-size: 13px; }
.radiant-analysis p { margin: 0; }

@media (max-width: 600px) {
  .radiant-card { padding: 16px 18px; }
  .radiant-title { font-size: 18px; }
  .radiant-block { font-size: 13px; padding: 10px 12px; }
  .radiant-block .rb-row { grid-template-columns: 110px 1fr auto; gap: 4px; }
}

/* Radiant gold trade row — auto-added trades get subtle gold left-border */
.trade-row-radiant {
  border-left: 3px solid #ffd60a;
  background: linear-gradient(90deg, rgba(255,214,10,0.06), transparent 80%);
}
.trade-row-radiant:hover {
  background: linear-gradient(90deg, rgba(255,214,10,0.10), transparent 80%);
}
.trade-radiant-tag {
  background: linear-gradient(135deg, #ffd60a, #ff9500);
  color: #1a1408;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.6px;
}
.trade-auto-tag {
  background: rgba(10,132,255,0.12);
  color: var(--accent);
  border: 1px solid rgba(10,132,255,0.3);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* Radiant gold "scanning, waiting for setup" status */
.radiant-status {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(255,214,10,0.05), rgba(0,0,0,0.3));
  border: 1px dashed rgba(255,214,10,0.3);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #d4a017;
}
.rs-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rs-head strong { color: #ffd60a; }
.rs-count { font-size: 11px; color: #ffd60a; font-weight: 700; background: rgba(255,214,10,0.12); border: 1px solid rgba(255,214,10,0.3); padding: 2px 8px; border-radius: 999px; }
.rs-progress { height: 4px; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
.rs-progress span { display: block; height: 100%; background: linear-gradient(90deg, #ffd60a, #ff9500); transition: width 400ms; }
.rs-passed { font-size: 12px; color: #30d158; margin-bottom: 4px; }
.rs-blocking { font-size: 12px; color: #ff9f0a; margin-bottom: 6px; }
.rs-blocking strong { color: #ffd60a; }
.rs-foot { font-size: 11px; }

/* SMC confirmation badge — every signal passing through the universal SMC gate */
.smc-badge {
  display: inline-block;
  background: rgba(48,209,88,0.12);
  border: 1px solid rgba(48,209,88,0.4);
  color: var(--buy);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 4px;
}

/* SMC strategy confirmed tag — appears on every signal that passed the
   universal 7-gate SMC confirmation. Distinct blue-green palette so it can
   never be confused with the gold Radiant/PRO/BEST badges. */
.smc-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(48,209,88,0.18), rgba(10,132,255,0.18));
  border: 1px solid rgba(48,209,88,0.4);
  color: #5fd5ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.7px;
  padding: 3px 9px;
  border-radius: 5px;
  margin: 8px 0;
  width: fit-content;
  box-shadow: 0 1px 6px rgba(48,209,88,0.15);
}
.smc-tag-modal {
  font-size: 12px;
  padding: 6px 12px;
  margin: 10px 0;
}

/* SMC strategy tracking summary on My Trades */
.smc-summary {
  background: linear-gradient(135deg, rgba(10,132,255,0.10), rgba(48,209,88,0.10));
  border: 1px solid rgba(48,209,88,0.30);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 14px;
}
.smc-summary-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; flex-wrap: wrap; gap: 6px;
}
.smc-summary-head strong { color: #5fd5ff; font-size: 14px; }
.smc-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.smc-summary-grid > div {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}
.ssg-num {
  display: block;
  font-size: 22px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  margin-bottom: 2px;
}
.ssg-lbl {
  display: block;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.4px;
}

/* SMC auto trade row — distinct from gold Radiant */
.trade-row-smc {
  border-left: 3px solid #5fd5ff;
  background: linear-gradient(90deg, rgba(10,132,255,0.06), transparent 80%);
}
.trade-row-smc:hover {
  background: linear-gradient(90deg, rgba(10,132,255,0.10), transparent 80%);
}
.trade-smc-tag {
  background: linear-gradient(135deg, rgba(48,209,88,0.20), rgba(10,132,255,0.20));
  border: 1px solid rgba(48,209,88,0.4);
  color: #5fd5ff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.6px;
}

/* ════════════════════════════════════════════════════════════════════════
   ORB (Opening Range Breakout) STRATEGY UI
   Mirrors the SMC styling structure but uses an orange/amber palette so
   you can tell SMC and ORB apart at a glance — SMC = blue/green, ORB = orange.
   ════════════════════════════════════════════════════════════════════════ */

/* ORB confirmation small badge in the conf-label row */
.orb-badge {
  display: inline-block;
  background: rgba(255, 159, 10, 0.12);
  border: 1px solid rgba(255, 159, 10, 0.45);
  color: #ffb347;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 4px;
}

/* ORB strategy confirmed tag — appears on every signal that passed the
   8-gate ORB confirmation. Distinct orange/amber palette so it's never
   confused with SMC's blue-green. */
.orb-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(255, 159, 10, 0.20), rgba(255, 105, 30, 0.18));
  border: 1px solid rgba(255, 159, 10, 0.50);
  color: #ffb347;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.7px;
  padding: 3px 9px;
  border-radius: 5px;
  margin: 8px 0;
  width: fit-content;
  box-shadow: 0 1px 6px rgba(255, 159, 10, 0.18);
}
.orb-tag-modal {
  font-size: 12px;
  padding: 6px 12px;
  margin: 10px 0;
}

/* ORB strategy tracking summary on My Trades */
.orb-summary {
  background: linear-gradient(135deg, rgba(255, 159, 10, 0.10), rgba(255, 105, 30, 0.08));
  border: 1px solid rgba(255, 159, 10, 0.32);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 14px;
}
.orb-summary-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; flex-wrap: wrap; gap: 6px;
}
.orb-summary-head strong { color: #ffb347; font-size: 14px; }
.orb-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.orb-summary-grid > div {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}
.osg-num {
  display: block;
  font-size: 22px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  margin-bottom: 2px;
}
.osg-lbl {
  display: block;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.4px;
}

/* ORB auto trade row — distinct from SMC and gold Radiant */
.trade-row-orb {
  border-left: 3px solid #ffb347;
  background: linear-gradient(90deg, rgba(255, 159, 10, 0.06), transparent 80%);
}
.trade-row-orb:hover {
  background: linear-gradient(90deg, rgba(255, 159, 10, 0.10), transparent 80%);
}
.trade-orb-tag {
  background: linear-gradient(135deg, rgba(255, 159, 10, 0.22), rgba(255, 105, 30, 0.20));
  border: 1px solid rgba(255, 159, 10, 0.45);
  color: #ffb347;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.6px;
}

/* ════════════════════════════════════════════════════════════════════════
   STRATEGY QUALITY GRADING
   Each strategy now scores 0–100 with letter grade. Tags get tinted by
   grade so A+ pops visually vs B. Breakdown shows on hover and in modal.
   ════════════════════════════════════════════════════════════════════════ */
.grade-pill {
  display: inline-block;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.30);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

/* Grade-tinted SMC tags — the higher the grade, the more emphatic the look */
.smc-tag.smc-grade-aplus,
.orb-tag.orb-grade-aplus {
  box-shadow: 0 2px 12px rgba(48, 209, 88, 0.45);
  border-width: 2px;
  font-weight: 900;
}
.smc-tag.smc-grade-aplus { background: linear-gradient(135deg, rgba(48,209,88,0.40), rgba(10,132,255,0.35)); }
.orb-tag.orb-grade-aplus { background: linear-gradient(135deg, rgba(255, 159, 10, 0.45), rgba(255, 105, 30, 0.40)); box-shadow: 0 2px 12px rgba(255, 159, 10, 0.45); }

.smc-tag.smc-grade-a    { background: linear-gradient(135deg, rgba(48,209,88,0.30), rgba(10,132,255,0.25)); }
.orb-tag.orb-grade-a    { background: linear-gradient(135deg, rgba(255, 159, 10, 0.32), rgba(255, 105, 30, 0.28)); }

.smc-tag.smc-grade-bplus { opacity: 0.92; }
.orb-tag.orb-grade-bplus { opacity: 0.92; }

.smc-tag.smc-grade-b,
.orb-tag.orb-grade-b,
.smc-tag.smc-grade-c,
.orb-tag.orb-grade-c {
  opacity: 0.78;
  box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════════════
   GENERIC STRATEGY TAGS — ICT, Trend Pullback, BB Squeeze, RSI Divergence
   Each gets its own color theme + matching trade-row left border.
   ════════════════════════════════════════════════════════════════════════ */
.strat-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.7px;
  padding: 3px 9px;
  border-radius: 5px;
  margin: 8px 0;
  width: fit-content;
}
.strat-tag-modal { font-size: 12px; padding: 6px 12px; margin: 10px 0; }

/* ICT — violet/purple */
.strat-tag-ict {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.20), rgba(139, 92, 246, 0.18));
  border: 1px solid rgba(168, 85, 247, 0.50);
  color: #c4a3ff;
  box-shadow: 0 1px 6px rgba(168, 85, 247, 0.18);
}
.strat-badge-ict {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.45);
  color: #c4a3ff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 4px;
  display: inline-block;
}

/* Trend Pullback — cyan/teal */
.strat-tag-trend {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.20), rgba(20, 184, 166, 0.18));
  border: 1px solid rgba(6, 182, 212, 0.50);
  color: #67e8f9;
  box-shadow: 0 1px 6px rgba(6, 182, 212, 0.18);
}
.strat-badge-trend {
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.45);
  color: #67e8f9;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 4px;
  display: inline-block;
}

/* BB Squeeze — pink/magenta */
.strat-tag-squeeze {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.20), rgba(244, 114, 182, 0.18));
  border: 1px solid rgba(236, 72, 153, 0.50);
  color: #f9a8d4;
  box-shadow: 0 1px 6px rgba(236, 72, 153, 0.18);
}
.strat-badge-squeeze {
  background: rgba(236, 72, 153, 0.12);
  border: 1px solid rgba(236, 72, 153, 0.45);
  color: #f9a8d4;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 4px;
  display: inline-block;
}

/* RSI Divergence — yellow/gold */
.strat-tag-divergence {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.22), rgba(202, 138, 4, 0.18));
  border: 1px solid rgba(234, 179, 8, 0.50);
  color: #fde047;
  box-shadow: 0 1px 6px rgba(234, 179, 8, 0.18);
}
.strat-badge-divergence {
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.45);
  color: #fde047;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 4px;
  display: inline-block;
}

/* Strategy summaries on Trades tab */
.strat-summary {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 14px;
  animation: banner-slide-in 240ms cubic-bezier(0.33, 0, 0, 1);
}
.strat-summary-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 6px; }
.strat-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.strat-summary-grid > div {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}

.strat-summary-ict        { border-color: rgba(168, 85, 247, 0.35); background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), transparent); }
.strat-summary-ict .strat-summary-head strong { color: #c4a3ff; }
.strat-summary-trend      { border-color: rgba(6, 182, 212, 0.35); background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), transparent); }
.strat-summary-trend .strat-summary-head strong { color: #67e8f9; }
.strat-summary-squeeze    { border-color: rgba(236, 72, 153, 0.35); background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), transparent); }
.strat-summary-squeeze .strat-summary-head strong { color: #f9a8d4; }
.strat-summary-divergence { border-color: rgba(234, 179, 8, 0.35); background: linear-gradient(135deg, rgba(234, 179, 8, 0.08), transparent); }
.strat-summary-divergence .strat-summary-head strong { color: #fde047; }

/* Trade row badges — small versions for the My Trades list */
.trade-strat-tag {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.6px;
}
.trade-strat-ict        { background: rgba(168, 85, 247, 0.20); border: 1px solid rgba(168, 85, 247, 0.45); color: #c4a3ff; }
.trade-strat-trend      { background: rgba(6, 182, 212, 0.20);  border: 1px solid rgba(6, 182, 212, 0.45);  color: #67e8f9; }
.trade-strat-squeeze    { background: rgba(236, 72, 153, 0.20); border: 1px solid rgba(236, 72, 153, 0.45); color: #f9a8d4; }
.trade-strat-divergence { background: rgba(234, 179, 8, 0.22);  border: 1px solid rgba(234, 179, 8, 0.45);  color: #fde047; }
.trade-server-tag {
  background: rgba(100, 116, 139, 0.18);
  border: 1px solid rgba(100, 116, 139, 0.45);
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.6px;
}

/* Vibe Legend — vibration pattern reference modal */
.vibe-legend-btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition);
}
.vibe-legend-btn:hover { background: var(--panel-hi); border-color: var(--border-hi); }
.vibe-legend { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.vibe-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all var(--transition);
}
.vibe-row:hover { background: var(--panel-hi); border-color: var(--border-hi); }
.vibe-icon { font-size: 24px; min-width: 32px; text-align: center; }
.vibe-info { flex: 1; line-height: 1.35; }
.vibe-name { font-size: 13px; font-weight: 800; letter-spacing: 0.5px; }
.vibe-feel { font-size: 12px; color: var(--muted); font-family: ui-monospace, monospace; margin-top: 2px; }
.vibe-test-btn {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.vibe-test-btn:hover { background: #1a95ff; }
.vibe-test-btn:active { transform: scale(0.96); }
.vibe-tip {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: #fcd34d;
  line-height: 1.55;
}
.vibe-tip strong { color: #fde68a; }
.vibe-status {
  margin: 6px 0 12px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  min-height: 1em;
  transition: all 200ms ease;
}
.vibe-status:empty { display: none; }
.vibe-status-ok   { color: var(--buy); padding: 8px 14px; background: rgba(48,209,88,0.10); border: 1px solid rgba(48,209,88,0.35); border-radius: 8px; }
.vibe-status-warn { color: var(--warn); padding: 8px 14px; background: rgba(255,159,10,0.10); border: 1px solid rgba(255,159,10,0.35); border-radius: 8px; }
.vibe-status-info { color: var(--accent); padding: 8px 14px; background: rgba(10,132,255,0.10); border: 1px solid rgba(10,132,255,0.35); border-radius: 8px; }
.vibe-test-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.vibe-cheatsheet {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}
.vibe-cheatsheet span {
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--muted);
}
.vibe-cheatsheet span b { color: var(--text); margin-right: 4px; }

/* Weekend banner — shows when forex is closed (Fri 22 UTC – Sun 22 UTC) */
.weekend-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin: 0 0 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
  border: 1px solid rgba(139, 92, 246, 0.30);
  border-radius: var(--radius);
  animation: banner-slide-in 280ms cubic-bezier(0.33, 0, 0, 1);
}
.weekend-banner .wb-icon { font-size: 26px; }
.weekend-banner .wb-text { display: flex; flex-direction: column; gap: 3px; line-height: 1.45; }
.weekend-banner .wb-text strong { color: #c4b5fd; font-size: 14px; }
.weekend-banner .wb-text .muted { font-size: 13px; }

/* SUPER setup — appears when 3+ strategies confirm the same signal */
.super-badge {
  display: inline-block;
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
  color: #1a0a00;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.6px;
  margin: 6px 0;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.55);
  animation: super-pulse 2.4s ease-in-out infinite;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
@keyframes super-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(251, 191, 36, 0.55); }
  50%      { box-shadow: 0 0 24px rgba(251, 191, 36, 0.85); }
}

/* SUPER badge variant on trade rows (My Trades + history) — compact pill */
.trade-super-tag {
  display: inline-block;
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
  color: #1a0a00;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 5px;
  letter-spacing: 0.5px;
  margin-right: 4px;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.45);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}

/* Larger SUPER badge inside the signal/trade modal */
.super-badge.super-badge-modal {
  display: block;
  text-align: center;
  font-size: 13px;
  padding: 8px 14px;
  margin: 10px 0 14px;
  letter-spacing: 0.8px;
}

/* Per-strategy open-signal counter banner on the signals tab */
.strat-counter-banner {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  animation: banner-slide-in 240ms cubic-bezier(0.33, 0, 0, 1);
}
.strat-counter-banner .scb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}
.strat-counter-banner .scb-head strong { font-size: 13px; }
.strat-counter-banner .scb-head .muted { font-size: 12px; }
.scb-pills {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.strat-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  transition: all var(--transition);
}
.strat-counter b {
  font-weight: 800;
  font-size: 14px;
  font-family: ui-monospace, monospace;
}
.strat-counter:hover { transform: translateY(-1px); }

/* Currently-open pair pills under each strategy widget */
.open-pairs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.open-pairs-row .muted { font-size: 12px; margin-right: 4px; }
.open-pair-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(48, 209, 88, 0.10);
  border: 1px solid rgba(48, 209, 88, 0.35);
  color: var(--buy);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all var(--transition);
}
.open-pair-pill:hover {
  background: rgba(48, 209, 88, 0.18);
  transform: translateY(-1px);
}

/* Deep-link toast — appears when notification was tapped but signal expired */
.deep-link-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: 340px;
  padding: 12px 18px;
  background: rgba(255, 159, 10, 0.95);
  color: #1a0a00;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  animation: banner-slide-in 280ms cubic-bezier(0.33, 0, 0, 1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.deep-link-toast strong { color: #2a1500; }

/* Already-tracking toast shown below the take-trade button when blocked */
.take-trade-toast {
  margin-top: 8px;
  padding: 10px 13px;
  background: rgba(255, 159, 10, 0.10);
  border: 1px solid rgba(255, 159, 10, 0.35);
  border-radius: 10px;
  color: #fcd34d;
  font-size: 13px;
  line-height: 1.5;
  animation: banner-slide-in 220ms cubic-bezier(0.33, 0, 0, 1);
}
.take-trade-toast strong { color: #fde68a; }
.take-trade-btn.already-tracking {
  background: rgba(48, 209, 88, 0.15);
  border-color: rgba(48, 209, 88, 0.4);
  color: var(--buy);
}

/* Server-detected badge — shown on signals merged from /api/latest-signals */
.server-badge {
  display: inline-block;
  background: rgba(100, 116, 139, 0.18);
  border: 1px solid rgba(100, 116, 139, 0.45);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 5px;
  letter-spacing: 0.4px;
  margin: 6px 0;
}

/* v242 — Probability-gate badge. Shows brain's pWin and net edge after
   weighing all evidence. Only appears on signals that PASSED the gate —
   blocked signals don't render. Three colors track the edge magnitude:
   ok (8-14pts), good (15-29pts), strong (30pts+). */
.prob-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.2px;
  margin: 6px 0;
  font-variant-numeric: tabular-nums;
}
.prob-badge.pba-ok {
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #c7d2fe;
}
.prob-badge.pba-good {
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.40);
  color: #86efac;
}
.prob-badge.pba-strong {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(16, 185, 129, 0.18));
  border: 1px solid rgba(34, 197, 94, 0.55);
  color: #bbf7d0;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.30);
}

/* v251 — Tap-to-copy. Any <code>-formatted price inside a signal/trade
   context becomes interactive: cursor pointer, hover treatment, brief green
   flash on successful copy. The flash gives instant tactile confirmation
   while the toast (below) gives explicit confirmation. */
.card code,
.modal-content code,
.trade-row code,
.shadow-feed-card code,
.sh-card code,
.rb-row code,
.shadow-modal code {
  cursor: pointer;
  transition: background 120ms cubic-bezier(0.32, 0.72, 0, 1),
              transform 120ms cubic-bezier(0.32, 0.72, 0, 1);
  /* Make tap targets a bit chunkier on mobile so they're easy to hit */
  padding: 2px 7px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;  /* iOS: no callout menu on long-press */
  position: relative;
}
.card code:hover,
.modal-content code:hover,
.trade-row code:hover,
.shadow-feed-card code:hover,
.sh-card code:hover,
.rb-row code:hover,
.shadow-modal code:hover {
  background: rgba(99, 102, 241, 0.18);
  outline: 1px solid rgba(99, 102, 241, 0.35);
}
.card code:active,
.modal-content code:active,
.trade-row code:active,
.shadow-feed-card code:active,
.sh-card code:active,
.rb-row code:active,
.shadow-modal code:active {
  transform: scale(0.94);
}
/* Successful-copy flash — green pulse */
code.copy-flash {
  background: rgba(34, 197, 94, 0.45) !important;
  outline: 1px solid rgba(34, 197, 94, 0.7) !important;
  color: #fff !important;
  animation: copy-flash-anim 600ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes copy-flash-anim {
  0%   { transform: scale(0.94); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
/* Copy confirmation toast — bottom-center, slides up + fades in.
   Single global instance recycled across all copies. */
.copy-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 16px);
  background: rgba(20, 20, 22, 0.95);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms cubic-bezier(0.32, 0.72, 0, 1),
              transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 10000;
}
.copy-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (max-width: 600px) {
  .copy-toast { bottom: 80px; font-size: 13px; padding: 9px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .copy-toast, code.copy-flash, .card code { transition: none !important; animation: none !important; }
}

/* v250 — BRAIN'S TOP PICK. The single highest-ranked signal of the scan
   gets a striking banner across the top of the card + the card itself gets
   a golden border + soft glow + scale-up. Designed to be IMPOSSIBLE to miss.
   The banner has an animated shimmer that sweeps across to draw the eye. */
.card-brain-pick {
  border-color: rgba(251, 191, 36, 0.65) !important;
  box-shadow:
    0 0 24px rgba(251, 191, 36, 0.28),
    0 0 4px rgba(251, 191, 36, 0.45),
    0 1px 3px rgba(0, 0, 0, 0.4) !important;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.04), rgba(168, 85, 247, 0.025)) !important;
  position: relative;
}
.brain-pick-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  margin: -16px -16px 14px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 40%, #a855f7 100%);
  color: #1a1a1a;
  border-radius: 12px 12px 0 0;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.brain-pick-banner::before {
  /* shimmer sweep — keeps the eye moving so the user notices the badge */
  content: '';
  position: absolute;
  top: 0; left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
  animation: bpb-shimmer 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes bpb-shimmer {
  0%   { left: -50%; }
  60%  { left: 110%; }
  100% { left: 110%; }
}
.bpb-glyph {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  z-index: 1;
}
.bpb-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1;
}
.bpb-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #1a1a1a;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
}
.bpb-sub {
  font-size: 12px;
  font-weight: 600;
  color: rgba(26, 26, 26, 0.85);
}
.bpb-why {
  font-size: 11px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.7);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .brain-pick-banner { padding: 11px 12px; margin: -14px -14px 12px; gap: 10px; }
  .bpb-glyph { font-size: 22px; }
  .bpb-title { font-size: 13px; }
  .bpb-sub { font-size: 11px; }
  .bpb-why { font-size: 11px; }
}
/* Reduce motion preference — disable shimmer to avoid distraction */
@media (prefers-reduced-motion: reduce) {
  .brain-pick-banner::before { animation: none; }
}

/* v277 — STOP iOS AUTO-ZOOM ON INPUT FOCUS.
   Mobile Safari zooms in whenever the user taps an input/select/textarea
   that has a computed font-size below 16px. The Apple-compliant fix is to
   ensure every interactive form field is ≥ 16px. We bump them all to 16px
   on touch devices (and keep desktop sizes intact above 700px). Result: no
   more zoom-in jump while typing in the calculator or anywhere else. */
@media (max-width: 700px) {
  input[type="text"],
  input[type="number"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px !important;
    /* keep the visual chunkiness — don't grow padding wildly */
    line-height: 1.2;
  }
}

/* v280 — Smart pair autocomplete. Custom popup beneath the pair input that
   filters as the user types with fuzzy / alias matching. Replaces the
   browser <datalist> which is inconsistent across browsers. */
.lev-pair-combo {
  position: relative;
}
.lev-pair-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 320px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  padding: 4px;
  font-size: 13px;
  -webkit-overflow-scrolling: touch;
}
.lev-pair-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 80ms;
}
.lev-pair-row:hover,
.lev-pair-row-active {
  background: rgba(168, 85, 247, 0.18);
}
.lev-pair-row-cat {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.lev-pair-row-value {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  font-family: ui-monospace, monospace;
  font-size: 14px;
}
.lev-pair-row-label {
  flex: 1;
  color: var(--text-muted);
  font-size: 12px;
}
.lev-pair-row-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
}
.lev-pair-empty {
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
@media (max-width: 600px) {
  .lev-pair-suggestions { max-height: 260px; }
  .lev-pair-row { padding: 9px 10px; gap: 8px; }
  .lev-pair-row-label { font-size: 12px; }
}

/* v276 — Paste-signal helper inside the Leverage Matrix card. Lets the user
   drop entry/SL/TP prices from a signal and the calculator computes the pip
   distances automatically. Custom lot input + apply button styled to match. */
.lev-paste-signal {
  margin: 14px 0;
  padding: 12px 14px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.20);
  border-radius: 10px;
}
.lev-paste-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: -0.005em;
  margin-bottom: 8px;
}
.lev-apply-btn {
  margin-top: 4px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid rgba(168, 85, 247, 0.45);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(99, 102, 241, 0.18));
  color: #ddd6fe;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: background 120ms cubic-bezier(0.32, 0.72, 0, 1), transform 120ms;
}
.lev-apply-btn:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(99, 102, 241, 0.28));
}
.lev-apply-btn:active { transform: scale(0.97); }
@keyframes lev-applied-flash-kf {
  0%   { background: rgba(34, 197, 94, 0.30); }
  100% { background: transparent; }
}
.lev-applied-flash {
  animation: lev-applied-flash-kf 700ms cubic-bezier(0.32, 0.72, 0, 1);
}
.lev-custom-lot-row { /* matches normal calc-row spacing */ }

/* v275 — Leverage Matrix card. Shows every leverage option vs every input
   combo so the user sees the brutal honesty of leverage at a glance. */
.leverage-matrix-card {
  margin-top: 24px;
}
.leverage-matrix-card h2 {
  margin-top: 0;
}
.lev-result { margin-top: 14px; }
.lev-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  -webkit-overflow-scrolling: touch;
}
.lev-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 600px;
  font-variant-numeric: tabular-nums;
}
.lev-table thead {
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--border);
}
.lev-table th, .lev-table td {
  padding: 9px 10px;
  text-align: left;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.lev-table th {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.lev-table tbody tr {
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 120ms;
}
.lev-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.lev-table .muted { font-size: 11px; opacity: 0.65; }
.lev-table .lev-profit { color: #86efac; font-weight: 600; }
.lev-table .lev-loss { color: #fca5a5; font-weight: 600; }
.lev-table tr.lev-row-danger {
  background: linear-gradient(90deg, rgba(251, 146, 60, 0.06), transparent);
}
.lev-table tr.lev-row-blowup {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.10), transparent);
}
.lev-table .lev-danger-cell { color: #fdba74; font-weight: 700; }
.lev-table .lev-blowup { color: #fca5a5; font-weight: 800; }
.lev-notes {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.55;
}
/* v282 — broker info banner shown above the leverage matrix table */
.lev-broker-banner {
  margin-bottom: 10px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.10), rgba(34, 197, 94, 0.02));
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #e7f5ee;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.lev-broker-tag {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(34, 197, 94, 0.25);
  color: #86efac;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  margin-right: 4px;
}
.lev-broker-cap {
  color: #86efac;
  font-size: 14px;
  padding: 0 2px;
}
.lev-custom-cap-wrap { font-size: 13px; }
@media (max-width: 600px) {
  .lev-broker-banner { font-size: 12px; padding: 8px 11px; }
  .lev-broker-cap { font-size: 13px; }
}
@media (max-width: 600px) {
  .lev-table { font-size: 12px; min-width: 540px; }
  .lev-table th, .lev-table td { padding: 7px 8px; }
  .lev-table .muted { font-size: 11px; }
}

/* v271 — BRAIN VERDICT panel. Consolidates everything the brain knows about
   this specific signal into ONE clean readable block. Colour-coded by pWin
   tier so the user can tell at a glance whether to take the trade. */
.brain-verdict {
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.06), rgba(168, 85, 247, 0.03));
  border: 1px solid rgba(99, 102, 241, 0.22);
}
.brain-verdict.bv-strong {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.14), rgba(16, 185, 129, 0.06));
  border-color: rgba(34, 197, 94, 0.45);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.20);
}
.brain-verdict.bv-good {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.10), rgba(99, 102, 241, 0.04));
  border-color: rgba(34, 197, 94, 0.32);
}
.brain-verdict.bv-ok {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.10), rgba(99, 102, 241, 0.04));
  border-color: rgba(251, 191, 36, 0.30);
}
.brain-verdict.bv-marginal {
  background: linear-gradient(180deg, rgba(251, 146, 60, 0.10), rgba(99, 102, 241, 0.04));
  border-color: rgba(251, 146, 60, 0.32);
}
.brain-verdict.bv-weak {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.10), rgba(99, 102, 241, 0.04));
  border-color: rgba(239, 68, 68, 0.32);
}
.bv-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.bv-emoji { font-size: 16px; flex-shrink: 0; }
.bv-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #c4b5fd;
}
.bv-label {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  letter-spacing: 0.04em;
}
.bv-strong .bv-label { background: rgba(34, 197, 94, 0.25); color: #bbf7d0; }
.bv-good .bv-label { background: rgba(34, 197, 94, 0.18); color: #86efac; }
.bv-ok .bv-label { background: rgba(251, 191, 36, 0.20); color: #fcd34d; }
.bv-marginal .bv-label { background: rgba(251, 146, 60, 0.20); color: #fdba74; }
.bv-weak .bv-label { background: rgba(239, 68, 68, 0.22); color: #fca5a5; }
.bv-pwin {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #e5e7eb;
}
.bv-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bv-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}
.bv-icon { flex-shrink: 0; width: 16px; }
.bv-text { flex: 1; font-variant-numeric: tabular-nums; }
.bv-text b { color: #fff; font-weight: 700; }

@media (max-width: 600px) {
  .brain-verdict { padding: 10px 12px; }
  .bv-head { gap: 6px; }
  .bv-title { font-size: 11px; }
  .bv-label { font-size: 11px; padding: 2px 6px; }
  .bv-pwin { font-size: 12px; }
  .bv-row { font-size: 12px; gap: 6px; }
}

/* v267 — Chart study badge. Shown when the brain examined the actual OHLC
   chart structure before allowing the signal. Three colour tiers track score. */
.chart-study-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 5px;
  letter-spacing: 0.02em;
  margin: 4px 0;
  font-variant-numeric: tabular-nums;
}
.chart-study-badge.csb-ok {
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #c7d2fe;
}
.chart-study-badge.csb-good {
  background: rgba(34, 197, 94, 0.13);
  border: 1px solid rgba(34, 197, 94, 0.38);
  color: #86efac;
}
.chart-study-badge.csb-strong {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(16, 185, 129, 0.16));
  border: 1px solid rgba(34, 197, 94, 0.55);
  color: #bbf7d0;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.25);
}

/* v243 — Quantum Monte Carlo simulation display. Three-row card showing
   simulation header, per-level probabilities, and best mini-trade strategy.
   Distinct cyan/purple palette to mark it as a forward-looking computation
   (vs the green/red of historical backtest data). */
.quantum-sim {
  margin: 8px 0;
  padding: 9px 11px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.08), rgba(168, 85, 247, 0.05));
  border: 1px solid rgba(168, 85, 247, 0.25);
  font-size: 12px;
}
.quantum-sim.qsim-strong { border-color: rgba(34, 197, 94, 0.55); background: linear-gradient(180deg, rgba(34, 197, 94, 0.12), rgba(16, 185, 129, 0.06)); box-shadow: 0 0 12px rgba(34, 197, 94, 0.25); }
.quantum-sim.qsim-good   { border-color: rgba(34, 197, 94, 0.40); }
.quantum-sim.qsim-ok     { border-color: rgba(99, 102, 241, 0.35); }
.quantum-sim.qsim-poor   { border-color: rgba(239, 68, 68, 0.40); background: linear-gradient(180deg, rgba(239, 68, 68, 0.10), rgba(239, 68, 68, 0.04)); }
.qsim-head {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: #c4b5fd;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.qsim-probs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.qsim-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.qsim-pill.qsim-tp { color: #86efac; border-color: rgba(34, 197, 94, 0.32); }
.qsim-pill.qsim-sl { color: #fca5a5; border-color: rgba(239, 68, 68, 0.35); }
.qsim-pill b { font-weight: 700; font-size: 12px; }
.qsim-best {
  font-size: 12px;
  color: #e5e7eb;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.qsim-best strong { color: #fff; }
.qsim-split {
  display: block;
  margin-top: 2px;
  color: #94a3b8;
  font-size: 11px;
}

/* v238 — BIG RUN badge for high-pips-potential setups. Bold gradient to
   stand out from regular setup tags — these are the signals worth holding
   for the full TP3 instead of scalping out at TP1. */
.big-run-badge {
  display: inline-block;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 11px;
  border-radius: 6px;
  letter-spacing: 0.3px;
  margin: 6px 0;
  border: 1px solid rgba(168, 85, 247, 0.6);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Volatility regime warning */
.vol-warning {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 5px;
  letter-spacing: 0.4px;
  margin: 6px 0;
}
.vol-extreme {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #f87171;
}
.vol-dead {
  background: rgba(100, 116, 139, 0.15);
  border: 1px solid rgba(100, 116, 139, 0.45);
  color: #94a3b8;
}

/* Quality breakdown shown inside the modal tag */
.grade-breakdown {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  opacity: 0.9;
  line-height: 1.45;
  text-transform: none;
}

/* Grade breakdown row in the strategy tracking summary */
.grade-breakdown-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.grade-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 12px;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.3px;
}
.grade-stat b { font-weight: 800; }
.grade-stat-aplus { background: rgba(48, 209, 88, 0.12); border-color: rgba(48, 209, 88, 0.40); color: #5fd5ff; }
.grade-stat-aplus b { color: #30d158; }
.grade-stat-a     { background: rgba(48, 209, 88, 0.08); border-color: rgba(48, 209, 88, 0.28); }
.grade-stat-bplus { background: rgba(10, 132, 255, 0.08); border-color: rgba(10, 132, 255, 0.28); }

/* ════════════════════════════════════════════════════════════════════════
   FLUID POLISH PASS — global smoothness, motion, focus states.
   Loaded last so it overrides earlier rules where needed.
   ════════════════════════════════════════════════════════════════════════ */

/* 1. Universal smooth transitions on every interactive element */
button, .card, .tab, .trade-row, input, select, textarea, a {
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition),
    transform var(--transition),
    box-shadow var(--transition),
    opacity var(--transition);
  -webkit-tap-highlight-color: transparent;
}

/* 2. Press feedback on every clickable: prevents the "dead click" feel */
button:not(:disabled):active,
.card:active,
.tab:active {
  transform: scale(0.98);
}

/* 3. Visible-but-clean focus ring (better than browser default outlines) */
button:focus-visible,
.tab:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.55);
  border-color: var(--accent);
}

/* 4. Smooth fade-in when a tab becomes active */
@keyframes tab-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* v235b — REMOVED. Was 220ms fade-in that delayed content from appearing
   on every tab switch — felt like lag. Tabs should switch instantly like
   native iOS. There's a second copy of this rule further down the file
   that's also been shortened. */
/* .tab-content.active animation removed for instant feel */

/* 5. Smooth signal-card entry */
@keyframes card-pop-in {
  from { opacity: 0; transform: translateY(6px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.grid > .card {
  animation: card-pop-in 260ms cubic-bezier(0.33, 0, 0, 1) both;
}

/* 6. Custom scrollbars that match the dark theme (Webkit) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background var(--transition);
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.20); background-clip: padding-box; }

/* 7. Disabled state should feel obviously inert, not broken */
button:disabled,
input:disabled,
select:disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
  transform: none !important;
}

/* 8. Banner/notification entry animation */
@keyframes banner-slide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.discipline-banner,
.correlation-banner,
.smc-summary,
.orb-summary,
.cal-warning,
.sync-box {
  animation: banner-slide-in 240ms cubic-bezier(0.33, 0, 0, 1);
}

/* 9. Ensure text-rendering is crisp on all platforms */
body {
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

/* 10. Modal opens with a soft scale-in */
@keyframes modal-pop {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
#modal:not(.hidden) .modal-inner,
#modal:not(.hidden) .modal-content,
#modal:not(.hidden) .modal-card {
  animation: modal-pop 220ms cubic-bezier(0.33, 0, 0, 1);
}

/* 11. Image / icon loading shouldn't shift layout */
img { max-width: 100%; height: auto; }

/* 12. Hide the equity curve element if it ever sneaks back in */
.equity-wrap, .equity-curve, .equity-head { display: none !important; }

/* 13. Smooth hover on perf cards */
.perf-card {
  position: relative;
  overflow: hidden;
}
.perf-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-hi);
}

/* 14. Prevent layout jitter when buttons swap content (e.g. "Take this trade" → "Already tracking") */
.take-trade-btn { min-width: 160px; }

/* 15. Reduced-motion override — respect users who turned it off */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* 16. Mobile — give cards a touch more breathing room and stop transforms feeling janky */
@media (max-width: 600px) {
  .card { padding: 16px; }
  .card:hover { transform: none; }
  .tab-content { padding: 14px; }
  .controls { gap: 8px; }
  .topbar { padding: 12px 14px; }
}

/* Update banner — appears when a new SW is downloaded but waiting */
#update-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(10,132,255,0.95), rgba(48,209,88,0.95));
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  font-size: 14px;
  font-weight: 600;
  animation: banner-slide-in 280ms cubic-bezier(0.33, 0, 0, 1);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  max-width: 480px;
  margin: 0 auto;
}
#update-banner span { flex: 1; }
#update-banner button {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
#update-banner button:hover { background: rgba(255,255,255,0.3); }
#update-banner #update-banner-btn { background: #fff; color: var(--accent); }
#update-banner #update-banner-btn:hover { background: rgba(255,255,255,0.92); }
#update-banner #update-banner-dismiss {
  padding: 4px 10px;
  font-size: 16px;
  font-weight: 400;
  opacity: 0.85;
}

/* 17. Refresh button — hold-to-hard-refresh visual feedback */
#refresh-btn {
  position: relative;
  overflow: hidden;
}
#refresh-btn::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(10,132,255,0.55), rgba(48,209,88,0.55));
  pointer-events: none;
  transition: width 0ms linear;
  z-index: 0;
}
#refresh-btn.refresh-holding::after {
  width: 100%;
  transition: width 900ms cubic-bezier(0.4, 0, 0.2, 1);
}
#refresh-btn.refresh-armed {
  background: rgba(48, 209, 88, 0.20) !important;
  border-color: var(--buy) !important;
  color: var(--buy) !important;
}
#refresh-btn > * { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════════════════
   APPLE-STYLE PREMIUM POLISH LAYER (loaded last)
   Refined typography, layered shadows, gradient accents, glass surfaces,
   smoother motion. Does not change behavior — only how the app FEELS.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --apple-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --apple-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --apple-shadow-1: 0 1px 2px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.25);
  --apple-shadow-2: 0 4px 12px rgba(0,0,0,0.20), 0 12px 32px rgba(0,0,0,0.35);
  --apple-glow-blue:  0 0 32px rgba(10,132,255,0.18);
  --apple-glow-green: 0 0 32px rgba(48,209,88,0.18);
  --apple-glass: rgba(20,21,25,0.65);
}

/* Typography refinement */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'tnum' 1, 'ss01' 1;
}
h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #d6e0ed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.15;
}
h2 { font-weight: 700; letter-spacing: -0.015em; }
h3 { font-weight: 600; letter-spacing: -0.01em; }

/* Premium top bar — glass + gradient bottom border */
.topbar {
  background: linear-gradient(180deg, rgba(15,16,20,0.92), rgba(10,10,12,0.78));
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border-bottom: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.10) 30%,
    rgba(10,132,255,0.40) 50%,
    rgba(255,255,255,0.10) 70%,
    transparent 100%);
  pointer-events: none;
}

/* Brand logo — animated subtle glow */
.brand .logo {
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(10,132,255,0.08), rgba(48,209,88,0.08));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: var(--apple-shadow-1), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 380ms var(--apple-spring);
}
.brand .logo:hover {
  transform: scale(1.04) rotate(-2deg);
  box-shadow: var(--apple-shadow-1), var(--apple-glow-blue), inset 0 1px 0 rgba(255,255,255,0.08);
}
.brand .logo svg { display: block; }

.brand-text h1 {
  font-size: 21px;
  margin: 0;
  line-height: 1.15;
}
.brand-text .tag {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 2px;
  display: block;
}

/* Premium buttons (controls) */
.controls button,
.sync-actions button,
.trade-actions button {
  background: linear-gradient(180deg, rgba(38,39,45,0.95), rgba(28,29,34,0.95));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--apple-shadow-1), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: all 220ms var(--apple-ease);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.controls button:hover,
.sync-actions button:hover {
  background: linear-gradient(180deg, rgba(48,49,55,0.95), rgba(38,39,45,0.95));
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
  box-shadow: var(--apple-shadow-1), inset 0 1px 0 rgba(255,255,255,0.10);
}
.controls button:active { transform: translateY(0) scale(0.985); }

/* Accent button (Best only, Sync set, etc.) */
.controls .notify-btn.active,
#sync-set,
#best-only-btn.active {
  background: linear-gradient(180deg, #0a84ff 0%, #0064d6 100%);
  border-color: #0a84ff;
  color: #fff;
  box-shadow: var(--apple-shadow-1), 0 0 0 1px rgba(10,132,255,0.30), inset 0 1px 0 rgba(255,255,255,0.20);
}
.controls .notify-btn.active:hover,
#sync-set:hover {
  background: linear-gradient(180deg, #1a95ff 0%, #0a78e8 100%);
  transform: translateY(-1px);
  box-shadow: var(--apple-shadow-1), var(--apple-glow-blue), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Signal cards — refined Apple-style */
.card {
  background: linear-gradient(180deg, rgba(28,29,34,0.95) 0%, rgba(21,22,26,0.95) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  box-shadow: var(--apple-shadow-1), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform 280ms var(--apple-ease),
              border-color 280ms var(--apple-ease),
              box-shadow 280ms var(--apple-ease);
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.14);
  box-shadow: var(--apple-shadow-2), inset 0 1px 0 rgba(255,255,255,0.06);
}
.card-best { box-shadow: var(--apple-shadow-1), var(--apple-glow-blue), inset 0 1px 0 rgba(255,255,255,0.06); }
.card-pro  { box-shadow: var(--apple-shadow-1), 0 0 32px rgba(255,214,10,0.18), inset 0 1px 0 rgba(255,255,255,0.06); }
.card-extreme { box-shadow: var(--apple-shadow-1), 0 0 32px rgba(255,69,58,0.22), inset 0 1px 0 rgba(255,255,255,0.06); }

/* Pair name + price refined */
.card .pair {
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 17px;
}
.dir-price {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Direction badges — Apple style */
.direction-badge {
  font-weight: 700;
  letter-spacing: 0.12em;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  border-width: 1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

/* Tabs — refined glass */
.tabs {
  background: rgba(10,10,12,0.72);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tab {
  letter-spacing: -0.005em;
  border-radius: 10px;
  transition: all 220ms var(--apple-ease);
}
.tab.active {
  background: linear-gradient(180deg, rgba(60,61,68,0.6), rgba(45,46,52,0.6));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 4px rgba(0,0,0,0.20);
}

/* Confluence bar — smooth fill animation */
.conf-bar {
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.30);
}
.conf-bar span {
  transition: width 700ms var(--apple-spring);
  background: linear-gradient(90deg, currentColor 0%, currentColor 100%);
  box-shadow: 0 0 12px currentColor;
}

/* Modal — refined glass */
#modal:not(.hidden) {
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
#modal .modal-inner,
#modal .modal-content,
#modal-body {
  background: linear-gradient(180deg, rgba(30,31,36,0.96), rgba(22,23,27,0.96));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow: var(--apple-shadow-2), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Levels code blocks — monospace tabular */
.levels .val, code {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
code {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 1px 7px;
  border-radius: 5px;
}

/* Strategy tags — slightly elevated */
.smc-tag, .orb-tag, .strat-tag {
  box-shadow: 0 1px 4px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.08);
}
.grade-pill {
  font-feature-settings: 'tnum' 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

/* Perf cards (Trades tab) */
.perf-card {
  background: linear-gradient(180deg, rgba(28,29,34,0.95) 0%, rgba(21,22,26,0.95) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  box-shadow: var(--apple-shadow-1), inset 0 1px 0 rgba(255,255,255,0.04);
}
.perf-card .big {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Custom scrollbar — slim Apple style */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.20); background-clip: padding-box; }

/* Smooth focus ring */
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10,132,255,0.35);
  border-color: var(--accent);
}

/* Mobile spacing refinement */
@media (max-width: 600px) {
  .brand .logo { width: 38px; height: 38px; }
  .brand .logo svg { width: 32px; height: 32px; }
  .brand-text h1 { font-size: 18px; }
  .brand-text .tag { font-size: 11px; }
  .topbar { padding: 12px 14px; gap: 10px; }
}

/* ════════════════════════════════════════════════════════════════════════
   CURRENCY STRENGTH INDEX — at-a-glance ranking of the 8 majors
   ════════════════════════════════════════════════════════════════════════ */
.currency-strength {
  margin-bottom: 14px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(28,29,34,0.95) 0%, rgba(21,22,26,0.95) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  box-shadow: var(--apple-shadow-1), inset 0 1px 0 rgba(255,255,255,0.04);
  animation: banner-slide-in 240ms var(--apple-ease);
}
.cs-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 6px;
}
.cs-head strong { font-size: 14px; letter-spacing: -0.005em; }
.cs-head .muted { font-size: 12px; }
.cs-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cs-row {
  display: grid;
  grid-template-columns: 28px 40px 1fr 44px;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}
.cs-flag { font-size: 14px; line-height: 1; }
.cs-code {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--text);
}
.cs-bar-wrap {
  height: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.30);
}
.cs-bar {
  position: absolute;
  top: 0; bottom: 0;
  height: 100%;
  border-radius: 4px;
  transition: width 600ms var(--apple-spring);
  box-shadow: 0 0 8px currentColor;
}
.cs-bar-right { left: 50%; }
.cs-bar-left  { right: 50%; }
.cs-bar-wrap::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.08);
}
.cs-pct {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

/* Legacy/safety source badges for trades */
.trade-conf-tag {
  background: rgba(100, 116, 139, 0.18);
  border: 1px solid rgba(100, 116, 139, 0.45);
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.6px;
}
.trade-unknown-tag {
  background: rgba(255, 159, 10, 0.16);
  border: 1px solid rgba(255, 159, 10, 0.45);
  color: #fde68a;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.6px;
}

/* IG broker step-by-step block in the trade modal */
.broker-block {
  background: linear-gradient(180deg, rgba(20,40,80,0.30), rgba(15,30,60,0.20));
  border: 1px solid rgba(10,132,255,0.30);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.broker-block strong { color: #5fd5ff; font-size: 14px; }
.broker-block code {
  background: rgba(10,132,255,0.18);
  border: 1px solid rgba(10,132,255,0.30);
  color: #87cefa;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.broker-note {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
}
.broker-other summary { padding: 6px 0; transition: color var(--apple-ease); }
.broker-other summary:hover { color: var(--accent); }
.broker-other[open] summary { color: var(--accent); }

/* TP-progress pills inside trade rows — shows which TP levels price has touched. */
.tp-progress {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-left: 4px;
}
.tp-pip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--muted);
}
.tp-pip.tp-pip-hit {
  background: rgba(48,209,88,0.18);
  border-color: rgba(48,209,88,0.45);
  color: var(--buy);
}

/* "How far wins ran" breakdown — shows TP1/TP2/TP3 split for closed wins. */
.tp-breakdown {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 12px 0;
}
.tpbd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.tpbd-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tpbd-row {
  display: grid;
  grid-template-columns: 110px 1fr 70px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.tpbd-lbl { color: var(--muted); font-weight: 600; }
.tpbd-val { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; text-align: right; color: var(--text); }
.tpbd-bar {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.tpbd-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.tpbd-fill.tpbd-tp3 { background: linear-gradient(90deg, #30d158, #34d399); }
.tpbd-fill.tpbd-tp2 { background: linear-gradient(90deg, #0a84ff, #38bdf8); }
.tpbd-fill.tpbd-tp1 { background: linear-gradient(90deg, #fbbf24, #f59e0b); }

/* History tab — summary cards + filter chips */
.history-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
/* v445 — the ledger row beneath the summary cards. Net R, expectancy and
   drawdown live here: the numbers a win rate on its own cannot tell you. */
.history-ledger {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  contain: layout;
}
.hl-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-bottom: 8px;
}
.hl-k {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hl-k + .hl-v { margin-right: 6px; }
.hl-v {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hl-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
}
.hl-note strong { font-variant-numeric: tabular-nums; }
.hl-note-dim {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--muted);
}
/* R-multiple tag on each closed trade row. */
.trade-r-tag {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.hs-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hs-num {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.hs-lbl {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}
.history-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.hf-chip {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.hf-chip:hover { color: var(--text); border-color: var(--accent); }
.hf-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Day Trader filter button — yellow theme to distinguish from Best (gold) and Extreme (red). */
#best-only-btn.daytrader {
  background: linear-gradient(135deg, #facc15, #f59e0b);
  color: #1a1a1a;
  border-color: rgba(250, 204, 21, 0.6);
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.4);
}
#best-only-btn.daytrader:hover {
  background: linear-gradient(135deg, #fde047, #facc15);
}

/* v238 — BIG PIPS mode button. Purple→pink gradient matches the .big-run-badge
   so users connect the filter mode with the badge that fires when a signal qualifies. */
#best-only-btn.bigpips {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #fff;
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
#best-only-btn.bigpips:hover {
  background: linear-gradient(135deg, #c084fc, #f472b6);
}

/* v254 — None mode button. Slate-cyan to signal "filter to feed only" —
   distinct from the other modes (yellow daytrader, purple bigpips, etc). */
#best-only-btn.none-mode {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  color: #fff;
  border-color: rgba(6, 182, 212, 0.65);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
#best-only-btn.none-mode:hover {
  background: linear-gradient(135deg, #22d3ee, #06b6d4);
}

/* Expected hold-time badge on signal cards. */
.hold-time {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 7px 10px;
  margin: 8px 0;
  border-radius: 8px;
  font-size: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.hold-time.ht-fast {
  background: rgba(48, 209, 88, 0.10);
  border-color: rgba(48, 209, 88, 0.30);
  color: var(--buy);
}
.hold-time.ht-medium {
  background: rgba(10, 132, 255, 0.10);
  border-color: rgba(10, 132, 255, 0.30);
  color: var(--accent);
}
.hold-time.ht-slow {
  background: rgba(135, 135, 145, 0.10);
  border-color: rgba(135, 135, 145, 0.30);
  color: var(--muted);
}
.ht-tag {
  font-weight: 700;
  letter-spacing: 0.4px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.10);
}
.dt-badge {
  margin-left: auto;
  background: rgba(250, 204, 21, 0.18);
  color: #facc15;
  border: 1px solid rgba(250, 204, 21, 0.5);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.5px;
}

/* Loss-risk warning badge on open trades that match historical loss patterns. */
.trade-risk-tag {
  background: rgba(255, 159, 10, 0.18);
  color: #ff9f0a;
  border: 1px solid rgba(255, 159, 10, 0.45);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SMOOTHNESS / RESPONSIVENESS LAYER
   Applied site-wide so every interaction feels polished and snappy.
   ═══════════════════════════════════════════════════════════════════════ */

/* Global smooth scrolling — applies to anchor links AND programmatic scrolling */
html { scroll-behavior: smooth; }

/* Safari/iOS momentum scroll on scrollable containers */
body, .tab-content, #signals-grid, #trades-view, #history-view, #strategies-view {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* stops scroll chaining to parent on overscroll */
}

/* Universal smooth transitions — anything that changes color/background/transform
   animates rather than snaps. Kept very short (180ms) so it feels responsive,
   not laggy. */
* {
  -webkit-tap-highlight-color: transparent; /* remove iOS gray tap flash */
}
button, .tab, .card, .trade-row, .hs-card, .perf-card, .signal-card,
.open-pair-pill, .hf-chip, .strat-tag, .tp-pip, .trade-radiant-tag,
.trade-smc-tag, .trade-orb-tag, .trade-strat-tag, .smc-summary,
.orb-summary, .strat-summary, .history-summary, .conf-bar span,
input, textarea, select, .vibe-row {
  transition:
    transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
    color 180ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 180ms ease-out;
}

/* TAP feedback — every tappable element gets a subtle press state.
   Adds a 96% scale on :active so user feels the press. */
button:active, .tab:active, .card:active, .trade-row:active,
.hf-chip:active, .open-pair-pill:active, .hs-card:active {
  transform: scale(0.97);
  transition-duration: 80ms; /* faster on press, snappy release */
}

/* Hover lift — desktop only. Cards and rows nudge up 1px on hover with shadow. */
@media (hover: hover) and (pointer: fine) {
  .card:hover, .trade-row:hover, .hs-card:hover, .perf-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  }
  .open-pair-pill:hover, .hf-chip:hover {
    transform: translateY(-1px);
  }
}

/* Tab content fade-in — when switching tabs, the new content fades up smoothly
   instead of snapping in. Tab containers use CSS containment for fast paints. */
.tab-content {
  contain: layout style;
}
/* v235b — Removed entirely. Tab switches must feel INSTANT, matching native
   iOS tab bars where content swaps without any fade. Even 80ms felt like
   a perceptible delay. The element just appears at full opacity. */

/* Signal cards entering the grid get a stagger-fade so it doesn't feel jarring
   when many appear at once. Pure CSS — no JS overhead. */
/* v428c — fill-mode was `backwards`, which holds the 0% keyframe
   (opacity: 0) whenever the animation has not yet finished. The signal
   grid re-renders on every poll, restarting the animation each time, so
   cards could sit at opacity 0 indefinitely — the grid looked completely
   empty even though 9 fully-populated cards were in the DOM. `both` keeps
   the 100% keyframe (opacity: 1) after the run completes, so a card can
   never be left invisible. A JS watchdog in app.js covers the pathological
   case where re-renders outpace the 280ms animation entirely. */
#signals-grid .card {
  animation: cardEnter 280ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
#signals-grid .card:nth-child(2)  { animation-delay: 30ms; }
#signals-grid .card:nth-child(3)  { animation-delay: 60ms; }
#signals-grid .card:nth-child(4)  { animation-delay: 90ms; }
#signals-grid .card:nth-child(5)  { animation-delay: 120ms; }
#signals-grid .card:nth-child(6)  { animation-delay: 150ms; }
#signals-grid .card:nth-child(7)  { animation-delay: 180ms; }
#signals-grid .card:nth-child(8)  { animation-delay: 210ms; }
#signals-grid .card:nth-child(n+9) { animation-delay: 240ms; }
/* v428c — entrance animates TRANSFORM ONLY, never opacity.
   Animating opacity from 0 meant that any stalled or perpetually-restarted
   run left the card fully invisible while its content sat in the DOM —
   the signal grid rendered 9 complete cards the user could not see. A
   slide-only entrance is visually near-identical but structurally cannot
   hide content, no matter how the animation is interrupted. */
@keyframes cardEnter {
  from { transform: translateY(8px); }
  to   { transform: translateY(0); }
}

/* v235b — REMOVED per-row entry animation. Was 240ms fade-in per .trade-row.
   When History has 50+ closed trades, ALL rows animated simultaneously =
   visible "stagger" lag every time the tab opens. Trade rows aren't actually
   "entering" — they're just being rendered. Instant render = native feel. */

/* Confidence bar grows smoothly when set, instead of jumping */
.conf-bar span {
  transition: width 600ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* Modals fade-in (signal modal especially) */
.modal-backdrop, .modal {
  animation: modalIn 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Inputs/buttons get a focus ring that animates in */
button:focus-visible, .tab:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: inherit;
}

/* Honor user "reduce motion" setting — accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* v235b — REMOVED will-change pinning on .trade-row + .tab-content.active.
   The fix below was supposed to reset will-change after animation, but with
   50+ trade rows ALL kept hinting "transform, opacity" until hover, each
   row pinned a GPU composite layer. That's the actual stutter source —
   the browser was juggling dozens of unneeded layers. Modals still get
   the hint since they pop in once. */
.modal {
  will-change: transform, opacity;
}

/* ════════════════════════════════════════════════════════════════════════
   FORWARD WIN RATE PANEL — sits above the perf-grid in My Trades. Makes
   the post-v140-filter win rate prominent so the user can SEE the
   improvement without it being dragged down by 200+ legacy trades.
   ════════════════════════════════════════════════════════════════════════ */
.forward-wr-panel {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(59, 130, 246, 0.06) 50%, rgba(34, 197, 94, 0.04) 100%);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-left: 4px solid var(--buy);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 14px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.forward-wr-panel::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.fwr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.fwr-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--buy);
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.4);
  padding: 4px 10px;
  border-radius: 999px;
}
.fwr-body {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.fwr-big {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.5px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  font-variant-numeric: tabular-nums;
}
.fwr-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.fwr-line { line-height: 1.4; }
.fwr-line strong { font-weight: 700; }
.fwr-note {
  margin-top: 10px;
  font-size: 12px;
  font-style: italic;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}

/* Compact on narrow screens */
@media (max-width: 480px) {
  .forward-wr-panel { padding: 14px 14px; }
  .fwr-big { font-size: 44px; }
  .fwr-body { gap: 14px; }
  .fwr-meta { font-size: 12px; }
}

/* v197 — Pro Analyst Consensus card. Displays aggregated multi-source
   sentiment from DailyFX/FXStreet/Investing/ForexLive/Reuters. */
.pro-consensus-card {
  background: linear-gradient(135deg, rgba(34,197,94,0.05), rgba(59,130,246,0.05));
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.pc-header {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text); display: flex; gap: 8px; align-items: baseline;
}
.pc-header .muted { font-size: 12px; font-weight: 500; opacity: 0.7; }
.pc-empty { font-size: 13px; color: var(--text-muted); padding: 6px 0; }
.pc-item {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 11px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.pc-item.pc-buy { border-left: 3px solid #22c55e; }
.pc-item.pc-sell { border-left: 3px solid #ef4444; }
.pc-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.pc-pair { font-weight: 700; font-size: 15px; }
.pc-dir {
  padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
}
.pc-dir-buy { background: #22c55e; color: #052e16; }
.pc-dir-sell { background: #ef4444; color: #450a0a; }
.pc-count {
  font-size: 12px; padding: 2px 8px; border-radius: 6px;
  background: rgba(255,255,255,0.08); color: var(--text);
}
.pc-sources { font-size: 11px; color: var(--text-muted); }
.pc-details { font-size: 12px; }
.pc-details summary { cursor: pointer; padding: 4px 0; }
.pc-sample {
  padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.04);
  font-size: 12px; line-height: 1.45;
}
.pc-sample strong { color: var(--accent); }
.pc-footnote {
  font-size: 11px; line-height: 1.5; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* v198 — Dedicated Calculator tab styling */
.calc-standalone {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 22px 22px;
  display: flex; flex-direction: column; gap: 16px;
  max-width: 760px;
}
.calc-standalone .calc-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 600px) {
  .calc-standalone .calc-row { grid-template-columns: 1fr; }
}
.calc-standalone label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 13px; color: var(--text-muted);
}
.calc-standalone input, .calc-standalone select {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.4);
  color: var(--text);
  font-size: 15px; font-weight: 600;
}
.calc-standalone input:focus, .calc-standalone select:focus {
  outline: none; border-color: var(--accent);
}
.calc-go {
  padding: 12px 20px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #052e16; font-weight: 700; font-size: 14px;
  border: none; border-radius: 8px; cursor: pointer;
  letter-spacing: 0.02em;
}
.calc-go:hover { filter: brightness(1.08); }
.calc-result {
  background: rgba(0,0,0,0.3);
  border-radius: 10px; padding: 16px;
}
.calc-result:empty { padding: 0; }
.calc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.calc-cell {
  background: rgba(255,255,255,0.03);
  border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.calc-lbl { font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.calc-val { font-size: 20px; font-weight: 700; color: var(--text); }
.calc-sub { font-size: 11px; color: var(--text-muted); }
.calc-summary {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; color: var(--text);
}
.calc-error {
  color: #ef4444; padding: 10px; font-size: 13px;
}

/* v209 — "More ▾" dropdown. Menu is now a SIBLING of .tabs (not inside it)
   because .tabs has backdrop-filter which creates a containing block for
   position:fixed. Menu lives at body level so its fixed position works
   correctly against the viewport. */
.tab-more-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* position is set inline by _positionMoreMenu() at click time */
  background: #14171c;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 6px;
  min-width: 200px;
  z-index: 1000;
  box-shadow: 0 12px 36px rgba(0,0,0,0.55);
}
.tab-more-menu[hidden] { display: none; }
.tab-more-menu .tab {
  display: block; width: 100%; text-align: left;
  padding: 10px 14px; border-radius: 6px; margin: 0;
  color: var(--text);
  font-size: 13px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.tab-more-menu .tab:hover { background: rgba(255,255,255,0.08); }
.tab-more-menu .tab.active { background: var(--panel-hi); color: var(--text); }

/* v200 — Calculator: detected-pair confirmation line */
.calc-pair-detected {
  font-size: 13px;
  color: var(--text-muted);
  padding: 8px 10px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  border-left: 3px solid var(--accent, #22c55e);
}
.calc-pair-detected b { color: var(--text); letter-spacing: 0.02em; }
.calc-pair-detected .muted { font-size: 11px; opacity: 0.6; }

/* v201 — UX cleanup */
.disclaimer-compact {
  margin: 8px 0 12px;
  padding: 6px 12px;
  background: rgba(245,158,11,0.08);
  border-left: 3px solid rgba(245,158,11,0.4);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.disclaimer-compact summary {
  cursor: pointer; padding: 2px 0;
  list-style: none; font-weight: 600;
  color: rgba(245,158,11,0.9);
}
.disclaimer-compact summary::-webkit-details-marker { display: none; }
.disclaimer-compact[open] summary { margin-bottom: 6px; }
.disclaimer-compact:not([open]) { padding: 6px 12px; }

.weekend-banner-compact {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 12px;
  margin-bottom: 14px;
  background: rgba(99,102,241,0.08);
  border-radius: 8px;
  border-left: 3px solid rgba(99,102,241,0.5);
}
.weekend-banner-compact .wb-dot {
  color: rgba(99,102,241,0.9);
  margin-right: 6px;
}

/* Radiant tracker compact */
.radiant-status {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.radiant-status .rs-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px;
}
.radiant-status .rs-head strong { color: var(--text); font-weight: 600; }
.radiant-status .rs-count {
  font-size: 11px; padding: 2px 8px; border-radius: 5px;
  background: rgba(255,255,255,0.07); color: var(--text-muted);
}
.radiant-status .rs-progress {
  height: 4px; background: rgba(255,255,255,0.06);
  border-radius: 2px; overflow: hidden;
}
.radiant-status .rs-progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #22c55e, #fbbf24);
  transition: width 0.4s ease;
}
.radiant-status .rs-blocking {
  font-size: 11px; color: var(--text-muted);
}

/* v202 — Clean top bar */
.topbar-clean {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.18);
  position: sticky; top: 0; z-index: 50;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.brand-clean {
  display: flex; align-items: center; gap: 10px;
}
.brand-clean .brand-title {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em; margin: 0;
  color: var(--text);
}
.market-pill {
  font-size: 11px; padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.market-pill-peak {
  background: rgba(239,68,68,0.15); color: #fca5a5;
}
.market-pill-active {
  background: rgba(34,197,94,0.15); color: #86efac;
}
.market-pill-off {
  background: rgba(99,102,241,0.10); color: #a5b4fc;
}
.controls-compact {
  display: flex; gap: 8px;
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.icon-btn:hover {
  background: rgba(255,255,255,0.1);
}
.icon-btn:active {
  transform: scale(0.95);
}

/* Settings panel (toggled by ⚙) */
.settings-panel {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding: 12px 18px;
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
}
.settings-panel[hidden] { display: none !important; }
.settings-panel .ctrl {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-muted);
}
.settings-panel .ctrl input[type=range] {
  width: 130px;
}
.settings-panel .best-btn,
.settings-panel .vibe-legend-btn {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.settings-panel .best-btn:hover,
.settings-panel .vibe-legend-btn:hover { background: rgba(255,255,255,0.1); }
.settings-panel .ctrl.inline { font-size: 12px; }

/* v206 — Calculator risk-mode toggle (% / $) */
.calc-toggle {
  display: inline-flex;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.calc-toggle-btn {
  padding: 7px 14px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s ease;
}
.calc-toggle-btn:hover { color: var(--text); }
.calc-toggle-btn.active {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #052e16;
  font-weight: 700;
}

/* ========================================================================
   v211 — MOBILE POLISH + SMOOTH INTERACTIONS
   ======================================================================== */

/* Smooth scrolling + iOS rubber-band fix */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Better tap-feedback transitions on ALL interactive elements */
button, .tab, .card, .calc-toggle-btn, .signal-card, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.12s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.25s ease,
    color 0.15s ease;
}
button:active:not(:disabled),
.tab:active,
.card:active,
.signal-card:active {
  transform: scale(0.97);
}

/* Smoother focus rings (keyboard accessibility) */
button:focus-visible,
.tab:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(48, 209, 88, 0.65);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ─── Tablet (≤900px) — slightly tighter ─── */
@media (max-width: 900px) {
  .topbar { padding: 10px 14px; gap: 10px; }
  .brand .tag { font-size: 11px; }
  .market-bar { padding: 8px 14px; font-size: 12px; gap: 10px; }
  .tabs { padding: 6px 12px; gap: 2px; }
  .tab { padding: 9px 12px; font-size: 13px; }
  .tab-content { padding: 14px; }
  .controls { gap: 8px; }
  .controls button { padding: 7px 12px; font-size: 12px; }
}

/* ─── Mobile (≤600px) — compact layout for phones ─── */
@media (max-width: 600px) {
  /* Topbar: stack brand on its own row, compact controls below */
  .topbar { padding: 8px 12px; gap: 6px; }
  .brand .logo svg { width: 28px; height: 28px; }
  .brand h1 { font-size: 17px; margin: 0; }
  .brand .tag { display: none; } /* hide tagline on phone — saves vertical space */
  .controls { gap: 6px; width: 100%; }
  .controls .ctrl { font-size: 11px; }
  .controls input[type=range] { width: 90px; }
  .controls button {
    padding: 7px 11px;
    font-size: 12px;
    min-height: 38px; /* big enough to tap reliably */
  }
  #last-updated { font-size: 10px; opacity: 0.6; }

  /* Market bar: smaller font, all info kept (user explicitly wanted it) */
  .market-bar {
    padding: 6px 10px;
    font-size: 12px;
    gap: 8px;
  }
  .market-bar .clock { font-size: 12px; }
  .market-bar .clock .muted { font-size: 11px; opacity: 0.7; }
  .market-bar .clock-sep { opacity: 0.4; }
  .market-bar .next-candle { font-size: 11px; }

  /* Tab bar: tighter, momentum-scroll snappier */
  .tabs {
    padding: 4px 8px;
    gap: 1px;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 0 24px;
  }
  .tab {
    padding: 9px 11px;
    font-size: 13px;
    min-height: 36px;
    flex-shrink: 0; /* don't squish tabs */
  }

  /* Signal cards: full-width, less padding */
  .grid {
    grid-template-columns: 1fr; /* single column on phone */
    gap: 10px;
  }
  .card { padding: 14px; }
  .card-best-available { padding: 0; }

  /* Modal: full-screen on phone */
  .modal-content {
    border-radius: 0;
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    margin: 0;
  }

  /* Disclaimer: shrink */
  .disclaimer { padding: 8px 12px; font-size: 12px; }

  /* Calculator: stack inputs on phone */
  .calc-standalone { padding: 14px; gap: 12px; }
  .calc-standalone .calc-row { grid-template-columns: 1fr; gap: 10px; }
  .calc-grid { grid-template-columns: 1fr 1fr; }

  /* Pro consensus card: tighter padding */
  .pro-consensus-card { padding: 12px 14px; }
  .pc-header { font-size: 14px; }

  /* More dropdown menu: stretched between left:12px and right:12px (set by JS).
     v212 — using inline left+right gives full-width without overflow. */
  .tab-more-menu {
    min-width: auto;
    max-width: none;
  }

  /* My Trades: tighter rows */
  .trade-row { padding: 12px; }
  .trade-levels { font-size: 12px; flex-wrap: wrap; gap: 6px; }
}

/* ─── Tiny phones (≤380px) — even more compact ─── */
@media (max-width: 380px) {
  .topbar { padding: 6px 10px; }
  .brand h1 { font-size: 15px; }
  .controls button { padding: 6px 9px; font-size: 11px; }
  .controls input[type=range] { width: 70px; }
  .market-bar { padding: 5px 10px; font-size: 11px; }
  .market-bar .sessions strong { font-size: 11px; }
  .tab { padding: 8px 10px; font-size: 12px; }
  .tab-content { padding: 10px; }
}

/* ─── PWA standalone mode tweaks (when added to home screen) ─── */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); }
  .topbar { padding-top: max(8px, env(safe-area-inset-top)); }
  .ios-hint { display: none; } /* iOS install hint not needed when already installed */
}

/* Reduce motion preference — kill big animations for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* v213 — Learning Brain status card */
.brain-status-card {
  background: linear-gradient(135deg, rgba(168,85,247,0.06), rgba(59,130,246,0.06));
  border: 1px solid rgba(168,85,247,0.20);
  border-radius: 14px;
  padding: 0;
  margin: 0 0 14px;
}
.brain-details summary { list-style: none; cursor: pointer; }
.brain-details summary::-webkit-details-marker { display: none; }
.brain-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
}
.brain-icon { font-size: 20px; flex-shrink: 0; }
.brain-headline { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.brain-headline strong { font-size: 14px; color: var(--text); }
.brain-headline .muted { font-size: 11px; opacity: 0.7; }
.brain-toggle {
  transition: transform 0.2s ease;
  opacity: 0.6;
}
.brain-details[open] .brain-toggle { transform: rotate(180deg); }
.brain-body {
  padding: 0 16px 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.bs-sec {
  background: rgba(0,0,0,0.18);
  border-radius: 8px;
  padding: 10px 12px;
}
.bs-sec-title {
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.bs-row {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0; font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.bs-row:last-child { border-bottom: none; }
.bs-combo { flex: 1; color: var(--text); font-family: ui-monospace, monospace; font-size: 12px; }
.bs-wr {
  font-weight: 700; font-size: 12px;
  padding: 2px 7px; border-radius: 5px;
  min-width: 44px; text-align: center;
}
.bs-wr-green { background: rgba(34,197,94,0.18); color: #86efac; }
.bs-wr-amber { background: rgba(245,158,11,0.18); color: #fcd34d; }
.bs-wr-red { background: rgba(239,68,68,0.18); color: #fca5a5; }
.bs-n { font-size: 11px; color: var(--text-muted); opacity: 0.7; }
.bs-foot { font-size: 11px; padding-top: 6px; line-height: 1.5; }

/* v214 — Live scan pulse indicator in the topbar brand */
.scan-pulse {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  margin-left: 6px;
  vertical-align: middle;
  animation: scan-pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.7);
}
@keyframes scan-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); opacity: 1; }
  50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); opacity: 0.6; }
}

/* v214 — Shadow Signal Feed (would-have-won/lost) card */
.shadow-feed-card {
  background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(34,197,94,0.04));
  border: 1px solid rgba(59,130,246,0.18);
  border-radius: 14px;
  padding: 0;
  margin: 0 0 14px;
}
.shadow-details summary { list-style: none; cursor: pointer; }
.shadow-details summary::-webkit-details-marker { display: none; }
.shadow-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
}
.sh-icon { font-size: 20px; flex-shrink: 0; }
.sh-headline { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sh-headline strong { font-size: 14px; color: var(--text); }
.sh-headline .muted { font-size: 11px; opacity: 0.7; }
.sh-wr-pill {
  padding: 4px 10px; border-radius: 6px;
  font-weight: 700; font-size: 12px;
  flex-shrink: 0;
}
.sh-wr-green { background: rgba(34,197,94,0.20); color: #86efac; }
.sh-wr-amber { background: rgba(245,158,11,0.20); color: #fcd34d; }
.sh-wr-red { background: rgba(239,68,68,0.20); color: #fca5a5; }
.sh-toggle { opacity: 0.6; transition: transform 0.2s ease; }
.shadow-details[open] .sh-toggle { transform: rotate(180deg); }
.shadow-body { padding: 0 12px 12px; }
.sh-row {
  display: grid;
  grid-template-columns: 24px 1fr 48px 50px 1fr 56px;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 12px;
}
.sh-row:last-child { border-bottom: none; }
.sh-row.sh-won { background: rgba(34,197,94,0.05); }
.sh-row.sh-lost { background: rgba(239,68,68,0.05); }
.sh-row.sh-expired { opacity: 0.5; }
.sh-status { font-size: 14px; text-align: center; }
.sh-pair { font-weight: 600; }
.sh-dir { font-size: 10px; padding: 2px 5px; border-radius: 4px; text-align: center; font-weight: 700; }
.sh-dir-buy { background: rgba(34,197,94,0.20); color: #86efac; }
.sh-dir-sell { background: rgba(239,68,68,0.20); color: #fca5a5; }
.sh-conf { color: var(--text-muted); font-size: 11px; text-align: right; }
.sh-result { font-size: 11px; font-weight: 600; }
.sh-result.sh-won { color: #86efac; }
.sh-result.sh-lost { color: #fca5a5; }
.sh-result.sh-open { color: var(--text-muted); }
.sh-result.sh-expired { color: #94a3b8; }
.sh-age { font-size: 11px; text-align: right; }
.sh-foot { font-size: 11px; padding: 8px 4px 2px; line-height: 1.5; }

@media (max-width: 600px) {
  .sh-row {
    grid-template-columns: 22px 1fr 42px 44px 1fr 50px;
    gap: 6px; padding: 6px;
    font-size: 12px;
  }
}

/* v218 — Elite Brain Pattern badge — prominent gold gradient */
.elite-brain-badge {
  display: inline-block;
  padding: 6px 12px;
  margin: 6px 0;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #4a2c00;
  font-weight: 800;
  font-size: 12px;
  border-radius: 8px;
  letter-spacing: 0.03em;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.35);
  animation: elite-shine 3s ease-in-out infinite;
}
@keyframes elite-shine {
  0%, 100% { box-shadow: 0 0 14px rgba(251, 191, 36, 0.35); }
  50% { box-shadow: 0 0 22px rgba(251, 191, 36, 0.55); }
}

/* v218 — Brain combo info line — subtle, informative */
.brain-combo-line {
  display: block;
  padding: 5px 10px;
  margin: 4px 0;
  background: rgba(168, 85, 247, 0.08);
  border-left: 2px solid rgba(168, 85, 247, 0.4);
  color: var(--text-muted);
  font-size: 11px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
}

/* v219 — Live trade monitor pulse — shows the 10s real-time check is active */
.trade-monitor-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin: 0 0 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: #86efac;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.trade-monitor-pulse.mon-checking {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.40);
  color: #93c5fd;
  animation: monitor-pulse 1.2s ease-in-out infinite;
}
.trade-monitor-pulse.mon-ok {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.25);
  color: #86efac;
}
.trade-monitor-pulse.mon-error {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.40);
  color: #fca5a5;
}
@keyframes monitor-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* v220 — Calculator margin block (broker check) */
.calc-margin-block {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.calc-margin-title {
  font-size: 12px; color: var(--text-muted);
  font-weight: 600; letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.calc-cell-warn {
  background: rgba(245, 158, 11, 0.10);
  border-left: 3px solid #fbbf24;
}
.calc-cell-good {
  background: rgba(34, 197, 94, 0.10);
  border-left: 3px solid #22c55e;
}
.calc-margin-warn {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  color: #fcd34d;
  font-size: 13px;
  line-height: 1.55;
}
.calc-margin-warn b { color: #fbbf24; }
.calc-margin-ok {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(34, 197, 94, 0.08);
  border-radius: 6px;
  color: #86efac;
  font-size: 12px;
}
.calc-no-price {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px dashed rgba(59, 130, 246, 0.4);
  border-radius: 8px;
  color: #93c5fd;
  font-size: 13px;
  line-height: 1.5;
}
.calc-no-price b { color: var(--text); }

/* v221 — Brain badges persisted on trade rows */
.trade-elite-brain-tag {
  display: inline-block;
  padding: 3px 8px;
  margin: 2px 4px 2px 0;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #4a2c00;
  font-weight: 700;
  font-size: 11px;
  border-radius: 5px;
  letter-spacing: 0.02em;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.30);
}
.trade-brain-combo-tag {
  display: inline-block;
  padding: 3px 8px;
  margin: 2px 4px 2px 0;
  background: rgba(168, 85, 247, 0.18);
  color: #d8b4fe;
  font-weight: 600;
  font-size: 11px;
  border-radius: 5px;
  border: 1px solid rgba(168, 85, 247, 0.30);
}
.trade-row-elite-brain {
  border-left: 3px solid #fbbf24 !important;
}

/* v222 — Brain card visibility boost. Was nearly invisible at 0.06 opacity. */
.brain-status-card {
  background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(59,130,246,0.14)) !important;
  border: 1px solid rgba(168,85,247,0.45) !important;
  box-shadow: 0 0 24px rgba(168,85,247,0.15);
}
.brain-status-card .brain-summary {
  background: rgba(168,85,247,0.06);
}
.brain-status-card .brain-headline strong {
  color: #e9d5ff;
  font-size: 15px;
}
.brain-status-card .brain-headline .muted {
  color: rgba(216, 180, 254, 0.8);
}
.brain-status-card .bs-sec {
  background: rgba(0,0,0,0.35) !important;
}
/* Pulsing live dot next to "Learning Brain" title */
.brain-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  margin-left: 6px;
  vertical-align: middle;
  animation: brain-live-pulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
}
@keyframes brain-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); opacity: 1; }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); opacity: 0.7; }
}

/* v223 — Shadow Feed full-detail card layout (replaces compact .sh-row) */
.sh-card {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 8px;
  background: rgba(0,0,0,0.18);
}
.sh-card.sh-won { background: rgba(34,197,94,0.06); border-color: rgba(34,197,94,0.20); }
.sh-card.sh-lost { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.20); }
.sh-card.sh-expired { opacity: 0.55; }
.sh-card-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
  margin-bottom: 8px;
}
.sh-card .sh-pair { font-weight: 700; font-size: 13px; }
.sh-card .sh-conf { color: var(--text-muted); font-size: 11px; }
.sh-card .sh-result { font-weight: 600; font-size: 11px; margin-left: auto; }
.sh-card .sh-age { font-size: 11px; }
/* v257 — Top-pick treatment. The 3 highest brain-scored OPEN signals in the
   feed get a subtle gold border + faint glow. Endorsed signals (Brain's Top
   Pick, Elite Pattern) get a richer purple-gold gradient outline. The crown
   emoji marks the top-3 explicitly. */
.sh-card.sh-top {
  border-color: rgba(251, 191, 36, 0.55) !important;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.20);
}
.sh-card.sh-endorsed {
  border-color: rgba(168, 85, 247, 0.55) !important;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.05), rgba(251, 191, 36, 0.025)) !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.25);
}
.sh-top-pick {
  font-size: 14px;
  filter: drop-shadow(0 1px 2px rgba(251, 191, 36, 0.5));
  flex-shrink: 0;
}
.sh-brain-score {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.30);
  color: #d8b4fe;
  letter-spacing: -0.005em;
  flex-shrink: 0;
}

/* v249 — Tappable shadow cards: subtle interaction affordances so the user
   knows they can tap to see details. Hint chevron on the right, hover/focus
   ring, and a press-down state for tactile feedback. */
.sh-card-tappable {
  cursor: pointer;
  transition: transform 140ms cubic-bezier(0.32, 0.72, 0, 1), background 140ms cubic-bezier(0.32, 0.72, 0, 1), border-color 140ms cubic-bezier(0.32, 0.72, 0, 1);
}
.sh-card-tappable:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(168, 85, 247, 0.35);
}
.sh-card-tappable:active {
  transform: scale(0.985);
}
.sh-card-tappable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sh-tap-hint {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 18px;
  font-weight: 300;
  opacity: 0.55;
  transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1), opacity 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
.sh-card-tappable:hover .sh-tap-hint {
  transform: translateX(3px);
  opacity: 0.9;
}

/* v249 — Detail modal styling. Reuses #modal but with a shadow-specific body
   layout: header → tags → probability cells → levels list → timing → failure */
.shadow-modal { padding: 4px; }
.shadow-modal-head {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 14px;
}
.shadow-modal-pair {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em;
}
.shadow-modal-pair .dir-buy  { color: var(--buy); }
.shadow-modal-pair .dir-sell { color: var(--sell); }
.shadow-modal-status {
  font-size: 14px; font-weight: 600;
}
.shadow-modal-conf {
  font-size: 13px;
}
.shadow-modal-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.shadow-meta-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: #c7d2fe;
}
.shadow-modal-section {
  margin: 12px 0;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.shadow-modal-section h4 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.shadow-modal-prob {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.smp-cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}
.smp-lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.smp-val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.smp-val.smp-good { color: #86efac; }
.smp-val.smp-bad  { color: #fca5a5; }
.shadow-modal-levels {
  display: flex; flex-direction: column; gap: 5px;
}
.sml-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}
.sml-row.sml-sl { background: rgba(239, 68, 68, 0.08); }
.sml-row.sml-tp { background: rgba(34, 197, 94, 0.06); }
.sml-lbl { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.sml-row code {
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.sml-dist { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.shadow-modal-timing {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.shadow-modal-fail .sh-fail-tag {
  margin: 0 4px 4px 0;
}
.shadow-modal-fail-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }

.sh-card-levels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.sh-level {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  /* v244 — Allow grid items to shrink past their content min-size so long
     5-digit forex prices (e.g. 1.08412) don't blow out the grid layout. */
  min-width: 0;
  overflow: hidden;
}
.sh-level-sl { background: rgba(239,68,68,0.08); }
.sh-level-tp { background: rgba(34,197,94,0.06); }
.sh-lvl-lbl {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sh-level code {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--text);
  /* v244 — Tabular numerals so 5-digit forex prices align cleanly. The
     min-width:0 + white-space combo lets the price size to available width
     without truncation while keeping the column count consistent. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.02em;
}
@media (max-width: 600px) {
  /* v244 — Mobile: switch to 5-row stack layout when prices need 5 decimals
     (forex pairs). Three columns × two rows squeezes EUR/USD's 1.08412 too
     hard. Auto-rows let the grid breathe based on content. */
  .sh-card-levels { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .sh-level { font-size: 11px; padding: 5px 4px; }
  .sh-lvl-lbl { font-size: 9px; }
  .sh-level code { font-size: 11px; letter-spacing: -0.04em; }
}
@media (max-width: 400px) {
  /* Very narrow phones: 2 rows × 3 columns (Entry/SL/TP1 + TP2/TP3 + spacer)
     gives the 5-digit forex prices room to breathe. */
  .sh-card-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh-level code { font-size: 11px; }
}

/* v224 — Success variant of take-trade toast (green) with link to My Trades */
.take-trade-toast-success {
  background: rgba(34, 197, 94, 0.10) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
  color: #86efac !important;
}
.take-trade-toast-success strong { color: #bbf7d0 !important; }
.take-trade-toast-success .goto-trades-link {
  color: #34d399;
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
}
.take-trade-toast-success .goto-trades-link:hover {
  color: #6ee7b7;
}

/* v225 — Per-pair labels in brain status card */
.bs-pair-tag {
  display: inline-block;
  padding: 2px 7px;
  margin-right: 6px;
  background: rgba(168, 85, 247, 0.20);
  color: #d8b4fe;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.bs-pair-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.bs-pair-pill {
  font-size: 11px;
  padding: 3px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted);
  border-radius: 5px;
  font-family: ui-monospace, monospace;
}

/* v226 — Always-visible "what is the brain doing now" indicator */
.brain-live-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(34, 197, 94, 0.10);
  border-bottom: 1px solid rgba(168, 85, 247, 0.20);
  font-size: 12px;
  flex-wrap: wrap;
}
.brain-spinner {
  display: inline-block;
  font-size: 14px;
  animation: brain-spin 4s linear infinite;
}
@keyframes brain-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.brain-live-text {
  flex: 1;
  color: #d1fae5;
  font-weight: 500;
  min-width: 0;
}
.brain-live-text b {
  color: #fbbf24;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  padding: 1px 6px;
  background: rgba(251, 191, 36, 0.18);
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.brain-live-text .muted {
  color: rgba(216, 180, 254, 0.8);
  font-size: 11px;
}
.brain-cycle-bar {
  flex-basis: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}
.brain-cycle-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #fbbf24, #a855f7);
  transition: width 0.8s cubic-bezier(0.33, 0, 0, 1);
}

@media (max-width: 600px) {
  .brain-live-line { padding: 8px 12px; font-size: 12px; gap: 8px; }
  .brain-live-text b { font-size: 12px; padding: 1px 5px; }
}

/* v227 — Intelligence tier pill */
.brain-intel-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.brain-intel-pill.intel-novice {
  background: rgba(156, 163, 175, 0.20);
  color: #d1d5db;
  border: 1px solid rgba(156, 163, 175, 0.30);
}
.brain-intel-pill.intel-apprentice {
  background: rgba(59, 130, 246, 0.20);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.35);
}
.brain-intel-pill.intel-skilled {
  background: rgba(34, 197, 94, 0.20);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.brain-intel-pill.intel-master {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #4a2c00;
  border: 1px solid #f59e0b;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
}
/* v239 — Genius tier. Cyan→violet gradient with stronger glow. Requires
   calibration ≥ 92% to reach — true self-improvement, not just data accumulation. */
.brain-intel-pill.intel-genius {
  background: linear-gradient(135deg, #06b6d4, #a855f7);
  color: #fff;
  border: 1px solid rgba(168, 85, 247, 0.7);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.55), 0 0 6px rgba(6, 182, 212, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* v239 — Self-improvement line: regime + calibration + live samples count.
   Sits under the health line so users see real-time evidence of learning. */
.brain-improve-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  flex-wrap: wrap;
  margin: 0 0 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.brain-regime, .brain-cal-pill, .brain-live-samples {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.brain-regime {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.28);
  color: #c7d2fe;
}
.brain-cal-pill.cal-empty {
  background: rgba(156, 163, 175, 0.10);
  border: 1px solid rgba(156, 163, 175, 0.22);
  color: #9ca3af;
}
.brain-cal-pill.cal-poor {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.30);
  color: #fca5a5;
}
.brain-cal-pill.cal-ok {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.30);
  color: #fcd34d;
}
.brain-cal-pill.cal-great {
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.32);
  color: #86efac;
}
.brain-live-samples {
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.28);
  color: #d8b4fe;
}
/* v258 — Lessons learned pill — emerald-teal to mark "knowledge gained
   from mistakes." Grows monotonically as the brain studies more failures. */
.brain-lessons-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.30);
  color: #5eead4;
  letter-spacing: -0.005em;
  font-weight: 600;
}

/* v260 — Wins studied pill — green to mark "knowledge gained from successes."
   Sits next to lessons pill so the user sees both forms of endless learning. */
.brain-wins-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.34);
  color: #86efac;
  letter-spacing: -0.005em;
  font-weight: 600;
}
/* v247 — Self-evolving Learning guide. Expandable sections for tabs,
   brain, badges, brain-card pills, filters, shadow tracker, glossary,
   version log. Reads from LEARNING_DATA which grows with every feature. */
.learning-guide {
  margin: 0 0 24px;
}
.lg-intro {
  margin-bottom: 18px;
  padding: 16px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.04));
  border: 1px solid rgba(99, 102, 241, 0.18);
}
.lg-intro h2 {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.lg-intro p {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
.lg-intro p.muted { font-size: 12px; }
.lg-intro code {
  background: rgba(255,255,255,0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.lg-section {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
  transition: border-color 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
.lg-section[open] {
  border-color: rgba(168, 85, 247, 0.32);
}
.lg-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.lg-summary::-webkit-details-marker { display: none; }
.lg-summary:hover { background: rgba(255,255,255,0.02); }
.lg-title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
}
.lg-summary-text {
  flex: 1;
  font-size: 12px;
}
.lg-toggle {
  font-size: 14px;
  transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1);
  opacity: 0.6;
}
.lg-section[open] .lg-toggle { transform: rotate(180deg); }
.lg-items {
  padding: 0 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lg-item {
  padding: 11px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border-left: 3px solid rgba(168, 85, 247, 0.32);
}
.lg-item-name {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 5px;
  letter-spacing: -0.005em;
  color: #e5e7eb;
}
.lg-item-what {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 5px;
}
.lg-item-use {
  font-size: 12px;
  line-height: 1.5;
  color: #9ca3af;
}
.lg-item-use strong {
  color: #c4b5fd;
  font-weight: 600;
}
@media (max-width: 600px) {
  .lg-intro { padding: 14px; }
  .lg-intro h2 { font-size: 16px; }
  .lg-summary { padding: 11px 14px; gap: 8px; }
  .lg-title { font-size: 14px; }
  .lg-summary-text { display: none; } /* hide subtitle on phones to save space */
  .lg-items { padding: 0 14px 12px; }
  .lg-item-name { font-size: 13px; }
  .lg-item-what, .lg-item-use { font-size: 12px; }
}

/* v245 — Adaptive Bar pill — shows the current gate threshold that's
   driving the win-rate climb. Color shifts cool→hot as the bar tightens:
   blue (loose, gathering data) → amber (mid) → red (tight, demanding strict
   signals only). This is THE proof that WR is climbing with brain learning. */
.brain-bar-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  font-weight: 600;
}
.brain-bar-pill.bar-loose {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.30);
  color: #93c5fd;
}
.brain-bar-pill.bar-mid {
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.34);
  color: #fcd34d;
}
.brain-bar-pill.bar-tight {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(168, 85, 247, 0.14));
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fca5a5;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.25);
}

/* v241 — Brain Gate pill — appears only when brain rejected signals.
   Red-toned because suppression is the point: "shield" icon + count of
   how many would-be signals the brain blocked using its wisdom. */
.brain-gated-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.32);
  color: #fca5a5;
  letter-spacing: -0.005em;
  font-weight: 600;
}
@media (max-width: 600px) {
  .brain-improve-line { font-size: 11px; padding: 6px 12px; gap: 6px; }
  .brain-regime, .brain-cal-pill, .brain-live-samples { font-size: 11px; padding: 2px 7px; }
}
@media (max-width: 600px) {
  .brain-intel-pill { font-size: 11px; padding: 2px 8px; }
}

/* v234 — Non-stop learning health line. Sits directly under the rotation
   line so users always see "brain is learning right now" feedback. */
.brain-health-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 8px;
  margin: 0 0 8px;
  border: 1px solid transparent;
  transition: background 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.brain-health-line.health-ok {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.02));
  border-color: rgba(34, 197, 94, 0.22);
  color: #86efac;
}
.brain-health-line.health-warn {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.02));
  border-color: rgba(251, 191, 36, 0.22);
  color: #fcd34d;
}
.brain-health-icon {
  font-size: 13px;
  filter: drop-shadow(0 0 4px currentColor);
}
.brain-health-text {
  flex: 1;
  font-variant-numeric: tabular-nums;
  opacity: 0.92;
}
@media (max-width: 600px) {
  .brain-health-line { font-size: 12px; padding: 7px 12px; gap: 6px; }
}

/* v228 — Failure reason display in Signal Feed */
.sh-failure-line {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(239, 68, 68, 0.06);
  border-left: 3px solid rgba(239, 68, 68, 0.35);
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 11px;
}
.sh-fail-label {
  color: #fca5a5;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 11px;
}
.sh-fail-tag {
  padding: 2px 8px;
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
  border: 1px solid rgba(239, 68, 68, 0.20);
  border-radius: 4px;
  font-size: 11px;
}

/* v228 — Brain's "lessons learned" panel at top of Signal Feed */
.sh-lessons {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(239, 68, 68, 0.04));
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 8px;
}
.sh-lessons-title {
  font-size: 12px;
  font-weight: 700;
  color: #d8b4fe;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.sh-lesson-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 11px;
}
.sh-lesson-row:last-child { border-bottom: none; }
.sh-lesson-tag { color: var(--text); }
.sh-lesson-count {
  color: var(--text-muted);
  font-family: ui-monospace, monospace;
  font-size: 11px;
}

/* ════════════════════════════════════════════════════════════════════════
   v231 — APPLE-GRADE POLISH PASS
   ════════════════════════════════════════════════════════════════════════
   Goal: eliminate the "chopping" / janky transitions reported by user.
   Tactics:
     • Spring-ease timing curves (matches iOS UIView animations)
     • GPU acceleration via transform + opacity only (no layout-shifting props)
     • will-change hints where appropriate, removed after animation
     • Subtler scale (0.985 not 0.97 — feels premium, not arcade)
     • Modal open/close with smooth scale + fade
     • Tab switch fade
     • Reduced motion respected
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --apple-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --apple-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --apple-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 180ms;
  --duration-base: 260ms;
  --duration-slow: 380ms;
}

/* ─── Modal open/close — smooth scale+fade like iOS sheets ─── */
.modal {
  transition: opacity var(--duration-base) var(--apple-standard);
  opacity: 1;
  will-change: opacity;
}
.modal.hidden {
  display: flex !important; /* keep in flow so we can fade */
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition-delay: 0s, var(--duration-base);
  transition-property: opacity, visibility;
}
.modal:not(.hidden) {
  visibility: visible;
  transition-delay: 0s, 0s;
  transition-property: opacity, visibility;
}
.modal-content {
  transform-origin: center center;
  transition:
    transform var(--duration-base) var(--apple-spring),
    opacity var(--duration-base) var(--apple-standard);
  will-change: transform, opacity;
}
.modal.hidden .modal-content {
  transform: scale(0.96) translateY(8px);
  opacity: 0;
}
.modal:not(.hidden) .modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* ─── Card press feedback — subtler, premium feel ─── */
.card, .signal-card, .trade-row, .sh-card, .bs-row {
  transition:
    transform var(--duration-fast) var(--apple-spring),
    box-shadow var(--duration-base) var(--apple-standard),
    border-color var(--duration-base) var(--apple-standard),
    background var(--duration-base) var(--apple-standard);
  will-change: auto; /* turn on briefly during press, off otherwise */
}
.card:active, .signal-card:active, .trade-row:active, .sh-card:active {
  transform: scale(0.985);
  will-change: transform;
}

/* Button press */
button, .tab, .take-trade-btn, .calc-toggle-btn, .icon-btn {
  transition:
    transform var(--duration-fast) var(--apple-spring),
    background var(--duration-base) var(--apple-standard),
    color var(--duration-base) var(--apple-standard),
    border-color var(--duration-base) var(--apple-standard);
}
button:active:not(:disabled),
.tab:active,
.take-trade-btn:active {
  transform: scale(0.95);
}

/* v235b — REMOVED 260ms tab-content fade-in. Was the biggest source of
   perceived lag when switching tabs. Three separate rules were defining
   tab-fade animations; this was the slowest. Tab switches must feel
   native-iOS instant. The shorter 80ms opacity flash defined elsewhere
   is more than enough to feel smooth without feeling laggy. */

/* ─── Signal cards stagger fade-in on load ─── */
.grid .card,
.grid .card-best-available {
  animation: card-enter var(--duration-base) var(--apple-standard) both;
}
.grid .card:nth-child(1) { animation-delay: 0ms; }
.grid .card:nth-child(2) { animation-delay: 35ms; }
.grid .card:nth-child(3) { animation-delay: 70ms; }
.grid .card:nth-child(4) { animation-delay: 105ms; }
.grid .card:nth-child(5) { animation-delay: 140ms; }
.grid .card:nth-child(6) { animation-delay: 175ms; }
.grid .card:nth-child(7) { animation-delay: 210ms; }
.grid .card:nth-child(8) { animation-delay: 245ms; }
/* v428c — transform-only, same reasoning as cardEnter above: an entrance
   animation must never be able to leave real content invisible. */
@keyframes card-enter {
  from { transform: translateY(8px); }
  to { transform: translateY(0); }
}

/* ─── Scroll performance ─── */
html { scroll-behavior: smooth; }
body, .tab-content, .grid {
  -webkit-overflow-scrolling: touch;
}
.grid {
  /* avoid expensive backdrop-filter on every card */
  contain: layout paint;
}

/* ─── GPU-accelerate sticky elements so scroll stays 60fps ─── */
.topbar, .market-bar, .tabs {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* ─── Hover lift on cards (desktop only) ─── */
@media (hover: hover) and (pointer: fine) {
  .card:hover, .signal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
  }
}

/* ─── Better focus rings — accessible without being ugly ─── */
button:focus-visible, .tab:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(48, 209, 88, 0.7);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ─── Loading shimmer for skeleton cards ─── */
.skeleton-card {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 14px;
  height: 280px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Anti-jank for auto-refreshed content ─── */
#brain-status-card, #shadow-feed-card, #pro-consensus-card {
  contain: layout style;
}
.brain-cycle-bar span,
.tpbd-fill,
.conf-bar span {
  transform: translateZ(0); /* compositor layer for animated widths */
}

/* ─── Better tap-highlight removal ─── */
a, button, .tab, .card, .signal-card, [role="button"], [data-pair], [data-trade-id] {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
input, textarea, .trade-notes, .card-note, .modal-note {
  user-select: text;
}

/* ─── Mobile: tighten spacing without breaking layout ─── */
@media (max-width: 600px) {
  .card { border-radius: 12px; }
  .modal-content {
    /* iOS sheet-style slide-up presentation */
    border-radius: 18px 18px 0 0;
    max-height: 92vh;
    margin-top: auto;
    transform-origin: bottom center;
  }
  .modal.hidden .modal-content {
    transform: translateY(100%);
  }
  .modal:not(.hidden) .modal-content {
    transform: translateY(0);
  }
}

/* ─── Respect reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .grid .card { animation: none !important; }
}

/* ─── Crisp text everywhere ─── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── Disable layout shifts from animated lists ─── */
.sh-card, .bs-row, .pc-item {
  contain: layout;
}

/* ─── Soft material depth on raised surfaces ─── */
.card, .trade-row, .calc-standalone, .brain-status-card, .shadow-feed-card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.12);
}
.card:hover, .trade-row:hover {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.22),
    0 8px 24px rgba(0, 0, 0, 0.16);
}

/* ─── Smooth toggle / switch components ─── */
.calc-toggle-btn, input[type="checkbox"], input[type="radio"] {
  transition: all var(--duration-base) var(--apple-spring);
}

/* ─── Confidence bar smoother fill ─── */
.conf-bar span {
  transition: width 600ms var(--apple-spring), background 200ms var(--apple-standard);
}

/* ════════════════════════════════════════════════════════════════════════
   v232 — MULTI-MILLION-DOLLAR PRODUCT DESIGN SYSTEM
   ════════════════════════════════════════════════════════════════════════
   Inspirations: Linear (typography + spacing), Bloomberg Terminal (data),
   Stripe (refined dark mode), Apple (motion + materials).
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Premium typography stack — Inter variable for body, SF Pro fallback ─── */
:root {
  --font-sans: 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Menlo', monospace;

  /* Spacing scale (4px base, doubles + halves) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Type scale (1.250 = major third) */
  --text-xs:   10.5px;
  --text-sm:   12px;
  --text-base: 13.5px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;

  /* Refined palette — surfaces, not flat black */
  --bg-app:        #08090b;
  --bg-elevated:   #0f1115;
  --bg-card:       #14171c;
  --bg-card-hi:    #1a1e25;
  --bg-card-pop:   #20242c;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Text scale */
  --text-primary:   rgba(255, 255, 255, 0.96);
  --text-secondary: rgba(255, 255, 255, 0.68);
  --text-tertiary:  rgba(255, 255, 255, 0.42);
  --text-muted:     rgba(255, 255, 255, 0.32);

  /* Single accent — green for primary actions, gold for elite, red for sell, purple for brain */
  --accent-primary: #30d158;    /* iOS green */
  --accent-primary-hover: #34c759;
  --accent-buy:     #34c759;
  --accent-sell:    #ff453a;
  --accent-warn:    #ff9f0a;
  --accent-elite:   #ffd60a;
  --accent-brain:   #bf5af2;
  --accent-info:    #5fd5ff;

  /* Shadows — layered like real materials */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.22), 0 2px 4px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.28), 0 4px 8px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 20px 56px rgba(0, 0, 0, 0.32), 0 8px 16px rgba(0, 0, 0, 0.18);

  /* Rings */
  --ring-buy:   inset 0 0 0 1px rgba(52, 199, 89, 0.30);
  --ring-sell:  inset 0 0 0 1px rgba(255, 69, 58, 0.30);
  --ring-elite: inset 0 0 0 1px rgba(255, 214, 10, 0.35);
  --ring-brain: inset 0 0 0 1px rgba(191, 90, 242, 0.30);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;
}

/* ─── Typography defaults ─── */
body {
  font-family: var(--font-sans);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* Inter variants — tabular nums, single-storey g, etc. */
  background: var(--bg-app);
  color: var(--text-primary);
  letter-spacing: -0.005em;
  font-size: var(--text-base);
  line-height: 1.55;
}
@supports (font-variation-settings: normal) {
  body { font-family: 'Inter var', var(--font-sans); font-optical-sizing: auto; }
}
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--text-primary);
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
code, kbd, samp, .mono { font-family: var(--font-mono); font-size: 0.92em; }
.muted { color: var(--text-tertiary); }

/* Numeric display polish — tabular figures for clean alignment */
.tabular, code, .pair, .sh-pair, .calc-val, .brain-headline strong,
.bs-wr, .sh-wr-pill, code, .tp-pip, .trade-status {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ─── Premium card design — tonal gradient + crisp ring ─── */
.card,
.trade-row,
.calc-standalone,
.brain-status-card,
.shadow-feed-card,
.pro-consensus-card {
  background: linear-gradient(180deg, var(--bg-card-hi), var(--bg-card));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card:hover,
.trade-row:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-md);
}

/* ─── Topbar refinement ─── */
.topbar {
  background: rgba(15, 17, 21, 0.85);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-5);
}
.brand h1 {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.82) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand .tag {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
  font-weight: 500;
}

/* ─── Tab bar refinement ─── */
.tabs {
  background: rgba(8, 9, 11, 0.92);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-2) var(--space-5);
  gap: var(--space-1);
}
.tab {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -0.003em;
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
}
.tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}
.tab.active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
  font-weight: 600;
}

/* ─── Market bar refinement ─── */
.market-bar {
  background: linear-gradient(180deg, rgba(15, 17, 21, 0.95), rgba(8, 9, 11, 0.95));
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  letter-spacing: -0.005em;
  color: var(--text-secondary);
}

/* ─── Disclaimer refinement ─── */
.disclaimer {
  background: rgba(255, 159, 10, 0.06);
  border: 1px solid rgba(255, 159, 10, 0.18);
  border-radius: var(--radius-md);
  margin: var(--space-3) var(--space-5);
  padding: var(--space-3) var(--space-4);
  color: rgba(255, 214, 10, 0.92);
  font-size: var(--text-sm);
  letter-spacing: -0.005em;
}
.disclaimer strong { color: rgba(255, 214, 10, 1); font-weight: 600; }

/* ─── Buttons — three-tier hierarchy ─── */
.controls button,
button:not(.tab):not(.calc-toggle-btn):not(.take-trade-btn):not(.icon-btn):not(.trade-close):not(.trade-delete) {
  background: var(--bg-card-hi);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -0.003em;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}
.controls button:hover {
  background: var(--bg-card-pop);
  border-color: var(--border-strong);
}
.take-trade-btn {
  background: linear-gradient(180deg, var(--accent-buy), #2bb84d);
  color: #062a13;
  font-weight: 700;
  letter-spacing: -0.005em;
  border: none;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.take-trade-btn:hover {
  background: linear-gradient(180deg, #3ad161, var(--accent-buy));
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.take-trade-btn:disabled {
  background: var(--bg-card-hi);
  color: var(--text-tertiary);
  box-shadow: none;
  cursor: not-allowed;
}

/* ─── Direction badges refinement ─── */
.direction-badge {
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}
.direction-badge.dir-BUY {
  background: linear-gradient(180deg, rgba(52, 199, 89, 0.25), rgba(52, 199, 89, 0.15));
  color: #5ee589;
  box-shadow: var(--ring-buy);
}
.direction-badge.dir-SELL {
  background: linear-gradient(180deg, rgba(255, 69, 58, 0.25), rgba(255, 69, 58, 0.15));
  color: #ff7066;
  box-shadow: var(--ring-sell);
}

/* ─── Trade row refinement ─── */
.trade-row {
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.trade-head {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-sm);
}
.trade-head .pair {
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
}
.trade-levels {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}
.trade-levels code {
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--text-primary);
  font-weight: 500;
}

/* ─── Status pills refinement ─── */
.trade-status,
.tp-pip,
.tp-pip-hit {
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

/* ─── Signal Feed (shadow-card) refinement ─── */
.sh-card {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--bg-card-hi), var(--bg-card));
  border: 1px solid var(--border-subtle);
}
.sh-card.sh-won {
  background: linear-gradient(180deg, rgba(52, 199, 89, 0.08), rgba(52, 199, 89, 0.03));
  border-color: rgba(52, 199, 89, 0.20);
}
.sh-card.sh-lost {
  background: linear-gradient(180deg, rgba(255, 69, 58, 0.08), rgba(255, 69, 58, 0.03));
  border-color: rgba(255, 69, 58, 0.20);
}
.sh-card-head { font-size: var(--text-sm); }
.sh-level {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}
.sh-level code {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

/* ─── Brain card — refined premium look ─── */
.brain-status-card {
  background: linear-gradient(135deg, rgba(191, 90, 242, 0.10), rgba(59, 130, 246, 0.05)) !important;
  border: 1px solid rgba(191, 90, 242, 0.25) !important;
}
.brain-headline strong {
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.brain-headline .muted {
  font-size: var(--text-xs);
  letter-spacing: -0.003em;
}
.bs-sec-title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.brain-live-line {
  background: linear-gradient(180deg, rgba(52, 199, 89, 0.12), rgba(52, 199, 89, 0.06));
  font-size: var(--text-sm);
  letter-spacing: -0.005em;
  border-bottom: 1px solid rgba(191, 90, 242, 0.18);
}
.brain-live-text b {
  background: rgba(255, 214, 10, 0.12);
  color: #ffd60a;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 214, 10, 0.20);
}

/* ─── Elite brain badge refinement ─── */
.elite-brain-badge {
  background: linear-gradient(135deg, var(--accent-elite), #f59e0b);
  color: #2a1a00;
  font-weight: 800;
  letter-spacing: -0.005em;
  font-size: var(--text-xs);
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 214, 10, 0.50);
  box-shadow: 0 0 16px rgba(255, 214, 10, 0.25);
}

/* ─── Modal refinement ─── */
.modal-content {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 760px;
  width: 92vw;
}

/* ─── Refined inputs ─── */
input[type="number"],
input[type="text"],
input[type="range"],
select,
textarea {
  background: var(--bg-card-hi);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: -0.003em;
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--duration-fast) var(--apple-standard),
              background var(--duration-fast) var(--apple-standard);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-primary);
  background: var(--bg-card-pop);
  outline: none;
}

/* ─── Signal card refinement ─── */
.card {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-2);
}
.card .pair {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.card .conf-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.card .conf-bar span {
  display: block; height: 100%;
  border-radius: var(--radius-full);
}

/* ─── Calculator refinement ─── */
.calc-standalone {
  padding: var(--space-5);
  gap: var(--space-4);
}
.calc-cell {
  padding: var(--space-3);
  background: var(--bg-card-hi);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.calc-val {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.calc-lbl {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
}

/* ─── News + Calendar list refinement ─── */
.news-item, .cal-item {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card-hi);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

/* ─── Section padding refinement ─── */
.tab-content { padding: var(--space-5); max-width: 1280px; margin: 0 auto; }
@media (max-width: 600px) {
  .tab-content { padding: var(--space-3); }
  h1, h2, h3 { letter-spacing: -0.015em; }
}

/* ─── Premium scrollbars (webkit only) ─── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-app);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.16); }

/* ─── Selection ─── */
::selection { background: rgba(48, 209, 88, 0.30); color: #fff; }

/* ─── Smooth gradient borders for super-elite items ─── */
.elite-brain-badge::before,
.trade-row-elite-brain::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, #ffd60a, #ff9f0a);
  border-radius: inherit;
  z-index: -1;
  opacity: 0.30;
}
.trade-row-elite-brain {
  position: relative;
  border-left: 3px solid var(--accent-elite) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   v233 — INSTANT TAP RESPONSE
   ════════════════════════════════════════════════════════════════════════
   • Kill iOS 300ms double-tap delay everywhere
   • Snappier animation durations (260ms → 180ms — research shows >200ms
     starts to feel slow, <100ms feels janky; 180ms is the sweet spot)
   • Modal open feels INSTANT now that news is fetched async
   ════════════════════════════════════════════════════════════════════════ */

/* Kill ALL iOS tap delays system-wide */
* {
  touch-action: manipulation; /* skip 300ms double-tap delay */
}
input, textarea, select {
  touch-action: auto; /* allow normal interaction for form elements */
}

/* Snappier durations — overrides v231 base values */
:root {
  --duration-fast: 130ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;
}

/* Snap-fast tab switches */
.tab-content {
  animation-duration: 150ms;
}

/* Snap-fast card stagger */
.grid .card,
.grid .card-best-available {
  animation-duration: 180ms;
}
.grid .card:nth-child(1) { animation-delay: 0ms; }
.grid .card:nth-child(2) { animation-delay: 20ms; }
.grid .card:nth-child(3) { animation-delay: 40ms; }
.grid .card:nth-child(4) { animation-delay: 60ms; }
.grid .card:nth-child(5) { animation-delay: 80ms; }
.grid .card:nth-child(6) { animation-delay: 100ms; }
.grid .card:nth-child(7) { animation-delay: 120ms; }
.grid .card:nth-child(8) { animation-delay: 140ms; }

/* Make the modal feel even snappier — 180ms open */
.modal {
  transition: opacity 180ms var(--apple-standard);
}
.modal-content {
  transition:
    transform 200ms var(--apple-spring),
    opacity 180ms var(--apple-standard);
}

/* Press feedback super fast */
.card:active,
.signal-card:active,
.trade-row:active,
.sh-card:active,
button:active,
.tab:active {
  transition-duration: 60ms !important;
}

/* ════════════════════════════════════════════════════════════════════════
 * v285 — CHART BOT chat UI
 * ════════════════════════════════════════════════════════════════════════ */
.cb-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 880px;
  margin: 0 auto;
}
.cb-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.cb-title h2 { margin: 0 0 4px; }
.cb-title p { margin: 0; font-size: 13px; }
.cb-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.cb-pair-hint {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--muted, #94a3b8);
  font-weight: 600;
}
.cb-pair-hint input {
  margin-top: 4px;
  width: 130px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: var(--text, #e5e7eb);
  font-size: 14px;
}
.cb-secondary {
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text, #e5e7eb);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.cb-secondary:hover { background: rgba(255, 255, 255, 0.10); }
.cb-status {
  font-size: 13px;
  padding: 4px 0;
}
.cb-status.cb-err { color: #fca5a5; }
.cb-status.cb-ok  { color: #86efac; }
.cb-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 320px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}
.cb-empty {
  text-align: center;
  color: var(--muted, #94a3b8);
  padding: 60px 20px;
  font-size: 14px;
  line-height: 1.7;
}
.cb-msg {
  display: flex;
  flex-direction: column;
  max-width: 88%;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.55;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.cb-msg-user {
  align-self: flex-end;
  background: linear-gradient(135deg, #4338ca, #6366f1);
  color: white;
  border-bottom-right-radius: 4px;
}
.cb-msg-assistant {
  align-self: flex-start;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text, #e5e7eb);
  border-bottom-left-radius: 4px;
}
.cb-msg-meta {
  font-size: 11px;
  opacity: 0.6;
  margin-bottom: 4px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.cb-msg-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.cb-msg-images img {
  max-width: 180px;
  max-height: 180px;
  border-radius: 6px;
  object-fit: cover;
  cursor: zoom-in;
}
.cb-msg-assistant strong { color: #c4b5fd; }
.cb-msg-assistant em { color: #fcd34d; }
.cb-msg-assistant code {
  background: rgba(0, 0, 0, 0.25);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 13px;
}
.cb-typing {
  display: inline-flex;
  gap: 4px;
  padding: 4px 0;
}
.cb-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  animation: cbBounce 0.9s infinite;
}
.cb-typing span:nth-child(2) { animation-delay: 0.15s; }
.cb-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes cbBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.cb-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 0;
}
.cb-attachments:empty { display: none; }
.cb-attachment {
  position: relative;
  display: inline-block;
}
.cb-attachment img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.cb-attachment-remove {
  position: absolute;
  top: -6px; right: -6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #ef4444;
  color: white;
  border: none;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cb-composer {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
}
.cb-attach {
  width: 44px;
  background: transparent;
  border: none;
  color: var(--muted, #94a3b8);
  font-size: 20px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
}
.cb-attach:hover { background: rgba(255, 255, 255, 0.06); color: #c4b5fd; }
#cb-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text, #e5e7eb);
  font-size: 16px; /* prevents iOS auto-zoom */
  font-family: inherit;
  resize: none;
  outline: none;
  padding: 8px 4px;
  min-height: 44px;
  max-height: 200px;
}
.cb-send {
  padding: 0 18px;
  background: linear-gradient(135deg, #4338ca, #6366f1);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.cb-send:hover { opacity: 0.92; }
.cb-send:active { transform: scale(0.97); }
.cb-send:disabled {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted, #94a3b8);
  cursor: not-allowed;
}
.cb-disclaimer {
  font-size: 12px;
  margin: 0;
  line-height: 1.5;
  padding: 0 4px;
}
@media (max-width: 600px) {
  .cb-header { flex-direction: column; align-items: stretch; }
  .cb-controls { justify-content: space-between; }
  .cb-pair-hint input { width: 100%; }
  .cb-messages { min-height: 280px; max-height: 56vh; padding: 12px; }
  .cb-msg { font-size: 14px; max-width: 92%; }
  .cb-msg-images img { max-width: 130px; max-height: 130px; }
  #cb-input { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════════════
 * v286 — DRAG-TO-REORDER tabs
 * ════════════════════════════════════════════════════════════════════════ */
.tab-customize {
  margin-left: 6px;
  background: rgba(99, 102, 241, 0.10);
  border: 1px dashed rgba(99, 102, 241, 0.35);
  color: #c4b5fd;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
}
.tab-customize:hover { background: rgba(99, 102, 241, 0.20); }
.tab-customize.active {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.5);
  color: #86efac;
}
/* When customize mode is on, give every real tab a subtle "grab" affordance */
.tabs-customize .tab[data-tab] {
  cursor: grab;
  position: relative;
  outline: 1px dashed rgba(199, 210, 254, 0.25);
  outline-offset: -2px;
}
.tabs-customize .tab[data-tab]:active { cursor: grabbing; }
.tabs-customize .tab[data-tab]::before {
  content: '⋮⋮';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  opacity: 0.55;
  letter-spacing: -1px;
  pointer-events: none;
}
.tabs-customize .tab[data-tab] { padding-left: 22px; }
.tab.tab-dragging {
  opacity: 0.5;
  transform: scale(0.96);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
  z-index: 50;
}
@media (max-width: 600px) {
  .tab-customize { padding: 6px 10px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════════════
 * v289 — LIVE CHART tab
 * ════════════════════════════════════════════════════════════════════════ */
.lc-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
}
.lc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.lc-title h2 { margin: 0 0 4px; }
.lc-title p { margin: 0; font-size: 13px; }
.lc-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.lc-field {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--muted, #94a3b8);
  font-weight: 600;
}
.lc-field input, .lc-field select {
  margin-top: 4px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: var(--text, #e5e7eb);
  font-size: 14px;
  min-width: 120px;
}
.lc-secondary {
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text, #e5e7eb);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.lc-secondary:hover { background: rgba(255, 255, 255, 0.10); }
.lc-status-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.lc-quote {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.lc-quote-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted, #94a3b8);
}
.lc-quote-value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lc-quote-change {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lc-quote-change.up   { color: #86efac; }
.lc-quote-change.down { color: #fca5a5; }
.lc-quote-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text, #e5e7eb);
}
.lc-mlabel {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 4px;
  background: rgba(99, 102, 241, 0.15);
  color: #c4b5fd;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.lc-status {
  margin-left: auto;
  font-size: 12px;
}
.lc-chart-wrap {
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  overflow: hidden;
}
.lc-svg {
  width: 100%;
  height: 360px;
  display: block;
}
.lc-svg .lc-bg { fill: rgba(0, 0, 0, 0.0); }
.lc-svg .lc-grid { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.lc-svg .lc-axis-label { fill: #64748b; font-size: 10px; font-family: monospace; }
.lc-svg .lc-wick { stroke-width: 1; }
.lc-svg .lc-body { stroke-width: 1; }
.lc-svg .lc-up   { fill: #22c55e; stroke: #16a34a; }
.lc-svg .lc-down { fill: #ef4444; stroke: #dc2626; }
.lc-svg .lc-doji { fill: #cbd5e1; stroke: #94a3b8; }
.lc-svg .lc-price-line  { stroke: #fbbf24; stroke-width: 1.5; stroke-dasharray: 4 4; }
.lc-svg .lc-swing-line  { stroke: rgba(199, 210, 254, 0.45); stroke-width: 1; stroke-dasharray: 2 4; }
.lc-svg .lc-price-pill  { fill: #fbbf24; }
.lc-svg .lc-price-text  { fill: #000000; font-size: 11px; font-weight: 700; font-family: monospace; }
.lc-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.lc-primary {
  padding: 12px 24px;
  background: linear-gradient(135deg, #4338ca, #6366f1);
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.lc-primary:hover { opacity: 0.92; }
.lc-primary:active { transform: scale(0.97); }
.lc-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
/* v295 — alt style: green gradient for the screen-capture-based analyse.
   Visually distinct so users see this is the "real chart read" button. */
.lc-primary-alt {
  background: linear-gradient(135deg, #059669, #10b981);
}
.lc-primary-alt:hover { opacity: 0.94; }
.lc-auto-toggle {
  font-size: 13px;
  color: var(--muted, #94a3b8);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.lc-verdict {
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.lc-verdict strong { color: #c4b5fd; }
.lc-verdict em { color: #fcd34d; }
@media (max-width: 600px) {
  .lc-header { flex-direction: column; align-items: stretch; }
  .lc-svg { height: 280px; }
  .lc-quote-value { font-size: 18px; }
  .lc-field input, .lc-field select { font-size: 16px; min-width: 100px; }
  .lc-status { width: 100%; margin-left: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
 * v290 — TRADINGVIEW WIDGET + STRATEGY CHIPS + EXPERT MODE
 * ════════════════════════════════════════════════════════════════════════ */
.lc-tv-wrap {
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 6px;
  overflow: hidden;
  min-height: 480px;
}
.lc-tv-container {
  width: 100%;
  height: 480px;
  border-radius: 8px;
  overflow: hidden;
}
.lc-tv-container iframe { border-radius: 8px; }

.lc-strats {
  background: rgba(0, 0, 0, 0.60);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lc-strats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lc-strats-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #c4b5fd;
}
.lc-strats-clear {
  font-size: 11px;
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--muted, #94a3b8);
  border-radius: 4px;
  cursor: pointer;
}
.lc-strats-clear:hover { background: rgba(255, 255, 255, 0.09); }
.lc-strats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lc-chip {
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text, #e5e7eb);
  border-radius: 18px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  white-space: nowrap;
}
.lc-chip:hover { background: rgba(255, 255, 255, 0.08); }
.lc-chip:active { transform: scale(0.96); }
.lc-chip.active {
  background: linear-gradient(135deg, rgba(67, 56, 202, 0.35), rgba(99, 102, 241, 0.35));
  border-color: rgba(139, 92, 246, 0.6);
  color: white;
  font-weight: 600;
}
.lc-chip.lc-chip-ind.active {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.30), rgba(16, 185, 129, 0.30));
  border-color: rgba(34, 197, 94, 0.5);
}
.lc-chip.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.lc-expert-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.lc-expert-textarea {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: var(--text, #e5e7eb);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  outline: none;
}

.lc-cost-note {
  font-size: 12px;
  flex: 1;
}
@media (max-width: 600px) {
  .lc-tv-wrap { padding: 4px; min-height: 380px; }
  .lc-tv-container { height: 380px; }
  .lc-chip { font-size: 12px; padding: 6px 10px; }
  .lc-cost-note { flex-basis: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
 * v292 — Auto-AI verdict block on every signal card
 * ════════════════════════════════════════════════════════════════════════ */
.card-ai-verdict {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-left: 3px solid rgba(99, 102, 241, 0.6);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
}
.card-ai-verdict.cav-llm {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(99, 102, 241, 0.06));
  border-left-color: #86efac;
}
.card-ai-verdict.cav-fallback {
  background: rgba(148, 163, 184, 0.05);
  border-left-color: rgba(148, 163, 184, 0.4);
}
.card-ai-verdict.cav-error {
  background: rgba(239, 68, 68, 0.06);
  border-left-color: #fca5a5;
}
.card-ai-verdict .cav-header {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #c4b5fd;
  margin-bottom: 5px;
}
.card-ai-verdict.cav-llm .cav-header { color: #86efac; }
.card-ai-verdict.cav-error .cav-header { color: #fca5a5; }
.card-ai-verdict .cav-body {
  color: var(--text, #e5e7eb);
  white-space: pre-wrap;
  max-height: 360px;
  overflow-y: auto;
  font-size: 12px;
}
.card-ai-verdict .cav-body strong { color: #c4b5fd; }
.card-ai-verdict .cav-body em { color: #fcd34d; }
.card-ai-verdict .cav-body a { color: #93c5fd; }
.card-ai-verdict .cav-loading {
  color: var(--muted, #94a3b8);
  font-style: italic;
  font-size: 12px;
}
/* v299 — Live price pulse. Highlights when the gold live price updates via
   the 25 s rapid poll — subtle glow so the user sees data is fresh. */
@keyframes lcPricePulse {
  0%   { background: rgba(251, 191, 36, 0.35); box-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }
  100% { background: transparent; box-shadow: none; }
}
.lc-price-pulse {
  animation: lcPricePulse 0.8s ease-out;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   v321 — PREMIUM POLISH LAYER (Linear/Bloomberg-grade refinements)
   ═══════════════════════════════════════════════════════════════════════ */

/* Refined color tokens — subtle warmer accents on top of pure-black base */
:root {
  --accent-glow: rgba(10, 132, 255, 0.35);
  --buy-glow: rgba(48, 209, 88, 0.28);
  --sell-glow: rgba(255, 69, 58, 0.28);
  --surface-1: #0e0f13;
  --surface-2: #16181d;
  --surface-3: #1e2027;
  --surface-hover: #24272f;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text-primary: #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-tertiary: #6e6e73;
  --gradient-brand: linear-gradient(135deg, #0a84ff 0%, #64d2ff 100%);
  --gradient-win: linear-gradient(135deg, #30d158 0%, #40e070 100%);
  --gradient-premium: linear-gradient(135deg, #ffd60a 0%, #ff9f0a 100%);
  --shadow-elevate: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.4);
}

/* Numeric styling — tabular figures so prices/numbers align */
body {
  font-feature-settings: 'tnum' 1, 'ss01' 1, 'cv11' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.card .pair, .price, .num, .stat-num, .big,
[class*='confidence'], [class*='pips'], [class*='pct'] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── Brand & topbar polish ── */
.topbar {
  background: linear-gradient(180deg, rgba(14, 15, 19, 0.92) 0%, rgba(10, 10, 12, 0.85) 100%);
  border-bottom-color: var(--border-medium);
  padding: 16px 24px;
}
.brand {
  gap: 14px;
}
.brand .logo {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  filter: drop-shadow(0 0 20px var(--accent-glow));
}
.brand h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff 0%, #d0d0d5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand .tag {
  color: var(--text-tertiary);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.9;
}

/* ── Control buttons — softer pill with elevation ── */
.controls button,
.ctrl button {
  background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.controls button:hover,
.ctrl button:hover {
  background: linear-gradient(180deg, var(--surface-hover) 0%, var(--surface-3) 100%);
  border-color: var(--border-strong);
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.controls button:active,
.ctrl button:active {
  transform: translateY(0);
  transition-duration: 80ms;
}
.controls .notify-btn.active,
button.active {
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.18) 0%, rgba(10, 132, 255, 0.10) 100%);
  border-color: rgba(10, 132, 255, 0.5);
  color: #64d2ff;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.06), 0 4px 12px rgba(10, 132, 255, 0.15);
}

/* ── Tab bar — cleaner active state with animated underline ── */
.tabs {
  padding: 0 24px;
  gap: 2px;
  border-bottom: 1px solid var(--border-medium);
  background: rgba(10, 10, 12, 0.4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.tab {
  position: relative;
  padding: 12px 18px !important;
  color: var(--text-tertiary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 8px 8px 0 0 !important;
  background: transparent !important;
  transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tab:hover {
  color: var(--text-primary) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}
.tab.active {
  color: var(--text-primary) !important;
  background: transparent !important;
}
.tab.active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--gradient-brand);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 8px var(--accent-glow);
  animation: tabUnderline 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes tabUnderline {
  from { transform: scaleX(0.4); opacity: 0; }
  to   { transform: scaleX(1);   opacity: 1; }
}

/* ── Cards — softer elevation, subtle hover ── */
.card,
.wisdom-card,
.perf-card {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: var(--shadow-elevate);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover,
.wisdom-card:hover,
.perf-card:hover {
  border-color: var(--border-medium);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}
.card .pair {
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 17px;
}

/* Directional card side-highlight
   v429 — `:contains()` is a jQuery extension, not CSS. Per the selector
   spec an invalid selector invalidates the ENTIRE selector list, so the
   two valid selectors below it were dropped along with it and this accent
   bar never rendered in any browser. Invalid selector removed. */
.card[class*='buy']::before,
.card[data-direction='BUY']::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  background: var(--gradient-win);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 12px var(--buy-glow);
}
.card { position: relative; }

/* ── Info banner (educational warning) — collapse to subtle stripe ── */
.info-banner,
.warn-banner,
[class*='disclaimer'] {
  background: linear-gradient(90deg, rgba(255, 159, 10, 0.08) 0%, rgba(255, 159, 10, 0.02) 100%);
  border: 1px solid rgba(255, 159, 10, 0.18);
  border-left: 3px solid var(--warn);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 14px 24px;
}

/* ── Badges — refined pills with subtle depth ──
   v431 — `[class*='badge']` also matched the CONTAINER `.trust-badge-card`,
   so the whole System Readiness card was rendered as a 253px inline-flex
   pill (border-radius 999px, 11px text) while every sibling card was a
   798px block. It looked broken because it was being styled as a badge.
   `:not([class*='-card'])` keeps the convenience of the wildcard for real
   pills while excluding card containers by naming convention. */
.badge,
.tag-pill,
.tier-badge,
[class*='badge']:not([class*='-card']) {
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--border-medium);
  background: var(--surface-3);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* v431 — `:has-text()` is a Playwright/testing-library selector, not CSS.
   An invalid selector invalidates its whole list, so BUY badges were
   getting no green treatment at all — the rule was discarded wholesale.
   Removed; the valid selectors now apply. */
.badge.buy, [class*='badge']:not([class*='-card']).buy,
.tag-pill.buy {
  background: linear-gradient(135deg, rgba(48, 209, 88, 0.14) 0%, rgba(48, 209, 88, 0.06) 100%);
  border-color: rgba(48, 209, 88, 0.35);
  color: #40e070;
}
.badge.sell, [class*='badge']:not([class*='-card']).sell,
.tag-pill.sell {
  background: linear-gradient(135deg, rgba(255, 69, 58, 0.14) 0%, rgba(255, 69, 58, 0.06) 100%);
  border-color: rgba(255, 69, 58, 0.35);
  color: #ff6961;
}
/* v431 — same container guard: `[class*='premium']` would otherwise paint
   any premium-named wrapper with pill gold, not just the pill itself. */
.badge.premium, [class*='premium']:not([class*='-card']):not([class*='-banner']) {
  background: linear-gradient(135deg, rgba(255, 214, 10, 0.15) 0%, rgba(255, 159, 10, 0.10) 100%);
  border-color: rgba(255, 214, 10, 0.4);
  color: #ffd60a;
  text-shadow: 0 0 8px rgba(255, 214, 10, 0.3);
}

/* ── Live indicators — subtle breathing pulse ── */
.live-dot,
.pulse-dot,
[class*='live-']::before {
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(48, 209, 88, 0);   }
}

/* ── Learning brain card — subtle glow ── */
[class*='brain'],
.brain-status,
.learning-brain,
.brain-card {
  background: linear-gradient(135deg, rgba(191, 90, 242, 0.06) 0%, rgba(30, 32, 39, 0.9) 40%);
  border: 1px solid rgba(191, 90, 242, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 40px rgba(191, 90, 242, 0.06);
}

/* v408 — Premium confidence slider. Thicker track, gradient fill on the
   active side, refined thumb, better touch target. */
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  min-width: 140px;
  background: linear-gradient(90deg,
    #22c55e 0%, #4ade80 var(--slider-fill, 50%),
    rgba(148, 163, 184, 0.20) var(--slider-fill, 50%),
    rgba(148, 163, 184, 0.20) 100%);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  padding: 0;
  transition: background 100ms;
}
body.light-theme input[type='range'] {
  background: linear-gradient(90deg,
    #16a34a 0%, #22c55e var(--slider-fill, 50%),
    rgba(15, 23, 42, 0.08) var(--slider-fill, 50%),
    rgba(15, 23, 42, 0.08) 100%);
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #22c55e;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(34, 197, 94, 0.15);
  cursor: pointer;
  transition: transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 140ms;
}
input[type='range']::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 0 5px rgba(34, 197, 94, 0.20);
}
input[type='range']::-webkit-slider-thumb:active {
  transform: scale(1.25);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(34, 197, 94, 0.28);
}
input[type='range']::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #22c55e;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(34, 197, 94, 0.15);
  cursor: pointer;
}

/* ── Scrollbars — thin + subtle (desktop only) ── */
@media (min-width: 768px) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 4px;
    border: 2px solid var(--bg);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
}

/* ── Micro-interactions ── */
button, .btn, .tab {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
.tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Signal card entry animation ──
   v428c — this is the THIRD @keyframes cardEnter in this stylesheet and,
   being last, it is the one that actually applies. It still faded from
   opacity 0, which silently overrode the fix applied to the earlier
   definitions and kept signal cards invisible. Transform-only here too:
   an entrance animation must never gate whether content can be seen. */
@keyframes cardEnter {
  from { transform: translateY(6px); }
  to   { transform: translateY(0); }
}
.card, .signal-card {
  animation: cardEnter 260ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ── Selection color — matches accent ── */
::selection {
  background: rgba(10, 132, 255, 0.35);
  color: #ffffff;
}

/* ── Large numeric display cells (e.g. entry / TPs / pips) ── */
[class*='big'], .stat-value, .metric-num, .price-num {
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ── Refined H2/H3 hierarchy ── */
h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 24px 0 12px;
}
h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-tertiary) !important;
  margin: 0 0 10px;
}

/* ── Mobile — tighter spacing, larger tap targets ── */
@media (max-width: 640px) {
  .topbar { padding: 12px 16px; }
  .tabs { padding: 0 12px; }
  .tab { padding: 10px 14px !important; }
  .card { padding: 14px; border-radius: 12px; }
  .info-banner { margin: 10px 12px; padding: 10px 12px; font-size: 12px; }
}

/* ── High-DPI text refinement ── */
@media (min-resolution: 2dppx) {
  body {
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
  }
}
/* v321 end ─────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   v360 — 8K / RETINA RENDERING QUALITY PASS
   Optimized for high-DPI displays (2×, 3×, 4×+, up to 8K/UHD).
   Every asset is vector or scales cleanly. Text is subpixel-crisp.
   Colors bumped to true black + true white on dark/light theme for
   maximum panel contrast on OLED and mini-LED displays.
   ═══════════════════════════════════════════════════════════════════ */

/* Universal font smoothing — applies at ALL resolutions, not just 2x.
   MacOS/iOS ignores this at 1x but honors it above; Windows Chrome
   applies universally. Improves crispness on any display. */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "tnum" 1;
  /* tnum = tabular figures — critical for price columns */
}

/* Retina + 8K icon crisp — SVG scales; PNG stays sharp via image-rendering */
img, svg, canvas {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
/* Photos + charts should stay smooth, override the above */
.chart-widget img, .tv-widget img, img.photo, .avatar {
  image-rendering: auto;
  image-rendering: -webkit-optimize-contrast;
}

/* Numeric price displays — tabular figures + consistent width */
.price, .signal-price, .signal-entry, .signal-sl, .signal-tp,
.signal-conf, .brain-stats-value, .stat-num, [data-num] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "case" 1;
  letter-spacing: 0.005em;
}

/* Slightly heavier body weight at hi-DPI (thin fonts render mushy on 8K) */
@media (min-resolution: 2dppx) {
  body { font-weight: 415; }  /* 400 default; 415 renders crisp on 2x-4x */
  .signal-card, .brain-card, .card { font-weight: 415; }
  h1, h2, h3, .h1, .h2, .h3 { font-weight: 620; }
  .signal-conf, .price-large, .kpi-value { font-weight: 640; }
}

/* 8K + 4K displays — even sharper */
@media (min-resolution: 3dppx), (min-width: 3840px) {
  body { letter-spacing: -0.008em; font-weight: 420; }
  h1, h2, h3 { letter-spacing: -0.018em; font-weight: 640; }
  /* Boost border sharpness at extreme DPI */
  .card, .signal-card, .brain-card {
    border-width: 0.5px;
  }
  /* Shadow crispness — reduce blur, keep depth */
  .card, .modal, .dropdown {
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06);
  }
}

/* True-color contrast for OLED / mini-LED */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-true: #000;         /* true black for OLED */
    --fg-true: #fff;
  }
  body.dark-oled { background: var(--bg-true); color: var(--fg-true); }
}

/* Trust score badge (v359) — sharp gradient border on high-DPI */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.trust-badge.medium { background: linear-gradient(135deg, #f59e0b, #d97706); }
.trust-badge.low { background: linear-gradient(135deg, #ef4444, #dc2626); }

/* Confluence dots — for showing 5/6 alignment */
.confluence-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.confluence-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5e7eb;
  transition: background 200ms;
}
.confluence-dots .dot.on { background: #10b981; }
@media (min-resolution: 2dppx) {
  .confluence-dots .dot {
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.05);
  }
}

/* Reduced-motion respect — critical for accessibility at any DPI */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* v360 end ─────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   v361 — PIXEL-PERFECT CRISP PASS
   Guarantees every border, edge, and text glyph renders to ONE device
   pixel at every DPI. No sub-pixel blur, no anti-alias mush. Achieved
   via: hairline borders using device-pixel-ratio math, transform: none
   to avoid GPU rasterization blur, box-shadow inset for sharper edges,
   and explicit line-height in whole pixels.
   ═══════════════════════════════════════════════════════════════════ */

/* Hairline borders — 1 device-pixel at ANY DPI (0.5 CSS at 2x = 1dp) */
.hairline, .card.hairline, .signal-card.hairline {
  border-width: 1px;
}
@media (min-resolution: 2dppx) {
  .hairline, .card.hairline, .signal-card.hairline { border-width: 0.5px; }
}
@media (min-resolution: 3dppx) {
  .hairline, .card.hairline, .signal-card.hairline { border-width: 0.333px; }
}
@media (min-resolution: 4dppx) {
  .hairline, .card.hairline, .signal-card.hairline { border-width: 0.25px; }
}

/* Force GPU-off for text to avoid rasterization blur — matters on iOS + Chrome */
.signal-card, .brain-card, .tab-content, .modal-content,
.price, .signal-price, h1, h2, h3, .h1, .h2, .h3,
.trust-badge, .signal-conf, .kpi-value {
  transform: translate3d(0, 0, 0);   /* creates own compositing layer */
  backface-visibility: hidden;
  will-change: auto;                  /* release layer when idle */
}

/* Pixel-snapped line heights — never fractional. Prevents 1px jitter. */
body { line-height: 1.5; }
h1 { line-height: 40px; }
h2 { line-height: 32px; }
h3 { line-height: 26px; }
.signal-card, .brain-card, .card { line-height: 22px; }
small, .small { line-height: 18px; }

/* Subpixel-perfect icon sizing — always even-pixel dimensions */
.icon, .icon-btn svg, .tab-icon, .brand-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  /* stroke-based icons stay sharp; disable stroke-linecap: round which blurs */
  stroke-linecap: butt;
  shape-rendering: geometricPrecision;
}
.icon.lg, .icon-btn.lg svg { width: 24px; height: 24px; }
.icon.sm, .icon-btn.sm svg { width: 16px; height: 16px; }

/* Sharp gradient edges — dithering banding suppressed on modern browsers */
.gradient-badge, .trust-badge, .signal-tier-badge {
  background-attachment: fixed;
  background-blend-mode: normal;
}

/* Pattern-match badge (v361) — sharp indicator for matched signals */
.pattern-match-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;                  /* squarer = crisper than pill */
  font-size: 11px;
  font-weight: 640;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14),
              0 1px 0 rgba(0, 0, 0, 0.1);
}
.pattern-match-badge.exact {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}
.pattern-match-badge::before {
  content: "◆";
  font-size: 8px;
  vertical-align: middle;
}

/* Pixel-crisp table rules (for backtest results table if used) */
table.crisp {
  border-collapse: separate;
  border-spacing: 0;
}
table.crisp th, table.crisp td {
  border-top: 1px solid var(--border, #e5e7eb);
  padding: 8px 12px;
}
@media (min-resolution: 2dppx) {
  table.crisp th, table.crisp td { border-top-width: 0.5px; }
}

/* Signal-feed row separator — 1px flat, no shadow blur */
.signal-row-sep {
  height: 1px;
  background: var(--border, #e5e7eb);
  margin: 0;
}
@media (min-resolution: 2dppx) {
  .signal-row-sep { height: 0.5px; }
}
@media (min-resolution: 3dppx) {
  .signal-row-sep { height: 0.333px; }
}

/* Sharp focus ring — always 2px, never blurred */
:focus-visible {
  outline: 2px solid var(--accent, #4f46e5);
  outline-offset: 2px;
  box-shadow: none;
}

/* v361 end ─────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   v363 — TradingView Expand-to-Fullscreen Button + High-Pips Badge
   ═══════════════════════════════════════════════════════════════════ */

/* Wrap must be relative so the button positions correctly */
.lc-tv-wrap {
  position: relative;
}

/* Expand button — floats top-right of the TradingView container */
.lc-tv-fullscreen-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.85);
  color: #f1f5f9;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 150ms, transform 100ms, border-color 150ms;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.lc-tv-fullscreen-btn:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(255, 255, 255, 0.22);
}
.lc-tv-fullscreen-btn:active {
  transform: scale(0.97);
}
.lc-tv-fullscreen-btn svg {
  flex-shrink: 0;
  stroke: currentColor;
}
.lc-tv-fullscreen-label {
  font-variant-numeric: tabular-nums;
}

/* Light-theme adjust */
body.light-theme .lc-tv-fullscreen-btn {
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  border-color: rgba(0, 0, 0, 0.08);
}
body.light-theme .lc-tv-fullscreen-btn:hover {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.16);
}

/* When native fullscreen active — TV container fills whole screen */
.lc-tv-wrap:fullscreen,
.lc-tv-wrap:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  padding: 0;
  background: #000;
}
.lc-tv-wrap:fullscreen .lc-tv-container,
.lc-tv-wrap:-webkit-full-screen .lc-tv-container {
  width: 100vw;
  height: 100vh;
}

/* Faux fullscreen fallback for iOS (which doesn't support element FS) */
.lc-tv-faux-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background: #000 !important;
  padding: 0 !important;
}
.lc-tv-faux-fullscreen .lc-tv-container {
  width: 100vw !important;
  height: 100vh !important;
}

/* High-pips badge (v363) — for signals whose TP3 targets a big move */
.high-pips-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18),
              0 1px 0 rgba(0, 0, 0, 0.12);
  font-variant-numeric: tabular-nums;
}
.high-pips-badge::before { content: "🎯"; font-size: 10px; }

/* Hide expand-button label on very narrow screens (icon-only) */
@media (max-width: 380px) {
  .lc-tv-fullscreen-label { display: none; }
  .lc-tv-fullscreen-btn { padding: 6px; }
}
/* v363 end ─────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   v365 — CONDITIONS SCORE CARD + TRADE DOCTOR UI
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Conditions Score card (top of Signals tab) ─────────────────── */
.conditions-card {
  background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(139,92,246,0.06) 100%);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 0 14px;
  overflow: hidden;
  transition: border-color 200ms;
}
.conditions-card.verdict-GO { border-color: rgba(16,185,129,0.4); background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(5,150,105,0.06) 100%); }
.conditions-card.verdict-OK { border-color: rgba(59,130,246,0.3); }
.conditions-card.verdict-CAUTION { border-color: rgba(245,158,11,0.4); background: linear-gradient(135deg, rgba(245,158,11,0.12) 0%, rgba(217,119,6,0.05) 100%); }
.conditions-card.verdict-STAND-ASIDE { border-color: rgba(239,68,68,0.4); background: linear-gradient(135deg, rgba(239,68,68,0.12) 0%, rgba(220,38,38,0.06) 100%); }
.conditions-card.verdict-STOP { border-color: rgba(220,38,38,0.6); background: linear-gradient(135deg, rgba(220,38,38,0.18) 0%, rgba(153,27,27,0.1) 100%); }

.conditions-header { display: flex; align-items: center; gap: 14px; }

.conditions-score-wrap {
  display: flex;
  align-items: baseline;
  gap: 3px;
  flex-shrink: 0;
  padding: 8px 14px;
  background: rgba(15,23,42,0.35);
  border-radius: 10px;
  min-width: 100px;
  justify-content: center;
}
body.light-theme .conditions-score-wrap { background: rgba(15,23,42,0.06); }
.conditions-score {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #e2e8f0;
}
body.light-theme .conditions-score { color: #0f172a; }
.conditions-max { font-size: 13px; color: rgba(148,163,184,0.8); font-weight: 500; }

.conditions-verdict-wrap { flex: 1; min-width: 0; }
.conditions-verdict {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.verdict-GO .conditions-verdict { color: #10b981; }
.verdict-OK .conditions-verdict { color: #3b82f6; }
.verdict-CAUTION .conditions-verdict { color: #f59e0b; }
.verdict-STAND-ASIDE .conditions-verdict { color: #ef4444; }
.verdict-STOP .conditions-verdict { color: #dc2626; }
.conditions-action {
  font-size: 12px;
  color: rgba(203,213,225,0.85);
  line-height: 1.45;
}
body.light-theme .conditions-action { color: #475569; }

.conditions-toggle {
  background: transparent;
  border: 1px solid rgba(148,163,184,0.25);
  color: #94a3b8;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  transition: transform 200ms, background 150ms;
  flex-shrink: 0;
}
.conditions-toggle:hover { background: rgba(148,163,184,0.1); }
.conditions-toggle.open { transform: rotate(180deg); }

.conditions-breakdown {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(148,163,184,0.15);
  display: grid;
  gap: 8px;
  font-size: 12px;
}
.conditions-factor {
  display: grid;
  grid-template-columns: 160px 60px 1fr;
  align-items: center;
  gap: 12px;
}
.conditions-factor-name { color: rgba(203,213,225,0.8); font-weight: 500; text-transform: capitalize; }
body.light-theme .conditions-factor-name { color: #475569; }
.conditions-factor-pts { font-variant-numeric: tabular-nums; font-weight: 600; color: #e2e8f0; }
body.light-theme .conditions-factor-pts { color: #0f172a; }
.conditions-factor-note { color: rgba(148,163,184,0.75); font-size: 11px; }

@media (max-width: 640px) {
  .conditions-factor { grid-template-columns: 1fr auto; grid-template-rows: auto auto; row-gap: 2px; }
  .conditions-factor-note { grid-column: 1 / -1; }
}

/* ─── Trade Doctor UI ─────────────────────────────────────────────── */
.td-header { margin-bottom: 20px; }
.td-title { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.td-sub { margin: 0; font-size: 13px; line-height: 1.5; max-width: 640px; }

.td-form {
  background: rgba(30,41,59,0.4);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 12px;
  padding: 16px;
  display: grid;
  gap: 14px;
}
body.light-theme .td-form { background: rgba(248,250,252,0.8); }

.td-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.td-field { display: flex; flex-direction: column; gap: 5px; }
.td-label { font-size: 11px; font-weight: 600; color: rgba(148,163,184,0.9); text-transform: uppercase; letter-spacing: 0.05em; }
.td-opt { font-weight: 400; text-transform: none; opacity: 0.6; letter-spacing: 0; }

.td-input {
  padding: 9px 11px;
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 7px;
  background: rgba(15,23,42,0.6);
  color: #f1f5f9;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  transition: border-color 150ms, background 150ms;
}
body.light-theme .td-input { background: #fff; color: #0f172a; border-color: rgba(0,0,0,0.12); }
.td-input:focus { outline: none; border-color: rgba(59,130,246,0.7); background: rgba(15,23,42,0.8); }
body.light-theme .td-input:focus { background: #fff; }

.td-dir-toggle {
  display: flex;
  gap: 0;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.25);
}
.td-dir-btn {
  flex: 1;
  padding: 9px 12px;
  background: rgba(15,23,42,0.6);
  color: rgba(203,213,225,0.7);
  border: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
body.light-theme .td-dir-btn { background: #fff; color: #64748b; }
.td-dir-btn:first-child { border-right: 1px solid rgba(148,163,184,0.15); }
.td-dir-btn.active[data-dir="BUY"] { background: rgba(16,185,129,0.9); color: #fff; }
.td-dir-btn.active[data-dir="SELL"] { background: rgba(239,68,68,0.9); color: #fff; }

.td-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.td-submit-btn {
  padding: 11px 22px;
  background: linear-gradient(180deg, #4f46e5, #4338ca);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(255,255,255,0.12);
  transition: transform 100ms, box-shadow 150ms;
}
.td-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(79,70,229,0.35), inset 0 0 0 1px rgba(255,255,255,0.15); }
.td-submit-btn:active { transform: translateY(0); }
.td-submit-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }

.td-prefill-btn {
  padding: 10px 16px;
  background: transparent;
  color: #94a3b8;
  border: 1px solid rgba(148,163,184,0.3);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.td-prefill-btn:hover { background: rgba(148,163,184,0.08); border-color: rgba(148,163,184,0.5); }

/* ─── Verdict result ──────────────────────────────────────────────── */
.td-result { margin-top: 20px; }
.td-verdict-card {
  border-radius: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(148,163,184,0.2);
}
.td-verdict-EXCELLENT-TRADE, .td-verdict-GOOD-TRADE { background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(5,150,105,0.05)); border-color: rgba(16,185,129,0.4); }
.td-verdict-OK-WITH-ADJUSTMENTS { background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(29,78,216,0.04)); border-color: rgba(59,130,246,0.3); }
.td-verdict-RECONSIDER { background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(217,119,6,0.05)); border-color: rgba(245,158,11,0.4); }
.td-verdict-DO-NOT-TAKE { background: linear-gradient(135deg, rgba(239,68,68,0.14), rgba(220,38,38,0.06)); border-color: rgba(239,68,68,0.45); }

.td-verdict-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.td-verdict-label {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.td-verdict-EXCELLENT-TRADE .td-verdict-label,
.td-verdict-GOOD-TRADE .td-verdict-label { color: #10b981; }
.td-verdict-OK-WITH-ADJUSTMENTS .td-verdict-label { color: #3b82f6; }
.td-verdict-RECONSIDER .td-verdict-label { color: #f59e0b; }
.td-verdict-DO-NOT-TAKE .td-verdict-label { color: #ef4444; }
.td-verdict-score {
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.td-verdict-score-max { font-size: 13px; font-weight: 400; opacity: 0.6; }
.td-verdict-msg {
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 12px;
  background: rgba(15,23,42,0.35);
  border-radius: 8px;
  margin-bottom: 14px;
}
body.light-theme .td-verdict-msg { background: rgba(15,23,42,0.05); }

.td-checks { display: grid; gap: 8px; }
.td-check-group h4 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.td-check-group.green h4 { color: #10b981; }
.td-check-group.red h4 { color: #ef4444; }
.td-check-group.adjust h4 { color: #f59e0b; }
.td-check-item {
  font-size: 13px;
  line-height: 1.5;
  padding: 6px 10px;
  border-left: 3px solid;
  border-radius: 4px;
  margin-bottom: 4px;
  background: rgba(15,23,42,0.25);
}
body.light-theme .td-check-item { background: rgba(15,23,42,0.04); }
.td-check-group.green .td-check-item { border-left-color: #10b981; }
.td-check-group.red .td-check-item { border-left-color: #ef4444; }
.td-check-group.adjust .td-check-item { border-left-color: #f59e0b; }

.td-honest {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(148,163,184,0.15);
  font-size: 11px;
  color: rgba(148,163,184,0.85);
  line-height: 1.5;
  font-style: italic;
}

.td-personal-edge {
  background: rgba(30,41,59,0.35);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 12px;
  padding: 16px;
}
body.light-theme .td-personal-edge { background: rgba(248,250,252,0.7); }
.td-pe-empty { color: rgba(148,163,184,0.8); font-size: 13px; padding: 8px 0; }
.td-pe-insight {
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 12px;
  background: rgba(15,23,42,0.3);
  border-radius: 6px;
  margin-bottom: 6px;
}
body.light-theme .td-pe-insight { background: rgba(15,23,42,0.04); }
/* v365 end ─────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   v366 — ELITE signal banner + STAND ASIDE banner
   The consistent-wins UX: fewer signals, bigger UI weight on the rare
   ones that all systems agree on. Stand-aside banner overrides everything
   when conditions are unfavorable — prevents overtrading.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── ELITE banner ────────────────────────────────────────────────── */
.elite-banner {
  position: relative;
  background: linear-gradient(135deg, #b45309 0%, #ca8a04 40%, #f59e0b 100%);
  border: 1px solid rgba(251, 191, 36, 0.6);
  border-radius: 16px;
  padding: 18px 20px;
  margin: 0 0 14px;
  color: #1c1917;
  box-shadow: 0 4px 20px rgba(202, 138, 4, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
  overflow: hidden;
  animation: elite-shimmer 3s ease-in-out infinite;
}
@keyframes elite-shimmer {
  0%, 100% { box-shadow: 0 4px 20px rgba(202, 138, 4, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
  50%      { box-shadow: 0 6px 32px rgba(251, 191, 36, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
}

.elite-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: elite-sheen 4s linear infinite;
  pointer-events: none;
}
@keyframes elite-sheen {
  0% { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

.elite-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(28, 25, 23, 0.85);
  color: #fbbf24;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.elite-badge::before { content: "⭐"; font-size: 12px; }

.elite-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: #1c1917;
}
.elite-sub {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(28, 25, 23, 0.85);
  margin: 0 0 12px;
}
.elite-levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
  background: rgba(28, 25, 23, 0.15);
  border-radius: 8px;
}
.elite-level {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.elite-level-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(28, 25, 23, 0.65);
}
.elite-level-value {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1c1917;
}

.elite-gates {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.elite-gate-chip {
  padding: 3px 8px;
  background: rgba(28, 25, 23, 0.2);
  color: #1c1917;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.elite-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.elite-take-btn {
  padding: 10px 18px;
  background: #1c1917;
  color: #fbbf24;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.3);
  transition: transform 100ms, box-shadow 150ms;
}
.elite-take-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(28, 25, 23, 0.4), inset 0 0 0 1px rgba(251, 191, 36, 0.5);
}
.elite-copy-btn {
  padding: 10px 16px;
  background: transparent;
  color: #1c1917;
  border: 1px solid rgba(28, 25, 23, 0.4);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* ─── STAND ASIDE banner (when Conditions Score < 50) ─────────────── */
.stand-aside-banner {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(153, 27, 27, 0.08) 100%);
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-left: 4px solid #ef4444;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.stand-aside-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.stand-aside-body { flex: 1; min-width: 0; }
.stand-aside-title {
  font-size: 14px;
  font-weight: 800;
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 3px;
}
.stand-aside-msg {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.9);
  margin: 0;
}
body.light-theme .stand-aside-msg { color: #475569; }

/* Mobile stack */
@media (max-width: 640px) {
  .elite-actions { flex-direction: column; }
  .elite-take-btn, .elite-copy-btn { width: 100%; }
}
/* v366 end ─────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   v367 — Track Record card. Trustworthiness = showing your work.
   Displays honest per-tier WR, recent 20 outcomes as a strip, and
   recovery streak state. No cherry-picking. No hidden losses.
   ═══════════════════════════════════════════════════════════════════ */

.track-record-card {
  background: linear-gradient(180deg, rgba(30,41,59,0.55) 0%, rgba(15,23,42,0.4) 100%);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 0 14px;
}
body.light-theme .track-record-card {
  background: linear-gradient(180deg, rgba(248,250,252,0.9) 0%, rgba(241,245,249,0.7) 100%);
  border-color: rgba(0,0,0,0.08);
}

.tr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.tr-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(226,232,240,0.9);
  display: flex;
  align-items: center;
  gap: 6px;
}
body.light-theme .tr-title { color: #0f172a; }
.tr-title::before { content: "📊"; font-size: 13px; }

.tr-recovery {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tr-recovery.state-hot     { background: rgba(251,191,36,0.2); color: #fbbf24; border: 1px solid rgba(251,191,36,0.4); }
.tr-recovery.state-warming { background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.4); }
.tr-recovery.state-cold    { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.4); }
.tr-recovery.state-cooling { background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.4); }
.tr-recovery.state-normal  { background: rgba(148,163,184,0.15); color: rgba(148,163,184,0.9); border: 1px solid rgba(148,163,184,0.3); }

.tr-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.tr-tier {
  padding: 10px 12px;
  background: rgba(15,23,42,0.4);
  border: 1px solid rgba(148,163,184,0.12);
  border-radius: 10px;
}
body.light-theme .tr-tier { background: #fff; border-color: rgba(0,0,0,0.08); }
.tr-tier-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.7);
  margin-bottom: 3px;
}
.tr-tier-name.elite { color: #fbbf24; }
.tr-tier-name.premium { color: #10b981; }
.tr-tier-name.strong { color: #3b82f6; }
.tr-tier-wr {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: #f1f5f9;
}
body.light-theme .tr-tier-wr { color: #0f172a; }
.tr-tier-wr.hi { color: #10b981; }
.tr-tier-wr.lo { color: #ef4444; }
.tr-tier-count {
  font-size: 10px;
  color: rgba(148,163,184,0.65);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.tr-tier-empty {
  font-size: 11px;
  color: rgba(148,163,184,0.55);
  font-style: italic;
}

/* Recent-20 strip */
.tr-strip-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.7);
  margin-bottom: 5px;
}
.tr-strip {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.tr-dot {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: transform 100ms;
}
.tr-dot.won  { background: #10b981; }
.tr-dot.lost { background: #ef4444; }
.tr-dot.expired { background: rgba(148,163,184,0.4); }
.tr-dot:hover { transform: scale(1.2); border-color: rgba(255,255,255,0.4); }
.tr-strip-empty {
  padding: 8px 0;
  color: rgba(148,163,184,0.7);
  font-size: 12px;
  font-style: italic;
}

.tr-footnote {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(148,163,184,0.12);
  font-size: 11px;
  color: rgba(148,163,184,0.65);
  font-style: italic;
  line-height: 1.4;
}
/* v367 end ─────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   v372 — PRO signal banner. Higher priority than ELITE. Emerald-to-
   platinum gradient with animated key-level highlight.
   ═══════════════════════════════════════════════════════════════════ */
.pro-banner {
  position: relative;
  background: linear-gradient(135deg, #064e3b 0%, #10b981 50%, #a7f3d0 100%);
  border: 2px solid rgba(16, 185, 129, 0.7);
  border-radius: 18px;
  padding: 20px 22px;
  margin: 0 0 14px;
  color: #0f172a;
  box-shadow: 0 6px 28px rgba(16, 185, 129, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
  overflow: hidden;
  animation: pro-glow 2.5s ease-in-out infinite;
}
@keyframes pro-glow {
  0%, 100% { box-shadow: 0 6px 28px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
  50%      { box-shadow: 0 8px 40px rgba(16, 185, 129, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
}
.pro-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: rgba(15, 23, 42, 0.9);
  color: #6ee7b7;
  border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; margin-bottom: 12px;
}
.pro-badge::before { content: "🏆"; font-size: 13px; }
.pro-title {
  font-size: 24px; font-weight: 800; letter-spacing: -0.01em;
  margin: 0 0 8px; color: #0f172a;
}
.pro-sub {
  font-size: 14px; line-height: 1.5; color: rgba(15, 23, 42, 0.85);
  margin: 0 0 14px;
}
.pro-key-level {
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.15);
  border-left: 3px solid #0f172a;
  border-radius: 6px;
  font-size: 13px; margin-bottom: 12px;
  font-weight: 600;
}
.pro-key-level strong { font-variant-numeric: tabular-nums; }
.pro-levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px; margin-bottom: 12px;
  padding: 10px; background: rgba(15, 23, 42, 0.2); border-radius: 8px;
}
.pro-level { display: flex; flex-direction: column; gap: 2px; }
.pro-level-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(15, 23, 42, 0.65);
}
.pro-level-value {
  font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: #0f172a;
}
.pro-checks {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px;
}
.pro-check {
  padding: 3px 8px;
  background: rgba(15, 23, 42, 0.85);
  color: #a7f3d0;
  border-radius: 4px;
  font-size: 11px; font-weight: 600;
}
.pro-actions {
  display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap;
}
.pro-take-btn {
  padding: 12px 22px;
  background: #0f172a; color: #6ee7b7;
  border: none; border-radius: 10px;
  font-size: 14px; font-weight: 800; letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(110, 231, 183, 0.4);
  transition: transform 100ms, box-shadow 150ms;
}
.pro-take-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(110, 231, 183, 0.6);
}
.pro-copy-btn {
  padding: 11px 18px;
  background: transparent; color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.4);
  border-radius: 10px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
/* v372 end ─────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   v373 — CHEAT CODES cards. One card per firing technique. Each shows
   the technique name + documented WR range + source URLs. Different
   accent colors per technique.
   ═══════════════════════════════════════════════════════════════════ */
.cheat-codes-container { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.cheat-card {
  position: relative;
  background: linear-gradient(135deg, rgba(30,41,59,0.85) 0%, rgba(15,23,42,0.9) 100%);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-left: 4px solid #8b5cf6;
  border-radius: 12px;
  padding: 14px 16px;
  color: #f1f5f9;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
body.light-theme .cheat-card {
  background: linear-gradient(135deg, rgba(248,250,252,0.95) 0%, rgba(241,245,249,0.9) 100%);
  color: #0f172a;
}
.cheat-card.technique-ICT-SILVER-BULLET { border-left-color: #c0c0c0; }
.cheat-card.technique-LIQUIDITY-SWEEP-REVERSAL { border-left-color: #f59e0b; }
.cheat-card.technique-15-MIN-ORB { border-left-color: #3b82f6; }
.cheat-card.technique-WYCKOFF-SPRING, .cheat-card.technique-WYCKOFF-UPTHRUST { border-left-color: #10b981; }

.cheat-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.cheat-technique {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  background: rgba(139, 92, 246, 0.2);
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #c4b5fd;
}
.cheat-card.technique-ICT-SILVER-BULLET .cheat-technique { background: rgba(192,192,192,0.2); color: #e5e7eb; }
.cheat-card.technique-LIQUIDITY-SWEEP-REVERSAL .cheat-technique { background: rgba(245,158,11,0.2); color: #fbbf24; }
.cheat-card.technique-15-MIN-ORB .cheat-technique { background: rgba(59,130,246,0.2); color: #93c5fd; }
.cheat-card.technique-WYCKOFF-SPRING .cheat-technique,
.cheat-card.technique-WYCKOFF-UPTHRUST .cheat-technique { background: rgba(16,185,129,0.2); color: #6ee7b7; }
.cheat-technique::before { content: "🎯"; font-size: 12px; }
.cheat-wr {
  font-size: 11px; font-weight: 600;
  color: rgba(148,163,184,0.85);
  font-variant-numeric: tabular-nums;
}
body.light-theme .cheat-wr { color: #64748b; }
.cheat-wr strong { color: #10b981; font-weight: 700; }

.cheat-title {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 4px;
  font-variant-numeric: tabular-nums;
}
.cheat-title .cheat-dir-buy { color: #10b981; }
.cheat-title .cheat-dir-sell { color: #ef4444; }
.cheat-reasoning {
  font-size: 12px; line-height: 1.4;
  color: rgba(203,213,225,0.85);
  margin: 0 0 10px;
}
body.light-theme .cheat-reasoning { color: #475569; }
.cheat-levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 6px; margin-bottom: 10px;
  font-size: 11px;
}
.cheat-level-tile {
  padding: 5px 8px;
  background: rgba(15,23,42,0.4);
  border-radius: 5px;
  display: flex; flex-direction: column; gap: 1px;
}
body.light-theme .cheat-level-tile { background: rgba(15,23,42,0.05); }
.cheat-level-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(148,163,184,0.7);
}
.cheat-level-val {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cheat-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cheat-take-btn {
  padding: 7px 14px;
  background: #4f46e5; color: #fff;
  border: none; border-radius: 6px;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
}
.cheat-source {
  padding: 7px 12px;
  background: transparent; color: #93c5fd;
  border: 1px solid rgba(147, 197, 253, 0.3);
  border-radius: 6px;
  font-size: 11px; font-weight: 500;
  text-decoration: none;
  display: inline-flex; align-items: center;
}
.cheat-source:hover { background: rgba(147, 197, 253, 0.1); }
/* v373 end ─────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   v374 — Collapsed-by-default home cards
   Every home-page card starts collapsed showing only its header. User
   taps the header to expand. State persists per-card in localStorage.
   ═══════════════════════════════════════════════════════════════════ */

/* Wraps any home-tab card. Default = collapsed showing only header. */
[data-collapsible="true"] {
  position: relative;
  cursor: pointer;
}
[data-collapsible="true"]::after {
  content: "▼";
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 11px;
  color: rgba(148, 163, 184, 0.7);
  transition: transform 200ms;
  pointer-events: none;
}
[data-collapsible="true"].collapsible-open::after {
  transform: rotate(180deg);
}

/* Collapsed state: hide body content, show only ~60px header */
[data-collapsible="true"]:not(.collapsible-open) > *:not(.collapsible-header) {
  display: none !important;
}
[data-collapsible="true"]:not(.collapsible-open) {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Header row when collapsed — must be first child, always visible */
.collapsible-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding-right: 48px;   /* leave room for the v427 explicit chevron */
  position: relative;
  cursor: pointer;
  min-height: 44px;      /* v427 — Apple HIG minimum touch target height */
}
/* v427 — Explicit chevron button. Real 44×44 tap target, wins hit-tests. */
.cc-chevron {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  border: 0;
  background: rgba(148, 163, 184, 0.10);
  color: rgba(226, 232, 240, 0.95);
  border-radius: 12px;
  cursor: pointer;
  transition: background 120ms ease, transform 180ms ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  z-index: 3;
}
.cc-chevron:hover, .cc-chevron:active {
  background: rgba(148, 163, 184, 0.22);
}
.cc-chevron:active { transform: translateY(-50%) scale(0.94); }
body.light-theme .cc-chevron {
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
}
body.light-theme .cc-chevron:hover, body.light-theme .cc-chevron:active {
  background: rgba(15, 23, 42, 0.12);
}

/* v427 — SCANNER STATUS PILL — persistent, always visible */
.scanner-status-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 8px 0 12px 0;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.65), rgba(15, 23, 42, 0.55));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.95);
  letter-spacing: 0.01em;
  transition: border-color 300ms ease, background 300ms ease;
}
.scanner-status-pill .ssp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.6);
  animation: ssp-pulse 1.6s ease-out infinite;
  flex-shrink: 0;
}
@keyframes ssp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}
.scanner-status-pill .ssp-text {
  flex: 1;
  min-width: 0;
}
.scanner-status-pill .ssp-badge {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(34, 211, 238, 0.15);
  color: #67e8f9;
}
.scanner-status-pill .ssp-badge:empty { display: none; }
/* State-driven colours */
.scanner-status-pill[data-state="firing"] {
  border-color: rgba(34, 197, 94, 0.45);
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.55), rgba(15, 23, 42, 0.55));
}
.scanner-status-pill[data-state="firing"] .ssp-dot { background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: ssp-pulse-green 1.4s ease-out infinite; }
@keyframes ssp-pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.scanner-status-pill[data-state="firing"] .ssp-badge { background: rgba(34, 197, 94, 0.2); color: #86efac; }
.scanner-status-pill[data-state="validating"] { border-color: rgba(251, 191, 36, 0.45); }
.scanner-status-pill[data-state="validating"] .ssp-dot { background: #fbbf24; }
.scanner-status-pill[data-state="quiet-session"], .scanner-status-pill[data-state="weekend"] {
  border-color: rgba(148, 163, 184, 0.28);
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.4));
}
.scanner-status-pill[data-state="quiet-session"] .ssp-dot,
.scanner-status-pill[data-state="weekend"] .ssp-dot { background: #94a3b8; }
body.light-theme .scanner-status-pill {
  background: linear-gradient(135deg, rgba(241, 245, 249, 0.9), rgba(226, 232, 240, 0.75));
  border-color: rgba(15, 23, 42, 0.1);
  color: #0f172a;
}
body.light-theme .scanner-status-pill .ssp-badge { background: rgba(34, 211, 238, 0.15); color: #0e7490; }

/* v427 — Trust card readiness gate rows */
.tb-gates {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-top: 8px;
}
.tb-gate {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.08);
  font-size: 12px;
}
.tb-gate-check {
  color: #22c55e;
  font-weight: 800;
  width: 16px;
}
.tb-gate-name {
  flex: 1;
  color: rgba(226, 232, 240, 0.9);
}
.tb-gate-pts {
  font-variant-numeric: tabular-nums;
  color: rgba(148, 163, 184, 0.85);
  font-weight: 600;
}
.tb-perf {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.10);
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.tb-perf-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(148, 163, 184, 0.85); }
.tb-perf-val { font-size: 18px; font-weight: 700; color: #93c5fd; margin-left: 8px; }
.tb-perf-note { font-size: 11px; color: rgba(148, 163, 184, 0.75); margin-top: 4px; }
.tb-perf-building .tb-perf-val { color: #fbbf24; font-size: 13px; }
body.light-theme .tb-gate { background: rgba(34, 197, 94, 0.10); }
body.light-theme .tb-gate-name { color: #0f172a; }
body.light-theme .tb-perf-note { color: #64748b; }
.collapsible-header .collapsible-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(148, 163, 184, 0.15);
  color: rgba(226, 232, 240, 0.9);
}
body.light-theme .collapsible-header .collapsible-badge {
  background: rgba(15, 23, 42, 0.08);
  color: #334155;
}
.collapsible-header .collapsible-preview {
  color: rgba(148, 163, 184, 0.85);
  font-weight: 500;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Special-case card header colors match card accent */
.conditions-card[data-collapsible="true"] .collapsible-badge { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
.track-record-card[data-collapsible="true"] .collapsible-badge { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; }
.elite-banner[data-collapsible="true"] .collapsible-badge { background: rgba(28, 25, 23, 0.85); color: #fbbf24; }
.pro-banner[data-collapsible="true"] .collapsible-badge { background: rgba(15, 23, 42, 0.9); color: #6ee7b7; }
.cheat-card[data-collapsible="true"] .collapsible-badge { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; }
.stand-aside-banner[data-collapsible="true"] .collapsible-badge { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }

/* Toggle-all bar (optional master control) */
.collapse-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 12px;
  margin-bottom: 10px;
  font-size: 12px;
  color: rgba(148, 163, 184, 0.8);
}
.collapse-bar-btn {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: rgba(203, 213, 225, 0.9);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms;
}
.collapse-bar-btn:hover { background: rgba(148, 163, 184, 0.08); }
body.light-theme .collapse-bar-btn { color: #475569; border-color: rgba(0,0,0,0.15); }
/* v374 end ─────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   v375 — ALGO READ card. Shows institutional/HFT footprints per pair.
   ═══════════════════════════════════════════════════════════════════ */
.algo-read-card {
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.15) 0%, rgba(15, 23, 42, 0.6) 100%);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 0 14px;
  color: #f1f5f9;
}
body.light-theme .algo-read-card {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.06) 0%, rgba(248, 250, 252, 0.9) 100%);
  color: #0f172a;
}
.algo-window-row {
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.45);
  border-left: 3px solid #a855f7;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.4;
}
.algo-intensity-peak    { border-left-color: #ef4444; }
.algo-intensity-high    { border-left-color: #f59e0b; }
.algo-intensity-normal  { border-left-color: #94a3b8; }
.algo-intensity-low     { border-left-color: #64748b; }

.algo-market-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.algo-summary-tile {
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.4);
  border-radius: 8px;
  text-align: center;
}
body.light-theme .algo-summary-tile { background: rgba(15, 23, 42, 0.05); }
.algo-summary-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(148, 163, 184, 0.7);
}
.algo-summary-value {
  font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: #f1f5f9;
}
body.light-theme .algo-summary-value { color: #0f172a; }
.algo-summary-value.buy  { color: #10b981; }
.algo-summary-value.sell { color: #ef4444; }

.algo-per-pair-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}
.algo-pair-row {
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.4);
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.5;
  border-left: 3px solid transparent;
}
body.light-theme .algo-pair-row { background: rgba(15, 23, 42, 0.04); }
.algo-pair-row.bias-BUY  { border-left-color: #10b981; }
.algo-pair-row.bias-SELL { border-left-color: #ef4444; }
.algo-pair-row.bias-NEUTRAL { border-left-color: #64748b; }
.algo-pair-name {
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}
.algo-pair-bias {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  margin-left: 6px;
}
.algo-pair-bias.BUY  { background: rgba(16, 185, 129, 0.2); color: #10b981; }
.algo-pair-bias.SELL { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.algo-pair-bias.NEUTRAL { background: rgba(100, 116, 139, 0.2); color: #94a3b8; }
.algo-signature {
  color: rgba(203, 213, 225, 0.85);
  font-size: 11px;
  margin-top: 3px;
}
body.light-theme .algo-signature { color: #475569; }
/* v375 end ─────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   v376 — "Now watching" badge + cross-tab pair sync visual
   ═══════════════════════════════════════════════════════════════════ */
.lc-now-watching-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  margin-top: 8px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.12) 100%);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(203, 213, 225, 0.95);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  animation: nowWatchingPulse 3s ease-in-out infinite;
}
body.light-theme .lc-now-watching-badge {
  color: #1e293b;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.06) 100%);
  border-color: rgba(59, 130, 246, 0.25);
}
.lc-now-watching-badge strong {
  color: #60a5fa;
  font-weight: 800;
  padding-left: 4px;
}
body.light-theme .lc-now-watching-badge strong { color: #2563eb; }
@keyframes nowWatchingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
}
/* v376 end ─────────────────────────────────────────────────────────── */

/* v377 — Manual Rescan button */
.signals-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.signals-rescan-btn {
  padding: 7px 14px;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #93c5fd;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 150ms, transform 100ms;
  flex-shrink: 0;
}
body.light-theme .signals-rescan-btn { color: #2563eb; background: rgba(59, 130, 246, 0.05); }
.signals-rescan-btn:hover {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0.12) 100%);
}
.signals-rescan-btn:active { transform: scale(0.97); }
.signals-rescan-btn:disabled { opacity: 0.6; cursor: wait; }
.signals-rescan-btn.spinning::before {
  content: "🔄 ";
  display: inline-block;
  animation: rescan-spin 1s linear infinite;
}
@keyframes rescan-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
/* v377 end ─────────────────────────────────────────────────────────── */

/* v379 — SETUP RADAR card ────────────────────────────────────────── */
.setup-radar-card {
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, rgba(59, 130, 246, 0.05) 100%);
  border: 1px solid rgba(16, 185, 129, 0.22);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}
body.light-theme .setup-radar-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(59, 130, 246, 0.04) 100%);
  border-color: rgba(16, 185, 129, 0.18);
}
.sr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sr-title { font-weight: 800; font-size: 14px; letter-spacing: 0.02em; color: #34d399; }
body.light-theme .sr-title { color: #059669; }
.sr-sub { font-weight: 500; font-size: 12px; opacity: 0.75; margin-left: 4px; }
.sr-badge {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.14);
  color: #a7f3d0;
  border: 1px solid rgba(16, 185, 129, 0.28);
  letter-spacing: 0.02em;
}
body.light-theme .sr-badge { color: #047857; background: rgba(16, 185, 129, 0.08); }
.sr-list { display: flex; flex-direction: column; gap: 8px; }
.sr-row {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid rgba(148, 163, 184, 0.4);
  cursor: pointer;
  transition: background 120ms, transform 100ms;
}
body.light-theme .sr-row { background: rgba(15, 23, 42, 0.03); }
.sr-row.buy  { border-left-color: #22c55e; }
.sr-row.sell { border-left-color: #ef4444; }
.sr-row:hover { background: rgba(255, 255, 255, 0.06); }
.sr-row:active { transform: scale(0.995); }
.sr-row-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; font-weight: 700;
}
.sr-pair { font-weight: 900; letter-spacing: 0.02em; }
.sr-dir { padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; }
.sr-dir.buy  { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
.sr-dir.sell { background: rgba(239, 68, 68, 0.18); color: #f87171; }
body.light-theme .sr-dir.buy  { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
body.light-theme .sr-dir.sell { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.sr-conf { font-size: 12px; color: #94a3b8; margin-left: auto; }
.sr-strength { font-size: 11px; opacity: 0.75; font-weight: 600; }
.sr-row-body { margin-top: 6px; font-size: 12px; line-height: 1.5; opacity: 0.9; }
.sr-factors { font-weight: 600; margin-bottom: 3px; }
.sr-levels { opacity: 0.75; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.sr-row-foot { margin-top: 6px; }
.sr-gate {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  letter-spacing: 0.03em;
}
.sr-gate.passed { background: rgba(34, 197, 94, 0.18); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.35); }
.sr-gate.held   { background: rgba(251, 191, 36, 0.14); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.32); cursor: help; }
body.light-theme .sr-gate.passed { color: #15803d; background: rgba(34, 197, 94, 0.10); }
body.light-theme .sr-gate.held   { color: #b45309; background: rgba(251, 191, 36, 0.10); }
.sr-empty { padding: 12px; font-size: 13px; opacity: 0.75; text-align: center; }
.sr-note { margin-top: 10px; font-size: 11px; opacity: 0.6; line-height: 1.5; }
/* v379 end ─────────────────────────────────────────────────────────── */

/* v380 — TRUST BADGE card ───────────────────────────────────────── */
.trust-badge-card {
  margin: 12px 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}
body.light-theme .trust-badge-card { background: rgba(255, 255, 255, 0.85); border-color: rgba(15, 23, 42, 0.08); }
.tb-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  transition: background 150ms;
}
.tb-head:hover { background: rgba(255,255,255,0.03); }
body.light-theme .tb-head:hover { background: rgba(15,23,42,0.02); }
.tb-title { font-weight: 800; font-size: 14px; letter-spacing: 0.02em; display: flex; align-items: center; gap: 8px; }
.tb-icon { font-size: 18px; }
.tb-score-wrap { display: flex; align-items: baseline; gap: 2px; margin-left: auto; }
.tb-score { font-size: 32px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tb-outof { font-size: 12px; opacity: 0.55; font-weight: 700; }
.tb-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: 999px;
}
.tb-head.tb-very-high  { background: linear-gradient(135deg, rgba(16,185,129,0.14) 0%, rgba(59,130,246,0.10) 100%); }
.tb-head.tb-very-high .tb-score { color: #34d399; }
.tb-head.tb-very-high .tb-label { background: rgba(16,185,129,0.25); color: #a7f3d0; }
.tb-head.tb-high       { background: linear-gradient(135deg, rgba(59,130,246,0.12) 0%, rgba(16,185,129,0.08) 100%); }
.tb-head.tb-high .tb-score { color: #60a5fa; }
.tb-head.tb-high .tb-label { background: rgba(59,130,246,0.25); color: #bfdbfe; }
.tb-head.tb-mod        { background: linear-gradient(135deg, rgba(251,191,36,0.10) 0%, rgba(148,163,184,0.05) 100%); }
.tb-head.tb-mod .tb-score { color: #fbbf24; }
.tb-head.tb-mod .tb-label { background: rgba(251,191,36,0.22); color: #fde68a; }
/* v406 — was red gradient. Softened to amber so nothing screams RED on the
   homepage. Same info, calmer visual, no "big red line" tell. */
.tb-head.tb-low        { background: linear-gradient(135deg, rgba(251,191,36,0.10) 0%, rgba(148,163,184,0.05) 100%); }
.tb-head.tb-low .tb-score { color: #fbbf24; }
.tb-head.tb-low .tb-label { background: rgba(251,191,36,0.22); color: #fde68a; }
.tb-head.tb-very-low   { background: linear-gradient(135deg, rgba(251,191,36,0.10) 0%, rgba(148,163,184,0.05) 100%); }
.tb-head.tb-very-low .tb-score { color: #fbbf24; }
.tb-head.tb-very-low .tb-label { background: rgba(251,191,36,0.22); color: #fde68a; }
body.light-theme .tb-head.tb-very-high .tb-label { color: #047857; }
body.light-theme .tb-head.tb-high .tb-label      { color: #1d4ed8; }
body.light-theme .tb-head.tb-mod .tb-label       { color: #92400e; }
body.light-theme .tb-head.tb-low .tb-label       { color: #9a3412; }
body.light-theme .tb-head.tb-very-low .tb-label  { color: #991b1b; }
.tb-toggle {
  background: transparent; border: none; color: inherit;
  font-size: 16px; cursor: pointer; opacity: 0.6; padding: 4px 8px;
  transition: opacity 150ms;
}
.tb-toggle:hover { opacity: 1; }
.tb-body {
  max-height: 0; overflow: hidden;
  transition: max-height 300ms ease, padding 200ms ease;
  padding: 0 14px;
}
.trust-badge-card.tb-open .tb-body { max-height: 600px; padding: 4px 14px 14px; }
.tb-interpretation { font-size: 13px; opacity: 0.85; line-height: 1.5; margin: 4px 0 10px; }
.tb-comps { display: flex; flex-direction: column; gap: 8px; }
.tb-comp {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(148,163,184,0.15);
}
.tb-comp:last-child { border-bottom: none; }
.tb-comp-label { font-size: 12px; opacity: 0.9; font-weight: 600; }
.tb-comp-score { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tb-mini-bar {
  grid-column: 1 / -1;
  height: 4px; background: rgba(148,163,184,0.15); border-radius: 999px; overflow: hidden;
}
.tb-mini-fill {
  height: 100%;
  background: linear-gradient(90deg, #f87171 0%, #fbbf24 40%, #34d399 75%);
  border-radius: 999px;
  transition: width 400ms;
}
.tb-empty { grid-column: 1 / -1; font-size: 11px; opacity: 0.5; }
/* v380 end ─────────────────────────────────────────────────────────── */

/* v390 — New signal toast ─────────────────────────────────────── */
.v390-toast {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translate(-50%, -140%);
  z-index: 2000;
  max-width: 92vw;
  min-width: 260px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.95) 0%, rgba(59, 130, 246, 0.95) 100%);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  transition: transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms;
  font-family: inherit;
}
.v390-toast.v390-show {
  transform: translate(-50%, 0);
  opacity: 1;
  animation: v390-pulse 1.8s ease-in-out infinite;
}
.v390-toast.v390-hide {
  transform: translate(-50%, -140%);
  opacity: 0;
  animation: none;
}
.v390-toast-head {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.v390-toast-body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}
.v390-toast-sig {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  letter-spacing: 0.02em;
}
.v390-toast-sig.buy  { box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.5); }
.v390-toast-sig.sell { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.5); }
.v390-toast-more {
  opacity: 0.75;
  font-size: 11px;
  align-self: center;
}
@keyframes v390-pulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 0 0 rgba(52, 211, 153, 0.4); }
  50%      { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 0 12px rgba(52, 211, 153, 0);   }
}
/* v390 end ─────────────────────────────────────────────────────── */

/* v396 — Stand-aside dismiss button */
.stand-aside-banner { position: relative; }
.stand-aside-dismiss {
  position: absolute;
  top: 6px; right: 8px;
  width: 26px; height: 26px;
  padding: 0; line-height: 1;
  background: transparent;
  border: none;
  color: rgba(239, 68, 68, 0.7);
  font-size: 22px; font-weight: 700;
  cursor: pointer;
  border-radius: 6px;
  transition: background 120ms, color 120ms;
}
.stand-aside-dismiss:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.stand-aside-dismiss:active { transform: scale(0.94); }
/* v396 end ─────────────────────────────────────────────────────── */

/* v405 — Ensure toast never blocks clicks when hidden; only the toast
   itself is clickable (via cursor:pointer), never a full-screen overlay */
.v390-toast.v390-hide,
.v390-toast:not(.v390-show) { pointer-events: none; }

/* v406 — Apple-smooth card appearance. Cards fade in gently instead of
   popping. Any [hidden] card that becomes visible eases in over 250ms. */
#signals [data-collapsible="true"],
#signals #trust-badge-card,
#signals #setup-radar-card,
#signals #algo-read-card,
#signals #conditions-card,
#signals #track-record-card,
#signals #elite-banner,
#signals #pro-banner,
#signals #cheat-codes-container,
#signals #stand-aside-banner {
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}
#signals [hidden] { display: none !important; }
#signals :not([hidden]) { opacity: 1; }

/* Card content updates should never flash — smooth height transitions */
.collapsible-header { transition: opacity 180ms ease-out; }

/* v410 — Platform responsiveness pass */

/* Fast taps: remove the 300ms delay on all interactive elements */
button, a, .tab, [role="button"], [data-signal-pair], [data-cc-take],
.signals-rescan-btn, .stand-aside-dismiss, .close-btn, input[type="range"],
.collapsible-header, [data-collapsible="true"] {
  touch-action: manipulation;
}

/* iOS safe-area for notch/dynamic island (viewport-fit=cover requires this) */
body {
  padding-top: env(safe-area-inset-top, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Kill the iOS grey-flash on tap globally (specific elements can re-enable) */
html { -webkit-tap-highlight-color: transparent; }

/* Native-feeling active state for tappable cards */
button:active, .tab:active, [role="button"]:active {
  transform: scale(0.97);
  transition: transform 80ms ease-out;
}

/* Smoother scroll on iOS (momentum) */
main, .modal-content, .tab-content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* v410 end */

/* v416 — Live-watch pulse: eyes-on-market indicator */
.live-watch-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.30);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #6ee7b7;
  cursor: help;
  transition: background 200ms;
  flex-shrink: 0;
}
body.light-theme .live-watch-pulse { color: #047857; background: rgba(34,197,94,0.06); }
.live-watch-pulse .lwp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: lwp-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.live-watch-pulse.off-hours {
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.28);
  color: #fbbf24;
}
.live-watch-pulse.off-hours .lwp-dot { background: #fbbf24; animation-duration: 4s; }
@keyframes lwp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);   }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);     }
}
/* v416 end */

/* v423 — Premium visual polish pass */

/* Retina-sharp icons: force SVG rendering hints */
svg, img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
svg { shape-rendering: geometricPrecision; }

/* Refined typography scale (Bloomberg / Linear / Stripe grade) */
body {
  font-feature-settings: 'ss01', 'cv11', 'cv01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}

/* Card container refinement — subtle glassmorphism + finer borders */
#signals [data-collapsible="true"] {
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  -webkit-backdrop-filter: saturate(1.2);
  backdrop-filter: saturate(1.2);
  -webkit-backdrop-filter: saturate(1.2);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset,
              0 8px 24px rgba(0,0,0,0.20);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 200ms ease,
              opacity 200ms ease;
}
#signals [data-collapsible="true"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 12px 28px rgba(0,0,0,0.28);
}
body.light-theme #signals [data-collapsible="true"] {
  border-color: rgba(15, 23, 42, 0.06);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.06);
}

/* Signal cards — professional spacing + refined dividers */
.card { transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.card:active { transform: scale(0.985); }

/* Tabs — cleaner underline for active state */
.tab.active { position: relative; }
.tab.active::after {
  content: "";
  position: absolute;
  left: 20%; right: 20%; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #0a84ff, #30d158);
}

/* Live-watch pulse — softer green */
.live-watch-pulse .lwp-dot { box-shadow: 0 0 8px rgba(34,197,94,0.4); }

/* v423 end */

/* ── v433 — per-signal quality grade + honest warnings ──────────────────
   Replaces the v432 behaviour of silently dropping setups. Everything the
   scanner produced is shown; anything questionable carries its reason so
   the user can judge it rather than having the decision made for them. */
.v433-quality {
  margin: 10px 0 4px;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(148, 163, 184, 0.05);
}
.v433-grade-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
}
.v433-grade-chip {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-weight: 800; font-size: 12px;
  color: #0b1220;
  flex-shrink: 0;
}
.v433-grade-score { color: rgba(226,232,240,0.85); font-variant-numeric: tabular-nums; }
.v433-rr {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: rgba(148,163,184,0.9);
  font-size: 11px;
}
.v433-warn-list {
  margin: 7px 0 0; padding-left: 16px;
  font-size: 11px; line-height: 1.5;
  color: rgba(251, 191, 36, 0.92);
}
.v433-warn-list li { margin: 2px 0; }
.v433-clean { margin-top: 5px; font-size: 11px; color: rgba(52, 211, 153, 0.9); }

.v433-grade-A .v433-grade-chip { background: #34d399; }
.v433-grade-B .v433-grade-chip { background: #60a5fa; }
.v433-grade-C .v433-grade-chip { background: #fbbf24; }
.v433-grade-D .v433-grade-chip { background: #f87171; }
.v433-grade-A { border-color: rgba(52, 211, 153, 0.30); background: rgba(52, 211, 153, 0.06); }
.v433-grade-C { border-color: rgba(251, 191, 36, 0.30); background: rgba(251, 191, 36, 0.06); }
.v433-grade-D { border-color: rgba(248, 113, 113, 0.30); background: rgba(248, 113, 113, 0.06); }

body.light-theme .v433-grade-score { color: #0f172a; }
body.light-theme .v433-warn-list { color: #b45309; }

/* v437 — agreement vs calibrated probability, shown as two distinct things.
   The raw score was previously rendered as if it were a win probability;
   measured, it is not (4 points of real spread across a 40-point range). */
.v437-calib {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(148,163,184,0.14);
  font-size: 11px;
}
.v437-agree { color: rgba(226,232,240,0.9); font-variant-numeric: tabular-nums; }
.v437-sub   { color: rgba(148,163,184,0.75); }
.v437-prob  {
  color: #93c5fd;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.light-theme .v437-agree { color: #0f172a; }
body.light-theme .v437-sub   { color: #64748b; }
body.light-theme .v437-prob  { color: #1d4ed8; }

/* v440 — live-price reconciliation strip.
   With Functions quota-dead the snapshot can be hours old; this shows what
   the market is doing NOW versus the entry the signal was built on, so a
   level the market has already left cannot read as actionable. */
.v440-live {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px; padding: 6px 9px;
  border-radius: 8px; font-size: 11px;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(148,163,184,0.06);
}
.v440-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; flex-shrink: 0;
  animation: v440pulse 2s ease-in-out infinite; }
@keyframes v440pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.v440-px    { font-variant-numeric: tabular-nums; color: rgba(226,232,240,0.92); }
.v440-state { margin-left: auto; color: rgba(148,163,184,0.9); text-align: right; }

.v440-near-entry  { border-color: rgba(52,211,153,0.30); background: rgba(52,211,153,0.07); }
.v440-drifted     { border-color: rgba(251,191,36,0.32); background: rgba(251,191,36,0.07); }
.v440-drifted    .v440-dot { background: #fbbf24; }
.v440-drifted    .v440-state { color: #fbbf24; }
.v440-entry-gone  { border-color: rgba(248,113,113,0.32); background: rgba(248,113,113,0.07); }
.v440-entry-gone .v440-dot { background: #f87171; }
.v440-entry-gone .v440-state { color: #f87171; }
.v440-invalidated { border-color: rgba(248,113,113,0.55); background: rgba(248,113,113,0.14); }
.v440-invalidated .v440-dot { background: #ef4444; animation: none; }
.v440-invalidated .v440-state { color: #fca5a5; font-weight: 700; }

body.light-theme .v440-px { color: #0f172a; }
body.light-theme .v440-state { color: #475569; }

/* v442 — trade-management plan on every signal card.
   Measured: without banking a third at TP1 and moving to break-even, 42.7%
   of trades that reached TP1 came back and finished as losses. The plan is
   shown on the card because the app cannot execute it for you. */
.v442-plan {
  margin-top: 10px; padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(52,211,153,0.28);
  background: rgba(52,211,153,0.06);
}
.v442-plan-title {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #34d399; margin-bottom: 6px;
}
.v442-steps {
  margin: 0; padding-left: 18px;
  font-size: 12px; line-height: 1.6; color: rgba(226,232,240,0.92);
}
.v442-steps li { margin: 3px 0; }
.v442-steps strong { color: #fff; }
.v442-why {
  margin-top: 7px; padding-top: 7px;
  border-top: 1px solid rgba(148,163,184,0.16);
  font-size: 11px; line-height: 1.5; color: rgba(148,163,184,0.9);
}
body.light-theme .v442-steps { color: #0f172a; }
body.light-theme .v442-steps strong { color: #000; }
body.light-theme .v442-why { color: #475569; }

/* ── v443 — STOP THE PAGE JUMPING ON REFRESH ────────────────────────────
   Measured CLS during a normal refresh cycle was 35.7 (anything above 0.25
   is rated poor). Individual elements were moving over 1300px. The cause is
   structural, not cosmetic: the shadow feed and brain cards are created by
   JS and inserted ABOVE the signal grid, and each re-render replaces their
   innerHTML. Every size change shoved the entire page below them.

   Three fixes, in order of how much they matter:

   1. Reserve height up front. A collapsed card is ~70px; declaring that as
      min-height means the slot exists before content arrives, so filling it
      changes nothing below.
   2. contain: layout. A height change inside a card can no longer trigger
      reflow of its siblings.
   3. Stable min-height on the grid itself, so going from 3 cards to 5 does
      not drag the footer around.                                          */

#shadow-feed-card,
#brain-status-card,
#trust-badge-card,
#conditions-card,
#algo-read-card,
#setup-radar-card {
  min-height: 70px;          /* the collapsed height — reserved from paint */
  contain: layout;           /* internal changes cannot reflow siblings    */
  content-visibility: auto;
  contain-intrinsic-size: auto 70px;
}

/* Expanded cards must be free to size naturally — the reservation only
   applies while collapsed, which is the default state on every load. */
#shadow-feed-card:has(details[open]),
[data-collapsible="true"].collapsible-open {
  min-height: 0;
  contain: none;
  content-visibility: visible;
}

/* The grid holds its own vertical space so card-count changes don't move
   the disclaimer and footer beneath it. */
#signals-grid {
  min-height: 320px;
  contain: layout;
}

/* The status line reflows constantly as text length changes; fixing its
   height stops a one-line/two-line flip from nudging the whole grid. */
#signals-status {
  min-height: 44px;
  display: block;
}

/* Skeletons must match the real card height, otherwise swapping a skeleton
   for a card is itself a layout shift. */
.skeleton-card { min-height: 527px; }

/* Respect users who ask for reduced motion — no pulses, no transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* v446 — the honesty note under the agreement bar. The number above it was
   presented as a confidence percentage for a long time; measurement showed
   it does not predict outcome, so the card says so where it is read. */
.conf-truth {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 2px solid var(--muted);
  border-radius: 0 6px 6px 0;
  background: rgba(128,128,128,0.07);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}
.conf-truth strong { color: var(--text); }

/* v451 — connection state indicator. Replaces the "network error" noise with
   one honest word: the network is fine, the data is current, it is the live
   API that is down. Standby is amber rather than red because it is a working
   state, not a failure — signals are still fresh. */
.v451-conn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: help;
}
.v451-conn::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.v451-live {
  background: rgba(48,209,88,0.14);
  color: var(--buy);
  border: 1px solid rgba(48,209,88,0.35);
}
.v451-standby {
  background: rgba(255,179,64,0.14);
  color: #ffb340;
  border: 1px solid rgba(255,179,64,0.35);
}

/* v453 — the rescue panel. Only ever visible if the app has drawn nothing,
   which should be never; it exists so that "never" is not load-bearing. */
.v453-rescue {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 28px 22px;
  background: var(--bg, #0b0b0f);
  color: var(--text, #f2f2f7);
  font-size: 15px;
  line-height: 1.6;
  overflow-y: auto;
}
.v453-rescue h2 { font-size: 19px; font-weight: 700; margin: 0; }
.v453-rescue p { margin: 0; max-width: 46em; }
.v453-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.v453-rescue button {
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid var(--border, #2c2c34);
  background: var(--panel, #16161c);
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.v453-rescue button:first-child {
  background: var(--accent, #0a84ff);
  border-color: transparent;
  color: #fff;
}
.v453-small { font-size: 12.5px; color: var(--muted, #8e8e93); }

/* v460 — searchable reference in the Learning tab. */
.ref-wrap { margin-bottom: 18px; }
.ref-head h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.ref-head p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; }
.ref-search {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  /* 16px keeps iOS from zooming the page when the field is focused. */
  font-size: 16px;
  margin-bottom: 10px;
}
.ref-search:focus { outline: none; border-color: var(--accent); }
.ref-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ref-chip {
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel);
  color: var(--muted); font-size: 11.5px; font-weight: 600;
}
.ref-chip.active { background: var(--accent); border-color: transparent; color: #fff; }
.ref-count { font-size: 11.5px; margin-bottom: 8px; }
.ref-list { display: flex; flex-direction: column; gap: 8px; }
.ref-item {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; contain: layout;
}
.ref-item[hidden] { display: none; }
.ref-area {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.ref-name { font-size: 14.5px; font-weight: 700; margin-bottom: 5px; }
.ref-what { font-size: 13px; line-height: 1.6; }
.ref-use { margin-top: 7px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.ref-use strong { color: var(--text); }
/* Live figures only get a frame once they have actually resolved, so an
   unavailable value leaves no empty box behind. */
.ref-live { display: none; }
.ref-live.on {
  display: block; margin-top: 8px; padding: 7px 10px;
  border-left: 2px solid var(--accent); border-radius: 0 6px 6px 0;
  background: rgba(10,132,255,0.07);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.ref-empty { padding: 16px; text-align: center; font-size: 13px; }

/* v461 — provenance line under money figures. People size real trades off
   these numbers, so where the rate came from and how old it is stays visible. */
.fx-line { margin-top: 8px; }
.fx-note {
  display: inline-block; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.fx-bad { color: #ffb340; }