* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: #17151c;
  color: #eee;
}
a { color: #c4a5ff; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; margin-top: 1.6em; }
.muted { color: #9a93a8; }
.small { font-size: 0.85em; }
.error { color: #ff8484; }
.warn {
  background: #4a3a12; border: 1px solid #a8842a; color: #ffd97a;
  padding: 8px 12px; border-radius: 8px;
}
.notice {
  background: #2a2438; border: 1px solid #5b4a86; padding: 10px 14px; border-radius: 8px;
}
.won { color: #7dde8b; }
.hidden { display: none; }

/* ---------- chrome ---------- */
.topbar { background: #221d2e; border-bottom: 2px solid #6d4fc4; }
.topbar-inner {
  max-width: 960px; margin: 0 auto; padding: 10px 16px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}
.brand { font-weight: 700; color: #fff; text-decoration: none; font-size: 1.05rem; }
.topbar nav a {
  color: #cfc4ea; text-decoration: none; margin-left: 16px; padding: 4px 2px;
}
.topbar nav a.active { color: #fff; border-bottom: 2px solid #9a6cff; }
.page { max-width: 960px; margin: 0 auto; padding: 16px; }
.page-head {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}
.card {
  background: #221d2e; border: 1px solid #3a3149; border-radius: 12px;
  padding: 16px; margin: 14px 0;
}
.inline-form { display: inline-block; margin: 0; }

/* ---------- buttons & inputs ---------- */
.btn {
  display: inline-block; background: #3a3149; color: #fff; border: 1px solid #55496e;
  padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 0.95rem;
  text-decoration: none; font-family: inherit;
}
.btn:hover { background: #473c5c; }
.btn-primary { background: linear-gradient(135deg, #7b5cd6, #5b3fb8); border-color: #8a6ce0; }
.btn-primary:hover { background: linear-gradient(135deg, #8a6ce0, #6a4cc8); }
.btn-warn { background: #7a3b3b; border-color: #a05555; }
.btn-small { padding: 4px 10px; font-size: 0.85rem; }
.btn-big { font-size: 1.1rem; padding: 12px 28px; margin-top: 12px; }
input, select {
  background: #171320; color: #eee; border: 1px solid #4a4060; border-radius: 8px;
  padding: 8px 10px; font-size: 1rem; font-family: inherit;
}
input:focus { outline: 2px solid #7b5cd6; }

/* ---------- match list ---------- */
.match-list { display: flex; flex-direction: column; gap: 10px; }
.match-card {
  display: block; background: #221d2e; border: 1px solid #3a3149; border-radius: 12px;
  padding: 14px 18px; text-decoration: none; color: #eee;
}
.match-card:hover { border-color: #7b5cd6; }
.match-teams { font-size: 1.15rem; font-weight: 700; }
.match-teams .vs { color: #9a6cff; font-size: 0.9em; }
.match-meta { margin-top: 6px; display: flex; gap: 10px; align-items: center; }
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px;
}
.badge-open { background: #1f4d2a; color: #7dde8b; }
.badge-closed { background: #4d1f1f; color: #de7d7d; }
.badge-settled { background: #1f3a4d; color: #7dc4de; }

/* ---------- the purple betting board ---------- */
.board-wrap { overflow-x: auto; }
.board {
  min-width: 344px;
  background: #d6d2dc; border-radius: 10px; padding: 10px;
  max-width: 780px; margin: 16px auto;
  color: #1d1630;
  font-weight: 600;
}
.board-title {
  background: linear-gradient(160deg, #bd9cf3, #a983e9);
  border: 2px solid #555; border-radius: 6px;
  text-align: center; font-size: 1.35rem; font-weight: 800;
  padding: 10px 6px; margin-bottom: 8px; letter-spacing: 1px;
}
.cols3 {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px;
}
.col-heads { margin-bottom: 8px; }
.col-head {
  background: linear-gradient(160deg, #bd9cf3, #a983e9);
  border: 2px solid #555; border-radius: 6px;
  text-align: center; font-weight: 800; padding: 8px 4px; font-size: 0.95rem;
  overflow-wrap: break-word;
}
.panel {
  background: linear-gradient(170deg, #bd9cf3, #a983e9);
  border: 2px solid #555; border-radius: 6px; padding: 8px 8px 10px;
}
.row {
  display: grid; grid-template-columns: minmax(34px, auto) 1fr 62px;
  align-items: center; gap: 5px; margin: 7px 0;
}
/* betting (input) board has an extra live "possible win" column left of Payout */
.board-input .row { grid-template-columns: minmax(34px, auto) 1fr minmax(30px, auto) 62px; }
.row .win { text-align: right; font-size: 0.85rem; font-weight: 800; color: #0b7a2b; }
.row .win-head { color: inherit; }
.row-head { font-weight: 800; margin-bottom: 2px; }
.row .lbl { font-size: 0.95rem; }
.row .pay, .cell-head { text-align: right; font-size: 0.95rem; }
.cell-head { text-align: center; }
input.cell {
  width: 100%; background: #fff; color: #111;
  border: 1px solid #999; border-radius: 10px;
  padding: 6px 4px; font-size: 0.95rem; text-align: center; font-weight: 700;
  -moz-appearance: textfield;
}
input.cell::-webkit-outer-spin-button, input.cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.cell:focus { outline: 2px solid #5b3fb8; }
.cell-val {
  display: block; background: #fff; color: #111;
  border: 1px solid #999; border-radius: 10px;
  padding: 6px 4px; font-size: 0.95rem; text-align: center; font-weight: 700;
  min-height: 1.4em;
}
.cell-na { display: block; }
.board-foot {
  background: #fff; border: 2px solid #555; border-radius: 6px;
  padding: 8px 12px; font-size: 0.9rem;
}

/* ---------- bet controls (user) ---------- */
.bet-controls { max-width: 780px; margin: 0 auto 30px; text-align: center; }
.remark-line {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  flex-wrap: wrap; margin-bottom: 10px;
}
.remark-line label { font-weight: 700; }
.remark-line input { min-width: 220px; }
.bet-summary { margin: 10px 0; color: #cfc4ea; }
#place-bet { font-size: 1.15rem; padding: 12px 40px; }
#place-bet.btn-confirm { background: linear-gradient(135deg, #2e9e4f, #1f7a3a); border-color: #3fbf63; }
.bet-status { min-height: 1.2em; color: #cfc4ea; }
.bet-status.error { color: #ff8484; }

/* ---------- tables ---------- */
.table {
  width: 100%; border-collapse: collapse; margin: 12px 0;
  background: #221d2e; border-radius: 10px; overflow: hidden;
}
.table th, .table td {
  padding: 8px 10px; text-align: left; border-bottom: 1px solid #352c47;
  vertical-align: top;
}
.table thead th { background: #2c2440; }
.table tfoot th { background: #2c2440; border-top: 2px solid #55496e; }
.table .num { text-align: right; }
.winner-name th { background: #2a3a2c; color: #a5e8ad; font-size: 1rem; }
.winner-totals { font-size: 0.85rem; font-weight: normal; white-space: nowrap; }
.winner-name .winner-totals { color: #cfe8d2; }
.net-win { color: #7dde8b; font-weight: bold; }
.net-loss { color: #ff9b9b; font-weight: bold; }

/* ---------- world cup draw ---------- */
.wc-round { margin: 22px 0; }
.wc-round h2 { margin-bottom: 10px; }
.wc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.wc-match {
  background: #221d2e; border: 1px solid #352c47; border-radius: 10px;
  padding: 10px 12px;
}
.wc-match.wc-upcoming { opacity: 0.85; }
.wc-team { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.wc-badge { width: 20px; height: 20px; object-fit: contain; flex: none; display: inline-block; }
.wc-name { flex: 1; }
.wc-score { font-weight: 700; min-width: 18px; text-align: right; }
.wc-won .wc-name, .wc-won .wc-score { color: #7dde8b; font-weight: 800; }
.wc-meta { margin-top: 6px; font-size: 0.8rem; color: #9d93b5; }
a.wc-match { display: block; color: inherit; text-decoration: none; }
a.wc-match.wc-betopen { border-color: #2d6b3a; }
a.wc-match.wc-betopen:hover { border-color: #7dde8b; }
.wc-bet { margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wc-bet-lbl { font-size: 0.8rem; color: #9d93b5; }
.wc-bet-hint { font-size: 0.8rem; color: #7dde8b; }
.badge-na { background: #3a3547; color: #9d93b5; }
.wc-live { color: #ff8484; font-weight: 800; animation: wc-blink 1.2s infinite; }
@keyframes wc-blink { 50% { opacity: 0.45; } }

/* ---------- admin ---------- */
.login-box { max-width: 360px; margin: 60px auto; text-align: center; }
.login-box input { width: 100%; margin-bottom: 12px; }
.login-box .btn { width: 100%; }
.search-form { display: flex; gap: 8px; margin: 14px 0; }
.search-form input { flex: 1; max-width: 420px; }
.admin-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.settle-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.settle-form input { width: 90px; }
.upload-actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
#bet-filter { width: 100%; max-width: 320px; margin-bottom: 4px; }
#image-preview img { max-width: 100%; border-radius: 8px; margin: 10px 0; }
#ocr-raw pre { white-space: pre-wrap; background: #171320; padding: 10px; border-radius: 8px; }

.team-inputs {
  display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin: 14px 0;
}
.team-inputs label { display: block; font-size: 0.85rem; color: #9a93a8; margin-bottom: 4px; }
.vs-sep { font-weight: 800; padding-bottom: 10px; }
.odds-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px;
}
.odds-col h3 { font-size: 0.95rem; color: #c4a5ff; margin: 4px 0 8px; }
.odds-field { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.odds-field label { width: 52px; text-align: right; font-weight: 700; }
.odds-field input { width: 100px; padding: 5px 8px; }

.cell-click { cursor: pointer; }
.cell-click:hover { outline: 2px solid #7b5cd6; }
.cell-selected { outline: 3px solid #5b3fb8; background: #ffe9a8; }
#field-breakdown h3 { margin: 4px 0; }

.actions-cell { white-space: nowrap; }
.actions-cell .btn { margin: 1px 3px 1px 0; }
.btn-armed { background: #a03d3d; border-color: #d06a6a; }
.bet-remark { margin: 12px 0; }
.bet-remark label { display: block; font-size: 0.85rem; color: #9a93a8; margin-bottom: 4px; }
.bet-remark input { min-width: 240px; }
.bet-field input { width: 84px; }
.bet-field .at { color: #6f6880; }

/* clickable history rows (user) */
tr[data-href] { cursor: pointer; }
tr[data-href]:hover td { background: #2a2340; }

.receipt-box { max-width: 560px; margin: 20px auto; }
.receipt-meta { background: #221d2e; border-radius: 10px; padding: 12px 16px; margin: 14px 0; line-height: 1.7; }
.receipt-actions { display: flex; gap: 10px; margin-top: 14px; }

/* ---------- footer ---------- */
.footer {
  text-align: center; color: #6f6880; font-size: 0.85rem;
  padding: 24px 16px 30px; margin-top: 30px; border-top: 1px solid #2c2440;
}
.footer-sig { color: #9a6cff; font-weight: 700; letter-spacing: 1px; }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .page { padding: 10px; }
  .board { padding: 6px; }
  .cols3 { gap: 4px; }
  .panel { padding: 4px 4px 6px; border-width: 1px; }
  .col-head { font-size: 0.7rem; padding: 6px 2px; border-width: 1px; }
  .board-title { font-size: 1rem; }
  .row { grid-template-columns: minmax(22px, auto) 1fr 40px; gap: 2px; margin: 5px 0; }
  .board-input .row { grid-template-columns: minmax(20px, auto) 1fr minmax(18px, auto) 36px; }
  .row .lbl, .row .pay, .cell-head { font-size: 0.65rem; }
  .row .win { font-size: 0.65rem; }
  input.cell, .cell-val { font-size: 0.75rem; padding: 4px 1px; border-radius: 6px; }
  .odds-field label { width: 44px; }
  .table { display: block; overflow-x: auto; }
  .table th, .table td { padding: 6px; font-size: 0.9rem; }
  .actions-cell { white-space: normal; }
  .actions-cell .inline-form { display: block; }
  .actions-cell .btn {
    display: block; width: 100%; margin: 2px 0; text-align: center;
    padding: 3px 6px; font-size: 0.78rem;
  }
}