/* ═══════════════════════════════════════════════════════════
   SetterStart — Community Design System
   Kleur: teal #0d9488 (logo) · Karakter: warm, energiek, echt
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cabinet+Grotesk:wght@400;500;700;800&family=Instrument+Sans:wght@400;500;600&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
    /* Kern: teal palet */
    --teal-50:  #f0fdfa;
    --teal-100: #ccfbf1;
    --teal-200: #99f6e4;
    --teal-300: #5eead4;
    --teal-400: #2dd4bf;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;   /* logo kleur */
    --teal-700: #0f766e;
    --teal-800: #115e59;
    --teal-900: #134e4a;

    /* Neutrals: warm grijs */
    --gray-50:  #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Semantisch */
    --accent:        var(--teal-600);
    --accent-hover:  var(--teal-700);
    --accent-light:  var(--teal-50);
    --accent-medium: var(--teal-100);
    --accent-ink:    #ffffff;

    --bg:          #f8fafa;
    --bg-warm:     #f0f7f6;
    --bg-white:    #ffffff;
    --bg-card:     #ffffff;
    --bg-sidebar:  var(--gray-900);

    --text:        var(--gray-900);
    --text-2:      var(--gray-700);
    --text-muted:  var(--gray-500);
    --text-hint:   var(--gray-400);
    --border:      var(--gray-200);
    --border-focus: var(--teal-400);

    /* Typografie */
    --font-display: 'Cabinet Grotesk', 'Segoe UI', system-ui, sans-serif;
    --font:         'Instrument Sans', 'Segoe UI', system-ui, sans-serif;

    /* Ruimte */
    --space:    1.5rem;
    --space-sm: 0.75rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;

    /* Rounding */
    --radius-sm: 8px;
    --radius:    14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    /* Schaduwen */
    --shadow-xs: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-sm: 0 2px 10px rgba(13,148,136,0.06);
    --shadow:    0 4px 24px rgba(13,148,136,0.10);
    --shadow-lg: 0 12px 40px rgba(13,148,136,0.15);
    --shadow-pop:0 20px 60px rgba(13,148,136,0.18);

    /* Module */
    --module-teal-fill:        rgba(13,148,136,0.07);
    --module-teal-fill-strong: rgba(13,148,136,0.13);
    --module-teal-edge:        rgba(13,148,136,0.22);
    --module-slate-fill:       rgba(71,85,105,0.05);
    --module-row-a: #ffffff;
    --module-row-b: #f4f7f8;
}

/* ── RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 15px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img { max-width: 100%; height: auto; }
a { color: var(--accent); }

.main-content { flex: 1; }

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--space);
}

/* ── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse-ring {
    0%   { transform: scale(0.9); opacity: 0.6; }
    70%  { transform: scale(1.4); opacity: 0; }
    100% { transform: scale(1.4); opacity: 0; }
}
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.animate-in    { animation: fadeInUp 0.5s ease-out forwards; }
.card-animate  { animation: fadeInUp 0.5s ease-out both; }
.reveal        { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible{ opacity: 1; transform: translateY(0); }

/* ── HEADER ─────────────────────────────────────────────── */
.site-header {
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 4px 20px rgba(0,0,0,0.04);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);
    height: 64px;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    gap: 0.6rem;
}
.logo-img {
    height: 38px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}
.logo-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--accent);
    letter-spacing: -0.03em;
}
.logo:hover .logo-text { color: var(--accent-hover); }

.main-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.main-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-2);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}
.main-nav a:hover {
    color: var(--accent);
    background: var(--teal-50);
}
.main-nav a.active {
    color: var(--accent);
    background: var(--teal-50);
    font-weight: 600;
}
.nav-icon { display: inline-flex; align-items: center; opacity: 0.65; transition: opacity 0.15s; }
.nav-icon svg { flex-shrink: 0; vertical-align: middle; }
.main-nav a:hover .nav-icon,
.main-nav a.active .nav-icon { opacity: 1; }

.nav-admin-key {
    margin-left: 0.25rem;
    padding: 0.4rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
}
.nav-admin-key:hover { color: var(--accent); background: var(--teal-50); }
.nav-admin-key .nav-icon { width: 20px; height: 20px; }
.nav-admin-key .nav-icon svg { width: 100%; height: 100%; }

/* Pill CTA in nav */
.nav-cta-pill {
    background: var(--accent) !important;
    color: white !important;
    border-radius: 100px !important;
    padding: 0.45rem 1rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    transition: background 0.2s, transform 0.15s !important;
}
.nav-cta-pill:hover {
    background: var(--accent-hover) !important;
    color: white !important;
    transform: translateY(-1px);
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font);
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    white-space: nowrap;
}
.btn-primary {
    background: var(--accent);
    color: white;
    box-shadow: 0 2px 12px rgba(13,148,136,0.3);
}
.btn-primary:hover {
    background: var(--accent-hover);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(13,148,136,0.38);
}
.btn-secondary {
    background: var(--bg-white);
    color: var(--text);
    border: 1.5px solid var(--border);
}
.btn-secondary:hover {
    background: var(--teal-50);
    border-color: var(--teal-300);
    color: var(--accent);
}
.btn-ghost {
    background: transparent;
    color: var(--accent);
    border: 1.5px solid var(--teal-300);
}
.btn-ghost:hover {
    background: var(--teal-50);
    border-color: var(--accent);
}
.btn-block { width: 100%; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; border-radius: var(--radius-lg); }

/* ── FORMS ───────────────────────────────────────────────── */
.form-group { margin-bottom: var(--space); }
.form-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-2);
}
.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg-white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}
.form-control::placeholder { color: var(--text-hint); }
textarea.form-control { min-height: 120px; resize: vertical; }
.form-help {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
    display: block;
}

/* ── ALERTS ──────────────────────────────────────────────── */
.alert {
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space);
    font-size: 0.92rem;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.alert-error   { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.alert-success { background: var(--teal-50); border: 1px solid var(--teal-200); color: var(--teal-800); }
.alert-info    { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }

/* ── HERO (landingspagina) ───────────────────────────────── */
.hero {
    text-align: center;
    padding: var(--space-xl) var(--space);
    max-width: 820px;
    margin: 0 auto;
    animation: fadeInUp 0.6s ease-out;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--teal-50);
    border: 1px solid var(--teal-200);
    color: var(--teal-700);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.35rem 0.9rem;
    border-radius: 100px;
    margin-bottom: 1.5rem;
}
.hero-badge-dot {
    width: 7px; height: 7px;
    background: var(--teal-500);
    border-radius: 50%;
    animation: pulse-ring 2s ease-out infinite;
    position: relative;
}
.hero-logo {
    margin-bottom: var(--space-lg);
    display: inline-block;
}
.hero-logo-img {
    max-width: 220px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: var(--text);
    margin-bottom: 1rem;
}
.hero h1 em {
    font-style: normal;
    background: linear-gradient(135deg, var(--teal-600), var(--teal-400));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero .subtitle {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-bottom: var(--space);
    line-height: 1.6;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.hero .price {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.04em;
    margin: var(--space) 0;
}
.hero .price-note {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: var(--space-lg);
}
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin: var(--space-lg) 0;
    padding: var(--space) var(--space-lg);
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.hero-stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.03em;
}
.hero-stat span {
    font-size: 0.82rem;
    color: var(--text-muted);
}
.hero-image {
    margin: var(--space-lg) 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}
.hero-img {
    width: 100%;
    max-width: 560px;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: cover;
}

/* ── CARDS & SECTIONS ────────────────────────────────────── */
.section { padding: var(--space-xl) 0; }
.section-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: var(--space);
    color: var(--text);
    letter-spacing: -0.03em;
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space);
    box-shadow: var(--shadow-xs);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.card:hover {
    border-color: var(--teal-300);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.card h3 {
    font-family: var(--font-display);
    margin-top: 0;
    margin-bottom: 0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}

/* ── SALES SECTION ───────────────────────────────────────── */
.sales-section {
    background: var(--bg);
    animation: fadeInUp 0.5s ease-out 0.15s both;
}
.sales-section h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: var(--space);
    margin-top: 0;
    color: var(--text);
    letter-spacing: -0.03em;
    padding-bottom: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.sales-section h2::after {
    content: '';
    flex: 1;
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent);
    border-radius: 2px;
    min-width: 40px;
}
.sales-section ul { list-style: none; padding: 0; margin: 0 0 var(--space-lg); }
.sales-section ul li {
    padding: 0.6rem 0;
    padding-left: 1.75rem;
    position: relative;
    color: var(--text-2);
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.95rem;
}
.sales-section ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    background: var(--teal-50);
    border: 1px solid var(--teal-200);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 11px;
    background-repeat: no-repeat;
    background-position: center;
}

.text-muted {
    color: var(--text-muted);
}

.page-sales-home .sales-section .text-muted,
.sales-prose {
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: var(--space);
    max-width: 42rem;
}

.sales-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg);
}

.sales-list li {
    padding: 0.6rem 0;
    padding-left: 1.75rem;
    position: relative;
    color: var(--text-2);
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.95rem;
}

.sales-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: var(--teal-50);
    border: 1px solid var(--teal-200);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 11px;
    background-repeat: no-repeat;
    background-position: center;
}

.sales-trust {
    margin-bottom: var(--space-xl);
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--teal-100);
    background: linear-gradient(145deg, var(--bg-white), var(--teal-50));
}

.sales-trust-title {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}

.sales-quote {
    margin: 0 0 1rem;
    padding: 0 0 0 1rem;
    border-left: 4px solid var(--teal-400);
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--text-2);
}

.sales-quote footer {
    margin-top: 0.65rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.sales-trust-foot {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
}

.sales-faq {
    margin: 0 0 var(--space-lg);
    max-width: 40rem;
}

.sales-faq dt {
    font-weight: 700;
    color: var(--text);
    margin-top: 1rem;
    font-size: 0.95rem;
}

.sales-faq dt:first-child {
    margin-top: 0;
}

.sales-faq dd {
    margin: 0.35rem 0 0;
    padding: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.hero-trust-note {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Landingspagina — premium hero + community */
.page-sales-home .hero-shell {
    background: linear-gradient(180deg, var(--teal-50) 0%, var(--bg) 42%, var(--bg) 100%);
    border-bottom: 1px solid var(--teal-100);
}

.page-sales-home .hero--setterstart {
    max-width: 720px;
    padding-bottom: var(--space-xl);
}

.page-sales-home .hero--setterstart h1 em {
    font-style: normal;
    background: linear-gradient(135deg, var(--teal-600), var(--teal-400));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-hook {
    font-size: 1.12rem !important;
    color: var(--text-2) !important;
    font-weight: 500;
}

.hero-lead {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-2);
    max-width: 38rem;
    margin: 0 auto 1.5rem;
    text-align: left;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.75rem;
}

.hero-btn-primary {
    box-shadow: 0 4px 24px rgba(13, 148, 136, 0.35);
}

.hero-micro-trust {
    margin: 0 0 1.5rem;
    font-size: 0.8rem;
    color: var(--gray-500);
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

.hero-stats--light {
    background: var(--bg-white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.hero-price-block {
    margin-top: var(--space-lg);
    padding: 1.5rem 1.25rem;
    background: var(--bg-white);
    border: 1.5px solid var(--teal-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

.hero-price-block .price {
    margin-top: 0;
}

.hero-price-block .price-note {
    margin-bottom: 1rem;
}

.sales-section-intro {
    margin-bottom: var(--space-xl);
    padding: 1.5rem 1.5rem 1.6rem;
    border-color: var(--teal-200);
    background: linear-gradient(135deg, #ffffff 0%, var(--teal-50) 100%);
}

.sales-section-intro-title {
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}

.sales-section-intro-text {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--text-2);
}

.sales-section-intro-text em {
    color: var(--teal-800);
    font-style: normal;
    font-weight: 600;
}

.sales-prose-wide {
    max-width: 42rem;
}

.sales-community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0 1.5rem;
}

.sales-community-card {
    margin: 0;
    padding: 1.2rem 1.25rem 1.3rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-white);
    box-shadow: var(--shadow-xs);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.sales-community-card:hover {
    border-color: rgba(13, 148, 136, 0.35);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.sales-community-icon {
    display: block;
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.sales-community-card h3 {
    margin: 0 0 0.45rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
}

.sales-community-card p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.58;
    color: var(--text-muted);
}

.sales-community-closer {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-2);
    max-width: 42rem;
    margin: 0 0 var(--space-xl);
    padding: 1rem 1.15rem;
    background: var(--teal-50);
    border: 1px solid var(--teal-100);
    border-radius: var(--radius);
}

.cta-pretitle {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--teal-800);
    margin: 0 0 0.35rem;
}

.cta-box-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1rem;
}

.cta-box--final {
    margin-top: var(--space-xl);
}

.cta-legal-hint {
    margin-top: 1rem;
    font-size: 0.82rem;
}

.cta-legal-hint a {
    color: var(--teal-700);
    font-weight: 600;
}

.sales-module-card {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.sales-module-card:hover {
    border-color: rgba(13, 148, 136, 0.35);
    box-shadow: var(--shadow-sm);
}

/* Juridische pagina's */
.container-narrow {
    max-width: 40rem;
}

.legal-page h1 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.legal-lead {
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: var(--space-lg);
}

.legal-page h2 {
    font-size: 1.05rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.legal-muted {
    margin-top: var(--space-xl);
    font-size: 0.9rem;
    color: var(--text-muted);
}

.footer-legal {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.footer-legal a {
    color: var(--teal-700);
    font-weight: 600;
}

/* Dashboard onboarding */
.dashboard-onboarding {
    margin-bottom: var(--space-lg);
    padding: 1.2rem 1.35rem;
    border: 1px solid var(--teal-200);
    background: linear-gradient(135deg, var(--bg-white) 0%, var(--teal-50) 100%);
}

.dashboard-onboarding-title {
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
}

.dashboard-onboarding-steps {
    margin: 0 0 1rem;
    padding-left: 1.2rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.dashboard-onboarding-steps li {
    margin-bottom: 0.5rem;
}

.dashboard-onboarding-steps a {
    font-weight: 600;
    color: var(--teal-700);
}

.dashboard-onboarding-dismiss {
    margin: 0;
}

.auth-page-hint {
    text-align: center;
    margin-bottom: 1rem;
}

.auth-alert-block .auth-alert-actions {
    margin-top: 0.75rem;
}

/* ── MODULE LIST ─────────────────────────────────────────── */
.module-list { display: grid; gap: 0.75rem; }
.module-list .card {
    display: flex;
    align-items: flex-start;
    gap: var(--space);
    padding: 1.1rem 1.25rem;
    margin-bottom: 0;
    border-radius: var(--radius);
}
.module-list .card .num {
    flex-shrink: 0;
    width: 36px; height: 36px;
    background: var(--teal-50);
    color: var(--accent);
    border: 1.5px solid var(--teal-200);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.88rem;
    transition: all 0.25s ease;
}
.module-list .card:hover .num {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: scale(1.05);
}
.course-images {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space);
    justify-content: center;
    margin: var(--space-lg) 0;
}
.course-img {
    width: 100%;
    max-width: 300px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    object-fit: cover;
}

/* ── CTA BOX ─────────────────────────────────────────────── */
.cta-box {
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
    background: linear-gradient(135deg, var(--teal-50) 0%, var(--bg-white) 100%);
    border: 1.5px solid var(--teal-200);
    border-radius: var(--radius-xl);
    margin-top: var(--space-xl);
    box-shadow: var(--shadow);
    animation: fadeInUp 0.5s ease-out 0.2s both;
    position: relative;
    overflow: hidden;
}
.cta-box::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(13,148,136,0.1) 0%, transparent 70%);
    pointer-events: none;
}
.cta-box .price {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.04em;
}
.cta-box .btn { margin-top: 0.75rem; }

/* ── AUTH PAGES ──────────────────────────────────────────── */
.auth-page {
    max-width: 420px;
    margin: var(--space-xl) auto;
    padding: 0 var(--space);
}
.auth-page h1 {
    font-family: var(--font-display);
    text-align: center;
    margin-bottom: var(--space-lg);
    font-size: 1.5rem;
    font-weight: 800;
}
.auth-page .card { padding: var(--space-lg); }
.auth-page .footer-link { text-align: center; margin-top: var(--space); }
.auth-page .footer-link a { color: var(--accent); text-decoration: none; font-weight: 500; }
.auth-page .footer-link a:hover { text-decoration: underline; }

/* ── DASHBOARD LAYOUT ────────────────────────────────────── */
/* See "PREMIUM SAAS DASHBOARD REDESIGN" block at end of file */

/* ── DASHBOARD WELCOME ───────────────────────────────────── */
.dashboard-welcome {
    margin-bottom: var(--space-lg);
    padding: var(--space-lg) 1.75rem;
    background: linear-gradient(135deg, var(--teal-600) 0%, var(--teal-700) 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    color: white;
}
.dashboard-welcome::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.dashboard-welcome h1 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
    color: white;
    letter-spacing: -0.03em;
}
.dashboard-welcome p {
    color: rgba(255,255,255,0.8);
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}
.dashboard-welcome p:last-child { margin-bottom: 0; }
.dashboard-welcome a { color: var(--teal-200); text-decoration: none; font-weight: 600; }
.dashboard-welcome a:hover { color: white; }
.dashboard-welcome .welcome-intro { font-size: 1rem; line-height: 1.6; }

/* Welcome stats strip */
.welcome-stats {
    display: flex;
    gap: var(--space);
    margin-top: var(--space);
    flex-wrap: wrap;
}
.welcome-stat {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-sm);
    padding: 0.6rem 1rem;
    text-align: center;
}
.welcome-stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: white;
}
.welcome-stat span { font-size: 0.78rem; color: rgba(255,255,255,0.65); }

/* ── PROGRESS BAR ────────────────────────────────────────── */
.progress-overview {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-xs);
}
.progress-overview h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}
.progress-bar-wrap {
    height: 8px;
    background: var(--gray-100);
    border-radius: 100px;
    overflow: hidden;
    margin: 0.75rem 0;
}
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--teal-500), var(--teal-400));
    border-radius: 100px;
    transition: width 0.6s ease;
    position: relative;
}
.progress-bar-fill::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
    border-radius: 100px;
}
.progress-text { font-size: 0.88rem; color: var(--text-muted); }

/* ── MODULE CARDS (dashboard) ────────────────────────────── */
.dashboard-modules .card {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 1.1rem 1.25rem;
    margin-bottom: 0;
    border-radius: var(--radius);
    position: relative;
}
.dashboard-modules .card:hover { border-color: var(--teal-300); }
.dashboard-modules .card h3 { margin-bottom: 0.25rem; font-size: 0.95rem; }
.dashboard-modules .card p { margin: 0; color: var(--text-muted); font-size: 0.875rem; }
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

/* Module completed badge */
.module-completed-badge {
    position: absolute;
    top: 0.9rem; right: 0.9rem;
    width: 24px; height: 24px;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(13,148,136,0.3);
}

/* ── MODULE PAGE ─────────────────────────────────────────── */
.module-header { margin-bottom: var(--space-lg); }
.module-header h1 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
    letter-spacing: -0.03em;
}
.module-nav {
    display: flex;
    gap: var(--space);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* Lesboek content */
.module-content {
    margin-top: var(--space-lg);
    max-width: 70ch;
    line-height: 1.8;
    padding-bottom: 2rem;
}
.module-content h2:not(:first-of-type) {
    margin-top: 0;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(15,23,42,0.07);
}
.module-content h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--gray-900);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--teal-100);
    letter-spacing: -0.03em;
}
.module-content h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    margin-top: 1.75rem;
    margin-bottom: 0.6rem;
    color: var(--gray-800);
    padding: 0.4rem 0 0.4rem 0.85rem;
    border-left: 3px solid var(--teal-400);
    background: linear-gradient(90deg, var(--teal-50) 0%, transparent 100%);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.module-content p { margin-bottom: 1rem; color: var(--gray-700); }
.module-content img {
    width: 100%;
    border-radius: var(--radius);
    margin: var(--space-lg) 0;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
.module-content blockquote {
    margin: var(--space-lg) 0;
    padding: 1.25rem 1.35rem 1.25rem 1.5rem;
    border-left: 4px solid var(--accent);
    background: var(--teal-50);
    color: var(--gray-800);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    border: 1px solid var(--teal-100);
    border-left: 4px solid var(--accent);
}
.module-content blockquote p:last-child { margin-bottom: 0; }
.module-content ul,
.module-content ol {
    margin: 1rem 0 1.25rem;
    padding-left: 1.4rem;
    color: var(--gray-700);
}
.module-content li { margin-bottom: 0.6rem; padding-left: 0.3rem; }
.module-content ul li::marker { color: var(--accent); }
.module-content ol li::marker { color: var(--gray-500); font-weight: 600; }
.module-content strong { color: var(--gray-900); font-weight: 600; }
.module-content .tip,
.module-content .voorbeeld {
    margin: var(--space-lg) 0;
    padding: 1.2rem 1.4rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
}
.module-content .tip {
    background: var(--teal-50);
    border: 1px solid var(--teal-100);
    border-left: 4px solid var(--accent);
}
.module-content .voorbeeld {
    background: var(--gray-50);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gray-300);
}
.module-content .tip p:last-child,
.module-content .voorbeeld p:last-child { margin-bottom: 0; }
.module-content .module-dm-line {
    margin: 0.35rem 0 1rem;
    padding: 0.85rem 1rem;
    background: var(--teal-50);
    border-left: 3px solid var(--teal-300);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.95rem;
}
.module-content .module-dm-line em { font-style: normal; color: var(--gray-800); }
.module-content .module-info-caption {
    caption-side: top;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--gray-800);
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--teal-100);
}
.module-content .module-info-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: var(--space-lg) 0;
    font-size: 0.93rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--teal-100);
}
.module-content .module-info-table thead tr { background: var(--teal-600); }
.module-content .module-info-table thead th {
    padding: 0.65rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.82rem;
    color: white;
    letter-spacing: 0.04em;
}
.module-content .module-info-table tbody tr:nth-child(odd)  { background: var(--module-row-a); }
.module-content .module-info-table tbody tr:nth-child(even) { background: var(--module-row-b); }
.module-content .module-info-table tbody tr:hover { background: var(--teal-50); }
.module-content .module-info-table td {
    padding: 0.6rem 1rem;
    vertical-align: top;
    border-bottom: 1px solid var(--gray-100);
    line-height: 1.55;
    font-size: 0.9rem;
}
.module-content .module-info-table td strong { color: var(--teal-700); }
.module-content .module-info-table td:first-child {
    font-weight: 600;
    color: var(--gray-800);
    white-space: nowrap;
}

/* Geneste vergelijkingstabel binnen module-info-table */
.module-content .module-inner-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin: 0.35rem 0 0;
}
.module-content .module-inner-table th,
.module-content .module-inner-table td {
    border: 1px solid var(--gray-200);
    padding: 0.45rem 0.6rem;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}
.module-content .module-inner-table thead th {
    background: var(--teal-50);
    font-weight: 700;
    font-size: 0.74rem;
}
.module-content .module-inner-table tbody td:first-child {
    font-weight: 700;
    color: var(--teal-800);
    white-space: normal;
}
.module-content .module-inner-table tbody tr:nth-child(even) {
    background: rgba(13, 148, 136, 0.04);
}

/* ── COMMUNITY / FORUM ───────────────────────────────────── */

/* Community header */
.community-header {
    background: linear-gradient(135deg, var(--teal-600) 0%, var(--teal-800) 100%);
    padding: var(--space-lg) 0;
    color: white;
    margin-bottom: var(--space-lg);
}
.community-header h1 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 0.3rem;
}
.community-header p { color: rgba(255,255,255,0.75); font-size: 0.95rem; }

/* Online members badge */
.community-online-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.35rem 0.8rem;
    border-radius: 100px;
    margin-top: 0.75rem;
}
.online-dot {
    width: 7px; height: 7px;
    background: #4ade80;
    border-radius: 50%;
    box-shadow: 0 0 6px #4ade80;
}

/* Forum categories */
.forum-category-list { display: flex; flex-direction: column; gap: 0.5rem; }
.forum-category-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: var(--space);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    box-shadow: var(--shadow-xs);
}
.forum-category-card:hover {
    border-color: var(--teal-300);
    box-shadow: var(--shadow);
    transform: translateX(3px);
}
.forum-category-icon {
    width: 44px; height: 44px;
    background: var(--teal-50);
    border: 1.5px solid var(--teal-100);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
    transition: background 0.2s;
}
.forum-category-card:hover .forum-category-icon {
    background: var(--teal-100);
}
.forum-category-info { flex: 1; min-width: 0; }
.forum-category-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 0.2rem;
}
.forum-category-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
}
.forum-category-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: right;
    flex-shrink: 0;
}
.forum-category-count {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
    display: block;
}

/* Forum topic list */
.forum-topic-list { display: flex; flex-direction: column; }
.forum-topic-row {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--gray-100);
    text-decoration: none;
    color: inherit;
    transition: background 0.1s, padding 0.15s;
    border-radius: 0;
}
.forum-topic-row:hover {
    background: var(--teal-50);
    padding-left: 0.5rem;
}
.forum-topic-title {
    font-weight: 600;
    font-size: 0.93rem;
    display: block;
    margin-bottom: 0.2rem;
    color: var(--text);
}
.forum-topic-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.topic-tag {
    display: inline-block;
    background: var(--teal-50);
    color: var(--teal-700);
    border: 1px solid var(--teal-100);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 100px;
}
.topic-tag-hot { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.topic-tag-new { background: var(--teal-50); color: var(--teal-700); border-color: var(--teal-200); }

.forum-topic-row-with-avatar {
    display: flex;
    align-items: flex-start;
    gap: var(--space);
}
.forum-topic-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border);
}

/* Forum posts */
.forum-post {
    padding: var(--space) 0;
    border-bottom: 1px solid var(--gray-100);
}
.forum-post-topic {
    padding: var(--space-lg) 0;
    margin-bottom: var(--space);
}
.forum-post-with-avatar {
    display: flex;
    gap: var(--space);
    padding: var(--space) 0;
    border-bottom: 1px solid var(--gray-100);
}
.forum-post-avatar { flex-shrink: 0; }
.forum-post-avatar img {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}
.forum-post-topic.forum-post-with-avatar {
    padding: var(--space-lg) 0;
    margin-bottom: var(--space);
}
.forum-post-content { flex: 1; min-width: 0; }
.forum-post-author-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.forum-post-author {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0;
    color: var(--text);
}
.forum-post-date {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.forum-post-body {
    color: var(--gray-700);
    line-height: 1.65;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 0.93rem;
}
.forum-replies { margin-bottom: var(--space-lg); }
.forum-reply-form { margin-top: var(--space-lg); }

/* Author badge */
.author-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--teal-600), var(--teal-400));
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.member-badge {
    display: inline-block;
    background: var(--gray-100);
    color: var(--gray-500);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    letter-spacing: 0.04em;
}

/* Community sidebar (leaderboard / active members) */
.community-sidebar-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space);
    margin-bottom: var(--space);
    box-shadow: var(--shadow-xs);
}
.community-sidebar-card h4 {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--gray-50);
    font-size: 0.85rem;
}
.leaderboard-item:last-child { border-bottom: none; }
.leaderboard-rank {
    width: 20px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-shrink: 0;
    text-align: center;
}
.leaderboard-rank.gold   { color: #d97706; }
.leaderboard-rank.silver { color: var(--gray-400); }
.leaderboard-rank.bronze { color: #92400e; }
.leaderboard-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.leaderboard-name {
    flex: 1;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.leaderboard-score {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--accent);
}

/* ── PROFILE PAGE ─────────────────────────────────────────── */
.profile-page {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-lg);
}
.profile-avatar-section,
.profile-details-section { padding: var(--space-lg); }
.profile-avatar-preview { margin-bottom: var(--space); }
.profile-avatar-img {
    width: 100px; height: 100px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 3px solid var(--teal-200);
    box-shadow: 0 0 0 4px var(--teal-50);
}
.profile-form .form-group { margin-bottom: var(--space); }

/* ── HEADER AVATAR ───────────────────────────────────────── */
.nav-user-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--text-2);
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.nav-user-link:hover { background: var(--teal-50); color: var(--accent); }
.nav-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--teal-200);
}

/* ── ADMIN ────────────────────────────────────────────────── */
.admin .container table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.admin .container th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
    border-bottom: 2px solid var(--border);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.admin .container td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    color: var(--text-2);
}
.admin .container tr:hover td { background: var(--teal-50); }

/* ── NOTIFICATION BADGE ──────────────────────────────────── */
.notif-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    background: var(--accent);
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 100px;
    padding: 0 4px;
}

/* ── EMPTY STATE ─────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: var(--space-xl);
    color: var(--text-muted);
}
.empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space);
    opacity: 0.4;
}
.empty-state h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: 0.4rem;
}
.empty-state p { font-size: 0.9rem; margin-bottom: var(--space); }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .profile-page { grid-template-columns: 1fr; }
    .dashboard-content { padding: var(--space); }
    .forum-category-card { flex-wrap: wrap; }
}

@media (max-width: 640px) {
    .header-inner { gap: 0.5rem; }
    .main-nav a span { display: none; }
    .hero .price { font-size: 2.2rem; }
    .hero-stats { gap: 1rem; padding: var(--space-sm) var(--space); }
    .module-nav { flex-direction: column; }
    .module-nav .btn { max-width: none; }
    .admin .container th,
    .admin .container td { padding: 0.5rem 0.6rem; font-size: 0.85rem; }
    .welcome-stats { gap: 0.5rem; }
    .welcome-stat { padding: 0.5rem 0.75rem; }
}

/* ── COMMUNITY-HUB ─────────────────────────────────────────── */
.community-hub {
    max-width: 56rem;
}

.community-hub-hero {
    margin-bottom: var(--space-lg);
    padding: var(--space-lg);
    background: linear-gradient(135deg, var(--module-teal-fill) 0%, var(--module-slate-fill) 55%, rgba(255, 255, 255, 0.5) 100%);
    border-radius: var(--radius);
    border: 1px solid rgba(13, 148, 136, 0.14);
    box-shadow: var(--shadow-sm);
}

.community-hub-hero h1 {
    margin: 0 0 0.75rem;
    font-size: 1.85rem;
    letter-spacing: -0.02em;
    color: #1e3330;
}

.community-hub-lead {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text);
}

.community-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space);
    margin-bottom: var(--space-xl);
}

@media (max-width: 960px) {
    .community-pillars { grid-template-columns: 1fr; }
}

.community-pillar-card {
    display: flex;
    flex-direction: column;
    padding: 1.35rem 1.5rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.community-pillar-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(13, 148, 136, 0.25);
}

.community-pillar-card--learn { border-top: 3px solid var(--accent); }
.community-pillar-card--talk { border-top: 3px solid #5b7c9d; }
.community-pillar-card--news { border-top: 3px solid #b8860b; }

.community-pillar-icon {
    display: flex;
    margin-bottom: 0.75rem;
    color: var(--accent);
}

.community-pillar-card--talk .community-pillar-icon { color: #5b7c9d; }
.community-pillar-card--news .community-pillar-icon { color: #9a7b2d; }

.community-pillar-card h2 {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.community-pillar-card p {
    margin: 0 0 1rem;
    flex: 1;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.community-pillar-cta {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
}

.community-pillar-card--talk .community-pillar-cta { color: #4a6d8a; }
.community-pillar-card--news .community-pillar-cta { color: #8a6f28; }

.community-section {
    margin-bottom: var(--space-xl);
}

.community-section-title {
    font-size: 1.35rem;
    margin: 0 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--module-teal-edge);
    color: #243036;
}

.community-collab {
    padding: 1.25rem 1.5rem;
}

.community-collab-list {
    margin: 1rem 0;
    padding-left: 1.25rem;
    color: var(--text);
}

.community-collab-list li { margin-bottom: 0.5rem; }

.community-collab-foot {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-muted);
}

.community-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: start;
}

@media (max-width: 900px) {
    .community-two-col { grid-template-columns: 1fr; }
}

.community-news-preview,
.community-forum-preview {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.community-news-preview li,
.community-forum-preview li {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}

.community-news-preview li:last-child,
.community-forum-preview li:last-child { border-bottom: none; }

.community-news-preview-link {
    font-weight: 600;
    font-size: 1.02rem;
    text-decoration: none;
    color: var(--text);
}

.community-news-preview-link:hover { color: var(--accent); }

.community-news-preview-meta,
.community-forum-preview-meta {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.community-news-preview-excerpt {
    margin: 0.5rem 0 0;
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.community-forum-preview-title {
    font-weight: 600;
    text-decoration: none;
    color: var(--text);
}

.community-forum-preview-title:hover { color: var(--accent); }

.community-empty,
.community-news-intro {
    color: var(--text-muted);
    line-height: 1.65;
}

.community-back {
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

.community-back a { color: var(--accent); text-decoration: none; font-weight: 500; }
.community-back a:hover { text-decoration: underline; }

.community-news-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space);
}

.community-news-list-item {
    padding: 1.25rem 1.5rem;
}

.community-news-list-item h2 {
    margin: 0 0 0.35rem;
    font-size: 1.2rem;
}

.community-news-list-item h2 a {
    text-decoration: none;
    color: inherit;
}

.community-news-list-item h2 a:hover { color: var(--accent); }

.community-news-date {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.community-article {
    max-width: 48rem;
}

.community-article-header h1 {
    margin: 0 0 0.5rem;
    font-size: 1.75rem;
    letter-spacing: -0.02em;
}

.community-article-meta {
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.community-article-body {
    line-height: 1.78;
    color: var(--text);
}

.community-article-body p {
    margin: 0 0 1rem;
}

.community-missing code { font-size: 0.85em; }

/* Vastgezet nieuws (community + dashboard) */
.community-pinned-strip {
    margin-bottom: var(--space-xl);
    padding: var(--space-lg);
    background: linear-gradient(145deg, rgba(13, 148, 136, 0.11) 0%, rgba(255, 255, 255, 0.95) 55%, var(--module-slate-fill) 100%);
    border-radius: var(--radius);
    border: 1px solid rgba(13, 148, 136, 0.2);
    box-shadow: var(--shadow-sm);
}

.community-pinned-title {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e4a45;
}

.community-pinned-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space);
}

.community-pinned-card {
    padding: 1.15rem 1.25rem;
    margin: 0;
}

.community-pinned-card h3 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    line-height: 1.35;
}

.community-pinned-card h3 a {
    text-decoration: none;
    color: var(--text);
}

.community-pinned-card h3 a:hover { color: var(--accent); }

.community-pinned-date {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.community-pinned-excerpt {
    margin: 0 0 0.65rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.community-pinned-read {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.community-pinned-read:hover { text-decoration: underline; }

.dashboard-pinned-news {
    margin-bottom: var(--space-xl);
    padding: var(--space-lg);
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.08) 0%, #ffffff 40%, #f8fafc 100%);
    border-radius: var(--radius);
    border: 1px solid rgba(13, 148, 136, 0.16);
    box-shadow: var(--shadow-sm);
    max-width: 56rem;
}

.dashboard-pinned-heading {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e4a45;
}

.dashboard-pinned-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dashboard-pinned-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.15rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-pinned-item:hover {
    border-color: rgba(13, 148, 136, 0.35);
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.08);
}

.dashboard-pinned-item-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
}

.dashboard-pinned-item-excerpt {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.dashboard-pinned-item-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.dashboard-pinned-more {
    margin: 1rem 0 0;
    font-size: 0.9rem;
}

.dashboard-pinned-more a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.dashboard-pinned-more a:hover { text-decoration: underline; }

/* ── COMPACT + BREED: forum, marktplaats, community-hub ───────── */
body.area-compact-wide .dashboard-content {
    max-width: min(1240px, 100%);
    font-size: 0.875rem;
    line-height: 1.55;
}

body.area-compact-wide .section-title {
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

body.area-compact-wide .forum-category-name {
    font-size: 0.88rem;
}

body.area-compact-wide .forum-category-desc,
body.area-compact-wide .forum-category-meta {
    font-size: 0.78rem;
}

body.area-compact-wide .forum-topic-title {
    font-size: 0.84rem;
}

body.area-compact-wide .forum-topic-meta {
    font-size: 0.74rem;
}

body.area-compact-wide .forum-post-author {
    font-size: 0.82rem;
}

body.area-compact-wide .forum-post-date {
    font-size: 0.72rem;
}

body.area-compact-wide .forum-post-body {
    font-size: 0.8125rem;
    line-height: 1.6;
}

body.area-compact-wide .forum-subtitle {
    font-size: 1rem;
}

body.area-compact-wide .container-forum .section-title {
    font-size: 1.15rem;
}

/* Community-hub: meer tegelijk op scherm */
body.area-compact-wide .community-hub {
    max-width: min(72rem, 100%);
}

body.area-compact-wide .community-hub-hero h1 {
    font-size: 1.45rem;
}

body.area-compact-wide .community-hub-lead {
    font-size: 0.92rem;
    line-height: 1.65;
}

body.area-compact-wide .community-pillars {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.85rem;
}

@media (max-width: 640px) {
    body.area-compact-wide .community-pillars {
        grid-template-columns: 1fr;
    }
}

body.area-compact-wide .community-pillar-card {
    padding: 1rem 1.15rem;
}

body.area-compact-wide .community-pillar-card h2 {
    font-size: 1.02rem;
}

body.area-compact-wide .community-pillar-card p {
    font-size: 0.82rem;
    line-height: 1.55;
    margin-bottom: 0.75rem;
}

body.area-compact-wide .community-pillar-cta {
    font-size: 0.8rem;
}

body.area-compact-wide .community-section-title {
    font-size: 1.12rem;
}

body.area-compact-wide .community-collab,
body.area-compact-wide .community-news-preview-excerpt {
    font-size: 0.82rem;
}

body.area-compact-wide .community-forum-preview-title {
    font-size: 0.84rem;
}

body.area-compact-wide .community-forum-preview-meta {
    font-size: 0.74rem;
}

.community-pillar-card--market {
    border-top: 3px solid #0d9488;
}

.community-pillar-card--market .community-pillar-icon {
    color: #0f766e;
}

.community-pillar-card--market .community-pillar-cta {
    color: #0f766e;
}

/* Marktplaats */
.marketplace-page {
    max-width: 100%;
}

.marketplace-header {
    margin-bottom: 1.25rem;
}

.marketplace-title {
    margin-bottom: 0.5rem;
}

.marketplace-intro {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.6;
    max-width: 52rem;
}

.marketplace-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.marketplace-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.marketplace-tab {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-white);
    color: var(--text);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
}

.marketplace-tab:hover {
    border-color: var(--teal-300);
    background: var(--teal-50);
}

.marketplace-tab.is-active {
    background: var(--teal-600);
    border-color: var(--teal-600);
    color: #fff;
}

.marketplace-tab-hint {
    font-weight: 500;
    opacity: 0.85;
    font-size: 0.72rem;
}

.marketplace-new-btn {
    flex-shrink: 0;
}

.marketplace-empty {
    color: var(--text-muted);
    font-size: 0.84rem;
}

.marketplace-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.85rem;
}

.marketplace-card {
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.marketplace-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.marketplace-badge {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.marketplace-badge-wanted {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

.marketplace-badge-offered {
    background: var(--teal-50);
    color: var(--teal-800);
    border: 1px solid var(--teal-200);
}

.marketplace-card-date {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.marketplace-card-title {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
}

.marketplace-card-body {
    margin: 0 0 0.85rem;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--gray-700);
    flex: 1;
    white-space: pre-wrap;
    word-break: break-word;
}

.marketplace-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px solid var(--gray-100);
}

.marketplace-card-author {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.marketplace-delete-form {
    margin: 0;
}

.marketplace-form {
    padding: 1.25rem;
    max-width: 40rem;
}

.marketplace-type-radios {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.35rem;
}

.marketplace-radio-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.84rem;
    line-height: 1.45;
}

.marketplace-radio-label input {
    margin-top: 0.2rem;
}

.marketplace-back {
    margin-bottom: 0.75rem;
}

.marketplace-about {
    margin-bottom: 1.5rem;
    padding: 1.15rem 1.35rem;
    text-align: left;
}

.marketplace-about-title {
    margin: 1rem 0 0.5rem;
    font-size: 0.88rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--teal-800);
}

.marketplace-about-title:first-child {
    margin-top: 0;
}

.marketplace-about-list {
    margin: 0 0 0.75rem;
    padding-left: 1.2rem;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--gray-700);
}

.marketplace-about-list li {
    margin-bottom: 0.4rem;
}

.marketplace-about-list--tips {
    margin-bottom: 0;
}

.marketplace-about-p {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--gray-700);
}

.marketplace-about-p a {
    font-weight: 600;
    color: var(--teal-700);
}

.marketplace-intro-lead {
    max-width: 48rem;
    margin-bottom: 0;
}

.marketplace-intro-action {
    margin: 0 0 1rem;
    font-weight: 600;
    color: var(--text);
}

/* Dashboard hub (snelkoppelingen) */
.dashboard-welcome--compact {
    padding: var(--space) 1.35rem;
    margin-bottom: var(--space);
}

.dashboard-welcome--compact h1 {
    font-size: 1.35rem;
}

.dashboard-welcome--compact .welcome-intro {
    font-size: 0.95rem;
    margin-bottom: 0;
}

.dashboard-section-heading {
    margin: 1.75rem 0 0.35rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
}

.dashboard-section-heading:first-of-type {
    margin-top: 0.5rem;
}

.dashboard-section-sub {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.dashboard-progress-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.85rem 1.1rem;
    margin-bottom: var(--space-lg);
}

.dashboard-progress-inline-text {
    font-size: 0.88rem;
    flex: 1;
    min-width: 12rem;
}

.dashboard-progress-inline-bar {
    flex: 2;
    min-width: 8rem;
    margin: 0;
}

.dashboard-progress-inline-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--teal-700);
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-progress-inline-link:hover {
    text-decoration: underline;
}

.dashboard-admin-hint {
    margin-bottom: var(--space-lg);
}

.dashboard-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.85rem;
    margin-bottom: var(--space-xl);
}

.dashboard-quick-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.1rem 1.15rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dashboard-quick-card:hover {
    border-color: rgba(13, 148, 136, 0.35);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.dashboard-quick-icon {
    display: flex;
    margin-bottom: 0.5rem;
    color: var(--teal-600);
}

.dashboard-quick-card--tracking .dashboard-quick-icon {
    font-size: 1.35rem;
    line-height: 1;
}
.dashboard-quick-card--tracking .dashboard-quick-label { color: var(--text); }
.dashboard-quick-card--community .dashboard-quick-icon { color: #0d9488; }
.dashboard-quick-card--forum .dashboard-quick-icon { color: #5b7c9d; }
/* Marktplaats = community (teal-groen) */
.dashboard-quick-card--market .dashboard-quick-icon { color: #0f766e; }
.dashboard-quick-card--market {
    background: linear-gradient(135deg, #f0fdfa 0%, #f0fdf4 100%);
    border-color: #a7f3d0;
}
.dashboard-quick-card--market:hover { border-color: #0f766e; }

/* Vacaturebord = Pro (indigo/blauw) */
.dashboard-quick-card--jobs .dashboard-quick-icon { color: #4f46e5; }
.dashboard-quick-card--jobs {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border-color: #c7d2fe;
}
.dashboard-quick-card--jobs:hover { border-color: #4f46e5; }
.dashboard-quick-card--downloads .dashboard-quick-icon { color: #b45309; }
.dashboard-quick-card--profile .dashboard-quick-icon { color: var(--gray-600); }
.dashboard-quick-card--academy .dashboard-quick-icon { color: #0d9488; }
.dashboard-quick-card--academy {
    background: linear-gradient(135deg, #f0fdfa 0%, #e0f2fe 100%);
    border-color: #99f6e4;
}
.dashboard-quick-card--academy:hover { border-color: #0d9488; }

.dashboard-quick-label {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 0.35rem;
    color: var(--text);
}

.dashboard-quick-desc {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.modules-page-intro {
    margin-bottom: var(--space-lg);
}

.modules-page-intro .section-title {
    margin-bottom: 0.5rem;
}

.modules-page-lead {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 42rem;
}

.modules-page-lead a {
    font-weight: 600;
    color: var(--teal-700);
}

/* Downloads-pagina — card grid */
body.page-downloads .dashboard-content {
    max-width: 1120px;
}

.downloads-page-head {
    background: linear-gradient(135deg, var(--bg-white) 0%, var(--teal-50) 55%, #f8fdfc 100%);
    border: 1px solid var(--teal-100);
    border-radius: var(--radius-lg);
    padding: 1.35rem 1.5rem 1.45rem;
    margin-bottom: 1.75rem;
    box-shadow: var(--shadow-sm);
}

.downloads-page-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
    line-height: 1.25;
}

.downloads-page-intro-block {
    max-width: 54rem;
}

.downloads-page-lead {
    margin: 0 0 0.9rem;
    font-size: 0.98rem;
    line-height: 1.68;
    color: var(--text-2);
}

.downloads-page-intro {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.68;
    color: var(--text-muted);
}

.downloads-howto {
    margin-bottom: 2rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--border);
}

.downloads-howto-title {
    margin: 0 0 0.9rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}

.downloads-howto-steps {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.downloads-howto-steps li {
    margin-bottom: 0.7rem;
    padding-left: 0.15rem;
}

.downloads-howto-steps li:last-child {
    margin-bottom: 0;
}

.downloads-howto-steps strong {
    color: var(--text-2);
}

.downloads-section {
    margin-bottom: 2.25rem;
}

.downloads-section-body {
    margin: 0 0 1.15rem;
    max-width: 54rem;
}

.downloads-section-lead {
    margin: 0 0 0.65rem;
    font-size: 0.9rem;
    line-height: 1.68;
    color: var(--text-muted);
}

.downloads-section-lead:last-child {
    margin-bottom: 0;
}

.downloads-section-lead--tight {
    margin-top: 0.15rem;
    font-size: 0.87rem;
    line-height: 1.62;
    color: var(--gray-500);
}

.downloads-tips {
    margin-top: 0.5rem;
    margin-bottom: 0;
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--teal-100);
    background: linear-gradient(180deg, var(--bg-white) 0%, var(--teal-50) 100%);
    box-shadow: var(--shadow-xs);
}

.downloads-tips-title {
    margin: 0 0 0.85rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}

.downloads-tips-list {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.downloads-tips-list li {
    margin-bottom: 0.55rem;
}

.downloads-tips-list li:last-child {
    margin-bottom: 0;
}

.downloads-tips-list a {
    font-weight: 600;
}

.downloads-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 2px solid var(--teal-100);
}

.downloads-section-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}

.downloads-section-meta {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--teal-700);
    background: var(--teal-50);
    border: 1px solid var(--teal-100);
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
}

.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.download-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.15rem 1.2rem 1.15rem;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}

.download-card:hover {
    border-color: rgba(13, 148, 136, 0.4);
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}

.download-card--soon {
    opacity: 0.78;
}

.download-card--soon:hover {
    transform: none;
    box-shadow: var(--shadow-xs);
}

.download-card-top {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 0.55rem;
}

.download-card-kind {
    flex-shrink: 0;
    width: 2.85rem;
    height: 2.85rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.15;
    text-align: center;
}

.download-card-kind--html {
    background: linear-gradient(145deg, var(--teal-100), var(--teal-50));
    color: var(--teal-800);
    border: 1px solid var(--teal-200);
}

.download-card-kind--xlsx {
    background: linear-gradient(145deg, #dcfce7, #f0fdf4);
    color: #166534;
    border: 1px solid #86efac;
}

.download-card-heading {
    flex: 1;
    min-width: 0;
}

.download-card-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--text);
    letter-spacing: -0.02em;
}

.download-card-desc {
    margin: 0 0 0.85rem;
    flex: 1 1 auto;
    font-size: 0.86rem;
    line-height: 1.58;
    color: var(--text-muted);
}

.download-card-bullets {
    margin: 0 0 0.65rem;
    padding-left: 1.1rem;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.download-card-bullets li {
    margin-bottom: 0.35rem;
}

.download-card-bullets li:last-child {
    margin-bottom: 0;
}

.download-card-footnote {
    margin: 0 0 0.85rem;
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--gray-500);
}

.download-card-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    margin-top: auto;
}

.download-card-open {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    color: var(--teal-700);
    text-decoration: none;
}

.download-card-open:hover {
    text-decoration: underline;
    color: var(--teal-800);
}

.download-card--wide {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1.25rem 1.5rem;
    padding: 1.35rem 1.45rem 1.4rem;
    border-color: rgba(13, 148, 136, 0.32);
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--teal-50) 45%, #fafefd 100%);
    box-shadow: var(--shadow-sm);
}

.download-card--wide:hover {
    box-shadow: var(--shadow);
}

.download-card--wide .download-card-main {
    flex: 1;
    min-width: min(100%, 280px);
    display: flex;
    flex-direction: column;
}

.download-card--wide .download-card-desc {
    flex: 0 1 auto;
}

.download-card--wide .download-card-aside {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    min-width: 11rem;
    width: min(100%, 14rem);
}

.download-card--wide .download-card-btn {
    width: 100%;
}

@media (max-width: 640px) {
    .download-card--wide {
        flex-direction: column;
    }

    .download-card--wide .download-card-aside {
        width: 100%;
        align-self: stretch;
    }
}

/* ═══ Klassiek forum (boards, tabellen, thread-layout) ═══ */
body.forum-classic .container-forum {
    max-width: 100%;
}

.forum-shell {
    padding-bottom: 2rem;
}

.forum-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    font-size: 0.78rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--gray-100);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
}

.forum-breadcrumb a {
    color: var(--teal-700);
    font-weight: 600;
    text-decoration: none;
}

.forum-breadcrumb a:hover {
    text-decoration: underline;
}

.forum-bc-sep {
    color: var(--gray-400);
    user-select: none;
}

.forum-bc-current {
    color: var(--text);
    font-weight: 600;
    max-width: 100%;
}

.forum-bc-ellipsis {
    display: inline-block;
    max-width: min(36rem, 70vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.forum-page-title {
    margin: 0 0 0.35rem;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}

.forum-page-lead {
    margin: 0;
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 40rem;
}

.forum-index-header,
.forum-category-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--teal-100);
}

.forum-index-heading {
    flex: 1;
    min-width: 12rem;
}

.forum-index-actions {
    flex-shrink: 0;
}

.forum-block-title {
    margin: 1.75rem 0 0.65rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-600);
}

.forum-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-white);
    box-shadow: var(--shadow-xs);
    margin-bottom: 0.5rem;
}

.forum-data-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.forum-data-table thead {
    background: linear-gradient(180deg, #0f766e 0%, #0d9488 100%);
    color: #fff;
}

.forum-data-table thead th {
    padding: 0.65rem 0.85rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12);
}

.forum-data-table thead th:first-child {
    border-radius: var(--radius) 0 0 0;
}

.forum-data-table thead th:last-child {
    border-radius: 0 var(--radius) 0 0;
}

.forum-data-table tbody tr {
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.12s ease;
}

.forum-data-table tbody tr:hover {
    background: var(--teal-50);
}

.forum-data-table tbody tr:last-child {
    border-bottom: none;
}

.forum-data-table td {
    padding: 0.75rem 0.85rem;
    vertical-align: top;
}

.forum-col-num,
.forum-td-num {
    width: 5.5rem;
    text-align: center;
    white-space: nowrap;
}

.forum-td-num {
    font-weight: 700;
    color: var(--teal-800);
    font-variant-numeric: tabular-nums;
}

.forum-col-forum {
    min-width: 220px;
}

.forum-col-topic {
    min-width: 200px;
}

.forum-col-topic-wide {
    min-width: 240px;
}

.forum-col-cat {
    width: 9rem;
}

.forum-col-starter {
    width: 8rem;
}

.forum-col-activity {
    min-width: 11rem;
}

.forum-board-title-link {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
}

.forum-board-title-link:hover .forum-board-name {
    color: var(--teal-700);
    text-decoration: underline;
}

.forum-board-icon {
    font-size: 1.1rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.forum-board-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.forum-board-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text);
}

.forum-board-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.forum-td-activity {
    font-size: 0.78rem;
}

.forum-last-topic-link {
    display: block;
    font-weight: 600;
    color: var(--teal-800);
    text-decoration: none;
    margin-bottom: 0.2rem;
    line-height: 1.35;
}

.forum-last-topic-link:hover {
    text-decoration: underline;
}

.forum-last-date,
.forum-last-poster {
    display: block;
    color: var(--text-muted);
    font-size: 0.74rem;
}

.forum-last-poster {
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 0.15rem;
}

.forum-topic-link {
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    font-size: 0.86rem;
}

.forum-topic-link:hover {
    color: var(--teal-700);
    text-decoration: underline;
}

.forum-topic-by {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.forum-cat-pill {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 100px;
    background: var(--gray-100);
    border: 1px solid var(--border);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gray-700);
    text-decoration: none;
}

.forum-cat-pill:hover {
    border-color: var(--teal-300);
    color: var(--teal-800);
}

.forum-muted {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.forum-empty-note {
    margin-top: 0.5rem;
}

.forum-empty-box {
    padding: 1.5rem;
    text-align: center;
}

.forum-empty-box p {
    margin-bottom: 1rem;
    color: var(--text-muted);
}

/* Thread view */
.forum-thread-header {
    margin-bottom: 0;
    padding-bottom: 0.85rem;
    border-bottom: 2px solid var(--teal-600);
}

.forum-thread-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text);
}

.forum-thread-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.forum-thread-stat {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
}

.forum-thread {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: 1rem;
    box-shadow: var(--shadow-sm);
}

.forum-classic-post {
    display: grid;
    grid-template-columns: 132px 1fr;
    border-bottom: 1px solid var(--border);
    background: var(--bg-white);
}

.forum-classic-post:last-child {
    border-bottom: none;
}

.forum-classic-post-op {
    background: linear-gradient(180deg, #f0fdfa 0%, var(--bg-white) 100%);
}

.forum-classic-sidebar {
    padding: 1rem 0.75rem;
    background: var(--gray-50);
    border-right: 1px solid var(--border);
    text-align: center;
}

.forum-classic-avatar {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid var(--border);
    margin: 0 auto 0.5rem;
    display: block;
}

.forum-classic-author {
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--text);
    word-break: break-word;
}

.forum-classic-role {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.25rem;
}

.forum-classic-main {
    padding: 0.85rem 1rem 1rem;
    min-width: 0;
}

.forum-classic-posthead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.65rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--gray-200);
}

.forum-classic-postnum {
    font-weight: 800;
    font-size: 0.75rem;
    color: var(--teal-700);
    background: var(--teal-50);
    border: 1px solid var(--teal-100);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}

.forum-classic-time {
    font-size: 0.74rem;
    color: var(--text-muted);
}

.forum-classic-body {
    font-size: 0.84rem;
    line-height: 1.65;
    color: var(--gray-800);
    word-wrap: break-word;
}

.forum-reply-panel {
    margin-top: 1.25rem;
    padding: 1.15rem 1.25rem;
}

.forum-reply-heading {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
}

.forum-back-thread {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.forum-compose-header {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--teal-100);
}

.forum-compose-card {
    padding: 1.25rem 1.5rem;
    max-width: 42rem;
}

@media (max-width: 640px) {
    .forum-classic-post {
        grid-template-columns: 1fr;
    }

    .forum-classic-sidebar {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        text-align: left;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .forum-classic-avatar {
        margin: 0;
        width: 48px;
        height: 48px;
    }

    .forum-classic-role {
        margin-top: 0;
    }

    .forum-index-header,
    .forum-category-header {
        flex-direction: column;
    }
}

/* ══════════════════════════════════════════════════════════
   PREMIUM SAAS DASHBOARD REDESIGN
   ══════════════════════════════════════════════════════════ */

/* Hide public site chrome in dashboard mode and admin */
body.dashboard-mode .site-header { display: none !important; }
body.dashboard-mode .site-footer { display: none !important; }
body.admin .site-header { display: none !important; }
body.admin .site-footer { display: none !important; }

/* Minimale footer binnen het dashboard */
.dashboard-footer-mini {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--text-hint);
    padding: 0.75rem 1.5rem 1rem;
    border-top: 1px solid var(--gray-200);
    margin-top: 1.5rem;
}
.dashboard-footer-mini a { color: var(--text-hint); text-decoration: none; }
.dashboard-footer-mini a:hover { color: var(--text-muted); }
.dashboard-footer-sep { opacity: 0.4; }

body.dashboard-mode {
    background: var(--gray-100);
    height: 100vh;
    overflow: hidden;
}
body.dashboard-mode .main-content {
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

/* Admin layout: zelfde viewport-lock als dashboard-mode zodat scrollbalk
   altijd in .dashboard-content zit en de body nooit verschuift */
body.admin {
    height: 100vh;
    overflow: hidden;
}
body.admin .main-content {
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

/* ── DASHBOARD APP SHELL ─────────────────────────────────── */
.dashboard-app {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ── SIDEBAR ─────────────────────────────────────────────── */
.dashboard-sidebar {
    width: 252px;
    min-width: 252px;
    background: #0f172a;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;           /* altijd scrollbar-ruimte — voorkomt breedte-shift */
    flex-shrink: 0;
    border-right: none;
    scrollbar-width: none;        /* sidebar-scrollbar verbergen maar ruimte behouden */
}
.dashboard-sidebar::-webkit-scrollbar { display: none; }

.dashboard-logo {
    padding: 1.25rem 1rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    display: block;
    text-decoration: none;
    flex-shrink: 0;
}
.dashboard-logo-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: contain;
    object-position: left center;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}
.dashboard-logo-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.4rem;
    color: white;
    letter-spacing: -0.03em;
}

.dashboard-nav {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    padding: 0.75rem 0.625rem;
    overflow-y: auto;
}

.dashboard-nav-section-label {
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.22);
    padding: 1rem 0.625rem 0.3rem;
    user-select: none;
}

.dashboard-nav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.58rem 0.75rem;
    color: rgba(255,255,255,0.58);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    transition: background 0.12s, color 0.12s;
    border-left: 3px solid transparent;
}
.dashboard-nav-item:hover {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.88);
}
.dashboard-nav-item.active {
    background: rgba(13,148,136,0.18);
    color: #5eead4;
    font-weight: 600;
    border-left-color: #0d9488;
}
.dashboard-nav-item--locked {
    opacity: 0.55;
}
.dashboard-nav-item--locked:hover { opacity: 0.75; }

.dashboard-nav-logout {
    color: rgba(255,255,255,0.35);
    margin-top: 0.25rem;
}
.dashboard-nav-logout:hover {
    color: rgba(255,255,255,0.65);
    background: rgba(255,255,255,0.04);
}

.dashboard-nav-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}
.dashboard-nav-icon svg { width: 100%; height: 100%; }

.nav-pro-badge {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(13,148,136,0.3);
    color: #5eead4;
    padding: 0.1em 0.45em;
    border-radius: 4px;
    margin-left: 0.2rem;
    vertical-align: middle;
}

/* Sidebar online counter */
.sidebar-online-bar {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.1rem;
    font-size: .75rem;
    color: rgba(255,255,255,.38);
    letter-spacing: .02em;
}
.sidebar-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    flex-shrink: 0;
    animation: pulse-green 2.4s ease-in-out infinite;
}
@keyframes pulse-green {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .55; transform: scale(.85); }
}

/* Sidebar footer – user info */
.dashboard-user {
    padding: 1rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: rgba(0,0,0,0.25);
    flex-shrink: 0;
}
.dashboard-user-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.12);
    flex-shrink: 0;
}
.dashboard-user-info { min-width: 0; flex: 1; overflow: hidden; }
.dashboard-user-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.45);
    padding: 0.3rem;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
    text-decoration: none;
}
.dashboard-user-settings:hover {
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.08);
}
.dashboard-user-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.82);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-plan-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.12em 0.55em;
    border-radius: 99px;
    text-decoration: none;
    color: #fff;
}
.dashboard-plan-badge--starter  { background: #475569; }
.dashboard-plan-badge--community { background: var(--teal-500); }
.dashboard-plan-badge--pro       { background: var(--teal-600); }

/* ── DASHBOARD MAIN (scroll area) ───────────────────────── */
.dashboard-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--gray-100);
    min-width: 0;
}

/* ── TOPBAR ──────────────────────────────────────────────── */
.dashboard-topbar {
    height: 58px;
    min-height: 58px;
    background: #ffffff;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    flex-shrink: 0;
    gap: 1rem;
}
.dashboard-topbar-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-topbar-actions { display: flex; align-items: center; gap: 0.75rem; }
.dashboard-topbar-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--gray-700);
    font-size: 0.84rem;
    font-weight: 500;
    padding: 0.3rem 0.6rem 0.3rem 0.3rem;
    border-radius: var(--radius-sm);
    transition: background 0.12s;
}
.dashboard-topbar-user:hover { background: var(--gray-100); }
.dashboard-topbar-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--gray-200);
}
.dashboard-topbar-name { display: none; }
@media (min-width: 900px) { .dashboard-topbar-name { display: block; } }

/* ── CONTENT AREA ────────────────────────────────────────── */
.dashboard-content {
    flex: 1;
    overflow-y: scroll;           /* altijd scrollbar-ruimte reserveren — voorkomt layout-shift */
    padding: 2rem;
    max-width: 1000px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.dashboard-content::-webkit-scrollbar { width: 5px; }
.dashboard-content::-webkit-scrollbar-track { background: transparent; }
.dashboard-content::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.dashboard-content::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── STAT CARDS ──────────────────────────────────────────── */
.stat-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.stat-card {
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.stat-card:hover { border-color: var(--teal-300); box-shadow: var(--shadow-sm); }
.stat-card-value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1;
    margin-bottom: 0.3rem;
}
.stat-card-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
}
.stat-card--teal .stat-card-value { color: var(--teal-600); }
.stat-card--plan .stat-card-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--teal-700);
}

/* ── DASHBOARD WELCOME (compact) ────────────────────────── */
.dashboard-welcome--compact {
    margin-bottom: 1.5rem;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
}
.dashboard-welcome--compact::before { display: none; }
.dashboard-welcome--compact h1 {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.03em;
    margin: 0 0 0.35rem;
}
.dashboard-welcome--compact p,
.dashboard-welcome--compact .welcome-intro {
    font-size: 0.92rem;
    color: var(--text-muted);
    margin: 0;
}
.dashboard-welcome--compact a { color: var(--teal-600); }

/* ── DASHBOARD QUICK GRID ────────────────────────────────── */
.dashboard-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.dashboard-quick-card {
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.dashboard-quick-card:hover {
    border-color: var(--teal-300);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.dashboard-quick-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.15rem;
    line-height: 1;
}
.dashboard-quick-icon svg { width: 24px; height: 24px; }
.dashboard-quick-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.93rem;
    color: var(--gray-900);
}
.dashboard-quick-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ── DASHBOARD SECTION HEADINGS ──────────────────────────── */
.dashboard-section-heading {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.25rem;
}
.dashboard-section-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0 0 1rem;
}

/* ── DASHBOARD PROGRESS INLINE ───────────────────────────── */
.dashboard-progress-inline {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.35rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}
.dashboard-progress-inline-text {
    font-size: 0.88rem;
    color: var(--gray-700);
    white-space: nowrap;
}
.dashboard-progress-inline-bar {
    flex: 1;
    min-width: 100px;
    margin: 0;
}
.dashboard-progress-inline-link {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--teal-600);
    text-decoration: none;
    white-space: nowrap;
}
.dashboard-progress-inline-link:hover { color: var(--teal-700); }

/* ── MODULE LIST (modules.php) ───────────────────────────── */
.dashboard-modules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
    margin-bottom: 2rem;
}
.dashboard-modules .card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.dashboard-modules .card:hover {
    border-color: var(--teal-300);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}
.dashboard-modules .card.module-completed {
    border-color: var(--teal-200);
    background: linear-gradient(135deg, #fff 80%, var(--teal-50) 100%);
}
.dashboard-modules .card .num {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    background: var(--gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--gray-600);
}
.dashboard-modules .card.module-completed .num {
    background: var(--teal-100);
    color: var(--teal-700);
}
.dashboard-modules .card h3 {
    margin: 0 0 0.2rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gray-900);
}
.dashboard-modules .card p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.module-completed-badge {
    position: absolute;
    top: 0.75rem; right: 0.75rem;
    width: 22px; height: 22px;
    background: var(--teal-500);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(13,148,136,0.3);
}

/* ── PINNED NEWS (dashboard) ─────────────────────────────── */
.dashboard-pinned-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.dashboard-pinned-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.12s;
}
.dashboard-pinned-item:hover {
    border-color: var(--teal-300);
    transform: translateX(2px);
}
.dashboard-pinned-item-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--gray-900);
}
.dashboard-pinned-item-excerpt {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.dashboard-pinned-item-meta {
    font-size: 0.75rem;
    color: var(--text-hint);
}
.dashboard-pinned-more { font-size: 0.84rem; margin: 0; }
.dashboard-pinned-more a { color: var(--teal-600); text-decoration: none; font-weight: 600; }
.dashboard-pinned-more a:hover { color: var(--teal-700); }

/* ── HAMBURGER BUTTON (desktop: hidden) ──────────────────── */
.hamburger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    color: var(--gray-700);
    flex-shrink: 0;
    transition: background 0.12s;
    position: relative;
    z-index: 500;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.hamburger-btn:hover { background: var(--gray-100); }
.hamburger-btn:active { background: var(--gray-200); }

/* Sidebar overlay (mobile only) */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 498;
    backdrop-filter: blur(1px);
}

/* ── RESPONSIVE (mobile sidebar) ────────────────────────── */
@media (max-width: 900px) {
    /* Hamburger visible on tablet/mobile */
    .hamburger-btn { display: flex; }

    /* Sidebar slides in from the left as a drawer */
    .dashboard-app {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        position: relative;
    }
    .dashboard-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 260px;
        min-width: 0;
        z-index: 499;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.32,0.72,0,1);
        overflow-y: auto;
        /* Override the 900px horizontal-bar rules */
        flex-direction: column;
        flex-wrap: nowrap;
        border-bottom: none;
        border-right: none;
        padding: 0;
        display: flex;
    }
    body.sidebar-open .dashboard-sidebar {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,0.25);
    }
    body.sidebar-open .sidebar-overlay {
        display: block;
    }

    /* Logo: smaller, no stray border-right, restore bottom separator */
    .dashboard-logo {
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.07) !important;
        margin-right: 0;
        padding: 0.85rem 1rem;
    }
    .dashboard-logo-img {
        max-width: 130px;
        max-height: 44px;
        height: auto;
        width: auto;
    }

    /* Nav column */
    .dashboard-nav {
        flex-direction: column;
        flex-wrap: nowrap;
        width: auto;
        order: unset;
        padding: 0;
        overflow-x: visible;
        gap: 0;
    }
    .dashboard-nav-section-label { display: block; }
    .dashboard-nav-item { padding: 0.65rem 1rem; white-space: normal; font-size: 0.875rem; }

    /* User footer: reset auto-margin from 900px rule, stays at bottom */
    .dashboard-user {
        margin-left: 0 !important;
        border-top: 1px solid rgba(255,255,255,0.07) !important;
        border-bottom: none;
    }

    /* Main area takes full width */
    .dashboard-main {
        min-height: 100vh;
        overflow: visible;
        width: 100%;
    }
    .dashboard-topbar {
        position: sticky;
        top: 0;
        z-index: 100;
        padding: 0 0.75rem;
    }
    .dashboard-content { max-width: 100%; padding: 1rem; }
    .stat-cards-row { grid-template-columns: repeat(2, 1fr); }
    .dashboard-quick-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── PRICING TABLE (landingspagina) ─────────────────────── */
.pricing-section-wrap {
    margin: 4rem 0;
}
.pricing-section-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.pricing-section-header h2 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.04em;
    margin-bottom: 0.4rem;
}
.pricing-section-header h2::after { display: none; }
.pricing-section-header p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
    max-width: 900px;
    margin: 0 auto;
    align-items: start;
}
.pricing-card {
    background: #ffffff;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.75rem 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pricing-card:hover { box-shadow: var(--shadow); }
.pricing-card--featured {
    border-color: var(--teal-500);
}
.pricing-card--featured:hover {
    box-shadow: 0 0 0 1px var(--teal-400), var(--shadow);
}
.pricing-badge {
    position: absolute;
    top: -1px; right: 1.5rem;
    background: var(--teal-600);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25em 0.8em;
    border-radius: 0 0 8px 8px;
}
.pricing-plan-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.85rem;
}
.pricing-amount {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}
.pricing-price {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.04em;
    line-height: 1;
}
.pricing-period {
    font-size: 0.88rem;
    color: var(--text-muted);
    font-weight: 400;
}
.pricing-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 1.35rem;
}
.pricing-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}
.pricing-feature-list li {
    font-size: 0.875rem;
    color: var(--gray-700);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.5;
}
.pricing-feature-list li::before {
    content: '✓';
    color: var(--teal-600);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.05em;
}
.pricing-feature-list li.pricing-no {
    color: var(--text-muted);
}
.pricing-feature-list li.pricing-no::before {
    content: '✗';
    color: var(--gray-400);
}
.pricing-footer-note {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 1.25rem;
}

/* ── CURRICULUM LIST (landingspagina) ───────────────────── */
.curriculum-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.curriculum-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    transition: border-color 0.15s, transform 0.15s;
}
.curriculum-item:hover {
    border-color: var(--teal-200);
    transform: translateX(2px);
}
.curriculum-num {
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    background: var(--teal-50);
    border: 1.5px solid var(--teal-200);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--teal-700);
    margin-top: 0.05em;
}
.curriculum-title {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--gray-900);
    margin: 0 0 0.15rem;
}
.curriculum-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .pricing-section-header h2 { font-size: 1.4rem; }
}

/* ── ADMIN SIDEBAR LAYOUT ────────────────────────────────── */

.admin-sidebar-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15em 0.55em;
    background: rgba(245, 158, 11, 0.22);
    color: #fcd34d;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Quick action cards on admin dashboard */
.admin-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    gap: 0.75rem;
    margin-bottom: var(--space-lg);
}
.admin-quick-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.admin-quick-card:hover {
    border-color: var(--teal-400);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    transform: translateY(-1px);
}
.admin-quick-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: var(--teal-50);
    color: var(--teal-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.admin-quick-icon svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; }
.admin-quick-title { font-weight: 700; font-size: 0.88rem; line-height: 1.2; }
.admin-quick-desc  { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; }
.admin-quick-arrow { margin-left: auto; color: var(--text-hint); font-size: 0.9rem; flex-shrink: 0; }

/* Page header: title + action buttons */
.admin-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: var(--space-lg);
}
.admin-page-header h1   { margin: 0 0 0.2rem; font-size: 1.3rem; }
.admin-page-header p    { color: var(--text-muted); margin: 0; font-size: 0.875rem; }
.admin-page-header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* Hint/info box */
.admin-info-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--teal-500);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1.1rem;
    margin-bottom: var(--space-lg);
    font-size: 0.875rem;
    color: var(--text-2);
    max-width: 54rem;
    line-height: 1.6;
}
.admin-info-box code {
    background: var(--gray-100);
    padding: 0.1em 0.4em;
    border-radius: 4px;
    font-size: 0.84em;
    font-family: ui-monospace, monospace;
}

/* Stat cards (users overview) */
.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    gap: 0.75rem;
    margin-bottom: var(--space-lg);
}
.admin-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    text-align: center;
}
.admin-stat-value { font-size: 1.65rem; font-weight: 800; line-height: 1.1; }
.admin-stat-label { font-size: 0.77rem; color: var(--text-muted); margin-top: 0.3rem; }

/* Tables in admin layout */
.admin .dashboard-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: var(--bg-card);
}
.admin .dashboard-content .table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    overflow-x: auto;
}
.admin .dashboard-content th {
    text-align: left;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--gray-50);
    white-space: nowrap;
}
.admin .dashboard-content td {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--gray-100);
    color: var(--text-2);
    vertical-align: middle;
}
.admin .dashboard-content tbody tr:last-child td { border-bottom: none; }
.admin .dashboard-content tbody tr:hover td     { background: var(--teal-50); }

/* Plan badges (reusable) */
.plan-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2em 0.55em;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.plan-badge--starter   { background: #f8fafc; color: #64748b; border: 1px solid var(--border); }
.plan-badge--community { background: #f0f9ff; color: #0891b2; }
.plan-badge--pro       { background: #f0fdfa; color: #0d9488; }
.plan-badge--free      { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }

/* Narrow form pages */
.admin-form-wrap { max-width: 44rem; }

@media (max-width: 900px) {
    .admin-quick-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   SOCIAL FEATURES — profiles, connections, messages, notifications
   ═══════════════════════════════════════════════════════════════ */

/* ── Notification bell ──────────────────────────────────────── */
.notif-bell-wrap {
    position: relative;
}
.notif-bell-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: none;
    border: none;
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.notif-bell-btn:hover {
    background: var(--teal-50);
    color: var(--teal);
}
.notif-bell-badge {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    background: #ef4444;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.1rem;
    border-radius: 99px;
    text-align: center;
}
.notif-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 22rem;
    max-width: calc(100vw - 2rem);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 9999;
}
.notif-dropdown[hidden] { display: none; }
.notif-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}
.notif-dropdown-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}
.notif-mark-all {
    font-size: 0.75rem;
    color: var(--teal);
    text-decoration: none;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 20rem;
    overflow-y: auto;
}
.notif-empty {
    padding: 1.25rem 1rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
}
.notif-item {
    border-bottom: 1px solid var(--gray-50, #f8fafc);
}
.notif-item:last-child { border-bottom: none; }
.notif-item--unread { background: #f0fdfa; }
.notif-item-link {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s;
}
.notif-item-link:hover { background: var(--teal-50); }
.notif-item-icon {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.notif-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.notif-item-msg {
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.4;
    word-break: break-word;
}
.notif-item-time {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.notif-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--teal);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.35rem;
}
.notif-dropdown-footer {
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--border);
    text-align: center;
}
.notif-dropdown-footer a {
    font-size: 0.78rem;
    color: var(--teal);
    text-decoration: none;
}
.notif-dropdown-footer a:hover { text-decoration: underline; }

/* Nav count badge (unread messages in sidebar) */
.nav-count-badge {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    background: #ef4444;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.15rem;
    border-radius: 99px;
    text-align: center;
}

/* ── Profile edit (two-column) ──────────────────────────────── */
.profile-edit-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
    align-items: start;
}
.profile-sidebar-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.25rem 1.5rem;
    gap: 0;
}
.profile-sidebar-avatar-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}
.profile-avatar-img {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border);
    display: block;
}
.profile-sidebar-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.2rem;
}
.profile-sidebar-email {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0 0 1rem;
    word-break: break-all;
}
.profile-sidebar-divider {
    width: 100%;
    border: none;
    border-top: 1px solid var(--border);
    margin: 1rem 0;
}
.profile-sidebar-badges {
    margin-bottom: 0.75rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
}
.profile-sidebar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--teal);
    text-decoration: none;
    font-weight: 500;
    margin-top: 0.5rem;
}
.profile-sidebar-link:hover { text-decoration: underline; }
.profile-details-card {
    padding: 1.75rem;
}
.profile-details-card h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.profile-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 1.5rem 0 0.75rem;
}
.profile-section-label:first-of-type { margin-top: 0; }
@media (max-width: 700px) {
    .profile-edit-grid { grid-template-columns: 1fr; }
    .profile-sidebar-card { flex-direction: row; text-align: left; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.25rem; }
    .profile-sidebar-avatar-wrap { margin-bottom: 0; }
    .profile-sidebar-divider { display: none; }
}

/* ── Profile view (andere persoon) ─────────────────────────── */
.profile-view-wrap {
    max-width: 720px;
}
.profile-hero {
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
}
.profile-hero-banner {
    height: 100px;
    background: linear-gradient(135deg, var(--teal) 0%, #6366f1 100%);
}
.profile-hero-body {
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-top: none;
    padding: 0 1.5rem 1.5rem;
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.profile-hero-avatar-wrap {
    margin-top: -3rem;
    position: relative;
    flex-shrink: 0;
}
.profile-hero-avatar {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--surface, #fff);
    display: block;
}
.profile-hero-info {
    flex: 1;
    min-width: 0;
    padding-top: 0.5rem;
}
.profile-hero-name {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 0.15rem;
    color: var(--text);
    line-height: 1.2;
}
.profile-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    margin: 0.3rem 0 0;
}
.profile-hero-meta-item {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.2rem;
}
.profile-hero-online {
    font-size: 0.78rem;
    font-weight: 600;
    color: #16a34a;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.profile-hero-online::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #22c55e;
}
.profile-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding-top: 0.5rem;
    margin-left: auto;
}
.profile-hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    width: 100%;
}
.profile-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--teal);
    text-decoration: none;
    font-weight: 500;
}
.profile-hero-link:hover { text-decoration: underline; }
.profile-view-section {
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}
.profile-view-section-heading {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
}
.profile-view-bio {
    white-space: pre-line;
    line-height: 1.7;
    color: var(--text);
    font-size: 0.92rem;
    margin: 0;
}
.profile-status-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3em 0.75em;
    border-radius: 99px;
}
.profile-status-badge--pending {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}
.profile-wall-heading {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
}

/* ── Settings page ──────────────────────────────────────────── */
.settings-section { margin-bottom: 1.75rem; }
.settings-section-heading {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
}

/* Huidige plan banner */
.settings-plan-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    border-radius: var(--radius);
    padding: 1.1rem 1.4rem;
    margin-bottom: 1.75rem;
    border: 1.5px solid var(--border);
}
.settings-plan-banner--starter  { background: #f9fafb; border-color: #d1d5db; }
.settings-plan-banner--community { background: #f0fdfa; border-color: #99f6e4; }
.settings-plan-banner--pro       { background: #faf5ff; border-color: #e9d5ff; }
.settings-plan-banner-info { display: flex; flex-direction: column; gap: .15rem; }
.settings-plan-banner-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.settings-plan-banner-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text);
}
.settings-plan-banner--community .settings-plan-banner-name { color: #0d9488; }
.settings-plan-banner--pro       .settings-plan-banner-name { color: #7c3aed; }
.settings-plan-banner-expiry { font-size: 0.78rem; color: var(--text-muted); }
.settings-plan-banner-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Plannen grid */
.settings-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin-bottom: .75rem;
}
.settings-plan-card {
    background: var(--surface, #fff);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.settings-plan-card--current  { border-color: var(--teal-400, #2dd4bf); }
.settings-plan-card--highlight { border-color: var(--teal-200, #99f6e4); }
.settings-plan-card--pro { border-color: #c4b5fd; }
.settings-plan-card--current.settings-plan-card--pro { border-color: #7c3aed; }

.settings-plan-current-chip,
.settings-plan-popular-chip,
.settings-plan-pro-chip {
    position: absolute;
    top: -1px; right: 1rem;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2em 0.65em;
    border-radius: 0 0 6px 6px;
}
.settings-plan-current-chip {
    background: var(--teal-600, #0d9488);
    color: #fff;
}
.settings-plan-current-chip--pro {
    background: #7c3aed;
}
.settings-plan-popular-chip {
    background: var(--teal-100, #ccfbf1);
    color: var(--teal-800, #065f46);
}
.settings-plan-pro-chip {
    background: #ede9fe;
    color: #5b21b6;
}

.settings-plan-card-head { margin-bottom: .75rem; }
.settings-plan-card-head h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .25rem;
    color: var(--text);
}
.settings-plan-price {
    display: flex;
    align-items: baseline;
    gap: .2rem;
}
.settings-plan-price-amount {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text);
}
.settings-plan-price-period {
    font-size: .85rem;
    color: var(--text-muted);
    font-weight: 400;
}
.settings-plan-year-note {
    font-size: .75rem;
    color: var(--text-muted);
    margin: .1rem 0 0;
}

.settings-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    flex: 1;
}
.settings-plan-features li {
    font-size: .8rem;
    padding: .25rem 0;
    padding-left: 1.1rem;
    position: relative;
    color: var(--text);
    line-height: 1.4;
}
.settings-plan-features li::before {
    position: absolute;
    left: 0;
    font-size: .8rem;
}
.settings-plan-features li.yes::before { content: '✓'; color: #16a34a; }
.settings-plan-features li.no  { color: var(--text-muted); }
.settings-plan-features li.no::before  { content: '✗'; color: #9ca3af; }

.settings-plan-note {
    font-size: .78rem;
    color: var(--text-muted);
    margin: .5rem 0 0;
    line-height: 1.5;
}
.settings-plan-note a { color: var(--teal); }

@media (max-width: 600px) {
    .settings-plans-grid { grid-template-columns: 1fr; }
}

/* ── Connections grid ───────────────────────────────────────── */
.connections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.connection-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 1.25rem 1rem;
}
.connection-avatar-link { display: block; }
.connection-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    transition: border-color 0.15s;
}
.connection-avatar-link:hover .connection-avatar { border-color: var(--teal); }
.connection-info { width: 100%; }
.connection-name {
    display: block;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
    text-decoration: none;
    margin-bottom: 0.2rem;
}
.connection-name:hover { color: var(--teal); }
.connection-bio {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}
.connection-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

/* ── Messages inbox ─────────────────────────────────────────── */
.messages-inbox {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.messages-inbox-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s, border-color 0.12s;
    border-left: 3px solid transparent;
}
.messages-inbox-item:hover { background: var(--teal-50); }
.messages-inbox-item--unread {
    border-left-color: var(--teal);
    background: #f0fdfa;
}
.messages-inbox-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    flex-shrink: 0;
}
.messages-inbox-body { flex: 1; min-width: 0; }
.messages-inbox-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}
.messages-unread-badge {
    display: inline-block;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    background: var(--teal);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.1rem;
    border-radius: 99px;
    text-align: center;
}
.messages-inbox-preview {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.messages-inbox-time {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Message thread ─────────────────────────────────────────── */
.messages-thread-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 680px;
}
.messages-thread-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.messages-thread-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    flex-shrink: 0;
}
.messages-thread-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    text-decoration: none;
}
.messages-thread-name:hover { color: var(--teal); }
.messages-thread-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 32rem;
    overflow-y: auto;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.messages-compose {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.messages-compose-input {
    resize: vertical;
    min-height: 5rem;
}

/* ── Message bubbles ────────────────────────────────────────── */
.message-bubble {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: 80%;
}
.message-bubble--mine {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.message-bubble--theirs {
    align-self: flex-start;
}
.message-bubble-avatar {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border);
}
.message-bubble-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.message-bubble--mine .message-bubble-body { align-items: flex-end; }
.message-bubble-text {
    padding: 0.55rem 0.85rem;
    border-radius: 1rem;
    font-size: 0.88rem;
    line-height: 1.5;
    word-break: break-word;
}
.message-bubble--mine .message-bubble-text {
    background: var(--teal);
    color: #fff;
    border-bottom-right-radius: 0.2rem;
}
.message-bubble--theirs .message-bubble-text {
    background: var(--gray-50, #f8fafc);
    color: var(--text);
    border-bottom-left-radius: 0.2rem;
    border: 1px solid var(--border);
}
.message-bubble-meta {
    font-size: 0.68rem;
    color: var(--text-muted);
    padding: 0 0.25rem;
}

/* ── Notifications page ─────────────────────────────────────── */
.notif-page-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.notif-page-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: #fff;
    transition: background 0.12s;
}
.notif-page-item:hover { background: var(--teal-50); }
.notif-page-item--unread { border-left: 3px solid var(--teal); background: #f0fdfa; }
.notif-page-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 0.1rem; }
.notif-page-body { flex: 1; }
.notif-page-msg { font-size: 0.88rem; color: var(--text); line-height: 1.4; }
.notif-page-time { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; }

/* ── Dashboard plan badge ───────────────────────────────────── */
.dashboard-plan-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15em 0.55em;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
}
.dashboard-plan-badge--starter   { background: rgba(255,255,255,0.15); color: #cbd5e1; }
.dashboard-plan-badge--community { background: rgba(14,165,233,0.2); color: #7dd3fc; }
.dashboard-plan-badge--pro       { background: rgba(20,184,166,0.25); color: #5eead4; }

/* ── Online status ──────────────────────────────────────────── */
.avatar-online-wrap {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
.online-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 0.65rem;
    height: 0.65rem;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid #fff;
    display: block;
}
.online-dot--lg {
    width: 0.9rem;
    height: 0.9rem;
    bottom: 2px;
    right: 2px;
    animation: online-pulse 2.2s ease-in-out infinite;
}
@keyframes online-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
    50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

/* ── Marktplaats info-balk ──────────────────────────────────── */
.mp-info-bar {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .65rem .9rem;
    font-size: .8rem;
    color: var(--text-muted);
    margin-bottom: 1.1rem;
    line-height: 1.5;
}
.mp-info-bar a { color: var(--teal); text-decoration: none; }
.mp-info-bar a:hover { text-decoration: underline; }

/* ── Vacaturebord ───────────────────────────────────────────── */

/* Upgrade scherm (niet-Pro) */
.jb-upgrade-wrap { max-width: 480px; margin: 0 auto; text-align: center; padding: 2rem 0; }
.jb-upgrade-icon { font-size: 3rem; margin-bottom: 1rem; }
.jb-upgrade-title { font-size: 1.6rem; font-weight: 800; margin-bottom: .5rem; }
.jb-upgrade-text { color: var(--text-muted); margin-bottom: 1.5rem; line-height: 1.6; }
.jb-upgrade-features { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.75rem; text-align: left; }
.jb-upgrade-feature {
    display: flex; align-items: center; gap: .65rem; font-size: .9rem;
    background: var(--teal-50); border: 1px solid #99f6e4;
    border-radius: var(--radius); padding: .55rem .85rem;
}

/* Hero */
.jb-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.jb-hero-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 .2rem; display: flex; align-items: center; gap: .5rem; }
.jb-pro-tag {
    display: inline-block; font-size: .58rem; font-weight: 800; letter-spacing: .06em;
    padding: .25em .65em; border-radius: 99px; background: var(--teal); color: #fff; vertical-align: middle;
}
.jb-hero-sub { font-size: .88rem; color: var(--text-muted); margin: 0; }
.jb-post-btn { white-space: nowrap; }

/* Split info */
.jb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.jb-split-card {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: 1rem 1.1rem; border-radius: var(--radius);
    border: 1px solid var(--border); font-size: .85rem; line-height: 1.5;
}
.jb-split-card p { margin: .25rem 0 0; color: var(--text-muted); }
.jb-split-card--wanted  { background: #f0fdfa; border-color: #99f6e4; }
.jb-split-card--offered { background: #f5f3ff; border-color: #ddd6fe; }
.jb-split-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: .1rem; }

/* Formulier */
.jb-form-wrap { margin-bottom: 1.5rem; }
.jb-form-title { font-size: 1rem; font-weight: 700; margin: 0 0 1.1rem; }
.jb-type-picker { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.25rem; }
.jb-type-option { display: block; cursor: pointer; }
.jb-type-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.jb-type-card {
    display: flex; flex-direction: column; gap: .25rem;
    padding: .9rem 1rem; border: 2px solid var(--border);
    border-radius: var(--radius); background: #fff;
    transition: border-color .15s, background .15s;
}
.jb-type-option input:checked + .jb-type-card { border-color: var(--teal); background: #f0fdfa; }
.jb-type-icon  { font-size: 1.25rem; }
.jb-type-label { font-weight: 700; font-size: .88rem; color: var(--text); }
.jb-type-desc  { font-size: .78rem; color: var(--text-muted); line-height: 1.4; }

/* Toolbar / tabs */
.jb-toolbar { margin-bottom: 1.25rem; border-bottom: 2px solid var(--border); }
.jb-tabs { display: flex; gap: 0; }
.jb-tab {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .6rem 1.1rem; font-size: .85rem; font-weight: 600;
    color: var(--text-muted); text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: color .15s, border-color .15s; white-space: nowrap;
}
.jb-tab:hover { color: var(--teal); }
.jb-tab--active { color: var(--teal); border-bottom-color: var(--teal); }
.jb-tab-count {
    display: inline-block; min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem;
    background: var(--gray-50, #f8fafc); border: 1px solid var(--border);
    color: var(--text-muted); font-size: .65rem; font-weight: 700;
    line-height: 1.1rem; border-radius: 99px; text-align: center;
}
.jb-tab--active .jb-tab-count { background: var(--teal-50); border-color: #99f6e4; color: var(--teal); }

/* Leeg */
.jb-empty { text-align: center; padding: 3rem 1rem; color: var(--text-muted); font-size: .9rem; }

/* Grid */
.jb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.1rem; }

/* Kaart */
.jb-card {
    background: #fff; border: 1px solid var(--border); border-top-width: 3px;
    border-radius: var(--radius); padding: 1.25rem;
    display: flex; flex-direction: column; gap: .75rem;
    transition: box-shadow .15s;
}
.jb-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.jb-card--wanted  { border-top-color: var(--teal); }
.jb-card--offered { border-top-color: #7c3aed; }
.jb-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.jb-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; padding: .25em .7em; border-radius: 99px; }
.jb-badge--wanted  { background: #f0fdfa; color: #0d9488; border: 1px solid #99f6e4; }
.jb-badge--offered { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.jb-card-date  { font-size: .75rem; color: var(--text-muted); white-space: nowrap; }
.jb-card-title { font-size: .98rem; font-weight: 700; color: var(--text); margin: 0; line-height: 1.35; }
.jb-card-body  {
    font-size: .85rem; color: var(--text-muted); line-height: 1.6; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.jb-contact { font-size: .8rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.jb-contact-label { font-weight: 600; color: var(--text-muted); }
.jb-contact-link  { color: var(--teal); text-decoration: none; word-break: break-all; }
.jb-contact-link:hover { text-decoration: underline; }
.jb-card-footer {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--border);
}
.jb-author { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.jb-author-avatar {
    width: 1.75rem; height: 1.75rem; border-radius: 50%;
    object-fit: cover; border: 1px solid var(--border); flex-shrink: 0;
}
.jb-author-name { font-size: .8rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-card-actions { flex-shrink: 0; }

@media (max-width: 640px) {
    .jb-split       { grid-template-columns: 1fr; }
    .jb-type-picker { grid-template-columns: 1fr; }
    .jb-grid        { grid-template-columns: 1fr; }
    .jb-tabs        { overflow-x: auto; }
    .jb-hero        { flex-direction: column; align-items: flex-start; }
}

/* Nav pro badge */
.nav-pro-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1em 0.4em;
    border-radius: 3px;
    background: rgba(20,184,166,0.25);
    color: #5eead4;
    vertical-align: 0.1em;
    margin-left: 0.2rem;
}

/* ── AVATAR DRAWER ───────────────────────────────────────── */

.avatar-wrap {
    position: relative;
    display: inline-block;
}
.avatar-edit-btn {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gray-900);
    color: #fff;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: background 0.15s, transform 0.12s;
    padding: 0;
}
.avatar-edit-btn:hover { background: var(--teal-700); transform: scale(1.08); }
.avatar-edit-btn svg   { width: 14px; height: 14px; }

/* Drawer overlay */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.drawer-overlay.open {
    opacity: 1;
    pointer-events: all;
}

/* Drawer panel */
.drawer-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 360px;
    max-width: 100vw;
    background: var(--bg-card);
    z-index: 901;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 32px rgba(0,0,0,0.12);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.32,0.72,0,1);
}
.drawer-panel.open { transform: translateX(0); }

.drawer-header {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
}
.drawer-header h2  { margin: 0 0 0.2rem; font-size: 1rem; font-weight: 700; }
.drawer-header p   { margin: 0; font-size: 0.82rem; color: var(--text-muted); }
.drawer-close {
    width: 30px; height: 30px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: background 0.12s;
}
.drawer-close:hover { background: var(--gray-100); color: var(--text); }
.drawer-close svg   { width: 14px; height: 14px; }

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.drawer-avatar-preview {
    display: flex;
    justify-content: center;
}
.drawer-avatar-preview img {
    width: 100px;
    height: 100px;
    border-radius: var(--radius);
    object-fit: cover;
    border: 2px solid var(--border);
}

.drawer-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .drawer-panel { width: 100vw; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOCIAL FEED
   ═══════════════════════════════════════════════════════════════════════════ */

/* Topbar icon buttons (search, forum, connections, messages) */
.topbar-icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    color: var(--text-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.topbar-icon-btn:hover {
    background: rgba(0,0,0,0.06);
    color: var(--text);
}
.topbar-icon-btn.active {
    color: var(--teal-600);
    background: rgba(13,148,136,0.08);
}
.topbar-icon-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--teal-600);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}
/* Topbar vertical divider */
.topbar-divider {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 4px;
    flex-shrink: 0;
}

/* Keep old alias working */
.topbar-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    color: var(--text-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.topbar-search-btn:hover { background: rgba(0,0,0,0.06); color: var(--text); }

/* Feed onboarding banner */
.feed-onboarding-banner {
    background: linear-gradient(135deg, var(--teal-600) 0%, var(--teal-700, #0f766e) 100%);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    color: #fff;
}
.feed-onboarding-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.feed-onboarding-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}
.feed-onboarding-banner strong {
    font-size: 1rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
}
.feed-onboarding-banner p {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.92;
    line-height: 1.55;
}
.feed-onboarding-banner .btn-secondary {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
    color: #fff;
}
.feed-onboarding-banner .btn-secondary:hover {
    background: rgba(255,255,255,0.25);
}

/* ── Format toolbar ─────────────────────────────────────────────────────── */
.format-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    margin-bottom: 0.5rem;
}
.format-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}
.format-btn:hover { background: var(--gray-100, #f3f4f6); color: var(--text); }
.format-btn strong { font-size: 0.9rem; font-weight: 800; }
.format-btn em { font-style: italic; font-size: 0.9rem; }
.format-btn.emoji-trigger { font-size: 1rem; width: 30px; }
.format-toolbar-sep {
    width: 1px;
    height: 16px;
    background: var(--border);
    margin: 0 3px;
}
/* Match textarea bottom-radius to toolbar */
.post-compose-textarea {
    border-radius: var(--radius) var(--radius) 0 0 !important;
    border-bottom: none !important;
}

/* ── Emoji picker panel ──────────────────────────────────────────────────── */
.emoji-picker-panel {
    position: fixed;
    z-index: 1200;
    width: 280px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.emoji-picker-panel[hidden] { display: none; }
.emoji-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border);
    background: var(--gray-50, #f9fafb);
    padding: 4px 6px 0;
    gap: 2px;
    flex-shrink: 0;
}
.emoji-tabs::-webkit-scrollbar { display: none; }
.emoji-tab {
    border: none;
    background: transparent;
    font-size: 1.15rem;
    padding: 4px 6px;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: background 0.1s;
    flex-shrink: 0;
}
.emoji-tab:hover { background: var(--gray-100, #f3f4f6); }
.emoji-tab.active {
    background: var(--bg-card);
    border-bottom-color: var(--teal-600);
}
.emoji-grids { flex: 1; overflow: hidden; }
.emoji-grid {
    display: none;
    flex-wrap: wrap;
    gap: 1px;
    padding: 6px;
    max-height: 200px;
    overflow-y: auto;
}
.emoji-grid.active { display: flex; }
.emoji-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s, transform 0.08s;
    flex-shrink: 0;
}
.emoji-btn:hover {
    background: var(--gray-100, #f3f4f6);
    transform: scale(1.2);
}

/* Comment emoji button */
.comment-emoji-btn {
    flex-shrink: 0;
    font-size: 1rem;
}

/* Post compose box */
.post-compose {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.post-compose-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.post-compose-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.post-compose-trigger {
    flex: 1;
    text-align: left;
    cursor: pointer;
    color: var(--text-muted);
    background: var(--bg-app, var(--gray-50));
    border: 1px solid var(--border);
    border-radius: 2rem;
    padding: 0.55rem 1rem;
    font-size: 0.875rem;
    transition: border-color 0.15s, background 0.15s;
}
.post-compose-trigger:hover {
    border-color: var(--teal-500);
    background: #fff;
}
.post-compose-form {
    margin-top: 0.75rem;
}
.post-compose-textarea {
    resize: vertical;
    min-height: 80px;
    border-radius: var(--radius);
}
.post-compose-photo-preview {
    position: relative;
    margin-top: 0.75rem;
    display: inline-block;
}
.post-compose-photo-preview img {
    max-height: 200px;
    max-width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.photo-remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.post-compose-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.post-photo-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: background 0.12s, color 0.12s;
}
.post-photo-label:hover { background: var(--gray-50); color: var(--text); }
.post-compose-error {
    margin-top: 0.5rem;
    color: var(--red-600, #dc2626);
    font-size: 0.82rem;
}

/* Post card */
.post-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.post-card:hover { box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,0.07)); }
.post-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1rem 0;
}
.post-card-avatar-link { flex-shrink: 0; }
.post-card-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}
.post-card-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.post-card-author {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text);
    text-decoration: none;
}
.post-card-author:hover { color: var(--teal-600); }
.post-card-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.post-delete-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.3rem;
    border-radius: var(--radius-sm, 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
    margin-left: auto;
    flex-shrink: 0;
}
.post-delete-btn:hover { background: var(--red-50, #fef2f2); color: var(--red-600, #dc2626); }
.post-edit-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.3rem;
    border-radius: var(--radius-sm, 4px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
    margin-left: auto;
    flex-shrink: 0;
}
.post-edit-btn:hover { background: #f0fdf4; color: var(--teal-600); }
.post-edit-form {
    padding: .6rem 1rem;
    border-top: 1px solid var(--gray-100);
}
.post-edit-textarea {
    width: 100%;
    resize: vertical;
    font-size: .9rem;
    line-height: 1.5;
}
.comment-edit-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: .25rem;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: color .12s;
}
.comment-edit-btn:hover { color: var(--teal-600); }
.comment-edit-form {
    padding: .4rem .6rem;
    margin-top: .35rem;
}
.post-card-body {
    padding: 0.7rem 1rem 0.5rem;
    font-size: 0.925rem;
    line-height: 1.6;
}
.post-card-body p { margin: 0; }
.post-card-photo-wrap {
    padding: 0 1rem 0.5rem;
}
.post-card-photo {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--radius-sm, 4px);
    border: 1px solid var(--border);
    display: block;
}
.post-card-footer {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border);
}
.post-like-btn,
.post-comment-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.65rem;
    border: none;
    background: transparent;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-muted);
    transition: background 0.12s, color 0.12s;
}
.post-like-btn:hover,
.post-comment-toggle:hover {
    background: var(--gray-50);
    color: var(--text);
}
.post-like-btn.liked { color: var(--red-500, #ef4444); }
.post-like-btn.liked svg { stroke: var(--red-500, #ef4444); }

/* Comments section */
.post-comments {
    background: var(--bg-app, var(--gray-50, #f9fafb));
    border-top: 1px solid var(--border);
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.comment-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    position: relative;
}
.comment-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 2px;
}
.comment-bubble {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.4rem 0.65rem;
}
.comment-author {
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--text);
    margin-right: 0.4rem;
}
.comment-time {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.comment-body {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
}
.comment-delete-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.25rem;
    flex-shrink: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    margin-top: 2px;
    transition: color 0.1s;
}
.comment-delete-btn:hover { color: var(--red-600, #dc2626); }
.comment-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.25rem;
}
.comment-input {
    flex: 1;
    font-size: 0.85rem;
    padding: 0.45rem 0.75rem;
    border-radius: 2rem;
}

/* Feed empty state */
.feed-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEMBERS DIRECTORY
   ═══════════════════════════════════════════════════════════════════════════ */

.members-search-form { margin-bottom: 1rem; }
.members-search-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.members-search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}
.members-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.members-search-input { padding-left: 2.25rem !important; }

/* Tabs */
.tab-row {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}
.tab-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--teal-600); border-bottom-color: var(--teal-600); }

/* Members grid */
.members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.member-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--text);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.member-card:hover {
    border-color: var(--teal-400);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
}
.member-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}
.member-card-info { width: 100%; }
.member-card-name  { font-size: 0.925rem; font-weight: 700; display: block; }
.member-card-location { font-size: 0.78rem; color: var(--text-muted); display: block; margin-top: 0.15rem; }
.member-card-bio {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0.35rem 0 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.member-card-stats {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.search-page-form { margin-bottom: 1.5rem; }
.search-page-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}
.search-page-icon {
    position: absolute;
    left: 0.9rem;
    color: var(--text-muted);
    pointer-events: none;
}
.search-page-input {
    flex: 1;
    padding-left: 2.75rem !important;
    font-size: 1rem;
}
.search-section { margin-bottom: 2rem; }
.search-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}
.search-count {
    background: var(--gray-100, #f3f4f6);
    color: var(--text-muted);
    border-radius: 2rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
}
.search-members-list,
.search-posts-list,
.search-modules-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.search-member-row,
.search-post-row,
.search-module-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    font-size: 0.875rem;
    transition: border-color 0.12s, background 0.12s;
}
.search-member-row:hover,
.search-post-row:hover,
.search-module-row:hover {
    border-color: var(--teal-400);
    background: var(--teal-50, #f0fdfa);
}
.search-member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.search-member-location { color: var(--text-muted); font-size: 0.8rem; }
.search-post-row,
.search-module-row { flex-direction: column; align-items: flex-start; }
.search-post-author { font-weight: 600; font-size: 0.82rem; color: var(--text-muted); }
.search-post-body { font-size: 0.875rem; color: var(--text); margin-top: 0.1rem; display: block; }

/* Responsive adjustments */
@media (max-width: 640px) {
    .members-grid { grid-template-columns: 1fr 1fr; }
    .post-compose-actions { flex-wrap: wrap; }
}
@media (max-width: 420px) {
    .members-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   USER BADGES
   ═══════════════════════════════════════════════════════════════════════════ */
.badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.badge-list--compact { gap: 0.3rem; }
.user-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
}
.badge--teal   { background: rgba(13,148,136,0.12); color: var(--teal-700,#0f766e); border: 1px solid rgba(13,148,136,0.2); }
.badge--gold   { background: rgba(234,179,8,0.12);  color: #92400e; border: 1px solid rgba(234,179,8,0.25); }
.badge--orange { background: rgba(234,88,12,0.1);   color: #c2410c; border: 1px solid rgba(234,88,12,0.2); }
.badge--blue   { background: rgba(59,130,246,0.1);  color: #1d4ed8; border: 1px solid rgba(59,130,246,0.2); }

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN ANALYTICS
   ═══════════════════════════════════════════════════════════════════════════ */
.analytics-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.analytics-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    text-align: center;
}
.analytics-stat-card--teal { border-top: 3px solid var(--teal-500); }
.analytics-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--teal-600);
    line-height: 1;
    margin-bottom: 0.25rem;
}
.analytics-stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
}
.analytics-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Plan distribution bars */
.analytics-plan-list { display: flex; flex-direction: column; gap: 0.6rem; }
.analytics-plan-row  { display: flex; align-items: center; gap: 0.75rem; }
.analytics-plan-label { width: 80px; font-size: 0.82rem; font-weight: 600; flex-shrink: 0; }
.analytics-plan-bar-wrap {
    flex: 1;
    height: 8px;
    background: var(--gray-100);
    border-radius: 4px;
    overflow: hidden;
}
.analytics-plan-bar { height: 100%; border-radius: 4px; transition: width 0.4s; min-width: 2px; }
.analytics-plan-count { font-size: 0.82rem; font-weight: 700; width: 24px; text-align: right; flex-shrink: 0; }

/* Weekly bar chart */
.analytics-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 100px;
    padding-bottom: 1.5rem;
    position: relative;
}
.analytics-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 3px;
    position: relative;
}
.analytics-bar {
    width: 100%;
    background: var(--teal-500);
    border-radius: 3px 3px 0 0;
    min-height: 3px;
    transition: height 0.3s;
}
.analytics-bar-val {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1;
}
.analytics-bar-label {
    position: absolute;
    bottom: -1.25rem;
    font-size: 0.6rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE TOPBAR FIX — hide less critical icons on small screens
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* Hide forum + connections icons; they're reachable via the sidebar drawer */
    .topbar-icon-btn--forum,
    .topbar-icon-btn--connections { display: none !important; }

    /* Tighten the actions gap so bell + messages + search fit comfortably */
    .dashboard-topbar-actions { gap: 0.35rem; }

    /* Reduce topbar horizontal padding slightly to give more room */
    .dashboard-topbar { padding: 0 0.75rem; }

    /* Ensure hamburger is never crowded out */
    .hamburger-btn { flex-shrink: 0; margin-right: 0.25rem; }

    /* Topbar title can shrink freely */
    .dashboard-topbar-title { flex: 1; min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LANDING PAGE — .lp-* design system
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Navigation ─────────────────────────────────────────────────────────── */
.lp-nav {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 68px;
    gap: 1.5rem;
}
.lp-nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.lp-nav-logo-img { height: 44px; width: auto; }
.lp-nav-logo-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--teal-600);
}
.lp-nav-links { display: flex; align-items: center; gap: 1.5rem; }
.lp-nav-link {
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-600);
    transition: color 0.15s;
}
.lp-nav-link:hover { color: var(--teal-600); }
.lp-nav-ctas { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }

/* ── Hero logo ─────────────────────────────────────────────────────────── */
.lp-hero-logo {
    height: 130px;
    width: auto;
    max-width: 340px;
    display: block;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 0.25rem;
}
.lp-hero-logo-text {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    color: var(--teal-600);
    line-height: 1;
    display: block;
    margin-bottom: 0.5rem;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.lp-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.lp-hero-left { display: flex; flex-direction: column; gap: 1.25rem; }

.lp-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--teal-600);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}
.lp-eyebrow--light { color: rgba(255,255,255,0.8); }
.lp-eyebrow-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal-500);
    flex-shrink: 0;
    animation: lp-pulse 2.2s ease-in-out infinite;
}
@keyframes lp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.55; transform: scale(0.8); }
}

.lp-h1 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--gray-900);
    margin: 0;
}
.lp-h1 em { color: var(--teal-600); font-style: normal; }

.lp-hero-sub {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.65;
    max-width: 480px;
    margin: 0;
}

.lp-hero-stats {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    flex-wrap: wrap;
}
.lp-hero-stat { display: flex; flex-direction: column; gap: 0.1rem; }
.lp-hero-stat strong {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1;
}
.lp-hero-stat span {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lp-hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.lp-trust {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.77rem;
    color: var(--gray-400);
    margin: 0;
}

/* ── Platform preview (right side of hero) ─────────────────────────────── */
.lp-hero-right { display: flex; justify-content: center; }
.lp-platform-preview {
    background: var(--gray-900);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 460px;
}
.lp-preview-header {
    background: var(--gray-800);
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.lp-preview-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.lp-preview-dot--red   { background: #ff5f57; }
.lp-preview-dot--amber { background: #febc2e; }
.lp-preview-dot--green { background: #28c840; }
.lp-preview-bar-title {
    flex: 1;
    text-align: center;
    font-size: 0.72rem;
    color: var(--gray-400);
    font-weight: 500;
    margin-left: -30px;
}
.lp-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--gray-700);
    padding: 1px;
}
.lp-preview-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 0.75rem;
    background: var(--gray-900);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}
.lp-preview-card:hover          { background: var(--gray-800); }
.lp-preview-card--teal          { background: rgba(13,148,136,0.18); }
.lp-preview-card--teal:hover    { background: rgba(13,148,136,0.28); }
.lp-preview-card--pro           { opacity: 0.55; }
.lp-preview-icon                { font-size: 1.2rem; margin-bottom: 0.1rem; }
.lp-preview-card strong         { font-size: 0.78rem; font-weight: 700; color: #fff; }
.lp-preview-card > span         { font-size: 0.68rem; color: var(--gray-400); }

.lp-pro-chip {
    display: inline-block;
    background: var(--teal-600);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.1em 0.45em;
    border-radius: 3px;
    letter-spacing: 0.04em;
    vertical-align: 0.1em;
}

/* ── Sections ───────────────────────────────────────────────────────────── */
.lp-section         { padding: 4rem 2rem; }
.lp-section--gray   { background: var(--gray-50); }
.lp-container       { max-width: 1200px; margin: 0 auto; }
.lp-section-head    { text-align: center; max-width: 620px; margin: 0 auto 2.5rem; }

.lp-h2 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
    color: var(--gray-900);
    margin: 0 0 0.5rem;
    line-height: 1.2;
}
.lp-section-sub { font-size: 0.95rem; color: var(--gray-500); line-height: 1.6; margin: 0; }

/* ── Feature cards grid ─────────────────────────────────────────────────── */
.lp-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
}
.lp-feature-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}
.lp-feature-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 0.05rem; }
.lp-feature-card strong { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.35rem; color: var(--gray-900); }
.lp-feature-card p { margin: 0; font-size: 0.82rem; color: var(--gray-500); line-height: 1.55; }

/* ── Two-column layout ──────────────────────────────────────────────────── */
.lp-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
.lp-two-col--faq {
    grid-template-columns: 1fr 2fr;
    align-items: start;
}

/* ── Module list ────────────────────────────────────────────────────────── */
.lp-module-list { display: flex; flex-direction: column; }
.lp-module-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--gray-100);
}
.lp-module-item:last-child { border-bottom: none; }
.lp-module-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--teal-100);
    color: var(--teal-700);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lp-module-title { font-size: 0.875rem; font-weight: 600; color: var(--gray-800); display: block; }
.lp-module-desc  { font-size: 0.78rem; color: var(--gray-400); display: block; margin-top: 0.1rem; }

/* ── Included list ──────────────────────────────────────────────────────── */
.lp-included-list { display: flex; flex-direction: column; gap: 0.55rem; }
.lp-included-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.875rem;
    color: var(--gray-700);
    line-height: 1.5;
}
.lp-included-check { color: var(--teal-600); font-weight: 700; flex-shrink: 0; margin-top: 0.05rem; }
.lp-included-item strong { color: var(--gray-900); }

/* ── Community section ──────────────────────────────────────────────────── */
.lp-community-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
.lp-community-copy p { color: var(--gray-700); line-height: 1.7; }
.lp-community-features { display: flex; flex-direction: column; gap: 1rem; }
.lp-community-feature {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
}
.lp-community-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 0.05rem; }
.lp-community-feature strong { display: block; font-size: 0.95rem; color: var(--gray-900); }
.lp-community-feature span  { font-size: 0.85rem; color: var(--gray-500); }

.lp-feed-mockup { display: flex; flex-direction: column; gap: 0.85rem; }
.lp-feed-post {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    display: flex;
    gap: 0.85rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.lp-feed-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: var(--gray-700);
}
.lp-feed-body { flex: 1; min-width: 0; }
.lp-feed-meta { font-size: 0.78rem; color: var(--gray-500); margin-bottom: 0.4rem; }
.lp-feed-meta strong { color: var(--gray-900); }
.lp-feed-body p { margin: 0 0 0.6rem; font-size: 0.88rem; color: var(--gray-700); line-height: 1.55; }
.lp-feed-reactions { display: flex; gap: 1rem; font-size: 0.78rem; color: var(--gray-400); }

/* ── Pricing cards ──────────────────────────────────────────────────────── */
.lp-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
    align-items: start;
}
.lp-pricing-card {
    background: #fff;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.lp-pricing-card--featured {
    border-color: var(--teal-500);
    box-shadow: 0 4px 24px rgba(13,148,136,0.15);
    transform: translateY(-6px);
}
.lp-pricing-badge {
    display: inline-block;
    background: var(--teal-500);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2em 0.8em;
    border-radius: 99px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    width: fit-content;
}
.lp-pricing-name   { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--gray-700); }
.lp-pricing-price  { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--gray-900); line-height: 1; }
.lp-pricing-period { font-size: 0.85rem; font-weight: 400; color: var(--gray-500); }
.lp-pricing-note   { font-size: 0.78rem; color: var(--gray-400); margin: 0; }
.lp-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.84rem;
    flex: 1;
}
.lp-pricing-features li                { display: flex; align-items: center; gap: 0.5rem; }
.lp-pricing-features li.yes::before   { content: '✓'; color: var(--teal-600); font-weight: 700; flex-shrink: 0; }
.lp-pricing-features li.no            { opacity: 0.45; }
.lp-pricing-features li.no::before    { content: '×'; color: var(--gray-400); font-weight: 700; flex-shrink: 0; }
.lp-pricing-footer { text-align: center; font-size: 0.78rem; color: var(--gray-400); margin-top: 1.5rem; }
.btn-block { display: block; text-align: center; width: 100%; box-sizing: border-box; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.lp-faq { display: flex; flex-direction: column; }
.lp-faq-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--gray-200);
}
.lp-faq-item:last-child { border-bottom: none; }
.lp-faq-item dt { font-weight: 700; font-size: 0.9rem; color: var(--gray-900); margin-bottom: 0.4rem; }
.lp-faq-item dd { margin: 0; font-size: 0.85rem; color: var(--gray-600); line-height: 1.6; }

/* ── Final CTA ──────────────────────────────────────────────────────────── */
.lp-cta-final {
    background: linear-gradient(135deg, var(--teal-800) 0%, var(--teal-700) 60%, var(--teal-600) 100%);
    padding: 4.5rem 2rem;
}
.lp-cta-final-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
}
.lp-cta-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: #fff;
    margin: 0.25rem 0;
    line-height: 1.2;
}
.lp-cta-sub { font-size: 0.9rem; color: rgba(255,255,255,0.72); margin: 0; }
.lp-cta-final-actions { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; min-width: 220px; }
.btn-ghost-light {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.45);
    color: #fff;
    border-radius: var(--radius-md);
    padding: 0.65rem 1.25rem;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.7); }

/* ── LP Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .lp-hero { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.5rem; }
    .lp-hero-right { display: none; }
    .lp-features-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-two-col,
    .lp-two-col--faq { grid-template-columns: 1fr; gap: 2rem; }
    .lp-community-layout { grid-template-columns: 1fr; gap: 2rem; }
    .lp-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin-left: auto;
        margin-right: auto;
    }
    .lp-pricing-card--featured { transform: none; }
    .lp-cta-final-inner { grid-template-columns: 1fr; text-align: center; }
    .lp-cta-final-actions { align-items: center; }
    .lp-nav-links { display: none; }
    .lp-section { padding: 3rem 1.5rem; }
}
@media (max-width: 600px) {
    .lp-nav { padding: 0 1rem; height: 64px; }
    .lp-nav-logo-img { height: 40px; }
    .lp-hero-logo { height: 90px; }
    .lp-features-grid { grid-template-columns: 1fr; }
    .lp-hero-stats { gap: 1rem; }
    .lp-hero-actions { flex-direction: column; }
    .lp-hero-actions .btn { width: 100%; text-align: center; justify-content: center; }
    .lp-nav-ctas .btn-secondary { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   COOKIE CONSENT BANNER
   ══════════════════════════════════════════════════════════════════════════ */
.cookie-banner {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: calc(100% - 2.5rem);
    max-width: 760px;
    background: var(--gray-900);
    color: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.18);
    padding: 1rem 1.25rem;
    animation: cookie-slide-up 0.3s ease;
}
@keyframes cookie-slide-up {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.cookie-banner-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.cookie-banner-text {
    flex: 1;
    min-width: 200px;
}
.cookie-banner-text strong {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: .25rem;
    color: #fff;
}
.cookie-banner-text p {
    margin: 0;
    font-size: .78rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
}
.cookie-banner-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.cookie-banner-link {
    font-size: .78rem;
    color: rgba(255,255,255,0.55);
    text-decoration: underline;
    white-space: nowrap;
}
.cookie-banner-link:hover { color: rgba(255,255,255,0.85); }

@media (max-width: 600px) {
    .cookie-banner { bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; width: 100%; }
    .cookie-banner-inner { flex-direction: column; align-items: flex-start; }
    .cookie-banner-actions { width: 100%; }
}

/* ── PWA app-op-startscherm tabs ──────────────────────────── */
.pwa-tab-btn--active {
    background: var(--teal-600) !important;
    color: #fff !important;
    border-color: var(--teal-600) !important;
}