/* Leverage Lab (pages/leverage.js) */
.lv-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.lv-bar .foot { flex-basis: 100%; margin: 0; }
.lv-table { max-height: none; }
.lv-table td .sub { white-space: nowrap; }
.lv-L { display: inline-block; font-weight: 800; font-size: 0.8125rem; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line); }
.lv-L.bull { color: var(--bull); border-color: color-mix(in srgb, var(--bull) 45%, transparent); }
.lv-L.bear { color: var(--bear); border-color: color-mix(in srgb, var(--bear) 45%, transparent); }
.lv-legend { margin-top: 12px; }
.lv-foot { margin-top: 18px; }
.lv-grid { margin-top: 16px; }
.lv-fhead { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.lv-pick select { margin-left: 6px; }
.lv-ftitle { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 320px; }
.lv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; flex-basis: 100%; }
.lv-kpis > div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 9px; background: var(--deck-2); border: 1px solid var(--line-soft); min-width: 0; }
.lv-kpis span { font-size: 0.75rem; color: var(--muted); } .lv-kpis b { font-size: 1.25rem; } .lv-kpis small { font-size: 0.6875rem; color: var(--faint); }
.lv-wt td, .lv-wt th { white-space: nowrap; }
.lv-wt tr.lv-bars td { padding-top: 0; border-bottom: 1px solid var(--line); }
.lv-gap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.lv-gp { display: flex; flex-direction: column; gap: 2px; font-size: 0.625rem; color: var(--muted); }
.lv-gp i { display: block; height: 5px; border-radius: 3px; min-width: 2px; }
.lv-gp em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-gp.tr i { background: var(--accent, #4cc3f5); } .lv-gp.dr i { background: var(--bear); } .lv-gp.ca i { background: var(--warn); } .lv-gp.lo i { background: var(--muted); }
.lv-chart { width: 100%; height: auto; display: block; background: var(--deck-2); border-radius: 8px; }
.lv-keys { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 0.75rem; }
.lv-keys i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.lv-trends { display: flex; flex-direction: column; gap: 8px; }
.lv-trends > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lv-trends .tb-fs { margin-left: 4px; }

/* drawdown elevator: two towers of ten floors in 3D */
.lv-falls { margin-bottom: 8px; }
.lv-elev { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; perspective: 900px; }
.lv-tower { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 6px 0; }
.lv-tower small { font-size: 0.6875rem; color: var(--muted); }
.lv-stack { position: relative; width: 90px; height: 170px; margin: 8px 0 4px; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-40deg); }
.lv-stack i { position: absolute; left: 0; bottom: 0; width: 90px; height: 90px; border-radius: 4px; transform: translateZ(calc(var(--i) * 13px));
  background: hsl(205 80% calc(48% + var(--i) * 2%)); box-shadow: 0 0 0 1px rgba(0,0,0,.25); transition: background .25s, transform .25s; }
.lv-stack i.gone { background: color-mix(in srgb, var(--bear) 14%, transparent); outline: 1px dashed color-mix(in srgb, var(--bear) 60%, transparent); box-shadow: none; }
.lv-tower .warn { color: var(--warn); }

/* options */
.lv-opt { display: grid; grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.2fr) minmax(220px, 0.9fr); gap: 16px; align-items: start; }
.lv-gauge, .lv-xlate { display: flex; flex-direction: column; gap: 6px; }
.lv-gauge svg { width: 200px; max-width: 100%; }
.lv-gauge b { font-size: 1.5rem; } .lv-gauge small, .lv-xlate small { font-size: 0.6875rem; color: var(--muted); }
.lv-xlate input { width: 120px; margin-left: 6px; }
#lvKout { font-size: 0.9375rem; }

/* decay map: a terrain of tiles in 3D */
.lv-map { overflow: hidden; }
.lv-scene { perspective: 1200px; perspective-origin: 50% 0%; height: 380px; display: flex; justify-content: center; align-items: center; }
.lv-terrain { display: grid; grid-template-columns: repeat(var(--cols), 58px); gap: 6px; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-30deg); }
.lv-tile { position: relative; width: 58px; height: 34px; border-radius: 4px; transform-style: preserve-3d; transform: translateZ(var(--h));
  display: flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: 700; color: #fff; }
.lv-tile.pos { background: color-mix(in srgb, #3b9ddd calc(var(--a) * 100%), var(--deck-2)); }
.lv-tile.neg { background: color-mix(in srgb, #ff7a59 calc(var(--a) * 100%), var(--deck-2)); }
.lv-tile.mine { outline: 2px solid var(--brass); }
.lv-tile::after { content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: var(--h); transform-origin: top; transform: rotateX(-90deg); background: rgba(0, 0, 0, .28); }
.lv-tile span { transform: translateZ(1px); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.lv-axes { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.75rem; color: var(--muted); margin: 6px 0 12px; }
.lv-mapt td, .lv-mapt th { text-align: right; font-variant-numeric: tabular-nums; }
.lv-own input { width: 260px; margin-left: 6px; }

/* learn */
.lv-learn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lv-learn .panel + .panel { margin-top: 0; }
.lv-card { display: flex; flex-direction: column; gap: 8px; }
.lv-card p { margin: 0; color: var(--muted); font-size: 0.875rem; }
.lv-card a { margin-top: auto; font-size: 0.8125rem; }
.lv-n { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8125rem; background: var(--deck-2); border: 1px solid var(--line); }
.lv-research { margin-top: 16px; }
.lv-research .kv span:last-child { text-align: right; max-width: 70%; }

@media (max-width: 900px) {
  .lv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-opt, .lv-learn { grid-template-columns: minmax(0, 1fr); }
  .lv-scene { height: 300px; }
  .lv-terrain { grid-template-columns: repeat(var(--cols), 38px); gap: 4px; }
  .lv-tile { width: 38px; height: 24px; font-size: 0.5rem; }
}