/* ══ NxTGen Journal — final-misc.css (original styles.css lines 11700-12531) ══ */

/* ═══════════════════════════════════════════════════════
   CALENDAR 2.0 — smarter stats, insights, score, heatmap,
   filters, view modes, weekly reports, richer day cells
   ═══════════════════════════════════════════════════════ */

/* sub-metric chip rows inside analytics cards */
.cal2-sub-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.cal2-sub-chip{
  font-size:10px;font-weight:600;padding:3px 7px;border-radius:6px;
  background:var(--glass-2);border:1px solid var(--glass-border);color:var(--text2);
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
}
.cal2-sub-chip.green{color:var(--green);border-color:rgba(52,211,153,.25);background:rgba(52,211,153,.08)}
.cal2-sub-chip.red{color:var(--red);border-color:rgba(248,113,113,.25);background:rgba(248,113,113,.08)}
.cal2-sub-chip.muted{color:var(--text3)}
.cal2-sub-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.cal2-sub-dot.green{background:var(--green);box-shadow:0 0 5px var(--green-glow)}
.cal2-sub-dot.red{background:var(--red);box-shadow:0 0 5px var(--red-glow)}
.cal2-sub-dot.blue{background:var(--blue);box-shadow:0 0 5px var(--blue-glow)}

/* Trading Score + Monthly Intelligence row */
.cal2-top-row{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:14px;margin-top:2px;min-width:0}
@media (max-width: 900px){ .cal2-top-row{grid-template-columns:1fr} }
.cal2-score-card,.cal2-insights-card{min-width:0;
  background:var(--glass-1);border:1px solid var(--glass-border);border-radius:var(--r-xl);
  padding:16px 18px;box-shadow:var(--shadow-sm);min-width:0;
}
[data-theme="light"] .cal2-score-card,[data-theme="light"] .cal2-insights-card{background:var(--glass-2);box-shadow:var(--shadow-xs)}
.cal2-score-card{display:flex;align-items:center;gap:16px;min-width:0}
.cal2-score-card:empty,.cal2-insights-card:empty{display:none}
.cal2-score-ring{position:relative;flex:0 0 auto}
.cal2-score-ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cal2-score-num{font-family:var(--font-mono,monospace);font-size:22px;font-weight:700;color:var(--text)}
.cal2-score-grade{font-size:11px;font-weight:800;letter-spacing:.03em}
.cal2-score-body{flex:1;min-width:0}
.cal2-score-title{font-size:12px;color:var(--text2);font-weight:600;display:flex;align-items:center;gap:5px}
.cal2-score-trend{font-size:10.5px;margin:3px 0 10px;font-weight:600}
.cal2-score-trend.green{color:var(--green)} .cal2-score-trend.red{color:var(--red)} .cal2-score-trend.muted{color:var(--text3)}
.cal2-score-bars{display:flex;flex-direction:column;gap:6px}
.cal2-score-bar-row{display:flex;align-items:center;gap:8px}
.cal2-score-bar-label{font-size:9.5px;color:var(--text3);width:66px;flex:0 0 auto}
.cal2-score-bar-track{flex:1;height:5px;border-radius:3px;background:var(--glass-3);overflow:hidden}
.cal2-score-bar-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--green));border-radius:3px;transition:width .4s var(--ease-out)}

.cal2-section-head{font-size:12px;font-weight:700;color:var(--text2);display:flex;align-items:center;gap:6px;margin-bottom:10px;text-transform:uppercase;letter-spacing:.04em}
.cal2-insight-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.cal2-insight-card{
  display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border-radius:10px;
  background:var(--glass-2);border:1px solid var(--glass-border);min-width:0;box-sizing:border-box;
}
.cal2-insight-card.green{border-color:rgba(52,211,153,.22)}
.cal2-insight-card.red{border-color:rgba(248,113,113,.22)}
.cal2-insight-card.blue{border-color:rgba(96,165,250,.22)}
.cal2-insight-card.amber{border-color:rgba(251,191,36,.25)}
.cal2-insight-icon{flex:0 0 auto;width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.cal2-insight-card.green .cal2-insight-icon{background:rgba(52,211,153,.14);color:var(--green)}
.cal2-insight-card.red .cal2-insight-icon{background:rgba(248,113,113,.14);color:var(--red)}
.cal2-insight-card.blue .cal2-insight-icon{background:rgba(96,165,250,.14);color:var(--blue)}
.cal2-insight-card.amber .cal2-insight-icon{background:rgba(251,191,36,.16);color:var(--gold)}
.cal2-insight-icon svg{width:13px;height:13px}
.cal2-insight-text{font-size:11.5px;line-height:1.45;color:var(--text2);overflow-wrap:anywhere;min-width:0}

/* Filter bar */
.cal2-filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0;max-width:100%}
.cal2-filter-sel{font-size:11px;padding:5px 8px;height:30px;width:auto;flex:1 1 150px;max-width:220px}
.cal2-filter-clear{
  display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text3);
  background:transparent;border:1px solid var(--glass-border);border-radius:6px;padding:5px 9px;cursor:pointer;
}
.cal2-filter-clear:hover{color:var(--red);border-color:rgba(248,113,113,.3)}

/* View mode / heatmap tabs */
.cal2-mode-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:0 2px 12px}
.cal2-tab-group{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.cal2-heat-label{font-size:10.5px;color:var(--text3);display:flex;align-items:center;gap:4px;margin-right:2px}
.cal2-heat-label svg{width:12px;height:12px}
.cal2-tab{
  font-size:11px;font-weight:600;padding:5px 12px;border-radius:7px;cursor:pointer;
  background:transparent;border:1px solid transparent;color:var(--text3);transition:all .12s var(--ease-out);
}
.cal2-tab.sm{font-size:10px;padding:4px 9px}
.cal2-tab:hover{color:var(--text2);background:var(--glass-2)}
.cal2-tab.active{color:var(--bg);background:var(--blue);font-weight:700}

/* Richer day cells */
.cal2-day-meta{display:flex;align-items:center;gap:4px;margin-top:3px;flex-wrap:wrap}
.cal2-day-meta-2{margin-top:2px}
.cal2-day-sess{font-size:7.5px;font-weight:800;padding:1px 4px;border-radius:4px;letter-spacing:.02em;background:var(--glass-3);color:var(--text3)}
.cal2-day-sess.london{color:var(--kz-london);background:rgba(34,211,238,.14)}
.cal2-day-sess.ny{color:var(--kz-ny);background:rgba(251,191,36,.14)}
.cal2-day-sess.asian{color:var(--kz-asian);background:rgba(167,139,250,.14)}
.cal2-day-rr{font-size:7.5px;font-weight:700;color:var(--text3)}
.cal2-day-rule{display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:50%}
.cal2-day-rule svg{width:8px;height:8px}
.cal2-day-rule.ok{color:var(--green)}
.cal2-day-rule.warn{color:var(--gold)}
.cal2-day-mistake{
  font-size:7px;color:var(--red);background:rgba(248,113,113,.12);border-radius:4px;
  padding:1px 4px;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Weekly report cards */
.cal2-week-report{align-items:stretch !important;flex-direction:column;gap:4px}
.cal2-week-top{display:flex;align-items:center;justify-content:space-between}
.cal2-week-grade{font-size:12px;font-weight:800}
.cal2-week-stats{display:flex;flex-direction:column;gap:3px;margin-top:6px;padding-top:6px;border-top:1px solid var(--glass-border)}
.cal2-week-stat{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:10px;min-width:0}
.cal2-week-stat .k{color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal2-week-stat .v{color:var(--text2);font-weight:600}
.cal2-week-stat .v.green{color:var(--green)}
.cal-week-card.empty{opacity:.55}

/* Agenda view */
.cal2-agenda-wrap{margin-top:4px}
.cal2-agenda{display:flex;flex-direction:column;gap:6px}
.cal2-agenda-empty{padding:32px;text-align:center;color:var(--text3);font-size:12px}
.cal2-agenda-row{min-width:0;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:10px;
  background:var(--glass-1);border:1px solid var(--glass-border);cursor:pointer;transition:all .12s var(--ease-out);
}
.cal2-agenda-row:hover{border-color:var(--glass-border-h);transform:translateX(2px)}
.cal2-agenda-row.win{box-shadow:inset 3px 0 0 var(--green)}
.cal2-agenda-row.loss{box-shadow:inset 3px 0 0 var(--red)}
.cal2-agenda-row.breakeven{box-shadow:inset 3px 0 0 var(--blue)}
.cal2-agenda-dow{font-size:12.5px;font-weight:600;color:var(--text)}
.cal2-agenda-sub{font-size:10.5px;color:var(--text3);margin-top:2px}
.cal2-agenda-pnl{font-size:14px;font-weight:700;font-family:var(--font-mono,monospace)}
.cal2-agenda-pnl.green{color:var(--green)} .cal2-agenda-pnl.red{color:var(--red)} .cal2-agenda-pnl.zero{color:var(--text3)}

/* Mobile tightening */
@media (max-width: 640px){
  .cal2-insight-grid{grid-template-columns:1fr}
  .cal2-score-card{flex-direction:row;padding:14px}
  .cal2-mode-tabs{gap:8px}
  .cal2-tab{padding:5px 9px;font-size:10.5px}
  .cal2-filter-sel{min-width:0;flex:1 1 45%}
}

/* ═══════════════════════════════════════════════════════
   CALENDAR 2.0 — Phase 4 (AI Coach tie-in) + Phase 5 (mobile)
   ═══════════════════════════════════════════════════════ */

/* AI Coach widget */
.cal2-coach-card{
  background:linear-gradient(160deg, rgba(96,165,250,.07), var(--glass-1) 55%);
  border:1px solid rgba(96,165,250,.18);border-radius:var(--r-xl);padding:16px 18px;
  box-shadow:var(--shadow-sm);
}
.cal2-coach-card:empty{display:none}
.cal2-coach-empty{display:flex;align-items:center;gap:8px;color:var(--text3);font-size:12px;padding:6px 2px}
.cal2-coach-empty svg{width:14px;height:14px}
.cal2-coach-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal2-coach-title{font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:7px}
.cal2-coach-title svg{width:14px;height:14px;color:var(--blue)}
.cal2-coach-conf{font-size:10.5px;font-weight:700;color:var(--blue);background:rgba(96,165,250,.12);padding:3px 9px;border-radius:20px}
.cal2-coach-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px;min-width:0}
.cal2-coach-col{min-width:0}
.cal2-coach-col-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px}
.cal2-coach-col-label.green{color:var(--green)} .cal2-coach-col-label.red{color:var(--red)}
.cal2-coach-item{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;color:var(--text2);line-height:1.4;margin-bottom:6px;overflow-wrap:anywhere;min-width:0}
.cal2-coach-item svg{width:11px;height:11px;flex:0 0 auto;margin-top:2px}
.cal2-coach-item.green svg{color:var(--green)} .cal2-coach-item.red svg{color:var(--red)}
.cal2-coach-item.muted{color:var(--text3);font-style:italic}
.cal2-coach-rec{
  font-size:11.5px;color:var(--text2);line-height:1.5;background:var(--glass-2);border-radius:8px;
  padding:9px 11px;margin-bottom:12px;border:1px solid var(--glass-border);overflow-wrap:anywhere;box-sizing:border-box;
}
.cal2-coach-rec-label{display:block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--blue);margin-bottom:3px}
.cal2-coach-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:7px;
  background:linear-gradient(135deg,var(--blue),#8b5cf6);color:#fff;border:none;border-radius:9px;
  padding:10px;font-size:12px;font-weight:700;cursor:pointer;transition:opacity .12s var(--ease-out), transform .12s var(--ease-out);
}
.cal2-coach-btn:hover{opacity:.9;transform:translateY(-1px)}
.cal2-coach-btn svg{width:13px;height:13px}
@media (max-width: 640px){ .cal2-coach-cols{grid-template-columns:1fr;gap:10px} }

/* Filter FAB (mobile only) + bottom sheet */
.cal2-filter-fab{
  display:none;align-items:center;gap:7px;position:relative;
  background:var(--glass-2);border:1px solid var(--glass-border);color:var(--text2);
  border-radius:20px;padding:9px 16px;font-size:12px;font-weight:600;cursor:pointer;width:fit-content;
}
.cal2-filter-fab-count{
  background:var(--blue);color:#fff;font-size:9.5px;font-weight:700;border-radius:10px;
  padding:1px 6px;min-width:14px;text-align:center;
}
.cal2-filter-sheet{position:fixed;inset:0;z-index:500;pointer-events:none;opacity:0;transition:opacity .2s var(--ease-out)}
.cal2-filter-sheet.open{pointer-events:auto;opacity:1}
.cal2-filter-sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.cal2-filter-sheet-panel{
  position:absolute;left:50%;bottom:0;transform:translate(-50%,100%);
  width:100%;max-width:480px;
  background:var(--bg2);border:1px solid var(--glass-border);border-bottom:none;
  border-radius:20px 20px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom, 0px));max-height:70vh;overflow-y:auto;
  box-shadow:0 -8px 40px rgba(0,0,0,.4);
  transition:transform .25s var(--ease-out);
}
.cal2-filter-sheet.open .cal2-filter-sheet-panel{transform:translate(-50%,0)}
.cal2-filter-sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--glass-border);margin:6px auto 14px}
.cal2-filter-sheet-head{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700;color:var(--text);margin-bottom:14px}
.cal2-filter-sheet-head button{background:none;border:none;color:var(--text3);cursor:pointer;padding:4px}
.cal2-filter-sheet-body{display:flex;flex-direction:column;gap:10px}
.cal2-filter-sheet-body select{
  width:100%;height:44px;flex:0 0 auto !important;background:var(--glass-3) !important;
  border:1px solid var(--glass-border-h,var(--glass-border));backdrop-filter:none !important;
}
.cal2-filter-sheet-body .cal2-filter-clear{width:100%;justify-content:center;padding:9px;background:var(--glass-3)}
.cal2-filter-sheet-apply{
  width:100%;margin-top:16px;background:var(--blue);color:#fff;border:none;border-radius:10px;
  padding:12px;font-size:13px;font-weight:700;cursor:pointer;
}
/* On short viewports (landscape phones, Nest Hub) the 70vh cap can still
   crowd out the Apply button below the fold — trim further. */
@media (max-height: 500px){ .cal2-filter-sheet-panel{max-height:88vh} }

/* Collapsible week cards (mobile) */
.cal2-week-expand-hint{display:none;font-size:9px;color:var(--text3);text-align:center;margin-top:6px}

/* ── Mobile-specific layout (Phase 5) ── */
@media (max-width: 900px){
  /* Filters: show FAB, hide inline desktop bar */
  .cal2-filter-fab{display:inline-flex}
  .cal2-filter-bar{display:none}

  /* Weekly report cards collapse to essentials until tapped */
  .cal2-week-report{cursor:pointer}
  .cal2-week-report .cal2-week-stats{
    max-height:0;overflow:hidden;opacity:0;margin-top:0;padding-top:0;border-top:none;
    transition:max-height .25s var(--ease-out), opacity .2s var(--ease-out);
  }
  .cal2-week-report.expanded .cal2-week-stats{
    max-height:200px;opacity:1;margin-top:6px;padding-top:6px;border-top:1px solid var(--glass-border);
  }
  .cal2-week-expand-hint{display:block}
  .cal2-week-report.expanded .cal2-week-expand-hint{display:none}
}

/* Weekly report cards carry more content (grade badge, stat rows) than
   the original label/pnl/days-pill card, but the summary still belongs
   in a single horizontal row like the rest of the mobile calendar —
   stacking one full-width card per week pushed this into a tall,
   scroll-heavy column. Keep it as one row of compact, equal-width cards;
   tapping a card expands its extra stats in place (siblings stay top
   aligned so they don't stretch to match the expanded card).
   NOTE: this must stay at the same breakpoint as the
   `.cal-week-col-wrap{width:100%}` rule above (760px) — that's what
   actually gives the row somewhere to grow into. The row-forcing rule
   used to live in the 900px block above and get squeezed into the
   desktop sidebar's 118px width for any viewport between 761–900px. */
@media (max-width: 760px){
  .cal-week-col{
    flex-direction:row !important;flex-wrap:nowrap !important;
    align-items:flex-start !important;gap:5px !important;
  }
  /* Cards stay flexible up to a floor width — below that (very narrow
     screens combined with a 5-6 week month) the row scrolls horizontally
     (see the base .cal-week-col overflow-x rule above) instead of
     clipping the PnL/day-count text. */
  .cal-week-card.cal2-week-report{
    flex:1 1 0% !important;width:auto !important;min-width:56px !important;
    text-align:center !important;align-items:center !important;justify-content:center !important;
    padding:9px 5px 8px !important;
  }
  .cal-week-card.cal2-week-report .cal2-week-top{
    flex-direction:column !important;gap:1px;align-items:center !important;justify-content:center !important;
  }
  .cal-week-card.cal2-week-report .cal-week-label{font-size:9px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .cal-week-card.cal2-week-report .cal2-week-grade{font-size:10px !important}
  .cal-week-card.cal2-week-report .cal-week-pnl{font-size:12.5px !important;margin-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .cal-week-card.cal2-week-report .cal-week-days{
    font-size:8px !important;padding:2px 6px !important;flex-shrink:0;
    white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  }
  .cal-week-card.cal2-week-report .cal2-week-stats{width:100%}
  .cal-week-card.cal2-week-report .cal2-week-stat{font-size:9px}
  .cal-week-card.cal2-week-report .cal2-week-expand-hint{font-size:8px}
}

/* ═══════════════════════════════════════════════════════
   Dashboard <-> Calendar page: maximize / minimize buttons
   ═══════════════════════════════════════════════════════ */
.cal2-sec-head-row{display:flex;align-items:center;gap:12px;margin:22px 0 10px}
.cal2-max-btn, .cal2-min-btn{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  background:var(--glass-2);border:1px solid var(--glass-border);color:var(--text2);
  border-radius:8px;padding:6px 12px;font-size:11px;font-weight:600;cursor:pointer;
  transition:all .12s var(--ease-out);white-space:nowrap;
}
.cal2-max-btn:hover, .cal2-min-btn:hover{
  color:var(--blue);border-color:rgba(96,165,250,.3);background:rgba(96,165,250,.08);transform:translateY(-1px);
}
.cal2-max-btn svg, .cal2-min-btn svg{width:12px;height:12px}
.cal2-min-btn{margin-right:2px}
@media (max-width: 640px){
  .cal2-max-btn span, .cal2-min-btn span{display:none}
  .cal2-max-btn, .cal2-min-btn{padding:6px 9px}
}

/* ── Performance: reduce backdrop-filter cost on mobile ──────────────────
   backdrop-filter is one of the most GPU-expensive CSS properties, and
   phone GPUs handle it far worse than desktop ones. This further lowers
   blur radii (on top of the base reduction above) specifically for small
   screens/touch devices, where the lag was most noticeable. Visually the
   glass effect is still present, just lighter. */
@media (max-width: 768px){
  :root{
    --blur-xs: blur(3px);
    --blur-sm: blur(5px);
    --blur-md: blur(8px);
    --blur-lg: blur(12px);
    --blur-xl: blur(16px);
  }
}

/* ══════════════════════════════════════════════════════
   BACKTESTING LAB — Strategy Library (Phase 1)
═══════════════════════════════════════════════════════ */
.bl-tabs { display:flex; gap:4px; }
.bl-tab {
  padding:4px 13px; border-radius:var(--r-sm);
  border:1px solid transparent; background:transparent;
  color:var(--text2); font-size:11.5px; font-weight:500;
  cursor:pointer; transition:var(--t-fast); font-family:var(--font-body);
}
.bl-tab:hover { color:var(--text); background:var(--glass-1); }
.bl-tab.active { background:var(--glass-2); color:var(--text); border-color:var(--glass-border-h); }

.bl-strategy-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:14px; margin-bottom:6px;
}
.bl-strategy-card {
  background:var(--glass-1); border:1px solid var(--glass-border);
  border-radius:var(--r-lg); padding:16px; transition:var(--t-med);
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:10px;
}
.bl-strategy-card::before {
  content:''; position:absolute; top:0; left:0; width:4px; height:100%;
  background:var(--bl-tag-color, var(--gold));
}
.bl-strategy-card:hover { background:var(--glass-2); border-color:var(--glass-border-h); transform:translateY(-1px); }
.bl-strategy-card-archived { opacity:.55; border-style:dashed; }
.bl-strategy-card-archived:hover { opacity:.8; }
.bl-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.bl-card-title { font-family:var(--font-head); font-size:15px; font-weight:700; letter-spacing:-.2px; }
.bl-card-meta { font-size:10.5px; color:var(--text3); margin-top:2px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em; }
.bl-card-desc { font-size:11.5px; color:var(--text2); line-height:1.5; }
.bl-stat-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:2px; }
.bl-stat { background:var(--glass-0, rgba(255,255,255,.02)); border:1px solid var(--glass-border); border-radius:var(--r-sm); padding:7px 8px; text-align:center; }
.bl-stat-label { font-size:8.5px; color:var(--text3); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.bl-stat-value { font-family:var(--font-mono); font-size:13px; font-weight:700; margin-top:2px; }
.bl-stat-value.empty { color:var(--text3); font-weight:500; }
.bl-card-actions { display:flex; gap:5px; flex-wrap:wrap; margin-top:2px; }
.bl-card-actions .wl-week-btn { font-size:10px; padding:3px 9px; }
.bl-empty-card {
  border:1.5px dashed var(--glass-border); border-radius:var(--r-lg);
  min-height:160px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; color:var(--text3); cursor:pointer;
  transition:var(--t-fast); grid-column:1 / -1;
}
.bl-empty-card:hover { border-color:var(--gold); color:var(--gold); background:rgba(251,191,36,.04); }

.bl-color-row { display:flex; gap:8px; margin-top:4px; }
.bl-color-dot {
  width:24px; height:24px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; transition:var(--t-fast); flex-shrink:0;
}
.bl-color-dot.selected { border-color:var(--text); transform:scale(1.12); }

.bl-version-item {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 11px; border:1px solid var(--glass-border); border-radius:var(--r-sm);
  margin-bottom:6px; font-size:11.5px;
}
.bl-version-ts { color:var(--text3); font-family:var(--font-mono); font-size:10.5px; }

@media (max-width:768px){
  .bl-strategy-grid { grid-template-columns:1fr; }
  .bl-stat-grid { grid-template-columns:repeat(3, 1fr); }
}

.bl-lbl { font-size:11px; color:var(--text3); font-weight:600; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:5px; }
.bl-lbl-sub { font-weight:400; text-transform:none; color:var(--gold); letter-spacing:normal; }

/* ══════════════════════════════════════════════════════
   BACKTESTING LAB — Sessions + Trade Simulator (Phase 2)
═══════════════════════════════════════════════════════ */
.bt-session-card {
  background:var(--glass-1); border:1px solid var(--glass-border);
  border-radius:var(--r-lg); padding:16px; transition:var(--t-med);
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px;
}
.bt-session-card:hover { background:var(--glass-2); border-color:var(--glass-border-h); transform:translateY(-1px); }
.bt-session-card-completed { opacity:.75; }
.bt-session-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.bt-session-title { font-family:var(--font-head); font-size:15px; font-weight:700; letter-spacing:-.2px; }
.bt-session-meta { font-size:10.5px; color:var(--text3); margin-top:2px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em; }
.bt-status-pill { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:20px; flex-shrink:0; }
.bt-status-active { background:rgba(52,211,153,.14); color:var(--green); border:1px solid rgba(52,211,153,.3); }
.bt-status-completed { background:rgba(148,163,184,.14); color:var(--text3); border:1px solid var(--glass-border); }

.bt-detail-overlay { z-index:1000; }
.bt-detail-modal { max-width:920px; width:94vw; max-height:90vh; }
.bt-stat-bar { display:grid; grid-template-columns:repeat(auto-fit, minmax(100px, 1fr)); gap:8px; margin:14px 0; }
.bt-stat-bar .bl-stat-value { font-size:14px; }
.bt-timeline { display:flex; flex-direction:column; gap:8px; }
.bt-timeline-item {
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  border:1px solid var(--glass-border); border-radius:var(--r-sm);
  background:var(--glass-0, rgba(255,255,255,.02)); cursor:pointer; transition:var(--t-fast);
}
.bt-timeline-item:hover { background:var(--glass-1); border-color:var(--glass-border-h); }
.bt-timeline-dir { font-size:10px; font-weight:700; padding:3px 8px; border-radius:6px; flex-shrink:0; text-transform:uppercase; }
.bt-timeline-dir.buy { background:rgba(52,211,153,.14); color:var(--green); }
.bt-timeline-dir.sell { background:rgba(248,113,113,.14); color:var(--red); }
.bt-timeline-main { flex:1; min-width:0; font-size:12px; }
.bt-timeline-time { font-family:var(--font-mono); font-size:10px; color:var(--text3); }
.bt-timeline-rr { font-family:var(--font-mono); font-size:13px; font-weight:700; flex-shrink:0; }
.bt-timeline-rr.pos { color:var(--green); }
.bt-timeline-rr.neg { color:var(--red); }
.bt-rating-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.bt-screenshot-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.bt-screenshot-slot {
  border:1.5px dashed var(--glass-border); border-radius:var(--r-sm); padding:10px 6px;
  text-align:center; font-size:10px; color:var(--text3); cursor:pointer; transition:var(--t-fast);
  display:flex; flex-direction:column; align-items:center; gap:4px; min-height:70px; justify-content:center;
  background-size:cover; background-position:center; position:relative; overflow:hidden;
}
.bt-screenshot-slot:hover { border-color:var(--gold); color:var(--gold); }
.bt-screenshot-slot.filled { border-style:solid; color:transparent; }
.bt-screenshot-slot.filled span { display:none; }

/* ══════════════════════════════════════════════════════
   BACKTESTING LAB — Phase 5: Screenshot Gallery + Strategy Comparison
═══════════════════════════════════════════════════════ */
.bl-gallery-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; margin-top:10px;
}
.bl-gallery-thumb {
  position:relative; aspect-ratio:4/3; border-radius:var(--r-sm); overflow:hidden;
  background-size:cover; background-position:center; cursor:pointer;
  border:1px solid var(--glass-border); transition:var(--t-fast);
}
.bl-gallery-thumb:hover { border-color:var(--gold); transform:translateY(-1px); }
.bl-gallery-thumb-tag {
  position:absolute; top:6px; left:6px; font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; padding:2px 7px; border-radius:5px;
  background:rgba(0,0,0,.55); color:#fff; backdrop-filter:blur(2px);
}
.bl-gallery-thumb-meta {
  position:absolute; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between;
  padding:5px 7px; font-size:10px; font-family:var(--font-mono); color:#fff;
  background:linear-gradient(0deg, rgba(0,0,0,.75), transparent);
}
.bl-gallery-thumb-meta .pos { color:var(--green); font-weight:700; }
.bl-gallery-thumb-meta .neg { color:var(--red); font-weight:700; }

tr.bl-compare-best { background:rgba(251,191,36,.07); }
tr.bl-compare-best td { border-color:rgba(251,191,36,.2); }

.bt-export-menu {
  position:absolute; top:36px; right:0; z-index:20; flex-direction:column; min-width:190px;
  background:var(--bg-2, #0d1119); border:1px solid var(--glass-border); border-radius:var(--r-sm);
  box-shadow:0 10px 30px rgba(0,0,0,.4); padding:6px; gap:2px;
}
.bt-export-menu button {
  display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:transparent;
  border:none; color:var(--text); font-size:12px; font-family:inherit; padding:8px 10px; border-radius:6px; cursor:pointer;
}
.bt-export-menu button:hover { background:var(--glass-1); color:var(--gold); }

/* ══════════════════════════════════════════════════════
   BACKTESTING LAB — Trading Workstation (Chart Replay)
   TradingView Lightweight Charts + custom drawing overlay,
   FXReplay-inspired layout. Modules: topbar / left toolbar /
   chart+overlay / floating replay pill / bottom dock.
═══════════════════════════════════════════════════════ */
.rep-fullscreen-overlay {
  position:fixed; inset:0; z-index:2000; background:var(--bg-base);
  background-image:radial-gradient(circle at 15% 0%, rgba(96,165,250,.05), transparent 45%),
                    radial-gradient(circle at 85% 100%, rgba(251,191,36,.04), transparent 45%);
  display:flex; flex-direction:column; opacity:0; transition:opacity .2s var(--ease-out);
  font-family:var(--font-body); color:var(--text); user-select:none;
}
.rep-fullscreen-overlay.open { opacity:1; }

/* ── Top bar ─────────────────────────────────────────── */
.rep-topbar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 14px; height:48px; flex-shrink:0; z-index:30;
  background:var(--bg3); backdrop-filter:var(--blur-md); border-bottom:1px solid var(--glass-border);
}
.rep-topbar-group { display:flex; align-items:center; gap:6px; min-width:0; }
.rep-topbar-title {
  font-family:var(--font-head); font-weight:800; font-size:13.5px; letter-spacing:.2px;
  display:flex; align-items:center; gap:7px; white-space:nowrap; color:var(--text);
}
.rep-topbar-title .rep-live-dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); flex-shrink:0; }
.rep-topbar-divider { width:1px; height:22px; background:var(--glass-border); flex-shrink:0; margin:0 2px; }

.rep-select, .rep-input {
  background:var(--glass-1); border:1px solid var(--glass-border); color:var(--text);
  border-radius:var(--r-sm); padding:6px 9px; font-size:11.5px; font-family:var(--font-body);
  transition:var(--t-fast); height:30px; cursor:pointer;
}
.rep-select:hover, .rep-input:hover { background:var(--glass-2); border-color:var(--glass-border-h); }
.rep-select:focus, .rep-input:focus { outline:none; border-color:var(--border-focus); }
.rep-input { cursor:text; width:88px; font-family:var(--font-mono); font-weight:600; }

.rep-tf-pills { display:flex; align-items:center; gap:1px; flex-shrink:0; }
.rep-tf-pill {
  background:transparent; border:none; color:var(--text3); font-family:var(--font-body);
  font-size:12.5px; font-weight:700; padding:6px 7px; border-radius:var(--r-sm); cursor:pointer;
  transition:var(--t-fast); line-height:1; white-space:nowrap;
}
.rep-tf-pill:hover { color:var(--text); background:var(--glass-2); }
.rep-tf-pill.active { color:var(--gold); background:rgba(251,191,36,.14); }

.rep-icon-btn {
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; color:var(--text2);
  border-radius:var(--r-sm); cursor:pointer; transition:var(--t-fast); flex-shrink:0; position:relative;
}
.rep-icon-btn svg { width:16px; height:16px; }
.rep-icon-btn:hover { background:var(--glass-2); color:var(--text); border-color:var(--glass-border); }
.rep-icon-btn.active { background:rgba(251,191,36,.14); color:var(--gold); border-color:rgba(251,191,36,.35); }
.rep-icon-btn:disabled { opacity:.35; cursor:not-allowed; }
.rep-icon-btn:disabled:hover { background:transparent; color:var(--text2); border-color:transparent; }

.rep-close-btn {
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:var(--glass-1); border:1px solid var(--glass-border); color:var(--text2);
  border-radius:var(--r-sm); cursor:pointer; transition:var(--t-fast);
}
.rep-close-btn:hover { background:rgba(248,113,113,.14); border-color:rgba(248,113,113,.4); color:var(--red); }

/* ── Workspace: left toolbar + chart ─────────────────── */
.rep-workspace { flex:1; min-height:0; position:relative; display:flex; }

.rep-left-toolbar {
  width:50px; flex-shrink:0; z-index:25; background:var(--bg3); backdrop-filter:var(--blur-md);
  border-right:1px solid var(--glass-border); display:flex; flex-direction:column; align-items:center;
  padding:10px 0; gap:4px; overflow-y:auto; overflow-x:hidden;
}
.rep-left-toolbar::-webkit-scrollbar { width:0; }
.rep-tool-btn {
  width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; color:var(--text2); border-radius:8px;
  cursor:pointer; transition:var(--t-fast); position:relative;
}
.rep-tool-btn svg { width:17px; height:17px; }
.rep-tool-btn:hover { background:var(--glass-2); color:var(--text); }
.rep-tool-btn.active { background:rgba(251,191,36,.18); color:var(--gold); box-shadow:inset 0 0 0 1px rgba(251,191,36,.4); }
.rep-tool-btn.on { background:rgba(96,165,250,.18); color:var(--blue); box-shadow:inset 0 0 0 1px rgba(96,165,250,.4); }
.rep-tool-sep { width:30px; height:1px; background:var(--glass-border); margin:7px 0; flex-shrink:0; }

/* Grouped tool buttons (Lines / Fibonacci / Shapes / Smart Money) —
   a main icon plus a small corner caret that opens .rep-tool-flyout
   with the rest of that group's tools, TradingView-style. */
.rep-tool-group { position:relative; flex-shrink:0; }
.rep-tool-group-caret {
  position:absolute; right:1px; bottom:1px; width:0; height:0; padding:0; margin:0; border:none;
  background:transparent; cursor:pointer;
  border-style:solid; border-width:0 0 6px 6px; border-color:transparent transparent var(--text3) transparent;
  transition:var(--t-fast);
}
.rep-tool-group:hover .rep-tool-group-caret,
.rep-tool-group-caret:hover { border-bottom-color:var(--gold); }
/* generous invisible hit area around the tiny triangle so it's easy
   to tap accurately on a phone despite the small visual footprint */
.rep-tool-group-caret::after { content:''; position:absolute; right:-6px; bottom:-6px; width:16px; height:16px; }

.rep-tool-flyout {
  position:fixed; z-index:2200; display:none; flex-direction:column; gap:2px; min-width:168px; max-width:80vw;
  background:rgba(13,16,24,.96); backdrop-filter:var(--blur-lg); border:1px solid var(--glass-border-h);
  border-radius:var(--r-lg); box-shadow:var(--shadow-xl); padding:8px;
}
.rep-tool-flyout.open { display:flex; }
.rep-flyout-item {
  display:flex; align-items:center; gap:10px; background:transparent; border:1px solid transparent;
  color:rgba(226,232,240,.82); font-size:12.5px; font-family:var(--font-body); font-weight:600;
  padding:8px 9px; border-radius:var(--r-sm); cursor:pointer; transition:var(--t-fast); text-align:left;
}
.rep-flyout-item svg { width:16px; height:16px; flex-shrink:0; }
.rep-flyout-item:hover { background:rgba(255,255,255,.07); color:#f8fafc; }
.rep-flyout-item.active { background:rgba(251,191,36,.16); color:var(--gold); border-color:rgba(251,191,36,.35); }
[data-theme="light"] .rep-tool-flyout { background:rgba(255,255,255,.98); border-color:rgba(30,41,59,.14); box-shadow:0 10px 34px rgba(0,0,0,.16); }
[data-theme="light"] .rep-flyout-item { color:rgba(15,23,41,.82); }
[data-theme="light"] .rep-flyout-item:hover { background:rgba(15,23,41,.06); color:#0f1729; }
/* Shared floating tooltip for the left toolbar. Rendered at the
   overlay's top level (not nested inside .rep-left-toolbar) and
   positioned with `fixed` from JS (see _repShowTip), so it isn't
   clipped by the toolbar's overflow-x:hidden/overflow-y:auto. */
.rep-floating-tooltip {
  position:fixed; transform:translateY(-50%); background:rgba(10,12,18,.96);
  border:1px solid var(--glass-border); color:#f8fafc; padding:5px 9px; border-radius:var(--r-sm);
  font-size:11px; font-weight:600; white-space:nowrap; pointer-events:none; opacity:0;
  transition:opacity .12s ease; box-shadow:var(--shadow-md); z-index:2100;
}
.rep-floating-tooltip.show { opacity:1; }
[data-theme="light"] .rep-floating-tooltip { background:rgba(255,255,255,.98); color:#0f1729; border-color:rgba(30,41,59,.14); box-shadow:0 4px 18px rgba(0,0,0,.14); }

.rep-chart-area { flex:1; min-width:0; position:relative; }
.rep-chart-wrap { position:absolute; inset:0; }
/* rep-overlay-canvas: the drawing surface. Sits above the Lightweight
   Charts candle chart; pointer-events toggle to "auto" only while a
   drawing tool is active (class .drawing, set by
   _repUpdateToolbarActive) so the native chart's own pan/zoom/
   crosshair still works the rest of the time. */
.rep-overlay-canvas { position:absolute; inset:0; z-index:5; cursor:default; pointer-events:auto; touch-action:none; }
.rep-overlay-canvas.drawing { cursor:crosshair; }
.rep-overlay-canvas.dragging { cursor:grabbing; }

/* ── TradingView-style symbol search dialog ── */
.rep-symbol-search-backdrop {
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(4,6,10,.55); backdrop-filter:blur(2px);
  align-items:flex-start; justify-content:center; padding-top:12vh;
}
.rep-symbol-search-backdrop.open { display:flex; }
[data-theme="light"] .rep-symbol-search-backdrop { background:rgba(15,23,42,.35); }
.rep-symbol-search {
  width:520px; max-width:92vw; max-height:64vh; display:flex; flex-direction:column;
  background:var(--glass-1, #10141d); border:1px solid var(--glass-border, rgba(255,255,255,.08));
  border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.55); overflow:hidden;
}
.rep-symsearch-input-row {
  display:flex; align-items:center; gap:8px; padding:12px 14px;
  border-bottom:1px solid var(--glass-border, rgba(255,255,255,.08));
}
.rep-symsearch-input-row svg { width:16px; height:16px; color:var(--text3, #8b96a8); flex:none; }
.rep-symsearch-input-row input {
  flex:1; background:transparent; border:none; outline:none; color:var(--text, #e2e8f0);
  font-family:var(--font-mono); font-size:14px; font-weight:600;
}
.rep-symsearch-tabs { display:flex; gap:2px; padding:8px 10px 0; overflow-x:auto; flex:none; }
.rep-symsearch-tab {
  background:transparent; border:none; color:var(--text3, #8b96a8); font-size:11.5px; font-weight:600;
  padding:6px 10px; border-radius:6px 6px 0 0; cursor:pointer; white-space:nowrap;
}
.rep-symsearch-tab:hover { color:var(--text, #e2e8f0); background:rgba(255,255,255,.04); }
.rep-symsearch-tab.active { color:var(--gold, #fbbf24); border-bottom:2px solid var(--gold, #fbbf24); }
.rep-symsearch-results { overflow-y:auto; padding:6px; }
.rep-symsearch-row {
  display:flex; align-items:center; gap:10px; padding:8px 8px; border-radius:6px; cursor:pointer;
}
.rep-symsearch-row:hover, .rep-symsearch-row.highlighted { background:rgba(255,255,255,.06); }
.rep-symsearch-type {
  font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text3, #8b96a8); background:rgba(255,255,255,.06); border-radius:4px; padding:2px 6px; flex:none;
}
[data-theme="light"] .rep-symsearch-tab:hover { background:rgba(15,23,42,.05); }
[data-theme="light"] .rep-symsearch-row:hover,
[data-theme="light"] .rep-symsearch-row.highlighted { background:rgba(15,23,42,.05); }
[data-theme="light"] .rep-symsearch-type { background:rgba(15,23,42,.06); }
.rep-symsearch-name { font-family:var(--font-mono); font-weight:700; color:var(--text, #e2e8f0); flex:none; width:96px; }
.rep-symsearch-desc { flex:1; font-size:12px; color:var(--text2, #a8b3c4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rep-symsearch-fav { background:none; border:none; color:var(--text3, #8b96a8); cursor:pointer; font-size:14px; padding:2px 4px; }
.rep-symsearch-fav.on, .rep-symsearch-fav:hover { color:var(--gold, #fbbf24); }
.rep-symsearch-empty { padding:24px 12px; text-align:center; color:var(--text3, #8b96a8); font-size:13px; }

.rep-loading, .rep-error {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--text3); font-size:13px; text-align:center; padding:20px; flex-direction:column; gap:10px;
}
.rep-error { color:var(--red); }
.rep-spinner {
  width:22px; height:22px; border-radius:50%; border:2px solid var(--glass-border);
  border-top-color:var(--gold); animation:rep-spin .7s linear infinite;
}
@keyframes rep-spin { to { transform:rotate(360deg); } }

.rep-ohlc-badge {
  position:absolute; top:10px; left:10px; z-index:15; display:flex; align-items:center; gap:9px;
  background:rgba(10,12,18,.72); backdrop-filter:var(--blur-sm); border:1px solid var(--glass-border);
  border-radius:var(--r-md); padding:6px 12px; font-family:var(--font-mono); font-size:11px;
  color:rgba(226,232,240,.82); pointer-events:none; box-shadow:var(--shadow-sm);
}
.rep-ohlc-badge b { color:#f8fafc; font-weight:700; }
.rep-ohlc-badge .up { color:var(--green); } .rep-ohlc-badge .dn { color:var(--red); }
[data-theme="light"] .rep-ohlc-badge { background:rgba(255,255,255,.85); border-color:rgba(30,41,59,.14); color:rgba(15,23,41,.72); }
[data-theme="light"] .rep-ohlc-badge b { color:#0f1729; }

.rep-symbol-badge {
  position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:15;
  font-family:var(--font-head); font-weight:700; font-size:12px; color:rgba(226,232,240,.82);
  background:rgba(10,12,18,.55); border:1px solid var(--glass-border); border-radius:var(--r-full);
  padding:5px 14px; pointer-events:none; letter-spacing:.3px;
}
[data-theme="light"] .rep-symbol-badge { background:rgba(255,255,255,.8); border-color:rgba(30,41,59,.14); color:rgba(15,23,41,.72); }

/* ── Floating replay control pill (FXReplay-style) ───── */
.rep-replay-pill {
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:20;
  display:flex; align-items:center; gap:10px; background:rgba(13,16,24,.85);
  backdrop-filter:var(--blur-lg); border:1px solid var(--glass-border-h); border-radius:var(--r-xl);
  padding:8px 14px; box-shadow:var(--shadow-lg); cursor:default;
}
[data-theme="light"] .rep-replay-pill { background:rgba(255,255,255,.92); border-color:rgba(30,41,59,.14); box-shadow:0 8px 28px rgba(0,0,0,.14); }
.rep-replay-pill .rep-drag-handle { display:flex; gap:2px; cursor:grab; padding:2px; opacity:.4; }
.rep-replay-pill .rep-drag-handle:hover { opacity:.8; }
.rep-drag-handle span { width:3px; height:3px; border-radius:50%; background:rgba(226,232,240,.75); }
[data-theme="light"] .rep-drag-handle span { background:rgba(15,23,41,.5); }
.rep-play-btn {
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--gold); color:#1a1200; border:none; cursor:pointer; transition:var(--t-fast);
  box-shadow:0 0 14px rgba(251,191,36,.35);
}
.rep-play-btn:hover { transform:scale(1.06); box-shadow:0 0 18px rgba(251,191,36,.5); }
.rep-play-btn svg { width:14px; height:14px; }
.rep-step-btn {
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); color:rgba(226,232,240,.92); border:1px solid var(--glass-border); cursor:pointer; transition:var(--t-fast);
}
.rep-step-btn:hover { background:rgba(255,255,255,.14); }
.rep-step-btn svg { width:13px; height:13px; }
[data-theme="light"] .rep-step-btn { background:rgba(15,23,41,.06); color:#0f1729; }
[data-theme="light"] .rep-step-btn:hover { background:rgba(15,23,41,.1); }
.rep-progress-track {
  width:180px; height:4px; border-radius:var(--r-full); background:rgba(255,255,255,.14); position:relative; cursor:pointer;
}
[data-theme="light"] .rep-progress-track { background:rgba(15,23,41,.12); }
.rep-progress-fill { position:absolute; inset:0; border-radius:var(--r-full); background:linear-gradient(90deg,var(--gold),var(--blue)); width:0%; }
.rep-progress-track input[type=range] {
  position:absolute; inset:-6px 0; width:100%; height:16px; opacity:0; cursor:pointer; margin:0;
}
.rep-candle-counter { font-family:var(--font-mono); font-size:10.5px; color:rgba(226,232,240,.6); white-space:nowrap; min-width:80px; }
[data-theme="light"] .rep-candle-counter { color:rgba(15,23,41,.6); }
.rep-pill-toggle {
  display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%;
  background:transparent; border:1px solid var(--glass-border); color:rgba(226,232,240,.6); cursor:pointer; transition:var(--t-fast);
}
[data-theme="light"] .rep-pill-toggle { color:rgba(15,23,41,.55); }
.rep-pill-toggle svg { width:12px; height:12px; }
.rep-pill-toggle.active { color:var(--blue); border-color:rgba(96,165,250,.4); background:rgba(96,165,250,.1); }

/* ── Indicators / settings popovers ──────────────────── */
.rep-popover {
  position:absolute; top:44px; right:14px; z-index:40; width:220px;
  background:rgba(13,16,24,.94); backdrop-filter:var(--blur-lg); border:1px solid var(--glass-border-h);
  border-radius:var(--r-lg); box-shadow:var(--shadow-xl); padding:10px; display:none; flex-direction:column; gap:2px;
}
.rep-popover.open { display:flex; }
.rep-popover-title { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:rgba(226,232,240,.55); padding:4px 6px 6px; }
.rep-popover-row {
  display:flex; align-items:center; justify-content:space-between; padding:7px 8px; border-radius:var(--r-sm);
  font-size:12px; cursor:pointer; transition:var(--t-fast); color:rgba(226,232,240,.82);
}
.rep-popover-row:hover { background:rgba(255,255,255,.07); color:#f8fafc; }
.rep-popover-row .dot { width:8px; height:8px; border-radius:50%; margin-right:8px; flex-shrink:0; }
.rep-popover-check { width:14px; height:14px; border-radius:4px; border:1px solid var(--glass-border-h); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rep-popover-row.on .rep-popover-check { background:var(--gold); border-color:var(--gold); }
.rep-popover-row.on .rep-popover-check svg { width:10px; height:10px; color:#1a1200; }
[data-theme="light"] .rep-popover { background:rgba(255,255,255,.98); border-color:rgba(30,41,59,.14); box-shadow:0 10px 34px rgba(0,0,0,.16); }
[data-theme="light"] .rep-popover-title { color:rgba(15,23,41,.5); }
[data-theme="light"] .rep-popover-row { color:rgba(15,23,41,.82); }
[data-theme="light"] .rep-popover-row:hover { background:rgba(15,23,41,.06); color:#0f1729; }

/* ── Right-click context menu for drawings ───────────── */
.rep-ctx-menu {
  position:fixed; z-index:100; min-width:170px; background:rgba(13,16,24,.97); backdrop-filter:var(--blur-lg);
  border:1px solid var(--glass-border-h); border-radius:var(--r-md); box-shadow:var(--shadow-xl); padding:5px; display:none;
}
.rep-ctx-menu.open { display:block; }
.rep-ctx-item {
  display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:var(--r-sm);
  font-size:12px; color:rgba(226,232,240,.82); cursor:pointer; transition:var(--t-fast);
}
.rep-ctx-item:hover { background:rgba(255,255,255,.08); color:#f8fafc; }
.rep-ctx-item.danger:hover { background:rgba(248,113,113,.14); color:var(--red); }
.rep-ctx-item svg { width:13px; height:13px; }
.rep-ctx-colors { display:flex; gap:5px; padding:6px 8px; }
.rep-ctx-color { width:16px; height:16px; border-radius:50%; cursor:pointer; border:1.5px solid rgba(255,255,255,.25); transition:var(--t-fast); }
.rep-ctx-color:hover { transform:scale(1.15); }
.rep-ctx-sep { height:1px; background:var(--glass-border); margin:4px 2px; }
[data-theme="light"] .rep-ctx-menu { background:rgba(255,255,255,.98); border-color:rgba(30,41,59,.14); box-shadow:0 10px 34px rgba(0,0,0,.16); }
[data-theme="light"] .rep-ctx-item { color:rgba(15,23,41,.82); }
[data-theme="light"] .rep-ctx-item:hover { background:rgba(15,23,41,.06); color:#0f1729; }
[data-theme="light"] .rep-ctx-color { border-color:rgba(15,23,41,.2); }

/* ── Bottom trading dock ──────────────────────────────── */
.rep-bottom-dock {
  flex-shrink:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:0 16px; height:52px; background:var(--bg3); backdrop-filter:var(--blur-md); border-top:1px solid var(--glass-border);
}
.rep-dock-stats { display:flex; align-items:center; gap:20px; overflow-x:auto; min-width:0; }
.rep-dock-stats::-webkit-scrollbar { display:none; }
.rep-dock-stat { display:flex; flex-direction:column; gap:1px; white-space:nowrap; }
.rep-dock-stat-label { font-size:9.5px; color:var(--text3); text-transform:uppercase; letter-spacing:.4px; font-weight:600; }
.rep-dock-stat-value { font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:var(--text); }
.rep-dock-stat-value.up { color:var(--green); } .rep-dock-stat-value.dn { color:var(--red); }
.rep-dock-divider { width:1px; height:26px; background:var(--glass-border); flex-shrink:0; }
.rep-dock-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.rep-qty-input {
  width:88px; height:34px; background:var(--glass-1); border:1px solid var(--glass-border); color:var(--text);
  border-radius:var(--r-sm); padding:0 10px; font-family:var(--font-mono); font-size:12px; font-weight:600;
}
.rep-exec-btn {
  height:34px; padding:0 18px; border-radius:var(--r-sm); font-weight:700; font-size:12.5px;
  cursor:pointer; border:1px solid transparent; font-family:var(--font-body); display:flex; align-items:center; gap:6px;
  box-shadow:var(--shadow-sm); transition:var(--t-fast);
}
.rep-exec-btn svg { width:12px; height:12px; }
.rep-exec-buy { background:var(--green); border-color:var(--green); color:#04231a; }
.rep-exec-buy:hover { box-shadow:var(--glow-green); transform:translateY(-1px); }
.rep-exec-sell { background:var(--red); border-color:var(--red); color:#2b0a0a; }
.rep-exec-sell:hover { box-shadow:var(--glow-red); transform:translateY(-1px); }

/* ── Selection handles (drawn on overlay, styled via canvas — these are DOM fallbacks) ── */
.rep-tool-btn[data-tool="select"] { color:var(--blue); }

@media (max-width:900px){
  .rep-left-toolbar { width:40px; }
  .rep-tool-btn { width:30px; height:30px; }
  .rep-dock-stats { gap:12px; }
  .rep-replay-pill { padding:6px 10px; gap:7px; }
  .rep-progress-track { width:100px; }
}
@media (max-width:640px){
  .rep-topbar-title span.rep-title-text { display:none; }
  .rep-ohlc-badge { font-size:9.5px; padding:5px 8px; gap:6px; }
  .rep-symbol-badge { display:none; }
  .rep-dock-stat:nth-child(n+4) { display:none; }
  .rep-qty-input { width:64px; }
}

/* ── Narrow phones: the topbar has ~14 controls in it, more than
   any fixed width can fit — let it scroll sideways instead of
   overflowing/breaking the page, and shrink everything else that
   still has room to give. ── */
@media (max-width:480px){
  .rep-topbar {
    padding:0 8px; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .rep-topbar::-webkit-scrollbar { display:none; }
  .rep-topbar-group { flex-shrink:0; }
  .rep-select { padding:5px 7px; font-size:10.5px; height:28px; }
  .rep-input { width:70px; height:28px; }
  .rep-icon-btn, .rep-close-btn { width:27px; height:27px; }
  .rep-topbar-divider { margin:0 1px; }

  .rep-left-toolbar { width:36px; padding:6px 0; }
  .rep-tool-btn { width:28px; height:28px; }
  .rep-tool-btn svg { width:15px; height:15px; }

  .rep-replay-pill { bottom:10px; padding:5px 8px; gap:5px; max-width:94vw; }
  .rep-progress-track { width:70px; }
  .rep-candle-counter { display:none; }

  .rep-bottom-dock { padding:0 8px; gap:8px; }
  .rep-dock-stats { gap:9px; }
  .rep-dock-stat:nth-child(n+3) { display:none; }
  .rep-qty-input { width:52px; font-size:11px; padding:0 6px; }
  .rep-exec-btn { padding:0 10px; font-size:11px; gap:4px; }

  .rep-symbol-search { width:96vw; max-height:80vh; }
  .rep-popover { width:min(230px, 88vw); right:6px; }
  .rep-ohlc-badge { display:none; }
}

/* ══════════════════════════════════════════════════════
   BACKTESTING LAB — Phase 8: Playbook + Calendar Integration
   (Sections 13 & 14)
═══════════════════════════════════════════════════════ */

/* ── Section 13: Strong-setup badge + Save to Playbook ── */
.bl-strategy-card-strong { box-shadow:var(--shadow-sm), 0 0 0 1px rgba(251,191,36,.18); }
.bl-strategy-card-strong::before { box-shadow:0 0 10px var(--bl-tag-color, var(--gold)); }
.bl-strong-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:var(--r-full);
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  background:rgba(251,191,36,.14); color:var(--gold);
  border:1px solid rgba(251,191,36,.3); white-space:nowrap;
}
.bl-strong-badge .icn { width:10px; height:10px; }
.bl-save-pb-strong {
  background:rgba(251,191,36,.12) !important; border-color:rgba(251,191,36,.35) !important;
  color:var(--gold) !important; font-weight:700 !important;
}
.bl-save-pb-strong:hover { background:rgba(251,191,36,.22) !important; }

/* Link badge shown on a Playbook model that was saved from the Lab */
.pb-lab-badge {
  background:rgba(52,211,153,.12) !important; color:var(--green) !important;
  border-color:rgba(52,211,153,.28) !important; display:inline-flex; align-items:center; gap:3px;
}
.pb-lab-badge .icn { width:9px; height:9px; }
.pb-lab-badge:hover { background:rgba(52,211,153,.22) !important; }

/* ── Section 14: Backtest sessions on the Calendar ── */
.cal-day-bt-badge {
  position:absolute; bottom:6px; right:6px; z-index:2;
  width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(168,139,250,.16); border:1px solid rgba(168,139,250,.4);
  color:#a78bfa; cursor:pointer; transition:var(--t-fast);
}
.cal-day-bt-badge:hover { background:rgba(168,139,250,.3); transform:scale(1.12); }
.cal-day-bt-badge .icn { width:9px; height:9px; }
.cal-day-bt-count {
  position:absolute; top:-4px; right:-4px; min-width:11px; height:11px; padding:0 2px;
  border-radius:var(--r-full); background:#a78bfa; color:#0a0a0a;
  font-size:7px; font-weight:800; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono);
}
.cal-day.has-backtest:not(.has-trades) { cursor:default; }
[data-theme="light"] .cal-day-bt-badge { background:rgba(124,58,237,.1); border-color:rgba(124,58,237,.3); color:#7c3aed; }

/* Backtest day drill-down modal */
.bt-day-drilldown-modal { max-width:560px; width:92vw; max-height:86vh; }
.bt-day-session-row {
  border:1px solid var(--glass-border); border-radius:var(--r-lg);
  padding:12px; background:var(--glass-1); display:flex; flex-direction:column; gap:9px;
}
.bt-day-session-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.bt-day-session-title { font-family:var(--font-head); font-size:13.5px; font-weight:700; letter-spacing:-.2px; }
.bt-day-session-meta { font-size:10px; color:var(--text3); margin-top:2px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em; }
.bt-day-trade-list { display:flex; gap:5px; flex-wrap:wrap; }
.bt-day-trade-chip {
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  padding:3px 8px; border-radius:var(--r-full); cursor:pointer;
  background:var(--glass-0, rgba(255,255,255,.02)); border:1px solid var(--glass-border);
  transition:var(--t-fast);
}
.bt-day-trade-chip:hover { background:var(--glass-2); }
.bt-day-trade-chip.green { color:var(--green); border-color:rgba(52,211,153,.3); }
.bt-day-trade-chip.red { color:var(--red); border-color:rgba(248,113,113,.3); }
.bt-day-trade-chip.blue { color:var(--blue); border-color:rgba(96,165,250,.3); }
.bt-day-trade-chip.muted { color:var(--text3); cursor:default; }

@media (max-width:768px){
  .cal-day-bt-badge { width:13px; height:13px; bottom:4px; right:4px; }
  .cal-day-bt-badge .icn { width:7px; height:7px; }
}