/* The Theta demo (showcase/chapters/_theta.html, theta-demo.js) on /how-it-works/ (#theta).
   One app window with two tool pages, switched by the tabs above it:
     Theta Performance (intrinio_options/templates/strategies/theta_performance.html):
       regime banner, SPXW/SPY/QQQ GEX and DEX cards, gamma note, Options Income Strategies,
       the strategy card with Chart / Table / Historical / Overview.
     Theta Farming Scanner (intrinio_options/templates/strategies/theta_farming.html):
       header and regime pill, index cards, KPI cards, filters, Strategy Suggestions, Quick Reference.
   Colours inside the window are the tools' own; the section around it uses landing.css.
   Everything is th-* and scoped under .th so it beats landing.css's element reset.
   Only transform and opacity animate; all of it stops under reduced motion (landing.css
   section 13, plus .th-still) and while the demo is paused (.is-paused). */

.th {
  --th-p: #6759d1; --th-p2: #a78bfa; --th-p3: #8b7cf6;
  --th-bg: #17142e; --th-card: #110f23; --th-card2: #1b1838; --th-line: rgba(255, 255, 255, .07);
  --th-line2: rgba(148, 103, 254, .22);
  --th-text: #dcd9f2; --th-muted: #a7a3c9; --th-bright: #f4f2ff;
  --th-green: #3fcf7c; --th-green-d: #1f9d5c; --th-red: #f0525f; --th-red-d: #d83a46;
  --th-amber: #f5b544; --th-orange: #ea6a2a; --th-cyan: #5ec8ff; --th-blue: #3b82f6;
  --th-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --th-h: 760px;
}
html:not(.js) .th-js, .th.th-nodata .th-js { display: none !important; }

/* ---- tool tabs above the window ---- */
.th-tools {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--lp-sp-2);
  margin: 0 auto var(--lp-sp-4); padding: var(--lp-sp-1); width: fit-content; max-width: 100%;
  border: 1px solid var(--lp-border); border-radius: var(--lp-r-pill); background: var(--lp-surface-2);
}
.th .th-tool {
  display: inline-flex; align-items: center; gap: var(--lp-sp-2); min-height: 40px; padding: 0 var(--lp-sp-4);
  border: 1px solid transparent; border-radius: var(--lp-r-pill); background: none; cursor: pointer;
  color: var(--lp-muted); font: 600 var(--lp-fs-sm)/1.2 var(--lp-font); white-space: nowrap;
}
.th .th-tool:hover { color: var(--lp-text); }
.th .th-tool[aria-selected="true"] {
  color: var(--lp-text); border-color: var(--lp-primary);
  background: color-mix(in srgb, var(--lp-primary) 24%, transparent);
}
.th-tool-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lp-g-strategies); }
.th-tool-dot--farm { background: var(--lp-g-stocks); }
.th-tiers { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--lp-sp-2); margin-top: var(--lp-sp-3); }
.th .th-tiers .lp-tier { gap: 6px; }

/* ---- the window ---- */
.th-window {
  position: relative; overflow: hidden;
  border: 1px solid var(--lp-border-strong); border-radius: var(--lp-r-lg); background: var(--th-bg);
  box-shadow: var(--lp-shadow), 0 0 80px color-mix(in srgb, var(--lp-primary) 10%, transparent);
}
.th-bar {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px;
  background: #0c0a17; border-bottom: 1px solid var(--th-line); white-space: nowrap; overflow: hidden;
}
.th-lights { display: inline-flex; gap: 6px; }
.th-lights i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.th-lights i + i { background: #febc2e; }
.th-lights i + i + i { background: #28c840; }
.th-bar-tab {
  overflow: hidden; text-overflow: ellipsis; padding: 4px 12px; border-radius: 8px 8px 0 0;
  background: var(--th-bg); color: var(--th-muted); font-size: 12px;
}
.th-bar-tab b { color: var(--th-bright); font-weight: 800; letter-spacing: -.01em; }
.th-bar-url { overflow: hidden; text-overflow: ellipsis; color: #8e8ab4; font: 11.5px/1 var(--th-mono); }

.th-scroll {
  position: relative; height: var(--th-h); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(103, 89, 209, .35) transparent;
}
.th-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px; color: var(--th-text); font-size: 13px; }
.th-panel[hidden] { display: none; }
.th-panel.is-new { animation: th-in .3s var(--lp-ease) both; }
.th .th-panel h3, .th .th-panel h4 { margin: 0; color: var(--th-bright); letter-spacing: 0; }
.th .th-panel p { margin: 0; }
.th-pg-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.th-pg-top .lp-sample { margin-left: auto; }
.th-pg-name { color: var(--th-bright); font: 700 16px/1.3 var(--lp-font-title); }

.th-box {
  position: relative; min-width: 0; padding: 14px; border-radius: 12px;
  background: var(--th-card); border: 1px solid var(--th-line2);
}
.th-box--accent { border-color: rgba(103, 89, 209, .55); }
.th-box--accent::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--th-p) 20%, var(--th-p2) 50%, var(--th-p) 80%, transparent);
}
.th-eyebrow { color: var(--th-p2); font: 800 10.5px/1.3 var(--lp-font); letter-spacing: .14em; text-transform: uppercase; }

/* ---- regime banner ---- */
.th-regime {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(245, 181, 68, .45); background: linear-gradient(90deg, rgba(245, 181, 68, .1), rgba(245, 181, 68, .02));
}
.th-regime-ico {
  display: flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: rgba(245, 181, 68, .18); color: var(--th-amber);
}
.th-regime-ico i { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--th-amber); position: relative; }
.th-regime-ico i::after { content: ""; position: absolute; left: 4px; right: 4px; top: 8px; height: 2px; border-radius: 1px; background: #3a2a08; }
.th .th-regime-t { color: var(--th-amber); font: 700 15px/1.3 var(--lp-font-title); }
.th .th-regime-d { margin-top: 2px; color: var(--th-muted); font-size: 12.5px; line-height: 1.5; }
.th-regime[data-tone="good"] { border-color: rgba(63, 207, 124, .45); background: linear-gradient(90deg, rgba(63, 207, 124, .1), rgba(63, 207, 124, .02)); }
.th-regime[data-tone="good"] .th-regime-ico { background: rgba(63, 207, 124, .18); }
.th-regime[data-tone="good"] .th-regime-ico i { background: var(--th-green); }
.th-regime[data-tone="good"] .th-regime-t { color: var(--th-green); }
.th-regime[data-tone="bad"] { border-color: rgba(240, 82, 95, .45); background: linear-gradient(90deg, rgba(240, 82, 95, .1), rgba(240, 82, 95, .02)); }
.th-regime[data-tone="bad"] .th-regime-ico { background: rgba(240, 82, 95, .18); }
.th-regime[data-tone="bad"] .th-regime-ico i { background: var(--th-red); }
.th-regime[data-tone="bad"] .th-regime-t { color: var(--th-red); }

/* ---- GEX / DEX cards ---- */
.th-gex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.th-gc { min-width: 0; padding: 12px; border-radius: 12px; background: var(--th-card2); border: 1px solid var(--th-line); }
.th-gc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.th-gc-sym { display: inline-flex; align-items: center; gap: 6px; color: var(--th-p2); font: 800 11px/1.3 var(--lp-font); letter-spacing: .14em; }
.th-gc-sym i { width: 5px; height: 5px; border-radius: 50%; background: var(--th-p2); }
.th-gc-px { display: block; margin: 2px 0 8px; font: 800 22px/1.15 var(--lp-font-title); letter-spacing: -.01em; }
.th-gc-px.is-up { color: var(--th-green); }
.th-gc-px.is-down { color: var(--th-red); }
.th .th-bd {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(167, 139, 250, .4); background: rgba(103, 89, 209, .08);
  color: var(--th-p2); font: 800 10px/1.4 var(--lp-font); letter-spacing: .12em;
}
.th .th-bd:hover { background: rgba(103, 89, 209, .2); }
.th-bd svg { transition: transform .2s var(--lp-ease); }
.th-bd[aria-expanded="false"] svg { transform: rotate(180deg); }
.th-gpills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.th-gp {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px;
  color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--th-red-d);
}
.th-gp b { font-weight: 800; }
.th-gp.is-pos { background: #279a62; }
.th-gp-sep { width: 1px; height: 12px; background: rgba(255, 255, 255, .45); }
.th-gp-mm { padding: 0 5px; border-radius: 4px; background: rgba(0, 0, 0, .25); font-size: 10.5px; font-weight: 800; }
.th-gbody { padding: 10px; border-radius: 10px; background: rgba(0, 0, 0, .22); border: 1px solid var(--th-line); }
.th-gbody[hidden] { display: none; }
.th-grow { display: grid; grid-template-columns: 58px 30px minmax(0, 1fr) 62px; align-items: center; gap: 0 8px; height: 19px; }
.th-grow + .th-grow--gex { margin-top: 7px; }
.th-grow-b { color: var(--th-text); font-size: 11.5px; font-weight: 700; }
.th-grow-k { color: #8a86ad; font: 700 10px/1 var(--lp-font); }
.th-grow-v { text-align: right; font: 700 11.5px/1 var(--lp-font); font-variant-numeric: tabular-nums; }
.th-grow-v.is-pos { color: var(--th-green); }
.th-grow-v.is-neg { color: var(--th-red); }
.th-track { position: relative; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.th-track::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .12); }
.th-fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--th-green); will-change: transform; }
.th-fill.is-neg { background: var(--th-red); transform-origin: right center; }
.th-fill.is-pos { transform-origin: left center; }
.th-gtot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--th-line); }
.th-gtot .th-grow { grid-template-columns: 58px 30px minmax(0, 1fr) 62px; }

/* gamma note */
.th-gnote {
  display: flex; gap: 10px; padding: 11px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.55;
  border: 1px solid rgba(240, 82, 95, .4); background: rgba(240, 82, 95, .07); color: #f3b7bd;
}
.th-gnote b { color: #ff7c86; }
.th-gnote svg { flex: none; margin-top: 2px; color: #ff7c86; }
.th-gnote.is-pos { border-color: rgba(63, 207, 124, .4); background: rgba(63, 207, 124, .07); color: #b9ecd0; }
.th-gnote.is-pos b, .th-gnote.is-pos svg { color: var(--th-green); }

/* ---- Options Income Strategies ---- */
.th-ois { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 20px; }
.th-ois-l { min-width: 0; }
.th-ois-tk { display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; }
.th-ois-sym { color: var(--th-bright); font: 800 22px/1.2 var(--lp-font-title); }
.th-ois-px {
  padding: 3px 12px; border-radius: 10px; color: var(--th-cyan); font: 800 20px/1.3 var(--lp-font-title);
  background: rgba(94, 200, 255, .1); border: 1px solid rgba(94, 200, 255, .35);
}
.th .th-ois-sub { color: var(--th-muted); font-size: 12.5px; }
.th-ois-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.th-mp {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 8px; white-space: nowrap;
  border: 1px solid rgba(63, 207, 124, .4); background: rgba(63, 207, 124, .08); color: var(--th-green); font-size: 11.5px; font-weight: 700;
.th-mp.is-neg { border-color: rgba(240, 82, 95, .45); background: rgba(240, 82, 95, .08); color: var(--th-red); }
.th-mp.is-warn { border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .08); color: #fbbf24; }
}
.th-ois-r { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 0; }
.th-tkrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.th-lbl { color: var(--th-muted); font: 800 10px/1.3 var(--lp-font); letter-spacing: .12em; text-transform: uppercase; }
.th .th-tk {
  min-width: 52px; min-height: 32px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03);
  color: var(--th-text); font: 700 12px/1 var(--lp-font); letter-spacing: .04em;
  transition: transform .15s var(--lp-ease);
}
.th .th-tk:hover { border-color: rgba(167, 139, 250, .5); }
.th .th-tk[aria-pressed="true"] { background: var(--th-p); border-color: var(--th-p2); color: #fff; }
.th-fakes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.th-fake { display: flex; flex-direction: column; gap: 4px; }
.th-fake-in {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: var(--th-text); font-size: 12px; font-weight: 600;
}
.th-fake-in .th-cnt { padding: 0 5px; border-radius: 6px; background: rgba(255, 255, 255, .14); font-size: 10.5px; }
.th-fake-in.is-on { background: rgba(103, 89, 209, .35); border-color: var(--th-p2); color: #fff; }

/* strategy tabs */
.th-stabs { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 8px; border-radius: 12px; background: var(--th-card); border: 1px solid var(--th-line2); }
.th .th-stab {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; background: none; color: var(--th-text); font: 600 12.5px/1.2 var(--lp-font); white-space: nowrap;
}
.th .th-stab:hover { background: rgba(103, 89, 209, .12); }
.th .th-stab[aria-selected="true"] { border-color: rgba(167, 139, 250, .55); background: rgba(103, 89, 209, .2); color: #fff; }
.th-badge { padding: 1px 6px; border-radius: 4px; color: #fff; font: 800 9px/1.5 var(--lp-font); letter-spacing: .08em; text-transform: uppercase; background: #e8622c; }
.th-badge--low { background: #2f6fe0; }
.th-signal {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 14px; border-radius: 10px;
  background: var(--th-card); border: 1px solid var(--th-line2); font-size: 12.5px; color: var(--th-text);
}
.th-signal .th-eyebrow { font-size: 10px; }
.th-signal b { color: #ff7c86; font-weight: 800; }
.th-signal b.is-pos { color: var(--th-green); }
.th-signal span.th-dim { color: var(--th-muted); }

/* strategy card */
.th-sc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; }
.th-sc-l { min-width: 0; flex: 1 1 340px; }
.th-sc-title { display: flex; align-items: center; gap: 8px; color: var(--th-bright); font: 800 12px/1.3 var(--lp-font); letter-spacing: .12em; text-transform: uppercase; }
.th .th-sc-desc { margin: 8px 0; color: var(--th-text); font-size: 12.5px; line-height: 1.5; }
.th-sc-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.th-legs, .th-best, .th-worst {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; font: 700 11.5px/1.3 var(--lp-font); white-space: nowrap;
  border: 1px solid rgba(63, 207, 124, .4); background: rgba(63, 207, 124, .07); color: var(--th-green);
}
.th-worst { border-color: rgba(240, 82, 95, .45); background: rgba(240, 82, 95, .07); color: var(--th-red); }
.th-legs { white-space: normal; }
.th-sc-r { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; }
.th-xbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 8px;
  background: linear-gradient(180deg, #ef6d32, #d9561f); color: #fff; font: 700 12.5px/1 var(--lp-font); white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .14); opacity: .92;
}
.th-xbtn::after { content: ""; border-left: 6px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.th-subtabs { display: flex; flex-wrap: wrap; gap: 6px; }
.th .th-sub {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03); color: var(--th-text); font: 700 12.5px/1 var(--lp-font);
  transition: transform .15s var(--lp-ease);
}
.th .th-sub:hover { border-color: rgba(167, 139, 250, .5); }
.th .th-sub[aria-selected="true"] { background: var(--th-p); border-color: var(--th-p2); color: #fff; }
.th .th-sub.is-press, .th .th-stab.is-press, .th .th-tk.is-press, .th .th-fb.is-press, .th .th-tool.is-press { transform: scale(.94); }
.th-subpanel { margin-top: 12px; }
.th-subpanel[hidden] { display: none; }

/* chart */
.th .th-chart { position: relative; margin: 0; padding: 10px 10px 6px; border-radius: 10px; background: #0d0b1a; border: 1px solid var(--th-line); }
.th .th-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 0 0 6px; padding: 0; list-style: none; color: #cfcbea; font-size: 11.5px; }
.th .th-legend li { display: inline-flex; align-items: center; gap: 6px; }
.th-legend i { width: 30px; height: 11px; border: 2px solid #9b6bdb; background: #9b6bdb; }
.th-legend .th-lg-pnl { border-color: var(--th-green); background: transparent; }
.th-chart-stage { position: relative; height: 330px; }
.th-chart-stage canvas, .th-chart-stage svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.th-chart-stage canvas:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.th-tip {
  position: absolute; z-index: 2; top: 8px; min-width: 150px; padding: 8px 10px; border-radius: 8px; pointer-events: none;
  background: rgba(14, 12, 28, .95); border: 1px solid rgba(167, 139, 250, .4); box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  color: var(--th-text); font-size: 11.5px; line-height: 1.55; opacity: 0; transition: opacity .12s;
}
.th-tip.is-on { opacity: 1; }
.th-tip b { display: block; color: var(--th-bright); font-weight: 700; }
.th-tip .th-tip-c { color: #c4a3ff; }
.th-tip .th-tip-p { color: var(--th-green); }
.th-tip .th-tip-p.is-neg { color: var(--th-red); }
.th .th-chart-foot { margin: 4px 2px 0; color: var(--th-muted); font-size: 11.5px; }

/* tables: scroll inside their card */
.th-twrap {
  position: relative; overflow: auto; border: 1px solid var(--th-line); border-radius: 10px; background: var(--th-card);
  scrollbar-width: thin; scrollbar-color: rgba(103, 89, 209, .35) transparent;
}
.th-twrap--tall { max-height: 360px; }
.th .th-t { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.th .th-t th {
  position: sticky; top: 0; z-index: 1; padding: 9px 10px; text-align: left; white-space: nowrap; color: #fff;
  font: 800 10.5px/1.3 var(--lp-font); letter-spacing: .08em; text-transform: uppercase; background: #3b3392;
}
.th .th-t td { padding: 8px 10px; white-space: nowrap; border-bottom: 1px solid rgba(255, 255, 255, .05); color: var(--th-text); }
.th .th-t tbody tr:last-child td { border-bottom: 0; }
.th .th-t tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .015); }
.th .th-t td.is-pos, .th .th-t .is-pos { color: var(--th-green); }
.th .th-t td.is-neg, .th .th-t .is-neg { color: var(--th-red); }
.th .th-t td.th-b { color: var(--th-bright); font-weight: 700; }
.th .th-t--hist tbody tr td:first-child { box-shadow: inset 3px 0 0 #a78bfa; }   /* ts-row-pending */
.th .th-t--hist tbody tr.is-active td { background: rgba(76, 214, 143, .045); }
.th .th-t--hist tbody tr.is-active td:first-child { box-shadow: inset 3px 0 0 #4CD68F; }
.th .th-t--hist tbody tr.is-notrade td { background: rgba(226, 78, 76, .045); }
.th .th-t--hist tbody tr.is-notrade td:first-child { box-shadow: inset 3px 0 0 #E24E4C; }
.th .th-t td.th-hl-best { background: rgba(76, 214, 143, .14) !important; }
.th .th-t td.th-hl-worst { background: rgba(226, 78, 76, .14) !important; }
.th-rb, .th-st {
  display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #cfcbe6;
}
.th-rb--Bullish { color: var(--th-green); border-color: rgba(63, 207, 124, .45); background: rgba(63, 207, 124, .1); }
.th-rb--Bearish { color: var(--th-red); border-color: rgba(240, 82, 95, .45); background: rgba(240, 82, 95, .1); }
.th-st--on { color: var(--th-green); border-color: rgba(63, 207, 124, .45); background: rgba(63, 207, 124, .08); }
.th-st--off { color: var(--th-red); border-color: rgba(240, 82, 95, .45); background: rgba(240, 82, 95, .08); }
.th .th-empty { padding: 18px 12px; text-align: center; color: var(--th-muted); }

/* historical */
.th .th-hist-note { margin-bottom: 10px; color: var(--th-text); font-size: 12.5px; }
.th-rp { padding: 12px; border-radius: 12px; background: #141127; border: 1px solid var(--th-line); margin-bottom: 12px; }
.th-rp-hd { display: flex; align-items: center; gap: 8px; color: var(--th-bright); font: 800 11.5px/1.3 var(--lp-font); letter-spacing: .12em; text-transform: uppercase; }
.th-rp-hd svg { color: var(--th-p2); }
.th .th-rp-sum { margin: 10px 0 8px; color: var(--th-muted); font-size: 12px; }
.th-rp-sum b { color: var(--th-bright); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-right: 6px; }
.th-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 12px; }
.th-fg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.th .th-fb {
  min-height: 30px; padding: 0 11px; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03);
  color: var(--th-text); font: 700 12px/1 var(--lp-font); transition: transform .15s var(--lp-ease);
}
.th .th-fb:hover { border-color: rgba(167, 139, 250, .5); }
.th .th-fb[aria-pressed="true"] { background: rgba(103, 89, 209, .35); border-color: var(--th-p2); color: #fff; }
.th .th-num {
  width: 64px; height: 30px; padding: 0 8px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03); color: var(--th-text); font: 600 12px/1 var(--lp-font);
}
.th .th-num::placeholder { color: #8a86ad; }
.th-dash { color: var(--th-muted); }
.th-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.th-stat {
  position: relative; min-width: 0; padding: 11px 12px; border-radius: 10px; background: #1a1733;
  border: 1px solid var(--th-line); overflow: hidden;
}
.th-stat[data-tone="pos"] { box-shadow: inset 3px 0 0 var(--th-green); }
.th-stat[data-tone="neg"] { box-shadow: inset 3px 0 0 var(--th-red); }
.th .th-stat-k { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b4b0d4; font: 800 10px/1.3 var(--lp-font); letter-spacing: .1em; text-transform: uppercase; }
.th .th-stat-v { display: block; margin: 6px 0 2px; color: var(--th-bright); font: 800 20px/1.2 var(--lp-font-title); font-variant-numeric: tabular-nums; white-space: nowrap; }
.th-stat[data-tone="pos"] .th-stat-v { color: var(--th-green); }
.th-stat[data-tone="neg"] .th-stat-v { color: var(--th-red); }
.th .th-stat-s { display: block; min-height: 1.4em; color: var(--th-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-stat.is-changed { animation: th-flash .6s var(--lp-ease); }

/* overview */
.th-ov { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.th .th-ov dl { margin: 0; }
.th-ov-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 9px; background: #1a1733; border: 1px solid var(--th-line); font-size: 12.5px; }
.th .th-ov-row dt { color: var(--th-muted); margin: 0; }
.th .th-ov-row dd { margin: 0; color: var(--th-bright); font-weight: 700; text-align: right; }
.th .th-ov-p { grid-column: 1 / -1; color: var(--th-text); font-size: 12.5px; line-height: 1.6; }

/* ---- Theta Farming Scanner ---- */
.th-fh { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.th-fh-t { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0; }
.th .th-fh-t h3 { font: 800 20px/1.25 var(--lp-font-title); }
.th-rpill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(245, 181, 68, .55); background: rgba(245, 181, 68, .1); color: var(--th-amber);
  font: 800 10.5px/1.4 var(--lp-font); letter-spacing: .08em; text-transform: uppercase;
}
.th-rpill[data-tone="good"] { border-color: rgba(63, 207, 124, .55); background: rgba(63, 207, 124, .1); color: var(--th-green); }
.th-rpill[data-tone="bad"] { border-color: rgba(240, 82, 95, .55); background: rgba(240, 82, 95, .1); color: var(--th-red); }
.th .th-fh-d { max-width: 64ch; color: var(--th-text); font-size: 12.5px; line-height: 1.55; }
.th .th-how {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(167, 139, 250, .45); background: rgba(103, 89, 209, .14); color: #c9bdfc; font: 700 12px/1 var(--lp-font);
}
.th .th-how-body { margin-top: 10px; padding: 10px 12px; border-radius: 9px; background: rgba(103, 89, 209, .08); border: 1px solid rgba(103, 89, 209, .25); }
.th .th-how-body ol { margin: 0; padding-left: 18px; color: var(--th-text); font-size: 12.5px; line-height: 1.6; }
.th-how-body[hidden] { display: none; }
.th-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.th-kpi { min-width: 0; padding: 12px 14px; border-radius: 12px; background: var(--th-card2); border: 1px solid var(--th-line); }
.th-kpi--green { box-shadow: inset 3px 0 0 var(--th-green); }
.th-kpi--purple { box-shadow: inset 3px 0 0 var(--th-p); }
.th .th-kpi-k { display: block; color: #b4b0d4; font: 800 10px/1.3 var(--lp-font); letter-spacing: .1em; text-transform: uppercase; }
.th .th-kpi-v { display: block; margin: 8px 0 2px; color: var(--th-bright); font: 800 20px/1.2 var(--lp-font-title); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-kpi-v.is-sm { font-size: 15px; }
.th .th-kpi-s { color: var(--th-muted); font-size: 11.5px; }
.th-ctrls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 26px; }
.th-ctl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.th-ctl--slider { width: 210px; max-width: 100%; }
.th .th-ctl-l { display: inline-flex; align-items: center; gap: 6px; color: var(--th-bright); font: 800 11px/1.3 var(--lp-font); letter-spacing: .1em; text-transform: uppercase; }
.th-ticks { display: flex; justify-content: space-between; color: var(--th-muted); font-size: 11px; }
.th-val { align-self: flex-start; padding: 2px 10px; border-radius: 6px; background: rgba(103, 89, 209, .35); color: #fff; font: 800 11.5px/1.5 var(--lp-font); }
.th .th-range { width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; accent-color: var(--th-p); }
.th-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--th-p) var(--th-fill, 0%), rgba(255, 255, 255, .14) var(--th-fill, 0%)); }
.th-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #8b7cf6; border: 2px solid #c9bdfc; }
.th-range::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.th-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--th-p); }
.th-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #8b7cf6; border: 2px solid #c9bdfc; }
.th-range.is-tour::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(167, 139, 250, .25); }
.th .th-select {
  height: 36px; min-width: 160px; padding: 0 30px 0 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .14); background-color: rgba(255, 255, 255, .05); color: var(--th-text); font: 600 13px/1 var(--lp-font);
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #b4b0d4 50%), linear-gradient(135deg, #b4b0d4 50%, transparent 50%);
  background-position: calc(100% - 15px) 16px, calc(100% - 10px) 16px; background-size: 5px 5px; background-repeat: no-repeat;
}
.th .th-select option { background: #1b1838; color: var(--th-text); }
.th .th-switch {
  position: relative; width: 46px; height: 26px; padding: 0; border-radius: 13px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .1);
}
.th-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #c9c5e6; transition: transform .2s var(--lp-ease); }
.th-switch[aria-pressed="true"] { background: var(--th-p); border-color: var(--th-p2); }
.th-switch[aria-pressed="true"]::after { transform: translateX(20px); background: #fff; }
.th-sug-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.th-sug-hd .th-eyebrow { color: var(--th-bright); }
.th .th-sug-count { color: var(--th-muted); font-size: 12px; font-weight: 600; }
.th .th-t--scan td { vertical-align: middle; }
.th .th-t--scan td.th-rank { color: #7fb2ff; }
.th .th-t--scan tbody tr { position: relative; will-change: transform; }
.th .th-t--scan tbody tr.is-moving { transition: transform .45s var(--lp-ease); }
.th .th-t--scan tbody tr.is-entering { animation: th-row-in .4s var(--lp-ease) both; }
.th-chips { display: flex; flex-wrap: wrap; gap: 5px; max-width: 420px; white-space: normal; }
.th-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 9px; border-radius: 7px;
  color: #fff; font: 700 11.5px/1.3 var(--lp-font); white-space: nowrap; background: var(--th-chip, #6b5bd2);
}
.th-chip b { padding: 0 5px; border-radius: 5px; background: rgba(0, 0, 0, .35); font-size: 10.5px; font-weight: 800; }
.th-chip.is-faded { opacity: .45; }
/* theta_farming.html .bg-* (strategy colours) and .fit-chip (fit-hot / fit-good / fit-fair) */
.th-chip--cc { --th-chip: #9370DB; }
.th-chip--sps { --th-chip: #D2691E; }
.th-chip--scs { --th-chip: #4682B4; }
.th-chip--ic { --th-chip: #C47AC0; }
.th-chip--csp { --th-chip: #E6A450; color: #1a1205; }
.th-chip--ss { --th-chip: #5A6FC0; }
.th-chip b.is-hot { background: rgba(16, 185, 129, .45); color: #e3fcef; }
.th-chip--csp b.is-hot { background: rgba(6, 95, 70, .75); color: #e3fcef; }
.th-chip b.is-good { background: rgba(0, 0, 0, .28); color: #fff; }
.th-chip b.is-fair { background: rgba(239, 68, 68, .35); color: #fde2e2; }
.th-crown { flex: none; color: #fbbf24; }
.th-chip--csp .th-crown { color: #7a4a00; }
.th .th-t--scan tbody tr.is-hot td { background: rgba(245, 158, 11, .06); }
.th .th-t--scan tbody tr.is-hot td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.th .th-qr td:nth-child(5) { letter-spacing: 2px; }

/* ---- the "your turn" hint ---- */
.th-hint {
  position: absolute; left: 50%; bottom: 14px; z-index: 4; transform: translate(-50%, 8px); max-width: calc(100% - 32px);
  padding: 8px 14px; border-radius: 999px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(84, 70, 200, .96); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 6px 22px rgba(0, 0, 0, .4);
  opacity: 0; transition: opacity .3s, transform .3s var(--lp-ease);
}
.th-hint.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---- controls and footer ---- */
.th-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lp-sp-3) var(--lp-sp-5); margin-top: var(--lp-sp-4); }
.th-play { display: flex; gap: var(--lp-sp-2); }
.th-ico-play, .is-paused .th-ico-pause { display: none; }
.is-paused .th-ico-play { display: inline; }
.th .th-sample-note { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--lp-sp-2); color: var(--lp-muted); font-size: var(--lp-fs-xs); }
.th-foot { display: flex; flex-direction: column; align-items: center; gap: var(--lp-sp-4); margin-top: var(--lp-sp-6); text-align: center; }
.th-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--lp-sp-3); }
.th .th-foot-note { max-width: 66ch; color: var(--lp-muted); font-size: var(--lp-fs-sm); }
.th .th-foot-note a { color: var(--lp-accent); font-weight: 600; }
.th .th-foot-note a:hover { color: var(--lp-text); text-decoration: underline; }

/* ---- motion ---- */
@keyframes th-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes th-row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes th-flash { 0% { opacity: .55; } 100% { opacity: 1; } }
.th.is-paused *, .th.is-paused *::before, .th.is-paused *::after { animation-play-state: paused !important; }
.th-still .th-panel, .th-still .th-stat, .th-still .th-t tr { animation: none !important; transition: none !important; }

/* ---- narrower ---- */
@media (max-width: 999px) {
  .th-scroll { height: auto; overflow: visible; }
  .th-gex { grid-template-columns: minmax(0, 1fr); }
  .th-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .th-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-ois-r { align-items: flex-start; }
  .th-tkrow, .th-fakes { justify-content: flex-start; }
  .th-sc-r { justify-content: flex-start; }
  .th-chart-stage { height: 280px; }
}
@media (max-width: 640px) {
  .th-panel { padding: 12px; gap: 12px; }
  .th-bar-url { display: none; }
  .th-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-ov { grid-template-columns: minmax(0, 1fr); }
  .th-chart-stage { height: 240px; }
  .th-controls { justify-content: center; }
  .th-sample-note { justify-content: center; text-align: center; }
  .th .th-tool { padding: 0 var(--lp-sp-3); }
  .th-fakes { display: none; }
  .th-ctl--slider { width: 100%; }
  .th-hint { white-space: normal; text-align: center; border-radius: 14px; }
}
@media (max-width: 479.98px) {
  .th-ctas, .th-ctas .lp-btn { width: 100%; }
  .th-tools { border-radius: var(--lp-r); }
  .th-kpis { grid-template-columns: minmax(0, 1fr); }
  .th-xbtn { display: none; }
}

/* ---- the no-JS chart poster (an SVG; theta-demo.js swaps in the live canvas) ---- */
.th-chart-stage--poster { height: auto; }
.th .th-chart-stage--poster svg.th-poster { position: static; width: 100%; height: auto; }
.th-ax { fill: rgba(205, 200, 235, .78); font: 13px var(--lp-font); }
.th-ax--b { font-weight: 600; }