/* ============================================================================
   Cryptoalgo — trading terminal
   Palette: deep slate ground, jade signal, amber caution, coral risk.
   Numbers are always monospace + tabular so columns align and digits don't jitter
   during count-up animations.
   ========================================================================== */

:root {
  --bg:          #F7F8FA;
  --bg-elev:     #FFFFFF;
  --bg-sunken:   #EEF1F5;
  --line:        #E1E6EC;
  --line-soft:   #EDF0F4;
  --text:        #0F1620;
  --text-dim:    #5A6675;
  --text-faint:  #93A0B0;

  --jade:        #00A87E;
  --jade-dim:    #E4F6F1;
  --coral:       #E0503F;
  --coral-dim:   #FCECEA;
  --amber:       #C98A12;
  --amber-dim:   #FDF3DF;
  --violet:      #5B5BD6;

  --radius:      12px;
  --radius-sm:   8px;
  --shadow-sm:   0 1px 2px rgba(15,22,32,.06);
  --shadow:      0 2px 4px rgba(15,22,32,.04), 0 12px 28px -14px rgba(15,22,32,.18);
  --shadow-lg:   0 8px 24px -8px rgba(15,22,32,.18), 0 24px 56px -24px rgba(15,22,32,.28);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.16,1,.3,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #0B0F14;
    --bg-elev:    #131922;
    --bg-sunken:  #0F141B;
    --line:       #232C38;
    --line-soft:  #1B222C;
    --text:       #E9EDF2;
    --text-dim:   #9AA7B6;
    --text-faint: #667485;
    --jade:       #23C69A;
    --jade-dim:   #0E2A24;
    --coral:      #F0705E;
    --coral-dim:  #2C1614;
    --amber:      #E0A73B;
    --amber-dim:  #2B2211;
    --violet:     #7C7CE8;
    --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
    --shadow:     0 2px 4px rgba(0,0,0,.3), 0 12px 28px -14px rgba(0,0,0,.6);
    --shadow-lg:  0 8px 24px -8px rgba(0,0,0,.5), 0 24px 56px -24px rgba(0,0,0,.7);
  }
}

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

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--jade); text-decoration: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------- login */
.auth-screen {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(900px 500px at 15% -10%, color-mix(in srgb, var(--jade) 10%, transparent), transparent 60%),
    radial-gradient(700px 500px at 100% 110%, color-mix(in srgb, var(--violet) 9%, transparent), transparent 60%),
    var(--bg);
}
.auth-card {
  width: min(430px, 100%); background: var(--bg-elev);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: 38px 34px;
  display: flex; flex-direction: column; gap: 22px;
  animation: rise .6s var(--ease) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.985); } }

.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--jade), color-mix(in srgb, var(--jade) 55%, var(--violet)));
  color: #fff; font-weight: 800; font-size: 15px; letter-spacing: -.04em;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--jade) 60%, transparent);
}
.brand-name { font-size: 17px; font-weight: 680; letter-spacing: -.025em; }
.brand-sub { font-size: 11px; color: var(--text-faint); letter-spacing: .1em; text-transform: uppercase; font-family: var(--mono); }

.auth-card h1 { font-size: 22px; font-weight: 660; letter-spacing: -.025em; }
.auth-card p.hint { color: var(--text-dim); font-size: 13.5px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 12px; font-weight: 600; color: var(--text-dim); letter-spacing: .01em; }
.field input {
  background: var(--bg-sunken); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 11px 13px; font-size: 14.5px;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.field input:focus {
  outline: none; border-color: var(--jade); background: var(--bg-elev);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jade) 16%, transparent);
}
.field input::placeholder { color: var(--text-faint); }

.btn {
  border-radius: var(--radius-sm); padding: 11px 18px; font-weight: 620; font-size: 14px;
  transition: transform .14s var(--ease), filter .18s, background .18s, border-color .18s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { transform: scale(.978); }
.btn-primary { background: var(--jade); color: #fff; box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--jade) 80%, transparent); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-ghost { border: 1px solid var(--line); color: var(--text-dim); }
.btn-ghost:hover { border-color: var(--text-faint); color: var(--text); }
.btn-danger { border: 1px solid var(--coral); color: var(--coral); }
.btn-danger:hover { background: var(--coral-dim); }
.btn-block { width: 100%; }

.alert {
  border-radius: var(--radius-sm); padding: 10px 13px; font-size: 13px;
  display: flex; gap: 9px; align-items: flex-start;
  animation: shake .4s var(--ease);
}
.alert-error { background: var(--coral-dim); color: var(--coral); border: 1px solid color-mix(in srgb, var(--coral) 25%, transparent); }
.alert-info  { background: var(--jade-dim); color: var(--jade); border: 1px solid color-mix(in srgb, var(--jade) 25%, transparent); }
.alert-warn  { background: var(--amber-dim); color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 28%, transparent); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* ---------------------------------------------------------------- shell */
.app { display: none; min-height: 100vh; grid-template-columns: 232px 1fr; }
.app.active { display: grid; }

.sidebar {
  background: var(--bg-elev); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px; padding: 20px 14px;
  /* align-self:start stops the grid row stretching the item; without it the
     sticky box is already as tall as the content and never pins. */
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
}
.sidebar .brand { padding: 4px 8px 16px; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border-radius: var(--radius-sm); color: var(--text-dim); font-weight: 550; font-size: 13.5px;
  transition: background .16s, color .16s; text-align: left; width: 100%;
  position: relative;
}
.nav-item:hover { background: var(--bg-sunken); color: var(--text); }
.nav-item.active { background: var(--jade-dim); color: var(--jade); font-weight: 640; }
.nav-item.active::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; background: var(--jade); border-radius: 0 3px 3px 0;
}
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }

.sidebar-foot { border-top: 1px solid var(--line-soft); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.user-chip { display: flex; align-items: center; gap: 9px; padding: 0 6px; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-sunken); border: 1px solid var(--line);
  font-weight: 680; font-size: 12px; color: var(--text-dim);
}

.main { padding: 26px 30px 60px; max-width: 1280px; width: 100%; }

.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 22px; }
.page-head h1 { font-size: 25px; font-weight: 680; letter-spacing: -.03em; }
.page-head p { color: var(--text-dim); font-size: 13.5px; margin-top: 3px; }

.view { display: none; animation: fade .38s var(--ease) both; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } }

/* ---------------------------------------------------------------- cards */
.grid { display: grid; gap: 14px; }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 12px;
  transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s;
}
.card.hoverable:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: color-mix(in srgb, var(--jade) 30%, var(--line)); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card-title { font-size: 11px; font-weight: 640; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); font-family: var(--mono); }

.stat-value { font-family: var(--mono); font-size: 27px; font-weight: 620; letter-spacing: -.03em; line-height: 1.1; }
.stat-value.sm { font-size: 21px; }
.stat-sub { font-size: 12.5px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }

.delta { font-family: var(--mono); font-size: 12.5px; font-weight: 620; padding: 2px 7px; border-radius: 5px; }
.delta.up { color: var(--jade); background: var(--jade-dim); }
.delta.down { color: var(--coral); background: var(--coral-dim); }
.delta.flat { color: var(--text-faint); background: var(--bg-sunken); }

.pill {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: 10.5px; font-weight: 640; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; border: 1px solid currentColor;
}
.pill.ok { color: var(--jade); background: var(--jade-dim); }
.pill.warn { color: var(--amber); background: var(--amber-dim); }
.pill.bad { color: var(--coral); background: var(--coral-dim); }
.pill.mute { color: var(--text-faint); background: var(--bg-sunken); border-color: var(--line); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dot.live { animation: pulse 1.9s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1; box-shadow:0 0 0 0 currentColor} 50%{opacity:.55; box-shadow:0 0 0 4px transparent} }

/* ---------------------------------------------------------------- charts */
.chart-wrap { position: relative; width: 100%; }
canvas { display: block; width: 100%; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--text-dim); }
.chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

.tooltip {
  position: absolute; pointer-events: none; opacity: 0; transform: translate(-50%, -120%);
  background: var(--text); color: var(--bg-elev); padding: 7px 10px; border-radius: 7px;
  font-family: var(--mono); font-size: 11.5px; white-space: nowrap; z-index: 20;
  transition: opacity .14s; box-shadow: var(--shadow);
}
.tooltip.show { opacity: 1; }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); }
table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
thead th {
  text-align: left; padding: 10px 15px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint);
  font-weight: 600; background: var(--bg-sunken); border-bottom: 1px solid var(--line);
  white-space: nowrap; position: sticky; top: 0;
}
tbody td { padding: 11px 15px; border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .14s; }
tbody tr:hover { background: var(--bg-sunken); }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--jade); font-weight: 620; }
.neg { color: var(--coral); font-weight: 620; }

.side-tag { font-family: var(--mono); font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 4px; letter-spacing: .04em; }
.side-tag.long { color: var(--jade); background: var(--jade-dim); }
.side-tag.short { color: var(--coral); background: var(--coral-dim); }

.empty { padding: 46px 20px; text-align: center; color: var(--text-faint); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.empty svg { width: 32px; height: 32px; opacity: .4; }

/* ---------------------------------------------------------------- misc */
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.tiny { font-size: 12px; }
.kv { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px dashed var(--line-soft); font-size: 13px; }
.kv:last-child { border-bottom: none; }
.kv dt { color: var(--text-dim); }
.kv dd { font-family: var(--mono); font-weight: 600; }

.bar-track { height: 6px; background: var(--bg-sunken); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; background: var(--jade); transition: width .9s var(--ease); }
.bar-fill.warn { background: var(--amber); }
.bar-fill.bad { background: var(--coral); }

.skeleton {
  background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--line-soft) 37%, var(--bg-sunken) 63%);
  background-size: 400% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 5px;
}
@keyframes shimmer { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }

.banner {
  border-radius: var(--radius); padding: 13px 17px; display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid; margin-bottom: 18px; font-size: 13.5px;
}
.banner.warn { background: var(--amber-dim); border-color: color-mix(in srgb, var(--amber) 30%, transparent); color: var(--amber); }
.banner.info { background: var(--jade-dim); border-color: color-mix(in srgb, var(--jade) 26%, transparent); color: var(--jade); }
.banner b { display: block; margin-bottom: 2px; }
.banner span { color: var(--text-dim); }

.secret-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.secret-row:last-child { border-bottom: none; }

@media (max-width: 860px) {
  .app.active { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 12px; }
  .sidebar .brand { padding: 0 10px 0 4px; }
  .nav { flex-direction: row; }
  .nav-item.active::before { display: none; }
  .sidebar-foot { border-top: none; padding-top: 0; margin-left: auto; }
  .user-chip span { display: none; }
  .main { padding: 18px 16px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------- connect wizard */
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px;
         font-size: 13px; color: var(--text-dim); }
.steps li { padding-left: 2px; }
.steps li::marker { color: var(--jade); font-weight: 700; font-family: var(--mono); }
.steps b { color: var(--text); font-weight: 640; }
.steps a { border-bottom: 1px solid color-mix(in srgb, var(--jade) 40%, transparent); }
.steps a:hover { border-bottom-color: var(--jade); }

.check {
  border-radius: var(--radius-sm); padding: 10px 13px; font-size: 13px;
  display: flex; gap: 9px; align-items: flex-start; border: 1px solid;
  animation: fade .3s var(--ease) both;
}
.check.good { background: var(--jade-dim); border-color: color-mix(in srgb, var(--jade) 30%, transparent); color: var(--jade); }
.check.bad  { background: var(--coral-dim); border-color: color-mix(in srgb, var(--coral) 30%, transparent); color: var(--coral); }
.check.busy { background: var(--bg-sunken); border-color: var(--line); color: var(--text-dim); }
.check b { display: block; margin-bottom: 2px; }
.check span { color: var(--text-dim); display: block; line-height: 1.5; }
.check .spin {
  width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  border: 2px solid var(--line); border-top-color: var(--jade);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ---------------------------------------------------------- mode toggle */
.mode-panel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 16px; background: var(--bg-elev);
  transition: border-color .3s, background .3s;
}
.mode-panel.live {
  border-color: var(--coral);
  background: linear-gradient(90deg, var(--coral-dim), var(--bg-elev) 45%);
  animation: liveGlow 2.6s ease-in-out infinite;
}
@keyframes liveGlow {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--coral) 30%, transparent); }
  50%     { box-shadow: 0 0 0 5px color-mix(in srgb, var(--coral) 6%, transparent); }
}
.mode-label { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
.mode-label b { font-size: 14.5px; font-weight: 660; letter-spacing: -.01em; }
.mode-label span { font-size: 12.5px; color: var(--text-dim); }

.switch { position: relative; width: 52px; height: 29px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.switch .track {
  position: absolute; inset: 0; border-radius: 999px; background: var(--bg-sunken);
  border: 1px solid var(--line); transition: background .26s var(--ease), border-color .26s;
}
.switch .thumb {
  position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%;
  background: var(--text-faint); transition: transform .26s var(--ease), background .26s;
}
.switch input:checked ~ .track { background: var(--coral-dim); border-color: var(--coral); }
.switch input:checked ~ .thumb { transform: translateX(23px); background: var(--coral); }
.switch input:focus-visible ~ .track { outline: 2px solid var(--jade); outline-offset: 2px; }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled ~ .track { opacity: .45; }

/* ---------------------------------------------------------------- modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(3px);
  animation: fadeIn .2s var(--ease);
}
.modal-backdrop[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0 } }
.modal {
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg); animation: rise .35s var(--ease) both;
}
.modal-head { display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px 14px; border-bottom: 1px solid var(--line-soft); }
.modal-head h2 { font-size: 17px; font-weight: 660; letter-spacing: -.02em; }
.icon-btn { font-size: 22px; line-height: 1; color: var(--text-faint); padding: 0 4px; }
.icon-btn:hover { color: var(--text); }
.modal-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 22px 20px; border-top: 1px solid var(--line-soft); }
.btn-danger-solid { background: var(--coral); color: #fff; }
.btn-danger-solid:hover:not(:disabled) { filter: brightness(1.07); }
.btn-danger-solid:disabled { opacity: .45; cursor: not-allowed; }

.pf-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; padding: 7px 0;
  border-bottom: 1px solid var(--line-soft); }
.pf-item:last-child { border-bottom: none; }
.pf-mark { width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
.pf-mark.ok { background: var(--jade); }
.pf-mark.no { background: var(--coral); }
.pf-item b { display: block; font-weight: 620; }
.pf-item span { color: var(--text-dim); font-size: 12.5px; }


/* --------------------------------------------------- trade table sizing */
/* These tables carry 8 columns of numbers. Give the identity columns room,
   keep every numeric column narrow and tabular, and let the container scroll
   rather than letting cells squash into each other. */
#paperOpen table, #paperClosed table, #livePositions table { min-width: 760px; }
#paperOpen th, #paperOpen td,
#paperClosed th, #paperClosed td,
#livePositions th, #livePositions td { padding: 9px 12px; white-space: nowrap; }
#paperClosed td.num, #paperOpen td.num { font-size: 12.5px; }
#paperClosed tbody tr td:first-child,
#paperOpen tbody tr td:first-child { font-weight: 640; }
.table-wrap { max-height: 620px; overflow-y: auto; }
.table-wrap thead th { position: sticky; top: 0; z-index: 3; }


/* ------------------------------------------------------- banner inline tags */
/* .banner span is display:block so the description sits under the heading, but
   inline markers inside it must stay inline or SIM/LIVE drop onto their own
   lines mid-sentence. */
.banner span .tag-sim, .banner span .tag-live,
.banner span b, .banner span code {
  display: inline; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; padding: 2px 6px; border-radius: 4px; vertical-align: baseline;
}
.tag-sim  { color: var(--text-dim); background: var(--bg-sunken); border: 1px solid var(--line); }
.tag-live { color: var(--jade);     background: var(--jade-dim);  border: 1px solid color-mix(in srgb, var(--jade) 30%, transparent); }


/* ------------------------------------------------- correlation scale bar */
.scale { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.scale-track {
  position: relative; height: 9px; border-radius: 5px; overflow: hidden;
  background: var(--bg-sunken); border: 1px solid var(--line);
}
.scale-zone { position: absolute; top: 0; bottom: 0; opacity: .30; }
.scale-zone.ok   { background: var(--jade); }
.scale-zone.warn { background: var(--amber); }
.scale-zone.bad  { background: var(--coral); }
.scale-marker {
  position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 2px;
  background: var(--text); transform: translateX(-50%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg-elev) 70%, transparent);
  transition: left .5s var(--ease);
}

/* ---- sleeve correlation panel ---- */
.corr-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; }
@media (max-width: 900px) { .corr-split { grid-template-columns:1fr; } }
.sleeve-row { display:flex; align-items:center; gap:10px; padding:9px 0;
              border-bottom:1px solid var(--line-soft); }
.sleeve-row .grow { flex:1; min-width:0; }
.swatch { width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.warn-text { color:var(--amber); }
.corr-figure { display:flex; align-items:flex-end; gap:20px; padding-top:12px; }
.corr-legend { line-height:1.7; }
.corr-worth { margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); }
.worth-head { color:var(--text-faint); text-transform:uppercase;
              letter-spacing:.07em; margin-bottom:9px; }
.worth-grid { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.worth-arrow { color:var(--text-faint); font-size:17px; }
.chart-empty { display:flex; align-items:center; justify-content:center;
               height:150px; border:1px dashed var(--line-soft); border-radius:8px;
               text-align:center; padding:0 18px; }

/* ---- live price stream ---- */
@keyframes cellflash { from { background: var(--flash); } to { background: transparent; } }
.flash { animation: cellflash .7s ease-out; }
:root { --flash: rgba(108,140,255,.20); }
.streamDot { font-size: 10px; letter-spacing: .02em; }
td.c-mark, td.c-pnl, td.c-pnlpct { transition: color .18s ease; }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }


/* ==========================================================================
   INSTITUTIONAL LAYER — risk-terminal density
   ==========================================================================
   Rewrites the consumer-fintech surface into something closer to an
   institutional risk desk: muted ground, colour reserved for signal, hairlines
   instead of shadows, sharp corners, and numbers that align in a column.

   The rule throughout: decoration carries no information, so it is removed;
   every remaining colour means something (long/short, profit/loss, breach).
   ========================================================================== */

:root {
  --bg:          #F4F5F7;
  --bg-elev:     #FFFFFF;
  --bg-sunken:   #EAECF0;
  --bg-header:   #1B2430;
  --line:        #D6DAE0;
  --line-soft:   #E6E9ED;
  --text:        #14181E;
  --text-dim:    #5B6672;
  --text-faint:  #8A94A0;

  /* Desaturated: a trading screen full of saturated colour stops meaning
     anything. These read as state, not as brand. */
  --jade:        #0A7D5A;
  --jade-dim:    #E6F2EE;
  --coral:       #B3392B;
  --coral-dim:   #F9EAE8;
  --amber:       #9A6B08;
  --amber-dim:   #FAF1DC;
  --violet:      #3D4E8C;
  --iris:        #3D4E8C;

  --radius:      3px;
  --radius-sm:   2px;
  --shadow-sm:   none;
  --shadow:      none;
  --shadow-lg:   0 8px 28px -12px rgba(20,24,30,.28);
  --flash:       rgba(61,78,140,.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #0C1016;
    --bg-elev:    #12171F;
    --bg-sunken:  #0F141A;
    --bg-header:  #0A0E13;
    --line:       #232A34;
    --line-soft:  #1A202A;
    --text:       #DFE4EA;
    --text-dim:   #929CA9;
    --text-faint: #616B77;
    --jade:       #2FA47E;
    --jade-dim:   #0D211B;
    --coral:      #CE5647;
    --coral-dim:  #24120F;
    --amber:      #BE8B22;
    --amber-dim:  #211906;
    --violet:     #6E80C4;
    --iris:       #6E80C4;
    --shadow-lg:  0 8px 28px -12px rgba(0,0,0,.7);
    --flash:      rgba(110,128,196,.20);
  }
}

/* ---- density: an institutional screen shows more, not bigger ---- */
body { font-size: 13px; letter-spacing: -0.005em; }

.card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: none;
  padding: 12px 14px;
}
.card-head {
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 8px;
  margin-bottom: 10px;
  align-items: baseline;
}
.card-title {
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .085em;
  color: var(--text-dim);
}

/* ---- numbers are the content ---- */
.stat-value, .num, td.num, .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.stat-value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.stat-value.sm { font-size: 16px; }
.stat-sub, .tiny { font-size: 10.5px; }

/* ---- tables: the primary instrument ---- */
table { border-collapse: collapse; width: 100%; font-size: 12px; }
thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-sunken);
  font-size: 9.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-dim);
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
tbody tr:hover { background: var(--bg-sunken); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- state, not decoration ---- */
.pill {
  border-radius: 2px;
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
}
.side-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 2px;
  padding: 2px 6px;
}
.side-tag.long  { color: var(--jade);  background: var(--jade-dim); }
.side-tag.short { color: var(--coral); background: var(--coral-dim); }

/* ---- navigation reads as a system index ---- */
.nav-item {
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  letter-spacing: -0.005em;
  padding: 7px 11px;
}
.nav-item.active { background: var(--bg-sunken); font-weight: 620; }

/* ---- page headers state what you are looking at ---- */
.page-head h1 {
  font-size: 19px;
  font-weight: 640;
  letter-spacing: -0.02em;
}
.page-head p { font-size: 12px; color: var(--text-dim); }

/* ---- risk banners are informational, not alarming ---- */
.banner {
  border-radius: var(--radius);
  border-left-width: 2px;
  font-size: 12px;
  padding: 10px 12px;
}

/* ---- grids tighten ---- */
.grid { gap: 10px; }

/* ---- buttons ---- */
.btn {
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

/* ---- a value that is exactly zero is not a signal ---- */
.pos, .neg { font-variant-numeric: tabular-nums; }

/* ---- flatten what predates the tokens ------------------------------------
   These rules hardcoded radii and glows before there was a token to point at.
   Circles stay circles (dots, avatars, the switch thumb); everything
   rectangular squares off. Glow shadows go entirely: on a risk screen a
   coloured halo reads as an alert, and none of these are alerts. */
.auth-card, .modal, .modal-card { border-radius: var(--radius); }
.brand-mark, .logo, .avatar-sq { border-radius: var(--radius-sm); }
.delta { border-radius: var(--radius-sm); padding: 1px 6px; font-size: 11.5px; }
.tooltip, .tip { border-radius: var(--radius-sm); font-size: 11px; }
.bar-track, .bar-fill { border-radius: 1px; }
.skeleton { border-radius: var(--radius-sm); }
.chart-legend i { border-radius: 1px; }
.btn-primary, .brand-mark { box-shadow: none; }
.btn-primary:hover { box-shadow: none; filter: brightness(1.06); }

/* Focus stays obvious — this one is an accessibility affordance, not decoration. */
:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; border-radius: 1px; }

/* ---- the sleeve panel and stream cells, now that this file actually loads --
   These lived in style.css, which nothing ever linked, so the correlation
   panel rendered unstyled and the price flash never fired. */
.corr-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; }
@media (max-width: 900px) { .corr-split { grid-template-columns: 1fr; } }
.sleeve-row { display: flex; align-items: center; gap: 9px; padding: 8px 0;
              border-bottom: 1px solid var(--line-soft); }
.sleeve-row .grow { flex: 1; min-width: 0; }
.swatch { width: 8px; height: 8px; border-radius: 1px; flex-shrink: 0; }
.warn-text { color: var(--amber); }
.corr-figure { display: flex; align-items: flex-end; gap: 18px; padding-top: 11px; }
.corr-legend { line-height: 1.65; }
.corr-worth { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.worth-head { color: var(--text-faint); text-transform: uppercase;
              letter-spacing: .08em; margin-bottom: 8px; font-size: 9.5px; font-weight: 650; }
.worth-grid { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.worth-arrow { color: var(--text-faint); font-size: 15px; }
.chart-empty { display: flex; align-items: center; justify-content: center;
               height: 150px; border: 1px dashed var(--line); border-radius: var(--radius);
               text-align: center; padding: 0 18px; }
@keyframes cellflash { from { background: var(--flash); } to { background: transparent; } }
.flash { animation: cellflash .7s ease-out; }
.streamDot { font-size: 9.5px; letter-spacing: .05em; }
td.c-mark, td.c-pnl, td.c-pnlpct { transition: color .18s ease; }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }

/* ---- colour discipline ---------------------------------------------------
   On a risk screen green and red mean one thing only: direction of money.
   Using jade for a Sign-in button spends that meaning on something that is not
   a gain, and the eye stops reading it as signal. Actions take a neutral
   accent; jade and coral are reserved for P&L, sides, and breaches. */
:root { --action: #33415C; --action-hi: #3E4E6E; --on-action: #F2F5F9; }
@media (prefers-color-scheme: dark) {
  :root { --action: #3A4A6B; --action-hi: #46587D; --on-action: #EDF1F7; }
}
.btn-primary {
  background: var(--action);
  color: var(--on-action);
  border: 1px solid var(--action-hi);
}
.btn-primary:hover { background: var(--action-hi); filter: none; }
.brand-mark { background: var(--action); color: var(--on-action); }

/* The switch that arms live trading is the exception: it SHOULD read as a
   state change with consequences, so it keeps the risk colour. */
.mode-panel.live .pill.bad, .side-tag.short, .neg { color: var(--coral); }
.side-tag.long, .pos { color: var(--jade); }

/* ---- correction ladder ---------------------------------------------------
   Each rung is one correction applied to the raw backtest, ending at the
   figure to actually plan against. The markup existed with no stylesheet
   behind it, so it rendered as run-together prose ("limits20 sleeves…") with
   the percentages orphaned on their own lines. */
.ladder { display: flex; flex-direction: column; }
.rung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 20px;
  row-gap: 6px;
  align-items: baseline;
  padding: 11px 0 12px;
  border-bottom: 1px solid var(--line-soft);
}
.rung:last-child { border-bottom: 0; padding-bottom: 4px; }
.rung-label { min-width: 0; }
.rung-label b {
  display: block;
  font-size: 12.5px;
  font-weight: 620;
  letter-spacing: -0.005em;
  color: var(--text);
}
.rung-label span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}
.rung-val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 640;
  color: var(--text-dim);
  white-space: nowrap;
}
.rung-bar {
  grid-column: 1 / -1;
  height: 3px;
  background: var(--bg-sunken);
  border-radius: 1px;
  overflow: hidden;
}
.rung-bar i {
  display: block;
  height: 100%;
  background: var(--text-faint);
  transition: width .7s var(--ease);
}
/* The last rung is the only number that survived every correction. */
.rung.final .rung-label b { color: var(--text); }
.rung.final .rung-val { color: var(--jade); font-size: 17px; }
.rung.final .rung-bar i { background: var(--jade); }
@media (prefers-reduced-motion: reduce) { .rung-bar i { transition: none; } }

/* ---- wide tables scroll themselves, never the page -----------------------
   A grid or flex item defaults to min-width:auto, which means it refuses to
   shrink below its own content. The 13-column positions table therefore pushed
   the whole Paper page 122px wider than the viewport instead of scrolling
   inside its own frame — the sidebar and every other card moved with it. */
/* .main is the 1fr column of the app grid. A grid item defaults to
   min-width:auto, so it refuses to shrink below its widest child — the
   13-column positions table stretched the column to 1170px inside an 888px
   viewport and dragged the sidebar and every card along with it. */
.main, .view, .view > *, .grid > *, .card { min-width: 0; }
.table-wrap { max-width: 100%; }
.table-wrap table { min-width: max-content; }

/* ---- trade detail drawer -------------------------------------------------
   Slides in from the right rather than opening centred, so the row you clicked
   stays visible behind it and you keep your place in a long table. */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 110;
  background: color-mix(in srgb, #000 42%, transparent);
  animation: fadeIn .18s var(--ease);
}
.drawer-backdrop[hidden] { display: none; }
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(430px, 100%);
  display: flex; flex-direction: column;
  background: var(--bg-elev);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  animation: slideIn .26s var(--ease) both;
}
@keyframes slideIn { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .drawer { animation: none; }
  .drawer-backdrop { animation: none; }
}
.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 18px 13px; border-bottom: 1px solid var(--line);
}
.drawer-eyebrow {
  font-size: 9.5px; font-weight: 650; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 3px;
}
.drawer-head h2 {
  font-size: 17px; font-weight: 650; letter-spacing: -.02em;
  display: flex; align-items: center; gap: 9px;
}
.drawer-body { padding: 4px 18px 26px; overflow-y: auto; flex: 1; }

.d-hero { padding: 14px 0 15px; border-bottom: 1px solid var(--line-soft); }
.d-hero .amt {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 27px; font-weight: 640; letter-spacing: -.02em; display: block;
}
.d-hero .sub { font-size: 11px; color: var(--text-dim); margin-top: 3px; }

.d-sec { padding: 13px 0 3px; }
.d-sec > h3 {
  font-size: 9.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 8px;
}
.d-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 5px 0; border-bottom: 1px solid var(--line-soft);
}
.d-row:last-child { border-bottom: 0; }
.d-row dt { font-size: 11.5px; color: var(--text-dim); }
.d-row dd {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 12px; font-weight: 560; text-align: right; white-space: nowrap;
}
.d-row dd small { display: block; font-family: var(--sans); font-size: 10px;
                  font-weight: 400; color: var(--text-faint); margin-top: 1px; }

/* A level the price has to travel to. The bar shows how far away it is. */
.d-level { padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.d-level:last-child { border-bottom: 0; }
.d-level .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.d-level .name { font-size: 11.5px; color: var(--text-dim); }
.d-level .px { font-family: var(--mono); font-variant-numeric: tabular-nums;
               font-size: 12px; font-weight: 560; }
.d-level .track { height: 2px; background: var(--bg-sunken); margin-top: 6px; border-radius: 1px; }
.d-level .track i { display: block; height: 100%; border-radius: 1px; }

.d-note {
  margin-top: 14px; padding: 10px 11px; border-radius: var(--radius);
  background: var(--bg-sunken); font-size: 11px; line-height: 1.6; color: var(--text-dim);
}
tbody tr[data-trade] { cursor: pointer; }
tbody tr[data-trade]:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }