/* feet 09.11. (funnel clips, lib/clips.php; owner dashboard spec v4 docs/fp2/dashboard-v4.png): the creator dashboard, the Add
   clip hub, the Clips stream, her card's clips + request block, the share block with its QR, the «You here» card and the
   slim stats page. Member Modern Dark: tokens only, tonal surfaces (no card edges), the mint accent for the one primary key,
   sentence case, mobile first. Page file: pnew_head_css_add('pnew-fnclips'); the creator page links it itself. */

/* ---------------------------------------------------------------- shared */
.fn-box{display:grid;gap:var(--space-3);min-width:0;padding:var(--space-5);border-radius:var(--r-l,24px);background:var(--surface)}
.fn-box__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.fn-box__h{display:flex;align-items:center;gap:var(--space-2);margin:0;font:800 19px/1.25 var(--font-display);color:var(--ink)}
.fn-box__h .pc-ico{flex:none;color:var(--accent)}
.fn-box__p{margin:0;font:var(--type-meta);color:var(--ink-2)}
.fn-bar{position:relative;display:block;height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.fn-bar i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--accent)}
.fn-setup{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin:0 0 var(--space-4);padding:var(--space-3) var(--space-4);border-radius:999px;background:var(--surface);font:var(--type-meta);color:var(--ink)}
.fn-setup .pc-ico{color:var(--accent)}
.fn-qr{width:132px;aspect-ratio:1;padding:6px;border-radius:14px;background:#fff}
.fn-qr svg{display:block;width:100%;height:100%}
.fn-opt{font-weight:400;color:var(--ink-3)}

/* ---------------------------------------------------------------- dashboard (owner spec v4) */
.fn-d{display:block}
.fn-d__cols{display:flex;flex-direction:column;gap:var(--space-4)}
.fn-d__main,.fn-d__side{display:contents}
.fn-o1{order:1}.fn-o2{order:2}.fn-o3{order:3}.fn-o4{order:4}.fn-o5{order:5}.fn-o6{order:6}.fn-o7{order:7}.fn-o8{order:8}
.fn-hi{position:relative;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);min-height:96px;padding:var(--space-5);border-radius:var(--r-l,24px);
  background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--accent) 22%,transparent) 0%,transparent 60%),var(--surface);overflow:hidden}
.fn-hi__t{display:grid;gap:var(--space-2);min-width:0;flex:1}
.fn-hi__h{margin:0;font:800 clamp(26px,6vw,40px)/1.1 var(--font-display);color:var(--ink);letter-spacing:-.01em}
.fn-hi__p{margin:0;max-width:52ch;font:var(--type-body);color:var(--ink-2)}
.fn-hi__art{flex:none;width:clamp(72px,18vw,128px);height:auto;transform:rotate(-12deg)}
.fn-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.fn-kpi{display:grid;gap:var(--space-1);align-content:start;min-width:0;padding:var(--space-4);border-radius:var(--r-l,20px);background:var(--surface);color:var(--ink);text-decoration:none}
.fn-kpi:hover{background:var(--fp-tint)}
.fn-kpi__ico{color:var(--accent)}
.fn-kpi__n{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2)}
.fn-kpi__n b{font:800 28px/1.1 var(--font-display)}
.fn-kpi__d{font:700 13px/1 var(--font-sans);color:var(--accent-text,var(--accent))}
.fn-kpi__d--down{color:var(--ink-2)}
.fn-kpi__l{font:var(--type-meta);color:var(--ink-2)}
.fn-ups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--space-3)}
.fn-up{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5);border-radius:var(--r-l,24px);background:var(--surface)}
.fn-up--video{background:radial-gradient(90% 120% at 0% 100%,color-mix(in srgb,var(--accent) 26%,transparent) 0%,transparent 70%),var(--surface)}
.fn-up__art{position:relative;flex:none;width:92px;height:104px}
.fn-up__card{position:absolute;inset:6px 10px 0 4px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(160deg,#4dcaff,#0062ff);color:#fff;transform:rotate(-6deg);box-shadow:0 10px 24px rgb(0 0 0 / .35)}
.fn-up__card--photo{background:linear-gradient(160deg,#9fd8ff,#0a2a6b)}
.fn-up__card .pc-ico{width:34px;height:34px;padding:7px;border-radius:50%;background:rgb(10 42 107 / .55)}
.fn-up__plus{position:absolute;right:0;bottom:0;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.fn-up__t{display:grid;gap:var(--space-2);min-width:0;flex:1 1 160px}
.fn-up__h{margin:0;font:800 20px/1.2 var(--font-display);color:var(--ink)}
.fn-up__t p{margin:0;font:var(--type-meta);color:var(--ink-2)}
.fn-up__btn{justify-self:start}
.fn-reqs__list{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.fn-rq{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2) var(--space-3);align-items:center;padding:var(--space-3);border-radius:16px;background:var(--surface-2)}
.fn-rq__t{display:grid;gap:4px;min-width:0}
.fn-rq__t b{font:700 15px/1.3 var(--font-sans);color:var(--ink);overflow-wrap:anywhere}
.fn-rq__type{display:inline-flex;align-items:center;gap:6px;justify-self:start;height:24px;padding:0 10px;border-radius:999px;background:var(--fp-tint);color:var(--ink);font:700 12px/1 var(--font-sans)}
.fn-rq__size{display:inline-flex;align-items:center;gap:6px;font:var(--type-meta);color:var(--ink-2)}
.fn-rq__b{justify-self:end;font:800 17px/1 var(--font-display);color:var(--ink)}
.fn-rq__go{grid-column:1 / -1;justify-self:stretch}
.fn-reqs__none{margin:0}
.fn-sh__link{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:6px 6px 6px var(--space-4);border-radius:999px;background:var(--ink);color:var(--bg)}
.fn-sh__url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 15px/1.2 var(--font-sans)}
.fn-sh__url span{opacity:.75}
.fn-sh__copy{flex:none;background:transparent;color:inherit}
.fn-sh__row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);align-items:start}
.fn-sh__to{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.fn-sh__btn{display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:44px;padding:0 var(--space-3);border:0;border-radius:12px;background:var(--surface-2);color:var(--ink);font:600 14px/1.2 var(--font-sans);text-align:left;text-decoration:none;cursor:pointer}
.fn-sh__btn:hover{background:color-mix(in srgb,var(--surface-2) 85%,var(--accent))}
.fn-sh__btn > span:nth-child(2){flex:1}
.fn-sh__ico{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--surface);color:var(--ink)}
.fn-sh__ico--instagram{background:linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7);color:#fff}
.fn-sh__ico--tiktok,.fn-sh__ico--x{background:#000;color:#fff}
.fn-sh__chev{color:var(--ink-3)}
.fn-sh__done,.fn-share__done{min-height:1.2em;margin:0;font:var(--type-meta);color:var(--accent)}
.fn-lim__row{display:flex;justify-content:space-between;gap:var(--space-3);font:var(--type-body);color:var(--ink-2)}
.fn-lim__row b{color:var(--ink)}
.fn-lim__vis{display:grid;gap:4px;padding-top:var(--space-2)}
.fn-lim__state{display:flex;align-items:center;gap:var(--space-2);margin:0;color:var(--ink-2);font:var(--type-strong)}
.fn-lim__state.is-on{color:var(--accent)}
.fn-lim__prog,.fn-lim__next,.fn-lim__full{margin:0;font:var(--type-meta);color:var(--ink-2)}
.fn-pro{background:radial-gradient(90% 90% at 100% 100%,color-mix(in srgb,var(--accent) 22%,transparent) 0%,transparent 70%),var(--surface)}
.fn-pro__list{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.fn-pro__list li{display:flex;align-items:center;gap:var(--space-2);font:var(--type-body);color:var(--ink)}
.fn-pro__list .pc-ico{color:var(--accent)}
.fn-steps__n{font:700 14px/1.2 var(--font-sans);color:var(--ink)}
.fn-steps__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);margin:var(--space-2) 0 0;padding:0;list-style:none;counter-reset:s}
.fn-step{position:relative;display:grid;justify-items:center;gap:var(--space-2);text-align:center;font:var(--type-meta);color:var(--ink-2)}
.fn-step::before{content:"";position:absolute;top:14px;left:calc(-50% + 18px);right:calc(50% + 18px);height:2px;background:var(--surface-2)}
.fn-step:first-child::before{display:none}
.fn-step.is-done::before{background:var(--accent)}
.fn-step__dot{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface-2);color:var(--on-accent)}
.fn-step.is-done .fn-step__dot{background:var(--accent)}
.fn-step a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
@media (min-width:701px){
  .fn-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fn-rq{grid-template-columns:minmax(0,1fr) auto auto auto}
  .fn-rq__go{grid-column:auto}
}
@media (min-width:1100px){
  .fn-d__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:var(--space-4);align-items:start}
  .fn-d__main,.fn-d__side{display:grid;gap:var(--space-4);align-content:start}
}

/* ---------------------------------------------------------------- share block (fn_share partial, her card) */
.fn-share{display:grid;gap:var(--space-4);align-items:center}
.fn-share__t{display:grid;gap:var(--space-2);min-width:0}
.fn-share__addr{margin:0;font:700 15px/1.3 var(--font-sans);color:var(--ink-2);overflow-wrap:anywhere}
.fn-share__addr b{color:var(--ink)}
.fn-share__acts{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.fn-share__qr{display:grid;justify-items:center;gap:var(--space-2);margin:0;font:var(--type-meta);color:var(--ink-2)}
@media (min-width:701px){.fn-share{grid-template-columns:minmax(0,1fr) auto}}

/* ---------------------------------------------------------------- Add clip hub */
.fn-addpage [hidden],.fn-d [hidden],.fn-stream [hidden]{display:none!important}
.fn-switch{position:relative;display:flex;align-items:flex-start;gap:var(--space-3);cursor:pointer}
.fn-switch input{position:absolute;opacity:0;width:1px;height:1px}
.fn-switch__ui{flex:none;position:relative;width:48px;height:28px;border-radius:999px;background:var(--surface-2)}
.fn-switch__ui::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--ink-2);transition:transform .15s}
.fn-switch input:checked + .fn-switch__ui{background:var(--accent)}
.fn-switch input:checked + .fn-switch__ui::after{transform:translateX(20px);background:#fff}
.fn-switch input:focus-visible + .fn-switch__ui{outline:2px solid var(--accent);outline-offset:2px}
.fn-switch__t{display:grid;gap:2px}
.fn-switch__t b{font:var(--type-strong);color:var(--ink)}
.fn-switch__t small{font:var(--type-meta);color:var(--ink-2)}
.fn-done{display:grid;justify-items:start;gap:var(--space-3);max-width:720px;margin-bottom:var(--space-4)}
.fn-done__ico{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.fn-done__acts{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* ---------------------------------------------------------------- the Clips stream */
.fn-streamwrap{margin:calc(-1 * var(--space-4)) 0 0}
.fn-stream{height:calc(100svh - var(--header-h,64px) - var(--tabbar-h,64px) - env(safe-area-inset-bottom));overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;
  scrollbar-width:none;border-radius:0;background:#000;outline:none}
.fn-stream::-webkit-scrollbar{display:none}
.fn-clip{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#000;color:#fff}
.fn-clip__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.fn-clip__tap{position:absolute;inset:0;z-index:1;border:0;background:transparent;cursor:pointer}
.fn-clip.is-paused .fn-clip__tap::after{content:"";position:absolute;top:50%;left:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;
  background:rgb(3 7 18 / .5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/36px no-repeat}
.fn-clip__sound{position:absolute;top:var(--space-3);right:var(--space-3);z-index:2;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgb(3 7 18 / .5);color:#fff;cursor:pointer}
.fn-clip__on{display:none}
.fn-clip__sound.is-on .fn-clip__on{display:block}
.fn-clip__sound.is-on .fn-clip__off{display:none}
.fn-clip__info{position:absolute;inset:auto 0 0 0;z-index:2;display:grid;gap:var(--space-2);padding:var(--space-8) var(--space-4) var(--space-4);background:linear-gradient(180deg,transparent 0%,rgb(3 7 18 / .55) 40%,rgb(3 7 18 / .82) 100%);pointer-events:none}
.fn-clip__info > *{pointer-events:auto}
.fn-clip__who{display:inline-flex;align-items:center;gap:var(--space-2);justify-self:start;color:#fff;text-decoration:none;font:800 17px/1.2 var(--font-sans)}
.fn-clip__info .pn-followform{position:absolute;top:var(--space-8);right:var(--space-4);margin:0}
.fn-clip__follow{background:rgb(255 255 255 / .16);color:#fff}
.fn-clip__cap{margin:0;max-width:60ch;font:15px/1.4 var(--font-sans);color:#fff;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.fn-clip__tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none;font:600 13px/1.2 var(--font-sans);color:rgb(255 255 255 / .88)}
.fn-clip__req{justify-self:stretch;min-height:52px;font-size:16px}
.fn-stream__end{display:grid;place-items:center;gap:var(--space-2);min-height:40%;margin:0;padding:var(--space-8);scroll-snap-align:end;color:#fff;text-align:center;font:var(--type-body)}
/* owner 10.11.: a photo post in the stream — her pictures full height side by side (swipe / tap / keys), dots and «1/3»;
   each picture whole (contain) over a blurred copy of itself, never cropped, nothing moves by itself */
.fn-ph__track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;cursor:pointer;-webkit-user-select:none;user-select:none}
.fn-ph__track::-webkit-scrollbar{display:none}
.fn-ph__slide{position:relative;flex:0 0 100%;height:100%;margin:0;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;background:#000}
.fn-ph__bg{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;filter:blur(24px) brightness(.55);transform:scale(1.04)}
.fn-ph__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
.fn-ph__n{position:absolute;top:var(--space-3);right:var(--space-3);z-index:2;display:grid;place-items:center;min-width:44px;height:30px;padding:0 10px;border-radius:999px;background:rgb(3 7 18 / .55);color:#fff;font:700 13px/1 var(--font-sans);font-variant-numeric:tabular-nums;pointer-events:none}
.fn-ph__key{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:40px;height:40px;margin-top:-20px;padding:0;border:0;border-radius:50%;background:rgb(3 7 18 / .5);color:#fff;cursor:pointer;transition:opacity .2s}
.fn-ph__key--prev{left:var(--space-2)}
.fn-ph__key--next{right:var(--space-2)}
.fn-ph__key[disabled]{opacity:0;pointer-events:none}
.fn-ph__dots{position:absolute;left:0;right:0;z-index:3;display:flex;justify-content:center;gap:6px;bottom:calc(var(--fn-info-h,180px) + 6px);pointer-events:none}
.fn-ph__dots i{width:7px;height:7px;border-radius:50%;background:rgb(255 255 255 / .45);transition:background .2s,transform .2s}
.fn-ph__dots i.is-on{background:#fff;transform:scale(1.15)}
@media (hover:none){.fn-ph__key{display:none}}
@media (prefers-reduced-motion:reduce){.fn-ph__track{scroll-behavior:auto}}
@media (min-width:701px){
  .fn-stream{width:min(100%,calc((100svh - var(--header-h,76px) - 32px) * 9 / 16));margin:var(--space-4) auto 0;border-radius:24px;height:calc(100svh - var(--header-h,76px) - 32px)}
  .fn-streamwrap{margin:0}
}
@media (min-width:1024px){.fn-stream{height:calc(100svh - var(--header-h,76px) - 40px);width:min(100%,calc((100svh - var(--header-h,76px) - 40px) * 9 / 16))}}

/* ---------------------------------------------------------------- her card: clips, photos, the request block, the viewer */
.fn-ask{grid-template-columns:auto minmax(0,1fr);align-items:center;background:radial-gradient(90% 140% at 0% 0%,color-mix(in srgb,var(--accent) 24%,transparent) 0%,transparent 70%),var(--surface)}
.fn-ask__ico{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.fn-ask__t p{margin:4px 0 0;font:var(--type-body);color:var(--ink-2)}
.fn-ask__btn{grid-column:1 / -1;justify-self:stretch;min-height:52px}
.fn-cc__n{font:700 14px/1 var(--font-sans);color:var(--ink-2)}
.fn-cc__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.fn-cc__grid--photos{grid-template-columns:repeat(3,minmax(0,1fr))}
.fn-cc__tile,.fn-cc__ph{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--surface-2);cursor:pointer}
.fn-cc__ph{aspect-ratio:4/5}
.fn-cc__tile img,.fn-cc__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fn-cc__play{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgb(3 7 18 / .55);color:#fff}
.fn-cc__secs{position:absolute;right:6px;bottom:6px;padding:2px 6px;border-radius:999px;background:rgb(3 7 18 / .6);color:#fff;font:700 11px/1.3 var(--font-sans)}
.fn-cc__state{position:absolute;left:6px;top:6px;right:6px;padding:3px 6px;border-radius:8px;background:rgb(3 7 18 / .68);color:#fff;font:700 11px/1.3 var(--font-sans);text-align:center}
.fn-cc__lock{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin:0;font:var(--type-body);color:var(--ink-2)}
.fn-cc__grid--modal{grid-template-columns:repeat(3,minmax(0,1fr))}
.fpb-cm__askp{margin:0;font:var(--type-meta);color:var(--ink-2)}
.fn-cshare{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.fn-reqbar{position:fixed;inset:auto 0 0 0;z-index:30;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.fn-reqbar__t{display:grid;flex:1;min-width:0}
.fn-reqbar__t b{font:var(--type-strong);color:var(--ink)}
.fn-reqbar__t small{font:var(--type-meta);color:var(--ink-2)}
.fn-reqbar .pc-btn{flex:none}
.bio.has-reqbar{padding-bottom:84px}
@media (min-width:900px){.fn-reqbar{display:none}.bio.has-reqbar{padding-bottom:0}.fn-ask__btn{grid-column:auto;justify-self:end}.fn-ask{grid-template-columns:auto minmax(0,1fr) auto}.fn-cc__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
dialog.fn-viewer{width:min(100%,440px);max-height:96svh;padding:0;border:0;border-radius:20px;background:#000;color:#fff;overflow:hidden}
dialog.fn-viewer::backdrop{background:rgb(3 7 18 / .82)}
.fn-viewer__v{display:block;width:100%;max-height:86svh;background:#000}
.fn-viewer__x{position:absolute;top:8px;right:8px;z-index:2;background:rgb(3 7 18 / .55);color:#fff}
.fn-viewer__cap{margin:0;padding:var(--space-3) var(--space-4);font:var(--type-meta)}
.fn-viewer__cap:empty{display:none}

/* ---------------------------------------------------------------- «You here» (the listing gate) */
.fn-you{display:grid;justify-items:center;align-content:start;gap:var(--space-2);padding:var(--space-4);border-radius:18px;text-align:center;
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--surface)) 0 10px,var(--surface) 10px 20px)}
.fn-you__av{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;overflow:hidden;background:var(--surface-2);font:800 30px/1 var(--font-display);color:var(--ink-2);opacity:.85}
.fn-you__av img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4)}
.fn-you__h{margin:0;font:800 18px/1.2 var(--font-display);color:var(--ink)}
.fn-you__p,.fn-you__prog{margin:0;font:var(--type-meta);color:var(--ink-2)}
.fn-you__prog{color:var(--accent);font-weight:700}
.fn-you__acts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-2)}

/* ---------------------------------------------------------------- stats */
.fn-stats__card{display:flex;align-items:center;gap:var(--space-3)}
.fn-num__ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--surface-2);color:var(--accent)}
.fn-stats__list{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.fn-srow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-3);align-items:center;padding:var(--space-3);border-radius:14px;background:var(--surface-2)}
.fn-srow__img{display:grid;place-items:center;width:54px;height:96px;border-radius:10px;overflow:hidden;background:var(--surface);color:var(--ink-2)}
.fn-srow__img img{width:100%;height:100%;object-fit:cover}
.fn-srow__t{display:grid;gap:4px;min-width:0}
.fn-srow__t b{font:var(--type-strong);color:var(--ink);overflow-wrap:anywhere}
.fn-srow__t span{font:var(--type-meta);color:var(--ink-2)}
.fn-srow__n{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.fn-srow__n span{display:grid;gap:2px;font:var(--type-meta);color:var(--ink-2)}
.fn-srow__n b{font:800 20px/1 var(--font-display);color:var(--ink)}
.fn-aud{display:grid;gap:var(--space-2);padding:var(--space-4) 0;opacity:.9}
.fn-aud__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin:0}
.fn-aud__list div{display:grid;gap:2px}
.fn-aud__list dt{font:var(--type-meta);color:var(--ink-2)}
.fn-aud__list dd{margin:0;font:800 18px/1 var(--font-display);color:var(--ink)}
@media (min-width:701px){.fn-srow{grid-template-columns:auto minmax(0,1fr) minmax(0,260px)}.fn-srow__n{grid-column:auto}}

/* feet PM 200 (09.11. night): the slim dashboard — ONE big Add clip key in the greeting (#30, #31), three numbers (#26-#28),
   the loop steps as a vertical checklist inside the visibility box (#25, #41), the Get paid line above the leads (#39) */
.fn-hi__h{flex:1 1 220px;min-width:0}
.fn-hi__add{flex:none;min-height:52px;padding-inline:var(--space-5);font-size:17px}
@media (max-width:700px){.fn-hi__add{flex:1 1 100%;justify-content:center}}
.fn-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:420px){.fn-kpi{padding:var(--space-3)}.fn-kpi__n b{font-size:22px}}
.fn-lim .fn-steps{display:grid;gap:var(--space-2);padding-top:var(--space-3);border-radius:0;background:none}
.fn-lim .fn-steps__n{margin:0}
.fn-lim .fn-steps__list{grid-template-columns:minmax(0,1fr);gap:var(--space-2);margin:0}
.fn-lim .fn-step{display:flex;align-items:center;justify-items:start;gap:var(--space-3);text-align:left;font:var(--type-body)}
.fn-lim .fn-step::before{display:none}
.fn-lim .fn-step__dot{flex:none;width:24px;height:24px}
.fn-reqs__pay{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin:0;padding:var(--space-3) var(--space-4);border-radius:16px;background:var(--surface-2);font:var(--type-meta);color:var(--ink)}
.fn-reqs__pay .pc-ico{color:var(--accent)}
.fn-reqs__pay>span{flex:1 1 200px}
/* owner 09.11. late: /sellers/ with the Premium filter and nobody in it — «You here» first, the empty line a step below it */
.pn-disc .pn-sellergrid + .pc-empty { margin-top: var(--space-4, 16px); }

/* audit 500 (09.11. late): the dashboard in the one member system
   - request type chips in the mint family (creator #39, system #97: no purple / blue — ONE accent)
   - her share address on a dark field like every other field, mint text (creator #45, system #95)
   - the share key a pill like every key (system #76)
   - the steps: whole 44 px rows, an open step a ring, a done step a filled tick (creator #35 / #196, system #96)
   - the greeting one size with every page title, the name never broken inside (creator #41, system #79 / #82) */
.fn-rq__type, .fn-rq__type--photos, .fn-rq__type--video { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); }
.fn-rq__type .pc-ico { color: var(--accent-text, var(--accent)); }
.fn-sh__link { background: var(--surface-2); color: var(--ink); }
.fn-sh__url span { opacity: 1; color: var(--ink-2); }
.fn-sh__url b { color: var(--accent-text, var(--accent)); }
.fn-sh__btn { border-radius: 999px; }
.fn-steps__n { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.fn-lim .fn-steps__list { gap: 4px; }
.fn-lim .fn-step { display: block; }
.fn-lim .fn-step a.fn-step__row, .fn-step__row { text-decoration: none; }
.fn-step__row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px 0 6px; border-radius: 14px; color: var(--ink); text-decoration: none; font: 500 15px/1.3 var(--body); }
a.fn-step__row:hover { background: var(--surface-2); }
a.fn-step__row:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
.fn-step__l { flex: 1; min-width: 0; font-weight: 600; }
.fn-step__chev { flex: none; margin-left: auto; color: var(--ink-3); }
.fn-lim .fn-step__dot { flex: none; width: 24px; height: 24px; background: none; box-shadow: inset 0 0 0 2px var(--ink-3); }
.fn-lim .fn-step.is-done .fn-step__dot { background: var(--accent); box-shadow: none; color: var(--on-accent); }
.fn-lim .fn-step.is-done .fn-step__row { color: var(--ink-2); }
.fn-hi { min-height: 0; }
.fn-hi__h { font: 800 26px/1.15 var(--portal-display, var(--font-display)) !important; overflow-wrap: normal; word-break: keep-all; }
@media (min-width: 701px) { .fn-hi__h { font-size: 32px !important; } }
.fn-kpi__l { text-wrap: balance; }
/* creator #141 / system #141: on phones a request row reads title, length, then price and key on one line (like the board) */
@media (max-width: 700px) {
  .fn-rq { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t t" "s s" "b go"; }
  .fn-rq__t { grid-area: t; } .fn-rq__size { grid-area: s; } .fn-rq__b { grid-area: b; justify-self: start; }
  .fn-rq__go { grid-area: go; grid-column: auto; justify-self: end; }
}
/* audit 500: Stats — the number under its head (creator #126), «Your audience» a panel (creator #122) */
.fn-stats__big { margin: 2px 0 0; font: 800 28px/1.1 var(--portal-display, var(--font-display)); color: var(--ink); font-variant-numeric: tabular-nums; }
.fn-aud.pn-panel .fn-aud__list { margin: 12px 0 0; }

/* ---------------------------------------------------------------- Upload feet clip (owner mockup 10.11., templates/fn_add.php)
   Two columns from 1100 px: the form left (title, lede, Video | Photos, the upload card with the accent ring, Description,
   Tags, Send to cards, the publish row), «Preview on your page» right and sticky, a soft pink/violet glow in its corner.
   Tonal surfaces only (no card edges), the mint accent for the one key, the picked choices and the ring. Phones: one column,
   the preview after the form, the publish row sticky above the tab bar. */
.fnb { --fnb-r: 22px; --fnb-pink: #00b3ff; --fnb-violet: #0062ff;   /* colour audit #222: the pink → violet glow pair is the brand blue pair */
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "form" "pv" "go" "done" "after";
  gap: 18px; align-items: start; padding-block: 8px 24px; min-width: 0; }
.fnb-head { grid-area: head; }
.fnb-form { grid-area: form; display: grid; gap: 16px; min-width: 0; margin: 0; }
.fnb-pv { grid-area: pv; min-width: 0; }
.fnb-go { grid-area: go; }
.fnb > .fn-done { grid-area: done; max-width: none; }
.fnb > .fnb-after { grid-area: after; }
.fnb-head__h { margin: 0; font: 800 var(--fp-h1, 32px)/1.1 var(--portal-display, var(--font-display)) !important; color: var(--ink); text-transform: none; letter-spacing: -.01em; }
.fnb-head__lede { margin: 8px 0 0; color: var(--ink-2); font: 400 15px/1.45 var(--body, var(--font-sans)); }
.fnb-head .fp-jrback { margin: 10px 0 0; }
.fnb .fcd-addidea { margin: 0; }

/* Video | Photos */
.fnb-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; border-radius: 999px; background: var(--surface); max-width: 420px; }
.fnb-seg__opt { cursor: pointer; }
.fnb-seg__opt > span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 999px; color: var(--ink-2); font: 700 15px/1 var(--body, var(--font-sans)); }
.fnb-seg__opt:hover > span { color: var(--ink); }
.fnb-seg__opt:has(input:checked) > span { background: var(--accent); color: var(--on-accent); }
.fnb-seg__opt:has(input:focus-visible) > span { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }

/* the cards */
.fnb-card { display: grid; gap: 14px; min-width: 0; padding: 20px; border-radius: var(--fnb-r); background: var(--surface); }
.fnb-up { box-shadow: none; }   /* colour audit #224: no lit edge round the card */
.fnb-pane { display: grid; gap: 12px; min-width: 0; }
.fnb-drop { display: grid; justify-items: center; gap: 6px; padding: 34px 20px; border-radius: 18px; text-align: center; cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--surface-2)); background: color-mix(in srgb, var(--fp-tint) 50%, var(--surface)); }   /* #225 */
.fnb-drop:hover, .fnb-drop.is-over { background: var(--fp-tint); border-color: var(--accent); }
.fnb-drop:focus-within { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 3px; }
.fnb-drop__ico { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 6px; border-radius: 50%; background: var(--fp-tint-2); color: var(--accent-text); }   /* #226 */
.fnb-drop__t { font: 800 19px/1.2 var(--portal-display, var(--font-display)); color: var(--ink); }
.fnb-drop__or { font: 500 14px/1.3 var(--body, var(--font-sans)); color: var(--ink-2); }
.fnb-drop__rules { margin-top: 4px; padding: 5px 12px; border-radius: 999px; background: var(--surface-2); font: 600 13px/1.2 var(--body, var(--font-sans)); color: var(--ink); }
.fnb-lim, .fnb .fcd-addtip { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 13.5px/1.35 var(--body, var(--font-sans)); color: var(--ink-2); }
.fnb-lim .pc-ico { flex: none; color: var(--ink-3); }
.fnb-lim.is-full { color: var(--ink); }
.fnb-lim.is-full .pc-ico { color: var(--danger); }
.fnb-rules { margin: 0; font: 600 14px/1.3 var(--body, var(--font-sans)); }

/* the picked video */
.fnb-file { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: center; }
.fnb-thumb { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: #000; }
.fnb-thumb__v { width: 100%; height: 100%; object-fit: cover; display: block; }
.fnb-file.is-noprev .fnb-thumb { background: linear-gradient(160deg, var(--fp-tint-2), var(--surface-2)); }   /* #233 */
.fnb-thumb__play, .fnb-post__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgb(3 7 18 / .55); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }   /* #231 */
.fnb-thumb__play .pc-ico, .fnb-post__play .pc-ico { translate: 2px 0; }
.fnb-dur { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; background: rgb(3 7 18 / .7); color: #fff; font: 700 12px/1.2 var(--body, var(--font-sans)); font-variant-numeric: tabular-nums; }
.fnb-x { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(3 7 18 / .72); color: #fff; font: 700 18px/1 var(--body, var(--font-sans)); }
.fnb-x:hover { background: var(--danger); color: var(--on-danger); }   /* #232 */
.fnb-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fnb-file__info { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.fnb-file__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 16px/1.3 var(--body, var(--font-sans)); color: var(--ink); }
.fnb-file__meta { font: 400 14px/1.3 var(--body, var(--font-sans)); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fnb-file__meta.is-bad { color: var(--danger); }
.fnb-file__state { font: 700 14px/1.3 var(--body, var(--font-sans)); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fnb-file__state:empty { display: none; }
.fnb-file__state.is-ok { color: var(--success, var(--accent)); }
.fnb-file__state.is-ok::before { content: "✓ "; }
.fnb-file__state.is-bad { color: var(--danger); font-weight: 600; }
.fnb-file__bar { position: relative; display: block; width: min(100%, 260px); height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.fnb-file__bar i { position: absolute; inset: 0 auto 0 0; width: 3%; border-radius: inherit; background: var(--accent); transition: width .2s; }
.fnb-soft { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 4px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); color: var(--ink); font: 700 14px/1 var(--body, var(--font-sans)); }
.fnb-soft:hover { background: var(--fp-tint); }   /* #234 */
.fnb-soft .pc-ico { color: var(--accent); }

/* the picked photos */
.fnb-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.fnb-thumbs li { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.fnb-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fnb-thumbs .fnb-x { top: 4px; right: 4px; width: 26px; height: 26px; font-size: 16px; }

/* Description, Tags, Send to */
.fnb-meta { gap: 22px; }
.fnb-field { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.fnb-field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fnb-label { float: none; padding: 0; font: 700 15px/1.3 var(--body, var(--font-sans)); color: var(--ink); }
fieldset.fnb-field > legend { margin-bottom: 10px; }
.fnb-count { font: 500 13px/1 var(--body, var(--font-sans)); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fnb-input { min-height: 96px; resize: vertical; }
.fnb-tags__list { display: flex; flex-wrap: wrap; gap: 8px; }
.fnb-tag { position: relative; display: inline-flex; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.fnb-tag > span { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font: 600 14px/1 var(--body, var(--font-sans)); }
.fnb-tag__x, .fnb-tag__plus { display: none; }
.fnb-tag:has(input:checked) > span { padding-right: 10px; background: var(--fp-tint-2); box-shadow: none; }   /* #229 */
.fnb-tag:has(input:checked) .fnb-tag__x { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.fnb-tag:has(input:checked) .fnb-tag__x .pc-ico { width: 12px; height: 12px; }
.fnb-tag:has(input:focus-visible) > span, .fnb-tag--add:focus-visible > span { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
.fnb-tag--add:focus-visible { outline: 0; }
.fnb-tag--add > span { background: var(--surface-2); box-shadow: none; color: var(--ink-2); }   /* #230 */
.fnb-tag--add:hover > span { color: var(--ink); background: var(--surface-2); }
.fnb-tag--add .pc-ico { width: 16px; height: 16px; color: var(--accent); }
/* closed: only the picked tags and «Add tag»; open: every tag of hers, the unpicked ones with a +; full: no more to add */
.fnb-tags:not(.is-adding) .fnb-tag:has(input:not(:checked)) { display: none; }
.fnb-tags.is-adding .fnb-tag:has(input:not(:checked)) .fnb-tag__plus { display: inline; color: var(--accent); font-weight: 800; }
.fnb-tags.is-full .fnb-tag:has(input:not(:checked)) { opacity: .45; }
.fnb-tags.is-full:not(.is-adding) .fnb-tag--add { display: none; }
.fnb-to__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fnb-to__opt { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ico dot" "txt txt"; align-items: start; gap: 12px 10px; padding: 14px 14px 16px; border-radius: 18px; cursor: pointer;
  background: var(--surface-2); }
.fnb-to__ico { grid-area: ico; }
.fnb-to__txt { grid-area: txt; }
.fnb-to__dot { grid-area: dot; }
.fnb-to__opt:hover { background: color-mix(in srgb, var(--fp-tint) 60%, var(--surface-2)); }
.fnb-to__opt:has(input:checked) { background: var(--fp-tint); box-shadow: none; }   /* #227: the radio dot carries the state, no lit edge */
.fnb-to__opt:has(input:focus-visible) { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 3px; }
.fnb-to__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface-3); color: var(--ink-2); }   /* #228 */
.fnb-to__opt:has(input:checked) .fnb-to__ico { background: var(--fp-tint-2); color: var(--accent-text); }
.fnb-to__txt { display: grid; gap: 3px; min-width: 0; }
.fnb-to__txt b { font: 700 15px/1.25 var(--body, var(--font-sans)); color: var(--ink); }
.fnb-to__txt span { font: 400 13px/1.35 var(--body, var(--font-sans)); color: var(--ink-2); }
.fnb-to__dot { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink-3); }
.fnb-to__opt:has(input:checked) .fnb-to__dot { box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 5px var(--surface), inset 0 0 0 10px var(--accent); }

/* the publish row */
.fnb-go { display: grid; gap: 10px; }
.fnb-go__row { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.fnb-go__hint { margin: 0 auto 0 0; font: 400 14px/1.35 var(--body, var(--font-sans)); color: var(--ink-2); }
.fnb-go__btn { min-height: 54px; min-width: 220px; padding-inline: 26px; font-size: 16.5px; }
.fnb-go__btn[disabled], .fnb-go__sched[disabled] { opacity: .5; cursor: not-allowed; }
/* owner 10.11.: «Schedule» beside Publish, its sheet, the done panel's scheduled line */
.fnb-go__sched { min-height: 54px; padding-inline: 20px; }
.fnb-sheet__f { display: grid; gap: 14px; }
.fnb-sheet__f .pn-sheet__body { margin: 0; }
.fnb-sched__quick { display: flex; flex-wrap: wrap; gap: 8px; }
.fnb-chip { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink); font: 600 14px/1 var(--body, var(--font-sans)); cursor: pointer; }
.fnb-chip:hover { background: var(--fp-tint); }   /* #235 */
.fnb-chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.fnb-chip[disabled] { opacity: .45; cursor: not-allowed; }
.fnb-sched__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; }
.fnb-sched__f { display: grid; gap: 6px; min-width: 0; }
.fnb-sched__f .fnb-input { min-height: 48px; color-scheme: dark; }
.fnb-sched__tz { display: flex; align-items: center; gap: 6px; margin: 0; font: 400 13px/1.35 var(--body, var(--font-sans)); color: var(--ink-2); }
.fnb-sched__tz .pc-ico { color: var(--ink-3); }
.fnb-sheet__acts { grid-template-columns: 1fr 1fr; }
.fn-done__sched { margin: 0; }
.fnb-err { margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--danger-soft, color-mix(in srgb, var(--danger) 14%, var(--surface))); color: var(--ink); font: 400 14px/1.4 var(--body, var(--font-sans)); }
.fnb-bar { position: relative; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.fnb-bar i { position: absolute; inset: 0 auto 0 0; width: 4%; border-radius: inherit; background: var(--accent); transition: width .2s; }

/* «Preview on your page» */
.fnb-pv { position: relative; isolation: isolate; display: grid; gap: 14px; padding: 20px; border-radius: var(--fnb-r); background: var(--surface); overflow: hidden; }
.fnb-pv::before { content: ""; position: absolute; z-index: -1; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--fnb-pink) 26%, transparent), color-mix(in srgb, var(--fnb-violet) 12%, transparent) 60%, transparent); }
.fnb-pv__h { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 18px/1.2 var(--portal-display, var(--font-display)) !important; color: var(--ink); text-transform: none; }
.fnb-pv__h .pc-ico { color: var(--accent); }
.fnb-post { display: grid; gap: 12px; min-width: 0; }
.fnb-post__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.fnb-post__who { display: grid; gap: 2px; min-width: 0; }
.fnb-post__who b { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font: 700 15px/1.25 var(--body, var(--font-sans)); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnb-post__who > span { font: 400 13px/1.2 var(--body, var(--font-sans)); color: var(--ink-3); }
.fnb-post__vf { display: inline-flex; color: var(--accent); }
.fnb-post__more { color: var(--ink-3); }
.fnb-post__media { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--surface-2); }
.fnb-post__media.is-filled { background: #000; }
.fnb-post__v, .fnb-post__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fnb-post__empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 20px; text-align: center; font: 600 14px/1.35 var(--body, var(--font-sans)); color: var(--ink-2);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--surface-2)), var(--surface-2) 60%, color-mix(in srgb, var(--fnb-violet) 10%, var(--surface-2))); }
.fnb-post__play { width: 58px; height: 58px; padding: 0; border: 0; cursor: pointer; }
.fnb-post__media.is-playing .fnb-post__play { opacity: 0; }
.fnb-post__media.is-playing:hover .fnb-post__play { opacity: 1; }
.fnb-dur--pv { left: 10px; bottom: 10px; }
.fnb-dur--pv + .fnb-dur--pv { left: auto; right: 10px; }
.fnb-post__cap { margin: 0; font: 400 15px/1.45 var(--body, var(--font-sans)); color: var(--ink); overflow-wrap: anywhere; white-space: pre-line; }
.fnb-post__tags { margin: 0; font: 600 14px/1.5 var(--body, var(--font-sans)); color: var(--accent-text, var(--accent)); word-spacing: .2em; }

@media (max-width: 700px) {
  .fnb { gap: 14px; }
  .fnb-card, .fnb-pv { padding: 16px; }
  .fnb-seg { max-width: none; }
  .fnb-drop { padding: 26px 16px; }
  .fnb-file { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
  .fnb-to__list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fnb-to__opt { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico txt dot"; align-items: center; padding: 12px 14px; }
  .fnb-post__media { aspect-ratio: 1; }
  .fnb:not(.has-media) .fnb-pv { display: none; }   /* phones: the preview once there is something to preview */
  /* the publish row sticks above the tab bar */
  .fnb-go { position: sticky; bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom) + 8px); z-index: 5; margin-inline: -4px; padding: 10px; border-radius: 20px;
    background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--sh-sheet, 0 10px 30px rgb(0 0 0 / .35)); }   /* #238 */
  .fnb-go__row { gap: 10px; }
  .fnb-go__hint { display: none; }
  .fnb-go__btn { flex: 1; min-width: 0; min-height: 50px; }
}
@media (min-width: 701px) and (max-width: 1023px) {
  .fnb-go { position: sticky; bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom) + 8px); z-index: 5; padding: 10px 12px; border-radius: 20px;
    background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
@media (min-width: 1100px) {
  .fnb { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); grid-template-areas: "head pv" "form pv" "go pv" "done done" "after after"; column-gap: 28px; row-gap: 18px; }
  .fnb-pv { position: sticky; top: calc(var(--header-h, 76px) + 16px); align-self: start; }
  .fnb.is-done { grid-template-areas: "head head" "done done" "after after"; }
}

/* owner 10.11. («nach Beschreibung Hairline»): a hairline between Description, Tags and Send to — the ink at a low share
   (never white on dark, never a hard rule) */
.fnb-meta > .fnb-field:not(:last-child) { padding-bottom: 20px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }

/* colour audit 10.11. (r1011 color-member): the Clips stream is a dark media stage in BOTH themes (#175-#177) — its words, tags
   and links white on the blue-black scrim (in light they took the page ink: 1.6:1), the Follow key a white glass, not the light
   tonal key; the preview glow of Broadcast only in dark (#241); the dashboard hero's corner glow the tonal blue (#146) */
.fn-clip, .fn-stream__end, .fpbx-end { --ink: #FFFFFF; --ink-2: rgb(255 255 255 / .82); --accent-text: #66d1ff; }
html body.pc-root.fp-ds.fp-ds.fp-ds:not(.pn-adm):not(.pc-guest) :is(.fn-clip__tags, .fn-stream__end, .fpbx-end) a:not(.pc-btn) { color: inherit; text-decoration-color: rgb(255 255 255 / .5); }
html body.pc-root.fp-ds.fp-ds.fp-ds:not(.pn-adm):not(.pc-guest) .fn-clip .pc-btn.fn-clip__follow { background: rgb(255 255 255 / .16); color: #FFFFFF; }
html body.pc-root.fp-ds.fp-ds.fp-ds:not(.pn-adm):not(.pc-guest) .fn-clip .pc-btn.fn-clip__follow:hover { background: rgb(255 255 255 / .26); }
html[data-theme="light"] .fnb-pv::before { display: none; }
.fn-hi { background: radial-gradient(120% 140% at 100% 0%, var(--fp-tint) 0%, transparent 60%), var(--surface); }

/* ==== q2-mobile (audit 500 #2 round 2, 10.11.; scratchpad r1011/q2-mobile.md) ==== */
/* F1: Broadcast on a phone on its side: the go row (Schedule · Publish clip, «Choose a video or photos first.») stuck over
   the form between top bar and tab bar, the caption field showed 40 px; there it sits at the end of the form */
@media (orientation: landscape) and (min-aspect-ratio: 4/3) and (max-height: 500px) and (max-width: 1023.98px) {
  .fnb-go { position: static; margin-inline: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* F2: a touch keeps :hover after the tap: the play glyph came back over her playing preview and stayed there */
@media (hover: none) { .fnb-post__media.is-playing:hover .fnb-post__play { opacity: 0; } }
/* F3: her page's request bar on a phone on its side: the notch / rounded corner cut its text and its key */
@media (orientation: landscape) {
  .fn-reqbar { padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); }
}
/* ==== end q2-mobile ==== */

/* ==== ad400 studio (AD 400 per page, 10.11. late; scratchpad ad400/studio.md, B = Broadcast, S = Stats, SH = share) ==== */
/* B1 the lede says its whole sentence on small phones (the shared one-line clamp cut it to «Share a clip or photos with yo…») */
@media (max-width: 379.98px) { body.fp-ds .fnb .fnb-head__lede { display: block; -webkit-line-clamp: unset; overflow: visible; } }
/* B4 «What to film» is for an empty Broadcast: once a clip or photos are picked it steps out */
.fnb.has-media .fp-ideas--fnb { display: none; }
/* B6 the file promise and «What can I post?» one quiet block under the upload card */
.fnb-fine { display: grid; gap: 6px; }
.fnb-fine > p { margin: 0; }
/* B8 an open «Send to» dot is a visible ring (it was a filled disc at ~1.1:1 on its card: no radio to see) */
body.fp-ds .fnb .fnb-to__dot { background: transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 42%, transparent); }
body.fp-ds .fnb .fnb-to__opt:has(input:checked) .fnb-to__dot { background: transparent; box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 5px var(--fp-tint), inset 0 0 0 10px var(--accent); }
/* B11 the picked clip's corners: the video layer painted past the rounded corner (a bright wedge, light theme most) */
.fnb-thumb, .fnb-post__media { clip-path: inset(0 round 16px); }
.fnb-post__media { clip-path: inset(0 round 18px); }
/* B22 phones: the picked clip reads length, state, name, then «Preview» (the key sat between the state and the name) */
.fnb-file__info .fnb-soft { order: 5; }
/* SH4 the QR code of her page is for a second screen: on a phone (her own screen) it steps out */
@media (max-width: 700px) { .fn-share__qr { display: none; } }
/* S5 Stats: the funnel and the sources side by side from 1100 px, each table as wide as its panel (no 900 px gap label → number) */
.fp-fst-grid { display: grid; gap: var(--space-4, 16px); min-width: 0; }
@media (min-width: 1100px) { .fp-fst-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } }   /* S16 both panels one height */
/* S3 no visits yet: one quiet line */
.fp-fst__none { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); font: var(--type-body); color: var(--ink-2); }
/* S10 «Your audience» on the same panel padding as the panels above it (it was 4 px further in on phones) */
body.fp-ds .fn-stats .fn-aud.pn-panel { padding: var(--space-5, 20px); }
@media (max-width: 700px) { body.fp-ds .fn-stats .fn-aud.pn-panel { padding: var(--space-4, 16px); } }
/* B23 tablets (701–1099 px, one column): an empty «Preview on your page» card sat under the form before anything was picked —
   like on phones it shows once there is something to preview */
@media (min-width: 701px) and (max-width: 1099px) { .fnb:not(.has-media) .fnb-pv { display: none; } }
/* S18 small phones: two 4.5 em number columns squeezed «Page visits» into two lines and «Requests sent to you» into three */
@media (max-width: 400px) {
  .fn-stats .fp-fst__t td, .fn-stats .fp-fst__t thead th:not(:first-child) { width: 1%; white-space: nowrap; padding-left: 14px; }
  .fn-stats .fp-fst__t thead th { font-size: 12.5px; }
  .fn-stats .fp-fst__fl { gap: 8px; }
}
/* B24 after posting: the empty grid rows of the hidden form, preview and key row each kept their gap (≈ 90 px of air above
   «Your clip is posted» on a phone), and the lede «Share a clip or photos…» talked about a step that is over */
@media (max-width: 1099px) { .fnb.is-done { grid-template-areas: "head" "done" "after"; } }
.fnb.is-done .fnb-head__lede { display: none; }

/* ==== night 1000 (12.11., docs/fp2/night-1000-12-11/creator-content.md) ==== */
/* #3 Stats: her tagged page links to copy */
.fp-fst__links { display: grid; gap: 10px; }
.fp-fst__ll { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fp-fst__ll > li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.fp-fst__llt { display: grid; min-width: 0; flex: 1; gap: 2px; font: 500 13px/1.35 var(--body); color: var(--ink-2); }
.fp-fst__llt > b { color: var(--ink); font-weight: 700; }
.fp-fst__llt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-fst__ll .pc-btn { flex: none; }
/* #7 phones: the greyed Post / Schedule keys say what they wait for (the hint was hidden below 700 px) */
@media (max-width: 700px) {
  .fnb-go__row { flex-wrap: wrap; }
  .fnb-go__hint:not([hidden]) { display: block; order: 3; flex-basis: 100%; margin: 0; text-align: center; font-size: 13px; }
}
/* #8 the tag list's Done key is no tag: no plus while the list is open */
.fnb-tags.is-adding .fnb-tag--add .pc-ico { display: none; }
.fnb-tags.is-adding .fnb-tag--add > span { background: var(--accent); color: var(--on-accent, #04121f); }
/* #25 her page's Share block: the address broke inside her name («fp2q / a-seller»); the name moves to the next line whole */
.fn-share__addr b { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
/* #31 «What can I post? ↗»: the arrow sat 10 px off its words (flex gap + its own margin) */
.fnb-rules .fp-link .fcd-ext { margin-left: 0; }
/* #41 the tagged link wraps instead of «…»: the ?src= end is what tells the two apart */
.fp-fst__llt > span { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }