/* feet.panty.com — THE shared design system layer (Night 1000, 12.11.; spec docs/fp2/night-1000-12-11/design-system.md).
   Loaded LAST on every page (lib/view.php pnew_fp_system_link(), after portal-look.css), guest and member, never on the
   reference home (body.fp-ref keeps fp-ref.css as the owner's approved spec). It folds the variants of the older layers
   (pnew.css, the guest bundles, pnew-plastik-site.css, portal-look.css, pnew-fpshell.css «fp-ds») into one table:
     edges    grey at 50 % (--fp-edge), never white on dark, never removed: chrome lines, card edges, field edges
     buttons  primary · secondary · ghost · danger, sizes sm / md / lg, one disabled look, one focus ring, all pills
     fields   one height, one radius, a grey 50 % edge, the accent edge + ring on focus
     targets  44 px on phones
   Page sheets keep their layout; here only the shared look. Selectors: G = guest pages, M = member pages (fp-ds). */

/* ==== 1. tokens ============================================================================================== */
:root, [data-theme] {
  --fp-edge: transparent;                    /* owner 12.11. pm «ich will keine scheiss border an cards etc»: no edges (was grey 50 %) */
  --fp-edge-hover: transparent;
  --fp-btn-h-lg: 52px; --fp-btn-h-md: 44px; --fp-btn-h-sm: 36px;
  --fp-btn-fs: 15px; --fp-btn-fs-sm: 14px;
  --fp-tap: 44px;
}
@media (max-width: 700px) { :root, [data-theme] { --fp-btn-h-sm: 44px; } }

/* ==== 2. chrome: owner 12.11. pm — no line between the chrome and the page; a surface change (white bar, its soft shadow) == */
body.pc-root:not(.fp-ref):not(.pn-adm) .pc-header,
body.pc-root:not(.fp-ref):not(.pn-adm) .pc-header.fp-top { border-bottom: 0; }
body.pc-root:not(.fp-ref):not(.pn-adm) .pc-footer,
body.pc-root:not(.fp-ref):not(.pn-adm) .pn-tabbar,
body.fp-shelled .pc-footer, body.fp-shelled .pn-tabbar.fp-tabs { border-top: 0 !important; }
body.pc-root:not(.fp-ref):not(.pn-adm) .pc-footer.pn-gfooter { border-top: 0 !important; }
/* the chat's own top bar and its composer: the same chrome lines (the thread ran into both without one) */
body.pc-root:not(.fp-ref):not(.pn-adm) .pn-chathead { border-bottom: 0 !important; }
body.pc-root:not(.fp-ref):not(.pn-adm) .pn-composer { border-top: 0 !important; }
@media (min-width: 1024px) {
  body.fp-has-side .fp-side { box-shadow: inset -1px 0 0 var(--fp-edge); }
  body.fp-has-side .fp-shell { background: linear-gradient(90deg, var(--fp-side-bg) 267px, var(--fp-edge) 267px, var(--fp-edge) 268px, transparent 268px); }
}
/* night 1000 handover: from 1024 to 1279 px the rail is 240 px (pnew-fpshell.css #28) but this ground kept its line at 267 px:
   two lines beside the sidebar (240 + 267) and a 27 px strip of rail colour over the page */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  body.fp-has-side .fp-shell { background: linear-gradient(90deg, var(--fp-side-bg) 239px, var(--fp-edge) 239px, var(--fp-edge) 240px, transparent 240px); }
}

/* the hairlines inside guest pages (list rows, footer columns, the «or» rule) were 10–12 % ink in light and 10 % WHITE in
   dark: the one grey 50 % edge in both */
html[data-theme] > body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.pn-adm):not(.fp-ref) { --t-hair: var(--fp-edge) !important; --rule-ink: var(--fp-edge) !important; }
body.pc-root:not(.fp-ref) .pn-gfooter__col { border-top-color: var(--fp-edge); }
body.pc-root:not(.fp-ref) .pn-authlost__instead { border-top-color: var(--fp-edge); }

/* the row lines inside member cards (Settings rows, the plan rows, the Credits rows) were 10-12 % of the WHITE ink in dark:
   white lines on dark — the one grey 50 % edge */
body.pc-root:not(.fp-ref) .fps-set { --fps-line: var(--fp-edge); }
body.pc-root:not(.fp-ref) .fpl { --fpl-sep: var(--fp-edge); }
body.pc-root:not(.fp-ref) :is(.tkn-cr__row, .tkn-row) { border-top-color: var(--fp-edge); }
body.pc-root:not(.fp-ref) .fv-usage__bar { background: var(--surface-3, var(--surface-2)); }   /* the vault usage track was 12 % white on dark */
body.pc-root:not(.fp-ref) .fnb-meta > .fnb-field:not(:last-child) { border-bottom-color: var(--fp-edge); }
html[data-theme] body.pc-root:not(.fp-ref) .pn-authlost__instead { border-top-color: var(--fp-edge); }

/* ==== 3. buttons, guest pages (the member pages have the same table in pnew-fpshell.css «fp-ds») ==================
   primary   accent fill, on-accent ink              .pc-btn--primary, --premium
   secondary tonal accent well, page ink             .pc-btn--ink, --line, --secondary, --soft, --white
   ghost     no fill, page ink, a tint on hover      .pc-btn--ghost, --quiet
   danger    red ink on a red veil (is-confirm: red) .pc-btn--danger
   md 44 / lg 52 / sm 36 (44 on phones), 15 / 14 px 700, pills, disabled = the well with the third ink */
html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.pn-adm):not(.fp-ds) .pc-btn:not(.pc-skip) {
  min-height: var(--fp-btn-h-md); border-radius: 999px; font-weight: 700; font-size: var(--fp-btn-fs); letter-spacing: 0; }
html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.pn-adm):not(.fp-ds) .pc-btn.pc-btn--sm { min-height: var(--fp-btn-h-sm); font-size: var(--fp-btn-fs-sm); }
html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.pn-adm):not(.fp-ds) .pc-btn.pc-btn--lg { min-height: var(--fp-btn-h-lg); }
html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.pn-adm):not(.fp-ds) .pc-btn:is(.pc-btn--primary, .pc-btn--premium) {
  background: var(--accent); color: var(--on-accent); border-color: transparent; }
html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.pn-adm):not(.fp-ds) .pc-btn:is(.pc-btn--primary, .pc-btn--premium):hover { background: var(--accent-press, var(--accent)); }
html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.pn-adm):not(.fp-ds) .pc-btn:is(.pc-btn--ink, .pc-btn--line, .pc-btn--secondary, .pc-btn--soft) {
  background: var(--btn-ink, var(--surface-2)) !important; color: var(--ink); border-color: transparent; box-shadow: none; }
html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.pn-adm):not(.fp-ds) .pc-btn:is(.pc-btn--ink, .pc-btn--line, .pc-btn--secondary, .pc-btn--soft):hover {
  background: var(--btn-ink-hover, var(--surface-3)) !important; color: var(--ink); }
/* !important on the fills: the dark theme's header and menu rules painted ghost keys #1e2b45 / a 16 % tint and the second
   key a neutral #1e2b45 (light: plain ghost, tonal second key) */
html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.pn-adm):not(.fp-ds) .pc-btn:is(.pc-btn--ghost, .pc-btn--quiet) {
  background: transparent !important; color: var(--ink); border-color: transparent; box-shadow: none; }
html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.pn-adm):not(.fp-ds) .pc-btn:is(.pc-btn--ghost, .pc-btn--quiet):hover { background: var(--t-tint, var(--surface-2)) !important; }
html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.pn-adm):not(.fp-ds) .pc-btn.pc-btn--danger {
  background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border-color: transparent; }
html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.pn-adm):not(.fp-ds) .pc-btn.pc-btn--danger.is-confirm { background: var(--danger); color: var(--on-danger); }
html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.pn-adm):not(.fp-ds) .pc-btn:is(:disabled, [disabled], [aria-disabled="true"], .is-disabled, .is-off),
html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.pn-adm):not(.fp-ds) .pc-btn:is(:disabled, [disabled], [aria-disabled="true"], .is-disabled, .is-off):hover {
  background: var(--surface-2); color: var(--ink-3, var(--ink-2)); opacity: 1; cursor: not-allowed; box-shadow: none; transform: none; filter: none; }
/* every key, guest and member: one focus ring, the icon in the key's ink */
body.pc-root:not(.fp-ref) .pc-btn:focus-visible, body.pc-root:not(.fp-ref) .pc-iconbtn:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
body.pc-root:not(.fp-ref) .pc-btn .pc-ico { color: currentColor; }
/* keys outside .pc-btn that had no keyboard ring (the «add a tag» key on Upload feet clip) */
body.pc-root:not(.fp-ref) :is(.fnb-tag, .fnb-tag--add, .ms-card__open, .fp-menu__row, .fp-menu__who, .fp-side a, .fp-tabs a, .fp-tabs button):focus-visible { outline: 2px solid var(--focus-ring, var(--accent)) !important; outline-offset: 2px; }

/* ==== 3b. links in running text: one look — the page ink, 600, a 2 px accent underline 3 px below (guest links were 400 or
   600 with three underline colours, the legal pages a 1 px grey line; member links were blue text WITHOUT an underline,
   a colour-only cue next to grey text) */
body.pc-root:not(.fp-ref):not(.pn-adm) main :is(p, small, dd, p > span) > a:not([class*="btn"]):not([class*="chip"]):not([class*="pill"]):not([class*="card"]):not([class*="tile"]) {
  color: var(--ink); font-weight: 600; text-decoration-line: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
body.pc-root:not(.fp-ref):not(.pn-adm) main :is(p, small, dd, p > span) > a:not([class*="btn"]):not([class*="chip"]):not([class*="pill"]):not([class*="card"]):not([class*="tile"]):hover { text-decoration-color: var(--accent-text, var(--accent)); }

/* ==== 4. fields: one height, one radius, a grey 50 % edge, the accent on focus (guest + member) ================== */
body.pc-root:not(.fp-ref):not(.pn-adm) :is(input.pc-input, select.pc-input, textarea.pc-input, .pc-select:not(.pc-selchip) > select) {
  border: 0 !important; border-radius: 16px !important; }   /* a filled well, no edge (§11b)   /* !important: the contact / complaint / copyright / report forms kept 22 px */
body.pc-root:not(.fp-ref):not(.pn-adm) :is(input.pc-input, select.pc-input, .pc-select:not(.pc-selchip) > select) { min-height: 44px; }
body.pc-root:not(.fp-ref):not(.pn-adm) .pc-select:not(.pc-selchip):has(> select) { border: 0; border-radius: 16px; }
body.pc-root:not(.fp-ref):not(.pn-adm) :is(input.pc-input, select.pc-input, textarea.pc-input, .pc-select:not(.pc-selchip) > select):hover:not(:focus):not(:disabled):not([readonly]) { border-color: var(--fp-edge-hover) !important; }
body.pc-root:not(.fp-ref):not(.pn-adm) :is(input.pc-input, select.pc-input, textarea.pc-input, .pc-select:not(.pc-selchip) > select):focus {
  border-color: var(--accent) !important; outline: 2px solid var(--focus-ring, var(--accent)) !important; outline-offset: 1px !important; }   /* !important: page rules reset outline on some fields */
body.pc-root:not(.fp-ref):not(.pn-adm) :is(input.pc-input, textarea.pc-input):is([readonly], .fp-pe__ro, .fp-mp__ro) { border-color: transparent !important; }   /* a read-only value reads as text */
body.pc-root:not(.fp-ref):not(.pn-adm) :is(input.pc-input, select.pc-input, textarea.pc-input)[aria-invalid="true"] { border-color: var(--danger) !important; }

/* custom checkboxes inside: the box had no edge (a #1f2c47 square on a #121a2b card) — the 2 px ring the guest box has */
body.pc-root.fp-ds:not(.fp-ref) main input[type="checkbox"]:not(:checked):not(.pc-sr):not([class*="switch"]) { box-shadow: inset 0 0 0 2px var(--ink-3, var(--fp-edge-hover)); }

/* labels and help: one label (14 px 600, the page ink; guest labels were 13 px, member labels grey, the clip and profile
   labels 15 px 700) and one help line (13 px, the second ink; guest help was 14 px) */
body.pc-root:not(.fp-ref):not(.pn-adm) :is(.pc-label, .fnb-label, .fp-pe__sl) { font-size: 14px !important; font-weight: 600 !important; line-height: 1.3; color: var(--ink) !important; }
body.pc-root:not(.fp-ref):not(.pn-adm) .pc-help { font-size: 13px; line-height: 1.45; color: var(--ink-2); }

/* search boxes that are a well with a bare input inside: the edge sits on the box */
body.pc-root:not(.fp-ref):not(.pn-adm) :is(.pn-help__searchbox, .fp-top__search) { box-shadow: none; }
body.pc-root:not(.fp-ref):not(.pn-adm) main input[type="search"]:not(.pc-sr):not(.pn-help__q) { border: 0; }
body.pc-root:not(.fp-ref):not(.pn-adm) main input[type="search"]:not(.pc-sr):not(.pn-help__q):focus { border-color: var(--accent); }
/* night 1000 handover: the member 404's search is a rounded pill (.pn-nf__search) — the edge above drew a square box inside it */
body.pc-root:not(.fp-ref):not(.pn-adm) main .pn-nf__search input[type="search"]:not(.pc-sr):not(.pn-help__q) { border: 0; border-radius: 0; box-shadow: none; background: none; }
body.pc-root:not(.fp-ref):not(.pn-adm) main .pn-nf__search { box-shadow: none; }
body.pc-root:not(.fp-ref):not(.pn-adm) main .pn-nf__search:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
/* … and its card sat at the left of the page column while the links under it were centred (1024–1440 px) */
html body.pc-root.fp-ds.fp-ds.fp-ds.fp-ds:not(.pn-adm):not(.pc-guest) main .pc-empty.pn-empty.pn-lp-404 { margin-left: auto; margin-right: auto; }
/* Media Studio's three mode cards are cards you press: the same edge; the chosen one is the accent fill */
body.pc-root:not(.fp-ref):not(.pn-adm) .ms-mode:not(.ms-mode--auto) { box-shadow: none; }
body.pc-root:not(.fp-ref):not(.pn-adm) .pn-help__searchbox:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 2px var(--focus-ring, var(--accent)); }

/* ==== 5. cards: tonal surfaces keep their fill and get the grey 50 % edge (never removed, never white) ===========
   The edge is an inset outline (!important: a dozen older rules reset outline on panels): no layout shift, drawn over a
   photo flush with the card's edge. A card inside a card (a well) carries no edge of its own; photo tiles (creator cards,
   clip tiles) are pictures, not surfaces, and stay as they are. */
body.pc-root:not(.fp-ref):not(.pn-adm) :is(.pn-panel, .pk-panel, .pc-pbox, .pc-toc, .pc-box, .pc-door, .pc-empty, .pn-empty, .fp-req__empty, .fp-empty,
  .fn-box, .fnb-card, .ms-card, .ms-ask, .ms-empty, .sg-door, .fp-rn, .fp-rflow, .fp-mr__state, .fp-ideas, .fgb-empty, .pk-impcard,
  .pn-help__list, .pn-help__more, .pn-l3c__form, .tkn-pack, .tkn-soon, .pn-slf-step, .pc-faq > details, details.fpy-faq,
  .fpy-step, .fpy-tile, .fpy-row, .fpy-list__i, .fpy-next, .fpy-sentence, .pn-chatrail.is-rail, .fp-plan-card, .pn-setnav, .fp-card, .fp-box,
  .pc-burger__menu, .fp-cp__head, .fp-cp__panel, .pkj-step, .pn-gd-callout, .pn-gdx__row, .pks-q, .pks-faq, .pks-end, .fp-rqp__warn,
  .fp-mp__menu, .fp-menu, .pc-sheet, .pn-sheet, dialog.pc-modal, .pc-modal__box, .pn-help__grid > li > a,
  .fv-sheet, .sg__sheet, .fp-modal, .ms-dlg, .fnb-pv, .fcd-next, .fps-group, .fp-rqp__warn, .fnb-to__opt, .fp-rn__type,
  .pn-help__vote, .pn-prose ol > li, .pk-gsx-steps > li, .pk-gsx-tips > li, .pk-gsx-ladder > li, .pk-abx-steps > li,
  .fpp-tab:not(.is-on), .fpp-banner, .fp-rqb__stat, .fcd-board-note, .fn-kpi, .fp-mp__tile, .fgb-flow > li) {
  outline: 0 !important; }   /* owner 12.11. pm: no card edges; separation by surfaces and depth (§11) */
body.pc-root:not(.fp-ref):not(.pn-adm) :is(.pn-panel, .pk-panel, .fn-box, .fnb-card, .ms-card, .pc-pbox, .pc-box, .fp-card, .fp-box, .fp-rflow, .fp-rn, .fp-cp__panel, dialog, .fp-modal, .pn-sheet, .fv-sheet, .sg__sheet)
  :is(.fp-rflow, .fp-rn, .fps-group, .pn-panel, .pk-panel, .pc-pbox, .pc-box, .pc-empty, .pn-empty, .fp-req__empty, .fp-empty, .fn-box, .fnb-card, .ms-card, .ms-empty, .fp-ideas, .fp-card,
      .fp-box, .fp-mr__state, .fpy-row, .fpy-list__i, .pn-gdx__row, .fp-rqp__warn) {
  outline: 0 !important; }
body.pc-root:not(.fp-ref):not(.pn-adm) :is(.pn-panel, .pk-panel, .pc-door, .fn-box, .fnb-card, .ms-card, .fp-plan-card, .fp-card, .fp-cp__panel):focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent)) !important; outline-offset: 2px !important; }

/* card radii: member cards 24 px (Upload feet clip's cards were 22, the Premium banner 16); guest panels 32, guest
   medium cards 22 (the Credits packages were 16, the buy-page steps 18), notes 16 (the soon note was 14) */
body.pc-root.fp-ds:not(.fp-ref) :is(.fnb-card, .fpp-banner, .fp-rn) { border-radius: 24px; }
/* member tiles (stat tiles, source tabs, option cards, page tiles, KPI tiles): one tile radius, 16 px (they were 14, 16,
   18, 20 and 24 px); creator photo cards 16 px for guests and members (22 inside, 16 outside) */
body.pc-root.fp-ds:not(.fp-ref) :is(.fp-rqb__stat, .fpp-tab, .fnb-to__opt, .fp-rn__type, .fp-mp__tile, .fn-kpi, .fcd-board-note) { border-radius: 16px; }
body.pc-root:not(.fp-ref) .pc-scard { border-radius: 16px; }
/* icon discs in card heads and rows: one size, 44 px circles (the next-move disc was 36, the homepage door and the Verified
   state 48, the settings rows rounded squares); empty states keep their 52 px disc */
body.pc-root.fp-ds:not(.fp-ref) :is(.fcd-next__ico, .sg-door__ico, .pn-mdvf__ico, .fps-tile) { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; }
/* dropdown menus: one radius, 18 px (the My page status menu was 20 px, the Me and promotion menus 18 px) */
body.pc-root.fp-ds:not(.fp-ref) .fp-mp__menu { border-radius: 18px; }
body.pc-root:not(.fp-ds):not(.fp-ref) .tkn-pack { border-radius: 22px; }
body.pc-root:not(.fp-ds):not(.fp-ref) .fgb-empty { border-radius: 32px; }
body.pc-root:not(.fp-ref) p.tkn-soon { border-radius: 16px; }

/* FAQs: one question look — 700, a 44 px row (the protect page's questions were 24 px tall and regular weight, the payments
   page's regular weight); the Credits FAQ's tinted frame around the item cards goes (the cards carry the edge) */
body.pc-root:not(.fp-ref) main :is(.pc-faq, .fpy-faqs, .pks-faqs, .fpl-faq) details > summary { min-height: 44px; font-weight: 700; cursor: pointer; }
body.pc-root:not(.fp-ref) main .pks-faqs details > summary { padding-block: 10px; }
body.pc-root:not(.fp-ref) main .pc-faq.pn-slf-faq { background: transparent; }

/* card gaps on the spacing scale (8 · 12 · 16 · 24): the Credits packages and the plan comparison groups sat 10 px apart */
body.pc-root:not(.fp-ref) :is(.tkn-packs, .fpl-cmp) { gap: 12px; }
/* member stacks of cards 16 px apart (Requests 18, Premium 20), lists of pickable tiles 12 px (My page 10, Send to 8) */
body.pc-root.fp-ds:not(.fp-ref) :is(.fp-req__main, .pn-wrap.fp-plans) { row-gap: 16px; }
body.pc-root.fp-ds:not(.fp-ref) :is(.fp-mp__tiles, .fnb-to__list) { gap: 12px; }
/* pressable tiles and rows that had no hover look (My page tiles, the request tiles, the setup steps): the well's hover tone
   and the edge in the accent */
@media (hover: hover) {
  body.pc-root.fp-ds:not(.fp-ref) :is(a.fp-mp__tile, a.fp-rqb__stat):hover { filter: brightness(1.12); outline-color: color-mix(in srgb, var(--accent) 60%, var(--fp-edge)) !important; }
  body.pc-root.fp-ds:not(.fp-ref) a.fn-step__row:hover { background: var(--fp-soft-bg, var(--surface-2)); border-radius: 12px; }
}
/* the Premium banner on Requests: three columns squeezed the text into a 140 px column on tablets and on desktops with the
   sidebar (700-1279 px); the Premium key goes under the text there, as on phones */
@media (max-width: 1279px) {
  body.pc-root:not(.fp-ref) .fpp-banner { grid-template-columns: auto minmax(0, 1fr); }
  body.pc-root:not(.fp-ref) .fpp-banner :is(.fpp-up__wrap), body.pc-root:not(.fp-ref) .fpp-banner > .fpp-up { grid-column: 1 / -1; }
}
/* Settings beside the member sidebar (1000-1279 px): the value pill (e-mail, password dots) took the row and squeezed «Email
   address» into a word-per-line column 42 px wide — the value goes under the text there */
@media (min-width: 1000px) and (max-width: 1279px) {
  body.pc-root.fp-has-side:not(.fp-ref) .fps-row:has(> .fps-val) { grid-template-columns: var(--fps-tile, 44px) minmax(0, 1fr); row-gap: 8px; }
  body.pc-root.fp-has-side:not(.fp-ref) .fps-row > .fps-val { grid-column: 2; justify-self: start; max-width: 100%; }
}
/* the member top bar without the sidebar (chats, support) at 1024-1279 px: the six links ran under «+ Broadcast» — the key
   folds to its icon and the links pull in */
@media (min-width: 1024px) and (max-width: 1279px) {
  body.pc-root.fp-shelled:not(.fp-has-side) .fp-top__add { width: 44px; padding: 0; }
  body.pc-root.fp-shelled:not(.fp-has-side) .fp-top__add > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.pc-root.fp-shelled:not(.fp-has-side) .fp-top__link { padding: 0 10px; }
  body.pc-root.fp-shelled:not(.fp-has-side) .pc-header.fp-top { gap: 12px; }
}
/* empty states: one pattern, centred (fp-ds #87) — the vault's empty state was the one left-aligned card */
body.pc-root.fp-ds:not(.fp-ref) .fv-empty { justify-items: center; text-align: center; }
body.pc-root.fp-ds:not(.fp-ref) .fv-empty > p { max-width: 46ch; }
/* option cards you pick (request type, Send to): the chosen one keeps the accent fill, its edge turns the accent */
body.pc-root:not(.fp-ref):not(.pn-adm) :is(.fnb-to__opt, .fp-rn__type):has(input:checked) { outline-color: var(--accent) !important; }
/* sticky action bars (Edit profile steps, escrow setup): the grey 50 % line on top, they floated over the form without one */
body.pc-root:not(.fp-ref):not(.pn-adm) .pc-actionbar { box-shadow: inset 0 1px 0 var(--fp-edge), var(--sh-sheet, 0 -12px 28px -18px rgb(0 0 0 / .45)) !important; }

/* ==== 6. type: one guest head scale (the member scale is fp-ds: 26 / 32, 20, 17) ===============================
   Guest h1 were 28–58 px at 700–900 (legal 58, board 52, credits 30 on a desktop — smaller than on a phone). Now:
   page h1 30 px phone / 44 px desktop, 800; form heads (log in, join) 28 / 32 px; h2 22 / 28 px. */
html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.fp-ds):not(#fp-x) main h1:not(.pc-sr):not(.fr-h1) {
  font-size: 30px !important; font-weight: 800 !important; line-height: 1.12 !important; letter-spacing: -.02em !important; text-transform: none !important; }
html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.fp-ds):not(#fp-x) main h1.pn-joinhead__h:not(.pc-sr) { font-size: 28px !important; }
@media (min-width: 900px) {
  html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.fp-ds):not(#fp-x) main h1:not(.pc-sr):not(.fr-h1) { font-size: 44px !important; }
  html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.fp-ds):not(#fp-x) main h1.pn-joinhead__h:not(.pc-sr) { font-size: 32px !important; }
}

/* the small label above a page h1 (About us, Legal, Payments, Request board, Safety and trust): one look, 13 px 600 in the
   second ink — it was 12 px grey on most pages, 13 px on the safety pages and a 14 px 700 blue on the request board */
body.pc-root:not(.fp-ref):not(.fp-ds) main :is(.pc-kicker, .pk-kick, .fgb__kicker) { font-size: 13px !important; font-weight: 600 !important; color: var(--ink-2) !important; letter-spacing: 0 !important; text-transform: none !important; }

/* the page lede: 16 px / 26 px, 400, second ink (the request board's was 18 px 500, the help center's 15 px, line heights
   24 or 26 px) */
body.pc-root:not(.fp-ref):not(.fp-ds) main :is(.pn-lpm-hero__lede, .pn-slf-hero__lede, .fpy-hero__lede, .fgb-page__lede, .pk-lede) { font-size: 16px !important; line-height: 26px !important; font-weight: 400 !important; color: var(--ink-2); }

/* the lede under a page h1: 12 px at least (Credits, How payments work and Guides had the lede touching the head, the help
   center 8 px; the other pages 16-18 px) */
html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.fp-ds):not(#fp-x) main h1:not(.pc-sr) + p { margin-top: 12px; }

/* section heads (h2): 24 px phone / 28 px desktop, 800 — the About heads were 44 px (as big as the page h1), the Credits
   heads 700, the board heads 900 */
html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.fp-ds):not(#fp-x) main :is(h2.pk-gsx-big, h2.pn-slf-h2, h2.fgb__h:not(.fgb__h--sm), h2.fpy-h2) {
  font-size: 24px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -.015em !important; }
html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.fp-ds):not(#fp-x) main h2.fgb__h--sm { font-weight: 800 !important; }
@media (min-width: 900px) {
  html body.pc-root.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body):not(.fp-ref):not(.fp-ds):not(#fp-x) main :is(h2.pk-gsx-big, h2.pn-slf-h2, h2.fgb__h:not(.fgb__h--sm), h2.fpy-h2) { font-size: 28px !important; }
}

/* member heads in Inter (the standing rule «Inter for member heads, sentence case»): the member pages drew every h1-h4 in
   the portal's Nunito; sizes stay the fp-ds scale (26 / 32, 20, 17, 800). Guest pages keep the portal face. */
html body.pc-root.fp-ds.fp-ds.fp-ds:not(.pn-adm):not(.pc-guest):not(#fp-x) :is(main, dialog, .fp-menu) :is(h1, h2, h3, h4, .pc-h1, .pc-h2, .pc-h3, .pc-h4, .pc-h-card):not(.pc-sr) {
  font-family: "Inter", var(--body), system-ui, sans-serif !important; letter-spacing: -.02em !important; text-transform: none !important; }

/* the display figures inside (request tiles, prices, budgets, stats, the settings banner name) read the portal face from
   the display token: inside main and sheets the token is Inter, so a page has one face (the logo in the chrome keeps its own) */
body.pc-root.fp-ds:not(.pn-adm):not(.pc-guest) :is(main, dialog, .fp-menu) { --portal-display: "Inter", var(--body), system-ui, sans-serif; --display: var(--portal-display); --display-lc: var(--portal-display); }
body.pc-root.fp-ds:not(.pn-adm):not(.pc-guest) main .fn-aud__list dd { font-family: "Inter", var(--body), system-ui, sans-serif; }

/* ==== 7. tap targets: 44 px on phones ========================================================================== */
@media (max-width: 700px) {
  /* breadcrumbs (24 px tall links) and the help center's side topics (42 px) */
  body.pc-root:not(.fp-ref) :is(.pn-gcrumbs, .pn-crumbs) a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
  body.pc-root:not(.fp-ref) .pn-help__side a { min-height: 44px; }
  /* switches: a 32 px track, a 44 px hit area (the guest bundles had it, the member pages not) */
  body.pc-root:not(.fp-ref) .pc-switch { position: relative; }
  body.pc-root:not(.fp-ref) .pc-switch::before { content: ""; position: absolute; inset: -7px -4px; }
  /* small text links that stand alone (Compare plans, a card's open key) get a 44 px band */
  body.pc-root:not(.fp-ref) :is(.fpp-up__plans, .ms-card__open, .ms-card__up, .fp-cp__more) { display: inline-flex; align-items: center; min-height: 44px; }
  /* the hashtags on a clip: a 44 px band without moving the caption */
  body.pc-root:not(.fp-ref) .fn-clip__tags a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -6px; }
  body.pc-root:not(.fp-ref) :is(.ms-chip, .fpbx-chip, .pc-chip):is(a, button, label) { min-height: 44px; }
}

/* ==== 8. chips, badges, icons ================================================================================
   chip   a pill you can press: 36 px desktop / 44 px phone, 13 px 600, radius 999 (was 16 / 22 px and 32 / 40 px)
   badge  a pill you read: 22 px, 12 px 700, radius 999 (the guest badge was 14 px radius, 600)
   icon   20 px in a key, 16 px in a small key (a 16 px arrow drew at 23 px in View my page) */
body.pc-root:not(.fp-ref) :is(.pc-chip, .pk-chip, .pc-selchip, .pn-langchip__lab, .ms-chip, .fpbx-chip, .pn-backchip) { border-radius: 999px; }
body.pc-root:not(.fp-ref) :is(.pc-chip, .pk-chip, .pc-selchip, .ms-chip, .fpbx-chip, .pn-backchip):is(a, button, label, summary) { font-size: 13px; font-weight: 600; }
body.pc-root:not(.fp-ref) .pn-backchip { background: var(--surface-2); color: var(--ink); }
/* the dropdown chips (All countries, Any language) are chips, not fields: pill, no field edge */
body.pc-root:not(.fp-ref) .pc-selchip, body.pc-root:not(.fp-ref) .pc-selchip > select { border-radius: 999px !important; }
html body.pc-root:not(.fp-ref):not(.pn-adm) .pc-selchip > select.pc-input, html body.pc-root:not(.fp-ref):not(.pn-adm) .pc-selchip > select { border-color: transparent !important; }
@media (min-width: 701px) {
  body.pc-root:not(.fp-ref) :is(.pc-chip, .pk-chip, .ms-chip, .fpbx-chip, .pc-chip--premium):is(a, button, label, summary) { min-height: 36px; }
  body.pc-root:not(.fp-ref) :is(.pc-selchip.pn-langchip, .pn-langchip__lab) { min-height: 36px; }
}
body.pc-root:not(.fp-ref) :is(.pc-badge, .fp-badge, .fpp-chip, .ms-tag) { border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0; }
body.pc-root:not(.fp-ref) .pc-btn > .pc-ico, body.pc-root:not(.fp-ref) .pc-btn > .pc-btn__t + .pc-ico { width: 20px; height: 20px; }
body.pc-root:not(.fp-ref) .pc-btn.pc-btn--sm > .pc-ico { width: 16px; height: 16px; }
/* Media Studio pills follow the key scale (44 / 52 px, never 58) */
body.pc-root:not(.fp-ref) .ms-pill { min-height: var(--fp-btn-h-md); padding-block: 10px; line-height: 1.2; }
/* the two keys under a Media Studio template (Download · Save and copy caption) did not fit a 230 px card: the caption key's
   label ran 22 px out of its pill over the first key. They wrap: each key takes the row it needs */
body.pc-root:not(.fp-ref) .ms-acts { flex-wrap: wrap; }
body.pc-root:not(.fp-ref) .ms-acts .ms-pill { flex: 1 1 auto; min-width: max-content; }

/* the «purchases open soon» note on the Credits page: icon and head inline, the text runs under them (the head was a
   three-line column beside the text on a phone) */
body.pc-root p.tkn-soon { display: block; }
body.pc-root p.tkn-soon > .pc-ico { display: inline-block; vertical-align: -3px; margin-right: 6px; }
body.pc-root p.tkn-soon > b { display: inline; }

/* ==== 8b. sheets, modals, loading ==========================================================================
   One scrim behind every sheet and modal (the homepage sheet had its own 55 % navy, Media Studio a 74 % navy with a blur,
   the creator card a 45 % ink in light); photo and clip viewers keep their black. */
body.pc-root:not(.fp-ref) :is(dialog.pn-sheet, .fv-sheet, .sg__sheet, .ms-dlg, dialog.fpb-cm, .fp-modal)::backdrop { background: var(--scrim, rgb(3 7 18 / .66)); backdrop-filter: none; }
/* bottom sheets on phones: one top radius, 24 px (the creator card and push sheets were 32, the requests modal 22, the
   vault and Me sheets 24) */
@media (max-width: 700px) {
  body.pc-root:not(.fp-ref) :is(dialog.pn-sheet, dialog.fp-modal, dialog.fv-sheet) { border-top-left-radius: 24px; border-top-right-radius: 24px; }
}
/* toasts: one pill in every theme (the dark guest toast was a 32 px rounded box) with the grey 50 % edge (the dark toast sat
   on the dark page with nothing around it) */
body.pc-root:not(.fp-ref) :is(.pn-toast, .pc-toast), body.pc-root.fp-ds :is(.pn-ptoast, .pn-me-toast) { border-radius: 999px; box-shadow: var(--fp-toast-sh, 0 14px 36px rgb(0 0 0 / .35)); }
/* skeletons: the well with a slow pulse (the shimmer was switched off, so a loading grid looked frozen); none with reduced motion */
@media (prefers-reduced-motion: no-preference) {
  body.pc-root:not(.fp-ref) :is(.pn-skel, .fpb-cm__skel > i, .fpb-cm__skel > b) { animation: fp-skel 1.6s ease-in-out infinite; }
}
@keyframes fp-skel { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
body.pc-root:not(.fp-ref) .pn-skelcard { outline: 0; }

/* alerts: warning and success looked exactly like a plain note (white in light, the panel tone in dark, no edge) — the state
   was invisible on a white card. Each now carries its colour as a tint, an edge and a 4 px bar at the start. */
body.pc-root:not(.fp-ref):not(.pn-adm) .pc-alert { background: var(--surface-2, var(--sunken)); box-shadow: none; }
body.pc-root:not(.fp-ref):not(.pn-adm) .pc-alert--danger { background: color-mix(in srgb, var(--danger, #d93f3f) 12%, var(--surface, transparent)); box-shadow: none; }
body.pc-root:not(.fp-ref):not(.pn-adm) .pc-alert--warning { background: color-mix(in srgb, #e0a100 14%, var(--surface, transparent)); box-shadow: none; }
body.pc-root:not(.fp-ref):not(.pn-adm) .pc-alert--success { background: color-mix(in srgb, var(--success, #0a7f55) 12%, var(--surface, transparent)); box-shadow: none; }
/* inline form errors in the danger ink (they were the page ink, indistinguishable from help text) */
body.pc-root:not(.fp-ref):not(.pn-adm) :is(.fp-req__err, .pn-offersheet__err, .pn-revsheet__err, .pn-safety__err):not(:empty) { color: var(--danger); font-weight: 600; }

/* ==== 9. contrast ============================================================================================ */
/* the disabled key in the light member theme: the third ink on the light well was 4.37 : 1 → the second ink */
html[data-theme="light"] body.pc-root.fp-ds.fp-ds.fp-ds:not(.pn-adm):not(.pc-guest) { --fp-off-ink: var(--ink-2); }

/* ==== 10. small system details ============================================================================== */
/* numbers that stand in columns or tiles: tabular figures (the stats table's 7 / 30 day columns and the request tiles
   shifted with every digit) */
body.pc-root:not(.fp-ref) :is(.fp-rqb__stat, .fn-kpi, .fp-fst, .fn-stats__clips, .fn-aud, .tkn-pack, .fpp-tab, .fp-mr__budget, table) { font-variant-numeric: tabular-nums; }
/* selected text in the brand tint instead of the browser's default blue/grey */
body.pc-root:not(.fp-ref) ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; }
/* native checkboxes, radios, ranges and progress bars in the accent */
body.pc-root:not(.fp-ref) :is(input[type="checkbox"], input[type="radio"], input[type="range"], progress) { accent-color: var(--accent); }
/* heads break in balanced lines (no single word alone on the last line) */
body.pc-root:not(.fp-ref) main :is(h1, h2, h3) { text-wrap: balance; }

/* night 1000 handover (guest #81): a field error under a checkbox (the terms on /join/) was centred by the old bundles'
   .pn-fielderr while every other field error starts at the field's edge */
body.pc-root .pn-fielderr { text-align: start; }
/* night 1000 handover (guest #144, #146): the big step numbers 01–04 in the corner of the step cards (/sell-feet-pics/,
   /safety-and-trust/, /about/) were 1.27–1.52:1 on white (axe color-contrast); still a quiet corner number, now 3:1 or more
   (large bold text) */
body.pc-root.pc-guest .pk-gsx-n { opacity: .76 !important; }
body.pc-root .pk-site li:has(> .pk-chfig) .pk-stepn { opacity: .7; }
/* night 1000 handover (buyer #130): legal pages (terms, privacy, refund policy) have no lede under the h1, yet the hero kept
   the lede's room — about 120 px of empty band before the text; and in the member frame the «Legal» label still carried
   panty's tub mark, which reads as a bowl */
body.pc-root .pn-lg-hero .pn-gd-hero__copy:has(> h1:last-child) { padding-bottom: var(--space-4, 16px); }
body.pc-root .pn-lg-hero .pn-gd-hero__copy > h1:last-child { margin-bottom: 0; }
body.pc-root .pn-lg-hero + .pn-gd-main { padding-top: var(--space-6, 24px); }
body.fp-shelled .pc-kicker > .pc-tub { display: none; }
/* night 1000 handover (creator → design): the system's grey help line (.pc-help above) outranked the red of every error line
   that also carries .pc-help — listing/item field errors, the request form's errors, the settings username error, the
   Ships-first question: they read as grey hints. Edit profile was fixed alone (creator #55); now all of them stay red. */
body.pc-root:not(.fp-ref):not(.pn-adm) .pc-help:is(.pn-fielderr, .pn-err, .is-error, .pn-u4s-err, .pn-sfq__err),
body.pc-root:not(.fp-ref):not(.pn-adm) .is-error > .pc-help { color: var(--danger, #e5484d); }

/* ==== 11. inside wave 12.11.: calm and light (docs/fp2/inside-12-11/theme.md) =====================================
   Owner, 12.11. afternoon: «ich will keine scheiss border an cards etc» and «diese dunkle navischeisse ist auch total kacke … die
   ganze seite wirkt unruhig und total altbacken». So: no edges anywhere (separation by surfaces and depth), a light shell (a
   white blurred top bar, the sidebar on the page ground, a white tab bar), ONE accent (the blue) used sparingly, everything
   else ink and grey on white and the ground, a quieter type scale. The light member tokens live in portal-look.css. */

/* -- 11a. no edges: the shared edge and hairline tokens are gone in every theme (fields, cards, rows, chips, chrome lines) -- */
:root, [data-theme], html[data-theme] body.pc-root.pc-root {
  --fp-edge: transparent; --fp-edge-hover: transparent;
  --t-hair: transparent; --hline: transparent; --mline: transparent; --chrome-line: transparent;
  --t-card-edge: transparent; --t-card-edge-hover: transparent; --t-field-edge: transparent; --t-field-edge-over: transparent;
  --fps-line: transparent; --fpl-sep: transparent; --card-rim: none;
}
body.pc-root:not(.pn-adm) :is(.pn-panel, .pk-panel, .pc-pbox, .pc-toc, .pc-box, .pc-door, .pc-empty, .pn-empty, .fp-req__empty, .fp-empty,
  .fn-box, .fnb-card, .ms-card, .ms-ask, .ms-empty, .sg-door, .fp-rn, .fp-rflow, .fp-mr__state, .fp-ideas, .fgb-empty, .pk-impcard,
  .pn-help__list, .pn-help__more, .pn-l3c__form, .tkn-pack, .tkn-soon, .pn-slf-step, .pc-faq > details, details.fpy-faq,
  .fpy-step, .fpy-tile, .fpy-row, .fpy-list__i, .fpy-next, .fpy-sentence, .pn-chatrail, .fp-plan-card, .pn-setnav, .fp-card, .fp-box,
  .pc-burger__menu, .fp-cp__head, .fp-cp__panel, .pkj-step, .pn-gd-callout, .pn-gdx__row, .pks-q, .pks-faq, .pks-end, .fp-rqp__warn,
  .fp-mp__menu, .fp-menu, .pc-sheet, .pn-sheet, dialog.pc-modal, .pc-modal__box, .pn-help__grid > li > a, .fv-sheet, .sg__sheet, .fp-modal,
  .ms-dlg, .fnb-pv, .fcd-next, .fps-group, .fnb-to__opt, .fp-rn__type, .pn-help__vote, .pk-gsx-steps > li, .pk-gsx-tips > li,
  .pk-gsx-ladder > li, .pk-abx-steps > li, .fpp-tab, .fpp-banner, .fp-rqb__stat, .fcd-board-note, .fn-kpi, .fp-mp__tile, .fgb-flow > li,
  .pc-card, .pc-scard, .fp-qrow, .fp-step, .fp-quick, .fn-step__row, .pn-row, .fps-row, .pn-skelcard, .pc-alert, .ms-mode, .fpb-cm, .fgb-card,
  .pc-chip, .pk-chip, .pc-selchip, .ms-chip, .fpbx-chip, .pn-backchip, .pc-badge, .fp-badge, .ms-tag, .pn-chatlist__row, .pn-chathead, .pn-composer,
  .pc-header, .pc-footer, .pn-tabbar, .pc-actionbar) {
  outline: 0 !important; border-color: transparent !important; }
/* the inset hairlines some sheets draw as a shadow: gone on the plain surfaces (depth below gives the white cards their lift) */
body.pc-root:not(.pn-adm) :is(.pc-chip, .pk-chip, .pc-selchip, .ms-chip, .fpbx-chip, .pn-backchip, .pc-badge, .fnb-to__opt, .fp-rn__type, .fpp-tab,
  .ms-mode:not(.ms-mode--auto), .pn-help__searchbox, .fp-top__search, .pn-nf__search, .pc-alert, .fp-rqb__stat, .fp-mp__tile, .fn-kpi, .pn-skelcard) { box-shadow: none !important; }
body.pc-root:not(.pn-adm) :is(.pn-toast, .pc-toast, .pn-ptoast, .pn-me-toast) { box-shadow: var(--fp-toast-sh, 0 14px 36px rgb(16 32 80 / .22)) !important; }
/* an alert keeps its colour as a fill (no edge, no side bar) */
body.pc-root:not(.pn-adm) .pc-alert--danger { background: color-mix(in srgb, var(--danger, #d93f3f) 10%, var(--surface, #fff)); }
body.pc-root:not(.pn-adm) .pc-alert--warning { background: color-mix(in srgb, #e0a100 14%, var(--surface, #fff)); }
body.pc-root:not(.pn-adm) .pc-alert--success { background: color-mix(in srgb, var(--success, #0a7f55) 10%, var(--surface, #fff)); }
/* the picked option card: a deeper fill, never an edge */
body.pc-root:not(.pn-adm) :is(.fnb-to__opt, .fp-rn__type):has(input:checked) { background: var(--fp-tint-2, var(--surface-3)) !important; }

/* -- 11b. fields: a filled well, no edge; a clear ring on focus only -- */
body.pc-root:not(.fp-ref):not(.pn-adm) :is(input.pc-input, select.pc-input, textarea.pc-input, .pc-select:not(.pc-selchip) > select, main input[type="search"]:not(.pc-sr)) {
  border: 0 !important; background-color: var(--fp-field-bg, var(--surface-2)); box-shadow: none; }
body.pc-root:not(.fp-ref):not(.pn-adm) :is(input.pc-input, select.pc-input, textarea.pc-input, .pc-select:not(.pc-selchip) > select):hover:not(:focus):not(:disabled):not([readonly]) { background-color: var(--fp-field-bg-h, var(--surface-3)); }
body.pc-root:not(.fp-ref):not(.pn-adm) :is(input.pc-input, select.pc-input, textarea.pc-input, .pc-select:not(.pc-selchip) > select, main input[type="search"]:not(.pc-sr)):focus {
  background-color: var(--surface, #fff); outline: 2px solid var(--focus-ring, var(--accent)) !important; outline-offset: 1px !important; }
body.pc-root:not(.fp-ref):not(.pn-adm) :is(input.pc-input, select.pc-input, textarea.pc-input)[aria-invalid="true"] { outline: 2px solid var(--danger) !important; outline-offset: 1px; }
body.pc-root:not(.fp-ref):not(.pn-adm) :is(input.pc-input, textarea.pc-input):is([readonly], .fp-pe__ro, .fp-mp__ro) { background-color: transparent; }
body.pc-root:not(.fp-ref):not(.pn-adm) :is(.pn-help__searchbox, .fp-top__search, .pn-nf__search) { background-color: var(--fp-field-bg, var(--surface-2)); }
body.pc-root:not(.fp-ref):not(.pn-adm) :is(.pn-help__searchbox, .pn-nf__search):focus-within { box-shadow: 0 0 0 2px var(--focus-ring, var(--accent)) !important; }
body.pc-root.fp-ds:not(.fp-ref) main input[type="checkbox"]:not(:checked):not(.pc-sr):not([class*="switch"]) { box-shadow: none; }

/* -- 11c. depth: white cards on the ground carry one soft blue lift (light); a card inside a card is a flat tint -- */
html[data-theme="light"] body.pc-root:not(.pn-adm):not(.fp-ref) main :is(.pn-panel, .pk-panel, .fn-box, .fnb-card, .ms-card, .fp-card, .fp-box, .fp-rflow,
  .fp-plan-card, .pn-setnav, .fps-group, .fpp-banner, .fcd-next, .pc-faq > details, .pn-help__grid > li > a, .fp-quick, .fp-step, .tkn-pack, .pn-chatrail) {
  box-shadow: 0 1px 2px rgb(16 32 80 / .04), 0 8px 24px -12px rgb(20 56 150 / .16) !important; }
html[data-theme="light"] body.pc-root:not(.pn-adm):not(.fp-ref) main :is(.pn-panel, .pk-panel, .fn-box, .fnb-card, .ms-card, .fp-card, .fp-box, .fp-rflow, .fcd-next)
  :is(.pn-panel, .pk-panel, .fn-box, .fnb-card, .ms-card, .fp-card, .fp-box, .fp-rflow, .fps-group, .pc-faq > details, .tkn-pack, .fcd-next) { box-shadow: none !important; }

/* -- 11d. the shell, light: a white blurred top bar, the sidebar on the page ground, a white tab bar (all members, light) -- */
html[data-theme="light"] body.fp-shelled { --fp-side-bg: transparent; --fp-side-hover: rgb(10 20 48 / .05); --fp-side-kid: #55617c; }
html[data-theme="light"]:has(> body.fp-shelled) { background: #f4f7fe; }
html[data-theme="light"] body.fp-shelled .pc-header.fp-top, html[data-theme="light"] body.pc-root.fp-ds:not(.pc-guest):not(.pn-adm) .pc-header.pn-wizbar {
  background: rgb(255 255 255 / .82) !important; -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  border: 0 !important; box-shadow: 0 1px 0 rgb(10 20 48 / .04), 0 6px 20px -14px rgb(20 40 90 / .25) !important; }
html[data-theme="light"] body.fp-shelled .fp-side { background: transparent; }
@media (min-width: 1024px) { html[data-theme="light"] body.fp-has-side .fp-shell { background: none !important; } }
html[data-theme="light"] body.fp-shelled .fp-side__item { color: #34405a; font-weight: 550; }
html[data-theme="light"] body.fp-shelled .fp-side__item .fp-side__ico { color: #7a869f; }
html[data-theme="light"] body.fp-shelled .fp-side :is(.fp-side__item, .fp-side__kid).is-active { background: #e6ecf7; color: #0a1430; box-shadow: none; font-weight: 650; }
html[data-theme="light"] body.fp-shelled .fp-side :is(.fp-side__item, .fp-side__kid).is-active .fp-side__ico { color: #1a5cff; }
html[data-theme="light"] body.fp-shelled .fp-side .fp-side__item.is-active .fp-side__n { background: #1a5cff; color: #fff; }
html[data-theme="light"] body.fp-shelled .fp-side .fp-pro { background: #fff; box-shadow: 0 8px 24px -12px rgb(20 56 150 / .16); }
html[data-theme="light"] body.fp-shelled .pn-tabbar.fp-tabs { background: rgb(255 255 255 / .92) !important; -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  border: 0 !important; box-shadow: 0 -8px 24px -16px rgb(20 40 90 / .3) !important; }
html[data-theme="light"] body.fp-shelled .fp-tabs :is(a, button) { color: #7a869f; }
html[data-theme="light"] body.fp-shelled .fp-tabs :is(a, button):is(.is-active, [aria-current="page"]) { color: #0a1430; }
html[data-theme="light"] body.fp-shelled .fp-tabs :is(a:not(.fp-tabs__add), button) .pn-tab__pill { position: relative; background: none !important; }
html[data-theme="light"] body.fp-shelled .fp-tabs :is(a, button):is(.is-active, [aria-current="page"]):not(.fp-tabs__add) .pn-tab__pill { color: #1a5cff; }
html[data-theme="light"] body.fp-shelled .fp-tabs :is(a, button):is(.is-active, [aria-current="page"]):not(.fp-tabs__add) .pn-tab__pill::after {
  content: ""; position: absolute; left: 50%; bottom: -3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #1a5cff; }
html[data-theme="light"] body.fp-shelled .fp-tabs a.fp-tabs__add .pn-tab__pill { background: #1a5cff; color: #fff; box-shadow: 0 6px 14px -6px rgb(26 92 255 / .6); }
html[data-theme="light"] body.fp-shelled .pc-footer { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html[data-theme="light"] body.fp-shelled .pc-footer a { color: #55617c; }

/* -- 11e. calm: one accent, used sparingly. Primary keys a solid blue (no glow); second keys ink on a quiet grey-blue well;
      labels, kickers and head icons grey, never blue; head weights one step lighter -- */
html[data-theme="light"] body.pc-root.fp-ds.fp-ds.fp-ds:not(.pn-adm):not(.pc-guest) :is(.pc-btn--primary, .pc-btn--premium, .pc-btn--on-accent, .fp-top__add, .fp-pro__btn):not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
  background: #1a5cff; color: #fff; box-shadow: 0 1px 2px rgb(16 32 80 / .12); }
html[data-theme="light"] body.pc-root.fp-ds.fp-ds.fp-ds:not(.pn-adm):not(.pc-guest) :is(.pc-btn--primary, .pc-btn--premium, .pc-btn--on-accent, .fp-top__add, .fp-pro__btn):not(:disabled):not([aria-disabled="true"]):not(.is-disabled):hover {
  background: #0a43d6; color: #fff; }
html[data-theme="light"] body.pc-root.fp-ds.fp-ds.fp-ds:not(.pn-adm):not(.pc-guest) main :is(.pc-btn--ink, .pc-btn--line, .pc-btn--secondary, .pc-btn--soft, .pc-btn--white) { color: #0a1430; }
html[data-theme="light"] body.pc-root.fp-ds.fp-ds.fp-ds:not(.pn-adm):not(.pc-guest) {
  --focus-ring: #1a5cff; --fp-toast-bg: #0a1430; --fp-toast-ink: #FFFFFF; --fp-toast-sh: 0 14px 36px rgb(16 32 80 / .24);
  --fp-h1: 24px; --fp-h2: 17px; --fp-h3: 15px; }
@media (min-width: 701px) { html[data-theme="light"] body.pc-root.fp-ds.fp-ds.fp-ds:not(.pn-adm):not(.pc-guest) { --fp-h1: 28px; } }
html[data-theme="light"] body.pc-root.fp-ds.fp-ds.fp-ds:not(.pn-adm):not(.pc-guest):not(#fp-x) main :is(h1, .pc-h1):not(.pc-sr) { font-weight: 700 !important; letter-spacing: -.022em !important; }
html[data-theme="light"] body.pc-root.fp-ds.fp-ds.fp-ds:not(.pn-adm):not(.pc-guest):not(#fp-x) main :is(h2, h3, .pc-h2, .pc-h3, .pc-h-card):not(.pc-sr) { font-weight: 650 !important; letter-spacing: -.012em !important; color: #0a1430; }
/* head icons, kickers and small labels: grey (they were blue, every card had a blue glyph) */
html[data-theme="light"] body.pc-root.fp-ds:not(.pn-adm):not(.pc-guest) main :is(h2, h3, .pc-h-card, .fn-box__h) > .pc-ico { color: #8a95ab; }
html[data-theme="light"] body.pc-root.fp-ds:not(.pn-adm):not(.pc-guest) main :is(.fp-step__kick, .fcd-next__kick, .pc-kicker, .fn-hi__kick, .fcd-kick, [class*="__kick"]) { color: #66738f !important; text-transform: none; letter-spacing: 0; }
/* icon discs: one neutral grey-blue well with a grey glyph (no blue bubbles everywhere) */
html[data-theme="light"] body.pc-root.fp-ds:not(.pn-adm):not(.pc-guest) main :is(.fcd-next__ico, .sg-door__ico, .pn-mdvf__ico, .fps-tile, .fp-step__ico, .fp-qrow__ico, .pn-lhstat__ico, .fn-ref__ico, .pc-empty__ico, .pn-empty__ico, .fp-empty__ico) {
  background: #eef1f6 !important; color: #55617c !important; }
html[data-theme="light"] body.pc-root.fp-ds.fp-ds.fp-ds:not(.pn-adm):not(.pc-guest) :is(.pc-empty, .pn-empty, .fp-req__empty, .fp-tl__empty) > .pc-ico:first-child { background: #eef1f6; color: #55617c; }

/* -- 11g. the creator dashboard, calm (owner «wirkt unruhig»): one primary block (the next move), then requests, then a quiet
      second column. The side boxes lose their cards (a head and its lines on the ground), head icons go, Media Studio's promo box
      goes (Media Studio is in the nav), the next move is a plain white card with a grey glyph -- */
html[data-theme="light"] body.fp-ds .fn-d .fn-box__h > .pc-ico { display: none; }
html[data-theme="light"] body.fp-ds .fn-d :is(.fn-box__h, .fcd-act__h) { font-size: 17px !important; font-weight: 650 !important; }
html[data-theme="light"] body.fp-ds .fn-d .fcd-hi__h, html[data-theme="light"] body.fp-ds .fn-d .fn-hi__h { font-size: 28px !important; font-weight: 700 !important; }
html[data-theme="light"] body.fp-ds .fn-d .fcd-next { background: var(--surface, #fff) !important; padding: 24px !important; }
html[data-theme="light"] body.fp-ds .fn-d .fcd-next .fcd-next__h { font-size: 20px !important; }
html[data-theme="light"] body.fp-ds .fn-d .fcd-studio { display: none; }
html[data-theme="light"] body.fp-ds .fn-d .fcd-ideas { background: transparent !important; box-shadow: none !important; padding-inline: 0 !important; }
@media (min-width: 1000px) {
  html[data-theme="light"] body.fp-ds .fn-d__side { gap: 32px; }
  html[data-theme="light"] body.pc-root.fp-ds main .fn-d .fn-d__side > :is(.fn-box, section) { background: transparent !important; box-shadow: none !important; padding: 0 !important; border-radius: 0; }
  html[data-theme="light"] body.fp-ds .fn-d__side :is(.fn-box__h, h2) { font-size: 15px !important; font-weight: 650 !important; color: #0a1430; }
  html[data-theme="light"] body.fp-ds .fn-d__side :is(p, .pc-sub, small) { color: #55617c; }
}
/* request type badges: a quiet white pill with the ink word (they were solid blue blocks competing with the keys) */
html[data-theme="light"] body.pc-root.fp-ds main .fn-rq__type { background: #fff !important; color: #34405a !important; box-shadow: none; }
html[data-theme="light"] body.pc-root.fp-ds main .fn-rq__type .pc-ico { color: #7a869f !important; }
/* a grid of creator cards had a solid blue key under every card (12+ blue blocks per screen): the card key is the quiet well
   with the ink word, blue only under the pointer — one accent, used sparingly */
html[data-theme="light"] body.pc-root.fp-ds.fp-ds.fp-ds:not(.pn-adm):not(.pc-guest) main .pc-btn.pc-btn.fpbx-cardreq:not(:disabled):not([aria-disabled="true"]) { background: #eef1f6; color: #0a1430; box-shadow: none; }
html[data-theme="light"] body.pc-root.fp-ds.fp-ds.fp-ds:not(.pn-adm):not(.pc-guest) main .pc-btn.pc-btn.fpbx-cardreq:not(:disabled):not([aria-disabled="true"]):hover { background: #1a5cff; color: #fff; }
/* -- 11f. fixes from the walk -- */
/* the picked request type (New request): the accent veil put the grey line at 4.1:1 — the second tint (4.9:1), the accent edge */
html[data-theme="light"] body.pc-root.fp-ds:not(.pc-guest) .fp-rn__type:has(input:checked) { background: #d9e6ff; }
/* Media Studio's category and platform tabs: the picked one was the black ink (no other selected key inside is black) — the
   ONE selected style, the accent with white */
html[data-theme="light"] body.pc-root.fp-ds:not(.pc-guest) .ms-tabs button.is-on { background: var(--accent); color: var(--on-accent); box-shadow: none; }
/* Dark (a member's own choice): the same outside key (blue, white word) and the sidebar's lit row; the focus ring sky */
html[data-theme="dark"] body.pc-root.fp-ds.fp-ds.fp-ds:not(.pn-adm):not(.pc-guest) :is(.pc-btn--primary, .pc-btn--premium, .pc-btn--on-accent, .fp-top__add, .fp-pro__btn):not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
  background: linear-gradient(180deg, #4a88ff 0%, #1a5cff 55%, #1450ef 100%); color: #fff; box-shadow: inset 0 1px 0 rgb(190 215 255 / .45), 0 8px 20px -8px rgb(26 92 255 / .7); }
html[data-theme="dark"] body.pc-root.fp-ds.fp-ds.fp-ds:not(.pn-adm):not(.pc-guest) :is(.pc-btn--primary, .pc-btn--premium, .pc-btn--on-accent, .fp-top__add, .fp-pro__btn):not(:disabled):not([aria-disabled="true"]):not(.is-disabled):hover {
  background: linear-gradient(180deg, #3b7bff 0%, #0a43d6 100%); color: #fff; }
html[data-theme="dark"] body.fp-shelled .fp-side :is(.fp-side__item, .fp-side__kid).is-active { background: linear-gradient(180deg, #4a88ff 0%, #1a5cff 55%, #1450ef 100%); color: #fff; }
html[data-theme="dark"] body.fp-shelled .fp-side :is(.fp-side__item, .fp-side__kid).is-active .fp-side__ico { color: #fff; }
html[data-theme="dark"] body.pc-root.fp-ds.fp-ds.fp-ds:not(.pn-adm):not(.pc-guest) { --focus-ring: #6fd2ff; --fp-toast-bg: #193566; --fp-toast-ink: #eef3ff; }
/* Edit profile «Choose what buyers see» (a <details class="fp-pe__more">) shares its class with the photo menu's round 34 px
   key: it drew as a 34 px navy 60 % disc with the deep blue words over it (1.9:1). The fold is a plain block again. */
html body.pc-root.fp-ds .fp-pe details.fp-pe__more, html body.pc-root.fp-ds .fp-pe details.fp-pe__more:hover {
  display: block; width: auto; height: auto; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: inherit; place-items: normal; position: static; cursor: auto; }
html body.pc-root.fp-ds .fp-pe details.fp-pe__more::after, html body.pc-root.fp-ds .fp-pe details.fp-pe__more::before { content: none; }
html body.pc-root.fp-ds .fp-pe details.fp-pe__more > .fp-pe__moresum { color: var(--accent-text, var(--accent)); }

/* ==== 12. ONE dialog look (owner 12.11. pm «sieht beschissen aus», the vault teaser picker): every sheet and modal on feet —
   native <dialog>, .pc-modal, the chat / offer / vault / Media Studio sheets. Light: a white sheet, a soft shadow, 20 px radius,
   ink at 40 % with a slight blur behind. Dark: the dark surface ladder. No edges. The head 19 px with a round 44 px close key
   top right, body text in the second ink, keys right-aligned (stacked full width on phones), disabled readable.
   Photo and clip viewers keep their black. */
body.pc-root:not(.pn-adm) :is(dialog.pn-sheet, dialog.fp-modal, dialog.fv-sheet, dialog.sg__sheet, dialog.ms-dlg, dialog.pc-modal, dialog.fpb-cm, .pc-modal__box, dialog.pc-sheet, dialog.pn-modal) {
  background: var(--surface, #fff) !important; color: var(--ink) !important; border: 0 !important; outline: 0 !important;
  border-radius: 20px; box-shadow: 0 2px 6px rgb(16 32 80 / .06), 0 28px 64px -18px rgb(16 32 80 / .32) !important; color-scheme: light dark; }
html[data-theme="dark"] body.pc-root:not(.pn-adm) :is(dialog.pn-sheet, dialog.fp-modal, dialog.fv-sheet, dialog.sg__sheet, dialog.ms-dlg, dialog.pc-modal, dialog.fpb-cm, .pc-modal__box, dialog.pc-sheet, dialog.pn-modal) {
  background: #0b1a3d !important; color: #eef3ff !important; box-shadow: 0 28px 64px -18px rgb(0 0 0 / .6) !important; }
body.pc-root:not(.pn-adm) :is(dialog.pn-sheet, dialog.fp-modal, dialog.fv-sheet, dialog.sg__sheet, dialog.ms-dlg, dialog.pc-modal, dialog.fpb-cm, dialog.pc-sheet, dialog.pn-modal)::backdrop {
  background: rgb(10 20 48 / .4) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
html[data-theme="dark"] body.pc-root:not(.pn-adm) :is(dialog.pn-sheet, dialog.fp-modal, dialog.fv-sheet, dialog.sg__sheet, dialog.ms-dlg, dialog.pc-modal, dialog.fpb-cm, dialog.pc-sheet, dialog.pn-modal)::backdrop {
  background: rgb(2 6 20 / .62) !important; }
@media (max-width: 699.98px) {
  body.pc-root:not(.pn-adm) :is(dialog.pn-sheet, dialog.fp-modal, dialog.fv-sheet, dialog.sg__sheet, dialog.ms-dlg) { border-radius: 20px 20px 0 0; }
}
/* the vault sheets' frame, here too (the picker opened with pnew-fpvault.css missing: a browser-default box, a bullet line,
   the close key under the head) */
body.pc-root dialog.fv-sheet { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow-y: auto; overscroll-behavior: contain; }
body.pc-root dialog.fv-sheet.fv-sheet--view { width: min(880px, calc(100vw - 32px)); }
@media (max-width: 699.98px) { body.pc-root dialog.fv-sheet, body.pc-root dialog.fv-sheet.fv-sheet--view { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; } }
body.pc-root dialog.fv-sheet:not([open]) { display: none; }
body.pc-root dialog.fv-sheet .fv-sheet__top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 16px 16px 8px 24px; background: inherit; }
body.pc-root dialog.fv-sheet .fv-sheet__body { display: grid; gap: 12px; padding: 0 24px 24px; }
body.pc-root dialog.fv-sheet :is(.fv-grid, ul) { list-style: none; margin: 0; padding: 0; }
/* the head and the close key */
body.pc-root:not(.pn-adm) dialog :is(.fv-sheet__h, .fp-modal__h, .pn-sheet__h, .pn-sheet__head h2, .sg__sheet h2, .ms-dlg h2) {
  flex: 1; min-width: 0; margin: 0; font: 650 19px/1.3 "Inter", var(--body), system-ui, sans-serif !important; letter-spacing: -.012em; color: var(--ink) !important; }
body.pc-root:not(.pn-adm) dialog :is(.fv-sheet__x, .fp-modal__x, .pn-sheet__x, .pc-modal__x, .fp-of__close, .sg__x, .ms-dlg__x) {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; min-width: 44px; margin-left: auto; padding: 0; border: 0 !important; border-radius: 50% !important;
  background: var(--surface-2) !important; color: var(--ink) !important; box-shadow: none !important; cursor: pointer; }
body.pc-root:not(.pn-adm) dialog :is(.fv-sheet__x, .fp-modal__x, .pn-sheet__x, .pc-modal__x, .fp-of__close, .sg__x, .ms-dlg__x):hover { background: var(--surface-3) !important; }
html[data-theme="dark"] body.pc-root:not(.pn-adm) dialog :is(.fv-sheet__x, .fp-modal__x, .pn-sheet__x, .pc-modal__x, .fp-of__close, .sg__x, .ms-dlg__x) { background: #11234d !important; color: #eef3ff !important; }
/* body text in the second ink */
body.pc-root:not(.pn-adm) dialog :is(p, .pc-sub, .pc-help):not(.pc-alert):not([class*="err"]) { color: var(--ink-2); }
/* keys: right-aligned on a desktop, stacked full width on a phone (the primary on top) */
body.pc-root:not(.pn-adm) dialog :is(.fv-sheet__keys, .fp-modal__foot, .pn-sheet__keys, .pc-modal__acts, .ms-dlg__keys) { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }
@media (max-width: 699.98px) {
  body.pc-root:not(.pn-adm) dialog :is(.fv-sheet__keys, .fp-modal__foot, .pn-sheet__keys, .pc-modal__acts, .ms-dlg__keys) { flex-direction: column-reverse; align-items: stretch; }
  body.pc-root:not(.pn-adm) dialog :is(.fv-sheet__keys, .fp-modal__foot, .pn-sheet__keys, .pc-modal__acts, .ms-dlg__keys) > .pc-btn { width: 100%; justify-content: center; }
}
body.pc-root:not(.pn-adm) dialog :is(.fv-sheet__keys, .fp-modal__foot, .pn-sheet__keys) .pc-btn:is(.pc-btn--ghost, .pc-btn--quiet, .pc-btn--soft) { background: var(--surface-2) !important; color: var(--ink) !important; }
/* disabled: clearly off, still readable (the well with the second ink, 5.5:1 light / 8:1 dark) */
html body.pc-root.pc-root:not(.pn-adm) dialog .pc-btn:is(:disabled, [aria-disabled="true"], .is-disabled) {
  background: var(--surface-2) !important; color: var(--ink-2) !important; box-shadow: none !important; opacity: 1 !important; cursor: not-allowed; filter: none !important; }
/* the vault picker's empty state: a small icon, a head, one line, the upload key — and no keys row or rule under it */
body.pc-root dialog.fv-sheet .fv-pick__empty { display: grid; justify-items: center; gap: 8px; padding: 24px 8px 8px; text-align: center; grid-column: 1 / -1; }
body.pc-root dialog.fv-sheet .fv-pick__eico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
body.pc-root dialog.fv-sheet .fv-pick__eh { font: 650 16px/1.3 "Inter", var(--body), sans-serif; color: var(--ink); }
body.pc-root dialog.fv-sheet .fv-pick__ep { max-width: 34ch; margin: 0; font: 400 14px/1.5 "Inter", var(--body), sans-serif; color: var(--ink-2); }
body.pc-root dialog.fv-sheet .fv-pick__empty > .pc-btn { margin-top: 8px; }
body.pc-root dialog.fv-sheet.is-empty :is(.fv-sheet__keys, [data-fv-pick-rule]) { display: none; }

/* ==== 13. chats on a desktop (owner 12.11. pm «gequetscht», dark + light): a clean two-pane layout from 1024 px — the list
   320–380 px, the thread fills the rest (head, messages and composer whole), «Pick a chat» when none is open; «Blocked
   accounts» in the ⋯ menu (templates/partials/chatrail.php); rows with a 44 px round avatar, name + time, the last line
   ellipsed, an unread dot, 12–14 px padding, no lines between rows. Phones keep list → thread. */
@media (min-width: 1024px) {
  body.fp-ds :is(.pn-chatshell--thread, .pn-chatshell--inbox.is-msgsplit) { display: grid; grid-template-columns: clamp(320px, 27vw, 380px) minmax(0, 1fr); gap: 16px; align-items: stretch; min-width: 0; }
  body.fp-ds :is(.pn-chatshell--thread, .pn-chatshell--inbox.is-msgsplit) > * { min-width: 0; }
  body.fp-ds .pn-chatshell--thread > .pn-chatpage { min-width: 0; width: auto; max-width: none; display: flex; flex-direction: column; }
  body.fp-ds .pn-chatshell--thread > .pn-chatpage .pn-msgs { min-width: 0; }
  body.fp-ds .pn-chatrail.is-rail { position: relative; }
  body.fp-ds .is-rail .pn-inbox__bar:not(:has(.pn-inbox__search)) { position: absolute; top: 14px; right: 12px; display: flex; gap: 4px; margin: 0; padding: 0; }
  body.fp-ds .is-rail .pn-inbox__bar:not(:has(.pn-inbox__search)):not(:has(details, .pc-chip, a, form)) { display: none; }
}
/* the rows: avatar, two lines, the dot; no edges, a hover fill */
body.fp-ds .pn-threadrow { border: 0 !important; box-shadow: none !important; border-radius: 14px; }
body.fp-ds .pn-threadrow::before, body.fp-ds .pn-threadrow::after { border: 0 !important; }
body.fp-ds .pn-threadrow .pn-threadrow__link { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 13px 12px; }
body.fp-ds .pn-threadrow .pc-avatar { width: 44px !important; height: 44px !important; min-width: 44px; border-radius: 50% !important; display: grid; place-items: center; overflow: hidden;
  font: 650 16px/1 "Inter", var(--body), sans-serif; background: #dfe6f4 !important; color: #34405a !important; }
html[data-theme="dark"] body.fp-ds .pn-threadrow .pc-avatar { background: #173062 !important; color: #eef3ff !important; }
body.fp-ds .pn-threadrow .pc-avatar img { width: 100%; height: 100%; object-fit: cover; }
body.fp-ds .pn-threadrow .pn-row__main { display: grid; gap: 3px; min-width: 0; }
body.fp-ds .pn-threadrow .pn-threadrow__top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
body.fp-ds .pn-threadrow .pn-threadrow__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
body.fp-ds .pn-threadrow .pn-threadrow__top time { flex: none; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
body.fp-ds .pn-threadrow .pn-threadrow__bottom { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; color: var(--ink-2); }
body.fp-ds .pn-threadrow .pn-threadrow__bottom > :not(:last-child), body.fp-ds .pn-threadrow .pn-threadrow__bottom > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.fp-ds .pn-threadrow:hover { background: var(--surface-2); }
body.fp-ds .pn-threadrow.is-current { background: var(--surface-2); }
html[data-theme="dark"] body.fp-ds .pn-threadrow:is(:hover, .is-current) { background: #11234d; }