/* ============ DESIGN TOKENS ============
   Brand vs. P&L: --brand is the product's own color (logo, buttons, active
   nav, focus rings, links) and never appears on a number. --teal/--rose are
   reserved for profit/loss and directional (long/win) semantics ONLY, so
   color always means one specific thing - a teal button and a teal PnL
   figure used to be visually identical and semantically unrelated, which is
   the bug this split fixes. See styles.css git history for the line-by-line
   split if extending either further. */
:root {
  --bg: #0a0c10;
  --surface: #13161c;
  --surface-2: #1a1e26;
  --surface-hover: #212630;
  --border: #232830;
  --border-soft: #1b1f27;

  --text: #f2f3f5;
  --text-dim: #979ba6;
  --text-faint: #565b66;

  --brand: #c9a15a;
  --brand-dim: rgba(201,161,90,.14);
  /* --brand itself gets darkened for light theme below (same reasoning as
     --teal/--rose/etc.) because it's mostly used as TEXT/icon/border color
     directly on the page background, where a pastel gold fails contrast on
     white. But a handful of rules use --brand as a SOLID FILL with dark
     text on top (.btn-primary, .pill-btn.primary, active period/arrange
     toggles) - there the contrast that matters is fill-vs-its-own-text, not
     fill-vs-page-bg, and darkening it for light theme actively hurts that
     (measured ~4.2:1 against the #04170c text, noticeably murkier than
     dark theme's ~7.7:1 - this is what "the dark words don't match" was:
     text and fill both drifting dark together in light theme). Deliberately
     NOT redeclared under html.theme-light - same value in both themes is
     correct here, since a filled button is a self-contained island. */
  --brand-solid: #c9a15a;
  --teal: #34d9a8;
  --teal-dim: rgba(52,217,168,.14);
  --rose: #e2617e;
  --rose-dim: rgba(226,97,126,.14);
  --blue: #4f6df0;
  --blue-dim: rgba(79,109,240,.16);
  --amber: #f0b429;
  --amber-dim: rgba(240,180,41,.14);
  --violet: #a78bfa;
  --violet-dim: rgba(167,139,250,.14);
  /* Was a literal green (#22c55e) - the same brand/P&L collision --teal had
     (see the note at the top of this block): a filled green CTA button
     reads as "profit" in a trading app regardless of what it actually does.
     Now an alias so every primary-emphasis surface - nav, focus rings,
     links, AND filled CTA buttons - is consistently the brand color, and
     green stays exclusively a P&L signal. Points at --brand-solid, not
     --brand directly, for the same fill-vs-text reason documented on that
     token above. Kept as its own name (rather than replacing every
     var(--green-cta) with var(--brand-solid) directly) so a future "this
     one CTA should actually be green" exception has a single place to
     override, and so the name still documents intent at each call site. Not
     redeclared under html.theme-light - --brand-solid is already the same
     value in both themes, so this doesn't need a light-theme override. */
  --green-cta: var(--brand-solid);

  --font-ui: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius: 12px;
  --radius-lg: 16px;
  --pill: 999px;

  --sidebar-w: 68px;
  --navbar-h: 60px;

  --shadow-md: 0 12px 32px -12px rgba(0,0,0,.55);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-drawer: 220ms;
  --dur-modal: 320ms;
}

@font-face {
  font-family: 'Space Grotesk';
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/SpaceGrotesk-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-Variable.woff2') format('woff2');
}

/* Light theme - opt-in via the sun/moon toggle in the sidebar (setTheme() in
   app.js), stored in localStorage as 'theme'. Defaults to dark for every
   existing user (this app has shipped as dark-only until now, so following
   the OS preference automatically would silently change the look for people
   who never asked for that) - a brand-new visitor with no stored choice also
   gets dark, matching every screenshot and habit built around this app so
   far. Every color is redeclared here rather than only the ones that
   "look different" - a token missed here silently stays dark-theme-dark,
   which is a much harder bug to spot than a slightly-off light color.
   Accent hues are the same family as the dark theme but shifted darker/more
   saturated where they're used as TEXT (teal/rose/blue/amber/violet all read
   as pastel-on-white otherwise, which fails contrast) - the *-dim tokens
   stay light since those are backgrounds-under-colored-text, not text. */
html.theme-light {
  --bg: #f6f6f8;
  --surface: #ffffff;
  --surface-2: #eef0f2;
  --surface-hover: #e4e6ea;
  --border: #dfe1e6;
  --border-soft: #e8eaee;

  --text: #16171a;
  --text-dim: #55565f;
  --text-faint: #8b8d97;

  --brand: #96702c;
  --brand-dim: rgba(150,112,44,.12);
  --teal: #0c9a72;
  --teal-dim: rgba(12,154,114,.12);
  --rose: #c23859;
  --rose-dim: rgba(194,56,89,.12);
  --blue: #3452c4;
  --blue-dim: rgba(52,82,196,.12);
  --amber: #92660a;
  --amber-dim: rgba(146,102,10,.14);
  --violet: #6d4fc4;
  --violet-dim: rgba(109,79,196,.12);
  /* --green-cta is intentionally NOT redeclared here - it points at
     --brand-solid (see :root), which is the same value in both themes. */

  --shadow-md: 0 12px 28px -12px rgba(20,20,30,.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Keyboard-focus ring, applied globally. Every interactive element in this
   stylesheet sets outline:none on :focus without a :focus-visible
   replacement - meaning a keyboard user tabbing through the app gets no
   visible indicator of where they are, anywhere. :focus-visible keeps this
   invisible for a mouse click (matching the existing look) while restoring
   it for keyboard/assistive-tech navigation. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  font-size: 14px;
}

h1, h2, h3 { letter-spacing: -0.01em; }

/* Every price/PnL/quantity/% figure in the app - tabular mono figures read
   as a precision instrument and keep columns of numbers aligned, unlike the
   proportional UI face used for everything else. .money is the existing
   app-wide marker for "this is a dollar figure" (it's what body.balances-
   hidden targets to blur), already on 24+ elements across every page - so
   giving it the same mono treatment as .num reaches nearly every remaining
   money value with no template changes. */
.num, .money {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.hidden { display: none !important; }
::selection { background: rgba(52,217,168,.25); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Hide Balances: any element carrying .money is masked */
body.balances-hidden .money { filter: blur(7px); user-select: none; }

/* ============ AUTH MODAL ============ */
.modal {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
}
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px; width: 100%; max-width: 420px;
  box-shadow: var(--shadow-md);
}
.modal-header { text-align: center; margin-bottom: 26px; }
.modal-header h1 { font-size: 21px; font-weight: 700; color: var(--brand); margin-bottom: 6px; }
.modal-header p { color: var(--text-dim); font-size: 13px; }
.auth-form-wrapper h2 { font-size: 16px; font-weight: 600; margin-bottom: 18px; }
.auth-form-wrapper.hidden { display: none !important; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.form-group input {
  width: 100%; padding: 10px 13px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: 13.5px; transition: border-color .15s;
}
.form-group input:focus { outline: none; border-color: var(--brand); }
.form-group-checkbox label { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; color: var(--text); cursor: pointer; }
.form-group-checkbox input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--brand); cursor: pointer; }
.form-toggle { text-align: center; margin-top: 15px; font-size: 12.5px; color: var(--text-dim); }
.form-toggle a { color: var(--brand); font-weight: 600; }
.security-note { text-align: center; margin-top: 12px; font-size: 11.5px; color: var(--text-faint); }

/* ============ BUTTONS ============ */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 11px; background: var(--green-cta);
  border: none; border-radius: var(--radius-sm);
  color: #04170c; font-weight: 700; font-size: 14px; cursor: pointer;
  transition: filter .15s, transform .15s;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active:not(:disabled) { transform: scale(.98); }
.btn-primary:disabled { opacity: .55; cursor: default; }
.btn-icon { width: 14px; height: 14px; }

/* Pill toolbar buttons (Select a date range / Hide Balances / Sync) */
.pill-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--pill);
  color: var(--text-dim); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.pill-btn:hover { color: var(--text); border-color: var(--text-faint); }
.pill-btn:active, .icon-btn:active { transform: scale(.96); }
.pill-btn.active { color: var(--brand); border-color: var(--brand); background: var(--brand-dim); }
.pill-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.pill-btn.pill-primary { background: var(--green-cta); border-color: var(--green-cta); color: #04170c; }
.pill-btn.pill-primary:hover { filter: brightness(1.08); }
.pill-select {
  background: transparent; border: none; color: inherit;
  font: inherit; font-weight: 600; cursor: pointer; outline: none;
}
.pill-select option { background: var(--surface-2); color: var(--text); }

/* ============ LAYOUT ============ */
.dashboard { display: flex; height: 100vh; }
/* min-width: 0 here for the same reason as .content below: body-row is
   itself a flex item (of .dashboard), and a flex item's default min-width
   is "auto" - its content's min-content size - not 0. Without this, the
   sidebar + content's combined min-content width won this tug-of-war
   against flex-grow's attempt to fit them into the viewport, which is what
   caused the page-wide horizontal scrollbar this override fixes. */
.body-row { display: flex; flex: 1; min-height: 0; min-width: 0; }

/* Frosted material rather than a flat fill the same color as the page behind
   it (which is all --bg used to be) - the blur+translucency is what reads as
   an intentional floating layer even though this sidebar doesn't scroll
   under content the way a mobile nav bar would. */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-right: 1px solid var(--border);
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--text) 6%, transparent);
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 0 14px; gap: 4px;
}
@media (prefers-reduced-transparency: reduce) {
  .sidebar { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.brand-mark {
  width: 32px; height: 32px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
}
.brand-mark svg { width: 22px; height: 22px; }

.nav-menu { list-style: none; display: flex; flex-direction: column; gap: 6px; width: 100%; align-items: center; }
.nav-link {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  color: var(--text-faint); cursor: pointer; transition: all .15s;
}
.nav-link svg { width: 19px; height: 19px; }
.nav-link:hover { color: var(--text); background: var(--surface); }
.nav-link.active { color: var(--brand); background: var(--brand-dim); box-shadow: inset 2px 0 0 var(--brand); }

.nav-tooltip {
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 600;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s;
  z-index: 50;
}
.nav-link:hover .nav-tooltip { opacity: 1; }

.sidebar-spacer { flex: 1; }
.sidebar-util { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.icon-btn {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); background: transparent; border: none; cursor: pointer;
  transition: all .15s;
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover { color: var(--text); background: var(--surface); }
.icon-btn.spinning svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  /* A genuine progress indicator (sync in flight) rather than decoration -
     slowed rather than removed, same treatment as the toast loading spinner. */
  .icon-btn.spinning svg { animation-duration: 1.6s; }
}

.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-dim); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12.5px; border: 1px solid var(--brand);
}

/* min-width: 0 overrides the flex-item default (min-width: auto), which
   otherwise lets a wide descendant - the 700px-min-width trades table, most
   notably - refuse to shrink and force the *entire page* to scroll
   horizontally instead of just the table's own .table-wrapper. Without
   this, every narrow viewport (phones, a narrowed browser window) got a
   body-wide horizontal scrollbar the moment the Journal table was on
   screen. */
.content { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 26px 32px 50px; }
.page:not(.hidden) { animation: pageFade var(--dur-fast) var(--ease-out); }
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }

.page-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 22px;
}
.page-header h2 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ============ STAT CARDS (Home) ============ */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stat-card {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 18px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
  display: flex; flex-direction: column; gap: 10px; min-height: 108px;
  animation: statCardIn var(--dur-base) var(--ease-out) both;
}
@keyframes statCardIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.stat-row .stat-card:nth-child(1) { animation-delay: 0ms; }
.stat-row .stat-card:nth-child(2) { animation-delay: 40ms; }
.stat-row .stat-card:nth-child(3) { animation-delay: 80ms; }
.stat-row .stat-card:nth-child(4) { animation-delay: 120ms; }
@media (prefers-reduced-motion: reduce) { .stat-card { animation: none !important; } }
.stat-card-label { font-size: 12.5px; color: var(--text-dim); font-weight: 500; }
.stat-card-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stat-card-value { font-family: var(--font-mono); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-card-value.pos { color: var(--teal); }
.stat-card-value.neg { color: var(--rose); }
.stat-card-sub { font-size: 11.5px; color: var(--text-faint); line-height: 1.5; }

.volume-split { display: flex; flex-direction: column; gap: 8px; }
.volume-split-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.volume-split-row .money { font-size: 16px; font-weight: 800; }

.donut-row { display: flex; align-items: center; gap: 14px; }
.donut-legend { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; }
.donut-legend .win { color: var(--teal); }
.donut-legend .loss { color: var(--rose); }
.donut-legend .be { color: var(--text-faint); }
.donut-legend span.n { font-variant-numeric: tabular-nums; margin-right: 5px; }

.ratio-labels { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.ratio-labels .long { color: var(--teal); }
.ratio-labels .short { color: var(--rose); }
.ratio-bar { height: 6px; border-radius: var(--pill); overflow: hidden; display: flex; background: var(--surface-2); }
.ratio-bar .seg-long { background: var(--teal); }
.ratio-bar .seg-short { background: var(--rose); }

/* ============ CHART PANEL ============ */
.chart-panel {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 20px; margin-bottom: 18px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
  position: relative;
}
.chart-panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.chart-panel-head h3 { font-size: 15px; font-weight: 700; }
.chart-panel-head .dim { font-size: 12px; color: var(--text-faint); }
.chart-canvas-wrap { position: relative; height: 260px; }
canvas.chart-canvas { width: 100%; height: 100%; display: block; }

/* ============ INSIGHT / SECONDARY CARDS ============ */
.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 18px; }
.card {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 20px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
}
.card h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 4px; }
.card .dim { color: var(--text-faint); font-size: 12px; }
.insight-value { font-family: var(--font-mono); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 10px 0 6px; }
.insight-value.pos { color: var(--teal); }
.insight-value.neg { color: var(--rose); }
.insight-desc { font-size: 12px; color: var(--text-dim); line-height: 1.6; }

/* ============ FILTER BAR (Journal / Symbols - underline style) ============ */
.filter-bar {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--border-soft);
}
.filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 110px; }
.filter-field label { font-size: 11px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.filter-field select, .filter-field input {
  background: transparent; border: none; border-bottom: 1px solid var(--border);
  color: var(--text); font-size: 13px; font-weight: 600; padding: 4px 0 6px;
  outline: none; cursor: pointer; min-width: 100px;
}
.filter-field input { cursor: text; }
.filter-field select:focus, .filter-field input:focus { border-bottom-color: var(--brand); }
.filter-field input::placeholder { color: var(--text-faint); font-weight: 400; }

/* ============ TABLES (Journal-style) ============ */
.trades-container, .analytics-container { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 4px 20px 8px; margin-bottom: 20px; }
.table-head-row { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 12px; flex-wrap: wrap; gap: 6px; }
.table-head-row h3 { font-size: 14.5px; font-weight: 700; }
.table-head-titles { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.table-wrapper { overflow-x: auto; }

/* ============ EXPORT MENU ============ */
.export-menu-wrap { position: relative; }
#exportMenuBtn { display: inline-flex; align-items: center; gap: 6px; }
#exportMenuBtn svg { width: 14px; height: 14px; }
.export-menu.hidden { display: none; }
.export-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 220px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 6px;
  transform-origin: top right;
  opacity: 0; transform: scale(0.95) translateY(-4px); pointer-events: none;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.export-menu.open { display: block; opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.export-menu button {
  display: block; width: 100%; text-align: left; padding: 9px 10px; font-size: 13px;
  background: transparent; border: none; border-radius: 6px; color: var(--text); cursor: pointer;
  transition: background var(--dur-fast) ease;
}
.export-menu button:hover, .export-menu button:focus-visible { background: var(--surface-hover); }
@media (prefers-reduced-motion: reduce) {
  .export-menu { transition: opacity var(--dur-fast) ease; }
  .export-menu, .export-menu.open { transform: none; }
}

.trades-table, .analytics-table { width: 100%; border-collapse: separate; border-spacing: 0 2px; font-size: 13px; min-width: 700px; table-layout: fixed; }
.trades-table thead th, .analytics-table thead th {
  padding: 8px 12px; text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: var(--text-faint);
  white-space: nowrap; cursor: default; overflow: hidden; text-overflow: ellipsis;
}
/* table-layout: fixed pins every column's width to its <col>, so header
   labels can never drift out of alignment with the data beneath them as
   row content length varies (long hold-times, expanded chart rows, etc). */
.trades-table td, .analytics-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trades-table td.trade-detail-row-cell, .trade-detail-row td { white-space: normal; overflow: visible; }
.symbol-cell { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; overflow: hidden; }
.symbol-cell .strong { overflow: hidden; text-overflow: ellipsis; }
.trades-table thead th.sortable { cursor: pointer; user-select: none; }
.trades-table thead th.sortable:hover { color: var(--text-dim); }
.sort-arrows { display: inline-flex; flex-direction: column; margin-left: 4px; vertical-align: middle; line-height: .6; font-size: 8px; }
.sort-arrows span { opacity: .35; }
.sort-arrows span.on { opacity: 1; color: var(--brand); }

.trades-table tbody tr { background: var(--surface-2); transition: background var(--dur-fast) var(--ease-out); }
.trades-table tbody tr:hover { background: var(--surface-hover); }
.trades-table tbody tr.trade-row { cursor: pointer; }
.trades-table tbody tr.trade-row:active { background: var(--border); }
.chart-toggle-btn {
  width: 26px; height: 26px; border-radius: 6px; border: none; background: var(--surface); color: var(--text-faint);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chart-toggle-btn svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.chart-toggle-btn:hover { background: var(--surface-hover); color: var(--text); }
.chart-toggle-btn.open svg { transform: rotate(180deg); }
.trade-detail-row td { background: var(--surface); padding: 0; border-radius: var(--radius-sm); }
.trade-detail { padding: 16px 18px; animation: detailReveal var(--dur-base) var(--ease-out); }
@keyframes detailReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.trade-detail-toolbar { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
.chart-layer-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); cursor: pointer; }
.chart-layer-check input { accent-color: var(--brand); cursor: pointer; }
.trade-detail-note { min-height: 14px; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .trade-detail { animation: none !important; } }
.trades-table td { padding: 12px; color: var(--text); position: relative; }
.trades-table td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.trades-table td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.row-accent { position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; }
.row-accent.win { background: var(--teal); }
.row-accent.loss { background: var(--rose); }

.analytics-table thead th { padding: 10px 12px; }
.analytics-table td { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); }
.analytics-table tbody tr:hover { background: var(--surface-2); }

.num { text-align: right; }
.strong { font-weight: 700; }
.dim { color: var(--text-faint); font-size: 12px; }
.nowrap { white-space: nowrap; }
.empty-cell { text-align: center; padding: 44px 20px; color: var(--text-faint); font-size: 13px; }

.pnl-pos, .pnl-neg { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pnl-pos { color: var(--teal); }
.pnl-neg { color: var(--rose); }
.pnl-pill {
  display: inline-block; padding: 3px 10px; border-radius: var(--pill);
  font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.pnl-pill.pos { background: var(--teal-dim); color: var(--teal); }
.pnl-pill.neg { background: var(--rose-dim); color: var(--rose); }
.fee-flag { color: var(--amber); cursor: help; font-weight: 700; margin-left: 4px; }

.hold-pill {
  display: inline-block; padding: 3px 9px; border-radius: var(--pill);
  background: var(--blue-dim); color: var(--blue); font-size: 11.5px; font-weight: 700;
}

.symbol-cell { display: flex; align-items: center; gap: 9px; }
.coin-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #14161c;
}
.side-arrow { font-weight: 700; }
.side-arrow.buy { color: var(--teal); }
.side-arrow.sell { color: var(--rose); }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--pill); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge-spot { background: var(--amber-dim); color: var(--amber); }
.badge-futures { background: var(--violet-dim); color: var(--violet); }
.side { font-weight: 700; font-size: 12px; }
.side-buy { color: var(--teal); }
.side-sell { color: var(--rose); }

.notice {
  background: var(--amber-dim); border-left: 3px solid var(--amber);
  padding: 11px 15px; border-radius: var(--radius-sm); margin-bottom: 14px;
  font-size: 12px; color: var(--text-dim); line-height: 1.55;
}
.link-row { text-align: center; padding: 12px; font-size: 12.5px; color: var(--text-dim); border-top: 1px solid var(--border-soft); }
.link-row a { color: var(--brand); font-weight: 600; }

/* ============ CALENDAR ============ */
.calendar-toolbar { display: flex; align-items: center; gap: 10px; }
.calendar-toolbar .month-label { font-weight: 700; font-size: 14px; min-width: 130px; text-align: center; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; padding-bottom: 6px; }
.calendar-cell {
  aspect-ratio: 1.15; border-radius: var(--radius-sm); background: var(--surface);
  border: 1px solid var(--border-soft); padding: 8px; position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 11px;
}
.calendar-cell.outside { opacity: .3; }
.calendar-cell.profit { background: var(--teal-dim); border-color: rgba(52,217,168,.3); }
.calendar-cell.loss { background: var(--rose-dim); border-color: rgba(226,97,126,.3); }
.calendar-cell .day-num { color: var(--text-dim); font-weight: 700; font-size: 12px; }
.calendar-cell.profit .day-num, .calendar-cell.loss .day-num { color: var(--text); }
.calendar-cell .day-pnl { font-weight: 800; font-size: 13px; }
.calendar-cell .day-count { color: var(--text-faint); font-size: 10.5px; }

/* ============ TOASTS ============ */
/* Stacked bottom-right, swipe-to-dismiss, success/error/warning/info/loading
   variants. Exit (140ms) is deliberately faster than entrance (200ms) - the
   system's own response to a dismiss should feel snappier than the moment
   it was confirming. See the roadmap's "Motion & design" spec for why. */
.notification-container {
  position: fixed; bottom: 18px; right: 18px; z-index: 2000;
  display: flex; flex-direction: column; gap: 10px; max-width: 380px;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; min-width: 280px; max-width: 380px;
  font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--text);
  box-shadow: var(--shadow-md); animation: toastIn 200ms var(--ease-out) both;
  touch-action: pan-y; cursor: grab;
}
.toast:active { cursor: grabbing; }
.toast.toast-out { animation: toastOut 140ms var(--ease-out) both; }
.toast-icon { flex-shrink: 0; width: 18px; height: 18px; }
.toast-icon svg { width: 100%; height: 100%; }
.toast.toast-success .toast-icon { color: var(--teal); }
.toast.toast-error .toast-icon { color: var(--rose); }
.toast.toast-warning .toast-icon { color: var(--amber); }
.toast.toast-info .toast-icon { color: var(--blue); }
.toast.toast-loading .toast-icon { color: var(--text-dim); }
.toast-msg { flex: 1; }
.toast-close {
  flex-shrink: 0; background: transparent; border: none; color: var(--text-faint);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 3px 5px; border-radius: 5px;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.toast-close:hover { color: var(--text); background: var(--surface-2); }
.toast-spin { animation: toastSpin 1s linear infinite; }
@keyframes toastSpin { to { transform: rotate(360deg); } }
@keyframes toastIn { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toastOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.toast-out { animation-duration: 1ms !important; }
  .toast-spin { animation-duration: 1.4s; }
  .page:not(.hidden) { animation: none !important; }
}

/* ============ SKELETON LOADING ============ */
/* Toggled by app.js as `body.loading-data` while loadAll() is in flight
   (first page load, and the brief refetch after a manual sync). Content
   inside the targeted containers is hidden (not removed - layout doesn't
   jump) and a shimmer sweep stands in for it. Continuous/ambient motion,
   so it runs linear like a progress indicator rather than eased. */
body.loading-data .stat-row,
body.loading-data #analyticsStatRow,
body.loading-data .trades-container .table-wrapper,
body.loading-data #queueGrid,
body.loading-data #activeGrid {
  position: relative; overflow: hidden; min-height: 96px; border-radius: var(--radius-sm);
}
body.loading-data .stat-row > *,
body.loading-data #analyticsStatRow > *,
body.loading-data .trades-container .table-wrapper > *,
body.loading-data #queueGrid > *,
body.loading-data #activeGrid > * {
  opacity: 0;
}
body.loading-data .stat-row::after,
body.loading-data #analyticsStatRow::after,
body.loading-data .trades-container .table-wrapper::after,
body.loading-data #queueGrid::after,
body.loading-data #activeGrid::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.4s linear infinite;
}
@keyframes skeletonShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  body.loading-data .stat-row::after,
  body.loading-data #analyticsStatRow::after,
  body.loading-data .trades-container .table-wrapper::after,
  body.loading-data #queueGrid::after,
  body.loading-data #activeGrid::after {
    animation-duration: 2.6s;
  }
}

/* ============ COMMAND PALETTE ============ */
.cmdk-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1600;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.cmdk-backdrop.open { opacity: 1; }
.cmdk-panel {
  position: fixed; top: 14vh; left: 50%; width: 560px; max-width: 92vw; max-height: 60vh;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); z-index: 1601; display: flex; flex-direction: column; overflow: hidden;
  transform: translate(-50%, -6px) scale(.98); opacity: 0;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.cmdk-panel.open { transform: translate(-50%, 0) scale(1); opacity: 1; }
.cmdk-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); color: var(--text-faint); flex-shrink: 0; }
.cmdk-input-row input {
  flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-size: 14.5px;
}
.cmdk-esc {
  font-size: 10px; font-weight: 700; color: var(--text-faint); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 5px; font-family: inherit;
}
.cmdk-results { overflow-y: auto; padding: 6px; }
.cmdk-group-label { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); padding: 10px 10px 4px; }
.cmdk-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 13.5px; color: var(--text-dim);
}
.cmdk-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-faint); }
.cmdk-item .cmdk-sub { margin-left: auto; font-size: 11.5px; color: var(--text-faint); }
.cmdk-item.active { background: var(--surface-2); color: var(--text); }
.cmdk-item.active svg { color: var(--brand); }
.cmdk-empty { text-align: center; color: var(--text-faint); font-size: 12.5px; padding: 28px 0; }
@media (prefers-reduced-motion: reduce) {
  .cmdk-backdrop, .cmdk-panel { transition: none !important; }
}

/* ============ PRICE ALERTS ============ */
#alertsBtn { position: relative; }
.alerts-badge {
  position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: var(--pill); background: var(--rose); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
}
.alerts-panel .form-row { margin-bottom: 10px; }
.alerts-panel .alert-form { margin-bottom: 18px; }
.alerts-panel .alert-form .btn-primary { width: 100%; padding: 10px; }
.notif-permission-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 16px; font-size: 12px; color: var(--text-dim);
}
.alerts-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; }
.alert-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 13px;
}
.alert-row .alert-desc { font-weight: 600; }
.alert-row .alert-desc .dim { font-weight: 500; }
.alert-row .alert-remove { background: transparent; border: none; color: var(--text-faint); cursor: pointer; padding: 4px; border-radius: 5px; }
.alert-row .alert-remove:hover { color: var(--rose); background: var(--rose-dim); }
.alerts-empty { text-align: center; color: var(--text-faint); font-size: 12.5px; padding: 20px 0; }

/* ============ QUEUE -> ACTIVE/CLOSED PROMOTION PULSE ============ */
/* A queued plan just matched a real fill and the user hasn't looked at
   Active/Closed yet - a rare, meaningful event (not a per-tick thing), so it
   earns a small persistent glow rather than a one-off flash that could be
   missed. Clears the moment the tab is actually opened (clearPromotionPulse
   in app.js), so it never lingers as stale "you have something new" cruft. */
.promoted-pulse::after {
  content: ''; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 var(--teal-dim);
  animation: promotedPulse 1.6s ease-out infinite;
}
.seg-btn.promoted-pulse::after { top: 3px; right: 6px; }
@keyframes promotedPulse {
  0% { box-shadow: 0 0 0 0 rgba(52,217,168,.5); }
  70% { box-shadow: 0 0 0 7px rgba(52,217,168,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,217,168,0); }
}
@media (prefers-reduced-motion: reduce) {
  .promoted-pulse::after { animation: none; }
}

/* ============ LIVE PRICE INDICATOR ============ */
/* A small always-on pulse next to a card's symbol once its first WebSocket
   tick lands - confirms "this number is live" without a per-tick flash,
   which would be a hover-tier-frequency motion misapplied to ambient
   glanceable data. Purely decorative pulse, so it's fully removed (not just
   slowed) under reduced motion - it conveys nothing reduced motion needs. */
.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); margin-left: 2px; flex-shrink: 0;
  animation: liveDotPulse 1.8s ease-in-out infinite;
}
@keyframes liveDotPulse {
  0%, 100% { opacity: 1; } 50% { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; opacity: .8; }
}

/* Sync-flash: a brief brand-colored glow across every visible figure right
   after a manual sync pulls new fills - "the instrument just took a
   reading." Deliberately NOT wired to the per-tick WebSocket price stream -
   .live-dot's own comment above already reasoned that per-tick motion on
   ambient, constantly-changing data is noise, not signal. This only fires
   on the rare, human-initiated, genuinely-new-data event (see syncTrades()
   in app.js), so it stays worth noticing instead of being tuned out. */
.sync-flash .num, .sync-flash .money, .sync-flash .stat-card-value {
  animation: syncFlash 900ms var(--ease-out);
}
@keyframes syncFlash {
  0% { text-shadow: 0 0 10px var(--brand); }
  100% { text-shadow: 0 0 0px transparent; }
}
/* Canvas-drawn charts (Lifetime PNL etc.) can't have their drawn pixels
   text-shadowed, so the container gets an echo of the same glow on its
   border instead - same signature, same trigger, adapted to what's actually
   paintable on a chart-panel. */
.sync-flash .chart-panel {
  animation: syncFlashBorder 900ms var(--ease-out);
}
@keyframes syncFlashBorder {
  0% { box-shadow: 0 0 0 1px var(--brand), 0 0 20px var(--brand-dim); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .sync-flash .num, .sync-flash .money, .sync-flash .stat-card-value, .sync-flash .chart-panel { animation: none; }
}

/* ============ EMPTY-STATE GUIDANCE ============ */
.empty-guidance {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 52px 24px; color: var(--text-dim);
}
.empty-guidance svg {
  width: 34px; height: 34px; color: var(--text-faint); margin-bottom: 4px;
}
.empty-guidance h4 { color: var(--text); font-size: 14.5px; font-weight: 700; }
.empty-guidance p { max-width: 400px; font-size: 13px; line-height: 1.55; }
.empty-guidance .pill-btn { margin-top: 4px; }

/* ============ INLINE RETRY STATE ============ */
.retry-state {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 32px 16px; color: var(--text-dim); font-size: 13px; text-align: center;
}
.retry-state .retry-msg { max-width: 420px; }
.retry-state .retry-btn:disabled { opacity: .6; cursor: default; }

/* ============ PERIOD TOGGLE (Plan) ============ */
.period-toggle { display: flex; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--pill); padding: 3px; gap: 2px; }
.period-btn {
  border: none; background: transparent; color: var(--text-dim);
  font-size: 12.5px; font-weight: 700; padding: 7px 15px; border-radius: var(--pill);
  cursor: pointer; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.period-btn.active { background: var(--brand-solid); color: #04170c; }
.period-btn:not(.active):hover { color: var(--text); }

/* ============ ONBOARDING CARD ============ */
.onboarding-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px; text-align: center;
  max-width: 440px; margin: 32px auto;
}
.onboarding-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.onboarding-card .dim { font-size: 12.5px; line-height: 1.6; }
.onboarding-form { display: flex; gap: 10px; margin-top: 18px; }
.onboarding-form .input-box { flex: 1; }
.onboarding-form .btn-primary { width: auto; padding: 11px 20px; white-space: nowrap; }

.input-box {
  width: 100%; padding: 10px 13px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: 13.5px; transition: border-color .15s;
}
.input-box:focus { outline: none; border-color: var(--brand); }

/* ============ COMPLETION RING ============ */
.completion-ring {
  position: relative; width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--teal) calc(var(--pct, 0) * 1%), var(--surface-2) 0);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-modal) var(--ease-in-out);
}
.completion-ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); }
.completion-ring span { position: relative; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ============ CALCULATOR GRID ============ */
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.calc-grid .filter-field label { margin-bottom: 2px; }
.calc-grid input { padding: 9px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; font-weight: 600; min-width: 0; }
.calc-grid input:focus { outline: none; border-color: var(--brand); }
.calc-price-row { display: flex; align-items: center; gap: 8px; }
.calc-price-row .icon-btn { background: var(--surface-2); border: 1px solid var(--border-soft); }
#calcStopAutoTag { cursor: pointer; text-decoration: underline dotted; }

/* ============ COIN SELECT DROPDOWN ============ */
.coin-select { position: relative; }
.coin-select-trigger {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 12px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; font-weight: 700;
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out);
}
.coin-select-trigger:hover { border-color: var(--text-faint); }
.coin-select.open .coin-select-trigger { border-color: var(--brand); }
.coin-select-trigger .coin-dot { width: 20px; height: 20px; font-size: 9px; }
.coin-select-caret { width: 14px; height: 14px; margin-left: auto; color: var(--text-faint); transition: transform var(--dur-fast) var(--ease-out); flex-shrink: 0; }
.coin-select.open .coin-select-caret { transform: rotate(180deg); }
.coin-select-panel {
  position: absolute; top: calc(100% + 6px); left: 0; width: 260px; max-width: 80vw; z-index: 60;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 8px;
  transform-origin: top left;
  transform: scale(.97) translateY(-4px); opacity: 0; pointer-events: none;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.coin-select.open .coin-select-panel { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }
.coin-select-search {
  width: 100%; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: 13px; margin-bottom: 6px; outline: none;
}
.coin-select-search:focus { border-color: var(--brand); }
.coin-select-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.coin-select-option {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 6px;
  cursor: pointer; font-size: 13px; font-weight: 600; transition: background var(--dur-fast) var(--ease-out);
}
.coin-select-option:hover, .coin-select-option.active { background: var(--surface-hover); }
.coin-select-option .coin-dot { width: 20px; height: 20px; font-size: 9px; flex-shrink: 0; }
.coin-select-empty { padding: 14px 8px; text-align: center; color: var(--text-faint); font-size: 12.5px; }

.tp-rules { display: flex; flex-direction: column; gap: 8px; }
.tp-rule-row {
  display: grid; grid-template-columns: 70px 1fr 1fr; gap: 10px; align-items: center;
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px 12px;
}
.tp-rule-row .tp-label { font-weight: 700; font-size: 12.5px; color: var(--text-dim); }
.tp-rule-row input { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 13px; padding: 6px 8px; width: 100%; }
.tp-rule-row input:focus { outline: none; border-color: var(--brand); }
.tp-rule-row .tp-field { display: flex; flex-direction: column; gap: 3px; }
.tp-rule-row .tp-field span { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .03em; }

/* ============ ANALYTICS BAR LISTS ============ */
.bar-list { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 76px 1fr 70px; align-items: center; gap: 10px; font-size: 12.5px; }
.bar-row .bar-label { color: var(--text-dim); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .bar-track { height: 8px; border-radius: var(--pill); background: var(--surface-2); overflow: hidden; position: relative; }
.bar-row .bar-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: var(--pill); transform-origin: left; transition: transform var(--dur-modal) var(--ease-out); }
.bar-row .bar-fill.pos { background: var(--teal); }
.bar-row .bar-fill.neg { background: var(--rose); }
.bar-row .bar-value { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.bar-list-empty { color: var(--text-faint); font-size: 12.5px; padding: 10px 0; }

/* ============ ROUTINE ============ */
.routine-section { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }
.routine-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.routine-section-head h3 { font-size: 14.5px; font-weight: 700; }
.streak-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--pill);
  background: var(--amber-dim); color: var(--amber); font-size: 11.5px; font-weight: 700;
}
.routine-task-list { display: flex; flex-direction: column; gap: 6px; }
.routine-task {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--surface-2); border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.routine-task:hover { background: var(--surface-hover); }
.routine-check {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: transparent; transition: all var(--dur-fast) var(--ease-out);
}
.routine-check svg { width: 13px; height: 13px; transform: scale(.5); opacity: 0; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.routine-task.done .routine-check { background: var(--teal); border-color: var(--teal); color: #04170c; }
.routine-task.done .routine-check svg { transform: scale(1); opacity: 1; }
.routine-task.done .routine-label { color: var(--text-faint); text-decoration: line-through; }
.routine-label { font-size: 13px; font-weight: 500; }
.routine-note { display: block; font-size: 11px; color: var(--text-faint); font-weight: 400; margin-top: 2px; }
.checklist-cat { display: block; font-size: 10.5px; color: var(--teal); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.checklist-bonus-head { font-size: 11.5px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .03em; margin: 14px 0 4px; padding-top: 10px; border-top: 1px solid var(--border-soft); }

.periodic-task-list { display: flex; flex-direction: column; gap: 8px; }
.periodic-task-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius-sm);
}
.periodic-task-title { font-size: 13px; font-weight: 700; }
.periodic-task-note { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }
.periodic-task-meta { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
.periodic-task-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.due-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--pill); white-space: nowrap; }
.due-badge.due-new { background: var(--blue-dim); color: var(--blue); }
.due-badge.due-ok { background: var(--teal-dim); color: var(--teal); }
.due-badge.due-overdue { background: var(--rose-dim); color: var(--rose); }
.routine-mark-done {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
  font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 6px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.routine-mark-done:hover { color: var(--text); border-color: var(--brand); }
.routine-progress-track { height: 5px; border-radius: var(--pill); background: var(--surface-2); overflow: hidden; margin-top: 12px; }
.routine-progress-fill { height: 100%; background: var(--teal); border-radius: var(--pill); transform-origin: left; transition: transform var(--dur-modal) var(--ease-out); }

/* ============ PRE-TRADE CHECKLIST PANEL ============ */
.checklist-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1500;
  opacity: 0; transition: opacity var(--dur-drawer) var(--ease-out);
}
.checklist-backdrop.open { opacity: 1; }
.checklist-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw;
  background: var(--surface); border-left: 1px solid var(--border);
  z-index: 1501; padding: 22px; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--dur-drawer) var(--ease-drawer);
  box-shadow: var(--shadow-md);
}
.checklist-panel.open { transform: translateX(0); }
.checklist-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.checklist-panel-head h3 { font-size: 16px; font-weight: 700; }
.checklist-progress-track { height: 8px; border-radius: var(--pill); background: var(--surface-2); overflow: hidden; }
.checklist-progress-fill {
  height: 100%; width: 100%; background: var(--rose); border-radius: var(--pill);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-modal) var(--ease-out), background var(--dur-modal) var(--ease-out);
}
.checklist-progress-fill.ready { background: var(--teal); }
.checklist-progress-label { font-size: 11.5px; color: var(--text-faint); margin: 8px 0 16px; text-align: right; }
.checklist-progress-label span { font-weight: 800; color: var(--text); }
.checklist-items { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; flex: 1; }
.checklist-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  background: var(--surface-2); border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.checklist-item:hover { background: var(--surface-hover); }
.checklist-item.done .routine-check { background: var(--teal); border-color: var(--teal); color: #04170c; }
.checklist-item.done .routine-check svg { transform: scale(1); opacity: 1; }
.checklist-item.done .routine-label { color: var(--text-faint); text-decoration: line-through; }
.checklist-take-btn { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) {
  .checklist-backdrop, .checklist-panel, .checklist-progress-fill, .completion-ring, .routine-progress-fill { transition: none !important; }
}

/* ============ TAGS / NOTES / SCREENSHOT (Journal trade detail) ============ */
.tag-filter-banner {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-dim);
}
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--pill);
  background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-dim);
  animation: chipIn var(--dur-fast) var(--ease-out) both;
}
.tag-chip.active { background: rgba(79,109,240,.16); border-color: rgba(79,109,240,.4); color: #93a4f7; }
@keyframes chipIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.tag-chip-x {
  background: none; border: none; color: inherit; opacity: .6; cursor: pointer; font-size: 14px; line-height: 1;
  padding: 0; transition: opacity var(--dur-fast) var(--ease-out);
}
.tag-chip-x:hover { opacity: 1; }
.tag-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tag-add-input {
  background: transparent; border: 1px dashed var(--border); border-radius: var(--pill); padding: 4px 10px;
  font-size: 12px; color: var(--text-dim); min-width: 130px; transition: border-color var(--dur-fast) var(--ease-out);
}
.tag-add-input:focus { border-color: var(--brand); outline: none; }

.trade-extras { display: grid; grid-template-columns: 1fr 1.2fr 0.9fr 0.9fr; gap: 20px; margin-top: 4px; }
.trade-extras-label { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.trade-note-input {
  width: 100%; min-height: 84px; resize: vertical; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; color: var(--text); font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.trade-note-input:focus { border-color: var(--brand); outline: none; }
.screenshot-slot {
  position: relative; height: 84px; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
}
.screenshot-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.screenshot-upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%;
  cursor: pointer; color: var(--text-faint); font-size: 11.5px; text-align: center; padding: 8px;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.screenshot-upload:hover { color: var(--text-dim); background: var(--surface-hover); }
.screenshot-upload svg { width: 22px; height: 22px; }
.screenshot-upload input { display: none; }
.screenshot-remove {
  position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.55); color: #fff; font-size: 13px; line-height: 1; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.screenshot-remove:hover { background: rgba(0,0,0,.8); }

.chart-zoom-btn {
  display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 4px 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--pill); color: var(--text-faint);
  font-size: 11.5px; cursor: pointer; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chart-zoom-btn svg { width: 12px; height: 12px; }
.chart-zoom-btn:hover { color: var(--text-dim); border-color: var(--text-faint); }
.chart-zoomable { cursor: grab; }
.chart-zoomable.panning { cursor: grabbing; }

/* ============ TAG REPORT ============ */
.tag-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 8px; }
.tag-report-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px;
  animation: statCardIn var(--dur-base) var(--ease-out) both;
}
.tag-report-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tag-report-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.tag-metric-label { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px; }
.tag-metric-value { font-size: 14px; font-weight: 700; }
.tag-report-bar { height: 5px; border-radius: var(--pill); background: var(--surface-2); overflow: hidden; margin-bottom: 14px; }
.tag-report-bar-fill { height: 100%; border-radius: var(--pill); transition: width var(--dur-modal) var(--ease-out); }
.tag-report-bar-fill.pos { background: var(--teal); }
.tag-report-bar-fill.neg { background: var(--rose); }
.tag-report-view-btn { width: 100%; justify-content: center; }

/* ============ WIDGET DASHBOARD ============ */
.widget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 12px; }
.widget-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
  animation: statCardIn var(--dur-base) var(--ease-out) both;
  transition: box-shadow var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
/* transition:none while actively dragging - the CSS transform transition
   above would otherwise fight the JS-driven 1:1 pointer tracking below
   every single pointermove, turning direct manipulation into a laggy
   trailing follow instead of the card actually sticking to the pointer. */
.widget-card.dragging { transition: none; box-shadow: 0 16px 32px -10px rgba(0,0,0,.45); cursor: grabbing; }
.widget-grid.rearranging .widget-card { border-style: dashed; cursor: grab; }
.widget-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.widget-card-head h3 { font-size: 13.5px; font-weight: 700; }
.widget-card-actions { display: flex; align-items: center; gap: 6px; }
.widget-drag-handle { display: none; width: 16px; height: 16px; color: var(--text-faint); cursor: grab; touch-action: none; }
.widget-grid.rearranging .widget-drag-handle { display: inline-flex; }
.widget-remove-btn {
  width: 22px; height: 22px; border-radius: 6px; border: none; background: transparent; color: var(--text-faint);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.widget-remove-btn svg { width: 12px; height: 12px; }
.widget-remove-btn:hover { background: var(--surface-hover); color: var(--rose); }
.widget-period-row { display: flex; gap: 4px; margin-top: 10px; }
.period-mini-btn {
  flex: 1; padding: 5px 0; font-size: 11px; font-weight: 600; border-radius: 6px; border: none;
  background: var(--surface-2); color: var(--text-faint); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.period-mini-btn:hover { color: var(--text-dim); }
.period-mini-btn.active { background: var(--brand-solid); color: #04170c; }
#dashArrangeBtn.active { background: var(--brand-solid); color: #04170c; }

.widget-picker {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw;
  background: var(--surface); border-left: 1px solid var(--border);
  z-index: 1501; padding: 22px 0; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--dur-drawer) var(--ease-drawer);
  box-shadow: var(--shadow-md);
}
.widget-picker.open { transform: translateX(0); }
.widget-picker .checklist-panel-head { padding: 0 20px; }
.widget-picker-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding: 4px 12px 12px; }
.widget-picker-item {
  display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--surface-2); border: none;
  border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
}
.widget-picker-item:hover { background: var(--surface-hover); }
.widget-picker-icon { font-size: 17px; }

@media (prefers-reduced-motion: reduce) {
  .widget-picker, .widget-card, .tag-chip, .tag-report-card { transition: none !important; animation: none !important; }
}

/* ============ SYMBOL PERFORMANCE (Symbols Report) ============ */
.symbol-perf-row { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; margin-bottom: 20px; }
.symbol-perf-chart .chart-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.chart-scroll-wrap { overflow-x: auto; }
.chart-scroll-inner { height: 100%; min-width: 100%; }
.insights-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.insights-icon {
  width: 22px; height: 22px; border-radius: 50%; background: rgba(201,161,90,.16); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0;
}
.insights-title { font-size: 14px; font-weight: 700; line-height: 1.4; margin-bottom: 10px; }
.insights-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; margin-bottom: 16px; }
.insights-row { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; }

/* ============ CLOSED POSITIONS PEEK / SHOW MORE ============ */
.closed-peek-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--surface));
}
#journalPage .table-wrapper#closedTableWrapper,
.table-wrapper.closed-peek-wrap {
  position: relative; transition: max-height var(--dur-modal, 260ms) var(--ease-in-out);
}
.closed-show-more { margin-top: 10px; width: 100%; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .table-wrapper.closed-peek-wrap { transition: none !important; }
}

.journal-subtab-toggle { max-width: 340px; margin-bottom: 20px; }
.journal-subtab-toggle .seg-btn { padding: 9px 10px; font-size: 13px; }
.journal-subtab { animation: cardIn var(--dur-base) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .journal-subtab { animation: none !important; } }

/* ============ QUEUE ============ */
.loss-limit-banner {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px; margin-bottom: 16px;
  border-radius: var(--radius-sm); background: var(--rose-dim); border: 1px solid var(--rose);
  color: var(--rose); font-size: 13px; font-weight: 600; line-height: 1.5;
  animation: cardIn var(--dur-base) var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) { .loss-limit-banner { animation: none !important; } }
.queue-add-btn:disabled, .queue-add-btn.disabled {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}
.queue-add-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 16px; margin-bottom: 20px; border-radius: var(--radius-lg);
  background: var(--brand-dim); border: 1.5px dashed var(--brand); color: var(--brand);
  font-size: 14.5px; font-weight: 700; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.queue-add-btn:hover { background: rgba(52,217,168,.22); }
.queue-add-btn:active { transform: scale(.99); }
.queue-add-btn svg { width: 18px; height: 18px; }
.queue-grid, .active-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.queue-card, .active-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; animation: cardIn var(--dur-base) var(--ease-out) both;
  transition: transform 100ms var(--ease-out);
}
/* Only .queue-card is a whole-card click target (opens its edit panel) -
   .active-card's clicks are all on specific sub-controls (tags, notes,
   remove button), so it deliberately does NOT get this despite sharing the
   base rule above. */
.queue-card:active { transform: scale(.98); }
@keyframes cardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.queue-card-head, .active-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.queue-card-symbol, .active-card-symbol { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.side-badge { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: var(--pill); letter-spacing: .02em; }
.side-badge.long { background: var(--teal-dim); color: var(--teal); }
.side-badge.short { background: var(--rose-dim); color: var(--rose); }
.order-type-badge { font-size: 10.5px; color: var(--text-faint); border: 1px solid var(--border); border-radius: var(--pill); padding: 2px 8px; }
.queue-card-actions, .active-card-actions { display: flex; gap: 6px; }
.queue-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.queue-level { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; }
.queue-level-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-bottom: 3px; }
.queue-level-value { font-family: var(--font-mono); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.queue-card-notes { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 10px; }
.queue-card-screenshot { width: 100%; max-height: 120px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 10px; }
.active-pnl { font-family: var(--font-mono); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.active-pnl.pos { color: var(--teal); } .active-pnl.neg { color: var(--rose); }
.active-tab-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.active-removed-panel {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px;
}
.active-removed-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.active-plan-strip { display: flex; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-dim); }
.active-plan-strip b { color: var(--text); }
.active-card-extras {
  display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.active-card-extras .screenshot-slot { height: 72px; }

/* Add-Trade drawer */
.queue-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 94vw;
  background: var(--surface); border-left: 1px solid var(--border);
  z-index: 1501; padding: 22px; display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(100%); transition: transform var(--dur-drawer) var(--ease-drawer);
  box-shadow: var(--shadow-md);
}
.queue-panel.open { transform: translateX(0); }
.queue-form { display: flex; flex-direction: column; gap: 14px; }
.queue-form .form-row { display: flex; gap: 10px; }
.queue-form .form-group { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.queue-form label { font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .03em; }
.queue-form input, .queue-form textarea {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 11px; color: var(--text); font-size: 13.5px; font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.queue-form input:focus, .queue-form textarea:focus { border-color: var(--brand); outline: none; }
.segmented { display: flex; position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.seg-btn {
  position: relative; z-index: 1; flex: 1; padding: 8px 10px; background: transparent; border: none; color: var(--text-dim);
  font-size: 12.5px; font-weight: 700; cursor: pointer; transition: color var(--dur-fast) var(--ease-out);
}
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.active { color: var(--brand); }
/* Sliding pill - a plain <div> inserted/positioned by positionSegIndicator()
   in utils.js. transform+width only (no left/top), so it's compositor-only. */
.seg-indicator {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 0;
  background: var(--brand-dim); opacity: 0;
  transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .seg-indicator { transition: opacity var(--dur-fast) var(--ease-out); }
}
.qtp-list { display: flex; flex-direction: column; gap: 6px; }
.qtp-row { display: flex; gap: 8px; align-items: center; }
.qtp-row input { flex: 1; }
.qtp-remove { flex-shrink: 0; }
.screenshot-dropzone {
  position: relative; border: 1.5px dashed var(--border); border-radius: var(--radius-sm);
  min-height: 90px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.screenshot-dropzone:hover, .screenshot-dropzone.drag-over { border-color: var(--brand); background: var(--brand-dim); }
.dropzone-placeholder { font-size: 12.5px; color: var(--text-faint); padding: 20px; text-align: center; }
.dropzone-preview { max-width: 100%; max-height: 160px; border-radius: var(--radius-sm); display: block; }
.dropzone-remove { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce) {
  .queue-panel, .queue-card, .active-card { transition: none !important; animation: none !important; }
}

/* ============ BACKTEST LAB ============ */
.bt-stage-section { margin-bottom: 28px; }
.bt-stage-section:last-child { margin-bottom: 0; }
.bt-stage-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bt-stage-head h3 { font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.bt-stage-count { font-size: 11.5px; color: var(--text-faint); background: var(--surface-2); border-radius: var(--pill); padding: 2px 9px; }
.bt-stage-head .bt-stage-hint { font-size: 12px; color: var(--text-faint); margin-left: auto; }

.bt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.bt-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; animation: cardIn var(--dur-base) var(--ease-out) both; overflow: hidden;
  transition: transform 100ms var(--ease-out);
}
/* Press feedback on every input type, not just the hover-lift below (which
   is correctly gated to real pointers) - "respond on pointer-down" applies
   regardless of whether the device can hover. */
.bt-card:active { transform: scale(.98); }
.bt-card-thumb {
  width: 100%; height: 120px; object-fit: cover; display: block; background: var(--surface-2);
}
.bt-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-card-thumb-empty {
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 34px; font-weight: 800;
  opacity: .85;
}
.bt-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 14px 14px; }
.bt-card-name { font-size: 14.5px; font-weight: 800; line-height: 1.35; }
.bt-card-meta { font-size: 12px; color: var(--text-faint); margin-top: 3px; }
.bt-stage-pill { flex-shrink: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; padding: 3px 9px; border-radius: var(--pill); white-space: nowrap; }
.bt-stage-pill.awaiting { background: var(--surface-2); color: var(--text-dim); }
.bt-stage-pill.testing { background: var(--amber-dim); color: var(--amber); }
.bt-stage-pill.provisional { background: var(--amber-dim); color: var(--amber); }
.bt-stage-pill.validated { background: var(--teal-dim); color: var(--teal); }
.bt-stage-pill.failed { background: var(--rose-dim); color: var(--rose); }

.bt-card-stats { display: flex; gap: 16px; margin: 10px 14px 0; padding: 10px 0 14px; border-top: 1px solid var(--border); }
.bt-card-stat { font-size: 12px; }
.bt-card-stat b { display: block; font-size: 14px; color: var(--text); }
.bt-card-stat.pos b { color: var(--teal); }
.bt-card-stat.neg b { color: var(--rose); }
.bt-card-expand-hint { font-size: 11px; color: var(--text-faint); margin-top: 10px; display: flex; align-items: center; gap: 4px; }
.bt-card-expand-hint svg { width: 12px; height: 12px; }

/* Strategy peek: linked-trades summary + list */
.bt-linked-stats { display: flex; gap: 16px; margin-bottom: 10px; font-size: 12.5px; color: var(--text-dim); }
.bt-linked-stats b { color: var(--text); font-size: 13.5px; }
.bt-linked-stats .pos b { color: var(--teal); }
.bt-linked-stats .neg b { color: var(--rose); }
.bt-linked-list { display: flex; flex-direction: column; gap: 6px; }
.bt-linked-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12.5px;
}
.bt-linked-status {
  flex-shrink: 0; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 7px; border-radius: var(--pill); background: var(--surface); color: var(--text-faint);
}
.bt-linked-status.closed { background: var(--teal-dim); color: var(--teal); }
.bt-linked-status.active { background: var(--blue-dim); color: var(--blue); }
.bt-linked-status.queued { background: var(--amber-dim); color: var(--amber); }
.bt-linked-label { flex: 1; color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-linked-row .num.pos { color: var(--teal); font-weight: 700; }
.bt-linked-row .num.neg { color: var(--rose); font-weight: 700; }

/* Strategy-link picker (Queue/Active/Closed) */
.strategy-link-field select {
  width: 100%; padding: 10px 13px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: 13.5px; transition: border-color .15s;
}
.strategy-link-field select:focus { outline: none; border-color: var(--brand); }

@media (hover: hover) and (pointer: fine) {
  .bt-card { transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
  .bt-card:hover { transform: translateY(-2px); border-color: var(--brand); }
}

.bt-detail-row { padding: 8px 0; border-top: 1px solid var(--border); }
.bt-detail-row:first-child { border-top: none; }
.bt-detail-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-bottom: 3px; }
.bt-detail-value { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; white-space: pre-wrap; }
.bt-detail-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  .bt-card, .bt-card-details { transition: none !important; animation: none !important; }
}

/* Quick facts (universe/timeframe/period) sit in an aligned row instead of
   three stacked full-width rows - they're short values, not paragraphs. */
.bt-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px 20px;
  padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.bt-detail-grid .bt-detail-row { padding: 0; border-top: none; }
.bt-detail-main { min-width: 0; }
.bt-detail-aside { min-width: 0; margin-top: 18px; }
.bt-detail-aside:empty { display: none; }

/* ---- Backtest images ---- */
.bt-image-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.bt-image-thumb-wrap { position: relative; width: 84px; height: 84px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; }
.bt-image-thumb { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .bt-image-thumb:hover { transform: scale(1.06); } }
.bt-image-grid.readonly .bt-image-thumb-wrap { width: 96px; height: 96px; }
.bt-image-remove {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.6); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* ---- Backtest thesis (linked note) ---- */
.bt-thesis-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 6px; }
.bt-thesis-preview { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.linked-backtest-note-chip { width: fit-content; cursor: pointer; }

/* ---- Backtest peek panel (Notion-style side peek / full window) ---- */
.bt-peek { width: 560px; padding: 0; z-index: 1501; }
.bt-peek.full { width: 100vw; max-width: 100vw; transition: transform var(--dur-drawer) var(--ease-drawer), width var(--dur-drawer) var(--ease-out); }
.bt-peek-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.bt-peek-head .icon-btn, .bt-peek-head .pill-btn { flex-shrink: 0; }
.bt-peek-head-title { flex: 1; min-width: 0; }
.bt-peek-name { font-size: 16px; font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-peek-meta { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.bt-peek-body { padding: 24px; overflow-y: auto; flex: 1; }
.bt-peek.full .bt-peek-body { max-width: 760px; margin: 0 auto; width: 100%; }
.bt-peek-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 10px; }
@media (prefers-reduced-motion: reduce) { .bt-peek, .bt-peek.full { transition: none !important; } }
@media (max-width: 640px) { .bt-peek { width: 100vw; } }

/* Full window gets real breathing room and, wide enough, a two-column
   layout: strategy logic on the left, charts/thesis on the right - so
   "expand" reads as a considered layout rather than the same narrow
   column just stretched across the screen. */
@media (min-width: 900px) {
  .bt-peek.full .bt-peek-head { padding: 20px 40px; }
  .bt-peek.full .bt-peek-name { font-size: 19px; }
  .bt-peek.full .bt-peek-body { max-width: 1040px; padding: 36px 40px; }
  /* Only split into two columns when there's actually an aside to fill the
     second one - a strategy with no images/thesis yet gets one full-width
     column instead of dead empty space next to its logic fields. */
  .bt-peek.full .bt-peek-body:has(.bt-detail-aside) {
    display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start;
  }
  .bt-peek.full .bt-detail-aside { margin-top: 0; }
}

/* ---- Image lightbox ---- */
.image-lightbox {
  position: fixed; inset: 0; z-index: 1600; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.82); opacity: 0; transition: opacity var(--dur-drawer) var(--ease-out);
}
.image-lightbox.open { opacity: 1; }
.image-lightbox img { max-width: 90vw; max-height: 88vh; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.image-lightbox .icon-btn { position: absolute; top: 20px; right: 20px; background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) { .image-lightbox, .bt-image-thumb { transition: none !important; } }

/* ============ RULES ============ */
.rules-grid { display: flex; flex-direction: column; gap: 28px; margin-top: 16px; }
.rules-group-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim);
  margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft);
}
.rules-group-name { margin-right: auto; }
.rules-group-head .icon-btn { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-faint); }
.rules-group-head .icon-btn:hover { color: var(--text-dim); }
.rules-group-head .rules-group-delete-btn:hover { color: var(--rose); background: var(--rose-dim); }
.rules-group-rename-input {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px 8px; font: inherit; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text); margin-right: auto;
}
.rules-group-rename-input:focus { outline: none; border-color: var(--brand); }
.rules-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.rules-group-empty {
  grid-column: 1 / -1; font-size: 12.5px; padding: 14px 4px; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  text-align: center;
}

.rule-card {
  display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden;
  border-top: 3px solid var(--rule-accent, var(--teal));
  animation: ruleCardIn var(--dur-modal) var(--ease-out) both;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.rule-card.accent-teal { --rule-accent: var(--teal); --rule-accent-dim: var(--teal-dim); }
.rule-card.accent-blue { --rule-accent: var(--blue); --rule-accent-dim: var(--blue-dim); }
.rule-card.accent-amber { --rule-accent: var(--amber); --rule-accent-dim: var(--amber-dim); }
.rule-card.accent-rose { --rule-accent: var(--rose); --rule-accent-dim: var(--rose-dim); }
.rule-card.is-filled { box-shadow: inset 0 0 0 1px var(--rule-accent-dim, transparent); }
@media (hover: hover) and (pointer: fine) {
  .rule-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -16px var(--rule-accent-dim, rgba(0,0,0,.4)); }
}
.rule-card-head { display: flex; align-items: flex-start; gap: 8px; }
.rule-card-titles { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.rule-card-cat { font-size: 13.5px; font-weight: 800; letter-spacing: .01em; color: var(--rule-accent, var(--teal)); }
.rule-card-subtitle { font-size: 11.5px; font-weight: 500; color: var(--text-faint); }
.rule-edit-btn, .rule-delete-btn { width: 22px; height: 22px; flex-shrink: 0; color: var(--text-faint); }
.rule-edit-btn:hover { color: var(--text-dim); }
.rule-delete-btn:hover { color: var(--rose); background: var(--rose-dim); }
.rule-saved-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--border); margin-left: auto; flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.rule-saved-dot.on { background: var(--rule-accent, var(--teal)); box-shadow: 0 0 0 3px var(--rule-accent-dim, transparent); }
.rule-saved-dot.pulse { animation: ruleDotPulse 480ms var(--ease-out); }
.rule-card textarea {
  width: 100%; min-height: 96px; resize: vertical; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; color: var(--text); font-size: 13px; font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.rule-card textarea:focus { outline: none; border-color: var(--rule-accent, var(--teal)); }
.rule-save-row { display: flex; align-items: center; gap: 10px; }
.rule-save-status { font-size: 11px; color: var(--text-faint); }

/* ---- Add-a-custom-rule-card form ---- */
.rule-add-form { margin-bottom: 4px; animation: cardIn var(--dur-base) var(--ease-out) both; }
.rule-add-form .form-row { display: flex; gap: 14px; align-items: flex-end; margin-bottom: 14px; }
.rule-add-form .form-row:last-of-type { margin-bottom: 0; }
.rule-add-form .form-group { flex: 1; margin-bottom: 0; }
.rule-add-form select {
  width: 100%; padding: 10px 13px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-size: 13.5px; transition: border-color .15s;
}
.rule-add-form select:focus { outline: none; border-color: var(--brand); }
.rule-color-picker { display: flex; gap: 8px; align-items: center; height: 38px; }
.rule-color-swatch {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
  background: var(--rule-accent, var(--teal)); opacity: .55;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.rule-color-swatch.accent-rose { --rule-accent: var(--rose); }
.rule-color-swatch.accent-blue { --rule-accent: var(--blue); }
.rule-color-swatch.accent-amber { --rule-accent: var(--amber); }
.rule-color-swatch.accent-teal { --rule-accent: var(--teal); }
.rule-color-swatch:hover { opacity: .8; }
.rule-color-swatch.active { opacity: 1; border-color: var(--text); transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) {
  .rule-add-form { animation: none !important; }
  .rule-color-swatch { transition: none !important; }
}

@keyframes ruleCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ruleDotPulse {
  0% { box-shadow: 0 0 0 0 var(--rule-accent-dim, transparent); }
  60% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 3px var(--rule-accent-dim, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .rule-card { animation: ruleCardIn var(--dur-fast) linear both; }
  .rule-card:hover { transform: none; }
  .rule-saved-dot.pulse { animation: none; }
}

/* ============ LADDER (DCA) ENTRY ============ */
.ladder-rungs { display: flex; flex-direction: column; gap: 10px; }
.ladder-rung-row {
  display: grid; grid-template-columns: 40px 1fr 1fr 34px; align-items: end; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
}
.ladder-rung-label { font-size: 12px; font-weight: 800; color: var(--text-dim); padding-bottom: 8px; }
.ladder-rung-row .ladder-rung-remove { align-self: end; }

/* ============ NOTES ============ */
.notes-layout { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: start; height: calc(100vh - 140px); min-height: 480px; }
.notes-sidebar {
  display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px; height: 100%; overflow-y: auto;
}
.notes-folder-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; user-select: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.notes-folder-item:hover { background: var(--surface-2); color: var(--text); }
.notes-folder-item.active { background: var(--brand-dim); color: var(--brand); }
.notes-folder-item .folder-icon { flex-shrink: 0; opacity: .8; }
.notes-folder-item .folder-count { margin-left: auto; font-size: 11px; color: var(--text-faint); font-weight: 700; }
.notes-folder-item.active .folder-count { color: var(--brand); }
.notes-folder-divider { height: 1px; background: var(--border); margin: 8px 2px; }
.notes-folder-list { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.notes-folder-row { display: flex; align-items: center; gap: 4px; }
.notes-folder-row .notes-folder-item { flex: 1; min-width: 0; }
.notes-folder-row .notes-folder-item span.folder-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-folder-del {
  opacity: 0; flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; background: transparent;
  color: var(--text-faint); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.notes-folder-row:hover .notes-folder-del { opacity: 1; }
.notes-folder-del:hover { background: var(--rose-dim); color: var(--rose); }
.notes-new-folder-btn { margin-top: 8px; width: 100%; justify-content: center; }

.notes-main { min-width: 0; height: 100%; display: flex; flex-direction: column; }
.notes-list-view { display: flex; flex-direction: column; height: 100%; }
.notes-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px;
  overflow-y: auto; padding: 4px 4px 20px; align-content: start;
}
.note-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; min-height: 128px;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  animation: cardIn 260ms var(--ease-out) both;
}
.note-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.note-card:active { transform: scale(.98); }
.note-card-title { font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-card-preview {
  font-size: 12.5px; color: var(--text-faint); line-height: 1.5; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.note-card-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.note-card-trade-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; background: var(--brand-dim); color: var(--brand);
}
.note-card-tag { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-faint); }
.note-card-date { font-size: 10.5px; color: var(--text-faint); margin-left: auto; }

.notes-editor-view { display: flex; flex-direction: column; height: 100%; animation: cardIn 220ms var(--ease-out) both; }
.note-editor-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.note-title-input {
  flex: 1; background: transparent; border: none; outline: none; color: var(--text);
  font-size: 22px; font-weight: 800; font-family: inherit; padding: 6px 2px;
}
.note-title-input::placeholder { color: var(--text-faint); }
.note-meta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.note-meta-select, .note-meta-row input[type="text"] {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 10px; color: var(--text); font-size: 12.5px; font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.note-meta-select:focus, .note-meta-row input[type="text"]:focus { border-color: var(--brand); outline: none; }
#noteLinkTradeInput { flex: 1; min-width: 160px; }
#noteTagsInput { flex: 1; min-width: 140px; }

.note-trade-ref-card {
  display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 12px;
  animation: cardIn 200ms var(--ease-out) both;
}
.note-trade-ref-card .ntr-symbol { font-weight: 800; font-size: 14px; }
.note-trade-ref-card .ntr-detail { font-size: 12px; color: var(--text-faint); }
.note-trade-ref-card .ntr-pnl.pos { color: var(--teal); font-weight: 700; }
.note-trade-ref-card .ntr-pnl.neg { color: var(--rose); font-weight: 700; }
.note-trade-ref-card .ntr-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }

/* ---- Note overlay: the real #notesEditorView, reparented in here so a
   trade's full note can be written without leaving Journal/Queue/Active.
   A centered modal rather than a side peek - a rich block editor wants the
   width, and this isn't anchored to a card the way the Strategies peek is. */
.note-overlay-host {
  position: fixed; top: 3vh; left: 50%; width: min(760px, 92vw); height: 94vh;
  z-index: 1701; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity var(--dur-drawer) var(--ease-out), transform var(--dur-drawer) var(--ease-out);
}
.note-overlay-host.open { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.note-overlay-host .notes-editor-view { padding: 22px; height: 100%; }
@media (max-width: 640px) { .note-overlay-host { top: 2vh; height: 96vh; width: 96vw; } }
@media (prefers-reduced-motion: reduce) { .note-overlay-host { transition: none !important; } }

.note-toolbar {
  display: flex; align-items: center; gap: 3px; padding: 6px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: 10px; position: sticky; top: 0; z-index: 5; flex-wrap: wrap;
}
.note-tb-btn {
  background: transparent; border: none; color: var(--text-dim); font-size: 12.5px; font-weight: 700;
  padding: 6px 9px; border-radius: 6px; cursor: pointer; font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.note-tb-btn:hover { background: var(--surface-2); color: var(--text); }
.note-tb-btn.active { background: var(--brand-dim); color: var(--brand); }
.note-tb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }

.note-blocks { flex: 1; overflow-y: auto; padding: 4px 2px 40px; display: flex; flex-direction: column; gap: 1px; max-width: 720px; }
/* Blocks read as one continuous document, not a stack of separate boxed
   rows - no hover background chunking each line, just a faint left rule
   that fades in so the drag/remove controls have a visual anchor. */
.note-block { position: relative; border-radius: 4px; }
.note-block::before {
  content: ''; position: absolute; left: -12px; top: 4px; bottom: 4px; width: 2px; border-radius: 2px;
  background: var(--border); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
}
.note-block:hover::before { opacity: 1; }
.note-block-content {
  outline: none; color: var(--text); font-size: 15px; line-height: 1.7; padding: 4px 6px; min-height: 1.7em;
}
.note-block-content:empty::before { content: attr(data-placeholder); color: var(--text-faint); }
.note-block[data-type="heading1"] .note-block-content { font-size: 22px; font-weight: 800; padding-top: 14px; }
.note-block[data-type="heading2"] .note-block-content { font-size: 17.5px; font-weight: 700; padding-top: 10px; }
.note-block[data-type="bulleted"], .note-block[data-type="numbered"], .note-block[data-type="todo"] {
  display: flex; align-items: flex-start; gap: 8px; padding-left: 4px;
}
.note-block[data-type="bulleted"] .block-marker, .note-block[data-type="numbered"] .block-marker { padding: 5px 0 5px 4px; color: var(--text-faint); font-weight: 700; flex-shrink: 0; user-select: none; }
.note-block[data-type="todo"] .block-check {
  margin-top: 9px; width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--brand); cursor: pointer;
}
.note-block[data-type="todo"].done .note-block-content { text-decoration: line-through; color: var(--text-faint); }
.note-block[data-type="bulleted"] .note-block-content, .note-block[data-type="numbered"] .note-block-content, .note-block[data-type="todo"] .note-block-content { flex: 1; }
.note-block[data-type="image"] { padding: 8px; }
.note-block[data-type="image"] img { max-width: 100%; max-height: 420px; border-radius: var(--radius-sm); display: block; }
.note-block-drag { position: absolute; left: -20px; top: 4px; opacity: 0; color: var(--text-faint); font-size: 12px; cursor: grab; transition: opacity var(--dur-fast) var(--ease-out); }
.note-block:hover .note-block-drag { opacity: .6; }
.note-block-remove {
  position: absolute; right: 4px; top: 4px; opacity: 0; width: 20px; height: 20px; border-radius: 5px;
  background: var(--surface); color: var(--text-faint); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px; transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.note-block:hover .note-block-remove { opacity: 1; }
.note-block-remove:hover { background: var(--rose-dim); color: var(--rose); }

.mention-chip {
  display: inline-flex; align-items: center; gap: 3px; background: var(--brand-dim); color: var(--brand);
  padding: 1px 7px; border-radius: 999px; font-weight: 700; font-size: 13px; white-space: nowrap;
}
.mention-popup {
  position: fixed; z-index: 2000; min-width: 220px; max-width: 300px; max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 6px; animation: cardIn 140ms var(--ease-out) both;
}
.mention-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 6px; cursor: pointer;
  font-size: 13px; color: var(--text-dim); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.mention-item:hover, .mention-item.hl { background: var(--brand-dim); color: var(--brand); }
.mention-item .mi-type { margin-left: auto; font-size: 10px; color: var(--text-faint); font-weight: 700; text-transform: uppercase; }
.mention-empty { padding: 10px; font-size: 12.5px; color: var(--text-faint); text-align: center; }

.block-type-menu { min-width: 240px; }
.block-type-item { flex-direction: row; align-items: center; }
.block-type-icon {
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 6px; background: var(--surface-2); font-size: 12px; font-weight: 800; color: var(--text-dim);
}
.block-type-item.hl .block-type-icon, .block-type-item:hover .block-type-icon { background: var(--brand-dim); color: var(--brand); }
.block-type-hint { display: block; font-size: 11px; font-weight: 500; color: var(--text-faint); margin-top: 1px; }

.note-add-block-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 10px;
  background: transparent; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  color: var(--text-faint); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.note-add-block-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--text-faint); }
.note-add-block-btn svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .note-card, .notes-editor-view, .note-trade-ref-card, .mention-popup { animation: none !important; }
  .note-card:hover { transform: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .symbol-perf-row { grid-template-columns: 1fr; }
  .trade-extras { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sidebar { width: 56px; }
  .content { padding: 18px 14px 40px; }
  .stat-row { grid-template-columns: 1fr; }
  .filter-bar { gap: 14px; }
  .tp-rule-row { grid-template-columns: 1fr; }
  .onboarding-form { flex-direction: column; }
  .widget-grid, .tag-report-grid, .queue-grid, .active-grid { grid-template-columns: 1fr; }
  .queue-panel { width: 100%; }
  .notes-layout { grid-template-columns: 1fr; height: auto; }
  .notes-sidebar { flex-direction: row; flex-wrap: wrap; height: auto; overflow-x: auto; }
  .notes-folder-list { flex-direction: row; flex-wrap: wrap; }
  .notes-grid { max-height: 60vh; }
}

/* ============ GUIDED TOUR ============ */
/* First-run walkthrough. Rare/one-time by nature (shown once automatically,
   otherwise launched deliberately from the sidebar '?' button), so this is
   the one place in the app that earns a slightly richer motion budget - a
   soft spotlight dims everything but the highlighted control, and the
   tooltip card fades/scales in next to it. Still transform/opacity for the
   card; the spotlight box's position genuinely has to move between
   arbitrary rects each step, so it's the same top/left/width/height
   exception already made for the closed-positions peek and accordions. */
.tour-overlay { position: fixed; inset: 0; z-index: 200; }
.tour-overlay.hidden { display: none; }
.tour-spotlight {
  position: fixed; border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(6,6,8,.72);
  transition: top var(--dur-drawer) var(--ease-in-out), left var(--dur-drawer) var(--ease-in-out),
              width var(--dur-drawer) var(--ease-in-out), height var(--dur-drawer) var(--ease-in-out);
  pointer-events: none;
}
.tour-spotlight.centered { box-shadow: 0 0 0 9999px rgba(6,6,8,.72); background: transparent; }
.tour-card {
  position: fixed; width: 300px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 18px 20px;
  opacity: 0; transform: scale(0.96) translateY(4px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              top var(--dur-drawer) var(--ease-in-out), left var(--dur-drawer) var(--ease-in-out);
}
.tour-card.in { opacity: 1; transform: scale(1) translateY(0); }
.tour-step-count { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; }
.tour-card h4 { font-size: 15px; margin-bottom: 6px; }
.tour-card p { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin-bottom: 14px; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-nav-btns { display: flex; gap: 8px; }
.tour-nav-btns .pill-btn.hidden { display: none; }
.pill-btn.primary { background: var(--brand-solid); border-color: var(--brand-solid); color: #06120e; font-weight: 700; }
.pill-btn.primary:hover { filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) {
  .tour-spotlight, .tour-card { transition: opacity var(--dur-fast) ease; }
  .tour-card { transform: none; }
  .tour-card.in { transform: none; }
}
@media (max-width: 700px) {
  .tour-card { width: calc(100vw - 32px); }
}

/* ============ KEYBOARD SHORTCUTS HELP ============ */
.shortcuts-panel { max-height: none; }
.shortcuts-list { padding: 8px 6px 14px; }
.shortcuts-row {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-dim);
}
.shortcuts-row span:first-child { flex: 1; color: var(--text); }
.shortcuts-row kbd {
  font-family: inherit; font-size: 11px; font-weight: 700; color: var(--text-dim);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 3px 7px; line-height: 1;
}