/* Remake the Trend's own look, loaded after styles.css (which is the shared Turnly template: dark stage, mint, tall
   condensed caps). 2026-11-06 主人「对比同行看看都咋搞吧，还有整体的风格看看智能点做好吧」: the AI trend video sites
   people pick (jumponthetrend, the TikTok-style creator apps) are light, pink-to-violet and rounded, with friendly
   heavy lowercase headlines. So: light by default (dark stays a choice, theme.js), a pink-violet gradient for the main
   actions and the headline's key words, a rounded heavy grotesque (Bricolage Grotesque, SIL OFL, self-hosted) in
   sentence case instead of tall caps, pill buttons and white cards on a soft blush page. Everything here overrides
   tokens or adds styles; the template file stays as it is so the shared fixes keep merging. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("/static/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("/static/fonts/bricolage-grotesque-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --display: "Bricolage Grotesque", "Familjen Grotesk", "Helvetica Neue", sans-serif;
  --accent: #ff5aa8;   /* pink: chips, prices, focus */
  --accent-2: #9b5cff; /* violet */
  --accent-3: #ffb547; /* small marks */
  --grad: linear-gradient(100deg, #ff3d9a 0%, #c04dff 55%, #7b61ff 100%);
  --r: 20px;
}
/* Dark (a visitor's choice): plum instead of black so the pink and violet sit on something warm. */
:root:not([data-theme="light"]) { --ink: #120b1c; --ink-2: #1c1329; --ink-3: #261b36; --line: #34284a; --bg: #120b1c; --alt-bg: #1a1226; --alt-card: #120b1c; }
:root[data-theme="light"] {
  --bg: #fff7fb;
  --text: #1b1029;
  --ink: #1b1029;      /* text on pink chips, dark buttons */
  --ink-2: #ffffff;    /* cards */
  --ink-3: #f7eef8;
  --line: #eedcec;
  --muted: #6d5e7e;
  --text-2: #3b2c4e;
  --accent-text: #c81f7c;
  --alt-bg: #fbeff8;
  --alt-card: #ffffff;
}
:root[data-theme="light"] body {
  background:
    radial-gradient(900px 560px at 8% -6%, #ffd2ea 0%, transparent 62%),
    radial-gradient(800px 560px at 96% 4%, #e6dbff 0%, transparent 60%),
    radial-gradient(700px 500px at 60% 40%, #fff0f7 0%, transparent 70%),
    var(--bg) no-repeat;
}
:root[data-theme="light"] body::before { opacity: 0; }
@media (min-width: 961px) {
  :root[data-theme="light"] .site-header { background: color-mix(in srgb, #fff7fb 80%, transparent); border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }
}

/* ---------- type: sentence case, heavy, tight ---------- */
h1, h2, .brand-word, .footer-brand, .ticket-kicker, .price-name, .doc h1, .vid-wait b, .hd-cap b, .hp-card b, .glance dt,
.sample-cap b, .pb-copy, .guide-cta, .btn-preview-label, .result-h, .page-head h1, .wrap > h1, .signin h1, .sub-h,
.how-grid b, .account-head h1, .phone-title, .ec-media b, .paste-h, .rail-head h2, .s2-paste-row #clip-go, .btn-go,
.hero h1, .btn-line {
  text-transform: none;
  letter-spacing: -.02em;
}
h2 { font-weight: 800; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.02; }
.hero h1 { font-weight: 800; font-size: clamp(46px, 5.6vw, 82px); line-height: .98; letter-spacing: -.035em; }
.hero-trend h1 { font-size: clamp(38px, min(6vw, calc(min(1180px, 100vw - 40px) / var(--fit, 1) * 1.6)), 72px); }
.hero h1 em { font-family: var(--display); font-style: normal; font-weight: 800; letter-spacing: -.02em; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.brand-word { font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.brand-word em { font-family: var(--display); font-style: normal; font-weight: 800; font-size: inherit; }
.rail-head h2, .sub-h { font-weight: 800; font-size: clamp(22px, 2.4vw, 28px); }
.paste-h { font-weight: 800; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.1; }
.page-head h1, .wrap > h1, .signin h1, .account-head h1, .doc h1 { font-weight: 800; font-size: clamp(38px, 5.4vw, 64px); line-height: 1; }
.ec-media b, .hp-card b { font-weight: 800; font-size: 18px; }
.eyebrow, .sec-tag { letter-spacing: .1em; }
@media (max-width: 960px) {
  .hero h1 { font-size: clamp(40px, 11.5vw, 64px); }
  .hero-trend h1 { font-size: clamp(30px, min(11vw, calc((100vw - 40px) / (var(--fit, 1) * .58))), 60px); }
}

/* ---------- buttons: gradient pills ---------- */
.btn-go, .site-nav .nav-cta, .sticky-go .btn-go, .guide-cta, .s2-paste-row #clip-go,
:root[data-theme] .price-card .btn-go, :root[data-theme] .signin .btn-go, :root[data-theme] .panel .btn-go,
:root[data-theme] .gift-form .btn-go, :root[data-theme] .balance-card .btn-go, :root[data-theme] .vid-actions .btn-go,
:root[data-theme] #redeem .btn-go, :root[data-theme] .mock .btn-go {
  background: var(--grad); color: #fff; border: 0;
  box-shadow: 0 10px 26px -10px rgba(214, 51, 160, .55);
  font-weight: 800;
}
.btn-go { border-radius: 16px; }
.btn-small, .site-nav .nav-cta, .hero-btns .btn-go { border-radius: 999px; }
@media (hover: hover) {
  .btn-go:hover, .site-nav .nav-cta:hover { background: var(--grad); color: #fff; filter: saturate(1.15) brightness(1.04); }
}
.btn-go-price { background: rgba(255, 255, 255, .95); color: #1b1029; }
.btn-line { border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--accent-2) 30%, var(--line)); background: color-mix(in srgb, var(--ink-2) 90%, transparent); font-weight: 800; }
.hero-btns .btn-go, .hero-btns .btn-line { font-family: var(--display); font-size: 19px; padding: 14px 26px; }
.tf-cat[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.tf-cat { background: color-mix(in srgb, var(--ink-2) 85%, transparent); font-weight: 600; }
.tf-q { border-radius: 999px; padding-inline: 18px; }

/* ---------- home hero ---------- */
.hero-home .eyebrow { color: var(--accent-2); }
.facts { color: var(--muted); }
.platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.platforms .pf-lead { margin-right: 4px; font: 700 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.platforms .pf { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 11px; border-radius: 999px; font-weight: 800; font-size: 14px; line-height: 1; cursor: default; }
.platforms .pf svg { width: 16px; height: 16px; fill: currentColor; }
.platforms .pf-tiktok { background: #000; color: #fff; }
.platforms .pf-tiktok svg { filter: drop-shadow(-1.2px -1px 0 #25f4ee) drop-shadow(1.2px 1px 0 #fe2c55); }
.platforms .pf-ig { background: linear-gradient(90deg, #f58529, #dd2a7b 45%, #8134af 80%, #515bd4); color: #fff; }
.platforms .pf-yt { background: #fff; color: #1b1029; box-shadow: inset 0 0 0 1.5px #f1dbe9; }
.platforms .pf-yt svg { fill: #ff0033; }
.made-with { color: var(--muted); }
.made-with b { font: 700 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin-right: 6px; }
.trust-line { color: var(--text-2); }
.hero-pics a { border-radius: 22px; }
.hero-pics li:nth-child(2) a { box-shadow: 0 0 0 3px #fff, 0 22px 50px -18px rgba(123, 60, 160, .55); }
.face-tag { position: absolute; top: 12px; left: 50%; z-index: 2; translate: -50% 0; padding: 7px 12px; border-radius: 999px; background: var(--grad); color: #fff; font: 800 13px/1 var(--display); white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(214, 51, 160, .7); }
.face-tag::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; translate: -50% 0; rotate: 45deg; background: #c04dff; border-radius: 2px; z-index: -1; }
.paste-card { border-radius: 24px; background: #fff; box-shadow: 0 24px 60px -24px rgba(123, 60, 160, .35), 0 0 0 1px #f3e3f0; }
:root:not([data-theme="light"]) .paste-card { background: var(--ink-2); box-shadow: 0 0 0 1px var(--line); color: var(--text); }
.paste-card input { border-radius: 999px; }
.paste-card .btn-go { border-radius: 999px; }

/* ---------- deal bar (home): the real 3-video pack saving ---------- */
.deal-bar { display: flex; align-items: center; gap: 10px; width: var(--wrap); margin: 14px auto 0; padding: 9px 9px 9px 16px; border-radius: 14px; background: #1b1029; color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; line-height: 1.2; }
.deal-bar[hidden] { display: none; }
.deal-bar .db-hot { color: #4df0e0; font-weight: 800; white-space: nowrap; }
.deal-bar s { color: #9d8fb0; font-weight: 600; }
.deal-bar .db-save { color: #4df0e0; }
.deal-bar .db-go { margin-left: auto; flex: none; padding: 8px 14px; border-radius: 999px; background: var(--grad); color: #fff; font-weight: 800; font-size: 14px; white-space: nowrap; }
@media (hover: hover) { .deal-bar:hover { color: #fff; } .deal-bar:hover .db-go { filter: brightness(1.08); } }
@media (max-width: 600px) {
  .deal-bar { font-size: 13.5px; padding: 8px 8px 8px 12px; gap: 6px; flex-wrap: wrap; }
  .deal-bar .db-go { padding: 7px 11px; font-size: 13px; }
  .deal-bar .db-save { display: none; }
  .deal-bar { flex-wrap: nowrap; font-size: 13px; }
  .deal-bar.regular-only s { display: none; }
  .deal-bar .db-new { display: none; }
  .deal-bar > span:not(.db-go) { white-space: nowrap; }
}

/* ---------- cards and sections ---------- */
.tc img, .tc video { border-radius: 18px; box-shadow: 0 14px 30px -18px rgba(90, 40, 120, .45); }
:root[data-theme="light"] .tc img, :root[data-theme="light"] .tc video { background: #f1e3f1; }
.tc-hot { background: rgba(255, 255, 255, .92); color: #1b1029; font-weight: 800; }
.tc-new { background: var(--grad); color: #fff; }
.tc-stat { color: var(--accent-text); }
.sec-tag { border-color: color-mix(in srgb, var(--accent-2) 35%, transparent); background: color-mix(in srgb, var(--accent-2) 10%, transparent); color: var(--accent-2); }
:root[data-theme="light"] .sec-tag { color: #6b35d9; }
.ec-media { border-radius: 20px; }
.chip-hot { background: var(--grad); color: #fff; }
.site-footer { border-top-color: color-mix(in srgb, var(--line) 70%, transparent); }
:root[data-theme="light"] .ticket { box-shadow: 0 24px 60px -20px rgba(123, 60, 160, .35), 0 0 0 1px #f3e3f0; }

/* ---------- maker card on a light page: white, soft shadow ---------- */
:root[data-theme="light"] .ticket { background: #fff; }
:root[data-theme="light"] .drop { background: #fdf5fb; border-color: #e9cfe3; }
@media (hover: hover) { :root[data-theme="light"] .drop:hover { background: #fbeaf6; border-color: var(--accent-2); } }
:root[data-theme="light"] .drop.drag { background: #fbeaf6; border-color: var(--accent-2); }

/* ---------- closing banner (jumponthetrend ends on a dark card with one button) ---------- */
.final { width: var(--wrap); margin: 30px auto 10px; padding: 56px 24px 50px; border: 0; border-radius: 28px; color: #fff;
  background: radial-gradient(600px 300px at 15% 0%, rgba(255, 61, 154, .35), transparent 70%), radial-gradient(600px 320px at 90% 100%, rgba(123, 97, 255, .4), transparent 70%), #1b1029; }
.final h2 { color: #fff; }
.final p { color: #d9cde6; }
.final .final-go a:not(.guide-cta) { color: #fff; }
.guide-cta { border-radius: 999px; font-weight: 800; }

/* ---------- phones ---------- */
@media (max-width: 480px) {
  .brand-word { font-size: 18px; }
  .platforms { gap: 6px; }
  .platforms .pf-lead { display: none; }
  .platforms .pf { padding: 6px 10px 6px 9px; font-size: 13px; gap: 6px; }
  .platforms .pf svg { width: 14px; height: 14px; }
  .hero-btns .btn-go, .hero-btns .btn-line { font-size: 17px; padding: 12px 20px; }
  .final { padding: 40px 18px 36px; border-radius: 22px; }
}
:root:not([data-theme="light"]) .deal-bar { box-shadow: 0 0 0 1px var(--line); }

/* first-video price (catalog.js FIRST_VIDEO): the old price struck through beside it, and its note on the pricing card */
.pay-price s { margin-left: 6px; color: var(--muted); font-weight: 600; font-size: .55em; }
.price-first { margin: 2px 0 0; color: var(--accent-text); font-weight: 800; font-size: 14px; }
/* The trend clip plays with sound on a tap (studio.js). */
.s2-ref video{cursor:pointer}

/* Trend detail page, after jumponthetrend, makeviral, kavel and getstarrd (2026-11-06) */
/* The long parts fold under their heading (home.mjs fold). */
.sec-fold { border-top: 1px solid var(--line); }
.sec-fold:last-of-type { border-bottom: 1px solid var(--line); }
.sec-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; }
.sec-fold > summary::-webkit-details-marker { display: none; }
#what .sec-fold > summary > h2, #how .sec-fold > summary > h2, .sec-fold > summary > h2, .sec-fold > summary > h3 { margin: 0; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.25; }
.sec-fold > summary::after { content: "+"; flex: none; color: var(--accent-text); font: 900 26px/1 var(--display); }
.sec-fold[open] > summary::after { content: "–"; }
.sec-fold-body { padding-bottom: 18px; }
.sec-fold-body > :first-child { margin-top: 0; }
/* The trend clip: a "Sound on" label people can read, and a full-screen button (jumponthetrend's ⤢). */
.s2-sound { width: auto; height: 34px; padding: 0 12px 0 9px; border-radius: 999px; display: flex; align-items: center; gap: 5px; font: 700 13px/1 var(--sans); white-space: nowrap; }
.s2-sound .snd-ico { width: 18px; height: 18px; }
.s2-full { position: absolute; left: 8px; bottom: 8px; width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(13, 11, 18, .72); color: var(--cream); cursor: pointer; }
.s2-full svg { width: 18px; height: 18px; }
.s2-ref:has(.s2-ref-video[hidden]) .s2-full { display: none; }
/* Computers: the next-step bar floats at the bottom while the generator is off screen (makeviral's bar). */
@media (min-width: 961px) {
  /* Just the button, no frosted ring around it (11-06: the ring sat over the version cards and looked smudged). */
  .sticky-go:not([hidden]) { display: block; left: 50%; right: auto; bottom: 22px; transform: translateX(-50%); width: min(420px, 90vw); padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sticky-go .btn-go { font-size: 18px; padding: 13px 18px; border-radius: 999px; box-shadow: 0 10px 28px rgba(30, 10, 60, .3); }
}
/* Phones: a smaller trend headline, so the generator starts higher on the first screen. */
@media (max-width: 600px) {
  .hero-trend h1 { font-size: clamp(28px, min(8.6vw, calc((100vw - 40px) / (var(--fit, 1) * .58))), 44px); }
}

/* How it works: the fixes table has sentences, not figures (11-06, moved there from every trend page). */
.cost-table.fixes th, .cost-table.fixes td { white-space: normal; vertical-align: top; }

/* ---------- 11-06 体验打磨（主人「从体验和使用的角度对比同行」） ---------- */
/* The generator's main button and the pay window in this skin (they kept the template's flat pink with a hard black
   shadow and the cream ticket, next to gradient pills everywhere else). */
.studio2 #go { background: var(--grad); color: #fff; border-radius: 18px; box-shadow: 0 14px 30px -12px rgba(214, 51, 160, .7); }
@media (hover: hover) { .studio2 #go:hover { background: var(--grad); filter: saturate(1.15) brightness(1.04); } }
.studio2 #go:active { transform: translateY(1px); box-shadow: 0 8px 18px -10px rgba(214, 51, 160, .7); }
.gate { background: #fff; color: #1b1029; box-shadow: 0 30px 80px -20px rgba(60, 20, 90, .55); }
.gate-video { border: 1px solid #f3dcec; background: #fff5fa; }
.pay-card { border: 1.5px solid #eedcec; border-radius: 18px; }
@media (hover: hover) { .pay-card:hover { border-color: #d9a7d0; } }
.pay-card.lead { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; box-shadow: 0 16px 34px -18px rgba(150, 50, 200, .6); }
.pay-badge { border: 0; border-radius: 999px; padding: 4px 10px; background: var(--grad); color: #fff; }
.pay-cta { border: 1.5px solid #e4cfe6; border-radius: 999px; color: #1b1029; }
.pay-card.lead .pay-cta { border: 0; background: var(--grad); color: #fff; }
.pay-price b { color: #1b1029; }

/* My videos after paying: the video first with Download as its button, then the question, then the refund links. */
.balance-card[hidden] { display: none; }
.vid-actions { flex-wrap: wrap; justify-content: flex-start; gap: 8px 14px; }
.vid-actions .vid-dl { flex: 1 1 100%; justify-content: center; text-align: center; font-size: 17px; padding: 12px 14px; }
.vid-actions > :last-child.link-btn { margin-left: auto; }
#found-slot .found-panel { margin-top: 22px; }
.account-refund { margin-top: 18px; }

/* 404: the week's busiest trends. */
.nf-trends { padding-top: 0; padding-bottom: 48px; }
.nf-trends .sub-h { margin-bottom: 16px; }
.nf-trends .guide-cta { display: inline-flex; margin-top: 18px; }
/* The video being made: a bar and the minutes left, the "another email" link readable on the dark box. */
.vid-prog { width: min(220px, 80%); height: 6px; margin: 14px auto 0; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.vid-prog i { display: block; height: 100%; border-radius: inherit; background: var(--grad); }
.vid-left { margin: 8px 0 0; color: #f3e8ff; }
.vid-wait .notify-form summary { color: #e9dcf7; }
.vid > .card-form, .vid > .result-rate { margin-inline: 14px; }
/* Computers: as many columns as there are offers (a guest gets two; three fixed columns left one empty). */
@media (min-width: 760px) {
  .pay-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .pay:not(:has(.pay-card:nth-of-type(3):not([hidden]))) { width: min(600px, calc(100vw - 48px)); }
}
/* Popular versions: the looping preview takes the cover's place (trend-extras.mjs versionMedia). */
.versions video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; margin-bottom: 8px; background-color: var(--ink-2); }