/* Team Post Kit builder, consumer chrome, library, and generation-result styles. */

/* =============================================================================
   11. Team Post Kit Wizard Styles
   ============================================================================= */

body.studio-page {
  /* Custom scope properties */
}

.studio-wizard-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
/* The display:flex above otherwise wins over the `hidden` attribute, so hiding the
   form (to swap in the Review-Before-Generate panel) silently failed. */
.studio-wizard-container[hidden] {
  display: none !important;
}

.wizard-progress-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-subtle);
  padding: 0.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  margin-top: 1rem;
}

.wizard-step {
  flex: 1;
  text-align: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.2s ease;
}

.wizard-step:not(span) {
  cursor: pointer;
}

.wizard-step:not(span):hover {
  border-color: var(--primary);
  color: var(--text);
}

.wizard-step.active {
  background: var(--badge-grid);
  color: #0b1a2a;
}

.wizard-step.completed {
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}

/* Recipe (layout) picker — image-backed cards that behave like the vibe style
   cards. Each card shows an example image (or a brand gradient placeholder until
   real examples are added) with the layout name + short description below. */
.recipe-cards-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.85rem;
  margin-top: 1rem;
  width: 100%;
}
@media (max-width: 1100px) { .recipe-cards-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .recipe-cards-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .recipe-cards-grid { grid-template-columns: repeat(2, 1fr); } }

/* Wizard action buttons never wrap; swap to short labels on phones. */
.wizard-actions-row .btn-solid,
.wizard-actions-row .tpk-btn-ghost { white-space: nowrap; }
.btn-label-short { display: none; }
@media (max-width: 560px) {
  .btn-label-full { display: none; }
  .btn-label-short { display: inline; }
}

.recipe-sport-filter {
  display: flex;
  /* Shared TPK filter-pill behavior: independent chips in one horizontal rail. */
  flex-wrap: nowrap;
  width: 100%;
  max-width: 37rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
  gap: 0.5rem;
  margin-top: 0.25rem;
  /* Keep a partial final pill visible as the horizontal-scroll affordance, then
     provide enough end space to reveal it cleanly after scrolling. 
     Top and bottom padding are increased to prevent hover scale/shadow from clipping. */
  padding: 0.4rem 0.75rem 0.5rem 0;
  min-width: 0;
}

.recipe-sport-filter::-webkit-scrollbar {
  display: none;
}

.recipe-sport-filter-btn {
  appearance: none;
  border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.22));
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  min-height: 38px;
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--muted);
  background: var(--btn-neutral, rgba(15, 23, 42, 0.58));
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.recipe-sport-filter-btn:hover {
  color: var(--text);
  border-color: rgba(var(--primary-rgb), 0.55);
  background: var(--surface-hover, rgba(148, 163, 184, 0.12));
  transform: scale(1.03) translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.recipe-sport-filter-btn:active {
  transform: scale(0.97) translateY(0);
}

.recipe-sport-filter-btn.active {
  color: #071827;
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.25);
}

.recipe-sport-filter-btn[data-sport-filter="all"] {
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 0.55rem 0 0.5rem -0.35rem var(--panel);
}

.recipe-sport-filter-btn[data-sport-filter="all"].active {
  box-shadow:
    0.55rem 0 0.5rem -0.35rem var(--panel),
    0 0 12px rgba(var(--primary-rgb), 0.25);
}

.recipe-option-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.recipe-option-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 0 24px rgba(99, 102, 241, 0.18);
}

.recipe-option-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary), 0 0 24px rgba(99, 102, 241, 0.25);
}

.recipe-card-media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  background:
    linear-gradient(135deg, rgba(99, 102, 241, 0.45), rgba(34, 211, 238, 0.3)),
    var(--surface);
}
.recipe-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  display: block;
}

.recipe-card-check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-pill);
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  z-index: 2;
}
.recipe-option-card.selected .recipe-card-check { display: inline-flex; }

@media (max-width: 560px) {
  .recipe-card-check {
    width: 2rem;
    height: 2rem;
    font-size: 1.05rem;
  }
}

/* Per-card preview pill for recipe layout selection: opens layout example in full lightbox modal */
.recipe-card-preview-pill {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: rgba(6, 8, 15, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

/* Expand the clickable touch target to ~46px without changing the visual size,
   so the 28px preview pill clears the 44px mobile tap-target guideline. */
.recipe-card-preview-pill::after {
  content: "";
  position: absolute;
  top: -9px;
  left: -9px;
  right: -9px;
  bottom: -9px;
  border-radius: var(--radius-pill);
}

.recipe-card-preview-pill:hover,
.recipe-card-preview-pill:focus-visible {
  background: rgba(6, 8, 15, 0.85);
  border-color: var(--primary);
  color: var(--primary);
  outline: none;
}

.recipe-card-preview-pill:active {
  transform: scale(0.9);
}

.recipe-card-preview-pill svg {
  pointer-events: none;
}

.recipe-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0.8rem 0.7rem;
}
.recipe-card-title { font-weight: 700; font-size: 0.95rem; }
.recipe-card-desc {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Locked (higher-tier) recipe cards: visible for upsell, not selectable. */
.recipe-option-card.locked { cursor: not-allowed; }
.recipe-option-card.locked:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}
.recipe-option-card.locked .recipe-card-title,
.recipe-option-card.locked .recipe-card-desc { opacity: 0.7; }
.recipe-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(8, 12, 22, 0.58);
  color: #fff;
}
.recipe-lock-icon { font-size: 1.5rem; line-height: 1; }
.recipe-lock-text {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--primary);
}

/* Locked-layout upsell modal: large preview of the gated layout */
.recipe-upgrade-card {
  position: relative;
  max-width: 460px;
  text-align: center;
}
.recipe-upgrade-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.recipe-upgrade-close:hover { color: var(--text, #fff); background: rgba(255, 255, 255, 0.08); }
.recipe-upgrade-preview {
  position: relative;
  margin: 0 0 1rem;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: #0b111b;
  border: 1px solid var(--border);
}
.recipe-upgrade-preview[hidden] { display: none; }
.recipe-upgrade-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
}
.recipe-upgrade-lock {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(8, 12, 22, 0.72);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.recipe-upgrade-lock-icon { font-size: 0.85rem; line-height: 1; }
.recipe-upgrade-card .modal-actions { justify-content: center; }

.recipe-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.82);
  color: var(--primary-light);
  border: 1px solid rgba(99, 102, 241, 0.4);
}
.recipe-badge.starter { color: #6ee7b7; border-color: rgba(16, 185, 129, 0.45); }
.recipe-badge.base { color: var(--primary-light); border-color: rgba(99, 102, 241, 0.45); }
.recipe-badge.pro { color: #fcd34d; border-color: rgba(245, 158, 11, 0.45); }
.recipe-badge.admin { color: #fda4af; border-color: rgba(244, 63, 94, 0.45); }

.wizard-actions-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.wizard-actions-row .btn-solid {
  min-width: 180px;
}

body.tpk-body.rivals-page .tpk-main:has(.tpk-sticky-actions-row) {
  padding-bottom: 3.8rem;
}

body.tpk-body.rivals-page .tpk-sticky-actions-row {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 50;
  width: min(calc(100vw - 5rem), 1120px);
  margin-top: 0;
  padding: 0.45rem 0.7rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  border: 1px solid rgba(71, 85, 105, 0.72);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: rgba(15, 23, 42, 0.9);
  box-shadow: 0 -10px 28px rgba(2, 6, 23, 0.3);
  backdrop-filter: blur(10px) saturate(135%);
}

body.tpk-body.rivals-page .tpk-sticky-actions-row .btn-solid {
  min-width: 150px;
  min-height: 34px;
  padding: 0.45rem 1rem;
}

/* Share is the hero post-generation action. Without an explicit tpk-body rule the
   shared .btn-solid base renders btn-sky as a dark, low-contrast control that reads
   as disabled on the dark sticky bar — users miss it and hit Back instead. Make it a
   solid, high-contrast blue with white text so it clearly reads as the primary CTA. */
.tpk-body .btn-sky {
  background: #2f9bff;
  color: #fff;
  font-weight: 700;
  border: 0;
}
.tpk-body .btn-sky:hover { background: #1f8bef; }
.tpk-body .btn-sky:active { background: #1a7fe0; }

/* Demote Back on the result bar so it stops out-competing Share/Download for
   attention (it previously carried the brightest blue outline). Quiet secondary. */
body.tpk-body.rivals-page .tpk-result-actions-row .btn-neutral {
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
  font-weight: 600;
}
body.tpk-body.rivals-page .tpk-result-actions-row .btn-neutral:hover {
  background: rgba(148, 163, 184, 0.2);
  color: #fff;
}

/* Footer-aware docking (see initStickyActionsFooterRelease): once the page footer
   scrolls into view, JS lifts the still-fixed bar up by how far the footer has
   entered the viewport so it rests on top of the footer instead of covering it.
   It now reads as a full floating card rather than a viewport-edge sheet. */
body.tpk-body.rivals-page .tpk-sticky-actions-row.is-docked {
  transform: translate(-50%, calc(var(--tpk-actions-lift, 0px) * -1));
  border-bottom: 1px solid rgba(71, 85, 105, 0.72);
  border-radius: 12px;
}

/* Step 2 layout adjustments */
.assets-wizard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .assets-wizard-grid {
    grid-template-columns: 350px 1fr;
  }
}

.assets-search-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.assets-preview-area {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Step 3 inputs & alignment */
.details-wizard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .details-wizard-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.details-form-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Step 4 result card details */
.result-wizard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .result-wizard-grid {
    grid-template-columns: 1.4fr 1fr;
  }
}

.result-image-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--surface-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  min-height: 450px;
}

.result-details-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}


/* "Remove Watermark" conversion CTA — full-width above the Download/Share row so it
   is the first action a trial user sees on the output page (mobile stacks this panel
   directly under the image). Works the same on desktop in the right-hand panel. */
.tpk-unlock-cta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.7rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb 55%, var(--tpk-logo-cyan, #2fe3ff));
  box-shadow: 0 10px 24px rgba(76, 60, 220, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.tpk-unlock-cta:hover,
.tpk-unlock-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(76, 60, 220, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.tpk-unlock-cta-title {
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
}
.tpk-unlock-cta-title::before {
  content: "\2728\00a0"; /* sparkles */
}
.tpk-unlock-cta-sub {
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.92;
  line-height: 1.25;
}

/* Plans-page unlock banner shown when arriving from the Remove-Watermark CTA. */
.tpk-unlock-banner {
  max-width: 720px;
  margin: 0 auto 1.1rem;
  padding: 0.85rem 1.1rem;
  border-radius: 12px;
  text-align: center;
  color: #f1f5ff;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(47, 227, 255, 0.22));
  border: 1px solid rgba(124, 58, 237, 0.5);
  box-shadow: 0 8px 24px rgba(12, 16, 30, 0.35);
}
.tpk-unlock-banner strong { display: block; font-size: 1.02rem; }
.tpk-unlock-banner span { font-size: 0.88rem; opacity: 0.9; }
.tpk-unlock-banner a {
  color: #8ef0ff;
  font-weight: 700;
  text-decoration: underline;
}

@media (max-width: 640px) {
  .tpk-unlock-banner { margin-left: 0.75rem; margin-right: 0.75rem; }
}

.tpk-share-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.tpk-share-actions .btn-solid {
  min-width: 0;
  width: 100%;
  text-align: center;
}

/* Desktop: hide mobile-only sticky-bar Download / Share buttons. */
.tpk-sticky-save { display: none; }

/* Sticky bar renders Generate, Restart, Download and Share at all times; the
   .tpk-sticky-has-save state (server-set, or added by tpk_wizard.js after a
   client-side image recovery) swaps Generate ↔ Restart/Download/Share. These
   apply on every viewport; the mobile media query layers grid/visibility on top. */
.tpk-sticky-actions-row:not(.tpk-sticky-has-save) .tpk-sticky-restart { display: none; }
.tpk-sticky-actions-row.tpk-sticky-has-save .tpk-sticky-generate { display: none; }

/* Revise heading: keep the Revise button inline with the title. */
.tpk-revise-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tpk-revise-inline-btn {
  margin-left: auto;
  flex: 0 0 auto;
}

.result-details-panel .rivals-revision-box {
  padding: 0.95rem;
}

.result-details-panel .rivals-revision-box .rivals-section-head {
  margin-bottom: 0.55rem;
}

.result-details-panel .tpk-outpaint-copy {
  margin-top: 0.2rem;
  font-size: 0.78rem;
  line-height: 1.25;
}

.rivals-revision-input-wrap {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.rivals-revision-input-wrap input[type="text"],
.rivals-revision-input-wrap textarea {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  background: rgba(12, 18, 30, 0.82);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  color: var(--text);
  font-size: 0.88rem;
  min-height: 36px;
  font-family: inherit;
  resize: vertical;
}

/* text_expand.js wraps each textarea in a .gd-textbox; keep it flexing like
   the bare textarea so the field width matches the original input. */
.rivals-revision-input-wrap .gd-textbox {
  flex: 1;
  min-width: 0;
}
.rivals-revision-input-wrap .gd-textbox > textarea {
  flex: none;
  width: 100%;
}

.rivals-revision-input-wrap input[type="text"] {
  resize: none;
}

.rivals-revision-input-wrap textarea {
  line-height: 1.4;
}

.rivals-revision-input-wrap .btn-solid {
  margin: 0 !important;
  min-height: 36px !important;
  height: 36px;
  width: auto;
  min-width: 72px;
  padding: 0 0.9rem !important;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}

.rivals-revision-input-wrap .btn-align-top {
  align-self: flex-start;
}

.rivals-outpaint-controls-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
}

.rivals-outpaint-controls-row .rivals-outpaint-toggle {
  flex: 1;
  margin-bottom: 0 !important;
}

.rivals-outpaint-controls-row #rivals-outpaint-btn {
  white-space: nowrap;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 1.25rem;
  margin: 0 !important;
}

@media (max-width: 540px) {
  .rivals-outpaint-controls-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .rivals-outpaint-controls-row #rivals-outpaint-btn {
    width: 100%;
  }
}

@media (max-width: 400px) {
  .rivals-revision-input-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .rivals-revision-input-wrap .btn-solid {
    width: 100%;
  }
}

.loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.loader-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--border-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .wizard-progress-bar {
    border-radius: var(--radius-md);
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  
  .wizard-step {
    flex: 1 1 45%;
    font-size: 0.75rem;
    padding: 0.4rem;
    border-radius: var(--radius-sm);
  }
  
  .wizard-actions-row {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .wizard-actions-row .btn-solid {
    width: 100%;
  }
}

/* =============================================================================
   Team Post Kit — consumer chrome (header / nav / footer / landing)
   ============================================================================= */

/* Scoped brand theme: remap the design tokens for consumer pages only, so the
   whole Create flow + marketing adopt the Team Post Kit identity (indigo/cyan on
   slate) while the internal tools keep their original mint theme. Tokens match
   the static team-post-kit storefront (css/custom.css). */
.tpk-body {
  --bg: #0f172a;
  --panel: #1e293b;
  --panel-muted: rgba(30, 41, 59, 0.6);
  --surface: #1e293b;
  --surface-dim: rgba(255, 255, 255, 0.02);
  --surface-subtle: rgba(255, 255, 255, 0.04);
  --text: #e2e8f0;
  --muted: #94a3b8;
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-light: #818cf8;
  --tpk-accent: #22d3ee;
  /* RGB channels of --primary (indigo) so rgba(var(--primary-rgb), a) glows
     render in-brand. Without this, tpk pages inherit the mint --primary-rgb. */
  --primary-rgb: 99, 102, 241;
  --tpk-accent-rgb: 34, 211, 238;
  --border: #334155;
  --border-light: #475569;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --primary-surface: rgba(99, 102, 241, 0.12);
  --primary-surface-strong: rgba(99, 102, 241, 0.2);
  --radius-md: 12px;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at 18% 0%, rgba(99, 102, 241, 0.18), transparent 45%),
    radial-gradient(circle at 85% 4%, rgba(34, 211, 238, 0.12), transparent 40%),
    var(--bg);
}
.tpk-body h1, .tpk-body h2, .tpk-body h3, .tpk-body h4 {
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: -0.02em;
}
.tpk-body ::selection { background: var(--primary); color: #fff; }

/* Primary button: white text on indigo (the shared rule hardcodes dark text). */
.tpk-body .btn-main { background: var(--primary); color: #fff; }
.tpk-body .btn-main:hover { background: var(--primary-dark); }

/* Ghost / outline secondary button used on the landing + hero. */
.tpk-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 34px;
  padding: 0.45rem 1.35rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text);
  font-weight: 600;
  line-height: 1.2;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tpk-btn-ghost:hover { border-color: var(--primary); color: #fff; }
.tpk-btn-lg { min-height: 48px; padding: 0.85rem 1.75rem; font-size: 1rem; }

.tpk-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--primary-surface);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: var(--primary-light);
  font-size: 0.8rem;
  font-weight: 600;
}
.tpk-gradient-text {
  background: linear-gradient(135deg, var(--primary), var(--tpk-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.tpk-shell {
  max-width: 1200px;
  margin: 0 auto;
}

.tpk-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.6rem 0.75rem 0.6rem 1.1rem;
  margin: 0.85rem auto 0;
  /* Inset 1.25rem per side so the floating bar's edges line up with .tpk-main's
     content box (which has 1.25rem horizontal padding). */
  width: calc(100% - 2.5rem);
  position: sticky;
  top: 0.85rem;
  z-index: 40;
  border-radius: 18px;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(4, 6, 12, 0.92), rgba(2, 4, 9, 0.92)) padding-box,
    linear-gradient(
      120deg,
      rgba(99, 102, 241, 0.7),
      rgba(34, 211, 238, 0.55),
      rgba(129, 140, 248, 0.7),
      rgba(34, 211, 238, 0.55),
      rgba(99, 102, 241, 0.7)
    ) border-box;
  background-size: auto, 220% 100%;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    0 14px 38px -16px rgba(6, 9, 22, 0.9),
    0 22px 60px -30px rgba(99, 102, 241, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: tpkHeaderGlow 9s ease-in-out infinite;
}
/* Soft aura that radiates from the floating bar to tie it to the hero glow. */
.tpk-header::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(99, 102, 241, 0.5), rgba(34, 211, 238, 0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.tpk-header:hover::before { opacity: 0.6; }

@keyframes tpkHeaderGlow {
  0%, 100% { background-position: 0 0, 0% 50%; }
  50% { background-position: 0 0, 100% 50%; }
}

.tpk-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  /* The wordmark PNG carries an upward arrow swoosh at the top, which drops the
     text's optical center below the geometric middle. Lift it a few pixels so
     the lettering lines up with the nav text. */
  transform: translateY(-4px);
  /* The wordmark asset has a bright neon glow baked in. We want this to be fully vibrant by default. */
  filter: brightness(1.12) drop-shadow(0 0 10px rgba(99, 102, 241, 0.55));
  transition: filter 0.25s ease, transform 0.25s ease;
}
.tpk-brand:hover {
  filter: brightness(1.25) drop-shadow(0 0 16px rgba(34, 211, 238, 0.7));
  transform: translateY(-5px);
}
.tpk-brand-full { height: 34px; width: auto; display: block; }
.tpk-brand-mark { height: 34px; width: auto; display: none; border-radius: 8px; }

.tpk-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-right: auto;
}
.tpk-nav-link {
  position: relative;
  font-size: 0.9rem;
  font-weight: 600;
  color: #d4dcec;
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  border-radius: 11px;
  transition: color 0.18s ease, background 0.18s ease;
}
.tpk-nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0.3rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--tpk-accent));
  transition: left 0.22s ease, right 0.22s ease;
}
.tpk-nav-link:hover,
.tpk-nav-link:focus-visible {
  color: var(--text);
  background: rgba(99, 102, 241, 0.12);
  outline: none;
}
.tpk-nav-link:hover::after,
.tpk-nav-link:focus-visible::after {
  left: 0.9rem;
  right: 0.9rem;
}
.tpk-nav-link.active {
  color: var(--text);
  background: rgba(99, 102, 241, 0.08);
}
.tpk-nav-link.active::after {
  left: 0.9rem;
  right: 0.9rem;
}

.tpk-nav-utility {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.tpk-account-email {
  font-size: 0.82rem;
  color: var(--muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tpk-cta { white-space: nowrap; }

/* Vibrant gradient CTA with a glow and a sheen that sweeps across on hover —
   matches the hero's indigo→cyan identity instead of the old flat indigo pill. */
.tpk-body .tpk-cta.btn-main {
  position: relative;
  overflow: hidden;
  border: none;
  background: linear-gradient(120deg, var(--primary), var(--tpk-accent));
  background-size: 180% 180%;
  background-position: 0% 50%;
  box-shadow:
    0 10px 24px -10px rgba(99, 102, 241, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.18s ease, box-shadow 0.22s ease, background-position 0.5s ease;
}
.tpk-body .tpk-cta.btn-main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.4) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.tpk-body .tpk-cta.btn-main:hover {
  background-position: 100% 50%;
  transform: translateY(-1px);
  box-shadow:
    0 14px 32px -10px rgba(34, 211, 238, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.tpk-body .tpk-cta.btn-main:hover::after { transform: translateX(130%); }
.tpk-body .tpk-cta.btn-main:active { transform: translateY(0); }

/* Usage pill sits in the nav as a soft glassy chip. */
.tpk-nav-utility .usage-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 30px;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(129, 140, 248, 0.48);
  color: var(--primary-light);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
}
.tpk-nav-utility .usage-pill-link {
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}
.tpk-nav-utility .usage-pill-link:hover {
  background: rgba(99, 102, 241, 0.3);
  border-color: rgba(165, 180, 252, 0.7);
}
.tpk-nav-utility .usage-pill-link:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 3px;
}
.tpk-nav-utility .usage-pill-icon {
  flex: 0 0 auto;
  opacity: 0.9;
}
.tpk-nav-utility .usage-pill-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.tpk-nav-utility .usage-pill-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* The "Create" nav CTA is redundant wherever the page already owns a create entry
   point: the wizard (studio pages restart at step 1, reading like a confirm action),
   My Graphics, and the landing page (its own hero CTA). Hide it on all three. */
body.studio-page .tpk-nav-create,
body.studio-page .tpk-mobile-create,
body.tpk-library-page .tpk-nav-create,
body.tpk-library-page .tpk-mobile-create,
body.tpk-landing .tpk-nav-create,
body.tpk-landing .tpk-mobile-create { display: none; }

.tpk-mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: rgba(99, 102, 241, 0.1);
  color: var(--text);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.tpk-mobile-menu-btn:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.45);
}
.tpk-mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.5rem auto 0;
  width: calc(100% - 2.5rem);
  padding: 0.75rem;
  position: sticky;
  top: 4.6rem;
  z-index: 39;
  border-radius: 16px;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(4, 6, 12, 0.96), rgba(2, 4, 9, 0.96)) padding-box,
    linear-gradient(120deg, rgba(99, 102, 241, 0.5), rgba(34, 211, 238, 0.4)) border-box;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 18px 40px -18px rgba(6, 9, 22, 0.9);
}
.tpk-mobile-menu.hidden { display: none; }
/* The menu is a phone-only affordance; the hamburger only shows ≤820px, but guard
   wider widths so a resize from mobile can't leave an orphaned open panel. */
@media (min-width: 821px) {
  .tpk-mobile-menu { display: none; }
}
.tpk-mobile-link {
  display: block;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.16s ease, background 0.16s ease;
}
.tpk-mobile-link:hover {
  color: var(--text);
  background: rgba(99, 102, 241, 0.12);
}
.tpk-mobile-login-link {
  margin-top: 0.6rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  text-align: center;
  font-size: 0.9rem;
  color: rgba(203, 213, 225, 0.82);
}
.tpk-mobile-login-link:hover {
  color: var(--text);
}
.tpk-mobile-cta {
  display: flex;
  margin-top: 0.75rem;
  padding: 0.75rem 1.5rem;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(120deg, var(--primary), var(--tpk-accent));
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 20px -8px rgba(99, 102, 241, 0.85);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tpk-mobile-cta:active {
  transform: scale(0.98);
  box-shadow: 0 4px 10px -4px rgba(99, 102, 241, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .tpk-header { animation: none; }
  .tpk-body .tpk-cta.btn-main,
  .tpk-body .tpk-cta.btn-main::after,
  .tpk-nav-link,
  .tpk-nav-link::after,
  .tpk-brand { transition: none; }
}

.tpk-main { padding: 0.75rem 1.25rem 1.5rem; }
body.tpk-body .app-shell { padding-top: 1.15rem; }
body.tpk-landing .tpk-main { padding-top: 0.35rem; }

.tpk-footer {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  padding: 2.5rem 1.25rem 2rem;
  margin-top: 3rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
}
.tpk-footer-col { display: flex; flex-direction: column; gap: 0.6rem; }
.tpk-footer-col h4 {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
}
.tpk-footer-col a { color: var(--muted); text-decoration: none; transition: color 0.15s ease; }
.tpk-footer-col a:hover { color: var(--text); }
.tpk-footer-copy { margin-top: 1rem; font-size: 0.78rem; opacity: 0.85; }
.tpk-footer-about p { margin: 0; max-width: 320px; line-height: 1.5; }
.tpk-footer-logo {
  display: block;
  width: min(100%, 210px);
  height: auto;
  max-height: 48px;
  object-fit: contain;
  object-position: left center;
  opacity: 1;
  filter: brightness(1.12) drop-shadow(0 0 10px rgba(99, 102, 241, 0.55));
  margin-bottom: 0.25rem;
}
.tpk-trust {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.75rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.tpk-trust span { display: inline-flex; align-items: center; gap: 0.4rem; }

@media (max-width: 720px) {
  /* Trim the large empty band above the footer: on the wizard, .tpk-main already
     reserves padding-bottom for the fixed actions bar, so the footer's own 3rem
     margin-top + 2.5rem padding-top stacks into dead space. */
  .tpk-footer {
    grid-template-columns: 1fr 1fr;
    margin-top: 1rem;
    padding-top: 1.5rem;
  }
  .tpk-footer-about { grid-column: 1 / -1; }
}

/* Landing page */
.tpk-hero {
  text-align: center;
  padding: 0.9rem 1rem 2.5rem;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tpk-hero .tpk-pill { margin-bottom: 1.5rem; }
.tpk-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 1.25rem;
}
.tpk-hero p {
  font-size: 1.1rem;
  color: var(--muted);
  margin: 0 auto 2rem;
  max-width: 560px;
}
.tpk-hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.tpk-section {
  width: 100%;
  padding: 3rem 1rem;
  max-width: 960px;
  margin: 0 auto;
  border-top: 1px solid var(--border-subtle);
  /* In-page anchor jumps (#styles/#how-it-works/#reviews) must clear the sticky
     .tpk-header (top: 0.85rem + ~3.5rem tall) so section headings aren't tucked
     under the floating nav. */
  scroll-margin-top: 5.25rem;
}
.tpk-hero + .tpk-section {
  padding-top: 2rem;
}
.tpk-section h2 { font-size: 1.6rem; margin: 0 0 0.5rem; }
.tpk-section > p { color: var(--muted); margin: 0 0 1.5rem; }
.tpk-how-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
  margin-top: 2rem;
}
.tpk-how-copy {
  display: grid;
  gap: 1.1rem;
}
.tpk-how-step {
  display: grid;
  gap: 0.45rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border);
}
.tpk-how-step h3 {
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 1.85rem);
  line-height: 1.08;
}
.tpk-how-step p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 1rem;
}
.tpk-how-step-featured {
  padding: 1.25rem 0 0 1rem;
  border-left-color: rgba(99, 102, 241, 0.6);
}
.tpk-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 2rem;
  padding: 0 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(99, 102, 241, 0.45);
  background: rgba(99, 102, 241, 0.16);
  color: #a5b4fc;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.tpk-format-list {
  display: grid;
  gap: 0.55rem;
  padding: 0;
  margin: 0.6rem 0 0;
  list-style: none;
}
.tpk-format-list li {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: baseline;
  color: var(--muted);
  line-height: 1.35;
}
.tpk-format-list li::before {
  content: "\2713";
  grid-column: 1;
  grid-row: 1;
  color: #34d399;
  font-weight: 800;
}
.tpk-format-list strong {
  grid-column: 1;
  grid-row: 1;
  margin-left: 1.35rem;
  color: var(--text);
}
.tpk-format-list span {
  grid-column: 2;
  grid-row: 1;
}
.tpk-format-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: end;
  min-width: 0;
}
.tpk-format-card {
  position: relative; /* Positioning context for the corner zoom button */
  --format-ratio: 9 / 16;
  --format-card-max: 11.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: end;
  justify-self: center;
  width: min(100%, var(--format-card-max));
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.82);
  box-shadow: 0 20px 44px rgba(2, 6, 23, 0.28);
}
.tpk-zoomable-card {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}
.tpk-zoomable-card:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 24px 48px rgba(99, 102, 241, 0.15), 0 20px 44px rgba(2, 6, 23, 0.35);
}
.tpk-format-frame {
  display: block;
  width: calc(100% - 1.3rem);
  margin: 0.65rem auto 0;
  aspect-ratio: var(--format-ratio);
  overflow: hidden;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(148, 163, 184, 0.28), rgba(71, 85, 105, 0.5)),
    radial-gradient(circle at 25% 18%, rgba(34, 211, 238, 0.24), transparent 40%);
}
.tpk-format-shape {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tpk-format-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  color: var(--muted);
  font-weight: 700;
}
.tpk-format-story { --format-ratio: 9 / 16; --format-card-max: 11.25rem; }
.tpk-format-post { --format-ratio: 3 / 4; --format-card-max: 12rem; }
.tpk-format-square { --format-ratio: 1 / 1; --format-card-max: 12rem; }
.tpk-soon { color: var(--muted); font-style: italic; }

/* Full-screen overlay while a generation request is in flight */
.tpk-generating-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(6, 8, 15, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  padding: 2rem;
  backdrop-filter: blur(4px);
}
.tpk-generating-overlay h3 { margin: 0.25rem 0 0; color: var(--text); }
.tpk-generating-overlay p { margin: 0; max-width: 420px; color: var(--muted); }
.tpk-generating-timer {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary);
  font-family: monospace;
  letter-spacing: 0.05em;
}

/* Collapsible field groups on the details step (keeps the form short) */
.tpk-collapse {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-dim);
  overflow: hidden;
}
.tpk-collapse + .tpk-collapse { margin-top: 0.25rem; }
.tpk-collapse > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  gap: 0.45rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.tpk-collapse > summary::-webkit-details-marker { display: none; }
.tpk-collapse > summary::before {
  content: "\25B8";
  transition: transform 0.15s ease;
  color: var(--primary);
}
.tpk-collapse[open] > summary { color: var(--text); border-bottom: 1px solid var(--border); }
.tpk-collapse[open] > summary::before { transform: rotate(90deg); }
.tpk-collapse-hint {
  margin-left: auto;
  color: var(--muted);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.tpk-collapse-body { display: flex; flex-direction: column; gap: 0.85rem; padding: 0.9rem; }

/* Admin-only render and prompt panels on the details step. Rendered only for admins
   (entitlements-gated), so consumers never see or pay layout cost for them. */
.tpk-admin-render-panel,
.tpk-admin-prompt-panel { display: flex; flex-direction: column; gap: 0.75rem; }
.tpk-admin-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--surface-dim);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  vertical-align: middle;
}
.tpk-prompt-preview-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tpk-prompt-preview-text {
  margin: 0;
  max-height: 320px;
  overflow: auto;            /* scroll internally — never push the page wider */
  white-space: pre-wrap;     /* wrap long prompt lines instead of overflowing horizontally */
  word-break: break-word;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
}
.tpk-prompt-override {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  /* Stack the preview action buttons and give them comfortable touch targets. */
  .tpk-prompt-preview-actions { flex-direction: column; }
  .tpk-prompt-preview-actions .btn-solid { width: 100%; min-height: 44px; }
  .tpk-prompt-preview-text { max-height: 240px; font-size: 0.74rem; }
  /* 16px input font on phones prevents iOS Safari from auto-zooming on focus. */
  .tpk-prompt-override { font-size: 16px; }
}

/* My Graphics — durable saved-runs library grid */
.tpk-library-shell .panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.tpk-library-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.tpk-library-loading {
  min-height: min(56vh, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  color: var(--muted);
  font-size: 0.86rem;
}
.tpk-library-loading[hidden] {
  display: none;
}
.tpk-library-loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(125, 211, 252, 0.2);
  border-top-color: var(--tpk-accent, #22d3ee);
  border-radius: 50%;
  animation: tpk-library-spin 0.75s linear infinite;
}
@keyframes tpk-library-spin {
  to { transform: rotate(360deg); }
}
.tpk-library-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 1.25rem;
}
.tpk-library-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.25rem;
}
.tpk-library-more[hidden] {
  display: none;
}
.tpk-library-more .btn-solid {
  min-width: 132px;
}
.tpk-library-more .btn-solid[hidden] {
  display: none;
}
.tpk-library-more-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.tpk-library-more-loading[hidden] {
  display: none;
}
.tpk-library-more-loading .tpk-library-loading-spinner {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}
.tpk-library-more-error {
  margin: 0;
  color: var(--error, #f87171);
  font-size: 0.78rem;
}
.tpk-library-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-dim);
  overflow: hidden;
}
/* Uniform thumb box for every aspect so the grid rows stay aligned; the graphic
   (story/post/square) is letterboxed inside via object-fit: contain. */
.tpk-library-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tpk-library-thumb.is-loading::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(125, 211, 252, 0.18);
  border-top-color: var(--tpk-accent, #22d3ee);
  border-radius: 50%;
  animation: tpk-library-spin 0.75s linear infinite;
}
.tpk-library-thumb.is-error::after {
  content: "Preview unavailable";
  padding: 0.75rem;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}
.tpk-library-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.tpk-library-thumb.is-loaded img {
  opacity: 1;
}
.tpk-library-thumb.is-error img {
  display: none;
}
.tpk-library-thumb img:hover {
  filter: brightness(1.08);
  transform: scale(1.02);
}
.tpk-library-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem 0.25rem;
}
.tpk-library-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.25;
}
.tpk-library-date { color: var(--muted); font-size: 0.75rem; }
.tpk-library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem 0.75rem;
  margin-top: auto;   /* pin actions to the bottom so equal-height cards align */
}
.tpk-library-actions .btn-solid {
  flex: 1 1 0;
  min-height: 38px;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
  font-size: 0.82rem;
}
body.tpk-library-page .tpk-library-actions .btn-main {
  color: #061523 !important;
  text-shadow: none;
}
@media (min-width: 769px) {
  body.tpk-library-page .tpk-library-actions {
    justify-content: flex-end;
  }
  body.tpk-library-page .tpk-library-actions .btn-solid {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0.42rem 0.68rem;
    font-size: 0.76rem;
    line-height: 1;
    min-width: 90px;
  }
}

.tpk-library-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background-color: rgba(127, 29, 29, 0.88);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M2.6 2.6 7.4 7.4M7.4 2.6 2.6 7.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 58%;
  color: #fff;
  cursor: pointer;
  font-size: 0;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.tpk-library-delete:hover {
  background-color: var(--error, #e5484d);
  border-color: rgba(255, 255, 255, 0.42);
  transform: scale(1.04);
}
.tpk-library-delete:focus-visible {
  display: flex;
  outline: 2px solid var(--tpk-accent, #22d3ee);
  outline-offset: 2px;
}
.tpk-library-thumb:hover .tpk-library-delete,
.tpk-library-thumb:focus-within .tpk-library-delete {
  display: flex;
}
@media (hover: none) {
  body.tpk-library-page .tpk-library-delete { display: flex; }
}

/* Neutral buttons in the durable-storage UIs sit on dark surface-dim cards/rows — give
   them a thin border (same pattern as the result panel) so they don't disappear. */
.tpk-library-actions .btn-solid.btn-neutral,
.tpk-prompt-preview-actions .btn-solid.btn-neutral,
.tpk-favorite-use.btn-neutral {
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.tpk-library-actions .btn-solid.btn-neutral:hover:not(:disabled),
.tpk-prompt-preview-actions .btn-solid.btn-neutral:hover:not(:disabled),
.tpk-favorite-use.btn-neutral:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
  body.tpk-library-page .tpk-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
}
@media (max-width: 640px) {
  body.tpk-library-page .tpk-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 0.85rem;
  }
  body.tpk-library-page .tpk-library-meta {
    gap: 0.1rem;
    padding: 0.35rem 0.5rem 0.15rem;
  }
  body.tpk-library-page .tpk-library-title {
    font-size: 0.78rem;
    line-height: 1.2;
  }
  body.tpk-library-page .tpk-library-date { font-size: 0.68rem; }
  body.tpk-library-page .tpk-library-actions {
    gap: 0.35rem;
    padding: 0.35rem 0.5rem 0.5rem;
  }
  body.tpk-library-page .tpk-library-actions .btn-solid {
    min-width: 0;
    min-height: 38px;
    padding: 0.35rem 0.4rem;
    font-size: 0.74rem;
    line-height: 1.1;
    white-space: nowrap;
  }
  body.tpk-library-page .tpk-library-actions .btn-main {
    font-size: 0;
  }
  body.tpk-library-page .tpk-library-actions .btn-main::after {
    content: attr(data-short) !important;
    position: static;
    inset: auto;
    display: inline;
    background: none;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.1;
    color: #061523;
    transform: none;
    transition: none;
  }
  body.tpk-library-page .tpk-library-delete {
    width: 26px;
    height: 26px;
    top: 5px;
    right: 5px;
  }
  body.tpk-library-page .tpk-library-delete::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 375px) {
  body.tpk-library-page .tpk-library-grid { gap: 0.45rem; }
  body.tpk-library-page .tpk-library-actions {
    gap: 0.3rem;
    padding-inline: 0.4rem;
  }
  body.tpk-library-page .tpk-library-actions .btn-solid {
    padding-inline: 0.32rem;
    font-size: 0.72rem;
  }
  body.tpk-library-page .tpk-library-actions .btn-main {
    font-size: 0;
  }
  body.tpk-library-page .tpk-library-actions .btn-main::after {
    font-size: 0.72rem;
  }
}

/* Favorite logos: assets-step quick-pick strip + the per-slot save star */
.tpk-favorites-strip {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-dim);
}
.tpk-favorites-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tpk-favorites-list {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;          /* horizontal scroll, never widen the page */
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
}
.tpk-favorite-tile {
  flex: 0 0 auto;
  width: 124px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
/* Thumbnail is the positioning context for the corner delete (×). */
.tpk-favorite-thumb {
  position: relative;
  width: 124px;
  height: 96px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tpk-favorite-thumb img { width: 100%; height: 100%; object-fit: contain; }
.tpk-favorite-assign {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  cursor: inherit;
}
.tpk-favorite-zoom {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: rgba(6, 8, 15, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.tpk-favorite-zoom:hover,
.tpk-favorite-zoom:focus-visible {
  background: rgba(6, 8, 15, 0.85);
  border-color: var(--primary);
  color: var(--primary);
  outline: none;
}
.tpk-favorite-zoom:active { transform: scale(0.9); }
.tpk-favorite-zoom svg { pointer-events: none; }
/* Small circular corner delete, mirroring the schedule designer's .logo-delete-btn:
   revealed on hover where a pointer exists, and always shown on touch (see media query). */
.tpk-favorite-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: none;
  z-index: 2;
  /* The X is drawn as a centered inline-SVG (thick, round-capped, geometrically centered) rather
     than the "×" glyph, which renders thin and sits optically low inside a circular button. The
     glyph in the markup is collapsed via font-size:0 and kept only for the accessible label. */
  background-color: rgba(245, 72, 110, 0.92);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M2.6 2.6 7.4 7.4M7.4 2.6 2.6 7.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 58%;
  font-size: 0;
  line-height: 0;
}
.tpk-favorite-thumb:hover .tpk-favorite-remove { display: flex; }
.tpk-favorite-remove:hover { background-color: var(--error, #e5484d); }
/* Touch devices have no hover, so the delete must stay visible there. */
@media (hover: none) {
  .tpk-favorite-remove { display: flex; }
}
/* Compact target buttons (Primary/Opponent/Photo/Event) below the thumbnail. Wraps to a
   second row when a recipe exposes three+ targets, so labels never truncate on the narrow tile. */
.tpk-favorite-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.tpk-favorite-use {
  flex: 1 1 auto;
  min-width: 3.1rem;
  padding: 0.3rem 0.15rem;
  font-size: 0.66rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-dim);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tpk-favorite-use:hover { background: var(--btn-neutral, rgba(255, 255, 255, 0.08)); border-color: rgba(255, 255, 255, 0.45); }

body.tpk-body.rivals-page .tpk-assets-tour-btn {
  display: none;
}

@media (min-width: 1024px) {
  body.tpk-body.rivals-page .rivals-panel-assets .rivals-assets-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.72rem;
  }

  body.tpk-body.rivals-page .rivals-panel-assets .rivals-assets-head-copy {
    flex: 0 0 auto;
    min-width: max-content;
  }

  body.tpk-body.rivals-page .rivals-panel-assets .rivals-assets-head h3 {
    margin: 0;
    color: rgba(203, 213, 225, 0.82);
    font-size: 0.78rem;
    font-weight: 900;
  }

  body.tpk-body.rivals-page .tpk-assets-toolbar {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
  }

  body.tpk-body.rivals-page .rivals-assets-head .rivals-team-picker-bar {
    min-width: 0;
    margin: 0;
    gap: 0.4rem;
  }

  body.tpk-body.rivals-page .tpk-assets-scope-label {
    margin-right: 0.12rem;
    color: rgba(148, 163, 184, 0.78);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  body.tpk-body.rivals-page .rivals-assets-head .rivals-team-state,
  body.tpk-body.rivals-page .rivals-assets-head .rivals-team-sport {
    width: 128px;
    min-height: 34px;
    padding: 0.38rem 1.8rem 0.38rem 0.62rem;
    border-color: rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    background-position: right 0.52rem center;
  }

  body.tpk-body.rivals-page .tpk-assets-scope-help {
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    border-color: rgba(148, 163, 184, 0.3);
    background: rgba(15, 23, 42, 0.74);
    font-size: 0.68rem;
  }

  body.tpk-body.rivals-page .tpk-assets-scope-help .tpk-help-popup {
    right: 0;
    left: auto;
    width: min(310px, 80vw);
  }

  body.tpk-body.rivals-page .tpk-assets-tour-btn {
    display: inline-flex;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 34px;
    padding: 0.38rem 0.68rem;
    border-color: rgba(148, 163, 184, 0.32);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  body.tpk-body.rivals-page .rivals-upload-slot:has(.rivals-team-search:not([hidden])) {
    margin-top: 3.15rem;
    overflow: visible;
  }

  body.tpk-body.rivals-page .rivals-upload-slot {
    min-height: 205px;
  }

  body.tpk-body.rivals-page .rivals-upload-slot.is-optional:not(.has-file) {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(6, 8, 15, 0.34);
  }

  body.tpk-body.rivals-page .rivals-upload-slot.is-optional:not(.has-file) .rivals-ref-state {
    background: rgba(148, 163, 184, 0.1);
    color: rgba(203, 213, 225, 0.72);
  }

  body.tpk-body.rivals-page .rivals-upload-slot.is-optional:not(.has-file) .tpk-mobile-logo-choose {
    border-color: rgba(148, 163, 184, 0.38);
    background: rgba(30, 41, 59, 0.78);
    color: #cbd5e1;
    box-shadow: none;
  }

  body.tpk-body.rivals-page .rivals-upload-slot.is-favorite-target {
    border-color: rgba(56, 189, 248, 0.88);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.16);
  }

  body.tpk-body.rivals-page .rivals-upload-slot.has-file .rivals-slot-img {
    bottom: 58px;
    width: 100%;
    height: calc(100% - 58px);
    padding: 0.7rem;
  }

  body.tpk-body.rivals-page .rivals-upload-slot.has-file:not(.is-uploading)::after {
    background: linear-gradient(
      to bottom,
      rgba(6, 8, 15, 0.02) 0%,
      rgba(6, 8, 15, 0.08) 58%,
      rgba(6, 8, 15, 0.92) 76%
    );
  }

  body.tpk-body.rivals-page .rivals-upload-slot:has(.rivals-team-search:not([hidden])) .rivals-team-search {
    top: -3.15rem;
    left: 0;
    right: auto;
    width: min(100%, 320px);
    z-index: 12;
    overflow: visible;
  }

  body.tpk-body.rivals-page .rivals-upload-slot .rivals-team-search-input {
    min-height: 40px;
    padding: 0.5rem 0.72rem;
    border-color: rgba(148, 163, 184, 0.34);
    border-radius: 8px;
    background: rgba(8, 13, 24, 0.96);
    color: var(--text);
    font-size: 0.88rem;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.24);
  }

  body.tpk-body.rivals-page .rivals-upload-slot .rivals-team-search-input:focus {
    border-color: rgba(var(--primary-rgb), 0.78);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.16), 0 10px 24px rgba(2, 6, 23, 0.3);
  }

  body.tpk-body.rivals-page .rivals-upload-slot .rivals-team-search-results {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    max-height: 240px;
  }

  body.tpk-body.rivals-page .tpk-favorites-strip {
    margin: 0.95rem 0 0;
    padding: 0.78rem;
    border-color: rgba(96, 165, 250, 0.22);
    border-radius: 8px;
    background: rgba(6, 8, 15, 0.4);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      inset 0 0 0 1px rgba(15, 23, 42, 0.42);
  }

  body.tpk-body.rivals-page .tpk-favorites-header {
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.58rem;
  }

  body.tpk-body.rivals-page .tpk-favorites-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }

  body.tpk-body.rivals-page .tpk-favorites-destination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  body.tpk-body.rivals-page .tpk-favorites-destination select {
    min-width: 190px;
    min-height: 34px;
    padding: 0.35rem 2rem 0.35rem 0.65rem;
    border: 1px solid rgba(56, 189, 248, 0.48);
    border-radius: 8px;
    background-color: rgba(8, 13, 24, 0.96);
    color: #dbeafe;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: none;
  }

  body.tpk-body.rivals-page .tpk-favorites-hint {
    margin: -0.18rem 0 0.58rem;
    color: rgba(148, 163, 184, 0.82);
    font-size: 0.74rem;
    line-height: 1.3;
  }

  body.tpk-body.rivals-page .tpk-favorites-carousel {
    position: relative;
    min-width: 0;
  }

  body.tpk-body.rivals-page .tpk-favorites-list {
    gap: 0.72rem;
    padding: 0 0.1rem 0.32rem;
    scroll-behavior: smooth;
    scrollbar-width: thin;
  }

  body.tpk-body.rivals-page .tpk-favorites-list:empty {
    display: none;
  }

  body.tpk-body.rivals-page .tpk-favorites-carousel.has-overflow .tpk-favorites-list {
    padding-right: 2.35rem;
    padding-left: 2.35rem;
  }

  body.tpk-body.rivals-page .tpk-favorites-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    margin: 0;
    border: 1px dashed rgba(148, 163, 184, 0.28);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.24);
    color: rgba(203, 213, 225, 0.78);
    font-size: 0.84rem;
    font-weight: 800;
    text-align: center;
  }

  body.tpk-body.rivals-page .tpk-favorites-empty[hidden] {
    display: none;
  }

  body.tpk-body.rivals-page .tpk-favorites-nav {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 42px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 8px;
    background: rgba(8, 13, 24, 0.9);
    color: var(--text);
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.34);
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
  }

  body.tpk-body.rivals-page .tpk-favorites-nav-left {
    left: 0.2rem;
  }

  body.tpk-body.rivals-page .tpk-favorites-nav-right {
    right: 0.2rem;
  }

  body.tpk-body.rivals-page .tpk-favorites-nav:hover,
  body.tpk-body.rivals-page .tpk-favorites-nav:focus-visible {
    border-color: rgba(var(--primary-rgb), 0.72);
    background: rgba(14, 45, 72, 0.94);
    color: var(--primary-light, #93c5fd);
    outline: none;
  }

  body.tpk-body.rivals-page .tpk-favorites-nav:active {
    transform: translateY(-50%) scale(0.96);
  }

  body.tpk-body.rivals-page .tpk-favorites-nav[hidden] {
    display: none;
  }

  body.tpk-body.rivals-page .tpk-favorite-tile {
    width: 132px;
    gap: 0.45rem;
  }

  body.tpk-body.rivals-page .tpk-favorite-thumb {
    width: 132px;
    height: 96px;
    border-color: rgba(148, 163, 184, 0.32);
    background: rgba(2, 6, 23, 0.74);
  }

  body.tpk-body.rivals-page .tpk-favorite-thumb.is-assignable {
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
  }

  body.tpk-body.rivals-page .tpk-favorite-thumb.is-assignable:hover,
  body.tpk-body.rivals-page .tpk-favorite-thumb.is-assignable:has(.tpk-favorite-assign:focus-visible) {
    border-color: rgba(56, 189, 248, 0.78);
    background: rgba(14, 45, 72, 0.58);
    outline: none;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 0 0 2px rgba(56, 189, 248, 0.16);
  }

  body.tpk-body.rivals-page .tpk-favorite-assign:focus-visible {
    outline: none;
  }

  body.tpk-body.rivals-page .tpk-favorites-strip[aria-busy="true"] .tpk-favorite-thumb {
    cursor: progress;
    opacity: 0.65;
  }

  body.tpk-body.rivals-page .tpk-tour-target {
    outline: 2px solid rgba(255, 122, 0, 0.9);
    outline-offset: 4px;
    border-radius: 8px;
    box-shadow: 0 0 0 6px rgba(255, 122, 0, 0.16);
  }

  body.tpk-body.rivals-page .tpk-tour-popover {
    position: fixed;
    z-index: 120;
    width: min(292px, calc(100vw - 24px));
    padding: 0.78rem;
    border: 1px solid rgba(255, 122, 0, 0.45);
    border-radius: 8px;
    background: rgba(8, 13, 24, 0.96);
    color: var(--text);
    box-shadow: 0 22px 48px rgba(2, 6, 23, 0.52);
    backdrop-filter: blur(12px) saturate(135%);
  }

  body.tpk-body.rivals-page .tpk-tour-popover h4 {
    margin: 0 0 0.28rem;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ff7a00;
  }

  body.tpk-body.rivals-page .tpk-tour-popover p {
    margin: 0;
    color: rgba(203, 213, 225, 0.84);
    font-size: 0.86rem;
    line-height: 1.35;
  }

  body.tpk-body.rivals-page .tpk-tour-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    margin-top: 0.72rem;
  }

  body.tpk-body.rivals-page .tpk-tour-count {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
  }

  body.tpk-body.rivals-page .tpk-tour-controls {
    display: inline-flex;
    gap: 0.38rem;
  }

  body.tpk-body.rivals-page .tpk-tour-btn {
    appearance: none;
    -webkit-appearance: none;
    min-height: 30px;
    padding: 0.34rem 0.58rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.92);
    color: var(--text);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
  }

  body.tpk-body.rivals-page .tpk-tour-btn:hover,
  body.tpk-body.rivals-page .tpk-tour-btn:focus-visible {
    border-color: rgba(255, 122, 0, 0.72);
    outline: none;
  }

  body.tpk-body.rivals-page .tpk-tour-btn-primary {
    border-color: rgba(255, 122, 0, 0.8);
    background: #ff7a00;
    color: #071827;
  }
  body.tpk-body.rivals-page .tpk-tour-btn-primary:hover {
    background: #e66e00;
    border-color: #e66e00;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  body.tpk-body.rivals-page .rivals-panel-assets .rivals-assets-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.72rem;
  }

  body.tpk-body.rivals-page .tpk-assets-toolbar,
  body.tpk-body.rivals-page .rivals-assets-head .rivals-team-picker-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  body.tpk-body.rivals-page .tpk-assets-toolbar {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  body.tpk-body.rivals-page .rivals-assets-head .rivals-team-picker-bar {
    margin: 0;
  }

  body.tpk-body.rivals-page .tpk-assets-scope-label {
    display: none;
  }

  body.tpk-body.rivals-page .rivals-assets-head .rivals-team-state,
  body.tpk-body.rivals-page .rivals-assets-head .rivals-team-sport {
    width: 118px;
    min-height: 38px;
    padding: 0.42rem 1.75rem 0.42rem 0.58rem;
    font-size: 0.78rem;
  }

  body.tpk-body.rivals-page .tpk-assets-scope-help {
    flex: 0 0 auto;
  }

  body.tpk-body.rivals-page .tpk-assets-tour-btn {
    display: inline-flex;
    min-height: 38px;
    padding: 0.4rem 0.62rem;
  }

  body.tpk-body.rivals-page .tpk-favorites-header {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  body.tpk-body.rivals-page .tpk-favorites-heading,
  body.tpk-body.rivals-page .tpk-favorites-destination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  body.tpk-body.rivals-page .tpk-favorites-destination {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  body.tpk-body.rivals-page .tpk-favorites-destination select {
    min-height: 36px;
    padding: 0.35rem 0.55rem;
    border: 1px solid rgba(56, 189, 248, 0.48);
    border-radius: 8px;
    background: rgba(8, 13, 24, 0.96);
    color: #dbeafe;
  }

  body.tpk-body.rivals-page .tpk-favorites-hint {
    margin: 0 0 0.58rem;
    color: var(--muted);
    font-size: 0.74rem;
  }
}

.tpk-slot-preview-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(6, 8, 15, 0.72);
  color: #fff;
  cursor: zoom-in;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

/* Expand the clickable touch target to ~48px without changing the visual size,
   so the 28px preview button clears the 44px mobile tap-target guideline. */
.tpk-slot-preview-btn::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
}

.tpk-slot-preview-btn:hover,
.tpk-slot-preview-btn:focus-visible {
  background: rgba(6, 8, 15, 0.88);
  border-color: var(--primary);
  color: var(--primary);
  outline: none;
}

.tpk-slot-preview-btn:active {
  transform: scale(0.92);
}

.tpk-slot-preview-btn svg {
  pointer-events: none;
}

.rivals-upload-slot.has-file .tpk-slot-preview-btn {
  display: inline-flex;
}

/* Guided asset chooser: the CTA is intentionally available on empty desktop and
   mobile slots. The sheet and mobile-only workflow chrome remain hidden on desktop. */
.tpk-mobile-logo-workflow,
.tpk-asset-placeholder,
.tpk-bottom-sheet,
.tpk-bottom-sheet-backdrop {
  display: none;
}

/* This selector must outrank later shared .btn-solid rules in the TPK stylesheet
   stack. Once an asset is bound, the whole slot remains clickable without covering
   the preview with a redundant Choose button. */
body.tpk-body .tpk-mobile-logo-choose {
  display: inline-flex;
}

body.tpk-body .rivals-upload-slot.has-file .tpk-mobile-logo-choose {
  display: none;
}

.tpk-required-assets {
  display: contents;
}

.tpk-bottom-sheet[aria-hidden="true"] {
  pointer-events: none;
}

@media (max-width: 640px) {
  body.tpk-body .rivals-panel-assets {
    padding: 0.85rem;
  }

  body.tpk-body .rivals-panel-assets .rivals-assets-head,
  body.tpk-body .rivals-team-picker-hint {
    display: none;
  }

  body.tpk-body .tpk-mobile-logo-workflow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.6rem 0.7rem;
    margin-bottom: 0.7rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    background: rgba(6, 8, 15, 0.42);
  }

  body.tpk-body .tpk-mobile-logo-workflow > div:first-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  body.tpk-body .tpk-mobile-workflow-kicker {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  body.tpk-body .tpk-mobile-team-scope {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
  }

  body.tpk-body #tpk-mobile-team-scope-label {
    max-width: 10rem;
    color: var(--primary-light, #93c5fd);
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.tpk-body #tpk-mobile-scope-change {
    min-width: 0;
    min-height: 40px;
    padding: 0.5rem 0.85rem;
    font-size: 0.82rem;
  }

  body.tpk-body .rivals-panel-assets > .rivals-team-picker-bar {
    display: none;
  }

  body.tpk-body .tpk-guided-assets-grid {
    display: block;
  }

  body.tpk-body .tpk-required-assets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  body.tpk-body .rivals-upload-slot {
    aspect-ratio: auto;
    min-height: 190px;
    padding: 0.7rem;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    overflow: hidden;
  }

  body.tpk-body .rivals-upload-slot.tpk-guided-logo-slot {
    min-height: 190px;
    padding: 0.75rem 0.65rem 3.1rem;
    align-items: center;
    text-align: center;
  }

  body.tpk-body .rivals-upload-slot.tpk-guided-logo-slot .rivals-team-search {
    display: none;
  }

  body.tpk-body .rivals-upload-slot > span,
  body.tpk-body .rivals-upload-slot > small {
    text-align: center;
  }

  body.tpk-body .rivals-upload-slot.tpk-guided-logo-slot > span,
  body.tpk-body .rivals-upload-slot.tpk-guided-logo-slot > small {
    text-align: center;
  }

  body.tpk-body .rivals-upload-slot .rivals-ref-state {
    order: -1;
  }

  body.tpk-body .tpk-mobile-logo-choose {
    display: inline-flex;
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 0.65rem;
    transform: translateX(-50%);
    z-index: 4;
    min-width: min(8.5rem, calc(100% - 1.3rem));
    min-height: 32px;
    padding: 0.3rem 0.65rem;
    font-size: 0.74rem;
    justify-content: center;
  }

  /* Shared button hover/active rules also set transform. Replacing this
     button's translateX(-50%) would leave left:50% in place and visibly shove
     the CTA right by half its width on touch devices. */
  body.tpk-body .tpk-mobile-logo-choose:hover,
  body.tpk-body .tpk-mobile-logo-choose:active {
    transform: translateX(-50%);
  }

  body.tpk-body .rivals-upload-slot.tpk-guided-logo-slot > small {
    max-width: 100%;
  }

  body.tpk-body .rivals-upload-slot.tpk-guided-logo-slot.has-file > small {
    max-width: 100%;
  }

  body.tpk-body .rivals-upload-slot.tpk-guided-logo-slot.has-file .tpk-mobile-logo-choose {
    display: none;
  }

  body.tpk-body .rivals-upload-slot.tpk-guided-logo-slot.has-file {
    padding-bottom: 0.75rem;
  }

  body.tpk-body .rivals-upload-slot.tpk-guided-logo-slot .rivals-slot-img {
    top: 2.35rem;
    right: 0.45rem;
    bottom: 3.6rem;
    left: 0.45rem;
    width: calc(100% - 0.9rem);
    height: calc(100% - 5.95rem);
    padding: 0;
    object-fit: contain;
  }

  body.tpk-body .rivals-upload-slot:not(.tpk-guided-logo-slot) .rivals-slot-img {
    top: 2.35rem;
    right: 0.55rem;
    bottom: 3.6rem;
    left: 0.55rem;
    width: calc(100% - 1.1rem);
    height: calc(100% - 5.95rem);
    padding: 0;
    object-fit: contain;
  }

  body.tpk-body .rivals-upload-slot.tpk-guided-logo-slot.has-file:not(.is-uploading)::after {
    background: linear-gradient(rgba(6, 8, 15, 0.03), rgba(6, 8, 15, 0.82));
  }

  body.tpk-body .tpk-asset-placeholder {
    display: flex;
    min-height: 190px;
    padding: 0.7rem;
    border: 1px dashed rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.28);
    color: rgba(148, 163, 184, 0.58);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.35rem;
    text-align: center;
  }

  body.tpk-body .tpk-asset-placeholder em {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: var(--radius-pill);
    background: rgba(148, 163, 184, 0.08);
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  body.tpk-body .tpk-asset-placeholder span {
    font-size: 0.78rem;
    font-weight: 800;
  }

  body.tpk-body .tpk-favorites-strip {
    display: none !important;
  }

  body.tpk-body .tpk-bottom-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: block;
    background: rgba(2, 6, 23, 0.58);
    backdrop-filter: blur(6px);
  }

  body.tpk-body .tpk-bottom-sheet-backdrop[hidden] {
    display: none;
  }

  body.tpk-body .tpk-bottom-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 91;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 60vh;
    max-height: 640px;
    padding: 0.45rem 0.9rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: rgba(8, 13, 24, 0.98);
    box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.48);
    transform: translateY(110%);
    transition: transform 0.2s ease;
  }

  body.tpk-body .tpk-bottom-sheet.is-open {
    transform: translateY(0);
  }

  body.tpk-body .tpk-bottom-sheet-handle {
    align-self: center;
    width: 44px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: rgba(148, 163, 184, 0.38);
  }

  body.tpk-body .tpk-bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  body.tpk-body .tpk-bottom-sheet-header h3 {
    margin: 0.15rem 0 0;
    font-size: 1rem;
    line-height: 1.15;
  }

  body.tpk-body .tpk-bottom-sheet-close {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: var(--radius-pill);
    background: rgba(15, 23, 42, 0.84);
    color: var(--text);
    font-size: 0;
    cursor: pointer;
  }

  body.tpk-body .tpk-bottom-sheet-close::before,
  body.tpk-body .tpk-bottom-sheet-close::after {
    content: "";
    position: absolute;
  }

  body.tpk-body .tpk-bottom-sheet-close {
    position: relative;
  }

  body.tpk-body .tpk-bottom-sheet-close::before,
  body.tpk-body .tpk-bottom-sheet-close::after {
    top: 18px;
    left: 11px;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  body.tpk-body .tpk-bottom-sheet-close::before { transform: rotate(45deg); }
  body.tpk-body .tpk-bottom-sheet-close::after { transform: rotate(-45deg); }

  body.tpk-body .tpk-sheet-tabs {
    display: grid;
    /* Auto columns so the row stays gap-free when the Search tab is hidden on
       non-team-logo slots (favorites + upload only). */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.25rem;
    padding: 0.25rem;
  }

  body.tpk-body .tpk-sheet-tab[hidden] {
    display: none;
  }

  body.tpk-body .tpk-sheet-tab {
    min-width: 0;
    min-height: 38px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
  }

  body.tpk-body .tpk-sheet-tab.is-active {
    background: var(--primary);
    color: #061523;
  }

  body.tpk-body .tpk-sheet-pane {
    display: none;
    min-height: 170px;
    overscroll-behavior: contain;
  }

  body.tpk-body .tpk-sheet-pane.is-active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  body.tpk-body .tpk-mobile-favorites-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    /* Small inset so the grid breathes inside the scrollable pane. */
    padding: 0.35rem 0.35rem 0.15rem;
  }

  body.tpk-body .tpk-mobile-favorite-cell {
    position: relative;
    min-width: 0;
  }

  body.tpk-body .tpk-mobile-favorite-btn {
    width: 100%;
    min-width: 0;
    min-height: 86px;
    padding: 0.35rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.78);
    cursor: pointer;
  }

  body.tpk-body .tpk-mobile-favorite-del,
  body.tpk-body .tpk-mobile-favorite-zoom {
    position: absolute;
    top: 3px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 50%;
    background: rgba(8, 13, 24, 0.96);
    color: var(--text);
    line-height: 1;
    cursor: pointer;
  }

  body.tpk-body .tpk-mobile-favorite-del {
    right: 3px;
    /* Red, matching the slot clear (×) button for consistency. */
    border-color: rgba(220, 38, 38, 0.5);
    background: rgba(220, 38, 38, 0.92);
    color: #fff;
    font-size: 1rem;
  }

  body.tpk-body .tpk-mobile-favorite-zoom {
    left: 3px;
  }

  body.tpk-body .tpk-mobile-favorite-zoom svg {
    pointer-events: none;
  }

  body.tpk-body .tpk-mobile-favorite-btn img {
    width: 100%;
    height: 74px;
    object-fit: contain;
    display: block;
  }

  body.tpk-body .tpk-sheet-empty {
    margin: 0.75rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
  }

  body.tpk-body .tpk-sheet-search-input {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat left 0.85rem center / 1rem;
    color: var(--text);
    font: inherit;
    font-size: 16px;
    padding: 0.65rem 0.85rem 0.65rem 2.25rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  }

  body.tpk-body .tpk-sheet-search-input:focus {
    outline: none;
    background-color: rgba(15, 23, 42, 0.85);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    border-color: var(--tpk-accent);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.22);
  }

  body.tpk-body .tpk-sheet-scope select {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 0.85rem center / 0.9rem;
    color: var(--text);
    font: inherit;
    font-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0.65rem 2.25rem 0.65rem 0.85rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  }

  body.tpk-body .tpk-sheet-scope select:hover {
    background-color: rgba(30, 41, 59, 0.7);
    border-color: rgba(148, 163, 184, 0.45);
  }

  body.tpk-body .tpk-sheet-scope select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    outline: none;
    border-color: var(--tpk-accent);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.22);
  }

  body.tpk-body .tpk-sheet-scope select option {
    background: #0f172a;
    color: var(--text);
  }

  body.tpk-body .tpk-mobile-logo-results {
    position: static;
    flex: 1;
    min-height: 0;
    max-height: none;
    margin-top: 0.55rem;
  }

  body.tpk-body .tpk-sheet-upload-btn {
    width: 100%;
    min-height: 44px;
  }

  /* State + sport, side by side above the search box in the sheet's Search pane. */
  body.tpk-body .tpk-sheet-scope {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
  }

  body.tpk-body .tpk-sheet-scope label {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
  }

  body.tpk-body .tpk-sheet-scope label > span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-left: 0.2rem;
  }

  /* Team search option styling inside mobile bottom sheet */
  body.tpk-body .rivals-team-search-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    color: var(--text);
    font-size: 0.88rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  body.tpk-body .rivals-team-search-option:hover,
  body.tpk-body .rivals-team-search-option:focus,
  body.tpk-body .rivals-team-search-option.is-active {
    background: rgba(34, 211, 238, 0.12); /* transparent cyan glow */
    outline: none;
  }

  body.tpk-body .rivals-team-search-badge {
    font-style: normal;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-pill);
    background: rgba(34, 211, 238, 0.15); /* cyan background */
    color: var(--tpk-accent); /* cyan text */
    border: 1px solid rgba(34, 211, 238, 0.25);
  }

  body.tpk-body .rivals-team-search-results {
    background: rgba(6, 8, 15, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    padding: 0.35rem;
  }
}

/* Save-to-favorites star, mirrored opposite the slot's clear (×) button. */
.rivals-slot-fav-btn {
  position: absolute;
  /* Bottom-left: the top of a team-logo slot is occupied by the "Search school name…"
     input, so a top-aligned star would sit behind it. The bottom-left corner is clear. */
  bottom: 0.4rem;
  left: 0.4rem;
  /* Above the caption row (span/small at z-index 2): they come later in the DOM and span the
     slot's bottom, so at equal z-index they would paint over the star and swallow its click,
     letting the slot's tap-to-upload fire instead. Sit above them so the star is hit first. */
  z-index: 4;
  border: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  cursor: pointer;
  /* Save-to-favorites uses the conventional star, drawn as a crisp inline-SVG (the "★" glyph
     renders clunky and font-dependent). Outline = not yet saved; .is-saved swaps to a filled
     gold star. The markup glyph is collapsed via font-size:0 and kept for the accessible label. */
  background-color: rgba(0, 0, 0, 0.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd34d' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.402 8.168L12 18.896l-7.336 3.869 1.402-8.168L.132 9.21l8.2-1.192z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  font-size: 0;
  line-height: 0;
}
/* Expand the clickable touch target to ~44px without changing the visual size,
   so the ~27px star button clears the mobile tap-target guideline. */
.rivals-slot-fav-btn::after {
  content: "";
  position: absolute;
  top: -9px;
  left: -9px;
  right: -9px;
  bottom: -9px;
  border-radius: 50%;
}
.rivals-slot-fav-btn.is-saved {
  background-color: rgba(0, 0, 0, 0.62);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffc62e'%3E%3Cpath d='M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.402 8.168L12 18.896l-7.336 3.869 1.402-8.168L.132 9.21l8.2-1.192z'/%3E%3C/svg%3E");
}

@media (max-width: 640px) {
  /* Bigger tap targets on phones: wider tiles, taller target buttons, and a larger always-
     visible corner delete (hover-reveal is unavailable on touch). */
  .tpk-favorite-tile { width: 128px; }
  .tpk-favorite-thumb { width: 128px; height: 100px; }
  .tpk-favorite-use { min-height: 40px; font-size: 0.72rem; }
  .tpk-favorite-remove { width: 24px; height: 24px; }
  .rivals-slot-fav-btn { width: 2.1rem; height: 2.1rem; }
  /* On the guided logo slot the caption stack (label + "Selected: …") sits at the
     slot bottom, so the default bottom:0.4rem star lands on the text. Lift it above
     the caption into the logo's lower-left corner. */
  body.tpk-body .tpk-guided-logo-slot .rivals-slot-fav-btn { bottom: 3rem; }
}

/* "Use text" toggle chip injected onto optional fields */
/* Detected team-color indicator swatches */
.tpk-color-groups {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.tpk-color-team {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}
.tpk-color-team-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}
.tpk-color-swatches { display: flex; gap: 0.4rem; align-items: center; }
.tpk-color-swatch {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.tpk-color-slots {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0;
}
.tpk-color-slot {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.tpk-color-slot-label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 500;
}
.tpk-color-control-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tpk-color-picker {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  cursor: pointer;
  background: none;
  padding: 0;
}
.tpk-color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}
.tpk-color-picker::-webkit-color-swatch {
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.tpk-color-picker::-moz-color-swatch {
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* Compact aligned grid: column headers once, one row per team, swatches in tidy lanes. */
.tpk-color-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 0.45rem 0.85rem;
  width: max-content;
  margin-top: 0.35rem;
}
.tpk-color-grid .tpk-color-picker { justify-self: center; }
.tpk-color-grid .tpk-color-team-label { white-space: nowrap; }
.tpk-color-col-head {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  justify-self: center;
}

.tpk-resolution-field {
  min-width: 0;
}

/* =============================================================================
   Team Post Kit — landing / marketing sections
   ============================================================================= */

.tpk-section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.25rem;
}
.tpk-section-head h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 0.6rem; }
.tpk-section-head p { color: var(--muted); margin: 0; font-size: 1rem; }
.tpk-section-cta { display: flex; justify-content: center; margin-top: 2rem; }

/* Popular styles teaser grid */
.tpk-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.85rem;
}
.tpk-style-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  text-decoration: none;
}
.tpk-style-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.tpk-style-tile:hover { border-color: var(--primary); box-shadow: 0 0 24px rgba(99, 102, 241, 0.2); }
.tpk-style-tile:hover img { transform: scale(1.06); }
.tpk-style-tile-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 0.75rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}

/* Popular layouts gallery (the production concepts; styles are the skins applied on top) */
.tpk-layout-grid {
  display: grid;
  /* Fixed 5 columns so 10 tiles always fill two clean rows; collapses to 3 then 2. */
  grid-template-columns: repeat(5, 1fr);
  gap: 0.85rem;
}
@media (max-width: 900px) {
  .tpk-layout-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .tpk-layout-grid { grid-template-columns: repeat(2, 1fr); }
}
.tpk-layout-item {
  position: relative; /* positioning context for the corner zoom button + tier badge */
}
/* Tier badge reuses the recipe-picker .recipe-badge skin; let taps fall through to the link. */
.tpk-layout-item .recipe-badge { pointer-events: none; z-index: 2; }
.tpk-layout-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  text-decoration: none;
}
.tpk-layout-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.tpk-layout-item:hover .tpk-layout-tile {
  border-color: var(--primary);
  box-shadow: 0 0 24px rgba(99, 102, 241, 0.25);
}
.tpk-layout-item:hover .tpk-layout-tile img {
  transform: scale(1.05);
}
.tpk-layout-tile-label {
  display: block;
  margin-top: 0.6rem;
  text-align: center;
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #94a3b8; /* Softened slate-400 */
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}
.tpk-layout-item:hover .tpk-layout-tile-label,
.tpk-layout-tile-label:hover {
  color: #ffffff; /* Brightens on hover */
}
/* Corner expand pill -> opens the app's custom zoom lightbox (window.openImageZoom).
   Styled here because the recipe picker's .recipe-card-preview-pill lives in a
   workstation bundle that public pages don't load. */
.tpk-layout-zoom {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff;
  background: rgba(15, 18, 28, 0.6);
  backdrop-filter: blur(4px);
  cursor: pointer;
  /* Always visible (not hover-gated) so the lightbox affordance reads immediately. */
  transition: background 0.2s ease, transform 0.2s ease;
}
.tpk-layout-zoom:hover { background: rgba(15, 18, 28, 0.85); transform: scale(1.08); }

/* Styles accent strip beneath the layouts gallery: one scrollable row. */
.tpk-style-strip-wrap { margin-top: 2.75rem; text-align: center; }
.tpk-style-strip-wrap .tpk-pill { margin-bottom: 0.9rem; }
.tpk-style-strip {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
}
.tpk-style-strip::-webkit-scrollbar { display: none; }
.tpk-style-strip-item {
  position: relative; /* Positioning context for the corner zoom button */
  flex: 0 0 auto;
  width: clamp(96px, 24vw, 132px);
  display: flex;
  flex-direction: column;
}
.tpk-style-strip-tile {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  text-decoration: none;
}
.tpk-style-strip-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.tpk-style-strip-item:hover .tpk-style-strip-tile { border-color: var(--primary); }
.tpk-style-strip-item:hover .tpk-style-strip-tile img { transform: scale(1.06); }
.tpk-style-strip-label {
  display: block;
  margin-top: 0.55rem;
  text-align: center;
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
  font-size: 0.78rem; /* Slightly smaller to fit compact thumbnails */
  font-weight: 600;
  color: #94a3b8; /* Softened slate-400 */
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}
.tpk-style-strip-item:hover .tpk-style-strip-label,
.tpk-style-strip-label:hover {
  color: #ffffff; /* Brightens on hover */
}
.tpk-style-strip-wrap .tpk-section-cta { margin-top: 1.5rem; }

/* Premium colorful main CTA button with athletic sky-to-emerald gradient */
.btn-main-cool {
  background: linear-gradient(135deg, #0ea5e9 0%, #10b981 100%) !important;
  border: none !important;
  color: #ffffff !important; /* High-contrast white */
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25), 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-main-cool:hover {
  background: linear-gradient(135deg, #0284c7 0%, #059669 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.45), 0 6px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}
.btn-main-cool .cta-arrow {
  display: inline-block;
  margin-left: 0.35rem;
  transition: transform 0.2s ease;
}
.btn-main-cool:hover .cta-arrow {
  transform: translateX(3px);
}

/* Premium colorful CTA button with purple-to-pink gradient and white text */
.btn-neutral-cool {
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%) !important;
  border: none !important;
  color: #ffffff !important; /* High-contrast white */
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.25), 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-neutral-cool:hover {
  background: linear-gradient(135deg, #8b5cf6 0%, #db2777 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 0 24px rgba(236, 72, 153, 0.45), 0 6px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}
.btn-neutral-cool .cta-arrow {
  display: inline-block;
  margin-left: 0.35rem;
  transition: transform 0.2s ease;
}
.btn-neutral-cool:hover .cta-arrow {
  transform: translateX(3px);
}

/* Reviews */
.tpk-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.tpk-review-card {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.tpk-stars { color: #fbbf24; letter-spacing: 0.1em; font-size: 0.95rem; }
.tpk-review-card blockquote { margin: 0; line-height: 1.55; color: var(--text); }
.tpk-review-card figcaption {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: auto;
}
.tpk-review-card figcaption span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.tpk-review-card figcaption strong { font-size: 0.9rem; }
.tpk-review-card figcaption small { color: var(--muted); font-size: 0.78rem; }
.tpk-review-avatar {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--tpk-accent));
}

/* FAQ accordion (native <details>) */
.tpk-faq {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-sizing: border-box;
  text-align: left;
}

details.tpk-faq-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

details.tpk-faq-item:hover {
  border-color: rgba(var(--primary-rgb), 0.25);
  background: var(--surface);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

details.tpk-faq-item[open] {
  border-color: rgba(var(--primary-rgb), 0.4);
  background: var(--surface);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

details.tpk-faq-item > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
  user-select: none;
}

details.tpk-faq-item > summary::-webkit-details-marker { display: none; }

details.tpk-faq-item > summary::after {
  content: "+";
  color: var(--primary);
  font-size: 1.3rem;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.08);
  line-height: 1;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

details.tpk-faq-item[open] > summary::after {
  content: "\2212";
  transform: rotate(180deg);
  background: rgba(var(--primary-rgb), 0.15);
}

details.tpk-faq-item > p,
details.tpk-faq-item .tpk-faq-content {
  margin: 0;
  padding: 0 1.5rem 1.35rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

details.tpk-faq-item .tpk-faq-content p {
  margin: 0 0 0.85rem;
}

details.tpk-faq-item .tpk-faq-content p:last-child {
  margin-bottom: 0;
}

details.tpk-faq-item .tpk-faq-content ul {
  margin: 0 0 1.1rem;
  padding-left: 1.25rem;
  list-style-type: none;
}

details.tpk-faq-item .tpk-faq-content li {
  position: relative;
  margin-bottom: 0.65rem;
  color: var(--muted);
  line-height: 1.55;
}

details.tpk-faq-item .tpk-faq-content li:last-child {
  margin-bottom: 0;
}

details.tpk-faq-item .tpk-faq-content li::before {
  content: "✦";
  position: absolute;
  left: -1.25rem;
  top: 0.05rem;
  color: var(--primary);
  font-size: 0.72rem;
}

details.tpk-faq-item .tpk-faq-content strong {
  color: var(--text);
  font-weight: 600;
}

/* Final call-to-action band */
.tpk-cta-band {
  text-align: center;
  margin: 3rem auto 0;
  padding: 3.5rem 1.5rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(99, 102, 241, 0.35);
  background:
    radial-gradient(circle at 30% 0%, rgba(99, 102, 241, 0.28), transparent 60%),
    radial-gradient(circle at 80% 100%, rgba(34, 211, 238, 0.18), transparent 55%),
    var(--panel);
}
.tpk-cta-band h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0 0 0.6rem; }
.tpk-cta-band p { color: var(--muted); margin: 0 0 1.75rem; }

/* Contact form */
.tpk-contact-form {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.tpk-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.tpk-form-group { display: flex; flex-direction: column; gap: 0.45rem; }
.tpk-form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
.tpk-form-group input,
.tpk-form-group textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--text);
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tpk-form-group textarea { resize: vertical; min-height: 120px; }
.tpk-form-group input::placeholder,
.tpk-form-group textarea::placeholder { color: var(--muted); opacity: 0.7; }
.tpk-form-group input:focus,
.tpk-form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-surface);
}
/* Honeypot: visually hidden but still in the DOM for bots to fill. */
.tpk-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.tpk-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.tpk-contact-page .tpk-form-actions .btn-solid,
.tpk-contact-page .tpk-form-actions .tpk-btn-ghost {
  min-width: 180px;
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  line-height: 1.2;
  box-sizing: border-box;
}
.tpk-contact-page .tpk-form-actions .btn-main {
  border: 1px solid transparent;
  box-shadow:
    0 8px 22px -10px rgba(var(--primary-rgb), 0.65),
    0 0 16px -8px rgba(var(--tpk-accent-rgb), 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.tpk-contact-page .tpk-form-actions .btn-main:hover {
  box-shadow:
    0 10px 26px -10px rgba(var(--primary-rgb), 0.8),
    0 0 20px -8px rgba(var(--tpk-accent-rgb), 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.tpk-contact-page .tpk-form-actions .tpk-btn-ghost {
  border-color: rgba(var(--primary-rgb), 0.52);
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--text);
}
.tpk-form-status {
  margin: 0;
  font-size: 0.9rem;
  min-height: 1.2em;
}
.tpk-form-status.is-success { color: var(--tpk-accent); }
.tpk-form-status.is-error { color: #f87171; }

@media (max-width: 560px) {
  .tpk-form-row { grid-template-columns: 1fr; }
  .tpk-contact-page {
    padding-top: 1.35rem;
    padding-bottom: 1.25rem;
  }
  .tpk-contact-page .tpk-section-head {
    margin-bottom: 1.2rem;
  }
  .tpk-contact-page .tpk-section-head h2 {
    margin-bottom: 0.35rem;
  }
  .tpk-contact-page .tpk-section-head p {
    font-size: 0.95rem;
    line-height: 1.35;
  }
  .tpk-contact-form,
  .tpk-contact-form .tpk-form-row {
    gap: 0.75rem;
  }
  .tpk-contact-form .tpk-form-group {
    gap: 0.3rem;
  }
  .tpk-contact-form .tpk-form-group input,
  .tpk-contact-form .tpk-form-group textarea {
    padding: 0.6rem 0.75rem;
  }
  .tpk-contact-form .tpk-form-group textarea {
    min-height: 96px;
  }
  .tpk-contact-page .tpk-form-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    margin-top: 0;
  }
  .tpk-contact-page .tpk-form-actions .btn-solid,
  .tpk-contact-page .tpk-form-actions .tpk-btn-ghost {
    width: 100%;
    min-height: 46px;
  }
  .tpk-contact-page .tpk-form-status {
    min-height: 0;
  }
}

@media (max-width: 900px) {
  .tpk-how-panel {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .tpk-format-preview {
    max-width: 620px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 600px) {
  body.tpk-landing .tpk-main { padding-top: 0.25rem; }
  .tpk-hero {
    padding-top: 0.75rem;
    padding-bottom: 2rem;
  }
  .tpk-hero h1 {
    max-width: 12ch;
  }
  .tpk-hero-actions {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }
  .tpk-hero-actions .tpk-btn-lg {
    width: min(100%, 10rem);
  }
  .tpk-hero + .tpk-section {
    padding-top: 1.5rem;
  }
  .tpk-how-panel {
    margin-top: 1.4rem;
  }
  .tpk-how-step {
    padding-left: 0.8rem;
  }
  .tpk-format-list li {
    grid-template-columns: 4.3rem minmax(0, 1fr);
    gap: 0.45rem;
    font-size: 0.9rem;
  }
  .tpk-format-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
  }
  .tpk-format-card {
    border-radius: 12px;
  }
  .tpk-format-frame {
    width: calc(100% - 0.9rem);
    margin: 0.45rem auto 0;
    border-radius: 9px;
  }
  .tpk-format-name {
    min-height: 2.3rem;
    font-size: 0.78rem;
  }
  .tpk-style-grid { grid-template-columns: repeat(2, 1fr); }
  .tpk-cta-band { padding: 2.5rem 1.25rem; }
}

body.tpk-body .result-details-panel .rivals-outpaint-controls {
  width: 100%;
  min-width: 0;
}

body.tpk-body .result-details-panel .rivals-outpaint-toggle {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  height: 42px;
}

body.tpk-body .result-details-panel .rivals-outpaint-toggle .toggle-radio {
  min-width: 0;
  min-height: 42px;
}

body.tpk-body .result-details-panel .rivals-outpaint-toggle .toggle-radio span {
  min-width: 0;
  padding: 0.45rem 0.35rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

body.tpk-body .details-wizard-grid .toggle-segmented,
body.tpk-body .rivals-crop-aspect-toggle {
  width: 100%;
  min-width: 0;
}

body.tpk-body .tpk-model-toggle,
body.tpk-body .tpk-quality-toggle {
  display: grid;
  /* One row with equal columns regardless of count (2 for consumers, 3 for admin). */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

body.tpk-body .tpk-model-toggle .toggle-radio,
body.tpk-body .tpk-quality-toggle .toggle-radio {
  min-width: 0;
}

body.tpk-body .tpk-model-toggle .toggle-radio span,
body.tpk-body .tpk-quality-toggle .toggle-radio span {
  padding-inline: 0.3rem;
  white-space: nowrap;
}

.tpk-matchup-separator-field {
  display: grid;
  grid-template-columns: auto minmax(0, 11rem);
  align-items: center;
  gap: 0.7rem;
}

.tpk-matchup-separator-field > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tpk-matchup-separator-toggle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  height: 36px;
}

.tpk-matchup-separator-toggle .toggle-radio {
  min-width: 0;
}

.tpk-matchup-separator-toggle .toggle-radio span {
  padding: 0.3rem 0.35rem;
  white-space: nowrap;
}

.tpk-logo-transform-controls {
  display: grid;
  gap: 0.85rem;
}

.tpk-logo-usage-toggle,
.tpk-title-position-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  height: 36px;
}

.tpk-logo-usage-toggle .toggle-radio,
.tpk-title-position-toggle .toggle-radio {
  min-width: 0;
}

.tpk-logo-usage-toggle .toggle-radio span,
.tpk-title-position-toggle .toggle-radio span {
  padding-inline: 0.35rem;
  white-space: nowrap;
}

.tpk-logo-transform-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--tpk-text-muted, #8a93a6);
}

.tpk-logo-transform-hint strong {
  color: var(--tpk-text, #d7deea);
  font-weight: 600;
}

.tpk-logo-treatment-toggle {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tpk-logo-treatment-toggle .toggle-radio {
  min-width: 0;
}

.tpk-logo-treatment-toggle .toggle-radio span {
  padding-inline: 0.35rem;
  white-space: nowrap;
}

.tpk-headline-character-toggle {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.tpk-headline-character-toggle .toggle-radio {
  min-width: 0;
}

.tpk-headline-character-toggle .toggle-radio span {
  padding-inline: 0.3rem;
  white-space: nowrap;
}

/* Output-step recap: a large, touch-friendly navigation summary for returning to any editable step. */
.tpk-result-recap {
  margin: 1rem 0 1.1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.62);
  overflow: hidden;
}

.tpk-result-recap-summary {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 96px;
  padding: 0.82rem 1rem;
  color: var(--text);
}

.tpk-result-recap-heading {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 40px;
  gap: 0.42rem;
  color: var(--text);
  text-decoration: none;
}

.tpk-result-recap-heading:hover {
  color: var(--primary);
}

.tpk-result-recap-heading:focus-visible,
.tpk-result-glance-pill:focus-visible,
.tpk-result-glance-logo:focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.82);
  outline-offset: -2px;
}

.tpk-result-recap-edit-icon {
  flex: 0 0 auto;
  color: #818cf8;
  font-size: 0.9rem;
  line-height: 1;
}

.tpk-result-recap-heading strong {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.tpk-result-glance {
  display: none;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.3rem;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  white-space: nowrap;
}

.tpk-result-glance::-webkit-scrollbar {
  display: none;
}

.tpk-result-glance-pill,
.tpk-result-glance-logo {
  box-sizing: border-box;
  height: 80px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 9px;
  background: rgba(9, 14, 26, 0.72);
}

.tpk-result-glance-pill {
  position: relative;
  display: grid;
  width: 80px;
  min-width: 80px;
  flex: 0 0 80px;
  aspect-ratio: 1 / 1;
  place-items: center;
  overflow: hidden;
  padding: 0.35rem;
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.tpk-result-glance-choice {
  padding: 0;
}

.tpk-result-glance-choice > img,
.tpk-result-glance-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.tpk-result-glance-choice > img {
  object-fit: cover;
}

.tpk-result-glance-placeholder {
  display: grid;
  place-items: center;
  background: rgba(51, 65, 85, 0.72);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.tpk-result-glance-value {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tpk-result-glance-choice .tpk-result-glance-value {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: -webkit-box;
  padding: 0.65rem 0.22rem 0.24rem;
  overflow: hidden;
  background: linear-gradient(transparent, rgba(2, 6, 23, 0.94));
  font-size: 0.58rem;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tpk-result-glance-logos {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.18rem;
}

.tpk-result-glance-logo {
  display: grid;
  width: 80px;
  flex: 0 0 80px;
  place-items: center;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.tpk-result-glance-logo img {
  width: 100%;
  height: 100%;
  padding: 0.16rem;
  object-fit: contain;
}

.tpk-result-glance-logo.is-photo img {
  padding: 0;
  object-fit: cover;
}

.tpk-result-glance-logo.is-empty {
  border-style: dashed;
  background: rgba(30, 41, 59, 0.52);
  color: rgba(148, 163, 184, 0.68);
  font-size: 0.76rem;
  font-weight: 800;
}

.tpk-result-glance-logo.is-unused {
  opacity: 0.48;
  pointer-events: none;
}

.tpk-result-glance-setting {
  max-width: none;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 0.28rem;
}

.tpk-result-glance-label {
  color: var(--muted);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.tpk-result-glance-setting .tpk-result-glance-value {
  font-size: 0.72rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.tpk-result-glance-pill:hover,
.tpk-result-glance-logo:not(.is-unused):hover {
  border-color: rgba(125, 211, 252, 0.72);
  background: rgba(30, 41, 59, 0.88);
}

@media (min-width: 769px) {
  .tpk-result-recap-summary {
    min-height: 92px;
    gap: 0.55rem;
    padding: 0.3rem 0.65rem;
  }

  .tpk-result-recap-heading {
    flex: 0 0 auto;
  }

  .tpk-result-glance {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-start;
    margin-left: auto;
  }
}

.tpk-recent-graphics {
  margin-top: 1.25rem;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(9, 14, 26, 0.58);
}

.tpk-recent-graphics[hidden] {
  display: none;
}

.tpk-recent-graphics-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.tpk-recent-graphics-head > div:first-child {
  min-width: 0;
}

.tpk-recent-graphics h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tpk-recent-graphics .panel-subtitle {
  margin: 0.18rem 0 0;
  font-size: 0.76rem;
  line-height: 1.25;
}

.tpk-recent-graphics-actions,
.tpk-recent-nav {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
}

.tpk-recent-view-all {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 0.45rem;
  color: var(--primary-light);
  font-size: 0.73rem;
  font-weight: 700;
  text-decoration: none;
}

.tpk-recent-view-all:hover {
  color: var(--tpk-accent);
}

.tpk-recent-nav-btn {
  display: inline-grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.78);
  color: var(--text);
  cursor: pointer;
}

.tpk-recent-nav-btn:hover:not(:disabled) {
  border-color: rgba(125, 211, 252, 0.72);
  background: rgba(30, 41, 59, 0.92);
}

.tpk-recent-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.tpk-recent-view-all:focus-visible,
.tpk-recent-nav-btn:focus-visible,
.tpk-recent-tile:focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.82);
  outline-offset: 2px;
}

.tpk-recent-rail {
  display: flex;
  width: 100%;
  min-width: 0;
  gap: 0.6rem;
  margin: 0;
  padding: 0 0 0.45rem;
  overflow-x: auto;
  overflow-y: hidden;
  list-style: none;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-color: rgba(125, 211, 252, 0.5) rgba(15, 23, 42, 0.5);
  scrollbar-width: thin;
}

.tpk-recent-item {
  position: relative;
  width: 108px;
  flex: 0 0 108px;
  min-width: 0;
}

.tpk-recent-tile {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 178px;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 7px;
  background: rgba(5, 8, 15, 0.82);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.tpk-recent-tile:hover:not(:disabled) {
  border-color: rgba(125, 211, 252, 0.68);
  background: rgba(15, 23, 42, 0.92);
}

.tpk-recent-zoom {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
  background: rgba(6, 8, 15, 0.76);
  color: #fff;
  cursor: zoom-in;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.tpk-recent-zoom::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: var(--radius-pill);
}

.tpk-recent-zoom:hover,
.tpk-recent-zoom:focus-visible {
  border-color: var(--tpk-accent);
  background: rgba(6, 8, 15, 0.9);
  color: var(--tpk-accent);
  outline: none;
}

.tpk-recent-zoom:focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.82);
  outline-offset: 2px;
}

.tpk-recent-zoom:active {
  transform: scale(0.9);
}

.tpk-recent-zoom svg {
  pointer-events: none;
}

.tpk-recent-thumb {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 3 / 4;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background: #04060c;
}

.tpk-recent-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tpk-recent-meta {
  display: flex;
  min-width: 0;
  min-height: 42px;
  flex-direction: column;
  justify-content: center;
  gap: 0.12rem;
  padding: 0.38rem 0.45rem;
}

.tpk-recent-title,
.tpk-recent-date {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tpk-recent-title {
  font-size: 0.69rem;
  font-weight: 700;
}

.tpk-recent-date {
  color: var(--muted);
  font-size: 0.62rem;
}

.tpk-recent-tile.is-loading {
  cursor: wait;
}

.tpk-recent-tile.is-loading .tpk-recent-thumb::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--tpk-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.tpk-recent-tile.is-loading img,
.tpk-recent-tile.is-loading .tpk-recent-meta {
  opacity: 0.45;
}

.tpk-recent-status {
  margin: 0.45rem 0 0;
  color: var(--error, #fb7185);
  font-size: 0.72rem;
}

@media (max-width: 768px) {
  body.tpk-body .tpk-recent-graphics {
    padding: 0.7rem;
  }

  body.tpk-body .tpk-recent-graphics-head {
    align-items: center;
    margin-bottom: 0.55rem;
  }

  body.tpk-body .tpk-recent-graphics .panel-subtitle {
    display: block;
    font-size: 0.72rem;
    -webkit-line-clamp: initial;
  }

  body.tpk-body .tpk-recent-nav {
    display: none;
  }

  body.tpk-body .tpk-recent-view-all {
    min-height: 40px;
    padding-inline: 0.35rem;
  }

  body.tpk-body .tpk-recent-rail {
    gap: 0.5rem;
    padding-bottom: 0.15rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.tpk-body .tpk-recent-rail::-webkit-scrollbar {
    display: none;
  }

  body.tpk-body .tpk-recent-item {
    width: 96px;
    flex-basis: 96px;
  }

  body.tpk-body .tpk-recent-tile {
    min-height: 163px;
  }
}

.tpk-generate-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1.25rem 0;
}

/* Expectation-setting note near Generate so the 30-90s wait isn't a surprise. */
.tpk-generate-eta {
  flex-basis: 100%;
  text-align: center;
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.tpk-draft-eta {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.tpk-photo-safe-editor {
  width: min(100%, 390px, calc(74dvh * 9 / 16));
  margin: 0.65rem auto 0;
  padding: 0;
}
.tpk-photo-safe-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: #05070d;
  /* Allow vertical page scroll when swiping over the poster; the resize handle
     and slider controls opt out separately when they need direct manipulation. */
  touch-action: pan-y;
  overscroll-behavior: auto;
}
.tpk-photo-safe-stage.aspect-story { aspect-ratio: 9 / 16; }
.tpk-photo-safe-stage.aspect-post { aspect-ratio: 3 / 4; }
.tpk-photo-safe-stage.aspect-square { aspect-ratio: 1 / 1; }
.rivals-output-image-wrap.has-photo-safe-editor .tpk-photo-safe-stage {
  position: absolute;
  inset: 0;
  height: 100%;
  border: 0;
  border-radius: inherit;
}
.tpk-photo-safe-bg {
  position: absolute;
  inset: 0;
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  user-select: none;
  pointer-events: none;
}
.tpk-photo-safe-cutout-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.tpk-photo-safe-cutout-layer.is-dragging { cursor: grabbing; }
.tpk-photo-safe-cutout-layer img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
}
/* Bracket-only opt-in field-watermark checkbox (Sponsor & caption context section). */
.tpk-bracket-watermark-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
}
.tpk-bracket-watermark-toggle input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}
.tpk-bracket-watermark-toggle span {
  user-select: none;
}
.tpk-photo-safe-resize {
  position: absolute;
  right: -12px;
  bottom: -12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #ecfeff;
  background: #0891b2;
  box-shadow: 0 0 0 2px rgba(8, 13, 24, 0.88);
  cursor: nwse-resize;
  touch-action: none;
}
.tpk-photo-safe-preview-btn {
  position: absolute;
  right: 0.6rem;
  top: 0.6rem;
  z-index: 3;
  min-height: 34px;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(191, 219, 254, 0.35);
  border-radius: var(--radius-pill);
  background: rgba(8, 13, 24, 0.72);
  color: #e0f2fe;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: zoom-in;
}
.tpk-photo-safe-preview-btn:hover,
.tpk-photo-safe-preview-btn:focus-visible {
  background: rgba(14, 116, 144, 0.86);
  border-color: rgba(125, 211, 252, 0.8);
}
.tpk-photo-safe-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(104px, 0.8fr);
  align-items: end;
  gap: 0.55rem 0.75rem;
}
.tpk-photo-safe-controls label {
  display: grid;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tpk-photo-safe-controls input[type="range"] {
  width: 100%;
  /* Tall, transparent hit area so the thumb is easy to grab on touch. */
  appearance: none;
  -webkit-appearance: none;
  height: 42px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}
.tpk-photo-safe-controls input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(148, 163, 184, 0.32);
}
.tpk-photo-safe-controls input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(148, 163, 184, 0.32);
}
.tpk-photo-safe-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -12px;
  border-radius: 50%;
  border: 2px solid #ecfeff;
  background: #0891b2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.tpk-photo-safe-controls input[type="range"]::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #ecfeff;
  background: #0891b2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
/* Border-color control reuses the Schedule Designer swatch (.color-input) for a
   consistent look. The controls row is tight, so it's the swatch only (no hex
   field) — it fills its grid cell. */
.tpk-photo-safe-controls .color-input.compact {
  width: 100%;
  height: 34px;
  margin-top: 0;
  padding: 2px;
}
.tpk-photo-safe-actions {
  position: relative;
  display: grid;
  align-items: end;
  min-width: 0;
}
.tpk-photo-safe-actions .btn-solid {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding-inline: 0.9rem;
}
.tpk-photo-safe-actions .generation-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 560px) {
  .rivals-output-image-wrap,
  .tpk-photo-safe-editor,
  .rivals-crop-panel {
    width: calc(100vw - 2rem) !important;
    max-width: 100% !important;
  }

  /* Compact controls: sliders stay in three short rows, with Apply as a small
     side action instead of a full-width block below them. */
  .tpk-photo-safe-controls {
    grid-template-columns: minmax(0, 1fr) 5.75rem;
    align-items: center;
    gap: 0.2rem 0.55rem;
  }
  .tpk-photo-safe-controls label {
    grid-template-columns: 3.25rem 1fr;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
    font-size: 0.68rem;
  }
  .tpk-photo-safe-actions {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: stretch;
    margin-top: 0;
  }
  .tpk-photo-safe-actions .btn-solid {
    min-height: 44px;
    padding-inline: 0.65rem;
    border-radius: 18px;
    font-size: 0.82rem;
  }
  .tpk-photo-safe-actions .generation-status {
    position: absolute;
  }

  body.tpk-body .tpk-generate-eta {
    font-size: 0.68rem;
    line-height: 1.1;
    white-space: nowrap;
  }

  body.tpk-body .tpk-generate-bar .btn-solid,
  body.tpk-body .tpk-share-actions .btn-solid,
  body.tpk-body .rivals-outpaint-controls-row .btn-solid {
    min-height: 44px;
    border-radius: 12px;
    padding: 0.58rem 0.7rem;
    font-size: 0.82rem;
    line-height: 1.1;
  }

  body.tpk-body .tpk-generate-bar .btn-solid,
  body.tpk-body .tpk-share-actions .btn-solid {
    border-radius: 10px;
    font-weight: 700;
  }

  body.tpk-body .rivals-crop-toolbar .btn-solid,
  body.tpk-body .rivals-crop-actions .btn-solid {
    min-height: 44px;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.1;
  }
}

.tpk-generate-bar .btn-solid {
  min-width: 280px;
}

.tpk-body .btn-solid.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

@media (min-width: 769px) {
  body.tpk-body.rivals-page .tpk-save-share-panel .tpk-result-generate-top {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.tpk-image-preview-modal .style-preview-image {
  object-fit: contain;
}

@media (max-width: 980px) {
  body.tpk-body .tpk-sticky-has-save {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem;
  }

  body.tpk-body .tpk-sticky-has-save.tpk-share-native-ready,
  body.tpk-body .tpk-sticky-has-save.tpk-share-native-fallback {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.tpk-body .tpk-sticky-has-save .btn-solid {
    min-width: 0;
    width: 100%;
    padding-inline: 0.35rem;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .tpk-caption-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .caption-actions {
    margin-left: auto;
  }

  .tpk-share-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.tpk-body {
    max-width: 100%;
    overflow-x: clip;
  }

  body.tpk-body .app-shell {
    padding: 0 0 2rem;
    gap: 0.35rem;
  }

  body.tpk-body .tpk-main {
    padding: 0;
  }

  body.tpk-body .flash-stack {
    min-height: 0;
    gap: 0;
  }

  body.tpk-body .tpk-header {
    min-height: 68px;
    padding: 0.55rem 0.65rem;
    /* The content panels run nearly edge-to-edge on mobile, so shrink the floating
       bar's side inset to match instead of leaving it noticeably narrower. */
    width: calc(100% - 1rem);
  }

  body.tpk-body .tpk-mobile-menu {
    width: calc(100% - 1rem);
  }

  body.tpk-body .app-main,
  body.tpk-body .panel,
  body.tpk-body .rivals-shell,
  body.tpk-body .rivals-panel,
  body.tpk-body .rivals-page-header,
  body.tpk-body .details-wizard-grid,
  body.tpk-body .result-wizard-grid,
  body.tpk-body .result-details-panel,
  body.tpk-body .rivals-setup-grid,
  body.tpk-body .rivals-setup-grid > label,
  body.tpk-body .rivals-setup-grid > [data-field-key],
  body.tpk-body .tpk-collapse,
  body.tpk-body .tpk-collapse-body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.tpk-body .panel {
    padding: 0.5rem;
    border-radius: 14px;
  }

  body.tpk-body .rivals-panel {
    padding: 0.65rem;
    border-radius: 12px;
  }

  body.tpk-body .rivals-page-header {
    margin-bottom: 0.5rem;
  }

  /* "Step N of 5" eyebrow is redundant with the numbered progress bubbles directly below it. */
  body.tpk-body .rivals-page-header .eyebrow {
    display: none;
  }

  body.tpk-body .rivals-page-header h2 {
    font-size: clamp(1.4rem, 7vw, 1.85rem);
    line-height: 1.05;
    margin: 0 0 0.2rem;
  }

  /* Clamp header + secondary subtitles to one line so they stop wrapping on a phone. */
  body.tpk-body .rivals-page-header .panel-subtitle,
  body.tpk-body .rivals-section-head .panel-subtitle,
  body.tpk-body .style-subtitle-row .panel-subtitle {
    font-size: 0.9rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  /* The step header's intro sentence explains the page to first-timers — let it wrap
     to two lines instead of truncating with an ellipsis. */
  body.tpk-body .rivals-page-header .panel-subtitle {
    -webkit-line-clamp: 2;
  }

  body.tpk-body .result-details-panel .tpk-outpaint-copy {
    font-size: 0.78rem;
    line-height: 1.25;
  }

  body.tpk-body .rivals-page-header,
  body.tpk-body .rivals-section-head,
  body.tpk-body .rivals-setup-grid > label,
  body.tpk-body .rivals-setup-grid > [data-field-key],
  body.tpk-body .rivals-setup-grid .rivals-control-block {
    max-width: calc(100vw - 1rem);
  }

  body.tpk-body .details-form-section .rivals-setup-grid [data-field-key] > span:first-child {
    flex: 1 1 auto;
    max-width: calc(100% - 95px);
  }

  body.tpk-body .details-form-section .rivals-setup-grid [data-field-key] .rivals-include-toggle {
    order: 1;
    flex: 0 0 auto;
    align-self: center;
    position: static;
    margin: 0;
  }

  body.tpk-body .tpk-muted-note {
    font-size: 0.65rem;
    letter-spacing: -0.015em;
    white-space: nowrap;
  }

  body.tpk-body .studio-wizard-container {
    gap: 0.75rem;
  }

  body.tpk-body .wizard-progress-bar {
    margin-top: 0.55rem;
    padding: 0.25rem;
    gap: 0.2rem;
  }

  body.tpk-body .wizard-step {
    min-height: 34px;
    padding: 0.35rem 0.2rem;
    font-size: 0.72rem;
  }

  /* Phone: the two logo-region pickers split the row evenly (override the desktop fixed
     width) and get a 42px touch target. */
  body.tpk-body .rivals-team-state,
  body.tpk-body .rivals-team-sport {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 42px;
  }

  body.tpk-body .recipe-cards-grid {
    gap: 0.5rem;
    margin-top: 0.35rem;
  }

  body.tpk-body .recipe-card-body {
    padding: 0.5rem 0.6rem 0.6rem;
  }

  body.tpk-body .recipe-card-title {
    font-size: 0.88rem;
  }

  body.tpk-body .recipe-card-desc {
    font-size: 0.65rem;
    line-height: 1.25;
  }

  /* Mobile vibe picker: two-up vertical scroll grid instead of a one-card swipe lane,
     so ~6 vibes are visible at once (like the Step 1 layout cards). The carousel JS
     already renders every visible card on mobile, so this is purely presentational. */
  body.tpk-body .style-carousel {
    overflow: visible;
    touch-action: pan-y;
  }

  body.tpk-body .style-cards-tiled .style-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
    padding-inline: 0;
  }

  body.tpk-body .style-cards-tiled .style-grid .style-card {
    flex: initial;
    width: auto;
    aspect-ratio: 3 / 4;
    min-height: 0;
    max-height: none;
    scroll-snap-align: none;
  }

  /* Narrower cards in the 3-up grid: shrink the title so it stays on one or two lines. */
  body.tpk-body .style-cards-tiled .style-card h3 {
    font-size: 0.72rem;
    bottom: 7px;
    left: 8px;
    right: 8px;
  }

  /* Swipe arrows + pagination dots are meaningless once the grid scrolls vertically. */
  body.tpk-body .style-carousel-container .carousel-arrow,
  body.tpk-body .carousel-pagination {
    display: none;
  }

  /* The title already says "Select a visual style vibe" — drop the redundant subtitle. */
  body.tpk-body .style-subtitle-row .panel-subtitle {
    display: none;
  }

  body.tpk-body .details-wizard-grid .toggle-segmented,
  body.tpk-body .rivals-crop-aspect-toggle {
    display: grid;
    height: 40px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    flex-wrap: nowrap;
  }

  body.tpk-body .details-wizard-grid .toggle-radio,
  body.tpk-body .rivals-crop-aspect-toggle .toggle-radio {
    flex: initial;
    min-width: 0;
    min-height: 40px;
  }

  body.tpk-body .details-wizard-grid .toggle-radio span,
  body.tpk-body .rivals-crop-aspect-toggle .toggle-radio span {
    min-width: 0;
    padding: 0.35rem 0.1rem;
    font-size: 0.78rem;
    line-height: 1;
    white-space: nowrap;
  }

  body.tpk-body .details-wizard-grid .rivals-aspect-toggle,
  body.tpk-body .rivals-crop-aspect-toggle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.tpk-body .details-wizard-grid .tpk-model-toggle,
  body.tpk-body .details-wizard-grid .tpk-quality-toggle {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  body.tpk-body .tpk-color-grid {
    grid-template-columns: minmax(5.2rem, 1fr) repeat(2, minmax(4.2rem, 4.8rem));
    min-width: 0;
    column-gap: 0.45rem;
  }

  body.tpk-body .tpk-color-grid .tpk-color-team-label,
  body.tpk-body .tpk-color-grid .tpk-color-col-head {
    min-width: 0;
  }

  body.tpk-body .tpk-color-grid .tpk-color-col-head {
    font-size: 0.58rem;
    letter-spacing: 0.015em;
    text-transform: none;
    white-space: nowrap;
  }

  body.tpk-body .tpk-collapse > summary {
    padding: 0.72rem 0.75rem;
    gap: 0.35rem;
    font-size: 0.72rem;
    line-height: 1.15;
  }

  body.tpk-body .tpk-collapse-hint {
    font-size: 0.68rem;
  }

  body.tpk-body .tpk-resolution-field {
    width: 100%;
    min-width: 0;
  }

  body.tpk-body .tpk-matchup-separator-field {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  body.tpk-body .details-wizard-grid .tpk-matchup-separator-toggle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 40px;
  }

  body.tpk-body .details-wizard-grid .tpk-resolution-toggle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.tpk-body .details-wizard-grid .tpk-logo-treatment-toggle {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.tpk-body .details-wizard-grid .tpk-headline-character-toggle {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body.tpk-body .details-wizard-grid .tpk-style-intensity-toggle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.tpk-body .result-details-panel .rivals-outpaint-toggle {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: 40px;
    overflow: hidden;
    border-radius: var(--radius-pill);
  }

  body.tpk-body .result-details-panel .rivals-outpaint-toggle .toggle-radio {
    min-height: 40px;
  }

  body.tpk-body .result-details-panel .rivals-outpaint-toggle .toggle-radio span {
    padding: 0.35rem 0.02rem;
    font-size: 0.7rem;
    border-radius: 0 !important;
  }

  body.tpk-body .tpk-logo-treatment-toggle .toggle-radio span,
  body.tpk-body .tpk-style-intensity-toggle .toggle-radio span,
  body.tpk-body .tpk-headline-character-toggle .toggle-radio span {
    font-size: 0;
    padding-inline: 0.05rem;
  }

  body.tpk-body .tpk-logo-treatment-toggle .toggle-radio span::after,
  body.tpk-body .tpk-style-intensity-toggle .toggle-radio span::after,
  body.tpk-body .tpk-headline-character-toggle .toggle-radio span::after {
    content: attr(data-short);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
  }

  body.tpk-body .wizard-actions-row {
    flex-direction: row;
    align-items: stretch;
    gap: 0.35rem;
  }

  body.tpk-body .wizard-actions-row .btn-solid {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
    min-height: 36px;
    padding: 0.38rem 0.45rem;
    border-radius: 12px;
    font-size: 0.74rem;
    line-height: 1.15;
    white-space: normal;
  }

  body.tpk-body .wizard-actions-row .btn-neutral {
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(15, 23, 42, 0.45);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  }

  /* Wizard nav on phones: the step content (cards, forms, the result image)
     pushes Back/Next below the fold, so new users never see how to advance.
     Pin the action bar to the bottom of the viewport on every design step so
     the next action is always one tap away. Scoped to .rivals-page, which is
     shared by all five Team Post Kit wizard pages (recipe → result) and nothing
     else (landing/plans/library use other body classes). */
  body.tpk-body.rivals-page .wizard-actions-row {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    z-index: 50;
    margin-top: 0;
    padding: 0.32rem 0.5rem calc(0.32rem + env(safe-area-inset-bottom, 0px));
    background: #0b111b;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3);
  }

  body.tpk-body.rivals-page .tpk-sticky-actions-row {
    left: 0;
    right: 0;
    width: auto;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    transform: translateZ(0);
    will-change: transform;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
  }

  /* Mobile never footer-docks: keeping a stable transform avoids visual-viewport
     jumps while Safari collapses or expands its browser chrome during scrolling. */
  body.tpk-body.rivals-page .tpk-sticky-actions-row.is-docked {
    transform: translateZ(0);
    border-bottom: 0;
    border-radius: 0;
  }

  body.tpk-body.rivals-page .tpk-sticky-actions-row .btn-solid {
    min-height: 36px;
    padding: 0.38rem 0.45rem;
  }

  /* Reserve space so the last of the step content isn't hidden behind the fixed
     bar. Padding the main wrapper covers every step regardless of inner layout. */
  body.tpk-body.rivals-page .tpk-main {
    padding-bottom: 3.25rem;
  }

  /* Keep the final-step recap in one horizontally scrollable row on phones. */
  body.tpk-body .tpk-result-recap {
    margin: 0.75rem 0 1rem;
  }

  body.tpk-body .tpk-result-recap-summary {
    min-height: 92px;
    padding: 0.35rem 0.55rem 0.45rem;
  }

  body.tpk-body .tpk-result-recap-heading {
    display: none;
  }

  body.tpk-body .tpk-result-glance {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }

  body.tpk-body .tpk-result-recap-summary strong {
    font-size: 0.8rem;
  }

  /* ── Result page Step 5 mobile refinements ─────────────────────────── */

  body.tpk-body.rivals-page #studio-result-content.is-draft .rivals-crop-panel {
    display: none;
  }

  body.tpk-body.rivals-page #studio-result-content.is-draft .rivals-output-main {
    gap: 0;
  }

  body.tpk-body.rivals-page #studio-result-content.is-draft .rivals-output-image-wrap {
    aspect-ratio: auto;
    height: clamp(240px, 38vh, 340px);
    border-radius: 12px;
  }

  body.tpk-body.rivals-page #studio-result-content.is-draft .rivals-output-placeholder {
    padding: 1.15rem;
  }

  body.tpk-body.rivals-page #studio-result-content.is-draft .rivals-output-placeholder-content {
    gap: 0.45rem;
    max-width: 15rem;
  }

  body.tpk-body.rivals-page #studio-result-content.is-draft .rivals-output-placeholder-content h3 {
    font-size: 1.02rem;
  }

  body.tpk-body.rivals-page #studio-result-content.is-draft .rivals-output-placeholder-content > p:not(.eyebrow) {
    font-size: 0.86rem;
    line-height: 1.3;
  }

  body.tpk-body.rivals-page #studio-result-content.is-draft .tpk-draft-eta {
    margin-top: 0.1rem;
    font-size: 0.72rem;
  }

  /* Hide Save & Share panel — sticky bar provides the viable save/share action. */
  body.tpk-body .tpk-save-share-panel { display: none; }

  /* Show the sticky save controls (only once a graphic exists), then JS hides
     Download or Share by capability. In draft the bar shows Back + Generate. */
  body.tpk-body .tpk-sticky-restart { display: none; }
  body.tpk-body .tpk-sticky-has-save .tpk-sticky-save { display: inline-flex; }

  /* Revise: compact inline button next to heading. */
  body.tpk-body .tpk-revise-inline-btn {
    min-height: 32px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
  }

  /* Outpaint: keep toggle + Add Buffer on one row. */
  body.tpk-body .result-details-panel .rivals-outpaint-controls-row {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
  }
  body.tpk-body .result-details-panel .rivals-outpaint-controls-row #rivals-outpaint-btn {
    width: auto;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 0.85rem;
  }

  /* Let truncated subtitles in result panels wrap instead of clipping. */
  body.tpk-body .result-details-panel .panel-subtitle,
  body.tpk-body .tpk-recent-graphics .panel-subtitle {
    -webkit-line-clamp: 2;
  }

  /* Normalize button border-radius across the result page. */
  body.tpk-body .tpk-result-output-panel .btn-solid,
  body.tpk-body .result-details-panel .btn-solid,
  body.tpk-body .tpk-sticky-save {
    border-radius: 10px;
  }

  /* Sticky result bar starts three-up, then JS changes it to Back + Share when
     file sharing works or Back + Download when native sharing is unavailable. */
  body.tpk-body .tpk-sticky-has-save {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem;
  }

  body.tpk-body .tpk-sticky-has-save.tpk-share-native-ready,
  body.tpk-body .tpk-sticky-has-save.tpk-share-native-fallback {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Override the desktop min-width: 150px (rule ~428) so the three grid columns
     can actually shrink to equal thirds on a narrow viewport instead of being
     clamped to 150px each and overflowing the bar. Needs specificity above that
     desktop rule (0,4,1), hence the .rivals-page + .tpk-sticky-actions-row scope. */
  body.tpk-body.rivals-page .tpk-sticky-actions-row.tpk-sticky-has-save .btn-solid {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  body.tpk-body .tpk-sticky-has-save .tpk-sticky-save {
    padding: 0.55rem 0.25rem;
    font-size: 0.8rem;
    text-align: center;
    justify-content: center;
    min-width: 0;
  }

  body.tpk-body .tpk-sticky-has-save .btn-main,
  body.tpk-body .tpk-sticky-has-save .btn-main:hover,
  body.tpk-body .tpk-sticky-has-save .btn-solid:active {
    transform: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  }

  body.tpk-body .tpk-sticky-has-save .btn-main::after {
    display: none;
  }

  /* Caption textarea: tall enough to show the full generated caption. */
  body.tpk-body .result-details-panel .caption-textarea {
    min-height: 7.5rem;
  }

  /* Revise textarea: a bit roomier for revision instructions. */
  body.tpk-body .result-details-panel .rivals-revision-box textarea {
    min-height: 4.5rem;
  }
}

@media (max-width: 820px) {
  body.tpk-body .tpk-header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(76px, auto);
    gap: 0.5rem;
    min-height: 56px;
    width: 100%;
    margin: 0;
    padding: 0.45rem;
    top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    background:
      linear-gradient(rgba(4, 6, 12, 0.96), rgba(2, 4, 9, 0.96)) padding-box,
      linear-gradient(120deg, rgba(99, 102, 241, 0.48), rgba(34, 211, 238, 0.36)) border-box;
    box-shadow: 0 8px 24px -18px rgba(2, 6, 23, 0.9);
    animation: none;
  }
  .tpk-header::before {
    display: none;
  }
  .tpk-nav { display: none; }
  .tpk-nav-utility .tpk-nav-link,
  .tpk-nav-utility .tpk-account-email,
  .tpk-nav-utility .tpk-nav-create {
    display: none;
  }
  /* Keep a compact images counter next to the avatar on mobile (icon + count only). */
  .tpk-nav-utility .usage-pill {
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
    gap: 0.25rem;
  }
  .tpk-nav-utility .usage-pill .usage-pill-label { display: none; }
  .tpk-mobile-menu-btn {
    display: inline-flex;
    order: -2;
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
  }
  /* Wordmark lives in the middle track and centers within it, so the hamburger (col 1)
     and the utility cluster (col 3) keep their own lanes and can never overlap it —
     important now that the utility holds both the images pill and the avatar. */
  .tpk-brand {
    grid-column: 2;
    grid-row: 1;
    position: static;
    justify-self: center;
    align-self: center;
    min-width: 0;
    transform: translateY(-2px);
    z-index: 1;
  }
  .tpk-brand:hover,
  .tpk-brand:focus-visible {
    transform: translateY(-2px);
  }
  /* Touch feedback: the desktop hover glow doesn't reliably fire on tap, so give
     the logo an explicit pressed state — a quick dim + shrink that reads as a
     button press and makes the "go home" action feel deliberate. */
  .tpk-brand:active {
    transform: translateY(-2px) scale(0.94);
    filter: brightness(0.9) drop-shadow(0 0 6px rgba(99, 102, 241, 0.4));
    transition: filter 0.08s ease, transform 0.08s ease;
  }
  .tpk-nav-utility {
    grid-column: 3;
    grid-row: 1;
    margin-left: auto;
    min-width: 76px;
    justify-content: flex-end;
    gap: 0.4rem;
    z-index: 2;
  }
  /* The desktop 0.5rem right margin doubles up with the header padding on mobile and
     leaves a dead gap past the avatar — drop it so the avatar hugs the edge padding. */
  .tpk-account-menu { margin-right: 0; }
  .tpk-body .tpk-cta.btn-main {
    min-height: 42px;
    padding-inline: 0.75rem;
    font-size: 0.82rem;
  }
  .tpk-brand-full {
    display: block;
    width: auto;
    max-width: min(42vw, 168px);
    height: auto;
    max-height: 34px;
  }
  .tpk-brand-mark { display: none; }
  body.tpk-body .tpk-mobile-menu {
    width: 100%;
    /* Cancel .app-shell's 1.25rem flex gap so the open panel meets the
       56px sticky header instead of exposing a strip of page content. */
    margin-top: -1.25rem;
    top: 56px;
    border-left: 0;
    border-right: 0;
    border-radius: 0 0 14px 14px;
  }
  body.tpk-plans-page .tpk-main { padding-top: 1.5rem; }
}

@media (max-width: 820px) {
  body.studio-page .tpk-header {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }
  body.studio-page .tpk-nav-utility {
    min-width: auto;
  }
}

/* =============================================================================
   Team Post Kit — mobile wizard stepper as numbered dots + connector line.
   Placed last so it overrides the generic wrapping-pill mobile rules. The step
   names are dropped on phones (the header already shows "STEP n OF 5" + title).
   ============================================================================= */
@media (max-width: 768px) {
  body.tpk-body .wizard-progress-bar {
    position: relative;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0;
    background: none;
    border: none;
    padding: 0.5rem 0.25rem;
    margin-top: 0.75rem;
  }
  /* connector line behind the circles */
  body.tpk-body .wizard-progress-bar::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 1.5rem;
    right: 1.5rem;
    height: 2px;
    background: var(--border);
    transform: translateY(-50%);
    z-index: 0;
  }
  body.tpk-body .wizard-step {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    min-height: 0;
    padding: 0;
    font-size: 0; /* hide the "n. Label" text on mobile */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    opacity: 1; /* override the inline opacity:0.5 on upcoming steps below */
  }
  body.tpk-body .wizard-step::before {
    content: attr(data-step);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
  }
  /* upcoming (non-link) steps read as dim/disabled */
  body.tpk-body span.wizard-step { opacity: 0.55; }
  body.tpk-body .wizard-step.completed {
    background: var(--primary-surface-strong);
    border-color: var(--primary);
    color: var(--primary-light);
    opacity: 1;
  }
  body.tpk-body .wizard-step.completed::before { content: "\2713"; }
  body.tpk-body .wizard-step.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    opacity: 1;
    box-shadow: 0 0 0 4px var(--primary-surface);
  }
}

/* HTMX step transition fade-in */
@keyframes fadeInStep {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.assets-wizard-grid,
.details-wizard-grid,
.result-wizard-grid,
.loader-container {
  animation: fadeInStep 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}