/* ==========================================================================
   MOONSHINE SHORT FILM #2026 - DESIGN SYSTEM & STYLESHEET (MY GALLERY UPDATED)
   ========================================================================== */

/* Design Tokens & CSS Variables */
@font-face {
  font-family: 'GillSansMT';
  src: url('../assets/ui/fonts/JELBJV+GillSansMT.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'GillSansMT';
  src: url('../assets/ui/fonts/PNNLPJ+GillSansMT-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'FelixTitling';
  src: url('../assets/ui/fonts/DYOYDH+FelixTitlingMT.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

:root {
  --bg-desktop: #E6E8FD;
  --phone-bg: #FFFFFF;
  --color-primary-yellow: #EBB236;
  --color-input-border: #E0E0E0;
  --gold-right: #632F01;
  --gold-gradient: linear-gradient(90deg, #EBB236 0%, #632F01 100%);
  --color-id-bg: #E0E0E0;
  --color-card: #4C4C4C;
  --color-dot-off: #E0E0E0;
  --color-text-main: #000000;
  --color-text-muted: #1E1F21;
  --color-input-bg: #E0E0E0;
  --font-main: 'Noto Sans TC', sans-serif;
  --font-heading: 'GillSansMT', 'Gill Sans MT', 'Gill Sans', sans-serif;
  --font-film: 'FelixTitling', 'Felix Titling', serif;
  --phone-width: 414px;
  --phone-height: 896px;
  --phone-radius: 40px;
  --transition-fast: 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset & Global Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: var(--font-main);
  background-color: var(--bg-desktop);
  color: var(--color-text-main);
  overflow-x: hidden;
}

/* Ambient Desktop Outer Wrapper */
.desktop-wrapper {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at 15% 25%, #EFF1FF 0%, #D5DCFE 50%, #C4CDFE 100%);
  padding: 20px;
  position: relative;
}

/* Background Soft Bokeh Effect */
.ambient-dots {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 10% 80%, rgba(255, 255, 255, 0.7) 0, transparent 15%),
    radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.6) 0, transparent 20%),
    radial-gradient(circle at 80% 90%, rgba(232, 106, 23, 0.15) 0, transparent 25%);
  pointer-events: none;
}

/* Mobile Smartphone Frame Container */
.phone-frame {
  --frame-w: min(414px, calc(100vw - 24px), calc((100dvh - 24px) * 414 / 896));
  width: var(--frame-w);
  height: calc(var(--frame-w) * 896 / 414);
  max-width: none;
  max-height: none;
  background: var(--phone-bg);
  border-radius: var(--phone-radius);
  box-shadow: 
    0 20px 40px -10px rgba(28, 30, 60, 0.25),
    0 0 0 10px rgba(255, 255, 255, 0.9),
    0 0 0 11px rgba(200, 205, 230, 0.5);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

/* ================= Header Bar ================= */
.app-header {
  padding: 32px 26px 10px 26px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: #FFFFFF;
  z-index: 20;
  position: relative;
  flex-shrink: 0;
}

.header-brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.brand-logo-img {
  display: block;
  width: 210px;
  height: auto;
  max-width: 58%;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #000000;
  line-height: 1;
}

.brand-digital {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--gold-gradient);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
}

.user-id-badge {
  font-family: var(--font-heading);
  font-size: 16px;
  color: #111111;
  background: var(--color-id-bg);
  padding: 6px 16px;
  border-radius: 999px;
  display: inline-block;
  width: fit-content;
}

.btn-works {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
}

.btn-works img {
  width: 52px;
  height: auto;
  display: block;
}

.btn-works span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: #000;
}

/* Step Views Scroll Container */
.step-container {
  flex: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
}

.step-view {
  display: none;
  width: 100%;
  min-height: 100%;
  padding: 8px 26px 18px 26px;
  flex-direction: column;
  justify-content: flex-start;
  animation: fadeIn 0.3s ease forwards;
}

.step-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.step-chrome {
  margin-top: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 8px;
}

.progress-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 0;
}

.progress-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-dot-off);
  display: block;
}

.progress-dots span.on {
  background: var(--gold-gradient);
}

.button-group {
  display: flex;
  gap: 12px;
  margin-top: 0;
  padding-top: 0;
  align-items: center;
  width: 100%;
}

.restart-link-wrapper {
  margin-top: 18px;
  text-align: center;
}

.step-view.active {
  display: flex;
}

.hidden-preview-step {
  display: none !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================= STEP 1 intro text ================= */
.intro-box {
  margin-top: 16px;
  margin-bottom: 24px;
}

.intro-box.landing-copy {
  margin-top: 48px;
  text-align: center;
}

.intro-paragraph {
  font-size: 17px;
  line-height: 1.85;
  color: #111111;
  font-weight: 400;
}

.intro-paragraph.highlight-text {
  font-weight: 700;
  color: #111111;
  margin-top: 4px;
}

/* Form Headings */
.step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.step-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold-gradient);
  display: inline-block;
  flex-shrink: 0;
}

.step-title {
  font-weight: 700;
  font-size: 22px;
  color: #000;
}

.step-label {
  display: none;
}

.step-hint {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-left: 20px;
  margin-bottom: 20px;
}

/* Inputs */
.input-wrapper {
  margin-top: 10px;
  margin-bottom: 30px;
}

.nickname-field {
  width: 100%;
  height: 54px;
  background-color: var(--color-input-bg);
  border: none;
  border-radius: 18px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 500;
  color: #111111;
  outline: none;
}

.nickname-field:focus {
  border-color: #111111;
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.error-msg {
  color: #E53935;
  font-size: 12px;
  margin-top: 6px;
  margin-left: 4px;
  display: none;
}

.error-msg.visible {
  display: block;
}

/* Buttons */
.button-group.single {
  justify-content: center;
}

.button-group.split {
  justify-content: space-between;
}

.btn-primary {
  min-width: 220px;
  height: 64px;
  padding: 0 40px;
  background: var(--gold-gradient);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 22px;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: var(--transition-fast);
}

.btn-primary:hover:not(:disabled) {
  filter: brightness(1.05);
  transform: none;
}

.btn-primary:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-icon-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--color-dark-slate);
  color: #FFFFFF;
  border: none;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.btn-icon-circle:hover {
  background-color: #333336;
  transform: rotate(45deg);
}

.btn-secondary {
  height: 40px;
  padding: 0 16px;
  background-color: #F0F0F2;
  color: #333333;
  border: 1px solid #D1D1D6;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-secondary:hover {
  background-color: #E4E4E8;
}

.btn-sm {
  height: 36px;
  padding: 0 12px;
  font-size: 12px;
}

/* ================= STEP 2: Photo Upload Dropzone ================= */
.upload-dropzone {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #E0E0E0;
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  margin-bottom: 16px;
}

.upload-dropzone:hover {
  background-color: #D4D4D4;
}

.hidden-input {
  display: none;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666666;
}

.camera-icon-wrapper {
  width: 92px;
  height: 80px;
  background: transparent;
}

.camera-asset {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: transparent;
}

.camera-svg {
  width: 100%;
  height: 100%;
  stroke: #7A7A7A;
}

.plus-icon {
  font-size: 32px;
  font-weight: 300;
  color: #333333;
  position: absolute;
  bottom: 16px;
  right: 18px;
}

.upload-preview-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.upload-preview-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reupload-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.7);
  color: #FFF;
  border: none;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  cursor: pointer;
}

.upload-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}

/* ================= 16:9 LANDSCAPE STORY CARD CAROUSEL ================= */
.cards-carousel-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 12px 0 8px;
  margin-bottom: 0;
  cursor: grab;
  user-select: none;
  scrollbar-width: none;
  flex: 1;
  min-height: 0;
}

.cards-carousel-wrapper:active {
  cursor: grabbing;
}

.cards-carousel-wrapper::-webkit-scrollbar {
  display: none;
}

.cards-carousel {
  display: flex;
  gap: 12px;
  padding: 0;
  align-items: center;
  width: max-content;
  box-sizing: content-box;
}

.cards-carousel-wrapper.large-cards .story-card,
.cards-carousel.two-options .story-card {
  flex: 0 0 auto;
  width: 78%;
  aspect-ratio: 660 / 708;
  height: auto;
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: var(--color-card);
  transform: scale(0.88);
  transform-origin: center center;
  transition: transform 0.28s ease, filter 0.28s ease;
  z-index: 1;
}

.story-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.4) brightness(0.52);
  transition: filter 0.28s ease;
}

.story-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.12) 42%, transparent 70%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 20px;
  color: #FFFFFF;
  z-index: 2;
}

.story-card-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 6px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.85);
}

.story-card-tag {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
}

.story-card-border {
  display: none;
}

.story-card.is-center {
  transform: scale(1);
  z-index: 3;
}

.story-card.is-center img {
  filter: none;
}

.scroll-hint-bar {
  text-align: center;
  font-size: 12px;
  color: #888888;
  margin-top: -12px;
  margin-bottom: 16px;
}

/* Shot Preview Canvas Box */
.preview-box {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 20px;
}

.preview-canvas-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
}

.preview-canvas,
.preview-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.preview-video {
  position: absolute;
  inset: 0;
  background: #000;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
}
.preview-video.is-playing {
  opacity: 1;
  pointer-events: auto;
}

.preview-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 8px;
  backdrop-filter: blur(6px);
}

.shot-loading.is-error .spinner {
  display: none;
}
.shot-loading.is-error {
  padding: 16px;
  text-align: center;
}

/* ================= STEP RESULT: NARROW 9:16 VERTICAL FILM CARD ================= */
.result-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  align-items: center;
}

/* Narrow 9:16 Vertical Card Box (Matches the red diagram box) */
.film-player-card {
  width: 285px;
  height: 507px;
  aspect-ratio: 9 / 16;
  background: #000000;
  border-radius: 26px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px auto;
  flex-shrink: 0;
}

.film-canvas-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#canvas-final-film {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Audio Toggle Button: Icon Only (Top Right inside 9:16 Card) */
.audio-control-bar {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
}

.audio-btn-circle {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: rgba(45, 45, 45, 0.85);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: var(--transition-fast);
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

.audio-btn-circle:hover {
  background: rgba(65, 65, 65, 0.95);
  transform: scale(1.06);
}

.result-actions {
  width: 100%;
  max-width: 320px;
  margin-top: 8px;
}

.action-download {
  width: 48px;
  height: 48px;
}

.link-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

.link-btn:hover {
  color: #111111;
}

/* ================= PERSONAL FILM GALLERY (WORKS) ================= */
.gallery-overlay {
  position: absolute;
  inset: 0;
  z-index: 26;
  background: rgba(0, 0, 0, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px 28px;
  box-sizing: border-box;
}

.gallery-overlay.hidden {
  display: none !important;
}

.gallery-sheet {
  width: 100%;
  height: 78%;
  background: #ffffff;
  border-radius: 40px;
  padding: 28px 22px 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.gallery-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gallery-title-row h3 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #000;
  margin: 0;
}

.gallery-grid-container {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.gallery-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: transparent;
  color: #000;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

.gallery-card:hover {
  transform: none;
  box-shadow: none;
}

.gallery-card-thumb {
  width: 84px;
  height: 148px;
  border-radius: 10px;
  overflow: hidden;
  background: #000000;
  flex-shrink: 0;
}

.gallery-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-card-info {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}

.gallery-card-by {
  font-family: var(--font-film);
  font-size: 13px;
  font-weight: 400;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 6px;
}

.gallery-card-theme {
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  line-height: 1.35;
  margin-bottom: 6px;
}

.gallery-card-date {
  font-size: 13px;
  color: #9a9a9a;
  margin-bottom: 12px;
}

.gallery-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-play-gallery {
  height: 40px;
  padding: 0 22px;
  border: none;
  border-radius: 22px;
  background: var(--gold-gradient);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.btn-dl-gallery {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #111111;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-dl-gallery img {
  width: 40px;
  height: 40px;
  display: block;
}

.gallery-empty {
  text-align: center;
  padding: 40px 10px;
  color: #777777;
}

/* ================= Modals & Overlay Windows ================= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.25s ease;
}

.modal-backdrop.hidden {
  display: none;
}

.modal-content {
  background: #FFFFFF;
  width: 100%;
  max-width: 380px;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  text-align: center;
}

.processing-card {
  background: #FFFFFF;
  color: #000000;
  box-shadow: none;
}

.processing-overlay {
  position: absolute;
  inset: 0;
  z-index: 18;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 132px 26px 18px;
  box-sizing: border-box;
}

.processing-overlay.hidden {
  display: none !important;
}

.processing-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.story-loader {
  position: relative;
  width: 168px;
  height: 168px;
  margin-bottom: 28px;
}

.loader-ring {
  width: 168px;
  height: 168px;
  display: block;
}

.loader-spinner {
  position: absolute;
  inset: 0;
  animation: loader-spin 1.15s linear infinite;
}

@keyframes loader-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loader-moon {
  position: absolute;
  inset: 28%;
  width: 44%;
  height: 44%;
  margin: auto;
  object-fit: contain;
  pointer-events: none;
}

.processing-overlay .processing-title {
  font-size: 22px;
  font-weight: 700;
  color: #000;
  text-align: center;
}

.processing-overlay .restart-link-wrapper {
  margin-top: 0;
}

.processing-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #000;
}

.spin-stamp {
  width: 70px;
  height: 70px;
  animation: spin 3s linear infinite;
  margin-bottom: 16px;
}

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

.processing-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

.processing-subtitle {
  font-size: 13px;
  color: #888888;
  margin-bottom: 24px;
}

.progress-bar-container {
  width: 100%;
  height: 8px;
  background: #2A2A2A;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-bar-fill {
  width: 0%;
  height: 100%;
  background: var(--color-primary-yellow);
  transition: width 0.15s linear;
}

.progress-percent {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-primary-yellow);
}

/* Share Modal */
.share-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.close-x {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #888;
}

.share-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.share-option-btn {
  height: 60px;
  border-radius: 16px;
  border: none;
  color: #FFF;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.share-option-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.fb-bg { background: #1877F2; }
.ig-bg { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.threads-bg { background: #000000; }
.copy-bg { background: #4A4A4A; }

.toast-msg {
  margin-top: 14px;
  font-size: 12px;
  color: #4CAF50;
  font-weight: 600;
}

.hidden {
  display: none !important;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.link-btn img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.btn-download-asset {
  width: 64px;
  height: 64px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.btn-download-asset img {
  width: 64px;
  height: 64px;
  display: block;
}

.audio-control-bar {
  display: none;
}

.film-player-card {
  width: min(320px, 86%);
  height: auto;
  aspect-ratio: 582 / 1034;
  background: #000000;
  border-radius: 28px;
}

/* Spinner Utility */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: #FFF;
  animation: spin 0.8s linear infinite;
}

/* Mobile full width adjustments */
@media (max-width: 480px) {
  .desktop-wrapper {
    padding: 0;
    background: #FFFFFF;
    min-height: 100dvh;
  }
  
  .phone-frame {
    --frame-w: min(414px, 100vw, calc(100dvh * 414 / 896));
    width: var(--frame-w);
    height: calc(var(--frame-w) * 896 / 414);
    border-radius: 0;
    box-shadow: none;
  }
}

  .film-player-card {
    width: 260px;
    height: 462px;
  }
}