/* ═══════════════════════════════════════════════════
   FIZZEEK UX ENHANCEMENTS
   Shared across all pages — page transitions, scroll
   reveals, gradient animations, ripple effects, dock
   active indicator
   ═══════════════════════════════════════════════════ */

/* Round 116: kill browser-native zoom gestures so the PWA feels
   native. Viewport meta blocks pinch-zoom; touch-action:manipulation
   on the root blocks double-tap-zoom and removes the legacy 300ms
   tap delay. Per-element rules in mm-all.css (pan-x carousel,
   pan-y scroll containers) are more specific so they keep working. */
html, body{
  touch-action:manipulation;
}

/* ═══ PAGE TRANSITIONS ═══ */
/* R360: body fade-in removed. R353 changed `animation: pageEnter` to a
   `transition: opacity` to shrink the touch-arbitration window from
   "forever" to 350ms, but iOS Safari still composites the body for the
   transition's duration and absorbs the first 1-3 touch flicks. On a
   large-bundle page (mm-all.js ~39k lines parses ~500ms on a phone)
   that window stretches to ~850ms — the user sees "takes a few scrolls
   to actually scroll." Removing the fade eliminates the compositing
   window entirely. The `page-exit` rule below (outgoing animation) is
   unaffected. The `prefers-reduced-motion` no-fade variant has been
   the shipping default for reduced-motion users since R353, so the
   no-fade visual is already validated. `fizzeek-ux.js:141` still adds
   `.fz-loaded` to the body — left as a harmless no-op since nothing
   else reads the class. */
body.page-exit{
  animation:pageExit 0.22s cubic-bezier(0.4,0,1,1) both !important;
}
/* Round 113: drop translateY from page transitions — switching
   between sibling pages (Merch ↔ Trainers, etc.) caused a visible
   vertical shake because the content sits in the same spot on
   both pages. Pure opacity cross-fade reads as instant. */
@keyframes pageExit{
  from{opacity:1;}
  to{opacity:0;}
}

/* ═══ SCROLL-TRIGGERED REVEALS ═══ */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.5s cubic-bezier(0.16,1,0.3,1),
             transform 0.5s cubic-bezier(0.16,1,0.3,1);
  will-change:opacity,transform;
}
.reveal.revealed{
  opacity:1;
  transform:translateY(0);
}
/* Stagger children inside a reveal-group */
.reveal-group .reveal:nth-child(1){transition-delay:0s;}
.reveal-group .reveal:nth-child(2){transition-delay:0.06s;}
.reveal-group .reveal:nth-child(3){transition-delay:0.12s;}
.reveal-group .reveal:nth-child(4){transition-delay:0.18s;}
.reveal-group .reveal:nth-child(5){transition-delay:0.24s;}
.reveal-group .reveal:nth-child(6){transition-delay:0.30s;}
.reveal-group .reveal:nth-child(7){transition-delay:0.36s;}
.reveal-group .reveal:nth-child(8){transition-delay:0.42s;}

/* ═══ ANIMATED GRADIENT BACKGROUND ═══ */
.ambient-gradient{
  position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.ambient-gradient::before{
  content:'';
  position:absolute;
  top:-40%;left:-40%;
  width:180%;height:180%;
  background:
    radial-gradient(ellipse at 25% 35%, rgba(217,184,120,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 65%, rgba(191,163,77,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(230,209,163,0.02) 0%, transparent 60%);
  background-size:200% 200%;
  animation:gradientShift 10s ease-in-out infinite alternate,
            ambientDrift 20s ease-in-out infinite alternate;
}
@keyframes gradientShift{
  0%{background-position:0% 0%;}
  50%{background-position:100% 50%;}
  100%{background-position:50% 100%;}
}
body.light-mode .ambient-gradient::before{
  background:
    radial-gradient(ellipse at 25% 35%, rgba(139,122,94,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 65%, rgba(107,93,69,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(160,140,100,0.03) 0%, transparent 60%);
  background-size:200% 200%;
}

/* ═══ 3D CARD TILT ═══ */
.tilt-card{
  transform-style:preserve-3d;
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1),
             box-shadow 0.3s ease;
}
.tilt-card:hover{
  box-shadow:
    0 20px 60px rgba(0,0,0,0.3),
    0 0 40px rgba(217,184,120,0.06);
}
body.light-mode .tilt-card:hover{
  box-shadow:
    0 12px 40px rgba(0,0,0,0.08),
    0 0 30px rgba(139,122,94,0.04);
}

/* ═══ BUTTON RIPPLE ═══ */
.ripple-host{
  position:relative;
  overflow:hidden;
}
.ripple{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle, rgba(230,209,163,0.25) 0%, rgba(230,209,163,0) 70%);
  transform:scale(0);
  animation:rippleExpand 0.5s ease-out forwards;
  pointer-events:none;
  z-index:10;
}
body.light-mode .ripple{
  background:radial-gradient(circle, rgba(139,122,94,0.15) 0%, rgba(139,122,94,0) 70%);
}
@keyframes rippleExpand{
  to{transform:scale(2.5);opacity:0;}
}

/* ═══ DOCK ACTIVE INDICATOR ═══ */
/* Round 83 (Apr 30): ensure the .dock-btn.dock-active::after dot
   positions under the icon by establishing the button as the
   containing block. Without this the dot fell back to body. */
.dock-btn{ position:relative; }
.dock-btn.dock-active svg{
  color:#D9B878 !important;
  filter:drop-shadow(0 0 8px rgba(217,184,120,0.50));
}
.dock-btn.dock-active .dock-label{
  color:#D9B878 !important;
  font-weight:800 !important;
}
.dock-btn.dock-active::after{
  content:'';
  position:absolute;
  bottom:2px;left:50%;
  width:6px;height:6px;
  border-radius:50%;
  background:#D9B878;
  transform:translateX(-50%);
  box-shadow:0 0 10px rgba(217,184,120,0.65), 0 0 4px rgba(217,184,120,0.85);
  animation:dotPulse 2s ease-in-out infinite alternate;
}
@keyframes dotPulse{
  0%{opacity:0.5;box-shadow:0 0 4px rgba(217,184,120,0.2);}
  100%{opacity:1;box-shadow:0 0 8px rgba(217,184,120,0.5);}
}
/* Round 92 (Apr 30): light-mode active dock entry switches from
   gold (rgba(139,122,94,*) which faded against white) to bold black
   so the current page is clearly indicated against linen. Dark mode
   keeps the premium gold treatment. */
body.light-mode .dock-btn.dock-active svg{
  color:#000 !important;
  filter:none !important;
}
body.light-mode .dock-btn.dock-active .dock-label{
  color:#000 !important;
  font-weight:900 !important;
}
body.light-mode .dock-btn.dock-active::after{
  background:#000 !important;
  box-shadow:0 0 6px rgba(0,0,0,0.25) !important;
}

/* ═══ REDUCED MOTION ═══ */
@media(prefers-reduced-motion:reduce){
  body,body.page-exit{animation:none !important;}
  .reveal{opacity:1;transform:none;transition:none;}
  .ambient-gradient::before{animation:none;}
  .ripple{animation:none;}
  .dock-btn.dock-active::after{animation:none;}
}

/* ═══════════════════════════════════════════════════
   TOUCH TARGET SAFETY NET
   Apple HIG minimum 44pt, Material Design minimum 48dp.
   Targets common button classes used across all pages.
   Elements that MUST be visually smaller should expand
   the tap area via an ::after pseudo-element instead of
   overriding these rules.
   ═══════════════════════════════════════════════════ */
.back-btn,
.dock-btn,
.notify-btn,
.agree-btn,
.top-brand + button,
button.header-rank-icon,
button[data-action]:not(.cal-compact-row button):not(.phase-dropdown *){
  min-width: 44px;
  min-height: 44px;
}

/* Ensure anchors that look like buttons (back arrows, dock items) also hit 44 */
a.back-btn,
a.dock-btn{
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════
   Apr 23 — Unified floating back button
   ═══════════════════════════════════════════════════
   Every page (index, muscle-memory, playlists, workouts,
   calendar, about, etc.) shares the same back-button design:
   glass-circle fixed at top-left, safe-area-aware, visible
   while scrolling. Replaces the old per-page transparent
   anchor that blended into the header until pressed.
   Selectors cover both `.back-btn` (most pages) and
   `#backArrow` / `.back` (muscle-memory uses these). */
.back-btn,
a.back-btn,
#backArrow,
#backArrow.back{
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
  left: 12px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
  backdrop-filter: blur(12px) saturate(1.4) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  z-index: 9999 !important;
  padding: 0 !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}
.back-btn:hover,
.back-btn:focus-visible,
#backArrow:hover,
#backArrow:focus-visible{
  background: rgba(255, 255, 255, 0.14) !important;
}
.back-btn:active,
#backArrow:active{
  transform: scale(0.92) !important;
  background: rgba(255, 255, 255, 0.18) !important;
}
.back-btn svg,
#backArrow svg{
  stroke: #fff !important;
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2.4 !important;
}
/* Light mode — glass with dark stroke for legibility on white bg. */
body.light-mode .back-btn,
body.light-mode a.back-btn,
body.light-mode #backArrow,
html.light-mode .back-btn,
html.light-mode a.back-btn,
html.light-mode #backArrow{
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
}
body.light-mode .back-btn svg,
body.light-mode #backArrow svg,
html.light-mode .back-btn svg,
html.light-mode #backArrow svg{
  stroke: #000 !important;
}

/* ═══════════════════════════════════════════════════
   Round 93 (Apr 30) — Unified centered-pill dock
   ═══════════════════════════════════════════════════
   Replaces the Apr-23 full-width flat-bar override.
   Every legacy `.bottom-menu-bar` / `#bottomMenuPill`
   dock now renders identically to the modern `.fz-dock`
   pill on home.html / workouts.html: centered, rounded,
   panel-tinted, soft shadow. Same visual on every page;
   muscle-memory keeps its own button set but inherits
   this same shape and color. */
.bottom-menu-bar{
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 520 !important;
  display: flex !important;
  justify-content: center !important;
  padding: 0 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  pointer-events: none !important;
  background: transparent !important;
  border-top: none !important;
}
/* Round 135: match .fz-dock__pill (fizzeek-components.css:404) exactly
   so legacy and modern docks are visually identical. */
#bottomMenuPill{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 6px 8px !important;
  width: auto !important;
  max-width: calc(100vw - 24px) !important;
  margin: 0 !important;
  background: var(--panel) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--depth-2), var(--depth-edge) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  animation: none !important;
}
#bottomMenuPill .dock-btn{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: 54px !important;
  min-height: 48px !important;
  padding: 8px 10px !important;
  border-radius: var(--radius-md) !important;
  gap: 3px !important;
  background: none !important;
  border: none !important;
  color: var(--text-dim) !important;
}
#bottomMenuPill .dock-btn svg{
  width: 20px !important;
  height: 20px !important;
  color: currentColor !important;
}
#bottomMenuPill .dock-btn .dock-label{
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: currentColor !important;
  white-space: nowrap !important;
}
#bottomMenuPill .dock-btn.dock-active{
  color: var(--text) !important;
}
#bottomMenuPill .dock-btn.dock-active .dock-label{
  font-weight: 900 !important;
}
/* Light mode — white pill, dark hairline border, soft shadow. */
body.light-mode #bottomMenuPill,
html.light-mode #bottomMenuPill{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   ROUND 136 (May 2) — Floating Settings gear (top-right)
   Replaces the Settings entry in the bottom dock. Frees a dock slot
   for Playlists. Auto-injected by fizzeek-boot.js on every page.
   ════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
   ROUND 154 (May 2) — Dock placement parity. Workouts.html had a
   Round 89 inline override forcing the dock past its slide-in
   animation initial state (`opacity:0; transform:translateY(24px)`).
   Other pages didn't, so when the animation glitched (cache hiccup,
   reduced-motion, animation forwards lost) their dock sat 24px off
   the bottom edge — visibly higher than workouts'. Promote the
   override to fizzeek-ux.css so EVERY page gets it.
   Also pin bottom + safe-area padding explicitly in case any page
   has stray rules trying to nudge the dock up.
   ════════════════════════════════════════════════════════════════════════ */
.fz-dock,
.fz-dock.fz-anim-dock{
  opacity:1 !important;
  transform:none !important;
  bottom:0 !important;
  /* Round 180: padding now defined below at line ~459-467 — DO NOT
     re-set padding here. The R154 padding (0 12px calc(10+safe)) was
     for the old floating pill; R179/R180 made it a full-width bar. */
}

.fz-floating-gear{
  position:fixed;
  top:max(12px, calc(env(safe-area-inset-top, 0px) + 8px));
  right:12px;
  z-index:600;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform 0.12s ease, background 0.15s ease;
  padding:0;
}
.fz-floating-gear:active{ transform:scale(0.92); }
.fz-floating-gear svg{
  width:20px;
  height:20px;
  color:rgba(255,255,255,0.85);
  stroke:currentColor;
  fill:none;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.fz-floating-gear:hover svg{ color:#fff; }
.fz-floating-gear .gear-light{ display:none; }
body.light-mode .fz-floating-gear{
  background:rgba(0,0,0,0.04);
  border:1px solid rgba(0,0,0,0.10);
  box-shadow:none;
}
body.light-mode .fz-floating-gear svg{ color:rgba(0,0,0,0.85); }
body.light-mode .fz-floating-gear .gear-dark{ display:none; }
body.light-mode .fz-floating-gear .gear-light{ display:block; }

/* ════════════════════════════════════════════════════════════════════════
   ROUND 139 (May 2) — Global settings-icon visibility rules
   The .settings-icon-dark / .settings-icon-light SVG pair pattern is used
   on every dock Settings button + the floating gear. Each page used to
   declare these rules inline; muscle-memory.html's restored Settings
   entry didn't have them, so BOTH icons rendered stacked. Centralized
   here so the pattern works automatically anywhere it appears.
   ════════════════════════════════════════════════════════════════════════ */
.settings-icon-light{ display: none; }
body.light-mode .settings-icon-dark{ display: none; }
body.light-mode .settings-icon-light{ display: block; }

/* ════════════════════════════════════════════════════════════════════════
   ROUND 141 (May 2) — Hide all top-left back buttons
   The unified bottom dock now indicates location; the back button is no
   longer needed. js/fizzeek-boot.js' click handler stays in place
   (harmless — selectors will simply never match).
   ════════════════════════════════════════════════════════════════════════ */
header .back,
header #backArrow,
.back-btn,
.fz-app-header__back{
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   ROUND 150 (May 2) — Mirror .fz-dock styles here so muscle-memory.html
   (which doesn't link fizzeek-components.css) renders the dock correctly
   after Round 149's markup conversion. Identical values to
   fizzeek-components.css:395-469 — no visual difference on pages that
   link both files.
   ════════════════════════════════════════════════════════════════════════ */
.fz-dock,
body .fz-dock,
.fz-dock.fz-anim-dock,
body .fz-dock.fz-anim-dock{
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 520 !important;
  display: flex !important;
  justify-content: center !important;
  padding: 6px 0 max(2px, calc(env(safe-area-inset-bottom) - 30px)) !important;
  pointer-events: auto !important;
  background-color: #000 !important;
  background-image: none !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
}
body.light-mode .fz-dock,
html body.light-mode .fz-dock,
body.light-mode .fz-dock.fz-anim-dock,
html body.light-mode .fz-dock.fz-anim-dock{
  background-color: #fff !important;
  border-top-color: rgba(0,0,0,0.10) !important;
}
.fz-dock__pill,
body .fz-dock__pill{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 0 !important;
  width: 100% !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  pointer-events: auto !important;
  box-shadow: none !important;
}
.fz-dock__btn{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 10px;
  min-width: 54px;
  min-height: 48px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease, background 160ms ease, transform 0.1s ease;
}
.fz-dock__btn svg{ width: 20px; height: 20px; color: currentColor; }
.fz-dock__btn:hover, .fz-dock__btn:focus-visible{ color: var(--text); }
.fz-dock__btn:active{ transform: scale(0.94); }
.fz-dock__label{
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: currentColor;
  white-space: nowrap;
}
.fz-dock__btn.is-active{ color: var(--text); }
.fz-dock__btn.is-active .fz-dock__label{ font-weight: 900; }
.fz-dock__btn.is-active::after{
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text);
}

/* ════════════════════════════════════════════════════════════════════════
   ROUND 160 (May 2) — Mirror .fz-settings-popup styles from
   fizzeek-components.css. Muscle-memory.html does NOT link
   fizzeek-components.css, so the boot.js openSettingsPopup() builds
   the bottom-sheet markup but it lands in the page completely
   unstyled (no position:fixed, no transition, invisible). After
   Round 158 made the gear fall through to openSettingsPopup on
   muscle-memory, the popup was technically "opening" but had no
   visual presence.

   Same fix as Round 150 (mirrored .fz-dock styles into this file).
   Identical values to fizzeek-components.css:729-914 — no visual
   diff on pages that link both.
   ════════════════════════════════════════════════════════════════════════ */
.fz-settings-overlay{
  position: fixed;
  inset: 0;
  /* R219: opaque backdrop so page underneath doesn't show through */
  background: rgba(0,0,0,0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  z-index: 9998;
  transition: opacity 0.22s ease;
}
.fz-settings-overlay.open{
  opacity: 1;
  pointer-events: auto;
}
.fz-settings-popup{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: var(--panel, #161311);
  border-top: 1px solid var(--panel-border, rgba(255,255,255,0.10));
  border-radius: 22px 22px 0 0;
  padding: 14px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 40px rgba(0,0,0,0.45);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.16,1,0.3,1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fz-settings-popup.open{ transform: translateY(0); }
body.light-mode .fz-settings-overlay{ background: rgba(255,255,255,0.78); }
body.light-mode .fz-settings-popup{
  background: #fff;
  border-top-color: rgba(0,0,0,0.08);
  box-shadow: 0 -12px 40px rgba(0,0,0,0.10);
}
.fz-settings-popup::before{
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  margin: 0 auto 10px;
}
body.light-mode .fz-settings-popup::before{ background: rgba(0,0,0,0.18); }
.fz-settings-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 6px;
}
body.light-mode .fz-settings-header{ border-bottom-color: rgba(0,0,0,0.08); }
.fz-settings-title{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text, #fff);
}
.fz-settings-close{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.fz-settings-close:active{ transform: scale(0.92); background: rgba(255,255,255,0.14); }
body.light-mode .fz-settings-close{
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.85);
}
.fz-settings-row{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, transform 0.1s ease;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.fz-settings-row:active{ transform: scale(0.99); background: rgba(255,255,255,0.07); }
body.light-mode .fz-settings-row{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
body.light-mode .fz-settings-row:active{ background: rgba(0,0,0,0.03); }
.fz-settings-icon{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: rgba(255,255,255,0.75);
}
body.light-mode .fz-settings-icon{ color: rgba(0,0,0,0.65); }
.fz-settings-label{
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text, #fff);
}
body.light-mode .fz-settings-label{ color: #000; }
.fz-settings-row--danger .fz-settings-label{ color: #ef4444; }
.fz-settings-row--danger .fz-settings-icon{ color: #ef4444; }
body.light-mode .fz-settings-row--danger .fz-settings-label{ color: #dc2626; }
body.light-mode .fz-settings-row--danger .fz-settings-icon{ color: #dc2626; }
.fz-settings-chevron{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: rgba(255,255,255,0.40);
}
body.light-mode .fz-settings-chevron{ color: rgba(0,0,0,0.40); }
.fz-settings-row--danger .fz-settings-chevron{ color: #ef4444; }
body.light-mode .fz-settings-row--danger .fz-settings-chevron{ color: #dc2626; }
.fz-settings-toggle{
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.fz-settings-toggle.is-light{
  background: linear-gradient(135deg, #D9B878, #BFA34D);
}
.fz-settings-toggle-thumb{
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.30);
  transition: transform 0.22s cubic-bezier(0.16,1,0.3,1);
}
.fz-settings-toggle.is-light .fz-settings-toggle-thumb{
  transform: translateX(20px);
}
body.light-mode .fz-settings-toggle{ background: rgba(0,0,0,0.10); }
body.light-mode .fz-settings-toggle.is-light{
  background: linear-gradient(135deg, #8B6A14, #6B5210);
}