/* Bexgram product system. Keep semantic values here, including legacy aliases. */
html:root {
  --bex-brand: #007A5A;
  --bex-brand-hover: #006B50;
  --bex-brand-soft: #E6F7F2;
  --bex-bg: #F3F7F9;
  --bex-surface: #ffffff;
  --bex-surface-muted: #EDF4F7;
  --bex-app-header: #F7FAFC;
  --bex-chat-canvas: #EAF1F2;
  --bex-message-in: #FFFFFF;
  --bex-message-out: #D8F7E8;
  --bex-interactive-soft: rgb(0 122 90 / 7%);
  --bex-text: #10232D;
  --bex-muted: #526B78;
  --bex-border: #DCE7EC;
  --bex-danger: #C92A42;
  --bex-danger-soft: #FDE8EC;
  --bex-success: #078553;
  --bex-warning: #B65F00;
  --bex-info: #1769C2;
  --bex-accent-blue: #1877F2;
  --bex-accent-violet: #7C3AED;
  --bex-accent-amber: #D97706;
  --bex-accent-rose: #E11D48;
  --bex-on-brand: #ffffff;
  --bex-on-danger: #ffffff;
  --bex-on-info: #ffffff;
  --bex-on-warning: #ffffff;
  --bex-radius: 12px;
  --bex-radius-sm: 8px;
  --bex-radius-lg: 18px;
  --bex-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --bex-shadow-overlay: 0 16px 56px rgb(12 32 28 / 18%);
  --bex-space-1: 4px;
  --bex-space-2: 8px;
  --bex-space-3: 12px;
  --bex-space-4: 16px;
  --bex-space-5: 20px;
  --bex-space-6: 24px;
  --bex-space-8: 32px;
  --bex-space-12: 48px;
  --bex-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bex-text-xs: .8125rem;
  --bex-text-sm: .875rem;
  --bex-text-base: .9375rem;
  --bex-text-lg: 1.125rem;
  --bex-text-title: clamp(1.5rem, 1.15rem + 1vw, 2rem);
  --bex-content-width: 1120px;
  --bex-reading-width: 760px;
  --bex-rail-w: 64px;
  --bex-motion: 160ms;
}
html:root.dark, html:root[data-theme="dark"] {
  --bex-brand: #2CE6A0;
  --bex-brand-hover: #53F0B5;
  --bex-brand-soft: #123F38;
  --bex-bg: #0B141A;
  --bex-surface: #111B21;
  --bex-surface-muted: #202C33;
  --bex-app-header: #102630;
  --bex-chat-canvas: #081720;
  --bex-message-in: #102630;
  --bex-message-out: #0B5946;
  --bex-interactive-soft: rgb(44 230 160 / 9%);
  --bex-text: #F1F7FA;
  --bex-muted: #A3B4BE;
  --bex-border: #222E35;
  --bex-danger: #FB7185;
  --bex-danger-soft: #481F2A;
  --bex-success: #34D399;
  --bex-warning: #FBBF24;
  --bex-info: #60A5FA;
  --bex-accent-blue: #38BDF8;
  --bex-accent-violet: #A78BFA;
  --bex-accent-amber: #FBBF24;
  --bex-accent-rose: #FB7185;
  --bex-on-brand: #032117;
  --bex-on-danger: #2A0912;
  --bex-on-info: #061D34;
  --bex-on-warning: #2A1900;
  --bex-shadow: 0 8px 28px rgb(0 0 0 / 26%);
}
/* Old templates consume these names. One bridge prevents page-specific palettes. */
html:root, html:root body.bex-wa, html:root body.bex-admin-page {
  --color-primary: var(--bex-brand) !important;
  --color-text: var(--bex-text) !important;
  --color-muted: var(--bex-muted) !important;
  --color-success: var(--bex-success) !important;
  --color-error: var(--bex-danger) !important;
  --color-danger: var(--bex-danger) !important;
  --color-warning: var(--bex-warning) !important;
  --color-info: var(--bex-info) !important;
  --bex-primary: var(--bex-brand) !important;
  --bex-primary-hover: var(--bex-brand-hover) !important;
  --bex-primary-dark: var(--bex-brand-hover) !important;
  --bex-accent: var(--bex-brand) !important;
  --bex-header: var(--bex-app-header) !important;
  --bex-text-main: var(--bex-text) !important;
  --bex-text-sub: var(--bex-muted) !important;
  --bex-text-secondary: var(--bex-muted) !important;
  --bex-text-muted: var(--bex-muted) !important;
  --bex-surface-secondary: var(--bex-surface-muted) !important;
  --bex-hover: var(--bex-interactive-soft) !important;
  --bex-selected: var(--bex-brand-soft) !important;
  --bex-incoming: var(--bex-message-in) !important;
  --bex-outgoing: var(--bex-message-out) !important;
  --bex-bubble-in: var(--bex-message-in) !important;
  --bex-bubble-out: var(--bex-message-out) !important;
  --bex-chat-bg: var(--bex-chat-canvas) !important;
  --bex-page: var(--bex-bg) !important;
  --bex-soft: var(--bex-surface-muted) !important;
  --wa-primary: var(--bex-brand) !important;
  --wa-primary-ink: var(--bex-on-brand) !important;
  --wa-green: var(--bex-brand) !important;
  --wa-green-deep: var(--bex-brand) !important;
  --wa-green-ink: var(--bex-brand) !important;
  --wa-green-soft: var(--bex-brand-soft) !important;
  --wa-bg: var(--bex-bg) !important;
  --wa-surface: var(--bex-surface) !important;
  --wa-sidebar: var(--bex-surface) !important;
  --wa-card-bg: var(--bex-surface) !important;
  --wa-rail: var(--bex-surface) !important;
  --wa-header: var(--bex-app-header) !important;
  --wa-bar: var(--bex-app-header) !important;
  --wa-welcome: var(--bex-bg) !important;
  --wa-chat: var(--bex-chat-canvas) !important;
  --wa-search: var(--bex-surface-muted) !important;
  --wa-input-bg: var(--bex-surface-muted) !important;
  --wa-text: var(--bex-text) !important;
  --wa-muted: var(--bex-muted) !important;
  --wa-text-secondary: var(--bex-muted) !important;
  --wa-icon: var(--bex-muted) !important;
  --wa-faint: var(--bex-muted) !important;
  --wa-line: var(--bex-border) !important;
  --wa-hover: var(--bex-interactive-soft) !important;
  --wa-selected: var(--bex-brand-soft) !important;
  --wa-menu-hover: var(--bex-brand-soft) !important;
  --wa-outgoing: var(--bex-message-out) !important;
  --wa-incoming: var(--bex-message-in) !important;
  --wa-bubble-out: var(--bex-message-out) !important;
  --wa-bubble-in: var(--bex-message-in) !important;
  --wa-shadow: var(--bex-shadow) !important;
  --wa-shadow-lg: var(--bex-shadow-overlay) !important;
  --wa-font: var(--bex-font) !important;
  --bg-primary: var(--bex-bg) !important;
  --surface-primary: var(--bex-surface) !important;
  --text-primary: var(--bex-text) !important;
  --text-secondary: var(--bex-muted) !important;
  --accent-primary: var(--bex-brand) !important;
  --border-primary: var(--bex-border) !important;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--bex-font); text-rendering: optimizeLegibility; }
html body.bex-wa { color: var(--bex-text); background: var(--bex-bg); font-family: var(--bex-font) !important; font-size: var(--bex-text-base) !important; line-height: 1.6; }
.bex-global-header .bex-brand-name { font-family: var(--bex-font) !important; }
html.dark body.bex-wa { color: var(--bex-text) !important; background-color: var(--bex-bg) !important; }
img, video, canvas { max-width: 100%; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button:disabled, [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
:where(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--bex-brand) !important; outline-offset: 3px;
}
[hidden] { display: none !important; }
.bex-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.bex-skip-link { position: fixed; inset: 8px auto auto 8px; z-index: 100100; padding: 12px 20px; border-radius: var(--bex-radius-sm); background: var(--bex-brand); color: var(--bex-on-brand); transform: translateY(-160%); }
.bex-skip-link:focus { transform: translateY(0); }
.bex-btn, .bex-btn-primary, .bex-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border: 1px solid transparent;
  border-radius: var(--bex-radius-sm); font-size: var(--bex-text-sm); font-weight: 600;
  line-height: 1.4; text-decoration: none; cursor: pointer;
  transition: background-color var(--bex-motion), border-color var(--bex-motion);
}
.bex-btn, .bex-btn-primary { background: var(--bex-brand); color: var(--bex-on-brand); }
.bex-btn:hover, .bex-btn-primary:hover { background: var(--bex-brand-hover); }
.bex-btn-secondary { background: var(--bex-surface); border-color: var(--bex-border); color: var(--bex-text); }
.bex-btn-secondary:hover { background: var(--bex-surface-muted); }
.bex-btn-danger { background: var(--bex-danger); color: var(--bex-surface); }
.bex-icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: var(--bex-radius-sm); background: transparent; color: var(--bex-muted); border: 0; }
.bex-icon-button:hover { background: var(--bex-surface-muted); color: var(--bex-text); }
.bex-card, .bex-surface-card { background: var(--bex-surface); border: 1px solid var(--bex-border); border-radius: var(--bex-radius); box-shadow: none; }
.bex-label { display: block; color: var(--bex-text); font-size: var(--bex-text-sm) !important; line-height: 1.5; font-weight: 600; margin-bottom: 8px; }
.bex-input, .bex-select, .bex-textarea {
  width: 100%; min-width: 0; min-height: 46px; padding: 11px 14px;
  border: 1px solid var(--bex-border); border-radius: var(--bex-radius-sm);
  background: var(--bex-surface); color: var(--bex-text); line-height: 1.5;
}
.bex-input::placeholder, .bex-textarea::placeholder { color: var(--bex-muted); opacity: 1; }
.bex-input[aria-invalid="true"], .bex-textarea[aria-invalid="true"] { border-color: var(--bex-danger); }
.bex-field-error { display: block; margin-top: 6px; color: var(--bex-danger); font-size: var(--bex-text-sm); }
.bex-field-hint { display: block; margin-top: 6px; color: var(--bex-muted); font-size: var(--bex-text-sm); }
input:is([type="checkbox"], [type="radio"]) { accent-color: var(--bex-brand); }
.bex-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; background: var(--bex-brand-soft); color: var(--bex-brand); font-size: var(--bex-text-xs); font-weight: 600; }
.bex-avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--bex-surface-muted); }
.bex-page-intro { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.bex-page-intro h1 { margin: 0; font-size: var(--bex-text-title); font-weight: 700; line-height: 1.25; letter-spacing: -.035em; color: var(--bex-text); }
.bex-page-intro p { max-width: 64ch; margin: 8px 0 0; color: var(--bex-muted); font-size: var(--bex-text-sm); }
.bex-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 240px; padding: 32px 20px; text-align: center; }
.bex-state-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--bex-brand-soft); color: var(--bex-brand); }
.bex-state h2, .bex-state h3 { margin: 0; font-size: 1.125rem; font-weight: 650; color: var(--bex-text); }
.bex-state p { margin: 0; max-width: 48ch; color: var(--bex-muted); font-size: var(--bex-text-sm); }
.bex-skeleton { border-radius: 8px; background: var(--bex-surface-muted); animation: bex-pulse 1.5s ease-in-out infinite; }
@keyframes bex-pulse { 50% { opacity: .45; } }
.bex-toast-region { position: fixed; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 20px; z-index: 100100; width: min(380px, calc(100vw - 40px)); display: grid; gap: 10px; pointer-events: none; }
.bex-toast { padding: 14px 18px; border: 1px solid var(--bex-border); border-radius: var(--bex-radius-sm); background: var(--bex-surface); color: var(--bex-text); box-shadow: var(--bex-shadow-overlay); font-size: var(--bex-text-sm); overflow-wrap: anywhere; pointer-events: auto; }
.bex-toast[data-kind="error"] { border-inline-start: 4px solid var(--bex-danger); }
.bex-confirm { width: min(440px, calc(100% - 32px)); padding: 28px; background: var(--bex-surface); color: var(--bex-text); border: 1px solid var(--bex-border); border-radius: var(--bex-radius-lg); box-shadow: var(--bex-shadow-overlay); }
.bex-confirm::backdrop { background: rgb(8 24 24 / 48%); }
.bex-confirm h2 { margin: 0 0 10px; font-size: 1.25rem; line-height: 1.4; }
.bex-confirm p { margin: 0 0 24px; color: var(--bex-muted); }
.bex-confirm-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.bex-global-header.bex-user-header { background: var(--bex-surface) !important; border-color: var(--bex-border) !important; box-shadow: none !important; backdrop-filter: none; }
.bex-global-header .bex-top-search-trigger { min-height: 40px; border: 1px solid var(--bex-border); border-radius: var(--bex-radius-sm); background: var(--bex-surface-muted); }
.bex-global-header .bex-header-search-placeholder { display: block; padding: 10px 12px 10px 38px; text-align: start; color: var(--bex-muted); font-size: 13px; }
.bex-header-context { display: flex; flex-direction: column; min-width: 0; }
.bex-header-title { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.4; font-weight: 600; }
.bex-header-subtitle { font-size: 12px; color: var(--bex-muted); line-height: 1.4; }
.bex-corp-pill {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bex-brand-soft);
  color: var(--bex-brand);
  border: 1px solid color-mix(in srgb, var(--bex-brand) 30%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}
body.bex-user-page .bex-user-container { padding-top: 28px; padding-bottom: 36px; }
/* Desktop navigation has one width contract for every page family. */
.bex-studio { padding: clamp(20px, 4vw, 32px); overflow-wrap: anywhere; }
.bex-studio h1 { font-size: var(--bex-text-title); margin: 0 0 12px; }
.bex-studio p { color: var(--bex-muted); margin: 12px 0 20px; }
.bex-studio-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-top: 20px; }
.bex-studio-packages button { min-height: 48px; white-space: normal; }
.bex-wheel-dialog { width: min(420px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: 18px 20px 20px; border-radius: 24px; border: 1px solid color-mix(in srgb, var(--bex-border) 82%, rgba(245, 158, 11, 0.35)); background: var(--bex-surface); color: var(--bex-text); box-shadow: 0 24px 64px -16px rgba(2, 6, 23, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; }
.bex-wheel-dialog::backdrop { background: rgba(6, 12, 18, 0.68); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bex-wheel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bex-wheel-title-wrap { min-width: 0; flex: 1 1 auto; }
.bex-wheel-eyebrow { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; margin-bottom: 6px; border-radius: 999px; background: color-mix(in srgb, #f59e0b 14%, transparent); color: #d97706; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
[data-theme="dark"] .bex-wheel-eyebrow { color: #fbbf24; }
.bex-wheel-header h2 { margin: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; color: var(--bex-text); }
.bex-wheel-subtitle { margin: 3px 0 0 !important; font-size: 0.8125rem; line-height: 1.4; color: var(--bex-muted); }
.bex-wheel-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 12px; border: 1px solid var(--bex-border); background: var(--bex-surface-muted); color: var(--bex-text); font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; }
.bex-wheel-close:hover { background: color-mix(in srgb, var(--bex-danger, #ef4444) 14%, var(--bex-surface-muted)); border-color: color-mix(in srgb, var(--bex-danger, #ef4444) 45%, var(--bex-border)); transform: scale(1.05); }
.bex-wheel-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 12px 0 10px; }
.bex-wheel-pointer { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3; width: 28px; height: 28px; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); }
.bex-wheel-dialog canvas { display: block; width: min(268px, 46dvh, calc(100vw - 76px)); max-width: 100%; height: auto; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 50%; transition: transform 3.6s cubic-bezier(0.12, 0.86, 0.18, 1); will-change: transform; }
.bex-wheel-status { margin: 8px 0 12px !important; padding: 8px 12px; border-radius: 12px; background: var(--bex-surface-muted); border: 1px solid var(--bex-border); color: var(--bex-text) !important; font-size: 0.8125rem; font-weight: 600; text-align: center; line-height: 1.4; }
.bex-wheel-result { margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(245, 158, 11, 0.14)); border: 1px solid rgba(16, 185, 129, 0.35); color: var(--bex-text); font-size: 0.875rem; font-weight: 700; text-align: center; line-height: 1.4; }
.bex-wheel-actions { display: flex; flex-direction: column; gap: 8px; }
.bex-wheel-spin-btn { width: 100%; min-height: 46px; border-radius: 14px; border: 0; background: linear-gradient(135deg, #10b981 0%, #059669 55%, #047857 100%); color: #ffffff; font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.01em; box-shadow: 0 10px 22px -8px rgba(16, 185, 129, 0.55); cursor: pointer; transition: transform 0.16s ease, filter 0.16s ease, opacity 0.16s ease; }
.bex-wheel-spin-btn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.bex-wheel-spin-btn:disabled { opacity: 0.58; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 400px) { .bex-wheel-dialog { padding: 14px 14px 16px; border-radius: 20px; } .bex-wheel-header h2 { font-size: 1.05rem; } .bex-wheel-close { width: 34px; height: 34px; border-radius: 10px; } .bex-wheel-dialog canvas { width: min(230px, 44dvh, calc(100vw - 60px)); } }
@media (max-height: 680px) { .bex-wheel-dialog { padding: 12px 16px 14px; } .bex-wheel-stage { padding: 8px 0 6px; } .bex-wheel-dialog canvas { width: min(215px, 42dvh, calc(100vw - 64px)); } .bex-wheel-status { margin: 6px 0 8px !important; padding: 6px 10px; } .bex-wheel-spin-btn { min-height: 42px; } }
@media (min-width: 768px) {
  .bex-global-header .bex-header-brand, .bex-global-header .bex-header-divider { display: none; }
  html body.bex-wa #wa-rail.bex-desktop-rail {
    flex: 0 0 var(--bex-rail-w) !important; width: var(--bex-rail-w) !important;
    min-width: var(--bex-rail-w) !important; max-width: var(--bex-rail-w) !important;
    background: var(--bex-surface) !important; border-inline-end: 1px solid var(--bex-border) !important;
    padding: 12px 8px !important; gap: 12px !important; box-shadow: none !important;
  }
  html body.bex-wa #wa-rail .bex-rail-nav { width: 100%; display: flex; flex-direction: column; align-items: stretch !important; gap: 6px !important; padding: 0 !important; }
  html body.bex-wa #wa-rail .rail-btn { min-height: 46px !important; width: 100% !important; height: 46px !important; padding: 10px !important; gap: 12px !important; border-radius: var(--bex-radius-sm) !important; background: transparent; color: var(--bex-muted); justify-content: center; }
  html body.bex-wa #wa-rail .rail-btn:hover { background: var(--bex-surface-muted) !important; }
  html body.bex-wa #wa-rail .rail-btn.on, html body.bex-wa #wa-rail .rail-btn[aria-current="page"] { background: var(--bex-brand-soft) !important; color: var(--bex-brand) !important; }
  html body.bex-wa #wa-rail .rail-btn-label, html body.bex-wa #wa-rail .bex-rail-brand-text { display: none !important; }
  html body.bex-wa #wa-rail .bex-rail-header { width: 100%; min-height: 44px; padding: 0 !important; }
  html body.bex-wa #wa-rail .bex-rail-brand { gap: 10px; width: 100% !important; justify-content: center; text-decoration: none; }
  html body.bex-wa #wa-rail .bex-rail-logo-img { width: 34px !important; height: 34px !important; }
  html body.bex-wa #wa-rail .bex-rail-footer { margin-top: auto; width: 100%; border-top: 0; padding-top: 12px; }
  html.dark body.bex-wa #wa-rail.bex-desktop-rail { background: var(--bex-surface) !important; border-inline-end-color: var(--bex-border) !important; }
  body.bex-user-page.has-desktop-rail { padding-left: var(--bex-rail-w) !important; }
  html body.bex-wa.member-page > main#main-content > .member-app-viewport { width: calc(100% - var(--bex-rail-w)) !important; margin-left: var(--bex-rail-w) !important; }
  html body.bex-wa.member-page > main#main-content > #wa-rail.bex-desktop-rail { width: var(--bex-rail-w) !important; min-width: var(--bex-rail-w) !important; max-width: var(--bex-rail-w) !important; }
}
@media (max-width: 767px) {
  body.bex-wa { font-size: 15px; }
  body.bex-user-page .bex-user-container { padding: 20px 16px calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
  .bex-input, .bex-textarea, .bex-select { font-size: 16px; }
  .bex-global-header .icon-btn, .bex-global-header a[data-page-back] { min-width: 44px !important; min-height: 44px !important; }
  .bex-global-header .bex-header-divider { display: none; }
  .bex-header-subtitle { display: none; }
  .bex-header-title { max-width: 100px; font-size: 13px; }
  .bex-global-header .bex-brand-name { font-size: 16px; }
  .bex-global-header .bex-header-camera { display: none !important; }
  .bex-page-intro { gap: 12px; margin-bottom: 20px; }
  html body.bex-wa #app-tabs.page-navigation { overflow: visible !important; background: var(--bex-surface) !important; border-top: 1px solid var(--bex-border) !important; box-shadow: none !important; }
  html body.bex-wa #app-tabs .page-navigation-link { color: var(--bex-muted); }
  html body.bex-wa #app-tabs .page-navigation-link[aria-current="page"] { color: var(--bex-brand) !important; }
}
@media (max-width: 374px) {
  .bex-global-header:has(.bex-header-context) .bex-header-brand { display: none; }
  .bex-header-title { max-width: 94px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Bexgram product system. Keep semantic values here, including legacy aliases. */
html:root {
  --bex-brand: #007A5A;
  --bex-brand-hover: #006B50;
  --bex-brand-soft: #E6F7F2;
  --bex-bg: #F3F7F9;
  --bex-surface: #ffffff;
  --bex-surface-muted: #EDF4F7;
  --bex-app-header: #F7FAFC;
  --bex-chat-canvas: #EAF1F2;
  --bex-message-in: #FFFFFF;
  --bex-message-out: #D8F7E8;
  --bex-interactive-soft: rgb(0 122 90 / 7%);
  --bex-text: #10232D;
  --bex-muted: #526B78;
  --bex-border: #DCE7EC;
  --bex-danger: #C92A42;
  --bex-danger-soft: #FDE8EC;
  --bex-success: #078553;
  --bex-warning: #B65F00;
  --bex-info: #1769C2;
  --bex-accent-blue: #1877F2;
  --bex-accent-violet: #7C3AED;
  --bex-accent-amber: #D97706;
  --bex-accent-rose: #E11D48;
  --bex-on-brand: #ffffff;
  --bex-on-danger: #ffffff;
  --bex-on-info: #ffffff;
  --bex-on-warning: #ffffff;
  --bex-radius: 12px;
  --bex-radius-sm: 8px;
  --bex-radius-lg: 18px;
  --bex-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --bex-shadow-overlay: 0 16px 56px rgb(12 32 28 / 18%);
  --bex-space-1: 4px;
  --bex-space-2: 8px;
  --bex-space-3: 12px;
  --bex-space-4: 16px;
  --bex-space-5: 20px;
  --bex-space-6: 24px;
  --bex-space-8: 32px;
  --bex-space-12: 48px;
  --bex-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bex-text-xs: .8125rem;
  --bex-text-sm: .875rem;
  --bex-text-base: .9375rem;
  --bex-text-lg: 1.125rem;
  --bex-text-title: clamp(1.5rem, 1.15rem + 1vw, 2rem);
  --bex-content-width: 1120px;
  --bex-reading-width: 760px;
  --bex-rail-w: 64px;
  --bex-motion: 160ms;
}
html:root.dark, html:root[data-theme="dark"] {
  --bex-brand: #2CE6A0;
  --bex-brand-hover: #53F0B5;
  --bex-brand-soft: #123F38;
  --bex-bg: #0B141A;
  --bex-surface: #111B21;
  --bex-surface-muted: #202C33;
  --bex-app-header: #102630;
  --bex-chat-canvas: #081720;
  --bex-message-in: #102630;
  --bex-message-out: #0B5946;
  --bex-interactive-soft: rgb(44 230 160 / 9%);
  --bex-text: #F1F7FA;
  --bex-muted: #A3B4BE;
  --bex-border: #222E35;
  --bex-danger: #FB7185;
  --bex-danger-soft: #481F2A;
  --bex-success: #34D399;
  --bex-warning: #FBBF24;
  --bex-info: #60A5FA;
  --bex-accent-blue: #38BDF8;
  --bex-accent-violet: #A78BFA;
  --bex-accent-amber: #FBBF24;
  --bex-accent-rose: #FB7185;
  --bex-on-brand: #032117;
  --bex-on-danger: #2A0912;
  --bex-on-info: #061D34;
  --bex-on-warning: #2A1900;
  --bex-shadow: 0 8px 28px rgb(0 0 0 / 26%);
}
/* Old templates consume these names. One bridge prevents page-specific palettes. */
html:root, html:root body.bex-wa, html:root body.bex-admin-page {
  --color-primary: var(--bex-brand) !important;
  --color-text: var(--bex-text) !important;
  --color-muted: var(--bex-muted) !important;
  --color-success: var(--bex-success) !important;
  --color-error: var(--bex-danger) !important;
  --color-danger: var(--bex-danger) !important;
  --color-warning: var(--bex-warning) !important;
  --color-info: var(--bex-info) !important;
  --bex-primary: var(--bex-brand) !important;
  --bex-primary-hover: var(--bex-brand-hover) !important;
  --bex-primary-dark: var(--bex-brand-hover) !important;
  --bex-accent: var(--bex-brand) !important;
  --bex-header: var(--bex-app-header) !important;
  --bex-text-main: var(--bex-text) !important;
  --bex-text-sub: var(--bex-muted) !important;
  --bex-text-secondary: var(--bex-muted) !important;
  --bex-text-muted: var(--bex-muted) !important;
  --bex-surface-secondary: var(--bex-surface-muted) !important;
  --bex-hover: var(--bex-interactive-soft) !important;
  --bex-selected: var(--bex-brand-soft) !important;
  --bex-incoming: var(--bex-message-in) !important;
  --bex-outgoing: var(--bex-message-out) !important;
  --bex-bubble-in: var(--bex-message-in) !important;
  --bex-bubble-out: var(--bex-message-out) !important;
  --bex-chat-bg: var(--bex-chat-canvas) !important;
  --bex-page: var(--bex-bg) !important;
  --bex-soft: var(--bex-surface-muted) !important;
  --wa-primary: var(--bex-brand) !important;
  --wa-primary-ink: var(--bex-on-brand) !important;
  --wa-green: var(--bex-brand) !important;
  --wa-green-deep: var(--bex-brand) !important;
  --wa-green-ink: var(--bex-brand) !important;
  --wa-green-soft: var(--bex-brand-soft) !important;
  --wa-bg: var(--bex-bg) !important;
  --wa-surface: var(--bex-surface) !important;
  --wa-sidebar: var(--bex-surface) !important;
  --wa-card-bg: var(--bex-surface) !important;
  --wa-rail: var(--bex-surface) !important;
  --wa-header: var(--bex-app-header) !important;
  --wa-bar: var(--bex-app-header) !important;
  --wa-welcome: var(--bex-bg) !important;
  --wa-chat: var(--bex-chat-canvas) !important;
  --wa-search: var(--bex-surface-muted) !important;
  --wa-input-bg: var(--bex-surface-muted) !important;
  --wa-text: var(--bex-text) !important;
  --wa-muted: var(--bex-muted) !important;
  --wa-text-secondary: var(--bex-muted) !important;
  --wa-icon: var(--bex-muted) !important;
  --wa-faint: var(--bex-muted) !important;
  --wa-line: var(--bex-border) !important;
  --wa-hover: var(--bex-interactive-soft) !important;
  --wa-selected: var(--bex-brand-soft) !important;
  --wa-menu-hover: var(--bex-brand-soft) !important;
  --wa-outgoing: var(--bex-message-out) !important;
  --wa-incoming: var(--bex-message-in) !important;
  --wa-bubble-out: var(--bex-message-out) !important;
  --wa-bubble-in: var(--bex-message-in) !important;
  --wa-shadow: var(--bex-shadow) !important;
  --wa-shadow-lg: var(--bex-shadow-overlay) !important;
  --wa-font: var(--bex-font) !important;
  --bg-primary: var(--bex-bg) !important;
  --surface-primary: var(--bex-surface) !important;
  --text-primary: var(--bex-text) !important;
  --text-secondary: var(--bex-muted) !important;
  --accent-primary: var(--bex-brand) !important;
  --border-primary: var(--bex-border) !important;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--bex-font); text-rendering: optimizeLegibility; }
html body.bex-wa { color: var(--bex-text); background: var(--bex-bg); font-family: var(--bex-font) !important; font-size: var(--bex-text-base) !important; line-height: 1.6; }
.bex-global-header .bex-brand-name { font-family: var(--bex-font) !important; }
html.dark body.bex-wa { color: var(--bex-text) !important; background-color: var(--bex-bg) !important; }
img, video, canvas { max-width: 100%; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button:disabled, [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
:where(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--bex-brand) !important; outline-offset: 3px;
}
[hidden] { display: none !important; }
.bex-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.bex-skip-link { position: fixed; inset: 8px auto auto 8px; z-index: 100100; padding: 12px 20px; border-radius: var(--bex-radius-sm); background: var(--bex-brand); color: var(--bex-on-brand); transform: translateY(-160%); }
.bex-skip-link:focus { transform: translateY(0); }
.bex-btn, .bex-btn-primary, .bex-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border: 1px solid transparent;
  border-radius: var(--bex-radius-sm); font-size: var(--bex-text-sm); font-weight: 600;
  line-height: 1.4; text-decoration: none; cursor: pointer;
  transition: background-color var(--bex-motion), border-color var(--bex-motion);
}
.bex-btn, .bex-btn-primary { background: var(--bex-brand); color: var(--bex-on-brand); }
.bex-btn:hover, .bex-btn-primary:hover { background: var(--bex-brand-hover); }
.bex-btn-secondary { background: var(--bex-surface); border-color: var(--bex-border); color: var(--bex-text); }
.bex-btn-secondary:hover { background: var(--bex-surface-muted); }
.bex-btn-danger { background: var(--bex-danger); color: var(--bex-surface); }
.bex-icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: var(--bex-radius-sm); background: transparent; color: var(--bex-muted); border: 0; }
.bex-icon-button:hover { background: var(--bex-surface-muted); color: var(--bex-text); }
.bex-card, .bex-surface-card { background: var(--bex-surface); border: 1px solid var(--bex-border); border-radius: var(--bex-radius); box-shadow: none; }
.bex-label { display: block; color: var(--bex-text); font-size: var(--bex-text-sm) !important; line-height: 1.5; font-weight: 600; margin-bottom: 8px; }
.bex-input, .bex-select, .bex-textarea {
  width: 100%; min-width: 0; min-height: 46px; padding: 11px 14px;
  border: 1px solid var(--bex-border); border-radius: var(--bex-radius-sm);
  background: var(--bex-surface); color: var(--bex-text); line-height: 1.5;
}
.bex-input::placeholder, .bex-textarea::placeholder { color: var(--bex-muted); opacity: 1; }
.bex-input[aria-invalid="true"], .bex-textarea[aria-invalid="true"] { border-color: var(--bex-danger); }
.bex-field-error { display: block; margin-top: 6px; color: var(--bex-danger); font-size: var(--bex-text-sm); }
.bex-field-hint { display: block; margin-top: 6px; color: var(--bex-muted); font-size: var(--bex-text-sm); }
input:is([type="checkbox"], [type="radio"]) { accent-color: var(--bex-brand); }
.bex-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; background: var(--bex-brand-soft); color: var(--bex-brand); font-size: var(--bex-text-xs); font-weight: 600; }
.bex-avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--bex-surface-muted); }
.bex-page-intro { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.bex-page-intro h1 { margin: 0; font-size: var(--bex-text-title); font-weight: 700; line-height: 1.25; letter-spacing: -.035em; color: var(--bex-text); }
.bex-page-intro p { max-width: 64ch; margin: 8px 0 0; color: var(--bex-muted); font-size: var(--bex-text-sm); }
.bex-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 240px; padding: 32px 20px; text-align: center; }
.bex-state-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--bex-brand-soft); color: var(--bex-brand); }
.bex-state h2, .bex-state h3 { margin: 0; font-size: 1.125rem; font-weight: 650; color: var(--bex-text); }
.bex-state p { margin: 0; max-width: 48ch; color: var(--bex-muted); font-size: var(--bex-text-sm); }
.bex-skeleton { border-radius: 8px; background: var(--bex-surface-muted); animation: bex-pulse 1.5s ease-in-out infinite; }
@keyframes bex-pulse { 50% { opacity: .45; } }
.bex-toast-region { position: fixed; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 20px; z-index: 100100; width: min(380px, calc(100vw - 40px)); display: grid; gap: 10px; pointer-events: none; }
.bex-toast { padding: 14px 18px; border: 1px solid var(--bex-border); border-radius: var(--bex-radius-sm); background: var(--bex-surface); color: var(--bex-text); box-shadow: var(--bex-shadow-overlay); font-size: var(--bex-text-sm); overflow-wrap: anywhere; pointer-events: auto; }
.bex-toast[data-kind="error"] { border-inline-start: 4px solid var(--bex-danger); }
.bex-confirm { width: min(440px, calc(100% - 32px)); padding: 28px; background: var(--bex-surface); color: var(--bex-text); border: 1px solid var(--bex-border); border-radius: var(--bex-radius-lg); box-shadow: var(--bex-shadow-overlay); }
.bex-confirm::backdrop { background: rgb(8 24 24 / 48%); }
.bex-confirm h2 { margin: 0 0 10px; font-size: 1.25rem; line-height: 1.4; }
.bex-confirm p { margin: 0 0 24px; color: var(--bex-muted); }
.bex-confirm-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.bex-global-header.bex-user-header { background: var(--bex-surface) !important; border-color: var(--bex-border) !important; box-shadow: none !important; backdrop-filter: none; }
.bex-global-header .bex-top-search-trigger { min-height: 40px; border: 1px solid var(--bex-border); border-radius: var(--bex-radius-sm); background: var(--bex-surface-muted); }
.bex-global-header .bex-header-search-placeholder { display: block; padding: 10px 12px 10px 38px; text-align: start; color: var(--bex-muted); font-size: 13px; }
.bex-header-context { display: flex; flex-direction: column; min-width: 0; }
.bex-header-title { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.4; font-weight: 600; }
.bex-header-subtitle { font-size: 12px; color: var(--bex-muted); line-height: 1.4; }
.bex-corp-pill {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bex-brand-soft);
  color: var(--bex-brand);
  border: 1px solid color-mix(in srgb, var(--bex-brand) 30%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}
body.bex-user-page .bex-user-container { padding-top: 28px; padding-bottom: 36px; }
/* Desktop navigation has one width contract for every page family. */
.bex-studio { padding: clamp(20px, 4vw, 32px); overflow-wrap: anywhere; }
.bex-studio h1 { font-size: var(--bex-text-title); margin: 0 0 12px; }
.bex-studio p { color: var(--bex-muted); margin: 12px 0 20px; }
.bex-studio-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-top: 20px; }
.bex-studio-packages button { min-height: 48px; white-space: normal; }
.bex-wheel-dialog { width: min(420px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: 18px 20px 20px; border-radius: 24px; border: 1px solid color-mix(in srgb, var(--bex-border) 82%, rgba(245, 158, 11, 0.35)); background: var(--bex-surface); color: var(--bex-text); box-shadow: 0 24px 64px -16px rgba(2, 6, 23, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; }
.bex-wheel-dialog::backdrop { background: rgba(6, 12, 18, 0.68); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bex-wheel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bex-wheel-title-wrap { min-width: 0; flex: 1 1 auto; }
.bex-wheel-eyebrow { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; margin-bottom: 6px; border-radius: 999px; background: color-mix(in srgb, #f59e0b 14%, transparent); color: #d97706; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
[data-theme="dark"] .bex-wheel-eyebrow { color: #fbbf24; }
.bex-wheel-header h2 { margin: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; color: var(--bex-text); }
.bex-wheel-subtitle { margin: 3px 0 0 !important; font-size: 0.8125rem; line-height: 1.4; color: var(--bex-muted); }
.bex-wheel-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 12px; border: 1px solid var(--bex-border); background: var(--bex-surface-muted); color: var(--bex-text); font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; }
.bex-wheel-close:hover { background: color-mix(in srgb, var(--bex-danger, #ef4444) 14%, var(--bex-surface-muted)); border-color: color-mix(in srgb, var(--bex-danger, #ef4444) 45%, var(--bex-border)); transform: scale(1.05); }
.bex-wheel-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 12px 0 10px; }
.bex-wheel-pointer { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3; width: 28px; height: 28px; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); }
.bex-wheel-dialog canvas { display: block; width: min(268px, 46dvh, calc(100vw - 76px)); max-width: 100%; height: auto; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 50%; transition: transform 3.6s cubic-bezier(0.12, 0.86, 0.18, 1); will-change: transform; }
.bex-wheel-status { margin: 8px 0 12px !important; padding: 8px 12px; border-radius: 12px; background: var(--bex-surface-muted); border: 1px solid var(--bex-border); color: var(--bex-text) !important; font-size: 0.8125rem; font-weight: 600; text-align: center; line-height: 1.4; }
.bex-wheel-result { margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(245, 158, 11, 0.14)); border: 1px solid rgba(16, 185, 129, 0.35); color: var(--bex-text); font-size: 0.875rem; font-weight: 700; text-align: center; line-height: 1.4; }
.bex-wheel-actions { display: flex; flex-direction: column; gap: 8px; }
.bex-wheel-spin-btn { width: 100%; min-height: 46px; border-radius: 14px; border: 0; background: linear-gradient(135deg, #10b981 0%, #059669 55%, #047857 100%); color: #ffffff; font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.01em; box-shadow: 0 10px 22px -8px rgba(16, 185, 129, 0.55); cursor: pointer; transition: transform 0.16s ease, filter 0.16s ease, opacity 0.16s ease; }
.bex-wheel-spin-btn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.bex-wheel-spin-btn:disabled { opacity: 0.58; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 400px) { .bex-wheel-dialog { padding: 14px 14px 16px; border-radius: 20px; } .bex-wheel-header h2 { font-size: 1.05rem; } .bex-wheel-close { width: 34px; height: 34px; border-radius: 10px; } .bex-wheel-dialog canvas { width: min(230px, 44dvh, calc(100vw - 60px)); } }
@media (max-height: 680px) { .bex-wheel-dialog { padding: 12px 16px 14px; } .bex-wheel-stage { padding: 8px 0 6px; } .bex-wheel-dialog canvas { width: min(215px, 42dvh, calc(100vw - 64px)); } .bex-wheel-status { margin: 6px 0 8px !important; padding: 6px 10px; } .bex-wheel-spin-btn { min-height: 42px; } }
@media (min-width: 768px) {
  .bex-global-header .bex-header-brand, .bex-global-header .bex-header-divider { display: none; }
  html body.bex-wa #wa-rail.bex-desktop-rail {
    flex: 0 0 var(--bex-rail-w) !important; width: var(--bex-rail-w) !important;
    min-width: var(--bex-rail-w) !important; max-width: var(--bex-rail-w) !important;
    background: var(--bex-surface) !important; border-inline-end: 1px solid var(--bex-border) !important;
    padding: 12px 8px !important; gap: 12px !important; box-shadow: none !important;
  }
  html body.bex-wa #wa-rail .bex-rail-nav { width: 100%; display: flex; flex-direction: column; align-items: stretch !important; gap: 6px !important; padding: 0 !important; }
  html body.bex-wa #wa-rail .rail-btn { min-height: 46px !important; width: 100% !important; height: 46px !important; padding: 10px !important; gap: 12px !important; border-radius: var(--bex-radius-sm) !important; background: transparent; color: var(--bex-muted); justify-content: center; }
  html body.bex-wa #wa-rail .rail-btn:hover { background: var(--bex-surface-muted) !important; }
  html body.bex-wa #wa-rail .rail-btn.on, html body.bex-wa #wa-rail .rail-btn[aria-current="page"] { background: var(--bex-brand-soft) !important; color: var(--bex-brand) !important; }
  html body.bex-wa #wa-rail .rail-btn-label, html body.bex-wa #wa-rail .bex-rail-brand-text { display: none !important; }
  html body.bex-wa #wa-rail .bex-rail-header { width: 100%; min-height: 44px; padding: 0 !important; }
  html body.bex-wa #wa-rail .bex-rail-brand { gap: 10px; width: 100% !important; justify-content: center; text-decoration: none; }
  html body.bex-wa #wa-rail .bex-rail-logo-img { width: 34px !important; height: 34px !important; }
  html body.bex-wa #wa-rail .bex-rail-footer { margin-top: auto; width: 100%; border-top: 0; padding-top: 12px; }
  html.dark body.bex-wa #wa-rail.bex-desktop-rail { background: var(--bex-surface) !important; border-inline-end-color: var(--bex-border) !important; }
  body.bex-user-page.has-desktop-rail { padding-left: var(--bex-rail-w) !important; }
  html body.bex-wa.member-page > main#main-content > .member-app-viewport { width: calc(100% - var(--bex-rail-w)) !important; margin-left: var(--bex-rail-w) !important; }
  html body.bex-wa.member-page > main#main-content > #wa-rail.bex-desktop-rail { width: var(--bex-rail-w) !important; min-width: var(--bex-rail-w) !important; max-width: var(--bex-rail-w) !important; }
}
@media (max-width: 767px) {
  body.bex-wa { font-size: 15px; }
  body.bex-user-page .bex-user-container { padding: 20px 16px calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
  .bex-input, .bex-textarea, .bex-select { font-size: 16px; }
  .bex-global-header .icon-btn, .bex-global-header a[data-page-back] { min-width: 44px !important; min-height: 44px !important; }
  .bex-global-header .bex-header-divider { display: none; }
  .bex-header-subtitle { display: none; }
  .bex-header-title { max-width: 100px; font-size: 13px; }
  .bex-global-header .bex-brand-name { font-size: 16px; }
  .bex-global-header .bex-header-camera { display: none !important; }
  .bex-page-intro { gap: 12px; margin-bottom: 20px; }
  html body.bex-wa #app-tabs.page-navigation { overflow: visible !important; background: var(--bex-surface) !important; border-top: 1px solid var(--bex-border) !important; box-shadow: none !important; }
  html body.bex-wa #app-tabs .page-navigation-link { color: var(--bex-muted); }
  html body.bex-wa #app-tabs .page-navigation-link[aria-current="page"] { color: var(--bex-brand) !important; }
}
@media (max-width: 374px) {
  .bex-global-header:has(.bex-header-context) .bex-header-brand { display: none; }
  .bex-header-title { max-width: 94px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}