/* ASCENDOJO STRATEGY LAB — reskin of kr1ptx-tools/Backtesting onto the
   shell's own glass/Dojo tokens (tokens.css, app.css), same approach as
   battle.css / chat.css / oracle.css: layout & behavior only, all
   color/radius/type/motion come from shared design tokens. --dojo-accent
   resolves to the Trading Dojo's orange, which happens to match the
   original tool's own primary orange (#ff6b00) almost exactly. */

.sl-shell {
  max-width: 720px;
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Section card ── */
.sl-sec {
  padding: 20px;
}
.sl-sec-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shell-ink-faint);
  margin-bottom: 14px;
}
.sl-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dojo-accent);
  box-shadow: 0 0 6px var(--dojo-accent);
  flex-shrink: 0;
}
.sl-dot--r { background: var(--state-danger); box-shadow: 0 0 6px var(--state-danger); }
.sl-dot--g { background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green); }
.sl-dot--c { background: var(--shell-metal-300); box-shadow: 0 0 6px var(--shell-metal-300); }
.sl-muted {
  margin-left: auto;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--shell-ink-faint);
  text-transform: none;
}

/* ── Strategy name ── */
.sl-name-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--shell-border-strong);
  padding: 6px 0;
  color: var(--shell-ink);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.2s ease;
}
.sl-name-input:focus { border-bottom-color: var(--dojo-accent); }
.sl-name-input::placeholder { color: var(--shell-ink-faint); }

/* ── Presets ── */
.sl-preset-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sl-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  border: 1px solid var(--shell-border);
  border-radius: var(--r-pill);
  color: var(--shell-ink-faint);
  cursor: pointer;
  background: var(--glass-bg);
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.sl-pill:hover {
  border-color: var(--dojo-accent);
  color: var(--dojo-accent);
  background: var(--dojo-accent-soft);
}

/* ── Config grid ── */
.sl-cfg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 640px) {
  .sl-cfg-grid { grid-template-columns: repeat(2, 1fr); }
}
.sl-cfg-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sl-cfg-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--shell-ink-faint);
  text-transform: uppercase;
}
.sl-select,
.sl-input,
.sl-cond-select,
.sl-cond-val {
  background: var(--shell-bg-raised);
  border: 1px solid var(--shell-border);
  border-radius: var(--r-sm);
  color: var(--shell-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 9px 11px;
  outline: none;
  transition: border-color 0.15s ease;
}
.sl-select { -webkit-appearance: none; appearance: none; cursor: pointer; }
.sl-select:focus,
.sl-input:focus,
.sl-cond-select:focus,
.sl-cond-val:focus { border-color: var(--dojo-accent); }
.sl-select option { background: var(--shell-bg-raised); color: var(--shell-ink); }

/* ── Conditions ── */
.sl-conds {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sl-cond-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: var(--shell-bg-raised);
  border: 1px solid var(--shell-border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.sl-cond-select {
  flex: 1;
  min-width: 130px;
  font-family: var(--font-body);
}
.sl-cond-val {
  width: 72px;
  text-align: center;
  color: var(--dojo-accent);
  font-weight: 600;
}
.sl-cond-logic {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 4px 8px;
  min-width: 38px;
  text-align: center;
  background: var(--dojo-accent-soft);
  color: var(--dojo-accent);
  border: 1px solid var(--dojo-accent);
  border-radius: var(--r-pill);
  cursor: pointer;
  flex-shrink: 0;
}
.sl-cond-logic.is-or {
  background: var(--accent-green-soft);
  color: var(--accent-green);
  border-color: var(--accent-green);
}
.sl-cond-rm {
  background: transparent;
  border: none;
  color: var(--shell-ink-faint);
  width: 26px;
  height: 26px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.sl-cond-rm:hover { color: var(--state-danger); background: rgba(224, 96, 90, 0.12); }
.sl-add-cond {
  width: 100%;
  margin-top: 8px;
  background: transparent;
  border: 1px dashed var(--shell-border-strong);
  border-radius: var(--r-sm);
  color: var(--shell-ink-faint);
  padding: 9px;
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.sl-add-cond:hover { border-color: var(--dojo-accent); color: var(--dojo-accent); }

/* ── Exit grid ── */
.sl-exit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 560px) {
  .sl-exit-grid { grid-template-columns: 1fr 1fr; }
}
.sl-exit-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sl-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.sl-toggle {
  width: 30px;
  height: 17px;
  background: var(--shell-bg-raised);
  border: 1px solid var(--shell-border);
  border-radius: var(--r-pill);
  position: relative;
  flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.sl-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--shell-ink-faint);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.sl-toggle.is-on {
  background: var(--dojo-accent-soft);
  border-color: var(--dojo-accent);
}
.sl-toggle.is-on::after {
  transform: translateX(13px);
  background: var(--dojo-accent);
}
.sl-toggle-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--shell-ink-muted);
}
.sl-exit-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sl-exit-row .sl-input { flex: 1; }
.sl-unit {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--shell-ink-faint);
}

/* ── Run button ── */
.sl-run {
  width: 100%;
  margin-top: 4px;
  letter-spacing: 0.18em;
}

/* ── Testing screen ── */
.sl-test-hdr {
  text-align: center;
  margin-bottom: 8px;
}
.sl-test-hdr h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--shell-ink);
}
.sl-test-hdr p {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--shell-ink-faint);
  margin-top: 6px;
}
.sl-prog-outer {
  height: 3px;
  width: 100%;
  background: var(--shell-bg-raised);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.sl-prog-inner {
  height: 100%;
  width: 0%;
  background: var(--dojo-accent);
  box-shadow: 0 0 8px var(--dojo-accent);
  transition: width 0.35s ease;
}
.sl-prog-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--shell-ink-faint);
}
.sl-feed {
  height: 280px;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sl-feed-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
}
.sl-feed-item.is-win { border-left-color: var(--accent-green); background: var(--accent-green-soft); }
.sl-feed-item.is-loss { border-left-color: var(--state-danger); background: rgba(224, 96, 90, 0.08); }
.sl-feed-time {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--shell-ink-faint);
  width: 74px;
  flex-shrink: 0;
}
.sl-feed-text {
  flex: 1;
  font-size: 11px;
  color: var(--shell-ink-muted);
}
.sl-feed-pnl {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.sl-feed-pnl.p { color: var(--accent-green); }
.sl-feed-pnl.n { color: var(--state-danger); }

/* ── Results ── */
.sl-hero {
  border-top: 2px solid var(--dojo-accent);
}
.sl-hero-pnl {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.sl-hero-pnl.pos { color: var(--accent-green); }
.sl-hero-pnl.neg { color: var(--state-danger); }
.sl-hero-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--shell-ink-faint);
  margin-top: 3px;
  margin-bottom: 20px;
}
.sl-inline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 520px) {
  .sl-inline { grid-template-columns: repeat(2, 1fr); }
}
.sl-inline-val {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--shell-ink);
}
.sl-inline-lbl {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--shell-ink-faint);
  margin-top: 2px;
}
.sl-res-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 640px) {
  .sl-res-grid { grid-template-columns: repeat(2, 1fr); }
}
.sl-res-card {
  padding: 14px 16px;
}
.sl-res-card-val {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--shell-ink);
  margin-bottom: 3px;
}
.sl-res-card-lbl {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--shell-ink-faint);
}
.sl-chart-card { padding: 18px; }
.sl-chart-title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--shell-ink-faint);
  margin-bottom: 12px;
}
#slEquityChart { height: 200px; }

/* ── AI card ── */
.sl-ai-card {
  border-left: 3px solid var(--accent-green);
}
.sl-ai-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.sl-ai-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--accent-green);
  background: var(--accent-green-soft);
  border: 1px solid var(--accent-green);
  border-radius: var(--r-sm);
  padding: 3px 10px;
}
.sl-ai-by {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--shell-ink-faint);
}
.sl-ai-text {
  font-size: 13px;
  line-height: 1.8;
  color: var(--shell-ink-dim);
  white-space: pre-wrap;
  min-height: 20px;
}
.sl-ai-text.is-typing::after {
  content: "▌";
  animation: sl-blink 0.8s infinite;
  color: var(--accent-green);
}
@keyframes sl-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.sl-ai-h {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--dojo-accent);
  margin: 16px 0 6px;
}
.sl-ai-h:first-child { margin-top: 0; }

/* ── Result actions ── */
.sl-res-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sl-res-actions .btn { flex: 1; min-width: 140px; }

/* ── Saved list ── */
.sl-saved-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sl-saved-empty {
  text-align: center;
  padding: 60px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--shell-ink-faint);
  line-height: 2;
}
.sl-strat-card {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px 18px;
}
.sl-strat-info { flex: 1; min-width: 140px; }
.sl-strat-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--shell-ink);
  margin-bottom: 3px;
}
.sl-strat-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--shell-ink-faint);
}
.sl-strat-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--shell-ink-faint);
}
.sl-strat-stats b { color: var(--shell-ink-muted); font-weight: 600; }
.sl-strat-pnl {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  width: 84px;
  text-align: right;
  flex-shrink: 0;
}
.sl-strat-pnl.pos { color: var(--accent-green); }
.sl-strat-pnl.neg { color: var(--state-danger); }
.sl-strat-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.sl-strat-btn {
  background: transparent;
  border: 1px solid var(--shell-border);
  border-radius: var(--r-sm);
  color: var(--shell-ink-faint);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.sl-strat-btn:hover { border-color: var(--dojo-accent); color: var(--dojo-accent); }
.sl-strat-btn.is-del:hover { border-color: var(--state-danger); color: var(--state-danger); }

/* ── Toast ── */