/* ============================================================
   Amaanah — design systeem
   Wit-beige Islamitisch palet met warme overvloeiende gradienten.
   Layout-taal: split-auth (links donker, rechts licht) +
   app-shell met donkere zijbalk en lichte werkruimte.
   ============================================================ */

:root {
    /* Licht beige / wit palet */
    --pearl: #ffffff;
    --ivory: #f8f4ec;
    --champagne: #ead9bf;
    --sand: #d8c19b;
    --gold: #b8946a;
    --gold-soft: #d6b78a;
    --coffee: #6b4f30;

    /* Donkere oppervlakken (warme koffie i.p.v. zwart) */
    --espresso: #3b2a1f;
    --espresso-2: #4a3527;
    --espresso-3: #5a4131;
    --espresso-line: rgba(255, 240, 220, 0.10);
    --espresso-text: #f3e8d8;
    --espresso-text-dim: rgba(243, 232, 216, 0.65);

    /* Tekst */
    --ink: #2d2418;
    --ink-soft: #6b5a44;
    --line: rgba(120, 95, 60, 0.12);
    --canvas: #faf7f1;

    /* Statuskleuren (zacht, beige-vriendelijk) */
    --ok: #6f8a4a;        --ok-bg: #e8efd9;
    --warn: #b07c2c;      --warn-bg: #f6e6c5;
    --info: #76675a;      --info-bg: #ece2d2;
    --danger: #a44a45;    --danger-bg: #f3dada;

    /* Effecten */
    --shadow-sm: 0 4px 14px rgba(110, 80, 40, 0.08);
    --shadow:    0 12px 40px rgba(110, 80, 40, 0.12);
    --shadow-lg: 0 24px 60px rgba(110, 80, 40, 0.20);
    --radius:    18px;
    --radius-sm: 12px;
    --radius-xs: 8px;

    --grad-light: linear-gradient(135deg, var(--pearl) 0%, var(--ivory) 60%, var(--champagne) 100%);
    --grad-card:  linear-gradient(180deg, #fffdf9 0%, var(--pearl) 100%);
    --grad-gold:  linear-gradient(135deg, var(--gold) 0%, var(--coffee) 100%);
    --grad-dark:  linear-gradient(160deg, var(--espresso) 0%, var(--espresso-2) 60%, var(--espresso-3) 100%);
    --grad-banner: linear-gradient(120deg, var(--espresso) 0%, var(--espresso-2) 50%, #6f4a32 100%);

    --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --font-body:    "Inter", "Segoe UI", -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    color: var(--ink);
    font-family: var(--font-body);
    background: var(--canvas);
    min-height: 100vh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--coffee); text-decoration: none; transition: color .15s; }
a:hover { color: var(--gold); }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 600;
    letter-spacing: .2px;
    margin: 0 0 .5em;
}
h1 { font-size: 2.2rem; line-height: 1.18; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.2rem; }
small, .muted { color: var(--ink-soft); }

/* ============================================================
   1. Marketing shell (topbar + content + footer)
   ============================================================ */
body.marketing {
    background: var(--grad-light);
    background-attachment: fixed;
}
.topbar {
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    background: rgba(255, 253, 248, 0.82);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 50;
    transition: box-shadow .25s, background .25s;
}
.topbar.is-scrolled {
    background: rgba(255, 253, 248, 0.94);
    box-shadow: 0 8px 30px -20px rgba(107,79,48,.25);
}
.topbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 28px; max-width: 1200px; margin: 0 auto;
    gap: 24px;
}
.brand {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font-display);
    font-size: 1.65rem; font-weight: 700;
    color: var(--coffee); letter-spacing: .5px;
    line-height: 1;
}
.brand::before {
    content: ""; width: 36px; height: 40px;
    background: var(--grad-gold);
    border-radius: 10px 10px 10px 32%;
    transform: rotate(-6deg);
    box-shadow: 0 8px 18px -8px rgba(184,148,106,.6);
    flex-shrink: 0;
    background-image:
        radial-gradient(circle at 50% 42%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%),
        var(--grad-gold);
}
.brand-text {
    background: var(--grad-gold);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    display: inline-flex; flex-direction: column; gap: 4px; line-height: 1;
}
.brand:has(.brand-logo)::before { display: none; }
.brand-logo {
    width: 44px; height: 44px; object-fit: contain;
    border-radius: 12px;
    flex-shrink: 0;
}
.logo.logo-img {
    background: transparent !important;
    border-radius: 12px !important;
    transform: none !important;
    box-shadow: none !important;
    object-fit: contain;
    padding: 0 !important;
    font-size: 0 !important;
}
.brand-text small {
    font-size: .6rem; color: var(--ink-soft);
    letter-spacing: 3px; -webkit-text-fill-color: var(--ink-soft);
    font-family: var(--font-body); font-weight: 600;
}
.nav { display: flex; gap: 8px; align-items: center; }
.nav > a {
    color: var(--coffee); font-weight: 500; font-size: .95rem;
    padding: 8px 14px; border-radius: 10px;
    transition: background .15s, color .15s;
}
.nav > a:not(.btn):hover { background: rgba(184,148,106,.10); color: var(--coffee); }
.nav .btn { margin-left: 6px; }
.nav .btn-primary {
    padding: 11px 22px; font-size: .95rem;
    box-shadow: 0 12px 28px -10px rgba(107,79,48,.55), inset 0 1px 0 rgba(255,255,255,.25);
    color: #fff; font-weight: 600; letter-spacing: .2px;
}
.nav .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 32px -10px rgba(107,79,48,.6); }

/* ─── Mobile hamburger ──────────────────────────────────────── */
.nav-toggle{
    display:none;
    width:44px; height:44px;
    align-items:center; justify-content:center;
    flex-direction:column; gap:5px;
    background:transparent; border:1px solid var(--line);
    border-radius:12px; cursor:pointer; padding:0;
    transition: background .15s, border-color .15s;
}
.nav-toggle:hover{ background: rgba(184,148,106,.08); border-color: var(--coffee); }
.nav-toggle__bar{
    display:block; width:20px; height:2px; border-radius:2px;
    background: var(--coffee);
    transition: transform .25s ease, opacity .15s ease;
}
body.nav-open .nav-toggle__bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle__bar:nth-child(2){ opacity: 0; }
body.nav-open .nav-toggle__bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 720px) {
    .topbar-inner { padding: 12px 18px; gap: 12px; }
    .brand { font-size: 1.4rem; }
    .brand::before { width: 30px; height: 34px; }
    .brand-text small { display: none; }

    .nav-toggle{ display:inline-flex; }

    .nav{
        position: fixed;
        top: 64px; left: 12px; right: 12px;
        flex-direction: column; align-items: stretch;
        gap: 4px; padding: 14px;
        background: rgba(255,253,248,.98);
        backdrop-filter: saturate(140%) blur(14px);
        -webkit-backdrop-filter: saturate(140%) blur(14px);
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: 0 24px 60px -20px rgba(107,79,48,.35);
        opacity: 0; visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
        z-index: 60;
    }
    body.nav-open .nav{ opacity: 1; visibility: visible; transform: translateY(0); }
    .nav > a{
        padding: 12px 14px; font-size: 1rem; font-weight: 600;
        border-radius: 10px; text-align: left;
    }
    .nav > a:not(.btn){ border: 1px solid transparent; }
    .nav > a:not(.btn):hover{ background: rgba(184,148,106,.10); }
    .nav .btn{ margin-left: 0; margin-top: 6px; text-align: center; }
    .nav .btn-primary{ padding: 12px 18px; font-size: .95rem; }
}

.container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.container.narrow { max-width: 760px; }

.hero-marketing {
    padding: 100px 28px 70px;
    text-align: center;
    background: radial-gradient(ellipse at top, #fffdf6 0%, transparent 70%);
}
.hero-marketing .eyebrow { color: var(--gold); letter-spacing: 4px; text-transform: uppercase; font-size: .85rem; }
.hero-marketing h1 { font-size: 3.6rem; margin: 16px auto; max-width: 14ch; }
.hero-marketing h1 em { font-style: normal; color: var(--gold); }
.hero-marketing p { color: var(--ink-soft); max-width: 60ch; margin: 0 auto 32px; font-size: 1.1rem; }
.hero-marketing .actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.steps {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px; margin-top: 40px;
}
.step {
    background: rgba(255, 253, 248, 0.7);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 22px;
    transition: transform .2s, box-shadow .2s;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step .num {
    display: inline-flex; width: 36px; height: 36px;
    border-radius: 50%; background: var(--grad-gold); color: #fff;
    font-weight: 700; align-items: center; justify-content: center;
    margin-bottom: 14px;
}

footer.site-footer {
    margin-top: 80px; padding: 40px 24px; text-align: center;
    color: var(--ink-soft); font-size: .9rem;
    border-top: 1px solid var(--line);
    background: var(--grad-card);
}

/* ============================================================
   1b. Landing page — uitgebreide secties
   ============================================================ */
.btn-xl { padding: 16px 26px; font-size: 1rem; border-radius: 14px; }
.btn-sm { padding: 7px 14px; font-size: .82rem; border-radius: 8px; }

.lp-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--gold); letter-spacing: 3px; text-transform: uppercase;
    font-size: .78rem; font-weight: 600;
}
.lp-section-head { text-align: center; margin: 0 auto 48px; max-width: 760px; }
.lp-section-head h2 { font-size: 2.4rem; margin: 14px 0 12px; line-height: 1.15; }
.lp-section-head h2 em { font-style: normal; color: var(--gold); }

/* HERO --------------------------------------------------------- */
.lp-hero {
    position: relative; overflow: hidden;
    padding: 80px 0 60px;
    background:
        radial-gradient(ellipse 80% 60% at 20% 0%, rgba(184,148,106,.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(214,183,138,.20) 0%, transparent 60%),
        var(--grad-light);
}
.lp-hero-grid {
    display: grid; grid-template-columns: 1.1fr .9fr;
    gap: 56px; align-items: center; position: relative; z-index: 1;
}
.lp-hero-text h1 {
    font-size: 3.6rem; line-height: 1.05; margin: 14px 0 22px;
    letter-spacing: -.01em;
}
.lp-hero-text h1 em {
    font-style: italic;
    background: var(--grad-gold);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-lede { color: var(--ink-soft); font-size: 1.15rem; line-height: 1.6; max-width: 56ch; margin-bottom: 28px; }
.lp-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.lp-hero-cta .btn-ghost { color: var(--coffee); }
.lp-hero-cta .btn-ghost:hover { background: rgba(184,148,106,.08); color: var(--coffee); }
.lp-hero-trust {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 18px;
    font-size: .9rem; color: var(--ink-soft);
}
.lp-hero-trust li { display: inline-flex; align-items: center; gap: 8px; }
.lp-hero-trust i { color: var(--gold); }

/* Hero floating shapes */
.lp-hero-shape {
    position: absolute; border-radius: 50%; pointer-events: none;
    filter: blur(40px); opacity: .55; z-index: 0;
}
.lp-shape-1 { width: 360px; height: 360px; top: -80px; right: -80px;
    background: radial-gradient(circle, rgba(214,183,138,.55) 0%, transparent 70%); }
.lp-shape-2 { width: 280px; height: 280px; bottom: -100px; left: -60px;
    background: radial-gradient(circle, rgba(184,148,106,.45) 0%, transparent 70%); }

/* Hero match-card mock */
.lp-hero-card { position: relative; }
.lp-card-glow {
    position: absolute; inset: -20px;
    background: var(--grad-gold);
    filter: blur(50px); opacity: .25; border-radius: 32px;
    z-index: 0;
}
.lp-mock {
    position: relative; z-index: 1;
    background: #fff; border: 1px solid var(--line);
    border-radius: 22px; box-shadow: 0 25px 60px -25px rgba(107,79,48,.35);
    overflow: hidden;
    transform: rotate(-1.5deg);
    transition: transform .3s;
}
.lp-mock:hover { transform: rotate(0deg) translateY(-4px); }
.lp-mock-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; background: var(--ivory);
    border-bottom: 1px solid var(--line);
}
.lp-mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold-soft); opacity: .55; }
.lp-mock-dot:first-child { background: #e0a190; opacity: .7; }
.lp-mock-dot:nth-child(2) { background: #e7c477; opacity: .7; }
.lp-mock-title {
    margin-left: auto; font-family: var(--font-display); font-weight: 600;
    color: var(--coffee); font-size: .95rem;
}
.lp-mock-pill {
    margin-left: 10px;
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.2px;
    color: var(--coffee);
    background: rgba(212, 175, 55, .18);
    border: 1px solid rgba(212, 175, 55, .35);
    padding: 3px 9px;
    border-radius: 999px;
}
.lp-mock-disclaimer {
    margin: 12px 0 0;
    text-align: center;
    font-size: .78rem;
    color: var(--coffee);
    opacity: .7;
}
.lp-mock-disclaimer i { margin-right: 5px; opacity: .85; }
.lp-mock-body { padding: 22px; }
.lp-mock-row {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 18px; border-bottom: 1px dashed var(--line);
    margin-bottom: 16px;
}
.lp-mock-avatar {
    width: 50px; height: 50px; border-radius: 50%;
    background: var(--grad-gold); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.2rem;
    box-shadow: var(--shadow-sm);
}
.lp-mock-row b { display: block; font-size: 1.05rem; }
.lp-mock-row small { color: var(--ink-soft); font-size: .82rem; }
.lp-mock-score {
    margin-left: auto;
    background: rgba(184,148,106,.12); color: var(--coffee);
    padding: 6px 12px; border-radius: 999px;
    font-weight: 700; font-size: .85rem;
}
.lp-mock-traits {
    list-style: none; padding: 0; margin: 0 0 18px;
    display: grid; gap: 8px; font-size: .9rem; color: var(--ink-soft);
}
.lp-mock-traits i { color: var(--gold); margin-right: 8px; width: 16px; text-align: center; }
.lp-mock-actions { display: flex; gap: 10px; }
.lp-mock-actions .btn { flex: 1; justify-content: center; }
.lp-mock-foot {
    position: relative; z-index: 1;
    margin-top: 16px; padding: 12px 18px;
    background: rgba(255,253,248,.85); border: 1px dashed var(--gold-soft);
    border-radius: 12px; font-size: .82rem; color: var(--ink-soft);
    text-align: center;
}
.lp-mock-foot i { color: var(--gold); margin-right: 6px; }

/* WAARDEN ------------------------------------------------------ */
.lp-values { padding: 90px 0 40px; padding-left: 28px; padding-right: 28px; }
.lp-value-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}
.lp-value {
    background: rgba(255,253,248,.85);
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 28px 24px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.lp-value:hover {
    transform: translateY(-4px); box-shadow: var(--shadow);
    border-color: var(--gold-soft);
}
.lp-value-icon {
    width: 50px; height: 50px; border-radius: 14px;
    background: var(--grad-gold); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem; box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
}
.lp-value h3 { margin: 0 0 8px; font-size: 1.25rem; }
.lp-value p { color: var(--ink-soft); margin: 0; line-height: 1.55; }

/* STAPPEN ------------------------------------------------------ */
.lp-steps-wrap {
    padding: 90px 0;
    background:
        radial-gradient(ellipse at center, rgba(255,253,248,.9) 0%, transparent 80%),
        var(--ivory);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.lp-steps {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 22px;
}
.lp-step {
    position: relative;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 32px 22px 22px; text-align: center;
    transition: transform .2s, box-shadow .2s;
    margin-top: 18px;
}
.lp-step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.lp-step-num {
    position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--grad-gold); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; box-shadow: var(--shadow-sm);
    font-family: var(--font-display);
}
.lp-step-icon { font-size: 1.5rem; color: var(--gold); margin: 12px 0 10px; display: block; }
.lp-step h3 { margin: 0 0 6px; font-size: 1.1rem; }
.lp-step p { color: var(--ink-soft); margin: 0; font-size: .9rem; line-height: 1.5; }

/* PRIJS -------------------------------------------------------- */
.lp-pricing { padding: 90px 0 40px; padding-left: 28px; padding-right: 28px; }
.lp-price-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px; max-width: 920px; margin: 0 auto;
    align-items: stretch;
}
.lp-price-card {
    position: relative;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 32px 28px;
    transition: transform .2s, box-shadow .2s;
}
.lp-price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.lp-price-card--featured {
    border-color: var(--gold-soft);
    box-shadow: 0 25px 50px -25px rgba(184,148,106,.45);
}
.lp-price-tag {
    position: absolute; top: -12px; left: 22px;
    background: var(--ivory); color: var(--ink-soft);
    padding: 4px 12px; border-radius: 999px;
    font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600;
    border: 1px solid var(--line);
}
.lp-price-tag--gold {
    background: var(--grad-gold); color: #fff; border-color: transparent;
}
.lp-price-card h3 { margin: 6px 0 10px; font-size: 1.4rem; }
.lp-price { margin: 0 0 20px; }
.lp-price b { font-family: var(--font-display); font-size: 2.6rem; color: var(--coffee); display: inline-block; line-height: 1; }
.lp-price small { display: block; color: var(--ink-soft); font-size: .85rem; margin-top: 4px; }
.lp-price-features {
    list-style: none; padding: 0; margin: 0 0 24px;
    display: grid; gap: 10px; font-size: .92rem; color: var(--ink-soft);
}
.lp-price-features i { color: var(--gold); margin-right: 8px; }

/* QUOTES ------------------------------------------------------- */
.lp-quotes-wrap { padding: 90px 0; background: var(--ivory); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lp-quotes {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}
.lp-quote {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 28px 24px; margin: 0; position: relative;
    transition: transform .2s, box-shadow .2s;
}
.lp-quote:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.lp-quote-mark {
    color: var(--gold-soft); font-size: 1.6rem; opacity: .8; margin-bottom: 8px; display: block;
}
.lp-quote blockquote {
    margin: 0 0 16px; font-family: var(--font-display);
    font-size: 1.1rem; line-height: 1.5; color: var(--coffee);
    font-style: italic;
}
.lp-quote figcaption {
    display: flex; align-items: center; gap: 6px;
    color: var(--ink-soft); font-size: .88rem;
}
.lp-quote figcaption b { color: var(--coffee); }
.lp-quote figcaption span::before { content: "·\00a0"; margin: 0 4px 0 6px; }

/* FAQ ---------------------------------------------------------- */
.lp-faq { padding: 90px 0 40px; padding-left: 28px; padding-right: 28px; }
.lp-faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.lp-faq-list details {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 18px 22px; transition: border-color .2s, box-shadow .2s;
}
.lp-faq-list details[open] { border-color: var(--gold-soft); box-shadow: var(--shadow-sm); }
.lp-faq-list summary {
    cursor: pointer; font-weight: 600; color: var(--coffee);
    display: flex; align-items: center; gap: 12px;
    list-style: none; outline: none;
}
.lp-faq-list summary::-webkit-details-marker { display: none; }
.lp-faq-list summary::marker { content: ""; }
.lp-faq-list details[open] .lp-faq-chev { transform: rotate(90deg); }
.lp-faq-list details > p { margin: 12px 0 0 28px; color: var(--ink-soft); line-height: 1.6; }
.lp-faq-chev { color: var(--gold); transition: transform .2s; }

/* EIND-CTA ----------------------------------------------------- */
.lp-final-cta { padding: 60px 0 100px; }
.lp-final-card {
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
    background: var(--grad-gold); color: #fff;
    border-radius: 24px; padding: 44px 48px;
    box-shadow: 0 30px 60px -25px rgba(107,79,48,.55);
    flex-wrap: wrap;
}
.lp-final-card h2 { color: #fff; margin: 0 0 6px; font-size: 1.9rem; }
.lp-final-card p { color: rgba(255,255,255,.85); margin: 0; }
.lp-final-card .btn-primary {
    background: #fff; color: var(--coffee);
    box-shadow: 0 10px 25px -10px rgba(0,0,0,.3);
}
.lp-final-card .btn-primary:hover { background: var(--ivory); color: var(--coffee); }

/* Mobile ------------------------------------------------------- */
@media (max-width: 900px) {
    .lp-hero { padding: 60px 0 40px; }
    .lp-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .lp-hero-text h1 { font-size: 2.6rem; }
    .lp-section-head h2 { font-size: 1.8rem; }
    .lp-final-card { padding: 32px; text-align: center; }
    .lp-final-card .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   2. Split-auth shell (links donker hero, rechts licht form)
   ============================================================ */
.auth-shell {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
    background: var(--pearl);
}
.auth-side {
    background: var(--grad-dark);
    color: var(--espresso-text);
    padding: 56px 56px 48px;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
}
.auth-side::before, .auth-side::after {
    content: ""; position: absolute; border-radius: 50%;
    pointer-events: none;
}
.auth-side::before { width: 480px; height: 480px; top: -160px; left: -160px;
    background: radial-gradient(circle, rgba(216, 193, 155, .15) 0%, transparent 70%); }
.auth-side::after  { width: 360px; height: 360px; bottom: -140px; right: -120px;
    background: radial-gradient(circle, rgba(184,148,106,.20) 0%, transparent 70%); }
.auth-brand {
    display: flex; align-items: center; gap: 16px; position: relative; z-index: 1;
}
.auth-brand .logo {
    width: 56px; height: 64px;
    background: var(--pearl); color: var(--espresso);
    border-radius: 14px 14px 14px 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
    box-shadow: var(--shadow-sm);
    transform: rotate(-4deg);
}
.auth-brand-text {
    font-family: var(--font-display); font-weight: 600; font-size: 1.5rem;
    line-height: 1.1; color: var(--pearl);
}
.auth-brand-text small {
    display: block; font-family: var(--font-body); font-weight: 500;
    font-size: .7rem; letter-spacing: 3px; color: var(--espresso-text-dim);
    margin-top: 6px;
}
.auth-hero { position: relative; z-index: 1; max-width: 460px; }
.auth-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(255, 240, 220, .08); border: 1px solid var(--espresso-line);
    color: var(--espresso-text-dim); font-size: .8rem; letter-spacing: .5px;
    margin-bottom: 26px;
}
.auth-eyebrow::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold-soft);
}
.auth-hero h1 {
    font-family: var(--font-display); font-weight: 600;
    font-size: 3rem; line-height: 1.1; color: var(--pearl);
    margin: 0 0 18px;
}
.auth-hero h1 em { font-style: normal; color: var(--gold-soft); }
.auth-hero p {
    color: var(--espresso-text-dim); font-size: 1rem; line-height: 1.6;
    max-width: 42ch;
}
.auth-features {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: 4px;
    border-top: 1px solid var(--espresso-line); padding-top: 24px;
}
.auth-feature {
    display: flex; gap: 14px; align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--espresso-line);
}
.auth-feature:last-child { border-bottom: none; }
.auth-feature .ico {
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255, 240, 220, .08); color: var(--gold-soft);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.auth-feature b { display: block; color: var(--pearl); font-weight: 600; font-size: .95rem; }
.auth-feature span { color: var(--espresso-text-dim); font-size: .82rem; }

.auth-main {
    display: flex; align-items: center; justify-content: center;
    padding: 48px 56px;
    background: var(--pearl);
}
.auth-card { width: 100%; max-width: 440px; }
.auth-card h2 {
    font-family: var(--font-display); font-size: 2rem;
    color: var(--espresso); margin: 0 0 6px;
}
.auth-card .lead { color: var(--ink-soft); margin-bottom: 28px; }
.auth-card .field-row { margin-bottom: 18px; }
.auth-card label { font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.auth-card .input-wrap { position: relative; margin-top: 6px; }
.auth-card input[type=text],
.auth-card input[type=email],
.auth-card input[type=password],
.auth-card input[type=tel],
.auth-card input[type=number] {
    width: 100%; padding: 14px 16px 14px 44px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: #fff; font-family: inherit; font-size: 1rem;
}
.auth-card input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(184,148,106,.15); }
.auth-card .input-wrap::before {
    content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; opacity: .55;
    background-repeat: no-repeat; background-position: center; background-size: contain;
}
.auth-card .input-wrap.envelope::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b4f30' stroke-width='2'><rect x='3' y='5' width='18' height='14' rx='2'/><polyline points='3,7 12,13 21,7'/></svg>"); }
.auth-card .input-wrap.lock::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b4f30' stroke-width='2'><rect x='4' y='10' width='16' height='11' rx='2'/><path d='M8 10V7a4 4 0 1 1 8 0v3'/></svg>"); }
.auth-card .input-wrap.phone::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b4f30' stroke-width='2'><rect x='6' y='2' width='12' height='20' rx='2'/><line x1='10' y1='18' x2='14' y2='18'/></svg>"); }
.auth-card .input-wrap.code::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b4f30' stroke-width='2'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M7 10h2M11 10h2M15 10h2M7 14h2M11 14h2M15 14h2'/></svg>"); }

/* FontAwesome variant: <div class="input-wrap fa"><i class="fa-..."></i><input/></div> */
.auth-card .input-wrap.fa::before { content: none; }
.auth-card .input-wrap.fa {
    position: relative;
}
.auth-card .input-wrap.fa > i.fa-solid,
.auth-card .input-wrap.fa > i.fa-regular,
.auth-card .input-wrap.fa > i.fa-brands {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--coffee); opacity: .6; font-size: .95rem;
    pointer-events: none;
}
.auth-card .input-wrap.fa input,
.auth-card .input-wrap.fa select {
    padding-left: 44px;
}

/* Algemene FA-input-wrap (buiten auth-card) */
.input-wrap.fa { position: relative; display: block; }
.input-wrap.fa > i.fa-solid,
.input-wrap.fa > i.fa-regular {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--coffee); opacity: .55; font-size: .95rem; pointer-events: none;
}
.input-wrap.fa input, .input-wrap.fa select { padding-left: 44px; }

/* Gender-kaarten (broeder/zuster keuze) */
.gender-cards {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px;
}
@media (max-width: 480px) { .gender-cards { grid-template-columns: 1fr; } }
.gender-card {
    position: relative; cursor: pointer;
    background: #fff; border: 2px solid var(--line);
    border-radius: var(--radius-sm); padding: 22px 18px 18px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.gender-card:hover { border-color: var(--gold-soft); transform: translateY(-2px); }
.gender-card input[type=radio] {
    position: absolute; opacity: 0; pointer-events: none;
}
.gender-card .gender-ico {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--ivory); color: var(--coffee);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; margin-bottom: 6px;
}
.gender-card b { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); font-weight: 600; }
.gender-card span { color: var(--ink-soft); font-size: .82rem; }
.gender-card:has(input[type=radio]:checked),
.gender-card.is-selected {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(184,148,106,.12), var(--shadow-sm);
    background: #fffdf6;
}
.gender-card:has(input[type=radio]:checked) .gender-ico,
.gender-card.is-selected .gender-ico {
    background: var(--grad-gold); color: #fff;
}

/* Checkbox-regel (terms) */
.checkbox-line {
    display: flex; gap: 10px; align-items: flex-start;
    background: #fffdf8; border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 12px 14px;
    text-transform: none; letter-spacing: 0; font-weight: 500;
    color: var(--ink); cursor: pointer; font-size: .9rem;
}
.checkbox-line input[type=checkbox] {
    width: 18px; height: 18px; margin-top: 2px;
    accent-color: var(--gold); flex-shrink: 0;
}
.checkbox-line span { line-height: 1.4; }

.auth-card .helptext { color: var(--ink-soft); font-size: .82rem; margin-top: 6px; display: block; }
.auth-card .errorlist { list-style: none; padding: 0; margin: 8px 0 0; color: var(--danger); font-size: .85rem; }
.auth-card .form-actions { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.auth-card .btn-primary {
    background: var(--grad-gold); color: #fff; border: none;
    padding: 14px 22px; border-radius: var(--radius-sm); font-weight: 600;
    cursor: pointer; box-shadow: var(--shadow-sm);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 1rem;
}
.auth-card .auth-foot { color: var(--ink-soft); text-align: center; font-size: .9rem; margin-top: 26px; }
.auth-card .auth-foot a { color: var(--coffee); font-weight: 600; }
.auth-side .auth-foot-brand { position: relative; z-index: 1; color: var(--espresso-text-dim); font-size: .8rem; }

@media (max-width: 960px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-side { padding: 36px 28px; min-height: auto; }
    .auth-main { padding: 36px 28px; }
    .auth-hero h1 { font-size: 2.2rem; }
    .auth-features { display: none; }
}

/* Mobiel: krimp de bruine hero tot een compacte header-strip
   met alleen het logo + één korte regel. Hero-titel & tagline en
   features vallen weg zodat het formulier meteen zichtbaar is. */
@media (max-width: 720px) {
    .auth-shell {
        min-height: 100dvh;
        grid-template-rows: auto 1fr;
    }
    .auth-side {
        padding: 12px 16px;
        min-height: 0;
        height: auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px solid rgba(255, 240, 220, .08);
    }
    .auth-side::before, .auth-side::after { display: none; }
    .auth-brand { gap: 12px; align-items: center; text-decoration: none; }
    .auth-brand .logo {
        width: 40px; height: 40px;
        font-size: 1.05rem;
        border-radius: 12px;
        transform: none;
    }
    .auth-brand-text {
        font-size: 1.1rem;
        margin-top: 0;
        display: flex; align-items: baseline; gap: 10px;
        color: var(--pearl);
    }
    .auth-brand-text small {
        display: inline;
        font-size: .58rem;
        letter-spacing: 2px;
        margin-top: 0;
        color: var(--gold-soft);
        opacity: .85;
    }
    /* Terug-knop rechts in de header. */
    .auth-back {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(255, 240, 220, .08);
        border: 1px solid var(--espresso-line);
        color: var(--pearl); text-decoration: none;
        font-size: .82rem; font-weight: 500;
    }
    .auth-back:hover { background: rgba(255, 240, 220, .14); }
    .auth-back span { display: inline; }
    /* Hero-tekst en footer-merk verbergen op mobile. */
    .auth-hero, .auth-side .auth-foot-brand { display: none; }
    /* Form gecentreerd binnen de resterende ruimte. */
    .auth-main {
        padding: 24px 18px 40px;
        align-items: center;
        justify-content: center;
    }
    .auth-card { margin: auto 0; }
}

/* Op desktop: terug-knop linksboven boven de hero-tekst. */
@media (min-width: 721px) {
    .auth-back {
        position: absolute; top: 24px; right: 32px;
        z-index: 2;
        display: inline-flex; align-items: center; gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(255, 240, 220, .08);
        border: 1px solid var(--espresso-line);
        color: var(--pearl); text-decoration: none;
        font-size: .85rem;
    }
    .auth-back:hover { background: rgba(255, 240, 220, .14); }
}

/* ============================================================
   3. App shell (donkere zijbalk + lichte werkruimte)
   ============================================================ */
body.app { background: var(--canvas); }
.app-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}
.app-sidebar {
    background: var(--grad-dark);
    color: var(--espresso-text);
    padding: 14px 18px 22px;
    display: flex; flex-direction: column; gap: 18px;
    position: fixed; top: 0; left: 0;
    width: 260px; height: 100vh; overflow-y: auto;
    z-index: 20;
}
.app-shell > .app-main { grid-column: 2; }
@media (max-width: 1024px) {
    .app-shell > .app-main { grid-column: auto; }
}
.app-sidebar .brand-block {
    display: flex; align-items: center; gap: 12px;
    padding: 0 8px;
}
.app-sidebar .brand-block .logo {
    width: 44px; height: 50px;
    background: var(--pearl); color: var(--espresso);
    border-radius: 12px 12px 12px 40%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
    transform: rotate(-4deg); flex-shrink: 0;
}
.app-sidebar .brand-block-text {
    font-family: var(--font-display); font-weight: 600; font-size: 1.2rem;
    color: var(--pearl); line-height: 1.1;
}
.app-sidebar .brand-block-text small {
    display: block; font-family: var(--font-body); font-weight: 500;
    font-size: .62rem; letter-spacing: 2.5px; color: var(--espresso-text-dim);
    margin-top: 6px;
}
.nav-section-title {
    font-size: .68rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--espresso-text-dim); padding: 0 14px; margin-bottom: 8px;
}

/* Collapsible admin sections (uses native <details>/<summary>) */
.admin-sections { display: flex; flex-direction: column; gap: 4px; }
.nav-group { padding: 0; }
.nav-group__head {
    list-style: none;
    cursor: pointer;
    display: block; /* Safari bug: flex op <summary> blokkeert toggle */
    padding: 8px 14px;
    margin: 6px 0 4px;
    border-radius: 8px;
    color: #3E2A1F;
    font-size: .68rem; letter-spacing: 2px; text-transform: uppercase;
    font-weight: 700;
    user-select: none;
    transition: background .15s ease, color .15s ease;
}
.nav-group__head::-webkit-details-marker { display: none; }
.nav-group__head::marker { display: none; content: ''; }
.nav-group__head:hover { background: rgba(62, 42, 31, .08); color: #2a1c14; }
.nav-group__chev { color: #3E2A1F; }
.nav-group__head-inner {
    display: flex; align-items: center; justify-content: space-between;
    pointer-events: none; /* zorg dat klik altijd door <summary> wordt afgehandeld */
}
.nav-group__title { font-weight: 600; }
.nav-group__chev {
    font-size: .65rem; opacity: .55;
    transition: transform .2s ease, opacity .15s ease;
}
.nav-group[open] > .nav-group__head .nav-group__chev { transform: rotate(180deg); opacity: .85; }
.nav-group > .app-nav { padding: 2px 0 6px; }
.app-nav { display: flex; flex-direction: column; gap: 2px; }
.app-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 10px;
    color: var(--espresso-text-dim); font-weight: 500; font-size: .92rem;
}
.app-nav a:hover { background: rgba(255, 240, 220, .06); color: var(--pearl); }
.app-nav a.is-active {
    background: var(--pearl); color: var(--espresso);
    box-shadow: var(--shadow-sm);
}
.app-nav .pill {
    margin-left: auto; background: var(--gold); color: #fff;
    border-radius: 999px; padding: 1px 8px; font-size: .72rem; font-weight: 600;
}

.sidebar-foot {
    margin-top: auto;
    border-top: 1px solid var(--espresso-line); padding: 14px;
    display: flex; align-items: center; gap: 12px;
}
.sidebar-foot .who { font-size: .85rem; color: var(--pearl); font-weight: 600; line-height: 1.1; min-width: 0; flex: 1; }
.sidebar-foot .who small { display: block; color: var(--espresso-text-dim); font-weight: 400; font-size: .75rem; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-foot .logout { color: var(--espresso-text-dim); font-size: 1.1rem; padding: 6px 10px; border-radius: 8px; }
.sidebar-foot .logout:hover { color: var(--gold-soft); background: rgba(255,240,220,.06); }

.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 36px;
    position: sticky; top: 0; z-index: 10;
    background: rgba(255, 253, 249, .94); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.app-topbar h1 {
    font-family: var(--font-display); font-size: 1.5rem; color: var(--coffee);
    margin: 0;
}
.app-topbar .top-actions { display: flex; align-items: center; gap: 14px; }
.search-box { position: relative; width: 280px; }
.search-box input {
    width: 100%; padding: 9px 14px 9px 38px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line); font-family: inherit;
    font-size: .9rem;
}
.search-box::before {
    content: ""; position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%); width: 16px; height: 16px; opacity: .6;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b4f30' stroke-width='2'><circle cx='11' cy='11' r='7'/><line x1='16' y1='16' x2='21' y2='21'/></svg>") center/contain no-repeat;
}
.icon-btn {
    width: 38px; height: 38px; border-radius: 50%;
    background: #fff; border: 1px solid var(--line);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--coffee); font-size: 1.1rem;
}
.app-content { padding: 28px 36px 56px; flex: 1; display: flex; flex-direction: column; gap: 22px; }
.app-content > .card + .card,
.app-content > .kpi-grid + .card,
.app-content > .card + .kpi-grid { margin-top: 0; }
.app-content > .kpi-grid,
.app-content > .welcome-banner { margin-bottom: 0; }
.profile-grid > .card + .card,
.col-2 > .card + .card { margin-top: 0; }
@media (max-width: 1024px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 280px; max-width: 86vw; height: 100vh;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 0 12px 40px rgba(0,0,0,.35);
    }
    .app-shell.sidebar-open .app-sidebar { transform: translateX(0); }
    .sidebar-overlay {
        position: fixed; inset: 0; z-index: 55;
        background: rgba(20, 14, 5, .55);
        border: 0; padding: 0; cursor: pointer;
        opacity: 0; pointer-events: none;
        transition: opacity .2s ease;
    }
    .app-shell.sidebar-open .sidebar-overlay {
        opacity: 1; pointer-events: auto;
    }
    .app-topbar .sidebar-toggle { display: inline-flex !important; }
    .sidebar-close { display: inline-flex !important; }
    .app-topbar, .app-content { padding-left: 22px; padding-right: 22px; }
    .search-box { width: 180px; }
}

/* Hamburger + close knop (default desktop = verborgen) */
.sidebar-toggle {
    display: none; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-right: 12px;
    border-radius: 10px; border: 1px solid var(--line);
    background: #fff; color: var(--coffee); font-size: 1.05rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.sidebar-toggle:hover { background: rgba(184,148,106,.08); border-color: var(--gold-soft); }
.sidebar-close {
    display: none; position: absolute; top: 14px; right: 14px;
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,.06); color: var(--pearl);
    border: 1px solid rgba(255,255,255,.10);
    align-items: center; justify-content: center;
    font-size: 1rem; cursor: pointer;
    z-index: 2;
}
.sidebar-close:hover { background: rgba(255,255,255,.12); color: #fff; }
.sidebar-overlay { display: none; }
@media (max-width: 1024px) { .sidebar-overlay { display: block; } }

/* ---------- Welcome banner (donker, à la dashboard hero) ---------- */
.welcome-banner {
    background: var(--grad-banner);
    color: var(--pearl);
    border-radius: var(--radius);
    padding: 28px 32px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow);
    margin-bottom: 26px;
}
.welcome-banner::after {
    content: ""; position: absolute; right: -120px; top: -120px;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(216,193,155,.22) 0%, transparent 70%);
    pointer-events: none;
}
.welcome-banner h2 {
    font-family: var(--font-display); color: var(--pearl);
    margin: 0 0 6px; font-size: 1.7rem;
}
.welcome-banner p { margin: 0; color: var(--espresso-text-dim); }
.welcome-banner p b { color: var(--gold-soft); }
.welcome-banner .actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }

/* ---------- Stat cards ---------- */
.kpi-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 26px;
}
.kpi {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    align-items: center;
}
.kpi .kpi-icon {
    grid-row: 1 / span 3;
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--ivory); color: var(--coffee);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    align-self: start; margin-top: 2px;
}
.kpi .label {
    display: block;
    font-size: .68rem; text-transform: uppercase; letter-spacing: 1.6px;
    color: var(--ink-soft); font-weight: 600;
    grid-column: 2;
}
.kpi .value {
    display: block;
    font-family: var(--font-display); font-size: 2rem; line-height: 1.05;
    color: var(--coffee); font-weight: 600; margin: 4px 0 0;
    grid-column: 2;
}
.kpi .sub {
    display: block;
    font-size: .8rem; color: var(--ink-soft); margin-top: 4px;
    grid-column: 2;
}
.kpi .sub.is-warn { color: var(--warn); }
.kpi .sub.is-ok   { color: var(--ok); }
.kpi.is-alert { border-color: var(--warn); background: #fffaf0; }
.kpi.is-alert .kpi-icon { background: var(--warn-bg); color: var(--warn); }
.kpi .icon-corner {
    position: absolute; top: 18px; right: 18px;
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--ivory); color: var(--coffee);
    display: flex; align-items: center; justify-content: center;
}

/* ---------- Cards ---------- */
.card {
    background: var(--pearl);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 26px;
    box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 18px; }
.card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.card-head h2, .card-head h3 { margin: 0; }
.card-head .link { font-size: .85rem; font-weight: 600; }

/* Twee-kolom layout (table + side panel) */
.col-2 { display: grid; gap: 22px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .col-2 { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 22px; border-radius: 10px;
    font-weight: 600; font-size: .92rem; cursor: pointer; border: none;
    transition: transform .12s, box-shadow .15s, background .2s;
    font-family: inherit; line-height: 1; text-align: center;
    text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--grad-gold); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { box-shadow: var(--shadow); color: #fff; }
.btn-secondary { background: var(--pearl); color: var(--coffee); border: 1px solid var(--line); }
.btn-secondary:hover { background: #fff; }
.btn-dark { background: var(--espresso); color: var(--pearl); }
.btn-ok { background: var(--ok-bg); color: var(--ok); }
.btn-danger { background: var(--danger-bg); color: var(--danger); }
.btn-ghost { background: transparent; color: var(--coffee); }
.btn-block { width: 100%; }

/* ---------- Forms (algemeen) ---------- */
form p { margin: 0 0 16px; }
label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 6px; font-size: .92rem; }
input[type=text], input[type=email], input[type=number], input[type=password],
input[type=date], input[type=tel], select, textarea {
    width: 100%; padding: 11px 14px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: #fffdf8; font-family: inherit; font-size: .95rem;
    transition: border .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(184,148,106,.16);
}
.helptext { color: var(--ink-soft); font-size: .82rem; display: block; margin-top: 4px; }
.errorlist { color: var(--danger); font-size: .85rem; padding: 0; list-style: none; margin: 6px 0; }

/* ---------- Tag input (chip widget for free-text lists) ---------- */
.tag-input-host { display: none !important; }
.tag-input {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    width: 100%; min-height: 46px; padding: 6px 8px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: #fffdf8; transition: border .15s, box-shadow .15s;
}
.tag-input.is-focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(184,148,106,.16);
}
.tag-input .ti-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: #f6ecd6; color: #3E2A1F;
    border: 1px solid #e0cf9a; border-radius: 999px;
    font-size: .85rem; font-weight: 600; line-height: 1.3;
    white-space: nowrap; max-width: 100%;
}
.tag-input .ti-chip > span { overflow: hidden; text-overflow: ellipsis; }
.tag-input .ti-chip .ti-x {
    cursor: pointer; opacity: .6; font-size: .8rem;
    border: 0; background: transparent; padding: 0; color: inherit;
    line-height: 1;
}
.tag-input .ti-chip .ti-x:hover { opacity: 1; }
.tag-input .ti-input {
    flex: 1 1 120px; min-width: 100px;
    border: 0; outline: 0; padding: 6px 4px;
    background: transparent; font-size: .92rem; font-family: inherit;
}
.tag-input .ti-hint {
    width: 100%; font-size: .75rem; color: var(--ink-soft);
    padding: 0 6px 4px;
}
.tag-input.is-error { border-color: var(--danger); }

ul.checkbox-list, .form-multi ul {
    list-style: none; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px;
}
ul.checkbox-list li, .form-multi li {
    background: #fffdf8; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- Badges & status pills ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    font-size: .78rem; font-weight: 600;
    background: var(--ivory); color: var(--coffee);
    white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge-success, .badge.is-ok      { background: var(--ok-bg);     color: var(--ok); }
.badge-warning, .badge.is-warn    { background: var(--warn-bg);   color: var(--warn); }
.badge-danger,  .badge.is-danger  { background: var(--danger-bg); color: var(--danger); }
.badge-info,    .badge.is-info    { background: var(--info-bg);   color: var(--info); }

.alert {
    padding: 13px 18px; border-radius: var(--radius-sm); margin-bottom: 16px;
    border: 1px solid var(--line); background: var(--info-bg); color: var(--ink);
}
.alert-info    { background: var(--info-bg); }
.alert-success { background: var(--ok-bg); }
.alert-warning { background: var(--warn-bg); }
.alert-error, .alert-danger { background: var(--danger-bg); color: var(--danger); }

/* ---------- Tables ---------- */
.table-wrap { background: var(--pearl); border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; background: rgba(255, 253, 248, .5); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(255, 253, 248, .6); }

.user-cell { display: flex; align-items: center; gap: 12px; }
.avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--coffee); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .82rem; flex-shrink: 0;
}
.avatar.is-gold { background: var(--gold); }
.avatar.is-light { background: var(--ivory); color: var(--coffee); }
.user-cell .who { font-weight: 600; line-height: 1.1; }
.user-cell .who small { display: block; color: var(--ink-soft); font-weight: 400; font-size: .8rem; margin-top: 2px; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-right: 6px; vertical-align: middle; }
.dot.is-ok { background: var(--ok); } .dot.is-warn { background: var(--warn); } .dot.is-danger { background: var(--danger); }

/* ---------- Side feed ---------- */
.feed-item {
    padding: 14px 0; border-bottom: 1px solid var(--line);
    display: flex; gap: 12px; align-items: flex-start;
}
.feed-item:last-child { border-bottom: none; }
.feed-item .avatar { width: 32px; height: 32px; font-size: .75rem; }
.feed-item .body { flex: 1; min-width: 0; }
.feed-item .body b { font-size: .9rem; }
.feed-item .body .meta { color: var(--ink-soft); font-size: .8rem; display: block; margin-top: 2px; }
.feed-item .body p { margin: 6px 0 8px; font-size: .88rem; color: var(--ink-soft); }
.feed-item .actions { display: flex; gap: 6px; }
.feed-item .actions .btn { padding: 6px 12px; font-size: .8rem; border-radius: 8px; }

/* ---------- Distribution bars ---------- */
.dist-row { display: grid; grid-template-columns: 110px 1fr 30px; align-items: center; gap: 12px; padding: 10px 0; }
.dist-row .label { font-size: .9rem; }
.dist-row .bar { height: 8px; background: var(--ivory); border-radius: 999px; overflow: hidden; }
.dist-row .bar > span { display: block; height: 100%; background: var(--grad-gold); border-radius: 999px; }
.dist-row .num { text-align: right; font-weight: 600; color: var(--coffee); }

/* ---------- Match-hero ---------- */
.match-hero {
    background: var(--grad-banner); color: var(--pearl);
    border-radius: var(--radius); padding: 32px;
    box-shadow: var(--shadow); margin-bottom: 22px;
    position: relative; overflow: hidden;
}
.match-hero::after {
    content: ""; position: absolute; right: -100px; top: -120px;
    width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(216,193,155,.20) 0%, transparent 70%);
}
.match-hero h2 { color: var(--pearl); }
.match-hero .pct { font-family: var(--font-display); font-size: 4rem; line-height: 1; margin: 8px 0; color: var(--gold-soft); }
.match-hero .eyebrow { opacity: .9; letter-spacing: 3px; text-transform: uppercase; font-size: .78rem; color: var(--gold-soft); }

.score-bar { height: 10px; background: var(--ivory); border-radius: 999px; overflow: hidden; }
.score-bar > span { display: block; height: 100%; background: var(--grad-gold); border-radius: 999px; }

.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.profile-grid .field { background: #fffdf8; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.profile-grid .field span { display: block; font-size: .72rem; color: var(--ink-soft); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 4px; }
.profile-grid .field b { font-weight: 600; color: var(--ink); }

.chat { display: flex; flex-direction: column; gap: 12px; padding: 12px 0; }
.bubble { max-width: 75%; padding: 12px 16px; border-radius: 16px; background: #fffdf8; border: 1px solid var(--line); font-size: .92rem; }
.bubble.mine { align-self: flex-end; background: var(--grad-gold); color: #fff; border-color: transparent; }
.bubble small { display: block; font-size: .72rem; opacity: .75; margin-top: 6px; }

/* ---------- Filter bar ---------- */
.filter-bar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding: 14px 16px;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
}
.filter-bar .fb-search {
    flex: 1 1 280px; min-width: 220px;
    position: relative;
}
.filter-bar .fb-search input {
    width: 100%;
    padding: 11px 14px 11px 40px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--ivory);
    font-family: inherit; font-size: .92rem;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.filter-bar .fb-search input:focus {
    outline: none; border-color: var(--gold-soft); background: #fff;
    box-shadow: 0 0 0 4px rgba(184, 148, 106, .12);
}
.filter-bar .fb-search .fb-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--ink-soft); font-size: .9rem; pointer-events: none;
}
.filter-bar .fb-search .fb-clear {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: var(--line); color: var(--coffee); border: 0;
    width: 22px; height: 22px; border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    cursor: pointer; font-size: .7rem;
}
.filter-bar .fb-search.has-value .fb-clear { display: inline-flex; }
.filter-bar select {
    padding: 10px 32px 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--ivory) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b5a44' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none; -webkit-appearance: none;
    font-family: inherit; font-size: .92rem;
    color: var(--ink); cursor: pointer;
    transition: border-color .15s, background-color .15s;
    min-width: 160px;
}
.filter-bar select:hover { background-color: #fff; border-color: var(--gold-soft); }
.filter-bar select:focus { outline: none; border-color: var(--gold-soft); background-color: #fff; box-shadow: 0 0 0 4px rgba(184, 148, 106, .12); }
.filter-bar .fb-status {
    margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
    font-size: .82rem; color: var(--ink-soft);
}
.filter-bar .fb-status .fb-spinner {
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--line); border-top-color: var(--gold);
    animation: fb-spin .7s linear infinite;
    display: none;
}
.filter-bar.is-loading .fb-status .fb-spinner,
.filter-bar.htmx-request .fb-status .fb-spinner { display: inline-block; }
.filter-bar .fb-reset {
    color: var(--ink-soft); font-size: .82rem; text-decoration: none;
    padding: 6px 10px; border-radius: 8px;
}
.filter-bar .fb-reset:hover { color: var(--coffee); background: var(--ivory); }
@keyframes fb-spin { to { transform: rotate(360deg); } }

/* Active chips beneath the bar */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 16px; }
.filter-chips .chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px 5px 12px;
    background: var(--ivory); color: var(--coffee);
    border: 1px solid var(--line);
    border-radius: 999px; font-size: .78rem; font-weight: 500;
}
.filter-chips .chip a {
    color: var(--ink-soft); margin-left: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .7rem;
}
.filter-chips .chip a:hover { background: var(--danger-bg); color: var(--danger); }

.toggle-group { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.toggle-group label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink-soft); }

.divider { text-align: center; color: var(--ink-soft); margin: 28px 0; position: relative; }
.divider::before, .divider::after { content: ""; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--line); }
.divider::before { left: 0; } .divider::after { right: 0; }

/* ============================================================
   X. Typografie & form-polish (consistentie + ademruimte)
   ============================================================ */
:root {
    --field-bg: #ffffff;
    --field-bg-soft: #fffdf8;
    --field-border: rgba(120, 95, 60, 0.22);
    --field-border-hover: var(--gold-soft);
    --field-radius: 12px;
    --field-pad-y: 12px;
    --field-pad-x: 16px;
    --field-font: 0.97rem;
    --field-line: 1.5;
}

html { font-size: 16.5px; }
body { font-family: var(--font-body); line-height: 1.6; letter-spacing: .005em; }

/* Forceer Inter óveral op interactieve elementen (anders erft Tom Select / sommige browsers de display-serif) */
input, select, textarea, button, .ts-control, .ts-dropdown, .ts-control input {
    font-family: var(--font-body) !important;
    font-feature-settings: normal;
    font-variant-ligatures: normal;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { letter-spacing: .005em; line-height: 1.25; }
h1 { font-size: 2.25rem; margin-bottom: .55em; }
h2 { font-size: 1.6rem; margin-bottom: .5em; }
h3 { font-size: 1.22rem; margin-bottom: .45em; }
p  { margin: 0 0 1em; }

/* ---- Unified inputs / selects / textareas ---- */
input[type=text], input[type=email], input[type=number], input[type=password],
input[type=date], input[type=tel], input[type=url], input[type=search],
select, textarea {
    width: 100%;
    padding: var(--field-pad-y) var(--field-pad-x);
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    background: var(--field-bg);
    color: var(--ink);
    font-family: var(--font-body) !important;
    font-size: var(--field-font);
    line-height: var(--field-line);
    transition: border-color .15s, box-shadow .15s, background .15s;
    box-shadow: 0 1px 0 rgba(120,95,60,.03);
}
textarea { min-height: 96px; resize: vertical; }
input::placeholder, textarea::placeholder { color: rgba(107, 90, 68, .55); }
input:hover, select:hover, textarea:hover { border-color: var(--field-border-hover); }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(184,148,106,.18);
    background: #fff;
}

/* Native single-select: voeg eigen chevron + appearance reset toe.
   (TomSelect-verrijkte selects worden door TS verborgen, dus geen overlap.) */
select:not([multiple]) {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b4f30' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    cursor: pointer;
}
select:not([multiple]):focus {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b8946a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
input[type=checkbox], input[type=radio] { accent-color: var(--gold); width: auto; }

/* Auth-card aligns to global field tokens (consistentie) */
.auth-card input[type=text],
.auth-card input[type=email],
.auth-card input[type=password],
.auth-card input[type=tel],
.auth-card input[type=number] {
    padding: var(--field-pad-y) var(--field-pad-x) var(--field-pad-y) 44px;
    border-radius: var(--field-radius);
    font-size: var(--field-font);
    line-height: var(--field-line);
    border-color: var(--field-border);
}

/* Labels — wat ademruimte */
label {
    display: block; font-weight: 600; color: var(--ink);
    margin-bottom: 8px; font-size: .9rem; letter-spacing: .01em;
}
.helptext, .form-text, small.helptext {
    color: var(--ink-soft); font-size: .82rem; line-height: 1.5;
    display: block; margin-top: 6px;
}

/* Django's ``form.as_p`` → meer ruimte tussen velden */
form p { margin: 0 0 18px; }
form p > label { margin-bottom: 8px; }
form p > .helptext { margin-top: 6px; }

/* ---- Tom Select theming (matcht onze beige look) ---- */
.ts-wrapper { font-family: var(--font-body); font-size: var(--field-font); width: 100%; position: relative; }
.ts-wrapper .ts-control {
    background: var(--field-bg) !important;
    border: 1px solid var(--field-border) !important;
    border-radius: var(--field-radius) !important;
    box-shadow: 0 1px 0 rgba(120,95,60,.03);
    color: var(--ink) !important;
    transition: border-color .15s, box-shadow .15s;
}
/* Single select: één regel, vaste hoogte */
.ts-wrapper.single .ts-control {
    min-height: 46px;
    padding: 11px 38px 11px 14px !important;
    line-height: 1.4;
    position: relative;
    display: block;
}
.ts-wrapper.single .ts-control > .item {
    color: var(--ink) !important;
    font-size: var(--field-font);
    display: inline-block;
}
.ts-wrapper.single .ts-control > input {
    color: var(--ink) !important;
    font-size: var(--field-font) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}
/* Wanneer een waarde geselecteerd is in single mode: verberg de typ-input zodat
   de placeholder niet onder de waarde blijft staan. Klik opent gewoon de dropdown. */
.ts-wrapper.single.has-items .ts-control > input {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    opacity: 0 !important; padding: 0 !important;
    pointer-events: none !important;
}
.ts-wrapper.single.has-items .ts-control { cursor: pointer; }
/* Multi select: chips wrappen netjes met wat lucht */
.ts-wrapper.multi .ts-control {
    min-height: 46px;
    padding: 6px 10px !important;
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.ts-wrapper.multi .ts-control > input {
    flex: 1 1 80px; min-width: 80px;
    border: none !important; background: transparent !important;
    color: var(--ink) !important; font-size: var(--field-font) !important;
    padding: 6px 4px !important; margin: 0 !important;
    line-height: 1.4 !important; height: auto !important;
}
.ts-wrapper.single .ts-control:hover,
.ts-wrapper.multi  .ts-control:hover { border-color: var(--field-border-hover) !important; }
.ts-wrapper.focus .ts-control {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 4px rgba(184,148,106,.18) !important;
}
.ts-wrapper .ts-control input { font-size: var(--field-font) !important; color: var(--ink) !important; }
.ts-wrapper .ts-control input::placeholder { color: rgba(107, 90, 68, .55) !important; }

/* Multi-select chips */
.ts-wrapper.multi .ts-control > .item {
    background: var(--ivory) !important;
    color: var(--coffee) !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    padding: 4px 10px 4px 12px !important;
    margin: 2px 4px 2px 0 !important;
    font-weight: 500;
    font-size: .88rem;
    display: inline-flex; align-items: center; gap: 6px;
}
.ts-wrapper.multi .ts-control > .item.active {
    background: var(--champagne) !important; color: var(--espresso) !important;
}
.ts-wrapper.multi .ts-control > .item .remove {
    border-left: none !important; padding: 0 0 0 4px !important;
    color: var(--coffee) !important; opacity: .55;
    font-size: 1rem; line-height: 1; text-decoration: none;
}
.ts-wrapper.multi .ts-control > .item .remove:hover { opacity: 1; background: transparent !important; color: var(--danger) !important; }

/* Auth-card: hide left FA icon on inputs that get enhanced (TomSelect renders next to them) */
.auth-card .input-wrap.fa:has(.ts-wrapper) > i.fa-solid,
.auth-card .input-wrap.fa:has(.ts-wrapper) > i.fa-regular { display: none; }
.auth-card .input-wrap.fa:has(.ts-wrapper) .ts-control { padding-left: 14px !important; }

/* Dropdown panel */
.ts-dropdown {
    border: 1px solid var(--line) !important;
    border-radius: var(--field-radius) !important;
    background: #fff !important;
    box-shadow: var(--shadow) !important;
    margin-top: 6px !important;
    overflow: hidden;
    font-size: var(--field-font);
}
.ts-dropdown .ts-dropdown-content { max-height: 280px; }
.ts-dropdown [data-selectable] { cursor: pointer; }
/* Tom Select's eigen zoek-input zit ínside het control — niet onder.
   Verberg eventuele 'control_input' die als losse rij verschijnt. */
.ts-wrapper .ts-dropdown-content > .create,
.ts-wrapper .ts-dropdown-content > .no-results { font-size: .9rem; }
.ts-wrapper .ts-dropdown-content .option {
    padding: 10px 14px !important;
    color: var(--ink) !important;
    border-bottom: 1px solid rgba(120,95,60,.05);
    font-size: .95rem;
}
.ts-wrapper .ts-dropdown-content .option:last-child { border-bottom: none; }

/* Clear (×) knop op single-selects */
.ts-wrapper .clear-button {
    position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
    color: var(--ink-soft); opacity: .5; font-size: 1rem; cursor: pointer;
    background: transparent; border: none; padding: 4px;
}
.ts-wrapper .clear-button:hover { opacity: 1; color: var(--danger); }
/* Caret/pijl */
.ts-wrapper.single .ts-control::after {
    content: ""; position: absolute; right: 14px; top: 50%; pointer-events: none;
    width: 10px; height: 10px; border-right: 2px solid var(--coffee); border-bottom: 2px solid var(--coffee);
    transform: translateY(-70%) rotate(45deg); opacity: .6;
}
.ts-wrapper.single { position: relative; }

/* ---- Mooie toggle-switches voor checkboxes ----
   Werkt automatisch op elk <input type=checkbox> dat in een
   .switch wrapper zit, of via standalone class .switch op de input. */
.switch {
    display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
    user-select: none; font-weight: 500; color: var(--ink); font-size: .95rem;
}
.switch input[type=checkbox],
input[type=checkbox].switch {
    appearance: none; -webkit-appearance: none;
    width: 44px; height: 24px; border-radius: 999px;
    background: var(--ivory); border: 1px solid var(--line);
    position: relative; cursor: pointer; flex-shrink: 0;
    transition: background .2s, border-color .2s, box-shadow .2s;
    margin: 0;
}
.switch input[type=checkbox]::after,
input[type=checkbox].switch::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 6px rgba(110,80,40,.18);
    transition: transform .2s, background .2s;
}
.switch input[type=checkbox]:checked,
input[type=checkbox].switch:checked {
    background: var(--grad-gold); border-color: transparent;
}
.switch input[type=checkbox]:checked::after,
input[type=checkbox].switch:checked::after {
    transform: translateX(20px);
}
.switch input[type=checkbox]:focus-visible,
input[type=checkbox].switch:focus-visible {
    outline: none; box-shadow: 0 0 0 4px rgba(184,148,106,.22);
}

/* Boolean checkboxes binnen Django form.as_p (voorkeuren etc.) krijgen automatisch switch look */
form p input[type=checkbox]:not(.no-switch) {
    appearance: none; -webkit-appearance: none;
    width: 44px; height: 24px; border-radius: 999px;
    background: var(--ivory); border: 1px solid var(--line);
    position: relative; cursor: pointer; vertical-align: middle;
    transition: background .2s, border-color .2s;
    margin-right: 8px;
}
form p input[type=checkbox]:not(.no-switch)::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 6px rgba(110,80,40,.18);
    transition: transform .2s;
}
form p input[type=checkbox]:not(.no-switch):checked {
    background: var(--grad-gold); border-color: transparent;
}
form p input[type=checkbox]:not(.no-switch):checked::after { transform: translateX(20px); }
form p input[type=checkbox]:not(.no-switch):focus-visible {
    outline: none; box-shadow: 0 0 0 4px rgba(184,148,106,.22);
}
/* Label naast inline checkbox: zet op één regel */
form p > label:has(+ input[type=checkbox]),
form p label input[type=checkbox] + * { vertical-align: middle; }

/* ---- Voorkeur / Eis pill (gekoppeld aan voorgaand veld) ---- */
.pref-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pref-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 8px;
    background: var(--ivory); border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .8rem; font-weight: 600; color: var(--ink-soft);
    cursor: pointer; user-select: none;
    transition: background .15s, color .15s, border-color .15s;
}
.pref-pill input[type=checkbox] {
    appearance: none; -webkit-appearance: none;
    width: 32px; height: 18px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line);
    position: relative; cursor: pointer; margin: 0;
    transition: background .2s;
}
.pref-pill input[type=checkbox]::after {
    content: ""; position: absolute; top: 1px; left: 1px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--coffee); opacity: .35;
    transition: transform .2s, background .2s, opacity .2s;
}
.pref-pill input[type=checkbox]:checked { background: var(--grad-gold); border-color: transparent; }
.pref-pill input[type=checkbox]:checked::after { transform: translateX(14px); background: #fff; opacity: 1; }
.pref-pill .pill-label::before { content: "Preference"; }
.pref-pill:has(input:checked) { background: #fff5e2; border-color: var(--gold-soft); color: var(--coffee); }
.pref-pill:has(input:checked) .pill-label::before { content: "Required"; }
.pref-pill .pill-icon { color: var(--gold); font-size: .85rem; }

/* ============================================================
   Y. App-topbar — premium look (geïsoleerde tb-* classes)
   ============================================================ */
.app-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 36px; gap: 18px;
    background: rgba(255, 253, 249, .94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 10;
}
.app-topbar .topbar-left {
    display: flex; align-items: center; gap: 14px;
    min-width: 0; flex: 1 1 auto;
}
.app-topbar .sidebar-toggle { display: none; }
.app-topbar .page-heading { min-width: 0; }
.app-topbar .crumbs {
    font-size: .72rem; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--ink-soft); margin-bottom: 4px; font-weight: 600;
    line-height: 1.2;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.app-topbar .crumbs a { color: var(--ink-soft); text-decoration: none; }
.app-topbar .crumbs a:hover { color: var(--coffee); }
.app-topbar .crumbs .sep { opacity: .5; font-weight: 400; }
.app-topbar .crumbs .current { color: var(--coffee); }
.app-topbar h1 {
    font-family: var(--font-display); font-size: 1.5rem;
    color: var(--coffee); margin: 0; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.app-topbar .top-actions {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.app-topbar .tb-icon {
    width: 40px; height: 40px; border-radius: 12px;
    background: #fff; border: 1px solid var(--line);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--coffee); font-size: 1rem;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, transform .12s;
    flex-shrink: 0;
}
.app-topbar .tb-icon:hover { background: var(--ivory); border-color: var(--gold-soft); transform: translateY(-1px); color: var(--coffee); }
.app-topbar .tb-icon.ghost { background: transparent; border-color: transparent; }
.app-topbar .tb-icon.ghost:hover { background: var(--ivory); }

.app-topbar .tb-divider {
    width: 1px; height: 26px; background: var(--line); margin: 0 4px;
    flex-shrink: 0;
}

.app-topbar .tb-user {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 6px 16px 6px 6px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line);
    color: var(--ink); text-decoration: none;
    transition: background .15s, border-color .15s, transform .12s;
    flex-shrink: 0; max-width: 280px;
}
.app-topbar .tb-user:hover { background: var(--ivory); border-color: var(--gold-soft); color: var(--ink); transform: translateY(-1px); }
.app-topbar .tb-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--grad-gold); color: #fff;
    font-weight: 700; font-size: .9rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: var(--shadow-sm);
    font-family: var(--font-body);
}
.app-topbar .tb-user-text {
    line-height: 1.15; min-width: 0;
    display: flex; flex-direction: column;
}
.app-topbar .tb-user-text b {
    font-size: .9rem; color: var(--ink); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 200px;
}
.app-topbar .tb-user-text small {
    color: var(--ink-soft); font-size: .75rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 200px; margin-top: 1px;
}

@media (max-width: 1024px) {
    .app-topbar { padding: 12px 18px; gap: 10px; }
    .app-topbar .tb-divider { display: none; }
    .app-topbar .tb-user-text { display: none; }
    .app-topbar .tb-user { padding: 4px; max-width: none; }
    .app-topbar h1 { font-size: 1.2rem; }
    .app-topbar .crumbs { display: none; }
}
.ts-dropdown .option.active,
.ts-dropdown .option:hover {
    background: var(--ivory) !important;
    color: var(--espresso) !important;
}
.ts-dropdown .option.selected {
    background: var(--pearl) !important;
    color: var(--coffee) !important; font-weight: 600;
}
.ts-dropdown .no-results, .ts-dropdown .optgroup-header {
    color: var(--ink-soft) !important; padding: 10px 14px !important;
    background: var(--field-bg-soft) !important;
    font-size: .85rem; letter-spacing: .04em;
}

/* Disable the global FA icon left-padding when wrap contains a Tom Select */
.input-wrap.fa:has(.ts-wrapper) > i.fa-solid,
.input-wrap.fa:has(.ts-wrapper) > i.fa-regular { display: none; }
.input-wrap.fa:has(.ts-wrapper) .ts-control { padding-left: 14px !important; }

/* Buttons — iets meer tracking voor leesbaarheid */
.btn { letter-spacing: .015em; font-size: .94rem; padding: 12px 22px; }
.btn-primary, .auth-card .btn-primary { letter-spacing: .02em; }

/* Form-row helper: meer gap */
.form-row { gap: 18px; }

/* Card hoofding-spacing */
.card { padding: 26px 28px; }
.card + .card { margin-top: 22px; }
.card h3 { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }

/* Checkbox-lijsten houden hun look maar krijgen iets meer lucht */
ul.checkbox-list, .form-multi ul { gap: 8px; }
ul.checkbox-list li, .form-multi li { padding: 8px 12px; font-size: .92rem; }
ul.checkbox-list li label, .form-multi li label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; font-size: .9rem; }

/* Radioselect (Django default) — ietwat netter */
ul[id$="_id"], .form-multi ul[id$="_id"] { list-style: none; padding: 0; }

/* ============================================================
   Z. Lichte sidebar + cleanup buttons (final overrides)
   ============================================================ */
:root {
    --sidebar-bg: #ffffff;
    --sidebar-border: rgba(120, 95, 60, 0.10);
    --sidebar-text: #4a3527;
    --sidebar-text-dim: #8a7a62;
    --sidebar-active-bg: #f6efe1;
    --sidebar-active-text: #6b4f30;
}

/* Sidebar — licht & rustig */
.app-sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid var(--sidebar-border);
    padding: 12px 16px 20px;
    gap: 16px;
}
.app-sidebar .brand-block { padding: 2px 8px 10px; }
.app-sidebar .brand-block .logo {
    background: var(--grad-gold); color: #fff;
    box-shadow: var(--shadow-sm);
}
.app-sidebar .brand-block-text { color: var(--coffee); }
.app-sidebar .brand-block-text small { color: var(--ink-soft); }

.nav-section-title {
    color: var(--sidebar-text-dim);
    font-size: .65rem; letter-spacing: 1.8px;
    padding: 0 12px; margin-bottom: 10px;
}
.app-nav a {
    color: var(--sidebar-text);
    padding: 10px 12px;
    font-size: .92rem;
    border-radius: 10px;
    transition: background .15s, color .15s;
}
.app-nav a:hover {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
}
.app-nav a.is-active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    box-shadow: none;
    font-weight: 600;
}
.app-nav a .icon { color: inherit; opacity: .8; width: 18px; text-align: center; }

/* Sidebar foot — geen overlap meer, nette layout */
.sidebar-foot {
    margin-top: auto;
    padding: 14px 12px;
    border-top: 1px solid var(--sidebar-border);
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 10px;
}
.sidebar-foot .avatar {
    width: 36px; height: 36px;
    background: var(--grad-gold); color: #fff;
    font-size: .82rem; font-weight: 700;
    flex-shrink: 0;
}
.sidebar-foot .who {
    min-width: 0;
    line-height: 1.2;
    color: var(--coffee);
    font-size: .85rem; font-weight: 600;
    overflow: hidden;
}
.sidebar-foot .who b {
    display: block; font-weight: 600; color: var(--coffee);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: .9rem;
}
.sidebar-foot .who small {
    display: block; font-weight: 400; color: var(--ink-soft);
    font-size: .75rem; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-foot .logout {
    color: var(--ink-soft); font-size: 1rem;
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
}
.sidebar-foot .logout:hover { color: var(--danger); background: var(--ivory); }

/* Welcome banner — lichter / vriendelijker (geen donker bruin meer) */
.welcome-banner {
    background: linear-gradient(135deg, #fffaf0 0%, #f6ecd9 100%);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.welcome-banner h2 { color: var(--coffee); }
.welcome-banner p { color: var(--ink-soft); }
.welcome-banner p b { color: var(--coffee); }
.welcome-banner::after {
    background: radial-gradient(circle, rgba(216,193,155,.35) 0%, transparent 70%);
}
.welcome-banner .btn-secondary,
.welcome-banner .btn-dark {
    background: #fff; color: var(--coffee); border: 1px solid var(--line);
}
.welcome-banner .btn-primary {
    background: var(--grad-gold); color: #fff; border: none;
}

/* Match-hero — ook lichter */
.match-hero {
    background: linear-gradient(135deg, #fffaf0 0%, #f6ecd9 100%);
    color: var(--ink); border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.match-hero h2 { color: var(--coffee); }
.match-hero .pct { color: var(--coffee); }
.match-hero .eyebrow { color: var(--gold); }
.match-hero p, .match-hero p b { color: var(--ink-soft); }

/* Buttons — strakker & lichter */
.btn {
    border-radius: 10px;
    padding: 11px 20px;
    font-weight: 600;
    box-shadow: none;
    transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
    background: var(--grad-gold); color: #fff; border: none;
    box-shadow: 0 2px 8px rgba(184, 148, 106, .25);
}
.btn-primary:hover { box-shadow: 0 4px 14px rgba(184, 148, 106, .35); }
.btn-secondary {
    background: #fff; color: var(--coffee);
    border: 1px solid var(--line);
}
.btn-secondary:hover { background: var(--ivory); border-color: var(--gold-soft); }
.btn-dark {
    background: var(--coffee); color: #fff; border: none;
}
.btn-dark:hover { background: var(--espresso); }
.btn-ghost {
    background: transparent; color: var(--coffee); border: 1px solid transparent;
}
.btn-ghost:hover { background: var(--ivory); }
.btn-danger {
    background: var(--danger-bg); color: var(--danger); border: 1px solid transparent;
}
.btn-danger:hover { background: #ecc8c5; }
.btn-ok {
    background: var(--ok-bg); color: var(--ok); border: 1px solid transparent;
}

/* ── Height unit toggle (cm ↔ ft/in) ──────────────────────────────────── */
.field-row > label.has-height-toggle {
    display: flex; align-items: center;
    gap: 8px; margin-bottom: 6px;
}
/* The required-asterisk should sit right next to the label text, not be
   pushed into the middle by the flex distribution. The toggle is moved to
   the right edge with margin-left: auto. */
.field-row > label.has-height-toggle .req-star { margin-right: auto; }
.field-row > label.has-height-toggle .height-toggle { margin-left: auto; }
.height-toggle {
    display: inline-flex;
    background: var(--ivory);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 2px;
    margin: 0;
    gap: 2px;
    font-weight: 500;
}
.height-toggle__btn {
    border: none;
    background: transparent;
    padding: 4px 10px;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    color: var(--ink-soft);
    transition: background .15s, color .15s;
    line-height: 1;
}
.height-toggle__btn:hover { color: var(--ink); }
.height-toggle__btn.is-active {
    background: var(--pearl);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
[data-height-toggle] > input[type=number] {
    width: 100%;
    height: auto;
    min-height: 0;
}
.height-ft-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow: hidden;
}
.height-ft-wrap input[type=number] {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    text-align: center;
}
.height-ft-sep,
.height-ft-suffix {
    flex: 0 0 auto;
    font-size: .82rem;
    color: var(--ink-soft);
    font-weight: 600;
}

/* Cards op ivoor canvas — iets minder rand */
.card { border-color: var(--line); background: #fff; }

/* Topbar past nu bij witte sidebar */
.app-topbar {
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--line);
}

/* Mobiele sidebar overlay — drawer-styling staat hierboven bij .app-shell. */


/* ============================================================
   Profile tabs (single-page profile with HTMX section saves)
   ============================================================ */
.todo-card {
    background: linear-gradient(180deg, #fffaf0 0%, #fff 100%);
    border: 1px solid var(--gold-soft);
    border-radius: 14px;
    padding: 16px 18px 14px;
    margin-bottom: 18px;
    box-shadow: 0 2px 10px rgba(120,95,60,.06);
}
.todo-card-head {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--gold-soft);
    margin-bottom: 10px;
}
.todo-card-head .todo-card-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--grad-gold); color: #fff; font-size: .95rem;
    flex: 0 0 auto;
}
.todo-card-head b { display: block; color: var(--ink); font-size: 1rem; }
.todo-card-head small { color: var(--ink-soft); font-size: .8rem; }

.todo-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.todo-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s, transform .08s;
    cursor: pointer;
}
a.todo-item:hover {
    background: #fff5e2;
    border-color: var(--gold-soft);
}
a.todo-item:active { transform: scale(.995); }
.todo-item .todo-ic {
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem; flex: 0 0 auto;
}
.todo-ic-warn   { background: rgba(184,148,106,.15); color: var(--coffee); }
.todo-ic-info   { background: rgba(0,0,0,.06);       color: var(--ink-soft); }
.todo-ic-danger { background: rgba(160,42,61,.10);   color: #a02a3d; }
.todo-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.todo-text b { font-weight: 600; font-size: .92rem; line-height: 1.2; }
.todo-text small { color: var(--ink-soft); font-size: .78rem; line-height: 1.35; }
.todo-chev { color: var(--ink-soft); font-size: .75rem; opacity: .55; flex: 0 0 auto; }
a.todo-item:hover .todo-chev { color: var(--coffee); opacity: 1; transform: translateX(2px); transition: transform .15s, color .15s, opacity .15s; }
.todo-item-info { cursor: default; }
.todo-item-info:hover { background: transparent; border-color: transparent; }
.todo-item-danger b { color: #a02a3d; }

.todo-inline-form { margin: 0; }
.todo-resend {
    background: var(--ivory); border: 1px solid var(--gold-soft);
    color: var(--coffee); font-weight: 600; font-size: .78rem;
    padding: 5px 10px; border-radius: 999px; cursor: pointer;
    transition: background .15s, color .15s;
}
.todo-resend:hover { background: var(--grad-gold); color: #fff; border-color: transparent; }

.profile-tabs { display: flex; flex-direction: column; gap: 18px; }

.ptabs-nav {
    display: flex; gap: 8px; padding: 6px;
    background: var(--grad-card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}
.ptab {
    flex: 1 1 220px; min-width: 0;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-radius: calc(var(--radius) - 4px);
    background: transparent; border: 1px solid transparent;
    color: var(--ink-soft); cursor: pointer; text-align: left;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
    font: inherit;
}
.ptab > i { font-size: 1.15rem; color: var(--gold); width: 22px; text-align: center; }
.ptab span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ptab span b { color: var(--ink); font-weight: 600; font-size: .98rem; }
.ptab span small { color: var(--ink-soft); font-size: .78rem; margin-top: 2px; }
.ptab:hover { background: rgba(184,148,106,.08); color: var(--ink); }
.ptab.is-active {
    background: #fff; border-color: var(--gold-soft);
    box-shadow: 0 1px 0 rgba(184,148,106,.15), var(--shadow-sm);
    color: var(--ink);
}
.ptab.is-active > i { color: var(--coffee); }

.profile-tab-panel[hidden] { display: none !important; }

.section-h {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem; font-weight: 600;
    margin: 0 0 6px; padding: 0 0 8px;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 8px;
}
.section-h > i { color: var(--gold); font-size: 1rem; }

.confidential-card { border-color: var(--gold-soft); }
.confidential-banner {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 16px; margin-bottom: 22px;
    background: linear-gradient(135deg, rgba(184,148,106,.10), rgba(214,183,138,.06));
    border: 1px solid var(--gold-soft); border-radius: 12px;
}
.confidential-banner > i {
    font-size: 1.1rem; color: var(--coffee);
    background: #fff; border: 1px solid var(--gold-soft);
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 34px;
}
.confidential-banner b { display: block; color: var(--coffee); margin-bottom: 2px; }
.confidential-banner span { font-size: .88rem; color: var(--ink-soft); line-height: 1.45; }

.phone-collapse summary {
    cursor: pointer; color: var(--ink-soft); font-size: .85rem;
    padding: 6px 0; user-select: none;
}
.phone-collapse summary:hover { color: var(--ink); }
.phone-collapse code {
    background: #f5f1e8; padding: 2px 8px; border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.form-actions-row {
    margin-top: 22px; display: flex; align-items: center;
    justify-content: flex-end; gap: 14px;
}
.form-spin {
    display: none; align-items: center; gap: 8px;
    color: var(--ink-soft); font-size: .88rem;
}
.form-spin.htmx-request,
.htmx-request .form-spin { display: inline-flex; }

.alert {
    padding: 10px 14px; border-radius: 10px;
    border: 1px solid var(--line); font-size: .9rem;
    display: flex; align-items: center; gap: 8px;
}
.alert-success {
    background: #eaf5ec; border-color: #b9dcc1; color: #2e6b3a;
}
.alert-success i { color: #3b8a4a; }

@media (max-width: 720px) {
    .ptab { flex-basis: 100%; }
    .ptab span small { display: none; }
}

/* ----- Profile sub-groups: elke groep is zijn eigen card ----- */
.profile-tab-panel form,
.profile-tab-panel { display: flex; flex-direction: column; gap: 18px; }
.profile-tab-panel form > .card { margin: 0; }

.group-card {
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.group-card.group-intro { background: var(--grad-card); }

/* Inputs binnen profielcards moeten goed zichtbaar zijn op witte achtergrond */
.group-card input[type=text],
.group-card input[type=email],
.group-card input[type=number],
.group-card input[type=password],
.group-card input[type=date],
.group-card input[type=tel],
.group-card input[type=url],
.group-card input[type=search],
.group-card select,
.group-card textarea {
    background: #fbf7ee;
    border-color: rgba(120, 95, 60, 0.35);
}
.group-card input:focus,
.group-card select:focus,
.group-card textarea:focus { background: #fff; }
.group-card .ts-control { background: #fbf7ee; }

.group-h {
    margin: 0 0 16px; padding: 0 0 12px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem; font-weight: 600;
    color: var(--coffee);
    display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid var(--line);
}
.group-h > i {
    color: var(--gold); font-size: .95rem;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(184,148,106,.12);
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 28px;
}

.opt-tag {
    font-weight: 400; font-size: .76rem; color: var(--ink-soft);
    margin-left: 4px;
}

.req-star {
    color: #d7263d;
    font-weight: 700;
    margin-left: 2px;
}

.checkbox-grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 14px;
}
.field-row { margin-bottom: 14px; }
.field-row:last-child { margin-bottom: 0; }
.field-row > label {
    display: block; margin-bottom: 6px;
    font-weight: 600; color: var(--ink); font-size: .9rem;
}

/* Mobile (phone) — give every form field a uniform, generous gap so the
   profile/preferences forms stop feeling cramped and inconsistent.
   Tablet/desktop keep the tighter 14px spacing defined above. */
@media (max-width: 640px) {
    .field-row { margin-bottom: 22px; }
    .field-row > label { margin-bottom: 8px; font-size: .95rem; }
    .field-row .helptext,
    .field-row small.helptext,
    .field-row .form-text { margin-top: 6px; }
    .field-row.field-check { margin-bottom: 14px; }
    .checkbox-grid { gap: 14px; margin-bottom: 22px; }
    .group-card { padding: 18px 16px; }
    .group-card + .group-card { margin-top: 18px; }
    .group-h { margin-bottom: 14px; }
    /* When two fields share a `.form-row` grid, on phones the grid stacks
       vertically AND the items still carry their own margin-bottom, which
       doubled the gap between e.g. "Build" and "Skin color". Let the grid
       gap own the spacing inside .form-row so the rhythm stays consistent. */
    .form-row { gap: 22px; margin-bottom: 22px; }
    .form-row > .field-row { margin-bottom: 0; }
}

.field-row.field-check { margin-bottom: 0; }
.field-row.field-check .checkbox-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
    background: #fffdf8; cursor: pointer; font-weight: 500;
    transition: border-color .15s, background .15s;
    margin: 0;
}
.field-row.field-check .checkbox-row:hover {
    border-color: var(--gold-soft); background: #fff;
}
.field-row.field-check .checkbox-row input[type=checkbox] {
    margin: 3px 0 0; width: auto; flex: 0 0 auto;
}
.field-row.field-check .checkbox-row b {
    display: block; font-weight: 600; color: var(--ink); font-size: .92rem;
}
.field-row.field-check .checkbox-row small {
    display: block; font-size: .78rem; color: var(--ink-soft); margin-top: 2px;
}

/* ---------- Toggle switch (iOS-stijl) ---------- */
.field-row.field-check .toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: 12px;
    background: #fffdf8; cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    margin: 0;
}
.field-row.field-check .toggle-row:hover {
    border-color: var(--gold-soft); background: #fff;
}
.toggle-text { display: flex; flex-direction: column; min-width: 0; }
.toggle-text b { font-weight: 600; color: var(--ink); font-size: .95rem; }
.toggle-text small { font-size: .8rem; color: var(--ink-soft); margin-top: 2px; line-height: 1.4; }

.toggle-switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.toggle-switch input[type=checkbox] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer; z-index: 2;
}
.toggle-track {
    position: absolute; inset: 0; border-radius: 999px;
    background: #d8cdb6; border: 1px solid rgba(120,95,60,.25);
    transition: background .18s ease, border-color .18s ease;
    display: block;
}
.toggle-knob {
    position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18);
    transition: transform .18s ease;
}
.toggle-switch input[type=checkbox]:checked + .toggle-track {
    background: var(--gold); border-color: var(--coffee);
}
.toggle-switch input[type=checkbox]:checked + .toggle-track .toggle-knob {
    transform: translateX(20px);
}
.toggle-switch input[type=checkbox]:focus-visible + .toggle-track {
    box-shadow: 0 0 0 4px rgba(184,148,106,.25);
}

/* ---------- Locked / read-only velden ---------- */
.field-row.field-locked > label {
    display: flex; align-items: center; gap: 8px;
    color: var(--ink-soft); font-weight: 600;
}
.locked-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .7rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-soft);
    padding: 2px 8px; border-radius: 999px;
    background: rgba(120,95,60,.08); border: 1px solid rgba(120,95,60,.18);
}
.locked-tag i { font-size: .65rem; }
.locked-input {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 16px;
    background: #f4eedf; border: 1px dashed rgba(120,95,60,.35);
    border-radius: 12px; color: var(--ink-soft);
    font-size: .97rem; cursor: not-allowed;
}
.locked-value { font-weight: 500; color: var(--ink); letter-spacing: .01em; }
.badge-verified, .badge-unverified {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 600;
    padding: 4px 10px; border-radius: 999px;
}
.badge-verified { background: #eaf5ec; color: #2e6b3a; border: 1px solid #b9dcc1; }
.badge-verified i { color: #3b8a4a; }
.badge-unverified { background: #fdf3df; color: #8a6a14; border: 1px solid #e8d49a; }
.badge-unverified i { color: #b58300; }

/* ---------- Voorkeuren: Van/Tot range ---------- */
.range-row { gap: 14px; }
.range-cell { display: flex; flex-direction: column; gap: 4px; }
.range-cap {
    font-size: .72rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ink-soft);
}
.range-cell input[type=number] { width: 100%; }

/* In voorkeuren willen we de pill rechts uitlijnen onder het veld */
.prefs-form .field-row .pref-meta {
    display: flex; justify-content: flex-end; margin-top: 8px;
}

/* ============================================================
   DASHBOARD v2 — focus op match óf volgende ronde
   ============================================================ */

.dash-greet {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    padding: 14px 4px 4px;
}
.dash-greet h2 {
    margin: 4px 0 0; font-family: 'Cormorant Garamond', serif;
    font-size: 1.7rem; font-weight: 600; color: var(--coffee);
}
.dash-greet h2 b { color: var(--gold); font-weight: 600; }
.dash-greet .eyebrow {
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--gold); font-weight: 600;
}
.dash-greet .eyebrow i { margin-right: 6px; }

.dash-mini-round {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 10px 16px; border-radius: 14px;
    background: #fff; border: 1px solid var(--line);
    box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.dash-mini-round:hover {
    border-color: var(--gold-soft);
    box-shadow: 0 4px 14px rgba(120,95,60,.12);
    transform: translateY(-1px);
}
.dash-mini-round > i {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(184,148,106,.12); color: var(--coffee);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.dash-mini-round span { display: flex; flex-direction: column; line-height: 1.2; }
.dash-mini-round small {
    font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 600;
}
.dash-mini-round b {
    font-size: .92rem; color: var(--ink); font-weight: 600;
    text-transform: capitalize;
}

@media (max-width: 720px) {
    .dash-greet { padding: 6px 2px 2px; gap: 10px; }
    .dash-greet h2 { font-size: 1.4rem; }
    .dash-mini-round {
        width: 100%;
        padding: 10px 14px;
    }
    .dash-stats { gap: 10px; }
    .dash-stat { padding: 14px 16px; }
    .dash-stat > i { width: 38px; height: 38px; flex: 0 0 38px; font-size: 1rem; }
}

/* ---------- Round-hero (geen open match) ---------- */
.round-hero {
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px;
    background: var(--grad-card);
    border: 1px solid var(--gold-soft); border-radius: 18px;
    padding: 28px;
    box-shadow: var(--shadow-sm);
    margin: 18px 0;
}
@media (max-width: 820px) { .round-hero { grid-template-columns: 1fr; } }

.round-hero .eyebrow {
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--gold); font-weight: 700;
}
.round-hero h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem; font-weight: 600; color: var(--coffee);
    margin: 6px 0 4px; text-transform: capitalize;
}

.countdown {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    margin: 20px 0 14px; max-width: 420px;
}
.cd-cell {
    display: flex; flex-direction: column; align-items: center;
    padding: 12px 8px; border-radius: 12px;
    background: #fff; border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.cd-cell b {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem; font-weight: 600; color: var(--coffee);
    line-height: 1;
}
.cd-cell small {
    font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-soft); margin-top: 4px; font-weight: 600;
}

.rh-status { margin-top: 10px; }

.rh-right {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 18px 20px;
}
.rh-check-h {
    margin: 0 0 12px; padding: 0 0 10px;
    border-bottom: 1px solid var(--line);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem; font-weight: 600; color: var(--coffee);
    display: flex; align-items: center; gap: 10px;
}
.rh-check-h i { color: var(--gold); }

.elig-list { list-style: none; padding: 0; margin: 0; }
.elig-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px dashed var(--line);
}
.elig-item:last-child { border-bottom: none; }
.elig-icon {
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; flex: 0 0 22px;
}
.elig-item.is-ok .elig-icon { background: #eaf5ec; color: #2e6b3a; }
.elig-item.is-todo .elig-icon { background: #f4eedf; color: var(--ink-soft); }
.elig-item.is-todo .elig-icon i { font-size: .55rem; }
.elig-label { flex: 1; font-size: .92rem; color: var(--ink); }
.elig-item.is-todo .elig-label { color: var(--ink-soft); }
.elig-link {
    font-size: .8rem; color: var(--gold); text-decoration: none;
    font-weight: 600;
}
.elig-link:hover { color: var(--coffee); }

/* ---------- Match hero (open match) ---------- */
.last-round-msg {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 16px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--ivory); color: var(--ink);
    font-size: .9rem; line-height: 1.5;
    margin: 0 0 14px;
}
.last-round-msg .lrm-icon {
    flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.last-round-msg .lrm-body {
    display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.last-round-msg .lrm-body b { font-weight: 600; display: block; }
.last-round-msg .lrm-body span { color: var(--ink-soft); font-size: .87rem; line-height: 1.45; }
.last-round-msg.is-success { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.last-round-msg.is-success .lrm-icon { background: rgba(0,0,0,.06); color: var(--ok); }
.last-round-msg.is-warning { background: var(--warn-bg); border-color: var(--warn); color: var(--ink); }
.last-round-msg.is-warning .lrm-icon { background: rgba(0,0,0,.06); color: var(--warn); }
.last-round-msg.is-warning .lrm-body span { color: var(--ink-soft); }
.last-round-msg .lrm-hint {
    margin-top: 10px; padding: 10px 12px;
    background: #fff; border: 1px dashed var(--gold-soft); border-radius: 10px;
    display: flex; align-items: flex-start; gap: 8px;
    font-size: .85rem; color: var(--ink); line-height: 1.45;
}
.last-round-msg .lrm-hint i { color: var(--gold); margin-top: 2px; }
.last-round-msg .lrm-hint b { display: inline; font-weight: 600; }
.last-round-msg .lrm-hint a { color: var(--coffee); font-weight: 600; white-space: nowrap; margin-left: 4px; }

.match-hero-card {
    background: linear-gradient(135deg, #fff 0%, #fffaf0 100%);
    border: 1px solid var(--gold-soft); border-radius: 18px;
    padding: 26px 28px; margin: 18px 0;
    box-shadow: 0 6px 24px rgba(120,95,60,.10);
}
.mh-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.mh-top .eyebrow {
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--gold); font-weight: 700;
}
.mh-state {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    background: rgba(184,148,106,.12); color: var(--coffee);
    font-size: .78rem; font-weight: 600;
    border: 1px solid var(--gold-soft);
}

.mh-body {
    display: grid; grid-template-columns: auto 1fr; gap: 28px;
    align-items: center;
}
@media (max-width: 720px) {
    .match-hero-card { padding: 20px 18px; border-radius: 16px; }
    .mh-top { margin-bottom: 14px; }
    .mh-top .eyebrow { font-size: .68rem; letter-spacing: .14em; }
    .mh-state { font-size: .72rem; padding: 3px 10px; }

    .mh-body { grid-template-columns: 1fr; gap: 16px; text-align: center; }
    .mh-info h2 { font-size: 1.4rem; }
    .mh-info > .muted { font-size: .85rem; margin-bottom: 10px; }

    /* Meta op mobiel: één strip met subtiele dividers, geen nested cards */
    .mh-meta {
        display: flex; flex-direction: column; gap: 0;
        margin: 0 0 18px; padding: 14px 16px;
        background: #fff;
        border: 1px solid var(--gold-soft);
        border-radius: 14px;
        text-align: left;
        box-shadow: 0 2px 10px rgba(120,95,60,.05);
    }
    .mh-meta-item {
        display: flex; flex-direction: row; align-items: center;
        text-align: left;
        gap: 14px;
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        min-height: 44px;
    }
    .mh-meta-item + .mh-meta-item {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(184,148,106,.14);
    }
    .mh-meta-item > i {
        margin: 0;
        width: 36px; height: 36px;
        border-radius: 10px;
        background: rgba(184,148,106,.10); color: var(--gold);
        display: inline-flex; align-items: center; justify-content: center;
        flex: 0 0 36px; font-size: .95rem;
    }
    .mh-meta-item span {
        display: flex; flex-direction: column;
        align-items: flex-start; justify-content: center;
        gap: 2px; line-height: 1.2;
        min-width: 0; flex: 1 1 auto;
    }
    .mh-meta-item small {
        font-size: .62rem; letter-spacing: .14em;
        color: var(--ink-soft); font-weight: 700;
        margin: 0; padding: 0;
    }
    .mh-meta-item b {
        font-size: 1rem; line-height: 1.2;
        color: var(--ink); font-weight: 600;
        margin: 0; padding: 0;
    }

    .mh-actions { flex-direction: column; gap: 8px; }
    .mh-actions .btn { width: 100%; justify-content: center; }
}

.mh-score-ring {
    --pct: 0;
    width: 130px; height: 130px; border-radius: 50%;
    background: conic-gradient(
        var(--gold) calc(var(--pct) * 1%),
        rgba(184,148,106,.18) 0
    );
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(120,95,60,.18);
    margin: 0 auto;
}
@media (max-width: 720px) {
    .mh-score-ring { width: 110px; height: 110px; }
    .mh-score-inner { width: 86px; height: 86px; }
    .mh-score-inner b { font-size: 1.65rem; }
    .mh-score-inner b small { font-size: .85rem; }
}
.mh-score-inner {
    width: 102px; height: 102px; border-radius: 50%;
    background: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
}
.mh-score-inner b {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem; color: var(--coffee); line-height: 1; font-weight: 600;
}
.mh-score-inner b small { font-size: 1rem; font-weight: 600; }
.mh-score-inner > small {
    font-size: .65rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft); margin-top: 4px; font-weight: 700;
}

.mh-info h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.7rem; font-weight: 600; color: var(--coffee);
    margin: 0 0 4px;
}
.mh-info > .muted { margin: 0 0 16px; }

.mh-meta {
    display: flex; flex-wrap: wrap; gap: 14px 22px;
    margin: 0 0 16px;
}
.mh-meta-item {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: .9rem;
}
.mh-meta-item > i {
    color: var(--gold); font-size: .95rem; margin-top: 2px;
    width: 18px; text-align: center;
}
.mh-meta-item span { display: flex; flex-direction: column; line-height: 1.25; }
.mh-meta-item small {
    font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 600;
}
.mh-meta-item b { color: var(--ink); font-weight: 600; }

.mh-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* ---------- Status-tegels (3 kolommen) ---------- */
.dash-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 14px; margin: 18px 0;
}
@media (max-width: 720px) { .dash-stats { grid-template-columns: 1fr; } }

.dash-stat {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; background: #fff;
    border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--shadow-sm);
    text-decoration: none; color: var(--ink); cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.dash-stat:hover {
    border-color: var(--gold-soft); transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(120,95,60,.10);
}
.dash-stat:hover .dash-stat-link { color: var(--coffee); background: rgba(184,148,106,.12); }
.dash-stat > i {
    width: 42px; height: 42px; border-radius: 12px;
    background: rgba(184,148,106,.12); color: var(--coffee);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem; flex: 0 0 42px;
}
.dash-stat > div { flex: 1; min-width: 0; }
.dash-stat small {
    display: block; font-size: .68rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-soft); font-weight: 600;
}
.dash-stat b {
    display: block; font-weight: 600; color: var(--ink); font-size: .98rem;
    margin-top: 2px;
}
.dash-stat-link {
    color: var(--ink-soft); text-decoration: none; padding: 6px;
    border-radius: 8px; transition: color .15s, background .15s;
}
.dash-stat-link:hover { color: var(--coffee); background: rgba(184,148,106,.1); }

/* ---------- Compact history table ---------- */
.dash-history { width: 100%; border-collapse: collapse; }
.dash-history th, .dash-history td {
    padding: 10px 12px; border-bottom: 1px solid var(--line);
    font-size: .9rem; text-align: left;
}
.dash-history th {
    font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 600;
}
.dash-history .num { text-align: right; }
.dash-history tr:last-child td { border-bottom: none; }

/* ---------- Match-historie pagina ---------- */
.history-card { padding: 0; overflow: visible; }
.history-list { display: block; }
.history-head {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1.1fr .6fr .9fr 30px;
    gap: 16px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--gold-soft);
    font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 700;
}
.history-row {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1.1fr .6fr .9fr 30px;
    gap: 16px;
    padding: 16px 22px;
    align-items: center;
    border-bottom: 1px solid rgba(184,148,106,.12);
    text-decoration: none; color: inherit;
    transition: background .15s ease;
    cursor: pointer;
}
.history-row:hover { background: rgba(184,148,106,.05); }
.history-row:last-child { border-bottom: none; }
.history-cell { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--ink); min-width: 0; }
.history-cell > i {
    width: 32px; height: 32px; border-radius: 9px;
    background: rgba(184,148,106,.12); color: var(--gold);
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 32px;
}
.history-cell small { display: block; color: var(--ink-soft); font-size: .78rem; font-weight: 500; }
.history-cell b { font-weight: 600; }
.history-arrow { justify-content: flex-end; color: var(--gold); }
.history-arrow > i { background: none; width: auto; height: auto; flex: none; }
.history-empty { padding: 22px; text-align: center; }

@media (max-width: 720px) {
    .history-card {
        padding: 0; overflow: visible; background: transparent;
        border: none; box-shadow: none;
    }
    .history-head { display: none; }
    .history-row {
        position: relative;
        grid-template-columns: 1fr 1fr;
        gap: 12px 14px;
        padding: 16px 16px 18px;
        border-bottom: none;
        margin: 0 0 14px;
        background: #fff;
        border: 1px solid var(--gold-soft);
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(120,95,60,.06);
    }
    .history-row:hover { background: #fff; }
    .history-cell {
        flex-direction: column; align-items: flex-start;
        gap: 4px;
    }
    .history-cell::before {
        content: attr(data-label);
        font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
        color: var(--ink-soft); font-weight: 700;
    }
    .history-cell[data-label="Datum"] {
        grid-column: 1 / -1;
        flex-direction: row; align-items: center;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(184,148,106,.15);
    }
    .history-cell[data-label="Datum"]::before { display: none; }
    .history-cell[data-label="Datum"] > span { font-weight: 600; }
    .history-cell[data-label="Datum"] small { font-size: .8rem; color: var(--ink-soft); }

    .history-cell[data-label="Kandidaat"] { grid-column: 1 / -1; }
    .history-cell[data-label="Kandidaat"] b { font-size: 1.05rem; color: var(--coffee); }

    .history-cell[data-label="Status"] { grid-column: 1 / -1; }
    .history-cell[data-label="Status"] .badge { font-size: .8rem; padding: 6px 12px; }

    .history-cell[data-label="Score"] b {
        font-size: 1.4rem; color: var(--coffee);
        font-family: 'Cormorant Garamond', serif;
        font-weight: 600; line-height: 1;
    }
    .history-cell[data-label="Beëindigd"] span { font-size: .95rem; color: var(--ink); }

    .history-arrow {
        position: absolute; top: 16px; right: 16px;
        padding: 0; background: none;
    }
    .history-arrow::before { display: none; }
    .history-arrow > i {
        width: 32px; height: 32px; border-radius: 50%;
        background: rgba(184,148,106,.12); color: var(--gold);
        display: inline-flex; align-items: center; justify-content: center;
        font-size: .8rem;
    }
}


/* =====================================================================
   MATCH-DETAIL PAGINA
   ===================================================================== */
.match-page { padding: 0; }
.match-page.narrow { max-width: 720px; }

.back-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ink-soft); text-decoration: none;
    font-size: .9rem; font-weight: 500;
    margin-bottom: 16px;
    transition: color .15s ease;
}
.back-link:hover { color: var(--coffee); }

/* ---------- Hero ---------- */
.match-detail-hero {
    background: linear-gradient(135deg, #fff 0%, #fffaf0 100%);
    border: 1px solid var(--gold-soft); border-radius: 18px;
    padding: 28px 32px; margin-bottom: 18px;
    box-shadow: 0 6px 24px rgba(120,95,60,.10);
    display: grid; grid-template-columns: 1fr auto;
    gap: 24px; align-items: center;
}
.mdh-eyebrow {
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--gold); font-weight: 700;
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
}
.mdh-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem; color: var(--coffee); font-weight: 600;
    margin: 0 0 4px;
}
.mdh-sub { color: var(--ink-soft); margin: 0 0 14px; }
.mdh-state-row {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.mdh-deadline {
    color: var(--ink-soft); font-size: .88rem;
    display: inline-flex; align-items: center; gap: 6px;
}
.mdh-deadline b { color: var(--ink); }

.badge-state {
    padding: 6px 14px; border-radius: 999px;
    font-size: .78rem; font-weight: 600;
}
.badge-pending { background: rgba(184,148,106,.15); color: var(--coffee); }
.badge-active { background: rgba(60,150,90,.12); color: #2e7d4f; }
.badge-awaiting_proceed { background: rgba(232,168,56,.18); color: #946816; }
.badge-revealed { background: rgba(60,150,90,.18); color: #1f6c3f; }
.badge-rejected, .badge-expired, .badge-ended { background: rgba(180,80,80,.10); color: #8a3a3a; }

.mdh-score-ring {
    --pct: 0;
    width: 130px; height: 130px; border-radius: 50%;
    background: conic-gradient(
        var(--gold) calc(var(--pct) * 1%),
        rgba(184,148,106,.18) 0
    );
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(120,95,60,.18);
}
.mdh-score-inner {
    width: 102px; height: 102px; border-radius: 50%;
    background: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.mdh-score-inner b {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem; color: var(--coffee); line-height: 1; font-weight: 600;
}
.mdh-score-inner b small { font-size: 1rem; font-weight: 600; }
.mdh-score-inner > small {
    font-size: .65rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft); margin-top: 4px; font-weight: 700;
}

@media (max-width: 720px) {
    .match-detail-hero {
        grid-template-columns: 1fr; padding: 22px 20px;
        text-align: center; gap: 16px;
    }
    .mdh-right { order: -1; }
    .mdh-score-ring { width: 110px; height: 110px; margin: 0 auto; }
    .mdh-score-inner { width: 86px; height: 86px; }
    .mdh-score-inner b { font-size: 1.65rem; }
    .mdh-name { font-size: 1.6rem; }
    .mdh-state-row { justify-content: center; }
}

/* ---------- Status card ---------- */
.status-card { padding: 24px; }
.status-card-head { margin-bottom: 18px; }
.status-card-head h3 { margin: 0 0 4px; font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--coffee); }

.status-parties {
    display: grid; grid-template-columns: 1fr auto 1fr;
    gap: 14px; align-items: center;
    background: rgba(184,148,106,.06);
    border-radius: 14px; padding: 18px;
    margin-bottom: 22px;
}
.status-party { display: flex; align-items: center; gap: 14px; min-width: 0; }
.status-party > div { min-width: 0; flex: 1; }
.status-party small {
    display: block; font-size: .7rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-soft); font-weight: 700;
    margin-bottom: 4px;
}
.sp-avatar {
    width: 52px; height: 52px;
    min-width: 52px; max-width: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fffaf0 0%, #fff 100%);
    border: 1px solid var(--gold-soft);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--gold); font-size: 1.1rem;
    flex: 0 0 52px;
    box-shadow: 0 2px 6px rgba(120,95,60,.08);
}
.status-divider { color: var(--gold); font-size: 1.2rem; }

.status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-size: .82rem; font-weight: 600;
}
.status-pending { background: rgba(184,148,106,.15); color: var(--coffee); }
.status-accepted { background: rgba(60,150,90,.12); color: #2e7d4f; }
.status-rejected { background: rgba(180,80,80,.12); color: #8a3a3a; }

@media (max-width: 720px) {
    .status-parties { grid-template-columns: 1fr; gap: 12px; }
    .status-divider { display: none; }
}

/* Steps */
.status-steps { list-style: none; padding: 0; margin: 0; }
.status-steps li {
    display: grid; grid-template-columns: 36px 1fr; gap: 14px;
    padding: 10px 0; align-items: flex-start;
    color: var(--ink-soft); position: relative;
}
.status-steps li:not(:last-child)::before {
    content: ''; position: absolute;
    left: 17px; top: 38px; bottom: -4px;
    width: 2px; background: rgba(184,148,106,.18);
}
.status-steps .step-num {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(184,148,106,.10); color: var(--ink-soft);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem;
    border: 2px solid transparent;
    z-index: 1;
}
.status-steps li.done .step-num {
    background: var(--gold); color: #fff;
}
.status-steps li.current .step-num {
    background: #fff; color: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(184,148,106,.15);
}
.status-steps li.done, .status-steps li.current { color: var(--ink); }
.status-steps li b { display: block; font-weight: 600; line-height: 1.3; }
.status-steps li small { font-size: .82rem; color: var(--ink-soft); }

/* ---------- Action card ---------- */
.action-card { padding: 22px 24px; margin-top: 18px; }
.action-card h3, .action-card h4 {
    margin: 0 0 6px; color: var(--coffee);
    font-family: 'Cormorant Garamond', serif;
}
.action-card h3 { font-size: 1.3rem; }
.action-card h4 { font-size: 1.1rem; }
.action-card .muted { margin-bottom: 14px; }
.action-row { display: flex; gap: 12px; flex-wrap: wrap; }
.action-row .btn { flex: 1 1 200px; }
.btn-block { width: 100%; justify-content: center; }
@media (max-width: 720px) {
    .action-row { flex-direction: column; }
}

/* ---------- Callout ---------- */
.callout {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px 20px; border-radius: 14px;
    margin: 18px 0;
    border: 1px solid;
}
.callout > i { font-size: 1.3rem; margin-top: 2px; flex-shrink: 0; }
.callout b { display: block; margin-bottom: 2px; }
.callout > div { display: flex; flex-direction: column; gap: 2px; }
.callout-success { background: rgba(60,150,90,.08); border-color: rgba(60,150,90,.25); color: #2e6d44; }
.callout-success > i { color: #2e7d4f; }
.callout-info { background: rgba(184,148,106,.08); border-color: var(--gold-soft); color: var(--coffee); }
.callout-info > i { color: var(--gold); }

/* ---------- Profile card ---------- */
.profile-card { padding: 24px; margin-top: 18px; }
.profile-card-head {
    display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap; gap: 8px;
    padding-bottom: 14px; margin-bottom: 18px;
    border-bottom: 1px solid var(--gold-soft);
}
.profile-card-head h3 {
    margin: 0; font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem; color: var(--coffee);
    display: inline-flex; align-items: center; gap: 10px;
}
.profile-card-head h3 > i { color: var(--gold); }
.profile-subhead {
    margin: 24px 0 14px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem; color: var(--coffee);
    display: inline-flex; align-items: center; gap: 10px;
}
.profile-subhead > i { color: var(--gold); }

/* ---------- Chat card ---------- */
.chat-card { padding: 24px; margin-top: 18px; }
.chat-head {
    display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.chat-head h3 {
    margin: 0; font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem; color: var(--coffee);
    display: inline-flex; align-items: center; gap: 10px;
}
.chat-head h3 > i { color: var(--gold); }
.chat-actions {
    display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px;
}
@media (max-width: 720px) {
    .chat-actions { flex-direction: column; }
    .chat-actions .btn { width: 100%; justify-content: center; }
}

/* ---------- Wali card ---------- */
.wali-card {
    padding: 26px; margin-top: 18px;
    border: 2px solid var(--gold);
    background: linear-gradient(135deg, #fff 0%, #fffaf0 100%);
}
.wali-head { display: flex; gap: 16px; margin-bottom: 18px; align-items: flex-start; }
.wali-head > i {
    font-size: 1.8rem; color: var(--gold);
    background: rgba(184,148,106,.12);
    width: 56px; height: 56px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.wali-head h2 {
    margin: 0; font-family: 'Cormorant Garamond', serif;
    color: var(--coffee); font-size: 1.5rem;
}
.wali-head p { margin: 4px 0 0; }

/* ---------- Reject card ---------- */
.reject-card { padding: 28px; }
.reject-head { display: flex; gap: 16px; margin-bottom: 22px; align-items: flex-start; }
.reject-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: rgba(180,80,80,.10); color: #b04a4a;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0;
}
.reject-head h2 {
    margin: 0; font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem; color: var(--coffee);
}
.reject-head p { margin: 6px 0 0; }

.reject-form .form-row { margin-bottom: 18px; }
.reject-form label {
    display: block; font-size: .78rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-soft);
    font-weight: 700; margin-bottom: 8px;
}
.reject-form textarea, .reject-form input[type=text] {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--gold-soft); border-radius: 12px;
    background: #fffdf9; font: inherit; color: var(--ink);
    resize: vertical;
}
.reject-form textarea:focus, .reject-form input:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184,148,106,.18);
}
.reject-tags ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.reject-tags li label {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: #fff; border: 1px solid var(--gold-soft);
    font-size: .85rem; font-weight: 500;
    text-transform: none; letter-spacing: 0; color: var(--ink);
    cursor: pointer; transition: all .15s ease;
    margin: 0;
}
.reject-tags li label:hover { border-color: var(--gold); }
.reject-tags input[type=checkbox] { accent-color: var(--gold); }
.reject-tags input[type=checkbox]:checked + * ,
.reject-tags li label:has(input:checked) {
    background: rgba(184,148,106,.15); border-color: var(--gold); color: var(--coffee);
}
.form-error { color: #b04a4a; font-size: .85rem; margin-top: 6px; }
.reject-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 720px) {
    .reject-actions { flex-direction: column; }
    .reject-actions .btn { width: 100%; justify-content: center; }
}

/* =====================================================================
   AUTOSAVE INDICATOR
   ===================================================================== */
.autosave-bar {
    /* Sticky pill onder de topbar; geen volledige balk-achtergrond. */
    position: sticky; top: 96px; z-index: 9;
    margin: 0 0 14px;
    display: flex; justify-content: flex-end;
    pointer-events: none;
    background: transparent;
}
.autosave-bar > div { pointer-events: auto; }

.autosave-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    font-size: .82rem; font-weight: 600;
    background: #fff; border: 1px solid var(--gold-soft);
    box-shadow: 0 4px 14px rgba(120,95,60,.10);
    transition: opacity .2s ease;
}
.autosave-pill.idle { color: var(--ink-soft); background: rgba(255,255,255,.92); }
.autosave-pill.idle > i { color: var(--gold); }
.autosave-pill.ok {
    color: #2e7d4f; background: #e6f4ec;
    border-color: #b8dcc7;
    animation: autosave-pop .25s ease;
}
.autosave-pill.err {
    color: #b04a4a; background: rgba(180,80,80,.10);
    border-color: rgba(180,80,80,.30);
    align-items: flex-start;
    text-align: left;
    line-height: 1.35;
    white-space: normal;
    max-width: min(100%, 520px);
}

@keyframes autosave-pop {
    0% { transform: scale(.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* HTMX request in progress: show subtle saving state */
.htmx-request .autosave-pill { opacity: .55; }
#profile-autosave-status.htmx-request::after,
#prefs-autosave-status.htmx-request::after {
    content: ""; display: inline-block;
}

@media (max-width: 720px) {
    .autosave-bar { top: 84px; justify-content: center; margin: 0 0 12px; padding: 0; }
    .autosave-pill { font-size: .78rem; padding: 7px 12px; }
}

/* =====================================================================
   FLOATING SAVE DOCK — bottom-right pill + manual "Save now" button.
   Mirrors the mobile FloatingSaveBadge so users always see save state
   and can force a flush.
   ===================================================================== */
.save-dock {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 14px;
    background: #fff;
    border: 1px solid var(--gold-soft);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(120,95,60,.18);
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink);
    max-width: calc(100vw - 36px);
}
/* Reserve space at the bottom of any page that contains the save-dock so
   the floating bar never covers the last form fields / submit button. */
body:has(.save-dock) { padding-bottom: 96px; }
@supports not selector(:has(*)) {
    /* Fallback for browsers without :has — add a sentinel margin to the
       form that the dock is bound to. */
    .save-dock ~ * { /* no-op */ }
}
.save-dock__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-soft);
    line-height: 1.25;
    max-width: 320px;
}
.save-dock__pill.saving { color: var(--coffee, #6b5430); }
.save-dock__pill.ok     { color: #2e7d4f; }
.save-dock__pill.err    { color: #b04a4a; }
.save-dock__icon { width: 1em; text-align: center; }
.save-dock__pill.idle .save-dock__icon { color: var(--gold); }
.save-dock__pill.ok   .save-dock__icon { color: #2e7d4f; }
.save-dock__pill.err  .save-dock__icon { color: #b04a4a; }
.save-dock [data-save-text] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.save-dock__btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--gold-soft);
    background: var(--ivory, #fffdf6);
    color: var(--ink);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
}
.save-dock__btn:hover { background: #fff; border-color: var(--gold); }
.save-dock__btn:active { transform: scale(.97); }
.save-dock__btn[disabled] { opacity: .55; cursor: not-allowed; }
.save-dock.is-dirty { border-color: var(--gold); box-shadow: 0 10px 28px rgba(170,130,60,.22); }

/* Inline client-side validation feedback (used by the save dock). */
.field-row.field-invalid > input,
.field-row.field-invalid > select,
.field-row.field-invalid > textarea,
.field-row.field-invalid input.form-control,
.field-row.field-invalid select.form-control,
.field-row.field-invalid textarea.form-control,
.field-row.field-invalid .ts-control {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .12) !important;
}
.field-row.field-invalid > label { color: #962d22; }
.client-error {
    margin-top: 6px;
    color: #962d22;
    font-size: .85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}
.client-error::before {
    content: "\f071"; /* fa-triangle-exclamation */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .8rem;
}

@media (max-width: 1024px) {
    /* Tablets — the dock spans nearly the full width, so reserve a bit
       more breathing room above the page-end. */
    body:has(.save-dock) { padding-bottom: 120px; }
}
@media (max-width: 640px) {
    .save-dock {
        left: 12px; right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        justify-content: space-between;
        padding: 8px 10px 8px 14px;
        font-size: .82rem;
    }
    .save-dock [data-save-text] { max-width: 60vw; }
    .save-dock__btn { padding: 8px 12px; }
    /* Mobile keyboards + the full-width dock cover even more, so leave
       extra space at the bottom of the scrollable content. */
    body:has(.save-dock) { padding-bottom: 140px; }
}

/* =====================================================================
   FEEDBACK PAGINA
   ===================================================================== */
.feedback-card { padding: 28px; }
.feedback-head {
    display: flex; gap: 16px; margin-bottom: 22px; align-items: flex-start;
}
.feedback-icon {
    width: 56px; height: 56px; border-radius: 16px;
    background: linear-gradient(135deg, rgba(184,148,106,.18) 0%, rgba(184,148,106,.08) 100%);
    color: var(--gold); font-size: 1.6rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px var(--gold-soft);
}
.feedback-head h2 {
    margin: 0; font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem; color: var(--coffee);
}
.feedback-head p { margin: 6px 0 0; }

.feedback-form .form-row { margin-bottom: 18px; }
.feedback-form label {
    display: block; font-size: .78rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-soft);
    font-weight: 700; margin-bottom: 8px;
}
.feedback-form input[type=text],
.feedback-form textarea {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--gold-soft); border-radius: 12px;
    background: #fffdf9; font: inherit; color: var(--ink);
    resize: vertical; box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.feedback-form input:focus, .feedback-form textarea:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184,148,106,.18);
    background: #fff;
}
.feedback-form textarea { min-height: 140px; line-height: 1.5; }

.feedback-actions {
    display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap; margin-top: 8px;
}
.feedback-privacy {
    font-size: .8rem; display: inline-flex; align-items: center; gap: 6px;
}
.feedback-privacy > i { color: var(--gold); }

.feedback-tips {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; margin-top: 18px;
}
.tip-card {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 16px; background: #fff;
    border: 1px solid var(--gold-soft);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(120,95,60,.05);
}
.tip-card > i {
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(184,148,106,.12); color: var(--gold);
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 34px; font-size: .95rem;
}
.tip-card b { display: block; color: var(--coffee); font-weight: 600; }
.tip-card small { color: var(--ink-soft); font-size: .82rem; line-height: 1.35; display: block; margin-top: 2px; }

@media (max-width: 720px) {
    .feedback-card { padding: 22px 18px; }
    .feedback-head { gap: 12px; }
    .feedback-head h2 { font-size: 1.35rem; }
    .feedback-icon { width: 48px; height: 48px; font-size: 1.3rem; }
    .feedback-actions { flex-direction: column; align-items: stretch; }
    .feedback-actions .btn { width: 100%; justify-content: center; }
    .feedback-privacy { justify-content: center; }
    .feedback-tips { grid-template-columns: 1fr; }
}

/* ============================================================
   AI matching — reasoning card op match-detail
   ============================================================ */
.ai-reasoning-card {
    border: 1px solid #ead8b3;
    background: linear-gradient(180deg, #fffaf0 0%, #fffdf6 100%);
    box-shadow: 0 8px 28px -16px rgba(180, 140, 50, .35);
}
.ai-reasoning-head {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.ai-reasoning-head .ai-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gold, #c9a84a); color: #fff; font-size: 1.1rem;
    box-shadow: 0 4px 12px -4px rgba(201, 168, 74, .55);
}
.ai-reasoning-head .ai-score-badge {
    margin-left: auto;
    padding: 6px 12px; border-radius: 999px;
    background: var(--gold, #c9a84a); color: #fff;
    font-weight: 600; font-size: .85rem;
    white-space: nowrap;
}
.ai-reasoning-text {
    font-size: 1rem; line-height: 1.55; color: #3a2f15;
    margin: 0 0 14px;
}
.ai-points-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.ai-points {
    border-radius: 12px; padding: 12px 14px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid #eee2c2;
}
.ai-points h4 {
    margin: 0 0 6px; padding: 0; border: 0;
    font-size: .9rem; display: flex; align-items: center; gap: 6px;
}
.ai-points-pos h4 { color: #1f7a4d; }
.ai-points-neg h4 { color: #a0651a; }
.ai-points ul {
    margin: 0; padding-left: 18px; font-size: .88rem; color: #4a4232;
}
.ai-points li { margin-bottom: 3px; }

/* Admin AI dashboard pillen */
.status-pill.ok { background:#dcf0e3; color:#1f7a4d; border-radius:999px; padding:2px 10px; font-size:.78rem; }
.status-pill.err { background:#fce0e4; color:#a02a3d; border-radius:999px; padding:2px 10px; font-size:.78rem; }

/* =====================================================================
   ADMIN PANEL — Mobile responsive fixes
   ===================================================================== */

/* Layout-helpers (alle viewports) — geen overflow:hidden op html/body
   want dat sloopt position:sticky van de sidebar. */
.app-content, .app-shell, .app-main { min-width: 0; }

/* Mobiel: voorkom horizontale page-overflow + maak tabellen scrollbaar
   binnen hun card. Op desktop blijven tabellen zoals vanouds.
   NB: gebruik `overflow-x: clip` i.p.v. `hidden` zodat `position: sticky`
   blijft werken op mobiel (hidden maakt html een scroll-container). */
@media (max-width: 1024px) {
    html, body { max-width: 100vw; overflow-x: clip; }
    @supports not (overflow: clip) {
        html, body { overflow-x: hidden; }
    }
    .app-content > * { min-width: 0; max-width: 100%; }
    .card { min-width: 0; }
    .card > table:not(.aa-table),
    .card > .table-wrap { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .card table:not(.aa-table) { min-width: 100%; }
}

/* KPI-grid en profile-grid: op mobiel altijd 1 kolom. */
@media (max-width: 720px) {
    .kpi-grid { grid-template-columns: 1fr !important; gap: 12px; }
    .profile-grid { grid-template-columns: 1fr !important; gap: 14px; }
    .col-2 { grid-template-columns: 1fr !important; }

    .app-content { padding: 18px 14px 40px; gap: 16px; }

    .card { padding: 16px 14px; }
    .card h2, .card h3 { font-size: 1.05rem; }

    /* Tabellen compacter */
    table { font-size: .85rem; }
    th, td { padding: 10px 10px; }
    th { font-size: .68rem; letter-spacing: 1.2px; }

    /* Knoppen in tabelcellen niet te breed */
    td .btn { padding: 6px 10px; font-size: .8rem; }

    /* KPI-tegels iets compacter */
    .kpi { padding: 16px 16px; }
    .kpi .value { font-size: 1.6rem; }

    /* Match-hero (admin match detail): stack ipv naast elkaar */
    .match-hero { grid-template-columns: 1fr !important; gap: 12px; }
    .match-hero .pct { font-size: 2.2rem; }

    /* Test tools knoppenrij wrap netjes */
    .card form { max-width: 100%; }

    /* Hero/breadcrumbs niet doen overflow'en */
    .app-topbar { padding-left: 14px !important; padding-right: 14px !important; flex-wrap: wrap; }
    .breadcrumbs { font-size: .8rem; }
}

/* Extra-klein scherm: laat alle horizontaal-scroll-tabellen visueel duidelijk zijn met fade. */
@media (max-width: 480px) {
    .card > table,
    .card > .table-wrap {
        background: linear-gradient(to right, transparent 0%, transparent 95%, rgba(184,148,106,.10) 100%);
    }
    .kpi-grid { gap: 10px; }
    .app-content { padding: 14px 10px 32px; }
}

/* ---------------------------------------------------------------------------
   Match-ronde progress (live HTMX-poll)
   --------------------------------------------------------------------------- */
.round-progress {
    border: 1px solid var(--border, #e5dccc);
    border-radius: 12px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #fbf6ec 0%, #f7eed9 100%);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    animation: rp-fade-in .25s ease-out;
}
.round-progress.is-running { border-color: #c9a65a; }
.round-progress.is-done    { border-color: #6dab64; background: linear-gradient(180deg,#eef8ea,#dff0d6); }
.round-progress.is-error   { border-color: #c95252; background: #fdecec; }
.round-progress.is-idle    { background: #f6f1e6; color: #6b6353; }

.round-progress .rp-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.round-progress .rp-title { font-weight: 600; font-size: 1rem; }
.round-progress .rp-title.is-ok  { color: #2f6e2c; }
.round-progress .rp-title.is-err { color: #a23030; }
.round-progress .rp-stats { font-size: .9rem; color: #4d4639; }
.round-progress .rp-stats b { color: #2c2517; }

.round-progress .rp-bar {
    position: relative;
    height: 10px;
    background: #ece2cc;
    border-radius: 999px;
    overflow: hidden;
}
.round-progress .rp-fill {
    height: 100%;
    background: linear-gradient(90deg, #c9a65a, #b58a3f);
    border-radius: 999px;
    transition: width .4s ease-out;
    min-width: 4px;
}
.round-progress .rp-fill.is-done {
    background: linear-gradient(90deg, #7fbf72, #4f9943);
}
.round-progress .rp-fill.rp-indeterminate {
    width: 35% !important;
    animation: rp-slide 1.4s ease-in-out infinite;
}
.round-progress .rp-foot { margin-top: 6px; }

@keyframes rp-slide {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(180%); }
    100% { transform: translateX(180%); }
}
@keyframes rp-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------------
   Open antwoorden — blokken op de gebruikersdetail-pagina
   --------------------------------------------------------------------------- */
.open-answers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
.open-answers .open-answer {
    background: #fffdf8;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 8px);
    padding: 14px 16px;
}
.open-answers .open-answer .oa-label {
    display: block;
    font-size: .72rem;
    color: var(--ink-soft);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 600;
}
.open-answers .open-answer p {
    margin: 0;
    color: var(--ink);
    line-height: 1.5;
    font-size: .95rem;
}

/* ---------------------------------------------------------------------------
   Admin-acties op match-detail / matches-list
   --------------------------------------------------------------------------- */
.admin-actions .aa-section {
    border-top: 1px solid var(--line);
    padding-top: 18px;
    margin-top: 18px;
}
.admin-actions .aa-section:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}
.admin-actions .aa-section h3 {
    margin: 0 0 14px;
    font-size: 1.02rem;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    border: 0;
    padding: 0;
}
.admin-actions .aa-section h3 i {
    color: var(--coffee);
}
.admin-actions .aa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
.admin-actions .aa-tile {
    background: #fffdf8;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 8px);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.admin-actions .aa-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.admin-actions .aa-tile-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-actions .aa-tile-actions form {
    margin: 0;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.admin-actions .aa-tile-actions .aa-reject-form input[type="text"] {
    flex: 1;
    min-width: 120px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: .85rem;
}
.admin-actions .aa-tile-actions button {
    flex-shrink: 0;
}
.admin-actions .aa-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.admin-actions .aa-row form {
    margin: 0;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.admin-actions .aa-inline-form input[type="text"] {
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: .85rem;
    min-width: 160px;
}
.aa-danger {
    border: 1px solid #f0c8c2 !important;
    background: #fdf6f5 !important;
}
.aa-danger h2,
.aa-danger h3 {
    color: var(--danger, #b03a2e);
}
.aa-danger h3 i,
.aa-danger h2 i {
    color: var(--danger, #b03a2e) !important;
}
.admin-actions .aa-section.aa-danger {
    background: #fdf6f5;
    border: 1px solid #f0c8c2;
    border-radius: var(--radius-sm, 8px);
    padding: 14px 16px;
    margin-top: 18px;
}

/* =====================================================================
   PREMIUM / SUBSCRIPTION
   ===================================================================== */

.sub-hero {
    position: relative;
    border-radius: 22px;
    padding: 28px 30px;
    margin-bottom: 22px;
    color: #fff;
    background: linear-gradient(135deg, #2a2a2a, #404040);
    box-shadow: 0 18px 38px -22px rgba(0,0,0,.45);
    overflow: hidden;
}
.sub-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(255,255,255,.08), transparent 55%);
    pointer-events: none;
}
.sub-hero--ok      { background: linear-gradient(135deg, #2f5f3d, #487a47); }
.sub-hero--warning { background: linear-gradient(135deg, #8a5a1e, #b07a2c); }
.sub-hero--danger  { background: linear-gradient(135deg, #6f2a2a, #944141); }

.sub-hero__top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; position: relative; z-index: 1;
}
.sub-hero__eyebrow {
    display: inline-block;
    color: var(--gold, #d4af37);
    font-size: .78rem; letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 8px;
}
.sub-hero__title { margin: 0 0 8px; font-size: 1.7rem; color: #fff; }
.sub-hero__lead  { margin: 0; opacity: .92; max-width: 60ch; line-height: 1.55; }

.sub-hero__badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.22);
    font-weight: 600; font-size: .85rem;
    white-space: nowrap;
}
.sub-hero__badge i { font-size: .9rem; }
.sub-hero__badge--ok      { background: rgba(255,255,255,.18); }
.sub-hero__badge--warning { background: rgba(255,255,255,.18); }
.sub-hero__badge--danger  { background: rgba(255,255,255,.18); }

.sub-hero__price {
    margin-top: 22px;
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    position: relative; z-index: 1;
}
.sub-hero__amount { font-size: 2.6rem; font-weight: 800; letter-spacing: -.5px; line-height: 1; }
.sub-hero__cycle  { opacity: .85; font-size: .95rem; }
.sub-hero__chip {
    margin-left: 4px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.22);
    padding: 5px 12px; border-radius: 999px;
    font-size: .78rem; font-weight: 600;
}

.sub-hero__meta {
    margin-top: 22px; padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.16);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 24px; position: relative; z-index: 1;
}
.sub-hero__meta > div { display: flex; flex-direction: column; gap: 4px; }
.sub-hero__meta span  { font-size: .75rem; opacity: .75; text-transform: uppercase; letter-spacing: 1.5px; }
.sub-hero__meta b     { font-weight: 600; font-size: .98rem; color: #fff; }
.sub-hero__meta code  { background: rgba(255,255,255,.12); padding: 2px 7px; border-radius: 5px; font-size: .82rem; color: #fff; }

.sub-benefits {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 12px;
}
.sub-benefits li {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px;
    background: var(--ok-bg, #f4f1ea);
    border-radius: 12px;
    line-height: 1.5;
}
.sub-benefits li i {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--ok, #6f8a4a);
    font-size: .85rem;
}

.sub-actions {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.sub-actions .btn { display: inline-flex; align-items: center; gap: 8px; }

.sub-faq details {
    border-top: 1px solid var(--line, #e8e2d4);
    padding: 14px 0;
}
.sub-faq details:first-of-type { border-top: 0; padding-top: 4px; }
.sub-faq summary {
    cursor: pointer; font-weight: 600;
    list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.sub-faq summary::after {
    content: "+"; font-size: 1.2rem; color: var(--ink-soft, #6b6457);
    transition: transform .2s ease;
}
.sub-faq details[open] summary::after { content: "−"; }
.sub-faq details p { margin: 10px 0 0; color: var(--ink-soft, #6b6457); line-height: 1.55; }

@media (max-width: 640px) {
    .sub-hero { padding: 22px 20px; }
    .sub-hero__title { font-size: 1.4rem; }
    .sub-hero__amount { font-size: 2.1rem; }
}

.aa-row-actions {
    display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
}
.aa-row-actions .btn { padding: 6px 10px; line-height: 1; }
.aa-row-actions form { margin: 0; }

/* =====================================================================
   ADMIN: Settings page
   ===================================================================== */

.settings-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.settings-status__tile {
    background: #fff;
    border: 1px solid var(--line, #e8e2d4);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 6px;
}
.settings-status__tile--cta { display: flex; align-items: center; }
.settings-status__label {
    font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ink-soft, #6b6457);
}
.settings-status__value { font-size: 1rem; line-height: 1.35; color: var(--ink, #2a2a2a); }
.settings-status__value small { font-size: .78rem; }

.dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    margin-right: 6px; vertical-align: 1px;
}
.dot--ok      { background: #3b8a4a; box-shadow: 0 0 0 3px rgba(59,138,74,.15); }
.dot--off     { background: #b0a89a; }
.dot--danger  { background: #a02a3d; box-shadow: 0 0 0 3px rgba(160,42,61,.15); }

.settings-form { display: flex; flex-direction: column; gap: 18px; }

.settings-card {
    background: #fff;
    border: 1px solid var(--line, #e8e2d4);
    border-radius: 18px;
    padding: 26px 28px;
    box-shadow: 0 6px 22px -18px rgba(0,0,0,.18);
}
.settings-card__head { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line, #e8e2d4); }
.settings-card__head h2 { margin: 0 0 4px; font-size: 1.15rem; display: flex; align-items: center; gap: 10px; }
.settings-card__head h2 i { color: var(--gold, #c8a64b); }
.settings-card__head .muted { margin: 0; line-height: 1.5; }

/* Persoonlijke admin opt-in card op de settings-pagina */
.admin-match-optin-card { margin-bottom: 18px; }
.admin-match-optin-form {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.admin-match-optin-form__status {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: .95rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 18px;
}
.settings-field { display: flex; flex-direction: column; gap: 6px; }
.settings-field > span {
    font-weight: 600; font-size: .88rem; color: var(--ink, #2a2a2a);
}
.settings-field input[type="text"],
.settings-field input[type="number"],
.settings-field input[type="time"],
.settings-field input[type="email"],
.settings-field select,
.settings-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line, #e8e2d4);
    border-radius: 10px;
    background: #fffdf8;
    font-size: .95rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.settings-field input:focus,
.settings-field select:focus,
.settings-field textarea:focus {
    outline: 0;
    border-color: var(--gold, #c8a64b);
    box-shadow: 0 0 0 3px rgba(200,166,75,.18);
}
.settings-field small { line-height: 1.4; }

.settings-toggle {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    background: #fffdf8;
    border: 1px solid var(--line, #e8e2d4);
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 16px;
}
.settings-toggle input[type="checkbox"] {
    width: 18px; height: 18px; margin-top: 2px;
    accent-color: var(--gold, #c8a64b);
}
.settings-toggle span { display: flex; flex-direction: column; gap: 2px; }
.settings-toggle b { font-weight: 600; }
.settings-toggle small { font-size: .82rem; line-height: 1.45; }

.settings-weekdays {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.settings-weekdays ul { list-style: none; padding: 0; margin: 0; display: contents; }
.settings-weekdays li label {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: #fffdf8;
    border: 1px solid var(--line, #e8e2d4);
    border-radius: 999px;
    cursor: pointer;
    font-size: .88rem;
    transition: all .15s ease;
}
.settings-weekdays li label:hover { border-color: var(--gold, #c8a64b); }
.settings-weekdays li input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--gold, #c8a64b);
}
.settings-weekdays li input[type="checkbox"]:checked + ::before { font-weight: 600; }
.settings-weekdays li:has(input:checked) label,
.settings-weekdays li label:has(input:checked) {
    background: var(--ok-bg, #e8efd9);
    border-color: var(--ok, #6f8a4a);
    color: var(--ok, #6f8a4a);
    font-weight: 600;
}

.settings-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
    padding: 18px 0 4px;
}

/* =====================================================================
   ADMIN: Universal table style (.aa-table) + horizontal scroll wrapper
   ===================================================================== */
.aa-table-card {
    padding: 0;
    /* overflow stays on .aa-table-scroll so sticky thead can escape to viewport */
}
.aa-table-scroll {
    overflow-x: auto;
    overflow-y: clip;
    -webkit-overflow-scrolling: touch;
    border-radius: inherit;
    /* Scroll-shadow: shadow appears only when content is hidden left/right */
    background:
        linear-gradient(to right, var(--pearl), var(--pearl)) left  / 20px 100% no-repeat local,
        linear-gradient(to left,  var(--pearl), var(--pearl)) right / 20px 100% no-repeat local,
        linear-gradient(to right, rgba(0,0,0,.07), transparent) left  / 16px 100% no-repeat scroll,
        linear-gradient(to left,  rgba(0,0,0,.07), transparent) right / 16px 100% no-repeat scroll;
}
.aa-table-card > h3,
.aa-table-card > .aa-table-card__title {
    padding: 18px 20px 0;
    margin: 0 0 12px;
}
.aa-table {
    width: 100%;
    min-width: 1200px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9rem;
}
.aa-table th, .aa-table td {
    padding: 12px 16px;
    vertical-align: middle;
    text-align: left;
}
.aa-table th {
    font-size: .7rem; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 600;
    background: rgba(255, 253, 248, .55);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    position: relative; /* anchor for resize handle */
    overflow: visible;  /* allow handle to extend to column border */
}

/* ── Column resize handle ─────────────────────────────────────────────── */
.th-resize-handle {
    position: absolute;
    top: 0; right: -3px; /* centred on the right border between columns */
    width: 7px; height: 100%;
    cursor: col-resize;
    z-index: 10;
    display: flex; align-items: center; justify-content: center;
}
.th-resize-handle::before {
    content: '';
    width: 2px; height: 50%;
    border-radius: 1px;
    background: var(--line);
    transition: background .15s, height .15s;
}
.th-resize-handle:hover::before {
    background: var(--gold);
    height: 70%;
}

/* While dragging: lock cursor + block text selection globally */
.aa-table.is-resizing,
.aa-table.is-resizing * { user-select: none !important; cursor: col-resize !important; }
.aa-table tbody tr td { border-top: 1px solid var(--line); }
.aa-table tbody tr:first-child td { border-top: 0; }
.aa-table tbody tr:hover { background: rgba(255, 253, 248, .65); }

.aa-table .nowrap { white-space: nowrap; }
.aa-table .col-num   { width: 72px;  white-space: nowrap; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.aa-table .col-date  { width: 120px; white-space: nowrap; }
.aa-table .col-badge { width: 110px; }

/* Compact variant for simpler tables (e.g. history: 6 cols vs admin 9 cols) */
.aa-table--sm { min-width: 600px; }
.aa-table .col-actions {
    width: 80px; white-space: nowrap; text-align: center;
    position: sticky; right: 0; z-index: 2;
    background: var(--pearl);
    box-shadow: -2px 0 6px rgba(0, 0, 0, .06);
}
.aa-table thead .col-actions { z-index: 4; }

/* ── Pinned first column ────────────────────────────────────────────── */
.aa-table th:first-child,
.aa-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--pearl);
}

/* Corner cell: sticky on both axes — highest z-index */
.aa-table thead th:first-child { z-index: 5; }

/* Preserve hover background on first-column body cells */
.aa-table tbody tr:hover td:first-child { background: rgba(255, 253, 248, .65); }

/* Subtle right-side shadow signals the pinned column boundary */
.aa-table th:first-child,
.aa-table td:first-child { box-shadow: 2px 0 6px rgba(0, 0, 0, .06); }

.aa-table code.mono-mini {
    font-size: .74rem; padding: 3px 7px;
    background: var(--ivory); border: 1px solid var(--line);
    border-radius: 6px; color: var(--ink-soft);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.aa-table .text-clip {
    max-width: 360px;
    display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--ink-soft);
}

/* User cell — name + secondary line + small avatar */
.aa-table .user-cell { display: flex; align-items: center; gap: 10px; overflow: hidden; min-width: 0; }
.aa-table .user-cell .avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .76rem;
    flex-shrink: 0;
}
.aa-table .user-cell .who { line-height: 1.2; min-width: 0; overflow: hidden; }
.aa-table .user-cell .who a,
.aa-table .user-cell .who b {
    font-weight: 600; color: var(--ink); text-decoration: none;
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aa-table .user-cell .who a:hover { color: var(--gold); }
.aa-table .user-cell .who small {
    display: block; font-size: .76rem; color: var(--ink-soft);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
}

/* Empty row */
.aa-table .empty-row td {
    text-align: center; padding: 22px 16px;
    color: var(--ink-soft);
}

/* Action group: buttons stay on a single line */
.aa-row-actions {
    display: flex; gap: 4px; flex-wrap: nowrap;
    justify-content: center; align-items: center;
    width: 100%;
}
.aa-row-actions form { margin: 0; display: inline-flex; }

/* All action buttons: uniform square icon buttons */
.aa-row-actions .btn,
.aa-row-actions .btn-sm,
.aa-row-actions .btn-icon {
    width: 34px; height: 34px;
    min-width: 34px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; font-size: .88rem; line-height: 1;
    transition: background .15s, border-color .15s, color .15s, box-shadow .12s;
    flex-shrink: 0;
}

/* ── Ghost / neutral (view, open, secondary) */
.aa-row-actions .btn-secondary {
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--line);
}
.aa-row-actions .btn-secondary:hover {
    background: var(--ivory);
    color: var(--ink);
    border-color: var(--gold-soft);
    transform: none;
}

/* ── Soft success (activate, resume, approve) */
.aa-row-actions .btn-ok {
    background: var(--ok-bg);
    color: var(--ok);
    border: 1px solid transparent;
}
.aa-row-actions .btn-ok:hover {
    background: var(--ok);
    color: #fff;
    transform: none;
}

/* ── Soft destructive (delete, cancel) — subtle until hover */
.aa-row-actions .btn-danger {
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--line);
}
.aa-row-actions .btn-danger:hover {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: transparent;
    transform: none;
}

/* Footer note inside a table card */
.aa-table-card__footer {
    padding: 10px 18px 14px;
    font-size: .82rem; color: var(--ink-soft);
}

/* Pagination control used at the bottom of admin list tables. */
.aa-pagination {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    padding: 12px 18px 14px;
    border-top: 1px solid var(--line, #e9e2d4);
    font-size: .85rem;
}
.aa-pagination__info { color: var(--ink-soft); }
.aa-pagination__list {
    display: inline-flex; gap: 4px; flex-wrap: wrap;
    list-style: none; margin: 0; padding: 0;
}
.aa-page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 32px; padding: 0 10px;
    border: 1px solid var(--line, #e9e2d4);
    border-radius: 8px;
    background: #fff; color: var(--ink, #2b2218);
    font-size: .85rem; font-weight: 500;
    text-decoration: none; cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
.aa-page-btn:hover {
    background: #faf6ee; border-color: var(--gold, #c5a678);
}
.aa-page-btn.is-current {
    background: var(--gold, #c5a678); color: #fff;
    border-color: var(--gold, #c5a678); cursor: default;
}
.aa-page-btn.is-disabled {
    color: var(--ink-soft); background: #f5f1e8; cursor: not-allowed;
    opacity: .55;
}
.aa-page-ellipsis {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 32px; color: var(--ink-soft);
}
@media (max-width: 600px) {
    .aa-pagination { padding: 10px 12px 12px; }
    .aa-pagination__info { width: 100%; }
}

/* Filter bar: keep search + select on one row */
.filter-bar .fb-search { display: block; }
.filter-bar > select { flex: 0 0 auto; }
.filter-bar .fb-reset {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
}

/* All viewports: table keeps min-width and scrolls horizontally in its wrapper.
   No squishing — the wrapper handles overflow, not the table. */
@media (max-width: 1024px) {
    .aa-table-scroll { overflow-x: auto; }
    .aa-table th { padding: 10px 12px; } /* overflow: visible kept — handles must protrude */
    .aa-table td { padding: 10px 12px; overflow: hidden; text-overflow: ellipsis; }
    .aa-table .text-clip { max-width: 100%; }
    .aa-table .user-cell .who small { max-width: 100%; }
    .aa-table .empty-row td { overflow: visible; text-overflow: clip; }
}

@media (max-width: 760px) {
    .aa-table th, .aa-table td { padding: 10px 10px; }
    .aa-row-actions .btn,
    .aa-row-actions .btn-sm,
    .aa-row-actions .btn-icon { width: 30px; height: 30px; min-width: 30px; font-size: .78rem; }
}

/* =====================================================================
   ADMIN: auto-apply universal table style + horizontal scroll
   to any bare <table> inside an admin .card (excluding kpi/data-table).
   ===================================================================== */
body.admin .card:has(> table:not(.data-table):not(.kpi-table)) {
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
body.admin .card:has(> table:not(.data-table):not(.kpi-table)) > h1,
body.admin .card:has(> table:not(.data-table):not(.kpi-table)) > h2,
body.admin .card:has(> table:not(.data-table):not(.kpi-table)) > h3,
body.admin .card:has(> table:not(.data-table):not(.kpi-table)) > p {
    padding: 14px 18px 0;
    margin: 0 0 10px;
}
body.admin .card > table:not(.data-table):not(.kpi-table):not(.aa-table) {
    width: 100%;
    min-width: 720px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9rem;
}
body.admin .card > table:not(.data-table):not(.kpi-table):not(.aa-table) th,
body.admin .card > table:not(.data-table):not(.kpi-table):not(.aa-table) td {
    padding: 12px 16px;
    vertical-align: middle;
    text-align: left;
    border: 0;
}
body.admin .card > table:not(.data-table):not(.kpi-table):not(.aa-table) th {
    font-size: .7rem; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 600;
    background: rgba(255, 253, 248, .55);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
body.admin .card > table:not(.data-table):not(.kpi-table):not(.aa-table) tbody tr td {
    border-top: 1px solid var(--line);
}
body.admin .card > table:not(.data-table):not(.kpi-table):not(.aa-table) tbody tr:first-child td {
    border-top: 0;
}
body.admin .card > table:not(.data-table):not(.kpi-table):not(.aa-table) tbody tr:hover {
    background: rgba(255, 253, 248, .65);
}

/* Tablet/mobile: drop the forced 720px min-width so the admin tables
   fill the viewport instead of clumping their headers to the left. */
@media (max-width: 1024px) {
    body.admin .card:has(> table:not(.data-table):not(.kpi-table)) {
        overflow-x: visible;
    }
    body.admin .card > table:not(.data-table):not(.kpi-table):not(.aa-table) {
        min-width: 0;
        width: 100%;
        table-layout: fixed;
    }
}
@media (max-width: 760px) {
    body.admin .card:has(> table:not(.data-table):not(.kpi-table)) {
        overflow-x: auto;
    }
    body.admin .card > table:not(.data-table):not(.kpi-table):not(.aa-table) {
        min-width: 560px;
    }
}

/* =====================================================================
   ADMIN: Inbox (moderation queue)
   ===================================================================== */
.nav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    margin-left: auto;
    background: var(--danger, #a02a3d); color: #fff;
    border-radius: 999px;
    font-size: .7rem; font-weight: 700; line-height: 1;
}
.app-nav a { display: flex; align-items: center; }
.app-nav a .nav-badge { margin-left: auto; }

.inbox { display: flex; flex-direction: column; gap: 18px; }

.inbox__head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 18px; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px 26px;
    box-shadow: var(--shadow-sm);
}
.inbox__title { margin: 0; font-size: 1.35rem; display: flex; align-items: center; gap: 10px; }
.inbox__title i { color: var(--gold, #c8a64b); }
.inbox__total {
    display: flex; flex-direction: column; align-items: flex-end;
    line-height: 1.1;
}
.inbox__total b { font-size: 1.6rem; color: var(--coffee, #5a4a36); }
.inbox__total small { font-size: .75rem; color: var(--ink-soft); letter-spacing: 1px; text-transform: uppercase; }

.inbox__tabs {
    display: flex;
    gap: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #ece2c4;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.inbox__tabs::-webkit-scrollbar { display: none; }
.inbox__tab {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 9px;
    padding: 14px 22px;
    border-radius: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    color: #9a8a66;
    font-weight: 600; font-size: .92rem;
    letter-spacing: .15px;
    white-space: nowrap;
    transition: color .18s ease;
}
.inbox__tab i { font-size: .95em; opacity: .7; transition: opacity .18s ease, color .18s ease; }
.inbox__tab:hover {
    color: var(--coffee, #5a4a36);
    background: transparent;
}
.inbox__tab:hover i { opacity: 1; }
.inbox__tab.is-active {
    color: var(--coffee, #5a4a36);
    background: transparent;
    box-shadow: none;
}
.inbox__tab.is-active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 2px;
    background: #c8a64b;
    border-radius: 2px 2px 0 0;
}
.inbox__tab.is-active i { opacity: 1; color: var(--gold, #c8a64b); }
.inbox__tab.is-active .inbox__count {
    background: #c8a64b;
    color: #fff;
    box-shadow: none;
}
.inbox__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 7px;
    background: #faf3df; color: var(--coffee);
    border: 0;
    border-radius: 999px;
    font-size: .72rem; font-weight: 700;
    transition: background .18s ease, color .18s ease;
}

.inbox__panel { min-height: 200px; }

.inbox-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 14px;
}

.inbox-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 4px 18px -16px rgba(0,0,0,.18);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.inbox-card:hover {
    border-color: var(--gold-soft, #d8c89c);
    box-shadow: 0 8px 22px -16px rgba(0,0,0,.22);
}

.inbox-card__head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.inbox-card__meta { font-size: .82rem; white-space: nowrap; }

.inbox-card__body { margin-bottom: 14px; }

.inbox-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px 18px;
    padding: 12px 14px;
    background: var(--ivory, #fffdf8);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.inbox-meta-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inbox-meta-grid span {
    font-size: .68rem; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--ink-soft);
}
.inbox-meta-grid b {
    font-weight: 600; color: var(--ink); font-size: .9rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.inbox-details {
    margin-top: 12px;
    border-top: 1px dashed var(--line);
    padding-top: 12px;
}
.inbox-details summary {
    cursor: pointer; font-weight: 600; color: var(--coffee);
    list-style: none; display: inline-flex; align-items: center; gap: 6px;
    font-size: .88rem;
}
.inbox-details summary::before {
    content: "›"; display: inline-block;
    transition: transform .15s ease;
}
.inbox-details[open] summary::before { transform: rotate(90deg); }
.inbox-details summary::-webkit-details-marker { display: none; }
.inbox-dl {
    margin: 12px 0 0;
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 6px 14px;
    font-size: .9rem;
}
.inbox-dl dt {
    font-size: .72rem; letter-spacing: 1.3px; text-transform: uppercase;
    color: var(--ink-soft); padding-top: 3px;
}
.inbox-dl dd { margin: 0; }

.inbox-bubble {
    margin: 0;
    padding: 14px 18px;
    background: var(--ivory, #fffdf8);
    border-left: 3px solid var(--gold, #c8a64b);
    border-radius: 0 10px 10px 0;
    font-size: .94rem; line-height: 1.5;
    color: var(--ink);
    white-space: pre-wrap;
}

.inbox-subject { margin: 0 0 6px; font-size: 1rem; }
.inbox-body-text { margin: 0; line-height: 1.55; color: var(--ink); }

.inbox-card__actions {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.inbox-input {
    flex: 1 1 220px;
    min-width: 180px;
    padding: 9px 12px;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--ivory);
    font-size: .88rem;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.inbox-input:focus {
    outline: none; background: #fff;
    border-color: var(--gold-soft); box-shadow: 0 0 0 3px rgba(200,166,75,.18);
}
.inbox-card__buttons {
    display: inline-flex; gap: 8px; flex-wrap: wrap;
}
.inbox-card__buttons .btn { padding: 8px 14px; font-size: .85rem; }

.inbox-empty {
    background: #fff; border: 1px dashed var(--line);
    border-radius: 16px;
    padding: 44px 24px;
    text-align: center;
    color: var(--ink-soft);
}
.inbox-empty i {
    font-size: 2.6rem; color: var(--ok, #6f8a4a);
    margin-bottom: 12px;
}
.inbox-empty h3 { margin: 0 0 4px; color: var(--ink); }
.inbox-empty p { margin: 0; }

@media (max-width: 640px) {
    .inbox__head { padding: 18px 18px; }
    .inbox-card { padding: 14px 14px; }
    .inbox-card__buttons .btn { flex: 1 1 auto; }
    .inbox__tab span { display: none; }
}

/* Inbox badge hide-state (HTMX OOB swap zet .is-hidden wanneer telling 0 is) */
.nav-badge.is-hidden { display: none !important; }

/* =====================================================================
   AUTH: compacte registratiepagina
   Doel: minder scrollen op desktop én mobile, zonder dat het krap voelt.
   ===================================================================== */
.auth-card-wrap.is-register {
    width: 100%;
    max-width: 620px;       /* breder dan standaard 440px */
}
.auth-card-wrap.is-register .auth-head { margin-bottom: 18px; }
.auth-card-wrap.is-register .auth-head h2 {
    font-family: var(--font-display);
    font-size: 1.85rem;
    color: var(--espresso);
    margin: 0 0 4px;
}
.auth-card-wrap.is-register .auth-head .lead {
    color: var(--ink-soft);
    margin: 0;
    font-size: .95rem;
}

.reg-form .field-row { margin-bottom: 12px; }
.reg-form .form-row { gap: 12px; margin-bottom: 0; }
.reg-form label {
    font-size: .68rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 600;
}
.reg-form label .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Iets compactere inputs */
.reg-form input[type=text],
.reg-form input[type=email],
.reg-form input[type=password],
.reg-form input[type=tel] {
    padding: 11px 14px 11px 42px;
    font-size: .95rem;
}

/* Compacte gender-pillen, naast elkaar — ook op mobile (geen wrap meer). */
.gender-cards.is-compact {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 0;
}
.gender-cards.is-compact .gender-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 10px 14px;
    gap: 12px;
    border-radius: 12px;
}
.gender-cards.is-compact .gender-ico {
    width: 38px; height: 38px;
    margin: 0;
    font-size: 1rem;
    flex-shrink: 0;
}
.gender-cards.is-compact .gender-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.gender-cards.is-compact .gender-text b { font-size: 1rem; }
.gender-cards.is-compact .gender-text span {
    font-size: .72rem;
    color: var(--ink-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Compactere terms-rij. */
.reg-form .checkbox-line {
    padding: 10px 12px;
    font-size: .85rem;
}

/* Compactere primary-knop + minder marge erboven. */
.reg-form .form-actions { margin-top: 14px; }
.reg-form .btn-primary {
    padding: 12px 22px;
    font-size: .98rem;
}

.auth-card-wrap.is-register .auth-foot {
    margin-top: 14px;
    text-align: center;
    color: var(--ink-soft);
    font-size: .88rem;
}
.auth-card-wrap.is-register .auth-foot a { color: var(--coffee); font-weight: 600; }

/* Maak het auth-card-frame breder zodra het de register-variant bevat,
   en zet wat minder padding zodat alles in beeld past op laptops. */
.auth-card:has(.auth-card-wrap.is-register) { max-width: 640px; }
.auth-main:has(.auth-card-wrap.is-register) { padding: 32px 40px; }

@media (max-width: 720px) {
    .auth-main:has(.auth-card-wrap.is-register) { padding: 24px 18px; }
    .reg-form .form-row { grid-template-columns: 1fr 1fr; }   /* houd 2 kolommen op telefoon */
    .reg-form .form-row .field-row { margin-bottom: 10px; }
    .gender-cards.is-compact .gender-text span { display: none; } /* enkel titel op mobile */
}

/* Hele kleine schermen: alleen de wachtwoord-rij blijft 2 kolommen
   want die past het makkelijkst; namen + kunya/email worden 1 kolom. */
@media (max-width: 420px) {
    .reg-form .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* =====================================================================
   MATCH DETAIL: live countdown + premium polish (48u-vensters)
   ===================================================================== */

/* --- Hero decoratie: zachte goud-glow achter het portret --- */
.match-detail-hero { position: relative; overflow: hidden; }
.match-detail-hero .mdh-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(420px 220px at 100% -20%, rgba(201,168,74,.18), transparent 60%),
        radial-gradient(360px 200px at -10% 120%, rgba(201,168,74,.10), transparent 60%);
    pointer-events: none;
}
.match-detail-hero > * { position: relative; }
.mdh-sub i { color: var(--gold); margin-right: 2px; opacity: .85; }
.mdh-score-caption {
    margin-top: 10px; text-align: center;
    font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 700;
}
.mdh-score-caption i { color: var(--gold); margin-right: 4px; }

/* Score-ring zachte glans bij hover */
.mdh-score-ring {
    transition: transform .35s ease, box-shadow .35s ease;
}
.mdh-score-ring:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(201,168,74,.30);
}

/* --- Subtiele aftellen-pill (zelfde stijl als dashboard .mh-deadline) --- */
.mdh-countdown {
    margin-top: 12px;
    padding: 8px 14px;
    background: rgba(201,168,74,.07);
    border: 1px solid var(--gold-soft);
    border-radius: 999px;
    display: inline-flex; align-items: center;
    gap: 12px; flex-wrap: wrap;
    font-size: .85rem;
    max-width: 100%;
}
.mdh-countdown-main {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ink-soft);
}
.mdh-countdown-main > i {
    color: var(--gold); font-size: .95rem;
}
.mdh-countdown-text b {
    color: var(--coffee);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    margin-right: 2px;
}
.mdh-countdown.is-urgent {
    background: rgba(208,80,80,.10);
    border-color: rgba(208,80,80,.28);
}
.mdh-countdown.is-urgent .mdh-countdown-main,
.mdh-countdown.is-urgent .mdh-countdown-main > i,
.mdh-countdown.is-urgent .mdh-countdown-text b { color: #a02a3d; }
.mdh-countdown.is-expired { opacity: .65; }

@media (max-width: 720px) {
    .mdh-countdown { border-radius: 14px; padding: 10px 12px; }
    .mdh-countdown-main { width: 100%; }
}

/* --- Status parties: gender-tinted avatars --- */
.sp-avatar-male {
    background: linear-gradient(135deg, #eef4ff 0%, #ffffff 100%) !important;
    border-color: #cfe0f7 !important;
    color: #3a6fb1 !important;
}
.sp-avatar-female {
    background: linear-gradient(135deg, #fff0f4 0%, #ffffff 100%) !important;
    border-color: #f7cfd9 !important;
    color: #b14872 !important;
}
.status-pill {
    transition: transform .15s ease;
}
.status-pill.status-accepted i { animation: pulse-once .6s ease; }
@keyframes pulse-once {
    0% { transform: scale(.6); opacity: 0; }
    60% { transform: scale(1.25); }
    100% { transform: scale(1); opacity: 1; }
}
.status-divider {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, #fff7e8 0%, #fff 100%);
    border: 1px solid var(--gold-soft);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(201,168,74,.20);
    animation: heart-beat 2.4s ease-in-out infinite;
}
@keyframes heart-beat {
    0%, 100% { transform: scale(1); }
    18% { transform: scale(1.12); }
    36% { transform: scale(1); }
}

/* --- Profile fields: hover-lift + linker accent --- */
.profile-card .profile-grid .field {
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    overflow: hidden;
}
.profile-card .profile-grid .field::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, transparent, var(--gold), transparent);
    opacity: 0; transition: opacity .15s ease;
}
.profile-card .profile-grid .field:hover {
    transform: translateY(-1px);
    border-color: var(--gold-soft);
    box-shadow: 0 6px 18px -12px rgba(120,95,60,.30);
}
.profile-card .profile-grid .field:hover::before { opacity: .8; }
.profile-card .profile-grid .field span {
    display: block;
    font-size: .68rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-soft);
    font-weight: 700; margin-bottom: 4px;
}
.profile-card .profile-grid .field b {
    color: var(--coffee); font-weight: 600;
}

/* --- Action card: gouden primaire knop met zachte glow --- */
.action-card {
    background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
    border: 1px solid var(--gold-soft);
}
.action-card .btn-primary {
    background: linear-gradient(135deg, var(--gold) 0%, #b8894a 100%);
    border: 0; color: #fff;
    box-shadow: 0 6px 18px -8px rgba(201,168,74,.55);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.action-card .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(201,168,74,.65);
    filter: brightness(1.05);
}
.action-card .btn-secondary:hover { border-color: var(--gold); color: var(--coffee); }

/* --- Chat bubbles: zachte verheffing + tail --- */
.chat-card .bubble {
    box-shadow: 0 2px 10px -6px rgba(120,95,60,.30);
    position: relative;
    line-height: 1.5;
    border-radius: 16px 16px 16px 4px;
}
.chat-card .bubble.mine {
    border-radius: 16px 16px 4px 16px;
    box-shadow: 0 4px 14px -6px rgba(201,168,74,.50);
}
.chat-card .bubble small {
    display: flex; align-items: center; gap: 5px;
    font-size: .7rem; opacity: .72; margin-top: 6px;
}
.chat-card .bubble.mine small { color: rgba(255,255,255,.92); }

/* --- Wali card: extra eervol --- */
.wali-card {
    box-shadow: 0 14px 36px -22px rgba(201,168,74,.50);
    position: relative; overflow: hidden;
}
.wali-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(420px 200px at 110% -20%, rgba(201,168,74,.16), transparent 60%);
    pointer-events: none;
}
.wali-card > * { position: relative; }

/* --- AI reasoning: subtieler en luxer --- */
.ai-reasoning-card {
    box-shadow: 0 12px 32px -22px rgba(201,168,74,.50);
}
.ai-reasoning-head .ai-icon {
    background: linear-gradient(135deg, var(--gold) 0%, #b8894a 100%);
}
.ai-reasoning-head .ai-score-badge {
    background: linear-gradient(135deg, var(--gold) 0%, #b8894a 100%);
    box-shadow: 0 4px 12px -4px rgba(201,168,74,.55);
}

/* --- Back-link: arrow slide bij hover --- */
.back-link i { transition: transform .2s ease; }
.back-link:hover i { transform: translateX(-3px); }


/* =====================================================================
   DASHBOARD: subtiele match-deadline regel + waiting-pill
   ===================================================================== */
.mh-deadline {
    margin: 0 0 16px;
    padding: 8px 14px;
    background: rgba(201,168,74,.07);
    border: 1px solid var(--gold-soft);
    border-radius: 999px;
    display: inline-flex; align-items: center;
    gap: 12px; flex-wrap: wrap;
    font-size: .85rem;
    max-width: 100%;
}
.mh-deadline-main {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ink-soft);
}
.mh-deadline-main > i {
    color: var(--gold);
    font-size: .95rem;
}
.mh-deadline-text b {
    color: var(--coffee);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    margin-right: 2px;
}
.mh-waiting { display: inline-flex; }
.waiting-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    font-size: .75rem; font-weight: 600;
    line-height: 1.4;
}
.waiting-pill > i { font-size: .7rem; }
.waiting-me {
    background: rgba(232,168,56,.18); color: #946816;
}
.waiting-other {
    background: rgba(120,140,170,.14); color: #4d5a72;
}
.waiting-both {
    background: rgba(201,168,74,.16); color: var(--coffee);
}

.mh-deadline.is-urgent {
    background: rgba(208,80,80,.10);
    border-color: rgba(208,80,80,.28);
}
.mh-deadline.is-urgent .mh-deadline-main,
.mh-deadline.is-urgent .mh-deadline-main > i,
.mh-deadline.is-urgent .mh-deadline-text b { color: #a02a3d; }
.mh-deadline.is-expired { opacity: .65; }

@media (max-width: 720px) {
    .mh-deadline { border-radius: 14px; padding: 10px 12px; gap: 8px; }
    .mh-deadline-main { width: 100%; }
}


/* =====================================================================
   CHAT (HTMX) — match-detail
   ===================================================================== */
.chat-card { padding: 0; overflow: hidden; }

.chat-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px 20px;
    border-bottom: 1px solid var(--gold-soft);
    background: linear-gradient(180deg, #fffdf8 0%, #fff 100%);
}
.chat-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.chat-head h3 {
    margin: 0; font-family: 'Cormorant Garamond', serif;
    color: var(--coffee); font-size: 1.25rem; font-weight: 600;
    line-height: 1.1;
}
.chat-head .muted { font-size: .76rem; }
.chat-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--gold-soft);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
    background: linear-gradient(135deg, #fffaf0, #fff);
    color: var(--gold);
}
.chat-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    flex-shrink: 0;
}
.chat-pill .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; box-shadow: 0 0 0 4px rgba(0,0,0,.05);
    animation: chat-live-pulse 1.6s ease-in-out infinite;
}
@keyframes chat-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(.78); }
}
.chat-pill-live  { background: rgba(60,150,90,.12); color: #2e7d4f; }
.chat-pill-warn  { background: rgba(232,168,56,.18); color: #946816; }
.chat-pill-muted { background: rgba(120,120,120,.10); color: var(--ink-soft); }

/* --- Messages list (scroll-area) --- */
#chat-messages.chat {
    display: flex; flex-direction: column; gap: 8px;
    padding: 18px 20px;
    background:
        radial-gradient(1200px 200px at 50% 0%, rgba(201,168,74,.05), transparent 60%),
        #fbf6ec;
    min-height: 260px;
    max-height: 520px;
    overflow-y: auto;
    scroll-behavior: smooth;
}
#chat-messages.chat::-webkit-scrollbar { width: 8px; }
#chat-messages.chat::-webkit-scrollbar-thumb {
    background: rgba(201,168,74,.25); border-radius: 999px;
}

/* --- Bubbles (override eerdere styles) --- */
.chat-card .bubble {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: 18px 18px 18px 6px;
    background: #fff;
    border: 1px solid var(--gold-soft);
    color: var(--ink);
    font-size: .94rem;
    line-height: 1.5;
    box-shadow: 0 2px 10px -8px rgba(120,95,60,.30);
    align-self: flex-start;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    animation: bubble-in .22s ease-out;
}
.chat-card .bubble.mine {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--gold) 0%, #b8894a 100%);
    color: #fff;
    border-color: transparent;
    border-radius: 18px 18px 6px 18px;
    box-shadow: 0 4px 16px -8px rgba(201,168,74,.55);
}
.chat-card .bubble .bubble-body { white-space: pre-wrap; }
.chat-card .bubble small.bubble-meta {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 4px 0 0;
    font-size: .68rem; opacity: .75;
    line-height: 1;
}
.chat-card .bubble.mine small.bubble-meta { color: rgba(255,255,255,.95); opacity: .92; }
.bubble-status-pending  { opacity: .85; }
.bubble-status-approved { color: inherit; }
.bubble-status-rejected { color: #ffd5cf; }
.chat-card .bubble:not(.mine) .bubble-status-rejected { color: #b04a4a; }

@keyframes bubble-in {
    from { opacity: 0; transform: translateY(6px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* --- Empty state --- */
.chat-empty {
    margin: auto; text-align: center;
    color: var(--ink-soft); padding: 30px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.chat-empty i { font-size: 1.8rem; color: var(--gold); opacity: .55; }
.chat-empty p { margin: 0; max-width: 320px; font-size: .9rem; }

/* --- Composer --- */
.chat-composer {
    border-top: 1px solid var(--gold-soft);
    background: #fff;
    padding: 12px 16px 14px;
}
.chat-input-row {
    display: flex; align-items: flex-end; gap: 10px;
    background: #fbf6ec;
    border: 1px solid var(--gold-soft);
    border-radius: 14px;
    padding: 6px 6px 6px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.chat-input-row:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,168,74,.18);
    background: #fff;
}
.chat-input {
    flex: 1; min-width: 0;
    border: 0; outline: none; background: transparent;
    font: inherit; font-size: .95rem; line-height: 1.4;
    color: var(--ink);
    resize: none; max-height: 180px;
    padding: 8px 0;
}
.chat-input::placeholder { color: rgba(120,95,60,.55); }
.chat-send {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 0; cursor: pointer;
    background: linear-gradient(135deg, var(--gold) 0%, #b8894a 100%);
    color: #fff; font-size: .95rem;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px -6px rgba(201,168,74,.55);
    transition: transform .15s ease, filter .15s ease;
}
.chat-send:hover { transform: translateY(-1px); filter: brightness(1.05); }
.chat-send:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.chat-meta-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; flex-wrap: wrap;
    margin-top: 8px;
    font-size: .76rem;
}
.chat-meta-row .muted i { color: var(--gold); margin-right: 4px; }
.chat-counter b { color: var(--coffee); font-weight: 700; }

.chat-error {
    margin-top: 8px;
    padding: 8px 12px; border-radius: 10px;
    background: rgba(208,80,80,.10);
    border: 1px solid rgba(208,80,80,.28);
    color: #a02a3d; font-size: .82rem;
    display: inline-flex; align-items: center; gap: 6px;
}

/* Composer disabled-states */
.chat-state {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: .88rem;
    line-height: 1.35;
}
.chat-state b { display: block; }
.chat-state-info {
    background: rgba(201,168,74,.10);
    border: 1px solid var(--gold-soft);
    color: var(--coffee);
}
.chat-state-info > i { color: var(--gold); font-size: 1.1rem; }
.chat-state-info .btn { margin-left: auto; }
.chat-state-muted {
    background: #f6f1e8;
    border: 1px solid var(--line);
    color: var(--ink-soft);
}
.chat-state-muted > i { color: var(--gold); }

/* HTMX in-flight feedback */
.chat-composer.htmx-request .chat-send {
    opacity: .6; pointer-events: none;
}
.chat-composer.htmx-request .chat-input { opacity: .85; }

/* Footer link onder chat */
.chat-footer {
    padding: 10px 18px 14px;
    text-align: right;
    border-top: 1px dashed var(--line);
    background: #fffdf8;
}
.chat-link-danger {
    display: inline-flex; align-items: center; gap: 6px;
    color: #a04a4a; font-size: .82rem; text-decoration: none;
    font-weight: 500;
}
.chat-link-danger:hover { text-decoration: underline; }

@media (max-width: 720px) {
    .chat-head { padding: 12px 14px; }
    #chat-messages.chat { padding: 14px 12px; max-height: 56vh; }
    .chat-card .bubble { max-width: 86%; }
    .chat-composer { padding: 10px 12px 12px; }
    .chat-meta-row .chat-counter { order: 2; }
}

/* =====================================================================
   CHAT — overrides & polish v2
   - Neutraliseer globale textarea-stijl in composer (geen dubbele rand)
   - Tellertje als pill, rejection-block onder eigen bubble
   ===================================================================== */
.chat-composer textarea.chat-input,
.chat-composer .chat-input {
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    font-family: inherit;
    font-size: .98rem;
    line-height: 1.45;
    color: var(--ink);
    resize: none;
    max-height: 180px;
}
.chat-composer textarea.chat-input:focus { outline: none !important; box-shadow: none !important; }

/* Composer card: één duidelijke rand met focus-ring */
.chat-composer .chat-input-row {
    border-radius: 16px;
    border: 1px solid var(--gold-soft);
    background: #fffdf8;
    padding: 6px 8px 6px 16px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.chat-composer .chat-input-row:focus-within {
    border-color: var(--gold);
    background: #fff;
    box-shadow:
        0 0 0 4px rgba(201,168,74,.14),
        0 6px 18px -10px rgba(120,95,60,.30);
}
.chat-composer .chat-send {
    width: 42px; height: 42px;
}

/* Meta-rij: shield links, prominente counter rechts als pill */
.chat-meta-row {
    margin-top: 10px;
    align-items: center;
}
.chat-counter {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(201,168,74,.16), rgba(201,168,74,.08));
    border: 1px solid var(--gold-soft);
    color: var(--coffee);
    font-size: .78rem; font-weight: 600;
    white-space: nowrap;
}
.chat-counter b { font-size: .92rem; color: var(--gold); margin-right: 2px; }
.chat-counter::before {
    content: ""; display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,168,74,.18);
}

/* Rejected/pending visuele cue op de bubble */
.chat-card .bubble.bubble-rejected.mine {
    background: linear-gradient(135deg, #b85a5a 0%, #944141 100%);
    box-shadow: 0 4px 16px -8px rgba(180,80,80,.55);
}
.chat-card .bubble.bubble-rejected.mine .bubble-body {
    text-decoration: line-through;
    text-decoration-color: rgba(255,255,255,.55);
    opacity: .92;
}
.chat-card .bubble.bubble-pending.mine {
    background: linear-gradient(135deg, rgba(201,168,74,.85) 0%, rgba(184,137,74,.85) 100%);
}

/* Reject-uitleg blok onder eigen bubble */
.bubble-reject {
    margin-top: 8px;
    background: rgba(255,255,255,.96);
    color: var(--ink);
    border: 1px solid rgba(180,80,80,.30);
    border-left: 3px solid #b04a4a;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: .82rem;
    line-height: 1.45;
    box-shadow: 0 4px 10px -6px rgba(0,0,0,.18);
}
.bubble-reject-head {
    display: inline-flex; align-items: center; gap: 6px;
    color: #a02a3d; font-weight: 700; font-size: .76rem;
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: 4px;
}
.bubble-reject-body { color: var(--ink-soft); }

.chat-state .chat-counter-inline { margin-left: auto; }
.chat-state-muted .chat-counter-inline {
    background: rgba(255,255,255,.7);
}

/* =====================================================================
   INBOX — match-card (moderator-acceptatie van matches)
   ===================================================================== */
.inbox-card--match .inbox-match__pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #fffdf8 0%, #fff 100%);
    border: 1px solid var(--gold-soft);
    border-radius: 14px;
    margin: 8px 0;
}
.inbox-match__party {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: inherit;
    min-width: 0;
}
.inbox-match__party b { display: block; color: var(--coffee); }
.inbox-match__party small { display: block; }
.inbox-match__heart {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold) 0%, #b8894a 100%);
    color: #fff; font-size: .9rem;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px -6px rgba(201,168,74,.55);
    animation: inbox-heart-beat 1.6s ease-in-out infinite;
}
@keyframes inbox-heart-beat {
    0%, 100% { transform: scale(1); }
    20% { transform: scale(1.12); }
    40% { transform: scale(.98); }
}
.inbox-bubble--ai {
    background: rgba(201,168,74,.08);
    border-left: 3px solid var(--gold);
    font-style: italic;
    color: var(--ink);
    padding: 10px 14px;
    margin: 8px 0 0;
    border-radius: 0 10px 10px 0;
}
.inbox-bubble--ai small { display:block; font-style: normal; margin-bottom: 4px; }
.inbox-match__tags {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.inbox-match__tags .tag {
    font-size: .74rem; padding: 3px 9px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid transparent;
}
.tag-ok   { background: rgba(60,150,90,.10); color: #2e7d4f; border-color: rgba(60,150,90,.20); }
.tag-warn { background: rgba(232,168,56,.14); color: #946816; border-color: rgba(232,168,56,.30); }

@media (max-width: 600px) {
    .inbox-card--match .inbox-match__pair {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .inbox-match__heart { justify-self: center; }
}


/* ==================================================================
   Articles — text-only, editorial
   ================================================================== */
.articles-page { display: flex; flex-direction: column; gap: 36px; max-width: 760px; }

.articles-hero { padding: 12px 0 0; }
.articles-hero .eyebrow {
    display: inline-block;
    color: var(--gold-dark, #a07a18);
    font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    font-size: 0.72rem;
}
.articles-hero h1 {
    margin: 10px 0 8px;
    font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
    font-weight: 700;
    font-size: 2.4rem; line-height: 1.1;
    color: var(--coffee, #2b1f12);
    letter-spacing: -0.01em;
}
.articles-hero .lead { color: var(--text-muted, #6b5b48); max-width: 560px; font-size: 1.02rem; line-height: 1.55; }

.articles-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.articles-cats .chip {
    padding: 7px 14px; border-radius: 999px;
    background: transparent; border: 1px solid var(--border, #e6dcc4);
    color: var(--coffee, #2b1f12); text-decoration: none;
    font-weight: 600; font-size: 0.84rem; letter-spacing: 0.01em;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.articles-cats .chip:hover { border-color: var(--coffee, #2b1f12); }
.articles-cats .chip.is-active {
    background: var(--coffee, #2b1f12); color: #fff8e7; border-color: var(--coffee, #2b1f12);
}

/* Featured — magazine cover style, no card / no gold bar */
.article-featured {
    display: block;
    text-decoration: none; color: inherit;
    padding: 6px 0 14px;
    margin: 4px 0 8px;
    max-width: 820px;
    transition: opacity 0.18s ease;
}
.article-featured:hover { opacity: 0.92; }
.article-featured:hover h2 { color: var(--gold-dark, #a07a18); }
.article-featured__rule {
    display: block; height: 1px; width: 100%;
    background: var(--border, #e6dcc4);
    margin-bottom: 22px;
}
.article-featured__rule--bottom { margin-top: 22px; margin-bottom: 0; }
.article-featured__kicker {
    display: block;
    color: var(--gold-dark, #a07a18);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.7rem;
    margin-bottom: 14px;
}
.article-featured h2 {
    margin: 0 0 14px;
    font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
    font-weight: 700;
    font-size: 2.6rem; line-height: 1.08;
    color: var(--coffee, #2b1f12);
    letter-spacing: -0.015em;
    max-width: 18ch;
    transition: color 0.18s ease;
}
.article-featured__summary {
    margin: 0 0 18px;
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    color: var(--coffee, #2b1f12);
    font-size: 1.18rem; line-height: 1.5;
    max-width: 52ch;
}
.article-featured__foot {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
}
.article-featured__cta {
    color: var(--coffee, #2b1f12); font-weight: 700; font-size: 0.88rem;
    border-bottom: 1px solid var(--gold, #c8a64b); padding-bottom: 2px;
    letter-spacing: 0.01em;
}

/* Meta line */
.meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--text-muted, #6b5b48); font-size: 0.84rem; }
.meta .meta-dot { opacity: 0.6; }

/* List of articles */
.article-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
}
.article-list > li { border-top: 1px solid var(--border, #e6dcc4); }
.article-list > li:last-child { border-bottom: 1px solid var(--border, #e6dcc4); }

.article-row {
    display: block;
    padding: 22px 4px;
    text-decoration: none; color: inherit;
    transition: background 0.15s ease;
}
.article-row:hover { background: rgba(201, 162, 39, 0.06); }
.article-row__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.article-row__body .eyebrow {
    color: var(--gold-dark, #a07a18); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.68rem;
}
.article-row__body h3 {
    margin: 0;
    font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
    font-weight: 700;
    font-size: 1.3rem; line-height: 1.22;
    color: var(--coffee, #2b1f12);
    letter-spacing: -0.005em;
}
.article-row__body p {
    margin: 0; color: var(--text-muted, #6b5b48);
    font-size: 0.95rem; line-height: 1.55;
}

/* Detail */
.article-detail { display: flex; flex-direction: column; gap: 22px; max-width: 720px; }
.article-detail__header { display: flex; flex-direction: column; gap: 10px; }
.article-detail__header .eyebrow {
    color: var(--gold-dark, #a07a18); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem;
}
.article-detail__header h1 {
    margin: 0;
    font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
    font-weight: 700;
    font-size: 2.4rem; line-height: 1.12;
    color: var(--coffee, #2b1f12);
    letter-spacing: -0.01em;
}
.article-detail__meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--text-muted, #6b5b48); font-size: 0.88rem; }
.article-detail__meta .meta-dot { opacity: 0.6; }
.article-detail__rule {
    display: block; height: 1px; background: var(--border, #e6dcc4);
    margin-top: 6px;
}

.article-detail__lead {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-size: 1.18rem; line-height: 1.55;
    color: var(--coffee, #2b1f12);
    padding-left: 16px; border-left: 3px solid var(--gold, #c8a64b);
}

.article-detail__body {
    color: var(--coffee, #2b1f12); line-height: 1.78; font-size: 1.04rem;
}
.article-detail__body h2 {
    margin: 28px 0 10px;
    font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
    font-weight: 700; font-size: 1.4rem; line-height: 1.25;
    color: var(--coffee, #2b1f12);
    letter-spacing: -0.005em;
}
.article-detail__body h2:first-child { margin-top: 0; }
.article-detail__body p { margin: 0 0 16px; }
.article-detail__body p:first-of-type::first-letter {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 3rem; line-height: 1;
    float: left; padding: 4px 10px 0 0;
    color: var(--coffee, #2b1f12);
}
.article-detail__endmark {
    margin: 28px 0 0; text-align: center;
    color: var(--gold-dark, #a07a18); letter-spacing: 0.6em; font-size: 0.9rem;
}

.article-detail__footer { padding: 8px 0 0; border-top: 1px solid var(--border, #e6dcc4); margin-top: 6px; }
.article-detail__back {
    color: var(--coffee, #2b1f12); font-weight: 700; text-decoration: none;
    font-size: 0.92rem;
}
.article-detail__back:hover { color: var(--gold-dark, #a07a18); }

.article-related { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.article-related h3 {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700; font-size: 1.25rem;
    color: var(--coffee, #2b1f12);
}

@media (max-width: 720px) {
    .articles-hero h1 { font-size: 2rem; }
    .article-featured h2 { font-size: 1.85rem; }
    .article-featured__summary { font-size: 1.02rem; }
    .article-detail__header h1 { font-size: 1.95rem; }
    .article-row { padding: 18px 2px; }
    .article-row__body h3 { font-size: 1.15rem; }
}

/* ============================================================
   Section navigation — sticky horizontal pills (profile / prefs)
   ============================================================ */
.section-nav {
    position: sticky;
    top: 76px;
    z-index: 9;
    /* Break out of .app-content's horizontal padding so the bar
       spans full width from the sidebar edge to the screen edge. */
    margin: 0 -36px 12px;
    padding: 14px 36px 12px;
    background: rgba(255, 253, 249, .96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    max-width: none;
    min-width: 0;
}
.section-nav__scroller {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Hide the scrollbar entirely. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 28px;
    /* Subtle fade hint on both sides that there's more content to scroll to. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.section-nav__scroller::-webkit-scrollbar { width: 0; height: 0; display: none; }
.section-nav__pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--coffee);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.section-nav__pill:hover { background: var(--ivory); border-color: var(--gold-soft); }
.section-nav__pill.is-active {
    background: var(--coffee);
    border-color: var(--coffee);
    color: #fff;
}
.section-nav__pill i { font-size: .82rem; opacity: .85; }
[data-section-id] { scroll-margin-top: 170px; }
/* Autosave pill following the section-nav: floats freely below the pill bar
   without its own background bar — just a sticky pill on the right. */
.section-nav + .autosave-bar {
    position: sticky;
    top: 150px;
    z-index: 8;
    /* No top margin: when at rest the pill sits snug under the nav.
       The top: 150px only kicks in once the bar becomes stuck while scrolling,
       at which point it visually floats with breathing room below the pillbar. */
    margin: 0 0 0px;
    padding: 6px 6px 6px 0;
    background: transparent;
    backdrop-filter: none;
    border: 0;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    overflow: visible;
}
.section-nav + .autosave-bar > div { pointer-events: auto; }
@media (max-width: 1024px) {
    .section-nav { margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 720px) {
    .section-nav {
        position: sticky;
        top: 64px;
        margin-left: -14px;
        margin-right: -14px;
        padding: 8px 14px;
    }
    .section-nav + .autosave-bar { top: 124px; margin: 0 0 12px; }
    .section-nav__pill { padding: 7px 12px; font-size: .85rem; }
}
[data-section-nav-root]{min-width:0;max-width:100%;}

/* ============================================================
   Landing page — additional sections (strip, audience, compare, safety)
   ============================================================ */

/* Stats strip */
.lp-strip {
    background: var(--ivory);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 28px 0;
}
.lp-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    text-align: center;
}
.lp-strip-item b {
    display: block;
    font-family: var(--font-display);
    font-size: 2.4rem;
    color: var(--coffee);
    line-height: 1;
}
.lp-strip-item span {
    display: block;
    margin-top: 6px;
    color: var(--ink-soft);
    font-size: .92rem;
}

/* Audience */
.lp-audience-wrap {
    padding: 90px 0;
    background: linear-gradient(180deg, #fff 0%, var(--ivory) 100%);
}
.lp-audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.lp-audience-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 28px 24px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.lp-audience-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--gold-soft);
}
.lp-audience-card--featured {
    border-color: var(--gold-soft);
    background: linear-gradient(180deg, #fff 0%, #fdf6e8 100%);
}
.lp-audience-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(184, 148, 106, .12);
    color: var(--coffee);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 14px;
}
.lp-audience-card h3 { margin: 0 0 8px; font-size: 1.25rem; color: var(--coffee); }
.lp-audience-card > p { color: var(--ink-soft); margin: 0 0 16px; line-height: 1.55; }
.lp-audience-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lp-audience-list li { display: flex; align-items: flex-start; gap: 8px; color: var(--ink); font-size: .92rem; }
.lp-audience-list i { color: var(--gold); margin-top: 4px; flex: 0 0 auto; }

/* Comparison */
.lp-compare-section { padding: 90px 0 40px; padding-left: 28px; padding-right: 28px; }
.lp-compare-wrap {
    max-width: 880px;
    margin: 0 auto;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.lp-compare {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}
.lp-compare th, .lp-compare td {
    text-align: left;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.lp-compare thead th {
    background: var(--ivory);
    color: var(--coffee);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
}
.lp-compare tbody th {
    color: var(--coffee);
    font-weight: 600;
    width: 30%;
}
.lp-compare td { color: var(--ink-soft); }
.lp-compare .lp-compare-us { background: rgba(184, 148, 106, .06); color: var(--coffee); font-weight: 500; }
.lp-compare thead th.lp-compare-us { background: rgba(184, 148, 106, .14); }
.lp-compare i.fa-circle-check { color: #2f8a55; margin-right: 6px; }
.lp-compare i.fa-circle-xmark { color: #b3614c; margin-right: 6px; }
.lp-compare tbody tr:last-child th, .lp-compare tbody tr:last-child td { border-bottom: 0; }

/* Safety */
.lp-safety-wrap {
    padding: 90px 0;
    background: var(--ivory);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.lp-safety-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.lp-safety {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px 22px;
    text-align: left;
    transition: transform .2s, box-shadow .2s;
}
.lp-safety:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.lp-safety > i {
    font-size: 1.5rem;
    color: var(--gold);
    background: rgba(184, 148, 106, .12);
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.lp-safety h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--coffee); }
.lp-safety p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }

/* Responsive collapses */
@media (max-width: 1024px) {
    .lp-strip-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-audience-grid { grid-template-columns: 1fr; }
    .lp-safety-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .lp-strip-item b { font-size: 2rem; }
    .lp-safety-grid { grid-template-columns: 1fr; }
    .lp-compare th, .lp-compare td { padding: 12px 12px; font-size: .88rem; }
    .lp-compare tbody th { width: 38%; }
}

/* ============================================================
   Landing page — mobile padding & typography tightening
   ============================================================ */
@media (max-width: 720px) {
    /* Section vertical breathing room */
    .lp-values,
    .lp-pricing,
    .lp-faq,
    .lp-compare-section { padding: 48px 0 24px; padding-left: 18px; padding-right: 18px; }
    .lp-audience-wrap,
    .lp-quotes-wrap,
    .lp-safety-wrap,
    .lp-steps-wrap { padding: 48px 0; }
    .lp-final-cta { padding: 36px 0 56px; }

    /* Section heads */
    .lp-section-head { margin: 0 auto 26px; }
    .lp-section-head h2 { font-size: 1.55rem; line-height: 1.2; margin: 10px 0 8px; }
    .lp-section-head p { font-size: .95rem; }

    /* Hero */
    .lp-hero { padding-top: 48px; padding-bottom: 32px; }
    .lp-hero-text h1 { font-size: 2rem; line-height: 1.15; }
    .lp-lede { font-size: 1rem; margin-bottom: 22px; }
    .lp-hero-cta { gap: 10px; margin-bottom: 20px; }
    .lp-hero-cta .btn { width: 100%; justify-content: center; }
    .lp-hero-trust { gap: 8px; font-size: .88rem; }

    /* Value cards: tighter */
    .lp-value-grid { gap: 14px; }
    .lp-value { padding: 20px 18px; }
    .lp-value-icon { width: 42px; height: 42px; font-size: 1rem; margin-bottom: 12px; border-radius: 12px; }
    .lp-value h3 { font-size: 1.1rem; margin-bottom: 6px; }
    .lp-value p { font-size: .92rem; line-height: 1.5; }

    /* Audience */
    .lp-audience-grid { gap: 14px; }
    .lp-audience-card { padding: 22px 18px; }
    .lp-audience-icon { width: 44px; height: 44px; font-size: 1.15rem; margin-bottom: 12px; }
    .lp-audience-card h3 { font-size: 1.1rem; }
    .lp-audience-card > p { font-size: .92rem; margin-bottom: 12px; }

    /* Steps */
    .lp-steps { gap: 14px; }
    .lp-step { padding: 20px 16px; }
    .lp-step h3 { font-size: 1rem; }
    .lp-step p { font-size: .88rem; }

    /* Pricing */
    .lp-price-grid { gap: 14px; }
    .lp-price-card { padding: 24px 20px; }
    .lp-price-card h3 { font-size: 1.2rem; }
    .lp-price b { font-size: 2.1rem; }

    /* Safety */
    .lp-safety { padding: 20px 18px; }
    .lp-safety > i { width: 40px; height: 40px; font-size: 1.2rem; }
    .lp-safety h3 { font-size: 1rem; }

    /* Quotes */
    .lp-quote { padding: 22px 20px; }
    .lp-quote blockquote { font-size: 1rem; }

    /* FAQ */
    .lp-faq-item summary { padding: 14px 16px; font-size: .95rem; }
    .lp-faq-item p { margin: 10px 0 0 24px; font-size: .9rem; }

    /* Stats strip */
    .lp-strip { padding: 22px 0; }
    .lp-strip-grid { gap: 12px; }
    .lp-strip-item span { font-size: .82rem; }

    /* Final CTA */
    .lp-final-card { flex-direction: column; align-items: stretch; text-align: center; gap: 16px; padding: 28px 22px; }
    .lp-final-card h2 { font-size: 1.45rem; }
    .lp-final-card .btn { width: 100%; justify-content: center; }
}

/* Single-plan pricing layout */
.lp-price-grid--single { grid-template-columns: minmax(0, 460px); justify-content: center; }

/* ─── Payment-method picker (Mollie) ──────────────────────────── */
.pay-methods{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin:6px 0 16px;
}
@media (max-width: 560px){ .pay-methods{ grid-template-columns:1fr; } }
.pay-method{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:14px 10px;
    border:1.5px solid var(--color-border, #e3d6b8);
    border-radius:12px;
    background:#fff;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease, transform .05s ease;
    text-align:center;
    font-size:.92rem;
    font-weight:600;
    color:var(--ink, #2b2117);
}
.pay-method:hover{ border-color:var(--gold, #c9a14a); }
.pay-method input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.pay-method i{ font-size:1.35rem; color:var(--gold, #c9a14a); }
.pay-method__sub{ font-size:.75rem; font-weight:500; color:var(--muted, #7a6a55); }
.pay-method:has(input:checked){
    border-color:var(--gold, #c9a14a);
    background:rgba(201,161,74,.08);
    box-shadow:0 0 0 3px rgba(201,161,74,.15);
}
.pay-method:focus-within{ outline:2px solid var(--gold, #c9a14a); outline-offset:2px; }

/* Pricing card payment badges */
.lp-pay-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:14px 0 0;
}
.lp-pay-row__label{
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:var(--muted, #7a6a55);
    margin-right:2px;
}
.lp-pay-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 10px;
    border:1px solid var(--color-border, #e3d6b8);
    border-radius:999px;
    background:#fff;
    font-size:.82rem;
    font-weight:600;
    color:var(--ink, #2b2117);
}
.lp-pay-badge i{ color:var(--gold, #c9a14a); font-size:.95rem; }

/* ═══════════════════════════════════════════════════════════════
   HOW IT WORKS
   ═══════════════════════════════════════════════════════════════ */

/* Hero */
.hiw-hero{
    position:relative;
    padding: 80px 0 50px;
    text-align:center;
    background:
        radial-gradient(1200px 420px at 50% -10%, rgba(201,161,74,.18), transparent 60%),
        radial-gradient(900px 360px at 90% 110%, rgba(184,148,106,.10), transparent 70%);
    overflow:hidden;
}
.hiw-hero__inner h1{
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    line-height:1.1;
    margin: 8px 0 14px;
    background: var(--grad-gold);
    -webkit-background-clip:text; background-clip:text;
    color: transparent;
}
.hiw-hero__lead{
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    color: var(--ink-soft);
    max-width: 60ch;
    margin: 0 auto 24px;
    line-height: 1.65;
}
.hiw-hero__meta{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap: 10px 20px;
    color: var(--coffee);
    font-size: .9rem; font-weight: 600;
}
.hiw-hero__meta span{
    display:inline-flex; align-items:center; gap:8px;
    padding: 7px 14px;
    background: rgba(255,253,248,.7);
    border: 1px solid var(--line);
    border-radius: 999px;
    backdrop-filter: blur(6px);
}
.hiw-hero__meta i{ color: var(--gold, #c9a14a); }

/* Timeline wrapper */
.hiw-timeline-wrap{
    padding: 50px 28px 60px;
}
.hiw-timeline{
    list-style:none; padding:0; margin:0;
    position:relative;
    max-width: 880px;
    margin: 0 auto;
}
/* The vertical rail */
.hiw-timeline::before{
    content:"";
    position:absolute;
    top: 28px; bottom: 28px;
    left: 35px;
    width: 3px;
    background: linear-gradient(to bottom,
        rgba(201,161,74,.0) 0%,
        rgba(201,161,74,.55) 8%,
        rgba(184,148,106,.55) 92%,
        rgba(201,161,74,.0) 100%);
    border-radius: 2px;
}

/* Each step */
.hiw-step{
    position:relative;
    display:grid;
    grid-template-columns: 72px 1fr;
    gap: 22px;
    padding: 18px 0 32px;
}
.hiw-step:last-child{ padding-bottom: 0; }

/* Marker (number bubble) */
.hiw-step__marker{
    position:relative;
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--grad-gold);
    color: #fff;
    display:flex; align-items:center; justify-content:center;
    flex-direction: column;
    box-shadow:
        0 12px 32px -10px rgba(184,148,106,.55),
        inset 0 1px 0 rgba(255,255,255,.35);
    z-index: 1;
}
.hiw-step__marker::before{
    content:"";
    position:absolute; inset:-6px;
    border-radius:50%;
    border: 2px solid rgba(201,161,74,.25);
    pointer-events:none;
}
.hiw-step__num{
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1;
}
.hiw-step__marker > i{
    position:absolute;
    top: -10px; right: -10px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #fff;
    color: var(--coffee);
    display:flex; align-items:center; justify-content:center;
    font-size: .85rem;
    border: 1px solid var(--line);
    box-shadow: 0 6px 14px -6px rgba(107,79,48,.35);
}
.hiw-step--final .hiw-step__marker{
    background: linear-gradient(135deg, #6b4f30 0%, #c9a14a 100%);
}
.hiw-step--final .hiw-step__num i{ font-size: 1.25rem; }

/* Body */
.hiw-step__body{
    background: rgba(255,253,248,.85);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px 26px;
    box-shadow: 0 10px 28px -22px rgba(107,79,48,.35);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hiw-step:hover .hiw-step__body{
    transform: translateY(-2px);
    border-color: rgba(201,161,74,.55);
    box-shadow: 0 18px 38px -22px rgba(107,79,48,.45);
}
.hiw-step__tag{
    display:inline-block;
    font-size: .72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold, #c9a14a);
    font-weight: 700;
    margin-bottom: 6px;
}
.hiw-step__body h3{
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--coffee);
    margin: 0 0 10px;
    line-height: 1.25;
}
.hiw-step__body p{
    color: var(--ink-soft);
    line-height: 1.65;
    margin: 0 0 12px;
}
.hiw-step__body p:last-child{ margin-bottom: 0; }
.hiw-step__bullets{
    list-style:none; padding: 0; margin: 12px 0 0;
    display:flex; flex-direction:column; gap: 6px;
}
.hiw-step__bullets li{
    display:flex; align-items:flex-start; gap: 10px;
    font-size: .92rem;
    color: var(--ink, #2b2117);
}
.hiw-step__bullets i{
    color: var(--gold, #c9a14a);
    margin-top: 4px;
    flex-shrink: 0;
}

/* Principles */
.hiw-principles{
    padding: 50px 28px 30px;
}
.hiw-principles__grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 22px;
    max-width: 920px;
    margin: 24px auto 0;
}
.hiw-principle{
    border-radius: 18px;
    padding: 26px 26px 22px;
    border: 1px solid var(--line);
    background: rgba(255,253,248,.85);
}
.hiw-principle h4{
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    display:flex; align-items:center; gap: 10px;
}
.hiw-principle ul{
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap: 8px;
    color: var(--ink-soft);
    line-height: 1.6;
}
.hiw-principle li{
    padding-left: 18px;
    position:relative;
}
.hiw-principle--yes h4 i{ color: #2f9e63; }
.hiw-principle--yes li::before{
    content:""; position:absolute; left:0; top:.65em;
    width:8px; height:8px; border-radius:50%;
    background: #2f9e63;
}
.hiw-principle--no h4 i{ color: #c66; }
.hiw-principle--no{
    background: rgba(255,247,243,.6);
    border-color: rgba(198, 102, 102, .25);
}
.hiw-principle--no li::before{
    content:""; position:absolute; left:0; top:.65em;
    width:8px; height:8px; border-radius:50%;
    background: #c66;
}

/* CTA */
.hiw-cta{
    padding: 30px 28px 90px;
}
.hiw-cta__card{
    max-width: 760px;
    margin: 0 auto;
    text-align:center;
    padding: 50px 32px;
    border-radius: 24px;
    background:
        radial-gradient(600px 240px at 50% -10%, rgba(201,161,74,.22), transparent 70%),
        linear-gradient(180deg, rgba(255,253,248,.95), rgba(255,253,248,.85));
    border: 1px solid var(--line);
    box-shadow: 0 30px 60px -40px rgba(107,79,48,.45);
}
.hiw-cta__card h2{
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin: 0 0 10px;
    background: var(--grad-gold);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.hiw-cta__card p{
    color: var(--ink-soft);
    margin: 0 0 22px;
    line-height: 1.6;
}
.hiw-cta__actions{
    display:flex; gap: 12px; justify-content:center; flex-wrap:wrap;
}

/* ── Mobile ───────────────────────────────────────────── */
@media (max-width: 720px){
    .hiw-hero{ padding: 56px 18px 36px; }
    .hiw-timeline-wrap{ padding: 30px 18px 40px; }
    .hiw-timeline::before{ left: 27px; }
    .hiw-step{
        grid-template-columns: 56px 1fr;
        gap: 16px;
        padding: 14px 0 22px;
    }
    .hiw-step__marker{ width: 56px; height: 56px; }
    .hiw-step__num{ font-size: 1.2rem; }
    .hiw-step__marker > i{ width: 26px; height: 26px; font-size:.75rem; top:-8px; right:-8px; }
    .hiw-step__body{ padding: 18px 18px; border-radius: 16px; }
    .hiw-step__body h3{ font-size: 1.15rem; }
    .hiw-step__bullets li{ font-size: .88rem; }
    .hiw-principles{ padding: 30px 18px 10px; }
    .hiw-principles__grid{ grid-template-columns: 1fr; gap: 14px; }
    .hiw-principle{ padding: 22px 20px 18px; border-radius: 16px; }
    .hiw-cta{ padding: 20px 18px 60px; }
    .hiw-cta__card{ padding: 36px 22px; border-radius: 20px; }
    .hiw-cta__actions .btn{ width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   LANDING · AI MATCHMAKING
   ═══════════════════════════════════════════════════════════════ */
.lp-ai-wrap{
    padding: 80px 0;
    background:
        radial-gradient(900px 420px at 0% 0%, rgba(201,161,74,.10), transparent 60%),
        radial-gradient(800px 380px at 100% 100%, rgba(107,79,48,.08), transparent 60%),
        linear-gradient(180deg, transparent, rgba(255,253,248,.6) 40%, transparent);
}
.lp-ai-grid{
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: center;
    padding-left: 28px;
    padding-right: 28px;
}
.lp-ai-text h2{
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.15;
    margin: 12px 0 14px;
    color: var(--coffee);
}
.lp-ai-text h2 em{
    font-style: italic;
    background: var(--grad-gold);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.lp-ai-lede{
    color: var(--ink-soft);
    line-height: 1.7;
    font-size: 1.05rem;
    margin: 0 0 22px;
    max-width: 56ch;
}
.lp-ai-list{
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 16px;
}
.lp-ai-list > li{
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 14px;
    align-items: start;
}
.lp-ai-list > li > i{
    width: 38px; height: 38px;
    border-radius: 12px;
    background: rgba(201,161,74,.14);
    color: var(--gold, #c9a14a);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.lp-ai-list b{
    display: block;
    color: var(--coffee);
    font-family: var(--font-display);
    font-size: 1.05rem;
    margin-bottom: 2px;
}
.lp-ai-list span{
    display: block;
    color: var(--ink-soft);
    font-size: .94rem;
    line-height: 1.55;
}

/* Score card */
.lp-ai-card{
    background: linear-gradient(180deg, #fff, #fffaf0);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 30px 60px -28px rgba(107,79,48,.35);
    position: relative;
    overflow: hidden;
}
.lp-ai-card::before{
    content:"";
    position:absolute; inset:-1px;
    border-radius: 24px;
    padding:1px;
    background: linear-gradient(135deg, rgba(201,161,74,.45), transparent 50%, rgba(201,161,74,.25));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
}
.lp-ai-card__head{
    display:flex; align-items:center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}
.lp-ai-card__pill{
    display:inline-flex; align-items:center; gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(201,161,74,.14);
    color: var(--coffee);
    font-size: .8rem; font-weight: 700;
    letter-spacing: .5px;
}
.lp-ai-card__pill i{ color: var(--gold, #c9a14a); }
.lp-ai-card__score{
    font-family: var(--font-display);
    font-size: 2.4rem;
    line-height: 1;
    background: var(--grad-gold);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    font-weight: 700;
}
.lp-ai-card__bar{
    height: 10px;
    background: rgba(201,161,74,.14);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 18px;
}
.lp-ai-card__bar > span{
    display:block; height:100%;
    background: var(--grad-gold);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.lp-ai-card__rows{
    list-style:none; padding:0; margin:0 0 18px;
    display:flex; flex-direction:column; gap:10px;
}
.lp-ai-card__rows li{
    display:flex; justify-content: space-between; align-items: center;
    font-size: .94rem;
    color: var(--ink-soft);
    padding: 8px 0;
    border-bottom: 1px dashed var(--line);
}
.lp-ai-card__rows li:last-child{ border-bottom: 0; padding-bottom: 0; }
.lp-ai-card__rows b{
    color: var(--coffee);
    font-family: var(--font-display);
    font-size: 1rem;
}
.lp-ai-card__note{
    background: rgba(255, 250, 236, .8);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 16px;
    color: var(--ink, #2b2117);
    font-size: .92rem;
    line-height: 1.55;
    position: relative;
}
.lp-ai-card__note i{
    color: var(--gold, #c9a14a);
    margin-right: 6px;
    opacity: .8;
}

/* Mobile */
@media (max-width: 900px){
    .lp-ai-grid{ grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 720px){
    .lp-ai-wrap{ padding: 56px 0; }
    .lp-ai-grid{ padding-left: 18px; padding-right: 18px; gap: 26px; }
    .lp-ai-text h2{ font-size: 1.65rem; }
    .lp-ai-lede{ font-size: .98rem; }
    .lp-ai-card{ padding: 22px; border-radius: 20px; }
    .lp-ai-card__score{ font-size: 2rem; }
}

/* ── Phone country-code picker ─────────────────────────────────────────────── */
[data-phone-picker] { position: relative; }

.pp-row {
    display: flex;
    flex-direction: row !important; /* override .profile-tab-panel form flex-direction:column */
    align-items: stretch;
    gap: 8px;
}

.pp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    background: #fbf7ee;
    border: 1px solid rgba(120, 95, 60, 0.35);
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--ink);
    white-space: nowrap;
    transition: border-color .15s, background .15s;
    flex-shrink: 0;
    height: auto;
    width: auto;
}
.pp-btn:hover { border-color: var(--gold); }
.pp-btn--open { border-color: var(--gold); background: #fff; box-shadow: 0 0 0 4px rgba(184,148,106,.18); }

.pp-flag { font-size: 1.2rem; line-height: 1; }
.pp-dial { font-weight: 700; font-size: .93rem; color: var(--coffee); }
.pp-chevron { color: var(--ink-soft); transition: transform .2s; flex-shrink: 0; }
.pp-btn--open .pp-chevron { transform: rotate(180deg); }

.pp-local {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important; /* override global width:100% */
    padding: 12px 16px !important;
    background: #fbf7ee !important;
    border: 1px solid rgba(120, 95, 60, 0.35) !important;
    border-radius: 12px !important;
    font-size: .97rem !important;
    color: var(--ink) !important;
    box-shadow: 0 1px 0 rgba(120,95,60,.04) !important;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.pp-local:focus {
    background: #fff !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 4px rgba(184,148,106,.18) !important;
    outline: none !important;
}

.pp-hint {
    font-size: .78rem;
    color: var(--ink-soft);
    margin: 6px 0 0;
}

/* Dropdown */
.pp-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 400;
    background: #fff;
    border: 1px solid rgba(120, 95, 60, 0.25);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(80,50,20,.13);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 340px;
}
/* display:flex above overrides user-agent [hidden]{display:none} — re-hide explicitly */
.pp-dropdown[hidden] { display: none !important; }

.pp-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.pp-search-wrap svg { color: var(--ink-soft); flex-shrink: 0; }
.pp-search {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: .9rem !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    outline: none !important;
    width: auto !important;
}
.pp-search-clear {
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    color: var(--ink-soft);
    font-size: .85rem;
    line-height: 1;
}

.pp-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    flex: 1;
}
.pp-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background .1s;
}
.pp-option:hover { background: #fbf7ee; }
.pp-option.pp-selected { background: #fdf5e4; }
.pp-of { font-size: 1.15rem; width: 24px; text-align: center; flex-shrink: 0; }
.pp-on { flex: 1; font-size: .9rem; color: var(--ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-od { font-size: .83rem; font-weight: 600; color: var(--ink-soft); flex-shrink: 0; }
.pp-check { color: var(--gold); flex-shrink: 0; }

.pp-sep { height: 1px; background: var(--line); margin: 4px 0; }
.pp-empty { padding: 14px; text-align: center; font-size: .88rem; color: var(--ink-soft); }

/* ─── Legal documents (Terms / Privacy) ───────────────────────────── */
.legal-doc { color: var(--ink); line-height: 1.65; font-size: 1rem; }
.legal-doc h2 { margin-top: 32px; margin-bottom: 8px; font-size: 1.25rem; color: var(--ink); }
.legal-doc p { margin: 0 0 12px; }
.legal-doc ul { margin: 0 0 16px 1.2rem; padding: 0; }
.legal-doc li { margin: 4px 0; }
.legal-doc a { color: var(--gold); text-decoration: underline; }


/* ============================================================= */
/*  Gift cards                                                    */
/* ============================================================= */

.gift-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
    padding-block: 64px 40px;
}
.gift-hero__copy { max-width: 640px; }
.gift-hero__copy .eyebrow {
    font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
    color: #b8946a; font-weight: 700; margin: 0 0 14px;
}
.gift-hero__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(38px, 5vw, 54px);
    line-height: 1.05;
    color: #2d2418;
    margin: 0 0 18px;
    font-weight: 600;
    letter-spacing: -0.5px;
}
.gift-hero__lede {
    font-size: 17px; line-height: 1.6; color: #5a4a3a;
    margin: 0 auto;
    max-width: 56ch;
}
.gift-hero__dua {
    margin-top: 14px;
    font-style: italic;
    color: #6b5a45;
    font-size: 15.5px;
}
.gift-hero__cta {
    display: flex; gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 8px 0 4px;
}
.gift-hero__cta .btn { min-width: 220px; }
.gift-hero__badges {
    display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0;
    font-size: 13px; color: #6b5a45;
    justify-content: center;
}
.gift-hero__badges span { display: inline-flex; align-items: center; gap: 7px; }
.gift-hero__badges i { color: #b8946a; }

/* ---- Flip card (elegant, centred) ---- */
.gift-card-stage {
    perspective: 1800px;
    width: 100%;
    max-width: 580px;
    margin: 8px auto;
    display: flex; flex-direction: column; align-items: center;
}
.gift-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1.95 / 1;
    cursor: pointer; outline: none;
}
.gift-card:focus-visible .gift-card__inner {
    box-shadow:
        0 0 0 3px rgba(184,148,106,.4),
        0 30px 50px -22px rgba(120, 86, 38, .35),
        0 8px 18px -10px rgba(120, 86, 38, .2);
}
.gift-card__inner {
    position: relative; width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(.4,.05,.2,1);
    border-radius: 20px;
    box-shadow:
        0 30px 50px -22px rgba(120, 86, 38, .35),
        0 8px 18px -10px rgba(120, 86, 38, .2);
}
.gift-card.is-flipped .gift-card__inner { transform: rotateY(180deg); }

.gift-card__face {
    position: absolute; inset: 0;
    border-radius: 20px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    padding: 28px 30px;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center;
    text-align: center;
    color: #3d2e1f;
    isolation: isolate;
    /* bright, cheerful champagne — light & airy */
    background:
        radial-gradient(120% 100% at 50% 0%, #fffaec 0%, #fdf1cf 55%, #f4dfa3 100%);
    border: 1px solid rgba(212,176,114,.45);
}
.gift-card__face--back { transform: rotateY(180deg); }

/* decorative gold corner flourishes */
.gift-card__ornament {
    position: absolute;
    width: 42px; height: 42px;
    pointer-events: none;
    opacity: .65;
}
.gift-card__ornament--tl {
    top: 12px; left: 12px;
    border-top: 1.5px solid #b8946a;
    border-left: 1.5px solid #b8946a;
    border-top-left-radius: 5px;
}
.gift-card__ornament--br {
    bottom: 12px; right: 12px;
    border-bottom: 1.5px solid #b8946a;
    border-right: 1.5px solid #b8946a;
    border-bottom-right-radius: 5px;
}
.gift-card__ornament--tl::before,
.gift-card__ornament--br::before {
    content: ""; position: absolute;
    width: 6px; height: 6px; border-radius: 50%;
    background: #b8946a;
}
.gift-card__ornament--tl::before { top: -3.5px; left: -3.5px; }
.gift-card__ornament--br::before { bottom: -3.5px; right: -3.5px; }

/* logo crest at the top */
.gift-card__logo {
    width: 44px; height: 44px;
    object-fit: contain;
    margin-bottom: 6px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(120,86,38,.25));
}
.gift-card__brand {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px; font-weight: 600;
    color: #2d2418;
    letter-spacing: .02em;
    line-height: 1;
}
.gift-card__divider {
    display: block;
    width: 50px; height: 1px;
    background: linear-gradient(90deg, transparent, #b8946a 50%, transparent);
    margin: 10px 0;
    flex-shrink: 0;
}
.gift-card__eyebrow {
    font-size: 10px; letter-spacing: .36em; text-transform: uppercase;
    color: #8b6f3e; font-weight: 700;
    line-height: 1;
}
.gift-card__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(22px, 3.2vw, 28px);
    line-height: 1.05;
    margin: 8px 0 6px;
    color: #2d2418; font-weight: 600;
    letter-spacing: -0.3px;
    font-style: italic;
}
.gift-card__sub {
    margin: 0; font-size: 12.5px; color: #6b5a45;
    font-style: italic;
    font-family: 'Cormorant Garamond', Georgia, serif;
    letter-spacing: .01em;
    line-height: 1.3;
}

/* back face */
.gift-card__face--back .gift-card__eyebrow { margin-bottom: 12px; }
.gift-card__steps {
    list-style: none; padding: 0; margin: 0 0 12px;
    display: flex; flex-direction: column; gap: 8px;
    text-align: left;
}
.gift-card__steps li {
    display: flex; align-items: center; gap: 10px;
    font-size: 12.5px; color: #2d2418; font-weight: 500;
    line-height: 1.2;
}
.gift-card__steps li span {
    flex: 0 0 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(160deg, #d9b56e 0%, #a07a3e 100%);
    color: #fff8e6;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 11px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.gift-card__quote {
    margin: 0; font-style: italic; font-size: 12px;
    line-height: 1.45; color: #6b5a45;
    font-family: 'Cormorant Garamond', Georgia, serif;
    border-top: 1px solid rgba(184,148,106,.35);
    padding-top: 10px; max-width: 32ch;
}

.gift-card-flip {
    margin-top: 20px;
    background: transparent; border: none; cursor: pointer;
    font-size: 13px; color: #8b7d68; font-weight: 600;
    letter-spacing: .04em;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 8px;
    transition: color .15s, background .15s;
}
.gift-card-flip:hover { color: #b8946a; background: rgba(184,148,106,.08); }
.gift-card-flip i { font-size: 12px; }

/* ---- Mobile tweaks for the gift card hero ---- */
@media (max-width: 720px) {
    .gift-hero {
        padding-block: 32px 24px;
        gap: 22px;
    }
    .gift-hero__title { font-size: clamp(30px, 8vw, 40px); margin-bottom: 14px; }
    .gift-hero__lede { font-size: 15.5px; line-height: 1.55; }
    .gift-hero__dua { font-size: 14.5px; }
    .gift-hero__cta { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
    .gift-hero__cta .btn { min-width: 0; width: 100%; }
    .gift-hero__badges { flex-direction: column; gap: 8px; align-items: center; font-size: 12.5px; }

    .gift-card-stage { max-width: 100%; }
    .gift-card { aspect-ratio: 1.7 / 1; }
    .gift-card__face { padding: 22px 20px; }
    .gift-card__logo { width: 36px; height: 36px; margin-bottom: 4px; }
    .gift-card__brand { font-size: 17px; }
    .gift-card__divider { width: 40px; margin: 8px 0; }
    .gift-card__eyebrow { font-size: 9.5px; letter-spacing: .3em; }
    .gift-card__title { font-size: clamp(20px, 6.5vw, 26px); margin: 6px 0 4px; }
    .gift-card__sub { font-size: 12px; }
    .gift-card__ornament { width: 32px; height: 32px; }
    .gift-card__ornament--tl { top: 10px; left: 10px; }
    .gift-card__ornament--br { bottom: 10px; right: 10px; }
    .gift-card__steps li { font-size: 12px; gap: 8px; }
    .gift-card__steps li span { flex: 0 0 20px; height: 20px; font-size: 10px; }
    .gift-card__quote { font-size: 11.5px; padding-top: 8px; }

    /* sections */
    .gift-pricing { padding-block: 36px 32px; }
    .gift-faq { padding-block: 12px 56px; }
    .section-title { font-size: 28px; }
    .gift-pricing__option { padding: 22px 20px; }
    .gift-pricing__price { font-size: 32px; }

    /* checkout */
    .gift-checkout { padding-block: 24px 56px; }
    .gift-checkout h1 { font-size: 32px; }
    .gift-form__fieldset { padding: 18px 18px 20px; }

    /* status */
    .gift-status { padding-block: 48px; }
    .gift-status h1 { font-size: 30px; }
    .gift-status__code { padding: 16px 20px; }
    .gift-status__code code { font-size: 22px; letter-spacing: 4px; }
    .gift-status__actions { flex-direction: column; align-items: stretch; }
    .gift-status__actions .btn { width: 100%; }
}

@media (max-width: 380px) {
    .gift-card { aspect-ratio: 1.55 / 1; }
    .gift-card__title { font-size: 20px; }
    .gift-card__face { padding: 18px 16px; }
}

/* ---- Pricing ---- */
.gift-pricing { padding-block: 56px; }
.section-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 36px; font-weight: 600; color: #2d2418;
    margin: 0 0 8px; letter-spacing: -0.3px;
}
.section-lede { color: #5a4a3a; font-size: 16px; margin: 0 0 24px; }

.gift-pricing__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
    margin-top: 28px;
}
@media (max-width: 720px) { .gift-pricing__grid { grid-template-columns: 1fr; } }
.gift-pricing__option {
    position: relative;
    background: #fff;
    border: 1px solid #ecdfb8;
    border-radius: 18px;
    padding: 28px 26px;
    box-shadow: 0 10px 30px -22px rgba(107,79,48,.35);
    display: flex; flex-direction: column; gap: 14px;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.gift-pricing__option:hover {
    transform: translateY(-3px);
    border-color: #b8946a;
    box-shadow: 0 18px 40px -20px rgba(184,148,106,.55);
}
.gift-pricing__option--featured {
    border-color: #b8946a;
    background: linear-gradient(180deg, #fffdf6 0%, #fbf3dc 100%);
}
.gift-pricing__option header {
    display: flex; align-items: center; gap: 12px;
}
.gift-pricing__option header i {
    font-size: 22px; color: #b8946a;
}
.gift-pricing__option header h3 {
    margin: 0; font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 26px; font-weight: 600; color: #2d2418;
}
.gift-pricing__price {
    font-size: 40px; font-weight: 600; color: #6b4f30; margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    letter-spacing: -0.5px;
}
.gift-pricing__sub {
    margin: -8px 0 4px; font-size: 14px; color: #6b5a45; font-style: italic;
}
.gift-pricing__option ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.gift-pricing__option li {
    font-size: 14.5px; color: #4a3b2c;
    display: flex; align-items: flex-start; gap: 10px;
}
.gift-pricing__option li i { color: #6b9c4e; margin-top: 5px; font-size: 12px; }
.gift-pricing__badge {
    position: absolute; top: -12px; right: 18px;
    background: linear-gradient(135deg, #b8946a, #6b4f30);
    color: #fff; font-size: 11px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 999px;
    box-shadow: 0 6px 16px -8px rgba(107,79,48,.6);
}
.btn-block { width: 100%; display: inline-flex; justify-content: center; }
.btn-lg { padding: 14px 22px; font-size: 16px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ---- FAQ ---- */
.gift-faq { padding-block: 24px 80px; }
.gift-faq details {
    border: 1px solid #ecdfb8;
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 12px;
    background: #fff;
    transition: border-color .15s;
}
.gift-faq details[open] { border-color: #d8c8a4; }
.gift-faq summary {
    cursor: pointer; font-weight: 600; color: #2d2418;
    list-style: none; outline: none;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 15.5px;
}
.gift-faq summary::-webkit-details-marker { display: none; }
.gift-faq summary::after { content: "+"; color: #b8946a; font-size: 22px; line-height: 1; }
.gift-faq details[open] summary::after { content: "−"; }
.gift-faq details p { margin: 12px 0 0; color: #4a3b2c; font-size: 15px; line-height: 1.6; }

/* ---- Gift landing polish (v2) ---- */
.gift-pricing__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    width: 100%; justify-content: center; margin: 0 0 10px;
    color: #b8946a;
}
.gift-pricing__icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(184,148,106,.10);
    border: 1px solid rgba(184,148,106,.22);
    color: #b8946a;
    font-size: 22px; flex: 0 0 auto;
}
.gift-pricing__icon--gold {
    background: linear-gradient(135deg, #c9a777, #8a6f1f);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 18px -8px rgba(138,111,31,.65);
}
.gift-pricing__option header {
    align-items: center; gap: 16px;
}
.gift-pricing__option header h3 {
    line-height: 1.05; font-size: 28px; margin: 2px 0 0;
}
.gift-pricing__tagline {
    display: block;
    font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
    color: #b8946a; font-weight: 700;
}
.gift-pricing__option--featured .gift-pricing__tagline { color: #8a6f1f; }

.gift-pricing__price {
    font-size: 44px;
    border-top: 1px dashed rgba(184,148,106,.35);
    padding-top: 18px; margin-top: 4px;
}
.gift-pricing__price small {
    display: block; margin-top: 6px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: #8b7d68; font-weight: 700;
}
.gift-pricing__sub { margin: -4px 0 4px; }

.gift-pricing__option {
    padding: 34px 30px;
    gap: 16px;
}
.gift-pricing__option ul { gap: 10px; flex: 1; }
.gift-pricing__option li { font-size: 15px; }
.gift-pricing__option .btn { margin-top: auto; }

.gift-pricing__option--featured {
    box-shadow: 0 18px 44px -22px rgba(184,148,106,.55);
    background: linear-gradient(180deg, #fffdf6 0%, #fbf1d6 100%);
}
.gift-pricing__option--featured::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background:
        radial-gradient(circle at 100% 0%, rgba(184,148,106,.16), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(255,255,255,.45), transparent 55%);
    pointer-events: none; z-index: 0;
}
.gift-pricing__option--featured > * { position: relative; z-index: 1; }

/* Compact, centered badge pill */
.gift-pricing__badge {
    position: absolute;
    top: -13px; left: 50%; right: auto;
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #c9a777, #8a6f1f);
    color: #fff; font-size: 10.5px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    border-radius: 999px; white-space: nowrap;
    box-shadow: 0 8px 18px -8px rgba(138,111,31,.7);
    z-index: 2;
}
.gift-pricing__badge i { font-size: 10px; }

/* Reuse the hero card ornaments inside pricing cards */
.gift-pricing__option .gift-card__ornament {
    position: absolute; width: 38px; height: 38px;
    border: 1.5px solid rgba(184,148,106,.45);
    border-radius: 4px;
    pointer-events: none; z-index: 1;
}
.gift-pricing__option .gift-card__ornament--tl {
    top: 14px; left: 14px;
    border-right: none; border-bottom: none;
}
.gift-pricing__option .gift-card__ornament--br {
    bottom: 14px; right: 14px;
    border-left: none; border-top: none;
}
.gift-pricing__option--featured .gift-card__ornament {
    border-color: rgba(138,111,31,.55);
}

/* FAQ refinement. */
.gift-faq details {
    padding: 0; overflow: hidden;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.gift-faq details:hover { border-color: #d8c8a4; box-shadow: 0 6px 16px -10px rgba(107,79,48,.25); }
.gift-faq summary {
    padding: 18px 22px; gap: 14px;
}
.gift-faq summary > span {
    display: inline-flex; align-items: center; gap: 12px; flex: 1;
}
.gift-faq summary > span > i {
    color: #b8946a; font-size: 14px; flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(184,148,106,.12);
    border: 1px solid rgba(184,148,106,.22);
}
.gift-faq summary::after { content: none; }
.faq-chev {
    color: #b8946a; font-size: 13px;
    transition: transform .2s;
}
.gift-faq details[open] .faq-chev { transform: rotate(180deg); }
.gift-faq details[open] {
    background: linear-gradient(180deg, #fffefa 0%, #fdf8ec 100%);
}
.gift-faq details p {
    padding: 0 22px 18px; margin: 0;
    color: #4a3b2c; font-size: 14.5px; line-height: 1.65;
}

/* ---- Checkout ---- */
.gift-checkout { padding-block: 40px 80px; max-width: 680px; }
.gift-checkout .eyebrow {
    font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
    color: #b8946a; font-weight: 700; margin: 0 0 10px;
}
.gift-checkout h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 42px; line-height: 1.05; margin: 0 0 12px; color: #2d2418;
    letter-spacing: -0.5px;
}
.gift-checkout .lede { color: #5a4a3a; font-size: 16px; margin: 0 0 32px; line-height: 1.55; }
.gift-form__fieldset {
    border: 1px solid #ecdfb8; border-radius: 14px;
    padding: 22px 24px 24px; margin: 0 0 22px;
    background: #fff;
}
.gift-form__fieldset legend {
    padding: 0 8px; font-weight: 700; color: #6b4f30;
    font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.gift-kind-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 540px) { .gift-kind-grid { grid-template-columns: 1fr; } }
.gift-kind { position: relative; cursor: pointer; display: flex; height: 100%; }
.gift-kind input { position: absolute; opacity: 0; pointer-events: none; }
.gift-kind__inner {
    display: flex; flex-direction: column; gap: 4px;
    border: 2px solid #ecdfb8; border-radius: 12px;
    padding: 16px 18px; transition: all .15s; background: #fff;
    width: 100%; height: 100%;
}
.gift-kind__desc { flex: 1 1 auto; }
.gift-kind__title { font-weight: 600; color: #2d2418; font-size: 15px; }
.gift-kind__price { color: #b8946a; font-weight: 700; font-size: 19px; font-family: 'Cormorant Garamond', Georgia, serif; }
.gift-kind input:checked + .gift-kind__inner {
    border-color: #b8946a;
    background: linear-gradient(180deg,#fff 0%,#fdf8ec 100%);
    box-shadow: 0 6px 18px -10px rgba(184,148,106,.6);
}
.grid-2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 13px; color: #6b5a45; font-weight: 600; }
.field > .muted { font-size: 12px; color: #8b7d68; }
.field input[type="text"], .field input[type="email"], .field textarea {
    width: 100%; padding: 11px 14px;
    border: 1px solid #d8c8a4; border-radius: 10px;
    font-size: 15px; font-family: inherit; background: #fffefa;
    transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus {
    outline: none; border-color: #b8946a;
    box-shadow: 0 0 0 3px rgba(184,148,106,.18);
}
.checkbox-row {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14.5px; color: #3b2a1f; cursor: pointer;
    line-height: 1.45;
}
.checkbox-row input { margin-top: 3px; }
.recipient-fields { transition: opacity .2s; }
.form-error { color: #b22a2a; font-size: 13px; }
.back-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: #8b7d68; text-decoration: none;
    margin-bottom: 22px; font-weight: 600;
}
.back-link:hover { color: #b8946a; }

/* ---- Checkout polish (v2) ---- */
.gift-checkout__header { margin: 0 0 24px; }
.gift-checkout .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #b8946a;
    box-shadow: 0 0 0 4px rgba(184,148,106,.15);
}

.gift-summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    margin: 0 0 28px;
    padding: 18px 22px;
    border-radius: 16px;
    background: linear-gradient(135deg, #fffaec 0%, #f4dfa3 100%);
    border: 1px solid #e6cf95;
    box-shadow: 0 12px 32px -22px rgba(184,148,106,.65);
    position: sticky; top: 12px; z-index: 5;
}
.gift-summary__row { display: flex; flex-direction: column; gap: 2px; }
.gift-summary__row--total { text-align: right; }
.gift-summary__label {
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: #8b6f3f; font-weight: 700;
}
.gift-summary__value {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px; color: #2d2418; font-weight: 600; line-height: 1.1;
}
.gift-summary__price {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 30px; font-weight: 700; color: #2d2418; line-height: 1;
}
.gift-summary__divider {
    flex: 1 1 1px; height: 1px; min-width: 12px;
    background: linear-gradient(90deg, transparent, rgba(139,111,63,.35), transparent);
}
@media (max-width: 520px) {
    .gift-summary { padding: 14px 18px; position: static; }
    .gift-summary__row--total { text-align: left; }
    .gift-summary__divider { display: none; }
}

/* Step number badge inside legends. */
.gift-form__fieldset legend { display: inline-flex; align-items: center; gap: 10px; }
.step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, #b8946a, #d6b27a);
    color: #fff; font-size: 12px; font-weight: 700;
    box-shadow: 0 2px 6px -2px rgba(184,148,106,.7);
    text-transform: none; letter-spacing: 0;
}

/* Refined gift-kind cards (eyebrow + title + price + check). */
.gift-kind__inner {
    position: relative; padding: 22px 24px 22px; gap: 4px;
    transition: background .2s, border-color .2s, box-shadow .2s, transform .15s;
}
.gift-kind__eyebrow {
    display: inline-block;
    font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
    color: #b8946a; font-weight: 700; margin-bottom: 4px;
}
.gift-kind__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 24px; font-weight: 600; color: #2d2418; line-height: 1.1;
}
.gift-kind__desc {
    font-size: 13.5px; color: #6b5a45; line-height: 1.5;
    margin: 4px 0 14px;
}
.gift-kind__price {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 30px; font-weight: 600; color: #6b4f30; line-height: 1;
    padding-top: 14px;
    border-top: 1px dashed rgba(184,148,106,.35);
}
.gift-kind__price small {
    display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
    color: #8b7d68; font-weight: 700; font-family: inherit; margin-top: 6px;
}
.gift-kind__check {
    position: absolute; top: 16px; right: 16px;
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid #ecdfb8;
    display: flex; align-items: center; justify-content: center;
    color: transparent; font-size: 11px;
    transition: all .15s;
    background: #fff;
}
.gift-kind:hover .gift-kind__inner {
    border-color: #d8c8a4;
    box-shadow: 0 12px 28px -20px rgba(184,148,106,.5);
    transform: translateY(-2px);
}
.gift-kind input:checked + .gift-kind__inner {
    border-color: #b8946a;
    background: linear-gradient(180deg, #fffdf6 0%, #fbf1d6 100%);
    box-shadow: 0 16px 36px -22px rgba(184,148,106,.65);
}
.gift-kind input:checked + .gift-kind__inner .gift-kind__check {
    background: #b8946a; border-color: #b8946a; color: #fff;
}
.gift-kind input:checked + .gift-kind__inner .gift-kind__eyebrow {
    color: #8a6f1f;
}

/* Payment fieldset accent. */
.gift-form__fieldset--pay {
    background: linear-gradient(180deg, #fffefa 0%, #fdf8ec 100%);
    border-color: #e6cf95;
}
.pay-intro {
    margin: 0 0 16px; padding: 12px 14px;
    background: #fffaec; border: 1px solid #ecdfb8; border-radius: 10px;
    color: #5a4a3a; font-size: 13.5px; line-height: 1.5;
    display: flex; align-items: center; gap: 10px;
}
.pay-intro i { color: #b8946a; font-size: 16px; }

/* Soft checkbox row inside fieldsets. */
.checkbox-row--soft {
    background: #fffaec; border: 1px dashed #e6cf95;
    border-radius: 10px; padding: 12px 14px;
}
.checkbox-row--terms {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: #fff; border: 1px solid #ecdfb8; border-radius: 12px;
}

/* Submit + trust strip. */
.gift-submit {
    margin-top: 4px;
    background: linear-gradient(135deg, #b8946a 0%, #8a6f1f 100%);
    border: none; color: #fff;
    font-size: 16px; font-weight: 700; letter-spacing: .01em;
    padding: 16px 22px; border-radius: 14px;
    box-shadow: 0 14px 30px -14px rgba(138,111,31,.7);
    transition: transform .15s, box-shadow .15s;
}
.gift-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 36px -14px rgba(138,111,31,.8);
}
.gift-submit i { margin-right: 8px; }

.gift-trust {
    list-style: none; margin: 18px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 18px;
    justify-content: center;
    font-size: 12.5px; color: #8b7d68;
}
.gift-trust li { display: inline-flex; align-items: center; gap: 6px; }
.gift-trust i { color: #b8946a; font-size: 13px; }

@media (max-width: 520px) {
    .gift-trust { gap: 12px; font-size: 12px; }
    .gift-summary__value { font-size: 19px; }
    .gift-summary__price { font-size: 26px; }
    .gift-kind__inner { padding: 18px 18px 16px; }
}

/* ---- Status page ---- */
.gift-status { padding-block: 72px; max-width: 620px; text-align: center; }
.gift-status__icon {
    font-size: 56px; margin-bottom: 18px;
}
.gift-status__icon--ok { color: #6b9c4e; }
.gift-status__icon--err { color: #b22a2a; }
.gift-status__icon--pending { color: #b8946a; }
.gift-status h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 38px; margin: 0 0 12px; color: #2d2418;
    letter-spacing: -0.4px;
}
.gift-status .lede { font-size: 16px; color: #5a4a3a; margin: 0 0 28px; line-height: 1.55; }
.gift-status__code {
    display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
    background: linear-gradient(180deg,#fffdf6 0%,#fbf3dc 100%);
    border: 1px solid #ecdfb8; border-radius: 14px;
    padding: 20px 32px; margin: 0 auto 28px;
}
.gift-status__code code {
    font-family: 'Courier New', monospace; font-size: 26px;
    letter-spacing: 6px; color: #6b4f30; font-weight: 700;
    background: transparent;
}
.gift-status__meta {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    max-width: 480px; margin: 0 auto 32px;
}
@media (max-width: 540px) { .gift-status__meta { grid-template-columns: 1fr; } }
.gift-status__meta > div {
    background: #fff; border: 1px solid #ecdfb8; border-radius: 10px;
    padding: 14px 16px; text-align: center;
}
.gift-status__meta span {
    display: block; font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: #8b7d68; margin-bottom: 4px;
}
.gift-status__meta b { color: #2d2418; font-size: 14px; }
.gift-status__actions {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

/* ---- Status receipt v2 ---- */
.gift-status { padding-block: 64px 80px; max-width: 640px; text-align: center; }

.gift-receipt {
    position: relative;
    background: linear-gradient(180deg, #fffefa 0%, #fbf3dc 100%);
    border: 1px solid #e6cf95;
    border-radius: 22px;
    padding: 44px 36px 36px;
    box-shadow: 0 24px 60px -32px rgba(184,148,106,.55);
    margin-bottom: 28px;
}
.gift-receipt .gift-card__ornament {
    position: absolute; width: 42px; height: 42px;
    border: 1.5px solid rgba(184,148,106,.55);
    border-radius: 4px; pointer-events: none;
}
.gift-receipt .gift-card__ornament--tl {
    top: 16px; left: 16px;
    border-right: none; border-bottom: none;
}
.gift-receipt .gift-card__ornament--br {
    bottom: 16px; right: 16px;
    border-left: none; border-top: none;
}

.gift-receipt__crest {
    width: 72px; height: 72px; border-radius: 50%;
    margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #c9a777, #8a6f1f);
    color: #fff; font-size: 28px;
    box-shadow: 0 14px 30px -12px rgba(138,111,31,.7),
                0 0 0 6px rgba(184,148,106,.18);
}
.gift-receipt__crest--err {
    background: linear-gradient(135deg, #d97a7a, #a73a3a);
    box-shadow: 0 14px 30px -12px rgba(167,58,58,.55),
                0 0 0 6px rgba(167,58,58,.12);
}
.gift-receipt__crest--pending {
    background: linear-gradient(135deg, #e6d4a8, #b8946a);
    box-shadow: 0 14px 30px -12px rgba(184,148,106,.5),
                0 0 0 6px rgba(184,148,106,.18);
}

.gift-receipt__eyebrow {
    margin: 0 0 6px;
    font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
    color: #b8946a; font-weight: 700;
}
.gift-receipt__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 38px; font-weight: 600; color: #2d2418;
    margin: 0 0 12px; letter-spacing: -0.4px; line-height: 1.1;
}
.gift-receipt__lede {
    font-size: 15.5px; color: #5a4a3a; line-height: 1.6;
    margin: 0 auto; max-width: 46ch;
}
.gift-receipt__lede b { color: #2d2418; font-weight: 600; }

.gift-receipt__divider {
    display: flex; align-items: center; gap: 14px;
    margin: 28px auto 22px; max-width: 360px;
    color: #b8946a;
}
.gift-receipt__divider span {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184,148,106,.5), transparent);
}
.gift-receipt__divider i { font-size: 14px; }

.gift-receipt__code {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    background: #fff;
    border: 1.5px dashed #d8c8a4;
    border-radius: 14px;
    padding: 22px 28px;
    margin: 0 auto 28px; max-width: 440px;
    position: relative;
}
.gift-receipt__code::before,
.gift-receipt__code::after {
    content: ""; position: absolute; top: 50%;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fbf3dc; transform: translateY(-50%);
    border: 1.5px dashed #d8c8a4;
}
.gift-receipt__code::before { left: -10px; border-right: none; }
.gift-receipt__code::after { right: -10px; border-left: none; }

.gift-receipt__code-label {
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: #8b7d68; font-weight: 700;
}
.gift-receipt__code code {
    font-family: 'Courier New', monospace;
    font-size: 28px; letter-spacing: 8px;
    color: #6b4f30; font-weight: 700;
    background: transparent; padding: 0;
}
.gift-receipt__copy { margin-top: 4px; }

.gift-receipt__meta {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; margin: 0; padding: 0;
}
.gift-receipt__meta > div {
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(184,148,106,.25);
    border-radius: 12px;
    padding: 14px 12px;
}
.gift-receipt__meta dt {
    margin: 0 0 4px;
    font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
    color: #8b7d68; font-weight: 700;
}
.gift-receipt__meta dd {
    margin: 0; font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 18px; color: #2d2418; font-weight: 600; line-height: 1.2;
}
.gift-receipt__status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13.5px; font-family: inherit; font-weight: 600;
    color: #2d2418;
}
.gift-receipt__status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #6b9c4e;
    box-shadow: 0 0 0 3px rgba(107,156,78,.18);
}

.gift-receipt__dua {
    margin: 28px auto 0; padding: 20px 22px;
    max-width: 460px; text-align: center;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(184,148,106,.28);
    border-radius: 14px;
    display: flex; flex-direction: column; gap: 6px;
}
.gift-receipt__dua-arabic {
    font-family: 'Amiri', 'Scheherazade New', 'Cormorant Garamond', Georgia, serif;
    font-size: 28px; color: #2d2418; line-height: 1.2;
    direction: rtl;
}
.gift-receipt__dua-translit {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic; font-size: 17px; color: #6b4f30;
}
.gift-receipt__dua-meaning {
    font-size: 13px; color: #8b7d68;
    letter-spacing: .02em;
}
@media (max-width: 540px) {
    .gift-receipt { padding: 36px 22px 28px; }
    .gift-receipt__title { font-size: 30px; }
    .gift-receipt__code code { font-size: 22px; letter-spacing: 5px; }
    .gift-receipt__meta { grid-template-columns: 1fr; }
}

.gift-receipt__steps {
    list-style: none; padding: 0; margin: 0 0 28px;
    display: flex; flex-direction: column; gap: 10px;
    text-align: left;
}
.gift-receipt__steps li {
    display: flex; align-items: center; gap: 14px;
    background: #fff;
    border: 1px solid #ecdfb8; border-radius: 12px;
    padding: 14px 18px;
    color: #4a3b2c; font-size: 14.5px;
}
.gift-receipt__steps li b { color: #2d2418; font-weight: 600; margin-right: 4px; }
.gift-receipt__steps li > span:first-child {
    flex: 0 0 auto;
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #c9a777, #8a6f1f);
    color: #fff; font-size: 12px; font-weight: 700;
    box-shadow: 0 4px 10px -4px rgba(138,111,31,.6);
}

/* ---- Coupon redeem on subscription page ---- */
.coupon-card { margin-bottom: 18px; }
.coupon-card__head {
    display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
}
.coupon-card__head i {
    font-size: 22px; color: #b8946a;
    background: linear-gradient(180deg,#fffdf6 0%,#fbf3dc 100%);
    width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #ecdfb8;
}
.coupon-form {
    display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
}
.coupon-form .field { flex: 1 1 240px; }

/* ---- Gift-code redeem card (subscription page) ---- */
/* Sits on .card so padding/border/shadow/radius match sibling cards. */
.redeem-card {
    /* Reset native <details> quirks */
    cursor: default;
}
.redeem-card[open] { cursor: default; }

.redeem-card__summary {
    /* Make the entire card a click target when collapsed by canceling
       the .card's own padding, then re-applying it inside the row. */
    margin: -24px -26px;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    gap: 16px;
    list-style: none;
    cursor: pointer;
    user-select: none;
    border-radius: var(--radius);
    transition: background .15s ease;
}
.redeem-card__summary::-webkit-details-marker { display: none; }
.redeem-card__summary:hover { background: rgba(184, 148, 106, 0.05); }
.redeem-card__summary:focus-visible {
    outline: 2px solid rgba(184, 148, 106, 0.55);
    outline-offset: -2px;
}

/* When opened, restore the card's bottom padding boundary */
.redeem-card[open] .redeem-card__summary {
    margin-bottom: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(184, 148, 106, 0.18);
    border-radius: var(--radius) var(--radius) 0 0;
}

.redeem-card__icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbf3dc 0%, #f1e2b4 100%);
    color: #8a6f1f;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    border: 1px solid #ecdfb8;
}
.redeem-card__text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.redeem-card__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 19px;
    line-height: 1.2;
    color: #2d2418;
    font-weight: 600;
}
.redeem-card__hint {
    font-size: 13px;
    color: #8b7d68;
    line-height: 1.35;
}
.redeem-card__chev {
    flex: 0 0 auto;
    color: #b8946a;
    font-size: 12px;
    transition: transform .2s ease;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(184, 148, 106, 0.08);
}
.redeem-card[open] .redeem-card__chev { transform: rotate(180deg); }

.redeem-card__body {
    padding-top: 18px;
    animation: redeemFade .2s ease;
}
@keyframes redeemFade {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.redeem-form {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 6px;
    align-items: stretch;
    margin: 0;
}
.redeem-form__field {
    /* Let label/input/error become direct grid items so the button
       can align perfectly with the input row. */
    display: contents;
}
.redeem-form__label {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #8b7d68;
    font-weight: 700;
}
.redeem-form__field input {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    padding: 11px 14px;
    background: #ffffff;
    border: 1.5px dashed #d8c8a4;
    border-radius: 10px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    letter-spacing: 3px;
    color: #6b4f30;
    font-weight: 700;
    text-transform: uppercase;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.redeem-form__field input::placeholder {
    color: #c9b48a;
    font-weight: 600;
    letter-spacing: 3px;
}
.redeem-form__field input:focus {
    outline: none;
    border-color: #b8946a;
    border-style: solid;
    background: #fffdf6;
    box-shadow: 0 0 0 3px rgba(184, 148, 106, 0.18);
}
.redeem-form__field .form-error {
    grid-column: 1;
    grid-row: 3;
}

.redeem-form__btn {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    padding: 0 22px;
    border-radius: 10px;
    background: linear-gradient(135deg, #c9a777 0%, #8a6f1f 100%);
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 8px 18px -10px rgba(138, 111, 31, 0.5);
    transition: transform .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.redeem-form__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -10px rgba(138, 111, 31, 0.55);
}

.redeem-card__foot {
    margin: 14px 0 0;
    color: #8b7d68;
    font-size: 12.5px;
}
.redeem-card__foot a {
    color: #6b4f30;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dotted rgba(107, 79, 48, 0.4);
}
.redeem-card__foot a:hover {
    color: #8a6f1f;
    border-bottom-color: #8a6f1f;
}

@media (max-width: 540px) {
    .redeem-card__summary { gap: 12px; padding: 18px 20px; margin: -20px -22px; }
    .redeem-card[open] .redeem-card__summary { margin-bottom: 0; padding-bottom: 16px; }
    .redeem-form {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .redeem-form__btn {
        grid-column: 1;
        grid-row: 3;
        padding: 12px 22px;
    }
    .redeem-form__field .form-error { grid-row: 4; }
}