/* So'm referral reward card (/referral full, /tap compact). Gold-green: real money, kept visually apart from coins. */
.som {
  display: grid; gap: 12px; padding: 18px 18px 20px; margin: 14px 0;
  box-shadow: var(--shadow), 0 0 0 1px rgba(31, 224, 138, 0.35) inset;
  background: linear-gradient(160deg, rgba(11, 157, 94, 0.2), rgba(22, 19, 49, 0.94) 55%);
}
.som h2 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--win); }
.som h3 { margin: 6px 0 0; font-size: var(--step-0); }
.som p { margin: 0; }
.sm-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sm-top .c-stat strong { color: var(--win); }
.sm-note { padding: 8px 12px; border-radius: var(--r-sm); background: rgba(255, 201, 64, 0.1); box-shadow: 0 0 0 1px rgba(255, 201, 64, 0.3) inset; font-weight: 700; }
.sm-rules summary { cursor: pointer; font-weight: 800; }
.sm-rules ol { margin: 8px 0 0; padding-left: 1.3em; display: grid; gap: 4px; }
.sm-table td, .sm-table th { white-space: nowrap; }
.sm-yes { color: var(--win); font-weight: 800; }
.sm-no { color: var(--lose); font-weight: 700; }
.sm-form { max-width: 360px; }
.sm-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sm-history li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 8px 10px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.04); }
.sm-st { font-weight: 800; }
.sm-st.is-paid { color: var(--win); }
.sm-st.is-rejected { color: var(--lose); }
.sm-st.is-pending { color: var(--gold); }
.sm-more { font-weight: 800; color: var(--win); }
.sm-warn { margin: 0; font-size: var(--step--1); font-weight: 700; color: var(--gold); }
.sm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-share { min-height: 46px; padding: 0 20px; font-weight: 900; }
.sm-friends { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sm-friend {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline;
  padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.sm-friend.is-credited { box-shadow: inset 0 0 0 1px rgba(31, 224, 138, 0.35); }
.sm-fname { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-fmeta { grid-column: 1 / -1; font-size: var(--step--1); color: var(--mute); }