/* PixelDeck v82 — upload wizard, infinite discovery and mobile usability. */

.upload-wizard { width: min(820px, calc(100vw - 24px)); max-height: min(900px, calc(100dvh - 24px)); overflow: auto; }
.upload-stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 22px; padding: 0; list-style: none; }
.upload-stepper li { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 10px; border: 1px solid var(--border, #2a4935); border-radius: 11px; color: var(--muted, #91a398); background: color-mix(in srgb, var(--panel, #071b10) 88%, transparent); font-size: 12px; font-weight: 900; }
.upload-stepper li b { display: grid; flex: 0 0 auto; width: 28px; height: 28px; place-items: center; border: 1px solid currentColor; border-radius: 8px; }
.upload-stepper li.active { color: var(--accent, #9be64d); border-color: color-mix(in srgb, var(--accent, #9be64d) 60%, transparent); background: color-mix(in srgb, var(--accent, #9be64d) 10%, var(--panel, #071b10)); }
.upload-stepper li.complete { color: var(--text, #efffea); }
.upload-stepper li.complete b { color: #071108; border-color: var(--accent, #9be64d); background: var(--accent, #9be64d); }
.upload-stepper li.complete b::after { content: "✓"; }
.upload-stepper li.complete b { font-size: 0; }
.upload-stepper li.complete b::after { font-size: 14px; }

.upload-wizard-step { display: none; min-height: 330px; }
.upload-wizard-step.active { display: block; }
.upload-kind-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.upload-kind-picker label { position: relative; min-width: 0; cursor: pointer; }
.upload-kind-picker input { position: absolute; opacity: 0; pointer-events: none; }
.upload-kind-picker label > span { display: block; min-height: 80px; padding: 14px; border: 1px solid var(--border, #2a4935); border-radius: 13px; background: color-mix(in srgb, var(--panel, #071b10) 94%, #000); }
.upload-kind-picker b, .upload-kind-picker small { display: block; }
.upload-kind-picker small { margin-top: 5px; color: var(--muted, #91a398); line-height: 1.35; }
.upload-kind-picker input:checked + span { border-color: var(--accent, #9be64d); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #9be64d) 12%, transparent); }
.upload-kind-picker input:focus-visible + span { outline: 2px solid var(--accent-2, #5df7d4); outline-offset: 2px; }
.upload-kind-picker input:disabled + span { opacity: .5; cursor: not-allowed; }

.upload-details-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.upload-details-main .asset-description-label { grid-column: 1 / -1; }
.upload-advanced { margin-top: 14px; border: 1px solid var(--border, #2a4935); border-radius: 12px; background: color-mix(in srgb, var(--panel, #071b10) 86%, transparent); }
.upload-advanced summary { padding: 13px 14px; color: var(--muted, #91a398); font-weight: 900; cursor: pointer; }
.upload-advanced .asset-seo-fields { padding: 0 14px 14px; }

.upload-review { display: grid; grid-template-columns: minmax(160px, 230px) minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--border, #2a4935); border-radius: 14px; background: color-mix(in srgb, var(--panel, #071b10) 92%, #000); }
.upload-review-preview { aspect-ratio: 1; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent, #9be64d) 35%, transparent); border-radius: 12px; background: #020904; }
.upload-review-preview img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.upload-review-copy h3 { margin: 5px 0 12px; font-size: clamp(1.35rem, 4vw, 2rem); overflow-wrap: anywhere; }
.upload-review-copy dl { display: grid; gap: 7px; margin: 0; }
.upload-review-copy dl div { display: grid; grid-template-columns: minmax(72px, .42fr) 1fr; gap: 10px; }
.upload-review-copy dt { color: var(--muted, #91a398); }
.upload-review-copy dd { margin: 0; font-weight: 850; overflow-wrap: anywhere; }
.upload-review-controls { margin-top: 14px; }
.upload-rights { grid-column: 1 / -1; padding: 12px; border: 1px solid color-mix(in srgb, var(--accent, #9be64d) 30%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--accent, #9be64d) 7%, transparent); }

.upload-wizard-actions { position: sticky; bottom: -1px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 18px -4px -4px; padding: 12px 4px 4px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--panel, #071b10) 98%, #000) 25%); }
.upload-wizard-actions .hint { margin: 0; }
.upload-wizard-actions .primary, .upload-wizard-actions .secondary { min-height: 44px; }

.discover-load-status { display: grid; min-height: 46px; place-items: center; padding: 14px; color: var(--muted, #91a398); font-size: 12px; font-weight: 800; text-align: center; }
.discover-sentinel { width: 100%; height: 2px; }

@media (max-width: 760px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  button, a, select, input { touch-action: manipulation; }
  .mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
  .mobile-bottom-nav button { min-height: 52px; }
  .upload-wizard { width: 100vw; height: 100dvh; max-height: none; border-radius: 0 !important; padding: 18px 14px calc(18px + env(safe-area-inset-bottom)) !important; }
  .upload-stepper { position: sticky; top: -18px; z-index: 3; margin: 10px -14px 18px; padding: 10px 14px; background: color-mix(in srgb, var(--panel, #071b10) 96%, #000); }
  .upload-stepper li { justify-content: center; padding: 8px 5px; }
  .upload-stepper li span { display: none; }
  .upload-kind-picker, .upload-details-main, .upload-review { grid-template-columns: 1fr; }
  .upload-wizard-step { min-height: calc(100dvh - 260px); }
  .upload-review-preview { width: min(240px, 74vw); margin-inline: auto; }
  .upload-wizard-actions { grid-template-columns: auto 1fr; bottom: calc(-18px - env(safe-area-inset-bottom)); margin-inline: -14px; padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); }
  .upload-wizard-actions .hint { grid-column: 1 / -1; grid-row: 1; }
  .upload-wizard-actions #directUploadNext, .upload-wizard-actions #directUploadSubmit { grid-column: 2; }
  .discover-toolbar { position: sticky; top: 0; z-index: 8; margin-inline: -10px; padding: 10px; overflow-x: auto; flex-wrap: nowrap; background: color-mix(in srgb, var(--panel, #071b10) 94%, #000); backdrop-filter: blur(12px); scrollbar-width: none; }
  .discover-toolbar::-webkit-scrollbar { display: none; }
  .discover-toolbar button { flex: 0 0 auto; min-height: 42px; }
}

@media (max-width: 430px) {
  .upload-kind-picker { grid-template-columns: 1fr; }
  .discover-like { min-width: 42px; min-height: 36px; justify-content: center; }
}