:root {
  --accent: #f5078f;
  --accent-dark: #a918b3;
  --coral: #ff7266;
  --cyan: #28d9d0;
  --violet: #641bd4;
  --ink: #171713;
  --muted: #77776f;
  --surface: #fffbfd;
  --cream: #f9f1f6;
  --line: #eee1e9;
  --page-padding: 18px;
  font-family: "Avenir Next", Avenir, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #f1e8ed;
  font-synthesis: none;
}

* { box-sizing: border-box; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #f1e8ed; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.app-shell {
  position: relative;
  width: 100%;
  max-width: 460px;
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 60px rgb(91 27 78 / 15%);
}

.page-padding { padding-inline: var(--page-padding); }
.brand-area {
  position: relative;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 105% 2%, #31dcd2 0 17%, transparent 17.5%),
    radial-gradient(circle at -7% 104%, #6420d5 0 21%, transparent 21.5%),
    radial-gradient(circle at 82% 14%, rgb(255 255 255 / 20%) 0 3px, transparent 4px),
    linear-gradient(145deg, #ff7266 0%, #f5078f 47%, #bd159f 72%, #681bd2 100%);
  border-radius: 0 0 28px 28px;
}

.brand-area::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: 4px;
  width: 142px;
  height: 142px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgb(255 255 255 / 5%), 0 0 0 44px rgb(255 255 255 / 4%);
}

.brand-header {
  display: flex;
  align-items: center;
  min-height: 78px;
  padding-top: max(10px, env(safe-area-inset-top));
}

.brand-identity { display: inline-flex; align-items: center; gap: 11px; color: white; }
.logo-mark { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border: 1px solid rgb(255 255 255 / 42%); border-radius: 15px; background: rgb(255 255 255 / 18%); box-shadow: 0 8px 20px rgb(83 11 111 / 22%), inset 0 1px 0 rgb(255 255 255 / 30%); backdrop-filter: blur(8px); }
.logo-mark svg { width: 30px; height: 30px; overflow: visible; }
.logo-mark path:first-child { fill: white; filter: drop-shadow(0 3px 3px rgb(74 9 113 / 25%)); }
.logo-mark path:last-child { fill: var(--cyan); }
.brand-copy { display: grid; gap: 1px; }
.brand-copy strong { font-size: 19px; font-weight: 800; line-height: 1; letter-spacing: .02em; }
.brand-copy small { color: rgb(255 255 255 / 72%); font-size: 8px; font-weight: 800; letter-spacing: .17em; }

.search-wrap { position: relative; z-index: 2; }
.search-box { display: flex; align-items: center; height: 52px; padding: 0 16px; border: 1px solid rgb(255 255 255 / 48%); border-radius: 15px; background: white; box-shadow: 0 9px 25px rgb(99 15 117 / 19%); }
.search-box svg { width: 21px; flex: 0 0 auto; fill: none; stroke: #84847c; stroke-width: 1.8; stroke-linecap: round; }
.search-box input { width: 100%; height: 100%; margin-left: 11px; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 14px; }
.search-box input::placeholder { color: #9b9a94; }

.campaign-hero { position: relative; z-index: 1; min-height: 146px; padding-top: 22px; padding-bottom: 15px; }
.hero-slide { position: absolute; inset: 22px var(--page-padding) 15px; display: flex; align-items: center; justify-content: space-between; opacity: 0; transform: translateX(18px); pointer-events: none; transition: opacity .38s ease, transform .38s ease; }
.hero-slide.active { opacity: 1; transform: translateX(0); pointer-events: auto; }
.hero-kicker { margin: 0 0 7px; color: #ffd2ce; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.campaign-hero h1 { position: relative; z-index: 2; margin: 0; font-size: clamp(23px, 6.4vw, 29px); line-height: 1.08; letter-spacing: -.04em; }
.campaign-hero h1 .rotating-word, .campaign-hero h1 .hero-highlight { color: #ffc2b8; }
.rotating-word { display: inline-block; min-width: 4.5em; transition: opacity .22s ease, transform .22s ease, filter .22s ease; }
.rotating-word.is-changing { opacity: 0; transform: translateY(8px); filter: blur(3px); }
.hero-art { position: relative; width: 104px; height: 116px; flex: 0 0 auto; margin-right: 4px; }
.video-frame { position: absolute; right: 1px; bottom: 5px; display: grid; width: 94px; height: 78px; place-items: center; transform: rotate(4deg); border: 4px solid white; border-radius: 18px; background: linear-gradient(145deg, #5ce6d9, #20bfe5); box-shadow: 0 12px 24px rgb(74 9 113 / 27%); }
.video-frame::before { content: ""; position: absolute; top: -20px; left: 8px; width: 76px; height: 22px; transform: skewX(-16deg); border: 4px solid white; border-radius: 8px 8px 3px 3px; background: repeating-linear-gradient(120deg, white 0 10px, var(--violet) 10px 20px); }
.video-frame i { position: relative; z-index: 2; display: grid; width: 39px; height: 39px; place-items: center; transform: rotate(-4deg); border-radius: 50%; background: linear-gradient(145deg, var(--coral), var(--accent)); color: white; font-size: 15px; font-style: normal; text-indent: 2px; }
.video-frame b { position: absolute; right: 9px; bottom: 8px; width: 18px; height: 4px; border-radius: 3px; background: rgb(255 255 255 / 65%); box-shadow: -23px 0 0 rgb(255 255 255 / 38%); }
.video-frame.frame-purple { background: linear-gradient(145deg, #9265ff, #6022df); }
.video-frame.frame-purple i { background: linear-gradient(145deg, #35ded2, #19addf); }
.video-frame.frame-coral { background: linear-gradient(145deg, #ff9b82, #f64c78); }
.video-frame.frame-coral i { background: linear-gradient(145deg, #7124df, #b014ba); }
.spark { position: absolute; color: #ffd9d3; font-size: 18px; }
.spark-one { top: 7px; left: 0; }.spark-two { right: -7px; top: 42px; font-size: 13px; }
.hero-dots { position: relative; z-index: 2; display: flex; gap: 5px; justify-content: center; padding-bottom: 16px; }
.hero-dots button { width: 5px; height: 5px; padding: 0; border: 0; border-radius: 5px; background: rgb(255 255 255 / 38%); transition: width .25s ease, background .25s ease; }
.hero-dots .active { width: 17px; background: white; }

.section-block { padding-top: 27px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.section-heading h2 { margin: 2px 0 0; font-size: 21px; line-height: 1.2; letter-spacing: -.035em; }
.section-kicker { margin: 0; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.carousel-controls { display: flex; gap: 7px; }
.circle-control { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--ink); font-size: 24px; line-height: 1; }
.circle-control:active { transform: scale(.94); }

.category-scroller { display: flex; gap: 18px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.category-scroller::-webkit-scrollbar, .promo-scroller::-webkit-scrollbar { display: none; }
.category-page { display: grid; width: calc(100vw - (var(--page-padding) * 2)); max-width: calc(460px - (var(--page-padding) * 2)); flex: 0 0 auto; grid-template-columns: repeat(4, 1fr); gap: 18px 8px; scroll-snap-align: start; }
.category-card { display: grid; min-width: 0; justify-items: center; align-content: start; text-align: center; transition: transform .18s ease; }
.category-icon { position: relative; display: grid; width: 66px; height: 66px; margin-bottom: 8px; place-items: center; border: 4px solid white; border-radius: 50%; box-shadow: 0 0 0 2px rgb(225 211 221 / 78%), 0 7px 15px rgb(80 33 70 / 15%), inset 0 1px 2px rgb(255 255 255 / 70%); font-size: 30px; transition: transform .2s ease, box-shadow .2s ease; }
.category-card:nth-child(3n + 1) .category-icon { box-shadow: 0 0 0 2px rgb(255 114 102 / 26%), 0 7px 15px rgb(80 33 70 / 15%), inset 0 1px 2px rgb(255 255 255 / 70%); }
.category-card:nth-child(3n + 2) .category-icon { box-shadow: 0 0 0 2px rgb(40 217 208 / 25%), 0 7px 15px rgb(80 33 70 / 15%), inset 0 1px 2px rgb(255 255 255 / 70%); }
.category-card:nth-child(3n) .category-icon { box-shadow: 0 0 0 2px rgb(100 27 212 / 20%), 0 7px 15px rgb(80 33 70 / 15%), inset 0 1px 2px rgb(255 255 255 / 70%); }
.category-card:active { transform: translateY(2px) scale(.97); }
.category-card:active .category-icon { transform: scale(.94); box-shadow: 0 0 0 2px rgb(245 7 143 / 24%), 0 3px 8px rgb(80 33 70 / 13%); }
.category-card > span:nth-child(2) { display: grid; width: 100%; min-height: 25px; place-items: start center; overflow: hidden; font-size: 10.5px; font-weight: 700; line-height: 1.12; text-wrap: balance; }
.category-card small { display: none; }
.coral { background: #fff0e6; }.mint { background: #e9f8eb; }.sky { background: #eaf6fb; }.pink { background: #fff0f3; }
.amber { background: #fff4d9; }.lavender { background: #f1ecff; }.rose { background: #fbecef; }.blue { background: #e7f1ff; }
.category-page .category-icon { background-image: url("assets/category-thumbnails.webp"); background-repeat: no-repeat; background-size: 400% 400%; }
.category-page:nth-child(1) .category-card:nth-child(1) .category-icon { background-position: 0% 0%; }
.category-page:nth-child(1) .category-card:nth-child(2) .category-icon { background-position: 33.333% 0%; }
.category-page:nth-child(1) .category-card:nth-child(3) .category-icon { background-position: 66.666% 0%; }
.category-page:nth-child(1) .category-card:nth-child(4) .category-icon { background-position: 100% 0%; }
.category-page:nth-child(1) .category-card:nth-child(5) .category-icon { background-position: 0% 33.333%; }
.category-page:nth-child(1) .category-card:nth-child(6) .category-icon { background-position: 33.333% 33.333%; }
.category-page:nth-child(1) .category-card:nth-child(7) .category-icon { background-position: 66.666% 33.333%; }
.category-page:nth-child(1) .category-card:nth-child(8) .category-icon { background-position: 100% 33.333%; }
.category-page:nth-child(2) .category-card:nth-child(1) .category-icon { background-position: 0% 66.666%; }
.category-page:nth-child(2) .category-card:nth-child(2) .category-icon { background-position: 33.333% 66.666%; }
.category-page:nth-child(2) .category-card:nth-child(3) .category-icon { background-position: 66.666% 66.666%; }
.category-page:nth-child(2) .category-card:nth-child(4) .category-icon { background-position: 100% 66.666%; }
.category-page:nth-child(2) .category-card:nth-child(5) .category-icon { background-position: 0% 100%; }
.category-page:nth-child(2) .category-card:nth-child(6) .category-icon { background-position: 33.333% 100%; }
.category-page:nth-child(2) .category-card:nth-child(7) .category-icon { background-position: 66.666% 100%; }
.category-page:nth-child(2) .category-card:nth-child(8) .category-icon { background-position: 100% 100%; }
.category-progress { height: 4px; margin-top: 20px; background: linear-gradient(to right, var(--accent) 0 50%, var(--line) 50% 100%) content-box; border-radius: 4px; background-clip: content-box; }
.category-progress span { display: block; width: 50%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--accent), var(--violet)); transition: transform .25s ease; transform-origin: left center; }

.text-button { border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 800; }
.promo-scroller { display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.promo-card { position: relative; display: flex; width: calc(100vw - 54px); max-width: 406px; min-height: 273px; flex: 0 0 auto; overflow: hidden; padding: 24px 20px; border-radius: 24px; color: white; scroll-snap-align: center; }
.promo-card::before, .promo-card::after { content: ""; position: absolute; border-radius: 50%; background: rgb(255 255 255 / 8%); }
.promo-card::before { right: -60px; bottom: -70px; width: 210px; height: 210px; }
.promo-card::after { right: 35px; top: -65px; width: 135px; height: 135px; }
.promo-orange { background: linear-gradient(145deg, #ff756b 0%, #f50988 56%, #ae16ab 100%); }
.promo-purple { background: linear-gradient(145deg, #7328e5 0%, #b416c0 52%, #ef087f 100%); }
.promo-teal { background: linear-gradient(145deg, #3bded1 0%, #20acd8 48%, #661bd2 100%); }
.promo-copy { position: relative; z-index: 2; width: 62%; }
.promo-pill { display: inline-flex; padding: 6px 8px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 7px; background: rgb(255 255 255 / 12%); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.promo-copy h3 { margin: 17px 0 9px; font-size: 24px; font-weight: 500; line-height: 1.08; letter-spacing: -.04em; }
.promo-copy h3 strong { color: #ffd0c8; font-size: 31px; }
.promo-copy p { margin: 0; color: rgb(255 255 255 / 78%); font-size: 11px; line-height: 1.4; }
.promo-copy > a { display: inline-flex; width: fit-content; margin-top: 17px; padding: 10px 13px; align-items: center; border: 0; border-radius: 11px; background: white; color: var(--ink); font-size: 11px; font-weight: 800; box-shadow: 0 8px 18px rgb(73 19 0 / 18%); }
.promo-copy > a span { margin-left: 7px; color: var(--accent); }
.promo-visual { position: absolute; z-index: 1; right: 3px; bottom: 15px; width: 42%; height: 75%; }
.plate { position: absolute; right: -12px; bottom: 2px; display: grid; width: 136px; height: 136px; place-items: center; transform: rotate(-8deg); border: 9px solid rgb(255 255 255 / 92%); border-radius: 50%; background: #f6e7d4; box-shadow: 0 15px 30px rgb(51 17 0 / 24%); font-size: 65px; }
.mini-card { position: absolute; z-index: 2; top: 10px; right: 4px; display: grid; width: 55px; height: 55px; place-content: center; transform: rotate(7deg); border-radius: 15px; background: #171713; font-size: 21px; font-weight: 800; line-height: .8; text-align: center; box-shadow: 0 8px 18px rgb(53 20 0 / 26%); }
.mini-card span { display: block; margin-top: 4px; color: #ffaaa2; font-size: 9px; text-transform: uppercase; }
.promo-dots { display: flex; gap: 5px; justify-content: center; padding: 14px 0 2px; }
.promo-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 6px; background: #d9d5cc; transition: width .2s ease; }
.promo-dots button.active { width: 20px; background: linear-gradient(90deg, var(--accent), var(--violet)); }

/* Create page */
[hidden] { display: none !important; }
.create-shell { background: #fffafd; }
.create-brand-area { position: relative; overflow: hidden; padding-bottom: 26px; border-radius: 0 0 30px 30px; color: white; background: radial-gradient(circle at 105% 0%, #31dcd2 0 23%, transparent 23.5%), radial-gradient(circle at -10% 120%, #6420d5 0 28%, transparent 28.5%), linear-gradient(145deg, #ff7266 0%, #f5078f 48%, #9e18b7 100%); }
.create-brand-area::after { content: ""; position: absolute; right: -28px; bottom: -62px; width: 170px; height: 170px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 50%; box-shadow: 0 0 0 24px rgb(255 255 255 / 5%), 0 0 0 48px rgb(255 255 255 / 4%); }
.create-brand-area .brand-header, .create-intro { position: relative; z-index: 1; }
.create-brand-area .brand-header { justify-content: space-between; }
.close-create { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgb(255 255 255 / 35%); border-radius: 14px; background: rgb(255 255 255 / 16%); color: white; box-shadow: 0 8px 18px rgb(83 11 111 / 19%); }
.close-create svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.create-intro { padding-top: 12px; }
.create-intro .create-kicker { margin: 0 0 5px; color: #ffd1ca; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.create-intro h1 { margin: 0; font-size: 31px; line-height: 1.05; letter-spacing: -.045em; }
.create-intro > p:last-child { max-width: 330px; margin: 9px 0 0; color: rgb(255 255 255 / 78%); font-size: 12px; line-height: 1.45; }
.idea-browser { padding-top: 20px; }
.create-search-wrap { margin-bottom: 14px; }
.idea-search { display: flex; align-items: center; height: 50px; padding: 0 15px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 8px 22px rgb(94 31 78 / 9%); }
.idea-search svg { width: 20px; flex: 0 0 auto; fill: none; stroke: #8f8a8d; stroke-width: 1.8; stroke-linecap: round; }
.idea-search input { width: 100%; height: 100%; margin-left: 10px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.idea-search input::placeholder { color: #a39da1; }
.idea-filters { display: flex; gap: 8px; padding-bottom: 5px; overflow-x: auto; scrollbar-width: none; }
.idea-filters::-webkit-scrollbar { display: none; }
.idea-filters button { flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--line); border-radius: 20px; background: white; color: #7d747a; font-size: 11px; font-weight: 700; box-shadow: 0 4px 9px rgb(90 35 73 / 6%); }
.idea-filters button.active { border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--violet)); color: white; box-shadow: 0 7px 14px rgb(187 12 143 / 22%); }
.idea-list-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 23px; margin-bottom: 14px; }
.idea-list-heading h2 { margin: 2px 0 0; font-size: 21px; line-height: 1.15; letter-spacing: -.035em; }
.idea-list-heading > span { flex: 0 0 auto; padding-bottom: 2px; color: #928990; font-size: 10px; font-weight: 700; }
.idea-list { display: grid; gap: 11px; }
.idea-card { position: relative; display: grid; width: 100%; min-height: 112px; padding: 9px 10px 9px 9px; grid-template-columns: 94px minmax(0, 1fr) 22px; gap: 12px; align-items: center; overflow: hidden; border: 1px solid #eee3e9; border-radius: 20px; background: linear-gradient(145deg, #fff 20%, #fdf7fb 100%); color: var(--ink); box-shadow: 0 7px 17px rgb(85 35 70 / 8%); text-align: left; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.idea-card::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(var(--coral), var(--accent), var(--violet)); opacity: 0; transition: opacity .18s ease; }
.idea-card:active { transform: translateY(2px) scale(.99); }
.idea-card.selected { border-color: rgb(245 7 143 / 36%); box-shadow: 0 8px 20px rgb(187 12 143 / 14%); }
.idea-card.selected::before { opacity: 1; }
.idea-thumb { width: 94px; height: 94px; border-radius: 15px; background-image: url("assets/category-thumbnails.webp"); background-repeat: no-repeat; background-size: 400% 400%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 48%); }
.thumb-1 { background-position: 0% 0%; }.thumb-2 { background-position: 33.333% 0%; }.thumb-3 { background-position: 66.666% 0%; }.thumb-4 { background-position: 100% 0%; }
.thumb-5 { background-position: 0% 33.333%; }.thumb-6 { background-position: 33.333% 33.333%; }.thumb-7 { background-position: 66.666% 33.333%; }.thumb-8 { background-position: 100% 33.333%; }
.thumb-9 { background-position: 0% 66.666%; }.thumb-10 { background-position: 33.333% 66.666%; }.thumb-11 { background-position: 66.666% 66.666%; }.thumb-12 { background-position: 100% 66.666%; }
.thumb-13 { background-position: 0% 100%; }.thumb-14 { background-position: 33.333% 100%; }.thumb-15 { background-position: 66.666% 100%; }.thumb-16 { background-position: 100% 100%; }
.idea-copy { display: grid; min-width: 0; align-content: center; }
.idea-copy strong { margin-bottom: 4px; font-size: 14px; line-height: 1.15; letter-spacing: -.015em; }
.idea-copy small { display: -webkit-box; overflow: hidden; color: #7e767b; font-size: 10.5px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.idea-copy > span { display: flex; gap: 5px; margin-top: 8px; }
.idea-copy i { padding: 4px 6px; border-radius: 6px; background: #f7edf4; color: #a11a86; font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .02em; }
.idea-arrow { color: var(--accent); font-size: 24px; font-weight: 400; text-align: center; }
.idea-group-label { display: flex; align-items: center; gap: 10px; margin: 11px 0 1px; color: #8a7f86; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.idea-group-label::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.empty-ideas { margin: 30px 0; color: #81777d; font-size: 13px; text-align: center; }
.selection-toast { position: fixed; z-index: 30; right: 50%; bottom: calc(101px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 40px); padding: 10px 15px; transform: translate(50%, 12px); border-radius: 14px; background: #2a1828; color: white; box-shadow: 0 10px 24px rgb(43 21 39 / 25%); font-size: 11px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.selection-toast.show { opacity: 1; transform: translate(50%, 0); }

/* Three-step creation journey */
.creation-journey { position: relative; margin: 21px 0 4px; }
.creation-journey ol { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(3, 1fr); list-style: none; }
.creation-journey li { position: relative; display: grid; justify-items: center; min-width: 0; color: #9b9298; text-align: center; }
.creation-journey li:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 16px; left: calc(50% + 18px); width: calc(100% - 36px); height: 2px; border-radius: 2px; background: #e5dce2; }
.creation-journey li.complete:not(:last-child)::after { background: linear-gradient(90deg, var(--accent), var(--violet)); }
.step-marker { position: relative; z-index: 1; display: grid; width: 32px; height: 32px; margin-bottom: 7px; place-items: center; border: 2px solid #c9c0c6; border-radius: 50%; background: #fffafd; color: #90868d; font-size: 11px; font-weight: 800; box-shadow: 0 3px 8px rgb(78 35 66 / 8%); }
.creation-journey li.current .step-marker { border-color: white; background: linear-gradient(145deg, var(--coral), var(--accent), var(--violet)); color: white; box-shadow: 0 0 0 3px rgb(245 7 143 / 13%), 0 7px 14px rgb(172 12 137 / 22%); }
.creation-journey li.complete .step-marker { border-color: #6d1bc5; background: linear-gradient(145deg, var(--accent), var(--violet)); color: white; box-shadow: 0 5px 11px rgb(117 22 166 / 19%); }
.creation-journey li.success .step-marker { border-color: white; background: linear-gradient(145deg, var(--coral), var(--accent), var(--violet)); color: white; font-size: 18px; line-height: 1; box-shadow: 0 0 0 3px rgb(245 7 143 / 14%), 0 7px 14px rgb(172 12 137 / 24%); animation: success-marker-bob 1.8s ease-in-out infinite; transition: opacity .16s ease; }
.creation-journey li.success .step-marker.switching { opacity: .2; }
.creation-journey li.success .step-marker::after { content: ""; position: absolute; inset: -5px; border: 2px solid rgb(245 7 143 / 32%); border-radius: 50%; animation: success-marker-ring 1.8s ease-out infinite; }
.creation-journey strong { overflow: hidden; width: 100%; color: #8d848a; font-size: 11px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.creation-journey li.current strong, .creation-journey li.complete strong { color: var(--ink); }
.creation-journey small { margin-top: 2px; color: #aaa1a7; font-size: 8px; line-height: 1.15; }

/* Customize and Generate phases */
.flow-brand-bar { color: white; background: linear-gradient(115deg, #ff7266, #f5078f 52%, #711bd0); }
.flow-brand-bar .brand-header { justify-content: space-between; min-height: 72px; padding-top: max(5px, env(safe-area-inset-top)); }
.flow-back, .flow-close { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgb(255 255 255 / 32%); border-radius: 13px; background: rgb(255 255 255 / 15%); color: white; }
.flow-back svg, .flow-close svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flow-title { display: grid; justify-items: center; }
.flow-title strong { font-size: 16px; line-height: 1.1; }
.flow-title small { margin-top: 2px; color: rgb(255 255 255 / 68%); font-size: 7px; font-weight: 800; letter-spacing: .16em; }
.flow-content { padding-top: 24px; }
.flow-heading { margin-bottom: 18px; }
.flow-heading h1 { margin: 3px 0 6px; font-size: 27px; line-height: 1.08; letter-spacing: -.04em; }
.flow-heading > p:last-child { margin: 0; color: #81777e; font-size: 12px; line-height: 1.45; }
.chosen-theme-card { display: grid; min-height: 92px; padding: 8px; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 11px; align-items: center; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 7px 17px rgb(85 35 70 / 8%); }
.chosen-theme-image { background-image: url("assets/category-thumbnails.webp"); background-repeat: no-repeat; background-size: 400% 400%; }
.chosen-theme-image { width: 76px; height: 76px; border-radius: 13px; }
.chosen-theme-card > span:nth-child(2) { display: grid; min-width: 0; }
.chosen-theme-card small { color: var(--accent); font-size: 8px; font-weight: 800; letter-spacing: .09em; }
.chosen-theme-card strong { overflow: hidden; margin-top: 4px; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.chosen-theme-card a { padding: 7px; color: var(--accent); font-size: 10px; font-weight: 800; }
.customize-form { display: grid; gap: 20px; margin-top: 24px; }
.field-label { margin-bottom: 8px; color: var(--ink); font-size: 12px; font-weight: 800; }
.ai-genie-button { display: flex; min-height: 36px; padding: 4px 12px 4px 6px; align-items: center; gap: 7px; border: 0; border-radius: 18px; background: linear-gradient(135deg, var(--coral), var(--accent) 52%, var(--violet)); color: white; box-shadow: 0 7px 15px rgb(177 12 139 / 23%); font-size: 9px; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease; }
.ai-genie-button b { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 18%); font-size: 14px; }
.ai-genie-button:active { transform: translateY(1px) scale(.98); box-shadow: 0 4px 9px rgb(177 12 139 / 20%); }
.ai-genie-button.thinking b { animation: ai-spark-spin .7s linear infinite; }
.prompt-field { position: relative; }
.prompt-input-row { position: relative; }
.prompt-field textarea { width: 100%; min-height: 112px; padding: 14px; resize: vertical; border: 1px solid var(--line); border-radius: 16px; outline: 0; background: white; color: var(--ink); font: inherit; font-size: 12px; line-height: 1.5; box-shadow: 0 6px 14px rgb(82 34 68 / 6%); }
.prompt-field textarea:focus { border-color: rgb(245 7 143 / 48%); box-shadow: 0 0 0 3px rgb(245 7 143 / 9%); }
.prompt-footer { display: flex; min-height: 52px; margin-top: 7px; align-items: center; justify-content: space-between; gap: 10px; }
.prompt-actions { display: flex; margin-left: auto; align-items: center; gap: 8px; }
.prompt-actions .ai-genie-button { min-height: 36px; }
.prompt-tools { display: flex; order: 2; }
.prompt-tools button { position: relative; display: grid; width: 36px; height: 36px; padding: 0; place-items: center; border: 2px solid white; border-radius: 50%; background: linear-gradient(145deg, #a45cdb, var(--violet)); color: white; box-shadow: 0 0 0 2px rgb(100 27 212 / 14%), 0 7px 14px rgb(92 28 149 / 24%), inset 0 2px 2px rgb(255 255 255 / 30%); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.prompt-tools button::after { content: ""; position: absolute; inset: -5px; border: 2px solid transparent; border-radius: 50%; pointer-events: none; }
.prompt-tools button:active { transform: translateY(2px) scale(.96); box-shadow: 0 3px 8px rgb(92 28 149 / 22%), inset 0 2px 4px rgb(53 13 90 / 20%); }
.prompt-tools svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 2px rgb(52 12 91 / 28%)); }
.prompt-tools #voice-input.recording { background: linear-gradient(145deg, var(--coral), var(--accent)); box-shadow: 0 0 0 2px rgb(245 7 143 / 17%), 0 9px 18px rgb(220 20 118 / 28%), inset 0 2px 2px rgb(255 255 255 / 30%); }
.prompt-tools #voice-input.recording::after { border-color: rgb(245 7 143 / 32%); animation: create-pulse 1.4s ease-out infinite; }
.prompt-tools #voice-input.recording svg { animation: voice-pulse 1.1s ease-in-out infinite; }
.prompt-counter { flex: 0 0 auto; align-self: flex-start; margin-top: 2px; color: #a1979d; font-size: 8px; }
.voice-status { min-height: 13px; margin: 1px 2px 0; color: #8c8188; font-size: 8.5px; line-height: 1.3; }
.reference-section { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 6px 14px rgb(82 34 68 / 6%); }
.reference-heading { display: grid; min-height: 54px; padding: 0 14px; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 9px; align-items: center; cursor: pointer; list-style: none; }
.reference-heading::-webkit-details-marker { display: none; }
.reference-heading h2 { display: flex; min-width: 0; margin: 0; color: var(--ink); font-size: 12px; line-height: 1.2; }
.reference-heading h2 span { display: inline-block; min-width: 42px; margin-left: 3px; color: var(--accent); transition: opacity .14s ease, transform .14s ease; }
.reference-heading h2 span.changing { opacity: 0; transform: translateY(3px); }
.reference-heading small { color: #9e949b; font-size: 8px; }
.reference-heading svg { width: 17px; height: 17px; justify-self: end; fill: none; stroke: #a1979d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.reference-section[open] .reference-heading svg { transform: rotate(180deg); }
.reference-content { margin: 0 12px 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.reference-content > p:first-of-type { margin: 0 0 11px; color: #8b8188; font-size: 9px; line-height: 1.35; }
.reference-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.reference-add, .reference-preview { position: relative; height: 78px; overflow: hidden; border-radius: 13px; }
.reference-add { display: grid; align-content: center; justify-items: center; gap: 5px; border: 1px dashed rgb(245 7 143 / 42%); background: linear-gradient(145deg, #fff9fc, #f8f0fc); color: var(--accent); cursor: pointer; }
.reference-add span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: linear-gradient(145deg, var(--coral), var(--accent), var(--violet)); color: white; box-shadow: 0 4px 9px rgb(177 12 139 / 20%); font-size: 18px; line-height: 1; }
.reference-add strong { font-size: 8px; }
.reference-preview { margin: 0; background: #f1e8ef; }
.reference-preview img { width: 100%; height: 100%; object-fit: cover; }
.reference-preview button { position: absolute; top: 5px; right: 5px; display: grid; width: 22px; height: 22px; padding: 0; place-items: center; border: 1px solid rgb(255 255 255 / 62%); border-radius: 50%; background: rgb(31 18 28 / 68%); color: white; font-size: 15px; line-height: 1; backdrop-filter: blur(5px); }
.reference-status { min-height: 11px; margin: 5px 1px 0; color: var(--accent); font-size: 8px; line-height: 1.3; }

@keyframes voice-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.17); opacity: .68; }
}

@keyframes ai-spark-spin {
  to { transform: rotate(180deg); }
}
.choice-group { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 5px 12px rgb(83 35 70 / 5%); }
.choice-group > summary { display: grid; min-height: 54px; padding: 0 14px; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 9px; align-items: center; color: var(--ink); cursor: pointer; list-style: none; }
.choice-group > summary::-webkit-details-marker { display: none; }
.choice-group > summary span { font-size: 12px; font-weight: 800; }
.choice-group > summary small { color: var(--accent); font-size: 9px; font-weight: 800; }
.choice-group > summary svg { width: 17px; height: 17px; justify-self: end; fill: none; stroke: #a1979d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.choice-group[open] > summary svg { transform: rotate(180deg); }
.choice-grid { display: grid; gap: 8px; margin: 0 12px 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.style-choices { grid-template-columns: repeat(2, 1fr); }
.compact-choices { grid-template-columns: repeat(3, 1fr); }
.choice-grid button { min-height: 48px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: white; color: #71686e; font-size: 10px; font-weight: 700; box-shadow: 0 4px 10px rgb(83 35 70 / 5%); }
.style-choices button { display: flex; align-items: center; gap: 8px; text-align: left; }
.style-choices button span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; background: #f7edf5; color: var(--accent); font-size: 15px; }
.choice-grid button small { display: block; margin-top: 2px; color: #aaa0a7; font-size: 7px; }
.choice-grid button.active { border-color: rgb(245 7 143 / 38%); background: linear-gradient(145deg, #fff8fc, #f7ecff); color: var(--accent); box-shadow: 0 6px 14px rgb(186 14 144 / 11%); }
.sound-option { display: grid; min-height: 68px; padding: 12px 14px; grid-template-columns: 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 16px; background: white; }
.sound-option > span { display: grid; }
.sound-option strong { font-size: 12px; }
.sound-option small { margin-top: 3px; color: #8b8188; font-size: 9px; }
.sound-option input { position: absolute; opacity: 0; pointer-events: none; }
.sound-option i { position: relative; width: 44px; height: 25px; border-radius: 14px; background: #ddd3da; transition: background .2s ease; }
.sound-option i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgb(52 31 47 / 22%); transition: transform .2s ease; }
.sound-option input:checked + i { background: linear-gradient(90deg, var(--accent), var(--violet)); }
.sound-option input:checked + i::after { transform: translateX(19px); }
.primary-flow-button { display: flex; width: 100%; min-height: 54px; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 17px; background: linear-gradient(135deg, var(--coral), var(--accent) 48%, var(--violet)); color: white; box-shadow: 0 10px 21px rgb(177 12 139 / 25%); font-size: 13px; font-weight: 800; }
.primary-flow-button:active { transform: translateY(2px); box-shadow: 0 5px 11px rgb(177 12 139 / 22%); }
.primary-flow-button span { font-size: 17px; }
.review-card { display: grid; margin-top: 14px; padding: 5px 14px; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); border-radius: 18px; background: white; }
.review-card div { display: grid; padding: 12px 4px; }
.review-card div:nth-child(odd) { border-right: 1px solid var(--line); }
.review-card div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.review-card div:nth-child(even) { padding-left: 14px; }
.review-card span, .review-prompt > span { color: #9b9198; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.review-card strong { margin-top: 3px; font-size: 12px; }
.review-prompt { margin-top: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: #fcf6fa; }
.review-prompt p { margin: 7px 0 0; color: #756c72; font-size: 11px; line-height: 1.45; }
.generation-action { display: grid; gap: 9px; margin-top: 18px; justify-items: center; }
.generation-action small { color: #9d939a; font-size: 8px; }
.generate-button { animation: generate-attention 1.65s ease-in-out infinite; }
.generate-button span { color: #ffd4cf; }
.generation-progress, .generation-success { display: grid; margin-top: 18px; padding: 24px 18px; justify-items: center; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 8px 20px rgb(84 34 70 / 8%); text-align: center; }
.progress-orb { display: grid; width: 52px; height: 52px; margin-bottom: 13px; place-items: center; border-radius: 50%; background: linear-gradient(145deg, var(--coral), var(--accent), var(--violet)); color: white; box-shadow: 0 8px 18px rgb(179 12 139 / 25%); animation: progress-float 2s ease-in-out infinite; }
.generation-progress strong { font-size: 13px; }
.generation-progress > div { width: 100%; height: 7px; margin: 15px 0 7px; overflow: hidden; border-radius: 5px; background: #eee4eb; }
.generation-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--accent), var(--violet)); transition: width .2s ease; }
.generation-progress small { color: var(--accent); font-size: 10px; font-weight: 800; }
.generation-success > span { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; background: linear-gradient(145deg, var(--coral), var(--accent), var(--violet)); color: white; font-size: 22px; box-shadow: 0 8px 18px rgb(177 12 139 / 24%); }
.generation-success h2 { margin: 12px 0 5px; font-size: 19px; }
.generation-success p { margin: 0; color: #80767d; font-size: 10px; }
.generation-success-actions { display: grid; width: 100%; margin-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.generation-success-actions a { display: flex; min-height: 40px; padding: 8px 10px; align-items: center; justify-content: center; border-radius: 12px; background: #f8edf5; color: var(--accent); font-size: 9px; font-weight: 800; line-height: 1.2; }
.generation-success-actions .preview-view { background: linear-gradient(135deg, var(--coral), var(--accent), var(--violet)); color: white; box-shadow: 0 7px 15px rgb(177 12 139 / 20%); }

/* Account and local video library */
.account-content { padding-top: 24px; }
.account-profile { display: grid; min-height: 82px; padding: 13px; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 7px 17px rgb(85 35 70 / 8%); }
.account-avatar { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 17px; background: linear-gradient(145deg, var(--coral), var(--accent), var(--violet)); color: white; box-shadow: 0 7px 14px rgb(177 12 139 / 22%); font-size: 20px; font-weight: 800; }
.account-profile > span:last-child { display: grid; }
.account-profile strong { font-size: 14px; }
.account-profile small { margin-top: 4px; color: #8b8188; font-size: 9px; }
.account-menu { display: grid; margin-top: 18px; gap: 11px; }
.account-menu-link { display: grid; min-height: 76px; padding: 12px; grid-template-columns: 46px minmax(0, 1fr) 18px; gap: 11px; align-items: center; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 7px 17px rgb(85 35 70 / 8%); }
.account-menu-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: #f8edf5; color: var(--accent); }
.account-menu-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-menu-link > span:nth-child(2) { display: grid; }
.account-menu-link strong { font-size: 13px; }
.account-menu-link small { margin-top: 4px; color: #8b8188; font-size: 9px; }
.account-menu-link b { color: var(--accent); font-size: 24px; font-weight: 400; }

/* Account detail, membership and settings */
.account-subpage { padding-top: 24px; }
.subpage-heading { margin-bottom: 16px; }
.subpage-heading h1 { margin: 3px 0 5px; font-size: 25px; line-height: 1.12; letter-spacing: -.04em; }
.subpage-heading > p:last-child { margin: 0; color: #81777e; font-size: 11px; line-height: 1.45; }
.profile-summary-card { display: grid; min-height: 82px; padding: 13px; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 7px 17px rgb(85 35 70 / 8%); }
.profile-summary-card > span:last-child { display: grid; }
.profile-summary-card strong { font-size: 14px; }
.profile-summary-card small { margin-top: 4px; color: #8b8188; font-size: 9px; }
.account-detail-list { display: grid; margin: 14px 0 0; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 7px 17px rgb(85 35 70 / 7%); }
.account-detail-list > div { display: grid; min-height: 57px; padding: 12px 14px; grid-template-columns: minmax(92px, .8fr) minmax(0, 1.2fr); gap: 12px; align-items: center; }
.account-detail-list > div + div { border-top: 1px solid var(--line); }
.account-detail-list dt { color: #8b8188; font-size: 9px; font-weight: 700; }
.account-detail-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 10px; font-weight: 800; text-align: right; }
.account-detail-list a { color: var(--accent); }
.status-badge { display: inline-flex; width: fit-content; padding: 5px 8px; border-radius: 999px; background: #eaf8ef; color: #23814a; font-size: 8px; font-weight: 800; }

.membership-current-card { padding: 17px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 8px 20px rgb(84 34 70 / 8%); }
.membership-plan-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.membership-plan-heading > span { display: grid; }
.membership-plan-heading small { color: var(--accent); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.membership-plan-heading strong { margin-top: 3px; font-size: 20px; }
.membership-price { display: flex; margin: 18px 0 14px; align-items: baseline; gap: 4px; }
.membership-price strong { font-size: 29px; letter-spacing: -.04em; }
.membership-price span { color: #8b8188; font-size: 10px; }
.membership-meta { display: grid; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.membership-meta div { display: grid; padding: 12px 4px; gap: 3px; }
.membership-meta div + div { padding-left: 12px; border-left: 1px solid var(--line); }
.membership-meta dt { color: #938890; font-size: 8px; }
.membership-meta dd { margin: 0; font-size: 9px; font-weight: 800; }
.membership-current-card ul { display: grid; margin: 14px 0 16px; padding: 0; gap: 8px; list-style: none; }
.membership-current-card li { position: relative; padding-left: 19px; color: #6f656c; font-size: 9px; line-height: 1.4; }
.membership-current-card li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 900; }
.primary-gradient-button, .secondary-action-button { width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 13px; font-size: 10px; font-weight: 800; }
.primary-gradient-button { background: linear-gradient(135deg, var(--coral), var(--accent), var(--violet)); color: white; box-shadow: 0 7px 16px rgb(177 12 139 / 22%); }
.plan-options { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 7px 17px rgb(85 35 70 / 7%); }
.plan-options[hidden] { display: none; }
.subsection-heading h2 { margin: 0; font-size: 16px; }
.subsection-heading p { margin: 4px 0 0; color: #8b8188; font-size: 8px; }
.plan-choice-list { display: grid; margin: 13px 0; gap: 8px; }
.plan-choice { display: grid; min-height: 54px; padding: 10px 11px; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 13px; background: #fffafd; }
.plan-choice:has(input:checked) { border-color: rgb(245 7 143 / 48%); background: #fff3fa; box-shadow: 0 0 0 3px rgb(245 7 143 / 7%); }
.plan-choice input { margin: 0; accent-color: var(--accent); }
.plan-choice > span { display: grid; }
.plan-choice strong { font-size: 11px; }
.plan-choice small { margin-top: 2px; color: #8b8188; font-size: 8px; }
.plan-choice b { color: var(--accent); font-size: 10px; }
.secondary-action-button { border: 1px solid rgb(245 7 143 / 20%); background: #f8edf5; color: var(--accent); }
.account-action-status { min-height: 14px; margin: 8px 0 0; color: var(--accent); font-size: 9px; font-weight: 700; text-align: center; }

.settings-card { display: grid; padding: 15px; gap: 14px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 7px 17px rgb(85 35 70 / 7%); }
.settings-card + .settings-card { margin-top: 12px; }
.settings-row-heading { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; }
.settings-row-heading > span:last-child { display: grid; }
.settings-row-heading strong { font-size: 12px; }
.settings-row-heading small { margin-top: 3px; color: #8b8188; font-size: 8px; }
.settings-symbol { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #f8edf5; color: var(--accent); font-size: 16px; font-weight: 800; }
.select-field select { width: 100%; min-height: 42px; padding: 8px 34px 8px 11px; border: 1px solid var(--line); border-radius: 12px; outline: 0; background: #fffafd; color: var(--ink); font-size: 10px; font-weight: 700; }
.theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.theme-options button { min-height: 42px; border: 1px solid var(--line); border-radius: 12px; background: #fffafd; color: #71686e; font-size: 10px; font-weight: 800; }
.theme-options button[aria-checked="true"] { border-color: rgb(245 7 143 / 42%); background: #f8edf5; color: var(--accent); box-shadow: 0 0 0 3px rgb(245 7 143 / 7%); }
.help-center-form { display: grid; gap: 10px; }
.support-field { display: grid; gap: 5px; }
.support-field > span { color: #6f656c; font-size: 9px; font-weight: 800; }
.support-field :is(input, select, textarea) { width: 100%; min-height: 42px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 12px; outline: 0; background: #fffafd; color: var(--ink); font-size: 10px; }
.support-select { position: relative; min-width: 0; }
.support-select-trigger { display: flex; width: 100%; min-height: 42px; padding: 9px 10px 9px 11px; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 12px; outline: 0; background: #fffafd; color: #8f858c; font-size: 10px; text-align: start; }
.support-select-trigger.has-value { color: var(--ink); }
.support-select-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-select-trigger svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.support-select-trigger[aria-expanded="true"] { border-color: rgb(245 7 143 / 55%); box-shadow: 0 0 0 3px rgb(245 7 143 / 8%); }
.support-select-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.support-select-trigger[aria-invalid="true"] { border-color: #df315b; box-shadow: 0 0 0 3px rgb(223 49 91 / 9%); }
.support-select-menu { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; left: 0; display: grid; max-height: 224px; padding: 6px; overflow-y: auto; border: 1px solid rgb(245 7 143 / 16%); border-radius: 14px; background: white; box-shadow: 0 14px 34px rgb(70 29 58 / 19%); }
.support-select-menu[hidden] { display: none; }
.support-select-menu button { min-height: 37px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: #5e535a; font-size: 10px; line-height: 1.35; text-align: start; white-space: normal; }
.support-select-menu button:is(:hover, :focus-visible), .support-select-menu button[aria-selected="true"] { outline: 0; background: #f9edf6; color: var(--accent); }
.support-field textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
.support-field :is(input, select, textarea):focus { border-color: rgb(245 7 143 / 55%); box-shadow: 0 0 0 3px rgb(245 7 143 / 8%); }
.support-character-count { margin-top: -5px; color: #9a9097; direction: ltr; font-size: 8px; text-align: end; unicode-bidi: isolate; }
.support-form-status { min-height: 12px; margin: -2px 0 0; color: var(--accent); font-size: 8px; font-weight: 700; line-height: 1.4; text-align: center; }
.logout-section { display: flex; margin-top: 12px; padding: 15px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #ffd4db; border-radius: 18px; background: #fff8f9; }
.logout-section > div { display: grid; }
.logout-section strong { font-size: 12px; }
.logout-section small { max-width: 190px; margin-top: 3px; color: #8b8188; font-size: 8px; line-height: 1.35; }
.logout-section button { min-height: 38px; padding: 8px 12px; flex: 0 0 auto; border: 1px solid #f3b4c1; border-radius: 11px; background: white; color: #c62d54; font-size: 9px; font-weight: 800; }
.safe-bottom-space.settings-safe-bottom { height: calc(107px + env(safe-area-inset-bottom)); }
.safe-bottom-space.help-safe-bottom { height: calc(107px + env(safe-area-inset-bottom)); }
.safe-bottom-space.account-safe-bottom { height: calc(107px + env(safe-area-inset-bottom)); }

/* Login and prototype authentication */
.login-body { min-width: 320px; background: radial-gradient(circle at 50% 0, #46223f, #130d14 48%, #09070a); }
.login-shell { width: 100%; max-width: 460px; min-height: 100svh; margin: 0 auto; overflow: hidden; background: #160f17; color: white; box-shadow: 0 0 60px rgb(0 0 0 / 42%); }
.login-visual { position: relative; height: 380px; overflow: hidden; background: linear-gradient(145deg, var(--coral), var(--accent), var(--violet)); }
.login-visual video { width: 100%; height: 100%; display: block; object-fit: cover; }
.login-visual-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(15 8 17 / 28%) 0%, rgb(73 11 75 / 12%) 42%, rgb(22 10 22 / 90%) 100%), linear-gradient(125deg, rgb(255 92 112 / 20%), transparent 47%, rgb(101 27 212 / 24%)); }
.login-brand { position: absolute; z-index: 2; top: 0; right: 0; left: 0; display: flex; min-height: 86px; padding-top: max(15px, env(safe-area-inset-top)); align-items: center; justify-content: space-between; }
.login-brand .logo-mark { width: 41px; height: 41px; border-radius: 14px; }
.login-brand .brand-copy strong { font-size: 16px; }
.login-hero-copy { position: absolute; z-index: 2; right: 0; bottom: 54px; left: 0; }
.login-theme-label { display: inline-flex; padding: 6px 9px; border: 1px solid rgb(255 255 255 / 28%); border-radius: 999px; background: rgb(245 7 143 / 38%); color: white; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(8px); }
.login-hero-copy h1 { margin: 10px 0 6px; font-size: clamp(28px, 8.2vw, 37px); line-height: .98; letter-spacing: -.055em; text-shadow: 0 4px 18px rgb(20 7 18 / 45%); }
.login-hero-copy h1 em { color: #ffbdc0; font-style: normal; }
.login-hero-copy p { max-width: 290px; margin: 0; color: rgb(255 255 255 / 78%); font-size: 10px; line-height: 1.4; }
.login-theme-dots { display: flex; margin-top: 12px; gap: 5px; }
.login-theme-dots i { width: 5px; height: 5px; border-radius: 5px; background: rgb(255 255 255 / 34%); transition: width .2s ease, background .2s ease; }
.login-theme-dots i.active { width: 20px; background: white; }
.login-panel { position: relative; z-index: 3; min-height: calc(100svh - 342px); margin-top: -34px; padding: 25px var(--page-padding) max(24px, env(safe-area-inset-bottom)); border: 1px solid rgb(255 255 255 / 9%); border-radius: 30px 30px 0 0; background: linear-gradient(180deg, #211721, #130e15 80%); box-shadow: 0 -14px 34px rgb(20 4 21 / 35%); }
.login-heading h2 { margin: 3px 0 5px; font-size: 24px; letter-spacing: -.04em; }
.login-heading > p:last-child { margin: 0; color: #bcaeb8; font-size: 10px; }
.login-form { display: grid; margin-top: 18px; gap: 11px; }
.login-form > label { display: grid; gap: 6px; }
.login-form > label > span:first-child { color: #d7cbd3; font-size: 9px; font-weight: 700; }
.login-form input { width: 100%; height: 46px; padding: 0 13px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 13px; outline: 0; background: rgb(255 255 255 / 7%); color: white; font-size: 11px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%); }
.login-form input::placeholder { color: #897b85; }
.login-form input:focus { border-color: rgb(245 7 143 / 68%); box-shadow: 0 0 0 3px rgb(245 7 143 / 12%); }
.login-form input[aria-invalid="true"] { border-color: #ff6f8e; }
.login-password-field { position: relative; display: block; }
.login-password-field input { padding-right: 62px; }
.login-password-field button { position: absolute; top: 50%; right: 8px; min-width: 46px; min-height: 32px; padding: 5px 7px; transform: translateY(-50%); border: 0; border-radius: 9px; background: rgb(255 255 255 / 8%); color: #e2d8df; font-size: 8px; font-weight: 800; }
.login-status { min-height: 12px; margin: -2px 0 0; color: #ff8aa3; font-size: 8px; font-weight: 700; text-align: center; }
.login-submit { min-height: 46px; border: 0; border-radius: 13px; background: linear-gradient(135deg, var(--coral), var(--accent), var(--violet)); color: white; box-shadow: 0 8px 19px rgb(177 12 139 / 28%); font-size: 10px; font-weight: 800; }
.demo-account { display: flex; min-height: 56px; margin-top: 13px; padding: 10px 11px; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid rgb(245 7 143 / 24%); border-radius: 14px; background: rgb(245 7 143 / 8%); }
.demo-account > span { display: grid; min-width: 0; }
.demo-account strong { font-size: 9px; }
.demo-account small { margin-top: 3px; overflow: hidden; color: #c6b6c1; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.demo-account button { min-height: 34px; padding: 7px 10px; flex: 0 0 auto; border: 1px solid rgb(255 255 255 / 13%); border-radius: 10px; background: rgb(255 255 255 / 8%); color: #ff8fd0; font-size: 8px; font-weight: 800; }
.login-prototype-note { margin: 12px 0 0; color: #776b74; font-size: 7px; line-height: 1.4; text-align: center; }

@media (max-width: 360px) {
  .login-visual { height: 350px; }
  .login-hero-copy { bottom: 47px; }
  .login-panel { min-height: calc(100svh - 318px); padding-top: 22px; }
  .login-heading h2 { font-size: 22px; }
}

/* Reference-aligned welcome, login and registration flow */
.welcome-body { min-width: 320px; background: #f1e8ed; }
.auth-body { min-width: 320px; background: #f1e8ed; }
.welcome-shell, .auth-shell { position: relative; width: 100%; max-width: 460px; min-height: 100svh; margin: 0 auto; overflow: hidden; color: white; background: #130d14; box-shadow: 0 0 60px rgb(0 0 0 / 45%); }
.welcome-shell { height: 100svh; color: var(--ink); background: var(--surface); box-shadow: 0 0 60px rgb(91 27 78 / 17%); }
.welcome-shell > video { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; }
.welcome-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(255 255 255 / 27%) 0%, transparent 39%, rgb(255 250 253 / 12%) 55%, rgb(255 250 253 / 88%) 76%, #fffafd 92%), linear-gradient(130deg, rgb(255 114 102 / 10%), transparent 48%, rgb(100 27 212 / 12%)); }
.welcome-brand { position: absolute; z-index: 2; top: 0; right: 0; left: 0; display: flex; min-height: 92px; padding-top: max(16px, env(safe-area-inset-top)); align-items: center; justify-content: space-between; }
.welcome-brand .brand-identity { color: var(--ink); }
.welcome-brand .logo-mark { width: 43px; height: 43px; border-color: rgb(255 255 255 / 82%); border-radius: 14px; background: linear-gradient(145deg, var(--coral), var(--accent), var(--violet)); box-shadow: 0 8px 20px rgb(105 22 107 / 21%); }
.welcome-brand .brand-copy small { color: rgb(35 27 33 / 62%); }
.welcome-content { position: absolute; z-index: 2; right: 0; bottom: max(26px, env(safe-area-inset-bottom)); left: 0; }
.welcome-content h1 { margin: 11px 0 7px; color: var(--ink); font-size: clamp(31px, 9vw, 41px); line-height: .98; letter-spacing: -.055em; text-shadow: 0 2px 0 rgb(255 255 255 / 72%); }
.welcome-content h1 em { color: var(--accent); font-style: normal; }
.welcome-content > p { max-width: 315px; margin: 0; color: #71686e; font-size: 11px; line-height: 1.45; }
.welcome-content .login-theme-label { border-color: rgb(245 7 143 / 19%); background: rgb(255 255 255 / 88%); color: var(--accent); box-shadow: 0 5px 13px rgb(80 32 68 / 9%); }
.welcome-content .login-theme-dots i { background: #d7cbd3; }
.welcome-content .login-theme-dots i.active { background: var(--accent); }
.welcome-actions { display: grid; margin-top: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.welcome-actions a { display: flex; min-height: 47px; padding: 10px 12px; align-items: center; justify-content: center; border: 1px solid rgb(245 7 143 / 34%); border-radius: 999px; background: white; color: var(--accent); box-shadow: 0 7px 18px rgb(85 35 70 / 9%); font-size: 10px; font-weight: 800; }
.welcome-actions a.primary { border: 0; background: linear-gradient(135deg, var(--coral), var(--accent), var(--violet)); color: white; box-shadow: 0 9px 22px rgb(177 12 139 / 27%); }

.auth-shell { color: var(--ink); background: #fffafd; box-shadow: 0 0 60px rgb(91 27 78 / 18%); }
.auth-shell::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 230px; border-radius: 0 0 34px 34px; background: radial-gradient(circle at 105% 3%, #28d9d0 0 21%, transparent 21.5%), radial-gradient(circle at -10% 106%, #641bd4 0 24%, transparent 24.5%), radial-gradient(circle at 76% 30%, rgb(255 255 255 / 21%) 0 4px, transparent 5px), linear-gradient(145deg, #ff7266 0%, #f5078f 48%, #a918b3 73%, #681bd2 100%); box-shadow: 0 12px 28px rgb(111 20 115 / 16%); pointer-events: none; }
.auth-brand { position: relative; z-index: 1; display: grid; min-height: 94px; padding-top: max(15px, env(safe-area-inset-top)); grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 10px; align-items: center; }
.auth-brand .brand-identity { justify-self: center; }
.auth-brand .logo-mark { width: 38px; height: 38px; border-radius: 13px; }
.auth-brand .brand-copy strong { font-size: 15px; }
.auth-back { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgb(255 255 255 / 42%); border-radius: 50%; background: rgb(255 255 255 / 18%); color: white; box-shadow: 0 7px 16px rgb(93 13 111 / 17%); backdrop-filter: blur(8px); }
.auth-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-header-spacer { width: 38px; }
.auth-step-label { display: grid; min-width: 38px; min-height: 28px; padding: 5px; place-items: center; border: 1px solid rgb(255 255 255 / 40%); border-radius: 999px; background: rgb(255 255 255 / 17%); color: white; font-size: 8px; font-weight: 800; }
.auth-content { position: relative; z-index: 1; display: grid; min-height: 0; margin: 48px 14px max(24px, env(safe-area-inset-bottom)); padding: 26px 18px 22px; align-content: start; border: 1px solid var(--line); border-radius: 26px; background: rgb(255 255 255 / 97%); box-shadow: 0 18px 40px rgb(85 35 70 / 14%); }
.auth-heading { margin-bottom: 22px; text-align: center; }
.auth-heading h1 { margin: 5px 0 8px; font-size: 29px; letter-spacing: -.045em; }
.auth-heading > p:last-child { max-width: 300px; margin: 0 auto; color: #776c73; font-size: 10px; line-height: 1.45; }
.auth-content .login-form { margin-top: 0; }
.auth-content .login-form > label > span:first-child,
.auth-content .register-step > label > span:first-child { color: #645a61; }
.auth-content .login-form input { height: 50px; border-color: var(--line); border-radius: 18px; background: white; color: var(--ink); box-shadow: 0 7px 18px rgb(85 35 70 / 7%); }
.auth-content .login-form input::placeholder { color: #a1999f; }
.auth-content .login-form input:focus { border-color: rgb(245 7 143 / 55%); box-shadow: 0 0 0 3px rgb(245 7 143 / 9%), 0 8px 18px rgb(85 35 70 / 8%); }
.auth-content .login-password-field button { background: #f8edf5; color: var(--accent); }
.auth-content .login-submit { min-height: 48px; margin-top: 2px; border-radius: 999px; }
.auth-content .demo-account { margin-top: 16px; border-color: rgb(245 7 143 / 18%); border-radius: 18px; background: white; box-shadow: 0 7px 18px rgb(85 35 70 / 7%); }
.auth-content .demo-account small { color: #877b83; }
.auth-content .demo-account button { border-color: rgb(245 7 143 / 17%); background: #f8edf5; color: var(--accent); }
.auth-switch { margin: 18px 0 0; color: #82777e; font-size: 9px; text-align: center; }
.auth-switch a { color: #ff5eb4; font-weight: 800; }
.auth-content .login-prototype-note { color: #aaa0a7; }
.register-step { display: grid; gap: 11px; }
.register-step[hidden] { display: none; }
.register-step > label { display: grid; gap: 6px; }
.register-step > label > span:first-child { color: #d7cbd3; font-size: 9px; font-weight: 700; }

@media (max-width: 360px) {
  .welcome-content { bottom: max(20px, env(safe-area-inset-bottom)); }
  .welcome-content h1 { font-size: 31px; }
  .welcome-actions { margin-top: 17px; }
  .auth-content { margin: 34px 12px max(20px, env(safe-area-inset-bottom)); padding: 22px 14px 18px; }
  .auth-heading { margin-bottom: 18px; }
  .auth-heading h1 { font-size: 25px; }
  .auth-heading .section-kicker { color: var(--accent); }
  .auth-heading h1 { color: var(--ink); text-shadow: none; }
  .auth-heading > p:last-child { color: #776c73; }
  .auth-content .login-form input { height: 46px; }
}

.library-content { padding-top: 24px; }
.library-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.library-heading h1 { margin: 2px 0 0; font-size: 26px; line-height: 1.1; letter-spacing: -.04em; }
.library-heading > span { flex: 0 0 auto; padding-bottom: 2px; color: #928990; font-size: 10px; font-weight: 700; }
.video-library-list { display: grid; gap: 11px; }
.video-library-card { display: grid; min-height: 112px; padding: 9px; grid-template-columns: 94px minmax(0, 1fr); gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 20px; background: white; color: var(--ink); box-shadow: 0 7px 17px rgb(85 35 70 / 8%); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.video-library-card:active { transform: translateY(2px) scale(.99); }
.video-library-card.selected { border-color: rgb(245 7 143 / 48%); box-shadow: 0 0 0 3px rgb(245 7 143 / 8%), 0 8px 19px rgb(177 12 139 / 12%); }
.video-library-thumb { position: relative; width: 94px; height: 94px; overflow: hidden; border-radius: 15px; background-image: url("assets/category-thumbnails.webp"); background-repeat: no-repeat; background-size: 400% 400%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 48%); }
.video-library-thumb::after { content: ""; position: absolute; inset: 48% 0 0; background: linear-gradient(transparent, rgb(30 13 29 / 64%)); }
.video-library-thumb i { position: absolute; z-index: 1; right: 7px; bottom: 7px; padding: 4px 6px; border-radius: 6px; background: rgb(35 16 32 / 62%); color: white; font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .08em; backdrop-filter: blur(5px); }
.video-library-copy { display: grid; min-width: 0; align-content: center; }
.video-library-copy > strong { overflow: hidden; font-size: 14px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.video-library-copy > p { display: -webkit-box; overflow: hidden; margin: 5px 0 0; color: #7e767b; font-size: 9.5px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.video-library-tags { display: flex; gap: 4px; margin-top: 8px; }
.video-library-tags span { padding: 3px 5px; border-radius: 6px; background: #f7edf4; color: #a11a86; font-size: 7px; font-weight: 800; }
.video-library-copy time { margin-top: 6px; color: #aaa0a7; font-size: 7.5px; }
.video-library-empty { display: grid; margin-top: 12px; padding: 32px 20px; justify-items: center; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 7px 17px rgb(85 35 70 / 8%); text-align: center; }
.video-library-empty > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; background: linear-gradient(145deg, var(--coral), var(--accent), var(--violet)); color: white; font-size: 20px; box-shadow: 0 8px 18px rgb(177 12 139 / 22%); }
.video-library-empty h2 { margin: 13px 0 5px; font-size: 18px; }
.video-library-empty p { max-width: 260px; margin: 0; color: #80767d; font-size: 10px; line-height: 1.45; }
.video-library-empty a { margin-top: 15px; padding: 10px 14px; border-radius: 12px; background: #f8edf5; color: var(--accent); font-size: 10px; font-weight: 800; }

/* Saved-video player */
.player-page-content { padding-top: 20px; }
.video-player-shell { overflow: hidden; border-radius: 22px; background: #1c0d23; box-shadow: 0 12px 26px rgb(60 20 55 / 20%); }
.video-stage { position: relative; width: 100%; height: min(92vw, 380px); overflow: hidden; background: #281032; }
.video-stage video { width: 100%; height: 100%; display: block; object-fit: cover; }
.video-overlay-play { position: absolute; top: 50%; left: 50%; display: grid; width: 64px; height: 64px; padding: 0 0 0 4px; place-items: center; transform: translate(-50%, -50%); border: 2px solid rgb(255 255 255 / 78%); border-radius: 50%; background: rgb(245 7 143 / 82%); color: white; box-shadow: 0 10px 25px rgb(55 11 74 / 34%); font-size: 23px; backdrop-filter: blur(8px); }
.video-overlay-play[hidden] { display: none; }
.player-controls { padding: 12px 14px 14px; color: white; background: linear-gradient(180deg, #24122c, #170b1c); }
.player-seek-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 8px; align-items: center; }
.player-seek-row span { color: rgb(255 255 255 / 68%); font-size: 8px; font-variant-numeric: tabular-nums; }
.player-seek-row span:last-child { text-align: right; }
.player-seek-row input { width: 100%; height: 4px; accent-color: var(--accent); cursor: pointer; }
.player-transport { display: flex; margin-top: 11px; align-items: center; justify-content: center; gap: 8px; }
.player-transport button { display: grid; min-width: 44px; min-height: 44px; padding: 5px 7px; place-items: center; border: 1px solid rgb(255 255 255 / 16%); border-radius: 13px; background: rgb(255 255 255 / 8%); color: white; }
.player-transport button > span { font-size: 18px; line-height: 1; }
.player-transport button small { margin-top: 2px; color: rgb(255 255 255 / 62%); font-size: 7px; }
.player-transport .player-main-action { display: flex; min-width: 96px; padding: 8px 12px; justify-content: center; gap: 8px; border: 0; background: linear-gradient(135deg, var(--coral), var(--accent), var(--violet)); box-shadow: 0 7px 16px rgb(177 12 139 / 28%); }
.player-main-action b { font-size: 10px; }
.player-status { margin: 8px 0 0; color: rgb(255 255 255 / 62%); font-size: 8px; text-align: center; }
.player-status:empty { display: none; }
.video-player-shell:fullscreen, .video-player-shell:-webkit-full-screen { width: 100vw; height: 100vh; display: grid; max-width: none; grid-template-rows: minmax(0, 1fr) auto; border-radius: 0; background: #09050b; }
.video-player-shell:fullscreen .video-stage, .video-player-shell:-webkit-full-screen .video-stage { width: 100%; height: 100%; }
.video-player-shell:fullscreen .video-stage video, .video-player-shell:-webkit-full-screen .video-stage video { object-fit: contain; }
.player-video-info { margin-top: 15px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 7px 17px rgb(85 35 70 / 7%); }
.player-video-info h1 { margin: 3px 0 6px; font-size: 21px; line-height: 1.15; letter-spacing: -.035em; }
.player-video-info > p:nth-of-type(2) { margin: 0; color: #756c72; font-size: 10px; line-height: 1.45; }
.player-video-tags { display: flex; gap: 5px; margin-top: 10px; }
.player-video-tags span { padding: 4px 6px; border-radius: 6px; background: #f7edf4; color: #a11a86; font-size: 8px; font-weight: 800; }
.player-video-info time { display: block; margin-top: 9px; color: #aaa0a7; font-size: 8px; }
.share-panel { margin-top: 15px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 7px 17px rgb(85 35 70 / 7%); }
.share-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.share-heading h2 { margin: 2px 0 0; font-size: 18px; }
.share-heading > button { display: flex; min-height: 36px; padding: 7px 11px; align-items: center; gap: 6px; border: 0; border-radius: 11px; background: linear-gradient(135deg, var(--coral), var(--accent), var(--violet)); color: white; box-shadow: 0 6px 13px rgb(177 12 139 / 20%); font-size: 9px; font-weight: 800; }
.social-share-grid { display: grid; margin-top: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.social-share-grid a { display: flex; min-height: 46px; padding: 8px 10px; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 13px; background: #fffafd; color: #5f565c; font-size: 9px; font-weight: 800; }
.social-share-grid b { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: white; font-size: 12px; }
.share-whatsapp b { background: #25d366; }.share-facebook b { background: #1877f2; }.share-x b { background: #111; }.share-linkedin b { background: #0a66c2; }
.copy-video-link { display: flex; width: 100%; min-height: 42px; margin-top: 9px; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgb(245 7 143 / 18%); border-radius: 12px; background: #f8edf5; color: var(--accent); font-size: 9px; font-weight: 800; }
.delete-video-button { display: flex; width: 100%; min-height: 42px; margin-top: 15px; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--coral), var(--accent), var(--violet)); color: white; box-shadow: 0 6px 13px rgb(177 12 139 / 20%); font-size: 9px; font-weight: 800; }
.delete-video-button[hidden] { display: none; }
.share-status { min-height: 11px; margin: 6px 0 0; color: #8b8188; font-size: 8px; text-align: center; }

.safe-bottom-space { height: calc(100px + env(safe-area-inset-bottom)); }
.customize-safe-bottom { height: calc(113px + env(safe-area-inset-bottom)); }
.player-safe-bottom { height: calc(107px + env(safe-area-inset-bottom)); }
.bottom-nav { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; width: 100%; max-width: 460px; min-height: 82px; margin: 0 auto; padding: 9px 28px calc(8px + env(safe-area-inset-bottom)); grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgb(255 255 255 / 85%); border-radius: 22px 22px 0 0; background: linear-gradient(180deg, rgb(255 255 255 / 97%), rgb(248 244 236 / 96%)); box-shadow: 0 -2px 0 rgb(255 255 255 / 90%), 0 -11px 26px rgb(72 43 18 / 16%), 0 -20px 48px rgb(72 43 18 / 7%); backdrop-filter: blur(16px); }
.bottom-nav a { position: relative; display: grid; grid-template-rows: 38px 14px; gap: 4px; place-items: center; align-content: center; color: #96948d; font-size: 10px; font-weight: 700; }
.bottom-nav a > span:last-child { align-self: end; line-height: 14px; text-align: center; }
.nav-icon { display: grid; width: 42px; height: 38px; place-items: center; transition: transform .18s ease, filter .18s ease, color .18s ease; }
.bottom-nav svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(1px 2px 1px rgb(62 48 32 / 22%)) drop-shadow(-1px -1px 0 rgb(255 255 255 / 95%)); }
.bottom-nav a:active .nav-icon { transform: translateY(2px) scale(.96); filter: brightness(.92); }
.bottom-nav a.active { color: var(--accent); }
.bottom-nav a.active svg { filter: drop-shadow(1px 3px 2px rgb(197 11 137 / 32%)) drop-shadow(-1px -1px 0 rgb(255 255 255 / 95%)); }
.bottom-nav a.active::before { content: ""; position: absolute; top: -9px; width: 31px; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--coral), var(--accent), var(--violet)); box-shadow: 0 3px 8px rgb(224 8 139 / 30%); }
.bottom-nav a.create-action { z-index: 2; color: var(--accent); font-size: 10px; font-weight: 800; }
.create-action .nav-icon { position: relative; width: 58px; height: 58px; transform: translateY(-13px); border: 3px solid rgb(255 255 255 / 92%); border-radius: 50%; background: linear-gradient(145deg, var(--coral) 0%, var(--accent) 52%, var(--violet) 100%); box-shadow: 0 10px 20px rgb(179 10 137 / 32%), 0 4px 8px rgb(80 21 128 / 22%), inset 0 2px 2px rgb(255 255 255 / 38%); animation: create-glow 2.6s ease-in-out infinite; isolation: isolate; }
.create-action .nav-icon::before { content: ""; position: absolute; z-index: -1; inset: -7px; border: 2px solid rgb(245 7 143 / 28%); border-radius: 50%; animation: create-pulse 2.6s ease-out infinite; }
.create-action .nav-icon::after { content: ""; position: absolute; top: 8px; left: 11px; width: 20px; height: 8px; transform: rotate(-28deg); border-radius: 50%; background: rgb(255 255 255 / 31%); filter: blur(2px); }
.bottom-nav .create-action svg { width: 27px; height: 27px; color: white; stroke-width: 2.1; filter: drop-shadow(0 3px 3px rgb(77 12 112 / 30%)); }
.bottom-nav a.create-action.active svg { filter: drop-shadow(0 3px 3px rgb(77 12 112 / 30%)); }
.bottom-nav a.create-action.active .nav-icon::before { display: none; animation: none; }
.bottom-nav a.create-action:active { transform: none; }
.bottom-nav a.create-action:active .nav-icon { transform: translateY(-13px) scale(.97); animation-play-state: paused; box-shadow: 0 5px 11px rgb(179 10 137 / 27%), inset 0 2px 5px rgb(80 21 128 / 18%); }
.bottom-nav a.create-action::before { display: none; }

/* Saved appearance preference */
html[data-theme="dark"] { --ink: #f8f0f6; --muted: #b9adb5; --surface: #171218; --cream: #241b23; --line: #40313c; background: #100c11; color-scheme: dark; }
html[data-theme="dark"] body { background: #100c11; }
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .create-shell { background: #171218; }
html[data-theme="dark"] :is(.search-box, .circle-control, .idea-search, .idea-filters button, .idea-card, .chosen-theme-card, .prompt-field textarea, .reference-section, .choice-group, .choice-grid button, .sound-option, .review-card, .generation-progress, .generation-success, .account-profile, .account-menu-link, .profile-summary-card, .account-detail-list, .membership-current-card, .plan-options, .settings-card, .video-library-card, .video-library-empty, .player-video-info, .share-panel) { background: #211921; color: var(--ink); }
html[data-theme="dark"] :is(.review-prompt, .plan-choice, .select-field select, .theme-options button, .social-share-grid a) { background: #191319; color: #e8dfe5; }
html[data-theme="dark"] .support-field :is(input, select, textarea) { background: #191319; color: #e8dfe5; }
html[data-theme="dark"] .support-select-trigger { border-color: var(--line); background: #191319; color: #a99ca5; }
html[data-theme="dark"] .support-select-trigger.has-value { color: #e8dfe5; }
html[data-theme="dark"] .support-select-menu { border-color: #4b3545; background: #211921; }
html[data-theme="dark"] .support-select-menu button { color: #d7cad2; }
html[data-theme="dark"] .support-select-menu button:is(:hover, :focus-visible), html[data-theme="dark"] .support-select-menu button[aria-selected="true"] { background: #392035; color: #ff4eaf; }
html[data-theme="dark"] :is(.plan-choice:has(input:checked), .theme-options button[aria-checked="true"], .account-menu-icon, .settings-symbol, .secondary-action-button, .copy-video-link, .generation-success-actions a, .video-library-empty a) { background: #392035; }
html[data-theme="dark"] :is(.logout-section) { border-color: #59303c; background: #25191d; }
html[data-theme="dark"] .logout-section button { border-color: #70404c; background: #331d24; color: #ff91aa; }
html[data-theme="dark"] :is(.account-profile small, .account-menu-link small, .profile-summary-card small, .subpage-heading > p:last-child, .membership-price span, .membership-current-card li, .subsection-heading p, .plan-choice small, .settings-row-heading small, .support-field > span, .logout-section small, .video-library-copy > p, .player-video-info > p:nth-of-type(2)) { color: #b8aab3; }
html[data-theme="dark"] .bottom-nav { border-top-color: rgb(255 255 255 / 8%); background: linear-gradient(180deg, rgb(37 28 36 / 98%), rgb(23 18 24 / 98%)); box-shadow: 0 -2px 0 rgb(255 255 255 / 3%), 0 -11px 26px rgb(0 0 0 / 34%); }
html[data-theme="dark"] .bottom-nav a { color: #978c94; }
html[data-theme="dark"] .bottom-nav a.active { color: #ff4eaf; }
html[data-theme="dark"] .create-action .nav-icon { border-color: #382e36; }

@keyframes create-glow {
  0%, 100% { box-shadow: 0 10px 20px rgb(179 10 137 / 32%), 0 4px 8px rgb(80 21 128 / 22%), inset 0 2px 2px rgb(255 255 255 / 38%); }
  50% { box-shadow: 0 15px 27px rgb(179 10 137 / 42%), 0 6px 13px rgb(80 21 128 / 29%), inset 0 2px 2px rgb(255 255 255 / 42%); }
}

@keyframes progress-float {
  0%, 100% { transform: translateY(0); box-shadow: 0 8px 18px rgb(179 12 139 / 25%); }
  50% { transform: translateY(-3px); box-shadow: 0 13px 23px rgb(179 12 139 / 33%); }
}

@keyframes create-pulse {
  0%, 35% { opacity: .7; transform: scale(.9); }
  75%, 100% { opacity: 0; transform: scale(1.22); }
}

@keyframes generate-attention {
  0%, 100% { box-shadow: 0 0 0 0 rgb(245 7 143 / 32%), 0 10px 21px rgb(177 12 139 / 25%); filter: brightness(1); }
  50% { box-shadow: 0 0 0 8px rgb(245 7 143 / 0%), 0 15px 28px rgb(177 12 139 / 36%); filter: brightness(1.06); }
}

@keyframes success-marker-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-3px) rotate(7deg); }
}

@keyframes success-marker-ring {
  0%, 30% { opacity: .75; transform: scale(.85); }
  80%, 100% { opacity: 0; transform: scale(1.28); }
}

.confetti-layer { position: fixed; z-index: 50; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-piece { position: absolute; top: -24px; opacity: 0; animation: confetti-fall var(--duration) linear var(--delay) forwards; will-change: transform; }

/* Desktop holding screen: the interactive prototype is intentionally mobile-only. */
.desktop-notice { display: none; }

@media (min-width: 769px) {
  body { min-width: 0 !important; overflow: hidden !important; background: #f5edf2 !important; }
  body > :not(.desktop-notice) { display: none !important; }
  .desktop-notice { position: fixed; z-index: 9999; inset: 0; display: grid; min-height: 100svh; padding: 32px; place-items: center; overflow: auto; background: radial-gradient(circle at 13% 16%, rgb(255 114 102 / 21%) 0 9%, transparent 25%), radial-gradient(circle at 87% 82%, rgb(104 27 210 / 17%) 0 11%, transparent 28%), linear-gradient(145deg, #fff8fb 0%, #f9eef5 50%, #f3eefb 100%); color: #231b20; }
  .desktop-notice-card { position: relative; display: grid; width: min(100%, 560px); padding: 48px 48px 44px; justify-items: center; overflow: hidden; border: 1px solid rgb(245 7 143 / 13%); border-radius: 34px; background: rgb(255 255 255 / 91%); box-shadow: 0 30px 80px rgb(92 32 77 / 15%), inset 0 1px 0 white; text-align: center; backdrop-filter: blur(20px); }
  .desktop-notice-card::before { content: ""; position: absolute; top: -110px; right: -92px; width: 240px; height: 240px; border-radius: 50%; background: linear-gradient(145deg, rgb(255 114 102 / 13%), rgb(245 7 143 / 10%), rgb(104 27 210 / 14%)); pointer-events: none; }
  .desktop-notice-logo { position: relative; display: grid; width: 68px; height: 68px; margin-bottom: 22px; place-items: center; border: 2px solid rgb(255 255 255 / 92%); border-radius: 22px; background: linear-gradient(145deg, var(--coral), var(--accent), var(--violet)); box-shadow: 0 14px 30px rgb(177 12 139 / 28%), inset 0 1px 1px rgb(255 255 255 / 38%); }
  .desktop-notice-logo i { width: 20px; height: 20px; transform: rotate(45deg); border: 5px solid white; border-radius: 4px; box-shadow: inset 0 0 0 4px #28d9d0; }
  .desktop-notice-eyebrow { margin: 0 0 12px; color: var(--accent); font-size: 11px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
  .desktop-notice h1 { margin: 0; color: #231b20; font-size: clamp(38px, 5vw, 54px); line-height: 1; letter-spacing: -.055em; }
  .desktop-notice-card > p:not(.desktop-notice-eyebrow) { max-width: 410px; margin: 18px 0 0; color: #6f626a; font-size: 16px; line-height: 1.6; }
  .desktop-notice-hint { display: inline-flex; min-height: 42px; margin-top: 27px; padding: 10px 18px; align-items: center; border: 1px solid rgb(245 7 143 / 15%); border-radius: 999px; background: #fff7fb; color: #8f2875; font-size: 12px; font-weight: 750; }
}

@keyframes confetti-fall {
  0% { opacity: 0; transform: translate3d(0, -24px, 0) rotate(0deg); }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--drift), calc(100vh + 48px), 0) rotate(var(--spin)); }
}

:focus-visible { outline: 3px solid #202020; outline-offset: 3px; }
@media (max-width: 360px) {
  :root { --page-padding: 14px; }
  .category-icon { width: 59px; height: 59px; font-size: 27px; }
  .category-card > span:nth-child(2) { font-size: 10px; }
  .campaign-hero h1 { font-size: 22px; }
  .hero-art { transform: scale(.9); transform-origin: right center; }
  .promo-card { min-height: 254px; }
  .promo-copy h3 { font-size: 21px; }
  .promo-copy h3 strong { font-size: 28px; }
  .idea-card { min-height: 101px; grid-template-columns: 80px minmax(0, 1fr) 18px; gap: 9px; }
  .idea-thumb { width: 80px; height: 80px; border-radius: 13px; }
  .idea-copy strong { font-size: 13px; }
  .idea-copy small { font-size: 10px; }
  .idea-copy i { padding: 3px 5px; font-size: 7.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html, .category-scroller, .promo-scroller { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .generate-button { animation: none; }
  .confetti-layer { display: none; }
  .creation-journey li.success .step-marker, .creation-journey li.success .step-marker::after { animation: none; }
}