:root {
  color-scheme: dark;
  --bg: #0c1016;
  --panel: #131923;
  --line: #28303d;
  --muted: #a0aabb;
  --text: #edf2f9;
  --violet: #b2a5ff;
  --green: #89e5bd;
  --red: #f69c9d
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px
}

.app {
  max-width: 1440px;
  margin: auto;
  padding: 0 46px
}

header {
  height: 84px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line)
}

.brand {
  text-decoration: none;
  color: var(--text);
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 5px
}

.brand-light {
  color: #99a4b5;
  font-weight: 500
}

.logo {
  width: 96px;
  height: 58px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 9px
}

.logo img {
  width: 125px;
  height: 125px;
  max-width: none;
  object-fit: contain
}

main {
  padding: 24px 0 30px
}

button {
  font: inherit;
  cursor: pointer;
  border-radius: 7px;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 600;
  min-height: 42px;
  transition: background .15s
}

button:hover {
  filter: brightness(1.15)
}

button:disabled {
  opacity: .45;
  cursor: not-allowed
}

.quiet {
  border: 1px solid #384353;
  background: #1b2430;
  color: var(--text)
}

.primary {
  background: #2563eb;
  border: 1px solid #3b82f6;
  color: #fff
}

#reset {
  background: #b91c1c;
  border-color: #ef4444;
  color: #fff
}

button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px
}

.settings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  padding: 21px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px
}

.settings label {
  display: block;
  font-size: 14px;
  color: var(--muted)
}

label span {
  float: right;
  font-size: 12px
}

.settings input {
  margin-top: 9px;
  width: 100%
}

input[type=number] {
  background: #0f151e;
  color: var(--text);
  border: 1px solid #344051;
  border-radius: 6px;
  padding: 10px 12px;
  font: 600 16px 'DM Sans', sans-serif;
  min-width: 0
}

input:invalid {
  border-color: var(--red)
}

.market {
  padding: 23px 0 18px
}

.market-top {
  display: flex;
  justify-content: flex-start;
  align-items: center
}

.play-controls {
  display: flex;
  gap: 9px
}

.workspace {
  min-width: 0
}

.timeline-slider {
  width: 100%;
  margin: 11px 0 7px;
  accent-color: var(--green);
  cursor: ew-resize;
  height: 26px
}

.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

.panel {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 24px 24px 0;
  overflow: hidden;
  --accent: var(--violet)
}

.real {
  --accent: var(--green)
}

.panel-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px
}

.panel-kicker {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 1.6px;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 7px
}

.swatch {
  width: 8px;
  height: 8px;
  border: 1px solid var(--accent);
  border-radius: 2px
}

.real .swatch {
  background: var(--accent)
}

h2 {
  font-family: Manrope, sans-serif;
  font-size: 22px;
  margin: 7px 0 0;
  letter-spacing: -.5px
}

.chart {
  margin: 13px -8px 0
}

.chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible
}

.chart text {
  font-family: 'DM Sans', sans-serif
}

.metrics {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1fr;
  gap: 12px;
  padding: 19px 0 22px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted)
}

.metrics>div+div {
  border-left: 1px solid var(--line);
  padding-left: 17px
}

.metrics strong {
  display: block;
  color: var(--text);
  font-size: 21px;
  font-weight: 550;
  margin-top: 6px;
  font-variant-numeric: tabular-nums
}

.metrics span {
  font-size: 10px
}

.negative {
  color: var(--red) !important
}

.positive {
  color: var(--green) !important
}

.error {
  color: var(--red);
  font-size: 14px
}

.error[hidden] {
  display: none
}

@media(min-width:1500px) {
  .app {
    padding: 0 60px
  }
}

@media(max-width:1000px) {
  .app {
    padding: 0 24px
  }

  .settings {
    gap: 14px
  }

  .settings {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .panel {
    padding: 18px 16px 0
  }

  .metrics strong {
    font-size: 18px
  }

  .metrics>div+div {
    padding-left: 10px
  }
}

@media(max-width:700px) {
  .app {
    padding: 0 16px
  }

  header {
    height: 66px
  }

  .brand {
    font-size: 19px
  }

  .settings {
    grid-template-columns: 1fr 1fr;
    padding: 16px
  }

  .settings label {
    font-size: 13px
  }

  .market-top {
    align-items: flex-start;
    gap: 12px
  }

  .play-controls {
    flex-direction: column;
    gap: 6px
  }

  .play-controls button {
    padding: 8px 11px;
    font-size: 12px;
    min-height: 36px
  }

  .comparison {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px
  }

  .panel {
    padding: 20px 20px 0
  }

  .panel-kicker {
    font-size: 11px
  }

  .metrics {
    font-size: 12px
  }

  .metrics strong {
    font-size: 21px
  }
}

@media(max-width:700px) {
  .play-controls {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .play-controls button {
    white-space: nowrap
  }
}

@media(max-width:700px) {
  .market-top {
    flex-wrap: wrap
  }

  .play-controls {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .play-controls button {
    padding: 8px 5px;
    font-size: 11px
  }

  .comparison .panel {
    padding: 14px 12px 0
  }

  .comparison h2 {
    font-size: 18px
  }

  .comparison .panel-kicker {
    font-size: 10px;
    letter-spacing: .5px;
    line-height: 1.5;
    min-height: 15px
  }

  .comparison .metrics {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 14px 0;
    font-size: 11px
  }

  .comparison .metrics>div+div {
    border-left: 0;
    padding-left: 0
  }

  .comparison .metrics strong {
    font-size: 18px;
    margin-top: 3px
  }

  .comparison .chart {
    margin-left: -6px;
    margin-right: -6px
  }
}

@media(max-width:400px) {
  .app {
    padding: 0 10px
  }

  .comparison {
    gap: 7px
  }

  .comparison .panel {
    padding: 12px 8px 0
  }

  .comparison h2 {
    font-size: 16px
  }

  .comparison .panel-kicker {
    font-size: 9px;
    letter-spacing: .2px;
    gap: 4px
  }

  .comparison .metrics strong {
    font-size: 17px
  }
}



.panel-stats {
  display: flex;
  gap: 8px;
  justify-self: end;
  max-width: 100%;
  align-items: stretch
}

.stat-badge {
  border: 1px solid var(--line);
  background: #0f151e;
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.stat-badge strong {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 650;
  font-variant-numeric: tabular-nums
}

.layer-badge {
  min-width: 65px
}

.layer-badge strong {
  color: var(--accent)
}

.layer-badge span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px
}

.pip-badge strong {
  font-size: 25px;
  white-space: nowrap
}

@media(max-width:1100px) {
  .panel-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px
  }
}

@media(max-width:700px) {
  .stat-badge {
    padding: 7px 9px
  }

  .layer-badge {
    min-width: 48px
  }

  .stat-badge strong {
    font-size: 27px
  }

  .pip-badge strong {
    font-size: 22px
  }

  .layer-badge span {
    font-size: 11px
  }

  .panel-stats {
    gap: 6px
  }
}

@media(max-width:450px) {
  .panel-stats {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr);
    gap: 5px
  }

  .stat-badge {
    padding: 6px 4px
  }

  .layer-badge {
    min-width: 0
  }

  .stat-badge strong {
    font-size: 24px
  }

  .pip-badge strong {
    font-size: 18px;
    white-space: normal
  }
}



.market-top {
  justify-content: center;
  margin-top: 8px
}

@media(max-width:700px) {
  .play-controls {
    width: auto
  }
}


.lot-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  min-height: 32px
}

.lot-toggle span {
  float: none;
  font-size: inherit
}

.lot-toggle input {
  appearance: none;
  width: 38px;
  height: 22px;
  border-radius: 12px;
  background: #384353;
  margin: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0
}

.lot-toggle input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #edf2f9;
  transition: transform .15s
}

.lot-toggle input:checked {
  background: #2563eb
}

.lot-toggle input:checked::before {
  transform: translateX(16px)
}

.switch-state {
  min-width: 25px;
  font-size: 11px !important
}

.switch-state::after {
  content: "OFF"
}

.lot-toggle input:checked~.switch-state::after {
  content: "ON";
  color: var(--text)
}


.market-top {
  gap: 16px;
  flex-wrap: wrap;
  align-items: center
}

.brand-title {
  line-height: 1.3
}

@media(max-width:760px) {
  .brand {
    font-size: 16px
  }

  .comparison h2 {
    font-size: 16px
  }

  .comparison .panel-kicker {
    font-size: 9px;
    letter-spacing: .3px
  }

  .comparison .stat-badge strong {
    font-size: 21px
  }

  .comparison .pip-badge strong {
    font-size: 17px
  }

  .comparison .layer-badge span {
    font-size: 10px
  }

  .comparison .stat-badge {
    padding: 6px 8px
  }

  .comparison .metrics {
    font-size: 10px;
    gap: 8px
  }

  .comparison .metrics strong {
    font-size: 15px
  }

  .comparison .metrics>div+div {
    padding-left: 7px
  }

  .lot-toggle {
    font-size: 11px;
    gap: 6px
  }
}

@media(max-width:450px) {
  .brand {
    font-size: 14px
  }

  .logo {
    width: 70px;
    height: 48px;
    margin-right: 4px
  }

  .logo img {
    width: 95px;
    height: 95px
  }

  .market-top {
    gap: 8px
  }

  .play-controls {
    gap: 4px
  }

  .comparison .stat-badge strong {
    font-size: 19px
  }

  .comparison .pip-badge strong {
    font-size: 15px
  }

  .comparison h2 {
    font-size: 14px
  }

  .comparison .metrics strong {
    font-size: 14px
  }
}

.brand-title {
  margin: 0;
  font: inherit;
  letter-spacing: inherit
}

#skip-hint {
  color: var(--violet)
}

@media(max-width:700px) {
  .comparison .metrics>div+div {
    padding-left: 0
  }
}

.notes {
  margin-top: 22px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6
}

.notes p {
  margin: 0
}

.notes strong {
  color: #f3c97a;
  font-weight: 650
}

.convention {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 10px
}

.chip {
  border: 1px solid #344051;
  background: #0f151e;
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12px;
  color: var(--text)
}

@media(max-width:700px) {
  .notes {
    padding: 14px;
    font-size: 12px
  }
}

.settings .lot-toggle {
  display: flex;
  align-self: center;
  flex-wrap: wrap
}

.martingale-help {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5
}