/* ============================================================
   BLINK — Profile page (data-driven /u/<id> + admin preview)
   pf- prefixed so it never collides with the landing styles.css
   ============================================================ */
.pf-scope {
  --ink:#111116; --paper:#f5f2ec; --card:#ffffff; --mute:#6a675f;
  --line:rgba(17,17,22,.09); --line-soft:rgba(17,17,22,.055);
  --signal:#ff4a28;
  --cover: linear-gradient(135deg,#111116 0%,#ff4a28 155%);
  --accent:#ff4a28; --accent-2:#ffb020;
  --fd:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,sans-serif;
  --fb:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;
  color: var(--ink);
  font-family: var(--fb);
}
/* colourways */
.pf-scope[data-color="coral"]  { --cover: linear-gradient(140deg,#141117 0%,#ff5e3a 60%,#ffb020 150%); --accent:#ff4a28; --accent-2:#ffb020; }
.pf-scope[data-color="aurora"] { --cover: linear-gradient(140deg,#0b1526,#22c1ff 88%,#7b61ff 150%); --accent:#1f9fd4; --accent-2:#7b61ff; }
.pf-scope[data-color="sun"]    { --cover: linear-gradient(140deg,#241006,#ff8b3d 92%,#ff5e6c 150%); --accent:#e8701d; --accent-2:#ff5e6c; }
.pf-scope[data-color="mono"]   { --cover: linear-gradient(140deg,#33333c,#141419); --accent:#3a3a44; --accent-2:#6a675f; }

/* dark mode */
:root[data-theme="dark"] .pf-scope,
.pf-scope[data-theme="dark"] {
  --ink:#f4f2ec; --paper:#0b0b0f; --card:#16161d; --mute:#9c988e;
  --line:rgba(244,242,236,.12); --line-soft:rgba(244,242,236,.06);
}

/* standalone page shell */
.pf-page { margin:0; font-family:var(--fb); background:#e7e3da; color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; letter-spacing:-.011em; line-height:1.55;
  min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:0 0 2rem; }
:root[data-theme="dark"] .pf-page { background:#050507; }
.pf-page *{ box-sizing:border-box; }
.pf-page img,.pf-page svg{ display:block; max-width:100%; }
.pf-page a{ text-decoration:none; color:inherit; }

/* card */
.pf{ width:100%; max-width:428px; background:var(--paper); }
.pf-page .pf{ min-height:100vh; box-shadow:0 30px 90px rgba(17,17,22,.2); }
@media(min-width:480px){ .pf-page{ padding-top:2.4rem; } .pf-page .pf{ min-height:auto; border-radius:36px; overflow:hidden; margin-bottom:2rem; } }

/* cover */
.pf-cover{ height:172px; background:var(--cover); position:relative; overflow:hidden; }
.pf-cover::before{ content:""; position:absolute; inset:0; background:
  radial-gradient(120% 90% at 82% 8%, rgba(255,255,255,.32), transparent 46%),
  radial-gradient(90% 80% at 8% 100%, rgba(0,0,0,.22), transparent 55%); }
.pf-cover::after{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size:22px 22px;
  -webkit-mask:linear-gradient(#000,transparent 75%); mask:linear-gradient(#000,transparent 75%); }
.pf-cover__ring{ position:absolute; top:22px; left:22px; width:70px; height:70px; border:2px solid rgba(255,255,255,.28); border-radius:50%; }
.pf-cover__ring::before{ content:""; position:absolute; inset:12px; border:2px solid rgba(255,255,255,.22); border-radius:50%; }

/* head */
.pf-head{ padding:0 26px; margin-top:-56px; position:relative; text-align:center; }
.pf-avatar{ width:112px; height:112px; border-radius:50%; margin:0 auto; border:5px solid var(--paper);
  background:var(--accent-2); display:grid; place-items:center; overflow:hidden;
  font-family:var(--fd); font-weight:600; font-size:2.7rem; color:#fff; letter-spacing:-.02em;
  box-shadow:0 16px 34px rgba(17,17,22,.24); }
.pf-avatar img{ width:100%; height:100%; object-fit:cover; }
.pf-name{ font-family:var(--fd); font-weight:600; font-size:1.72rem; letter-spacing:-.025em; margin-top:15px; line-height:1.1; }
.pf-role{ color:var(--mute); font-weight:500; margin-top:3px; font-size:.96rem; }
.pf-verified{ display:inline-flex; align-items:center; gap:5px; margin-top:12px; font-size:.76rem; font-weight:600;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 13%, transparent); padding:5px 13px; border-radius:999px; }
.pf-verified svg{ width:13px; height:13px; }
.pf-bio{ color:var(--mute); font-size:.95rem; margin:15px auto 0; max-width:32ch; line-height:1.55; }

/* action buttons — high specificity so page-level a{} can't override colour */
.pf-actions{ display:flex; gap:11px; padding:24px 26px 6px; }
.pf-scope .pf-btn{ flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:clamp(13px,3.6vw,15px) clamp(10px,3vw,16px); border-radius:16px; font-weight:600;
  font-size:clamp(.9rem,3.4vw,.98rem); white-space:nowrap; cursor:pointer;
  transition:transform .2s, box-shadow .2s, filter .2s; }
.pf-scope .pf-btn:hover{ transform:translateY(-2px); }
.pf-scope .pf-btn:active{ transform:scale(.98); }
.pf-scope .pf-btn--primary{ background:var(--ink); color:var(--paper); box-shadow:0 10px 24px rgba(17,17,22,.24); }
.pf-scope .pf-btn--primary:hover{ box-shadow:0 16px 30px rgba(17,17,22,.3); }
.pf-scope .pf-btn--wa{ background:#25d366; color:#fff; box-shadow:0 10px 24px rgba(37,211,102,.32); }
.pf-scope .pf-btn--wa:hover{ filter:brightness(1.04); box-shadow:0 16px 30px rgba(37,211,102,.4); }
.pf-scope .pf-btn svg{ width:18px; height:18px; flex:none; }

/* links */
.pf-label{ padding:26px 26px 11px; font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }
.pf-links{ padding:0 26px; display:flex; flex-direction:column; gap:11px; }
.pf-link{ display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line);
  border-radius:17px; padding:14px 15px; box-shadow:0 1px 2px rgba(17,17,22,.04); transition:transform .2s, box-shadow .2s, border-color .2s; }
.pf-link:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(17,17,22,.1); border-color:var(--line-soft); }
.pf-link__ico{ width:44px; height:44px; border-radius:13px; flex:none; display:grid; place-items:center; color:#fff; background:var(--ink); }
.pf-link__ico svg{ width:20px; height:20px; }
.pf-link__ico[data-brand="instagram"]{ background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#bc1888); }
.pf-link__ico[data-brand="whatsapp"]{ background:#25d366; }
.pf-link__ico[data-brand="tiktok"]{ background:#010101; }
.pf-link__ico[data-brand="facebook"]{ background:#1877f2; }
.pf-link__ico[data-brand="youtube"]{ background:#ff0000; }
.pf-link__ico[data-brand="linkedin"]{ background:#0a66c2; }
.pf-link__ico[data-brand="x"]{ background:#000; }
.pf-link__ico[data-brand="booking"]{ background:var(--accent); }
.pf-link__ico[data-brand="web"]{ background:var(--ink); }
.pf-link__txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pf-link__title{ display:block; font-weight:600; font-size:.98rem; letter-spacing:-.01em; line-height:1.2; }
.pf-link__sub{ display:block; font-size:.8rem; color:var(--mute); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-link__chev{ color:var(--mute); flex:none; opacity:.6; }

/* gallery */
.pf-gallery{ padding:15px 26px 0; display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.pf-gallery > *{ aspect-ratio:1; min-width:0; border-radius:14px; overflow:hidden; background:var(--line-soft); }
.pf-gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.pf-gallery a:hover img{ transform:scale(1.06); }
.pf-g1{background:linear-gradient(135deg,#2b2b33,#55555f);} .pf-g2{background:linear-gradient(135deg,var(--accent),#ff8b6b);}
.pf-g3{background:linear-gradient(135deg,var(--accent-2),#ffd47a);} .pf-g4{background:linear-gradient(135deg,#3a3a44,#1a1a20);}
.pf-g5{background:linear-gradient(135deg,#ff8b6b,var(--accent));} .pf-g6{background:linear-gradient(135deg,#ffd47a,var(--accent-2));}

/* powered by */
.pf-made{ text-align:center; padding:32px 26px 10px; }
.pf-made a{ display:inline-flex; align-items:center; gap:6px; font-family:var(--fd); font-weight:600; font-size:.9rem;
  color:var(--ink); border:1px solid var(--line); padding:9px 17px; border-radius:999px; background:var(--card); transition:transform .2s, box-shadow .2s; }
.pf-made a:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(17,17,22,.1); }
.pf-made .pf-dot{ width:8px; height:8px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 4px color-mix(in srgb,var(--signal) 18%, transparent); }

/* floating controls */
.pf-fab{ position:fixed; top:16px; z-index:5; width:42px; height:42px; border-radius:50%;
  background:color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter:blur(8px);
  display:grid; place-items:center; box-shadow:0 4px 16px rgba(17,17,22,.16); cursor:pointer; border:1px solid var(--line); }
.pf-fab svg{ width:19px; height:19px; color:var(--ink); }
.pf-fab--back{ left:16px; } .pf-fab--theme{ right:16px; }
.pf-fab .i-sun{ display:none; } :root[data-theme="dark"] .pf-fab .i-sun{ display:block; } :root[data-theme="dark"] .pf-fab .i-moon{ display:none; }

.pf-missing{ text-align:center; padding:88px 26px; font-family:var(--fd); }
.pf-missing h1{ font-size:1.6rem; margin-bottom:.5rem; letter-spacing:-.02em; }
.pf-missing p{ color:var(--mute); font-family:var(--fb); }
.pf-missing a{ color:var(--signal); font-weight:600; }

/* very small phones */
@media(max-width:360px){
  .pf-head{ padding:0 20px; } .pf-actions{ padding:22px 20px 6px; gap:9px; }
  .pf-links,.pf-gallery{ padding-left:20px; padding-right:20px; }
  .pf-scope .pf-btn{ padding:13px 8px; }
}