/* Material-inspired presentation. Existing markup, actions and theme IDs remain compatible. */
:root {
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --md-easing: cubic-bezier(.2, 0, 0, 1);
  --md-shadow: 0 2px 6px #00000014, 0 8px 24px #0000000a;
  --md-header-height: 80px;
  --md-nav-height: 80px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-dark: #111318; --bg-gradient: none;
  --panel-glass: #1b1c20; --card-glass: #202125; --card-glass-hover: #2b2d31;
  --inner-box-bg: #282a2f; --border-glass: #3f4249; --border-glow: #737780;
  --text-bright: #e3e3e8; --text-sub: #c3c6cf; --text-dim: #a4a8b1;
  --accent-neon: #a8c7fa; --btn-liquid-bg: #a8c7fa; --md-on-primary: #062e6f;
  --accent-green: #81c995; --accent-amber: #fdd663; --accent-red: #f2b8b5;
  --dropdown-bg: #202125; --svg-path-main: #e3e3e8; --cliq-logo-color: #e3e3e8;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg-dark: #f0f4f9; --bg-gradient: none;
  --panel-glass: #ffffff; --card-glass: #ffffff; --card-glass-hover: #e9eef6;
  --inner-box-bg: #f0f4f9; --border-glass: #d8dce3; --border-glow: #747775;
  --text-bright: #1f1f1f; --text-sub: #444746; --text-dim: #5f6368;
  --accent-neon: #0b57d0; --btn-liquid-bg: #0b57d0; --md-on-primary: #ffffff;
  --accent-green: #146c2e; --accent-amber: #865c00; --accent-red: #b3261e;
  --dropdown-bg: #ffffff; --svg-path-main: #1f1f1f; --cliq-logo-color: #1f1f1f;
}
/* Keep all saved club palettes; only the two neutral presets adopt Google blue. */
:root[data-site-theme="classic-gold"] { --bg-dark:#17130e; --panel-glass:#211b13; --card-glass:#282117; --card-glass-hover:#352b1c; --inner-box-bg:#1b160f; --border-glass:#493b25; --border-glow:#70582f; --text-bright:#fff4d6; --text-sub:#d0bea0; --text-dim:#b3a185; --accent-neon:#f5bd32; --btn-liquid-bg:#9b6911; --dropdown-bg:#211b13; --svg-path-main:#fff4d6; --cliq-logo-color:#fff4d6; --md-on-primary:#fff; }
:root[data-site-theme="gold-light"] { --bg-dark:#faf6ec; --panel-glass:#fffdf8; --card-glass:#ffffff; --card-glass-hover:#f4ead5; --inner-box-bg:#f5eddd; --border-glass:#e0d0ac; --border-glow:#bfa36b; --text-bright:#2c2416; --text-sub:#695839; --text-dim:#786747; --accent-neon:#926315; --btn-liquid-bg:#926315; --dropdown-bg:#fffdf8; --svg-path-main:#2c2416; --cliq-logo-color:#2c2416; --md-on-primary:#fff; }
:root[data-site-theme="ocean"] { --bg-dark:#0b1522; --panel-glass:#101e2f; --card-glass:#12263a; --card-glass-hover:#1b344d; --inner-box-bg:#0d1b2b; --border-glass:#29465f; --border-glow:#416880; --text-bright:#e8f5ff; --text-sub:#b3cddd; --text-dim:#8eafc4; --accent-neon:#69c9f4; --btn-liquid-bg:#146b99; --dropdown-bg:#101e2f; --svg-path-main:#e8f5ff; --cliq-logo-color:#e8f5ff; --md-on-primary:#fff; }
:root[data-site-theme="emerald"] { --bg-dark:#0c1915; --panel-glass:#10231b; --card-glass:#142b22; --card-glass-hover:#1e3b2e; --inner-box-bg:#0d2018; --border-glass:#2c4e3e; --border-glow:#44715b; --text-bright:#e9fbf2; --text-sub:#b6d3c3; --text-dim:#92b4a2; --accent-neon:#6bd9ab; --btn-liquid-bg:#23734f; --dropdown-bg:#10231b; --svg-path-main:#e9fbf2; --cliq-logo-color:#e9fbf2; --md-on-primary:#fff; }
:root[data-theme] {
  --md-container: color-mix(in srgb, var(--accent-neon) 16%, var(--panel-glass));
  --accent-soft: var(--md-container);
  --text-main: var(--text-bright);
  --border-color: var(--border-glass);
}
body { background: var(--bg-dark); line-height:1.55; }
button, input, select, textarea { font:inherit; }
button, summary, .nav-link { -webkit-tap-highlight-color:transparent; }
:is(button, a, summary, [tabindex]):focus-visible { outline:3px solid var(--accent-neon); outline-offset:3px; }
button:disabled { opacity:.45; cursor:not-allowed; }
[hidden] { display:none!important; }
/* Sign-in is a quiet, generous Material surface, including short landscape screens. */
.login-wrapper { overflow-y:auto; background:var(--bg-dark); padding:32px 20px; }
.login-box { margin:auto; max-width:480px; padding:40px; gap:28px; border:0; border-radius:32px; background:var(--panel-glass); box-shadow:none; backdrop-filter:none; }
.login-header { align-items:flex-start; text-align:start; gap:20px; }
.login-header .brand-icon { width:64px; height:64px; border-radius:20px; }
.login-header .brand-title h1 { font-size:2.1rem; font-weight:500; letter-spacing:0; }
.login-header .brand-title p { display:block; font-size:1rem; margin-top:4px; }
.login-tabs { background:transparent; border:1px solid var(--border-glow); padding:0; border-radius:100px; overflow:hidden; }
.login-tab-btn { min-height:48px; padding:12px; border-radius:0; font-size:.93rem; font-weight:600; }
.login-tab-btn + .login-tab-btn { border-inline-start:1px solid var(--border-glow); }
.login-tab-btn.active { background:var(--md-container); color:var(--accent-neon); box-shadow:none; }
.login-box .btn-liquid { min-height:48px; }
.checkbox-remember { min-height:44px; gap:12px; }
.checkbox-remember input, input[type="checkbox"], input[type="radio"] { accent-color:var(--accent-neon); width:18px; height:18px; flex-shrink:0; }
/* Application shell: inset workspace, persistent navigation and a single scroll region. */
body .app-viewport { max-width:none; height:100dvh; padding:0; gap:0; overflow:hidden; }
body header.main-header { min-height:var(--md-header-height); height:var(--md-header-height); padding:12px 28px; border:0; border-radius:0; background:var(--bg-dark); box-shadow:none; backdrop-filter:none; position:relative; z-index:1250; overflow:visible; }
.brand-title h1 { font-weight:600; font-size:1.35rem; letter-spacing:0; }
.brand-title p { font-size:.84rem; }
.brand-section { gap:14px; min-width:0; }
body .brand-icon:has(.gym-brand-logo) { width:44px; height:44px; box-shadow:none; border-radius:14px; }
body .login-header .brand-icon:has(.gym-brand-logo) { width:64px; height:64px; border-radius:20px; }
.header-controls { gap:12px; }
body.is-admin #admin-portal-view { display:grid!important; grid-template-columns:264px minmax(0,1fr); flex:1; min-height:0; gap:0; width:100%; overflow:hidden; }
body.is-admin aside.sidebar { position:relative; width:264px; height:100%; min-height:0; padding:12px 16px 24px; display:flex; flex-direction:column; gap:6px; overflow-y:auto; border:0; border-radius:0; box-shadow:none; backdrop-filter:none; background:var(--bg-dark); }
body.is-admin .sidebar .nav-link { flex:none; position:relative; flex-direction:row; justify-content:flex-start; align-items:center; text-align:start; min-height:52px; gap:16px; padding:14px 20px; border-radius:100px; font-size:.94rem; font-weight:500; color:var(--text-sub); }
body.is-admin .sidebar .nav-link.active { background:var(--md-container); color:var(--accent-neon); font-weight:700; box-shadow:none; }
.sidebar .nav-link i { width:22px; font-size:1.1rem; text-align:center; }
.nav-badge { background:var(--panel-glass); color:var(--text-sub); border:0; border-radius:20px; padding:2px 8px; font-variant-numeric:tabular-nums; }
body.is-admin .content-area { display:block; height:100%; min-height:0; min-width:0; padding:30px clamp(20px,3vw,44px) 48px; margin:0; overflow:auto; overscroll-behavior:contain; background:var(--panel-glass); border-start-start-radius:28px; }
.content-area::-webkit-scrollbar { display:block; width:6px; }
.content-area::-webkit-scrollbar-thumb { background:var(--border-glass); border-radius:8px; }
body.is-admin .section-view { max-width:1480px; margin-inline:auto; }
body.is-admin .section-view:not(.active) { display:none; }
body.is-admin .section-view.active { display:block; }
.gym-dashboard-heading, .settings-heading { margin-bottom:28px; gap:20px; }
.gym-dashboard-heading h2, .settings-heading h2 { font-size:clamp(1.65rem,2.5vw,2.1rem); font-weight:500; line-height:1.4; }
.gym-dashboard-heading p, .settings-heading p { font-size:.92rem; }
.gym-sidebar-tools { display:grid; gap:4px; margin-top:24px; padding-top:20px; border-top:1px solid var(--border-glass); }
.gym-sidebar-caption { color:var(--text-dim); padding:0 20px 8px; font-size:.78rem; }
.gym-sidebar-tools button, .gym-export-menu summary { display:flex; align-items:center; gap:14px; width:100%; min-height:48px; padding:12px 20px; background:transparent; border:0; border-radius:28px; color:var(--text-sub); text-align:start; cursor:pointer; font:inherit; font-size:.88rem; }
.gym-export-menu summary { list-style:none; }
.gym-export-menu summary::-webkit-details-marker { display:none; }
.gym-export-menu summary i:last-child { margin-inline-start:auto; font-size:.7rem; }
.gym-export-options { padding-inline-start:16px; }
.gym-sidebar-tools button:hover, .gym-export-menu summary:hover { background:var(--card-glass-hover); }
.payment-side-box { margin-top:24px; background:var(--panel-glass); padding:16px; border:0; border-radius:20px; }
.gym-mobile-tools { display:none; }
body:not(.is-admin) #gym-mobile-tools, body:not(.is-admin) .gym-sidebar-tools { display:none!important; }
/* Cards, statistics, member records, workouts, payment and plan surfaces. */
.data-panel { background:var(--card-glass); border:1px solid var(--border-glass); border-radius:24px; padding:24px; gap:20px; box-shadow:none; backdrop-filter:none; min-width:0; }
.panel-header { gap:20px; flex-wrap:wrap; align-items:center; padding-bottom:18px; border-bottom:1px solid var(--border-glass); }
.panel-header h2 { font-size:1.15rem; font-weight:600; line-height:1.6; }
.stats-row, #view-dashboard .stats-row { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
body #view-dashboard .stats-row .glass-card { min-width:0; min-height:160px; padding:22px; gap:12px; border:0; border-radius:24px; background:var(--inner-box-bg); box-shadow:none; transform:none; }
body #view-dashboard .stats-row .glass-card:first-child { background:var(--md-container); }
.card-icon { border:0; background:var(--panel-glass); border-radius:50%; width:40px; height:40px; color:var(--accent-neon); }
.card-value { font-size:2rem; font-weight:500; line-height:1.2; font-variant-numeric:tabular-nums; }
.card-label { font-size:.88rem; font-weight:500; line-height:1.5; }
.glass-card { background:var(--card-glass); box-shadow:none; backdrop-filter:none; }
.glass-card:hover { transform:none; }
.items-grid, .gym-plans-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:16px; }
.item-card-glass { border:1px solid var(--border-glass); border-radius:20px; background:var(--card-glass); padding:20px; gap:14px; min-width:0; }
.item-card-glass:hover { background:var(--card-glass); border-color:var(--border-glow); }
.item-name { font-size:1.05rem; font-weight:600; overflow-wrap:anywhere; }
.item-meta { font-size:.84rem; line-height:1.6; flex-wrap:wrap; }
.details-box-inner { border:0; background:var(--inner-box-bg); border-radius:16px; padding:14px; gap:8px; }
.info-row { font-size:.87rem; gap:12px; flex-wrap:wrap; }
.info-val { overflow-wrap:anywhere; }
.card-bottom-actions { gap:8px; padding-top:12px; flex-wrap:wrap; }
.badge-curved, .gym-pill { border:0!important; border-radius:8px; font-size:.76rem; font-weight:600; padding:5px 10px; }
.badge-curved.Active, .gym-pill.Active { color:var(--accent-green); background:color-mix(in srgb,var(--accent-green) 12%,var(--panel-glass)); }
.badge-curved.Expired, .gym-pill.Expired { color:var(--accent-red); background:color-mix(in srgb,var(--accent-red) 12%,var(--panel-glass)); }
.badge-curved.Expiring, .gym-pill.Expiring-Soon { color:var(--accent-amber); background:color-mix(in srgb,var(--accent-amber) 12%,var(--panel-glass)); }
.gym-plans-grid .item-card-glass { padding:24px; }
.cliq-card-mini, .cash-option-mini { border:1px solid var(--border-glass); padding:16px; border-radius:18px; gap:12px; }
.cliq-badge-header { background:transparent; border:0; }
.payment-detail-row { font-size:.9rem; gap:12px; flex-wrap:wrap; }
body:not(.is-admin) #member-portal-view { flex:1; min-height:0; overflow:auto; width:100%; max-width:1120px; margin:0 auto; padding:20px 24px 48px; overscroll-behavior:contain; }
/* Filled primary, tonal secondary, outlined fields, filter chips and state layers. */
body .btn-liquid { min-height:44px; padding:11px 22px; border:0; border-radius:100px; background:var(--btn-liquid-bg); color:var(--md-on-primary); box-shadow:none; backdrop-filter:none; font-size:.9rem; font-weight:600; justify-content:center; gap:10px; }
body .btn-liquid:hover { transform:none; box-shadow:var(--md-shadow); filter:brightness(.96); }
.action-icon-btn { width:40px; height:40px; border:0; border-radius:50%; background:var(--inner-box-bg); color:var(--text-sub); font-size:.95rem; flex-shrink:0; }
.logout-btn, .theme-toggle-btn, .site-settings-button, .site-settings-back, .action-btn { min-height:44px; padding:10px 18px; border:1px solid var(--border-glass); border-radius:100px; background:transparent; color:var(--text-sub); font-size:.88rem; font-weight:600; cursor:pointer; }
.logout-btn:hover, .theme-toggle-btn:hover, .site-settings-button:hover, .site-settings-back:hover, .action-btn:hover { background:var(--card-glass-hover); transform:none; }
.category-filter-btn { border:1px solid var(--border-glass); border-radius:10px; padding:9px 16px; min-height:40px; background:transparent; color:var(--text-sub); font-size:.86rem; }
.category-filter-btn.active, .category-filter-btn:hover { background:var(--md-container); border-color:transparent; color:var(--accent-neon); }
.form-group-custom { gap:8px; margin-bottom:16px; min-width:0; }
.form-group-custom label { font-size:.88rem; font-weight:500; }
.form-group-custom :is(input,select,textarea), .gym-toolbar select, .gym-members-controls select, .gym-finance-panel input { min-height:52px; padding:13px 16px; border:1px solid var(--border-glow); border-radius:8px; background:var(--panel-glass); color:var(--text-bright); font-size:1rem; max-width:100%; }
input::placeholder, textarea::placeholder { color:var(--text-dim); opacity:1; }
.form-group-custom :is(input,select,textarea):focus, .gym-toolbar select:focus, .gym-finance-panel input:focus { outline:2px solid var(--accent-neon); outline-offset:-2px; border-color:var(--accent-neon); }
.search-input-wrapper { width:min(340px,100%); }
.search-input-wrapper input { min-height:48px; border:1px solid transparent; border-radius:100px; background:var(--inner-box-bg); font-size:.94rem; padding:12px 20px 12px 44px; }
.search-input-wrapper input:focus { border-color:var(--accent-neon); box-shadow:0 0 0 1px var(--accent-neon); background:var(--panel-glass); }
.search-input-wrapper i { left:18px; }
.gym-toolbar, .gym-members-controls { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:0; padding:16px; border-radius:16px; background:var(--inner-box-bg); }
.gym-toolbar label { font-size:.85rem; color:var(--text-sub); }
.gym-toolbar select { min-height:44px; padding:8px 12px; border-color:var(--border-glass); }
.gym-ops-bar { margin:0; padding:12px 16px; border:1px solid var(--border-glass); border-radius:16px; font-size:.85rem; }
.gym-ops-bar button { margin-inline-start:auto; }
.gym-ops-bar button, .gym-expiry-items button, .gym-finance-panel button, .gym-audit-button { border:0; border-radius:100px; padding:10px 18px; min-height:44px; color:var(--accent-neon); background:var(--md-container); }
#gym-bulk-delete { color:var(--accent-red); background:color-mix(in srgb,var(--accent-red) 10%,var(--panel-glass)); }
.gym-member-select { padding-bottom:12px; border-bottom:1px solid var(--border-glass); font-size:.85rem; }
.gym-member-select label { display:flex; align-items:center; gap:10px; }
/* Menus and secondary panels share one elevation and shape scale. */
.gym-actions summary { background:var(--inner-box-bg); border:0; border-radius:100px; min-height:44px; }
.gym-actions-menu { background:var(--panel-glass); border:1px solid var(--border-glass); border-radius:16px; padding:8px; box-shadow:var(--md-shadow); }
.gym-actions-menu button { min-height:44px; border-radius:10px; }
.gym-actions-menu .gym-danger { color:var(--accent-red); }
.gym-drawer-backdrop, .modal-backdrop { background:#0006; backdrop-filter:none; }
.modal-backdrop { visibility:hidden; transition:opacity 200ms var(--md-easing),visibility 200ms; }
.modal-backdrop.active { visibility:visible; }
.modal-glass-box { max-width:480px; max-height:calc(100dvh - 32px); overflow-y:auto; padding:28px; gap:20px; border:0; border-radius:28px; background:var(--panel-glass); box-shadow:0 16px 48px #0003; transform:translateY(16px) scale(.98); transition:transform 240ms var(--md-easing); }
.modal-backdrop.active .modal-glass-box { transform:none; }
.modal-header-text { font-size:1.3rem; font-weight:500; gap:16px; margin-bottom:4px; }
.modal-header-text .fa-xmark, .toggle-pass-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; flex-shrink:0; }
.toggle-pass-btn { left:4px; }
.modal-header-text .fa-xmark:hover, .toggle-pass-btn:hover { background:var(--card-glass-hover); }
.gym-drawer, .gym-finance-panel { background:var(--panel-glass); color:var(--text-bright); border:0; border-radius:28px 0 0 28px; padding:28px; box-shadow:0 12px 40px #0003; }
.gym-drawer { transition:transform 300ms var(--md-easing); }
.gym-drawer-actions button, .gym-close { border:0; border-radius:100px; min-height:44px; background:var(--md-container); color:var(--accent-neon); }
.gym-finance-stats>div { background:var(--inner-box-bg); border:0; border-radius:16px; padding:14px; }
.gym-finance-warning { color:var(--accent-amber); }
.gym-toast { background:var(--text-bright); color:var(--bg-dark); border-radius:8px; box-shadow:var(--md-shadow); border-inline-start:4px solid var(--accent-neon); }
.gym-table-wrap, .measurement-table-scroll { border-color:var(--border-glass); border-radius:16px; }
.gym-table { background:var(--panel-glass); }
.gym-table th, .measurement-table thead { background:var(--inner-box-bg); color:var(--text-sub); }
.gym-table th, .gym-table td, .measurement-table th, .measurement-table td { border-color:var(--border-glass); }
.measurement-table-scroll { overflow-x:auto; }
.measurement-table { min-width:760px; font-size:.9rem; }
.measurement-table th, .measurement-table td { padding:12px; white-space:nowrap; }
/* Theme settings retain every palette and shared persistence behavior. */
.settings-intro { background:var(--inner-box-bg); padding:24px; border:0; border-radius:24px; }
.site-theme-choice { border:2px solid var(--border-glass); border-radius:20px; padding:16px; gap:12px; }
.site-theme-choice.selected { background:var(--inner-box-bg); border-color:var(--accent-neon); }
.site-theme-sample { border-radius:12px; }
.site-theme-name small { border-radius:100px; padding:4px 10px; }
.settings-save-bar { padding-top:24px; }
/* Responsive navigation bar: all five destinations stay available, tools remain in More. */
@media(max-width:1100px) and (min-width:901px) {
  body.is-admin #admin-portal-view { grid-template-columns:220px minmax(0,1fr); }
  body.is-admin aside.sidebar { width:220px; padding-inline:10px; }
  body.is-admin .content-area { padding:24px; }
  body #view-dashboard .stats-row .glass-card { padding:16px; }
}
@media(max-width:900px) {
  :root { --md-header-height:72px; }
  body header.main-header { padding:10px 16px; }
  body.is-admin .app-viewport { padding:0!important; }
  body.is-admin #admin-portal-view { display:block!important; width:100%; height:calc(100dvh - var(--md-header-height)); min-height:0; }
  body.is-admin .content-area { width:100%; height:100%; padding:24px 16px calc(var(--md-nav-height) + env(safe-area-inset-bottom,0px) + 28px); border-radius:24px 24px 0 0; }
  body.is-admin aside.sidebar { position:fixed; inset:auto 0 0; width:100%; height:calc(var(--md-nav-height) + env(safe-area-inset-bottom,0px)); padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:row; justify-content:space-around; align-items:stretch; gap:2px; border:0; border-top:1px solid var(--border-glass); border-radius:0; background:var(--bg-dark); overflow:visible; z-index:1200; }
  body.is-admin .sidebar .nav-link { flex:1 1 0; min-width:0; min-height:0; flex-direction:column; justify-content:center; gap:4px; padding:0; border-radius:16px; font-size:.71rem; line-height:1.3; text-align:center; }
  body.is-admin .sidebar .nav-link.active { background:transparent; }
  body.is-admin .sidebar .nav-link>i { display:flex; align-items:center; justify-content:center; height:32px; width:56px; max-width:100%; border-radius:100px; font-size:1.1rem; }
  body.is-admin .sidebar .nav-link.active>i { background:var(--md-container); }
  .nav-badge { position:absolute; top:0; inset-inline-end:2px; left:auto; font-size:10px; padding:2px 5px; }
  body.is-admin .sidebar .payment-side-box, body.is-admin .gym-sidebar-tools { display:none; }
  body.is-admin .gym-mobile-tools { display:block; position:relative; flex-shrink:0; }
  .gym-mobile-tools>button { display:flex; align-items:center; gap:6px; min-height:44px; padding:10px 12px; border:0; border-radius:100px; color:var(--text-sub); background:var(--inner-box-bg); cursor:pointer; font:inherit; font-size:.82rem; }
  .gym-mobile-tools-panel { position:absolute; top:calc(100% + 12px); inset-inline-end:0; z-index:2500; width:248px; max-width:calc(100vw - 32px); padding:8px; background:var(--panel-glass); border:1px solid var(--border-glass); border-radius:16px; box-shadow:var(--md-shadow); }
  .gym-mobile-tools-panel button { display:block; width:100%; min-height:48px; border:0; background:transparent; color:var(--text-bright); text-align:start; padding:12px 16px; border-radius:10px; cursor:pointer; font:inherit; font-size:.9rem; }
  .gym-mobile-tools-panel button:hover { background:var(--card-glass-hover); }
  .gym-mobile-tools-caption { border-top:1px solid var(--border-glass); padding:16px 16px 4px; color:var(--text-sub); font-size:.76rem; }
  .header-controls { gap:6px; }
  body .header-controls .btn-liquid { padding:10px 14px; font-size:.82rem; }
  .logout-btn { padding:10px 12px; font-size:.82rem; }
  .stats-row, #view-dashboard .stats-row { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px!important; }
  body #view-dashboard .stats-row .glass-card { min-height:144px; padding:18px; }
  .card-value { font-size:1.8rem; }
  .card-label { font-size:.82rem; }
  .data-panel { padding:20px; border-radius:20px; gap:16px; }
  .panel-header { align-items:stretch; flex-direction:column; gap:16px; }
  .panel-header h2 { font-size:1.05rem; }
  .search-input-wrapper { width:100%; }
  .items-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))!important; gap:14px!important; }
  body:not(.is-admin) #member-portal-view { padding:16px 16px 32px; }
  .gym-toolbar { gap:10px; padding:12px; }
  .gym-toolbar select { flex:1 1 120px; min-width:0; }
  .gym-count { flex-basis:100%; }
  .gym-dashboard-heading { gap:12px; }
  .gym-dashboard-heading .btn-liquid { padding:10px 16px; font-size:.82rem; }
  .measurement-table-scroll { overflow-x:auto; border-radius:12px; }
  .measurement-table { min-width:760px; table-layout:auto; font-size:.85rem; }
  .measurement-table th:first-child { width:auto; }
  .measurement-table th, .measurement-table td { padding:12px; white-space:nowrap; }
  #measurements-modal .measurement-modal { padding:24px 16px; }
}
@media(max-width:480px) {
  .login-wrapper { padding:16px; }
  .login-box { padding:28px 24px; gap:24px; border-radius:28px; }
  body header.main-header { padding:10px 12px; }
  .brand-section { gap:8px; }
  .brand-title h1 { font-size:1.05rem; }
  body .main-header .brand-icon:has(.gym-brand-logo) { width:36px; height:36px; border-radius:12px; }
  body .header-controls .btn-liquid { gap:5px; padding:10px; font-size:.75rem; }
  .gym-mobile-tools>button, .logout-btn { padding:10px 8px; font-size:.75rem; gap:5px; }
  body.is-admin .content-area { padding-inline:12px; }
  .data-panel { padding:16px; }
  .item-card-glass { padding:16px; }
  .modal-backdrop { padding:12px; }
  .modal-glass-box { max-height:calc(100dvh - 24px); padding:24px 20px; }
  .gym-drawer, .gym-finance-panel { padding:24px 20px; border-radius:0; }
  .settings-theme-grid { grid-template-columns:1fr; }
}
/* Google-style outlined text fields with a notched, floating label in RTL and LTR. */
.form-group-custom.md-outlined-field { position:relative; display:block; margin-top:8px; margin-bottom:18px; }
.md-outlined-field > label {
  position:absolute; inset-inline-start:12px; top:28px; transform:translateY(-50%);
  max-width:calc(100% - 64px); padding:0 6px; margin:0; z-index:1;
  background:var(--panel-glass); color:var(--text-sub); font-size:1rem; font-weight:400;
  line-height:1.35; cursor:text; pointer-events:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:top 180ms var(--md-easing),font-size 180ms var(--md-easing),color 180ms var(--md-easing);
}
.md-outlined-field :is(input,textarea) { width:100%; min-height:56px; border-radius:4px; padding:16px; background:var(--panel-glass); border:1px solid var(--border-glow); }
.md-outlined-field :is(input,textarea)::placeholder { color:transparent; }
.md-outlined-field:focus-within :is(input,textarea)::placeholder { color:var(--text-dim); }
.md-outlined-field:focus-within > label,
.md-outlined-field:has(:is(input,textarea):not(:placeholder-shown)) > label,
.md-outlined-field:has(input:autofill) > label { top:0; font-size:.78rem; }
.md-outlined-field:focus-within > label { color:var(--accent-neon)!important; }
.md-outlined-field :is(input,textarea):hover { border-color:var(--text-bright); }
.md-outlined-field :is(input,textarea):focus { border-color:var(--accent-neon); outline:2px solid var(--accent-neon); outline-offset:-2px; }
.md-outlined-field .input-pass-wrapper { width:100%; }
.md-outlined-field .toggle-pass-btn { left:8px; width:40px; height:40px; color:var(--text-sub); font-size:1.1rem; }
.md-outlined-field .input-pass-wrapper input { padding-left:56px!important; }
/* Motion is restrained, interruptible and disabled by the OS preference. */
@media(prefers-reduced-motion:no-preference) {
  :is(button,summary,.nav-link,.item-card-glass,.site-theme-choice) { transition:background-color 160ms var(--md-easing),border-color 160ms var(--md-easing),box-shadow 160ms var(--md-easing),color 160ms var(--md-easing); }
  .login-box { animation:md-enter 360ms var(--md-easing) both; }
  .app-viewport:not(.hidden) { animation:md-enter 420ms var(--md-easing) both; }
  #member-login-form, #admin-login-form { animation:md-enter 260ms var(--md-easing) both; }
  .item-card-glass { transition:transform 220ms var(--md-easing),box-shadow 220ms var(--md-easing),border-color 180ms var(--md-easing); }
  .item-card-glass:hover { transform:translateY(-2px); box-shadow:var(--md-shadow); }
  body .btn-liquid, .action-icon-btn { transition:transform 180ms var(--md-easing),box-shadow 180ms var(--md-easing),background-color 180ms var(--md-easing); }
  body .btn-liquid:active, .action-icon-btn:active { transform:scale(.96); }
  .sidebar .nav-link > i { transition:background-color 200ms var(--md-easing),transform 200ms var(--md-easing); }
  .sidebar .nav-link.active > i { animation:md-icon-enter 280ms var(--md-easing); }
  @keyframes md-icon-enter { from { transform:scale(.8); } to { transform:scale(1); } }
  .gym-mobile-tools-panel:not([hidden]), .gym-actions[open] .gym-actions-menu, .gym-export-menu[open] .gym-export-options { animation:md-enter 200ms var(--md-easing) both; }
  .gym-finance-panel:not([hidden]) { animation:md-enter 280ms var(--md-easing) both; }
  @keyframes md-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* Login fields are presentational HTML, independent of motion initialization. */
.login-box .md-outlined-field {
  --md-field-bg: var(--inner-box-bg);
  background:var(--md-field-bg);
  border-radius:12px 12px 4px 4px;
}
.login-box .md-outlined-field :is(input,textarea) {
  min-height:64px;
  padding:26px 16px 8px;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--border-glow);
  border-radius:12px 12px 4px 4px;
  box-shadow:none;
}
.login-box .md-outlined-field > label {
  top:32px;
  inset-inline-start:16px;
  padding:0;
  background:transparent;
  font-weight:400;
}
.login-box .md-outlined-field:focus-within > label,
.login-box .md-outlined-field:has(input:not(:placeholder-shown)) > label,
.login-box .md-outlined-field:has(input:autofill) > label {
  top:14px;
  transform:translateY(-50%);
  font-size:.76rem;
}
.login-box .md-outlined-field :is(input,textarea):focus {
  outline:0;
  border-bottom:2px solid var(--accent-neon);
  padding-bottom:7px;
}
.login-box .md-outlined-field:focus-within {
  background:color-mix(in srgb,var(--accent-neon) 6%,var(--md-field-bg));
}
.login-box .md-outlined-field .toggle-pass-btn {
  top:12px;
  color:var(--text-sub);
}
@media(prefers-reduced-motion:no-preference) {
  .login-box .md-outlined-field { transition:background-color 180ms var(--md-easing); }
}

/* Google-style rounded captain passcode field; keep other inputs unchanged. */
#admin-login-form .form-group-custom:has(#login-passcode),
#admin-login-form .input-pass-wrapper,
#admin-login-form #login-passcode {
  border-radius: 28px;
}

/* Match the member phone field to the rounded captain passcode field. */
#member-login-form .form-group-custom:has(#login-phone),
#member-login-form #login-phone {
  border-radius: 28px;
}

/* Material 3 shape system — loaded last so forms and dynamically rendered controls
   retain their rounded geometry during focus, hover and modal animation. */
:root {
  --md-shape-field: 20px;
  --md-shape-card: 24px;
  --md-shape-button: 999px;
  --md-shape-small: 14px;
}
body :is(.form-group-custom input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.form-group-custom select,.form-group-custom textarea,
  .gym-toolbar select,.gym-members-controls select,.gym-finance-panel input,
  #measurements-exam-select,#measurements-fields input,#measurements-fields select,
  .modal-glass-box input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .modal-glass-box select,.modal-glass-box textarea,
  .gym-ops-bar select,.gym-ops-bar input:not([type="checkbox"])) {
  border-radius:var(--md-shape-field);
  background-clip:padding-box;
  transition:border-color 180ms cubic-bezier(.2,0,0,1),background-color 180ms cubic-bezier(.2,0,0,1),box-shadow 180ms cubic-bezier(.2,0,0,1);
}
body :is(.form-group-custom,.modal-glass-box,#measurements-picker,#measurements-fields) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea):focus-visible {
  border-radius:var(--md-shape-field);
  outline:2px solid var(--accent-neon);
  outline-offset:1px;
}
body :is(.modal-glass-box,.data-panel,.item-card-glass,.details-box-inner,.settings-intro,.settings-display-mode,.site-theme-choice,.measurement-table-scroll,.gym-finance-panel,.gym-expiry-alerts) {
  border-radius:var(--md-shape-card);
}
body :is(button,.btn-liquid,.action-btn,.action-icon-btn,.category-filter-btn,.site-settings-button,.site-settings-back,
  .gym-ops-bar button,.gym-expiry-items button,.gym-finance-panel button,.gym-audit-button,
  .gym-sidebar-tools button,.gym-export-menu summary,.gym-mobile-tools-panel button) {
  border-radius:var(--md-shape-button);
}
body :is(.site-theme-sample,.settings-preview-info,.gym-finance-stats>div,.cliq-card-mini,.cash-option-mini,.payment-side-box) {
  border-radius:var(--md-shape-small);
}
body :is(.site-theme-choice,.category-filter-btn,.btn-liquid,.action-btn,.modal-glass-box,.form-group-custom input,.form-group-custom select) {
  transition-property:transform,opacity,background-color,border-color,box-shadow,color;
  transition-duration:200ms;
  transition-timing-function:cubic-bezier(.2,0,0,1);
}
/* Keep login tab segments flush inside the pill container. */
body .login-tabs {border-radius:999px;overflow:hidden;}
body .login-tabs .login-tab-btn {border-radius:0;}
/* Icons remain circles, not elongated pills. */
body :is(.action-icon-btn,.modal-header-text .fa-xmark,.toggle-pass-btn) {border-radius:50%;}
/* Date/select inputs rendered by the fitness examination editor. */
body #measurements-modal :is(#measurements-picker,#measurements-fields) :is(select,input,textarea) {
  border-radius:20px;
}
@media(max-width:600px) {
  body :is(.modal-glass-box,.measurement-modal) {border-radius:24px;}
  body #measurements-modal :is(#measurements-picker,#measurements-fields) :is(select,input,textarea) {min-width:0;max-width:100%;}
}
@media(prefers-reduced-motion:reduce) {
  body :is(.site-theme-choice,.category-filter-btn,.btn-liquid,.action-btn,.modal-glass-box,.form-group-custom input,.form-group-custom select) {transition:none!important;}
}