:root {
      /* ── Brand kleuren ── */
      --accent: #b89dff;
      --accent-strong: #8b5cf6;
      --accent-soft: rgba(184, 157, 255, 0.12);
      --accent-glow: 0 0 40px rgba(184, 157, 255, 0.18);
      --gradient-accent: linear-gradient(135deg, #b89dff 0%, #8b5cf6 100%);
      --gradient-warm: linear-gradient(135deg, #ff9a8b 0%, #ff6a88 50%, #ff99ac 100%);
      --gradient-cool: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

      /* ── Surfaces ── */
      --bg: #0a0a12;
      --bg-elev: #12121c;
      --bg-glass: rgba(18, 18, 28, 0.72);
      --surface: rgba(255, 255, 255, 0.04);
      --surface-hover: rgba(255, 255, 255, 0.08);
      --surface-strong: rgba(255, 255, 255, 0.12);
      --border: rgba(255, 255, 255, 0.07);
      --border-strong: rgba(255, 255, 255, 0.14);
      --card: #16161f;
      --card-hover: #1c1c28;

      /* ── Text ── */
      --text: #f5f5f7;
      --text-soft: rgba(245, 245, 247, 0.68);
      --muted: rgba(245, 245, 247, 0.42);

      /* ── Shadows + glow ── */
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
      --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
      --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
      --shadow-glow: 0 8px 32px rgba(139, 92, 246, 0.25);

      /* ── Typography ── */
      --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;
      --font-poster: 'Bebas Neue', sans-serif;

      /* ── Spacing scale (4px basis) ── */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --space-10: 40px;
      --space-12: 48px;
      --space-16: 64px;

      /* ── Radii ── */
      --radius-sm: 8px;
      --radius: 14px;
      --radius-lg: 20px;
      --radius-xl: 28px;
      --radius-full: 9999px;

      /* ── Motion (easing) ── */
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
      --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
      --dur-fast: 0.15s;
      --dur: 0.25s;
      --dur-slow: 0.4s;

      /* ── Status kleuren ── */
      --going: #00dc78;
      --going-glow: rgba(0, 220, 120, 0.2);
      --maybe: #ffb547;
      --maybe-glow: rgba(255, 181, 71, 0.2);
      --not: #ff5e6c;
      --not-glow: rgba(255, 94, 108, 0.2);
    }
    .light {
      --bg: #f7f7fb; --bg-elev: #ffffff;
      --bg-glass: rgba(255, 255, 255, 0.78);
      --surface: rgba(0, 0, 0, 0.035); --surface-hover: rgba(0, 0, 0, 0.07);
      --surface-strong: rgba(0, 0, 0, 0.1);
      --border: rgba(0, 0, 0, 0.07);
      --border-strong: rgba(0, 0, 0, 0.14);
      --text: #0a0a12; --text-soft: rgba(10, 10, 18, 0.72); --muted: rgba(10, 10, 18, 0.5);
      --card: #ffffff; --card-hover: #fafafd;
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
      --shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
      --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1);
      --accent-soft: rgba(139, 92, 246, 0.1);
    }
    * { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
    html, body {
      background:var(--bg); color:var(--text);
      font-family:var(--font-body);
      font-feature-settings: 'cv11', 'ss01', 'ss03';
      letter-spacing:-0.011em;
      min-height:100vh;
      transition:background var(--dur), color var(--dur);
    }
    /* Subtle gradient background blob */
    body::before {
      content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
      background:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(184,157,255,0.10), transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 40%, rgba(139,92,246,0.06), transparent 50%);
    }
    .light body::before {
      background:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(184,157,255,0.18), transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 40%, rgba(139,92,246,0.10), transparent 50%);
    }
    button { font-family:inherit; cursor:pointer; border:none; }
    input { font-family:inherit; }

    .app { display:flex; min-height:100vh; }
    .sidebar {
      width:230px; flex-shrink:0; padding:24px 14px;
      border-right:1px solid var(--border);
      background:var(--bg-glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
      display:flex; flex-direction:column; gap:4px;
      position:sticky; top:0; height:100vh;
      z-index:5;
    }
    .brand {
      font-family:var(--font-display); font-size:24px; font-weight:700;
      letter-spacing:-0.02em;
      background:var(--gradient-accent); -webkit-background-clip:text; background-clip:text;
      color:transparent; margin-bottom:24px; padding:4px 10px;
    }
    .nav-item {
      display:flex; align-items:center; gap:12px;
      padding:10px 12px; border-radius:var(--radius-sm);
      background:transparent; color:var(--text-soft);
      font-size:13.5px; font-weight:500; text-align:left;
      transition:all var(--dur) var(--ease-out);
      width:100%; position:relative;
    }
    .nav-item:hover { background:var(--surface); color:var(--text); transform:translateX(2px); }
    .nav-item.active {
      background:var(--accent-soft); color:var(--text); font-weight:600;
      box-shadow:inset 2px 0 0 var(--accent);
    }
    .nav-item.active::before {
      content:''; position:absolute; left:-14px; top:50%; transform:translateY(-50%);
      width:3px; height:24px; background:var(--gradient-accent); border-radius:var(--radius-full);
    }
    .nav-item svg { width:18px; height:18px; flex-shrink:0; transition:transform var(--dur) var(--ease-out); }
    .nav-item:hover svg { transform:scale(1.08); }

    .sidebar-footer { margin-top:auto; display:flex; flex-direction:column; gap:6px; }
    .crew-badge {
      display:flex; align-items:center; gap:10px; padding:10px 12px;
      border-radius:var(--radius-sm); background:var(--surface);
      width:100%; color:var(--text); text-align:left;
      transition:background var(--dur) var(--ease-out);
    }
    .crew-badge:hover { background:var(--surface-hover); }
    .crew-badge .lbl { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }
    .crew-badge .nm  { font-size:13px; font-weight:600; letter-spacing:-0.01em; }
    .theme-toggle {
      display:flex; align-items:center; gap:10px; padding:9px 12px;
      border-radius:var(--radius-sm); background:var(--surface);
      color:var(--text-soft); font-size:12.5px; width:100%;
      transition:background var(--dur) var(--ease-out);
    }
    .theme-toggle:hover { background:var(--surface-hover); color:var(--text); }

    .main { flex:1; min-width:0; position:relative; z-index:1; }

    .topbar {
      display:flex; align-items:center; gap:14px;
      padding:16px 28px;
      /* Respect safe-area op iPhones met dynamic island / notch */
      padding-top:max(16px, env(safe-area-inset-top, 0px));
      border-bottom:1px solid var(--border);
      background:var(--bg-glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
      position:sticky; top:0; z-index:10;
    }
    /* Wanneer de topbar leeg is (search verborgen op huidige pagina): collapse */
    .topbar.is-hidden { display:none; }

    /* Mobile auth-knop in topbar — verborgen op desktop (sidebar heeft auth-bar daar) */
    .topbar-auth-btn {
      display:none;
      align-items:center; gap:6px; flex-shrink:0;
      padding:8px 14px;
      background:linear-gradient(135deg,#4285f4,#34a853);
      color:#fff; font-size:13px; font-weight:600;
      border:none; border-radius:var(--radius-full);
      cursor:pointer;
      transition:transform var(--dur), box-shadow var(--dur);
    }
    .topbar-auth-btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(66,133,244,0.35); }
    .topbar-auth-btn svg { width:16px; height:16px; }
    .topbar-auth-user {
      padding:3px; gap:0;
      background:transparent;
      width:38px; height:38px;
      overflow:hidden;
    }
    .topbar-auth-user img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
    .topbar-auth-user:hover { box-shadow:0 4px 12px rgba(0,0,0,0.25); }
    @media (max-width: 820px) {
      .topbar-auth-btn { display:inline-flex; }
    }
    /* Wanneer er geen topbar is, krijgt de pagina zelf de safe-area top padding
       zodat content niet onder de dynamic island / notch verdwijnt. */
    body.no-topbar .page {
      padding-top:max(28px, calc(env(safe-area-inset-top, 0px) + 12px));
    }
    /* Uitzondering: planner-pagina heeft een edge-to-edge hero die zelf de safe-area afhandelt */
    body.no-topbar #page-planner {
      padding-top:0 !important;
    }
    .search-wrap { flex:1; max-width:560px; position:relative; }
    .search-wrap svg { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted); transition:color var(--dur); }
    .search-wrap:focus-within svg { color:var(--accent); }
    .search {
      width:100%; padding:11px 18px 11px 46px;
      background:var(--surface); border:1px solid transparent;
      border-radius:var(--radius-full); color:var(--text); font-size:14px;
      transition:all var(--dur) var(--ease-out);
    }
    .search:focus {
      outline:none; border-color:var(--accent);
      background:var(--bg-elev);
      box-shadow:0 0 0 4px var(--accent-soft);
    }
    .search::placeholder { color:var(--muted); }

    .page { padding:32px 28px; max-width:1400px; margin:0 auto; position:relative; z-index:1; }
    .page-title {
      font-family:var(--font-display); font-size:36px; font-weight:700;
      letter-spacing:-0.02em; margin-bottom:8px; line-height:1.1;
    }
    .page-sub { font-size:14px; color:var(--text-soft); margin-bottom:28px; letter-spacing:-0.005em; }

    .filter-row {
      display:flex; flex-wrap:wrap; gap:8px;
      margin-bottom:28px; padding-bottom:22px;
      border-bottom:1px solid var(--border);
      transition:max-height var(--dur) var(--ease-out), opacity var(--dur), margin-bottom var(--dur), padding-bottom var(--dur);
    }
    /* Verborgen tot search-bar wordt geactiveerd (alleen op home) */
    .filter-row.is-collapsed {
      max-height:0;
      opacity:0;
      overflow:hidden;
      margin-bottom:0;
      padding-bottom:0;
      border-bottom-color:transparent;
      pointer-events:none;
    }
    .chip {
      padding:7px 14px; border-radius:var(--radius-full);
      background:var(--surface); color:var(--text-soft);
      font-size:13px; font-weight:500;
      border:1px solid transparent;
      transition:all var(--dur) var(--ease-out);
    }
    .chip:hover { background:var(--surface-hover); color:var(--text); transform:translateY(-1px); }
    .chip.active {
      background:var(--gradient-accent); color:#fff; font-weight:600;
      box-shadow:0 4px 16px rgba(139, 92, 246, 0.35);
    }
    .light .chip.active { color:#fff; }

    .section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; margin-top:8px; }
    .section-title { font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:-0.02em; }

    .grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); margin-bottom:40px; }

    .card {
      background:var(--card); border-radius:var(--radius-lg);
      overflow:hidden; cursor:pointer;
      transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur);
      border:1px solid var(--border);
      display:flex; flex-direction:column;
      text-align:left; color:inherit;
      position:relative;
    }
    .card::after {
      content:''; position:absolute; inset:0; border-radius:var(--radius-lg);
      pointer-events:none; opacity:0;
      box-shadow:0 0 0 1px var(--accent), 0 20px 40px -10px rgba(139,92,246,0.25);
      transition:opacity var(--dur) var(--ease-out);
    }
    .card:hover { transform:translateY(-4px); }
    .card:hover::after { opacity:1; }
    .card-img-wrap {
      position:relative; width:100%; aspect-ratio:16/10;
      background:linear-gradient(135deg, var(--surface), var(--bg-elev));
      overflow:hidden;
    }
    .card-img {
      width:100%; height:100%; object-fit:cover; display:block;
      transition:transform 0.6s var(--ease-out);
    }
    .card:hover .card-img { transform:scale(1.06); }
    .card-img-wrap::after {
      content:''; position:absolute; inset:0;
      background:linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 40%);
      pointer-events:none;
    }
    .card-img-placeholder {
      width:100%; height:100%;
      display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      padding:20px; text-align:center;
      background:linear-gradient(135deg, var(--placeholder-color, var(--accent-strong)) 0%, var(--bg-elev) 90%);
      position:relative; overflow:hidden;
    }
    .card-img-placeholder::before {
      content:''; position:absolute; inset:0;
      background:
        radial-gradient(ellipse at top right, rgba(255,255,255,0.12), transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(0,0,0,0.25), transparent 50%);
      pointer-events:none;
    }
    .card-img-placeholder .ph-letter {
      font-family:var(--font-poster, var(--font-display));
      font-size:64px; font-weight:700; line-height:0.9;
      color:rgba(255,255,255,0.95);
      text-shadow:0 2px 12px rgba(0,0,0,0.4);
      letter-spacing:-0.04em;
      position:relative; z-index:1;
    }
    .card-img-placeholder .ph-name {
      font-family:var(--font-display);
      font-size:11px; font-weight:600;
      color:rgba(255,255,255,0.7);
      text-transform:uppercase; letter-spacing:1.5px;
      margin-top:8px; max-width:90%;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
      position:relative; z-index:1;
    }
    .card-heart {
      position:absolute; bottom:12px; right:12px;
      width:34px; height:34px; border-radius:var(--radius-full);
      background:rgba(0,0,0,0.5); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
      display:flex; align-items:center; justify-content:center;
      color:white; transition:all var(--dur) var(--ease-out);
      z-index:2;
    }
    .card-heart:hover { background:rgba(0,0,0,0.7); transform:scale(1.08); }
    .card-heart.liked { color:#ff4d6d; background:rgba(255,77,109,0.18); }

    /* ── ONBOARDING LATER BUTTON ── */
    .ob-later-btn {
      display:flex; align-items:center; justify-content:center; gap:8px;
      width:100%; margin-top:18px;
      padding:12px 16px;
      background:rgba(255,255,255,0.04);
      border:1px solid rgba(255,255,255,0.08);
      border-radius:var(--radius);
      color:var(--text-soft);
      font-family:var(--font-body); font-size:13px; font-weight:500;
      cursor:pointer; transition:all var(--dur) var(--ease-out);
    }
    .ob-later-btn:hover {
      background:rgba(255,255,255,0.08);
      border-color:rgba(255,255,255,0.18);
      color:var(--text);
    }
    .ob-later-btn:hover svg { transform:translateX(3px); }
    .ob-later-btn svg { transition:transform var(--dur) var(--ease-out); }

    /* ── MEMBERS TAB ── */
    .members-grid {
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
      gap:14px;
      padding:4px 0;
    }
    .member-card {
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius-lg);
      padding:16px;
      transition:transform var(--dur) var(--ease-out), border-color var(--dur);
      display:flex; flex-direction:column; gap:10px;
    }
    .member-card:hover {
      border-color:var(--border-strong);
      transform:translateY(-2px);
    }
    .member-card.is-you {
      border-color:var(--accent);
      background:linear-gradient(180deg, rgba(139,92,246,0.06), transparent 60%), var(--card);
    }
    .member-card-head {
      display:flex; align-items:center; gap:12px;
    }
    .member-card-avatar {
      width:48px; height:48px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-weight:700; font-size:16px; color:#1a1100;
      overflow:hidden;
      flex-shrink:0;
    }
    .member-card-avatar img {
      width:100%; height:100%; object-fit:cover;
    }
    .member-card-id { flex:1; min-width:0; }
    .member-card-name {
      font-family:var(--font-display);
      font-size:16px; font-weight:700;
      display:flex; align-items:center; gap:6px;
      flex-wrap:wrap;
      line-height:1.2;
    }
    .member-card-sub {
      font-size:12px; color:var(--text-soft);
      margin-top:2px;
    }
    .member-tag {
      font-size:9px; font-weight:700;
      padding:2px 7px; border-radius:50px;
      letter-spacing:0.6px; text-transform:uppercase;
    }
    .member-tag.you   { background:rgba(139,92,246,0.18); color:var(--accent-strong); }
    .member-tag.admin { background:rgba(255,208,0,0.18); color:#ffd000; }
    .member-tag.role  {
      background:rgba(255,255,255,0.06); color:var(--text-soft);
      border:1px solid var(--border);
      text-transform:none; letter-spacing:0.1px;
      font-weight:600;
    }

    .member-card-meta {
      display:inline-flex; align-items:center; gap:5px;
      margin-top:3px;
      font-size:11px; color:var(--muted);
      line-height:1.3;
    }
    .member-card-meta svg { width:11px; height:11px; flex-shrink:0; }

    .member-card-vibes {
      display:flex; flex-wrap:wrap; gap:5px;
    }
    .member-vibe-chip {
      display:inline-flex; align-items:center; gap:4px;
      font-size:11px; font-weight:600;
      padding:3px 9px; border-radius:50px;
      background:rgba(184,157,255,0.10);
      color:var(--accent);
      border:1px solid rgba(184,157,255,0.22);
      line-height:1.3;
    }
    .member-vibe-chip .emoji { font-size:12px; line-height:1; }
    .member-card-bio {
      font-size:13px;
      color:var(--text-soft);
      line-height:1.5;
      font-style:italic;
      margin:0;
    }
    .member-card-genres {
      display:flex; flex-wrap:wrap; gap:5px;
    }
    .member-genre-chip {
      font-size:10px; font-weight:600;
      padding:3px 9px; border-radius:50px;
      background:rgba(139,92,246,0.1);
      color:var(--accent-strong);
      border:1px solid rgba(139,92,246,0.18);
      letter-spacing:0.3px;
    }
    .member-card-stats {
      display:flex; gap:18px;
      padding-top:8px;
      border-top:1px solid var(--border);
      margin-top:auto;
    }
    .member-stat-num {
      font-family:var(--font-display);
      font-size:18px; font-weight:700;
      color:var(--text);
      line-height:1;
    }
    .member-stat-label {
      font-size:10px; color:var(--muted);
      text-transform:uppercase; letter-spacing:0.5px;
      margin-top:3px;
    }
    @media (max-width:700px) {
      .members-grid { grid-template-columns:1fr; }
    }

    /* ── ACTIVITY TAB ── */
    .activity-feed-wrap { padding:4px 0; }
    .activity-section { margin-bottom:22px; }
    .activity-section-title {
      font-size:10px; font-weight:700;
      color:var(--muted); text-transform:uppercase;
      letter-spacing:1.2px;
      margin-bottom:10px;
      padding-left:4px;
    }
    .activity-list {
      display:flex; flex-direction:column;
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      overflow:hidden;
    }
    /* Hergebruik bestaande dash-act-* CSS — die staat al elders in het document */

    /* ── HOME ARCHIVE LINK ── */
    .home-archive-link-wrap {
      display:flex; justify-content:center;
      padding:36px 16px 24px;
      margin-top:16px;
      border-top:1px solid var(--border);
    }
    .home-archive-link {
      display:inline-flex; align-items:center; gap:8px;
      background:transparent; border:none;
      color:var(--text-soft);
      font-family:var(--font-body); font-size:13px; font-weight:500;
      cursor:pointer;
      padding:8px 14px;
      border-radius:50px;
      transition:all var(--dur) var(--ease-out);
    }
    .home-archive-link:hover {
      color:var(--text);
      background:rgba(255,255,255,0.04);
    }
    .home-archive-link:hover svg { transform:translateX(3px); }
    .home-archive-link svg { transition:transform var(--dur) var(--ease-out); opacity:0.7; }

    /* ── COOKIE BANNER ── */
    #cookie-banner {
      position:fixed; bottom:16px; left:16px; right:16px;
      max-width:680px; margin:0 auto;
      background:var(--card); border:1px solid var(--border);
      border-radius:var(--radius-lg);
      padding:18px 20px;
      box-shadow:0 10px 40px rgba(0,0,0,0.5);
      z-index:9999;
      animation:cookieSlideUp 0.35s var(--ease-out);
    }
    @keyframes cookieSlideUp {
      from { opacity:0; transform:translateY(20px); }
      to   { opacity:1; transform:translateY(0); }
    }
    .cookie-banner-inner {
      display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    }
    .cookie-banner-text { flex:1; min-width:240px; }
    .cookie-banner-text strong {
      display:block; font-size:14px; margin-bottom:4px;
    }
    .cookie-banner-text p {
      margin:0; font-size:12px; color:var(--text-soft); line-height:1.5;
    }
    .cookie-banner-text a {
      color:var(--accent); text-decoration:underline;
    }
    .cookie-banner-actions {
      display:flex; gap:8px; flex-shrink:0;
    }

    /* ── PRIVACY CONTENT ── */
    .privacy-content h3 {
      font-size:14px; font-weight:700; margin-top:18px; margin-bottom:8px;
      color:var(--text);
      letter-spacing:0;
      text-transform:none;
    }
    .privacy-content h3:first-child { margin-top:0; }
    .privacy-content p, .privacy-content ul {
      font-size:13px; color:var(--text-soft); line-height:1.6;
      margin-bottom:10px;
    }
    .privacy-content ul {
      padding-left:20px;
    }
    .privacy-content li {
      margin-bottom:5px;
    }
    .privacy-content a {
      color:var(--accent); text-decoration:underline;
    }

    /* ── FOOTER LEGAL LINKS ── */
    .app-footer-legal {
      display:flex; justify-content:center; gap:14px;
      padding:24px 16px 16px;
      font-size:11px; color:var(--muted);
      flex-wrap:wrap;
    }
    .app-footer-legal a {
      color:var(--text-soft);
      text-decoration:none;
      transition:color var(--dur);
    }
    .app-footer-legal a:hover { color:var(--text); }
    .app-footer-legal span { opacity:0.5; }

    .ob-tabs {
      display:flex; gap:6px; margin-bottom:14px;
      background:rgba(255,255,255,0.04);
      border:1px solid rgba(255,255,255,0.08);
      border-radius:var(--radius);
      padding:4px;
    }
    .ob-tab {
      flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
      padding:10px 12px;
      background:transparent; border:none;
      color:var(--text-soft);
      font-family:var(--font-body); font-size:13px; font-weight:600;
      cursor:pointer; transition:all var(--dur) var(--ease-out);
      border-radius:calc(var(--radius) - 4px);
    }
    .ob-tab:hover:not(.active) { color:var(--text); background:rgba(255,255,255,0.04); }
    .ob-tab.active {
      background:var(--gradient-accent);
      color:white;
      box-shadow:0 2px 12px rgba(139,92,246,0.25);
    }
    .ob-pane { display:none; }
    .ob-pane.active { display:block; }
    .ob-pane-hint {
      font-size:12px; color:var(--muted);
      margin-bottom:10px;
    }
    .ob-action-btn {
      width:100%; margin-top:4px;
    }

    /* ── COACH TOUR (tooltip-tour na onboarding) ── */
    #coach-overlay {
      position:fixed; inset:0; z-index:1000;
      pointer-events:none;
      display:none;
    }
    #coach-overlay.active { display:block; pointer-events:auto; }
    #coach-overlay::before {
      content:''; position:absolute; inset:0;
      background:rgba(0,0,0,0.6);
      backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
    }
    .coach-spotlight {
      position:absolute; border-radius:12px;
      box-shadow:0 0 0 9999px rgba(0,0,0,0.6), 0 0 0 4px var(--accent), 0 8px 32px rgba(0,0,0,0.5);
      pointer-events:none;
      transition:all 0.35s var(--ease-out);
      z-index:1;
    }
    .coach-tooltip {
      position:absolute; z-index:2;
      max-width:300px;
      background:var(--bg-elev);
      border:1px solid var(--border-strong);
      border-radius:var(--radius-lg);
      padding:18px 18px 16px;
      box-shadow:0 12px 48px rgba(0,0,0,0.6);
      animation:coachFadeIn 0.35s var(--ease-out);
    }
    @keyframes coachFadeIn {
      from { opacity:0; transform:translateY(8px); }
      to { opacity:1; transform:translateY(0); }
    }
    .coach-tooltip .ct-icon { font-size:24px; margin-bottom:6px; }
    .coach-tooltip .ct-title {
      font-family:var(--font-display); font-size:17px; font-weight:700;
      margin-bottom:4px; color:var(--text);
    }
    .coach-tooltip .ct-body {
      font-size:13px; color:var(--text-soft); line-height:1.5;
      margin-bottom:14px;
    }
    .coach-tooltip .ct-footer {
      display:flex; align-items:center; justify-content:space-between;
      gap:10px;
    }
    .coach-tooltip .ct-progress {
      font-size:11px; color:var(--muted);
      font-weight:600; letter-spacing:0.5px;
    }
    .coach-tooltip .ct-actions { display:flex; gap:6px; }
    .coach-tooltip .ct-actions button {
      padding:7px 12px;
      font-size:12px; font-weight:600;
      border-radius:var(--radius);
      cursor:pointer;
      font-family:var(--font-body);
      border:1px solid transparent;
      transition:all var(--dur) var(--ease-out);
    }
    .coach-tooltip .ct-skip {
      background:transparent; color:var(--muted);
      border-color:transparent;
    }
    .coach-tooltip .ct-skip:hover { color:var(--text); }
    .coach-tooltip .ct-next {
      background:var(--gradient-accent); color:white;
    }
    .coach-tooltip .ct-next:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(139,92,246,0.3); }
    @media (max-width:700px) {
      .coach-tooltip { max-width:calc(100vw - 32px); }
    }

    /* ── CARPOOL ── */
    .carpool-section {
      background:var(--card); border:1px solid var(--border);
      border-radius:var(--radius-lg); padding:16px;
      margin-bottom:18px;
    }
    .carpool-head {
      display:flex; align-items:flex-start; justify-content:space-between;
      gap:10px; margin-bottom:14px; flex-wrap:wrap;
    }
    .carpool-title {
      font-family:var(--font-display); font-size:17px; font-weight:700;
      letter-spacing:-0.01em;
    }
    .carpool-sub { font-size:11px; color:var(--text-soft); margin-top:2px; }
    .carpool-actions { display:flex; gap:6px; flex-wrap:wrap; }
    .carpool-block-title {
      font-size:11px; font-weight:700;
      color:var(--text-soft); text-transform:uppercase;
      letter-spacing:0.06em; margin-bottom:8px;
    }
    .carpool-list { display:flex; flex-direction:column; gap:8px; }
    .carpool-card {
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius); padding:12px 14px;
      transition:all var(--dur);
    }
    .carpool-card.i-am-in {
      background:linear-gradient(90deg, rgba(0,220,120,0.08), rgba(0,196,180,0.04));
      border-color:rgba(0,220,120,0.35);
    }
    .carpool-card.full { opacity:0.75; }
    .carpool-card.request {
      background:rgba(255,208,0,0.05);
      border-color:rgba(255,208,0,0.25);
    }
    .carpool-card-head {
      display:flex; justify-content:space-between; gap:10px;
      align-items:flex-start;
    }
    .carpool-driver {
      display:flex; gap:10px; align-items:center; flex:1; min-width:0;
    }
    .carpool-driver-avatar {
      width:36px; height:36px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden; flex-shrink:0;
    }
    .carpool-driver-avatar img { width:100%; height:100%; object-fit:cover; }
    .carpool-driver-avatar .initials { font-size:13px; font-weight:700; color:#000; }
    .carpool-driver-info { flex:1; min-width:0; }
    .carpool-driver-name {
      font-weight:700; font-size:14px; line-height:1.2;
      letter-spacing:-0.005em;
    }
    .carpool-tag {
      display:inline-block; font-size:10px; font-weight:700;
      padding:2px 7px; border-radius:50px;
      background:var(--accent-soft); color:var(--accent);
      margin-left:4px; letter-spacing:0.04em;
      text-transform:uppercase;
    }
    .carpool-tag.pax {
      background:rgba(255,208,0,0.15); color:var(--maybe);
    }
    .carpool-from {
      font-size:12px; color:var(--text-soft);
      margin-top:3px; letter-spacing:-0.005em;
    }
    .carpool-cancel {
      background:none; border:none; color:var(--muted);
      cursor:pointer; padding:4px 8px; font-size:14px;
      border-radius:var(--radius-sm); flex-shrink:0;
    }
    .carpool-cancel:hover { color:var(--not); background:rgba(255,94,108,0.1); }
    .carpool-note {
      font-size:12.5px; color:var(--text);
      margin-top:8px; padding:8px 10px;
      background:var(--card); border-radius:var(--radius-sm);
      border-left:3px solid var(--accent-soft);
      letter-spacing:-0.005em;
    }
    .carpool-seats-row {
      display:flex; align-items:center; justify-content:space-between;
      margin-top:10px; gap:10px; flex-wrap:wrap;
    }
    .carpool-seats-info {
      display:flex; align-items:center; gap:8px;
      font-size:12px;
    }
    .carpool-seats-count {
      font-family:monospace; font-weight:700;
      color:var(--text);
    }
    .carpool-seats-info .muted { color:var(--text-soft); }
    .carpool-price {
      font-size:11px; font-weight:700;
      background:var(--surface); border:1px solid var(--border);
      padding:2px 8px; border-radius:50px;
      color:var(--text);
    }
    .carpool-pax-avatars {
      display:flex; align-items:center;
    }
    .carpool-pax-avatar {
      width:32px; height:32px;
      min-width:32px; min-height:32px;
      border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden; flex-shrink:0;
      border:2px solid var(--surface);
    }
    .carpool-pax-avatar img { width:100%; height:100%; object-fit:cover; }
    .carpool-pax-avatar .initials { font-size:11px; font-weight:700; color:#000; }
    .carpool-pax-avatar.empty {
      background:var(--surface);
      border:2px dashed var(--border);
      color:var(--muted);
      font-size:16px; font-weight:300;
      line-height:1;
    }
    /* In de stack (avatar-stack mode, oude UI) overlappen ze */
    .carpool-pax-avatars .carpool-pax-avatar {
      width:24px; height:24px; min-width:24px; min-height:24px;
      margin-right:-4px;
    }
    .carpool-pax-avatars .carpool-pax-avatar:last-child { margin-right:0; }
    .carpool-empty {
      padding:18px 12px; text-align:center;
      background:var(--surface); border:1px dashed var(--border);
      border-radius:var(--radius);
    }

    /* ── CREW DASHBOARD ── */
    .dash-hero {
      display:flex; align-items:center; gap:16px;
      padding:0 0 18px;
      border-bottom:1px solid var(--border);
      margin-bottom:20px;
    }
    .dash-hero-avatar-wrap { flex-shrink:0; position:relative; }
    .dash-hero-avatar {
      position:relative;
      width:64px; height:64px;
      border-radius:50%;
      overflow:hidden;
      display:flex; align-items:center; justify-content:center;
      border:2px solid var(--border);
    }
    .dash-hero-avatar[role="button"] {
      cursor:pointer;
      transition:transform var(--dur) var(--ease-out), border-color var(--dur);
    }
    .dash-hero-avatar[role="button"]:hover {
      transform:scale(1.04);
      border-color:var(--accent);
    }
    .dash-hero-avatar img {
      width:100%; height:100%; object-fit:cover;
    }
    .dash-hero-avatar-fallback {
      width:100%; height:100%;
      display:flex; align-items:center; justify-content:center;
      font-family:var(--font-display);
      font-size:22px; font-weight:700;
      color:#fff;
      letter-spacing:0.5px;
    }
    .dash-hero-avatar-edit {
      position:absolute; bottom:-2px; right:-2px;
      width:24px; height:24px;
      background:var(--accent);
      border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-size:11px;
      border:2px solid var(--bg);
      opacity:0; transition:opacity var(--dur);
    }
    .dash-hero-avatar[role="button"]:hover .dash-hero-avatar-edit {
      opacity:1;
    }
    .dash-hero-text { flex:1; min-width:0; }
    .dash-hero-name {
      font-family:var(--font-display);
      font-size:26px; font-weight:700;
      letter-spacing:-0.01em;
      line-height:1.1;
    }
    .dash-hero-meta {
      font-size:13px; color:var(--text-soft); margin-top:4px;
    }
    .dash-hero-remove-photo {
      color:var(--text-soft);
      text-decoration:underline;
      transition:color var(--dur);
    }
    .dash-hero-remove-photo:hover {
      color:#ff8080;
    }

    .dash-section { margin-bottom:24px; }
    .dash-section-head {
      display:flex; align-items:center; justify-content:space-between;
      gap:10px; margin-bottom:12px;
    }
    .dash-section-head h3 {
      font-size:14px; font-weight:700;
      letter-spacing:-0.005em;
      color:var(--text);
    }
    .dash-section-count {
      font-size:11px; color:var(--text-soft);
      background:var(--surface); padding:2px 8px; border-radius:50px;
    }

    /* Volgende festival hero card */
    .dash-next {
      position:relative;
      border-radius:var(--radius-lg);
      overflow:hidden; cursor:pointer;
      margin-bottom:24px;
      aspect-ratio:16/9;
      max-height:280px;
      transition:transform var(--dur) var(--ease-out);
      border:1px solid var(--border);
    }
    .dash-next:hover { transform:translateY(-2px); }

    /* Compactere upcoming kaarten (#2, #3) onder de hero */
    .dash-upcoming-list {
      display:flex; flex-direction:column;
      gap:10px;
      margin-top:-12px; /* iets dichter bij de hero */
      margin-bottom:24px;
    }
    .dash-upcoming {
      display:flex; align-items:stretch; gap:12px;
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:10px;
      cursor:pointer;
      transition:all var(--dur) var(--ease-out);
    }
    .dash-upcoming:hover {
      transform:translateY(-1px);
      border-color:var(--border-strong);
      background:var(--surface-hover);
    }
    .dash-upcoming-thumb {
      width:68px; height:68px;
      border-radius:var(--radius-sm, 8px);
      flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden;
    }
    .dash-upcoming-thumb-letter {
      font-family:var(--font-display);
      font-size:28px; font-weight:700;
      color:rgba(255,255,255,0.9);
    }
    .dash-upcoming-info {
      flex:1; min-width:0;
      display:flex; flex-direction:column;
      justify-content:space-between;
      gap:4px;
    }
    .dash-upcoming-top {
      display:flex; align-items:center; gap:8px;
      flex-wrap:wrap;
    }
    .dash-upcoming-name {
      font-family:var(--font-display);
      font-size:15px; font-weight:700;
      color:var(--text);
      display:flex; align-items:center; gap:6px;
      flex:1; min-width:0;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .dash-upcoming-rsvp {
      width:18px; height:18px;
      border-radius:50%;
      display:inline-flex; align-items:center; justify-content:center;
      font-size:11px; font-weight:700;
      flex-shrink:0;
    }
    .dash-upcoming-rsvp.going { background:var(--going); color:#000; }
    .dash-upcoming-rsvp.maybe { background:var(--maybe); color:#000; }
    .dash-upcoming-meta {
      font-size:11px;
      color:var(--text-soft);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .dash-upcoming-bottom {
      display:flex; align-items:center; justify-content:space-between;
      gap:8px;
    }
    .dash-upcoming-counts {
      font-size:11px;
      color:var(--text-soft);
    }
    @media (max-width:700px) {
      .dash-upcoming-thumb { width:56px; height:56px; }
      .dash-upcoming-name { font-size:14px; }
    }
    .dash-next-bg {
      position:absolute; inset:0;
      background-size:cover; background-position:center;
      transition:transform var(--dur-slow) var(--ease-out);
    }
    .dash-next:hover .dash-next-bg { transform:scale(1.04); }
    .dash-next-bg-fallback {
      background:linear-gradient(135deg, var(--accent-soft), var(--surface));
    }
    .dash-next-overlay {
      position:absolute; inset:0;
      background:linear-gradient(to top, rgba(10,10,16,0.95) 0%, rgba(10,10,16,0.6) 50%, rgba(10,10,16,0.2) 100%);
    }
    .dash-next-content {
      position:absolute; inset:0;
      padding:18px;
      display:flex; flex-direction:column; justify-content:flex-end;
      color:#fff;
    }
    .dash-next-top {
      position:absolute; top:14px; left:14px; right:14px;
      display:flex; justify-content:space-between; gap:10px;
      align-items:center;
    }
    .dash-next-label {
      font-size:10px; font-weight:700;
      color:rgba(255,255,255,0.85);
      background:rgba(0,0,0,0.4); backdrop-filter:blur(8px);
      padding:4px 9px; border-radius:50px;
      letter-spacing:0.04em; text-transform:uppercase;
    }
    .soon-pill, .live-pill {
      font-size:10px; font-weight:700;
      padding:4px 9px; border-radius:50px;
      letter-spacing:0.04em; text-transform:uppercase;
    }
    .soon-pill {
      background:var(--accent); color:#000;
    }
    .live-pill {
      background:#ff4d6d; color:#fff;
      animation:pulse-live 1.6s ease-in-out infinite;
    }
    .dash-next-name {
      font-family:var(--font-display);
      font-size:24px; font-weight:700;
      line-height:1.1; letter-spacing:-0.01em;
      margin-bottom:4px;
      text-shadow:0 2px 8px rgba(0,0,0,0.4);
    }
    .dash-next-meta {
      font-size:12.5px; color:rgba(255,255,255,0.78);
      margin-bottom:10px;
    }
    .dash-next-stats {
      display:flex; align-items:center; gap:12px; flex-wrap:wrap;
      margin-bottom:10px;
    }
    .dash-next-avatars {
      display:flex; align-items:center;
    }
    .dash-next-avatars .mini-avatar {
      width:24px; height:24px;
      margin-right:-6px;
      border:2px solid rgba(0,0,0,0.5);
    }
    .dash-next-avatars .mini-avatar:last-child { margin-right:0; }
    .dash-next-more {
      margin-left:8px;
      font-size:11px; font-weight:700;
      background:rgba(0,0,0,0.4); padding:3px 8px;
      border-radius:50px; color:#fff;
    }
    .dash-next-counts {
      display:flex; gap:10px; flex-wrap:wrap;
      font-size:12px; color:rgba(255,255,255,0.85);
    }
    .dash-next-actions {
      display:flex; align-items:center; justify-content:space-between;
      gap:10px; flex-wrap:wrap;
      padding-top:10px;
      border-top:1px solid rgba(255,255,255,0.15);
    }
    .dash-next-rsvp-status {
      font-size:11px; font-weight:700;
      padding:4px 10px; border-radius:50px;
      letter-spacing:0.04em;
    }
    .dash-next-rsvp-status.going { background:rgba(0,220,120,0.2); color:#60ffaa; border:1px solid rgba(0,220,120,0.4); }
    .dash-next-rsvp-status.maybe { background:rgba(255,208,0,0.2); color:#ffd000; border:1px solid rgba(255,208,0,0.4); }
    .dash-next-rsvp-status.not { background:rgba(255,77,109,0.2); color:#ff8a9e; border:1px solid rgba(255,77,109,0.4); }
    .dash-next-rsvp-status.pending { background:rgba(232,124,42,0.25); color:#ffba79; border:1px solid rgba(232,124,42,0.4); }
    .dash-next-cta {
      font-size:13px; font-weight:700; color:#fff;
    }

    /* Polls list */
    .dash-polls-list { display:flex; flex-direction:column; gap:8px; }
    .dash-poll-row {
      width:100%; text-align:left;
      display:flex; align-items:center; gap:10px;
      padding:12px 14px;
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius); cursor:pointer;
      transition:all var(--dur) var(--ease-out);
      font-family:inherit; color:var(--text);
    }
    .dash-poll-row:hover {
      background:var(--surface-hover);
      border-color:var(--accent);
    }
    .dash-poll-info { flex:1; min-width:0; }
    .dash-poll-q {
      font-size:14px; font-weight:600;
      letter-spacing:-0.005em;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .dash-poll-fest {
      font-size:11px; color:var(--text-soft); margin-top:2px;
    }
    .dash-poll-arrow {
      color:var(--accent); font-weight:700; flex-shrink:0;
    }

    /* Activity feed */
    .dash-activity {
      display:flex; flex-direction:column; gap:0;
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius); overflow:hidden;
    }
    .dash-act-row {
      display:flex; align-items:flex-start; gap:10px;
      padding:11px 14px;
      border-bottom:1px solid var(--border);
    }
    .dash-act-row:last-child { border-bottom:none; }
    .dash-act-avatar {
      width:28px; height:28px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden; flex-shrink:0;
      font-size:10px; font-weight:700; color:#000;
    }
    .dash-act-avatar img { width:100%; height:100%; object-fit:cover; }
    .dash-act-content { flex:1; min-width:0; }
    .dash-act-text {
      font-size:13px; line-height:1.35;
      letter-spacing:-0.005em;
      color:var(--text);
    }
    .dash-act-text em { color:var(--text-soft); font-style:normal; }
    .dash-act-icon { margin-right:4px; }
    .dash-act-meta {
      font-size:11px; color:var(--text-soft);
      margin-top:2px;
    }
    .dash-act-fest {
      opacity:0.65;
    }

    .dash-card.dash-empty {
      background:var(--card); border:1px dashed var(--border);
      border-radius:var(--radius-lg); padding:30px 20px;
      text-align:center; margin-bottom:24px;
    }

    @media (max-width:600px) {
      .dash-next { aspect-ratio:4/3; max-height:none; }
      .dash-next-name { font-size:20px; }
      .dash-hero-name { font-size:22px; }
    }

    /* ── CREW SPLITS info-blok ── */
    .crew-splits-section {
      background:var(--card); border:1px solid rgba(232,124,42,0.25);
      border-radius:var(--radius-lg); padding:14px 16px;
      margin-bottom:18px;
    }
    .crew-splits-head {
      display:flex; align-items:center; justify-content:space-between;
      gap:10px; margin-bottom:12px;
    }
    .crew-splits-title {
      font-weight:700; font-size:14px; letter-spacing:-0.005em;
      color:#e87c2a;
    }
    .crew-splits-count {
      font-size:11px; color:var(--text-soft);
      background:var(--surface); padding:2px 8px; border-radius:50px;
    }
    .crew-splits-list {
      display:flex; flex-direction:column; gap:10px;
    }
    .crew-split-block {
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius); padding:10px 12px;
    }
    .crew-split-time {
      font-family:monospace; font-size:11px; font-weight:700;
      color:var(--accent); margin-bottom:8px;
      letter-spacing:0.04em;
    }
    .crew-split-rows {
      display:flex; flex-direction:column; gap:6px;
    }
    .crew-split-row {
      display:flex; align-items:center; gap:10px;
      padding:6px 8px; background:var(--card);
      border:1px solid var(--border); border-radius:8px;
    }
    .crew-split-avatars {
      display:flex; flex-shrink:0;
    }
    .crew-split-avatar {
      width:24px; height:24px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden; flex-shrink:0;
      border:2px solid var(--card);
      margin-right:-6px;
    }
    .crew-split-avatar:last-child { margin-right:0; }
    .crew-split-avatar img { width:100%; height:100%; object-fit:cover; }
    .crew-split-avatar .initials { font-size:9px; font-weight:700; color:#000; }
    .crew-split-info { flex:1; min-width:0; }
    .crew-split-names {
      font-size:11px; color:var(--text-soft);
      letter-spacing:-0.005em;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .crew-split-set {
      font-size:13px;
      line-height:1.2;
      letter-spacing:-0.005em;
      margin-top:1px;
    }
    .crew-split-set .muted { color:var(--text-soft); margin:0 2px; }

    /* Compact crew bubble on festival cards */
    .crew-bubble {
      position:absolute; bottom:12px; left:12px; z-index:3;
      background:rgba(0,0,0,0.75); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
      border:1px solid rgba(255,255,255,0.18);
      border-radius:var(--radius-full);
      padding:3px 10px 3px 3px;
      display:inline-flex; align-items:center; gap:6px;
      cursor:pointer;
      transition:all var(--dur) var(--ease-out);
      font-family:inherit;
      color:#fff;
    }
    .crew-bubble:hover {
      background:rgba(0,0,0,0.9);
      border-color:var(--accent);
      transform:translateY(-1px);
    }
    .crew-bubble-avatar {
      width:24px; height:24px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden; flex-shrink:0;
    }
    .crew-bubble-avatar img { width:100%; height:100%; object-fit:cover; }
    .crew-bubble-avatar .initials {
      font-size:10px; font-weight:700; color:#000;
    }
    .crew-bubble-count {
      font-size:12px; font-weight:700;
      color:#fff; letter-spacing:0.02em;
    }

    .card-body {
      padding:16px 18px; display:flex; flex-direction:column;
      gap:10px; flex:1;
    }
    .card-title { font-family:var(--font-display); font-size:18px; font-weight:700; line-height:1.2; letter-spacing:-0.02em; }
    .card-edition { font-size:12px; color:var(--text-soft); }
    .card-meta { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--text-soft); margin-top:auto; }
    .card-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--muted); }
    .card-tags { display:flex; flex-wrap:wrap; gap:5px; }
    .tag {
      font-size:10px; padding:3px 9px; border-radius:var(--radius-full);
      background:var(--surface); color:var(--text-soft);
      font-weight:600; text-transform:uppercase; letter-spacing:0.05em;
      border:1px solid var(--border);
    }
    .card-footer {
      display:flex; align-items:center; justify-content:space-between;
      padding:12px 18px; border-top:1px solid var(--border);
      font-size:12px; color:var(--text-soft);
    }
    .card-date {
      background:var(--surface); border-radius:var(--radius-sm);
      padding:6px 10px; text-align:center; min-width:46px;
      border:1px solid var(--border);
    }
    .card-date .month { font-size:9px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); font-weight:600; }
    .card-date .day   { font-size:15px; font-weight:700; color:var(--text); }

    /* My RSVP indicator on card */
    .my-rsvp {
      position:absolute; top:12px; left:12px; z-index:2;
      padding:5px 11px; border-radius:var(--radius-full);
      font-size:10px; font-weight:700;
      text-transform:uppercase; letter-spacing:0.06em;
      backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
      border:1px solid rgba(255,255,255,0.15);
    }
    .my-rsvp.going { background:rgba(0,220,120,0.85); color:#003318; }
    .my-rsvp.maybe { background:rgba(255,181,71,0.85); color:#3d2400; }
    .my-rsvp.not   { background:rgba(255,94,108,0.85); color:#3d000a; }

    /* Days-counter badge linksboven hero-image */
    .card-days-badge {
      position:absolute; top:12px; right:12px; z-index:2;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      min-width:54px; padding:6px 10px;
      background:rgba(0,0,0,0.55); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
      border:1px solid rgba(255,255,255,0.12);
      border-radius:var(--radius);
      color:#fff; line-height:1;
    }
    .card-days-badge .n {
      font-family:var(--font-display); font-size:22px; font-weight:700;
      letter-spacing:-0.02em;
    }
    .card-days-badge .lbl {
      font-size:9px; text-transform:uppercase; letter-spacing:0.08em;
      color:rgba(255,255,255,0.75); margin-top:2px;
      font-weight:600;
    }
    .card-days-badge.live {
      background:rgba(0,220,120,0.88); border-color:transparent;
      box-shadow:0 4px 16px rgba(0,220,120,0.3);
      animation:pulse-live 1.6s ease-in-out infinite;
    }
    .card-days-badge.live .n { color:#003318; font-size:13px; }
    .card-days-badge.live .lbl { color:rgba(0,51,24,0.8); }
    .card-days-badge.soon {
      background:rgba(255,77,109,0.88); border-color:transparent;
    }
    .card-days-badge.soon .lbl { color:rgba(0,0,0,0.7); }
    .card-days-badge.past { background:rgba(0,0,0,0.45); opacity:0.7; }

    .empty { text-align:center; padding:60px 20px; color:var(--muted); font-size:14px; }

    .planner-back { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:50px; background:var(--surface); color:var(--text-soft); font-size:13px; margin-bottom:18px; }
    .planner-back:hover { background:var(--surface-hover); color:var(--text); }

    /* Op de planner-pagina: hero gaat helemaal naar de bovenkant van het scherm.
       Terug-knop floating linksboven OVER de hero met blur. */
    body.no-topbar #page-planner {
      padding-top:0;
      /* Negatieve marge "boven" niet meer nodig — content begint direct na hero */
    }
    body.no-topbar #page-planner .planner-hero {
      /* Edge-to-edge: horizontaal naar de schermrand */
      position:relative;
      margin-left:calc(-1 * var(--page-pad-x, 28px));
      margin-right:calc(-1 * var(--page-pad-x, 28px));
      margin-top:0;
      margin-bottom:24px;
      border-radius:0;
      height:auto;
      min-height:320px;
      /* Push tekst binnen overlay naar onder, voorbij notch zone */
      padding-top:env(safe-area-inset-top, 0px);
    }
    /* CSS vars voor page padding zodat negative margin klopt voor alle breakpoints */
    #page-planner { --page-pad-x:28px; --page-pad-y:32px; }
    @media (max-width:820px) {
      #page-planner { --page-pad-x:16px; --page-pad-y:20px; }
      body.no-topbar #page-planner .planner-hero { min-height:280px; }
    }

    body.no-topbar #page-planner .planner-back {
      position:fixed;
      top:max(12px, calc(env(safe-area-inset-top, 0px) + 8px));
      left:14px;
      z-index:30;
      margin:0;
      background:rgba(0,0,0,0.55);
      color:#fff;
      backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
      border:1px solid rgba(255,255,255,0.18);
      padding:8px 14px;
      font-weight:600;
      box-shadow:0 4px 16px rgba(0,0,0,0.25);
    }
    body.no-topbar #page-planner .planner-back:hover {
      background:rgba(0,0,0,0.75);
      color:#fff;
    }
    /* De .planner-back pill blijft floating boven alles staan, ook wanneer de
       sticky-balk verschijnt. Dat geeft visuele continuïteit: één terug-knop
       die in beide states identiek is. De sticky-balk reserveert links ruimte
       voor de pill (zie .planner-sticky padding-left hieronder). */
    /* Sticky condensed planner header (verschijnt bij scrollen) */
    .planner-sticky {
      position:fixed; top:0; left:0; right:0; z-index:20;
      display:flex; align-items:center; gap:14px;
      /* padding-left reserveert ruimte voor de floating .planner-back pill
         (14px viewport-edge + ~90px pill + 12px gap = ~116px) */
      padding:10px 16px 10px 124px;
      background:var(--bg-glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
      border-bottom:1px solid var(--border);
      opacity:0; transform:translateY(-100%);
      transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
      pointer-events:none;
    }
    .planner-sticky.show {
      opacity:1; transform:translateY(0);
      pointer-events:auto;
    }
    .planner-sticky-tabs { display:flex; gap:4px; flex-shrink:0; }
    .planner-sticky-tabs button {
      padding:6px 12px; border-radius:var(--radius-full);
      background:var(--surface); color:var(--text-soft);
      font-size:12px; font-weight:600;
      transition:all var(--dur);
    }
    .planner-sticky-tabs button.active {
      background:var(--accent-soft); color:var(--text);
    }
    @media (max-width:600px) {
      .planner-sticky { padding-left:108px; }
      .planner-sticky-tabs button { padding:5px 8px; font-size:11px; }
    }

    .planner-hero {
      position:relative; height:280px; border-radius:var(--radius-xl);
      overflow:hidden; margin-bottom:20px;
      background:linear-gradient(135deg, var(--surface), var(--bg-elev));
      box-shadow:var(--shadow);
    }
    .planner-hero img {
      width:100%; height:120%;
      object-fit:cover;
      transition:transform 1.2s var(--ease-out);
      will-change:transform;
    }
    .planner-hero:hover img { transform:scale(1.05); }
    .planner-hero-overlay {
      position:absolute; inset:0;
      background:linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0.4) 50%, transparent 80%);
      display:flex; align-items:flex-end; padding:28px;
    }
    .planner-hero h1 {
      color:white; font-family:var(--font-display); font-size:48px;
      font-weight:700; letter-spacing:-0.03em; line-height:0.95;
      text-shadow:0 4px 30px rgba(0,0,0,0.5);
    }
    .planner-hero p {
      color:rgba(255,255,255,0.88); font-size:14px;
      margin-top:6px; letter-spacing:-0.005em;
    }
    /* Info knop rechtsonder op de hero → opent festival-beschrijving modal */
    .planner-hero-info {
      position:absolute; right:14px; bottom:14px;
      width:38px; height:38px; border-radius:50%;
      background:rgba(0,0,0,0.55);
      border:1px solid rgba(255,255,255,0.25);
      color:#fff;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; z-index:3;
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      transition:transform var(--dur), background var(--dur), border-color var(--dur);
    }
    .planner-hero-info:hover {
      background:rgba(184,157,255,0.55);
      border-color:rgba(255,255,255,0.45);
      transform:scale(1.08);
    }
    .planner-hero-info svg { width:18px; height:18px; }

    /* Mobiele floating ticket CTA */
    .floating-ticket-fab {
      position:fixed; bottom:88px; right:16px;
      z-index:30; display:none;
      padding:14px 22px; border-radius:var(--radius-full);
      background:linear-gradient(135deg, #ff4d6d, #c9184a);
      color:white; font-size:14px; font-weight:700;
      letter-spacing:-0.005em;
      box-shadow:0 8px 28px rgba(201,24,74,0.45);
      text-decoration:none;
      display:none; align-items:center; gap:8px;
      transition:transform var(--dur) var(--ease-out);
      animation:fade-in-up var(--dur-slow) var(--ease-out);
    }
    .floating-ticket-fab:hover { transform:scale(1.04); }
    .floating-ticket-fab.show { display:inline-flex; }
    @media (min-width:821px) { .floating-ticket-fab { display:none !important; } }

    /* Festival description */
    .planner-description {
      background:var(--card); border:1px solid var(--border);
      border-radius:var(--radius-lg); padding:18px 20px; margin-bottom:20px;
      font-size:14.5px; line-height:1.65; color:var(--text-soft);
      white-space:pre-wrap; letter-spacing:-0.005em;
    }

    /* RSVP bar — compact design, alles op één lijn */
    .rsvp-bar {
      display:flex; align-items:center; gap:8px; padding:10px 14px;
      background:var(--card); border:1px solid var(--border);
      border-radius:var(--radius-lg); margin-bottom:16px;
      flex-wrap:nowrap;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .rsvp-bar::-webkit-scrollbar { display:none; }
    .rsvp-group {
      display:inline-flex; align-items:center; gap:2px;
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius-full); padding:3px;
    }
    .rsvp-btn-mini {
      display:inline-flex; align-items:center; gap:5px;
      padding:6px 10px;
      border-radius:var(--radius-full);
      background:transparent;
      color:var(--text-soft);
      font-size:12.5px; font-weight:600;
      font-family:inherit;
      border:none; cursor:pointer;
      transition:all var(--dur) var(--ease-out);
      line-height:1;
    }
    .rsvp-btn-mini .ico {
      font-weight:700;
      font-size:13px;
    }
    .rsvp-btn-mini .lbl {
      letter-spacing:-0.005em;
    }
    .rsvp-btn-mini:hover { color:var(--text); background:rgba(255,255,255,0.04); }
    .rsvp-btn-mini.going.active {
      background:var(--going); color:#003318;
      box-shadow:0 2px 8px var(--going-glow);
    }
    .rsvp-btn-mini.maybe.active {
      background:var(--maybe); color:#3d2400;
      box-shadow:0 2px 8px var(--maybe-glow);
    }
    .rsvp-btn-mini.not.active {
      background:var(--not); color:#3d000a;
      box-shadow:0 2px 8px var(--not-glow);
    }
    .rsvp-counts-mini {
      display:inline-flex; gap:8px;
      font-size:11.5px; color:var(--text-soft);
      align-items:center;
    }
    .rsvp-counts-mini .rsvp-count-item {
      display:inline-flex; align-items:center; gap:4px;
      padding:3px 8px; border-radius:50px;
      background:var(--surface);
    }
    .rsvp-counts-mini .dot { width:6px; height:6px; border-radius:50%; }
    .rsvp-counts-mini .rsvp-count-item.going .dot { background:var(--going); }
    .rsvp-counts-mini .rsvp-count-item.maybe .dot { background:var(--maybe); }
    .rsvp-counts-mini .rsvp-count-item.not .dot { background:var(--not); }
    /* Voorkom dat items in de RSVP bar shrinken (alles netjes naast elkaar) */
    .rsvp-bar > * { flex-shrink:0; }
    .rsvp-spacer { flex:1; min-width:8px; flex-shrink:1; }

    /* Bel-knop in RSVP-bar (verving de oude extras-row bel) */
    .rsvp-bell {
      width:34px; height:34px; flex-shrink:0;
      border-radius:50%;
      background:var(--surface);
      border:1px solid var(--border);
      color:var(--text-soft);
      display:flex; align-items:center; justify-content:center;
      cursor:pointer;
      transition:all var(--dur);
    }
    .rsvp-bell:hover {
      background:var(--surface-hover);
      color:var(--text);
      border-color:var(--border-strong);
    }
    .rsvp-bell.on {
      background:var(--accent-soft);
      color:var(--accent);
      border-color:rgba(184,157,255,0.5);
    }
    .rsvp-bell svg { width:16px; height:16px; }

    /* Segmented pills (gebruikt in settings voor positie-keuze) */
    .seg-pill {
      padding:7px 12px; border-radius:50px;
      background:var(--surface); border:1px solid var(--border);
      color:var(--text-soft); font-size:12px; font-weight:600;
      cursor:pointer; transition:all var(--dur);
    }
    .seg-pill:hover { background:var(--surface-hover); color:var(--text); }
    .seg-pill.active {
      background:var(--accent-soft); color:var(--accent);
      border-color:rgba(184,157,255,0.45);
    }

    /* Prompt modal input — consistente styling met andere form fields */
    #prompt-input-wrap input,
    #prompt-input-wrap textarea {
      width:100%;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:11px 14px;
      color:var(--text);
      font-family:inherit;
      font-size:14px;
      transition:border-color var(--dur);
    }
    #prompt-input-wrap input:focus,
    #prompt-input-wrap textarea:focus {
      outline:none;
      border-color:var(--accent);
      background:var(--surface-hover);
    }
    #prompt-input-wrap textarea {
      resize:vertical;
      min-height:80px;
      line-height:1.45;
      font-family:inherit;
    }

    /* In-app notification banner — vervangt browser Notification API */
    #in-app-notif-stack {
      position:fixed; top:14px; right:14px;
      z-index:1100;
      display:flex; flex-direction:column; gap:10px;
      pointer-events:none;
      max-width:340px;
    }
    .in-app-notif {
      pointer-events:auto;
      display:flex; align-items:flex-start; gap:12px;
      padding:12px 14px;
      background:var(--card);
      border:1px solid var(--border);
      border-left:3px solid var(--accent);
      border-radius:var(--radius-lg);
      box-shadow:0 8px 24px rgba(0,0,0,0.35);
      opacity:0; transform:translateX(120%);
      transition:opacity var(--dur), transform 0.32s var(--ease-out);
      cursor:pointer;
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
    }
    .in-app-notif.show { opacity:1; transform:translateX(0); }
    .in-app-notif-img {
      width:44px; height:44px; border-radius:10px;
      background-size:cover; background-position:center;
      background-color:var(--surface);
      flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      font-size:20px;
    }
    .in-app-notif-img.placeholder {
      background:linear-gradient(135deg, var(--accent-soft), var(--surface));
    }
    .in-app-notif-body { flex:1; min-width:0; }
    .in-app-notif-title {
      font-size:13px; font-weight:700;
      color:var(--text); margin-bottom:2px;
      line-height:1.25;
      overflow:hidden; display:-webkit-box;
      -webkit-line-clamp:2; -webkit-box-orient:vertical;
    }
    .in-app-notif-text {
      font-size:12px; color:var(--text-soft);
      line-height:1.3;
      overflow:hidden; display:-webkit-box;
      -webkit-line-clamp:2; -webkit-box-orient:vertical;
    }
    .in-app-notif-close {
      width:22px; height:22px; flex-shrink:0;
      background:transparent; border:none; cursor:pointer;
      color:var(--text-soft); font-size:13px;
      border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      transition:background var(--dur), color var(--dur);
    }
    .in-app-notif-close:hover {
      background:var(--surface);
      color:var(--text);
    }
    @media (max-width:480px) {
      #in-app-notif-stack { left:10px; right:10px; max-width:none; }
    }

    /* Universele 'sluit-X' rechtsboven in modals (auto-injected) */
    .modal-close-x {
      position:absolute; top:10px; right:10px;
      width:32px; height:32px; border-radius:50%;
      background:var(--surface);
      border:1px solid var(--border);
      color:var(--text-soft);
      cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      transition:background var(--dur), color var(--dur), transform var(--dur);
      z-index:20;
    }
    .modal-close-x svg { width:14px; height:14px; }
    .modal-close-x:hover {
      background:var(--surface-hover);
      color:var(--text);
      transform:rotate(90deg);
    }

    /* Notif modal: toggle switch + minuten chips */
    .nm-row {
      display:flex; align-items:center; gap:14px;
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius);
      padding:12px 14px;
    }
    .nm-toggle {
      width:48px; height:28px; border-radius:50px;
      background:var(--border);
      border:none; cursor:pointer;
      position:relative;
      transition:background var(--dur);
      flex-shrink:0;
    }
    .nm-toggle[aria-checked="true"] { background:var(--accent); }
    .nm-toggle-knob {
      position:absolute; top:3px; left:3px;
      width:22px; height:22px; border-radius:50%;
      background:white;
      transition:transform var(--dur) var(--ease-out);
      box-shadow:0 2px 4px rgba(0,0,0,0.2);
    }
    .nm-toggle[aria-checked="true"] .nm-toggle-knob { transform:translateX(20px); }
    .nm-min-chip {
      padding:8px 14px; border-radius:50px;
      background:var(--surface); border:1px solid var(--border);
      color:var(--text-soft); font-size:13px; font-weight:600;
      cursor:pointer; transition:all var(--dur);
    }
    .nm-min-chip:hover { background:var(--surface-hover); color:var(--text); }
    .nm-min-chip.active {
      background:var(--accent); color:#1a1a24;
      border-color:var(--accent);
    }

    .btn-tickets, .btn-tickets-ghost {
      display:inline-flex; align-items:center; gap:6px;
      padding:7px 14px; border-radius:50px;
      font-size:12.5px; font-weight:700;
      text-decoration:none; transition:all 0.15s;
    }
    .btn-tickets {
      background:linear-gradient(135deg, #ff4d6d, #c9184a);
      color:white; box-shadow:0 4px 12px rgba(201,24,74,0.3);
    }
    .btn-tickets:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(201,24,74,0.4); }
    .btn-tickets-ghost {
      background:var(--surface); color:var(--text); border:1px solid var(--border);
    }
    .btn-tickets-ghost:hover { background:var(--surface-hover); }

    /* Mobile: verkleinder labels weg + tickets compacter */
    @media (max-width:600px) {
      .rsvp-btn-mini .lbl { display:none; }
      .rsvp-btn-mini.active .lbl { display:inline; }
      .rsvp-btn-mini { padding:7px 10px; }
      .btn-tickets, .btn-tickets-ghost { padding:7px 12px; font-size:12px; }
      .rsvp-bar { gap:6px; padding:8px 10px; }
    }

    .planner-toolbar {
      display:flex; align-items:center; justify-content:center;
      gap:8px; margin-bottom:14px; flex-wrap:wrap; position:relative;
    }
    .view-toggle {
      display:flex; gap:2px;
      background:var(--surface); border-radius:50px;
      padding:3px;
      flex-shrink:0;
      max-width:100%;
      /* Horizontaal scrollbaar als er te veel knoppen zijn (5+ tabs op smal scherm) */
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .view-toggle::-webkit-scrollbar { display:none; }
    .view-toggle button { padding:7px 14px; border-radius:50px; background:transparent; color:var(--text-soft); font-size:13px; font-weight:600; white-space:nowrap; flex-shrink:0; }
    .view-toggle button.active { background:var(--accent); color:#1a1a24; }
    .view-toggle button.crew-only-tab { border-left:1px solid var(--border); border-radius:0 50px 50px 0; padding-left:14px; }
    .view-toggle button.crew-only-tab + .crew-only-tab { border-left:none; padding-left:14px; border-radius:50px; }
    .view-toggle button.crew-only-tab.active { border-left-color:transparent; }
    /* Subtiele fade aan de rand van scrollbare view-toggle als hint */
    .view-toggle-wrap {
      position:relative;
      max-width:100%;
      flex-shrink:1;
    }
    .view-toggle-wrap::after {
      content:''; position:absolute; right:0; top:0; bottom:0;
      width:24px; pointer-events:none;
      background:linear-gradient(to right, transparent, var(--bg) 80%);
      border-radius:0 50px 50px 0;
      opacity:0; transition:opacity var(--dur);
    }
    .view-toggle-wrap.has-overflow::after { opacity:1; }

    @media (max-width:520px) {
      .view-toggle button { padding:6px 10px; font-size:12px; }
      .view-toggle button.crew-only-tab { padding-left:10px; }
    }

    .day-tabs { display:flex; gap:8px; flex-wrap:wrap; }
    .day-tab { padding:8px 16px; border-radius:50px; background:var(--surface); color:var(--text-soft); font-size:13px; font-weight:600; }
    .day-tab.active { background:var(--card); color:var(--text); border:1px solid var(--accent); }

    /* Day-tabs altijd op een eigen rij, gecentreerd — werkt voor 1, 2, 3 of 4+ dagen */
    .day-tabs-centered {
      flex-basis:100%;
      justify-content:center;
      margin-top:6px;
    }

    /* Locked schedule banner */
    .lock-banner {
      background:rgba(255,181,71,0.1); border:1px solid rgba(255,181,71,0.3);
      color:var(--maybe); padding:14px 18px; border-radius:var(--radius);
      font-size:13px; text-align:center; margin-bottom:18px;
    }

    .schedule { display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }
    .schedule.locked { opacity:0.4; pointer-events:none; filter:saturate(0.4); }
    .stage {
      background:var(--card); border:1px solid var(--border);
      border-radius:var(--radius-lg); overflow:hidden;
      transition:border-color var(--dur);
    }
    .stage:hover { border-color:var(--border-strong); }
    .stage-header {
      padding:12px 16px; font-family:var(--font-poster);
      font-size:18px; letter-spacing:0.04em; text-align:center;
    }
    .set-btn {
      width:100%; text-align:left; padding:12px 16px;
      background:transparent; border:none;
      border-bottom:1px solid var(--border);
      color:var(--text); font-family:inherit;
      position:relative;
      transition:background var(--dur) var(--ease-out);
    }
    .set-btn:last-child { border-bottom:none; }
    .set-btn:hover { background:var(--surface-hover); }
    .set-btn:active { background:var(--surface-strong); }
    .set-btn.selected {
      background:linear-gradient(90deg, rgba(0,220,120,0.16), rgba(0,220,120,0.06));
    }
    .set-btn.selected::before {
      content:'✓'; position:absolute; right:14px; top:50%;
      transform:translateY(-50%); color:var(--going);
      font-size:14px; font-weight:700;
      background:rgba(0,220,120,0.18);
      width:22px; height:22px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
    }
    .set-artist { font-weight:600; font-size:13.5px; padding-right:32px; letter-spacing:-0.005em; }
    .set-time { font-size:11.5px; color:var(--text-soft); margin-top:3px; font-variant-numeric:tabular-nums; }
    .set-avatars { display:flex; margin-top:8px; }
    .mini-avatar {
      width:22px; height:22px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-size:9px; font-weight:700; color:#1a1a24;
      border:2px solid var(--card); margin-right:-6px;
    }
    .set-btn.has-crew { background:linear-gradient(90deg, rgba(184,157,255,0.08), rgba(184,157,255,0.02)); }

    .modal-backdrop {
      position:fixed; inset:0;
      background:rgba(0,0,0,0.65); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
      display:none; align-items:flex-start; justify-content:center;
      z-index:100;
      /* Verticaal scrollbaar bij hoge modals zoals scanner */
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      /* Padding respecteert safe-area op iPhones met dynamic island/notch + iOS bottom-bar.
         Op desktop: gewoon 20px rondom. */
      padding:max(20px, env(safe-area-inset-top, 0px)) 20px max(20px, env(safe-area-inset-bottom, 0px));
      animation:fade-in-up 0.2s var(--ease-out);
    }
    .modal-backdrop.active { display:flex; }
    /* Op mobile: bottom-nav (sidebar) staat fixed onderaan vanaf 820px. Reserveer
       extra padding zodat de modal niet onder de nav valt. */
    @media (max-width:820px) {
      .modal-backdrop {
        padding-bottom:max(110px, calc(env(safe-area-inset-bottom, 0px) + 100px));
      }
    }
    .modal {
      background:var(--bg-elev);
      border:1px solid var(--border);
      border-radius:var(--radius-xl);
      max-width:440px; width:100%; padding:32px;
      /* Voorkom dat hele lange modals fysiek niet meer scrollen — body is al scrollable
         via de backdrop, dus modal hoeft niet ook nog eens te scrollen. Wel: marge bovenaan
         zodat hij niet plakt op de safe-area. */
      margin:auto 0;
      box-shadow:var(--shadow-lg);
      animation:fade-in-up var(--dur-slow) var(--ease-out);
    }
    .modal h2 {
      font-family:var(--font-display); font-size:26px; font-weight:700;
      letter-spacing:-0.02em; color:var(--text); margin-bottom:8px;
    }
    .modal p { font-size:13.5px; color:var(--text-soft); margin-bottom:20px; line-height:1.5; }
    .modal-divider { text-align:center; color:var(--muted); font-size:12px; margin:18px 0; position:relative; }
    .modal-divider::before, .modal-divider::after { content:''; position:absolute; top:50%; width:42%; height:1px; background:var(--border); }
    .modal-divider::before { left:0; } .modal-divider::after { right:0; }
    .input-row { display:flex; gap:8px; margin-bottom:10px; }
    .input-row input { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:11px 14px; color:var(--text); font-size:14px; }
    .input-row input:focus { outline:none; border-color:var(--accent); }
    .input-row input::placeholder { color:var(--muted); }
    .btn {
      padding:10px 18px; border-radius:var(--radius-sm);
      font-size:14px; font-weight:600; letter-spacing:-0.005em;
      transition:all var(--dur) var(--ease-out);
      position:relative;
    }
    .btn:active { transform:scale(0.97); }
    .btn-primary {
      background:var(--gradient-accent); color:#fff;
      box-shadow:0 4px 14px rgba(139,92,246,0.32);
    }
    .btn-primary:hover { box-shadow:0 6px 20px rgba(139,92,246,0.45); transform:translateY(-1px); }
    .btn-primary:active { box-shadow:0 2px 8px rgba(139,92,246,0.32); transform:translateY(0) scale(0.97); }
    .btn-ghost {
      background:var(--surface); color:var(--text-soft);
      border:1px solid var(--border);
    }
    .btn-ghost:hover { background:var(--surface-hover); color:var(--text); border-color:var(--border-strong); }
    .btn-danger {
      background:rgba(255,80,80,0.12); color:#ff8080;
      border:1px solid rgba(255,80,80,0.28);
    }
    .btn-danger:hover { background:rgba(255,80,80,0.2); }
    #err { color:#ff8080; font-size:13px; margin-top:8px; display:none; }

    .crew-header { display:flex; align-items:center; gap:16px; margin-bottom:24px; padding:20px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); }
    .crew-code-big { font-family:monospace; font-size:32px; letter-spacing:8px; color:var(--accent); background:var(--surface); border:1px dashed var(--border); border-radius:10px; padding:14px 20px; text-align:center; flex:1; }
    .members-grid { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); margin-bottom:32px; }
    .member-card { display:flex; align-items:center; gap:12px; padding:14px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); }
    .member-avatar-big { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#1a1a24; flex-shrink:0; }
    .member-info { flex:1; min-width:0; }
    .member-name { font-weight:600; font-size:14px; }
    .member-sub { font-size:11px; color:var(--text-soft); }
    .member-you { font-size:10px; color:var(--accent); background:rgba(184,157,255,0.15); border-radius:20px; padding:2px 7px; font-weight:600; }
    .crew-admin-badge {
      display:inline-block;
      font-size:12px;
      margin-left:2px;
      vertical-align:baseline;
      cursor:help;
    }
    .member-kick {
      background:none; border:none; color:var(--muted);
      cursor:pointer; padding:6px 10px; font-size:13px;
      border-radius:50%;
      transition:all var(--dur);
      flex-shrink:0;
    }
    .member-kick:hover { color:var(--not); background:rgba(255,94,108,0.12); }

    .crew-festival-block { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:14px; }
    .crew-festival-head { display:flex; align-items:center; gap:12px; cursor:pointer; }
    .crew-festival-thumb { width:48px; height:48px; border-radius:10px; overflow:hidden; background:var(--surface); flex-shrink:0; }
    .crew-festival-thumb img { width:100%; height:100%; object-fit:cover; }
    .crew-festival-name { font-size:15px; font-weight:700; }
    .crew-festival-meta { font-size:12px; color:var(--text-soft); }

    /* Page header rij met info-knop rechtsboven */
    .page-header-row {
      display:flex; align-items:flex-start; justify-content:space-between;
      gap:14px;
      margin-bottom:20px;
    }
    .page-info-btn {
      width:38px; height:38px; flex-shrink:0;
      border-radius:50%;
      background:var(--surface);
      border:1px solid var(--border);
      color:var(--text-soft);
      cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      transition:all var(--dur);
      margin-top:4px;
    }
    .page-info-btn:hover {
      background:var(--accent-soft);
      color:var(--accent);
      border-color:rgba(184,157,255,0.5);
      transform:scale(1.05);
    }
    .page-info-btn svg { width:18px; height:18px; }

    /* Page-info modal — uitleg per pagina */
    .pi-header {
      display:flex; align-items:center; gap:12px;
      margin-bottom:18px;
      padding-bottom:14px;
      border-bottom:1px solid var(--border);
    }
    .pi-icon {
      font-size:32px;
      width:54px; height:54px;
      display:flex; align-items:center; justify-content:center;
      background:var(--accent-soft);
      border-radius:14px;
      flex-shrink:0;
    }
    .pi-title {
      margin:0;
      font-size:20px;
      letter-spacing:-0.015em;
    }
    .pi-body {
      display:flex; flex-direction:column; gap:10px;
      max-height:60vh;
      overflow-y:auto;
      padding-right:4px;
    }
    .pi-item {
      padding:12px 14px;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius);
    }
    .pi-item-h {
      font-size:14px; font-weight:700;
      margin-bottom:4px;
      letter-spacing:-0.01em;
    }
    .pi-item-p {
      font-size:13px;
      line-height:1.5;
      color:var(--text-soft);
    }

    .settings-section { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:14px; }
    .settings-section h3 { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:14px; }

    /* ── CREW HEATMAP ── */
    .hm-section {
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:16px;
      margin-bottom:18px;
    }
    .hm-head { margin-bottom:12px; }
    .hm-title {
      font-size:14px; font-weight:700;
      color:var(--text);
      letter-spacing:-0.01em;
    }
    .hm-sub {
      font-size:11px; color:var(--text-soft);
      margin-top:2px;
    }
    .hm-tier-head {
      font-size:11px; font-weight:700;
      text-transform:uppercase;
      letter-spacing:0.05em;
      margin-top:14px; margin-bottom:8px;
      padding-left:4px;
    }
    .hm-tier-head-must { color:var(--accent); }
    .hm-tier-head-pop  { color:var(--maybe); }
    .hm-list {
      display:flex; flex-direction:column;
      gap:8px;
    }
    .hm-set {
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      padding:10px 12px;
      transition:all var(--dur);
    }
    .hm-set:hover { border-color:var(--border-strong); }
    .hm-tier-must {
      background:linear-gradient(135deg, rgba(184,157,255,0.07), rgba(139,92,246,0.04));
      border-color:rgba(184,157,255,0.3);
    }
    .hm-tier-pop {
      background:linear-gradient(135deg, rgba(255,181,71,0.06), rgba(255,150,30,0.03));
      border-color:rgba(255,181,71,0.25);
    }
    .hm-set-head {
      display:flex; align-items:center; gap:10px;
      margin-bottom:8px;
    }
    .hm-set-info { flex:1; min-width:0; }
    .hm-set-artist {
      font-size:13.5px; font-weight:700;
      color:var(--text);
      white-space:nowrap;
      overflow:hidden; text-overflow:ellipsis;
      letter-spacing:-0.005em;
    }
    .hm-set-meta {
      font-size:11px; color:var(--text-soft);
      margin-top:1px;
    }
    .hm-set-count {
      flex-shrink:0;
      font-size:13px; font-weight:700;
      color:var(--accent);
      font-variant-numeric:tabular-nums;
    }
    .hm-bar-wrap {
      position:relative;
      height:8px;
      background:var(--bg-elev);
      border-radius:4px;
      overflow:hidden;
      margin-bottom:8px;
    }
    .hm-bar {
      height:100%;
      background:linear-gradient(90deg, var(--accent), #c4a8ff);
      border-radius:4px;
      transition:width var(--dur-slow) var(--ease-out);
    }
    .hm-tier-pop .hm-bar  { background:linear-gradient(90deg, var(--maybe), #ffd089); }
    .hm-tier-rest .hm-bar { background:linear-gradient(90deg, var(--text-soft), #6b7280); opacity:0.6; }
    .hm-bar-label {
      position:absolute; right:4px; top:50%; transform:translateY(-50%);
      font-size:9px; font-weight:700;
      color:var(--text);
      text-shadow:0 0 4px var(--bg);
    }
    .hm-avatars {
      display:flex; gap:-4px;
      flex-wrap:wrap;
    }
    .hm-avatar {
      width:24px; height:24px;
      border-radius:50%;
      border:2px solid var(--card);
      margin-left:-6px;
      object-fit:cover;
      display:flex; align-items:center; justify-content:center;
      background:var(--accent-soft);
      flex-shrink:0;
    }
    .hm-avatar:first-child { margin-left:0; }
    .hm-avatar-text {
      font-size:9px; font-weight:700;
      color:var(--accent);
    }
    .hm-avatar-extra {
      font-size:10px; font-weight:700;
      color:var(--text-soft);
      background:var(--surface);
    }
    .hm-rest {
      margin-top:14px;
    }
    .hm-rest summary {
      font-size:12px; font-weight:600;
      color:var(--text-soft);
      cursor:pointer;
      padding:8px 12px;
      background:var(--surface);
      border-radius:50px;
      list-style:none;
      text-align:center;
    }
    .hm-rest summary::-webkit-details-marker { display:none; }
    .hm-rest summary:hover { color:var(--text); background:var(--surface-hover); }
    .hm-rest[open] summary { margin-bottom:10px; }
    .hm-rest .hm-rest-label-less { display:none; }
    .hm-rest[open] .hm-rest-label-more { display:none; }
    .hm-rest[open] .hm-rest-label-less { display:inline; }

    /* ── CARPOOL: cost mode tabs + paid-status ── */
    .carpool-cost-mode {
      display:flex; gap:4px;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      padding:3px;
      margin-top:6px;
    }
    .carpool-cost-tab {
      flex:1;
      padding:8px 6px;
      background:transparent;
      border:none;
      border-radius:6px;
      color:var(--text-soft);
      font-size:11px; font-weight:600;
      cursor:pointer;
      font-family:inherit;
      transition:all var(--dur);
      white-space:nowrap;
    }
    .carpool-cost-tab:hover { color:var(--text); }
    .carpool-cost-tab.active {
      background:var(--accent);
      color:#1a1a24;
      font-weight:700;
    }
    .carpool-cost-pane { animation:fade-in-up 0.2s var(--ease-out); }

    .carpool-cost-row {
      display:flex; flex-wrap:wrap; align-items:baseline;
      gap:8px;
      padding:10px 12px;
      background:rgba(184,157,255,0.07);
      border:1px solid rgba(184,157,255,0.2);
      border-radius:var(--radius-sm);
      margin-top:10px;
    }
    .carpool-cost-main {
      font-size:13px; font-weight:700;
      color:var(--accent);
    }
    .carpool-cost-split {
      font-size:11.5px;
      color:var(--text-soft);
    }

    .carpool-pax-list {
      margin-top:10px;
      padding-top:10px;
      border-top:1px dashed var(--border);
    }
    .carpool-pax-list-head {
      font-size:11px; font-weight:700;
      color:var(--text-soft);
      text-transform:uppercase;
      letter-spacing:0.05em;
      margin-bottom:6px;
    }
    .carpool-pax-row {
      display:flex; align-items:center; gap:10px;
      padding:6px 0;
    }
    .carpool-pax-row + .carpool-pax-row {
      border-top:1px solid var(--border);
    }
    .carpool-pax-row.empty { opacity:0.55; }
    .carpool-pax-name {
      flex:1; min-width:0;
      font-size:13px; font-weight:500;
      color:var(--text);
      white-space:nowrap;
      overflow:hidden; text-overflow:ellipsis;
    }
    .carpool-pax-name.muted { color:var(--text-soft); font-style:italic; }
    .carpool-paid-btn {
      flex-shrink:0;
      padding:5px 11px;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:50px;
      color:var(--text-soft);
      font-size:11px; font-weight:700;
      cursor:pointer;
      font-family:inherit;
      transition:all var(--dur);
    }
    .carpool-paid-btn:hover:not(:disabled) {
      background:var(--surface-hover);
      color:var(--text);
    }
    .carpool-paid-btn.paid {
      background:rgba(0,220,120,0.15);
      border-color:rgba(0,220,120,0.4);
      color:var(--going);
    }
    /* ── Conflict pill: compacte knop bovenaan, klikt open voor full lijst ── */
    .conflict-pill {
      margin-bottom:12px;
    }
    .conflict-pill summary {
      list-style:none;
      display:inline-flex; align-items:center; gap:8px;
      padding:6px 12px 6px 10px;
      background:rgba(255,94,108,0.10);
      border:1px solid rgba(255,94,108,0.35);
      color:var(--not);
      border-radius:999px;
      font-size:13px; font-weight:600;
      cursor:pointer;
      transition:background 0.15s, border-color 0.15s;
      user-select:none;
    }
    .conflict-pill summary::-webkit-details-marker { display:none; }
    .conflict-pill summary:hover {
      background:rgba(255,94,108,0.16);
      border-color:rgba(255,94,108,0.5);
    }
    .conflict-pill-icon { font-size:14px; line-height:1; }
    .conflict-pill-text { line-height:1.2; }
    .conflict-pill-chevron {
      width:14px; height:14px;
      transition:transform 0.2s;
      opacity:0.85;
    }
    .conflict-pill[open] .conflict-pill-chevron { transform:rotate(180deg); }
    .conflict-pill-body {
      margin-top:10px;
      padding:12px 14px;
      background:linear-gradient(135deg, rgba(255,94,108,0.06), rgba(255,150,160,0.04));
      border:1px solid rgba(255,94,108,0.25);
      border-radius:var(--radius);
    }
    .conflict-pill-sub {
      font-size:12px;
      color:var(--text-soft);
      line-height:1.45;
      margin-bottom:10px;
    }
    .conflict-banner-groups {
      display:flex; flex-direction:column;
      gap:10px;
    }
    .conflict-group {
      background:var(--bg-elev);
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      padding:10px 12px;
    }
    .conflict-group-label {
      font-size:10.5px;
      font-weight:700;
      color:var(--not);
      text-transform:uppercase;
      letter-spacing:0.06em;
      margin-bottom:6px;
    }
    .conflict-group-sets {
      display:flex; flex-direction:column; gap:4px;
    }
    .conflict-set-row {
      display:flex; align-items:center; gap:10px;
      padding:8px 0;
    }
    .conflict-set-row + .conflict-set-row {
      border-top:1px dashed var(--border);
    }
    .conflict-set-info { flex:1; min-width:0; }
    .conflict-set-artist {
      font-size:13.5px; font-weight:600;
      color:var(--text);
      white-space:nowrap;
      overflow:hidden; text-overflow:ellipsis;
    }
    .conflict-set-meta {
      font-size:11.5px; color:var(--text-soft);
      margin-top:1px;
    }
    .conflict-set-remove {
      flex-shrink:0;
      width:32px; height:32px;
      padding:0 !important;
      border-radius:50% !important;
      display:flex; align-items:center; justify-content:center;
      font-size:14px;
      color:var(--not);
    }
    .conflict-set-remove:hover {
      background:rgba(255,94,108,0.12) !important;
    }

    /* ── WEER WIDGET ── */
    .weather-wrap {
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:16px;
      margin-bottom:18px;
    }
    .weather-head {
      display:flex; align-items:center; justify-content:space-between;
      gap:10px;
      margin-bottom:12px;
    }
    .weather-title {
      font-size:14px; font-weight:700;
      color:var(--text);
    }
    .weather-sub {
      font-size:11px; color:var(--text-soft);
    }
    .weather-loading, .weather-empty {
      padding:20px; text-align:center;
      font-size:13px; color:var(--text-soft);
    }
    .weather-days {
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
      gap:10px;
    }
    .weather-day {
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      padding:12px;
      transition:border-color var(--dur);
    }
    .weather-day:hover { border-color:var(--border-strong); }
    .weather-day-head {
      display:flex; align-items:center; justify-content:space-between;
      gap:8px;
      margin-bottom:6px;
    }
    .weather-day-date {
      font-size:12px; font-weight:700;
      color:var(--text);
      text-transform:capitalize;
    }
    .weather-day-icon {
      font-size:22px; line-height:1;
    }
    .weather-day-temps {
      display:flex; align-items:baseline; gap:6px;
      margin-bottom:6px;
    }
    .weather-tmax {
      font-size:22px; font-weight:700;
      color:var(--text);
      letter-spacing:-0.02em;
    }
    .weather-tmin {
      font-size:13px;
      color:var(--text-soft);
    }
    .weather-day-meta {
      display:flex; flex-wrap:wrap; gap:6px;
      font-size:10.5px; color:var(--text-soft);
      margin-bottom:8px;
      min-height:14px;
    }
    .weather-day-tip {
      display:flex; flex-wrap:wrap; gap:4px;
      margin-bottom:8px;
    }
    .weather-tip-chip {
      font-size:11px;
      padding:3px 7px;
      background:var(--bg-elev);
      border:1px solid var(--border);
      border-radius:50px;
      white-space:nowrap;
    }
    .weather-day-summary {
      font-size:11.5px;
      line-height:1.4;
      color:var(--text-soft);
      font-style:italic;
    }
    .fb-cat-grid {
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:8px;
    }
    @media (max-width:480px) {
      .fb-cat-grid { grid-template-columns:repeat(2, 1fr); }
    }
    .fb-cat-chip {
      display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      gap:4px;
      padding:14px 8px;
      background:var(--surface);
      border:1.5px solid var(--border);
      border-radius:var(--radius);
      cursor:pointer;
      font-family:inherit;
      transition:all var(--dur);
    }
    .fb-cat-chip:hover {
      background:var(--surface-hover);
      border-color:var(--border-strong);
    }
    .fb-cat-chip.active {
      background:var(--accent-soft);
      border-color:var(--accent);
      box-shadow:0 0 0 3px rgba(184,157,255,0.15);
    }
    .fb-cat-emoji { font-size:24px; line-height:1; }
    .fb-cat-label {
      font-size:12px; font-weight:600;
      color:var(--text);
    }
    .fb-cat-chip.active .fb-cat-label { color:var(--accent); }

    /* ── ADMIN FEEDBACK PANEL ── */
    .admin-tab-badge {
      display:inline-flex;
      align-items:center; justify-content:center;
      min-width:18px; height:18px;
      padding:0 5px;
      background:var(--not);
      color:white;
      font-size:10px; font-weight:700;
      border-radius:10px;
      margin-left:6px;
      letter-spacing:-0.01em;
    }
    .admin-fb-wrap { margin-top:14px; }
    .admin-fb-filters {
      display:flex; flex-direction:column; gap:10px;
      padding:12px 14px;
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
    }
    .admin-fb-filter-group {
      display:flex; align-items:center; gap:6px;
      flex-wrap:wrap;
    }
    .admin-fb-filter-label {
      font-size:11px; font-weight:700;
      color:var(--text-soft);
      text-transform:uppercase;
      letter-spacing:0.04em;
      margin-right:4px;
      min-width:46px;
    }
    .admin-fb-filter-chip {
      padding:5px 11px;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:50px;
      color:var(--text-soft);
      font-size:12px; font-weight:600;
      cursor:pointer;
      font-family:inherit;
      transition:all var(--dur);
    }
    .admin-fb-filter-chip:hover { background:var(--surface-hover); color:var(--text); }
    .admin-fb-filter-chip.active {
      background:var(--accent-soft);
      border-color:rgba(184,157,255,0.5);
      color:var(--accent);
    }
    .admin-fb-item {
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:14px 16px;
      margin-bottom:10px;
      transition:border-color var(--dur);
    }
    .admin-fb-item[data-status="new"] {
      border-left:3px solid var(--accent);
    }
    .admin-fb-item[data-status="closed"] {
      opacity:0.6;
    }
    .admin-fb-head {
      display:flex; align-items:center; gap:10px;
      flex-wrap:wrap;
      margin-bottom:10px;
    }
    .admin-fb-cat {
      font-size:13px; font-weight:700;
      color:var(--text);
    }
    .admin-fb-status {
      font-size:10px; font-weight:700;
      padding:3px 8px; border-radius:50px;
      text-transform:uppercase; letter-spacing:0.04em;
    }
    .admin-fb-status.new    { background:var(--accent-soft); color:var(--accent); }
    .admin-fb-status.read   { background:rgba(255,181,71,0.15); color:var(--maybe); }
    .admin-fb-status.closed { background:rgba(0,220,120,0.15); color:var(--going); }
    .admin-fb-ts {
      margin-left:auto;
      font-size:11px; color:var(--text-soft);
    }
    .admin-fb-message {
      font-size:14px; line-height:1.55;
      color:var(--text);
      padding:10px 12px;
      background:var(--surface);
      border-radius:var(--radius-sm);
      margin-bottom:10px;
      white-space:pre-wrap;
      word-break:break-word;
    }
    .admin-fb-meta {
      display:flex; gap:14px; flex-wrap:wrap;
      font-size:12px; color:var(--text-soft);
      margin-bottom:10px;
    }
    .admin-fb-meta a { color:var(--accent); text-decoration:none; }
    .admin-fb-meta a:hover { text-decoration:underline; }
    .admin-fb-actions {
      display:flex; gap:6px; flex-wrap:wrap;
      padding-top:10px;
      border-top:1px solid var(--border);
    }

    /* FAQ CTA knop in antwoord */
    .faq-a-cta {
      margin-top:10px;
      padding-top:10px;
      border-top:1px solid var(--border);
    }
    .faq-cat {
      margin-bottom:24px;
    }
    .faq-cat-title {
      font-size:13px; font-weight:700;
      color:var(--text-soft);
      text-transform:uppercase;
      letter-spacing:0.06em;
      margin-bottom:10px;
      padding-left:4px;
    }
    .faq-items {
      display:flex; flex-direction:column;
      gap:8px;
    }
    .faq-item {
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      overflow:hidden;
      transition:border-color var(--dur);
    }
    .faq-item:hover { border-color:var(--border-strong); }
    .faq-item.open {
      border-color:rgba(184,157,255,0.4);
      background:linear-gradient(to bottom, var(--card), var(--surface));
    }
    .faq-q {
      width:100%;
      display:flex; align-items:center; justify-content:space-between;
      gap:14px;
      padding:14px 16px;
      background:transparent;
      border:none;
      cursor:pointer;
      text-align:left;
      font-family:inherit;
      transition:background var(--dur);
    }
    .faq-q:hover { background:var(--surface-hover); }
    .faq-q-text {
      flex:1;
      font-size:14px; font-weight:600;
      color:var(--text);
      letter-spacing:-0.005em;
      line-height:1.4;
    }
    .faq-q-icon {
      flex-shrink:0;
      width:28px; height:28px;
      border-radius:50%;
      background:var(--surface);
      border:1px solid var(--border);
      display:flex; align-items:center; justify-content:center;
      font-size:18px; font-weight:300;
      color:var(--text-soft);
      transition:all var(--dur);
    }
    .faq-item.open .faq-q-icon {
      background:var(--accent);
      color:#1a1a24;
      border-color:var(--accent);
      transform:rotate(180deg);
    }
    .faq-a {
      padding:0 16px 14px;
      animation:faq-slide 0.25s var(--ease-out);
    }
    .faq-a-inner {
      padding:12px 14px;
      background:var(--surface);
      border-radius:var(--radius-sm);
      font-size:13.5px;
      line-height:1.6;
      color:var(--text-soft);
      letter-spacing:-0.005em;
    }
    @keyframes faq-slide {
      from { opacity:0; transform:translateY(-6px); }
      to   { opacity:1; transform:translateY(0); }
    }
    .theme-seg {
      display:inline-flex; gap:3px;
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius-full);
      padding:3px;
      flex-shrink:0;
    }
    .theme-seg-btn {
      display:inline-flex; align-items:center; gap:6px;
      padding:7px 14px; border-radius:var(--radius-full);
      background:transparent; border:none; cursor:pointer;
      color:var(--text-soft); font-weight:600; font-size:13px;
      font-family:inherit;
      transition:all var(--dur) var(--ease-out);
      white-space:nowrap;
    }
    .theme-seg-btn:hover {
      color:var(--text);
      background:var(--surface-hover);
    }
    .theme-seg-btn.active {
      background:var(--accent);
      color:#1a1a24;
      box-shadow:0 2px 8px rgba(184,157,255,0.3);
    }
    .theme-seg-btn span { letter-spacing:-0.005em; }
    .settings-section.founder-section {
      background:linear-gradient(180deg, rgba(255,167,38,0.08), transparent 60%), var(--card);
      border-color:rgba(255,167,38,0.25);
    }
    .settings-section.founder-section h3 {
      display:flex; align-items:center; gap:8px; flex-wrap:wrap;
      color:#ffa726;
    }
    .founder-badge {
      font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
      background:rgba(255,167,38,0.18); color:#ffa726;
      padding:3px 8px; border-radius:50px;
      border:1px solid rgba(255,167,38,0.3);
    }
    .s-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
    .s-row label { font-size:13px; color:var(--text-soft); min-width:110px; }
    .s-row input { flex:1; min-width:120px; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:9px 12px; color:var(--text); font-size:14px; }

    @media (max-width: 820px) {
      /* ── BOTTOM NAV (echt mobiel) ── */
      .sidebar {
        position:fixed; left:8px; right:8px; bottom:8px; top:auto;
        width:auto; height:auto;
        flex-direction:row; padding:6px;
        border:1px solid var(--border-strong);
        border-radius:var(--radius-xl);
        background:var(--bg-glass); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
        gap:0;
        z-index:50;
        box-shadow:0 -8px 32px rgba(0,0,0,0.3);
        /* Geen scroll meer — items vullen de balk gelijkmatig */
        overflow:hidden;
        /* Respect iOS home-indicator */
        padding-bottom:max(6px, env(safe-area-inset-bottom, 0px));
      }
      .brand { display:none; }
      .sidebar #auth-bar { display:none; }
      .sidebar-footer { display:none; }
      .nav-item {
        flex:1 1 0;
        min-width:0;
        flex-direction:column; gap:2px;
        padding:6px 2px; font-size:9.5px;
        text-align:center; align-items:center; justify-content:center;
        border-radius:var(--radius-sm);
        font-weight:600; letter-spacing:-0.005em;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        max-width:100%;
      }
      .nav-item:hover { transform:none; }
      .nav-item.active { background:var(--accent-soft); box-shadow:none; }
      .nav-item.active::before { display:none; }
      .nav-item svg { width:20px; height:20px; flex-shrink:0; }
      .nav-item .admin-tag { display:none; }
      /* Bij heel veel items (founder met admin+preview): tekst nog kleiner */
      @media (max-width:380px) {
        .nav-item { font-size:8.5px; padding:6px 1px; }
        .nav-item svg { width:18px; height:18px; }
      }
      .main { padding-bottom:90px; }
      .topbar { padding:12px 16px; gap:10px; }
      .page { padding:20px 16px; }
      .page-title { font-size:28px; }
      .grid { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:14px; }
      .card-body { padding:12px 14px; gap:8px; }
      .card-title { font-size:15px; }
      .card-img-wrap { aspect-ratio:4/5; }
      .card-days-badge { right:12px; min-width:48px; padding:5px 8px; }
      .card-days-badge .n { font-size:18px; }
      .crew-header { flex-direction:column; align-items:stretch; }
      .planner-hero { height:200px; border-radius:var(--radius-lg); }
      .planner-hero h1 { font-size:32px; }
      .planner-hero p { font-size:12.5px; }
      .planner-sticky { padding:8px 12px 8px 108px; }
      .modal { padding:24px 20px; border-radius:var(--radius-lg); }
    }

    #toast { position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--card); border:1px solid var(--border); color:var(--text); padding:10px 18px; border-radius:50px; font-size:13px; opacity:0; transition:all 0.22s; pointer-events:none; z-index:999; box-shadow:var(--shadow); }
    #toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

    /* ── ADMIN ── */
    .admin-tag { font-size:9px; padding:2px 6px; border-radius:20px; background:rgba(184,157,255,0.2); color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:0.5px; margin-left:auto; }
    .nav-admin .admin-tag { margin-left:auto; }

    .admin-tabs {
      display:flex; gap:6px;
      margin-bottom:20px;
      border-bottom:1px solid var(--border);
      padding-bottom:0;
      /* Horizontaal scrollbaar als er te veel tabs zijn — voorkomt dat pagina breder
         wordt dan viewport (waardoor de bottom-nav meerekt op mobile). */
      overflow-x:auto;
      overflow-y:hidden;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      flex-wrap:nowrap;
      max-width:100%;
    }
    .admin-tabs::-webkit-scrollbar { display:none; }
    .admin-tab {
      padding:10px 18px;
      background:transparent;
      color:var(--text-soft);
      font-size:14px; font-weight:600;
      border-bottom:2px solid transparent;
      margin-bottom:-1px;
      flex-shrink:0;
      white-space:nowrap;
    }
    .admin-tab.active { color:var(--text); border-bottom-color:var(--accent); }
    .admin-tab:hover { color:var(--text); }

    .admin-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }
    .admin-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:8px; }
    .admin-card-head { display:flex; align-items:center; gap:12px; }
    .admin-card-thumb { width:46px; height:46px; border-radius:8px; overflow:hidden; background:var(--surface); flex-shrink:0; }
    .admin-card-thumb img { width:100%; height:100%; object-fit:cover; }
    .admin-card-info { flex:1; min-width:0; }
    .admin-card-name { font-weight:700; font-size:14px; }
    .admin-card-meta { font-size:11px; color:var(--text-soft); }
    .admin-card-actions { display:flex; gap:6px; margin-top:4px; }
    .admin-card-actions button { flex:1; padding:7px 10px; border-radius:8px; font-size:12px; font-weight:600; }

    .admin-form { display:flex; flex-direction:column; gap:18px; }
    .form-section { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; }
    .form-section h3 { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:14px; }
    .form-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
    .form-field { display:flex; flex-direction:column; gap:6px; }
    .form-field.full { grid-column:1 / -1; }
    .form-field label { font-size:12px; color:var(--text-soft); font-weight:500; }
    .form-field input, .form-field textarea, .form-field select {
      background:var(--surface); border:1px solid var(--border); border-radius:8px;
      padding:9px 12px; color:var(--text); font-size:14px; font-family:inherit; width:100%;
    }
    .form-field input:focus, .form-field textarea:focus, .form-field select:focus {
      outline:none; border-color:var(--accent);
    }
    .form-field textarea { min-height:80px; resize:vertical; }
    .form-field .hint { font-size:11px; color:var(--muted); margin-top:2px; }
    .form-field-row { display:flex; gap:8px; align-items:center; }
    .form-field-row input { flex:1; }

    .color-picker { display:flex; gap:8px; align-items:center; }
    .color-picker input[type="color"] { width:42px; height:42px; padding:0; border:1px solid var(--border); border-radius:8px; cursor:pointer; background:transparent; }
    .color-picker input[type="text"] { flex:1; font-family:monospace; }

    .image-preview { display:flex; gap:12px; align-items:center; margin-top:8px; }
    .image-preview img { width:80px; height:50px; object-fit:cover; border-radius:6px; border:1px solid var(--border); }
    .image-preview .info { font-size:12px; color:var(--text-soft); }

    .chip-input { display:flex; flex-wrap:wrap; gap:6px; padding:8px; background:var(--surface); border:1px solid var(--border); border-radius:8px; min-height:40px; align-items:center; }
    .chip-input input { background:transparent; border:none; outline:none; color:var(--text); font-size:13px; flex:1; min-width:80px; padding:4px; }
    .chip-input .chip-tag { background:var(--accent); color:#1a1a24; padding:3px 8px 3px 10px; border-radius:50px; font-size:11px; font-weight:600; display:inline-flex; align-items:center; gap:4px; }
    .chip-input .chip-tag button { background:transparent; color:#1a1a24; padding:0 4px; font-size:14px; line-height:1; }

    .preset-genre-chip {
      padding:6px 12px; border-radius:50px;
      background:var(--surface); color:var(--text-soft);
      border:1px solid var(--border);
      font-size:12px; font-weight:600;
      cursor:pointer; transition:all 0.15s;
      font-family:inherit;
    }
    .preset-genre-chip:hover { background:var(--surface-hover); color:var(--text); }
    .preset-genre-chip.checked {
      background:var(--accent); color:#1a1a24;
      border-color:var(--accent);
    }

    .day-block {
      background:var(--surface); border:1px solid var(--border); border-radius:10px;
      padding:14px; margin-bottom:10px;
    }
    .day-block-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
    .day-block-head input { flex:1; background:var(--card); border:1px solid var(--border); border-radius:6px; padding:7px 10px; color:var(--text); font-size:13px; }
    .day-block-head .day-id { width:80px !important; flex:none !important; font-family:monospace; text-align:center; }
    .stage-block {
      background:var(--card); border:1px solid var(--border); border-radius:8px;
      padding:12px; margin-bottom:8px;
    }
    .stage-block-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
    .stage-block-head input { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:6px 10px; color:var(--text); font-size:13px; }
    .stage-block-head .stage-name { flex:1; }
    .stage-block-head .stage-cls  { width:120px; font-family:monospace; }
    .stage-color-row { display:flex; align-items:center; gap:6px; margin-bottom:8px; padding:6px; background:var(--surface); border-radius:6px; }
    .stage-color-label { font-size:11px; color:var(--text-soft); margin-right:4px; }
    .stage-color-preview { width:30px; height:24px; border-radius:5px; border:1px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; }
    .stage-color-preview-text { font-size:9px; line-height:1; padding:2px 5px; border-radius:3px; font-weight:700; }
    .preset-btn {
      width:22px; height:22px; border-radius:4px; cursor:pointer;
      border:2px solid transparent; flex-shrink:0;
      transition:transform 0.1s;
    }
    .preset-btn:hover { transform:scale(1.15); border-color:var(--text); }
    .preset-btn.active { border-color:var(--accent); box-shadow:0 0 0 2px var(--bg); }
    .stage-color-row input[type="color"] { width:30px; height:24px; padding:0; border:1px solid var(--border); border-radius:4px; cursor:pointer; background:transparent; }
    .stage-color-row .more-toggle { font-size:11px; color:var(--text-soft); background:var(--card); border:1px solid var(--border); border-radius:5px; padding:3px 8px; }
    .set-row { display:flex; gap:6px; margin-bottom:5px; }
    .set-row input { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:6px 10px; color:var(--text); font-size:12px; }
    .set-row .set-time-in   { width:120px; font-family:monospace; }
    .set-row .set-artist-in { flex:1; }
    .icon-btn-mini { width:30px; height:30px; border-radius:6px; background:var(--surface); color:var(--text-soft); display:inline-flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
    .icon-btn-mini:hover { background:var(--surface-hover); color:var(--text); }
    .icon-btn-mini.danger { color:#ff8080; }
    .icon-btn-mini.danger:hover { background:rgba(255,80,80,0.15); }
    .add-btn { padding:8px 14px; border-radius:8px; background:rgba(184,157,255,0.12); color:var(--accent); font-size:13px; font-weight:600; border:1px dashed rgba(184,157,255,0.4); width:100%; }
    .add-btn:hover { background:rgba(184,157,255,0.18); }

    .upload-zone {
      padding:24px; border:2px dashed var(--border); border-radius:var(--radius);
      text-align:center; cursor:pointer; transition:all 0.15s; background:var(--surface);
    }
    .upload-zone:hover { border-color:var(--accent); background:var(--surface-hover); }
    .upload-zone.dragover { border-color:var(--accent); background:rgba(184,157,255,0.08); }
    .upload-zone svg { width:32px; height:32px; color:var(--muted); margin-bottom:6px; }
    .upload-zone .title { font-size:14px; font-weight:600; color:var(--text); margin-bottom:4px; }
    .upload-zone .hint  { font-size:12px; color:var(--text-soft); }

    .form-actions {
      display:flex; gap:10px; padding:18px;
      background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
      position:sticky; bottom:0;
    }
    .form-actions .btn { flex:1; }
    @media (max-width: 820px) { .form-actions { bottom:80px; } }

    .download-banner {
      background:rgba(0,220,120,0.1); border:1px solid rgba(0,220,120,0.3);
      border-radius:var(--radius); padding:18px; margin-bottom:14px;
    }
    .download-banner h4 { font-size:14px; color:var(--going); margin-bottom:8px; }
    .download-banner p { font-size:13px; color:var(--text-soft); margin-bottom:12px; }
    .download-banner .dl-buttons { display:flex; gap:8px; flex-wrap:wrap; }
    .download-banner .dl-buttons .btn { display:inline-flex; align-items:center; gap:6px; }

    /* ── PROFIEL PAGINA ── */
    .profile-header { display:flex; align-items:center; gap:20px; padding:20px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:14px; }
    .avatar-edit { position:relative; width:96px; height:96px; flex-shrink:0; cursor:pointer; }
    .avatar-edit-img { width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:28px; color:var(--text); overflow:hidden; }
    .avatar-edit-img img { width:100%; height:100%; object-fit:cover; }
    .avatar-edit-overlay {
      position:absolute; inset:0; border-radius:50%;
      background:rgba(0,0,0,0.55); color:white;
      display:flex; align-items:center; justify-content:center;
      opacity:0; transition:opacity 0.15s; font-size:12px; font-weight:600;
    }
    .avatar-edit:hover .avatar-edit-overlay { opacity:1; }
    .avatar-edit svg { width:22px; height:22px; }
    .profile-header-info { flex:1; min-width:0; }
    .profile-header-info h2 { font-family:var(--font-display); font-size:32px; letter-spacing:1px; color:var(--text); line-height:1; margin-bottom:4px; }
    .profile-header-info p { font-size:13px; color:var(--text-soft); }

    .genre-grid { display:grid; gap:8px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
    .genre-chip {
      padding:10px 14px; border-radius:10px;
      background:var(--surface); color:var(--text-soft);
      border:1px solid var(--border);
      font-size:13px; font-weight:600;
      cursor:pointer; transition:all 0.15s;
      display:flex; align-items:center; gap:8px;
      user-select:none;
    }
    .genre-chip:hover { background:var(--surface-hover); color:var(--text); }
    .genre-chip.checked {
      background:rgba(184,157,255,0.15);
      border-color:var(--accent); color:var(--accent);
    }
    .genre-chip .check {
      width:18px; height:18px; border-radius:5px;
      border:1.5px solid var(--border);
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0; transition:all 0.15s; font-size:11px;
    }
    .genre-chip.checked .check {
      background:var(--accent); border-color:var(--accent);
      color:#1a1a24;
    }

    /* ── Profile: privacy toggle ── */
    .privacy-toggle {
      background:transparent; border:none; padding:0; margin:0 0 0 6px;
      width:22px; height:22px; flex-shrink:0;
      display:inline-flex; align-items:center; justify-content:center;
      vertical-align:middle; cursor:pointer;
      color:var(--muted);
      border-radius:6px;
      transition:color 0.15s, background 0.15s;
    }
    .privacy-toggle svg { width:15px; height:15px; display:block; }
    .privacy-toggle:hover {
      color:var(--text-soft);
      background:var(--surface-hover);
    }
    .privacy-toggle.is-hidden { color:var(--accent); }
    .privacy-toggle.is-hidden:hover {
      color:var(--accent-strong);
      background:var(--accent-soft);
    }

    .privacy-legend {
      display:flex; gap:18px; flex-wrap:wrap;
      font-size:11px; color:var(--muted);
      margin:-4px 0 14px; padding:10px 14px;
      background:var(--surface); border-radius:10px;
      border:1px solid var(--border);
    }
    .privacy-legend > span { display:inline-flex; align-items:center; gap:6px; }
    .privacy-legend-icon {
      display:inline-flex; align-items:center; justify-content:center;
      width:14px; height:14px; color:var(--muted);
    }
    .privacy-legend-icon svg { width:13px; height:13px; }
    .privacy-legend-icon.is-hidden { color:var(--accent); }

    /* ── Profile: vibe tags ── */
    .vibe-grid {
      display:flex; flex-wrap:wrap; gap:8px;
    }
    .vibe-chip {
      padding:8px 14px; border-radius:999px;
      background:var(--surface); color:var(--text-soft);
      border:1px solid var(--border);
      font-size:13px; font-weight:600;
      cursor:pointer; transition:all 0.15s;
      display:inline-flex; align-items:center; gap:6px;
      user-select:none;
    }
    .vibe-chip:hover { background:var(--surface-hover); color:var(--text); }
    .vibe-chip.checked {
      background:rgba(184,157,255,0.18);
      border-color:var(--accent);
      color:var(--accent);
    }
    .vibe-chip .emoji { font-size:15px; }

    /* ── Profile: top 3 artists ── */
    .top-artists-grid {
      display:flex; flex-direction:column; gap:8px;
    }
    .top-artist-row {
      display:flex; align-items:center; gap:10px;
    }
    .top-artist-num {
      width:24px; height:24px; flex-shrink:0;
      border-radius:50%;
      background:rgba(184,157,255,0.18); color:var(--accent);
      display:flex; align-items:center; justify-content:center;
      font-size:11px; font-weight:700;
    }
    .top-artist-row input { flex:1; }

    /* ── Profile: first festival ever (jaar + naam) ── */
    .first-fest-row {
      display:flex; gap:10px; align-items:stretch;
    }

    /* Match badge op homepage cards */
    .match-badge {
      position:absolute; top:12px; left:12px; z-index:2;
      background:var(--gradient-accent); color:#fff;
      padding:5px 11px; border-radius:var(--radius-full);
      font-size:10px; font-weight:700; text-transform:uppercase;
      letter-spacing:0.06em;
      display:inline-flex; align-items:center; gap:4px;
      box-shadow:0 4px 12px rgba(139,92,246,0.35);
    }

    /* Countdown label tussen titel en meta */
    .countdown-label {
      display:inline-flex; align-items:center; gap:5px;
      font-size:11px; font-weight:700; padding:4px 10px;
      border-radius:var(--radius-full); align-self:flex-start;
      text-transform:uppercase; letter-spacing:0.05em;
      border:1px solid transparent;
    }
    .countdown-label.soon {
      background:rgba(255,77,109,0.13); color:#ff7088;
      border-color:rgba(255,77,109,0.25);
    }
    .countdown-label.upcoming {
      background:var(--accent-soft); color:var(--accent);
      border-color:rgba(184,157,255,0.25);
    }
    .countdown-label.live {
      background:rgba(0,220,120,0.18); color:var(--going);
      border-color:rgba(0,220,120,0.35);
      animation:pulse-live 1.6s ease-in-out infinite;
    }
    .countdown-label.past { background:var(--surface); color:var(--muted); }
    @keyframes pulse-live { 0%,100% { opacity:1 } 50% { opacity:0.55 } }
    @keyframes fade-in-up {
      from { opacity:0; transform:translateY(8px); }
      to { opacity:1; transform:translateY(0); }
    }
    @keyframes shimmer {
      0% { background-position:-200% 0; }
      100% { background-position:200% 0; }
    }

    /* ── SKELETON LOADERS ── */
    .skel {
      background:linear-gradient(90deg,
        var(--surface) 0%,
        var(--surface-hover) 50%,
        var(--surface) 100%);
      background-size:200% 100%;
      animation:shimmer 1.4s linear infinite;
      border-radius:var(--radius-sm);
    }
    .skel-card {
      background:var(--card); border:1px solid var(--border);
      border-radius:var(--radius-lg); overflow:hidden;
      display:flex; flex-direction:column;
    }
    .skel-card .skel-img { width:100%; aspect-ratio:16/10; border-radius:0; }
    .skel-card .skel-body { padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
    .skel-card .skel-line { height:14px; }
    .skel-card .skel-line.lg { height:18px; width:70%; }
    .skel-card .skel-line.sm { height:11px; width:40%; }
    .skel-card .skel-tags { display:flex; gap:6px; margin-top:auto; padding-top:8px; }
    .skel-card .skel-tag { height:18px; width:60px; border-radius:var(--radius-full); }
    /* Apply entry animation to grid items, with stagger via nth-child */
    .grid > * {
      animation:fade-in-up var(--dur-slow) var(--ease-out) backwards;
    }
    .grid > *:nth-child(1) { animation-delay:0.02s; }
    .grid > *:nth-child(2) { animation-delay:0.06s; }
    .grid > *:nth-child(3) { animation-delay:0.1s; }
    .grid > *:nth-child(4) { animation-delay:0.14s; }
    .grid > *:nth-child(5) { animation-delay:0.18s; }
    .grid > *:nth-child(6) { animation-delay:0.22s; }
    .grid > *:nth-child(7) { animation-delay:0.26s; }
    .grid > *:nth-child(8) { animation-delay:0.3s; }
    .grid > *:nth-child(n+9) { animation-delay:0.34s; }
    /* Respect user motion preference */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation:none !important; transition:none !important; }
    }

    /* Crew badge in sidebar — avatar tonen */
    .crew-badge-avatar {
      width:28px; height:28px; border-radius:50%; overflow:hidden;
      flex-shrink:0; background:var(--surface);
      display:flex; align-items:center; justify-content:center;
      font-size:11px; font-weight:700; color:var(--text);
    }
    .crew-badge-avatar img { width:100%; height:100%; object-fit:cover; }

    /* Mini avatar fix for image */
    .mini-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

    /* ── CONFLICT CHECKER ── */
    .set-btn.conflict {
      border:1px solid rgba(255,77,109,0.5) !important;
      box-shadow:inset 0 0 0 1px rgba(255,77,109,0.3);
    }
    .set-btn.conflict::after {
      content:'⚠'; position:absolute; right:14px; top:8px;
      color:#ff4d6d; font-size:14px; font-weight:700;
    }
    .set-btn.conflict.selected::before { right:34px; }

    /* Live nav indicator — de rode dot in de SVG-icon is de indicator zelf.
       Wanneer een live festival actief is pulseert die dot, anders blijft 'ie statisch. */
    .nav-live svg circle:last-child { color:#ff4d6d; transform-origin:center; }
    .nav-live.has-live svg circle:last-child {
      animation:pulse-live 1.4s ease-in-out infinite;
    }

    /* ── LIVE TAB ── */
    .live-hero {
      background:linear-gradient(135deg, rgba(255,77,109,0.15), rgba(184,157,255,0.1));
      border:1px solid rgba(255,77,109,0.3); border-radius:var(--radius-lg);
      padding:24px; margin-bottom:20px;
    }
    .live-festival { font-family:var(--font-display); font-size:30px; letter-spacing:2px; color:var(--text); margin-bottom:4px; }
    .live-day { font-size:13px; color:var(--text-soft); margin-bottom:14px; }
    .live-now-label {
      display:inline-flex; align-items:center; gap:6px;
      background:rgba(255,77,109,0.2); color:#ff4d6d;
      padding:5px 12px; border-radius:50px;
      font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px;
      margin-bottom:12px;
    }
    .live-now-label .pulse { width:8px; height:8px; border-radius:50%; background:#ff4d6d; animation:pulse-live 1.4s infinite; }
    .live-section { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:14px; }
    .live-section h3 { font-size:12px; text-transform:uppercase; letter-spacing:0.6px; color:var(--muted); margin-bottom:14px; }
    .live-set { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--border); }
    .live-set:last-child { border-bottom:none; }
    .live-set-time { font-family:monospace; font-size:13px; font-weight:700; color:var(--accent); min-width:120px; }
    .live-set-info { flex:1; min-width:0; }
    .live-set-artist { font-weight:700; font-size:15px; line-height:1.2; }
    .live-set-stage  { font-size:12px; color:var(--text-soft); margin-top:2px; }
    .live-set-countdown {
      font-size:11px; color:var(--accent); font-weight:700;
      background:rgba(184,157,255,0.12); padding:3px 8px; border-radius:50px;
    }
    .live-set-countdown.urgent { color:#ff4d6d; background:rgba(255,77,109,0.12); }
    .live-empty { text-align:center; padding:40px 20px; color:var(--muted); }

    /* ── LIVE TIMETABLE (vertical stages, horizontal time) ── */
    .live-tt2-wrap {
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius-lg);
      overflow:hidden;
      position:relative;
    }
    /* Sticky tijd-as bovenin */
    .live-tt2-timebar-wrap {
      position:sticky; top:0; z-index:5;
      background:var(--bg-elev);
      border-bottom:1px solid var(--border);
      box-shadow:0 4px 12px rgba(0,0,0,0.18);
      overflow-x:auto; overflow-y:hidden;
      scrollbar-width:none;
    }
    .live-tt2-timebar-wrap::-webkit-scrollbar { display:none; }
    .live-tt2-timebar {
      position:relative;
      height:30px;
    }
    .live-tt2-time-label {
      position:absolute; top:0;
      font-family:monospace;
      font-size:11px; font-weight:700;
      color:var(--text-soft);
      transform:translateX(-50%);
      padding-top:8px;
    }

    /* Stage stack */
    .live-tt2-stages {
      max-height:78vh;
      overflow-y:auto;
      overflow-x:hidden;
      scroll-behavior:smooth;
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    .live-tt2-stages::-webkit-scrollbar { display:none; width:0; height:0; }
    .live-tt2-stage {
      border-bottom:1px solid var(--border);
    }
    .live-tt2-stage:last-child { border-bottom:none; }
    .live-tt2-stage-header {
      padding:14px 16px 6px;
      font-family:var(--font-display);
      font-size:14px; font-weight:700;
      letter-spacing:1.5px; text-transform:uppercase;
      color:var(--accent-strong);
      background:rgba(139,92,246,0.05);
      border-bottom:1px solid rgba(139,92,246,0.1);
    }
    .live-tt2-stage-scroll {
      overflow-x:auto;
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    .live-tt2-stage-scroll::-webkit-scrollbar { display:none; width:0; height:0; }
    .live-tt2-stage-row {
      position:relative;
      height:78px;
    }
    .live-tt2-hour-line {
      position:absolute; top:0; bottom:0;
      width:1px;
      background:rgba(255,255,255,0.05);
      pointer-events:none;
    }
    .live-tt2-hour-line.major {
      background:rgba(255,255,255,0.09);
    }

    /* Set blocks (horizontal) */
    .live-tt2-set {
      position:absolute; top:8px; bottom:8px;
      background:var(--card-elev);
      border:1px solid var(--border-strong);
      border-radius:8px;
      padding:7px 10px 6px;
      overflow:hidden;
      cursor:pointer;
      transition:all var(--dur) var(--ease-out);
      display:flex; flex-direction:column;
      justify-content:center;
      gap:2px;
    }
    .live-tt2-set:hover {
      background:var(--surface-hover);
      transform:translateY(-1px);
      box-shadow:0 4px 12px rgba(0,0,0,0.25);
      z-index:2;
    }
    .live-tt2-set.mine {
      background:linear-gradient(135deg, rgba(139,92,246,0.28), rgba(139,92,246,0.12));
      border-color:var(--accent);
      box-shadow:0 2px 10px rgba(139,92,246,0.18);
    }
    .live-tt2-set.now {
      border-color:#ff4d6d;
      box-shadow:0 0 0 1px rgba(255,77,109,0.55), 0 4px 14px rgba(255,77,109,0.18);
    }
    .live-tt2-set.now.mine {
      background:linear-gradient(135deg, rgba(255,77,109,0.25), rgba(139,92,246,0.2));
    }
    .live-tt2-set-artist {
      font-size:12px; font-weight:700;
      line-height:1.2;
      overflow:hidden; text-overflow:ellipsis;
      white-space:nowrap;
      color:var(--text);
    }
    .live-tt2-set-time {
      font-family:monospace;
      font-size:10px; font-weight:600;
      color:var(--text-soft);
      letter-spacing:0.4px;
    }
    .live-tt2-set-mine-badge {
      position:absolute; top:5px; right:6px;
      width:14px; height:14px;
      background:var(--accent);
      border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-size:9px; color:white;
      z-index:2;
    }

    /* Crew-count badge: hoeveel andere crew-leden gaan ook? */
    .live-tt2-set-crew-badge {
      position:absolute; bottom:4px; right:5px;
      background:rgba(184,157,255,0.18);
      border:1px solid rgba(184,157,255,0.4);
      color:var(--accent);
      font-size:9px; font-weight:700;
      padding:1px 6px; border-radius:50px;
      letter-spacing:-0.01em;
      pointer-events:none;
      z-index:2;
      backdrop-filter:blur(4px);
      white-space:nowrap;
    }
    .live-tt2-set.mine .live-tt2-set-crew-badge {
      /* Ster overlapt rechtsboven, badge zit rechtsonder — beide zichtbaar */
      background:rgba(255,255,255,0.92);
      border-color:rgba(184,157,255,0.5);
      color:var(--accent);
    }

    /* Populair: 50%+ van crew gaat → paarse glow voor "must-see" gevoel */
    .live-tt2-set.popular {
      box-shadow:0 0 0 1.5px rgba(184,157,255,0.55), 0 0 16px rgba(184,157,255,0.25);
      animation:popular-glow 2.4s ease-in-out infinite;
    }
    @keyframes popular-glow {
      0%, 100% { box-shadow:0 0 0 1.5px rgba(184,157,255,0.45), 0 0 14px rgba(184,157,255,0.2); }
      50%      { box-shadow:0 0 0 2px   rgba(184,157,255,0.7),  0 0 22px rgba(184,157,255,0.4); }
    }

    /* Live set popup */
    .live-popup-modal { user-select:none; }
    .live-popup-header { text-align:center; margin-bottom:14px; }
    .live-popup-pct {
      color:var(--accent); font-weight:700; font-size:12px;
      margin-left:4px;
    }
    .live-popup-members {
      max-height:340px; overflow-y:auto;
      display:flex; flex-direction:column; gap:6px;
      margin-top:10px;
      padding-right:4px;
    }
    .live-popup-member {
      display:flex; align-items:center; gap:10px;
      padding:8px 10px;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:10px;
    }
    .live-popup-member.me {
      background:var(--accent-soft);
      border-color:rgba(184,157,255,0.4);
    }
    .live-popup-member-avatar {
      width:32px; height:32px; border-radius:50%;
      overflow:hidden; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      color:#1a1a24; font-weight:700; font-size:11px;
    }
    .live-popup-member-avatar img { width:100%; height:100%; object-fit:cover; }
    .live-popup-member-name {
      flex:1; font-size:14px; font-weight:500;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .live-popup-me-tag {
      font-size:10px; font-weight:700;
      background:var(--accent); color:#1a1a24;
      padding:1px 7px; border-radius:50px;
      margin-left:4px;
      text-transform:uppercase; letter-spacing:0.04em;
    }
    .live-popup-empty {
      text-align:center; padding:24px 10px;
      color:var(--text-soft); font-size:13px;
    }

    /* Verticale NU-lijn — appendt per stage-row */
    .live-tt2-now {
      position:absolute; top:0; bottom:0;
      width:2px; background:#ff4d6d;
      box-shadow:0 0 12px rgba(255,77,109,0.7);
      z-index:3;
      pointer-events:none;
      animation:nowPulse 2s ease-in-out infinite;
    }
    .live-tt2-now-label-row {
      position:absolute; top:6px; left:0; z-index:4;
      transform:translateX(-50%);
      background:#ff4d6d; color:white;
      font-size:10px; font-weight:700;
      padding:2px 8px; border-radius:50px;
      letter-spacing:0.6px;
      box-shadow:0 2px 8px rgba(255,77,109,0.5);
      white-space:nowrap;
      pointer-events:none;
    }
    @keyframes nowPulse {
      0%, 100% { box-shadow:0 0 12px rgba(255,77,109,0.5); }
      50%      { box-shadow:0 0 18px rgba(255,77,109,1); }
    }

    /* Klein hintje voor selecteren */
    .live-tt2-hint {
      padding:8px 16px;
      font-size:11px; color:var(--muted);
      background:rgba(255,255,255,0.02);
      border-bottom:1px solid var(--border);
      text-align:center;
    }

    .live-hint {
      margin-top:6px;
      font-size:12px;
      color:var(--muted);
    }

    @media (max-width:700px) {
      .live-tt2-set-artist { font-size:11px; }
      .live-tt2-stage-header { font-size:13px; }
    }

    /* ── CONFLICT BUNDLE in Live tab ── */
    .live-bundle {
      display:flex; align-items:stretch; gap:14px;
      padding:12px 0; border-bottom:1px solid var(--border);
    }
    .live-bundle:last-child { border-bottom:none; }
    .live-bundle-time {
      min-width:120px; padding-top:2px;
      display:flex; flex-direction:column; gap:4px;
    }
    .live-bundle-time .time {
      font-family:monospace; font-size:13px; font-weight:700;
      color:var(--accent);
    }
    .live-bundle-time .conflict-tag {
      display:inline-flex; align-items:center; gap:4px;
      font-size:9px; font-weight:700; color:#ff4d6d;
      background:rgba(255,77,109,0.15); border:1px solid rgba(255,77,109,0.35);
      padding:2px 7px; border-radius:50px; text-transform:uppercase; letter-spacing:0.5px;
      width:fit-content;
    }
    .live-bundle-time .parallel-tag {
      display:inline-flex; align-items:center; gap:4px;
      font-size:9px; font-weight:700; color:var(--text-soft);
      background:var(--surface); border:1px solid var(--border);
      padding:2px 7px; border-radius:50px; text-transform:uppercase; letter-spacing:0.5px;
      width:fit-content;
    }
    .set-time-inline {
      font-family:monospace; font-size:10px;
      opacity:0.7;
    }
    .live-bundle-time .countdown {
      font-size:11px; font-weight:700; color:var(--accent);
      background:rgba(184,157,255,0.12); padding:3px 8px; border-radius:50px;
      width:fit-content;
    }
    .live-bundle-time .countdown.urgent { color:#ff4d6d; background:rgba(255,77,109,0.12); }
    .live-bundle-sets { flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; }
    .live-bundle-set {
      padding:8px 12px; border-radius:8px;
      background:var(--surface); border:1px solid var(--border);
      display:flex; justify-content:space-between; align-items:center; gap:10px;
    }
    .live-bundle.conflict .live-bundle-set {
      /* Niet-eigen sets in een conflict-bundle blijven gewoon neutraal —
         alleen de eigen overlappende sets worden visueel gemarkeerd (mine-styling). */
    }
    .live-bundle-set-info { min-width:0; flex:1; }
    .live-bundle-set-artist { font-weight:700; font-size:14px; line-height:1.2; }
    .live-bundle-set-stage { font-size:11px; color:var(--text-soft); margin-top:2px; }
    .live-bundle-set-time { font-size:10px; color:var(--muted); font-family:monospace; flex-shrink:0; }

    /* ── "IN MY PLANNER" highlight (Live tab) ── */
    .live-set.mine,
    .live-bundle-set.mine {
      background:linear-gradient(90deg, rgba(0,220,120,0.10), rgba(0,196,180,0.04));
      border-left:3px solid var(--going, #2ecc71);
      padding-left:11px;
    }
    .live-set.mine { padding:12px 12px 12px 11px; border-radius:8px; border-bottom:1px solid var(--border); }
    .live-bundle.conflict .live-bundle-set.mine {
      /* In een echt conflict (2+ eigen sets overlappen) krijgen jouw sets
         een rode rand-tint om aan te geven dat je moet kiezen. */
      background:linear-gradient(90deg, rgba(0,220,120,0.10), rgba(255,77,109,0.10));
      border-color:rgba(255,77,109,0.35);
      border-left:3px solid #ff4d6d;
    }
    .mine-badge {
      display:inline-flex; align-items:center; gap:4px;
      font-size:10px; font-weight:700;
      color:var(--going, #2ecc71);
      background:rgba(0,220,120,0.15);
      border:1px solid rgba(0,220,120,0.3);
      padding:2px 8px; border-radius:50px;
      letter-spacing:0.04em;
      margin-top:4px;
    }
    .live-bundle-set .mine-badge { margin-top:3px; font-size:9px; padding:1px 6px; }

    /* ── FESTIVAL MAP ── */
    .festival-map-wrap { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px; margin-bottom:18px; }
    .festival-map-wrap h3 { font-size:13px; font-weight:700; color:var(--text-soft); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
    .festival-map-img { width:100%; max-height:500px; object-fit:contain; border-radius:8px; cursor:zoom-in; background:var(--surface); }
    .map-zoom-overlay {
      position:fixed; inset:0; background:rgba(0,0,0,0.93); z-index:200;
      display:none; align-items:center; justify-content:center; padding:20px;
    }
    .map-zoom-overlay.active { display:flex; }
    .map-zoom-overlay img { max-width:100%; max-height:100%; object-fit:contain; }
    .map-zoom-overlay .close { position:fixed; top:20px; right:24px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.15); color:white; font-size:24px; }

    /* ── PASPOORT ── */
    .passport-stats { display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); margin-bottom:24px; }
    .stat-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; text-align:center; }
    .stat-card .value { font-family:var(--font-display); font-size:38px; color:var(--accent); line-height:1; margin-bottom:6px; letter-spacing:1px; }
    .stat-card .label { font-size:12px; color:var(--text-soft); text-transform:uppercase; letter-spacing:0.5px; }

    .badges-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
    .badge-card {
      background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 12px;
      text-align:center; transition:all 0.2s;
    }
    .badge-card.earned { border-color:rgba(184,157,255,0.4); background:linear-gradient(135deg, rgba(184,157,255,0.08), var(--card)); }
    .badge-card .icon { font-size:32px; margin-bottom:8px; opacity:0.4; }
    .badge-card.earned .icon { opacity:1; }
    .badge-card .name { font-size:13px; font-weight:700; margin-bottom:4px; }
    .badge-card .desc { font-size:11px; color:var(--text-soft); line-height:1.3; }
    .badge-card.locked .name { color:var(--muted); }

    /* ── KOSTEN-TRACKER ── */
    .cost-section { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:14px; }
    .cost-section h3 { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:14px; }

    /* ── CREW TOOLBAR (boven crew-pagina) ── */
    .crew-toolbar {
      display:flex; align-items:center; gap:6px;
      padding:6px;
      background:var(--card); border:1px solid var(--border);
      border-radius:var(--radius-lg);
      margin-bottom:20px;
      flex-wrap:wrap;
    }
    .crew-tab {
      display:inline-flex; align-items:center; gap:8px;
      padding:9px 16px; border-radius:var(--radius);
      background:transparent; color:var(--text-soft);
      font-size:13.5px; font-weight:600; cursor:pointer;
      border:1px solid transparent;
      transition:all var(--dur) var(--ease-out);
    }
    .crew-tab .ico { font-size:15px; }
    .crew-tab:hover { background:var(--surface); color:var(--text); }
    .crew-tab.active {
      background:var(--accent-soft); color:var(--accent);
      border-color:rgba(184,157,255,0.25);
    }
    .crew-toolbar-spacer { flex:1; min-width:8px; }

    /* Deelbare crew-code in Settings: groter formaat, mooier */
    .crew-code-share {
      display:flex; align-items:center; justify-content:space-between;
      gap:12px;
      padding:14px 18px;
      background:linear-gradient(135deg, rgba(184,157,255,0.08), rgba(139,92,246,0.04));
      border:1px dashed rgba(184,157,255,0.4);
      border-radius:var(--radius);
      cursor:pointer;
      transition:all var(--dur);
    }
    .crew-code-share:hover {
      background:linear-gradient(135deg, rgba(184,157,255,0.12), rgba(139,92,246,0.07));
      border-color:var(--accent);
      transform:translateY(-1px);
    }
    .crew-code-share:active { transform:scale(0.99); }
    .crew-code-share-num {
      font-family:monospace; font-size:26px; font-weight:700;
      letter-spacing:6px;
      color:var(--accent);
      flex:1;
      text-align:center;
    }
    .crew-code-share-copy {
      display:inline-flex; align-items:center; gap:6px;
      font-size:12px; font-weight:600;
      color:var(--text-soft);
      flex-shrink:0;
    }
    .crew-code-share:hover .crew-code-share-copy { color:var(--accent); }
    @media (max-width:480px) {
      .crew-code-share-num { font-size:22px; letter-spacing:4px; }
    }

    .crew-code-pill {
      display:inline-flex; align-items:center; gap:10px;
      padding:8px 14px; border-radius:var(--radius-full);
      background:var(--surface); border:1px solid var(--border-strong);
      cursor:pointer; transition:all var(--dur);
      color:var(--text-soft);
    }
    .crew-code-pill:hover { background:var(--surface-hover); color:var(--text); border-color:var(--accent); }
    .crew-code-pill-label {
      font-size:10px; font-weight:700;
      color:var(--muted); letter-spacing:0.1em;
    }
    .crew-code-pill-num {
      font-family:monospace; font-size:15px; font-weight:700;
      color:var(--text); letter-spacing:3px;
    }

    /* Festival-selector chips in bingo/packing tab */
    .crew-fest-selector {
      display:flex; gap:8px; margin-bottom:18px;
      overflow-x:auto; padding-bottom:4px;
      scrollbar-width:thin;
    }
    .crew-fest-chip {
      display:inline-flex; align-items:center; gap:8px;
      padding:6px 14px 6px 6px;
      border-radius:var(--radius-full);
      background:var(--card); border:1px solid var(--border);
      color:var(--text-soft); cursor:pointer;
      font-size:13px; font-weight:600;
      transition:all var(--dur);
      flex-shrink:0;
    }
    .crew-fest-chip img {
      width:28px; height:28px; border-radius:50%; object-fit:cover;
      flex-shrink:0;
    }
    .crew-fest-chip .thumb-fallback {
      width:28px; height:28px; border-radius:50%;
      background:var(--surface); display:flex;
      align-items:center; justify-content:center; font-size:14px;
      flex-shrink:0;
    }
    .crew-fest-chip:hover { background:var(--surface-hover); color:var(--text); }
    .crew-fest-chip.active {
      background:var(--accent-soft); color:var(--accent);
      border-color:rgba(184,157,255,0.35);
    }

    @media (max-width:600px) {
      .crew-tab { padding:8px 11px; font-size:12.5px; }
      .crew-tab .ico { display:none; }
      .crew-code-pill { padding:6px 10px; }
      .crew-code-pill-num { font-size:13px; letter-spacing:2px; }
    }
    .bingo-section {
      background:var(--card); border:1px solid var(--border);
      border-radius:var(--radius-lg); padding:18px;
      margin-bottom:18px;
    }
    .bingo-head {
      display:flex; align-items:center; justify-content:space-between;
      gap:10px; margin-bottom:14px; flex-wrap:wrap;
    }
    .bingo-title {
      font-family:var(--font-display); font-size:18px; font-weight:700;
      letter-spacing:-0.01em;
    }
    .bingo-progress-text { font-size:12px; color:var(--text-soft); margin-top:2px; }
    .bingo-leaderboard {
      display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;
      padding:10px; background:var(--surface);
      border-radius:var(--radius); border:1px solid var(--border);
    }
    .bingo-leader {
      display:flex; align-items:center; gap:6px;
      padding:3px 10px 3px 3px;
      background:var(--card); border-radius:var(--radius-full);
      border:1px solid var(--border);
      font-size:12px;
    }
    .bingo-leader .mini-avatar {
      width:22px; height:22px; margin:0;
      font-size:9px; border:none;
    }
    .bingo-leader .name { font-weight:600; }
    .bingo-leader .count { color:var(--accent); font-weight:700; }
    .bingo-leader.first { background:linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,180,0,0.08)); border-color:rgba(255,215,0,0.4); }
    .bingo-leader.first .count { color:#ffb547; }

    /* ── PACKING TEMPLATES MODAL ── */
    .template-row {
      display:flex; align-items:center; gap:10px;
      padding:10px 12px;
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius);
      transition:background var(--dur);
    }
    .template-row:hover { background:var(--surface-hover); }
    .template-info { flex:1; min-width:0; }
    .template-name {
      font-size:14px; font-weight:600;
      letter-spacing:-0.005em;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .template-meta {
      font-size:11px; color:var(--text-soft);
      margin-top:2px;
    }
    .template-actions { display:flex; gap:6px; flex-shrink:0; }
    .template-delete {
      padding:6px 10px !important;
      color:var(--muted) !important;
      font-size:12px !important;
    }
    .template-delete:hover {
      color:var(--not) !important;
      background:rgba(255,94,108,0.1) !important;
    }

    /* ── BINGO BOARD (5x5 grid) ── */
    .bingo-board {
      display:grid;
      grid-template-columns:repeat(5, 1fr);
      gap:6px;
      margin-top:8px;
    }
    .bingo-cell {
      position:relative;
      aspect-ratio:1/1;
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius-sm);
      padding:6px 4px;
      cursor:pointer; text-align:center;
      display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      gap:2px;
      transition:all var(--dur) var(--ease-out);
      overflow:hidden;
      font-family:inherit; color:var(--text);
    }
    .bingo-cell:hover { background:var(--surface-hover); transform:scale(1.03); z-index:2; }
    .bingo-cell.empty {
      background:transparent;
      border:1px dashed var(--border);
      color:var(--muted);
    }
    .bingo-cell.empty:hover {
      background:var(--accent-soft);
      border-color:var(--accent);
      color:var(--accent);
    }
    .bingo-cell-plus { font-size:24px; font-weight:300; opacity:0.6; }
    .bingo-cell.done {
      background:linear-gradient(135deg, rgba(0,220,120,0.15), rgba(0,196,180,0.08));
      border-color:rgba(0,220,120,0.45);
    }
    .bingo-cell.done.in-bingo {
      background:linear-gradient(135deg, rgba(255,215,0,0.25), rgba(255,180,0,0.15));
      border-color:rgba(255,215,0,0.6);
      box-shadow:0 0 0 1px rgba(255,215,0,0.4), 0 4px 16px rgba(255,180,0,0.25);
      animation:bingo-glow 1.6s ease-in-out infinite;
    }
    @keyframes bingo-glow {
      0%,100% { box-shadow:0 0 0 1px rgba(255,215,0,0.4), 0 4px 16px rgba(255,180,0,0.25); }
      50% { box-shadow:0 0 0 1px rgba(255,215,0,0.7), 0 4px 24px rgba(255,180,0,0.5); }
    }
    .bingo-cell.free {
      background:linear-gradient(135deg, rgba(184,157,255,0.18), rgba(139,92,246,0.1));
      border-color:rgba(184,157,255,0.4);
      cursor:default;
    }
    .bingo-cell.free:hover { transform:none; }
    .bingo-cell-text {
      font-size:11px; font-weight:600;
      line-height:1.2;
      letter-spacing:-0.005em;
      overflow:hidden;
      display:-webkit-box;
      -webkit-line-clamp:4;
      -webkit-box-orient:vertical;
    }
    .bingo-cell.done .bingo-cell-text {
      text-decoration:line-through;
      color:var(--text-soft);
    }
    .bingo-cell-avatars {
      display:flex; gap:0; margin-top:2px;
    }
    .bingo-cell-avatars .mini-avatar {
      width:14px; height:14px; font-size:6px;
      margin-right:-3px; border:1.5px solid var(--card);
    }
    .bingo-cell .bingo-remove {
      position:absolute; top:2px; right:2px;
      width:18px; height:18px;
      padding:0; font-size:10px;
      border-radius:50%;
      background:rgba(0,0,0,0.4); color:#fff;
      display:flex; align-items:center; justify-content:center;
      opacity:0;
      transition:opacity var(--dur);
      border:none; cursor:pointer;
    }
    .bingo-cell:hover .bingo-remove { opacity:0.8; }
    .bingo-cell .bingo-remove:hover { opacity:1; background:var(--not); }

    /* FREE-cell label (klein bovenin) */
    .bingo-cell-free-label {
      font-size:9px; font-weight:700;
      text-transform:uppercase; letter-spacing:0.06em;
      color:var(--accent);
      line-height:1;
    }

    .bingo-hint {
      margin-top:12px;
      font-size:12px; color:var(--text-soft);
      text-align:center;
      letter-spacing:-0.005em;
    }

    /* Confetti when completing bingo item */
    @keyframes confetti-pop {
      0% { transform:scale(0.8); opacity:0; }
      40% { transform:scale(1.15); opacity:1; }
      100% { transform:scale(1); opacity:1; }
    }
    .bingo-cell.just-done { animation:confetti-pop 0.4s var(--ease-bounce); }

    /* Op mobile: kleinere font sizes en padding */
    @media (max-width:600px) {
      .bingo-board { gap:4px; }
      .bingo-cell { padding:4px 2px; }
      .bingo-cell-text { font-size:10px; -webkit-line-clamp:3; }
      .bingo-cell-free-label { font-size:7px; }
    }
    .packing-section {
      background:var(--card); border:1px solid var(--border);
      border-radius:var(--radius-lg); padding:18px;
      margin-bottom:18px;
    }
    .packing-head {
      display:flex; align-items:center; justify-content:space-between;
      gap:10px; margin-bottom:10px;
    }
    .packing-title {
      font-family:var(--font-display); font-size:18px; font-weight:700;
      letter-spacing:-0.01em;
    }
    .packing-progress-text { font-size:12px; color:var(--text-soft); margin-top:2px; }
    .packing-bar {
      height:6px; background:var(--surface);
      border-radius:var(--radius-full);
      overflow:hidden; margin-bottom:16px;
    }
    .packing-bar-fill {
      height:100%; background:var(--gradient-accent);
      border-radius:var(--radius-full);
      transition:width var(--dur-slow) var(--ease-out);
    }
    .packing-categories {
      display:grid; gap:14px;
      grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    }
    .packing-category {
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius); padding:12px;
    }
    .packing-category h4 {
      font-size:13px; font-weight:700; margin-bottom:8px;
      letter-spacing:-0.005em;
    }
    .packing-items { display:flex; flex-direction:column; gap:4px; }
    .packing-item {
      display:flex; align-items:center; gap:10px;
      width:100%; padding:7px 10px;
      background:transparent; border:1px solid transparent;
      border-radius:var(--radius-sm); cursor:pointer;
      font-size:13px; color:var(--text);
      text-align:left;
      transition:all var(--dur);
    }
    .packing-item:hover { background:var(--surface-hover); }
    .packing-item.checked { color:var(--text-soft); }
    .packing-item.checked .label { text-decoration:line-through; }
    .packing-item .checkbox {
      width:18px; height:18px; border-radius:4px;
      border:1.5px solid var(--border-strong);
      display:flex; align-items:center; justify-content:center;
      font-size:11px; font-weight:700; flex-shrink:0;
      color:#fff;
    }
    .packing-item.checked .checkbox {
      background:var(--going); border-color:var(--going);
    }
    .packing-item .label { flex:1; }
    .packing-item-row { display:flex; align-items:center; gap:4px; }
    .packing-remove {
      background:none; border:none; color:var(--muted);
      cursor:pointer; padding:4px 8px; font-size:12px;
      transition:color var(--dur);
    }
    .packing-remove:hover { color:var(--not); }
    .packing-add {
      margin-top:8px; padding-top:8px;
      border-top:1px dashed var(--border);
    }
    .packing-add input {
      width:100%; background:transparent; border:none;
      color:var(--text-soft); font-size:12.5px;
      padding:4px 8px; outline:none;
    }
    .packing-add input:focus { color:var(--text); }
    .packing-add input::placeholder { color:var(--muted); }
    .suggestion-bundle {
      background:linear-gradient(135deg, rgba(184,157,255,0.06), rgba(139,92,246,0.04));
      border:1px solid rgba(184,157,255,0.2);
      border-radius:var(--radius-lg);
      padding:14px 16px;
      margin-bottom:18px;
    }
    .suggestion-bundle-head {
      display:flex; align-items:center; gap:8px; margin-bottom:12px;
    }
    .suggestion-bundle-title {
      font-size:12px; font-weight:700; color:var(--accent);
      text-transform:uppercase; letter-spacing:0.08em;
    }
    .suggestion-bundle-dismiss {
      margin-left:auto; background:none; border:none;
      color:var(--muted); cursor:pointer; padding:4px 8px;
      font-size:11px; font-weight:600; letter-spacing:0.05em;
      text-transform:uppercase;
    }
    .suggestion-bundle-dismiss:hover { color:var(--text); }
    .suggestion-item {
      display:flex; gap:10px; align-items:center;
      padding:10px 12px; background:var(--surface);
      border-radius:var(--radius-sm);
      margin-bottom:6px;
      border:1px solid var(--border);
      transition:all var(--dur);
    }
    .suggestion-item:hover { background:var(--surface-hover); }
    .suggestion-item:last-child { margin-bottom:0; }
    .suggestion-item .icon {
      width:36px; height:36px; border-radius:50%;
      background:var(--accent-soft); color:var(--accent);
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0; font-size:18px;
    }
    .suggestion-item .body { flex:1; min-width:0; }
    .suggestion-item .title {
      font-size:13px; font-weight:600; line-height:1.25;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .suggestion-item .reason {
      font-size:11px; color:var(--text-soft); margin-top:2px;
      letter-spacing:-0.005em;
    }
    .suggestion-item .action {
      flex-shrink:0; padding:6px 12px;
      border-radius:var(--radius-full);
      background:var(--accent); color:#fff;
      font-size:12px; font-weight:600;
      border:none; cursor:pointer;
      transition:all var(--dur);
    }
    .suggestion-item .action:hover { filter:brightness(1.1); transform:translateY(-1px); }
    .suggestion-item .action.ghost {
      background:var(--surface); color:var(--text-soft);
      border:1px solid var(--border);
    }
    .suggestion-item .avatars {
      display:flex; flex-shrink:0;
    }
    .suggestion-item .avatars .mini-avatar {
      width:20px; height:20px; margin-right:-6px;
      border:2px solid var(--card);
      font-size:8px;
    }
    .suggestion-item .avatars .mini-avatar:last-child { margin-right:8px; }
    .live-panel {
      background:linear-gradient(135deg, rgba(0,220,120,0.08), rgba(0,196,180,0.06));
      border:1px solid rgba(0,220,120,0.25);
      border-radius:var(--radius-lg);
      padding:16px;
      margin-bottom:20px;
    }
    .live-panel-head {
      display:flex; align-items:center; gap:10px;
      margin-bottom:14px;
    }
    .live-pulse-dot {
      width:8px; height:8px; border-radius:50%;
      background:var(--going);
      box-shadow:0 0 0 0 var(--going);
      animation:live-pulse 1.8s ease-out infinite;
    }
    @keyframes live-pulse {
      0% { box-shadow:0 0 0 0 rgba(0,220,120,0.6); }
      70% { box-shadow:0 0 0 10px rgba(0,220,120,0); }
      100% { box-shadow:0 0 0 0 rgba(0,220,120,0); }
    }
    .live-panel-title {
      font-family:var(--font-display); font-size:14px; font-weight:700;
      letter-spacing:-0.005em; color:var(--going);
      text-transform:uppercase; letter-spacing:0.06em;
    }
    .live-actions {
      display:flex; gap:8px; flex-wrap:wrap;
      margin-bottom:12px;
    }
    .live-action-btn {
      flex:1; min-width:140px;
      padding:10px 14px; border-radius:var(--radius-sm);
      background:var(--surface); color:var(--text);
      border:1px solid var(--border-strong);
      font-size:13px; font-weight:600;
      display:inline-flex; align-items:center; gap:8px; justify-content:center;
      transition:all var(--dur) var(--ease-out);
    }
    .live-action-btn:hover { background:var(--surface-hover); transform:translateY(-1px); }
    .live-action-btn svg { width:16px; height:16px; }

    /* Check-in & meetup chips */
    .live-item {
      display:flex; align-items:flex-start; gap:10px;
      padding:10px 12px; background:var(--surface);
      border-radius:var(--radius-sm);
      margin-bottom:6px;
      border:1px solid var(--border);
    }
    .live-item:last-child { margin-bottom:0; }
    .live-item .avatar {
      width:30px; height:30px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-size:11px; font-weight:700; color:#000;
      flex-shrink:0; overflow:hidden;
    }
    .live-item .avatar img { width:100%; height:100%; object-fit:cover; }
    .live-item .body { flex:1; min-width:0; }
    .live-item .who { font-size:13px; font-weight:600; }
    .live-item .where { font-size:12px; color:var(--text-soft); margin-top:1px; }
    .live-item .when { font-size:10px; color:var(--muted); margin-left:auto; flex-shrink:0; }
    .live-item.is-me { border-color:var(--accent); background:var(--accent-soft); }
    .live-item .remove-btn {
      background:none; border:none; color:var(--muted);
      cursor:pointer; padding:4px; font-size:14px;
    }
    .live-item .remove-btn:hover { color:var(--not); }

    .live-section-title {
      font-size:11px; font-weight:600; color:var(--text-soft);
      text-transform:uppercase; letter-spacing:0.06em;
      margin:14px 0 8px;
    }
    .live-section-title:first-child { margin-top:0; }

    /* Meet-up specifiek */
    .meetup-item {
      background:linear-gradient(135deg, rgba(255,181,71,0.1), rgba(255,181,71,0.04));
      border-color:rgba(255,181,71,0.3);
    }
    .meetup-item .countdown {
      font-size:11px; font-weight:700; color:var(--maybe);
      padding:2px 8px; border-radius:var(--radius-full);
      background:rgba(255,181,71,0.15);
    }
    .meetup-item .countdown.urgent {
      color:#ff7088; background:rgba(255,77,109,0.15);
      animation:pulse-live 1.2s ease-in-out infinite;
    }
    .meetup-item.expired { opacity:0.5; }

    /* Quick location chips in meetup modal */
    .quick-loc-chip {
      padding:5px 11px; border-radius:var(--radius-full);
      background:var(--surface); border:1px solid var(--border);
      color:var(--text-soft); font-size:12px; font-weight:500;
      cursor:pointer; transition:all var(--dur);
    }
    .quick-loc-chip:hover { background:var(--surface-hover); color:var(--text); }

    /* Minutes chips in meetup modal */
    .meetup-min-chip {
      flex:1; min-width:60px; padding:8px 12px;
      border-radius:var(--radius-sm); background:var(--surface);
      border:1px solid var(--border); color:var(--text-soft);
      font-size:13px; font-weight:600; cursor:pointer;
      transition:all var(--dur);
    }
    .meetup-min-chip:hover { background:var(--surface-hover); color:var(--text); }
    .meetup-min-chip.active {
      background:var(--accent-soft); color:var(--accent);
      border-color:rgba(184,157,255,0.4);
    }

    /* Compacte planner extras (bell + dropdown) */
    .extras-row {
      display:flex; align-items:center; gap:10px;
      margin-bottom:14px; flex-wrap:wrap;
    }
    .bell-btn {
      width:42px; height:42px; flex-shrink:0;
      border-radius:var(--radius-full);
      background:var(--card); border:1px solid var(--border);
      color:var(--text-soft); cursor:pointer;
      display:inline-flex; align-items:center; justify-content:center;
      transition:all var(--dur) var(--ease-out);
    }
    .bell-btn:hover { background:var(--card-hover); color:var(--text); }
    .bell-btn svg { width:18px; height:18px; }
    .bell-btn.on {
      background:var(--maybe); color:#3d2400; border-color:transparent;
      box-shadow:0 4px 14px var(--maybe-glow);
    }
    .bell-btn.on:hover { background:var(--maybe); filter:brightness(1.05); }
    .bell-info { flex:1; min-width:160px; }
    .bell-info-title { font-size:13px; font-weight:600; margin-bottom:2px; }
    .bell-info-desc { font-size:11px; color:var(--text-soft); }
    .cost-grid { display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); margin-bottom:14px; }
    .cost-item { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px; }
    .cost-item label { display:block; font-size:11px; color:var(--text-soft); margin-bottom:4px; font-weight:600; }
    .cost-item .input-wrap { display:flex; align-items:center; gap:4px; }
    .cost-item .input-wrap span { color:var(--text-soft); font-size:13px; }
    .cost-item input { flex:1; background:transparent; border:none; color:var(--text); font-size:15px; font-weight:700; padding:0; outline:none; min-width:0; width:100%; }
    .cost-total {
      background:linear-gradient(135deg, rgba(184,157,255,0.15), rgba(139,92,246,0.1));
      border:1px solid rgba(184,157,255,0.3);
      border-radius:8px; padding:14px; display:flex; align-items:center; justify-content:space-between;
    }
    .cost-total .label { font-size:13px; color:var(--text-soft); font-weight:600; }
    .cost-total .value { font-family:var(--font-display); font-size:24px; color:var(--accent); letter-spacing:1px; }

    /* ── CREW CHAT (WhatsApp-style bubbles, paars thema) ── */
    .chat-wrap {
      background:var(--bg-elev);
      border:1px solid var(--border);
      border-radius:var(--radius);
      display:flex; flex-direction:column;
      height:480px; max-height:60vh; overflow:hidden;
    }
    .chat-messages {
      flex:1;
      padding:14px 12px 6px;
      overflow-y:auto;
      display:flex; flex-direction:column;
      gap:2px;
      /* subtiele paarse hint achtergrond */
      background:
        radial-gradient(circle at 20% 10%, rgba(139,92,246,0.05), transparent 60%),
        radial-gradient(circle at 80% 90%, rgba(99,102,241,0.04), transparent 60%),
        var(--bg-elev);
    }

    /* Datum-scheiding */
    .chat-date-sep {
      display:flex; justify-content:center;
      margin:14px 0 10px;
    }
    .chat-date-sep span {
      font-size:10px; font-weight:600;
      color:var(--text-soft);
      background:var(--card);
      border:1px solid var(--border);
      padding:4px 12px; border-radius:50px;
      text-transform:uppercase; letter-spacing:0.06em;
    }

    /* Row container */
    .chat-row {
      display:flex; gap:8px; align-items:flex-end;
      max-width:78%;
      margin-bottom:4px;
    }
    .chat-row.grouped { margin-bottom:2px; }
    .chat-row.theirs { align-self:flex-start; }
    .chat-row.mine   { align-self:flex-end; flex-direction:row-reverse; }

    /* Avatar slot — vaste breedte zodat berichten in een groep mooi uitlijnen */
    .chat-row-avatar-slot {
      width:28px; flex-shrink:0;
      display:flex; justify-content:center;
    }
    .chat-row-avatar {
      width:28px; height:28px;
      border-radius:50%; overflow:hidden;
      display:flex; align-items:center; justify-content:center;
      font-size:10px; font-weight:700; color:#1a1a24;
    }
    .chat-row-avatar img { width:100%; height:100%; object-fit:cover; }

    /* Bubble */
    .chat-bubble {
      position:relative;
      padding:7px 11px 5px;
      border-radius:14px;
      max-width:100%;
      word-break:break-word;
      box-shadow:0 1px 1px rgba(0,0,0,0.08);
    }
    .chat-row.theirs .chat-bubble {
      background:var(--card);
      border:1px solid var(--border);
      border-bottom-left-radius:4px;
    }
    .chat-row.mine .chat-bubble {
      background:linear-gradient(135deg, var(--accent), var(--accent-strong, var(--accent)));
      color:#1a1a24;
      border-bottom-right-radius:4px;
    }
    /* Bij gegroepeerde berichten ook de andere hoek niet verkleinen */
    .chat-row.theirs.grouped .chat-bubble { border-bottom-left-radius:14px; }
    .chat-row.mine.grouped   .chat-bubble { border-bottom-right-radius:14px; }

    .chat-bubble-author {
      font-size:11px; font-weight:700;
      margin-bottom:2px;
      line-height:1.2;
    }
    .chat-bubble-text {
      font-size:13px;
      line-height:1.4;
      white-space:pre-wrap;
    }
    .chat-bubble-time {
      font-size:10px;
      opacity:0.55;
      margin-top:3px;
      text-align:right;
      line-height:1;
    }
    .chat-row.mine .chat-bubble-time {
      color:rgba(26,26,36,0.6);
      opacity:1;
    }

    /* Empty state */
    .chat-empty {
      flex:1;
      display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      gap:8px; padding:30px;
    }
    .chat-empty span { font-size:36px; opacity:0.4; }
    .chat-empty p {
      font-size:12px; color:var(--muted);
      text-align:center; margin:0;
    }

    /* Input */
    .chat-input-wrap {
      display:flex; gap:8px;
      padding:10px;
      border-top:1px solid var(--border);
      background:var(--card);
      align-items:center;
    }
    .chat-input-wrap input {
      flex:1;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:50px;
      padding:10px 16px;
      color:var(--text);
      font-size:13px;
      font-family:inherit;
    }
    .chat-input-wrap input:focus {
      outline:none;
      border-color:var(--accent);
    }
    .chat-input-wrap input::placeholder {
      color:var(--muted);
    }
    .chat-send-btn {
      width:38px; height:38px;
      border-radius:50%;
      background:var(--accent);
      color:#1a1a24;
      border:none;
      cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      transition:transform var(--dur) var(--ease-out), background var(--dur);
      flex-shrink:0;
    }
    .chat-send-btn svg { width:18px; height:18px; }
    .chat-send-btn:hover { transform:scale(1.05); background:var(--accent-strong, var(--accent)); }
    .chat-send-btn:active { transform:scale(0.95); }

    .chat-disabled-notice {
      background:rgba(255,181,71,0.1);
      border:1px solid rgba(255,181,71,0.3);
      color:var(--maybe);
      padding:10px; border-radius:8px;
      font-size:12px; text-align:center; margin-top:10px;
    }

    /* Custom scrollbar voor chat */
    .chat-messages::-webkit-scrollbar { width:5px; }
    .chat-messages::-webkit-scrollbar-track { background:transparent; }
    .chat-messages::-webkit-scrollbar-thumb {
      background:rgba(255,255,255,0.06);
      border-radius:50px;
    }
    .chat-messages:hover::-webkit-scrollbar-thumb {
      background:rgba(255,255,255,0.15);
    }

    /* ── POLLS ── */
    .poll { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px; margin-bottom:10px; }
    .poll h4 { font-size:14px; font-weight:700; margin-bottom:4px; }
    .poll-meta { font-size:11px; color:var(--text-soft); margin-bottom:10px; }
    .poll-option {
      position:relative; background:var(--surface); border:1px solid var(--border);
      border-radius:8px; padding:10px 12px; margin-bottom:6px; cursor:pointer;
      transition:all 0.15s; overflow:hidden;
    }
    .poll-option:hover { background:var(--surface-hover); }
    .poll-option.voted { background:rgba(184,157,255,0.08); border-color:var(--accent); }
    .poll-option-fill { position:absolute; left:0; top:0; bottom:0; background:rgba(184,157,255,0.15); transition:width 0.3s; pointer-events:none; }
    .poll-option-content { position:relative; display:flex; justify-content:space-between; align-items:center; }
    .poll-option-label { font-size:13px; font-weight:600; }
    .poll-option-votes { font-size:11px; color:var(--text-soft); }
    .new-poll-btn { padding:10px 14px; background:rgba(184,157,255,0.12); color:var(--accent); border:1px dashed rgba(184,157,255,0.4); border-radius:8px; font-size:13px; font-weight:600; width:100%; }
    .new-poll-btn:hover { background:rgba(184,157,255,0.18); }

    /* Notification settings */
    .notif-toggle { display:flex; align-items:center; gap:10px; padding:10px; background:var(--surface); border-radius:8px; cursor:pointer; }
    .notif-toggle input { accent-color:var(--accent); }
    .notif-toggle label { flex:1; font-size:13px; cursor:pointer; }

    /* Map preview in admin */
    .map-upload-preview { display:flex; gap:12px; align-items:center; margin-top:8px; }
    .map-upload-preview img { width:120px; height:80px; object-fit:cover; border-radius:6px; border:1px solid var(--border); }

    /* ── CUSTOM DROPDOWN ── */
    .cdd {
      position:relative; display:inline-block;
      font-family:inherit; font-size:13px;
      user-select:none;
    }

    /* ── NUMBER STEPPER ── */
    /* Verberg native spinners overal */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance:none; margin:0;
    }
    input[type="number"] { -moz-appearance:textfield; appearance:textfield; }

    .stepper {
      display:flex; align-items:stretch;
      background:var(--surface); border:1px solid var(--border);
      border-radius:8px; overflow:hidden;
      transition:border-color 0.15s;
    }
    .stepper:focus-within { border-color:var(--accent); }
    .stepper-btn {
      width:32px; flex-shrink:0;
      background:transparent; border:none; color:var(--text-soft);
      font-size:16px; font-weight:600; cursor:pointer;
      transition:all 0.1s;
      display:flex; align-items:center; justify-content:center;
      font-family:inherit; padding:0; line-height:1;
    }
    .stepper-btn:hover { background:rgba(184,157,255,0.12); color:var(--accent); }
    .stepper-btn:active { background:rgba(184,157,255,0.22); transform:scale(0.92); }
    .stepper-btn.minus { border-right:1px solid var(--border); }
    .stepper-btn.plus { border-left:1px solid var(--border); }
    .stepper-input {
      flex:1; min-width:0;
      background:transparent; border:none;
      text-align:center; color:var(--text);
      font-size:14px; font-weight:600; padding:8px 4px;
      font-family:inherit; outline:none;
    }
    .stepper-input::placeholder { color:var(--muted); font-weight:400; }
    /* Compact variant voor kosten-tracker */
    .stepper.compact .stepper-btn { width:28px; font-size:14px; }
    .stepper.compact .stepper-input { padding:6px 4px; font-size:13px; }
    .cdd.full { display:block; width:100%; }
    .cdd-toggle {
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      background:var(--surface); border:1px solid var(--border); border-radius:8px;
      padding:9px 12px; color:var(--text);
      cursor:pointer; transition:all 0.15s;
      min-width:90px; width:100%; font-size:13px; font-family:inherit; font-weight:500;
    }
    .cdd-toggle:hover { border-color:rgba(184,157,255,0.4); background:var(--surface-hover); }
    .cdd.open .cdd-toggle { border-color:var(--accent); background:var(--surface-hover); }
    .cdd-toggle .arrow {
      width:14px; height:14px; flex-shrink:0;
      transition:transform 0.2s; opacity:0.6;
    }
    .cdd.open .cdd-toggle .arrow { transform:rotate(180deg); opacity:1; }
    .cdd-toggle .value { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
    .cdd-menu {
      position:absolute; top:calc(100% + 4px); left:0; right:0;
      background:var(--card); border:1px solid var(--border); border-radius:8px;
      box-shadow:0 8px 32px rgba(0,0,0,0.5);
      z-index:50;
      max-height:280px; overflow-y:auto;
      opacity:0; transform:translateY(-6px) scale(0.97);
      pointer-events:none; transition:all 0.15s;
      transform-origin:top center;
    }
    .cdd.open .cdd-menu { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
    .cdd-menu.drop-up { top:auto; bottom:calc(100% + 4px); transform-origin:bottom center; }
    .cdd-option {
      padding:9px 12px; cursor:pointer; transition:background 0.1s;
      font-size:13px; color:var(--text);
      display:flex; align-items:center; gap:8px;
    }
    .cdd-option:hover { background:var(--surface-hover); }
    .cdd-option.selected { background:rgba(184,157,255,0.15); color:var(--accent); font-weight:600; }
    .cdd-option.selected::before { content:'✓'; color:var(--accent); margin-right:-4px; }
    .cdd-option:not(.selected)::before { content:''; width:12px; margin-right:-4px; }