.quick-start-card {
  --quick-start-rgb: 56, 189, 248;

  border-color: rgba(var(--quick-start-rgb), 0.50);
  background:
    radial-gradient(
      circle at 0% 50%,
      rgba(var(--quick-start-rgb), 0.10),
      transparent 34%
    ),
    linear-gradient(
      110deg,
      rgba(10, 24, 43, 0.97),
      rgba(15, 23, 42, 0.96) 58%,
      rgba(15, 23, 42, 0.97)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 0 0 1px rgba(var(--quick-start-rgb), 0.035),
    0 0 24px rgba(var(--quick-start-rgb), 0.075);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.quick-start-card[open] {
  border-color: rgba(var(--quick-start-rgb), 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(var(--quick-start-rgb), 0.045),
    0 0 28px rgba(var(--quick-start-rgb), 0.085);
}

.quick-start-card[open] .quick-start-summary {
  border-bottom-color: rgba(var(--quick-start-rgb), 0.25);
}

/* Quick Start is the primary path into a session. */
.quick-start-summary .settings-summary-copy > strong {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #f8fafc;
  text-shadow: 0 0 18px rgba(var(--quick-start-rgb), 0.10);
}

.quick-start-summary .settings-summary-copy > strong::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid rgb(var(--quick-start-rgb));
  filter: drop-shadow(
    0 0 5px rgba(var(--quick-start-rgb), 0.48)
  );
}

.quick-start-summary .settings-summary-copy > small {
  color: #a8c5da;
}

.quick-start-card .quick-start-summary-action {
  border-color: rgba(var(--quick-start-rgb), 0.42);
  background: rgba(var(--quick-start-rgb), 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 16px rgba(var(--quick-start-rgb), 0.08);
}

.quick-start-summary-action::before {
  content: "Choose Training";
}

.quick-start-card[open] .quick-start-summary-action::before {
  content: "Close Quick Start";
}

.quick-start-content {
  display: grid;
  gap: 24px;
}

.quick-start-tier {
  display: grid;
  gap: 13px;
}

.quick-start-tier-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.quick-start-tier-heading > div {
  display: grid;
  gap: 3px;
}

.quick-start-tier-heading strong {
  font-size: 1rem;
}

.quick-start-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.quick-start-preset {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 13px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(100, 116, 139, 0.34);
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      rgba(30, 41, 59, 0.88),
      rgba(15, 23, 42, 0.94)
    );
  transition:
    border-color 0.18s ease,
    transform 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

@media (hover: hover) {
  .quick-start-card:hover {
    border-color: rgba(var(--quick-start-rgb), 0.66);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.045),
      0 0 0 1px rgba(var(--quick-start-rgb), 0.055),
      0 0 30px rgba(var(--quick-start-rgb), 0.11);
  }

  .quick-start-card:hover .quick-start-summary-action {
    border-color: rgba(var(--quick-start-rgb), 0.58);
    background: rgba(var(--quick-start-rgb), 0.13);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 0 20px rgba(var(--quick-start-rgb), 0.12);
  }

  .quick-start-preset:hover {
    transform: translateY(-3px);
    border-color: rgba(96, 165, 250, 0.58);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.045),
      0 12px 30px rgba(0, 0, 0, 0.22),
      0 0 0 1px rgba(96, 165, 250, 0.10),
      0 0 26px rgba(59, 130, 246, 0.15);
  }

  .quick-start-preset.premium:hover {
    transform: translateY(-3px);
    border-color: rgba(167, 139, 250, 0.62);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.045),
      0 12px 30px rgba(0, 0, 0, 0.22),
      0 0 0 1px rgba(167, 139, 250, 0.12),
      0 0 28px rgba(124, 58, 237, 0.18);
  }
}

.quick-start-preset.premium {
  border-color: rgba(167, 139, 250, 0.4);
  background:
    linear-gradient(
      145deg,
      rgba(76, 29, 149, 0.12),
      rgba(15, 23, 42, 0.95)
    );
}

.quick-start-preset.premium.is-locked {
  border-color: rgba(167, 139, 250, 0.28);
}

.quick-start-preset-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.quick-start-preset-heading > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.quick-start-preset-heading strong {
  color: #f8fafc;
  font-size: 1.04rem;
}

/* Quick Start Training title icons */
.quick-start-training-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.quick-start-training-title > span:last-child {
  min-width: 0;
}

.quick-start-training-icon {
  --quick-start-training-icon-color: #38bdf8;

  display: inline-block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: var(--quick-start-training-icon-color);
  -webkit-mask: var(--quick-start-training-icon-url) center / contain no-repeat;
  mask: var(--quick-start-training-icon-url) center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.18));
}

.quick-start-preset.premium .quick-start-training-icon {
  --quick-start-training-icon-color: #a78bfa;
  filter: drop-shadow(0 0 5px rgba(167, 139, 250, 0.20));
}

.quick-start-training-icon.icon-moon {
  --quick-start-training-icon-url: url('/assets/icons/trainings/moon.svg?v=1');
}

.quick-start-training-icon.icon-scales {
  --quick-start-training-icon-url: url('/assets/icons/trainings/scales.svg?v=1');
}

.quick-start-training-icon.icon-gauge {
  --quick-start-training-icon-url: url('/assets/icons/trainings/gauge.svg?v=1');
}

.quick-start-training-icon.icon-bow {
  --quick-start-training-icon-url: url('/assets/icons/trainings/bow.svg?v=1');
}

.quick-start-training-icon.icon-penis {
  --quick-start-training-icon-url: url('/assets/icons/trainings/penis.svg?v=2');
}

.quick-start-training-icon.icon-vulva {
  --quick-start-training-icon-url: url('/assets/icons/trainings/vulva.svg?v=4');
}

.quick-start-training-icon.icon-crown {
  --quick-start-training-icon-url: url('/assets/icons/trainings/crown.svg?v=2');
}

.quick-start-training-icon.icon-heart {
  --quick-start-training-icon-url: url('/assets/icons/trainings/heart.svg?v=1');
}

.quick-start-training-icon.icon-spade {
  --quick-start-training-icon-url: url('/assets/icons/trainings/spade.svg?v=1');
}

.quick-start-training-icon.icon-tie {
  --quick-start-training-icon-url: url('/assets/icons/trainings/tie.svg?v=1');
}

.quick-start-training-icon.icon-spiral {
  --quick-start-training-icon-url: url('/assets/icons/trainings/spiral.svg?v=1');
}

.quick-start-training-icon.icon-stopwatch {
  --quick-start-training-icon-url: url('/assets/icons/trainings/stopwatch.svg?v=1');
}

.quick-start-training-icon.icon-flame {
  --quick-start-training-icon-url: url('/assets/icons/trainings/flame.svg?v=1');
}

.quick-start-training-icon.icon-warning {
  --quick-start-training-icon-url: url('/assets/icons/trainings/warning.svg?v=1');
}

.quick-start-training-icon.icon-dice {
  --quick-start-training-icon-url: url('/assets/icons/trainings/dice.svg?v=1');
}

.quick-start-training-icon.icon-chain {
  --quick-start-training-icon-url: url('/assets/icons/trainings/chain.svg?v=2');
}

.quick-start-training-icon.icon-chair {
  --quick-start-training-icon-url: url('/assets/icons/trainings/chair.svg?v=2');
}

.quick-start-training-icon.icon-house {
  --quick-start-training-icon-url: url('/assets/icons/trainings/house.svg?v=2');
}

.quick-start-training-icon.icon-double-male {
  --quick-start-training-icon-url: url('/assets/icons/trainings/double-male.svg?v=2');
}

.quick-start-training-icon.icon-drooling-face {
  --quick-start-training-icon-url: url('/assets/icons/trainings/drooling-face.svg?v=2');
}

.quick-start-training-icon.icon-breasts {
  --quick-start-training-icon-url: url('/assets/icons/trainings/breasts.svg?v=3');
}

.quick-start-training-icon.icon-feet {
  --quick-start-training-icon-url: url('/assets/icons/trainings/feet.svg?v=5');
}

.quick-start-training-icon.icon-shirt {
  --quick-start-training-icon-url: url('/assets/icons/trainings/shirt.svg?v=1');
}


.quick-start-training-icon.icon-footprint {
  --quick-start-training-icon-url: url('/assets/icons/trainings/footprint.svg?v=2');
}

.quick-start-training-icon.icon-robot-head {
  --quick-start-training-icon-url: url('/assets/icons/trainings/robot-head.svg?v=1');
}

.quick-start-training-icon.icon-shirt-outline {
  --quick-start-training-icon-url: url('/assets/icons/trainings/shirt-outline.svg?v=2');
}


.quick-start-training-icon.icon-animation {
  --quick-start-training-icon-url: url('/assets/icons/trainings/animation.svg?v=1');
}


.quick-start-training-icon.icon-transgender {
  --quick-start-training-icon-url: url('/assets/icons/trainings/transgender.svg?v=1');
}


.quick-start-training-icon.icon-double-female {
  --quick-start-training-icon-url: url('/assets/icons/trainings/double-female.svg?v=1');
}

.quick-start-preset-heading small {
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 650;
}

.quick-start-badges {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
}

.quick-start-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


.quick-start-badge.duration {
  border: 1px solid rgba(148, 163, 184, 0.24);
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.52);
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}

.quick-start-badge.free {
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #cbd5e1;
  background: rgba(51, 65, 85, 0.28);
}

.quick-start-badge.premium {
  border: 1px solid rgba(167, 139, 250, 0.42);
  color: #ede9fe;
  background: rgba(109, 40, 217, 0.2);
}

.quick-start-preset p {
  min-height: 3.9em;
  color: #cbd5e1;
  font-size: 0.86rem;
  line-height: 1.5;
}

.quick-start-traits {
  display: flex;
  align-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}

.quick-start-traits span {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid rgba(100, 116, 139, 0.3);
  border-radius: 999px;
  color: #94a3b8;
  background: rgba(2, 6, 23, 0.32);
  font-size: 0.7rem;
  font-weight: 700;
}

.quick-start-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  margin-top: auto;
}

.quick-start-primary,
.quick-start-secondary {
  min-height: 40px;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 0.79rem;
}

.quick-start-primary {
  color: #eff6ff;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.quick-start-preset.premium .quick-start-primary {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

.quick-start-secondary {
  border: 1px solid rgba(100, 116, 139, 0.38);
  color: #cbd5e1;
  background: rgba(30, 41, 59, 0.55);
}

.quick-start-secondary[hidden] {
  display: none !important;
}


/* ---------- Successful preset application ---------- */

.quick-start-preset.is-applied,
.quick-start-preset.is-applied:hover,
.quick-start-preset.premium.is-applied,
.quick-start-preset.premium.is-applied:hover {
  border-color: rgba(74, 222, 128, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 30px rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(74, 222, 128, 0.08),
    0 0 24px rgba(34, 197, 94, 0.13);
}

.quick-start-preset.is-applied .quick-start-badges::after {
  content: "✓ Applied";

  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 7px;

  border: 1px solid rgba(74, 222, 128, 0.40);
  border-radius: 999px;

  color: #bbf7d0;
  background: rgba(22, 101, 52, 0.22);

  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;

  animation:
    quick-start-applied-badge-in 160ms ease-out both;
}

@keyframes quick-start-applied-badge-in {
  from {
    opacity: 0;
    transform: translateY(2px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


.quick-start-message {
  min-height: 1.35em;
  color: #94a3b8;
  font-size: 0.84rem;
  font-weight: 650;
}

.quick-start-message.good {
  color: #86efac;
}

.quick-start-message.bad {
  color: #fca5a5;
}

.quick-start-message.premium {
  color: #c4b5fd;
}


@media (prefers-reduced-motion: reduce) {
  .quick-start-card,
  .quick-start-preset,
  .quick-start-card .quick-start-summary-action {
    transition: none;
  }

  .quick-start-preset.is-applied .quick-start-badges::after {
    animation: none;
  }

  .quick-start-preset:hover,
  .quick-start-preset.premium:hover {
    transform: none;
  }
}

@media (max-width: 900px) {
  .quick-start-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .quick-start-grid {
    grid-template-columns: 1fr;
  }

  .quick-start-preset p {
    min-height: 0;
  }

  .quick-start-tier-heading {
    align-items: flex-start;
  }
}


/* === MANUAL TRAINING ICON SIZES === */

.quick-start-training-icon.icon-feet {
  transform: scale(1.20);
}

.quick-start-training-icon.icon-breasts {
  transform: scale(1.20);
}

.quick-start-training-icon.icon-chain {
  transform: scale(1.15);
}

.quick-start-training-icon.icon-double-male {
  transform: scale(1.12);
}

.quick-start-training-icon.icon-crown {
  transform: scale(1.14);
}

.quick-start-training-icon.icon-house {
  transform: scale(1.13);
}

.quick-start-training-icon.icon-penis {
  transform: scale(1.18);
}

.quick-start-training-icon.icon-shirt {
  transform: scale(1.15);
}

.quick-start-training-icon.icon-vulva {
  transform: scale(1.20);
}

/* === END MANUAL TRAINING ICON SIZES === */