*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  background:#fafafa; color:#1a1a1a;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.4;
}

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar {
  position:fixed; left:0; top:0; bottom:0; z-index:20;
  width:220px; background:#fff; border-right:1px solid #e6e6e6;
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden;
}
.sb-brand { display:flex; align-items:center; gap:10px; padding:18px 16px 14px; border-bottom:1px solid #f0f0f0; }
.sb-logo { font-size:24px; color:#7F77DD; line-height:1; }
.sb-name { font-size:13px; font-weight:600; color:#111; }
.sb-sub  { font-size:9px; color:#888; font-family:ui-monospace,monospace; }
.sb-group { padding:10px 10px 4px; }
.sb-label { font-size:9px; color:#aaa; text-transform:uppercase; letter-spacing:.08em; font-weight:600; padding:0 8px; margin-bottom:4px; }
.sb-item {
  display:block; width:100%; text-align:left;
  background:transparent; border:none; cursor:pointer;
  padding:7px 12px; border-radius:6px; font:inherit;
  font-size:12px; color:#555; border-left:2px solid transparent;
  margin-bottom:1px;
}
.sb-item:hover { color:#7F77DD; background:#f6f4fc; }
.sb-item.active { color:#7F77DD; font-weight:600; background:#f3f1fb; border-left-color:#7F77DD; }
.sb-bottom { margin-top:auto; padding:12px 14px; border-top:1px solid #f0f0f0; display:flex; flex-direction:column; gap:8px; }

/* Mobile top bar (hidden on desktop) */
.topbar-mobile { display:none; }
@media (max-width: 768px) {
  .sidebar { left:-220px; transition:left .25s; }
  .sidebar.open { left:0; }
  .topbar-mobile {
    display:flex; align-items:center; gap:12px;
    padding:10px 16px; background:#fff; border-bottom:1px solid #e6e6e6;
    position:sticky; top:0; z-index:15;
  }
  .hamburger { background:none; border:none; font-size:22px; cursor:pointer; padding:4px 8px; }
  .topbar-title { font-size:14px; font-weight:600; color:#111; }
  .app { margin-left:0 !important; }
}

/* Old classes kept for compatibility */
.brand { display:flex; align-items:center; gap:12px; }
.navtab { display:none; } /* hide any remaining old navtabs */

.mcp-indicator { display:inline-flex; align-items:center; gap:6px;
                 padding:6px 12px; border-radius:20px;
                 background:#f1f1f1; border:1px solid #e0e0e0;
                 font-size:11px; font-weight:600; color:#666;
                 font-family:ui-monospace,monospace; cursor:help;
                 transition:all .2s; }
.mcp-dot { width:8px; height:8px; border-radius:50%; background:#888;
           box-shadow:0 0 0 0 #888; transition:all .3s; }
.mcp-indicator.online .mcp-dot { background:#1D9E75;
                                 box-shadow:0 0 0 3px #1D9E7522;
                                 animation:pulse 2s ease-in-out infinite; }
.mcp-indicator.slow .mcp-dot   { background:#BA7517;
                                 box-shadow:0 0 0 3px #BA751722; }
.mcp-indicator.offline .mcp-dot { background:#E24B4A;
                                  box-shadow:0 0 0 3px #E24B4A22; }
.mcp-indicator.online  { color:#0f6b46; background:#e6f5ee; border-color:#1D9E7544; }
.mcp-indicator.slow    { color:#8a5410; background:#faf0e1; border-color:#BA751744; }
.mcp-indicator.offline { color:#8b2321; background:#fbe7e7; border-color:#E24B4A44; }
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 3px #1D9E7522; }
  50%     { box-shadow:0 0 0 6px #1D9E7500; }
}

.mode-toggle { display:inline-flex; background:#f1f1f1; border-radius:20px;
               padding:3px; border:1px solid #e0e0e0; }
.mode-opt { background:transparent; border:none; padding:5px 14px;
            font-size:12px; font-weight:600; cursor:pointer; color:#666;
            border-radius:16px; font-family:inherit; transition:all .15s; }
.mode-opt.active { background:#111; color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.mode-opt:hover:not(.active) { color:#111; }

.source-toggle { display:inline-flex; background:#f1f1f1; border-radius:20px;
                 padding:3px; border:1px solid #e0e0e0; }
.source-opt { background:transparent; border:none; padding:5px 14px;
              font-size:12px; font-weight:600; cursor:pointer; color:#666;
              border-radius:16px; font-family:inherit; transition:all .15s; }
.source-opt.active[data-source="idx"]    { background:#1D9E75; color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.source-opt.active[data-source="crypto"] { background:#BA7517; color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.source-opt:hover:not(.active) { color:#111; }
body.source-crypto .navtab[data-page="universe"],
body.source-crypto .navtab[data-page="screener"],
body.source-crypto .navtab[data-page="ask"] { opacity:.35; pointer-events:none; }

/* ── App container ───────────────────────────────────────── */
.app { margin-left:220px; padding:24px 32px 48px; transition:padding-right .25s ease; }
body.side-open  .app { padding-right:340px; }
body.interp-open .app { padding-right:520px; }

.page { display:none; width:1140px; max-width:100%; }
.page.active { display:block; }

/* ── Search / input strip ────────────────────────────────── */
.search { background:#fff; border:1px solid #e6e6e6; border-radius:12px;
          padding:16px 18px; margin-bottom:20px; box-shadow:0 1px 3px rgba(0,0,0,.03); }
.input-wrap { display:flex; gap:10px; align-items:center; flex-wrap:nowrap; width:100%; }
.screener-region-tabs {
  display: flex; gap: 4px; margin: 12px 0 14px;
  border-bottom: 1px solid #e5e7eb; padding-bottom: 0;
}
.region-tab {
  background: transparent; border: none;
  padding: 8px 16px; font-size: 13px; font-weight: 500; color: #666;
  cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.region-tab:hover { color: #111; }
.region-tab.active { color: #5b5fc7; border-bottom-color: #5b5fc7; font-weight: 600; }
.market-select {
  appearance: none; -webkit-appearance: none;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23666'/></svg>") no-repeat right 10px center;
  border: 1px solid #d1d5db; border-radius: 8px;
  padding: 10px 28px 10px 12px;
  font-size: 13px; font-weight: 600; color: #111;
  cursor: pointer;
  flex: 0 0 110px !important; min-width: 100px !important;
}
.market-select:focus { outline: none; border-color: #5b5fc7; box-shadow: 0 0 0 2px rgba(91,95,199,0.18); }
.market-select:hover { border-color: #9ca3af; }
#q, #rt-q, #q-laplace, #q-fourier, #q-rfft, #q-rfft-peers, #q-wavelet, select {
  flex:1 1 auto !important; min-width:300px; padding:10px 14px;
  border:1px solid #dcdcdc; border-radius:8px;
  font-size:14px; background:#fff; color:#111;
  font-family:inherit; outline:none; width:100%;
}
#q:focus, #rt-q:focus, #q-laplace:focus, #q-fourier:focus, #q-rfft:focus, #q-rfft-peers:focus, #q-wavelet:focus, select:focus { border-color:#7F77DD; box-shadow:0 0 0 3px rgba(127,119,221,.15); }
.search button { background:#111; color:#fff; border:none; border-radius:8px;
                 padding:10px 22px; font-size:14px; font-weight:500; cursor:pointer; }
.search button:hover { background:#333; }
.search button:disabled { background:#888; cursor:wait; }

.status { font-size:12px; color:#888; margin-top:8px; font-family:ui-monospace,monospace; min-height:16px; }
.status.error { color:#E24B4A; }
.snap-fresh { color:#1D9E75; font-weight:600; }
.snap-stale { color:#E24B4A; font-weight:600; }

.placeholder { color:#999; font-size:14px; padding:40px; text-align:center;
               background:#fff; border:1px dashed #dcdcdc; border-radius:12px; }

/* ── Card grid for stock/universe views ──────────────────── */
.stock-wrap { width:1140px; max-width:100%; }
.stock-wrap .toolbar-row { width:896px; }
.stock-wrap .layout      { width:100%; }
.layout { display:flex; gap:20px; align-items:flex-start; }
.layout > div:first-child { flex-shrink:0; }
.layout > .panel { width:220px; flex-shrink:0; gap:6px; }
.layout > .panel .card { padding:9px 14px; }
.layout > .panel .card .lbl { font-size:9px; margin-bottom:2px; }
.layout > .panel .card .val { font-size:17px; line-height:1.15; }
.layout > .panel .card .sub2 { font-size:10px; line-height:1.25; margin-top:1px; }
.layout > .panel .badge { padding:2px 8px; font-size:10px; margin-top:3px; }
.layout-universe { display:flex; gap:20px; align-items:flex-start; }
.layout-universe > .panel { width:260px; flex-shrink:0; }

.card { background:#fff; border:1px solid #e6e6e6; border-radius:12px;
        padding:14px 18px; box-shadow:0 1px 3px rgba(0,0,0,.03); }
.card .lbl  { font-size:10px; color:#888; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.card .val  { font-size:22px; font-weight:600; color:#111; }
.card .sub2 { font-size:11px; color:#888; margin-top:2px; font-family:ui-monospace,monospace; }

.panel { display:flex; flex-direction:column; gap:10px; }
canvas { display:block; border-radius:12px; background:#fff;
         border:1px solid #e6e6e6; box-shadow:0 1px 3px rgba(0,0,0,.03); }

.badge { display:inline-block; padding:4px 12px; border-radius:5px;
         font-size:11px; font-weight:600; margin-top:6px; }

.meta { font-size:12px; color:#666; font-family:ui-monospace,monospace; }

.clusters { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.cluster  { padding:6px 12px; border-radius:6px; font-size:11px;
            border:1px solid #00000014; }
.cluster b { font-weight:600; }
.cluster-tk { color:inherit; text-decoration:none; cursor:pointer;
              border-bottom:1px dotted currentColor; }
.cluster-tk:hover { text-decoration:none; opacity:0.7;
                    border-bottom-style:solid; }

.scrub { background:#fff; border:1px solid #e6e6e6; border-radius:12px;
         padding:14px 18px; margin-top:10px; }
.scrub input[type=range] { width:100%; accent-color:#7F77DD; }
.scrub .lbl { font-size:10px; color:#888; text-transform:uppercase;
              letter-spacing:.05em; margin-bottom:6px; }

.toolbar { display:flex; gap:8px; margin-bottom:14px; }
.toolbar .btn { background:#7F77DD; color:#fff; border:none; padding:8px 16px;
                border-radius:7px; font-size:12px; font-weight:500; cursor:pointer;
                white-space:nowrap; }
.toolbar .btn:hover { background:#6B63C9; }

.toolbar-row { align-items:center; gap:14px;
               background:#fff; border:1px solid #e6e6e6; border-radius:12px;
               padding:10px 14px; box-shadow:0 1px 3px rgba(0,0,0,.03); }
.inline-scrub { flex:1; display:flex; flex-direction:column; gap:4px; min-width:200px; }
.inline-scrub input[type=range] { width:100%; accent-color:#7F77DD; margin:0; }
.inline-scrub .meta { font-size:11px; color:#888; }
.anim-btn { padding:6px 14px !important; background:#f2f2f2 !important;
            border:1px solid #e0e0e0 !important; color:#555 !important;
            white-space:nowrap; }
.anim-btn:hover { background:#111 !important; color:#fff !important; }

/* ── Realtime (causal vs reality) ────────────────────────── */
.rt-header { display:flex; justify-content:space-between; align-items:flex-start;
             gap:20px; }
.rt-title  { font-size:18px; font-weight:600; color:#111; }
.rt-sub    { font-size:12px; color:#888; margin-top:3px;
             font-family:ui-monospace,monospace; max-width:640px; }

.rt-legend-row { display:flex; gap:18px; align-items:center;
                 font-size:11px; color:#555; margin-top:8px; padding:0 4px; }
.rt-legend-item  { display:inline-flex; align-items:center; gap:6px; }
.rt-legend-swatch{ width:16px; height:3px; border-radius:2px; display:inline-block;
                   background:#888; }
.rt-legend-dot   { width:9px; height:9px; border-radius:50%; background:#7F77DD; }

.rt-disagree-flag { display:inline-block; margin-left:6px; font-size:9px;
                    padding:1px 6px; border-radius:3px;
                    background:#E24B4A; color:#fff; font-weight:600;
                    text-transform:uppercase; letter-spacing:.04em; }

/* ── Ask page ────────────────────────────────────────────── */
.ask-hero { max-width:780px; margin:24px auto 20px;
            padding:0 20px; text-align:center; }
.ask-meta-top { display:flex; justify-content:space-between; align-items:center;
                font-size:11px; color:#888; margin-bottom:40px; }
.ask-sub { font-family:ui-monospace,monospace; }
.ask-h1 { font-size:42px; font-weight:700; color:#111;
          letter-spacing:-.02em; margin:0 0 10px; line-height:1.1; }
.ask-tagline { font-size:15px; color:#666; margin:0 0 30px; line-height:1.5; }

.ask-box { position:relative; background:#fff;
           border:1px solid #e0e0e0; border-radius:20px;
           padding:4px; margin:0 auto 20px;
           box-shadow:0 4px 24px rgba(0,0,0,.06),
                      0 1px 3px rgba(0,0,0,.04);
           transition:all .2s; }
.ask-box:focus-within { border-color:#7F77DD;
                        box-shadow:0 4px 28px rgba(127,119,221,.18),
                                   0 0 0 4px rgba(127,119,221,.08); }
.ask-box textarea { width:100%; border:none; outline:none;
                    background:transparent; resize:none;
                    padding:20px 22px 8px;
                    font-family:inherit; font-size:16px; color:#111;
                    line-height:1.5; min-height:80px; }
.ask-box textarea::placeholder { color:#aaa; }
.ask-box-bar { display:flex; justify-content:space-between; align-items:center;
               padding:8px 16px 12px; }
.ask-hint { font-size:11px; color:#aaa; font-family:ui-monospace,monospace; }
.ask-btn { display:inline-flex; align-items:center; gap:8px;
           background:#111; color:#fff; border:none;
           padding:10px 22px; border-radius:12px;
           font-size:14px; font-weight:600; cursor:pointer;
           font-family:inherit; transition:all .15s; }
.ask-btn:hover { background:#7F77DD; transform:translateY(-1px);
                 box-shadow:0 6px 18px rgba(127,119,221,.35); }
.ask-btn:disabled { background:#888; cursor:wait; }
.ask-btn-icon { font-size:16px; }

.ask-examples { display:flex; flex-wrap:wrap; gap:8px;
                justify-content:center; margin-top:10px; }
.ask-chip { font-size:12px; padding:7px 14px; border-radius:999px;
            background:#f3f1fb; color:#7F77DD; border:1px solid #7F77DD33;
            cursor:pointer; font-weight:500; transition:all .15s; }
.ask-chip:hover { background:#7F77DD; color:#fff; transform:translateY(-1px); }

.ask-intent { font-size:13px; color:#555; padding:12px 16px;
              background:#f8f8fb; border-left:3px solid #7F77DD;
              border-radius:6px; margin-bottom:14px; }
.ask-intent b { color:#111; }

.ask-results { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
               gap:10px; }
.ask-card { background:#fff; border:1px solid #e6e6e6; border-radius:10px;
            padding:14px 16px; cursor:pointer; transition:all .15s; }
.ask-card:hover { border-color:#7F77DD; transform:translateY(-1px);
                  box-shadow:0 4px 12px rgba(127,119,221,.1); }
.ask-card .head { display:flex; justify-content:space-between; align-items:baseline; }
.ask-card .ticker { font-size:16px; font-weight:600; color:#111; }
.ask-card .rank   { font-size:10px; color:#888; font-family:ui-monospace,monospace; }
.ask-card .reason { font-size:12px; color:#444; margin-top:6px; line-height:1.5; }

/* ── Screener ────────────────────────────────────────────── */
.screener-filters { display:flex; flex-direction:column; gap:14px; }
.filter-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.filter-label { font-size:11px; color:#888; font-weight:600;
                text-transform:uppercase; letter-spacing:.05em;
                width:100px; flex-shrink:0; }
.chip-row { display:flex; gap:6px; flex-wrap:wrap; }
.chip { background:#f6f6f6; border:1px solid #e0e0e0; color:#555;
        padding:6px 12px; border-radius:999px; font-size:12px;
        font-weight:500; cursor:pointer; font-family:inherit;
        transition:all .15s; }
.chip:hover { background:#eee; color:#111; }
.chip.active { background:var(--bg, #e7f0fb); color:var(--c, #378ADD);
               border-color:var(--c, #378ADD); font-weight:600; }
.chip.pair.active { background:#f3f1fb; color:#7F77DD; border-color:#7F77DD; }
.bucket-chip .bucket-count { display:inline-block; margin-left:6px;
                              padding:1px 7px; border-radius:999px;
                              background:#0000000d; font-size:10px;
                              font-weight:600; color:inherit; }
.bucket-chip.active .bucket-count { background:#ffffff33; }
.chip-placeholder { font-size:11px; color:#aaa;
                    font-family:ui-monospace,monospace; padding:6px 4px; }

.btn-run { background:#111; color:#fff; border:none; border-radius:8px;
           padding:9px 22px; font-size:13px; font-weight:500; cursor:pointer; }
.btn-run:hover { background:#333; }
.btn-refresh { background:transparent; border:1px solid #e0e0e0; color:#666;
               padding:9px 14px; border-radius:8px; font-size:12px; cursor:pointer; }
.btn-refresh:hover { background:#f2f2f2; color:#111; }
.btn-refresh:disabled { cursor:wait; opacity:.5; }

.screen-meta { font-size:11px; color:#888; margin-bottom:10px;
               font-family:ui-monospace,monospace; }
.screen-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
               gap:10px; }
.screen-card { background:#fff; border:1px solid #e6e6e6; border-radius:10px;
               padding:12px 14px; cursor:pointer; transition:all .15s;
               display:flex; flex-direction:column; gap:3px; }
.screen-card:hover { border-color:#7F77DD; transform:translateY(-1px);
                     box-shadow:0 4px 12px rgba(127,119,221,.1); }
.screen-card .card-head { display:flex; justify-content:space-between; align-items:center; }
.screen-card .ticker { font-size:16px; font-weight:600; color:#111; }
.screen-card .sector { font-size:10px; color:#888; }
.bias-flag { font-size:9px; font-weight:700; padding:2px 6px;
             border-radius:4px; text-transform:uppercase; letter-spacing:.03em;
             cursor:help; white-space:nowrap; }
.bias-flag.bias-some    { background:#FFC107; color:#3a2a00; border:1px solid #C79400; }
.bias-flag.bias-high    { background:#FF6F00; color:#fff;    border:1px solid #C85600;
                          box-shadow:0 1px 3px rgba(255,111,0,.35); }
.bias-flag.bias-extreme { background:#D32F2F; color:#fff;    border:1px solid #9A0007;
                          box-shadow:0 1px 4px rgba(211,47,47,.45);
                          animation:bias-pulse 2s ease-in-out infinite; }
@keyframes bias-pulse {
  0%,100% { box-shadow:0 1px 4px rgba(211,47,47,.45); }
  50%     { box-shadow:0 1px 8px rgba(211,47,47,.75); }
}
.screen-card .regime-badge { font-size:10px; padding:2px 8px; border-radius:4px;
                             display:inline-block; font-weight:600;
                             width:max-content; margin-top:4px; }
.screen-card .metrics { display:flex; gap:10px; margin-top:6px;
                        font-size:11px; color:#555; font-family:ui-monospace,monospace; }
.screen-card .metrics b { color:#111; }
/* ── Screener tabs ────────────────────────────── */
.screener-tabs { display:flex; gap:4px; margin-bottom:16px; }
.screener-tab {
  background:transparent; border:none; cursor:pointer;
  padding:8px 18px; border-radius:8px; font:inherit; color:#888;
}
.screener-tab:hover { background:#f0f0ee; color:#111; }
.screener-tab.active { background:#111; color:#fff; }
.screener-panel { display:none; }
.screener-panel.active { display:block; }

/* ── Quick Classes ───────────────────────────── */
.classes-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:10px; margin-bottom:16px;
}
.class-card {
  background:#fff; border:1px solid #e6e6e6; border-radius:12px;
  padding:16px 18px; cursor:pointer; transition:all .15s;
  border-left:4px solid #ddd;
}
.class-card:hover { border-color:#7F77DD; transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.class-card .class-name { font-size:14px; font-weight:700; color:#111; margin-bottom:4px; }
.class-card .class-desc { font-size:11px; color:#666; line-height:1.5; margin-bottom:8px; }
.class-card .class-tags { display:flex; gap:5px; flex-wrap:wrap; }
.class-card .class-tag {
  font-size:9px; font-family:ui-monospace,monospace;
  padding:2px 7px; border-radius:4px; background:#f6f6f6; color:#555;
}
.class-card.buy-class  { border-left-color:#1D9E75; }
.class-card.sell-class { border-left-color:#E24B4A; }
.class-card.hold-class { border-left-color:#378ADD; }
.class-card.watch-class { border-left-color:#BA7517; }
.class-card.active { border-color:#7F77DD; background:#f8f6ff; }

/* ── Animations page ─────────────────────────── */
.anim-menu {
  position:sticky; top:80px;
  background:#fff; border:1px solid #e6e6e6; border-radius:12px;
  padding:16px 14px; box-shadow:0 1px 3px rgba(0,0,0,.03);
  display:flex; flex-direction:column; gap:2px;
}
.anim-nav {
  display:block; width:100%; text-align:left;
  background:transparent; border:none; cursor:pointer;
  padding:6px 10px; border-radius:6px; font:inherit;
  font-size:12px; color:#444; border-left:2px solid transparent;
}
.anim-nav:hover { color:#7F77DD; background:#f6f4fc; }
.anim-nav.active { color:#7F77DD; font-weight:600; background:#f3f1fb; border-left-color:#7F77DD; }
.anim-content { min-width:0; }
.anim-page { display:none; }
.anim-page.active { display:block; }
.anim-page h2 { font-size:20px; font-weight:600; color:#111; margin:0 0 4px; }
.anim-lead { font-size:14px; color:#555; margin-bottom:16px;
             font-family:ui-monospace,monospace; }
.anim-img { width:100%; max-width:800px; border-radius:10px;
            border:1px solid #e6e6e6; margin-bottom:16px; }
.anim-explain { background:#fff; border:1px solid #e6e6e6; border-radius:12px;
                padding:24px 28px; line-height:1.65; font-size:14px; color:#333; }
.anim-explain p { margin:8px 0; }
.anim-explain code { background:#f2f2f2; padding:1px 6px; border-radius:4px; font-size:12px; }
.anim-explain ul { margin:8px 0 8px 22px; }
.anim-explain li { margin:5px 0; }

/* Interactive widget stage */
.anim-stage {
  background:#fff; border:1px solid #e6e6e6; border-radius:12px;
  padding:16px 16px 12px; margin-bottom:14px;
  display:grid; gap:14px;
  grid-template-columns:1fr;
}
.anim-svg { width:100%; height:auto; display:block;
            background:#fafafa; border-radius:10px; border:1px solid #ececec;
            user-select:none; touch-action:none; }
.anim-svg-square { max-width:420px; aspect-ratio:1/1; margin:0 auto; }
.anim-svg-wide   { width:100%; max-width:720px; }
.anim-grid-2 { display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width: 720px) {
  .anim-grid-2 { grid-template-columns:2fr 1fr; align-items:start; }
}
.anim-controls {
  display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  padding:8px 4px 0;
}
.anim-controls label {
  display:flex; flex-direction:column; gap:4px;
  font-size:11px; color:#555; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em;
}
.anim-controls label .ctrl-val {
  display:inline-block; min-width:50px;
  font-family:ui-monospace,monospace; font-weight:700;
  color:#7F77DD; text-transform:none; letter-spacing:0;
}
.anim-controls input[type=range] {
  width:100%; accent-color:#7F77DD; height:18px;
}
.anim-play-btn {
  align-self:end;
  background:#7F77DD; color:#fff; border:none; border-radius:8px;
  padding:8px 14px; font-weight:600; cursor:pointer; font-size:13px;
  height:36px;
}
.anim-play-btn:hover { background:#5a51c8; }

.anim-readout {
  display:grid; gap:6px 16px;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  font-family:ui-monospace,monospace; font-size:12px; color:#333;
  background:#f7f7fa; border-radius:8px; padding:10px 14px;
}
.anim-readout b { color:#111; font-weight:700; }

/* Callout cluster */
.anim-callouts { display:grid; gap:10px; }
.anim-callout {
  background:#fff; border:1px solid #e6e6e6; border-radius:10px;
  padding:14px 18px; line-height:1.6; font-size:13.5px; color:#333;
  border-left:3px solid #ddd;
}
.anim-callout b { color:#111; }
.anim-callout code { background:#f2f2f2; padding:1px 5px; border-radius:4px; font-size:12px; }
.anim-callout ul, .anim-callout ol { margin:8px 0 4px 22px; }
.anim-callout li { margin:4px 0; }
.anim-callout .dot { display:inline-block; width:9px; height:9px; border-radius:50%; vertical-align:middle; margin-right:4px; }
.anim-callout.teach   { border-left-color:#378ADD; background:#f5faff; }
.anim-callout.history { border-left-color:#888780; background:#fafaf8; }
.anim-callout.try     { border-left-color:#1D9E75; background:#f4fbf7; }
.anim-callout.link    { border-left-color:#BA7517; background:#fdf8f0; }

.anim-callout-live {
  background:linear-gradient(180deg, #ffffff, #f3f1fb);
  border:1.5px solid #c9c2f4; border-radius:12px;
  padding:14px 18px; box-shadow:0 1px 3px rgba(127,119,221,.10);
}
.anim-callout-live .cl-tag {
  display:inline-block; font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:#7F77DD; background:#fff; border:1px solid #c9c2f4;
  border-radius:4px; padding:2px 7px; margin-bottom:6px;
}
.anim-callout-live .cl-body {
  font-size:14px; line-height:1.55; color:#222;
}
.anim-callout-live .cl-body b { color:#5a51c8; }

.screen-card .pi-row { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.screen-card .pi-tag { font-size:9px; font-family:ui-monospace,monospace;
  padding:2px 6px; background:#f6f6f6; border-radius:4px; color:#555; }
.screen-card .pi-next { font-size:9px; font-family:ui-monospace,monospace;
  margin-top:4px; color:#888; }
.filter-sub { font-size:9px; color:#bbb; font-weight:400; }

.action-pill { display:inline-block; width:max-content; margin-top:4px;
               font-size:10px; font-weight:700; letter-spacing:.3px;
               padding:2px 8px; border-radius:10px; border:1px solid transparent;
               font-family:ui-monospace,monospace; }
.action-pill.act-buy    { background:#e6f5ee; color:#0f6a47; border-color:#1D9E75; }
.action-pill.act-add    { background:#e7f0fb; color:#1b4f8a; border-color:#378ADD; }
.action-pill.act-hold   { background:#f0f0ee; color:#555;    border-color:#aaa;    }
.action-pill.act-reduce { background:#faf0e1; color:#7a4a00; border-color:#BA7517; }
.action-pill.act-sell   { background:#fbe7e7; color:#8a1f1f; border-color:#E24B4A; }

/* ── Theory page ─────────────────────────────────────────── */
.theory-page.active { display:grid; grid-template-columns:200px 1fr; gap:28px;
                      align-items:flex-start; }
.theory-toc { position:sticky; top:80px; background:#fff;
              border:1px solid #e6e6e6; border-radius:12px;
              padding:18px 16px; font-size:12px;
              box-shadow:0 1px 3px rgba(0,0,0,.03); max-height:calc(100vh - 110px);
              overflow-y:auto; }
.toc-label { font-size:10px; color:#888; text-transform:uppercase;
             letter-spacing:.08em; font-weight:600; margin-bottom:10px; }
.theory-toc ul, .theory-toc ol { list-style:none; margin:0; padding:0; }
.theory-toc li { margin:4px 0; padding-left:10px; }
.theory-toc a { color:#444; text-decoration:none; font-size:12px; cursor:pointer;
                display:block; padding:3px 6px; border-radius:5px;
                border-left:2px solid transparent; }
.theory-toc a:hover { color:#7F77DD; background:#f6f4fc; }
.theory-toc a.active-link { color:#7F77DD; font-weight:600; background:#f3f1fb;
                            border-left-color:#7F77DD; }

/* Accordion groups */
.toc-group { margin-bottom:4px; border-bottom:1px solid #f0f0f0; }
.toc-group:last-child { border-bottom:none; }
.toc-group-head { width:100%; background:transparent; border:none;
                  display:flex; justify-content:space-between; align-items:center;
                  padding:10px 4px; cursor:pointer; font-family:inherit;
                  font-size:11px; font-weight:600; color:#111;
                  text-transform:uppercase; letter-spacing:.04em; text-align:left; }
.toc-group-head:hover { color:#7F77DD; }
.toc-caret { font-size:10px; color:#aaa; transition:transform .18s ease; }
.toc-group.open .toc-caret { transform:rotate(90deg); }
.toc-group-body { max-height:0; overflow:hidden;
                  transition:max-height .22s ease;
                  padding-left:4px; }
.toc-group.open .toc-group-body { max-height:1200px; padding-bottom:8px; }

/* Level 3: subtopics inside an active topic */
.toc-topic { padding-left:0; }
.toc-sub-body { max-height:0; overflow:hidden; list-style:none;
                margin:0; padding:0 0 0 14px;
                transition:max-height .22s ease; }
.toc-topic.expanded .toc-sub-body { max-height:600px; padding-top:3px;
                                    padding-bottom:4px; }
.toc-sub-body li { margin:2px 0; padding-left:8px;
                   border-left:1px solid #eee; }
.toc-sublink { display:block; padding:2px 6px; font-size:11px;
               color:#666; text-decoration:none; cursor:pointer;
               border-radius:4px; border-left:2px solid transparent; }
.toc-sublink:hover { color:#7F77DD; background:#f6f4fc; }
.toc-sublink.active-sublink { color:#7F77DD; font-weight:600;
                              background:#f3f1fb; border-left-color:#7F77DD; }

.topic { display:none; }
.topic.active { display:block; }
.topic-container { min-height:300px; }

/* When a sub-page is selected, hide the topic lead and only show the active sub-section */
.topic .sub-section { display:none; }
.topic.active.sub-mode .topic-lead { display:none; }
.topic.active.sub-mode .topic-nav { display:none; }
.topic.active.sub-mode .sub-section.active { display:block; }

/* Sub-section back link (top of each sub page) */
.sub-section-head { margin-bottom:18px; }
.sub-back { display:inline-block; font-size:12px; color:#888;
            text-decoration:none; padding:6px 12px; border-radius:6px;
            background:#f6f6f6; cursor:pointer; }
.sub-back:hover { background:#111; color:#fff; }

/* Jump card grid shown inside topic lead */
.sub-jump-wrap { margin-top:24px; padding-top:20px;
                 border-top:1px solid #eee; }
.sub-jump-label { font-size:10px; color:#888; text-transform:uppercase;
                  letter-spacing:.05em; font-weight:600; margin-bottom:10px; }
.sub-jump-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
                 gap:10px; }
.sub-jump-card { display:flex; align-items:center; gap:10px;
                 padding:14px 16px; background:#fafafa;
                 border:1px solid #eee; border-radius:10px;
                 font-size:13px; color:#333; text-decoration:none;
                 cursor:pointer; transition:all .15s; font-weight:500; }
.sub-jump-card:hover { background:#7F77DD; color:#fff; border-color:#7F77DD;
                       transform:translateY(-1px); }
.sub-jump-card:hover .sub-jump-arrow { color:#fff; }
.sub-jump-arrow { color:#7F77DD; font-weight:700; transition:color .15s; }

/* Sub-section prev / next nav */
.sub-nav { display:flex; justify-content:space-between;
           margin-top:32px; padding-top:18px; border-top:1px solid #eee;
           gap:16px; }
.sub-nav a { font-size:12px; color:#666; text-decoration:none;
             padding:8px 14px; background:#f6f6f6; border-radius:7px;
             max-width:45%; cursor:pointer; }
.sub-nav a:hover { background:#111; color:#fff; }
.sub-nav span { flex:1; }
.topic-breadcrumb { font-size:13px; color:#666; margin:10px 0 18px;
                    padding:10px 14px; background:#f8f8fb; border-radius:8px; }
.topic-breadcrumb a { color:#7F77DD; font-weight:500; text-decoration:none; }
.topic-nav { display:flex; justify-content:space-between;
             margin-top:30px; padding-top:18px; border-top:1px solid #eee;
             gap:16px; }
.topic-nav a { font-size:12px; color:#666; text-decoration:none;
               padding:8px 14px; background:#f6f6f6; border-radius:7px;
               max-width:45%; cursor:pointer; }
.topic-nav a:hover { background:#111; color:#fff; }
.topic-nav span { flex:1; }
.topic-nav .nav-next { text-align:right; margin-left:auto; }

/* Term hyperlinks */
.term { color:#7F77DD; text-decoration:underline dotted; text-underline-offset:3px;
        cursor:pointer; font-weight:500; }
.term:hover { color:#5a52b3; text-decoration-style:solid; }

/* Term popover overlay */
.term-overlay { position:fixed; inset:0; background:rgba(10,10,20,.35);
                display:none; align-items:center; justify-content:center;
                z-index:100; padding:20px; }
.term-overlay.open { display:flex; }
.term-card { background:#fff; border-radius:14px; max-width:640px; width:100%;
             padding:28px 32px; box-shadow:0 20px 60px rgba(0,0,0,.25);
             animation:popin .18s ease; max-height:85vh; overflow-y:auto; }
@keyframes popin { from { transform:translateY(8px); opacity:0; }
                   to   { transform:translateY(0);  opacity:1; } }
.term-back { background:#f2f2f2; border:none; color:#555;
             font-size:12px; padding:6px 14px; border-radius:6px;
             cursor:pointer; font-family:inherit; margin-bottom:14px; }
.term-back:hover { background:#111; color:#fff; }
.term-title { font-size:20px; font-weight:600; color:#111; margin-bottom:10px; }
.term-body  { font-size:14px; color:#333; line-height:1.65; white-space:pre-wrap; }

.theory { background:#fff; border:1px solid #e6e6e6; border-radius:12px;
          padding:36px 48px; line-height:1.65;
          box-shadow:0 1px 3px rgba(0,0,0,.03); min-width:0; }
.theory h1 { font-size:26px; color:#111; margin-bottom:6px; font-weight:600; }
.theory .lead { color:#555; font-size:14px; margin-bottom:24px; }
.theory h2 { font-size:16px; color:#111; margin:32px 0 12px; font-weight:600;
              scroll-margin-top:80px; padding-top:4px;
              border-top:1px solid #f0f0f0; padding:18px 0 0; }
.theory h2:first-of-type { border-top:none; padding-top:0; }
.theory h3 { font-size:14px; color:#222; margin:22px 0 8px; font-weight:600;
             scroll-margin-top:80px; }
.theory p  { color:#333; margin:8px 0; font-size:14px; }
.theory ul { margin:8px 0 8px 22px; color:#333; font-size:14px; }
.theory li { margin:3px 0; }
.theory code { background:#f2f2f2; padding:1px 6px; border-radius:4px; font-size:12px; }
.eq { font-family:ui-monospace,monospace; font-size:13px; color:#444;
      background:#f6f6f6; padding:12px 16px; border-radius:8px; margin:14px 0;
      border-left:3px solid #7F77DD; line-height:1.7; }
.eq.big { font-size:16px; padding:18px 22px; text-align:center; color:#111; }
.eq.small { font-size:11px; padding:8px 10px; }
.eq sup, .eq sub { font-size:.75em; }
.pipeline { font-family:ui-monospace,monospace; font-size:12px; color:#555;
            background:#f6f6f6; padding:14px; border-radius:8px;
            border-left:3px solid #7F77DD; }
.regime-table { width:100%; border-collapse:collapse; margin:10px 0; font-size:13px; }
.regime-table th { text-align:left; padding:8px 12px; background:#f6f6f6;
                   color:#555; font-weight:600; font-size:11px;
                   text-transform:uppercase; letter-spacing:.04em; }
.regime-table td { padding:8px 12px; border-top:1px solid #eee; color:#333; }

.theory ol { margin:8px 0 8px 22px; color:#333; font-size:14px; }
.theory ol li { margin:5px 0; }
.theory .big-list li { margin:10px 0; }

.callout { background:#f3f1fb; border-left:3px solid #7F77DD;
           border-radius:8px; padding:14px 18px; margin:14px 0;
           font-size:14px; color:#333; line-height:1.55; }
.callout.market { background:#e6f5ee; border-left-color:#1D9E75;
                  color:#1d3d2e; }
.callout.market b { color:#0f6b46; }

.roadmap { list-style:none; margin:12px 0; padding:0; }
.roadmap li { padding:12px 16px; margin:8px 0; background:#fafafa;
              border:1px solid #eee; border-radius:8px; font-size:13px;
              color:#333; line-height:1.55; }
.roadmap li b { color:#111; }

.quadrant-grid { width:100%; border-collapse:separate; border-spacing:10px;
                 margin:12px 0; }
.q { padding:14px 16px; border-radius:10px; vertical-align:top;
     border:1px solid; line-height:1.45; }
.q.good    { background:#e6f5ee; border-color:#1D9E7544; }
.q.warn    { background:#fbe7e7; border-color:#E24B4A55; }
.q.neutral { background:#e7f0fb; border-color:#378ADD44; }
.q.bad     { background:#f0f0ee; border-color:#88878044; }
.q-label   { font-size:11px; font-weight:600; color:#666;
             text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.q-action  { font-size:16px; font-weight:600; color:#111; margin-bottom:6px; }
.q-desc    { font-size:13px; color:#444; }

.stages { list-style:none; margin:10px 0; padding:0; }
.stages li { padding:10px 0; border-top:1px solid #eee; font-size:14px;
             color:#333; line-height:1.55; }
.stages li:first-child { border-top:none; }
.stages .dot { display:inline-block; width:12px; height:12px; border-radius:3px;
               margin-right:10px; vertical-align:middle; }

/* ── Side panel (reference) ──────────────────────────────── */
.side {
  position:fixed; top:0; right:-340px; width:340px; height:100vh;
  background:#fff; border-left:1px solid #e6e6e6;
  box-shadow:-2px 0 12px rgba(0,0,0,.04);
  transition:right .25s ease; z-index:9; overflow-y:auto;
}
body.side-open .side { right:0; }
.side-head { display:flex; justify-content:space-between; align-items:center;
             padding:18px 20px; border-bottom:1px solid #eee; font-size:13px; color:#111; }
.side-close { background:none; border:none; font-size:22px; color:#888;
              cursor:pointer; line-height:1; padding:0 4px; }
.side-close:hover { color:#111; }
.side-body { padding:18px 20px; font-size:12px; color:#444; line-height:1.6; }
.side-body h4 { font-size:11px; color:#888; text-transform:uppercase;
                letter-spacing:.05em; margin:14px 0 6px; }
.side-body h4:first-child { margin-top:0; }
.side-body p { margin:4px 0; }
.ref-list { list-style:none; margin:0; padding:0; }
.ref-list li { display:flex; align-items:center; gap:8px; padding:3px 0; }
.ref-list .dot { width:10px; height:10px; border-radius:2px; flex-shrink:0; }

/* ── Interpret panel ─────────────────────────────────────── */
.interpret {
  position:fixed; top:0; right:-520px; width:520px; height:100vh;
  background:#fff; border-left:1px solid #e6e6e6;
  box-shadow:-2px 0 12px rgba(0,0,0,.06);
  transition:right .28s ease; z-index:11; overflow-y:auto;
}
body.interp-open .interpret { right:0; }
.interpret-head { display:flex; justify-content:space-between; align-items:center;
                  padding:18px 22px; border-bottom:1px solid #eee; font-size:13px; color:#111; }
.interpret-body { padding:22px 26px; font-size:13px; color:#222; line-height:1.6;
                  font-family:system-ui,sans-serif; }
.interpret-body .placeholder { background:none; border:none; padding:20px 0; }
.interpret-body h1 { font-size:17px; font-weight:600; color:#111;
                     margin:18px 0 8px; padding-bottom:6px; border-bottom:1px solid #eee; }
.interpret-body h2 { font-size:14px; font-weight:600; color:#111;
                     text-transform:uppercase; letter-spacing:.04em;
                     margin:20px 0 8px; color:#7F77DD; }
.interpret-body h3 { font-size:13px; font-weight:600; color:#333;
                     margin:14px 0 6px; }
.interpret-body p  { margin:8px 0; color:#333; }
.interpret-body ul { list-style:none; margin:8px 0; padding:0; }
.interpret-body li { margin:8px 0; padding-left:18px; position:relative; color:#333; }
.interpret-body li::before { content:"›"; position:absolute; left:0; top:0;
                             color:#7F77DD; font-weight:700; }
.interpret-body strong { color:#111; font-weight:600; }
.interpret-body code { background:#f2f2f2; padding:1px 6px; border-radius:4px;
                       font-size:12px; font-family:ui-monospace,monospace; }
.interpret-body h2:first-child, .interpret-body h1:first-child,
.interpret-body p:first-child { margin-top:0; }

/* ── Laplace page ───────────────────────────────────────────── */
.laplace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  gap: 14px;
  margin-top: 12px;
}
.laplace-price-card     { grid-column: 1 / -1; grid-row: 1; }
.laplace-splane-card    { grid-column: 1; grid-row: 2 / span 2; }
.laplace-behavior-card  { grid-column: 2; grid-row: 2; }
.laplace-sigma-card     { grid-column: 2; grid-row: 3; }
.laplace-omega-card     { grid-column: 1; grid-row: 4; }
.laplace-quadrant-card  { grid-column: 2; grid-row: 4; }
@media (max-width: 1100px) {
  .laplace-grid { grid-template-columns: 1fr; }
  .laplace-price-card, .laplace-splane-card, .laplace-behavior-card,
  .laplace-sigma-card, .laplace-omega-card,
  .laplace-quadrant-card { grid-column: 1; grid-row: auto; }
}
#laplace-price { width: 100%; height: auto; max-height: 200px; display: block; }

.laplace-splane { width: 100%; }
.splane-svg     { width: 100%; height: auto; display: block; }
.laplace-spark-svg { width: 100%; height: 90px; display: block; }

.laplace-behavior { display: flex; flex-direction: column; gap: 12px; }
.laplace-behavior .bh-row { display: flex; flex-direction: column; gap: 3px; }
.laplace-behavior .bh-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: #888; font-weight: 600;
}
.laplace-behavior .bh-text { color: #222; font-size: 13px; line-height: 1.4; }

.laplace-vitals {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid #eee;
}
.laplace-vitals > div { display: flex; flex-direction: column; gap: 2px; }
.laplace-vitals .lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #888;
}
.laplace-vitals .val {
  font-family: ui-monospace, monospace; font-size: 13px; color: #222; font-weight: 600;
}

/* Timeline strip below the s-plane */
.laplace-timeline {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px 4px; border-top: 1px solid #f0f0f0; margin-top: 8px;
}
.laplace-play-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: #222; color: #fff; border: 0; cursor: pointer;
  font-size: 11px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 120ms;
}
.laplace-play-btn:hover { background: #444; }
#laplace-slider {
  flex: 1; height: 4px; -webkit-appearance: none; appearance: none;
  background: #e0e0e0; border-radius: 2px; cursor: pointer; padding: 0;
}
#laplace-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent, #378ADD); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#laplace-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; border: 0;
  background: var(--accent, #378ADD); cursor: pointer;
}
#laplace-speed {
  padding: 5px 8px; border: 1px solid #ddd; border-radius: 5px;
  background: #fafafa; font-size: 11px; color: #444;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 6px center;
  background-size: 9px 6px; padding-right: 22px; cursor: pointer;
}
.laplace-cursor {
  font-family: ui-monospace, monospace; font-size: 11px;
  color: #666; min-width: 180px; text-align: right;
}

/* Sparkline current-bar marker (rendered inline by drawSparkline). */

.quad-grid { display: flex; flex-direction: column; gap: 8px; }
.quad-row {
  display: grid; grid-template-columns: 220px 1fr 80px;
  align-items: center; gap: 12px; font-size: 12px;
}
.quad-label { color: #444; }
.quad-bar-wrap { background: #f0f0f0; border-radius: 4px; height: 14px; overflow: hidden; }
.quad-bar { height: 100%; transition: width 200ms; }
.quad-value { color: #444; font-family: ui-monospace, monospace; text-align: right; }
@media (max-width: 700px) {
  .quad-row { grid-template-columns: 140px 1fr 60px; }
  .quad-label { font-size: 11px; }
}

/* ── Fourier page ───────────────────────────────────────────── */
.fourier-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 14px;
  margin-top: 12px;
}
.fourier-periodogram-card    { grid-column: 1; grid-row: 1; }
.fourier-catalogue-card      { grid-column: 2; grid-row: 1; }
.fourier-reconstruction-card { grid-column: 1 / -1; grid-row: 2; }
.fourier-spectrogram-card    { grid-column: 1 / -1; grid-row: 3; }
@media (max-width: 1100px) {
  .fourier-grid { grid-template-columns: 1fr; }
  .fourier-periodogram-card,
  .fourier-catalogue-card,
  .fourier-reconstruction-card,
  .fourier-spectrogram-card { grid-column: 1; grid-row: auto; }
}

.periodogram-svg, .spectrogram-svg, .coherence-svg {
  width: 100%; height: auto; display: block;
}
#fourier-recon { width: 100%; height: auto; max-height: 220px; display: block; }

/* Cycle catalogue table */
.cycle-tbl {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.cycle-tbl th {
  text-align: left; padding: 6px 8px; font-size: 10px;
  text-transform: uppercase; letter-spacing: .04em;
  color: #888; background: #fafafa; font-weight: 600;
  border-bottom: 1px solid #eee;
}
.cycle-tbl td {
  padding: 7px 8px; border-bottom: 1px solid #f4f4f4;
  color: #333; vertical-align: middle;
}
.cycle-tbl .num { font-family: ui-monospace, monospace; }
.cycle-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.sig-pill {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600;
}

.coherence-text {
  font-size: 12px; color: #333; padding: 8px 4px 0; line-height: 1.45;
}

/* Long-history toggle in the Fourier search row */
.fourier-long-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: 1px solid #dcdcdc; border-radius: 8px;
  background: #fafafa; cursor: pointer; font-size: 12px; color: #333;
  white-space: nowrap; user-select: none;
}
.fourier-long-toggle:hover { background: #fff; border-color: #7F77DD; }
.fourier-long-toggle input[type="checkbox"] {
  margin: 0; cursor: pointer; width: 14px; height: 14px;
  accent-color: #7F77DD; appearance: auto;
}
.fourier-long-toggle:has(input:checked) {
  background: #f0eefc; border-color: #7F77DD;
  color: #4d40b8; font-weight: 600;
}

/* Spectrogram column highlight + window indicator */
.spectrogram-svg { cursor: crosshair; }
.spectrogram-svg .col-highlight {
  fill: none; stroke: #fff; stroke-width: 2; pointer-events: none;
}
.fourier-window-indicator {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px; font-size: 11px; color: #666;
}
.fourier-window-indicator .fwin-pill {
  background: #f0eefc; color: #4d40b8;
  padding: 3px 8px; border-radius: 10px; font-weight: 600;
  font-family: ui-monospace, monospace;
}
.fourier-window-indicator button {
  background: transparent; border: 1px solid #ddd; color: #666;
  padding: 3px 10px; border-radius: 6px; cursor: pointer; font-size: 11px;
}
.fourier-window-indicator button:hover { background: #fafafa; color: #222; }

/* ── Timeframe pill row (above the price chart in stock view) ─────── */
.tf-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: rgba(0,0,0,0.04);
  margin: 0 auto 6px;
  width: 100%;
  justify-content: center;
}
.tf-btn {
  font: 600 11px/1 ui-monospace, system-ui, sans-serif;
  letter-spacing: .3px;
  padding: 5px 9px;
  min-width: 32px;
  text-align: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #888;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.tf-btn:hover { color: #222; background: rgba(127,119,221,0.10); }
.tf-btn.active {
  background: #7F77DD;
  color: #fff;
  box-shadow: 0 1px 2px rgba(127,119,221,0.30);
}

/* ── Behavior profile page ──────────────────────────────────────── */
#page-behavior .bh-toolbar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  padding: 10px 14px; background: #fff; border: 1px solid #e6e6e6;
  border-radius: 10px; flex-wrap: wrap;
}
.bh-select {
  font: 13px ui-sans-serif, system-ui;
  padding: 6px 10px; border: 1px solid #d0d0d0; border-radius: 6px;
  background: #fff; cursor: pointer; min-width: 80px;
}
.bh-meta { color: #888; font-size: 11px; font-family: ui-monospace, monospace; margin-left: auto; }

.bh-card {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 12px;
  padding: 16px 18px; margin-bottom: 14px;
}
.bh-card-title {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: #888; margin-bottom: 10px;
}

/* Narrative card */
.bh-narrative-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.bh-headline {
  font-size: 17px; font-weight: 700; color: #111;
  font-family: ui-sans-serif, system-ui;
}
.bh-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.bh-tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: .2px;
  background: #f0eefe; color: #5b4ed4; border: 1px solid #d8d2f7;
  font-family: ui-monospace, monospace;
}
.bh-tag.neg { background: #fef0f0; color: #c4404e; border-color: #f5d8db; }
.bh-summary { font-size: 13px; line-height: 1.6; color: #333; }

/* Top metric-card row: 3 equal-width cards that stretch to the same height
   (no `align-items: start` — grid default is stretch, which is what we want
   so Regime / Dwell / Distribution all match the tallest sibling's height). */
.bh-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px; margin-bottom: 14px;
}

/* Bottom row: transition matrix (compact, intrinsic-width) + action notes
   (eats the remaining horizontal space). On screens narrower than 1100px
   the matrix drops below the actions card. */
.bh-bottom-row {
  display: grid;
  grid-template-columns: minmax(0, max-content) 1fr;
  gap: 12px; margin-bottom: 14px;
  align-items: start;
}
@media (max-width: 1100px) {
  .bh-bottom-row { grid-template-columns: 1fr; }
}
.bh-transition-card { flex-shrink: 0; }

/* Regime occupancy stacked bar */
.bh-occ-bar {
  display: flex; height: 24px; border-radius: 6px; overflow: hidden;
  border: 1px solid #e6e6e6; margin-bottom: 8px;
}
.bh-occ-cell {
  position: relative; transition: opacity .2s;
}
.bh-occ-cell:hover { opacity: .85; }
.bh-occ-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 11px; }
.bh-occ-legend-row { display: flex; align-items: center; gap: 6px; font-family: ui-monospace, monospace; }
.bh-occ-legend-row .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.bh-occ-legend-row .pct { color: #888; margin-left: auto; }

/* Dwell list */
.bh-dwell-table { width: 100%; border-collapse: collapse; font-size: 11px; font-family: ui-monospace, monospace; }
.bh-dwell-table th, .bh-dwell-table td { padding: 4px 6px; text-align: right; }
.bh-dwell-table th { color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; font-size: 9px; }
.bh-dwell-table td:first-child, .bh-dwell-table th:first-child { text-align: left; }

/* Stats sparkline grid */
.bh-stat { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.bh-stat-row { display: flex; align-items: center; gap: 6px; font-size: 11px; font-family: ui-monospace, monospace; }
.bh-stat-lbl { color: #888; min-width: 90px; }
.bh-stat-val { color: #111; font-weight: 600; }

/* Transition heatmap — compact form so it fits inside the 4-card row. */
.bh-heat-wrap { overflow-x: auto; }
.bh-heat {
  border-collapse: separate; border-spacing: 1px;
  font-size: 9px; font-family: ui-monospace, monospace;
}
.bh-heat th { padding: 2px 4px; text-align: center; color: #555; font-weight: 600;
  text-transform: uppercase; letter-spacing: .2px; font-size: 8px; }
.bh-heat td.lbl { padding: 2px 5px; color: #555; font-weight: 600;
  text-transform: uppercase; letter-spacing: .2px; font-size: 8px; white-space: nowrap; }
.bh-heat td.cell {
  width: 32px; height: 22px; text-align: center;
  font-variant-numeric: tabular-nums; color: #fff;
  font-size: 10px;
  position: relative; cursor: default;
}
.bh-heat td.cell .nobs {
  position: absolute; top: 1px; right: 2px;
  font-size: 7px; color: #fff8; font-weight: 400;
}
.bh-heat td.cell.low-conf::after {
  content: "⚠"; position: absolute; bottom: 0; left: 2px;
  font-size: 8px; color: #fff; opacity: .8;
}
.bh-heat-foot {
  font-size: 9px; color: #888; margin-top: 5px;
  font-family: ui-monospace, monospace;
}

/* Action-notes list — two-column flow when the card is full-width so the
   6-rule maximum still reads quickly without a tall column of text. */
.bh-actions {
  list-style: none;
  padding: 0; margin: 0;
  counter-reset: bh-action;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 10px;
}
.bh-action {
  counter-increment: bh-action;
  position: relative;
  padding: 9px 12px 9px 38px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #fafbfd;
  font-size: 12px; line-height: 1.45;
}
.bh-action::before {
  content: counter(bh-action);
  position: absolute; left: 10px; top: 9px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: #7F77DD; color: #fff;
  border-radius: 50%;
  font-family: ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
}
.bh-action-line { color: #333; }
.bh-action-line + .bh-action-line { margin-top: 3px; }
.bh-when, .bh-then {
  display: inline-block;
  font-family: ui-monospace, monospace;
  font-size: 9px; font-weight: 700; letter-spacing: .5px;
  padding: 1px 5px; border-radius: 3px; margin-right: 6px;
  vertical-align: 2px;
}
.bh-when { background: #fef3c7; color: #92400e; }   /* amber for trigger */
.bh-then { background: #d1fae5; color: #065f46; }   /* green for action */
.bh-because {
  color: #888;
  font-style: italic;
  font-size: 11px;
  margin-top: 4px;
  padding-left: 4px;
  border-left: 2px solid #e6e6e6;
}

/* Current-state strip above the action list */
.bh-current-state {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 2px 0 14px; padding: 9px 12px;
  background: #f6f5fc; border: 1px solid #e3dff5; border-radius: 9px;
  font-size: 12px;
}
.bh-cs-lbl {
  font: 700 9px/1 ui-monospace, monospace; letter-spacing: .6px;
  color: #7F77DD; background: #fff; border: 1px solid #e3dff5;
  padding: 3px 6px; border-radius: 4px;
}
.bh-cs-pill {
  font-weight: 700; font-size: 12px;
  padding: 2px 9px; border-radius: 11px; border: 1px solid;
}
.bh-cs-bars { color: #333; }
.bh-cs-bars b { color: #111; }
.bh-cs-sep { color: #ccc; }
.bh-cs-rem { color: #333; }
.bh-cs-rem.overdue { color: #BA7517; font-weight: 600; }
.bh-cs-muted { color: #aaa; }
.bh-cs-asof { margin-left: auto; color: #aaa; font: 11px ui-monospace, monospace; }

/* Highlight the action whose WHEN matches the current state */
.bh-action-active {
  border-color: #7F77DD;
  background: #f3f1fb;
  box-shadow: 0 0 0 1px rgba(127,119,221,0.25);
}
.bh-action-active::before { background: #1D9E75; }
.bh-action-now {
  display: inline-block; margin-bottom: 5px;
  font: 700 9px/1 ui-monospace, monospace; letter-spacing: .5px;
  color: #fff; background: #1D9E75;
  padding: 3px 7px; border-radius: 4px;
}
.bh-action-now.synth { background: #7F77DD; }

/* Narrative-loading spinner used during lazy on-demand generation */
.bh-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid #c8c4ed;
  border-top-color: #7F77DD;
  border-radius: 50%;
  animation: bh-spin .9s linear infinite;
  flex-shrink: 0;
}
@keyframes bh-spin { to { transform: rotate(360deg); } }

/* ── Info rollover icons on the Behavior cards ───────────────────── */
.bh-info {
  display: inline-block; margin-left: 6px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #e6e6e6; color: #666;
  font: 700 9px/14px ui-monospace, monospace;
  text-align: center; cursor: help; position: relative;
  vertical-align: middle;
  user-select: none;
}
.bh-info:hover, .bh-info:focus {
  background: #7F77DD; color: #fff; outline: none;
}
.bh-info:hover::after, .bh-info:focus::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #14181d; color: #f0f0f0;
  padding: 9px 11px; border-radius: 6px;
  font: 400 11px/1.5 ui-sans-serif, system-ui;
  width: 300px; white-space: normal; text-align: left;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  z-index: 50; pointer-events: none;
  letter-spacing: 0; text-transform: none;
}
.bh-info:hover::before, .bh-info:focus::before {
  content: "";
  position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #14181d;
  z-index: 50; pointer-events: none;
}

/* Variant: anchor the popover BELOW the icon. Used inside tag chips
   on the narrative card so it doesn't get clipped at the top of the page. */
.bh-info.tip-below:hover::after, .bh-info.tip-below:focus::after {
  bottom: auto; top: calc(100% + 8px);
}
.bh-info.tip-below:hover::before, .bh-info.tip-below:focus::before {
  bottom: auto; top: calc(100% + 3px);
  border-top-color: transparent; border-bottom-color: #14181d;
}

/* ── Behavior · Reference panel (slide-out from the right) ─────────── */
.bh-ref-panel {
  position: fixed; top: 0; right: -340px; bottom: 0;
  width: 320px;
  background: #fff;
  border-left: 1px solid #e6e6e6;
  box-shadow: -8px 0 28px rgba(0,0,0,0.06);
  transition: right .25s cubic-bezier(.4, 0, .2, 1);
  z-index: 30;
  overflow-y: auto;
  font: 13px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: #1a1a1a;
}
body.bhref-open .bh-ref-panel { right: 0; }
body.bhref-open .app { padding-right: 340px; }
@media (max-width: 1100px) {
  .bh-ref-panel { width: 88%; }
  body.bhref-open .app { padding-right: 0; }
}

.bh-ref-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px; border-bottom: 1px solid #f0f0f0;
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.bh-ref-title { font-size: 15px; font-weight: 700; color: #111; letter-spacing: .1px; }
.bh-ref-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: #888; padding: 4px 8px;
  border-radius: 6px;
}
.bh-ref-close:hover { background: #f4f4f4; color: #111; }

.bh-ref-body { padding: 12px 16px 24px; }
.bh-ref-section { padding: 10px 0; border-bottom: 1px solid #f4f4f4; }
.bh-ref-section:last-child { border-bottom: none; }
.bh-ref-sec-title {
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: #999; margin-bottom: 8px;
}
.bh-ref-row {
  font-size: 12px; color: #333; line-height: 1.55; margin-bottom: 4px;
}
.bh-ref-row:last-child { margin-bottom: 0; }
.bh-ref-now {
  margin-top: 8px; padding: 8px 10px;
  background: #f7f6fc; border: 1px solid #e8e4f6; border-radius: 6px;
  font-size: 12px; color: #2b2347; line-height: 1.5;
}

/* Four-situation rows */
.bh-ref-quad {
  padding: 6px 9px; border: 1px solid #eee; border-radius: 6px;
  margin-bottom: 4px; font-size: 11.5px; line-height: 1.4;
  opacity: .6; transition: opacity .15s, background .15s, border-color .15s;
}
.bh-ref-quad.active { opacity: 1; font-weight: 500; }
.bh-ref-quad-label { font-family: ui-monospace, monospace; }

/* Six-stage rows */
.bh-ref-stage {
  font-size: 12px; line-height: 1.5; padding: 3px 0;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.bh-ref-stage.top b { color: #111; }
.bh-ref-stage .bh-ref-pct {
  font-family: ui-monospace, monospace; font-size: 11px; color: #666;
  background: #f4f4f4; padding: 0 5px; border-radius: 4px;
}
.bh-ref-dot {
  width: 10px; height: 10px; border-radius: 3px; display: inline-block;
  flex-shrink: 0;
}
.bh-ref-star {
  font-size: 10px; color: #7F77DD; font-weight: 600;
  margin-left: 4px;
}

/* Distribution Stats card is split: stats up top, regime-shaded price
   chart in the lower half. Canvas auto-fits the card width via the JS
   draw routine (it reads getBoundingClientRect at paint time). */
.bh-stats-card { display: flex; flex-direction: column; gap: 8px; }
.bh-stats-half { display: block; }
.bh-stats-chart-wrap { margin-top: 6px; padding-top: 8px; border-top: 1px solid #f0f0f0; }
.bh-stats-chart-wrap canvas {
  display: block; width: 100%; max-width: 100%;
  border: 1px solid #f0f0f0; border-radius: 6px;
  background: #fff;
}
.bh-stats-chart-cap {
  text-align: center; color: #888; font-size: 10px;
  margin-top: 3px; font-family: ui-monospace, monospace;
}

/* ── Forward Probability Cone ──────────────────────────── */
.bh-forward-card { margin-top: 12px; }
.bh-fwd-row {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px;
  align-items: stretch;
}
@media (max-width: 960px) { .bh-fwd-row { grid-template-columns: 1fr; } }
.bh-galton-wrap, .bh-fan-wrap {
  display: flex; flex-direction: column;
}
.bh-galton-wrap canvas, .bh-fan-wrap canvas {
  width: 100%; height: auto; background: #fff;
  border: 1px solid #ececea; border-radius: 8px;
}
.bh-galton-cap, .bh-fan-cap {
  font-size: 11px; color: #888; margin-bottom: 6px; line-height: 1.4;
}
.bh-galton-cap b, .bh-fan-cap b { color: #15161a; }
.bh-galton-meta {
  font: 11px/1.4 ui-monospace, monospace; color: #888; margin-top: 6px;
}
.bh-galton-meta b { color: #15161a; }
.bh-galton-replay {
  align-self: flex-start;
}
.bh-fan-summary {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 8px; font-size: 12px; color: #555;
}
.bh-fan-stat b { color: #15161a; font-weight: 700; margin-left: 3px; }
.bh-fan-stat b.pos { color: #1D9E75; }
.bh-fan-stat b.neg { color: #E24B4A; }