/* Bexgram product system. Keep semantic values here, including legacy aliases. */
html:root {
  --bex-brand: #00765f;
  --bex-brand-hover: #006b57;
  --bex-brand-soft: #d9fdd3;
  --bex-bg: #f0f2f5;
  --bex-surface: #ffffff;
  --bex-surface-muted: #f0f2f5;
  --bex-text: #111b21;
  --bex-muted: #54656f;
  --bex-border: #e6e8e8;
  --bex-danger: #ba303a;
  --bex-danger-soft: #fff0f1;
  --bex-success: #13774b;
  --bex-warning: #96600c;
  --bex-info: #2869ac;
  --bex-on-brand: #ffffff;
  --bex-on-danger: #ffffff;
  --bex-on-info: #ffffff;
  --bex-on-warning: #ffffff;
  --bex-radius: 16px;
  --bex-radius-sm: 10px;
  --bex-radius-lg: 24px;
  --bex-shadow: 0 4px 24px rgb(24 43 48 / 5%);
  --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: #21c063;
  --bex-brand-hover: #46d783;
  --bex-brand-soft: #103b2b;
  --bex-bg: #1c1e1e;
  --bex-surface: #161717;
  --bex-surface-muted: #292b2b;
  --bex-text: #e9edef;
  --bex-muted: #a1a5a5;
  --bex-border: #2b2d2d;
  --bex-danger: #ff929b;
  --bex-danger-soft: #442930;
  --bex-success: #72dba5;
  --bex-warning: #f4c574;
  --bex-info: #8cbdff;
  --bex-on-brand: #062d18;
  --bex-on-danger: #38151a;
  --bex-on-info: #102c4d;
  --bex-on-warning: #382400;
  --bex-shadow: 0 4px 24px rgb(0 0 0 / 12%);
}
/* 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-surface) !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-surface-muted) !important;
  --bex-selected: var(--bex-brand-soft) !important;
  --bex-incoming: var(--bex-surface) !important;
  --bex-outgoing: var(--bex-brand-soft) !important;
  --bex-bubble-in: var(--bex-surface) !important;
  --bex-bubble-out: var(--bex-brand-soft) !important;
  --bex-chat-bg: var(--bex-bg) !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-surface) !important;
  --wa-bar: var(--bex-surface) !important;
  --wa-welcome: var(--bex-bg) !important;
  --wa-chat: var(--bex-bg) !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-surface-muted) !important;
  --wa-selected: var(--bex-brand-soft) !important;
  --wa-menu-hover: var(--bex-brand-soft) !important;
  --wa-outgoing: var(--bex-brand-soft) !important;
  --wa-incoming: var(--bex-surface) !important;
  --wa-bubble-out: var(--bex-brand-soft) !important;
  --wa-bubble-in: var(--bex-surface) !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; }
body.bex-user-page .bex-user-container { padding-top: 28px; padding-bottom: 36px; }
/* Desktop navigation has one width contract for every page family. */
@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: #202222 !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; }
}