:root {
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --border: #333336;
  --text: #ffffff;
  --text-dim: #8e8e93;
  --text-faint: #636366;
  --accent: #0a84ff;
  --accent-dim: rgba(10,132,255,0.16);
  --accent-green: #30d158;
  --tabbar-bg: rgba(28,28,30,0.85);
  --overlay-bg: rgba(0,0,0,0.85);
  --card-shadow: none;
  --wa-red-text: #ff453a;

  /* True WA target face colors (matched to reference hexes) */
  --wa-gold: #ffd60a;
  --wa-gold-ink: #000000;
  --wa-red: #ff453a;
  --wa-red-ink: #ffffff;
  --wa-blue: #64d2ff;
  --wa-blue-ink: #000000;
  --wa-black: #3a3a3c;
  --wa-black-ink: #ffffff;
  --wa-white: #f2f2f7;
  --wa-white-ink: #000000;
  --wa-miss: #2c2c2e;
  --wa-miss-ink: #8e8e93;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 12px;

  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Light theme — same structure, iOS-light-mode palette. Target-face (WA) colors and
   fonts stay identical on purpose: those are fixed brand/scoring colors, not a
   dark-vs-light preference. */
[data-theme="light"] {
  --bg: #F2F2F7;
  --surface: #FFFFFF;
  --surface-2: #E4E6EB;
  --surface-3: #D3D6DC;
  --border: #D5D7DD;
  --text: #14171D;
  --text-dim: #525866;
  --text-faint: #606876;
  --accent: #0A84FF;
  --accent-dim: rgba(10,132,255,0.12);
  --accent-green: #248A3D;
  --tabbar-bg: rgba(255,255,255,0.85);
  --overlay-bg: rgba(20,23,29,0.75);
  --card-shadow: 0 1px 3px rgba(20,23,29,0.08);
  --wa-red-text: #C4281C;

  --wa-miss: #D8DADF;
  --wa-miss-ink: #6B7280;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

body { background: var(--bg); }

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: 88px;
  position: relative;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input, select {
  font-family: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* ---------- Layout scaffolding ---------- */
.screen {
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeIn .28s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}

h1.title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.subtitle { color: var(--text-dim); font-size: 14px; line-height: 1.5; }

.card {
  background: linear-gradient(145deg, var(--surface-2), var(--surface));
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

.btn-primary {
  width: 100%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.2px;
  padding: 16px;
  border-radius: var(--radius-md);
  transition: transform .1s ease, opacity .1s ease;
}
.btn-primary:active { transform: scale(0.96); opacity: 0.85; }
.btn-primary:disabled { background: var(--surface-2); color: var(--text-dim); opacity: 0.5; pointer-events: none; }

.btn-secondary {
  width: 100%;
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  padding: 14px;
  border-radius: var(--radius-md);
}
.btn-secondary:active { transform: scale(0.96); opacity: 0.85; }

.field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: block;
}
.field { width: 100%; padding: 13px 14px; font-size: 16px; }

.error-text { color: var(--wa-red-text); font-size: 13px; font-weight: 500; }

/* ---------- Auth / code entry ---------- */
.gate {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 24px;
  gap: 28px;
}
.gate-logo {
  width: 168px;
  height: auto;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,0.5));
}
.code-input {
  font-size: 20px;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  padding: 16px;
}
.remember-row {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 2px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
}
.remember-row input[type="checkbox"] {
  width: 18px; height: 18px;
  border-radius: 5px;
  accent-color: var(--accent);
  cursor: pointer;
}

.avatar {
  width: 34px; height: 34px; border-radius: 24%;
  background: var(--surface-3);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  flex-shrink: 0;
  border: 2px solid var(--accent);
  box-sizing: border-box;
}
img.avatar { cursor: pointer; object-fit: cover; }
.member-name { font-weight: 500; font-size: 15px; }
.profile-avatar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.profile-avatar-edit-wrap { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.avatar-edit-pencil {
  position: absolute; bottom: -4px; right: -4px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid var(--bg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.avatar-edit-pencil svg { width: 14px; height: 14px; }
.avatar-edit-pencil:active { transform: scale(0.92); }

/* ---------- Avatar lightbox (tap a profile photo to enlarge it) ---------- */
.avatar-lightbox {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; height: 100%;
  background: var(--overlay-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  z-index: 110;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.avatar-lightbox.active { opacity: 1; pointer-events: auto; }
.avatar-lightbox img {
  border-radius: 22%;
  object-fit: cover;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  transform: scale(0.85);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.avatar-lightbox.active img { transform: scale(1); }

/* ---------- Home header (avatar + greeting) ---------- */
.home-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.home-header-left { display: flex; align-items: center; gap: 12px; }
.home-header-text { display: flex; flex-direction: column; gap: 1px; }
.home-header-name { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.4px; }
.app-version-badge { font-size: 11px; font-weight: 700; color: var(--text-dim); letter-spacing: 0.02em; align-self: flex-start; display: flex; align-items: center; gap: 6px; }
.beta-pill {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: #30d158; border: 1px solid #30d158; border-radius: 999px; padding: 2px 7px;
}
[data-theme="light"] .beta-pill { color: #1B6E30; border-color: #1B6E30; }

/* ---------- Tonight (season schedule) card ---------- */
.tonight-card { display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; cursor: pointer; }
.approvals-alert-card {
  display: flex; align-items: center; gap: 12px;
  background: #EA7805; color: #1A1200;
  cursor: pointer; text-align: left; width: 100%; border: none;
}
.approvals-alert-icon { width: 24px; height: 24px; flex-shrink: 0; }
.install-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45; }
.install-nudge-card { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--accent); }
.install-nudge-title { font-size: 14px; font-weight: 800; }
.install-nudge-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.install-nudge-actions { display: flex; gap: 8px; }
.install-nudge-actions button { flex: 1; padding: 9px 0; }
.approvals-alert-title { font-size: 14px; font-weight: 800; }
.approvals-alert-sub { font-size: 12px; font-weight: 600; opacity: 0.85; margin-top: 1px; }

/* ---------- "Laatste nieuws" — personal-best celebration cards ---------- */
.pbnews-list { display: flex; flex-direction: column; gap: 10px; }
.pbnews-card {
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 3 / 1;
  border-radius: var(--radius-lg);
  border: none; font-family: inherit; text-align: left; cursor: pointer;
  background: linear-gradient(135deg, #1a1c29 0%, #0d0e15 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 0 1px rgba(255,255,255,0.2);
  display: flex; align-items: center;
  padding: 0 5%;
}
.pbnews-target {
  position: absolute; left: -7%; top: 50%; transform: translateY(-50%);
  height: 140%; aspect-ratio: 1;
  opacity: 0.85;
}
.pbnews-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
.pbnews-ring-white { width: 93%; height: 93%; background: #F2F2F7; }
.pbnews-ring-black { width: 75%; height: 75%; background: #3A3A3C; }
.pbnews-ring-blue  { width: 57%; height: 57%; background: #64D2FF; }
.pbnews-ring-red   { width: 39%; height: 39%; background: #FF453A; }
.pbnews-ring-gold  { width: 21%; height: 21%; background: #FFD60A; }
.pbnews-stats {
  margin-left: auto; position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.pbnews-badge {
  background: linear-gradient(90deg, #ff416c, #ff4b2b);
  color: #fff; font-size: 11px; font-weight: 800;
  padding: 3px 10px; border-radius: 20px;
  letter-spacing: 1.2px; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(255,75,43,0.4);
  margin-bottom: 3px;
}
.pbnews-name { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.2px; }
.pbnews-class { color: rgba(255,255,255,0.55); font-size: 11px; font-weight: 600; margin-bottom: 2px; }
.pbnews-score { font-family: var(--font-display); font-size: 32px; font-weight: 900; color: #fff; line-height: 1.1; }
.pbnews-max { font-size: 16px; font-weight: 700; color: #ffe600; text-shadow: 0 0 10px rgba(255,230,0,0.3); }
.news-swap-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.news-swap-icon { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.news-swap-text { font-size: 13px; color: var(--text); line-height: 1.4; }
.tonight-card:active { opacity: 0.85; }
.tonight-header { display: flex; align-items: center; justify-content: space-between; }
.tonight-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tonight-distance { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.6px; }
.tonight-date { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.3px; }
.tonight-beheerder { display: flex; flex-direction: column; gap: 2px; text-align: right; }

/* ---------- Home stats preview grid ---------- */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.stat-card {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 12px 10px; display: flex; flex-direction: column; justify-content: space-between;
  height: 92px; text-align: left;
}
.stat-card-title { font-size: 11px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.stat-card-value { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.stat-card-subtitle { font-size: 11px; color: var(--accent-green); font-weight: 600; }

/* ---------- Session item (home recent list) ---------- */
.session-item {
  width: 100%; text-align: left;
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
}
.session-info { display: flex; flex-direction: column; gap: 4px; }
.session-title { font-size: 15px; font-weight: 600; }
.session-meta { font-size: 12px; color: var(--text-dim); }
.session-score { color: var(--text-faint); font-size: 16px; }

/* ---------- Statistieken: segmented control ---------- */
.pr-pill {
  display: inline-block; background: #D4AF37; color: #1A1200;
  font-size: 13px; font-weight: 800; padding: 7px 14px;
  border-radius: 999px; margin-bottom: 4px; margin-right: 6px;
}
.segmented-control {
  background: var(--surface); box-shadow: var(--card-shadow);
  border-radius: 10px; padding: 3px; display: flex;
}
.segmented-control button {
  flex: 1; padding: 7px 0; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
}
.segmented-control button.active { background: var(--surface-2); color: var(--text); }
#typeControl button[data-v="officieel"].active { background: #EA7805; color: #1A1200; }
#typeControl button[data-v="vrij"].active { background: #30D158; color: #052E0F; }
#typeControl button[data-v="all"].active { background: #0065AD; color: #fff; }

/* ---------- Statistieken: analytics cards ---------- */
.analytics-card {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
}
.card-header { display: flex; justify-content: space-between; align-items: center; }
.card-title { font-size: 14px; font-weight: 600; color: var(--text-dim); }
.card-badge { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.card-badge.positive { color: var(--accent-green); background: rgba(48,209,88,0.14); }
.card-badge.negative { color: var(--wa-red-text); background: rgba(255,69,58,0.14); }
.card-badge.neutral { color: var(--text-dim); background: var(--surface-2); }

.metric-row { display: flex; align-items: baseline; gap: 8px; }
.metric-big { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -0.6px; }
.metric-big.small { font-size: 22px; margin-top: 2px; }
.metric-label { font-size: 11.5px; color: var(--text-dim); }
.chart-container { width: 100%; margin-top: 2px; }

.distribution-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin-top: 2px; }
.dist-segment { height: 100%; }
.dist-gold { background: var(--wa-gold); }
.dist-red { background: var(--wa-red); }
.dist-blue { background: var(--wa-blue); }
.dist-black { background: #48484a; }
.legend-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 4px; }
.legend-item {
  display: flex; flex-direction: column; align-items: center;
  background: var(--surface-2); padding: 8px 4px; border-radius: 10px;
}
.legend-color { width: 8px; height: 8px; border-radius: 50%; margin-bottom: 4px; }
.legend-val { font-size: 13px; font-weight: 700; }
.legend-lbl { font-size: 9.5px; color: var(--text-dim); }

/* ---------- Bottom nav ---------- */
/* ---------- Offline banner ---------- */
#offlineBanner {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  background: #EA7805; color: #1A1200;
  font-size: 12.5px; font-weight: 700; text-align: center;
  padding: 8px 16px calc(8px + env(safe-area-inset-top));
  z-index: 200;
}
body.has-offline-banner #app { padding-top: calc(38px + env(safe-area-inset-top)); }
#viewAsBanner {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  background: #6E3FD9; color: #fff;
  font-size: 12.5px; font-weight: 700; text-align: center;
  padding: 8px 16px calc(8px + env(safe-area-inset-top));
  z-index: 210;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
#viewAsBanner button {
  background: rgba(255,255,255,0.2); color: #fff; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; font-size: 11.5px; flex-shrink: 0;
}
body.has-viewas-banner #app { padding-top: calc(38px + env(safe-area-inset-top)); }
#updateBanner {
  position: fixed; bottom: calc(88px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 448px;
  background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 12px 16px; border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  z-index: 200;
}
#updateBanner button {
  background: rgba(255,255,255,0.2); color: #fff; font-weight: 700;
  padding: 6px 14px; border-radius: 999px; font-size: 12.5px; flex-shrink: 0;
}

.tabbar {
  position: fixed;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  background: var(--tabbar-bg);
  backdrop-filter: blur(20px);
  border-top: 0.5px solid var(--border);
  display: flex;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  z-index: 20;
}
.tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 0;
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
}
.tab.active { color: var(--accent); }
.tab svg { width: 22px; height: 22px; }

/* ---------- Session header card ---------- */
.session-head {
  display: flex; align-items: center; gap: 10px;
}
.session-head .avatar { width: 32px; height: 32px; font-size: 12px; }
.session-head-info { flex: 1; min-width: 0; }
.session-head-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.3; }
.session-head-meta { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.session-head-score {
  font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.5px;
  color: var(--text);
}

/* ---------- Shooter tabs ---------- */
.shooter-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.shooter-tabs::-webkit-scrollbar { display: none; }
.shooter-tab {
  flex-shrink: 0;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}
.shooter-tab.active { background: var(--accent-dim); color: var(--accent); }

/* ---------- End entry ---------- */
.end-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.end-title { font-size: 14px; font-weight: 600; color: var(--text-dim); }
.end-nav { display: flex; gap: 4px; align-items: center; }
.end-nav button { width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.end-nav button:disabled { opacity: 0.3; }

.arrow-slots { display: flex; justify-content: space-between; gap: 8px; }
.arrow-slot {
  flex: 1;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px dashed #444;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
  color: var(--text-dim);
  transition: all .2s ease;
}
.arrow-slot .sub { font-size: 8px; font-weight: 600; opacity: 0.75; margin-top: 0px; }
.arrow-slot.filled { border: none; }
.arrow-slot.active { border: 1px dashed var(--accent); }

.end-summary { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); padding: 0 2px; }
.end-summary b { color: var(--text); font-weight: 700; }

/* Score pad — true WA target-face colors, the app's signature element */
.score-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.score-key {
  height: 44px;
  border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 17px;
  gap: 0px;
  transition: transform .1s ease, opacity .1s ease;
  position: relative;
}
.score-key:active { transform: scale(0.96); opacity: 0.8; }
.score-key .sub { font-size: 8px; font-weight: 600; opacity: 0.75; letter-spacing: 0.04em; text-transform: uppercase; }
.score-key.gold  { background: var(--wa-gold); color: var(--wa-gold-ink); }
.score-key.red   { background: var(--wa-red);  color: var(--wa-red-ink); }
.score-key.blue  { background: var(--wa-blue); color: var(--wa-blue-ink); }
.score-key.black { background: var(--wa-black); color: var(--wa-black-ink); border: 1px solid #555; }
.score-key.white { background: var(--wa-white); color: var(--wa-white-ink); border: 1px solid rgba(0,0,0,0.12); }
.score-key.miss  { background: var(--wa-miss); color: var(--wa-miss-ink); }

.action-row-2 {
  position: sticky; bottom: 88px; z-index: 15;
  display: grid; grid-template-columns: 1fr 2fr; gap: 10px;
  padding: 10px 0;
  background: var(--bg);
}

/* ---------- Splash overlay (end saved confirmation) ---------- */
.splash-overlay {
  position: fixed;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; height: 100%;
  background: var(--overlay-bg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 100;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.splash-overlay.active { opacity: 1; }
.splash-check {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--accent-green);
  display: flex; align-items: center; justify-content: center;
  transform: scale(0.3);
  box-shadow: 0 0 40px rgba(48,209,88,0.4);
  transition: transform 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
}
.splash-overlay.active .splash-check { transform: scale(1); }
.splash-check svg { width: 42px; height: 42px; }
.splash-title {
  font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.4px;
  color: #fff;
  margin-top: 22px;
  opacity: 0; transform: translateY(10px);
  transition: all 0.4s ease 0.15s;
}
.splash-subtitle {
  font-size: 15px; color: rgba(255,255,255,0.65); font-weight: 600; margin-top: 5px;
  opacity: 0; transform: translateY(10px);
  transition: all 0.4s ease 0.25s;
}
.splash-overlay.active .splash-title,
.splash-overlay.active .splash-subtitle { opacity: 1; transform: none; }

/* ---------- Session form ---------- */
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pill-select { display: flex; gap: 8px; }
.pill-select button {
  flex: 1; padding: 12px; border-radius: var(--radius-md);
  background: var(--surface-2);
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--text-dim);
}
.pill-select button.active { color: var(--accent); background: var(--accent-dim); }
#typePicker button[data-v="Officieel"].active { color: var(--accent-green); background: rgba(48,209,88,0.16); }
.pill-select-compact { flex-wrap: wrap; }
.pill-select-compact button {
  flex: 1 1 auto; min-width: 72px;
  padding: 8px 4px; font-size: 12px;
}

.shooter-picker { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.shooter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.shooter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-dim); color: var(--accent);
  padding: 7px 8px 7px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
}
.shooter-chip-x {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,0.15); color: inherit;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; padding-bottom: 1px;
}
.shooter-check {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: var(--radius-md);
  background: var(--surface-2);
}
.shooter-check.selected { background: var(--accent-dim); }
.checkbox {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--text-faint);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.checkbox.on { background: var(--accent); border-color: var(--accent); }

/* ---------- History ---------- */
.history-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; background: var(--surface); border-radius: var(--radius-md);
}
.history-row-left .hd { font-weight: 600; font-size: 14px; }
.history-row-left .hm { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.history-row-right { text-align: right; }
.history-total { font-weight: 800; font-size: 18px; letter-spacing: -0.3px; color: var(--text); }
.history-x { font-size: 11px; color: var(--wa-gold); font-weight: 600; }
[data-theme="light"] .history-x { color: #9C6A00; }

.empty-state { text-align: center; padding: 48px 20px; color: var(--text-dim); }
.empty-state svg { margin-bottom: 12px; opacity: 0.5; }

/* ---------- Search / autocomplete ---------- */
.no-results { text-align: center; color: var(--text-dim); font-size: 13px; padding: 18px 0; }

/* ---------- Class picker ---------- */
.class-grid { display: flex; flex-direction: column; gap: 8px; }
.class-option {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 14px; border-radius: var(--radius-md);
  background: var(--surface-2);
  text-align: left;
}
.class-option.active { background: var(--accent-dim); }
.class-option .cn { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.2px; }
.class-option .cd { font-size: 12px; color: var(--text-dim); }
.class-option.active .cd { color: var(--accent); opacity: 0.85; }

/* ---------- Admin ---------- */
.admin-header {
  display: flex; align-items: center; justify-content: space-between;
}
.admin-badge {
  font-size: 10px; font-weight: 700;
  color: var(--wa-red-text); border: 1px solid var(--wa-red-text); border-radius: 999px;
  padding: 3px 8px; text-transform: uppercase; letter-spacing: 0.06em;
}
.admin-badge.owner { background: #D4AF37; color: #1A1200; border-color: #D4AF37; }
.admin-tabs { display: flex; gap: 6px; }
.admin-tab {
  flex: 1; padding: 10px; border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
}
.admin-tab.active { color: var(--accent); background: var(--accent-dim); }

.admin-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; background: var(--surface); border-radius: var(--radius-md);
}
.admin-row-info { min-width: 0; }
.admin-row-title { font-weight: 600; font-size: 14px; }
.admin-row-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.calendar-row-today { border: 1.5px solid #EA7805; }
.calendar-row-selected { background: var(--accent-dim); }
.pr-list {
  background: var(--surface); border-radius: var(--radius-md); overflow: hidden;
}
.pr-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--surface-2);
}
.pr-row:last-child { border-bottom: none; }
.pr-row .pr-class { font-weight: 600; font-size: 13px; }
.pr-row .pr-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.pr-row .pr-empty-status { font-size: 12px; color: var(--text-dim); }
.calendar-select-bar {
  position: sticky; bottom: 88px; z-index: 15;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; margin-top: 8px;
  background: var(--surface); border-radius: var(--radius-md);
  box-shadow: var(--card-shadow), 0 4px 16px rgba(0,0,0,0.2);
  font-size: 13px; font-weight: 600; color: var(--text-dim);
}
.icon-btn {
  width: 34px; height: 34px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-dim);
}
.icon-btn.danger { color: var(--wa-red-text); }
.icon-btn svg { width: 16px; height: 16px; }

.edit-end-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.edit-end-row:last-child { border-bottom: none; }
.edit-end-label { width: 46px; font-size: 12px; color: var(--text-dim); font-weight: 600; flex-shrink: 0; }
.edit-arrow-input {
  width: 40px; text-align: center; padding: 8px 0; font-weight: 700; font-size: 14px;
}

.toast {
  position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
  background: var(--surface-2); border: 0.5px solid var(--border);
  padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 500;
  z-index: 50; animation: fadeIn .2s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* ---------- Type badges (Officieel / Vrij / Aanvraag / Beheerder) ---------- */
.type-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 8px; border-radius: 999px;
  vertical-align: middle;
}
.type-badge.official { background: #EA7805; color: #1A1200; font-weight: 800; }
.type-badge.owner { background: #D4AF37; color: #1A1200; font-weight: 800; }
.type-badge.casual { background: var(--surface-3); color: var(--text-dim); }
.type-badge.pending { background: rgba(255,69,58,0.16); color: var(--wa-red-text); }
.card-id {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; font-weight: 700;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  margin-right: 2px;
}

/* ---------- Score lijst (leaderboard) ---------- */
.season-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.season-pill {
  padding: 7px 14px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-dim);
  font-size: 12.5px; font-weight: 600;
}
.season-pill.active { background: var(--accent-dim); color: var(--accent); }
.lb-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 16px 0 4px;
  overflow: hidden;
}
.lb-header {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 16px 12px;
}
.lb-title { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.3px; }
.lb-sub { font-size: 12px; color: var(--text-dim); }
.lb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Rank/naam blijven al vast staan (position: sticky hierboven) terwijl Ronde-
   kolommen kunnen oplopen tot 10 stuks — op een telefoon past dat zelden
   allemaal, en zonder aanwijzing merkt niemand dat er zijwaarts geswiped kan
   worden (Totaal/Gem. vielen daardoor onopgemerkt buiten beeld). Deze schaduw
   verschijnt alleen zolang er nog inhoud rechts verborgen zit, en verdwijnt
   vanzelf zodra je helemaal naar rechts hebt gescrold. */
.lb-table-wrap.is-scrollable:not(.at-end) { box-shadow: inset -16px 0 12px -12px rgba(0, 0, 0, 0.45); }
[data-theme="light"] .lb-table-wrap.is-scrollable:not(.at-end) { box-shadow: inset -16px 0 12px -12px rgba(0, 0, 0, 0.18); }
.lb-table { border-collapse: collapse; width: 100%; white-space: nowrap; }
.lb-table th, .lb-table td {
  padding: 8px 10px; font-size: 12.5px; text-align: center;
  border-bottom: 1px solid var(--border);
}
.lb-table thead th { color: var(--text-dim); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.lb-table tbody tr:last-child td { border-bottom: none; }
.lb-rank {
  position: sticky; left: 0; background: var(--surface);
  font-weight: 700; color: var(--text-dim); width: 34px;
  padding-right: 4px;
}
.lb-rank.gold { color: var(--wa-gold); }
[data-theme="light"] .lb-rank.gold { color: #9C6A00; }
.lb-rank.silver { color: #d0d0d5; }
.lb-rank.bronze { color: #c98a4b; }
.lb-name {
  position: sticky; left: 34px; background: var(--surface);
  text-align: left; font-weight: 600; padding-left: 2px; min-width: 110px;
  display: flex; align-items: center; gap: 6px;
}
.lb-with-avatars .lb-name { min-width: 140px; }
.lb-name .avatar { flex-shrink: 0; }
.lb-total { font-weight: 800; color: var(--wa-red-text); }
.lb-round-btn { color: inherit; font: inherit; padding: 0; }
.lb-name-btn {
  display: flex; align-items: center; gap: 6px;
  color: inherit; font: inherit; font-weight: 600; text-align: left; width: 100%;
  padding: 0; margin: 0;
}
.lb-avg { color: var(--text-dim); }

/* ---------- Full scorecard (history detail) ---------- */
.sc-info-card { display: flex; flex-direction: column; gap: 12px; }
.sc-info-header { display: flex; align-items: center; justify-content: space-between; }
.sc-info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px;
}
.sc-info-grid > div { display: flex; flex-direction: column; gap: 2px; }
.sc-info-label { font-size: 10.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.sc-info-value { font-size: 14px; font-weight: 600; }

.sc-stat-row { display: flex; gap: 8px; }
.sc-stat {
  flex: 1; background: var(--surface); border-radius: var(--radius-md);
  padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.sc-stat-val { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.3px; }
.sc-stat-label { font-size: 9.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; }

/* Compact scorecard table — sized to fit a mobile screen with no horizontal scroll */
.sc-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.sc-table th, .sc-table td {
  padding: 5px 2px;
  text-align: center;
  font-size: 11.5px;
  border-bottom: 1px solid var(--border);
}
.sc-table thead th {
  color: var(--text-dim); font-weight: 600; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.02em;
  border-bottom: 1px solid var(--border);
}
.sc-table tbody tr:last-child td { border-bottom: none; }
.sc-live-row { cursor: pointer; }
.sc-live-row:active { background: var(--surface-2); }
.sc-row-locked { cursor: default; opacity: 0.75; }

/* ---------- Lock icon & locked state ---------- */
.lock-icon {
  width: 13px; height: 13px;
  display: inline-block; vertical-align: middle;
  color: var(--wa-gold);
  margin-left: 2px;
}
[data-theme="light"] .lock-icon { color: #9C6A00; }
.field-label-lock { color: var(--text-dim); width: 12px; height: 12px; }
.locked-card-icon { width: 32px; height: 32px; color: var(--wa-gold); margin: 4px auto 10px; display: block; }
[data-theme="light"] .locked-card-icon { color: #9C6A00; }
.locked-card {
  align-items: center; text-align: center;
  padding: 24px 20px;
}
.locked-card-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.locked-card-sub { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

.btn-lock-icon {
  width: 15px; height: 15px;
  display: inline-block; vertical-align: -2px;
  color: currentColor;
  margin-left: 4px;
}

/* ---------- Final-round lock animation ---------- */
.lock-badge-circle {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--wa-gold);
  display: flex; align-items: center; justify-content: center;
  transform: scale(0.3);
  box-shadow: 0 0 40px rgba(255,214,10,0.35);
  transition: transform 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
}
.splash-overlay.active .lock-badge-circle { transform: scale(1); }
.lock-badge-circle svg { width: 44px; height: 44px; overflow: visible; }
.lock-shackle {
  transform-origin: 16px 11px;
  transform: rotate(-30deg) translate(1px, -2px);
  transition: transform 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.2s;
}
.splash-overlay.active .lock-shackle { transform: rotate(0deg) translate(0, 0); }

/* ---------- Confirmation modal ---------- */
.confirm-overlay {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; height: 100%;
  background: var(--overlay-bg);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: 120;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.confirm-overlay.active { opacity: 1; pointer-events: auto; }
.confirm-card {
  width: 100%; max-width: 340px;
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 22px 20px;
  transform: scale(0.92); opacity: 0;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), opacity 0.2s ease;
}
.confirm-overlay.active .confirm-card { transform: scale(1); opacity: 1; }
.confirm-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.confirm-message { font-size: 14px; color: var(--text-dim); line-height: 1.5; margin-bottom: 18px; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qr-wrap {
  background: #fff; border-radius: var(--radius-md);
  padding: 16px; display: inline-flex; margin: 4px 0 14px;
}
.qr-wrap img { display: block; width: 100%; max-width: 240px; height: auto; }

/* ---------- Admin action sheet ---------- */
.action-sheet-list { display: flex; flex-direction: column; gap: 6px; }
.action-sheet-option {
  width: 100%; text-align: left;
  padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--surface-2); color: var(--text);
  font-size: 14px; font-weight: 500;
}
.action-sheet-option:active { background: var(--surface-3); }
.action-sheet-option.danger { color: var(--wa-red-text); }

/* ---------- Active/inactive status dot ---------- */
.status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.status-dot.on { background: var(--accent-green); box-shadow: 0 0 0 2px rgba(48,209,88,0.2); }
.status-dot.off { background: var(--text-faint); }
.sc-table .sc-rd { color: var(--text-dim); font-weight: 700; font-size: 11px; }
.sc-table th:first-child, .sc-table td.sc-rd { width: 22px; }
.sc-table th:nth-last-child(2), .sc-table th:last-child { width: 15%; }
.sc-arrow-cell {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; max-width: 44px;
  padding: 3px 2px; border-radius: 5px;
  font-size: 10px; font-weight: 700;
  white-space: nowrap;
  line-height: 1.15;
}

/* ---------- Final-end submit summary ---------- */
.submit-summary { text-align: center; }
.submit-summary-end {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface-2); border-radius: var(--radius-md); padding: 10px 12px; margin: 12px 0 14px;
}
.submit-summary-label { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; }
.submit-summary-chips { display: flex; gap: 6px; }
.submit-summary-endpts { font-weight: 800; font-size: 16px; }
.submit-summary-total { font-family: var(--font-display); font-size: 44px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.submit-summary-total span { font-size: 18px; color: var(--text-dim); font-weight: 700; letter-spacing: 0; }
.submit-summary-sub { font-size: 13px; color: var(--text-dim); margin: 6px 0 12px; }
.field:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- Official scores: bar chart ---------- */
.bar-chart { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; }
.bar-plot {
  position: relative; height: 150px; display: flex; align-items: flex-end; gap: 6px;
  border-bottom: 1px solid var(--surface-2);
}
.bar-chart-dense .bar-plot, .bar-chart-dense .bar-dates { gap: 2px; }
.bar-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; min-width: 0; }
.bar { width: 100%; max-width: 38px; background: var(--accent); opacity: 0.45; border-radius: 6px 6px 2px 2px; }
.bar-latest { opacity: 1; }
.bar-chart-dense .bar { border-radius: 3px 3px 1px 1px; }
.bar-val {
  position: absolute; left: 50%; transform: translate(-50%, -4px);
  font-size: 11px; font-weight: 800; white-space: nowrap; color: var(--text);
}
.bar-avg {
  position: absolute; left: 0; right: 0; height: 0; pointer-events: none;
  border-top: 1.5px dashed var(--wa-gold);
}
.bar-avg span {
  position: absolute; right: 0; top: -17px; font-size: 10.5px; font-weight: 700;
  color: var(--wa-gold); background: var(--surface); padding: 0 4px; border-radius: 4px;
}
.bar-dates { display: flex; gap: 6px; }
.bar-date { flex: 1; min-width: 0; text-align: center; font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }
.bar-chart-dense .bar-date { overflow: visible; }
.bar-hidden { visibility: hidden; }
[data-theme="light"] .bar-avg { border-top-color: #9C6A00; }
[data-theme="light"] .bar-avg span { color: #9C6A00; }
.bar-chart-dense .bar-date:first-child { text-align: left; }
.bar-chart-dense .bar-date:last-child { text-align: right; }

/* ---------- Offline queue: badge on the Home tab ---------- */
.tab { position: relative; }
.tab-sync-badge {
  position: absolute; top: 0; left: calc(50% + 6px);
  display: inline-flex; align-items: center; gap: 1px;
  background: #EA7805; color: #1A1200; font-size: 10.5px; font-weight: 800;
  padding: 1px 6px 1px 4px; border-radius: 999px; line-height: 1.5;
  box-shadow: 0 0 0 2px var(--surface); cursor: pointer;
}
.tab-sync-badge[hidden] { display: none; }
.tab-sync-badge.offline { background: var(--surface-2); color: var(--text); box-shadow: 0 0 0 2px var(--surface), inset 0 0 0 1px #EA7805; }
.tab-sync-badge.login-needed { background: var(--wa-red-text); color: #fff; }

/* ---------- Send status overlay ---------- */
.sync-summary { background: var(--surface-2); border-radius: var(--radius-md); padding: 10px 12px; margin-top: 10px; font-size: 13.5px; }
.sync-num { font-weight: 800; font-size: 16px; }
.sync-conn { color: var(--text-dim); font-size: 12.5px; margin-top: 2px; }
.sync-log { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.sync-log-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 5px 8px; border-radius: 6px; background: var(--surface-2); }
.sync-log-row span:last-child { color: var(--text-dim); text-align: right; }
.sync-log-bad span:last-child { color: var(--wa-red-text); font-weight: 700; }

/* ---------- Quick end-saved splash (the final-card animation keeps its pace) ---------- */
.splash-quick { transition: opacity 0.18s ease; }
.splash-quick .splash-check { transition: transform 0.28s cubic-bezier(0.175,0.885,0.32,1.275); }
.splash-quick .splash-title { transition: all 0.2s ease; }
.splash-quick .splash-subtitle { transition: all 0.2s ease 0.05s; }

/* ---------- Scoring header: total + highest still reachable ---------- */
.session-head-scorebox { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.session-head-max { font-size: 11.5px; font-weight: 700; color: var(--text-dim); margin-top: 1px; white-space: nowrap; }

/* ---------- Settings toggles ---------- */
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--surface-2); cursor: pointer; }
.setting-row:last-child { border-bottom: none; }
.setting-title { display: block; font-weight: 600; font-size: 13.5px; }
.setting-sub { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.setting-switch {
  appearance: none; -webkit-appearance: none; flex-shrink: 0;
  width: 46px; height: 28px; border-radius: 999px; background: var(--surface-2);
  position: relative; cursor: pointer; transition: background 0.2s ease;
}
.setting-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.setting-switch:checked { background: var(--accent-green); }
.setting-switch:checked::after { transform: translateX(18px); }
.setting-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sync-warning {
  background: rgba(234, 120, 5, 0.12); border: 1px solid #EA7805; color: var(--text);
  font-size: 12.5px; padding: 8px 10px; border-radius: var(--radius-sm); margin-top: 8px; text-align: left;
}