/* ==========================================================================
   MeetMySocials — public profile page + 404
   Structure mirrors the reference product (580px card over full-bleed
   wallpaper, top bar, QR aside, footer CTA). All themeable values come from
   the inline cssVars block; this file only consumes them.
   ========================================================================== */

/* ---------- 1. Defaults (fallback when no design vars are present).
   `html:where(:root)` keeps specificity at 0 so the inline per-profile
   cssVars block (a `:root` rule) always wins regardless of load order. ------ */
html:where(:root) {
  --profileBackground: #ECEEF1;
  --profileBackgroundLayer: #ECEEF1;
  --wallpaper-style: fill;
  --wallpaper-size: cover;
  --wallpaper-blur: 48px;
  --wallpaper-dim: 20%;
  --wallpaper-angle: 135;
  --profileTitleText: #000000;
  --profileDescriptionText: #000000;
  --header-text-color: #000000;
  --button-style-background: #FFFFFF;
  --button-style-background-hover: color-mix(in srgb, #ffffff 93%, #000000 7%);
  --button-solid-background: #FFFFFF;
  --button-style-text: #000000;
  --button-style-radius: 8px;
  --button-style-border: none;
  --button-style-shadow: none;
  --linkBackground: #FFFFFF;
  --linkText: #000000;
  --linkRadius: 8px;
  --linkHoverBackground: color-mix(in srgb, #ffffff 93%, #000000 7%);
  --linkHoverText: #000000;
  --linkBorder: none;
  --socialLinkFill: #000000;
  --profile-container-desktop-width: 580px;
  --link-gap: 14px;
  --profile-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --profile-title-font: var(--profile-font-family);
}

/* ---------- 2. Reset / base ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--profileBackground);
  color: var(--profileDescriptionText);
  font-family: var(--profile-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
h1, h2, p, figure { margin: 0; }

/* ---------- 3. Page font map (data-font / data-alt-font) ------------------ */
[data-font="inter"] { --profile-font-family: "Inter", system-ui, sans-serif; }
[data-font="albert-sans"] { --profile-font-family: "Albert Sans", system-ui, sans-serif; }
[data-font="belanosima"] { --profile-font-family: "Belanosima", system-ui, sans-serif; }
[data-font="bricolage-grotesque"] { --profile-font-family: "Bricolage Grotesque", system-ui, sans-serif; }
[data-font="dm-sans"] { --profile-font-family: "DM Sans", system-ui, sans-serif; }
[data-font="epilogue"] { --profile-font-family: "Epilogue", system-ui, sans-serif; }
[data-font="ibm-plex-sans"] { --profile-font-family: "IBM Plex Sans", system-ui, sans-serif; }
[data-font="lato"] { --profile-font-family: "Lato", system-ui, sans-serif; }
[data-font="m-plus-rounded"] { --profile-font-family: "M PLUS Rounded 1c", system-ui, sans-serif; }
[data-font="manrope"] { --profile-font-family: "Manrope", system-ui, sans-serif; }
[data-font="oxanium"] { --profile-font-family: "Oxanium", system-ui, sans-serif; }
[data-font="poppins"] { --profile-font-family: "Poppins", system-ui, sans-serif; }
[data-font="red-hat-display"] { --profile-font-family: "Red Hat Display", system-ui, sans-serif; }
[data-font="roboto"] { --profile-font-family: "Roboto", system-ui, sans-serif; }
[data-font="rubik"] { --profile-font-family: "Rubik", system-ui, sans-serif; }
[data-font="space-grotesk"] { --profile-font-family: "Space Grotesk", system-ui, sans-serif; }
[data-font="syne"] { --profile-font-family: "Syne", system-ui, sans-serif; }
[data-font="biorhyme"] { --profile-font-family: "BioRhyme", Georgia, serif; }
[data-font="bitter"] { --profile-font-family: "Bitter", Georgia, serif; }
[data-font="caudex"] { --profile-font-family: "Caudex", Georgia, serif; }
[data-font="corben"] { --profile-font-family: "Corben", Georgia, serif; }
[data-font="domine"] { --profile-font-family: "Domine", Georgia, serif; }
[data-font="hahmlet"] { --profile-font-family: "Hahmlet", Georgia, serif; }
[data-font="ibm-plex-serif"] { --profile-font-family: "IBM Plex Serif", Georgia, serif; }
[data-font="lora"] { --profile-font-family: "Lora", Georgia, serif; }
[data-font="merriweather"] { --profile-font-family: "Merriweather", Georgia, serif; }
[data-font="noto-serif"] { --profile-font-family: "Noto Serif", Georgia, serif; }
[data-font="old-standard-tt"] { --profile-font-family: "Old Standard TT", Georgia, serif; }
[data-font="pt-serif"] { --profile-font-family: "PT Serif", Georgia, serif; }
[data-font="playfair-display"] { --profile-font-family: "Playfair Display", Georgia, serif; }
[data-font="roboto-serif"] { --profile-font-family: "Roboto Serif", Georgia, serif; }
[data-font="roboto-slab"] { --profile-font-family: "Roboto Slab", Georgia, serif; }
[data-font="source-serif"] { --profile-font-family: "Source Serif 4", Georgia, serif; }
[data-font="ibm-plex-mono"] { --profile-font-family: "IBM Plex Mono", ui-monospace, monospace; }
[data-font="space-mono"] { --profile-font-family: "Space Mono", ui-monospace, monospace; }
[data-font="shantell-sans"] { --profile-font-family: "Shantell Sans", system-ui, sans-serif; }

[data-alt-font="inter"] { --profile-title-font: "Inter", system-ui, sans-serif; }
[data-alt-font="albert-sans"] { --profile-title-font: "Albert Sans", system-ui, sans-serif; }
[data-alt-font="belanosima"] { --profile-title-font: "Belanosima", system-ui, sans-serif; }
[data-alt-font="bricolage-grotesque"] { --profile-title-font: "Bricolage Grotesque", system-ui, sans-serif; }
[data-alt-font="dm-sans"] { --profile-title-font: "DM Sans", system-ui, sans-serif; }
[data-alt-font="epilogue"] { --profile-title-font: "Epilogue", system-ui, sans-serif; }
[data-alt-font="ibm-plex-sans"] { --profile-title-font: "IBM Plex Sans", system-ui, sans-serif; }
[data-alt-font="lato"] { --profile-title-font: "Lato", system-ui, sans-serif; }
[data-alt-font="m-plus-rounded"] { --profile-title-font: "M PLUS Rounded 1c", system-ui, sans-serif; }
[data-alt-font="manrope"] { --profile-title-font: "Manrope", system-ui, sans-serif; }
[data-alt-font="oxanium"] { --profile-title-font: "Oxanium", system-ui, sans-serif; }
[data-alt-font="poppins"] { --profile-title-font: "Poppins", system-ui, sans-serif; }
[data-alt-font="red-hat-display"] { --profile-title-font: "Red Hat Display", system-ui, sans-serif; }
[data-alt-font="roboto"] { --profile-title-font: "Roboto", system-ui, sans-serif; }
[data-alt-font="rubik"] { --profile-title-font: "Rubik", system-ui, sans-serif; }
[data-alt-font="space-grotesk"] { --profile-title-font: "Space Grotesk", system-ui, sans-serif; }
[data-alt-font="syne"] { --profile-title-font: "Syne", system-ui, sans-serif; }
[data-alt-font="biorhyme"] { --profile-title-font: "BioRhyme", Georgia, serif; }
[data-alt-font="bitter"] { --profile-title-font: "Bitter", Georgia, serif; }
[data-alt-font="caudex"] { --profile-title-font: "Caudex", Georgia, serif; }
[data-alt-font="corben"] { --profile-title-font: "Corben", Georgia, serif; }
[data-alt-font="domine"] { --profile-title-font: "Domine", Georgia, serif; }
[data-alt-font="hahmlet"] { --profile-title-font: "Hahmlet", Georgia, serif; }
[data-alt-font="ibm-plex-serif"] { --profile-title-font: "IBM Plex Serif", Georgia, serif; }
[data-alt-font="lora"] { --profile-title-font: "Lora", Georgia, serif; }
[data-alt-font="merriweather"] { --profile-title-font: "Merriweather", Georgia, serif; }
[data-alt-font="noto-serif"] { --profile-title-font: "Noto Serif", Georgia, serif; }
[data-alt-font="old-standard-tt"] { --profile-title-font: "Old Standard TT", Georgia, serif; }
[data-alt-font="pt-serif"] { --profile-title-font: "PT Serif", Georgia, serif; }
[data-alt-font="playfair-display"] { --profile-title-font: "Playfair Display", Georgia, serif; }
[data-alt-font="roboto-serif"] { --profile-title-font: "Roboto Serif", Georgia, serif; }
[data-alt-font="roboto-slab"] { --profile-title-font: "Roboto Slab", Georgia, serif; }
[data-alt-font="source-serif"] { --profile-title-font: "Source Serif 4", Georgia, serif; }
[data-alt-font="ibm-plex-mono"] { --profile-title-font: "IBM Plex Mono", ui-monospace, monospace; }
[data-alt-font="space-mono"] { --profile-title-font: "Space Mono", ui-monospace, monospace; }
[data-alt-font="shantell-sans"] { --profile-title-font: "Shantell Sans", system-ui, sans-serif; }

/* ---------- 4. Wallpapers (painted inside the card, behind its content) ---
   The wallpaper lives on .profile-frame::before so it is always visible:
   on mobile it fills the screen, on desktop it fills the rounded card while
   the page behind it becomes a darker backdrop. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background: var(--profileBackground);
  pointer-events: none;
}

/* Desktop backdrop: darker theme colour + ~30% scrim (matches reference). */
@media (min-width: 768px) {
  body::before {
    background:
      linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
      color-mix(in srgb, var(--profileBackground) 88%, #000000);
  }
}

.profile-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--profileBackgroundLayer) center / var(--wallpaper-size, cover) no-repeat;
  pointer-events: none;
}
.profile-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

/* Video wallpaper: rendered inside the card, under the dim/grain layers. */
.profile-video-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.profile-video-bg video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Blur: blurred image (when provided) or a real multi-stop gradient. */
body[data-wallpaper="blur"] .profile-frame::before {
  filter: blur(var(--wallpaper-blur, 48px)) saturate(1.3);
  transform: scale(1.15);
}

/* Dim + grain overlays (image / video / blur wallpapers). */
body[data-wallpaper="image"] .profile-frame::after,
body[data-wallpaper="video"] .profile-frame::after,
body[data-wallpaper="blur"] .profile-frame::after {
  background-color: rgba(0, 0, 0, var(--wallpaper-dim, 20%));
}
body[data-grain="1"] .profile-frame::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

/* Patterns: inline SVG shapes used as masks, tinted from the theme text
   colour so they read on both light and dark themes. */
body[data-wallpaper="pattern"] .profile-frame::after {
  background-color: color-mix(in srgb, var(--profileDescriptionText) var(--pattern-strength, 12%), transparent);
  -webkit-mask-image: var(--pattern-image);
  mask-image: var(--pattern-image);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-size: var(--pattern-size, 40px 40px);
  mask-size: var(--pattern-size, 40px 40px);
}
body[data-wallpaper="pattern"][data-pattern="grid"] .profile-frame::after {
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 .75H40M.75 0V40' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  --pattern-size: 40px 40px;
  --pattern-strength: 11%;
}
body[data-wallpaper="pattern"][data-pattern="matrix"] .profile-frame::after {
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M-3 3 3 -3M0 18 18 0M15 21 21 15' stroke='%23000' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  --pattern-size: 18px 18px;
  --pattern-strength: 10%;
}
body[data-wallpaper="pattern"][data-pattern="morph"] .profile-frame::after {
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Ccircle cx='9' cy='9' r='2.5' fill='%23000'/%3E%3Ccircle cx='32' cy='17' r='1.5' fill='%23000'/%3E%3Ccircle cx='17' cy='33' r='2' fill='%23000'/%3E%3Ccircle cx='40' cy='40' r='1.2' fill='%23000'/%3E%3C/svg%3E");
  --pattern-size: 44px 44px;
  --pattern-strength: 14%;
}
body[data-wallpaper="pattern"][data-pattern="organic"] .profile-frame::after {
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='36' cy='34' rx='40' ry='32' fill='url(%23g)'/%3E%3Cellipse cx='104' cy='92' rx='46' ry='38' fill='url(%23g)'/%3E%3Cellipse cx='76' cy='126' rx='28' ry='24' fill='url(%23g)'/%3E%3C/svg%3E");
  --pattern-size: 140px 140px;
  --pattern-strength: 13%;
}
body[data-wallpaper="pattern"][data-pattern="waves"] .profile-frame::after {
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='24'%3E%3Cpath d='M0 12 Q16 0 32 12 T64 12' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  --pattern-size: 64px 24px;
  --pattern-strength: 12%;
}
body[data-wallpaper="pattern"][data-pattern="checks"] .profile-frame::after {
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Crect width='18' height='18' fill='%23000'/%3E%3Crect x='18' y='18' width='18' height='18' fill='%23000'/%3E%3C/svg%3E");
  --pattern-size: 36px 36px;
  --pattern-strength: 9%;
}
body[data-wallpaper="pattern"][data-pattern="rays"] .profile-frame::after {
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 28 56 0M28 28 56 56M28 28 0 0M28 28 0 56M28 28 28 0M28 28 28 56M28 28 0 28M28 28 56 28' stroke='%23000' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  --pattern-size: 56px 56px;
  --pattern-strength: 10%;
}
body[data-wallpaper="pattern"][data-pattern="stripes"] .profile-frame::after {
  --pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M-3 3 3 -3M0 12 12 0M9 15 15 9' stroke='%23000' stroke-width='3' fill='none'/%3E%3C/svg%3E");
  --pattern-size: 12px 12px;
  --pattern-strength: 10%;
}

/* ---------- 5. Top bar ---------------------------------------------------- */
.profile-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  pointer-events: none;
}
.profile-topbar-inner {
  max-width: var(--profile-container-desktop-width, 580px);
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.profile-topbar-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #FFFFFF;
  color: #14151A;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.profile-topbar-btn:hover { background: #F1F1F3; }
.profile-topbar-btn:active { transform: scale(0.94); }

/* ---------- 6. Card frame ------------------------------------------------- */
.profile-main { position: relative; z-index: 1; }
.profile-frame {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--profile-container-desktop-width, 580px);
  min-height: 100vh;
  min-height: 100lvh;
  margin: 0 auto;
  background: transparent;
  overflow: hidden;
}
body[data-wallpaper="fill"] .profile-frame { background: var(--profileBackground); }
.profile-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding: 6px 16px 10px;
}
@media (min-width: 640px) {
  .profile-topbar-inner { padding-left: 28px; padding-right: 28px; }
  .profile-content { padding-left: 28px; padding-right: 28px; }
}
@media (min-width: 768px) {
  .profile-main { padding-top: 2.5rem; }
  .profile-topbar { padding-top: 3.25rem; }
  /* 580px card - 2 x 58px gutters = 464px link rows (reference fidelity). */
  .profile-topbar-inner { padding-left: 58px; padding-right: 58px; }
  .profile-content { padding-left: 58px; padding-right: 58px; }
  .profile-frame {
    min-height: calc(100vh - 2.5rem);
    min-height: calc(100lvh - 2.5rem);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 24px 32px rgba(0, 0, 0, 0.15);
  }
}

/* ---------- 7. Header block (avatar / name / bio) ------------------------- */
.profile-head { position: relative; padding-top: 92px; }
.profile-head-inner { padding: 0 24px; text-align: center; }
.profile-avatar-wrap { margin: 0 auto 18px; width: 96px; }
.profile-avatar {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--button-style-background);
}
.profile-avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--button-style-text);
  user-select: none;
}
.profile-name {
  color: var(--profileTitleText);
  font-family: var(--profile-font-family);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
body[data-alt-title="1"] .profile-name { font-family: var(--profile-title-font, var(--profile-font-family)); }
body[data-title-style="logo"] .profile-name {
  font-family: "Space Grotesk", var(--profile-font-family);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 24px;
}
body[data-title-size="large"] .profile-name { font-size: 32px; }
.profile-bio {
  margin: 12px auto 0;
  max-width: 94%;
  color: var(--profileDescriptionText);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
body[data-page-size="large"] .profile-bio { font-size: 18px; }

/* Header layout variants — graceful without a cover image. */
.profile-cover {
  height: 172px;
  background-color: color-mix(in srgb, var(--button-style-background) 82%, var(--profileBackground));
  background-size: cover;
  background-position: center;
}
.profile-cover--fallback {
  background-image: linear-gradient(135deg,
    color-mix(in srgb, var(--button-style-background) 92%, var(--profileBackground)) 0%,
    color-mix(in srgb, var(--profileTitleText) 16%, var(--profileBackground)) 100%);
}
body[data-layout="hero"] .profile-head,
body[data-layout="banner"] .profile-head,
body[data-layout="cutout"] .profile-head { padding-top: 0; }
body[data-layout="hero"] .profile-avatar-wrap { margin: -52px auto 14px; }
body[data-layout="hero"] .profile-avatar { box-shadow: 0 0 0 5px var(--profileBackground); }
body[data-layout="banner"] .profile-cover { height: 128px; }
body[data-layout="banner"] .profile-head-inner { padding: 0 28px; text-align: left; }
body[data-layout="banner"] .profile-avatar-wrap { margin: -44px 0 12px; }
body[data-layout="banner"] .profile-bio { margin-left: 0; max-width: 100%; }
body[data-layout="banner"] .profile-name { text-align: left; }
body[data-layout="cutout"] .profile-cover {
  height: 108px;
  background-color: color-mix(in srgb, var(--profileTitleText) 86%, var(--profileBackground));
}
body[data-layout="cutout"] .profile-avatar-wrap { margin: -74px auto 14px; width: 120px; }
body[data-layout="cutout"] .profile-avatar { width: 120px; height: 120px; box-shadow: 0 0 0 6px var(--profileBackground); }
body[data-layout="cutout"] .profile-avatar--fallback { font-size: 48px; }
body[data-layout="shape"] .profile-head { padding-top: 68px; }
body[data-layout="shape"] .profile-avatar-wrap {
  position: relative;
  width: 168px;
  height: 168px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body[data-layout="shape"] .profile-avatar-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 44% 56% 52% 48% / 46% 44% 56% 54%;
  background: color-mix(in srgb, var(--profileTitleText) 10%, var(--button-style-background));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--profileTitleText) 16%, transparent),
    0 8px 20px rgba(0, 0, 0, 0.08);
  transform: rotate(-6deg);
}
body[data-layout="shape"] .profile-avatar { position: relative; z-index: 1; }
@media (min-width: 768px) {
  .profile-cover { border-radius: 24px 24px 0 0; }
  .profile-head { padding-top: 104px; }
  body[data-layout="hero"] .profile-head,
  body[data-layout="banner"] .profile-head,
  body[data-layout="cutout"] .profile-head { padding-top: 0; }
}

/* ---------- 8. Social icons ----------------------------------------------- */
.profile-socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  padding: 16px 0 6px;
}
.profile-socials[data-position="bottom"] { padding: 10px 0 6px; }
.profile-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--socialLinkFill);
  transition: transform 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}
.profile-social:hover {
  background: color-mix(in srgb, var(--socialLinkFill) 9%, transparent);
  transform: translateY(-1px);
}
.profile-social:active { transform: scale(0.92); }
.profile-social svg { display: block; }

/* ---------- 9. Links column ----------------------------------------------- */
.profile-links { display: flex; flex-direction: column; gap: var(--link-gap, 14px); padding-top: 10px; }
.profile-item { min-width: 0; }

/* link (button) */
.profile-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 51px;
  padding: 13px 18px;
  background: var(--linkBackground);
  color: var(--linkText);
  border: var(--linkBorder);
  border-radius: var(--linkRadius);
  box-shadow: var(--button-style-shadow);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.profile-link:hover { background: var(--linkHoverBackground); color: var(--linkHoverText); }
.profile-link:active { transform: scale(0.98); }
.profile-link--inert { cursor: default; opacity: 0.55; }
/* inert rows never react to hover/active */
.profile-link--inert:hover { background: var(--linkBackground); color: var(--linkText); }
.profile-link--inert:active { transform: none; }
body[data-buttons="glass"] .profile-link {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* glass hover stays glass: translucent fill + a top inset highlight */
body[data-buttons="glass"] .profile-link:hover {
  background: color-mix(in srgb, var(--button-style-background) 70%, transparent);
  box-shadow: var(--button-style-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* outline hover = faint tint fill, never solid */
body[data-buttons="outline"] .profile-link:hover {
  background: color-mix(in srgb, var(--button-solid-background) 12%, transparent);
}
body[data-page-size="large"] .profile-link { font-size: 17px; min-height: 55px; }
.profile-link-text { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.profile-link-title { overflow-wrap: anywhere; }
.profile-link-subtitle {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  opacity: 0.72;
  overflow-wrap: anywhere;
}
/* premium link: thumbnail + centred text */
.profile-link--has-thumb {
  justify-content: flex-start;
  gap: 12px;
  padding-left: 12px;
}
.profile-link--has-thumb .profile-link-text { flex: 1 1 auto; }
.profile-link-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: max(8px, calc(var(--linkRadius) - 4px));
  background: color-mix(in srgb, var(--linkText) 8%, transparent);
}
/* premium link: gentle sheen sweep every ~4s */
.profile-link--highlight { overflow: hidden; }
.profile-link--highlight::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg,
    transparent 0%,
    color-mix(in srgb, var(--linkText) 14%, transparent) 50%,
    transparent 100%);
  transform: skewX(-18deg);
  animation: mms-sheen 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mms-sheen {
  0% { left: -60%; }
  55% { left: 130%; }
  100% { left: 130%; }
}

/* header + text blocks */
.profile-section {
  padding: 6px 0;
  color: var(--profileDescriptionText);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}
.profile-text {
  padding: 4px 2px;
  color: var(--profileDescriptionText);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  text-align: center;
  overflow-wrap: anywhere;
}
@media (min-width: 640px) {
  .profile-section { font-size: 16px; }
  .profile-text { font-size: 15px; }
}

/* embed */
.profile-embed {
  border-radius: var(--linkRadius);
  overflow: hidden;
  background: var(--linkBackground);
  color: var(--linkText);
  box-shadow: var(--button-style-shadow);
}
.profile-embed-title {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid color-mix(in srgb, var(--linkText) 8%, transparent);
}
.profile-embed-frame { position: relative; background: #0e0e10; }
.profile-embed-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.profile-embed[data-provider="youtube"] .profile-embed-frame,
.profile-embed[data-provider="vimeo"] .profile-embed-frame { aspect-ratio: 16 / 9; }
.profile-embed[data-provider="twitch"] .profile-embed-frame { aspect-ratio: 16 / 9; }
.profile-embed[data-provider="tiktok"] .profile-embed-frame {
  aspect-ratio: 9 / 16;
  width: min(100%, 340px);
  margin: 0 auto;
}
.profile-embed[data-provider="spotify"][data-size="long"] .profile-embed-frame { height: 352px; }
.profile-embed[data-provider="spotify"] .profile-embed-frame { height: 152px; }
.profile-embed[data-provider="soundcloud"] .profile-embed-frame { height: 166px; }
.profile-embed[data-provider="apple"] .profile-embed-frame { height: 175px; }

/* YouTube lite facade: thumbnail + play chip, swaps to an iframe on click. */
.profile-embed-facade {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0e0e10;
}
.profile-embed-facade img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-embed-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(14, 14, 16, 0.72);
  color: #FFFFFF;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.profile-embed-play svg { margin-left: 3px; }
.profile-embed-facade:hover .profile-embed-play {
  background: rgba(14, 14, 16, 0.86);
  transform: translate(-50%, -50%) scale(1.06);
}

/* Brand-styled link cards (Instagram / Facebook / X fallbacks). */
.profile-embed-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: var(--linkText);
  transition: background-color 0.15s ease;
}
.profile-embed-card:hover { background: color-mix(in srgb, var(--linkText) 6%, transparent); }
.profile-embed-glyph {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--embed-brand, #14151A);
  color: #FFFFFF;
}
.profile-embed-card-text { flex: 1 1 auto; min-width: 0; }
.profile-embed-card-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.profile-embed-card-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.65;
}
.profile-embed-card-arrow { flex: 0 0 auto; opacity: 0.55; }

/* PDF block: icon + title + explicit "View PDF" action. */
.profile-pdf {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 51px;
  padding: 12px 18px;
  background: var(--linkBackground);
  color: var(--linkText);
  border: var(--linkBorder);
  border-radius: var(--linkRadius);
  box-shadow: var(--button-style-shadow);
  transition: background-color 0.15s ease, transform 0.12s ease;
}
.profile-pdf:hover { background: var(--linkHoverBackground); }
.profile-pdf:active { transform: scale(0.98); }
body[data-buttons="glass"] .profile-pdf {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body[data-buttons="outline"] .profile-pdf:hover {
  background: color-mix(in srgb, var(--button-solid-background) 12%, transparent);
}
.profile-pdf-icon {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: max(8px, calc(var(--linkRadius) - 4px));
  background: color-mix(in srgb, var(--linkText) 8%, transparent);
}
.profile-pdf-badge {
  margin-top: 1px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
}
.profile-pdf-text { flex: 1 1 auto; min-width: 0; }
.profile-pdf-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.profile-pdf-action {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.65;
}

/* email signup */
.profile-signup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--linkBackground);
  color: var(--linkText);
  border-radius: var(--linkRadius);
  box-shadow: var(--button-style-shadow);
  text-align: center;
}
.profile-signup-title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.profile-signup-sub { font-size: 13px; font-weight: 400; line-height: 1.4; opacity: 0.72; }
.profile-signup-row { display: flex; gap: 8px; margin-top: 2px; }
.profile-signup-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--linkText) 18%, transparent);
  border-radius: max(6px, calc(var(--linkRadius) - 2px));
  background: color-mix(in srgb, var(--linkBackground) 88%, var(--linkText) 5%);
  color: var(--linkText);
  font-size: 14px;
}
.profile-signup-input::placeholder { color: color-mix(in srgb, var(--linkText) 45%, transparent); }
.profile-signup-input:focus-visible { outline: 2px solid var(--linkText); outline-offset: 1px; }
.profile-signup-btn {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: max(6px, calc(var(--linkRadius) - 2px));
  background: var(--linkText);
  color: var(--linkBackground);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.12s ease;
}
.profile-signup-btn:hover { opacity: 0.88; }
.profile-signup-btn:active { transform: scale(0.97); }
.profile-signup-btn[disabled] { opacity: 0.6; cursor: wait; }
.profile-signup-msg { font-size: 13px; font-weight: 600; line-height: 1.4; }
.profile-signup-msg.is-success { font-size: 15px; }
.profile-signup.is-done .profile-signup-row { display: none; }

/* image */
.profile-image {
  border-radius: var(--linkRadius);
  overflow: hidden;
  background: var(--linkBackground);
  box-shadow: var(--button-style-shadow);
  line-height: 0;
}
.profile-image img { display: block; width: 100%; }

/* ---------- 10. Footer ---------------------------------------------------- */
.profile-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 44px 16px 56px;
}
.profile-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  background: #FFFFFF;
  color: #14151A;
  border: 1px solid rgba(20, 21, 26, 0.06);
  border-radius: 64px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  font-family: "Inter", var(--profile-font-family);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.profile-cta:hover { background: #F6F6F6; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22); }
.profile-cta:active { transform: scale(0.98); }
.profile-footlinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 4px;
  color: var(--profileDescriptionText);
  font-size: 12px;
  line-height: 1.6;
}
.profile-footlinks a,
.profile-footlinks-inert {
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.6;
}
.profile-footlinks a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 0.15s ease; }
.profile-footlinks a:hover { text-decoration-color: currentColor; }
.profile-footlinks-inert { cursor: default; opacity: 0.9; }
/* Each label keeps its separator glued to it so wrapped lines never start
   with a lone dot on mobile. */
.profile-footlinks-pair {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.profile-footlinks-dot { opacity: 0.55; }

/* ---------- 10b. Verification badges -------------------------------------- */
.profile-name-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
}
.profile-name-text { min-width: 0; overflow-wrap: anywhere; }
.profile-badges { display: inline-flex; align-items: center; gap: 6px; flex: none; }

.profile-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #FFFFFF;
  cursor: pointer;
  flex: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
/* generous tap target without changing the visual size */
.profile-badge::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.profile-badge svg { display: block; }
.profile-badge-glyph { filter: drop-shadow(0 1px 1px rgba(70, 30, 50, 0.28)); }
.profile-badge--id {
  background: #1D9BF0;
  box-shadow: 0 0 0 1.5px #FFFFFF, 0 1px 3px rgba(20, 21, 26, 0.24);
}
.profile-badge--selfie {
  background: linear-gradient(150deg, #CDB4F6 0%, #FF6A4D 100%);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.95), 0 1px 3px rgba(20, 21, 26, 0.2);
}
.profile-badge:hover { transform: translateY(-1px); }
.profile-badge:active { transform: scale(0.93); }
.profile-badge.is-open { transform: scale(0.96); }
.profile-badge--id.is-open { box-shadow: 0 0 0 1.5px #FFFFFF, 0 0 0 4px color-mix(in srgb, #1D9BF0 38%, transparent); }
.profile-badge--selfie.is-open { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.95), 0 0 0 4px color-mix(in srgb, #FF6A4D 32%, transparent); }

/* Shared popover: one element, repositioned on demand. */
.profile-popover {
  position: fixed;
  z-index: 120;
  max-width: 240px;
  padding: 10px 13px;
  border-radius: 12px;
  background: var(--button-style-background);
  color: var(--button-style-text);
  font-family: "Inter", var(--profile-font-family);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 2px 6px rgba(20, 21, 26, 0.12), 0 12px 30px rgba(20, 21, 26, 0.22);
  opacity: 0;
  transform: translateY(-3px) scale(0.97);
  transform-origin: 50% 0%;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.profile-popover[hidden] { display: none; }
.profile-popover.is-on { opacity: 1; transform: translateY(0) scale(1); }
.profile-popover::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: inherit;
  left: var(--arrow-x, 50%);
  transform: translateX(-50%) rotate(45deg);
}
.profile-popover[data-side="bottom"]::before { top: -4px; }
.profile-popover[data-side="top"]::before { bottom: -4px; }
.profile-popover[data-side="top"] { transform-origin: 50% 100%; }

/* Footer trust line: quiet repeat of the badges. */
.profile-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: -10px;
  color: color-mix(in srgb, var(--profileDescriptionText) 72%, transparent);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
}
.profile-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}
.profile-trust-item:hover,
.profile-trust-item.is-open { color: var(--profileDescriptionText); background: color-mix(in srgb, var(--profileDescriptionText) 8%, transparent); }
.profile-trust-item:active { transform: scale(0.97); }
.profile-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #FFFFFF;
  flex: none;
}
.profile-trust-icon--id { background: #1D9BF0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9); }
.profile-trust-icon--selfie { background: linear-gradient(150deg, #CDB4F6 0%, #FF6A4D 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85); }
.profile-trust-sep { opacity: 0.65; }

/* ---------- 11. QR aside -------------------------------------------------- */
.profile-qr {
  position: fixed;
  right: 34px;
  bottom: 34px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.profile-qr p { font-size: 14px; font-weight: 500; line-height: 1.3; }
.profile-qr img {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 8px;
}
/* QR sits on the backdrop: desktop only. */
@media (max-width: 767.98px) {
  .profile-qr { display: none; }
}

/* ---------- 12. Motion / focus / toast ------------------------------------ */
@keyframes mms-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.profile-head-inner,
.profile-socials,
.profile-item,
.profile-footer {
  animation: mms-rise 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(60ms + var(--i, 0) * 45ms);
}
.profile-head-inner { --i: 0; }
.profile-socials { --i: 1; }

/* Admin preview iframe: skip entrance animations so saves don't flash. */
body[data-preview="1"] .profile-head-inner,
body[data-preview="1"] .profile-socials,
body[data-preview="1"] .profile-item,
body[data-preview="1"] .profile-footer { animation: none; }

:where(a, button, input):focus-visible {
  outline: 2px solid var(--profileTitleText);
  outline-offset: 2px;
}
.profile-topbar-btn:focus-visible { outline-color: #14151A; }
.profile-social:focus-visible { outline-offset: 1px; border-radius: 50%; }

.mms-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 999px;
  background: #14151A;
  color: #FFFFFF;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.mms-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; }
  .profile-link--highlight::after { display: none; }
  .profile-link:active,
  .profile-pdf:active,
  .profile-cta:active,
  .profile-social:active { transform: none; }
}

/* ---------- 13. 404 page -------------------------------------------------- */
.mms-404-body {
  background: #F4F3EE;
  color: #14151A;
  font-family: "Inter", system-ui, sans-serif;
}
.mms-404-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(20, 21, 26, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 21, 26, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(closest-side at 50% 42%, #000 0%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 42%, #000 0%, transparent 100%);
}
.mms-404 {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 48px 24px 64px;
  text-align: center;
}
.mms-404-mark { display: inline-flex; border-radius: 18px; transition: transform 0.2s ease; }
.mms-404-mark:hover { transform: rotate(-4deg) scale(1.04); }
.mms-404-kicker {
  margin-top: 28px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6B6A66;
}
.mms-404-title {
  margin-top: 12px;
  max-width: 15ch;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.mms-404-accent {
  background: linear-gradient(transparent 62%, #B6EE56 62%);
  padding: 0 0.08em;
}
.mms-404-copy { margin-top: 16px; max-width: 44ch; font-size: 16px; line-height: 1.6; color: #45443F; }
.mms-404-copy strong { color: #14151A; }
.mms-404-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.mms-404-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  background: #14151A;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(20, 21, 26, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.mms-404-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20, 21, 26, 0.28); background: #23242B; }
.mms-404-cta:active { transform: scale(0.98); }
.mms-404-alt { font-size: 14px; font-weight: 500; color: #45443F; padding: 8px 6px; border-radius: 6px; transition: color 0.15s ease; }
.mms-404-alt:hover { color: #14151A; text-decoration: underline; text-underline-offset: 3px; }
.mms-404-tagline {
  margin-top: 56px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  color: #8A8983;
}
.mms-404 :focus-visible { outline: 2px solid #14151A; outline-offset: 3px; }