:root {
  --bg: #f7f7f4;
  --ink: #090909;
  --muted: #6c6c66;
  --line: #e4e2dc;
  --panel: #ffffff;
  --accent: #19d3c5;
  --accent-dark: #0ea99e;
  --danger: #c23a3a;
  color-scheme: light;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  letter-spacing: 0;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
main { width: min(1180px, calc(100vw - 32px)); margin: 0 auto 64px; }
.nav {
  width: min(1180px, calc(100vw - 32px));
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 850; }
.brand span { width: 24px; height: 24px; display: inline-block; background: var(--ink); border-radius: 6px; box-shadow: 7px 7px 0 var(--accent); }
nav { display: flex; align-items: center; gap: 18px; color: var(--muted); font-weight: 700; }
.credit-pill { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 8px 12px; font-weight: 800; }
.test-mode-banner {
  margin: 18px 0 0;
  border: 1px solid rgba(25, 211, 197, .45);
  background: #effffb;
  color: #09675f;
  border-radius: 8px;
  padding: 12px 14px;
  font-weight: 900;
}
.hero {
  min-height: calc(100vh - 130px);
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.hero h1, .page-head h1 { font-size: 78px; line-height: 0.95; margin: 8px 0 18px; max-width: 850px; }
.sub { font-size: 22px; color: var(--muted); max-width: 620px; line-height: 1.5; }
.eyebrow { text-transform: uppercase; color: var(--accent-dark); font-weight: 900; letter-spacing: 0; font-size: 13px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.button, button {
  border: 0;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  font-weight: 850;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button:disabled { opacity: .45; cursor: not-allowed; }
.primary { background: var(--ink); color: white; }
.secondary { background: white; color: var(--ink); border: 1px solid var(--line); }
.ghost { background: transparent; color: var(--muted); padding: 0 10px; border: 1px solid var(--line); }
.tiny { min-height: 34px; font-size: 13px; }
.product-shot {
  min-height: 520px;
  background: #0a0a0a;
  border-radius: 8px;
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.18);
}
.video-tile {
  background: linear-gradient(135deg, #202020, #565650);
  color: white;
  border-radius: 8px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
}
.video-tile.hot { background: linear-gradient(135deg, #111, #19d3c5); }
.video-tile span { font-size: 58px; font-weight: 950; }
.title-stack {
  grid-column: span 2;
  display: grid;
  gap: 10px;
}
.title-stack p {
  margin: 0;
  background: white;
  border-radius: 8px;
  padding: 18px;
  font-weight: 850;
}
section { margin-top: 56px; }
.band, .auth-panel, .upload-box, .thumbnail-lab {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
}
.grid-3, .pricing-grid, .summary-grid, .moment-grid, .columns, .copy-columns, .generated-grid, .platform-grid {
  display: grid;
  gap: 16px;
}
.grid-3, .pricing-grid { grid-template-columns: repeat(3, 1fr); }
.pricing-grid { align-items: stretch; }
.summary-grid { grid-template-columns: repeat(5, 1fr); }
.moment-grid { grid-template-columns: repeat(3, 1fr); }
.columns { grid-template-columns: repeat(3, 1fr); align-items: start; }
.copy-columns { grid-template-columns: repeat(3, 1fr); align-items: start; }
.generated-grid { grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
.split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 28px;
  align-items: center;
}
.price-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.price-row div, .summary-grid article, .moment-card, .list-card, .pricing-grid article, .run-row, .thumb-card, .selected-text-panel, .settings-grid, .platform-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}
.price-row strong, .pricing-grid strong { display: block; font-size: 46px; }
.price-card { display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.price-card.recommended { border-color: var(--accent); box-shadow: 0 18px 45px rgba(25, 211, 197, .14); }
.price-card .price { font-size: 54px; line-height: .95; font-weight: 950; letter-spacing: 0; }
.purchase-note { margin: -4px 0 2px; color: var(--muted); font-weight: 800; }
.credits-meta { margin: 0; font-size: 21px; font-weight: 900; color: var(--ink); }
.price-card small { color: var(--muted); font-weight: 800; }
.price-card .primary { width: 100%; margin-top: auto; }
.subtle-note { margin: 6px 0; color: var(--muted); font-size: 18px; font-weight: 750; }
.muted { color: var(--muted); line-height: 1.55; }
.error { color: var(--danger); font-weight: 800; min-height: 24px; }
.auth-panel { width: min(520px, 100%); margin: 80px auto; }
form { display: grid; gap: 12px; margin-top: 22px; }
input, textarea, select {
  min-height: 52px;
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 0 14px;
  background: white;
  color: var(--ink);
}
textarea {
  width: 100%;
  padding: 14px;
  line-height: 1.4;
  resize: vertical;
}
.upload-box {
  min-height: 420px;
  display: grid;
  place-items: center;
  text-align: center;
  border-style: dashed;
}
.upload-box.dragging { border-color: var(--accent-dark); background: #effffb; }
.upload-icon { width: 70px; height: 70px; border-radius: 50%; background: var(--ink); color: white; display: grid; place-items: center; font-size: 38px; }
.progress { width: min(520px, 90%); height: 10px; background: #eceae5; border-radius: 999px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); transition: width .2s ease; }
.processing { min-height: 70vh; display: grid; place-items: center; text-align: center; align-content: center; gap: 18px; }
.spinner { width: 76px; height: 76px; border-radius: 50%; border: 6px solid #d9d8d0; border-top-color: var(--ink); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.steps { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.steps span { background: white; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; color: var(--muted); font-weight: 700; }
.summary-grid span { color: var(--muted); font-size: 13px; font-weight: 900; text-transform: uppercase; }
.summary-grid p { font-weight: 750; line-height: 1.45; }
.platform-grid { grid-template-columns: repeat(3, 1fr); }
.platform-card { text-align: left; min-height: 132px; display: grid; gap: 8px; align-content: start; }
.platform-card strong { font-size: 20px; }
.platform-card span, .platform-card small, .micro { color: var(--muted); line-height: 1.35; }
.platform-card.selected, .text-choice.selected { outline: 3px solid var(--accent); border-color: transparent; }
.inline-control {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  font-weight: 800;
}
.inline-control select, .setting-control select { min-height: 42px; }
.frame-preview {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 8px;
  background: linear-gradient(135deg, #111, #73736c);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: end;
  padding: 12px;
  color: white;
  font-weight: 900;
}
.moment-card.selected { outline: 3px solid var(--accent); }
.moment-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.moment-meta strong { font-size: 26px; }
.copy-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding: 12px 0; }
.copy-row p { margin: 0; line-height: 1.35; }
.text-choice { display: grid; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.text-choice p { margin: 8px 0; font-weight: 800; line-height: 1.35; word-break: break-word; }
.text-choice small { color: var(--muted); line-height: 1.35; }
.tag { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; font-size: 12px; font-weight: 900; color: var(--muted); }
.mini-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.selected-text-panel { display: grid; gap: 14px; }
.cover-text-tools { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.warning { color: #8a5700; background: #fff6dc; border: 1px solid #f0d38a; border-radius: 8px; padding: 10px 12px; margin: 0; font-weight: 850; line-height: 1.35; }
.settings-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 14px; align-items: end; }
.setting-control { display: grid; gap: 8px; font-weight: 850; color: var(--muted); }
.thumbnail-lab { display: grid; gap: 14px; }
.selected-frame { width: min(520px, 100%); aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); margin-top: 10px; background: #111; display: block; }
.selected-frame.vertical { aspect-ratio: 9 / 16; width: min(280px, 100%); }
.reframe-editor { display: grid; gap: 14px; margin-top: 12px; }
.reframe-stage {
  position: relative;
  width: min(560px, 100%);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #111;
  touch-action: none;
  cursor: grab;
}
.reframe-stage.vertical { width: min(300px, 100%); aspect-ratio: 9 / 16; }
.reframe-stage:active { cursor: grabbing; }
.reframe-stage img {
  position: absolute;
  display: block;
  max-width: none;
  max-height: none;
  user-select: none;
  pointer-events: none;
}
.reframe-controls {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
.reframe-controls input[type="range"] { padding: 0; min-height: 42px; }
.settings-summary { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.settings-summary span { border: 1px solid var(--line); background: #fafaf7; border-radius: 999px; padding: 7px 10px; color: var(--muted); font-weight: 800; font-size: 13px; }
.thumb-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #111; }
.thumb-card img.vertical { aspect-ratio: 9 / 16; width: min(260px, 100%); }
.thumb-card div { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.result-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.referral-panel { display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px; align-items: center; }
.referral-link { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.thumbnail-loader {
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: 22px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0a0a0a;
  color: white;
  padding: 18px;
  overflow: hidden;
}
.loader-preview {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 24%, rgba(25, 211, 197, .34), transparent 24%),
    linear-gradient(135deg, #171717, #40403a 55%, #111);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 0 36px rgba(25, 211, 197, .2);
}
.loader-preview.vertical { aspect-ratio: 9 / 16; width: min(210px, 100%); justify-self: center; }
.loader-glow { position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,.14), transparent); animation: loaderGlow 2.8s ease-in-out infinite; }
.loader-subject { position: absolute; left: 10%; bottom: 16%; width: 34%; height: 52%; border-radius: 999px 999px 20px 20px; background: rgba(255,255,255,.18); animation: loaderPulse 1.8s ease-in-out infinite; }
.loader-line { position: absolute; left: 52%; height: 13%; border-radius: 999px; background: rgba(255,255,255,.22); animation: loaderPulse 1.8s ease-in-out infinite; }
.loader-line.one { top: 28%; width: 34%; }
.loader-line.two { top: 48%; width: 26%; animation-delay: .25s; }
.loader-preview.vertical .loader-subject { left: 28%; top: 18%; width: 44%; height: 34%; }
.loader-preview.vertical .loader-line { left: 18%; width: 64%; }
.loader-preview.vertical .loader-line.one { top: 58%; }
.loader-preview.vertical .loader-line.two { top: 70%; width: 52%; left: 24%; }
.loader-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -18%;
  height: 18%;
  background: linear-gradient(to bottom, transparent, rgba(25, 211, 197, .72), transparent);
  filter: blur(.2px);
  animation: scanY 2.2s linear infinite;
}
.loader-settings { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 16px; }
.loader-settings span { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); border-radius: 999px; padding: 7px 10px; color: rgba(255,255,255,.78); font-weight: 800; font-size: 13px; }
.loader-steps { position: relative; min-height: 28px; color: rgba(255,255,255,.8); font-weight: 850; }
.loader-steps span { position: absolute; opacity: 0; animation: loaderStep 16s linear infinite; animation-delay: calc(var(--i) * 2s); }
@keyframes loaderGlow { 0%, 100% { transform: translateX(-45%); opacity: .35; } 50% { transform: translateX(45%); opacity: .75; } }
@keyframes loaderPulse { 0%, 100% { opacity: .2; transform: scale(1); } 50% { opacity: .42; transform: scale(1.02); } }
@keyframes scanY { from { transform: translateY(-20%); } to { transform: translateY(680%); } }
@keyframes loaderStep { 0%, 10% { opacity: 0; transform: translateY(6px); } 13%, 23% { opacity: 1; transform: translateY(0); } 27%, 100% { opacity: 0; transform: translateY(-6px); } }
.history-list { display: grid; gap: 10px; }
.run-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; }
.run-row.rich { grid-template-columns: 1fr auto auto auto; }
.run-row div { display: grid; gap: 4px; }
.run-row span { color: var(--muted); }
details { border-top: 1px solid var(--line); padding: 16px 0; }
summary { font-weight: 850; cursor: pointer; }

@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr; }
  nav { flex-wrap: wrap; }
  .hero, .split, .summary-grid, .moment-grid, .columns, .copy-columns, .generated-grid, .grid-3, .pricing-grid, .platform-grid, .settings-grid, .referral-panel, .referral-link { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: 34px; }
  .hero h1, .page-head h1 { font-size: 46px; }
  .product-shot { min-height: 420px; }
  .run-row, .run-row.rich { grid-template-columns: 1fr; }
  .thumbnail-loader { grid-template-columns: 1fr; }
  .price-card .price { font-size: 46px; }
  .price-card .primary { width: 100%; }
  .reframe-controls { grid-template-columns: 1fr; }
}