/* ============================================================================
   BQ PORTFOLIO — Design System v3.0
   ----------------------------------------------------------------------------
   An institutional portfolio workstation. Quiet, dense, precise.

   Palette      Paper #F6F7F9 · Card #FFFFFF · Ink #0E1420 · Hairline #E5E8EE
                Cobalt #2F4BDA (state only) · Emerald #0B7D5B · Oxblood #C0304A
   Type         Inter Tight (display) · Inter (UI) · JetBrains Mono (symbols)
   Signature    The weight gutter — a 3px mark on the left edge of every
                position row. Its length is the position's weight relative to
                the largest holding; its colour is the sign of its P&L. Two
                dimensions in one mark, readable without reading a number.

   Colour is spent almost nowhere. Cobalt appears only on focus, the active
   nav item and the primary action. Everything else is ink, hairline, and the
   two semantic colours finance already understands.
   ============================================================================ */

/* ── TOKENS ───────────────────────────────────────────────────────────────── */

:root {
  /* Type */
  --bq-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bq-font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bq-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Surfaces */
  --bq-canvas:      #f6f7f9;
  --bq-surface:     #ffffff;
  --bq-surface-2:   #fafbfc;
  --bq-surface-3:   #eff1f5;
  --bq-surface-4:   #e7eaf0;
  --bq-overlay-bg:  rgba(12, 17, 26, 0.52);

  /* Lines */
  --bq-line:        #e5e8ee;
  --bq-line-strong: #d5dae3;

  /* Text */
  --bq-text:   #101724;
  --bq-text-2: #414c5e;
  --bq-text-3: #667487;
  --bq-text-4: #8b96a7;

  /* Accent — used for state, not decoration */
  --bq-accent:       #2f4bda;
  --bq-accent-hover: #2540bd;
  --bq-accent-soft:  #eef1fe;
  --bq-accent-line:  #c9d2fa;
  --bq-accent-ring:  rgba(47, 75, 218, 0.26);
  --bq-on-accent:    #ffffff;

  /* Semantics */
  --bq-pos: #0b7d5b; --bq-pos-soft: #e7f6f0; --bq-pos-line: #b6e2d0;
  --bq-neg: #c0304a; --bq-neg-soft: #fdedef; --bq-neg-line: #f2cbd2;
  --bq-warn:#9a5b0c; --bq-warn-soft:#fdf3e4; --bq-warn-line:#efdbb7;

  /* Radii */
  --bq-r-xs: 4px; --bq-r-sm: 6px; --bq-r: 10px; --bq-r-lg: 14px; --bq-r-full: 999px;

  /* Elevation */
  --bq-sh-1: 0 1px 2px rgba(14, 20, 32, 0.04), 0 1px 3px rgba(14, 20, 32, 0.05);
  --bq-sh-2: 0 2px 4px rgba(14, 20, 32, 0.04), 0 8px 20px rgba(14, 20, 32, 0.07);
  --bq-sh-3: 0 8px 24px rgba(9, 13, 22, 0.14), 0 32px 72px rgba(9, 13, 22, 0.2);

  /* Metrics. --bqp-header-h is NOT declared here — see .bq-app. */
  --bq-sidebar-w: 248px;
  --bq-sidebar-w-min: 68px;
  --bq-topbar-h: 62px;
  --bq-gut: 24px;

  --bq-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --bq-t: 150ms var(--bq-ease);

  /* Legacy aliases — older inline styles still reference these. */
  --t1: var(--bq-text); --t2: var(--bq-text-2); --t3: var(--bq-text-3); --t4: var(--bq-text-4);
  --green: var(--bq-pos); --green-bg: var(--bq-pos-soft); --green-bd: var(--bq-pos-line);
  --red: var(--bq-neg); --red-bg: var(--bq-neg-soft); --red-bd: var(--bq-neg-line);
  --f: var(--bq-font-ui); --f-mono: var(--bq-font-mono);
  --r: var(--bq-r-sm); --bd: 1px solid var(--bq-line); --bd-md: 1px solid var(--bq-line-strong);
}

html[data-bq-theme="dark"] {
  --bq-canvas:      #0a0d13;
  --bq-surface:     #10151d;
  --bq-surface-2:   #141a24;
  --bq-surface-3:   #1a212d;
  --bq-surface-4:   #222b3a;
  --bq-overlay-bg:  rgba(3, 5, 9, 0.7);

  --bq-line:        #212936;
  --bq-line-strong: #2c3646;

  --bq-text:   #e9edf5;
  --bq-text-2: #adb8c8;
  --bq-text-3: #8b97a9;
  --bq-text-4: #6d798b;

  --bq-accent:       #808dff;
  --bq-accent-hover: #98a3ff;
  --bq-accent-soft:  rgba(128, 141, 255, 0.14);
  --bq-accent-line:  rgba(128, 141, 255, 0.32);
  --bq-accent-ring:  rgba(128, 141, 255, 0.34);
  --bq-on-accent:    #080b11;

  --bq-pos: #35d69c; --bq-pos-soft: rgba(53, 214, 156, 0.13); --bq-pos-line: rgba(53, 214, 156, 0.28);
  --bq-neg: #ff6f86; --bq-neg-soft: rgba(255, 111, 134, 0.13); --bq-neg-line: rgba(255, 111, 134, 0.3);
  --bq-warn: #e2a950; --bq-warn-soft: rgba(226, 169, 80, 0.13); --bq-warn-line: rgba(226, 169, 80, 0.3);

  --bq-sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bq-sh-2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 10px 24px rgba(0, 0, 0, 0.3);
  --bq-sh-3: 0 12px 32px rgba(0, 0, 0, 0.55), 0 40px 90px rgba(0, 0, 0, 0.45);
}

/* ── RESET (scoped) ───────────────────────────────────────────────────────── */

.bq-app, .bq-app *, .bq-overlay, .bq-overlay *, .bq-toast-wrap, .bq-toast-wrap * {
  box-sizing: border-box;
}
/* :where() keeps this reset at zero specificity beyond .bq-app, so a plain
   component class can still override it. Written as `.bq-app p` it scored
   (0,1,1) and silently beat every (0,1,0) class rule below — which is how
   `.bq-empty-desc { margin: 0 auto }` lost its auto side margins and the
   empty-state paragraph ended up jammed against the left edge. */
.bq-app :where(h1, h2, h3, p, figure),
.bq-overlay :where(h1, p) { margin: 0; padding: 0; }
.bq-app :where(ul, ol) { margin: 0; padding: 0; list-style: none; }

/* The host stylesheet ships `* { font-family: 'Lato', sans-serif !important }`.
   A universal selector carrying !important outranks every ordinary
   font-family declaration on the page, so without an answer in kind the whole
   app renders in Lato and none of the typography in this file applies.
   These are the only !important font rules here and they exist solely to
   answer that one. The blanket sits above the display/mono rules below, so
   those still win on the elements they target. */
.bq-app, .bq-app *,
.bq-overlay, .bq-overlay *,
.bq-toast-wrap, .bq-toast-wrap * {
  font-family: var(--bq-font-ui) !important;
}

.bq-app, .bq-overlay, .bq-toast-wrap {
  font-family: var(--bq-font-ui);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--bq-text);
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bq-app :focus-visible,
.bq-overlay :focus-visible {
  outline: 2px solid var(--bq-accent);
  outline-offset: 2px;
  border-radius: var(--bq-r-xs);
}

.bq-app [hidden], .bq-overlay [hidden] { display: none !important; }
.bq-i { flex: none; }
.bq-mono { font-family: var(--bq-font-mono) !important; }
.bq-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.tr-r { text-align: right !important; }
.tr-c { text-align: center !important; }
.bq-up { color: var(--bq-pos) !important; }
.bq-down { color: var(--bq-neg) !important; }
.bq-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── APP SHELL ────────────────────────────────────────────────────────────── */

/* The host theme's fixed header height. Declared HERE, not on :root, and under
   a name no other stylesheet is likely to use.
   3.0.0 called this --bq-header-h and declared it on :root, where another
   stylesheet loaded on the same page declared the same name and won — the value
   resolved to 108px instead of 54px, so the sidebar and top bar both stuck
   half a header too low. A declaration on .bq-app beats any :root declaration
   for everything inside the app, whatever load order the page ends up with.
   app.js overwrites this at runtime with the header's measured height; the
   54px below is only the pre-measurement fallback. */
.bq-app {
  --bqp-header-h: 54px;
  display: grid;
  grid-template-columns: var(--bq-sidebar-w) minmax(0, 1fr);
  align-items: start;
  min-height: calc(100vh - var(--bqp-header-h));
  background: var(--bq-canvas);
}
.bq-app[data-collapsed="1"] { --bq-sidebar-w: var(--bq-sidebar-w-min); }

.bq-app-centered {
  grid-template-columns: 1fr;
  place-items: center;
  padding: 48px 20px;
}

/* ── SIDEBAR ──────────────────────────────────────────────────────────────── */

.bq-sidebar {
  position: sticky;
  height: calc(100vh - var(--bqp-header-h));
  display: flex;
  flex-direction: column;
  background: var(--bq-surface);
  border-right: 1px solid var(--bq-line);
  overflow: hidden;
  z-index: 60;
}


.bq-switcher { padding: 20px 14px 12px; }
.bq-field-label {
  display: block;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--bq-text-4);
  margin-bottom: 7px;
}

.bq-nav { padding: 4px 10px; flex: 1; overflow-y: auto; }
.bq-app[data-collapsed="1"] .bq-nav { padding-top: 16px; }
.bq-nav-link {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px;
  margin-bottom: 2px;
  border-radius: var(--bq-r-sm);
  color: var(--bq-text-2);
  text-decoration: none;
  transition: background var(--bq-t), color var(--bq-t);
}
.bq-nav-link:hover { background: var(--bq-surface-3); color: var(--bq-text); }
.bq-nav-link.active { background: var(--bq-accent-soft); color: var(--bq-accent); }
.bq-nav-link.active::before {
  content: ''; position: absolute; left: -10px; top: 50%;
  width: 3px; height: 18px; margin-top: -9px;
  border-radius: 0 3px 3px 0;
  background: var(--bq-accent);
}
.bq-nav-ico { display: grid; place-items: center; width: 18px; opacity: 0.85; }
.bq-nav-link.active .bq-nav-ico { opacity: 1; }
.bq-nav-text { display: flex; flex-direction: column; min-width: 0; }
.bq-nav-name { font-size: 13.5px; font-weight: 550; letter-spacing: -0.006em; line-height: 1.3; }
.bq-nav-hint {
  font-size: 11px; color: var(--bq-text-4);
  line-height: 1.35; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.bq-nav-link.active .bq-nav-hint { color: var(--bq-accent); opacity: 0.72; }

.bq-sidebar-foot { border-top: 1px solid var(--bq-line); padding: 14px; }
.bq-pv { margin-bottom: 12px; }
.bq-pv-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--bq-text-4); margin-bottom: 6px;
}
.bq-pv-value {
  font-family: var(--bq-font-display) !important;
  font-size: 22px; font-weight: 620;
  letter-spacing: -0.028em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--bq-text);
  margin-bottom: 6px;
}
.bq-pv-delta {
  font-size: 11.5px; font-weight: 550;
  font-variant-numeric: tabular-nums;
  color: var(--bq-text-3);
}
.bq-pv-delta.up { color: var(--bq-pos); }
.bq-pv-delta.down { color: var(--bq-neg); }

.bq-sidebar-tools { display: flex; gap: 6px; }
.bq-sidebar-tools .bq-icon-btn { flex: 1; }

/* Collapsed rail */
/* This read `.bq-app[data-collapsed="1"] .bq-app[data-collapsed="1"] .bq-nav-text`
   — a leftover from removing the brand block, and a descendant selector that
   matches nothing, since .bq-app never contains another .bq-app. The nav labels
   therefore kept their full width inside a 68px rail and pushed a horizontal
   scrollbar into the sidebar. */
.bq-app[data-collapsed="1"] .bq-nav-text,
.bq-app[data-collapsed="1"] .bq-switcher,
.bq-app[data-collapsed="1"] .bq-pv { display: none; }
.bq-app[data-collapsed="1"] .bq-nav-link { justify-content: center; padding-inline: 0; }
.bq-app[data-collapsed="1"] .bq-sidebar-tools { flex-direction: column; }
.bq-app[data-collapsed="1"] .bq-collapse-btn .bq-i { transform: rotate(180deg); }

/* Collapsed rail: the label the icon lost, on hover and on keyboard focus.
   The sidebar has to stop clipping for the tooltip to escape the 68px rail. */
.bq-app[data-collapsed="1"] .bq-sidebar,
.bq-app[data-collapsed="1"] .bq-nav { overflow: visible; }

.bq-app[data-collapsed="1"] .bq-nav-link::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  background: var(--bq-text);
  color: var(--bq-surface);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
  white-space: nowrap;
  border-radius: var(--bq-r-xs);
  box-shadow: var(--bq-sh-2);
  opacity: 0; pointer-events: none;
  transition: opacity 120ms var(--bq-ease);
  z-index: 80;
}
.bq-app[data-collapsed="1"] .bq-nav-link:hover::after,
.bq-app[data-collapsed="1"] .bq-nav-link:focus-visible::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bq-app[data-collapsed="1"] .bq-nav-link::after { transition: none; }
}

.bq-scrim {
  position: fixed; inset: 0; z-index: 55;
  background: var(--bq-overlay-bg);
  opacity: 0; pointer-events: none;
  transition: opacity var(--bq-t);
}

/* ── TOP BAR ──────────────────────────────────────────────────────────────── */

.bq-content { min-width: 0; display: flex; flex-direction: column; }

/* No `top`: the bar scrolls with the page rather than pinning under the site
   header. A sticky offset here fought with the host theme's fixed header and
   pushed the bar a header-height too low, which is not worth the pinning. */
.bq-topbar {
  position: sticky;
  z-index: 40;
  display: flex; align-items: center; gap: 14px;
  min-height: var(--bq-topbar-h);
  padding: 12px var(--bq-gut);
  background: var(--bq-surface);
  border-bottom: 1px solid var(--bq-line);
}

.bq-topbar-head { min-width: 0; flex: 1; }
.bq-page-title {
  font-family: var(--bq-font-display) !important;
  font-size: 19px; font-weight: 620;
  letter-spacing: -0.028em; line-height: 1.2;
  color: var(--bq-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bq-page-sub {
  font-size: 12.5px; color: var(--bq-text-3);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bq-topbar-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.bq-topbar .bq-nav-open { display: none; }

/* ── KPI RIBBON ───────────────────────────────────────────────────────────── */

.bq-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  background: var(--bq-surface);
  border-bottom: 1px solid var(--bq-line);
}
.bq-strip-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bq-strip-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bq-kpi {
  padding: 16px var(--bq-gut) 18px;
  border-right: 1px solid var(--bq-line);
  min-width: 0;
  animation: bq-rise 420ms var(--bq-ease) backwards;
}
.bq-kpi:nth-child(1) { animation-delay: 0ms; }
.bq-kpi:nth-child(2) { animation-delay: 35ms; }
.bq-kpi:nth-child(3) { animation-delay: 70ms; }
.bq-kpi:nth-child(4) { animation-delay: 105ms; }
.bq-kpi:nth-child(5) { animation-delay: 140ms; }
.bq-kpi:nth-child(6) { animation-delay: 175ms; }
.bq-kpi:last-child { border-right: none; }

@keyframes bq-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.bq-kpi-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--bq-text-4);
  margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bq-kpi-val {
  font-family: var(--bq-font-display) !important;
  font-size: 23px; font-weight: 620;
  letter-spacing: -0.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--bq-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bq-kpi-val.up { color: var(--bq-pos); }
.bq-kpi-val.down { color: var(--bq-neg); }
.bq-kpi-sub { font-size: 11.5px; color: var(--bq-text-4); margin-top: 6px; }
.bq-kpi-foot { margin-top: 8px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.bq-delta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px 2px 5px;
  border-radius: var(--bq-r-full);
  font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bq-delta.up { background: var(--bq-pos-soft); color: var(--bq-pos); }
.bq-delta.down { background: var(--bq-neg-soft); color: var(--bq-neg); }
.bq-delta-arrow { font-size: 8px; line-height: 1; }
.bq-delta-note { font-size: 11px; color: var(--bq-text-4); }

/* ── PAGE BODY ────────────────────────────────────────────────────────────── */

.bq-body { padding: var(--bq-gut); flex: 1; }
.bq-mb { margin-bottom: 16px; }

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */

.bq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 13px;
  border: 1px solid transparent;
  border-radius: var(--bq-r-sm);
  font-family: var(--bq-font-ui);
  font-size: 13px; font-weight: 550; letter-spacing: -0.006em;
  line-height: 1; white-space: nowrap; text-decoration: none;
  cursor: pointer;
  transition: background var(--bq-t), border-color var(--bq-t), color var(--bq-t), box-shadow var(--bq-t), transform 80ms var(--bq-ease);
}
.bq-btn:active { transform: translateY(0.5px); }
.bq-btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.bq-btn-primary {
  background: var(--bq-accent); color: var(--bq-on-accent);
  box-shadow: 0 1px 2px rgba(14, 20, 32, 0.12);
}
.bq-btn-primary:hover { background: var(--bq-accent-hover); color: var(--bq-on-accent); }

.bq-btn-secondary, .bq-btn-outline {
  background: var(--bq-surface);
  color: var(--bq-text-2);
  border-color: var(--bq-line-strong);
  box-shadow: var(--bq-sh-1);
}
.bq-btn-secondary:hover, .bq-btn-outline:hover {
  background: var(--bq-surface-3); color: var(--bq-text); border-color: var(--bq-line-strong);
}
.bq-btn-ghost { background: transparent; color: var(--bq-text-2); }
.bq-btn-ghost:hover { background: var(--bq-surface-3); color: var(--bq-text); }

.bq-btn-danger {
  background: transparent; color: var(--bq-neg); border-color: var(--bq-neg-line);
}
.bq-btn-danger:hover { background: var(--bq-neg-soft); }

.bq-btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; }
.bq-btn-xs { height: 25px; padding: 0 9px; font-size: 12px; border-radius: var(--bq-r-xs); }
.bq-btn-block { width: 100%; height: 38px; }

/* Two-step destructive confirm */
.bq-btn.confirm-ready {
  background: var(--bq-neg) !important;
  border-color: var(--bq-neg) !important;
  color: #fff !important;
  animation: bq-pulse 1.1s ease-in-out infinite;
}
@keyframes bq-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--bq-neg-soft); }
  50% { box-shadow: 0 0 0 4px var(--bq-neg-soft); }
}

.bq-btn-spinner {
  width: 13px; height: 13px; flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.75;
  animation: bq-spin 620ms linear infinite;
}
@keyframes bq-spin { to { transform: rotate(360deg); } }

.bq-icon-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--bq-line);
  border-radius: var(--bq-r-sm);
  background: var(--bq-surface);
  color: var(--bq-text-3);
  cursor: pointer;
  transition: background var(--bq-t), color var(--bq-t), border-color var(--bq-t);
}
.bq-icon-btn:hover { background: var(--bq-surface-3); color: var(--bq-text); }

.bq-theme-dark { display: none; }
html[data-bq-theme="dark"] .bq-theme-dark { display: block; }
html[data-bq-theme="dark"] .bq-theme-light { display: none; }

/* ── FORM CONTROLS ────────────────────────────────────────────────────────── */

.bq-select-wrap { position: relative; display: block; }
.bq-select-caret {
  position: absolute; right: 9px; top: 50%; margin-top: -7px;
  color: var(--bq-text-4); pointer-events: none;
}
.bq-select {
  width: 100%; height: 34px;
  padding: 0 30px 0 11px;
  border: 1px solid var(--bq-line-strong);
  border-radius: var(--bq-r-sm);
  background: var(--bq-surface);
  color: var(--bq-text);
  font-family: var(--bq-font-ui); font-size: 13px; font-weight: 500;
  appearance: none; -webkit-appearance: none;
  cursor: pointer; outline: none;
  transition: border-color var(--bq-t), box-shadow var(--bq-t);
}
.bq-select:hover { border-color: var(--bq-text-4); }
.bq-select:focus { border-color: var(--bq-accent); box-shadow: 0 0 0 3px var(--bq-accent-ring); }
.bq-select-sm { height: 30px; font-size: 12.5px; }
.bq-portfolio-select optgroup {
  font-family: var(--bq-font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--bq-text-4);
}
.bq-portfolio-select option { font-weight: 500; color: var(--bq-text); }

.bq-input, .bq-app textarea.bq-input {
  width: 100%;
  min-height: 34px; padding: 8px 11px;
  border: 1px solid var(--bq-line-strong);
  border-radius: var(--bq-r-sm);
  background: var(--bq-surface);
  color: var(--bq-text);
  font-family: var(--bq-font-ui); font-size: 13.5px;
  outline: none;
  transition: border-color var(--bq-t), box-shadow var(--bq-t);
}
.bq-input::placeholder { color: var(--bq-text-4); }
.bq-input:hover { border-color: var(--bq-text-4); }
.bq-input:focus { border-color: var(--bq-accent); box-shadow: 0 0 0 3px var(--bq-accent-ring); }
.bq-input-mono { font-family: var(--bq-font-mono) !important; letter-spacing: 0.02em; }
select.bq-input {
  height: 34px; padding: 0 30px 0 11px;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.bq-app input[type="date"].bq-input { font-variant-numeric: tabular-nums; }

.bq-search { position: relative; }
.bq-search .bq-i {
  position: absolute; left: 9px; top: 50%; margin-top: -8px;
  color: var(--bq-text-4); pointer-events: none;
}
.bq-search .bq-input { height: 30px; min-height: 30px; padding: 0 10px 0 30px; font-size: 12.5px; }

.bq-fg { margin-bottom: 14px; }
.bq-fg:last-child { margin-bottom: 0; }
.bq-label {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--bq-text-2);
  margin-bottom: 6px;
}
.bq-hint { font-size: 11.5px; color: var(--bq-text-4); margin-top: 6px; }
.bq-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bq-fg-full { grid-column: 1 / -1; }

/* ── SEGMENTED CONTROLS ───────────────────────────────────────────────────── */

.bq-period-tabs, .bq-toggle-group, .bq-type-group {
  display: inline-flex; gap: 2px;
  padding: 3px;
  background: var(--bq-surface-3);
  border-radius: 8px;
}
.bq-period-tab, .bq-toggle-btn, .bq-type-btn {
  border: none; background: transparent;
  padding: 0 11px; height: 26px;
  border-radius: var(--bq-r-sm);
  font-family: var(--bq-font-ui);
  font-size: 12px; font-weight: 550; letter-spacing: -0.004em;
  color: var(--bq-text-3);
  cursor: pointer;
  transition: background var(--bq-t), color var(--bq-t), box-shadow var(--bq-t);
}
.bq-period-tab:hover, .bq-toggle-btn:hover, .bq-type-btn:hover { color: var(--bq-text); }
.bq-period-tab.active, .bq-toggle-btn.active, .bq-type-btn.active {
  background: var(--bq-surface);
  color: var(--bq-text);
  box-shadow: var(--bq-sh-1);
}

/* ── CARD ─────────────────────────────────────────────────────────────────── */

.bq-card {
  background: var(--bq-surface);
  border: 1px solid var(--bq-line);
  border-radius: var(--bq-r);
  box-shadow: var(--bq-sh-1);
  overflow: hidden;
}
.bq-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 13px 16px;
  border-bottom: 1px solid var(--bq-line);
}
.bq-card-titles { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.bq-card-title {
  font-family: var(--bq-font-display) !important;
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.018em;
  color: var(--bq-text);
}
.bq-card-meta { font-size: 12px; color: var(--bq-text-4); font-variant-numeric: tabular-nums; }
.bq-card-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bq-card-tools .bq-search { width: 190px; }

/* ── TABLES ───────────────────────────────────────────────────────────────── */

.bq-tbl-wrap { overflow-x: auto; }
.bq-tbl-wrap--tall { max-height: min(64vh, 780px); overflow: auto; }
.bq-tbl-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.bq-tbl-wrap::-webkit-scrollbar-thumb {
  background: var(--bq-line-strong); border-radius: 6px;
  border: 3px solid var(--bq-surface);
}
.bq-tbl-wrap::-webkit-scrollbar-track { background: transparent; }

.bq-tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.bq-tbl thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 9px 12px;
  background: var(--bq-surface-2);
  border-bottom: 1px solid var(--bq-line);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--bq-text-4);
  white-space: nowrap; text-align: left;
}
.bq-tbl-wrap:not(.bq-tbl-wrap--tall) .bq-tbl thead th { position: static; }

.bq-tbl th[data-sort] { cursor: pointer; user-select: none; transition: color var(--bq-t), background var(--bq-t); }
.bq-tbl th[data-sort]:hover { color: var(--bq-text-2); background: var(--bq-surface-3); }
.bq-sort-icon { margin-left: 4px; font-size: 8px; opacity: 0.4; display: inline-block; }
.bq-tbl th.bq-sort-asc, .bq-tbl th.bq-sort-desc { color: var(--bq-accent); }
.bq-tbl th.bq-sort-asc .bq-sort-icon, .bq-tbl th.bq-sort-desc .bq-sort-icon { opacity: 1; }

.bq-tbl tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--bq-line);
  font-size: 13px;
  vertical-align: middle;
  color: var(--bq-text-2);
}
.bq-tbl tbody td.bq-num, .bq-tbl tbody td.tr-r { font-variant-numeric: tabular-nums; }
.bq-tbl tbody tr:last-child > td { border-bottom: none; }
.bq-tbl tbody tr.bq-pos-row, .bq-tbl tbody tr.bq-trade-row { transition: background 90ms linear; }
.bq-tbl tbody tr.bq-pos-row:hover, .bq-tbl tbody tr.bq-trade-row:hover { background: var(--bq-surface-2); }
/* An open position stays white. It's marked by structure, not by a wash of
   colour: the row loses its bottom rule so it reads as continuous with the
   drawer below it, and the ticker cell carries the emphasis. */
.bq-tbl tbody tr.is-open { background: var(--bq-surface) !important; }
.bq-tbl tbody tr.is-open > td { border-bottom-color: transparent; }
.bq-tbl tbody tr.is-open .bq-ticker { color: var(--bq-text); }

.bq-cell-strong { color: var(--bq-text); font-weight: 550; }

/* THE WEIGHT GUTTER — length is weight relative to the largest position,
   colour is the sign of unrealised P&L. */
.bq-tbl tbody tr.bq-pos-row > td:first-child,
.bq-tbl tbody tr.bq-trade-row > td:first-child { position: relative; }
.bq-tbl tbody tr.bq-pos-row > td:first-child::before,
.bq-tbl tbody tr.bq-trade-row > td:first-child::before {
  content: '';
  position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--bq-text-4);
  transform: scaleY(var(--bq-w, 0.15));
  transform-origin: center;
  transition: transform 380ms var(--bq-ease);
}
.bq-tbl tbody tr.gut-up > td:first-child::before { background: var(--bq-pos); }
.bq-tbl tbody tr.gut-down > td:first-child::before { background: var(--bq-neg); }
.bq-tbl tbody tr.bq-pos-row:hover > td:first-child::before { transform: scaleY(1); opacity: 0.85; }

.bq-tbl-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 11px 16px;
  border-top: 1px solid var(--bq-line);
  background: var(--bq-surface-2);
}
.bq-tbl-count { font-size: 12px; color: var(--bq-text-3); font-variant-numeric: tabular-nums; }
.bq-tbl-note { font-size: 11.5px; color: var(--bq-text-4); }

/* ── CELL PRIMITIVES ──────────────────────────────────────────────────────── */

.bq-ticker {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--bq-r-xs);
  background: var(--bq-surface-3);
  color: var(--bq-text);
  font-family: var(--bq-font-mono) !important;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
}
.bq-company {
  font-size: 12.5px; color: var(--bq-text-2);
  max-width: 190px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bq-date { font-family: var(--bq-font-mono) !important; font-size: 11.5px; color: var(--bq-text-3); white-space: nowrap; }

.bq-type-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--bq-r-full);
  border: 1px solid transparent;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap;
}
.bq-type-badge.equity { background: var(--bq-surface-3); color: var(--bq-text-2); border-color: var(--bq-line); }
.bq-type-badge.etf { background: var(--bq-accent-soft); color: var(--bq-accent); border-color: var(--bq-accent-line); }
.bq-type-badge.mf { background: var(--bq-warn-soft); color: var(--bq-warn); border-color: var(--bq-warn-line); }

.bq-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--bq-r-full);
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
}
.bq-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.bq-pill.buy { background: var(--bq-pos-soft); color: var(--bq-pos); }
.bq-pill.sell { background: var(--bq-neg-soft); color: var(--bq-neg); }

.bq-wbar-wrap { display: flex; align-items: center; gap: 7px; justify-content: flex-end; }
.bq-wbar-pct { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--bq-text-2); min-width: 36px; text-align: right; }
.bq-wbar-track { width: 42px; height: 4px; border-radius: 2px; background: var(--bq-surface-4); overflow: hidden; flex: none; }
.bq-wbar-fill { height: 100%; border-radius: 2px; background: var(--bq-text-3); }

.bq-expand-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 7px;
  border: 1px solid var(--bq-line);
  border-radius: var(--bq-r-xs);
  background: var(--bq-surface);
  color: var(--bq-text-3);
  font-family: var(--bq-font-mono) !important; font-size: 11px;
  cursor: pointer;
  transition: all var(--bq-t);
}
.bq-expand-btn:hover, .bq-expand-btn.open {
  border-color: var(--bq-accent-line); color: var(--bq-accent); background: var(--bq-accent-soft);
}
.bq-chevron { transition: transform 200ms var(--bq-ease); }
.bq-expand-btn.open .bq-chevron { transform: rotate(180deg); }
.bq-cbadge { font-variant-numeric: tabular-nums; }

/* Nested trade history */
/* The expanded trade drawer.
   Three flat greys stacked on each other read as noise, so the drawer is built
   as a distinct object instead: the cell recesses to the page grey, and a white
   card floats on it. The card edge is what separates the trades from the
   position rows above and below — no tint required. */
.bq-nil { color: var(--bq-text-4); }

/* ── FROZEN TICKER COLUMN ─────────────────────────────────────────────────
   `left: 0` on a sticky cell does not pin it immediately: at rest the ticker
   sits to the right of the Trades column, which is a positive offset, so it
   scrolls normally until its own left edge reaches 0 and only then freezes.
   Scrolling back releases it at exactly the same point and the Trades column
   reappears. That is the behaviour wanted, and it needs no JS. */
.bq-tbl th.bq-col-sticky,
.bq-tbl td.bq-col-sticky {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--bq-surface);
}
/* Header cells that also pin vertically have to outrank the body cells. */
.bq-tbl thead th.bq-col-sticky,
.bq-tbl-wrap:not(.bq-tbl-wrap--tall) .bq-tbl thead th.bq-col-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bq-surface-2);
}
.bq-tbl tbody tr:hover td.bq-col-sticky { background: var(--bq-surface-2); }
.bq-tbl tbody tr.is-open td.bq-col-sticky { background: var(--bq-surface); }

/* An edge only while the column is actually holding something back. */
.bq-tbl .bq-col-sticky::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; width: 14px;
  transform: translateX(100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms var(--bq-ease);
  background: linear-gradient(to right, rgba(16, 23, 36, 0.10), transparent);
}
.bq-tbl-wrap.is-xscrolled .bq-tbl .bq-col-sticky::after { opacity: 1; }
html[data-bq-theme="dark"] .bq-tbl .bq-col-sticky::after {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.45), transparent);
}

/* ── LIVE REFRESH ─────────────────────────────────────────────────────────*/

/* The flash is the only signal that a number changed under the reader, so it
   holds a beat at full strength before fading rather than fading immediately. */
@keyframes bq-flash-up {
  0%, 35% { background-color: var(--bq-pos-soft); }
  100%    { background-color: transparent; }
}
@keyframes bq-flash-down {
  0%, 35% { background-color: var(--bq-neg-soft); }
  100%    { background-color: transparent; }
}
.bq-flash-up   { animation: bq-flash-up 1100ms var(--bq-ease); }
.bq-flash-down { animation: bq-flash-down 1100ms var(--bq-ease); }

.bq-live { display: inline-flex; align-items: center; gap: 6px; }
.bq-live-text {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--bq-text-4);
}
.bq-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bq-pos);
  animation: bq-pulse 2.4s ease-in-out infinite;
}
@keyframes bq-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
  .bq-flash-up, .bq-flash-down { animation-duration: 1ms; }
  .bq-live-dot { animation: none; }
}

.bq-nested-row > td {
  padding: 0 !important;
  background: var(--bq-paper);
  border-bottom: 1px solid var(--bq-line) !important;
  box-shadow: inset 0 1px 0 var(--bq-line);
}
.bq-nested-inner { padding: 12px 18px 16px 34px; }

.bq-nested-panel {
  background: var(--bq-surface);
  border: 1px solid var(--bq-line);
  border-radius: var(--bq-r-sm);
  box-shadow: var(--bq-sh-1);
  overflow: hidden;
}
.bq-nested-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--bq-line);
}
.bq-nested-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--bq-text-3);
  margin: 0;
}
.bq-nested-count {
  font-size: 11px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--bq-text-4);
}
.bq-tbl-sm { width: 100%; border-collapse: collapse; }
.bq-tbl-sm th {
  padding: 7px 14px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--bq-text-4);
  background: var(--bq-surface-2);
  border-bottom: 1px solid var(--bq-line);
  text-align: left;
}
.bq-tbl-sm td {
  padding: 8px 14px; font-size: 12.5px;
  color: var(--bq-text-2);
  border-bottom: 1px solid var(--bq-line);
  font-variant-numeric: tabular-nums;
}
.bq-tbl-sm tbody tr:last-child td { border-bottom: none; }
.bq-tbl-sm tbody tr:hover td { background: var(--bq-surface-2); }
.bq-row-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ── PANELS / EMPTY STATES ────────────────────────────────────────────────── */

.bq-panel {
  width: 100%; max-width: 420px;
  padding: 34px 32px 30px;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line);
  border-radius: var(--bq-r-lg);
  box-shadow: var(--bq-sh-2);
  text-align: center;
}
.bq-panel-icon {
  width: 46px; height: 46px; margin: 0 auto 18px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--bq-accent-soft);
  color: var(--bq-accent);
}
.bq-panel-icon.danger { background: var(--bq-neg-soft); color: var(--bq-neg); }
.bq-panel-title {
  font-family: var(--bq-font-display) !important;
  font-size: 18px; font-weight: 620; letter-spacing: -0.024em;
  color: var(--bq-text);
  margin-bottom: 8px;
}
.bq-panel-desc {
  font-size: 13.5px; color: var(--bq-text-3);
  line-height: 1.55;
  margin-bottom: 22px;
}
.bq-panel-alert { border-color: var(--bq-neg-line); }

.bq-empty-state {
  padding: 56px 28px;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line);
  border-radius: var(--bq-r);
  box-shadow: var(--bq-sh-1);
  text-align: center;
}
.bq-empty-icon {
  width: 52px; height: 52px; margin: 0 auto 18px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--bq-surface-3);
  color: var(--bq-text-3);
}
.bq-empty-title {
  font-family: var(--bq-font-display) !important;
  font-size: 17px; font-weight: 620; letter-spacing: -0.024em;
  color: var(--bq-text);
  margin-bottom: 8px;
}
.bq-empty-desc {
  font-size: 13.5px; color: var(--bq-text-3);
  line-height: 1.6;
  max-width: 420px; margin: 0 auto 22px;
}
.bq-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── MODALS ───────────────────────────────────────────────────────────────── */

.bq-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  padding: 20px;
  background: var(--bq-overlay-bg);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity 180ms var(--bq-ease), visibility 180ms var(--bq-ease);
}
.bq-overlay.active { opacity: 1; visibility: visible; }
.bq-modal {
  width: 100%; max-width: 480px;
  max-height: min(88vh, 820px);
  display: flex; flex-direction: column;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line);
  border-radius: var(--bq-r-lg);
  box-shadow: var(--bq-sh-3);
  transform: translateY(12px) scale(0.985);
  opacity: 0;
  transition: transform 220ms var(--bq-ease), opacity 180ms var(--bq-ease);
}
.bq-overlay.active .bq-modal { transform: none; opacity: 1; }
.bq-modal-wide { max-width: 820px; }

.bq-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--bq-line);
}
.bq-modal-title {
  display: block;
  font-family: var(--bq-font-display) !important;
  font-size: 16px; font-weight: 620; letter-spacing: -0.022em;
  color: var(--bq-text);
}
.bq-modal-sub { font-size: 12.5px; color: var(--bq-text-3); margin-top: 3px; }
.bq-modal-x {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: none;
  border: 1px solid transparent;
  border-radius: var(--bq-r-sm);
  background: transparent;
  color: var(--bq-text-4);
  font-size: 17px; line-height: 1;
  cursor: pointer;
  transition: background var(--bq-t), color var(--bq-t);
}
.bq-modal-x:hover { background: var(--bq-surface-3); color: var(--bq-text); }
.bq-modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.bq-modal-foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--bq-line);
  background: var(--bq-surface-2);
  border-radius: 0 0 var(--bq-r-lg) var(--bq-r-lg);
}
.bq-modal-foot.spread { justify-content: space-between; }
.bq-modal-foot-group { display: flex; gap: 8px; }

/* ── TICKER TYPEAHEAD ─────────────────────────────────────────────────────── */

.bq-ticker-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: 40;
  max-height: 264px; overflow-y: auto;
  padding: 4px;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line-strong);
  border-radius: var(--bq-r);
  box-shadow: var(--bq-sh-2);
  display: none;
}
.bq-ticker-suggest.open { display: block; }
.bq-ts-group-label {
  padding: 8px 9px 5px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--bq-text-4);
}
.bq-ts-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px;
  border-radius: var(--bq-r-sm);
  cursor: pointer;
}
.bq-ts-item:hover, .bq-ts-item.is-active { background: var(--bq-accent-soft); }
.bq-ts-ticker {
  font-family: var(--bq-font-mono) !important; font-size: 12px; font-weight: 600;
  color: var(--bq-text); min-width: 52px; flex: none;
}
.bq-ts-name {
  flex: 1; min-width: 0;
  font-size: 12.5px; color: var(--bq-text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bq-ts-empty, .bq-ts-loading {
  padding: 18px 10px; text-align: center;
  font-size: 12.5px; color: var(--bq-text-4);
}

/* ── CHARTS ───────────────────────────────────────────────────────────────── */

.bq-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bq-chart-full { grid-column: 1 / -1; }
.bq-chart-card {
  background: var(--bq-surface);
  border: 1px solid var(--bq-line);
  border-radius: var(--bq-r);
  box-shadow: var(--bq-sh-1);
  overflow: hidden;
}
.bq-chart-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 13px 16px;
  border-bottom: 1px solid var(--bq-line);
}
.bq-chart-title {
  font-family: var(--bq-font-display) !important;
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.018em;
  color: var(--bq-text);
}
.bq-chart-meta { font-size: 12px; color: var(--bq-text-4); }
.bq-chart-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bq-chart-body { padding: 16px; }
.bq-chart-wrap { position: relative; width: 100%; height: 236px; }
.bq-chart-wrap-lg { height: 320px; }
.bq-chart-wrap canvas { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
.bq-canvas-slot { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 180ms var(--bq-ease); }
.bq-canvas-slot.active { opacity: 1; pointer-events: auto; }

.bq-legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--bq-text-3); }
.bq-legend-line { width: 16px; height: 2px; border-radius: 2px; display: inline-block; background: var(--bq-accent); }
.bq-legend-dash { width: 16px; border-top: 2px dashed var(--bq-text-4); display: inline-block; }
.bq-chart-note { padding: 34px 16px; text-align: center; font-size: 13px; color: var(--bq-text-4); }

/* ── METRIC CARDS (trades) ────────────────────────────────────────────────── */

.bq-metrics-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bq-metric-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--bq-surface);
  border: 1px solid var(--bq-line);
  border-radius: var(--bq-r);
  box-shadow: var(--bq-sh-1);
}
.bq-metric-icon {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
}
.bq-metric-icon.buy { background: var(--bq-pos-soft); color: var(--bq-pos); }
.bq-metric-icon.sell { background: var(--bq-neg-soft); color: var(--bq-neg); }
.bq-metric-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--bq-text-4); margin-bottom: 5px;
}
.bq-metric-val {
  font-family: var(--bq-font-display) !important;
  font-size: 21px; font-weight: 620; letter-spacing: -0.028em;
  font-variant-numeric: tabular-nums;
  color: var(--bq-text); line-height: 1.05;
}
.bq-metric-badge {
  display: inline-block; margin-top: 7px;
  padding: 2px 8px; border-radius: var(--bq-r-full);
  font-size: 11px; font-weight: 600;
}

/* ── IMPORT ───────────────────────────────────────────────────────────────── */

.bq-dropzone {
  display: grid; place-items: center;
  padding: 38px 20px;
  border: 1.5px dashed var(--bq-line-strong);
  border-radius: var(--bq-r);
  background: var(--bq-surface-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--bq-t), background var(--bq-t);
}
.bq-dropzone:hover { border-color: var(--bq-text-4); }
.bq-dropzone.drag-over { border-color: var(--bq-accent); background: var(--bq-accent-soft); }
.bq-dropzone-icon {
  width: 42px; height: 42px; margin-bottom: 12px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--bq-surface-3);
  color: var(--bq-text-3);
}
.bq-dropzone-title { font-size: 13.5px; font-weight: 600; color: var(--bq-text); margin-bottom: 4px; }
.bq-dropzone-sub { font-size: 12px; color: var(--bq-text-4); }

.bq-import-info {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid var(--bq-line);
  border-radius: var(--bq-r-sm);
  background: var(--bq-surface-2);
  font-size: 12.5px; color: var(--bq-text-2);
}
.bq-import-ok { color: var(--bq-pos); font-weight: 600; }
.bq-import-bad { color: var(--bq-neg); font-weight: 600; }
.bq-preview-scroll {
  max-height: 320px; overflow: auto;
  border: 1px solid var(--bq-line);
  border-radius: var(--bq-r-sm);
}
.bq-import-error-row > td { background: var(--bq-neg-soft) !important; }
.bq-import-error-row > td:first-child { box-shadow: inset 3px 0 0 var(--bq-neg); }

.bq-alert {
  padding: 10px 12px; margin-bottom: 14px;
  border-radius: var(--bq-r-sm);
  font-size: 12.5px;
  border: 1px solid transparent;
}
.bq-alert-error { background: var(--bq-neg-soft); border-color: var(--bq-neg-line); color: var(--bq-neg); }
.bq-alert-info { background: var(--bq-accent-soft); border-color: var(--bq-accent-line); color: var(--bq-accent); }

/* ── TOASTS ───────────────────────────────────────────────────────────────── */

.bq-toast-wrap {
  position: fixed; right: 20px; bottom: 20px; z-index: 10001;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.bq-toast {
  display: flex; align-items: center; gap: 10px;
  min-width: 260px; max-width: 380px;
  padding: 12px 15px;
  border-radius: var(--bq-r);
  border: 1px solid var(--bq-line);
  background: var(--bq-surface);
  box-shadow: var(--bq-sh-2);
  color: var(--bq-text);
  font-size: 13px; font-weight: 500;
  pointer-events: auto;
  transform: translateX(calc(100% + 24px));
  transition: transform 280ms var(--bq-ease), opacity 200ms var(--bq-ease);
}
.bq-toast.show { transform: none; }
.bq-toast::before {
  content: ''; width: 3px; align-self: stretch;
  border-radius: 3px; background: var(--bq-accent); flex: none;
}
.bq-toast.success::before { background: var(--bq-pos); }
.bq-toast.error::before { background: var(--bq-neg); }
.bq-toast.error { color: var(--bq-text); }

/* ── SKELETON ─────────────────────────────────────────────────────────────── */

.bq-skel {
  display: inline-block; border-radius: var(--bq-r-xs);
  background: linear-gradient(90deg, var(--bq-surface-3) 25%, var(--bq-surface-4) 50%, var(--bq-surface-3) 75%);
  background-size: 300% 100%;
  animation: bq-shimmer 1.4s ease-in-out infinite;
}
@keyframes bq-shimmer { from { background-position: 200% 0; } to { background-position: -100% 0; } }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */

@media (max-width: 1280px) {
  .bq-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bq-kpi:nth-child(3) { border-right: none; }
  .bq-kpi:nth-child(-n+3) { border-bottom: 1px solid var(--bq-line); }
}

@media (max-width: 1080px) {
  .bq-chart-grid { grid-template-columns: 1fr; }
  .bq-chart-full { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --bq-gut: 16px; }
  .bq-app { grid-template-columns: minmax(0, 1fr); }
  .bq-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100vh;
    width: 280px; z-index: 9998;
    transform: translateX(-101%);
    transition: transform 240ms var(--bq-ease);
    box-shadow: var(--bq-sh-3);
  }
  .bq-app.is-nav-open .bq-sidebar { transform: none; }
  .bq-app.is-nav-open .bq-scrim { opacity: 1; pointer-events: auto; }
  .bq-app[data-collapsed="1"] { --bq-sidebar-w: 280px; }
  .bq-app[data-collapsed="1"] .bq-nav-text,
  .bq-app[data-collapsed="1"] .bq-switcher,
  .bq-app[data-collapsed="1"] .bq-pv { display: revert; }
  .bq-app[data-collapsed="1"] .bq-nav-link { justify-content: flex-start; padding-inline: 10px; }
  .bq-app[data-collapsed="1"] .bq-sidebar-tools { flex-direction: row; }
  .bq-topbar .bq-nav-open { display: inline-grid; }
  .bq-sidebar-tools .bq-collapse-btn { display: none; }
  .bq-topbar-actions .bq-btn-label { display: none; }
  .bq-topbar-actions .bq-btn { padding: 0 10px; }
  .bq-card-tools .bq-search { width: 100%; }
  .bq-card-head { align-items: stretch; }
}

@media (max-width: 640px) {
  .bq-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bq-kpi { padding: 14px 16px; border-bottom: 1px solid var(--bq-line); }
  .bq-kpi:nth-child(even) { border-right: none; }
  .bq-kpi-val { font-size: 20px; }
  .bq-metrics-2col { grid-template-columns: 1fr; }
  .bq-form-grid { grid-template-columns: 1fr; }
  .bq-modal-foot { flex-direction: column-reverse; align-items: stretch; }
  .bq-modal-foot .bq-btn, .bq-modal-foot-group { width: 100%; }
  .bq-modal-foot-group .bq-btn { flex: 1; }
  .bq-toast-wrap { left: 16px; right: 16px; bottom: 16px; }
  .bq-toast { max-width: none; }
}

/* ── MOTION / PRINT ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .bq-app *, .bq-overlay *, .bq-toast {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .bq-sidebar, .bq-topbar-actions, .bq-card-tools, .bq-scrim, .bq-toast-wrap { display: none !important; }
  .bq-app { grid-template-columns: 1fr; }
  .bq-card, .bq-chart-card { box-shadow: none; break-inside: avoid; }
}