:root{
  --theme-bg: #06101f;
  --theme-bg-secondary: #0a1528;
  --theme-card: #0d1b31;
  --theme-border: rgba(58, 107, 255, 0.30);
  --theme-border-soft: rgba(255, 255, 255, 0.08);
  --theme-primary: #3A6BFF;
  --theme-primary-soft: #7FA6FF;
  --theme-text: #f5f8ff;
  --theme-text-muted: #9fb0cf;
  --theme-success: #39c97a;
  --theme-danger: #d84d4d;
  --theme-neutral: #a3afc7;
  --theme-idle: #5f8dff;
  --theme-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
  --theme-glow: 0 0 0 1px rgba(58, 107, 255, 0.12), 0 0 24px rgba(58, 107, 255, 0.10);

  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;

  --container-width: 1120px;
  --transition-fast: 0.18s ease;
  --transition-med: 0.25s ease;
}

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

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"]{
  -moz-appearance: textfield;
  appearance: textfield;
}

html,
body{
  width: 100%;
  min-height: 100%;
  font-family: Inter, Arial, sans-serif;
  background:
    radial-gradient(circle at top center, rgba(58, 107, 255, 0.14) 0%, rgba(58, 107, 255, 0) 28%),
    linear-gradient(180deg, #050c18 0%, #02060d 100%);
  color: var(--theme-text);
}

body{
  overflow-x: hidden;
}

body.parlay-modal-open{
  overflow: hidden;
}

.parlay-page{
  width: 100%;
  min-height: 100vh;
  padding: 24px 16px 40px;
}

.parlay-shell{
  max-width: var(--container-width);
  margin: 0 auto;
}

.parlay-card{
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)),
    linear-gradient(180deg, var(--theme-card) 0%, var(--theme-bg-secondary) 100%);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--theme-shadow), var(--theme-glow);
}

.parlay-card::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.03), transparent 30%, transparent 70%, rgba(58,107,255,.05));
}

.parlay-header{
  position: relative;
  padding: 28px 24px 22px;
  text-align: center;
  border-bottom: 1px solid rgba(58, 107, 255, 0.18);
  background:
    radial-gradient(circle at top center, rgba(58,107,255,.16), transparent 58%);
}

.parlay-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(58,107,255,.20), rgba(58,107,255,.10));
  border: 1px solid rgba(127,166,255,.26);
  color: var(--theme-primary-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.parlay-title{
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.15;
  font-weight: 800;
  color: var(--theme-primary-soft);
  text-shadow: 0 0 18px rgba(58,107,255,.16);
}

.parlay-subtitle{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--theme-text-muted);
}

.parlay-body{
  padding: 22px;
}

.parlay-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 18px;
  align-items: start;
}

.parlay-panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  border: 1px solid var(--theme-border-soft);
  border-radius: var(--radius-lg);
  padding: 18px;
}

.parlay-label{
  display: block;
  margin-bottom: 8px;
  color: var(--theme-primary-soft);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

.parlay-input{
  width: 100%;
  height: 50px;
  border-radius: 14px;
  border: 1px solid rgba(58,107,255,.22);
  background: #081221;
  color: #ffffff;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 600;
  outline: none;
  transition: var(--transition-fast);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}

.parlay-input:focus{
  border-color: rgba(127,166,255,.48);
  box-shadow: 0 0 0 3px rgba(58,107,255,.14);
}

.parlay-input::placeholder{
  color: #7f8ba3;
  font-weight: 500;
}

.parlay-list-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 10px;
}

.parlay-list-title{
  color: var(--theme-primary-soft);
  font-size: 14px;
  font-weight: 800;
}

.parlay-list-note{
  color: #8fa1c2;
  font-size: 12px;
  text-align: right;
}

.parlay-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.parlay-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 48px;
  gap: 10px;
  align-items: start;
}

.parlay-remove-btn{
  width: 48px;
  height: 50px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(216,77,77,.18), rgba(216,77,77,.10));
  border: 1px solid rgba(216,77,77,.25);
  color: #ffd7d7;
  font-size: 20px;
  font-weight: 800;
  transition: var(--transition-fast);
}

.parlay-remove-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.parlay-status-wrap{
  position: relative;
  color: var(--theme-idle);
}

.parlay-status-wrap.status-idle{
  color: var(--theme-idle);
}

.parlay-status-wrap.status-win{
  color: var(--theme-success);
}

.parlay-status-wrap.status-lose{
  color: var(--theme-danger);
}

.parlay-status-wrap.status-draw{
  color: var(--theme-neutral);
}

.parlay-status-trigger{
  width: 100%;
  min-height: 50px;
  border-radius: 14px;
  border: 1px solid rgba(58,107,255,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    #081221;
  color: currentColor;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}

.parlay-status-trigger:hover{
  border-color: rgba(127,166,255,.30);
}

.parlay-status-trigger.is-open{
  border-color: rgba(127,166,255,.50);
  box-shadow: 0 0 0 3px rgba(58,107,255,.14);
}

.parlay-status-left{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.parlay-status-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  flex: 0 0 auto;
}

.parlay-status-label{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}

.parlay-status-caret{
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition-fast);
  flex: 0 0 auto;
}

.parlay-status-trigger.is-open .parlay-status-caret{
  transform: rotate(-135deg) translateY(-1px);
}

.parlay-status-menu{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  list-style: none;
  padding: 8px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    linear-gradient(180deg, #13203a 0%, #09111f 100%);
  border: 1px solid rgba(58,107,255,.26);
  box-shadow:
    0 18px 35px rgba(0,0,0,.45),
    0 0 0 1px rgba(58,107,255,.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.98);
  transition: opacity var(--transition-med), transform var(--transition-med), visibility var(--transition-med);
  pointer-events: none;
}

.parlay-status-wrap.open .parlay-status-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.parlay-status-option{
  width: 100%;
  border: none;
  background: transparent;
  color: #f3f7ff;
  min-height: 42px;
  border-radius: 12px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: var(--transition-fast);
  font-weight: 700;
}

.parlay-status-option:hover{
  background: rgba(58,107,255,.12);
}

.parlay-status-option.is-active{
  background: rgba(58,107,255,.18);
  color: var(--theme-primary-soft);
}

.parlay-status-option .status-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.status-dot.win{
  background: var(--theme-success);
  box-shadow: 0 0 10px var(--theme-success);
}

.status-dot.lose{
  background: var(--theme-danger);
  box-shadow: 0 0 10px var(--theme-danger);
}

.status-dot.draw{
  background: var(--theme-neutral);
  box-shadow: 0 0 10px var(--theme-neutral);
}

.status-dot.idle{
  background: var(--theme-idle);
  box-shadow: 0 0 10px var(--theme-idle);
}

.parlay-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.parlay-btn{
  min-height: 50px;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  transition: var(--transition-fast);
}

.parlay-btn:hover{
  transform: translateY(-1px);
}

.parlay-btn:active{
  transform: translateY(0);
}

.parlay-btn:disabled{
  cursor: not-allowed;
  opacity: .55;
  transform: none;
  filter: grayscale(.08);
}

.parlay-btn-full{
  width: 100%;
  margin-top: 10px;
}

.parlay-btn-primary{
  color: #eef4ff;
  background: linear-gradient(180deg, #5d8bff 0%, #3A6BFF 100%);
  box-shadow: 0 10px 22px rgba(58,107,255,.18);
}

.parlay-btn-accent{
  color: #09111f;
  background: linear-gradient(180deg, #dfe9ff 0%, #9cbcff 100%);
}

.parlay-btn-muted{
  background: #0d1728;
  color: #d9e6ff;
  border: 1px solid rgba(255,255,255,.08);
}

.parlay-match-info{
  margin-top: 10px;
  font-size: 12px;
  color: #90a2c4;
  text-align: center;
}

.parlay-match-info.is-max{
  color: var(--theme-primary-soft);
}

.parlay-result-panel{
  background:
    radial-gradient(circle at top center, rgba(58,107,255,.14), transparent 55%),
    linear-gradient(180deg, #0f1b31 0%, #08111f 100%);
  border: 1px solid rgba(58,107,255,.22);
}

.parlay-result-title{
  font-size: 15px;
  font-weight: 800;
  color: var(--theme-primary-soft);
  margin-bottom: 12px;
}

.parlay-result-list{
  display: flex;
  flex-direction: column;
}

.parlay-result-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.parlay-result-item:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

.parlay-result-item span{
  color: #d0daf0;
  font-size: 14px;
}

.parlay-result-item strong{
  color: #ffffff;
  font-size: 15px;
  text-align: right;
}

.parlay-result-highlight strong{
  color: var(--theme-primary-soft);
  font-size: 20px;
}

.parlay-result-profit strong{
  color: var(--theme-success);
}

.parlay-note-wrap{
  margin-top: 18px;
}

.parlay-note-block{
  width: 100%;
  max-width: 100%;
  padding: 14px 15px;
  border-radius: 14px;
  background: rgba(58,107,255,.08);
  border: 1px solid rgba(58,107,255,.16);
}

.parlay-note-title{
  color: var(--theme-primary-soft);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
}

.parlay-note-text{
  color: #dce7ff;
  font-size: 12px;
  line-height: 1.7;
}

.parlay-note-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.parlay-note-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.parlay-note-dot{
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 999px;
  flex: 0 0 8px;
  background: linear-gradient(180deg, var(--theme-primary-soft) 0%, var(--theme-primary) 100%);
  box-shadow: 0 0 10px rgba(58,107,255,.35);
}

.parlay-note-item span:last-child{
  flex: 1;
  min-width: 0;
}

.parlay-note-item small{
  display: inline-block;
  margin-top: 4px;
  color: #bcd2ff;
  font-size: 11px;
  line-height: 1.6;
}

.parlay-footer{
  text-align: center;
  padding: 14px 18px 18px;
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(58,107,255,.16),
    transparent
  );
  border-top: 1px solid rgba(58,107,255,.15);
}

.parlay-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.parlay-modal.show{
  display: block;
}

.parlay-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.74);
  backdrop-filter: blur(6px);
  opacity: 0;
  animation: modalBackdropIn .22s ease forwards;
}

.parlay-modal-box{
  position: relative;
  z-index: 2;
  width: min(92vw, 430px);
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%) scale(.92);
  opacity: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    linear-gradient(180deg, #101b31 0%, #09111f 100%);
  border: 1px solid rgba(58,107,255,.24);
  border-radius: 24px;
  box-shadow:
    0 20px 50px rgba(0,0,0,.45),
    0 0 0 1px rgba(58,107,255,.08),
    0 0 24px rgba(58,107,255,.10);
  padding: 22px 18px 18px;
  text-align: center;
  animation: modalBoxIn .24s ease forwards;
}

.parlay-modal-icon{
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 900;
  color: #eef4ff;
  background: linear-gradient(180deg, var(--theme-primary-soft) 0%, var(--theme-primary) 100%);
  box-shadow: 0 12px 24px rgba(58,107,255,.20);
}

.parlay-modal-box[data-type="warning"] .parlay-modal-icon{
  color: #eef4ff;
  background: linear-gradient(180deg, #7FA6FF 0%, #3A6BFF 100%);
}

.parlay-modal-box[data-type="error"] .parlay-modal-icon{
  color: #fff;
  background: linear-gradient(180deg, #ff7575 0%, #d84d4d 100%);
}

.parlay-modal-box[data-type="success"] .parlay-modal-icon{
  color: #04180d;
  background: linear-gradient(180deg, #71e3a2 0%, #39c97a 100%);
}

.parlay-modal-title{
  color: var(--theme-primary-soft);
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 8px;
}

.parlay-modal-message{
  color: #dce7ff;
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 18px;
}

.parlay-modal-btn{
  min-width: 130px;
  min-height: 46px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 800;
  color: #eef4ff;
  background: linear-gradient(180deg, var(--theme-primary-soft) 0%, var(--theme-primary) 100%);
  box-shadow: 0 10px 22px rgba(58,107,255,.18);
  transition: var(--transition-fast);
}

.parlay-modal-btn:hover{
  transform: translateY(-1px);
}

@keyframes modalBackdropIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

@keyframes modalBoxIn{
  from{
    opacity: 0;
    transform: translateY(-50%) scale(.92);
  }
  to{
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

@media (max-width: 920px){
  .parlay-grid{
    grid-template-columns: 1fr;
  }

  .parlay-result-panel{
    order: -1;
  }
}

@media (max-width: 640px){
  .parlay-page{
    padding: 14px 10px 20px;
  }

  .parlay-card{
    border-radius: 18px;
  }

  .parlay-header{
    padding: 22px 16px 18px;
  }

  .parlay-body{
    padding: 14px;
  }

  .parlay-panel{
    padding: 14px;
    border-radius: 16px;
  }

  .parlay-title{
    font-size: 24px;
  }

  .parlay-subtitle{
    font-size: 13px;
  }

  .parlay-list-head{
    flex-direction: column;
    align-items: flex-start;
  }

  .parlay-list-note{
    text-align: left;
  }

  .parlay-row{
    grid-template-columns: minmax(0, 1fr) 56px;
    gap: 10px;
    align-items: start;
  }

  .parlay-row .odd-input{
    grid-column: 1 / 2;
  }

  .parlay-row .parlay-status-wrap{
    grid-column: 1 / 2;
  }

  .parlay-row .parlay-remove-btn{
    grid-column: 2 / 3;
    grid-row: 1 / span 2;
    width: 56px;
    min-height: 110px;
    height: 110px;
    border-radius: 16px;
    align-self: stretch;
  }

  .parlay-actions{
    grid-template-columns: 1fr;
  }

  .parlay-note-item{
    gap: 9px;
  }

  .parlay-note-dot{
    margin-top: 6px;
  }

  .parlay-result-highlight strong{
    font-size: 18px;
  }

  .parlay-status-menu{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 30;
  }
}