/* Apex member page. Template colors arrive as CSS variables; .pat-* paints the background, .btn-* the buttons. */
*{box-sizing:border-box}
html{background:var(--bg)}
body.ap{margin:0;min-height:100svh;color:var(--text);font-family:var(--fb);font-size:16px;line-height:1.5;background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.ap-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.ap-page{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:18px 16px 40px;display:grid;gap:14px}
.ap-b{min-width:0}
a{color:inherit}
h1,h2{font-family:var(--fh);margin:0;line-height:1.15}

/* surfaces */
.ap-card{background:var(--surface);border-radius:var(--r);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 10%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.is-light .ap-card{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 9%,transparent),0 8px 24px -14px rgba(0,0,0,.25)}

/* profile */
.ap-prof{padding:0 20px 20px;overflow:hidden}
.ap-cover{height:110px;margin:0 -20px;background:linear-gradient(115deg,var(--accent),var(--accent2));background-size:cover;background-position:center}
.ap-ava{width:104px;height:104px;margin-top:-52px;border-radius:50%;overflow:hidden;display:grid;place-items:center;position:relative;
  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 0 4px var(--bg),0 0 0 5.5px color-mix(in srgb,var(--accent) 70%,transparent),0 10px 24px rgba(0,0,0,.35)}
.ap-ava img{width:100%;height:100%;object-fit:cover}
.ap-ava span{font:700 40px var(--fh);color:#fff}
.ap-name{font-size:28px;margin-top:12px;letter-spacing:-.01em}
.ap-tag{margin:6px 0 0;font-size:16px;color:var(--accent)}
.ap-meta{display:grid;margin-top:10px;padding-left:10px;border-left:2px solid color-mix(in srgb,var(--accent) 60%,transparent);color:var(--muted);font-size:14.5px}
.ap-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.ap-chips span{font-size:13px;padding:5px 11px;border-radius:99px;background:color-mix(in srgb,var(--text) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 14%,transparent)}

/* buttons */
.ap-save{display:flex;gap:10px}
.ap-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 18px;border-radius:calc(var(--r) * .7 + 4px);font:700 16px var(--fh);text-decoration:none;cursor:pointer;color:#fff;border:0;
  background:linear-gradient(100deg,var(--accent),var(--accent2));box-shadow:0 10px 26px -10px color-mix(in srgb,var(--accent) 80%,transparent);transition:transform .2s,box-shadow .2s}
.ap-btn:hover{transform:translateY(-1px)}
.ap-wide{width:100%}
.ap-icbtn{width:56px;display:grid;place-items:center;border-radius:calc(var(--r) * .7 + 4px);background:var(--surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 16%,transparent);color:var(--text)}
.btn-solid .ap-btn{background:var(--accent);color:var(--bg)}
.btn-outline .ap-btn{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--accent)}
.btn-glass .ap-btn{background:color-mix(in srgb,var(--accent) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent),0 10px 26px -12px color-mix(in srgb,var(--accent) 80%,transparent);color:var(--text)}
.btn-chrome .ap-btn{background:linear-gradient(180deg,#fff,#c9ced8 45%,#8c94a3 55%,#e6e9ef);color:#14171c;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.btn-holo .ap-btn{background:linear-gradient(110deg,#9ef0ff,#c9a7ff,#ffb3f2,#fff3a6,#9ef0ff);background-size:300% 100%;animation:holo 6s linear infinite;color:#17142a}
@keyframes holo{to{background-position:300% 0}}
.ap-btn-o{background:transparent!important;color:var(--text)!important;box-shadow:inset 0 0 0 1.5px var(--accent)!important}
.is-light.btn-solid .ap-btn{color:#fff}

/* link rows */
.ap-links{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ap-row{display:grid;grid-template-columns:44px 1fr 18px;align-items:center;gap:14px;padding:12px 16px 12px 12px;text-decoration:none;transition:transform .2s}
a.ap-row[href]:hover{transform:translateX(3px)}
.ap-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.ap-svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ap-rt{display:grid;min-width:0}
.ap-rt b{font-family:var(--fh);font-size:16px;font-weight:600}
.ap-rt small{color:var(--muted);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-go{color:var(--muted)}

/* content */
.ap-h{font-size:22px;padding:8px 4px 0}
.ap-text{padding:0 4px;color:var(--muted);font-size:15.5px;line-height:1.65}
.ap-img{margin:0}
.ap-img img{display:block;width:100%;height:auto;border-radius:var(--r)}
.ap-img figcaption{color:var(--muted);font-size:13.5px;margin-top:8px;padding:0 4px}
.ap-gal{display:grid;gap:6px;grid-template-columns:repeat(3,1fr)}
.ap-gal.n1{grid-template-columns:1fr}.ap-gal.n2{grid-template-columns:1fr 1fr}
.ap-gal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:calc(var(--r) * .5);display:block}
.ap-gal.n1 img{aspect-ratio:auto}
.ap-video{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000}
.ap-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ap-hours{padding:16px 18px}
.ap-hh{display:flex;gap:10px;align-items:center;margin-bottom:8px;color:var(--accent)}.ap-hh b{color:var(--text);font-family:var(--fh)}
.ap-hr{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid color-mix(in srgb,var(--text) 9%,transparent);font-size:14.5px}
.ap-hr span:last-child{color:var(--muted);text-align:right}
.ap-map{overflow:hidden}
.ap-map iframe{display:block;width:100%;height:200px;border:0;filter:saturate(.9)}
.is-dark .ap-map iframe{filter:invert(.9) hue-rotate(180deg) saturate(.7)}
.ap-maplink{display:flex;gap:8px;align-items:center;padding:12px 16px;font-size:14.5px;text-decoration:none}
.ap-maplink .ap-svg{color:var(--accent)}
.ap-sp-s{height:6px}.ap-sp-m{height:20px}.ap-sp-l{height:44px}
.ap-empty{padding:26px;text-align:center;border-radius:var(--r);border:1.5px dashed color-mix(in srgb,var(--text) 25%,transparent);color:var(--muted);font-size:14px}
.ap-foot{text-align:center;padding-top:14px;font-size:12.5px;color:var(--muted)}
.ap-foot a{text-decoration:none}.ap-foot b{color:var(--text)}

/* animations (play once as the block scrolls in) */
.anim{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.anim-fade-up{opacity:0;transform:translateY(26px)}
.anim-fade-in{opacity:0}
.anim-zoom-in{opacity:0;transform:scale(.92)}
.anim-slide-left{opacity:0;transform:translateX(40px)}
.anim-slide-right{opacity:0;transform:translateX(-40px)}
.anim.in{opacity:1;transform:none}
.anim-float.in,.anim-float{animation:apfloat 5s ease-in-out infinite}
@keyframes apfloat{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.anim{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}.btn-holo .ap-btn{animation:none}}

/* editor preview helpers */
.is-editing [data-block]{cursor:pointer;border-radius:calc(var(--r) + 4px);outline:2px solid transparent;outline-offset:4px;transition:outline-color .2s}
.is-editing [data-block]:hover{outline-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.is-editing [data-block].is-sel{outline-color:var(--accent)}

/* ---------- background patterns ---------- */
.pat-glow .ap-bg{background:radial-gradient(60% 40% at 80% 0%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 70%),radial-gradient(50% 40% at 0% 60%,color-mix(in srgb,var(--accent2) 22%,transparent),transparent 70%)}
.pat-mesh .ap-bg{background:radial-gradient(40% 30% at 20% 10%,color-mix(in srgb,var(--accent) 26%,transparent),transparent),radial-gradient(40% 30% at 90% 40%,color-mix(in srgb,var(--accent2) 24%,transparent),transparent),radial-gradient(50% 30% at 30% 90%,color-mix(in srgb,var(--accent) 16%,transparent),transparent)}
.pat-grid .ap-bg{background:linear-gradient(color-mix(in srgb,var(--accent) 12%,transparent) 1px,transparent 1px) 0 0/34px 34px,linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,transparent) 1px,transparent 1px) 0 0/34px 34px;
  -webkit-mask:radial-gradient(80% 60% at 50% 0%,#000,transparent);mask:radial-gradient(80% 60% at 50% 0%,#000,transparent)}
.pat-dots .ap-bg{background:radial-gradient(color-mix(in srgb,var(--text) 18%,transparent) 1px,transparent 1.5px) 0 0/18px 18px;-webkit-mask:linear-gradient(#000,transparent 70%);mask:linear-gradient(#000,transparent 70%)}
.pat-waves .ap-bg{background:repeating-radial-gradient(circle at 50% 120%,transparent 0 22px,color-mix(in srgb,var(--accent) 10%,transparent) 22px 23px),radial-gradient(60% 40% at 50% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent)}
.pat-grain .ap-bg{background:radial-gradient(color-mix(in srgb,var(--text) 6%,transparent) .6px,transparent .8px) 0 0/5px 5px}
.pat-aurora .ap-bg{background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 35%,transparent),transparent 40%,color-mix(in srgb,var(--accent2) 35%,transparent) 70%,transparent);background-size:300% 300%;filter:blur(30px);animation:aurora 16s ease-in-out infinite alternate}
@keyframes aurora{0%{background-position:0% 0%}100%{background-position:100% 100%}}
.pat-neongrid .ap-bg{background:linear-gradient(transparent 0 60%,color-mix(in srgb,var(--accent) 20%,transparent)),repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 30%,transparent) 0 1px,transparent 1px 40px),repeating-linear-gradient(0deg,color-mix(in srgb,var(--accent2) 22%,transparent) 0 1px,transparent 1px 40px);
  -webkit-mask:linear-gradient(transparent,#000 55%);mask:linear-gradient(transparent,#000 55%)}
.pat-holo .ap-bg{background:linear-gradient(115deg,rgba(158,240,255,.18),rgba(201,167,255,.16),rgba(255,179,242,.16),rgba(255,243,166,.12),rgba(158,240,255,.18));background-size:400% 400%;animation:aurora 14s linear infinite alternate}
.pat-chrome .ap-bg{background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 30%),repeating-linear-gradient(100deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px)}
.pat-plexus .ap-bg{background:radial-gradient(circle at 20% 30%,color-mix(in srgb,var(--accent) 60%,transparent) 1.5px,transparent 2px) 0 0/90px 90px,radial-gradient(circle at 70% 60%,color-mix(in srgb,var(--accent2) 60%,transparent) 1.5px,transparent 2px) 0 0/120px 120px,
  linear-gradient(35deg,transparent 49.6%,color-mix(in srgb,var(--accent) 14%,transparent) 50%,transparent 50.4%) 0 0/90px 90px,radial-gradient(60% 40% at 80% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent)}
.pat-stars .ap-bg{background:radial-gradient(#fff 1px,transparent 1.4px) 0 0/97px 97px,radial-gradient(rgba(255,255,255,.6) .8px,transparent 1.2px) 30px 40px/61px 61px,radial-gradient(color-mix(in srgb,var(--accent) 90%,transparent) 1px,transparent 1.5px) 10px 70px/131px 131px;animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.55}}
.pat-leather .ap-bg{background:radial-gradient(rgba(0,0,0,.25) .7px,transparent 1px) 0 0/4px 4px,radial-gradient(80% 60% at 50% 0%,rgba(255,200,140,.12),transparent);box-shadow:inset 0 0 0 10px rgba(0,0,0,.2),inset 0 0 0 11px rgba(217,160,102,.35)}
.pat-marble .ap-bg{background:linear-gradient(115deg,transparent 40%,rgba(120,110,100,.12) 41%,transparent 43%),linear-gradient(65deg,transparent 60%,rgba(120,110,100,.10) 61%,transparent 62.5%),linear-gradient(160deg,transparent 20%,rgba(181,154,99,.14) 21%,transparent 22%)}
.pat-velvet .ap-bg{background:radial-gradient(80% 60% at 30% 0%,rgba(168,85,247,.35),transparent 70%),radial-gradient(70% 50% at 100% 100%,rgba(230,192,104,.15),transparent)}
.pat-bubbles .ap-bg{background:radial-gradient(circle,rgba(201,164,106,.25) 2px,transparent 3px) 0 0/40px 40px,radial-gradient(circle,rgba(201,164,106,.18) 1.5px,transparent 2.5px) 20px 20px/56px 56px}
.pat-matrix .ap-bg{background:repeating-linear-gradient(90deg,rgba(61,255,122,.07) 0 2px,transparent 2px 14px),linear-gradient(transparent,rgba(61,255,122,.08));animation:rain 3s linear infinite}
@keyframes rain{to{background-position:0 0,0 40px}}
.pat-retro .ap-bg{background:linear-gradient(180deg,transparent 55%,rgba(255,90,200,.25)),radial-gradient(circle at 50% 96%,rgba(255,179,71,.45) 0 24%,transparent 24.5%),repeating-linear-gradient(0deg,rgba(255,90,200,.3) 0 1px,transparent 1px 22px)}
.pat-ice .ap-bg{background:linear-gradient(135deg,rgba(255,255,255,.7),transparent 40%),radial-gradient(60% 40% at 80% 10%,rgba(125,211,252,.4),transparent),radial-gradient(50% 40% at 0% 80%,rgba(58,160,255,.25),transparent)}
.pat-goldlines .ap-bg{background:repeating-linear-gradient(135deg,rgba(245,196,81,.07) 0 1px,transparent 1px 26px),radial-gradient(60% 40% at 50% 0%,rgba(245,196,81,.14),transparent)}
.pat-pinstripe .ap-bg{background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 12px)}