/* ======================================================================
   AquariumLesson — Profile (Merged Premium 2026)
   Scope: #alProfile + inside #alMemberArea (owner)
   Goals:
   - Mobile first
   - No floats / no random overlaps
   - Public (wide): actions top-right, stats bottom-right
   - Owner (narrow): keep stacking even on desktop
   - Avatar PNG frame: single source of truth
   ====================================================================== */

/* ---------------------------
   PAGE PADDING + GRID BELOW HERO
---------------------------- */
#alMemberArea .al-profile{
  padding: var(--al-4) var(--al-4) var(--al-7) !important;
}

#alMemberArea .al-profile-grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--al-3) !important;
  margin-top: var(--al-3) !important;
}
@media (max-width: 900px){
  #alMemberArea .al-profile{
    padding: var(--al-3) var(--al-3) var(--al-7) !important;
  }
  #alMemberArea .al-profile-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Make sure content is above glow */
#alMemberArea .al-profile,
#alMemberArea .al-card{
  position: relative !important;
  z-index: 1 !important;
}

/* ---------------------------
   HERO CARD BACKDROP (soft glow + crisp edge)
---------------------------- */
#alProfile .alpp-hero{
  position: relative !important;
}
#alProfile .alpp-hero::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: .65 !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.62), transparent 42%),
    radial-gradient(circle at 82% 28%, rgba(92,168,146,.18), transparent 48%),
    radial-gradient(circle at 35% 88%, rgba(44,107,74,.14), transparent 56%) !important;
}
#alProfile .alpp-hero::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  border-radius: 20px !important; /* match hero radius */
  border: 1px solid rgba(0,0,0,.08) !important;
  z-index: 2 !important;
}

/* Slightly tighter hero padding */
#alProfile .alpp-hero{
  padding: 18px 18px 16px !important;
}


/* ---------------------------
   HERO LAYOUT (NEW GRID – stable)
   Required markup hooks:
   .alpp-hero-grid
     .alpp-hero-main      (avatar + identity block)
     .alpp-hero-actions   (buttons row)
     .alpp-hero-stats     (stats row)
---------------------------- */
#alProfile .alpp-hero .alpp-hero-grid{
  display: grid !important;
  gap: clamp(12px, 1.6vw, 18px) !important;
  align-items: start !important;
  min-width: 0 !important;

  /* Mobile-first stack */
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "main"
    "actions"
    "stats" !important;
}
#alProfile .alpp-hero .alpp-hero-main{ grid-area: main !important; min-width: 0 !important; }
#alProfile .alpp-hero .alpp-hero-actions{ grid-area: actions !important; min-width: 0 !important; }
#alProfile .alpp-hero .alpp-hero-stats{ grid-area: stats !important; min-width: 0 !important; }

/* left block: avatar + identity */
#alProfile .alpp-hero-left{
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: clamp(12px, 1.8vw, 18px) !important;
  align-items: center !important;
  min-width: 0 !important;
}
#alProfile .alpp-id,
#alProfile .alpp-name{ min-width: 0 !important; }

/* name clamp for long strings */
#alProfile .alpp-name .al-view:not([hidden]){
  display: inline-block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#alProfile .alpp-name .al-view[hidden]{
  display: none !important;
}




/* Stats container (mobile default: wrap nicely) */
#alProfile .alpp-hero-stats{
  display: grid !important;
  grid-auto-flow: column !important;
  gap: 12px !important;
  align-items: center !important;
  min-width: 0 !important;
}
@media (max-width: 680px){
  #alProfile .alpp-hero-stats{
    grid-auto-flow: row !important;
    justify-items: stretch !important;
  }
}

/* Public wide desktop: main left, actions+stats right */
@media (min-width: 1024px){
  #alProfile .alpp-hero .alpp-hero-grid{
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "main actions"
      "main stats" !important;
  }
  #alProfile .alpp-hero-actions{
    justify-self: end !important;
    align-self: start !important;
  }
  #alProfile .alpp-hero-stats{
    justify-self: end !important;
    align-self: end !important;
  }
}

/* Owner view: keep stacking (even on desktop) */
@media (min-width: 1024px){
  #alMemberArea #alProfile .alpp-hero .alpp-hero-grid{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "main"
      "actions"
      "stats" !important;
  }
  #alMemberArea #alProfile .alpp-hero-actions{
    justify-self: stretch !important;
  }
  #alMemberArea #alProfile .alpp-hero-stats{
    justify-self: stretch !important;
    align-self: start !important;
  }
}

/* ---------------------------
   TYPO: NAME / HANDLE / TITLE (clean + crisp)
---------------------------- */
#alMemberArea #alProfile .alpp-name{
  margin: 0 !important;
  line-height: 1.05 !important;
  font-size: 34px !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
}
#alMemberArea #alProfile .alpp-handle{
  margin-top: 3px !important;
  font-weight: 850 !important;
  opacity: .72 !important;
}
#alMemberArea #alProfile .alpp-title{
  margin-top: 8px !important;
  font-weight: 600 !important;
  opacity: .82 !important;
  letter-spacing: -0.01em !important;
}

/* Mobile: prevent name overflow */
@media (max-width: 560px){
  #alMemberArea #alProfile .alpp-name,
  #alMemberArea #alProfile .pp-name-view{
    font-size: clamp(24px, 7.2vw, 30px) !important;
    line-height: 1.06 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
    text-align: center !important;
  }
}

/* ---------------------------
   STATS BAR (glass + wraps correctly)
---------------------------- */
#alMemberArea #alProfile .alpp-stats{
  margin-top: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  row-gap: 10px !important;

  padding: 12px 12px !important;
  border-radius: 18px !important;

  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow:
    0 22px 50px rgba(16,24,40,.10),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
  backdrop-filter: blur(16px) saturate(1.1) !important;
}
#alMemberArea #alProfile .alpp-stat{
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 6px !important;
  min-width: 0 !important;
}
#alMemberArea #alProfile .alpp-stat-num{
  font-size: 20px !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
}
#alMemberArea #alProfile .alpp-stat-lbl{
  font-size: 13px !important;
  font-weight: 800 !important;
  opacity: .7 !important;
}
#alMemberArea #alProfile .alpp-stat--since{
  font-size: 12px !important;
  opacity: .7 !important;
}

#alMemberArea #alProfile .alpp-share{
  min-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  font-weight: 850 !important;
}

@media (max-width: 560px){

  #alMemberArea #alProfile .alpp-actions{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: center !important;
  }

  #alMemberArea #alProfile .alpp-actions :is(button, a, .al-btn):not(.alpp-follow){
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
  }

  #alMemberArea #alProfile .alpp-follow{
    width: min(260px, 92vw) !important;
    margin-inline: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Follow Button: nicht full width, zentriert */
  #alProfile .alpp-follow{
    min-width: 220px !important;
    max-width: 260px !important;
    margin-inline: auto !important;
    justify-content: center !important;
  }

  /* Name-Row sauber zentrieren */
  #alProfile .alpp-name-row{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* ✅ diese Regeln gehören eindeutig auch in mobile */
  #alMemberArea #alProfile .alpp-hero-left{
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
  }

  #alMemberArea #alProfile .alpp-follow,
  #alMemberArea #alProfile .alpp-share{
    width: 100% !important;
    justify-content: center !important;
    margin-left: 0 !important;
  }
}


  #alMemberArea #alProfile .alpp-hero-left{
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
  }

  #alMemberArea #alProfile .alpp-follow,
  #alMemberArea #alProfile .alpp-share{
    width: 100% !important;
    justify-content: center !important;
    margin-left: 0 !important;
  }


/* ---------------------------
   SOCIALS (Inline SVG) — quiet metadata style
---------------------------- */
#alMemberArea #alProfile .alpp-social__ico::before{ content: none !important; }

#alMemberArea #alProfile .alpp-socials{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

#alMemberArea #alProfile a.alpp-social{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 6px 10px !important;
  border-radius: 999px !important;

  background: rgba(15,23,42,.03) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: none !important;

  color: rgba(15,23,42,.70) !important;
  text-decoration: none !important;

  -webkit-tap-highlight-color: transparent !important;
}

#alMemberArea #alProfile a.alpp-social:hover{
  background: rgba(15,23,42,.06) !important;
  border-color: rgba(15,23,42,.14) !important;
  transform: none !important;
}
#alMemberArea #alProfile a.alpp-social:active{ transform: none !important; }

#alMemberArea #alProfile a.alpp-social:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(92,168,146,.22) !important;
}

#alMemberArea #alProfile .alpp-social__ico{
  width: 18px !important;
  height: 18px !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 18px !important;
  color: rgba(15,23,42,.75) !important;
}
#alMemberArea #alProfile .alpp-social__ico svg{
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}
#alMemberArea #alProfile .alpp-social__ico svg *{ stroke: currentColor !important; }

#alMemberArea #alProfile .alpp-social__lbl{
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(15,23,42,.65) !important;
}

/* ---------------------------
   AVATAR — PNG FRAME (SINGLE SOURCE OF TRUTH)
   Required markup:
   button.alpp-avatar (or .alpp-avatar)
     .alpp-avatar-photo > img.alpp-avatar-img
     .alpp-avatar-plate > img.alpp-avatar-frame (or .alpp-avatar-frame)
---------------------------- */
#alMemberArea #alProfile .alpp-avatar{
  --plate: 168px !important;
  --ring-inset: 18px !important;

  position: relative !important;
  width: var(--plate) !important;
  height: var(--plate) !important;

  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  background-image: none !important;
  border-radius: 999px !important;

  display: block !important;
  overflow: visible !important;
  isolation: isolate !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  box-shadow: none !important;
  filter: none !important;
}

#alMemberArea #alProfile .alpp-avatar[disabled],
#alMemberArea #alProfile .alpp-avatar[disabled] *{
  opacity: 1 !important;
  filter: none !important;
}
#alMemberArea #alProfile .alpp-avatar[disabled]{
  cursor: default !important;
  pointer-events: none !important;
}
#alMemberArea #alProfile .alpp-avatar:focus,
#alMemberArea #alProfile .alpp-avatar:focus-visible{ outline: none !important; }

#alMemberArea #alProfile .alpp-avatar-plate{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  z-index: 7 !important;
  filter: drop-shadow(0 18px 40px rgba(16,24,40,.10)) !important;
}
#alMemberArea #alProfile .alpp-avatar-frame{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
}

#alMemberArea #alProfile .alpp-avatar-photo{
  position: absolute !important;
  inset: var(--ring-inset) !important;
  display: block !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: transparent !important;
  z-index: 6 !important;
}
#alMemberArea #alProfile .alpp-avatar-img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: 54% 56% !important; /* right + down */
  border-radius: 999px !important;
  background: transparent !important;
}
/* Default (kein echtes Bild): darf "cover" bleiben */
#alMemberArea #alProfile .alpp-avatar:not(.has-image) .alpp-avatar-img{
  object-fit: cover !important;
}

/* Echtes Profilbild: weniger Crop */
#alMemberArea #alProfile .alpp-avatar.has-image .alpp-avatar-img{
  object-fit: contain !important;
  background: #fff !important;         /* oder transparent, wenn du lieber keinen Rand willst */
  padding: 6px !important;             /* optional: gibt Luft im Kreis */
  box-sizing: border-box !important;
}


/* kill any legacy ring/glow layers */
#alMemberArea #alProfile .alpp-avatar::before,
#alMemberArea #alProfile .alpp-avatar::after,
#alMemberArea #alProfile .alpp-avatar-ring,
#alMemberArea #alProfile .alpp-avatar-photo::before,
#alMemberArea #alProfile .alpp-avatar-glow,
#alMemberArea #alProfile .alpp-spark{
  content: none !important;
  display: none !important;
}

/* Mobile avatar sizing */
@media (max-width: 560px){
  #alMemberArea #alProfile .alpp-avatar{
    --plate: 132px !important;
    --ring-inset: 16px !important;
    margin: 6px auto 2px auto !important;
    filter: drop-shadow(0 14px 30px rgba(16,24,40,.12)) !important;
  }
}

/* Nudge ONLY the default avatar (no real image) */
#alMemberArea #alProfile .alpp-avatar:not(.has-image) .alpp-avatar-img{
  transform: translate(1%, 3%) !important; /* right + down */
}

/* Edit-mode hooks (kept minimal + safe) */
#alMemberArea #alProfile .alpp-avatar-edit{ display: none !important; }
#alMemberArea #alProfile.is-editing .alpp-avatar{ cursor: pointer !important; }
#alMemberArea #alProfile.is-editing.is-uploading .alpp-avatar{ pointer-events: none !important; }

/* Uploading spinner (optional hook) */
#alProfile [data-js="al-profile-root"].is-uploading .alpp-avatar-photo{
  filter: saturate(.9) contrast(.98) !important;
  opacity: .92 !important;
}
#alProfile [data-js="al-profile-root"].is-uploading .alpp-avatar::after{
  content:"" !important;
  position:absolute !important;
  inset: 8px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(44,107,74,.22) !important;
  border-top-color: rgba(44,107,74,.62) !important;
  animation: alSpin .9s linear infinite !important;
}
@keyframes alSpin{ to{ transform: rotate(360deg);} }

/* ---------------------------
   MODAL (Followers/Following) – sticky header + flex overflow fix
---------------------------- */
.al-modal[hidden]{ display: none !important; }

.al-modal{
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  z-index: 999999 !important;
  background: rgba(0,0,0,.35) !important;
}
.al-modal__card{
  width: min(560px, 92vw) !important;
  max-height: min(70vh, 640px) !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 16px !important;
  background: #fff !important;
  overflow: hidden !important;
}
.al-modal .al-modal__head{
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}
.al-modal__body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 12px !important;
}


.al-follow-row img{
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  display: block !important;
  background: #fff !important;
}

/* ---------------------------
   MOTION SAFETY
---------------------------- */
@media (prefers-reduced-motion: reduce){
  #alProfile .alpp-avatar,
  #alProfile .alpp-follow,
  #alProfile .alpp-follow-text,
  #alProfile .alpp-actions__row3 .al-iconbtn,
  #alProfile a.alpp-social{
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   LV BADGE — Premium (Graphite + Gold)  ✅ canonical
   Fix:
   - Works on /account/... AND /u/<slug> (no #alMemberArea requirement)
   - Never shows when [hidden] (prevents "LV" without number)
========================================================= */

/* Base look (only when visible) */
#alProfile .alpp-level-badge:not([hidden]),
#alMemberArea #alProfile .alpp-level-badge:not([hidden]){
  background: linear-gradient(180deg, #3b3f43 0%, #2a2e31 100%) !important;
  background-color: #2a2e31 !important;
  border: 1px solid rgba(255,215,150,.45) !important;
  box-shadow:
    0 10px 22px rgba(16,24,40,.28),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,220,140,.10) !important;
}

/* Positioning (only when visible) */
#alProfile .alpp-avatar .alpp-level-badge:not([hidden]),
#alMemberArea #alProfile .alpp-avatar .alpp-level-badge:not([hidden]){
  position: absolute !important;
  left: 50% !important;
  bottom: -7px !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 26px !important;
  padding: 0 14px !important;
  min-width: 66px !important;
  border-radius: 999px !important;

  pointer-events: none !important;
}

/* Gold text */
#alProfile .alpp-avatar .alpp-level-badge:not([hidden])::before,
#alMemberArea #alProfile .alpp-avatar .alpp-level-badge:not([hidden])::before{
  content: "LV " attr(data-level) !important;
  font-weight: 900 !important;
  font-size: 11.5px !important;
  letter-spacing: .09em !important;

  background: linear-gradient(
    180deg,
    #fff7dc 0%,
    #ffd77a 32%,
    #e7b24e 62%,
    #b67d22 100%
  ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,.28),
    0 2px 6px rgba(0,0,0,.55) !important;
}

/* Mobile optical tweak (only when visible) */
@media (max-width: 767px){
  #alProfile .alpp-avatar .alpp-level-badge:not([hidden]),
  #alMemberArea #alProfile .alpp-avatar .alpp-level-badge:not([hidden]){
    transform: translateX(calc(-48% + 2px)) !important;
  }
}


/* Mobile: bleibt 1-spaltig, nur Abstand */
#alMemberArea .alpp-ach-grid{
  gap: 8px;
}

/* Desktop: 2-spaltiges Grid */
@media (min-width: 1024px){
  #alMemberArea .alpp-ach-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* Tanks preview (Member + Public) */
#alMemberArea .al-tanks-row,
#alProfile .al-tanks-row{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: var(--al-3) !important;
}
@media (max-width: 560px){
  #alMemberArea .al-tanks-row,
  #alProfile .al-tanks-row{
    grid-template-columns: 1fr !important;
  }
}

#alMemberArea .alpp-tank-teaser,
#alProfile .alpp-tank-teaser{
  display: block !important;
  border-radius: var(--al-r2) !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--al-border) 70%, #fff) !important;
  background: rgba(255,255,255,.86) !important;
  box-shadow: var(--al-sh0) !important;
}

#alMemberArea .alpp-tank-teaser--link,
#alProfile .alpp-tank-teaser--link{
  color: inherit !important;
  text-decoration: none !important;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease !important;
}

@media (hover:hover){
  #alMemberArea .alpp-tank-teaser--link:hover,
  #alProfile .alpp-tank-teaser--link:hover{
    transform: none !important;
    border-color: color-mix(in srgb, var(--al-accent, #2C6B4A) 24%, var(--al-border)) !important;
    box-shadow: 0 14px 28px rgba(16,24,40,.08) !important;
  }
}

#alMemberArea .alpp-tank-teaser--link:focus-visible,
#alProfile .alpp-tank-teaser--link:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--al-accent, #2C6B4A) 34%, transparent) !important;
  outline-offset: 2px !important;
}

#alMemberArea .alpp-tank-text,
#alProfile .alpp-tank-text{
  padding: 12px 12px 14px !important;
}

#alMemberArea .alpp-tank-title,
#alProfile .alpp-tank-title{
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

#alMemberArea .alpp-tank-meta,
#alProfile .alpp-tank-meta{
  margin-top: 6px !important;
  font-size: 12px !important;
  color: var(--al-muted) !important;
  font-weight: 800 !important;
}

#alMemberArea .alpp-empty,
#alProfile .alpp-empty{
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--al-border) 76%, #fff);
  background: rgba(255,255,255,.88);
  box-shadow: var(--al-sh0);
}

#alMemberArea .alpp-empty__body,
#alProfile .alpp-empty__body{
  display: grid;
  gap: 6px;
}

#alMemberArea .alpp-empty__title,
#alProfile .alpp-empty__title{
  font-weight: 900;
  line-height: 1.1;
  color: var(--al-ink, #1f2d28);
}

#alMemberArea .alpp-empty__copy,
#alProfile .alpp-empty__copy{
  margin: 0;
}

#alMemberArea .alpp-empty__actions,
#alProfile .alpp-empty__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#alMemberArea .alpp-empty__btn,
#alProfile .alpp-empty__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}

#alMemberArea .alpp-empty__btn--primary,
#alProfile .alpp-empty__btn--primary{
  color: #fff !important;
  background: var(--al-accent, #2C6B4A);
  border: 1px solid color-mix(in srgb, var(--al-accent, #2C6B4A) 74%, #17362a);
  box-shadow: 0 12px 26px rgba(16,24,40,.10);
}

#alMemberArea .alpp-empty__btn--ghost,
#alProfile .alpp-empty__btn--ghost{
  color: var(--al-accent, #2C6B4A) !important;
  background: rgba(255,255,255,.96);
  border: 1px solid color-mix(in srgb, var(--al-accent, #2C6B4A) 22%, var(--al-border));
}

@media (hover:hover){
  #alMemberArea .alpp-empty__btn:hover,
  #alProfile .alpp-empty__btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(16,24,40,.12);
  }
}

@media (max-width: 560px){
  #alMemberArea .alpp-empty__actions,
  #alProfile .alpp-empty__actions{
    display: grid;
  }

  #alMemberArea .alpp-empty__btn,
  #alProfile .alpp-empty__btn{
    width: 100%;
  }
}

/* =========================================
   Achievements preview — White Cards (Member + Public)
========================================= */

#alMemberArea .alpp-ach-grid .alpp-ach-item,
#alProfile    .alpp-ach-grid .alpp-ach-item{
  background: rgba(255,255,255,.86) !important;
  border: 1px solid color-mix(in srgb, var(--al-border) 70%, #fff) !important;
  border-radius: 14px !important;
  box-shadow: var(--al-sh0) !important;
  padding: 12px 12px !important;

  display: grid !important;
  grid-template-columns: 40px 1fr !important;
  gap: 10px !important;
  align-items: center !important;

  min-width: 0 !important;
}

/* icon “chip” */
#alMemberArea .alpp-ach-grid .alpp-ach-ico,
#alProfile    .alpp-ach-grid .alpp-ach-ico{
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(15,23,42,.04) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}

/* text clamp */
#alMemberArea .alpp-ach-grid .alpp-ach-name,
#alProfile    .alpp-ach-grid .alpp-ach-name{
  font-weight: 900 !important;
  line-height: 1.15 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#alMemberArea .alpp-ach-grid .alpp-ach-meta,
#alProfile    .alpp-ach-grid .alpp-ach-meta{
  margin-top: 2px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--al-muted) !important;
  opacity: .8 !important;
}

@media (max-width: 520px){
  #alMemberArea .alpp-ach-item{
    margin-bottom: 12px;
  }

  #alMemberArea .alpp-ach-item:last-child{
    margin-bottom: 0;
  }
}

/* HERO STATS — keep GRID layout from earlier section.
   Only keep typography overrides here (no display/flex/grid overrides). */

#alMemberArea #alProfile .alpp-stat{
  gap: 2px !important;
}

#alMemberArea #alProfile .alpp-stat-num{
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  color: #1f2d28 !important;
}

#alMemberArea #alProfile .alpp-stat-lbl{
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  color: #7c8f87 !important;
}


/* PROFILE SUBNAV — mobile only (segmented control / iOS-style) */
@media (max-width: 1023px){
  #alMemberArea .al-subnav{
    margin: 12px 0 20px;
  }

  /* ✅ Segmented container */
  #alMemberArea .al-subnav__list{
    list-style: none;
    margin: 0;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    background: color-mix(in srgb, var(--al-card, #fff) 88%, var(--al-bg, #f5f6f7));
    border: 1px solid color-mix(in srgb, var(--al-border) 75%, #fff);
    box-shadow: 0 12px 28px rgba(16,24,40,.08);
  }

  /* ✅ Segments */
  #alMemberArea .al-subnav__item{
    position: relative;
  }

  /* subtle dividers (not after last item) */
  #alMemberArea .al-subnav__item:not(:last-child)::after{
    content: "";
    position: absolute;
    top: 8px;
    right: 0;
    bottom: 8px;
    width: 1px;
    background: color-mix(in srgb, var(--al-border) 85%, transparent);
    pointer-events: none;
  }

  #alMemberArea .al-subnav__link{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 14px;
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--al-text, #0f172a);

    transition:
      background-color .15s ease,
      color .15s ease,
      box-shadow .15s ease,
      transform .12s ease;
  }

  /* hover only on real hover devices */
  @media (hover:hover){
    #alMemberArea .al-subnav__link:hover{
      background: color-mix(in srgb, var(--al-accent) 6%, #fff);
    }
  }

  #alMemberArea .al-subnav__link:active{
    transform: scale(.98);
  }

  /* ✅ Active pill */
  #alMemberArea .al-subnav__item.is-active .al-subnav__link,
  #alMemberArea .al-subnav__link[aria-current="page"]{
    background: #fff;
    color: var(--al-accent);
    box-shadow:
      0 8px 18px rgba(16,24,40,.12),
      inset 0 0 0 1px color-mix(in srgb, var(--al-accent) 28%, var(--al-border));
  }

  /* tidy labels */
  #alMemberArea .al-subnav__label{
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

#alMemberArea .al-subnav{
  margin-top: 6px;
}

#alMemberArea .al-subnav__item.is-active .al-subnav__link{
  box-shadow:
    0 6px 14px rgba(16,24,40,.14),
    inset 0 0 0 1px color-mix(in srgb, var(--al-accent) 30%, var(--al-border));
}


/* =========================================================
   PUBLIC (/u/slug) — match MemberSection card width on mobile
========================================================= */

/* 1) Outer page padding (like MemberArea) */
.alpp-public-shell{
  padding-inline: 16px !important;    /* same feeling as member area */
}

/* 2) Constrain the whole profile to a centered column */
.alpp-public-shell #alProfile{
  width: 100% !important;
  max-width: 420px !important;        /* mobile column like membersection */
  margin: 0 auto !important;
}

/* 3) Cards should not stretch beyond the column */
.alpp-public-shell #alProfile .al-card,
.alpp-public-shell #alProfile .alpp-card,
.alpp-public-shell #alProfile .alpp-hero{
  width: 100% !important;
  max-width: 100% !important;
}

/* 4) Slightly nicer spacing from top on public pages */
.alpp-public-shell #alProfile{
  padding-top: 10px !important;
}

/* 5) Tablet/Desktop: allow wider, still centered */
@media (min-width: 900px){
  .alpp-public-shell #alProfile{
    max-width: 980px !important;      /* align to your desktop member look */
  }
}

/* Public (/u/...) — no owner actions */
#alProfile[data-is-owner="0"] [data-js="pp-primary"],
#alProfile[data-is-owner="0"] [data-js="pp-more"],
#alProfile[data-is-owner="0"] [data-js="pp-share-owner"],
#alProfile[data-is-owner="0"] .alpp-hero-utils{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* =========================================================
   STEP 1 — Initial Loading: no layout jump (Public + Owner)
   Put at VERY END of profile.css
========================================================= */

/* 0) Make sure root can carry state */
#alProfile.is-loading {}

/* 1) Reserve stable space for async text blocks (prevents “pressing together”) */
#alProfile.is-loading .alpp-name,
#alProfile.is-loading .alpp-handle,
#alProfile.is-loading .alpp-title{
  min-height: 18px !important;
}

/* counts + stats: keep line height stable */
#alProfile.is-loading [data-js="pp-followers-count"],
#alProfile.is-loading [data-js="pp-following-count"],
#alProfile.is-loading [data-js="pp-stat-tanks"],
#alProfile.is-loading [data-js="pp-stat-ach"]{
  min-height: 16px !important;
}

/* 2) Skeleton shimmer on placeholders (targets your real markup hooks) */
#alProfile.is-loading [data-js="pp-name-view"],
#alProfile.is-loading [data-js="pp-handle"],
#alProfile.is-loading [data-js="pp-rank-title"],
#alProfile.is-loading [data-js="pp-followers-count"],
#alProfile.is-loading [data-js="pp-following-count"],
#alProfile.is-loading [data-js="pp-stat-tanks"],
#alProfile.is-loading [data-js="pp-stat-ach"]{
  color: transparent !important;
  border-radius: 10px !important;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.06),
    rgba(0,0,0,.10),
    rgba(0,0,0,.06)
  ) !important;
  background-size: 240% 100% !important;
  animation: alpp-skeleton 1.05s linear infinite !important;
}

/* 3) Make skeleton blocks look like real text width (nice, calm) */
#alProfile.is-loading [data-js="pp-name-view"]{ width: min(240px, 74vw) !important; display:inline-block !important; }
#alProfile.is-loading [data-js="pp-handle"]{ width: min(180px, 58vw) !important; display:inline-block !important; }
#alProfile.is-loading [data-js="pp-rank-title"]{ width: min(200px, 62vw) !important; display:inline-block !important; }
#alProfile.is-loading [data-js="pp-followers-count"],
#alProfile.is-loading [data-js="pp-following-count"]{ width: 28px !important; display:inline-block !important; }

/* 4) When loaded: remove shimmer defensively */
#alProfile.is-loaded [data-js="pp-name-view"],
#alProfile.is-loaded [data-js="pp-handle"],
#alProfile.is-loaded [data-js="pp-rank-title"],
#alProfile.is-loaded [data-js="pp-followers-count"],
#alProfile.is-loaded [data-js="pp-following-count"],
#alProfile.is-loaded [data-js="pp-stat-tanks"],
#alProfile.is-loaded [data-js="pp-stat-ach"]{
  animation: none !important;
  background: none !important;
  color: inherit !important;
}

/* 5) Motion safety */
@media (prefers-reduced-motion: reduce){
  #alProfile.is-loading [data-js]{ animation: none !important; }
}

@keyframes alpp-skeleton{
  0%{ background-position: 0% 0; }
  100%{ background-position: 100% 0; }
}

/* =========================================
   STEP 1 FIX — Hide interactive UI while loading
========================================= */

#alProfile.is-loading .alpp-actions,
#alProfile.is-loading .alpp-actions__row3,
#alProfile.is-loading .alpp-follow,
#alProfile.is-loading .alpp-share,
#alProfile.is-loading .alpp-hero-stats,
#alProfile.is-loading .alpp-stats,
#alProfile.is-loading .alpp-socials{
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

#alProfile .al-edit { display: none; }
#alProfile.is-editing .al-edit { display: block; }
#alProfile.is-editing .al-view { display: none; }


#alProfile .alpp-unfollow-confirm{
  display:flex;
  gap:10px;
  margin-top:10px;
  align-items:center;
}

#alProfile .alpp-unfollow-confirm__danger,
#alProfile .alpp-unfollow-confirm__cancel{
  appearance:none;
  border:1px solid var(--al-border);
  border-radius:12px;
  padding:10px 12px;
  font: inherit;
  line-height:1;
  cursor:pointer;
  background:#fff;
}

#alProfile .alpp-unfollow-confirm__danger{
  border-color: color-mix(in srgb, #e11d48 55%, var(--al-border));
  color:#e11d48;
}

@media (hover:hover){
  #alProfile .alpp-unfollow-confirm__danger:hover,
  #alProfile .alpp-unfollow-confirm__cancel:hover{
    background: color-mix(in srgb, var(--al-accent) 8%, #fff);
  }
}

/* =========================================
   PROFILE.CSS — Follow Button (CTA + Insta-like Following)
   - Scope: ONLY #alProfile
   - Follow = brand primary CTA + icon
   - Following = light grey status (not CTA)
========================================= */

/* Base */
#alProfile .alpp-follow{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 10px !important;

  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 12px !important; /* less pill */

  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;

  border: 1px solid transparent !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;

  transition:
    transform .10s ease,
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    filter .18s ease !important;
}

/* FOLLOW (Primary CTA) — AquariumLesson brand */
#alProfile .alpp-follow:not(.is-following){
  background: linear-gradient(135deg, #2C6B4A 0%, #3E8B66 45%, #5CA892 100%) !important;
  color: #ffffff !important;
  border-color: rgba(44,107,74,.45) !important;

  box-shadow:
    0 10px 26px rgba(44,107,74,.26),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

/* Hover / Active */
@media (hover:hover){
  #alProfile .alpp-follow:not(.is-following):hover{
    transform: translateY(-1px) !important;
    filter: saturate(1.05) brightness(1.02) !important;
    box-shadow:
      0 14px 34px rgba(44,107,74,.32),
      inset 0 1px 0 rgba(255,255,255,.30) !important;
  }
}
#alProfile .alpp-follow:active{
  transform: translateY(0) scale(.99) !important;
}

/* Focus (A11y) */
#alProfile .alpp-follow:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(92,168,146,.35),
    0 14px 34px rgba(44,107,74,.28) !important;
}

/* FOLLOWING (Status, not CTA) — Instagram-like light grey */
#alProfile .alpp-follow.is-following{
  background: #f3f4f6 !important;
  color: #374151 !important;
  border-color: #e5e7eb !important;
  box-shadow: none !important;
  font-weight: 550 !important;
}

@media (hover:hover){
  #alProfile .alpp-follow.is-following:hover{
    background: #eef0f2 !important;
  }
}

/* Loading */
#alProfile .alpp-follow[data-loading="1"]{
  opacity: .72 !important;
  pointer-events: none !important;
}

/* =========================================
   +Member icon (only when NOT following)
   + label spacing fix
========================================= */


/* ensure label never collides (extra safety) */
#alProfile .alpp-follow:not(.is-following){
  text-indent: 0 !important;
}

/* Following: no icon, normal padding */
#alProfile .alpp-follow.is-following{
  padding-left: 18px !important;
}
#alProfile .alpp-follow.is-following::before{
  content:none !important;
}

/* Mobile: slightly tighter */
@media (max-width: 480px){
  /* Follow bleibt geometrisch zentriert */
  #alProfile .alpp-follow{
    width: min(260px, 92vw) !important;
    margin-inline: auto !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* falls noch ein altes ::before Icon existiert -> killen */
  #alProfile .alpp-follow::before{
    content: none !important;
    display: none !important;
  }
}


/* =========================================
   Follow button crispness fixes
   - remove filter on hover (softens text)
   - use mask for the icon (sharper)
========================================= */

/* 1) Don't use filter on button (can blur text on some setups) */
#alProfile .alpp-follow{
  filter: none !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (hover:hover){
  #alProfile .alpp-follow:not(.is-following):hover{
    filter: none !important; /* override any older rules */
  }
}

/* 3) Avoid tiny scaling (can soften) */
#alProfile .alpp-follow:active{
  transform: translateY(0) !important;  /* no scale */
}

/* =========================================================
   Profile Subnav — Compact 4-Tab Bar (360px fit)
   overrides the “pill rail” into a 4-col grid
========================================================= */

/* keep it mobile-only (desktop uses sidenav anyway) */
@media (min-width: 900px){
  #alMemberArea #alProfile .al-subnav{ display:none !important; }
}

/* wrapper: tighter */
#alMemberArea #alProfile .al-subnav{
  margin: 8px 0 12px !important;
  padding: 0px !important;
  border-radius: 14px !important;
}

/* remove edge fades / masks (we’re not scrolling anymore) */
#alMemberArea #alProfile .al-subnav{
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* LIST -> 4 equal tabs (no scroll) */
#alMemberArea #alProfile .al-subnav__list{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 3px !important;

  overflow: visible !important;
  scroll-snap-type: none !important;
}

/* LINKS -> compact tabs, not pills */
#alMemberArea #alProfile .al-subnav__link{
  width: 100% !important;
  height: 34px !important;
  padding: 0 8px !important;

  border-radius: 10px !important;           /* less pill */
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1px !important;

  background: rgba(255,255,255,.70) !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.06) !important;

  justify-content: center !important;
  text-align: center !important;
}

/* label: allow slight shrink + prevent wrapping */
#alMemberArea #alProfile .al-subnav__label{
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* active: crisp, not too “shiny” */
#alMemberArea #alProfile .al-subnav__item.is-active .al-subnav__link{
  background: rgba(44,107,74,.12) !important;
  border-color: rgba(44,107,74,.28) !important;
  color: #0b1b12 !important;
  box-shadow:
    0 10px 20px rgba(44,107,74,.12),
    0 1px 0 rgba(255,255,255,.70) inset !important;
}

/* extra-tight for 360px and below */
@media (max-width: 360px){
  #alMemberArea #alProfile .al-subnav__list{ gap: 4px !important; }
  #alMemberArea #alProfile .al-subnav__link{
    height: 32px !important;
    padding: 0 6px !important;
    font-size: 11.5px !important;
    border-radius: 9px !important;
  }
}

/* =========================================
   Profile: Followers / Following clickable
   (Hand cursor + nicer interaction)
========================================= */
#alMemberArea #alProfile .alpp-follow-stats { 
  display: flex;
  justify-content: center;
  gap: 14px;
}

#alMemberArea #alProfile .alpp-follow-text{
  cursor: pointer;                /* ✅ Hand */
  user-select: none;              /* verhindert I-Beam/Selection */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 12px;
  line-height: 1;
}

#alMemberArea #alProfile .alpp-follow-text:hover{
  background: rgba(44,107,74,.08);
}

#alMemberArea #alProfile .alpp-follow-text:active{
  transform: translateY(1px);
}

#alMemberArea #alProfile .alpp-follow-text strong{
  font-weight: 800;
}

#alMemberArea #alProfile .alpp-follow-text .alpp-follow-label{
  opacity: .75;
}

/* optional: sichtbarer Keyboard-Focus (besser als nix) */
#alMemberArea #alProfile .alpp-follow-text:focus-visible{
  outline: 2px solid rgba(44,107,74,.35);
  outline-offset: 2px;
}

/* =========================================
   Follow Modal — clean SaaS 2026
   Classes from your DOM:
   .al-modal, .al-modal__card, .al-modal__head, .al-modal__close, .al-modal__body
   .al-follow-list, .al-follow-row, .al-follow-avatar, .al-follow-name
========================================= */

#alMemberArea .al-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(10, 12, 14, .42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#alMemberArea .al-modal__card{
  width: min(560px, 92vw);
  max-height: min(72vh, 720px);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(20, 24, 28, .08);
  border-radius: 20px;
  box-shadow:
    0 18px 60px rgba(0,0,0,.18),
    0 2px 10px rgba(0,0,0,.08);
  overflow: hidden;
  transform: translateY(6px);
  animation: alModalIn .18s ease-out both;
}

@keyframes alModalIn{
  from { opacity: 0; transform: translateY(14px) scale(.99); }
  to   { opacity: 1; transform: translateY(6px)  scale(1); }
}

#alMemberArea .al-modal__head{
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(20, 24, 28, .08);
}

/* Titel (dein h3 data-js="follow-modal-title") */
#alMemberArea .al-modal__head h3{
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
}

#alMemberArea .al-modal__close{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(20, 24, 28, .10);
  background: rgba(255,255,255,.9);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

#alMemberArea .al-modal__close:hover{
  background: rgba(44,107,74,.08);
  border-color: rgba(44,107,74,.18);
}

#alMemberArea .al-modal__close:active{
  transform: translateY(1px);
}

#alMemberArea .al-modal__body{
  padding-top: 8px; 
  overflow: auto;
  overscroll-behavior: contain;
}

/* List wrapper */
#alMemberArea .al-follow-list{
  display: grid;
  gap: 6px;
  padding: 4px;
}

/* Row = klickbar */
#alMemberArea .al-follow-row{
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, transform .12s ease, border-color .12s ease;
  border: 1px solid transparent;
}

#alMemberArea .al-follow-row:hover{
  background: rgba(44,107,74,.06);
  border-color: rgba(44,107,74,.14);
}

#alMemberArea .al-follow-row:active{
  transform: translateY(1px);
}

/* Avatar */
#alMemberArea .al-follow-avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  background: rgba(20,24,28,.06);
  border: 1px solid rgba(20,24,28,.08);
}

/* Name */
#alMemberArea .al-follow-name{
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.15;
}

/* optional: “soft” scrollbar */
#alMemberArea .al-modal__body::-webkit-scrollbar{ width: 10px; }
#alMemberArea .al-modal__body::-webkit-scrollbar-thumb{
  background: rgba(20,24,28,.12);
  border-radius: 20px;
  border: 3px solid rgba(0,0,0,0);
  background-clip: padding-box;
}

/* =========================
   Follow Stats click targets
========================= */
#alMemberArea .alpp-follow-stats{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:baseline;
}

#alMemberArea .alpp-follow-text{
  appearance:none;
  border:0;
  background:transparent;
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  display:inline-flex;
  gap:6px;
  align-items:baseline;
  line-height:1;
}

#alMemberArea .alpp-follow-text:hover{
  background:rgba(0,0,0,.04);
}

#alMemberArea .alpp-follow-text:focus-visible{
  outline:2px solid rgba(44,107,74,.35);
  outline-offset:2px;
}

/* =========================
   Modal (Instagram-lite, clean)
========================= */
#alMemberArea .al-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(10,12,16,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index:9999;
}

#alMemberArea .al-modal[hidden]{ display:none !important; }

#alMemberArea .al-modal__card{
  width:min(620px, 92vw);
  max-height:min(72vh, 640px);
  background:#fff;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.22);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

#alMemberArea .al-modal__head{
  display:grid;
  grid-template-columns:40px 1fr 40px;
  align-items:center;
  padding:12px 12px;
  border-bottom:1px solid rgba(0,0,0,.07);
  background:#fff;
}

#alMemberArea .al-modal__head h3{
  margin:0;
  text-align:center;
  font-size:15px;
  font-weight:700;
}

#alMemberArea .al-modal__close{
  width:34px;
  height:34px;
  border-radius:10px;
  border:0;
  background:rgba(0,0,0,.05);
  cursor:pointer;
}

#alMemberArea .al-modal__close:hover{
  background:rgba(0,0,0,.08);
}

#alMemberArea .al-modal__body{
  /* ✅ 64px war nur nötig bei overlay/sticky header – hier clean lassen */
  padding:10px 10px 12px;
  overflow:auto;
  overscroll-behavior:contain;
}

/* =========================
   Follow list rows
========================= */
#alMemberArea .al-follow-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

#alMemberArea .al-follow-row{
  display:grid;
  grid-template-columns:44px 1fr auto;
  gap:12px;
  align-items:center;
  padding:10px 10px;
  border-radius:14px;
  text-decoration:none;
  color:inherit;
}

#alMemberArea .al-follow-row:hover{
  background:rgba(0,0,0,.04);
}

#alMemberArea .al-follow-avatar{
  width:44px;
  height:44px;
  border-radius:999px;
  object-fit:cover;
  background:rgba(0,0,0,.06);
}

#alMemberArea .al-follow-name{
  font-weight:700;
  font-size:14px;
  line-height:1.2;
}

#alMemberArea .al-follow-handle{
  font-size:12px;
  opacity:.62;
  margin-top:2px;
}

#alMemberArea .al-follow-action{
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  height:32px;
  padding:0 12px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  cursor:pointer;
}

#alMemberArea .al-follow-action.is-following{
  background:rgba(0,0,0,.04);
}

#alMemberArea .al-follow-action:disabled{
  opacity:.55;
  cursor:default;
}

#alMemberArea .al-follow-action-spacer{
  width:84px;
  height:1px;
}

/* =========================
   Unfollow confirm (IG-like)
========================= */
#alMemberArea .al-follow-confirm{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(10,12,16,.45);
}

#alMemberArea .al-follow-confirm__card{
  width:min(420px, 92vw);
  background:#fff;
  border-radius:16px;
  padding-bottom: 18px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  overflow:hidden;
  text-align:center;
  
}

#alMemberArea .al-follow-confirm__title{
  padding:18px 16px 10px;
  font-weight:800;
}

#alMemberArea .al-follow-confirm__danger,
#alMemberArea .al-follow-confirm__cancel{
  width:100%;
  border:0;
  background:#fff;
  padding:12px 16px;
  cursor:pointer;
  font-weight:800;
}

#alMemberArea .al-follow-confirm__danger{
  color:#d11f2a;
  border-top:1px solid rgba(0,0,0,.08);
}

#alMemberArea .al-follow-confirm__cancel{
  border-top:1px solid rgba(0,0,0,.08);
  opacity:.75;
}

/* mobile polish */
@media (max-width:520px){
  #alMemberArea .al-modal__card{
    width:min(560px, 94vw);
    max-height:min(70vh, 560px);
    border-radius:16px;
  }
}

/* =========================================
   FOLLOW MODAL — Action Buttons (force win)
   - Follow / Follow back: same CTA style as #alProfile .alpp-follow
   - Following: light grey status (ghost)
   - Unfollow in confirm: red
========================================= */

/* Base (match your CTA ergonomics) */
#alMemberArea .al-follow-row .al-follow-action{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 10px !important;

  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 12px !important; /* less pill */

  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;

  border: 1px solid transparent !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;

  transition:
    transform .10s ease,
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    filter .18s ease !important;
}

/* FOLLOW / FOLLOW BACK (Primary CTA) */
#alMemberArea .al-follow-row .al-follow-action[data-state="follow"]{
  background: linear-gradient(135deg, #2C6B4A 0%, #3E8B66 45%, #5CA892 100%) !important;
  color: #ffffff !important;
  border-color: rgba(44,107,74,.45) !important;

  box-shadow:
    0 10px 26px rgba(44,107,74,.26),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

/* Hover / Active */
@media (hover:hover){
  #alMemberArea .al-follow-row .al-follow-action[data-state="follow"]:hover{
    transform: translateY(-1px) !important;
    filter: saturate(1.05) brightness(1.02) !important;
    box-shadow:
      0 14px 34px rgba(44,107,74,.32),
      inset 0 1px 0 rgba(255,255,255,.30) !important;
  }
}
#alMemberArea .al-follow-row .al-follow-action:active{
  transform: translateY(0) scale(.99) !important;
}

/* Focus (A11y) */
#alMemberArea .al-follow-row .al-follow-action:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(92,168,146,.35),
    0 14px 34px rgba(44,107,74,.28) !important;
}

/* FOLLOWING (Status, not CTA) */
#alMemberArea .al-follow-row .al-follow-action[data-state="following"]{
  background: #f3f4f6 !important;
  color: #374151 !important;
  border-color: #e5e7eb !important;
  box-shadow: none !important;
  font-weight: 550 !important;
  filter: none !important;
}

@media (hover:hover){
  #alMemberArea .al-follow-row .al-follow-action[data-state="following"]:hover{
    background: #eef0f2 !important;
  }
}

/* Loading (if you disable / set data-loading) */
#alMemberArea .al-follow-row .al-follow-action[disabled],
#alMemberArea .al-follow-row .al-follow-action[data-loading="1"]{
  opacity: .72 !important;
  pointer-events: none !important;
}

#alMemberArea .al-follow-row .al-follow-you{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, .05) !important;
  color: rgba(31, 41, 55, .72) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* Confirm: Unfollow text in red */
#alMemberArea .al-follow-confirm__danger{
  color: #d11f2a !important;
  font-weight: 800 !important;
}
#alMemberArea .al-follow-confirm__danger:hover{
  background: rgba(209,31,42,.06) !important;
}

#alMemberArea .al-follow-empty{
  padding: 22px 14px !important;
  text-align: center !important;
}
#alMemberArea .al-follow-empty__title{
  font-weight: 800 !important;
  margin-bottom: 6px !important;
}
#alMemberArea .al-follow-empty__sub{
  opacity: .65 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

/* =========================================
   Profile Menu — Logout (Danger)
========================================= */

#alMemberArea .al-menu__item.is-danger{
  color: #d11f2a !important;
  font-weight: 600 !important;
}

#alMemberArea .al-menu__item.is-danger:hover{
  background: rgba(209, 31, 42, 0.08) !important;
  color: #b91c1c !important;
}

#alMemberArea .al-menu__item.is-danger:active{
  background: rgba(209, 31, 42, 0.12) !important;
}

/* Optional: subtle left indicator (premium touch) */
#alMemberArea .al-menu__item.is-danger::before{
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: rgba(209, 31, 42, 0.6);
  opacity: 0;
  transition: opacity .15s ease;
}

#alMemberArea .al-menu__item.is-danger:hover::before{
  opacity: 1;
}

/* =========================================
   Profile — "More" Menu (Owner)
   Scope: #alMemberArea / profile page
   Classes: .al-menu .al-menu__item .al-menu__divider
========================================= */

/* Menu container (popover) */
#alMemberArea .al-menu[data-js="pp-more-menu"]{
  position: absolute !important;
  z-index: 80 !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;

  min-width: 220px !important;
  max-width: min(92vw, 280px) !important;

  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;

  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 14px !important;

  box-shadow:
    0 18px 60px rgba(0,0,0,.18),
    0 2px 10px rgba(0,0,0,.08) !important;

  padding: 6px !important;
}

/* Ensure it anchors to the "..." area */
#alMemberArea [data-js="pp-actions"]{
  position: relative !important;
}

/* Items */
#alMemberArea .al-menu__item{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: 10px !important;
  padding: 10px 12px !important;

  border-radius: 10px !important;
  border: 0 !important;
  background: transparent !important;

  color: rgba(17,24,39,.92) !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  font-size: 13px !important;

  text-decoration: none !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

#alMemberArea .al-menu__item:hover{
  background: rgba(0,0,0,.05) !important;
}

#alMemberArea .al-menu__item:active{
  background: rgba(0,0,0,.08) !important;
}

/* Divider (if you add one later) */
#alMemberArea .al-menu__divider{
  height: 1px !important;
  background: rgba(0,0,0,.08) !important;
  margin: 6px 8px !important;
  border: 0 !important;
}

/* Danger row (Log out) */
#alMemberArea .al-menu__item.is-danger{
  color: #d11f2a !important;
  font-weight: 700 !important;
}

#alMemberArea .al-menu__item.is-danger:hover{
  background: rgba(209,31,42,.08) !important;
  color: #b91c1c !important;
}

/* Optional: subtle left indicator on danger */
#alMemberArea .al-menu__item.is-danger::before{
  content: "" !important;
  width: 3px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: rgba(209,31,42,.7) !important;
  opacity: 0 !important;
  transition: opacity .15s ease !important;
}

#alMemberArea .al-menu__item.is-danger:hover::before{
  opacity: 1 !important;
}

/* Mobile: keep it inside viewport */
@media (max-width: 520px){
  #alMemberArea .al-menu[data-js="pp-more-menu"]{
    left: 0 !important;
    right: auto !important;
    max-width: min(92vw, 320px) !important;
  }
}

/* =========================================
   Profile "More" Menu — anchor & layering fix
========================================= */

/* 1) Ensure the hero actions area is the positioning context */
#alProfile .alpp-hero-actions{
  position: relative !important;
  z-index: 20 !important;
}

/* 2) Prevent clipping by hero card containers (common with glass/rounded cards) */
#alProfile .al-card.alpp-hero,
#alProfile .alpp-hero-grid,
#alProfile .alpp-hero-actions{
  overflow: visible !important;
}

/* 3) Place the menu next to the "..." trigger (top-right aligned) */
#alProfile .al-menu[data-js="pp-more-menu"]{
  position: absolute !important;
  z-index: 9999 !important;

  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;

  min-width: 220px !important;
  max-width: min(92vw, 280px) !important;
}

/* 4) If your trigger sits inside .alpp-actions__row3, align even better */
#alProfile .alpp-actions__row3{
  position: relative !important;
}

/* Optional: on very small widths, keep it inside viewport */
@media (max-width: 520px){
  #alProfile .al-menu[data-js="pp-more-menu"]{
    right: 0 !important;
    left: auto !important;
    max-width: min(92vw, 320px) !important;
  }
}

#alProfile .alpp-hero{ position: relative !important; z-index: 50 !important; }
#alProfile .al-menu[data-js="pp-more-menu"]{ z-index: 9999 !important; }

/* =========================================
   Share Button beside Follow (Secondary)
   Scope: ONLY #alMemberArea #alProfile
   - Desktop: Follow (primary) + Share (secondary) in one row
   - Mobile: stack full-width (dein bestehendes Mobile-Override bleibt)
========================================= */

/* 1) Row layout: two CTAs in a clean row (only when public, i.e. follow exists) */
#alMemberArea #alProfile .alpp-actions__row3{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

#alMemberArea #alProfile .alpp-share{
  max-width: 120px !important;
  margin-inline: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;

  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;

  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 26px rgba(17, 24, 39, .06) !important;

  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;

  transition:
    transform .10s ease,
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    filter .18s ease !important;
}

@media (hover:hover){
  #alMemberArea #alProfile .alpp-share:hover{
    transform: translateY(-1px) !important;
    background: #f9fafb !important;
    border-color: #d1d5db !important;
    box-shadow: 0 14px 34px rgba(17, 24, 39, .10) !important;
  }
}
#alMemberArea #alProfile .alpp-share:active{
  transform: translateY(0) scale(.99) !important;
}

#alMemberArea #alProfile .alpp-share:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(92,168,146,.28),
    0 14px 34px rgba(17, 24, 39, .10) !important;
}

/* 3) If your global rule forces ALL buttons full width, override specifically for follow+share on desktop */
@media (min-width: 481px){
  #alMemberArea #alProfile .alpp-actions :is(button, a, .al-btn).alpp-share{
    width: auto !important;
  }
  #alMemberArea #alProfile .alpp-actions :is(button, a, .al-btn).alpp-follow{
    width: auto !important;
  }
}

/* 4) Mobile: stack (your existing rules already do this; ensure both are 100%) */
@media (max-width: 480px){
  #alMemberArea #alProfile .alpp-actions__row3{
    flex-direction: column !important;
    gap: 10px !important;
  }
  #alMemberArea #alProfile .alpp-follow,
  #alMemberArea #alProfile .alpp-share{
    width: 100% !important;
    max-width: min(260px, 92vw) !important;
    margin-inline: auto !important;
  }
}

/* 5) Loading state parity */
#alMemberArea #alProfile.is-loading .alpp-share{
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Public CTA row (Follow + Share side-by-side) */
#alMemberArea #alProfile .alpp-cta-row{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 10px !important;
}

/* Share = Secondary */
#alMemberArea #alProfile .alpp-share--secondary{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;

  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;

  background: rgba(255,255,255,.92) !important;
  color: #1f2937 !important;
  border: 1px solid rgba(15,23,42,.12) !important;

  box-shadow: 0 10px 26px rgba(17,24,39,.06) !important;
  cursor: pointer !important;

  transition:
    transform .10s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

@media (hover:hover){
  #alMemberArea #alProfile .alpp-share--secondary:hover{
    transform: translateY(-1px) !important;
    background: #f9fafb !important;
    border-color: rgba(15,23,42,.18) !important;
    box-shadow: 0 14px 34px rgba(17,24,39,.10) !important;
  }
}
#alMemberArea #alProfile .alpp-share--secondary:active{
  transform: translateY(0) scale(.99) !important;
}
#alMemberArea #alProfile .alpp-share--secondary:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(92,168,146,.28),
    0 14px 34px rgba(17,24,39,.10) !important;
}

/* Mobile: stack */
@media (max-width: 480px){
  #alMemberArea #alProfile .alpp-cta-row{
    flex-direction: column !important;
    gap: 10px !important;
  }
  #alMemberArea #alProfile .alpp-follow,
  #alMemberArea #alProfile .alpp-share--secondary{
    width: 100% !important;
    max-width: min(260px, 92vw) !important;
    margin-inline: auto !important;
  }
}

/* =========================================
   FIX: Public CTA Row (Follow + Share) stays together on mobile
   Scope: #alProfile only
========================================= */

#alProfile .alpp-cta-row > .alpp-follow,
#alProfile .alpp-cta-row > .alpp-share{
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  min-height: 44px !important;
}

/* Mobile tightening */
@media (max-width: 520px){
  #alProfile .alpp-cta-row{
    width: min(420px, 92vw) !important;
    gap: 10px !important;
  }
}

/* Very small devices: slightly smaller padding so both fit */
@media (max-width: 360px){
  #alProfile .alpp-cta-row{
    width: min(360px, 94vw) !important;
    gap: 8px !important;
  }
  #alProfile .alpp-cta-row > .alpp-follow,
  #alProfile .alpp-cta-row > .alpp-share{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* =========================================
   Follow Modal – remove underline
========================================= */

#alMemberArea .al-follow-row,
#alMemberArea .al-follow-row * {
  text-decoration: none !important;
}

/* extra safety for browsers that re-add underline on hover */
#alMemberArea .al-follow-row:hover,
#alMemberArea .al-follow-row:hover * {
  text-decoration: none !important;
}

/* Anchor: der ⋮-Button */
#alMemberArea #alProfile [data-js="pp-more"]{
  position: relative !important;
}

/* Menü exakt mittig unter dem ⋮ */
#alMemberArea #alProfile .al-menu[data-js="pp-more-menu"]{
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  z-index: 9999 !important;
}

/* =========================================================
   FINAL — Actions row: keep Share + Kebab inline (owner profile)
   Put at END of profile.css
========================================================= */

#alMemberArea #alProfile .alpp-actions__row3{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;      /* kein Umbruch */
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  width: fit-content !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

/* WICHTIG: deine globale Mobile-Regel setzt Buttons oft auf width:100% */
#alMemberArea #alProfile .alpp-actions__row3 > *{
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}

/* Share bleibt “Button”, aber nicht fullwidth */
#alMemberArea #alProfile .alpp-actions__row3 .alpp-share{
  width: auto !important;
}

/* Kebab fix */
#alMemberArea #alProfile .alpp-actions__row3 .al-iconbtn{
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 44px !important;
}

/* =========================================================
   PROFILE HERO — Actions (NEW)
   - Primary action centered
   - Utilities (Share + More) top-right on the hero
========================================================= */

/* Make actions area a positioning context */
#alProfile .alpp-hero-actions{
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Primary: keep it centered */
#alProfile .alpp-hero-actions [data-js="pp-primary"]{
  display: inline-flex !important;
  margin-inline: auto !important;
}

/* Utilities cluster (top-right) */
#alProfile .alpp-hero-actions .alpp-hero-utils{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 60 !important;
}

/* Utility buttons: icon-only, 44x44 tap targets */
#alProfile .alpp-hero-actions .alpp-hero-utils__btn{
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;

  background: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: none !important;
}

/* Hover/active feel (matches your system) */
#alProfile .alpp-hero-actions .alpp-hero-utils__btn{
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease, filter .12s ease !important;
}
@media (hover:hover){
  #alProfile .alpp-hero-actions .alpp-hero-utils__btn:hover{
    filter: brightness(.98) !important;
    transform: translateY(-1px) !important;
  }
}
#alProfile .alpp-hero-actions .alpp-hero-utils__btn:active{
  transform: translateY(0) !important;
  filter: brightness(.96) !important;
}
#alProfile .alpp-hero-actions .alpp-hero-utils__btn:focus-visible{
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(44,107,74,.18) !important;
}

/* IMPORTANT: remove any legacy row3 styling effect */
#alProfile .alpp-actions__row3{ display: contents !important; }

/* Hero must not clip the popover */
#alProfile .al-card.alpp-hero,
#alProfile .alpp-hero-grid,
#alProfile .alpp-hero-actions{
  overflow: visible !important;
}

/* Menu right-aligned below the utility cluster */
#alProfile .al-menu[data-js="pp-more-menu"]{
  position: absolute !important;
  z-index: 9999 !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 220px !important;
  max-width: min(92vw, 280px) !important;
}

/* =========================================================
   EDIT BAR — Sticky Bottom (mobile-first, Premium 2026)
   - sits above the safe area
   - only visible in edit mode (JS toggles [hidden])
========================================================= */

/* Reserve space while editing so content never hides behind bar */
#alProfile.is-editing{
  /* editbar height ~72px */
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}

/* The bar itself */
#alProfile .alpp-editbar{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;

  /* dock above the safe area */
  bottom: env(safe-area-inset-bottom, 0px) !important;

  z-index: 9999 !important;

  margin: 0 !important;
  padding: 10px 14px !important;

  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;

  /* glass */
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;

  border-top: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 -14px 38px rgba(16,24,40,.16) !important;

  /* keep it calm, not full-bleed on large screens */
  max-width: 520px !important;
  width: min(520px, calc(100vw - 24px)) !important;
  border-radius: 18px !important;

  /* center it */
  margin-inline: auto !important;

  /* tiny lift above the viewport edge */
  transform: translateY(-6px) !important;
}

/* Buttons inside: two equal CTAs */
#alProfile .alpp-editbar .al-btn{
  flex: 1 1 0 !important;
  min-height: 46px !important;
  border-radius: 14px !important;  /* less pill = more modern */
  justify-content: center !important;
}

/* Make sure hidden still wins */
#alProfile .alpp-editbar[hidden]{
  display: none !important;
}

#alProfile.is-editing{
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}

#alProfile .alpp-editbar{
  bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* Make it feel like a grouped action row (modern, not pill) */
#alProfile .alpp-editbar .al-btn{
  min-height: 46px !important;
  border-radius: 14px !important;
}

/* Hard guarantee: hidden must hide (even if other rules exist) */
#alProfile [hidden],
#alProfile .is-hidden{
  display: none !important;
}

/* Profile must stretch inside flex parents (Elementor/Member area layouts) */
#alMemberArea #alProfile{
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

#alMemberArea{
  min-width: 0 !important;
}

#alProfile.is-pane-view .al-profile-grid > :not(.al-account-pane){
  display: none !important;
}
#alProfile.is-pane-view .al-account-pane{
  display: block !important;
}

#alAccountPane[hidden]{ display:none !important; }

/* =========================================
   Account Pane View: show ONLY the pane card
   ========================================= */
.al-profile.is-pane-view .al-profile-grid > article{
  display: none !important;
}

/* keep the account pane visible */
.al-profile.is-pane-view .al-profile-grid > #alAccountPane{
  display: block !important;
}

/* nur die konkreten Header-Blöcke ausblenden */
body.page-id-123 header.elementor-location-header .elementor-element-67f4380,
body.page-id-123 header.elementor-location-header .elementor-element-bdfcf44{
  display:none !important;
}

/* den Header selbst in Ruhe lassen */
body.page-id-123 header.elementor-location-header{
  min-height: 64px !important; /* oder einfach weglassen */
}


/* Shell = Layout-Grenzen (Owner breit, Public schmal) */
.alpp-shell{ width:100%; }

.alpp-shell--owner{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-inline: clamp(16px, 2vw, 28px) !important;
}


.alpp-shell--public{
  max-width: 440px;
  margin: 0 auto;
  padding-inline: 12px;
}

/* Hard guard: Pane darf Layout nicht begrenzen */
#alProfile,
#alProfile .alpp-hero,
#alProfile .alpp-hero-grid,
#alProfile .alpp-hero-main,
#alProfile .alpp-hero-actions,
#alProfile .alpp-hero-stats{
  max-width: none !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* =========================
   1) REMOVE these duplicated global blocks
   (they belong ONLY inside the 560px media query)
========================= */

/* DELETE THIS ENTIRE DUPLICATE (it currently exists outside @media):
#alMemberArea #alProfile .alpp-hero-left{ ... }
#alMemberArea #alProfile .alpp-follow,
#alMemberArea #alProfile .alpp-share{ ... }
*/


/* =========================
   2) FOLLOW MODAL — keep ONE version only
   Choose ONE of your modal blocks and delete the other two.
   Recommended: keep the "clean SaaS 2026" one (the first big polished block).
========================= */

/* DELETE the later duplicate blocks starting at:
   - "Modal (Instagram-lite, clean)"
   - and any earlier baseline .al-modal block if you keep SaaS 2026
*/


/* =========================
   3) SUBNAV — keep ONE concept
   Recommended: keep the "Compact 4-Tab Bar (360px fit)" block
========================= */

/* DELETE the earlier "@media (max-width: 1023px) { ... Segmented control ... }"
   OR delete the compact block — but not both.
*/


/* =========================
   4) ACTIONS ROW — pick ONE strategy
   If using "Hero Utils top-right" (NEW):
========================= */

/* KEEP this: */
#alProfile .alpp-hero-actions{
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
}
#alProfile .alpp-hero-actions .alpp-hero-utils{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 60 !important;
}
#alProfile .alpp-actions__row3{ display: contents !important; }

/* DELETE all older blocks that try to layout .alpp-actions__row3
   (flex-row, nowrap, share width overrides, etc.), otherwise they still compete.
*/


/* =========================
   5) PANE VIEW — keep ONE rule set
========================= */

/* KEEP ONE of these, delete the other (they overlap):
#alProfile.is-pane-view ...
.al-profile.is-pane-view ...
Recommended: keep the #alProfile scoped one:
*/
#alProfile.is-pane-view .al-profile-grid > :not(.al-account-pane){
  display: none !important;
}
#alProfile.is-pane-view .al-account-pane{
  display: block !important;
}

/* =========================================================
   Profile Pane Spacing (MOBILE FIRST)
   - ensures consistent spacing between cards on mobile
   - desktop grid overrides below
========================================================= */

/* Mobile / default: vertical stack with gap */
#alMemberArea #alProfile .al-pane-body[data-pane="profile"]{
  display: flex !important;
  flex-direction: column !important;
  gap: var(--al-4) !important;
  align-items: stretch !important;
}

/* prevent any default margins from killing the gap */
#alMemberArea #alProfile .al-pane-body[data-pane="profile"] > .al-profile-card{
  margin: 0 !important;
}

/* Desktop: switch to grid (keeps same gap) */
@media (min-width: 1024px){
  #alMemberArea #alProfile .al-pane-body[data-pane="profile"]{
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: var(--al-4) !important;
    align-items: start !important;
  }

  #alMemberArea #alProfile .al-pane-body[data-pane="profile"] > .al-profile-card{
    grid-column: span 6 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* optional: force specific placement */
  #alMemberArea #alProfile .al-pane-body[data-pane="profile"] > .al-profile-card--about{ grid-column: 1 / span 6 !important; }
  #alMemberArea #alProfile .al-pane-body[data-pane="profile"] > .al-profile-card--general{ grid-column: 7 / span 6 !important; }
  #alMemberArea #alProfile .al-pane-body[data-pane="profile"] > .al-profile-card--achievements{ grid-column: 1 / span 6 !important; }
  #alMemberArea #alProfile .al-pane-body[data-pane="profile"] > .al-profile-card--tanks{ grid-column: 7 / span 6 !important; }
}


/* =========================================================
   Profile Pane Grid (force) — works even if Elementor wraps it
========================================================= */

@media (min-width: 1024px){

  /* Force a real multi-column grid */
  .al-pane-body[data-pane="profile"]{
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: var(--al-4) !important;
    align-items: start !important;
  }

  /* Default: half width cards */
  .al-pane-body[data-pane="profile"] > .al-profile-card{
    grid-column: span 6 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* Achievements + Tanks side by side */
  .al-pane-body[data-pane="profile"] > .al-profile-card--achievements{
    grid-column: 1 / span 6 !important;
  }
  .al-pane-body[data-pane="profile"] > .al-profile-card--tanks{
    grid-column: 7 / span 6 !important;
  }
}
@media (min-width: 1024px){
  #alMemberArea #alProfile .al-pane-body[data-pane="profile"]{
    align-items: stretch !important;
  }
  #alMemberArea #alProfile .al-pane-body[data-pane="profile"] > .al-profile-card{
    height: 100% !important;
  }
}

@media (min-width: 1024px){
  #alMemberArea #alProfile .al-profile-card--achievements .al-card-body{
    padding-top: var(--al-3) !important;
  }
}

/* =========================================================
   PROFILE HERO — Utilities rechts oben (Desktop + Mobile)
   Scope: #alProfile (sauber, keine Nebenwirkungen)
   Erwartet Markup:
   <header class="al-card alpp-hero">
     <div class="alpp-hero-utils">...</div>
     <div class="alpp-hero-grid">...</div>
   </header>
========================================================= */

#alProfile .alpp-hero{
  position: relative !important; /* anchor for absolute utils */
}

/* Utilities pinned top-right */
#alProfile .alpp-hero-utils{
  position: absolute !important;
  top: var(--al-4) !important;
  right: var(--al-4) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--al-2) !important;
  z-index: 5 !important;
}

/* Button sizing stays consistent */
#alProfile .alpp-hero-utils__btn{
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
}

/* Make sure the menu opens in the correct place */
#alProfile .al-menu[data-js="pp-more-menu"]{
  position: absolute !important;
  top: calc(var(--al-4) + 46px) !important;  /* below the icon row */
  right: var(--al-4) !important;
  z-index: 20 !important;
}

/* MOBILE: tighter insets so it doesn't touch card edges */
@media (max-width: 480px){
  #alProfile .alpp-hero-utils{
    top: var(--al-3) !important;
    right: var(--al-3) !important;
    gap: var(--al-2) !important;
  }
  #alProfile .alpp-hero-utils__btn{
    width: 40px !important;
    height: 40px !important;
  }
  #alProfile .al-menu[data-js="pp-more-menu"]{
    top: calc(var(--al-3) + 44px) !important;
    right: var(--al-3) !important;
  }
}

/* If your hero has very rounded corners, keep menu inside */
#alProfile .alpp-hero{
  overflow: visible !important;
}

/* =========================================
   HERO UTILITIES — tighter & matched
   Scope: #alProfile only
========================================= */

/* tighter spacing between buttons */
#alProfile .alpp-hero-utils{
  gap: 6px !important; /* vorher var(--al-2) → zu groß auf mobile */
}

/* normalize button size & look */
#alProfile .alpp-hero-utils__btn{
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;

  padding: 0 !important;
  border-radius: 999px !important;

  display: grid !important;
  place-items: center !important;

  font-size: 16px !important;
  line-height: 1 !important;
}

/* ensure emoji / icon is perfectly centered */
#alProfile .alpp-hero-utils__btn > span{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* MOBILE: even slightly tighter */
@media (max-width: 480px){
  #alProfile .alpp-hero-utils{
    gap: 4px !important;
  }

  #alProfile .alpp-hero-utils__btn{
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 15px !important;
  }
}

/* =========================================================
   HERO — utilities pinned top-right (desktop + mobile)
   Scope: #alProfile only
========================================================= */

/* Hero needs a positioning context */
#alProfile .alpp-hero{
  position: relative !important;
}

/* Pin utilities in the hero card (top-right) */
#alProfile .alpp-hero .alpp-hero-utils{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 5 !important;

  display: flex !important;
  align-items: center !important;
  gap: 8px !important;              /* tighter spacing */
}

/* Make both icon buttons identical size + perfectly centered */
#alProfile .alpp-hero .alpp-hero-utils__btn{
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 999px !important;
  line-height: 1 !important;
  font-size: 18px !important;       /* controls ⋮ size */
}

/* Normalize contents (emoji/img vs text) */
#alProfile .alpp-hero .alpp-hero-utils__btn > span{
  display: grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
}

/* If your "🔗" is actually an <img class="emoji"> inside the span */
#alProfile .alpp-hero .alpp-hero-utils__btn img.emoji{
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

/* Optional: a touch tighter on very small screens */
@media (max-width: 480px){
  #alProfile .alpp-hero .alpp-hero-utils{
    top: 10px !important;
    right: 10px !important;
    gap: 6px !important;
  }
  #alProfile .alpp-hero .alpp-hero-utils__btn{
    width: 40px !important;
    height: 40px !important;
  }
}

/* =========================================================
   HERO — Edit Profile CTA placement (owner)
   Uses existing .alpp-hero-actions and .al-btn--primary
========================================================= */

/* Base: make actions block not fight the layout */
#alProfile .alpp-hero-actions{
  width: 100% !important;
}

/* MOBILE: CTA becomes easy-to-tap row under content */
@media (max-width: 1023px){
  #alProfile .alpp-hero-actions{
    order: 3 !important;                 /* keep it after main identity */
    display: flex !important;
    justify-content: center !important;
    margin-top: 12px !important;
  }

  #alProfile .alpp-hero-actions .al-btn--primary{
    width: 100% !important;              /* clean, consistent */
    max-width: 260px !important;         /* avoid absurdly wide */
    height: 44px !important;
    border-radius: 999px !important;
  }
}

/* DESKTOP: CTA sits top-right under utilities */
@media (min-width: 1024px){
  /* Ensure hero is positioning context (already set earlier, but safe) */
  #alProfile .alpp-hero{ position: relative !important; }

  #alProfile .alpp-hero-actions{
    position: absolute !important;
    top: 60px !important;                /* under the pinned utils */
    right: 12px !important;
    z-index: 4 !important;

    display: flex !important;
    justify-content: flex-end !important;
  }

  #alProfile .alpp-hero-actions .al-btn--primary{
    height: 42px !important;
    border-radius: 999px !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
  }
}

/* =========================================================
   Edit Profile — Identity Primary CTA (FINAL)
========================================================= */

#alMemberArea #alProfile .alpp-hero-actions{
  margin-top: 16px !important;
  display: flex !important;
  justify-content: center !important;
}

/* Button bewusst NICHT riesig */
#alMemberArea #alProfile .alpp-hero-actions .al-btn--primary{
  height: 40px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* Desktop: minimal mehr Luft */
@media (min-width: 900px){
  #alMemberArea #alProfile .alpp-hero-actions{
    margin-top: 18px !important;
  }
}

/* =========================================================
   FINAL FIX — Edit Profile stays IN-FLOW on desktop
   Put at VERY END of profile.css
========================================================= */

/* Desktop: kill any pinned/absolute placement coming from older blocks */
@media (min-width: 900px){

  #alMemberArea #alProfile .alpp-hero-actions{
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;

    margin-top: 16px !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    z-index: auto !important;
  }

  /* remove “reserved space” that can push/overlay content */
  #alMemberArea #alProfile .alpp-hero-grid{
    padding-right: 0 !important;
    padding-top: 0 !important;
  }
}

@media (min-width: 900px){
  #alMemberArea #alProfile .alpp-hero .alpp-hero-grid{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "main"
      "actions"
      "stats" !important;
  }
}
/* =========================================================
   PREMIUM DOCK — Subnav fühlt sich wie Teil der Hero-Card an
   Put at END of profile.css
========================================================= */

/* 1) Hero unten “offen” lassen (damit Subnav dran klebt) */
#alMemberArea #alProfile .alpp-hero{
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
  overflow: visible !important;
}

/* 2) Subnav als “Hero-Footer”: gleiche Card-Surface, gleiche Kante */
@media (max-width: 1023px){
  #alMemberArea #alProfile .al-subnav{
    /* an Hero andocken */
    margin-top: -10px !important;              /* 👈 Dock */
    margin-bottom: 14px !important;

    /* optisch Teil der Card */
    padding: 10px !important;
    border-radius: 0 0 20px 20px !important;   /* nur unten rund */
    background: rgba(255,255,255,.82) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-top: 0 !important;                  /* Naht vermeiden */

    backdrop-filter: blur(14px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;

    box-shadow:
      0 22px 50px rgba(16,24,40,.10) !important;  /* wie Card */
    position: relative !important;
    z-index: 3 !important;
  }

  /* 3) “Seam/Connector”: weiche Naht zwischen Hero und Subnav */
  #alMemberArea #alProfile .al-subnav::before{
    content:"" !important;
    position:absolute !important;
    left: 12px !important;
    right: 12px !important;
    top: -10px !important;
    height: 10px !important;

    /* leichte Kante + soft fade (wirkt wie verbunden) */
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0),
      rgba(255,255,255,.82)
    ) !important;

    border-left: 1px solid rgba(0,0,0,.08) !important;
    border-right: 1px solid rgba(0,0,0,.08) !important;

    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;

    pointer-events:none !important;
  }

  /* 4) Deine 4-Tab-Bar: etwas “cardiger” und ruhiger */
  #alMemberArea #alProfile .al-subnav__list{
    border-radius: 16px !important;
    padding: 4px !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(0,0,0,.07) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
  }

  /* 5) Tabs: weniger “floating”, mehr “embedded” */
  #alMemberArea #alProfile .al-subnav__link{
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
  }

  #alMemberArea #alProfile .al-subnav__item.is-active .al-subnav__link{
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(44,107,74,.18) !important;
    color: var(--al-accent) !important;
    box-shadow: 0 10px 22px rgba(16,24,40,.10) !important;
  }
}

/* 6) Optional: wenn du willst, dass Hero unten “wirklich” wie verbunden wirkt */
@media (max-width: 1023px){
  #alMemberArea #alProfile .alpp-hero::after{
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
  }
}

@media (max-width: 1023px){
  #alMemberArea #alProfile .al-subnav{
    margin-top: -8px !important;    /* vorher -10px = weniger reingezogen */
  }
}

/* =========================================================
   Subnav — tighter spacing, no truncation
========================================================= */
@media (max-width: 1023px){

  /* weniger Abstand zwischen den Tabs */
  #alMemberArea #alProfile .al-subnav__list{
    gap: 2px !important;                 /* vorher 3–4px */
    padding: 3px !important;             /* vorher 4px */
  }

  /* Tabs selbst kompakter */
  #alMemberArea #alProfile .al-subnav__link{
    padding: 0 6px !important;           /* vorher 8px */
    font-size: 11.5px !important;        /* minimal kleiner */
    letter-spacing: 0 !important;
  }

  /* WICHTIG: Text darf schrumpfen statt … */
  #alMemberArea #alProfile .al-subnav__label{
    min-width: 0 !important;
    font-weight: 700 !important;
    text-overflow: clip !important;      /* statt ellipsis */
  }
}

@media (max-width: 360px){
  #alMemberArea #alProfile .al-subnav__link{
    font-size: 11px !important;
    padding: 0 5px !important;
  }
}

/* =========================================================
   Subnav — equal columns + true centering
========================================================= */
@media (max-width: 1023px){

  /* UL: immer 4 gleich breite Spalten */
  #alMemberArea #alProfile .al-subnav__list{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    align-items: stretch !important;

    padding: 3px !important;     /* falls du das schon hast: ok */
    margin: 0 !important;
  }

  /* LI: darf schrumpfen (sonst entstehen optische Offsets) */
  #alMemberArea #alProfile .al-subnav__item{
    min-width: 0 !important;
  }

  /* A: nimmt die ganze Zelle und zentriert Inhalt wirklich */
  #alMemberArea #alProfile .al-subnav__link{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* =========================================================
   Profile: Options / More Menu (opens under ⋮ button)
   - Overlay (fixed) so it never pushes layout / creates gaps
   - Works inside transformed/overflow containers
   ========================================================= */

#alMemberArea #alProfile .alpp-hero-utils{
  position: relative; /* nur fürs Layout der Buttons */
  z-index: 3;
}

/* Menu base */
#alMemberArea #alProfile .al-menu[data-js="pp-more-menu"]{
  position: fixed;               /* ✅ key: no layout influence */
  z-index: 99999;                /* above hero */
  min-width: 220px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 8px;
  border-radius: 14px;

  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);

  /* JS setzt top/left */
  left: 0;
  top: 0;

  /* nice */
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}

/* hidden = wirklich raus */
#alMemberArea #alProfile .al-menu[hidden]{
  display: none !important;
}

/* Menu items */
#alMemberArea #alProfile .al-menu .al-menu__item{
  display: flex;
  align-items: center;
  gap: 10px;

  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;

  font: inherit;
  color: #0F172A;
  text-decoration: none;

  background: transparent;
  border: 0;
  cursor: pointer;

  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Hover / Focus */
#alMemberArea #alProfile .al-menu .al-menu__item:hover{
  background: rgba(15, 23, 42, 0.06);
}
#alMemberArea #alProfile .al-menu .al-menu__item:focus{
  outline: none;
  background: rgba(15, 23, 42, 0.08);
}

/* Danger item */
#alMemberArea #alProfile .al-menu .al-menu__item.is-danger{
  color: #B91C1C;
}
#alMemberArea #alProfile .al-menu .al-menu__item.is-danger:hover{
  background: rgba(185, 28, 28, 0.10);
}

/* Optional: tiny "arrow" look (pure cosmetic) */
#alMemberArea #alProfile .al-menu[data-js="pp-more-menu"]::before{
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: #fff;
  border-left: 1px solid rgba(15, 23, 42, 0.10);
  border-top: 1px solid rgba(15, 23, 42, 0.10);

  /* JS setzt custom props; fallback: top-left */
  left: var(--al-menu-arrow-left, 18px);
  top:  var(--al-menu-arrow-top, -5px);
}

#alMemberArea #alProfile .al-menu[data-js="pp-more-menu"]{
  position: fixed;
  z-index: 99999;

  /* JS setzt top/left – daher keine harten Defaults, die dich verwirren */
  top: auto;
  left: auto;

  /* wichtig: damit offsetWidth korrekt ist */
  display: block;
}
#alMemberArea #alProfile .al-menu[hidden]{ display:none !important; }

/* Account Pane: Edit-Button nur Desktop */
.al-pane.al-account-pane button[data-js="acc-edit-toggle"]{
  display: none !important;
}

@media (min-width: 1024px){
  .al-pane.al-account-pane button[data-js="acc-edit-toggle"]{
    display: inline-flex !important; /* oder flex, falls du willst */
  }
}

/* =========================================================
   Account Tab: Hide "Edit" in pane header on mobile
   (We inject here because account-details.css is not loaded)
   ========================================================= */

/* default: hidden (mobile/tablet) */
main#alAccountPane section.al-account-pane button[data-js="acc-edit-toggle"],
main#alAccountPane section.al-account-pane button[data-js="acc-edit-toggle"],
main#alAccountPane section.al-account-pane button[data-js="acc-edit-toggle"]{
  display: none !important;
}

/* desktop only */
@media (min-width: 1024px){
  main#alAccountPane section.al-account-pane button[data-js="acc-edit-toggle"],
  main#alAccountPane section.al-account-pane button[data-js="acc-edit-toggle"],
  main#alAccountPane section.al-account-pane button[data-js="acc-edit-toggle"]{
    display: inline-flex !important;
  }
}

/* Portal menu: sits under <body>, not inside #alProfile/#alMemberArea */
.al-menu.is-portal[data-js="pp-more-menu"]{
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16) !important;
  padding: 8px !important;
  min-width: 220px !important;
  max-width: min(320px, calc(100vw - 24px)) !important;
}

.al-menu.is-portal[data-js="pp-more-menu"] .al-menu__item{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  padding:10px 12px !important;
  border-radius:12px !important;
  background:transparent !important;
  border:0 !important;
  cursor:pointer !important;
  text-decoration:none !important;
  color:#0F172A !important;
}

.al-menu.is-portal[data-js="pp-more-menu"] .al-menu__item:hover{
  background: rgba(15, 23, 42, 0.06) !important;
}

.al-menu.is-portal[data-js="pp-more-menu"] .al-menu__item.is-danger{
  color:#B91C1C !important;
}
.al-menu.is-portal[data-js="pp-more-menu"] .al-menu__item.is-danger:hover{
  background: rgba(185, 28, 28, 0.10) !important;
}



/* =========================================================
   FINAL: spacing between HERO and content cards + no shadow clipping
   Put at VERY END of profile.css
========================================================= */

/* 1) Abstand zwischen Hero und den Content-Cards wie zwischen den Cards */
#alMemberArea #alProfile .alpp-hero{
  margin-bottom: var(--al-4) !important; /* nimm var(--al-3) wenn du es enger willst */
}

/* 2) Rechter (und linker) Innenabstand im Content-Container,
      damit Hover-Shadow nicht abgeschnitten wird */
#alMemberArea #alProfile .al-pane-body[data-pane="profile"]{
  overflow: visible !important;               /* wichtig: kein Clipping */
}

/* Falls ein Wrapper darüber clippt (kommt oft bei Elementor/Flex vor) */
#alMemberArea #alProfile .al-profile-grid,
#alMemberArea #alProfile .al-pane,
#alMemberArea #alProfile main#alAccountPane{
  overflow: visible !important;
}

/* Optional: Wenn du NUR rechts mehr Platz willst (statt beidseitig) */
/*
#alMemberArea #alProfile .al-pane-body[data-pane="profile"]{
  padding-right: var(--al-3) !important;
  padding-left: 0 !important;
}
*/
/* Center empty state inside the tanks card */

/* Default: sichtbar bis 1023 */
.al-menu.is-portal[data-js="pp-more-menu"] .al-menu__item.al-menu__item--mobile-only,
#alMemberArea #alProfile .al-menu[data-js="pp-more-menu"] .al-menu__item.al-menu__item--mobile-only{
  display: flex !important;
}

@media (min-width: 1024px){
  .al-menu.is-portal[data-js="pp-more-menu"] .al-menu__item.al-menu__item--mobile-only,
  #alMemberArea #alProfile .al-menu[data-js="pp-more-menu"] .al-menu__item.al-menu__item--mobile-only{
    display: none !important;
  }
}

/* Public profile hierarchy refinement: tanks are the primary discovery gateway. */
#alMemberArea #alProfile .al-card-sub,
#alProfile .al-card-sub{
  margin: 4px 0 0 !important;
  color: var(--al-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

#alMemberArea #alProfile .al-profile-card--tanks,
#alProfile .al-profile-card--tanks{
  border-color: color-mix(in srgb, var(--al-accent, #2C6B4A) 20%, var(--al-border)) !important;
}

#alMemberArea #alProfile .al-profile-card--achievements,
#alProfile .al-profile-card--achievements{
  opacity: .94 !important;
}

#alMemberArea #alProfile .alpp-tank-teaser,
#alProfile .alpp-tank-teaser{
  min-height: var(--alpp-tank-teaser-min-height,100%) !important;
}

#alMemberArea #alProfile .alpp-tank-thumb,
#alProfile .alpp-tank-thumb{
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  background: color-mix(in srgb, var(--al-accent, #2C6B4A) 10%, #f7fbf9) !important;
}

#alMemberArea #alProfile .alpp-tank-thumb--empty,
#alProfile .alpp-tank-thumb--empty{
  display: grid !important;
  place-items: center !important;
  color: color-mix(in srgb, var(--al-accent, #2C6B4A) 70%, #22352e) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

#alMemberArea #alProfile .alpp-tank-thumb--empty span,
#alProfile .alpp-tank-thumb--empty span{
  display: inline-flex !important;
  min-height: 30px !important;
  align-items: center !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.76) !important;
  border: 1px solid rgba(255,255,255,.84) !important;
}

#alMemberArea #alProfile .alpp-tank-text,
#alProfile .alpp-tank-text{
  display: grid !important;
  gap: 7px !important;
}

#alMemberArea #alProfile .alpp-tank-title,
#alProfile .alpp-tank-title{
  font-size: 17px !important;
}

#alMemberArea #alProfile .alpp-tank-cta,
#alProfile .alpp-tank-cta{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-height: 34px !important;
  margin-top: 4px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  color: var(--al-accent, #2C6B4A) !important;
  background: color-mix(in srgb, var(--al-accent, #2C6B4A) 10%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--al-accent, #2C6B4A) 22%, var(--al-border)) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

@media (min-width: 1024px){
  #alMemberArea #alProfile .al-pane-body[data-pane="profile"] > .al-profile-card--tanks,
  .al-pane-body[data-pane="profile"] > .al-profile-card--tanks{
    grid-column: 1 / -1 !important;
    order: 1 !important;
  }

  #alMemberArea #alProfile .al-pane-body[data-pane="profile"] > .al-profile-card--about,
  .al-pane-body[data-pane="profile"] > .al-profile-card--about{
    grid-column: 1 / span 7 !important;
    order: 2 !important;
  }

  #alMemberArea #alProfile .al-pane-body[data-pane="profile"] > .al-profile-card--general,
  .al-pane-body[data-pane="profile"] > .al-profile-card--general{
    grid-column: 8 / span 5 !important;
    order: 3 !important;
  }

  #alMemberArea #alProfile .al-pane-body[data-pane="profile"] > .al-profile-card--achievements,
  .al-pane-body[data-pane="profile"] > .al-profile-card--achievements{
    grid-column: 1 / -1 !important;
    order: 4 !important;
    height: auto !important;
  }

  #alMemberArea #alProfile .al-profile-card--tanks .al-tanks-row,
  #alProfile .al-profile-card--tanks .al-tanks-row{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #alMemberArea #alProfile .al-profile-card--achievements .alpp-ach-grid,
  #alProfile .al-profile-card--achievements .alpp-ach-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px){
  #alMemberArea #alProfile .alpp-hero,
  #alProfile .alpp-hero{
    padding: 14px 12px !important;
  }

  #alMemberArea #alProfile .al-profile-card--achievements .al-card-body,
  #alProfile .al-profile-card--achievements .al-card-body{
    padding-top: 10px !important;
  }

  #alMemberArea #alProfile .alpp-ach-grid .alpp-ach-item,
  #alProfile .alpp-ach-grid .alpp-ach-item{
    padding: 10px !important;
  }
}

#alMemberArea #alProfile .alpp-hero-utils__btn[hidden],
#alProfile .alpp-hero-utils__btn[hidden]{
  display:none !important;
}

/* =========================================================
   Phase 4D: Profile baseline migration
   Scope: logged-in/member profile only. Visual layer, no hooks changed.
========================================================= */

#alMemberArea #alProfile.al-profile{
  --pp-surface: var(--almx-color-surface, #ffffff);
  --pp-surface-soft: var(--almx-color-organic-surface, #f8fafc);
  --pp-surface-tint: color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 5%, var(--almx-color-surface, #ffffff));
  --pp-line: color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 13%, var(--almx-color-border, #e6e8ec));
  --pp-line-strong: color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 24%, var(--almx-color-border, #e6e8ec));
  --pp-text: var(--almx-color-text, #0f172a);
  --pp-muted: var(--almx-color-text-muted, #64748b);
  --pp-soft: var(--almx-color-text-soft, #94a3b8);
  --pp-moss: var(--almx-color-moss, #2c6b4a);
  --pp-moss-strong: var(--almx-color-brand-strong, #24543c);
  --pp-moss-soft: var(--almx-color-brand-soft, rgba(44, 107, 74, 0.08));
  --pp-aqua: var(--almx-color-aqua, #5ca892);
  --pp-aqua-soft: color-mix(in srgb, var(--almx-color-aqua, #5ca892) 12%, var(--almx-color-surface, #ffffff));
  --pp-danger: var(--almx-color-danger, #dc2626);
  --pp-radius: var(--almx-radius-xl, 24px);
  --pp-radius-sm: var(--almx-radius-lg, 18px);
  --pp-shadow: var(--almx-shadow-sm, 0 8px 24px rgba(16, 24, 40, 0.06));
  --pp-shadow-signal: 0 18px 50px rgba(20, 34, 27, .08);
  --pp-focus: var(--almx-glow-brand, 0 0 0 4px rgba(44, 107, 74, .14));
  color: var(--pp-text);
}

#alMemberArea #alProfile .alpp-hero{
  border-color: color-mix(in srgb, var(--pp-moss) 22%, transparent) !important;
  border-radius: var(--pp-radius) !important;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--pp-aqua) 18%, transparent), transparent 32%),
    radial-gradient(circle at 92% 14%, color-mix(in srgb, var(--pp-moss) 16%, transparent), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,251,250,.92)) !important;
  box-shadow: var(--pp-shadow-signal) !important;
}

#alMemberArea #alProfile .alpp-hero::before{
  opacity: .9 !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.72), transparent 38%),
    radial-gradient(circle at 76% 12%, color-mix(in srgb, var(--pp-aqua) 16%, transparent), transparent 42%),
    radial-gradient(circle at 28% 88%, color-mix(in srgb, var(--pp-moss) 13%, transparent), transparent 48%) !important;
}

#alMemberArea #alProfile .alpp-hero::after{
  border-color: color-mix(in srgb, var(--pp-moss) 15%, transparent) !important;
  border-radius: var(--pp-radius) !important;
}

#alMemberArea #alProfile .alpp-name{
  color: var(--pp-text) !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
}

#alMemberArea #alProfile .alpp-handle,
#alMemberArea #alProfile .alpp-title{
  color: var(--pp-muted) !important;
  opacity: 1 !important;
}

#alMemberArea #alProfile .alpp-title{
  font-weight: 650 !important;
}

#alMemberArea #alProfile .alpp-follow-stats{
  gap: var(--almx-space-2, 8px) !important;
}

#alMemberArea #alProfile .alpp-follow-text,
#alMemberArea #alProfile .alpp-stat,
#alMemberArea #alProfile .alpp-level-badge:not([hidden]){
  border-color: var(--pp-line) !important;
  background: color-mix(in srgb, var(--pp-surface) 86%, var(--pp-moss-soft)) !important;
  color: var(--pp-text) !important;
  box-shadow: var(--pp-shadow) !important;
}

#alMemberArea #alProfile .alpp-follow-text strong,
#alMemberArea #alProfile .alpp-stat-num{
  color: var(--pp-moss-strong) !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

#alMemberArea #alProfile .alpp-follow-text .alpp-follow-label,
#alMemberArea #alProfile .alpp-stat-lbl,
#alMemberArea #alProfile .alpp-stat-sub{
  color: var(--pp-muted) !important;
  opacity: 1 !important;
  font-weight: 650 !important;
}

#alMemberArea #alProfile .alpp-avatar-plate{
  filter: drop-shadow(0 18px 42px rgba(20,34,27,.12)) !important;
}

#alMemberArea #alProfile .alpp-avatar-photo{
  background: var(--pp-surface) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pp-moss) 12%, transparent) !important;
}

#alMemberArea #alProfile .alpp-avatar-edit-overlay{
  background: linear-gradient(135deg, var(--pp-moss-strong), var(--pp-moss)) !important;
  color: #ffffff !important;
}

#alMemberArea #alProfile .alpp-hero-actions .al-btn--primary,
#alMemberArea #alProfile .alpp-empty__btn--primary{
  border-color: color-mix(in srgb, var(--pp-moss) 44%, transparent) !important;
  background: linear-gradient(135deg, var(--pp-moss-strong), var(--pp-moss) 58%, var(--pp-aqua)) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--pp-moss) 22%, transparent) !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
}

#alMemberArea #alProfile .alpp-share,
#alMemberArea #alProfile .alpp-share--secondary,
#alMemberArea #alProfile .alpp-hero-utils__btn,
#alMemberArea #alProfile .alpp-empty__btn--ghost{
  border-color: var(--pp-line) !important;
  background: color-mix(in srgb, var(--pp-surface) 90%, var(--pp-moss-soft)) !important;
  color: var(--pp-text) !important;
  box-shadow: var(--pp-shadow) !important;
  font-weight: 690 !important;
  letter-spacing: 0 !important;
}

#alMemberArea #alProfile .alpp-follow:focus-visible,
#alMemberArea #alProfile .alpp-share:focus-visible,
#alMemberArea #alProfile .alpp-share--secondary:focus-visible,
#alMemberArea #alProfile .alpp-hero-utils__btn:focus-visible,
#alMemberArea #alProfile .alpp-empty__btn:focus-visible,
#alMemberArea #alProfile .alpp-tank-teaser--link:focus-visible{
  outline: none !important;
  box-shadow: var(--pp-focus), var(--pp-shadow) !important;
}

#alMemberArea #alProfile .al-profile-card{
  border-color: var(--pp-line) !important;
  border-radius: var(--pp-radius-sm) !important;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--pp-aqua) 7%, transparent), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,251,250,.93)) !important;
  box-shadow: var(--pp-shadow) !important;
}

#alMemberArea #alProfile .al-profile-card--tanks{
  border-color: color-mix(in srgb, var(--pp-moss) 26%, var(--pp-line)) !important;
  box-shadow: var(--pp-shadow-signal) !important;
}

#alMemberArea #alProfile .al-profile-card--community{
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--pp-aqua) 10%, transparent), transparent 42%),
    linear-gradient(180deg, var(--pp-surface), var(--pp-aqua-soft)) !important;
}

#alMemberArea #alProfile .al-card-head{
  border-bottom-color: color-mix(in srgb, var(--pp-moss) 12%, transparent) !important;
}

#alMemberArea #alProfile .al-card-head h2,
#alMemberArea #alProfile .alpp-tank-title,
#alMemberArea #alProfile .alpp-ach-name,
#alMemberArea #alProfile .alpp-empty__title{
  color: var(--pp-text) !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

#alMemberArea #alProfile .al-card-sub,
#alMemberArea #alProfile .alpp-tank-meta,
#alMemberArea #alProfile .alpp-ach-meta,
#alMemberArea #alProfile .alpp-empty__copy,
#alMemberArea #alProfile .al-preline,
#alMemberArea #alProfile .al-field__label{
  color: var(--pp-muted) !important;
}

#alMemberArea #alProfile .al-link,
#alMemberArea #alProfile .alpp-tank-cta{
  color: var(--pp-moss-strong) !important;
  font-weight: 720 !important;
}

#alMemberArea #alProfile .alpp-tank-teaser,
#alMemberArea #alProfile .alpp-ach-item,
#alMemberArea #alProfile .alpp-empty{
  border-color: var(--pp-line) !important;
  border-radius: var(--pp-radius-sm) !important;
  background: linear-gradient(180deg, var(--pp-surface), var(--pp-surface-soft)) !important;
  box-shadow: var(--pp-shadow) !important;
}

#alMemberArea #alProfile .alpp-tank-thumb,
#alMemberArea #alProfile .alpp-ach-ico{
  border-color: color-mix(in srgb, var(--pp-moss) 14%, transparent) !important;
  background:
    radial-gradient(circle at 36% 18%, rgba(255,255,255,.84), transparent 42%),
    var(--pp-moss-soft) !important;
}

#alMemberArea #alProfile .alpp-ach-ico{
  color: var(--pp-moss-strong) !important;
}

#alMemberArea #alProfile .al-ghost-input:not(.al-workspaceDrawer *),
#alMemberArea #alProfile .al-ghost-textarea:not(.al-workspaceDrawer *){
  border-color: color-mix(in srgb, var(--pp-moss) 16%, var(--almx-form-border, rgba(15,23,42,.14))) !important;
  border-radius: var(--almx-form-radius, 14px) !important;
  background: var(--almx-form-bg, #ffffff) !important;
  color: var(--pp-text) !important;
}

#alMemberArea #alProfile .al-ghost-input:not(.al-workspaceDrawer *):focus,
#alMemberArea #alProfile .al-ghost-textarea:not(.al-workspaceDrawer *):focus{
  border-color: color-mix(in srgb, var(--pp-aqua) 48%, var(--pp-line)) !important;
  box-shadow: var(--pp-focus) !important;
}

@media (max-width: 1023px){
  #alMemberArea #alProfile .al-subnav{
    border-color: var(--pp-line) !important;
    background: color-mix(in srgb, var(--pp-surface) 82%, var(--pp-moss-soft)) !important;
    box-shadow: var(--pp-shadow) !important;
  }

  #alMemberArea #alProfile .al-subnav__list{
    background: color-mix(in srgb, var(--pp-surface) 86%, transparent) !important;
    border-color: color-mix(in srgb, var(--pp-moss) 11%, transparent) !important;
  }

  #alMemberArea #alProfile .al-subnav__link{
    border-color: transparent !important;
    background: transparent !important;
    color: var(--pp-muted) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
  }

  #alMemberArea #alProfile .al-subnav__item.is-active .al-subnav__link,
  #alMemberArea #alProfile .al-subnav__link[aria-current="page"]{
    border-color: color-mix(in srgb, var(--pp-moss) 26%, transparent) !important;
    background: var(--pp-surface) !important;
    color: var(--pp-moss-strong) !important;
    box-shadow: 0 8px 18px rgba(20,34,27,.08) !important;
  }
}

#alMemberArea.alpp-shell--public-view #alProfile .alpp-hero{
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--pp-aqua) 16%, transparent), transparent 32%),
    radial-gradient(circle at 92% 14%, color-mix(in srgb, var(--pp-moss) 14%, transparent), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(248,251,250,.94)) !important;
}

#alMemberArea.alpp-shell--public-view #alProfile .alpp-cta-row{
  align-items: center !important;
  gap: var(--almx-space-3, 12px) !important;
}

#alMemberArea:not(.alpp-shell--public-view) #alProfile .alpp-hero-actions{
  gap: var(--almx-space-3, 12px) !important;
}

@media (hover:hover){
  #alMemberArea #alProfile .al-profile-card:hover,
  #alMemberArea #alProfile .alpp-tank-teaser--link:hover,
  #alMemberArea #alProfile .alpp-ach-item:hover{
    box-shadow: var(--pp-shadow-signal) !important;
    transform: none !important;
  }
}

@media (max-width: 560px){
  #alMemberArea #alProfile.al-profile{
    padding-inline: var(--almx-space-3, 12px) !important;
  }

  #alMemberArea #alProfile .alpp-hero{
    border-radius: var(--almx-radius-lg, 18px) !important;
  }

  #alMemberArea #alProfile .alpp-hero-left{
    gap: var(--almx-space-3, 12px) !important;
  }

  #alMemberArea #alProfile .al-pane-body[data-pane="profile"]{
    gap: var(--almx-space-4, 16px) !important;
    padding-inline: var(--almx-space-2, 8px) !important;
  }
}

@media (prefers-reduced-motion: reduce){
  #alMemberArea #alProfile *,
  #alMemberArea #alProfile *::before,
  #alMemberArea #alProfile *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   Phase 4E hotfix: profile level badge readability
   Scope: level chip only.
========================================================= */

#alProfile .alpp-level-badge:not([hidden]),
#alMemberArea #alProfile .alpp-level-badge:not([hidden]){
  background:
    linear-gradient(180deg, #25342e 0%, #16211d 100%) !important;
  background-color: #16211d !important;
  border-color: rgba(245, 230, 184, .72) !important;
  box-shadow:
    0 7px 14px rgba(15, 23, 42, .22),
    0 0 0 2px rgba(255,255,255,.76),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#alProfile .alpp-avatar .alpp-level-badge:not([hidden]),
#alMemberArea #alProfile .alpp-avatar .alpp-level-badge:not([hidden]){
  height: 27px !important;
  min-width: 66px !important;
  padding: 0 13px !important;
}

#alProfile .alpp-avatar .alpp-level-badge:not([hidden])::before,
#alMemberArea #alProfile .alpp-avatar .alpp-level-badge:not([hidden])::before{
  color: #fff3c4 !important;
  -webkit-text-fill-color: #fff3c4 !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  font-size: 11.75px !important;
  font-weight: 850 !important;
  letter-spacing: .07em !important;
  line-height: 1 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.5) !important;
}
#alMemberArea #alProfile .al-profile-card--public-utility .al-card-body{
  gap: 14px;
}

#alMemberArea #alProfile .al-public-profile-utility{
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(44, 107, 74, 0.14);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f2f8f4 100%);
  box-shadow: 0 8px 24px rgba(24, 63, 45, 0.07);
}

#alMemberArea #alProfile .al-public-profile-utility__url{
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(44, 107, 74, 0.055);
  color: #183f2d;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#alMemberArea #alProfile .al-public-profile-utility__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#alMemberArea #alProfile .al-field__hint{
  margin: 8px 0 0;
  color: #52645b;
  font-size: 12px;
  line-height: 1.45;
}

#alMemberArea #alProfile [data-js="pp-public-username-edit"]:disabled{
  opacity: 0.72;
  cursor: not-allowed;
}

@media (max-width: 560px){
  #alMemberArea #alProfile .al-public-profile-utility__actions{
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   One Profile Page: /u/{slug}
   Scoped final layer for the Twitter/X-style profile structure.
========================================================= */

#alMemberArea #alProfile.alpp{
  --alpp-page-max: 980px;
  --alpp-line: rgba(15, 23, 42, .10);
  --alpp-text: #0f172a;
  --alpp-muted: #64748b;
  --alpp-surface: #ffffff;
  --alpp-soft: #f6faf8;
  --alpp-accent: #2c6b4a;
  width: min(100%, var(--alpp-page-max)) !important;
  margin-inline: auto !important;
  padding: 0px 0px 72px !important;
  color: var(--alpp-text) !important;
}

#alMemberArea #alProfile .alpp-hero{
  position: relative !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid var(--alpp-line) !important;
  border-radius: 18px !important;
  background: var(--alpp-surface) !important;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .06) !important;
}

#alMemberArea #alProfile .alpp-hero::before,
#alMemberArea #alProfile .alpp-hero::after{
  content: none !important;
}

#alMemberArea #alProfile .alpp-cover{
  min-height: clamp(128px, 22vw, 220px) !important;
  border-radius: 18px 18px 0 0 !important;
  background:
    linear-gradient(135deg, rgba(44, 107, 74, .18), rgba(92, 168, 146, .14)),
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.82), transparent 34%),
    linear-gradient(180deg, #eef8f3, #dfeee7) !important;
}

#alMemberArea #alProfile .alpp-hero-grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "main actions" !important;
  gap: 18px !important;
  align-items: start !important;
  padding: 0 24px 24px !important;
  margin-top: -54px !important;
}

#alMemberArea #alProfile .alpp-hero-main{ grid-area: main !important; min-width: 0 !important; }
#alMemberArea #alProfile .alpp-profile-actions,
#alMemberArea #alProfile .alpp-cta-row{
  grid-area: actions !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding-top: 64px !important;
}

#alMemberArea #alProfile .alpp-hero-left{
  display: grid !important;
  grid-template-columns: 148px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: end !important;
  text-align: left !important;
}

#alMemberArea #alProfile .alpp-avatar{
  --plate: 148px !important;
  --ring-inset: 15px !important;
  align-self: start !important;
  background: transparent !important;
}

#alMemberArea #alProfile .alpp-avatar-edit-overlay{
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  z-index: 21 !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#alMemberArea #alProfile .alpp-id{
  min-width: 0 !important;
  padding-top: 62px !important;
}

#alMemberArea #alProfile .alpp-name{
  margin: 0 !important;
  color: var(--alpp-text) !important;
  font-size: clamp(26px, 4vw, 36px) !important;
  line-height: 1.08 !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

#alMemberArea #alProfile .alpp-handle{
  margin-top: 4px !important;
  color: var(--alpp-muted) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
}

#alMemberArea #alProfile .alpp-hero-bio{
  max-width: 68ch !important;
  margin: 12px 0 0 !important;
  color: var(--alpp-text) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  white-space: pre-line !important;
}

#alMemberArea #alProfile .alpp-profile-meta{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 16px !important;
  margin-top: 12px !important;
  color: var(--alpp-muted) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

#alMemberArea #alProfile .alpp-profile-meta__item{
  color: inherit !important;
  text-decoration: none !important;
}

#alMemberArea #alProfile .alpp-follow-stats{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-top: 13px !important;
}

#alMemberArea #alProfile .alpp-follow-text{
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#alMemberArea #alProfile .alpp-follow-text strong{
  color: var(--alpp-text) !important;
  font-size: 14px !important;
  font-weight: 820 !important;
}

#alMemberArea #alProfile .alpp-follow-label{
  color: var(--alpp-muted) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

#alMemberArea #alProfile .alpp-hero-stats{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

#alMemberArea #alProfile .alpp-stat{
  min-width: 112px !important;
  display: grid !important;
  gap: 2px !important;
  justify-items: start !important;
  padding: 10px 12px !important;
  border: 1px solid var(--alpp-line) !important;
  border-radius: 8px !important;
  background: var(--alpp-soft) !important;
  box-shadow: none !important;
}

#alMemberArea #alProfile .alpp-stat-num{
  color: var(--alpp-accent) !important;
  font-size: 20px !important;
  font-weight: 820 !important;
}

#alMemberArea #alProfile .alpp-stat-lbl{
  color: var(--alpp-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

#alMemberArea #alProfile .alpp-share-icon{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  border: 1px solid var(--alpp-line) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  color: var(--alpp-text) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.06) !important;
  cursor: pointer !important;
}

#alMemberArea #alProfile .alpp-share-icon img{
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

#alMemberArea #alProfile .alpp-follow{
  min-width: 112px !important;
}

#alMemberArea #alProfile .alpp-pane{
  margin-top: 14px !important;
}

#alMemberArea #alProfile .alpp-profile-body{
  display: block !important;
  padding: 0 !important;
}

#alMemberArea #alProfile .alpp-tabs{
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  border: 1px solid var(--alpp-line) !important;
  border-radius: 12px 12px 0 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width:100%;
  scrollbar-width:thin;
  background: #fff !important;
}

#alMemberArea #alProfile .alpp-tab{
  flex: 0 0 auto !important;
  white-space:nowrap;
  padding-inline:16px;
  min-height: 48px !important;
  border: 0 !important;
  border-right: 1px solid var(--alpp-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--alpp-muted) !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  cursor: pointer !important;
}

#alMemberArea #alProfile .alpp-tab:last-child{
  border-right: 0 !important;
}

#alMemberArea #alProfile .alpp-tab.is-active,
#alMemberArea #alProfile .alpp-tab[aria-selected="true"]{
  color: var(--alpp-accent) !important;
  background: var(--alpp-soft) !important;
  box-shadow: inset 0 -3px 0 var(--alpp-accent) !important;
}

#alMemberArea #alProfile .alpp-tabpanel[hidden]{
  display: none !important;
}

#alMemberArea #alProfile .alpp-tabpanel .al-profile-card{
  margin: 0 !important;
  border-top: 0 !important;
  border-radius: 0 0 12px 12px !important;
}

#alMemberArea #alProfile .alpp-about-list{
  display: grid !important;
  gap: 0 !important;
}

#alMemberArea #alProfile .alpp-about-row{
  display: grid !important;
  grid-template-columns: minmax(132px, 18%) minmax(0, 1fr) !important;
  gap: 18px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--alpp-line) !important;
}

#alMemberArea #alProfile .alpp-about-row:last-child{
  border-bottom: 0 !important;
}

#alMemberArea #alProfile:not(.is-editing) .alpp-about-row.is-empty{
  display: none !important;
}

#alMemberArea #alProfile.alpp-owner-pane:not(.is-editing) .alpp-about-row--bio.is-empty{
  display: grid !important;
}

#alMemberArea #alProfile.is-editing .alpp-about-row.is-empty{
  display: grid !important;
}

#alMemberArea #alProfile .alpp-about-label{
  color: var(--alpp-muted) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

#alMemberArea #alProfile .alpp-about-value{
  min-width: 0 !important;
  color: var(--alpp-text) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

#alMemberArea #alProfile .alpp-about-value .al-preline{
  margin: 0 !important;
}

#alMemberArea #alProfile .alpp-about-row--bio.is-empty .alpp-about-value{
  color: var(--alpp-muted) !important;
}

#alMemberArea #alProfile .alpp-manage-link{
  font-size: 13px !important;
  white-space: nowrap !important;
}

#alMemberArea #alProfile .al-tanks-row,
#alMemberArea #alProfile .alpp-ach-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

#alMemberArea #alProfile .alpp-ach-item{
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: auto !important;
  padding: 12px !important;
}

#alMemberArea #alProfile .alpp-ach-ico{
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}

#alMemberArea #alProfile .alpp-empty--compact{
  padding: 16px !important;
  text-align: left !important;
}

#alMemberArea.alpp-shell--setup .al-member-page-frame #alProfile.alpp.alpp-setup{
  max-width: 720px !important;
}

#alMemberArea #alProfile .alpp-setup-card{
  margin-top: 18px !important;
  padding: 0 !important;
}

#alMemberArea #alProfile .alpp-setup-card__body{
  display: grid !important;
  gap: 16px !important;
  padding: 24px !important;
}

#alMemberArea #alProfile .alpp-setup-card__eyebrow{
  margin: 0 !important;
  color: var(--alpp-accent) !important;
  font-size: 12px !important;
  font-weight: 820 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

#alMemberArea #alProfile .alpp-setup-card__title{
  margin: 0 !important;
  font-size: 30px !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
}

#alMemberArea #alProfile .alpp-setup-card__copy{
  margin: 0 !important;
  color: var(--alpp-muted) !important;
}

#alMemberArea #alProfile .alpp-setup-field{
  display: grid !important;
  gap: 6px !important;
}

#alMemberArea #alProfile .alpp-setup-field .al-ghost-input{
  display: block !important;
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#alMemberArea #alProfile .alpp-setup-field .al-field__hint{
  margin: 0 !important;
}

#alMemberArea #alProfile .alpp-setup-url-preview{
  margin: 2px 0 0 !important;
  overflow-wrap: anywhere;
  white-space: normal !important;
}

#alMemberArea #alProfile .alpp-setup-actions{
  display: flex !important;
  justify-content: flex-start !important;
  flex-wrap: wrap;
  gap: 12px;
}

#alMemberArea #alProfile.alpp-setup .alpp-setup-card__body > *{ min-width: 0; }
#alMemberArea #alProfile.alpp-setup .alpp-setup-actions .al-btn{ min-height: 44px; }
#alMemberArea #alProfile.alpp-setup [aria-invalid="true"]{ border-color: var(--al-danger, #b42318); }
@media (max-width: 390px){
  #alMemberArea #alProfile.alpp-setup .alpp-setup-card__body{ padding: 16px !important; }
  #alMemberArea #alProfile.alpp-setup .alpp-setup-card__title{ font-size: 24px !important; }
}

@media (max-width: 760px){
  #alMemberArea #alProfile.alpp{
    padding-inline: 10px !important;
  }

  #alMemberArea #alProfile .alpp-cover{
    min-height: 132px !important;
  }

  #alMemberArea #alProfile .alpp-hero-grid{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "main"
      "actions" !important;
    margin-top: -44px !important;
    padding: 0 16px 18px !important;
  }

  #alMemberArea #alProfile .alpp-hero-left{
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    text-align: left !important;
    gap: 10px !important;
  }

  #alMemberArea #alProfile .alpp-avatar{
    --plate: 120px !important;
    --ring-inset: 13px !important;
    margin: 0 !important;
  }

  #alMemberArea #alProfile .alpp-id{
    width: 100% !important;
    padding-top: 0 !important;
  }

  #alMemberArea #alProfile .alpp-profile-actions,
  #alMemberArea #alProfile .alpp-cta-row{
    justify-content: flex-start !important;
    padding-top: 0 !important;
  }

  #alMemberArea #alProfile .alpp-follow{
    width: auto !important;
    min-width: 128px !important;
  }

  #alMemberArea #alProfile .alpp-about-row{
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  #alMemberArea #alProfile .al-tanks-row,
  #alMemberArea #alProfile .alpp-ach-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Minimal shell/width fix for /u/{slug}. Keep scoped to the profile surface. */
.alpp-public-shell{
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
}

.alpp-public-shell #alMemberArea.alpp-shell{
  width: 100% !important;
  min-width: 0 !important;
}

.alpp-public-shell #alMemberArea.alpp-shell .al-tanks-shell,
.alpp-public-shell #alMemberArea.alpp-shell .al-tanks-container,
.alpp-public-shell #alMemberArea.alpp-shell .al-member-page-frame{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

#alMemberArea.alpp-shell--owner #alProfile.alpp{
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

#alMemberArea.alpp-shell--public-view #alProfile.alpp{
  width: 100% !important;
  max-width: min(100%, 1040px) !important;
  margin-inline: auto !important;
}

#alMemberArea #alProfile .al-pane-body.alpp-profile-body{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin-inline: 0 !important;
  overflow: visible !important;
}

#alMemberArea #alProfile .alpp-pane,
#alMemberArea #alProfile .alpp-tabpanel,
#alMemberArea #alProfile .alpp-tabpanel .al-profile-card{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 760px){
  .alpp-public-shell #alMemberArea.alpp-shell{
    padding-inline: 0 !important;
  }

  #alMemberArea.alpp-shell #alProfile.alpp{
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding: 10px 10px 72px !important;
  }

  #alMemberArea #alProfile .al-pane-body.alpp-profile-body{
    padding-inline: 0 !important;
  }
}

#alProfile.alpp-owner-pane{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 0 72px !important;
  box-sizing: border-box !important;
}

#alProfile.alpp-owner-pane .alpp-hero-grid{
  padding-left: clamp(30px, 3.5vw, 48px) !important;
  padding-right: clamp(22px, 3vw, 36px) !important;
}

#alProfile.alpp-owner-pane .alpp-avatar{
  margin-left: 0 !important;
}

@media (max-width: 760px){
  #alProfile.alpp-owner-pane{
    padding-inline: 0 !important;
  }

  #alProfile.alpp-owner-pane .alpp-hero-grid{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Final profile polish: centered hero and modal/sheet editing. */
#alMemberArea #alProfile.alpp .alpp-hero{
  overflow: hidden !important;
}

#alMemberArea #alProfile.alpp .alpp-cover{
  min-height: clamp(132px, 17vw, 184px) !important;
}

#alMemberArea #alProfile.alpp .alpp-hero-grid{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  margin-top: -72px !important;
  padding: 0 clamp(20px, 3vw, 36px) clamp(24px, 3vw, 34px) !important;
  text-align: center !important;
}

#alMemberArea #alProfile.alpp .alpp-hero-main{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

#alMemberArea #alProfile.alpp .alpp-hero-left{
  width: min(100%, 760px) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-items: start !important;
  gap: 9px !important;
  text-align: center !important;
}

#alMemberArea #alProfile.alpp .alpp-avatar{
  --plate: clamp(128px, 13vw, 150px) !important;
  --ring-inset: 15px !important;
  margin: 0 auto !important;
  cursor: default !important;
}

#alMemberArea #alProfile.alpp .alpp-avatar[data-js="pp-avatar-btn"]{
  cursor: pointer !important;
}

#alMemberArea #alProfile.alpp .alpp-avatar-edit-overlay{
  right: 12px !important;
  bottom: 12px !important;
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.15) !important;
}

#alMemberArea #alProfile.alpp .alpp-avatar-edit-overlay img{
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

#alMemberArea #alProfile.alpp .alpp-id{
  width: min(100%, 720px) !important;
  padding-top: 0 !important;
  display: grid !important;
  justify-items: center !important;
  text-align: center !important;
}

#alMemberArea #alProfile.alpp .alpp-name{
  text-align: center !important;
}

#alMemberArea #alProfile.alpp .alpp-name .al-view:not([hidden]){
  white-space: normal !important;
}

#alMemberArea #alProfile.alpp .alpp-handle,
#alMemberArea #alProfile.alpp .alpp-hero-bio{
  text-align: center !important;
}

#alMemberArea #alProfile.alpp .alpp-hero-bio{
  max-width: 62ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#alMemberArea #alProfile.alpp .alpp-profile-meta,
#alMemberArea #alProfile.alpp .alpp-follow-stats,
#alMemberArea #alProfile.alpp .alpp-hero-stats{
  justify-content: center !important;
}

#alMemberArea #alProfile.alpp .alpp-stat{
  justify-items: center !important;
  text-align: center !important;
}

#alMemberArea #alProfile.alpp .alpp-profile-actions,
#alMemberArea #alProfile.alpp .alpp-cta-row{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding-top: 0 !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal[hidden]{
  display: none !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 100010 !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal__backdrop{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15,23,42,.38) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal__panel{
  position: relative !important;
  z-index: 1 !important;
  width: min(640px, calc(100vw - 40px)) !important;
  max-height: 86dvh !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 26px 70px rgba(15,23,42,.24) !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal__header{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal__header h2,
#alMemberArea #alProfile.alpp .alpp-edit-group h3{
  margin: 0 !important;
  color: var(--alpp-text, #0f172a) !important;
  letter-spacing: 0 !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal__header h2{
  font-size: 20px !important;
  line-height: 1.2 !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal__close{
  width: 36px !important;
  height: 36px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--alpp-text, #0f172a) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal__body{
  min-height: 0 !important;
  overflow: auto !important;
  padding: 18px 20px 20px !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-form,
#alMemberArea #alProfile.alpp .alpp-edit-group{
  display: grid !important;
  gap: 14px !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-group{
  padding-top: 4px !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-group h3{
  font-size: 13px !important;
  font-weight: 820 !important;
  text-transform: uppercase !important;
  color: var(--alpp-accent, #2c6b4a) !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-field{
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-field > span{
  color: var(--alpp-muted, #64748b) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-counter{
  align-self: flex-end !important;
  color: rgba(82, 94, 108, .72) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

#alMemberArea #alProfile.alpp .alpp-bio-textarea{
  min-height: 78px !important;
  height: 78px !important;
  max-height: 96px !important;
  resize: vertical !important;
}

#alMemberArea #alProfile.alpp .alpp-country-control{
  position: relative !important;
  display: grid !important;
  align-items: center !important;
}

#alMemberArea #alProfile.alpp .alpp-country-select{
  width: 100% !important;
  appearance: auto !important;
  padding-left: 42px !important;
}

#alMemberArea #alProfile.alpp .alpp-country-flag{
  position: absolute !important;
  left: 14px !important;
  z-index: 1 !important;
  width: 20px !important;
  height: 15px !important;
  border-radius: 3px !important;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .08) !important;
  object-fit: cover !important;
  pointer-events: none !important;
}

@media (max-width: 767px){
  #alMemberArea #alProfile.alpp .alpp-bio-textarea{
    min-height: 76px !important;
    height: 76px !important;
    max-height: 88px !important;
  }
}

#alMemberArea #alProfile .alpp-location-inline{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#alMemberArea #alProfile .alpp-location-inline img{
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 14px !important;
  border-radius: 3px !important;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .08) !important;
  object-fit: cover !important;
}

#alMemberArea #alProfile.alpp .alpp-name{
  max-width: min(100%, 720px) !important;
  margin-inline: auto !important;
  line-height: 1.08 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  text-wrap: balance !important;
}

#alMemberArea #alProfile.alpp .alpp-name .al-view:not([hidden]){
  display: -webkit-box !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-form__split{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal .alpp-editbar{
  position: sticky !important;
  left: auto !important;
  right: auto !important;
  bottom: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 14px 20px !important;
  transform: none !important;
  border-radius: 0 !important;
  border-top: 1px solid rgba(15,23,42,.08) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: none !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal .alpp-editbar .al-btn{
  flex: 0 0 auto !important;
  min-width: 128px !important;
}

html.alpp-edit-open{
  overflow: hidden !important;
}

@media (max-width: 767px){
  #alMemberArea #alProfile.alpp .alpp-cover{
    min-height: 124px !important;
  }

  #alMemberArea #alProfile.alpp .alpp-hero-grid{
    margin-top: -62px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #alMemberArea #alProfile.alpp .alpp-profile-meta,
  #alMemberArea #alProfile.alpp .alpp-follow-stats,
  #alMemberArea #alProfile.alpp .alpp-hero-stats{
    gap: 10px !important;
  }

  #alMemberArea #alProfile.alpp .alpp-edit-modal{
    align-items: end !important;
    place-items: end stretch !important;
    padding: 0 !important;
  }

  #alMemberArea #alProfile.alpp .alpp-edit-modal__panel{
    width: 100% !important;
    max-height: 88dvh !important;
    border-radius: 18px 18px 0 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  #alMemberArea #alProfile.alpp .alpp-edit-modal__header,
  #alMemberArea #alProfile.alpp .alpp-edit-modal .alpp-editbar{
    position: sticky !important;
  }

  #alMemberArea #alProfile.alpp .alpp-edit-modal__header{
    top: 0 !important;
    z-index: 3 !important;
    background: #fff !important;
  }

  #alMemberArea #alProfile.alpp .alpp-edit-form__split{
    grid-template-columns: 1fr !important;
  }

  #alMemberArea #alProfile.alpp .alpp-edit-modal .alpp-editbar{
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #alMemberArea #alProfile.alpp .alpp-edit-modal .alpp-editbar .al-btn{
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

/* Final hero center-column lock: one shared vertical axis for all identity UI. */
#alMemberArea #alProfile.alpp .alpp-hero > .alpp-hero-grid,
#alProfile.alpp .alpp-hero > .alpp-hero-grid{
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
}

#alMemberArea #alProfile.alpp .alpp-hero-main,
#alProfile.alpp .alpp-hero-main,
#alMemberArea #alProfile.alpp .alpp-hero-left,
#alProfile.alpp .alpp-hero-left{
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  grid-area: auto !important;
  align-items: center !important;
  justify-content: flex-start !important;
  justify-items: center !important;
  width: 100% !important;
  max-width: 760px !important;
  min-width: 0 !important;
  gap: 10px !important;
  text-align: center !important;
}

#alMemberArea #alProfile.alpp .alpp-avatar,
#alProfile.alpp .alpp-avatar{
  flex: 0 0 auto !important;
  align-self: center !important;
  justify-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#alMemberArea #alProfile.alpp .alpp-id,
#alProfile.alpp .alpp-id{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 720px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding-top: 0 !important;
  text-align: center !important;
}

#alMemberArea #alProfile.alpp .alpp-name,
#alMemberArea #alProfile.alpp .alpp-handle,
#alMemberArea #alProfile.alpp .alpp-hero-bio,
#alProfile.alpp .alpp-name,
#alProfile.alpp .alpp-handle,
#alProfile.alpp .alpp-hero-bio{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#alMemberArea #alProfile.alpp .alpp-profile-meta,
#alMemberArea #alProfile.alpp .alpp-follow-stats,
#alMemberArea #alProfile.alpp .alpp-hero-stats,
#alProfile.alpp .alpp-profile-meta,
#alProfile.alpp .alpp-follow-stats,
#alProfile.alpp .alpp-hero-stats{
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  text-align: center !important;
}

#alMemberArea #alProfile.alpp .alpp-profile-actions,
#alMemberArea #alProfile.alpp .alpp-cta-row,
#alProfile.alpp .alpp-profile-actions,
#alProfile.alpp .alpp-cta-row{
  position: static !important;
  grid-area: auto !important;
  align-self: center !important;
  justify-self: center !important;
  width: 100% !important;
  max-width: 720px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding-top: 0 !important;
  text-align: center !important;
}

/* Profile edit sheet: mirror Aquarium Hub sheet chrome and respect fixed header. */
#alMemberArea #alProfile.alpp{
  --alpp-sheet-header-offset: var(--al-fixed-top, var(--al-header-h, var(--almx-header-h, 72px)));
  --alpp-sheet-viewport-h: calc(100dvh - var(--alpp-sheet-header-offset));
}

/* Public profile actions: compact Follow button beside share icon. */
#alMemberArea #alProfile.alpp .alpp-cta-row,
#alProfile.alpp .alpp-cta-row{
  width: auto !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-inline: auto !important;
}

#alMemberArea #alProfile.alpp .alpp-cta-row > .alpp-follow,
#alProfile.alpp .alpp-cta-row > .alpp-follow{
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 132px !important;
  max-width: none !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 20px !important;
}

#alMemberArea #alProfile.alpp .alpp-cta-row > .alpp-share-icon,
#alProfile.alpp .alpp-cta-row > .alpp-share-icon{
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal.al-sheet{
  position: fixed !important;
  inset: var(--alpp-sheet-header-offset) 0 0 !important;
  z-index: 2147483000 !important;
  width: 100vw !important;
  height: var(--alpp-sheet-viewport-h) !important;
  max-height: var(--alpp-sheet-viewport-h) !important;
  padding: 24px !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal.al-sheet[hidden]{
  display: none !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal__backdrop.al-sheet__backdrop{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15,23,42,.50) !important;
  backdrop-filter: blur(10px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(112%) !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal__panel.al-sheet__panel{
  position: relative !important;
  z-index: 1 !important;
  width: min(640px, calc(100vw - 48px)) !important;
  max-width: min(640px, calc(100vw - 48px)) !important;
  max-height: calc(var(--alpp-sheet-viewport-h) - 48px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  border-radius: var(--al-radius-modal, 24px) !important;
  background: #fff !important;
  box-shadow: 0 24px 72px rgba(15,23,42,.24) !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal__header.al-sheet__head{
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 18px 22px 16px !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(10px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.04) !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal__header .al-sheet__title{
  margin: 0 !important;
  color: var(--alpp-text, #0f172a) !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal__close{
  min-width: 0 !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.88) !important;
  color: var(--alpp-text, #0f172a) !important;
  box-shadow: none !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal__body.al-sheet__body{
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  padding: 20px 22px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal .alpp-editbar.al-sheet__foot{
  position: sticky !important;
  left: auto !important;
  right: auto !important;
  bottom: 0 !important;
  z-index: 4 !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 -14px 36px rgba(15,23,42,.08) !important;
  transform: none !important;
  backdrop-filter: blur(10px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
}

#alMemberArea #alProfile.alpp .alpp-edit-modal .alpp-editbar.al-sheet__foot .al-btn{
  flex: 0 0 auto !important;
  min-width: 128px !important;
  min-height: 44px !important;
  border-radius: 14px !important;
}

@media (max-width: 782px){
  #alMemberArea #alProfile.alpp .alpp-edit-modal.al-sheet{
    padding: 12px 0 0 !important;
    align-items: end !important;
    place-items: end stretch !important;
  }

  #alMemberArea #alProfile.alpp .alpp-edit-modal__panel.al-sheet__panel{
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: calc(var(--alpp-sheet-viewport-h) - 12px) !important;
    border-radius: 22px 22px 0 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  #alMemberArea #alProfile.alpp .alpp-edit-modal__header.al-sheet__head{
    padding: 18px 16px 14px !important;
  }

  #alMemberArea #alProfile.alpp .alpp-edit-modal__body.al-sheet__body{
    padding: 16px 16px calc(108px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #alMemberArea #alProfile.alpp .alpp-edit-modal .alpp-editbar.al-sheet__foot{
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #alMemberArea #alProfile.alpp .alpp-edit-modal .alpp-editbar.al-sheet__foot .al-btn{
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

/* Avatar edit affordance: centered, empty-visible, image-hover/focus visible. */
#alMemberArea #alProfile.alpp .alpp-avatar{
  position: relative !important;
}

#alMemberArea #alProfile.alpp .alpp-avatar-edit-overlay{
  position: absolute !important;
  z-index: 24 !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: calc(var(--plate, 148px) - 40px) !important;
  height: calc(var(--plate, 148px) - 40px) !important;
  min-width: 78px !important;
  min-height: 78px !important;
  max-width: 116px !important;
  max-height: 116px !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.62) !important;
  background: rgba(15,23,42,.40) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 16px 30px rgba(15,23,42,.18) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transition: opacity .16s ease, background-color .16s ease, transform .16s ease !important;
  backdrop-filter: blur(8px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.08) !important;
}

#alMemberArea #alProfile.alpp .alpp-avatar-edit-overlay img{
  width: 26px !important;
  height: 26px !important;
  filter: brightness(0) invert(1) !important;
}

#alMemberArea #alProfile.alpp .alpp-avatar.alpp-avatar--empty .alpp-avatar-edit-overlay,
#alMemberArea #alProfile.alpp .alpp-avatar:not(.has-image) .alpp-avatar-edit-overlay{
  opacity: 1 !important;
  background: rgba(44,107,74,.72) !important;
}

#alMemberArea #alProfile.alpp .alpp-avatar.has-image .alpp-avatar-edit-overlay,
#alMemberArea #alProfile.alpp .alpp-avatar.alpp-avatar--has-image .alpp-avatar-edit-overlay,
#alMemberArea #alProfile.alpp .alpp-avatar[data-has-avatar="1"] .alpp-avatar-edit-overlay{
  opacity: 0 !important;
  background: rgba(15,23,42,.42) !important;
}

#alMemberArea #alProfile.alpp .alpp-avatar.has-image:focus-visible .alpp-avatar-edit-overlay,
#alMemberArea #alProfile.alpp .alpp-avatar.alpp-avatar--has-image:focus-visible .alpp-avatar-edit-overlay{
  opacity: 1 !important;
}
/* Touch browsers retain :hover/:focus after dismissing the image picker. */
@media (hover:hover) and (pointer:fine){
  #alMemberArea #alProfile.alpp .alpp-avatar.has-image:hover .alpp-avatar-edit-overlay,
  #alMemberArea #alProfile.alpp .alpp-avatar.alpp-avatar--has-image:hover .alpp-avatar-edit-overlay{
    opacity: 1 !important;
  }
}

/* Profile skeletons: match the final profile fields, without announcing fake content. */
#alMemberArea #alProfile.alpp .alpp-hero-skeleton,
#alMemberArea #alProfile.alpp .alpp-page-skeleton{
  display: none !important;
}

#alMemberArea #alProfile.alpp.is-loading .alpp-hero{
  position: relative !important;
  overflow: hidden !important;
}

#alMemberArea #alProfile.alpp.is-loading .alpp-hero > .alpp-cover,
#alMemberArea #alProfile.alpp.is-loading .alpp-hero > .alpp-hero-grid{
  opacity: 0 !important;
}

#alMemberArea #alProfile.alpp.is-loading .alpp-hero-skeleton{
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  display: block !important;
  pointer-events: none !important;
  background: #fff !important;
}

#alMemberArea #alProfile.alpp.is-loaded .alpp-hero-skeleton,
#alMemberArea #alProfile.alpp:not(.is-loading) .alpp-hero-skeleton{
  display: none !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-cover{
  height: 168px !important;
  min-height: 0 !important;
  background: linear-gradient(135deg, rgba(197,222,211,.94), rgba(219,235,226,.82)) !important;
  border-bottom: 1px solid rgba(27,67,50,.10) !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-hero-grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "main actions" !important;
  align-items: start !important;
  gap: 22px !important;
  width: 100% !important;
  margin-top: -44px !important;
  padding: 0 clamp(28px, 3.2vw, 40px) 22px !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-hero-main{
  grid-area: main !important;
  width: 100% !important;
  min-width: 0 !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-hero-left{
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  grid-template-areas: "avatar info" "avatar stats" !important;
  column-gap: 24px !important;
  row-gap: 12px !important;
  width: 100% !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-avatar-wrap{
  grid-area: avatar !important;
  position: relative !important;
  width: 112px !important;
  height: 112px !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-avatar{
  display: block !important;
  width: 112px !important;
  height: 112px !important;
  border-radius: 999px !important;
  border: 6px solid #fff !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.12) !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-level{
  position: absolute !important;
  left: 50% !important;
  bottom: -7px !important;
  width: 50px !important;
  height: 21px !important;
  margin: 0 !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  transform: translateX(-50%) !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-id{
  grid-area: info !important;
  display: grid !important;
  justify-items: start !important;
  align-content: start !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding-top: 50px !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-line,
#alMemberArea #alProfile.alpp .alpp-sk-pill,
#alMemberArea #alProfile.alpp .alpp-sk-stat,
#alMemberArea #alProfile.alpp .alpp-sk-button,
#alMemberArea #alProfile.alpp .alpp-sk-share,
#alMemberArea #alProfile.alpp .alpp-sk-label,
#alMemberArea #alProfile.alpp .alpp-sk-chip,
#alMemberArea #alProfile.alpp .alpp-sk-block,
#alMemberArea #alProfile.alpp .alpp-sk-avatar,
#alMemberArea #alProfile.alpp .alpp-sk-level,
#alMemberArea #alProfile.alpp .alpp-sk-tab{
  color: transparent !important;
  background: linear-gradient(90deg, rgba(27,67,50,.07), rgba(27,67,50,.13), rgba(27,67,50,.07)) !important;
  background-size: 240% 100% !important;
  animation: alpp-skeleton 1.15s linear infinite !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-line{
  display: block !important;
  width: 100% !important;
  height: 12px !important;
  border-radius: 999px !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-line--name{
  width: min(280px, 70vw) !important;
  height: 30px !important;
  margin-top: 4px !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-line--handle{
  width: min(170px, 54vw) !important;
  height: 15px !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-follow-row,
#alMemberArea #alProfile.alpp .alpp-sk-chip-row{
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-pill{
  width: 92px !important;
  height: 18px !important;
  border-radius: 999px !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-stat{
  width: 132px !important;
  height: 32px !important;
  border-radius: 6px !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-stat-row{
  grid-area: stats !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  min-height: 36px !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-stat + .alpp-sk-stat{
  padding-left: 18px !important;
  border-left: 1px solid rgba(15,23,42,.10) !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-button{
  width: 138px !important;
  height: 40px !important;
  border-radius: 999px !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-button--small{
  width: 112px !important;
  height: 28px !important;
  border-radius: 999px !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-share{
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-action-row{
  grid-area: actions !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding-top: 52px !important;
}

#alMemberArea #alProfile.alpp.is-loading .alpp-profile-body > .alpp-tabs,
#alMemberArea #alProfile.alpp.is-loading .alpp-profile-body > .alpp-tabpanel{
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

#alMemberArea #alProfile.alpp.is-loading .alpp-page-skeleton{
  display: block !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-tabs{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  border: 1px solid var(--alpp-line, rgba(15,23,42,.10)) !important;
  border-radius: 8px 8px 0 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-tab{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  color: rgba(15,23,42,.34) !important;
  background: rgba(27,67,50,.04) !important;
  border-right: 1px solid rgba(15,23,42,.08) !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-tab:last-child{
  border-right: 0 !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-tab.is-active{
  color: rgba(27,94,64,.44) !important;
  box-shadow: inset 0 -3px 0 rgba(44,107,74,.32) !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-about-card{
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-line--heading{
  width: 92px !important;
  height: 18px !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-about-list{
  display: grid !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-about-row{
  display: grid !important;
  grid-template-columns: minmax(120px, .36fr) minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--alpp-line, rgba(15,23,42,.10)) !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-about-row:last-child{
  border-bottom: 0 !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-label{
  width: 74px !important;
  height: 13px !important;
  border-radius: 999px !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-copy{
  display: grid !important;
  gap: 8px !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-line--short{
  width: min(260px, 62%) !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-chip{
  width: 92px !important;
  height: 30px !important;
  border-radius: 999px !important;
}

#alMemberArea #alProfile.alpp .alpp-tank-teaser--skeleton,
#alMemberArea #alProfile.alpp .alpp-ach-item--skeleton{
  pointer-events: none !important;
}

#alMemberArea #alProfile.alpp .alpp-tank-teaser--skeleton .alpp-tank-thumb{
  display: block !important;
}

#alMemberArea #alProfile.alpp .alpp-tank-teaser--skeleton .alpp-tank-text,
#alMemberArea #alProfile.alpp .alpp-ach-item--skeleton .alpp-ach-txt{
  display: grid !important;
  gap: 9px !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-line--tank-title{
  width: 78% !important;
  height: 15px !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-line--tank-meta{
  width: 58% !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-line--ach-title{
  width: 82% !important;
  height: 14px !important;
}

#alMemberArea #alProfile.alpp .alpp-sk-line--ach-meta{
  width: 54% !important;
  height: 11px !important;
}

@media (max-width: 760px){
  #alMemberArea #alProfile.alpp .alpp-sk-cover{
    height: 136px !important;
  }

  #alMemberArea #alProfile.alpp .alpp-sk-hero-grid{
    grid-template-columns: 1fr !important;
    grid-template-areas: "main" "actions" !important;
    justify-items: center !important;
    gap: 12px !important;
    margin-top: -48px !important;
    padding: 0 14px 16px !important;
  }

  #alMemberArea #alProfile.alpp .alpp-sk-hero-left{
    grid-template-columns: 1fr !important;
    grid-template-areas: "avatar" "info" "stats" !important;
    justify-items: center !important;
    row-gap: 8px !important;
    text-align: center !important;
  }

  #alMemberArea #alProfile.alpp .alpp-sk-avatar-wrap{
    width: 96px !important;
    height: 96px !important;
  }

  #alMemberArea #alProfile.alpp .alpp-sk-avatar{
    width: 96px !important;
    height: 96px !important;
    border-width: 5px !important;
  }

  #alMemberArea #alProfile.alpp .alpp-sk-id{
    justify-items: center !important;
    padding-top: 0 !important;
  }

  #alMemberArea #alProfile.alpp .alpp-sk-follow-row,
  #alMemberArea #alProfile.alpp .alpp-sk-stat-row,
  #alMemberArea #alProfile.alpp .alpp-sk-action-row{
    justify-content: center !important;
  }

  #alMemberArea #alProfile.alpp .alpp-sk-action-row{
    width: 100% !important;
    padding-top: 0 !important;
  }

  #alMemberArea #alProfile.alpp .alpp-sk-about-row{
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #alMemberArea #alProfile.alpp .alpp-sk-tabs{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #alMemberArea #alProfile.alpp .alpp-sk-tab{
    min-height: 40px !important;
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  #alMemberArea #alProfile.alpp .alpp-sk-line,
  #alMemberArea #alProfile.alpp .alpp-sk-pill,
  #alMemberArea #alProfile.alpp .alpp-sk-stat,
  #alMemberArea #alProfile.alpp .alpp-sk-button,
  #alMemberArea #alProfile.alpp .alpp-sk-share,
  #alMemberArea #alProfile.alpp .alpp-sk-label,
  #alMemberArea #alProfile.alpp .alpp-sk-chip,
  #alMemberArea #alProfile.alpp .alpp-sk-block,
  #alMemberArea #alProfile.alpp .alpp-sk-avatar,
  #alMemberArea #alProfile.alpp .alpp-sk-level,
  #alMemberArea #alProfile.alpp .alpp-sk-tab{
    animation: none !important;
  }
}

/* Unified profile hero and cover-management flow. */
#alMemberArea #alProfile.alpp{
  --alpp-cover-focus-x: 50%;
  --alpp-cover-focus-y: 50%;
  --alpp-hero-radius: 18px;
  width: 100% !important;
  max-width: min(100%, 1120px) !important;
  margin-inline: auto !important;
  padding: 0 0 72px !important;
}

#alMemberArea #alProfile.alpp .alpp-hero{
  overflow: visible !important;
  padding: 0 !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: var(--alpp-hero-radius) !important;
  background: #fff !important;
  box-shadow: 0 16px 42px rgba(15,23,42,.07) !important;
}

#alMemberArea #alProfile.alpp .alpp-cover{
  position: relative !important;
  height: clamp(180px,14vw,184px) !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  border-radius: var(--alpp-hero-radius) var(--alpp-hero-radius) 0 0 !important;
  background: radial-gradient(circle at 18% 26%,rgba(255,255,255,.78),transparent 32%),linear-gradient(135deg,rgba(44,107,74,.23),rgba(92,168,146,.16)),linear-gradient(180deg,#eef8f3,#dfeee7) !important;
}

#alMemberArea #alProfile.alpp .alpp-cover-img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--alpp-cover-focus-x) var(--alpp-cover-focus-y) !important;
}

#alMemberArea #alProfile.alpp .alpp-cover-img[hidden]{ display:none !important; }

#alMemberArea #alProfile.alpp .alpp-cover-change{
  position: absolute !important;
  z-index: 2 !important;
  top: 12px !important;
  right: 12px !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 999px !important;
  background: rgba(15,23,42,.68) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  transform: none !important;
  cursor: pointer !important;
  box-shadow: 0 5px 18px rgba(15,23,42,.2) !important;
  transition: background-color .16s ease,box-shadow .16s ease !important;
}

#alMemberArea #alProfile.alpp .alpp-cover-change:hover{ background:rgba(15,23,42,.82) !important; }
#alMemberArea #alProfile.alpp .alpp-cover-change:focus-visible{
  outline: 3px solid rgba(255,255,255,.95) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(44,107,74,.42) !important;
}

#alMemberArea #alProfile.alpp .alpp-cover-change.has-cover{ width:44px !important; padding:0 !important; }
#alMemberArea #alProfile.alpp .alpp-cover-change.has-cover .alpp-cover-change__label{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
}

#alMemberArea #alProfile.alpp .alpp-cover-change__icon{
  width:20px !important;
  height:20px !important;
  flex:0 0 20px !important;
  background:currentColor !important;
  -webkit-mask:url("/wp-content/mu-plugins/al-members/icons/add_photo_alternate_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg") center/contain no-repeat !important;
  mask:url("/wp-content/mu-plugins/al-members/icons/add_photo_alternate_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg") center/contain no-repeat !important;
}
#alMemberArea #alProfile.alpp .alpp-cover-change.has-cover .alpp-cover-change__icon{
  -webkit-mask-image:url("/wp-content/mu-plugins/al-members/icons/replace_image_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg") !important;
  mask-image:url("/wp-content/mu-plugins/al-members/icons/replace_image_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg") !important;
}

#alMemberArea #alProfile.alpp .alpp-hero-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas:"main actions" !important;
  gap:clamp(18px,2.6vw,34px) !important;
  align-items:start !important;
  margin-top:-62px !important;
  padding:0 clamp(28px,3.4vw,42px) !important;
  text-align:left !important;
}
#alMemberArea #alProfile.alpp .alpp-hero-main{ grid-area:main !important; width:100% !important; min-width:0 !important; }
#alMemberArea #alProfile.alpp .alpp-hero-left{
  display:grid !important;
  grid-template-columns:136px minmax(0,1fr) !important;
  grid-template-areas:"avatar info" "stats stats" !important;
  column-gap:24px !important;
  row-gap:0 !important;
  align-items:start !important;
  width:100% !important;
  min-width:0 !important;
  text-align:left !important;
}
#alMemberArea #alProfile.alpp .alpp-avatar{
  grid-area:avatar !important;
  --plate:136px !important;
  --ring-inset:14px !important;
  justify-self:start !important;
  align-self:start !important;
  margin:0 !important;
  background:transparent !important;
}
#alMemberArea #alProfile.alpp .alpp-id{
  grid-area:info !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding-top:64px !important;
  text-align:left !important;
}
#alMemberArea #alProfile.alpp .alpp-name{
  max-width:100% !important;
  margin:0 !important;
  color:var(--alpp-text,#0f172a) !important;
  font-size:clamp(30px,3vw,40px) !important;
  line-height:1.04 !important;
  font-weight:850 !important;
  letter-spacing:0 !important;
  text-align:left !important;
}
#alMemberArea #alProfile.alpp .alpp-handle{
  margin-top:4px !important;
  color:var(--alpp-muted,#64748b) !important;
  font-size:15px !important;
  font-weight:650 !important;
  text-align:left !important;
}
#alMemberArea #alProfile.alpp .alpp-rank{
  width:100% !important;
  max-width:100% !important;
  margin:4px 0 0 !important;
  color:var(--alpp-muted,#64748b) !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.45 !important;
  text-align:left !important;
}
@media (max-width:760px){
  #alMemberArea #alProfile.alpp .alpp-rank{ text-align:center !important; }
}
#alMemberArea #alProfile.alpp .alpp-profile-meta{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  gap:8px 16px !important;
  margin-top:8px !important;
  color:var(--alpp-muted,#64748b) !important;
  font-size:13px !important;
  font-weight:680 !important;
}
#alMemberArea #alProfile.alpp .alpp-follow-stats{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  gap:14px !important;
  margin-top:9px !important;
}
#alMemberArea #alProfile.alpp .alpp-follow-text{
  width:auto !important;
  min-height:auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#alMemberArea #alProfile.alpp .alpp-profile-actions,
#alMemberArea #alProfile.alpp .alpp-cta-row{
  grid-area:actions !important;
  align-self:start !important;
  justify-self:end !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  width:auto !important;
  margin:0 !important;
  padding-top:64px !important;
}
#alMemberArea #alProfile.alpp .alpp-profile-actions .al-btn--primary{ min-height:42px !important; white-space:nowrap !important; }
#alMemberArea #alProfile.alpp .alpp-share-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  padding:0 !important;
  border-radius:10px !important;
  overflow:hidden !important;
}
#alMemberArea #alProfile.alpp .alpp-share-icon .al-share-trigger__label{
  position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;white-space:nowrap !important;
}

#alMemberArea #alProfile.alpp .alpp-hero-stats{
  grid-area:stats !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,220px)) !important;
  justify-content:start !important;
  gap:24px !important;
  width:100% !important;
  margin:20px 0 0 !important;
  padding:14px 0 18px !important;
  border-top:1px solid rgba(15,23,42,.08) !important;
}
#alMemberArea #alProfile.alpp .alpp-stat{
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) !important;
  align-items:center !important;
  gap:11px !important;
  min-width:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:inherit !important;
  box-shadow:none !important;
  font:inherit !important;
  text-align:left !important;
  cursor:pointer !important;
}
#alMemberArea #alProfile.alpp .alpp-stat + .alpp-stat{ padding-left:24px !important;border-left:1px solid rgba(15,23,42,.08) !important; }
#alMemberArea #alProfile.alpp .alpp-stat:focus-visible{ outline:3px solid rgba(44,107,74,.22) !important;outline-offset:5px !important;border-radius:5px !important; }
#alMemberArea #alProfile.alpp .alpp-stat-icon{ display:grid !important;place-items:center !important;width:34px !important;height:34px !important;color:var(--alpp-accent,#2c6b4a) !important; }
#alMemberArea #alProfile.alpp .alpp-stat-icon svg{ display:block !important;width:28px !important;height:28px !important; }
#alMemberArea #alProfile.alpp .alpp-stat-copy{ display:grid !important;gap:2px !important; }
#alMemberArea #alProfile.alpp .alpp-stat-num{ font-size:22px !important;line-height:1 !important; }
#alMemberArea #alProfile.alpp .alpp-pane{ margin-top:14px !important; }

#alMemberArea #alProfile.alpp .alpp-cover-manager{ display:flex !important;align-items:center !important;gap:12px !important;min-width:0 !important; }
#alMemberArea #alProfile.alpp .alpp-cover-manager__thumb{
  position:relative !important;
  flex:0 0 108px !important;
  width:108px !important;
  height:40px !important;
  overflow:hidden !important;
  border:1px solid rgba(15,23,42,.1) !important;
  border-radius:8px !important;
  background:radial-gradient(circle at 18% 26%,rgba(255,255,255,.78),transparent 32%),linear-gradient(135deg,rgba(44,107,74,.2),rgba(92,168,146,.14)),#e8f2ed !important;
}
#alMemberArea #alProfile.alpp .alpp-cover-manager__thumb img{ display:block !important;width:100% !important;height:100% !important;object-fit:cover !important;object-position:var(--alpp-cover-focus-x) var(--alpp-cover-focus-y) !important; }
#alMemberArea #alProfile.alpp .alpp-cover-manager__thumb img[hidden]{ display:none !important; }
#alMemberArea #alProfile.alpp .alpp-cover-manager__actions{ display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:8px !important; }
#alMemberArea #alProfile.alpp .alpp-cover-manager__actions .al-btn{ min-height:40px !important; }

html.al-modal-open,
html.al-modal-open body,
body.al-modal-open{
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

#alMemberArea #alProfile.alpp .alpp-cover-cropper[hidden]{ display:none !important; }
#alMemberArea #alProfile.alpp .alpp-cover-cropper{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483640 !important;
  display:grid !important;
  place-items:center !important;
  width:100vw !important;
  height:100dvh !important;
  padding:20px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  isolation:isolate !important;
}
#alMemberArea #alProfile.alpp .alpp-cover-cropper__backdrop{
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  background:rgba(15,23,42,.52) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}
#alMemberArea #alProfile.alpp .alpp-cover-cropper__panel{
  position:relative !important;
  width:min(800px,calc(100vw - 40px)) !important;
  max-width:800px !important;
  max-height:calc(100dvh - 40px) !important;
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) auto !important;
  overflow:hidden !important;
  border:1px solid rgba(15,23,42,.12) !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:0 28px 80px rgba(15,23,42,.28) !important;
}
#alMemberArea #alProfile.alpp .alpp-cover-cropper__head,
#alMemberArea #alProfile.alpp .alpp-cover-cropper__foot{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding:15px 18px !important;
  background:#fff !important;
}
#alMemberArea #alProfile.alpp .alpp-cover-cropper__head{ border-bottom:1px solid rgba(15,23,42,.08) !important; }
#alMemberArea #alProfile.alpp .alpp-cover-cropper__foot{
  justify-content:flex-end !important;
  border-top:1px solid rgba(15,23,42,.08) !important;
  padding-bottom:calc(15px + env(safe-area-inset-bottom,0px)) !important;
}
#alMemberArea #alProfile.alpp .alpp-cover-cropper__head h2{ margin:0 !important;font-size:20px !important;line-height:1.2 !important; }
#alMemberArea #alProfile.alpp .alpp-cover-cropper__head p{ margin:4px 0 0 !important;color:var(--alpp-muted,#64748b) !important;font-size:13px !important; }
#alMemberArea #alProfile.alpp .alpp-cover-cropper__body{
  min-height:0 !important;
  display:grid !important;
  gap:14px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  padding:18px !important;
}
#alMemberArea #alProfile.alpp .alpp-cover-cropper__stage{
  position:relative !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:var(--alpp-cover-crop-aspect, 3 / 1) !important;
  overflow:hidden !important;
  border-radius:12px !important;
  background:#e8f2ed !important;
  cursor:grab !important;
  touch-action:none !important;
  outline:none !important;
}
#alMemberArea #alProfile.alpp .alpp-cover-cropper__stage.is-dragging{ cursor:grabbing !important; }
#alMemberArea #alProfile.alpp .alpp-cover-cropper__stage:focus-visible{ box-shadow:0 0 0 3px rgba(44,107,74,.28) !important; }
#alMemberArea #alProfile.alpp .alpp-cover-cropper__stage img{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  max-width:none !important;
  transform-origin:center center !important;
  user-select:none !important;
  pointer-events:none !important;
  -webkit-user-drag:none !important;
}
#alMemberArea #alProfile.alpp .alpp-cover-cropper__grid{
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  border:1px solid rgba(255,255,255,.72) !important;
  background:linear-gradient(90deg,transparent 33.333%,rgba(255,255,255,.42) 33.333%,rgba(255,255,255,.42) calc(33.333% + 1px),transparent calc(33.333% + 1px),transparent 66.666%,rgba(255,255,255,.42) 66.666%,rgba(255,255,255,.42) calc(66.666% + 1px),transparent calc(66.666% + 1px)),linear-gradient(0deg,transparent 33.333%,rgba(255,255,255,.42) 33.333%,rgba(255,255,255,.42) calc(33.333% + 1px),transparent calc(33.333% + 1px),transparent 66.666%,rgba(255,255,255,.42) 66.666%,rgba(255,255,255,.42) calc(66.666% + 1px),transparent calc(66.666% + 1px)) !important;
}
#alMemberArea #alProfile.alpp .alpp-cover-cropper__controls{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  align-items:end !important;
  gap:12px !important;
  pointer-events:auto !important;
}
#alMemberArea #alProfile.alpp .alpp-cover-cropper__zoom{
  flex:1 1 auto !important;
  display:grid !important;
  gap:7px !important;
  color:var(--alpp-muted,#64748b) !important;
  font-size:12px !important;
  font-weight:760 !important;
}
#alMemberArea #alProfile.alpp .alpp-cover-cropper__zoom input{
  width:100% !important;
  min-height:28px !important;
  pointer-events:auto !important;
  touch-action:pan-x !important;
  cursor:pointer !important;
}
#alMemberArea #alProfile.alpp .alpp-cover-cropper__error{
  margin:0 !important;
  padding:10px 12px !important;
  border:1px solid rgba(185,28,28,.2) !important;
  border-radius:9px !important;
  background:#fef2f2 !important;
  color:#991b1b !important;
  font-size:13px !important;
  line-height:1.4 !important;
}
#alMemberArea #alProfile.alpp .alpp-cover-cropper__error[hidden]{ display:none !important; }
#alMemberArea #alProfile.alpp .alpp-cover-cropper__foot .al-btn{ min-height:44px !important; }

@media (max-width:760px){
  #alMemberArea #alProfile.alpp{ padding:0 var(--alpp-public-page-gutter,10px) 72px !important; }
  #alMemberArea #alProfile.alpp .alpp-cover{ height:136px !important; }
  #alMemberArea #alProfile.alpp .alpp-cover-change{ top:8px !important;right:8px !important;min-width:44px !important;min-height:44px !important;opacity:1 !important; }
  #alMemberArea #alProfile.alpp .alpp-hero-grid{
    grid-template-columns:1fr !important;
    grid-template-areas:"main" "actions" !important;
    gap:12px !important;
    margin-top:-48px !important;
    padding:0 14px 16px !important;
    text-align:center !important;
  }
  #alMemberArea #alProfile.alpp .alpp-hero-left{
    grid-template-columns:1fr !important;
    grid-template-areas:"avatar" "info" "stats" !important;
    justify-items:center !important;
    gap:8px !important;
    text-align:center !important;
  }
  #alMemberArea #alProfile.alpp .alpp-avatar{ --plate:96px !important;--ring-inset:11px !important;justify-self:center !important; }
  #alMemberArea #alProfile.alpp .alpp-id{ width:100% !important;padding-top:0 !important;text-align:center !important; }
  #alMemberArea #alProfile.alpp .alpp-name{ font-size:clamp(27px,8vw,32px) !important;text-align:center !important; }
  #alMemberArea #alProfile.alpp .alpp-handle{ text-align:center !important; }
  #alMemberArea #alProfile.alpp .alpp-profile-meta,
  #alMemberArea #alProfile.alpp .alpp-follow-stats{ justify-content:center !important;text-align:center !important; }
  #alMemberArea #alProfile.alpp .alpp-profile-actions,
  #alMemberArea #alProfile.alpp .alpp-cta-row{ justify-self:center !important;justify-content:center !important;width:100% !important;padding-top:0 !important; }
  #alMemberArea #alProfile.alpp .alpp-profile-actions .al-btn--primary,
  #alMemberArea #alProfile.alpp .alpp-cta-row .alpp-follow{ flex:1 1 auto !important;max-width:190px !important; }
  #alMemberArea #alProfile.alpp .alpp-hero-stats{ grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:0 !important;margin-top:12px !important;padding:12px 0 0 !important; }
  #alMemberArea #alProfile.alpp .alpp-stat{ grid-template-columns:28px auto !important;justify-content:center !important;gap:8px !important;text-align:left !important; }
  #alMemberArea #alProfile.alpp .alpp-stat + .alpp-stat{ padding-left:8px !important; }
  #alMemberArea #alProfile.alpp .alpp-stat-icon{ width:28px !important;height:28px !important; }
  #alMemberArea #alProfile.alpp .alpp-stat-icon svg{ width:24px !important;height:24px !important; }
  #alMemberArea #alProfile.alpp .alpp-cover-manager{ align-items:flex-start !important; }
  #alMemberArea #alProfile.alpp .alpp-cover-manager__thumb{ flex-basis:90px !important;width:90px !important;height:36px !important; }
  #alMemberArea #alProfile.alpp .alpp-cover-cropper{ display:block !important;width:100vw !important;height:100dvh !important;padding:0 !important; }
  #alMemberArea #alProfile.alpp .alpp-cover-cropper__panel{ width:100vw !important;max-width:none !important;height:100dvh !important;max-height:100dvh !important;border:0 !important;border-radius:0 !important; }
  #alMemberArea #alProfile.alpp .alpp-cover-cropper__head{ padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px !important; }
  #alMemberArea #alProfile.alpp .alpp-cover-cropper__head p{ display:none !important; }
  #alMemberArea #alProfile.alpp .alpp-cover-cropper__body{ align-content:start !important;padding:14px !important; }
  #alMemberArea #alProfile.alpp .alpp-cover-cropper__stage{ min-height:0 !important; }
  #alMemberArea #alProfile.alpp .alpp-cover-cropper__controls{ align-items:center !important; }
  #alMemberArea #alProfile.alpp .alpp-cover-cropper__foot{ padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px)) !important; }
  #alMemberArea #alProfile.alpp .alpp-cover-cropper__foot .al-btn{ flex:1 1 0 !important;min-width:0 !important; }
}

@media (prefers-reduced-motion:reduce){
  #alMemberArea #alProfile.alpp .alpp-cover-change{ transition:none !important; }
}

/* Final compact public-profile hero override. */
/* Informational containers retain interactive child links only. */
#alMemberArea #alProfile .al-profile-card.al-profile-card--about,
#alMemberArea #alProfile .al-profile-card.al-profile-card--about:hover {
  transform: none !important;
  box-shadow: none !important;
  cursor: default !important;
  transition: none !important;
}
#alMemberArea [data-js="follow-modal"] .al-modal__card {
  max-height: min(80dvh, 720px) !important;
}
body #alMemberArea [data-js="follow-modal"] [hidden] { display: none !important; }
#alMemberArea [data-js="follow-list"] { min-height: 150px !important; min-width: 0; }
#alMemberArea .al-follow-status { margin: 8px 16px; font-size: .875rem; }
#alMemberArea .al-follow-profile {
  display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit;
}
#alMemberArea .al-follow-row { grid-template-columns: minmax(0, 1fr) auto !important; }
#alMemberArea [data-js="follow-more"] { margin: 12px 16px; }
@media (prefers-reduced-motion: reduce) {
  #alMemberArea [data-js="follow-modal"] .al-modal__card { animation: none !important; transform: none !important; }
}

#alMemberArea #alProfile.alpp .alpp-hero{
  overflow: visible !important;
}

#alMemberArea #alProfile.alpp .alpp-cover{
  height: 168px !important;
  min-height: 0 !important;
}

#alMemberArea #alProfile.alpp .alpp-cover-change.has-cover{
  width: auto !important;
  min-width: 44px !important;
  padding: 0 13px !important;
}

#alMemberArea #alProfile.alpp .alpp-cover-change.has-cover .alpp-cover-change__label{
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: nowrap !important;
}

#alMemberArea #alProfile.alpp .alpp-hero > .alpp-hero-grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "main actions" !important;
  align-items: start !important;
  justify-content: stretch !important;
  gap: 22px !important;
  width: 100% !important;
  max-width: none !important;
  margin-top: -44px !important;
  padding: 0 clamp(28px, 3.2vw, 40px) 22px !important;
  text-align: left !important;
}

#alMemberArea #alProfile.alpp .alpp-hero-main{
  grid-area: main !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

#alMemberArea #alProfile.alpp .alpp-hero-left{
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  grid-template-areas:
    "avatar info"
    "avatar stats" !important;
  align-items: start !important;
  justify-items: stretch !important;
  column-gap: 24px !important;
  row-gap: 12px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  text-align: left !important;
}

#alMemberArea #alProfile.alpp .alpp-avatar{
  grid-area: avatar !important;
  --plate: 112px !important;
  --ring-inset: 12px !important;
  align-self: start !important;
  justify-self: start !important;
  margin: 0 !important;
}

#alMemberArea #alProfile.alpp .alpp-id{
  grid-area: info !important;
  display: block !important;
  align-self: start !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-top: 50px !important;
  text-align: left !important;
}

#alMemberArea #alProfile.alpp .alpp-name,
#alMemberArea #alProfile.alpp .alpp-name .al-view,
#alMemberArea #alProfile.alpp .alpp-handle,
#alMemberArea #alProfile.alpp .alpp-hero-bio{
  text-align: left !important;
}

#alMemberArea #alProfile.alpp .alpp-name{
  font-size: var(--alpp-public-name-size,32px) !important;
  line-height: 1.05 !important;
}

#alMemberArea #alProfile.alpp .alpp-profile-meta,
#alMemberArea #alProfile.alpp .alpp-follow-stats{
  justify-content: flex-start !important;
  text-align: left !important;
}

#alMemberArea #alProfile.alpp .alpp-profile-actions,
#alMemberArea #alProfile.alpp .alpp-cta-row{
  grid-area: actions !important;
  align-self: start !important;
  justify-self: end !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding-top: 52px !important;
  text-align: left !important;
}

#alMemberArea #alProfile.alpp .alpp-hero-stats{
  grid-area: stats !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  justify-items: start !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 0 !important;
  text-align: left !important;
}

#alMemberArea #alProfile.alpp .alpp-stat{
  display: grid !important;
  grid-template-columns: 28px minmax(0, auto) !important;
  align-items: center !important;
  justify-content: start !important;
  justify-items: start !important;
  gap: 9px !important;
  min-height: 36px !important;
  text-align: left !important;
}

#alMemberArea #alProfile.alpp .alpp-stat + .alpp-stat{
  margin-left: 18px !important;
  padding-left: 18px !important;
  border-left: 1px solid rgba(15,23,42,.12) !important;
}

#alMemberArea #alProfile.alpp .alpp-stat-icon{
  width: 28px !important;
  height: 28px !important;
}

#alMemberArea #alProfile.alpp .alpp-stat-icon svg{
  width: 23px !important;
  height: 23px !important;
}

#alMemberArea #alProfile.alpp .alpp-stat-copy{
  display: block !important;
}

#alMemberArea #alProfile.alpp .alpp-stat-num{
  display: inline !important;
  margin-right: 6px !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

#alMemberArea #alProfile.alpp .alpp-stat-lbl{
  display: inline !important;
}

#alMemberArea #alProfile.alpp .alpp-profile-body{
  margin-top: 16px !important;
}

@media (max-width: 760px){
  #alMemberArea #alProfile.alpp .alpp-cover{
    height: var(--alpp-public-cover-height,136px) !important;
  }

  #alMemberArea #alProfile.alpp .alpp-cover-change.has-cover{
    width: 44px !important;
    padding: 0 !important;
  }

  #alMemberArea #alProfile.alpp .alpp-cover-change.has-cover .alpp-cover-change__label{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  #alMemberArea #alProfile.alpp .alpp-hero > .alpp-hero-grid{
    grid-template-columns: 1fr !important;
    grid-template-areas: "main" "actions" !important;
    justify-items: center !important;
    gap: var(--alpp-public-hero-gap,12px) !important;
    margin-top: var(--alpp-public-avatar-overlap,-48px) !important;
    padding: 0 14px 16px !important;
    text-align: center !important;
  }

  #alMemberArea #alProfile.alpp .alpp-hero-main{
    width: 100% !important;
  }

  #alMemberArea #alProfile.alpp .alpp-hero-left{
    grid-template-columns: 1fr !important;
    grid-template-areas: "avatar" "info" "stats" !important;
    justify-items: center !important;
    gap: var(--alpp-public-info-gap,8px) !important;
    text-align: center !important;
  }

  #alMemberArea #alProfile.alpp .alpp-avatar{
    --plate: var(--alpp-public-avatar-size,96px) !important;
    --ring-inset: 11px !important;
    justify-self: center !important;
  }

  #alMemberArea #alProfile.alpp .alpp-id{
    padding-top: 0 !important;
    text-align: center !important;
  }

  #alMemberArea #alProfile.alpp .alpp-name,
  #alMemberArea #alProfile.alpp .alpp-name .al-view,
  #alMemberArea #alProfile.alpp .alpp-handle,
  #alMemberArea #alProfile.alpp .alpp-hero-bio{
    text-align: center !important;
  }

  #alMemberArea #alProfile.alpp .alpp-profile-meta,
  #alMemberArea #alProfile.alpp .alpp-follow-stats,
  #alMemberArea #alProfile.alpp .alpp-hero-stats{
    justify-content: center !important;
    text-align: center !important;
  }

  #alMemberArea #alProfile.alpp .alpp-profile-actions,
  #alMemberArea #alProfile.alpp .alpp-cta-row{
    justify-self: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    padding-top: 0 !important;
  }

  #alMemberArea #alProfile.alpp .alpp-profile-actions .al-btn--primary,
  #alMemberArea #alProfile.alpp .alpp-cta-row .alpp-follow{
    flex: 1 1 auto !important;
    max-width: 190px !important;
  }

  #alMemberArea #alProfile.alpp .alpp-hero-stats{
    gap: 0 !important;
    width: 100% !important;
    padding-top: 8px !important;
  }

  #alMemberArea #alProfile.alpp .alpp-stat{
    grid-template-columns: 28px auto !important;
    justify-content: center !important;
  }

  #alMemberArea #alProfile.alpp .alpp-stat + .alpp-stat{
    margin-left: 10px !important;
    padding-left: 10px !important;
  }
}

#alMemberArea #alProfile .alpp-tank-teaser{position:relative}
#alMemberArea #alProfile .alpp-aquarium-card .alpp-tank-teaser{border:0 !important;box-shadow:none !important}
#alMemberArea #alProfile .alpp-aquarium-card{transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease}
#alMemberArea #alProfile .alpp-aquarium-card:has(:focus-visible){border-color:rgba(44,107,74,.26);box-shadow:0 10px 22px rgba(16,42,30,.08)}
@media(hover:hover){#alMemberArea #alProfile .alpp-aquarium-card:hover{border-color:rgba(44,107,74,.26);box-shadow:0 10px 22px rgba(16,42,30,.08);transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){#alMemberArea #alProfile .alpp-aquarium-card{transition:none}#alMemberArea #alProfile .alpp-aquarium-card:hover{transform:none}}

/* Public portfolios have no fixed owner save bar to reserve space for. */
#alMemberArea.alpp-shell--public-view #alProfile.alpp{padding-bottom:24px !important}