.contract-main {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 52px; margin: 44px auto 0 auto; max-width: 1300px;
}
.contract-panel {
  background: rgba(35, 31, 70, 0.95); padding: 24px 24px 18px 24px;
  border-radius: 22px; min-width: 330px; min-height: 410px;
  box-shadow: 0 8px 24px #6a5af966;
}
.contract-panel h3 {
  font-size: 1.16rem; margin-bottom: 16px; color: #6a5af9;
}
.contract-inv-list {
  display: flex; flex-wrap: wrap; gap: 13px; min-height: 100px; margin-bottom: 7px;
}
.contract-inv-item {
  background: linear-gradient(110deg, #28276c 40%, #3927a8 100%);
  border: 2px solid #222247; border-radius: 13px;
  color: #fff; text-align: center; width: 78px; padding: 7px 3px 3px 3px;
  cursor: pointer; transition: box-shadow .15s, border .15s, transform .15s;
  position: relative;
}
.contract-inv-item.selected {
  box-shadow: 0 0 13px #2fffe6, 0 0 22px #6a5af9;
  border-color: #17b5ff; z-index: 1; transform: scale(1.09);
}
.contract-inv-item img { max-width: 50px; margin-bottom: 4px; }
.contract-inv-item .price { font-size: 0.92em; color: #89d7ff; margin-bottom: 2px; }
.contract-inv-item .remove-btn {
  position: absolute; top: 2px; right: 4px; background: none; border: none;
  color: #e57aff; font-size: 1em; cursor: pointer; display: none;
}
.contract-inv-item.selected .remove-btn { display: block; }
.contract-inv-hint {
  margin-bottom: 8px; font-size: 0.93em; color: #f99;
}
.contract-summary {
  margin-bottom: 8px; font-size: 1.08em; color: #9ecfff;
}
.btn-contract {
  width: 100%; padding: 12px 0; margin: 12px 0 6px 0;
  background: linear-gradient(90deg,#17b5ff 10%, #6a5af9 100%);
  color: #fff; border: none; font-size: 1.14rem; font-weight: bold;
  border-radius: 16px; box-shadow: 0 2px 14px #6a5af988;
  transition: background .13s;
}
.btn-contract:disabled { background: #232350; color: #888; cursor: default; }
.contract-help { margin-top: 8px; text-align: right; }
.contract-help a { color: #17b5ff; text-decoration: underline; cursor: pointer; font-size: 0.95em; }

.contract-panel.contract-result { min-width: 340px; }
.contract-result-content {
  margin-bottom: 15px; min-height: 78px; text-align: center; font-size: 1.2em;
}
.contract-result-img {
  max-width: 85px; margin: 0 auto 7px auto; display: block;
  filter: drop-shadow(0 3px 13px #17b5ff77);
}
.contract-history {
  margin-top: 14px; padding-top: 9px; border-top: 1px solid #3a356e;
  font-size: 0.99em; color: #bbcfff;
  max-height: 120px; overflow-y: auto;
}
.contract-history-entry { margin-bottom: 3px; }
.contract-history-entry .win { color: #89faab; }
.contract-history-entry .lose { color: #fa8989; }

@media (max-width: 900px) {
  .contract-main { flex-direction: column; gap: 26px; margin: 20px 8px; max-width: 99vw; }
  .contract-panel { min-width: unset; width: 100%; }
  .contract-panel.contract-result { margin-top: 16px; }
}
@media (max-width: 600px) {
  .header { flex-direction: column; padding: 12px 6px; }
  nav a, .balance { font-size: 1em; padding: 5px 4px; margin: 0 4px; }
  .logo span { font-size: 1.1rem; }
}