.pfp-wrap{ --bg:#080b0e; --surface:#0e1318; --surface2:#161d24; --line:#2a3742; --line2:#3a4a58;
  --ink:#dde8ef; --bright:#f2f7fa; --mut:#8fa3b3; --accent:#d95f0a; --cyan:#39b6ff;
  max-width:1240px; margin:0 auto; padding:6px 0 40px; color:var(--ink);
  font-family:'DM Sans',-apple-system,Segoe UI,Roboto,sans-serif; }
.pfp-head{ padding:8px 0 26px; }
.pfp-eyebrow{ font-family:'DM Mono',monospace; font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.pfp-title{ font-family:'Bebas Neue',sans-serif; font-size:clamp(42px,6vw,76px); line-height:1; letter-spacing:.5px; color:var(--bright); margin:0; }
.pfp-title span{ color:var(--accent); }
.pfp-lede{ color:var(--mut); font-size:16px; max-width:640px; margin:14px 0 0; line-height:1.6; }

.pfp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:900px){ .pfp-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .pfp-grid{ grid-template-columns:1fr; } }

.pfp-card{ appearance:none; text-align:left; padding:0; cursor:pointer; position:relative;
  background:linear-gradient(180deg,var(--surface2),var(--surface)); border:1px solid var(--line);
  border-radius:8px; overflow:hidden; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; color:inherit; }
.pfp-card:hover{ transform:translateY(-4px); border-color:var(--line2); box-shadow:0 18px 40px rgba(0,0,0,.45); }
.pfp-card:hover .pfp-stage{ background:radial-gradient(120% 90% at 50% 30%,rgba(57,182,255,.10),transparent 60%); }
.pfp-stage{ position:relative; aspect-ratio:4/3; background:radial-gradient(120% 90% at 50% 35%,rgba(40,58,72,.18),transparent 60%); }
.pfp-stage canvas{ display:block; width:100%; height:100%; }
.pfp-expand{ position:absolute; top:10px; right:10px; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:rgba(8,11,14,.6); border:1px solid var(--line); border-radius:6px; color:var(--cyan); opacity:0; transition:opacity .2s; }
.pfp-card:hover .pfp-expand{ opacity:1; }
.pfp-expand svg{ width:15px; height:15px; }
.pfp-meta{ padding:14px 16px 16px; border-top:1px solid var(--line); }
.pfp-n{ font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:.4px; color:var(--bright); line-height:1.05; }
.pfp-t{ font-family:'DM Mono',monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--mut); margin-top:6px; }

/* full-screen interactive viewer */
.pfp-modal{ position:fixed; inset:0; z-index:99999; display:none; }
.pfp-modal.open{ display:block; }
.pfp-fs{ position:absolute; inset:0; background:#0c141c; overflow:hidden; }
.pfp-fs #pfp-m-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.pfp-labels{ position:absolute; inset:0; z-index:4; pointer-events:none; transition:opacity .35s ease; }
.pfp-labels .lbl{ position:relative; transform:translate(-50%,-50%); white-space:nowrap; font-family:'DM Mono',monospace;
  font-size:11px; letter-spacing:.04em; color:#cdd6de; display:flex; align-items:center; }
.pfp-labels .lbl .dot{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--cyan); box-shadow:0 0 0 3px rgba(57,182,255,.18); }
.pfp-labels .lbl .ln{ width:26px; height:1px; flex:none; background:linear-gradient(90deg,var(--cyan),rgba(57,182,255,.25)); }
.pfp-labels .lbl .tx{ background:rgba(13,18,23,.92); border:1px solid rgba(120,150,170,.18); border-left:2px solid var(--cyan); padding:4px 9px; border-radius:3px; }

.pfp-back{ position:absolute; top:22px; left:22px; z-index:8; display:flex; align-items:center; gap:8px; cursor:pointer;
  font-family:'DM Mono',monospace; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink);
  background:rgba(12,20,28,.7); border:1px solid var(--line2); border-radius:8px; padding:10px 14px; backdrop-filter:blur(8px); transition:all .18s; }
.pfp-back:hover{ border-color:var(--accent); color:var(--bright); }
.pfp-back svg{ width:15px; height:15px; }

.pfp-info{ position:absolute; top:78px; left:22px; z-index:6; max-width:340px; max-height:calc(100vh - 200px); overflow:auto; pointer-events:none; }
.pfp-info > *{ pointer-events:auto; }
.pfp-info .pfp-m-tag{ font-family:'DM Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--cyan); }
.pfp-info .pfp-m-title{ font-family:'Bebas Neue',sans-serif; font-size:38px; line-height:1.02; letter-spacing:.5px; color:var(--bright); margin:8px 0 0; }
.pfp-info .pfp-rule{ width:40px; height:2px; background:var(--accent); margin:14px 0; }
.pfp-info .pfp-m-blurb{ color:#aebbc6; font-size:14.5px; line-height:1.6; margin:0 0 16px; }
.pfp-m-quote{ display:inline-block; font-family:'DM Mono',monospace; font-size:11.5px; letter-spacing:1px; color:#8fa3b3;
  text-decoration:none; border-bottom:1px solid rgba(143,163,179,.4); padding-bottom:2px; transition:color .18s, border-color .18s; }
.pfp-m-quote:hover{ color:var(--accent); border-color:var(--accent); }

.pfp-ctrl{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:8; display:flex; gap:6px; align-items:center;
  background:rgba(14,20,27,.82); border:1px solid var(--line); border-radius:12px; padding:7px 8px; backdrop-filter:blur(10px); box-shadow:0 14px 44px rgba(0,0,0,.5); }
.pfp-cbtn{ appearance:none; border:1px solid transparent; background:transparent; color:var(--ink); cursor:pointer;
  font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.03em; padding:8px 12px; border-radius:7px; transition:all .16s; display:flex; align-items:center; gap:7px; }
.pfp-cbtn:hover{ background:rgba(120,150,170,.1); }
.pfp-cbtn.on{ background:rgba(57,182,255,.14); border-color:rgba(57,182,255,.4); color:#d8eefb; }
.pfp-cbtn.primary{ color:var(--cyan); }
.pfp-cbtn svg{ width:13px; height:13px; opacity:.85; }
.pfp-csep{ width:1px; height:22px; background:var(--line); margin:0 2px; }
@media(max-width:680px){ .pfp-cbtn span{ display:none; } .pfp-cbtn{ padding:9px; } .pfp-info{ max-width:62vw; } }

.pfp-load2{ position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; background:#0c141c; transition:opacity .5s ease; }
.pfp-load2 .ring{ width:34px; height:34px; border:2px solid rgba(120,150,170,.2); border-top-color:var(--cyan); border-radius:50%; animation:pfp-spin .9s linear infinite; }
@keyframes pfp-spin{ to{ transform:rotate(360deg); } }

/* empty state */
.pfp-empty{ border:1px dashed var(--line2); border-radius:10px; padding:34px; text-align:center; color:var(--mut); background:var(--surface); }

/* BOM block in modal */
.pfp-m-bom{ margin:4px 0 22px; }
.pfp-bom-price{ font-family:'DM Mono',monospace; font-size:13px; color:var(--ink); margin-bottom:14px; }
.pfp-bom-price b{ color:var(--cyan); }
.pfp-bom-h{ font-family:'DM Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--mut); margin-bottom:8px; }
.pfp-bom-list{ border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.pfp-bom-row{ display:flex; justify-content:space-between; gap:12px; padding:7px 11px; font-size:12.5px; border-bottom:1px solid var(--line); }
.pfp-bom-row:last-child{ border-bottom:0; }
.pfp-bom-row span:first-child{ color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pfp-bom-row span:last-child{ color:var(--mut); font-family:'DM Mono',monospace; flex:none; }
.pfp-bom-more{ padding:7px 11px; font-size:12px; color:var(--mut); background:var(--surface); }