:root{--bg:#08090d;--panel:rgba(255,255,255,.06);--border:rgba(255,255,255,.12);--text:#f6f7fb;--muted:#a9afbd;--accent:#8b5cf6;--accent2:#22d3ee}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}.home-shell{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:32px 20px;background:radial-gradient(circle at 20% 20%,rgba(139,92,246,.28),transparent 34%),radial-gradient(circle at 80% 30%,rgba(34,211,238,.18),transparent 30%),linear-gradient(160deg,#08090d 0%,#0d0e14 55%,#08090d 100%)}.home-card{width:min(920px,100%);padding:clamp(28px,5vw,64px);border:1px solid var(--border);background:rgba(12,13,19,.74);backdrop-filter:blur(18px);border-radius:30px;box-shadow:0 30px 100px rgba(0,0,0,.4)}.eyebrow{color:#c4b5fd;font-size:13px;letter-spacing:.15em;text-transform:uppercase;font-weight:800}.home-card h1{font-size:clamp(44px,9vw,86px);line-height:.96;margin:14px 0 18px;letter-spacing:-.055em}.lead{color:var(--muted);font-size:clamp(18px,2.6vw,24px);line-height:1.55;max-width:720px}.home-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.btn{border:0;border-radius:14px;padding:13px 18px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}.btn-primary{background:linear-gradient(135deg,#8b5cf6,#6d4aff);color:white;box-shadow:0 10px 30px rgba(139,92,246,.3)}.home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}.home-stat{padding:18px;background:var(--panel);border:1px solid var(--border);border-radius:18px}.home-stat strong{display:block;font-size:20px;margin-bottom:5px}.home-stat span{color:var(--muted);font-size:13px}/* --- root greeting: helloiam.online itself carries no admin link or feature copy on
   purpose — just a warm hello. The workspace lives at /adminhub instead. Pink + glitter,
   on brand-request: girly, sparkly, nothing clickable, nothing that reads as a button. --- */
.hello-shell{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:32px 20px;position:relative;overflow:hidden;background:radial-gradient(circle at 18% 8%,rgba(255,178,216,.9),transparent 46%),radial-gradient(circle at 86% 90%,rgba(255,150,196,.85),transparent 50%),linear-gradient(160deg,#ffe0ef 0%,#ffc7e1 55%,#ffb3d6 100%)}
.hello-glow{position:absolute;inset:-30%;background:radial-gradient(circle at 50% 30%,rgba(255,90,170,.32),transparent 50%);filter:blur(70px);animation:helloGlow 9s ease-in-out infinite alternate;pointer-events:none}
.hello-card{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.hello-monkey{font-size:clamp(90px,20vw,190px);display:inline-block;animation:peekBounce 3s ease-in-out infinite;filter:drop-shadow(0 14px 30px rgba(214,25,110,.35));margin-bottom:-6px}
.hello-peek{font-family:'Fraunces',ui-serif,Georgia,serif;font-style:italic;font-weight:600;font-size:clamp(48px,10vw,96px);line-height:.98;letter-spacing:-.015em;margin:0;background:linear-gradient(135deg,#e6116e 8%,#ff2f8f 55%,#ff7bb8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 22px rgba(214,25,110,.3))}
.hello-sub{margin:16px 0 0;font-family:'Fraunces',ui-serif,Georgia,serif;font-style:italic;font-size:clamp(22px,3.6vw,30px);font-weight:600;letter-spacing:.002em;color:#611036;max-width:26ch;line-height:1.48;text-shadow:0 2px 0 rgba(255,255,255,.5)}
.hello-sub b{font-weight:800;color:#3d0a22}
.hello-sub .no-italic{font-style:normal;display:inline-block}
/* glitter + cutesy bits: a fixed field of tiny sparkles, hearts and bows that twinkle at
   their own pace — pure CSS, no JS, so it costs nothing and never blocks the (non-existent) UI. */
.hello-sparkles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hello-sparkles span{position:absolute;display:block;opacity:0;animation:sparkleTwinkle 3.2s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(214,25,110,.5))}
.hello-sparkles span.star{color:#ff5fa8;text-shadow:0 0 10px rgba(214,25,110,.7)}
.hello-sparkles span:nth-child(1){top:10%;left:9%;font-size:20px;animation-delay:.1s}
.hello-sparkles span:nth-child(2){top:16%;left:87%;font-size:26px;animation-delay:1.4s}
.hello-sparkles span:nth-child(3){top:70%;left:6%;font-size:22px;animation-delay:.7s}
.hello-sparkles span:nth-child(4){top:80%;left:89%;font-size:24px;animation-delay:2.1s}
.hello-sparkles span:nth-child(5){top:4%;left:50%;font-size:18px;animation-delay:1.8s}
.hello-sparkles span:nth-child(6){top:90%;left:24%;font-size:22px;animation-delay:.4s}
.hello-sparkles span:nth-child(7){top:38%;left:3%;font-size:17px;animation-delay:2.6s}
.hello-sparkles span:nth-child(8){top:28%;left:95%;font-size:19px;animation-delay:1.1s}
.hello-sparkles span:nth-child(9){top:58%;left:94%;font-size:24px;animation-delay:.9s}
.hello-sparkles span:nth-child(10){top:3%;left:22%;font-size:18px;animation-delay:2.3s}
.hello-sparkles span:nth-child(11){top:94%;left:14%;font-size:17px;animation-delay:1.6s}
.hello-sparkles span:nth-child(12){top:44%;left:97%;font-size:19px;animation-delay:.2s}
.hello-sparkles span:nth-child(13){top:12%;left:70%;font-size:21px;animation-delay:1.1s}
.hello-sparkles span:nth-child(14){top:92%;left:76%;font-size:20px;animation-delay:2.4s}
@keyframes helloGlow{from{opacity:.45;transform:scale(1)}to{opacity:.85;transform:scale(1.08)}}
@keyframes peekBounce{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes sparkleTwinkle{0%,100%{opacity:0;transform:scale(.55) rotate(0deg)}50%{opacity:1;transform:scale(1.15) rotate(20deg)}}
@media(prefers-reduced-motion:reduce){.hello-glow,.hello-monkey,.hello-sparkles span{animation:none}.hello-sparkles span{opacity:.7}}

/* Root greeting refresh: a balanced sky-blue, blush-pink and white palette with a
   lightweight glass card. The animated asset has a still fallback for reduced motion. */
.hello-shell{
  padding:clamp(20px,4vw,44px) 18px;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.98) 0 18%,rgba(255,255,255,.7) 36%,transparent 58%),
    radial-gradient(circle at 13% 14%,rgba(151,220,255,.88),transparent 42%),
    radial-gradient(circle at 88% 84%,rgba(255,188,215,.82),transparent 45%),
    linear-gradient(145deg,#e0f5ff 0%,#fff 49%,#ffe5ef 100%);
}
.hello-shell::before,.hello-shell::after{
  content:"";
  position:absolute;
  width:min(44vw,520px);
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(18px);
  opacity:.42;
  pointer-events:none;
}
.hello-shell::before{left:-16%;bottom:-30%;background:#98ddff}
.hello-shell::after{right:-17%;top:-31%;background:#ffc0d8}
.hello-glow{
  inset:-20%;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.88),transparent 45%);
  filter:blur(50px);
  animation:helloGlow 10s ease-in-out infinite alternate;
}
.hello-card{
  width:min(700px,100%);
  padding:clamp(22px,4vw,42px) clamp(18px,5vw,54px) clamp(28px,5vw,48px);
  gap:0;
  border:1px solid rgba(255,255,255,.88);
  border-radius:clamp(28px,5vw,44px);
  background:linear-gradient(150deg,rgba(255,255,255,.82),rgba(255,255,255,.58));
  box-shadow:0 28px 85px -38px rgba(51,103,139,.38),0 18px 54px -42px rgba(207,77,128,.42),inset 0 1px 0 #fff;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.hello-visual{
  position:relative;
  width:min(520px,96%);
  aspect-ratio:1790/1007;
  display:grid;
  place-items:center;
  margin:0 auto clamp(8px,2vw,16px);
  overflow:hidden;
  border-radius:34% 34% 30% 30% / 42% 42% 28% 28%;
  background:radial-gradient(ellipse at center,#fff 0 42%,rgba(255,255,255,.82) 58%,rgba(255,255,255,0) 76%);
}
.hello-monkey{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  margin:0;
  font-size:0;
  filter:drop-shadow(0 16px 20px rgba(78,55,46,.16));
  mix-blend-mode:multiply;
}
.hello-monkey-still{display:none}
.hello-peek{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  font-style:normal;
  font-weight:800;
  font-size:clamp(42px,8vw,78px);
  line-height:1;
  letter-spacing:-.055em;
  background:linear-gradient(105deg,#287ca6 8%,#526fa2 45%,#d15d89 92%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:none;
}
.hello-sub{
  display:flex;
  flex-direction:column;
  gap:4px;
  max-width:none;
  margin:18px 0 0;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  font-style:normal;
  font-size:clamp(17px,2.8vw,23px);
  font-weight:600;
  line-height:1.42;
  letter-spacing:-.018em;
  color:#344d63;
  text-shadow:none;
}
.hello-sub>span:last-child{color:#9b4f70;font-weight:700}
.hello-sparkles span{
  color:#fff;
  text-shadow:0 0 14px rgba(62,161,211,.5),0 0 24px rgba(226,104,152,.3);
  filter:none;
}
@media(max-width:560px){
  .hello-card{padding-top:18px}
  .hello-visual{width:108%;margin-left:-4%;margin-right:-4%;border-radius:30%}
  .hello-sub{margin-top:14px;gap:2px}
}
@media(prefers-reduced-motion:reduce){
  .hello-monkey-motion{display:none}
  .hello-monkey-still{display:block}
  .hello-glow,.hello-sparkles span{animation:none}
  .hello-sparkles span{opacity:.65}
}

.profile-shell{--profile-accent:#8b5cf6;--profile-bg:#09090b;--ring-width:5px;--ring-style:solid;--ring-color:#111118;--ring-shadow:0 14px 40px rgba(0,0,0,.35);min-height:100vh;min-height:100dvh;display:grid;place-items:start center;padding:34px 16px 60px;position:relative;overflow:hidden;background:var(--profile-bg)}.profile-bg-glow{position:fixed;inset:-20%;background:radial-gradient(circle at 50% 12%,color-mix(in srgb,var(--profile-accent) 38%,transparent),transparent 34%);filter:blur(35px);pointer-events:none}.profile-card{width:min(560px,100%);border:1px solid rgba(255,255,255,.12);border-radius:30px;overflow:hidden;background:rgba(15,15,20,.78);box-shadow:0 35px 100px rgba(0,0,0,.48);backdrop-filter:blur(20px);position:relative;z-index:1}.cover{height:190px;background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 90%,#111),#15151b);background-size:cover;background-position:center}.profile-content{padding:0 24px 28px;text-align:center}.avatar-wrap{margin-top:-58px;display:flex;justify-content:center}.avatar{position:relative;overflow:hidden;width:116px;height:116px;border-radius:50%;border:var(--ring-width) var(--ring-style) var(--ring-color);background:#1c1c24;box-shadow:var(--ring-shadow)}
.avatar-photo{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;transform:scale(var(--avatar-zoom,1))}.avatar-fallback{display:grid;place-items:center;font-weight:900;font-size:42px;background:linear-gradient(135deg,var(--profile-accent),#20202a)}.profile-name{font-size:30px;letter-spacing:-.035em;margin:18px 0 3px}.profile-handle{color:#b8bdca;font-size:14px}.profile-sub-bio{color:#9ba2b2;font-size:13px;line-height:1.55;margin:-8px auto 18px;max-width:440px;white-space:pre-wrap}.profile-bio{color:#c5c9d3;line-height:1.62;margin:16px auto 18px;max-width:440px;white-space:pre-wrap}.social-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 20px}.social-chip{font-size:12px;font-weight:800;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#eef0f6}.links-stack{display:flex;flex-direction:column;gap:12px}.profile-link{min-height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-radius:17px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.12);font-weight:800;transition:.18s ease;text-align:left}.profile-link:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--profile-accent) 60%,white 10%);background:rgba(255,255,255,.11)}.link-arrow{color:var(--profile-accent);font-size:19px}.profile-footer{margin-top:24px;font-size:12px;color:#707684;font-weight:700}.blocked-body{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:20px;background:#09090b}.blocked-card{width:min(480px,100%);padding:42px;text-align:center;border-radius:28px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055)}.blocked-icon{font-size:44px;color:#fb7185}.blocked-card h1{font-size:34px;margin:15px 0 8px}.blocked-card p,.blocked-card small{color:#a9afbd}/* --- layout templates --- */
/* --- centered shell + photo backdrop --- */
.profile-shell{display:flex;flex-direction:column;align-items:center;background:var(--shell-bg,var(--profile-bg))}
.profile-card{display:flex;flex-direction:column;margin:auto}
.profile-card>*{flex:0 0 auto}
.profile-content{margin:auto 0}
.profile-photo-bg{position:fixed;inset:-4%;z-index:0;background-size:cover;background-repeat:no-repeat;transform:scale(1.06)}
.profile-photo-scrim{position:fixed;inset:0;z-index:0;background:rgba(0,0,0,var(--photo-dim,.35))}.profile-shell[data-photo-backdrop="1"][data-scheme=light] .profile-photo-scrim{background:rgba(255,255,255,var(--photo-dim,.35))}
.profile-photo-vignette{position:fixed;inset:0;z-index:0;background:radial-gradient(circle at 50% 42%,rgba(0,0,0,0) 26%,rgba(0,0,0,.78) 100%);pointer-events:none}
.profile-bg-glow{z-index:1}
.profile-shell:not([data-cover=banner]) .avatar-wrap{margin-top:0}
.profile-shell:not([data-cover=banner]) .profile-content{padding-top:26px}
.profile-shell:not([data-cover=banner])[data-layout=hero] .avatar-wrap,.profile-shell:not([data-cover=banner])[data-layout=banner] .avatar-wrap,.profile-shell:not([data-cover=banner])[data-layout=row] .avatar-wrap{margin-top:0}
.profile-shell:not([data-cover=banner])[data-layout=hero] .profile-content{padding-top:34px}
.profile-shell:not([data-cover=banner])[data-layout=banner] .profile-content{padding-top:30px}
.profile-shell:not([data-cover=banner])[data-layout=row] .profile-content{padding-top:24px}
.profile-shell[data-photo-backdrop="1"] .profile-card{background:rgba(10,10,15,.44);backdrop-filter:blur(26px);border-color:rgba(255,255,255,.16)}
.profile-shell[data-photo-backdrop="1"] .profile-link{background:rgba(255,255,255,.1)}
.profile-shell[data-photo-backdrop="1"][data-scheme=light] .profile-card{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.7)}
.profile-shell[data-photo-backdrop="1"][data-scheme=light] .profile-link{background:rgba(255,255,255,.6)}
.profile-shell[data-layout=hero]{padding:0 16px 60px}
.profile-shell[data-layout=hero] .profile-card{width:min(680px,100%);border-radius:34px}
.profile-shell[data-layout=hero] .cover{height:300px}
.profile-shell[data-layout=hero] .avatar-wrap{margin-top:-84px}
.profile-shell[data-layout=hero] .avatar{width:156px;height:156px;border-width:6px}
.profile-shell[data-layout=hero] .profile-content{padding:0 30px 34px}
.profile-shell[data-layout=hero] .profile-name{font-size:38px}
.profile-shell[data-layout=hero] .profile-link{min-height:66px;border-radius:19px}
.profile-shell[data-layout=spotlight]{padding:0 16px 60px;background:radial-gradient(circle at 50% 0%,var(--accent-soft),transparent 44%),var(--shell-bg,var(--profile-bg))}
.profile-shell[data-layout=spotlight] .profile-card{width:min(520px,100%);border:0;background:transparent;box-shadow:none;backdrop-filter:none;border-radius:0}
.profile-shell[data-layout=spotlight] .profile-content{padding:56px 24px 28px}
.profile-shell[data-layout=spotlight] .cover{display:none}
.profile-shell[data-layout=spotlight] .avatar-wrap{margin-top:0}
.profile-shell[data-layout=spotlight] .avatar{width:176px;height:176px;animation:ringPulse 4.6s ease-in-out infinite}
.profile-shell[data-layout=minimal]{padding:0}
.profile-shell[data-layout=minimal] .profile-card{width:min(520px,100%);min-height:100vh;min-height:100dvh;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;padding-top:52px}
.profile-shell[data-layout=minimal] .cover{display:none}
.profile-shell[data-layout=minimal] .avatar-wrap{margin-top:0}
.profile-shell[data-layout=minimal] .avatar{width:104px;height:104px;border-width:3px}
.profile-shell[data-layout=minimal] .profile-name{font-size:27px}
.profile-shell[data-layout=minimal] .profile-link{background:transparent;border-color:var(--accent-line);border-radius:999px;justify-content:center;min-height:54px;font-weight:700}
.profile-shell[data-layout=minimal] .link-arrow{display:none}
.profile-shell[data-layout=banner]{padding:0}
.profile-shell[data-layout=banner] .profile-card{width:min(620px,100%);border-radius:26px}
.profile-shell[data-layout=banner] .cover{height:210px}
.profile-shell[data-layout=banner] .profile-content{text-align:left;padding:0 26px 28px}
.profile-shell[data-layout=banner] .avatar-wrap{margin-top:-62px;justify-content:flex-start}
.profile-shell[data-layout=banner] .avatar{width:120px;height:120px;border-radius:26px}
.profile-shell[data-layout=banner] .profile-name{font-size:32px;margin-top:16px}
.profile-shell[data-layout=banner] .profile-bio{margin-left:0;margin-right:0;max-width:none}
.profile-shell[data-layout=banner] .social-row{justify-content:flex-start}
.profile-shell[data-layout=row]{padding:26px 16px 60px}
.profile-shell[data-layout=row] .profile-card{width:min(560px,100%);border-radius:26px}
.profile-shell[data-layout=row] .cover{display:none}
.profile-shell[data-layout=row] .profile-content{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;text-align:left;padding:24px 22px 26px}
.profile-shell[data-layout=row] .avatar-wrap{grid-column:1;grid-row:1/span 2;margin-top:0;justify-content:flex-start}
.profile-shell[data-layout=row] .avatar{width:92px;height:92px;border-width:4px}
.profile-shell[data-layout=row] .profile-name{grid-column:2;grid-row:1;font-size:26px;margin:0;align-self:end}
.profile-shell[data-layout=row] .profile-handle{grid-column:2;grid-row:2;align-self:start}
.profile-shell[data-layout=row] .profile-location{grid-column:2;grid-row:3;align-self:start;justify-self:start;margin-top:6px}
.profile-shell[data-layout=row] .profile-bio{grid-column:1/-1;grid-row:4;margin:16px 0 6px;max-width:none}
.profile-shell[data-layout=row] .profile-sub-bio{grid-column:1/-1;grid-row:5;margin:0 0 18px;max-width:none}
.profile-shell[data-layout=row] .social-row{grid-column:1/-1;grid-row:6;justify-content:flex-start;margin-top:0}
.profile-shell[data-layout=row] .links-stack{grid-column:1/-1;grid-row:7}
.profile-shell[data-sub-bio=below] .profile-sub-bio{margin:18px auto 0}
.profile-shell[data-layout=row][data-sub-bio=below] .profile-sub-bio{grid-row:8;margin:18px 0 0}
.profile-shell[data-layout=tiles]{padding:34px 16px 60px}
.profile-shell[data-layout=tiles] .cover{display:none}
.profile-shell[data-layout=tiles] .avatar-wrap{margin-top:0}
.profile-shell[data-layout=tiles] .profile-content{padding-top:36px}
.profile-shell[data-layout=tiles] .links-stack{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.profile-shell[data-layout=tiles] .profile-link{min-height:94px;justify-content:center;text-align:center;border-radius:20px;padding:14px;font-size:15px}
.profile-shell[data-layout=tiles] .link-arrow{display:none}
/* --- poster: malaking pangalan na naka-overlay sa cover --- */
.profile-shell[data-layout=poster]{padding:0 16px 60px}
.profile-shell[data-layout=poster] .profile-card{width:min(600px,100%);border-radius:30px}
.profile-shell[data-layout=poster] .cover{position:relative;height:clamp(320px,56vh,440px);display:flex;align-items:flex-end;justify-content:center}
.profile-shell[data-layout=poster] .cover::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.04) 36%,rgba(0,0,0,.74) 100%);pointer-events:none}
.profile-shell[data-layout=poster] .poster-caption{position:relative;z-index:1;width:100%;padding:0 26px 84px;text-align:center;pointer-events:none}
.profile-shell[data-layout=poster] .poster-caption .profile-name{color:#fff;font-size:clamp(38px,7.6vw,62px);line-height:.98;letter-spacing:-.045em;margin:0 0 7px;text-shadow:0 6px 30px rgba(0,0,0,.55)}
.profile-shell[data-layout=poster] .poster-caption .profile-handle{color:rgba(255,255,255,.88);text-shadow:0 2px 14px rgba(0,0,0,.55)}
.profile-shell[data-layout=poster] .profile-content{position:relative;z-index:2}
.profile-shell[data-layout=poster] .avatar-wrap{position:relative;z-index:3;margin-top:-64px}
.profile-shell[data-layout=poster] .avatar{width:124px;height:124px;border-width:5px}
.profile-shell[data-layout=poster] .profile-content{padding:0 26px 30px}
/* poster: laging may plate (totoong cover o gradient), kaya wala nang fallback dito */
/* --- link shape: hiwalay sa layout, kaya kahit anong kombinasyon --- */
.profile-shell[data-shape=stack] .links-stack{display:flex;flex-direction:column;gap:12px}
.profile-shell[data-shape=stack] .profile-link{justify-content:space-between;text-align:left}
/* pills: accent na tint, border at text — hindi na transparent na plain */
.profile-shell[data-shape=pills] .links-stack{display:flex;flex-direction:column;gap:10px}
.profile-shell[data-shape=pills]:not([data-layout=minimal]) .profile-link{background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 24%,transparent),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));border-color:var(--accent-line);border-radius:999px;justify-content:center;text-align:center;min-height:56px;font-weight:800;color:color-mix(in srgb,var(--profile-accent) 44%,#ffffff);box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.profile-shell[data-shape=pills]:not([data-layout=minimal]) .profile-link:hover{border-color:var(--profile-accent);background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 34%,transparent),transparent 64%),linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));box-shadow:0 12px 28px color-mix(in srgb,var(--profile-accent) 34%,transparent),inset 0 1px 0 rgba(255,255,255,.16)}
.profile-shell[data-shape=pills] .link-arrow{display:none}
/* Ang accent tint ng pills na ngayon ang basehan ng lahat ng shape: isang beses lang nakasulat,
   kaya pantay ang ganda ng stack, tiles at grid — ang hugis (radius, taas, alignment) na lang
   ang pinag-iba nila. Naiiwan ang plain na itsura sa photo cover at minimal layout, kung saan
   ang backdrop o ang sariling patakaran ng layout ang nagtatakda ng kulay. */
.profile-shell[data-shape]:not([data-layout=minimal]):not([data-cover=photo]) .profile-link{background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 24%,transparent),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));border-color:var(--accent-line);color:color-mix(in srgb,var(--profile-accent) 44%,#ffffff);box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.profile-shell[data-shape]:not([data-layout=minimal]):not([data-cover=photo]) .profile-link:hover{border-color:var(--profile-accent);background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 34%,transparent),transparent 64%),linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));box-shadow:0 12px 28px color-mix(in srgb,var(--profile-accent) 34%,transparent),inset 0 1px 0 rgba(255,255,255,.16)}
.profile-shell[data-shape=tiles] .links-stack{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.profile-shell[data-shape=tiles] .profile-link{min-height:94px;justify-content:center;text-align:center;border-radius:20px;padding:14px;font-size:15px}
.profile-shell[data-shape=tiles] .link-arrow{display:none}
/* Kakaibang bilang ng link: naiiwan sa kalahating lapad ang huling tile at mukhang naputol.
   Ang huling tile (kapag odd ang pwesto nito) ay buong lapad — balanse ang 1, 3, 5 na link. */
.profile-shell[data-shape=tiles] .links-stack>.profile-link:last-child:nth-child(odd){grid-column:1/-1}
.profile-shell[data-shape=grid] .links-stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
/* Sa maliit na cell, ang arrow ay nauubos ang kalahati ng lapad at nagkakandapilas ang mahabang
   label — kaya naka-center ito sa sariling kahon, kaparehas ng tiles. */
.profile-shell[data-shape=grid] .profile-link{min-height:64px;border-radius:16px;padding:12px 16px;font-size:13.5px;justify-content:center;text-align:center}
.profile-shell[data-shape=grid] .link-arrow{display:none}
/* --- subtle motion, lahat transform/opacity lang --- */
/* fill-mode:backwards — once the entry animation ends it no longer owns transform, so it cannot mask the hover motion. */
.profile-card{animation:profileCardIn .62s cubic-bezier(.22,.7,.3,1) backwards}
.social-chip,.profile-link{animation:profileItemIn .5s cubic-bezier(.22,.7,.3,1) backwards;animation-delay:calc(var(--i,0) * 55ms + 130ms)}
.profile-bg-glow{animation:profileGlow 12s ease-in-out infinite alternate}
.link-arrow{transition:transform .18s ease}
.profile-link:hover .link-arrow{transform:translate(3px,-3px)}
@keyframes profileCardIn{from{opacity:0;transform:translateY(14px) scale(.995)}to{opacity:1;transform:none}}
@keyframes profileItemIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes profileGlow{from{opacity:.7}to{opacity:1}}
@keyframes ringPulse{0%,100%{box-shadow:0 0 0 10px var(--accent-soft),0 0 64px var(--accent-glow)}50%{box-shadow:0 0 0 18px rgba(0,0,0,0),0 0 92px var(--accent-glow)}}
@media(prefers-reduced-motion:reduce){.profile-card,.social-chip,.profile-link,.profile-bg-glow,.presence-dot,.profile-shell[data-layout=spotlight] .avatar{animation:none!important;transition:none!important}.profile-link:hover{transform:none}.profile-shell[data-motion] .profile-link:hover,.profile-shell[data-motion] .social-chip:hover{transform:none!important;animation:none!important}.profile-shell[data-motion=shine] .profile-link::after{display:none}}
/* --- light scheme: tinted sa accent, hindi puro puti — bawat preset may sariling kulay --- */
.profile-shell[data-scheme=light]{background:radial-gradient(circle at 14% 2%,color-mix(in srgb,var(--profile-accent) 24%,transparent),transparent 42%),radial-gradient(circle at 88% 96%,color-mix(in srgb,var(--profile-accent) 16%,transparent),transparent 46%),var(--shell-bg-light,var(--shell-bg))}
.profile-shell[data-scheme=light] .profile-bg-glow{opacity:.42}
.profile-shell[data-scheme=light]:not([data-cover=photo]):not([data-layout=spotlight]):not([data-layout=minimal]) .profile-card{background:linear-gradient(165deg,color-mix(in srgb,var(--profile-bg-light) 94%,#ffffff),color-mix(in srgb,var(--profile-accent) 15%,var(--profile-bg-light)));border-color:color-mix(in srgb,var(--profile-accent) 26%,transparent);box-shadow:0 28px 72px color-mix(in srgb,var(--profile-accent) 26%,rgba(20,20,32,.16))}
.profile-shell[data-scheme=light] .profile-name{color:#12121b}
.profile-shell[data-scheme=light] .profile-handle{color:color-mix(in srgb,var(--profile-accent) 32%,#4b4f5e)}
.profile-shell[data-scheme=light] .profile-bio{color:#3a3e4d}.profile-shell[data-scheme=light] .profile-sub-bio{color:#5c6273}
.profile-shell[data-scheme=light] .social-chip{background:color-mix(in srgb,var(--profile-accent) 12%,#ffffff);border-color:color-mix(in srgb,var(--profile-accent) 24%,transparent);color:#1b1b26}
.profile-shell[data-scheme=light]:not([data-cover=photo]) .profile-link{background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 13%,#ffffff),color-mix(in srgb,var(--profile-bg-light) 60%,#ffffff));border-color:color-mix(in srgb,var(--profile-accent) 22%,transparent);color:#14141d}
.profile-shell[data-scheme=light]:not([data-cover=photo]) .profile-link:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 24%,#ffffff),color-mix(in srgb,var(--profile-bg-light) 52%,#ffffff));border-color:color-mix(in srgb,var(--profile-accent) 48%,transparent)}
.profile-shell[data-scheme=light] .profile-footer{color:#676b79}
.profile-shell[data-scheme=light] .cover{background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 78%,#ffffff),color-mix(in srgb,var(--profile-bg-2-light) 74%,#ffffff))}
.profile-shell[data-scheme=light] .avatar{background:#e8e8ee}
.profile-shell[data-scheme=light] .avatar-fallback{background:linear-gradient(135deg,var(--profile-accent),color-mix(in srgb,var(--profile-accent) 22%,#ffffff))}
.profile-shell[data-scheme=light][data-layout=hero]:not([data-cover=banner]) .profile-card::before{background:radial-gradient(circle at 20% 12%,color-mix(in srgb,var(--profile-accent) 34%,transparent),transparent 62%),radial-gradient(circle at 82% 6%,color-mix(in srgb,var(--profile-accent) 20%,transparent),transparent 58%),linear-gradient(140deg,color-mix(in srgb,var(--profile-accent) 22%,transparent),transparent 78%);border-bottom-color:color-mix(in srgb,var(--profile-accent) 18%,transparent)}
.profile-shell[data-scheme=light][data-shape=pills]:not([data-layout=minimal]) .profile-link{background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 26%,#ffffff),color-mix(in srgb,var(--profile-bg-light) 58%,#ffffff));border-color:color-mix(in srgb,var(--profile-accent) 32%,transparent);color:color-mix(in srgb,var(--profile-accent) 78%,#101018);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
/* Kaparehas na treatment sa light scheme — kung wala ito, mananaig ang madilim na gradient ng
   dark mode dito at magiging puti-sa-puti ang mga link. */
.profile-shell[data-scheme=light][data-shape]:not([data-layout=minimal]):not([data-cover=photo]) .profile-link{background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 26%,#ffffff),color-mix(in srgb,var(--profile-bg-light) 58%,#ffffff));border-color:color-mix(in srgb,var(--profile-accent) 32%,transparent);color:color-mix(in srgb,var(--profile-accent) 78%,#101018);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.profile-shell[data-scheme=light][data-shape]:not([data-layout=minimal]):not([data-cover=photo]) .profile-link:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 36%,#ffffff),color-mix(in srgb,var(--profile-bg-light) 50%,#ffffff));border-color:color-mix(in srgb,var(--profile-accent) 54%,transparent)}

/* --- presence badge: online/offline --- */
.profile-presence{display:inline-flex;align-items:center;gap:6px;margin-left:9px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.01em;vertical-align:middle;border:1px solid transparent;white-space:nowrap}
.presence-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
/* Kapag ang online badge lang ang laman ng handle row (wala nang "@handle"), alisin ang
   margin-left na pang-tabi sana sa handle text para perpektong naka-center ito. */
.profile-handle .profile-presence:only-child{margin-left:0}
.profile-presence[data-state=online]{color:#34d399;background:rgba(52,211,153,.15);border-color:rgba(52,211,153,.36)}
.profile-presence[data-state=online] .presence-dot{background:#34d399;animation:presencePulse 2.4s ease-in-out infinite}
.profile-presence[data-state=offline]{color:#9aa2b4;background:rgba(154,162,180,.15);border-color:rgba(154,162,180,.32)}
.profile-presence[data-state=offline] .presence-dot{background:#9aa2b4}
.profile-shell[data-scheme=light] .profile-presence[data-state=online]{color:#047857;background:rgba(4,120,87,.12);border-color:rgba(4,120,87,.3)}
.profile-shell[data-scheme=light] .profile-presence[data-state=online] .presence-dot{background:#10b981}
.profile-shell[data-scheme=light] .profile-presence[data-state=offline]{color:#565d6e;background:rgba(86,93,110,.12);border-color:rgba(86,93,110,.26)}
.profile-shell[data-scheme=light] .profile-presence[data-state=offline] .presence-dot{background:#8a90a0}
@keyframes presencePulse{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 6px rgba(52,211,153,0)}}

/* --- location row: pin at lugar sa ilalim ng pangalan at handle --- */
.profile-location{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:13px;font-weight:700;letter-spacing:.01em;color:#9aa2b4;max-width:100%}
.profile-location span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pin-icon{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:var(--profile-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.profile-shell[data-scheme=light] .profile-location{color:color-mix(in srgb,var(--profile-accent) 26%,#4b4f5e)}
.profile-shell[data-layout=poster] .poster-caption .profile-location{color:rgba(255,255,255,.9);text-shadow:0 2px 14px rgba(0,0,0,.55)}
.profile-shell[data-layout=poster] .poster-caption .pin-icon{stroke:#ffffff}
@media(max-width:540px){.profile-shell[data-layout=row] .profile-location{margin-top:5px}}

/* --- avatar ring: mapipili ang kulay at style ng bilog --- */
.profile-shell[data-ring=plain]{--ring-color:#111118}
.profile-shell[data-scheme=light][data-ring=plain]{--ring-color:#ffffff}
.profile-shell[data-ring=accent]{--ring-color:var(--profile-accent)}
.profile-shell[data-ring=glow]{--ring-color:var(--profile-accent);--ring-shadow:0 0 0 6px var(--accent-soft),0 0 42px var(--accent-glow)}
.profile-shell[data-ring=dashed]{--ring-color:var(--profile-accent);--ring-style:dashed}
.profile-shell[data-ring=none]{--ring-color:transparent;--ring-shadow:none}
.profile-shell[data-ring=none] .avatar{border-width:0}
.profile-shell[data-ring=gradient] .avatar{border-color:transparent;background-image:linear-gradient(150deg,var(--profile-accent),#20202a),linear-gradient(150deg,var(--ring-color,var(--profile-accent)),color-mix(in srgb,var(--profile-accent) 32%,#ffffff));background-origin:border-box;background-clip:padding-box,border-box}
.profile-shell[data-layout=spotlight][data-ring=plain] .avatar{border-color:transparent}
.profile-shell[data-scheme=light][data-ring=gradient] .avatar{background-image:linear-gradient(150deg,var(--profile-accent),color-mix(in srgb,var(--profile-accent) 20%,#ffffff)),linear-gradient(150deg,var(--ring-color,var(--profile-accent)),color-mix(in srgb,var(--profile-accent) 42%,#ffffff))}

/* --- layout polish: hero, classic at banner na may accent kahit walang cover photo --- */
.profile-shell[data-layout=hero]:not([data-cover=banner]) .profile-card::before{content:'';position:absolute;inset:0 0 auto;height:150px;background:radial-gradient(circle at 20% 12%,color-mix(in srgb,var(--profile-accent) 58%,transparent),transparent 58%),radial-gradient(circle at 82% 6%,color-mix(in srgb,var(--profile-accent) 30%,transparent),transparent 54%),linear-gradient(140deg,color-mix(in srgb,var(--profile-accent) 30%,transparent),transparent 74%);border-bottom:1px solid color-mix(in srgb,var(--profile-accent) 26%,transparent);pointer-events:none}
.profile-shell[data-layout=hero]:not([data-cover=banner]) .avatar-wrap{margin-top:-24px}
.profile-shell[data-layout=hero]:not([data-cover=banner]) .profile-content{padding-top:96px}
.profile-shell[data-layout=classic]:not([data-cover=banner]) .profile-card::before{content:'';position:absolute;inset:0 0 auto;height:7px;background:linear-gradient(90deg,var(--profile-accent),color-mix(in srgb,var(--profile-accent) 34%,#ffffff));pointer-events:none}
.profile-shell[data-layout=classic]:not([data-cover=banner]) .profile-content{padding-top:42px}
.profile-shell[data-layout=banner]:not([data-cover=banner]) .profile-card::before{content:'';position:absolute;inset:0 auto 0 0;width:7px;background:linear-gradient(180deg,var(--profile-accent),color-mix(in srgb,var(--profile-accent) 26%,transparent) 60%,transparent);pointer-events:none}
.profile-shell[data-layout=banner]:not([data-cover=banner]) .profile-content{padding-left:32px}
.profile-shell[data-layout=poster] .cover.poster-plate{background-image:radial-gradient(circle at 16% 12%,color-mix(in srgb,var(--profile-accent) 72%,transparent),transparent 58%),radial-gradient(circle at 86% 86%,color-mix(in srgb,var(--profile-accent) 44%,transparent),transparent 52%),linear-gradient(150deg,color-mix(in srgb,var(--profile-accent) 84%,#000000),var(--profile-bg-2))}
.profile-shell[data-layout=poster] .cover.poster-plate::after{background:linear-gradient(to bottom,rgba(0,0,0,.02) 34%,rgba(0,0,0,.52) 100%)}
@media(max-width:680px){.home-grid{grid-template-columns:1fr}}@media(max-width:540px){.profile-shell{padding:0;align-items:start}.profile-card{border-radius:0;min-height:100vh;min-height:100dvh;border-left:0;border-right:0}.cover{height:180px}.profile-content{padding-left:18px;padding-right:18px}}
@media(max-width:540px){.profile-shell[data-layout=hero] .cover{height:220px}.profile-shell[data-layout=hero] .avatar{width:126px;height:126px}.profile-shell[data-layout=hero] .avatar-wrap{margin-top:-68px}.profile-shell[data-layout=hero] .profile-name{font-size:30px}.profile-shell[data-layout=hero] .profile-content{padding:0 18px 26px}.profile-shell[data-layout=spotlight] .avatar{width:138px;height:138px}.profile-shell[data-layout=spotlight] .profile-content{padding-top:40px}.profile-shell[data-layout=banner] .cover{height:170px}.profile-shell[data-layout=banner] .avatar{width:96px;height:96px;border-radius:22px}.profile-shell[data-layout=banner] .avatar-wrap{margin-top:-50px}.profile-shell[data-layout=banner] .profile-content{padding:0 18px 24px}.profile-shell[data-layout=row] .profile-content{padding:20px 16px 22px}.profile-shell[data-layout=row] .avatar{width:74px;height:74px}.profile-shell[data-layout=tiles] .links-stack{grid-template-columns:1fr}.profile-shell[data-layout=banner] .profile-card,.profile-shell[data-layout=row] .profile-card,.profile-shell[data-layout=tiles] .profile-card{min-height:0;border-radius:24px;border-left-width:1px;border-right-width:1px}.profile-shell{align-items:center}.profile-photo-bg{inset:-7%}}
@media(max-width:540px){.profile-shell[data-layout=poster] .cover{height:clamp(260px,44vh,330px)}.profile-shell[data-layout=poster] .poster-caption{padding:0 18px 76px}.profile-shell[data-layout=poster] .poster-caption .profile-name{font-size:clamp(32px,9.2vw,46px)}.profile-shell[data-layout=poster] .profile-content{padding:0 18px 26px}.profile-shell[data-layout=poster] .avatar{width:108px;height:108px}.profile-shell[data-shape=tiles] .links-stack{grid-template-columns:1fr}.profile-shell[data-shape=grid] .links-stack{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.profile-shell[data-layout=hero]:not([data-cover=banner]) .profile-card::before{height:126px}.profile-shell[data-layout=hero]:not([data-cover=banner]) .avatar-wrap{margin-top:-6px}.profile-shell[data-layout=hero]:not([data-cover=banner]) .profile-content{padding-top:78px;margin:0}.profile-shell[data-layout=classic]:not([data-cover=banner]) .profile-content{padding-top:36px}.profile-shell[data-layout=banner]:not([data-cover=banner]) .profile-content{padding-left:26px}.profile-shell[data-layout=poster] .profile-content{margin:0}}

/* --- link & chip hover motion (chosen in admin) --- */
.profile-shell[data-motion=pop] .profile-link:hover{transform:translateY(-6px)}
.profile-shell[data-motion=pop] .social-chip:hover{transform:translateY(-3px)}
.profile-shell[data-motion=grow] .profile-link:hover{transform:scale(1.035)}
.profile-shell[data-motion=grow] .social-chip:hover{transform:scale(1.1)}
.profile-shell[data-motion=wiggle] .profile-link:hover{animation:linkWiggle .55s ease-in-out}
.profile-shell[data-motion=wiggle] .social-chip:hover{animation:chipWiggle .45s ease-in-out}
/* !important: the pills/light-scheme hover rules set their own box-shadow at a higher specificity. */
.profile-shell[data-motion=glow] .profile-link:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--profile-accent) 55%,transparent),0 18px 42px var(--accent-glow)!important}
.profile-shell[data-motion=glow] .social-chip:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--profile-accent) 55%,transparent)}
.profile-shell[data-motion=shine] .profile-link{position:relative;overflow:hidden}
.profile-shell[data-motion=shine] .profile-link::after{content:'';position:absolute;top:-20%;bottom:-20%;left:-55%;width:42%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);transform:skewX(-18deg);opacity:0;pointer-events:none}
.profile-shell[data-motion=shine] .profile-link:hover::after{animation:linkShine .8s ease}
@keyframes linkWiggle{0%,100%{transform:rotate(0) translateY(-2px)}22%{transform:rotate(-1.4deg) translateY(-2px)}60%{transform:rotate(1.4deg) translateY(-2px)}80%{transform:rotate(-.6deg) translateY(-2px)}}
@keyframes chipWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}70%{transform:rotate(4deg)}}
@keyframes linkShine{0%{left:-55%;opacity:0}25%{opacity:1}100%{left:125%;opacity:0}}

/* --- 404 page: shares the blocked card, adds the brand mark and a way home. --- */
.nf-card{padding:clamp(30px,6vw,46px)}
.nf-mark{width:58px;height:58px;margin:0 auto 16px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:25px;font-weight:800;letter-spacing:-.02em}
.nf-card .eyebrow{display:block;margin-bottom:6px}
.nf-card h1{font-size:clamp(30px,7vw,38px)}
.nf-card p{margin:0 auto;max-width:36ch}
.nf-actions{margin-top:22px;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}

/* --- Long strings and very small phones (last in the file on purpose: the overrides
   below have to beat the media blocks above, which use the same specificity). --- */
/* A URL used as a link label, a very long display name or handle, or a long unbroken
   word must wrap inside its own box instead of spilling out of the card and getting cut. */
.profile-name,.profile-handle,.profile-bio,.profile-sub-bio,.profile-link,.profile-link>span:not(.link-arrow),.social-chip,.poster-caption .profile-name{overflow-wrap:anywhere}
/* The label is a flex item, so it needs min-width:0 before it may shrink and wrap.
   The arrow is a span too — it must keep its own width, so it is excluded here. */
.profile-link>span:not(.link-arrow){min-width:0}
/* Two columns of ~140px turn long labels into a stack of lines on a small phone,
   so the grid shape falls back to one column, exactly like the tile shape already does. */
@media(max-width:430px){.profile-shell[data-shape=grid] .links-stack{grid-template-columns:1fr}}
/* Visitor-location rows with no proxy fallback stay hidden until browser geolocation succeeds. */
.profile-location.is-pending{display:none}

/* Production polish: subtle entrance, keyboard focus, and calmer interactions. */
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,.profile-link:focus-visible,.social-chip:focus-visible{
  outline:2px solid color-mix(in srgb,var(--profile-accent,var(--accent)) 72%,#ffffff 18%);
  outline-offset:3px;
}
.profile-card,.blocked-card,.home-card,.hello-card{animation:publicSurfaceIn .42s cubic-bezier(.2,.72,.24,1) both}
.profile-link,.social-chip,.btn{transition:transform .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease,opacity .18s ease}
.profile-link:active,.social-chip:active,.btn:active{transform:scale(.985)}
@keyframes publicSurfaceIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .profile-card,.blocked-card,.home-card,.hello-card{animation:none!important}
  .profile-link,.social-chip,.btn{transition:none!important}
}

/* --- rich bio / forum-style formatting --- */
.profile-bio.rich-bio{white-space:normal}
.rich-bio strong{font-weight:800}.rich-bio em{font-style:italic}.rich-bio u{text-underline-offset:.14em}.rich-bio s{opacity:.72}
.rich-bio .bio-align{display:block;width:100%}.rich-bio .bio-left{text-align:left}.rich-bio .bio-center{text-align:center}.rich-bio .bio-right{text-align:right}
.rich-bio .bio-font-sans{font-family:var(--font,Arial,sans-serif)}.rich-bio .bio-font-serif{font-family:Georgia,"Times New Roman",serif}.rich-bio .bio-font-mono{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}.rich-bio .bio-font-cursive{font-family:"Segoe Print","Bradley Hand",cursive}
.rich-bio .bio-visitor-location{font:inherit;color:inherit}

/* --- permanent verified badge beside the public profile name --- */
.profile-name{display:flex;align-items:center;justify-content:center;gap:.22em;min-width:0}
.profile-name-text{min-width:0;overflow-wrap:anywhere}
.profile-verified{display:inline-flex;flex:0 0 auto;width:.72em;height:.72em;color:#3b82f6;vertical-align:.02em;filter:drop-shadow(0 1px 4px rgba(59,130,246,.22))}
.profile-verified svg{display:block;width:100%;height:100%}
.profile-shell[data-layout=row] .profile-name{justify-content:flex-start}
.profile-shell[data-layout=poster] .poster-caption .profile-name{justify-content:flex-start}


/* Bio font whitelist: system-safe stacks so formatting works without third-party font requests. */
.rich-bio .bio-font-system{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.rich-bio .bio-font-arial{font-family:Arial,Helvetica,sans-serif}
.rich-bio .bio-font-helvetica{font-family:Helvetica,Arial,sans-serif}
.rich-bio .bio-font-verdana{font-family:Verdana,Geneva,sans-serif}
.rich-bio .bio-font-tahoma{font-family:Tahoma,Verdana,sans-serif}
.rich-bio .bio-font-trebuchet{font-family:"Trebuchet MS",Arial,sans-serif}
.rich-bio .bio-font-georgia{font-family:Georgia,"Times New Roman",serif}
.rich-bio .bio-font-times{font-family:"Times New Roman",Times,serif}
.rich-bio .bio-font-garamond{font-family:Garamond,"Times New Roman",serif}
.rich-bio .bio-font-palatino{font-family:"Palatino Linotype",Palatino,"Book Antiqua",serif}
.rich-bio .bio-font-courier{font-family:"Courier New",Courier,monospace}
.rich-bio .bio-font-consolas{font-family:Consolas,"SFMono-Regular","Liberation Mono",monospace}
.rich-bio .bio-font-segoeprint{font-family:"Segoe Print","Bradley Hand",cursive}
.rich-bio .bio-font-comic{font-family:"Comic Sans MS","Comic Sans",cursive}
.rich-bio .bio-font-impact{font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;letter-spacing:.015em}

/* Permanent blue verified badge + immediate hover/focus label. */
.profile-verified{position:relative;width:.82em;height:.82em;color:#1d9bf0;filter:drop-shadow(0 1px 4px rgba(29,155,240,.26));cursor:default;outline:none}
.profile-verified::after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,3px);padding:5px 8px;border-radius:6px;background:#111827;color:#fff;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:0;line-height:1;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease,transform .14s ease;z-index:30;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.profile-verified:hover::after,.profile-verified:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* Free-page countdown. It sits at the very bottom; when sub-bio is below the buttons, this follows it. */
.free-trial-countdown{margin:18px auto 0;max-width:330px;text-align:center;color:#fff}
.free-trial-title{font-size:16px;line-height:1.2;font-weight:800;letter-spacing:-.02em;margin-bottom:10px;color:#f4efff;text-shadow:0 1px 10px rgba(0,0,0,.18)}
.free-trial-title b{font-weight:950}
.free-trial-clock{display:flex;align-items:center;justify-content:center;gap:7px}
.free-trial-unit{display:grid;grid-template-rows:auto auto;gap:4px;min-width:58px}
.free-trial-unit b{display:grid;place-items:center;min-height:48px;padding:0 8px;border-radius:16px;background:linear-gradient(180deg,#19bdf3,#0794dc);box-shadow:0 8px 24px rgba(0,159,232,.24),inset 0 1px 0 rgba(255,255,255,.25);font-size:24px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.free-trial-unit small{font-size:10px;font-weight:900;line-height:1;color:color-mix(in srgb,#fff 88%,transparent)}
.free-trial-sep{margin-top:-16px;color:#0aa9e9;font-size:24px;font-weight:950;line-height:1}
.profile-shell[data-scheme=light] .free-trial-title{color:#2a2440;text-shadow:none}
.profile-shell[data-scheme=light] .free-trial-unit small{color:#5d6270}
@media(max-width:420px){.free-trial-countdown{max-width:290px}.free-trial-unit{min-width:52px}.free-trial-unit b{min-height:44px;font-size:22px;border-radius:14px}.free-trial-clock{gap:5px}}

/* Public profile refinement: normal verified cursor, theme-aware urgency UI, and an always-on CTA attractor. */
.profile-verified{cursor:default}
.free-trial-title{color:color-mix(in srgb,var(--profile-accent) 68%,#ffffff);text-shadow:0 1px 12px color-mix(in srgb,var(--profile-accent) 24%,transparent)}
.free-trial-unit b{background:linear-gradient(180deg,color-mix(in srgb,var(--profile-accent) 82%,#ffffff 18%),color-mix(in srgb,var(--profile-accent) 78%,#000000 22%));box-shadow:0 8px 24px color-mix(in srgb,var(--profile-accent) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.free-trial-sep{color:var(--profile-accent)}
.profile-shell[data-scheme=light] .free-trial-title{color:color-mix(in srgb,var(--profile-accent) 78%,#1a1a24);text-shadow:none}
.profile-promo-message{margin:14px auto 0;max-width:360px;padding:9px 13px;border:1px solid color-mix(in srgb,var(--profile-accent) 34%,transparent);border-radius:999px;background:color-mix(in srgb,var(--profile-accent) 12%,transparent);color:color-mix(in srgb,var(--profile-accent) 56%,#ffffff);font-size:12.5px;font-weight:850;line-height:1.3;text-align:center;box-shadow:0 8px 24px color-mix(in srgb,var(--profile-accent) 10%,transparent)}
.profile-shell[data-scheme=light] .profile-promo-message{color:color-mix(in srgb,var(--profile-accent) 82%,#171722);background:color-mix(in srgb,var(--profile-accent) 9%,#ffffff);border-color:color-mix(in srgb,var(--profile-accent) 28%,transparent)}
.profile-link.cta-attract{position:relative;isolation:isolate}
.profile-link.cta-attract::before{content:"";position:absolute;inset:-4px;border:2px solid color-mix(in srgb,var(--profile-accent) 72%,transparent);border-radius:inherit;opacity:0;transform:scale(.985);pointer-events:none;z-index:-1;animation:ctaHalo 3.8s 1.1s ease-out infinite}
@keyframes ctaHalo{0%,64%,100%{opacity:0;transform:scale(.985)}72%{opacity:.58;transform:scale(1.015)}84%{opacity:0;transform:scale(1.055)}}
@media(prefers-reduced-motion:reduce){.profile-link.cta-attract::before{animation:none!important;display:none}}
.profile-link.cta-attract::before{z-index:0}
.profile-link.cta-attract>span{position:relative;z-index:1}


/* 2026-09 UI polish: true name centering, richer rings, and selectable first-CTA animation. */
.profile-name{position:relative!important;display:block!important;width:max-content;max-width:calc(100% - 2.2em);margin-left:auto!important;margin-right:auto!important;text-align:center!important;justify-content:initial!important}
.profile-name-text{display:block;min-width:0}
.profile-name .profile-verified{position:absolute!important;left:calc(100% + .22em);top:50%;transform:translateY(-50%);margin:0}
.profile-shell[data-layout=banner] .profile-name,.profile-shell[data-layout=poster] .poster-caption .profile-name,.profile-shell[data-layout=row] .profile-name{margin-left:0!important;margin-right:0!important;text-align:left!important}

.profile-shell[data-ring=soft]{--ring-color:color-mix(in srgb,var(--profile-accent) 58%,#ffffff);--ring-shadow:0 0 0 5px color-mix(in srgb,var(--profile-accent) 12%,transparent),0 10px 34px color-mix(in srgb,var(--profile-accent) 22%,transparent)}
.profile-shell[data-ring=double]{--ring-color:var(--profile-accent);--ring-shadow:0 0 0 4px color-mix(in srgb,var(--profile-accent) 18%,transparent),0 0 0 7px color-mix(in srgb,var(--profile-accent) 52%,transparent),0 14px 38px rgba(0,0,0,.3)}
.profile-shell[data-ring=neon]{--ring-color:color-mix(in srgb,var(--profile-accent) 72%,#ffffff);--ring-shadow:0 0 8px var(--profile-accent),0 0 22px color-mix(in srgb,var(--profile-accent) 72%,transparent),0 0 48px color-mix(in srgb,var(--profile-accent) 38%,transparent)}

/* Punchier first-CTA motion presets. The movement happens often enough to be noticed
   without requiring hover, while reduced-motion users still get a static button. */
.profile-link.cta-attract{position:relative;isolation:isolate;will-change:transform,box-shadow}
.profile-shell[data-cta] .profile-link.cta-attract::before{animation:none;opacity:0;transform:none}
.profile-shell[data-cta=jump] .profile-link.cta-attract{animation:ctaJump 1.75s .25s cubic-bezier(.22,.82,.32,1) infinite}
.profile-shell[data-cta=wiggle] .profile-link.cta-attract{transform-origin:50% 60%;animation:ctaWiggle 1.55s .2s ease-in-out infinite}
.profile-shell[data-cta=bounce] .profile-link.cta-attract{animation:ctaBounce 1.85s .2s cubic-bezier(.28,.84,.42,1) infinite}
.profile-shell[data-cta=pop] .profile-link.cta-attract{animation:ctaPop 1.65s .2s ease-in-out infinite}
.profile-shell[data-cta=shake] .profile-link.cta-attract{animation:ctaShake 1.5s .25s ease-in-out infinite}
.profile-shell[data-cta=pulse] .profile-link.cta-attract{animation:ctaPulse 1.7s .2s ease-in-out infinite}
.profile-shell[data-cta=glow] .profile-link.cta-attract{animation:ctaGlow 1.9s .2s ease-in-out infinite}
.profile-shell[data-cta=shine] .profile-link.cta-attract{overflow:hidden}
.profile-shell[data-cta=shine] .profile-link.cta-attract::after{content:"";position:absolute;inset:-30% auto -30% -42%;width:34%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);pointer-events:none;animation:ctaShine 2.05s .3s ease-in-out infinite}
@keyframes ctaJump{0%,48%,100%{transform:translateY(0)}58%{transform:translateY(-11px)}66%{transform:translateY(0)}72%{transform:translateY(-5px)}80%{transform:translateY(0)}}
@keyframes ctaWiggle{0%,48%,100%{transform:rotate(0)}57%{transform:rotate(-3.5deg)}64%{transform:rotate(4deg)}71%{transform:rotate(-3deg)}78%{transform:rotate(2.3deg)}86%{transform:rotate(0)}}
@keyframes ctaBounce{0%,46%,100%{transform:translateY(0) scale(1)}56%{transform:translateY(-9px) scale(1.018)}64%{transform:translateY(1px) scale(.995)}71%{transform:translateY(-4px) scale(1.008)}80%{transform:translateY(0) scale(1)}}
@keyframes ctaPop{0%,48%,100%{transform:scale(1)}59%{transform:scale(1.075)}68%{transform:scale(.985)}77%{transform:scale(1.035)}87%{transform:scale(1)}}
@keyframes ctaShake{0%,48%,100%{transform:translateX(0)}57%{transform:translateX(-5px)}63%{transform:translateX(5px)}69%{transform:translateX(-4px)}75%{transform:translateX(4px)}82%{transform:translateX(-2px)}88%{transform:translateX(0)}}
@keyframes ctaPulse{0%,42%,100%{transform:scale(1)}58%{transform:scale(1.05)}72%{transform:scale(1)}84%{transform:scale(1.032)}}
@keyframes ctaGlow{0%,40%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--profile-accent) 0%,transparent)}58%{box-shadow:0 0 0 5px color-mix(in srgb,var(--profile-accent) 18%,transparent),0 0 34px color-mix(in srgb,var(--profile-accent) 52%,transparent)}76%{box-shadow:0 0 0 1px color-mix(in srgb,var(--profile-accent) 8%,transparent),0 0 14px color-mix(in srgb,var(--profile-accent) 24%,transparent)}}
@keyframes ctaShine{0%,42%,100%{left:-42%}66%{left:118%}}
@media(prefers-reduced-motion:reduce){.profile-shell[data-cta] .profile-link.cta-attract,.profile-shell[data-cta] .profile-link.cta-attract::before,.profile-shell[data-cta] .profile-link.cta-attract::after{animation:none!important}}
.promo-random-number{font-variant-numeric:tabular-nums}

/* 2026-09 public profile refinement: shorter CTA width, readable dark-theme buttons,
   and promo copy that behaves like animated text instead of a pill/button. */
.profile-shell[data-shape=pills]:not([data-layout=banner]) .links-stack{
  width:min(88%,520px);
  margin-left:auto;
  margin-right:auto;
}
@media(max-width:520px){
  .profile-shell[data-shape=pills]:not([data-layout=banner]) .links-stack{width:min(90%,430px)}
}

/* A photo backdrop should not make non-light buttons disappear into the image. */
.profile-shell[data-photo-backdrop="1"]:not([data-scheme=light]) .profile-link{
  background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 34%,rgba(18,18,24,.92)),rgba(18,18,24,.78));
  border-color:color-mix(in srgb,var(--profile-accent) 58%,rgba(255,255,255,.22));
  color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.profile-shell[data-photo-backdrop="1"]:not([data-scheme=light]) .profile-link:hover{
  background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 46%,rgba(24,24,31,.94)),rgba(24,24,31,.86));
  border-color:color-mix(in srgb,var(--profile-accent) 76%,#fff 8%);
}

.profile-promo-message{
  margin:15px auto 0;
  max-width:420px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:color-mix(in srgb,var(--profile-accent) 66%,#ffffff);
  font-size:13px;
  font-weight:850;
  line-height:1.4;
  text-align:center;
  letter-spacing:.005em;
  transform-origin:center;
}
.profile-shell[data-scheme=light] .profile-promo-message{
  color:color-mix(in srgb,var(--profile-accent) 82%,#20202a);
  background:none;
  border:0;
}
.profile-promo-message[data-promo-animation=pulse]{animation:promoPulse 2.8s ease-in-out infinite}
.profile-promo-message[data-promo-animation=float]{animation:promoFloat 3.4s ease-in-out infinite}
.profile-promo-message[data-promo-animation=glow]{animation:promoGlow 2.8s ease-in-out infinite}
.profile-promo-message[data-promo-animation=shimmer]{
  background:linear-gradient(100deg,color-mix(in srgb,var(--profile-accent) 66%,#ffffff) 0 35%,#ffffff 48%,color-mix(in srgb,var(--profile-accent) 66%,#ffffff) 61% 100%);
  background-size:230% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:promoShimmer 3.6s ease-in-out infinite;
}
.profile-shell[data-scheme=light] .profile-promo-message[data-promo-animation=shimmer]{
  background:linear-gradient(100deg,color-mix(in srgb,var(--profile-accent) 82%,#20202a) 0 35%,#fff 48%,color-mix(in srgb,var(--profile-accent) 82%,#20202a) 61% 100%);
  background-size:230% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.profile-promo-message[data-promo-animation=bounce]{animation:promoBounce 3.3s cubic-bezier(.22,.7,.3,1) infinite}
@keyframes promoPulse{0%,68%,100%{transform:scale(1);opacity:1}80%{transform:scale(1.035);opacity:.9}}
@keyframes promoFloat{0%,66%,100%{transform:translateY(0)}78%{transform:translateY(-4px)}88%{transform:translateY(0)}}
@keyframes promoGlow{0%,64%,100%{text-shadow:0 0 0 transparent}78%{text-shadow:0 0 18px color-mix(in srgb,var(--profile-accent) 72%,transparent)}}
@keyframes promoShimmer{0%,58%,100%{background-position:115% 0}78%{background-position:-115% 0}}
@keyframes promoBounce{0%,70%,100%{transform:translateY(0)}77%{transform:translateY(-5px)}83%{transform:translateY(1px)}89%{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.profile-promo-message[data-promo-animation]{animation:none!important}}