/* ===========================================
   ScoreVibe Account Section Styles
=========================================== */

#account {
  padding: 16px;
  color: var(--txt);
  font-family: Inter, system-ui, Arial, sans-serif;
}

/* General cards */
#account .card {
  background: var(--panel, #0b1428);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 16px;
  margin-bottom: 14px;
}

/* Accordion headers (scoped) */
#account .accordion-header,
[data-page="account"] .accordion-header {
  width: 100%;
  background: rgba(255,255,255,0.06);
  color: var(--txt);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s ease;
}
#account .accordion-header:hover,
#account .accordion-header.active,
[data-page="account"] .accordion-header:hover,
[data-page="account"] .accordion-header.active {
  background: linear-gradient(145deg,#00f5a5,#009f8f);
  color:#012016;
}

#account .accordion-content,
[data-page="account"] .accordion-content {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px;
  margin-top: -6px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: max-height .35s ease;
  max-height: 0;
}
#account .accordion-header.active + .accordion-content,
[data-page="account"] .accordion-header.active + .accordion-content {
  max-height: 1200px;
}

/* Predictions */
#account .predictions-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 12px;
}
#account .predictions-box {
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 10px;
}

/* Stats */
#account .pred-summary {
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 10px;
}
#account .stats-grid {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
#account .stats-grid span {
  display:block;
  font-size:1.2rem;
  font-weight:800;
  color:var(--accent,#00e5ff);
}

/* Buttons */
#account .btn, #account .btn-outline {
  border-radius:10px;
  padding:8px 14px;
  font-weight:700;
  cursor:pointer;
  transition:.25s;
}
#account .btn {
  background:linear-gradient(145deg,#00f5a5,#009f8f);
  color:#012016;
  border:0;
}
#account .btn-outline {
  background:transparent;
  border:1px solid var(--accent,#00e5ff);
  color:var(--accent,#00e5ff);
}
#account .btn-outline:hover {
  background:var(--accent,#00e5ff);
  color:#012016;
}

/* Payout fields */
#account .payout-fields { display:none; margin-top:8px; }

/* Misc */
#account .account-profile-card,
#account .account-card {
  background: var(--panel,#0b1428);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  padding:14px;
  margin-bottom:12px;
}