/* === Font-faces === */
@font-face { font-family: 'Aileron'; src: url('/fonts/Aileron-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aileron'; src: url('/fonts/Aileron-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Aileron'; src: url('/fonts/Aileron-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aileron'; src: url('/fonts/Aileron-LightItalic.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Aileron'; src: url('/fonts/Aileron-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aileron'; src: url('/fonts/Aileron-SemiBoldItalic.otf') format('opentype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Aileron'; src: url('/fonts/Aileron-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aileron'; src: url('/fonts/Aileron-BoldItalic.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Aileron'; src: url('/fonts/Aileron-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aileron'; src: url('/fonts/Aileron-BlackItalic.otf') format('opentype'); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Aileron'; src: url('/fonts/Aileron-Heavy.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aileron'; src: url('/fonts/Aileron-HeavyItalic.otf') format('opentype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Aileron'; src: url('/fonts/Aileron-Thin.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aileron'; src: url('/fonts/Aileron-ThinItalic.otf') format('opentype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Aileron'; src: url('/fonts/Aileron-UltraLight.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aileron'; src: url('/fonts/Aileron-UltraLightItalic.otf') format('opentype'); font-weight: 200; font-style: italic; font-display: swap; }
/* ============================================================
   YV COACH -- app.css (schone herbouw, licht thema)
   Ontwerp op basis van Claude Design (standalone). Juli 2026.
   Opbouw: fonts -> tokens -> basis -> componenten -> print.
   ============================================================ */

/* ===================== TOKENS ===================== */
:root {
  --brand: #009775;
  --brand-light: #00c795;
  --brand-dark: #0c7d61;
  --brand-deep: #006e55;
  --grad: linear-gradient(135deg, #00c795, #009775);
  --grad-header: linear-gradient(150deg, #00c795, #009775);
  --accent: #c8ff6e;
  --accent-soft: #eaffc2;
  --accent-text: #2c3d00;
  --score: #ff6b5c;
  --amber: #ffcf6b;

  --bg: #eef4f1;
  --screen-bg: #f3f8f5;
  --surface: #ffffff;
  --surface2: #f5f9f7;
  --surface3: #eef2f0;

  --text: #16241f;
  --text2: #3a5a4f;
  --muted: #5a6b65;
  --muted2: #7c8b85;
  --dim: #9aa8a3;
  --faint: #adbfb8;

  --border: #e6efec;
  --border2: #cfe4dc;
  --track: #eef2f0;

  --danger: #e0564a;
  --warn: #e0892a;
  --info: #3b82f6;

  --r: 16px;
  --rs: 12px;
  --r-card: 20px;
  --shadow-card: 0 12px 30px -20px rgba(10,60,45,.3);
  --shadow-over: 0 20px 40px -22px rgba(6,60,44,.4);
  --shadow-cta: 0 16px 30px -12px rgba(0,151,117,.65);
}

/* ===================== BASIS ===================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Aileron', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.no-print { }
.print-section-title { display: none !important; }

.screen { display: none; min-height: 100vh; flex-direction: column; }
.screen.active { display: flex; }

/* algemene sectie */
.section { padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.sec-title, .sec-hdr { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin: 6px 0 10px; }
.disp { font-weight: 900; letter-spacing: -.01em; }

/* ===================== HEADER (effen) ===================== */
.hdr { display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top)) 20px 12px; background: var(--surface); border-bottom: 1px solid var(--border); position: relative; z-index: 5; }
.hdr-logo { display: flex; align-items: center; gap: 10px; }
.hdr-logo span { font-weight: 800; font-size: 15px; color: var(--text); }
.hdr-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--brand); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hdr-mark img { width: 20px; height: 20px; object-fit: contain; }
.nav-btn { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1.5px solid var(--border2); border-radius: 10px; background: var(--surface); color: var(--text2); font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.nav-btn:hover { border-color: var(--brand); color: var(--brand); }
.nav-btn-lbl { }

/* groene gradient-header (subpagina's) + overlappende kaart */
.hdr--green { background: var(--grad-header); border-bottom: none; border-radius: 0 0 66px 0; padding-bottom: 62px; box-shadow: 0 14px 30px -20px rgba(0,120,90,.6); }
.hdr--green .hdr-logo span { color: #fff; }
.hdr--green .hdr-mark { background: rgba(255,255,255,.18); }
.hdr--green .nav-btn { border-color: rgba(255,255,255,.34); color: #fff; background: rgba(255,255,255,.12); }
.hdr--green .nav-btn:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.55); color: #fff; }
.hdr--green .btn-ghost { color: #fff; }

/* ===================== FOTO-HERO (welkomst / landing) ===================== */
.photo-hero { position: relative; overflow: hidden; border-radius: 0 0 74px; min-height: 476px; display: flex; flex-direction: column; background: #0c7d61; }
.photo-hero .ph-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.photo-hero .ph-wash { position: absolute; inset: 0; background: linear-gradient(200deg, rgba(0,60,45,.06) 0%, rgba(0,56,42,.30) 46%, rgba(1,42,31,.78) 80%, rgba(1,32,24,.94) 100%); }
.photo-hero .ph-in { position: relative; z-index: 2; height: 100%; flex: 1; display: flex; flex-direction: column; padding: calc(14px + env(safe-area-inset-top)) 22px 30px; }
.photo-hero .ph-top { display: flex; align-items: center; justify-content: space-between; }
.ph-badge { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; }
.ph-badge img { width: 26px; height: 26px; object-fit: contain; }
.ph-menu-wrap { position: relative; }
.ph-menu-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; color: #fff; }
.ph-menu { position: absolute; top: 48px; right: 0; z-index: 30; width: 224px; background: #fff; border-radius: 16px; box-shadow: 0 20px 44px -12px rgba(3,38,28,.4); overflow: hidden; padding: 6px; display: none; }
.ph-menu.open { display: block; }
.ph-menu .ph-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; background: transparent; border: none; width: 100%; text-align: left; font-family: inherit; }
.ph-menu .ph-item:hover { background: var(--surface2); }
.ph-menu .ph-ico { width: 34px; height: 34px; border-radius: 10px; background: rgba(0,151,117,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand); }
.ph-menu .ph-item-t { font-weight: 700; font-size: 13.5px; color: var(--text); display: block; }
.ph-menu .ph-item-s { font-size: 10.5px; color: var(--muted); margin-top: 1px; display: block; }
.photo-hero .ph-copy { margin-top: auto; }
.photo-hero .ph-pill, .photo-hero .tag { display: inline-block; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); color: #eafff6; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 6px 12px; border-radius: 100px; }
.photo-hero .ph-copy h1, .photo-hero .ph-copy h2 { color: #fff; font-weight: 900; font-size: 46px; line-height: .93; letter-spacing: -.01em; margin: 14px 0 0; text-shadow: 0 2px 24px rgba(0,20,14,.42); }
.photo-hero .ph-copy h1 span, .photo-hero .ph-copy h2 span { color: var(--brand-light); }
.photo-hero .ph-copy p { color: rgba(255,255,255,.88); font-size: 13px; line-height: 1.5; margin: 14px 0 0; max-width: 290px; }

/* welkomst-body */
.features { padding: 22px 20px 104px; display: flex; flex-direction: column; gap: 16px; }
.wc-cta-wrap { margin-top: -40px; position: relative; z-index: 6; display: flex; justify-content: center; }
.wc-cta { background: #fff; color: var(--brand-dark); font-weight: 900; font-size: 15px; padding: 14px 14px 14px 26px; border-radius: 100px; display: flex; align-items: center; gap: 12px; box-shadow: 0 22px 38px -14px rgba(3,60,44,.55); border: none; }
.wc-cta-arrow { width: 32px; height: 32px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; }
#welcome-extra-btns { display: flex; gap: 11px; }
.wc-sbtn { flex: 1; border: 1.5px solid var(--border2); background: #fff; font-weight: 700; font-size: 12.5px; padding: 13px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.wc-sbtn.up { color: #0e7d63; }
.wc-sbtn.new { color: #4a5b56; }

/* weekkaart */
.week-blok { background: #fff; border-radius: 20px; padding: 18px; box-shadow: var(--shadow-card); }
.week-blok-top { display: flex; justify-content: space-between; align-items: flex-start; }
.week-blok-title { font-weight: 800; font-size: 16px; color: var(--text); }
.week-blok-sub { font-size: 12px; color: var(--muted2); margin-top: 3px; }
.week-blok-pct { font-weight: 900; font-size: 30px; color: var(--brand); line-height: 1; }
.week-blok-days { display: flex; justify-content: space-between; margin-top: 16px; }
.week-blok-dag { text-align: center; }
.week-blok-dag-lbl { font-size: 9px; font-weight: 800; color: var(--dim); letter-spacing: .06em; display: block; }
.week-blok-dag-dot { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #e3ebe8; margin-top: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; }
.week-blok-dag-dot.today { border: 2px solid var(--brand); background: rgba(0,151,117,.1); color: var(--brand); }
.week-blok-dag-dot.done { border: 2px solid var(--brand); background: var(--brand); }
.week-blok-dag-dot.partial { border: 2px solid var(--amber); background: var(--amber); color: #7a5a2a; }
.week-blok-dag-dot.skip { border: 1.5px dashed #cfd8d4; color: var(--dim); }
.week-blok-link { margin-top: 15px; font-size: 12.5px; font-weight: 700; color: var(--brand); display: flex; align-items: center; gap: 5px; }

/* feat-blokken (info-staat + install) */
.feat { background: #fff; border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow-card); display: flex; gap: 14px; align-items: center; }
.feat-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--surface2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand); }
.feat h4 { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 3px; }
.feat p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.yv-score-welcome { display: block; padding: 18px; }

/* ===================== BOTTOM-NAV (leden-schermen) ===================== */
.bottomnav { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; width: calc(100% - 40px); max-width: 460px; height: 66px; background: #fff; border-radius: 24px; box-shadow: 0 20px 42px -14px rgba(6,60,44,.4), 0 2px 8px rgba(0,0,0,.05); display: none; align-items: center; justify-content: space-around; z-index: 90; }
.bottomnav.vis { display: flex; }
.bn-item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: transparent; border: none; color: var(--faint); font-family: inherit; font-size: 11px; font-weight: 700; padding: 6px 16px; }
.bn-item.active { color: var(--brand); }
.bn-dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.bn-item.active .bn-dot { background: var(--brand); }
#s-welcome .features, #s-result .res-body, #s-log .log-body { padding-bottom: 96px; }

/* ===================== KNOPPEN ===================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: var(--rs); font-weight: 700; font-size: 14px; border: none; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: var(--shadow-cta); }
.btn-outline { background: #fff; border: 1.5px solid var(--border2); color: var(--brand-dark); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-accent { background: var(--accent-soft); border: 1.5px solid var(--accent); color: var(--accent-text); }
.start-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--grad); color: #fff; font-weight: 800; font-size: 15px; padding: 15px 24px; border-radius: 14px; border: none; box-shadow: var(--shadow-cta); }
.start-btn-outline { background: #fff; border: 1.5px solid var(--border2); color: var(--brand-dark); box-shadow: none; }
.start-btn-ghost { background: transparent; color: var(--muted); box-shadow: none; }

/* ===================== SCHEMA-HERO (foto) ===================== */
.res-hero { padding: 2rem 1.5rem; }
.res-hero-in { max-width: 880px; margin: 0 auto; }
.res-hero--photo { position: relative; overflow: hidden; background: #0c7d61; border-bottom: none; border-radius: 0 0 62px 0; padding: calc(14px + env(safe-area-inset-top)) 22px 26px; min-height: 400px; display: flex; }
.res-hero--photo .ph-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.res-hero--photo .res-hero-in { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; }
.res-hero-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; }
.res-hero-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; padding: 0; }
.res-hero-kicker { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.9); }
.res-hero-badge { width: 44px; height: 44px; }
.res-hero--photo .pills { margin-top: 0; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.res-hero--photo .pill { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32); color: #fff; font-weight: 700; }
.res-hero--photo .pill:first-child, .res-hero--photo .pill.brand { background: var(--brand); border-color: var(--brand); }
.res-hero--photo h2 { color: #fff; font-size: clamp(1.5rem, 6vw, 1.7rem); line-height: 1.05; margin-top: 12px; text-shadow: 0 2px 16px rgba(0,20,14,.55); }
.res-samenvatting { max-width: 880px; margin: 0 auto; padding: 1.25rem 1.5rem 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 100px; background: var(--surface2); color: var(--text2); }

/* ===================== SCHEMA-BODY ===================== */
.res-body { padding: 20px 18px 104px; display: flex; flex-direction: column; gap: 16px; }
.week-grid { display: flex; flex-direction: column; gap: 12px; }

/* dag-blokken */
.dag-kies-lbl { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.dag-blocks { display: flex; flex-direction: column; gap: 10px; }
.dag-block { display: flex; align-items: center; gap: 14px; padding: 14px 15px; border-radius: 20px; background: #fff; border: none; width: 100%; text-align: left; font-family: inherit; box-shadow: inset 0 0 0 1.5px var(--border), 0 10px 26px -22px rgba(10,60,45,.3); }
.dag-block-num { width: 44px; height: 44px; border-radius: 15px; background: #eef7f3; color: var(--brand); font-weight: 900; font-size: 17px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.dag-block-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dag-block-kicker { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: 5px; }
.dag-block-focus { font-weight: 800; font-size: 14px; color: var(--text); margin-top: 2px; line-height: 1.1; }
.dag-block-chip { width: 34px; height: 34px; border-radius: 11px; background: var(--surface2); color: var(--brand); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.dag-block .ico-play { display: none; }
.dag-block.active { background: var(--grad); box-shadow: 0 18px 32px -18px rgba(0,120,90,.6); }
.dag-block.active .dag-block-num { background: rgba(255,255,255,.22); color: #fff; }
.dag-block.active .dag-block-kicker { color: rgba(255,255,255,.8); }
.dag-block.active .dag-block-focus { color: #fff; }
.dag-block.active .dag-block-chip { background: rgba(255,255,255,.22); color: #fff; }
.dag-block.active .ico-play { display: block; }
.dag-block.active .ico-chev { display: none; }
.dag-tab-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dag-tab-dot.done { background: var(--brand); }
.dag-tab-dot.partial { background: var(--amber); }
.dag-tab-dot.skip { background: var(--dim); }

.dag-panel { display: none; flex-direction: column; gap: 12px; }
.dag-panel.active { display: flex; }

/* start training */
.dag-start-wrap { display: block; }
.dag-start-info { display: none; }
.dag-start-btns { display: flex; gap: 8px; width: 100%; }
.dag-start-btn { flex: 1; justify-content: center; align-items: center; gap: 9px; background: var(--grad); color: #fff; font-weight: 800; font-size: 15px; padding: 16px; border-radius: 16px; box-shadow: 0 18px 32px -14px rgba(0,151,117,.6); border: none; display: flex; }
.dag-start-btn.gestart { background: #eef7f3; color: var(--brand-dark); box-shadow: none; }
.dag-stop-btn { border: 1.5px solid var(--border2); background: #fff; color: var(--danger); font-weight: 700; border-radius: 16px; padding: 16px 18px; }

/* vonk */
.vonk-wrap { background: #fff; border-radius: 0 0 20px 20px; padding: 14px 16px 16px; box-shadow: 0 16px 34px -22px rgba(10,60,45,.4); margin-top: -12px; border-top: 1px solid #f0f4f2; }
.vonk-header { display: flex; align-items: center; gap: 9px; margin-bottom: 0; }
.vonk-pulse { display: none; }
.vonk-title { font-weight: 800; font-size: 9px; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }
.vonk-sub { display: none; }
.vonk-btns { display: flex; gap: 6px; background: #eef4f1; border-radius: 14px; padding: 5px; margin-top: 10px; }
.vonk-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; border-radius: 11px; border: none; background: transparent; color: var(--muted2); font-size: 10.5px; font-weight: 700; font-family: inherit; }
.vonk-btn.active, .vonk-btn.sel { background: #fff; color: var(--brand); box-shadow: 0 6px 14px -8px rgba(10,60,45,.4); }
.vonk-btn-ico { display: block; }
.vonk-btn .vonk-btn-ico svg { width: 18px; height: 18px; color: #9aa8a3; }
.vonk-btn.active .vonk-btn-ico svg, .vonk-btn.sel .vonk-btn-ico svg { color: var(--brand); }
.vonk-feedback { font-size: 12px; color: var(--brand); font-weight: 700; text-align: center; margin-top: 12px; }
.vonk-feedback:empty { display: none; }
@keyframes yvpulse { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } }

/* warming-up / cooling-down */
.special-row { background: rgba(255,154,61,.1); border-radius: 16px; padding: 14px 15px; display: flex; gap: 12px; align-items: flex-start; }
.special-row:has(.special-lbl.dim) { background: rgba(0,151,117,.08); }
.special-lbl { font-weight: 800; color: #a2611a; text-transform: uppercase; letter-spacing: .05em; font-size: 10px; display: block; margin-bottom: 2px; }
.special-lbl.dim { color: #0c5c46; }
.special-val { font-size: 12px; line-height: 1.5; color: #7a5a2a; }
.special-row:has(.special-lbl.dim) .special-val { color: var(--text2); }

/* oefeningkaarten -- opmaak zit inline in schema-render.js; hier alleen ondersteunend */
.ex-list { display: flex; flex-direction: column; gap: 12px; }
.ex-row.excluded { opacity: .32; }
.ex-icon-btn { border: none; }
/* Oefening-menu (drie puntjes op de foto) */
.ex-menu-wrap { position: absolute; top: 10px; right: 10px; z-index: 5; }
.ex-menu-btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.92); border: none; display: flex; align-items: center; justify-content: center; color: #16241f; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,.16); padding: 0; }
.ex-menu-btn:active { transform: scale(.94); }
.ex-menu { display: none; position: absolute; top: 38px; right: 0; width: 176px; background: #fff; border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(3,38,28,.42); padding: 6px; z-index: 10; }
.ex-menu.open { display: block; }
.ex-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; border-radius: 10px; background: transparent; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; color: #0e7d63; text-align: left; }
.ex-menu-item:hover { background: var(--surface2); }
.ex-menu-item.danger { color: #c0473c; }
.ex-menu-item.loading { opacity: .6; }
.ex-menu-ico { width: 26px; height: 26px; border-radius: 8px; background: rgba(0,151,117,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ex-menu-item.danger .ex-menu-ico { background: rgba(192,71,60,.1); }
.ex-weight-btn { border: none; }
/* Rusttimer per oefening -- knop links, tijd en balk in het midden, reset rechts */
.ex-rustbar { display: none; align-items: center; gap: 11px; margin-top: 14px; background: #f3f9f6; border: 1px solid #dcebe4; border-radius: 14px; padding: 10px 12px; transition: background .25s, border-color .25s; }
.ex-rustbar.klaar { background: #f4ffe6; border-color: #d5f2a8; }
.ex-rustbar .ex-rust-pp, .ex-rustbar .ex-rust-reset { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--border2); background: #fff; color: var(--brand-dark); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.ex-rustbar .ex-rust-reset { color: #8a9a94; }
.ex-rustbar .ex-rust-pp:active, .ex-rustbar .ex-rust-reset:active { transform: scale(.94); }
.ex-rustbar .ex-rust-mid { flex: 1; min-width: 0; }
.ex-rustbar .ex-rust-time { font-weight: 900; font-size: 15px; color: #16241f; font-variant-numeric: tabular-nums; }
.ex-rustbar.klaar .ex-rust-time { color: #2f7a3f; }
.ex-rustbar .ex-rust-track { margin-top: 6px; height: 6px; border-radius: 6px; background: #e3ebe8; overflow: hidden; }
.ex-rustbar .ex-rust-fill { display: block; height: 100%; width: 100%; border-radius: 6px; background: linear-gradient(90deg,#00c795,#009775); transition: width .3s linear; }
.ex-rustbar.klaar .ex-rust-fill { background: #c8ff6e; }

/* Vorige keer en record -- een vak van 152px, rechts onder de gewicht-stepper */
.ex-lastrow { display: flex; justify-content: flex-end; margin-top: 10px; }
.ex-lastslot { width: 152px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 6px; }
.ex-lastslot:empty { display: none; }
.ex-lastslot.vk { padding: 3px 0; font-size: 11.5px; font-weight: 600; color: #7c8b85; }
.ex-lastslot.vk b { color: #3a4a45; font-weight: 800; }
.ex-lastslot.pr { min-height: 34px; background: #eaffc2; border: 1px solid #cdeeb0; color: #2f7a3f; font-size: 11px; font-weight: 900; border-radius: 12px; padding: 5px 10px; }

/* Notitie per oefening */
.ex-knoppenrij { display: flex; justify-content: center; margin-top: 12px; }
.ex-notitie-btn { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; font-family: inherit; font-size: 12px; font-weight: 700; color: #7c8b85; cursor: pointer; padding: 0; }
.ex-notitie-btn.heeft { color: var(--brand); }
.ex-notitie-box { margin-top: 9px; }
.ex-notitie-veld { width: 100%; border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 12px; font-family: inherit; font-size: 16px; line-height: 1.45; color: var(--text); background: #fff; resize: vertical; }
/* Optioneel-label op de fotokaart (cardio bij een krachtdoel) */
.ex-optioneel { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; background: rgba(255,255,255,.9); color: #0c7d61; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; }
.day-hdr { display: none; }
.day-focus { display: none; }

/* beoordelingsblok */
.dag-beoor-wrap { background: #fff; border-radius: 16px; padding: 16px; box-shadow: var(--shadow-card); }
.dag-beoor-label { font-size: 12px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.dag-beoor-btns { display: flex; gap: 8px; }
.dag-beoor-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; color: var(--muted); font-family: inherit; font-size: 11px; font-weight: 700; }
.dag-beoor-btn.sel-done { border-color: var(--brand); background: #e7f6f1; color: var(--brand-dark); }
.dag-beoor-btn.sel-partial { border-color: var(--amber); background: #fff7e8; color: #a2611a; }
.dag-beoor-btn.sel-skip { border-color: var(--dim); background: var(--surface2); color: var(--muted); }
.dag-beoor-notitie { width: 100%; margin-top: 12px; border: 1.5px solid var(--border); border-radius: 12px; padding: 11px 13px; font-family: inherit; font-size: 13px; resize: vertical; background: #fff; color: var(--text); }
.dag-beoor-opslaan { width: 100%; margin-top: 10px; background: var(--grad); color: #fff; font-weight: 800; border: none; border-radius: 12px; padding: 13px; font-family: inherit; }
.dag-beoor-opslaan-dis { opacity: .5; }
.dag-beoor-motivatie { font-size: 12.5px; color: var(--brand-dark); margin-top: 10px; line-height: 1.5; }

/* progressieschema */
.prog-block { background: #fff; border-left: 4px solid var(--brand-light); border-radius: 16px; padding: 15px 16px; box-shadow: 0 12px 28px -24px rgba(10,60,45,.3); }
.prog-block:nth-child(3) { border-left-color: #00a37e; }
.prog-block:nth-child(4) { border-left-color: #007a5e; }

/* schema aanpassen */
.aanpas-section { }
.aanpas-header { padding: 0 0 14px; }
.aanpas-opties { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aanpas-optie { border: 1.5px solid var(--border); border-radius: 14px; padding: 12px; display: flex; gap: 10px; align-items: flex-start; background: #fff; text-align: left; font-family: inherit; }
.aanpas-optie.sel { border-color: var(--brand); background: #e7f6f1; }
.aanpas-optie-ico { flex: 0 0 auto; font-size: 18px; line-height: 1; }
.aanpas-optie-lbl { font-weight: 800; font-size: 12.5px; color: var(--text); display: block; }
.aanpas-optie-desc { font-size: 10.5px; color: var(--muted2); margin-top: 2px; line-height: 1.35; display: block; }
.aanpas-body { margin-top: 12px; }
.aanpas-input { width: 100%; border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 13px; font-family: inherit; font-size: 13px; resize: vertical; background: #fff; color: var(--text); }
.aanpas-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.aanpas-timer { font-size: 10.5px; color: #8a9893; }
.aanpas-timer strong { color: var(--brand); }
.aanpas-btn { background: var(--grad); color: #fff; font-weight: 800; border: none; border-radius: 12px; padding: 12px 15px; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 12px 22px -12px rgba(0,151,117,.7); white-space: nowrap; }
.aanpas-btn:disabled { opacity: 1; cursor: default; }
.aanpas-blocked { padding: 14px; font-size: 12.5px; color: var(--muted); }

/* actieblokken (korting groen, voucher) */
.action-box { border-radius: 20px; padding: 20px; box-shadow: 0 16px 34px -24px rgba(10,60,45,.35); position: relative; overflow: hidden; }
.action-box.brand { background: var(--grad); color: #fff; }
.action-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; margin-bottom: 10px; }
.action-box.brand .action-tag { background: rgba(255,255,255,.2); color: #fff; }
.action-title { font-weight: 900; font-size: 18px; line-height: 1.2; margin-bottom: 8px; }
.action-box.brand .action-title { color: #fff; }
.action-sub { font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }
.action-box.brand .action-sub { color: rgba(255,255,255,.92); }
.action-code { display: inline-block; font-weight: 900; font-size: 1.3rem; letter-spacing: .14em; border: 1.5px dashed rgba(255,255,255,.6); border-radius: 12px; padding: 10px 18px; background: rgba(255,255,255,.1); margin: .2rem 0 .75rem; }
.timer { font-size: 12px; color: rgba(255,255,255,.9); margin-bottom: 12px; }
.timer-val { font-weight: 800; }
.action-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--accent-text); font-weight: 800; font-size: 13px; padding: 11px 18px; border-radius: 12px; }
.action-box.blue { background: #fff; box-shadow: var(--shadow-card); }
.action-box.blue .action-title, .action-box.blue .action-sub { color: var(--text); }
.action-box.blue .action-sub { color: var(--muted); }
.kortingscode-leeuw { }

/* voeding */
.macro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.macro-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 14px; text-align: center; box-shadow: 0 12px 28px -24px rgba(10,60,45,.3); }
.macro-num { font-weight: 900; font-size: 22px; color: var(--brand); }
.collapsible { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; box-shadow: 0 12px 28px -26px rgba(10,60,45,.3); cursor: pointer; }
.collapsible-title { font-weight: 800; font-size: 13.5px; color: var(--text); }
.collapsible-preview { font-size: 11.5px; color: var(--muted2); margin-top: 1px; }
.collapsible-icon { color: var(--dim); transition: transform .2s; }
.collapsible.open .collapsible-icon { transform: rotate(180deg); }
.collapsible-body { display: none; padding: 4px 0 0; flex-direction: column; gap: 10px; }
.collapsible-body.open { display: flex; }
.adv-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.adv-card p { font-size: 13px; color: var(--text2); line-height: 1.6; }

/* mywellness */
.mw-box { background: #fff; border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px; box-shadow: 0 12px 28px -26px rgba(10,60,45,.3); }
.mw-steps { display: flex; flex-direction: column; gap: 12px; }
.mw-step { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--text2); line-height: 1.5; }
.mw-num { width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.res-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 1rem; }

/* 3-maanden melding + uitleg-collapsible (niet in Claude Design -- eigen lichte stijl) */
.schema-melding { background: linear-gradient(135deg, #eafaf4, #dff3ec); border: 1px solid rgba(0,151,117,.28); border-radius: var(--r); padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.schema-melding-tekst strong { font-size: 15px; font-weight: 800; color: var(--text); display: block; margin-bottom: .3rem; }
.schema-melding-tekst p { font-size: 13px; color: var(--muted); line-height: 1.6; }
.schema-melding-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.schema-melding-btn { background: var(--grad); color: #fff; border: none; border-radius: 12px; padding: 12px 22px; font-family: inherit; font-size: 13px; font-weight: 800; white-space: nowrap; }
.schema-melding-btn.schema-melding-btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border2); }
.uitleg-collapsible { background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 28px -26px rgba(10,60,45,.3); overflow: hidden; }
.uitleg-collapsible-hdr { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; }
.uitleg-collapsible-hdr-left { font-weight: 800; font-size: 13.5px; color: var(--text); }
.uitleg-collapsible-chev { color: var(--dim); transition: transform .2s; }
.uitleg-collapsible.open .uitleg-collapsible-chev { transform: rotate(180deg); }
.uitleg-collapsible-body { display: none; padding: 0 16px 16px; }
.uitleg-collapsible.open .uitleg-collapsible-body { display: block; }

/* ===================== YV SCORE ===================== */
.yv-score-blok { background: #fff; border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px; display: flex; gap: 16px; align-items: center; box-shadow: var(--shadow-card); }
.yv-score-ring-wrap { position: relative; flex: 0 0 auto; }
.yv-score-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 26px; }
.yv-score-right { flex: 1; }
.yv-score-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; margin-bottom: 3px; }
.yv-score-duiding { font-weight: 800; font-size: 16px; color: var(--text); }
.yv-score-info-btn { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--border2); background: #fff; color: var(--muted); font-size: 10px; font-weight: 800; line-height: 1; padding: 0; }
.yv-score-bars { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.yv-score-bar-row { display: flex; align-items: center; gap: 8px; }
.yv-score-bar-lbl { font-size: 10px; color: var(--muted2); width: 92px; flex-shrink: 0; }
.yv-score-bar-track { flex: 1; height: 5px; border-radius: 4px; background: var(--track); overflow: hidden; }
.yv-score-bar-fill { height: 100%; background: var(--brand-light); }

/* ===================== QUIZ (eigen lichte stijl) ===================== */
.quiz-wrap { padding: 22px 20px 40px; max-width: 560px; margin: 0 auto; width: 100%; }
.prog-wrap { height: 5px; border-radius: 4px; background: var(--track); overflow: hidden; margin-bottom: 24px; }
.prog-fill { height: 100%; background: var(--grad); transition: width .3s; }
.quiz-q { font-weight: 900; font-size: clamp(1.4rem, 6vw, 2rem); color: var(--text); line-height: 1.1; margin-bottom: 6px; }
.quiz-sub { font-size: 13px; color: var(--muted); margin-bottom: 20px; line-height: 1.5; }
.opts { display: grid; gap: 10px; }
.opts.cols { grid-template-columns: 1fr 1fr; }
.opt { border: 1.5px solid var(--border); border-radius: 14px; padding: 16px; background: #fff; text-align: left; font-family: inherit; display: flex; align-items: center; gap: 12px; }
.opt .ico { font-size: 22px; }
.opt .lbl { font-weight: 700; font-size: 14px; color: var(--text); }
.opt .desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.opt.sel { border-color: var(--brand); background: #e7f6f1; }
.opt.sel .lbl { color: var(--brand-dark); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid var(--border); border-radius: 100px; padding: 10px 16px; background: #fff; font-size: 13px; font-weight: 600; color: var(--text2); font-family: inherit; }
.chip.sel { border-color: var(--brand); background: #e7f6f1; color: var(--brand-dark); }
.free-input, .cfield { width: 100%; border: 1.5px solid var(--border); border-radius: 12px; padding: 13px; font-family: inherit; font-size: 14px; background: #fff; color: var(--text); }
.notice { background: rgba(0,151,117,.06); border-left: 3px solid var(--brand); border-radius: 0 12px 12px 0; padding: 12px 14px; font-size: 12.5px; color: var(--text2); line-height: 1.55; margin-top: 14px; }
.quiz-nav { display: flex; gap: 10px; margin-top: 24px; }
.quiz-nav .btn { flex: 1; }

/* ===================== VOORTGANG (log) ===================== */
.log-body { padding: 0 18px 104px; display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 2; }
.log-stat { background: #fff; border-radius: 16px; padding: 16px; box-shadow: var(--shadow-card); text-align: center; }
.log-stat-num { font-weight: 900; font-size: 26px; color: var(--brand); }
.log-stat-lbl { font-size: 11px; color: var(--muted2); margin-top: 2px; }
.log-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.log-prog-card, .log-heatmap, .log-weight-card { background: #fff; border-radius: var(--r-card); padding: 18px; box-shadow: var(--shadow-card); }
.log-prog-bar-bg { height: 6px; border-radius: 4px; background: var(--track); overflow: hidden; margin-top: 8px; }
.log-prog-bar-fill { height: 100%; background: var(--grad); }
.log-hm-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.log-hm-dot { width: 20px; height: 20px; border-radius: 6px; background: var(--track); }
.log-hm-dot.done { background: #3fc79f; }
.log-hm-dot.partial { background: var(--amber); }
.log-hm-dot.skip { background: transparent; border: 1.5px dashed var(--border2); }
.log-hm-dot.current { border: 2px solid var(--brand); }
.log-weight-bar-bg { height: 8px; border-radius: 5px; background: var(--track); overflow: hidden; }
.log-weight-bar-fill { height: 100%; background: var(--grad); }

/* ===================== TRAINER / BEHEER ===================== */
.tr-body { padding: 1.25rem 20px 40px; max-width: 900px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 14px; }
.ig { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ig label, .ig .l { font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); }
.ig input, .ig select, .ig textarea { width: 100%; border: 1.5px solid var(--border); border-radius: 11px; padding: 11px 13px; font-family: inherit; font-size: 13px; background: #fff; color: var(--text); }
.ig textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
.ed-dag-blok, .ed-oef-blok { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-card); }
.checkup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.score-box { border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; background: #fff; }
.tr-chip { border: 1.5px solid var(--border); border-radius: 100px; padding: 8px 14px; background: #fff; font-size: 12px; font-weight: 600; color: var(--text2); font-family: inherit; }
.tr-chip.on { border-color: var(--brand); background: #e7f6f1; color: var(--brand-dark); font-weight: 700; }
@media (min-width: 900px) {
  #s-trainer .tr-body { max-width: 1120px; }
}

/* ===================== MODALS ===================== */
.overlay { position: fixed; inset: 0; background: rgba(1,32,24,.92); z-index: 300; display: none; align-items: center; justify-content: center; padding: 1.5rem; }
.overlay.active, .overlay.vis { display: flex; }
.ov-card { background: #fff; border-radius: 24px; padding: 2rem 1.75rem; max-width: 340px; width: 100%; text-align: center; box-shadow: var(--shadow-card); }
.ov-rings { position: relative; width: 70px; height: 70px; margin: 0 auto 1.25rem; }
.ov-ring { position: absolute; inset: 0; border-radius: 50%; border: 4px solid transparent; }
.ov-ring.r1 { border-top-color: var(--brand); animation: ovspin 1s linear infinite; }
.ov-ring.r2 { border-top-color: var(--brand-light); animation: ovspin 1.4s linear infinite; inset: 8px; }
.ov-ring.r3 { border-top-color: #fff0; border-left-color: var(--dim); animation: ovspin 1.8s linear infinite; inset: 16px; }
@keyframes ovspin { to { transform: rotate(360deg); } }
.ov-title { font-weight: 900; font-size: 18px; color: var(--text); margin-bottom: 8px; }
.ov-msg { font-size: 13px; color: var(--muted); line-height: 1.5; min-height: 40px; }
.ov-steps { }
.ov-step { font-size: 12px; color: var(--dim); margin-top: 12px; }
.ov-leeuw { }

.yv-score-modal-bg, .webapp-modal-bg { position: fixed; inset: 0; background: rgba(1,32,24,.55); z-index: 200; display: none; align-items: center; justify-content: center; padding: 1rem; }
.yv-score-modal-bg.open, .webapp-modal-bg.open { display: flex; }
.yv-score-modal { background: #fff; border-radius: 22px; max-width: 400px; width: 100%; max-height: 86vh; overflow-y: auto; box-shadow: 0 30px 70px -30px rgba(1,32,24,.6); }
.webapp-modal h3 { font-weight: 900; font-size: 18px; color: var(--text); margin-bottom: 6px; }
.modal-sub { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 1.25rem; }

/* oefening-picker */
#oef-picker-modal { position: fixed; inset: 0; z-index: 250; display: none; align-items: flex-end; justify-content: center; background: rgba(1,32,24,.55); }
#oef-picker-modal.vis { display: flex; }
/* cardio-apparaatkiezer */
#cardio-picker-modal { position: fixed; inset: 0; z-index: 250; display: none; align-items: flex-end; justify-content: center; background: rgba(1,32,24,.55); }
#cardio-picker-modal.vis { display: flex; }
.picker-hdr-sub { font-size: 12px; color: var(--muted2); margin-top: 6px; line-height: 1.45; }
.cardio-kies-rij { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; cursor: pointer; }
.cardio-kies-rij + .cardio-kies-rij { border-top: 1px solid #f0f4f2; border-radius: 0; }
.cardio-kies-rij:hover, .cardio-kies-rij:active { background: var(--surface2); }
.cardio-varianten { display: flex; gap: 6px; flex: 0 0 auto; }
.cardio-var { border: 1.5px solid var(--border); background: #fff; border-radius: 100px; padding: 6px 11px; font-size: 11.5px; font-weight: 700; color: var(--text2); font-family: inherit; cursor: pointer; }
.cardio-var.act { border-color: var(--brand); background: #e7f6f1; color: var(--brand-dark); }
.picker-huidig { font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #0c7d61; background: #e7f6f1; padding: 3px 7px; border-radius: 20px; margin-left: 6px; }
.picker-sheet { background: #fff; width: 100%; max-width: 480px; max-height: 88vh; border-radius: 24px 24px 0 0; display: flex; flex-direction: column; box-shadow: 0 -20px 60px -20px rgba(1,32,24,.5); overflow: hidden; }
.picker-hdr { padding: 18px 20px 14px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.picker-hdr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.picker-hdr-top > span { font-weight: 900; font-size: 16px; color: var(--text); }
.picker-sluit { background: var(--surface2); border: none; border-radius: 100px; color: var(--muted); font-size: 12.5px; font-weight: 700; padding: 7px 14px; cursor: pointer; font-family: inherit; }
#picker-zoek { width: 100%; border: 1.5px solid var(--border2); border-radius: 12px; padding: 11px 13px; font-family: inherit; font-size: 13px; background: #fff; color: var(--text); }
.picker-filters { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.picker-filter { border: 1.5px solid var(--border); border-radius: 100px; padding: 7px 13px; background: #fff; font-size: 12px; font-weight: 600; color: var(--text2); font-family: inherit; cursor: pointer; }
.picker-filter.act { border-color: var(--brand); background: #e7f6f1; color: var(--brand-dark); font-weight: 700; }
.picker-lijst { padding: 12px 18px 28px; overflow-y: auto; flex: 1 1 auto; }
.picker-spiergroep-hdr { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--dim); margin: 14px 0 8px; }
.picker-oef-rij { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; cursor: pointer; }
.picker-oef-rij:hover, .picker-oef-rij:active { background: var(--surface2); }
.picker-oef-foto { width: 46px; height: 46px; border-radius: 11px; object-fit: cover; background: #dcece5; flex: 0 0 auto; }
.picker-oef-naam { font-weight: 800; font-size: 13.5px; color: var(--text); }
.picker-oef-apparaat { font-size: 11px; color: var(--muted2); margin-top: 1px; }
.picker-geen { padding: 2rem 1rem; text-align: center; color: var(--muted2); font-size: 13px; }

/* ===================== LANDING (uitgelogd) ===================== */
.api-status { }
.api-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px; box-shadow: var(--shadow-card); }
.mini-in { }

/* ===================== DESKTOP ===================== */
@media (min-width: 720px) {
  .aanpas-opties { grid-template-columns: repeat(3, 1fr); }
}
@media print {

  /* == VERBERG ALLES WAT NIET IN PDF MOET == */
  .hdr, .quiz-nav, .res-actions, .action-box, .mw-box, .overlay,
  .nav-btn, .aanpas-section, .ex-actions, .schema-melding,
  .no-print, .ex-header-btns, .ex-weight-btn, .dag-tabs-nav,
  .ex-uitleg-toggle, .section.aanpas-section, .ex-rustbar, .ex-knoppenrij, .ex-notitie-box,
  .vonk-wrap, .dag-start-wrap, .yv-score-blok { display: none !important; }

  /* == TABS: alle panels zichtbaar == */
  .dag-panel { display: block !important; }
  .dag-panel + .dag-panel { margin-top: 0 !important; }

  /* == COLLAPSIBLES: header verbergen, body tonen, print-titels tonen == */
  [data-collapsible] { display: none !important; }
  .collapsible-body { display: block !important; padding: 0 !important; margin-bottom: 8pt !important; }
  .print-section-title { display: block !important; font-size: 8pt !important; font-weight: 700 !important; color: #1a1a1a !important; text-transform: uppercase !important; letter-spacing: .06em !important; margin-top: 10pt !important; margin-bottom: 4pt !important; padding-bottom: 2pt !important; border-bottom: 1pt solid #e0e0e0 !important; }
  /* Uitlegblok collapsible: header verbergen, body tonen in print */
  .uitleg-collapsible-hdr { display: none !important; }
  .uitleg-collapsible-body { display: block !important; }
  .uitleg-collapsible { border: none !important; border-left: 2pt solid #009775 !important; border-radius: 0 !important; padding: 4pt 8pt !important; margin-bottom: 8pt !important; }

  /* == PAGINA INSTELLINGEN == */
  @page {
    size: A4 portrait;
    margin: 1.2cm 1.4cm 1.5cm 1.4cm;
  }

  /* == KLEUR AFDRUKKEN == */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* == BASIS == */
  html, body { background: #ffffff !important; color: #1a1a1a !important; font-family: Arial, sans-serif !important; font-size: 9pt !important; line-height: 1.45 !important; }

  /* == HERO == */
  .res-hero { background: #ffffff !important; padding: 0 0 8pt 0 !important; margin: 0 !important; border: none !important; border-bottom: 2pt solid #009775 !important; page-break-after: avoid !important; }
  .res-hero-in { max-width: 100% !important; padding: 0 !important; }
  .res-hero h2 { color: #009775 !important; font-size: 17pt !important; font-weight: 700 !important; margin: 0 0 4pt 0 !important; line-height: 1.15 !important; text-transform: uppercase !important; }
  .res-hero p { color: #444 !important; font-size: 8pt !important; margin: 0 0 5pt 0 !important; line-height: 1.5 !important; }
  .pills { display: flex !important; flex-wrap: wrap !important; gap: 4pt !important; margin: 0 0 6pt 0 !important; }
  .pill { background: #f0faf6 !important; border: 1pt solid #009775 !important; color: #006e55 !important; font-size: 6.5pt !important; font-weight: 600 !important; padding: 1.5pt 5pt !important; border-radius: 2pt !important; }
  .pill strong { color: #009775 !important; }

  /* == BODY == */
  .res-body { padding: 8pt 0 0 0 !important; max-width: 100% !important; }

  /* == SECTIES (voeding, progressie etc.) == */
  .section { margin-top: 14pt !important; page-break-inside: avoid; }
  .sec-title { font-size: 9pt !important; font-weight: 700 !important; color: #1a1a1a !important; margin-bottom: 8pt !important; padding-left: 7pt !important; border-left: 2.5pt solid #009775 !important; text-transform: uppercase !important; letter-spacing: .07em !important; border-bottom: none !important; padding-bottom: 0 !important; }

  /* == UITLEGBLOKKEN (adv-card - intro/tips) == */
  .adv-card { background: #f9f9f9 !important; border: none !important; border-left: 2pt solid #009775 !important; border-radius: 0 !important; padding: 5pt 8pt !important; margin-bottom: 4pt !important; page-break-inside: avoid !important; display: block !important; }
  .adv-card h4 { color: #009775 !important; font-size: 8pt !important; margin-bottom: 2pt !important; }
  .adv-card p, .adv-card ul, .adv-card li { color: #444 !important; font-size: 7.5pt !important; line-height: 1.45 !important; }
  .adv-card ul { padding-left: 9pt !important; }

  /* == WEEK GRID == */
  .week-grid { display: block !important; border: none !important; border-radius: 0 !important; background: transparent !important; }

  /* == DAG KAART — geen border, alleen header als scheiding == */
  .day-card { border: none !important; border-radius: 0 !important; overflow: visible !important; background: #ffffff !important; margin-bottom: 0 !important; }

  /* == DAG HEADER — houd header samen met inhoud eronder == */
  .day-hdr { background: #009775 !important; padding: 5pt 10pt !important; display: flex !important; align-items: center !important; gap: 6pt !important; margin-top: 10pt !important; margin-bottom: 6pt !important; page-break-after: avoid !important; break-after: avoid !important; }
  .day-nm { color: rgba(255,255,255,.7) !important; font-size: 6.5pt !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .1em !important; }
  .day-focus { color: #fff !important; font-size: 8.5pt !important; font-weight: 700 !important; text-transform: uppercase !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; }
  .day-focus.rest { color: rgba(255,255,255,.6) !important; }

  /* == WARMING-UP / COOLING-DOWN — simpel, geen achtergrond == */
  .special-row { padding: 4pt 0 4pt 0 !important; background: transparent !important; border: none !important; border-bottom: 1pt solid #e8e8e8 !important; display: flex !important; gap: 6pt !important; align-items: baseline !important; margin-bottom: 4pt !important; }
  .special-row svg { display: none !important; }
  .special-lbl { font-size: 6.5pt !important; color: #009775 !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .09em !important; white-space: nowrap !important; flex-shrink: 0 !important; }
  .special-lbl.dim { color: #888 !important; }
  .special-val { font-size: 8pt !important; color: #555 !important; line-height: 1.4 !important; }

  /* == OEFENING LIJST — 2 kolommen == */
  .ex-list { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 5pt !important; padding: 0 !important; margin-top: 4pt !important; }

  /* == OEFENING RIJ == */
  .ex-row { display: block !important; padding: 6pt 7pt !important; border: 1pt solid #e8e8e8 !important; border-radius: 3pt !important; page-break-inside: avoid !important; break-inside: avoid !important; background: #ffffff !important; margin-bottom: 0 !important; }
  .ex-row:nth-child(even) { background: #ffffff !important; }
  .ex-row-top { display: flex !important; flex-direction: row !important; gap: 6pt !important; align-items: flex-start !important; }

  /* == FOTO == */
  .ex-img-wrap { width: 44pt !important; height: 44pt !important; min-width: 44pt !important; border-radius: 3pt !important; background: #f5f5f5 !important; border: none !important; display: block !important; overflow: hidden !important; flex-shrink: 0 !important; margin-bottom: 0 !important; }
  .ex-img-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 35% !important; }
  .ex-info { flex: 1 !important; min-width: 0 !important; display: block !important; }

  /* == OEFENING INFO == */
  .ex-header { display: block !important; margin-bottom: 1pt !important; }
  .ex-optioneel { font-size: 5.5pt !important; padding: 1pt 3pt !important; margin-top: 2pt !important; }
  .ex-nm { font-size: 8.5pt !important; font-weight: 700 !important; color: #1a1a1a !important; line-height: 1.2 !important; display: block !important; }
  .ex-header-btns { display: none !important; }
  .ex-app { font-size: 5.5pt !important; color: #009775 !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .07em !important; display: block !important; margin-bottom: 3pt !important; }
  .ex-uitleg { font-size: 7pt !important; color: #444 !important; line-height: 1.45 !important; background: #f5f5f5 !important; border-radius: 2pt !important; padding: 3pt 5pt !important; border: none !important; border-left: 1.5pt solid #009775 !important; white-space: normal !important; word-wrap: break-word !important; overflow-wrap: break-word !important; display: block !important; margin-bottom: 3pt !important; margin-top: 2pt !important; }

  /* == SETS, RUST EN GEWICHT == */
  .ex-sets-line { display: flex !important; align-items: baseline !important; gap: 3pt !important; margin-top: 3pt !important; }
  .ex-sets-count { font-size: 6pt !important; color: #888 !important; text-transform: uppercase !important; }
  .ex-sets { font-size: 8.5pt !important; font-weight: 700 !important; color: #009775 !important; font-family: Arial, sans-serif !important; }
  .ex-rust-line { font-size: 6.5pt !important; color: #888 !important; margin-top: 1pt !important; margin-bottom: 0 !important; display: block !important; }
  .ex-weight { display: flex !important; align-items: center !important; gap: 3pt !important; margin-top: 3pt !important; }
  .ex-weight-btn { display: none !important; }
  .ex-weight-lbl { font-size: 6pt !important; color: #888 !important; text-transform: uppercase !important; }
  .ex-weight-lbl span { display: none !important; }
  .ex-weight-val { font-size: 8pt !important; font-weight: 700 !important; color: #009775 !important; border: none !important; background: transparent !important; min-width: auto !important; height: auto !important; padding: 0 !important; display: inline !important; }

  /* == VOEDING == */
  .macro-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 6pt !important; margin-bottom: 10pt !important; }
  .macro-card { background: #f9f9f9 !important; border: 1pt solid #e8e8e8 !important; border-radius: 3pt !important; padding: 7pt 8pt !important; text-align: center !important; page-break-inside: avoid !important; }
  .macro-ico { display: none !important; }
  .macro-nm { font-size: 6.5pt !important; color: #888 !important; text-transform: uppercase !important; display: block !important; letter-spacing: .05em !important; margin-bottom: 2pt !important; }
  .macro-val { font-size: 14pt !important; color: #009775 !important; font-weight: 700 !important; display: block !important; line-height: 1.1 !important; }
  .macro-unit { font-size: 6.5pt !important; color: #888 !important; }
  .macro-why { font-size: 6.5pt !important; color: #555 !important; line-height: 1.4 !important; margin-top: 3pt !important; }

  /* == VOOR/NA TRAINING (adv-card in collapsible-body) == */
  .collapsible-body .adv-card { border-left: none !important; background: transparent !important; padding: 4pt 0 !important; }
  .collapsible-body .adv-card p { font-size: 7.5pt !important; color: #444 !important; }
  .collapsible-body .adv-card strong { color: #009775 !important; }

  /* == PROGRESSIESCHEMA == */
  .prog-block { background: transparent !important; border: none !important; border-bottom: 1pt solid #e8e8e8 !important; border-radius: 0 !important; padding: 5pt 0 !important; margin-bottom: 0 !important; page-break-inside: avoid !important; }
  .prog-block:last-child { border-bottom: none !important; }
  .prog-block div:first-child { font-size: 8pt !important; font-weight: 700 !important; color: #1a1a1a !important; margin-bottom: 2pt !important; }
  .prog-block div:last-child { font-size: 7.5pt !important; color: #555 !important; line-height: 1.45 !important; }

  /* == PERSOONLIJKE TIPS == */
  .collapsible-body ul { padding-left: 10pt !important; margin: 0 !important; }
  .collapsible-body li { font-size: 7.5pt !important; color: #444 !important; line-height: 1.5 !important; margin-bottom: 3pt !important; }
  .collapsible-body > div { background: transparent !important; border: none !important; padding: 0 !important; }

  /* == FOOTER == */
  .print-footer { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: 12pt !important; padding-top: 4pt !important; border-top: 1pt solid #e0e0e0 !important; font-size: 6.5pt !important; color: #aaa !important; }
  .print-footer strong { color: #009775 !important; }

  @page {
    @bottom-center { content: "YVSPORT Fitclub — YV Coach"; font-size: 6.5pt; color: #aaa; }
    @bottom-right { content: "Pagina " counter(page) " van " counter(pages); font-size: 6.5pt; color: #aaa; }
  }
}

/* ---- welkomst: uitlijning + duo-blokken + geen dubbele schaduw ---- */
.feat svg, .wc-sbtn svg, .bn-item svg, .wc-cta-arrow svg { display: block; }
.wc-sbtn svg { flex-shrink: 0; }
.feat h4 { line-height: 1.2; }
.yv-score-welcome .yv-score-blok { background: transparent; box-shadow: none; border: none; padding: 0; }
.feat-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feat-duo .feat { flex-direction: column; align-items: flex-start; gap: 10px; }
.feat-duo .feat h4 { font-size: 13px; }
.feat-duo .feat p { font-size: 11.5px; }

/* ---- schema YV Score: label-loze mini-balkjes (zoals ontwerp) ---- */
#yv-score-result .yv-score-bars, #yv-score-log .yv-score-bars { gap: 5px; }
#yv-score-result .yv-score-bar-lbl, #yv-score-log .yv-score-bar-lbl { display: none; }
#yv-score-result .yv-score-bar-track, #yv-score-log .yv-score-bar-track { width: 100%; height: 5px; }
#yv-score-result .yv-score-bar-fill, #yv-score-log .yv-score-bar-fill { background: #00c795; }

/* ============================================================
   VOORTGANGSPAGINA -- groene header (exact ontwerp)
   ============================================================ */
.log-hero { background: linear-gradient(150deg, #00c795, #009775); border-radius: 0 0 66px 0; padding: calc(14px + env(safe-area-inset-top)) 22px 58px; position: relative; z-index: 1; }
.log-hero-top { display: flex; align-items: center; justify-content: space-between; }
.log-hero-kicker { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.9); }
.log-hero-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; }
.log-hero-naam { font-weight: 900; font-size: 26px; color: #fff; line-height: 1; margin-top: 20px; }
.log-hero-week { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.84); margin-top: 7px; }

/* voortgang-uitleg toggle (handler zet .open op body + chevron) */
.uitleg-collapsible-body.open { display: block; }
.uitleg-collapsible-chev.open { transform: rotate(180deg); }
.log-sectie-title { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #9aa8a3; }
.log-leeg { background: #fff; border-radius: 16px; padding: 16px 18px; font-size: 12.5px; color: #7c8b85; line-height: 1.6; box-shadow: 0 14px 32px -24px rgba(10,60,45,.3); }

/* icoon per YV Score-balkje (verduidelijkt welke lijn wat is) */
.yv-score-bar-ico { color: #009775; flex: 0 0 auto; display: flex; align-items: center; }
.yv-score-bar-ico.vonk { color: #e08320; }

/* schema terug-pijltje 1.5px naar links (optisch centreren) */
#btn-result-back svg { transform: translateX(-1.5px); }
/* code-invoer modal (login) in onze stijl */
.code-modal-bg { position: fixed; inset: 0; background: rgba(1,32,24,.55); z-index: 320; display: none; align-items: center; justify-content: center; padding: 1.5rem; }
.code-modal-bg.open { display: flex; }
.code-modal { background: #fff; border-radius: 24px; padding: 26px 22px; max-width: 340px; width: 100%; text-align: center; box-shadow: 0 30px 70px -20px rgba(1,32,24,.6); }
.code-modal-ico { width: 52px; height: 52px; border-radius: 16px; background: rgba(0,151,117,.1); color: var(--brand); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.code-modal-title { font-weight: 900; font-size: 18px; color: var(--text); }
.code-modal-sub { font-size: 12.5px; color: var(--muted); margin: 5px 0 16px; line-height: 1.4; }
.code-modal-input { width: 100%; border: 1.5px solid var(--border2); border-radius: 13px; padding: 13px 14px; font-family: inherit; font-size: 16px; text-align: center; letter-spacing: .1em; font-weight: 700; color: var(--text); background: #fff; }
.code-modal-input:focus { outline: none; border-color: var(--brand); }
.code-modal-err { font-size: 12px; color: var(--danger); min-height: 16px; margin-top: 8px; }
.code-modal-btns { display: flex; gap: 10px; margin-top: 6px; }
.code-modal-cancel { flex: 1; border: 1.5px solid var(--border2); background: #fff; color: var(--muted); font-weight: 700; border-radius: 13px; padding: 13px; font-family: inherit; font-size: 13.5px; cursor: pointer; }
.code-modal-ok { flex: 1; border: none; background: var(--grad); color: #fff; font-weight: 800; border-radius: 13px; padding: 13px; font-family: inherit; font-size: 13.5px; cursor: pointer; box-shadow: 0 12px 24px -12px rgba(0,151,117,.7); }
.code-modal-ok:disabled { opacity: .6; }

/* ============================================================
   DESKTOP -- app gecentreerd; trainer/beheer breder
   ============================================================ */
@media (min-width: 760px) {
  body { background: #e6efe9; }
  .screen { max-width: 560px; margin-left: auto; margin-right: auto; }
  #s-trainer, #s-beheer { max-width: 1040px; }
  .bottomnav { max-width: 500px; }
}

/* ============================================================
   TRAINER SCHEMA-EDITOR -- velden en kaarten (nieuwe stijl)
   ============================================================ */
#tr-editor-body .sec-hdr { font-size: 15px; font-weight: 900; color: #16241f; text-transform: none; letter-spacing: 0; margin: 4px 0 10px; }
#tr-editor-body .ed-grid { display: block; }
#tr-editor-body .ig { margin-bottom: 12px; }
#tr-editor-body .ig label, #tr-editor-body .ig .l { font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #9aa8a3; margin-bottom: 6px; display: block; }
#tr-editor-body .ig input, #tr-editor-body .ig select, #tr-editor-body .ig textarea { width: 100%; border: 1.5px solid #e6efec; border-radius: 11px; padding: 11px 12px; font-family: inherit; font-size: 12.5px; background: #fff; color: #16241f; line-height: 1.4; }
#tr-editor-body .ig input:focus, #tr-editor-body .ig select:focus, #tr-editor-body .ig textarea:focus { outline: none; border-color: var(--brand); }
#tr-editor-body .ed-dag-blok { background: #fff !important; border: none !important; border-radius: 18px !important; padding: 16px !important; box-shadow: 0 14px 32px -24px rgba(10,60,45,.3); margin-bottom: 14px !important; }
#tr-editor-body .ed-dag-blok > div:first-child > div { font-weight: 900 !important; font-size: 14px !important; color: var(--brand) !important; }
#tr-editor-body .ed-oef-blok { background: #fff !important; border: 1.5px solid #eef2f0 !important; border-radius: 14px !important; padding: 13px !important; margin-bottom: 10px !important; }
#tr-editor-body .ed-oef-del { font-size: 10.5px !important; font-weight: 700 !important; color: #c0473c !important; border: none !important; background: transparent !important; }
#tr-editor-body .ed-oef-add { width: 100%; border: 1.5px dashed #cfe4dc !important; background: #fff; color: var(--brand) !important; border-radius: 12px !important; padding: 12px !important; font-weight: 700; font-size: 12px; font-family: inherit; cursor: pointer; }
/* macro-velden voeding: 3 kolommen */
#tr-editor-body .ig-macro-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }


@media (min-width: 760px) {
  #tr-editor-body { max-width: 820px; margin: 0 auto; }
  #tr-editor-body .ed-grid { display: block; }
}
/* oefening-picker rijen (juiste class-namen, nette horizontale rij) */
#picker-zoek { font-size: 16px; }
.picker-oef { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; }
.picker-oef + .picker-oef { border-top: 1px solid #f0f4f2; border-radius: 0; }
.picker-oef-foto { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: #dcece5; flex: 0 0 auto; }
.picker-oef-info { flex: 1; min-width: 0; }
.picker-oef-naam { font-weight: 800; font-size: 13.5px; color: #16241f; }
.picker-oef-meta { font-size: 11px; color: #7c8b85; margin-top: 2px; line-height: 1.35; }
.picker-oef-add { flex: 0 0 auto; background: var(--grad); color: #fff; border: none; border-radius: 10px; padding: 9px 13px; font-size: 11.5px; font-weight: 800; font-family: inherit; cursor: pointer; white-space: nowrap; box-shadow: 0 10px 20px -12px rgba(0,151,117,.6); }
.picker-oef-add:active { transform: scale(.96); }

/* ============================================================
   NIEUW DESIGN -- 4 resterende schermen (quiz, laadscherm,
   installatie-modal, trainer-intake)
   ============================================================ */

/* ---- 1. INTAKE-QUIZ ---- */
#s-quiz .quiz-wrap { padding: 24px 20px 40px; }
#s-quiz .prog-wrap { height: 8px; border-radius: 6px; background: #e2ede8; overflow: hidden; margin-bottom: 24px; }
#s-quiz .prog-fill { height: 100%; background: var(--grad); border-radius: 6px; transition: width .3s ease; }
#s-quiz .step-lbl { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
#s-quiz .quiz-q { font-size: 23px; font-weight: 900; line-height: 1.15; color: var(--text); }
#s-quiz .quiz-sub { font-size: 13px; color: var(--muted); margin: 8px 0 22px; line-height: 1.5; }
#s-quiz .opts { display: grid; grid-template-columns: 1fr; gap: 11px; }
#s-quiz .opts.c2 { grid-template-columns: 1fr 1fr; }
#s-quiz .opts.c3 { grid-template-columns: 1fr 1fr 1fr; }
#s-quiz .opt { background: #fff; border: 1.5px solid var(--border); border-radius: 16px; padding: 16px 14px; text-align: left; font-family: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: transform .12s, box-shadow .15s; box-shadow: 0 10px 26px -22px rgba(10,60,45,.3); }
#s-quiz .opt:active { transform: scale(.98); }
#s-quiz .opt.sel { background: var(--grad); border-color: transparent; box-shadow: 0 16px 30px -16px rgba(0,151,117,.6); }
#s-quiz .opt .ico { display: flex; width: 30px; height: 30px; border-radius: 9px; background: rgba(0,151,117,.1); color: var(--brand); align-items: center; justify-content: center; margin-bottom: 6px; font-size: 16px; }
#s-quiz .opt .ico svg { width: 17px; height: 17px; }
#s-quiz .opt.sel .ico { background: rgba(255,255,255,.2); color: #fff; }
#s-quiz .opt .lbl { font-weight: 800; font-size: 14px; color: var(--text); }
#s-quiz .opt.sel .lbl { color: #fff; }
#s-quiz .opt .desc { font-size: 11px; color: var(--muted2); }
#s-quiz .opt.sel .desc { color: rgba(255,255,255,.85); }
#s-quiz .txt-in, #s-quiz .free-input { width: 100%; border: 1.5px solid var(--border); border-radius: 13px; padding: 14px; font-size: 16px; font-family: inherit; background: #fff; color: var(--text); }
#s-quiz .txt-in:focus, #s-quiz .free-input:focus { outline: none; border-color: var(--brand); }
#s-quiz .chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; }
#s-quiz .chip { border: 1.5px solid var(--border); background: #fff; color: var(--muted); border-radius: 100px; padding: 9px 15px; font-size: 13px; font-weight: 700; cursor: pointer; }
#s-quiz .chip.sel { background: var(--grad); border-color: transparent; color: #fff; }
#s-quiz .rng-wrap { margin: 8px 0 4px; }
#s-quiz .rng-val { font-weight: 900; font-size: 30px; color: var(--brand); text-align: center; margin-top: 10px; }
#s-quiz .rng-lbls { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); font-weight: 700; }
#s-quiz .notice { background: #fff7e8; border: 1px solid #ffe1a8; border-radius: 12px; padding: 12px 14px; font-size: 12.5px; color: #8a6a1e; line-height: 1.5; margin-bottom: 14px; }
#s-quiz .notice.info { background: #eef7f3; border-color: var(--border2); color: var(--deep); }
#s-quiz .quiz-nav { display: flex; gap: 10px; margin-top: 26px; }
#s-quiz .quiz-nav .btn-outline { flex: 0 0 auto; background: #fff; border: 1.5px solid var(--border2); color: var(--muted); font-weight: 700; border-radius: 14px; padding: 15px 22px; font-family: inherit; font-size: 13.5px; cursor: pointer; }
#s-quiz .quiz-nav .btn-primary { flex: 1; background: var(--grad); color: #fff; font-weight: 800; border: none; border-radius: 14px; padding: 15px; font-family: inherit; font-size: 14px; cursor: pointer; box-shadow: 0 16px 30px -14px rgba(0,151,117,.55); }

/* ---- 2. LAADSCHERM (#ov) ---- */
#ov { background: linear-gradient(165deg,#00c795,#009775 55%,#00623f) !important; }
#ov .ov-card { background: transparent !important; box-shadow: none !important; border: none !important; text-align: center; color: #fff; }
#ov .ov-title { color: #fff !important; font-weight: 900; font-size: 22px; }
#ov .ov-msg { color: rgba(255,255,255,.85) !important; font-size: 13px; }
#ov .ov-ring { border-color: rgba(255,255,255,.25) !important; border-top-color: #c8ff6e !important; }
#ov .ov-steps { display: flex; flex-direction: column; gap: 7px; margin: 18px 0 6px; }
#ov .ov-step { color: rgba(255,255,255,.55) !important; font-size: 12.5px; font-weight: 600; background: transparent !important; border: none !important; }
#ov .ov-step.active { color: #c8ff6e !important; font-weight: 800; }

/* ---- 3. INSTALLATIE-MODAL (#webapp-modal-bg) -- zwevende gecentreerde modal ---- */
.webapp-modal-bg { position: fixed; inset: 0; background: rgba(1,32,24,.5); z-index: 300; display: none; align-items: center; justify-content: center; padding: 24px; }
.webapp-modal-bg.open { display: flex; }
.webapp-modal { position: relative; background: #fff; width: 100%; max-width: 400px; max-height: 86vh; overflow-y: auto; border-radius: 26px; padding: 30px 24px; box-shadow: 0 -20px 60px -20px rgba(1,32,24,.5); }
.webapp-modal-close { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; border-radius: 50%; border: none; background: #eef2f0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.webapp-modal-ico { width: 56px; height: 56px; border-radius: 17px; background: var(--grad); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; box-shadow: 0 14px 26px -12px rgba(0,151,117,.6); }
.webapp-modal h3, .webapp-modal-title { text-align: center; font-weight: 900; font-size: 19px; color: var(--text); margin: 0; }
.webapp-modal .modal-sub { text-align: center; font-size: 12.5px; color: var(--muted); margin: 6px 0 18px; line-height: 1.5; }
.webapp-tabs { display: flex; gap: 8px; justify-content: center; margin: 14px 0; }
.webapp-tab { border: 1.5px solid var(--border2); background: #fff; color: var(--muted); border-radius: 100px; padding: 8px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.webapp-tab.active { background: var(--grad); color: #fff; border-color: transparent; }
.webapp-steps { display: none; flex-direction: column; gap: 13px; }
.webapp-steps.active { display: flex; }
.webapp-step { display: flex; gap: 13px; align-items: flex-start; }
.webapp-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.webapp-step-txt { font-size: 13px; color: var(--text); line-height: 1.45; }
.webapp-step-txt em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted2); margin-top: 2px; }

/* ---- 4. TRAINER AI-INTAKE (tr-intake-view) ---- */
#tr-intake-view { padding: 0 18px 40px; }
#tr-intake-view .tr-body { padding: 0; }
#tr-intake-view .sec-hdr { font-size: 15px; font-weight: 900; color: #16241f; text-transform: none; letter-spacing: 0; margin: 22px 0 12px; }
#tr-intake-view .checkup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
#tr-intake-view .cfield { background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 12px 28px -24px rgba(10,60,45,.3); }
#tr-intake-view .cfield label { font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); display: block; margin-bottom: 6px; }
#tr-intake-view .score-box { display: flex; align-items: baseline; gap: 3px; margin-bottom: 8px; }
#tr-intake-view .score-v { font-weight: 900; font-size: 22px; color: var(--brand); }
#tr-intake-view .score-u { font-size: 11px; color: var(--muted2); font-weight: 700; }
#tr-intake-view .mini-in, #tr-intake-view .ig input, #tr-intake-view .ig select { width: 100%; border: 1.5px solid var(--border); border-radius: 11px; padding: 11px 12px; font-size: 16px; font-family: inherit; background: #fff; color: var(--text); }
#tr-intake-view .tr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
#tr-intake-view .ig { margin: 0; }
#tr-intake-view .ig label { font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); display: block; margin-bottom: 6px; }

/* ---- BEOORDELINGSBLOK (na training) -- nieuw design ---- */
.dag-beoor-wrap { background: #fff; border-radius: 20px; padding: 18px; box-shadow: 0 16px 34px -24px rgba(10,60,45,.35); margin-top: 14px; }
.dag-beoor-label { font-weight: 900; font-size: 16px; color: var(--text); margin-bottom: 14px; }
.dag-beoor-btns { display: flex; gap: 8px; }
.dag-beoor-btn { flex: 1; background: #fff; border: 1.5px solid var(--border); border-radius: 13px; padding: 13px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: inherit; cursor: pointer; transition: transform .12s; }
.dag-beoor-btn:active { transform: scale(.97); }
.dag-beoor-btn-ico { width: 26px; height: 26px; border-radius: 50%; background: #eef2f0; color: #9aa8a3; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; line-height: 1; }
.dag-beoor-btn-lbl { font-size: 11px; font-weight: 700; color: var(--muted); }
.dag-beoor-btn.sel-done { border-color: var(--brand); background: rgba(0,151,117,.06); }
.dag-beoor-btn.sel-done .dag-beoor-btn-ico { background: var(--brand); color: #fff; }
.dag-beoor-btn.sel-done .dag-beoor-btn-lbl { color: var(--brand); }
.dag-beoor-btn.sel-partial { border-color: #e8a53a; background: rgba(255,182,77,.12); }
.dag-beoor-btn.sel-partial .dag-beoor-btn-ico { background: #ffb64d; color: #fff; }
.dag-beoor-btn.sel-partial .dag-beoor-btn-lbl { color: #b8801f; }
.dag-beoor-btn.sel-skip { border-color: #b7c2bd; background: #f2f6f4; }
.dag-beoor-btn.sel-skip .dag-beoor-btn-ico { background: #b7c2bd; color: #fff; }
.dag-beoor-btn.sel-skip .dag-beoor-btn-lbl { color: var(--muted2); }
.dag-beoor-notitie { width: 100%; border: 1.5px solid var(--border); border-radius: 13px; padding: 12px 14px; font-size: 16px; font-family: inherit; background: #fff; color: var(--text); margin-top: 12px; resize: none; line-height: 1.45; }
.dag-beoor-notitie:focus { outline: none; border-color: var(--brand); }
.dag-beoor-opslaan { width: 100%; margin-top: 12px; background: var(--grad); color: #fff; font-weight: 800; border: none; border-radius: 14px; padding: 14px; font-family: inherit; font-size: 14px; cursor: pointer; box-shadow: 0 16px 30px -14px rgba(0,151,117,.55); }
.dag-beoor-opslaan-dis, .dag-beoor-opslaan:disabled { opacity: .5; box-shadow: none; cursor: default; }
.dag-beoor-motivatie { font-size: 12.5px; color: var(--brand); text-align: center; margin-top: 12px; font-weight: 700; }
.dag-beoor-motivatie:empty { display: none; }

/* ============================================================
   OPTIE B -- rustige trainingskaart (status + compacte Vonk)
   Huidige Vonk-SVG-iconen blijven behouden.
   ============================================================ */
/* Start-knop (voor starten): zachtere schaduw + lucht eronder */
.dag-start-btn { box-shadow: 0 12px 22px -14px rgba(0,151,117,.45) !important; }

/* Na starten: status = bovenkant van EEN kaart */
.dag-start-wrap:has(.dag-start-btn.gestart) { background: #fff; border-radius: 20px 20px 0 0; padding: 15px 16px 13px; box-shadow: 0 16px 34px -22px rgba(10,60,45,.4); }
.dag-start-btns:has(.gestart) { justify-content: space-between; align-items: center; gap: 10px; }
.dag-start-btn.gestart { flex: 0 0 auto; background: transparent !important; color: var(--brand) !important; font-weight: 900; font-size: 15px; box-shadow: none !important; padding: 0 !important; justify-content: flex-start; border-radius: 0; }
.dag-start-btns:has(.gestart) .dag-stop-btn { flex: 0 0 auto; background: #fbecea; border: none; color: var(--danger); padding: 8px 13px; border-radius: 10px; font-size: 12px; font-weight: 700; }


/* == ACTIVITEIT LOGGEN (groepsles / biocircuit / vrije training) == */
.log-card { background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 14px 30px -22px rgba(10,60,45,.3); }
.log-card-h { font-size: 13px; font-weight: 900; color: #16241f; margin-bottom: 2px; }
.log-card-s { font-size: 11.5px; color: #5a6b65; margin-bottom: 12px; }
.log-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.log-tile { background: #f6faf8; border: 1px solid #e3ede9; border-radius: 14px; padding: 12px 8px; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 7px; color: #16241f; }
.log-tile:active { transform: scale(.97); }
.log-tile-ic { width: 34px; height: 34px; border-radius: 11px; background: rgba(0,151,117,.1); display: flex; align-items: center; justify-content: center; color: #009775; }
.log-tile-t { font-size: 11px; font-weight: 800; text-align: center; line-height: 1.15; }

#les-picker-modal, #activiteit-log-modal { position: fixed; inset: 0; z-index: 250; display: none; align-items: flex-end; justify-content: center; background: rgba(1,32,24,.55); }
#les-picker-modal.vis, #activiteit-log-modal.vis { display: flex; }
#les-picker-zoek { width: 100%; border: 1.5px solid var(--border2); border-radius: 12px; padding: 11px 13px; font-family: inherit; font-size: 16px; background: #fff; color: var(--text); }

.les-pick-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; cursor: pointer; }
.les-pick-row:active { background: var(--surface2); }
.les-pick-row + .les-pick-row { border-top: 1px solid #f0f4f2; border-radius: 0; }
.les-pick-ic { width: 42px; height: 42px; border-radius: 12px; background: rgba(0,151,117,.09); color: #009775; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.les-pick-naam { font-weight: 800; font-size: 14px; color: #16241f; }

.act-log-body { padding: 16px 18px 22px; overflow-y: auto; }
.act-log-vonk-lbl { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #9aa8a3; margin: 2px 0 8px; }
.alog-vonk { display: flex; background: #f2f6f4; border-radius: 12px; padding: 3px; gap: 2px; }
.alog-vonk button { flex: 1; border: none; background: transparent; border-radius: 9px; padding: 9px 2px; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #5a6b65; font-size: 10px; font-weight: 800; }
.alog-vonk button.on { background: #fff; color: #009775; box-shadow: 0 4px 10px -4px rgba(10,60,45,.25); }
.act-log-note { width: 100%; margin-top: 14px; border: 1.5px solid var(--border2); border-radius: 12px; padding: 11px 13px; font-size: 16px; font-family: inherit; color: #16241f; background: #fff; resize: none; line-height: 1.4; }
.act-log-save { width: 100%; margin-top: 14px; background: var(--grad); color: #fff; border: none; border-radius: 14px; padding: 14px; font-weight: 800; font-size: 13.5px; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 14px 26px -12px rgba(0,151,117,.6); }
.act-log-save:active { transform: scale(.98); }

/* Tips verbergen-toggle op de schemapagina */
.tips-toggle-bar { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e6efec; border-radius: 16px; padding: 13px 15px; box-shadow: 0 14px 30px -24px rgba(10,60,45,.3); cursor: pointer; }
.tips-toggle-bar .tt-ic { width: 36px; height: 36px; border-radius: 11px; background: #eefaf5; color: #009775; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.tips-toggle-bar .tt-txt { flex: 1; min-width: 0; }
.tips-toggle-bar .tt-title { font-weight: 900; font-size: 14px; color: #16241f; }
.tips-toggle-bar .tt-sub { font-size: 11px; color: #7c8b85; margin-top: 1px; }
.tips-toggle-bar .tt-switch { width: 50px; height: 29px; border-radius: 99px; background: #009775; position: relative; flex: 0 0 auto; transition: background .2s; }
.tips-toggle-bar .tt-switch.off { background: #cdd8d3; }
.tips-toggle-bar .tt-knob { position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: left .2s; }
.tips-toggle-bar .tt-switch.off .tt-knob { left: 24px; }
#r-body.tips-verborgen .tip-hideable { display: none !important; }
#r-body.cardio-verborgen .cardio-hideable { display: none !important; }
.toggle-stapel { display: flex; flex-direction: column; gap: 10px; }

/* == Deelkaart (deelbare progressiekaart) == */
.deel-open-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border:none;border-radius:16px;background:linear-gradient(135deg,#00c795,#009775);color:#fff;font-family:inherit;font-weight:800;font-size:14.5px;box-shadow:0 16px 30px -14px rgba(0,151,117,.6);cursor:pointer;}
.deel-modal-bg{position:fixed;inset:0;z-index:200;background:rgba(10,30,24,.55);display:none;align-items:center;justify-content:center;padding:16px;}
.deel-modal-bg.open{display:flex;}
.deel-modal{background:#f3f8f5;border-radius:22px;width:100%;max-width:460px;max-height:94vh;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;}
.deel-modal-head{display:flex;align-items:center;justify-content:space-between;}
.deel-modal-title{font-weight:900;font-size:16px;color:#16241f;}
.deel-modal-close{width:34px;height:34px;border-radius:10px;border:none;background:#fff;color:#5a6b65;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.deel-canvas-wrap{display:flex;justify-content:center;background:#e6efec;border-radius:16px;padding:10px;}
#deel-canvas{width:auto;max-width:100%;max-height:58vh;height:auto;border-radius:10px;display:block;box-shadow:0 12px 30px -18px rgba(10,60,45,.4);}
.deel-fotos{display:flex;gap:10px;}
.deel-foto-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border:1.5px solid #cfe4dc;border-radius:14px;background:#fff;color:#0c7d61;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;}
.deel-toggle{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:#16241f;padding:2px 4px;}
.deel-toggle input{width:18px;height:18px;accent-color:#009775;}
.deel-actions{display:flex;gap:10px;}
.deel-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:16px;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;border:none;}
.deel-btn-ghost{background:#fff;border:1.5px solid #cfe4dc;color:#0c7d61;}
.deel-btn-primary{background:linear-gradient(135deg,#00c795,#009775);color:#fff;box-shadow:0 16px 30px -14px rgba(0,151,117,.6);}