/* VidMobi · Aurora theme, part 2: screens
   Home, discover, creator, history, templates, commerce, auth, profile,
   documents, overlays, states, responsive. */

/* ---------- 6 Home ----------------------------------------------------- */

.home-hero {
  position: relative;
  height: 300px;
  overflow: hidden;
  /* The artwork sits on this gradient, so the hero still reads as an image
     while the poster or video is decoding, or if it never arrives. */
  background:
    radial-gradient(130% 95% at 70% 12%, #5B3A48 0%, #2A1C26 44%, var(--ink-0) 100%);
}
.home-hero video,
.home-hero .hero-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-fade {
  position: absolute;
  inset: auto 0 0;
  height: 190px;
  background: linear-gradient(#0000 0%, #0A0B0Dcc 56%, var(--ink-0) 100%);
  pointer-events: none;
}
.hero-content {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 96px;
}
.hero-content strong {
  display: block;
  font-size: var(--t-display);
  font-weight: var(--w-black);
  letter-spacing: -.03em;
  line-height: 1.06;
  text-wrap: balance;
}
.hero-content > span {
  display: block;
  margin-top: 8px;
  color: #D6DAE3;
  font-size: var(--t-body);
  max-width: 26ch;
}
.hero-dots {
  position: absolute;
  left: 18px;
  bottom: 24px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.hero-dots:empty { display: none; }
.hero-dots button {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
}
.hero-dots button::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: #ffffff66;
  transition: width .2s var(--ease), background .2s var(--ease);
}
.hero-dots button[aria-current="true"]::before { width: 16px; background: #fff; }

/* Top bar inside the hero: wordmark, balance, pro. */
.hero-top {
  position: absolute;
  inset: 14px 14px auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-brand {
  margin-right: auto;
  font-size: 15px;
  font-weight: var(--w-black);
  letter-spacing: -.02em;
}
.pro-badge {
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--sig);
  color: var(--sig-ink);
  font-size: var(--t-label);
  font-weight: var(--w-black);
}
.hero-credits {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: #0A0B0D8c;
  backdrop-filter: blur(8px);
  color: var(--tx-1);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

/* The three creation entries sit below the hero, in their own row. They used
   to overlap it by 64px, which covered the bottom of the artwork and made the
   row look like a floating panel rather than navigation. */
.home-tools {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 14px 0;
}
.home-tool {
  display: grid;
  gap: 7px;
  justify-items: start;
  align-content: center;
  min-height: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--ink-2);
  text-align: left;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.home-tool:hover { border-color: var(--line-strong); background: var(--ink-3); }
.home-tool .tool-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--ink-3);
  color: var(--tx-2);
}
.home-tool .tool-icon svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-tool .tool-caption {
  font-size: var(--t-label);
  font-weight: var(--w-med);
  line-height: 1.22;
  letter-spacing: -.005em;
}
/* The image-to-video entry is the product's main job, so it carries the
   accent and the other two stay quiet. */
.home-tool-image {
  border-color: var(--sig-line);
  background: var(--sig-wash);
}
.home-tool-image .tool-icon {
  border-color: var(--sig-line);
  background: #FF3B5C2e;
  color: var(--sig-hi);
}

/* Generated hero animations still play if the backend supplies them. */
.tool-icon.native-animation-ready { background: none; }
.tool-icon svg { display: block; }

.category-row {
  display: flex;
  gap: 7px;
  padding: 13px var(--gut) 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.category-row::-webkit-scrollbar { display: none; }

/* Template grid. Two columns on phones, more on wide screens. */
.template-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 14px var(--gut);
}
.template-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ink-2);
  text-align: left;
  transition: transform .18s var(--ease);
}
.template-card:active { transform: scale(.985); }
.template-card > img,
.template-card > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.template-card .preview-poster-fallback { display: none; }
.template-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 64%;
  background: linear-gradient(#0000, #0A0B0De0);
  pointer-events: none;
}
/* library.js renders the caption as .template-info > strong + span inside the
   card button. The detail page has its own .template-info, which is why the
   card variant is scoped to the card. */
.template-card .template-info {
  position: absolute;
  z-index: 1;
  left: 10px;
  right: 10px;
  bottom: 9px;
}
.template-card .template-info strong {
  display: block;
  color: #fff;
  font-size: var(--t-label);
  font-weight: var(--w-med);
  line-height: 1.25;
}
.template-card .template-info span {
  display: block;
  margin-top: 2px;
  color: #ffffffa8;
  font-size: var(--t-micro);
  font-weight: var(--w-reg);
}
/* The rail is narrow; its captions would collide, so only the title shows. */
.discover-rail .template-card .template-info span { display: none; }
.template-card .category,
.template-card .template-title {
  position: absolute;
  z-index: 1;
  left: 10px;
  right: 10px;
}
.template-card .category {
  bottom: 30px;
  color: #ffffffa8;
  font-size: var(--t-micro);
  font-weight: var(--w-med);
}
.template-card .template-title {
  bottom: 9px;
  color: #fff;
  font-size: var(--t-label);
  font-weight: var(--w-med);
  line-height: 1.2;
}
.template-badge {
  position: absolute;
  z-index: 1;
  left: 9px;
  top: 9px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--sig);
  color: var(--sig-ink);
  font-size: var(--t-micro);
  font-weight: var(--w-black);
  letter-spacing: .02em;
  display: grid;
  place-items: center;
}
.card-favorite {
  position: absolute;
  z-index: 2;
  right: 7px;
  top: 7px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  background: #0A0B0D8c;
  backdrop-filter: blur(6px);
  color: #fff;
}
.card-favorite[aria-pressed="true"] { color: var(--sig-hi); }
.hero-content, .hero-brand { text-shadow: 0 1px 12px #00000059; }

/* ---------- 7 Discover ------------------------------------------------- */

.discover-tabs {
  display: flex;
  gap: 26px;
  padding: 8px var(--gut) 0;
}
.discover-tabs button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: var(--tap);
  color: var(--tx-3);
  font-size: var(--t-h3);
  font-weight: var(--w-med);
}
.discover-tabs button.active { color: var(--tx-1); }
.discover-tabs button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background: var(--sig);
}
.clock-mark, .heart-mark { display: grid; place-items: center; }

.discover-rail {
  display: flex;
  gap: 10px;
  padding: 16px var(--gut);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
/* When no template is marked featured the rail has nothing to show. It must
   collapse rather than reserve its height as a black band between the tabs
   and the grid. */
.discover-rail:empty { display: none; }
.discover-rail::-webkit-scrollbar { display: none; }
.discover-rail > * {
  flex: 0 0 156px;
  scroll-snap-align: start;
}
.discover-subhead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px var(--gut) 0;
}
.discover-subhead strong { font-size: var(--t-h2); font-weight: var(--w-semi); letter-spacing: -.018em; }
.discover-subhead button { margin-left: auto; color: var(--sig-hi); font-size: var(--t-label); font-weight: var(--w-med); }

/* Masonry keeps the varying media heights the library produces. */
.masonry {
  columns: 2;
  column-gap: 10px;
  padding: 14px var(--gut);
}
.masonry > * {
  break-inside: avoid;
  margin-bottom: 10px;
  width: 100%;
}

/* ---------- 8 Creator -------------------------------------------------- */

.creator-medium {
  display: flex;
  gap: 4px;
  margin: 16px var(--gut) 0;
  padding: 4px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--ink-1);
}
.creator-medium button {
  flex: 1;
  min-height: 40px;
  border-radius: var(--r-ctl);
  color: var(--tx-2);
  font-size: var(--t-body);
  font-weight: var(--w-med);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.creator-medium button.active {
  background: var(--tx-1);
  color: var(--ink-0);
  font-weight: var(--w-bold);
}

.mode-tabs {
  display: flex;
  gap: 7px;
  padding: 12px var(--gut) 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.mode-tabs::-webkit-scrollbar { display: none; }
.mode-tab {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--tx-3);
  font-size: var(--t-label);
  font-weight: var(--w-med);
  white-space: nowrap;
}
.mode-tab.active { border-color: transparent; background: var(--ink-3); color: var(--tx-1); }

.creator-scroll { padding-bottom: 120px; }

/* Each control group is a numbered step with a heading. */
.step { margin: 20px var(--gut) 0; }
.step-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
}
.step-head strong {
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  letter-spacing: -.008em;
}
.step-head span { margin-left: auto; color: var(--tx-3); font-size: var(--t-label); }

/* Model selector. */
.selector-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 56px;
  padding: 0 13px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--ink-2);
  text-align: left;
  transition: border-color .16s var(--ease);
}
.selector-row:hover { border-color: var(--line-strong); }
.model-glyph {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--sig), #FF7A5C);
  color: #fff;
  font-size: var(--t-label);
  font-weight: var(--w-black);
}
.selector-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.selector-value {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.selector-value strong {
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selector-value small { color: var(--tx-2); font-size: var(--t-label); }
.selector-row .chevron { margin-left: auto; color: var(--tx-3); flex: none; display: grid; }

/* Upload. */
.upload-area { display: grid; gap: 10px; }
.upload-button {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 26px 14px;
  border: 1px dashed #2E3340;
  border-radius: var(--r-card);
  background: #101218;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.upload-button:hover { border-color: var(--sig-line); background: var(--ink-1); }
.upload-symbol {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--ink-3);
  color: var(--tx-1);
  font-size: 24px;
  line-height: 1;
}
.upload-button strong { font-size: 14.5px; font-weight: var(--w-bold); }
.upload-button small { color: var(--tx-2); font-size: var(--t-label); }

.upload-preview { display: flex; gap: 8px; flex-wrap: wrap; }
.upload-preview:empty { display: none; }
/* Once images are attached the preview becomes a scrolling rail, so a row of
   ten uploads cannot push the form down the page. */
.upload-area.has-image .upload-preview {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.upload-area.has-image .upload-preview::-webkit-scrollbar { display: none; }
.upload-thumbnail {
  position: relative;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: var(--r-ctl);
  overflow: hidden;
  background: var(--ink-3);
}
.upload-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.upload-remove {
  position: absolute;
  right: 3px;
  top: 3px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: #0A0B0Dcc;
  color: #fff;
  font-size: 13px;
  line-height: 1;
}
.upload-index {
  position: absolute;
  left: 3px;
  bottom: 3px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: #0A0B0Dcc;
  color: #fff;
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
}
.upload-count { color: var(--tx-3); font-size: var(--t-label); }
.upload-count:empty { display: none; }

/* Prompt. */
.prompt-section { display: grid; gap: 8px; }
.prompt-section > label { font-size: var(--t-body); font-weight: var(--w-bold); }
.prompt-box {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--ink-2);
  padding: 13px;
  transition: border-color .16s var(--ease);
}
.prompt-box:focus-within { border-color: var(--sig-line); }
.prompt-box textarea {
  display: block;
  width: 100%;
  min-height: 76px;
  border: 0;
  background: transparent;
  color: var(--tx-1);
  font-size: var(--t-body-s);
  line-height: 1.5;
  resize: vertical;
}
.prompt-box textarea::placeholder { color: var(--tx-3); }
.prompt-box textarea:focus { outline: none; }
.prompt-meta {
  display: flex;
  align-items: center;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  color: var(--tx-3);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
}
.prompt-meta > span { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.optimize-prompt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 76, 142, .32);
  border-radius: var(--r-pill);
  background: #2a1b25;
  color: #ff6a9e;
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  white-space: nowrap;
}
.optimize-prompt-button:hover:not(:disabled) { background: #38212e; }
.optimize-prompt-button:disabled { opacity: .48; }
.optimize-prompt-button[hidden] { display: none; }
.clear-prompt {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--ink-3);
  color: var(--tx-2);
  font-size: 14px;
  line-height: 1;
}

/* Generation settings: ratio, duration, resolution. */
.generation-settings { display: grid; gap: 16px; }
.setting-group { display: grid; gap: 8px; }
.setting-label { color: var(--tx-1); font-size: var(--t-body); font-weight: var(--w-bold); }
.option-group { display: flex; gap: 7px; flex-wrap: wrap; }
.option-group button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--ink-1);
  color: var(--tx-2);
  font-size: var(--t-label);
  font-weight: var(--w-med);
  display: grid;
  place-items: center;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.option-group button:hover { background: var(--ink-2); }
.option-group button.selected,
.option-group button[aria-pressed="true"] {
  border-color: transparent;
  background: var(--tx-1);
  color: var(--ink-0);
  font-weight: var(--w-bold);
}

/* ---------- Duration slider ----------
   app.js renders duration as a slider when the model offers more than one
   value. The list comes from each model's own durations array, so the range
   re-scales when the model changes; nothing here assumes 5s steps or a
   contiguous series. */
.option-group.setting-slider {
  display: block;
  padding: 14px 15px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--ink-1);
}
.duration-slider-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.duration-value {
  font-size: var(--t-h3);
  font-weight: var(--w-black);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.duration-range {
  margin-left: auto;
  color: var(--tx-3);
  font-size: var(--t-micro);
}
.duration-track {
  position: relative;
  height: 28px;
  display: grid;
  align-items: center;
}
/* The rail and its fill. */
.duration-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--ink-3);
}
.duration-fill {
  position: absolute;
  left: 0;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--sig);
  pointer-events: none;
  transition: width .08s linear;
}
/* One small mark per available duration, so the user can see the granularity
   without the values being printed. */
.duration-ticks {
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  pointer-events: none;
}
.duration-tick {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: #ffffff3d;
  transform: translateY(-50%);
}
/* With many options the ticks merge into a dotted line, which reads as
   decoration rather than information. Thin them out as the list grows. */
.duration-ticks.crowded .duration-tick { display: none; }
.duration-ticks.crowded .duration-tick:nth-child(5n + 1) { display: block; }
.duration-tick:first-child,
.duration-tick:last-child { display: none; }
/* Native range: transparent track so the custom rail shows through, with a
   large thumb for touch. */
.duration-input {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.duration-input::-webkit-slider-runnable-track {
  height: 28px;
  background: transparent;
  border: 0;
}
.duration-input::-moz-range-track {
  height: 28px;
  background: transparent;
  border: 0;
}
.duration-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px #00000073, 0 0 0 1px #0000001f;
}
.duration-input::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px #00000073;
}
.duration-input:focus-visible { outline: none; }
.duration-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--sig-hi), 0 2px 6px #00000073;
}
.duration-input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--sig-hi), 0 2px 6px #00000073;
}
/* On touch devices the thumb gets bigger, matching the 44px guidance without
   making the rail itself taller. */
@media (pointer: coarse) {
  .duration-input::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: 1px; }
  .duration-input::-moz-range-thumb { width: 26px; height: 26px; }
}

/* Image model extras. */
.image-model-options { display: grid; gap: 14px; }
.image-credit-summary { color: var(--tx-2); font-size: var(--t-label); }
.image-parameter-error { color: var(--danger); font-size: var(--t-label); }
.image-parameter-error:empty { display: none; }
#image-advanced {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--ink-1);
  overflow: hidden;
}
#image-advanced > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 14px;
  color: var(--tx-2);
  font-size: var(--t-label);
  font-weight: var(--w-med);
  cursor: pointer;
  list-style: none;
}
#image-advanced > summary::-webkit-details-marker { display: none; }
#image-advanced > summary::after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 1.9px solid var(--tx-3);
  border-bottom: 1.9px solid var(--tx-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s var(--ease);
}
#image-advanced[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
#image-advanced-controls { display: grid; gap: 12px; padding: 0 14px 14px; }
.image-parameter-field { display: grid; gap: 6px; }
.image-parameter-field > span { color: var(--tx-3); font-size: var(--t-micro); }

/* Toggle row, e.g. AI BGM. */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px var(--gut) 0;
  min-height: 62px;
  padding: 0 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--ink-1);
  cursor: pointer;
}
.toggle-row > span:first-child { display: grid; gap: 1px; min-width: 0; }
.toggle-row strong { font-size: var(--t-body); font-weight: var(--w-bold); }
.toggle-row small { color: var(--tx-2); font-size: var(--t-label); }
.toggle-row input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.toggle-control {
  position: relative;
  flex: none;
  margin-left: auto;
  width: 46px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--ink-3);
  transition: background .18s var(--ease);
}
.toggle-control::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: #fff;
  transition: transform .18s var(--ease);
}
.toggle-row input:checked + .toggle-control { background: var(--sig); }
.toggle-row input:checked + .toggle-control::after { transform: translateX(18px); }
.toggle-row input:focus-visible + .toggle-control { outline: 2px solid var(--sig-hi); outline-offset: 2px; }

/* The generate dock. */
.generate-dock {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, var(--max));
  padding: 12px var(--gut) calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(#0A0B0D00, var(--ink-0) 34%);
}
.generate-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 0 20px;
  border-radius: var(--r-card);
  background: var(--sig);
  color: var(--sig-ink);
  font-size: var(--t-h3);
  font-weight: var(--w-black);
  letter-spacing: -.012em;
  box-shadow: 0 8px 22px -8px var(--sig);
  transition: background .16s var(--ease), transform .16s var(--ease);
}
.generate-button:hover:not(:disabled) { background: #FF5570; }
.generate-button:active:not(:disabled) { transform: scale(.988); }
.generate-button:disabled { background: var(--ink-3); color: var(--tx-3); box-shadow: none; }
.generate-button strong { font-size: inherit; font-weight: inherit; }
/* The old markup had a 1px white rule as a separator; a coin is clearer. */
.generate-button i { display: none; }
.generate-button small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: #1A0A0E24;
  font-size: var(--t-body);
  font-weight: var(--w-black);
  font-variant-numeric: tabular-nums;
}
.generate-button .credit-coin { width: 15px; height: 15px; }
.generate-button:disabled .credit-coin { opacity: .5; }

/* ---------- 9 History and results -------------------------------------- */

.history-search,
.library-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px var(--gut) 0;
  padding: 0 13px;
  min-height: var(--tap);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-ctl);
  background: var(--ink-1);
  color: var(--tx-3);
}
.history-search input,
.library-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: var(--t-body);
  color: var(--tx-1);
  height: 42px;
}
.history-search input::placeholder,
.library-search input::placeholder { color: var(--tx-3); }
.history-search input:focus,
.library-search input:focus { outline: none; }
.history-search > span,
.search-icon { display: grid; place-items: center; color: var(--tx-3); }

.history-tabs {
  display: flex;
  gap: 7px;
  padding: 13px var(--gut) 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.history-tabs::-webkit-scrollbar { display: none; }
.history-tabs button {
  flex: none;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--tx-3);
  font-size: var(--t-label);
  font-weight: var(--w-med);
  white-space: nowrap;
}
.history-tabs button.active { border-color: transparent; background: var(--ink-3); color: var(--tx-1); }

.credits-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--ink-1);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

.history-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px var(--gut);
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--ink-1);
  color: var(--tx-2);
  font-size: var(--t-label);
}
.history-status button { margin-left: auto; color: var(--sig-hi); font-weight: var(--w-bold); }

#creation-list { padding: 14px var(--gut) 0; }

.creation-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px;
  margin-bottom: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--ink-1);
}
/* app.js renders <article class="creation-item"> containing a .creation-card
   button and a sibling .creation-actions block. The item owns the surface. */
.creation-card {
  display: flex;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.creation-card .creation-thumb { flex: none; }
/* The card is a span-based flex row: thumbnail, then copy. */
.creation-card > img.creation-thumb { width: 76px; height: 76px; object-fit: cover; }
.creation-thumb {
  position: relative;
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: var(--r-ctl);
  overflow: hidden;
  background: var(--ink-3);
}
.creation-thumb img,
.creation-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.creation-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--tx-3);
}
.creation-copy { min-width: 0; flex: 1; display: grid; gap: 3px; align-content: start; }
/* Two lines, then ellipsis. `text-overflow` alone cannot do this on a
   multi-line block, so the clamp is what keeps long prompts readable. */
.creation-copy strong {
  font-size: var(--t-body);
  font-weight: var(--w-med);
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.creation-copy small,
.creation-copy p {
  color: var(--tx-3);
  font-size: var(--t-micro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.creation-copy small { color: var(--tx-3); font-size: var(--t-micro); }
.creation-copy .status {
  justify-self: start;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
}
.status.success { background: #4ADE9B1f; color: var(--ok); }
.status.failure { background: #FF5C5C1f; color: var(--danger); }
.status.running { background: #FFB0201f; color: var(--warn); }
.creation-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: none;
  margin-left: auto;
}
.creation-actions button {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--ink-3);
  color: var(--tx-2);
  font-size: var(--t-micro);
  font-weight: var(--w-med);
  white-space: nowrap;
}
.creation-actions button:hover { color: var(--tx-1); border-color: var(--line-strong); }
.creation-actions .creation-delete { color: #FF8FA3; }
.creation-actions .creation-delete:hover { color: var(--danger); }
.creation-refund { color: var(--ok); font-size: var(--t-micro); }

/* Result page. */
.result-media-grid { display: grid; gap: 10px; padding: 14px var(--gut); }
.temporary-media-notice { margin: 14px var(--gut) 0; padding: 12px 14px; border: 1px solid rgba(255, 186, 94, .28); border-radius: var(--r-card); background: rgba(255, 186, 94, .08); color: var(--tx-2); font-size: var(--t-body-s); line-height: 1.5; }
.result-media-item {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ink-2);
}
.result-media-item img,
.result-media-item video { display: block; width: 100%; }
.result-copy { padding: 0 var(--gut) 16px; display: grid; gap: 8px; }
.result-copy p { color: var(--tx-2); font-size: var(--t-body-s); line-height: 1.55; }
.result-action-dock,
.page-action-dock {
  position: fixed;
  z-index: 30;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(100%, var(--max));
  padding: 12px var(--gut) calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink-0) 94%, transparent);
  backdrop-filter: blur(14px);
  display: grid;
  gap: 9px;
}
.page-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: var(--r-card);
  background: var(--sig);
  color: var(--sig-ink);
  font-size: var(--t-h3);
  font-weight: var(--w-black);
}
.page-primary:disabled { background: var(--ink-3); color: var(--tx-3); }
.page-secondary {
  display: grid;
  place-items: center;
  min-height: var(--tap);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  background: transparent;
  color: var(--tx-1);
  font-size: var(--t-body);
  font-weight: var(--w-med);
}

/* ---------- 10 Templates ------------------------------------------------ */

.template-detail-content { padding-bottom: 110px; }
.template-preview-stage { position: relative; background: #000; }
.template-image-preview { display: block; width: 100%; }
.native-template-media { position: relative; }
.native-template-media > .template-image-preview {
  display: block;
  width: 100%;
  height: min(72dvh, 610px);
  object-fit: contain;
  background: #000;
}
.template-preview-full {
  position: absolute;
  right: var(--gut);
  bottom: var(--gut);
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-pill);
  background: #0000008c;
  backdrop-filter: blur(8px);
  color: #fff;
}
.template-info { padding: 18px var(--gut); display: grid; gap: 10px; }
.template-info h2 { font-size: var(--t-h2); font-weight: var(--w-semi); letter-spacing: -.018em; }
.template-detail-copy { color: var(--tx-2); font-size: var(--t-body-s); line-height: 1.6; }
.template-info dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 6px 0 0; }
.template-info dt { color: var(--tx-3); font-size: var(--t-label); }
.template-info dd { margin: 0; font-size: var(--t-label); font-weight: var(--w-med); }
.search-results { padding-top: 14px; }

/* ---------- 11 Commerce ------------------------------------------------ */

.commerce-view { padding-bottom: 0; }
.commerce-visual {
  position: relative;
  height: 206px;
  overflow: hidden;
  background:
    radial-gradient(120% 95% at 30% 16%, #5B3A48, #1C1620 52%, var(--ink-0));
}
.commerce-visual video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.commerce-visual-fade {
  position: absolute;
  inset: auto 0 0;
  height: 140px;
  background: linear-gradient(#0000, var(--ink-0));
}
.commerce-toolbar {
  position: absolute;
  z-index: 2;
  inset: 14px 14px auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.commerce-toolbar > button {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  background: #0A0B0D8c;
  backdrop-filter: blur(8px);
  color: #fff;
}
.commerce-help { width: auto !important; padding: 0 14px; font-size: var(--t-label); font-weight: var(--w-med); }
.commerce-help-icon { margin-left: auto; }
.commerce-credit-balance {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  margin-left: auto;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: #0A0B0D8c;
  backdrop-filter: blur(8px);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

.commerce-sheet {
  position: relative;
  z-index: 2;
  margin-top: -96px;
  padding: 0 var(--gut) calc(30px + env(safe-area-inset-bottom));
  display: grid;
  gap: 16px;
}
.commerce-sheet > h1 {
  font-size: var(--t-title);
  font-weight: var(--w-black);
  letter-spacing: -.03em;
  line-height: 1.08;
  text-wrap: balance;
}
.credits-sheet > h1 { font-size: 24px; }

.benefit-list { display: grid; gap: 11px; }
.benefit-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--tx-2);
  font-size: var(--t-body-s);
  line-height: 1.45;
}
.benefit-list li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: var(--r-pill);
  background: var(--sig-wash);
  box-shadow: inset 0 0 0 1px var(--sig-line);
  /* An inline tick. Two gradients cannot do this reliably across engines;
     a mask with a path is exact. */
  -webkit-mask: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6B84' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.6 4.6L19 7.2'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
  box-shadow: inset 0 0 0 1px var(--sig-line);
}
.benefit-list b { color: var(--tx-1); font-weight: var(--w-bold); }

/* Plan and package cards. Prices align right so they can be compared. */
.commerce-options { display: grid; gap: 9px; }
.commerce-option,
.price-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--ink-1);
  text-align: left;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.commerce-option:hover { border-color: var(--line-strong); }
.commerce-option.selected,
.price-card.selected {
  border-color: var(--sig);
  background: var(--sig-wash);
}
.commerce-radio {
  position: relative;
  flex: none;
  width: 21px;
  height: 21px;
  border: 2px solid #343A46;
  border-radius: var(--r-pill);
  transition: border-color .16s var(--ease);
}
.commerce-option.selected .commerce-radio { border-color: var(--sig); }
.commerce-option.selected .commerce-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: var(--r-pill);
  background: var(--sig);
}
.commerce-radio-input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.commerce-option-copy { display: grid; gap: 2px; min-width: 0; }
.commerce-option-copy b { font-size: 14.5px; font-weight: var(--w-bold); }
.commerce-option-copy small { color: var(--tx-2); font-size: var(--t-label); }
.commerce-price {
  margin-left: auto;
  flex: none;
  text-align: right;
  font-size: var(--t-h3);
  font-weight: var(--w-black);
  font-variant-numeric: tabular-nums;
}
.commerce-price small {
  display: block;
  color: var(--tx-3);
  font-size: var(--t-micro);
  font-weight: var(--w-med);
}
.commerce-badge {
  position: absolute;
  right: 13px;
  top: -9px;
  height: 20px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--gold-ink);
  font-size: var(--t-micro);
  font-weight: var(--w-black);
  display: grid;
  place-items: center;
}
.commerce-promo-label { color: var(--sig-hi); font-size: var(--t-micro); font-weight: var(--w-bold); }
.commerce-member-save { color: var(--ok); font-size: var(--t-micro); font-weight: var(--w-bold); }

.commerce-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border-radius: var(--r-card);
  background: var(--sig);
  color: var(--sig-ink);
  font-size: var(--t-h3);
  font-weight: var(--w-black);
  letter-spacing: -.012em;
}
.commerce-primary:disabled { background: var(--ink-3); color: var(--tx-3); }
.commerce-renewal { color: var(--tx-3); font-size: var(--t-label); text-align: center; }
.commerce-status { color: var(--tx-2); font-size: var(--t-label); min-height: 0; }
.commerce-status:empty { display: none; }
.commerce-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  justify-content: center;
  align-items: center;
  color: var(--tx-3);
  font-size: var(--t-micro);
  line-height: 1.4;
}
.commerce-legal button { color: var(--tx-3); font-size: inherit; white-space: nowrap; }
.commerce-legal button:hover { color: var(--tx-2); text-decoration: underline; }

.credits-test-notice {
  padding: 9px 12px;
  border: 1px solid #FFB0204d;
  border-radius: var(--r-ctl);
  background: #FFB02014;
  color: var(--warn);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  letter-spacing: .02em;
}
.credits-test-footnote { color: var(--tx-3); font-size: var(--t-micro); text-align: center; }

.membership-bundle-row {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--ink-1);
  overflow: hidden;
}
.membership-bundle-control {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 0 14px;
  cursor: pointer;
}
.membership-bundle-control input { width: 20px; height: 20px; accent-color: var(--sig); flex: none; }
.membership-bundle-label { font-size: var(--t-body); font-weight: var(--w-med); }
.membership-optional {
  margin-left: auto;
  color: var(--tx-3);
  font-size: var(--t-micro);
  font-weight: var(--w-med);
}
#membership-bundle-details { padding: 0 14px 12px; }
#membership-bundle-details:empty { display: none; }
.membership-price-breakdown,
.membership-price-impact { color: var(--tx-2); font-size: var(--t-micro); line-height: 1.6; }

/* Checkout summary. */
.checkout-receipt {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--ink-1);
}
.checkout-summary { display: grid; gap: 8px; }
.checkout-summary > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: var(--t-label);
  color: var(--tx-2);
}
.checkout-summary > div > :last-child { margin-left: auto; color: var(--tx-1); font-weight: var(--w-med); }
.checkout-summary-total {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: var(--t-body) !important;
  color: var(--tx-1) !important;
  font-weight: var(--w-bold);
}
.checkout-charge { color: var(--sig-hi); font-size: var(--t-label); }
.checkout-credit-outcome { color: var(--ok); font-size: var(--t-label); }

/* Crypto payment block. */
.crypto-methods { display: flex; gap: 8px; }
.crypto-method {
  flex: 1;
  min-height: var(--tap);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--ink-1);
  color: var(--tx-2);
  font-size: var(--t-label);
  font-weight: var(--w-med);
}
.crypto-method.selected { border-color: var(--sig); background: var(--sig-wash); color: var(--tx-1); }
.crypto-payment-grid { display: grid; gap: 12px; }
.crypto-qr {
  display: grid;
  place-items: center;
  padding: 16px;
  border-radius: var(--r-card);
  background: #fff;
}
.crypto-qr img, .crypto-qr canvas { width: 168px; height: 168px; display: block; }
.crypto-address {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--ink-1);
  font-family: ui-monospace, monospace;
  font-size: var(--t-micro);
  word-break: break-all;
}
.crypto-copy-value {
  flex: none;
  margin-left: auto;
  color: var(--sig-hi);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
}
.crypto-countdown {
  font-size: var(--t-title);
  font-weight: var(--w-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.crypto-safety, .crypto-unavailable {
  color: var(--tx-3);
  font-size: var(--t-micro);
  line-height: 1.55;
}
.crypto-intro, .crypto-payment-copy { color: var(--tx-2); font-size: var(--t-body-s); line-height: 1.55; }

/* ---------- 12 Auth ---------------------------------------------------- */

.auth-view { padding-bottom: 0; }
/* The auth page has no header bar, so the back button sits in the flow at the
   top-left rather than absolutely positioned over the form. */
.auth-toolbar {
  position: relative;
  background: transparent;
  padding-bottom: 0;
}
.auth-content {
  max-width: 420px;
  margin: 0 auto;
  padding: 8px var(--gut) calc(40px + env(safe-area-inset-bottom));
  display: grid;
  gap: 18px;
}
.auth-brand {
  width: 60px;
  height: 60px;
  border-radius: 17px;
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.auth-brand img { width: 100%; height: 100%; object-fit: cover; }
.auth-content h1 { font-size: 26px; font-weight: var(--w-black); letter-spacing: -.028em; }
.auth-content > p { color: var(--tx-2); font-size: var(--t-body-s); line-height: 1.55; }

.auth-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--ink-1);
}
.auth-tabs button {
  flex: 1;
  min-height: 40px;
  border-radius: var(--r-ctl);
  color: var(--tx-2);
  font-size: var(--t-body);
  font-weight: var(--w-med);
}
.auth-tabs button.active { background: var(--tx-1); color: var(--ink-0); font-weight: var(--w-bold); }

#auth-form { display: grid; gap: 12px; }
.auth-field { display: grid; gap: 7px; }
.auth-field > span:first-child { color: var(--tx-2); font-size: var(--t-label); font-weight: var(--w-med); }
.auth-field input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--ink-1);
  color: var(--tx-1);
  font-size: var(--t-body); /* 16px would be safer on iOS, but the field is padded */
}
.auth-field input::placeholder { color: var(--tx-3); }
.auth-field input:focus { outline: none; border-color: var(--sig-line); background: var(--ink-2); }
.password-input { position: relative; display: block; }
.password-input input { padding-right: 62px; }
.password-input button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  min-height: 38px;
  padding: 0 11px;
  border-radius: 9px;
  color: var(--sig-hi);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
}
.forgot-password { justify-self: start; color: var(--tx-2); font-size: var(--t-label); min-height: 32px; }
.forgot-password:hover { color: var(--sig-hi); }
.auth-status { color: var(--danger); font-size: var(--t-label); min-height: 0; }
.auth-status:empty { display: none; }
.auth-submit {
  display: grid;
  place-items: center;
  min-height: 52px;
  border-radius: var(--r-card);
  background: var(--sig);
  color: var(--sig-ink);
  font-size: var(--t-h3);
  font-weight: var(--w-black);
}
.auth-submit:disabled { background: var(--ink-3); color: var(--tx-3); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tx-3);
  font-size: var(--t-micro);
}
.auth-divider::before,
.auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.social-login { display: grid; gap: 9px; }
.social-login button {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 50px;
  padding: 0 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  background: var(--ink-1);
  color: var(--tx-1);
  font-size: var(--t-body);
  font-weight: var(--w-med);
}
.social-login button:hover { background: var(--ink-2); }
.google-mark, .facebook-mark { display: grid; place-items: center; width: 20px; height: 20px; }
.provider-label { flex: 1; text-align: left; }
.auth-terms { color: var(--tx-3); font-size: var(--t-micro); line-height: 1.55; text-align: center; }

/* ---------- 13 Profile ------------------------------------------------- */

.profile-top {
  position: relative;
  padding: 24px var(--gut) 22px;
  padding-top: calc(24px + env(safe-area-inset-top));
  background: linear-gradient(180deg, #1C1620, var(--ink-0));
}
.profile-top > h1 {
  font-size: var(--t-h2);
  font-weight: var(--w-semi);
  letter-spacing: -.018em;
  margin-bottom: 18px;
}
.account-row { display: flex; align-items: center; gap: 12px; }
.profile-avatar {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar-initial {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: var(--w-black);
  color: var(--tx-2);
}
.profile-avatar img[src^="data:image/gif"] + .profile-avatar-initial { opacity: 1; }
.account-copy { display: grid; gap: 2px; min-width: 0; text-align: left; }
.account-copy strong { font-size: var(--t-h3); font-weight: var(--w-bold); }
.account-copy span { color: var(--tx-2); font-size: var(--t-label); }
.credit-ribbon {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin-left: auto;
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--ink-1);
  font-size: var(--t-body);
  font-weight: var(--w-black);
  font-variant-numeric: tabular-nums;
}

.profile-content { padding: 0 var(--gut) calc(110px + env(safe-area-inset-bottom)); display: grid; gap: 14px; }
.member-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px;
  border: 1px solid var(--sig-line);
  border-radius: var(--r-card);
  background: linear-gradient(120deg, #2E1A22, #1A121C);
  text-align: left;
}
.member-banner .native-glyph {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--gold);
  color: var(--gold-ink);
}
.member-copy { display: grid; gap: 2px; min-width: 0; }
.member-copy strong { font-size: var(--t-body); font-weight: var(--w-bold); }
.member-copy small { color: var(--tx-2); font-size: var(--t-label); }
.member-arrow { margin-left: auto; color: var(--tx-3); display: grid; }

.profile-menu {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--ink-1);
}
.profile-menu + .secondary-menu { margin-top: 14px; }
.profile-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 11px 14px;
  color: var(--tx-1);
  font-size: var(--t-body);
  text-align: left;
}
.profile-menu button:not(:last-child) { border-bottom: 1px solid var(--line-soft); }
.profile-menu button:hover { background: var(--ink-2); }
.profile-menu button > span:nth-child(2) { flex: 1; min-width: 0; }
.profile-menu button > span:last-child { color: var(--tx-3); display: grid; }
.profile-menu button strong { color: var(--ok); font-size: var(--t-label); font-weight: var(--w-bold); }
.app-version { color: var(--tx-3); font-size: var(--t-micro); text-align: center; padding: 8px 0 0; }

/* Credit detail list. */
.credit-detail-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 6px var(--gut) 0;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--ink-1);
}
.credit-detail-summary > span { color: var(--tx-2); font-size: var(--t-label); }
.credit-detail-summary > strong {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 24px;
  font-weight: var(--w-black);
  font-variant-numeric: tabular-nums;
}
.credit-transaction-list { padding: 14px var(--gut); display: grid; gap: 8px; }
.credit-transaction {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-ctl);
  background: var(--ink-1);
}
.transaction-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--ink-3);
  color: var(--tx-2);
}
.credit-transaction > div { display: grid; gap: 1px; min-width: 0; }
.credit-transaction small { color: var(--tx-3); font-size: var(--t-micro); }
.transaction-amount {
  margin-left: auto;
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}
.transaction-amount.positive { color: var(--ok); }
.transaction-amount.negative { color: var(--tx-2); }

/* Purchase history. */
.purchase-history-list { padding: 14px var(--gut); display: grid; gap: 9px; }
.purchase-order {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--ink-1);
}
.purchase-order-heading { display: flex; align-items: baseline; gap: 10px; }
.purchase-order-heading strong { font-size: var(--t-body); font-weight: var(--w-bold); }
.purchase-order-status {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--ink-3);
  color: var(--tx-2);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
}
.purchase-order-id { color: var(--tx-3); font-size: var(--t-micro); font-family: ui-monospace, monospace; }
.purchase-order-price { font-size: var(--t-h3); font-weight: var(--w-black); font-variant-numeric: tabular-nums; }
.purchase-history-more {
  display: block;
  margin: 4px var(--gut) 24px;
  min-height: var(--tap);
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  background: transparent;
  color: var(--tx-1);
  font-size: var(--t-body);
  font-weight: var(--w-med);
}
.purchase-history-status { color: var(--tx-3); font-size: var(--t-label); text-align: center; }

/* ---------- 14 Documents ------------------------------------------------ */

.document-content { padding: 8px var(--gut) calc(40px + env(safe-area-inset-bottom)); }
.document-content h2 { font-size: var(--t-h3); font-weight: var(--w-bold); margin: 22px 0 8px; }
.document-content p { color: var(--tx-2); font-size: var(--t-body-s); line-height: 1.65; margin-bottom: 12px; }
.document-content a { color: var(--sig-hi); }
.document-updated, .document-note { color: var(--tx-3); font-size: var(--t-micro); }

/* ---------- 15 Overlays ------------------------------------------------- */

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
}
.modal-layer.open { display: block; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: #000000b3;
  backdrop-filter: blur(4px);
}
.modal {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 420px);
  max-height: 88vh;
  overflow-y: auto;
  padding: 18px var(--gut) calc(20px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: var(--ink-1);
  box-shadow: var(--shadow-2);
  animation: sheet-in .26s var(--ease);
}
@keyframes sheet-in {
  from { transform: translate(-50%, 18px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
.modal-handle {
  width: 38px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: var(--r-pill);
  background: var(--ink-4);
}
.modal-actions { display: grid; gap: 9px; margin-top: 16px; }
.modal-actions .primary {
  display: grid;
  place-items: center;
  min-height: 50px;
  border-radius: var(--r-card);
  background: var(--sig);
  color: var(--sig-ink);
  font-size: var(--t-h3);
  font-weight: var(--w-black);
}
.modal-actions .secondary {
  display: grid;
  place-items: center;
  min-height: var(--tap);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  color: var(--tx-1);
  font-size: var(--t-body);
  font-weight: var(--w-med);
}
.modal-art, .modal-media { border-radius: var(--r-card); overflow: hidden; margin-bottom: 14px; }
.modal h2, .modal h3 { font-size: var(--t-h2); font-weight: var(--w-semi); letter-spacing: -.018em; margin-bottom: 8px; }
.modal p { color: var(--tx-2); font-size: var(--t-body-s); line-height: 1.6; }
.model-picker-head { display: grid; gap: 10px; margin-bottom: 12px; }
.model-list { display: grid; gap: 8px; }
.model-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--ink-2);
  text-align: left;
}
.modal.prompt-optimizer-modal { padding-top: 14px; }
.prompt-optimizer-modal .section-kicker { display: block; margin-bottom: 5px; color: var(--sig-hi); font-size: var(--t-micro); font-weight: var(--w-bold); letter-spacing: .08em; }
.prompt-choice-list { display: grid; gap: 10px; margin-top: 16px; }
.prompt-choice {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: var(--ink-2);
}
.prompt-choice-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prompt-choice-head strong { font-size: var(--t-body); }
.prompt-choice-head span { color: var(--tx-3); font-size: var(--t-micro); }
.prompt-choice .prompt-choice-text { color: var(--tx-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.prompt-choice .prompt-choice-note { color: var(--tx-3); font-size: var(--t-micro); }
.prompt-choice-use {
  min-height: 42px;
  border-radius: var(--r-ctl);
  background: var(--sig);
  color: var(--sig-ink);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
}
.model-option.selected { border-color: var(--sig); background: var(--sig-wash); }
.model-option strong { font-size: var(--t-body); font-weight: var(--w-med); }
.model-option > span:last-child { margin-left: auto; color: var(--tx-2); font-size: var(--t-label); font-variant-numeric: tabular-nums; }
.model-search {
  width: 100%;
  height: var(--tap);
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--ink-2);
  font-size: var(--t-body);
}
.model-empty { padding: 20px; color: var(--tx-3); font-size: var(--t-label); text-align: center; }

.toast {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px);
  max-width: min(90%, 360px);
  padding: 11px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  background: var(--ink-3);
  color: var(--tx-1);
  font-size: var(--t-label);
  font-weight: var(--w-med);
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Referral promo sheet. */
.referral-promo-layer {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: none;
}
.referral-promo-layer.open,
.referral-promo-layer[aria-hidden="false"] { display: block; }
.referral-promo-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  background: #000000b3;
  backdrop-filter: blur(4px);
}
.referral-promo {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 420px);
  padding: 18px var(--gut) calc(20px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: var(--ink-1);
  display: grid;
  gap: 10px;
  animation: sheet-in .26s var(--ease);
}
.referral-promo-handle { width: 38px; height: 4px; margin: 0 auto 6px; border-radius: var(--r-pill); background: var(--ink-4); }
.referral-promo > span { color: var(--sig-hi); font-size: var(--t-micro); font-weight: var(--w-black); letter-spacing: .06em; }
.referral-promo h2 { font-size: 22px; font-weight: var(--w-black); letter-spacing: -.024em; line-height: 1.15; }
.referral-promo p { color: var(--tx-2); font-size: var(--t-body-s); line-height: 1.55; }
.referral-promo-reward {
  display: flex;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--sig-line);
  border-radius: var(--r-card);
  background: var(--sig-wash);
}
.referral-promo-reward small { color: var(--tx-2); font-size: var(--t-micro); font-weight: var(--w-bold); }
.referral-promo-reward strong { display: block; font-size: var(--t-h3); font-weight: var(--w-black); }
.referral-promo-reward > b { margin-left: auto; color: var(--sig-hi); font-size: 22px; font-weight: var(--w-black); }
.referral-promo-primary {
  display: grid;
  place-items: center;
  min-height: 50px;
  border-radius: var(--r-card);
  background: var(--sig);
  color: var(--sig-ink);
  font-size: var(--t-h3);
  font-weight: var(--w-black);
}
.referral-promo-dismiss {
  display: grid;
  place-items: center;
  min-height: var(--tap);
  color: var(--tx-3);
  font-size: var(--t-label);
  font-weight: var(--w-med);
}
.referral-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--ink-2);
  font-family: ui-monospace, monospace;
  font-size: var(--t-micro);
  word-break: break-all;
}
.referral-rewards { display: grid; gap: 8px; }
.referral-reward, .referral-stats {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-ctl);
  background: var(--ink-1);
  font-size: var(--t-label);
}
.referral-reward > :last-child, .referral-stats > :last-child { margin-left: auto; font-weight: var(--w-bold); }
.referral-rewards-title { font-size: var(--t-body); font-weight: var(--w-bold); }
.referral-loading { color: var(--tx-3); font-size: var(--t-label); }

/* PWA prompts. */
.pwa-update-banner,
.pwa-network-banner {
  position: fixed;
  z-index: 110;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(92px + env(safe-area-inset-bottom));
  width: min(calc(100% - 24px), 380px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  background: var(--ink-3);
  font-size: var(--t-label);
  box-shadow: var(--shadow-2);
}
.pwa-update-banner button,
.pwa-network-banner button {
  margin-left: auto;
  color: var(--sig-hi);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  min-height: 32px;
}
.pwa-generation-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #000000b3;
  backdrop-filter: blur(4px);
}
/* The layer itself is a plain wrapper; pwa-client.js builds it by class name. */
.pwa-generation-install { position: fixed; inset: 0; z-index: 100; }
.pwa-generation-dialog {
  width: min(100%, 340px);
  padding: 22px;
  border-radius: 20px;
  background: var(--ink-1);
  text-align: center;
  display: grid;
  gap: 12px;
  box-shadow: var(--shadow-2);
}
.pwa-generation-icon { width: 56px; height: 56px; margin: 0 auto; border-radius: 16px; overflow: hidden; }
.pwa-generation-actions { display: grid; gap: 8px; }
.pwa-generation-primary {
  display: grid;
  place-items: center;
  min-height: 48px;
  border-radius: var(--r-ctl);
  background: var(--sig);
  color: var(--sig-ink);
  font-size: var(--t-body);
  font-weight: var(--w-black);
}
.pwa-generation-later { min-height: var(--tap); color: var(--tx-3); font-size: var(--t-label); }
.pwa-install-guide { display: grid; gap: 10px; }

/* ---------- 16 Empty, error and loading states ------------------------- */

.empty-state, .library-empty, .credit-empty, .result-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 56px 24px;
  text-align: center;
}
.empty-state strong, .library-empty strong, .credit-empty strong, .result-empty strong {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
}
.empty-state p, .library-empty p, .credit-empty p, .result-empty p {
  color: var(--tx-3);
  font-size: var(--t-label);
  max-width: 30ch;
  line-height: 1.55;
}
.empty-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 18px;
  background: var(--ink-2);
  color: var(--tx-3);
}
.eyebrow, .section-kicker {
  color: var(--sig-hi);
  font-size: var(--t-micro);
  font-weight: var(--w-black);
  letter-spacing: .06em;
}
.media-feedback, .thumbnail-feedback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #0A0B0Dcc;
  color: var(--tx-2);
  font-size: var(--t-label);
}
.progress-track {
  width: 100%;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--ink-3);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--sig);
  transition: width .3s var(--ease);
}
.api-state, .status-running { color: var(--warn); font-size: var(--t-label); }
.status-failed { color: var(--danger); font-size: var(--t-label); }
.error { color: var(--danger); font-size: var(--t-label); }
.success { color: var(--ok); }
.result-unavailable { color: var(--tx-3); font-size: var(--t-label); }

/* Content preview mode, used by the admin builder. Keep it obvious. */
.content-preview-mode [data-content-block] {
  cursor: pointer !important;
  outline: 1px dashed #ffffff33;
  outline-offset: -2px;
}
.content-preview-mode [data-content-block]:hover,
.content-preview-mode .content-preview-selected {
  outline: 3px solid var(--sig);
  outline-offset: -3px;
}
.content-disabled { opacity: .45; pointer-events: none; }
.site-content-pending { opacity: 0; }

/* Builder-injected custom blocks still render. */
.builder-custom-section {
  position: relative;
  display: grid;
  gap: 14px;
  margin: 18px var(--gut);
  padding: 18px;
  overflow: hidden;
  border-radius: var(--r-card);
}
.builder-custom-section.layout-banner { min-height: 210px; align-content: end; }
.builder-custom-section.layout-center { text-align: center; }
.builder-custom-media { width: 100%; max-height: 240px; border-radius: var(--r-ctl); object-fit: cover; }
.builder-custom-section.layout-banner > .builder-custom-media {
  position: absolute;
  inset: 0;
  height: 100%;
  max-height: none;
  opacity: .55;
}
.builder-custom-copy { position: relative; z-index: 1; }
.builder-custom-copy small {
  color: var(--sig-hi);
  font-size: var(--t-micro);
  font-weight: var(--w-black);
  letter-spacing: .05em;
}
.builder-custom-copy h2 { margin: 5px 0 0; font-size: 21px; font-weight: var(--w-bold); letter-spacing: -.02em; }
.builder-custom-copy p { margin: 8px 0 0; font-size: var(--t-label); line-height: 1.55; opacity: .82; }
.builder-custom-copy a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-top: 14px;
  padding: 0 16px;
  border-radius: var(--r-ctl);
  background: var(--sig);
  color: var(--sig-ink);
  font-size: var(--t-label);
  font-weight: var(--w-black);
  text-decoration: none;
}

/* ---------- 17 Responsive ---------------------------------------------- */

/* Tablets and desktop: the phone column widens into a real layout.
   The mobile layout below 431px is untouched by these rules. */
@media (min-width: 431px) {
  body { padding: 16px 0; }
  .app-shell {
    min-height: calc(100vh - 32px);
    border-radius: 18px;
    box-shadow: 0 24px 60px #00000059, 0 0 0 1px var(--line-soft);
  }
  .generate-dock,
  .result-action-dock,
  .page-action-dock { position: sticky; bottom: 0; }
  .bottom-nav { position: sticky; bottom: 14px; margin: 0 auto; }
}

@media (min-width: 768px) {
  :root { --max: 720px; --gut: 22px; }
  .home-hero { height: 340px; }
  .hero-content strong { font-size: 36px; }
  .home-tools { margin: -70px 20px 0; gap: 10px; }
  .home-tool { padding: 16px 14px 14px; }
  .home-tool .tool-caption { font-size: var(--t-body); }
  .template-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .masonry { columns: 3; }
  .discover-rail > * { flex-basis: 200px; }
  .commerce-sheet { margin-top: -110px; }
  .commerce-sheet > h1 { font-size: 34px; }
  .profile-menu button { min-height: 60px; }
  #creation-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .creation-item { margin-bottom: 0; }
}

@media (min-width: 1024px) {
  :root { --max: 960px; }
  .template-grid { grid-template-columns: repeat(4, 1fr); }
  .masonry { columns: 4; }
  .home-hero { height: 380px; }
  .hero-content strong { font-size: 42px; }
}

/* Coarse pointers get the larger tap targets back on small screens. */
@media (pointer: coarse) {
  .chip, .n-opt, .option-group button, .mode-tab, .history-tabs button { min-height: 42px; }
}

/* iOS zooms the whole page when a focused field's text is under 16px. Rather
   than force every input to 16px and break the type scale, raise only the
   fields that take text, on touch devices. */
@media (pointer: coarse) { input, textarea, select { font-size: 16px !important; } }

/* Respect the system setting. No decorative motion ships, so this only
   needs to stop the two sheet transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}