.btd-root {
  --bg: #f3f0e9;
  --surface: rgba(255, 255, 255, 0.78);
  --text: #152238;
  --muted: #5d6b7f;
  --good: #129c70;
  --bad: #cc4f39;
  --neutral: #d0a01e;
  --line: rgba(21, 34, 56, 0.12);
  font-family: "Space Grotesk", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 15% 10%, #d2f4e7 0%, transparent 35%),
    radial-gradient(circle at 85% 15%, #f9d9a9 0%, transparent 32%), var(--bg);
  border-radius: 18px;
  padding: 1rem;
}

.btd-root * { box-sizing: border-box; }
.btd-root .container { width: 100%; margin: 0 auto; }
.btd-root .header { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.btd-root .eyebrow { margin: 0; font-family: monospace; color: var(--muted); }
.btd-root h1 { margin: 0.2rem 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.btd-root .subline { margin: 0; color: var(--muted); }
.btd-root .actions { display: flex; gap: 0.5rem; align-items: center; }
.btd-root .inline-control, .btd-root #refreshBtn {
  border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 0.55rem 0.7rem;
}
.btd-root .control-panel, .btd-root .recommendation, .btd-root .status-row p, .btd-root .card {
  border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.85);
}
.btd-root .control-panel { padding: 0.85rem; margin-bottom: 0.8rem; }
.btd-root .controls { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 0.65rem; }
.btd-root .controls label { display: flex; flex-direction: column; gap: 0.2rem; color: var(--muted); font-size: 0.85rem; }
.btd-root .controls input, .btd-root select { border: 1px solid var(--line); border-radius: 8px; padding: 0.45rem; }
.btd-root .controls .check { border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem; background: #fff; }
.btd-root .status-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; margin-bottom: 0.8rem; }
.btd-root .status-row p { margin: 0; padding: 0.55rem 0.7rem; color: var(--muted); }
.btd-root .status-row strong { color: var(--text); }
.btd-root .status-good { color: var(--good) !important; }
.btd-root .status-warn { color: var(--neutral) !important; }
.btd-root .status-bad { color: var(--bad) !important; }
.btd-root .recommendation { padding: 0.85rem; margin-bottom: 0.85rem; }
.btd-root .recommendation h2, .btd-root .recommendation p { margin: 0.2rem 0; }
.btd-root .secondary, .btd-root .debug { color: var(--muted); }
.btd-root .freshness { font-weight: 700; }
.btd-root .freshness-good { color: var(--good); }
.btd-root .freshness-warn { color: var(--neutral); }
.btd-root .freshness-bad { color: var(--bad); }
.btd-root .warning { color: var(--bad); font-weight: 700; }
.btd-root .levels-grid { display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: 0.75rem; margin-bottom: 0.85rem; }
.btd-root .level-card { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.9); padding: 0.75rem; }
.btd-root .level-label { margin: 0; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.btd-root .level-card h3 { margin: 0.35rem 0 0.15rem; font-size: 1.08rem; }
.btd-root .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0.9rem; }
.btd-root .card { padding: 0.75rem; }
.btd-root .card-top { display: flex; justify-content: space-between; align-items: center; }
.btd-root .tf { margin: 0; }
.btd-root .bias { font-size: 0.74rem; font-weight: 700; padding: 0.2rem 0.45rem; border-radius: 999px; border: 1px solid transparent; }
.btd-root .bias.long { color: var(--good); background: #e9f7f2; border-color: #bfe8d8; }
.btd-root .bias.short { color: var(--bad); background: #fdeeea; border-color: #f7c9bf; }
.btd-root .bias.neutral { color: var(--neutral); background: #fff6e0; border-color: #f4dc99; }
.btd-root .metric { margin-top: 0.55rem; display: flex; justify-content: space-between; gap: 0.6rem; color: var(--muted); }
.btd-root .metric strong, .btd-root .riskValues { color: var(--text); font-family: monospace; }
.btd-root .rvol-hot { color: var(--good) !important; }
.btd-root .risk { margin-top: 0.6rem; background: rgba(21, 34, 56, 0.04); border-radius: 8px; padding: 0.5rem; }
.btd-root .riskLabel { color: var(--muted); font-size: 0.78rem; }
.btd-root .meter { margin-top: 0.7rem; height: 8px; background: rgba(21, 34, 56, 0.1); border-radius: 999px; overflow: hidden; }
.btd-root .meter-bar { width: 0; height: 100%; background: linear-gradient(90deg, #7ac4a0, #f9be65); transition: width 0.35s ease; }

@media (max-width: 950px) {
  .btd-root .controls { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .btd-root .status-row { grid-template-columns: 1fr 1fr; }
  .btd-root .levels-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .btd-root .header { flex-direction: column; }
  .btd-root .actions { width: 100%; flex-direction: column; }
  .btd-root .inline-control, .btd-root #refreshBtn { width: 100%; }
  .btd-root .controls, .btd-root .status-row, .btd-root .levels-grid, .btd-root .grid { grid-template-columns: 1fr; }
}

/* Terminal theme */
.btd-root { --bg:#090f1c; --surface:#111c2e; --text:#e6edf8; --muted:#99aac2; --good:#50dfb0; --bad:#ff8194; --neutral:#edc775; --line:#28364b; color-scheme:dark; background:radial-gradient(ellipse at top left,#152a40,transparent 55%),var(--bg); padding:clamp(14px,3vw,32px); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.5; }
.btd-root h1,.btd-root h2,.btd-root h3 { color:var(--text); font-family:inherit; letter-spacing:-.025em; }
.btd-root h2 { font-size:1.35rem; margin:.3rem 0 1rem; }
.btd-root h3 { font-size:1rem; }
.btd-root .eyebrow { color:var(--good); font-size:.7rem; letter-spacing:.14em; }
.btd-root .header { align-items:center; margin-bottom:28px; }
.btd-root .actions { flex-wrap:wrap; }
.btd-root button,.btd-root input,.btd-root select { font:inherit; color:var(--text); background:#0c1525; border:1px solid var(--line); border-radius:8px; padding:10px 12px; max-width:100%; }
.btd-root button { cursor:pointer; font-weight:600; }
.btd-root button:hover { border-color:var(--good); background:#18342f; }
.btd-root button:disabled { opacity:.45; cursor:not-allowed; }
.btd-root :is(button,input,select,summary):focus-visible { outline:2px solid var(--good); outline-offset:3px; }
.btd-root .inline-control,.btd-root #refreshBtn,.btd-root .controls .check { background:#111c2e; }
.btd-root .control-panel,.btd-root .recommendation,.btd-root .status-row p,.btd-root .card,.btd-root .level-card { background:var(--surface); }
.btd-root .control-panel { margin:20px 0; }
.btd-root summary { cursor:pointer; font-weight:600; padding:6px; }
.btd-root .control-panel h2 { display:none; }
.btd-root .controls { margin-top:16px; }
.btd-root .bias.long { background:#163b33; border-color:#285547; }
.btd-root .bias.short { background:#39232d; border-color:#603644; }
.btd-root .bias.neutral { background:#383323; border-color:#5c5030; }
.btd-root .risk,.btd-root .meter { background:#0c1525; }
.btd-root .levels-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.btd-root .grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.btd-root .paper-panel { border-top:1px solid var(--line); padding-top:24px; }
.btd-root .paper-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.btd-root .paper-badge { border:1px solid #31584c; background:#16352e; color:var(--good); padding:6px 12px; border-radius:30px; font-size:.75rem; }
.btd-root .paper-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:16px 0 20px; }
.btd-root .paper-stats article { background:linear-gradient(135deg,#18273c,#111b2b); border:1px solid var(--line); border-radius:12px; padding:18px; }
.btd-root .paper-stats span { display:block; color:var(--muted); font-size:.75rem; }
.btd-root .paper-stats strong { display:block; font-size:clamp(1.2rem,2.2vw,1.85rem); margin-top:8px; font-variant-numeric:tabular-nums; }
.btd-root .paper-workspace { display:grid; grid-template-columns:minmax(240px,1fr) minmax(0,2fr); gap:20px; }
.btd-root .paper-ticket,.btd-root .paper-book { margin:0; padding:22px; border:1px solid var(--line); border-radius:14px; background:#111b2b; min-width:0; }
.btd-root .paper-ticket label { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; color:var(--muted); font-size:.8rem; }
.btd-root .paper-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.btd-root .paper-ticket input,.btd-root .paper-ticket select { width:100%; }
.btd-root #paperSubmit { background:var(--good); color:#09251d; width:100%; border-color:var(--good); }
.btd-root .paper-quote { font-family:monospace; color:var(--good); }
.btd-root .paper-ticket .secondary,.btd-root .paper-footnote,.btd-root .paper-book .secondary { font-size:.75rem; }
.btd-root #paperMessage { color:var(--neutral); font-size:.8rem; }
.btd-root .paper-empty { color:var(--muted); padding:28px 12px; text-align:center; border:1px dashed var(--line); border-radius:10px; }
.btd-root .paper-position { border:1px solid var(--line); padding:14px; border-radius:10px; margin:12px 0; font-size:.8rem; }
.btd-root .paper-position p { color:var(--muted); }
.btd-root .paper-positive { color:var(--good); }
.btd-root .paper-negative { color:var(--bad); }
.btd-root #paperCurve { width:100%; height:120px; background:linear-gradient(0deg,#13302c55,transparent); border-radius:8px; }
.btd-root .paper-toolbar { display:flex; gap:8px; flex-wrap:wrap; }
.btd-root .paper-table-wrap { overflow-x:auto; margin-top:10px; }
.btd-root table { border-collapse:collapse; width:100%; font-size:.8rem; color:var(--text); text-align:left; }
.btd-root th,.btd-root td { padding:12px; border:0; border-bottom:1px solid var(--line); background:transparent; vertical-align:top; }
.btd-root th { color:var(--muted); font-weight:500; white-space:nowrap; }
.btd-root td small { overflow-wrap:anywhere; }
@media(max-width:950px) { .btd-root .paper-workspace { grid-template-columns:1fr; } .btd-root .levels-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:580px) { .btd-root .paper-stats { grid-template-columns:1fr 1fr; } .btd-root .levels-grid { grid-template-columns:1fr; } .btd-root .paper-ticket,.btd-root .paper-book { padding:14px; } }

/* Timeframe comparison: a stable 3 / 2 / 1 column layout based on available space. */
.btd-root { container-type:inline-size; container-name:btd; }
.btd-root .timeframe-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:30px 0 18px; }
.btd-root .timeframe-heading h2 { margin:5px 0 0; }
.btd-root .timeframe-heading > p { color:var(--muted); font-size:12px; margin:0; text-align:right; }
.btd-root #timeframeGrid { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
.btd-root .timeframe-card { --tf-accent:#edc775; display:flex; flex-direction:column; min-width:0; padding:22px; border:1px solid #29384e; border-radius:16px; background:linear-gradient(145deg,#162235,#101a2a 70%); box-shadow:0 5px 18px #00000015; position:relative; overflow:hidden; }
.btd-root .timeframe-card::before { content:""; position:absolute; height:2px; left:22px; right:22px; top:0; background:linear-gradient(90deg,var(--tf-accent),transparent 85%); opacity:.65; }
.btd-root .timeframe-card[data-direction="long"] { --tf-accent:var(--good); }
.btd-root .timeframe-card[data-direction="short"] { --tf-accent:var(--bad); }
.btd-root .timeframe-card .card-top { gap:12px; margin-bottom:22px; }
.btd-root .timeframe-card .tf-heading { display:flex; align-items:baseline; gap:9px; }
.btd-root .timeframe-card .tf { font-size:22px; line-height:1.2; font-weight:650; margin:0; }
.btd-root .timeframe-card .bias { padding:4px 10px; font-size:12px; font-weight:650; flex-shrink:0; }
.btd-root .tf-caption { display:block; font-size:11px; line-height:1.5; color:var(--muted); }
.btd-root .tf-highlights { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.btd-root .tf-highlights > div + div { border-left:1px solid var(--line); padding-left:20px; }
.btd-root .tf-label { display:block; font-size:12px; font-weight:600; color:#bbcae0; }
.btd-root .tf-label small { font-weight:400; color:var(--muted); font-size:10px; margin-left:4px; }
.btd-root .tf-highlights strong { display:block; font-size:30px; font-weight:600; line-height:1.3; letter-spacing:-.04em; font-variant-numeric:tabular-nums; margin:5px 0 2px; color:var(--text); }
.btd-root .tf-facts { display:grid; gap:13px; margin:18px 0; }
.btd-root .tf-facts > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:baseline; gap:12px; }
.btd-root .tf-facts dt { font-size:12px; font-weight:400; color:#b0bfd4; }
.btd-root .tf-facts dd { margin:0; text-align:right; color:var(--text); font-size:13px; font-weight:550; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.btd-root .tf-facts small { display:block; color:var(--muted); font-size:10px; line-height:1.5; font-weight:400; margin-top:2px; }
.btd-root .tf-facts .trend[data-trend="Up"] { color:var(--good); }
.btd-root .tf-facts .trend[data-trend="Down"] { color:var(--bad); }
.btd-root .tf-flow { margin-bottom:20px; }
.btd-root .tf-flow-heading,.btd-root .tf-plan-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; color:#b0bfd4; font-size:12px; }
.btd-root .tf-flow-heading small,.btd-root .tf-plan-heading small { font-size:10px; color:var(--muted); margin-left:4px; }
.btd-root .tf-flow-heading strong { color:var(--text); font-size:12px; font-weight:550; white-space:nowrap; font-variant-numeric:tabular-nums; }
.btd-root .tf-flow-track { height:5px; border-radius:10px; background:#bd647c; overflow:hidden; margin-top:9px; }
.btd-root .tf-flow-track span { display:block; height:100%; background:#4fc7a4; border-right:2px solid #111c2e; }
.btd-root .tf-plan { margin-top:auto; min-height:96px; border:1px solid #253249; background:#0b1423; border-radius:10px; padding:13px; }
.btd-root .tf-plan-heading { margin-bottom:12px; }
.btd-root .plan-rr { color:#b7c9e2; background:#1b2a40; border-radius:4px; font-size:10px; padding:2px 6px; white-space:nowrap; }
.btd-root .plan-rr:empty { display:none; }
.btd-root .tf-plan-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; }
.btd-root .tf-plan-values dt { font-size:10px; color:var(--muted); margin:0 0 4px; font-weight:400; }
.btd-root .tf-plan-values dd { margin:0; font-size:13px; font-weight:600; line-height:1.4; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; color:var(--text); }
.btd-root .tf-plan-values .plan-stop { color:var(--bad); }
.btd-root .tf-plan-values .plan-target { color:var(--good); }
.btd-root .plan-empty { margin:0; color:var(--muted); font-size:12px; }
.btd-root .timeframe-card [hidden] { display:none; }
.btd-root .tf-footer { display:flex; justify-content:space-between; gap:8px; padding-top:14px; font-size:10px; color:var(--muted); }
.btd-root .tf-footer strong { color:#c7d4e7; font-weight:600; margin-left:4px; }
@container btd (min-width:660px) { .btd-root #timeframeGrid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container btd (min-width:1080px) { .btd-root #timeframeGrid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@container btd (max-width:370px) {
  .btd-root .timeframe-card { padding:16px; }
  .btd-root .tf-highlights { gap:10px; }
  .btd-root .tf-highlights > div + div { padding-left:12px; }
  .btd-root .tf-flow-heading small { display:block; margin-left:0; }
  .btd-root .tf-plan-values { grid-template-columns:1fr; gap:7px; }
  .btd-root .tf-plan-values > div { display:flex; justify-content:space-between; gap:8px; }
  .btd-root .tf-plan-values dt { margin:0; }
}
@container btd (max-width:600px) { .btd-root .timeframe-heading { flex-direction:column; align-items:start; gap:6px; } .btd-root .timeframe-heading > p { text-align:left; } }

.btd-root .workspace-nav { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 24px; }
.btd-root .workspace-nav a { color:#bbcae0; text-decoration:none; border:1px solid var(--line); border-radius:8px; padding:8px 13px; font-size:13px; background:#101b2c; }
.btd-root .workspace-nav a:hover,.btd-root .workspace-nav a:focus-visible { color:var(--good); border-color:var(--good); }
.btd-root .workspace-section { margin-top:24px; padding:24px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(140deg,#152237,#0e1828); scroll-margin-top:32px; }
.btd-root .workspace-section h2 { margin-bottom:6px; }
.btd-root .workspace-section .secondary { font-size:12px; }
.btd-root .signal-checks { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:10px; margin-top:20px; }
.btd-root .signal-check { border:1px solid var(--line); padding:12px; border-radius:10px; background:#0c1728; }
.btd-root .signal-check strong { display:block; font-size:12px; color:var(--neutral); }
.btd-root .signal-check.passed strong { color:var(--good); }
.btd-root .signal-check span { display:block; font-size:11px; color:var(--muted); margin-top:6px; }
.btd-root .risk-assistant { padding:12px; margin:16px 0; border:1px solid #31544c; border-radius:10px; background:#15332b44; }
.btd-root .risk-assistant p { font-size:12px; color:#bed4ca; }
.btd-root #marketChart { display:block; width:100%; min-height:240px; background:#0a1322; border-radius:12px; margin-top:18px; touch-action:pan-y; }
.btd-root #marketChart [data-candle]:focus-visible { outline:2px solid #afc8ff; }
.btd-root .chart-pan { display:flex; align-items:center; gap:16px; color:var(--muted); font-size:12px; margin-top:10px; }
.btd-root .chart-pan input { flex:1; min-width:80px; padding:0; accent-color:var(--good); }
.btd-root #chartTradeInfo { overflow-wrap:anywhere; max-height:180px; overflow:auto; }
.btd-root .scanner-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.btd-root .scanner-card { padding:16px; border:1px solid var(--line); border-radius:12px; background:#101b2c; display:flex; flex-direction:column; gap:8px; }
.btd-root .scanner-card strong { font-size:18px; }
.btd-root .scanner-card span { color:var(--good); }
.btd-root .scanner-card p { font-size:12px; color:var(--muted); margin:0; }
.btd-root .scanner-card small { color:var(--muted); margin-top:auto; }
.btd-root .scanner-card button { font-size:12px; }
.btd-root #signalAlerts:not(:empty) { padding:12px; border-left:3px solid var(--good); background:#18332d; margin:16px 0; }
.btd-root .research-controls { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:20px 0; align-items:end; }
.btd-root .research-controls label { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:12px; }
.btd-root #backtestStatus,.btd-root #scanStatus { color:var(--muted); font-size:13px; }
.btd-root .workspace-section pre { color:#bfcee2; background:#0a1322; border:1px solid var(--line); border-radius:8px; padding:12px; max-width:520px; max-height:240px; overflow:auto; font-size:11px; white-space:pre-wrap; overflow-wrap:anywhere; }
.btd-root #signalJournal details { min-width:170px; }
.btd-root .workspace-section [hidden] { display:none; }
@container btd (max-width:600px) { .btd-root .workspace-section { padding:14px; } .btd-root .signal-checks { grid-template-columns:1fr; } .btd-root .scanner-grid { grid-template-columns:1fr; } }
