:root{
  --ring:#243246;
  --radius:12px;
  --tiny-radius:6px;
}

/* Layout clamp */
.r7-clamp{ max-width:760px; margin:0 auto; }

/* ===== Segmented toggles (independent buttons) ===== */
.mode-toggle{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  margin:14px 0 12px; position:relative; z-index:10; pointer-events:auto;
}
.mode-toggle .seg{ display:flex; gap:6px; }
.mode-toggle .seg button{
  appearance:none; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04); color:#cbd3e2;
  padding:10px 14px; font-weight:800; letter-spacing:.1px;
  border-radius:var(--tiny-radius); cursor:pointer; line-height:1;
  min-height:40px; min-width:64px; /* mobile hit area */
}
.mode-toggle .seg button:focus-visible{ outline:2px solid #4da3ff; outline-offset:2px; }
.mode-toggle .seg button.active{ color:#0c0f12; background:#22c55e; border-color:#22c55e; }
.mode-toggle .seg button.bear.active{ color:#190404; background:#ef4444; border-color:#ef4444; }

/* Asset color accents when active */
#btnETF.active    { background:#38bdf8; border-color:#38bdf8; color:#0b0f14; }
#btnStock.active  { background:#22c55e; border-color:#22c55e; color:#0b0f14; }
#btnCrypto.active { background:#f59e0b; border-color:#f59e0b; color:#0b0f14; }

/* Basis accents */
#btnLines.active   { background:#22c55e; border-color:#22c55e; color:#0b0f14; }
#btnCandles.active { background:#f59e0b; border-color:#f59e0b; color:#0b0f14; }

/* Card */
#projCard{ max-width:760px; margin:0 auto; position:relative; }
#projCard.card{ border-radius:var(--radius); }
#projCard .hd{ padding:18px 18px 0; }
#projCard .bd{ padding:12px 16px 18px; }
#projCard.mode-bull .hd h2{ color:#22c55e; }
#projCard.mode-bear .hd h2{ color:#ef4444; }
#projCard .basisBadge{ display:inline-block; margin-left:8px; padding:2px 8px; border-radius:10px; border:1px solid var(--ring); background:#0e121a; color:#cbd3e2; font-size:11px; }
#projCard .panelTitle{ display:flex; justify-content:space-between; align-items:center; }

/* Inputs */
#projCard .row{ display:grid; gap:10px; margin-top:12px; grid-template-columns: repeat(2, 1fr); }
#projCard label{ display:flex; flex-direction:column; gap:6px; }
#projCard label span{ font-size:12px; color:#9aa1b3; }
#projCard input[type="text"]{
  height:40px; padding:8px 12px; border-radius:12px; border:1px solid var(--ring);
  background:#0f1116; color:inherit; outline:none; font-size:16px;
}
#projCard input[type="text"]:focus{ border-color:#4da3ff; box-shadow:0 0 0 2px rgba(77,163,255,0.25); }

/* Targets grid */
#projCard .targets{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
#projCard .metric{ background:#10131a; border:1px solid var(--ring); border-radius:12px; padding:12px; }
#projCard .metric .lbl{ font-size:12px; color:#9aa1b3; }
#projCard .metric .val{ font-size:28px; font-weight:800; margin-top:6px; }
#projCard .metric .hint{ font-size:12px; color:#9aa1b3; margin-top:6px; }
#projCard .hit{ border-color:#ffd06a !important; box-shadow:0 0 0 2px rgba(255,208,106,.25); }

/* Buttons */
.btn{ border:1px solid var(--ring); border-radius:10px; padding:8px 12px; font-weight:700; cursor:pointer; background:#0f1116; color:inherit; }
.btn.ghost{ background:#0f1116; color:inherit; border:1px solid var(--ring); }

/* Tolerance input with stepper */
.tol-wrap label{ display:block; }
.tol-row{ display:flex; align-items:center; gap:6px; }
.tol-row input{
  width:96px; height:36px; text-align:center; border:1px solid var(--ring);
  background:#0f1116; color:inherit; border-radius:10px;
}
.stepper{
  width:32px; height:36px; line-height:34px; text-align:center; border:1px solid var(--ring);
  background:#0f1116; color:inherit; border-radius:10px; font-weight:800; cursor:pointer;
}
.stepper:focus-visible{ outline:2px solid #4da3ff; outline-offset:2px; }

/* Helper text + toolbar + note width */
.helper, .toolbar, .note{ max-width:760px; margin-inline:auto; }
.helper{ margin-top:10px; }
.note{ color:#9aa1b3; font-size:13px; margin-top:18px; }
.small{ color:#9aa1b3; font-size:12.5px; margin-top:2px; }
.warn{ color:#ffd06a; font-size:13px; margin-top:8px; }

/* Mobile */
@media (max-width:680px){
  #projCard .row{ grid-template-columns:1fr; }
  #projCard .targets{ grid-template-columns:1fr; }
}

/* Tiny legend chips */
.r7-chip{display:inline-block;font-size:13.5px;border:2px solid currentColor;border-radius:999px;padding:3px 10px;color:#cbd3e2;opacity:.9}
.r7-chip.t1{border-color:rgba(34,197,94,.45);color:#22c55e}
.r7-chip.t2{border-color:rgba(245,158,11,.45);color:#f59e0b}
.r7-chip.t3{border-color:rgba(239,68,68,.45);color:#ef4444}

/* Fibs list container clamp, if long */
#fibTargets{ max-height:320px; overflow:auto; }

/* Visual & FAQ blocks */
.faq-block summary { font-size:16px; font-weight:800; letter-spacing:.1px; }
.faq-block .small, .faq-block p, .faq-block li { font-size:15px; line-height:1.6; }
.faq-block details { margin: 10px 0; }