/* ===== Public creator profile (F02) — v7 redesign =====
 * Loaded only by routes/profilepage.ts (profilePageHandler). Every token used
 * here (--a1..--a3, --t1..--t3, --head, --acc-glow, --border2, --danger,
 * --warning, --success, --mono, --display, --sans, --grad, --dim, --faint) is
 * defined globally in /assets/tokens.css + /assets/v7/base.css, so this file
 * adds no new variables. Design source: the v7 Profile handoff. */

.pf-main { position:relative; z-index:2; padding:clamp(30px,5vh,52px) 0 90px; }
.pf-wrap { max-width:920px; }

/* ---------- world strip (the live trust-network banner) ---------- */
.world-strip { position:relative; height:170px; border-radius:18px 18px 0 0; overflow:hidden;
  background:rgba(7,7,16,.5); border:1px solid var(--border); border-bottom:0; }
.world-strip canvas { width:100%; height:100%; display:block; opacity:.8; }
.ws-lbl { position:absolute; left:14px; top:10px; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
  text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.8); }
.ws-tag { position:absolute; left:14px; top:26px; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.8); }
.ws-live { position:absolute; right:14px; top:10px; display:inline-flex; align-items:center; gap:6px;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--danger); text-shadow:0 1px 3px rgba(0,0,0,.9); }
.ws-live i { width:7px; height:7px; border-radius:50%; background:var(--danger); box-shadow:0 0 8px var(--danger); }
@media (prefers-reduced-motion: no-preference) { .ws-live i { animation:wsRec 1.6s ease-in-out infinite; } }
@keyframes wsRec { 0%,100% { opacity:1; } 50% { opacity:.35; } }
.ws-tag.ok { color:var(--faint); }
.ws-tag.bad { color:var(--danger); }
.world-strip.bad { border-color:rgba(248,113,113,.25); }
.world-strip.hot canvas { cursor:pointer; }
.ws-tip { position:absolute; transform:translate(-50%,-100%); z-index:5; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 11px; border-radius:10px;
  background:rgba(12,12,22,.97); border:1px solid color-mix(in srgb,var(--a3) 40%,transparent);
  box-shadow:0 10px 30px -8px rgba(0,0,0,.8), 0 0 12px color-mix(in srgb,var(--a3) 18%,transparent); white-space:nowrap; }
.ws-tip.below { transform:translate(-50%,0); }
.ws-tip b { font-family:var(--mono); font-size:.7rem; font-weight:600; color:var(--t3); }
.ws-tip span { font-size:.62rem; color:var(--dim); }

/* ---------- hero: strip fused with identity banner ---------- */
.pf-hero { position:relative; display:flex; flex-direction:column; }
.pf-hero .world-strip { flex:0 0 auto; }
.pf-hero .pf-banner { flex:1; justify-content:center; }
.pf-banner { display:flex; flex-direction:column; align-items:stretch; gap:4px; padding:10px 24px 18px; border-radius:0 0 18px 18px;
  margin:0; position:relative; z-index:3; background:rgba(13,13,24,.88); overflow:visible; }
.pf-banner.good { border-color:rgba(52,211,153,.3); }
.pf-banner.good::before { background:linear-gradient(120deg,var(--success),var(--a3)); opacity:.6; }
.pf-banner.danger { border-color:rgba(248,113,113,.35); }

.pf-av { width:88px; height:88px; flex:0 0 auto; border-radius:26px; background:var(--grad);
  align-self:flex-start; margin-top:-34px; position:relative; z-index:4; border:2px solid rgba(16,16,28,.85);
  display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:2.1rem; color:#fff;
  overflow:hidden; box-shadow:0 0 18px var(--acc-glow), 0 0 0 1.5px color-mix(in srgb,var(--success) 35%,transparent); }
.pf-av img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.pf-av.bad { background:none; border:2px solid var(--danger); color:var(--danger); box-shadow:0 0 18px rgba(248,113,113,.3); }

.pf-bmain { display:flex; align-items:center; gap:18px; padding-top:0; }
.pf-id { flex:1; min-width:0; }
.pf-handle { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pf-handle h1 { font-size:clamp(1.4rem,3vw,1.85rem); }

.pf-line2 { display:flex; align-items:center; gap:9px; margin-top:5px; }
.pf-line2 > span.m, .pf-line2 > a.m { font-size:.7rem; letter-spacing:.06em; color:var(--faint); }
.pf-line2 .sep { width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.18); flex:0 0 auto; }
.pf-meta { font-size:.66rem; letter-spacing:.12em; margin-top:0; }
.pf-meta.ok { color:var(--success); }
.pf-meta.bad { color:var(--danger); }
.pf-site { align-self:center; font-size:.68rem; letter-spacing:.06em; color:var(--t3); text-decoration:none; }
.pf-site:hover { text-decoration:underline; text-underline-offset:3px; }

.pf-bio { font-size:.88rem; color:var(--text); margin:10px 0 2px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; line-height:1.55; max-width:72ch; text-wrap:pretty; }

.pf-socialrow { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px; margin-top:auto; padding-top:12px; border-top:1px solid var(--border); }
.pf-soc { width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  border:1px solid color-mix(in srgb,var(--success) 30%,transparent); color:var(--success); background:color-mix(in srgb,var(--success) 5%,transparent); cursor:default; }
.pf-soc svg { width:13px; height:13px; }
.pf-soc.sm { width:30px; height:30px; border-radius:9px; }
.pf-soc.sm svg { width:14px; height:14px; }
.pf-soc.link { cursor:pointer; }
.pf-soc.link:hover { border-color:color-mix(in srgb,var(--success) 55%,transparent); background:color-mix(in srgb,var(--success) 10%,transparent); }
.pf-actions-br { margin-left:auto; display:inline-flex; align-items:center; gap:6px; }
.pf-since { font-size:.66rem; letter-spacing:.08em; color:var(--faint); }

/* verification badge (4 notches) + verdict pills */
.verdict { font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.14em; padding:4px 10px; border-radius:999px; }
.verdict.bad  { color:var(--danger);  border:1px solid rgba(248,113,113,.45); }
.verdict.good { color:var(--success); border:1px solid rgba(52,211,153,.4); }
.verdict.lg { font-size:.68rem; padding:5px 12px; }
.pf-lvl { display:inline-flex; align-items:center; gap:8px; padding:5px 11px; border-radius:999px; cursor:default;
  color:var(--success); border:1px solid color-mix(in srgb,var(--success) 38%,transparent);
  background:color-mix(in srgb,var(--success) 5%,transparent); }
.pf-lvl svg { width:15px; height:15px; }
.pf-notch { display:inline-flex; gap:3px; }
.pf-notch i { width:5px; height:12px; border-radius:99px; background:rgba(255,255,255,.1); }
.pf-notch i.on { background:var(--success); box-shadow:0 0 6px color-mix(in srgb,var(--success) 60%,transparent); }

/* owner cluster (share / report / edit) */
.pf-ownrow { position:absolute; top:12px; right:14px; z-index:5; display:flex; flex-direction:row; align-items:center; gap:7px; }
.pf-actions-tr { display:inline-flex; align-items:center; gap:6px; }
.pf-ownrow .pf-obtn { height:30px; padding:0 12px; }
.pf-obtn { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:none; border:1px solid var(--border2); border-radius:9px; cursor:pointer; color:var(--text);
  font-family:var(--sans); font-weight:600; font-size:.72rem; padding:5px 12px; transition:border-color .15s, color .15s; white-space:nowrap; text-decoration:none; }
.pf-obtn:hover { border-color:var(--a1); color:#fff; }
.pf-flag { width:30px; height:30px; border-radius:9px; border:1px solid var(--border); background:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; color:var(--faint); transition:color .15s, border-color .15s, background .15s; }
.pf-flag svg { width:14px; height:14px; }
.pf-flag:hover { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 50%,transparent); background:color-mix(in srgb,var(--danger) 6%,transparent); }
.pf-flag.share:hover { color:var(--t3); border-color:color-mix(in srgb,var(--a3) 50%,transparent); background:color-mix(in srgb,var(--a3) 7%,transparent); }

/* listed-variant inline stat row + dial */
.pf-dialwrap { display:flex; flex-direction:column; align-items:center; gap:5px; flex:0 0 auto; }
.pf-dialcap { font-size:.54rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.dial { position:relative; width:86px; height:86px; flex:0 0 auto; }
.dial svg { width:100%; height:100%; display:block; }
.dial-num { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.dial-num b { font-family:var(--display); font-size:1.5rem; letter-spacing:-.02em; line-height:1; color:var(--head); }
.dial-num .m { font-size:.56rem; color:var(--faint); letter-spacing:.08em; }
.dial.bad .dial-num b { color:var(--danger); }
.pf-statrow { display:grid; grid-template-columns:repeat(3,1fr); margin-top:0; padding:15px 20px; }
.pf-statrow.in { padding:14px 0 0; margin-top:10px; border-top:1px solid var(--border); }
.pf-statrow div { display:flex; flex-direction:column; gap:3px; padding:2px 18px; border-left:1px solid var(--border); }
.pf-statrow div:first-child { border-left:0; padding-left:2px; }
.pf-statrow b { font-family:var(--display); font-weight:700; font-size:1.35rem; line-height:1.1; letter-spacing:-.02em; color:var(--head); white-space:nowrap; }
.pf-statrow b.bad { color:var(--danger); }
.pf-statrow div > span { font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }

/* ---------- page grid ---------- */
.pf-grid { display:grid; grid-template-columns:1fr 250px; grid-auto-flow:row dense; gap:14px; margin-top:0; align-items:start; max-width:100%; }
.pf-mainc, .pf-rail { display:contents; }
/* min-width:0 stops the belt's max-content width from blowing out the column. */
.pf-mainc > * { grid-column:1; align-self:start; min-width:0; }
.pf-rail > * { grid-column:2; align-self:start; min-width:0; }
.pf-mainc > .pf-hero { grid-row:1; align-self:stretch; }
.pf-rail > *:first-child { grid-row:1; align-self:stretch; display:flex; flex-direction:column; }
.pf-rail > *:first-child .sig-list { flex:1; display:flex; flex-direction:column; justify-content:space-evenly; }
.pf-card { padding:20px 22px; }
.pc-lbl { font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.pc-lbl.accent { color:var(--t3); }
.pc-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.pc-link { font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); }
.pc-link:hover { color:var(--text); }

/* ---------- tabbed rail card ---------- */
.pf-rail > .rail-tabbed { grid-row:1; align-self:stretch; height:0; min-height:100%; overflow:hidden; }
.rail-card { padding:18px 20px; display:flex; flex-direction:column; gap:10px; }
.rail-btn { width:100%; }
.rail-tabs { display:flex; gap:4px; }
.rtab { flex:1; background:none; border:1px solid var(--border); border-radius:9px; cursor:pointer; color:var(--faint);
  font-family:var(--mono); font-size:.6rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:6px 0;
  transition:color .15s, border-color .15s, background .15s; }
.rtab:hover { color:var(--text); }
.rtab.on { color:var(--t3); border-color:color-mix(in srgb,var(--a3) 45%,transparent); background:color-mix(in srgb,var(--a3) 7%,transparent); }
.rail-tabpane { flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:auto; margin-right:-13px; padding-right:13px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; }
.rail-tabpane[hidden] { display:none; }
@media (prefers-reduced-motion: no-preference) { .rail-tabpane.anim { animation:railPane .38s cubic-bezier(.22,.8,.3,1); } }
@keyframes railPane { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
.rail-tabpane .sig-list { flex:1; display:flex; flex-direction:column; justify-content:space-evenly; }
.rail-score { flex:1; display:flex; flex-direction:column; align-items:stretch; gap:12px; }
.rail-score .pf-dialwrap { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
/* Fill the card: the dial grows to the column width and shrinks to fit the height
   the card was given (it is pinned to the hero height, overflow:hidden), so it never
   overflows when the deal/vouch buttons are present and never leaves the score tab
   looking small and floating. aspect-ratio keeps it circular; container-type lets the
   score readout scale with it via cqmin. Mobile (auto-height card) is handled below. */
.rail-score .dial { flex:1 1 auto; min-height:0; width:auto; height:auto; aspect-ratio:1/1; max-width:200px; max-height:100%; margin:auto; container-type:size; }
.rail-score .dial-num b { font-size:27cqmin; }
.rail-score .dial-num .m { font-size:9cqmin; }
.rail-score-btns { display:flex; flex-direction:column; gap:8px; }
.rail-badges { padding-top:4px; display:flex; gap:8px; flex-wrap:wrap; }
.bchip { font-family:var(--mono); font-size:.72rem; color:var(--t3); border:1px solid color-mix(in srgb,var(--a3) 35%,transparent);
  border-radius:999px; padding:5px 12px; }
.rail-empty { font-size:.8rem; color:var(--faint); text-align:center; padding:14px 6px; }
.rail-card.appeal { border:1px dashed var(--border2); border-radius:16px; }
.rail-card.appeal p { font-size:.84rem; color:var(--dim); text-wrap:pretty; margin:2px 0; }

/* trust signals list */
.sig-list { display:flex; flex-direction:column; }
.sigr { display:flex; align-items:center; gap:9px; padding:8px 0; border-top:1px solid rgba(255,255,255,.05); }
.sigr:first-child { border-top:0; padding-top:2px; }
.sigr i { font-style:normal; width:14px; flex:0 0 auto; text-align:center; font-size:.72rem; color:var(--faint); }
.sigr i.ok { color:var(--success); }
.sigr i.bad { color:var(--danger); }
.sigr span { flex:1; min-width:0; font-size:.78rem; color:var(--dim); }
.sigr b { font-family:var(--mono); font-size:.76rem; font-weight:600; color:var(--head); }
.sigr b.ok { color:var(--success); }
.sigr b.bad { color:var(--danger); }
.sigr b.gold { color:var(--warning); }
.sigr b .star { font-style:normal; color:var(--warning); text-shadow:0 0 8px color-mix(in srgb,var(--warning) 60%,transparent); }

/* ---------- review belt ---------- */
.pf-mainc > .pf-revstrip { grid-column:1 / -1; padding:0; overflow:hidden; min-width:0; max-width:100%; }
.rev-pan { overflow:hidden; max-width:100%; margin-top:0; cursor:grab; touch-action:pan-y; user-select:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.rev-pan.scrubbing { cursor:grabbing; }
.rev-pan.scrubbing .rev-tile { pointer-events:none; }
.rev-belt { display:flex; gap:12px; width:max-content; will-change:transform; }
.rev-tile { flex:0 0 320px; min-width:0; display:flex; flex-direction:column; gap:5px; padding:13px 15px;
  border:1px solid var(--border); border-radius:13px; background:rgba(255,255,255,.02); }
.rev-tile .rev-h { display:flex; align-items:center; gap:9px; font-size:.86rem; color:var(--text); }
.rev-av { width:26px; height:26px; flex:0 0 auto; border-radius:50%; background:rgba(255,255,255,.07); border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:.72rem; color:var(--dim); }
.rev-who { display:flex; flex-direction:column; gap:1px; min-width:0; }
.rev-tile .rev-h b { font-weight:600; }
.rev-tile p { font-size:.82rem; color:var(--dim); line-height:1.55; text-wrap:pretty; margin:0; }
.pf-stars { font-size:.68rem; color:var(--warning); letter-spacing:.1em; }
.pf-stars i { font-style:normal; color:rgba(255,255,255,.14); }

/* ---------- ad + activity row ---------- */
.pf-adrow { grid-column:1 / -1; display:grid; grid-template-columns:250px 1fr; gap:14px; align-items:stretch; }
.pf-adrow > .pf-card.ad { display:flex; flex-direction:column; }
.pf-adrow > .pf-card.act { height:320px; display:flex; flex-direction:column; }
.pf-mainc > .pf-card.act { height:320px; display:flex; flex-direction:column; }
.pf-mainc > .pf-card.act.wide { grid-column:1 / -1; }
.pf-card.ad { border-color:color-mix(in srgb,var(--a3) 22%,transparent); }
.ad-ph { flex:1; position:relative; overflow:hidden; margin-top:10px; border:1.5px dashed color-mix(in srgb,var(--a3) 35%,transparent); border-radius:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center; padding:18px 14px;
  background:radial-gradient(circle at 50% 0%, color-mix(in srgb,var(--a2) 10%,transparent), transparent 65%),
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255,255,255,.018) 14px 28px); }
.ad-ph::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.05) 48%, transparent 62%); background-size:220% 100%; }
@media (prefers-reduced-motion: no-preference) { .ad-ph::after { animation:adSheen 4.5s linear infinite; } }
@keyframes adSheen { from { background-position:200% 0; } to { background-position:-80% 0; } }
.ad-orb { width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--a2) 13%,transparent); color:var(--t3); box-shadow:0 0 16px color-mix(in srgb,var(--a2) 30%,transparent); }
.ad-orb svg { width:20px; height:20px; }
.ad-ph b { font-family:var(--display); font-size:.95rem; color:var(--head); }
.ad-sub { font-size:.56rem; letter-spacing:.16em; color:var(--faint); }
.ad-soon { font-family:var(--mono); font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
  border:1px solid var(--border); border-radius:999px; padding:2px 7px; }
.pf-card.act .pf-acts { flex:1; overflow-y:auto; margin-top:8px; margin-right:-13px; padding-right:13px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; }
.pf-acts { display:flex; flex-direction:column; }
.pf-act { display:flex; align-items:baseline; gap:11px; padding:9px 0; border-top:1px solid rgba(255,255,255,.05); }
.pf-act:first-child { border-top:0; }
.act-tag { flex:0 0 auto; font-family:var(--mono); font-size:.56rem; font-weight:600; letter-spacing:.12em; padding:3px 9px; border-radius:999px; white-space:nowrap; text-transform:uppercase; }
.act-tag.cyan { color:var(--t3); border:1px solid color-mix(in srgb,var(--a3) 36%,transparent); }
.act-tag.blue { color:var(--t2); border:1px solid color-mix(in srgb,var(--a2) 40%,transparent); }
.act-tag.gold { color:var(--warning); border:1px solid color-mix(in srgb,var(--warning) 40%,transparent); }
.pf-act-t { flex:1; min-width:0; font-size:.84rem; color:var(--dim); }
.pf-act-t b { color:var(--text); font-weight:600; }
.pf-act-when { font-size:.64rem; color:var(--faint); white-space:nowrap; }

/* evidence timeline (listed variant — public blacklist record only) */
.ev-rows { display:flex; flex-direction:column; margin-top:10px; }
.ev-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid rgba(255,255,255,.05); }
.ev-row:first-child { border-top:0; }
.stepn { width:24px; height:24px; flex:0 0 auto; border-radius:50%; border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.66rem; color:var(--danger); }
.ev-t { flex:1; font-size:.88rem; color:var(--dim); }
.ev-d { color:var(--faint); font-size:.68rem; }
.pf-card.danger .pc-link { display:inline-block; margin-top:12px; }

/* ---------- modals ---------- */
.ovl { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  padding:24px 18px; background:rgba(4,4,10,.66); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  overflow-y:auto; animation:pfOvlIn .18s ease; }
.ovl[hidden] { display:none; }
@keyframes pfOvlIn { from { opacity:0; } to { opacity:1; } }
.modal { width:100%; max-width:520px; border-radius:20px; background:rgba(15,15,26,.97); margin:auto;
  border:1px solid var(--border2); box-shadow:0 40px 120px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  position:relative; animation:pfModIn .22s ease; }
@keyframes pfModIn { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } }
.modal::before { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--grad); opacity:.7; pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) top / 100% 2px no-repeat; mask:linear-gradient(#000 0 0) top / 100% 2px no-repeat; }
.mod-head { display:flex; align-items:flex-start; gap:14px; padding:18px 24px 16px; border-bottom:1px solid var(--border); }
.mod-head h2 { font-size:1.14rem; }
.mod-head p { font-size:.8rem; color:var(--dim); margin-top:5px; line-height:1.55; }
.mod-x { margin-left:auto; flex:0 0 auto; width:30px; height:30px; border-radius:9px; border:1px solid var(--border);
  background:none; cursor:pointer; color:var(--faint); font-size:.85rem; transition:color .15s, border-color .15s; }
.mod-x:hover { color:var(--text); border-color:var(--border2); }
.mod-body { display:flex; flex-direction:column; gap:14px; padding:18px 24px 20px; }
.mod-foot { display:flex; align-items:center; gap:9px; padding:14px 24px 18px; border-top:1px solid var(--border); }
.mod-foot .grow { flex:1; }

.pf-erow { display:flex; gap:14px; align-items:center; }
.pf-eav { position:relative; width:56px; height:56px; flex:0 0 auto; border-radius:16px; border:0; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--grad); font-family:var(--display); font-weight:700; font-size:1.2rem; color:#fff; box-shadow:0 0 16px var(--acc-glow); }
.pf-eav img { width:100%; height:100%; object-fit:cover; }
.pf-eav.ro { cursor:default; }
.pf-ro-note { font-size:.72rem; color:var(--faint); line-height:1.6; }
.pf-ro-note b { color:var(--dim); }
.pf-efr { display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; }
.pf-elb { font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.pf-ein { width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:11px; background:rgba(255,255,255,.03);
  color:var(--text); font-family:var(--sans); font-size:.86rem; outline:none; transition:border-color .15s; }
.pf-ein:focus { border-color:color-mix(in srgb,var(--a2) 55%,transparent); }
.pf-ein.area { resize:vertical; min-height:70px; line-height:1.55; }

/* share pills + preview card */
.pf-pills { display:flex; gap:6px; flex-wrap:wrap; }
.pf-pill { display:inline-flex; align-items:center; gap:6px; background:none; cursor:pointer; font-family:var(--sans);
  font-size:.76rem; font-weight:600; padding:6px 13px; border-radius:999px; color:var(--dim);
  border:1px solid var(--border2); transition:color .15s, border-color .15s, background .15s; }
.pf-pill:hover { color:var(--text); }
.pf-pill.on { color:var(--t3); border-color:color-mix(in srgb,var(--a3) 50%,transparent); background:color-mix(in srgb,var(--a3) 8%,transparent); }
.pf-pill .pgem { font-style:normal; color:var(--warning); font-size:.55rem; }
.pf-pill.prem.on { color:var(--warning); border-color:color-mix(in srgb,var(--warning) 45%,transparent); background:color-mix(in srgb,var(--warning) 8%,transparent); }
.pf-shav { width:38px; height:38px; flex:0 0 auto; border-radius:12px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--grad); font-family:var(--display); font-weight:700; font-size:1rem; color:#fff; }
.pf-shav img { width:100%; height:100%; object-fit:cover; }
.shc { position:relative; overflow:hidden; border-radius:18px; border:1px solid var(--border2); padding:17px 19px 15px;
  background:linear-gradient(150deg,#141021,#0b0d18 58%,#0a1017); display:flex; flex-direction:column; gap:13px; }
/* The card-style switcher (profile.js) hides inactive variants with the [hidden]
   attribute, which only removes them via the UA rule [hidden]{display:none}. The
   author `display:flex` above (and on .shb-wrap) outranks that UA rule, so every
   variant would stack and overflow the modal. Re-assert [hidden] at author level. */
.shc[hidden], .shb-wrap[hidden] { display:none; }
.shc::before { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--grad); opacity:.6; pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) top / 100% 2px no-repeat; mask:linear-gradient(#000 0 0) top / 100% 2px no-repeat; }
.shc-glow { position:absolute; right:-44px; top:-54px; width:180px; height:180px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb,var(--a1) 28%,transparent), transparent 70%); filter:blur(10px); }
.shc-head { position:relative; display:flex; align-items:center; gap:12px; }
.shc-who { flex:1; min-width:0; }
.shc-who b { display:block; font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--head); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shc-who > span { font-family:var(--mono); font-size:.64rem; letter-spacing:.05em; color:var(--success); }
.shc-mark { display:inline-flex; align-items:center; gap:6px; font-family:var(--display); font-weight:700; font-size:.78rem; color:var(--head); }
.shc-mark .mk { width:15px; height:17px; display:block; }
.shc-mark .mk svg { width:100%; height:100%; display:block; }
.shc-mark i { font-style:normal; color:var(--a2); }
.shc-stats { position:relative; display:grid; grid-template-columns:repeat(3,1fr); }
.shc-stats div { display:flex; flex-direction:column; gap:2px; padding:2px 16px; border-left:1px solid var(--border); }
.shc-stats div:first-child { border-left:0; padding-left:2px; }
.shc-stats b { font-family:var(--display); font-weight:700; font-size:1.3rem; line-height:1.1; letter-spacing:-.02em; color:var(--head); white-space:nowrap; }
.shc-stats b.grad { background:linear-gradient(120deg,var(--t1),var(--t2) 55%,var(--t3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.shc-stats b.cy { color:var(--t3); }
.shc-of { font-style:normal; font-size:.7rem; font-weight:600; opacity:.7; }
.shc-stats div > span { font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.shc-bar { position:relative; height:7px; border-radius:999px; margin:0 2px;
  background:linear-gradient(90deg,#f87171,#fbbf24 30%,#a3e635 52%,#34d399 74%,#22d3ee);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4); }
.shc-bar u { position:absolute; top:50%; width:13px; height:13px; border-radius:50%; background:#fff; border:2.5px solid #0b0b16;
  transform:translate(-50%,-50%); box-shadow:0 0 0 2px rgba(255,255,255,.5), 0 0 10px var(--acc-glow); }
.shc-foot { position:relative; display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.shc-tier { font-family:var(--mono); font-size:.64rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--t3); }
.shc-url { font-family:var(--mono); font-size:.62rem; color:var(--faint); }
.shc.holo::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.22; mix-blend-mode:screen;
  background:linear-gradient(120deg,#a855f7,#4d8dff 30%,#22d3ee 55%,#a855f7 85%); background-size:300% 300%; }
@media (prefers-reduced-motion: no-preference) {
  .shc.anim::before { animation:pfShcPulse 2.6s ease-in-out infinite; }
  .shc.anim::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.07) 46%,transparent 60%);
    background-size:240% 100%; animation:pfShcSheen 3.2s linear infinite; }
  .shc.holo::after { animation:pfHoloShift 7s linear infinite; }
}
@keyframes pfShcPulse { 0%,100% { opacity:.45; } 50% { opacity:1; } }
@keyframes pfShcSheen { from { background-position:220% 0; } to { background-position:-60% 0; } }
@keyframes pfHoloShift { from { background-position:0% 0%; } to { background-position:100% 100%; } }
.shb-wrap { display:flex; justify-content:center; padding:20px 0; border:1px dashed var(--border); border-radius:14px; }
.shb { display:inline-flex; align-items:center; gap:9px; padding:8px 15px; border-radius:999px; background:#0d0d19; border:1px solid var(--border2); }
.shb .mk { width:13px; height:15px; display:block; }
.shb .mk svg { width:100%; height:100%; display:block; }
.shb b { font-family:var(--display); font-weight:700; font-size:.82rem; color:var(--head); }
.shb b em { font-style:normal; color:var(--t3); }
.shb i { font-style:normal; font-family:var(--mono); font-size:.58rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.shc.compact { gap:11px; padding:14px 16px 13px; }
.shc-cstat { display:flex; align-items:baseline; gap:8px; flex:0 0 auto; }
.shc-cstat b { font-family:var(--display); font-weight:700; font-size:1.35rem; letter-spacing:-.02em;
  background:linear-gradient(120deg,var(--t1),var(--t2) 55%,var(--t3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.shc-cstat span { font-family:var(--mono); font-size:.6rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); }
.sh-prem-note { font-size:.72rem; color:var(--faint); line-height:1.5; }
.sh-prem-note b { color:var(--warning); }
.emb-row { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--border); border-radius:11px; background:rgba(255,255,255,.025); }
.emb-row.soon { opacity:.6; }
.emb-row .lb2 { font-family:var(--mono); font-size:.6rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); min-width:84px; flex:0 0 auto; }
.emb-row code { flex:1; min-width:0; font-family:var(--mono); font-size:.7rem; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.emb-row .soon-tag { font-family:var(--mono); font-size:.5rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); border:1px solid var(--border); border-radius:999px; padding:2px 7px; flex:0 0 auto; }

/* report reason cards */
.pf-why { display:flex; flex-direction:column; gap:6px; }
.pf-why-opt { display:flex; align-items:center; gap:10px; text-align:left; padding:9px 12px; border-radius:11px;
  border:1px solid var(--border); background:rgba(255,255,255,.02); cursor:pointer; font-family:var(--sans);
  font-size:.84rem; font-weight:500; color:var(--text); transition:border-color .15s, background .15s; }
.pf-why-opt:hover { border-color:var(--border2); }
.pf-why-opt.on { border-color:color-mix(in srgb,var(--danger) 45%,transparent); background:color-mix(in srgb,var(--danger) 5%,transparent); }
.pf-why-opt .dot { width:12px; height:12px; flex:0 0 auto; border-radius:50%; border:1.5px solid var(--border2); position:relative; }
.pf-why-opt.on .dot::after { content:""; position:absolute; inset:2.5px; border-radius:50%; background:var(--danger); }

/* toast */
.pf-toast { position:fixed; right:22px; bottom:22px; z-index:95; padding:10px 16px; border-radius:12px;
  background:rgba(14,24,19,.97); border:1px solid color-mix(in srgb,var(--success) 45%,transparent); color:var(--success);
  font-family:var(--mono); font-size:.74rem; font-weight:600; animation:pfToastIn .2s ease; max-width:340px; }
.pf-toast[hidden] { display:none; }
.pf-toast.err { background:rgba(24,14,16,.97); border-color:color-mix(in srgb,var(--danger) 45%,transparent); color:var(--danger); }
@keyframes pfToastIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ---------- responsive ---------- */
@media (max-width:820px) {
  .pf-grid { grid-template-columns:1fr; }
  .pf-mainc > *, .pf-rail > * { grid-column:1; }
  .pf-mainc > .pf-hero, .pf-rail > *:first-child { grid-row:auto; align-self:auto; }
  .pf-rail > .rail-tabbed { height:auto; min-height:0; }
  /* Stack order on mobile: hero → info panel (Score/Signals/Badges) → reviews →
     ad/activity, so the trust panel sits above the activity feed. (The listed
     variant has no .rail-tabbed, so its layout is unaffected.) */
  .pf-mainc > .pf-hero { order:0; }
  .pf-rail > .rail-tabbed { order:1; }
  .pf-mainc > .pf-revstrip { order:2; }
  .pf-mainc > .pf-adrow, .pf-mainc > .pf-card.act { order:3; }
  .world-strip { height:84px; }
  .pf-adrow { grid-template-columns:1fr; }
  .pf-adrow > .pf-card.act { height:auto; }
  .pf-statrow { grid-template-columns:repeat(2,1fr); gap:10px 0; }
  .pf-statrow div { padding:2px 14px; }
  .pf-statrow div:nth-child(odd) { border-left:0; padding-left:2px; }
  .pf-banner { padding:16px 18px; }
  .dial { width:64px; height:64px; }
  .dial-num b { font-size:1.1rem; }
  /* The rail card is auto-height on mobile, so the height-fill sizing above has no
     definite height to fill. Give the score dial a definite width-based size instead
     (container-type:size still resolves, so cqmin keeps scaling the readout). */
  .rail-score .dial { flex:0 0 auto; height:auto; max-height:none; width:min(62%,190px); margin-inline:auto; }
}