/* ──────────────────────────────────────────────────────────────────
   Firstock + AliceBlue Unified P&L — design system
   Aesthetic: trading-terminal control plane. OKLCH palette, cyan
   primary, distinct broker accent per panel, dark/light/system theme.
   ────────────────────────────────────────────────────────────────── */

:root {
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-norm: 280ms;
  --dur-enter: 320ms;
  --dur-exit: 200ms;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* Broker accent overrides — used inside .broker-firstock / .broker-aliceblue */
  --broker-firstock: oklch(78% 0.13 200);     /* cyan */
  --broker-firstock-dim: oklch(60% 0.11 200);
  --broker-aliceblue: oklch(76% 0.16 70);     /* amber-gold */
  --broker-aliceblue-dim: oklch(58% 0.14 60);
}

/* ── Dark theme (default) ─────────────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg-0:        oklch(13% 0.012 250);
  --bg-1:        oklch(16% 0.012 250);
  --bg-2:        oklch(19% 0.014 250);
  --bg-elev:     oklch(22% 0.016 250);
  --bg-glass:    color-mix(in oklab, oklch(22% 0.016 250) 70%, transparent);

  --border:      oklch(28% 0.018 250);
  --border-soft: oklch(24% 0.016 250);
  --border-hot:  oklch(38% 0.04 200);

  --fg:          oklch(96% 0.005 250);
  --fg-mute:     oklch(72% 0.01 250);
  --fg-faint:    oklch(54% 0.012 250);

  --accent:      var(--broker-firstock);
  --accent-dim:  var(--broker-firstock-dim);
  --accent-bg:   color-mix(in oklab, var(--accent) 14%, transparent);
  --accent-ink:  oklch(13% 0.012 250);

  --ok:          oklch(76% 0.16 155);
  --ok-bg:       color-mix(in oklab, oklch(76% 0.16 155) 14%, transparent);
  --warn:        oklch(80% 0.16 75);
  --warn-bg:     color-mix(in oklab, oklch(80% 0.16 75) 14%, transparent);
  --bad:         oklch(70% 0.18 25);
  --bad-bg:      color-mix(in oklab, oklch(70% 0.18 25) 14%, transparent);

  --shadow-card: 0 30px 60px -40px rgba(0,0,0,0.6);
  --shadow-pop:  0 12px 30px -12px rgba(0,0,0,0.5);
  --bg-aurora-1: color-mix(in oklab, var(--broker-firstock) 12%, transparent);
  --bg-aurora-2: color-mix(in oklab, var(--broker-aliceblue) 10%, transparent);
}

/* ── Light theme ──────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-0:        oklch(98% 0.003 250);
  --bg-1:        oklch(100% 0 0);
  --bg-2:        oklch(97% 0.004 250);
  --bg-elev:     oklch(95% 0.005 250);
  --bg-glass:    color-mix(in oklab, oklch(100% 0 0) 75%, transparent);

  --border:      oklch(86% 0.008 250);
  --border-soft: oklch(91% 0.006 250);
  --border-hot:  oklch(70% 0.10 200);

  --fg:          oklch(20% 0.012 250);
  --fg-mute:     oklch(38% 0.012 250);
  --fg-faint:    oklch(54% 0.012 250);

  --broker-firstock: oklch(52% 0.13 200);
  --broker-firstock-dim: oklch(42% 0.13 200);
  --broker-aliceblue: oklch(52% 0.16 60);
  --broker-aliceblue-dim: oklch(42% 0.14 55);
  --accent:      var(--broker-firstock);
  --accent-dim:  var(--broker-firstock-dim);
  --accent-bg:   color-mix(in oklab, var(--accent) 12%, transparent);
  --accent-ink:  oklch(99% 0 0);

  --ok:          oklch(48% 0.16 155);
  --ok-bg:       color-mix(in oklab, oklch(48% 0.16 155) 12%, transparent);
  --warn:        oklch(58% 0.16 65);
  --warn-bg:     color-mix(in oklab, oklch(58% 0.16 65) 14%, transparent);
  --bad:         oklch(54% 0.20 25);
  --bad-bg:      color-mix(in oklab, oklch(54% 0.20 25) 12%, transparent);

  --shadow-card: 0 20px 40px -28px rgba(15,23,42,0.18);
  --shadow-pop:  0 12px 30px -12px rgba(15,23,42,0.20);
  --bg-aurora-1: color-mix(in oklab, var(--broker-firstock) 7%, transparent);
  --bg-aurora-2: color-mix(in oklab, var(--broker-aliceblue) 6%, transparent);
}

/* Broker-scoped accent swap: when inside a .broker-* container, accent variables
   point to that broker's color. Keeps every interactive element on-brand. */
.broker-firstock {
  --accent:     var(--broker-firstock);
  --accent-dim: var(--broker-firstock-dim);
  --accent-bg:  color-mix(in oklab, var(--accent) 14%, transparent);
}
.broker-aliceblue {
  --accent:     var(--broker-aliceblue);
  --accent-dim: var(--broker-aliceblue-dim);
  --accent-bg:  color-mix(in oklab, var(--accent) 14%, transparent);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* ── Page-level fade transitions for the dashboard gate + main app ─── */
/* We toggle visibility via the [data-screen] attribute on the body.
   data-screen="gate" → gate visible, app hidden
   data-screen="app"  → app visible, gate hidden
   The fading uses a wrapper transition on opacity + transform. */
.dash-gate,
.dash-app {
  transition: opacity 360ms var(--ease), transform 360ms var(--ease);
  will-change: opacity, transform;
}
body[data-screen="loading"] .dash-gate,
body[data-screen="loading"] .dash-app { opacity: 0; pointer-events: none; }
body[data-screen="gate"] .dash-gate { opacity: 1; transform: translateY(0); }
body[data-screen="gate"] .dash-app  { opacity: 0; transform: translateY(6px); pointer-events: none; }
body[data-screen="app"]  .dash-app  { opacity: 1; transform: translateY(0); }
body[data-screen="app"]  .dash-gate { opacity: 0; transform: translateY(-4px); pointer-events: none; }

body {
  min-height: 100vh;
  background:
    radial-gradient(1100px 600px at 80% -10%, var(--bg-aurora-1), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--bg-aurora-2), transparent 60%),
    var(--bg-0);
  color: var(--fg);
  font-family: var(--font-sans);
  font-feature-settings: "cv02", "cv03", "cv04", "ss01", "tnum";
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-norm) var(--ease), color var(--dur-norm) var(--ease);
}

/* Respect reduced motion across the entire UI. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Dashboard access wall (gate) ─────────────────────────────── */
.dash-gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 32px clamp(16px, 4vw, 56px);
  z-index: 50;
}
.dash-gate-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 500px at 78% -10%, var(--bg-aurora-1), transparent 60%),
    radial-gradient(700px 450px at -10% 110%, var(--bg-aurora-2), transparent 60%),
    var(--bg-0);
  z-index: 0;
}
.dash-gate-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  padding: 36px 36px 32px;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  box-shadow:
    0 30px 60px -40px rgba(0,0,0,0.6),
    0 8px 30px -16px color-mix(in oklab, var(--accent) 40%, transparent);
  animation: gateCardEnter 480ms var(--ease-spring) 80ms backwards;
}
@keyframes gateCardEnter {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dash-gate-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-soft);
}
.dash-gate-brand h1 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.dash-gate-brand .brand-sub {
  margin: 2px 0 0;
  font-size: 0.76rem;
  color: var(--fg-faint);
}
.dash-gate-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dash-gate-err {
  margin: 0;
  padding: 10px 12px;
  background: var(--bad-bg);
  border: 1px solid color-mix(in oklab, var(--bad) 40%, transparent);
  border-radius: var(--r-sm);
  color: var(--bad);
  font-size: 0.82rem;
  animation: errShake 320ms var(--ease);
}
@keyframes errShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}
.dash-gate-submit {
  margin-top: 4px;
  width: 100%;
  justify-content: center;
  padding: 14px 22px;
  font-size: 0.96rem;
}

/* ── Help button in topbar ─────────────────────────────────── */
.help-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg-mute);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.help-btn:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--accent-bg);
  transform: translateY(-1px);
}
.help-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.help-btn svg { width: 16px; height: 16px; }

/* ── Help modal ───────────────────────────────────────────── */
.help-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
}
.help-modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--bg-0) 70%, transparent);
  backdrop-filter: blur(8px);
  animation: helpBackdropEnter var(--dur-fast) var(--ease);
}
@keyframes helpBackdropEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.help-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  max-height: min(85vh, 800px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55);
  overflow: hidden;
  animation: helpCardEnter 360ms var(--ease-spring);
}
@keyframes helpCardEnter {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.help-modal.is-leaving .help-modal-card,
.help-modal.is-leaving .help-modal-backdrop {
  animation: helpCardLeave 200ms var(--ease) forwards;
}
@keyframes helpCardLeave {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(-6px) scale(0.995); }
}
.help-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 24px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border-soft);
}
.help-modal-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.help-close-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--fg-mute);
  cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.help-close-btn:hover { color: var(--fg); background: var(--bg-2); }
.help-close-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.help-close-btn svg { width: 16px; height: 16px; }
.help-modal-body {
  overflow-y: auto;
  padding: 24px 28px 28px;
  color: var(--fg);
  line-height: 1.55;
}
.help-section {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-soft);
}
.help-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.help-section.help-section-muted {
  background: color-mix(in oklab, var(--accent) 4%, transparent);
  margin: 22px -28px -28px;
  padding: 18px 28px 24px;
  border-bottom: 0;
}
.help-section h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--fg);
}
.help-num {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  border: 1px solid var(--accent-dim);
}
.help-section p,
.help-section li {
  margin: 6px 0;
  font-size: 0.88rem;
  color: var(--fg-mute);
}
.help-section ol,
.help-section ul {
  margin: 8px 0 4px;
  padding-left: 22px;
}
.help-section li { margin: 4px 0; }
.help-section li strong,
.help-section p strong { color: var(--fg); font-weight: 600; }
.help-section code {
  background: var(--bg-elev);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  border: 1px solid var(--border-soft);
}
.help-section kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--bg-elev);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.78em;
}
.help-tip {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-elev);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  font-size: 0.84rem;
  color: var(--fg-mute);
}

/* ── Lock button in topbar ─────────────────────────────────── */
.lock-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg-mute);
  font: 500 0.78rem var(--font-sans);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.lock-btn:hover { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 40%, transparent); background: var(--bad-bg); }
.lock-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lock-btn svg { width: 13px; height: 13px; }

/* ── Topbar ──────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px clamp(20px, 4vw, 56px);
  border-bottom: 1px solid var(--border-soft);
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--broker-firstock), var(--broker-aliceblue));
  color: oklch(13% 0.012 250);
  box-shadow: 0 4px 18px -4px color-mix(in oklab, var(--broker-firstock) 50%, transparent);
}
.brand-mark svg { width: 22px; height: 22px; }
.brand h1 { margin: 0; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; }
.brand-sub { margin: 2px 0 0; font-size: 0.78rem; color: var(--fg-faint); }
.topbar-end { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

.theme-toggle {
  display: inline-flex; align-items: center;
  padding: 3px;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
}
.theme-btn {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: transparent; border: 0;
  border-radius: 999px;
  color: var(--fg-faint);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.theme-btn svg { width: 15px; height: 15px; }
.theme-btn:hover { color: var(--fg); }
.theme-btn[aria-checked="true"] {
  background: var(--accent-bg);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-dim);
}
.theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-glass);
  color: var(--fg-mute);
}
.status-pill .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--warn) 20%, transparent);
}
.status-pill[data-state="ok"] .dot {
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 20%, transparent);
}
.status-pill[data-state="bad"] .dot {
  background: var(--bad);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--bad) 20%, transparent);
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
  font-size: 0.78rem;
  color: var(--fg-mute);
}
.user-chip .who { font-family: var(--font-mono); color: var(--accent); font-weight: 500; }
.user-chip button {
  background: transparent;
  border: 0;
  color: var(--fg-faint);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 0.74rem;
}
.user-chip button:hover { color: var(--bad); }

/* ── Layout ──────────────────────────────────────────────────── */
main {
  max-width: 1220px;
  margin: 0 auto;
  padding: 36px clamp(20px, 4vw, 56px) 80px;
}

/* ── Broker tabs (top-level) ─────────────────────────────────── */
.broker-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}
@media (max-width: 820px) {
  .broker-tabs { grid-template-columns: 1fr; }
}

.broker-tab {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  padding: 18px 22px;
  text-align: left;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  color: var(--fg-mute);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.broker-tab:hover {
  background: var(--bg-2);
  border-color: var(--border);
  color: var(--fg);
}
.broker-tab.active {
  background: linear-gradient(150deg, var(--bg-elev), var(--bg-2));
  border-color: var(--border-hot);
  color: var(--fg);
  box-shadow: 0 8px 30px -16px color-mix(in oklab, var(--accent) 60%, transparent);
}
.broker-tab.active::after {
  content: "";
  position: absolute;
  inset: auto 22px 12px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
}
.broker-tab .tab-num {
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--fg-faint);
}
.broker-tab.active .tab-num { color: var(--accent); }
.broker-tab .tab-label { font-weight: 600; font-size: 1rem; letter-spacing: -0.015em; }
.broker-tab .tab-sub { font-size: 0.8rem; color: var(--fg-faint); }
.broker-tab .tab-status {
  grid-row: 1 / span 2;
  align-self: center;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--fg-faint);
}
.broker-tab .tab-status[data-state="ok"] {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: color-mix(in oklab, var(--ok) 40%, transparent);
}

.broker-firstock .broker-tab.active .tab-num,
.broker-firstock .tab-status[data-state="ok"] { /* nothing extra; accent handles it */ }

/* ── Sub-tabs (Single / Batch inside each broker panel) ─────── */
.subtabs {
  display: inline-flex;
  padding: 4px;
  margin-bottom: 22px;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
}
.subtab {
  padding: 8px 18px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--fg-mute);
  font: 500 0.86rem var(--font-sans);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.subtab:hover { color: var(--fg); }
.subtab.active {
  background: var(--accent-bg);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-dim);
}

/* ── Panel ───────────────────────────────────────────────────── */
.panel {
  background:
    linear-gradient(180deg, var(--bg-1), var(--bg-0)),
    var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: 32px clamp(22px, 4vw, 44px);
  box-shadow: var(--shadow-card);
  animation: panelEnter var(--dur-enter) var(--ease);
}
/* Subtle cross-fade when sub-tabs (Single / Batch) swap inside a broker panel. */
.subpanel {
  animation: subpanelEnter var(--dur-enter) var(--ease);
}
@keyframes subpanelEnter {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes panelEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.panel-head {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.panel-head h2 {
  margin: 0 0 6px;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.panel-head p {
  margin: 0;
  max-width: 64ch;
  color: var(--fg-mute);
  font-size: 0.9rem;
  line-height: 1.55;
}
.panel-head code {
  background: var(--bg-elev);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}

/* ── Form ────────────────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}
.form-grid .field { grid-column: span 1; }
.form-grid .row-toggle,
.form-grid .submit-row,
.form-grid .field.wide { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field-label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.muted { color: var(--fg-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
.muted-sm { color: var(--fg-faint); font-size: 0.78rem; }
.hint { font-size: 0.74rem; color: var(--fg-faint); }

input[type="text"],
input[type="password"],
input[type="date"],
select {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.94rem;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  min-height: 44px;  /* touch-target minimum */
}
select { font-family: var(--font-sans); cursor: pointer; }
input:focus, select:focus {
  outline: none;
  border-color: var(--accent-dim);
  background: var(--bg-2);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
input[type="date"] { color-scheme: dark light; }

.password-wrap { position: relative; }
.password-wrap input { padding-right: 44px; }
.reveal-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  color: var(--fg-faint);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.reveal-btn:hover { color: var(--fg); background: var(--bg-elev); }
.reveal-btn svg { width: 16px; height: 16px; }
.reveal-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); border-color: var(--border-hot); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn .btn-icon { width: 16px; height: 16px; }
.btn.primary {
  background: linear-gradient(150deg, var(--accent), var(--accent-dim));
  border-color: transparent;
  color: oklch(13% 0.012 250);
  font-weight: 600;
  box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--accent) 60%, transparent);
}
[data-theme="light"] .btn.primary { color: oklch(99% 0 0); }
.btn.primary:hover { box-shadow: 0 12px 32px -10px color-mix(in oklab, var(--accent) 70%, transparent); }
.btn.ghost { background: transparent; }
.btn.small { padding: 8px 14px; font-size: 0.84rem; min-height: 36px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.submit-row { display: flex; justify-content: flex-end; margin-top: 8px; }

.btn.is-loading { pointer-events: none; position: relative; color: transparent !important; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px; height: 18px;
  border: 2px solid color-mix(in oklab, oklch(13% 0.012 250) 40%, transparent);
  border-top-color: oklch(13% 0.012 250);
  border-radius: 999px;
  animation: spin 0.7s linear infinite;
}
[data-theme="light"] .btn.is-loading.primary::after {
  border-color: color-mix(in oklab, oklch(99% 0 0) 40%, transparent);
  border-top-color: oklch(99% 0 0);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── KPI cards (per-broker, populated by complete events) ──── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 22px;
  animation: slideUp var(--dur-enter) var(--ease);
}
@media (max-width: 720px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
.kpi-num {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.kpi-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
}
.kpi.success .kpi-num { color: var(--ok); }
.kpi.warn .kpi-num    { color: var(--warn); }
.kpi.bad .kpi-num     { color: var(--bad); }

/* ── Result card (preview) ─────────────────────────────────── */
.result-card {
  margin-top: 22px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  animation: slideUp var(--dur-enter) var(--ease);
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.result-head {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border-soft);
}
.result-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--fg-mute);
}
.result-pill[data-state="ok"] {
  background: var(--ok-bg);
  border-color: color-mix(in oklab, var(--ok) 40%, transparent);
  color: var(--ok);
}
.result-time {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--fg-faint);
  font-family: var(--font-mono);
}
.preview-body {
  margin: 0;
  padding: 14px 18px;
  max-height: 360px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--fg-mute);
  background: var(--bg-1);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Dropzone ──────────────────────────────────────────────── */
.dropzone {
  border: 1.5px dashed var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-1);
  padding: 32px 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.dropzone:hover, .dropzone.is-drag {
  border-color: var(--accent-dim);
  background: color-mix(in oklab, var(--accent) 4%, var(--bg-1));
}
.dz-inner svg { width: 32px; height: 32px; color: var(--accent); margin-bottom: 10px; }
.dz-title { margin: 0; font-size: 0.98rem; font-weight: 500; color: var(--fg); }
.dz-sub { margin: 6px 0 0; font-size: 0.82rem; color: var(--fg-faint); }
.dz-file {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--accent);
  min-height: 1em;
}
.link {
  color: var(--accent);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  font: inherit;
}
.link:hover { color: var(--fg); }

/* ── Clients list ─────────────────────────────────────────── */
.clients-wrap {
  margin-top: 20px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--bg-1);
}
.clients-wrap table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.clients-wrap thead th {
  position: sticky;
  top: 0;
  background: var(--bg-elev);
  padding: 10px 14px;
  text-align: left;
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-faint);
  border-bottom: 1px solid var(--border);
}
.clients-wrap tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--fg);
  font-family: var(--font-mono);
  vertical-align: top;
}
.clients-wrap tbody tr:last-child td { border-bottom: 0; }

/* ── Live log panel ───────────────────────────────────────── */
.log-panel {
  margin-top: 26px;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.log-panel summary {
  list-style: none;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: var(--bg-elev);
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--fg-mute);
  letter-spacing: 0.02em;
}
.log-panel summary::-webkit-details-marker { display: none; }
.log-panel summary::before {
  content: "▸";
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease);
}
.log-panel[open] summary::before { transform: rotate(90deg); }
.log-title { font-weight: 500; color: var(--fg); }
.log-count-pill {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--fg-faint);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.log-count-pill .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 999px;
  background: var(--fg-faint);
}
.log-count-pill[data-broker="firstock"] .dot { background: var(--broker-firstock); }
.log-count-pill[data-broker="aliceblue"] .dot { background: var(--broker-aliceblue); }

.log-status {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--fg-faint);
}
.log-status[data-state="streaming"] {
  background: var(--accent-bg);
  border-color: var(--accent-dim);
  color: var(--accent);
}
.log-status[data-state="ok"]  { background: var(--ok-bg);  border-color: color-mix(in oklab, var(--ok) 40%, transparent);  color: var(--ok); }
.log-status[data-state="bad"] { background: var(--bad-bg); border-color: color-mix(in oklab, var(--bad) 40%, transparent); color: var(--bad); }

.log-table-wrap {
  max-height: 320px;
  overflow: auto;
}
.log-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.77rem;
}
.log-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-elev);
  padding: 8px 14px;
  text-align: left;
  font-weight: 500;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-faint);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
}
.log-table tbody td {
  padding: 7px 14px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--fg-mute);
  vertical-align: top;
}
.log-table tbody tr:last-child td { border-bottom: 0; }
.log-table tbody tr.row-fresh { animation: rowFresh 1.4s var(--ease); }
@keyframes rowFresh {
  0%   { background: color-mix(in oklab, var(--accent) 14%, transparent); }
  100% { background: transparent; }
}
.log-time { color: var(--fg-faint); white-space: nowrap; width: 88px; }

.log-level {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-sans);
}
.log-level[data-level="info"]  { background: var(--bg-2);    color: var(--fg-mute); }
.log-level[data-level="ok"]    { background: var(--ok-bg);   color: var(--ok); }
.log-level[data-level="warn"]  { background: var(--warn-bg); color: var(--warn); }
.log-level[data-level="error"] { background: var(--bad-bg);  color: var(--bad); }

.log-msg { color: var(--fg); word-break: break-word; }
.log-empty {
  padding: 22px; text-align: center; color: var(--fg-faint);
  font-style: italic; font-family: var(--font-sans);
}

/* ── Toasts ───────────────────────────────────────────────── */
.toast-stack {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: 12px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: 0.86rem;
  box-shadow: var(--shadow-pop);
  animation: toastIn var(--dur-enter) var(--ease-spring);
  max-width: 360px;
}
.toast[data-kind="ok"]  { border-color: color-mix(in oklab, var(--ok)  40%, transparent); }
.toast[data-kind="bad"] { border-color: color-mix(in oklab, var(--bad) 40%, transparent); }
.toast[data-broker="firstock"]  { box-shadow: 0 12px 30px -12px color-mix(in oklab, var(--broker-firstock) 30%, transparent); }
.toast[data-broker="aliceblue"] { box-shadow: 0 12px 30px -12px color-mix(in oklab, var(--broker-aliceblue) 30%, transparent); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Batch summary table (rendered inside log panel after batch complete) ── */
.batch-summary-table-host {
  border-top: 1px solid var(--border-soft);
  background: var(--bg-2);
  animation: slideUp var(--dur-enter) var(--ease);
}
.batch-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border-soft);
}
.bs-title {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg);
}
.bs-count {
  font-size: 0.74rem;
  font-family: var(--font-mono);
  color: var(--fg-faint);
  letter-spacing: 0.04em;
}
.batch-summary-wrap {
  max-height: 360px;
  overflow: auto;
}
.batch-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.batch-summary-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-elev);
  padding: 8px 12px;
  text-align: left;
  font-weight: 500;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-faint);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
}
.batch-summary-table thead th.num,
.batch-summary-table tbody td.num { text-align: right; }
.batch-summary-table tbody td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--fg);
  vertical-align: top;
}
.batch-summary-table tbody td.dim { color: var(--fg-faint); }
.batch-summary-table tbody tr:last-child td { border-bottom: 0; }
.batch-summary-table tbody tr.row-failed td { color: var(--fg-faint); }
.batch-summary-table tbody tr.row-failed .err-cell {
  color: var(--bad);
  font-family: var(--font-sans);
  font-size: 0.72rem;
}
.batch-summary-table tbody tr.row-total td {
  background: color-mix(in oklab, var(--accent) 6%, transparent);
  border-top: 1px solid var(--accent-dim);
  font-weight: 600;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  font-family: var(--font-sans);
}
.batch-summary-table tbody tr.row-total td.num {
  font-family: var(--font-mono);
  font-size: 0.84rem;
}
.batch-summary-table .pnl-pos { color: var(--ok); }
.batch-summary-table .pnl-neg { color: var(--bad); }

/* ── Privacy footer ───────────────────────────────────────── */
.privacy-note {
  margin-top: 26px;
  padding: 14px 18px;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  font-size: 0.78rem;
  color: var(--fg-mute);
  display: flex;
  align-items: center;
  gap: 10px;
}
.privacy-note svg { width: 16px; height: 16px; color: var(--ok); flex: 0 0 16px; }

/* ── Scrollbar polish ─────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-hot); background-clip: padding-box; border: 2px solid transparent; }