/* ⭐ optimal-squad — the one-click optimal squad button + modal (shared/optimal-squad.js).
   Theme tokens only, so light/dark follow vc-theme.css. The pitch stays green in both. */

.vc-osq-cta { margin: 10px 0 12px; display: flex; justify-content: center; }
.vc-osq-button {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 800;
  font-size: 0.95rem; padding: 11px 18px; border-radius: 999px; color: #1a1300;
  background: linear-gradient(135deg, var(--vc-gold), var(--vc-accent));
  box-shadow: 0 6px 18px rgba(252, 198, 29, 0.25);
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
}
.vc-osq-button:hover { filter: brightness(1.06); }
.vc-osq-button:focus-visible { outline: 2px solid var(--vc-text); outline-offset: 2px; }

html.vc-osq-lock, html.vc-osq-lock body { overflow: hidden; }
.vc-osq-modal {
  display: none; position: fixed; inset: 0; z-index: 10050; padding: 16px;
  background: rgba(3, 8, 14, 0.72); align-items: center; justify-content: center;
}
.vc-osq-modal.open { display: flex; }
.vc-osq-sheet {
  width: 100%; max-width: 600px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--vc-surface); color: var(--vc-text); border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-lg); box-shadow: var(--vc-shadow); padding: 14px 14px 12px;
}
.vc-osq-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.vc-osq-title { font-weight: 800; font-size: 1.05rem; }
/* A tool's one-line "what is this" under the title (cfg.strings.intro). */
.vc-osq-intro { font-size: 0.85rem; color: var(--vc-text-sub); line-height: 1.45; margin: -4px 0 10px; }
.vc-osq-close {
  appearance: none; border: 0; background: var(--vc-chip-bg); color: var(--vc-text);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font: inherit;
}
.vc-osq-toggle { display: flex; margin-bottom: 10px; }
.vc-osq-toggle .vc-seg-btn { flex: 1; }
/* The round choice is one line of short labels — a wrapped pill doubles the control's height. */
.vc-osq-horizon .vc-seg-btn { white-space: nowrap; }
@media (max-width: 480px) { .vc-osq-horizon .vc-seg-btn { font-size: 0.85rem; padding-inline: 8px; } }
.vc-osq-toggle small { opacity: 0.75; font-weight: 600; }
/* The budget row: auto · presets · a typed amount. */
.vc-osq-budget { flex-wrap: wrap; gap: 6px; align-items: stretch; }
.vc-osq-budget-custom { display: inline-flex; align-items: center; gap: 2px; padding: 0 8px; border: 1px solid var(--vc-border); border-radius: 8px; font-size: 0.85rem; color: var(--vc-text-sub); }
.vc-osq-budget-custom.active { border-color: var(--vc-accent); color: var(--vc-text); }
.vc-osq-budget-input { width: 4.5em; background: transparent; border: 0; color: var(--vc-text); font: inherit; text-align: center; padding: 6px 0; }

.vc-osq-summary { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.88rem; color: var(--vc-text-sub); margin-bottom: 8px; }
.vc-osq-summary b { color: var(--vc-text); font-size: 1rem; }
.vc-osq-note { font-size: 0.8rem; color: var(--vc-amber); margin-bottom: 6px; }
.vc-osq-stale { opacity: 0.45; filter: grayscale(0.4); transition: opacity 0.2s; }

.vc-osq-pitch {
  border-radius: var(--vc-radius-md); padding: 12px 4px; display: flex; flex-direction: column; gap: 12px;
  background:
    linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.10)) center 50% / 100% 1px no-repeat,
    repeating-linear-gradient(180deg, #1f7a44 0 44px, #1c7040 44px 88px);
}
.vc-osq-line { display: flex; justify-content: center; gap: 4px; flex-wrap: nowrap; }
.vc-osq-player { width: 20%; max-width: 96px; min-width: 0; text-align: center; }
.vc-osq-disc {
  position: relative; margin: 0 auto 3px; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem;
  background: #f7f7f7; color: #102030; border: 2px solid rgba(0,0,0,0.25);
}
.vc-osq-pos1 .vc-osq-disc { background: #fcd34d; }
.vc-osq-badge {
  position: absolute; top: -5px; inset-inline-end: -7px; width: 18px; height: 18px; border-radius: 50%;
  background: #111; color: #fcc61d; font-size: 0.66rem; line-height: 18px; font-weight: 900;
}
.vc-osq-badge-v { color: #f7f7f7; }
.vc-osq-name {
  font-size: 0.74rem; font-weight: 700; color: #fff; background: rgba(8, 18, 28, 0.82);
  border-radius: 6px; padding: 1px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vc-osq-meta { font-size: 0.64rem; color: rgba(255,255,255,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-osq-bench-label { font-size: 0.78rem; color: var(--vc-text-sub); margin: 10px 2px 6px; font-weight: 700; }
.vc-osq-bench { background: var(--vc-surface2); border-radius: var(--vc-radius-sm); padding: 8px 4px; }
.vc-osq-bench .vc-osq-player { width: 24%; }
.vc-osq-bench .vc-osq-name { background: transparent; color: var(--vc-text); }
.vc-osq-bench .vc-osq-meta { color: var(--vc-text-sub); }
.vc-osq-card { position: relative; width: 100%; overflow: hidden; border-radius: var(--vc-radius-md); }
.vc-osq-frame {
  position: absolute; top: 0; left: 0; width: 1080px; height: 1350px; border: 0;
  transform-origin: 0 0; background: transparent;
}
/* The free teaser's upsell and a member's copy/save row, both directly under the card. */
.vc-osq-upsell {
  margin-top: 10px; padding: 14px 12px; text-align: center; border-radius: var(--vc-radius-md);
  background: var(--vc-surface2); border: 1px solid var(--vc-border);
}
.vc-osq-upsell-title { font-weight: 800; font-size: 1rem; }
.vc-osq-upsell-body { font-size: 0.85rem; color: var(--vc-text-sub); margin-top: 4px; line-height: 1.5; }
.vc-osq-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.vc-osq-action {
  appearance: none; font: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer;
  padding: 8px 16px; border-radius: 999px; color: var(--vc-text);
  background: var(--vc-chip-bg); border: 1px solid var(--vc-border);
}
.vc-osq-action:hover { filter: brightness(1.1); }
.vc-osq-action-msg { flex-basis: 100%; text-align: center; font-size: 0.78rem; color: var(--vc-text-sub); min-height: 1em; }
.vc-osq-locked { filter: blur(6px); opacity: 0.8; user-select: none; pointer-events: none; }
.vc-osq-foot { font-size: 0.72rem; color: var(--vc-text-sub); margin-top: 10px; text-align: center; }
.vc-osq-rounds { font-size: 0.78rem; color: var(--vc-text-sub); margin-top: 8px; text-align: center; }
.vc-osq-rounds b { color: var(--vc-text); }

.vc-osq-state { text-align: center; padding: 36px 12px; color: var(--vc-text-sub); line-height: 1.8; }
.vc-osq-cta-link, .vc-osq-retry {
  display: inline-block; margin-top: 8px; padding: 8px 18px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-weight: 800; text-decoration: none; color: #1a1300;
  background: linear-gradient(135deg, var(--vc-gold), var(--vc-accent));
}
.vc-osq-spin::before {
  content: ''; display: inline-block; width: 12px; height: 12px; margin-inline-end: 6px; vertical-align: -1px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: vc-osq-spin 0.8s linear infinite;
}
@keyframes vc-osq-spin { to { transform: rotate(360deg); } }
@media (max-width: 420px) {
  .vc-osq-modal { padding: 8px; }
  .vc-osq-sheet { padding: 12px 8px 10px; }
  .vc-osq-disc { width: 34px; height: 34px; font-size: 0.76rem; }
  .vc-osq-name { font-size: 0.66rem; }
  .vc-osq-meta { font-size: 0.58rem; }
}