/* =========================================================
   Harmony — Luxury & Clean, adapted for mobile-first consumer
   Brand: Deep Slate Navy + Soft Gold + Terracotta
   ========================================================= */

/* ---------- TOKENS ---------- */
:root {
    /* Brand */
    --brand-primary: #2C3E56;
    --brand-primary-dark: #1F2C3E;
    --brand-primary-light: #4A6285;
    --brand-primary-lighter: #EDF1F6;
    --brand-primary-soft: #F7F9FB;

    /* Accents */
    --accent-gold: #C9A961;
    --accent-gold-light: #E5D4A8;
    --accent-warm: #C4715A;
    --accent-warm-light: #F0DBD4;
    --accent-charcoal: #1A1F2E;

    /* Neutrals */
    --color-ink: #0A0E1A;
    --color-graphite: #2C3142;
    --color-slate: #5C6478;
    --color-stone: #8B92A5;
    --color-mist: #C7CCD8;
    --color-fog: #E8EBF1;
    --color-cloud: #F4F6FA;
    --color-pearl: #FAFBFD;
    --color-white: #FFFFFF;

    /* Semantic */
    --color-success: #16A34A;
    --color-success-bg: #DCFCE7;
    --color-success-border: #86EFAC;
    --color-danger: #DC2626;
    --color-danger-bg: #FEE2E2;
    --color-danger-border: #FCA5A5;
    --color-warning: #D97706;
    --color-warning-bg: #FEF3C7;
    --color-neutral: #6B7280;
    --color-neutral-bg: #F3F4F6;
    --color-neutral-border: #D1D5DB;

    /* Surfaces — remapped per theme */
    --surface-page: var(--color-pearl);
    --surface-card: var(--color-white);
    --surface-sunken: var(--color-cloud);
    --border-subtle: var(--color-fog);
    --border-strong: var(--color-mist);
    --text-primary: var(--color-ink);
    --text-secondary: var(--color-slate);
    --text-muted: var(--color-stone);

    /* Typography */
    --font-display: 'Cormorant Garamond', 'Sarabun', Georgia, serif;
    --font-body: 'Inter', 'Sarabun', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-thai: 'Sarabun', sans-serif;

    /* Spacing */
    --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
    --sp-12: 3rem;   --sp-16: 4rem;

    /* Radius */
    --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(10, 14, 26, 0.04);
    --shadow-md: 0 4px 12px rgba(10, 14, 26, 0.06), 0 2px 4px rgba(10, 14, 26, 0.04);
    --shadow-lg: 0 12px 32px rgba(10, 14, 26, 0.08), 0 4px 12px rgba(10, 14, 26, 0.04);
    --shadow-xl: 0 24px 64px rgba(10, 14, 26, 0.12), 0 8px 24px rgba(10, 14, 26, 0.06);
    --shadow-brand: 0 8px 24px rgba(44, 62, 86, 0.18);

    /* Motion */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --bottom-nav-h: 64px;
    --topbar-h: 56px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
    --content-max: 720px;
}

/* ---------- DARK THEME ---------- */
[data-theme="dark"] {
    --surface-page: #0E1420;
    --surface-card: #161E2D;
    --surface-sunken: #1E2839;
    --border-subtle: #26314460;
    --border-strong: #2F3B4F;
    --text-primary: #EAEEF5;
    --text-secondary: #A8B2C4;
    --text-muted: #6F7A8D;

    --brand-primary: #7C9AC4;
    --brand-primary-dark: #6786B2;
    --brand-primary-light: #9BB4D6;
    --brand-primary-lighter: #1C2738;
    --brand-primary-soft: #161E2D;

    --color-neutral-bg: #1E2839;
    --color-neutral-border: #2F3B4F;
    --color-success-bg: #10281A;
    --color-success-border: #1D5334;
    --color-danger-bg: #2B1517;
    --color-danger-border: #5C2528;
    --color-warning-bg: #2B2110;

    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55);
    --shadow-brand: 0 8px 24px rgba(0, 0, 0, 0.4);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--surface-page);
    -webkit-font-smoothing: antialiased;
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

button { font-family: inherit; font-size: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }
a { color: var(--brand-primary); }

/* ---------- SCREENS ---------- */
.screen { display: none; }
.screen.active { display: block; }

.boot-screen {
    min-height: 100dvh;
    place-items: center;
    align-content: center;
}
.boot-screen.active { display: grid; }

/* ---------- PRIVACY VEIL ---------- */
.privacy-veil {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: none;
    place-items: center;
    align-content: center;
    background: var(--surface-page);
    color: var(--text-secondary);
    text-align: center;
}
.privacy-veil.visible { display: grid; }
.veil-inner { display: grid; gap: var(--sp-3); justify-items: center; }
.veil-inner p { margin: 0; font-size: 0.875rem; }

/* ---------- LOGIN ---------- */
.login-screen {
    min-height: 100dvh;
    padding: var(--sp-6) var(--sp-4);
    padding-top: calc(var(--sp-8) + var(--safe-top));
    background:
        radial-gradient(1200px 600px at 50% -10%, var(--brand-primary-lighter), transparent 60%),
        var(--surface-page);
}
.login-screen.active { display: grid; place-items: center; align-content: center; }

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--sp-8) var(--sp-6);
    box-shadow: var(--shadow-xl);
}

.login-brand { text-align: center; margin-bottom: var(--sp-8); }
.brand-mark-lg { width: 56px; height: 56px; margin-bottom: var(--sp-4); }
.login-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 2.5rem;
    margin: 0 0 var(--sp-2);
    color: var(--text-primary);
    letter-spacing: 0.01em;
}
.login-subtitle {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.login-hint {
    margin: var(--sp-3) 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
}
.login-legal {
    margin: var(--sp-6) 0 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-subtle);
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.6;
}
.login-more { margin-top: var(--sp-5); }
.login-more summary {
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-align: center;
    list-style: none;
    padding: var(--sp-2);
    border-radius: var(--radius-md);
}
.login-more summary::-webkit-details-marker { display: none; }
.login-more summary:hover { color: var(--brand-primary); }
.login-more form { margin-top: var(--sp-4); }
.login-actions { display: grid; gap: var(--sp-2); }

.divider {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-5) 0;
    color: var(--text-muted);
    font-size: 0.75rem;
}
.divider::before, .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}

/* ---------- BUTTONS ---------- */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-google, .btn-aivora {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    min-height: 44px;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.9375rem;
    border: 1px solid transparent;
    transition: all 0.2s var(--ease);
    text-decoration: none;
}
.btn-primary {
    background: var(--brand-primary);
    color: #fff;
    box-shadow: var(--shadow-brand);
}
[data-theme="dark"] .btn-primary { color: #0E1420; font-weight: 600; }
.btn-primary:hover { background: var(--brand-primary-dark); transform: translateY(-1px); }
.btn-secondary {
    background: var(--surface-card);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-sunken); }
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    box-shadow: none;
}
.btn-ghost:hover { background: var(--surface-sunken); color: var(--text-primary); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { filter: brightness(0.92); }

/* LINE's brand green — a small recognizability nod, kept to this one button
   rather than pulled into the shared design tokens. */
.btn-aivora {
    background: #06C755;
    color: #fff;
}
.btn-aivora:hover { background: #05b34c; }
.btn-aivora svg { flex-shrink: 0; }

.btn-google {
    background: var(--surface-card);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.btn-google:hover { background: var(--surface-sunken); }
.btn-full { width: 100%; }
.btn-primary:disabled, .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 40px; height: 40px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    transition: all 0.2s var(--ease);
}
.icon-btn:hover { background: var(--surface-sunken); color: var(--text-primary); }

/* ---------- FORMS ---------- */
.form-field { margin-bottom: var(--sp-4); }
.form-field label {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.form-field input, .form-field select, .form-field textarea {
    width: 100%;
    padding: var(--sp-3);
    min-height: 44px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
    transition: all 0.2s var(--ease);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-lighter);
}
.form-field .field-hint {
    margin: var(--sp-2) 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.form-row { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }

/* ---------- APP SHELL ---------- */
.app-screen.active { display: block; min-height: 100dvh; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    height: calc(var(--topbar-h) + var(--safe-top));
    padding: var(--safe-top) var(--sp-4) 0;
    background: color-mix(in srgb, var(--surface-page) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
}
.topbar-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 1.25rem;
}

.main-content {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-4);
    padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + var(--sp-8));
}

.sidebar { display: none; }

.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    height: calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: color-mix(in srgb, var(--surface-card) 92%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-subtle);
}
.bottom-nav .nav-item {
    flex: 1 1 0;
    min-width: 0;                 /* lets labels shrink instead of overflowing */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.6875rem;
    padding: var(--sp-2) 2px;
    transition: color 0.2s var(--ease);
}
.bottom-nav .nav-item.active { color: var(--brand-primary); }
.bottom-nav .nav-item svg { width: 22px; height: 22px; flex-shrink: 0; }
.bottom-nav .nav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
/* Six items (admin signed in) need tighter type to stay on one line */
.bottom-nav.nav-6 .nav-item { font-size: 0.625rem; }
.bottom-nav.nav-6 .nav-item svg { width: 20px; height: 20px; }
@media (max-width: 359px) {
    .bottom-nav.nav-6 .nav-item { font-size: 0.5625rem; }
}

/* ---------- DESKTOP: sidebar layout ---------- */
@media (min-width: 1024px) {
    .app-screen.active { display: grid; grid-template-columns: 260px 1fr; }
    .topbar, .bottom-nav { display: none; }

    .sidebar {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 0;
        height: 100dvh;
        padding: var(--sp-6) var(--sp-4);
        background: var(--surface-card);
        border-right: 1px solid var(--border-subtle);
    }
    .sidebar-brand {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        flex-shrink: 0;              /* never squeezed by a long nav list */
        padding: 0 var(--sp-2) var(--sp-6);
        border-bottom: 1px solid var(--border-subtle);
        margin-bottom: var(--sp-4);
    }
    .brand-mark { width: 36px; height: 36px; }
    .brand-name {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 600;
        font-size: 1.25rem;
        line-height: 1.2;
    }
    .brand-tagline { font-size: 0.6875rem; color: var(--text-muted); }

    /* min-height:0 is what makes this scroll. A flex child defaults to
       min-height:auto, so without it the nav refuses to shrink below its
       content and pushes the footer (logout) off the bottom of the 100dvh
       sidebar with no way to reach it. Only admins hit this — six items
       overflow where five just fit. */
    .sidebar-nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: var(--sp-1);
        /* scrollbar only appears when actually needed */
        scrollbar-width: thin;
    }
    .sidebar-footer {
        flex-shrink: 0;              /* logout must always stay reachable */
        padding-top: var(--sp-4);
        border-top: 1px solid var(--border-subtle);
        display: flex;
        flex-direction: column;
        gap: var(--sp-1);
    }
    .sidebar .nav-item {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        padding: var(--sp-3);
        border: none;
        background: transparent;
        color: var(--text-secondary);
        border-radius: var(--radius-md);
        font-size: 0.875rem;
        text-align: left;
        width: 100%;
        transition: all 0.2s var(--ease);
    }
    .sidebar .nav-item:hover { background: var(--surface-sunken); color: var(--text-primary); }
    .sidebar .nav-item.active {
        background: var(--brand-primary-lighter);
        color: var(--brand-primary);
        font-weight: 500;
    }
    /* Generated icons carry width/height, but pin them here too so the sidebar
       never depends on the markup for sizing. */
    .sidebar .nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
    .sidebar .nav-item span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-info {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        padding: var(--sp-3);
        margin-bottom: var(--sp-2);
    }
    .user-avatar {
        display: grid;
        place-items: center;
        width: 36px; height: 36px;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--brand-primary);
        color: #fff;
        font-weight: 600;
        font-size: 0.875rem;
    }
    .user-text { min-width: 0; }
    .user-name {
        font-size: 0.8125rem;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .user-role { font-size: 0.6875rem; color: var(--text-muted); }

    .main-content { padding: var(--sp-10) var(--sp-6); }
}

/* ---------- PAGE HEADER ---------- */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-6);
}
.page-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 1.75rem;
    margin: 0 0 var(--sp-1);
    line-height: 1.2;
}
.page-subtitle { margin: 0; font-size: 0.875rem; color: var(--text-secondary); }

/* ---------- CARDS ---------- */
.card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--sp-5);
    overflow: hidden;
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-5) 0;
}
.card-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.125rem;
    margin: 0;
}
.card-body { padding: var(--sp-5); }
.card-body > :first-child { margin-top: 0; }
.card-body > :last-child { margin-bottom: 0; }

/* Session card — the primary consumer touch target */
.session-card {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--sp-5);
    margin-bottom: var(--sp-3);
    transition: all 0.2s var(--ease);
}
.session-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.session-card .session-kicker {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-gold);
    font-weight: 600;
}
.session-card .session-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    margin: var(--sp-1) 0 var(--sp-2);
}
.session-card .session-meta { font-size: 0.8125rem; color: var(--text-secondary); }

/* ---------- STATS ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

.stat-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-top: 3px solid var(--brand-primary);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    box-shadow: var(--shadow-sm);
}
.stat-card.gold { border-top-color: var(--accent-gold); }
.stat-card.warm { border-top-color: var(--accent-warm); }
.stat-card.success { border-top-color: var(--color-success); }
.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: var(--sp-1);
}
.stat-value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}
.stat-value-sm { font-size: 1.5rem; }

/* ---------- BADGES ---------- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-2);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid;
}
.status-badge.success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }
.status-badge.danger  { background: var(--color-danger-bg);  color: var(--color-danger);  border-color: var(--color-danger-border); }
.status-badge.warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning); }
.status-badge.neutral { background: var(--color-neutral-bg); color: var(--color-neutral); border-color: var(--color-neutral-border); }

/* ---------- TABLES (admin only) ---------- */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
}
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th {
    text-align: left;
    padding: var(--sp-3);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.data-table td { padding: var(--sp-3); border-top: 1px solid var(--border-subtle); }
.data-table tbody tr:hover { background: var(--surface-sunken); }
.col-date { min-width: 160px; }
.col-method { min-width: 230px; }

/* ---------- QR BOX — must stay white even in dark theme ---------- */
.qr-box {
    display: inline-block;
    background: #FFFFFF;
    padding: var(--sp-3);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.qr-box img { display: block; width: 210px; height: 210px; }
.qr-fallback {
    max-width: 210px;
    color: #0A0E1A;
    font-size: 0.8125rem;
    text-align: center;
    line-height: 1.5;
}

/* ---------- MODAL ---------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    align-content: center;
    padding: var(--sp-4);
    background: rgba(10, 14, 26, 0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s var(--ease);
}
.modal-backdrop.open { opacity: 1; }
.modal-content {
    z-index: 201;
    width: 100%;
    max-width: 480px;
    max-height: 88dvh;
    overflow-y: auto;
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    transform: translateY(12px);
    transition: transform 0.2s var(--ease);
}
.modal-backdrop.open .modal-content { transform: translateY(0); }
.modal-large { max-width: 760px; }
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-5);
    border-bottom: 1px solid var(--border-subtle);
}
.modal-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0;
}
.modal-close-btn {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-muted);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
}
.modal-close-btn:hover { background: var(--surface-sunken); color: var(--text-primary); }
.modal-body { padding: var(--sp-5); }
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--border-subtle);
}

/* ---------- TOAST ---------- */
#toast-container {
    position: fixed;
    z-index: 300;
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + var(--sp-3));
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    pointer-events: none;
}
@media (min-width: 1024px) {
    #toast-container { left: auto; right: var(--sp-6); bottom: var(--sp-6); max-width: 360px; }
}
.toast {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    background: var(--accent-charcoal);
    color: #fff;
    font-size: 0.875rem;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.3s var(--ease);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: var(--color-success); }
.toast-error { background: var(--color-danger); }
.toast-warning { background: var(--color-warning); }

/* ---------- LOADING ---------- */
#loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    background: rgba(10, 14, 26, 0.35);
    backdrop-filter: blur(2px);
}
.spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--border-strong);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- UTILITIES ---------- */
.text-muted { color: var(--text-muted); font-size: 0.8125rem; }
.empty-state {
    text-align: center;
    padding: var(--sp-10) var(--sp-4);
    color: var(--text-muted);
}
.empty-state svg { margin-bottom: var(--sp-3); opacity: 0.5; }
.notice {
    padding: var(--sp-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--surface-sunken);
    font-size: 0.875rem;
}
.notice-warning { background: var(--color-warning-bg); border-color: var(--color-warning); }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}
.checklist .tick { color: var(--color-success); flex-shrink: 0; margin-top: 2px; }
.checklist .pending { color: var(--text-muted); flex-shrink: 0; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   PHASE 1 — Assessment, program, practice engines
   ========================================================= */

/* ---------- ASSESSMENT ---------- */
.q-block { margin-bottom: var(--sp-6); }
.q-block:last-child { margin-bottom: 0; }
.q-text {
    margin: 0 0 var(--sp-1);
    font-weight: 500;
    line-height: 1.5;
}
.q-hint {
    margin: 0 0 var(--sp-3);
    font-size: 0.75rem;
    color: var(--text-muted);
}
.opt-list { display: grid; gap: var(--sp-2); }
.opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
    min-height: 48px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.4;
    transition: all 0.15s var(--ease);
}
.opt:hover { border-color: var(--brand-primary); background: var(--surface-sunken); }
.opt.selected {
    border-color: var(--brand-primary);
    background: var(--brand-primary-lighter);
    color: var(--brand-primary);
    font-weight: 500;
}
/* Scale rows compress on wider screens so all five sit in view together */
@media (min-width: 640px) {
    .opt-scale { grid-template-columns: repeat(5, 1fr); }
    .opt-scale .opt { text-align: center; padding: var(--sp-3) var(--sp-1); font-size: 0.8125rem; }
}

.score-bar {
    height: 8px;
    background: var(--surface-sunken);
    border-radius: 999px;
    overflow: hidden;
    margin: var(--sp-4) 0 var(--sp-3);
}
.score-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-warm));
    border-radius: 999px;
    transition: width 0.6s var(--ease);
}

.evidence {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-sunken);
    margin-bottom: var(--sp-5);
}
.evidence summary {
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    list-style: none;
}
.evidence summary::-webkit-details-marker { display: none; }
.evidence summary::before { content: '＋ '; color: var(--accent-gold); }
.evidence[open] summary::before { content: '－ '; }
.evidence p {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.7;
}
.evidence p:last-child { margin-bottom: 0; }

/* ---------- SESSION ---------- */
.lesson p { line-height: 1.8; }
.lesson p:first-child { margin-top: 0; }
.lesson p:last-child { margin-bottom: 0; }

.numbered { margin: 0; padding-left: var(--sp-5); line-height: 1.9; }

.session-card.accent-gold { border-left: 3px solid var(--accent-gold); }
.done-mark {
    font-size: 2rem;
    color: var(--color-success);
    line-height: 1;
}
.stat-value .unit { font-size: 1rem; font-weight: 500; }

/* ---------- PROGRAM MAP ---------- */
.card.is-locked { opacity: 0.55; }
.day-dots {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.day-dot {
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all 0.15s var(--ease);
}
.day-dot:hover:not(:disabled) { border-color: var(--brand-primary); }
.day-dot.done {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success);
}
.day-dot.current {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
    box-shadow: var(--shadow-brand);
}
[data-theme="dark"] .day-dot.current { color: #0E1420; }
.day-dot:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---------- TIMER RING (Kegel) ---------- */
.timer-wrap {
    position: relative;
    width: 240px;
    max-width: 100%;
    margin: 0 auto var(--sp-5);
    aspect-ratio: 1;
}
.timer-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-ring circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.ring-bg { stroke: var(--surface-sunken); }
.ring-fg {
    stroke: var(--accent-gold);
    transition: stroke-dashoffset 0.1s linear, stroke 0.3s var(--ease);
}
.timer-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    gap: var(--sp-1);
}
.timer-phase {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.2s var(--ease);
}
.timer-phase.phase-hold { color: var(--accent-warm); }
.timer-phase.phase-rest { color: var(--brand-primary); }
.timer-phase.phase-release { color: var(--accent-gold); }
.timer-phase.phase-done { color: var(--color-success); }
.timer-count {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
}
.timer-sub { font-size: 0.75rem; color: var(--text-muted); }

/* ---------- BREATHING ORB ---------- */
.breath-wrap {
    display: grid;
    place-items: center;
    gap: var(--sp-3);
    padding: var(--sp-6) 0;
    margin-bottom: var(--sp-4);
}
.breath-orb {
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
                var(--accent-gold-light), var(--accent-warm));
    opacity: 0.9;
    transform: scale(0.55);
    /* No CSS transition: the JS pacer sets scale every frame, and a transition
       would lag behind the actual breath timing. */
    will-change: transform;
}
.breath-label {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
}
.breath-sub { font-size: 0.75rem; color: var(--text-muted); }

/* ---------- PROGRESS TREND ---------- */
.trend { display: grid; gap: var(--sp-3); }
.trend-row {
    display: grid;
    grid-template-columns: 96px 1fr 32px;
    align-items: center;
    gap: var(--sp-3);
    font-size: 0.75rem;
}
.trend-date { color: var(--text-muted); }
.trend-bar {
    height: 10px;
    background: var(--surface-sunken);
    border-radius: 999px;
    overflow: hidden;
}
.trend-fill {
    height: 100%;
    background: var(--brand-primary);
    border-radius: 999px;
}
.trend-val { text-align: right; font-weight: 600; }

/* ---------- SAFETY ---------- */
.who-row {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border-subtle);
}
.who-row:last-child { border-bottom: none; padding-bottom: 0; }
.who-role { font-weight: 500; font-size: 0.875rem; }
.who-when { font-size: 0.8125rem; color: var(--text-muted); margin-top: 2px; }

/* =========================================================
   PHASE 2 — Couple layer
   ========================================================= */

/* ---------- INVITE ---------- */
.invite-code {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: var(--brand-primary);
    padding: var(--sp-4) 0;
    /* Trailing letter-spacing pushes the string off-centre without this */
    text-indent: 0.25em;
}
.code-input {
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.75rem !important;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* ---------- DECK LIST ---------- */
.deck-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    width: 100%;
    text-align: left;
    padding: var(--sp-4);
    margin-bottom: var(--sp-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    transition: all 0.2s var(--ease);
}
.deck-row:last-child { margin-bottom: 0; }
.deck-row:hover { border-color: var(--brand-primary); background: var(--surface-sunken); }
.deck-title { font-weight: 500; color: var(--text-primary); }
.deck-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.deck-count {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: var(--sp-1) var(--sp-3);
    border-radius: 999px;
    background: var(--surface-sunken);
}
.deck-count.complete {
    background: var(--color-success-bg);
    color: var(--color-success);
}

/* ---------- SWIPE CARD ---------- */
.deck-progress {
    height: 4px;
    background: var(--surface-sunken);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--sp-5);
}
.deck-progress-fill {
    height: 100%;
    background: var(--accent-gold);
    border-radius: 999px;
    transition: width 0.3s var(--ease);
}

.swipe-card {
    display: grid;
    align-content: center;
    gap: var(--sp-4);
    min-height: 220px;
    padding: var(--sp-8) var(--sp-6);
    margin-bottom: var(--sp-5);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.swipe-intensity {
    font-size: 0.6875rem;
    letter-spacing: 0.3em;
    color: var(--accent-gold);
}
.swipe-text {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.6;
}

.swipe-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.swipe-btn {
    padding: var(--sp-4) var(--sp-2);
    min-height: 56px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-weight: 500;
    transition: all 0.15s var(--ease);
}
.swipe-btn:hover { transform: translateY(-2px); }
.swipe-btn.no:hover     { border-color: var(--color-neutral); color: var(--text-primary); }
.swipe-btn.maybe:hover  { border-color: var(--accent-gold);  color: var(--accent-gold); }
.swipe-btn.yes {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}
[data-theme="dark"] .swipe-btn.yes { color: #0E1420; }
.swipe-btn.yes:hover { background: var(--brand-primary-dark); }

/* ---------- MATCHES ---------- */
.match-group { margin-bottom: var(--sp-5); }
.match-group:last-child { margin-bottom: 0; }
.match-label {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--sp-3);
}
.match-item {
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-2);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.5;
    border-left: 3px solid transparent;
}
.match-item:last-child { margin-bottom: 0; }
.match-item.matched {
    background: var(--color-success-bg);
    border-left-color: var(--color-success);
}
.match-item.curious {
    background: var(--surface-sunken);
    border-left-color: var(--accent-gold);
}

/* ---------- SENSATE ---------- */
.boundary {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    border-radius: var(--radius-md);
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning);
    font-size: 0.875rem;
    font-weight: 500;
}
.boundary-label {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-warning);
    font-weight: 700;
}

/* =========================================================
   PHASE 3 — Donation + admin
   ========================================================= */

/* ---------- DONATION ---------- */
.purpose-box {
    padding: var(--sp-4);
    margin: var(--sp-4) 0;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    border-left: 3px solid var(--accent-gold);
    font-size: 0.875rem;
    line-height: 1.6;
}
.purpose-label {
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: var(--sp-1);
}

.quick-amounts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-2);
}
.quick-amt {
    padding: var(--sp-4) var(--sp-1);
    min-height: 52px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    transition: all 0.15s var(--ease);
}
.quick-amt:hover {
    border-color: var(--brand-primary);
    background: var(--brand-primary-lighter);
    color: var(--brand-primary);
}
.amt-input {
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.5rem !important;
    font-weight: 600;
}

.qr-amount {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    margin: var(--sp-4) 0 var(--sp-2);
}

.anon-toggle {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    text-align: left;
    padding: var(--sp-3);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    font-size: 0.8125rem;
    line-height: 1.5;
    cursor: pointer;
}
.anon-toggle input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--brand-primary);
}

.my-donation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border-subtle);
}
.my-donation:last-child { border-bottom: none; padding-bottom: 0; }
.md-amt { font-weight: 600; }
.md-date { font-size: 0.75rem; color: var(--text-muted); }

/* ---------- ADMIN: REQUEST CARDS ---------- */
.req-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.req-amt {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
}
.req-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-2) var(--sp-4);
    margin: 0 0 var(--sp-5);
    font-size: 0.8125rem;
}
.req-meta dt { color: var(--text-muted); white-space: nowrap; }
.req-meta dd { margin: 0; word-break: break-word; }
.req-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
}
/* Confirm sits on the right so the destructive option is never the default tap */
.req-actions .btn-primary { order: 2; }

/* ---------- ADMIN: PERIOD FILTER ---------- */
.period-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.period-tab {
    padding: var(--sp-2) var(--sp-4);
    min-height: 40px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    transition: all 0.15s var(--ease);
}
.period-tab:hover { border-color: var(--brand-primary); }
.period-tab.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
    font-weight: 500;
}
[data-theme="dark"] .period-tab.active { color: #0E1420; }

.form-field textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.6;
}

/* =========================================================
   PHASE 4 — PIN lock, library, aggregate stats
   ========================================================= */

/* ---------- PIN SCREEN ---------- */
.pin-screen {
    min-height: 100dvh;
    padding: var(--sp-6) var(--sp-4);
    background: var(--surface-page);
}
.pin-screen.active { display: grid; place-items: center; align-content: center; }
.pin-card {
    width: 100%;
    max-width: 320px;
    display: grid;
    justify-items: center;
    gap: var(--sp-3);
    padding: var(--sp-8) var(--sp-6);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    color: var(--text-secondary);
    text-align: center;
}
.pin-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 1.75rem;
    margin: 0;
    color: var(--text-primary);
}
.pin-sub { margin: 0; font-size: 0.8125rem; }
.pin-input {
    width: 100%;
    padding: var(--sp-3);
    min-height: 52px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-indent: 0.4em;      /* re-centres despite trailing letter-spacing */
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
}
.pin-input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-lighter);
}

/* ---------- ARTICLE ---------- */
.article p { line-height: 1.85; }
.article-h3 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    margin: var(--sp-6) 0 var(--sp-2);
    color: var(--text-primary);
}
.article-h3:first-child { margin-top: 0; }

/* ---------- SHARE ROW ---------- */
.share-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
}
.two-up {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
}

/* ---------- AGGREGATE STATS ---------- */
.agg-row {
    display: grid;
    grid-template-columns: 116px 1fr 44px;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    font-size: 0.8125rem;
}
.agg-row:last-child { margin-bottom: 0; }
.agg-label { color: var(--text-secondary); }
.agg-bar {
    height: 10px;
    background: var(--surface-sunken);
    border-radius: 999px;
    overflow: hidden;
}
.agg-fill {
    height: 100%;
    background: var(--brand-primary);
    border-radius: 999px;
    transition: width 0.4s var(--ease);
}
.agg-val { text-align: right; font-weight: 600; }

/* =========================================================
   CONSENT GATE + LEGAL
   ========================================================= */

.consent-screen {
    min-height: 100dvh;
    padding: var(--sp-6) var(--sp-4);
    padding-top: calc(var(--sp-8) + var(--safe-top));
    padding-bottom: calc(var(--sp-8) + var(--safe-bottom));
    background: var(--surface-page);
    overflow-y: auto;
}
.consent-screen.active { display: block; }
.consent-wrap { max-width: 520px; margin: 0 auto; }
.consent-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--sp-8) var(--sp-6);
    box-shadow: var(--shadow-xl);
}
.consent-head { text-align: center; margin-bottom: var(--sp-6); }
.consent-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 1.75rem;
    margin: var(--sp-3) 0 var(--sp-2);
}
.consent-sub {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.consent-summary {
    display: grid;
    gap: var(--sp-4);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
}
.cs-item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.cs-icon { flex-shrink: 0; margin-top: 2px; color: var(--accent-gold); }
.cs-title { font-weight: 600; font-size: 0.875rem; margin-bottom: 2px; }
.cs-text { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.6; }

.consent-links {
    display: grid;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}
.link-btn {
    border: none;
    background: none;
    padding: var(--sp-2);
    color: var(--brand-primary);
    font-size: 0.8125rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.link-btn:hover { color: var(--brand-primary-dark); }

.consent-items {
    display: grid;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}
.consent-check {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    line-height: 1.6;
    cursor: pointer;
    transition: border-color 0.15s var(--ease);
}
.consent-check:hover { border-color: var(--brand-primary); }
.consent-check:has(input:checked) {
    border-color: var(--brand-primary);
    background: var(--brand-primary-lighter);
}
.consent-check input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--brand-primary);
}
.consent-note {
    margin: var(--sp-4) 0 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-subtle);
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.7;
}

/* ---------- LEGAL DOCUMENT ---------- */
.legal-body { font-size: 0.875rem; }
.legal-body p { line-height: 1.85; color: var(--text-secondary); }
.legal-body strong { color: var(--text-primary); }
.legal-h {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: var(--sp-6) 0 var(--sp-2);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-subtle);
}
.legal-h:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ---------- DONATION PURPOSE LIST ---------- */
.purpose-list {
    margin: var(--sp-2) 0 0;
    padding-left: var(--sp-5);
    display: grid;
    gap: var(--sp-2);
}
.purpose-list li { line-height: 1.6; }
.purpose-list li::marker { color: var(--accent-gold); }
.purpose-note {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-subtle);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ---------- THREE-OPTION MODAL FOOTER ---------- */
/* Three buttons overflow a phone footer side by side, so stack them there and
   put the safe default (cancel) last where the thumb rests. */
@media (max-width: 479px) {
    .modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .modal-footer button { width: 100%; }
}

/* ---------- INSTALL STEPS ---------- */
.install-steps {
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-4);
    margin-bottom: var(--sp-3);
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
}
.istep {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: 0.875rem;
    line-height: 1.6;
}
.istep-n {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
}
[data-theme="dark"] .istep-n { color: #0E1420; }