/* =====================================================================
   Design layer 2 (loaded after style.css): glass, glow, motion,
   membership card, check-in animations, staff tools, light theme.
   ===================================================================== */
:root {
  --font-num: 'Space Grotesk', 'Inter', sans-serif;
  --glass: rgba(21, 25, 30, 0.62);
  --glass-strong: rgba(24, 29, 35, 0.86);
  --glass-border: rgba(255, 255, 255, 0.07);
  --glow: 0 0 0 1px rgba(200, 240, 49, 0.35), 0 8px 26px -8px rgba(200, 240, 49, 0.6);
  --heat: 200, 240, 49;
  --blue: #60a5fa;
}

/* Soft colored light behind everything, so the frosted glass has something to blur. */
body {
  background:
    radial-gradient(1100px 600px at 8% -12%, rgba(200, 240, 49, 0.06), transparent 60%),
    radial-gradient(900px 640px at 108% 8%, rgba(96, 165, 250, 0.07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ---------- Glass cards ---------- */
.card, .crowd, .feature, .day-col, .table-wrap {
  background: var(--glass);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px -18px rgba(0, 0, 0, 0.6);
}
.admin-side {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-color: var(--glass-border);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .crowd, .feature, .day-col, .table-wrap { background: var(--surface); }
}

/* ---------- Gradient borders on highlighted cards ---------- */
.plan.highlight, .setup-card, .member-card {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--accent), var(--blue)) border-box;
  box-shadow: 0 0 40px -18px rgba(200, 240, 49, 0.5);
}

/* ---------- Neon glow (only on key elements) ---------- */
.btn-primary { box-shadow: var(--glow); }
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(200, 240, 49, 0.55), 0 10px 34px -6px rgba(200, 240, 49, 0.75); }
.admin-side nav a.current { box-shadow: 0 0 22px -6px rgba(200, 240, 49, 0.8); }
.big-num, .plan.highlight .price, .stat .value.glow { text-shadow: 0 0 22px rgba(200, 240, 49, 0.35); }

/* ---------- Numbers in a sharper, techy font ---------- */
.price, .big-num, .stat .value, .crowd-level, .macro-val, .class-time, .slot .t, .error-page .code, .ring-num, .week-num, .mc-id {
  font-family: var(--font-num);
  letter-spacing: -0.01em;
}

/* ---------- Hero: slow-moving "aurora" and a faint grid ---------- */
.hero { isolation: isolate; }
.hero::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: -2;
  background:
    radial-gradient(35% 40% at 30% 40%, rgba(200, 240, 49, 0.16), transparent 70%),
    radial-gradient(30% 35% at 70% 55%, rgba(96, 165, 250, 0.14), transparent 70%),
    radial-gradient(25% 30% at 55% 20%, rgba(167, 139, 250, 0.1), transparent 70%);
  filter: blur(30px);
  animation: aurora 22s ease-in-out infinite alternate;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
}
@keyframes aurora {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(4%, -3%) rotate(8deg) scale(1.05); }
  100% { transform: translate(-4%, 3%) rotate(-6deg) scale(1); }
}

/* ---------- Motion ---------- */
/* Fade-and-slide in on scroll (classes added by app.js; without JavaScript everything is simply visible). */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--d, 0s);
}
.js .reveal.in { opacity: 1; transform: none; }

/* Buttons: small lift on hover, ripple on tap. */
.btn { position: relative; overflow: hidden; transition: transform 0.15s, box-shadow 0.2s, background 0.15s, border-color 0.15s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: currentColor;
  opacity: 0.25;
  transform: scale(0);
  animation: ripple 0.55s ease-out forwards;
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* Crowd meter: the bar breathes softly and a light sweeps across it. */
.meter > span { position: relative; overflow: hidden; }
.meter > span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-100%);
  animation: meter-shine 2.8s ease-in-out infinite;
}
@keyframes meter-shine { 60%, 100% { transform: translateX(100%); } }
.crowd .meter > span { animation: meter-breathe 3s ease-in-out infinite; }
@keyframes meter-breathe { 50% { filter: brightness(1.25); } }
.crowd-live { font-size: 0.75rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }

/* Smooth page changes (Chrome, Edge, Safari; other browsers simply load the page normally). */
@view-transition { navigation: auto; }
/* The frame (header, sidebar, tabs) stays still; only the page content moves. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
main { view-transition-name: page; }
::view-transition-old(page) { animation: vt-out 0.18s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(page) { animation: vt-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
::view-transition-group(page) { animation-duration: 0.3s; }
@keyframes vt-out { to { opacity: 0; transform: translateX(-28px) scale(0.99); filter: blur(3px); } }
@keyframes vt-in { from { opacity: 0; transform: translateX(28px) scale(0.99); filter: blur(3px); } }
/* Arabic pages read right to left, so the slide goes the other way. */
html[dir='rtl']::view-transition-old(page) { animation-name: vt-out-rtl; }
html[dir='rtl']::view-transition-new(page) { animation-name: vt-in-rtl; }
@keyframes vt-out-rtl { to { opacity: 0; transform: translateX(28px) scale(0.99); filter: blur(3px); } }
@keyframes vt-in-rtl { from { opacity: 0; transform: translateX(-28px) scale(0.99); filter: blur(3px); } }
/* Browsers without page transitions (Firefox): the new page simply fades in. */
.no-vt main { animation: page-fade 0.35s ease-out both; }
@keyframes page-fade { from { opacity: 0; transform: translateY(10px); } }
/* A thin bar across the top while the next page is loading. */
.nav-loading::after { content: ''; position: fixed; z-index: 200; top: 0; inset-inline-start: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--accent), #60a5fa); transform-origin: left; animation: nav-load 6s cubic-bezier(0.1, 0.7, 0.1, 1) forwards; pointer-events: none; }
html[dir='rtl'].nav-loading::after { transform-origin: right; }
@keyframes nav-load { from { transform: scaleX(0); } 15% { transform: scaleX(0.45); } to { transform: scaleX(0.92); } }
.site-header { view-transition-name: site-header; }
.admin-side { view-transition-name: admin-side; }
.tabs { view-transition-name: member-tabs; }

/* ---------- Digital membership card ---------- */
.member-card {
  position: relative;
  border-radius: 22px;
  padding: 22px;
  overflow: hidden;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.25s ease-out;
  will-change: transform;
}
.member-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(400px 220px at var(--gx, 30%) var(--gy, 0%), rgba(255, 255, 255, 0.12), transparent 60%);
}
.member-card::after {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(200, 240, 49, 0.22), transparent 70%);
}
.mc-top, .mc-bottom { display: flex; justify-content: space-between; gap: 12px; position: relative; z-index: 1; }
.mc-top { align-items: center; }
.mc-bottom { align-items: flex-end; }
.mc-brand { display: flex; align-items: center; gap: 10px; font: 700 0.95rem var(--font-head); text-transform: uppercase; letter-spacing: 0.06em; }
.mc-brand .brand-mark { width: 30px; height: 30px; }
.mc-qr { position: relative; z-index: 1; display: grid; place-items: center; margin: 18px auto 14px; width: 236px; }
.mc-qr img#qr-img { width: 220px; height: 220px; border-radius: 16px; background: #fff; padding: 10px; margin: 0; transition: opacity 0.2s; }
.mc-qr .qr-ring { top: -10px; right: -10px; }
.mc-name { font: 700 1.15rem var(--font-head); text-transform: uppercase; letter-spacing: 0.03em; }
.mc-id { font-size: 0.8rem; font-weight: 600; color: var(--muted); letter-spacing: 0.12em; }
.mc-days { text-align: end; }
.mc-days b { font: 700 1.7rem var(--font-num); color: var(--accent-text); display: block; line-height: 1; }
.member-card img.mc-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); margin: 0; padding: 0; background: none; }
.tilt-hint { font-size: 0.75rem; color: var(--muted); text-align: center; margin-top: 10px; }

/* ---------- Progress ring (days left) ---------- */
.ring-wrap { position: relative; width: 132px; height: 132px; flex: none; }
.ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 0 6px rgba(200, 240, 49, 0.35)); }
.ring-wrap circle { fill: none; stroke-width: 9; }
.ring-wrap .ring-bg { stroke: var(--surface-2); }
.ring-wrap .ring-fg {
  stroke: url(#ringGrad);
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-num { font-size: 2.1rem; font-weight: 700; line-height: 1; }
.ring-sub { font-size: 0.75rem; color: var(--muted); }

/* ---------- Weekly summary ---------- */
.week-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.week-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; }
.week-num { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.week-num.down { color: var(--ok); }
.week-num.up { color: var(--warn); }

/* ---------- Check-in celebration (member) and success pulse (desk) ---------- */
.celebrate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: rgba(5, 10, 6, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: fade-in 0.25s ease both;
}
.celebrate.out { animation: fade-out 0.35s ease both; }
.celebrate-box { text-align: center; padding: 16px; }
.check-burst { position: relative; width: 140px; height: 140px; margin: 0 auto 18px; }
.check-burst .disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #4ade80;
  display: grid;
  place-items: center;
  animation: pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  box-shadow: 0 0 40px rgba(74, 222, 128, 0.6);
}
.check-burst .disc svg, .desk-check svg {
  stroke: #062b12;
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.check-burst .disc svg { width: 64px; height: 64px; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 0.45s 0.25s ease forwards; }
.check-burst .pulse { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #4ade80; animation: ring-out 1.4s ease-out infinite; }
.check-burst .pulse:nth-child(2) { animation-delay: 0.45s; }
@keyframes pop { from { transform: scale(0.3); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ring-out { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.9); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.checkin-result.ok.show { animation: ok-pulse 1.1s ease-out 1; }
@keyframes ok-pulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); } 100% { box-shadow: 0 0 0 22px rgba(74, 222, 128, 0); } }
.checkin-result.bad.show { animation: shake 0.4s ease 1; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.desk-photo-wrap { position: relative; flex: none; }
.desk-check {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #4ade80;
  display: grid;
  place-items: center;
  border: 3px solid var(--surface);
  animation: pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.desk-check svg { width: 20px; height: 20px; }

/* ---------- Command bar (Ctrl+K) ---------- */
.cmdk {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.cmdk.open { display: flex; animation: fade-in 0.15s ease both; }
.cmdk-panel {
  width: 100%;
  max-width: 620px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  animation: cmdk-in 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes cmdk-in { from { transform: translateY(-8px) scale(0.98); opacity: 0; } }
.cmdk-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--muted); }
.cmdk-input input { border: 0; background: transparent !important; box-shadow: none !important; font-size: 1.05rem; padding: 4px 0; }
.cmdk-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.cmdk-group { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 10px 10px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--text); cursor: pointer; }
.cmdk-item:hover { text-decoration: none; }
.cmdk-item.active { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(200, 240, 49, 0.35); }
.cmdk-item .av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-text);
  object-fit: cover;
  flex: none;
}
.cmdk-item .meta { margin-inline-start: auto; font-size: 0.8rem; color: var(--muted); }
.cmdk-empty { padding: 18px; text-align: center; color: var(--muted); }
.cmdk-foot { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--muted); }
kbd {
  font: 600 0.72rem var(--font-num);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--text);
}
.search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 14px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
.search-trigger kbd { margin-inline-start: auto; }

/* ---------- Busiest-times heatmap ---------- */
.heatmap { display: grid; gap: 3px; align-items: center; font-size: 0.7rem; overflow-x: auto; padding-bottom: 4px; }
.heatmap .hm-day { color: var(--muted); padding-inline-end: 6px; white-space: nowrap; }
.heatmap .hm-hour { color: var(--muted); text-align: center; }
.hm { height: 22px; min-width: 16px; border-radius: 4px; background: rgba(var(--heat), var(--a)); position: relative; cursor: default; }
.hm.zero { background: var(--surface-2); }
.hm:hover { outline: 2px solid var(--text); z-index: 1; }
.hm-legend { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--muted); margin-top: 10px; }
.hm-legend span { width: 18px; height: 10px; border-radius: 3px; background: rgba(var(--heat), var(--a)); }
.hm-legend span.zero { background: var(--surface-2); }
.hm-tip {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.8rem;
  box-shadow: var(--shadow);
  display: none;
}
.hm-tip b { display: block; font-family: var(--font-num); }

/* Live dashboard */
.live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--ok); }
.list-row.flash, .inside-row.flash { animation: row-flash 1.6s ease; }
@keyframes row-flash { 0% { background: rgba(74, 222, 128, 0.2); } 100% { background: transparent; } }

/* ---------- Loading skeletons ---------- */
.skeleton {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surface-2) 25%, rgba(255, 255, 255, 0.08) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.mc-qr.loading img#qr-img { opacity: 0.35; }
.mc-qr.loading::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 14px;
  background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.55) 50%, transparent 75%);
  background-size: 200% 100%;
  animation: shimmer 1s linear infinite;
}
.sk-row { display: flex; gap: 12px; align-items: center; padding: 9px 10px; }
.sk-row .skeleton:first-child { width: 32px; height: 32px; border-radius: 50%; }
.sk-row .skeleton:last-child { height: 12px; flex: 1; }

/* ---------- 404 ---------- */
.lost { padding: 90px 16px 70px; text-align: center; }
.lost .dumbbell { width: 140px; height: 140px; margin: 0 auto 16px; color: var(--accent); filter: drop-shadow(0 0 18px rgba(200, 240, 49, 0.5)); animation: lift 1.6s ease-in-out infinite; }
@keyframes lift { 0%, 100% { transform: translateY(8px) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(6deg); } }
.lost h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); }

/* ---------- Staff theme switch ---------- */
.theme-toggle { width: 100%; justify-content: flex-start; gap: 10px; margin-top: 6px; }

/* ---------- Light theme (staff area) ---------- */
[data-theme='light'] {
  color-scheme: light;
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --border: #dbe1e8;
  --text: #121820;
  --muted: #5a6573;
  --accent-text: #4b6a00;
  --accent-soft: rgba(132, 170, 0, 0.14);
  --ok: #15803d;
  --warn: #b45309;
  --danger: #c2410c;
  --info: #1d4ed8;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  --glass: rgba(255, 255, 255, 0.8);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(15, 23, 42, 0.08);
  --glow: 0 0 0 1px rgba(110, 150, 0, 0.35), 0 8px 22px -10px rgba(110, 150, 0, 0.55);
  --heat: 77, 124, 15;
}
[data-theme='light'] body {
  background:
    radial-gradient(1000px 600px at 8% -12%, rgba(200, 240, 49, 0.18), transparent 60%),
    radial-gradient(900px 600px at 108% 8%, rgba(96, 165, 250, 0.12), transparent 60%),
    var(--bg);
}
[data-theme='light'] .card, [data-theme='light'] .table-wrap { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 30px -20px rgba(15, 23, 42, 0.25); }
[data-theme='light'] .alert-success { background: #ecfdf3; border-color: #a7e3bd; color: #14532d; }
[data-theme='light'] .alert-error { background: #fef2f2; border-color: #f5c2c2; color: #7f1d1d; }
[data-theme='light'] .alert-warn { background: #fffbeb; border-color: #f3d68a; color: #713f12; }
[data-theme='light'] .admin-side nav a.current { color: #11140a; }
[data-theme='light'] .big-num, [data-theme='light'] .stat .value.glow { text-shadow: none; }
[data-theme='light'] .chart .dot { stroke: #fff; }
[data-theme='light'] .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, #fff 50%, var(--surface-2) 75%); background-size: 200% 100%; }
[data-theme='light'] input, [data-theme='light'] select, [data-theme='light'] textarea { background: #fff; }
[data-theme='light'] .checkin-result.ok { background: #ecfdf3; }
[data-theme='light'] .checkin-result.bad { background: #fef2f2; }
[data-theme='light'] .checkin-result.warn { background: #fffbeb; }
[data-theme='light'] tbody tr:hover { background: rgba(15, 23, 42, 0.03); }

/* ---------- Respect the "reduce motion" setting ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .member-card { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Personal training packages (member area) ---------- */
.pt-left { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 12px; }
.pt-left-num { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--accent-text, var(--accent)); }
.pt-pack.is-over .pt-left-num { color: var(--muted); }
.pt-options { display: grid; gap: 10px; margin-bottom: 18px; }
.pt-option { position: relative; display: block; margin: 0; cursor: pointer; }
.pt-option input { position: absolute; opacity: 0; inset: 0; }
.pt-option-box { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.2s, background 0.2s, transform 0.2s; }
.pt-option-box .muted { grid-column: 1; }
.pt-option-price { grid-column: 2; grid-row: 1 / span 2; font-weight: 800; white-space: nowrap; }
.pt-option:hover .pt-option-box { transform: translateY(-1px); }
.pt-option input:checked + .pt-option-box { border-color: var(--accent); background: rgba(200, 240, 49, 0.08); }
.pt-option input:focus-visible + .pt-option-box { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Notifications card (member overview) ---------- */
.push-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.push-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); color: var(--accent-text, var(--accent)); }

/* ---------- "Turn on notifications?" question ---------- */
.push-ask { position: fixed; z-index: 60; inset-inline: 16px; bottom: 16px; max-width: 520px; margin-inline: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(20px); transition: opacity 0.3s, transform 0.3s; }
.push-ask.in { opacity: 1; transform: none; }
.push-ask-text { flex: 1; min-width: 180px; display: grid; gap: 2px; }
.push-ask-actions { display: flex; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .push-ask { transition: none; } }

/* ---------- Workout log ---------- */
.wk-head, .wk-row { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(0, 1fr)); gap: 8px; }
.wk-head { font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; }
.wk-row { margin-bottom: 8px; }
.wk-row input { min-width: 0; padding-inline: 10px; }
/* ---------- Booking a training time slot ---------- */
.slot-booked { margin-top: 14px; }
.slot-picker { margin-top: 14px; }
.slot-picker > summary { list-style: none; display: inline-flex; cursor: pointer; }
.slot-picker > summary::-webkit-details-marker { display: none; }
.slot-day { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--border); }
.slot-day-name { font-weight: 600; font-size: 0.9rem; padding-top: 5px; }
.slot-times { display: flex; flex-wrap: wrap; gap: 6px; }
.slot-times .chip { background: none; cursor: pointer; font-family: inherit; color: var(--text); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.slot-times .chip:hover, .slot-times .chip:focus-visible { background: var(--accent); border-color: var(--accent); color: #10140a; }
@media (max-width: 520px) { .slot-day { grid-template-columns: 1fr; gap: 4px; } }
/* ---------- Guest pass page ---------- */
.guest-pass { text-align: center; }
.guest-pass.used, .guest-pass.expired, .guest-pass.cancelled { opacity: 0.85; }

/* ---------- Goal card (Progress) ---------- */
.goal-top { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.goal-info { flex: 1; min-width: 240px; }
.goal-edit > summary { list-style: none; cursor: pointer; }
.goal-edit > summary::-webkit-details-marker { display: none; }
.goal-types { grid-template-columns: repeat(4, 1fr); border-radius: var(--radius); }
.goal-types span { border-radius: calc(var(--radius) - 4px); }
@media (max-width: 640px) { .goal-types { grid-template-columns: 1fr 1fr; } }

.goal-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.goal-part-head { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 6px; color: var(--muted); }
.goal-part-head b { color: var(--text); }
@media (max-width: 560px) { .goal-parts { grid-template-columns: 1fr; } }

.goal-estimate { margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px dashed var(--border); font-size: 0.88rem; color: var(--muted); }
.wk-burn { color: var(--accent-text, var(--accent)); }

/* ---------- Rest timer ---------- */
.rest-timer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color 0.2s, background 0.2s; }
.rest-label { font-weight: 600; font-size: 0.9rem; }
.rest-time { font: 700 1.4rem var(--font-head); min-width: 58px; color: var(--muted); }
.rest-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.rest-presets .chip { background: none; cursor: pointer; font-family: inherit; color: var(--text); }
.rest-timer.running { border-color: var(--accent); }
.rest-timer.running .rest-time { color: var(--accent-text, var(--accent)); }
.rest-timer.done { background: rgba(200, 240, 49, 0.15); animation: ok-pulse 0.8s 2; }
#workout-form.flash-in { animation: row-flash 1s ease; }
/* ---------- Food log ---------- */
.ring-fg.is-over { stroke: var(--warn) !important; }
.text-warn { color: var(--warn); }
.food-meals { grid-template-columns: repeat(4, 1fr); border-radius: var(--radius); }
.food-meals span { border-radius: calc(var(--radius) - 4px); font-size: 0.85rem; }
.food-meal + .food-meal { margin-top: 14px; }
.food-meal-head { display: flex; justify-content: space-between; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.food-week { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 190px; align-items: end; }
.food-bar { display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; color: var(--muted); text-decoration: none; font-size: 0.72rem; }
.food-bar-fill { align-self: end; width: 100%; max-height: 78%; border-radius: 6px 6px 0 0; background: var(--accent); opacity: 0.8; transition: opacity 0.2s; }
.food-bar.is-over .food-bar-fill { background: var(--warn); }
.food-bar.is-on .food-bar-fill, .food-bar:hover .food-bar-fill { opacity: 1; }
.food-bar.is-on .food-bar-day { color: var(--text); font-weight: 700; }
.food-bar-day { padding-top: 6px; }
.food-target-line { position: absolute; inset-inline: 0; height: 0; border-top: 2px dashed rgba(96, 165, 250, 0.8); pointer-events: none; }
@media (max-width: 640px) { .food-meals { grid-template-columns: 1fr 1fr; } }
/* ---------- Goal trophies and celebration ---------- */
.trophies { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; }
.trophy { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(251, 191, 36, 0.4); font-size: 0.82rem; }
.goal-party { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(5, 7, 10, 0.72); backdrop-filter: blur(4px); overflow: hidden; animation: fade-in 0.3s; }
.goal-party.out { animation: fade-out 0.35s forwards; }
.goal-party-box { position: relative; z-index: 2; text-align: center; padding: 30px 26px; margin: 16px; max-width: 380px; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.4); background: var(--surface); animation: sched-in 0.45s cubic-bezier(0.2, 1.3, 0.4, 1); }
.goal-party-trophy { font-size: 4rem; animation: pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1); }
.confetti { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { to { top: 105%; transform: translateX(40px) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } .goal-party-box, .goal-party-trophy { animation: none; } }

/* ---------- Member problem reports ---------- */
.rep-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.rep-cat { position: relative; margin: 0; cursor: pointer; }
.rep-cat input { position: absolute; opacity: 0; inset: 0; }
.rep-cat span { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--muted); transition: border-color 0.2s, background 0.2s, color 0.2s; }
.rep-cat b { font-size: 1.4rem; }
.rep-cat input:checked + span { border-color: var(--accent); background: rgba(200, 240, 49, 0.08); color: var(--text); }
.rep-cat input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rep-reply { margin-top: 6px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface-2); }
@media (max-width: 520px) { .rep-cats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Continue with Google ---------- */
.google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border-color: #dadce0; font-weight: 600; }
.google-btn:hover { background: #f5f7fa; color: #1f1f1f; text-decoration: none; }
.or-line { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 0.85rem; }
.or-line::before, .or-line::after { content: ''; flex: 1; border-top: 1px solid var(--border); }

/* ---------- My trainer + chat ---------- */
.coach { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: start; }
.coach + .coach { margin-top: 20px; }
.coach-top { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.coach-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); flex: none; }
.coach-initials { display: grid; place-items: center; background: var(--surface-2); color: var(--accent-text, var(--accent)); font-weight: 800; font-size: 1.4rem; }
.coach-stats { display: grid; gap: 8px; margin-bottom: 14px; }
.pt-buy-card { display: flex; flex-direction: column; }
.pt-buy-card .field { margin-top: 12px; }
.tab-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 0.7rem; font-weight: 700; }
.chat { display: flex; flex-direction: column; height: 460px; }
.chat-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.chat-live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.15); }
.chat-list { flex: 1; overflow-y: auto; padding: 12px 2px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { display: flex; flex-direction: column; max-width: 82%; }
.chat-msg.own { align-self: flex-end; align-items: flex-end; }
.chat-msg.theirs { align-self: flex-start; align-items: flex-start; }
.chat-bubble { padding: 9px 13px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.chat-msg.own .chat-bubble { background: var(--accent); color: #10140a; border-end-end-radius: 4px; }
.chat-msg.theirs .chat-bubble { background: var(--surface-2); border: 1px solid var(--border); border-end-start-radius: 4px; }
.chat-time { font-size: 0.7rem; color: var(--muted); margin-top: 3px; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; padding-top: 10px; border-top: 1px solid var(--border); }
.chat-form textarea { flex: 1; resize: none; min-height: 40px; max-height: 140px; }
.chat-closed { padding-top: 10px; border-top: 1px solid var(--border); margin: 0; }
.chat-row { color: var(--text); text-decoration: none; }
.chat-row:hover { background: rgba(127, 127, 127, 0.08); }
.chat-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; }
@media (max-width: 900px) { .coach { grid-template-columns: 1fr; } .chat { height: 420px; } }

/* The trainer's plan, inside "My trainer" (spans the whole width under the trainer card and the chat). */
.coach-plan { grid-column: 1 / -1; }
.coach-plan .plan-card + .plan-card { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.plan-kind { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 0 0 10px; font-size: 1.05rem; }

/* ---------- Trainer logs a session (client page) ---------- */
.session-log { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px; border-color: rgba(200, 240, 49, 0.45); }
.session-log-count { display: flex; gap: 12px; align-items: center; }
.session-left { font: 800 2.6rem/1 var(--font-head); color: var(--accent-text, var(--accent)); }
.session-log-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1; justify-content: flex-end; }
.session-log-form input[name=note] { flex: 1; min-width: 160px; max-width: 320px; }

/* ---------- Staff calendar (weekly class timetable) ---------- */
.cal-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.cal { display: grid; grid-template-columns: 58px repeat(7, minmax(120px, 1fr)); min-width: 920px; }
.cal-head { position: sticky; top: 0; z-index: 3; padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--border); border-inline-start: 1px solid var(--border); background: var(--surface); font-weight: 700; font-size: 0.9rem; }
.cal-head small { display: block; font-weight: 500; color: var(--muted); }
.cal-head.today { color: var(--accent-text, var(--accent)); box-shadow: inset 0 -3px 0 var(--accent); }
.cal-head .cal-closed { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: rgba(248, 113, 113, 0.15); color: var(--danger); font-size: 0.7rem; }
.cal-hours { position: relative; }
.cal-hour { height: var(--hour); padding: 2px 6px; font-size: 0.72rem; color: var(--muted); text-align: end; border-top: 1px solid var(--border); }
.cal-day { position: relative; border-inline-start: 1px solid var(--border); }
.cal-day.today { background: rgba(200, 240, 49, 0.04); }
.cal-day.closed { background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(248, 113, 113, 0.05) 10px 20px); }
.cal-slot { display: block; width: 100%; height: var(--hour); border: 0; border-top: 1px solid var(--border); background: none; cursor: pointer; color: transparent; font: inherit; }
.cal-slot:hover, .cal-slot:focus-visible { background: rgba(200, 240, 49, 0.08); color: var(--muted); }
.cal-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-ev { position: absolute; inset-inline: 4px; z-index: 2; padding: 5px 7px; overflow: hidden; border: 0; border-inline-start: 3px solid var(--c); border-radius: 8px; text-align: start; font: inherit; font-size: 0.78rem; color: var(--text); cursor: pointer;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, var(--surface)), color-mix(in srgb, var(--c) 8%, var(--surface))); transition: transform 0.15s, box-shadow 0.15s; }
.cal-ev:hover, .cal-ev:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 20px -10px var(--c); z-index: 4; }
.cal-ev b { display: block; font-size: 0.82rem; }
.cal-ev .t { color: var(--c); font-weight: 700; }
.cal-ev.off { opacity: 0.45; border-inline-start-style: dashed; }
.cal-ev.locked { cursor: default; }
.cal-dialog { width: min(560px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.3); background: var(--surface); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); max-height: calc(100dvh - 32px); overflow: auto; }
.cal-dialog::backdrop { background: rgba(5, 7, 10, 0.66); backdrop-filter: blur(3px); }
.cal-dialog[open] { animation: sched-in 0.25s ease; }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; font-size: 0.85rem; color: var(--muted); }