:root {
  --accent: #c4f464;
  --accent-dark: #426519;
  --coral: #daf99c;
  --cyan: #619bff;
  --violet: #a6d84c;
  --ink: #141b21;
  --muted: #69736b;
  --surface: #fcfdf9;
  --cream: #f2f7ec;
  --line: #e2e7dc;
  --page-padding: 18px;
  font-family: "Avenir Next", Avenir, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #eef1e9;
  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: #eef1e9; }
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%, #619bff 0 17%, transparent 17.5%),
    radial-gradient(circle at -7% 104%, #86b844 0 21%, transparent 21.5%),
    radial-gradient(circle at 82% 14%, rgb(255 255 255 / 20%) 0 3px, transparent 4px),
    linear-gradient(145deg, #daf99c 0%, #c4f464 47%, #86b844 72%, #426519 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: #d8f7ae; 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: #FFD1A6; }
.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, #d2eeab, #86b844); }
.video-frame.frame-purple i { background: linear-gradient(145deg, #35ded2, #19addf); }
.video-frame.frame-coral { background: linear-gradient(145deg, #daf99c, #c4f464); }
.video-frame.frame-coral i { background: linear-gradient(145deg, #86b844, #648d30); }
.spark { position: absolute; color: #FFE0B2; 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-dark); 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(196 244 100 / 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(94 134 42 / 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(134 184 68 / 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: #eef7e2; }
.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-dark); 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, #b3e451 0%, #c4f464 56%, #86b844 100%); }
.promo-purple { background: linear-gradient(145deg, #78a532 0%, #c4f464 52%, #c4f464 100%); }
.promo-teal { background: linear-gradient(145deg, #3bded1 0%, #20acd8 48%, #426519 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: #FFD1A6; 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-dark); }
.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: #141b21; 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: #d2eeab; 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: #fcfdf9; }
.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%, #619bff 0 23%, transparent 23.5%), radial-gradient(circle at -10% 120%, #86b844 0 28%, transparent 28.5%), linear-gradient(145deg, #daf99c 0%, #c4f464 48%, #648d30 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: #FFD6A6; 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(94 134 42 / 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(134 184 68 / 36%); box-shadow: 0 8px 20px rgb(94 134 42 / 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: #eef7e2; color: #426519; font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .02em; }
.idea-arrow { color: var(--accent-dark); 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: #152130; 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: #fcfdf9; 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(134 184 68 / 13%), 0 7px 14px rgb(94 134 42 / 22%); }
.creation-journey li.complete .step-marker { border-color: #426519; 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(134 184 68 / 14%), 0 7px 14px rgb(94 134 42 / 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(134 184 68 / 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, #daf99c, #c4f464 52%, #426519); }
.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-dark); 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-dark); 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(94 134 42 / 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(94 134 42 / 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(134 184 68 / 48%); box-shadow: 0 0 0 3px rgb(134 184 68 / 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, #daf99c, var(--violet)); color: white; box-shadow: 0 0 0 2px rgb(94 134 42 / 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(134 184 68 / 17%), 0 9px 18px rgb(134 184 68 / 28%), inset 0 2px 2px rgb(255 255 255 / 30%); }
.prompt-tools #voice-input.recording::after { border-color: rgb(134 184 68 / 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-dark); 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(134 184 68 / 42%); background: linear-gradient(145deg, #f7faf1, #eef6e3); color: var(--accent-dark); 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(94 134 42 / 20%); font-size: 18px; line-height: 1; }
.reference-add strong { font-size: 8px; }
.reference-preview { margin: 0; background: #eef1e9; }
.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-dark); 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-dark); 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: #eef7e2; color: var(--accent-dark); font-size: 15px; }
.choice-grid button small { display: block; margin-top: 2px; color: #aaa0a7; font-size: 7px; }
.choice-grid button.active { border-color: rgb(134 184 68 / 38%); background: linear-gradient(145deg, #f4f9ed, #eef7e2); color: var(--accent-dark); box-shadow: 0 6px 14px rgb(94 134 42 / 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(94 134 42 / 25%); font-size: 13px; font-weight: 800; }
.primary-flow-button:active { transform: translateY(2px); box-shadow: 0 5px 11px rgb(94 134 42 / 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: #FFD6A6; }
.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(94 134 42 / 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-dark); 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(94 134 42 / 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: #eef7e2; color: var(--accent-dark); 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(94 134 42 / 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(94 134 42 / 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: #eef7e2; color: var(--accent-dark); }
.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-dark); 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-dark); }
.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-dark); 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-dark); 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(94 134 42 / 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: #fcfdf9; }
.plan-choice:has(input:checked) { border-color: rgb(134 184 68 / 48%); background: #eef5e8; box-shadow: 0 0 0 3px rgb(134 184 68 / 7%); }
.plan-choice input { margin: 0; accent-color: var(--accent-dark); }
.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-dark); font-size: 10px; }
.secondary-action-button { border: 1px solid rgb(134 184 68 / 20%); background: #eef7e2; color: var(--accent-dark); }
.account-action-status { min-height: 14px; margin: 8px 0 0; color: var(--accent-dark); 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: #eef7e2; color: var(--accent-dark); 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: #fcfdf9; 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: #fcfdf9; color: #71686e; font-size: 10px; font-weight: 800; }
.theme-options button[aria-checked="true"] { border-color: rgb(134 184 68 / 42%); background: #eef7e2; color: var(--accent-dark); box-shadow: 0 0 0 3px rgb(134 184 68 / 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: #fcfdf9; 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: #fcfdf9; 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(134 184 68 / 55%); box-shadow: 0 0 0 3px rgb(134 184 68 / 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(134 184 68 / 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: #eaf5dc; color: var(--accent-dark); }
.support-field textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
.support-field :is(input, select, textarea):focus { border-color: rgb(134 184 68 / 55%); box-shadow: 0 0 0 3px rgb(134 184 68 / 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-dark); 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 #FFD6A6; border-radius: 18px; background: #f4f9ed; }
.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 #d2eeab; border-radius: 11px; background: white; color: #426519; 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, #101820 48%, #09070a); }
.login-shell { width: 100%; max-width: 460px; min-height: 100svh; margin: 0 auto; overflow: hidden; background: #101820; 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(134 184 68 / 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: #FFD1A6; 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(134 184 68 / 68%); box-shadow: 0 0 0 3px rgb(134 184 68 / 12%); }
.login-form input[aria-invalid="true"] { border-color: #b3e451; }
.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: #daf99c; 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(94 134 42 / 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(134 184 68 / 24%); border-radius: 14px; background: rgb(134 184 68 / 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: #d2eeab; 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: #eef1e9; }
.auth-body { min-width: 320px; background: #eef1e9; }
.welcome-shell, .auth-shell { position: relative; width: 100%; max-width: 460px; min-height: 100svh; margin: 0 auto; overflow: hidden; color: white; background: #101820; 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%, #fcfdf9 92%), linear-gradient(130deg, rgb(196 244 100 / 10%), transparent 48%, rgb(94 134 42 / 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-dark); 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(134 184 68 / 19%); background: rgb(255 255 255 / 88%); color: var(--accent-dark); 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(134 184 68 / 34%); border-radius: 999px; background: white; color: var(--accent-dark); 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(94 134 42 / 27%); }

.auth-shell { color: var(--ink); background: #fcfdf9; 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%, #619bff 0 21%, transparent 21.5%), radial-gradient(circle at -10% 106%, #86b844 0 24%, transparent 24.5%), radial-gradient(circle at 76% 30%, rgb(255 255 255 / 21%) 0 4px, transparent 5px), linear-gradient(145deg, #daf99c 0%, #c4f464 48%, #86b844 73%, #426519 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(134 184 68 / 55%); box-shadow: 0 0 0 3px rgb(134 184 68 / 9%), 0 8px 18px rgb(85 35 70 / 8%); }
.auth-content .login-password-field button { background: #eef7e2; color: var(--accent-dark); }
.auth-content .login-submit { min-height: 48px; margin-top: 2px; border-radius: 999px; }
.auth-content .demo-account { margin-top: 16px; border-color: rgb(134 184 68 / 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(134 184 68 / 17%); background: #eef7e2; color: var(--accent-dark); }
.auth-switch { margin: 18px 0 0; color: #82777e; font-size: 9px; text-align: center; }
.auth-switch a { color: #c4f464; 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-dark); }
  .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(134 184 68 / 48%); box-shadow: 0 0 0 3px rgb(134 184 68 / 8%), 0 8px 19px rgb(94 134 42 / 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: #eef7e2; color: #426519; 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(94 134 42 / 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: #eef7e2; color: var(--accent-dark); font-size: 10px; font-weight: 800; }

/* Saved-video player */
.player-page-content { padding-top: 20px; }
.video-player-shell { overflow: hidden; border-radius: 22px; background: #101820; box-shadow: 0 12px 26px rgb(16 24 32 / 20%); }
.video-stage { position: relative; width: 100%; height: min(92vw, 380px); overflow: hidden; background: #101820; }
.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(134 184 68 / 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 { container: playback / inline-size; padding: 12px 14px 14px; color: white; background: linear-gradient(180deg, #192638, #101820); }
.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-dark); cursor: pointer; }
.player-controls-bar { display: grid; margin-top: 11px; gap: 8px; align-items: center; }
.player-transport { display: flex; 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(94 134 42 / 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: #080e16; }
.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: #eef7e2; color: #426519; 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(94 134 42 / 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: #fcfdf9; 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(134 184 68 / 18%); border-radius: 12px; background: #eef7e2; color: var(--accent-dark); 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(94 134 42 / 20%); font-size: 9px; font-weight: 800; }
.delete-video-button[hidden] { display: none; }
.player-video-actions { display: grid; margin-top: 15px; gap: 10px; }
.player-video-actions #delete-video { grid-column: auto; margin: 0; background: transparent; border: 1px solid var(--line); box-shadow: none; color: var(--muted); font-size: 12px; }
.download-video-button { display: flex; min-height: 44px; padding: 10px 16px; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent); color: #152130; font-size: 12px; font-weight: 750; text-decoration: none; }
.download-video-button svg, .confirm-dialog-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.generation-success-actions #download-generated-video { grid-column: 1 / -1; background: var(--accent); color: #152130; font-size: 12px; }
.studio-confirm-dialog { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 28px; overflow-y: auto; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px rgb(0 0 0 / 22%); }
.studio-confirm-dialog::backdrop { background: rgb(16 24 32 / 55%); backdrop-filter: blur(6px); }
.confirm-dialog-icon { display: grid; width: 48px; height: 48px; margin-bottom: 18px; place-items: center; border-radius: 15px; color: #152130; background: var(--accent); }
.studio-confirm-dialog h2 { margin: 0 0 10px; font-size: 23px; letter-spacing: -.03em; }
.studio-confirm-dialog p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.studio-confirm-dialog #delete-dialog-error:not(:empty) { margin-top: 14px; color: var(--ink); }
.confirm-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.confirm-dialog-actions button { min-height: 46px; padding: 10px; border-radius: 12px; font-size: 12px; font-weight: 750; cursor: pointer; }
.confirm-dialog-cancel { border: 1px solid var(--line); color: var(--ink); background: var(--surface); }
.confirm-dialog-delete { border: 1px solid var(--accent); color: #152130; background: var(--accent); }
.confirm-dialog-actions button:disabled { opacity: .65; cursor: wait; }
.studio-confirm-dialog button:focus-visible, .download-video-button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (min-width: 769px) { .player-video-actions { grid-column: 2; margin-top: 0; } }
.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-dark); }
.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(94 134 42 / 30%); }
.bottom-nav a.create-action { z-index: 2; color: var(--accent-dark); 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(94 134 42 / 32%), 0 4px 8px rgb(25 47 75 / 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(134 184 68 / 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(94 134 42 / 27%), inset 0 2px 5px rgb(25 47 75 / 18%); }
.bottom-nav a.create-action::before { display: none; }

/* Saved appearance preference */
html[data-theme="dark"] { --ink: #f2f7ec; --muted: #b9adb5; --surface: #111a23; --cream: #1c2935; --line: #314252; background: #0c131a; color-scheme: dark; }
html[data-theme="dark"] body { background: #0c131a; }
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .create-shell { background: #111a23; }
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: #1a2632; color: var(--ink); }
html[data-theme="dark"] :is(.review-prompt, .plan-choice, .select-field select, .theme-options button, .social-share-grid a) { background: #15202b; color: #e8dfe5; }
html[data-theme="dark"] .support-field :is(input, select, textarea) { background: #15202b; color: #e8dfe5; }
html[data-theme="dark"] .support-select-trigger { border-color: var(--line); background: #15202b; color: #a99ca5; }
html[data-theme="dark"] .support-select-trigger.has-value { color: #e8dfe5; }
html[data-theme="dark"] .support-select-menu { border-color: #4b3545; background: #1a2632; }
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: #263929; color: #c4f464; }
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: #263929; }
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: #d2eeab; }
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: #c4f464; }
html[data-theme="dark"] .create-action .nav-icon { border-color: #382e36; }

@keyframes create-glow {
  0%, 100% { box-shadow: 0 10px 20px rgb(94 134 42 / 32%), 0 4px 8px rgb(25 47 75 / 22%), inset 0 2px 2px rgb(255 255 255 / 38%); }
  50% { box-shadow: 0 15px 27px rgb(94 134 42 / 42%), 0 6px 13px rgb(25 47 75 / 29%), inset 0 2px 2px rgb(255 255 255 / 42%); }
}

@keyframes progress-float {
  0%, 100% { transform: translateY(0); box-shadow: 0 8px 18px rgb(94 134 42 / 25%); }
  50% { transform: translateY(-3px); box-shadow: 0 13px 23px rgb(94 134 42 / 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(134 184 68 / 32%), 0 10px 21px rgb(94 134 42 / 25%); filter: brightness(1); }
  50% { box-shadow: 0 0 0 8px rgb(134 184 68 / 0%), 0 15px 28px rgb(94 134 42 / 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; }

@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; }
}

/* Lime surfaces and actions with ink text and subtle blue accents. */
.brand-area, .create-brand-area { color: #152130; background: radial-gradient(circle at 105% 2%, #a8c9ff 0 17%, transparent 17.5%), radial-gradient(circle at -7% 104%, #a6d84c 0 21%, transparent 21.5%), linear-gradient(145deg, #e0fab8 0%, #c4f464 48%, #b5e65a 100%); }
.flow-brand-bar { color: #152130; background: linear-gradient(115deg, #daf99c, #c4f464 52%, #b5e65a); }
.auth-shell::before { background: radial-gradient(circle at 105% 3%, #a8c9ff 0 21%, transparent 21.5%), radial-gradient(circle at -10% 106%, #a6d84c 0 24%, transparent 24.5%), linear-gradient(145deg, #daf99c, #c4f464); }
:is(.primary-flow-button, .primary-gradient-button, .login-submit, .welcome-actions a.primary, .ai-genie-button, .reference-add span, .progress-orb, .generation-success > span, .generation-success-actions .preview-view, .account-avatar, .video-library-empty > span, .share-heading > button, .delete-video-button, .player-transport .player-main-action, .idea-filters button.active, .video-frame i, .prompt-tools button) { color: #152130; background: linear-gradient(135deg, #daf99c, #c4f464 55%, #a6d84c); }
.creation-journey :is(li.current, li.complete, li.success) .step-marker { color: #152130; background: linear-gradient(145deg, #daf99c, #c4f464, #a6d84c); border-color: #e8f8d5; }
.bottom-nav .create-action svg, .desktop-notice-logo i { color: #152130; border-color: #152130; }
.promo-orange { background: linear-gradient(145deg, #daf99c, #c4f464); }
.promo-purple { background: linear-gradient(145deg, #d1f5a0, #a6d84c); }
.promo-teal { background: linear-gradient(145deg, #e1f4c8, #b8d7ff); }
.video-overlay-play { color: #152130; }
.welcome-brand .logo-mark path:first-child { fill: #152130; }
.auth-heading .section-kicker { color: #c4f464; }
html[data-theme="dark"] { --accent-dark: #c4f464; --ink: #edf4e6; --muted: #afbdc6; }
html[data-theme="dark"] .choice-grid button.active { background: #263929; color: #c4f464; }
.admin-form { display: grid; gap: 14px; margin-bottom: 18px; }
.admin-form h2 { margin: 0; font-size: 16px; }
.admin-form label { display: grid; gap: 7px; font-size: 12px; font-weight: 700; }
.admin-form :is(input, select) { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.admin-form > p:not(.account-action-status) { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.admin-form button { min-height: 44px; border: 0; border-radius: 12px; font-weight: 800; }

/* Mobile retains its original layout; the workspace starts above 768px. */
.studio-layout { display: contents; }
.desktop-notice, .desktop-navigation, .desktop-introduction { display: none; }
.customize-prompt-panel, .customize-options-panel { display: contents; }
.desktop-field-label { display: none; }

@media (min-width: 769px) {
  body { background: var(--cream); }
  .studio-layout { --page-padding: 28px; display: grid; max-width: 1680px; margin-inline: auto; grid-template-columns: 216px minmax(0, 1fr); align-items: start; }
  .studio-layout .app-shell { min-width: 0; max-width: none; min-height: 100dvh; margin: 0; overflow: clip; box-shadow: none; border-inline-start: 1px solid var(--line); }
  .desktop-navigation { position: sticky; top: 0; display: flex; height: 100dvh; min-height: 0; padding: 28px 16px 18px; flex-direction: column; overflow-y: auto; }
  .desktop-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
  .desktop-brand-mark { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 13px; background: var(--accent); color: #152130; font-size: 26px; }
  .desktop-brand > span:last-child { display: grid; gap: 4px; }
  .desktop-brand strong { font-size: 16px; letter-spacing: .025em; }
  .desktop-brand small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .13em; }
  .desktop-nav-label { margin: 40px 12px 12px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
  .desktop-navigation nav { display: grid; gap: 6px; }
  .desktop-navigation nav a { display: flex; min-height: 46px; padding: 10px 12px; align-items: center; gap: 12px; border-radius: 12px; color: var(--muted); font-size: 13px; font-weight: 650; transition: background .15s ease, color .15s ease; }
  .desktop-navigation nav a:hover { color: var(--ink); background: var(--line); }
  .desktop-navigation nav a[aria-current="page"] { background: var(--accent); color: #152130; }
  .desktop-navigation svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .desktop-studio-note { margin: 28px 0; padding: 18px; border: 1px solid #c4e49c; border-radius: 18px; background: linear-gradient(145deg, #e4fac3, #c4f464); color: #152130; }
  .desktop-studio-note > span { font-size: 24px; }
  .desktop-studio-note strong { display: block; margin-top: 12px; font-size: 15px; line-height: 1.3; }
  .desktop-studio-note p { margin: 8px 0 18px; color: #486039; font-size: 12px; line-height: 1.6; }
  .desktop-studio-note a { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; }
  .desktop-secondary-nav { margin-top: auto; }
  .desktop-user { display: flex; min-width: 0; margin-top: 18px; padding: 18px 4px 0; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
  .desktop-user > span:first-child { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #dceacb; color: #426519; font-size: 14px; font-weight: 800; }
  .desktop-user > span:last-child { display: grid; min-width: 0; gap: 4px; }
  .desktop-user strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .desktop-user small { color: var(--muted); font-size: 10px; }
  .studio-layout .bottom-nav { display: none; }
  .studio-layout .safe-bottom-space { height: 40px; }
  .studio-layout :is(a, button, input, summary, textarea):focus-visible { outline: 3px solid #619bff; outline-offset: 4px; }

  /* Home: a landscape banner and a complete category gallery. */
  .brand-area { margin: 28px 28px 0; border-radius: 24px; }
  .brand-area .brand-header { display: none; }
  .search-wrap { max-width: 640px; padding-top: 28px; }
  .search-box { box-shadow: 0 5px 16px rgb(66 101 25 / 9%); }
  .campaign-hero { min-height: 235px; }
  .campaign-hero h1 { max-width: 580px; font-size: clamp(32px, 3.2vw, 52px); }
  .hero-slide { inset-block: 28px 22px; }
  .hero-art { margin-inline-end: 20px; transform: scale(1.4); transform-origin: center; }
  .hero-kicker { margin-bottom: 14px; font-size: 12px; }
  .hero-dots { justify-content: flex-start; padding-inline: 28px; padding-bottom: 22px; }
  .section-block { padding-top: 32px; }
  .section-heading { margin-bottom: 20px; }
  .section-heading h2 { font-size: 25px; }
  .section-kicker { font-size: 10px; }
  .category-scroller { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; overflow: visible; }
  .category-page { display: contents; }
  .category-card { min-width: 0; padding: 18px 6px; gap: 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); transition: transform .18s ease, box-shadow .18s ease; }
  .category-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgb(66 101 25 / 10%); }
  .category-card > span:last-of-type { font-size: 12px; }
  .category-card small { display: block; color: var(--muted); font-size: 10px; line-height: 1.35; }
  .category-progress, .categories .carousel-controls, .promo-dots { display: none; }
  .promo-scroller { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 16px; }
  .promo-card { width: 100%; max-width: none; min-width: 0; min-height: 265px; }
  .promo-card:last-child { grid-column: 1 / -1; min-height: 220px; }
  .promo-card:last-child .promo-visual { width: 34%; }
  .promo-copy { position: relative; z-index: 1; }
  .promo-copy h3 { font-size: 22px; }
  .promo-copy h3 strong { font-size: 27px; }
  .promo-copy p { font-size: 12px; }
  .promo-visual .plate { width: 110px; height: 110px; }
  .text-button { font-size: 13px; }

  /* Theme browser: useful density instead of a single stretched list. */
  .create-brand-area { margin: 28px 28px 0; border-radius: 24px; padding-bottom: 30px; }
  .create-brand-area .brand-header { min-height: 60px; justify-content: flex-end; padding-top: 18px; }
  .create-brand-area .brand-identity { display: none; }
  .create-intro { padding-top: 0; }
  .create-intro h1 { font-size: 40px; }
  .create-intro > p:last-child { max-width: 600px; font-size: 14px; line-height: 1.6; }
  .creation-journey { max-width: 780px; margin: 28px auto 0; }
  .creation-journey strong { font-size: 13px; }
  .creation-journey li:not(:last-child)::after { left: auto; inset-inline-start: calc(50% + 18px); }
  .creation-journey small { font-size: 10px; }
  .idea-browser { padding-top: 28px; }
  .create-search-wrap { max-width: 680px; }
  .idea-filters { flex-wrap: wrap; gap: 10px; overflow: visible; margin-block: 18px 24px; }
  .idea-filters button { min-height: 40px; padding-inline: 18px; font-size: 12px; }
  .idea-list-heading h2 { font-size: 25px; }
  .idea-list-heading > span { font-size: 12px; }
  .idea-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .idea-group-label { grid-column: 1 / -1; margin-top: 12px; font-size: 12px; }
  .idea-card { min-width: 0; grid-template-columns: 76px minmax(0, 1fr) 16px; gap: 10px; padding: 12px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
  .idea-card:hover { transform: translateY(-3px); border-color: #a6d84c; box-shadow: 0 10px 24px rgb(66 101 25 / 12%); }
  .idea-thumb { width: 76px; height: 76px; }
  .idea-copy strong { font-size: 14px; }
  .idea-copy small { font-size: 11px; line-height: 1.5; }

  /* Creation: prompt and reference on the left, settings on the right. */
  .flow-brand-bar { margin: 28px 28px 0; border-radius: 20px; }
  .flow-brand-bar .brand-header { min-height: 76px; padding-top: 0; }
  .flow-title { justify-items: start; margin-inline: 16px auto; }
  .flow-title strong { font-size: 20px; }
  .flow-title small { font-size: 9px; }
  .flow-content { padding-top: 32px; }
  .flow-heading h1, .subpage-heading h1, .library-heading h1 { font-size: 34px; }
  .flow-heading > p:last-child, .subpage-heading > p:last-child { font-size: 14px; line-height: 1.6; }
  .chosen-theme-card { max-width: 620px; }
  .chosen-theme-card strong { font-size: 15px; }
  .chosen-theme-card small, .chosen-theme-card a { font-size: 11px; }
  .customize-form { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .customize-prompt-panel, .customize-options-panel { display: grid; min-width: 0; gap: 16px; align-content: start; }
  .customize-form .field-label, .desktop-field-label { display: block; margin: 0; font-size: 14px; font-weight: 800; }
  .prompt-field textarea { min-height: 230px; padding: 18px; font-size: 14px; }
  .reference-heading, .choice-group > summary { min-height: 64px; }
  .reference-heading h2, .choice-group > summary span, .sound-option strong { font-size: 14px; }
  .reference-heading h2 { gap: 4px; }
  .reference-heading h2 span { margin-left: 0; }
  .reference-heading small, .choice-group > summary small, .sound-option small { font-size: 11px; }
  .reference-content > p:first-of-type { font-size: 12px; }
  .reference-add, .reference-preview { height: 105px; }
  .reference-add strong { font-size: 11px; }
  .choice-grid button { min-height: 52px; font-size: 12px; }
  .choice-grid button small { font-size: 10px; }
  .primary-flow-button { min-height: 56px; font-size: 14px; }
  [data-screen="generate"] .flow-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 24px; align-items: start; }
  [data-screen="generate"] .flow-heading { grid-column: 1 / -1; margin-bottom: 0; }
  .review-card { margin-top: 0; padding: 12px 20px; }
  .review-card div { padding-block: 20px; }
  .review-card span, .review-prompt > span { font-size: 11px; }
  .review-card strong { font-size: 16px; }
  .review-prompt { margin-top: 0; min-height: 180px; padding: 24px; background: var(--cream); }
  .review-prompt p { font-size: 14px; line-height: 1.7; }
  .generation-action { grid-column: 1 / -1; width: min(100%, 450px); margin: 8px auto 0; }
  .generation-action small { font-size: 11px; line-height: 1.5; text-align: center; }
  .generation-progress, .generation-success { grid-column: 1 / -1; width: 100%; max-width: 620px; margin: 0 auto; padding: 32px; }

  /* Library, account and administration use the available desktop width. */
  .account-content, .account-subpage, .library-content { padding-top: 32px; }
  .account-profile { max-width: 650px; padding: 20px; }
  .account-profile strong { font-size: 18px; }
  .account-profile small { font-size: 12px; }
  .account-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .account-menu-link { min-height: 100px; padding: 20px; }
  .account-menu-link strong { font-size: 16px; }
  .account-menu-link small { font-size: 12px; line-height: 1.4; }
  .video-library-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .video-library-card { grid-template-columns: 1fr; padding: 12px; gap: 16px; }
  .video-library-thumb { width: 100%; height: 180px; }
  .video-library-copy { padding: 0 6px 8px; }
  .video-library-copy > strong { font-size: 17px; }
  .video-library-copy > p { font-size: 13px; line-height: 1.6; }
  .video-library-tags span, .video-library-copy time { font-size: 11px; }
  .video-library-empty { padding: 70px 30px; }
  .video-library-empty h2 { font-size: 26px; }
  .video-library-empty p { max-width: 430px; font-size: 14px; }
  .video-library-empty a { font-size: 14px; }
  .account-subpage { max-width: 900px; margin-inline: auto; }
  .settings-card, .membership-current-card, .profile-summary-card, .account-detail-list { padding: 24px; }
  .settings-row-heading strong { font-size: 15px; }
  .settings-row-heading small { font-size: 12px; }
  .profile-summary-card strong { font-size: 18px; }
  .profile-summary-card small, .account-detail-list dt, .membership-meta dt { font-size: 12px; }
  .account-detail-list dd, .membership-meta dd { font-size: 14px; }
  .status-badge, .membership-plan-heading small { font-size: 11px; }
  .membership-plan-heading strong { font-size: 26px; }
  .membership-price strong { font-size: 40px; }
  .membership-price span, .membership-current-card li, .plan-choice small { font-size: 13px; line-height: 1.6; }
  .plan-choice strong, .plan-choice b { font-size: 14px; }
  .subsection-heading h2 { font-size: 20px; }
  .subsection-heading p { font-size: 12px; line-height: 1.6; }
  .primary-gradient-button, .secondary-action-button { min-height: 48px; font-size: 13px; }
  .select-field select, .theme-options button, .support-select-trigger, .support-select-menu button, .support-field :is(input, select, textarea) { min-height: 48px; font-size: 14px; }
  .support-field > span { font-size: 13px; }
  .support-field textarea { min-height: 180px; }
  .account-action-status, .support-character-count, .support-form-status { font-size: 11px; line-height: 1.5; }
  .logout-section { padding: 24px; }
  .logout-section strong { font-size: 15px; }
  .logout-section small { max-width: 400px; font-size: 12px; }
  .logout-section button { min-height: 44px; font-size: 12px; }
  .auth-content .login-form input { font-size: 14px; }
  .auth-content .login-submit { font-size: 14px; }
  .auth-content .demo-account strong { font-size: 13px; }
  .auth-content .demo-account small, .auth-content .demo-account button { font-size: 11px; }
  [data-screen="admin"] .account-subpage { display: grid; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  [data-screen="admin"] .subpage-heading, [data-screen="admin"] .account-subpage > section { grid-column: 1 / -1; }
  [data-screen="admin"] .review-card { margin: 0; }
  [data-screen="admin"] form.review-card { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  [data-screen="admin"] form.review-card label { display: grid; gap: 8px; font-size: 13px; font-weight: 650; }
  [data-screen="admin"] form.review-card :is(input:not([type="checkbox"]), select) { min-height: 44px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface); }
  [data-screen="admin"] form.review-card label:has([type="checkbox"]) { display: flex; align-items: center; gap: 8px; }
  [data-screen="admin"] form.review-card label [type="checkbox"] { width: 18px; height: 18px; accent-color: #426519; }
  [data-screen="admin"] form.review-card > :is(h2, p, button) { grid-column: 1 / -1; }
  #cost-log { grid-template-columns: 1fr; }
  #cost-log .account-menu-link { grid-template-columns: minmax(0, 1fr) auto; min-height: 90px; gap: 24px; }
  #cost-log .account-menu-link > span { display: grid; min-width: 0; gap: 6px; }
  #cost-log .account-menu-link small { overflow-wrap: anywhere; }
  #cost-log .account-menu-link b { padding: 6px 10px; border-radius: 8px; background: var(--cream); font-size: 12px; font-weight: 750; }
  .player-page-content { display: grid; padding-top: 32px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .video-player-shell { grid-column: 1; grid-row: 1 / 4; }
  .video-stage { height: min(65vh, 620px); }
  .video-stage video { height: 100%; object-fit: contain; }
  .player-video-info { margin: 0; padding: 22px; }
  .player-video-info > p:nth-of-type(2) { font-size: 13px; line-height: 1.6; }
  .share-panel { margin: 0; }
  .delete-video-button { grid-column: 2; }

  /* Public pages: a separate editorial panel keeps forms readable. */
  .studio-public-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100dvh; }
  .desktop-introduction { display: flex; min-height: 100dvh; padding: 40px clamp(28px, 4vw, 72px); flex-direction: column; justify-content: space-between; background: radial-gradient(circle at 110% 10%, #a8c9ff 0 20%, transparent 20.2%), linear-gradient(145deg, #e0fab8, #c4f464 60%, #b5e65a); color: #152130; }
  .desktop-introduction > div { margin-block: auto; padding-block: 65px; }
  .desktop-introduction h2 { margin: 18px 0; font-size: clamp(34px, 4vw, 64px); line-height: 1.06; letter-spacing: -.055em; }
  .desktop-introduction h2 em { color: #426519; font-style: normal; }
  .desktop-introduction > div > p:not(.section-kicker) { max-width: 410px; color: #486039; font-size: 16px; line-height: 1.7; }
  .desktop-intro-tiles { display: flex; gap: 14px; margin-block: 36px; }
  .desktop-intro-tiles .idea-thumb { width: clamp(70px, 8vw, 125px); height: clamp(90px, 10vw, 160px); border: 4px solid rgb(255 255 255 / 65%); border-radius: 20px; box-shadow: 0 12px 28px rgb(66 101 25 / 16%); transform: rotate(-6deg); }
  .desktop-intro-tiles .idea-thumb:nth-child(2) { transform: translateY(14px) rotate(5deg); }
  .desktop-intro-caption { font-size: 12px; font-weight: 750; }
  .auth-shell { display: flex; max-width: none; width: 100%; min-height: 100dvh; flex-direction: column; justify-content: center; box-shadow: none; }
  .auth-shell::before { display: none; }
  .auth-brand { min-height: 80px; max-width: 490px; width: 100%; margin-inline: auto; }
  .auth-brand .brand-identity { color: var(--ink); }
  .auth-brand .brand-copy small { color: var(--muted); }
  .auth-back { color: #426519; background: var(--cream); box-shadow: none; }
  .auth-content { width: calc(100% - 56px); max-width: 440px; margin: 12px auto 40px; padding: 32px; box-shadow: none; }
  .auth-heading h1 { font-size: 36px; }
  .auth-heading > p:last-child, .auth-switch, .auth-content .login-prototype-note { font-size: 12px; }
  .auth-content .login-form > label > span:first-child, .auth-content .register-step > label > span:first-child { font-size: 12px; }
  .auth-switch a { color: #426519; }
  [data-screen="welcome"] { display: block; max-width: none; }
  .welcome-shell { width: 100%; max-width: none; height: 100dvh; min-height: 650px; box-shadow: none; }
  .welcome-shell > video { left: 45%; width: 55%; object-position: center; }
  .welcome-shade { background: linear-gradient(90deg, #f2f7ec 0%, #f2f7ec 40%, rgb(242 247 236 / 25%) 65%, transparent); }
  .welcome-brand { padding-inline: 6vw; padding-top: 24px; }
  .welcome-content { left: 6vw; top: 50%; bottom: auto; right: auto; width: 44%; padding: 0; transform: translateY(-40%); }
  .welcome-content h1 { font-size: clamp(48px, 5.5vw, 80px); }
  .welcome-content > p { max-width: 440px; font-size: 16px; line-height: 1.7; }
  .welcome-actions { max-width: 380px; margin-top: 32px; }
  .welcome-actions a { min-height: 54px; font-size: 14px; }
  html[data-theme="dark"] .desktop-navigation { background: var(--cream); }
  html[data-theme="dark"] .category-card { background: #1a2632; }
}

@media (min-width: 1280px) {
  .studio-layout:not(.studio-public-layout) { grid-template-columns: 240px minmax(0, 1fr); --page-padding: 36px; }
  .desktop-navigation { padding-inline: 22px; }
  .category-scroller { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .category-card { padding-block: 20px; }
  .category-card small { font-size: 9px; }
  .campaign-hero { min-height: 260px; }
  .hero-art { margin-inline-end: 70px; transform: scale(1.8); }
  .promo-scroller { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .promo-card:last-child { grid-column: auto; min-height: 265px; }
  .promo-card:last-child .promo-visual { width: 42%; }
  .idea-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .idea-card { position: relative; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 12px 12px 20px; }
  .idea-card .idea-thumb { width: 100%; height: 165px; border-radius: 14px; }
  .idea-copy { padding-inline: 6px; }
  .idea-copy strong { padding-inline-end: 20px; font-size: 16px; }
  .idea-copy small { min-height: 36px; margin-top: 7px; font-size: 12px; }
  .idea-copy i { font-size: 10px; }
  .idea-arrow { position: absolute; bottom: 25px; inset-inline-end: 20px; }
  .video-library-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .customize-form { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 18px 32px; }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .studio-layout:not(.studio-public-layout) { grid-template-columns: 180px minmax(0, 1fr); --page-padding: 20px; }
  .desktop-navigation { padding-inline: 12px; }
  .desktop-brand strong { font-size: 13px; }
  .desktop-brand-mark { width: 32px; height: 32px; }
  .desktop-navigation nav a { font-size: 12px; gap: 8px; }
  .brand-area, .create-brand-area, .flow-brand-bar { margin-inline: 20px; }
  .hero-art { display: none; }
  .category-card small { display: none; }
  .promo-scroller { grid-template-columns: 1fr; }
  .promo-card { min-height: 225px; }
  .promo-card:last-child { grid-column: auto; }
  .idea-card { grid-template-columns: minmax(0, 1fr); }
  .idea-card .idea-thumb { width: 100%; height: 135px; }
  .idea-arrow { display: none; }
  .customize-form, [data-screen="generate"] .flow-content, [data-screen="admin"] .account-subpage, .player-page-content { grid-template-columns: 1fr; }
  .customize-form > *, [data-screen="generate"] .flow-content > *, [data-screen="admin"] .account-subpage > *, .player-page-content > * { grid-column: 1; grid-row: auto; }
  .account-menu { grid-template-columns: 1fr; }
  .category-scroller { gap: 8px; }
  .category-icon { width: 58px; height: 58px; }
}

/* Dark lettering keeps the larger lime surfaces readable. */
.brand-area .brand-identity, .create-brand-area .brand-identity, .auth-brand .brand-identity { color: #152130; }
:is(.brand-area, .create-brand-area, .auth-brand) .brand-copy small, .flow-title small { color: #354724; }
:is(.brand-area, .create-brand-area, .auth-brand) .logo-mark { border-color: rgb(21 33 48 / 20%); background: rgb(255 255 255 / 45%); box-shadow: 0 8px 20px rgb(66 101 25 / 12%); }
:is(.brand-area, .create-brand-area, .auth-brand) .logo-mark path:first-child { fill: #152130; }
.hero-kicker, .create-intro .create-kicker { color: #354724; }
.campaign-hero h1 .rotating-word, .campaign-hero h1 .hero-highlight, .promo-copy h3 strong { color: #31570d; }
.create-intro > p:last-child, .promo-copy p { color: #354724; }
.flow-back, .flow-close, .close-create, .auth-back, .auth-step-label { color: #152130; background: rgb(255 255 255 / 40%); border-color: rgb(21 33 48 / 16%); }
.promo-card { color: #152130; }
.promo-pill { background: rgb(255 255 255 / 45%); border-color: rgb(21 33 48 / 14%); }
.promo-visual .mini-card { color: white; }
.auth-heading .section-kicker, .auth-switch a { color: #426519; }
@media (min-width: 769px) {
  .studio-layout :is(.idea-thumb, .video-library-thumb) { background-size: cover; background-position: center; }
  .studio-layout :is(.idea-thumb, .video-library-thumb).thumb-1 { background-image: url("assets/category-1.webp"); }
  .studio-layout :is(.idea-thumb, .video-library-thumb).thumb-2 { background-image: url("assets/category-2.webp"); }
  .studio-layout :is(.idea-thumb, .video-library-thumb).thumb-3 { background-image: url("assets/category-3.webp"); }
  .studio-layout :is(.idea-thumb, .video-library-thumb).thumb-4 { background-image: url("assets/category-4.webp"); }
  .studio-layout :is(.idea-thumb, .video-library-thumb).thumb-5 { background-image: url("assets/category-5.webp"); }
  .studio-layout :is(.idea-thumb, .video-library-thumb).thumb-6 { background-image: url("assets/category-6.webp"); }
  .studio-layout :is(.idea-thumb, .video-library-thumb).thumb-7 { background-image: url("assets/category-7.webp"); }
  .studio-layout :is(.idea-thumb, .video-library-thumb).thumb-8 { background-image: url("assets/category-8.webp"); }
  .studio-layout :is(.idea-thumb, .video-library-thumb).thumb-9 { background-image: url("assets/category-9.webp"); }
  .studio-layout :is(.idea-thumb, .video-library-thumb).thumb-10 { background-image: url("assets/category-10.webp"); }
  .studio-layout :is(.idea-thumb, .video-library-thumb).thumb-11 { background-image: url("assets/category-11.webp"); }
  .studio-layout :is(.idea-thumb, .video-library-thumb).thumb-12 { background-image: url("assets/category-12.webp"); }
  .studio-layout :is(.idea-thumb, .video-library-thumb).thumb-13 { background-image: url("assets/category-13.webp"); }
  .studio-layout :is(.idea-thumb, .video-library-thumb).thumb-14 { background-image: url("assets/category-14.webp"); }
  .studio-layout :is(.idea-thumb, .video-library-thumb).thumb-15 { background-image: url("assets/category-15.webp"); }
  .studio-layout :is(.idea-thumb, .video-library-thumb).thumb-16 { background-image: url("assets/category-16.webp"); }
}
@media (min-width: 1440px) {
  .idea-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Playback audio controls stay usable on mobile and in fullscreen. */
.player-volume-row { display: grid; width: 190px; max-width: 100%; padding-right: 10px; grid-template-columns: 44px minmax(0, 1fr) 32px; gap: 6px; align-items: center; justify-self: center; border: 1px solid rgb(255 255 255 / 8%); border-radius: 24px; background: rgb(255 255 255 / 3%); }
.frame-section { margin-bottom: 14px; }
.frame-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.frame-upload { display: grid; min-height: 150px; min-width: 0; padding: 16px 10px; gap: 8px; place-items: center; border: 1px dashed #93b75d; border-radius: 14px; background: var(--cream); cursor: pointer; text-align: center; }
.frame-upload > span { color: var(--accent-dark); font-size: 26px; }
.frame-upload strong { font-size: 12px; }
.frame-upload small { max-width: 100%; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.frame-upload img { width: 100%; height: 110px; object-fit: contain; border-radius: 9px; }
.frame-upload:has(img:not([hidden])) > span { display: none; }
.frame-slot:focus-within .frame-upload { outline: 2px solid var(--cyan); outline-offset: 2px; }
.frame-remove { margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 10px; }
.image-mode-note { font-size: 11px; line-height: 1.6; color: var(--muted); }
.review-card > [hidden] { display: none; }
.generated-inline-player { display: block; width: 100%; max-height: 65vh; margin-block: 18px; border: 1px solid var(--line); border-radius: 18px; background: #101820; }
.player-volume-row button { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; color: white; cursor: pointer; }
.player-volume-row button:hover { background: rgb(255 255 255 / 8%); }
.player-volume-row button[aria-pressed="true"] { color: var(--accent); }
.player-volume-row svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.player-volume-row [data-volume-off], .player-volume-row[data-volume-state="muted"] [data-volume-wave], .player-volume-row[data-volume-state="low"] [data-volume-wave="far"] { display: none; }
.player-volume-row[data-volume-state="muted"] [data-volume-off] { display: block; }
.player-volume-row input { --volume-level: 100%; width: 100%; min-width: 0; height: 44px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.player-volume-row input::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--accent) var(--volume-level), rgb(255 255 255 / 22%) var(--volume-level)); }
.player-volume-row input::-webkit-slider-thumb { width: 10px; height: 10px; margin-top: -3.5px; appearance: none; border: 0; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgb(0 0 0 / 25%); }
.player-volume-row input::-moz-range-track { height: 3px; border-radius: 3px; background: rgb(255 255 255 / 22%); }
.player-volume-row input::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--accent); }
.player-volume-row input::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: white; }
.player-volume-row output { color: rgb(255 255 255 / 72%); font-size: 10px; font-variant-numeric: tabular-nums; text-align: end; }
.player-volume-row :is(button,input):focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@container playback (min-width: 480px) {
  .player-controls-bar { grid-template-columns: auto auto; justify-content: center; column-gap: 20px; }
  .player-volume-row { justify-self: end; }
}
.operation-notice { padding: 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--cream); font-size: 12px; line-height: 1.6; }
.app-announcement { position: fixed; z-index: 50; inset-inline: 12px; bottom: 106px; max-width: 430px; margin-inline: auto; padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--accent); color: #152130; box-shadow: 0 8px 30px rgb(0 0 0 / 12%); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }

/* Administrative workspace. Content editors use the same controls on both layouts. */
[data-screen="admin"] .account-subpage { display: block; max-width: none; }
.admin-tabs { display: flex; margin: 24px 0 12px; padding-bottom: 8px; gap: 8px; overflow-x: auto; }
.admin-tabs button { flex: 0 0 auto; min-height: 42px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 700; }
.admin-tabs button[aria-pressed="true"] { color: #152130; border-color: var(--accent); background: var(--accent); }
[data-admin-view] > h2 { margin: 26px 0 18px; color: var(--ink); font-size: 22px; }
.admin-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-metrics article { display: grid; padding: 20px; gap: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.admin-metrics small { color: var(--muted); font-size: 11px; }
.admin-metrics strong { font-size: 30px; font-variant-numeric: tabular-nums; }
.admin-metrics > p { grid-column: 1 / -1; }
.admin-helper { margin: 14px 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.admin-search { display: flex; margin: 18px 0; gap: 8px; flex-wrap: wrap; }
.admin-search input { flex: 1; min-width: 150px; }
.admin-search :is(input,select), .admin-field :is(input:not([type="checkbox"]),textarea,select) { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); font-size: 13px; }
.admin-search select { width: auto; max-width: 100%; }
.admin-search button, .admin-row-actions button, .admin-pagination button, .admin-content-editors > button, .admin-record-body > button:not(.primary-gradient-button) { min-height: 42px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); color: var(--ink); font-size: 12px; font-weight: 700; }
.admin-settings-group, .admin-content-editor, .admin-record { min-width: 0; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.admin-settings-group > summary, .admin-content-editor > summary { padding: 18px; color: var(--ink); cursor: pointer; font-size: 14px; font-weight: 750; }
.admin-field-grid { display: grid; min-width: 0; padding: 18px; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.admin-field { display: grid; min-width: 0; align-content: start; gap: 8px; color: var(--ink); font-size: 12px; font-weight: 650; }
.admin-field small { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.5; }
.admin-field:has(input[type="checkbox"]) { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 16px; }
.admin-field input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accent-dark); }
.admin-field input[type="color"] { padding: 5px; height: 48px; }
.admin-field textarea { resize: vertical; line-height: 1.6; }
.admin-field-grid > :is(h3,.admin-row-actions,.admin-inline-status) { grid-column: 1 / -1; }
.admin-plan-editor { min-width: 0; margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; }
.admin-plan-editor legend { padding-inline: 6px; font-size: 14px; font-weight: 800; text-transform: capitalize; }
.admin-plan-editor .admin-field + .admin-field { margin-top: 18px; }
.admin-content-editors { padding: 0 16px 16px; }
.admin-content-section { margin-block: 20px; }
.admin-content-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-content-heading h3 { margin: 0; font-size: 17px; }
.admin-add-content { min-height: 44px; flex-shrink: 0; padding: 10px 16px; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent); color: #152130; font-size: 12px; font-weight: 750; }
.admin-add-content:disabled { opacity: .5; cursor: not-allowed; }
.admin-add-content:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.admin-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-save-bar { position: sticky; z-index: 4; bottom: 0; padding: 14px 0; background: var(--surface); border-top: 1px solid var(--line); }
.admin-save-bar > p, .admin-inline-status { margin: 10px 0 0; color: var(--accent-dark); font-size: 12px; line-height: 1.5; }
.admin-save-bar button { min-height: 48px; font-size: 13px; }
.admin-record-list { display: grid; min-width: 0; gap: 12px; }
.admin-record { margin: 0; overflow: hidden; }
.admin-record summary { display: flex; padding: 18px; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.admin-record summary > span { display: grid; min-width: 0; gap: 5px; }
.admin-record summary strong { color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.admin-record summary small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; line-height: 1.5; }
.admin-record summary b { max-width: 140px; padding: 6px 10px; border-radius: 10px; background: var(--cream); color: var(--accent-dark); font-size: 10px; font-weight: 700; overflow-wrap: anywhere; }
.admin-record-body { display: grid; min-width: 0; padding: 18px; gap: 14px; border-top: 1px solid var(--line); }
.admin-record-body .admin-field-grid { padding: 0; }
.admin-record-body form + form { margin-top: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.admin-record-body h3 { margin: 0; font-size: 16px; }
.admin-record-message { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-video-preview { width: 100%; max-width: 640px; max-height: 400px; border-radius: 14px; background: #101820; }
.admin-audit-details { min-width: 0; max-height: 450px; margin: 0; padding: 14px; overflow: auto; border-radius: 10px; background: var(--cream); color: var(--ink); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-pagination { display: flex; margin-top: 18px; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.admin-integration-form { border: 1px solid var(--line); border-radius: 16px; }
[data-screen="admin"] #admin-pricing .review-card { display: grid; margin-bottom: 18px; padding: 20px; grid-template-columns: 1fr; gap: 16px; }
[data-screen="admin"] #admin-pricing form label { display: grid; gap: 8px; font-size: 12px; }
[data-screen="admin"] #admin-pricing form :is(input:not([type="checkbox"]),select) { min-height: 44px; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 13px; }
[data-screen="admin"] #cost-log .account-menu-link { grid-template-columns: minmax(0, 1fr) auto; }
[data-screen="admin"] #cost-log .account-menu-link > span { display: grid; min-width: 0; gap: 8px; }
[data-screen="admin"] #cost-log .account-menu-link small { overflow-wrap: anywhere; }
[data-screen="admin"] #cost-log .account-menu-link b { font-size: 12px; }

html[data-custom-brand="true"] :is(.brand-area,.create-brand-area,.flow-brand-bar,.desktop-introduction,.desktop-studio-note), html[data-custom-brand="true"] .auth-shell::before { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 50%, white), var(--accent)); }
html[data-custom-brand="true"] :is(.primary-flow-button,.primary-gradient-button,.login-submit,.ai-genie-button,.welcome-actions a.primary,.bottom-nav .create-action .nav-icon,.progress-orb,.generation-success > span) { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 60%, white), var(--accent)); color: #152130; }
html[data-custom-brand="true"] :is(.promo-orange,.promo-purple) { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 50%, white), var(--accent)); }
html[data-custom-brand="true"] .promo-teal { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 40%, white), color-mix(in srgb, var(--cyan) 50%, white)); }
html[data-custom-brand="true"] .desktop-brand-mark { background: var(--accent); }
html[data-custom-brand="true"] .logo-mark path:last-child { fill: var(--cyan); }
html[data-custom-brand="true"] .bottom-nav .create-action::before { background: var(--accent); }

@media (min-width: 769px) {
  .app-announcement { inset-inline-start: 260px; inset-inline-end: 24px; bottom: 24px; max-width: 720px; font-size: 14px; }
  .admin-tabs { flex-wrap: wrap; overflow: visible; }
  .admin-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .admin-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 24px; }
  .admin-record summary { padding: 20px 24px; }
  .admin-record summary strong { font-size: 16px; }
  .admin-record summary small, .admin-record summary b { font-size: 12px; }
  .admin-save-bar button { max-width: 360px; }
  [data-screen="admin"] #admin-pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  #admin-pricing > section { grid-column: 1 / -1; }
  [data-screen="admin"] #cost-log { grid-template-columns: 1fr; }
}
@media (min-width: 1280px) {
  .admin-field-grid:has(> .admin-plan-editor) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .admin-field-grid { grid-template-columns: 1fr; }
  .admin-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-screen="admin"] #admin-pricing { grid-template-columns: 1fr; }
}