/* PVL Respiration — styles.css */
*, *::before, *::after { box-sizing: border-box; }

:root{
  --text: #111;
  --page: #f7f7f7;

  --cardbg: rgba(255,255,255,.96);

  --panel: rgba(0,0,0,.06);
  --border: rgba(0,0,0,.18);

  --past: rgba(0,170,255,.95);
  --future: rgba(255,170,0,.95);
  --canvasbg: rgba(0,0,0,.03);

  --fieldbg: rgba(255,255,255,.92);
  --fieldtext: #111;

   --link: rgba(0,120,255,.95);

  --accent: rgba(0,120,255,.95);
  --muted: rgba(0,0,0,.70);
  --danger: rgba(220,60,60,.95);
  --dangerText: #fff;
}


[data-theme="dark"]{
  --text: #f2f2f2;
  --page: #0f1115;

  --cardbg: rgba(20,24,34,.98);

  --panel: rgba(255,255,255,.07);
  --border: rgba(255,255,255,.20);
  --canvasbg: rgba(255,255,255,.045);

  --fieldbg: rgba(20,24,34,.95);
  --fieldtext: #f2f2f2;

   --link: rgba(120,190,255,.95);

  --accent: rgba(120,190,255,.95);
  --muted: rgba(255,255,255,.72);
  --danger: rgba(255,90,90,.95);
  --dangerText: #111;
}


body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--page);
  color: var(--text);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:16px;
}

.wrap{
  width:min(1100px, 96vw);
  max-width: 100%;
}

.header{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background: var(--panel);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
}

.header h1{
  margin:0;
  font-size:18px;
  letter-spacing:.2px;
}
.header .sub{
  font-size:12.5px;
  opacity:.85;
  line-height:1.25;
  max-width:100%;
  overflow-wrap:anywhere;
}

.controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:end;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background: var(--panel);
  width:100%;
  min-width:0;
  overflow:hidden;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex: 1 1 240px;
  min-width:0;
  max-width:100%;
}

.field.wide{
  flex: 2 1 320px;
  min-width:0;
  max-width:100%;
}

.field.compact{
  flex: 1 1 220px;
}

.field.mini{
  flex: 1 1 140px;
}

label{ font-size:12px; opacity:.85; }

select, input{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background: var(--fieldbg);
  color: var(--fieldtext);
  outline:none;
  width:100%;
  max-width:100%;
  min-width:0;
}

select option, select optgroup{
  background: var(--fieldbg);
  color: var(--fieldtext);
}

.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:end; }

.btns{ display:flex; gap:10px; flex-wrap:wrap; }
button{
  padding:9px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background: transparent;
  cursor:pointer;
  color: inherit;
}
button:disabled{ opacity:.5; cursor:not-allowed; }

button.ghost{
  background: var(--fieldbg);
  color: var(--fieldtext);
}
button.ghost:hover{ filter: brightness(1.03); }

.bar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background: var(--panel);
  font-size:13px;
  line-height:1.35;
  width:100%;
}

.barLeft, .barRight{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

.checkline{ display:flex; gap:8px; align-items:center; }
.checkline input{ width:auto; }

.rangeline{ display:flex; gap:8px; align-items:center; }
.rangeline input[type="range"]{ width: 140px; padding:0; }

.inline{ display:flex; gap:8px; align-items:center; }
.inline select{ width:auto; }

.safety, .info{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background: var(--panel);
  width:100%;
  font-size:13px;
  line-height:1.35;
}
.safety{ font-size:12.5px; opacity:.92; }
.info b{ font-size:14px; }

canvas{
  width:100%;
  height:310px;
  border:1px solid var(--border);
  border-radius:12px;
  background: var(--canvasbg);
  display:block;
}

.hud{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  opacity:.92;
  font-size:14px;
  margin-top:10px;
  text-align:center;
}
.hud > div:first-child{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:10px;
}
.hud b{ font-size:16px; }
.note{ font-size:12px; opacity:.75; }

/* Preparation countdown (10 seconds before start): make it visually obvious */
body.pvl-preparing #count,
body.pvl-preparing #stickyCount,
body.pvl-preparing #focusRemainLine{
  color: var(--danger);
  font-weight: 800;
}
body.pvl-preparing #phase,
body.pvl-preparing #stickyPhase,
body.pvl-preparing #focusStepLine{
  color: var(--danger);
}

.footer{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background: var(--panel);
  font-size:12.5px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  width:100%;
}
.footer a{
  color: var(--link);
  text-decoration:none;
  border-bottom: 1px solid rgba(127,127,127,.35);
}
.footer a:hover{ text-decoration:underline; }

/* Version line (inside footer) */
.versionBadge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  opacity:.85;
}
.versionBadge b{ font-variant-numeric: tabular-nums; }


/* === Sticky controls (exercise mode) === */
.stickyControls{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 9998;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 85%, var(--page));
  backdrop-filter: blur(8px);
grid-template-columns: auto 1fr auto;
}

.stickyControls .stickyBtn{
  border: 1px solid var(--border);
  background: var(--fieldbg);
  color: var(--fieldtext);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 650;
  cursor: pointer;
  min-width: 72px;
}

/* Make STOP clearly visible (soft but unambiguous) */
body[data-page="exercises"] #reset,
.stickyControls .stickyStop{
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
  background: color-mix(in srgb, var(--danger) 12%, var(--fieldbg));
  font-weight: 850;
}

.stickyControls .stickyBtn:disabled{ opacity: .55; cursor: default; }

.stickyControls .stickyMid{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  flex: 1 1 auto;
}

.stickyControls .stickyHud{
  text-align:center;
  line-height: 1.15;
  font-size: 13px;
  opacity: .92;
  min-width: 150px;
}
.stickyControls .stickyHud b{ font-size: 14px; }

.stickyControls .stickyAudio{
  display:flex;
  align-items:center;
  gap: 8px;
  user-select:none;
  border: 1px solid var(--border);
  background: var(--fieldbg);
  color: var(--fieldtext);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 650;
  min-width: 86px;
  justify-content:center;
}

.stickyControls .stickyAudio input{ transform: scale(1.15); }

/* Exercise focus mode: hide setup UI until user taps the graph */
body.pvl-exercise-on:not(.pvl-show-ui)[data-page="exercises"] .stickyControls{ display:grid !important; }
body.pvl-exercise-on.pvl-show-ui[data-page="exercises"] .stickyControls{ display:none !important; }
body.pvl-exercise-on:not(.pvl-show-ui)[data-page="exercises"]{
  padding-bottom: calc(12px + var(--pvl-sticky-h) + env(safe-area-inset-bottom));
  /* Focus mode should be a full-screen player: prevent accidental vertical scrolling
     that can hide the top info overlay on phones (ex: Samsung S20 portrait). */
  overflow: hidden;
}
body.pvl-exercise-on:not(.pvl-show-ui)[data-page="exercises"] #tabBar{ display:none !important; }




/* v83: Focus layout — canvas fills between top overlay and bottom sticky */
:root{
  --pvl-sticky-h: 92px;
  /* Distance (in px) from the TOP of the viewport to the BOTTOM of the focus overlay */
  --pvl-focus-bottom: 72px;
  /* Distance (in px) from the TOP of the viewport to the BOTTOM of the viewport starting at the sticky TOP
     (i.e. viewportHeight - stickyTop). This automatically includes sticky height + safe-area + margins. */
  --pvl-sticky-space: 120px;
}

/* In focus mode, use the full viewport (remove page padding that would otherwise waste space) */
body.pvl-exercise-on:not(.pvl-show-ui)[data-page="exercises"]{
  padding: 0;
  gap: 0;
  align-items: stretch;
}

/* Ensure the main container stretches full width/height */
body.pvl-exercise-on:not(.pvl-show-ui)[data-page="exercises"] .wrap{ width: 100vw; }
body.pvl-exercise-on:not(.pvl-show-ui)[data-page="exercises"] #mainScreen{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Canvas area: reserve the exact space for the fixed overlay and the sticky controls */
body.pvl-exercise-on:not(.pvl-show-ui)[data-page="exercises"] .canvasWrap{
  flex: 1 1 auto;
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: calc(var(--pvl-focus-bottom) + 8px);
  padding-bottom: calc(var(--pvl-sticky-space) + 8px);
}

/* Canvas fills the remaining vertical space (no more huge blank zones) */
body.pvl-exercise-on:not(.pvl-show-ui)[data-page="exercises"] .canvasWrap canvas{
  width: 100%;
  flex: 1 1 auto;
  height: 100%;
  max-height: 100%;
  min-height: 220px;
  display: block;
}

body.pvl-exercise-on:not(.pvl-show-ui) .header,
body.pvl-exercise-on:not(.pvl-show-ui) .controls-setup,
body.pvl-exercise-on:not(.pvl-show-ui) .controls-actions,
body.pvl-exercise-on:not(.pvl-show-ui) #safetyBox,
body.pvl-exercise-on:not(.pvl-show-ui) #info,
body.pvl-exercise-on:not(.pvl-show-ui) .hud,
body.pvl-exercise-on:not(.pvl-show-ui) .footer{
  display:none !important;
}

@media (max-width: 700px) {
  .stickyControls{ left: 10px; right: 10px; bottom: 10px; }
  .stickyControls .stickyHud{ min-width: 110px; font-size: 12.5px; }
  .stickyControls .stickyBtn, .stickyControls .stickyAudio{ min-width: 78px; padding: 10px 10px; }
}


@media (max-width: 700px) {
  body{ padding:12px; }
  .controls{ flex-direction:column; align-items:stretch; }
  .field, .field.wide, .field.compact, .field.mini{ flex:1 1 auto; width:100%; }
  .btns{ width:100%; }
  .btns button{ flex: 1 1 auto; }
  canvas{ height:430px; }
  .hud{ flex-direction:column; align-items:flex-start; }
  .footer{ flex-direction:column; align-items:flex-start; }
  .header{ flex-direction:column; align-items:flex-start; }
  .header h1{ font-size:19px; }
}

@media (orientation: portrait) {
  canvas{ height:430px; }
}

/* v8: action bar placed before canvas */
.controls-actions {
  margin-top: calc(10px + env(safe-area-inset-top));
}

/* v10: ensure audio/lang/theme are in the same bar and remain readable */
.bar {
  flex-wrap: wrap;
  gap: 10px;
}
.bar label {
  white-space: nowrap;
}
.bar select {
  max-width: 140px;
}

/* v11: keep room for language/theme in bar */
#audioVol {
  width: 120px;
  max-width: 120px;
}
@media (max-width: 520px) {
  #audioVol {
    width: 90px;
    max-width: 90px;
  }
}

/* v13: align audio checkbox with label; move theme selector to footer; reduce volume slider width */
.bar {
  align-items: center;
}
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.toggle input[type="checkbox"] {
  margin: 0;
}
.vol, .prefsInline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#audioVol {
  width: 120px;
  max-width: 120px;
}
@media (max-width: 520px) {
  #audioVol {
    width: 90px;
    max-width: 90px;
  }
}
.themeFooter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px 0;
}
.themeFooter select {
  max-width: 160px;
}

#phase{ display:inline-block; }


/* v16: advanced exercises safety modal */
.modalOverlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background: rgba(0,0,0,.62);
  z-index: 9999;
}
.modalOverlay.show{ display:flex; }
.modalCard{
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: var(--fieldbg);
  color: var(--fieldtext);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 16px 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.modalClose{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--fieldbg);
  color: var(--fieldtext);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: .9;
}
.modalClose:hover{ filter: brightness(1.05); }
.modalCard h3{ margin: 0 0 10px; font-size: 18px; }
.modalBody{
  flex: 1 1 auto;
  min-height: 0; /* allow flex child to shrink */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
  font-size: 14px;
  line-height: 1.35;
  opacity: .95;
}
.modalBody ul{ margin: 10px 0 0 18px; }
.modalBtns{ justify-content: flex-end; margin-top: 14px; }

/* Quand les boutons sont dans la zone scroll (mobile), les garder accessibles */
.modalBody .modalBtns{
  position: sticky;
  bottom: 0;
  padding-top: 12px;
  background: var(--fieldbg);
}
.modalBtns button:last-child{
  background: var(--link);
  color: #fff;
  border-color: transparent;
}
.modalBtns button:last-child:hover{ filter: brightness(1.05); }
.modalBtns button:first-child{ opacity: .9; }



/* v63: modal mobile fixes */
@media (max-width: 520px){
  .modalOverlay{ padding: 10px; }
  .modalCard{ max-height: calc(100vh - 20px); padding: 14px 14px 12px; }
  .modalCard h3{ font-size: 17px; }
  .advCodeBlock input{ font-size: 16px; } /* avoid iOS zoom on focus */
}

/* Header emoji */
#pvlEmoji {
  display: block;
  margin: 10px auto 6px auto;
  width: 92px;
  height: 92px;
}


.titleRow{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

#appTitle{
  margin:0;
  font-size:24px;
  letter-spacing:.2px;
  line-height:1.1;
}

.byline{
  font-size:13px;
  opacity:.85;
  white-space:nowrap;
}

.sub{
  width:100%;
  max-width:880px;
}


/* Footer feedback CTA */
.footerCta{
  display:inline-block;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  line-height:1;
}
.footerCta:hover{
  filter:brightness(1.05);
}


.sep{opacity:.7;margin:0 8px;}

.footerStats{
  flex: 1 1 100%;
  width: 100%;
  margin-top:10px;
  text-align:center;
  font-size:13px;
  opacity:.9;
  line-height:1.35;
  word-break:break-word;
}
@media (max-width: 480px){
  .footerStats{
  flex: 1 1 100%;
  width: 100%;
    font-size:12.5px;
  }
}


/* v61: advanced code input */
.advCodeBlock{
  margin-top: calc(10px + env(safe-area-inset-top));
  padding-top: calc(10px + env(safe-area-inset-top));
  border-top: 1px solid var(--border);
}
.advCodeBlock label{
  display:block;
  font-size: 13px;
  opacity: .9;
  margin-bottom: 6px;
}
.advCodeBlock input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--fieldbg);
  color: var(--fieldtext);
  font-size: 16px;
  outline: none;
}
.advCodeBlock input:focus{
  border-color: var(--link);
}
.formError{
  min-height: 18px;
  margin-top: 8px;
  font-size: 13px;
  color: #ff6b6b;
}
.advLinks{
  margin-top: calc(10px + env(safe-area-inset-top));
  font-size: 13px;
}
.advLinks a{
  color: var(--link);
  text-decoration: none;
}
.advLinks a:hover{ text-decoration: underline; }


/* v62: modal scroll fix (mobile) */
.modalCard{
  display:flex;
  flex-direction:column;
  max-height: calc(100vh - 32px);
}
.modalBody{
  flex:1 1 auto;
  overflow:auto;
  padding-right:6px;
}
.modalBtns{ flex:0 0 auto; }
.advCodeBlock{ flex:0 0 auto; }

/* Keep action buttons visible on small screens (inside scroll area) */
.modalBtns{
  position: sticky;
  bottom: 0;
  background: var(--fieldbg);
  padding-top: 12px;
}


/* v68: Premium full-page screen */
.premiumTopRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.premiumBackBtn{ white-space:nowrap; }
.premiumControls .field.wide{ width:100%; }
.premiumStatusLine{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.premiumBtns{ justify-content:flex-start; }
.premiumFooter{ font-size:12px; }
.formError{ margin-top:6px; font-size:13px; }
.formError.ok{ color: var(--ok); }


/* === Focus overlay + Mini settings === */
.canvasWrap{ position: relative; width: 100%; }
/* keep canvas style as-is */

.focusOverlay{
  /* Fixed to the viewport so it never ends up outside the visible area
     (important on phones/tablets where scrolling can occur). */
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: none;
  pointer-events: none;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(8px);
  max-width: min(92vw, 520px);
  width: min(92vw, 520px);
  text-align: center;
  box-sizing: border-box;
  overflow: visible;
}

.focusStepLine{ font-weight: 700; font-size: 14px; line-height: 1.2; }
.focusRemainLine{ font-size: 12.5px; opacity: .85; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* Keep the top phase/remaining overlay visible in BOTH player modes.
   In advanced mode, users still benefit from seeing the current phase at a glance. */
body.pvl-exercise-on[data-page="exercises"] .focusOverlay{ display: block; }

.miniPanel{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + var(--pvl-sticky-space) + env(safe-area-inset-bottom));
  z-index: 10005;
  display: none;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 92%, var(--page));
  backdrop-filter: blur(10px);
}
body.pvl-exercise-on.pvl-mini-on:not(.pvl-show-ui) .miniPanel{ display: block; }

.miniTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.miniTitle{ font-weight: 750; opacity: .95; }
.miniActions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.miniBtn{
  border: 1px solid var(--border);
  background: var(--fieldbg);
  color: var(--fieldtext);
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 650;
  cursor: pointer;
}
.miniBtnSecondary{ opacity: .95; }
.miniBtn.is-active{ background: var(--accent); color: #fff; border-color: transparent; }

.miniGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px){
  .miniGrid{ grid-template-columns: 1fr; }
}

.miniRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--fieldbg);
  color: var(--fieldtext);
  font-weight: 650;
}
.miniRow span{ white-space: nowrap; }
.miniRow input[type=range]{ width: 140px; max-width: 55vw; }


/* =============================
   PVL Info modal (offline pages)
   ============================= */

body.pvl-modal-open{ overflow:hidden; }

.pvlInfoModal{ position:fixed; inset:0; z-index:9999; display:none; }
.pvlInfoModal.is-open{ display:block; }
.pvlInfoBackdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }

.pvlInfoPanel{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: min(960px, calc(100vw - 24px));
  height: min(86vh, 900px);
  border-radius: 16px;
  background: var(--cardbg, var(--fieldbg));
  border: 1px solid var(--border);
  box-shadow: 0 22px 80px rgba(0,0,0,.55);
  overflow: hidden;
  display:flex;
  flex-direction: column;
}

.pvlInfoTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}

.pvlInfoTitle{ font-weight: 800; opacity: .95; }

.pvlInfoBtn{
  border: 1px solid var(--border);
  background: var(--fieldbg);
  color: var(--fieldtext);
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 750;
  cursor:pointer;
  min-width: 42px;
}

.pvlInfoBody{
  padding: 14px;
  overflow:auto;
}

.pvlInfoBody h1,.pvlInfoBody h2,.pvlInfoBody h3{ margin: 12px 0 8px; }
.pvlInfoBody p{ margin: 10px 0; }
.pvlInfoBody ul{ margin: 8px 0 12px 18px; }
.pvlInfoBody .infoHubGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 560px){
  .pvlInfoPanel{ width: calc(100vw - 16px); height: 90vh; }
  .pvlInfoBody .infoHubGrid{ grid-template-columns: 1fr; }
}

.pvlInfoBody .infoCard{
  border: 1px solid var(--border);
  background: var(--fieldbg);
  border-radius: 16px;
  padding: 12px;
}
.pvlInfoBody .infoCardTitle{ font-weight: 800; margin-bottom: 6px; }
.pvlInfoBody .infoCardDesc{ opacity: .9; }
.pvlInfoBody .infoCardActions{ margin-top: 10px; display:flex; gap:8px; flex-wrap: wrap; }
.pvlInfoBody .infoLinkBtn{
  display:inline-block;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 750;
  cursor:pointer;
  text-decoration:none;
}



/* PVL Prefs modal */
.pvlPrefsModal{ position:fixed; inset:0; z-index:9998; display:none; }
.pvlPrefsModal.is-open{ display:block; }
.pvlPrefsBackdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }

.pvlPrefsPanel{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: min(700px, calc(100vw - 24px));
  height: auto;
  max-height: 85vh;
  border-radius: 16px;
  background: var(--cardbg, var(--fieldbg));
  border: 1px solid var(--border);
  box-shadow: 0 22px 80px rgba(0,0,0,.55);
  overflow: hidden;
  display:flex;
  flex-direction: column;
}

.pvlPrefsTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.pvlPrefsTitle{ font-weight: 800; opacity: .95; }

.pvlPrefsBody{ padding: 14px; overflow:auto; }

.pvlPrefsGrid{ display:grid; grid-template-columns: 1fr; gap: 10px; }
.pvlPrefsRow{ display:flex; align-items:center; justify-content: space-between; gap: 12px; border: 1px solid var(--border); background: var(--fieldbg); border-radius: 14px; padding: 10px 12px; }
.pvlPrefsRow select{ min-width: 160px; }
.pvlPrefsLabel{ font-weight: 750; }

.pvlPrefsActions{ display:flex; justify-content: flex-end; margin-top: 12px; }
.pvlPrefsBtn, .pvlPrefsBtnPrimary{ border: 1px solid var(--border); background: var(--fieldbg); color: var(--fieldtext); padding: 9px 12px; border-radius: 12px; font-weight: 750; cursor:pointer; }
.pvlPrefsBtnPrimary{ border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 14%, var(--fieldbg)); }

@media (max-width: 560px){
  .pvlPrefsPanel{ width: calc(100vw - 16px); }
  .pvlPrefsRow select{ min-width: 130px; }
}


/* Hide version while exercising */
body.pvl-exercise-on .versionBadge{ display:none !important; }


/* ===========================
   v1100: App shell (Home / Views / Tab bar)
   =========================== */
.appViews{ width: 100%; }
.view{ display:none; }
.view.is-active{ display:block; }

.tabBar{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9997;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 85%, var(--page));
  backdrop-filter: blur(8px);
}
.tabBtn{
  border: 1px solid var(--border);
  background: var(--fieldbg);
  color: var(--fieldtext);
  padding: 10px 10px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.tabBtn.is-active{
  background: color-mix(in srgb, var(--accent) 16%, var(--fieldbg));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.tabBtnVip{
  margin-left: auto;
}
.tabBtnPrefs{ font-size:16px; padding: 9px 10px; line-height:1; }
.tabBar button.tabBtn{ cursor:pointer; -webkit-appearance:none; appearance:none; }
.tabMeta{
  display: none;
  align-items: baseline;
  gap: 8px;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.tabMetaLabel{ font-size: 12px; }
.tabMeta b{ color: var(--text); font-size: 13px; }

/* Show version label when there is enough space */
@media (min-width: 540px){
  .tabMeta{ display:flex; }
}

/* Small screens (portrait phones): keep VIP + version visible (wrap) */
@media (max-width: 539px){
  .tabBar{
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 10px;
  }
  .tabBtn{
    padding: 9px 8px;
    font-size: 13px;
    flex: 1 1 auto;
    text-align: center;
  }
  .tabBtnVip{ margin-left: 0; }
  .tabMeta{
    display: flex;
    flex: 1 0 100%;
    justify-content: flex-end;
    gap: 6px;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }
  .tabMetaLabel{ font-size: 11px; }
  .tabMeta b{ font-size: 12px; }
  /* Reserve enough space for the wrapped tabbar */
  body{ padding-bottom: calc(16px + 152px + env(safe-area-inset-bottom)) !important; }
}

/* Reserve space for the bottom tabbar so footer links remain visible */
body{ padding-bottom: calc(16px + 110px + env(safe-area-inset-bottom)); }
/* When the player hides the tabbar, remove the extra space */
body.pvl-exercise-on{ padding-bottom: 16px !important; }
.pvl-exercise-on .tabBar{ display:none !important; }
body.pvl-premium-open .tabBar{ display:none !important; }

.homeHero{
  margin-top: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
}
.homeHero h2{ margin: 0 0 6px 0; font-size: 20px; }
.homeLead{ margin: 0 0 12px 0; color: var(--muted); }
.homeCtas{ display:flex; gap:10px; flex-wrap:wrap; }
.homePrimaryBtn{
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 18%, var(--fieldbg));
  color: var(--fieldtext);
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 800;
}
.homeLast{ margin-top: calc(10px + env(safe-area-inset-top)); display:flex; gap:8px; align-items: baseline; }
.homeGrid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 520px){
  .homeGrid{ grid-template-columns: 1fr 1fr; }
}
.homeCard{
  text-align: left;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 14px;
  border-radius: 16px;
}
.homeCardTitle{ font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.homeCardDesc{ color: var(--muted); font-size: 13px; line-height: 1.35; }

.homeLinks{
  margin-top: 12px;
  padding-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
}

.footerIconLink{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  color: inherit;
  text-decoration: none;
  margin-right: 8px;
}
.footerIconLink svg{ width: 18px; height: 18px; display: block; }
@media (max-width: 420px){
  .footerIconLink span{ display:none; }
  .footerIconLink{ padding: 8px 10px; }
}

/* List cards (tutorials, top exercises, changelog) */
.sectionHeader{ margin-top: 8px; }
.sectionHeader h2{ margin: 8px 0 6px 0; font-size: 20px; }
.sectionHeader h3{ margin: 12px 0 6px 0; font-size: 16px; }
.smallNote{ margin-top: calc(10px + env(safe-area-inset-top)); }
.listCards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.listCard{
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 16px;
}
.listCardTitle{ font-weight: 800; margin-bottom: 4px; }
.listCardDesc{ color: var(--muted); font-size: 13px; line-height: 1.35; }
.listCardMeta{ color: var(--muted); font-size: 12px; margin-top: 6px; }

/* Tutoriels: keep the “Ouvrir” button from overlapping/truncating the summary on mobile */
.listCardTitleRow{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.listCardBtn{ white-space:nowrap; flex:0 0 auto; }
@media (max-width: 520px){
  .listCardTitleRow{ flex-wrap:wrap; }
  .listCardBtn{ width:100%; text-align:center; }
}

.statsGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: calc(10px + env(safe-area-inset-top));
}
@media (min-width: 520px){
  .statsGrid{ grid-template-columns: 1fr 1fr 1fr; }
}
.statsCard{
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 12px 14px;
  border-radius: 16px;
}
.statsLabel{ color: var(--muted); font-size: 13px; }
.statsValue{ font-size: 18px; font-weight: 900; margin-top: 4px; }

/* When views are used, keep setup visible only in Exercises view */
.view:not(.is-active) .controls,
.view:not(.is-active) .canvasWrap{ display:none; }


.homeSecondaryBtn{
  border: 1px solid var(--border);
  background: var(--fieldbg);
  color: var(--fieldtext);
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 800;
  opacity: 0.95;
}
.homeSecondaryBtn:disabled{ opacity: 0.55; }
.homeHint{ margin-top: calc(10px + env(safe-area-inset-top)); }


/* v1102: hard guard - never show exercise sticky controls outside Exercises view */
body.pvl-exercise-on:not([data-page="exercises"]) .stickyControls{ display:none !important; }


/* Robust hide for inactive views */
[hidden]{ display:none !important; }


/* Multipage v1.2.00: tabBar anchors */
.tabBar a.tabBtn{ text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }

.is-hidden{ display:none !important; }

.pagePad{ padding: 12px 12px 92px; }

.homeSecondaryBtn.is-disabled{ pointer-events:none; opacity:.55; }


/* PVL_STICKY_MENU_V1209: ensure sticky controls + tab bar coexist */
body.pvl-exercise-on[data-page="exercises"] #tabBar{ opacity:1; }
body.pvl-exercise-on[data-page="exercises"] .stickyControls{ z-index: 50; }
body.pvl-exercise-on[data-page="exercises"] #tabBar{ z-index: 40; }
.stickyMeta{ font-size: 11px; opacity: .8; padding-left: 8px; white-space: nowrap; }
.stickyMenu{ opacity: .95; }


/* PVL_HOME_RICH_V1211: page d'accueil enrichie */
.homeScreen{ padding-bottom: 12px; }
.homeGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: calc(10px + env(safe-area-inset-top));
}
@media (min-width: 860px){
  .homeGrid{ grid-template-columns: 1fr 1fr; }
  .homeWelcome{ grid-column: 1 / -1; }
}
.homeCard{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
body[data-theme="light"] .homeCard{
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}
.homeCard h2{ margin: 0 0 8px 0; font-size: 20px; }
.homeCard h3{ margin: 0 0 8px 0; font-size: 16px; }
.homeCardActions{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: calc(10px + env(safe-area-inset-top));
}
.homeList{
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.homeListItem{
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
body[data-theme="light"] .homeListItem{
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.015);
}
.homeListItem a{ color: inherit; text-decoration: none; }
.homeListTitle{ font-weight: 650; margin-bottom: 3px; }
.homeListDesc{ opacity: .85; font-size: 13px; line-height: 1.35; }
.homeStatsRow{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.homeStat{
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  text-align: center;
}
body[data-theme="light"] .homeStat{
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.015);
}
.homeStatLabel{ opacity: .8; font-size: 12px; }
.homeStatValue{ font-size: 16px; font-weight: 700; margin-top: 4px; }
.homeUpdates{ margin-top: calc(10px + env(safe-area-inset-top)); }
.homeUpdatesTitle{ margin-bottom: 6px; }

/* PVL_FOCUS_CENTER_V1212 */

#c{ width: 100%; height: 100%; display:block; }


/* PVL_STICKY_LAYOUT_V1212: pleasant bottom controls */
.stickyControls{ gap: 12px; }
.stickyLeft{ display:flex; align-items:center; gap: 10px; }
.stickyControls .stickyBtn{ min-width: 74px; }
.stickyControls .stickyHud{ min-width: 170px; }
.stickyControls .stickyMenu{ opacity: .95; }


/* PVL_FOCUS_OVERLAY_FIX_V1213 */
@media (max-width: 360px){
  .focusStepLine{ font-size: 13px; }
  .focusRemainLine{ font-size: 12px; }
}


/* PVL_STICKY_GRID_V1213 */
.stickyRight{ font-size: 11px; opacity: .8; white-space: nowrap; justify-self: end; padding-left: 6px; }
.stickyLeft{ display:flex; align-items:center; gap: 10px; justify-self: start; }
.stickyMid{ display:flex; align-items:center; justify-content:center; gap: 10px; }
.stickyControls .stickyHud{ min-width: 170px; text-align: center; }


/* === v1217.1: Responsive layout fixes (mobile portrait + landscape + desktop) === */

/* Sticky controls: allow wrapping so nothing gets cut off on narrow screens */
body.pvl-exercise-on:not(.pvl-show-ui)[data-page="exercises"] .stickyControls{
  display: flex !important; /* override older grid rule */
}

.stickyControls{
  display:none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.stickyControls .stickyLeft,
.stickyControls .stickyMid,
.stickyControls .stickyRight{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
}

.stickyControls .stickyLeft{ flex: 1 1 220px; }
.stickyControls .stickyMid{ flex: 2 1 320px; justify-content:center; }
.stickyControls .stickyRight{ flex: 0 0 auto; justify-content:flex-end; }

.stickyControls .stickyMenuExercises{
  max-width: 46vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stickyInfo{
  min-width: 64px;
}
/* Make the HUD shrink safely */
.stickyControls .stickyHud{
  min-width: 120px;
  max-width: 44vw;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* Very small screens: stack controls in two rows */
@media (max-width: 420px){
  .stickyControls{ left: 8px; right: 8px; bottom: 8px; padding: 8px 10px; }
  .stickyControls .stickyBtn, .stickyControls .stickyAudio{ padding: 10px 10px; min-width: 64px; }
  .stickyControls .stickyLeft{ flex: 1 1 100%; justify-content: space-between; }
  .stickyControls .stickyMid{ flex: 1 1 100%; justify-content: space-between; }
  .stickyControls .stickyMenuExercises{ max-width: 62vw; }
  .stickyControls .stickyHud{ min-width: 100px; max-width: 52vw; }
  .stickyControls .stickyRight{ display:none; } /* keep it clean on tiny screens */
}

/* Landscape mobile: reduce vertical footprint to preserve graph height */
@media (orientation: landscape) and (max-height: 460px){
  .stickyControls{ padding: 8px 10px; }
  .stickyControls .stickyBtn, .stickyControls .stickyAudio{ padding: 8px 10px; }
  body.pvl-exercise-on:not(.pvl-show-ui) .canvasWrap canvas{
    height: clamp(
      240px,
      58dvh,
      calc(100dvh - var(--pvl-sticky-h) - 66px - env(safe-area-inset-bottom))
    );
  }
}

/* Desktop: allow bigger graph while keeping controls readable */
@media (min-width: 980px){
  body.pvl-exercise-on:not(.pvl-show-ui) .canvasWrap canvas{
    height: clamp(
      420px,
      70dvh,
      calc(100dvh - var(--pvl-sticky-h) - 96px - env(safe-area-inset-bottom))
    );
  }
}

/* Safety: prevent accidental horizontal scrolling on mobile */
html, body{ overflow-x: hidden; }

/* ===========================
   Home mode chooser modal (v1221)
   =========================== */
.pvlModalCard{
  max-width: 620px;
  width: 100%;
  background: var(--cardbg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.pvlModalTitle{ font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.pvlModalLead{ font-size: 13px; opacity: .85; line-height: 1.35; margin-bottom: 12px; }
.pvlModalGrid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (max-width: 520px){ .pvlModalGrid{ grid-template-columns: 1fr; } }
.pvlModalChoice{
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 14px;
  padding: 12px;
}
.pvlModalChoiceTitle{ font-weight: 750; margin-bottom: 6px; }
.pvlModalChoiceDesc{ font-size: 12.5px; opacity: .85; line-height: 1.35; margin-bottom: 10px; }
.pvlModalBtn{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  font-weight: 750;
}
.pvlModalBtn.ghost{ background: var(--fieldbg); color: var(--fieldtext); }

/* ===========================
   Accès (modules) — v1221
   =========================== */
.accessCards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 10px 0 14px;
}
.accessCard{
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--cardbg);
  padding: 12px;
}
.accessCardTop{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; }
.accessCardTitle{ font-weight: 800; font-size: 14px; }
.accessCardDesc{ font-size: 12.5px; opacity: .85; line-height: 1.35; margin-top: 8px; }
.accessCardState{
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  white-space: nowrap;
}
.accessCardState.unlocked{
  border-color: rgba(0,160,80,.45);
  background: rgba(0,160,80,.14);
}
.accessCardBtnRow{ margin-top: 10px; }
.accessCardBtnRow button{ width: 100%; }

/* ===========================
   Home favorites (v1222)
   =========================== */
.homeFavList{ display:grid; gap:8px; margin-top: 10px; }
.homeFavRow{ display:flex; gap:8px; align-items: stretch; }
.homeFavBtn{
  flex: 1 1 auto;
  text-align: left;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  padding: 10px 12px;
}
body[data-theme="light"] .homeFavBtn{ background: rgba(0,0,0,0.015); }
.homeFavBtn.is-locked{ opacity: .95; }
.homeFavTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.homeFavSlot{ font-weight: 850; }
.homeFavBadge{
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  opacity: .92;
}
.homeFavMain{ margin-top: 6px; display:flex; flex-wrap:wrap; gap:8px; align-items: baseline; }
.homeFavPreset{ font-weight: 800; }
.homeFavMeta{ font-size: 12.5px; opacity: .85; }
.homeFavHint{ font-size: 12px; opacity: .8; margin-top: 6px; }
.homeFavEdit{
  width: 44px;
  min-width: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--fieldbg);
  color: var(--fieldtext);
  font-weight: 800;
}
.homeFavEdit:hover{ filter: brightness(1.05); }

.formLabel{
  display:block;
  margin: 10px 0 6px;
  font-size: 12.5px;
  opacity: .85;
  font-weight: 750;
}

/* v1223: prefs button (gear) in exercise action bar */
.prefsInline{ display:inline-flex; align-items:center; }
.prefsBtn{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:12px; background: var(--fieldbg); color: var(--fieldtext); font-weight:700; }
.prefsBtn.ghost{ background: transparent; }
@media (max-width: 520px){ .prefsBtnLabel{ display:none; } }


/* PVL_ABOUT modal (Version / mises à jour) */

.pvlClickableVersion{cursor:pointer}
.pvlClickableVersion:hover{text-decoration:underline}
.tabMetaLink{font-size:12px;opacity:.9;text-decoration:underline;white-space:nowrap}
.tabMetaLink:hover{opacity:1}

/* Link styled as a button (keeps color even after click / visited) */
.pvlLinkBtn{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:inherit;text-decoration:none;font-weight:750;line-height:1}
.pvlLinkBtn:hover{filter:brightness(1.05)}
.pvlLinkBtn:visited{color:inherit}
.tabMetaLink.pvlLinkBtn{opacity:1;text-decoration:none}
.pvlAboutBugLink.pvlLinkBtn{text-decoration:none}
@media (max-width: 539px){
  .tabMeta{flex-wrap:wrap}
  .tabMetaLink{flex:1 0 100%;text-align:right;margin-top:2px}
}
.pvlAboutModal{position:fixed;inset:0;z-index:999999;display:none}
.pvlAboutModal.is-open{display:block}
.pvlAboutBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.pvlAboutPanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,92vw);max-height:86vh;overflow:auto;background:var(--cardbg,#141821);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.pvlAboutTop{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 8px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.pvlAboutTitle{font-weight:800}
.pvlAboutBtn{background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:10px;color:inherit;padding:6px 10px}
.pvlAboutBody{padding:14px}
.pvlAboutMetaRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.pvlAboutMetaLabel{font-size:12px;opacity:.75}
.pvlAboutMetaValue{font-size:16px;font-weight:700}
.pvlAboutBugLink{font-size:13px;text-decoration:underline;white-space:nowrap}
.pvlAboutSectionTitle{margin:12px 0 8px 0;font-weight:800}
.pvlAboutChangelog{display:flex;flex-direction:column;gap:8px}
.pvlAboutEntry{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px 10px;background:rgba(255,255,255,.03)}
.pvlAboutEntry summary{cursor:pointer;list-style:none}
.pvlAboutEntry summary::-webkit-details-marker{display:none}
.pvlAboutEntry ul{margin:10px 0 2px 18px}
.pvlAboutActions{display:flex;justify-content:flex-end;margin-top:14px}
.pvlAboutBtnPrimary{background:var(--accent,#2f7cff);border:0;color:white;border-radius:12px;padding:10px 14px;font-weight:700}

/* PVL Welcome modal (1st launch) */
.pvlWelcomeModal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px}
.pvlWelcomeBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.58)}
.pvlWelcomePanel{position:relative;max-width:420px;width:100%;background:var(--cardbg,#141821);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.5);text-align:center}
.pvlWelcomeLogo{width:84px;height:84px;object-fit:contain;margin:0 auto 10px;display:block}
.pvlWelcomeTitle{font-size:20px;font-weight:800;margin-bottom:6px}
.pvlWelcomeLead{color:var(--muted,#a8b0bf);font-size:14px;line-height:1.4;margin-bottom:14px}
.pvlWelcomeActions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pvlWelcomeBtnPrimary,.pvlWelcomeBtn{border-radius:12px;padding:10px 14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:inherit}
.pvlWelcomeBtnPrimary{background:var(--accent,#6aa9ff);color:#0f1115;border-color:transparent;font-weight:700}

.pvlWelcomeFooter{margin-top:12px;display:flex;flex-direction:column;gap:10px;align-items:center}
.pvlWelcomeMeta{font-size:12px;color:var(--muted,#a8b0bf)}
.pvlWelcomeLinks{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pvlIconLink{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:inherit;text-decoration:none}
.pvlIconLink svg{width:18px;height:18px;display:block}
@media (max-width: 420px){
  .pvlIconLink span{display:none}
  .pvlIconLink{padding:8px 10px}
}