/* =============================================================
   /tutorial — "How it works"
   Page chrome borrows /home's palette (assets/home.css). Each stage
   re-draws one real screen at reduced scale; stage styles below are
   named after the screen they imitate so they're easy to keep in sync.
   Every string in a stage was copied from the live app on 2026-09-16.
   ============================================================= */

:root {
    --gold: #DAA520;
    --gold-hover: #E8B93A;
    --ink: #14120E;
    --ivory: #FFFFF0;
    --panel: rgba(30, 30, 30, 0.85);
    --panel-solid: #1c1c1c;
    --line: rgba(218, 165, 32, 0.2);
    --line-soft: rgba(255, 255, 240, 0.1);
    --muted: rgba(255, 255, 240, 0.55);
    --up: #26a69a;
    --down: #ef5350;
    --paper: #f5f0e8;
    --paper-ink: #1a1612;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: #000;
    color: var(--ivory);
    font-family: 'Inter', -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.tut-page { max-width: 1180px; margin: 0 auto; padding: 0 24px 60px; }

/* ---------- header (mirrors .header-section on /home) ---------- */
.tut-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0 14px;
    border-bottom: 1px solid var(--line);
}
.tut-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.tut-logo { height: 46px; width: auto; border-radius: 8px; }
.tut-site-title {
    font-size: 30px; font-weight: 700; letter-spacing: -1px;
    background: linear-gradient(90deg, #FFFFF0 0%, #DAA520 50%, #FFFFF0 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 5.5s ease infinite;
}
@keyframes gradientShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.tut-header-actions { display: flex; align-items: center; gap: 12px; }
.tut-header-link {
    color: rgba(255, 255, 240, 0.7); text-decoration: none; font-size: 14px;
    padding: 6px 14px; border: 1px solid rgba(255, 255, 240, 0.18); border-radius: 4px;
}
.tut-header-link:hover { color: var(--ivory); border-color: rgba(255, 255, 240, 0.4); }
.tut-header-cta {
    background: var(--gold); color: var(--ink); text-decoration: none; font-weight: 700;
    font-size: 13.5px; padding: 8px 16px; border-radius: 6px;
}
.tut-header-cta:hover { background: var(--gold-hover); }

/* Every scene is drawn on one fixed 800×450 canvas and scaled as a whole to
   fit its frame (tutorial.js mount), so proportions never change with layout */
.tut-frame {
    position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: 12px; background: #0a0a0a;
    border: 1px solid var(--line);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(218, 165, 32, 0.12);
}
.tut-stage {
    position: absolute; left: 0; top: 0; width: 800px; height: 450px;
    overflow: hidden; transform-origin: 0 0; background: #0a0a0a;
}
/* fast-forwarding to a seek point: everything lands in place instantly */
.tut-stage.ff, .tut-stage.ff * { transition: none !important; animation: none !important; }

/* ---------- shared stage primitives ---------- */
.tut-cursor {
    position: absolute; z-index: 25; width: 18px; height: 18px; pointer-events: none;
    left: 0; top: 0; opacity: 0;
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s;
}
.tut-cursor svg { display: block; width: 18px; height: 18px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }
.tut-cursor.is-on { opacity: 1; }
.tut-cursor .ring {
    position: absolute; left: -6px; top: -6px; width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid var(--gold); opacity: 0; transform: scale(0.4);
}
.tut-cursor.is-click .ring { animation: clickRing 0.45s ease-out; }
@keyframes clickRing { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.4); } }

/* callout: the step's text, popped up beside the thing about to be clicked */
.st-callout {
    position: absolute; left: 0; top: 0; z-index: 24; max-width: 250px;
    background: #16130d; border: 1px solid rgba(218,165,32,0.85); border-radius: 8px;
    color: var(--ivory); font-family: 'Inter', sans-serif; font-size: 12.5px; line-height: 1.4;
    padding: 0.64em 0.96em; border-radius: 0.64em; box-shadow: 0 8px 24px rgba(0,0,0,0.65), 0 0 0 4px rgba(218,165,32,0.08);
    opacity: 0; transform: translateY(4px) scale(0.97); transform-origin: 50% 100%;
    transition: opacity 0.28s ease, transform 0.28s ease; pointer-events: none;
}
.st-callout.is-on { opacity: 1; transform: none; }
/* stepping aside for new content: glide rather than jump */
.st-callout.glide { transition: opacity 0.28s ease, transform 0.28s ease, left 0.4s ease, top 0.4s ease; }
.tut-stage.ff .st-callout.glide { transition: none; }
.st-callout b { color: var(--gold); font-weight: 600; }
.st-callout .arrow { position: absolute; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: #16130d; border-right: 1px solid rgba(218,165,32,0.85); border-bottom: 1px solid rgba(218,165,32,0.85); transform: rotate(45deg); }
.st-callout.below { transform-origin: 50% 0; }
.st-callout.below .arrow { bottom: auto; top: -6px; transform: rotate(225deg); }
.st-callout.left .arrow, .st-callout.right .arrow { bottom: auto; margin-left: 0; margin-top: -5px; }
.st-callout.right { transform-origin: 0 50%; }
.st-callout.right .arrow { left: -6px !important; transform: rotate(135deg); }
.st-callout.left { transform-origin: 100% 50%; }
.st-callout.left .arrow { left: auto !important; right: -6px; transform: rotate(-45deg); }
.st-callout.free .arrow { display: none; }
.pressed { filter: brightness(1.15); transform: scale(0.98); }
.gold-flash { animation: goldFlash 0.6s ease; }
@keyframes goldFlash { 0% { box-shadow: 0 0 0 0 rgba(218,165,32,0.7); } 100% { box-shadow: 0 0 0 14px rgba(218,165,32,0); } }
.is-hover { border-color: var(--gold) !important; }

/* candle charts: JS builds the SVG, CSS reveals it left-to-right */
.candles { width: 100%; height: 100%; display: block; }
.candles .plot { clip-path: inset(0 100% 0 0); transition: clip-path 1.5s cubic-bezier(0.3, 0, 0.2, 1); }
.candles.is-drawn .plot { clip-path: inset(0 0 0 0); }
.candles.no-anim .plot { transition: none; }
.candles .grid line { stroke: rgba(255, 255, 240, 0.06); }
.candles .wm { fill: rgba(255, 255, 240, 0.06); font-family: 'Libre Baskerville', Georgia, serif; font-weight: 700; }
.candles .band { fill: rgba(218, 165, 32, 0.16); stroke: rgba(218, 165, 32, 0.6); stroke-width: 1; opacity: 0; transition: opacity 0.5s; }
.candles.show-band .band { opacity: 1; }
.candles .marker { opacity: 0; transition: opacity 0.3s, transform 0.3s; transform: translateY(-6px); }
.candles.show-markers .marker { opacity: 1; transform: translateY(0); }
.candles .arrow { opacity: 0; transition: opacity 0.4s; }
.candles.show-arrow .arrow { opacity: 1; }
.candles .hline { opacity: 0; transition: opacity 0.4s; }
.candles.show-hline .hline { opacity: 1; }
.candles .zone { opacity: 0; transition: opacity 0.4s; }
.candles.show-zone .zone { opacity: 1; }

.typed-caret::after { content: '|'; color: var(--gold); animation: caret 0.9s steps(2) infinite; margin-left: 1px; }
@keyframes caret { to { opacity: 0; } }

/* the "Building your study desk" overlay — copied from home.html / scanner.html */
.st-overlay {
    position: absolute; inset: 0; z-index: 22; background: rgba(0,0,0,0.94); display: grid; place-items: center;
    opacity: 0; transition: opacity 0.35s; pointer-events: none; text-align: center;
}
.st-overlay.is-on { opacity: 1; }
.st-overlay .cand { display: flex; gap: 5px; align-items: flex-end; justify-content: center; height: 36px; margin-bottom: 12px; }
.st-overlay .cand i { display: block; width: 6px; border-radius: 1px; animation: candBob 0.9s ease-in-out infinite; }
.st-overlay .cand i:nth-child(odd) { background: var(--up); height: 22px; }
.st-overlay .cand i:nth-child(even) { background: var(--down); height: 30px; animation-delay: 0.15s; }
.st-overlay .cand i:nth-child(3) { animation-delay: 0.3s; } .st-overlay .cand i:nth-child(5) { animation-delay: 0.45s; }
@keyframes candBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.st-overlay .msg { font-family: 'Libre Baskerville', Georgia, serif; font-size: 15px; color: var(--ivory); }
.st-overlay .sub { font-size: 10.5px; color: var(--muted); margin-top: 5px; }

/* =============================================================
   STAGE 1 — Instant Journal (home card + paper modal, from home.css)
   ============================================================= */
.st-home { position: absolute; inset: 0; padding: 16px; transition: filter 0.4s; }
.st-home.is-dim { filter: brightness(0.35) blur(1px); }
.st-home-hero {
    background: rgba(20, 18, 14, 0.9); border: 1px solid rgba(218, 165, 32, 0.45);
    border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
}
.st-home-hero-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.st-home-hero-title i { color: var(--gold); margin-right: 6px; }
.st-home-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.st-home-card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 6px; padding: 8px; height: 96px; display: flex; flex-direction: column; }
.st-home-card .t { font-size: 11px; font-weight: 700; display: flex; justify-content: space-between; }
.st-home-card .t b { color: var(--up); }
.st-home-card .ch { flex: 1; min-height: 0; margin: 4px 0; }
.st-home-card .bar { height: 14px; background: var(--gold); border-radius: 3px; font-size: 7.5px; font-weight: 700; color: var(--ink); display: grid; place-items: center; }
.st-home-grid { display: grid; grid-template-columns: 200px 1fr; gap: 10px; }
.st-nav-card {
    display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap;
    background: rgba(245, 240, 232, 0.96); border: 1px solid rgba(42, 36, 28, 0.55);
    border-radius: 8px; padding: 10px; color: var(--paper-ink);
    transition: box-shadow 0.25s, border-color 0.25s;
}
.st-nav-card.is-hover { border-color: var(--paper-ink) !important; box-shadow: 0 6px 22px rgba(0,0,0,0.55); }
.st-nav-card .ic { width: 26px; height: 26px; border: 1px solid rgba(26,22,18,0.25); border-radius: 6px; display: grid; place-items: center; font-size: 11px; }
.st-nav-card .tt { font-family: Georgia, serif; font-weight: 700; font-size: 12px; }
.st-nav-card .dd { font-family: Georgia, serif; font-style: italic; font-size: 9.5px; color: rgba(26,22,18,0.6); }
.st-nav-card .go { flex-basis: 100%; background: var(--gold); color: var(--ink); font-size: 9.5px; font-weight: 700; text-align: center; padding: 5px; border-radius: 4px; }
.st-nav-card-dark { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: flex; gap: 10px; margin-top: 8px; color: rgba(255,255,240,0.85); }
.st-nav-card-dark .ic { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 6px; display: grid; place-items: center; font-size: 11px; color: var(--muted); }
.st-nav-card-dark .tt { font-size: 12px; font-weight: 600; }
.st-nav-card-dark .dd { font-size: 9.5px; color: var(--muted); }
.st-times { background: #14120e; border: 1px solid var(--line); border-radius: 8px; padding: 12px; text-align: center; }
.st-times .tag { color: var(--gold); font-size: 8px; letter-spacing: 2px; }
.st-times .ttl { font-family: 'Libre Baskerville', Georgia, serif; font-size: 18px; margin: 4px 0; }
.st-times .ln { height: 6px; background: rgba(255,255,240,0.08); border-radius: 3px; margin: 6px 20px; }

.st-ij-backdrop {
    position: absolute; inset: 0; z-index: 10; display: grid; place-items: center;
    background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.st-ij-backdrop.is-on { opacity: 1; }
.st-ij-modal {
    width: 300px; background: var(--paper);
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(42,36,28,0.02) 2px, rgba(42,36,28,0.02) 3px);
    border: 1px solid rgba(42, 36, 28, 0.6); border-radius: 8px; padding: 16px 18px;
    color: var(--paper-ink); box-shadow: 0 20px 60px rgba(0,0,0,0.85);
    transform: scale(0.92); transition: transform 0.3s;
}
.st-ij-backdrop.is-on .st-ij-modal { transform: scale(1); }
.st-ij-title { font-family: Georgia, serif; font-size: 16px; font-weight: 700; text-align: center; padding-bottom: 8px; border-bottom: 1px solid rgba(42,36,28,0.4); }
.st-ij-title i { color: var(--gold); margin-right: 5px; }
.st-ij-sub { font-family: Georgia, serif; font-style: italic; font-size: 10px; text-align: center; color: rgba(26,22,18,0.55); margin: 8px 0; }
.st-ij-input { border: 1px solid rgba(42,36,28,0.5); border-radius: 5px; background: #fff; padding: 8px 10px; font-size: 12px; min-height: 32px; color: var(--paper-ink); }
.st-ij-input .ph { color: rgba(26,22,18,0.35); font-style: italic; }
.st-ij-lens-label { font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; margin: 12px 0 6px; color: rgba(26,22,18,0.6); }
.st-ij-lens { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.st-ij-lens-btn {
    border: 1px solid rgba(42,36,28,0.35); border-radius: 6px; padding: 8px 4px; text-align: center;
    font-size: 10.5px; font-weight: 700; background: rgba(255,255,255,0.4); transition: all 0.2s;
}
.st-ij-lens-btn .tf { display: block; font-weight: 400; font-size: 8px; color: rgba(26,22,18,0.55); margin-top: 2px; }
.st-ij-lens-btn.active { background: rgba(218,165,32,0.22); border-color: var(--gold); }
.st-ij-go { margin-top: 12px; background: var(--paper-ink); color: var(--paper); font-family: Georgia, serif; font-weight: 700; font-size: 11.5px; text-align: center; padding: 9px; border-radius: 5px; transition: transform 0.15s; }
.st-ij-cancel { text-align: center; font-size: 9px; color: rgba(26,22,18,0.45); margin-top: 8px; }

/* =============================================================
   STAGE 2 — Scanner (page-turner tabs, hero card, setup grids — scanner.html)
   ============================================================= */
.st-scan { position: absolute; inset: 0; padding: 12px 16px; overflow: hidden; }
.st-scan-tabs { display: flex; justify-content: center; gap: 6px; }
.st-scan-tab {
    padding: 6px 14px; border: 1px solid rgba(218,165,32,0.5); border-radius: 6px; font-size: 10.5px; font-weight: 600;
    color: rgba(255,255,240,0.8); background: transparent; transition: all 0.25s;
}
.st-scan-tab i { margin-right: 4px; }
.st-scan-tab.active { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.st-scan-sub { display: flex; justify-content: center; gap: 4px; margin-top: 8px; min-height: 16px; }
.st-scan-sub span { font-size: 8.5px; padding: 3px 10px; border-radius: 10px; border: 1px solid rgba(218,165,32,0.5); color: rgba(255,255,240,0.7); }
.st-scan-sub span.active { background: var(--gold); color: var(--ink); }
.st-bb { display: flex; justify-content: center; gap: 24px; margin-top: 8px; }
.st-bb-opt { text-align: center; font-size: 9px; letter-spacing: 1px; color: rgba(255,255,240,0.4); transition: all 0.3s; }
.st-bb-opt img { width: 24px; height: 24px; display: block; margin: 0 auto 2px; filter: grayscale(1) brightness(0.6); transition: filter 0.3s; }
.st-bb-opt.active { color: var(--up); }
.st-bb-opt.active img { filter: none; }
.st-bb-opt.bear.active { color: var(--down); }
.st-scan-view { position: absolute; left: 16px; right: 16px; top: 108px; bottom: 0; opacity: 0; transition: opacity 0.35s; pointer-events: none; }
.st-scan-view.is-on { opacity: 1; }
.st-scan-card {
    display: grid; grid-template-columns: 1fr 180px; height: 172px;
    background: #0e0e0e; border: 1px solid rgba(218,165,32,0.5); border-radius: 10px; overflow: hidden;
}
.st-scan-chart { position: relative; padding: 8px; }
.st-scan-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--gold); color: var(--ink);
    font-size: 8px; font-weight: 700; letter-spacing: 1px; padding: 4px 8px; border-radius: 4px; font-family: Georgia, serif;
}
.st-scan-info { border-left: 1px solid var(--line-soft); padding: 12px 14px 10px; display: flex; flex-direction: column; }
.st-scan-ind { font-size: 7.5px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; }
.st-scan-tkr { font-family: 'Libre Baskerville', Georgia, serif; font-size: 22px; font-weight: 700; line-height: 1.1; margin-top: 3px; }
.st-scan-co { font-size: 9px; color: var(--muted); }
.st-scan-gain { font-size: 17px; font-weight: 700; color: var(--up); margin-top: 8px; }
.st-scan-gain.neg { color: var(--down); }
.st-scan-from { font-size: 9px; margin-top: 3px; color: rgba(255,255,240,0.85); }
.st-scan-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; font-size: 8px; }
.st-scan-stats small { display: block; color: var(--muted); letter-spacing: 1px; font-size: 6.5px; }
.st-scan-stats b { font-size: 9px; }
.st-scan-go { margin-top: auto; background: var(--gold); color: var(--ink); font-size: 9.5px; font-weight: 700; text-align: center; padding: 7px; border-radius: 4px; transition: transform 0.15s; }
.st-scan-h2 { font-family: 'Libre Baskerville', Georgia, serif; font-size: 13px; font-weight: 700; margin: 12px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--gold); display: inline-block; }
.st-scan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.st-scan-gcard { background: #0e0e0e; border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; position: relative; }
.st-scan-gcard .rank { position: absolute; top: 8px; left: 8px; z-index: 2; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); color: var(--ink); font-size: 8px; font-weight: 700; display: grid; place-items: center; }
.st-scan-gcard .head { position: absolute; top: 7px; left: 28px; z-index: 2; }
.st-scan-gcard .head .tk { font-family: 'Libre Baskerville', Georgia, serif; font-size: 10px; font-weight: 700; }
.st-scan-gcard .head .co { font-size: 6.5px; color: var(--muted); }
.st-scan-gcard .ch { height: 110px; padding: 24px 6px 6px; }
.st-scan-gcard .gain { position: absolute; right: 8px; top: 106px; background: var(--up); color: #000; font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 3px; }
.st-scan-gcard.neg .gain { background: var(--down); color: #fff; }
.st-scan-gcard .body { padding: 8px 10px 10px; border-top: 1px solid var(--line-soft); }
.st-scan-gcard .body .ind { font-size: 6.5px; letter-spacing: 1.5px; color: var(--gold); }
.st-scan-gcard .body .tk2 { font-family: 'Libre Baskerville', Georgia, serif; font-size: 11px; font-weight: 700; margin-top: 2px; }
.st-scan-gcard .body .from { font-size: 7.5px; color: var(--gold); margin-top: 2px; }
.st-scan-gcard .body .more { font-size: 6.5px; letter-spacing: 1px; color: var(--muted); text-align: center; margin: 6px 0 4px; }
.st-scan-gcard .body .go { background: var(--gold); color: var(--ink); font-size: 8px; font-weight: 700; text-align: center; padding: 5px; border-radius: 3px; }
.st-scan-runners { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-scan-runners .st-scan-gcard .ch { height: 40px; }
.st-scan-runners .st-scan-gcard .gain { top: 36px; }
/* month grids fill the frame: tall charts, gain tag on the chart's bottom edge */
.st-scan-grid .st-scan-gcard .ch { height: 196px; }
.st-scan-grid .st-scan-gcard .gain { top: 190px; }

/* =============================================================
   STAGE 3 / 4 — Study Desk (report_detail.html two-panel layout + dock)
   ============================================================= */
/* z-index 15: above whatever screen the desk lands on (scanner cards carry z-index 2,
   the Instant Journal backdrop 10), below the build overlay (22) and caption (24) */
.st-desk { position: absolute; inset: 0; z-index: 15; display: grid; grid-template-rows: 34px 1fr 44px; background: #000; }
.st-desk-head { display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid var(--line-soft); }
.st-desk-head .ttl { font-family: 'Libre Baskerville', Georgia, serif; font-weight: 700; font-size: 12px; }
.st-desk-head .dt { font-size: 8px; color: var(--muted); }
.st-desk-head .share { margin-left: 4px; background: var(--paper); color: var(--paper-ink); font-family: Georgia, serif; font-size: 8px; font-weight: 700; padding: 4px 8px; border-radius: 3px; }
.st-desk-head .right { margin-left: auto; display: flex; gap: 6px; }
.st-desk-head .right span { font-size: 8px; padding: 4px 8px; border: 1px solid var(--line-soft); border-radius: 3px; color: var(--muted); }
.st-desk-body { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; min-height: 0; }
.st-panel { position: relative; background: #000; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: grid; grid-template-rows: 30px 1fr; }
.st-panel-bar { display: flex; align-items: center; gap: 6px; padding: 0 8px; }
.st-panel-bar .sel { border: 1px solid var(--line-soft); border-radius: 3px; padding: 3px 8px; font-size: 8.5px; min-width: 66px; display: flex; justify-content: space-between; gap: 6px; }
.st-panel-bar .sel::after { content: '▾'; color: var(--muted); }
.st-panel-bar .ico { width: 18px; height: 18px; border: 1px solid var(--line-soft); border-radius: 3px; display: grid; place-items: center; font-size: 7px; color: var(--muted); }
.st-panel-bar .upg { margin-left: auto; font-size: 7px; letter-spacing: 1px; color: var(--gold); border: 1px solid var(--gold); padding: 2px 5px; border-radius: 2px; }
.st-panel-content { position: relative; min-height: 0; }
.st-panel-view { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s; pointer-events: none; }
.st-panel-view.is-on { opacity: 1; }
.st-chart-view { padding: 4px 6px; }
.st-dock { display: flex; align-items: center; justify-content: center; gap: 4px; border-top: 1px solid var(--line-soft); padding: 0 8px; }
.st-dock-item {
    width: 38px; height: 34px; border-radius: 5px; border: 1px solid transparent; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: 5.5px; letter-spacing: 0.5px;
    text-transform: uppercase; transition: all 0.25s;
}
.st-dock-item i { font-size: 10px; }
.st-dock-item.active { background: rgba(218,165,32,0.15); border-color: var(--gold); color: var(--gold); }
.st-dock-sep { width: 1px; height: 22px; background: var(--line-soft); margin: 0 3px; }
.st-dock-item.edit { border: 1px solid var(--gold); color: var(--gold); }
/* drag and drop, as the real dock does it */
.st-dock-item.dragging { opacity: 0.35; }
.st-ghost { position: absolute; z-index: 21; pointer-events: none; background: rgba(20,18,14,0.96); border-color: var(--gold) !important; color: var(--gold); box-shadow: 0 8px 20px rgba(0,0,0,0.7); transform: scale(1.12); transition-property: left, top, opacity, transform; transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
.st-ghost.dropped { opacity: 0; transform: scale(0.8); transition-duration: 0.2s !important; }
.st-panel-content.drop-target { outline: 2px dashed rgba(218,165,32,0.85); outline-offset: -5px; background: rgba(218,165,32,0.06); transition: background 0.2s; }
/* a panel's dropdown */
.st-menu { position: absolute; z-index: 20; min-width: 96px; background: #141414; border: 1px solid var(--line); border-radius: 5px; padding: 3px; box-shadow: 0 10px 24px rgba(0,0,0,0.7); font-size: 8.5px; }
.st-menu div { padding: 4px 8px; border-radius: 3px; color: rgba(255,255,240,0.8); transition: background 0.15s; }
.st-menu div.cur { color: var(--gold); }
.st-menu div.is-hover { background: rgba(218,165,32,0.2); color: var(--ivory); }

/* Notes — the yellow notebook (Trade Management / Chart Notes / News) */
.st-nb { padding: 8px; height: 100%; display: grid; grid-template-rows: auto 1fr; gap: 6px; }
.st-nb-tabs { display: flex; gap: 4px; align-items: center; }
.st-nb-tabs span { font-size: 7.5px; padding: 3px 8px; color: var(--muted); border: 1px solid var(--line-soft); border-radius: 3px; }
.st-nb-tabs span.active { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 700; }
.st-nb-tabs .cnt { margin-left: auto; font-size: 6.5px; color: var(--muted); border: none; }
.st-nb-page {
    background: #f3e9b8; background-image: repeating-linear-gradient(0deg, transparent, transparent 15px, rgba(120,90,30,0.14) 15px, rgba(120,90,30,0.14) 16px);
    border: 1px solid #b89a4a; border-radius: 4px; padding: 10px 12px; color: #3a2d0f;
    font-family: 'Libre Baskerville', Georgia, serif; font-size: 9px; line-height: 16px; position: relative;
}
.st-nb-page::before { content: ''; position: absolute; left: 7px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: #2a2a2a; }
.st-nb-page .ph { color: rgba(58,45,15,0.5); font-style: italic; }
.st-nb-page .txt { padding-left: 14px; }

/* Executions panel */
.st-ex { padding: 8px 10px; height: 100%; }
.st-ex-bar { display: flex; gap: 6px; align-items: center; }
.st-ex-bar .buy, .st-ex-bar .sell { flex: 1; text-align: center; font-size: 8.5px; font-weight: 700; padding: 5px; border-radius: 3px; color: #fff; transition: transform 0.15s; }
.st-ex-bar .buy { background: #1f9d55; } .st-ex-bar .sell { background: #d43b3b; }
.st-ex-bar .ic { width: 18px; height: 18px; border: 1px solid var(--line-soft); border-radius: 3px; display: grid; place-items: center; font-size: 7px; color: var(--muted); }
.st-ex-bar .set { margin-left: auto; font-size: 7.5px; border: 1px solid var(--line-soft); padding: 3px 8px; border-radius: 3px; }
.st-ex-bar .set::after { content: ' ▾'; color: var(--muted); }
.st-ex-title { font-family: 'Libre Baskerville', Georgia, serif; font-size: 11px; font-weight: 700; text-align: center; margin-top: 14px; }
.st-ex-sub { font-size: 7.5px; color: var(--muted); text-align: center; line-height: 1.5; margin: 4px 14px 10px; }
.st-ex-sub b { color: rgba(255,255,240,0.85); font-weight: 600; }
.st-ex-list { margin-top: 8px; }
.st-ex-row { display: flex; justify-content: space-between; font-size: 8px; padding: 5px 8px; border: 1px solid var(--line-soft); border-radius: 4px; margin-bottom: 4px; opacity: 0; transform: translateY(4px); transition: all 0.3s; }
.st-ex-row.is-on { opacity: 1; transform: none; }
.st-ex-row .b { color: var(--up); } .st-ex-row .s { color: var(--down); }
.st-ex-hint { position: absolute; z-index: 5; font-size: 7.5px; background: rgba(0,0,0,0.85); border: 1px solid var(--gold); color: var(--gold); padding: 3px 7px; border-radius: 3px; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.st-ex-hint.is-on { opacity: 1; }

/* News + Links panels (brief cameos) */
.st-news { padding: 10px; height: 100%; }
.st-news .empty { text-align: center; padding: 10px 0 12px; }
.st-news .empty .h { font-size: 9.5px; color: rgba(255,255,240,0.8); }
.st-news .empty .s { font-size: 7.5px; color: var(--muted); }
.st-news .tabs { display: flex; margin-bottom: 8px; }
.st-news .tabs span { flex: 1; text-align: center; font-size: 8px; padding: 5px; border: 1px solid var(--line-soft); color: var(--muted); }
.st-news .tabs span.active { background: var(--gold); color: var(--ink); font-weight: 700; border-color: var(--gold); }
.st-news .lbl { font-size: 6.5px; letter-spacing: 1px; color: var(--muted); margin-top: 6px; }
.st-news .in { border: 1px solid var(--line-soft); border-radius: 3px; padding: 5px 8px; font-size: 8px; min-height: 20px; }
.st-news .in.ph { color: var(--muted); font-style: italic; }
.st-news .go { margin-top: 10px; background: var(--gold); color: var(--ink); font-size: 8.5px; font-weight: 700; text-align: center; padding: 6px; border-radius: 3px; }
.st-links { padding: 12px; text-align: center; height: 100%; }
.st-links .h { font-family: 'Libre Baskerville', Georgia, serif; font-size: 11px; font-weight: 700; }
.st-links .s { font-size: 7.5px; color: var(--muted); line-height: 1.5; margin: 4px 10px 8px; }
.st-links .add { display: inline-block; border: 1px solid var(--gold); color: var(--gold); font-size: 8px; padding: 4px 10px; border-radius: 3px; }
.st-links .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 8px 0; }
.st-links .cards div { height: 46px; border: 1px solid rgba(218,165,32,0.35); border-radius: 4px; background: rgba(218,165,32,0.05); font-size: 6.5px; letter-spacing: 1px; color: var(--gold); padding-top: 6px; }

/* ---------- AI Study panel ---------- */
.st-ai { display: grid; grid-template-rows: auto auto 1fr; height: 100%; }
/* body under the title: the lens choice sits centred in the free space,
   Past Sessions (when there are any) settles at the bottom, as in the app */
.st-ai-body { display: flex; flex-direction: column; min-height: 0; padding-bottom: 10px; }
.st-ai-strip { height: 2px; background: linear-gradient(90deg, var(--gold), transparent); }
.st-ai-title { font-family: 'Libre Baskerville', Georgia, serif; font-size: 11px; font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
.st-ai-lens { margin: auto 0; padding: 12px 14px; text-align: center; }
.st-ai-lens .h { font-family: 'Libre Baskerville', Georgia, serif; font-size: 11.5px; font-weight: 700; }
.st-ai-lens .s { font-size: 8px; color: var(--muted); margin: 4px 0 10px; line-height: 1.5; }
.st-ai-lens-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-ai-lens-card { background: var(--panel-solid); border: 1px solid var(--line-soft); border-radius: 6px; padding: 10px; text-align: left; transition: all 0.25s; }
.st-ai-lens-card .n { font-family: 'Libre Baskerville', Georgia, serif; font-size: 9.5px; font-weight: 700; }
.st-ai-lens-card .d { font-size: 7px; color: var(--muted); margin: 3px 0 8px; line-height: 1.4; }
.st-ai-lens-card .mini { height: 30px; }
.st-ai-lens-card.is-dim { opacity: 0.35; }
.st-ai-past { margin: 10px 12px 0; border: 1px solid rgba(218,165,32,0.4); border-radius: 4px; padding: 5px 8px; font-size: 7.5px; letter-spacing: 1px; color: var(--gold); display: flex; align-items: center; gap: 6px; }
.st-ai-past .n { background: rgba(218,165,32,0.2); border-radius: 8px; padding: 0 5px; font-size: 7px; }
.st-ai-past-row { margin: 4px 12px 0; display: flex; gap: 8px; align-items: center; background: #111; border: 1px solid var(--line-soft); border-radius: 4px; padding: 6px 8px; opacity: 0; transition: opacity 0.3s; }
.st-ai-past-row.is-on { opacity: 1; }
.st-ai-past-row .lens { font-size: 6px; letter-spacing: 1px; background: rgba(218,165,32,0.2); color: var(--gold); padding: 2px 5px; border-radius: 2px; }
.st-ai-past-row .t { font-size: 8px; }
.st-ai-past-row .m { font-size: 6.5px; color: var(--muted); }
.st-ai-past-row .del { margin-left: auto; color: var(--muted); font-size: 8px; }

/* Share your charts (chart-select step) */
.st-share { padding: 10px 12px; height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.st-share .h { font-family: 'Libre Baskerville', Georgia, serif; font-size: 12px; text-align: center; }
.st-share .s { font-size: 7.5px; color: var(--muted); text-align: center; line-height: 1.5; margin-top: 3px; }
.st-share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; align-content: start; }
.st-share-card { border: 1px solid var(--line-soft); border-radius: 5px; padding: 6px; background: #0a0a0a; position: relative; }
.st-share-card .tf { font-size: 8px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.st-share-card .tf .sym { color: var(--muted); font-weight: 400; font-size: 7px; }
.st-share-card .cb { width: 10px; height: 10px; border: 1px solid var(--gold); border-radius: 2px; display: grid; place-items: center; font-size: 7px; color: var(--ink); background: var(--gold); }
.st-share-card .ch { height: 70px; margin: 6px 0; }
.st-share-card .tog { display: flex; align-items: center; gap: 4px; font-size: 6.5px; color: var(--muted); }
.st-share-card .tog i { width: 14px; height: 8px; border-radius: 4px; background: #333; position: relative; transition: background 0.2s; }
.st-share-card .tog i::after { content: ''; position: absolute; top: 1px; left: 1px; width: 6px; height: 6px; border-radius: 50%; background: #999; transition: left 0.2s; }
.st-share-card .tog.on i { background: var(--gold); } .st-share-card .tog.on i::after { left: 7px; background: #000; }
.st-share-card .bars { font-size: 6px; color: var(--muted); margin-top: 3px; display: flex; justify-content: space-between; }
.st-share-card .bars u { color: var(--gold); text-decoration: none; }
.st-share-foot { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 8px 0 4px; }
.st-share-foot .start { background: var(--gold); color: var(--ink); font-size: 9px; font-weight: 700; padding: 6px 14px; border-radius: 4px; transition: transform 0.15s; }
.st-share-foot .skip { font-size: 8px; color: var(--muted); }

/* loading slideshow — mirrors .ai-study-slideshow: inside the AI panel, dark,
   each photo shown whole (never cropped) and crossfading into the next */
.st-slideshow { position: absolute; inset: 0; background: #0a0a0a; display: flex; align-items: center; justify-content: center; }
.st-slideshow img { position: absolute; max-width: 80%; max-height: 70%; object-fit: contain; border-radius: 4px; opacity: 0; transition: opacity 0.8s ease; }
.st-slideshow img.on { opacity: 1; }

/* conversation — the chat takes the wider share of the desk in this scene */
.st-desk--ai .st-desk-body { grid-template-columns: 42fr 58fr; }
.st-ai-chat { display: grid; grid-template-rows: 28px 1fr auto 38px; height: 100%; }
.st-ai-chat-bar { display: flex; align-items: center; gap: 7px; padding: 0 10px; border-bottom: 1px solid var(--line-soft); font-size: 7.5px; }
.st-ai-chat-bar .back { border: 1px solid var(--line-soft); padding: 3px 7px; border-radius: 3px; color: var(--muted); }
.st-ai-chat-bar .lens { background: #1c1c1c; border: 1px solid var(--line-soft); padding: 3px 8px; border-radius: 3px; font-weight: 700; letter-spacing: 0.6px; }
.st-ai-msgs { overflow: hidden; padding: 10px 12px 6px; display: flex; flex-direction: column; gap: 9px; justify-content: flex-end; position: relative; }
.st-msg { flex: none; max-width: 92%; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s; }
.st-msg.is-on { opacity: 1; transform: none; }
.st-msg .who { font-size: 6.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.st-msg.you { align-self: flex-end; text-align: right; }
.st-msg.you .bub { background: #1c1c1c; border: 1px solid var(--line-soft); border-radius: 6px; padding: 7px 10px; font-size: 9.5px; line-height: 1.45; text-align: left; }
.st-msg.mentor .who { color: var(--gold); }
.st-msg.mentor .who::before { content: '• '; }
.st-msg.mentor .bub { background: #141414; border: 1px solid var(--line-soft); border-radius: 6px; padding: 9px 12px; font-family: 'Libre Baskerville', Georgia, serif; font-size: 9.5px; line-height: 1.8; }
.st-msg .bub .row { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(218,165,32,0.12); font-size: 9.5px; line-height: 1; }
.st-msg .bub .offer { margin-top: 8px; font-size: 9.5px; line-height: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.st-think { flex: none; font-size: 8px; color: var(--muted); border: 1px solid var(--line-soft); border-radius: 4px; padding: 4px 9px; align-self: flex-start; display: none; }
.st-think.is-on { display: block; }
.st-think::after { content: '▾'; margin-left: 6px; }
.st-think i { color: var(--gold); font-style: normal; }
.st-newscard { border: 1px solid rgba(218,165,32,0.35); border-radius: 5px; background: #0f0f0f; padding: 7px 9px; margin-top: 8px; font-family: 'Inter', sans-serif; line-height: 1.45; opacity: 0; transition: opacity 0.35s; }
.st-newscard.is-on { opacity: 1; }
.st-newscard .h { font-size: 8.5px; font-weight: 700; color: var(--gold); display: flex; justify-content: space-between; gap: 8px; }
.st-newscard .h span { font-weight: 400; color: var(--muted); font-size: 7.5px; }
.st-newscard .d { font-size: 8.5px; color: rgba(255,255,240,0.85); margin: 4px 0 5px; }
.st-newscard .src { font-size: 7.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.st-newscard .save { margin-left: auto; color: var(--gold); border: 1px solid rgba(218,165,32,0.4); padding: 2px 6px; border-radius: 3px; }
.st-ctxcard { border: 1px dashed rgba(218,165,32,0.4); border-radius: 4px; padding: 6px 9px; font-size: 8px; line-height: 1.45; color: var(--muted); font-family: 'Inter', sans-serif; margin-top: 8px; }
.st-ctxcard b { color: var(--gold); font-weight: 600; }
.st-pins { padding: 0 12px; display: flex; gap: 4px; font-size: 9px; }
.st-pins .tb-pin { margin-bottom: 6px; }
.st-ai-input { display: flex; align-items: center; gap: 2px; padding: 0 10px; border-top: 1px solid var(--line-soft); font-size: 9.5px; }
.st-ai-input .field { flex: 1; margin-left: 6px; border: 1px solid var(--line-soft); border-radius: 5px; padding: 5px 9px; font-size: 8.5px; font-style: italic; color: var(--muted); min-height: 22px; line-height: 12px; }
.st-ai-input .field.typing { font-style: normal; color: var(--ivory); }
.st-ai-input .send { width: 22px; height: 22px; margin-left: 6px; border-radius: 4px; background: rgba(218,165,32,0.2); border: 1px solid var(--gold); color: var(--gold); display: grid; place-items: center; font-size: 9px; }
/* chat header: the Context counter */
.st-ai-chat-bar .ctxbtn { margin-left: auto; border: 1px solid var(--line-soft); padding: 3px 7px; border-radius: 3px; color: var(--muted); }
.st-ai-chat-bar .ctxbtn b { color: var(--gold); margin-left: 2px; }
/* "+" menu, its price-data flyout and the date picker (sized in em: works at both scales) */
.st-ctxmenu { position: absolute; left: 10px; bottom: 44px; z-index: 12; width: 17em; background: #0f0f0f; border: 1px solid #262626; border-radius: 0.6em; padding: 0.5em; font-size: 8.5px; box-shadow: 0 10px 28px rgba(0,0,0,0.75); }
.st-ctxmenu .sec { font-size: 0.8em; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); padding: 0.7em 0.6em 0.3em; }
.st-ctxmenu .it { display: flex; align-items: center; gap: 0.7em; padding: 0.45em 0.6em; border-radius: 0.35em; color: rgba(255,255,240,0.85); transition: background 0.15s; }
.st-ctxmenu .it i { color: var(--gold); width: 1.1em; font-size: 0.9em; opacity: 0.8; }
.st-ctxmenu .it em { margin-left: auto; font-style: normal; font-size: 0.85em; color: var(--muted); }
.st-ctxmenu .it.is-hover { background: rgba(218,165,32,0.18); }
.st-ctxmenu .it.dim { opacity: 0.4; }
.st-ctxfly { position: absolute; left: calc(100% + 0.4em); width: 7em; background: #0f0f0f; border: 1px solid #262626; border-radius: 0.5em; padding: 0.4em; box-shadow: 0 8px 20px rgba(0,0,0,0.7); }
.st-ctxfly div { padding: 0.45em 0.7em; border-radius: 0.35em; color: rgba(255,255,240,0.85); }
.st-ctxfly div.is-hover { background: rgba(218,165,32,0.18); }
.st-ohlc { position: absolute; left: 10px; bottom: 44px; z-index: 12; width: 17em; background: #0f0f0f; border: 1px solid rgba(218,165,32,0.4); border-radius: 0.6em; padding: 0.9em 1em; font-size: 8.5px; box-shadow: 0 10px 28px rgba(0,0,0,0.75); }
.st-ohlc .hd { color: var(--ivory); font-weight: 600; margin-bottom: 0.6em; }
.st-ohlc .hd i { color: var(--gold); margin-right: 0.4em; }
.st-ohlc label { display: block; font-size: 0.85em; color: var(--muted); margin: 0.5em 0 0.2em; }
.st-ohlc .in { border: 1px solid var(--line-soft); border-radius: 0.35em; padding: 0.4em 0.6em; color: var(--ivory); }
.st-ohlc .info { display: flex; justify-content: space-between; font-size: 0.85em; color: var(--muted); margin: 0.7em 0; }
.st-ohlc .info b { color: var(--ivory); font-weight: 600; }
.st-ohlc .send { background: var(--gold); color: var(--ink); font-weight: 700; text-align: center; padding: 0.55em; border-radius: 0.35em; transition: transform 0.15s; }
/* a shared-context card in the chat: sending pulse, then a check */
.st-shared { flex: none; align-self: flex-end; display: flex; align-items: center; gap: 0.7em; max-width: 90%; border: 1px solid rgba(218,165,32,0.3); background: rgba(218,165,32,0.05); border-radius: 0.5em; padding: 0.45em 0.7em; font-size: 8.5px; font-family: 'Inter', sans-serif; transition: opacity 0.3s; }
.st-shared.sending { animation: tbPulse 0.8s ease-in-out infinite; }
.st-shared .th { width: 4.4em; height: 2.6em; border-radius: 0.3em; overflow: hidden; background: #0a0a0a; display: grid; place-items: center; color: var(--gold); flex: none; }
.st-shared .tx { display: flex; flex-direction: column; gap: 0.15em; }
.st-shared .tx b { color: var(--ivory); font-weight: 600; }
.st-shared .tx span { color: var(--muted); font-size: 0.9em; }
.st-shared .ok { color: #26a69a; opacity: 0; transition: opacity 0.3s; }
.st-shared:not(.sending) .ok { opacity: 1; }
.ix-chat { position: relative; }
.ix-chat .st-ctxmenu, .ix-chat .st-ohlc { font-size: 12px; left: 12px; bottom: 58px; }
.ix-msgs .st-shared { font-size: 12.5px; }

/* suggested questions popover — parchment, as in the app */
.st-sugg { position: absolute; right: 10px; bottom: 44px; width: 236px; z-index: 12; background: var(--paper); color: var(--paper-ink); border: 1px solid rgba(42,36,28,0.6); border-radius: 4px; padding: 9px 11px; font-family: Georgia, serif; box-shadow: 0 10px 30px rgba(0,0,0,0.7); opacity: 0; transform: translateY(6px); transition: all 0.3s; pointer-events: none; }
.st-sugg.is-on { opacity: 1; transform: none; }
.st-sugg .h { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-align: center; border-bottom: 1px solid rgba(42,36,28,0.4); padding-bottom: 5px; }
.st-sugg .s { font-size: 7px; font-style: italic; text-align: center; color: rgba(26,22,18,0.6); margin: 4px 0 6px; }
.st-sugg .g { font-size: 6.5px; letter-spacing: 1.5px; color: rgba(26,22,18,0.6); margin-top: 6px; display: flex; justify-content: space-between; }
.st-sugg .q { font-size: 8px; font-style: italic; padding: 3px 5px; border-radius: 2px; transition: background 0.2s; }
.st-sugg .q.is-hover { background: rgba(218,165,32,0.25); }
.st-cap { position: absolute; right: 12px; bottom: 46px; z-index: 12; font-size: 9px; opacity: 0; transition: opacity 0.3s; }
.st-cap.is-on { opacity: 1; }

/* -------------------------------------------------------------
   Mentor UI pieces (tb-*), mirrored from assets/ai/css/ai-study-panel.css.
   Sized in em so the same markup works inside a stage (small) and in the
   explanation panel's examples (full size).
   ------------------------------------------------------------- */
.tb-svg { width: 1em; height: 1em; flex: none; }
.tb-ref { display: inline-block; font-family: 'DM Sans', 'Inter', sans-serif; font-size: 0.9em; font-weight: 500; line-height: 1; white-space: nowrap; color: #DAA520; background: rgba(218,165,32,0.08); border: 1px solid rgba(218,165,32,0.25); border-radius: 3px; padding: 0.32em 0.65em; margin: 0 0.12em; vertical-align: baseline; transition: all 0.2s ease; }
.tb-ref:hover, .tb-ref.on { background: rgba(218,165,32,0.2); border-color: #DAA520; box-shadow: 0 0 0.8em rgba(218,165,32,0.2); }
.tb-ref.line { color: #5DCAA5; background: rgba(93,202,165,0.08); border-color: rgba(93,202,165,0.25); }
.tb-ref.line:hover, .tb-ref.line.on { background: rgba(93,202,165,0.2); border-color: #5DCAA5; box-shadow: 0 0 0.8em rgba(93,202,165,0.2); }
.tb-ref.zone { color: #ED93B1; background: rgba(237,147,177,0.08); border-color: rgba(237,147,177,0.25); }
.tb-ref.zone:hover, .tb-ref.zone.on { background: rgba(237,147,177,0.2); border-color: #ED93B1; box-shadow: 0 0 0.8em rgba(237,147,177,0.2); }
.tb-exec { display: inline-flex; align-items: stretch; overflow: hidden; font-family: 'DM Sans', 'Inter', sans-serif; font-size: 0.9em; font-weight: 500; line-height: 1; white-space: nowrap; border: 1px solid rgba(38,166,154,0.45); border-radius: 3px; margin: 0 0.12em; vertical-align: middle; transition: box-shadow 0.2s; }
.tb-exec .side { display: flex; align-items: center; padding: 0.32em 0.55em; font-weight: 700; font-size: 0.88em; letter-spacing: 0.05em; background: #26a69a; color: #07110f; }
.tb-exec .body { display: flex; align-items: center; padding: 0.32em 0.7em; background: rgba(38,166,154,0.1); color: #7fd8cf; }
.tb-exec:hover { border-color: #26a69a; box-shadow: 0 0 0.8em rgba(38,166,154,0.2); }
.tb-exec.exit { border-color: rgba(239,83,80,0.45); }
.tb-exec.exit .side { background: #ef5350; color: #160707; }
.tb-exec.exit .body { background: rgba(239,83,80,0.1); color: #f5a3a1; }
.tb-exec.exit:hover { border-color: #ef5350; box-shadow: 0 0 0.8em rgba(239,83,80,0.2); }
.tb-news, .tb-newspanel { display: inline-flex; align-items: center; gap: 0.45em; font-family: 'DM Sans', 'Inter', sans-serif; font-size: 0.8em; font-weight: 700; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: #d4a017; background: transparent; border: 1px solid #d4a017; border-radius: 4px; padding: 0.55em 0.8em; vertical-align: middle; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.tb-newspanel { color: rgba(212,160,23,0.8); border-style: dashed; border-color: rgba(212,160,23,0.55); }
.tb-news:hover, .tb-newspanel:hover { background: #d4a017; border-style: solid; border-color: #d4a017; color: #0a0a0a; }
.tb-news.busy, .tb-news.busy:hover { background: transparent; color: #d4a017; animation: tbPulse 1.2s ease-in-out infinite; }
.tb-news.done, .tb-news.done:hover { background: transparent; color: rgba(212,160,23,0.55); border-color: rgba(212,160,23,0.35); }
@keyframes tbPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.tb-or { font-size: 0.85em; font-style: italic; color: #8a7d6b; margin: 0 0.35em; vertical-align: middle; font-family: 'Inter', sans-serif; }
.tb-pill { display: inline-flex; align-items: stretch; overflow: hidden; font-family: 'DM Sans', 'Inter', sans-serif; font-size: 0.9em; font-weight: 500; line-height: 1; white-space: nowrap; color: #DAA520; border: 1px solid rgba(218,165,32,0.45); border-radius: 4px; vertical-align: middle; transition: border-color 0.2s, box-shadow 0.2s; }
.tb-pill .side { display: flex; align-items: center; padding: 0 0.6em; background: rgba(218,165,32,0.1); border-right: 1px solid rgba(218,165,32,0.35); }
.tb-pill .body { display: flex; align-items: center; padding: 0.5em 0.8em; background: rgba(218,165,32,0.04); transition: background 0.2s, color 0.2s; }
.tb-pill:hover { border-color: #DAA520; box-shadow: 0 0 0.8em rgba(218,165,32,0.25); }
.tb-pill:hover .body { background: #DAA520; color: #0a0a0a; }
.tb-pill.busy .body, .tb-pill.busy:hover .body { background: rgba(218,165,32,0.04); color: rgba(218,165,32,0.7); }
.tb-pill.busy .tb-cndl i { animation: tbPulse 1s ease-in-out infinite; }
.tb-pill.done, .tb-pill.done:hover { border-color: rgba(218,165,32,0.25); box-shadow: none; }
.tb-pill.done .body, .tb-pill.done:hover .body { background: transparent; color: rgba(218,165,32,0.55); }
.tb-pill.done .side { background: transparent; opacity: 0.6; }
.tb-cndl { display: flex; align-items: flex-end; gap: 0.16em; height: 1.05em; }
.tb-cndl i { display: block; width: 0.24em; }
.tb-cndl i.u { background: #26a69a; } .tb-cndl i.d { background: #ef5350; }
.tb-showall { display: inline-flex; align-items: center; gap: 0.5em; font-family: 'DM Sans', 'Inter', sans-serif; font-size: 0.9em; font-weight: 500; line-height: 1; white-space: nowrap; color: #DAA520; background: rgba(218,165,32,0.1); border: 1px solid rgba(218,165,32,0.3); border-radius: 4px; padding: 0.55em 0.9em; transition: all 0.2s; }
.tb-showall:hover { background: rgba(218,165,32,0.2); border-color: #DAA520; }
.tb-pin { display: inline-flex; align-items: center; gap: 0.5em; font-family: 'DM Sans', 'Inter', sans-serif; font-size: 0.9em; line-height: 1; white-space: nowrap; color: #DAA520; background: rgba(218,165,32,0.08); border: 1px solid rgba(218,165,32,0.15); border-radius: 4px; padding: 0.4em 0.7em; }
.tb-pin .x { opacity: 0.5; margin-left: 0.2em; }
.tb-tool { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 0.35em; color: #DAA520; font-size: 1em; border: 1px solid transparent; transition: all 0.2s; vertical-align: middle; }
.tb-tool.on { background: rgba(218,165,32,0.18); border-color: #DAA520; }
.tb-tri { font-size: 0.62em; letter-spacing: -0.1em; }
.tb-toast { display: inline-flex; align-items: center; gap: 0.5em; font-family: 'DM Sans', 'Inter', sans-serif; font-size: 0.9em; line-height: 1.2; color: #FFFFF0; background: #16130d; border: 1px solid #DAA520; border-radius: 4px; padding: 0.55em 0.8em; box-shadow: 0 6px 18px rgba(0,0,0,0.5); }
.tb-toast .spark { color: #DAA520; } .tb-toast .x { color: rgba(255,255,240,0.45); margin-left: 0.4em; }
.tb-q { display: inline-block; font-family: Georgia, serif; font-style: italic; font-size: 0.95em; color: #1a1612; background: #f5f0e8; border: 1px solid rgba(42,36,28,0.5); border-radius: 3px; padding: 0.45em 0.8em; }
.tb-exec.on { border-color: #26a69a; box-shadow: 0 0 0.8em rgba(38,166,154,0.35); }

/* -------------------------------------------------------------
   Close-ups of single AI Study interactions: bigger type, fewer things
   ------------------------------------------------------------- */
.ix { position: absolute; inset: 0; display: grid; grid-template-columns: 320px 1fr; gap: 14px; padding: 16px; font-size: 14px; background: #0a0a0a; }
.ix--solo { grid-template-columns: 1fr; padding: 16px 100px; }
.ix-chart { border: 1px solid var(--line); border-radius: 8px; display: grid; grid-template-rows: 36px 1fr; overflow: hidden; min-height: 0; min-width: 0; }
.ix-chart-bar { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-bottom: 1px solid var(--line-soft); }
.ix-chart-bar .sel { font-size: 12px; border: 1px solid var(--line-soft); border-radius: 4px; padding: 4px 10px; }
.ix-flag { margin-left: auto; font-size: 12px; color: var(--gold); opacity: 0; transition: opacity 0.25s; white-space: nowrap; }
.ix-flag.is-on { opacity: 1; }
.ix-plot { position: relative; min-height: 0; padding: 8px 6px; }
/* min-width: 0 so long lines wrap inside the column instead of widening it */
.ix-chat { border: 1px solid var(--line); border-radius: 8px; display: grid; grid-template-rows: 1fr auto 52px; grid-template-columns: minmax(0, 1fr); overflow: hidden; min-height: 0; min-width: 0; }
.ix-msgs { overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 12px 14px; }
.ix-msg { flex: none; max-width: 94%; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s; }
.ix-msg.is-on { opacity: 1; transform: none; }
.ix-msg .who { font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ix-msg.you { align-self: flex-end; }
.ix-msg.you .bub { background: #1c1c1c; border: 1px solid var(--line-soft); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; line-height: 1.45; }
.ix-msg.mentor .who { color: var(--gold); }
.ix-msg.mentor .who::before { content: '• '; }
.ix-msg.mentor .bub { background: #141414; border: 1px solid var(--line-soft); border-radius: 8px; padding: 11px 14px; font-family: 'Libre Baskerville', Georgia, serif; font-size: 13.5px; line-height: 1.95; }
.ix-msg .bub .row, .ix-msg .bub .offer { margin-top: 10px; line-height: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; }
.ix-msg .bub .row { padding-top: 10px; border-top: 1px solid rgba(218,165,32,0.12); }
.ix-you-pins { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-bottom: 7px; font-size: 12px; }
.ix-pins { padding: 0 14px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.ix-pins .tb-pin { margin-bottom: 8px; }
.ix-composer { display: flex; align-items: center; gap: 2px; padding: 0 12px; border-top: 1px solid var(--line-soft); font-size: 14px; }
.ix-field { flex: 1; margin-left: 8px; border: 1px solid var(--line-soft); border-radius: 6px; padding: 7px 12px; font-size: 13px; font-style: italic; color: var(--muted); min-height: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-field.typing { font-style: normal; color: var(--ivory); }
.ix-send { width: 32px; height: 32px; margin-left: 8px; border-radius: 6px; background: rgba(218,165,32,0.2); border: 1px solid var(--gold); color: var(--gold); display: grid; place-items: center; font-size: 13px; }
.ix-sel { position: absolute; top: 8px; bottom: 8px; width: 0; background: rgba(218,165,32,0.16); border: 1px solid rgba(218,165,32,0.75); border-radius: 3px; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.ix-sel.is-on { opacity: 1; }
.ix-sel.grow { transition: opacity 0.2s, width 0.95s cubic-bezier(0.3, 0, 0.2, 1); }
.ix-hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); font-size: 12px; color: var(--ink); background: var(--gold); padding: 5px 12px; border-radius: 14px; opacity: 0; transition: opacity 0.3s; white-space: nowrap; }
.ix-hint.is-on { opacity: 1; }
.ix-think { flex: none; align-self: flex-start; font-size: 12.5px; color: var(--muted); border: 1px solid var(--line-soft); border-radius: 5px; padding: 6px 10px; }
.ix-think i { color: var(--gold); font-style: normal; }
.ix-news-card { flex: none; border: 1px solid rgba(218,165,32,0.35); border-radius: 8px; background: #0f0f0f; padding: 12px 14px; font-size: 13px; line-height: 1.5; opacity: 0; transition: opacity 0.35s; }
.ix-news-card.is-on { opacity: 1; }
.ix-news-card .h { display: flex; justify-content: space-between; gap: 10px; color: var(--gold); }
.ix-news-card .h span { color: var(--muted); font-size: 11.5px; }
.ix-news-card .d { color: rgba(255,255,240,0.88); margin: 6px 0; }
.ix-news-card .src { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; }
.ix-news-card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.ix-news-card .more { font-size: 11.5px; color: var(--gold); }
.ix-news-card .save { font-size: 12px; color: var(--gold); border: 1px solid rgba(218,165,32,0.45); padding: 5px 11px; border-radius: 4px; transition: all 0.2s; }
.ix-news-card .save.done { color: #7fd8cf; border-color: rgba(38,166,154,0.5); }
.ix-ctx { flex: none; border: 1px dashed rgba(218,165,32,0.45); border-radius: 6px; padding: 9px 12px; font-size: 12.5px; color: var(--muted); line-height: 1.5; opacity: 0; transition: opacity 0.35s; }
.ix-ctx.is-on { opacity: 1; }
.ix-ctx b { color: var(--gold); font-weight: 600; }
.ix-sugg { position: absolute; right: 116px; bottom: 76px; width: 380px; z-index: 5; background: var(--paper); color: var(--paper-ink); border: 1px solid rgba(42,36,28,0.6); border-radius: 5px; padding: 12px 16px; font-family: Georgia, serif; box-shadow: 0 14px 40px rgba(0,0,0,0.75); opacity: 0; transform: translateY(8px); transition: all 0.3s; pointer-events: none; }
.ix-sugg.is-on { opacity: 1; transform: none; }
.ix-sugg .h { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-align: center; border-bottom: 1px solid rgba(42,36,28,0.4); padding-bottom: 6px; }
.ix-sugg .s { font-size: 11px; font-style: italic; text-align: center; color: rgba(26,22,18,0.6); margin: 5px 0 6px; }
.ix-sugg .g { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: 1.3px; text-transform: uppercase; color: rgba(26,22,18,0.65); padding: 7px 5px; border-top: 1px solid rgba(42,36,28,0.15); border-radius: 2px; transition: background 0.2s; }
.ix-sugg .g.is-hover { background: rgba(218,165,32,0.18); }
.ix-sugg .q { display: none; font-size: 12.5px; font-style: italic; padding: 5px 7px; border-radius: 3px; transition: background 0.2s; }
.ix-sugg .grp.open .q { display: block; }
.ix-sugg .q.is-hover { background: rgba(218,165,32,0.28); }
.ix-modal-back { position: absolute; inset: 0; z-index: 6; background: rgba(0,0,0,0.65); display: grid; place-items: center; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.ix-modal-back.is-on { opacity: 1; }
.ix-modal { width: 540px; background: #141210; border: 1px solid rgba(218,165,32,0.5); border-radius: 10px; padding: 16px 18px; box-shadow: 0 20px 50px rgba(0,0,0,0.8); }
.ix-modal .t { font-family: 'Libre Baskerville', Georgia, serif; font-size: 17px; display: flex; justify-content: space-between; }
.ix-modal .t span { color: var(--muted); }
.ix-modal .sub { font-size: 12px; color: var(--muted); margin: 6px 0 12px; line-height: 1.45; }
.ix-modal .loading { font-size: 13px; color: var(--gold); padding: 36px 0; text-align: center; }
.ix-modal .ready { display: none; }
.ix-modal .ready.is-on { display: block; }
.ix-modal .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-soft); margin-bottom: 10px; }
.ix-modal .tabs span { font-size: 12.5px; padding: 7px 10px; color: var(--muted); border-bottom: 2px solid transparent; transition: all 0.2s; }
.ix-modal .tabs span.on { color: var(--ivory); border-bottom-color: var(--gold); }
.ix-modal .radios { display: flex; gap: 18px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.ix-modal .radios span::before { content: '○ '; }
.ix-modal .radios span.on { color: var(--ivory); }
.ix-modal .radios span.on::before { content: '◉ '; color: var(--gold); }
.ix-modal .ta { background: #f3e9b8; color: #3a2d0f; border-radius: 4px; padding: 10px 12px; font-family: 'Libre Baskerville', Georgia, serif; font-size: 12.5px; line-height: 1.75; min-height: 116px; white-space: pre-line; }
.ix-modal .foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.ix-modal .foot span { font-size: 12.5px; padding: 7px 14px; border-radius: 5px; transition: transform 0.15s; }
.ix-modal .foot .cancel { border: 1px solid var(--line-soft); color: var(--muted); }
.ix-modal .foot .fill { background: var(--gold); color: var(--ink); font-weight: 700; }
.ix-toast-wrap { position: absolute; right: 116px; bottom: 76px; z-index: 4; font-size: 13px; opacity: 0; transition: opacity 0.3s; }
.ix-toast-wrap.is-on { opacity: 1; }
.ix-done { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 7; background: #16130d; border: 1px solid #26a69a; color: #7fd8cf; font-size: 13px; padding: 7px 14px; border-radius: 16px; opacity: 0; transition: opacity 0.3s; }
.ix-done.is-on { opacity: 1; }

/* "this is clickable": a soft gold pulse before the cursor clicks */
.tb-hint { animation: tbHint 0.9s ease-in-out 2; }
@keyframes tbHint { 0%, 100% { box-shadow: 0 0 0 0 rgba(218,165,32,0); } 50% { box-shadow: 0 0 0 0.4em rgba(218,165,32,0.35); } }

/* =============================================================
   STAGE 5 — Journal Entries (playbooks.html folders → tier 2 cards)
   ============================================================= */
.st-pb { position: absolute; inset: 0; padding: 16px 18px; }
.st-pb-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.st-pb-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.st-pb-head p { margin: 2px 0 0; font-size: 9.5px; color: var(--muted); }
.st-pb-new { background: var(--gold); color: var(--ink); font-size: 9px; font-weight: 700; padding: 6px 10px; border-radius: 4px; }
.st-pb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.st-pb-card { background: var(--panel-solid); border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; opacity: 0; transform: translateY(10px); transition: all 0.4s; position: relative; }
.st-pb-card.is-on { opacity: 1; transform: none; }
.st-pb-card .dots { position: absolute; top: 6px; right: 6px; font-size: 8px; color: var(--muted); background: rgba(0,0,0,0.5); padding: 1px 5px; border-radius: 3px; }
.st-pb-thumb { height: 236px; background-size: cover; background-position: center; filter: grayscale(0.2); }
.st-pb-thumb.chart { padding: 6px; background: #0a0a0a; }
.st-pb-body { padding: 10px; }
/* the folder view holds two rows of three, so its covers are shorter */
.st-pb-grid.folders { gap: 10px; }
.st-pb-grid.folders .st-pb-thumb { height: 104px; }
.st-pb-grid.folders .st-pb-body { padding: 7px 10px 8px; }
.st-pb-grid.folders .st-pb-body .d { margin: 1px 0 5px; }
.st-pb-grid.folders .st-pb-body .c { padding-top: 4px; }
.st-pb-body .n { color: var(--gold); font-weight: 700; font-size: 11px; }
.st-pb-body .d { font-size: 8px; color: var(--muted); margin: 2px 0 8px; }
.st-pb-body .c { display: flex; justify-content: space-between; font-size: 8.5px; color: var(--gold); border-top: 1px solid var(--line-soft); padding-top: 6px; }
.st-pb-tier2 { position: absolute; inset: 0; background: #000; padding: 16px 18px; opacity: 0; transition: opacity 0.35s; pointer-events: none; }
.st-pb-tier2.is-on { opacity: 1; }
.st-pb-bc { font-size: 9px; color: var(--muted); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.st-pb-bc b { color: var(--gold); font-weight: 600; }
.st-pb-bc .back { color: var(--gold); margin-right: 8px; }

/* =============================================================
   STAGE 6 — Journal Builder (Dash layout: stepper + four step screens)
   ============================================================= */
.st-jb { position: absolute; inset: 0; padding: 12px 14px; }
.st-jb-stepper { display: flex; align-items: center; gap: 8px; background: #111; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.st-jb-stepper .help { width: 20px; height: 18px; border: 1px solid var(--line-soft); border-radius: 4px; display: grid; place-items: center; font-size: 7px; color: var(--muted); }
.st-jb-stepper .lbl { font-family: 'Libre Baskerville', Georgia, serif; font-size: 9px; font-weight: 700; color: var(--gold); margin-right: 6px; }
.st-jb-step { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 6px; color: var(--muted); }
.st-jb-step .bx { width: 24px; height: 20px; border: 1px solid var(--line-soft); border-radius: 4px; display: grid; place-items: center; font-size: 8px; transition: all 0.3s; }
.st-jb-step.active .bx { background: rgba(218,165,32,0.2); border-color: var(--gold); color: var(--gold); }
.st-jb-step.done .bx { border-color: var(--gold); color: var(--gold); }
.st-jb-line { width: 22px; height: 1px; background: var(--line-soft); }
.st-jb-stepof { font-size: 8px; color: var(--muted); margin-left: 6px; font-family: 'Libre Baskerville', Georgia, serif; }
.st-jb-add { margin-left: auto; background: #1a1a1a; border: 1px solid var(--gold); color: var(--gold); font-size: 7.5px; padding: 5px 8px; border-radius: 4px; }
.st-jb-view { position: absolute; left: 14px; right: 14px; top: 60px; bottom: 0; opacity: 0; transition: opacity 0.35s; pointer-events: none; }
.st-jb-view.is-on { opacity: 1; }
.st-jb-title { font-size: 13px; font-weight: 700; margin: 10px 0 6px; }
.st-jb-title i { color: var(--gold); margin-right: 5px; }
.st-jb-subtitle { font-size: 8px; color: var(--muted); margin: -2px 0 8px; }
.st-jb-sym { display: flex; align-items: center; gap: 10px; font-size: 9.5px; color: var(--gold); font-weight: 700; }
.st-jb-sym .in { width: 110px; border: 1px solid var(--gold); border-radius: 3px; padding: 6px 8px; background: #000; color: var(--ivory); font-weight: 400; min-height: 26px; }
.st-jb-sym .btn { background: var(--gold); color: var(--ink); padding: 6px 14px; border-radius: 3px; font-size: 9px; transition: transform 0.15s; }
.st-jb-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.st-jb-slot { border: 1px solid var(--line-soft); border-radius: 6px; height: 292px; position: relative; background: #050505; padding: 4px; }
.st-jb-slot .bar { display: flex; gap: 4px; padding: 3px; }
.st-jb-slot .bar span { font-size: 6.5px; padding: 2px 6px; border: 1px solid var(--line-soft); border-radius: 3px; color: var(--muted); }
.st-jb-slot .bar .rm { margin-left: auto; border-color: rgba(239,83,80,0.5); color: var(--down); }
.st-jb-slot .ttl { font-size: 7.5px; color: var(--gold); padding: 2px 6px; display: flex; justify-content: space-between; }
.st-jb-slot .ttl span { color: var(--muted); border: 1px solid var(--line-soft); padding: 0 4px; border-radius: 2px; font-size: 6px; }
.st-jb-slot .plotwrap { position: absolute; left: 4px; right: 4px; top: 40px; bottom: 4px; }
.st-jb-slot .loading { position: absolute; inset: 40px 4px 4px; display: grid; place-items: center; font-size: 8px; color: var(--muted); }
/* step 2 — news */
.st-jb-news { display: grid; grid-template-columns: 1fr 150px; gap: 10px; margin-top: 4px; }
.st-jb-news .tools { display: flex; align-items: center; gap: 8px; font-size: 7.5px; color: var(--muted); margin-bottom: 8px; }
.st-jb-news .tools .btn { background: var(--gold); color: var(--ink); font-weight: 700; padding: 4px 8px; border-radius: 3px; font-size: 7.5px; }
.st-jb-art { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line-soft); border-radius: 5px; padding: 10px 10px; margin-bottom: 7px; transition: all 0.25s; opacity: 0; transform: translateY(4px); }
.st-jb-art.is-on { opacity: 1; transform: none; }
.st-jb-art.sel { border-color: var(--gold); background: rgba(218,165,32,0.06); }
.st-jb-art .cb { width: 10px; height: 10px; border: 1px solid var(--gold); border-radius: 2px; flex: none; margin-top: 1px; display: grid; place-items: center; font-size: 7px; color: var(--ink); }
.st-jb-art.sel .cb { background: var(--gold); }
.st-jb-art .t { font-size: 8px; font-weight: 600; }
.st-jb-art .m { font-size: 6.5px; color: var(--muted); margin-top: 2px; }
.st-jb-side { border: 1px solid var(--line-soft); border-radius: 5px; padding: 8px; }
.st-jb-side .h { font-size: 8px; font-weight: 700; color: var(--gold); margin-bottom: 6px; }
.st-jb-side .ch { height: 170px; }
.st-jb-side .selh { font-size: 7.5px; font-weight: 700; margin-top: 8px; border-top: 1px solid var(--line-soft); padding-top: 6px; }
.st-jb-side .seli { font-size: 6.5px; color: var(--muted); margin-top: 3px; }
/* step 3 — comparison */
.st-jb-cmp { display: grid; grid-template-columns: 1fr 140px; gap: 10px; }
.st-jb-cmp .search { display: flex; gap: 6px; margin-bottom: 8px; }
.st-jb-cmp .search .in { flex: 1; border: 1px solid var(--line-soft); border-radius: 3px; padding: 4px 8px; font-size: 7.5px; color: var(--muted); font-style: italic; }
.st-jb-cmp .search .btn { background: var(--gold); color: var(--ink); font-size: 7.5px; font-weight: 700; padding: 4px 10px; border-radius: 3px; }
.st-jb-cmp .grp { font-size: 7px; letter-spacing: 1.5px; color: var(--gold); margin-bottom: 6px; }
.st-jb-cmp .grp span { color: var(--muted); letter-spacing: 0; margin-left: 8px; font-style: italic; }
.st-jb-cmp .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-jb-cmpcard { border: 1px solid var(--line-soft); border-radius: 5px; padding: 6px; background: #0a0a0a; }
.st-jb-cmpcard .tk { font-size: 9px; font-weight: 700; } .st-jb-cmpcard .co { font-size: 6.5px; color: var(--muted); }
.st-jb-cmpcard .ch { height: 160px; margin: 6px 0; }
.st-jb-cmpcard .note { font-size: 6px; color: var(--muted); margin-bottom: 3px; }
.st-jb-cmpcard .tfs { display: flex; gap: 2px; flex-wrap: wrap; }
.st-jb-cmpcard .tfs span { font-size: 6px; padding: 1px 4px; border: 1px solid var(--line-soft); border-radius: 2px; color: var(--muted); transition: all 0.2s; }
.st-jb-cmpcard .tfs span.on { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.st-jb-cmp .added { border: 1px solid var(--line-soft); border-radius: 5px; padding: 8px; font-size: 7.5px; }
.st-jb-cmp .added .h { color: var(--gold); font-weight: 700; margin-bottom: 6px; font-size: 7.5px; }
.st-jb-cmp .added .row { border: 1px solid rgba(218,165,32,0.35); border-radius: 3px; padding: 4px 6px; font-size: 7.5px; opacity: 0; transition: opacity 0.3s; }
.st-jb-cmp .added .row.is-on { opacity: 1; }
.st-jb-count { position: absolute; right: 0; top: 10px; font-size: 7.5px; color: var(--gold); border: 1px solid var(--gold); padding: 3px 8px; border-radius: 3px; }
/* step 4 — the notebook */
.st-jb-book { margin-top: 6px; background: #6b4a2a; border-radius: 8px; padding: 10px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; position: relative; }
.st-jb-page { background: #f7f1e1; color: #2a1f0e; padding: 12px 14px; min-height: 270px; font-family: 'Libre Baskerville', Georgia, serif; }
.st-jb-page.l { border-radius: 6px 0 0 6px; border-right: 1px solid #c9b58a; }
.st-jb-page.r { border-radius: 0 6px 6px 0; }
.st-jb-page .big { font-size: 30px; font-weight: 700; }
.st-jb-page .date { font-size: 8px; font-style: italic; color: #6b5a3a; }
.st-jb-page .h { font-size: 8.5px; font-weight: 700; margin-top: 10px; border-bottom: 1px solid #c9b58a; padding-bottom: 2px; }
.st-jb-page ul { margin: 4px 0 0; padding-left: 12px; font-size: 7px; }
.st-jb-page .box { border: 1px dashed #b9a57a; font-size: 6.5px; font-style: italic; color: #8a7a5a; text-align: center; padding: 6px; margin-top: 4px; }
.st-jb-page .box.filled { color: #2a1f0e; font-style: normal; border-style: solid; }
.st-jb-sticky { position: absolute; left: -6px; top: -8px; background: #f5e663; color: #3a2d0f; font-family: 'Comic Sans MS', 'Segoe Print', cursive; font-size: 7px; padding: 6px 8px; transform: rotate(-6deg); box-shadow: 0 3px 8px rgba(0,0,0,0.4); width: 60px; text-align: center; }
.st-jb-saverow { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 8.5px; }
.st-jb-saverow .sel { flex: 1; border: 1px solid var(--line-soft); border-radius: 3px; padding: 5px 8px; color: var(--muted); display: flex; justify-content: space-between; }
.st-jb-saverow .sel.set { color: var(--ivory); }
.st-jb-saverow .sel::after { content: '▾'; }
.st-jb-saverow .new { color: var(--gold); font-size: 8px; }
.st-jb-saverow .go { background: var(--gold); color: var(--ink); font-weight: 700; font-size: 9px; padding: 6px 14px; border-radius: 4px; transition: transform 0.15s; }
.st-toast {
    position: absolute; right: 14px; bottom: 14px; z-index: 23; background: #14120e; border: 1px solid var(--gold); color: var(--ivory);
    font-size: 9.5px; padding: 8px 12px; border-radius: 6px; opacity: 0; transform: translateY(8px); transition: all 0.3s;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}
.st-toast.is-on { opacity: 1; transform: none; }
.st-toast i { color: var(--gold); margin-right: 5px; }

/* =============================================================
   STAGE — My Trades (journal_dashboard.html: masthead, tabs, tiles,
   the Upload a CSV dialog, the AI Insights chat)
   ============================================================= */
.st-mt { position: absolute; inset: 0; padding: 14px 18px; background: #000; }
.st-mt .gain, .st-mt-dim .gain { color: var(--up); } .st-mt .loss { color: var(--down); }
.st-mt-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 9px; border-bottom: 1px solid var(--line-soft); }
.st-mt-top h3 { margin: 0; font-family: 'Libre Baskerville', Georgia, serif; font-size: 19px; font-weight: 700; color: #fff; }
.st-mt-top .r { display: flex; align-items: center; gap: 8px; }
.st-mt-btn { background: #0f0f0f; border: 1px solid #262626; border-radius: 4px; color: #d4d4d8; font-family: 'Libre Baskerville', Georgia, serif; font-size: 9px; padding: 6px 10px; white-space: nowrap; }
.st-mt-btn.gold { background: var(--gold); border-color: var(--gold); color: #1a1200; font-weight: 700; }
.st-mt-addwrap { position: relative; }
.st-mt-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 6; width: 112px; background: #0f0f0f; border: 1px solid #262626; border-radius: 5px; padding: 3px; box-shadow: 0 8px 22px rgba(0,0,0,0.7); opacity: 0; transition: opacity 0.2s; }
.st-mt-menu.is-on { opacity: 1; }
.st-mt-menu div { font-size: 9px; color: #d4d4d8; padding: 6px 8px; border-radius: 3px; border: 1px solid transparent; }
.st-mt-menu div.is-hover { background: rgba(218,165,32,0.18); color: var(--ivory); }
.st-mt-tabs { display: flex; gap: 20px; margin: 9px 0 10px; border-bottom: 1px solid var(--line-soft); }
.st-mt-tabs span { font-family: 'Libre Baskerville', Georgia, serif; font-size: 10.5px; color: #a1a1aa; padding: 0 2px 7px; border-bottom: 2px solid transparent; }
.st-mt-tabs span.on { color: var(--gold); border-bottom-color: var(--gold); }
.st-mt-tabs small { font-family: 'Inter', sans-serif; font-size: 7px; color: var(--muted); }
.st-mt-view { display: none; }
.st-mt-view.is-on { display: block; }
.st-mt-card { background: #0f0f0f; border: 1px solid #1f1f1f; border-top: 2px solid #B8860B; border-radius: 7px; padding: 11px 13px; }
.st-mt-card h4 { margin: 0; font-family: 'Libre Baskerville', Georgia, serif; font-size: 11.5px; font-weight: 700; color: #fff; }
.st-mt-card p { margin: 3px 0 0; font-size: 8.5px; line-height: 1.5; color: var(--muted); }
.st-mt-card .acts { display: flex; gap: 8px; margin-top: 11px; }
.st-mt-card.connect { max-width: 470px; margin: 46px auto 0; padding: 18px 20px; }
.st-mt-card.connect h4 { font-size: 15px; }
.st-mt-card.connect p { font-size: 10px; }
/* tiles */
.st-mt-tiles { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.25fr; gap: 8px; margin-bottom: 8px; }
.st-mt-tile { background: #0f0f0f; border: 1px solid #1f1f1f; border-top: 2px solid #B8860B; border-radius: 7px; padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; opacity: 0; transform: translateY(8px); transition: opacity 0.4s, transform 0.4s; }
.st-mt-tile.is-on { opacity: 1; transform: none; }
.st-mt-tile.hero { border: 1px solid rgba(218,165,32,0.7); }
.st-mt-tile .l { font-size: 6.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.st-mt-tile .v { font-size: 14px; font-weight: 700; color: #fff; }
.st-mt-tile .v b { font-weight: 700; }
.st-mt-tile .n { font-size: 7.5px; color: var(--muted); }
.st-mt-tile .n b { font-weight: 600; }
.st-mt-tile .n i { font-style: normal; font-size: 7px; font-weight: 600; padding: 1px 5px; border-radius: 8px; margin-right: 4px; }
.st-mt-tile .n i.g { background: rgba(38,166,154,0.2); color: var(--up); } .st-mt-tile .n i.r { background: rgba(239,83,80,0.2); color: var(--down); }
.st-mt-two { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; }
.st-mt-two .st-mt-card { height: 262px; }
.st-mt-card .curve { height: 190px; margin-top: 10px; }
.st-mt-tbl { width: 100%; border-collapse: collapse; margin-top: 7px; font-size: 8.5px; }
.st-mt-tbl th { text-align: left; font-size: 6.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; color: var(--muted); padding: 5px 4px; border-bottom: 1px solid var(--line-soft); }
.st-mt-tbl td { padding: 10.5px 4px; border-bottom: 1px solid rgba(255,255,240,0.05); color: #d4d4d8; white-space: nowrap; }
.st-mt-tbl .r { text-align: right; }
.st-mt-tbl .sym { color: #fff; font-weight: 700; }
.st-mt-tbl .sym span { display: block; font-size: 6.5px; font-weight: 400; color: var(--muted); }
.st-mt-tbl .study { color: var(--gold); border: 1px solid transparent; border-radius: 3px; padding: 2px 4px; }
/* AI Insights chat */
.st-mt-card.chat { height: 350px; display: flex; flex-direction: column; }
.st-mt-card.chat .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.st-mt-card.chat .chip { font-family: 'Libre Baskerville', Georgia, serif; font-size: 8px; color: #d4d4d8; border: 1px solid #2a2a2a; border-radius: 12px; padding: 4px 9px; }
.st-mt-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 10px 2px; overflow: hidden; }
.st-mt-msgs .st-msg { max-width: 80%; }
.st-mt-input { display: flex; align-items: center; justify-content: space-between; background: #141414; border: 1px solid var(--line-soft); border-radius: 5px; padding: 7px 9px; font-size: 9px; font-style: italic; color: rgba(255,255,240,0.35); }
.st-mt-input i { font-style: normal; background: var(--gold); color: var(--ink); border-radius: 4px; width: 17px; height: 17px; display: grid; place-items: center; font-weight: 700; }
/* Upload a CSV dialog */
.st-mt-dim { position: absolute; inset: 0; z-index: 8; background: rgba(0,0,0,0.72); display: grid; place-items: center; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.st-mt-dim.is-on { opacity: 1; }
.st-mt-dlg { width: 330px; padding: 16px 18px; }
.st-mt-dlg h4 { font-size: 14px; }
.st-mt-dlg p { font-size: 9.5px; margin-top: 6px; }
.st-mt-dlg .drop { margin-top: 10px; border: 1px dashed rgba(218,165,32,0.55); border-radius: 6px; padding: 22px 10px; text-align: center; font-size: 9.5px; color: #d4d4d8; }
.st-mt-dlg .wait { display: flex; align-items: center; gap: 8px; padding: 18px 0; }
.st-mt-dlg .spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(218,165,32,0.25); border-top-color: var(--gold); animation: stMtSpin 0.8s linear infinite; }
@keyframes stMtSpin { to { transform: rotate(360deg); } }
.st-mt-dlg .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 4px; }
.st-mt-dlg .stats div { background: #141414; border: 1px solid var(--line-soft); border-radius: 5px; padding: 7px 8px; }
.st-mt-dlg .stats span { display: block; font-size: 6.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.st-mt-dlg .stats b { font-size: 14px; color: #fff; }
.st-mt-dlg .acts { justify-content: flex-end; margin-top: 14px; }

/* ---------- footer ---------- */
.tut-footer { text-align: center; color: rgba(255,255,240,0.35); font-size: 11px; padding: 20px 0 0; }
/* Replay link sits in the strip above the chapter list without moving the player (negative margin) */
.tut-replay-top { position: relative; z-index: 2; height: 22px; margin: 6px 0 -28px; font-size: 12px; }
.tut-replay { color: rgba(218,165,32,0.85); text-decoration: none; font-weight: 600; }
.tut-replay:hover { color: #DAA520; text-decoration: underline; }
.tut-replay i { font-size: 10px; margin-right: 6px; }


/* ---------- phones ---------- */
@media (max-width: 860px) {
    .tut-page { padding: 0 16px 40px; }
    .tut-site-title { font-size: 22px; }
    .tut-logo { height: 36px; }
    .tut-header-cta { display: none; }
}