/* Public link page. Colours come from CSS variables set per user (see views/profile.php). */
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;scrollbar-width:none!important;-ms-overflow-style:none!important}
html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
body{font-family:var(--font),'Cairo',system-ui,sans-serif;color:var(--text);background:var(--bg);background-attachment:fixed;min-height:100vh;min-height:100dvh}
a{color:inherit;text-decoration:none}
#bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#bg>*{display:none}
#fx{position:absolute;inset:0;width:100%;height:100%}
.fx-stars #fx,.fx-moon #fx,.fx-synth #fx,.fx-bubbles #fx{display:block}
.fx-moon #bg .moon{display:block;position:absolute;top:5%;right:10%;width:clamp(110px,24vw,240px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fffbea,#ffe9a8 40%,#e3b341);box-shadow:0 0 90px 30px rgba(255,217,120,.3);animation:fl 9s ease-in-out infinite}
@keyframes fl{50%{transform:translateY(14px)}}
.fx-synth #bg .sun{display:block;position:absolute;left:50%;top:60%;width:min(80vw,440px);aspect-ratio:1;transform:translate(-50%,-62%);border-radius:50%;
  background:linear-gradient(180deg,#ffe36b,#ff7ac8 45%,#ff2bd6 70%,#7b3cff);opacity:.55;
  -webkit-mask:repeating-linear-gradient(180deg,#000 0 18px,transparent 18px 23px);mask:repeating-linear-gradient(180deg,#000 0 18px,transparent 18px 23px)}
.fx-synth #bg .grid{display:block;position:absolute;left:-50%;right:-50%;top:60%;bottom:-40%;opacity:.5;
  background-image:linear-gradient(#22e4ff 2px,transparent 2px),linear-gradient(90deg,#ff2bd6 2px,transparent 2px);background-size:70px 70px;
  transform:perspective(320px) rotateX(62deg);transform-origin:top;animation:run 1.6s linear infinite;
  -webkit-mask:linear-gradient(180deg,transparent,#000 30%);mask:linear-gradient(180deg,transparent,#000 30%)}
@keyframes run{to{background-position:0 70px,0 0}}

.page{position:relative;z-index:1;max-width:620px;margin:0 auto;padding:46px 18px 30px;display:flex;flex-direction:column;align-items:center;min-height:100vh;min-height:100dvh}
.pr{text-align:center;margin-bottom:18px;animation:up .6s both}
.av{width:104px;height:104px;border-radius:50%;object-fit:cover;margin:0 auto 14px;display:block;box-shadow:0 0 0 3.5px var(--av-border, color-mix(in srgb,var(--accent) 70%,transparent)),0 10px 30px rgba(0,0,0,.35);transition:box-shadow .2s ease}
.av.ph{display:grid;place-items:center;font-size:44px;font-weight:800;background:color-mix(in srgb,var(--text) 15%,transparent)}
h1{font-size:22px;font-weight:800}
.bio{margin-top:8px;opacity:.85;line-height:1.7;font-size:15px;max-width:460px}

/* Quick Icons Bar at the Top (Pure Icons, No Text) */
.soc-top-bar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin:4px 0 22px;max-width:100%}
.soc-quick-icon{
  width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--text) 8%,transparent);border:1px solid color-mix(in srgb,var(--text) 16%,transparent);
  text-decoration:none;transition:transform .18s,background .18s,border-color .18s;padding:7px;
}
.soc-quick-icon:hover{transform:translateY(-3px) scale(1.12);background:color-mix(in srgb,var(--text) 18%,transparent);border-color:var(--accent)}
.soc-quick-icon img{width:100%;height:100%;object-fit:contain}

/* Accounts Box in Body (Under Support) */
.acc-lnk{position:relative;display:flex;align-items:center;justify-content:center;min-height:58px;padding:10px 60px!important;text-decoration:none}
.acc-icon-wrap{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center}
.acc-icon-wrap img{width:22px;height:22px;object-fit:contain}
.acc-text{font-size:16px;font-weight:700;line-height:1.4;color:var(--btn-text);text-align:center}

.sec-block{width:100%;display:flex;flex-direction:column;align-items:center;margin-bottom:16px}
.sec-heading{
  font-size:14px;font-weight:800;letter-spacing:.4px;
  color:var(--text);
  margin:4px 0 12px;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;
}
.sec-heading::before,.sec-heading::after{
  content:"";flex:1;max-width:44px;height:1px;background:color-mix(in srgb,var(--accent) 45%,transparent);
}
.sup-lnk{
  width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:14px 20px!important;text-align:center;position:relative;text-decoration:none;
  border:1.5px solid color-mix(in srgb,var(--accent) 70%,transparent)!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--btn) 85%,#e11d48 10%),color-mix(in srgb,var(--btn) 90%,transparent))!important;
}
.sup-lnk .sup-icon{font-size:24px;line-height:1;margin-bottom:3px;display:inline-block;transform-origin:center}
.sup-fx-heartbeat{animation:fxHeartbeat 1.6s ease-in-out infinite}
.sup-fx-wobble{animation:fxWobble 1.8s ease-in-out infinite}
.sup-fx-bounce{animation:fxBounce 1.8s ease-in-out infinite}
.sup-fx-glow{animation:fxGlow 1.6s ease-in-out infinite}
.sup-fx-float{animation:fxFloat 2.2s ease-in-out infinite}
.sup-fx-none{animation:none}

@keyframes fxHeartbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
@keyframes fxWobble{0%,100%{transform:rotate(0deg) scale(1)}15%{transform:rotate(-14deg) scale(1.14)}30%{transform:rotate(12deg) scale(1.14)}45%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}75%{transform:rotate(0deg)}}
@keyframes fxBounce{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-8px) scale(1.12)}50%{transform:translateY(0) scale(.95)}70%{transform:translateY(-4px) scale(1.04)}85%{transform:translateY(0) scale(1)}}
@keyframes fxGlow{0%,100%{transform:scale(1);filter:drop-shadow(0 0 2px var(--gold2,#f5d27a))}50%{transform:scale(1.22);filter:drop-shadow(0 0 10px var(--gold2,#f5d27a)) brightness(1.2)}}
@keyframes fxFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(5deg) scale(1.08)}}
.sup-lnk .sup-main{font-size:16px;font-weight:800;color:var(--btn-text)}
.sup-lnk .sup-sub{font-size:12.5px;font-weight:600;opacity:.85;color:var(--btn-text);max-width:85%}

.links{width:100%;display:flex;flex-direction:column;gap:14px}
.sec{font-size:15px;font-weight:800;text-align:center;margin-top:10px;opacity:.9;animation:up .5s both;animation-delay:calc(var(--i)*60ms + 150ms)}
.lnk{position:relative;display:flex;align-items:center;justify-content:center;min-height:58px;padding:10px 64px;border-radius:var(--radius);
  font-weight:700;font-size:16px;text-align:center;line-height:1.4;color:var(--btn-text);background:var(--btn);
  transition:transform .18s cubic-bezier(.2,0,0,1),box-shadow .18s cubic-bezier(.2,0,0,1),background .18s ease,border-color .18s ease;
  animation:up .5s both;animation-delay:calc(var(--i)*60ms + 150ms);overflow:hidden}
.lnk:hover{transform:translateY(-2px)}
.lnk:active{transform:scale(.98)}
.lnk .th{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:calc(var(--radius) * .7);object-fit:cover}

/* Button Styles & Effects */
.b-fill .lnk{background:var(--btn);border:1px solid color-mix(in srgb,var(--btn-text) 14%,transparent);color:var(--btn-text);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.b-fill .lnk:hover{box-shadow:0 8px 24px rgba(0,0,0,.3)}

.b-outline .lnk{background:transparent!important;border:2px solid var(--accent,var(--btn-text))!important;color:var(--btn-text);box-shadow:none}
.b-outline .lnk:hover{background:color-mix(in srgb,var(--accent,var(--btn-text)) 14%,transparent)!important;border-color:var(--accent,var(--btn-text))!important;box-shadow:0 0 16px color-mix(in srgb,var(--accent,var(--btn-text)) 22%,transparent)}

.b-soft .lnk{background:var(--btn);border:1px solid color-mix(in srgb,var(--text) 14%,transparent);color:var(--btn-text);box-shadow:0 10px 24px -4px rgba(0,0,0,.36),0 4px 10px -2px rgba(0,0,0,.22)}
.b-soft .lnk:hover{transform:translateY(-3px);box-shadow:0 16px 32px -4px rgba(0,0,0,.46),0 6px 14px -2px rgba(0,0,0,.28)}

.b-hard .lnk{background:var(--btn);border:2.5px solid var(--accent,var(--btn-text))!important;color:var(--btn-text);box-shadow:4px 4px 0 var(--accent,var(--btn-text))!important;transition:transform .12s ease,box-shadow .12s ease}
.b-hard .lnk:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--accent,var(--btn-text))!important}
.b-hard .lnk:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--accent,var(--btn-text))!important}

.b-glass .lnk{background:color-mix(in srgb,var(--btn) 30%,transparent 70%)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid color-mix(in srgb,var(--text) 24%,transparent);color:var(--btn-text);box-shadow:0 8px 30px rgba(0,0,0,.25)}
.b-glass .lnk:hover{background:color-mix(in srgb,var(--btn) 48%,transparent 52%)!important;border-color:var(--accent,var(--btn-text));box-shadow:0 8px 30px color-mix(in srgb,var(--accent,var(--btn-text)) 30%,transparent)}

/* Support Button Cohesive Styling for hard / glass / soft */
.b-hard .sup-lnk{box-shadow:4px 4px 0 color-mix(in srgb,var(--accent) 80%,#000)!important}
.b-hard .sup-lnk:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 color-mix(in srgb,var(--accent) 80%,#000)!important}
.b-soft .sup-lnk{box-shadow:0 10px 24px -4px rgba(225,29,72,.28),0 4px 10px -2px rgba(0,0,0,.2)!important}
.b-glass .sup-lnk{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.empty{text-align:center;opacity:.7}
.pr h1{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.v-badge{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0;transition:transform .2s;cursor:default}
.v-badge:hover{transform:scale(1.15)}
.v-badge.vip{color:#c084fc;filter:drop-shadow(0 0 8px rgba(192,132,252,0.6))}
.v-badge.pro{color:#f5d27a;filter:drop-shadow(0 0 8px rgba(245,210,122,0.6))}
.v-badge.partner{color:#3ecf8e;filter:drop-shadow(0 0 8px rgba(62,207,142,0.6))}
@keyframes up{from{opacity:0;transform:translateY(14px)}}
.ft{margin-top:auto;padding-top:34px;display:flex;flex-direction:column;align-items:center;gap:8px}
.made{font-size:13px;font-weight:700;padding:8px 16px;border-radius:99px;background:color-mix(in srgb,var(--text) 12%,transparent);backdrop-filter:blur(8px)}
.rep{background:none;border:0;color:inherit;opacity:.5;font:inherit;font-size:12px;cursor:pointer}
#snd{position:fixed;z-index:5;top:14px;left:14px;width:44px;height:44px;border-radius:14px;border:1px solid color-mix(in srgb,var(--text) 25%,transparent);
  background:color-mix(in srgb,#000 35%,transparent);backdrop-filter:blur(10px);display:grid;place-items:center;cursor:pointer}
#snd svg{width:22px;height:22px;stroke:var(--text);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#snd .x{display:none}#snd.off .w{display:none}#snd.off .x{display:inline}
#gate{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(0,0,0,.92);color:#fff;text-align:center;padding:24px}
#gate h2{font-size:24px;margin-bottom:8px}#gate p{opacity:.8;margin-bottom:16px}
#gate button{font:inherit;font-weight:900;border:0;border-radius:99px;padding:12px 28px;cursor:pointer;background:linear-gradient(135deg,#f5d27a,#d4a843);color:#110f0a;box-shadow:0 4px 18px rgba(212,168,67,0.35);transition:transform .15s}
#gate button:hover{transform:translateY(-1px);filter:brightness(1.08)}
dialog{margin:auto;border:1px solid rgba(212,168,67,0.4);border-radius:20px;padding:24px;width:min(92vw,400px);font-family:inherit;background:#141310;color:#f3eee4;box-shadow:0 25px 70px rgba(0,0,0,0.95)}
dialog::backdrop{background:rgba(0,0,0,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
dialog h3{margin-bottom:12px;color:#f5d27a;font-weight:900}
dialog label{display:block;padding:6px 0;font-size:0.9rem;color:#dfdcd7}
dialog textarea{width:100%;margin-top:8px;border:1px solid #2a2722;border-radius:12px;padding:10px 12px;font:inherit;min-height:75px;background:#0e0d0b;color:#f3eee4}
dialog textarea:focus{border-color:#d4a843;outline:none}
dialog button{font:inherit;font-weight:800;border:0;border-radius:99px;padding:10px 20px;cursor:pointer}
dialog .dl{display:flex;gap:10px;margin-top:16px;justify-content:flex-end}
dialog .dl button:first-child{background:linear-gradient(135deg,#f5d27a,#d4a843);color:#110f0a}
dialog .dl button:last-child{background:#1f1d19;color:#a39a8a;border:1px solid #2a2722}
.is-preview .page{padding-top:34px}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}