:root {
  /* ─────────────────────────────────────────────────────────────
     KIVORA DEFAULT THEME
     Change this block to recolor the public site, login, manager
     dashboard, member portal and installed app. Authenticated clubs
     override these defaults with their organization branding.
     ───────────────────────────────────────────────────────────── */
  --theme-canvas: #f4f3ec;
  --theme-surface: #ffffff;
  --theme-surface-soft: #e9eedc;
  --theme-surface-subtle: #f8f9f4;
  --theme-ink: #171c18;
  --theme-muted: #6f786f;
  --theme-border: #dde3d7;
  --theme-dark: #171c18;
  --theme-dark-soft: #283029;
  --theme-on-dark: #f7f9f3;
  --theme-primary: #8dc1f8;
  --theme-primary-hover: color-mix(in srgb, var(--theme-primary) 82%, var(--theme-ink));
  --theme-primary-ink: #172017;
  --theme-selected: #e9eedc;
  --theme-info: #dceff6;
  --theme-info-ink: #526b77;
  --theme-success: #2e8b5b;
  --theme-success-soft: #e6f5eb;
  --theme-warning: #e3a94d;
  --theme-warning-soft: #fff3db;
  --theme-danger: #d8645a;
  --theme-danger-soft: #fdecea;
  --theme-shadow: rgba(23, 28, 24, .09);
  --theme-overlay: rgba(23, 28, 24, .42);
  --theme-primary-glow: color-mix(in srgb, var(--theme-primary) 15%, transparent);

  /* Legacy aliases used throughout the existing components. */
  --ink: var(--theme-ink);
  --muted: var(--theme-muted);
  --line: var(--theme-border);
  --paper: var(--theme-canvas);
  --white: var(--theme-surface);
  --sidebar: var(--theme-dark);
  --acid: var(--theme-primary);
  --acid-deep: var(--theme-primary-hover);
  --orange: var(--theme-warning);
  --green: var(--theme-success);
  --sky: var(--theme-info);
  --shadow: 0 14px 40px var(--theme-shadow);
  --radius: 18px;
  --app-height: 100dvh;
  --app-offset-top: 0px;
}
* { box-sizing: border-box; }
.hidden { display: none !important; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: "DM Sans", sans-serif; -webkit-font-smoothing: antialiased; }
body.auth-locked { overflow: hidden; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(192, 232, 50, .35); outline-offset: 2px; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Public landing page */
.landing-page { --landing-dark: var(--theme-dark); --landing-blue: var(--theme-primary); --landing-cream: var(--theme-canvas); position: relative; color: var(--theme-ink); background: var(--theme-surface); }
.landing-page.hidden { display: none; }
.landing-header { position: absolute; z-index: 8; top: 0; left: 0; right: 0; height: 92px; padding: 0 clamp(24px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; gap: 32px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.15); }
.landing-brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.landing-brand img { width: 50px; height: 44px; padding: 5px; object-fit: contain; border-radius: 10px; background: #0c0f0d; }
.landing-brand strong, .landing-brand small { display: block; }
.landing-brand strong { font: 800 17px/1.1 "Manrope"; letter-spacing: -.35px; }
.landing-brand small { margin-top: 3px; color: rgba(255,255,255,.56); font-size: 10px; letter-spacing: .45px; }
.landing-nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 45px); }
.landing-nav a { position: relative; color: rgba(255,255,255,.73); font-size: 12px; font-weight: 600; text-decoration: none; transition: .2s ease; }
.landing-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--landing-blue); transition: .2s ease; }
.landing-nav a:hover { color: #fff; }
.landing-nav a:hover::after { right: 0; }
.landing-login { height: 45px; padding: 0 18px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #fff; background: rgba(255,255,255,.06); backdrop-filter: blur(12px); cursor: pointer; font-size: 12px; font-weight: 700; transition: .2s ease; }
.landing-login:hover { color: #111; background: #fff; }
.landing-login svg { width: 16px; }
.landing-hero { position: relative; min-height: min(860px, 100vh); height: 100svh; overflow: hidden; color: #fff; background: #111; }
.landing-hero-media { position: absolute; inset: 0; display: block; }
.landing-hero-image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; filter: saturate(.92) contrast(1.03); }
.landing-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,7,6,.97) 0%, rgba(6,9,7,.84) 38%, rgba(7,10,8,.3) 72%, rgba(7,10,8,.16) 100%), linear-gradient(0deg, rgba(5,7,6,.78) 0%, transparent 42%), linear-gradient(180deg, rgba(5,7,6,.35), transparent 28%); }
.landing-hero-content { position: relative; z-index: 2; width: min(760px, 76vw); height: 100%; padding: 145px clamp(24px, 7vw, 112px) 150px; display: flex; flex-direction: column; justify-content: center; }
.landing-kicker { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.67); font-size: 10px; font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase; }
.landing-kicker i { width: 30px; height: 2px; background: var(--landing-blue); }
.landing-hero h1 { margin: 24px 0 25px; font: 800 clamp(62px, 8.4vw, 132px)/.83 "Manrope"; letter-spacing: clamp(-6px, -.5vw, -2.5px); text-transform: uppercase; }
.landing-page h1 em, .landing-page h2 em { color: var(--landing-blue); font-style: normal; }
.landing-hero-content > p { max-width: 570px; margin: 0; color: rgba(255,255,255,.7); font-size: clamp(16px, 1.45vw, 20px); line-height: 1.65; }
.landing-hero-actions { margin-top: 36px; display: flex; align-items: center; gap: 26px; }
.landing-cta { min-height: 54px; padding: 0 23px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; border: 0; border-radius: 999px; color: #101410; background: var(--landing-blue); cursor: pointer; font-size: 13px; font-weight: 800; box-shadow: 0 10px 35px rgba(177,228,255,.16); transition: .2s ease; }
.landing-cta:hover { gap: 23px; transform: translateY(-2px); box-shadow: 0 15px 45px rgba(177,228,255,.25); }
.landing-cta svg { width: 17px; }
.landing-cta.compact { min-height: 49px; padding-inline: 20px; }
.landing-link { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.76); font-size: 12px; font-weight: 700; text-decoration: none; }
.landing-link span { color: var(--landing-blue); font-size: 17px; }
.landing-proof { position: absolute; z-index: 3; right: clamp(24px, 5vw, 74px); bottom: 34px; display: flex; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(10,13,11,.63); backdrop-filter: blur(18px); overflow: hidden; }
.landing-proof > span { min-width: 150px; padding: 17px 22px; border-right: 1px solid rgba(255,255,255,.12); }
.landing-proof > span:last-child { border-right: 0; }
.landing-proof strong, .landing-proof small { display: block; }
.landing-proof strong { font: 700 12px "Manrope"; }
.landing-proof small { margin-top: 4px; color: rgba(255,255,255,.46); font-size: 9px; }
.landing-section { padding: clamp(80px, 10vw, 150px) clamp(24px, 7vw, 112px); }
.landing-section-label { display: flex; align-items: center; gap: 12px; color: #858b83; font-size: 10px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }
.landing-section-label span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #dfe2db; border-radius: 50%; color: #30372f; font-size: 8px; letter-spacing: 0; }
.landing-section-label.light { color: rgba(255,255,255,.42); }
.landing-section-label.light span { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.18); }
.landing-eyebrow { color: #788178; font-size: 10px; font-weight: 800; letter-spacing: 2.1px; }
.landing-intro { background: var(--landing-cream); }
.landing-intro-copy { max-width: 1070px; margin: 76px auto 70px; text-align: center; }
.landing-intro-copy h2, .landing-product-copy h2, .landing-community-head h2, .landing-final h2 { margin: 17px 0 24px; font: 800 clamp(42px, 5.3vw, 78px)/1 "Manrope"; letter-spacing: clamp(-3.5px, -.3vw, -1.5px); }
.landing-intro-copy h2 em, .landing-community-head h2 em { color: var(--theme-info-ink); }
.landing-intro-copy p { max-width: 710px; margin: 0 auto; color: #687067; font-size: 16px; line-height: 1.75; }
.landing-method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.landing-method-grid article { position: relative; min-height: 315px; padding: 34px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--theme-border); border-radius: 22px; background: color-mix(in srgb, var(--theme-surface) 72%, transparent); overflow: hidden; transition: .25s ease; }
.landing-method-grid article:hover { transform: translateY(-5px); box-shadow: 0 25px 55px rgba(20,28,21,.08); }
.landing-method-grid article > span { position: absolute; top: 28px; left: 30px; color: #9aa098; font: 700 10px "Manrope"; }
.landing-method-grid article > svg { position: absolute; top: 25px; right: 28px; width: 27px; height: 27px; color: #5b665a; }
.landing-method-grid article.featured { color: var(--theme-on-dark); border-color: var(--theme-dark); background: var(--theme-dark); }
.landing-method-grid article.featured::before { content: ""; position: absolute; width: 180px; height: 180px; top: -90px; right: -70px; border-radius: 50%; background: var(--landing-blue); opacity: .95; }
.landing-method-grid article.featured > span { color: rgba(255,255,255,.42); }
.landing-method-grid article.featured > svg { z-index: 1; color: #111; }
.landing-method-grid h3 { position: relative; margin: 0 0 12px; font: 800 23px "Manrope"; letter-spacing: -.7px; }
.landing-method-grid p { position: relative; max-width: 350px; margin: 0; color: #777e75; font-size: 13px; line-height: 1.65; }
.landing-method-grid .featured p { color: rgba(255,255,255,.55); }
.club-gallery { margin-top: 78px; display: grid; grid-template-columns: 1.15fr .85fr 1fr; grid-template-rows: repeat(2, 260px); gap: 16px; }
.club-photo { position: relative; margin: 0; min-width: 0; overflow: hidden; border-radius: 22px; background: var(--theme-dark); }
.club-photo-main { grid-row: 1 / 3; }
.club-photo img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.club-photo:nth-child(2) img { object-position: center 48%; }
.club-photo:nth-child(3) img { object-position: center 34%; }
.club-photo:nth-child(4) img { object-position: center 48%; }
.club-photo:hover img { transform: scale(1.035); }
.club-photo::after { content: ""; position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, rgba(7,10,8,.82)); pointer-events: none; }
.club-photo figcaption { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 22px; display: grid; gap: 6px; color: #fff; }
.club-photo figcaption span { color: var(--landing-blue); font-size: 8px; font-weight: 900; letter-spacing: 1.7px; text-transform: uppercase; }
.club-photo figcaption strong { font: 750 16px/1.25 "Manrope"; letter-spacing: -.35px; }
.landing-product { min-height: 840px; display: grid; grid-template-columns: minmax(370px, .8fr) minmax(540px, 1.2fr); align-items: center; gap: clamp(55px, 8vw, 130px); color: #fff; background: var(--landing-dark); overflow: hidden; }
.landing-product-copy { position: relative; z-index: 2; }
.landing-product-copy .landing-eyebrow { display: block; margin-top: 70px; color: var(--landing-blue); }
.landing-product-copy h2 { font-size: clamp(42px, 4.7vw, 70px); }
.landing-product-copy p { max-width: 550px; color: rgba(255,255,255,.55); font-size: 15px; line-height: 1.75; }
.landing-product-copy ul { margin: 30px 0 34px; padding: 0; display: grid; gap: 14px; list-style: none; }
.landing-product-copy li { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.82); font-size: 13px; }
.landing-product-copy li i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #111; background: var(--landing-blue); }
.landing-product-copy li svg { width: 13px; }
.landing-product-visual { position: relative; height: 610px; }
.product-browser { position: absolute; z-index: 1; top: 38px; left: 0; width: min(880px, 67vw); padding: 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 20px; background: rgba(255,255,255,.09); box-shadow: 0 45px 110px rgba(0,0,0,.55); transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); transform-origin: left center; overflow: hidden; }
.product-browser-bar { height: 32px; padding: 0 10px; display: flex; align-items: center; gap: 6px; }
.product-browser-bar > span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.25); }
.product-browser-bar small { margin: auto; padding-right: 36px; color: rgba(255,255,255,.3); font-size: 8px; }
.product-browser > img { width: 100%; display: block; border-radius: 12px; }
.product-phone { position: absolute; z-index: 3; width: 190px; right: 1vw; bottom: 0; padding: 8px; border: 1px solid rgba(255,255,255,.25); border-radius: 28px; background: #090c0a; box-shadow: 0 35px 75px rgba(0,0,0,.55); overflow: hidden; }
.product-phone > span { position: absolute; z-index: 2; top: 13px; left: 50%; width: 55px; height: 13px; border-radius: 20px; background: #080b09; transform: translateX(-50%); }
.product-phone img { width: 100%; display: block; border-radius: 20px; }
.product-float { position: absolute; z-index: 4; left: 4%; bottom: 48px; padding: 14px 17px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(255,255,255,.17); border-radius: 14px; background: rgba(22,28,23,.92); box-shadow: 0 20px 45px rgba(0,0,0,.34); backdrop-filter: blur(15px); }
.product-float i { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #101410; background: var(--landing-blue); }
.product-float svg { width: 15px; }
.product-float strong, .product-float small { display: block; }
.product-float strong { font-size: 11px; }
.product-float small { margin-top: 4px; color: rgba(255,255,255,.43); font-size: 8px; }
.landing-community { background: var(--theme-surface); }
.landing-community-head { margin: 70px 0 60px; display: grid; grid-template-columns: 1.4fr .6fr; align-items: end; gap: 70px; }
.landing-community-head h2 { margin-bottom: 0; }
.landing-community-head h2 em { color: var(--theme-info-ink); }
.landing-community-head > p { margin: 0 0 7px; color: #747b73; font-size: 14px; line-height: 1.75; }
.landing-community-grid { display: grid; grid-template-columns: .95fr 1.25fr .8fr; gap: 16px; }
.landing-community-grid article { min-height: 390px; border-radius: 22px; overflow: hidden; }
.community-quote { padding: 34px; display: flex; flex-direction: column; color: var(--theme-on-dark); background: var(--theme-dark); }
.quote-mark { color: var(--landing-blue); font: 800 64px/.8 Georgia, serif; }
.community-quote blockquote { margin: auto 0; font: 700 clamp(22px, 2vw, 30px)/1.35 "Manrope"; letter-spacing: -1px; }
.community-quote div { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.community-quote strong, .community-quote small { display: block; }
.community-quote strong { font-size: 11px; }
.community-quote small { margin-top: 4px; color: rgba(255,255,255,.45); font-size: 9px; }
.community-dashboard { position: relative; background: var(--theme-info); }
.community-dashboard > img { position: absolute; width: 52%; right: 8%; top: 34px; border-radius: 21px; box-shadow: 0 20px 55px rgba(16,25,20,.18); }
.community-dashboard > div { position: absolute; left: 32px; bottom: 31px; }
.community-dashboard span { color: #68766e; font-size: 8px; font-weight: 800; letter-spacing: 1.7px; }
.community-dashboard strong { display: block; margin-top: 9px; font: 800 20px/1.2 "Manrope"; letter-spacing: -.6px; }
.community-stat { position: relative; padding: 34px; display: flex; flex-direction: column; color: #101410; background: var(--landing-blue); }
.community-stat > strong { font: 800 clamp(60px, 6vw, 96px)/.9 "Manrope"; letter-spacing: -5px; }
.community-stat sup { font-size: .35em; vertical-align: top; letter-spacing: 0; }
.community-stat p { max-width: 250px; margin: auto 0 0; font: 700 17px/1.4 "Manrope"; letter-spacing: -.4px; }
.community-stat button { position: absolute; right: 27px; bottom: 27px; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: #101410; cursor: pointer; }
.community-stat button:hover { transform: rotate(-12deg); }
.landing-final { min-height: 520px; padding: clamp(80px, 9vw, 135px) clamp(24px, 7vw, 112px); display: flex; align-items: flex-end; justify-content: space-between; gap: 45px; color: #fff; background: #151a16; }
.landing-final h2 { margin-bottom: 0; font-size: clamp(52px, 7vw, 104px); text-transform: uppercase; }
.landing-final .landing-kicker { margin-bottom: 22px; }
.light-cta { flex: 0 0 auto; margin-bottom: 12px; background: #fff; box-shadow: none; }
.landing-footer { padding: 30px clamp(24px, 5vw, 76px); display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: center; gap: 30px; color: #fff; background: #0c0f0d; border-top: 1px solid rgba(255,255,255,.08); }
.landing-footer p { margin: 0; color: rgba(255,255,255,.4); font-size: 11px; text-align: center; }
.landing-footer > button { justify-self: center; display: inline-flex; align-items: center; gap: 8px; border: 0; color: rgba(255,255,255,.75); background: none; cursor: pointer; font-size: 11px; }
.landing-footer > button svg { width: 14px; }
.landing-footer > small { color: rgba(255,255,255,.35); font-size: 9px; }
.auth-back { margin: -8px 0 28px; padding: 0; display: inline-flex; align-items: center; gap: 8px; border: 0; color: #747b73; background: none; cursor: pointer; font-size: 10px; font-weight: 700; }
.auth-back:hover { color: #151a16; }

.sidebar { position: fixed; inset: 0 auto 0 0; width: 250px; padding: 26px 18px 20px; display: flex; flex-direction: column; color: #fff; background: var(--sidebar); z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 9px 35px; }
.brand-logo { width: 48px; height: 39px; padding: 5px; object-fit: contain; border-radius: 10px; background: #111; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--sidebar); background: var(--acid); transform: rotate(-5deg); box-shadow: inset 0 -4px 0 rgba(0,0,0,.08); }
.brand-mark span { font: 800 23px/1 "Manrope"; transform: rotate(5deg); }
.brand strong { display: block; font: 800 17px/1.2 "Manrope"; letter-spacing: -.3px; }
.brand small { display: block; margin-top: 3px; color: #858d83; font-size: 11px; letter-spacing: .3px; }
.side-nav { min-height: 0; display: grid; gap: 4px; overflow-y: auto; scrollbar-width: none; }
.side-nav::-webkit-scrollbar { display: none; }
.nav-section-label { margin: 13px 10px 4px; color: #5f685f; font-size: 8px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.nav-section-label:first-child { margin-top: 0; }
.nav-item { position: relative; width: 100%; height: 48px; padding: 0 13px; display: flex; align-items: center; gap: 13px; border: 0; border-radius: 12px; color: #8e968d; background: transparent; cursor: pointer; text-align: left; transition: .2s ease; }
.nav-item:hover { color: #fff; background: #1b1f1b; }
.nav-item.active { color: #111; background: var(--acid); font-weight: 700; }
.nav-item svg { width: 19px; }
.nav-item em { margin-left: auto; min-width: 28px; padding: 3px 6px; border-radius: 8px; color: #b8beb5; background: #242924; font-size: 10px; font-style: normal; text-align: center; }
.nav-item.active em { color: #4d581e; background: rgba(17,17,17,.1); }
.nav-item i { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--orange); opacity: 0; }
.nav-item i.visible { opacity: 1; }
.source-card { margin-top: 12px; padding: 14px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid #292e29; border-radius: 14px; background: #181c18; }
.source-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #09110b; background: #84d7a0; font-size: 9px; font-weight: 800; }
.source-card div { min-width: 0; }
.source-card strong, .sidebar-foot strong { display: block; font-size: 12px; }
.source-card small, .sidebar-foot small { display: block; margin-top: 3px; color: #737b73; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 4px rgba(216,255,87,.09); }
.sidebar-foot { margin-top: 13px; padding: 13px 10px 0; display: flex; align-items: center; gap: 10px; border-top: 1px solid #252a25; }
.sidebar-foot > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #161a16; background: #eee; font-size: 10px; font-weight: 800; }
.app-main { width: calc(100% - 250px); min-width: 0; min-height: 100vh; margin-left: 250px; }
.topbar { position: sticky; top: 0; z-index: 15; height: 78px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(223,226,217,.9); background: rgba(245,246,241,.9); backdrop-filter: blur(16px); }
.mobile-brand { display: none; }
.global-search { position: relative; min-width: 0; width: min(410px, 38vw); }
.global-search > svg, .inline-search svg { position: absolute; left: 14px; top: 50%; width: 18px; transform: translateY(-50%); color: #92978f; pointer-events: none; }
.global-search input, .inline-search input { width: 100%; height: 44px; padding: 0 52px 0 43px; border: 1px solid #e2e5dd; border-radius: 12px; color: var(--ink); background: #fff; }
.global-search input::placeholder, .inline-search input::placeholder { color: #a0a59d; }
.global-search kbd { position: absolute; right: 10px; top: 10px; padding: 4px 7px; border: 1px solid #e1e4dc; border-radius: 6px; color: #989d95; background: #f7f8f4; font: 500 10px "DM Sans"; }
.search-results { position: absolute; top: 51px; left: 0; right: 0; padding: 7px; display: none; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.search-results.visible { display: block; }
.search-result { width: 100%; padding: 10px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; text-align: left; }
.search-result:hover { background: #f4f6ef; }
.search-result .avatar { width: 32px; height: 32px; font-size: 10px; }
.search-result span { display: grid; }
.search-result small { color: var(--muted); }
.top-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.staff-mode-switch { min-height: 48px; padding: 5px 9px 5px 6px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 14px; align-items: center; gap: 9px; border: 1px solid #d9dfd2; border-radius: 13px; color: var(--ink); background: rgba(255,255,255,.84); text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.staff-mode-switch:hover { border-color: #bdc9b3; background: #fff; transform: translateY(-1px); }
.staff-mode-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #273021; background: var(--acid); }
.staff-mode-icon svg { width: 17px; height: 17px; }
.staff-mode-copy { min-width: 0; }
.staff-mode-copy strong, .staff-mode-copy small { display: block; white-space: nowrap; }
.staff-mode-copy strong { font: 800 11px "Manrope"; }
.staff-mode-copy small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.staff-mode-arrow { width: 13px; height: 13px; color: #8c9587; }
.staff-mode-switch.is-unlinked .staff-mode-icon { color: #6f756c; background: #eef0ea; }
.staff-mode-switch.is-unlinked .staff-mode-copy small { color: #9a685f; }
.period-pill { height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.65); color: #656b63; font-size: 12px; font-weight: 600; }
.period-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.primary-button, .quiet-button, .full-button, .text-button, .icon-button { border: 0; cursor: pointer; }
.primary-button { height: 43px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 11px; color: #141714; background: var(--acid); font-weight: 700; white-space: nowrap; box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); transition: .18s ease; }
.primary-button:hover { background: #e2ff7a; transform: translateY(-1px); }
.primary-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.primary-button svg { width: 18px; }
.is-loading { pointer-events: none; cursor: wait !important; }
.button-spinner { width: 15px; height: 15px; flex: 0 0 auto; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: button-spin .7s linear infinite; }
@keyframes button-spin { to { transform: rotate(360deg); } }
.quiet-button { height: 42px; padding: 0 15px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #dfe2da; border-radius: 11px; background: rgba(255,255,255,.7); color: #565d54; font-weight: 600; }
.quiet-button:hover { background: #fff; }
.quiet-button svg { width: 17px; }
.view { width: 100%; min-width: 0; display: none; padding: 36px 34px 50px; max-width: 1480px; margin: 0 auto; }
.view.active { display: block; animation: enter .28s ease; }
@keyframes enter { from { opacity: 0; transform: translateY(5px); } }
.page-heading { margin-bottom: 27px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.page-heading.compact { align-items: center; }
.eyebrow { display: block; margin-bottom: 8px; color: #879076; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.page-heading h1 { margin: 0; font: 800 30px/1.2 "Manrope"; letter-spacing: -1.2px; }
.page-heading h1 span { font-size: 25px; }
.page-heading p { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-card { min-width: 0; min-height: 158px; padding: 19px 20px 17px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 3px 12px rgba(27,31,25,.025); }
.metric-card.accent { color: #f8fff2; border-color: #1b201b; background: #181c18; box-shadow: 0 12px 32px rgba(16,20,16,.14); }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: #767d73; font-size: 12px; font-weight: 600; }
.accent .metric-top { color: #aeb5ac; }
.metric-icon { min-width: 35px; height: 28px; padding: 0 7px; display: grid; place-items: center; border-radius: 8px; color: #1a1e18; background: var(--acid); font-size: 9px; font-weight: 800; }
.metric-icon.light { color: #596057; background: #f0f2eb; font-size: 15px; }
.metric-card > strong { margin: 18px 0 14px; font: 800 28px/1 "Manrope"; letter-spacing: -1px; }
.metric-card > strong small { color: #8f968d; font-size: 12px; letter-spacing: 0; }
.accent > strong small { color: var(--acid); }
.metric-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; color: #9ba097; font-size: 10px; }
.metric-foot .positive { padding: 4px 7px; border-radius: 7px; color: #287e53; background: #eaf8ef; font-weight: 700; }
.accent .metric-foot .positive { color: var(--acid); background: rgba(216,255,87,.09); }
.club-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.club-metric-card { min-height: 126px; padding: 18px; display: flex; align-items: flex-start; gap: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.club-metric-card.accent { color: #f7fbf7; border-color: #1b201b; background: #181c18; box-shadow: 0 12px 32px rgba(16,20,16,.12); }
.club-metric-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: #151915; background: var(--acid); }
.club-metric-icon svg { width: 18px; }
.club-metric-card > div { min-width: 0; display: grid; }
.club-metric-card small { color: #7c847a; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.club-metric-card.accent small { color: #adb4ab; }
.club-metric-card strong { margin-top: 9px; font: 800 29px/1 "Manrope"; }
.club-metric-card em { margin-top: 9px; overflow: hidden; color: #92998f; font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.club-metric-card.accent em { color: var(--acid); }
.club-dashboard-grid { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: 14px; }
.dashboard-finance-panel { grid-column: 1 / -1; }
.dashboard-class-list, .dashboard-attention-list { display: grid; }
.dashboard-class-row, .dashboard-attention-row { width: 100%; min-height: 70px; padding: 11px 2px; display: grid; align-items: center; gap: 12px; border: 0; border-top: 1px solid #edf0e9; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.dashboard-class-row:first-child, .dashboard-attention-row:first-child { border-top: 0; }
.dashboard-class-row { grid-template-columns: 66px minmax(0, 1fr) auto 20px; }
.dashboard-class-row time { display: grid; gap: 4px; }
.dashboard-class-row time strong { font: 800 13px "Manrope"; }
.dashboard-class-row time small, .dashboard-class-row > span small, .dashboard-class-row > em small { color: var(--muted); font-size: 9px; }
.dashboard-class-row > span strong, .dashboard-class-row > span small, .dashboard-class-row > em strong, .dashboard-class-row > em small { display: block; }
.dashboard-class-row > span strong { font-size: 11px; }
.dashboard-class-row > span small { margin-top: 4px; }
.dashboard-class-row > em { min-width: 62px; font-style: normal; text-align: right; }
.dashboard-class-row > em strong { font: 800 12px "Manrope"; }
.dashboard-class-row > svg, .dashboard-attention-row > svg { width: 16px; color: #9da39a; }
.dashboard-actions-panel { align-self: start; }
.dashboard-quick-actions { display: grid; gap: 7px; }
.dashboard-quick-actions > button { width: 100%; min-height: 61px; padding: 9px; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 10px; border: 1px solid #e6e9e2; border-radius: 12px; color: var(--ink); background: #fafbf8; text-align: left; cursor: pointer; }
.dashboard-quick-actions > button:hover { border-color: #cfd5ca; background: #fff; transform: translateY(-1px); }
.dashboard-quick-actions > button > span { width: 38px; height: 38px; grid-row: 1 / span 2; display: grid; place-items: center; border-radius: 10px; color: #172017; background: #eaf4ce; }
.dashboard-quick-actions svg { width: 17px; }
.dashboard-quick-actions strong, .dashboard-quick-actions small { display: block; }
.dashboard-quick-actions strong { align-self: end; font-size: 12px; }
.dashboard-quick-actions small { align-self: start; color: var(--muted); font-size: 10px; line-height: 1.35; }
.dashboard-attention-row { grid-template-columns: 38px minmax(0, 1fr) auto 18px; }
.dashboard-attention-row .avatar { width: 38px; height: 38px; }
.dashboard-attention-row > span strong, .dashboard-attention-row > span small { display: block; }
.dashboard-attention-row > span strong { font-size: 10px; }
.dashboard-attention-row > span small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.dashboard-finance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.dashboard-finance-grid > div { padding: 15px 17px; border-left: 1px solid var(--line); background: #fafbf8; }
.dashboard-finance-grid > div:first-child { border-left: 0; }
.dashboard-finance-grid span, .dashboard-finance-grid strong { display: block; }
.dashboard-finance-grid span { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.dashboard-finance-grid strong { margin-top: 7px; font: 800 15px "Manrope"; }
.dashboard-finance-grid strong small { color: inherit; font-size: inherit; }
.dashboard-grid { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr); gap: 14px; }
.panel { min-width: 0; padding: 21px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 3px 12px rgba(27,31,25,.025); }
.panel-heading { margin-bottom: 21px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.panel-heading h2 { margin: 0; font: 750 15px/1.2 "Manrope"; letter-spacing: -.25px; }
.panel-heading p { margin: 5px 0 0; color: #93988f; font-size: 11px; }
.mini-select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: #70766d; font-size: 10px; font-weight: 700; }
.mini-select b { margin-left: 7px; }
.chart-wrap { height: 230px; display: flex; gap: 14px; }
.y-axis { padding-bottom: 27px; display: flex; flex-direction: column; justify-content: space-between; color: #a2a79f; font-size: 9px; text-align: right; }
.bar-chart { flex: 1; padding: 0 4px; display: flex; align-items: stretch; gap: 11px; border-bottom: 1px solid #dfe2da; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(25% - 1px), #eff1eb 25%); }
.bar-item { flex: 1; min-width: 24px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.bar { position: relative; width: min(32px, 76%); min-height: 3px; border-radius: 6px 6px 2px 2px; background: #d9ded3; transition: height .6s cubic-bezier(.2,.8,.2,1); }
.bar.highlight { background: var(--acid); box-shadow: 0 5px 14px rgba(184,224,45,.2); }
.bar-value { position: absolute; top: -20px; left: 50%; opacity: 0; transform: translateX(-50%); padding: 3px 5px; border-radius: 5px; color: #fff; background: #202420; font-size: 8px; white-space: nowrap; transition: .15s; }
.bar:hover .bar-value { opacity: 1; }
.bar-label { height: 19px; color: #858b82; font-size: 9px; white-space: nowrap; }
.quick-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.quick-product { padding: 10px; display: flex; align-items: center; gap: 9px; border: 1px solid #eceee8; border-radius: 11px; background: #fafbf8; }
.product-badge { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: #fff; font-size: 8px; font-weight: 800; letter-spacing: -.2px; }
.product-badge svg { width: 20px; height: 20px; stroke-width: 1.9; }
.quick-product div { min-width: 0; }
.quick-product strong { display: block; overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.quick-product small { display: block; margin-top: 3px; color: #9ca197; font-size: 9px; }
.quick-add { width: 27px; height: 27px; margin-left: auto; display: grid; place-items: center; border: 1px solid #e2e5dd; border-radius: 8px; background: #fff; cursor: pointer; }
.quick-add:hover { color: #121512; background: var(--acid); border-color: var(--acid); }
.quick-add svg { width: 14px; }
.full-button { width: 100%; height: 42px; margin-top: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; color: #fff; background: #191d19; font-size: 11px; font-weight: 700; }
.full-button svg { width: 16px; }
.ranking-panel, .product-panel { min-height: 325px; }
.attendance-preview-panel { grid-column: 1 / -1; min-height: 180px; }
.attendance-preview { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.attendance-preview-row { min-width: 0; padding: 10px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 11px; background: #fafbf8; cursor: pointer; text-align: left; }
.attendance-preview-row > span:nth-child(2) { min-width: 0; }
.attendance-preview-row strong, .attendance-preview-row small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.attendance-preview-row strong { font-size: 10px; }
.attendance-preview-row small { margin-top: 3px; color: #92988f; font-size: 8px; }
.attendance-preview-row em { grid-column: 1 / -1; color: #28704a; font-size: 8px; font-style: normal; font-weight: 800; }
.attendance-preview-more { grid-column: 1 / -1; min-height: 34px; border: 0; color: #687066; background: transparent; cursor: pointer; font-size: 10px; font-weight: 700; }
.empty-state.compact { padding: 28px 16px; }
.empty-state.compact span { width: 38px; height: 38px; border-radius: 11px; font-size: 16px; }
.text-button { padding: 5px; display: flex; align-items: center; gap: 2px; color: #727970; background: transparent; font-size: 10px; font-weight: 700; }
.text-button svg { width: 14px; }
.ranking-list, .popular-list { display: grid; }
.ranking-row { padding: 10px 0; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; border-top: 1px solid #eff1ec; cursor: pointer; }
.ranking-row:first-child { padding-top: 0; border-top: 0; }
.rank { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: #8b9187; background: #f0f2ed; font-size: 9px; font-weight: 800; }
.ranking-row:first-child .rank { color: #1b1f19; background: var(--acid); }
.ranking-person { display: flex; align-items: center; gap: 9px; min-width: 0; }
.avatar { position: relative; width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #535d54; overflow: hidden; font-size: 10px; font-weight: 800; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.ranking-person strong { display: block; overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.ranking-person small { color: #989e95; font-size: 9px; }
.ranking-total { text-align: right; }
.ranking-total strong { display: block; font: 700 12px "Manrope"; }
.ranking-total small { color: #a0a59e; font-size: 9px; }
.popular-row { padding: 11px 0; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 11px; border-top: 1px solid #eff1ec; }
.popular-row:first-child { padding-top: 0; border-top: 0; }
.popular-info strong { display: block; font-size: 11px; }
.progress { height: 4px; margin-top: 7px; overflow: hidden; border-radius: 4px; background: #ecefe8; }
.progress span { display: block; height: 100%; border-radius: inherit; background: #1c211c; }
.popular-count { color: #737a71; font-size: 10px; font-weight: 700; }
.data-note { margin-top: 14px; padding: 13px 16px; display: flex; align-items: center; gap: 12px; border: 1px solid #e2e5d9; border-radius: 13px; color: #737970; background: #f0f3e9; font-size: 11px; }
.data-note > span { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #31382d; background: #dde6c3; font-family: serif; font-weight: bold; }
.data-note p { margin: 0; line-height: 1.5; }
.data-note strong { color: #4a5147; }
.directory-panel { padding: 0; overflow: hidden; }
.directory-tools { padding: 18px 20px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }
.inline-search { position: relative; width: 300px; }
.inline-search input { height: 40px; padding-right: 15px; background: #f8f9f5; }
.filter-tabs { padding: 3px; display: flex; border-radius: 10px; background: #eff1eb; }
.filter-tabs button { height: 32px; padding: 0 13px; border: 0; border-radius: 8px; color: #858b82; background: transparent; cursor: pointer; font-size: 10px; font-weight: 700; }
.filter-tabs button.active { color: #222722; background: #fff; box-shadow: 0 2px 8px rgba(31,35,29,.08); }
.result-count { margin-left: auto; color: #959b91; font-size: 10px; }
.member-table-wrap { overflow-x: auto; }
.member-table { width: 100%; border-collapse: collapse; }
.member-table th { height: 43px; padding: 0 20px; color: #949a91; background: #fafbf8; font-size: 9px; letter-spacing: .7px; text-align: left; text-transform: uppercase; }
.member-table td { height: 64px; padding: 0 20px; border-top: 1px solid #eef0ea; font-size: 11px; }
.member-name { display: flex; align-items: center; gap: 10px; }
.member-name strong { display: block; font-size: 12px; }
.member-name small { color: #999f96; font-size: 9px; }
.payment-status { display: inline-flex; min-height: 24px; padding: 0 8px; align-items: center; border-radius: 999px; font-size: 8px; font-weight: 800; white-space: nowrap; }
.payment-status.unpaid { color: #9a3d3d; background: #fff0f0; }
.payment-status.partial { color: #8a621e; background: #fff4d9; }
.payment-status.paid { color: #28704a; background: #e8f7ee; }
.payment-status.none { color: #747b72; background: #f0f2ed; }
.balance-amount.due { color: #9a3d3d; }
.table-muted { color: var(--muted); font-size: 10px; }
.favorite-chips { display: flex; gap: 5px; }
.favorite-chip { padding: 5px 7px; border-radius: 7px; color: #696f67; background: #f1f3ee; font-size: 8px; white-space: nowrap; }
.row-arrow { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.row-arrow:hover { background: var(--acid); border-color: var(--acid); }
.row-arrow svg { width: 14px; }
.pagination { min-height: 57px; padding: 12px 20px; display: flex; justify-content: center; gap: 5px; border-top: 1px solid var(--line); }
.pagination button { min-width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 10px; }
.pagination button.active { color: #151915; background: var(--acid); border-color: var(--acid); font-weight: 800; }
.catalog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.catalog-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.catalog-card .product-badge { width: 46px; height: 46px; border-radius: 13px; }
.catalog-head { display: flex; align-items: center; gap: 11px; }
.catalog-copy { min-width: 0; flex: 1; }
.catalog-status { padding: 5px 7px; border-radius: 7px; color: #2f855a; background: #eaf7ef; font-size: 8px; font-weight: 700; }
.catalog-status.unused { color: #a26b2a; background: #fff4de; }
.catalog-copy h3 { margin: 0 0 4px; overflow: hidden; font: 700 14px "Manrope"; white-space: nowrap; text-overflow: ellipsis; }
.catalog-copy p { margin: 0; color: #949a91; font-size: 10px; }
.catalog-stats { margin-top: 18px; padding-top: 14px; display: flex; justify-content: space-between; border-top: 1px solid #edf0e9; }
.catalog-stats span { display: grid; gap: 3px; color: #999f96; font-size: 8px; }
.catalog-stats strong { color: #363c35; font-size: 12px; }
.catalog-warning { margin-top: 14px; padding: 17px 19px; display: flex; gap: 13px; border: 1px solid #efdcb5; border-radius: 14px; background: #fff9eb; }
.catalog-warning > span { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; color: #8b5f1d; background: #ffe7af; font-weight: 800; }
.catalog-warning strong { font-size: 12px; }
.catalog-warning p { margin: 5px 0 0; color: #8d7c5f; font-size: 10px; }
.activity-panel { padding: 0; overflow: hidden; }
.attendance-metrics { margin-bottom: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.attendance-metrics article { padding: 19px 21px; display: grid; gap: 7px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.attendance-metrics span { color: #828980; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.attendance-metrics strong { font: 800 28px "Manrope"; }
.attendance-metrics small { color: #989e95; font-size: 10px; }
.attendance-directory { padding: 0; overflow: hidden; }
.attendance-table-wrap { overflow-x: auto; }
.attendance-table { width: 100%; border-collapse: collapse; }
.attendance-table th { height: 43px; padding: 0 20px; color: #949a91; background: #fafbf8; font-size: 9px; letter-spacing: .7px; text-align: left; text-transform: uppercase; }
.attendance-table td { height: 68px; padding: 0 20px; border-top: 1px solid #eef0ea; color: #626960; font-size: 10px; }
.membership-link { padding: 0; display: grid; justify-items: start; gap: 3px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.membership-link small { color: #80877e; font-size: 9px; }
.membership-status { display: inline-flex; min-height: 23px; padding: 0 8px; align-items: center; border-radius: 999px; font-size: 8px; font-weight: 800; white-space: nowrap; }
.membership-status.active { color: #28704a; background: #e8f7ee; }
.membership-status.expiring { color: #8a621e; background: #fff4d9; }
.membership-status.expired, .membership-status.cancelled { color: #9a3d3d; background: #fff0f0; }
.membership-status.paused, .membership-status.upcoming { color: #546581; background: #eef2f8; }
.membership-status.none { color: #747b72; background: #f0f2ed; }
.checkin-button { min-height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px; color: #151915; background: var(--acid); cursor: pointer; font-size: 9px; font-weight: 800; white-space: nowrap; }
.checkin-button svg { width: 14px; }
.checkin-button.checked { color: #28704a; background: #e8f7ee; cursor: default; }
.today-panel { margin-top: 14px; }
.today-checkin-list { display: grid; }
.today-checkin-row { padding: 10px 0; display: grid; grid-template-columns: 36px 1fr auto 32px; align-items: center; gap: 10px; border-top: 1px solid #edf0e9; }
.today-checkin-row:first-child { border-top: 0; }
.today-checkin-row strong, .today-checkin-row small { display: block; }
.today-checkin-row strong { font-size: 11px; }
.today-checkin-row small { margin-top: 3px; color: #92988f; font-size: 9px; }
.activity-summary { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.activity-summary div { padding: 21px; border-left: 1px solid var(--line); }
.activity-summary div:first-child { border-left: 0; }
.activity-summary span { display: block; color: #92988e; font-size: 9px; text-transform: uppercase; letter-spacing: .7px; }
.activity-summary strong { display: block; margin-top: 8px; font: 700 18px "Manrope"; }
.activity-list { min-height: 330px; padding: 10px 21px; }
.activity-sensitive-zone { min-height: 76px; padding: 13px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); background: #fafbf8; }
.activity-sensitive-zone strong, .activity-sensitive-zone small { display: block; }
.activity-sensitive-zone strong { font-size: 11px; }
.activity-sensitive-zone small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.activity-sensitive-zone .danger-button { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.activity-sensitive-zone .danger-button svg { width: 15px; height: 15px; }
.activity-row { padding: 15px 3px; display: grid; grid-template-columns: 42px 1fr auto auto; align-items: center; gap: 13px; border-top: 1px solid #edf0e9; }
.activity-row:first-child { border-top: 0; }
.activity-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #263021; background: #e8f5bd; font-size: 16px; }
.payment-activity .activity-icon { color: #236044; background: #e5f6eb; }
.payment-activity .activity-amount strong { color: #28704a; }
.activity-copy strong { display: block; font-size: 11px; }
.activity-copy span { color: #90968d; font-size: 10px; }
.activity-amount { text-align: right; }
.activity-amount strong { display: block; font: 700 12px "Manrope"; }
.activity-amount small { color: #9ba198; font-size: 9px; }
.empty-state { padding: 75px 20px; color: #8c9389; text-align: center; }
.empty-state span { width: 50px; height: 50px; margin: 0 auto 13px; display: grid; place-items: center; border-radius: 15px; background: #f0f3e9; font-size: 22px; }
.empty-state strong { display: block; color: #5f665d; font-size: 12px; }
.empty-state p { margin: 5px 0; font-size: 10px; }
.backdrop { position: fixed; inset: 0; z-index: 39; opacity: 0; visibility: hidden; background: rgba(10,13,10,.36); backdrop-filter: blur(2px); transition: .22s; }
.backdrop.visible { opacity: 1; visibility: visible; }
.member-drawer { position: fixed; z-index: 40; top: var(--app-offset-top); right: 0; width: min(440px, 94vw); height: var(--app-height); padding: 27px; overflow-y: auto; transform: translateX(102%); background: #fff; box-shadow: -20px 0 60px rgba(17,20,16,.16); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.member-drawer.visible { transform: translateX(0); }
.drawer-close { position: absolute; right: 22px; top: 22px; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.icon-button:hover { background: #f2f4ef; }
.icon-button svg { width: 17px; }
.drawer-profile { padding-top: 35px; text-align: center; }
.drawer-profile .avatar { width: 64px; height: 64px; margin: auto; border-radius: 18px; font-size: 17px; }
.drawer-profile h2 { margin: 14px 0 4px; font: 800 20px "Manrope"; }
.drawer-profile p { margin: 0; color: #999f95; font-size: 10px; }
.drawer-membership { margin-top: 22px; padding: 13px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 14px; background: #fafbf8; }
.drawer-membership > div { min-width: 0; display: grid; justify-items: start; gap: 5px; }
.drawer-membership strong, .drawer-membership small { display: block; }
.drawer-membership strong { font-size: 11px; }
.drawer-membership small { color: #92988f; font-size: 8px; }
.drawer-membership > button:not(.danger-icon) { min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; color: #646c62; background: #fff; cursor: pointer; font-size: 9px; font-weight: 700; }
.drawer-checkin { width: 100%; min-height: 42px; margin-top: 9px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 11px; color: #151915; background: var(--acid); cursor: pointer; font-size: 10px; font-weight: 800; }
.drawer-checkin svg { width: 15px; }
.drawer-checkin.checked { color: #28704a; background: #e8f7ee; cursor: default; }
.payment-summary { margin-top: 22px; padding: 15px; display: grid; gap: 7px; border: 1px solid #e4e8de; border-radius: 14px; background: #f7f9f4; }
.payment-summary.partial { border-color: #eedcae; background: #fffbef; }
.payment-summary.unpaid { border-color: #efd2d2; background: #fff8f8; }
.payment-summary.paid { border-color: #cce6d6; background: #f1fbf5; }
.payment-summary > strong { font: 750 15px "Manrope"; }
.payment-summary > small { color: #92988f; font-size: 9px; }
.payment-summary .payment-status { width: max-content; }
.drawer-kpis { margin: 10px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.drawer-kpi { padding: 14px; border-radius: 13px; background: #f5f7f1; text-align: left; }
.drawer-kpi span { color: #93998f; font-size: 9px; }
.drawer-kpi strong { display: block; margin-top: 6px; font: 750 14px "Manrope"; }
.drawer-kpi.paid strong { color: #28704a; }
.drawer-kpi.due strong { color: #9a3d3d; }
.cash-payment-button { width: 100%; min-height: 44px; margin-top: 5px; border: 0; border-radius: 11px; color: #152116; background: var(--acid); cursor: pointer; font-size: 11px; font-weight: 800; }
.cash-payment-button:disabled { color: #758071; background: #edf0e8; cursor: default; }
.payment-history { padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.payment-row { padding: 10px 0; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; border-top: 1px solid #edf0e9; }
.payment-row:first-of-type { border-top: 0; }
.payment-row-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #28704a; background: #e8f7ee; font-size: 7px; font-weight: 800; }
.payment-row strong, .payment-row small { display: block; }
.payment-row strong { font-size: 10px; }
.payment-row small { margin-top: 3px; color: #92988f; font-size: 8px; }
.payment-row-actions { display: flex; align-items: center; gap: 4px; }
.payment-row-actions button { min-height: 30px; padding: 0 7px; border: 1px solid var(--line); border-radius: 8px; color: #687066; background: #fff; cursor: pointer; font-size: 8px; }
.payment-row-actions button:last-child { color: #a33b3b; }
.payment-empty { margin: 0; padding: 12px 0 3px; color: #92988f; font-size: 10px; }
.drawer-section { margin-top: 24px; }
.drawer-section h3 { margin: 0 0 11px; font: 700 12px "Manrope"; }
.drawer-product { padding: 9px 0; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; border-top: 1px solid #eef0eb; }
.drawer-product:first-of-type { border-top: 0; }
.drawer-product .product-badge { width: 32px; height: 32px; border-radius: 9px; font-size: 7px; }
.drawer-product strong { display: block; font-size: 10px; }
.drawer-product small { color: #9ca198; font-size: 8px; }
.drawer-product > strong { font-size: 11px; }
.drawer-add { width: 100%; margin-top: 22px; }
.heading-actions, .card-actions, .drawer-admin-actions, .activity-actions { display: flex; align-items: center; gap: 8px; }
.card-actions { margin-top: 16px; padding-top: 12px; justify-content: space-between; border-top: 1px solid var(--line); }
.drawer-admin-actions { margin-top: 9px; flex-wrap: wrap; }
.drawer-admin-actions button { flex: 1; white-space: nowrap; }
.activity-actions { justify-content: flex-end; }
.danger-button { min-height: 36px; padding: 0 12px; border: 1px solid #f0d3d3; border-radius: 10px; color: #a33b3b; background: #fff7f7; cursor: pointer; font-size: 10px; font-weight: 700; }
.danger-button:hover { border-color: #d89191; background: #fff0f0; }
.danger-icon { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #f0d3d3; border-radius: 9px; color: #a33b3b; background: #fff8f8; cursor: pointer; font-size: 17px; }
.modal { position: fixed; z-index: 50; top: var(--app-offset-top); right: 0; left: 0; height: var(--app-height); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: .2s; }
.modal.visible { opacity: 1; visibility: visible; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(12,15,12,.58); backdrop-filter: blur(4px); }
.modal-card { position: relative; width: min(680px, calc(100vw - 30px)); max-height: calc(100dvh - 28px); padding: 24px max(24px, env(safe-area-inset-right)) max(24px, calc(16px + env(safe-area-inset-bottom))) max(24px, env(safe-area-inset-left)); overflow-y: auto; overscroll-behavior: contain; scroll-padding-bottom: 90px; border-radius: 22px; background: #fff; box-shadow: 0 28px 80px rgba(0,0,0,.25); transform: translateY(12px) scale(.985); transition: .24s ease; }
.modal.visible .modal-card { transform: none; }
.modal-heading { margin-bottom: 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal-heading > div { min-width: 0; flex: 1; }
.modal-heading h2 { margin: 0; font: 800 20px "Manrope"; letter-spacing: -.6px; }
.field-label, .form-row label > span { display: block; margin-bottom: 7px; color: #5f665d; font-size: 10px; font-weight: 700; }
#staffMemberSelect { width: 100%; height: 48px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: white; font: 700 12px "Manrope"; }
.select-shell { position: relative; }
.select-shell select, .select-shell input, .form-row input { width: 100%; height: 45px; padding: 0 13px; appearance: none; border: 1px solid #dfe3da; border-radius: 11px; color: #272c26; background: #fafbf8; }
.select-shell > span { position: absolute; right: 14px; top: 12px; pointer-events: none; }
.member-combobox input { padding-right: 44px; }
.member-combobox > span { top: 13px; color: #8e958b; }
.member-combobox > span svg { width: 17px; height: 17px; }
.field-hint { display: block; margin-top: 6px; color: #92988f; font-size: 9px; }
.guest-suggestions { position: absolute; z-index: 8; top: 51px; left: 0; right: 0; max-height: 260px; padding: 6px; display: none; overflow-y: auto; border: 1px solid #dfe3da; border-radius: 12px; background: #fff; box-shadow: 0 14px 35px rgba(20,25,20,.15); }
.guest-suggestions.visible { display: block; }
.guest-suggestion { width: 100%; padding: 8px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; text-align: left; }
.guest-suggestion:hover, .guest-suggestion:focus-visible { background: #f2f6e9; }
.guest-suggestion .avatar { width: 32px; height: 32px; flex: 0 0 auto; font-size: 9px; }
.guest-suggestion > span:last-child { display: grid; }
.guest-suggestion strong { font-size: 11px; }
.guest-suggestion small { margin-top: 2px; color: #92988f; font-size: 9px; }
.guest-no-result { padding: 13px 10px; color: #8c9289; font-size: 10px; text-align: center; }
.form-section-title { margin: 20px 0 10px; display: flex; justify-content: space-between; align-items: center; }
.form-section-title span { font-size: 11px; font-weight: 700; }
.form-section-title small { color: #9ba197; font-size: 9px; }
.modal-products { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.modal-product { padding: 9px; display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 9px; border: 1px solid #e8ebe3; border-radius: 11px; }
.modal-product.selected { border-color: #c7e84d; background: #fbfff0; }
.modal-product .product-badge { width: 34px; height: 34px; border-radius: 9px; font-size: 7px; }
.modal-product strong { display: block; font-size: 10px; }
.modal-product small { color: #969c92; font-size: 8px; }
.stepper { display: flex; align-items: center; gap: 5px; }
.stepper button { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #dfe3da; border-radius: 7px; background: #fff; cursor: pointer; font-size: 14px; }
.stepper button:hover { background: var(--acid); border-color: var(--acid); }
.stepper span { min-width: 16px; font-size: 10px; font-weight: 800; text-align: center; }
.product-toggle { width: 100%; min-height: 40px; margin-top: 9px; border: 1px solid var(--line); border-radius: 10px; color: #626a60; background: #f7f8f4; cursor: pointer; font-size: 11px; font-weight: 700; }
.form-row { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-row label > span em { color: #a3a89f; font-size: 8px; font-style: normal; font-weight: 500; }
.modal-total { margin-top: 17px; padding: 14px 15px; display: flex; align-items: center; justify-content: space-between; border-radius: 12px; background: #181c18; color: #fff; }
.modal-total span { color: #abb2a9; font-size: 10px; }
.modal-total strong { color: var(--acid); font: 800 18px "Manrope"; }
.modal-actions { margin-top: 17px; display: flex; justify-content: flex-end; gap: 9px; }
.entity-modal-card { width: min(600px, calc(100vw - 30px)); }
.entity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.entity-field { display: block; }
.entity-field.wide { grid-column: 1 / -1; }
.entity-field > span, .balance-field > span { display: block; margin-bottom: 7px; color: #5f665d; font-size: 10px; font-weight: 700; }
.entity-field input, .entity-field select, .entity-field textarea, .balance-field input { width: 100%; height: 45px; padding: 0 13px; border: 1px solid #dfe3da; border-radius: 11px; color: #272c26; background: #fafbf8; }
.entity-field textarea { min-height: 92px; padding-top: 11px; resize: vertical; font-family: inherit; line-height: 1.5; }
.entity-section-title { padding-top: 8px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }
.entity-section-title span { font-size: 8px; font-weight: 850; letter-spacing: 1.2px; }
.entity-section-title small { color: #92988f; font-size: 8px; }
.recurrence-note { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #f7f9f3; }
.recurrence-note strong { display: block; margin-top: 4px; font-size: 10px; }
.recurrence-options { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.recurrence-days { grid-column: 1 / -1; }
.recurrence-days > div { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.recurrence-days label { cursor: pointer; }
.recurrence-days input { position: absolute; opacity: 0; pointer-events: none; }
.recurrence-days label span { min-height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: #7d857b; background: #fff; font-size: 8px; font-weight: 800; }
.recurrence-days input:checked + span { border-color: #202620; color: #fff; background: #202620; }
.workout-form-head { margin-bottom: 14px; padding: 14px; border-radius: 13px; background: #f4f8eb; }
.workout-form-head h3 { margin: 5px 0; font: 800 17px "Manrope"; }
.workout-form-head p { margin: 0; color: #788074; font-size: 9px; line-height: 1.5; }
.template-exercise-picker { display: grid; gap: 7px; }
.template-exercise-row { padding: 10px; display: grid; grid-template-columns: 20px 1fr minmax(150px, .9fr); align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 11px; background: #fafbf8; }
.template-exercise-row > input[type="checkbox"] { width: 17px; height: 17px; accent-color: #222722; }
.template-exercise-row span strong, .template-exercise-row span small { display: block; }
.template-exercise-row span strong { font-size: 9px; }
.template-exercise-row span small { margin-top: 3px; color: #8b9288; font-size: 7px; }
.template-exercise-row > input:last-child { height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 9px; }
.template-exercise-row > input:disabled { opacity: .45; }
.programming-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 14px; }
.exercise-library, .workout-template-list { display: grid; gap: 8px; }
.exercise-row { padding: 13px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.exercise-row.inactive, .workout-template-card.inactive { opacity: .58; }
.exercise-row span { color: #889086; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.exercise-row h3 { margin: 3px 0; font: 750 11px "Manrope"; }
.exercise-row p { margin: 0; color: #8a9187; font-size: 8px; line-height: 1.4; }
.exercise-row > em { padding: 5px 7px; border-radius: 7px; color: #5b6f2d; background: #eef4df; font-size: 7px; font-style: normal; font-weight: 800; }
.exercise-row > div:last-child, .workout-template-card header > div:last-child { display: flex; align-items: center; gap: 5px; }
.workout-template-card { padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.workout-template-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.workout-template-card header span { color: #858d82; font-size: 7px; font-weight: 800; letter-spacing: .7px; }
.workout-template-card h3 { margin: 4px 0 0; font: 800 13px "Manrope"; }
.workout-template-card > p { margin: 9px 0; color: #858d82; font-size: 8px; line-height: 1.5; }
.workout-template-card ol { margin: 0; padding: 0; display: grid; list-style: none; }
.workout-template-card li { padding: 7px 0; display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #edf0e9; }
.workout-template-card li strong, .workout-template-card li span { font-size: 8px; }
.workout-template-card li span { color: #858d82; text-align: right; }
.entity-field input[type="color"] { padding: 5px; }
.entity-help { margin: -4px 0 16px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.payment-form-summary { margin-bottom: 16px; padding: 14px 15px; display: flex; align-items: center; justify-content: space-between; border-radius: 12px; color: #fff; background: #181c18; }
.payment-form-summary span { color: #abb2a9; font-size: 10px; }
.payment-form-summary strong { color: var(--acid); font: 800 18px "Manrope"; }
.payment-fill-button { width: 100%; min-height: 42px; margin-top: 13px; border: 1px solid #cfe27f; border-radius: 10px; color: #3e4c20; background: #f5fbdc; cursor: pointer; font-size: 10px; font-weight: 800; }
.payment-help { margin: 10px 0 0; text-align: center; }
.membership-form-head { margin-bottom: 16px; padding: 13px; display: flex; align-items: center; gap: 10px; border-radius: 12px; background: #f5f7f1; }
.membership-form-head p { margin: 0; color: #7f867d; font-size: 10px; line-height: 1.45; }
.entity-field > span em { color: #a3a89f; font-size: 8px; font-style: normal; font-weight: 500; }
.balance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.balance-field { padding: 10px; display: grid; grid-template-columns: 1fr 90px; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 11px; }
.balance-field > span { margin: 0; }
.balance-field input { height: 36px; text-align: center; }
.toast { position: fixed; z-index: 60; right: 24px; bottom: 24px; padding: 13px 17px 13px 13px; display: flex; align-items: center; gap: 11px; border-radius: 14px; color: #fff; background: #171b17; box-shadow: 0 16px 45px rgba(10,13,10,.25); opacity: 0; transform: translateY(20px); pointer-events: none; transition: .25s; }
.toast.visible { opacity: 1; transform: none; }
.toast > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #182017; background: var(--acid); }
.toast.error > span { background: #ff8b7a; }
.toast.warning > span { background: #ffd166; }
.toast.info > span { background: var(--sky); }
.toast svg { width: 17px; }
.toast strong { display: block; font-size: 10px; }
.toast small { display: block; margin-top: 3px; color: #979e95; font-size: 9px; }
.confirm-card { width: min(440px, calc(100vw - 30px)); text-align: center; }
.confirm-icon { width: 52px; height: 52px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 15px; color: #a33b3b; background: #fff0f0; }
.confirm-icon svg { width: 23px; height: 23px; }
.confirm-card h2 { margin: 0; font: 800 21px "Manrope"; }
.confirm-card p { margin: 9px 0 22px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.danger-confirm { min-height: 43px; padding: 0 17px; border: 0; border-radius: 11px; color: #fff; background: #a53f3f; cursor: pointer; font-weight: 700; }
.auth-gate { position: fixed; z-index: 100; top: var(--app-offset-top); right: 0; left: 0; height: var(--app-height); display: grid; grid-template-columns: minmax(360px, 1.05fr) minmax(420px, .95fr); background: #f4f5f0; }
.auth-gate.hidden { display: none; }
.auth-visual { position: relative; padding: 58px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; color: #fff; background: #111511; }
.auth-visual::before { content: ""; position: absolute; width: 520px; height: 520px; right: -180px; bottom: -240px; border-radius: 50%; background: var(--acid); opacity: .95; }
.auth-visual::after { content: ""; position: absolute; width: 260px; height: 260px; right: 80px; bottom: -150px; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; }
.auth-visual > img { position: relative; z-index: 1; width: 96px; height: auto; }
.auth-visual > div { position: relative; z-index: 1; max-width: 560px; }
.auth-visual span { color: var(--acid); font-size: 10px; font-weight: 800; letter-spacing: 2px; }
.auth-visual h1 { margin: 18px 0 14px; max-width: 520px; font: 800 clamp(34px, 4vw, 62px)/1.02 "Manrope"; letter-spacing: -2.5px; }
.auth-visual p { max-width: 420px; color: #9ea79d; font-size: 15px; line-height: 1.6; }
.auth-panel { padding: 32px; display: grid; place-items: center; }
.auth-card { width: min(420px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 24px 70px rgba(25,31,24,.1); }
.auth-brand { margin-bottom: 40px; display: flex; align-items: center; gap: 11px; }
.auth-brand img { width: 48px; height: 42px; padding: 5px; object-fit: contain; border-radius: 10px; background: #111; }
.auth-brand strong, .auth-brand small { display: block; }
.auth-brand strong { font: 800 16px "Manrope"; }
.auth-brand small { color: #90968d; font-size: 10px; }
.auth-card h2 { margin: 0; font: 800 27px/1.2 "Manrope"; letter-spacing: -.8px; }
.auth-card > p { margin: 9px 0 25px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.auth-field { display: block; margin-top: 14px; }
.auth-field span { display: block; margin-bottom: 7px; color: #555c53; font-size: 10px; font-weight: 700; }
.auth-field input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #dfe3da; border-radius: 11px; background: #fafbf8; }
.auth-field input[readonly] { color: #687066; background: #f1f3ed; }
.auth-error { min-height: 20px; padding-top: 8px; color: #ad3d3d; font-size: 10px; }
.auth-submit { width: 100%; margin-top: 6px; }
.auth-note { display: block; margin-top: 16px; color: #939a90; font-size: 9px; text-align: center; }
.schedule-toolbar { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.manager-calendar-controls { margin-bottom: 10px; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px; }
.manager-calendar-controls > strong { text-align: center; font: 750 12px "Manrope"; text-transform: capitalize; }
.manager-calendar-controls .quiet-button { width: 42px; min-width: 42px; padding: 0; display: grid; place-items: center; font: 700 24px/1 "Manrope"; }
.manager-calendar-shell { margin-bottom: 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.manager-calendar { min-width: 1050px; display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); }
.manager-mobile-day-strip, .portal-mobile-day-strip { display: none; }
.manager-calendar-day { min-width: 150px; border-left: 1px solid var(--line); cursor: pointer; }
.manager-calendar-day:first-child { border-left: 0; }
.manager-calendar-day > header { min-height: 58px; padding: 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.manager-calendar-day > header > div { display: flex; align-items: center; gap: 8px; }
.manager-calendar-day > header span { color: #899087; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.manager-calendar-day > header strong { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font: 800 11px "Manrope"; }
.manager-calendar-day.today > header strong { color: #182016; background: var(--acid); }
.manager-calendar-day > header button { width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 9px; color: #555f52; background: #f7f8f4; cursor: pointer; font-size: 16px; }
.manager-calendar-events { min-height: 230px; padding: 7px; }
.manager-calendar-events > p { margin: 20px 3px; color: #b1b6af; font-size: 8px; text-align: center; }
.manager-calendar-event { margin-bottom: 7px; padding: 10px; border: 1px solid #dde4d8; border-radius: 11px; background: #f7f9f3; cursor: default; }
.manager-calendar-event.cancelled { border-color: #ead2d2; background: #fff7f7; }
.manager-calendar-event.completed { opacity: .72; }
.manager-calendar-event > div, .manager-calendar-event footer { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.manager-calendar-event > div > span { color: #687165; font-size: 8px; font-weight: 800; }
.manager-calendar-event .class-status { padding: 4px 5px; font-size: 6px; }
.manager-calendar-event h3 { margin: 8px 0 3px; font: 750 11px "Manrope"; }
.manager-calendar-event p, .manager-calendar-event small { display: block; margin: 0; color: #858d82; font-size: 7px; line-height: 1.5; }
.manager-calendar-event small { margin-top: 5px; color: #5f695c; font-weight: 750; }
.manager-calendar-event footer { margin-top: 8px; padding-top: 7px; border-top: 1px solid #e3e8de; }
.manager-calendar-event footer button { padding: 0; border: 0; color: #53614f; background: transparent; cursor: pointer; font-size: 7px; font-weight: 800; }
.announcement-panel { padding: 18px; }
.announcement-list { display: grid; gap: 9px; }
.announcement-row { padding: 15px; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcf9; }
.announcement-row.important { border-color: #ead69f; background: #fffaf0; }
.announcement-row.inactive { opacity: .58; }
.announcement-priority { padding: 5px 7px; border-radius: 7px; color: #546581; background: #eef2f8; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.announcement-row.important .announcement-priority { color: #8a621e; background: #fff0c9; }
.announcement-row h3 { margin: 0 0 4px; font: 750 12px "Manrope"; }
.announcement-row p { margin: 0; color: #70786e; font-size: 9px; line-height: 1.55; }
.announcement-row small { display: block; margin-top: 7px; color: #9aa096; font-size: 8px; }
.announcement-actions { display: flex; align-items: center; gap: 6px; }
.class-schedule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.class-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.class-card.cancelled { opacity: .68; }
.class-card-top, .class-meta, .class-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.class-date { color: #727970; font-size: 9px; font-weight: 700; text-transform: capitalize; }
.class-status { padding: 5px 7px; border-radius: 7px; color: #28704a; background: #e8f7ee; font-size: 8px; font-weight: 800; }
.class-status.cancelled { color: #9a3d3d; background: #fff0f0; }
.class-status.completed { color: #667064; background: #edf0eb; }
.class-card h3 { margin: 16px 0 5px; font: 800 17px "Manrope"; }
.class-card > p { min-height: 31px; margin: 0; color: #90968d; font-size: 10px; line-height: 1.5; }
.class-meta { margin-top: 17px; color: #6f766d; font-size: 9px; }
.class-meta span { display: flex; align-items: center; gap: 6px; }
.class-meta i { width: 8px; height: 8px; border-radius: 50%; }
.capacity-bar { height: 5px; margin-top: 10px; overflow: hidden; border-radius: 5px; background: #edf0e9; }
.capacity-bar span { height: 100%; display: block; border-radius: inherit; background: var(--acid); }
.class-card-actions { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.schedule-empty { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.coaches-panel { margin-top: 14px; }
.coach-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; }
.coach-row { padding: 10px 0; display: grid; grid-template-columns: 36px 1fr auto auto 32px; align-items: center; gap: 9px; border-top: 1px solid #edf0e9; }
.coach-row strong, .coach-row small { display: block; }
.coach-row strong { font-size: 11px; }
.coach-row small { color: #92988f; font-size: 9px; }
.coach-state { color: #8b9188; font-size: 8px; font-weight: 800; }
.coach-state.active { color: #28704a; }
.class-drawer-head { padding: 45px 0 20px; border-bottom: 1px solid var(--line); }
.class-drawer-head h2 { margin: 8px 0 5px; font: 800 23px "Manrope"; }
.class-drawer-head p { margin: 0 0 15px; color: #8a9187; font-size: 10px; }
.class-drawer-head > strong { font-size: 12px; }
.class-roster { margin-top: 12px; }
.class-workout-summary { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.class-workout-summary h3 { margin: 7px 0 5px; font: 800 17px "Manrope"; }
.class-workout-summary > p { margin: 0 0 12px; color: #858d82; font-size: 9px; line-height: 1.55; }
.manager-leaderboard > div { padding: 9px 0; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 8px; border-top: 1px solid #edf0e9; }
.manager-leaderboard b { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #eef2e9; font-size: 8px; }
.manager-leaderboard span, .manager-leaderboard strong { font-size: 9px; }
.manager-leaderboard > p { color: #92988f; font-size: 9px; }
.manager-exercise-plan { margin: 12px 0; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.manager-exercise-plan > div { padding: 9px 10px; display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); }
.manager-exercise-plan > div:first-child { border-top: 0; }
.manager-exercise-plan strong, .manager-exercise-plan span { font-size: 8px; }
.manager-exercise-plan span { color: #858d82; text-align: right; }
.roster-row { padding: 11px 0; display: grid; grid-template-columns: 36px 1fr 125px; align-items: center; gap: 9px; border-top: 1px solid #edf0e9; }
.roster-row:first-child { border-top: 0; }
.roster-row strong, .roster-row small { display: block; }
.roster-row strong { font-size: 10px; }
.roster-row small { color: #92988f; font-size: 8px; }
.roster-row select { width: 100%; height: 34px; padding: 0 7px; border: 1px solid var(--line); border-radius: 8px; color: #596057; background: #fff; font-size: 8px; }
.drawer-account { margin-top: 9px; padding: 13px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; border: 1px solid #dfe5ec; border-radius: 14px; background: #f7f9fc; }
.drawer-account span, .drawer-account strong, .drawer-account small { display: block; }
.drawer-account span { color: #87909a; font-size: 7px; font-weight: 800; letter-spacing: .7px; }
.drawer-account strong { margin-top: 5px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; }
.drawer-account small { margin-top: 3px; color: #8e969e; font-size: 8px; }
.drawer-account button { min-height: 34px; padding: 0 10px; border: 1px solid #dbe1e8; border-radius: 9px; color: #546274; background: #fff; cursor: pointer; font-size: 9px; font-weight: 700; }
.account-form-status { margin-bottom: 16px; padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 12px; background: #f5f7f1; }
.toggle-field { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.toggle-field > span { margin: 0; }
.toggle-field input { width: 20px; height: 20px; }
.member-portal { min-height: 100dvh; color: #222722; background: #f5f6f1; }
.portal-header { height: 76px; padding: 0 max(24px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); }
.portal-brand, .portal-user { display: flex; align-items: center; gap: 11px; }
.portal-brand img { width: 45px; height: 40px; padding: 5px; object-fit: contain; border-radius: 10px; background: #111; }
.portal-brand strong, .portal-brand small { display: block; }
.portal-brand strong { font: 800 14px "Manrope"; }
.portal-brand small { color: #8c9389; font-size: 9px; }
.portal-user span { font-size: 11px; font-weight: 700; }
.portal-main { width: min(1180px, calc(100% - 32px)); margin: auto; padding: 42px 0 70px; }
.portal-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.portal-hero h1 { margin: 8px 0 7px; font: 800 36px "Manrope"; }
.portal-hero p { margin: 0; color: #7f867d; font-size: 13px; }
.portal-membership-card { margin-top: 24px; padding: 24px; display: flex; align-items: center; justify-content: space-between; border-radius: 20px; color: #fff; background: #171b17; overflow: hidden; }
.portal-alerts { margin-top: 16px; display: grid; gap: 8px; }
.portal-alert { padding: 14px 16px; border: 1px solid #dce6d4; border-radius: 14px; background: #f5f9ef; }
.portal-alert.important { border-color: #ead69f; background: #fff8e7; }
.portal-alert.reminder { border-color: #cdd8ed; background: #f3f6fb; }
.portal-alert strong { font: 750 11px "Manrope"; }
.portal-alert p { margin: 4px 0 0; color: #70786e; font-size: 9px; line-height: 1.5; }
.portal-membership-card h2 { margin: 12px 0 5px; font: 800 22px "Manrope"; }
.portal-membership-card p { margin: 0; color: #a5aca2; font-size: 11px; }
.portal-membership-icon { width: 80px; height: 80px; display: grid; place-items: center; border-radius: 24px; color: #172016; background: var(--acid); font: 800 25px "Manrope"; transform: rotate(5deg); }
.portal-account-summary { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.portal-account-summary article { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.portal-account-summary span, .portal-account-summary small { display: block; color: #8c9389; font-size: 8px; }
.portal-account-summary span { font-weight: 800; letter-spacing: .08em; }
.portal-account-summary strong { margin: 7px 0 4px; display: block; font: 800 18px "Manrope"; }
.portal-tabs { position: sticky; z-index: 12; top: 12px; margin-top: 22px; padding: 5px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 8px 24px rgba(29,35,29,.06); backdrop-filter: blur(14px); }
.portal-tabs button { min-height: 40px; padding: 0 13px; border: 0; border-radius: 10px; color: #7f877d; background: transparent; cursor: pointer; font: 750 9px "Manrope"; }
.portal-tabs button.active { color: #fff; background: #222722; }
.portal-tab-panel { animation: portal-panel-in .22s ease; }
@keyframes portal-panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.portal-section { margin-top: 34px; }
.portal-section-heading { margin-bottom: 15px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.portal-section-heading h2 { margin: 6px 0 0; font: 800 24px "Manrope"; }
.portal-schedule-actions { display: flex; align-items: center; gap: 9px; }
.portal-view-toggle { padding: 3px; display: flex; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.portal-view-toggle button { min-height: 29px; padding: 0 10px; border: 0; border-radius: 7px; color: #7f867d; background: transparent; font: 700 8px "Manrope"; cursor: pointer; }
.portal-view-toggle button.active { color: #fff; background: #222722; }
.portal-calendar-controls { margin-bottom: 10px; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px; }
.portal-calendar-controls strong { text-align: center; font: 750 12px "Manrope"; text-transform: capitalize; }
.portal-calendar-controls .quiet-button { width: 42px; min-width: 42px; padding: 0; display: grid; place-items: center; font: 700 24px/1 "Manrope"; }
.portal-calendar { display: grid; grid-template-columns: repeat(7, minmax(145px, 1fr)); border: 1px solid var(--line); border-radius: 17px; background: #fff; overflow-x: auto; }
.portal-calendar-day { min-width: 145px; border-left: 1px solid var(--line); }
.portal-calendar-day:first-child { border-left: 0; }
.portal-calendar-day > header { min-height: 58px; padding: 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); color: #899087; }
.portal-calendar-day > header span { font-size: 8px; font-weight: 800; text-transform: uppercase; }
.portal-calendar-day > header strong { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; font: 800 11px "Manrope"; }
.portal-calendar-day.today > header strong { color: #182016; background: var(--acid); }
.portal-calendar-day > div { min-height: 180px; padding: 7px; }
.portal-calendar-day > div > p { margin: 18px 3px; color: #b1b6af; font-size: 8px; text-align: center; }
.portal-calendar-event { margin-bottom: 7px; padding: 9px; display: flex; flex-direction: column; gap: 4px; border: 1px solid #dde4d8; border-radius: 11px; background: #f7f9f3; }
.portal-calendar-event.completed { opacity: .72; }
.portal-calendar-event.booked { border-color: #b4ce75; background: #f4f9e7; }
.portal-calendar-event.waitlisted { border-color: #ead69f; background: #fffaf0; }
.portal-calendar-event.cancelled { border-color: #ead2d2; background: #fff7f7; }
.portal-calendar-event > span { color: #778075; font-size: 8px; font-weight: 800; }
.portal-calendar-event > strong { font: 750 10px "Manrope"; }
.portal-calendar-event > small { color: #8c9389; font-size: 7px; line-height: 1.5; }
.portal-calendar-event > em { width: max-content; font-style: normal; }
.portal-calendar-event > button { min-height: 30px; margin-top: 3px; padding: 0 7px; justify-content: center; font-size: 7px; }
.portal-class-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.portal-class-actions { grid-column: 3; display: flex; align-items: stretch; flex-direction: column; gap: 5px; }
.portal-class-actions .portal-book-button { grid-column: auto; }
.portal-series-button { min-height: 32px; justify-content: center; font-size: 8px; }
.portal-class-card { padding: 15px; display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.portal-class-date { width: 58px; height: 58px; display: grid; place-items: center; align-content: center; border-radius: 14px; color: #1a2018; background: #edf3d7; text-align: center; }
.portal-class-date strong { font: 800 20px "Manrope"; }
.portal-class-date span { font-size: 8px; text-transform: uppercase; }
.portal-class-copy > span { color: #7f867d; font-size: 8px; text-transform: capitalize; }
.portal-class-copy h3 { margin: 4px 0; font: 750 14px "Manrope"; }
.portal-class-copy p { margin: 0; color: #8c9389; font-size: 9px; }
.reservation-status { padding: 5px 7px; border-radius: 7px; color: #28704a; background: #e8f7ee; font-size: 8px; font-weight: 800; }
.reservation-status.waitlisted { color: #8a621e; background: #fff4d9; }
.reservation-status.cancelled, .reservation-status.no_show { color: #9a3d3d; background: #fff0f0; }
.portal-book-button { grid-column: 3; min-width: 92px; min-height: 38px; justify-content: center; }
.portal-book-button:disabled { opacity: .5; cursor: default; }
.portal-booking-list { border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.portal-performance-summary { margin-bottom: 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.portal-performance-summary article { min-height: 78px; padding: 13px; display: flex; justify-content: center; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.portal-performance-summary span { color: #8a9187; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.portal-performance-summary strong { margin-top: 6px; font: 800 17px "Manrope"; }
.portal-performance-summary .personal-record { background: #f5f9eb; }
.portal-workout-list { display: grid; gap: 8px; }
.portal-workout-group { display: grid; gap: 8px; }
.portal-workout-group + .portal-workout-group { margin-top: 12px; }
.portal-workout-group-title { padding: 0 2px 3px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.portal-workout-group-title span { font-size: 8px; font-weight: 850; letter-spacing: 1px; }
.portal-workout-group-title small { color: #8b9288; font-size: 8px; }
.portal-workout-card { padding: 14px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.portal-workout-card.upcoming { border-color: #dce6c3; background: #f8faef; }
.portal-workout-card span { color: #818980; font-size: 7px; font-weight: 800; text-transform: capitalize; }
.portal-workout-card h3 { margin: 4px 0; font: 750 12px "Manrope"; }
.portal-workout-card p { margin: 0; color: #8b9288; font-size: 8px; line-height: 1.5; }
.portal-workout-card > strong { font: 800 13px "Manrope"; }
.portal-workout-card .workout-upcoming-label { padding: 6px 8px; border-radius: 8px; color: #4f671d; background: #eaf3d5; font-size: 8px; }
.portal-exercise-plan { margin-top: 11px; display: grid; gap: 5px; }
.portal-exercise-plan > div { padding: 8px 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #dfe5d8; border-radius: 9px; background: rgba(255,255,255,.72); }
.portal-exercise-plan span strong, .portal-exercise-plan span small { display: block; }
.portal-exercise-plan span strong { font-size: 8px; }
.portal-exercise-plan span small { margin-top: 2px; color: #858d82; font-size: 7px; }
.portal-exercise-plan em { color: #6f786b; font-size: 7px; font-style: normal; }
.portal-exercise-plan button { min-height: 30px; padding: 0 9px; justify-content: center; font-size: 7px; }
.portal-exercise-progress-wrap { margin-top: 18px; }
.portal-exercise-progress-wrap > h3 { font: 750 13px "Manrope"; }
.portal-exercise-progress { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.portal-exercise-progress article { padding: 13px; display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.portal-exercise-progress span, .portal-exercise-progress small { display: block; color: #8a9187; font-size: 7px; }
.portal-exercise-progress h4 { margin: 3px 0 0; font: 750 10px "Manrope"; }
.portal-exercise-progress strong { margin-top: 3px; display: block; font-size: 9px; }
.portal-exercise-progress em { color: #7d857a; font-size: 7px; font-style: normal; }
.portal-workout-card > button { min-height: 36px; justify-content: center; }
.portal-leaderboard-wrap { margin-top: 18px; }
.portal-leaderboard-wrap > h3 { font: 750 13px "Manrope"; }
.portal-leaderboard { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.portal-leaderboard > div { padding: 11px 13px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.portal-leaderboard > div:first-child { border-top: 0; }
.portal-leaderboard b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #eef3e7; font-size: 8px; }
.portal-leaderboard span strong, .portal-leaderboard span small { display: block; }
.portal-leaderboard span strong { font-size: 9px; }
.portal-leaderboard span small { margin-top: 3px; color: #92988f; font-size: 7px; }
.portal-leaderboard em { font: 800 10px "Manrope"; font-style: normal; }
.portal-booking-row { padding: 14px 17px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); }
.portal-booking-row:first-child { border-top: 0; }
.portal-booking-row strong, .portal-booking-row small { display: block; }
.portal-booking-row strong { font-size: 11px; }
.portal-booking-row small { margin-top: 3px; color: #8c9389; font-size: 9px; }
.portal-empty { padding: 22px; color: #8c9389; font-size: 11px; text-align: center; }
.portal-finance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.portal-finance-grid .portal-section-heading { min-height: 50px; }
.portal-ledger-list { border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.portal-ledger-row { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); }
.portal-ledger-row:first-child { border-top: 0; }
.portal-ledger-row strong, .portal-ledger-row small { display: block; }
.portal-ledger-row strong { font-size: 10px; }
.portal-ledger-row small { margin-top: 4px; color: #8c9389; font-size: 8px; line-height: 1.5; }
.portal-ledger-row b { flex: none; font: 800 10px "Manrope"; }
.portal-ledger-row b.paid { color: #3e791d; }
.class-settings-summary { display: flex; flex-wrap: wrap; gap: 5px; }
.class-settings-summary span { padding: 5px 7px; border-radius: 7px; color: #687067; background: #f1f3ee; font-size: 7px; font-weight: 750; }
.checkbox-field { min-height: 46px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 11px; }
.checkbox-field input { width: 17px; height: 17px; accent-color: #222722; }
.checkbox-field span { font-size: 9px; line-height: 1.4; }
.logout-button { display: grid; place-items: center; border: 0; border-radius: 9px; cursor: pointer; }
.logout-button { width: 30px; height: 30px; margin-left: auto; color: #99a097; background: #232823; }
.logout-button:hover { color: #fff; background: #303630; }
.mobile-nav { display: none; }
.mobile-sidebar, .mobile-sidebar-backdrop { display: none; }
@media (max-width: 1120px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .club-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-grid { grid-template-columns: repeat(3, 1fr); }
  .period-pill { display: none; }
}
@media (max-width: 980px) {
  .auth-gate { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; overscroll-behavior: contain; }
  .auth-visual { min-height: 164px; padding: 21px 24px; justify-content: space-between; }
  .auth-visual::before { width: 250px; height: 250px; right: -105px; top: -112px; bottom: auto; opacity: .9; }
  .auth-visual::after { width: 150px; height: 150px; right: -12px; top: 60px; bottom: auto; opacity: .6; }
  .auth-visual > img { width: 54px; }
  .auth-visual > div { max-width: 310px; }
  .auth-visual span { font-size: 9px; letter-spacing: 1.6px; }
  .auth-visual h1 { max-width: 300px; margin: 7px 0 0; font-size: 25px; line-height: 1.08; letter-spacing: -1.1px; }
  .auth-visual p { display: none; }
  .auth-panel { align-items: start; padding: 18px 16px max(22px, calc(16px + env(safe-area-inset-bottom))); }
  .auth-card { padding: 23px; }
  .auth-brand { margin-bottom: 21px; }
  .auth-card h2 { font-size: 25px; }
  .auth-card > p { margin-bottom: 19px; }
  body { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .sidebar { display: none; }
  .app-main { width: 100%; margin-left: 0; }
  .topbar { height: 68px; padding: 0 16px; gap: 12px; }
  .mobile-brand { display: flex; align-items: center; gap: 8px; font: 800 14px "Manrope"; }
  .mobile-brand .brand-logo { width: 34px; height: 30px; padding: 4px; border-radius: 8px; }
  .mobile-brand .brand-mark { width: 31px; height: 31px; border-radius: 9px; }
  .mobile-brand .brand-mark span { font-size: 17px; }
  .global-search { width: auto; flex: 1; }
  .global-search kbd { display: none; }
  .global-search input { padding-right: 12px; }
  .search-results { max-height: calc(var(--app-height) - 82px); overflow-y: auto; overscroll-behavior: contain; }
  .staff-mode-switch { min-height: 44px; padding: 4px 8px 4px 4px; grid-template-columns: 36px auto; gap: 6px; }
  .staff-mode-copy small, .staff-mode-arrow { display: none; }
  .staff-mode-copy strong { font-size: 11px; }
  .view { padding: 27px 16px calc(105px + env(safe-area-inset-bottom)); }
  .dashboard-grid, .club-dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-finance-panel { grid-column: auto; }
  .attendance-preview-panel { grid-column: auto; }
  .attendance-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .class-schedule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-header { padding: 0 20px; }
  .mobile-nav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: calc(70px + env(safe-area-inset-bottom)); padding: 6px 4px max(6px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid #e2e4dc; background: rgba(255,255,255,.94); backdrop-filter: blur(15px); }
  .mobile-nav button { min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; color: #858d83; background: transparent; font-size: 10px; }
  .mobile-nav button.active { color: #1a1e1a; font-weight: 700; }
  .mobile-nav svg { width: 20px; }
  .mobile-sidebar-backdrop { position: fixed; z-index: 39; inset: 0; display: block; background: rgba(15,20,16,.42); opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility .24s ease; }
  .mobile-sidebar-backdrop.visible { opacity: 1; visibility: visible; }
  .mobile-sidebar { position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); display: flex; flex-direction: column; color: var(--ink); background: #fff; box-shadow: -18px 0 60px rgba(15,20,16,.22); visibility: hidden; transform: translateX(105%); transition: transform .26s ease, visibility .26s ease; }
  .mobile-sidebar.visible { visibility: visible; transform: none; }
  .mobile-sidebar-header { min-height: 76px; padding: max(14px, env(safe-area-inset-top)) 16px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
  .mobile-sidebar-brand { min-width: 0; display: flex; align-items: center; gap: 11px; }
  .mobile-sidebar-brand img { width: 43px; height: 43px; padding: 7px; flex: 0 0 auto; border-radius: 12px; object-fit: contain; background: #171b17; }
  .mobile-sidebar-brand strong, .mobile-sidebar-brand small { display: block; }
  .mobile-sidebar-brand strong { font: 800 13px "Manrope"; }
  .mobile-sidebar-brand small { margin-top: 2px; color: var(--muted); font-size: 9px; }
  .mobile-sidebar-nav { flex: 1; padding: 11px 12px 20px; overflow-y: auto; overscroll-behavior: contain; }
  .mobile-sidebar-nav > span { display: block; padding: 12px 10px 6px; color: #9aa197; font-size: 8px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
  .mobile-sidebar-nav > button { width: 100%; min-height: 59px; padding: 8px 10px; display: grid; grid-template-columns: 35px minmax(0,1fr) 16px; align-items: center; gap: 9px; border: 0; border-radius: 12px; color: var(--ink); background: transparent; text-align: left; }
  .mobile-sidebar-nav > button:active, .mobile-sidebar-nav > button.active { background: #f1f4ec; }
  .mobile-sidebar-nav > button > svg { width: 18px; color: #6b7369; }
  .mobile-sidebar-nav > button > svg:last-child { width: 13px; color: #b0b6ad; }
  .mobile-sidebar-nav > button span strong, .mobile-sidebar-nav > button span small { display: block; }
  .mobile-sidebar-nav > button span strong { font-size: 12px; }
  .mobile-sidebar-nav > button span small { margin-top: 3px; color: var(--muted); font-size: 10px; }
  .mobile-sidebar-footer { padding: 13px 14px max(14px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 36px minmax(0,1fr) 38px; align-items: center; gap: 10px; border-top: 1px solid var(--line); background: #fafbf8; }
  .mobile-sidebar-footer > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #20271f; background: var(--acid); font-size: 10px; font-weight: 800; }
  .mobile-sidebar-footer strong, .mobile-sidebar-footer small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-sidebar-footer strong { font-size: 12px; }
  .mobile-sidebar-footer small { margin-top: 2px; color: var(--muted); font-size: 10px; }
  body.mobile-sidebar-open { overflow: hidden; }
  body.keyboard-open { padding-bottom: 0; }
  body.keyboard-open .mobile-nav { display: none; }
  body.keyboard-open .toast { bottom: 12px; }
  body.keyboard-open .auth-gate { grid-template-rows: 1fr; }
  body.keyboard-open .auth-visual { display: none; }
  body.keyboard-open .auth-panel { padding: 8px 12px max(12px, env(safe-area-inset-bottom)); }
  body.keyboard-open .auth-card { padding: 18px 20px; }
  body.keyboard-open .auth-brand { margin-bottom: 12px; }
  body.keyboard-open .auth-card > p { margin: 6px 0 12px; }
  body.keyboard-open .auth-field { margin-top: 9px; }
  body.keyboard-open .auth-note { margin-top: 9px; }
  body.keyboard-open .modal { padding-top: 4px; padding-bottom: 4px; }
  body.keyboard-open .modal-card { max-height: calc(var(--app-height) - 8px); }
  body.keyboard-open .guest-suggestions { max-height: min(190px, calc(var(--app-height) - 170px)); }
  .directory-tools { flex-wrap: wrap; }
  .inline-search { width: 100%; }
  .result-count { margin-left: auto; }
  .member-table th:nth-child(3), .member-table td:nth-child(3) { display: none; }
}

/* Member portal: familiar, schedule-first mobile experience */
.member-portal { --portal-bg: var(--theme-canvas); --portal-panel: var(--theme-surface); --portal-panel-soft: var(--theme-surface-subtle); --portal-line: var(--theme-border); --portal-muted: var(--theme-muted); color: var(--theme-ink); background: var(--portal-bg); }
.member-portal .portal-header { border-color: var(--portal-line); color: var(--theme-ink); background: color-mix(in srgb, var(--theme-surface) 96%, transparent); backdrop-filter: blur(16px); }
.member-portal .portal-brand small, .member-portal .portal-hero p { color: var(--portal-muted); }
.member-portal .portal-user .quiet-button, .member-portal .portal-hero .quiet-button { border-color: var(--portal-line); color: #202520; background: var(--portal-panel); }
.member-portal .portal-membership-card { border: 1px solid color-mix(in srgb, var(--theme-info-ink) 18%, transparent); color: var(--theme-ink); background: linear-gradient(135deg, var(--theme-surface), var(--theme-info)); }
.member-portal .portal-membership-card p { color: var(--theme-info-ink); }
.member-portal .portal-account-summary article, .member-portal .portal-tabs, .member-portal .portal-calendar, .member-portal .portal-class-card, .member-portal .portal-booking-list, .member-portal .portal-ledger-list, .member-portal .portal-performance-summary article, .member-portal .portal-workout-card, .member-portal .portal-exercise-progress article, .member-portal .portal-leaderboard { border-color: var(--portal-line); color: #202520; background: var(--portal-panel); }
.member-portal .portal-account-summary span, .member-portal .portal-account-summary small, .member-portal .portal-class-copy > span, .member-portal .portal-class-copy p, .member-portal .portal-booking-row small, .member-portal .portal-ledger-row small, .member-portal .portal-performance-summary span, .member-portal .portal-workout-card span, .member-portal .portal-workout-card p, .member-portal .portal-exercise-progress span, .member-portal .portal-exercise-progress small, .member-portal .portal-leaderboard span small, .member-portal .portal-empty { color: var(--portal-muted); }
.member-portal .portal-tabs { top: 10px; box-shadow: 0 12px 32px rgba(32,37,32,.08); }
.member-portal .portal-tabs button { color: #9ca19b; }
.member-portal .portal-tabs button.active { color: #101512; background: var(--acid); }
.member-portal .portal-view-toggle, .member-portal .portal-mobile-day-strip { border-color: var(--portal-line); background: var(--portal-panel); }
.member-portal .portal-view-toggle button { color: var(--portal-muted); }
.member-portal .portal-view-toggle button.active { color: #101512; background: var(--acid); }
.member-portal .portal-calendar-controls .quiet-button { border-color: var(--portal-line); color: #202520; background: var(--portal-panel); }
.member-portal .portal-calendar-controls .text-button { color: var(--muted); }
.member-portal .portal-calendar { border-color: var(--portal-line); background: var(--portal-panel); }
.member-portal .portal-calendar-day { border-color: var(--portal-line); }
.member-portal .portal-calendar-day > header { border-color: var(--portal-line); color: var(--portal-muted); }
.member-portal .portal-calendar-day.today > header strong { color: #101512; background: var(--acid); }
.member-portal .portal-mobile-day-strip button { color: var(--portal-muted); }
.member-portal .portal-mobile-day-strip button.active { color: #101512; background: var(--acid); }
.member-portal .portal-calendar-event { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--portal-line); border-radius: 0; background: transparent; }
.member-portal .portal-calendar-event:last-child { border-bottom: 0; }
.member-portal .portal-calendar-event.booked, .member-portal .portal-calendar-event.waitlisted, .member-portal .portal-calendar-event.cancelled { border-color: var(--portal-line); background: transparent; }
.member-portal .portal-class-row { width: 100%; min-height: 88px; padding: 14px 12px; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.member-portal .portal-class-time { align-self: stretch; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--portal-line); }
.member-portal .portal-class-time strong { font: 750 14px "Manrope"; }
.member-portal .portal-class-time small { margin-top: 5px; color: var(--portal-muted); font-size: 10px; }
.member-portal .portal-class-row-copy { min-width: 0; display: block; }
.member-portal .portal-class-row-copy > strong { display: block; overflow: hidden; font: 750 13px "Manrope"; text-overflow: ellipsis; white-space: nowrap; }
.member-portal .portal-class-row-copy > small { margin-top: 5px; display: block; overflow: hidden; color: var(--portal-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.member-portal .portal-class-row-copy > em { margin-top: 7px; display: block; color: #69736b; font-size: 9px; font-style: normal; }
.member-portal .portal-class-row-copy > em svg { width: 13px; height: 13px; margin-right: 5px; vertical-align: -3px; }
.member-portal .portal-class-row-state { display: grid; place-items: center; }
.member-portal .portal-class-row-state > b { color: var(--acid); font: 400 25px "Manrope"; }
.member-portal .portal-class-row-state .reservation-status { white-space: nowrap; }
.member-portal .portal-calendar-day > div { padding: 0; }
.member-portal .portal-calendar-day > div > p { margin: 0; padding: 34px 10px; color: var(--portal-muted); }
.member-portal .portal-booking-row, .member-portal .portal-ledger-row, .member-portal .portal-leaderboard > div { border-color: var(--portal-line); }
.member-portal .portal-workout-card.upcoming, .member-portal .portal-performance-summary .personal-record { border-color: rgba(174,225,250,.28); background: rgba(174,225,250,.07); }
.member-portal .portal-exercise-plan > div { border-color: var(--portal-line); background: #f8faf8; }
.member-portal .portal-leaderboard b { color: #101512; background: var(--acid); }
.member-portal .portal-section-heading .eyebrow { color: var(--acid); }

.portal-class-detail { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 22px; }
.portal-detail-backdrop { position: absolute; inset: 0; background: rgba(24,29,24,.38); backdrop-filter: blur(5px); }
.portal-detail-card { position: relative; width: min(520px, 100%); max-height: min(760px, calc(100dvh - 44px)); display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--portal-line); border-radius: 22px; color: #202520; background: #fff; box-shadow: 0 28px 80px rgba(30,38,30,.2); overflow: hidden; }
.portal-detail-card > header { min-height: 58px; padding: 0 18px; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; border-bottom: 1px solid var(--portal-line); }
.portal-detail-card > header span { font: 750 11px "Manrope"; text-align: center; }
.portal-detail-back { width: 38px; height: 38px; border: 0; color: var(--acid); background: transparent; font-size: 28px; cursor: pointer; }
.portal-detail-content { padding: 28px 24px; overflow-y: auto; }
.portal-detail-content h2 { margin: 0 0 24px; font: 800 28px/1.1 "Manrope"; }
.portal-detail-content dl { margin: 0 0 20px; display: grid; gap: 0; }
.portal-detail-content dl > div { padding: 14px 0; display: grid; grid-template-columns: 92px 1fr; gap: 13px; border-bottom: 1px solid var(--portal-line); }
.portal-detail-content dt { color: var(--portal-muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.portal-detail-content dd { margin: 0; font-size: 11px; }
.portal-detail-workout { margin-top: 22px; padding: 17px; border: 1px solid var(--portal-line); border-radius: 14px; background: var(--portal-panel-soft); }
.portal-detail-workout > span { color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.portal-detail-workout h3 { margin: 6px 0; font: 750 15px "Manrope"; }
.portal-detail-workout p { margin: 0; color: var(--portal-muted); font-size: 10px; line-height: 1.55; }
.portal-participant-roster { margin-top: 22px; padding: 17px; border: 1px solid var(--portal-line); border-radius: 14px; background: var(--portal-panel-soft); }
.portal-participant-roster > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.portal-participant-roster > header span, .portal-participant-roster.empty > span { color: var(--acid); font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.portal-participant-roster > header h3 { margin: 5px 0 0; font: 750 15px "Manrope"; }
.portal-participant-roster > header > strong { font: 800 12px "Manrope"; }
.portal-participant-roster > div { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px; }
.portal-participant-roster article { min-width: 0; padding: 8px 0; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 8px; border-top: 1px solid var(--portal-line); }
.portal-participant-roster article .avatar { width: 30px; height: 30px; font-size: 8px; }
.portal-participant-roster article strong, .portal-participant-roster article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-participant-roster article strong { font-size: 9px; }
.portal-participant-roster article small { margin-top: 2px; color: var(--portal-muted); font-size: 7px; }
.portal-participant-roster article.waitlisted { opacity: .7; }
.portal-participant-roster.empty p { margin: 8px 0 0; color: var(--portal-muted); font-size: 10px; }
.portal-pull-refresh { --pull-distance: 0px; position: fixed; z-index: 95; top: max(8px, env(safe-area-inset-top)); left: 50%; min-width: 168px; height: 38px; padding: 0 13px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--portal-line); border-radius: 20px; color: #202520; background: rgba(255,255,255,.96); box-shadow: 0 8px 25px rgba(30,38,30,.12); opacity: 0; pointer-events: none; transform: translate(-50%, calc(-54px + var(--pull-distance))); transition: opacity .16s, transform .16s; }
.portal-pull-refresh.visible, .portal-pull-refresh.refreshing { opacity: 1; }
.portal-pull-refresh > span { width: 13px; height: 13px; border: 2px solid #dbe2d4; border-top-color: var(--acid); border-radius: 50%; }
.portal-pull-refresh.ready > span { transform: rotate(180deg); }
.portal-pull-refresh.refreshing { --pull-distance: 54px; }
.portal-pull-refresh.refreshing > span { animation: portal-refresh-spin .7s linear infinite; }
.portal-pull-refresh strong { font-size: 8px; }
@keyframes portal-refresh-spin { to { transform: rotate(360deg); } }
.portal-detail-card > footer { padding: 14px 18px max(14px, env(safe-area-inset-bottom)); display: grid; gap: 8px; border-top: 1px solid var(--portal-line); background: #fff; }
.portal-detail-card > footer button { width: 100%; min-height: 48px; justify-content: center; }
.portal-detail-card > footer .quiet-button { border-color: var(--portal-line); color: #202520; background: #f3f5f2; }

.portal-activity-overview { margin-bottom: 12px; display: grid; grid-template-columns: minmax(220px, .7fr) minmax(420px, 1.3fr); gap: 10px; }
.portal-streak-card, .portal-activity-calendar { padding: 20px; border: 1px solid var(--portal-line); border-radius: 16px; background: var(--portal-panel); }
.portal-streak-card { display: grid; place-items: center; align-content: center; text-align: center; }
.portal-streak-card > strong { font: 850 54px/.9 "Manrope"; }
.portal-streak-card > span { margin-top: 10px; color: var(--portal-muted); font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.portal-streak-card p { margin: 9px 0 0; color: #606a61; font-size: 10px; }
.portal-streak-card p b { color: #ffb947; }
.portal-activity-calendar header { margin-bottom: 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.portal-activity-calendar header strong { font: 750 12px "Manrope"; }
.portal-activity-calendar header span { color: var(--portal-muted); font-size: 9px; }
.portal-activity-weekdays, .portal-activity-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.portal-activity-weekdays { margin-bottom: 6px; }
.portal-activity-weekdays span { color: var(--portal-muted); font-size: 8px; }
.portal-activity-days span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #394139; font-size: 9px; }
.portal-activity-days span.active { color: #101512; background: var(--acid); font-weight: 850; }
.portal-activity-days span.today:not(.active) { box-shadow: inset 0 0 0 1px var(--acid); }
.portal-activity-days span.future { opacity: .28; }

@media (min-width: 721px) {
  .member-portal .portal-main { padding-top: 28px; }
  .member-portal .portal-calendar-day > div { padding: 6px; }
  .member-portal .portal-calendar-event { margin: 0 0 7px; border: 1px solid var(--portal-line); border-radius: 12px; background: #f8faf8; overflow: hidden; }
  .member-portal .portal-calendar-event:last-child { border-bottom: 1px solid var(--portal-line); }
  .member-portal .portal-calendar-event.booked { border-color: #c8e4d4; background: #f1faf5; }
  .member-portal .portal-calendar-event.waitlisted { border-color: #eadcae; background: #fffaf0; }
  .member-portal .portal-class-row { min-height: 0; padding: 12px; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 9px; }
  .member-portal .portal-class-time { padding-bottom: 8px; align-self: auto; flex-direction: row; align-items: baseline; justify-content: space-between; border-right: 0; border-bottom: 1px solid var(--portal-line); }
  .member-portal .portal-class-time strong { font-size: 12px; }
  .member-portal .portal-class-time small { margin: 0; font-size: 8px; }
  .member-portal .portal-class-row-copy > strong { overflow: visible; font-size: 11px; line-height: 1.35; white-space: normal; }
  .member-portal .portal-class-row-copy > small { line-height: 1.45; white-space: normal; }
  .member-portal .portal-class-row-state { justify-self: start; }
  .member-portal .portal-class-row-state > b { line-height: .7; }
}

@media (max-width: 720px) {
  .member-portal .portal-header { position: sticky; z-index: 20; top: 0; height: 72px; }
  .member-portal .portal-brand img { width: 42px; height: 38px; }
  .member-portal .portal-brand strong { font-size: 12px; }
  .member-portal .portal-user .quiet-button { width: 42px; padding: 0; overflow: hidden; color: transparent; }
  .member-portal .portal-user .quiet-button::before { content: '↗'; color: #202520; font-size: 17px; }
  .member-portal .portal-main { width: 100%; padding: 0 0 88px; }
  .member-portal .portal-hero, .member-portal .portal-membership-card, .member-portal .portal-account-summary { display: none; }
  .member-portal .portal-alerts { margin: 12px 14px 0; }
  .member-portal .portal-tabs { top: 72px; margin: 0; padding: 0 12px; gap: 20px; border: 0; border-bottom: 1px solid var(--portal-line); border-radius: 0; background: rgba(255,255,255,.96); box-shadow: none; }
  .member-portal .portal-tabs button { min-height: 51px; padding: 0; border-radius: 0; font-size: 9px; }
  .member-portal .portal-tabs button.active { color: #202520; background: transparent; box-shadow: inset 0 -2px 0 var(--acid-deep); }
  .member-portal .portal-section { margin: 0; }
  .member-portal .portal-section-heading { margin: 0; padding: 18px 20px 12px; }
  .member-portal .portal-section-heading .eyebrow { display: none; }
  .member-portal .portal-section-heading h2 { margin: 0; font-size: 19px; }
  .member-portal .portal-schedule-actions { gap: 10px; }
  .member-portal .portal-filters { padding: 3px; border: 1px solid var(--portal-line); border-radius: 10px; background: var(--portal-panel); }
  .member-portal .portal-filters button { min-height: 36px; color: var(--portal-muted); }
  .member-portal .portal-filters button.active { color: #101512; background: var(--acid); }
  .member-portal .portal-view-toggle { display: none; }
  .member-portal .portal-calendar-controls { margin: 0; padding: 10px 14px; border-top: 1px solid var(--portal-line); border-bottom: 1px solid var(--portal-line); }
  .member-portal .portal-calendar { border: 0; border-radius: 0; }
  .member-portal .portal-mobile-day-strip { padding: 12px 10px; }
  .member-portal .portal-mobile-day-strip button { min-height: 54px; border-radius: 50%; }
  .member-portal .portal-calendar-day > header { display: none; }
  .member-portal .portal-calendar-day > div { min-height: 340px; }
  .member-portal .portal-class-row { min-height: 96px; padding: 15px 20px; grid-template-columns: 70px minmax(0, 1fr) auto; }
  .member-portal .portal-class-time strong { font-size: 13px; }
  .member-portal .portal-class-row-copy > strong { font-size: 12px; }
  .member-portal .portal-class-row-state .reservation-status { max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
  .member-portal [data-portal-panel="bookings"], .member-portal [data-portal-panel="performance"], .member-portal [data-portal-panel="account"] { padding-bottom: 20px; }
  .member-portal .portal-booking-list, .member-portal .portal-ledger-list, .member-portal .portal-leaderboard { border-right: 0; border-left: 0; border-radius: 0; }
  .portal-class-detail { place-items: stretch; padding: 0; }
  .portal-detail-card { width: 100%; max-height: 100dvh; border: 0; border-radius: 0; }
  .portal-detail-card > header { min-height: 64px; }
  .portal-detail-content { padding: 28px 20px; }
  .portal-participant-roster > div { grid-template-columns: 1fr; }
  .portal-detail-card > footer { padding: 12px 20px max(12px, env(safe-area-inset-bottom)); }
  .portal-activity-overview { margin: 0; display: block; }
  .portal-streak-card, .portal-activity-calendar { border-right: 0; border-left: 0; border-radius: 0; }
  .portal-streak-card { min-height: 170px; }
  .portal-activity-calendar { border-top: 0; }
  .member-portal .portal-performance-summary { margin: 12px 14px; }
  .member-portal .portal-workout-list, .member-portal .portal-exercise-progress-wrap, .member-portal .portal-leaderboard-wrap { margin-right: 14px; margin-left: 14px; }
}

/* Member app shell */
.portal-avatar-button { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 13px; color: #172017; background: var(--acid); overflow: hidden; cursor: pointer; font: 850 10px "Manrope"; }
.portal-avatar-content { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.portal-avatar-content img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.portal-staff-switch { min-height: 42px; padding: 0 13px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--theme-border); border-radius: 11px; color: var(--theme-ink); background: var(--theme-surface); cursor: pointer; font: 800 10px "Manrope"; }
.portal-staff-switch:hover { border-color: #bcc8b6; background: var(--theme-surface-soft); }
.portal-staff-switch svg { width: 15px; height: 15px; transform: rotate(180deg); }
.portal-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.portal-tabs button { display: flex; align-items: center; justify-content: center; gap: 7px; }
.portal-tabs button svg { width: 16px; height: 16px; }
.portal-home-panel { display: grid; gap: 14px; }
.portal-home-panel > * { min-width: 0; max-width: 100%; }
.portal-home-welcome { padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--theme-border); border-radius: 22px; background: linear-gradient(135deg, var(--theme-surface), var(--theme-surface-soft)); }
.portal-home-welcome > div > span { color: #6e7b75; font-size: 9px; font-weight: 800; text-transform: capitalize; }
.portal-home-welcome h1 { margin: 7px 0 4px; font: 850 29px "Manrope"; }
.portal-home-welcome p { margin: 0; color: #68746e; font-size: 11px; }
.portal-home-book { min-width: 105px; min-height: 46px; padding: 0 17px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 13px; color: var(--theme-primary-ink); background: var(--theme-primary); cursor: pointer; font: 800 10px "Manrope"; }
.portal-home-book svg { width: 16px; }
.portal-home-planning { border: 1px solid var(--theme-border); border-radius: 19px; background: var(--theme-surface); overflow: hidden; }
.portal-home-planning > header { min-height: 67px; padding: 14px 17px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #e6eae5; }
.portal-home-planning > header span { color: #7a837a; font-size: 8px; font-weight: 850; letter-spacing: .1em; }
.portal-home-planning > header h2 { margin: 4px 0 0; font: 800 17px "Manrope"; }
.portal-home-planning > header button { padding: 8px 0; display: flex; align-items: center; gap: 7px; border: 0; color: #536253; background: transparent; cursor: pointer; font: 800 9px "Manrope"; }
.portal-home-planning > header button svg { width: 13px; }
.portal-home-class-list > article { min-height: 82px; padding: 10px 13px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; border-top: 1px solid #edf0ec; }
.portal-home-class-list > article:first-child { border-top: 0; }
.portal-home-class-info { min-width: 0; padding: 0; display: grid; grid-template-columns: 49px minmax(0, 1fr); align-items: center; gap: 12px; border: 0; color: #202520; background: transparent; text-align: left; cursor: pointer; }
.portal-home-class-info time { width: 49px; height: 54px; display: grid; place-items: center; align-content: center; border-radius: 13px; color: var(--theme-ink); background: var(--theme-selected); }
.portal-home-class-info time strong { font: 850 18px/1 "Manrope"; }
.portal-home-class-info time small { margin-top: 5px; font-size: 7px; font-weight: 850; text-transform: uppercase; }
.portal-home-class-info > span { min-width: 0; display: grid; gap: 3px; }
.portal-home-class-info > span > strong { overflow: hidden; font: 800 12px "Manrope"; text-overflow: ellipsis; white-space: nowrap; }
.portal-home-class-info > span > small { overflow: hidden; color: #778078; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.portal-home-class-info em { display: flex; align-items: center; gap: 4px; color: #6d776e; font-size: 7px; font-style: normal; font-weight: 750; }
.portal-home-class-info em svg { width: 12px; height: 12px; }
.portal-home-capacity { width: min(150px, 100%); height: 4px; margin-top: 2px; display: block; border-radius: 99px; background: var(--theme-border); overflow: hidden; }
.portal-home-capacity b { height: 100%; display: block; border-radius: inherit; background: var(--theme-success); }
.portal-home-capacity.full b { background: var(--theme-warning); }
.portal-home-class-book { min-width: 82px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 11px; color: var(--theme-primary-ink); background: var(--theme-primary); cursor: pointer; font: 800 8px "Manrope"; }
.portal-home-class-book:disabled { color: #899087; background: #eef0ec; cursor: default; }
.portal-home-class-list > article > .reservation-status { max-width: 96px; text-align: center; }
.portal-home-empty { min-height: 116px; padding: 20px; display: flex; align-items: center; gap: 14px; }
.portal-home-empty > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #526052; background: #eff3ec; }
.portal-home-empty svg { width: 20px; }
.portal-home-empty strong, .portal-home-empty small { display: block; }
.portal-home-empty strong { font-size: 12px; }
.portal-home-empty small { margin-top: 4px; color: #7b847b; font-size: 9px; }
.portal-home-workout { padding: 22px; border-radius: 20px; color: var(--theme-on-dark); background: linear-gradient(135deg, var(--theme-dark), var(--theme-dark-soft)); overflow: hidden; }
.portal-home-workout > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.portal-home-workout > header span { color: var(--theme-primary); font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.portal-home-workout h2 { margin: 7px 0 0; color: var(--theme-on-dark); font: 850 21px "Manrope"; }
.portal-home-workout > p { max-width: 680px; margin: 12px 0 0; color: #b7c0b8; font-size: 9px; line-height: 1.6; }
.portal-home-workout .reservation-status { flex: 0 0 auto; }
.portal-home-workout-exercises { margin-top: 15px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.portal-home-workout-exercises > div { min-width: 0; padding: 10px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(255,255,255,.055); }
.portal-home-workout-exercises > div span, .portal-home-workout-exercises > div strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-home-workout-exercises > div span { color: var(--theme-on-dark); font-size: 9px; font-weight: 800; }
.portal-home-workout-exercises > div strong { margin-top: 4px; color: #aeb8af; font-size: 7px; font-weight: 650; }
.portal-home-workout-exercises > small { align-self: center; color: #9fa9a0; font-size: 7px; }
.portal-home-workout > footer { margin-top: 18px; padding-top: 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.portal-home-workout > footer > span { min-width: 0; }
.portal-home-workout > footer > span strong, .portal-home-workout > footer > span small { display: block; }
.portal-home-workout > footer > span strong { color: var(--theme-on-dark); font-size: 9px; }
.portal-home-workout > footer > span small { margin-top: 4px; color: #9fa9a0; font-size: 7px; }
.portal-home-workout > footer button { min-height: 38px; padding: 0 12px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 11px; color: var(--theme-primary-ink); background: var(--theme-primary); cursor: pointer; font: 800 8px "Manrope"; }
.portal-home-workout > footer button svg { width: 12px; height: 12px; }
.portal-detail-workout .portal-home-workout-exercises { grid-template-columns: 1fr; }
.portal-detail-workout .portal-home-workout-exercises > div { border-color: #e1e6db; background: #f8faf4; }
.portal-detail-workout .portal-home-workout-exercises > div span { color: #343b35; }
.portal-detail-workout .portal-home-workout-exercises > div strong, .portal-detail-workout .portal-home-workout-exercises > small { color: #7d867e; }
.portal-home-activity { min-height: 160px; padding: 20px; border: 1px solid var(--theme-border); border-radius: 19px; background: var(--theme-surface); }
.portal-home-activity header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.portal-home-activity header > span { color: #7a837a; font-size: 8px; font-weight: 850; letter-spacing: .09em; }
.portal-home-activity header button { padding: 0; border: 0; color: #4e6250; background: transparent; cursor: pointer; font-size: 9px; font-weight: 800; }
.portal-home-activity > div { height: calc(100% - 26px); display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
.portal-home-activity > div > div { padding: 12px; border-left: 1px solid #e6e9e4; }
.portal-home-activity > div > div:first-child { border-left: 0; }
.portal-home-activity strong, .portal-home-activity span { display: block; }
.portal-home-activity strong { font: 850 27px "Manrope"; }
.portal-home-activity span { margin-top: 5px; color: #778078; font-size: 8px; line-height: 1.45; }
.portal-home-actions > h2 { margin: 8px 0 12px; font: 800 17px "Manrope"; }
.portal-home-actions > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.portal-home-actions button { min-height: 82px; padding: 14px; display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 10px; border: 1px solid var(--theme-border); border-radius: 15px; color: var(--theme-ink); background: var(--theme-surface); text-align: left; cursor: pointer; }
.portal-home-actions button > svg { width: 19px; color: #667166; }
.portal-home-actions strong, .portal-home-actions small { display: block; }
.portal-home-actions strong { font-size: 10px; }
.portal-home-actions small { margin-top: 4px; color: #7b847b; font-size: 8px; }
.portal-account-profile { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; }
.portal-account-identity { min-height: 118px; padding: 20px; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 13px; border: 1px solid #dfe5df; border-radius: 18px; background: #fff; }
.portal-account-identity > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; color: #172017; background: var(--acid); font: 850 12px "Manrope"; }
.portal-account-identity strong, .portal-account-identity small { display: block; }
.portal-account-identity strong { font: 800 14px "Manrope"; }
.portal-account-identity small { margin-top: 4px; color: #778078; font-size: 9px; }
.portal-account-actions { border: 1px solid #dfe5df; border-radius: 18px; background: #fff; overflow: hidden; }
.portal-account-actions > button { width: 100%; min-height: 62px; padding: 11px 15px; display: grid; grid-template-columns: 34px 1fr 16px; align-items: center; gap: 10px; border: 0; border-top: 1px solid #e6e9e4; color: #202520; background: #fff; text-align: left; cursor: pointer; }
.portal-account-actions > button:first-child { border-top: 0; }
.portal-account-actions > button > svg { width: 17px; color: #687269; }
.portal-account-actions > button > svg:last-child { width: 12px; color: #a2a9a1; }
.portal-account-actions > button:disabled { opacity: .6; cursor: wait; }
.portal-account-actions strong, .portal-account-actions small { display: block; }
.portal-account-actions strong { font-size: 10px; }
.portal-account-actions small { margin-top: 3px; color: #7d857d; font-size: 8px; }
.portal-account-actions .danger-row strong, .portal-account-actions .danger-row > svg:first-child { color: #a14d47; }

/* Installed app onboarding */
.app-launch .landing-page { display: none; }
.app-onboarding { position: fixed; z-index: 200; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: #202520; background: #f5f6f1; overflow: hidden; }
.app-onboarding > header { min-height: calc(72px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.onboarding-brand { display: flex; align-items: center; gap: 10px; }
.onboarding-brand img { width: 43px; height: 43px; padding: 6px; border-radius: 12px; object-fit: contain; background: #111411; }
.onboarding-brand strong, .onboarding-brand small { display: block; }
.onboarding-brand strong { font: 800 12px "Manrope"; }
.onboarding-brand small { margin-top: 2px; color: #7d857c; font-size: 8px; }
.app-onboarding > header > button { min-height: 40px; padding: 0 8px; border: 0; color: #657066; background: transparent; cursor: pointer; font: 800 10px "Manrope"; }
.onboarding-viewport { min-height: 0; overflow: hidden; touch-action: pan-y; }
.onboarding-track { height: 100%; display: flex; transition: transform .42s cubic-bezier(.22,.72,.24,1); will-change: transform; }
.onboarding-slide { min-width: 100%; height: 100%; display: grid; grid-template-rows: minmax(230px, 1.25fr) minmax(225px, .75fr); }
.onboarding-slide figure { position: relative; min-height: 0; margin: 10px 22px 0; border-radius: 27px; background: #171b17; overflow: hidden; }
.onboarding-slide figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(7,10,8,.34)); }
.onboarding-slide figure img { width: 100%; height: 100%; display: block; object-fit: cover; }
.onboarding-slide:nth-child(1) figure img { object-position: 57% center; }
.onboarding-slide:nth-child(2) figure img { object-position: 54% center; }
.onboarding-slide > div { padding: 28px 28px 14px; align-self: center; }
.onboarding-slide > div > span { color: #7d877b; font-size: 8px; font-weight: 850; letter-spacing: .16em; }
.onboarding-slide h1 { margin: 10px 0 12px; font: 850 clamp(31px, 8.8vw, 44px)/.98 "Manrope"; letter-spacing: -.045em; }
.onboarding-slide h1 em { color: #8cb4c8; font-style: normal; }
.onboarding-slide p { max-width: 430px; margin: 0; color: #69736b; font-size: 11px; line-height: 1.6; }
.app-onboarding > footer { min-height: calc(82px + env(safe-area-inset-bottom)); padding: 8px 22px max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.onboarding-dots { display: flex; align-items: center; gap: 7px; }
.onboarding-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: #cbd0c9; cursor: pointer; transition: .25s; }
.onboarding-dots button.active { width: 24px; background: #202520; }
.onboarding-next { min-width: 132px; min-height: 48px; padding: 0 17px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 15px; color: #152015; background: var(--acid); cursor: pointer; font: 800 10px "Manrope"; }
.onboarding-next svg { width: 15px; }
body.onboarding-mode { overflow: hidden; }
body.app-runtime .auth-back { display: none; }

@media (max-width: 720px) {
  body.member-mode { background: var(--portal-bg); }
  .member-portal .portal-header { height: calc(66px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; }
  .member-portal .portal-brand img { width: 39px; height: 36px; }
  .member-portal .portal-brand strong { font-size: 11px; }
  .member-portal .portal-brand small { font-size: 8px; }
  .member-portal .portal-user > span { display: none; }
  .member-portal .portal-user { gap: 7px; }
  .member-portal .portal-staff-switch { min-height: 38px; padding: 0 10px; font-size: 10px; }
  .member-portal .portal-staff-switch svg { width: 14px; }
  .member-portal .portal-avatar-button { width: 38px; height: 38px; border-radius: 12px; }
  .member-portal .portal-main { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .member-portal .portal-tabs { position: fixed; z-index: 50; top: auto; right: 0; bottom: 0; left: 0; height: calc(70px + env(safe-area-inset-bottom)); margin: 0; padding: 5px 5px max(5px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; border: 0; border-top: 1px solid var(--portal-line); background: rgba(255,255,255,.96); box-shadow: 0 -10px 30px rgba(32,37,32,.06); backdrop-filter: blur(18px); }
  .member-portal .portal-tabs button { min-width: 0; min-height: 54px; padding: 4px 1px; display: flex; flex: initial; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 11px; font-size: 8px; white-space: nowrap; }
  .member-portal .portal-tabs button svg { width: 20px; height: 20px; }
  .member-portal .portal-tabs button.active { color: #202520; background: #f0f5e5; box-shadow: none; }
  .member-portal .portal-home-panel { padding: 16px 14px 24px; gap: 12px; }
  .member-portal .portal-home-welcome { padding: 18px; border-radius: 18px; }
  .member-portal .portal-home-welcome > div > span { font-size: 8px; }
  .member-portal .portal-home-welcome h1 { margin-top: 5px; font-size: 23px; }
  .member-portal .portal-home-welcome p { font-size: 9px; }
  .member-portal .portal-home-book { min-width: 72px; min-height: 45px; padding: 0 13px; flex-direction: column; gap: 2px; font-size: 8px; }
  .member-portal .portal-home-book svg { width: 15px; }
  .member-portal .portal-home-planning { border-radius: 17px; }
  .member-portal .portal-home-planning > header { min-height: 55px; padding: 10px 12px; }
  .member-portal .portal-home-planning > header h2 { margin-top: 2px; font-size: 14px; }
  .member-portal .portal-home-planning > header button { padding: 6px 0; }
  .member-portal .portal-home-class-list > article { min-height: 66px; padding: 7px 10px; gap: 7px; }
  .member-portal .portal-home-class-info { grid-template-columns: 39px minmax(0, 1fr); gap: 9px; }
  .member-portal .portal-home-class-info time { width: 39px; height: 43px; border-radius: 11px; }
  .member-portal .portal-home-class-info time strong { font-size: 15px; }
  .member-portal .portal-home-class-info time small { margin-top: 3px; font-size: 6px; }
  .member-portal .portal-home-class-info > span { gap: 2px; }
  .member-portal .portal-home-class-info > span > strong { font-size: 11px; }
  .member-portal .portal-home-capacity { height: 3px; margin-top: 1px; }
  .member-portal .portal-home-class-book { min-width: 76px; min-height: 42px; padding: 0 10px; border-radius: 11px; font-size: 8px; }
  .member-portal .portal-home-class-list > article > .reservation-status { max-width: 76px; padding: 5px; font-size: 7px; }
  .member-portal .portal-home-workout { padding: 18px; border-radius: 17px; }
  .member-portal .portal-home-workout h2 { font-size: 18px; }
  .member-portal .portal-home-workout-exercises { grid-template-columns: 1fr; gap: 5px; }
  .member-portal .portal-home-workout-exercises > div { padding: 8px 10px; }
  .member-portal .portal-home-workout > footer { align-items: flex-end; }
  .member-portal .portal-home-workout > footer > span { min-width: 0; }
  .member-portal .portal-home-workout > footer > span small { line-height: 1.45; }
  .member-portal .portal-home-workout > footer button { flex: 0 0 auto; }
  .member-portal .portal-home-activity { min-height: 148px; padding: 17px; border-radius: 17px; }
  .member-portal .portal-home-activity > div > div { padding: 9px; }
  .member-portal .portal-home-activity strong { font-size: 23px; }
  .member-portal .portal-home-actions > h2 { margin-top: 7px; font-size: 15px; }
  .member-portal .portal-home-actions > div { grid-template-columns: 1fr 1fr; gap: 8px; }
  .member-portal .portal-home-actions button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .member-portal .portal-home-actions button { min-height: 75px; padding: 11px; grid-template-columns: 27px 1fr; gap: 8px; }
  .member-portal .portal-home-actions button > svg { width: 17px; }
  .member-portal .portal-home-actions strong { font-size: 9px; }
  .member-portal .portal-home-actions small { font-size: 7px; }
  .member-portal .portal-account-profile { padding: 14px; grid-template-columns: 1fr; gap: 10px; }
  .member-portal .portal-account-identity { min-height: 96px; padding: 15px; grid-template-columns: 46px 1fr auto; border-radius: 16px; }
  .member-portal .portal-account-identity > span { width: 46px; height: 46px; border-radius: 13px; }
  .member-portal .portal-account-actions { border-radius: 16px; }
  .member-portal .portal-account-actions > button { min-height: 66px; }
  .member-portal .portal-finance-grid[data-portal-panel="account"], .member-portal [data-portal-panel="account"] + [data-portal-panel="account"] { padding-right: 14px; padding-left: 14px; }
}

@media (min-width: 760px) {
  .app-onboarding > header, .app-onboarding > footer { padding-right: max(32px, calc((100vw - 900px) / 2)); padding-left: max(32px, calc((100vw - 900px) / 2)); }
  .onboarding-slide { grid-template-columns: minmax(360px, 1.15fr) minmax(330px, .85fr); grid-template-rows: 1fr; align-items: center; padding: 20px max(32px, calc((100vw - 1120px) / 2)); gap: 28px; }
  .onboarding-slide figure { height: min(660px, calc(100dvh - 190px)); margin: 0; }
  .onboarding-slide > div { padding: 30px; }
  .onboarding-slide h1 { font-size: 52px; }
  .onboarding-slide p { font-size: 13px; }
}

@media (max-height: 700px) and (max-width: 720px) {
  .app-onboarding > header { min-height: calc(62px + env(safe-area-inset-top)); padding-right: 17px; padding-left: 17px; }
  .onboarding-brand img { width: 38px; height: 38px; }
  .onboarding-slide { grid-template-rows: minmax(210px, 1.05fr) minmax(195px, .95fr); }
  .onboarding-slide figure { margin: 5px 17px 0; border-radius: 22px; }
  .onboarding-slide > div { padding: 20px 22px 8px; }
  .onboarding-slide h1 { margin: 8px 0 9px; font-size: 29px; }
  .onboarding-slide p { font-size: 9px; }
  .app-onboarding > footer { min-height: calc(70px + env(safe-area-inset-bottom)); padding-right: 17px; padding-left: 17px; }
  .onboarding-next { min-height: 44px; }
}
@media (max-width: 560px) {
  .schedule-toolbar { align-items: stretch; flex-direction: column; }
  .schedule-view-toggle { width: 100%; }
  .manager-calendar-controls { grid-template-columns: auto auto 1fr auto; }
  .manager-calendar-controls > strong { font-size: 10px; }
  .mobile-brand strong { display: none; }
  .page-heading { align-items: flex-start; }
  .page-heading > #exportButton { width: 44px; padding: 0; justify-content: center; font-size: 0; }
  .page-heading.compact { display: block; }
  .page-heading.compact > .quiet-button { min-height: 44px; margin-top: 15px; }
  .page-heading h1 { font-size: 28px; }
  .page-heading p { max-width: 330px; font-size: 13px; line-height: 1.45; }
  .eyebrow { font-size: 11px; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .club-metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .club-metric-card { min-height: 130px; padding: 14px; display: grid; gap: 11px; }
  .club-metric-card strong { font-size: 25px; }
  .club-metric-card em { white-space: normal; }
  .club-dashboard-grid { gap: 10px; }
  .dashboard-class-row { grid-template-columns: 56px minmax(0, 1fr) auto 18px; }
  .dashboard-class-row > span small { max-width: 165px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dashboard-class-row > em small { display: none; }
  .dashboard-attention-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .dashboard-attention-row > svg { display: none; }
  .dashboard-finance-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-finance-grid > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .dashboard-finance-grid > div:nth-child(4) { border-top: 1px solid var(--line); }
  .metric-card { min-height: 143px; padding: 15px; }
  .metric-card > strong { font-size: 23px; }
  .metric-top { font-size: 11px; }
  .metric-foot { font-size: 11px; }
  .metric-foot span:last-child { display: none; }
  .quick-products { grid-template-columns: 1fr 1fr; }
  .quick-product { min-height: 60px; padding: 8px; }
  .quick-product strong { font-size: 11px; }
  .quick-product small { font-size: 10px; }
  .quick-add { width: 42px; height: 42px; flex: 0 0 auto; }
  .quick-add svg { width: 18px; }
  .chart-wrap { height: 205px; }
  .bar-chart { gap: 5px; overflow-x: auto; }
  .bar-item { min-width: 28px; }
  .panel-heading p, .ranking-person small, .ranking-total small, .popular-count, .data-note, .catalog-warning p { font-size: 11px; }
  .panel-heading .text-button { min-height: 44px; font-size: 11px; }
  .catalog-grid { grid-template-columns: 1fr; gap: 10px; }
  .catalog-card { padding: 16px; }
  .catalog-copy h3 { font-size: 15px; }
  .catalog-copy p { font-size: 12px; }
  .catalog-status { font-size: 10px; }
  .catalog-stats { margin-top: 13px; padding-top: 12px; gap: 14px; justify-content: flex-start; }
  .catalog-stats span { min-width: 82px; font-size: 10px; }
  .catalog-stats strong { font-size: 13px; }
  .card-actions { margin-top: 11px; padding-top: 9px; justify-content: flex-end; }
  .card-actions button { min-height: 44px; padding: 0 15px; font-size: 11px; }
  .activity-summary { grid-template-columns: repeat(3, 1fr); }
  .activity-summary div { min-width: 0; padding: 14px 10px; border-top: 0; border-left: 1px solid var(--line); }
  .activity-summary div:first-child { border-left: 0; }
  .activity-summary span { min-height: 28px; font-size: 9px; line-height: 1.35; }
  .activity-summary strong { margin-top: 5px; font-size: 16px; }
  .activity-list { min-height: 0; padding: 8px 16px; }
  .activity-list .empty-state { padding: 48px 16px; }
  .activity-sensitive-zone { padding: 15px 16px; align-items: stretch; flex-direction: column; gap: 12px; }
  .activity-sensitive-zone .danger-button { min-height: 44px; justify-content: center; }
  #resetButton span { display: inline; }
  .modal { align-items: start; padding: max(10px, env(safe-area-inset-top)) 8px max(14px, env(safe-area-inset-bottom)); }
  .modal-card { width: 100%; max-height: calc(var(--app-height) - 24px); padding: 19px 16px max(24px, calc(14px + env(safe-area-inset-bottom))); border-radius: 18px; }
  .modal-heading h2 { font-size: 22px; }
  .modal-heading .icon-button { width: 44px; height: 44px; }
  .field-label, .form-row label > span, .form-section-title span { font-size: 12px; }
  .field-hint, .form-section-title small { font-size: 11px; }
  .modal-actions { position: static; display: grid; grid-template-columns: minmax(90px, .8fr) minmax(0, 1.4fr); margin: 17px 0 0; padding: 0; background: none; }
  .modal-actions button { width: 100%; min-width: 0; min-height: 46px; padding: 0 10px; }
  .modal-products, .form-row { grid-template-columns: 1fr; }
  .modal-product { min-height: 64px; padding: 9px 10px; }
  .modal-product strong { font-size: 12px; }
  .modal-product small { font-size: 11px; }
  .stepper button { width: 40px; height: 40px; font-size: 18px; }
  .stepper span { min-width: 20px; font-size: 12px; }
  .product-toggle { min-height: 44px; font-size: 12px; }
  .entity-grid, .balance-grid { grid-template-columns: 1fr; }
  .programming-layout { grid-template-columns: 1fr; }
  .template-exercise-row { grid-template-columns: 20px 1fr; }
  .template-exercise-row > input:last-child { grid-column: 2; }
  .recurrence-options { grid-template-columns: 1fr; }
  .recurrence-days > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .entity-field > span, .balance-field > span, .entity-help { font-size: 12px; }
  .entity-field input, .entity-field select, .entity-field textarea, .balance-field input { font-size: 16px; }
  .heading-actions { width: 100%; flex-wrap: wrap; }
  #membersView .heading-actions [data-open-consumption] { display: none; }
  #membersView .heading-actions #addMemberButton { width: 100%; margin-top: 14px; justify-content: center; }
  .directory-tools { padding: 14px; gap: 10px; }
  .inline-search input { height: 46px; font-size: 16px; }
  .filter-tabs { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
  .filter-tabs button { min-height: 40px; padding: 0 8px; font-size: 11px; }
  .result-count { width: 100%; text-align: right; font-size: 11px; }
  .activity-row { grid-template-columns: 34px 1fr auto; }
  .activity-amount { grid-column: 2; }
  .activity-actions { grid-column: 3; grid-row: 1 / span 2; flex-direction: column; }
  .member-table th, .member-table td { padding: 0 12px; }
  .member-table th:nth-child(2), .member-table td:nth-child(2) { display: none; }
  .member-table th { font-size: 10px; }
  .attendance-metrics { grid-template-columns: 1fr; gap: 9px; }
  .attendance-metrics article { grid-template-columns: 1fr auto; align-items: center; padding: 15px; }
  .attendance-metrics strong { grid-column: 2; grid-row: 1 / span 2; font-size: 25px; }
  .attendance-preview { grid-template-columns: 1fr; }
  .attendance-table th, .attendance-table td { padding: 0 12px; }
  .attendance-table th:nth-child(3), .attendance-table td:nth-child(3), .attendance-table th:nth-child(4), .attendance-table td:nth-child(4) { display: none; }
  .attendance-table td { height: 76px; }
  .class-schedule-grid, .coach-list, .portal-class-grid { grid-template-columns: 1fr; }
  .class-card { padding: 16px; }
  .announcement-row { grid-template-columns: 1fr; }
  .announcement-actions { justify-content: flex-end; }
  .coach-row { grid-template-columns: 36px 1fr auto 44px; }
  .coach-row .coach-state { display: none; }
  .coach-row .danger-icon { width: 44px; height: 44px; }
  .portal-header { height: 66px; padding: 0 15px; }
  .portal-user > span { display: none; }
  .portal-user .quiet-button { min-height: 42px; padding: 0 10px; font-size: 9px; }
  .portal-main { width: calc(100% - 28px); padding: 28px 0 50px; }
  .portal-tabs { top: 7px; margin-top: 16px; display: flex; overflow-x: auto; scrollbar-width: none; }
  .portal-tabs::-webkit-scrollbar { display: none; }
  .portal-tabs button { min-width: max-content; flex: 1; }
  .portal-hero { align-items: flex-start; flex-direction: column; }
  .portal-hero h1 { font-size: 29px; }
  .portal-membership-card { padding: 18px; }
  .portal-membership-icon { width: 58px; height: 58px; border-radius: 17px; font-size: 18px; }
  .portal-account-summary { grid-template-columns: 1fr 1fr; }
  .portal-account-summary article { padding: 14px; }
  .portal-section-heading { align-items: flex-start; flex-direction: column; }
  .portal-schedule-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .portal-filters { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .portal-filters button { min-width: 0; padding: 0 4px; font-size: 9px; white-space: nowrap; }
  .portal-view-toggle { display: grid; grid-template-columns: repeat(2, 1fr); }
  .portal-view-toggle button { min-height: 38px; }
  .portal-calendar-controls { grid-template-columns: auto auto 1fr auto; }
  .portal-calendar-controls strong { font-size: 10px; }
  .manager-calendar-shell { overflow: visible; }
  .manager-calendar { min-width: 0; display: block; }
  .manager-mobile-day-strip, .portal-mobile-day-strip { padding: 7px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; border-bottom: 1px solid var(--line); background: #fafbf8; }
  .manager-mobile-day-strip button, .portal-mobile-day-strip button { min-width: 0; min-height: 49px; padding: 5px 2px; display: grid; place-items: center; align-content: center; gap: 3px; border: 0; border-radius: 9px; color: #81887f; background: transparent; cursor: pointer; }
  .manager-mobile-day-strip span, .portal-mobile-day-strip span { font-size: 8px; font-weight: 800; text-transform: uppercase; }
  .manager-mobile-day-strip strong, .portal-mobile-day-strip strong { font: 800 11px "Manrope"; }
  .manager-mobile-day-strip button.active, .portal-mobile-day-strip button.active { color: #182016; background: var(--acid); }
  .manager-calendar-day, .portal-calendar-day { display: none; min-width: 0; border-left: 0; }
  .manager-calendar-day.selected, .portal-calendar-day.selected { display: block; }
  .manager-calendar-events, .portal-calendar-day > div { min-height: 210px; }
  .portal-calendar { display: block; overflow: hidden; }
  .portal-finance-grid { grid-template-columns: 1fr; gap: 4px; }
  .portal-class-card { grid-template-columns: 54px 1fr auto; gap: 10px; }
  .portal-class-date { width: 54px; height: 54px; }
  .portal-class-card .reservation-status { grid-column: 2; width: max-content; }
  .portal-book-button { grid-column: 3; grid-row: 1 / span 2; min-width: 76px; padding: 0 8px; }
  .portal-class-actions { grid-column: 3; grid-row: 1 / span 2; }
  .portal-class-actions .portal-book-button { grid-column: auto; grid-row: auto; }
  .portal-performance-summary { grid-template-columns: 1fr 1fr; }
  .portal-exercise-progress { grid-template-columns: 1fr; }
  .portal-workout-card { grid-template-columns: 1fr auto; }
  .portal-workout-card > button { grid-column: 1 / -1; }
  .portal-ledger-row { padding: 13px; }
  .checkin-button { min-height: 44px; padding: 0 10px; font-size: 10px; }
  .today-checkin-row { grid-template-columns: 36px 1fr 44px; }
  .today-checkin-row .membership-status { display: none; }
  .today-checkin-row .danger-icon { width: 44px; height: 44px; }
  .member-name strong { font-size: 13px; }
  .member-name small { font-size: 11px; }
  .row-arrow { width: 44px; height: 44px; }
  .member-drawer .icon-button, .activity-actions .danger-icon { width: 44px; height: 44px; }
  .pagination button { min-width: 42px; height: 42px; font-size: 12px; }
  .toast { left: 12px; right: 12px; bottom: calc(79px + env(safe-area-inset-bottom)); padding: 13px; }
  .toast strong { font-size: 12px; }
  .toast small { font-size: 11px; }
  .confirm-modal { align-items: end; padding: 0; }
  .confirm-card { width: 100%; max-height: none; padding: 25px 20px max(22px, calc(16px + env(safe-area-inset-bottom))); border-radius: 22px 22px 0 0; }
  .confirm-card .modal-actions { position: static; margin: 0; padding: 0; background: none; }
}
@media (max-width: 360px) {
  .modal-heading h2 { font-size: 20px; line-height: 1.15; }
  .modal-heading .icon-button { flex: 0 0 44px; }
  .filter-tabs button { padding: 0 5px; font-size: 10px; }
  .auth-visual h1 { font-size: 23px; }
  .auth-card { padding: 20px; }
}
@media (pointer: coarse) and (max-width: 980px) {
  .quick-add, .row-arrow, .pagination button, .stepper button { min-width: 40px; width: 40px; height: 40px; }
  .icon-button { min-width: 44px; width: 44px; height: 44px; }
  .text-button, .danger-button { min-height: 42px; }
  .global-search input, .inline-search input, .select-shell input, .select-shell select, .form-row input, .entity-field input, .entity-field select { font-size: 16px; }
}
@media (pointer: coarse) and (max-height: 520px) and (max-width: 980px) {
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .topbar { height: 60px; }
  .view { padding-top: 20px; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .mobile-nav { height: calc(56px + env(safe-area-inset-bottom)); padding-top: 3px; }
  .mobile-nav button span { display: none; }
  .auth-gate { grid-template-columns: minmax(240px, .8fr) minmax(360px, 1.2fr); grid-template-rows: 1fr; }
  .auth-visual { min-height: 0; padding: 18px 20px; }
  .auth-visual h1 { font-size: 22px; }
  .auth-panel { align-items: start; overflow-y: auto; padding: 10px; }
  .auth-card { padding: 18px 20px; }
  .auth-brand { margin-bottom: 12px; }
  .auth-card > p { margin: 6px 0 12px; }
  .auth-field { margin-top: 9px; }
  .auth-note { margin-top: 9px; }
}

@media (max-width: 1100px) {
  .landing-nav { display: none; }
  .landing-proof > span { min-width: 130px; padding-inline: 17px; }
  .landing-product { grid-template-columns: 1fr; gap: 30px; }
  .landing-product-copy { max-width: 670px; }
  .landing-product-visual { height: 570px; }
  .product-browser { width: min(900px, 88vw); }
  .product-phone { right: 3vw; }
  .landing-community-grid { grid-template-columns: 1fr 1fr; }
  .community-stat { grid-column: 1 / -1; min-height: 240px !important; }
  .community-stat p { max-width: 430px; }
  .landing-footer { grid-template-columns: 1fr 1fr; }
  .landing-footer p, .landing-footer > button { justify-self: end; }
}

@media (max-width: 720px) {
  .landing-header { height: 72px; padding: 0 17px; }
  .landing-brand img { width: 43px; height: 38px; }
  .landing-brand strong { font-size: 15px; }
  .landing-brand small { font-size: 8px; }
  .landing-login { height: 41px; padding: 0 13px; font-size: 10px; }
  .landing-login svg { display: none; }
  .landing-hero { min-height: 720px; height: 100svh; max-height: 900px; }
  .landing-hero-image { object-position: center 46%; }
  .landing-hero-shade { background: linear-gradient(90deg, rgba(5,7,6,.84), rgba(7,10,8,.2)), linear-gradient(0deg, rgba(5,7,6,.96) 0%, rgba(7,10,8,.3) 70%), linear-gradient(180deg, rgba(5,7,6,.42), transparent 36%); }
  .landing-hero-content { width: 100%; padding: 120px 20px 150px; justify-content: flex-end; transform: translateY(-45px); }
  .landing-hero h1 { margin: 18px 0 19px; font-size: clamp(54px, 17vw, 82px); letter-spacing: -4px; }
  .landing-hero-content > p { max-width: 430px; font-size: 14px; line-height: 1.55; }
  .landing-hero-actions { margin-top: 27px; align-items: flex-start; flex-direction: column; gap: 17px; }
  .landing-cta { min-height: 50px; padding-inline: 19px; }
  .landing-proof { display: none; }
  .landing-section { padding: 78px 19px; }
  .landing-intro-copy { margin: 54px auto 47px; text-align: left; }
  .landing-intro-copy h2, .landing-product-copy h2, .landing-community-head h2 { font-size: clamp(39px, 11.7vw, 56px); letter-spacing: -2.7px; }
  .landing-intro-copy p { font-size: 14px; }
  .landing-method-grid { grid-template-columns: 1fr; }
  .landing-method-grid article { min-height: 245px; padding: 28px; }
  .club-gallery { margin-top: 46px; grid-template-columns: 1fr 1fr; grid-template-rows: 360px repeat(2, 230px); gap: 10px; }
  .club-photo { border-radius: 16px; }
  .club-photo-main { grid-column: 1 / -1; grid-row: auto; }
  .club-photo figcaption { left: 16px; right: 16px; bottom: 15px; }
  .club-photo figcaption strong { font-size: 13px; }
  .landing-product { min-height: 0; padding-bottom: 50px; }
  .landing-product-copy .landing-eyebrow { margin-top: 49px; }
  .landing-product-copy p { font-size: 14px; }
  .landing-product-visual { height: 390px; margin: 5px -19px 0; }
  .product-browser { top: 24px; left: 19px; width: 105vw; padding: 5px; border-radius: 14px; transform: perspective(1000px) rotateY(-5deg); }
  .product-browser-bar { height: 24px; }
  .product-browser > img { border-radius: 9px; }
  .product-phone { width: 128px; top: 118px; right: 12px; bottom: auto; padding: 5px; border-radius: 21px; }
  .product-phone > span { top: 9px; width: 38px; height: 9px; }
  .product-phone img { border-radius: 16px; }
  .product-float { left: 28px; bottom: 30px; padding: 11px 13px; }
  .landing-community-head { margin: 52px 0 42px; display: block; }
  .landing-community-head > p { margin-top: 25px; }
  .landing-community-grid { grid-template-columns: 1fr; }
  .landing-community-grid article { min-height: 330px; }
  .community-stat { grid-column: auto; min-height: 270px !important; }
  .community-dashboard > img { width: 46%; }
  .landing-final { min-height: 470px; padding: 75px 20px; align-items: flex-start; flex-direction: column; justify-content: center; }
  .landing-final h2 { font-size: clamp(49px, 14vw, 70px); letter-spacing: -3px; }
  .landing-footer { padding: 30px 20px; grid-template-columns: 1fr; gap: 22px; }
  .landing-footer p, .landing-footer > button { justify-self: start; text-align: left; }
  .landing-footer > small { margin-top: 4px; }
  .auth-back { margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page *, .landing-page *::before, .landing-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Team access and audit */
.staff-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 18px; margin-bottom: 18px; }
.staff-panel, .role-panel, .audit-panel { overflow: hidden; }
.staff-list, .role-list, .audit-list { display: grid; }
.staff-row { min-height: 78px; padding: 13px 18px; display: grid; grid-template-columns: 42px minmax(160px, 1fr) minmax(150px, .55fr) auto; align-items: center; gap: 13px; border-top: 1px solid var(--line); }
.staff-row.disabled { opacity: .58; background: #f7f7f4; }
.staff-row > div { display: grid; gap: 3px; }
.staff-row > div strong { font-size: 13px; }
.staff-row > div small { color: var(--muted); font-size: 11px; }
.staff-row > div em { width: max-content; margin-top: 3px; padding: 3px 7px; border-radius: 99px; color: #286d47; background: #e9f7ee; font-size: 8px; font-style: normal; font-weight: 800; }
.staff-row label { display: grid; gap: 4px; }
.staff-row label span { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.staff-row select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; font: 700 11px "Manrope"; }
.staff-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.staff-row-actions button { min-height: 38px; }
.role-list > article { padding: 17px 18px; display: grid; gap: 12px; border-top: 1px solid var(--line); }
.role-list > article > div:first-child { display: grid; gap: 4px; }
.role-list strong { font-size: 13px; }
.role-list small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.role-list > article > div:last-child { display: flex; flex-wrap: wrap; gap: 5px; }
.role-list > article span { padding: 5px 7px; border-radius: 999px; color: #455047; background: #edf0ea; font-size: 8px; font-weight: 800; }
.audit-row { min-height: 62px; padding: 11px 18px; display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 13px; border-top: 1px solid var(--line); }
.audit-row > div { display: grid; gap: 3px; }
.audit-row strong { font-size: 12px; }
.audit-row small, .audit-row time { color: var(--muted); font-size: 10px; }
.audit-action { width: max-content; padding: 6px 8px; border-radius: 999px; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.audit-action.insert { color: #326443; background: #e6f3e8; }
.audit-action.update { color: #725d23; background: #f6f0d9; }
.audit-action.delete { color: #853d38; background: #f7e6e3; }

@media (max-width: 980px) {
  .staff-layout { grid-template-columns: 1fr; }
  .staff-row { grid-template-columns: 40px 1fr auto; }
  .staff-row label { grid-column: 2; }
  .staff-row-actions { grid-column: 3; grid-row: 1 / span 2; flex-direction: column; align-items: stretch; }
  .audit-row { grid-template-columns: 84px 1fr; }
  .audit-row time { grid-column: 2; }
}

@media (max-width: 720px) {
  .member-portal .portal-tabs { width: 100%; padding: 0 8px; gap: 4px; overflow: hidden; }
  .member-portal .portal-tabs button { min-width: 0; padding: 0 2px; flex: 1 1 25%; font-size: 8px; white-space: nowrap; }
  .member-portal .portal-calendar-controls { width: 100%; grid-template-columns: 42px auto minmax(0, 1fr) 42px; }
  .member-portal .portal-calendar-controls strong { min-width: 0; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .member-portal .portal-mobile-day-strip { width: 100%; padding: 10px 8px; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
  .member-portal .portal-mobile-day-strip button { width: auto; min-width: 0; min-height: 48px; padding: 3px 0; border-radius: 50%; }
}

/* ────────────────────────────────────────────────────────────────
   CENTRAL THEME BINDINGS
   Component colors below intentionally point only to the palette
   tokens declared in :root. Keep feature-specific layout above.
   ──────────────────────────────────────────────────────────────── */
body,
.app-main,
.auth-gate,
.auth-panel,
.app-onboarding {
  color: var(--theme-ink);
  background-color: var(--theme-canvas);
}

.sidebar,
.auth-visual,
.toast,
.metric-card.accent,
.club-metric-card.accent,
.full-button,
.onboarding-slide figure {
  color: var(--theme-on-dark);
  background-color: var(--theme-dark);
}

.topbar,
.member-portal .portal-header,
.member-portal .portal-tabs {
  border-color: var(--theme-border);
  background-color: color-mix(in srgb, var(--theme-surface) 94%, transparent);
}

.panel,
.metric-card,
.club-metric-card,
.catalog-card,
.attendance-metrics article,
.directory-panel,
.attendance-directory,
.activity-panel,
.auth-card,
.modal-card,
.member-drawer,
.search-results,
.portal-detail-card,
.portal-account-identity,
.portal-account-actions,
.portal-account-actions > button,
.staff-row select {
  border-color: var(--theme-border);
  color: var(--theme-ink);
  background-color: var(--theme-surface);
}

.dashboard-quick-actions > button,
.dashboard-finance-grid > div,
.quick-product,
.attendance-preview-row,
.drawer-membership,
.member-table th,
.attendance-table th,
.filter-tabs,
.empty-state span,
.role-list > article span,
.portal-exercise-plan > div,
.portal-detail-workout,
.portal-participant-roster {
  border-color: var(--theme-border);
  background-color: var(--theme-surface-subtle);
}

.global-search input,
.inline-search input,
.auth-field input,
.entity-field input,
.entity-field select,
.entity-field textarea,
.mini-select,
.quiet-button,
.icon-button,
.row-arrow,
.pagination button {
  border-color: var(--theme-border);
  color: var(--theme-ink);
  background-color: var(--theme-surface);
}

.primary-button,
.checkin-button,
.drawer-checkin,
.portal-home-book,
.portal-home-class-book,
.portal-home-workout > footer button,
.onboarding-next,
.portal-tabs button.active,
.filter-tabs button.active,
.pagination button.active,
.ranking-row:first-child .rank {
  border-color: var(--theme-primary);
  color: var(--theme-primary-ink);
  background-color: var(--theme-primary);
}

.primary-button:hover,
.row-arrow:hover,
.quick-add:hover {
  border-color: var(--theme-primary-hover);
  background-color: var(--theme-primary-hover);
}

.eyebrow,
.member-portal .portal-section-heading .eyebrow,
.auth-visual span,
.portal-detail-back {
  color: var(--theme-primary);
}

.reservation-status,
.membership-status.active,
.payment-status.paid,
.checkin-button.checked,
.drawer-checkin.checked,
.catalog-status,
.audit-action.insert {
  color: var(--theme-success);
  background-color: var(--theme-success-soft);
}

.reservation-status.waitlisted,
.membership-status.expiring,
.payment-status.partial,
.catalog-status.unused,
.audit-action.update {
  color: color-mix(in srgb, var(--theme-warning) 68%, var(--theme-ink));
  background-color: var(--theme-warning-soft);
}

.reservation-status.cancelled,
.reservation-status.no_show,
.membership-status.expired,
.membership-status.cancelled,
.payment-status.unpaid,
.audit-action.delete {
  color: var(--theme-danger);
  background-color: var(--theme-danger-soft);
}

.membership-status.paused,
.membership-status.upcoming,
.toast.info > span {
  color: var(--theme-info-ink);
  background-color: var(--theme-info);
}

.portal-calendar-event.booked,
.member-portal .portal-calendar-event.booked {
  border-color: color-mix(in srgb, var(--theme-success) 28%, var(--theme-border));
  background-color: color-mix(in srgb, var(--theme-success-soft) 72%, var(--theme-surface));
}

.portal-calendar-event.waitlisted,
.member-portal .portal-calendar-event.waitlisted {
  border-color: color-mix(in srgb, var(--theme-warning) 34%, var(--theme-border));
  background-color: color-mix(in srgb, var(--theme-warning-soft) 72%, var(--theme-surface));
}

.portal-calendar-event.cancelled,
.member-portal .portal-calendar-event.cancelled {
  border-color: color-mix(in srgb, var(--theme-danger) 28%, var(--theme-border));
  background-color: color-mix(in srgb, var(--theme-danger-soft) 72%, var(--theme-surface));
}

.toast.error > span {
  color: var(--theme-on-dark);
  background-color: var(--theme-danger);
}

.toast.warning > span {
  color: var(--theme-primary-ink);
  background-color: var(--theme-warning);
}

/* Personal profiles */
.sidebar-foot { display: grid; grid-template-columns: minmax(0, 1fr) 34px; }
.sidebar-profile-trigger { min-width: 0; padding: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.sidebar-profile-avatar { position: relative; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--theme-primary-ink); background: var(--theme-primary); overflow: hidden; font-size: 10px; font-weight: 800; }
.sidebar-profile-avatar img, .mobile-profile-trigger > span:first-child img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sidebar-profile-trigger > span:last-child { min-width: 0; }
.sidebar-profile-trigger:hover strong { color: var(--theme-primary); }

.manager-profile-layout { display: grid; grid-template-columns: minmax(230px, .58fr) minmax(460px, 1.42fr); gap: 14px; }
.manager-profile-card { min-height: 330px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.manager-profile-photo { position: relative; margin-bottom: 18px; }
.manager-profile-avatar { width: 104px; height: 104px; border-radius: 30px; font: 800 25px "Manrope"; }
.manager-avatar-edit { position: absolute; right: -6px; bottom: -6px; width: 38px; height: 38px; display: grid; place-items: center; border: 4px solid var(--theme-surface); border-radius: 50%; color: var(--theme-primary-ink); background: var(--theme-primary); cursor: pointer; }
.manager-avatar-edit svg { width: 15px; }
.manager-profile-card > strong { font: 800 19px "Manrope"; }
.manager-profile-card > span { margin-top: 5px; color: var(--theme-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.manager-profile-card > small { margin-top: 8px; color: var(--theme-muted); font-size: 10px; }
.profile-text-action { margin-top: 18px; padding: 5px; border: 0; color: var(--theme-danger); background: transparent; cursor: pointer; font-size: 9px; font-weight: 750; }
.manager-profile-form { min-height: 330px; }
.manager-profile-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.manager-profile-fields label { display: grid; gap: 7px; }
.manager-profile-fields label span { color: var(--theme-muted); font-size: 9px; font-weight: 800; }
.manager-profile-fields input { width: 100%; height: 45px; padding: 0 13px; border: 1px solid var(--theme-border); border-radius: 11px; color: var(--theme-ink); background: var(--theme-surface-subtle); }
.manager-profile-fields input:disabled { color: var(--theme-muted); cursor: not-allowed; }
.manager-profile-submit { margin-top: 20px; display: flex; justify-content: flex-end; }
.manager-security-card { grid-column: 1 / -1; min-height: 108px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.manager-security-card > div > span { color: var(--theme-muted); font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.manager-security-card h2 { margin: 5px 0; font: 750 14px "Manrope"; }
.manager-security-card p { margin: 0; color: var(--theme-muted); font-size: 10px; }
.manager-security-actions { display: flex; align-items: center; gap: 9px; }

.mobile-profile-trigger { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; border: 0; color: var(--theme-ink); background: transparent; text-align: left; cursor: pointer; }
.mobile-profile-trigger > span:first-child { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: var(--theme-primary-ink); background: var(--theme-primary); overflow: hidden; font-size: 10px; font-weight: 800; }
.mobile-profile-trigger > span:last-child { min-width: 0; }

.portal-profile-card { position: relative; min-height: 176px; padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; border: 1px solid var(--theme-border); border-radius: 18px; background: var(--theme-surface); }
.portal-profile-card .portal-account-identity { min-height: 0; padding: 0; grid-template-columns: 72px minmax(0, 1fr); border: 0; background: transparent; }
.portal-profile-card .portal-account-identity > .avatar { width: 72px; height: 72px; border-radius: 22px; font-size: 17px; }
.portal-profile-card .portal-account-identity > em { grid-column: 2; width: max-content; margin-top: 5px; }
.portal-photo-tools { display: flex; align-items: center; flex-direction: column; gap: 6px; }
.portal-photo-tools button { min-height: 34px; padding: 0 10px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--theme-border); border-radius: 10px; color: var(--theme-ink); background: var(--theme-surface-subtle); cursor: pointer; font: 750 8px "Manrope"; }
.portal-photo-tools button svg { width: 13px; }
.portal-photo-tools #portalAvatarDeleteButton { min-height: auto; padding: 4px; border: 0; color: var(--theme-danger); background: transparent; }
.portal-account-settings { min-width: 0; }
.portal-account-settings > span { display: block; margin: 4px 0 10px 2px; color: var(--theme-muted); font-size: 8px; font-weight: 850; letter-spacing: .1em; }
.portal-account-logout { width: 100%; min-height: 44px; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid color-mix(in srgb, var(--theme-danger) 22%, var(--theme-border)); border-radius: 12px; color: var(--theme-danger); background: var(--theme-surface); cursor: pointer; font: 750 9px "Manrope"; }
.portal-account-logout svg { width: 15px; }
.portal-account-page { max-width: 980px; margin-right: auto; margin-left: auto; display: grid; gap: 24px; }
.portal-account-title > span { color: var(--theme-muted); font-size: 9px; font-weight: 850; letter-spacing: .11em; }
.portal-account-title > h1 { margin: 5px 0 0; font: 850 28px "Manrope"; }
.portal-profile-copy { min-width: 0; }
.portal-profile-copy > span { margin-top: 7px; display: block; color: var(--theme-muted); font-size: 10px; line-height: 1.4; }
.portal-account-settings-column { display: grid; gap: 24px; }
.portal-settings-group { display: grid; gap: 9px; }
.portal-settings-group > h2 { margin: 0 0 0 3px; color: var(--theme-muted); font: 800 10px "Manrope"; letter-spacing: .04em; }
.portal-setting-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #475349; background: var(--theme-surface-subtle); }
.portal-setting-icon svg { width: 17px; height: 17px; }
.portal-account-page .portal-account-actions > button { grid-template-columns: 38px minmax(0, 1fr) 16px; }
.portal-account-links { border: 1px solid var(--theme-border); border-radius: 16px; background: var(--theme-surface); overflow: hidden; }
.portal-account-links details { border-top: 1px solid var(--theme-border); }
.portal-account-links details:first-child { border-top: 0; }
.portal-account-links summary { min-height: 68px; padding: 10px 15px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; align-items: center; gap: 11px; cursor: pointer; list-style: none; }
.portal-account-links summary::-webkit-details-marker { display: none; }
.portal-account-links summary > span:nth-child(2) { min-width: 0; }
.portal-account-links summary strong,
.portal-account-links summary small { display: block; }
.portal-account-links summary strong { font: 750 11px "Manrope"; }
.portal-account-links summary small { margin-top: 3px; color: var(--theme-muted); font-size: 9px; }
.portal-account-links summary > svg { width: 13px; color: var(--theme-muted); transition: transform .2s ease; }
.portal-account-links details[open] summary > svg { transform: rotate(90deg); }
.portal-account-links .portal-ledger-list,
.portal-account-links .portal-booking-list { border: 0; border-top: 1px solid var(--theme-border); border-radius: 0; background: var(--theme-surface-subtle); }
.portal-account-page > .portal-account-logout { margin: 0; }

@media (min-width: 721px) {
  .member-portal .portal-account-page { grid-template-columns: minmax(280px, .78fr) minmax(420px, 1.35fr); align-items: start; column-gap: 24px; row-gap: 20px; }
  .member-portal .portal-account-title { grid-column: 1 / -1; margin-bottom: 2px; }
  .member-portal .portal-account-title > span { font-size: 10px; }
  .member-portal .portal-account-title > h1 { font-size: 32px; }
  .member-portal .portal-account-page > .portal-profile-card { grid-column: 1; grid-row: 2; min-height: 0; padding: 28px 24px 22px; grid-template-columns: 1fr; gap: 22px; }
  .member-portal .portal-profile-card .portal-account-identity { grid-template-columns: 1fr; justify-items: center; gap: 0; text-align: center; }
  .member-portal .portal-profile-card .portal-account-identity > .avatar { width: 88px; height: 88px; border-radius: 26px; font-size: 19px; }
  .member-portal .portal-profile-copy { margin-top: 15px; }
  .member-portal .portal-profile-copy > strong { font-size: 17px; }
  .member-portal .portal-profile-copy > small { margin-top: 4px; font-size: 12px; }
  .member-portal .portal-profile-copy > span { max-width: 250px; margin-top: 9px; font-size: 11px; }
  .member-portal .portal-profile-card .portal-account-identity > em { grid-column: 1; justify-self: center; margin-top: 12px; font-size: 10px; }
  .member-portal .portal-photo-tools { width: 100%; padding-top: 18px; justify-content: center; flex-direction: row; border-top: 1px solid var(--theme-border); }
  .member-portal .portal-photo-tools button { min-height: 42px; padding: 0 13px; font-size: 10px; }
  .member-portal .portal-account-settings-column { grid-column: 2; grid-row: 2; gap: 22px; }
  .member-portal .portal-settings-group { gap: 10px; }
  .member-portal .portal-settings-group > h2 { margin-left: 4px; font-size: 12px; }
  .member-portal .portal-account-actions,
  .member-portal .portal-account-links { border-radius: 18px; }
  .member-portal .portal-account-page .portal-account-actions > button,
  .member-portal .portal-account-links summary { min-height: 76px; padding: 13px 17px; grid-template-columns: 42px minmax(0, 1fr) 18px; gap: 13px; }
  .member-portal .portal-setting-icon { width: 42px; height: 42px; border-radius: 12px; }
  .member-portal .portal-account-actions strong,
  .member-portal .portal-account-links summary strong { font-size: 13px; }
  .member-portal .portal-account-actions small,
  .member-portal .portal-account-links summary small { margin-top: 4px; font-size: 11px; line-height: 1.4; }
  .member-portal .portal-account-page > .portal-account-logout { grid-column: 1 / -1; width: min(320px, 100%); min-height: 48px; justify-self: center; font-size: 11px; }
}

@media (max-width: 720px) {
  .manager-profile-layout { grid-template-columns: 1fr; gap: 10px; }
  .manager-profile-card { min-height: 245px; }
  .manager-profile-fields { grid-template-columns: 1fr; }
  .manager-security-card { grid-column: auto; align-items: stretch; flex-direction: column; }
  .manager-security-card > button { justify-content: center; }
  .manager-security-actions { align-items: stretch; flex-direction: column; }
  .manager-security-actions button { justify-content: center; }
  .mobile-sidebar-footer { grid-template-columns: minmax(0, 1fr) 38px; }
  .portal-profile-card { min-height: 142px; padding: 16px; }
  .portal-profile-card .portal-account-identity { grid-template-columns: 60px minmax(0, 1fr); gap: 11px; }
  .portal-profile-card .portal-account-identity > .avatar { width: 60px; height: 60px; border-radius: 18px; }
  .portal-photo-tools button span { display: none; }
  .portal-photo-tools #portalAvatarButton { width: 36px; padding: 0; justify-content: center; }
  .member-portal .portal-account-page { padding: 18px 14px 28px; gap: 22px; }
  .member-portal .portal-account-title > span { font-size: 10px; }
  .member-portal .portal-account-title > h1 { font-size: 27px; }
  .member-portal .portal-profile-card { min-height: 0; padding: 18px; grid-template-columns: 1fr; gap: 15px; }
  .member-portal .portal-profile-card .portal-account-identity { grid-template-columns: 68px minmax(0, 1fr); gap: 14px; }
  .member-portal .portal-profile-card .portal-account-identity > .avatar { width: 68px; height: 68px; border-radius: 20px; }
  .member-portal .portal-profile-card .portal-account-identity > em { margin-top: 7px; }
  .member-portal .portal-profile-copy > span { font-size: 10px; }
  .member-portal .portal-photo-tools { padding-top: 13px; align-items: center; flex-direction: row; border-top: 1px solid var(--theme-border); }
  .member-portal .portal-photo-tools button span { display: inline; }
  .member-portal .portal-photo-tools #portalAvatarButton { width: auto; min-height: 44px; padding: 0 13px; justify-content: center; }
  .member-portal .portal-photo-tools #portalAvatarDeleteButton { margin-left: auto; }
  .member-portal .portal-settings-group { gap: 8px; }
  .member-portal .portal-account-settings-column { gap: 22px; }
  .member-portal .portal-settings-group > h2 { margin-left: 4px; font-size: 11px; }
  .member-portal .portal-account-actions > button,
  .member-portal .portal-account-links summary { min-height: 70px; padding: 11px 14px; }
  .member-portal .portal-setting-icon { width: 40px; height: 40px; border-radius: 12px; }
  .member-portal .portal-account-links summary strong { font-size: 13px; }
  .member-portal .portal-account-links summary small { font-size: 10px; line-height: 1.4; }
  .member-portal .portal-account-links .portal-empty { min-height: 62px; padding: 19px 16px; }
  .member-portal .portal-account-page > .portal-account-logout { min-height: 48px; font-size: 11px; }
}

/* Mobile member app: readable type scale */
@media (max-width: 720px) {
  .member-portal { font-size: 14px; }
  .member-portal .portal-brand small,
  .member-portal .portal-tabs button { font-size: 10px; }

  .member-portal .portal-home-welcome > div > span { font-size: 10px; }
  .member-portal .portal-home-welcome p { font-size: 12px; line-height: 1.45; }
  .member-portal .portal-home-book { font-size: 10px; }
  .member-portal .portal-home-planning > header span { font-size: 9px; }
  .member-portal .portal-home-planning > header h2 { font-size: 16px; }
  .member-portal .portal-home-planning > header button { font-size: 10px; }
  .member-portal .portal-home-class-info time strong { font-size: 16px; }
  .member-portal .portal-home-class-info time small { font-size: 8px; }
  .member-portal .portal-home-class-info > span > strong { font-size: 13px; }
  .member-portal .portal-home-class-info > span > small { font-size: 10px; }
  .member-portal .portal-home-class-info em { font-size: 9px; }
  .member-portal .portal-home-class-book { font-size: 10px; }
  .member-portal .portal-home-class-list > article > .reservation-status { font-size: 9px; }

  .member-portal .portal-home-workout > header span,
  .member-portal .portal-home-activity header > span { font-size: 9px; }
  .member-portal .portal-home-workout > p { font-size: 11px; }
  .member-portal .portal-home-workout-exercises > div span,
  .member-portal .portal-home-workout > footer > span strong { font-size: 11px; }
  .member-portal .portal-home-workout-exercises > div strong,
  .member-portal .portal-home-workout-exercises > small,
  .member-portal .portal-home-workout > footer > span small { font-size: 10px; }
  .member-portal .portal-home-workout > footer button,
  .member-portal .portal-home-activity header button { font-size: 10px; }
  .member-portal .portal-home-activity span { font-size: 10px; }
  .member-portal .portal-home-actions strong { font-size: 12px; }
  .member-portal .portal-home-actions small { font-size: 10px; line-height: 1.35; }

  .member-portal .portal-filters button,
  .member-portal .portal-calendar-controls strong { font-size: 10px; }
  .member-portal .portal-mobile-day-strip span { font-size: 9px; }
  .member-portal .portal-mobile-day-strip strong { font-size: 12px; }
  .member-portal .portal-class-time strong { font-size: 14px; }
  .member-portal .portal-class-time small { font-size: 10px; }
  .member-portal .portal-class-row-copy > strong { font-size: 14px; }
  .member-portal .portal-class-row-copy > small { font-size: 11px; line-height: 1.4; }
  .member-portal .portal-class-row-copy > em { font-size: 10px; }
  .member-portal .portal-class-row-state .reservation-status { font-size: 10px; }

  .member-portal .portal-booking-row strong,
  .member-portal .portal-ledger-row strong { font-size: 12px; }
  .member-portal .portal-booking-row small,
  .member-portal .portal-ledger-row small { font-size: 10px; line-height: 1.45; }
  .member-portal .portal-ledger-row b { font-size: 11px; }
  .member-portal .portal-performance-summary span { font-size: 9px; line-height: 1.35; }
  .member-portal .portal-workout-group-title span,
  .member-portal .portal-workout-group-title small { font-size: 10px; }
  .member-portal .portal-workout-card span { font-size: 10px; }
  .member-portal .portal-workout-card h3 { font-size: 14px; }
  .member-portal .portal-workout-card p { font-size: 11px; }
  .member-portal .portal-workout-card .workout-upcoming-label { font-size: 10px; }
  .member-portal .portal-exercise-plan span strong { font-size: 11px; }
  .member-portal .portal-exercise-plan span small,
  .member-portal .portal-exercise-plan em,
  .member-portal .portal-exercise-plan button { font-size: 10px; }
  .member-portal .portal-exercise-progress span,
  .member-portal .portal-exercise-progress small,
  .member-portal .portal-exercise-progress em { font-size: 10px; }
  .member-portal .portal-exercise-progress h4,
  .member-portal .portal-exercise-progress strong { font-size: 12px; }
  .member-portal .portal-leaderboard b { font-size: 10px; }
  .member-portal .portal-leaderboard span strong { font-size: 12px; }
  .member-portal .portal-leaderboard span small { font-size: 10px; }
  .member-portal .portal-leaderboard em { font-size: 11px; }

  .member-portal .portal-account-identity strong,
  .member-portal .portal-account-actions strong { font-size: 12px; }
  .member-portal .portal-account-identity small,
  .member-portal .portal-account-actions small { font-size: 10px; line-height: 1.4; }
  .member-portal .portal-photo-tools button,
  .member-portal .portal-account-settings > span,
  .member-portal .portal-account-logout { font-size: 10px; }

  .member-portal .portal-detail-content dt,
  .member-portal .portal-detail-workout > span,
  .member-portal .portal-participant-roster > header span,
  .member-portal .portal-participant-roster.empty > span { font-size: 10px; }
  .member-portal .portal-participant-roster article strong { font-size: 12px; }
  .member-portal .portal-participant-roster article small { font-size: 10px; }
  .member-portal .portal-activity-calendar header span,
  .member-portal .portal-activity-weekdays span,
  .member-portal .portal-activity-days span { font-size: 10px; }
}

/* KIVORA BRAND SYSTEM · Movement made operational */
:root {
  --theme-canvas: #f4f8f6;
  --theme-surface-soft: #eaf5fb;
  --theme-ink: #0b1110;
  --theme-muted: #64716d;
  --theme-border: #dbe5e1;
  --theme-dark: #0b1110;
  --theme-dark-soft: #151d1b;
  --theme-primary: #8fcfff;
  --theme-primary-ink: #102b38;
  --theme-selected: #e6f5ff;
  --theme-info: #d9f0ff;
}

.landing-page { --landing-dark: #0b1110; --landing-blue: #8fcfff; --landing-cream: #f4f8f6; background: #f4f8f6; }
.landing-header { position: fixed; top: 16px; left: clamp(16px, 3vw, 44px); right: clamp(16px, 3vw, 44px); width: auto; height: 68px; border: 1px solid rgba(217,240,255,.13); border-radius: 18px; padding: 0 12px 0 14px; background: rgba(11,17,16,.78); box-shadow: 0 18px 60px rgba(0,0,0,.18); backdrop-filter: blur(22px) saturate(1.15); }
.landing-brand img { width: 42px; height: 42px; padding: 0; border-radius: 12px; background: transparent; }
.landing-brand strong { font-size: 18px; letter-spacing: -.65px; }
.landing-brand small { color: #8fcfff; font-size: 8px; font-weight: 800; letter-spacing: 1.05px; text-transform: uppercase; }
.landing-nav a { color: rgba(244,248,246,.62); font-size: 11px; }
.landing-login { height: 44px; border-color: rgba(143,207,255,.32); background: rgba(143,207,255,.08); }
.landing-login:hover { color: #0b1110; background: #d9f0ff; }

.landing-hero { min-height: 820px; height: 100svh; background: #0b1110; }
.landing-hero-image { object-position: center; filter: saturate(.94) contrast(1.04); }
.landing-hero-shade { background: linear-gradient(90deg, rgba(5,9,8,.7) 0%, rgba(5,9,8,.18) 47%, transparent 70%), linear-gradient(0deg, rgba(5,9,8,.72), transparent 40%); }
.landing-hero::after { position: absolute; z-index: 1; inset: 0; opacity: .08; pointer-events: none; background-image: linear-gradient(rgba(217,240,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(217,240,255,.2) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, #000, transparent 68%); content: ""; }
.landing-hero-content { width: min(860px, 68vw); padding-top: 150px; padding-bottom: 165px; }
.landing-kicker { color: rgba(217,240,255,.72); letter-spacing: 2.3px; }
.landing-kicker i { width: 42px; background: #c8ff3d; }
.landing-hero h1 { max-width: 830px; margin: 30px 0 27px; font-size: clamp(68px, 8.2vw, 126px); line-height: .86; letter-spacing: -.072em; text-transform: none; }
.landing-page h1 em, .landing-page h2 em { color: #8fcfff; }
.landing-hero-content > p { max-width: 610px; color: rgba(244,248,246,.69); font-size: clamp(16px, 1.35vw, 20px); }
.landing-cta { color: #07100e; background: #8fcfff; box-shadow: 0 14px 40px rgba(50,154,220,.18); }
.landing-cta:hover { background: #c8ff3d; box-shadow: 0 18px 48px rgba(147,205,40,.17); }
.landing-link span { color: #c8ff3d; }
.landing-proof { right: clamp(16px, 3vw, 44px); bottom: 24px; left: clamp(16px, 3vw, 44px); justify-content: flex-end; border-color: rgba(217,240,255,.12); background: rgba(11,17,16,.72); }
.landing-proof > span { width: min(220px, 25vw); min-width: 0; }
.landing-proof strong { color: #d9f0ff; }
.landing-proof small { color: rgba(244,248,246,.4); }

.landing-section { padding-inline: clamp(24px, 6vw, 96px); }
.landing-section-label span { border-color: #bbd2db; color: #102b38; }
.landing-eyebrow { color: #407087; }
.landing-intro { position: relative; overflow: hidden; background: #f4f8f6; }
.landing-intro::before { position: absolute; inset: 0; opacity: .42; pointer-events: none; background-image: linear-gradient(#dce8e3 1px, transparent 1px), linear-gradient(90deg, #dce8e3 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(180deg, #000, transparent 45%); content: ""; }
.landing-intro > * { position: relative; z-index: 1; }
.landing-intro-copy { margin-top: 90px; }
.landing-intro-copy h2, .landing-product-copy h2, .landing-community-head h2, .landing-final h2 { letter-spacing: -.062em; }
.landing-intro-copy h2 em, .landing-community-head h2 em { color: #407087; }
.landing-method-grid { gap: 12px; }
.landing-method-grid article { min-height: 350px; border-radius: 16px; padding: 31px; }
.landing-method-grid article.featured { border-color: #0b1110; background: #0b1110; }
.landing-method-grid article.featured::before { width: 130px; height: 130px; top: -55px; right: -40px; background: #8fcfff; opacity: 1; }
.landing-method-grid article.featured::after { position: absolute; top: 30px; right: 30px; width: 9px; height: 9px; border-radius: 2px; background: #c8ff3d; content: ""; }

.kivora-flow-panel { position: relative; display: grid; min-height: 560px; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); overflow: hidden; margin-top: 18px; border-radius: 20px; color: #f4f8f6; background: #0b1110; }
.kivora-flow-panel > img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; }
.kivora-flow-panel > div { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 5vw, 70px); }
.kivora-flow-panel h3 { margin: 19px 0; font: 800 clamp(36px, 4vw, 62px)/.98 "Manrope"; letter-spacing: -.055em; }
.kivora-flow-panel p { margin: 0; color: rgba(244,248,246,.57); font-size: 14px; line-height: 1.7; }
.kivora-flow-panel ul { display: grid; gap: 13px; margin: 32px 0 0; padding: 0; list-style: none; }
.kivora-flow-panel li { display: flex; align-items: center; gap: 11px; color: #d9f0ff; font-size: 11px; font-weight: 700; }
.kivora-flow-panel li::before { width: 7px; height: 7px; border-radius: 2px; background: #c8ff3d; content: ""; }

.landing-product { position: relative; overflow: hidden; background: #0b1110 url("assets/kivora-flow-pattern.svg") center/cover no-repeat; }
.landing-product::before { background: radial-gradient(circle, rgba(143,207,255,.17), transparent 68%); }
.landing-product-copy .landing-eyebrow, .landing-product-copy h2 em { color: #8fcfff; }
.product-browser { border-color: rgba(217,240,255,.25); box-shadow: 0 50px 100px rgba(0,0,0,.42); }
.product-phone { border-color: #d9f0ff; }
.product-float { border: 1px solid rgba(217,240,255,.24); background: rgba(11,17,16,.92); }
.product-float i { background: #c8ff3d; }

.landing-community { background: #eef4f1; }
.landing-community-grid { gap: 12px; }
.landing-community-grid article { min-height: 430px; border-radius: 18px; }
.community-quote { background: #0b1110; }
.quote-mark { color: #c8ff3d; }
.community-dashboard { background: #151d1b; }
.community-dashboard > img { inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; opacity: .8; }
.community-dashboard::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,17,16,.92), transparent 70%); content: ""; }
.community-dashboard > div { z-index: 2; color: #f4f8f6; }
.community-dashboard span { color: #c8ff3d; }
.community-stat { background: #8fcfff; }

.landing-final { position: relative; overflow: hidden; background: #0b1110 url("assets/kivora-flow-pattern.svg") center/cover no-repeat; }
.landing-final::after { position: absolute; right: 5vw; top: 50%; width: 16px; height: 16px; border-radius: 4px; background: #c8ff3d; box-shadow: 0 0 0 14px rgba(200,255,61,.08); content: ""; }
.landing-final > * { position: relative; z-index: 1; }
.landing-final h2 em { color: #8fcfff; }
.landing-footer { background: #070b0a; }

@media (max-width: 980px) {
  .landing-header { top: 10px; left: 10px; right: 10px; }
  .landing-hero-content { width: min(780px, 82vw); padding-inline: clamp(24px, 6vw, 72px); }
  .landing-proof { left: 12px; right: 12px; }
  .kivora-flow-panel { grid-template-columns: 1fr; }
  .kivora-flow-panel > img { height: 390px; min-height: 0; }
}

@media (max-width: 720px) {
  .landing-header { height: 60px; border-radius: 15px; }
  .landing-header .landing-brand img { width: 36px; height: 36px; }
  .landing-header .landing-brand small { display: none; }
  .landing-login { height: 38px; padding-inline: 14px; }
  .landing-hero { min-height: 780px; height: 100svh; }
  .landing-hero-image { object-position: 66% center; opacity: .72; }
  .landing-hero-shade { background: linear-gradient(90deg, rgba(5,9,8,.92), rgba(5,9,8,.42)), linear-gradient(0deg, rgba(5,9,8,.9), transparent 52%); }
  .landing-hero-content { width: 100%; padding: 110px 22px 210px; justify-content: center; }
  .landing-hero h1 { margin-block: 24px 20px; font-size: clamp(54px, 16vw, 80px); line-height: .9; }
  .landing-hero-content > p { max-width: 520px; font-size: 15px; }
  .landing-proof { bottom: 12px; display: grid; grid-template-columns: repeat(3, 1fr); }
  .landing-proof > span { width: auto; padding: 13px 10px; }
  .landing-proof strong { font-size: 9px; }
  .landing-proof small { font-size: 7px; line-height: 1.35; }
  .landing-intro-copy { margin-top: 58px; }
  .landing-method-grid { grid-template-columns: 1fr; }
  .landing-method-grid article { min-height: 255px; }
  .kivora-flow-panel { min-height: 0; border-radius: 16px; }
  .kivora-flow-panel > img { height: 290px; }
  .kivora-flow-panel > div { padding: 34px 25px 40px; }
  .landing-community-grid { grid-template-columns: 1fr; }
  .landing-community-grid article { min-height: 340px; }
  .landing-final::after { display: none; }
}

/* Kivora SaaS conversion system */
.landing-header-actions { display: flex; align-items: center; gap: 8px; }
.landing-demo-link { height: 42px; padding: 0 16px; border: 0; color: #d9f0ff; background: transparent; font: 750 10px/1 "Manrope"; letter-spacing: .04em; cursor: pointer; }
.landing-demo-link:hover { color: #c8ff3d; }
.landing-trust { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); align-items: center; gap: 1px; padding: 0 clamp(24px, 6vw, 96px); border-bottom: 1px solid #dbe5e1; background: #eaf1ee; }
.landing-trust > * { min-height: 102px; display: flex; flex-direction: column; justify-content: center; padding: 20px clamp(16px, 2.4vw, 34px); border-left: 1px solid #dbe5e1; }
.landing-trust > p { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; margin: 0; border-left: 0; color: #407087; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.landing-trust > p span { width: 9px; height: 9px; border-radius: 2px; background: #c8ff3d; box-shadow: 0 0 0 5px rgba(200,255,61,.2); }
.landing-trust strong { font: 800 15px/1.3 "Manrope"; color: #0b1110; }
.landing-trust small { margin-top: 5px; color: #71807b; font-size: 9px; }

.landing-outcomes { padding-top: 110px; padding-bottom: 120px; background: #f4f8f6; }
.landing-outcomes > header, .landing-tour-head, .landing-onboarding > header { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); align-items: end; gap: 60px; margin: 76px 0 54px; }
.landing-outcomes h2, .landing-tour h2, .landing-story h2, .landing-onboarding h2, .landing-compare h2, .landing-faq h2, .landing-demo h2 { margin: 14px 0 0; font: 800 clamp(48px, 5.7vw, 84px)/.94 "Manrope"; letter-spacing: -.062em; }
.landing-outcomes header > p, .landing-tour-head > p, .landing-onboarding header > p { margin: 0; color: #64716d; font-size: 14px; line-height: 1.75; }
.outcome-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid #cfdad6; border-bottom: 1px solid #cfdad6; }
.outcome-grid article { position: relative; min-height: 330px; padding: 29px 24px; border-left: 1px solid #cfdad6; }
.outcome-grid article:first-child { border-left: 0; }
.outcome-grid article > b { color: #91a09a; font-size: 9px; }
.outcome-grid article > svg { display: block; width: 28px; height: 28px; margin-top: 48px; color: #407087; }
.outcome-grid h3 { margin: 27px 0 13px; font: 800 18px/1.15 "Manrope"; letter-spacing: -.03em; }
.outcome-grid p { margin: 0; color: #64716d; font-size: 11px; line-height: 1.65; }
.outcome-grid article > span { position: absolute; bottom: 27px; left: 24px; color: #407087; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.landing-tour { padding-top: 110px; padding-bottom: 120px; background: #eaf1ee; }
.tour-tabs { display: flex; gap: 7px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.tour-tabs button { min-width: 126px; height: 44px; padding: 0 18px; border: 1px solid #ccd9d4; border-radius: 99px; color: #64716d; background: transparent; font: 800 10px/1 "Manrope"; cursor: pointer; }
.tour-tabs button.active { border-color: #0b1110; color: #f4f8f6; background: #0b1110; }
.tour-stage { min-height: 600px; padding: 10px; border-radius: 22px; background: #0b1110; }
.tour-panel { min-height: 580px; display: grid; grid-template-columns: minmax(280px, .65fr) minmax(440px, 1.35fr); gap: 7vw; align-items: center; padding: clamp(35px, 5.6vw, 82px); color: #f4f8f6; }
.tour-panel[hidden] { display: none; }
.tour-panel-copy > span { color: #8fcfff; font-size: 9px; font-weight: 850; letter-spacing: .17em; }
.tour-panel-copy h3 { max-width: 520px; margin: 20px 0; font: 800 clamp(30px, 3vw, 48px)/1.02 "Manrope"; letter-spacing: -.05em; }
.tour-panel-copy p { color: rgba(244,248,246,.58); font-size: 13px; line-height: 1.75; }
.tour-panel-copy ul { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.tour-panel-copy li { display: flex; align-items: center; gap: 10px; color: #d9f0ff; font-size: 10px; font-weight: 700; }
.tour-panel-copy li::before { width: 7px; height: 7px; border-radius: 2px; background: #c8ff3d; content: ""; }
.tour-ui { min-height: 390px; overflow: hidden; padding: 20px; border: 1px solid rgba(217,240,255,.15); border-radius: 17px; color: #0b1110; background: #f4f8f6; box-shadow: 0 35px 75px rgba(0,0,0,.28); }
.tour-ui > header { display: flex; align-items: center; gap: 9px; min-height: 38px; border-bottom: 1px solid #dbe5e1; }
.tour-ui > header i { width: 9px; height: 9px; border-radius: 2px; background: #c8ff3d; }
.tour-ui > header strong { font-size: 12px; }
.tour-ui > header small { margin-left: auto; color: #70807a; font-size: 8px; }
.tour-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
.tour-metrics span { padding: 14px; border-radius: 10px; background: #e8efec; }
.tour-metrics small { display: block; color: #70807a; font-size: 7px; text-transform: uppercase; }
.tour-metrics b { display: block; margin-top: 8px; font-size: 26px; }
.tour-ui-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 8px; }
.tour-ui-grid section { padding: 17px; border: 1px solid #dbe5e1; border-radius: 11px; }
.tour-ui-grid section > small { color: #407087; font-size: 7px; font-weight: 850; letter-spacing: .12em; }
.tour-ui-grid p { display: flex; gap: 12px; align-items: center; padding: 12px 0; margin: 0; border-bottom: 1px solid #e2e9e6; font-size: 10px; }
.tour-ui-grid p b { font-size: 11px; }.tour-ui-grid p span { font-weight: 750; }.tour-ui-grid p em { color: #75817d; font-size: 8px; font-style: normal; font-weight: 500; }.tour-ui-grid p i { width: 7px; height: 7px; border-radius: 50%; background: #8fcfff; }
.tour-search { margin: 20px 0 10px; padding: 13px 16px; border: 1px solid #dbe5e1; border-radius: 9px; color: #7b8782; font-size: 9px; }
.tour-member-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 11px; padding: 14px 4px; border-bottom: 1px solid #dbe5e1; }
.tour-member-row > b { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: #102b38; background: #d9f0ff; font-size: 10px; }.tour-member-row span strong,.tour-member-row span small { display:block; }.tour-member-row span strong {font-size:10px}.tour-member-row span small,.tour-member-row > em {margin-top:4px;color:#71807b;font-size:8px;font-style:normal}
.tour-days { display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:20px 0; }.tour-days b{padding:11px 4px;border-radius:9px;color:#71807b;background:#e8efec;text-align:center;font-size:7px}.tour-days b.active{color:#102b38;background:#d9f0ff}.tour-days em{display:block;margin-top:6px;color:inherit;font-size:15px;font-style:normal}.tour-class-card{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:13px;padding:16px 8px;border-bottom:1px solid #dbe5e1}.tour-class-card time{font-size:12px;font-weight:850}.tour-class-card span strong,.tour-class-card span small{display:block}.tour-class-card span strong{font-size:10px}.tour-class-card span small{margin-top:5px;color:#71807b;font-size:8px}.tour-class-card>em{padding:7px 9px;border-radius:99px;color:#335a6d;background:#d9f0ff;font-size:7px;font-style:normal;font-weight:800}
.performance-score{display:flex;align-items:end;justify-content:space-between;margin:24px 0;padding:24px;border-radius:12px;background:#0b1110;color:#f4f8f6}.performance-score span>*{display:block}.performance-score small{color:#8fcfff;font-size:7px}.performance-score strong{margin-top:8px;font-size:32px}.performance-score em{margin-top:5px;color:#91a09a;font-size:8px;font-style:normal}.performance-score>b{color:#c8ff3d;font-size:12px}.performance-bars{height:150px;display:flex;align-items:end;gap:9px;padding:18px 20px 0;border-left:1px solid #dbe5e1;border-bottom:1px solid #dbe5e1}.performance-bars i{flex:1;height:var(--h);border-radius:5px 5px 0 0;background:#8fcfff}.performance-bars i:last-child{background:#c8ff3d}.performance-ui>p{color:#71807b;font-size:8px;text-align:center}

.landing-story { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 720px; padding-top: 120px; padding-bottom: 120px; gap: clamp(45px, 7vw, 115px); align-items: center; background: #f4f8f6; }
.story-visual { position: relative; height: 600px; overflow: hidden; border-radius: 18px; background: #0b1110; }.story-visual img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.05)}.story-visual::after{position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,17,16,.68),transparent 55%);content:""}.story-visual>span{position:absolute;z-index:1;left:28px;bottom:27px;color:#d9f0ff;font-size:8px;font-weight:850;letter-spacing:.14em}.story-copy h2{margin:27px 0}.story-copy>p{color:#64716d;font-size:14px;line-height:1.8}.story-proof{display:grid;grid-template-columns:repeat(3,1fr);margin-top:39px;border-top:1px solid #ccd8d3}.story-proof>span{padding:24px 12px 0 0}.story-proof strong,.story-proof small{display:block}.story-proof strong{font-size:12px}.story-proof small{margin-top:7px;color:#71807b;font-size:8px}
.landing-onboarding{padding-top:110px;padding-bottom:125px;background:#eaf1ee}.onboarding-steps{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;border-top:1px solid #c9d5d0;list-style:none}.onboarding-steps li{min-height:240px;padding:28px 25px;border-left:1px solid #c9d5d0}.onboarding-steps li:first-child{border-left:0}.onboarding-steps b{color:#407087;font-size:9px}.onboarding-steps span{display:block;margin-top:80px}.onboarding-steps strong,.onboarding-steps small{display:block}.onboarding-steps strong{font:800 20px/1 "Manrope"}.onboarding-steps small{margin-top:12px;color:#64716d;font-size:10px;line-height:1.55}
.landing-compare{display:grid;grid-template-columns:minmax(300px,.75fr) minmax(480px,1.25fr);gap:7vw;padding-top:125px;padding-bottom:125px;color:#f4f8f6;background:#0b1110}.landing-compare .landing-eyebrow{display:block;margin-top:60px;color:#8fcfff}.landing-compare h2{margin:20px 0}.landing-compare-head>p{color:rgba(244,248,246,.55);font-size:13px;line-height:1.75}.compare-table{align-self:center;border-top:1px solid rgba(217,240,255,.18)}.compare-row{display:grid;grid-template-columns:1.25fr .8fr .8fr;align-items:center;min-height:69px;border-bottom:1px solid rgba(217,240,255,.13);font-size:10px}.compare-row span{color:#d9f0ff}.compare-row strong{color:#c8ff3d;font-size:9px}.compare-row em{color:rgba(244,248,246,.4);font-size:9px;font-style:normal}.compare-header{min-height:48px;color:#71807b;font-size:7px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.compare-header strong{color:#8fcfff}.compare-header em{font-size:7px}
.landing-faq{display:grid;grid-template-columns:.75fr 1.25fr;gap:8vw;padding-top:125px;padding-bottom:125px;background:#f4f8f6}.landing-faq-intro h2{margin:52px 0 24px}.landing-faq-intro>p{color:#64716d;font-size:13px;line-height:1.75}.faq-list{border-top:1px solid #cbd7d2}.faq-list details{border-bottom:1px solid #cbd7d2}.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:82px;cursor:pointer;font:750 14px/1.35 "Manrope";list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary i{display:grid;width:28px;height:28px;flex:0 0 auto;place-items:center;border:1px solid #becbc6;border-radius:50%;font-size:15px;font-style:normal;transition:transform .2s}.faq-list details[open] summary i{transform:rotate(45deg)}.faq-list details p{max-width:690px;margin:-5px 55px 26px 0;color:#64716d;font-size:11px;line-height:1.75}
.landing-demo{display:grid;grid-template-columns:.75fr 1.25fr;gap:8vw;padding-top:125px;padding-bottom:125px;color:#f4f8f6;background:#151d1b url("assets/kivora-flow-pattern.svg") center/cover}.demo-copy h2{margin:35px 0 25px}.demo-copy>p{max-width:520px;color:rgba(244,248,246,.6);font-size:13px;line-height:1.75}.demo-copy>div{display:grid;gap:13px;margin-top:35px}.demo-copy>div span{display:flex;align-items:center;gap:12px;color:#d9f0ff;font-size:10px;font-weight:700}.demo-copy>div b{display:grid;width:25px;height:25px;place-items:center;border:1px solid rgba(143,207,255,.35);border-radius:7px;color:#8fcfff;font-size:7px}.demo-form{position:relative;padding:clamp(28px,4vw,54px);border:1px solid rgba(217,240,255,.16);border-radius:18px;background:rgba(11,17,16,.84);backdrop-filter:blur(20px)}.demo-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.demo-form label{display:grid;gap:8px}.demo-form label>span{color:#9eb1aa;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.demo-form input,.demo-form select,.demo-form textarea{width:100%;min-height:48px;padding:0 14px;border:1px solid rgba(217,240,255,.17);border-radius:9px;outline:none;color:#f4f8f6;background:rgba(244,248,246,.05);font:500 11px/1.5 "Manrope"}.demo-form textarea{min-height:110px;margin-top:18px;padding-top:13px;resize:vertical}.demo-form input:focus,.demo-form select:focus,.demo-form textarea:focus{border-color:#8fcfff}.demo-form option{color:#0b1110}.demo-form>.landing-cta{margin-top:24px}.demo-status{margin:14px 0 0;color:#82928c;font-size:8px;line-height:1.5}.demo-status.success{color:#c8ff3d}.demo-honeypot{position:absolute!important;left:-9999px!important}.landing-final-actions{display:flex;align-items:center;gap:18px}.landing-final-login{border:0;color:#d9f0ff;background:transparent;font:750 10px/1.3 "Manrope";text-decoration:underline;text-underline-offset:5px;cursor:pointer}

@media (max-width: 1100px){.outcome-grid{grid-template-columns:repeat(3,1fr)}.outcome-grid article:nth-child(4){border-left:0;border-top:1px solid #cfdad6}.outcome-grid article:nth-child(5){border-top:1px solid #cfdad6}.landing-compare,.landing-faq,.landing-demo{gap:5vw}.tour-panel{gap:4vw;padding:45px 38px}}
@media (max-width: 820px){.landing-trust{grid-template-columns:1fr 1fr}.landing-trust>p{grid-column:1/-1;min-height:65px}.landing-trust>*:nth-child(2){border-left:0}.landing-trust>*:last-child{grid-column:1/-1;border-top:1px solid #dbe5e1;border-left:0}.landing-outcomes>header,.landing-tour-head,.landing-onboarding>header{grid-template-columns:1fr;gap:20px}.outcome-grid{grid-template-columns:1fr 1fr}.outcome-grid article:nth-child(odd){border-left:0}.outcome-grid article:nth-child(3){border-top:1px solid #cfdad6}.outcome-grid article:nth-child(4){border-left:1px solid #cfdad6}.tour-panel{grid-template-columns:1fr;gap:35px}.landing-story,.landing-compare,.landing-faq,.landing-demo{grid-template-columns:1fr}.story-visual{height:430px}.onboarding-steps{grid-template-columns:1fr 1fr}.onboarding-steps li:nth-child(3){border-left:0;border-top:1px solid #c9d5d0}.onboarding-steps li:nth-child(4){border-top:1px solid #c9d5d0}.landing-compare .landing-eyebrow{margin-top:35px}.landing-final{gap:30px;flex-direction:column;align-items:flex-start}}
@media (max-width: 720px){.landing-header-actions .landing-demo-link{display:none}.landing-outcomes,.landing-tour,.landing-story,.landing-onboarding,.landing-compare,.landing-faq,.landing-demo{padding-top:80px;padding-bottom:85px}.landing-outcomes>header,.landing-tour-head,.landing-onboarding>header{margin:48px 0 35px}.landing-outcomes h2,.landing-tour h2,.landing-story h2,.landing-onboarding h2,.landing-compare h2,.landing-faq h2,.landing-demo h2{font-size:clamp(39px,12vw,58px)}.outcome-grid{grid-template-columns:1fr}.outcome-grid article{min-height:235px;border-top:1px solid #cfdad6!important;border-left:0!important}.outcome-grid article:first-child{border-top:0!important}.outcome-grid article>svg{margin-top:27px}.tour-tabs{margin-inline:-2px}.tour-tabs button{min-width:112px}.tour-stage{min-height:0;padding:5px}.tour-panel{min-height:0;padding:30px 20px 24px}.tour-ui{min-height:360px;padding:13px}.tour-ui-grid{grid-template-columns:1fr}.tour-ui-grid section:last-child{display:none}.tour-panel-copy h3{font-size:31px}.tour-metrics span{padding:11px}.story-visual{height:360px}.story-proof{grid-template-columns:1fr}.story-proof>span{padding:17px 0;border-bottom:1px solid #dbe5e1}.onboarding-steps{grid-template-columns:1fr}.onboarding-steps li{min-height:165px;border-top:1px solid #c9d5d0!important;border-left:0!important}.onboarding-steps li:first-child{border-top:0!important}.onboarding-steps span{margin-top:45px}.compare-row{grid-template-columns:1.2fr .8fr}.compare-row em{display:none}.landing-faq-intro h2{margin-top:38px}.faq-list summary{min-height:74px;font-size:12px}.demo-form{padding:24px 18px}.demo-form-grid{grid-template-columns:1fr}.landing-final-actions{align-items:flex-start;flex-direction:column}}

/* Personal athlete acquisition and in-workout experience */
.auth-flow-switch { display: grid; grid-template-columns: 1fr 1.45fr; gap: 4px; margin: 22px 0 18px; padding: 4px; border-radius: 12px; background: #e8efec; }
.auth-flow-switch button { min-height: 38px; padding: 7px 10px; border: 0; border-radius: 9px; color: #71807b; background: transparent; font: 750 9px/1.25 "Manrope"; cursor: pointer; }
.auth-flow-switch button.active { color: #102b38; background: #fff; box-shadow: 0 5px 18px rgba(16,43,56,.08); }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: #91a09a; font-size: 8px; text-transform: uppercase; }
.auth-divider::before,.auth-divider::after { height: 1px; flex: 1; background: #dbe5e1; content: ""; }
.auth-google { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 11px; padding: 0 16px; border: 1px solid #cad7d2; border-radius: 10px; color: #102b38; background: #fff; font: 750 10px/1 "Manrope"; cursor: pointer; }
.auth-google:hover { border-color: #8fcfff; background: #f8fbfa; }
.auth-google svg { width: 18px; height: 18px; }
.auth-error.success { color: #315c47; background: #e3f3e9; }
.auth-card:has(#authPersonaChoice:not(.hidden)) { width: min(500px,100%); }
#authPersonaChoice > h2 { margin-top: 10px; font-size: 30px; }
#authPersonaChoice > p { margin: 9px 0 22px; color: #71807b; font-size: 11px; line-height: 1.55; }
.auth-persona-grid { display: grid; gap: 9px; }
.auth-persona-grid > button { display: grid; grid-template-columns: 48px 1fr 18px; align-items: center; gap: 13px; width: 100%; min-height: 76px; padding: 12px 14px; border: 1px solid #d5e0dc; border-radius: 13px; color: #102b38; background: #f8fbfa; cursor: pointer; text-align: left; transition: transform .18s,border-color .18s,background .18s; }
.auth-persona-grid > button:hover { transform: translateY(-2px); border-color: #8fcfff; background: #f0f8fc; }
.auth-persona-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 12px; color: #335a6d; background: #d9f0ff; }
.auth-persona-icon.accent { color: #243512; background: #ddff87; }
.auth-persona-icon svg { width: 21px; height: 21px; }
.auth-persona-grid > button > span:nth-child(2) strong,.auth-persona-grid > button > span:nth-child(2) small { display: block; }
.auth-persona-grid > button > span:nth-child(2) strong { font: 800 12px/1.25 "Manrope"; }
.auth-persona-grid > button > span:nth-child(2) small { margin-top: 6px; color: #788681; font-size: 8px; line-height: 1.35; }
.auth-persona-arrow { width: 15px; height: 15px; color: #71807b; }
#authPersonaChoice .auth-continuity-note { display: flex; align-items: flex-start; gap: 9px; margin: 16px 0 0; padding: 13px; border-radius: 10px; color: #315c47; background: #e8f4ed; font-size: 8px; font-weight: 700; }
.auth-continuity-note svg { width: 14px; height: 14px; flex: 0 0 auto; }
.auth-persona-back { margin: 0 0 18px; padding: 0; border: 0; color: #407087; background: transparent; font: 750 9px/1 "Manrope"; cursor: pointer; }
.auth-gym-onboarding { width: 100%; margin-top: 13px; padding: 0; border: 0; color: #407087; background: transparent; font: 700 8px/1.5 "Manrope"; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

.personal-training-panel { max-width: 1260px; }
.personal-training-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 30px; }
.personal-training-head h1 { margin: 10px 0 7px; font: 800 clamp(34px,5vw,62px)/.96 "Manrope"; letter-spacing: -.055em; }
.personal-training-head p { margin: 0; color: #71807b; font-size: 11px; }
.personal-training-count { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-radius: 12px; color: #d9f0ff; background: #0b1110; }
.personal-training-count strong { color: #c8ff3d; font-size: 26px; }
.personal-training-count span { font-size: 8px; line-height: 1.45; text-transform: uppercase; }
.personal-timer-setup { overflow: hidden; border: 1px solid #d6e1dd; border-radius: 20px; background: #f8fbfa; }
.personal-workout-types { display: grid; grid-template-columns: repeat(6,1fr); gap: 1px; background: #d6e1dd; }
.personal-workout-types button { min-height: 94px; padding: 18px 12px; border: 0; color: #64716d; background: #f1f6f4; cursor: pointer; text-align: left; }
.personal-workout-types button:hover { background: #e8f2f7; }
.personal-workout-types button.active { color: #f4f8f6; background: #0b1110; box-shadow: inset 0 -4px #c8ff3d; }
.personal-workout-types strong,.personal-workout-types small { display: block; }
.personal-workout-types strong { font: 850 12px/1 "Manrope"; }
.personal-workout-types small { margin-top: 8px; color: inherit; opacity: .65; font-size: 8px; line-height: 1.35; }
.personal-workout-form { display: grid; grid-template-columns: 1.25fr repeat(3,minmax(115px,.55fr)) 1fr auto; align-items: end; gap: 14px; padding: 24px; }
.personal-workout-form label,.personal-exercise-log form label { display: grid; gap: 8px; }
.personal-workout-form label > span,.personal-exercise-log form label > span { color: #71807b; font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.personal-workout-form input,.personal-exercise-log input,.personal-exercise-log select { width: 100%; height: 46px; padding: 0 13px; border: 1px solid #cbd8d3; border-radius: 9px; outline: none; color: #102b38; background: #fff; font: 650 10px/1 "Manrope"; }
.personal-workout-form input:focus,.personal-exercise-log input:focus,.personal-exercise-log select:focus { border-color: #407087; box-shadow: 0 0 0 3px rgba(143,207,255,.18); }
.personal-start-button { display: flex; height: 46px; align-items: center; gap: 9px; padding: 0 20px; border: 0; border-radius: 9px; color: #07100e; background: #c8ff3d; font: 850 10px/1 "Manrope"; cursor: pointer; white-space: nowrap; }
.personal-start-button svg { width: 15px; height: 15px; }
.personal-timer-stage { position: relative; display: grid; min-height: 530px; place-items: center; overflow: hidden; padding: 34px; border-radius: 22px; color: #f4f8f6; background: radial-gradient(circle at 50% 48%,rgba(143,207,255,.15),transparent 33%),#0b1110; text-align: center; }
.personal-timer-stage::before { position: absolute; width: 62vw; height: 62vw; max-width: 620px; max-height: 620px; border: 1px solid rgba(217,240,255,.09); border-radius: 50%; content: ""; }
.personal-timer-stage.is-resting { background: radial-gradient(circle at 50% 48%,rgba(200,255,61,.12),transparent 33%),#0b1110; }
.personal-timer-stage > * { position: relative; z-index: 1; }
.personal-timer-stage header span,.personal-timer-stage header strong { display: block; }
.personal-timer-stage header span { color: #8fcfff; font-size: 9px; font-weight: 850; letter-spacing: .16em; }
.personal-timer-stage header strong { margin-top: 8px; font-size: 14px; }
.personal-timer-phase { align-self: end; color: #c8ff3d; font: 850 11px/1 "Manrope"; letter-spacing: .18em; }
.personal-timer-stage time { font: 800 clamp(88px,17vw,210px)/.8 "Manrope"; letter-spacing: -.085em; font-variant-numeric: tabular-nums; }
.personal-round-counter { display: flex; align-items: center; gap: 14px; padding: 8px 9px 8px 18px; border: 1px solid rgba(217,240,255,.16); border-radius: 999px; background: rgba(244,248,246,.06); }
.personal-round-counter span { color: #91a09a; font-size: 8px; text-transform: uppercase; }
.personal-round-counter strong { min-width: 28px; font-size: 24px; }
.personal-round-counter button { display: grid; width: 46px; height: 46px; place-items: center; border: 0; border-radius: 50%; color: #07100e; background: #c8ff3d; font-size: 25px; cursor: pointer; }
.personal-timer-actions { align-self: start; display: flex; gap: 10px; }
.personal-timer-actions button { min-width: 155px; min-height: 46px; }
.personal-training-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.personal-training-grid > section { padding: 26px; border: 1px solid #d6e1dd; border-radius: 18px; background: #f8fbfa; }
.personal-training-grid h2 { margin: 8px 0 0; font: 800 20px/1.1 "Manrope"; }
.personal-exercise-log form { display: grid; grid-template-columns: 1.2fr .7fr; gap: 13px; margin: 23px 0; }
.personal-exercise-log form label:last-of-type { grid-column: 1/-1; }
.personal-exercise-log form > button { width: max-content; }
.personal-exercise-log label > div { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.personal-exercise-log label > div input { border-radius: 9px 0 0 9px; }
.personal-exercise-log label > div strong { display: grid; height: 46px; min-width: 48px; place-items: center; border: 1px solid #cbd8d3; border-left: 0; border-radius: 0 9px 9px 0; color: #407087; background: #e9f0ed; font-size: 9px; }
.personal-exercise-records,.personal-session-history > div { display: grid; gap: 8px; }
.personal-exercise-records article { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 20px; padding: 14px 0; border-top: 1px solid #dbe5e1; }
.personal-exercise-records article div strong,.personal-exercise-records article div small,.personal-exercise-records article span > * { display: block; }
.personal-exercise-records article div strong { font-size: 10px; }.personal-exercise-records article small { margin-top: 4px; color: #82908b; font-size: 7px; }.personal-exercise-records article b { margin-top: 4px; font-size: 11px; }
.personal-session-history #personalSessionHistory { margin-top: 22px; }
#personalSessionHistory article { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid #dbe5e1; }
.personal-session-type { padding: 7px 8px; border-radius: 7px; color: #335a6d; background: #d9f0ff; font-size: 7px; font-weight: 850; text-align: center; text-transform: uppercase; }
#personalSessionHistory article div strong,#personalSessionHistory article div small { display: block; }#personalSessionHistory article div strong{font-size:10px}#personalSessionHistory article div small{margin-top:5px;color:#82908b;font-size:7px}#personalSessionHistory article em{color:#315c47;font-size:9px;font-style:normal;font-weight:800}

@media (max-width: 1000px) {
  .personal-workout-types { grid-template-columns: repeat(3,1fr); }
  .personal-workout-form { grid-template-columns: repeat(2,1fr); }
  .personal-start-button { justify-content: center; }
}
@media (max-width: 720px) {
  #authPersonaChoice > h2 { font-size: 26px; }
  .auth-persona-grid > button { min-height: 69px; grid-template-columns: 42px 1fr 16px; padding: 10px 11px; }
  .auth-persona-icon { width: 42px; height: 42px; }
  .portal-tabs { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .portal-tabs > button { min-width: 78px; flex: 0 0 78px; }
  .personal-training-head { align-items: flex-start; flex-direction: column; margin-bottom: 20px; }
  .personal-training-head h1 { font-size: 42px; }
  .personal-workout-types { grid-template-columns: repeat(2,1fr); }
  .personal-workout-types button { min-height: 82px; }
  .personal-workout-form { grid-template-columns: 1fr; padding: 17px; }
  .personal-timer-stage { min-height: calc(var(--app-height,100svh) - 175px); padding: 24px 14px; border-radius: 16px; }
  .personal-timer-stage time { font-size: clamp(84px,27vw,132px); }
  .personal-timer-actions { width: 100%; }.personal-timer-actions button{min-width:0;flex:1;padding-inline:10px}
  .personal-training-grid { grid-template-columns: 1fr; }
  .personal-training-grid > section { padding: 20px 17px; }
  .personal-exercise-log form { grid-template-columns: 1fr; }
  .personal-exercise-log form label:last-of-type { grid-column: auto; }
  .personal-exercise-records article { grid-template-columns: 1fr 1fr; }.personal-exercise-records article div{grid-column:1/-1}
  #personalSessionHistory article { grid-template-columns: 68px 1fr; }#personalSessionHistory article em{grid-column:2}
}