:root {
  --dash-accent: #27d8bd;
  --dash-accent-soft: rgba(39, 216, 189, 0.12);
  --dash-pink: #ff3f86;
  --dash-bg: #030c12;
  --dash-panel: rgba(4, 15, 22, 0.92);
  --dash-line: rgba(127, 165, 174, 0.24);
  --dash-muted: #9ca8aa;
}

/* Shared dashboard framing for Positions and History. */
body:has(#positions-view.active),
body:has(#history-view.active),
body:has(#pp-view.active) {
  background: var(--dash-bg) !important;
  background-image:
    radial-gradient(circle at 15% 28%, rgba(24, 113, 110, 0.07), transparent 34%),
    radial-gradient(circle at 82% 62%, rgba(12, 65, 75, 0.07), transparent 36%) !important;
  color: #f2f5f4;
}

body:has(#positions-view.active) .app-glow,
body:has(#history-view.active) .app-glow,
body:has(#positions-view.active) .graffiti-deco,
body:has(#history-view.active) .graffiti-deco,
body:has(#pp-view.active) .app-glow,
body:has(#pp-view.active) .graffiti-deco {
  display: none !important;
}

body:has(#positions-view.active) .app-nav,
body:has(#history-view.active) .app-nav,
body:has(#pp-view.active) .app-nav {
  height: 106px !important;
  min-height: 106px !important;
  padding: 0 30px !important;
  gap: 58px !important;
  border-bottom: 1px solid var(--dash-line) !important;
  background: rgba(2, 10, 15, 0.96) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
}

body:has(#positions-view.active) .app-brand,
body:has(#history-view.active) .app-brand,
body:has(#pp-view.active) .app-brand {
  width: 64px !important;
  min-width: 64px !important;
  height: 72px !important;
  display: grid !important;
  place-items: center;
  position: relative;
}

body:has(#positions-view.active) .app-brand > *,
body:has(#history-view.active) .app-brand > *,
body:has(#pp-view.active) .app-brand > * {
  display: none !important;
}

body:has(#positions-view.active) .app-brand::before,
body:has(#history-view.active) .app-brand::before,
body:has(#pp-view.active) .app-brand::before {
  content: "PP" !important;
  color: var(--dash-accent);
  font: 800 38px/0.8 "Manrope", sans-serif;
  letter-spacing: -10px;
  transform: skew(-8deg) rotate(-2deg);
}

body:has(#positions-view.active) .brand-copy,
body:has(#history-view.active) .brand-copy,
body:has(#pp-view.active) .brand-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 205px;
  margin-left: -42px;
}

body:has(#positions-view.active) .brand-copy b,
body:has(#history-view.active) .brand-copy b,
body:has(#pp-view.active) .brand-copy b {
  color: #f1f4f3;
  font: 700 21px/1.05 "Manrope", sans-serif;
  letter-spacing: -0.8px;
}

body:has(#positions-view.active) .brand-copy b span,
body:has(#history-view.active) .brand-copy b span,
body:has(#pp-view.active) .brand-copy b span {
  color: var(--dash-accent);
}

body:has(#positions-view.active) .brand-copy small,
body:has(#history-view.active) .brand-copy small,
body:has(#pp-view.active) .brand-copy small {
  margin-top: 5px;
  color: #a2aaac;
  font: 12px/1 "Manrope", sans-serif;
}

body:has(#positions-view.active) .app-nav nav,
body:has(#history-view.active) .app-nav nav,
body:has(#pp-view.active) .app-nav nav {
  height: 100%;
  display: flex;
  align-items: stretch;
  gap: 36px !important;
  margin-left: 12px;
}

body:has(#positions-view.active) .nav-tab,
body:has(#history-view.active) .nav-tab,
body:has(#pp-view.active) .nav-tab {
  min-width: 110px;
  padding: 0 12px !important;
  border: 0 !important;
  color: #d9dddd !important;
  font: 500 16px/106px "DM Mono", monospace !important;
  letter-spacing: -0.4px !important;
  text-transform: uppercase;
  transform: none !important;
  text-shadow: none !important;
}

body:has(#positions-view.active) .nav-tab::after,
body:has(#history-view.active) .nav-tab::after,
body:has(#pp-view.active) .nav-tab::after {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 3px !important;
  background: transparent !important;
  clip-path: none !important;
}

body:has(#positions-view.active) .nav-tab.active,
body:has(#history-view.active) .nav-tab.active,
body:has(#pp-view.active) .nav-tab.active {
  color: var(--dash-accent) !important;
}

body:has(#positions-view.active) .nav-tab.active::after,
body:has(#history-view.active) .nav-tab.active::after,
body:has(#pp-view.active) .nav-tab.active::after {
  background: var(--dash-accent) !important;
}

body:has(#positions-view.active) .wallet-area,
body:has(#history-view.active) .wallet-area,
body:has(#pp-view.active) .wallet-area {
  gap: 18px;
  margin-left: auto;
}

body:has(#positions-view.active) .balance,
body:has(#positions-view.active) .wallet,
body:has(#history-view.active) .balance,
body:has(#history-view.active) .wallet,
body:has(#pp-view.active) .balance,
body:has(#pp-view.active) .wallet {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  padding: 0 20px !important;
  border: 1px solid var(--dash-line) !important;
  border-radius: 8px !important;
  background: rgba(3, 11, 16, 0.92) !important;
  color: #eef2f1 !important;
  clip-path: none !important;
  box-shadow: none !important;
  font: 500 15px "DM Mono", monospace !important;
  text-transform: none !important;
}

body:has(#positions-view.active) .balance::before,
body:has(#history-view.active) .balance::before,
body:has(#pp-view.active) .balance::before {
  content: "$";
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  margin-right: 10px;
  border: 2px solid var(--dash-accent);
  border-radius: 50%;
  color: var(--dash-accent);
  font: 700 13px/1 "DM Mono", monospace;
}

body:has(#positions-view.active) .wallet i,
body:has(#history-view.active) .wallet i,
body:has(#pp-view.active) .wallet i {
  width: 11px;
  height: 11px;
  margin-right: 12px;
  background: var(--dash-accent) !important;
  box-shadow: 0 0 10px rgba(39, 216, 189, 0.35);
}

body:has(#positions-view.active) .wallet-area::after,
body:has(#history-view.active) .wallet-area::after,
body:has(#pp-view.active) .wallet-area::after {
  content: "☰";
  margin-left: 60px;
  color: #e6e9e8;
  font: 30px/1 Arial, sans-serif;
}

body:has(#positions-view.active) .app-shell,
body:has(#history-view.active) .app-shell,
body:has(#pp-view.active) .app-shell {
  width: min(1600px, calc(100% - 64px)) !important;
  min-height: calc(100vh - 190px);
  margin: 0 auto !important;
  padding: 48px 0 116px !important;
}

/* Create Market modal. */
#market-dialog {
  width: min(1040px, calc(100vw - 28px)) !important;
  max-width: 1040px !important;
  max-height: calc(100vh - 28px) !important;
  overflow: auto;
}

#market-dialog .dialog-card {
  padding: 34px 36px 32px !important;
  border: 1px solid rgba(39, 216, 189, 0.35) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(39, 216, 189, 0.055), transparent 35%),
    linear-gradient(145deg, #06131a, #020a0f 72%) !important;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.78) !important;
}

#market-dialog .dialog-title {
  min-height: 72px;
}

#market-dialog .dialog-title h2 {
  position: relative;
  color: #f4f6f5 !important;
  font: 700 31px/1 "Manrope", sans-serif !important;
  letter-spacing: 0 !important;
}

#market-dialog .dialog-title h2 span {
  color: inherit !important;
}

#market-dialog .dialog-title h2::after {
  content: "1v1 prediction market";
  display: block;
  margin-top: 15px;
  color: #8e9a9c;
  font: 400 17px/1 "Manrope", sans-serif;
  letter-spacing: 0;
}

#market-dialog .close {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  padding: 0 !important;
  color: #aeb6b7 !important;
  font: 300 40px/1 "Manrope", sans-serif !important;
}

#market-dialog .form-grid {
  grid-template-columns: 1fr 1fr;
  column-gap: 40px !important;
  row-gap: 30px !important;
  margin: 25px 0 24px !important;
}

#market-dialog .form-grid label,
#market-dialog .expiry-heading {
  color: #a5adaf !important;
  font: 500 13px/1 "Manrope", sans-serif !important;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

#market-dialog .form-grid > label:nth-child(2),
#market-dialog .form-grid > label:nth-child(4) {
  font-size: 0 !important;
}

#market-dialog .form-grid > label:nth-child(2)::before {
  content: "TARGET PRICE (USDG)";
  font: 500 13px/1 "Manrope", sans-serif;
}

#market-dialog .form-grid > label:nth-child(4)::before {
  content: "BET AMOUNT (USDG)";
  font: 500 13px/1 "Manrope", sans-serif;
}

#market-dialog .form-grid input,
#market-dialog .form-grid select {
  height: 64px;
  margin-top: 12px !important;
  padding: 0 20px !important;
  border: 1px solid rgba(127, 165, 174, 0.35) !important;
  border-radius: 8px !important;
  background: rgba(2, 11, 16, 0.72) !important;
  color: #f2f4f3 !important;
  font: 500 23px/1 "Manrope", sans-serif !important;
}

#market-dialog .form-grid > label:first-child select {
  padding-left: 62px !important;
}

#market-dialog .form-grid > label:first-child::after {
  content: "F";
  position: absolute;
  left: 18px;
  top: 46px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #eee;
  border-radius: 50%;
  background: linear-gradient(135deg, #8156e7, #af84ff);
  color: #fff;
  font: 700 20px/1 Georgia, serif;
}

#market-dialog .form-grid > label:nth-child(2) input {
  border-color: rgba(39, 216, 189, 0.82) !important;
}

#market-dialog .min-bet {
  top: 1px !important;
  right: 0 !important;
  color: #aab2b3 !important;
  font: 500 13px/1 "Manrope", sans-serif !important;
  text-transform: uppercase;
}

#market-dialog .form-grid small {
  right: 20px !important;
  bottom: 25px !important;
  color: #7d888a !important;
  font: 500 13px/1 "Manrope", sans-serif !important;
}

#market-dialog .side-select {
  grid-template-columns: 1fr 1fr;
  gap: 0 !important;
  margin-top: 12px;
}

#market-dialog .side {
  height: 64px;
  border: 1px solid rgba(127, 165, 174, 0.35) !important;
  border-radius: 0 8px 8px 0 !important;
  background: rgba(2, 11, 16, 0.72) !important;
  color: #c2c8c9 !important;
  font: 500 18px/1 "Manrope", sans-serif !important;
}

#market-dialog .side:first-child {
  border-radius: 8px 0 0 8px !important;
}

#market-dialog .side.active {
  border-color: rgba(39, 216, 189, 0.82) !important;
  background: rgba(39, 216, 189, 0.1) !important;
  color: var(--dash-accent) !important;
}

#market-dialog .match-window {
  display: grid;
  gap: 20px;
}

#market-dialog .expiry-heading {
  min-height: 56px;
  display: flex !important;
  align-items: center;
  padding: 0 20px 0 58px;
  border: 1px solid var(--dash-line);
  border-radius: 8px;
  background: rgba(4, 14, 20, 0.54);
  text-transform: none;
}

#market-dialog .expiry-heading::before {
  content: "i";
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  position: absolute;
  margin-left: -39px;
  border: 2px solid #9aa5a7;
  border-radius: 50%;
  color: #9aa5a7;
  font: 700 14px/1 Georgia, serif;
}

#market-dialog .expiry-heading span {
  color: #b9c0c1 !important;
  font: 400 13px/1.4 "Manrope", sans-serif !important;
}

#market-dialog .expiry-inputs {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px !important;
}

#market-dialog .expiry-inputs > div,
#market-dialog .no-expiry-field {
  height: 86px;
  margin: 0 !important;
  border: 1px solid rgba(127, 165, 174, 0.32) !important;
  border-radius: 7px !important;
  background: rgba(2, 11, 16, 0.7) !important;
}

#market-dialog .expiry-inputs input {
  height: 52px;
  margin: 0 !important;
  padding: 10px 12px 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center;
  font: 500 26px/1 "Manrope", sans-serif !important;
}

#market-dialog .expiry-inputs > div > span {
  top: auto !important;
  bottom: 14px !important;
  color: #9da6a8 !important;
  font: 500 12px/1 "Manrope", sans-serif !important;
  text-transform: uppercase;
}

#market-dialog .no-expiry-field span {
  color: var(--dash-accent) !important;
  font: 500 16px/1 "Manrope", sans-serif !important;
  text-transform: uppercase;
}

#market-dialog .no-expiry-field span::before {
  content: "▣";
  margin-right: 14px;
}

#market-dialog .no-expiry-field:has(input:checked) {
  border-color: var(--dash-accent) !important;
  background: var(--dash-accent-soft) !important;
}

#market-dialog .payment {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 30px;
  margin-bottom: 20px !important;
  padding: 20px 6px !important;
  border-color: var(--dash-line) !important;
  color: #aeb7b8 !important;
  font: 500 15px/1.2 "Manrope", sans-serif !important;
  text-transform: uppercase;
}

#market-dialog .payment > span {
  position: relative;
  padding-left: 36px;
}

#market-dialog .payment > span::before {
  position: absolute;
  left: 0;
  color: #aeb7b8;
  font: 600 20px/1 "DM Mono", monospace;
}

#market-dialog .payment > span:nth-of-type(1)::before { content: "*"; color: var(--dash-accent); }
#market-dialog .payment > span:nth-of-type(2)::before { content: "%"; }
#market-dialog .payment > span:nth-of-type(3)::before { content: "$"; }

#market-dialog .payment b {
  min-width: 170px;
  color: #edf1f0 !important;
  text-align: right;
  font: 500 19px/1.2 "DM Mono", monospace !important;
}

#market-dialog .payment .if-you-win-value {
  color: var(--dash-accent) !important;
}

#market-dialog .payment b:last-child {
  padding-bottom: 8px;
  border-bottom: 4px solid var(--dash-accent);
}

#market-dialog #create-submit {
  min-height: 66px;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #4cd2c1, #59d6c7) !important;
  color: #03100f !important;
  clip-path: none !important;
  font: 800 21px/1 "DM Mono", monospace !important;
  text-transform: uppercase;
}

/* Confirm Position modal. */
#join-dialog {
  width: min(540px, calc(100vw - 28px)) !important;
  max-width: 540px !important;
  max-height: calc(100vh - 24px) !important;
  overflow: auto !important;
}

#join-dialog > form.dialog-title {
  padding: 20px 18px 18px !important;
  border: 1px solid rgba(39, 216, 189, 0.28) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #06131a, #020a0f 74%) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.78) !important;
}

#join-dialog .eyebrow {
  color: var(--dash-accent) !important;
  font: 500 10px/1 "DM Mono", monospace !important;
  letter-spacing: 1px !important;
}

#join-dialog #join-title {
  margin-top: 12px;
  color: #f3f5f4;
  font: 700 31px/1 "Manrope", sans-serif !important;
  letter-spacing: -1px !important;
  text-transform: capitalize;
}

#join-dialog:has(#join-submit[data-side="UP"]) #join-title::after {
  content: " ↑";
  color: var(--dash-accent);
}

#join-dialog:has(#join-submit[data-side="DOWN"]) #join-title::after {
  content: " ↓";
  color: var(--dash-pink);
}

#join-dialog > form.dialog-title > .close {
  top: 14px !important;
  right: 14px !important;
  width: 31px !important;
  height: 31px !important;
  border: 1px solid var(--dash-line) !important;
  border-radius: 5px !important;
  color: var(--dash-accent) !important;
  font-size: 22px !important;
}

#join-dialog .confirm-market {
  margin: 17px 0 14px !important;
  padding: 14px 13px !important;
  border: 1px solid var(--dash-line) !important;
  border-radius: 7px !important;
  background: rgba(3, 13, 19, 0.75) !important;
}

#join-dialog .challenge-head {
  color: #909b9d;
  font: 500 9px/1 "DM Mono", monospace !important;
  text-transform: uppercase;
}

#join-dialog .challenge-token {
  color: var(--dash-accent) !important;
}

#join-dialog .prediction-flow {
  grid-template-columns: 1fr 55px 1fr !important;
  min-height: 92px !important;
  margin-top: 12px;
}

#join-dialog .prediction-choice {
  height: 88px !important;
  min-height: 88px !important;
  padding: 10px !important;
  border: 1px solid rgba(39, 216, 189, 0.35) !important;
  border-radius: 5px !important;
  background: rgba(4, 25, 27, 0.56) !important;
}

#join-dialog .prediction-choice.challenger {
  border-color: rgba(255, 63, 134, 0.48) !important;
  background: rgba(43, 8, 27, 0.55) !important;
}

#join-dialog .prediction-choice span {
  color: var(--dash-accent) !important;
  font: 500 9px/1 "DM Mono", monospace !important;
  text-transform: uppercase;
}

#join-dialog .prediction-choice.challenger span,
#join-dialog .prediction-choice.challenger b {
  color: var(--dash-pink) !important;
}

#join-dialog .prediction-choice b {
  color: var(--dash-accent) !important;
  font: 700 27px/1 "Manrope", sans-serif !important;
}

#join-dialog .flow-arrow {
  width: 48px;
  height: 48px !important;
  align-self: center;
  border: 1px solid var(--dash-line);
  border-radius: 50%;
  color: #eef2f1 !important;
  font: 700 18px/48px "DM Mono", monospace !important;
}

#join-dialog .target-strip {
  min-height: 54px !important;
  margin-top: 12px !important;
  padding: 8px 16px !important;
  border: 1px solid rgba(39, 216, 189, 0.55) !important;
  border-radius: 5px !important;
  background: rgba(3, 13, 19, 0.72) !important;
  box-shadow: none !important;
}

#join-dialog .target-strip > div:first-child {
  width: 100%;
  justify-content: space-between !important;
}

#join-dialog .target-strip span {
  color: #889496 !important;
  font: 500 9px/1 "DM Mono", monospace !important;
}

#join-dialog .target-strip b {
  color: #f0f3f2 !important;
  font: 600 24px/1 "DM Mono", monospace !important;
  text-shadow: none !important;
}

#join-dialog .payment {
  gap: 12px 20px !important;
  margin: 0 0 14px !important;
  padding: 14px 9px !important;
  border-color: var(--dash-line) !important;
  color: #a9b2b4 !important;
  font: 500 11px/1.2 "DM Mono", monospace !important;
}

#join-dialog .payment b {
  min-width: 150px;
  color: #eef1f0 !important;
  text-align: right;
  font: 500 13px/1.2 "DM Mono", monospace !important;
}

#join-dialog .payment .if-you-win-value {
  color: var(--dash-accent) !important;
}

#join-dialog .payment b:last-child {
  padding-bottom: 6px;
  border-bottom: 3px solid var(--dash-pink);
}

#join-dialog #join-submit {
  min-height: 45px;
  padding: 0 18px !important;
  border-radius: 5px !important;
  background: linear-gradient(135deg, #20d2b7, #28d9bd) !important;
  color: #03100f !important;
  clip-path: none !important;
  font: 800 14px/1 "DM Mono", monospace !important;
  text-transform: uppercase;
}

#join-dialog .form-note {
  margin-top: 18px !important;
  padding: 12px 14px 12px 38px;
  border: 1px solid var(--dash-line);
  border-radius: 5px;
  color: #818d8f !important;
  font: 400 8px/1.55 "Manrope", sans-serif !important;
  text-align: left;
}

/* Positions page. */
#positions-view .position-header {
  margin-bottom: 30px !important;
}

#positions-view .position-header h1 {
  color: #f3f5f4;
  font: 700 31px/1 "Manrope", sans-serif !important;
  letter-spacing: -1.2px !important;
  text-shadow: none !important;
}

#positions-view .position-header h1::after,
#positions-view .positions-badge {
  display: none !important;
}

#positions-view .position-filter {
  margin-bottom: 31px !important;
}

#positions-view .position-filter select {
  width: 226px;
  height: 58px;
  padding: 0 20px !important;
  border: 1px solid var(--dash-line) !important;
  border-radius: 7px !important;
  background: rgba(3, 12, 18, 0.86) !important;
  color: #f0f3f2 !important;
  font: 500 16px/1 "Manrope", sans-serif !important;
}

#positions-view .positions-table {
  border: 1px solid var(--dash-line) !important;
  border-radius: 8px !important;
  background: rgba(3, 13, 19, 0.7) !important;
  box-shadow: none !important;
}

#positions-view .positions-head,
#positions-view .position-row {
  grid-template-columns: 1.45fr .68fr .92fr .9fr 1.05fr 1.2fr .85fr !important;
  gap: 20px;
}

#positions-view .positions-head {
  height: 62px;
  padding: 0 24px;
  border-color: var(--dash-line) !important;
  background: rgba(5, 16, 23, 0.72) !important;
  color: #aab3b4 !important;
  font: italic 500 12px/1 "DM Mono", monospace !important;
  text-transform: uppercase;
}

#positions-view .positions-head > span:last-child,
#positions-view .position-row .row-next {
  display: none !important;
}

#positions-view .position-row {
  min-height: 112px;
  margin: 0 !important;
  padding: 18px 24px;
  border: 0 !important;
  border-top: 1px solid var(--dash-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #edf1f0;
  font: 500 15px/1.25 "DM Mono", monospace !important;
}

#positions-view .position-token .coin {
  width: 58px !important;
  height: 58px !important;
  border: 1px solid #ccb7ff !important;
  background: linear-gradient(135deg, #8156e7, #af84ff) !important;
  color: #150c23 !important;
  font: 700 30px/1 Georgia, serif !important;
}

#positions-view .position-token strong {
  color: #f2f5f4;
  font: 700 18px/1 "Manrope", sans-serif !important;
}

#positions-view .side-pill {
  padding: 8px 13px !important;
  border-radius: 4px !important;
  font: italic 700 13px/1 "DM Mono", monospace !important;
}

#positions-view .side-pill.up {
  color: var(--dash-accent) !important;
  border-color: rgba(39, 216, 189, 0.28) !important;
  background: rgba(39, 216, 189, 0.1) !important;
}

#positions-view .side-pill.down {
  color: var(--dash-pink) !important;
  border-color: rgba(255, 63, 134, 0.28) !important;
  background: rgba(255, 63, 134, 0.12) !important;
}

#positions-view .win-estimate {
  color: var(--dash-accent) !important;
  font-size: 16px !important;
}

#positions-view .status-pill {
  min-height: 36px;
  align-items: center;
  padding: 7px 12px !important;
  border-color: rgba(255, 189, 58, 0.18) !important;
  background: rgba(255, 189, 58, 0.1) !important;
  color: #ffc34d !important;
  font: italic 700 12px/1.05 "DM Mono", monospace !important;
  text-transform: uppercase;
}

#positions-view .status-pill::before {
  background: #ffc34d !important;
}

#positions-view .status-pill:not(.waiting) {
  border-color: rgba(39, 216, 189, 0.2) !important;
  background: rgba(39, 216, 189, 0.1) !important;
  color: var(--dash-accent) !important;
}

#positions-view .status-pill:not(.waiting)::before {
  background: var(--dash-accent) !important;
}

#positions-view .positions-pagination {
  padding: 36px 0 8px !important;
  gap: 38px;
  color: #687679 !important;
  font: 20px/1 "DM Mono", monospace !important;
}

#positions-view .positions-pagination b {
  width: 58px;
  height: 50px;
  display: grid;
  place-items: center;
  margin: -12px 0 0;
  padding: 0 !important;
  border-color: var(--dash-accent) !important;
  color: var(--dash-accent) !important;
}

/* History page. */
#history-view .history-top {
  align-items: center !important;
  margin-bottom: 18px !important;
}

#history-view .history-top h1 {
  color: #f3f5f4;
  font: 700 31px/1 "DM Mono", monospace !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  text-shadow: none !important;
}

#history-view .history-top h1::after {
  display: none !important;
}

#history-view .history-stats {
  gap: 18px !important;
}

#history-view .history-stats div,
#history-view .history-stats .history-pnl-stat {
  width: 194px !important;
  min-height: 88px;
  padding: 18px 24px !important;
  border: 1px solid var(--dash-line) !important;
  border-radius: 7px !important;
  background: rgba(3, 13, 19, 0.72) !important;
  text-align: left;
}

#history-view .history-stats span {
  color: #aab3b4 !important;
  font: 500 13px/1 "Manrope", sans-serif !important;
  text-transform: uppercase;
}

#history-view .history-stats b,
#history-view .history-stats .history-pnl-stat b {
  margin-top: 12px;
  color: var(--dash-accent) !important;
  font: 600 24px/1 "DM Mono", monospace !important;
}

#history-view .history-stats b.lost {
  color: #ff4b5d !important;
}

#history-view .history-pnl {
  margin: 0 0 20px !important;
  padding: 24px 26px 18px !important;
  border: 1px solid var(--dash-line) !important;
  border-radius: 7px !important;
  background: rgba(3, 13, 19, 0.72) !important;
}

#history-view .history-pnl-heading {
  font: 500 14px/1 "Manrope", sans-serif !important;
}

#history-view .history-pnl-heading b {
  color: var(--dash-accent) !important;
  font: 600 20px/1 "DM Mono", monospace !important;
}

#history-view .history-pnl-heading small {
  color: #a9b2b3 !important;
  font: 500 13px/1 "Manrope", sans-serif !important;
}

#history-view .history-pnl-chart {
  height: 210px;
  margin-top: 22px;
}

#history-view .history-pnl-plot {
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 68px, rgba(127, 165, 174, 0.12) 69px);
}

#history-view .history-pnl-plot svg path.pnl-line {
  stroke: #5be0cb !important;
}

#history-view .history-pnl-plot svg path.pnl-fill {
  fill: rgba(54, 201, 179, 0.2) !important;
}

#history-view .history-layout {
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  gap: 14px 20px !important;
}

#history-view .history-sidebar {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: block;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#history-view .history-main {
  display: contents;
}

#history-view .history-token-current {
  width: 100% !important;
  height: 53px;
  padding: 0 20px !important;
  border: 1px solid var(--dash-line) !important;
  border-radius: 7px !important;
  background: rgba(3, 13, 19, 0.76) !important;
  color: #f0f3f2 !important;
  font: 500 14px/1 "Manrope", sans-serif !important;
}

#history-view .history-token-current i {
  font-size: 0 !important;
}

#history-view .history-token-current i::after {
  content: "⌄";
  color: #dfe4e3;
  font: 18px/1 Arial, sans-serif;
}

#history-view .history-token-list {
  width: 100% !important;
  position: absolute;
  z-index: 10;
  margin-top: 6px;
  border: 1px solid var(--dash-line) !important;
  border-radius: 7px;
  background: #06131a !important;
}

#history-view .history-periods {
  grid-column: 2;
  grid-row: 1;
  min-height: 53px;
  gap: 5px !important;
  padding: 0 !important;
  border: 0 !important;
}

#history-view .history-period {
  min-width: 82px;
  min-height: 53px;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #d2d8d7 !important;
  font: 500 13px/1 "DM Mono", monospace !important;
  text-transform: uppercase;
}

#history-view .history-period.active {
  border: 1px solid var(--dash-line) !important;
  background: rgba(6, 20, 27, 0.82) !important;
  color: var(--dash-accent) !important;
}

#history-view .history-table {
  grid-column: 1 / -1;
  grid-row: 2;
  padding: 0 20px !important;
  border: 1px solid var(--dash-line) !important;
  border-radius: 7px !important;
  background: rgba(3, 13, 19, 0.68) !important;
}

#history-view .history-head,
#history-view .history-row {
  grid-template-columns: 1.2fr .7fr .9fr 1.12fr 1.05fr .8fr .95fr !important;
  gap: 18px;
}

#history-view .history-head {
  height: 54px;
  color: #aab3b4 !important;
  font: 500 12px/1 "Manrope", sans-serif !important;
  text-transform: uppercase;
}

#history-view .history-row {
  min-height: 78px;
  border-color: var(--dash-line) !important;
  color: #edf1f0;
  font: 500 14px/1.3 "DM Mono", monospace !important;
}

#history-view .history-token-cell {
  color: #f0f3f2;
  font: 600 15px/1 "Manrope", sans-serif !important;
}

#history-view .history-token-cell i {
  width: 42px;
  height: 42px;
  border: 1px solid #ccb7ff;
  background: linear-gradient(135deg, #8156e7, #af84ff) !important;
  color: #150c23 !important;
  font-size: 21px;
}

#history-view .history-side,
#history-view .history-role,
#history-view .history-result {
  padding: 8px 12px !important;
  font: 600 12px/1 "DM Mono", monospace !important;
  text-transform: uppercase;
}

#history-view .history-side.up,
#history-view .history-role.creator,
#history-view .history-result.won {
  color: var(--dash-accent) !important;
  background: rgba(39, 216, 189, 0.1) !important;
}

#history-view .history-side.down,
#history-view .history-role.challenger,
#history-view .history-result.lost {
  color: var(--dash-pink) !important;
  background: rgba(255, 63, 134, 0.12) !important;
}

#history-view .history-result.canceled {
  color: #d7dddc !important;
  background: rgba(127, 145, 149, 0.18) !important;
}

#history-view .history-ended {
  color: #d4dad9 !important;
  font-size: 13px !important;
}

#history-view .history-footer {
  grid-column: 1 / -1;
  grid-row: 3;
  padding: 30px 0 0 !important;
}

/* High-fidelity Create Market proportions from the approved reference. */
#market-dialog {
  width: min(1380px, calc(100vw - 12px)) !important;
  max-width: 1380px !important;
  max-height: calc(100vh - 12px) !important;
}

#market-dialog .dialog-card {
  min-height: min(1120px, calc(100vh - 12px));
  padding: 42px 46px 44px !important;
}

#market-dialog .dialog-title {
  min-height: 104px;
}

#market-dialog .dialog-title h2 {
  font-size: 38px !important;
}

#market-dialog .dialog-title h2::after {
  margin-top: 18px;
  font-size: 22px;
}

#market-dialog .close {
  width: 54px;
  height: 54px;
  font-size: 48px !important;
}

#market-dialog .form-grid {
  column-gap: 52px !important;
  row-gap: 44px !important;
  margin: 24px 0 32px !important;
}

#market-dialog .form-grid label,
#market-dialog .expiry-heading,
#market-dialog .form-grid > label:nth-child(2)::before,
#market-dialog .form-grid > label:nth-child(4)::before {
  font-size: 16px !important;
}

#market-dialog .form-grid input,
#market-dialog .form-grid select {
  height: 84px;
  margin-top: 16px !important;
  padding: 0 26px !important;
  font-size: 30px !important;
}

#market-dialog .form-grid > label:first-child select {
  padding-left: 82px !important;
}

#market-dialog .form-grid > label:first-child::after {
  left: 26px;
  top: 54px;
  width: 43px;
  height: 43px;
  font-size: 25px;
}

#market-dialog .min-bet {
  font-size: 16px !important;
}

#market-dialog .form-grid small {
  right: 26px !important;
  bottom: 33px !important;
  font-size: 16px !important;
}

#market-dialog .side-select {
  margin-top: 16px;
}

#market-dialog .side {
  height: 84px;
  font-size: 24px !important;
}

#market-dialog .match-window {
  gap: 28px;
}

#market-dialog .expiry-heading {
  min-height: 72px;
  padding: 0 28px 0 80px;
}

#market-dialog .expiry-heading::before {
  width: 30px;
  height: 30px;
  margin-left: -51px;
  font-size: 18px;
}

#market-dialog .expiry-heading span {
  font-size: 17px !important;
}

#market-dialog .expiry-inputs {
  gap: 18px !important;
}

#market-dialog .expiry-inputs > div,
#market-dialog .no-expiry-field {
  height: 114px;
}

#market-dialog .expiry-inputs input {
  height: 72px;
  padding-top: 14px !important;
  font-size: 34px !important;
}

#market-dialog .expiry-inputs > div > span {
  bottom: 18px !important;
  font-size: 15px !important;
}

#market-dialog .no-expiry-field span {
  font-size: 20px !important;
}

#market-dialog .payment {
  gap: 22px 36px;
  margin-bottom: 27px !important;
  padding: 28px 8px 25px !important;
  font-size: 18px !important;
}

#market-dialog .payment > span {
  padding-left: 48px;
}

#market-dialog .payment > span::before {
  font-size: 25px;
}

#market-dialog .payment b {
  min-width: 235px;
  font-size: 24px !important;
}

#market-dialog .payment b:last-child {
  padding-bottom: 11px;
  border-bottom-width: 5px;
}

#market-dialog #create-submit {
  position: relative;
  min-height: 88px;
  font-size: 25px !important;
}

#market-dialog #create-submit::after {
  content: "→";
  position: absolute;
  right: 31px;
  top: 50%;
  transform: translateY(-52%);
  font: 400 40px/1 Arial, sans-serif;
}

@media (max-height: 960px) and (min-width: 901px) {
  #market-dialog .dialog-card {
    min-height: calc(100vh - 12px);
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }

  #market-dialog .dialog-title {
    min-height: 82px;
  }

  #market-dialog .dialog-title h2 {
    font-size: 32px !important;
  }

  #market-dialog .dialog-title h2::after {
    margin-top: 11px;
    font-size: 17px;
  }

  #market-dialog .form-grid {
    row-gap: 24px !important;
    margin: 14px 0 20px !important;
  }

  #market-dialog .form-grid input,
  #market-dialog .form-grid select,
  #market-dialog .side {
    height: 64px;
  }

  #market-dialog .form-grid > label:first-child::after {
    top: 44px;
  }

  #market-dialog .form-grid small {
    bottom: 24px !important;
  }

  #market-dialog .match-window {
    gap: 16px;
  }

  #market-dialog .expiry-heading {
    min-height: 55px;
  }

  #market-dialog .expiry-inputs > div,
  #market-dialog .no-expiry-field {
    height: 84px;
  }

  #market-dialog .expiry-inputs input {
    height: 53px;
  }

  #market-dialog .expiry-inputs > div > span {
    bottom: 12px !important;
  }

  #market-dialog .payment {
    gap: 13px 30px;
    margin-bottom: 16px !important;
    padding: 17px 8px 14px !important;
  }

  #market-dialog #create-submit {
    min-height: 64px;
  }
}

@media (max-width: 900px) {
  body:has(#positions-view.active) .app-nav,
  body:has(#history-view.active) .app-nav,
  body:has(#pp-view.active) .app-nav {
    gap: 20px !important;
    padding: 0 18px !important;
  }

  body:has(#positions-view.active) .brand-copy,
  body:has(#history-view.active) .brand-copy,
  body:has(#positions-view.active) .wallet-area::after,
  body:has(#history-view.active) .wallet-area::after,
  body:has(#pp-view.active) .brand-copy,
  body:has(#pp-view.active) .wallet-area::after {
    display: none;
  }

  body:has(#positions-view.active) .app-nav nav,
  body:has(#history-view.active) .app-nav nav,
  body:has(#pp-view.active) .app-nav nav {
    display: none;
  }

  #market-dialog .form-grid {
    grid-template-columns: 1fr;
  }

  #market-dialog .match-window {
    grid-column: 1;
  }

  #market-dialog .expiry-inputs {
    grid-template-columns: 1fr 1fr;
  }

  #positions-view .positions-table,
  #history-view .history-table {
    overflow-x: auto;
  }

  #positions-view .positions-head,
  #positions-view .position-row {
    min-width: 1020px;
  }

  #history-view .history-layout {
    grid-template-columns: 1fr !important;
  }

  #history-view .history-sidebar,
  #history-view .history-periods,
  #history-view .history-table,
  #history-view .history-footer {
    grid-column: 1;
    grid-row: auto;
  }

  #history-view .history-head,
  #history-view .history-row {
    min-width: 980px;
  }
}

/* Compact Create Market presentation. */
#market-dialog[open] {
  width: min(980px, calc(100vw - 24px)) !important;
  max-width: 980px !important;
}

#market-dialog[open] .dialog-card {
  padding: 26px 32px 30px !important;
}

#market-dialog[open] .dialog-title {
  min-height: 70px !important;
}

#market-dialog[open] .dialog-title h2,
#market-dialog[open] .dialog-title h2 span {
  font-size: 30px !important;
}

#market-dialog[open] .dialog-title h2::after {
  margin-top: 11px !important;
  font-size: 16px !important;
}

#market-dialog[open] .close {
  width: 38px !important;
  height: 38px !important;
  font-size: 34px !important;
}

#market-dialog[open] .form-grid {
  column-gap: 32px !important;
  row-gap: 18px !important;
  margin: 14px 0 17px !important;
}

#market-dialog[open] .form-grid label,
#market-dialog[open] .form-grid > label:nth-child(2)::before,
#market-dialog[open] .form-grid > label:nth-child(4)::before {
  font-size: 12px !important;
}

#market-dialog[open] .form-grid input,
#market-dialog[open] .form-grid select,
#market-dialog[open] #create-target,
#market-dialog[open] #create-bet,
#market-dialog[open] .side {
  height: 53px !important;
  margin-top: 9px !important;
  font-size: 21px !important;
}

#market-dialog[open] .form-grid > label:first-child select {
  padding-left: 60px !important;
  font-size: 21px !important;
}

#market-dialog[open] .form-grid > label:first-child::after {
  left: 18px !important;
  top: 31px !important;
  width: 32px !important;
  height: 32px !important;
  font: 700 18px/32px Georgia, serif !important;
}

#market-dialog[open] .min-bet,
#market-dialog[open] .form-grid label:has(#create-bet) small,
#market-dialog[open] .form-grid small {
  font-size: 11px !important;
}

#market-dialog[open] .form-grid label:has(#create-bet) small,
#market-dialog[open] .form-grid small {
  bottom: 20px !important;
}

#market-dialog[open] .side-select {
  margin-top: 9px !important;
}

#market-dialog[open] .match-window {
  gap: 12px !important;
}

#market-dialog[open] .match-window .expiry-heading {
  min-height: 48px !important;
  padding: 0 18px 0 54px !important;
}

#market-dialog[open] .match-window .expiry-heading::before {
  left: 18px !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 13px !important;
}

#market-dialog[open] .match-window .expiry-heading span {
  font-size: 12px !important;
}

#market-dialog[open] .expiry-inputs {
  gap: 11px !important;
}

#market-dialog[open] .expiry-inputs > div,
#market-dialog[open] .no-expiry-field {
  height: 68px !important;
  min-height: 68px !important;
}

#market-dialog[open] .expiry-inputs input {
  height: 45px !important;
  font-size: 23px !important;
}

#market-dialog[open] .expiry-inputs > div > span {
  bottom: 8px !important;
  font-size: 10px !important;
}

#market-dialog[open] .no-expiry-field span,
#market-dialog[open] .no-expiry-field:has(input:checked) span {
  font-size: 14px !important;
}

#market-dialog[open] .no-expiry-field span::before {
  font-size: 16px !important;
  margin-right: 9px !important;
}

#market-dialog[open] .payment {
  gap: 8px 24px !important;
  margin: 15px 0 14px !important;
  padding: 12px 5px 11px !important;
}

#market-dialog[open] .payment span {
  padding-left: 34px !important;
  font-size: 12px !important;
}

#market-dialog[open] .payment span::before {
  font-size: 17px !important;
}

#market-dialog[open] .payment b {
  min-width: 160px !important;
  font-size: 15px !important;
}

#market-dialog[open] .payment b:last-child {
  padding-bottom: 5px !important;
  border-bottom-width: 3px !important;
}

#market-dialog[open] #create-submit.primary.full {
  height: 56px !important;
  min-height: 56px !important;
  font-size: 17px !important;
}

#market-dialog[open] #create-submit.primary.full::after {
  right: 23px !important;
  font-size: 29px !important;
}

@media (max-width: 600px) {
  #market-dialog .dialog-card {
    padding: 24px 18px !important;
  }

  #market-dialog .expiry-inputs {
    grid-template-columns: 1fr;
  }

  #market-dialog .payment {
    font-size: 12px !important;
  }

  #market-dialog .payment b {
    min-width: 120px;
    font-size: 14px !important;
  }

  #history-view .history-top {
    align-items: flex-start !important;
    gap: 22px;
  }

  #history-view .history-stats {
    gap: 7px !important;
  }

  #history-view .history-stats div,
  #history-view .history-stats .history-pnl-stat {
    width: 88px !important;
    min-height: 64px;
    padding: 10px !important;
  }

  #history-view .history-stats span {
    font-size: 9px !important;
  }

  #history-view .history-stats b,
  #history-view .history-stats .history-pnl-stat b {
    font-size: 14px !important;
  }
}

/* Remove the previous graffiti modal theme completely on Create Market. */
#market-dialog[open] {
  width: min(1380px, calc(100vw - 10px)) !important;
  max-width: 1380px !important;
  max-height: calc(100dvh - 10px) !important;
  overflow: auto !important;
  padding: 0 !important;
  border: 1px solid rgba(39, 216, 189, 0.34) !important;
  border-radius: 10px !important;
  background: #031018 !important;
  box-shadow: 0 30px 110px rgba(0, 0, 0, 0.82) !important;
}

#market-dialog[open] *,
#market-dialog[open] *::before,
#market-dialog[open] *::after {
  box-sizing: border-box;
}

#market-dialog[open] .dialog-card {
  min-height: 0 !important;
  overflow: visible !important;
  padding: 34px 46px 38px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 16% 13%, rgba(39, 216, 189, 0.045), transparent 34%),
    linear-gradient(145deg, #06131a, #020a0f 74%) !important;
  box-shadow: none !important;
}

#market-dialog[open] .dialog-card::before,
#market-dialog[open] .dialog-card::after,
#market-dialog[open] .dialog-title::before,
#market-dialog[open] .dialog-title::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

#market-dialog[open] .dialog-title {
  min-height: 86px !important;
  margin: 0 !important;
  position: relative;
}

#market-dialog[open] .dialog-title h2,
#market-dialog[open] .dialog-title h2 span {
  margin: 0 !important;
  color: #f3f5f4 !important;
  font: 700 38px/1 "Manrope", sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
}

#market-dialog[open] .dialog-title h2::before {
  content: none !important;
  display: none !important;
}

#market-dialog[open] .dialog-title h2::after {
  content: "1v1 prediction market" !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 17px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  color: #8f9b9d !important;
  clip-path: none !important;
  transform: none !important;
  font: 400 21px/1 "Manrope", sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
}

#market-dialog[open] .close {
  width: 48px !important;
  height: 48px !important;
  margin: -6px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #aeb7b8 !important;
  font: 300 43px/1 "Manrope", sans-serif !important;
  text-shadow: none !important;
  transform: none !important;
}

#market-dialog[open] .form-grid {
  grid-template-columns: 1fr 1fr !important;
  column-gap: 52px !important;
  row-gap: 25px !important;
  margin: 20px 0 22px !important;
  position: relative;
}

#market-dialog[open] .form-grid label,
#market-dialog[open] .form-grid > label:nth-child(2)::before,
#market-dialog[open] .form-grid > label:nth-child(4)::before {
  color: #a5adaf !important;
  font: 500 15px/1 "Manrope", sans-serif !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

#market-dialog[open] .form-grid input,
#market-dialog[open] .form-grid select,
#market-dialog[open] #create-target,
#market-dialog[open] #create-bet {
  height: 64px !important;
  margin-top: 13px !important;
  padding: 0 24px !important;
  border: 1px solid rgba(127, 165, 174, 0.36) !important;
  border-radius: 8px !important;
  outline: 0 !important;
  background: rgba(2, 11, 16, 0.78) !important;
  color: #f1f4f3 !important;
  clip-path: none !important;
  box-shadow: none !important;
  font: 500 29px/1 "Manrope", sans-serif !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

#market-dialog[open] #create-target {
  border-color: rgba(39, 216, 189, 0.78) !important;
  box-shadow: inset 0 0 18px rgba(39, 216, 189, 0.025) !important;
}

#market-dialog[open] #create-bet {
  border-color: rgba(127, 165, 174, 0.36) !important;
}

#market-dialog[open] .form-grid > label:first-child select {
  padding-left: 73px !important;
  appearance: auto !important;
  font-size: 27px !important;
}

#market-dialog[open] .form-grid > label:first-child::after {
  left: 23px !important;
  top: 43px !important;
  width: 40px !important;
  height: 40px !important;
  border: 1px solid #e8e9e8 !important;
  background: linear-gradient(135deg, #8156e7, #af84ff) !important;
  color: #fff !important;
  font: 700 23px/40px Georgia, serif !important;
  text-align: center;
  box-shadow: none !important;
}

#market-dialog[open] .min-bet {
  top: 0 !important;
  right: 0 !important;
  color: #a6afb0 !important;
  font: 500 15px/1 "Manrope", sans-serif !important;
  text-transform: uppercase !important;
}

#market-dialog[open] .form-grid label:has(#create-bet) small,
#market-dialog[open] .form-grid small {
  right: 23px !important;
  bottom: 25px !important;
  color: #7f898b !important;
  font: 500 15px/1 "Manrope", sans-serif !important;
  text-transform: uppercase !important;
}

#market-dialog[open] .side-select {
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  margin-top: 13px !important;
}

#market-dialog[open] .side {
  height: 64px !important;
  padding: 0 !important;
  border: 1px solid rgba(127, 165, 174, 0.36) !important;
  border-radius: 0 8px 8px 0 !important;
  background: rgba(2, 11, 16, 0.78) !important;
  color: #c1c8c9 !important;
  clip-path: none !important;
  box-shadow: none !important;
  font: 500 21px/1 "Manrope", sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

#market-dialog[open] .side:first-child {
  border-radius: 8px 0 0 8px !important;
}

#market-dialog[open] .side.active {
  border-color: rgba(39, 216, 189, 0.78) !important;
  background: rgba(39, 216, 189, 0.1) !important;
  color: var(--dash-accent) !important;
  box-shadow: none !important;
}

#market-dialog[open] .match-window {
  grid-column: 1 / -1 !important;
  display: grid !important;
  gap: 18px !important;
  margin: 2px 0 0 !important;
}

#market-dialog[open] .match-window .expiry-heading {
  min-height: 62px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 26px 0 76px !important;
  position: relative !important;
  border: 1px solid var(--dash-line) !important;
  border-radius: 8px !important;
  background: rgba(4, 14, 20, 0.55) !important;
  color: #b9c0c1 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

#market-dialog[open] .match-window .expiry-heading::before {
  content: "i" !important;
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  position: absolute !important;
  left: 27px !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  border: 2px solid #9aa5a7 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #9aa5a7 !important;
  font: 700 16px/1 Georgia, serif !important;
}

#market-dialog[open] .match-window .expiry-heading span {
  max-width: none !important;
  color: #b9c0c1 !important;
  font: 400 16px/1.4 "Manrope", sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#market-dialog[open] .expiry-inputs {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
}

#market-dialog[open] .expiry-inputs > div,
#market-dialog[open] .no-expiry-field {
  height: 86px !important;
  min-height: 86px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(127, 165, 174, 0.32) !important;
  border-radius: 7px !important;
  background: rgba(2, 11, 16, 0.72) !important;
  box-shadow: none !important;
}

#market-dialog[open] .expiry-inputs input {
  width: 100% !important;
  height: 57px !important;
  margin: 0 !important;
  padding: 7px 10px 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
  box-shadow: none !important;
  font: 500 28px/1 "Manrope", sans-serif !important;
}

#market-dialog[open] .expiry-inputs > div > span {
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 11px !important;
  color: #9da6a8 !important;
  font: 500 13px/1 "Manrope", sans-serif !important;
  text-transform: uppercase !important;
}

#market-dialog[open] .no-expiry-field,
#market-dialog[open] .no-expiry-field:has(input:checked) {
  border-color: rgba(127, 165, 174, 0.32) !important;
  background: rgba(2, 11, 16, 0.72) !important;
}

#market-dialog[open] .no-expiry-field span,
#market-dialog[open] .no-expiry-field:has(input:checked) span {
  position: static !important;
  color: var(--dash-accent) !important;
  font: 500 18px/1 "Manrope", sans-serif !important;
  text-transform: uppercase !important;
}

#market-dialog[open] .no-expiry-field span::before {
  content: "▣" !important;
  margin-right: 14px !important;
  color: var(--dash-accent) !important;
  font: 400 21px/1 "DM Mono", monospace !important;
}

#market-dialog[open] .payment {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px 34px !important;
  margin: 22px 0 20px !important;
  padding: 18px 7px 16px !important;
  border-top: 1px solid var(--dash-line) !important;
  border-bottom: 1px solid var(--dash-line) !important;
  background: transparent !important;
  font-family: "Manrope", sans-serif !important;
}

#market-dialog[open] .payment span {
  padding-left: 48px !important;
  color: #aeb7b8 !important;
  font: 500 16px/1.2 "Manrope", sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

#market-dialog[open] .payment span::before {
  left: 0 !important;
  top: -2px !important;
  background: none !important;
  font: 600 22px/1 "DM Mono", monospace !important;
  text-shadow: none !important;
}

#market-dialog[open] .payment span:nth-of-type(1)::before { content: "*" !important; color: var(--dash-accent) !important; }
#market-dialog[open] .payment span:nth-of-type(2)::before { content: "%" !important; color: #aeb7b8 !important; }
#market-dialog[open] .payment span:nth-of-type(3)::before { content: "$" !important; color: #aeb7b8 !important; }

#market-dialog[open] .payment b {
  min-width: 220px !important;
  color: #edf1f0 !important;
  font: 500 21px/1.2 "DM Mono", monospace !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

#market-dialog[open] .payment .if-you-win-value {
  color: var(--dash-accent) !important;
}

#market-dialog[open] .payment b:last-child {
  padding-bottom: 8px !important;
  border-bottom: 4px solid var(--dash-accent) !important;
  color: #f1f4f3 !important;
  text-decoration: none !important;
}

#market-dialog[open] .payment b:last-child::after {
  content: none !important;
  display: none !important;
}

#market-dialog[open] #create-submit.primary.full {
  position: relative !important;
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  padding: 0 32px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #4cd2c1, #59d6c7) !important;
  color: #03100f !important;
  clip-path: none !important;
  box-shadow: none !important;
  font: 800 22px/1 "DM Mono", monospace !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

#market-dialog[open] #create-submit.primary.full::after {
  content: "→" !important;
  right: 30px !important;
  top: 50% !important;
  display: block !important;
  transform: translateY(-52%) !important;
  color: #03100f !important;
  font: 400 36px/1 Arial, sans-serif !important;
}

#market-dialog[open] #create-submit.primary.full:disabled {
  opacity: 0.5 !important;
  background: #497e77 !important;
}

@media (min-height: 1050px) and (min-width: 901px) {
  #market-dialog[open] .dialog-card {
    padding: 44px 46px 46px !important;
  }

  #market-dialog[open] .dialog-title {
    min-height: 106px !important;
  }

  #market-dialog[open] .form-grid {
    row-gap: 38px !important;
    margin: 24px 0 30px !important;
  }

  #market-dialog[open] .form-grid input,
  #market-dialog[open] .form-grid select,
  #market-dialog[open] #create-target,
  #market-dialog[open] #create-bet,
  #market-dialog[open] .side {
    height: 82px !important;
  }

  #market-dialog[open] .form-grid > label:first-child::after {
    top: 52px !important;
  }

  #market-dialog[open] .form-grid label:has(#create-bet) small,
  #market-dialog[open] .form-grid small {
    bottom: 34px !important;
  }

  #market-dialog[open] .match-window .expiry-heading {
    min-height: 72px !important;
  }

  #market-dialog[open] .expiry-inputs > div,
  #market-dialog[open] .no-expiry-field {
    height: 114px !important;
    min-height: 114px !important;
  }

  #market-dialog[open] .expiry-inputs input {
    height: 76px !important;
    font-size: 34px !important;
  }

  #market-dialog[open] .expiry-inputs > div > span {
    bottom: 18px !important;
    font-size: 15px !important;
  }

  #market-dialog[open] .payment {
    gap: 19px 34px !important;
    margin: 28px 0 26px !important;
    padding: 24px 7px 22px !important;
  }

  #market-dialog[open] #create-submit.primary.full {
    height: 88px !important;
    min-height: 88px !important;
  }
}

@media (max-width: 900px) {
  #market-dialog[open] {
    width: calc(100vw - 16px) !important;
  }

  #market-dialog[open] .dialog-card {
    padding: 26px 20px 28px !important;
  }

  #market-dialog[open] .form-grid {
    grid-template-columns: 1fr !important;
  }

  #market-dialog[open] .expiry-inputs {
    grid-template-columns: 1fr 1fr !important;
  }
}