/* css-version: 199 */
/* Bump the number above on every change: it is stamped on every asset URL (main._css_version),
   so a CSS-only deploy reaches browsers without a restart. FRONTEND-OWNED from its first merge.

   The look is the home-page design's (#319): paper and ink, coral, sun, sky and mint; Bagel Fat
   One for display, Figtree for text, DM Mono for figures. Sticker-style: 2px ink borders and an
   offset shadow on what you press. DARK BY DEFAULT (#342); light by data-theme="light", or by
   data-theme="system" on a device set to light. The top bar's switch sets data-theme (#362).
   Coral fills carry INK text (white on coral is under 4.5:1); coral as text is --accent-text. */

@font-face{font-family:"Bagel Fat One";src:url("fonts/bagel-fat-one.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/figtree.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"DM Mono";src:url("fonts/dm-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:#0F1330;--surface:#181D42;--raised:#212863;--line:#2B3266;
  --fg:#F1F3FF;--muted:#A7AED3;--ink:#F1F3FF;
  --accent:#FF6F64;--accent-ink:#14193B;--accent-text:#FF8F86;
  --sun:#FFD25E;--sky:#7C9DFF;--mint:#5AD9AD;
  --ok:#5AD9AD;--bad:#FF8F86;--danger:#C8322A;
  --display:"Bagel Fat One","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F3F6FF;--surface:#FFFFFF;--raised:#E8EDFB;--line:#D9DFF2;
  --fg:#14193B;--muted:#5A6185;--ink:#14193B;
  --accent:#FF5A4E;--accent-ink:#14193B;--accent-text:#C8322A;
  --sun:#FFC83D;--sky:#4D7CFE;--mint:#3CCB9A;
  --ok:#17845D;--bad:#C8322A;--danger:#C8322A;
  color-scheme:light;
}
@media (prefers-color-scheme: light){
  :root[data-theme="system"]{
    --bg:#F3F6FF;--surface:#FFFFFF;--raised:#E8EDFB;--line:#D9DFF2;
    --fg:#14193B;--muted:#5A6185;--ink:#14193B;
    --accent:#FF5A4E;--accent-ink:#14193B;--accent-text:#C8322A;
    --sun:#FFC83D;--sky:#4D7CFE;--mint:#3CCB9A;
    --ok:#17845D;--bad:#C8322A;--danger:#C8322A;
    color-scheme:light;
  }
}

*{box-sizing:border-box}
[x-cloak]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 var(--body);
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
a{color:var(--accent-text)}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.app{max-width:480px;margin:0 auto;padding-block:8px 32px}
h1,h2{font:400 28px/1.08 var(--display);letter-spacing:.005em;margin:0 0 8px;text-wrap:balance}
h3{font:700 17px/1.25 var(--body);margin:0 0 10px}
h1:focus,h2:focus,h3:focus{outline:none}
p{margin:0 0 12px}
.muted{color:var(--muted)}
.small{font-size:12px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.note{font-size:12px;color:var(--muted);margin:10px 0}
.error,.note.bad{color:var(--bad)}
.error{font-size:13px;margin:10px 0}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row.end{justify-content:flex-end;margin-top:20px}
.row.between{justify-content:space-between;margin-top:16px}
.row.gap{gap:8px}
.stack{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.right{text-align:right}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;padding:8px 0 16px}
.brand{font:400 23px/1 var(--display);display:flex;align-items:center;gap:9px;color:var(--fg);text-decoration:none}
/* The paw-dot logo: a coral circle with two ears. */
.brand .dot{width:22px;height:22px;border-radius:50%;background:var(--accent);position:relative;flex:none;margin-top:4px}
.brand .dot::before,.brand .dot::after{content:"";position:absolute;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.brand .dot::before{left:1px}.brand .dot::after{right:1px}
.iconbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--fg);background:var(--surface);border:2px solid var(--ink);cursor:pointer;padding:0;text-decoration:none;font:400 16px var(--display)}
.iconbtn.on{background:var(--accent);color:var(--accent-ink)}
/* THE ADMIN LAUNCHER (Thesis's): just right of the account button. Its badges keep off the two
   corners that identify the glyph — head top-right, cog bottom-left — so the count takes
   bottom-right and the health dot top-left. `[hidden]` needs the !important: anything that sets
   `display` outranks the browser's own rule, and the element goes on painting. */
.top-acts{display:flex;align-items:center;gap:8px}
.admin-fab{position:relative}
.admin-badge{position:absolute;pointer-events:none;border:1.5px solid var(--bg)}
.admin-badge[hidden]{display:none !important}
.admin-badge-support{bottom:-3px;right:-3px;min-width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:var(--accent);color:var(--accent-ink);padding:0 4px;font:700 9.5px var(--mono)}
.admin-badge-health{top:-3px;left:-3px;width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--muted)}
.admin-badge-health.is-warn{background:var(--accent)}
.admin-badge-health.is-bad{background:var(--bad)}

/* Placeholder marker for every value that comes from a stub in static/js/api.js */
.stub{display:inline-block;font:500 10px/1.6 var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--muted);border-radius:999px;padding:0 7px;vertical-align:middle;white-space:nowrap}

/* Cards and controls */
.card{background:var(--surface);border:2px solid var(--ink);border-radius:20px;padding:18px;margin-bottom:14px}
.card.gate{box-shadow:5px 5px 0 var(--accent)}
.card.alert{border-color:var(--bad)}
.loginbar{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface);border:2px solid var(--ink);border-radius:14px;padding:10px 14px;margin-bottom:16px;font:600 14px var(--body);color:var(--fg);cursor:pointer;text-align:left}
.btn{font:700 15px var(--body);color:var(--fg);background:var(--surface);border:2px solid var(--ink);border-radius:14px;padding:11px 18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;text-decoration:none;transition:transform .12s ease,box-shadow .12s ease}
.btn.primary{background:var(--accent);color:var(--accent-ink);box-shadow:4px 4px 0 var(--ink);margin-right:4px}
.btn.primary.wide{width:calc(100% - 4px)}
.btn.primary:not(:disabled):hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn.primary:not(:disabled):active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.ghost{background:transparent}
.btn.wide{width:100%}
.btn.small{padding:7px 12px;font-size:14px;border-radius:12px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.btn:focus-visible,.pick:focus-visible,.opt:focus-visible,.tabs a:focus-visible,.seg button:focus-visible,.iconbtn:focus-visible,.loginbar:focus-visible,.upload:focus-within,.steps a:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);margin:14px 0 0;cursor:pointer}
.check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent);flex:none}
.check.strong{color:var(--fg)}

/* Step rail */
/* The rail's four steps spread evenly at every width (owner, #495; it was laid out for five). */
.steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;padding:0;margin:0 0 20px}
.steps li{font-size:11px;color:var(--muted);text-align:center}
.steps li>*{display:flex;flex-direction:column;align-items:center;gap:4px;color:inherit;text-decoration:none;background:none;border:0;padding:0;font:inherit;width:100%;cursor:default}
.steps li a{cursor:pointer}
.steps .n{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font:500 11px var(--mono);background:var(--surface)}
.steps li.on{color:var(--fg)}
.steps li.on{font-weight:700}
.steps li.on .n{background:var(--accent);color:var(--accent-ink);border-color:var(--ink)}
.steps li.done .n{background:var(--mint);border-color:var(--ink);color:#14193B}

/* Reference video */
.list{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.pick{display:flex;gap:12px;align-items:center;text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:10px;color:var(--fg);cursor:pointer;font:inherit;width:100%}
.pick img{width:56px;height:80px;border-radius:8px;object-fit:cover;flex:none;background:var(--raised)}
.pick span{display:flex;flex-direction:column;min-width:0}
.pick b{font-weight:600;overflow-wrap:anywhere}
.pick small{color:var(--muted);font-size:12px}
.pick.on{border-color:var(--ink);box-shadow:4px 4px 0 var(--accent)}
.upload{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface);border:2px dashed var(--ink);border-radius:16px;padding:14px;cursor:pointer;color:var(--fg);font-weight:600}
.upload[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.upload small{color:var(--muted);font-weight:400}
.upload input{position:absolute;opacity:0;width:1px;height:1px}
.chosen{display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--raised);border-radius:12px;padding:10px 14px;margin-top:10px;font-size:13px;min-width:0}
.chosen b{overflow-wrap:anywhere}
/* The uploaded video's row (#311): its thumbnail, then the name and length, then the X. */
.chosen-thumb{flex:none;width:44px;aspect-ratio:9/16;border-radius:8px;overflow:hidden;background:#000}
.chosen-thumb.wide{width:72px;aspect-ratio:16/9}
.chosen-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.chosen-what{flex:1;min-width:0}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);margin-top:14px}
/* 16px in every text field: iOS Safari zooms the page on focus into anything smaller, and the zoom
   survives the reload after signing in (#132). No maximum-scale, so pinch-zoom still works. */
input,select,textarea{font-size:16px}
.field select,.form input,.form select{font:inherit;font-size:16px;color:var(--fg);background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:11px 12px;min-width:0;width:100%}

/* Pet photo */
.imgbox{aspect-ratio:9/16;max-width:220px;margin:14px auto;border-radius:14px;overflow:hidden;background:var(--raised);border:1px solid var(--line);display:grid;place-items:center}
.imgbox.pickable{cursor:pointer}
.imgbox.pickable:hover{border-color:var(--accent)}
/* The whole photo, never cropped (owner, #361): it sits inside the box on the box's own colour. */
.imgbox img{width:100%;height:100%;object-fit:contain}
.imgbox.many{aspect-ratio:auto;max-width:none;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px}
.imgbox.many img{aspect-ratio:3/4;border-radius:8px}
.empty{color:var(--muted);font-size:13px;padding:12px;text-align:center}

/* Quality */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.opt{background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:16px;text-align:left;color:var(--fg);cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:4px}
.opt b{font:400 24px var(--display)}
.opt small{color:var(--muted);font-size:12px}
.opt[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.opt .made{font-size:12px;color:var(--muted)}
.opt.on{border-color:var(--ink);box-shadow:4px 4px 0 var(--accent)}
.estimate{background:var(--raised);border-radius:12px;padding:12px 14px;margin-top:14px;font-size:13px}
.cost{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:14px 0 10px}
.btn.cancel-render{margin-top:10px}
.warn-line{color:var(--fg);margin:8px 0 0}
.balance div{white-space:nowrap}
.big{font-size:26px;font-weight:500}
.big small{font-size:13px;color:var(--muted)}

/* Keyframes and progress */
.frames{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
@media (min-width:720px){.frames{grid-template-columns:repeat(4,1fr)}}
.frames figure{margin:0}
.frames .frame{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;background:var(--raised);color:var(--muted);font-size:12px;text-align:center;padding:8px}
.frames .frame.wait{background:linear-gradient(100deg,var(--raised) 40%,var(--surface) 50%,var(--raised) 60%);background-size:300% 100%;animation:shimmer 1.6s linear infinite}
.frames img.frame{padding:0}
.frames figcaption{font:500 11px var(--mono);color:var(--muted);margin-top:4px}
/* Other preview counts (#308): one image sits alone, more than four go three across on a phone,
   and a combined grid is one image drawn with its panels while it is made. */
.frames.one{grid-template-columns:minmax(0,320px);justify-content:center}
.frames.many{grid-template-columns:repeat(3,1fr)}
@media (min-width:720px){.frames.one{grid-template-columns:minmax(0,420px)}.frames.many{grid-template-columns:repeat(4,1fr)}}
.frames .grid-wait{display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr);place-items:stretch;gap:3px;padding:3px;aspect-ratio:calc(var(--cols) * 9)/calc(var(--rows) * 16)}
.frames .grid-wait span{border-radius:6px;border:1px dashed var(--line)}
.frames img.grid-img{aspect-ratio:auto;height:auto;object-fit:contain}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
.track{height:8px;background:var(--raised);border-radius:999px;overflow:hidden;margin:16px 0 6px}
.bar{height:100%;background:var(--accent);width:0;transition:width .12s linear}
.bar.indeterminate{width:35%;animation:slide 1.4s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}

.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--raised);border-radius:10px;padding:3px;margin:12px 0}
.seg button{font:600 13px var(--body);color:var(--muted);background:transparent;border:0;border-radius:8px;padding:8px;cursor:pointer}
.seg button.on,.seg button[aria-pressed="true"]{background:var(--surface);color:var(--fg)}

/* The sign-in / plan gate as a modal (#80). */
.modal{width:calc(100% - 32px);max-width:440px;max-height:calc(100dvh - 48px);overflow:auto;background:var(--surface);color:var(--fg);border:2px solid var(--ink);border-radius:22px;padding:20px;box-shadow:6px 6px 0 var(--accent)}
.modal::backdrop{background:rgba(20,25,59,.6)}
/* Step 1 (#82): the upload box holds the rights box; trends sit below it. */
.upload-box{background:var(--surface);border:2px dashed var(--ink);border-radius:18px;padding:14px;margin-top:14px}
.upload-box .upload{border:0;padding:0;background:transparent}
.btn.xbtn{font-size:22px;line-height:1;width:36px;height:36px;padding:0}
.trends{margin-top:30px}
/* Fixed-width thumbnails, never stretched to fill the row (owner: too large on staging). */
.trend-row{display:grid;grid-auto-flow:column;grid-auto-columns:120px;justify-content:start;gap:10px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory}
.trend{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:6px;color:var(--fg);font:inherit;cursor:pointer;scroll-snap-align:start;min-width:0}
@media (min-width:720px){.trend-row{grid-auto-columns:140px}}
.trend img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:8px;background:var(--raised)}
.trend b{font-weight:600;font-size:13px;overflow-wrap:anywhere}
.trend-cell{position:relative;display:flex;min-width:0;scroll-snap-align:start}
.trend-cell .trend{flex:1}
.trend-play{position:absolute;top:12px;right:12px;width:30px;height:30px;display:grid;place-items:center;border:2px solid #14193B;border-radius:50%;background:var(--accent);color:#14193B;cursor:pointer;padding:0}
.trend-play:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.trend-modal video{display:block;width:100%;max-height:calc(100dvh - 200px);object-fit:contain;background:#000;border-radius:10px;margin-top:8px}
.trend.on{border-color:var(--ink);box-shadow:4px 4px 0 var(--accent)}
.trend:focus-visible,.xbtn:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
/* Create's banner of clips in progress (#92). */
.track.sm{display:block;height:5px;margin:4px 0 0}
.track.sm .bar{display:block}
/* Back · Cancel this clip · Next on one row (#148). */
.nav-row{flex-wrap:nowrap;gap:8px}
.nav-row .btn{padding-inline:12px;white-space:nowrap}
.btn.danger{background:var(--danger);color:#fff}
.danger-text{color:var(--bad)}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.player{position:relative;aspect-ratio:9/16;max-width:260px;margin:14px auto 0;border-radius:22px;overflow:hidden;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--sky);background:#000}
.player video{width:100%;height:100%;object-fit:cover;display:block}

/* Library */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
/* The Gallery's one side-scrolling row (#167): on a phone each card is at most three quarters of the
   screen's width, and narrower when that would run past the bottom of the screen: 355px is the row's
   top (205) plus a card's text and buttons under its 9:16 picture (132) plus a margin (18). The next
   card peeks in; the row scrolls, the page never does. */
.gallery-row{display:grid;grid-auto-flow:column;grid-auto-columns:min(75vw, calc((100vh - 355px) * 9 / 16));grid-auto-columns:min(75vw, calc((100dvh - 355px) * 9 / 16));justify-content:start;align-items:stretch;gap:12px;margin-top:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.gallery-row>.item{scroll-snap-align:start}
@media (min-width:720px){.gallery-row{grid-auto-columns:200px}}
.item.more-tile{display:grid;place-items:center;padding:12px;border-style:dashed}
.item{background:var(--surface);border:2px solid var(--ink);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;min-width:0;position:relative}
/* The Gallery badge (owner, #600): an iPhone-style count on the tab, and a dot on each counted card. */
.tabs a{position:relative}
.tab-badge{position:absolute;top:-9px;right:6px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#FF3B30;color:#fff;font:700 12px/22px var(--body);text-align:center;box-shadow:0 0 0 2px var(--bg);pointer-events:none}
.item-dot{position:absolute;top:8px;right:8px;z-index:2;width:14px;height:14px;border-radius:50%;background:#FF3B30;box-shadow:0 0 0 2px var(--surface)}
.item .item-video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;background:#000}
/* Fullscreen shows the whole clip (owner, #545): the cards' fill would crop it. */
.item .item-video:fullscreen,.player video:fullscreen{object-fit:contain;background:#000}
.item .item-video:-webkit-full-screen,.player video:-webkit-full-screen{object-fit:contain;background:#000}
.item img{width:100%;aspect-ratio:9/16;object-fit:contain;display:block;background:var(--raised)}
.item .meta{padding:10px 10px 0;display:flex;flex-direction:column;gap:2px;min-width:0}
.item .meta b{font-weight:600;overflow-wrap:anywhere}
/* Gallery cards (#151): the picture and title open the clip; one slim icon row. Every picture,
   photo or video, is 9:16 (the clips' own shape), so cards in a row line up with no gap. */
/* A clip that is ready stands out (owner, #151: gold): the sun-yellow offset (#319). */
.item.is-ready{box-shadow:5px 5px 0 var(--sun)}
.item .item-open{color:inherit;text-decoration:none;display:block}
.item a.meta{display:flex}
.item .icons{display:flex;gap:8px;padding:10px;margin-top:auto}
.iconbtn.sm{width:36px;height:36px}
.iconbtn.danger-icon{color:var(--bad)}
.iconbtn[aria-disabled="true"]{opacity:.35;cursor:not-allowed}
.item .acts{padding:10px;display:flex;flex-direction:column;gap:6px}
.tag{align-self:flex-start;font:500 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border:1.5px solid var(--line);border-radius:999px;padding:1px 8px;margin-top:4px}
.tag.ok{color:var(--ok);border-color:var(--ok)}
.tag.bad{color:var(--bad);border-color:var(--bad)}

/* Account */
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.profile{display:flex;align-items:center;gap:12px}
.avatar{width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--accent-ink);border:2px solid var(--ink);display:grid;place-items:center;font:400 22px var(--display);flex:none}
.profile .who{display:flex;flex-direction:column;min-width:0}
.profile .who small{overflow-wrap:anywhere}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;margin:0 0 14px;align-items:center}
.kv dt{color:var(--muted);font-size:13px}
.kv dd{margin:0;text-align:right;display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;overflow-wrap:anywhere;min-width:0}
.plans{display:flex;flex-direction:column;gap:10px}
.plan{margin:0;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.plan p{grid-column:1;margin:0;color:var(--muted);font-size:13px}
.plan .big{grid-row:1/3;grid-column:2;font-size:22px}
.plan .btn{grid-column:1/3;justify-self:start}
.plan.on{box-shadow:5px 5px 0 var(--accent)}
.usage{width:100%;border-collapse:collapse;font-size:13px}
.usage td,.usage th{padding:9px 0;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.usage th{font:500 11px var(--mono);color:var(--muted);border-top:0}
.usage td:last-child,.usage th:last-child{text-align:right}
.lots{margin:0 0 12px;padding-left:18px;font-size:13px;color:var(--muted)}
.lots li{margin:2px 0}
.totals{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.totals div{background:var(--raised);border-radius:10px;padding:8px 10px;font-size:12px;color:var(--muted)}
.totals b{display:block;color:var(--fg);font:500 16px var(--mono)}
.neg{color:var(--bad)}
.pos{color:var(--ok)}

/* Tabs and notices */
/* The main navigation sits at the top, under the header, and stays in reach on scroll (#66). */
.tabs{position:sticky;top:0;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--surface);border:2px solid var(--ink);border-radius:16px;padding:4px;margin:0 0 20px;z-index:5}
.tabs a{font:700 14px var(--body);color:var(--muted);text-align:center;text-decoration:none;padding:10px;border-radius:12px}
.tabs a.on,.tabs a[aria-current="page"]{color:#14193B;background:var(--sun)}
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 32px);text-align:center;z-index:6}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion: reduce){
  .toast,.bar{transition:none}
  .bar.indeterminate,.frames .frame.wait{animation:none}
  .bar.indeterminate{width:100%;opacity:.5}
}

/* Terms and Privacy (#172): the create-account box, the footer links, and the two pages. */
/* A row, side by side with its sentence: inside a .form, labels are columns (#212). */
.check.terms{display:flex;flex-direction:row;gap:10px;align-items:flex-start;font-size:13px;color:var(--fg);line-height:1.45;margin-top:4px}
.check.terms input{width:20px;height:20px;flex:none;margin:1px 0 0;accent-color:var(--accent)}
.site-foot{display:flex;justify-content:center;gap:16px;margin-top:28px;font-size:12px}
.site-foot a{color:var(--muted)}
.legal{padding-inline:16px;line-height:1.6}
.legal h1{margin-top:6px}
.legal h2{font:400 20px/1.25 var(--display);margin:26px 0 8px}
.legal p,.legal li{font-size:15px;overflow-wrap:anywhere}
.legal ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.legal .brand-line a{font:400 22px var(--display);color:var(--fg);text-decoration:none}
.legal .draft-flag{font-size:13px;color:var(--muted);border:1px dashed var(--line);border-radius:10px;padding:8px 10px}

/* "Continue with Google" (#209), as Call the Trade has it: an "or" rule, then a full-width outlined
   button with Google's G. */
.auth-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.btn.ghost.auth-google{gap:10px;background:var(--surface)}
.auth-google .gicon{flex:none}

/* Help & feedback (#271): Call the Trade's three doors, its answer list, and the context box. */
.help-choices{display:flex;flex-direction:column;gap:8px}
.help-choice{display:flex;flex-direction:column;gap:2px;text-align:left;font:inherit;color:var(--fg);background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer}
.help-choice b{font-weight:600}
.help-choice:hover,.help-choice:focus-visible{border-color:var(--ink);box-shadow:3px 3px 0 var(--accent);outline:none}
.help-faq{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:min(46dvh,380px);overflow:auto}
.help-q{width:100%;text-align:left;font:600 14px var(--body);color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--line);padding:9px 2px;cursor:pointer}
.help-a{margin:6px 2px 8px;font-size:14px;color:var(--muted);line-height:1.5}
.help-context{background:var(--raised);border-radius:10px;padding:10px 12px}
.help-context ul{list-style:none;margin:0;padding:0;overflow-wrap:anywhere}
.help textarea{font:inherit;font-size:16px;color:var(--fg);background:var(--raised);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;resize:vertical}

/* A finished clip's delivered images (#252): two across on a phone, each with its Download. */
.delivered{margin-top:16px}
.delivered-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.delivered figure{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.delivered img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px;background:var(--raised);border:1px solid var(--line)}
@media (min-width:720px){.delivered-grid{grid-template-columns:repeat(4,1fr)}}
/* A single delivered image (#308) is not stretched across two columns. */
.delivered-grid.one{grid-template-columns:minmax(0,320px)}

/* Wider screens (#320). Below 760px nothing here applies: the phone layout is the one above.
   From 760px the column grows to 1040px; forms that read best narrow keep a narrower measure. */
@media (min-width:760px){
  .app{max-width:1040px;padding-block:16px 48px}
  .top{padding:12px 0 20px}
  .tabs{max-width:560px;margin-inline:auto}
  h1,h2{font-size:34px}
  .create-page,#job,.legal{max-width:880px;margin-inline:auto}
  .legal{max-width:760px}
  /* Create step 1: the trends wrap into a grid instead of a sideways row. */
  /* Trends stay one scrolling row on a wide screen too (owner, #577), just wider cards. */
  .trend-row{grid-auto-columns:150px}
  .imgbox{max-width:300px}
  .opts{grid-template-columns:repeat(3,1fr)}
  /* Gallery: a wrapping grid instead of the phone's side-scrolling row (#167). */
  .gallery-row{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));overflow:visible;scroll-snap-type:none;gap:18px}
  .player{max-width:340px}
  .frames.many{grid-template-columns:repeat(4,1fr)}
  /* Create on a wide screen (owner, #495): the steps read in a narrower column. */
  .create-page>*{max-width:640px;margin-inline:auto}
}
@media (min-width:960px){
  /* Create step 3: choices left, the charge and Generate right. */
  .split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0 32px;align-items:start}
  .split-side .card.cost{margin-top:14px}
  /* Account: the cards two across; the balance line and profile span both. */
  .acct-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;align-items:start;grid-auto-flow:row dense}
  .acct-cards>p,.acct-cards>.card.profile,.acct-cards>:not(.card){grid-column:1/-1}
  .gallery-row{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .frames.many{grid-template-columns:repeat(6,1fr)}
}

/* The home page (#321), for signed-out visitors at /. Everything is scoped to .home, and its
   classes start h-, so nothing here reaches the app. The body's side padding is the app's; the
   home page runs edge to edge and pads its own .h-wrap instead. */
body[data-landing]{padding-inline:0;font-size:17px;line-height:1.6}
.home h1,.home h2{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:.005em;margin:0}
.home h1{font-size:clamp(44px,8vw,88px)}
.home h2{font-size:clamp(32px,5vw,52px)}
.home h3{font:700 20px/1.3 var(--body);margin:0}
.home p{margin:0;max-width:62ch}
.h-wrap{max-width:1120px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px))}
.h-lede{font-size:clamp(18px,2.2vw,21px);color:var(--muted)}
.h-chip{display:inline-flex;align-items:center;gap:6px;font:500 12px var(--mono);letter-spacing:.04em;text-transform:uppercase;background:var(--surface);color:var(--fg);border:1.5px solid var(--ink);border-radius:999px;padding:4px 10px;white-space:nowrap}
.h-chip.on{background:var(--accent);color:var(--accent-ink)}
.h-top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.h-top .h-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.h-links{display:flex;align-items:center;gap:20px;font-weight:600;font-size:15px}
.h-links a:not(.btn){text-decoration:none;color:var(--muted)}
.h-links a:not(.btn):hover{color:var(--fg)}
@media (max-width:700px){.h-links .hide-sm{display:none}.h-links{gap:14px}}
/* The tilted phones may reach past a phone's edge: clip them, never scroll the page sideways. */
.h-hero{overflow:hidden;overflow-x:clip;overflow-y:visible}
.h-hero .h-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-block:56px 72px}
.h-hero-copy{display:grid;gap:22px;justify-items:start;min-width:0}
.h-hero-copy h1 em{font-style:normal;color:var(--accent)}
/* In light the coral headline words were 2.85:1 on the page (#327; large text needs 3:1): a
   slightly deeper coral there, 3.26:1. Dark keeps the design's coral (6.67:1). */
:root[data-theme="light"] .h-hero-copy h1 em{color:#ED5449}
@media (prefers-color-scheme: light){:root[data-theme="system"] .h-hero-copy h1 em{color:#ED5449}}
.h-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.h-cta-note{font-size:14px;color:var(--muted)}
.h-phones{position:relative;height:520px;min-width:0}
.h-phone{position:absolute;width:220px;max-width:46%;aspect-ratio:9/16;border-radius:28px;border:3px solid var(--ink);background:var(--surface);box-shadow:8px 8px 0 var(--ink);overflow:hidden}
.h-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-phone .tag{position:absolute;left:10px;bottom:10px;margin:0}
.h-phone.p1{left:2%;top:40px;transform:rotate(-7deg);z-index:1}
.h-phone.p2{left:32%;top:0;transform:rotate(2deg);z-index:3}
.h-phone.p3{right:0;top:70px;transform:rotate(8deg);z-index:2}
@media (prefers-reduced-motion:no-preference){
  .h-phone.p2{animation:h-bob 5s ease-in-out infinite}
  @keyframes h-bob{0%,100%{transform:rotate(2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-8px)}}
}
@media (max-width:860px){.h-hero .h-wrap{grid-template-columns:1fr;padding-block:36px 48px}.h-phones{height:420px}.h-phone{width:180px}}
@media (max-width:420px){.h-phones{height:360px}.h-phone{width:150px}}
.h-strip{border-block:2px solid var(--ink);background:var(--sun);color:#14193B}
.h-strip .h-wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 36px;padding-block:14px;font:400 22px var(--display)}
.h-strip span{white-space:nowrap}
.h-block .h-wrap{padding-block:80px;display:grid;gap:36px}
.h-head{display:grid;gap:12px;max-width:720px}
/* A heading the owner wants on one line (#430): the section's full width, not the 720 px cap. */
.h-head.wide{max-width:none}
.h-demo .h-wrap{padding-bottom:0}
.h-player{position:relative;aspect-ratio:16/9;width:100%;border:3px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:8px 8px 0 var(--sky);background:repeating-linear-gradient(135deg,var(--surface) 0 18px,var(--bg) 18px 36px)}
.h-player-ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:16px}
.h-play{width:84px;height:84px;border-radius:50%;background:var(--accent);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);position:relative}
.h-play::after{content:"";position:absolute;left:32px;top:22px;border-left:24px solid var(--accent-ink);border-top:16px solid transparent;border-bottom:16px solid transparent}
.h-ph-title{font:400 28px var(--display)}
.h-ph-note{font:500 12px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
@media (max-width:520px){.h-player{aspect-ratio:4/5}}
.h-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.h-step{background:var(--surface);border:2px solid var(--ink);border-radius:22px;padding:20px;display:grid;gap:14px;align-content:start;min-width:0}
.h-num{font:400 40px/1 var(--display);color:var(--accent)}
.h-step p{color:var(--muted);font-size:16px}
.h-viz{position:relative;border-radius:14px;overflow:hidden;border:1.5px solid var(--line);aspect-ratio:4/3;background:var(--bg)}
.h-viz>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-trends{display:flex;flex-wrap:wrap;gap:8px;padding:14px}
.h-frames{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:12px;height:100%}
.h-frames i{position:relative;border-radius:8px;overflow:hidden}
.h-frames i::after{content:"PREVIEW";position:absolute;inset:0;display:grid;place-items:center;font:500 9px var(--mono);letter-spacing:.1em;color:rgba(255,255,255,.85);transform:rotate(-24deg)}
.h-frames .c1{background:linear-gradient(160deg,#FFC83D,#FF8A4E)}
.h-frames .c2{background:linear-gradient(160deg,#FF9AA8,#FFC83D)}
.h-frames .c3{background:linear-gradient(160deg,#7C9DFF,#FF7DD6)}
.h-frames .c4{background:linear-gradient(160deg,#3CCB9A,#FFE07A)}
.h-meta{font:500 12px var(--mono);color:var(--muted);letter-spacing:.03em}
@media (max-width:860px){.h-steps{grid-template-columns:1fr}}
.h-gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.h-tile{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;border:2px solid var(--ink);background:var(--raised)}
.h-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-tile .h-chip{position:absolute;left:8px;bottom:8px;font-size:11px}
@media (max-width:900px){.h-gallery{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.h-gallery{grid-template-columns:repeat(2,1fr)}}
.h-small{font-size:13px;color:var(--muted)}
.h-reasons{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.h-reason{border-top:3px solid var(--ink);padding-top:16px;display:grid;gap:8px;min-width:0}
.h-reason p{color:var(--muted);font-size:16px}
@media (max-width:700px){.h-reasons{grid-template-columns:1fr}}
.h-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.h-plan{background:var(--surface);border:2px solid var(--ink);border-radius:22px;padding:22px;display:grid;gap:10px;align-content:start;justify-items:start;min-width:0}
.h-plan.feature{box-shadow:6px 6px 0 var(--accent)}
.home .h-plan h3{font:400 28px var(--display)}
.h-price{font:500 22px var(--mono)}
/* "No monthly charge" (#445): the price line in words, kept to one line. */
.h-price.flat{font-size:16px;line-height:1.6;white-space:nowrap}
.h-price small{font-size:13px;color:var(--muted)}
.h-for{color:var(--muted);font-size:15px}
.h-plan ul{margin:0;padding-left:18px;font-size:15px;display:grid;gap:4px}
@media (max-width:1000px){.h-plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.h-plans{grid-template-columns:1fr}}
.h-plan-notes{display:flex;flex-wrap:wrap;gap:8px}
.h-faq{display:grid;gap:10px;max-width:820px}
.h-faq details{background:var(--surface);border:2px solid var(--ink);border-radius:16px;padding:0 18px}
.h-faq summary{cursor:pointer;font-weight:700;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.h-faq summary::-webkit-details-marker{display:none}
.h-faq summary::after{content:"+";font:400 24px/1 var(--display);color:var(--accent)}
.h-faq details[open] summary::after{content:"\2013"}
.h-faq details p{padding-bottom:16px;color:var(--muted);font-size:16px}
.h-band{background:#14193B;color:#F3F6FF}
.h-band .h-wrap{padding-block:72px;display:grid;justify-items:center;text-align:center;gap:20px}
.h-band .h-lede{color:#C9CEEA;margin-inline:auto}
.h-band .btn.primary{box-shadow:4px 4px 0 var(--sun);border-color:var(--sun);color:#14193B}
.h-foot .h-wrap{padding-block:28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}
.h-foot nav{display:flex;gap:18px;flex-wrap:wrap}
.h-foot a{color:var(--muted)}

/* The finished clip's large view (#341): the expand button sits on the player's corner; the
   dialog holds the clip as tall as the screen allows, 9:16 kept. */
.player-wrap{position:relative;width:fit-content;max-width:100%;margin:0 auto}
.player-wrap .player{margin-top:14px}
.player-expand{position:absolute;top:24px;right:10px;z-index:2;background:rgba(20,25,59,.7);color:#fff;border-color:#fff}
.modal.large-view{width:fit-content;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:12px;background:#000;border-color:#fff;box-shadow:none;overflow:hidden}
.modal.large-view[open]{display:flex;flex-direction:column;align-items:center;gap:10px}
.modal.large-view::backdrop{background:rgba(5,7,20,.9)}
.large-view video{display:block;height:calc(100dvh - 100px);width:auto;max-width:calc(100vw - 48px);aspect-ratio:9/16;object-fit:contain;background:#000;border-radius:14px}
.large-view .large-close{background:#fff;color:#14193B;border-color:#fff}

/* The quality under the preview (#350). */

/* The top bar's light/dark switch (#362); on the home page it sits in the link row. */
.h-links .theme-btn{width:36px;height:36px}
/* Narrow phones (#366): the theme switch, Log in and Try it free beside the brand within 320px;
   each stays on one line. */
.h-links a,.h-links .btn{white-space:nowrap}
.h-links .theme-btn{flex:none}
@media (max-width:400px){
  .h-top .h-wrap{gap:10px}
  .h-top .brand{font-size:19px;gap:7px}
  .h-top .brand .dot{width:18px;height:18px}
  .h-links{gap:8px;font-size:14px}
  .h-links .theme-btn{width:32px;height:32px}
  .h-links .btn.small{padding:7px 10px;font-size:13px}
}
/* Narrow phones: an admin's header carries four round buttons beside the logo (#362). */
@media (max-width:380px){.top-acts{gap:6px}.top .iconbtn{width:34px;height:34px}.top .brand{font-size:20px;gap:7px}.top .brand .dot{width:19px;height:19px}}

/* The support reply count is anchored to the Help button. */
.help-fab{position:relative}

/* Thesis support table/thread adapted to the product's existing design tokens. */
.supportdesk .support-tablewrap{max-width:100%;overflow:auto;margin:16px 0}
.support-ticket-table{width:100%;min-width:680px;border-collapse:collapse;font-size:14px}
.support-ticket-table th,.support-ticket-table td{text-align:left;padding:12px;border-bottom:1px solid var(--muted)}
.support-ticket-table th button{font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.supportdesk .support-filters{align-items:end;flex-wrap:wrap;margin:12px 0}
.support-filters label{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 180px}
.support-filters input,.support-filters select{width:100%;min-width:0;font:inherit;padding:10px;border-radius:10px}
.support-ticket-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;margin:16px 0}
.support-ticket-layout>*,.support-ticket-layout aside{min-width:0}
.support-ticket-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;font-size:14px}
.support-ticket-facts dd{margin:0;overflow-wrap:anywhere}
.support-message{margin:12px 0;max-width:95%;overflow-wrap:anywhere}
.support-message p{white-space:pre-wrap}
.support-staff{margin-left:auto;border-left:4px solid var(--accent)}
.support-ticket-layout pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:24rem;overflow:auto}
.support-ticket-layout aside a{overflow-wrap:anywhere}
@media(max-width:760px){.support-ticket-layout{grid-template-columns:minmax(0,1fr)}}

/* My tickets (#380): who and when on one row, tags sized to their text, the reply box like the
   app's other fields. */
.support-page .tag{display:inline-block;margin:0}
.support-page .ticket-tags{display:inline-flex;gap:6px;margin-left:8px;vertical-align:middle}
.support-page a.card b{overflow-wrap:anywhere}
.support-page a.card .muted{margin:6px 0 0}
.support-page .ticket-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.support-page .ticket-head h3{margin:0}
.support-page .msg-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.support-page .msg-head time{white-space:nowrap}
.support-page .card p{margin:0}
.support-page .card p + p{margin-top:8px}
.support-page .form textarea{font:inherit;font-size:16px;color:var(--fg);background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:11px 12px;width:100%;resize:vertical;min-height:110px}
.support-page .form input[type=file]{font:inherit;font-size:14px;color:var(--muted);background:transparent;border:0;padding:4px 0}
.support-page .form .btn{align-self:flex-start}
.support-page label.row{margin:10px 0}
.support-page .msg{margin:12px 0;width:min(100%, 82%);border-width:2px}
.support-page .msg-you{margin-right:auto}
.support-page .msg-support{margin-left:auto;background:var(--raised);border-color:var(--line)}
@media (max-width:520px){.support-page .msg{width:92%}}

/* A preview image full size (#412): the image is the button; the modal holds the whole image as
   large as the screen allows, with Previous / Next for several stills. */
.zoom-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:12px}
.zoom-btn:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.modal.zoom-view{width:fit-content;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:12px;background:#000;border-color:#fff;box-shadow:none;overflow:hidden}
.modal.zoom-view[open]{display:flex;flex-direction:column;align-items:center;gap:10px}
.modal.zoom-view::backdrop{background:rgba(5,7,20,.9)}
.zoom-view img{display:block;max-width:calc(100vw - 48px);max-height:calc(100dvh - 110px);width:auto;height:auto;object-fit:contain;border-radius:10px}
.zoom-bar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;color:#fff}
.zoom-bar .btn{background:#fff;color:#14193B;border-color:#fff}

/* The approve screen's notes, fewer and tidier (#417). */
.render-pick .pick-hint{margin:6px 0 12px}
.warn-line{margin-top:12px}

/* Quality as choice cards (#452): a row each, the quality and its price on top, its use below. */
.qpick{border:0;margin:4px 0 0;padding:0;display:grid;gap:8px}
.qpick legend{font-size:13px;color:var(--muted);margin-bottom:6px;padding:0}
.qopt{position:relative;display:grid;gap:2px;background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:10px 14px;cursor:pointer;color:var(--fg)}
.qopt input{position:absolute;opacity:0;pointer-events:none}
.qopt-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.qopt b{font:400 20px var(--display)}
.qopt-price{font:500 13px var(--mono);color:var(--muted);white-space:nowrap}
.qopt small{color:var(--muted);font-size:13px;line-height:1.4}
.qopt.on{border-color:var(--ink);box-shadow:4px 4px 0 var(--accent)}
.qopt.on .qopt-price{color:var(--fg)}
.qopt:has(input:focus-visible){outline:3px solid var(--sky);outline-offset:2px}
.qopt.locked{opacity:.55;cursor:not-allowed}

/* Trim an uploaded video (#192): the selection is the gold frame, the parts left out are shaded,
   and each end has a handle wide enough for a thumb. */
.modal.trim{max-width:520px}
.trim-stage{position:relative;background:#000;border-radius:12px;overflow:hidden;display:grid;place-items:center;margin:10px 0 12px}
.trim-stage video{display:block;width:100%;max-height:min(46dvh,420px);object-fit:contain;background:#000}
.trim-bar{display:flex;align-items:center;gap:10px}
/* Over the video, see-through: dim enough to read on any frame, fainter while it plays. */
.trim-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;
  color:#fff;background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;transition:opacity .2s}
.trim-play.is-playing{opacity:.35}
.trim-play:hover,.trim-play:focus-visible{opacity:1}
.trim-play:focus-visible{outline:2px solid #fff;outline-offset:3px}
.trim-play svg{margin-left:2px}
.trim-track{position:relative;flex:1;height:56px;border-radius:10px;background:var(--raised);touch-action:none;user-select:none;-webkit-user-select:none}
.trim-frames{position:absolute;inset:0;display:flex;border-radius:10px;overflow:hidden}
.trim-frames img{flex:1;min-width:0;height:100%;object-fit:cover}
.trim-shade{position:absolute;top:0;bottom:0;background:rgba(0,0,0,.55);pointer-events:none}
.trim-shade:first-of-type{border-radius:10px 0 0 10px}
.trim-sel{position:absolute;top:0;bottom:0;border:3px solid var(--accent);border-radius:8px;box-sizing:border-box;cursor:grab}
.trim-handle{position:absolute;top:-4px;bottom:-4px;width:22px;margin-left:-11px;border-radius:7px;background:var(--accent);cursor:ew-resize;display:grid;place-items:center}
.trim-handle::after{content:"";width:3px;height:22px;border-radius:2px;background:var(--accent-ink);opacity:.7}
.trim-handle:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.trim-head{position:absolute;top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:var(--fg);pointer-events:none}
.trim-label{text-align:center;margin:10px 0 0;color:var(--muted)}
/* The chosen video's row (#192): its thumbnail, then the name over the length and section. */
.chosen-what{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.chosen-what b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Styles (#469): cards with a tall tile and the name, three across (two on a narrow phone); the
   chosen one gets the coral offset, as the quality cards do. */
.style-section{margin-top:18px}
.style-section h3{margin-bottom:8px}
/* Styles scroll sideways like the trends (owner, #570): one snapping row on a phone, the next card
   peeking in; room on the right and below for the chosen card's coral shadow. */
.style-pick{display:grid;grid-auto-flow:column;grid-auto-columns:128px;justify-content:start;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 8px 10px 2px;scrollbar-width:thin}
.style-pick>.style-opt{scroll-snap-align:start}
/* A row with its arrow and the page's own scrollbar (owner, #620), on the trends and the styles. */
.rail{position:relative}
/* Step 2's chosen video pinned at the left of the styles (owner, #635). */
.rail-body{display:flex;gap:10px;align-items:flex-start}
.rail-body>.style-pick{flex:1;min-width:0}
.rail-lead{flex:none;width:128px;position:relative;padding-right:10px;border-right:2px dashed var(--line)}
.rail-lead .lead-card{width:100%}
@media (min-width:720px){.rail-lead{width:150px}}
.rail .trend-row,.rail .style-pick{scrollbar-width:none}
.rail .trend-row::-webkit-scrollbar,.rail .style-pick::-webkit-scrollbar{display:none}
.rail-bar{position:relative;height:8px;margin:10px 4px 2px;border-radius:999px;background:var(--line);cursor:pointer}
.rail-bar::before{content:"";position:absolute;inset:-8px 0}   /* a bigger target than it looks */
.rail-thumb{position:absolute;top:0;bottom:0;min-width:28px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 2px var(--bg);cursor:grab;touch-action:none;transition:left .12s linear}
.rail-thumb.dragging{cursor:grabbing;transition:none}
.rail-hint{position:absolute;right:6px;top:calc(50% - 34px);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;background:var(--accent);color:var(--accent-ink);border:2px solid var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.35);font:700 28px/1 var(--display);animation:rail-nudge 1.2s ease-in-out 3}
.rail-hint span{margin:-3px 0 0 2px}
@keyframes rail-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.rail-hint{animation:none}}
@media (min-width:720px){.style-pick{grid-auto-columns:150px}}   /* one rail at every width (owner, #585) */
.style-opt{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:6px;color:var(--fg);font:inherit;cursor:pointer;min-width:0}
.style-opt b{font-weight:700;font-size:13px;line-height:1.25;overflow-wrap:anywhere}
.style-tile{position:relative;display:grid;place-items:end start;aspect-ratio:3/4;border-radius:9px;overflow:hidden}
.style-tile img,.style-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.style-tile i{font:400 13px/1.05 var(--display);font-style:normal;color:#14193B;padding:8px;opacity:.85}
.style-opt.on{border-color:var(--ink);box-shadow:4px 4px 0 var(--accent)}
.style-opt:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
/* The style bar under the previews (owner, 28 Oct): tile, "Style" over the name, pencil on the right. */
.style-bar{margin:10px 0 6px}
.style-bar-in{display:flex;align-items:center;gap:12px;width:100%;padding:8px;background:var(--surface);border:2px solid var(--line);border-radius:14px;color:var(--fg);font:inherit;text-align:left}
button.style-bar-in{cursor:pointer}
button.style-bar-in:hover{border-color:var(--ink)}
button.style-bar-in:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.style-bar-tile{position:relative;flex:none;width:40px;height:40px;border-radius:9px;overflow:hidden;background:var(--line)}
.style-bar-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.style-bar-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.style-bar-text small{font:400 11px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.style-bar-text b{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.restyle-modal{max-width:520px}

/* Step 1 (owner, #485): the upload is one big, plain tap target; the limits and the rights box sit
   under it, small and quiet. More room above the trends, and their heading a touch bigger. */
.upload-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;padding:18px;text-align:center;cursor:pointer;color:var(--fg)}
.upload-drop b{font:400 20px/1.1 var(--display)}
.upload-drop small{color:var(--muted);font-size:13px}
.upload-drop input{position:absolute;opacity:0;width:1px;height:1px}
.upload-drop:focus-within{outline:3px solid var(--sky);outline-offset:3px;border-radius:12px}
.upload-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--accent);color:var(--accent-ink);margin-bottom:4px}
.upload-help{margin-top:10px}
.upload-help p{margin:0 0 8px;color:var(--muted);font-size:13px;line-height:1.4}
.upload-help .check{margin:0;font-size:13.5px;color:var(--muted)}
.upload-help .check.need{color:var(--fg);font-weight:600}
/* Bigger (owner, #579): the second way in, as much a heading as Try it first's choice. */

/* Password fields (#488): the eye sits inside the field, on the right. */
.pw{position:relative;display:block}
.pw input{width:100%;padding-right:46px}
.pw-eye{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:36px;height:36px;display:grid;place-items:center;border:0;background:transparent;color:var(--muted);border-radius:8px;cursor:pointer;padding:0}
.pw-eye:hover,.pw-eye[aria-pressed="true"]{color:var(--fg)}
.pw-eye:focus-visible{outline:3px solid var(--sky);outline-offset:1px}

/* The style on a Gallery card (#542): one small line, cut short if long. */
.item-style{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The rotating pet line (#567): room for one line, so the page doesn't jump between phrases. */
.pet-line{min-height:1.4em}
/* The style preview (#574): the example large, arrows either side, Select/Cancel under it. The
   cards show a still with a small play mark when the example is a video. */
.style-tile video{pointer-events:none}
.style-play{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:10px;color:#fff;background:rgba(0,0,0,.45)}
.style-view{max-width:440px}
.style-view-stage{position:relative}
.style-view-media{aspect-ratio:9/16;max-height:min(62dvh,560px);margin:0 auto;border-radius:16px;overflow:hidden;background:#000;position:relative;display:grid;place-items:end start}
/* EXAMPLE over a style's example (owner, #614): see-through, across the middle, never in the way of a tap. */
.style-ex{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-18deg);z-index:1;pointer-events:none;
  font:800 14px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.8);
  padding:6px 10px 6px 12px;border:2px solid rgba(255,255,255,.65);border-radius:8px;background:rgba(0,0,0,.18);text-shadow:0 1px 3px rgba(0,0,0,.45)}
.style-view-media .style-ex{font-size:22px;padding:10px 16px 10px 20px;border-width:3px}
.style-view-media video,.style-view-media img{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.style-view-media i{font:400 22px/1.1 var(--display);font-style:normal;color:#14193B;padding:16px}
.style-view-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:1;font-size:26px;line-height:1}
.style-view-nav.prev{left:-6px}
.style-view-nav.next{right:-6px}

/* Trend categories (#577): a row of filter chips over the trends. */
.trend-cats{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none}
.trend-cats::-webkit-scrollbar{display:none}
.trend-cat{flex:none;font:600 13px var(--body);color:var(--fg);background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;white-space:nowrap}
.trend-cat[aria-pressed="true"]{background:var(--sun);color:var(--accent-ink);border-color:var(--ink)}

/* My Pets and saved pets on step 2 (owner, #573). */
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent-text);text-decoration:underline;cursor:pointer}
.pet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:12px}
.pet-card{background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:8px}
.pet-card-pic{display:grid;place-items:center;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--raised);border:0;padding:0;cursor:pointer}
.pet-card-pic img{width:100%;height:100%;object-fit:cover}
.pet-card-meta{display:flex;flex-direction:column;gap:2px}
.pets-pick{margin:10px 0 6px}
.pets-row{display:grid;grid-auto-flow:column;grid-auto-columns:88px;justify-content:start;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 8px 8px 6px}
/* A pet (owner, #619): its name above the circle, More below. */
.pet-cell{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;scroll-snap-align:start}
.pet-name{max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--fg)}
.pet-cell.on .pet-name{font-weight:800;color:var(--accent-text)}
.pet-chip{display:block;background:none;border:0;padding:0;color:var(--fg);font:inherit;cursor:pointer;border-radius:50%}
.pet-more{font:700 12px/1 var(--body);padding:5px 12px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer}
.pet-cell.on .pet-more{border-color:var(--accent)}
.pet-chip-pic{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--raised);border:2px solid var(--line);font:400 28px var(--display);color:var(--muted)}
.pet-chip-pic img{width:100%;height:100%;object-fit:cover}
/* The chosen pet, unmistakable (owner, #616): a thick accent ring with a gap, a check badge, the name bold in accent. */
.pet-chip{position:relative}
.pet-chip.on .pet-chip-pic{border:3px solid var(--accent);box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--accent);transform:translateY(-1px)}
.pet-chip.on::after{content:"\2713";position:absolute;top:50px;left:52px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);border:2px solid var(--bg);font:800 13px/1 var(--body)}
.pet-chip.add .pet-chip-pic{border-style:dashed}
.pet-modal{max-width:480px}
.pet-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pet-photo{position:relative;margin:0;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--raised);border:2px solid var(--line)}
.pet-photo.main{border-color:var(--accent)}
/* Step 2's pick (#618): the whole photo is the button; the photo in use gets a thick ring and a "Using" tag. */
.pet-photo-use{position:absolute;inset:0;z-index:0;background:none;border:0;padding:0;cursor:pointer;border-radius:inherit}
.pet-photo-use:focus-visible{outline:3px solid var(--sky);outline-offset:-3px}
.pet-photo-acts,.pet-tip{z-index:1}
/* A missing input in the pet popup (owner, #631): outlined in red, its sentence under it. */
.field-bad input[type=text]{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad)}
.pet-photos.field-bad,.check.field-bad{outline:2px solid var(--bad);outline-offset:5px;border-radius:12px}
.field-err{margin:6px 0 0;color:var(--bad);font:600 13px/1.35 var(--body)}
/* Buying credits for a clip (owner, #634). */
.buy-balance{margin:4px 0 8px;font-size:15px}
.pack-btn.covers{border-color:var(--accent);box-shadow:3px 3px 0 var(--accent)}
.pack-btn.covers small{color:var(--accent-text);font-weight:800}
/* Gallery filters and the pet on each clip (owner, #646). */
.gallery-filters{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;margin:4px 0 14px}
.gallery-filters label{display:flex;flex-direction:column;gap:3px;font:600 12px var(--body);color:var(--muted);min-width:0;flex:1 1 140px}
.gallery-filters select{font:600 14px var(--body);color:var(--fg);background:var(--surface);border:2px solid var(--line);border-radius:10px;padding:8px 10px}
.item-pet{position:absolute;left:10px;top:10px;z-index:2;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 10px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:800 12px/1.2 var(--body);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.pet-clips{display:block;margin-top:2px;text-align:left}
/* Share (owner, #659). */
.share-preview-row{margin:8px 0 0;text-align:center}
.sharer-file{margin:2px 0 8px;overflow-wrap:anywhere}
.sharer-places{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.sharer-chip{display:flex;align-items:center;gap:10px;margin-top:6px;padding:10px 12px;border:2px dashed var(--accent);border-radius:12px;cursor:grab;font:600 13px var(--body);color:var(--fg);background:var(--raised)}
.sharer-chip:active{cursor:grabbing}
/* Push to trend (#662). */
.push-trend{margin-top:6px}
.push-trend .push-note{margin:6px 0 0}
.item-push{padding:0 12px 12px}
.item-push .push-trend{margin:0}
.pick-note{margin:12px 0 6px;font:700 13px var(--body);color:var(--accent-text)}
.pet-photo.using{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent)}
.pet-using{position:absolute;left:6px;top:6px;z-index:1;padding:3px 8px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:800 11px/1.2 var(--body);pointer-events:none}
.pet-photo img{width:100%;height:100%;object-fit:cover}
.pet-photo-acts{position:absolute;inset:auto 4px 4px auto;display:flex;gap:4px}
.pet-photo-acts .iconbtn{width:30px;height:30px;font-size:15px}
.pet-photo-acts .main-pick.on{border-color:var(--ink)}
.pet-tip{position:absolute;inset:4px 4px auto 4px;padding:5px 7px;border-radius:8px;background:rgba(10,10,30,.86);color:#fff;font:600 11px/1.25 var(--body)}
.pet-photo.add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-style:dashed;cursor:pointer;font:400 26px var(--display);color:var(--muted)}
.pet-photo.add small{font:600 12px var(--body)}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent-text);text-decoration:underline;cursor:pointer}

/* Step 1's two ways in (#581): big rounded cards with an icon; the open one in ink with the coral offset. */
.source-pick{display:flex;flex-direction:column;margin:16px 0 18px}
.source-pick>.source-opt+.drawer+.source-opt{margin-top:12px}
.source-opt{display:flex;align-items:center;gap:14px;text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:16px;color:var(--fg);font:inherit;cursor:pointer}
.source-opt b{font-size:16px;line-height:1.3}
.source-opt[aria-pressed="true"]{border-color:var(--ink);box-shadow:5px 5px 0 var(--accent)}
.source-opt:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.source-ico{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--accent-ink)}
.source-ico.flame{background:var(--sun)}
.learn-more{max-width:460px}
.learn-video{width:100%;max-height:min(55dvh,520px);border-radius:14px;background:#000;display:block;margin-bottom:12px}
.learn-steps{margin:0;padding-left:20px;display:grid;gap:8px;font-size:15px;line-height:1.45}
.learn-pets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.learn-pets img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}

/* Drawers (#581): the section under each card slides open (rows 0fr -> 1fr) and closed. */
.drawer{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .32s ease,opacity .25s ease}
.drawer.open{grid-template-rows:1fr;opacity:1}
.drawer-in{overflow:hidden;min-height:0}
.drawer.open .drawer-in{padding-top:12px}
.drawer .trends{margin-top:0}
.drawer .upload-box{margin-top:2px}
.source-opt::after{content:"";margin-left:auto;width:10px;height:10px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s ease;opacity:.7;flex:none}
.source-opt[aria-pressed="true"]::after{transform:rotate(225deg) translate(-2px,-2px)}
@media (prefers-reduced-motion:reduce){.drawer,.source-opt::after{transition:none}}
/* Step 2's sections (#586, #598): a header with Learn more beside it. */
.pick-section{margin:18px 0 6px}
.pick-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 8px}
.pick-head h3{margin:0}
.info-list{margin:8px 0 16px;padding-left:20px;display:grid;gap:8px;line-height:1.45}
.pet-modal>.check{margin:0 0 10px}
.notify-box{margin:6px 0 12px}
[data-step-heading]{scroll-margin-top:88px}
/* The upgrade popup (#562): the plans above the reader's as cards, the one that lifts the limit
   outlined in coral; then credit and preview packs. */
.upgrade-modal{max-width:560px}
.up-plans{display:grid;gap:10px;margin:10px 0}
@media (min-width:560px){.up-plans{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}}
.up-plan{border:2px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:6px;background:var(--surface)}
.up-plan.lifts{border-color:var(--accent);box-shadow:4px 4px 0 var(--accent)}
.up-plan ul{margin:0;padding-left:18px;font-size:13px;color:var(--muted);flex:1}
.up-plan .tag{align-self:flex-start}
.up-packs h4{margin:12px 0 6px;font-size:14px}

/* Preview packs (#569): the label over its expiry; the group outlined when it lifts the limit hit. */
.pack-btn{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.pack-btn small{font-weight:400;font-size:11.5px;color:var(--muted)}
.up-packs.lifts{border:2px solid var(--accent);border-radius:14px;padding:6px 10px 10px;box-shadow:4px 4px 0 var(--accent)}
.up-packs h4 small{font-weight:400;font-size:12px}