/* Generated by tools/build-public-style-bundles.cjs. Do not hand edit. */
/* Source: al-members/assets/css/member-system/00-tokens.css */
/* ======================================================================
   AquariumLesson Member Experience System
   Phase 1: Token Bridge / Compatibility Layer

   Purpose:
   - Introduce canonical member tokens.
   - Keep existing local token names alive as aliases.
   - Preserve current page visuals as closely as possible.
   - Do not style components directly in this phase.
   ====================================================================== */

#alMemberArea,
#alIntelligenceStudio {
  /* Brand and ecosystem colors */
  --almx-color-brand: #2c6b4a;
  --almx-color-brand-strong: #24543c;
  --almx-color-brand-soft: rgba(44, 107, 74, 0.08);
  --almx-color-moss: #2c6b4a;
  --almx-color-moss-light: #5ca892;
  --almx-color-aqua: #5ca892;
  --almx-color-water: #2563eb;
  --almx-color-water-light: #60a5fa;
  --almx-color-organic-surface: #f8fafc;
  --almx-color-deep-slate: #0f172a;

  /* Semantic colors */
  --almx-color-success: #16a34a;
  --almx-color-warning: #d97706;
  --almx-color-danger: #dc2626;
  --almx-color-info: #2563eb;

  /* Text, surfaces, borders */
  --almx-color-bg: #ffffff;
  --almx-color-surface: #ffffff;
  --almx-color-surface-muted: #f8fafc;
  --almx-color-surface-raised: #ffffff;
  --almx-color-border: #e6e8ec;
  --almx-color-border-soft: rgba(15, 23, 42, 0.08);
  --almx-color-text: #0f172a;
  --almx-color-text-muted: #64748b;
  --almx-color-text-soft: #94a3b8;

  /* Spacing */
  --almx-space-0: 0;
  --almx-space-1: 4px;
  --almx-space-2: 8px;
  --almx-space-3: 12px;
  --almx-space-4: 16px;
  --almx-space-5: 24px;
  --almx-space-6: 32px;
  --almx-space-7: 40px;
  --almx-space-8: 48px;

  /* Radius */
  --almx-radius-xs: 8px;
  --almx-radius-sm: 12px;
  --almx-radius-md: 14px;
  --almx-radius-lg: 18px;
  --almx-radius-xl: 24px;
  --almx-radius-2xl: 26px;
  --almx-radius-pill: 999px;

  /* Shadows and glows */
  --almx-shadow-xs: 0 1px 0 rgba(16, 24, 40, 0.04);
  --almx-shadow-sm: 0 8px 24px rgba(16, 24, 40, 0.06);
  --almx-shadow-md: 0 12px 30px rgba(16, 24, 40, 0.10);
  --almx-shadow-lg: 0 20px 60px rgba(16, 24, 40, 0.14);
  --almx-glow-brand: 0 0 0 4px rgba(44, 107, 74, 0.14);
  --almx-glow-water: 0 0 0 4px rgba(37, 99, 235, 0.14);
  --almx-glow-danger: 0 0 0 4px rgba(220, 38, 38, 0.14);

  /* Motion */
  --almx-motion-fast: 120ms;
  --almx-motion-med: 170ms;
  --almx-motion-slow: 220ms;
  --almx-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --almx-motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --almx-header-h: var(--al-header-h, 72px);
  --almx-content-max: 1120px;
  --almx-shell-max: 1200px;
  --almx-sidebar-w: var(--al-sidebar-w, 72px);
  --almx-sidebar-gap: var(--al-sidebar-gap, 16px);
  --almx-rail-left: 16px;
  --almx-rail-w: 260px;
  --almx-shell-gap-desktop: 28px;
  --almx-shell-gap-tablet: 22px;
  --almx-shell-gap: clamp(var(--almx-shell-gap-tablet), 1.6vw, var(--almx-shell-gap-desktop));
  --almx-shell-content-inset: 0px;
  --almx-page-gutter: 16px;
  --almx-control-h: 42px;

  /* Component aliases */
  --almx-card-bg: var(--almx-color-surface);
  --almx-card-border: var(--almx-color-border);
  --almx-card-radius: var(--almx-radius-lg);
  --almx-card-shadow: var(--almx-shadow-md);

  --almx-button-primary-bg: var(--almx-color-brand);
  --almx-button-primary-bg-hover: var(--almx-color-brand-strong);
  --almx-button-primary-text: #ffffff;
  --almx-button-ghost-bg: var(--almx-color-surface-muted);
  --almx-button-ghost-text: var(--almx-color-text);
  --almx-button-radius: var(--almx-radius-md);
  --almx-button-height: var(--almx-control-h);

  --almx-chip-bg: var(--almx-color-surface-muted);
  --almx-chip-border: var(--almx-color-border-soft);
  --almx-chip-text: var(--almx-color-text-muted);
  --almx-chip-radius: var(--almx-radius-pill);

  --almx-tab-bg: transparent;
  --almx-tab-active-bg: var(--almx-color-surface);
  --almx-tab-text: var(--almx-color-text-muted);
  --almx-tab-active-text: var(--almx-color-text);
  --almx-tab-border: var(--almx-color-border-soft);
  --almx-tab-radius: var(--almx-radius-md);

  --almx-form-bg: var(--almx-color-surface);
  --almx-form-border: rgba(15, 23, 42, 0.14);
  --almx-form-text: var(--almx-color-text);
  --almx-form-placeholder: rgba(15, 23, 42, 0.45);
  --almx-form-radius: var(--almx-radius-md);
  --almx-form-focus-ring: var(--almx-glow-brand);
}

/* Existing AL base token aliases. Kept compatible with al-members.modern.css. */
#alMemberArea {
  --al-bg: var(--almx-color-bg) !important;
  --al-surface: var(--almx-color-surface) !important;
  --al-surface-2: var(--almx-color-surface-muted) !important;
  --al-border: var(--almx-color-border) !important;
  --al-text: var(--almx-color-text) !important;
  --al-muted: var(--almx-color-text-muted) !important;
  --al-soft: var(--almx-color-text-soft) !important;
  --al-r1: var(--almx-radius-md) !important;
  --al-r2: var(--almx-radius-lg) !important;
  --al-r3: var(--almx-radius-xl) !important;
  --al-sh0: var(--almx-shadow-xs) !important;
  --al-sh1: var(--almx-shadow-md) !important;
  --al-sh2: var(--almx-shadow-lg) !important;
  --al-1: var(--almx-space-2) !important;
  --al-2: var(--almx-space-3) !important;
  --al-3: var(--almx-space-4) !important;
  --al-4: var(--almx-space-5) !important;
  --al-5: var(--almx-space-6) !important;
  --al-6: var(--almx-space-7) !important;
  --al-control-h: var(--almx-control-h) !important;
  --al-control-r: var(--almx-button-radius) !important;
  --al-ring: var(--almx-glow-brand) !important;
  --al-content-max: var(--almx-content-max) !important;
}

/* Tanks keeps its blue interaction identity while inheriting the system scale. */
#alMemberArea.al-tanks {
  --almx-color-accent: var(--almx-color-water);
  --almx-color-accent-2: var(--almx-color-water-light);
  --almx-form-focus-ring: var(--almx-glow-water);

  --al-tanks-success: var(--almx-color-success) !important;
  --al-tanks-warn: var(--almx-color-warning) !important;
  --al-tanks-danger: var(--almx-color-danger) !important;
  --al-tanks-surface-1: var(--almx-color-surface) !important;
  --al-tanks-surface-2: var(--almx-color-surface-muted) !important;
  --al-tanks-surface-3: #f1f5f9 !important;
  --al-tanks-border: var(--almx-color-border-soft) !important;
  --al-tanks-text: var(--almx-color-text) !important;
  --al-tanks-muted: var(--almx-color-text-muted) !important;
  --al-tanks-pad-m: 10px;
  --al-tanks-pad-d: var(--almx-space-5);
  --al-tanks-max: var(--almx-shell-max);
  --al-tanks-context-w: 380px;
  --al-tanks-trans-dur: var(--almx-motion-med);
  --al-tanks-trans-ease: var(--almx-motion-ease);
}

/* Dashboard bridge: preserve the current dashboard palette, then alias --dash-* to it. */
#alMemberArea #alDash.al-dash--premium {
  --almx-dash-bg: #f5f7f6;
  --almx-dash-surface: #ffffff;
  --almx-dash-surface-soft: #f8fbfa;
  --almx-dash-surface-tint: #eef6f2;
  --almx-dash-line: #dce7e1;
  --almx-dash-line-strong: #c8d8d0;
  --almx-dash-text: #16211d;
  --almx-dash-text-soft: #44544e;
  --almx-dash-text-muted: #6c7d76;
  --almx-dash-brand: #2f7d5b;
  --almx-dash-brand-strong: #1f6948;
  --almx-dash-brand-soft: #e8f4ee;
  --almx-dash-blue: #dff1f8;
  --almx-dash-blue-strong: #327a93;
  --almx-dash-rose: #f8e8ec;
  --almx-dash-rose-strong: #a85168;
  --almx-dash-violet: #efebfb;
  --almx-dash-violet-strong: #6d5ea8;

  --dash-bg: var(--almx-dash-bg);
  --dash-surface: var(--almx-dash-surface);
  --dash-surface-soft: var(--almx-dash-surface-soft);
  --dash-surface-tint: var(--almx-dash-surface-tint);
  --dash-line: var(--almx-dash-line);
  --dash-line-strong: var(--almx-dash-line-strong);
  --dash-text: var(--almx-dash-text);
  --dash-text-soft: var(--almx-dash-text-soft);
  --dash-text-muted: var(--almx-dash-text-muted);
  --dash-brand: var(--almx-dash-brand);
  --dash-brand-strong: var(--almx-dash-brand-strong);
  --dash-brand-soft: var(--almx-dash-brand-soft);
  --dash-blue: var(--almx-dash-blue);
  --dash-blue-strong: var(--almx-dash-blue-strong);
  --dash-rose: var(--almx-dash-rose);
  --dash-rose-strong: var(--almx-dash-rose-strong);
  --dash-violet: var(--almx-dash-violet);
  --dash-violet-strong: var(--almx-dash-violet-strong);
  --dash-shadow: 0 18px 50px rgba(20, 34, 27, 0.08);
  --dash-shadow-soft: 0 8px 24px rgba(20, 34, 27, 0.05);
  --dash-radius: var(--almx-radius-xl);
  --dash-radius-sm: var(--almx-radius-lg);
  --dash-gap: 20px;
  --dash-pad-inline-mobile: 10px;
  --dash-pad-inline-desktop: var(--almx-space-5);
}

/* Account details bridge. */
#alMemberArea #alAccount {
  --al-ac-surface: var(--almx-color-surface);
  --al-ac-muted: var(--almx-color-surface-muted);
  --al-ac-elevated: #f9fafb;
  --al-ac-border: #e5e7eb;
  --al-ac-ink: var(--almx-color-text);
  --al-ac-sub: var(--almx-color-text-muted);
  --al-ac-soft: #9ca3af;
  --al-ac-brand: var(--almx-color-brand);
  --al-ac-brand-soft: var(--almx-color-brand-soft);
  --al-ac-brand-border: rgba(44, 107, 74, 0.35);
  --al-ac-danger: #e11d48;
  --al-ac-radius-lg: var(--almx-radius-lg);
  --al-ac-radius-md: var(--almx-radius-sm);
  --al-ac-radius-pill: var(--almx-radius-pill);
  --al-ac-shadow-soft: 0 18px 35px rgba(15, 23, 42, 0.08);
  --al-ac-shadow-subtle: 0 10px 25px rgba(15, 23, 42, 0.05);
  --al-ac-gap: 1.5rem;
  --al-ac-transition-fast: 160ms ease-out;
  --al-ac-transition-med: var(--almx-motion-slow) var(--almx-motion-ease-out);
}

/* Settings inline-style bridge. Higher specificity keeps this token alias stable. */
body #alMemberArea.alpp-shell--settings {
  --al-set-max: 1160px;
  --al-set-radius-xl: var(--almx-radius-2xl);
  --al-set-radius-lg: 20px;
  --al-set-border: var(--almx-color-border-soft);
  --al-set-border-strong: rgba(44, 107, 74, 0.18);
  --al-set-muted: #667085;
  --al-set-ink: #111827;
  --al-set-soft: #f7f9f8;
  --al-set-brand: var(--almx-color-brand);
  --al-set-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  --al-set-shadow-soft: 0 10px 26px rgba(15, 23, 42, 0.05);
}

/* Header bridge: keep the header independently scoped but token-compatible. */
html #alHeader {
  --almx-header-h: var(--al-header-h, 72px);
  --al-header-accent: var(--almx-color-brand, #2c6b4a);
  --al-header-ink: #102018;
  --al-header-muted: #5f6f67;
  --al-header-border: rgba(20, 33, 27, 0.10);
  --al-header-soft: #f6f8f6;
}

/* Auth modal bridge. Values match the current auth-local palette. */
html #al-auth-neo {
  --al-brand: var(--almx-color-brand, #2c6b4a);
  --al-brand-700: var(--almx-color-brand-strong, #24543c);
  --al-ink: var(--almx-color-text, #0f172a);
  --al-sub: #6b7280;
  --al-bg: var(--almx-color-surface, #ffffff);
  --al-border: rgba(15, 23, 42, 0.12);
  --al-ring: rgba(59, 130, 246, 0.22);
  --al-header-h: var(--almx-header-h, 64px);
}


/* Source: al-members/assets/css/member-system/04-primitives.feedback.css */
/* ======================================================================
   AquariumLesson Member Experience System
   Phase 3A: Low-risk feedback primitives

   Scope:
   - Empty states
   - Skeleton/loading placeholders
   - Inline notices/feedback states

   This file intentionally avoids cards, buttons, tabs, forms, modals,
   header/auth UI, and product-specific tanks/profile/dashboard surfaces.
   ====================================================================== */

#alMemberArea {
  --almx-empty-padding: 18px;
  --almx-empty-border: color-mix(in srgb, var(--almx-color-border) 85%, #fff);
  --almx-empty-radius: var(--almx-radius-lg);
  --almx-empty-bg: var(--almx-color-surface-muted);
  --almx-empty-text: var(--almx-color-text-muted);
  --almx-skeleton-radius: var(--almx-radius-sm);
  --almx-skeleton-bg: var(--al-feedback-skeleton);
  --almx-notice-radius: var(--almx-radius-lg);
  --almx-notice-text: var(--almx-color-text);
}

/* Standard member feedback adopts the shared skin. Tank/Studio working surfaces
 * retain their existing overrides. Contextual warning/error accents below remain. */
#alMemberArea:not(.al-tanks) :is(#alDash, #alSavedGrid, #alAchievements, #alAccount) {
  --almx-notice-radius: var(--al-surface-radius-card);
  --almx-notice-text: var(--al-feedback-ink);
}

#alMemberArea .almx-empty,
#alMemberArea:not(.al-tanks) .al-empty,
#alMemberArea:not(.al-tanks) .al-empty-state {
  padding: var(--almx-empty-padding, 18px) !important;
  border: 1px dashed var(--almx-empty-border, color-mix(in srgb, var(--almx-color-border) 85%, #fff)) !important;
  border-radius: var(--almx-empty-radius, var(--almx-radius-lg)) !important;
  background: var(--almx-empty-bg, var(--almx-color-surface-muted)) !important;
  color: var(--almx-empty-text, var(--almx-color-text-muted)) !important;
}

#alMemberArea .almx-empty__title {
  margin: 0;
  color: var(--almx-color-text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

#alMemberArea .almx-empty__copy {
  margin: 6px 0 0;
  color: var(--almx-color-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

#alMemberArea .almx-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--almx-space-3);
  align-items: center;
  margin-top: var(--almx-space-4);
}

#alMemberArea .almx-skeleton,
#alMemberArea:not(.al-tanks) .al-skeleton {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: var(--almx-skeleton-radius, var(--almx-radius-sm)) !important;
  background: var(--almx-skeleton-bg, color-mix(in srgb, var(--almx-color-border) 55%, #fff)) !important;
}

#alMemberArea .almx-skeleton::after,
#alMemberArea:not(.al-tanks) .al-skeleton::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  transform: translateX(-60%) !important;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, #fff 55%, transparent),
    transparent
  ) !important;
  animation: almx-skeleton-shimmer 1.05s ease-in-out infinite !important;
}

#alMemberArea .almx-skeleton-card {
  min-height: 160px;
  border-radius: var(--almx-card-radius);
}

@keyframes almx-skeleton-shimmer {
  0% { transform: translateX(-60%); }
  100% { transform: translateX(160%); }
}

@media (prefers-reduced-motion: reduce) {
  #alMemberArea .almx-skeleton::after,
  #alMemberArea:not(.al-tanks) .al-skeleton::after {
    animation: none !important;
  }
}

#alMemberArea .almx-notice,
#alMemberArea:not(.al-tanks) .al-notice,
#alMemberArea:not(.al-tanks) .notice,
#alMemberArea:not(.al-tanks) .woocommerce-message,
#alMemberArea:not(.al-tanks) .woocommerce-info,
#alMemberArea:not(.al-tanks) .woocommerce-error {
  margin: 0 0 var(--almx-space-5) !important;
  padding: 12px 14px !important;
  border: 1px solid var(--almx-notice-border, color-mix(in srgb, var(--almx-color-border) 85%, #fff)) !important;
  border-radius: var(--almx-notice-radius, var(--almx-radius-lg)) !important;
  background: var(--almx-notice-bg, var(--almx-color-surface)) !important;
  color: var(--almx-notice-text, var(--almx-color-text)) !important;
  box-shadow: var(--almx-shadow-xs) !important;
}

#alMemberArea .almx-notice--success,
#alMemberArea:not(.al-tanks) .al-notice--success,
#alMemberArea:not(.al-tanks) .woocommerce-message {
  --almx-notice-border: color-mix(in srgb, var(--almx-color-success) 32%, var(--almx-color-border));
  --almx-notice-bg: color-mix(in srgb, var(--almx-color-success) 8%, #fff);
}

#alMemberArea .almx-notice--warning,
#alMemberArea:not(.al-tanks) .al-notice--warn {
  --almx-notice-border: color-mix(in srgb, var(--almx-color-warning) 28%, var(--almx-color-border));
  --almx-notice-bg: color-mix(in srgb, var(--almx-color-warning) 8%, #fff);
}

#alMemberArea .almx-notice--danger,
#alMemberArea:not(.al-tanks) .al-notice--error,
#alMemberArea:not(.al-tanks) .woocommerce-error {
  --almx-notice-border: color-mix(in srgb, var(--almx-color-danger) 28%, var(--almx-color-border));
  --almx-notice-bg: color-mix(in srgb, var(--almx-color-danger) 7%, #fff);
}

#alMemberArea .almx-notice--info,
#alMemberArea:not(.al-tanks) .al-notice--info,
#alMemberArea:not(.al-tanks) .woocommerce-info {
  --almx-notice-border: color-mix(in srgb, var(--almx-color-info) 24%, var(--almx-color-border));
  --almx-notice-bg: color-mix(in srgb, var(--almx-color-info) 6%, #fff);
}


/* Source: al-members/assets/css/member-system/05-primitives.forms.css */
/* ======================================================================
   AquariumLesson Member Experience System
   Phase 3B: Form/input primitives

   Scope:
   - Fields, labels, hints, errors
   - Text inputs, selects, textareas
   - Safe legacy form compatibility

   This file intentionally avoids cards, buttons, tabs, modals/sheets,
   header/auth UI, tanks custom controls, and profile ghost-edit fields.
   ====================================================================== */

#alMemberArea {
  --almx-field-gap: var(--almx-space-2);
  --almx-field-group-gap: var(--almx-space-4);
  --almx-field-label-text: var(--almx-color-text);
  --almx-field-hint-text: var(--almx-color-text-muted);
  --almx-field-error-text: var(--almx-color-danger);
  --almx-input-height: var(--almx-control-h);
  --almx-input-padding-y: 10px;
  --almx-input-padding-x: 12px;
  --almx-input-radius: var(--almx-form-radius);
  --almx-input-bg: var(--almx-form-bg);
  --almx-input-border: color-mix(in srgb, var(--almx-form-border) 86%, #fff);
  --almx-input-text: var(--almx-form-text);
  --almx-input-placeholder: var(--almx-form-placeholder);
  --almx-input-shadow: var(--almx-shadow-xs);
  --almx-input-focus-border: color-mix(in srgb, var(--almx-color-brand) 45%, var(--almx-color-border));
  --almx-input-focus-ring: var(--almx-form-focus-ring);
  --almx-input-disabled-bg: color-mix(in srgb, var(--almx-color-surface-muted) 70%, #fff);
  --almx-textarea-min-h: calc(var(--almx-control-h) * 2.35);
}

#alMemberArea .almx-field {
  display: grid;
  gap: var(--almx-field-gap);
  min-width: 0;
}

#alMemberArea .almx-field__label {
  color: var(--almx-field-label-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

#alMemberArea .almx-field__hint {
  color: var(--almx-field-hint-text);
  font-size: 12px;
  line-height: 1.35;
}

#alMemberArea .almx-field__error {
  color: var(--almx-field-error-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

#alMemberArea .almx-field-group {
  display: grid;
  gap: var(--almx-field-group-gap);
  min-width: 0;
}

#alMemberArea .almx-input,
#alMemberArea .almx-select,
#alMemberArea .almx-textarea,
#alMemberArea:not(.al-tanks) input[type="text"]:not(.al-ghost-input):not(.al-edit--ghost):not([role="switch"]),
#alMemberArea:not(.al-tanks) input[type="email"]:not(.al-ghost-input):not(.al-edit--ghost):not([role="switch"]),
#alMemberArea:not(.al-tanks) input[type="password"]:not(.al-ghost-input):not(.al-edit--ghost):not([role="switch"]),
#alMemberArea:not(.al-tanks) input[type="number"]:not(.al-ghost-input):not(.al-edit--ghost):not([role="switch"]),
#alMemberArea:not(.al-tanks) input[type="url"]:not(.al-ghost-input):not(.al-edit--ghost):not([role="switch"]),
#alMemberArea:not(.al-tanks) input[type="search"]:not(.al-ghost-input):not(.al-edit--ghost):not([role="switch"]),
#alMemberArea:not(.al-tanks) select:not([role="switch"]),
#alMemberArea:not(.al-tanks) textarea:not(.al-ghost-textarea):not(.al-edit--ghost),
#alMemberArea:not(.al-tanks) .al-input:not([type="range"]):not(.al-ghost-input):not(.al-edit--ghost):not([role="switch"]),
#alMemberArea:not(.al-tanks) .al-select:not([role="switch"]),
#alMemberArea:not(.al-tanks) .al-textarea:not(.al-ghost-textarea):not(.al-edit--ghost) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: var(--almx-input-height) !important;
  border: 1px solid var(--almx-input-border) !important;
  border-radius: var(--almx-input-radius) !important;
  padding: var(--almx-input-padding-y) var(--almx-input-padding-x) !important;
  background: var(--almx-input-bg) !important;
  color: var(--almx-input-text) !important;
  box-shadow: var(--almx-input-shadow) !important;
  font: inherit !important;
  line-height: 1.35 !important;
  transition:
    border-color var(--almx-motion-fast) var(--almx-motion-ease),
    box-shadow var(--almx-motion-fast) var(--almx-motion-ease),
    background-color var(--almx-motion-fast) var(--almx-motion-ease) !important;
}

#alMemberArea .almx-textarea,
#alMemberArea:not(.al-tanks) .al-textarea,
#alMemberArea:not(.al-tanks) textarea:not(.al-ghost-textarea):not(.al-edit--ghost) {
  min-height: var(--almx-textarea-min-h) !important;
  resize: vertical !important;
}

#alMemberArea .almx-input::placeholder,
#alMemberArea .almx-textarea::placeholder,
#alMemberArea:not(.al-tanks) input[type="text"]:not(.al-ghost-input):not(.al-edit--ghost)::placeholder,
#alMemberArea:not(.al-tanks) input[type="email"]:not(.al-ghost-input):not(.al-edit--ghost)::placeholder,
#alMemberArea:not(.al-tanks) input[type="password"]:not(.al-ghost-input):not(.al-edit--ghost)::placeholder,
#alMemberArea:not(.al-tanks) input[type="number"]:not(.al-ghost-input):not(.al-edit--ghost)::placeholder,
#alMemberArea:not(.al-tanks) input[type="url"]:not(.al-ghost-input):not(.al-edit--ghost)::placeholder,
#alMemberArea:not(.al-tanks) input[type="search"]:not(.al-ghost-input):not(.al-edit--ghost)::placeholder,
#alMemberArea:not(.al-tanks) textarea:not(.al-ghost-textarea):not(.al-edit--ghost)::placeholder,
#alMemberArea:not(.al-tanks) .al-input:not(.al-ghost-input):not(.al-edit--ghost)::placeholder,
#alMemberArea:not(.al-tanks) .al-textarea:not(.al-ghost-textarea):not(.al-edit--ghost)::placeholder {
  color: var(--almx-input-placeholder) !important;
  opacity: 1 !important;
}

#alMemberArea .almx-input:focus,
#alMemberArea .almx-select:focus,
#alMemberArea .almx-textarea:focus,
#alMemberArea:not(.al-tanks) input[type="text"]:not(.al-ghost-input):not(.al-edit--ghost):focus,
#alMemberArea:not(.al-tanks) input[type="email"]:not(.al-ghost-input):not(.al-edit--ghost):focus,
#alMemberArea:not(.al-tanks) input[type="password"]:not(.al-ghost-input):not(.al-edit--ghost):focus,
#alMemberArea:not(.al-tanks) input[type="number"]:not(.al-ghost-input):not(.al-edit--ghost):focus,
#alMemberArea:not(.al-tanks) input[type="url"]:not(.al-ghost-input):not(.al-edit--ghost):focus,
#alMemberArea:not(.al-tanks) input[type="search"]:not(.al-ghost-input):not(.al-edit--ghost):focus,
#alMemberArea:not(.al-tanks) select:focus,
#alMemberArea:not(.al-tanks) textarea:not(.al-ghost-textarea):not(.al-edit--ghost):focus,
#alMemberArea:not(.al-tanks) .al-input:not([type="range"]):not(.al-ghost-input):not(.al-edit--ghost):focus,
#alMemberArea:not(.al-tanks) .al-select:focus,
#alMemberArea:not(.al-tanks) .al-textarea:not(.al-ghost-textarea):not(.al-edit--ghost):focus {
  outline: none !important;
  border-color: var(--almx-input-focus-border) !important;
  box-shadow: var(--almx-input-focus-ring) !important;
}

#alMemberArea .almx-input[aria-invalid="true"],
#alMemberArea .almx-select[aria-invalid="true"],
#alMemberArea .almx-textarea[aria-invalid="true"],
#alMemberArea:not(.al-tanks) input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.al-ghost-input):not(.al-edit--ghost),
#alMemberArea:not(.al-tanks) select[aria-invalid="true"],
#alMemberArea:not(.al-tanks) textarea[aria-invalid="true"]:not(.al-ghost-textarea):not(.al-edit--ghost) {
  border-color: color-mix(in srgb, var(--almx-color-danger) 55%, var(--almx-color-border)) !important;
}

#alMemberArea .almx-input[aria-invalid="true"]:focus,
#alMemberArea .almx-select[aria-invalid="true"]:focus,
#alMemberArea .almx-textarea[aria-invalid="true"]:focus,
#alMemberArea:not(.al-tanks) input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.al-ghost-input):not(.al-edit--ghost):focus,
#alMemberArea:not(.al-tanks) select[aria-invalid="true"]:focus,
#alMemberArea:not(.al-tanks) textarea[aria-invalid="true"]:not(.al-ghost-textarea):not(.al-edit--ghost):focus {
  box-shadow: var(--almx-glow-danger) !important;
}

#alMemberArea .almx-input:disabled,
#alMemberArea .almx-select:disabled,
#alMemberArea .almx-textarea:disabled,
#alMemberArea:not(.al-tanks) input:disabled:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.al-ghost-input):not(.al-edit--ghost),
#alMemberArea:not(.al-tanks) select:disabled,
#alMemberArea:not(.al-tanks) textarea:disabled:not(.al-ghost-textarea):not(.al-edit--ghost) {
  background: var(--almx-input-disabled-bg) !important;
  cursor: not-allowed !important;
  opacity: .65 !important;
}

@media (prefers-reduced-motion: reduce) {
  #alMemberArea .almx-input,
  #alMemberArea .almx-select,
  #alMemberArea .almx-textarea {
    transition: none !important;
  }
}


/* Source: al-members/assets/css/member-system/06-primitives.core.css */
/* ======================================================================
   AquariumLesson Member Experience System
   Phase 3C: Core member primitives

   Scope:
   - Buttons
   - Chips / status pills
   - Tabs / segmented controls
   - Basic cards / surfaces

   This file intentionally avoids tanks, profile hero/actions/modals,
   dashboard hero panels, header/search/cart/account sheet, auth modal,
   saved bookmark buttons, and tanks sheets/composers.
   ====================================================================== */

#alMemberArea {
  --almx-btn-height: var(--almx-button-height);
  --almx-btn-padding-x: 14px;
  --almx-btn-gap: 8px;
  --almx-btn-radius: var(--al-button-radius);
  --almx-btn-bg: var(--al-button-surface);
  --almx-btn-text: var(--al-button-ink);
  --almx-btn-border: var(--al-button-border);
  --almx-btn-shadow: none;
  --almx-btn-hover-shadow: none;
  --almx-btn-focus-ring: 0 0 0 2px var(--al-button-focus);
  --almx-btn-primary-bg: var(--al-button-primary);
  --almx-btn-primary-border: var(--al-button-primary);
  --almx-btn-primary-text: var(--al-button-surface);
  --almx-btn-secondary-bg: var(--al-button-surface);
  --almx-btn-secondary-text: var(--al-button-ink);
  --almx-btn-ghost-bg: transparent;
  --almx-btn-ghost-text: var(--al-button-primary);
  --almx-btn-danger-bg: var(--al-button-danger);
  --almx-btn-danger-text: #fff;
  --almx-icon-btn-size: var(--almx-control-h);

  --almx-chip-height: 28px;
  --almx-chip-padding-x: 10px;
  --almx-status-pill-height: 26px;

  --almx-tabs-gap: 16px;
  --almx-tab-height: 34px;
  --almx-segmented-padding: 3px;
  --almx-segmented-bg: color-mix(in srgb, var(--almx-color-surface-muted) 76%, #fff);

  --almx-surface-bg: var(--almx-color-surface);
  --almx-surface-border: color-mix(in srgb, var(--almx-color-border) 88%, #fff);
  --almx-surface-radius: var(--almx-card-radius);
  --almx-surface-shadow: var(--almx-shadow-xs);
  --almx-card-head-padding: 16px 18px;
  --almx-card-body-padding: 16px;
  --almx-card-foot-padding: 14px 18px;
}

#alMemberArea .almx-btn,
#alMemberArea .almx-icon-btn,
#alMemberArea:not(.al-tanks) .al-btn:not(:where(#alProfile *)):not(:where(#alDash *)):not(:where(.alpp-follow, .alpp-share, [data-save], [data-bookmark])),
#alAccount .al-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--almx-btn-gap) !important;
  min-height: var(--almx-btn-height) !important;
  padding: 0 var(--almx-btn-padding-x) !important;
  border: 1px solid var(--al-btn-stroke, var(--almx-btn-border)) !important;
  border-radius: var(--al-btn-radius, var(--almx-btn-radius)) !important;
  background: var(--al-btn-surface, var(--almx-btn-bg)) !important;
  color: var(--al-btn-foreground, var(--almx-btn-text)) !important;
  box-shadow: var(--al-btn-shadow, var(--almx-btn-shadow)) !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  user-select: none !important;
  appearance: none !important;
  transition:
    transform var(--almx-motion-fast) var(--almx-motion-ease),
    box-shadow var(--almx-motion-fast) var(--almx-motion-ease),
    border-color var(--almx-motion-fast) var(--almx-motion-ease),
    background-color var(--almx-motion-fast) var(--almx-motion-ease) !important;
}

#alMemberArea .almx-btn:hover,
#alMemberArea .almx-icon-btn:hover,
#alMemberArea:not(.al-tanks) .al-btn:not(:where(#alProfile *)):not(:where(#alDash *)):not(:where(.alpp-follow, .alpp-share, [data-save], [data-bookmark])):hover,
#alAccount .al-btn:hover {
  transform: var(--al-btn-transform, translateY(-1px)) !important;
  box-shadow: var(--al-btn-shadow, var(--almx-btn-hover-shadow)) !important;
}

#alMemberArea .almx-btn:active,
#alMemberArea .almx-icon-btn:active,
#alMemberArea:not(.al-tanks) .al-btn:not(:where(#alProfile *)):not(:where(#alDash *)):not(:where(.alpp-follow, .alpp-share, [data-save], [data-bookmark])):active,
#alAccount .al-btn:active {
  transform: var(--al-btn-transform, translateY(0) scale(.99)) !important;
  box-shadow: var(--al-btn-shadow, var(--almx-btn-shadow)) !important;
}

#alMemberArea .almx-btn:focus-visible,
#alMemberArea .almx-icon-btn:focus-visible,
#alMemberArea:not(.al-tanks) .al-btn:not(:where(#alProfile *)):not(:where(#alDash *)):not(:where(.alpp-follow, .alpp-share, [data-save], [data-bookmark])):focus-visible,
#alAccount .al-btn:focus-visible {
  outline: var(--al-btn-focus-outline, none) !important;
  box-shadow: var(--al-btn-shadow, var(--almx-btn-focus-ring), var(--almx-btn-shadow)) !important;
}

#alMemberArea .almx-btn:disabled,
#alMemberArea .almx-btn[disabled],
#alMemberArea .almx-icon-btn:disabled,
#alMemberArea .almx-icon-btn[disabled],
#alMemberArea:not(.al-tanks) .al-btn:disabled:not(:where(#alProfile *)):not(:where(#alDash *)),
#alMemberArea:not(.al-tanks) .al-btn[disabled]:not(:where(#alProfile *)):not(:where(#alDash *)),
#alAccount .al-btn:disabled,
#alAccount .al-btn[disabled] {
  cursor: not-allowed !important;
  opacity: .55 !important;
  transform: var(--al-btn-transform, none) !important;
  box-shadow: var(--al-btn-shadow, var(--almx-btn-shadow)) !important;
}

#alMemberArea .almx-btn--primary,
#alMemberArea:not(.al-tanks) .al-btn--primary:not(:where(#alProfile *)):not(:where(#alDash *)),
#alAccount .al-btn--primary {
  border-color: var(--al-btn-stroke, var(--almx-btn-primary-border)) !important;
  background: var(--al-btn-surface, var(--almx-btn-primary-bg)) !important;
  color: var(--al-btn-foreground, var(--almx-btn-primary-text)) !important;
  box-shadow: var(--al-btn-shadow, 0 10px 24px color-mix(in srgb, var(--almx-color-brand) 22%, transparent)) !important;
}

#alMemberArea .almx-btn--secondary {
  background: var(--almx-btn-secondary-bg) !important;
  color: var(--almx-btn-secondary-text) !important;
}

#alMemberArea .almx-btn--ghost,
#alMemberArea:not(.al-tanks) .al-btn--ghost:not(:where(#alProfile *)):not(:where(#alDash *)),
#alAccount .al-btn--ghost {
  background: var(--al-btn-surface, var(--almx-btn-ghost-bg)) !important;
  color: var(--al-btn-foreground, var(--almx-btn-ghost-text)) !important;
  box-shadow: var(--al-btn-shadow, none) !important;
}

#alMemberArea .almx-btn--danger,
#alMemberArea:not(.al-tanks) .al-btn--danger:not(:where(#alProfile *)):not(:where(#alDash *)),
#alAccount .al-btn--danger {
  border-color: var(--al-btn-stroke, color-mix(in srgb, var(--almx-color-danger) 86%, #000)) !important;
  background: var(--al-btn-surface, var(--almx-btn-danger-bg)) !important;
  color: var(--al-btn-foreground, var(--almx-btn-danger-text)) !important;
}

#alMemberArea .almx-btn--sm,
#alMemberArea:not(.al-tanks) .al-btn--sm:not(:where(#alProfile *)):not(:where(#alDash *)) {
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: var(--al-btn-radius, var(--almx-radius-sm)) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#alMemberArea .almx-icon-btn {
  --al-btn-transform: none;
  --al-btn-shadow: none;
  inline-size: var(--almx-icon-btn-size) !important;
  block-size: var(--almx-icon-btn-size) !important;
  padding: 0 !important;
  border-radius: var(--almx-radius-pill) !important;
}

#alMemberArea .almx-chip,
#alMemberArea .almx-status-pill,
#alMemberArea:not(.al-tanks) .al-pill:not(:where(#alProfile *)):not(:where(#alDash *)),
#alAccount .al-account-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: var(--almx-chip-height) !important;
  padding: 0 var(--almx-chip-padding-x) !important;
  border: 1px solid var(--almx-chip-border) !important;
  border-radius: var(--almx-chip-radius) !important;
  background: var(--almx-chip-bg) !important;
  color: var(--almx-chip-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#alMemberArea .almx-status-pill {
  min-height: var(--almx-status-pill-height) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

#alMemberArea .almx-chip--success {
  border-color: color-mix(in srgb, var(--almx-color-success) 30%, var(--almx-color-border)) !important;
  background: color-mix(in srgb, var(--almx-color-success) 8%, #fff) !important;
  color: color-mix(in srgb, var(--almx-color-success) 78%, #0f172a) !important;
}

#alMemberArea .almx-chip--warning {
  border-color: color-mix(in srgb, var(--almx-color-warning) 30%, var(--almx-color-border)) !important;
  background: color-mix(in srgb, var(--almx-color-warning) 8%, #fff) !important;
  color: color-mix(in srgb, var(--almx-color-warning) 78%, #0f172a) !important;
}

#alMemberArea .almx-chip--danger {
  border-color: color-mix(in srgb, var(--almx-color-danger) 30%, var(--almx-color-border)) !important;
  background: color-mix(in srgb, var(--almx-color-danger) 7%, #fff) !important;
  color: color-mix(in srgb, var(--almx-color-danger) 82%, #0f172a) !important;
}

#alMemberArea .almx-chip--info {
  border-color: color-mix(in srgb, var(--almx-color-info) 28%, var(--almx-color-border)) !important;
  background: color-mix(in srgb, var(--almx-color-info) 6%, #fff) !important;
  color: color-mix(in srgb, var(--almx-color-info) 78%, #0f172a) !important;
}

#alMemberArea .almx-tabs,
#alMemberArea:not(.al-tanks) .al-context-nav:not(:where(#alProfile *)):not(:where(#alDash *)) {
  display: block !important;
  max-width: 100% !important;
  margin: 0 0 var(--almx-space-3) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

#alMemberArea .almx-tabs__list,
#alMemberArea:not(.al-tanks) .al-context-nav__list:not(:where(#alProfile *)):not(:where(#alDash *)) {
  display: flex !important;
  align-items: center !important;
  gap: var(--almx-tabs-gap) !important;
  min-width: max-content !important;
}

#alMemberArea .almx-tab,
#alMemberArea:not(.al-tanks) .al-context-nav__link:not(:where(#alProfile *)):not(:where(#alDash *)) {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--almx-tab-height) !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--almx-tab-bg) !important;
  color: var(--almx-tab-text) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

#alMemberArea .almx-tab[aria-selected="true"],
#alMemberArea .almx-tab.is-active,
#alMemberArea:not(.al-tanks) .al-context-nav__link[aria-selected="true"]:not(:where(#alProfile *)):not(:where(#alDash *)),
#alMemberArea:not(.al-tanks) .al-context-nav__link[aria-current="page"]:not(:where(#alProfile *)):not(:where(#alDash *)),
#alMemberArea:not(.al-tanks) .al-context-nav__link.is-active:not(:where(#alProfile *)):not(:where(#alDash *)) {
  color: var(--almx-tab-active-text) !important;
}

#alMemberArea .almx-segmented {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: var(--almx-segmented-padding) !important;
  border: 1px solid var(--almx-tab-border) !important;
  border-radius: var(--almx-tab-radius) !important;
  background: var(--almx-segmented-bg) !important;
}

#alMemberArea .almx-segmented__item {
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: calc(var(--almx-tab-radius) - 3px) !important;
}

#alMemberArea .almx-segmented__item[aria-selected="true"],
#alMemberArea .almx-segmented__item.is-active {
  background: var(--almx-tab-active-bg) !important;
  color: var(--almx-tab-active-text) !important;
  box-shadow: var(--almx-shadow-xs) !important;
}

#alMemberArea .almx-card,
#alMemberArea:not(.al-tanks) .al-card:not(:where(#alProfile *)):not(:where(#alDash *)),
#alAccount .al-card {
  background: linear-gradient(180deg, var(--almx-card-bg) 0%, var(--almx-card-bg) 72%, var(--almx-color-surface-muted) 100%) !important;
  border: 1px solid var(--almx-surface-border) !important;
  border-radius: var(--almx-card-radius) !important;
  box-shadow: var(--almx-surface-shadow) !important;
  overflow: hidden !important;
}

#alMemberArea .almx-surface {
  background: var(--almx-surface-bg) !important;
  border: 1px solid var(--almx-surface-border) !important;
  border-radius: var(--almx-surface-radius) !important;
  box-shadow: var(--almx-surface-shadow) !important;
}

#alMemberArea .almx-card__head,
#alMemberArea:not(.al-tanks) .al-card-head:not(:where(#alProfile *)):not(:where(#alDash *)),
#alAccount .al-card-head {
  padding: var(--almx-card-head-padding) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--almx-color-border) 75%, #fff) !important;
}

#alMemberArea .almx-card__body,
#alMemberArea:not(.al-tanks) .al-card-body:not(:where(#alProfile *)):not(:where(#alDash *)),
#alAccount .al-card-body {
  padding: var(--almx-card-body-padding) !important;
  min-width: 0 !important;
}

#alMemberArea .almx-card__foot,
#alMemberArea:not(.al-tanks) .al-card-foot:not(:where(#alProfile *)):not(:where(#alDash *)),
#alAccount .al-card-foot {
  padding: var(--almx-card-foot-padding) !important;
  color: var(--almx-color-text-muted) !important;
}

@media (max-width: 640px) {
  #alMemberArea {
    --almx-btn-padding-x: 12px;
    --almx-tabs-gap: 12px;
    --almx-card-head-padding: 14px 16px;
    --almx-card-body-padding: 14px;
    --almx-card-foot-padding: 12px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #alMemberArea .almx-btn,
  #alMemberArea .almx-icon-btn,
  #alMemberArea .almx-tab,
  #alMemberArea .almx-segmented__item {
    transition: none !important;
  }
}


/* Source: al-members/assets/css/member-system/07-baseline.low-risk.css */
/* ======================================================================
   AquariumLesson Member Experience System
   Phase 4A: Low-risk baseline migration

   Visual direction:
   - living premium ecosystem operating system
   - calm biological depth
   - signal surfaces for member cards and tabs
   - utility surfaces for forms, settings, account management

   Scope intentionally excludes Tank Hub, dashboard, profile/public profile,
   header/search/cart/auth, saved bookmark buttons, modals, and sheets.
   ====================================================================== */

#alMemberArea {
  --almx-organic-white: #fbfdfb;
  --almx-organic-surface: #f6faf7;
  --almx-signal-surface: color-mix(in srgb, var(--almx-color-surface) 84%, var(--almx-color-moss-light) 16%);
  --almx-signal-border: color-mix(in srgb, var(--almx-color-moss) 15%, var(--almx-color-border));
  --almx-signal-shadow: 0 12px 32px rgba(15, 23, 42, .07);
  --almx-immersive-bg:
    radial-gradient(circle at 10% 0%, rgba(92, 168, 146, .18), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(44, 107, 74, .12), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,250,247,.94));
  --almx-utility-bg: color-mix(in srgb, var(--almx-organic-white) 92%, var(--almx-color-surface-muted));
  --almx-coral: #e06b5f;
  --almx-amber-soft: #d79231;
}

/* ======================================================================
   Phase 5: Shared member page layout system

   A compact, reusable shell for member pages that keeps content logic in
   templates untouched while normalizing page heads, actions, subnavs,
   card rhythm, and real Elementor/Astra wrapper width.
   ====================================================================== */

body.account-area {
  --almx-shell-gap-desktop: 20px;
  --almx-shell-gap-tablet: 16px;
  --almx-member-content-max: 1360px;
  --almx-member-page-x: clamp(18px, 2vw, 30px);
  --almx-member-page-y: clamp(16px, 1.8vw, 24px);
  --almx-member-page-gap: 16px;
  --almx-member-card-gap: 14px;
  --almx-member-card-pad: clamp(16px, 1.6vw, 22px);
  --almx-member-radius: 16px;
  --almx-member-radius-sm: 12px;
}

body.account-area #alMemberArea {
  --almx-shell-gap-desktop: 20px;
  --almx-shell-gap-tablet: 16px;
  --almx-shell-gap: var(--almx-shell-gap-desktop);
  --almx-member-content-max: 1360px;
  --almx-member-page-x: clamp(18px, 2vw, 30px);
  --almx-member-page-y: clamp(16px, 1.8vw, 24px);
  --almx-member-page-gap: 16px;
  --almx-member-card-gap: 14px;
  --almx-member-card-pad: clamp(16px, 1.6vw, 22px);
  --almx-member-radius: 16px;
  --almx-member-radius-sm: 12px;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  body.account-area,
  body.account-area #alMemberArea {
    --almx-shell-gap: var(--almx-shell-gap-tablet);
  }
}

@media (min-width: 783px) {
  body.account-area #content,
  body.account-area .site-content {
    width: 100% !important;
    max-width: none !important;
  }

  body.account-area #content > .ast-container,
  body.account-area .site-content > .ast-container,
  body.account-area .ast-container:has(#alMemberArea) {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.account-area .elementor .e-con.e-parent:has(#alMemberArea),
  body.account-area .elementor-section:has(#alMemberArea),
  body.account-area .elementor-container:has(#alMemberArea) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    --gap: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
    --padding-top: 0px;
    --padding-bottom: 0px;
  }

  body.account-area .e-con.e-parent:has(#alMemberArea)
  .elementor-widget-shortcode.elementor-hidden-tablet.elementor-hidden-mobile {
    flex-basis: calc(var(--almx-rail-left) + var(--almx-rail-w) + var(--almx-shell-gap)) !important;
    width: calc(var(--almx-rail-left) + var(--almx-rail-w) + var(--almx-shell-gap)) !important;
    min-width: calc(var(--almx-rail-left) + var(--almx-rail-w) + var(--almx-shell-gap)) !important;
    max-width: calc(var(--almx-rail-left) + var(--almx-rail-w) + var(--almx-shell-gap)) !important;
  }

  body.account-area .elementor-widget-shortcode:has(#alMemberArea):not(.elementor-hidden-tablet) {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

body.account-area #alMemberArea.al-member-page {
  width: 100% !important;
  max-width: var(--almx-member-content-max) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: var(--almx-member-page-y) var(--almx-member-page-x) 44px !important;
  box-sizing: border-box !important;
  display: grid !important;
  gap: var(--almx-member-page-gap) !important;
  align-content: start !important;
}

body.account-area #alMemberArea.al-member-page:has(#alDash.al-dash--premium) {
  max-width: var(--almx-member-content-max) !important;
  padding: 14px clamp(14px, 1.8vw, 24px) 44px !important;
  gap: 14px !important;
}

body.account-area #alMemberArea.alpp-shell--settings,
body.account-area #alMemberArea.al-tanks {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html body.account-area #alMemberArea.alpp-shell--settings .al-tanks-shell,
html body.account-area #alMemberArea.al-tanks .al-tanks-shell,
html body.account-area #alMemberArea.al-tanks .al-container.al-tanks__container.al-tanks-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

html body.account-area #alMemberArea.alpp-shell--settings .al-tanks-container,
html body.account-area #alMemberArea.al-tanks .al-tanks-shell > .al-tanks-container {
  width: min(100%, var(--almx-member-content-max)) !important;
  max-width: var(--almx-member-content-max) !important;
  margin: 0 auto !important;
  padding: var(--almx-member-page-y) var(--almx-member-page-x) 44px !important;
  box-sizing: border-box !important;
}

html body.account-area #alMemberArea.al-tanks .al-tanks-shell > .al-tanks-container {
  display: grid !important;
  gap: 14px !important;
}

body.account-area #alMemberArea .al-member-pagehead {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.account-area #alMemberArea .al-member-pagehead,
body.account-area #alMemberArea .al-member-pagehead__top,
body.account-area #alMemberArea .al-pane__head-top.al-member-pagehead__top,
body.account-area #alMemberArea.al-tanks .al-tanks__overviewHead.al-member-pagehead {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

body.account-area #alMemberArea .al-member-pagehead {
  flex-direction: column !important;
}

body.account-area #alMemberArea .al-member-pagehead__top,
body.account-area #alMemberArea .al-pane__head-top.al-member-pagehead__top,
body.account-area #alMemberArea.al-tanks .al-tanks__overviewHead.al-member-pagehead {
  flex-direction: row !important;
  width: 100% !important;
}

body.account-area #alMemberArea .al-member-pagehead__main,
body.account-area #alMemberArea .al-pagehead__left,
body.account-area #alMemberArea .al-tanks__overviewTitleWrap {
  min-width: 0 !important;
}

body.account-area #alMemberArea .al-member-pagehead > * {
  max-width: 100% !important;
}

body.account-area #alMemberArea.alpp-shell--settings .alpp-hero--settings.al-member-pagehead .alpp-hero-grid {
  width: 100% !important;
}

body.account-area #alMemberArea .al-member-pagehead__actions,
body.account-area #alMemberArea .al-pane__head--with-actions .al-btn {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

body.account-area #alMemberArea .al-pagehead__title,
body.account-area #alMemberArea .al-pane__title,
body.account-area #alMemberArea.al-tanks .al-tanks__overviewTitle,
body.account-area #alMemberArea.alpp-shell--settings .alpp-name {
  margin: 0 !important;
  color: var(--almx-color-deep-slate, #0f172a) !important;
  font-size: var(--al-type-member-title) !important;
  line-height: var(--al-leading-title) !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

body.account-area #alMemberArea .al-pagehead__sub,
body.account-area #alMemberArea .al-pane__sub,
body.account-area #alMemberArea.al-tanks .al-tanks__overviewSub,
body.account-area #alMemberArea.alpp-shell--settings .al-view {
  margin: 6px 0 0 !important;
  max-width: 68ch !important;
  color: color-mix(in srgb, var(--almx-color-text-muted, #64748b) 88%, var(--almx-color-moss, #2c6b4a)) !important;
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

body.account-area #alMemberArea .al-member-pagehead__nav,
body.account-area #alMemberArea #alSavedTabs.al-context-nav,
body.account-area #alMemberArea.alpp-shell--settings .al-settings-navwrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body.account-area #alMemberArea #alSavedTabs.al-context-nav,
body.account-area #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav,
body.account-area #alMemberArea .al-context-nav--moss.al-tabs {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 40px !important;
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 16%, rgba(15,23,42,.08)) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.035) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

body.account-area #alMemberArea #alSavedTabs.al-context-nav::-webkit-scrollbar,
body.account-area #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav::-webkit-scrollbar,
body.account-area #alMemberArea .al-context-nav--moss.al-tabs::-webkit-scrollbar {
  display: none !important;
}

body.account-area #alMemberArea #alSavedTabs.al-context-nav [role="tab"],
body.account-area #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav .al-settings-nav__item,
body.account-area #alMemberArea .al-context-nav--moss.al-tabs .al-context-nav__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-height: 32px !important;
  padding: 7px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--almx-color-text, #0f172a) 70%, var(--almx-color-text-muted, #64748b)) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body.account-area #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav .al-settings-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.account-area #alMemberArea.alpp-shell--settings .al-settings-tab__icon,
body.account-area #alMemberArea.alpp-shell--settings .al-settings-tab__sub {
  display: none !important;
}

body.account-area #alMemberArea.alpp-shell--settings .al-settings-tab__title {
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: 0 !important;
}

body.account-area #alMemberArea #alSavedTabs.al-context-nav [role="tab"][aria-selected="true"],
body.account-area #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav .al-settings-nav__item.is-active,
body.account-area #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav .al-settings-nav__item[aria-current="page"],
body.account-area #alMemberArea .al-context-nav--moss.al-tabs .al-context-nav__link.is-active,
body.account-area #alMemberArea .al-context-nav--moss.al-tabs .al-context-nav__link[aria-current="page"] {
  color: var(--almx-color-brand-strong, #24543c) !important;
  border-color: color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 18%, transparent) !important;
  background: color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 9%, #fff) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
  font-weight: var(--al-weight-heading) !important;
}

body.account-area #alMemberArea #alSavedTabs.al-context-nav [role="tab"]::after,
body.account-area #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav .al-settings-nav__item::after {
  content: none !important;
  display: none !important;
}

body.account-area #alMemberArea.alpp-shell--settings .alpp-hero--settings.al-member-pagehead {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.account-area #alMemberArea.alpp-shell--settings .alpp-hero--settings.al-member-pagehead::before {
  content: none !important;
}

body.account-area #alMemberArea.alpp-shell--settings .al-settings {
  gap: var(--almx-member-page-gap) !important;
  grid-template-rows: max-content max-content auto !important;
}

body.account-area #alMemberArea.alpp-shell--settings .al-settings-navwrap {
  grid-row: 2 !important;
}

body.account-area #alMemberArea.alpp-shell--settings .alpp-hero--settings {
  grid-row: 1 !important;
}

body.account-area #alMemberArea.alpp-shell--settings .al-settings-pane-shell {
  grid-row: 3 !important;
  padding-top: 0 !important;
}

body.account-area #alMemberArea .al-card,
body.account-area #alMemberArea .al-panel,
body.account-area #alMemberArea .al-pane-card,
body.account-area #alMemberArea .al-achievements__sectionCard,
body.account-area #alMemberArea .al-achievements-hero,
body.account-area #alMemberArea.al-tanks .al-tanksSurface,
body.account-area #alMemberArea.al-tanks .al-tanks__overviewCard,
body.account-area #alMemberArea.al-tanks .al-tankTile {
  border-radius: var(--almx-member-radius) !important;
}

body.account-area #alMemberArea.al-member-page:not(:has(#alDash)) .al-card,
body.account-area #alMemberArea.al-member-page:not(:has(#alDash)) .al-pane-card,
body.account-area #alMemberArea.al-member-page:not(:has(#alDash)) .al-achievements__sectionCard,
body.account-area #alMemberArea.alpp-shell--settings .al-card,
body.account-area #alMemberArea.alpp-shell--settings .al-pane-card,
body.account-area #alMemberArea.al-tanks .al-tanksSurface,
body.account-area #alMemberArea.al-tanks .al-tanks__overviewCard {
  box-shadow: 0 1px 2px rgba(15,23,42,.035) !important;
}

body.account-area #alMemberArea .al-account-grid,
body.account-area #alMemberArea .al-security-grid,
body.account-area #alMemberArea .al-orders-grid,
body.account-area #alMemberArea .al-achievements__meta-row,
body.account-area #alMemberArea .al-achievements__stats,
body.account-area #alMemberArea .al-goal-group__grid,
body.account-area #alMemberArea .al-badge-grid,
body.account-area #alMemberArea.al-tanks .al-tanks__grid,
body.account-area #alMemberArea.al-tanks .al-tanks__grid--enhanced {
  gap: var(--almx-member-card-gap) !important;
}

body.account-area #alMemberArea.al-tanks .al-tanks__overviewHead.al-member-pagehead {
  padding: 0 0 12px !important;
  margin: 0 !important;
}

body.account-area #alMemberArea.al-tanks .al-tanks__overviewActions .al-btn,
body.account-area #alMemberArea .al-member-pagehead .al-btn,
body.account-area #alMemberArea .al-pane__head--with-actions .al-btn {
  min-height: 36px !important;
  padding: 8px 14px !important;
  border-radius: var(--al-button-radius);
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

body.account-area #alMemberArea.al-tanks .al-tankAppNavLayer,
body.account-area #alMemberArea.al-tanks .al-tankAppNavInner {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.account-area #alMemberArea.al-tanks .al-tankNav {
  margin: 0 0 12px !important;
  gap: 6px !important;
}

body.account-area #alMemberArea.al-tanks .al-tanks__segments,
body.account-area #alMemberArea.al-tanks .al-context-nav--tank,
body.account-area #alMemberArea.al-tanks .al-subtabs {
  margin-bottom: 10px !important;
  padding: 4px !important;
  border-radius: 14px !important;
}

body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium {
  --dash-gap: 14px;
}

body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-dash__grid {
  gap: 14px !important;
}

body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel {
  border-radius: var(--al-surface-radius-panel) !important;
}

body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--hero,
body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--progress,
body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--actions,
body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--tanks,
body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--continue,
body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--saved,
body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--activity {
  padding: 16px !important;
}

body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-dash__focus-title,
body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium h1,
body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium h2,
body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium h3 {
  letter-spacing: var(--al-tracking-body) !important;
}

@media (min-width: 1280px) {
  body.account-area #alMemberArea.al-tanks .al-tanks__grid,
  body.account-area #alMemberArea.al-tanks .al-tanks__grid--enhanced {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1023px) {
  body.account-area {
    --almx-member-page-x: 10px;
    --almx-member-page-y: 10px;
    --almx-member-page-gap: 12px;
    --almx-member-card-gap: 10px;
    --almx-member-card-pad: 14px;
    --almx-member-radius: 14px;
    --almx-member-radius-sm: 10px;
  }

  body.account-area #content > .ast-container,
  body.account-area .site-content > .ast-container,
  body.account-area .ast-container:has(#alMemberArea),
  body.account-area .elementor .e-con.e-parent:has(#alMemberArea),
  body.account-area .elementor-widget-shortcode:has(#alMemberArea),
  body.account-area .elementor-widget-container:has(#alMemberArea),
  body.account-area .elementor-shortcode:has(#alMemberArea) {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.account-area #alMemberArea.al-member-page {
    max-width: none !important;
    padding: var(--almx-member-page-y) var(--almx-member-page-x) 28px !important;
  }

  html body.account-area #alMemberArea.alpp-shell--settings .al-tanks-container,
  html body.account-area #alMemberArea.al-tanks .al-tanks-shell > .al-tanks-container {
    width: 100% !important;
    max-width: none !important;
    padding: var(--almx-member-page-y) var(--almx-member-page-x) 28px !important;
  }

  body.account-area #alMemberArea .al-pagehead__title,
  body.account-area #alMemberArea .al-pane__title,
  body.account-area #alMemberArea.al-tanks .al-tanks__overviewTitle,
  body.account-area #alMemberArea.alpp-shell--settings .alpp-name {
    font-size: var(--al-type-member-title) !important;
    line-height: var(--al-leading-title) !important;
  }

  body.account-area #alMemberArea .al-pagehead__sub,
  body.account-area #alMemberArea .al-pane__sub,
  body.account-area #alMemberArea.al-tanks .al-tanks__overviewSub,
  body.account-area #alMemberArea.alpp-shell--settings .al-view {
    font-size: 0.86rem !important;
    line-height: 1.38 !important;
  }

  body.account-area #alMemberArea .al-member-pagehead,
  body.account-area #alMemberArea .al-member-pagehead__top,
  body.account-area #alMemberArea .al-pane__head-top.al-member-pagehead__top,
  body.account-area #alMemberArea.al-tanks .al-tanks__overviewHead.al-member-pagehead {
    gap: 10px !important;
  }

  body.account-area #alMemberArea .al-member-pagehead__top,
  body.account-area #alMemberArea .al-pane__head-top.al-member-pagehead__top,
  body.account-area #alMemberArea.al-tanks .al-tanks__overviewHead.al-member-pagehead {
    flex-wrap: wrap !important;
  }

  body.account-area #alMemberArea #alSavedTabs.al-context-nav,
  body.account-area #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav,
  body.account-area #alMemberArea .al-context-nav--moss.al-tabs {
    width: 100% !important;
    min-height: 38px !important;
    padding: 4px !important;
    justify-content: flex-start !important;
    scroll-snap-type: x proximity !important;
  }

  body.account-area #alMemberArea #alSavedTabs.al-context-nav [role="tab"],
  body.account-area #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav .al-settings-nav__item,
  body.account-area #alMemberArea .al-context-nav--moss.al-tabs .al-context-nav__link {
    min-height: 32px !important;
    padding: 7px 11px !important;
    font-size: 12.5px !important;
    scroll-snap-align: start !important;
  }

  body.account-area #alMemberArea .al-card,
  body.account-area #alMemberArea .al-panel,
  body.account-area #alMemberArea .al-pane-card,
  body.account-area #alMemberArea .al-achievements__sectionCard,
  body.account-area #alMemberArea .al-achievements-hero,
  body.account-area #alMemberArea.al-tanks .al-tanksSurface,
  body.account-area #alMemberArea.al-tanks .al-tanks__overviewCard,
  body.account-area #alMemberArea.al-tanks .al-tankTile {
    border-radius: var(--almx-member-radius) !important;
  }

  body.account-area #alMemberArea.al-tanks .al-tanks__overviewActions,
  body.account-area #alMemberArea .al-member-pagehead__actions {
    width: 100% !important;
  }

  body.account-area #alMemberArea.al-tanks .al-tanks__overviewActions .al-btn,
  body.account-area #alMemberArea .al-member-pagehead__actions .al-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  body.account-area #alMemberArea:has(#alDash.al-dash--premium) {
    padding: 8px 8px 28px !important;
  }

  body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-dash__grid {
    gap: 10px !important;
  }

  body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--hero,
  body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--progress,
  body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--actions,
  body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--tanks,
  body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--continue,
  body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--saved,
  body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--activity {
    padding: 14px !important;
  }
}

@media (max-width: 640px) {
  body.account-area {
    --almx-member-page-x: 8px;
    --almx-member-page-y: 8px;
    --almx-member-page-gap: 10px;
    --almx-member-card-gap: 10px;
    --almx-member-card-pad: 12px;
    --almx-member-radius: 12px;
  }

  body.account-area #alMemberArea .al-account-grid,
  body.account-area #alMemberArea .al-security-grid,
  body.account-area #alMemberArea .al-orders-grid,
  body.account-area #alMemberArea .al-achievements__meta-row,
  body.account-area #alMemberArea .al-achievements__stats,
  body.account-area #alMemberArea .al-goal-group__grid,
  body.account-area #alMemberArea .al-badge-grid,
  body.account-area #alMemberArea.al-tanks .al-tanks__grid,
  body.account-area #alMemberArea.al-tanks .al-tanks__grid--enhanced {
    gap: var(--almx-member-card-gap) !important;
  }

  body.account-area #alMemberArea .al-card,
  body.account-area #alMemberArea .al-panel,
  body.account-area #alMemberArea .al-pane-card,
  body.account-area #alMemberArea .al-achievements__sectionCard,
  body.account-area #alMemberArea.al-tanks .al-tanks__overviewCard {
    padding-left: min(var(--almx-member-card-pad), 12px) !important;
    padding-right: min(var(--almx-member-card-pad), 12px) !important;
  }
}

#alMemberArea:not(.al-tanks) .woocommerce-MyAccount-content > * {
  border-color: var(--almx-signal-border) !important;
  background:
    radial-gradient(circle at 0 0, rgba(92,168,146,.08), transparent 38%),
    linear-gradient(180deg, var(--almx-organic-white) 0%, var(--almx-organic-white) 72%, var(--almx-organic-surface) 100%) !important;
  box-shadow: var(--almx-signal-shadow) !important;
}

/* Phase 2C: existing Account/Settings panels; unrelated WooCommerce children stay unchanged. */
#alMemberArea.alpp-shell--settings #alSettingsPane .al-card,
#alMemberArea.alpp-shell--settings #alSettingsPane .al-pane-card,
#alMemberArea:not(.al-tanks) .al-account-pane .al-card,
#alMemberArea:not(.al-tanks) .al-security-pane .al-card,
#alMemberArea:not(.al-tanks) .al-orders-pane .al-card {
  border-color: var(--al-surface-border) !important;
  border-radius: var(--al-surface-radius-panel) !important;
  background: var(--al-surface-card) !important;
  box-shadow: var(--al-surface-shadow-none) !important;
}

#alMemberArea.alpp-shell--settings .alpp-hero--settings {
  border-color: color-mix(in srgb, var(--almx-color-moss) 18%, var(--almx-color-border)) !important;
  background: var(--almx-immersive-bg) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.72) inset,
    0 24px 60px rgba(15,23,42,.10) !important;
}

#alMemberArea.alpp-shell--settings .alpp-hero--settings::before {
  background:
    radial-gradient(circle at 0% 0%, rgba(92,168,146,.16), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(44,107,74,.10), transparent 28%) !important;
}

#alMemberArea.alpp-shell--settings .alpp-hero--settings .alpp-name,
#alMemberArea:not(.al-tanks) .al-pane__title:not(:where(#alProfile *)):not(:where(#alDash *)),
#alMemberArea:not(.al-tanks) .al-pagehead__title:not(:where(#alProfile *)):not(:where(#alDash *)) {
  color: var(--almx-color-deep-slate) !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

#alMemberArea.alpp-shell--settings .alpp-hero--settings .al-view,
#alMemberArea:not(.al-tanks) .al-pane__sub:not(:where(#alProfile *)):not(:where(#alDash *)),
#alMemberArea:not(.al-tanks) .al-card-sub:not(:where(#alProfile *)):not(:where(#alDash *)),
#alMemberArea:not(.al-tanks) .al-pagehead__sub:not(:where(#alProfile *)):not(:where(#alDash *)) {
  color: color-mix(in srgb, var(--almx-color-text-muted) 88%, var(--almx-color-moss)) !important;
}

#alMemberArea:not(.al-tanks) .al-card-head:not(:where(#alProfile *)):not(:where(#alDash *)),
#alMemberArea.alpp-shell--settings #alSettingsPane .al-card-head {
  background:
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.36)) !important;
  border-bottom-color: color-mix(in srgb, var(--almx-color-border) 76%, var(--almx-color-moss-light)) !important;
}

#alMemberArea:not(.al-tanks) .al-card-title:not(:where(#alProfile *)):not(:where(#alDash *)),
#alMemberArea:not(.al-tanks) .al-row-label:not(:where(#alProfile *)):not(:where(#alDash *)),
#alMemberArea:not(.al-tanks) .al-field-label:not(:where(#alProfile *)):not(:where(#alDash *)) {
  color: var(--almx-color-deep-slate) !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}

#alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav,
#alMemberArea #alSavedTabs.al-context-nav {
  gap: var(--almx-space-4) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--almx-color-border) 78%, var(--almx-color-moss-light)) !important;
  padding-bottom: var(--almx-space-1) !important;
}

#alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav .al-settings-nav__item,
#alMemberArea #alSavedTabs.al-context-nav [role="tab"] {
  color: color-mix(in srgb, var(--almx-color-text-muted) 82%, var(--almx-color-deep-slate)) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

#alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav .al-settings-nav__item::after,
#alMemberArea #alSavedTabs.al-context-nav [role="tab"]::after {
  height: 3px !important;
  background: linear-gradient(90deg, var(--almx-color-moss), var(--almx-color-aqua)) !important;
}

#alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav .al-settings-nav__item.is-active,
#alMemberArea #alSavedTabs.al-context-nav [role="tab"][aria-selected="true"] {
  color: var(--almx-color-moss) !important;
  font-weight: 750 !important;
}

#alMemberArea:not(.al-tanks) .al-saved-topbar,
#alMemberArea:not(.al-tanks) .al-saved-controls,
#alMemberArea:not(.al-tanks) .al-orders-controls,
#alMemberArea:not(.al-tanks) .al-sec-form {
  color: var(--almx-color-text) !important;
}

#alMemberArea:not(.al-tanks) #alSavedSearch,
#alMemberArea:not(.al-tanks) .al-orders-controls select,
#alMemberArea:not(.al-tanks) .al-field-with-addon input {
  border-color: color-mix(in srgb, var(--almx-color-border) 80%, var(--almx-color-moss-light)) !important;
  background: var(--almx-utility-bg) !important;
}

#alMemberArea:not(.al-tanks) #alSavedSearch:focus,
#alMemberArea:not(.al-tanks) .al-orders-controls select:focus,
#alMemberArea:not(.al-tanks) .al-field-with-addon input:focus {
  border-color: color-mix(in srgb, var(--almx-color-aqua) 48%, var(--almx-color-border)) !important;
  box-shadow: var(--almx-glow-water) !important;
}

#alMemberArea:not(.al-tanks) .al-account-chip:not(:where(#alProfile *)):not(:where(#alDash *)),
#alMemberArea:not(.al-tanks) .al-card-tag:not(:where(#alProfile *)):not(:where(#alDash *)) {
  border-color: color-mix(in srgb, var(--almx-color-moss) 24%, var(--almx-color-border)) !important;
  background: color-mix(in srgb, var(--almx-color-moss) 8%, #fff) !important;
  color: var(--almx-color-moss) !important;
}

#alMemberArea:not(.al-tanks) .al-pane-card--danger:not(:where(#alProfile *)):not(:where(#alDash *)) {
  border-color: color-mix(in srgb, var(--almx-coral) 28%, var(--almx-color-border)) !important;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--almx-coral) 8%, transparent), transparent 36%),
    linear-gradient(180deg, var(--almx-organic-white), color-mix(in srgb, var(--almx-coral) 4%, #fff)) !important;
}

#alMemberArea:not(.al-tanks) .al-btn--danger:not(:where(#alProfile *)):not(:where(#alDash *)) {
  border-color: var(--al-btn-stroke);
  background: var(--al-btn-surface);
}

#alMemberArea:not(.al-tanks) .al-saved-card .al-loading-hint,
#alMemberArea:not(.al-tanks) .al-orders-pane .al-loading-hint {
  border-color: color-mix(in srgb, var(--almx-color-border) 78%, var(--almx-color-aqua)) !important;
  background: color-mix(in srgb, var(--almx-color-aqua) 5%, #fff) !important;
  color: var(--almx-color-text-muted) !important;
}

@media (hover:hover) {
  #alMemberArea.alpp-shell--settings #alSettingsPane .al-card:hover,
  #alMemberArea:not(.al-tanks) .al-account-pane .al-card:hover,
  #alMemberArea:not(.al-tanks) .al-security-pane .al-card:hover,
  #alMemberArea:not(.al-tanks) .al-orders-pane .al-card:hover {
    border-color: var(--al-surface-border) !important;
    box-shadow: var(--al-surface-shadow-none) !important;
  }
}

@media (max-width: 640px) {
  #alMemberArea.alpp-shell--settings .alpp-hero--settings {
    border-radius: var(--almx-radius-xl) !important;
  }

  #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav,
  #alMemberArea #alSavedTabs.al-context-nav {
    gap: var(--almx-space-3) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #alMemberArea.alpp-shell--settings #alSettingsPane .al-card,
  #alMemberArea:not(.al-tanks) .al-account-pane .al-card,
  #alMemberArea:not(.al-tanks) .al-security-pane .al-card,
  #alMemberArea:not(.al-tanks) .al-orders-pane .al-card,
  #alMemberArea:not(.al-tanks) .al-saved-card {
    transition: none !important;
  }
}

/* ======================================================================
   Phase 4F: Member shell / rail / content spacing alignment

   Scope:
   - Shared logged-in member shell and rail.
   - Desktop/tablet horizontal rhythm for migrated non-Tank member pages.
   - No Tank Hub, header, auth, search, cart, modal, or JS behavior changes.
   ====================================================================== */

body.account-area {
  --almx-rail-left: 16px;
  --almx-rail-w: 260px;
  --almx-shell-gap-desktop: 28px;
  --almx-shell-gap-tablet: 22px;
  --almx-shell-gap: var(--almx-shell-gap-desktop);
  --almx-shell-content-inset: 0px;
  --almx-rail-top: calc(var(--al-fixed-top, 64px) + 14px);
  --almx-rail-bg:
    radial-gradient(circle at 20% 0%, rgba(92, 168, 146, .10), transparent 34%),
    linear-gradient(180deg, rgba(253, 255, 253, .98), rgba(247, 251, 248, .96));
  --almx-rail-border: color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 14%, rgba(15,23,42,.08));
  --almx-rail-shadow:
    0 18px 44px rgba(20, 34, 27, .085),
    0 2px 10px rgba(20, 34, 27, .035),
    inset 0 1px 0 rgba(255,255,255,.78);

  --al-rail-left: var(--almx-rail-left);
  --al-rail-w: var(--almx-rail-w);
  --al-rail-gap: var(--almx-shell-gap);
}

#alMemberArea {
  --almx-shell-gap-desktop: 28px;
  --almx-shell-gap-tablet: 22px;
  --almx-shell-gap: var(--almx-shell-gap-desktop);
  --almx-shell-content-inset: 0px;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  body.account-area,
  body.account-area #alMemberArea {
    --almx-shell-gap: var(--almx-shell-gap-tablet);
  }
}

@media (min-width: 1280px) {
  body.account-area,
  body.account-area #alMemberArea {
    --almx-shell-gap: var(--almx-shell-gap-desktop);
  }
}

@media (min-width: 1024px) {
  body.account-area .e-con.e-parent:has(#alMemberArea)
  .elementor-widget-shortcode.elementor-hidden-tablet.elementor-hidden-mobile {
    flex-basis: calc(var(--almx-rail-left) + var(--almx-rail-w) + var(--almx-shell-gap)) !important;
    width: calc(var(--almx-rail-left) + var(--almx-rail-w) + var(--almx-shell-gap)) !important;
    min-width: calc(var(--almx-rail-left) + var(--almx-rail-w) + var(--almx-shell-gap)) !important;
    max-width: calc(var(--almx-rail-left) + var(--almx-rail-w) + var(--almx-shell-gap)) !important;
  }

  body.account-area #alMemberArea:not(.al-tanks) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
  }

  #alMemberArea:has(#alDash.al-dash--premium),
  #alMemberArea:not(.al-tanks) .alpp-shell--owner,
  #alMemberArea:not(.al-tanks) #alAchievements.al-achievements,
  #alMemberArea:not(.al-tanks) #alAccount,
  #alMemberArea:not(.al-tanks) .woocommerce-MyAccount-content:not(:has(#alDash)):not(:has(#alProfile)):not(:has(#alAchievements)):not(:has(#alAccount)) {
    padding-inline: var(--almx-shell-content-inset) !important;
    box-sizing: border-box !important;
  }

  #alMemberArea.al-tanks .al-container.al-tanks__container.al-tanks-shell,
  #alMemberArea.al-tanks .al-tanks-shell {
    padding-left: var(--tank-canvas-pad-desktop, 20px) !important;
    padding-right: var(--tank-canvas-pad-desktop, 20px) !important;
    box-sizing: border-box !important;
  }

  #alMemberArea:not(.al-tanks) #alAccount {
    padding-top: 2.25rem !important;
    padding-bottom: 3rem !important;
  }

  html body.account-area #alRail.al-rail,
  html body.account-area aside.al-sidebar.al-rail {
    left: var(--almx-rail-left) !important;
    top: var(--almx-rail-top) !important;
    width: var(--almx-rail-w) !important;
    max-width: var(--almx-rail-w) !important;
    max-height: calc(100dvh - var(--almx-rail-top) - 16px) !important;
    padding: 14px !important;
    border: 1px solid var(--almx-rail-border) !important;
    border-radius: var(--almx-radius-xl, 24px) !important;
    background: var(--almx-rail-bg) !important;
    box-shadow: var(--almx-rail-shadow) !important;
    color: var(--almx-color-text, #0f172a) !important;
    backdrop-filter: blur(12px) saturate(1.02) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.02) !important;
  }

  html body.account-area #alRail.al-rail::before,
  html body.account-area #alRail.al-rail::after,
  html body.account-area aside.al-sidebar.al-rail::before,
  html body.account-area aside.al-sidebar.al-rail::after {
    content: none !important;
    display: none !important;
  }

  html body.account-area #alRail.al-rail .al-rail-user,
  html body.account-area aside.al-sidebar.al-rail .al-rail-user {
    border-bottom-color: color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 12%, rgba(15,23,42,.08)) !important;
  }

  html body.account-area #alRail.al-rail .al-rail-user__avatar,
  html body.account-area aside.al-sidebar.al-rail .al-rail-user__avatar {
    background:
      radial-gradient(circle at 30% 18%, rgba(92,168,146,.22), transparent 48%),
      linear-gradient(135deg, rgba(44,107,74,.12), rgba(255,255,255,.86)) !important;
    color: var(--almx-color-brand-strong, #24543c) !important;
    box-shadow:
      0 0 0 2px rgba(255,255,255,.92),
      0 0 0 3px rgba(44,107,74,.12),
      0 8px 18px rgba(20,34,27,.08) !important;
  }

  html body.account-area #alRail.al-rail .al-rail-user__name,
  html body.account-area aside.al-sidebar.al-rail .al-rail-user__name {
    color: var(--almx-color-text, #0f172a) !important;
    font-weight: 750 !important;
  }

  html body.account-area #alRail.al-rail .al-rail-user__sub,
  html body.account-area aside.al-sidebar.al-rail .al-rail-user__sub {
    color: color-mix(in srgb, var(--almx-color-text-muted, #64748b) 86%, var(--almx-color-moss, #2c6b4a)) !important;
  }

  html body.account-area #alRail.al-rail .al-divider,
  html body.account-area aside.al-sidebar.al-rail .al-divider {
    background: color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 10%, rgba(15,23,42,.08)) !important;
  }

  html body.account-area #alRail.al-rail .al-side-link,
  html body.account-area aside.al-sidebar.al-rail .al-side-link {
    min-height: 46px !important;
    color: color-mix(in srgb, var(--almx-color-text, #0f172a) 86%, var(--almx-color-text-muted, #64748b)) !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.account-area #alRail.al-rail .al-side-link:hover,
  html body.account-area #alRail.al-rail .al-side-link:focus-visible,
  html body.account-area aside.al-sidebar.al-rail .al-side-link:hover,
  html body.account-area aside.al-sidebar.al-rail .al-side-link:focus-visible {
    color: var(--almx-color-brand-strong, #24543c) !important;
    border-color: color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 16%, transparent) !important;
    background: color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 7%, #fff) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
  }

  html body.account-area #alRail.al-rail .al-side-link.is-active,
  html body.account-area #alRail.al-rail .al-side-link[aria-current="page"],
  html body.account-area aside.al-sidebar.al-rail .al-side-link.is-active,
  html body.account-area aside.al-sidebar.al-rail .al-side-link[aria-current="page"] {
    color: var(--almx-color-brand-strong, #24543c) !important;
    border-color: color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 22%, transparent) !important;
    background:
      radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--almx-color-aqua, #5ca892) 16%, transparent), transparent 70%),
      linear-gradient(180deg, color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 10%, #fff), rgba(255,255,255,.78)) !important;
    box-shadow:
      inset 3px 0 0 color-mix(in srgb, var(--almx-color-aqua, #5ca892) 72%, var(--almx-color-moss, #2c6b4a)),
      inset 0 1px 0 rgba(255,255,255,.76) !important;
  }
}

/* ======================================================================
   Phase 5B: Final order guard

   These rules intentionally sit after the legacy baseline so the shared
   member layout system wins over older page and wrapper spacing.
   ====================================================================== */

body.account-area,
body.account-area #alMemberArea {
  --almx-shell-gap-desktop: 20px;
  --almx-shell-gap-tablet: 16px;
  --almx-shell-gap: var(--almx-shell-gap-desktop);
  --almx-member-content-max: 1360px;
  --almx-member-page-x: clamp(18px, 2vw, 30px);
  --almx-member-page-y: clamp(16px, 1.8vw, 24px);
  --almx-member-page-gap: 16px;
  --almx-member-card-gap: 14px;
  --almx-member-radius: 16px;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  body.account-area,
  body.account-area #alMemberArea {
    --almx-shell-gap: var(--almx-shell-gap-tablet);
  }
}

@media (min-width: 1024px) {
  html body.account-area #content > .ast-container,
  html body.account-area .site-content > .ast-container,
  html body.account-area .ast-container:has(#alMemberArea) {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body.account-area .elementor .e-con.e-parent:has(#alMemberArea),
  html body.account-area .elementor-section:has(#alMemberArea),
  html body.account-area .elementor-container:has(#alMemberArea) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    --gap: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
    --padding-top: 0px;
    --padding-bottom: 0px;
  }

  html body.account-area .e-con.e-parent:has(#alMemberArea)
  .elementor-widget-shortcode.elementor-hidden-tablet.elementor-hidden-mobile {
    flex-basis: calc(var(--almx-rail-left) + var(--almx-rail-w) + var(--almx-shell-gap)) !important;
    width: calc(var(--almx-rail-left) + var(--almx-rail-w) + var(--almx-shell-gap)) !important;
    min-width: calc(var(--almx-rail-left) + var(--almx-rail-w) + var(--almx-shell-gap)) !important;
    max-width: calc(var(--almx-rail-left) + var(--almx-rail-w) + var(--almx-shell-gap)) !important;
  }

  html body.account-area .elementor-widget-shortcode:has(#alMemberArea):not(.elementor-hidden-tablet) {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

html body.account-area #alMemberArea.al-member-page {
  width: 100% !important;
  max-width: var(--almx-member-content-max) !important;
  margin: 0 auto !important;
  padding: var(--almx-member-page-y) var(--almx-member-page-x) 44px !important;
  display: grid !important;
  gap: var(--almx-member-page-gap) !important;
  align-content: start !important;
  box-sizing: border-box !important;
}

html body.account-area #alMemberArea.al-member-page:has(#alDash.al-dash--premium) {
  padding: 14px clamp(14px, 1.8vw, 24px) 44px !important;
  gap: 14px !important;
}

html body.account-area #alMemberArea.alpp-shell--settings,
html body.account-area #alMemberArea.al-tanks {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

html body.account-area #alMemberArea.alpp-shell--settings .al-tanks-shell,
html body.account-area #alMemberArea.al-tanks .al-tanks-shell,
html body.account-area #alMemberArea.al-tanks .al-container.al-tanks__container.al-tanks-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

html body.account-area #alMemberArea.alpp-shell--settings .al-tanks-container,
html body.account-area #alMemberArea.al-tanks .al-tanks-shell > .al-tanks-container {
  width: min(100%, var(--almx-member-content-max)) !important;
  max-width: var(--almx-member-content-max) !important;
  margin: 0 auto !important;
  padding: var(--almx-member-page-y) var(--almx-member-page-x) 44px !important;
  box-sizing: border-box !important;
}

html body.account-area #alMemberArea.al-tanks .al-tanks-shell > .al-tanks-container {
  display: grid !important;
  gap: 14px !important;
}

html body.account-area #alMemberArea .al-member-pagehead {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.account-area #alMemberArea .al-member-pagehead__top,
html body.account-area #alMemberArea .al-pane__head-top.al-member-pagehead__top,
html body.account-area #alMemberArea.al-tanks .al-tanks__overviewHead.al-member-pagehead {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html body.account-area #alMemberArea .al-member-pagehead__main,
html body.account-area #alMemberArea .al-pagehead__left,
html body.account-area #alMemberArea .al-tanks__overviewTitleWrap {
  min-width: 0 !important;
}

html body.account-area #alMemberArea .al-member-pagehead__actions,
html body.account-area #alMemberArea .al-pane__head--with-actions .al-btn {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

html body.account-area #alMemberArea .al-pagehead__title,
html body.account-area #alMemberArea .al-pane__title,
html body.account-area #alMemberArea.al-tanks .al-tanks__overviewTitle,
html body.account-area #alMemberArea.alpp-shell--settings .alpp-name {
  margin: 0 !important;
  color: var(--almx-color-deep-slate, #0f172a) !important;
  font-size: var(--al-type-member-title) !important;
  line-height: var(--al-leading-title) !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

html body.account-area #alMemberArea .al-pagehead__sub,
html body.account-area #alMemberArea .al-pane__sub,
html body.account-area #alMemberArea.al-tanks .al-tanks__overviewSub,
html body.account-area #alMemberArea.alpp-shell--settings .al-view {
  margin: 6px 0 0 !important;
  max-width: 68ch !important;
  color: color-mix(in srgb, var(--almx-color-text-muted, #64748b) 88%, var(--almx-color-moss, #2c6b4a)) !important;
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

html body.account-area #alMemberArea .al-member-pagehead__nav,
html body.account-area #alMemberArea #alSavedTabs.al-context-nav,
html body.account-area #alMemberArea.alpp-shell--settings .al-settings-navwrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html body.account-area #alMemberArea #alSavedTabs.al-context-nav,
html body.account-area #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav,
html body.account-area #alMemberArea .al-context-nav--moss.al-tabs {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 40px !important;
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 16%, rgba(15,23,42,.08)) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.035) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

html body.account-area #alMemberArea #alSavedTabs.al-context-nav::-webkit-scrollbar,
html body.account-area #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav::-webkit-scrollbar,
html body.account-area #alMemberArea .al-context-nav--moss.al-tabs::-webkit-scrollbar {
  display: none !important;
}

html body.account-area #alMemberArea #alSavedTabs.al-context-nav [role="tab"],
html body.account-area #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav .al-settings-nav__item,
html body.account-area #alMemberArea .al-context-nav--moss.al-tabs .al-context-nav__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-height: 32px !important;
  padding: 7px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--almx-color-text, #0f172a) 70%, var(--almx-color-text-muted, #64748b)) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

html body.account-area #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav .al-settings-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.account-area #alMemberArea.alpp-shell--settings .al-settings-tab__icon,
html body.account-area #alMemberArea.alpp-shell--settings .al-settings-tab__sub {
  display: none !important;
}

html body.account-area #alMemberArea #alSavedTabs.al-context-nav [role="tab"][aria-selected="true"],
html body.account-area #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav .al-settings-nav__item.is-active,
html body.account-area #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav .al-settings-nav__item[aria-current="page"],
html body.account-area #alMemberArea .al-context-nav--moss.al-tabs .al-context-nav__link.is-active,
html body.account-area #alMemberArea .al-context-nav--moss.al-tabs .al-context-nav__link[aria-current="page"] {
  color: var(--almx-color-brand-strong, #24543c) !important;
  border-color: color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 18%, transparent) !important;
  background: color-mix(in srgb, var(--almx-color-moss, #2c6b4a) 9%, #fff) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
  font-weight: 750 !important;
}

html body.account-area #alMemberArea #alSavedTabs.al-context-nav [role="tab"]::after,
html body.account-area #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav .al-settings-nav__item::after {
  content: none !important;
  display: none !important;
}

html body.account-area #alMemberArea.alpp-shell--settings .al-settings {
  gap: var(--almx-member-page-gap) !important;
  grid-template-rows: max-content max-content auto !important;
}

html body.account-area #alMemberArea.alpp-shell--settings .alpp-hero--settings {
  grid-row: 1 !important;
}

html body.account-area #alMemberArea.alpp-shell--settings .al-settings-navwrap {
  grid-row: 2 !important;
}

html body.account-area #alMemberArea.alpp-shell--settings .al-settings-pane-shell {
  grid-row: 3 !important;
  padding-top: 0 !important;
}

html body.account-area #alMemberArea.alpp-shell--settings .alpp-hero--settings.al-member-pagehead {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.account-area #alMemberArea.alpp-shell--settings .alpp-hero--settings.al-member-pagehead::before {
  content: none !important;
}

html body.account-area #alMemberArea.alpp-shell--settings .alpp-hero--settings.al-member-pagehead .alpp-hero-grid {
  width: 100% !important;
}

html body.account-area #alMemberArea .al-card,
html body.account-area #alMemberArea .al-panel,
html body.account-area #alMemberArea .al-pane-card,
html body.account-area #alMemberArea .al-achievements__sectionCard,
html body.account-area #alMemberArea .al-achievements-hero,
html body.account-area #alMemberArea.al-tanks .al-tanksSurface,
html body.account-area #alMemberArea.al-tanks .al-tanks__overviewCard,
html body.account-area #alMemberArea.al-tanks .al-tankTile {
  border-radius: var(--almx-member-radius) !important;
}

html body.account-area #alMemberArea .al-account-grid,
html body.account-area #alMemberArea .al-security-grid,
html body.account-area #alMemberArea .al-orders-grid,
html body.account-area #alMemberArea .al-achievements__meta-row,
html body.account-area #alMemberArea .al-achievements__stats,
html body.account-area #alMemberArea .al-goal-group__grid,
html body.account-area #alMemberArea .al-badge-grid,
html body.account-area #alMemberArea.al-tanks .al-tanks__grid,
html body.account-area #alMemberArea.al-tanks .al-tanks__grid--enhanced {
  gap: var(--almx-member-card-gap) !important;
}

html body.account-area #alMemberArea.al-tanks .al-tanks__overviewHead.al-member-pagehead {
  padding: 0 0 12px !important;
  margin: 0 !important;
}

html body.account-area #alMemberArea.al-tanks .al-tanks__overviewActions .al-btn,
html body.account-area #alMemberArea .al-member-pagehead .al-btn,
html body.account-area #alMemberArea .al-pane__head--with-actions .al-btn {
  min-height: 36px !important;
  padding: 8px 14px !important;
  border-radius: var(--al-button-radius);
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

html body.account-area #alMemberArea.al-tanks .al-tankAppNavLayer,
html body.account-area #alMemberArea.al-tanks .al-tankAppNavInner {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.account-area #alMemberArea.al-tanks .al-tankNav {
  margin: 0 0 12px !important;
  gap: 6px !important;
}

html body.account-area #alMemberArea.al-tanks .al-tanks__segments,
html body.account-area #alMemberArea.al-tanks .al-context-nav--tank,
html body.account-area #alMemberArea.al-tanks .al-subtabs {
  margin-bottom: 10px !important;
  padding: 4px !important;
  border-radius: 14px !important;
}

html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-dash__grid {
  gap: 14px !important;
}

html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel {
  border-radius: var(--al-surface-radius-panel) !important;
}

html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--hero,
html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--progress,
html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--actions,
html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--tanks,
html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--continue,
html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--saved,
html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--activity {
  padding: 16px !important;
}

html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-dash__focus-title,
html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium h1,
html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium h2,
html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium h3 {
  letter-spacing: 0 !important;
}

@media (max-width: 1023px) {
  body.account-area,
  body.account-area #alMemberArea {
    --almx-member-page-x: 10px;
    --almx-member-page-y: 10px;
    --almx-member-page-gap: 12px;
    --almx-member-card-gap: 10px;
    --almx-member-radius: 14px;
  }

  html body.account-area #content > .ast-container,
  html body.account-area .site-content > .ast-container,
  html body.account-area .ast-container:has(#alMemberArea),
  html body.account-area .elementor .e-con.e-parent:has(#alMemberArea),
  html body.account-area .elementor-widget-shortcode:has(#alMemberArea),
  html body.account-area .elementor-widget-container:has(#alMemberArea),
  html body.account-area .elementor-shortcode:has(#alMemberArea) {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body.account-area #alMemberArea.al-member-page,
  html body.account-area #alMemberArea.alpp-shell--settings .al-tanks-container,
  html body.account-area #alMemberArea.al-tanks .al-tanks-shell > .al-tanks-container {
    width: 100% !important;
    max-width: none !important;
    padding: var(--almx-member-page-y) var(--almx-member-page-x) 28px !important;
  }

  html body.account-area #alMemberArea .al-pagehead__title,
  html body.account-area #alMemberArea .al-pane__title,
  html body.account-area #alMemberArea.al-tanks .al-tanks__overviewTitle,
  html body.account-area #alMemberArea.alpp-shell--settings .alpp-name {
    font-size: var(--al-type-member-title) !important;
    line-height: var(--al-leading-title) !important;
  }

  html body.account-area #alMemberArea .al-pagehead__sub,
  html body.account-area #alMemberArea .al-pane__sub,
  html body.account-area #alMemberArea.al-tanks .al-tanks__overviewSub,
  html body.account-area #alMemberArea.alpp-shell--settings .al-view {
    font-size: 0.86rem !important;
    line-height: 1.38 !important;
  }

  html body.account-area #alMemberArea .al-member-pagehead__top,
  html body.account-area #alMemberArea .al-pane__head-top.al-member-pagehead__top,
  html body.account-area #alMemberArea.al-tanks .al-tanks__overviewHead.al-member-pagehead {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  html body.account-area #alMemberArea #alSavedTabs.al-context-nav,
  html body.account-area #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav,
  html body.account-area #alMemberArea .al-context-nav--moss.al-tabs {
    width: 100% !important;
    min-height: 38px !important;
    padding: 4px !important;
    justify-content: flex-start !important;
    scroll-snap-type: x proximity !important;
  }

  html body.account-area #alMemberArea #alSavedTabs.al-context-nav [role="tab"],
  html body.account-area #alMemberArea.alpp-shell--settings .al-settings-nav.al-context-nav .al-settings-nav__item,
  html body.account-area #alMemberArea .al-context-nav--moss.al-tabs .al-context-nav__link {
    min-height: 32px !important;
    padding: 7px 11px !important;
    font-size: 12.5px !important;
    scroll-snap-align: start !important;
  }

  html body.account-area #alMemberArea.al-tanks .al-tanks__overviewActions,
  html body.account-area #alMemberArea .al-member-pagehead__actions {
    width: 100% !important;
  }

  html body.account-area #alMemberArea.al-tanks .al-tanks__overviewActions .al-btn,
  html body.account-area #alMemberArea .al-member-pagehead__actions .al-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  html body.account-area #alMemberArea:has(#alDash.al-dash--premium) {
    padding: 8px 8px 28px !important;
  }

  html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-dash__grid {
    gap: 10px !important;
  }

  html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--hero,
  html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--progress,
  html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--actions,
  html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--tanks,
  html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--continue,
  html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--saved,
  html body.account-area #alMemberArea:has(#alDash.al-dash--premium) #alDash.al-dash--premium .al-panel--activity {
    padding: 14px !important;
  }
}

@media (max-width: 640px) {
  body.account-area,
  body.account-area #alMemberArea {
    --almx-member-page-x: 8px;
    --almx-member-page-y: 8px;
    --almx-member-page-gap: 10px;
    --almx-member-card-gap: 10px;
    --almx-member-radius: 12px;
  }
}

/* ======================================================================
   Phase 6: Unified rail-to-frame member canvas

   One rail gap, one full-width page frame, compact frame padding.
   The frame is the shared canvas; cards keep their own inner spacing.
   ====================================================================== */

body.account-area {
  --al-member-rail-left: 0px;
  /* The navigation shell owns the live width. Keep the legacy member-system
     token as an alias so the high-specificity rail and Elementor slot rules
     collapse in lockstep with the visible navigation. */
  --al-member-rail-width: var(--al-rail-current-width, 260px);
  --al-member-shell-gap: 0px;
  --al-member-rail-pad-y: 10px;
  --al-member-rail-pad-x: 10px;
  --al-member-rail-profile-pad: 10px;
  --al-member-rail-profile-mb: 14px;
  --al-member-rail-item-h: 40px;
  --al-member-rail-item-pad-y: 8px;
  --al-member-rail-item-pad-x: 12px;
  --al-member-rail-item-gap: 10px;
  --al-member-rail-group-gap: 2px;
  --al-member-rail-divider-my: 8px;
  --al-member-rail-divider-mx: 6px;
  --al-member-rail-section-mt: 12px;
  --al-member-rail-section-mb: 6px;
  --al-member-frame-padding-x: 18px;
  --al-member-frame-padding-y: 16px;
  --al-member-frame-padding-bottom: 22px;
  --al-member-page-max-width: 1440px;
  --al-member-page-radius: 24px;
  --almx-rail-left: var(--al-member-rail-left);
  --almx-rail-w: var(--al-member-rail-width);
  --almx-shell-gap-desktop: var(--al-member-shell-gap);
  --almx-shell-gap-tablet: 22px;
  --almx-shell-gap: var(--al-member-shell-gap);
}

html body.account-area :is(#alRail, #Rail).al-sidebar.al-rail {
  left: var(--al-member-rail-left) !important;
  width: var(--al-member-rail-width) !important;
  max-width: var(--al-member-rail-width) !important;
}

@media (min-width: 1024px) {
  html body.account-area #content > .ast-container,
  html body.account-area .site-content > .ast-container,
  html body.account-area .ast-container:has(#alMemberArea) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body.account-area .elementor .e-con.e-parent:has(#alMemberArea),
  html body.account-area .elementor-section:has(#alMemberArea),
  html body.account-area .elementor-container:has(#alMemberArea) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    --gap: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
    --padding-top: 0px;
    --padding-bottom: 0px;
  }

  html body.account-area .e-con.e-parent:has(#alMemberArea)
  .elementor-widget-shortcode.elementor-hidden-tablet.elementor-hidden-mobile {
    flex-basis: calc(var(--al-member-rail-left) + var(--al-member-rail-width) + var(--al-member-shell-gap)) !important;
    width: calc(var(--al-member-rail-left) + var(--al-member-rail-width) + var(--al-member-shell-gap)) !important;
    min-width: calc(var(--al-member-rail-left) + var(--al-member-rail-width) + var(--al-member-shell-gap)) !important;
    max-width: calc(var(--al-member-rail-left) + var(--al-member-rail-width) + var(--al-member-shell-gap)) !important;
  }

  html body.account-area .elementor-widget-shortcode:has(#alMemberArea):not(.elementor-hidden-tablet) {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

html body.account-area #alMemberArea.al-member-main:not([hidden]),
html body.account-area #alMemberArea.al-member-main:not([hidden]):has(#alDash.al-dash--premium) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

html body.account-area #alMemberArea.al-member-main > .al-tanks-shell {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

html body.account-area #alMemberArea.al-member-main > .al-member-page-frame,
html body.account-area #alMemberArea.al-member-main > .al-tanks-shell > .al-member-page-frame {
  width: min(100%, var(--al-member-page-max-width)) !important;
  max-width: var(--al-member-page-max-width) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: var(--al-member-frame-padding-y) var(--al-member-frame-padding-x) var(--al-member-frame-padding-bottom) !important;
  border: 1px solid var(--al-member-page-border) !important;
  border-radius: var(--al-member-page-radius) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.28)),
    var(--al-member-page-bg) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

html body.account-area #alMemberArea.al-member-main > .al-member-page-frame {
  display: block !important;
}

html body.account-area #alMemberArea.al-member-main > .al-tanks-shell > .al-member-page-frame {
  display: grid !important;
  gap: 14px !important;
  align-content: start !important;
}

html body.account-area #alMemberArea.al-member-main > .al-member-page-frame > :first-child,
html body.account-area #alMemberArea.al-member-main > .al-tanks-shell > .al-member-page-frame > :first-child {
  margin-top: 0 !important;
}

html body.account-area #alMemberArea.al-member-main .al-member-page-frame > :is(#alDash, #alProfile, #alAchievements, #alAccount, #alSecurity, #alOrders, .al-pane, .al-settings, .al-tanks__overview) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

html body.account-area #alMemberArea.al-member-main .al-member-page-frame > #alDash.al-dash--premium {
  padding: 0 !important;
}

html body.account-area #alMemberArea.al-member-main .al-member-page-frame > #alAccount,
html body.account-area #alMemberArea.al-member-main .al-member-page-frame > .al-pane {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html body.account-area #alMemberArea.al-member-main .al-member-page-frame .al-member-pagehead {
  margin: 0 0 12px !important;
}

html body.account-area #alMemberArea.al-member-main .al-member-page-frame .al-card,
html body.account-area #alMemberArea.al-member-main .al-member-page-frame .al-panel,
html body.account-area #alMemberArea.al-member-main .al-member-page-frame .al-pane-card,
html body.account-area #alMemberArea.al-member-main .al-member-page-frame .al-achievements__sectionCard,
html body.account-area #alMemberArea.al-member-main .al-member-page-frame .al-tanksSurface,
html body.account-area #alMemberArea.al-member-main .al-member-page-frame .al-tankTile {
  max-width: 100% !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.account-area {
    --al-member-shell-gap: 0px;
    --al-member-frame-padding-x: 16px;
    --al-member-frame-padding-y: 14px;
    --al-member-frame-padding-bottom: 20px;
    --al-member-page-radius: 22px;
    --almx-shell-gap: 0px;
  }
}

@media (max-width: 1023px) {
  html body.account-area #content > .ast-container,
  html body.account-area .site-content > .ast-container,
  html body.account-area .ast-container:has(#alMemberArea),
  html body.account-area .elementor .e-con.e-parent:has(#alMemberArea),
  html body.account-area .elementor-widget-shortcode:has(#alMemberArea),
  html body.account-area .elementor-widget-container:has(#alMemberArea),
  html body.account-area .elementor-shortcode:has(#alMemberArea) {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body.account-area #alMemberArea.al-member-main > .al-member-page-frame,
  html body.account-area #alMemberArea.al-member-main > .al-tanks-shell > .al-member-page-frame {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 767px) {
  body.account-area {
    --al-member-shell-gap: 0px;
    --al-member-frame-padding-x: 11px;
    --al-member-frame-padding-y: 11px;
    --al-member-frame-padding-bottom: 16px;
    --al-member-page-radius: 18px;
    --almx-shell-gap: 0px;
  }

  html body.account-area #alMemberArea.al-member-main > .al-member-page-frame,
  html body.account-area #alMemberArea.al-member-main > .al-tanks-shell > .al-member-page-frame {
    border-radius: var(--al-member-page-radius) !important;
    padding: var(--al-member-frame-padding-y) var(--al-member-frame-padding-x) var(--al-member-frame-padding-bottom) !important;
  }

  html body.account-area #alMemberArea.al-member-main .al-member-page-frame .al-member-pagehead {
    margin-bottom: 10px !important;
  }
}

@media (max-width: 420px) {
  body.account-area {
    --al-member-frame-padding-x: 10px;
    --al-member-frame-padding-y: 10px;
    --al-member-frame-padding-bottom: 14px;
    --al-member-page-radius: 16px;
  }
}

/* Tanks overview follows the Saved rhythm: page head outside, cards standalone. */
html body.account-area #alMemberArea.al-tanks .al-tanks__overview {
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.account-area #alMemberArea.al-tanks .al-tanks__overviewHead.al-member-pagehead {
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.account-area #alMemberArea.al-tanks .al-tanks__overviewCard,
html body.account-area #alMemberArea.al-tanks .al-tanks__overviewCard > .al-card-body {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body.account-area #alMemberArea.al-tanks .al-tanks__overviewCard {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body.account-area #alMemberArea.al-tanks .al-tanks__overviewCard::before,
html body.account-area #alMemberArea.al-tanks .al-tanks__overviewCard::after {
  content: none !important;
  display: none !important;
}

html body.account-area #alMemberArea.al-tanks .al-tanks__overviewCard > .al-card-body {
  padding: 0 !important;
}

@media (max-width: 767px) {
  html body.account-area #alMemberArea.al-tanks .al-tanks__overview {
    gap: 10px !important;
  }

  html body.account-area #alMemberArea.al-tanks .al-tanks__overviewHead.al-member-pagehead {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}

/* Final member canvas color + Tanks overview polish. */
body.account-area {
  --al-member-canvas-bg: #f8fafb;
  --al-member-page-bg: var(--al-member-canvas-bg);
}

html body.account-area,
html body.account-area #page,
html body.account-area #content,
html body.account-area .site-content,
html body.account-area #content > .ast-container,
html body.account-area .site-content > .ast-container,
html body.account-area .ast-container:has(#alMemberArea),
html body.account-area .elementor:has(#alMemberArea),
html body.account-area .elementor .e-con.e-parent:has(#alMemberArea),
html body.account-area .elementor-widget-shortcode:has(#alMemberArea),
html .elementor-element.elementor-widget-shortcode:has(#alMemberArea.al-tanks),
html .elementor-element.elementor-element-019e92d.elementor-widget-shortcode:has(#alMemberArea.al-tanks),
html body.account-area .elementor-widget-container:has(#alMemberArea),
html body.account-area .elementor-shortcode:has(#alMemberArea),
html .elementor-shortcode:has(#alMemberArea.al-tanks),
html body.account-area #alMemberArea.al-member-main,
html body.account-area #alMemberArea.al-member-main > .al-tanks-shell {
  background: var(--al-member-canvas-bg) !important;
  background-image: none !important;
}

html body.account-area #alMemberArea.al-member-main > .al-member-page-frame,
html body.account-area #alMemberArea.al-member-main > .al-tanks-shell > .al-member-page-frame {
  background: var(--al-member-canvas-bg) !important;
  background-image: none !important;
}

html body.account-area #alMemberArea.al-tanks .al-tanks__overview {
  gap: 14px !important;
}

html body.account-area #alMemberArea.al-tanks .al-tanks__overviewSub {
  margin-bottom: 4px !important;
}

html body.account-area #alMemberArea.al-tanks .al-tanks__overviewCard,
html body.account-area #alMemberArea.al-tanks .al-tanks__overviewCard:hover,
html body.account-area #alMemberArea.al-tanks .al-tanks__overviewCard:focus-within,
html body.account-area #alMemberArea.al-tanks .al-tanks__overviewCard > .al-card-body,
html body.account-area #alMemberArea.al-tanks .al-tanks__overviewCard:hover > .al-card-body {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

html body.account-area #alMemberArea.al-tanks > .al-tanks-shell,
html body.account-area #alMemberArea.al-tanks .al-tanks-shell,
html body.account-area #alMemberArea.al-tanks .al-tanks-container.al-member-page-frame,
html body.account-area #alMemberArea.al-tanks > .al-tanks-shell > .al-tanks-container.al-member-page-frame,
html #alMemberArea.al-tanks,
html #alMemberArea.al-tanks > .al-tanks-shell,
html #alMemberArea.al-tanks .al-tanks-shell,
html #alMemberArea.al-tanks .al-tanks-container.al-member-page-frame,
html #alMemberArea.al-tanks > .al-tanks-shell > .al-tanks-container.al-member-page-frame {
  background-color: var(--al-member-canvas-bg, #f8fafb) !important;
  background: var(--al-member-canvas-bg, #f8fafb) !important;
  background-image: none !important;
}

html body.account-area #alMemberArea.al-tanks .al-tanks-shell::before,
html body.account-area #alMemberArea.al-tanks .al-tanks-shell::after,
html body.account-area #alMemberArea.al-tanks .al-tanks-container.al-member-page-frame::before,
html body.account-area #alMemberArea.al-tanks .al-tanks-container.al-member-page-frame::after,
html #alMemberArea.al-tanks .al-tanks-shell::before,
html #alMemberArea.al-tanks .al-tanks-shell::after,
html #alMemberArea.al-tanks .al-tanks-container.al-member-page-frame::before,
html #alMemberArea.al-tanks .al-tanks-container.al-member-page-frame::after {
  background: transparent !important;
  background-image: none !important;
}

/* Member app shell: dock rail, subnav, and content into one connected surface. */
body.account-area {
  --al-member-divider: rgba(15, 23, 42, .08);
  --al-member-muted: rgba(15, 23, 42, .45);
  --al-member-text: rgba(15, 23, 42, .88);
  --al-member-moss: var(--almx-color-moss, #2c6b4a);
  --al-member-moss-strong: var(--almx-color-brand-strong, #24543c);
  --al-member-moss-soft: color-mix(in srgb, var(--al-member-moss) 9%, #fff);
  --al-member-subnav-height: 58px;
  background: var(--al-member-canvas-bg, #f8fafb) !important;
}

html body.account-area .al-header-shell,
html body.account-area .site-header,
html body.account-area #masthead {
  background: #fff !important;
  border-bottom: 1px solid var(--al-member-divider) !important;
  box-shadow: none !important;
}

@media (min-width: 1024px) {
  html body.account-area :is(#alRail, #Rail).al-sidebar.al-rail {
    left: 0 !important;
    top: var(--al-member-shell-top-offset, 65px) !important;
    height: calc(100dvh - var(--al-member-shell-top-offset, 65px)) !important;
    max-height: calc(100dvh - var(--al-member-shell-top-offset, 65px)) !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: var(--al-member-rail-pad-y, 12px) var(--al-member-rail-pad-x, 10px) !important;
    overflow: visible !important;
    background: #fff !important;
    border: 0 !important;
    border-right: 1px solid var(--al-member-divider) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body.account-area :is(#alRail, #Rail).al-sidebar.al-rail *,
  html body.account-area aside.al-sidebar.al-rail * {
    box-sizing: border-box !important;
  }

  html body.account-area :is(#alRail, #Rail).al-sidebar.al-rail .al-rail-user,
  html body.account-area aside.al-sidebar.al-rail .al-rail-user {
    padding: var(--al-member-rail-profile-pad, 10px) !important;
    margin-bottom: var(--al-member-rail-profile-mb, 14px) !important;
  }

  html body.account-area :is(#alRail, #Rail).al-sidebar.al-rail :is(.al-side-list, .al-rail-full),
  html body.account-area aside.al-sidebar.al-rail :is(.al-side-list, .al-rail-full) {
    gap: var(--al-member-rail-group-gap, 3px) !important;
  }

  html body.account-area :is(#alRail, #Rail).al-sidebar.al-rail .al-side-link,
  html body.account-area aside.al-sidebar.al-rail .al-side-link {
    gap: var(--al-member-rail-item-gap, 10px) !important;
    min-height: var(--al-member-rail-item-h, 42px) !important;
    padding: var(--al-member-rail-item-pad-y, 8px) var(--al-member-rail-item-pad-x, 12px) !important;
    border-radius: 12px !important;
  }

  html body.account-area :is(#alRail, #Rail).al-sidebar.al-rail .al-divider,
  html body.account-area aside.al-sidebar.al-rail .al-divider {
    margin: var(--al-member-rail-divider-my, 10px) var(--al-member-rail-divider-mx, 6px) !important;
  }

  html body.account-area :is(#alRail, #Rail).al-sidebar.al-rail .al-side-section-label,
  html body.account-area aside.al-sidebar.al-rail .al-side-section-label {
    margin: var(--al-member-rail-section-mt, 14px) 8px var(--al-member-rail-section-mb, 7px) !important;
  }
}

html body.account-area #alMemberArea.al-member-main > .al-member-page-frame,
html body.account-area #alMemberArea.al-member-main > .al-tanks-shell > .al-member-page-frame {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--al-member-canvas-bg, #f8fafb) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.account-area .elementor-widget-shortcode:has(#alMemberArea),
html body.account-area .elementor-widget-container:has(#alMemberArea),
html body.account-area .elementor-shortcode:has(#alMemberArea),
html body.account-area #alMemberArea,
html body.account-area #alMemberArea.al-member-main,
html body.account-area #alMemberArea.al-member-main > .al-tanks-shell {
  overflow: visible !important;
  contain: none !important;
}

html body.account-area #alMemberArea .al-member-subnav,
html body.account-area #alMemberArea #alSavedTabs.al-context-nav.al-member-subnav,
html body.account-area #alMemberArea.al-tanks .al-context-nav--tank.al-member-subnav {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: calc(100vw - var(--al-member-rail-width, 260px)) !important;
  max-width: none !important;
  min-height: var(--al-member-subnav-height) !important;
  margin: calc(-1 * var(--al-member-frame-padding-y, 16px)) 0 16px calc(-1 * var(--al-member-frame-padding-x, 18px)) !important;
  padding: 0 clamp(16px, 2vw, 36px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--al-member-divider) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

html body.account-area #alMemberArea .al-member-subnav::-webkit-scrollbar {
  display: none !important;
}

html body.account-area #alMemberArea .al-member-subnav__context,
html body.account-area #alMemberArea .al-member-subnav__divider {
  display: none !important;
}

html body.account-area #alMemberArea .al-member-subnav__divider {
  display: none !important;
}

html body.account-area #alMemberArea .al-member-subnav__list,
html body.account-area #alMemberArea #alSavedTabs.al-context-nav .al-member-subnav__list,
html body.account-area #alMemberArea.al-tanks .al-context-nav--tank .al-member-subnav__list {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  gap: 4px !important;
  min-width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.account-area #alMemberArea #alSavedTabs.al-context-nav.al-member-subnav .al-member-subnav__list,
html body.account-area #alMemberArea.al-tanks .al-context-nav--tank.al-member-subnav .al-member-subnav__list {
  width: 100% !important;
}

html body.account-area #alMemberArea .al-member-subnav__link,
html body.account-area #alMemberArea #alSavedTabs.al-context-nav .al-member-subnav__link,
html body.account-area #alMemberArea.al-tanks .al-context-nav--tank .al-member-subnav__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-height: 34px !important;
  padding: 8px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--al-member-text) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transform: none !important;
}

html body.account-area #alMemberArea .al-member-subnav__link:hover,
html body.account-area #alMemberArea .al-member-subnav__link:focus-visible {
  background: rgba(15, 23, 42, .035) !important;
  border-color: rgba(15, 23, 42, .06) !important;
  color: rgba(15, 23, 42, .96) !important;
  outline: 0 !important;
}

html body.account-area #alMemberArea .al-member-subnav__link.is-active,
html body.account-area #alMemberArea .al-member-subnav__link[aria-selected="true"],
html body.account-area #alMemberArea .al-member-subnav__link[aria-current="page"] {
  background: var(--al-member-moss-soft) !important;
  border-color: color-mix(in srgb, var(--al-member-moss) 22%, transparent) !important;
  color: var(--al-member-moss-strong) !important;
  box-shadow: none !important;
  font-weight: 760 !important;
}

html body.account-area #alMemberArea .al-member-subnav__link::before,
html body.account-area #alMemberArea .al-member-subnav__link::after {
  content: none !important;
  display: none !important;
}

html body.account-area #alMemberArea.al-tanks .al-tankAppNavLayer,
html body.account-area #alMemberArea.al-tanks .al-tankAppNavInner,
html body.account-area #alMemberArea.al-tanks .al-tankNav {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body.account-area #alMemberArea.al-tanks.is-detail .al-context-nav--tank.al-member-subnav {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 1 !important;
  width: calc(100vw - var(--al-member-rail-width, 260px)) !important;
  max-width: none !important;
  margin: calc(-1 * var(--al-member-frame-padding-y, 16px)) 0 16px calc(-1 * var(--al-member-frame-padding-x, 18px)) !important;
  border-bottom: 1px solid var(--al-member-divider, rgba(15,23,42,.08)) !important;
  box-shadow: none !important;
}

html body.account-area #alMemberArea #alSavedTabs.al-context-nav.al-member-subnav {
  margin-top: 0 !important;
}

html body.account-area #alMemberArea.al-tanks.is-detail .al-tankNav__secondary.al-subtabs {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body.account-area #alMemberArea.al-tanks .al-tankNav__secondary.al-subtabs {
  margin-top: 0 !important;
}

@media (max-width: 1023px) {
  html body.account-area #alMemberArea .al-member-subnav,
  html body.account-area #alMemberArea #alSavedTabs.al-context-nav.al-member-subnav,
  html body.account-area #alMemberArea.al-tanks .al-context-nav--tank.al-member-subnav {
    width: 100vw !important;
    min-height: 50px !important;
    margin: calc(-1 * var(--al-member-frame-padding-y, 11px)) 0 12px calc(-1 * var(--al-member-frame-padding-x, 11px)) !important;
    padding: 0 clamp(10px, 3.5vw, 18px) !important;
    gap: 8px !important;
  }

  html body.account-area #alMemberArea #alSavedTabs.al-context-nav.al-member-subnav {
    margin-left: calc(50% - 50vw) !important;
    margin-top: 0 !important;
  }

  html body.account-area #alMemberArea .al-member-subnav__context,
  html body.account-area #alMemberArea .al-member-subnav__divider {
    display: none !important;
  }

  html body.account-area #alMemberArea .al-member-subnav__link {
    min-height: 32px !important;
    padding: 7px 10px !important;
    font-size: 12.5px !important;
  }

  html body.account-area #alMemberArea.al-tanks.is-detail .al-context-nav--tank.al-member-subnav {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100vw !important;
    margin: calc(-1 * var(--al-member-frame-padding-y, 11px)) 0 12px calc(50% - 50vw) !important;
  }
}

@media (max-width: 520px) {
  html body.account-area #alMemberArea .al-member-subnav {
    scroll-padding-left: var(--al-member-frame-padding-x, 10px) !important;
  }

  html body.account-area #alMemberArea .al-member-subnav__context {
    display: none !important;
  }
}

/* Final Elementor shell docking: remove outer container padding above the app shell. */
html body.account-area .elementor-element.elementor-element-5598c56.e-con-full.e-flex.e-con.e-parent,
html body.account-area .elementor-element.e-con-full.e-flex.e-con.e-parent:has(#alRail),
html body.account-area .elementor-element.e-con-full.e-flex.e-con.e-parent:has(#Rail),
html body.account-area .elementor-element.e-con-full.e-flex.e-con.e-parent:has(#alMemberArea) {
  --padding-top: 0px !important;
  --padding-block-start: 0px !important;
  --container-default-padding-top: 0px !important;
  padding-top: 0 !important;
  padding-block-start: 0 !important;
}

@media (max-width: 767px) {
  html body.account-area:has(#alMemberArea) .elementor-element.elementor-element-6b8a317.e-con-full.e-flex.e-con.e-parent,
  html body.account-area:has(#alMemberArea) .elementor-element.elementor-element-6b8a317.e-con-full.e-con.e-parent,
  html body.account-area .elementor-element.elementor-element-6b8a317.e-con-full.e-flex.e-con.e-parent:has(#alMemberArea),
  html body.account-area .elementor-element.elementor-element-6b8a317.e-con-full.e-con.e-parent:has(#alMemberArea) {
    --padding-left: 0px !important;
    --padding-right: 0px !important;
    --padding-inline-start: 0px !important;
    --padding-inline-end: 0px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }
}

/* ======================================================================
   Phase 7: Unified desktop member content width

   The fixed rail stays responsible for navigation. This layer only defines
   the content frame and responsive grids that sit to the right of it.
   ====================================================================== */

body.account-area {
  --al-member-content-max-width: 1440px;
  --al-member-content-padding-x: clamp(16px, 1.45vw, 28px);
  --al-member-content-gap: clamp(14px, 1.15vw, 20px);
  --al-member-frame-padding-y: clamp(14px, 1.05vw, 20px);
  --al-member-frame-padding-bottom: clamp(22px, 1.75vw, 34px);
  --al-member-card-grid-min: 280px;
  --al-member-shell-width: min(100%, var(--al-member-content-max-width));

  --al-member-page-max-width: var(--al-member-content-max-width);
  --al-member-frame-padding-x: var(--al-member-content-padding-x);

  --almx-content-max: var(--al-member-content-max-width);
  --almx-shell-max: var(--al-member-content-max-width);
  --almx-member-content-max: var(--al-member-content-max-width);
  --almx-member-page-x: var(--al-member-content-padding-x);
  --almx-member-page-y: var(--al-member-frame-padding-y);
  --almx-member-page-gap: var(--al-member-content-gap);
  --almx-member-card-gap: var(--al-member-content-gap);
  --almx-member-card-pad: clamp(16px, 1.35vw, 22px);
}

@media (min-width: 1024px) {
  /* The rail already removes its width from #content; the shared frame owns
     the workspace's horizontal padding, so no one-sided outer gutter remains. */
  html body.account-area #content:has(#alMemberArea) {
    padding-right: 0 !important;
  }
}

html body.account-area #alMemberArea {
  --al-content-max: var(--al-member-content-max-width) !important;
  --almx-content-max: var(--al-member-content-max-width) !important;
  --almx-shell-max: var(--al-member-content-max-width) !important;
  --almx-member-content-max: var(--al-member-content-max-width) !important;
}

html body.account-area #alMemberArea.al-member-main > .al-member-page-frame,
html body.account-area #alMemberArea.al-member-main > .al-tanks-shell > .al-member-page-frame {
  width: var(--al-member-shell-width) !important;
  max-width: var(--al-member-content-max-width) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: var(--al-member-frame-padding-y) var(--al-member-content-padding-x) var(--al-member-frame-padding-bottom) !important;
}

@media (min-width: 1024px) {
  /* Aquarium OS and the owner profile each have a more specific frame rule. */
  html body.account-area #alMemberArea.al-tanks.is-owner.al-member-main .al-tanks-shell > .al-tanks-container.al-member-page-frame,
  html body.account-area.alpp-owner-profile-route #alMemberArea.alpp-shell--owner > .al-tanks-shell > .al-member-page-frame {
    width: var(--al-member-shell-width) !important;
    max-width: var(--al-member-content-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Aquarium detail also caps its intermediate shell. */
  html body.account-area #alMemberArea.al-tanks.is-owner.al-member-main > .al-tanks-shell {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

html body.account-area #alMemberArea.al-member-main .al-member-page-frame > :is(#alDash, #alProfile, #alAchievements, #alAccount, #alSecurity, #alOrders, .al-pane, .al-settings, .al-tanks__overview) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

html body.account-area #alMemberArea.al-member-main .al-member-page-frame > #alAccount {
  padding: 0 !important;
}

html body.account-area #alMemberArea.al-member-main .al-member-page-frame .al-account-grid,
html body.account-area #alMemberArea.al-member-main .al-member-page-frame .al-security-grid,
html body.account-area #alMemberArea.al-member-main .al-member-page-frame .al-orders-grid,
html body.account-area #alMemberArea.al-member-main .al-member-page-frame .al-achievements__meta-row,
html body.account-area #alMemberArea.al-member-main .al-member-page-frame .al-achievements__stats,
html body.account-area #alMemberArea.al-member-main .al-member-page-frame .al-goal-group__grid,
html body.account-area #alMemberArea.al-member-main .al-member-page-frame .al-badge-grid,
html body.account-area #alMemberArea.al-member-main .al-member-page-frame #alSavedGrid.al-grid,
html body.account-area #alMemberArea.al-tanks .al-member-page-frame .al-tanks__grid,
html body.account-area #alMemberArea.al-tanks .al-member-page-frame .al-tanks__grid--enhanced {
  gap: var(--al-member-content-gap) !important;
}

/* Owner /u/{slug}: the shared member shell already reserves the live rail width
   through #content. Do not reserve it a second time inside the profile template,
   otherwise the profile sits one rail-width too far right in both rail states. */
@media (min-width: 1024px) {
  html body.account-area.alpp-owner-profile-route #primary.site-main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html body.account-area.alpp-owner-profile-route #content,
  html body.account-area.alpp-owner-profile-route .site-content,
  html body.account-area.alpp-owner-profile-route .ast-container {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  html body.account-area.alpp-owner-profile-route .al-owner-member-shell {
    display: block !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html body.account-area.alpp-owner-profile-route .al-owner-member-shell__rail-slot {
    display: none !important;
  }

  html body.account-area.alpp-owner-profile-route .al-owner-member-shell__content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 1023px) {
  html body.account-area.alpp-owner-profile-route .al-owner-member-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html body.account-area.alpp-owner-profile-route .al-owner-member-shell__rail-slot {
    display: none !important;
  }
}

@media (min-width: 1180px) {
  html body.account-area #alMemberArea.al-member-main .al-member-page-frame #alSavedGrid.al-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--al-member-card-grid-min)), 1fr)) !important;
    align-items: start !important;
  }

  html body.account-area #alMemberArea.al-member-main .al-member-page-frame #alAchievements :is(.al-badge-grid, .al-badge-results__grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--al-member-card-grid-min)), 1fr)) !important;
  }
}

@media (min-width: 760px) {
  html body.account-area #alMemberArea.al-member-main .al-member-page-frame #alSavedGrid.al-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--al-member-card-grid-min)), 1fr)) !important;
    align-items: start !important;
  }

  html body.account-area #alMemberArea.al-member-main .al-member-page-frame #alSavedGrid.al-grid > .al-saved-card {
    align-self: start !important;
  }

  html body.account-area #alMemberArea.al-member-main .al-member-page-frame #alSavedGrid.al-grid > .al-saved-card .al-thumb {
    max-height: clamp(200px, 18vw, 260px) !important;
  }
}

@media (min-width: 641px) {
  html body.account-area #alMemberArea.al-member-main .al-member-page-frame #alSavedGrid.al-grid > .al-saved-card:only-child {
    width: min(100%, 360px) !important;
    justify-self: start !important;
  }
}

@media (min-width: 1280px) {
  html body.account-area #alMemberArea.al-member-main .al-member-page-frame #alAchievements .al-goal-group__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--al-member-card-grid-min) + 20px)), 1fr)) !important;
  }

  html body.account-area #alMemberArea.al-tanks:not(.is-detail) .al-member-page-frame .al-tanks__grid,
  html body.account-area #alMemberArea.al-tanks:not(.is-detail) .al-member-page-frame .al-tanks__grid--enhanced {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--al-member-card-grid-min) + 44px)), 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  html body.account-area #alMemberArea.al-member-main .al-member-page-frame .al-security-pane .al-sec-form,
  html body.account-area #alMemberArea.al-member-main .al-member-page-frame .al-account-pane :is(.al-input, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    max-width: 760px !important;
  }
}

@media (max-width: 1023px) {
  body.account-area {
    --al-member-content-max-width: none;
    --al-member-content-padding-x: 16px;
    --al-member-content-gap: 12px;
    --al-member-shell-width: 100%;
    --al-member-frame-padding-x: 16px;
    --al-member-frame-padding-y: 14px;
    --al-member-frame-padding-bottom: 20px;

    --almx-member-page-x: var(--al-member-content-padding-x);
    --almx-member-page-y: var(--al-member-frame-padding-y);
    --almx-member-page-gap: var(--al-member-content-gap);
    --almx-member-card-gap: var(--al-member-content-gap);
  }

  html body.account-area #alMemberArea.al-member-main > .al-member-page-frame,
  html body.account-area #alMemberArea.al-member-main > .al-tanks-shell > .al-member-page-frame {
    width: 100% !important;
    max-width: none !important;
    padding: var(--al-member-frame-padding-y) var(--al-member-frame-padding-x) var(--al-member-frame-padding-bottom) !important;
  }
}

@media (max-width: 767px) {
  body.account-area {
    --al-member-content-padding-x: 11px;
    --al-member-content-gap: 10px;
    --al-member-frame-padding-x: 11px;
    --al-member-frame-padding-y: 11px;
    --al-member-frame-padding-bottom: 16px;
  }
}

@media (max-width: 420px) {
  body.account-area {
    --al-member-content-padding-x: 10px;
    --al-member-frame-padding-x: 10px;
    --al-member-frame-padding-y: 10px;
    --al-member-frame-padding-bottom: 14px;
  }
}

/* Final Aquarium OS mobile subnav dock. Mirrors Saved's sticky header offset and wins load-order races. */
@media (max-width: 782px) {
  html body.account-area .elementor-widget-shortcode:has(#alMemberArea.al-tanks.is-owner.is-detail),
  html body.account-area .elementor-widget-container:has(#alMemberArea.al-tanks.is-owner.is-detail),
  html body.account-area .elementor-shortcode:has(#alMemberArea.al-tanks.is-owner.is-detail),
  html body.account-area #alMemberArea.al-tanks.is-owner.is-detail {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-block-start: 0 !important;
    top: 0 !important;
  }

  html body.account-area #alMemberArea.al-tanks.is-owner.is-detail > .al-tankNav__primary.al-context-nav--tank.al-member-subnav {
    position: sticky !important;
    top: calc(var(--al-header-h, var(--almx-header-h, 60px)) + env(safe-area-inset-top, 0px)) !important;
    transform: none !important;
    z-index: 120 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 50px !important;
    /* The header spacer already establishes the correct first-flow position. */
    margin: 0 0 12px calc(50% - 50vw) !important;
    padding: 0 max(12px, env(safe-area-inset-left, 0px)) 0 max(18px, env(safe-area-inset-right, 0px)) !important;
    border-top: 1px solid rgba(15, 23, 42, .045) !important;
    border-bottom: 1px solid var(--al-member-divider, rgba(15, 23, 42, .08)) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    scroll-padding-inline: max(12px, env(safe-area-inset-left, 0px)) !important;
    overflow-y: visible !important;
  }

  html body.account-area #alMemberArea.al-tanks.is-owner.is-detail > .al-tankNav__primary.al-context-nav--tank.al-member-subnav .al-member-subnav__link {
    min-height: 32px !important;
    padding: 6px 10px !important;
    border-radius: 20px !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
  }

  html body.account-area #alMemberArea.al-tanks.is-owner.is-detail > .al-tankNav__primary.al-context-nav--tank.al-member-subnav .al-member-subnav__link.is-active,
  html body.account-area #alMemberArea.al-tanks.is-owner.is-detail > .al-tankNav__primary.al-context-nav--tank.al-member-subnav .al-member-subnav__link[aria-selected="true"] {
    min-height: 32px !important;
    padding: 6px 11px !important;
    border-radius: 20px !important;
  }
}

/* Desktop member subnav contract: align Saved with Aquarium detail and keep
   both controls available below the fixed global header while scrolling. */
@media (min-width: 1024px) {
  html body.account-area #alMemberArea #alSavedTabs.al-context-nav.al-member-subnav {
    position: sticky !important;
    /* The visible account header is 65px tall even when the legacy token is
       still 60px. Dock below the actual edge so the centered tab row is not
       partially covered by the header. */
    top: max(65px, calc(var(--al-header-h, var(--almx-header-h, 60px)) + env(safe-area-inset-top, 0px))) !important;
    z-index: 120 !important;
    width: calc(100vw - var(--al-member-rail-width, 260px)) !important;
    max-width: calc(100vw - var(--al-member-rail-width, 260px)) !important;
    min-width: 0 !important;
    margin: calc(-1 * var(--al-member-frame-padding-y, 16px)) 0 16px calc(-1 * var(--al-member-frame-padding-x, 18px)) !important;
    padding: 0 clamp(16px, 2vw, 36px) !important;
    box-sizing: border-box !important;
    align-items: center !important;
    height: var(--al-member-subnav-height, 58px) !important;
    min-height: var(--al-member-subnav-height, 58px) !important;
  }
}

/* At tablet widths the rail is absent, so the subnav must use the complete
   viewport rather than subtracting the desktop rail width. */
@media (max-width: 1023px) {
  html body.account-area #alMemberArea #alSavedTabs.al-context-nav.al-member-subnav {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    position: sticky !important;
    top: max(65px, calc(var(--al-header-h, var(--almx-header-h, 60px)) + env(safe-area-inset-top, 0px))) !important;
    z-index: 120 !important;
    margin-top: calc(-1 * var(--al-member-frame-padding-y, 14px)) !important;
    margin-bottom: 16px !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    align-items: center !important;
    height: var(--al-member-subnav-height, 58px) !important;
    min-height: var(--al-member-subnav-height, 58px) !important;
  }
}

/* Phone header uses the compact 60px rhythm; do not reserve the desktop
   header's extra visual edge there. This stays last to win the final Saved
   docking rule above. */
@media (max-width: 782px) {
  html body.account-area #alMemberArea #alSavedTabs.al-context-nav.al-member-subnav {
    top: calc(var(--al-header-h, var(--almx-header-h, 60px)) + env(safe-area-inset-top, 0px)) !important;
  }
}

/* Shared local-navigation language for member contexts. Individual pages only
   supply their placement; this component owns the restrained underline state. */
html body.account-area #alMemberArea .al-member-underline-tabs {
  border: 0 !important;
  border-bottom: 1px solid var(--al-member-divider, rgba(15,23,42,.08)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.account-area #alMemberArea .al-member-underline-tabs .al-member-subnav__link,
html body.account-area #alMemberArea .al-member-underline-tabs [role="tab"],
html body.account-area #alMemberArea .al-member-underline-tabs button {
  position: relative !important;
  min-height: 38px !important;
  padding: 8px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--al-member-muted, rgba(15,23,42,.64)) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.1 !important;
}

html body.account-area #alMemberArea .al-member-underline-tabs .al-member-subnav__link::after,
html body.account-area #alMemberArea .al-member-underline-tabs [role="tab"]::after,
html body.account-area #alMemberArea .al-member-underline-tabs button::after {
  position: absolute !important;
  right: 0 !important;
  bottom: -1px !important;
  left: 0 !important;
  display: block !important;
  height: 2px !important;
  border-radius: 999px 999px 0 0 !important;
  background: var(--al-member-moss, #2c6b4a) !important;
  content: "" !important;
  opacity: 0 !important;
  transform: scaleX(.55) !important;
  transition: opacity 140ms ease, transform 140ms ease !important;
}

html body.account-area #alMemberArea .al-member-underline-tabs .al-member-subnav__link:is(.is-active,[aria-selected="true"],[aria-current="page"]),
html body.account-area #alMemberArea .al-member-underline-tabs [role="tab"][aria-selected="true"],
html body.account-area #alMemberArea .al-member-underline-tabs button:is(.is-active,[aria-current="page"]) {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--al-member-moss-strong, #24543c) !important;
  font-weight: 700 !important;
}

html body.account-area #alMemberArea .al-member-underline-tabs .al-member-subnav__link:is(.is-active,[aria-selected="true"],[aria-current="page"])::after,
html body.account-area #alMemberArea .al-member-underline-tabs [role="tab"][aria-selected="true"]::after,
html body.account-area #alMemberArea .al-member-underline-tabs button:is(.is-active,[aria-current="page"])::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

html body.account-area #alMemberArea .al-member-underline-tabs .al-member-subnav__link:hover,
html body.account-area #alMemberArea .al-member-underline-tabs [role="tab"]:hover,
html body.account-area #alMemberArea .al-member-underline-tabs button:hover {
  background: transparent !important;
  color: var(--al-member-text, rgba(15,23,42,.88)) !important;
}

html body.account-area #alMemberArea .al-member-underline-tabs .al-member-subnav__link:focus-visible,
html body.account-area #alMemberArea .al-member-underline-tabs [role="tab"]:focus-visible,
html body.account-area #alMemberArea .al-member-underline-tabs button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--al-member-moss, #2c6b4a) 48%, transparent) !important;
  outline-offset: 2px !important;
}

/* End of delivery group. */