/* freemockup.video app refresh: aligns /app with the white, minimal landing page. */
:root {
  --fm-bg: #ffffff;
  --fm-panel: rgba(255, 255, 255, 0.92);
  --fm-soft: #f5f5f5;
  --fm-soft-2: #eeeeee;
  --fm-border: rgba(20, 20, 20, 0.10);
  --fm-border-strong: rgba(20, 20, 20, 0.16);
  --fm-text: #141414;
  --fm-muted: #707070;
  --fm-black: #111111;
  --fm-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  --fm-shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.08);
}

html,
body,
#__next {
  min-height: 100%;
  background: var(--fm-bg) !important;
  color: var(--fm-text) !important;
}

body {
  font-family: saans, "saans Fallback", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* App shell */
#__next > div[style] {
  background: var(--fm-bg) !important;
  color: var(--fm-text) !important;
  padding: 24px !important;
  gap: 24px !important;
}

#__next > div[style] > div:first-child {
  gap: 18px !important;
}

/* Top bar */
#__next h1 {
  font-size: 22px !important;
  letter-spacing: -0.03em !important;
}

#__next h1 span {
  background: none !important;
  -webkit-text-fill-color: var(--fm-text) !important;
  color: var(--fm-text) !important;
}

#__next h1 + span {
  background: var(--fm-black) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  padding: 4px 9px !important;
  letter-spacing: 0.06em !important;
}

/* Generic button reset for inline-styled controls */
#__next button {
  border-radius: 999px !important;
  border-color: var(--fm-border) !important;
  box-shadow: none !important;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, color .18s ease !important;
}

#__next button:not(:disabled):hover {
  transform: translateY(-1px) !important;
}

#__next button[disabled] {
  opacity: 0.45 !important;
}

/* Convert dark inline surfaces to landing-page style light panels. */
#__next [style*="background-color: rgb(10, 10, 10)"],
#__next [style*="background-color: #0a0a0a"],
#__next [style*="background-color: rgb(17, 17, 17)"],
#__next [style*="background-color: rgb(18, 18, 18)"],
#__next [style*="background-color: rgb(20, 20, 20)"],
#__next [style*="background-color: rgb(24, 24, 24)"],
#__next [style*="background-color: rgb(26, 26, 26)"],
#__next [style*="background: rgb(26, 26, 26)"],
#__next [style*="background: rgb(34, 34, 34)"],
#__next [style*="background-color: rgb(34, 34, 34)"],
#__next [style*="background: rgb(37, 37, 37)"],
#__next [style*="background-color: rgb(37, 37, 37)"] {
  background: var(--fm-panel) !important;
  background-color: var(--fm-panel) !important;
  color: var(--fm-text) !important;
  border-color: var(--fm-border) !important;
}

#__next [style*="color: rgb(240, 240, 240)"],
#__next [style*="color: rgb(224, 224, 224)"],
#__next [style*="color: rgb(192, 192, 192)"] {
  color: var(--fm-text) !important;
}

#__next [style*="color: rgb(160, 160, 160)"],
#__next [style*="color: rgb(128, 128, 128)"],
#__next [style*="color: rgb(112, 112, 112)"] {
  color: var(--fm-muted) !important;
}

/* Header action buttons */
#__next [title="Select an animation to export"],
#__next button:has(span) {
  background: var(--fm-panel) !important;
  color: var(--fm-text) !important;
  border: 1px solid var(--fm-border) !important;
}

#__next button:not(:disabled)[style*="What's New"],
#__next button:not(:disabled):has(span:first-child) {
  background: var(--fm-soft) !important;
}

/* Left animation picker panel */
#__next .animations-panel-scroll,
#__next .animations-panel-scroll * {
  scrollbar-color: rgba(0,0,0,.18) transparent;
}

#__next .animations-panel-scroll::-webkit-scrollbar {
  width: 8px !important;
}

#__next .animations-panel-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.18) !important;
  border-radius: 999px !important;
}

#__next .animations-panel-scroll img,
#__next [style*="Mobile horizontal"] img {
  border-radius: 12px !important;
}

/* The sidebar card and template tiles */
#__next [style*="width: 280px"],
#__next [style*="width: 260px"],
#__next [style*="min-width: 280px"] {
  background: var(--fm-panel) !important;
  border: 1px solid var(--fm-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--fm-shadow-soft) !important;
}

#__next [style*="border-radius: 8px"][style*="cursor: pointer"],
#__next [style*="border-radius: 10px"][style*="cursor: pointer"] {
  border-radius: 14px !important;
}

/* Preview area */
#__next .aspect-ratio-wrapper {
  background: #f4f4f4 !important;
  border: 1px solid var(--fm-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--fm-shadow) !important;
  overflow: hidden !important;
}

#__next canvas {
  border-radius: 24px !important;
}

/* Time pill */
#__next .duration-tag,
#__next .duration-tags,
#__next [style*="NaN:NaN"] {
  background: rgba(255,255,255,.82) !important;
  color: var(--fm-text) !important;
  border: 1px solid var(--fm-border) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
}

/* Bottom tool dock */
#__next [style*="Device"],
#__next [style*="Upload"],
#__next [style*="Scene"] {
  color: var(--fm-text) !important;
}

#__next [style*="position: absolute"][style*="bottom"] [style*="border"]:not(button[style*="width: 40px"][style*="height: 40px"][style*="opacity: 0.9"]):not(button[role="switch"]) {
  background: rgba(255,255,255,.9) !important;
  border-color: var(--fm-border) !important;
  box-shadow: var(--fm-shadow-soft) !important;
  backdrop-filter: blur(18px) !important;
}

/* Selected controls and primary actions */
#__next button[style*="linear-gradient"],
#__next [style*="background: linear-gradient"],
#__next [style*="background-image: linear-gradient"] {
  background: var(--fm-black) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: var(--fm-black) !important;
  box-shadow: none !important;
}

/* Keep export/action buttons crisp black when enabled. */
#__next button:not(:disabled)[style*="Export"] {
  background: var(--fm-black) !important;
  color: #fff !important;
}

/* Modal and export overlays should feel like the landing page too. */
.export-modal,
.credit-purchase-modal,
.cookie-consent-modal,
.verification-modal,
.export-queue {
  background: #fff !important;
  color: var(--fm-text) !important;
  border: 1px solid var(--fm-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--fm-shadow) !important;
}

.export-overlay,
.credit-purchase-overlay {
  background: rgba(255,255,255,.72) !important;
}

/* Mobile keeps the same softer surfaces without cramping the tool. */
@media (max-width: 900px) {
  #__next > div[style] {
    padding: 14px !important;
    gap: 14px !important;
  }

  #__next h1 {
    font-size: 18px !important;
  }

  #__next .aspect-ratio-wrapper {
    border-radius: 18px !important;
  }
}

/* Late corrections after broad inline overrides. */
#__next h1 span,
#__next h1 span[style*="linear-gradient"] {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--fm-text) !important;
  color: var(--fm-text) !important;
}

/* Frosted bottom dock. */
#__next div[style*="backdrop-filter: blur(80px)"] {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--fm-border) !important;
  border-radius: 22px !important;
  box-shadow: var(--fm-shadow-soft) !important;
  color: var(--fm-text) !important;
}

#__next div[style*="backdrop-filter: blur(80px)"] svg,
#__next div[style*="backdrop-filter: blur(80px)"] span,
#__next div[style*="backdrop-filter: blur(80px)"] div {
  color: var(--fm-text) !important;
}

/* Move the Device / Upload / Scene dock from the bottom into a left vertical rail. */
#__next div[style*="flex-shrink: 0"][style*="padding: 20px 0px"]:has(div[style*="backdrop-filter: blur(80px)"]) {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 180 !important;
}

#__next div[style*="flex-shrink: 0"][style*="padding: 20px 0px"]:has(div[style*="backdrop-filter: blur(80px)"]) div[style*="backdrop-filter: blur(80px)"]:not([style*="width: 280px"]) {
  flex-direction: column !important;
  gap: 10px !important;
  padding: 14px 10px !important;
  border-radius: 18px !important;
}

#__next div[style*="flex-shrink: 0"][style*="padding: 20px 0px"]:has(div[style*="backdrop-filter: blur(80px)"]) div[style*="backdrop-filter: blur(80px)"]:not([style*="width: 280px"]) > div,
#__next div[style*="flex-shrink: 0"][style*="padding: 20px 0px"]:has(div[style*="backdrop-filter: blur(80px)"]) div[style*="backdrop-filter: blur(80px)"]:not([style*="width: 280px"]) > div > div {
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}

#__next div[style*="flex-shrink: 0"][style*="padding: 20px 0px"]:has(div[style*="backdrop-filter: blur(80px)"]) div[style*="backdrop-filter: blur(80px)"]:not([style*="width: 280px"]) > div > div {
  width: 64px !important;
  min-width: 64px !important;
}

#__next div[style*="flex-shrink: 0"][style*="padding: 20px 0px"]:has(div[style*="backdrop-filter: blur(80px)"]) div[style*="position: absolute"][style*="bottom: 100%"][style*="width: 280px"] {
  left: calc(100% + 12px) !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 360px !important;
  max-height: min(620px, calc(100vh - 140px)) !important;
  overflow: hidden !important;
}

#__next div[style*="position: absolute"][style*="bottom: 100%"][style*="width: 280px"] > div {
  align-items: stretch !important;
  width: 100% !important;
}

#__next div[style*="position: absolute"][style*="bottom: 100%"][style*="width: 280px"] > div > div:first-child {
  width: auto !important;
  padding: 18px 22px 12px !important;
  border-bottom: 1px solid var(--fm-border) !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

#__next div[style*="position: absolute"][style*="bottom: 100%"][style*="width: 280px"] > div > div:last-child {
  width: auto !important;
  padding: 18px 22px 22px !important;
  overflow: auto !important;
}

#__next div[style*="position: absolute"][style*="bottom: 100%"][style*="width: 280px"] > div > div:last-child > div {
  width: 100% !important;
}

#__next div[style*="position: absolute"][style*="bottom: 100%"][style*="width: 280px"] > div > div:last-child > div > div {
  width: auto !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
}

#__next div[style*="position: absolute"][style*="bottom: 100%"][style*="width: 280px"] > div > div:last-child > div > div > div {
  width: auto !important;
}

#__next div[style*="position: absolute"][style*="bottom: 100%"][style*="width: 280px"] [style*="display: flex"][style*="align-items: center"] {
  min-width: 0 !important;
}

#__next div[style*="position: absolute"][style*="bottom: 100%"][style*="width: 280px"] [style*="display: flex"][style*="align-items: center"] > * {
  flex-shrink: 0 !important;
}

/* Make the animation panel read as one composed card. */
#__next div:has(> .animations-panel-scroll) {
  background: transparent !important;
}

#__next .animations-panel-scroll {
  background: transparent !important;
}

/* Light selected template check/duration chips. */
#__next [style*="border-radius: 50%"] {
  border-color: rgba(255,255,255,.75) !important;
}

/* Fullscreen button: crisp floating icon on the preview. */
#__next button[title*="Fullscreen"],
#__next button[aria-label*="Fullscreen"],
#__next button[style*="bottom: 16px"][style*="right: 16px"] {
  background: rgba(255,255,255,.88) !important;
  color: var(--fm-text) !important;
  border: 1px solid var(--fm-border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
}

/* Selected segmented controls stay high-contrast on the new light theme. */
#__next button[style*="background: rgb(10, 10, 10)"],
#__next button[style*="background-color: rgb(10, 10, 10)"],
#__next button[style*="background: rgb(17, 17, 17)"],
#__next button[style*="background-color: rgb(17, 17, 17)"],
#__next button[style*="background: rgb(0, 0, 0)"],
#__next button[style*="background-color: rgb(0, 0, 0)"] {
  color: #fff !important;
}

#__next button[style*="background: rgb(10, 10, 10)"] *,
#__next button[style*="background-color: rgb(10, 10, 10)"] *,
#__next button[style*="background: rgb(17, 17, 17)"] *,
#__next button[style*="background-color: rgb(17, 17, 17)"] *,
#__next button[style*="background: rgb(0, 0, 0)"] *,
#__next button[style*="background-color: rgb(0, 0, 0)"] * {
  color: #fff !important;
}

/* Scene drawer: keep color swatches and transparency controls visible on white cards. */
#__next button[style*="width: 40px"][style*="height: 40px"][style*="opacity: 0.9"] {
  border: 2px solid rgba(20, 20, 20, 0.22) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 8px 22px rgba(0, 0, 0, 0.10) !important;
}

#__next button[style*="width: 40px"][style*="height: 40px"][style*="opacity: 0.9"][style*="background-color: rgb(10, 10, 10)"],
#__next button[style*="width: 40px"][style*="height: 40px"][style*="opacity: 0.9"][style*="background-color: rgb(17, 17, 17)"],
#__next button[style*="width: 40px"][style*="height: 40px"][style*="opacity: 0.9"][style*="background-color: rgb(0, 0, 0)"] {
  background: #111 !important;
  background-color: #111 !important;
}

#__next button[style*="width: 40px"][style*="height: 40px"][style*="opacity: 0.9"][style*="background-color: rgb(255, 255, 255)"],
#__next button[style*="width: 40px"][style*="height: 40px"][style*="opacity: 0.9"][style*="background-color: white"],
#__next button[style*="width: 40px"][style*="height: 40px"][style*="opacity: 0.9"][style*="background-color: #fff"] {
  background-color: #fff !important;
  border-color: rgba(20, 20, 20, 0.30) !important;
}

#__next input[type="range"] {
  accent-color: var(--fm-black) !important;
}

#__next button[role="switch"] {
  border: 2px solid var(--fm-black) !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 4px 14px rgba(0,0,0,.12) !important;
}

#__next button[role="switch"][aria-checked="true"] {
  background: var(--fm-black) !important;
}

#__next button[role="switch"] > span {
  background: var(--fm-black) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.24) !important;
}

#__next button[role="switch"][aria-checked="true"] > span {
  background: #fff !important;
}

/* App workspace: keep the animation selector on the right of the preview. */
@media (min-width: 1201px) {
  #__next div:has(> .animations-panel-scroll) {
    order: 2 !important;
    margin-left: 12px !important;
    margin-right: 0 !important;
  }
}