/* Hybrid OS shared design system.
   This file is the canonical component layer for every Core, Staff and Member page.
   Page styles may add feature-specific layout, but should not redefine these primitives. */
:root{
  --hybrid-bg:#f5f7fb;
  --hybrid-panel:#fff;
  --hybrid-ink:#101828;
  --hybrid-muted:#667085;
  --hybrid-line:#e7ebf2;
  --hybrid-dark:#0b1020;
  --hybrid-accent:#00d9a6;
  --hybrid-accent-dark:#0d7966;
  --hybrid-good:#067647;
  --hybrid-warn:#b54708;
  --hybrid-bad:#b42318;
  --hybrid-radius:20px;
  --hybrid-control-radius:12px;
  --hybrid-shadow:0 14px 34px rgba(16,24,40,.08);
  --hybrid-control-shadow:0 8px 24px rgba(16,24,40,.12);
  --hybrid-page-x:30px;
  --hybrid-page-y:28px;
  --hybrid-gap:16px;
  --hybrid-surface-soft:#f8fafc;
  --hybrid-line-strong:#d0d5dd;
  --hybrid-radius-sm:12px;
  --hybrid-radius-md:16px;
  --hybrid-radius-lg:20px;
  --hybrid-space-1:4px;
  --hybrid-space-2:8px;
  --hybrid-space-3:12px;
  --hybrid-space-4:16px;
  --hybrid-space-5:20px;
  --hybrid-space-6:24px;

  /* Legacy aliases. Page-specific CSS still uses these names in places.
     The canonical stylesheet is loaded last so every screen resolves them
     to the same HybridOne design tokens. */
  --bg:var(--hybrid-bg)!important;
  --panel:var(--hybrid-panel)!important;
  --ink:var(--hybrid-ink)!important;
  --muted:var(--hybrid-muted)!important;
  --line:var(--hybrid-line)!important;
  --dark:var(--hybrid-dark)!important;
  --accent:var(--hybrid-accent-dark)!important;
  --good:var(--hybrid-good)!important;
  --warn:var(--hybrid-warn)!important;
  --bad:var(--hybrid-bad)!important;
  --shadow:var(--hybrid-shadow)!important;
}

html{min-height:100%;background:var(--hybrid-bg)!important;color-scheme:light;-webkit-text-size-adjust:100%}
body{min-height:100dvh;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;background:var(--hybrid-bg)!important;color:var(--hybrid-ink)!important;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
.shell,.app,#app,#appView{min-height:100dvh}
.main{min-height:100dvh;background:var(--hybrid-bg)!important;min-width:0}
button,input,select,textarea{font:inherit}
button{touch-action:manipulation}
a{color:inherit}
.muted{color:var(--hybrid-muted)!important}
.hidden{display:none!important}

/* Canonical typography and page header. */
.top{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:22px}
.eyebrow{font-size:12px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:#7a8494}
.top h1{font-size:30px;line-height:1.12;margin:4px 0;letter-spacing:-.02em}
h2{line-height:1.18}
.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.section-title h2,.section-title h3{margin:0}

/* Canonical surfaces. Hero cards can keep their feature-specific background. */
.card{border:1px solid var(--hybrid-line)!important;border-radius:var(--hybrid-radius)!important;padding:18px;box-shadow:var(--hybrid-shadow)!important}
.card:not(.hero){background:var(--hybrid-panel)!important}
.composer,.post,.modal-card{background:var(--hybrid-panel)!important;border:1px solid var(--hybrid-line)!important;border-radius:var(--hybrid-radius)!important;box-shadow:var(--hybrid-shadow)!important}
.row{border:1px solid var(--hybrid-line)!important;border-radius:14px!important;padding:12px}
.rowtop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.list{display:grid;gap:9px}
.empty,.staff-ops-empty{padding:14px;border:1px dashed #d0d5dd!important;border-radius:14px!important;color:var(--hybrid-muted)!important;background:#fafbfc!important}

/* Canonical buttons. */
.btn{border:0;border-radius:var(--hybrid-control-radius)!important;padding:10px 13px;font-weight:800!important;line-height:1.2;cursor:pointer;touch-action:manipulation;text-decoration:none}
.btn.primary,.btn.dark{background:var(--hybrid-dark)!important;color:#fff!important}
.btn.secondary{background:#fff!important;border:1px solid var(--hybrid-line)!important;color:var(--hybrid-ink)!important}
.btn.danger{background:#fef3f2!important;color:var(--hybrid-bad)!important;border:1px solid #fecdca!important}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(0,217,166,.25);outline-offset:2px}
.hero .btn.primary{background:#fff!important;color:var(--hybrid-dark)!important}

/* Canonical status pills. */
.tag{display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:5px 8px!important;border-radius:999px!important;background:#f2f4f7!important;color:var(--hybrid-ink);font-size:11px!important;font-weight:800!important;line-height:1.2}
.tag.good{background:#ecfdf3!important;color:var(--hybrid-good)!important}
.tag.warn{background:#fffaeb!important;color:var(--hybrid-warn)!important}
.tag.bad{background:#fef3f2!important;color:var(--hybrid-bad)!important}

/* Canonical forms. */
.field{margin:10px 0}
.field label{display:block;font-size:12px;font-weight:800;margin-bottom:5px}
.field input,.field select,.field textarea,
input.staff-member-search{width:100%;min-height:44px;padding:11px 12px!important;border:1px solid var(--hybrid-line)!important;border-radius:var(--hybrid-control-radius)!important;background:#fff!important;color:var(--hybrid-ink)!important;outline:none}
.field textarea{min-height:72px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus,input.staff-member-search:focus{border-color:#8d82ff!important;box-shadow:0 0 0 3px #eeecff!important}

/* Canonical signed-in user chip. */
.userchip{display:flex;gap:10px;align-items:center;background:#fff!important;border:1px solid var(--hybrid-line)!important;border-radius:16px!important;padding:8px 11px!important;box-shadow:none}
.avatar{width:40px;height:40px;flex:0 0 40px;border-radius:50%!important;display:grid;place-items:center;overflow:hidden;font-weight:850}
.avatar img{width:100%;height:100%;object-fit:cover}

/* Canonical modal treatment. */
.modal{position:fixed;inset:0;background:rgba(11,16,32,.58)!important;display:grid;place-items:center;padding:20px;z-index:100}
.modal-card{width:min(720px,100%);max-height:90dvh;overflow:auto;padding:20px!important}

/* Shared desktop shell/sidebar language. */
.shell{display:grid;grid-template-columns:245px 1fr}
.side{background:var(--hybrid-dark)!important;color:#fff;padding:24px 18px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100dvh;max-height:100dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.side .gym{padding:13px!important;border-radius:16px!important;background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.08)!important}
.side .gym small{color:#98a2b3!important}
.side .nav{display:grid;gap:6px}
.side .nav a,.side .nav button{min-height:44px;border:0;background:transparent;color:#a9b2c2;padding:12px!important;border-radius:12px!important;text-align:left;text-decoration:none;cursor:pointer}
.side .nav a.active,.side .nav button.active,.side .nav a:hover,.side .nav button:hover{background:rgba(255,255,255,.09)!important;color:#fff!important}
.logout{margin-top:auto;border:1px solid rgba(255,255,255,.14)!important;background:transparent!important;color:#d0d5dd!important;padding:11px!important;border-radius:12px!important}

/* One mobile drawer system for Member, Staff and Admin. */
.mobile-menu-btn,.admin-mobile-menu-btn,.staff-mobile-menu-btn,
.mobile-menu-close,.admin-mobile-menu-close,.staff-mobile-menu-close,
.mobile-nav-backdrop,.admin-mobile-backdrop,.staff-mobile-backdrop{display:none}

@media(min-width:901px){.main{padding:var(--hybrid-page-y) var(--hybrid-page-x) 96px}}

@media(max-width:900px){
  html,body{background:var(--hybrid-bg)!important;min-height:100dvh}
  body{overscroll-behavior-y:none}
  .shell,.app,#app,#appView{display:block;min-height:100dvh;background:var(--hybrid-bg)!important}
  .main{min-height:100dvh;background:var(--hybrid-bg)!important;padding-left:14px!important;padding-right:14px!important;padding-bottom:max(36px,env(safe-area-inset-bottom))!important}
  .top{align-items:flex-start;margin-bottom:18px}
  .top h1{font-size:29px}
  .userchip .who{display:none}
  .card{border-radius:18px!important;padding:16px}
  .bottom,.mobile-nav{display:none!important}

  .mobile-menu-btn,.admin-mobile-menu-btn,.staff-mobile-menu-btn{display:grid!important;place-items:center;position:fixed!important;top:calc(env(safe-area-inset-top) + 16px)!important;left:14px!important;z-index:81!important;width:44px!important;height:44px!important;padding:0!important;border:1px solid var(--hybrid-line)!important;border-radius:13px!important;background:#fff!important;color:var(--hybrid-ink)!important;box-shadow:var(--hybrid-control-shadow)!important;font-size:24px!important;line-height:1!important;cursor:pointer}
  .mobile-menu-btn:active,.admin-mobile-menu-btn:active,.staff-mobile-menu-btn:active{transform:scale(.96)}
  body.mobile-nav-open .mobile-menu-btn,body.admin-mobile-open .admin-mobile-menu-btn,body.staff-mobile-open .staff-mobile-menu-btn{opacity:0;pointer-events:none}

  .side{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;position:fixed!important;left:0!important;top:0!important;bottom:0!important;width:min(84vw,320px)!important;height:100dvh!important;z-index:90!important;transform:translateX(-105%);transition:transform .22s ease;box-shadow:18px 0 40px rgba(0,0,0,.22);overflow-y:auto;padding:max(24px,calc(env(safe-area-inset-top) + 18px)) 18px max(24px,calc(env(safe-area-inset-bottom) + 18px))!important}
  .side .brand,.side .logo,.side .brand-logo{flex:0 0 auto;margin-bottom:22px}
  .side .gym{flex:0 0 auto;width:100%;min-height:0;height:auto!important}
  .side .nav{flex:0 0 auto;width:100%;min-width:0}
  .side .gym{margin-bottom:16px}
  .side .nav a,.side .nav button{white-space:normal;overflow-wrap:anywhere}
  body.mobile-nav-open .side,body.admin-mobile-open .side,body.staff-mobile-open .side{transform:translateX(0)}

  .mobile-menu-close,.admin-mobile-menu-close,.staff-mobile-menu-close{display:grid!important;place-items:center;position:absolute!important;top:calc(env(safe-area-inset-top) + 14px)!important;right:14px!important;width:38px!important;height:38px!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:11px!important;background:rgba(255,255,255,.08)!important;color:#fff!important;font-size:24px!important;line-height:1!important;z-index:2!important;cursor:pointer}
  .mobile-nav-backdrop,.admin-mobile-backdrop,.staff-mobile-backdrop{display:block!important;position:fixed!important;inset:0!important;background:rgba(11,16,32,.48)!important;z-index:85!important;opacity:0;pointer-events:none;transition:opacity .2s ease}
  body.mobile-nav-open .mobile-nav-backdrop,body.admin-mobile-open .admin-mobile-backdrop,body.staff-mobile-open .staff-mobile-backdrop{opacity:1;pointer-events:auto}
  body.mobile-nav-open,body.admin-mobile-open,body.staff-mobile-open{overflow:hidden}

  body:has(.mobile-menu-btn) .main,body:has(.admin-mobile-menu-btn) .main,body:has(.staff-mobile-menu-btn) .main{padding-top:calc(env(safe-area-inset-top) + 74px)!important}
  body:has(.mobile-menu-btn) .top,body:has(.admin-mobile-menu-btn) .top,body:has(.staff-mobile-menu-btn) .top{padding-left:54px!important;min-height:46px}
}

@media(prefers-reduced-motion:reduce){.side,.mobile-nav-backdrop,.admin-mobile-backdrop,.staff-mobile-backdrop{transition:none!important}}


/* Centralised Hybrid OS sidebar shell. Admin, Staff and Member all inherit this. */
.side{
  width:254px!important;
  padding:24px 17px 28px!important;
  gap:0!important;
  background:#0b1020!important;
}
.shell{grid-template-columns:254px minmax(0,1fr)!important}
.side .hybrid-shell-brand{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:38px!important;
  margin:0 4px 22px!important;
  padding:0!important;
  color:#fff!important;
}
.side .hybrid-shell-brand .brand-mark{
  display:block!important;
  width:35px!important;
  height:31px!important;
  flex:0 0 35px!important;
  fill:none!important;
  stroke:#fff!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.side .hybrid-shell-brand .brand-word{
  display:inline-block!important;
  color:#fff!important;
  font-size:18px!important;
  font-weight:850!important;
  line-height:1!important;
  letter-spacing:.08em!important;
  white-space:nowrap!important;
}
.side .hybrid-shell-gym{
  width:100%!important;
  min-height:138px!important;
  margin:0 0 17px!important;
  padding:14px 13px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.075)!important;
}
.side .hybrid-shell-gym .tenant-gym-logo{
  display:block!important;
  width:auto!important;
  max-width:175px!important;
  max-height:56px!important;
  margin:0 0 12px!important;
  filter:brightness(0) invert(1)!important;
  object-fit:contain!important;
  object-position:left center!important;
}
.side .hybrid-shell-gym small{
  display:block!important;
  margin-bottom:4px!important;
  color:#a7b0c0!important;
  font-size:12px!important;
  line-height:1.2!important;
}
.side .hybrid-shell-gym > div{
  margin-top:0!important;
  color:#fff!important;
  font-size:16px!important;
  line-height:1.25!important;
  font-weight:850!important;
}
.side .nav{
  display:grid!important;
  gap:7px!important;
  width:100%!important;
}
.side .nav a,.side .nav button{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  min-height:45px!important;
  padding:11px!important;
  border-radius:12px!important;
  color:#aeb7c7!important;
  font-size:14px!important;
  line-height:1.2!important;
  font-weight:500!important;
}
.side .nav a.active,.side .nav button.active{
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  font-weight:800!important;
}
.hybrid-nav-icon{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  opacity:.92;
}
.side .nav .active .hybrid-nav-icon{opacity:1}

@media(min-width:901px) and (max-height:900px){
  .side{padding-top:18px!important;padding-bottom:18px!important}
  .side .hybrid-shell-brand{min-height:34px!important;margin-bottom:14px!important}
  .side .hybrid-shell-brand .brand-mark{width:32px!important;height:29px!important;flex-basis:32px!important}
  .side .hybrid-shell-gym{min-height:108px!important;margin-bottom:11px!important;padding:11px 12px!important}
  .side .hybrid-shell-gym .tenant-gym-logo{max-height:42px!important;margin-bottom:8px!important}
  .side .nav{gap:3px!important}
  .side .nav a,.side .nav button{min-height:38px!important;padding:8px 10px!important;font-size:13px!important}
  .admin-nav-section{margin:6px 10px 1px!important}
}

@media(min-width:901px) and (max-height:800px){
  .side{padding-top:14px!important;padding-bottom:14px!important}
  .side .hybrid-shell-brand{min-height:30px!important;margin-bottom:10px!important}
  .side .hybrid-shell-brand .brand-mark{width:29px!important;height:26px!important;flex-basis:29px!important}
  .side .hybrid-shell-brand .brand-word{font-size:16px!important}
  .side .hybrid-shell-gym{min-height:88px!important;margin-bottom:8px!important;padding:9px 11px!important}
  .side .hybrid-shell-gym .tenant-gym-logo{max-height:34px!important;margin-bottom:6px!important}
  .side .hybrid-shell-gym small{font-size:11px!important;margin-bottom:2px!important}
  .side .hybrid-shell-gym > div{font-size:14px!important}
  .side .nav{gap:2px!important}
  .side .nav a,.side .nav button{min-height:34px!important;padding:7px 9px!important;font-size:12.5px!important}
  .hybrid-nav-icon{width:16px!important;height:16px!important;flex-basis:16px!important}
  .admin-nav-section{margin:4px 9px 0!important;font-size:9px!important}
}

@media(max-width:900px){
  .side{
    width:min(84vw,320px)!important;
    padding:max(22px,calc(env(safe-area-inset-top) + 18px)) 17px max(24px,calc(env(safe-area-inset-bottom) + 18px))!important;
  }
  .side .hybrid-shell-brand{margin:0 4px 20px!important}
  .side .hybrid-shell-gym{margin:0 0 16px!important}
}

/* -------------------------------------------------------------------------
   HybridOne final UI contract
   This block is intentionally generic and the build places this stylesheet
   after page/specialist CSS. Feature layouts may choose their grid/geometry,
   but these visual primitives stay consistent throughout the product.
   ------------------------------------------------------------------------- */

/* Page-heading rhythm */
.top,.groups-top{
  align-items:flex-start!important;
  flex-wrap:wrap;
  gap:16px!important;
  margin-bottom:18px!important;
}
.top h1,.groups-top h1{
  margin:4px 0 5px!important;
  font-size:30px!important;
  line-height:1.12!important;
  letter-spacing:-.02em!important;
}
.top .muted,.groups-top .muted{line-height:1.45}

/* Primary and secondary surfaces */
.card,.panel{
  border:1px solid var(--hybrid-line)!important;
  border-radius:var(--hybrid-radius-lg)!important;
  box-shadow:var(--hybrid-shadow)!important;
}
/* Semantic variants (for example .hero) own their own paint. */
.card:not(.hero),.panel:not(.hero){
  background:var(--hybrid-panel)!important;
}
.report-card,.group-card,.member-card,.challenge-card,
.staff-member-result,.staff-pt-row,.staff-access-code{
  border:1px solid var(--hybrid-line)!important;
  border-radius:var(--hybrid-radius-md)!important;
  background:var(--hybrid-panel)!important;
}
.row,.member-schedule-item,.member-activity-item,.staff-rota-row,.staff-resource-row{
  border-color:var(--hybrid-line)!important;
}

/* One control language. Feature-specific controls may keep their geometry,
   but ordinary action buttons use the same radius, weight and interaction. */
.btn,.staff-ops-btn,.roster-btn,.export,.mini-btn,.report-actions button{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:var(--hybrid-control-radius)!important;
  padding:10px 13px!important;
  font-weight:800!important;
  line-height:1.2!important;
  cursor:pointer;
  text-decoration:none;
}
.btn.primary,.btn.dark,.staff-ops-btn.primary,.report-actions button.view{
  background:var(--hybrid-dark)!important;
  border-color:var(--hybrid-dark)!important;
  color:#fff!important;
}
.btn.secondary,.staff-ops-btn.secondary{
  background:#fff!important;
  border:1px solid var(--hybrid-line)!important;
  color:var(--hybrid-ink)!important;
}
.btn.success,.btn.good{
  background:#ecfdf3!important;
  border:1px solid #abefc6!important;
  color:var(--hybrid-good)!important;
}
.btn.danger{
  background:#fef3f2!important;
  border:1px solid #fecdca!important;
  color:var(--hybrid-bad)!important;
}
.btn:hover:not(:disabled),.staff-ops-btn:hover:not(:disabled),
.roster-btn:hover:not(:disabled),.export:hover:not(:disabled),
.mini-btn:hover:not(:disabled),.report-actions button:hover:not(:disabled){
  filter:brightness(.985);
}
.btn:active:not(:disabled),.staff-ops-btn:active:not(:disabled),
.roster-btn:active:not(:disabled),.export:active:not(:disabled),
.mini-btn:active:not(:disabled),.report-actions button:active:not(:disabled){
  transform:translateY(1px);
}

/* Repeated action groups */
.actions,.toolbar-actions,.report-actions,.group-actions,
.plan-actions,.member-actions,.membership-actions,.staff-pt-actions{
  gap:8px!important;
}

/* Forms */
.field label,.staff-pt-form label{
  color:#344054;
  font-size:12px!important;
  font-weight:800!important;
}
.field input,.field select,.field textarea,
.staff-member-search,.staff-pt-form input,.staff-pt-form select,.staff-pt-form textarea,
.report-toolbar input,.invite-box input,.submit-row input{
  border:1px solid var(--hybrid-line-strong)!important;
  border-radius:var(--hybrid-control-radius)!important;
  background:#fff!important;
  color:var(--hybrid-ink)!important;
  outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus,
.staff-member-search:focus,.staff-pt-form input:focus,.staff-pt-form select:focus,
.staff-pt-form textarea:focus,.report-toolbar input:focus,
.invite-box input:focus,.submit-row input:focus{
  border-color:#8d82ff!important;
  box-shadow:0 0 0 3px #eeecff!important;
}

/* Tabs and segmented navigation */
.tabs,.page-tabs,.admin-context-tabs{gap:8px!important}
.tab,.page-tab,.admin-context-tab{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--hybrid-line)!important;
  border-radius:var(--hybrid-control-radius)!important;
  background:#fff!important;
  color:var(--hybrid-ink)!important;
  padding:9px 13px!important;
  font-weight:800!important;
  text-decoration:none;
}
.tab.active,.page-tab.active,.admin-context-tab.active{
  background:var(--hybrid-dark)!important;
  border-color:var(--hybrid-dark)!important;
  color:#fff!important;
  box-shadow:none!important;
}
.step,.member-filter{
  border-color:var(--hybrid-line)!important;
  background:#fff!important;
}
.step.active,.member-filter.active{
  background:var(--hybrid-dark)!important;
  border-color:var(--hybrid-dark)!important;
  color:#fff!important;
}

/* Tables and dense data */
.table-wrap{
  border:1px solid var(--hybrid-line);
  border-radius:var(--hybrid-radius-md);
  background:#fff;
  overflow:auto;
}
.table th,.table td{border-bottom-color:var(--hybrid-line)!important}
.table th{
  color:var(--hybrid-muted)!important;
  font-size:11px!important;
  font-weight:850!important;
  letter-spacing:.06em;
}

/* Empty, notice and status treatments */
.empty,.staff-ops-empty{
  border-color:#d0d5dd!important;
  border-radius:14px!important;
  background:#fafbfc!important;
  color:var(--hybrid-muted)!important;
}
.notice{
  border-radius:14px!important;
  line-height:1.45;
}

.status,.tag{
  line-height:1.2;
}

/* Shared loading / empty-state language. */
.loading-state,.empty-state{
  width:100%;
  min-height:72px;
  border:1px dashed #d0d5dd;
  border-radius:14px;
  background:#fafbfc;
  color:var(--hybrid-muted);
  padding:16px;
}
.loading-state{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:13px;
  font-weight:750;
}
.hybrid-route-loading{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:24px;
  background:var(--hybrid-bg);
  color:var(--hybrid-muted);
  font-size:13px;
  font-weight:750;
}
.loading-state::before,.hybrid-route-loading::before{
  content:"";
  width:16px;
  height:16px;
  flex:0 0 16px;
  border:2px solid #d0d5dd;
  border-top-color:var(--hybrid-dark);
  border-radius:50%;
  animation:hybrid-loading-spin .8s linear infinite;
}
.empty-state{
  display:grid;
  place-items:center;
  align-content:center;
  gap:5px;
  text-align:center;
}
.empty-state strong{color:var(--hybrid-ink);font-size:14px}
.empty-state p{margin:0;max-width:520px;line-height:1.45}
@keyframes hybrid-loading-spin{to{transform:rotate(360deg)}}

/* One preview-mode banner for Member / Staff / Admin role previews. */
.hybrid-preview-banner{
  position:sticky;
  top:0;
  z-index:82;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:42px;
  padding:9px 16px;
  background:var(--hybrid-dark);
  color:#fff;
  font-size:13px;
  line-height:1.25;
  font-weight:800;
  text-align:center;
}
.hybrid-preview-banner a{
  color:#64f0cf;
  text-decoration:underline;
  text-underline-offset:2px;
}
.hybrid-preview-mobile-label{display:none}

@media(max-width:900px){
  .hybrid-preview-banner{
    min-height:44px;
    padding:8px 12px;
    font-size:12px;
    white-space:nowrap;
  }
  .hybrid-preview-desktop-label{display:none}
  .hybrid-preview-mobile-label{display:inline}
  body:has(.hybrid-preview-banner) .mobile-menu-btn,
  body:has(.hybrid-preview-banner) .admin-mobile-menu-btn,
  body:has(.hybrid-preview-banner) .staff-mobile-menu-btn{
    top:calc(env(safe-area-inset-top) + 60px)!important;
  }
  body:has(.hybrid-preview-banner) .userchip{
    top:calc(env(safe-area-inset-top) + 60px)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .loading-state::before,.hybrid-route-loading::before{animation:none}
}

/* Specialist shells should still use the same page background. */
.groups-main,.operations-page,.admin-frame-main{
  background:var(--hybrid-bg)!important;
}

@media(max-width:900px){
  /* Staff uses the same compact account control as Member on mobile. */
  body:has(.staff-mobile-menu-btn) .userchip{
    position:fixed!important;
    top:calc(env(safe-area-inset-top) + 16px)!important;
    right:14px!important;
    z-index:81!important;
    padding:2px!important;
    border-radius:50%!important;
    box-shadow:var(--hybrid-control-shadow)!important;
  }
  body:has(.staff-mobile-menu-btn) .userchip .avatar{
    width:44px!important;
    height:44px!important;
    flex:0 0 44px!important;
  }
  body:has(.staff-mobile-menu-btn) .userchip .who,
  body:has(.staff-mobile-menu-btn) .userchip:after{
    display:none!important;
  }
  body:has(.staff-mobile-menu-btn) .top{
    padding-right:54px!important;
  }
  body:has(.hybrid-preview-banner):has(.staff-mobile-menu-btn) .userchip{
    top:calc(env(safe-area-inset-top) + 60px)!important;
  }
  body:has(.hybrid-preview-banner) .account-popover{
    top:calc(env(safe-area-inset-top) + 116px)!important;
  }
}

@media(max-width:900px){
  .top,.groups-top{gap:10px!important;margin-bottom:16px!important}
  .top h1,.groups-top h1{font-size:28px!important}
  .card,.panel{border-radius:18px!important}
  .btn,.staff-ops-btn,.roster-btn,.export,.mini-btn,.report-actions button{
    min-height:44px;
  }
}
/* Reporting uses dense content, but its chrome still uses HybridOne controls. */
body:has(#reportSearch) .controls select,
body:has(#reportSearch) .controls button{
  min-height:40px!important;
  border:1px solid var(--hybrid-line)!important;
  border-radius:var(--hybrid-control-radius)!important;
  background:#fff!important;
  color:var(--hybrid-ink)!important;
  padding:10px 12px!important;
  font-weight:800!important;
}
body:has(#reportSearch) .report-card{
  border-radius:var(--hybrid-radius-md)!important;
  border-color:var(--hybrid-line)!important;
}
@media(max-width:900px){
  body:has(#reportSearch) .controls select,
  body:has(#reportSearch) .controls button{min-height:44px!important}
}
/* Multi-gym context switch. Only shown when the signed-in account has 2+ active gyms. */
.side .hybrid-shell-gym.hybrid-gym-switchable{cursor:pointer;transition:border-color .15s ease,background .15s ease}
.side .hybrid-shell-gym.hybrid-gym-switchable:hover{border-color:rgba(255,255,255,.22)!important;background:rgba(255,255,255,.10)!important}
.hybrid-gym-switch-note{margin-top:9px;color:#64f0cf;font-size:11px;font-weight:850;letter-spacing:.02em}
.side .hybrid-shell-gym.hybrid-gym-switchable:focus-visible{outline:2px solid #64f0cf;outline-offset:3px}