/* ============================================================
   FAIRWAY — MEMBERS CLUB · LUXURY GOLF APP
   ============================================================ */

:root {
  --green-deep:   #0F2118;
  --green-mid:    #1C3A2A;
  --green-light:  #4A7A5C;
  --gold:         #B8952A;
  --gold-light:   #D4B84A;
  --gold-dim:     rgba(184,149,42,0.15);
  --cream:        #F5F0E8;
  --cream-dark:   #EDE6D6;
  --white:        #FFFEFB;
  --text-primary: #1C3A2A;
  --text-muted:   #6A7770;
  --text-light:   #8BAF8F;
  --border:       rgba(184,149,42,0.2);
  --border-soft:  rgba(28,58,42,0.10);
  --red:          #c0392b;
  --radius:       0px;
  --radius-sm:    0px;
  --shadow-sm:    0 2px 12px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 24px rgba(0,0,0,0.10);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.14);
  /* ── Phase 2/3 aliases ── */
  --green:          var(--green-mid);
  --dark-green:     var(--green-deep);
  --ink:            var(--text-primary);
  --mid-gray:       var(--text-muted);
  --text-secondary: var(--text-muted);
  --light-green:    #EDE6D6;

}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Ensure all form elements inherit the design-system font */
button, input, select, textarea, label {
  font-family: 'DM Sans', sans-serif;
}

html, body {
  height: 100%;
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* ─── SCREENS ─────────────────────────────────────────────── */
.screen {
  display: none;
  flex-direction: column;
  height: 100dvh;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: var(--cream);
}
.screen.active { display: flex; }

.screen-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 32px;
  scrollbar-width: none;
}
.screen-body::-webkit-scrollbar { display: none; }

/* ─── AUTH ─────────────────────────────────────────────────── */
.auth-bg {
  position: relative;
  width: 100%;
  height: 100dvh;
  background:
    linear-gradient(180deg, rgba(15,33,24,0.88) 0%, rgba(15,33,24,0.96) 100%),
    url('https://images.unsplash.com/photo-1587174486073-ae5e5cff23aa?w=800&q=80') center/cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 28px;
}

.auth-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(184,149,42,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.auth-content {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.club-crest {
  width: 88px;
  height: 88px;
  margin-bottom: 8px;
}

.club-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.club-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px;
  font-weight: 300;
  color: var(--white);
  letter-spacing: 0.05em;
  line-height: 1;
}

.club-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  color: var(--gold-light);
  margin-bottom: 32px;
}

.auth-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(184,149,42,0.25);
  border-radius: var(--radius);
  padding: 28px 24px;
  width: 100%;
  backdrop-filter: blur(16px);
}

.auth-card h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 4px;
}

.auth-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.form-group input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(184,149,42,0.2);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.form-group input::placeholder { color: rgba(255,255,255,0.3); }
.form-group input:focus { border-color: var(--gold); }

.auth-link {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  text-align: center;
  margin-top: 16px;
}
.auth-link a { color: var(--gold-light); text-decoration: none; }

/* ─── BUTTONS ──────────────────────────────────────────────── */
.btn-primary {
  width: 100%;
  padding: 14px;
  background: var(--gold);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--green-deep);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  margin-top: 20px;
}
.btn-primary:hover { background: var(--gold-light); }
.btn-primary:active { transform: scale(0.98); }

.btn-outline {
  width: 100%;
  padding: 14px;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 12px;
  transition: border-color 0.2s;
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

.btn-text {
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}

/* ─── NAV ──────────────────────────────────────────────────── */
.app-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 14px 20px 0;
  background: var(--cream);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-logo span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--green-deep);
  letter-spacing: 0.04em;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Top-bar member info — hidden on mobile, inline on desktop */
.nav-member-info {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  margin-right: 4px;
}
.nav-member-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green-deep);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.nav-member-club {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.nav-bell {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  display: flex;
}
.bell-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  border: 1.5px solid var(--cream);
}

.nav-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold);
  cursor: pointer;
}
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ─── SUB HEADER ───────────────────────────────────────────── */
.sub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  background: var(--cream);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.sub-header.transparent { background: transparent; border-bottom: none; position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.sub-header.transparent .back-btn { color: var(--white); }
.sub-header.transparent h2 { color: var(--white); }

.sub-header h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--green-deep);
}

.back-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--green-deep);
  padding: 4px;
  display: flex;
  align-items: center;
}

/* ─── BOTTOM NAV ───────────────────────────────────────────── */
.bottom-nav {
  display: flex;
  align-items: stretch;
  background: var(--cream);
  border-top: 1px solid var(--border-soft);
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav-item {
  flex: 1;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 4px 12px;
  color: var(--text-light);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s;
  position: relative;
}

.nav-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 18px);
  background: #dc2626;
  color: #fff;
  border-radius: 0;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  min-width: 16px;
  text-align: center;
  pointer-events: none;
}
.bottom-nav-item.active { color: var(--green-deep); }
.bottom-nav-item.active svg { stroke: var(--green-deep); }
.bottom-nav-item svg { stroke: var(--text-light); transition: stroke 0.2s; }

/* ─── DASHBOARD ────────────────────────────────────────────── */
.greeting-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* Inside .app-nav: full-width second row on mobile, inline on desktop */
  width: 100%;
  order: 3;
  padding: 12px 0 14px;
  margin-bottom: 0;
}

.greeting-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.greeting-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--green-deep);
}

.greeting-club {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

.greeting-club-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

.greeting-club-text {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.handicap-badge {
  background: var(--green-deep);
  border-radius: 0;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
}
.handicap-label { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; }
.handicap-value { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: var(--white); line-height: 1; }

/* ─── DASHBOARD MEMBERSHIP CARD WIDGET ────────────────────── */
.dash-card-widget {
  background: linear-gradient(135deg, #0F2118 0%, #1C3A2A 60%, #0F2118 100%);
  border: 1px solid rgba(184,149,42,0.35);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.dash-card-widget::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='200' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='170' cy='10' r='60' fill='rgba(184,149,42,0.05)'/%3E%3C/svg%3E") no-repeat right -10px top -10px;
  pointer-events: none;
}
.dcw-left { display: flex; flex-direction: column; gap: 4px; }
.dcw-club-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.dcw-club { font-size: 12px; font-weight: 600; color: var(--gold); letter-spacing: 0.06em; }
.dcw-tier { font-size: 10px; font-weight: 500; color: rgba(184,149,42,0.65); letter-spacing: 0.04em; border: 1px solid rgba(184,149,42,0.3); border-radius: 0; padding: 1px 6px; }
.dcw-name { font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 600; color: #F5F0E8; line-height: 1.1; }
.dcw-num  { font-size: 11px; color: rgba(245,240,232,0.5); letter-spacing: 0.06em; }
.dcw-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.dcw-hcp-wrap { text-align: center; }
.dcw-hcp-label { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; }
.dcw-hcp-val   { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: var(--white); line-height: 1; }

/* ─── CONDITIONS CARD ──────────────────────────────────────── */
.conditions-card {
  background: var(--green-deep);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  box-shadow: var(--shadow-md);
}

.conditions-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.conditions-temp {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--white);
  line-height: 1;
}

.conditions-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}

.conditions-right { text-align: right; }

.condition-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
}
.condition-pill.green { background: rgba(45,80,64,0.5); color: #6fcf97; border: 1px solid rgba(111,207,151,0.3); }

.conditions-date { font-size: 11px; color: rgba(255,255,255,0.4); }

/* ─── SECTION TITLE ────────────────────────────────────────── */
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--green-deep);
  margin-bottom: 14px;
}

/* ─── QUICK ACTIONS ────────────────────────────────────────── */
.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}

.action-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.1s, border-color 0.2s;
  box-shadow: var(--shadow-sm);
}
.action-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.action-card:active { transform: scale(0.97); }

.action-card.featured {
  background: var(--green-deep);
  border-color: var(--green-deep);
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 20px 20px;
}
.action-card.featured .action-icon { background: rgba(184,149,42,0.15); }
.action-card.featured .action-icon svg { stroke: var(--gold); }
.action-card.featured .action-label { color: var(--white); font-size: 16px; }
.action-card.featured .action-sub { color: var(--gold); }
.action-card.featured .action-label, .action-card.featured .action-sub { display: flex; flex-direction: column; }

.action-icon {
  width: 42px; height: 42px;
  background: var(--cream);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.action-icon svg { stroke: var(--green-mid); }

.action-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.action-sub {
  font-size: 11px;
  color: var(--text-muted);
}

/* ─── NEXT ROUND CARD ──────────────────────────────────────── */
.next-round-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}

.next-round-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--green-deep);
  border-radius: 0;
  padding: 10px 12px;
  flex-shrink: 0;
}
.date-day { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold); text-transform: uppercase; }
.date-num { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; color: var(--white); line-height: 1; }
.date-mon { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); text-transform: uppercase; }

.next-round-info { flex: 1; }
.round-time { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.round-course { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.round-players { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

.player-avatars { display: flex; }
.player-avatars img {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--white);
  margin-left: -6px;
  object-fit: cover;
}
.player-avatars img:first-child { margin-left: 0; }
.avatar-more {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--cream-dark);
  border: 2px solid var(--white);
  margin-left: -6px;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.round-players-label { font-size: 11px; color: var(--text-muted); }

.next-round-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.btn-start-round {
  padding: 7px 13px;
  background: var(--green-deep);
  border: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  cursor: pointer;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.btn-start-round:hover { background: var(--green-mid); }
.round-arrow {
  background: var(--cream);
  border: none;
  border-radius: 0;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ─── FEED ─────────────────────────────────────────────────── */
.feed { display: flex; flex-direction: column; gap: 12px; }

.feed-item {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
}

.feed-icon {
  width: 34px; height: 34px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feed-icon.trophy { background: rgba(184,149,42,0.12); color: var(--gold); }
.feed-icon.info { background: rgba(15,33,24,0.08); color: var(--green-mid); }
.feed-icon.social { background: rgba(45,80,64,0.1); color: var(--green-light); }

.feed-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.feed-body  { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin-bottom: 6px; white-space: normal; overflow: visible; }
.feed-time  { font-size: 10px; color: var(--text-light); font-style: italic; }

/* ─── MATCHMAKING ──────────────────────────────────────────── */
.matchmaking-body { padding-top: 0; }

/* Step indicator */
.steps {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  gap: 0;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0.4;
  transition: opacity 0.3s;
}
.step.active { opacity: 1; }

.step-circle {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  transition: all 0.3s;
}
.step.active .step-circle {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: var(--white);
}
.step.completed .step-circle {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--green-deep);
  opacity: 1;
}
.step.completed { opacity: 1; }
.step span { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; }
.step.active span { color: var(--green-deep); }

.step-line {
  flex: 1;
  height: 1px;
  background: var(--border);
  margin: 0 8px;
  margin-bottom: 16px;
}

.step-panel { display: none; padding: 0 20px 32px; }
.step-panel.active { display: flex; flex-direction: column; gap: 0; }

.step-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--green-deep);
  margin-bottom: 20px;
  line-height: 1.2;
}

/* Date selector */
.date-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.date-selector::-webkit-scrollbar { display: none; }

.date-option {
  flex-shrink: 0;
  width: 56px;
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  border-radius: 0;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.date-option.selected {
  background: var(--green-deep);
  border-color: var(--green-deep);
}
.date-opt-day { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--text-muted); }
.date-opt-num { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; color: var(--text-primary); line-height: 1; }
.date-option.selected .date-opt-day { color: var(--gold); }
.date-option.selected .date-opt-num { color: var(--white); }

.option-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  margin-top: 4px;
}

/* Tee time buttons */
.tee-time-options {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}

.tee-time-btn {
  flex: 1;
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  border-radius: 0;
  padding: 12px 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  line-height: 1.4;
}
.tee-time-btn small { font-weight: 400; color: var(--text-muted); font-size: 10px; }
.tee-time-btn.selected { background: var(--green-deep); border-color: var(--green-deep); color: var(--white); }
.tee-time-btn.selected small { color: rgba(255,255,255,0.6); }

/* Course options */
.course-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.course-btn {
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  border-radius: 0;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s;
}
.course-btn.selected { border-color: var(--gold); background: var(--gold-dim); }
.course-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.course-holes { font-size: 12px; color: var(--text-muted); }
.course-btn.selected .course-name { color: var(--green-deep); }

/* Pills */
.option-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }

.pill {
  padding: 8px 16px;
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  border-radius: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.pill.selected { background: var(--green-deep); border-color: var(--green-deep); color: var(--white); }

/* Handicap range */
.handicap-range { margin-bottom: 22px; }
.range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
.range-track { position: relative; height: 4px; background: var(--cream-dark); border-radius: 0; }
.range-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--gold); border-radius: 0; pointer-events: none; }
.range-track input[type=range] {
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.range-track input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: 18px; height: 18px;
  background: var(--green-deep);
  border: 3px solid var(--gold);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.range-value { text-align: center; font-size: 12px; font-weight: 600; color: var(--green-deep); margin-top: 12px; }

/* Style cards */
.style-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; }

.style-card {
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  border-radius: 0;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.style-card.selected { border-color: var(--gold); background: var(--gold-dim); }
.style-emoji { font-size: 22px; }
.style-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.style-desc { font-size: 11px; color: var(--text-muted); }
.style-card.selected .style-name { color: var(--green-deep); }

/* Results */
.results-header { margin-bottom: 20px; }
.results-subtitle { font-size: 13px; color: var(--text-muted); margin-top: -14px; }

.match-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 13px;
}

.loading-spinner {
  width: 36px; height: 36px;
  border: 2.5px solid var(--cream-dark);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.match-results.hidden { display: none; }

/* Suggested fourball */
.suggested-fourball {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-md);
}

.suggested-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.fourball-members { display: flex; gap: 10px; margin-bottom: 18px; }

.fourball-member {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.member-avatar-wrap { position: relative; }
.member-avatar-wrap img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-soft); }
.fourball-member.you .member-avatar-wrap img { border-color: var(--gold); }

.member-you-tag {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--green-deep);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 0;
  white-space: nowrap;
}

.member-name { font-size: 10px; font-weight: 600; color: var(--text-primary); text-align: center; }
.member-hcp { font-size: 11px; font-weight: 700; color: var(--green-mid); }

/* Match scores row */
.match-scores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: var(--cream);
  border-radius: 0;
  padding: 12px;
  margin-bottom: 16px;
}

.match-score-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.score-label { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.score-val { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.score-val.gold { color: var(--gold); font-size: 14px; }

/* Available times */
.tee-time-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.available-time {
  flex: 1;
  background: rgba(15,33,24,0.06);
  border: 1px solid rgba(15,33,24,0.12);
  border-radius: 0;
  padding: 8px 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--green-mid);
  cursor: pointer;
}
.available-time:hover { background: rgba(15,33,24,0.1); }

/* Partner list */
.partner-list { display: flex; flex-direction: column; gap: 10px; }

.partner-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.1s;
}
.partner-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.partner-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-soft); }
.partner-info { flex: 1; }
.partner-name { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 5px; }
.partner-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { padding: 2px 8px; background: var(--cream); border-radius: 0; font-size: 10px; font-weight: 600; color: var(--text-muted); }

.partner-match { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.match-pct { font-size: 16px; font-weight: 700; color: var(--green-mid); }

.btn-invite {
  background: var(--green-deep);
  border: none;
  border-radius: 0;
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-invite:hover { background: var(--green-mid); }
.btn-invite.sent { background: var(--gold); color: var(--green-deep); }

/* ─── TEE TIMES ────────────────────────────────────────────── */
/* ── Tee Times tabs ───────────────────────────────────────── */
.tee-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  background: var(--cream);
  border-bottom: 1.5px solid var(--border-soft);
  flex-shrink: 0;
}
.tee-tab {
  flex: 1;
  padding: 10px 8px;
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  border-radius: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  touch-action: manipulation;
}
.tee-tab.active {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: var(--white);
}

/* ── Tee panel (wraps week nav + strip + grid) ──────────── */
.tee-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

/* ── Week navigation ─────────────────────────────────────── */
.tee-week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 6px;
  background: var(--cream);
  flex-shrink: 0;
}
.tee-week-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--green-deep);
  letter-spacing: 0.04em;
}
.tee-week-arrow {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  border-radius: 0;
  cursor: pointer;
  color: var(--green-deep);
}
.tee-week-arrow:disabled { opacity: 0.3; cursor: default; }

/* ── Date strip (now uses two-line pills) ─────────────────── */
/* ─── BOOKING CALENDAR ──────────────────────────────────── */
.booking-cal-wrap {
  flex-shrink: 0;
  padding: 12px 16px 8px;
  background: var(--white);
  border-bottom: 1.5px solid var(--border-soft);
}
.bc-header {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}
.bc-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-weight: 600; color: var(--green-deep);
}
.bc-nav {
  width: 28px; height: 28px; border: none; background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted); flex-shrink: 0;
  touch-action: manipulation;
}
.bc-nav:hover { color: var(--green-deep); }
.bc-nav-disabled { opacity: 0.25; pointer-events: none; }

.bc-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 36px);
  justify-content: center;
  margin-bottom: 2px;
}
.bc-weekdays span {
  text-align: center; font-size: 9px; font-weight: 700;
  color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase;
  padding-bottom: 4px;
}

/* Outer cell — fixed-width columns, centred in the wrapper */
.bc-grid {
  display: grid;
  grid-template-columns: repeat(7, 36px);
  justify-content: center;
  gap: 2px 0;
}
.bc-day  {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 42px; cursor: pointer; touch-action: manipulation;
}

/* Inner circle — fixed 30×30, gets the colour/ring */
.bc-day > span {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; color: var(--text-primary);
  transition: background 0.12s;
}

.bc-day:hover:not(.bc-disabled):not(.bc-other):not(.bc-selected) > span {
  background: rgba(15,33,24,0.08);
}

.bc-other    > span { color: #d0d0d0; }
.bc-other            { pointer-events: none; }
.bc-disabled > span  { color: #d0d0d0; }
.bc-disabled         { pointer-events: none; }

.bc-today > span {
  font-weight: 800; color: var(--green-deep);
}
.bc-selected > span {
  background: var(--green-deep);
  color: var(--white);
  font-weight: 700;
}
/* Today + selected */
.bc-today.bc-selected > span { background: var(--green-deep); color: var(--white); }

/* Availability dot — the <i> inside .bc-day */
.bc-day > i {
  display: block;
  width: 4px; height: 4px; border-radius: 50%;
  margin-top: 1px;
  background: transparent;
}
.bc-avail   > i { background: var(--green-light); }
.bc-unavail > i { background: #e05252; }
/* Keep dot visible on selected state */
.bc-selected.bc-avail   > i { background: rgba(255,255,255,0.7); }
.bc-selected.bc-unavail > i { background: rgba(255,100,100,0.8); }

/* ─── BOOKING SLOT LIST ─────────────────────────────────── */
.booking-slot-section {
  overflow-y: auto;
  flex: 1;
  padding: 0 0 24px;
  min-height: 120px;
}
.bsg-band-nav {
  display: flex;
  background: var(--cream);
  border-bottom: 1.5px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.bsg-nav-btn {
  flex: 1;
  padding: 10px 6px;
  border: none;
  border-right: 1px solid var(--border-soft);
  background: var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  touch-action: manipulation;
}
.bsg-nav-btn:last-child { border-right: none; }
/* Active = section is open */
.bsg-nav-btn:not(.bsg-nav-off) {
  background: var(--green-deep);
  color: var(--white);
}
.bsg-nav-btn.bsg-nav-off:hover {
  background: rgba(15,33,24,0.05);
  color: var(--green-deep);
}
.booking-slot {
  display: flex;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-soft);
  border-left: 3px solid transparent;
  background: var(--white);
  cursor: pointer;
  transition: background 0.1s;
}
.booking-slot.available { border-left-color: var(--green-light); }
.booking-slot.available:active { background: rgba(15,33,24,0.03); }
.booking-slot.mine      { border-left-color: var(--gold); background: rgba(184,149,42,0.03); }
.booking-slot.full      { border-left-color: var(--border-soft); opacity: 0.38; cursor: default; }

.bsg-left { display: flex; flex-direction: column; gap: 1px; }
.bsg-time   { font-size: 14px; font-weight: 700; color: var(--green-deep); line-height: 1; font-family: 'DM Sans', sans-serif; }
.bsg-sub    { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.bsg-status {
  margin-left: auto;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.booking-slot.available .bsg-status { color: var(--green-light); }
.booking-slot.mine      .bsg-status { color: var(--gold); }

.bsg-empty  { padding: 32px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
.bsg-loading{ padding: 20px; text-align: center; color: var(--text-muted); font-size: 13px; }
.bsg-error  { color: #c0392b; }

/* List of booking cards (My Bookings panel) */
.bk-card-list {
  overflow-y: auto; flex: 1; padding: 16px; display: flex;
  flex-direction: column; gap: 10px; min-height: 0;
}

/* Screen body variant for booking screens — flex column so calendar + slots stack */
.booking-screen-body {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  flex: 1;
  min-height: 0;
}

.tee-times-date-strip {
  display: flex;
  gap: 8px;
  padding: 10px 20px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  background: var(--cream);
  border-bottom: 1px solid var(--border-soft);
}
.tee-times-date-strip::-webkit-scrollbar { display: none; }

.tee-date-pill {
  flex-shrink: 0;
  padding: 6px 14px;
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  border-radius: 0;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 46px;
  position: relative;
}
.tee-pill-day { font-size: 10px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; }
.tee-pill-num { font-size: 15px; font-weight: 700; color: var(--green-deep); line-height: 1; }
.tee-pill-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); margin-top: 2px; }
.tee-date-pill.selected { background: var(--green-deep); border-color: var(--green-deep); }
.tee-date-pill.selected .tee-pill-day,
.tee-date-pill.selected .tee-pill-num { color: var(--white); }
.tee-date-pill.selected .tee-pill-dot { background: rgba(255,255,255,0.6); }

/* ── My Bookings cards ────────────────────────────────────── */
/* My Bookings list wrapper — gives breathing room around the cards */
#my-tee-bookings-list {
  padding: 16px;
  gap: 10px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.my-bk-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  flex-shrink: 0;
}
.my-bk-date-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  padding-right: 14px;
  border-right: 1px solid var(--border-soft);
}
.my-bk-day  { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.06em; }
.my-bk-num  { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; color: var(--green-deep); line-height: 1; }
.my-bk-mon  { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.my-bk-detail { flex: 1; }
.my-bk-time { font-size: 15px; font-weight: 700; color: var(--green-deep); margin-bottom: 2px; }
.my-bk-course { font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; }
.my-bk-group  { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.my-bk-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.my-bk-start {
  padding: 6px 12px;
  background: var(--green-deep);
  border: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  cursor: pointer;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.my-bk-start:hover { background: var(--green-mid); }
.my-bk-cancel {
  flex-shrink: 0;
  padding: 6px 12px;
  background: transparent;
  border: 1.5px solid var(--border-soft);
  font-size: 11px;
  font-weight: 600;
  color: #c0392b;
  cursor: pointer;
  border-color: rgba(192,57,43,0.3);
}
.my-bk-cancel:hover { background: rgba(192,57,43,0.06); }

/* ── Inline guest name input ─────────────────────────────── */
.bk-guest-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.bk-guest-confirm-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  background: var(--green-deep);
  color: var(--white);
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.input-error { border-color: #c0392b !important; }

/* ── Confirm button disabled state ──────────────────────── */
.bk-confirm-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--green-mid);
}

.tee-time-grid {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: none;
  background: var(--white);
}
.tee-time-grid::-webkit-scrollbar { display: none; }

/* ── Band tabs (Morning / Afternoon / Evening) ───────────── */
.tee-loading {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.tee-error { color: #c0392b; }

.tee-band-tabs {
  display: flex;
  background: var(--cream);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.tee-band-tab {
  flex: 1;
  padding: 10px 6px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.tee-band-tab.active {
  color: var(--green-deep);
  border-bottom-color: var(--green-deep);
}
.tee-band-tab-count {
  font-size: 10px;
  font-weight: 700;
  background: var(--border-soft);
  color: var(--text-muted);
  padding: 1px 5px;
  border-radius: 8px;
  min-width: 18px;
  text-align: center;
}
.tee-band-tab.active .tee-band-tab-count {
  background: rgba(15,33,24,0.1);
  color: var(--green-deep);
}

/* Borderless row — quiet, list-like */
.tee-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  background: var(--white);
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.045);
  transition: background 0.12s;
  flex-shrink: 0;
}
.tee-slot.available { cursor: pointer; }
.tee-slot.available:hover { background: rgba(15,33,24,0.03); }
.tee-slot.booked    { opacity: 0.38; pointer-events: none; }
.tee-slot.mine      { background: rgba(184,149,42,0.07); cursor: pointer; }
.tee-slot.mine:hover { background: rgba(184,149,42,0.12); }

/* Coloured status pip */
.slot-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #d0d0d0;
}
.tee-slot.available .slot-pip { background: var(--green-light); }
.tee-slot.mine      .slot-pip { background: var(--gold); }

.slot-time {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-deep);
  width: 44px;
  flex-shrink: 0;
  font-family: 'DM Sans', sans-serif;
}
.slot-status {
  font-size: 11px;
  color: var(--text-muted);
  flex: 1;
}
.tee-slot.mine .slot-status { color: var(--gold); font-weight: 600; }

.slot-avatars { display: flex; margin-left: auto; }
.slot-avatars img {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--white);
  margin-left: -5px;
  object-fit: cover;
}
.slot-avatars img:first-child { margin-left: 0; }

/* ─── PROFILE ──────────────────────────────────────────────── */
.profile-hero {
  background: linear-gradient(160deg, var(--green-deep) 0%, var(--green-mid) 100%);
  padding: 80px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
}

.profile-avatar-wrap { position: relative; margin-bottom: 14px; }
.profile-avatar { width: 88px; height: 88px; border-radius: 50%; border: 3px solid var(--gold); object-fit: cover; }
.profile-status-dot {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 14px; height: 14px;
  background: #6fcf97;
  border-radius: 50%;
  border: 2px solid var(--green-deep);
}

.profile-name { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 500; color: var(--white); margin-bottom: 4px; }
.profile-member-num { font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 14px; }

.profile-badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.profile-badge {
  background: rgba(184,149,42,0.15);
  border: 1px solid rgba(184,149,42,0.3);
  color: var(--gold-light);
  padding: 4px 12px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
}

.profile-body { padding-top: 20px; }

.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 28px; }

.stat-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: var(--shadow-sm);
}
.stat-num { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: var(--green-deep); line-height: 1; }
.stat-label { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); text-align: center; }

.style-summary { background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; margin-bottom: 28px; box-shadow: var(--shadow-sm); }
.style-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
.style-row:last-child { border-bottom: none; }
.style-key { font-size: 13px; color: var(--text-muted); }
.style-val { font-size: 13px; font-weight: 600; color: var(--text-primary); }

.rounds-list { background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.round-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
.round-row:last-child { border-bottom: none; }
.round-row-date { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.round-row-course { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.round-row-score { display: flex; align-items: center; gap: 6px; }
.score-num { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: var(--text-primary); }
.score-diff { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 0; }
.score-diff.under { background: rgba(111,207,151,0.15); color: #27ae60; }
.score-diff.even { background: rgba(184,149,42,0.15); color: var(--gold); }
.score-diff.over { background: rgba(192,57,43,0.1); color: var(--red); }

/* ─── TOAST ────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--green-deep);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  opacity: 0;
  transition: all 0.3s;
  white-space: nowrap;
  border: 1px solid rgba(184,149,42,0.3);
}
.toast svg { stroke: var(--gold); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.hidden { display: none; }

/* ─── MODAL ────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal-overlay.hidden { display: none; }

.modal-card {
  background: var(--white);
  border-radius: 0;
  padding: 28px 24px 40px;
  width: 100%;
  max-width: 430px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--cream);
  border: none;
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
}

/* ─── Modal form inputs — light background overrides ──────── */
/* .form-group defaults are styled for dark screens; modals use white cards */
.modal-card .form-group label {
  color: var(--text-muted);
}
.modal-card .form-group input {
  background: var(--cream);
  border: 1.5px solid var(--border-soft);
  color: var(--text-primary);
}
.modal-card .form-group input::placeholder { color: #b0b0b0; }
.modal-card .form-group input:focus { border-color: var(--green-light); }

/* ─── BOOKING MODAL ────────────────────────────────────────── */
.bk-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: var(--green-deep);
  margin-bottom: 4px;
}
.bk-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.bk-summary-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.bk-summary-chip {
  flex: 1;
  background: var(--cream);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bk-chip-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.bk-chip-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--green-deep);
}
.bk-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-soft);
}
.bk-count-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.bk-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bk-step-btn {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--border-soft);
  background: var(--white);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--green-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.bk-step-btn:disabled { opacity: 0.3; cursor: default; }
.bk-step-btn:not(:disabled):hover { background: var(--green-deep); color: var(--white); border-color: var(--green-deep); }
.bk-step-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--green-deep);
  min-width: 20px;
  text-align: center;
}
.bk-player-row {
  margin-bottom: 14px;
}
.bk-player-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.bk-search-wrap {
  position: relative;
}
.bk-search-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-soft);
  background: var(--white);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.bk-search-input:focus { border-color: var(--green-mid); }
.bk-results {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  z-index: 600;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.bk-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.bk-result-item:hover { background: var(--cream); }
.bk-result-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.bk-result-info { display: flex; flex-direction: column; }
.bk-result-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.bk-result-hcp  { font-size: 11px; color: var(--text-muted); }
.bk-results-loading,
.bk-results-empty { padding: 10px 14px; font-size: 13px; color: var(--text-muted); }
.bk-guest-btn {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bk-chosen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cream);
  padding: 10px 14px;
  border: 1.5px solid var(--border-soft);
}
.bk-chosen-name { font-size: 14px; font-weight: 600; color: var(--green-deep); }
.bk-chosen-clear {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0 0 0 8px;
}
.bk-confirm-btn { margin-top: 20px; }
.bk-group-box {
  background: var(--cream);
  padding: 14px;
  margin-bottom: 20px;
}
.bk-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.bk-guest-tag {
  font-size: 13px;
  color: var(--text-muted);
  padding: 2px 0;
}

/* guest name chips on tee slot cards */
.slot-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-left: auto; }
.slot-guest { font-size: 10px; color: var(--text-muted); }

/* ─── UTILITY ──────────────────────────────────────────────── */
.hidden { display: none !important; }
.mt-auto { margin-top: auto; }

/* ─── TEE TIMES SCREEN LAYOUT ──────────────────────────────── */
#screen-tee-times {
  display: none;
  flex-direction: column;
  /* Screen must be a fixed-height flex column so the grid scrolls inside it */
  overflow: hidden;
}
#screen-tee-times.active { display: flex; }

/* Mobile: normal scrollable list — let the panel + grid scroll */
#screen-tee-times .tee-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
#screen-tee-times .tee-time-grid {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ── FIND A GAME ──────────────────────────────────────────── */
#screen-find-game {
  display: none;
  flex-direction: column;
  overflow: hidden;
}
#screen-find-game.active { display: flex; }

/* "+" Post button in sub-header */
.fg-post-btn {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green-deep);
  background: transparent;
  border: 1.5px solid var(--green-deep);
  border-radius: 4px;
  padding: 5px 11px;
  cursor: pointer;
}
.fg-post-btn:active { opacity: 0.7; }

/* Tab bar */
.fg-tabs {
  display: flex;
  background: var(--cream);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.fg-tab {
  flex: 1;
  padding: 11px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s;
}
.fg-tab.active {
  color: var(--green-deep);
  border-bottom-color: var(--green-deep);
}

/* Panels */
.fg-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Panel explain block */
.fg-explain {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 20px;
  background: rgba(15,33,24,0.03);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.fg-explain-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-deep);
  margin-top: 1px;
}
.fg-explain-text { display: flex; flex-direction: column; gap: 3px; }
.fg-explain-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--green-deep);
  line-height: 1.3;
}
.fg-explain-body {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Browse panel */
#fg-panel-browse { overflow-y: auto; }

#fg-posts {
  flex: 1;
  padding: 0 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Get Matched panel */
#fg-panel-match { position: relative; }

.fg-form-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}

.fg-field { display: flex; flex-direction: column; gap: 8px; }

.fg-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fg-field-label span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--green-deep); }

/* Date pills */
.fg-date-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.fg-date-strip::-webkit-scrollbar { display: none; }

.fg-date-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  min-width: 52px;
  border-radius: 8px;
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.12s, background 0.12s;
}
.fg-date-pill.selected {
  background: var(--green-deep);
  border-color: var(--green-deep);
}
.fg-date-day {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fg-date-pill.selected .fg-date-day { color: rgba(255,255,255,0.7); }
.fg-date-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: var(--green-deep);
}
.fg-date-pill.selected .fg-date-num { color: #fff; }

/* Option pills */
.fg-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fg-pill {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 20px;
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  color: var(--green-deep);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.fg-pill.selected {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: #fff;
}

/* Handicap range slider */
.fg-hcp-slider {
  width: 100%;
  accent-color: var(--green-deep);
}

/* Results section */
.fg-results {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.fg-results.hidden { display: none; }

.fg-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.fg-results-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--green-deep);
}
.fg-new-search-btn {
  font-size: 12px;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.fg-new-search-btn:hover { color: var(--green-deep); }

.fg-results-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fg-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 13px;
}
.fg-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* ── PLAYER BOARD ─────────────────────────────────────────── */
.board-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 12px;
}
.board-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--green-deep);
}
.board-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.btn-post-slot {
  background: var(--green-deep);
  color: var(--gold);
  border: none;
  border-radius: 0;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-post-slot:hover { background: var(--green-mid); }

#board-posts {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.board-loading, .board-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.board-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft);
}
.board-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.board-author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.board-author-info { flex: 1; min-width: 0; }
.board-author-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.board-author-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.board-remove-btn {
  background: none;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 16px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.board-remove-btn:hover { color: var(--red); border-color: var(--red); }

.board-card-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.board-detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--cream);
  border-radius: 0;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-primary);
  font-weight: 500;
}
.board-spots-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(184,149,42,0.12);
  border-radius: 0;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--gold);
  font-weight: 600;
  border: 1px solid rgba(184,149,42,0.3);
}

.board-message {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--cream);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--gold);
}

.board-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.board-interest-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.board-int-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white);
  margin-left: -6px;
}
.board-int-avatar:first-child { margin-left: 0; }
.board-int-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 6px;
}
.board-interest-btn {
  background: var(--green-deep);
  color: var(--white);
  border: none;
  border-radius: 0;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.board-interest-btn:hover { background: var(--green-mid); }
.board-interest-btn.active {
  background: var(--gold);
  color: var(--green-deep);
}
.board-own-label {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* New Post Modal */
.post-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  padding: 0;
}
.post-modal-overlay.hidden { display: none; }
.post-modal-box {
  background: var(--white);
  border-radius: var(--radius) var(--radius) 0 0;
  width: 100%;
  padding: 24px 20px 36px;
  max-height: 85vh;
  overflow-y: auto;
}
.post-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.post-modal-header h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--green-deep);
}
.post-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}
.post-form-row {
  margin-bottom: 16px;
}
.post-form-row.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.post-form-row label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.post-form-optional { font-weight: 400; text-transform: none; letter-spacing: 0; }
.post-form-row input,
.post-form-row select,
.post-form-row textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--cream);
  font-family: inherit;
  outline: none;
}
.post-form-row input:focus,
.post-form-row select:focus,
.post-form-row textarea:focus { border-color: var(--gold); }
.post-form-row textarea { resize: none; }

.post-modal-footer {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.btn-cancel-post {
  flex: 1;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
}
.btn-submit-post {
  flex: 2;
  padding: 14px;
  background: var(--green-deep);
  color: var(--gold);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-submit-post:disabled { opacity: 0.6; }

/* ─── PWA INSTALL BANNER ──────────────────────────────────── */
.install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: var(--green-deep);
  border-top: 1px solid rgba(184,149,42,0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 24px rgba(0,0,0,0.25);
  animation: slide-up 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}
.install-banner.hidden { display: none; }

@keyframes slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.install-banner-icon { flex-shrink: 0; }

.install-banner-text { flex: 1; min-width: 0; }
.install-banner-title {
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.install-banner-sub {
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  margin-top: 2px;
}

.install-banner-btn {
  flex-shrink: 0;
  background: var(--gold);
  color: var(--green-deep);
  border: none;
  border-radius: 0;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  font-family: 'DM Sans', sans-serif;
}
.install-banner-btn:active { opacity: 0.85; }

.install-banner-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
}

/* ─── iOS INSTALL TIP ────────────────────────────────────── */
.ios-install-tip {
  position: fixed;
  bottom: 80px;
  left: 16px;
  right: 16px;
  z-index: 2000;
  animation: fade-scale-in 0.3s ease both;
}
.ios-install-tip.hidden { display: none; }

@keyframes fade-scale-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.ios-tip-inner {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(184,149,42,0.2);
}
.ios-tip-share { flex-shrink: 0; }
.ios-tip-inner > p {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.45;
}
.ios-tip-inner > p strong { color: var(--green-deep); }
.ios-tip-close {
  flex-shrink: 0;
  background: var(--green-deep);
  color: var(--white);
  border: none;
  border-radius: 0;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}

/* ─── PWA SAFE AREA PADDING ──────────────────────────────── */
/* When running as installed app, pad the bottom nav */
@media (display-mode: standalone) {
  .bottom-nav {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px);
  }
  /* Hide browser address bar space — already handled by standalone */
}

/* ─── CAPACITOR NATIVE OVERRIDES ────────────────────────── */
/* Applied when running inside iOS/Android via Capacitor     */

html.is-native body {
  overscroll-behavior: none;
}

/* Push all top bars below the Dynamic Island / notch */
html.is-native .app-nav,
html.is-native .sub-header {
  padding-top: calc(env(safe-area-inset-top, 44px) + 10px);
}

/* Auth screen hero also needs to clear the notch */
html.is-native .auth-bg {
  padding-top: calc(env(safe-area-inset-top, 44px) + 40px);
}

html.is-native .bottom-nav {
  padding-bottom: max(env(safe-area-inset-bottom, 16px), 16px);
}

/* Hide scrollbars inside native — feels more app-like */
html.is-native ::-webkit-scrollbar { display: none; }
html.is-native * { -webkit-tap-highlight-color: transparent; }

/* iOS: remove input zoom on focus (inputs < 16px trigger zoom) */
html.platform-ios input,
html.platform-ios select,
html.platform-ios textarea {
  font-size: max(16px, 1em);
}

/* ─── SCORECARD SCREEN ───────────────────────────────────────── */
.scorecard-header-card {
  background: var(--green-deep);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 4px;
}
.sc-stat-row {
  display: flex;
  justify-content: space-around;
  gap: 12px;
}
.sc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sc-stat-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}
.sc-stat-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.rounds-history-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.round-history-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: none;
  border-bottom: 1px solid var(--border-soft);
  padding: 14px 16px;
  gap: 0;
}
.round-history-card:last-child { border-bottom: none; }
.round-history-card:nth-child(odd) { background: rgba(15,33,24,0.025); }
.rhc-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rhc-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.rhc-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 5px;
}
.rhc-course {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}
.rhc-right  { display: flex; align-items: center; gap: 16px; }
.rhc-score  {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--green-deep);
  line-height: 1;
  display: block;
  text-align: center;
}
.rhc-label { font-size: 10px; color: var(--text-muted); text-align: center; display: block; }
.loading-placeholder {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

/* ─── LEADERBOARD SCREEN ─────────────────────────────────────── */
.lb-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.lb-tab {
  flex: 1;
  padding: 8px 4px;
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.lb-tab.active {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: var(--gold);
}
.leaderboard-list { display: flex; flex-direction: column; gap: 8px; }
.lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.lb-row.lb-mine {
  background: rgba(184,149,42,0.07);
  border-color: rgba(184,149,42,0.3);
}
.lb-rank {
  font-size: 16px;
  min-width: 28px;
  text-align: center;
  font-weight: 700;
  color: var(--text-muted);
}
.lb-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--border-soft);
  flex-shrink: 0;
}
.lb-info { flex: 1; min-width: 0; }
.lb-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.lb-stats { text-align: right; }
.lb-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--green-deep);
  line-height: 1;
}
.lb-val small { font-size: 11px; font-family: 'DM Sans', sans-serif; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   SCORECARD — PANEL SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* Panels live directly inside #screen-scorecard after the sub-header.
   Only one panel is visible at a time (toggled by JS). */
.sc-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  gap: 0;
}
.sc-panel.active { display: flex; }

/* The live scorer panel has its own dark background + no scroll */
.sc-scorer-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: var(--green-deep);
  color: var(--white);
}
.sc-scorer-panel.active { display: flex; }

/* ─── Resume Banner ─── */
.sc-resume-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(184,149,42,0.12);
  border: 1px solid rgba(184,149,42,0.3);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.sc-resume-info { display: flex; flex-direction: column; gap: 2px; }
.sc-resume-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.sc-resume-course { font-size: 13px; font-weight: 600; color: var(--green-deep); }
.sc-resume-btn {
  font-size: 12px; font-weight: 700; color: var(--green-deep);
  background: var(--gold); border: none; border-radius: 0;
  padding: 6px 14px; cursor: pointer;
}

/* ─── Entry Action Buttons ─── */
.sc-entry-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.sc-entry-row { display: flex; gap: 10px; }
.sc-entry-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: all 0.18s;
  text-align: left;
  width: 100%;
}
.sc-entry-btn:active { transform: scale(0.98); }
.sc-entry-btn.featured {
  background: var(--green-deep);
  border-color: var(--green-deep);
  padding: 18px 16px;
}
.sc-entry-btn.half { flex: 1; padding: 14px 12px; }
.sc-entry-icon {
  width: 40px; height: 40px;
  background: var(--gold-dim);
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); flex-shrink: 0;
}
.sc-entry-btn.featured .sc-entry-icon {
  background: rgba(184,149,42,0.2);
}
.sc-entry-btn.half .sc-entry-icon { width: 34px; height: 34px; border-radius: 0; }
.sc-entry-label {
  font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px;
}
.sc-entry-btn.featured .sc-entry-label { color: var(--white); }
.sc-entry-sub {
  font-size: 11px; color: var(--text-muted);
}
.sc-entry-btn.featured .sc-entry-sub { color: rgba(255,255,255,0.55); }
.sc-entry-btn.half .sc-entry-label { font-size: 12px; }
.sc-entry-btn.half .sc-entry-sub  { font-size: 10px; }

/* ─── Form Shared ─── */
/* ── Scorecard booking picker ─── */
.sc-bookings-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.sc-bookings-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 4px;
}
.sc-booking-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color 0.12s, background 0.12s;
}
.sc-booking-chip:hover { border-color: var(--green-light); background: rgba(15,33,24,0.02); }
.sc-booking-chip.selected {
  border-color: var(--green-deep);
  background: rgba(15,33,24,0.04);
}
.sc-chip-icon { flex-shrink: 0; color: var(--text-muted); }
.sc-chip-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sc-chip-time {
  font-size: 13px;
  font-weight: 600;
  color: var(--green-deep);
  line-height: 1.3;
}
.sc-chip-course {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}
.sc-chip-partners {
  color: var(--text-muted);
}
.sc-chip-check {
  flex-shrink: 0;
  color: var(--green-deep);
  opacity: 0;
  transition: opacity 0.12s;
}
.sc-booking-chip.selected .sc-chip-check { opacity: 1; }
.sc-booking-chip.selected .sc-chip-time  { color: var(--green-deep); }
.sc-booking-chip.selected .sc-chip-icon  { color: var(--green-deep); }
.sc-bookings-or {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  margin: 16px 0 14px;
  letter-spacing: 0.04em;
}

.sc-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.sc-form-row { display: flex; flex-direction: column; gap: 5px; }
.sc-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
.sc-optional { font-weight: 400; text-transform: none; letter-spacing: 0; }
.sc-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px; /* ≥16px prevents iOS Safari auto-zoom on focus */
  color: var(--text-primary);
  -webkit-appearance: none;
}
.sc-input:focus { outline: none; border-color: var(--green-light); }
.sc-textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px; /* ≥16px prevents iOS Safari auto-zoom on focus */
  color: var(--text-primary);
  resize: none;
}
.sc-textarea:focus { outline: none; border-color: var(--green-light); }

/* ─── Round History Card (updated with hole-expand) ─── */
.rhc-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #c0392b;
  font-size: 18px;
  padding: 2px 4px;
  line-height: 1;
  opacity: 0.6;
}
.rhc-delete-btn:hover { opacity: 1; }

.rhc-expandable { cursor: pointer; }
.rhc-expandable:hover { background: rgba(15,33,24,0.02); }

.rhc-expand-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 4px;
  transition: transform 0.2s;
}
.rhc-expand-btn.open { transform: rotate(180deg); }
.rhc-holes-grid {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.rhc-holes-grid.open { max-height: 500px; overflow-x: auto; }
.rhc-holes-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: 13px;
}

/* All cells */
.rhc-holes-table td {
  text-align: center;
  padding: 9px 4px;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  min-width: 32px;
  white-space: nowrap;
}
.rhc-holes-table td:last-child  { border-right: none; }
.rhc-holes-table tr:last-child td { border-bottom: none; }

/* First column — row labels (HOLE / Par / Score) */
.rhc-holes-table td:first-child {
  text-align: left;
  padding-left: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 46px;
  background: rgba(15,33,24,0.03);
  border-right: 1.5px solid var(--border-soft);
}

/* Hole number header row */
.rhc-holes-table .rhc-row-hole td {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  background: rgba(15,33,24,0.04);
  border-bottom: 2px solid var(--border-soft);
}
.rhc-holes-table .rhc-row-hole td:first-child {
  background: rgba(15,33,24,0.06);
}

/* Divider before back 9 — must repeat background to win specificity */
.rhc-holes-table .rhc-row-score + .rhc-row-hole td {
  border-top: 2px solid var(--border-soft);
  background: rgba(15,33,24,0.04);
}
.rhc-holes-table .rhc-row-score + .rhc-row-hole td:first-child {
  background: rgba(15,33,24,0.06);
}

/* Par row */
.rhc-holes-table .rhc-row-par td {
  color: var(--text-muted);
  font-size: 12px;
}

/* Score row */
.rhc-holes-table .rhc-row-score td {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.rhc-holes-table .rhc-row-score td:first-child {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
}

/* Out/In total column */
.rhc-holes-table .rhc-h-out,
.rhc-holes-table .rhc-h-in {
  font-weight: 700;
  color: var(--green-deep);
  border-left: 2px solid var(--border-soft);
  font-size: 13px;
}

/* Score colour coding */
.rhc-cell-eagle  { color: #B8952A; font-weight: 700; }
.rhc-cell-birdie { color: #2e7d4f; font-weight: 700; }
.rhc-cell-par    { color: var(--text-primary); }
.rhc-cell-bogey  { color: #c0392b; }
.rhc-cell-double { color: #c0392b; font-weight: 700; }
.rhc-cell-worse  { color: #c0392b; font-weight: 700; opacity: 0.8; }

/* ─── Live Scorer: Round Bar ─── */
.sc-round-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.sc-bar-course { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); }
.sc-bar-right { display: flex; align-items: center; gap: 10px; }
.sc-bar-thru { font-size: 11px; color: rgba(255,255,255,0.45); }
.sc-bar-vspar {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 600; color: var(--gold);
}

/* ─── Live Scorer: Hole Display ─── */
.sc-hole-main {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  flex: 1; padding: 20px;
  gap: 8px;
}
.sc-hole-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 8px;
}
.sc-hole-badge {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,0.1);
  border-radius: 0; padding: 8px 18px;
}
.sc-hole-badge-lbl {
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.sc-hole-badge-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px; font-weight: 700; color: var(--white);
  line-height: 1;
}
.sc-hole-tags { display: flex; flex-direction: column; gap: 6px; }
.sc-par-tag {
  background: var(--gold); color: var(--green-deep);
  font-size: 11px; font-weight: 700; padding: 4px 12px;
  border-radius: 0;
}
.sc-si-tag {
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6);
  font-size: 11px; font-weight: 600; padding: 4px 12px;
  border-radius: 0; text-align: center;
}

/* ─── Live Scorer: Score Entry ─── */
.sc-scorer-row {
  display: flex; align-items: center; gap: 20px;
  margin: 8px 0;
}
.sc-adj {
  width: 60px; height: 60px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: var(--white);
  font-size: 32px; font-weight: 300; line-height: 1;
  cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.sc-adj:active { background: rgba(255,255,255,0.2); transform: scale(0.92); }
.sc-score-display {
  display: flex; flex-direction: column; align-items: center;
  min-width: 100px; cursor: pointer;
}
.sc-score-big {
  font-family: 'Cormorant Garamond', serif;
  font-size: 86px; font-weight: 700; color: var(--white);
  line-height: 1;
  transition: opacity 0.1s;
}
.sc-score-badge {
  font-size: 12px; font-weight: 700; padding: 3px 12px;
  border-radius: 0; margin-top: 4px; min-height: 22px;
}
.sc-score-badge.eagle  { background: #B8952A; color: #0F2118; }
.sc-score-badge.birdie { background: #B8952A; color: #0F2118; }
.sc-score-badge.par    { background: rgba(245,240,232,0.18); color: rgba(245,240,232,0.8); }
.sc-score-badge.bogey  { background: #1C3A2A; color: var(--white); }
.sc-score-badge.double { background: var(--red); color: var(--white); }
.sc-score-badge.worse  { background: #8e1a1a; color: var(--white); }
.sc-hidden-input {
  /* Positioned off-screen so iOS won't scroll to it on focus.
     font-size ≥16px is CRITICAL — any smaller triggers iOS auto-zoom. */
  position: fixed;
  top: -9999px; left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  font-size: 16px;
  -webkit-appearance: none;
}
.sc-tap-hint {
  font-size: 11px; color: rgba(255,255,255,0.3);
  margin-top: 4px;
}

/* ─── Live Scorer: Running Totals ─── */
.sc-totals-bar {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.07);
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 10px 0; flex-shrink: 0;
}
.sc-total-cell {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 3px;
}
.sc-total-cell.main .sc-total-num { color: var(--gold); font-size: 22px; }
.sc-total-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 600; color: rgba(255,255,255,0.8);
  line-height: 1;
}
.sc-total-lbl {
  font-size: 9px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
}
.sc-total-sep {
  width: 1px; height: 28px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

/* ─── Live Scorer: Hole Dots ─── */
.sc-dots-wrap {
  display: flex; justify-content: center;
  padding: 10px 16px; flex-shrink: 0;
}
.sc-dots {
  display: flex; gap: 5px; flex-wrap: wrap; justify-content: center;
}
.sc-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: all 0.2s;
  cursor: pointer;
}
.sc-dot.scored { background: var(--gold); }
.sc-dot.current { background: var(--white); box-shadow: 0 0 0 3px rgba(184,149,42,0.4); }

/* ─── Live Scorer: Navigation ─── */
.sc-nav-row {
  display: flex; gap: 10px;
  padding: 0 16px; flex-shrink: 0;
}
.sc-nav-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.7);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.sc-nav-btn:active { background: rgba(255,255,255,0.15); }
.sc-nav-btn.next { color: var(--gold); border-color: rgba(184,149,42,0.3); }
.sc-nav-btn:disabled { opacity: 0.3; pointer-events: none; }

.sc-complete-row {
  display: flex; gap: 10px; padding: 12px 16px;
  flex-shrink: 0;
}
.sc-save-exit-btn {
  flex: 0 0 auto; padding: 12px 16px;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.6);
  font-size: 12px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sc-complete-btn { flex: 1; margin: 0 !important; }

/* ─── Scorecard Grid (manual + scan) ─── */
.sc-grid-section {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 4px;
}
.sc-grid-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
.sc-grid-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--white);
}
.sc-grid {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
}
.sc-grid td, .sc-grid th {
  min-width: 34px; width: 34px;
  text-align: center;
  padding: 7px 4px;
  border-right: 1px solid var(--border-soft);
  font-size: 12px;
}
.sc-grid td:last-child, .sc-grid th:last-child { border-right: none; }
.sc-grid .sc-grid-lbl {
  min-width: 42px; width: 42px;
  text-align: left; padding-left: 10px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted);
  background: var(--cream);
  position: sticky; left: 0; z-index: 1;
  border-right: 1.5px solid var(--border-soft);
}
.sc-grid .sc-grid-out,
.sc-grid .sc-grid-in {
  min-width: 38px; font-weight: 700;
  background: var(--cream); color: var(--green-deep);
  border-left: 1.5px solid var(--border-soft);
}
.sc-grid .sc-grid-total {
  min-width: 42px; font-weight: 700;
  background: var(--green-deep); color: var(--gold);
  border-left: 1.5px solid var(--border-soft);
}
.sc-grid tr:first-child td {
  font-weight: 700; color: var(--text-muted);
  background: var(--cream); font-size: 11px;
  border-bottom: 1.5px solid var(--border-soft);
}
.sc-grid tr:nth-child(2) td { color: var(--green-deep); border-bottom: 1px solid var(--border-soft); }
.sc-grid-input {
  width: 28px; height: 30px;
  border: none; background: transparent;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-weight: 600; color: var(--text-primary);
  -moz-appearance: textfield;
  cursor: pointer;
}
.sc-grid-input::-webkit-outer-spin-button,
.sc-grid-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.sc-grid-input:focus { outline: none; background: rgba(184,149,42,0.1); border-radius: 0; }
.sc-grid tr.sc-score-row { background: var(--white); }
.sc-grid tr.sc-score-row td { padding: 0; }

.sc-total-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--green-deep); border-radius: var(--radius-sm);
  margin: 8px 0;
}
.sc-tf-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.sc-tf-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 600; color: var(--gold);
  line-height: 1;
}

/* ─── Scan UI ─── */
.sc-capture-hero {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 32px 8px 24px;
}
.sc-capture-icon-wrap {
  width: 96px; height: 96px;
  background: var(--gold-dim);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); margin-bottom: 18px;
}
.sc-capture-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 600; color: var(--green-deep);
  margin-bottom: 8px;
}
.sc-capture-hint {
  font-size: 13px; color: var(--text-muted);
  max-width: 300px; line-height: 1.5;
}
.sc-capture-btns {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; margin-bottom: 20px;
}
.sc-cam-label, .sc-file-label {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; cursor: pointer;
}
.sc-scan-tips {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  background: var(--cream-dark);
  border-radius: var(--radius-sm);
  width: 100%;
}
.sc-tip { font-size: 12px; color: var(--text-muted); }

.sc-preview-wrap {
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border-soft);
  margin-bottom: 12px;
}
.sc-preview-img {
  width: 100%; display: block;
  max-height: 280px; object-fit: contain;
  background: #000;
}
.sc-ocr-progress {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--cream-dark); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-muted);
  margin-bottom: 12px;
}
.sc-ocr-spinner {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid var(--border-soft);
  border-top-color: var(--green-light);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.sc-retake-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.sc-scan-alert {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(184,149,42,0.1);
  border: 1px solid rgba(184,149,42,0.25);
  border-radius: var(--radius-sm);
  font-size: 12px; color: var(--green-deep);
  margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   iOS ANTI-ZOOM — Global rules
   Safari zooms in whenever an input/select/textarea with font-size
   < 16px is focused, and does NOT zoom back out on blur.
   Setting everything to ≥16px is the only reliable fix.
   ═══════════════════════════════════════════════════════════════ */

/* All native form controls: ≥16px prevents auto-zoom on iOS */
input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
select,
textarea {
  font-size: 16px;
}

/* touch-action: manipulation removes the 300ms tap delay AND
   prevents double-tap-to-zoom on all interactive elements.    */
button,
a,
label[for],
.btn-primary,
.btn-outline,
.btn-text,
.sc-adj,
.sc-nav-btn,
.sc-score-display,
.sc-entry-btn,
.tee-slot,
.bottom-nav-item,
.back-btn,
.lb-tab,
.tee-date-pill,
.board-interest-btn,
.btn-biometric,
.setting-row {
  touch-action: manipulation;
}

/* ── Biometric Login Button ──────────────────────────────── */
.btn-biometric {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 0;
  margin-top: 10px;
  border: 1.5px solid var(--gold);
  background: transparent;
  color: var(--gold);
  border-radius: 0;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-biometric:active { opacity: 0.6; }

/* ── Profile Security Settings ───────────────────────────── */
.settings-section { margin-top: 24px; }

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  cursor: pointer;
}
.setting-row-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text-primary);
}
.setting-row-label svg { color: var(--gold); flex-shrink: 0; }

.setting-toggle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 11px;
  border-radius: 0;
}
.setting-toggle.on {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
}
.setting-toggle.off {
  background: rgba(255,255,255,0.08);
  color: var(--text-secondary);
}

/* ── Danger Zone ──────────────────────────────────────────── */
.danger-zone { margin-top: 32px; padding-top: 16px; border-top: 1px solid rgba(231,76,60,0.2); }
.btn-danger {
  width: 100%;
  padding: 12px 0;
  background: transparent;
  color: var(--red);
  border: 1.5px solid var(--red);
  border-radius: 0;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.btn-danger:active { background: rgba(231,76,60,0.08); }

/* ── New Member Journey ───────────────────────────────────── */
.journey-section {
  background: linear-gradient(135deg, rgba(184,149,42,0.12) 0%, rgba(184,149,42,0.04) 100%);
  border: 1px solid rgba(184,149,42,0.25);
  border-radius: 0;
  padding: 16px;
  margin-bottom: 20px;
}
.journey-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.journey-title { font-size: 15px; font-weight: 700; color: var(--gold); margin: 0 0 2px; }
.journey-subtitle { font-size: 12px; color: var(--text-secondary); margin: 0; }
.journey-dismiss {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  padding: 2px; touch-action: manipulation;
}
.journey-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.journey-step {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 0;
  background: rgba(255,255,255,0.04); cursor: pointer;
  touch-action: manipulation; border: none; width: 100%; text-align: left;
}
.journey-step.current { background: rgba(184,149,42,0.12); border: 1px solid rgba(184,149,42,0.3); }
.journey-step.done    { opacity: 0.55; }
.journey-step.locked  { opacity: 0.35; cursor: default; }
.journey-step-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); flex-shrink: 0; font-size: 14px;
}
.journey-step.current .journey-step-icon { background: var(--gold); color: var(--green-deep); }
.journey-step.done    .journey-step-icon { background: rgba(46,204,113,0.2); color: #2ecc71; }
.journey-step-text { flex: 1; }
.journey-step-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 0 0 1px; }
.journey-step-desc  { font-size: 11px; color: var(--text-secondary); margin: 0; }
.journey-progress-bar {
  height: 4px; background: rgba(255,255,255,0.08); border-radius: 0; overflow: hidden;
}
.journey-progress-fill {
  height: 100%; background: var(--gold); border-radius: 0;
  transition: width 0.4s ease;
}

/* ── Playing Group Prompt ─────────────────────────────────── */
.group-prompt {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0; padding: 12px 14px;
  margin-bottom: 20px;
}
.group-prompt-icon { color: var(--gold); flex-shrink: 0; }
.group-prompt-body { flex: 1; min-width: 0; }
.group-prompt-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin: 0 0 2px; }
.group-prompt-sub   { font-size: 11px; color: var(--text-secondary); margin: 0; }
.group-prompt-btn {
  flex-shrink: 0; padding: 7px 12px; border-radius: 0;
  background: var(--gold); color: var(--green-deep);
  border: none; font-size: 12px; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
}
.group-prompt-dismiss {
  background: none; border: none; color: var(--text-secondary);
  cursor: pointer; padding: 4px; touch-action: manipulation; flex-shrink: 0;
}

/* ── Competitions Screen ──────────────────────────────────── */
/* ─── COMPETITIONS ──────────────────────────────────────────── */
.comp-tabs {
  display: flex; gap: 0; margin-bottom: 20px;
  border: 1.5px solid var(--border-soft); overflow: hidden;
}
.comp-tab {
  flex: 1; padding: 9px 0; border: none; background: var(--white);
  color: var(--text-muted); font-size: 13px; font-weight: 600;
  cursor: pointer; touch-action: manipulation; transition: all 0.15s;
}
.comp-tab + .comp-tab { border-left: 1.5px solid var(--border-soft); }
.comp-tab.active { background: var(--green-deep); color: var(--white); }
.comp-list { display: flex; flex-direction: column; gap: 0; border: 1.5px solid var(--border-soft); overflow: hidden; }
.comp-list:empty { border: none; }
.comp-loading { display: flex; justify-content: center; padding: 40px 0; }
.comp-empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-size: 14px; }

.comp-card {
  background: var(--white);
  border-bottom: 1px solid var(--border-soft);
  padding: 16px;
}
.comp-card:last-child { border-bottom: none; }
.comp-card-entered { background: rgba(15,33,24,0.025); }
.comp-card-closed  { background: var(--cream); }

/* Card inner layout — date column + info */
.comp-card-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.comp-date-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--green-deep);
  padding: 8px 10px;
  min-width: 44px;
  flex-shrink: 0;
}
.comp-date-day { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold); text-transform: uppercase; }
.comp-date-num { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; color: var(--white); line-height: 1; }
.comp-date-mon { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); text-transform: uppercase; }

.comp-card-info { flex: 1; min-width: 0; }
.comp-card-top  { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.comp-card-name { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0; line-height: 1.3; }
.comp-description { font-size: 13px; color: var(--text-muted); margin: 2px 0 5px; line-height: 1.4; }
.comp-course-meta { font-size: 12px; color: var(--text-muted); margin: 3px 0 0; }
.comp-course-meta strong { color: var(--text-primary); }

.comp-format-badge {
  font-size: 10px; font-weight: 700; padding: 3px 8px; flex-shrink: 0;
  background: rgba(184,149,42,0.12); color: var(--gold); white-space: nowrap;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.comp-entered-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  font-size: 11px; color: var(--green-light); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Action row — all buttons are fully self-contained, no base-class inheritance */
.comp-card-actions { display: flex; gap: 8px; align-items: stretch; }

.comp-action-btn,
.comp-action-start,
.comp-action-enter {
  flex: 1;
  height: 38px;
  padding: 0 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  border-radius: 0;
  box-sizing: border-box;
  touch-action: manipulation;
}

.comp-action-btn {
  background: transparent;
  border: 1.5px solid var(--border-soft);
  color: var(--text-muted);
}
.comp-action-btn:hover { border-color: var(--green-light); color: var(--green-deep); }

.comp-action-start {
  background: var(--green-deep);
  border: 1.5px solid var(--green-deep);
  color: var(--white);
  font-weight: 700;
}
.comp-action-start:hover { background: var(--green-mid); border-color: var(--green-mid); }

.comp-action-enter {
  background: var(--gold);
  border: 1.5px solid var(--gold);
  color: var(--green-deep);
  font-weight: 700;
}
.comp-action-enter:hover { background: var(--gold-light); border-color: var(--gold-light); }

/* Result row for closed comps */
.comp-result-row {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px;
}
.comp-result-score { display: flex; align-items: baseline; gap: 5px; }
.comp-result-num   { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 600; color: var(--text-primary); line-height: 1; }
.comp-result-diff  { font-size: 13px; font-weight: 700; }
.comp-result-diff.under { color: #2ecc71; }
.comp-result-diff.even  { color: var(--gold); }
.comp-result-diff.over  { color: #e74c3c; }
.comp-result-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding-left: 2px; }

.comp-leaderboard { margin-top: 12px; }
.comp-lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.comp-lb-pos { width: 24px; font-size: 13px; font-weight: 700; color: var(--gold); text-align: center; }
.comp-lb-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.comp-lb-score { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.comp-lb-hcp { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }

/* Score entry modal form */
.comp-score-form input {
  width: 100%; font-size: 32px; font-weight: 700; text-align: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 0; color: var(--text-primary); padding: 12px;
  margin-bottom: 16px;
}

/* ── Membership Card Screen ───────────────────────────────── */
/* ─── MEMBER CARD POPUP MODAL ──────────────────────────────── */
.mcp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mcp-popup {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 320px;
}

.mcp-close-btn {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cream);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-deep);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 1;
  flex-shrink: 0;
}
.mcp-close-btn:hover { background: #e8e0d0; }

.mcp-card {
  width: 100%;
  background: linear-gradient(145deg, #0c1f14 0%, #163324 50%, #0c1f14 100%);
  border: 1px solid rgba(184,149,42,0.4);
  border-radius: 16px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.mcp-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 18px;
}

.mcp-club-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.05em;
  flex: 1;
}

.mcp-tier-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(184,149,42,0.5);
  padding: 3px 8px;
}

.mcp-identity {
  width: 100%;
  margin-bottom: 16px;
}

.mcp-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin-bottom: 4px;
}

.mcp-number {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}

.mcp-divider {
  width: 100%;
  height: 1px;
  background: rgba(184,149,42,0.2);
  margin-bottom: 18px;
}

.mcp-qr-wrap {
  width: 160px;
  height: 160px;
  background: #f5f0e8;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  overflow: hidden;
}

.mcp-qr-wrap canvas {
  display: block;
  width: 140px !important;
  height: 140px !important;
}

.mcp-scan-label {
  width: 100%;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}

.card-screen-body {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 16px 32px; overflow-y: auto;
}
.card-scene {
  width: 100%; max-width: 340px;
  perspective: 800px; cursor: pointer; margin-bottom: 12px;
}
.card-wrap {
  width: 100%; aspect-ratio: 1.586;
  position: relative; transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.card-wrap.flipped { transform: rotateY(180deg); }
.card-face {
  position: absolute; inset: 0; border-radius: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.card-front {
  background: linear-gradient(135deg, #081810 0%, #132B1D 60%, #1C3A2A 100%);
  border: 1px solid rgba(184,149,42,0.4);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 18px 20px;
}
.card-back {
  background: #F5F0E8;
  transform: rotateY(180deg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; padding: 16px;
}
.card-top-row {
  display: flex; align-items: center; gap: 8px;
}
.card-club-name { color: var(--gold); font-size: 16px; font-weight: 700; letter-spacing: 0.04em; flex: 1; }
.card-tier-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 0;
  background: rgba(184,149,42,0.2); color: var(--gold); text-transform: uppercase;
}
.card-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.card-name { font-size: 19px; font-weight: 700; color: #fff; margin: 0 0 4px; letter-spacing: 0.02em; }
.card-num  { font-size: 13px; color: rgba(184,149,42,0.8); margin: 0; letter-spacing: 0.08em; font-family: monospace; }
.card-bottom-row {
  display: flex; align-items: flex-end; justify-content: space-between;
}
.card-label { font-size: 10px; color: rgba(255,255,255,0.5); margin: 0 0 2px; letter-spacing: 0.06em; text-transform: uppercase; }
.card-hcp { font-size: 22px; font-weight: 700; color: var(--gold); margin: 0; }
.card-flip-hint { display: flex; align-items: center; gap: 4px; color: rgba(255,255,255,0.35); font-size: 10px; }
.card-qr-label { font-size: 12px; color: #4a4a4a; font-weight: 600; margin: 0; }
.card-qr-wrap {
  width: 140px; height: 140px;
  display: flex; align-items: center; justify-content: center;
}
.card-qr-wrap canvas { width: 140px !important; height: 140px !important; }
.card-num-back { font-size: 13px; color: #666; font-family: monospace; letter-spacing: 0.08em; margin: 0; }
.card-hint { font-size: 12px; color: var(--text-secondary); margin: 0 0 20px; }
.btn-wallet {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; background: #000; color: #fff;
  border: none; border-radius: 0; font-size: 15px; font-weight: 600;
  cursor: pointer; touch-action: manipulation; width: 100%; max-width: 340px;
  margin-bottom: 8px;
}
.btn-wallet:active { opacity: 0.75; }

/* ── Handicap Chart ───────────────────────────────────────── */
.hcp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  margin-bottom: 12px;
}
.hcp-trend-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}
.hcp-chart-card {
  background: linear-gradient(135deg, #0a1f12 0%, #132B1D 100%);
  border: 1px solid rgba(184,149,42,0.2);
  border-radius: 0; padding: 14px 12px 12px;
  margin-bottom: 20px; width: 100%;
}
.hcp-chart-footer {
  display: flex;
  justify-content: space-around;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.hcp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.hcp-stat-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.hcp-stat-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
  font-family: 'Cormorant Garamond', serif;
}
.hcp-chart-legend { font-size: 12px; color: var(--text-secondary); text-align: center; margin: 6px 0 0; }
.hcp-line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hcp-area { fill: url(#hcpGrad); opacity: 0.3; }
.hcp-dot  { fill: var(--gold); cursor: pointer; }
.hcp-dot:hover, .hcp-dot:active { fill: #fff; }

/* ── WHS Integration ──────────────────────────────────────── */
.whs-card {
  background: var(--green-deep);
  border: 1px solid rgba(184,149,42,0.25);
  margin-bottom: 28px;
  overflow: hidden;
}
.whs-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(184,149,42,0.15);
}
.whs-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--gold);
  flex-shrink: 0;
}
.whs-logo-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
  line-height: 1;
}
.whs-logo-sub {
  font-size: 7px;
  letter-spacing: 0.08em;
  color: rgba(184,149,42,0.6);
  margin-top: 2px;
  line-height: 1;
}
.whs-index-wrap {
  flex: 1;
}
.whs-index {
  font-size: 26px;
  font-weight: 700;
  color: var(--cream);
  line-height: 1;
  letter-spacing: -0.01em;
}
.whs-index-label {
  font-size: 11px;
  color: rgba(245,240,232,0.45);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 3px;
}
.whs-sync-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  background: transparent;
  border: 1px solid rgba(184,149,42,0.4);
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  flex-shrink: 0;
}
.whs-sync-btn:hover { background: rgba(184,149,42,0.1); border-color: var(--gold); }
.whs-sync-btn.syncing { opacity: 0.6; pointer-events: none; }
.whs-sync-icon { font-size: 14px; display: inline-block; transition: transform 0.4s; }
.whs-sync-btn.syncing .whs-sync-icon { animation: whs-spin 0.8s linear infinite; }
@keyframes whs-spin { to { transform: rotate(360deg); } }

.whs-card-bottom {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.whs-cdh-wrap { display: flex; flex-direction: column; gap: 3px; }
.whs-cdh-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.4);
}
.whs-cdh-row { display: flex; align-items: center; gap: 8px; }
.whs-cdh-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.whs-cdh-missing { color: rgba(245,240,232,0.35); font-style: italic; font-weight: 400; }
.whs-cdh-edit-btn {
  padding: 2px 8px;
  background: transparent;
  border: 1px solid rgba(245,240,232,0.2);
  color: rgba(245,240,232,0.5);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.whs-cdh-edit-btn:hover { border-color: var(--gold); color: var(--gold); }
.whs-meta-right { text-align: right; }
.whs-last-sync {
  font-size: 11px;
  color: rgba(245,240,232,0.35);
  display: block;
}
.whs-provider {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(184,149,42,0.55);
  display: block;
  margin-top: 3px;
}

/* Not connected state */
.whs-not-connected {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--green-deep);
  border: 1px solid rgba(184,149,42,0.15);
  margin-bottom: 28px;
  color: rgba(245,240,232,0.45);
  font-size: 13px;
}
.whs-not-connected-icon {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(184,149,42,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}

/* WHS inline badge — shown on leaderboard, matchmaking, scorecard */
.whs-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  background: rgba(184,149,42,0.12);
  border: 1px solid rgba(184,149,42,0.3);
  color: var(--gold);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 4px;
  line-height: 14px;
}

/* Scorecard WHS index row */
.sc-whs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--green-deep);
  border: 1px solid rgba(184,149,42,0.2);
  margin-bottom: 12px;
}
.sc-whs-left { display: flex; align-items: center; gap: 10px; }
.sc-whs-label {
  font-size: 11px;
  color: rgba(245,240,232,0.45);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sc-whs-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--cream);
}
.sc-whs-right {
  font-size: 11px;
  color: rgba(245,240,232,0.4);
  text-align: right;
}

/* ══════════════════════════════════════════════════════════════
   PHASE 2 — MESSAGING
   ══════════════════════════════════════════════════════════════ */
.msg-conv-list {
  display: flex; flex-direction: column;
  gap: 0; overflow-y: auto; flex: 1;
}
.msg-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 12px 16px 6px;
  background: var(--cream);
  border-bottom: 1px solid var(--border-soft);
}
.msg-conv-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background 0.15s;
  background: var(--white);
}
.msg-conv-row:active { background: rgba(184,149,42,0.06); }
.msg-conv-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 2px solid rgba(184,149,42,0.25);
}
.msg-group-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--green-deep); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.8);
}
.msg-conv-info { flex: 1; min-width: 0; }
.msg-conv-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.msg-conv-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.msg-conv-preview { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.msg-unread-dot {
  background: var(--gold); color: #fff;
  font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; flex-shrink: 0;
}
.msg-detail-wrap { display: flex; flex-direction: column; height: calc(100% - 56px); }
.msg-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,0.08);
  background: var(--white); flex-shrink: 0;
}
.msg-detail-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.msg-thread {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  background: #F5F0E8;
}
.msg-bubble {
  max-width: 80%; padding: 10px 14px; border-radius: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.msg-bubble.mine {
  background: var(--green-deep); color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.msg-bubble.theirs {
  background: #fff; color: var(--text-primary);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  border: 1px solid rgba(0,0,0,0.08);
}
.msg-bubble-text { font-size: 14px; line-height: 1.4; }
.msg-bubble-time { font-size: 10px; opacity: 0.55; align-self: flex-end; }
.msg-sender-name { font-size: 11px; font-weight: 700; color: var(--gold); letter-spacing: 0.03em; margin-bottom: 1px; }

/* Members button in chat header */
.msg-members-btn {
  width: 36px; height: 36px; background: none; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted); flex-shrink: 0;
  touch-action: manipulation;
}
.msg-members-btn.active { color: var(--green-deep); }
.msg-members-btn:hover  { color: var(--green-deep); }

/* Group members drawer */
.msg-members-drawer {
  border-bottom: 1px solid var(--border-soft);
  background: var(--cream);
  overflow-y: auto;
  max-height: 220px;
}
.msg-member-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.msg-member-row:last-child { border-bottom: none; }
.msg-member-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.msg-member-info { display: flex; flex-direction: column; gap: 1px; }
.msg-member-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.msg-member-hcp  { font-size: 11px; color: var(--text-muted); }
.msg-input-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-top: 1px solid rgba(0,0,0,0.08);
  background: var(--white); flex-shrink: 0;
}
.msg-input {
  flex: 1; border: 1.5px solid rgba(0,0,0,0.12); border-radius: 0;
  padding: 10px 16px; font-size: 14px; outline: none;
  background: #F5F0E8; font-family: inherit;
  transition: border-color 0.2s;
}
.msg-input:focus { border-color: var(--gold); }
.msg-send-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--green-deep); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.15s;
}
.msg-send-btn:active { background: var(--green-mid); }

/* ══════════════════════════════════════════════════════════════
   PHASE 2 — LESSONS
   ══════════════════════════════════════════════════════════════ */
.lesson-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  background: var(--cream);
  border-bottom: 1.5px solid var(--border-soft);
  flex-shrink: 0;
}
.lesson-tab {
  flex: 1; padding: 10px 8px; border-radius: 0;
  background: var(--white); border: 1.5px solid var(--border-soft);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 700;
  color: var(--text-muted); cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  touch-action: manipulation;
}
.lesson-tab.active {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: var(--white);
}
.lesson-date-strip { margin-bottom: 16px; }

/* My Bookings list */
.my-lesson-list { display: flex; flex-direction: column; gap: 0; border: 1.5px solid var(--border-soft); overflow: hidden; margin-top: 16px; }
.my-lesson-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--white);
  border-bottom: 1px solid var(--border-soft);
}
.my-lesson-card:last-child { border-bottom: none; }
.my-lesson-date-col {
  display: flex; flex-direction: column; align-items: center;
  background: var(--green-deep); padding: 8px 10px; min-width: 44px; flex-shrink: 0;
}
.my-lesson-day { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold); text-transform: uppercase; }
.my-lesson-num { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; color: var(--white); line-height: 1; }
.my-lesson-mon { font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.55); text-transform: uppercase; }
.my-lesson-detail { flex: 1; min-width: 0; }
.my-lesson-time  { font-size: 15px; font-weight: 700; color: var(--green-deep); margin-bottom: 2px; }
.my-lesson-meta  { font-size: 11px; color: var(--text-muted); letter-spacing: 0.03em; }
.my-lesson-notes { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 3px; }
.my-lesson-cancel {
  flex-shrink: 0; padding: 6px 12px;
  background: transparent; border: 1.5px solid rgba(192,57,43,0.3);
  font-size: 11px; font-weight: 600; color: #c0392b; cursor: pointer;
}
.my-lesson-cancel:hover { background: rgba(192,57,43,0.06); }
.lesson-slot-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.lesson-slot {
  border-radius: var(--radius); padding: 14px;
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer; border: 1.5px solid transparent;
  transition: all 0.15s;
}
.lesson-slot.available {
  background: rgba(28,58,42,0.06);
  border-color: rgba(28,58,42,0.15);
}
.lesson-slot.available:active { background: rgba(28,58,42,0.12); }
.lesson-slot.mine {
  background: rgba(184,149,42,0.1);
  border-color: rgba(184,149,42,0.4);
}
.lesson-slot.booked {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
  opacity: 0.55; cursor: default;
}
.lesson-slot-time { font-size: 16px; font-weight: 700; color: var(--green-deep); }
.lesson-slot-pro  { font-size: 11px; color: var(--text-secondary); }
.lesson-slot-status { font-size: 12px; font-weight: 600; color: var(--gold); margin-top: 2px; }
.lesson-slot.booked .lesson-slot-status { color: var(--text-secondary); }

/* ══════════════════════════════════════════════════════════════
   PHASE 2 — STATS
   ══════════════════════════════════════════════════════════════ */
.stats-summary-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 20px;
}
.stat-summary-card {
  background: rgba(28,58,42,0.04);
  border: 1px solid rgba(28,58,42,0.1);
  border-radius: 0; padding: 14px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}
.stat-summary-big {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 700; color: var(--green-deep); line-height: 1;
}
.stat-summary-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary);
}
.stats-bar {
  height: 8px; background: rgba(0,0,0,0.08); border-radius: 0; overflow: hidden;
  margin: 6px 0;
}
.stats-bar-fill { height: 100%; background: var(--gold); border-radius: 0; transition: width 0.4s; }

/* ══════════════════════════════════════════════════════════════
   PHASE 2 — RENEWAL BANNER
   ══════════════════════════════════════════════════════════════ */
.renewal-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  background: rgba(184,149,42,0.12);
  border-bottom: 1px solid rgba(184,149,42,0.25);
}
.renewal-banner-text {
  font-size: 13px; font-weight: 500; color: var(--green-deep); flex: 1;
}
.renewal-banner-btn {
  flex-shrink: 0; padding: 8px 16px;
  background: var(--gold); color: var(--white);
  border: none; border-radius: 0;
  font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.renewal-banner-btn:active { opacity: 0.8; }

/* ══════════════════════════════════════════════════════════════
   PHASE 2 — SURVEYS
   ══════════════════════════════════════════════════════════════ */
.survey-sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 400;
  background: var(--white); border-radius: 0;
  padding: 20px 20px 36px;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.14);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.survey-sheet.open { transform: translateY(0); }
.survey-sheet-handle {
  width: 36px; height: 4px; border-radius: 0;
  background: rgba(0,0,0,0.15); margin: 0 auto 20px;
}
.survey-nps-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
}
.survey-nps-btn {
  width: 38px; height: 38px; border-radius: 0;
  border: 1.5px solid rgba(0,0,0,0.12);
  background: transparent; font-size: 14px; font-weight: 600;
  color: var(--text-primary); cursor: pointer;
  transition: all 0.15s;
}
.survey-nps-btn.selected {
  background: var(--green-deep); color: var(--gold);
  border-color: var(--green-deep);
}

/* ══════════════════════════════════════════════════════════════
   PHASE 2 — EVENTS
   ══════════════════════════════════════════════════════════════ */
.event-tabs {
  display: flex; gap: 8px; margin-bottom: 16px;
  background: rgba(0,0,0,0.04); border-radius: 0; padding: 4px;
}
.event-tab {
  flex: 1; padding: 8px 0; border: none; border-radius: 0;
  background: transparent; font-size: 13px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer;
  transition: all 0.2s;
}
.event-tab.active { background: var(--green-deep); color: var(--gold); }
.event-list { display: flex; flex-direction: column; gap: 10px; }
.event-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius); padding: 14px;
  cursor: pointer; transition: background 0.15s;
}
.event-card:active { background: rgba(184,149,42,0.06); }
.event-card-date {
  flex-shrink: 0; font-size: 12px; font-weight: 700;
  color: var(--green-deep); white-space: nowrap;
  padding-top: 2px;
}
.event-card-body { flex: 1; min-width: 0; }
.event-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.event-card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.event-card-meta { font-size: 12px; color: var(--text-secondary); }
.event-badge {
  flex-shrink: 0; padding: 3px 8px; border-radius: 0;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.event-badge.registered {
  background: rgba(28,58,42,0.12); color: var(--green-deep);
}
.event-badge.waitlist {
  background: rgba(184,149,42,0.15); color: #a07830;
}

/* ══════════════════════════════════════════════════════════════
   PHASE 2 — GUESTS
   ══════════════════════════════════════════════════════════════ */
.guest-list { display: flex; flex-direction: column; gap: 0; }
.guest-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
  cursor: pointer; gap: 12px;
}
.guest-row:active { opacity: 0.7; }
.guest-row-info { flex: 1; min-width: 0; }
.guest-row-name { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 2px; }
.guest-row-meta { font-size: 12px; color: var(--text-secondary); margin: 0; }
.guest-visit-count {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(28,58,42,0.1); color: var(--green-deep);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.guest-invite-btn {
  padding: 6px 12px; border-radius: 0; border: 1.5px solid rgba(0,0,0,0.15);
  background: transparent; font-size: 12px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer; white-space: nowrap;
  transition: all 0.15s;
}
.guest-invite-btn.highlighted {
  background: var(--gold); color: var(--white);
  border-color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 3 — COURSE CONDITIONS WIDGET
═══════════════════════════════════════════════════════════════ */
.conditions-widget {
  display: flex; align-items: center; gap: 10px;
  background: rgba(28,58,42,0.07); border: 1px solid rgba(28,58,42,0.15);
  border-radius: 0; padding: 11px 14px; margin: 0 0 14px;
  cursor: pointer; transition: background 0.2s;
}
.conditions-widget:active { background: rgba(28,58,42,0.12); }
.conditions-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #2ecc71; }
.conditions-dot.amber { background: #f39c12; }
.conditions-dot.red   { background: #e74c3c; }
.conditions-text { flex: 1; font-size: 13px; color: #1C3A2A; font-weight: 500; line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════════
   PHASE 3 — CLUB DIRECTORY
═══════════════════════════════════════════════════════════════ */
.dir-search-wrap { padding: 0 0 12px; }
.dir-search-input {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--border);
  border-radius: 0; font-size: 15px; background: #fff; color: var(--ink);
  outline: none; font-family: inherit;
}
.dir-search-input:focus { border-color: var(--green); }
.dir-opt-in-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: #fff; border-radius: 0;
  border: 1px solid var(--border); margin-bottom: 16px;
}
.dir-opt-label { font-size: 13px; color: var(--ink); font-weight: 500; }
.toggle-switch { position: relative; width: 44px; height: 24px; display: inline-block; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0; background: #ccc;
  border-radius: 0; transition: background 0.2s;
}
.toggle-slider::before {
  content: ''; position: absolute; width: 18px; height: 18px;
  left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--green); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
.dir-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dir-member-card {
  background: #fff; border: 1px solid var(--border); border-radius: 0;
  padding: 16px 14px; text-align: center; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.dir-member-card:active { transform: scale(0.97); }
.dir-avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 10px; display: block; background: var(--light-green);
}
.dir-member-name { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.dir-member-hcp { font-size: 12px; color: var(--mid-gray); }
.dir-member-tier { font-size: 11px; color: var(--green); font-weight: 600; margin-top: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
.dir-empty { grid-column: 1/-1; text-align: center; padding: 40px 20px; color: var(--mid-gray); font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════
   PHASE 3 — FOOD & BEVERAGE
═══════════════════════════════════════════════════════════════ */
/* ── Category tabs ── */
.fb-tabs {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 14px;
  scrollbar-width: none;
}
.fb-tabs::-webkit-scrollbar { display: none; }
.fb-cat-tab {
  flex-shrink: 0; padding: 8px 18px; border-radius: 0;
  border: 1.5px solid var(--border-soft);
  background: var(--cream-dark); font-size: 13px; font-weight: 600;
  color: var(--ink); cursor: pointer; transition: all 0.15s;
  white-space: nowrap; letter-spacing: 0.02em;
}
.fb-cat-tab:hover { border-color: var(--gold); color: var(--gold); }
.fb-cat-tab.active {
  background: var(--green-deep); border-color: var(--green-deep);
  color: var(--gold);
}

/* ── Item grid & cards ── */
.fb-items-grid { display: flex; flex-direction: column; gap: 0; padding-bottom: 80px; }
.fb-item-card {
  background: var(--cream); border: none;
  border-bottom: 1px solid var(--border-soft);
  padding: 14px 16px; display: flex; align-items: center; gap: 14px;
  transition: background 0.15s;
}
.fb-item-card:first-child { border-top: 1px solid var(--border-soft); }
.fb-item-card:active { background: var(--cream-dark); }
.fb-item-info { flex: 1; min-width: 0; }
.fb-item-name { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.fb-item-desc { font-size: 12px; color: var(--mid-gray); line-height: 1.4; }
.fb-item-price {
  font-size: 14px; font-weight: 700; color: var(--gold);
  flex-shrink: 0; letter-spacing: 0.02em;
}
.fb-item-add {
  width: 34px; height: 34px; border-radius: 0;
  background: var(--green-deep); color: var(--gold);
  border: none; font-size: 22px; font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; line-height: 1;
  transition: background 0.15s;
}
.fb-item-add:hover  { background: var(--green-mid); }
.fb-item-add:active { background: var(--green-mid); }

/* ── Inline quantity controls on item cards ── */
.fb-qty-inline {
  display: flex; align-items: center; gap: 0; flex-shrink: 0;
}
.fb-qty-btn {
  width: 30px; height: 34px; border-radius: 0;
  background: var(--green-deep); color: var(--gold);
  border: none; font-size: 18px; font-weight: 400;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; line-height: 1; transition: background 0.15s;
}
.fb-qty-btn:hover  { background: var(--green-mid); }
.fb-qty-btn:active { background: var(--green-mid); }
.fb-qty-num {
  min-width: 28px; height: 34px; text-align: center;
  font-size: 14px; font-weight: 700; color: var(--ink);
  background: var(--cream); border-top: 1px solid var(--green-deep);
  border-bottom: 1px solid var(--green-deep);
  display: flex; align-items: center; justify-content: center;
}

/* ── Compose / new-chat button in sub-header ── */
.compose-btn {
  width: 36px; height: 36px; flex-shrink: 0;
  background: none; border: none;
  color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.7; transition: opacity 0.15s;
}
.compose-btn:hover { opacity: 1; }

/* ── Cart button in header ── */
.cart-btn {
  position: relative; background: none; border: none; cursor: pointer;
  padding: 4px; display: flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.cart-count {
  position: absolute; top: -4px; right: -4px; background: var(--gold);
  color: var(--green-deep); font-size: 10px; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* ── Cart sheet rows ── */
.cart-item-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--border-soft);
}
.cart-item-name { flex: 1; font-size: 14px; font-weight: 500; color: var(--ink); }
.cart-item-price { font-size: 13px; font-weight: 700; color: var(--gold); flex-shrink: 0; }
.cart-item-qty { display: flex; align-items: center; gap: 8px; }
.qty-btn {
  width: 28px; height: 28px; border-radius: 0;
  border: 1.5px solid var(--green-deep); background: var(--green-deep);
  color: var(--cream); font-size: 16px; font-weight: 500;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.qty-btn:hover { background: var(--green-mid); border-color: var(--green-mid); }
.qty-val { font-size: 14px; font-weight: 600; min-width: 20px; text-align: center; color: var(--ink); }
.cart-footer { padding-top: 14px; }
.cart-total-row {
  display: flex; justify-content: space-between;
  font-size: 16px; font-weight: 700; margin-bottom: 12px;
  color: var(--ink);
}
.cart-total-row span:last-child { color: var(--gold); }

/* ── Past order cards ── */
.fb-order-card {
  background: var(--cream); border: none;
  border-bottom: 1px solid var(--border-soft);
  padding: 14px 16px; margin-bottom: 0;
}
.fb-order-card:first-child { border-top: 1px solid var(--border-soft); }
.fb-order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.fb-order-id { font-size: 13px; font-weight: 600; color: var(--ink); }
.fb-order-status { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 0; letter-spacing: 0.06em; text-transform: uppercase; }
.fb-status-pending   { background: rgba(184,149,42,0.12); color: #8A6A10; }
.fb-status-preparing { background: rgba(28,58,42,0.1);    color: var(--green-mid); }
.fb-status-ready     { background: var(--green-deep);     color: var(--gold); }
.fb-status-collected { background: var(--cream-dark);     color: var(--mid-gray); }
.fb-status-cancelled { background: rgba(180,40,40,0.1);   color: #a02020; }
.fb-order-items { font-size: 12px; color: var(--mid-gray); margin-bottom: 6px; }
.fb-order-total { font-size: 13px; font-weight: 600; color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════
   PHASE 3 — PRO SHOP
═══════════════════════════════════════════════════════════════ */
.ps-tabs { display: flex; gap: 0; margin-bottom: 16px; border-radius: 0; overflow: hidden; border: 1.5px solid var(--border); }
.ps-tab { flex: 1; padding: 10px; border: none; background: #fff; font-size: 13px; font-weight: 600; color: var(--mid-gray); cursor: pointer; transition: all 0.15s; }
.ps-tab.active { background: var(--green); color: #fff; }
.ps-cat-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; margin-bottom: 4px; }
.ps-cat-strip::-webkit-scrollbar { display: none; }
.ps-cat-pill { flex-shrink: 0; padding: 6px 14px; border-radius: 0; border: 1.5px solid var(--border); background: #fff; font-size: 12px; font-weight: 600; color: var(--mid-gray); cursor: pointer; }
.ps-cat-pill.active { background: var(--gold); border-color: var(--gold); color: #fff; }
.ps-items-list { display: flex; flex-direction: column; gap: 10px; }
.ps-item-card {
  background: #fff; border: 1px solid var(--border); border-radius: 0;
  padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px;
}
.ps-item-info { flex: 1; }
.ps-item-name { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.ps-item-desc { font-size: 12px; color: var(--mid-gray); margin-bottom: 6px; line-height: 1.4; }
.ps-item-cat  { font-size: 11px; color: var(--green); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.ps-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.ps-item-price { font-size: 16px; font-weight: 700; color: var(--ink); }
.ps-item-stock { font-size: 11px; color: var(--mid-gray); }
.ps-reserve-btn { padding: 7px 14px; background: var(--green); color: #fff; border: none; border-radius: 0; font-size: 13px; font-weight: 600; cursor: pointer; }
.ps-reserve-btn:disabled { background: #ccc; cursor: default; }
.ps-res-card {
  background: #fff; border: 1px solid var(--border); border-radius: 0; padding: 14px 16px; margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.ps-res-name   { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.ps-res-detail { font-size: 12px; color: var(--mid-gray); }
.ps-res-status { font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 0; flex-shrink: 0; }
.ps-status-pending   { background: #fff3e0; color: #e65100; }
.ps-status-ready     { background: #e8f5e9; color: #2e7d32; }
.ps-status-collected { background: #f0f0f0; color: #666; }

/* ═══════════════════════════════════════════════════════════════
   PHASE 3 — BUGGY & CADDIE
═══════════════════════════════════════════════════════════════ */

/* ── Tee slot picker ── */
.buggy-tee-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 4px;
}
.buggy-tee-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 18px;
  border: 1.5px solid var(--border-soft);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-width: 80px;
}
.buggy-tee-slot:hover { border-color: var(--gold); }
.buggy-tee-slot.selected {
  border-color: var(--green-deep);
  background: rgba(15,33,24,0.05);
}
.buggy-slot-day {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mid-gray);
  margin-bottom: 4px;
}
.buggy-slot-time {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
}
.buggy-tee-empty {
  font-size: 13px;
  color: var(--mid-gray);
  line-height: 1.6;
  padding: 16px 0;
}

.buggy-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.buggy-type-card {
  background: #fff; border: 2px solid var(--border); border-radius: 0;
  padding: 18px 12px; text-align: center; cursor: pointer; transition: all 0.15s;
}
.buggy-type-card.selected { border-color: var(--green); background: rgba(28,58,42,0.04); }
.buggy-type-card:active { transform: scale(0.97); }
.buggy-type-icon { font-size: 28px; margin-bottom: 8px; }
.buggy-type-name { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.buggy-type-sub  { font-size: 12px; color: var(--mid-gray); }
.buggy-book-section { margin-bottom: 20px; }
.buggy-availability-info { font-size: 13px; color: var(--mid-gray); margin-bottom: 12px; min-height: 20px; }
.buggy-my-bookings-title { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.buggy-booking-card {
  background: #fff; border: 1px solid var(--border); border-radius: 0;
  padding: 14px 16px; display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.buggy-booking-left { }
.buggy-booking-type { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.buggy-booking-date { font-size: 12px; color: var(--mid-gray); }
.buggy-cancel-btn { padding: 6px 12px; background: #fdecea; color: #c62828; border: none; border-radius: 0; font-size: 12px; font-weight: 600; cursor: pointer; }


/* ═══════════════════════════════════════════════════════════════
   DESKTOP LAYOUT — sidebar + main content (≥ 900px)
   ═══════════════════════════════════════════════════════════════ */

/* ── Desktop Sidebar (hidden by default, shown on desktop) ── */
#desktop-sidebar {
  display: none;
}

@media (min-width: 900px) {

  /* Root layout: sidebar left, content right */
  body {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    height: 100dvh;
    background: #14221A;
  }

  /* ── Sidebar ── */
  #desktop-sidebar {
    display: flex !important;
    flex-direction: column;
    width: 220px;
    min-width: 220px;
    height: 100dvh;
    background: #0F2118;
    border-right: 1px solid rgba(184,149,42,0.12);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    flex-shrink: 0;
  }
  #desktop-sidebar::-webkit-scrollbar { display: none; }

  /* Brand */
  .ds-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
  }
  .ds-brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .ds-brand-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 500;
    color: #F5F0E8;
    letter-spacing: 0.04em;
    line-height: 1;
  }
  .ds-brand-sub {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(184,149,42,0.6);
  }

  /* Nav */
  .ds-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    gap: 1px;
  }
  .ds-nav-section {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(245,240,232,0.25);
    padding: 14px 18px 6px;
    display: block;
  }
  .ds-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    background: none;
    border: none;
    border-left: 2px solid transparent;
    color: rgba(245,240,232,0.5);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    text-align: left;
    width: 100%;
    position: relative;
  }
  .ds-nav-item:hover {
    background: rgba(255,255,255,0.04);
    color: rgba(245,240,232,0.85);
  }
  .ds-nav-item.active {
    border-left-color: #B8952A;
    background: rgba(184,149,42,0.08);
    color: #F5F0E8;
    font-weight: 500;
  }
  .ds-nav-item.active svg { stroke: #B8952A; }
  .ds-nav-item svg { flex-shrink: 0; opacity: 0.7; transition: opacity 0.15s; }
  .ds-nav-item:hover svg, .ds-nav-item.active svg { opacity: 1; }

  .ds-nav-badge {
    margin-left: auto;
    background: #B8952A;
    color: #0F2118;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* Member footer */
  .ds-member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
  }
  .ds-member:hover { background: rgba(255,255,255,0.04); }
  .ds-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(184,149,42,0.4);
    flex-shrink: 0;
  }
  .ds-member-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .ds-member-name {
    font-size: 12px;
    font-weight: 600;
    color: #F5F0E8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ds-member-meta {
    font-size: 10px;
    color: rgba(245,240,232,0.4);
    white-space: nowrap;
  }

  /* ── All screens fill the remaining space ── */
  .screen {
    max-width: none !important;
    flex: 1 !important;
    height: 100dvh !important;
    margin: 0 !important;
    background: var(--cream);
  }

  /* Auth screen: stays centered in its own full-width panel */
  #screen-auth {
    align-items: center;
    justify-content: center;
    background: var(--green-deep);
  }
  #screen-auth .auth-bg {
    width: 100%;
    height: 100%;
    max-width: none;
    justify-content: center;
  }

  /* Hide mobile bottom nav */
  .bottom-nav { display: none !important; }

  /* App-nav: hide logo on desktop (sidebar has it), show greeting inline */
  .app-nav .nav-logo { display: none; }
  .app-nav {
    flex-wrap: nowrap;
    align-items: center;
    padding: 0 28px 0 28px;
    justify-content: flex-start;
    gap: 0;
  }
  /* Greeting section becomes the middle section, taking all available space */
  .app-nav .greeting-section {
    flex: 1;
    width: auto;
    order: 0;
    padding: 14px 24px 14px 0;
    margin-bottom: 0;
    align-items: center;
    border-bottom: none;
  }
  .app-nav .greeting-section > div:first-child { flex: 1; }
  .app-nav .greeting-name { font-size: 19px; }
  .app-nav .greeting-label { font-size: 11px; margin-bottom: 1px; }
  .app-nav .greeting-club { margin-top: 3px; }
  .app-nav .handicap-badge { padding: 6px 12px; min-width: 54px; margin-left: 16px; }
  .app-nav .handicap-value { font-size: 18px; }
  /* nav-actions aligns right, no extra gap */
  .nav-actions { margin-left: auto; }

  /* Quick actions: 4 columns on desktop */
  .quick-actions {
    grid-template-columns: repeat(4, 1fr);
  }
  .action-card.featured {
    grid-column: 1 / -1;
  }

  /* Sub-header: hide back button on desktop (sidebar nav handles navigation) */
  .sub-header .back-btn {
    visibility: hidden;
    pointer-events: none;
  }
  .sub-header {
    padding: 14px 28px 12px;
  }

  /* Screen body gets more breathing room */
  .screen-body {
    padding: 24px 32px 40px;
  }

  /* ── Tee Times desktop layout ───────────────────────────── */
  .tee-band-tabs { padding: 0 28px; background: var(--cream); }
  .tee-band-tab  { flex: 0 0 auto; padding: 10px 0; margin-right: 24px; font-size: 12px; }

  /* Slot grid: 4 fixed columns */
  .tee-time-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border-soft);
    padding: 0;
    align-content: start;
  }

  .tee-slot {
    padding: 10px 14px;
    background: var(--white);
    border: none;
    border-bottom: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 52px;
  }
  .tee-slot.available:hover { background: rgba(15,33,24,0.04); }
  .tee-slot.mine            { background: rgba(184,149,42,0.08); }
  .tee-slot.mine:hover      { background: rgba(184,149,42,0.13); }

  .slot-time    { font-size: 14px; width: auto; }
  .slot-status  { font-size: 10px; }
  .slot-pip     { display: none; }
  .slot-avatars { display: none; }

  /* Loading/empty states span all 4 columns */
  .tee-time-grid .tee-loading {
    grid-column: 1 / -1;
  }

  .tee-times-date-strip { padding: 10px 28px 10px; }
  .tee-week-nav         { padding: 10px 28px 6px; }
  .tee-tabs, .lesson-tabs { padding: 12px 28px; gap: 10px; }
  .tee-tab, .lesson-tab   { font-size: 13px; }

  /* Board / Find a Game: full width */
  #board-posts, #fg-posts {
    padding: 0 28px 24px;
  }
  .fg-form-scroll { padding: 24px 28px 40px; }
  .fg-results-list { padding: 12px 28px 32px; }

  /* Profile hero: less top padding on desktop */
  .profile-hero {
    padding: 40px 32px 28px;
  }

  /* Scorecard panel padding */
  .sc-panel { padding: 20px 32px 40px; }
  .step-panel { padding: 0 32px 32px; }

  /* ── Modal: centered on desktop, offset for sidebar ── */
  .modal-overlay {
    left: 220px;          /* align with content area, not behind sidebar */
    align-items: center;
    justify-content: center;
  }
  .modal-card {
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    margin: 0;
  }

  /* ── Cart sheet: fixed bottom panel, offset for sidebar ── */
  #cart-sheet {
    position: fixed;
    left: 220px;
    right: 0;
    bottom: 0;
    z-index: 400;
    max-width: 520px;
    margin: 0 auto;
    padding: 20px 28px 32px;
    background: #fff;
    box-shadow: 0 -4px 32px rgba(0,0,0,0.14);
    border-top: 1px solid rgba(0,0,0,0.08);
  }
  #cart-sheet .sheet-handle { display: none; }

  /* ── Booking slot list — tighter rows on desktop ── */
  .booking-slot { padding: 9px 20px; }
  .bsg-nav-btn  { padding: 10px 8px; }
  .booking-cal-wrap { padding: 10px 20px 6px; }

} /* end @media (min-width: 900px) */

/* ── Sidebar: force-hidden override (pre-login) ── */
#desktop-sidebar.hidden {
  display: none !important;
}

/* ── Auth screen on desktop: full-width even without sidebar ── */
@media (min-width: 900px) {
  body:not(.is-logged-in) {
    background: var(--green-deep);
  }
  #screen-auth.active {
    flex: 1;
    max-width: none !important;
  }
}

/* ─── HOLDING SCREEN ────────────────────────────────────── */
.holding-bg {
  position: relative;
  width: 100%; height: 100%;
  background: var(--green-deep);
  display: flex; align-items: center; justify-content: center;
}
.holding-content {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 32px 28px; text-align: center; position: relative; z-index: 2;
}
.holding-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px; font-weight: 600; color: var(--white);
  margin: 8px 0 0;
}
.holding-body {
  font-size: 15px; color: rgba(255,255,255,0.7);
  line-height: 1.6; max-width: 280px;
}
.holding-back-btn {
  margin-top: 12px; padding: 12px 28px;
  background: transparent; border: 1.5px solid rgba(255,255,255,0.3);
  color: var(--white); font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: 'DM Sans', sans-serif;
  transition: border-color 0.2s;
}
.holding-back-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ═══════════════════════════════════════════════════════════
   Mirrored from admin — features added later
   ═══════════════════════════════════════════════════════════ */

/* ─── Range walk-up status card ────────────────────────── */
.range-status-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  padding: 28px 24px;
  text-align: center;
  margin: 20px 16px;
}
.range-status-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--green-light);
  box-shadow: 0 0 0 5px rgba(74,122,92,0.18);
  margin: 0 auto 14px;
}
.range-status-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 500;
  color: var(--green-deep);
  margin: 0 0 4px;
}
.range-status-sub {
  font-size: 13px; color: var(--text-muted); margin: 0 0 16px;
}
.range-status-help {
  font-size: 12px; color: var(--text-light);
  max-width: 280px; margin: 0 auto; line-height: 1.5;
}

/* ─── Range bucket store ───────────────────────────────── */
.range-bucket-section { padding: 16px; }
.range-bucket-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 500;
  color: var(--green-deep);
  margin: 0 0 4px;
}
.range-bucket-intro {
  font-size: 12px; color: var(--text-muted);
  margin: 0 0 14px;
}
.range-bucket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.range-bucket-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 16px 14px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.range-bucket-tile:hover { border-color: var(--green-deep); background: var(--cream); }
.range-bucket-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 500; color: var(--green-deep);
}
.range-bucket-balls { font-size: 11px; color: var(--text-muted); }
.range-bucket-price {
  font-size: 13px; font-weight: 600; color: var(--green-mid);
  margin-top: 4px;
}

/* ─── Blocked booking slot ─────────────────────────────── */
.booking-slot.blocked {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(192,57,43,0.04) 0,
      rgba(192,57,43,0.04) 7px,
      transparent 7px,
      transparent 14px
    ),
    var(--white);
  border: 1px dashed rgba(192,57,43,0.35);
  cursor: not-allowed;
  color: var(--red);
}
.booking-slot.blocked .bsg-status {
  color: var(--red); font-weight: 600;
}

/* ─── Active orders pill on F&D screen ─────────────────── */
.fb-active-orders {
  padding: 12px 16px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.fb-order-pill {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  cursor: pointer;
}
.fb-order-pending   { border-left: 3px solid var(--gold); }
.fb-order-preparing { border-left: 3px solid var(--gold-light); }
.fb-order-ready     { border-left: 3px solid var(--green-light); }
.fb-order-pill-status {
  font-size: 13px; font-weight: 600; color: var(--green-deep);
}
.fb-order-pill-meta {
  font-size: 12px; color: var(--text-muted);
}

.fb-detail-status {
  padding: 10px; text-align: center;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.fb-detail-pending   { background: rgba(184,149,42,0.15); color: #92600a; }
.fb-detail-preparing { background: rgba(212,184,74,0.20); color: #8c6a14; }
.fb-detail-ready     { background: rgba(74,122,92,0.15); color: var(--green-mid); }
.fb-detail-collected { background: var(--cream); color: var(--text-muted); }
.fb-detail-cancelled { background: rgba(192,57,43,0.10); color: var(--red); }
.fb-detail-line {
  display: flex; justify-content: space-between;
  padding: 6px 0; font-size: 13px;
}

/* ─── What's open widget (dashboard) ───────────────────── */
.wo-card {
  margin: 0 16px 16px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  padding: 18px 18px 12px;
}
.wo-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 500;
  color: var(--green-deep);
  margin: 0 0 12px;
}
.wo-list { display: grid; gap: 8px; }
.wo-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 10px; align-items: center;
  padding: 6px 0;
  font-size: 13px;
}
.wo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-light);
}
.wo-open    .wo-dot { background: var(--green-light); box-shadow: 0 0 0 3px rgba(74,122,92,0.15); }
.wo-pre     .wo-dot { background: var(--gold); }
.wo-closed  .wo-dot { background: var(--text-light); opacity: 0.5; }
.wo-label { color: var(--green-deep); font-weight: 500; }
.wo-meta  { color: var(--text-muted); font-size: 12px; }

/* Per-screen opening-hours pill */
.screen-hours-pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 12px 16px 0;
  padding: 6px 12px;
  background: var(--cream);
  border: 1px solid var(--border-soft);
  font-size: 12px; color: var(--text-muted);
}
.screen-hours-pill.hours-open .wo-dot { background: var(--green-light); }
.screen-hours-pill.hours-pre .wo-dot { background: var(--gold); }
.screen-hours-pill.hours-closed .wo-dot { background: var(--text-light); }

/* ─── Avatar placeholders ─────────────────────────────
 * New members don't get a stock pravatar face — until they upload
 * their own photo via the onboarding checklist, we render either:
 *   1) A CSS initials circle via the avatarHtml() helper (preferred)
 *   2) A solid brand-coloured circle for legacy img tags with empty src
 * ──────────────────────────────────────────────────── */
.initials-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #FFFEFB;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  user-select: none;
}

/* Catch-all for the older inline <img> avatars that were swept to "" — show
 * a solid green circle instead of a broken-image icon. */
img[src=""] {
  background: linear-gradient(135deg, #1C3A2A, #4A7A5C);
  border-radius: 50%;
  object-fit: cover;
}
/* Suppress the broken-image icon Safari/Firefox render */
img[src=""]::before { content: ""; display: block; }

/* ─── Profile completion modal (first sign-in) ──────── */
.prof-setup { text-align: left; }
.prof-progress {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.prof-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; font-weight: 500;
  color: var(--green-deep);
  margin: 0 0 6px;
}
.prof-sub {
  font-size: 13px; color: var(--text-muted);
  margin: 0 0 18px; line-height: 1.5;
}
.prof-body { margin: 0 0 20px; }

.prof-options { display: grid; gap: 6px; }
.prof-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}
.prof-option:hover { border-color: var(--green-deep); }
.prof-option.is-selected {
  border-color: var(--green-deep);
  background: var(--cream);
}
.prof-option-tick {
  color: var(--green-mid);
  font-weight: 700;
  font-size: 14px;
}

.prof-photo-row {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.prof-photo-preview {
  flex-shrink: 0;
  width: 96px; height: 96px;
}
.prof-photo-actions {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1; min-width: 160px;
}
.prof-photo-hint {
  font-size: 11px; color: var(--text-muted);
  margin: 4px 0 0;
}

.prof-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.btn-text {
  background: none; border: none;
  font-family: inherit; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
}
.btn-text:hover { color: var(--green-deep); }
.btn-text-danger {
  background: none; border: none;
  font-family: inherit; font-size: 12px;
  color: var(--red); cursor: pointer;
  text-align: left;
  padding: 0;
}

/* ─── Editable profile sections ─────────────────────── */
.section-title-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 24px 16px 8px;
}
.section-title-row .section-title { margin: 0; }
.section-title-row .btn-text {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}

.profile-edit-form {
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  margin: 0 16px;
}
.profile-edit-form .form-group { margin-bottom: 12px; }
.profile-edit-form .form-group:last-of-type { margin-bottom: 8px; }
.profile-edit-form label {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.profile-edit-form input,
.profile-edit-form select,
.profile-edit-form textarea {
  width: 100%;
  padding: 9px 10px;
  background: var(--cream);
  border: 1px solid var(--border-soft);
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
}
.profile-edit-form input:focus,
.profile-edit-form select:focus,
.profile-edit-form textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.profile-edit-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  margin-top: 4px;
}
.profile-edit-actions .btn-outline,
.profile-edit-actions .btn-primary {
  padding: 8px 16px; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* Wrap for fill=true avatars inside the next-round card so the
 * existing 24px sizing + overlap still applies whether the inner
 * element is an <img> or an .initials-avatar span. */
.round-player-avatar-wrap {
  display: inline-block;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--white);
  margin-left: -6px;
  overflow: hidden;
  position: relative;
}
.round-player-avatar-wrap:first-child { margin-left: 0; }

/* ─── Profile photo edit overlay ───────────────────── */
.profile-avatar-wrap {
  display: inline-block;
  /* Wrap is sized by the inner .profile-avatar (88px) */
}
.profile-avatar-edit {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--green-deep);
  border: 2px solid var(--white);
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.15s, background 0.15s;
}
.profile-avatar-edit:hover {
  background: var(--gold-light);
  transform: scale(1.06);
}
.profile-avatar-edit:focus { outline: 2px solid var(--gold); outline-offset: 2px; }

.profile-remove-photo {
  background: none; border: none;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,254,251,0.6);
  cursor: pointer;
  margin: 8px 0 14px;
  padding: 4px 12px;
  transition: color 0.15s;
}
.profile-remove-photo:hover { color: var(--red); }

/* ─── Forgot-password link on member auth screen ───── */
.auth-forgot {
  text-align: center;
  font-size: 12px;
  margin: 10px 0 0;
}
.auth-forgot a {
  color: rgba(255,254,251,0.6);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.auth-forgot a:hover { color: var(--gold); }

/* ─── Pro Shop categories — member side ─────────────── */
.ps-shop-intro {
  font-size: 12px; color: var(--text-muted);
  letter-spacing: 0.04em;
  padding: 12px 16px 4px;
}
.ps-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 8px 16px 24px;
}
.ps-cat-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 18px 16px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.ps-cat-tile:hover {
  border-color: var(--green-deep);
  background: var(--cream);
}
.ps-cat-tile:active { transform: scale(0.98); }
.ps-cat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(184,149,42,0.10);
  color: var(--gold);
  margin-bottom: 6px;
}
.ps-cat-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 500;
  color: var(--green-deep);
  line-height: 1.2;
}
.ps-cat-count {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.ps-breadcrumb {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 0;
}
.ps-back-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: none;
  font-family: inherit;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 0;
}
.ps-back-btn:hover { color: var(--green-deep); }
.ps-breadcrumb-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 500;
  color: var(--green-deep);
}
.ps-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ─── Find a Game — in-panel Post a Slot CTA ─────────── */
/* Replaces the old .fg-post-btn that used to live in the sub-header.
 * Brand-coloured row inside the Browse panel so the affordance is still
 * obvious now that the sub-header matches the Tee Times layout. */
.fg-post-cta {
  display: block;
  margin: 4px 16px 12px;
  padding: 10px 14px;
  background: var(--green-deep);
  color: var(--white);
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
  width: calc(100% - 32px);
}
.fg-post-cta:hover { background: var(--green-mid); }