
/* ===== SYNERGY V20.32 FINAL ROSTERS / PREVIEW / SEARCH ===== */

#sy232-menu,
#sy232-roster,
#sy232-preview {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147484300 !important;
  display: none;
  background:
    radial-gradient(circle at top right, rgba(37,99,235,.22), transparent 34%),
    radial-gradient(circle at bottom left, rgba(34,197,94,.16), transparent 34%),
    linear-gradient(180deg, #07101f 0%, #101b37 100%) !important;
  color: #fff !important;
  overflow: auto !important;
}

#sy232-menu.show,
#sy232-roster.show,
#sy232-preview.show {
  display: block !important;
}

.sy232-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 2147484400 !important;
  background: rgba(2,6,12,.98) !important;
  border-bottom: 3px solid #dc2626 !important;
  padding: 10px !important;
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.35) !important;
}

.sy232-top button,
.sy232-top label {
  min-height: 44px !important;
  padding: 9px 16px !important;
  border-radius: 13px !important;
  border: 2px solid #ef4444 !important;
  background: linear-gradient(135deg, #991b1b, #dc2626) !important;
  color: #fff !important;
  font-weight: 950 !important;
}

.sy232-top select,
.sy232-top input {
  min-height: 44px !important;
  background: #18181b !important;
  color: #fff !important;
  border: 2px solid #ef4444 !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  font-weight: 900 !important;
}

#sy232-card {
  width: min(1180px, calc(100vw - 28px)) !important;
  margin: 20px auto !important;
  background: rgba(15,23,42,.94) !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  border-radius: 24px !important;
  padding: 24px !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.42) !important;
}

#sy232-card h2 {
  margin: 0 0 8px 0 !important;
  color: #fff !important;
  font-size: 34px !important;
  font-weight: 950 !important;
}

#sy232-title {
  color: #cbd5e1 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  margin-bottom: 20px !important;
}

.sy232-actions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 14px !important;
}

.sy232-actions button {
  min-height: 76px !important;
  border-radius: 18px !important;
  border: 2px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  box-shadow: 0 8px 0 rgba(0,0,0,.42), 0 18px 36px rgba(0,0,0,.28) !important;
}

.sy232-red { background: linear-gradient(135deg, #991b1b, #dc2626) !important; border-color:#ef4444 !important; }
.sy232-gold { background: linear-gradient(135deg, #a16207, #f59e0b) !important; border-color:#facc15 !important; color:#111827 !important; }
.sy232-green { background: linear-gradient(135deg, #166534, #16a34a) !important; border-color:#22c55e !important; }
.sy232-blue { background: linear-gradient(135deg, #1d4ed8, #2563eb) !important; border-color:#60a5fa !important; }

.sy232-wrap {
  width: min(1800px, calc(100vw - 28px)) !important;
  margin: 18px auto !important;
}

.sy232-search-card {
  background: #fff !important;
  border: 4px solid #000 !important;
  padding: 18px !important;
  margin-bottom: 18px !important;
}

.sy232-search-card input {
  width: 100% !important;
  min-height: 50px !important;
  border: 2px solid #111827 !important;
  color: #111827 !important;
  background: #fff !important;
  padding: 10px 14px !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
}

#sy232-search-results {
  margin-top: 12px !important;
  display: grid !important;
  gap: 8px !important;
}

.sy232-result {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
  align-items: center !important;
  background: #f8fafc !important;
  color: #111827 !important;
  border: 2px solid #111827 !important;
  padding: 10px !important;
  font-weight: 900 !important;
}

.sy232-result button {
  background: #16a34a !important;
  color: #fff !important;
  border: 2px solid #111827 !important;
  padding: 8px 12px !important;
  font-weight: 950 !important;
}

.sy232-academy-title {
  background: linear-gradient(180deg, #111827, #050507) !important;
  color: #fff !important;
  border: 2px solid #ef4444 !important;
  border-radius: 14px !important;
  padding: 14px !important;
  text-align: center !important;
  font-size: 26px !important;
  font-weight: 950 !important;
  margin-bottom: 18px !important;
}

.sy232-section {
  background: #fff !important;
  border: 4px solid #000 !important;
  padding: 14px !important;
  margin-bottom: 18px !important;
}

.sy232-pos-title {
  background: linear-gradient(180deg, #111827, #050507) !important;
  color: #fff !important;
  border: 2px solid #ef4444 !important;
  border-radius: 12px !important;
  text-align: center !important;
  padding: 12px !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  margin: 0 0 10px 0 !important;
}

.sy232-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #fff !important;
}

.sy232-table th {
  background: #050507 !important;
  color: #fff !important;
  font-weight: 950 !important;
  padding: 10px !important;
  border: 2px solid #111 !important;
  text-align: left !important;
}

.sy232-table td {
  background: #fff !important;
  color: #111827 !important;
  font-weight: 850 !important;
  padding: 10px !important;
  border: 2px solid #111 !important;
  vertical-align: middle !important;
}

.sy232-part-btn {
  min-width: 68px !important;
  min-height: 36px !important;
  border-radius: 8px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  color: #fff !important;
}

.sy232-part-yes {
  background: linear-gradient(135deg, #166534, #16a34a) !important;
  border: 2px solid #22c55e !important;
}

.sy232-part-no {
  background: linear-gradient(135deg, #7f1d1d, #dc2626) !important;
  border: 2px solid #ef4444 !important;
}

.sy232-table button:not(.sy232-part-btn),
.sy232-form button {
  min-height: 40px !important;
  border-radius: 0 !important;
  font-weight: 950 !important;
  padding: 7px 12px !important;
  margin: 3px !important;
  border: 3px solid #111 !important;
}

.sy232-btn-blue { background:#0b6bff !important; color:#fff !important; }
.sy232-btn-red { background:#c90000 !important; color:#fff !important; }
.sy232-btn-yellow { background:#ffd400 !important; color:#111827 !important; }
.sy232-btn-green { background:#16a34a !important; color:#fff !important; }

.sy232-empty {
  background: #fff !important;
  color: #111827 !important;
  padding: 18px !important;
  font-weight: 950 !important;
  border: 3px solid #111 !important;
}

.sy232-form {
  background:#fff !important;
  color:#111827 !important;
  border:4px solid #111 !important;
  padding:16px !important;
  margin:14px 0 !important;
}

.sy232-form h3 {
  color:#111827 !important;
  margin-top:0 !important;
}

.sy232-form-grid {
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap:10px !important;
}

.sy232-form input,
.sy232-form select,
.sy232-form textarea {
  width:100% !important;
  box-sizing:border-box !important;
  color:#111827 !important;
  background:#fff !important;
  border:2px solid #111 !important;
  padding:10px !important;
  font-weight:850 !important;
}

.sy232-preview-grid {
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:16px !important;
}

.sy232-preview-card {
  background:rgba(15,23,42,.94) !important;
  border:1px solid rgba(148,163,184,.25) !important;
  border-radius:20px !important;
  padding:18px !important;
}

.sy232-preview-card h2 {
  color:#fff !important;
  text-align:center !important;
  margin-top:0 !important;
}

@media (max-width: 900px) {
  .sy232-preview-grid {
    grid-template-columns:1fr !important;
  }
}
