/* ═══════════════════════════════════════════════════
   DOUBLEYOU PASKAMER PRAAT v3.0 — Premium Dark Theme
   Based on approved HTML prototype
   ═══════════════════════════════════════════════════ */

:root {
  /* ── V5 Kleurenpalet (DoubleYou huisstijl) ── */
  --ink:        #1e1a0f;
  --ink-soft:   #3a3018;
  --ink-muted:  #7a6a3a;
  --cream:      #fdf8f0;
  --warm:       #f5edda;
  --parchment:  #e2cfa0;
  --clay:       #c67d06;
  --clay-l:     #d4910a;
  --clay-d:     #a56605;
  --clay-glow:  rgba(198,125,6,0.15);
  --white:      #fefcf5;
  --border:     rgba(30,26,15,0.12);
  --border2:    rgba(30,26,15,0.2);
  --success:    #2d7a3a;
  --warning:    #c67d06;
  --danger:     #c0392b;
  --gold:       linear-gradient(135deg,#c67d06 0%,#d4910a 50%,#a56605 100%);
  --shadow:     0 4px 20px rgba(30,26,15,0.12);
  --r-sm:       6px;
  --r-md:       8px;
  --r-lg:       12px;
  --r-xl:       16px;
  --nav-h:      64px;
  --radius:     8px;

  /* Aliassen voor dark-theme JS refs → v5 kleuren */
  --bg:         var(--cream);
  --bg2:        var(--warm);
  --bg3:        #f0e8d5;
  --bg4:        var(--white);
  --bg5:        #faf5ea;
  --fg:         var(--ink);
  --fg2:        var(--ink-soft);
  --fg3:        var(--ink-muted);
  --fg4:        rgba(30,26,15,0.45);
  --border-color: var(--border);
  --ink-s:      var(--ink-soft);
}

/* ── Reset ── */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;overflow-x:hidden}
::-webkit-scrollbar{width:0;background:transparent}

body{
  font-family:'DM Sans','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}

/* ── Animaties ── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes badgeGlow{0%,100%{box-shadow:0 0 5px var(--clay-glow)}50%{box-shadow:0 0 20px var(--clay-glow)}}
@keyframes dotPulse{0%,80%,100%{transform:scale(0.6);opacity:0.4}40%{transform:scale(1);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes heartBurst{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes slideInBottom{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}

.dy-fade-in{animation:fadeIn 0.3s ease-out}
.animate-slide-up{animation:slideUp 0.5s cubic-bezier(0.23,1,0.32,1)}

/* ── App container ── */
.app-container{max-width:430px;margin:0 auto;background:var(--bg);min-height:100vh;position:relative;overflow-x:hidden}
@media(min-width:431px){body{background:#0d0d0d}.app-container{border-left:1px solid var(--border);border-right:1px solid var(--border)}}

/* ── Main ── */
.dy-main{margin-top:56px;min-height:calc(100vh - 56px - var(--nav-h));padding-bottom:24px}

/* ── Header / Topbar ── */
.dy-topbar{
  position:fixed;top:0;z-index:100;
  background:var(--ink);
  border-bottom:1px solid rgba(198,125,6,0.2);
  padding:0.75rem 1.25rem;
  display:flex;justify-content:space-between;align-items:center;
  height:56px;
}
.dy-topbar-logo{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:600;color:var(--fg)}
.dy-topbar-logo em{font-weight:400;font-style:italic;color:var(--clay)}
.dy-topbar-actions{display:flex;gap:0.5rem}
.dy-topbar-btn{background:none;border:none;color:var(--fg2);cursor:pointer;padding:0.4rem;transition:color 0.2s;position:relative}
.dy-topbar-btn:hover{color:var(--fg)}
.dy-topbar-btn svg{width:22px;height:22px;stroke-width:1.5}
.dy-topbar-badge{position:absolute;top:2px;right:2px;background:var(--clay);color:var(--bg);font-size:0.55rem;font-weight:700;padding:1px 4px;border-radius:8px}

/* ── Bottom Nav ── */
.dy-nav{
  position:fixed;bottom:0;left:0;right:0;
  height:var(--nav-h);
  background:var(--ink);
  border-top:1px solid rgba(198,125,6,0.15);
  display:flex;justify-content:space-around;
  padding:0.5rem 0 1.5rem;
  z-index:100;
}
.dy-nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;
  color:rgba(254,252,245,0.35);
  font-size:0.6rem;font-weight:500;letter-spacing:0.05em;text-transform:uppercase;
  cursor:pointer;border:none;background:none;font-family:inherit;
  transition:color 0.2s;position:relative;
}
.dy-nav-item svg{width:22px;height:22px;stroke-width:1.5;transition:all 0.2s}
.dy-nav-item.active{color:var(--clay)}
.dy-nav-item:hover{color:rgba(198,125,6,0.7)}
.dy-nav-item.active svg{stroke:var(--clay)}

/* Center upload knop */
.dy-nav-center{position:relative;display:flex;flex-direction:column;align-items:center;padding:0.5rem 0.75rem 0.25rem}
.dy-nav-center-ring{
  position:absolute;top:-20px;
  width:52px;height:52px;
  background:var(--clay);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(196,168,130,0.4);
  cursor:pointer;border:none;
  transition:transform 0.2s,box-shadow 0.2s;
}
.dy-nav-center-ring:hover{transform:scale(1.05);box-shadow:0 6px 28px rgba(196,168,130,0.5)}
.dy-nav-center-lbl{margin-top:24px;font-size:0.6rem;color:var(--fg3);text-transform:uppercase;letter-spacing:0.05em}

/* ── Stories ── */
.dy-stories{
  display:flex;gap:1rem;padding:1rem 1.25rem;
  overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--border);
}
.dy-stories::-webkit-scrollbar{display:none}
.dy-story{display:flex;flex-direction:column;align-items:center;gap:0.4rem;cursor:pointer;flex-shrink:0}
.dy-story-ring{width:64px;height:64px;border-radius:50%;padding:2px;background:var(--gold)}
.dy-story-ring.viewed{background:var(--border)}
.dy-story-avatar{
  width:100%;height:100%;border-radius:50%;
  background:var(--bg3);border:2px solid var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--clay);font-size:1.1rem;overflow:hidden;
}
.dy-story-avatar img{width:100%;height:100%;object-fit:cover}
.dy-story-name{font-size:0.65rem;color:var(--fg2);max-width:64px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Filters ── */
.dy-filters{
  display:flex;gap:0.5rem;padding:0.875rem 1.25rem;
  overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.dy-filters::-webkit-scrollbar{display:none}
.dy-filter{
  padding:0.5rem 1rem;
  background:var(--white);border:1.5px solid var(--border);
  border-radius:100px;color:var(--ink-muted);
  font-family:inherit;font-size:0.78rem;font-weight:500;
  cursor:pointer;transition:all 0.2s;white-space:nowrap;flex-shrink:0;
}
.dy-filter:hover{border-color:var(--border2)}
.dy-filter.active{background:var(--clay);border-color:var(--clay);color:var(--white);font-weight:600}

/* ── Feed Header ── */
.dy-feed-header{padding:1.25rem 1.25rem 0}
.dy-feed-header-inner{display:flex;justify-content:space-between;align-items:flex-start}
.dy-page-title{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600;color:var(--fg)}
.dy-page-title em{color:var(--clay);font-style:italic}
.dy-page-sub{font-size:0.82rem;color:var(--fg2);margin-top:0.2rem;line-height:1.5}
.dy-feed-intro{font-size:0.85rem;color:var(--fg2);line-height:1.6;margin-top:0.25rem}
.dy-feed-nav-links{display:flex;align-items:center;gap:0.5rem;margin-top:0.75rem;flex-wrap:wrap}
.dy-feed-nav-btn{background:none;border:none;color:var(--clay);font-size:0.78rem;font-weight:500;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:0.25rem;padding:0;transition:color 0.2s}
.dy-feed-nav-sep{color:var(--fg4);font-size:0.78rem}

/* ── Feed / Verhalen Grid ── */
.dy-verhalen-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:8px;padding:8px 10px;
}
@media(min-width:480px){.dy-verhalen-grid{grid-template-columns:repeat(3,1fr)}}

/* ── Kaart ── */
.dy-kaart{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  transition:all 0.2s;
}
.dy-kaart:active{transform:scale(0.98)}
.dy-kaart-header{padding:0.75rem 0.875rem;display:flex;align-items:center;gap:0.6rem}
.dy-avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--bg);font-size:0.75rem;
  flex-shrink:0;overflow:hidden;
}
.dy-avatar img{width:100%;height:100%;object-fit:cover}
.dy-kaart-meta{flex:1;min-width:0}
.dy-kaart-naam{font-weight:600;font-size:0.8rem;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dy-kaart-tijd{font-size:0.7rem;color:var(--fg3);margin-top:0.1rem}
.dy-match-pct{background:rgba(196,168,130,0.12);color:var(--clay);padding:0.25rem 0.5rem;border-radius:100px;font-size:0.65rem;font-weight:700;white-space:nowrap;flex-shrink:0}

/* Foto */
.dy-img-wrap{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg3)}
.dy-kaart-foto{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s}
.dy-kaart:hover .dy-kaart-foto{transform:scale(1.03)}
.dy-img-overlay{position:absolute;bottom:0;left:0;right:0;padding:2rem 0.875rem 0.75rem;background:linear-gradient(transparent,rgba(10,10,10,0.9))}
.dy-product-chip{display:inline-flex;align-items:center;gap:0.3rem;background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);padding:0.35rem 0.75rem;border-radius:100px;font-size:0.72rem;font-weight:500;color:var(--fg)}

/* Body */
.dy-kaart-body{padding:0.75rem 0.875rem}
.dy-kaart-titel{font-weight:600;font-size:0.85rem;color:var(--fg);display:block;margin-bottom:0.3rem}
.dy-kaart-tekst{font-size:0.8rem;color:var(--fg2);line-height:1.6}
.dy-kaart-stats{font-size:0.72rem;color:var(--fg3);margin-top:0.2rem}

/* Match badge */
.dy-match-badge{display:inline-block;font-size:0.68rem;font-weight:600;background:rgba(196,168,130,0.1);color:var(--clay);border:1px solid rgba(196,168,130,0.2);border-radius:100px;padding:2px 8px;margin-bottom:6px}

/* Fit badges */
.dy-fit-badges{display:flex;flex-wrap:wrap;gap:0.4rem;margin:0.5rem 0}
.dy-fit-badge{display:inline-flex;align-items:center;gap:0.3rem;padding:0.3rem 0.625rem;background:rgba(196,168,130,0.08);border:1px solid rgba(196,168,130,0.18);border-radius:100px;font-size:0.68rem;font-weight:600;color:var(--clay)}
.dy-fit-badge.groen{background:rgba(74,222,128,0.08);border-color:rgba(74,222,128,0.2);color:var(--success)}

/* Fit score bars */
.dy-fit-scores{display:grid;grid-template-columns:repeat(2,1fr);gap:0.6rem;margin:0.6rem 0}
.dy-fit-score-item{display:flex;flex-direction:column;gap:0.25rem}
.dy-fit-score-lbl{font-size:0.68rem;color:var(--fg3);font-weight:500}
.dy-fit-score-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden}
.dy-fit-score-fill{height:100%;border-radius:3px;transition:width 1s cubic-bezier(0.23,1,0.32,1)}
.dy-fit-score-fill.good{background:var(--success)}
.dy-fit-score-fill.ok{background:var(--warning)}
.dy-fit-score-fill.bad{background:var(--danger)}
.dy-fit-score-val{font-size:0.65rem;font-weight:600;color:var(--fg2)}

/* Kaart footer / acties */
.dy-kaart-footer{display:flex;align-items:center;gap:0.75rem;padding:0.625rem 0.875rem;border-top:1px solid var(--border)}
.dy-kaart-actie{display:flex;align-items:center;gap:0.3rem;background:none;border:none;color:var(--fg3);font-family:inherit;font-size:0.78rem;font-weight:500;cursor:pointer;transition:all 0.2s;padding:0.35rem}
.dy-kaart-actie:hover{color:var(--fg2)}
.dy-kaart-actie.liked{color:var(--clay)}
.dy-kaart-actie.liked svg{fill:var(--clay);stroke:var(--clay)}
.dy-kaart-actie svg{width:17px;height:17px;stroke-width:1.5}

/* ── Lege state ── */
.dy-empty{text-align:center;padding:3rem 1.5rem}
.dy-empty-icon{font-size:3.5rem;margin-bottom:1rem;opacity:0.5}
.dy-empty-title{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:600;color:var(--fg);margin-bottom:0.4rem}
.dy-empty-text{font-size:0.85rem;color:var(--fg2);margin-bottom:1.25rem;line-height:1.6}

/* ── Loading ── */
.dy-loading-wrap{grid-column:1/-1;display:flex;justify-content:center;padding:2.5rem}
.dy-dot-loader{display:flex;gap:6px;align-items:center}
.dy-dot-loader span{width:8px;height:8px;border-radius:50%;background:var(--clay);animation:dotPulse 1.4s ease-in-out infinite}
.dy-dot-loader span:nth-child(2){animation-delay:0.2s}
.dy-dot-loader span:nth-child(3){animation-delay:0.4s}
.dy-spinner{width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--clay);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto}
.skeleton{background:linear-gradient(90deg,var(--bg3) 25%,var(--border) 50%,var(--bg3) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r-sm)}
.dy-feed-sentinel{padding:1rem;text-align:center}

/* ── Toast ── */
.dy-toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-md);padding:0.875rem 1.5rem;display:flex;align-items:center;gap:0.75rem;font-size:0.85rem;font-weight:500;color:var(--fg);box-shadow:var(--shadow);z-index:1000;opacity:0;transition:all 0.4s cubic-bezier(0.23,1,0.32,1);pointer-events:none;white-space:nowrap}
.dy-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.dy-toast.succes,.dy-toast.success{background:#0f2a1a;border-color:rgba(74,222,128,0.3);color:var(--success)}
.dy-toast.fout{background:#2a0f0f;border-color:rgba(248,113,113,0.3);color:var(--danger)}

/* ── Modal ── */
.dy-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);display:none;align-items:flex-end;justify-content:center;z-index:200;opacity:0;transition:opacity 0.3s}
.dy-modal-overlay.open{display:flex;opacity:1}
.dy-modal-sheet{background:var(--bg4);border-radius:var(--r-xl) var(--r-xl) 0 0;width:100%;max-width:430px;max-height:85vh;overflow-y:auto;transform:translateY(100%);transition:transform 0.4s cubic-bezier(0.23,1,0.32,1)}
.dy-modal-overlay.open .dy-modal-sheet{transform:translateY(0)}
.dy-modal-handle{width:40px;height:4px;background:var(--border2);border-radius:2px;margin:1rem auto}

/* ── Knoppen ── */
.dy-btn{width:100%;padding:1rem 1.25rem;border:none;border-radius:var(--r-md);font-family:inherit;font-size:0.9rem;font-weight:700;cursor:pointer;transition:all 0.2s;text-transform:uppercase;letter-spacing:0.05em;display:flex;align-items:center;justify-content:center;gap:0.5rem;text-decoration:none}
.dy-btn-primary{background:var(--clay);color:var(--bg)}
.dy-btn-primary:hover{background:var(--clay-l);transform:translateY(-2px);box-shadow:0 4px 20px rgba(196,168,130,0.3)}
.dy-btn-primary:active{transform:translateY(0)}
.dy-btn-primary:disabled{opacity:0.4;cursor:not-allowed;transform:none}
.dy-btn-secondary{background:transparent;color:var(--fg2);border:1.5px solid var(--border)}
.dy-btn-secondary:hover{border-color:var(--fg2);color:var(--fg)}
.dy-btn-ghost{background:transparent;color:var(--clay);border:1.5px solid rgba(196,168,130,0.3)}
.dy-btn-ghost:hover{border-color:var(--clay);background:rgba(196,168,130,0.08)}
.dy-skip-btn,.dy-btn-link-licht{background:none;border:none;color:var(--fg3);font-size:0.85rem;cursor:pointer;padding:0.5rem;transition:color 0.2s;font-family:inherit;text-align:center;width:100%}
.dy-skip-btn:hover{color:var(--fg2)}

/* ── Forms ── */
.dy-form-wrap{padding:20px 14px 80px;max-width:600px;margin:0 auto}
.dy-input{width:100%;padding:0.875rem 1.125rem;background:var(--bg5);border:1.5px solid var(--border);border-radius:var(--r-md);color:var(--fg);font-size:0.95rem;font-family:inherit;transition:all 0.2s}
.dy-input:focus{outline:none;border-color:var(--clay);box-shadow:0 0 0 3px var(--clay-glow)}
.dy-input::placeholder{color:var(--fg4)}
.dy-textarea{width:100%;padding:0.875rem 1.125rem;background:var(--bg5);border:1.5px solid var(--border);border-radius:var(--r-md);color:var(--fg);font-size:0.9rem;font-family:inherit;resize:vertical;transition:all 0.2s}
.dy-textarea:focus{outline:none;border-color:var(--clay);box-shadow:0 0 0 3px var(--clay-glow)}
.dy-label{display:block;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--fg2);margin-bottom:0.6rem}
.dy-label-klein{display:block;font-size:0.68rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:rgba(196,168,130,0.7);margin-bottom:4px}
.dy-maten-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dy-ob-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ── Onboarding ── */
.dy-onboarding-wrap{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);position:relative;overflow:hidden}
.dy-onboarding-bg{position:absolute;top:0;left:0;right:0;height:45%;background:var(--gold);opacity:0.06;filter:blur(80px);pointer-events:none}
.dy-onboarding-slide{flex:1;display:flex;flex-direction:column;padding:2rem;min-height:100vh;justify-content:center;align-items:center;text-align:center;position:relative;z-index:1}
.dy-onboarding-emoji{font-size:4rem;margin-bottom:1.5rem}
.dy-onboarding-titel{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:700;line-height:1.2;color:var(--fg);margin-bottom:1rem;white-space:pre-line}
.dy-onboarding-tekst{font-size:0.95rem;color:var(--fg2);line-height:1.7;max-width:340px;margin:0 auto 2rem}
.dy-onboarding-acties{display:flex;flex-direction:column;align-items:center;gap:0.75rem;width:100%;max-width:340px}
.dy-onboarding-volgende{width:100%}
.dy-onboarding-dots{display:flex;gap:8px;justify-content:center;margin-bottom:2rem}
.dy-onboarding-dot{width:8px;height:8px;border-radius:50%;background:var(--border2)}
.dy-onboarding-dot.actief{background:var(--clay);width:24px;border-radius:4px}
.dy-onboarding-form{width:100%;max-width:400px;margin:0 auto;text-align:left}
/* Onboarding option buttons */
.dy-ob-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;margin-bottom:1.5rem}
.dy-ob-btn{padding:1rem;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r-md);color:var(--fg2);font-family:inherit;font-size:0.88rem;font-weight:500;cursor:pointer;transition:all 0.2s;text-align:center}
.dy-ob-btn:hover{border-color:var(--border2);color:var(--fg)}
.dy-ob-btn.selected,.dy-ob-btn.actief{background:rgba(196,168,130,0.1);border-color:var(--clay);color:var(--clay)}
.dy-ob-btn .ob-icon{font-size:1.4rem;display:block;margin-bottom:0.4rem}
.dy-ob-multi{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;margin-bottom:1.5rem}
.dy-ob-multi-item{padding:0.875rem 1rem;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r-md);color:var(--fg2);font-family:inherit;font-size:0.82rem;font-weight:500;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:0.75rem}
.dy-ob-multi-item::before{content:'';width:20px;height:20px;border:2px solid var(--border2);border-radius:6px;transition:all 0.2s;flex-shrink:0}
.dy-ob-multi-item.selected,.dy-ob-multi-item.actief{background:rgba(196,168,130,0.08);border-color:var(--clay);color:var(--fg)}
.dy-ob-multi-item.selected::before,.dy-ob-multi-item.actief::before{background:var(--clay);border-color:var(--clay);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-size:13px;background-position:center;background-repeat:no-repeat}
/* Sliders */
.dy-ob-slider{margin:1.5rem 0}
.dy-ob-slider-val{text-align:center;font-family:'Cormorant Garamond',serif;font-size:2.5rem;font-weight:700;color:var(--clay);margin-bottom:1rem}
.dy-ob-slider-val span{font-size:1rem;color:var(--fg2);font-family:'Inter',sans-serif;font-weight:400}
.dy-ob-track{width:100%;height:6px;background:var(--border);border-radius:3px;position:relative;margin:1rem 0;cursor:pointer;touch-action:none}
.dy-ob-fill{height:100%;background:var(--gold);border-radius:3px}
.dy-ob-thumb{width:28px;height:28px;background:var(--clay);border:3px solid var(--bg);border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 2px 12px rgba(196,168,130,0.4);cursor:grab;touch-action:none}
.dy-ob-thumb:active{cursor:grabbing}
.dy-ob-range{display:flex;justify-content:space-between;font-size:0.72rem;color:var(--fg3);margin-top:0.4rem}
/* Silhouette */
.dy-silhouette-row{display:flex;justify-content:center;align-items:flex-end;gap:1rem;margin:2rem 0;height:180px}
.dy-sil{width:54px;background:var(--border);border-radius:28px 28px 8px 8px;transition:all 0.6s cubic-bezier(0.23,1,0.32,1);position:relative;opacity:0.5}
.dy-sil.active{background:var(--clay);opacity:1;box-shadow:0 0 30px var(--clay-glow)}
.dy-sil::before{content:'';position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:28px;height:28px;background:inherit;border-radius:50%;opacity:0.85}

/* ── Profiel ── */
.dy-profiel-wrap{padding:0 0 32px;max-width:600px;margin:0 auto}
.dy-profiel-hero{padding:2rem 1.25rem 1.5rem;text-align:center;border-bottom:1px solid var(--border)}
.dy-profiel-avatar-container{position:relative;width:96px;height:96px;margin:0 auto 1rem;cursor:pointer}
.dy-profiel-avatar-lg{width:96px;height:96px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:2.2rem;font-weight:700;color:var(--bg);border:2px solid var(--border);box-shadow:0 0 30px var(--clay-glow);overflow:hidden;cursor:pointer;position:relative}
.dy-profiel-avatar-lg img,.dy-avatar-foto{width:100%;height:100%;object-fit:cover;border-radius:50%}
.dy-profiel-avatar-edit{position:absolute;bottom:0;right:0;width:28px;height:28px;background:var(--clay);border-radius:50%;display:flex;align-items:center;justify-content:center}
.dy-profiel-avatar-edit svg{width:14px;height:14px;fill:var(--bg);stroke:none}
.dy-profiel-badge{position:absolute;bottom:0;right:0;font-size:1.2rem;line-height:1}
.dy-profiel-naam-wrap{display:flex;align-items:center;justify-content:center;gap:8px}
.dy-profiel-naam{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;color:var(--fg)}
.dy-profiel-naam-edit-btn{background:none;border:none;cursor:pointer;color:var(--fg3);padding:4px;transition:color 0.2s}
.dy-profiel-naam-edit-btn svg{width:16px;height:16px;fill:currentColor}
.dy-profiel-niveau{display:flex;align-items:center;gap:0.5rem;justify-content:center;margin-top:0.5rem}
.dy-niveau-naam{font-size:0.85rem;color:var(--fg2)}
.dy-profiel-email{font-size:0.78rem;color:var(--fg4);margin-top:4px}
.dy-profiel-identity{display:inline-flex;align-items:center;gap:0.5rem;margin-top:0.75rem;padding:0.45rem 1rem;background:rgba(196,168,130,0.1);border:1px solid rgba(196,168,130,0.2);border-radius:100px;font-size:0.78rem;font-weight:600;color:var(--clay)}
.dy-profiel-stats{display:grid;grid-template-columns:repeat(3,1fr);padding:1.25rem;border-bottom:1px solid var(--border)}
.dy-profiel-stat{text-align:center}
.dy-profiel-stat-val,.dy-profiel-stat-value{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:700;color:var(--fg)}
.dy-profiel-stat-lbl,.dy-profiel-stat-label{font-size:0.7rem;color:var(--fg3);margin-top:0.2rem;text-transform:uppercase;letter-spacing:0.05em}
/* Body stats */
.dy-body-stats{padding:1.25rem;border-bottom:1px solid var(--border)}
.dy-body-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem}
.dy-body-stat-item{background:var(--bg3);padding:1rem;border-radius:var(--r-md);border:1px solid var(--border)}
.dy-body-stat-val{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:600;color:var(--clay)}
.dy-body-stat-lbl{font-size:0.72rem;color:var(--fg3);margin-top:0.2rem}
/* DSP */
.dy-dsp-wrap{padding:1.25rem;border-bottom:1px solid var(--border)}
.dy-dsp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.875rem}
.dy-dsp-level-name{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:600;color:var(--clay)}
.dy-dsp-punten{font-size:0.8rem;color:var(--fg3)}
.dy-dsp-bar{height:7px;background:var(--border);border-radius:4px;overflow:hidden;margin-bottom:0.6rem}
.dy-dsp-bar-fill{height:100%;background:var(--gold);border-radius:4px;transition:width 1s cubic-bezier(0.23,1,0.32,1)}
.dy-dsp-next{font-size:0.75rem;color:var(--fg3)}
/* Badges */
.dy-profiel-badges-wrap{padding:1.25rem;border-bottom:1px solid var(--border)}
.dy-badge-grid{display:flex;flex-wrap:wrap;gap:0.5rem}
.dy-badge-item{padding:0.45rem 0.875rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);font-size:0.78rem;font-weight:500;color:var(--fg2);display:flex;align-items:center;gap:0.4rem}
/* Fit Identity */
.dy-profiel-sectie{background:var(--bg4);border:1px solid var(--border);border-radius:var(--r-md);padding:1rem;margin:8px 10px}
.dy-profiel-sectie-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.dy-profiel-sectie-titel{font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--clay)}
.dy-profiel-sectie-edit{font-size:0.78rem;color:var(--clay);background:none;border:none;cursor:pointer;font-family:inherit}
.dy-fit-identity-grid{display:flex;gap:12px;margin-bottom:10px}
.dy-fit-stat{text-align:center;flex:1;background:rgba(196,168,130,0.06);border-radius:8px;padding:8px 4px}
.dy-fit-stat-val{display:block;font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:400;color:var(--clay);line-height:1}
.dy-fit-stat-lbl{display:block;font-size:8px;color:var(--fg3);letter-spacing:0.08em;text-transform:uppercase;margin-top:2px}
.dy-fit-tags{display:flex;flex-wrap:wrap;gap:5px}
.dy-fit-tag{font-size:0.72rem;background:rgba(255,255,255,0.04);color:var(--fg3);border:1px solid var(--border);border-radius:100px;padding:3px 8px}
.dy-fit-identity-leeg{text-align:center;padding:12px 0}
.dy-fit-identity-leeg p{font-size:0.8rem;color:var(--fg3);line-height:1.5}

/* ── Review module ── */
.dy-rv-sectie{background:var(--bg4);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;margin-bottom:8px}
.dy-rv-sectie-titel{font-size:0.7rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--clay);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.dy-rv-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.dy-rv-chip{padding:5px 10px;font-size:0.78rem;background:var(--bg3);border:1.5px solid var(--border);border-radius:100px;cursor:pointer;color:var(--fg3);font-family:inherit;transition:all 0.15s;white-space:nowrap}
.dy-rv-chip:hover{border-color:var(--border2);color:var(--fg2)}
.dy-rv-chip.actief{background:var(--clay);border-color:var(--clay);color:var(--bg);font-weight:500}
.dy-rv-chip-sm{padding:3px 8px;font-size:0.7rem;background:var(--bg3);border:1.5px solid var(--border);border-radius:4px;cursor:pointer;color:var(--fg3);font-family:inherit;transition:all 0.15s}
.dy-rv-chip-sm.actief{background:var(--clay);border-color:var(--clay);color:var(--bg)}
.dy-rv-onderdelen{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.dy-rv-onderdeel{display:flex;align-items:center;gap:10px}
.dy-rv-onderdeel-lbl{font-size:0.78rem;color:var(--fg3);width:110px;flex-shrink:0}
.dy-rv-onderdeel-knoppen{display:flex;gap:4px}
.dy-rv-badges{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.dy-rv-badge{font-size:0.68rem;font-weight:600;letter-spacing:0.05em;padding:2px 7px;border-radius:3px;white-space:nowrap}
@media(max-width:480px){.dy-rv-onderdeel{flex-direction:column;align-items:flex-start;gap:4px}.dy-rv-onderdeel-lbl{width:auto}}
.dy-pasvorm-knoppen{display:flex;gap:0.5rem;flex-wrap:wrap}
.dy-pasvorm-btn{flex:1;padding:0.75rem 0.5rem;background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r-md);color:var(--fg2);font-family:inherit;font-size:0.82rem;font-weight:500;cursor:pointer;transition:all 0.15s;text-align:center;min-width:80px}
.dy-pasvorm-btn.actief{background:var(--clay);border-color:var(--clay);color:var(--bg);font-weight:600}
.dy-ster-beoordeling{display:flex;gap:0.5rem;font-size:2rem}
.dy-ster{background:none;border:none;color:var(--border2);cursor:pointer;font-size:1.8rem;transition:all 0.15s;padding:0.25rem}
.dy-ster.actief{color:var(--clay)}
.dy-ster:hover{transform:scale(1.2)}
.dy-review-footer{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-top:1px solid var(--border);background:rgba(255,255,255,0.01)}
.dy-helpful-btn{font-size:0.78rem;color:var(--fg3);background:none;border:1px solid var(--border);border-radius:100px;padding:4px 10px;cursor:pointer;font-family:inherit;transition:all 0.15s}
.dy-helpful-btn:hover{border-color:var(--clay);color:var(--clay)}
.dy-helpful-btn:disabled{opacity:0.5;cursor:default}
.dy-verified-badge{font-size:0.72rem;color:var(--success);font-weight:600}

/* ── Winkel ── */
.dy-winkel-fit-banner{background:rgba(74,222,128,0.06);border-bottom:1px solid rgba(74,222,128,0.12);padding:10px 14px}
.dy-winkel-fit-banner-inner{display:flex;align-items:center;gap:10px;max-width:600px;margin:0 auto}
.dy-winkel-fit-icon{font-size:18px;color:var(--success);flex-shrink:0}
.dy-winkel-fit-titel{font-size:0.8rem;font-weight:600;color:var(--fg)}
.dy-winkel-fit-sub{font-size:0.72rem;color:var(--fg3);margin-top:1px}
.dy-winkel-wrap{padding:8px 10px}
.dy-winkel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:600px){.dy-winkel-grid{grid-template-columns:repeat(3,1fr)}}
.dy-product-kaart{background:var(--bg4);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:border-color 0.2s;margin:0 0 8px}
.dy-product-kaart:hover{border-color:var(--border2)}
.dy-product-foto-wrap{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bg3);display:flex;align-items:center;justify-content:center}
.dy-product-foto{width:100%;height:100%;object-fit:cover;display:block}
.dy-product-foto-placeholder{font-family:'Cormorant Garamond',serif;font-size:48px;color:rgba(196,168,130,0.2)}
.dy-product-fit-badge{position:absolute;top:10px;right:10px;background:rgba(10,10,10,0.8);backdrop-filter:blur(10px);padding:0.5rem 0.75rem;border-radius:var(--r-md);text-align:center}
.dy-product-fit-score-val{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:700;color:var(--clay);display:block;line-height:1}
.dy-product-fit-score-lbl{font-size:0.55rem;color:var(--fg3);text-transform:uppercase;letter-spacing:0.1em}
.dy-product-info{padding:0.875rem 1rem}
.dy-product-merk{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--clay);margin-bottom:0.2rem}
.dy-product-naam{font-weight:600;font-size:0.9rem;color:var(--fg);margin-bottom:0.4rem}
.dy-product-prijs{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:600;color:var(--fg)}
.dy-product-meta{display:flex;align-items:center;gap:0.75rem;margin-top:0.5rem;font-size:0.75rem;color:var(--fg3)}
.dy-product-fit-score{font-size:0.7rem;color:var(--fg3);margin-top:4px}
.dy-product-maat-advies{font-size:0.7rem;color:var(--success);font-weight:600;margin-top:4px}
.dy-tall-badge{display:inline-block;font-size:0.65rem;font-weight:700;background:rgba(74,222,128,0.08);color:var(--success);border:1px solid rgba(74,222,128,0.18);border-radius:3px;padding:1px 5px;margin-bottom:4px}

/* ── Looks ── */
.dy-look-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:8px 10px}
@media(min-width:480px){.dy-look-grid{grid-template-columns:repeat(3,1fr)}}
.dy-look-kaart{background:var(--bg4);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:border-color 0.2s}
.dy-look-kaart:hover{border-color:var(--border2)}
.dy-look-foto-wrap{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg3)}
.dy-look-foto{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s}
.dy-look-kaart:hover .dy-look-foto{transform:scale(1.03)}
.dy-look-overlay{position:absolute;bottom:0;left:0;right:0;padding:2rem 0.875rem 0.75rem;background:linear-gradient(transparent,rgba(10,10,10,0.9))}
.dy-look-info-bottom{padding:0.75rem}
.dy-look-naam{font-size:0.8rem;font-weight:500;color:var(--fg)}
.dy-look-maten{font-size:0.7rem;color:var(--fg3);margin-top:0.15rem}

/* ── Berichten ── */
.dy-berichten-wrap{padding:0 0 80px}
.dy-bericht-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.15s}
.dy-bericht-item:hover{background:var(--bg3)}
.dy-bericht-naam{font-size:0.88rem;font-weight:600;color:var(--fg)}
.dy-bericht-preview{font-size:0.78rem;color:var(--fg3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dy-bericht-tijd{font-size:0.72rem;color:var(--fg4);white-space:nowrap}
.dy-bericht-ongelezen{width:8px;height:8px;border-radius:50%;background:var(--clay);flex-shrink:0}
.dy-chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 56px - var(--nav-h));padding:0}
.dy-chat-berichten{flex:1;overflow-y:auto;padding:12px 14px}
.dy-chat-bericht{margin-bottom:12px;display:flex;flex-direction:column}
.dy-chat-bericht.eigen{align-items:flex-end}
.dy-chat-bubble{max-width:75%;padding:10px 14px;border-radius:18px;font-size:0.88rem;line-height:1.5}
.dy-chat-bericht.eigen .dy-chat-bubble{background:var(--clay);color:var(--bg);border-radius:18px 18px 4px 18px}
.dy-chat-bericht:not(.eigen) .dy-chat-bubble{background:var(--bg3);color:var(--fg);border-radius:18px 18px 18px 4px}
.dy-chat-input-wrap{padding:12px 14px;border-top:1px solid var(--border);display:flex;gap:8px;background:var(--bg)}
.dy-chat-input{flex:1;padding:10px 14px;background:var(--bg5);border:1px solid var(--border);border-radius:100px;color:var(--fg);font-family:inherit;font-size:0.88rem}
.dy-chat-input:focus{outline:none;border-color:var(--clay)}
.dy-chat-send{width:40px;height:40px;border-radius:50%;background:var(--clay);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dy-chat-send svg{width:18px;height:18px;fill:var(--bg)}

/* ── Configurator ── */
.dy-cfg-wrap{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 56px);align-items:start}
@media(max-width:680px){.dy-cfg-wrap{grid-template-columns:1fr}}
.dy-cfg-preview{background:var(--bg4);padding:20px;display:flex;flex-direction:column;align-items:center;position:sticky;top:56px;min-height:calc(100vh - 56px);overflow-y:auto;border-right:1px solid var(--border)}
@media(max-width:680px){.dy-cfg-preview{position:static;min-height:auto;padding:16px 12px;border-right:none;border-bottom:1px solid var(--border)}}
.dy-cfg-panel-wrap{overflow:auto;background:var(--bg)}
.dy-cfg-panel{padding:14px;display:none}
.dy-cfg-panel.active{display:block}
.dy-cfg-tabs-wrap{display:flex;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.dy-cfg-tabs-wrap::-webkit-scrollbar{display:none}
.dy-cfg-tab{padding:0.75rem 1rem;background:none;border:none;border-bottom:2px solid transparent;color:var(--fg3);font-family:inherit;font-size:0.78rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:all 0.2s}
.dy-cfg-tab.active{color:var(--clay);border-bottom-color:var(--clay)}
.dy-cfg-patroon-svg{width:100%;overflow:auto;background:white;border-radius:4px;border:1px solid var(--border);padding:8px;margin-bottom:8px;max-height:70vh;min-height:400px}
.dy-cfg-patroon-svg svg{width:100%;height:auto;min-width:800px;display:block}
.dy-cfg-community-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:480px){.dy-cfg-community-grid{grid-template-columns:repeat(3,1fr)}}
.dy-cfg-community-foto-wrap{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg3)}
.dy-cfg-community-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ── DSP pagina ── */
.dy-dsp-tip{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;background:rgba(196,168,130,0.06);border:1px solid rgba(196,168,130,0.15);border-radius:var(--r-sm);margin-bottom:12px;font-size:0.8rem;color:var(--fg2)}
.dy-dsp-tip-icon{color:var(--clay);flex-shrink:0}
.dy-dsp-tabel{width:100%;border-collapse:collapse}
.dy-dsp-tabel td{padding:8px 12px;border-bottom:1px solid var(--border);font-size:0.82rem;color:var(--fg2)}
.dy-dsp-tabel td:last-child{text-align:right;color:var(--clay);font-weight:600}

/* ── Misc ── */
.dy-back-btn{background:none;border:none;color:var(--fg2);font-size:0.82rem;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:0.4rem;padding:0.4rem 0;transition:color 0.2s}
.dy-back-btn:hover{color:var(--clay)}
.dy-detail-wrap{padding:16px;max-width:600px;margin:0 auto}
.dy-artikel-foto{width:100%;border-radius:var(--r-sm);margin:12px 0}
.dy-profiel-foto-upload{display:flex;align-items:center;gap:12px;padding:14px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;margin-bottom:16px}
.dy-profiel-foto-preview{width:60px;height:60px;border-radius:50%;background:var(--bg4);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.dy-profiel-foto-initialen{font-size:1.2rem;font-weight:700;color:var(--clay)}
.dy-profiel-foto-label{flex:1}
.dy-profiel-foto-label strong{display:block;font-size:0.85rem;color:var(--fg)}
.dy-profiel-foto-label span{font-size:0.75rem;color:var(--fg3)}
.dy-challenge-kaart{background:var(--bg4);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;margin-bottom:10px}
.dy-challenge-titel{font-size:0.95rem;font-weight:600;color:var(--fg);margin-bottom:4px}
.dy-challenge-sub{font-size:0.8rem;color:var(--fg3);line-height:1.5;margin-bottom:10px}
.dy-challenge-voortgang{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:6px}
.dy-challenge-fill{height:100%;background:var(--gold);border-radius:3px}
.dy-challenge-meta{display:flex;justify-content:space-between;font-size:0.72rem;color:var(--fg3)}
.dy-leaderboard-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border)}
.dy-lb-rang{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:700;color:var(--clay);width:28px;text-align:center;flex-shrink:0}
.dy-lb-naam{font-size:0.88rem;font-weight:600;color:var(--fg)}
.dy-lb-sub{font-size:0.72rem;color:var(--fg3);margin-top:1px}
.dy-lb-punten{margin-left:auto;font-size:0.82rem;font-weight:700;color:var(--clay);white-space:nowrap}
.dy-maten-layout{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
@media(max-width:768px){.dy-maten-layout{grid-template-columns:1fr}}
.dy-outline-svg{width:100%;height:auto;display:block;overflow:visible}
.dy-op{fill:none;stroke:var(--clay);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.dy-gender-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:860px;margin:0 auto}
@media(max-width:600px){.dy-gender-grid{grid-template-columns:1fr;max-width:340px}}
.dy-gender-card{border:1px solid var(--border);padding:2rem 1.5rem;text-align:center;cursor:pointer;transition:all 0.25s;border-radius:var(--r-md)}
.dy-gender-card.selected{border-color:var(--clay);background:rgba(196,168,130,0.08)}
.dy-gender-name{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:400;color:var(--fg)}
.dy-gender-icon{width:70px;height:70px;margin:0 auto 1rem}
.dy-kleuren-palet{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.dy-kleur{width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all 0.15s}
.dy-kleur.actief{border-color:var(--clay);transform:scale(1.15)}
.dy-install-banner{background:var(--bg3);border-bottom:1px solid var(--border);padding:10px 14px;display:flex;align-items:center;gap:10px}
.dy-install-banner-tekst{flex:1;font-size:0.8rem}
.dy-install-banner-tekst strong{display:block;color:var(--fg);font-size:0.85rem}
.dy-install-banner-tekst span{color:var(--fg3)}
.dy-verhalen-grid.dy-kaart-full{grid-template-columns:1fr}
.dy-form-err{color:var(--danger);font-size:0.78rem;margin-top:6px;display:none}
.dy-cfg-svg-wrap{width:180px;height:300px;margin:0 auto 16px;background:rgba(196,168,130,0.03);border:1px solid rgba(196,168,130,0.08);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:12px}
.dy-cfg-patroon-info{background:var(--bg4);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:8px}
.dy-cfg-patroon-naam{display:block;font-size:0.85rem;font-weight:500;color:var(--fg)}
.dy-cfg-patroon-maten{display:block;font-size:0.72rem;color:var(--fg3);margin-top:2px}
.dy-cfg-patroon-acties{display:flex;gap:8px}
.dy-cfg-patroon-fout{background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.2);border-radius:var(--r-md);padding:16px;text-align:center;color:var(--danger)}
.dy-cfg-patroon-loading{display:flex;flex-direction:column;align-items:center;gap:12px;padding:2rem}
.dy-cfg-model-dots{display:flex;gap:6px}
.dy-cfg-model-dots span{width:8px;height:8px;border-radius:50%;background:var(--clay);animation:dotPulse 1.4s ease-in-out infinite}
.dy-cfg-model-dots span:nth-child(2){animation-delay:0.2s}
.dy-cfg-model-dots span:nth-child(3){animation-delay:0.4s}
.dy-cfg-patroon-sectie,.dy-cfg-community-sectie{background:var(--bg);border-top:1px solid var(--border);padding:18px 14px 28px}
.dy-cfg-community-titel{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:400;color:var(--fg);margin-bottom:3px}
.dy-cfg-community-sub{font-size:0.78rem;color:var(--fg3)}
.dy-cfg-community-naam{display:block;font-size:0.7rem;font-weight:700;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dy-cfg-community-maten{display:block;font-size:0.65rem;color:var(--clay)}
.dy-cfg-community-info{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(10,10,10,0.9));padding:16px 8px 8px;opacity:0;transition:opacity 0.25s}
.dy-cfg-community-kaart:hover .dy-cfg-community-info{opacity:1}
.dy-cfg-community-kaart{background:var(--bg4);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;cursor:pointer}
.dy-btn-row{display:flex;gap:1rem;flex-wrap:wrap}
.dy-zoekbalk-wrap{display:none}
.dy-pk,.dy-paskamer-wrap{background:var(--bg);color:var(--fg)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* ═══════════════════════════════════════════════════════════════════
   ONTBREKENDE STIJLEN — Profiel, Auth, DSP, Seizoen, Stats
   ═══════════════════════════════════════════════════════════════════ */

/* ── Auth ── */
.dy-auth-wrap{display:flex;flex-direction:column;align-items:center;padding:2.5rem 1.5rem;min-height:100vh;justify-content:center;background:var(--bg)}
.dy-auth-card{width:100%;max-width:400px}
.dy-auth-logo{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:600;color:var(--fg);text-align:center;margin-bottom:0.25rem}
.dy-auth-logo em{color:var(--clay);font-style:italic}
.dy-auth-w{font-family:'Cormorant Garamond',serif;font-size:3rem;font-weight:700;color:var(--clay);text-align:center;display:block;margin-bottom:1.5rem}
.dy-auth-brand{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;color:var(--fg);text-align:center}
.dy-auth-title{font-family:'Cormorant Garamond',serif;font-size:1.75rem;font-weight:600;color:var(--fg);margin-bottom:0.5rem}
.dy-auth-sub{font-size:0.85rem;color:var(--fg2);margin-bottom:2rem;line-height:1.6}
.dy-auth-err{color:var(--danger);font-size:0.82rem;margin-top:0.5rem;display:none;padding:0.75rem;background:rgba(248,113,113,0.1);border-radius:var(--r-sm);border:1px solid rgba(248,113,113,0.2)}
.dy-auth-note{font-size:0.78rem;color:var(--fg3);text-align:center;margin-top:1rem;line-height:1.5}

/* ── Stats grid (profiel) ── */
.dy-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin:8px 10px}
.dy-stat{background:var(--bg4);padding:1rem 0.5rem;text-align:center}
.dy-stat-waarde{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:700;color:var(--fg);display:block}
.dy-stat-label{font-size:0.65rem;color:var(--fg3);text-transform:uppercase;letter-spacing:0.08em;margin-top:0.2rem;display:block}

/* ── Niveau kaart ── */
.dy-niveau-kaart{background:var(--bg4);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;margin:8px 10px}
.dy-niveau-kaart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.875rem;font-size:0.95rem;font-weight:600;color:var(--fg)}
.dy-niveau-pct{font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:var(--clay)}
.dy-progress-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden;margin-bottom:0.75rem}
.dy-progress-fill{height:100%;background:linear-gradient(90deg,var(--clay-d),var(--clay),var(--clay-l));border-radius:4px;transition:width 1s cubic-bezier(0.23,1,0.32,1)}
.dy-niveau-voordelen{font-size:0.8rem;color:var(--fg2);margin-bottom:0.4rem;line-height:1.5}
.dy-niveau-next{font-size:0.78rem;color:var(--fg3)}
.dy-niveau-next strong{color:var(--clay)}

/* ── Seizoen kaart ── */
.dy-seizoen-kaart{background:var(--bg4);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;margin:8px 10px}
.dy-seizoen-kaart-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.875rem}
.dy-seizoen-label{font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--fg3);margin-bottom:0.2rem}
.dy-seizoen-tier{font-size:0.95rem;font-weight:600;color:var(--fg)}
.dy-seizoen-pts{text-align:right}
.dy-seizoen-pts strong{display:block;font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:700;color:var(--clay);line-height:1}
.dy-seizoen-pts span{font-size:0.7rem;color:var(--fg3)}
.dy-seizoen-voordelen{font-size:0.8rem;color:var(--fg2);margin-bottom:1rem;line-height:1.5;padding:0.625rem;background:rgba(196,168,130,0.06);border-radius:var(--r-sm);border:1px solid rgba(196,168,130,0.12)}
.dy-seizoen-alle-tiers{display:flex;flex-direction:column;gap:2px}
.dy-seizoen-tier-rij{display:flex;align-items:flex-start;gap:10px;padding:0.6rem 0.75rem;border-radius:var(--r-sm);transition:background 0.2s}
.dy-seizoen-tier-rij.actief{background:rgba(196,168,130,0.08);border:1px solid rgba(196,168,130,0.15)}
.dy-seizoen-tier-rij.bereikt .dy-seizoen-tier-dot{color:var(--success)}
.dy-seizoen-tier-dot{font-size:0.9rem;flex-shrink:0;color:var(--fg3);margin-top:1px}
.dy-seizoen-tier-rij.actief .dy-seizoen-tier-dot{color:var(--clay)}
.dy-seizoen-tier-info{flex:1}
.dy-seizoen-tier-info strong{display:block;font-size:0.82rem;color:var(--fg);font-weight:600}
.dy-seizoen-tier-info span{display:block;font-size:0.72rem;color:var(--fg3);line-height:1.4;margin-top:1px}
.dy-seizoen-tier-pts{font-size:0.72rem;font-weight:700;color:var(--clay);white-space:nowrap;flex-shrink:0}

/* ── DSP pagina niveaus ── */
.dy-dsp-sectie-titel{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--clay);margin:1.25rem 0 0.75rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border)}
.dy-dsp-niveaus{display:flex;flex-direction:column;gap:2px;margin-bottom:1rem}
.dy-dsp-niveau-rij{display:flex;align-items:flex-start;gap:12px;padding:0.75rem;background:var(--bg4);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:4px}
.dy-dsp-niveau-emoji{font-size:1.5rem;flex-shrink:0}
.dy-dsp-niveau-info{flex:1}
.dy-dsp-niveau-info strong{display:block;font-size:0.88rem;color:var(--fg);font-weight:600}
.dy-dsp-niveau-voordelen{font-size:0.75rem;color:var(--fg3);margin-top:2px;line-height:1.4}
.dy-alle-niveaus{margin-top:0.5rem}

/* ── Badges sectie ── */
.dy-badges-sectie{padding:1.25rem;margin:8px 10px;background:var(--bg4);border:1px solid var(--border);border-radius:var(--r-lg)}
.dy-badges-grid{display:flex;flex-wrap:wrap;gap:0.5rem}
.dy-badge-emoji{font-size:1.1rem;flex-shrink:0}
.dy-badge-naam{font-size:0.78rem}
.dy-eigen-badge{background:rgba(196,168,130,0.08);border-color:rgba(196,168,130,0.2);color:var(--clay)}
.dy-maat-badge{display:inline-block;font-size:0.7rem;font-weight:700;background:rgba(196,168,130,0.1);color:var(--clay);border:1px solid rgba(196,168,130,0.2);border-radius:100px;padding:2px 8px}

/* ── Sectie titles ── */
.dy-sectie-titel,.dy-cfg-sectie-titel,.dy-gebruiker-sectie-titel,.dy-pk-sectie-titel,.dy-zoek-sectie-titel,.dy-challenge-header{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--clay);margin:1.25rem 0 0.75rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border)}
.dy-cfg-sectie{padding:12px 14px;border-bottom:1px solid var(--border)}

/* ── Gebruiker profiel ── */
.dy-gebruiker-stats{padding:1rem;border-bottom:1px solid var(--border)}
.dy-gebruiker-stats-grid{display:flex;gap:0;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.dy-gebruiker-stat{flex:1;text-align:center;padding:1rem 0.5rem;background:var(--bg4)}
.dy-gebruiker-stat+.dy-gebruiker-stat{border-left:1px solid var(--border)}
.dy-gebruiker-stat-waarde{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:700;color:var(--fg);display:block}
.dy-gebruiker-stat-label{font-size:0.65rem;color:var(--fg3);text-transform:uppercase;letter-spacing:0.08em;margin-top:0.2rem;display:block}
.dy-gebruiker-stat-sep{display:none}
.dy-gebruiker-niveau{display:flex;align-items:center;gap:0.5rem;padding:0.875rem 1rem;border-bottom:1px solid var(--border);font-size:0.85rem;color:var(--fg2)}
.dy-gebruiker-tier-badge{font-size:0.7rem;background:rgba(196,168,130,0.1);color:var(--clay);border:1px solid rgba(196,168,130,0.2);border-radius:100px;padding:2px 8px;margin-left:auto}
.dy-gebruiker-badges-sectie,.dy-gebruiker-verhalen-sectie{padding:1rem 1rem;border-bottom:1px solid var(--border)}

/* ── Header (topbar) verfijnd ── */
.dy-topbar{background:rgba(10,10,10,0.95)}

/* ── Winkel DSP ── */
.dy-winkel-dsp-niveau{display:flex;align-items:center;gap:8px;background:rgba(196,168,130,0.06);border:1px solid rgba(196,168,130,0.12);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:12px;font-size:0.82rem;color:var(--fg2)}
.dy-winkel-dsp-tabel td{padding:8px 12px;border-bottom:1px solid var(--border);font-size:0.82rem;color:var(--fg2)}
.dy-winkel-dsp-tabel td:last-child{text-align:right;color:var(--clay);font-weight:600}

/* ── Reacties ── */
.dy-reacties-sectie{padding:1rem;border-top:1px solid var(--border);margin-top:8px}
.dy-reactie-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}

/* ── Log sectie ── */
.dy-log-sectie{padding:1rem;border-bottom:1px solid var(--border)}

/* ── Paskamer ── */
.dy-pk-fit-status{display:flex;align-items:center;gap:8px;padding:0.75rem;background:rgba(74,222,128,0.06);border:1px solid rgba(74,222,128,0.12);border-radius:var(--r-sm);margin-bottom:12px;font-size:0.82rem;color:var(--success)}
.dy-pk-maat-badge{display:inline-block;font-size:0.75rem;font-weight:700;background:rgba(196,168,130,0.1);color:var(--clay);border:1px solid rgba(196,168,130,0.2);border-radius:100px;padding:3px 10px;margin:2px}

/* ── Best DSP leaderboard ── */
.dy-best-dsp{background:var(--bg4);border:1px solid var(--border);border-radius:var(--r-md);padding:0.875rem;text-align:center;margin-bottom:4px}
.dy-best-dsp-getal{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:700;color:var(--clay);display:block}
.dy-best-dsp-label{font-size:0.7rem;color:var(--fg3);text-transform:uppercase;letter-spacing:0.08em}

/* ── Berichten verfijnd ── */
.dy-bericht-rij{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.15s}
.dy-bericht-rij:hover{background:var(--bg3)}
.dy-bericht-rij-info{flex:1;min-width:0}
.dy-bericht-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.dy-bericht-header-naam{font-size:0.88rem;font-weight:600;color:var(--fg)}
.dy-bericht-bubble{max-width:75%;padding:10px 14px;border-radius:18px;font-size:0.88rem;line-height:1.5;background:var(--bg3);color:var(--fg)}
.dy-bericht-badge{background:var(--clay);color:var(--bg);border-radius:100px;font-size:0.6rem;font-weight:700;padding:1px 5px;margin-left:auto}
.dy-bericht-meta{display:flex;justify-content:space-between;align-items:center}
.dy-bericht-tekst{font-size:0.78rem;color:var(--fg3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.dy-bericht-chat{display:flex;flex-direction:column;height:calc(100vh - 56px - var(--nav-h))}
.dy-bericht-input-wrap{padding:12px 14px;border-top:1px solid var(--border);display:flex;gap:8px;background:var(--bg)}
.dy-bericht-input{flex:1;padding:10px 14px;background:var(--bg5);border:1px solid var(--border);border-radius:100px;color:var(--fg);font-family:inherit;font-size:0.88rem}
.dy-bericht-input:focus{outline:none;border-color:var(--clay)}
.dy-bericht-stuur-btn{width:40px;height:40px;border-radius:50%;background:var(--clay);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dy-bericht-vinkjes{font-size:0.72rem;color:var(--clay);margin-left:4px}
.dy-bericht-media{border-radius:var(--r-md);overflow:hidden;max-width:200px;margin-top:6px}
.dy-bericht-media-btn{background:rgba(196,168,130,0.1);border:1px solid rgba(196,168,130,0.2);border-radius:100px;padding:0.4rem 0.875rem;font-size:0.78rem;color:var(--clay);cursor:pointer;font-family:inherit;transition:all 0.15s}
.dy-berichten-lijst{padding-bottom:80px}
.dy-avatar-lg{width:52px;height:52px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--bg);font-size:1rem;flex-shrink:0;overflow:hidden}
.dy-avatar-sm{width:30px;height:30px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--bg);font-size:0.7rem;flex-shrink:0;overflow:hidden}
.dy-avatar-pending{opacity:0.5}

/* ── Artikel ── */
.dy-artikel{max-width:600px;margin:0 auto;padding:16px}
.dy-artikel-titel{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;color:var(--fg);margin-bottom:0.75rem;line-height:1.3}
.dy-artikel-tekst{font-size:0.9rem;color:var(--fg2);line-height:1.8}
.dy-artikel-acties{display:flex;gap:0.75rem;padding:1rem 0;border-top:1px solid var(--border);margin-top:1rem}

/* ── Niveau rij (leaderboard) ── */
.dy-niveau-rij{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border)}
.dy-niveau-rij-emoji{font-size:1.4rem;flex-shrink:0}
.dy-niveau-rij-info{flex:1}
.dy-niveau-rij-info strong{display:block;font-size:0.88rem;color:var(--fg);font-weight:600}
.dy-niveau-rij-info span{font-size:0.72rem;color:var(--fg3);line-height:1.4}
.dy-niveau-rij-pts{font-size:0.78rem;font-weight:700;color:var(--clay);white-space:nowrap}

/* ── Cfg admin / ai ── */
.dy-cfg-admin-badge{display:inline-block;font-size:0.65rem;font-weight:700;background:rgba(248,113,113,0.1);color:var(--danger);border:1px solid rgba(248,113,113,0.2);border-radius:3px;padding:1px 5px;margin-left:6px}
.dy-cfg-ai-header{margin-bottom:12px}
.dy-cfg-ai-sectie{padding:14px}
.dy-cfg-patroon-header,.dy-cfg-community-header{margin-bottom:12px}
.dy-cfg-patroon-disclaimer{font-size:0.7rem;color:var(--fg3);margin-top:8px;line-height:1.5}

/* ── Zoeken ── */
.dy-zoek-sectie-titel{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--clay);margin:1rem 0 0.5rem}

/* ── Challenge header ── */
.dy-challenge-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}


/* ── Topbar verfijnd ── */
.dy-topbar-links,.dy-topbar-right,.dy-topbar-pill,.dy-topbar-brand,.dy-topbar-tagline,.dy-topbar-sub{display:none}
.dy-topbar-logo{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:600;color:var(--fg);cursor:pointer;user-select:none}
.dy-topbar-logo em{color:var(--clay);font-style:italic;font-weight:400}
.dy-topbar-actions{display:flex;align-items:center;gap:0.25rem}
.dy-topbar-btn{background:none;border:none;color:var(--fg3);cursor:pointer;padding:0.4rem;transition:color 0.2s;display:flex;align-items:center;justify-content:center;border-radius:50%}
.dy-topbar-btn:hover{color:var(--fg);background:var(--bg3)}
.dy-topbar-btn svg{width:20px;height:20px}

/* ── Profiel btn ── */
.dy-profiel-btn-wrap{display:flex;align-items:center}
.dy-profiel-btn{width:32px;height:32px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#c4a882,#a08560);display:flex;align-items:center;justify-content:center;font-weight:700;color:#0a0a0a;font-size:0.75rem;border:none;cursor:pointer;transition:opacity 0.2s}
.dy-profiel-btn:hover{opacity:0.85}

/* ── Kaart footer acties (fix voor legacy klassen) ── */
.dy-like-btn,.dy-reactie-btn,.dy-deel-btn,.dy-lees-btn{
  display:flex;align-items:center;gap:0.3rem;
  background:none;border:none;color:var(--fg3);
  font-family:inherit;font-size:0.78rem;font-weight:500;
  cursor:pointer;transition:all 0.2s;padding:0.35rem;
}
.dy-like-btn svg,.dy-reactie-btn svg,.dy-deel-btn svg{width:17px;height:17px;stroke-width:1.5}
.dy-like-btn.liked{color:var(--clay)}
.dy-like-btn.liked svg{fill:var(--clay);stroke:var(--clay)}
.dy-lees-btn{margin-left:auto;color:var(--clay);font-size:0.75rem}

/* ── Lege states ── */
.dy-leeg{grid-column:1/-1;text-align:center;padding:2.5rem 1.5rem;color:var(--fg3)}
.dy-leeg p{font-size:0.85rem}

/* ── Kaart auteur ── */
.dy-kaart-auteur{display:flex;align-items:center;gap:0.6rem;flex:1;min-width:0}
.dy-kaart-auteur-klik{cursor:pointer}

/* ── Eigen badge ── */
.dy-eigen-badge{font-size:0.68rem;background:rgba(196,168,130,0.1);color:var(--clay);border:1px solid rgba(196,168,130,0.2);border-radius:100px;padding:1px 7px}

/* ── Desktop layout ── */
@media(min-width:768px){
  .dy-verhalen-grid{grid-template-columns:repeat(3,1fr);max-width:1200px;margin:0 auto}
  .dy-feed-header{max-width:1200px;margin:0 auto}
  .dy-filters{max-width:1200px;margin:0 auto}
  .dy-stories{max-width:1200px;margin:0 auto}
  .dy-winkel-grid{grid-template-columns:repeat(3,1fr);max-width:1200px;margin:0 auto}
  .dy-look-grid{grid-template-columns:repeat(4,1fr);max-width:1200px;margin:0 auto}
  .dy-form-wrap{max-width:640px}
  .dy-profiel-wrap{max-width:720px;margin:0 auto}
  .app-container{max-width:100%}
  .dy-nav{max-width:100%;border-radius:0}
  .dy-topbar{max-width:100%;padding:0.875rem 2rem}
}

@media(min-width:1200px){
  .dy-verhalen-grid{grid-template-columns:repeat(4,1fr)}
  .dy-topbar{padding:0.875rem 3rem}
}

/* ═══════════════════════════════════════════════════════
   V5 KLEURENPALET OVERRIDES — cream/parchment/ink stijl
   ═══════════════════════════════════════════════════════ */

/* Body en achtergronden */
body { background: var(--cream); color: var(--ink); }

/* Topbar logo stijl zoals v5 */
.dy-topbar-logo { font-family:'DM Sans',sans-serif; font-weight:700; font-size:15px; color:var(--clay); letter-spacing:0.3px; }
.dy-topbar-logo em { color:rgba(198,125,6,0.6); font-style:normal; font-weight:400; }
.dy-topbar-btn { color:rgba(254,252,245,0.6); }
.dy-topbar-btn:hover { color:var(--clay); background:none; }
.dy-topbar-badge { background:var(--clay); color:var(--ink); }

/* Main content */
.dy-main { background: var(--cream); }

/* Feed header */
.dy-feed-header { background: var(--cream); }
.dy-page-title { color: var(--ink); }
.dy-page-title em { color: var(--clay); }
.dy-page-sub { color: var(--ink-muted); }
.dy-feed-intro { color: var(--ink-muted); }

/* Stories */
.dy-stories { background: var(--cream); border-bottom-color: var(--border); }
.dy-story-ring { background: linear-gradient(135deg, var(--clay), var(--clay-d)); }
.dy-story-ring.viewed { background: var(--parchment); }
.dy-story-avatar { background: var(--warm); color: var(--clay); border-color: var(--cream); }
.dy-story-name { color: var(--ink-muted); }

/* Filters */
.dy-filters { background: var(--cream); }

/* Kaarten */
.dy-kaart { background: var(--white); border-color: var(--border); box-shadow: var(--shadow); }
.dy-kaart-header { border-bottom: 1px solid var(--border); }
.dy-kaart-naam { color: var(--ink); }
.dy-kaart-tijd { color: var(--ink-muted); }
.dy-kaart-titel { color: var(--ink); }
.dy-kaart-tekst { color: var(--ink-soft); }
.dy-kaart-footer { background: rgba(30,26,15,0.02); border-top-color: var(--border); }
.dy-kaart-actie { color: var(--ink-muted); }
.dy-kaart-actie:hover { color: var(--clay); }
.dy-kaart-actie.liked { color: var(--clay); }

/* Avatar */
.dy-avatar { background: linear-gradient(135deg, var(--clay), var(--clay-d)); color: var(--white); }

/* Knoppen */
.dy-btn-primary { background: var(--clay); color: var(--white); }
.dy-btn-primary:hover { background: var(--clay-l); }
.dy-btn-secondary { color: var(--ink-muted); border-color: var(--border); }
.dy-btn-secondary:hover { color: var(--ink); border-color: var(--ink-muted); }
.dy-btn-ghost { color: var(--clay); border-color: rgba(198,125,6,0.3); }
.dy-btn-ghost:hover { background: rgba(198,125,6,0.06); border-color: var(--clay); }

/* Inputs */
.dy-input { background: var(--white); border-color: var(--border); color: var(--ink); }
.dy-input:focus { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(198,125,6,0.1); }
.dy-input::placeholder { color: var(--ink-muted); }
.dy-textarea { background: var(--white); border-color: var(--border); color: var(--ink); }
.dy-textarea:focus { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(198,125,6,0.1); }
.dy-label { color: var(--ink-soft); }
.dy-label-klein { color: rgba(198,125,6,0.7); }

/* Toast */
.dy-toast { background: var(--ink); color: var(--white); border-color: rgba(198,125,6,0.2); }
.dy-toast.succes,.dy-toast.success { background: #1a3a20; color: #7dca8a; }
.dy-toast.fout { background: #3a1a1a; color: #ca7d7d; }

/* Profiel */
.dy-profiel-wrap { background: var(--cream); }
.dy-profiel-hero { background: var(--ink); }
.dy-profiel-naam { color: var(--white); }
.dy-profiel-niveau .dy-niveau-naam { color: rgba(254,252,245,0.6); }
.dy-profiel-identity { background: rgba(198,125,6,0.1); border-color: rgba(198,125,6,0.2); color: var(--clay); }
.dy-profiel-email { color: rgba(254,252,245,0.4); }
.dy-profiel-stat-val,.dy-profiel-stat-value { color: var(--ink); }
.dy-profiel-stat-lbl,.dy-profiel-stat-label { color: var(--ink-muted); }
.dy-profiel-sectie { background: var(--white); border-color: var(--border); }
.dy-profiel-sectie-titel { color: var(--clay); }
.dy-profiel-sectie-edit { color: var(--clay); }

/* Stats */
.dy-stats-grid { background: var(--border); border-color: var(--border); }
.dy-stat { background: var(--white); }
.dy-stat-waarde { color: var(--ink); }
.dy-stat-label { color: var(--ink-muted); }

/* Niveau kaart */
.dy-niveau-kaart { background: var(--white); border-color: var(--border); }
.dy-niveau-kaart-header { color: var(--ink); }
.dy-niveau-pct { color: var(--clay); }
.dy-progress-bar { background: var(--parchment); }
.dy-progress-fill { background: linear-gradient(90deg, var(--clay-d), var(--clay), var(--clay-l)); }
.dy-niveau-voordelen { color: var(--ink-soft); }
.dy-niveau-next { color: var(--ink-muted); }
.dy-niveau-next strong { color: var(--clay); }

/* Seizoen kaart */
.dy-seizoen-kaart { background: var(--white); border-color: var(--border); }
.dy-seizoen-label { color: var(--ink-muted); }
.dy-seizoen-tier { color: var(--ink); }
.dy-seizoen-voordelen { background: rgba(198,125,6,0.05); border-color: rgba(198,125,6,0.12); color: var(--ink-soft); }
.dy-seizoen-tier-rij.actief { background: rgba(198,125,6,0.05); border-color: rgba(198,125,6,0.12); }
.dy-seizoen-tier-dot { color: var(--ink-muted); }
.dy-seizoen-tier-rij.actief .dy-seizoen-tier-dot { color: var(--clay); }
.dy-seizoen-tier-info strong { color: var(--ink); }
.dy-seizoen-tier-info span { color: var(--ink-muted); }
.dy-seizoen-tier-pts { color: var(--clay); }

/* Review module */
.dy-rv-sectie { background: var(--white); border-color: var(--border); }
.dy-rv-sectie-titel { color: var(--clay); border-bottom-color: var(--border); }
.dy-rv-chip { background: var(--warm); border-color: var(--border); color: var(--ink-muted); }
.dy-rv-chip:hover { border-color: var(--clay); color: var(--clay); }
.dy-rv-chip.actief { background: var(--clay); border-color: var(--clay); color: var(--white); }
.dy-rv-chip-sm { background: var(--warm); border-color: var(--border); color: var(--ink-muted); }
.dy-rv-chip-sm.actief { background: var(--clay); border-color: var(--clay); color: var(--white); }
.dy-pasvorm-btn { background: var(--warm); border-color: var(--border); color: var(--ink-muted); }
.dy-pasvorm-btn.actief { background: var(--clay); border-color: var(--clay); color: var(--white); }
.dy-ster { color: var(--parchment); }
.dy-ster.actief { color: var(--clay); }

/* Winkel */
.dy-winkel-fit-banner { background: rgba(198,125,6,0.06); border-bottom-color: rgba(198,125,6,0.15); }
.dy-winkel-fit-icon { color: var(--clay); }
.dy-winkel-fit-titel { color: var(--ink); }
.dy-winkel-fit-sub { color: var(--ink-muted); }
.dy-product-kaart { background: var(--white); border-color: var(--border); }
.dy-product-kaart:hover { border-color: var(--clay); }
.dy-product-merk { color: var(--clay); }
.dy-product-naam { color: var(--ink); }
.dy-product-prijs { color: var(--ink); }
.dy-product-meta { color: var(--ink-muted); }
.dy-tall-badge { background: rgba(198,125,6,0.08); color: var(--clay); border-color: rgba(198,125,6,0.2); }

/* Match badge */
.dy-match-badge { background: rgba(198,125,6,0.08); color: var(--clay); border-color: rgba(198,125,6,0.2); }

/* Lege state */
.dy-empty-title { color: var(--ink); }
.dy-empty-text { color: var(--ink-muted); }

/* Onboarding */
.dy-onboarding-wrap { background: var(--ink); }
.dy-ob-btn { background: rgba(254,252,245,0.08); border-color: rgba(198,125,6,0.2); color: rgba(254,252,245,0.7); }
.dy-ob-btn.selected,.dy-ob-btn.actief { background: rgba(198,125,6,0.15); border-color: var(--clay); color: var(--clay); }

/* DSP tip */
.dy-dsp-tip { background: rgba(198,125,6,0.06); border-color: rgba(198,125,6,0.15); color: var(--ink-soft); }
.dy-dsp-tip-icon { color: var(--clay); }

/* Body stat items */
.dy-body-stat-item { background: var(--warm); border-color: var(--border); }
.dy-body-stat-val { color: var(--clay); }
.dy-body-stat-lbl { color: var(--ink-muted); }

/* Fit identity */
.dy-fit-stat { background: rgba(198,125,6,0.06); }
.dy-fit-stat-val { color: var(--clay); }
.dy-fit-stat-lbl { color: var(--ink-muted); }
.dy-fit-tag { background: var(--warm); color: var(--ink-muted); border-color: var(--border); }

/* Bestellingen en andere pagina's */
.dy-badge-item { background: var(--warm); border-color: var(--border); color: var(--ink-soft); }
.dy-challenge-kaart { background: var(--white); border-color: var(--border); }
.dy-challenge-titel { color: var(--ink); }
.dy-challenge-sub { color: var(--ink-soft); }
.dy-challenge-fill { background: var(--gold); }
.dy-leaderboard-item { border-bottom-color: var(--border); }
.dy-lb-naam { color: var(--ink); }
.dy-lb-sub { color: var(--ink-muted); }
.dy-lb-punten { color: var(--clay); }

/* Looks */
.dy-look-kaart { background: var(--white); border-color: var(--border); }
.dy-look-naam { color: var(--white); }
.dy-look-maten { color: rgba(254,252,245,0.7); }

/* Reviews footer */
.dy-review-footer { background: rgba(30,26,15,0.02); border-top-color: var(--border); }
.dy-helpful-btn { color: var(--ink-muted); border-color: var(--border); }
.dy-helpful-btn:hover { border-color: var(--clay); color: var(--clay); }
.dy-verified-badge { color: var(--success); }

/* Berichten */
.dy-bericht-item:hover,.dy-bericht-rij:hover { background: var(--warm); }
.dy-bericht-naam,.dy-bericht-header-naam { color: var(--ink); }
.dy-bericht-preview,.dy-bericht-tekst { color: var(--ink-muted); }
.dy-chat-bubble { background: var(--warm); color: var(--ink); }
.dy-chat-bericht.eigen .dy-chat-bubble { background: var(--clay); color: var(--white); }
.dy-chat-input { background: var(--warm); border-color: var(--border); color: var(--ink); }
.dy-chat-input-wrap { background: var(--cream); }

/* Profiel hero naam-wrap edit */
.dy-profiel-naam-edit-btn { color: rgba(254,252,245,0.4); }
.dy-profiel-naam-edit-btn:hover { color: var(--clay); }

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM FIX — Alle ontbrekende klassen gestyled
   ═══════════════════════════════════════════════════════════════════ */

/* ── Kaart header fix — verhaal naam/tijd op één lijn ── */
.dy-kaart-header {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}
.dy-kaart-auteur {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.dy-kaart-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dy-kaart-naam {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dy-kaart-tijd {
  font-size: 0.7rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* ── Like / actie knoppen fix ── */
.dy-kaart-footer {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  gap: 4px;
  border-top: 1px solid var(--border);
  background: rgba(30,26,15,0.02);
}
.dy-kaart-actie {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--ink-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: all 0.15s;
  white-space: nowrap;
}
.dy-kaart-actie:hover { background: var(--warm); color: var(--clay); }
.dy-kaart-actie.liked { color: var(--clay); }
.dy-kaart-actie.liked svg { fill: var(--clay); }
.dy-kaart-actie svg { width: 16px; height: 16px; stroke-width: 1.5; flex-shrink: 0; }
.dy-like-btn, .dy-reactie-btn, .dy-deel-btn, .dy-lees-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; color: var(--ink-muted);
  font-family: 'DM Sans', sans-serif; font-size: 0.78rem;
  font-weight: 500; cursor: pointer; padding: 6px 8px;
  border-radius: 6px; transition: all 0.15s; white-space: nowrap;
}
.dy-like-btn:hover, .dy-reactie-btn:hover, .dy-deel-btn:hover { background: var(--warm); color: var(--clay); }
.dy-like-btn.liked { color: var(--clay); }
.dy-like-btn.liked svg { fill: var(--clay); }
.dy-like-btn svg, .dy-reactie-btn svg, .dy-deel-btn svg { width: 16px; height: 16px; fill: currentColor; }
.dy-lees-btn { margin-left: auto; color: var(--clay); font-weight: 600; font-size: 0.75rem; }

/* ── Winkel pagina volledig gestyled ── */
.dy-winkel-wrap { padding-bottom: 80px; }

.dy-winkel-dsp-banner {
  margin: 0 12px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.dy-winkel-dsp-niveau {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(198,125,6,0.04);
  border-bottom: 1px solid var(--border);
}
.dy-winkel-dsp-emoji { font-size: 1.5rem; flex-shrink: 0; }
.dy-winkel-dsp-niveau strong { display: block; font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.dy-winkel-dsp-niveau span { font-size: 0.75rem; color: var(--clay); }
.dy-winkel-dsp-info { padding: 12px 16px; }
.dy-winkel-dsp-info p { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 6px; }
.dy-winkel-dsp-detail { font-size: 0.8rem; color: var(--ink-muted); line-height: 1.6; }

.dy-winkel-acties { padding: 0 12px 12px; }

.dy-winkel-btn-primary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--clay);
  color: var(--white);
  border: none;
  border-radius: var(--r-md);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dy-winkel-btn-primary svg { width: 20px; height: 20px; fill: currentColor; }
.dy-winkel-btn-primary:hover { background: var(--clay-l); transform: translateY(-1px); }

.dy-winkel-btn-secondary {
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  color: var(--clay);
  border: 1.5px solid rgba(198,125,6,0.3);
  border-radius: var(--r-md);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.dy-winkel-btn-secondary:hover { border-color: var(--clay); background: rgba(198,125,6,0.04); }

.dy-winkel-categorien { padding: 0 12px 12px; }
.dy-winkel-cat-titel {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--clay);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.dy-winkel-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.dy-winkel-cat-kaart {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 14px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.dy-winkel-cat-kaart:hover { border-color: var(--clay); background: rgba(198,125,6,0.02); }
.dy-winkel-cat-icon { font-size: 1.5rem; margin-bottom: 4px; }
.dy-winkel-cat-kaart strong { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.dy-winkel-cat-kaart span { font-size: 0.75rem; color: var(--ink-muted); }

.dy-winkel-dsp-uitleg { padding: 0 12px 12px; }
.dy-winkel-dsp-tabel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.dy-winkel-dsp-rij {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.dy-winkel-dsp-rij:last-child { border-bottom: none; }
.dy-winkel-dsp-rij span:first-child { color: var(--ink-soft); }
.dy-winkel-dsp-pts { color: var(--clay); font-weight: 700; }
.dy-dsp-disclaimer {
  font-size: 0.72rem;
  color: var(--ink-muted);
  margin-top: 8px;
  line-height: 1.5;
  padding: 0 2px;
}
.dy-bestellingen-wrap { padding: 0 12px 12px; }

/* ── Profiel — DSP log en knoppen ── */
.dy-log-sectie {
  margin: 8px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.dy-log-titel {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--clay);
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
  margin: 0;
}
.dy-log-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.dy-log-item:last-child { border-bottom: none; }
.dy-log-label { color: var(--ink-soft); }
.dy-log-pts { color: var(--clay); font-weight: 700; white-space: nowrap; margin-left: 8px; }

/* DSP reglement button */
.dy-dsp-reglement-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 24px);
  margin: 8px 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'DM Sans', sans-serif;
}
.dy-dsp-reglement-btn:hover { border-color: var(--clay); }
.dy-dsp-reglement-links {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dy-dsp-reglement-icon { font-size: 1.2rem; color: var(--clay); flex-shrink: 0; }
.dy-dsp-reglement-links strong { display: block; font-size: 0.88rem; color: var(--ink); font-weight: 700; }
.dy-dsp-reglement-links span { font-size: 0.75rem; color: var(--ink-muted); }
.dy-dsp-reglement-btn > svg { width: 20px; height: 20px; fill: var(--ink-muted); flex-shrink: 0; }

/* Push toggle */
.dy-push-toggle-kaart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.dy-push-toggle-links { display: flex; align-items: center; gap: 12px; }
.dy-push-toggle-icon { font-size: 1.3rem; flex-shrink: 0; }
.dy-push-toggle-links strong { display: block; font-size: 0.88rem; color: var(--ink); font-weight: 700; }
.dy-push-toggle-links span { font-size: 0.75rem; color: var(--ink-muted); }
.dy-push-toggle-btn {
  padding: 6px 16px;
  background: var(--warm);
  border: 1.5px solid var(--border);
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.dy-push-toggle-btn.actief {
  background: rgba(198,125,6,0.1);
  border-color: rgba(198,125,6,0.3);
  color: var(--clay);
}

/* Profiel acties */
.dy-profiel-acties {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 24px;
}
.dy-profiel-acties .dy-btn { font-size: 0.82rem; padding: 12px; text-transform: none; letter-spacing: 0; }
.dy-btn-uitloggen { color: var(--danger) !important; border-color: rgba(192,57,43,0.2) !important; }
.dy-btn-uitloggen:hover { background: rgba(192,57,43,0.06) !important; }

/* Alle niveaus sectie */
.dy-alle-niveaus {
  margin: 8px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.dy-alle-niveaus .dy-log-titel { margin-bottom: 0; }
.dy-niveau-rij {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.dy-niveau-rij:last-child { border-bottom: none; }
.dy-niveau-rij.actief { background: rgba(198,125,6,0.04); }
.dy-niveau-rij-emoji { font-size: 1.3rem; flex-shrink: 0; width: 28px; text-align: center; }
.dy-niveau-rij-info { flex: 1 }
.dy-niveau-rij-info strong { display: block; font-size: 0.85rem; color: var(--ink); font-weight: 700; }
.dy-niveau-rij-info span { font-size: 0.72rem; color: var(--ink-muted); line-height: 1.4; }
.dy-niveau-rij-pts { font-size: 0.75rem; font-weight: 700; color: var(--clay); white-space: nowrap; }

/* Badges sectie */
.dy-badges-sectie {
  margin: 8px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.dy-badges-sectie .dy-log-titel { border-bottom: 1px solid var(--border); }
.dy-badges-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
}
.dy-badge-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(198,125,6,0.06);
  border: 1px solid rgba(198,125,6,0.15);
  border-radius: 100px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.dy-badge-emoji { font-size: 1rem; }

/* Leeg tekst */
.dy-leeg-tekst { font-size: 0.82rem; color: var(--ink-muted); padding: 14px; }

/* Loader fix */
.dy-loader { display: flex; justify-content: center; padding: 2rem; }

/* Stats grid */
.dy-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 12px;
  background: var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.dy-stat {
  background: var(--white);
  padding: 16px 8px;
  text-align: center;
}
.dy-stat + .dy-stat { border-left: 1px solid var(--border); }
.dy-stat-waarde {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 3px;
}
.dy-stat-label {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

/* Niveau kaart */
.dy-niveau-kaart {
  margin: 8px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
}
.dy-niveau-kaart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}
.dy-niveau-pct { font-size: 0.85rem; color: var(--clay); font-weight: 600; }
.dy-progress-bar { height: 8px; background: var(--warm); border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.dy-progress-fill { height: 100%; background: linear-gradient(90deg, var(--clay-d), var(--clay)); border-radius: 4px; transition: width 1s cubic-bezier(0.23,1,0.32,1); }
.dy-niveau-voordelen { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 6px; line-height: 1.5; }
.dy-niveau-next { font-size: 0.78rem; color: var(--ink-muted); }
.dy-niveau-next strong { color: var(--clay); }

/* Seizoen kaart */
.dy-seizoen-kaart {
  margin: 8px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.dy-seizoen-kaart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.dy-seizoen-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); margin-bottom: 2px; }
.dy-seizoen-tier { font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.dy-seizoen-pts { text-align: right; }
.dy-seizoen-pts strong { display: block; font-size: 1.4rem; font-weight: 800; color: var(--clay); line-height: 1; }
.dy-seizoen-pts span { font-size: 0.68rem; color: var(--ink-muted); }
.dy-seizoen-voordelen {
  margin: 0;
  padding: 10px 16px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  background: rgba(198,125,6,0.04);
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}
.dy-seizoen-alle-tiers { padding: 4px 0; }
.dy-seizoen-tier-rij {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.dy-seizoen-tier-rij:last-child { border-bottom: none; }
.dy-seizoen-tier-rij.actief { background: rgba(198,125,6,0.04); }
.dy-seizoen-tier-dot { font-size: 0.9rem; color: var(--ink-muted); flex-shrink: 0; padding-top: 1px; }
.dy-seizoen-tier-rij.actief .dy-seizoen-tier-dot { color: var(--clay); }
.dy-seizoen-tier-rij.bereikt .dy-seizoen-tier-dot { color: var(--success); }
.dy-seizoen-tier-info { flex: 1 }
.dy-seizoen-tier-info strong { display: block; font-size: 0.82rem; color: var(--ink); font-weight: 700; }
.dy-seizoen-tier-info span { display: block; font-size: 0.72rem; color: var(--ink-muted); line-height: 1.4; margin-top: 1px; }
.dy-seizoen-tier-pts { font-size: 0.72rem; font-weight: 700; color: var(--clay); white-space: nowrap; flex-shrink: 0; }

/* Eigen badge in feed */
.dy-eigen-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: rgba(198,125,6,0.08);
  color: var(--clay);
  border: 1px solid rgba(198,125,6,0.2);
  border-radius: 100px;
  padding: 2px 8px;
}

/* Login prompt */
.dy-login-prompt-wrap { padding: 40px 20px; }
.dy-login-prompt-kaart {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 24px;
  text-align: center;
}
.dy-login-prompt-icon { font-size: 2.5rem; margin-bottom: 16px; color: var(--clay); }
.dy-login-prompt-titel {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.dy-login-prompt { font-size: 0.85rem; color: var(--ink-muted); margin-bottom: 20px; line-height: 1.6; }

/* DY field */
.dy-field { margin-bottom: 16px; }

/* Responsive desktop */
@media(min-width: 768px) {
  .dy-winkel-cat-grid { grid-template-columns: repeat(4, 1fr); }
  .dy-profiel-acties { max-width: 400px; }
  .dy-verhalen-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ═══════════════════════════════════════════════════════════════════
   PREMIUM RESPONSIVE LAYOUT — Desktop & Mobile fix
   ═══════════════════════════════════════════════════════════════════ */

/* ── App breedte begrenzen ── */
body { background: #e8dfd0; }

.dy-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 100;
  border-bottom: 1px solid rgba(198,125,6,0.2);
}

/* Desktop: centreer de content */
@media (min-width: 640px) {
  .dy-topbar {
    padding: 0 24px;
  }
  .dy-main {
    max-width: 680px;
    margin: 56px auto 0;
    background: var(--cream);
    min-height: calc(100vh - 56px - var(--nav-h));
    box-shadow: 0 0 40px rgba(30,26,15,0.08);
  }
  .dy-nav {
    left: 50%;
    transform: translateX(-50%);
    max-width: 680px;
    border-radius: 0;
  }
  body { background: #e8dfd0; }
}

@media (min-width: 1024px) {
  .dy-main { max-width: 760px; }
  .dy-nav { max-width: 760px; }
}

/* ── Feed grid: altijd 2 kolommen max op mobiel ── */
.dy-verhalen-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 10px;
}

/* ── Kaart: vaste proportie, geen overloop ── */
.dy-kaart {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(30,26,15,0.06);
}
.dy-kaart:active { transform: scale(0.98); }

/* ── Avatar: vaste maat, nooit groter ── */
.dy-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clay), var(--clay-d));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--white);
  overflow: hidden;
  flex-shrink: 0;
}
.dy-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dy-avatar-lg {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  font-size: 0.85rem;
}

/* ── Profiel hero avatar: apart gestyled ── */
.dy-profiel-avatar-lg {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  font-size: 1.8rem !important;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clay), var(--clay-d));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  color: var(--white);
  overflow: hidden;
  border: 3px solid rgba(198,125,6,0.2);
}
.dy-profiel-avatar-lg img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ── Kaart header: altijd één regel ── */
.dy-kaart-header {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  min-height: 0;
}
.dy-kaart-auteur {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  overflow: hidden;
}
.dy-kaart-meta {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.dy-kaart-naam {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.3;
}
.dy-kaart-tijd {
  font-size: 0.65rem;
  color: var(--ink-muted);
  display: block;
  white-space: nowrap;
  line-height: 1.3;
}

/* ── Foto: vaste aspect ratio ── */
.dy-img-wrap {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--warm);
  flex-shrink: 0;
}
.dy-kaart-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Kaart tekst: max 3 regels ── */
.dy-kaart-body {
  padding: 10px 12px;
  flex: 1;
}
.dy-kaart-tekst {
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dy-kaart-titel {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Footer compacter ── */
.dy-kaart-footer {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  background: rgba(30,26,15,0.02);
  gap: 2px;
}
.dy-kaart-actie, .dy-like-btn, .dy-reactie-btn, .dy-deel-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--ink-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  padding: 5px 6px;
  border-radius: 6px;
  transition: all 0.15s;
  white-space: nowrap;
}
.dy-kaart-actie:hover, .dy-like-btn:hover, .dy-reactie-btn:hover { 
  background: var(--warm); color: var(--clay); 
}
.dy-kaart-actie.liked, .dy-like-btn.liked { color: #c0392b; }
.dy-kaart-actie.liked svg, .dy-like-btn.liked svg { fill: #c0392b; }
.dy-kaart-actie svg, .dy-like-btn svg, .dy-reactie-btn svg, .dy-deel-btn svg { 
  width: 14px; height: 14px; fill: currentColor; flex-shrink: 0;
}
.dy-lees-btn {
  margin-left: auto;
  color: var(--clay);
  font-size: 0.7rem;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  padding: 5px 6px;
}

/* ── Stories: scroll fix ── */
.dy-stories {
  display: flex;
  gap: 12px;
  padding: 14px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
  background: var(--cream);
}
.dy-stories::-webkit-scrollbar { display: none; }
.dy-story { flex-shrink: 0; }
.dy-story-ring {
  width: 58px; height: 58px;
  border-radius: 50%;
  padding: 2.5px;
  background: linear-gradient(135deg, var(--clay), var(--clay-d));
}
.dy-story-ring.viewed { background: var(--parchment); }
.dy-story-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--warm);
  border: 2px solid var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--clay);
  font-size: 0.95rem;
  overflow: hidden;
}
.dy-story-name {
  font-size: 0.62rem;
  color: var(--ink-muted);
  max-width: 58px;
  text-align: center;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Filters compacter ── */
.dy-filters {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.dy-filters::-webkit-scrollbar { display: none; }
.dy-filter {
  padding: 6px 14px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 100px;
  color: var(--ink-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.dy-filter.active {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--white);
  font-weight: 600;
}

/* ── Nav: premium stijl ── */
.dy-nav {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  height: var(--nav-h);
  background: var(--ink);
  display: flex;
  border-top: 1px solid rgba(198,125,6,0.15);
  z-index: 100;
}
.dy-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: rgba(254,252,245,0.35);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  background: none;
  font-family: 'DM Sans', sans-serif;
  padding: 0;
  transition: color 0.2s;
}
.dy-nav-item svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.dy-nav-item.active { color: var(--clay); }
.dy-nav-item:hover { color: rgba(198,125,6,0.7); }

/* Center knop */
.dy-nav-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.dy-nav-center-ring {
  position: absolute;
  top: -18px;
  width: 52px; height: 52px;
  background: var(--clay);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(198,125,6,0.4);
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}
.dy-nav-center-ring:hover { transform: scale(1.05); }
.dy-nav-center-lbl {
  margin-top: 26px;
  font-size: 0.58rem;
  color: rgba(254,252,245,0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: 'DM Sans', sans-serif;
}

/* ── Eigen badge ── */
.dy-eigen-badge {
  font-size: 0.62rem;
  font-weight: 600;
  background: rgba(198,125,6,0.1);
  color: var(--clay);
  border: 1px solid rgba(198,125,6,0.2);
  border-radius: 100px;
  padding: 1px 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Feed header ── */
.dy-feed-header {
  padding: 14px 12px 8px;
  background: var(--cream);
}
.dy-page-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}
.dy-page-title em { color: var(--clay); font-style: italic; font-weight: 400; font-family: 'Cormorant Garamond', serif; }
.dy-page-sub { font-size: 0.82rem; color: var(--ink-muted); margin-top: 4px; line-height: 1.5; }
.dy-feed-intro { font-size: 0.82rem; color: var(--ink-muted); line-height: 1.6; margin-top: 4px; }

/* ── Back button ── */
.dy-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--clay);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  padding: 6px 0;
  transition: opacity 0.2s;
}
.dy-back-btn:hover { opacity: 0.75; }

/* ── Detail pagina ── */
.dy-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.dy-detail-wrap {
  padding: 0 0 80px;
  max-width: 680px;
  margin: 0 auto;
  background: var(--cream);
}
.dy-artikel {
  padding: 14px;
  background: var(--white);
  margin: 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.dy-artikel-titel {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
  margin: 12px 0 8px;
  line-height: 1.3;
}
.dy-artikel-tekst {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.75;
}
.dy-artikel-foto {
  width: 100%;
  border-radius: 8px;
  margin: 10px 0;
  max-height: 320px;
  object-fit: cover;
}
.dy-artikel-acties {
  display: flex;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.dy-reacties-sectie {
  padding: 12px 8px;
}
.dy-reactie-header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clay);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.dy-verwijder-btn {
  background: none;
  border: none;
  color: #c0392b;
  cursor: pointer;
  padding: 4px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.dy-verwijder-btn:hover { opacity: 1; }
.dy-verwijder-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* ── Topbar logo kleuren fix ── */
.dy-topbar-logo {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--clay);
  cursor: pointer;
  letter-spacing: -0.01em;
}
.dy-topbar-logo em { color: rgba(198,125,6,0.5); font-style: normal; font-weight: 400; }
.dy-topbar-btn {
  background: none;
  border: none;
  color: rgba(254,252,245,0.55);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}
.dy-topbar-btn:hover { color: var(--clay); }
.dy-topbar-btn svg { width: 20px; height: 20px; }
.dy-topbar-actions { display: flex; align-items: center; gap: 4px; }

/* ── Loading ── */
.dy-loading-wrap {
  grid-column: 1/-1;
  display: flex;
  justify-content: center;
  padding: 2.5rem;
}
.dy-dot-loader { display: flex; gap: 6px; align-items: center; }
.dy-dot-loader span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--clay);
  animation: dotPulse 1.4s ease-in-out infinite;
}
.dy-dot-loader span:nth-child(2) { animation-delay: 0.2s; }
.dy-dot-loader span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse {
  0%,80%,100%{transform:scale(0.6);opacity:0.4}
  40%{transform:scale(1);opacity:1}
}

/* ── Match badge ── */
.dy-match-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  background: rgba(198,125,6,0.08);
  color: var(--clay);
  border: 1px solid rgba(198,125,6,0.2);
  border-radius: 100px;
  padding: 1px 7px;
  margin-bottom: 5px;
}

/* ── Main met correcte margin ── */
.dy-main {
  margin-top: 56px;
  min-height: calc(100vh - 56px - var(--nav-h));
  padding-bottom: var(--nav-h);
  background: var(--cream);
}

/* Fade animatie */
.dy-fade-in { animation: fadeIn 0.25s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ═══════════════════════════════════════════════════════════════════
   VOLLEDIGE FIX — Alle ontbrekende pagina CSS
   ═══════════════════════════════════════════════════════════════════ */

/* ── LEADERBOARD ── */
.dy-leaderboard-wrap { padding: 0 0 80px; }
.dy-leaderboard-lijst { padding: 8px 12px; }
.dy-leaderboard-periode {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted);
  padding: 8px 4px 12px; text-align: center;
}
.dy-leaderboard-rij {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.dy-leaderboard-rij:hover { border-color: var(--clay); box-shadow: 0 2px 8px rgba(198,125,6,0.08); }
.dy-leaderboard-rij.jij { background: rgba(198,125,6,0.04); border-color: rgba(198,125,6,0.25); }
.dy-leaderboard-rang {
  font-size: 1.3rem; flex-shrink: 0; width: 36px; text-align: center;
}
.dy-leaderboard-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--clay), var(--clay-d));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700; color: var(--white);
  overflow: hidden;
}
.dy-leaderboard-info { flex: 1; min-width: 0; }
.dy-leaderboard-info strong { display: block; font-size: 0.88rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dy-leaderboard-info span { font-size: 0.72rem; color: var(--ink-muted); }
.dy-leaderboard-pts { font-size: 0.82rem; font-weight: 700; color: var(--clay); white-space: nowrap; flex-shrink: 0; }
.dy-leaderboard-optin { padding: 12px 4px; text-align: center; }

/* ── CHALLENGES ── */
.dy-challenges-wrap { padding: 8px 12px 80px; }
.dy-challenge-kaart {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; margin-bottom: 8px;
}
.dy-challenge-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.dy-challenge-titel { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.dy-challenge-dsp { font-size: 0.8rem; font-weight: 700; color: var(--clay); }
.dy-challenge-sub { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; margin-bottom: 12px; }
.dy-challenge-voortgang { height: 6px; background: var(--warm); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.dy-challenge-fill { height: 100%; background: linear-gradient(90deg, var(--clay-d), var(--clay)); border-radius: 3px; }
.dy-challenge-meta { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--ink-muted); }
.dy-challenge-status { font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 100px; }
.dy-challenge-status.actief { background: rgba(198,125,6,0.1); color: var(--clay); }
.dy-challenge-status.klaar { background: rgba(45,122,58,0.1); color: var(--success); }

/* ── MELDINGEN ── */
.dy-meldingen-wrap,.dy-meldingen-lijst { padding: 8px 12px 80px; }
.dy-melding-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 6px;
}
.dy-melding-item.ongelezen { border-left: 3px solid var(--clay); }
.dy-melding-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: var(--warm); display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 700; color: var(--clay); }
.dy-melding-body { flex: 1; min-width: 0; }
.dy-melding-tekst { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; }
.dy-melding-tekst strong { color: var(--ink); }
.dy-melding-tijd { font-size: 0.7rem; color: var(--ink-muted); margin-top: 3px; }
.dy-melding-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--clay); flex-shrink: 0; margin-top: 4px; }

/* ── REVIEWS OVERZICHT ── */
.dy-reviews-wrap { padding: 0 0 80px; }
.dy-rv-header { padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dy-rv-filter-row { display: flex; gap: 6px; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: none; }
.dy-rv-filter-row::-webkit-scrollbar { display: none; }
.dy-rv-stat-blok {
  margin: 0 12px 10px;
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; display: flex; align-items: center; gap: 16px;
}
.dy-rv-stat-sterren { font-size: 1.8rem; font-weight: 800; color: var(--ink); font-family: 'DM Sans', sans-serif; }
.dy-rv-stat-bar-wrap { flex: 1; }
.dy-rv-stat-rij { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.dy-rv-stat-ster-lbl { font-size: 0.7rem; color: var(--ink-muted); width: 10px; text-align: right; flex-shrink: 0; }
.dy-rv-stat-bar { flex: 1; height: 5px; background: var(--warm); border-radius: 3px; overflow: hidden; }
.dy-rv-stat-bar-fill { height: 100%; background: var(--clay); border-radius: 3px; }
.dy-rv-stat-count { font-size: 0.68rem; color: var(--ink-muted); width: 16px; flex-shrink: 0; }
.dy-rv-kaart {
  margin: 0 12px 8px;
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; transition: border-color 0.2s;
}
.dy-rv-kaart:hover { border-color: var(--clay); }
.dy-rv-kaart-header { padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
.dy-rv-kaart-meta { flex: 1; min-width: 0; }
.dy-rv-kaart-naam { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.dy-rv-kaart-stats { font-size: 0.72rem; color: var(--ink-muted); margin-top: 1px; }
.dy-rv-sterren { color: var(--clay); font-size: 0.88rem; letter-spacing: 0.05em; }
.dy-rv-kaart-body { padding: 12px 14px; }
.dy-rv-kaart-product { font-size: 0.78rem; font-weight: 600; color: var(--clay); margin-bottom: 6px; }
.dy-rv-kaart-tekst { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 8px; }
.dy-rv-kaart-footer { padding: 8px 14px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: rgba(30,26,15,0.02); }
.dy-rv-match-badge { font-size: 0.68rem; font-weight: 600; background: rgba(198,125,6,0.08); color: var(--clay); border: 1px solid rgba(198,125,6,0.15); border-radius: 100px; padding: 2px 8px; }

/* ── BESTELLINGEN ── */
.dy-best-shopify-blok {
  margin: 8px 12px; padding: 24px 16px;
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  text-align: center;
}
.dy-best-shopify-titel { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 12px 0 6px; }
.dy-best-shopify-tekst { font-size: 0.85rem; color: var(--ink-muted); line-height: 1.6; margin-bottom: 16px; }
.dy-best-leeg { text-align: center; padding: 2rem 1rem; }
.dy-best-leeg-icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.5; }
.dy-best-dsp-overzicht { margin: 8px 12px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.dy-best-dsp-rij { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.dy-best-dsp-rij:last-child { border-bottom: none; }
.dy-best-dsp-rij-label { color: var(--ink-soft); }
.dy-best-dsp-totaal { font-size: 0.78rem; font-weight: 700; color: var(--clay); padding: 8px 14px; background: rgba(198,125,6,0.04); border-top: 1px solid var(--border); }

/* ── PASKAMER (AI) ── */
.dy-pk-wrap { padding: 0 0 80px; background: var(--cream); }
.dy-pk-stap { padding: 12px; }
.dy-pk-sectie { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 8px; }
.dy-pk-sectie-titel { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clay); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.dy-pk-resultaat { padding: 14px; background: rgba(198,125,6,0.04); border: 1px solid rgba(198,125,6,0.15); border-radius: 10px; margin: 8px 12px; }
.dy-pk-maat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.dy-pk-maat-item { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 10px 6px; text-align: center; }
.dy-pk-maat-val { display: block; font-size: 1.1rem; font-weight: 700; color: var(--clay); font-family: 'DM Sans', sans-serif; }
.dy-pk-maat-lbl { display: block; font-size: 0.65rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }
.dy-pk-fit-status { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: rgba(45,122,58,0.06); border: 1px solid rgba(45,122,58,0.15); border-radius: 8px; margin-top: 8px; font-size: 0.82rem; color: var(--success); }

/* ── CONFIGURATOR extra ── */
.dy-cfg-genereer-btn {
  width: 100%; padding: 14px; background: var(--clay); color: var(--white);
  border: none; border-radius: 8px; font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: all 0.2s;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.dy-cfg-genereer-btn:hover { background: var(--clay-l); }
.dy-cfg-genereer-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.dy-cfg-maat-veld { display: flex; flex-direction: column; gap: 4px; }
.dy-cfg-maat-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); }
.dy-cfg-maat-input { padding: 8px 10px; background: var(--white); border: 1.5px solid var(--border); border-radius: 6px; color: var(--ink); font-family: 'DM Sans', sans-serif; font-size: 0.88rem; }
.dy-cfg-maat-input:focus { outline: none; border-color: var(--clay); }
.dy-cfg-maten-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.dy-cfg-maten-form-titel { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clay); margin-bottom: 8px; grid-column: 1/-1; }
.dy-cfg-acties { padding: 12px; display: flex; gap: 8px; }
.dy-cfg-kleur { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all 0.15s; flex-shrink: 0; }
.dy-cfg-kleur.actief { border-color: var(--clay); transform: scale(1.15); }
.dy-cfg-kleuren { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dy-cfg-check { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.85rem; color: var(--ink-soft); cursor: pointer; }
.dy-cfg-check input { accent-color: var(--clay); }
.dy-cfg-body { padding: 12px; }
.dy-cfg-ai-chat { display: flex; flex-direction: column; height: 300px; background: var(--warm); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.dy-cfg-ai-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clay); margin-bottom: 8px; padding: 8px 10px 0; }
.dy-cfg-ai-input-wrap { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border); background: var(--white); }
.dy-cfg-ai-input { flex: 1; padding: 8px 10px; background: var(--warm); border: 1px solid var(--border); border-radius: 6px; font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: var(--ink); }
.dy-cfg-ai-stuur { padding: 8px 14px; background: var(--clay); color: var(--white); border: none; border-radius: 6px; font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.dy-cfg-ai-sluit { background: none; border: none; color: var(--ink-muted); cursor: pointer; font-size: 1.1rem; padding: 4px; }
.dy-cfg-brief { padding: 12px; }
.dy-cfg-brief-titel { font-size: 0.85rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.dy-cfg-brief-rij { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.dy-cfg-brief-label { color: var(--ink-muted); }
.dy-cfg-brief-datum { color: var(--ink-soft); font-size: 0.72rem; }
.dy-cfg-brief-top { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clay); margin-bottom: 8px; }
.dy-cfg-brief-textarea { width: 100%; padding: 10px; background: var(--warm); border: 1.5px solid var(--border); border-radius: 8px; color: var(--ink); font-family: 'DM Sans', sans-serif; font-size: 0.85rem; resize: vertical; }
.dy-cfg-brief-textarea:focus { outline: none; border-color: var(--clay); }
.dy-cfg-brief-acties { display: flex; gap: 8px; margin-top: 10px; }
.dy-cfg-brief-check { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--ink-muted); cursor: pointer; padding: 6px 0; }
.dy-cfg-brief-overzicht { background: var(--warm); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-top: 10px; }
.dy-cfg-model-acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.dy-cfg-model-foto { width: 100%; border-radius: 8px; max-height: 300px; object-fit: cover; }
.dy-cfg-model-download { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--clay); color: var(--white); border: none; border-radius: 6px; font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.dy-cfg-admin-blok { background: rgba(192,57,43,0.06); border: 1px solid rgba(192,57,43,0.15); border-radius: 8px; padding: 12px; margin-bottom: 8px; }
.dy-cfg-admin-titel { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #c0392b; margin-bottom: 8px; }
.dy-cfg-admin-maten { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.dy-cfg-admin-patroon-preview { width: 100%; border-radius: 6px; margin-top: 8px; }
.dy-cfg-maten-opmerking { font-size: 0.75rem; color: var(--ink-muted); margin-top: 8px; line-height: 1.5; }

/* ── BERICHTEN extra ── */
.dy-berichten-lijst { padding: 0 0 80px; }
.dy-bericht-rij {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.15s; background: var(--white);
}
.dy-bericht-rij:first-child { border-top: 1px solid var(--border); }
.dy-bericht-rij:hover { background: var(--warm); }
.dy-bericht-rij-info { flex: 1; min-width: 0; }
.dy-bericht-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.dy-bericht-header-naam { font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.dy-bericht-naam { font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.dy-bericht-preview,.dy-bericht-tekst { font-size: 0.78rem; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dy-bericht-tijd { font-size: 0.7rem; color: var(--ink-muted); white-space: nowrap; }
.dy-bericht-badge { background: var(--clay); color: var(--white); border-radius: 100px; font-size: 0.6rem; font-weight: 700; padding: 1px 5px; margin-left: 6px; }
.dy-bericht-ongelezen { width: 8px; height: 8px; border-radius: 50%; background: var(--clay); flex-shrink: 0; }
.dy-bericht-chat { display: flex; flex-direction: column; height: calc(100vh - 56px - var(--nav-h)); }
.dy-bericht-input-wrap { padding: 10px 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; background: var(--white); }
.dy-bericht-input { flex: 1; padding: 9px 14px; background: var(--warm); border: 1px solid var(--border); border-radius: 100px; color: var(--ink); font-family: 'DM Sans', sans-serif; font-size: 0.88rem; }
.dy-bericht-input:focus { outline: none; border-color: var(--clay); }
.dy-bericht-stuur-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--clay); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dy-bericht-stuur-btn svg { width: 16px; height: 16px; fill: var(--white); }
.dy-bericht-media-btn { background: rgba(198,125,6,0.1); border: 1px solid rgba(198,125,6,0.2); border-radius: 100px; padding: 4px 10px; font-size: 0.78rem; color: var(--clay); cursor: pointer; font-family: 'DM Sans', sans-serif; }
.dy-bericht-vinkjes { font-size: 0.7rem; color: var(--clay); margin-left: 3px; }
.dy-bericht-bubble { max-width: 75%; padding: 9px 13px; border-radius: 16px; font-size: 0.86rem; line-height: 1.5; }
.dy-chat-berichten { flex: 1; overflow-y: auto; padding: 10px 12px; background: var(--cream); }
.dy-chat-bericht { margin-bottom: 10px; display: flex; flex-direction: column; }
.dy-chat-bericht.eigen { align-items: flex-end; }
.dy-chat-bericht:not(.eigen) .dy-bericht-bubble { background: var(--white); color: var(--ink); border-radius: 4px 16px 16px 16px; border: 1px solid var(--border); }
.dy-chat-bericht.eigen .dy-bericht-bubble { background: var(--clay); color: var(--white); border-radius: 16px 4px 16px 16px; }

/* ── BTN EXTRAS ── */
.dy-btn-link { background: none; border: none; color: var(--clay); font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }
.dy-btn-media { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--warm); border: 1.5px solid var(--border); border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 500; color: var(--ink-muted); cursor: pointer; transition: all 0.15s; }
.dy-btn-media:hover { border-color: var(--clay); color: var(--clay); }

/* ── DSP WRAP/SECTIE CONTAINER ── */
.dy-dsp-wrap { padding: 0 12px 80px; }
.dy-dsp-sectie { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 8px; }
.dy-dsp-sectie-titel { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--clay); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

/* ── SPINNER ── */
.dy-spinner { width: 24px; height: 24px; border: 2px solid var(--border); border-top-color: var(--clay); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.dy-loader { display: flex; justify-content: center; padding: 2rem; }

/* ── LEEG STATES ── */
.dy-leeg { text-align: center; padding: 2.5rem 1.5rem; }
.dy-leeg p { font-size: 0.85rem; color: var(--ink-muted); }
.dy-leeg-tekst { font-size: 0.82rem; color: var(--ink-muted); padding: 12px 14px; }

/* ── TOAST STIJLEN ── */
.dy-toast {
  position: fixed; bottom: calc(var(--nav-h) + 12px);
  left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--white);
  padding: 10px 20px; border-radius: 100px;
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 500;
  box-shadow: 0 4px 20px rgba(30,26,15,0.25);
  z-index: 500; opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  white-space: nowrap; max-width: 90vw;
}
.dy-toast.visible, .dy-toast.show { opacity: 1; }
.dy-toast-dsp {
  position: fixed; bottom: calc(var(--nav-h) + 12px);
  left: 50%; transform: translateX(-50%);
  background: var(--clay); color: var(--white);
  padding: 10px 20px; border-radius: 100px;
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 600;
  box-shadow: 0 4px 20px rgba(198,125,6,0.3);
  z-index: 501; pointer-events: none; white-space: nowrap;
}
.dy-toast-info { border: 1px solid rgba(254,252,245,0.1); }

/* ── FEED NAV LINKS (challenges, leaderboard) ── */
.dy-feed-nav-links { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.dy-feed-nav-btn { background: none; border: none; color: var(--clay); font-family: 'DM Sans', sans-serif; font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 0; transition: opacity 0.2s; display: flex; align-items: center; gap: 3px; }
.dy-feed-nav-btn:hover { opacity: 0.7; }
.dy-feed-nav-icon { color: var(--clay); }
.dy-feed-nav-sep { color: var(--ink-muted); font-size: 0.78rem; }

/* ── FIELD ── */
.dy-field { margin-bottom: 14px; }

/* ── DSP TIP ── */
.dy-dsp-tip { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: rgba(198,125,6,0.06); border: 1px solid rgba(198,125,6,0.15); border-radius: 8px; margin-bottom: 14px; font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; }
.dy-dsp-tip-icon { color: var(--clay); flex-shrink: 0; font-size: 0.9rem; }

/* ── PROFIEL AANPASSEN ── */
.dy-profiel-hero { background: var(--ink); padding: 28px 16px 20px; text-align: center; }
.dy-profiel-naam { color: var(--white); font-family: 'DM Sans', sans-serif; font-size: 1.1rem; font-weight: 700; }
.dy-profiel-naam-wrap { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 4px; }
.dy-profiel-naam-edit-btn { background: none; border: none; color: rgba(254,252,245,0.4); cursor: pointer; padding: 4px; transition: color 0.2s; }
.dy-profiel-naam-edit-btn:hover { color: var(--clay); }
.dy-profiel-naam-edit-btn svg { width: 14px; height: 14px; fill: currentColor; }
.dy-profiel-email { font-size: 0.75rem; color: rgba(254,252,245,0.4); margin-top: 2px; }

/* ── PROFIEL ACTIES BTN ── */
.dy-profiel-acties { display: flex; gap: 8px; padding: 8px 12px 16px; }
.dy-profiel-acties .dy-btn { font-size: 0.82rem; padding: 11px 8px; text-transform: none; letter-spacing: 0; }
.dy-btn-uitloggen { color: #c0392b !important; border-color: rgba(192,57,43,0.25) !important; }
.dy-btn-uitloggen:hover { background: rgba(192,57,43,0.06) !important; }

/* ── AUTH ── */
.dy-auth-wrap { min-height: calc(100vh - 56px - var(--nav-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; background: var(--cream); }
.dy-auth-card { width: 100%; max-width: 380px; }
.dy-auth-logo { text-align: center; margin-bottom: 32px; }
.dy-auth-w { font-family: 'Cormorant Garamond', serif; font-size: 3.5rem; font-weight: 700; color: var(--clay); line-height: 1; }
.dy-auth-brand { font-family: 'DM Sans', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.dy-auth-sub { font-size: 0.75rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; }
.dy-auth-title { font-family: 'DM Sans', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.dy-auth-sub-small { font-size: 0.85rem; color: var(--ink-muted); margin-bottom: 24px; line-height: 1.5; }
.dy-auth-err { color: #c0392b; font-size: 0.8rem; margin-top: 6px; padding: 8px 12px; background: rgba(192,57,43,0.06); border-radius: 6px; border: 1px solid rgba(192,57,43,0.15); display: none; }
.dy-auth-note { font-size: 0.78rem; color: var(--ink-muted); text-align: center; margin-top: 16px; line-height: 1.5; }

/* ── ZOEKBALK ── */
.dy-zoekbalk-wrap { background: var(--ink); padding: 8px 12px; border-bottom: 1px solid rgba(198,125,6,0.15); margin-top: 56px; }
.dy-zoekbalk-inner { display: flex; align-items: center; gap: 8px; }
.dy-zoek-icon { width: 16px; height: 16px; fill: rgba(254,252,245,0.4); flex-shrink: 0; }
.dy-zoek-input { flex: 1; background: none; border: none; color: var(--white); font-family: 'DM Sans', sans-serif; font-size: 0.9rem; }
.dy-zoek-input::placeholder { color: rgba(254,252,245,0.35); }
.dy-zoek-input:focus { outline: none; }
.dy-zoek-sluit { background: none; border: none; color: rgba(254,252,245,0.5); cursor: pointer; font-size: 1rem; padding: 4px; }
.dy-zoek-resultaten { padding: 4px 0; }
.dy-zoek-rij { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background 0.15s; }
.dy-zoek-rij:hover { background: rgba(254,252,245,0.05); }
.dy-zoek-rij-info { flex: 1; }
.dy-zoek-rij-info strong { display: block; font-size: 0.85rem; color: var(--white); }
.dy-zoek-rij-info span { font-size: 0.72rem; color: rgba(254,252,245,0.4); }
.dy-zoek-sectie-titel { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(254,252,245,0.4); padding: 8px 14px 4px; }

/* ── GEBRUIKER PROFIEL ── */
.dy-gebruiker-wrap { padding: 0 0 80px; }
.dy-gebruiker-stats { padding: 12px; }
.dy-gebruiker-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--border); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.dy-gebruiker-stat { background: var(--white); padding: 14px 6px; text-align: center; }
.dy-gebruiker-stat + .dy-gebruiker-stat { border-left: 1px solid var(--border); }
.dy-gebruiker-stat-waarde { display: block; font-size: 1.3rem; font-weight: 800; color: var(--ink); line-height: 1; margin-bottom: 3px; }
.dy-gebruiker-stat-label { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
.dy-gebruiker-niveau { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--white); font-size: 0.82rem; color: var(--ink-soft); margin: 0 12px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 6px; }
.dy-gebruiker-tier-badge { font-size: 0.7rem; background: rgba(198,125,6,0.1); color: var(--clay); border: 1px solid rgba(198,125,6,0.2); border-radius: 100px; padding: 2px 8px; margin-left: auto; }
.dy-gebruiker-badges-sectie,.dy-gebruiker-verhalen-sectie { padding: 12px; }
.dy-gebruiker-sectie-titel { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clay); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

/* ── LOGIN PROMPT ── */
.dy-login-prompt-wrap { padding: 32px 16px; }
.dy-login-prompt-kaart { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 28px 20px; text-align: center; }
.dy-login-prompt-icon { font-size: 2rem; color: var(--clay); margin-bottom: 12px; }
.dy-login-prompt-titel { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.dy-login-prompt { font-size: 0.85rem; color: var(--ink-muted); line-height: 1.6; margin-bottom: 18px; }

/* ── ONBOARDING ── */
.dy-onboarding-wrap { min-height: 100vh; background: var(--ink); color: var(--white); }

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM UX UITBREIDINGEN — Fit Intelligence + Engagement
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fit Profiel Prompt ── */
.dy-fit-prompt {
  margin: 0 12px 8px;
  background: linear-gradient(135deg, rgba(198,125,6,0.06) 0%, rgba(198,125,6,0.02) 100%);
  border: 1px solid rgba(198,125,6,0.2);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  overflow: hidden;
}
.dy-fit-prompt:hover { border-color: var(--clay); background: rgba(198,125,6,0.08); }
.dy-fit-prompt-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.dy-fit-prompt-icon { font-size: 1.2rem; flex-shrink: 0; }
.dy-fit-prompt-text { flex: 1; min-width: 0; }
.dy-fit-prompt-text strong { display: block; font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.dy-fit-prompt-text span { font-size: 0.72rem; color: var(--ink-muted); }
.dy-fit-prompt svg { stroke: var(--ink-muted); flex-shrink: 0; }

/* ── Feed leeg state ── */
.dy-feed-leeg {
  grid-column: 1/-1;
  text-align: center;
  padding: 48px 24px;
}
.dy-feed-leeg-icon { font-size: 3rem; display: block; margin-bottom: 14px; opacity: 0.6; }
.dy-feed-leeg-titel {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}
.dy-feed-leeg-tekst {
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.65;
  max-width: 280px;
  margin: 0 auto 20px;
}

/* ── Fit Confidence blok ── */
.dy-fit-confidence-blok {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0;
}
.dy-fit-conf-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.dy-fit-conf-score {
  font-family: 'DM Sans', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}
.dy-fit-conf-info strong { display: block; font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.dy-fit-conf-info span { font-size: 0.72rem; color: var(--ink-muted); }
.dy-fit-conf-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.dy-fit-conf-badge {
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 100px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* ── Kaart: fit stats onderaan ── */
.dy-kaart-fit-quick {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(198,125,6,0.04);
  border-top: 1px solid var(--border);
  font-size: 0.7rem;
  color: var(--ink-muted);
  overflow: hidden;
}
.dy-kaart-fit-badge {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--clay);
  background: rgba(198,125,6,0.08);
  border: 1px solid rgba(198,125,6,0.15);
  border-radius: 100px;
  padding: 1px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}
.dy-kaart-lengte-tag {
  font-size: 0.68rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* ── Match score indicator ── */
.dy-match-score {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--clay);
  background: rgba(198,125,6,0.08);
  border: 1px solid rgba(198,125,6,0.15);
  border-radius: 100px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.dy-match-score::before { content: '≈'; margin-right: 2px; }

/* ── Leaderboard verbeterd ── */
.dy-leaderboard-jij-sectie {
  margin: 12px;
  background: rgba(198,125,6,0.04);
  border: 1px solid rgba(198,125,6,0.2);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dy-leaderboard-jij-pos {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--clay);
  line-height: 1;
  flex-shrink: 0;
  min-width: 40px;
  text-align: center;
}
.dy-leaderboard-jij-info strong { display: block; font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.dy-leaderboard-jij-info span { font-size: 0.72rem; color: var(--ink-muted); }
.dy-leaderboard-jij-pts { margin-left: auto; font-size: 0.82rem; font-weight: 700; color: var(--clay); white-space: nowrap; flex-shrink: 0; }

/* ── Challenges verbeterd ── */
.dy-challenges-header-blok {
  margin: 0 12px 10px;
  background: linear-gradient(135deg, rgba(198,125,6,0.06), rgba(198,125,6,0.02));
  border: 1px solid rgba(198,125,6,0.15);
  border-radius: 12px;
  padding: 14px 16px;
}
.dy-challenges-header-blok h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.dy-challenges-header-blok p {
  font-size: 0.78rem;
  color: var(--ink-muted);
  line-height: 1.5;
}
.dy-challenge-deelnemen {
  width: 100%;
  margin-top: 10px;
  padding: 9px;
  background: var(--clay);
  color: var(--white);
  border: none;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.dy-challenge-deelnemen:hover { background: var(--clay-l); }
.dy-challenge-deelnemen:disabled { opacity: 0.5; cursor: default; }

/* ── Reviews: fit summary blok ── */
.dy-rv-fit-summary {
  margin: 0 12px 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.dy-rv-fit-summary-header {
  padding: 10px 14px;
  background: rgba(198,125,6,0.04);
  border-bottom: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clay);
}
.dy-rv-fit-bars { padding: 10px 14px; }
.dy-rv-fit-bar-rij { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dy-rv-fit-bar-lbl { font-size: 0.72rem; color: var(--ink-muted); width: 90px; flex-shrink: 0; }
.dy-rv-fit-bar-track { flex: 1; height: 6px; background: var(--warm); border-radius: 3px; overflow: hidden; }
.dy-rv-fit-bar-fill { height: 100%; background: var(--clay); border-radius: 3px; transition: width 0.6s ease; }
.dy-rv-fit-bar-pct { font-size: 0.7rem; font-weight: 700; color: var(--clay); width: 32px; text-align: right; flex-shrink: 0; }

/* ── Look kaart verbeterd ── */
.dy-look-fit-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(30,26,15,0.75);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.dy-look-like-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(30,26,15,0.6);
  backdrop-filter: blur(6px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.dy-look-like-btn:hover { background: rgba(198,125,6,0.8); }
.dy-look-like-btn svg { width: 14px; height: 14px; fill: var(--white); }
.dy-look-like-btn.liked { background: var(--clay); }

/* ── DSP streak indicator ── */
.dy-streak-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(198,125,6,0.06);
  border: 1px solid rgba(198,125,6,0.15);
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.dy-streak-vuur { font-size: 1.1rem; }
.dy-streak-getal { font-weight: 800; color: var(--clay); font-family: 'DM Sans', sans-serif; }

/* ── Profiel: foto upload hint ── */
.dy-profiel-foto-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(30,26,15,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.dy-profiel-avatar-container:hover .dy-profiel-foto-ring { opacity: 1; }
.dy-profiel-foto-ring svg { width: 22px; height: 22px; stroke: var(--white); fill: none; }

/* ── DSP animatie ── */
@keyframes dspPop {
  0% { transform: translateX(-50%) scale(0.8) translateY(10px); opacity: 0; }
  50% { transform: translateX(-50%) scale(1.08) translateY(0); opacity: 1; }
  100% { transform: translateX(-50%) scale(1) translateY(0); opacity: 1; }
}
.dy-toast-dsp { animation: dspPop 0.4s cubic-bezier(0.23,1,0.32,1); }

/* ── Micro-interactions: kaart hover ── */
.dy-kaart { transition: transform 0.18s cubic-bezier(0.23,1,0.32,1), box-shadow 0.18s; }
.dy-kaart:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(30,26,15,0.1); }

/* ── Reviews: vergelijk mij chip ── */
.dy-rv-mijn-bouw-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--clay);
  background: rgba(198,125,6,0.08);
  border: 1px solid rgba(198,125,6,0.2);
  border-radius: 100px;
  padding: 3px 10px;
}
.dy-rv-mijn-bouw-chip::before { content: '≈'; }

/* ── Winkel: product teaser kaart ── */
.dy-winkel-product-teaser {
  margin: 0 12px 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s;
}
.dy-winkel-product-teaser:hover { border-color: var(--clay); }
.dy-winkel-product-teaser-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--border);
}
.dy-winkel-product-teaser-icon { font-size: 2rem; flex-shrink: 0; }
.dy-winkel-product-teaser-info strong { display: block; font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.dy-winkel-product-teaser-info span { font-size: 0.75rem; color: var(--ink-muted); }
.dy-winkel-product-teaser-bottom { padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: var(--ink-muted); }
.dy-winkel-product-teaser-cta { color: var(--clay); font-weight: 600; font-size: 0.78rem; display: flex; align-items: center; gap: 3px; }

/* ── Responsive ── */
@media (max-width: 390px) {
  .dy-fit-prompt-text strong { font-size: 0.8rem; }
  .dy-fit-prompt-text span { font-size: 0.68rem; }
  .dy-leaderboard-rij { padding: 10px 12px; gap: 8px; }
  .dy-leaderboard-rang { width: 28px; font-size: 1.1rem; }
}

/* ── Kaart animatie bij binnenkomen ── */
@keyframes kaartIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.dy-kaart.dy-fade-in { animation: kaartIn 0.3s cubic-bezier(0.23,1,0.32,1) both; }