/* Share-card generator (cards.js). Lives inside the Admin panel; reuses the site's tokens and .btn / .chip-btn. */
.share-cards { display: grid; gap: 14px; position: relative; }
.share-cards .sc-head h2 { margin: 0 0 4px; }
.share-cards .sc-head p { margin: 0; }

.sc-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-tabs .chip-btn.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

.sc-options { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sc-opt { display: none; align-items: center; gap: 8px; font: 600 .9rem/1 var(--body); color: var(--ink-soft); }
.share-cards.is-picks .sc-opt-picks, .share-cards.is-player .sc-opt-player { display: inline-flex; }
.sc-date, .sc-select { font: 500 .95rem/1.2 var(--data); padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); max-width: 100%; }

/* The canvas is 2400x1350 pixels; scale it to the column and keep the 16:9 box steady while redrawing. */
.sc-stage { aspect-ratio: 16 / 9; width: 100%; max-width: 720px; border-radius: 10px; overflow: hidden; background: #1E2B3A; box-shadow: 0 6px 24px rgba(30, 43, 58, .25); display: grid; place-items: center; }
.sc-canvas { width: 100%; height: 100%; display: block; }
.sc-loading { color: #EEE8DC; font: 600 .95rem/1 var(--body); opacity: .7; }

.sc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sc-btn:disabled { opacity: .5; cursor: not-allowed; }
.sc-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.sc-ghost:hover { background: var(--ink); color: var(--on-ink); }
.sc-status { font: 500 .85rem/1 var(--data); color: var(--ink-soft); }

/* Small confirmation that fades on its own. */
.sc-toast { position: absolute; left: 0; bottom: -4px; transform: translateY(8px); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; background: var(--ink); color: var(--on-ink); font: 600 .85rem/1 var(--body); padding: 9px 14px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.sc-toast.show { opacity: 1; transform: translateY(0); }
.sc-toast.bad { background: var(--bad); color: #fff; }

@media (max-width: 600px) {
  .sc-stage { max-width: 100%; }
}