/* Styles for the Create page only (public/create.html). Kept out of style.css so every other page loads less CSS. */
.create-wrap { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.create-wrap > * { max-width: 560px; margin-left: auto; margin-right: auto; }
.cr-card { background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 18px; padding: 16px; margin: 0 14px 14px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.cr-card h2 { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; margin: 0 0 12px; color: #1a1a1a; }
.cr-muted { color: #8a8a93; }
.cr-notice { text-align: center; padding: 28px 18px; }
.cr-notice p { color: #6b6b73; margin: 0 0 16px; font-size: 14px; }
.cr-banner { margin: 0 14px 14px; padding: 10px 12px; border-radius: 12px; background: #fff4d6; color: #7a5a00; font-size: 12.5px; line-height: 1.4; }
.cr-drop { position: relative; border: 2px dashed rgba(0,0,0,.18); border-radius: 16px; min-height: 150px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; background: #fafafb; }
.cr-drop.over { border-color: #4db8ff; background: #eef8ff; }
.cr-drop.loading { opacity: .55; pointer-events: none; }
.cr-drop-small { min-height: 90px; margin-top: 10px; }
.cr-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #6b6b73; font-size: 14px; font-weight: 600; padding: 18px; }
.cr-drop-empty[hidden], .cr-drop-img[hidden] { display: none; }
.cr-drop-empty svg { width: 30px; height: 30px; fill: #4db8ff; }
.cr-drop-empty small { font-weight: 500; color: #9a9aa2; }
.cr-drop-img { display: block; width: 100%; max-height: 320px; object-fit: contain; }
.cr-size { margin: 8px 2px 0; font-size: 12.5px; color: #6b6b73; }
.cr-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; font-weight: 600; color: #1a1a1a; }
.cr-check input { width: 18px; height: 18px; accent-color: #4db8ff; }
#idea { display: block; width: 100%; box-sizing: border-box; border: 1px solid rgba(0,0,0,.14); border-radius: 12px; padding: 11px 12px; font: inherit; font-size: 14.5px; resize: vertical; background: #fff; color: #1a1a1a; }
#idea:focus, .cr-title:focus, #seed:focus { outline: 2px solid rgba(77,184,255,.55); outline-offset: 0; }
.cr-note { margin: 8px 2px 0; font-size: 12px; color: #8a8a93; line-height: 1.45; }
.cr-note b { color: #1f8fdc; }
.cr-field { margin-bottom: 16px; }
.cr-field-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: #1a1a1a; }
.cr-field-head output { font-variant-numeric: tabular-nums; color: #1f8fdc; font-weight: 700; }
.cr-field input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; outline: none; background: linear-gradient(90deg, #4db8ff var(--pct, 50%), #e6e6ea var(--pct, 50%)); }
.cr-field input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid #4db8ff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; }
.cr-field input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #4db8ff; cursor: pointer; }
.cr-link { background: none; border: 0; padding: 0; margin-left: 6px; color: #1f8fdc; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
.cr-link[hidden] { display: none; }
.cr-seed { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#seed { width: 140px; border: 1px solid rgba(0,0,0,.14); border-radius: 10px; padding: 8px 10px; font: inherit; background: #fff; color: #1a1a1a; margin-top: 14px; }
#seed:disabled { opacity: .45; }
.cr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(0,0,0,.14); background: #fff; color: #1a1a1a; font: inherit; font-size: 14.5px; font-weight: 700; text-decoration: none; cursor: pointer; }
.cr-primary { border: 0; color: #0b3a5c; background: linear-gradient(135deg, #4db8ff, #8fd3ff); }
.cr-btn:disabled { opacity: .45; cursor: not-allowed; }
.cr-big { display: flex; width: calc(100% - 28px); margin: 4px 14px 0; padding: 15px; font-size: 16px; }
.cr-fine { margin: 8px 14px 14px; font-size: 12.5px; color: #8a8a93; text-align: center; }
.cr-card .cr-fine { margin: 10px 0 0; }
.cr-bar { height: 8px; border-radius: 8px; background: #ececf0; overflow: hidden; }
.cr-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #4db8ff, #8fd3ff); transition: width .6s ease; }
.cr-progress h2 { margin-bottom: 14px; }
.cr-error h2 { color: #d4183d; }
.cr-error p { margin: 0; font-size: 14px; color: #6b6b73; }
.cr-video { width: 100%; max-height: 62vh; border-radius: 14px; background: #000; display: block; }
.cr-actions { display: flex; gap: 10px; margin-top: 12px; }
.cr-actions .cr-btn { flex: 1; }
.cr-title { width: 100%; box-sizing: border-box; margin-top: 12px; border: 1px solid rgba(0,0,0,.14); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px; background: #fff; color: #1a1a1a; }
.cr-script { margin-top: 12px; font-size: 12.5px; color: #6b6b73; }
.cr-script summary { cursor: pointer; font-weight: 600; }
.cr-script pre { white-space: pre-wrap; margin: 8px 0 0; padding: 10px; border-radius: 10px; background: #f4f4f6; color: #333; font-family: inherit; line-height: 1.5; }
.cr-recent { list-style: none; margin: 0; padding: 0; }
.cr-recent li + li { border-top: 1px solid rgba(0,0,0,.07); }
.cr-recent button { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; text-align: left; background: none; border: 0; padding: 10px 2px; font: inherit; color: inherit; cursor: pointer; }
.cr-r-idea { font-size: 14px; font-weight: 600; color: #1a1a1a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-r-meta { grid-column: 1; font-size: 11.5px; color: #8a8a93; }
.cr-r-status { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #eee; color: #555; }
.cr-s-done { background: #e3f7ea; color: #14803c; }
.cr-s-failed { background: #fde4e8; color: #c0143a; }

body:not(.light-theme) .cr-card { background: #1b1b1f; border-color: rgba(255,255,255,.08); box-shadow: none; }
body:not(.light-theme) .cr-card h2, body:not(.light-theme) .cr-field-head, body:not(.light-theme) .cr-check, body:not(.light-theme) .cr-r-idea { color: #f2f2f4; }
body:not(.light-theme) .cr-drop { background: #141417; border-color: rgba(255,255,255,.2); }
body:not(.light-theme) .cr-drop-empty, body:not(.light-theme) .cr-notice p, body:not(.light-theme) .cr-error p, body:not(.light-theme) .cr-size { color: #a7a7b0; }
body:not(.light-theme) #idea, body:not(.light-theme) #seed, body:not(.light-theme) .cr-title { background: #141417; color: #f2f2f4; border-color: rgba(255,255,255,.16); }
body:not(.light-theme) .cr-btn { background: #26262b; color: #f2f2f4; border-color: rgba(255,255,255,.14); }
body:not(.light-theme) .cr-primary { color: #0b3a5c; background: linear-gradient(135deg, #4db8ff, #8fd3ff); border: 0; }
body:not(.light-theme) .cr-field input[type=range] { background: linear-gradient(90deg, #4db8ff var(--pct, 50%), #38383f var(--pct, 50%)); }
body:not(.light-theme) .cr-bar { background: #2c2c33; }
body:not(.light-theme) .cr-script pre { background: #141417; color: #cfcfd6; }
body:not(.light-theme) .cr-banner { background: #3a3012; color: #f0d98a; }
.cr-welcome { background: #eaf6ff; color: #0b3a5c; font-weight: 600; }
body:not(.light-theme) .cr-welcome { background: #1c2b38; color: #cfe9fb; }
.cr-check .cr-sub { font-weight: 500; font-size: 12px; }

/* ---------- "?" help buttons, Advanced drop-down ---------- */
.cr-lbl { display: inline-flex; align-items: center; gap: 8px; }
.cr-help {
  flex: none;
  width: 20px; height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid #4db8ff;
  background: #eef8ff;
  color: #1f8fdc;
  font: inherit; font-size: 12px; font-weight: 700; line-height: 1;
  cursor: pointer;
}
.cr-help[aria-expanded="true"] { background: #4db8ff; color: #0b3a5c; }
.cr-helptext {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #eef8ff;
  border: 1px solid rgba(77,184,255,.45);
  color: #26323d;
  font-size: 12.5px;
  line-height: 1.55;
}
.cr-helptext[hidden], .cr-adv[hidden] { display: none; }
.cr-checkrow { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.cr-checkrow .cr-check { margin-top: 0; }
.cr-seed { margin-top: 14px; }
#seed { margin-top: 0; }
.cr-card > .cr-field:last-child { margin-bottom: 0; }

.cr-advcard { padding: 0; overflow: hidden; }
.cr-adv-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  padding: 16px;
  border: 0; background: none;
  font: inherit; text-align: left; cursor: pointer;
  color: #1a1a1a;
}
.cr-adv-toggle b { display: block; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; }
.cr-adv-toggle small { display: block; margin-top: 2px; font-size: 12px; color: #8a8a93; }
.cr-adv-toggle svg { width: 26px; height: 26px; fill: #4db8ff; transition: transform .2s; flex: none; }
.cr-adv-toggle.open svg { transform: rotate(180deg); }
.cr-adv { padding: 0 16px 16px; border-top: 1px solid rgba(0,0,0,.07); padding-top: 16px; }
.cr-pill {
  display: block;
  margin: 16px auto 0;   /* centred under the Advanced controls */
  padding: 6px 16px;
  border-radius: 999px;
  border: 1.5px solid #4db8ff;
  background: #eef8ff;
  color: #1f8fdc;
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2;
  cursor: pointer;
}
.cr-pill:active { background: #4db8ff; color: #0b3a5c; }

body:not(.light-theme) .cr-help { background: #1c2b38; color: #8fd3ff; }
body:not(.light-theme) .cr-pill { background: #1c2b38; color: #8fd3ff; }
body:not(.light-theme) .cr-pill:active { background: #4db8ff; color: #0b3a5c; }
body:not(.light-theme) .cr-help[aria-expanded="true"] { background: #4db8ff; color: #0b3a5c; }
body:not(.light-theme) .cr-helptext { background: #17222c; border-color: rgba(77,184,255,.35); color: #cfdbe6; }
body:not(.light-theme) .cr-adv-toggle { color: #f2f2f4; }
body:not(.light-theme) .cr-adv { border-top-color: rgba(255,255,255,.08); }

/* ---------- "Coming soon" locked sheet ---------- */
.cr-locked-sheet { padding: 4px 18px 20px; }
.cr-locked-msg { margin: 16px 0; font-size: 14.5px; line-height: 1.5; color: #e4e4e7; }
.cr-locked-signin { margin: 0 0 16px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.06); }
.cr-locked-signin p { margin: 0 0 10px; font-size: 13.5px; color: #c7c7cf; }
.cr-locked-signin .cr-btn { width: 100%; }
.cr-locked-check { color: #e4e4e7; margin-top: 0; }
.cr-locked-submit { display: block; width: 100%; margin-top: 18px; }

/* The seconds counter sits right next to the words "Clip length". */
#f_length .cr-field-head { justify-content: flex-start; gap: 10px; }

/* The clip's cost sits to the right of the length slider. */
.cr-slider-row { display: flex; align-items: center; gap: 14px; }
.cr-slider-row input[type=range] { flex: 1; width: auto; min-width: 0; }
.cr-clipcost { flex: none; white-space: nowrap; font-size: 13px; font-weight: 600; color: #0b3a5c; }
.cr-clipcost[hidden] { display: none; }
.cr-clipcost b { font-size: 14.5px; font-weight: 800; }
.cr-clipcost.ok b { color: #1f8fdc; }
.cr-clipcost.low b { opacity: .4; }   /* not enough coins for this length: the number fades */
body:not(.light-theme) .cr-clipcost { color: #cfe9fb; }
body:not(.light-theme) .cr-clipcost.ok b { color: #4db8ff; }

/* Your coin balance, under the Generate button. */
.cr-coins { display: flex; align-items: center; justify-content: center; width: fit-content; max-width: calc(100% - 28px); margin: 10px auto 0; padding: 9px 16px; border-radius: 14px; background: #eaf6ff; color: #0b3a5c; font-size: 13.5px; font-weight: 600; }
.cr-coins[hidden] { display: none; }
.cr-coins-left { display: flex; align-items: center; gap: 7px; }
.cr-coins svg { width: 24px; height: 24px; flex: none; }
.cr-coins b { font-size: 15px; font-weight: 800; }
.cr-coins-get { margin-left: 4px; font-size: 12.5px; font-weight: 700; color: #1f8fdc; text-decoration: underline; }
body:not(.light-theme) .cr-coins { background: #1c2b38; color: #cfe9fb; }
body:not(.light-theme) .cr-coins-get { color: #8fd3ff; }

/* The coins bubble and, for visitors who are signed out, the sign-up offer beside it. */
.cr-coinsrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 10px 14px 0; }
.cr-coinsrow .cr-coins { margin: 0; }
.cr-signup { border: 0; cursor: pointer; font-family: inherit; background: #1f8fdc; color: #fff; }
.cr-signup:hover { background: #1a7fc6; }
body:not(.light-theme) .cr-signup { background: #1f8fdc; color: #fff; }
/* On a phone the two bubbles still sit side by side, so they get a little tighter. */
@media (max-width: 480px) {
  .cr-coinsrow { flex-wrap: nowrap; gap: 6px; margin: 10px 8px 0; }
  .cr-coinsrow .cr-coins { padding: 8px 10px; font-size: 12px; border-radius: 12px; }
  .cr-coinsrow .cr-coins svg { width: 18px; height: 18px; }
  .cr-coinsrow .cr-coins-left { gap: 5px; }
}

/* The coin cost on the Generate button, faded. */
.cr-gen-cost { opacity: .55; font-weight: 600; font-size: 12.5px; margin-left: 4px; }
.cr-gen-cost:empty { display: none; }

/* Prompt refused by the safety filter. */
.cr-idea-err { margin: 8px 2px 0; font-size: 13px; font-weight: 600; color: #b3261e; }
#idea.cr-bad { border-color: #b3261e; box-shadow: 0 0 0 2px rgba(179,38,30,.18); }