/* ============================================================================
   Bank Clerk 2.0 — premium glass. House gold on navy; the reference screenshot
   is blue and only its LAYOUT is replicated.

   The "expensive" feel here comes from four things used consistently, not from
   piling on effects:
     1. real depth   — frosted translucency + layered shadows, never flat fills
     2. one light    — a single top-left source; every highlight/shadow agrees
     3. gradient hairlines rather than solid 1px borders
     4. restraint    — gold is the accent, not the surface
   ============================================================================ */

.bc2-workspace { flex-direction: column; gap: 13px; }

.bc2-shell {
  --bc2-gold: #ffd166;
  --bc2-gold-deep: #d29830;
  --bc2-ink: #e9f0ff;
  --bc2-muted: rgba(186, 203, 238, .70);
  --bc2-line: rgba(140, 168, 226, .16);
  display: flex;
  flex-direction: column;
  gap: 13px;
  position: relative;
}

/* A single soft gold bloom behind the whole workspace gives every glass panel
   something to refract, which is what stops frosted surfaces looking grey. */
.bc2-shell::before {
  content: '';
  position: absolute;
  inset: -40px -20px auto;
  height: 260px;
  background:
    radial-gradient(60% 100% at 22% 0%, rgba(255, 209, 102, .16), transparent 70%),
    radial-gradient(50% 90% at 85% 10%, rgba(120, 150, 220, .12), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
}
.bc2-shell > * { position: relative; z-index: 1; }

/* ── the glass panel ────────────────────────────────────────────────────── */
.bc2-card {
  position: relative;
  background: linear-gradient(155deg, rgba(28, 39, 66, .68), rgba(12, 18, 34, .78));
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 14px 15px;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .40),
    0 2px 6px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 -1px 0 rgba(0, 0, 0, .22);
}
/* Gradient hairline: brighter where the light lands, fading round the bottom. */
.bc2-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
    rgba(255, 209, 102, .42), rgba(255, 255, 255, .10) 34%,
    rgba(140, 168, 226, .10) 62%, rgba(255, 209, 102, .16));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
/* A faint sheen across the top edge — the "polished glass" cue. */
.bc2-card::after {
  content: '';
  position: absolute;
  inset: 1px 1px auto;
  height: 42%;
  border-radius: 15px 15px 40% 40% / 15px 15px 100% 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), transparent);
  pointer-events: none;
}

/* ── header ─────────────────────────────────────────────────────────────── */
.bc2-head { display: flex; align-items: center; justify-content: space-between; gap: 11px; }
.bc2-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bc2-logo {
  width: 42px; height: 42px; border-radius: 13px; flex: 0 0 42px; position: relative;
  background:
    radial-gradient(120% 120% at 28% 18%, rgba(255, 226, 160, .55), transparent 58%),
    linear-gradient(150deg, rgba(70, 48, 12, .92), rgba(10, 13, 24, .96));
  border: 1px solid rgba(255, 209, 102, .52);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 240, 200, .35),
    inset 0 -6px 12px rgba(0, 0, 0, .35);
}
.bc2-logo::before {
  content: ''; position: absolute; top: 9px; left: 9px; right: 9px; height: 8px;
  background: linear-gradient(180deg, #ffe9b0, var(--bc2-gold-deep));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}
.bc2-logo span {
  position: absolute; bottom: 10px; left: 10px; right: 10px; height: 13px;
  background: repeating-linear-gradient(90deg, #ffe9b0 0 2.5px, transparent 2.5px 5.5px);
  border-bottom: 2px solid var(--bc2-gold);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
}
.bc2-title {
  font-size: 15.5px; font-weight: 800; letter-spacing: .012em;
  background: linear-gradient(180deg, #fff5da, #ffd166 68%, #d8a53f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bc2-sub { font-size: 10.5px; color: var(--bc2-muted); margin-top: 2px; }

/* ── stat row ───────────────────────────────────────────────────────────── */
.bc2-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.bc2-stat {
  position: relative;
  background: linear-gradient(160deg, rgba(26, 37, 62, .58), rgba(11, 17, 32, .66));
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--bc2-line);
  border-radius: 13px; padding: 10px 11px; min-width: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .055);
}
.bc2-stat-lbl {
  font-size: 9px; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(175, 195, 240, .58); font-weight: 700;
}
.bc2-stat-val {
  font-size: 16px; font-weight: 800; color: var(--bc2-ink); margin-top: 4px;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.bc2-stat-val.pos { color: #4ade80; text-shadow: 0 0 18px rgba(74, 222, 128, .30); }
.bc2-stat-val.neg { color: #fb7185; text-shadow: 0 0 18px rgba(251, 113, 133, .28); }
.bc2-stat-sub { font-size: 8.5px; color: rgba(175, 195, 240, .52); margin-top: 3px; }

/* ── live contract ──────────────────────────────────────────────────────── */
.bc2-live { padding: 12px 14px; transition: box-shadow .3s; }
.bc2-live.active {
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .40),
    0 0 0 1px rgba(255, 209, 102, .22),
    0 0 34px rgba(255, 209, 102, .13),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}
.bc2-live-top { display: flex; justify-content: space-between; align-items: center; gap: 9px; }
.bc2-live-title {
  font-size: 11.5px; font-weight: 800; color: #ffe9b0; letter-spacing: .03em;
  text-transform: uppercase;
}
.bc2-live-right {
  display: flex; align-items: center; gap: 11px; font-size: 11.5px;
  color: rgba(206, 220, 248, .88); font-variant-numeric: tabular-nums;
}
.bc2-live-right .pos { color: #4ade80; } .bc2-live-right .neg { color: #fb7185; }
.bc2-bar {
  margin-top: 9px; height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(8, 13, 26, .75);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 255, 255, .04);
}
.bc2-bar-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #b8842a, var(--bc2-gold) 62%, #fff0c4);
  box-shadow: 0 0 14px rgba(255, 209, 102, .45);
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.bc2-live-note { margin-top: 8px; font-size: 10.5px; color: var(--bc2-muted); }

/* ── sections + fields ──────────────────────────────────────────────────── */
.bc2-section-title {
  font-size: 11px; font-weight: 800; color: #ffe9b0; margin-bottom: 10px;
  letter-spacing: .06em; text-transform: uppercase;
}
.bc2-field { display: block; margin-bottom: 9px; }
.bc2-field > span, .bc2-field-lbl {
  display: block; font-size: 9px; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(175, 195, 240, .60); font-weight: 700; margin-bottom: 6px;
}
.bc2-field-lbl { margin-top: 12px; }
.bc2-input {
  width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 10px;
  background: rgba(7, 11, 23, .72);
  border: 1px solid rgba(140, 168, 226, .22);
  color: var(--bc2-ink); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45);
  transition: border-color .18s, box-shadow .18s;
}
.bc2-input:focus {
  outline: none;
  border-color: rgba(255, 209, 102, .58);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45), 0 0 0 3px rgba(255, 209, 102, .13);
}
.bc2-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 9px; }
.bc2-hint { font-size: 10px; color: rgba(175, 195, 240, .58); line-height: 1.55; margin-top: 5px; }

/* ── segmented buttons ──────────────────────────────────────────────────── */
.bc2-seg {
  display: flex; gap: 5px; flex-wrap: wrap; padding: 4px; border-radius: 12px;
  background: rgba(7, 11, 23, .55); border: 1px solid rgba(140, 168, 226, .12);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .40);
}
.bc2-seg-btn {
  flex: 1 1 auto; min-width: 58px; padding: 8px 10px; border-radius: 9px;
  cursor: pointer; background: transparent; border: 1px solid transparent;
  color: rgba(200, 215, 245, .74); font-size: 11.5px; font-weight: 700;
  transition: background .18s, color .18s, box-shadow .18s;
}
.bc2-seg-btn:hover { color: #fde68a; background: rgba(255, 209, 102, .07); }
.bc2-seg-btn.active {
  background: linear-gradient(180deg, rgba(255, 224, 150, .26), rgba(210, 152, 48, .14));
  border-color: rgba(255, 209, 102, .46);
  color: #fff3d0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 245, 215, .30);
}

/* ── slider ─────────────────────────────────────────────────────────────── */
.bc2-slider-row { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
.bc2-range {
  -webkit-appearance: none; appearance: none; flex: 1 1 auto; height: 28px;
  background: transparent; cursor: pointer;
}
.bc2-range::-webkit-slider-runnable-track {
  height: 7px; border-radius: 999px; background: rgba(7, 11, 23, .8);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), inset 0 -1px 0 rgba(255, 255, 255, .05);
}
.bc2-range::-moz-range-track {
  height: 7px; border-radius: 999px; background: rgba(7, 11, 23, .8);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6);
}
.bc2-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px;
  margin-top: -8.5px; border-radius: 50%;
  background: radial-gradient(70% 70% at 34% 28%, #fff6dd, var(--bc2-gold) 52%, #b8842a);
  border: 1px solid rgba(120, 84, 20, .8);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .5), 0 0 14px rgba(255, 209, 102, .35),
              inset 0 1px 1px rgba(255, 255, 255, .6);
  transition: transform .12s;
}
.bc2-range::-webkit-slider-thumb:active { transform: scale(1.12); }
.bc2-range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(120, 84, 20, .8);
  background: radial-gradient(70% 70% at 34% 28%, #fff6dd, var(--bc2-gold) 52%, #b8842a);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 255, 255, .6);
}
.bc2-range:focus-visible { outline: 2px solid rgba(255, 209, 102, .7); outline-offset: 5px; }
.bc2-range-val {
  min-width: 36px; text-align: right; font-size: 17px; font-weight: 800;
  color: #ffe9b0; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px rgba(255, 209, 102, .32);
}
.bc2-tick-max {
  font-size: 9px; color: rgba(175, 195, 240, .52); text-align: right;
  margin: -3px 0 5px; letter-spacing: .04em;
}

/* ── estimate strip: the return NEVER stands alone ──────────────────────── */
.bc2-est {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin-top: 7px; padding: 9px 11px; border-radius: 11px;
  background: linear-gradient(140deg, rgba(255, 209, 102, .11), rgba(255, 209, 102, .04));
  border: 1px solid rgba(255, 209, 102, .24);
  box-shadow: inset 0 1px 0 rgba(255, 245, 215, .12);
  font-size: 10.5px;
}
.bc2-est-ret {
  font-size: 14px; font-weight: 800;
  background: linear-gradient(180deg, #fff3d0, #ffd166 70%, #d8a53f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bc2-est-mid { color: rgba(206, 220, 248, .82); }
.bc2-est-odds {
  color: #fde68a; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 209, 102, .13); border: 1px solid rgba(255, 209, 102, .30);
}
.bc2-est-warn { color: #fb7185; font-weight: 600; }

/* ── auto-pick + pair list ──────────────────────────────────────────────── */
.bc2-check {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 11px;
  font-size: 11px; color: rgba(206, 220, 248, .88); line-height: 1.55; cursor: pointer;
}
.bc2-check input {
  margin-top: 2px; width: 16px; height: 16px; accent-color: var(--bc2-gold-deep);
  flex: 0 0 auto;
}
.bc2-pairs { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.bc2-pair {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 9px; align-items: center;
  padding: 8px 10px; border-radius: 11px;
  background: linear-gradient(150deg, rgba(24, 34, 58, .55), rgba(11, 17, 32, .62));
  border: 1px solid var(--bc2-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color .2s, transform .2s;
}
.bc2-pair:hover { transform: translateX(2px); }
.bc2-pair.measured {
  border-color: rgba(74, 222, 128, .34);
  background: linear-gradient(150deg, rgba(16, 185, 129, .11), rgba(11, 17, 32, .62));
}
.bc2-pair-sym { font-size: 11.5px; font-weight: 700; color: var(--bc2-ink); }
.bc2-pair-surv {
  font-size: 14px; font-weight: 800; color: #ffd166; font-variant-numeric: tabular-nums;
}
.bc2-pair.measured .bc2-pair-surv { color: #4ade80; text-shadow: 0 0 16px rgba(74, 222, 128, .28); }
.bc2-pair-band { grid-column: 1 / -1; font-size: 9.5px; color: rgba(175, 195, 240, .56); }

/* ── rails note ─────────────────────────────────────────────────────────── */
.bc2-rail-note {
  margin-top: 10px; padding: 9px 11px; border-radius: 11px; font-size: 10px;
  line-height: 1.6;
  background: linear-gradient(140deg, rgba(249, 115, 22, .11), rgba(249, 115, 22, .04));
  border: 1px solid rgba(249, 115, 22, .26);
  color: rgba(253, 224, 196, .92);
}

/* ── Auto Pilot ─────────────────────────────────────────────────────────── */
.bc2-pilot::before {
  background: linear-gradient(150deg,
    rgba(255, 209, 102, .62), rgba(255, 255, 255, .12) 38%,
    rgba(140, 168, 226, .10) 66%, rgba(255, 209, 102, .26));
}
.bc2-tag {
  margin-left: 8px; padding: 3px 8px; border-radius: 999px; font-size: 8.5px;
  font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  background: rgba(255, 209, 102, .14); color: #fde68a;
  border: 1px solid rgba(255, 209, 102, .30);
  vertical-align: middle;
}
.bc2-pilot-body {
  margin-top: 10px; padding: 11px 12px; border-radius: 12px;
  background: linear-gradient(150deg, rgba(24, 34, 58, .52), rgba(10, 16, 30, .62));
  border: 1px solid var(--bc2-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  font-size: 11px; color: rgba(206, 220, 248, .88); line-height: 1.6;
}
.bc2-pilot-row {
  display: flex; justify-content: space-between; gap: 11px; flex-wrap: wrap;
  padding: 3px 0; font-size: 11.5px;
}
.bc2-pilot-row b { color: #ffe9b0; }
.bc2-pilot-odds { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.bc2-pilot-odds span { padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.bc2-pilot-odds .ok  { background: rgba(16,185,129,.15); color: #4ade80; border: 1px solid rgba(16,185,129,.34); }
.bc2-pilot-odds .bad { background: rgba(244,63,94,.13);  color: #fb7185; border: 1px solid rgba(244,63,94,.32); }
.bc2-pilot-odds .mut { background: rgba(140,168,226,.12); color: rgba(206,220,248,.86); border: 1px solid rgba(140,168,226,.26); }
.bc2-pilot-note {
  margin-top: 7px; font-size: 10px; line-height: 1.6; color: rgba(186, 203, 238, .74);
  border-top: 1px solid var(--bc2-line); padding-top: 7px;
}
.bc2-pilot-apply { width: 100%; margin-top: 10px; }

/* ── actions: ONE primary Start/Stop + Pause ────────────────────────────── */
.bc2-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 9px; }
.bc2-btn {
  position: relative; overflow: hidden;
  /* min-height keeps every action button at or above the 44px touch target;
     padding alone left the primary control at 41px. */
  min-height: 46px;
  padding: 12px 14px; border-radius: 13px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .02em; cursor: pointer; border: 1px solid transparent;
  transition: transform .14s, box-shadow .22s, filter .18s, background .3s;
}
.bc2-btn:disabled { opacity: .42; cursor: not-allowed; }
.bc2-btn:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.06); }
.bc2-btn:not(:disabled):active { transform: translateY(0); }
/* sheen sweep on hover — the small luxury cue */
.bc2-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.30) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  pointer-events: none;
}
.bc2-btn:not(:disabled):hover::after { transform: translateX(120%); }

.bc2-btn-gold {
  background: linear-gradient(180deg, #ffe6a8, var(--bc2-gold) 45%, #c98f28);
  color: #1c1305; border-color: rgba(255, 232, 170, .75);
  box-shadow: 0 8px 22px rgba(210, 152, 48, .32),
              inset 0 1px 0 rgba(255, 252, 235, .8),
              inset 0 -2px 6px rgba(120, 80, 12, .35);
}
.bc2-btn-ghost {
  background: linear-gradient(180deg, rgba(30, 42, 70, .70), rgba(14, 21, 38, .78));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: rgba(206, 220, 248, .92); border-color: rgba(140, 168, 226, .26);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* The primary control flips to a stop state IN PLACE — there is no second
   button, so the running state can never disagree with what is on screen. */
.bc2-btn-primary { display: flex; align-items: center; justify-content: center; gap: 9px; }
.bc2-btn-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
  background: #2f6b3d; box-shadow: 0 0 0 3px rgba(47, 107, 61, .22);
}
.bc2-btn-primary.running {
  background: linear-gradient(180deg, #ff8fa3, #f43f5e 45%, #b3213c);
  color: #fff; border-color: rgba(255, 160, 178, .70);
  box-shadow: 0 8px 22px rgba(244, 63, 94, .34),
              inset 0 1px 0 rgba(255, 220, 226, .55),
              inset 0 -2px 6px rgba(120, 14, 34, .40);
}
.bc2-btn-primary.running .bc2-btn-dot {
  background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .28);
  animation: bc2Pulse 1.7s ease-in-out infinite;
}
@keyframes bc2Pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 3px rgba(255, 255, 255, .28); }
  50%      { opacity: .55; box-shadow: 0 0 0 6px rgba(255, 255, 255, .10); }
}

.bc2-state {
  padding: 10px 12px; border-radius: 12px; font-size: 11px; font-weight: 600;
  background: linear-gradient(150deg, rgba(24, 34, 58, .55), rgba(10, 16, 30, .62));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--bc2-line);
  color: rgba(206, 220, 248, .90);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.bc2-flash { padding: 9px 12px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.bc2-flash.ok  { background: rgba(16,185,129,.13); border: 1px solid rgba(16,185,129,.38); color: #86efac; }
.bc2-flash.bad { background: rgba(244,63,94,.13);  border: 1px solid rgba(244,63,94,.38); color: #fda4af; }

/* ── tiles ──────────────────────────────────────────────────────────────── */
.bc2-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.bc2-tile {
  background: linear-gradient(160deg, rgba(26, 37, 62, .55), rgba(11, 17, 32, .64));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bc2-line);
  border-radius: 13px; padding: 10px 11px; text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .055);
}
.bc2-tile-lbl {
  font-size: 8.5px; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(175, 195, 240, .58); font-weight: 700;
}
.bc2-tile-val {
  font-size: 16px; font-weight: 800; color: #ffe9b0; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* ── history ────────────────────────────────────────────────────────────── */
.bc2-hist { display: flex; flex-direction: column; gap: 5px; max-height: 280px; overflow-y: auto; }
.bc2-hist::-webkit-scrollbar { width: 7px; }
.bc2-hist::-webkit-scrollbar-thumb { background: rgba(255, 209, 102, .20); border-radius: 999px; }
.bc2-hist-row {
  display: grid; grid-template-columns: 10px auto 1fr auto auto auto;
  gap: 9px; align-items: center; padding: 8px 10px; border-radius: 11px;
  background: linear-gradient(150deg, rgba(22, 31, 53, .48), rgba(10, 16, 30, .55));
  border: 1px solid rgba(140, 168, 226, .10);
  font-size: 10.5px; color: rgba(206, 220, 248, .86);
  font-variant-numeric: tabular-nums;
}
.bc2-hist-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(175, 195, 240, .45); }
.bc2-hist-dot.win  { background: #4ade80; box-shadow: 0 0 9px rgba(74, 222, 128, .55); }
.bc2-hist-dot.loss { background: #fb7185; box-shadow: 0 0 9px rgba(251, 113, 133, .50); }
.bc2-hist-dot.open { background: var(--bc2-gold); box-shadow: 0 0 9px rgba(255, 209, 102, .55); }
.bc2-hist-time { color: rgba(175, 195, 240, .56); }
.bc2-hist-sym { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc2-hist-pl { font-weight: 800; }
.bc2-hist-pl.pos { color: #4ade80; } .bc2-hist-pl.neg { color: #fb7185; }
.bc2-empty { padding: 16px; text-align: center; font-size: 11px; color: rgba(175, 195, 240, .50); }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .bc2-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bc2-actions { grid-template-columns: 1fr 1.4fr; }
  .bc2-hist-row { grid-template-columns: 10px auto 1fr auto; }
}
@media (max-width: 768px) {
  /* iOS Safari auto-zooms inputs under 16px — jarring mid-contract */
  .bc2-input { font-size: 16px; }
}
@media (max-width: 400px) {
  .bc2-grid2 { grid-template-columns: 1fr; }
  .bc2-seg-btn { min-width: 50px; font-size: 11px; padding: 7px 7px; }
  .bc2-est { font-size: 10px; }
  .bc2-card { padding: 12px 12px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bc2-bar-fill, .bc2-btn, .bc2-pair { transition: none; }
  .bc2-btn::after { display: none; }
  .bc2-btn-primary.running .bc2-btn-dot { animation: none; }
}
/* Frosted glass is expensive to composite; drop the blur where the user asks
   for it. The gradients already carry the depth, so nothing looks flat. */
@media (prefers-reduced-transparency: reduce) {
  .bc2-card, .bc2-stat, .bc2-tile, .bc2-state, .bc2-btn-ghost {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: linear-gradient(155deg, rgba(20, 29, 50, .97), rgba(10, 15, 28, .98));
  }
}

/* ── strategy-list icon ─────────────────────────────────────────────────────
   These two classes are referenced by the row markup in index.html. They were
   missing, so the chip rendered as an empty square. Bank Clerk 1.0 wears an
   orange ring and a bank facade; 2.0 takes a gold vault dial so the pair read
   as a family without being mistaken for each other.                        */
.strategy-icon-bankclerk2 {
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(255, 226, 160, .30), transparent 62%),
    linear-gradient(145deg, rgba(10, 13, 24, .96), rgba(72, 50, 12, .78)) !important;
  border: 1px solid rgba(255, 209, 102, .62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .22), 0 0 15px rgba(255, 209, 102, .20) !important;
  position: relative;
  overflow: hidden;
}
.strategy-mark-bankclerk2 {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
  color: #ffe9b0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
/* the dial ring behind the label */
.strategy-mark-bankclerk2 i {
  position: absolute; inset: 4px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 209, 102, .55);
  box-shadow: inset 0 0 0 2px rgba(10, 13, 24, .55),
              inset 0 1px 2px rgba(255, 240, 200, .25);
}
/* four dial spokes, drawn with a repeating gradient so there is no extra markup */
.strategy-mark-bankclerk2 i::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  background:
    linear-gradient(0deg,   transparent 46%, rgba(255, 209, 102, .55) 46% 54%, transparent 54%),
    linear-gradient(90deg,  transparent 46%, rgba(255, 209, 102, .55) 46% 54%, transparent 54%);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 58% 74%, transparent 74%);
          mask: radial-gradient(circle, transparent 58%, #000 58% 74%, transparent 74%);
}

/* ── swipe-to-exit ────────────────────────────────────────────────────────
   The live card sits on a red bed. Dragging it left uncovers the bed, and
   releasing past the threshold cashes the accumulator out early. Because this
   closes a real position, the bed only lights up once the pull is far enough
   to commit — there is no ambiguous half state.                            */
.bc2-swipe { position: relative; --bc2-swipe-progress: 0; }
.bc2-swipe-bed {
  position: absolute; inset: 0; border-radius: 16px;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 20px; overflow: hidden;
  background: linear-gradient(90deg, rgba(120, 14, 34, .35), rgba(244, 63, 94, .82));
  border: 1px solid rgba(244, 63, 94, .45);
  opacity: calc(.25 + var(--bc2-swipe-progress) * .75);
  pointer-events: none;
}
.bc2-swipe-bed-txt {
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: #fff;
  text-transform: uppercase;
  transform: scale(calc(.9 + var(--bc2-swipe-progress) * .1));
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.bc2-swipe.ready .bc2-swipe-bed { box-shadow: inset 0 0 26px rgba(255, 255, 255, .22); }
.bc2-swipe.ready .bc2-swipe-bed-txt { text-shadow: 0 0 12px rgba(255, 255, 255, .6); }
/* only grab-able while a contract is actually open */
.bc2-swipe.armed .bc2-live { cursor: grab; touch-action: pan-y; }
.bc2-swipe.dragging .bc2-live { cursor: grabbing; user-select: none; }
.bc2-swipe .bc2-live { position: relative; will-change: transform; }

/* keyboard/assistive equivalent — the swipe is not operable without a pointer */
.bc2-exit-btn {
  margin-top: 9px; width: 100%; min-height: 40px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(244, 63, 94, .20), rgba(244, 63, 94, .10));
  border: 1px solid rgba(244, 63, 94, .45); color: #fda4af;
  font-size: 11.5px; font-weight: 800; cursor: pointer;
  transition: filter .15s;
}
.bc2-exit-btn:hover { filter: brightness(1.12); }
.bc2-exit-btn[hidden] { display: none; }

/* ── trade-history bin ─────────────────────────────────────────────────── */
.bc2-hist-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.bc2-hist-head .bc2-section-title { margin-bottom: 0; }
.bc2-bin {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; min-height: 34px; border-radius: 9px; cursor: pointer;
  background: rgba(244, 63, 94, .09); border: 1px solid rgba(244, 63, 94, .30);
  color: #fda4af; font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  transition: background .16s, border-color .16s, color .16s;
}
.bc2-bin svg { width: 14px; height: 14px; flex: 0 0 14px; }
.bc2-bin:hover { background: rgba(244, 63, 94, .16); border-color: rgba(244, 63, 94, .5); }
/* armed = one tap already given; the next tap actually clears */
.bc2-bin.armed {
  background: linear-gradient(180deg, rgba(244, 63, 94, .34), rgba(190, 32, 60, .28));
  border-color: rgba(255, 160, 178, .65); color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .bc2-swipe-bed-txt { transform: none; }
  .bc2-exit-btn, .bc2-bin { transition: none; }
}

/* ── recovery depth readout ────────────────────────────────────────────── */
.bc2-depth {
  margin-top: 8px; padding: 9px 11px; border-radius: 11px;
  font-size: 10.5px; line-height: 1.6;
}
.bc2-depth[hidden] { display: none; }
.bc2-depth.ok {
  background: linear-gradient(140deg, rgba(16,185,129,.12), rgba(16,185,129,.04));
  border: 1px solid rgba(16,185,129,.30); color: rgba(190, 245, 220, .94);
}
.bc2-depth.risk {
  background: linear-gradient(140deg, rgba(249,115,22,.13), rgba(249,115,22,.04));
  border: 1px solid rgba(249,115,22,.32); color: rgba(253, 224, 196, .94);
}
.bc2-depth b { color: #ffe9b0; }

/* ── inline pair badge on the market picker ────────────────────────────── */
.bc2-mkt-badge {
  display: inline-block; margin-left: 7px; padding: 2px 7px; border-radius: 999px;
  font-size: 9px; font-weight: 800; letter-spacing: .02em; text-transform: none;
  vertical-align: middle;
}
.bc2-mkt-badge[hidden] { display: none; }
.bc2-mkt-badge.measured {
  background: rgba(16,185,129,.16); color: #4ade80; border: 1px solid rgba(16,185,129,.38);
}
.bc2-mkt-badge.fair {
  background: rgba(140,168,226,.14); color: rgba(206,220,248,.86);
  border: 1px solid rgba(140,168,226,.28);
}
.bc2-recmult[hidden] { display: none; }
.bc2-recmult { margin-top: 4px; }