/* ============================================================
   Pamposhun — main.css  (Warm Precision design language)
   Design principles: black ink primary (matches logo + landing), warm white
   surfaces, Inter for body and headings, 8–16px radius scale, warm
   neutral shadows, full dark-mode support.
   ============================================================ */

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design Tokens — Light ──────────────────────────────────── */
:root {
    /* Primary — black ink, matching the black logo and landing page (2026-10-19) */
    --color-brand:      #1C1917;
    --color-brand-dk:   #000000;
    --color-brand-lt:   #F1EFEC;      /* tonal container */
    --color-brand-tint: rgba(28,25,23,.08);  /* state layer */
    --color-on-brand:   #ffffff;      /* text/icon on a brand fill */

    /* Surfaces — warm white (landing page palette) */
    --color-bg:                 #FBF8F5;
    --color-surface:            #FFFFFF;
    --color-surface-container:  #F4F1ED;
    --color-surface-cont-high:  #ECE7E1;

    /* Neutral text — warm ink */
    --color-text:    #1C1917;
    --color-muted:   #57534E;

    /* Outline / border — warm */
    --color-border:  #E2DCD5;
    --color-border-lt: #EDE7E1;

    /* Semantic */
    --color-error:      #BA1A1A;
    --color-error-lt:   #FFDAD6;
    --color-success:    #146C2E;
    --color-success-lt: #CEFFE1;
    --color-warning:    #7B4F00;
    --color-warning-lt: #FFDEA8;
    --color-info:       #1A4F9C;
    --color-info-lt:    #D8E3FF;

    /* Shape scale — confident, modern (HP-influenced) */
    --radius:      12px;
    --radius-xs:    4px;
    --radius-sm:    8px;
    --radius-md:   12px;   /* alias for --radius */
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 999px;

    /* ── Canonical aliases — all templates should use --color-brand, --color-surface,
          --color-border, --color-muted. Aliases below ensure legacy templates still
          render correctly while a full migration is in progress. ── */
    --color-primary:         var(--color-brand);     /* deprecated → use --color-brand */
    --primary:               var(--color-brand);     /* deprecated → use --color-brand */
    --primary-rgb:           28, 25, 23;
    --surface:               var(--color-surface);   /* deprecated → use --color-surface */
    --border:                var(--color-border);    /* deprecated → use --color-border */
    --border-color:          var(--color-border);    /* deprecated → use --color-border */
    --color-text-muted:      var(--color-muted);     /* deprecated → use --color-muted */
    --text-muted:            var(--color-muted);     /* deprecated → use --color-muted */
    --color-danger:          var(--color-error);     /* deprecated → use --color-error */
    --card-bg:               var(--color-surface);   /* deprecated → use --color-surface */
    --color-surface-raised:  var(--color-surface-container);
    --color-surface-variant: var(--color-surface-container);

    /* ── Type scale tokens ── */
    --text-xs:   .72rem;
    --text-sm:   .82rem;
    --text-base: .95rem;
    --text-md:   1rem;
    --text-lg:   1.1rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-label: .7rem;   /* uppercase label / eyebrow */

    /* ── Spacing scale tokens ── */
    --space-1:  .25rem;
    --space-2:  .5rem;
    --space-3:  .75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Typography */
    --font-sans:    'Inter', ui-sans-serif, 'Segoe UI Variable',
                    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: var(--font-sans);

    /* Elevation — warm neutral (no brand-color tint) */
    --shadow-sm: 0 1px 2px rgba(26,23,20,.06);
    --shadow:    0 1px 3px rgba(26,23,20,.08), 0 2px 10px rgba(26,23,20,.05);
    --shadow-md: 0 4px 18px rgba(26,23,20,.10), 0 2px 8px rgba(26,23,20,.06);
    --shadow-lg: 0 8px 36px rgba(26,23,20,.12), 0 4px 16px rgba(26,23,20,.08);

    /* Motion — M3 Standard (decelerate) + Emphasized (spring-like) */
    --ease:     cubic-bezier(0.2, 0, 0, 1);
    --ease-exp: cubic-bezier(0.05, 0.7, 0.1, 1);
    --dur:      250ms;
    --dur-fast: 150ms;
    --dur-slow: 400ms;
}

/* ── Design Tokens — Dark ───────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-brand:      #F5F5F4;
        --color-brand-dk:   #FFFFFF;
        --color-brand-lt:   #3A3530;
        --color-brand-tint: rgba(245,245,244,.12);
        --color-on-brand:   #1C1917;   /* dark ink on the light dark-mode brand */

        --color-bg:                #1C1814;
        --color-surface:           #17140F;
        --color-surface-container: #24201A;
        --color-surface-cont-high: #2F2A23;

        --color-text:    #EDE8E1;
        --color-muted:   #9A9088;
        --color-border:  #4A4540;
        --color-border-lt: #3A3530;

        --color-error:      #FFB4AB;
        --color-error-lt:   #93000A;
        --color-success:    #9BF6B5;
        --color-success-lt: #003919;
        --color-warning:    #FFB960;
        --color-warning-lt: #462900;
        --color-info:       #ADC6FF;
        --color-info-lt:    #002E69;

        --shadow-sm: 0 1px 2px rgba(0,0,0,.28);
        --shadow:    0 1px 3px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.22);
        --shadow-md: 0 4px 18px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.30);
        --shadow-lg: 0 8px 36px rgba(0,0,0,.52), 0 4px 16px rgba(0,0,0,.36);
        --primary-rgb: 245, 245, 244;
    }
}
:root[data-theme="dark"] {
    --color-brand:      #F5F5F4;
    --color-brand-dk:   #FFFFFF;
    --color-brand-lt:   #3A3530;
    --color-brand-tint: rgba(245,245,244,.12);
    --color-on-brand:   #1C1917;

    --color-bg:                #1C1814;
    --color-surface:           #17140F;
    --color-surface-container: #24201A;
    --color-surface-cont-high: #2F2A23;

    --color-text:    #EDE8E1;
    --color-muted:   #9A9088;
    --color-border:  #4A4540;
    --color-border-lt: #3A3530;

    --color-error:      #FFB4AB;
    --color-error-lt:   #93000A;
    --color-success:    #9BF6B5;
    --color-success-lt: #003919;
    --color-warning:    #FFB960;
    --color-warning-lt: #462900;
    --color-info:       #ADC6FF;
    --color-info-lt:    #002E69;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.28);
    --shadow:    0 1px 3px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.22);
    --shadow-md: 0 4px 18px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.30);
    --shadow-lg: 0 8px 36px rgba(0,0,0,.52), 0 4px 16px rgba(0,0,0,.36);
    --primary-rgb: 245, 245, 244;
}
:root[data-theme="light"] {
    --color-brand:      #1C1917;
    --color-brand-dk:   #000000;
    --color-brand-lt:   #F1EFEC;
    --color-brand-tint: rgba(28,25,23,.08);
    --color-on-brand:   #ffffff;
    --color-bg:                 #FBF8F5;
    --color-surface:            #FFFFFF;
    --color-surface-container:  #F4F1ED;
    --color-surface-cont-high:  #ECE7E1;
    --color-text:    #1C1917;
    --color-muted:   #57534E;
    --color-border:  #E2DCD5;
    --color-border-lt: #EDE7E1;
    --color-error:      #BA1A1A;
    --color-error-lt:   #FFDAD6;
    --color-success:    #146C2E;
    --color-success-lt: #CEFFE1;
    --color-warning:    #7B4F00;
    --color-warning-lt: #FFDEA8;
    --color-info:       #1A4F9C;
    --color-info-lt:    #D8E3FF;
    --shadow-sm: 0 1px 2px rgba(26,23,20,.06);
    --shadow:    0 1px 3px rgba(26,23,20,.08), 0 2px 10px rgba(26,23,20,.05);
    --shadow-md: 0 4px 18px rgba(26,23,20,.10), 0 2px 8px rgba(26,23,20,.06);
    --shadow-lg: 0 8px 36px rgba(26,23,20,.12), 0 4px 16px rgba(26,23,20,.08);
}

/* ── Base ───────────────────────────────────────────────────── */
html { font-size: 16px; color-scheme: light dark; }

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* --color-brand-dk (not --color-brand) for link text specifically: the plain
   --color-brand/--color-bg pairing computes to 4.52:1 in light mode — a
   razor-thin AA pass with almost no margin (WCAG floor is 4.5:1). --color-brand-dk
   gives 6.11:1 in light mode and 6.64:1 in dark mode (both modes improved, no
   regression) — computed via the WCAG relative-luminance formula against the
   real hex values above, not estimated. See PAMSHOUN accessibility audit
   A11Y-012, which quantified the accessibility page's own admitted "known gap."
   Button fills still use --color-brand (--color-on-brand text already passes
   AA against it, per that same audit) — this change is link-text-only. */
a { color: var(--color-brand-dk); text-decoration: none; }
a:hover { text-decoration: underline; }

/* A link inline in a sentence (a paragraph, a "Don't have an account?" footer
   line) reads as plain text next to it unless something besides colour marks
   it — WCAG 1.4.1. Nav pills, button links and list-style link rows (like
   .site-footer-legal) already read as links from their position/shape, so
   they're excluded rather than double-marked. */
p a, .auth-footer a, .form-check-note a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Layout ─────────────────────────────────────────────────── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.main-content { padding: 2rem 1.25rem; }

/* ── Header — glass / mica effect (Chrome M3 toolbar) ───────── */
.site-header {
    background: rgba(255,252,247,.88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--color-border-lt);
    padding: .75rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    transition: background var(--dur) var(--ease);
}
:root[data-theme="dark"] .site-header {
    background: rgba(23,20,15,.88);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-header {
        background: rgba(23,20,15,.88);
    }
}

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }

/* Logo — slightly larger, gradient treatment */
.logo {
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -.4px;
    /* Solid brand-dk, not gradient-clipped text: gradient text can't be contrast-checked
       (axe/pa11y report it as "needs review") and its dark end vanished on the dark header. */
    color: var(--color-brand-dk);
    flex-shrink: 0;
}
.logo:hover { text-decoration: none; opacity: .85; }

/* Nav — pill active state, M3 indicator style */
.site-nav { display: flex; align-items: center; gap: .25rem; }

.site-nav a,
.site-nav .btn-link {
    font-size: .875rem;
    font-weight: 500;
    color: var(--color-muted);
    padding: .4rem .75rem;
    border-radius: var(--radius-full);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast);
}
.site-nav a:hover,
.site-nav .btn-link:hover {
    background: var(--color-brand-tint);
    color: var(--color-brand);
    text-decoration: none;
}

/* Active page — highlighted pill */
.site-nav a.nav-active,
.site-nav a[aria-current="page"] {
    background: var(--color-brand-lt);
    color: var(--color-brand-dk);   /* --color-brand on --color-brand-lt was 4.13:1 (light) / 3.86:1 (dark) */
    font-weight: 600;
}

/* Sign up CTA in nav */
.site-nav .btn.btn-primary {
    font-size: .875rem;
    padding: .4rem 1rem;
    border-radius: var(--radius-sm);
    box-shadow: none;
    margin-left: .25rem;
    min-height: 34px;
    /* Restate the fill: `.site-nav a` (muted text) and `.site-nav a.nav-active`
       (tinted fill) otherwise win on specificity and left the label ~1.2:1. */
    background: var(--color-brand);
    color: var(--color-on-brand);
}
.site-nav .btn.btn-primary:hover {
    background: var(--color-brand-dk);
    color: var(--color-on-brand);
}

/* Dark-mode toggle */
.theme-toggle {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast), color var(--dur-fast);
    flex-shrink: 0;
    line-height: 1;
}
.theme-toggle:hover {
    background: var(--color-brand-tint);
    border-color: var(--color-brand);
    color: var(--color-brand);
}

/* Hamburger toggle */
.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text);
    padding: .3rem .6rem;
    min-width: 44px;
    min-height: 44px;
    transition: background var(--dur-fast);
}
.nav-toggle:hover { background: var(--color-brand-tint); border-color: var(--color-brand); }

/* ── Nav "More" dropdown ─────────────────────────────────────── */
.nav-more { position: relative; }
.nav-more-toggle {
    display: flex; align-items: center; gap: .25rem;
    cursor: pointer; background: none; border: none;
    font: inherit; color: inherit; padding: .375rem .625rem;
    border-radius: var(--radius-sm); transition: background var(--dur-fast);
}
.nav-more-toggle:hover { background: var(--color-brand-tint); }
.nav-more-menu {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 200px; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius);
    box-shadow: var(--shadow-md); z-index: 300; padding: .375rem;
    flex-direction: column; gap: 1px;
}
.nav-more.open .nav-more-menu { display: flex; }
.nav-more-menu a {
    display: block; padding: .5rem .75rem; border-radius: var(--radius-sm);
    text-decoration: none; color: var(--color-text); font-size: .875rem;
    transition: background var(--dur-fast);
}
.nav-more-menu a:hover { background: var(--color-brand-tint); color: var(--color-brand); }
.nav-more-menu .nav-divider {
    height: 1px; background: var(--color-border); margin: .25rem 0;
}
@media (max-width: 768px) {
    .nav-more-menu { position: static; box-shadow: none; border: none;
        padding: 0; background: transparent; }
    .nav-more.open .nav-more-menu { display: flex; }
    .nav-more-menu a { width: 100%; padding: .6rem .875rem; }
}

/* ── Mega-menu (More dropdown) ───────────────────────────────── */
.nav-mega {
    min-width: min(720px, 92vw) !important;
    display: none;
    flex-wrap: wrap;
    padding: .75rem !important;
    gap: 0 !important;
}
.nav-more.open .nav-mega { display: flex; }
.mega-col {
    flex: 1 1 160px;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    padding: .5rem .6rem;
}
.mega-heading {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-muted);
    padding: .2rem .4rem .5rem;
    border-bottom: 1px solid var(--color-border-lt);
    margin-bottom: .35rem;
}
.nav-mega a {
    font-size: .82rem;
    padding: .35rem .5rem !important;
    width: 100% !important;
}
@media (max-width: 768px) {
    .nav-mega { min-width: 0 !important; flex-direction: column; }
    .mega-col { flex: none; padding: .25rem 0; }
    .mega-heading { margin-top: .4rem; }
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem 1.25rem;
    border-radius: var(--radius-sm);   /* 8px — decisive, HP-style */
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                transform  var(--dur-fast) var(--ease-exp),
                color var(--dur-fast);
    text-align: center;
    letter-spacing: .01em;
    white-space: nowrap;
    min-height: 40px;
}
.btn:active { transform: scale(.97); }

/* Filled primary — black ink */
.btn-primary {
    background: var(--color-brand);
    color: var(--color-on-brand);
    box-shadow: 0 1px 3px rgba(var(--primary-rgb),.20), 0 2px 8px rgba(var(--primary-rgb),.12);
}
.btn-primary:hover {
    background: var(--color-brand-dk);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb),.28), 0 4px 16px rgba(var(--primary-rgb),.15);
    text-decoration: none;
    color: var(--color-on-brand);
}

/* Tonal secondary — warm brand bg, brand text */
.btn-secondary {
    background: var(--color-brand-lt);
    color: var(--color-brand);
    border: 1px solid rgba(var(--primary-rgb),.20);
}
.btn-secondary:hover {
    background: color-mix(in srgb, var(--color-brand-lt) 85%, var(--color-brand));
    text-decoration: none;
    color: var(--color-brand);
}

/* Outlined ghost */
.btn-ghost {
    background: transparent;
    border: 1.5px solid var(--color-border);
    color: var(--color-text);
}
.btn-ghost:hover {
    background: var(--color-brand-tint);
    border-color: var(--color-brand);
    color: var(--color-brand);
    text-decoration: none;
}

/* Danger */
.btn-danger {
    background: var(--color-error);
    color: #fff;
}
.btn-danger:hover {
    background: color-mix(in srgb, var(--color-error) 85%, black);
    text-decoration: none;
    color: #fff;
}

/* Sizes */
.btn-sm   { padding: .3rem .85rem; font-size: .82rem; }
.btn-xs   { padding: .18rem .55rem; font-size: .76rem; font-weight: 600; }
.btn-full { width: 100%; padding: .7rem; font-size: 1rem; margin-top: .5rem; }

/* Outlined — transparent bg, border, text colour */
.btn-outline {
    background: transparent;
    border: 1.5px solid var(--color-border);
    color: var(--color-text);
}
.btn-outline:hover {
    background: var(--color-brand-tint);
    border-color: var(--color-brand);
    color: var(--color-brand);
    text-decoration: none;
}

/* Link-style button */
.btn-link {
    background: none;
    border: none;
    color: var(--color-brand);
    cursor: pointer;
    font-size: .875rem;
    padding: .4rem .75rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    transition: background var(--dur-fast), color var(--dur-fast);
}
.btn-link:hover { background: var(--color-brand-tint); text-decoration: none; }

/* Google OAuth */
.btn-google {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    font-weight: 500;
    border-radius: var(--radius-full);
}
.btn-google:hover {
    background: var(--color-bg);
    text-decoration: none;
    border-color: var(--color-muted);
    color: var(--color-text);
}

.inline-form { display: inline; }

/* ── Flash messages ─────────────────────────────────────────── */
@keyframes flash-slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.flash-list { margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.flash {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .85rem 1.1rem;
    border-radius: var(--radius-lg);
    font-size: .9rem;
    font-weight: 500;
    border: 1px solid transparent;
    border-left-width: 3px;
    animation: flash-slide-in 220ms var(--ease) both;
}
.flash::before {
    font-size: 1rem;
    line-height: 1.45;
    flex-shrink: 0;
    font-weight: 700;
}
.flash--success { background: var(--color-success-lt); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); }
.flash--error   { background: var(--color-error-lt);   color: var(--color-error);   border-color: color-mix(in srgb, var(--color-error) 30%, transparent); }
.flash--warning { background: var(--color-warning-lt); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); }
.flash--info    { background: var(--color-info-lt);    color: var(--color-info);    border-color: color-mix(in srgb, var(--color-info) 30%, transparent); }
.flash--success::before { content: '✓'; }
.flash--error::before   { content: '⚠'; }
.flash--warning::before { content: '!'; }
.flash--info::before    { content: 'ℹ'; }
.flash-close {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0 0 .5rem;
    opacity: .7;
    color: inherit;
}
.flash-close:hover { opacity: 1; }
.flash--hiding {
    transition: opacity .4s ease, transform .4s ease;
    opacity: 0;
    transform: translateY(-4px);
}

/* ── Forms ──────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .3rem; }
.form-group label { font-size: .875rem; font-weight: 600; color: var(--color-text); }

.pwd-field { position: relative; }
.pwd-field .form-control { padding-right: 2.75rem; }
.pwd-toggle { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); background: none; border: none; padding: .25rem; cursor: pointer; color: var(--color-muted); line-height: 1; display: flex; align-items: center; justify-content: center; border-radius: 3px; }
.pwd-toggle:hover { color: var(--color-text); }
.pwd-toggle:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 1px; }

.form-control {
    width: 100%;
    padding: .65rem .9rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .95rem;
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                background var(--dur-fast);
    font-family: inherit;
}
.form-control:hover:not(:focus) { border-color: var(--color-muted); }
.form-control:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--color-brand-tint);
    background: var(--color-surface);
}
.form-control::placeholder { color: var(--color-muted); opacity: .75; }

/* inline validation states */
.form-control.is-invalid {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(var(--color-error-rgb, 220,38,38),.12);
}
.form-control.is-valid {
    border-color: var(--color-success);
    box-shadow: 0 0 0 3px rgba(var(--color-success-rgb, 34,197,94),.12);
}
.field-error {
    font-size: .8rem;
    color: var(--color-error);
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .15rem;
}
.field-error::before { content: '✕'; font-size: .7rem; flex-shrink: 0; }
.field-hint { font-size: .8rem; color: var(--color-muted); margin-top: .15rem; }

/* Honeypot field — visually removed but still in the DOM for bots to trip on. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

.form-divider {
    display: flex;
    align-items: center;
    margin: 1.25rem 0 .75rem;
    color: var(--color-muted);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    gap: .75rem;
}
.form-divider::before, .form-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* ── Auth layout — warm dark bridge between landing and app ─── */
.auth-layout {
    /* Solid #16110A for the first 360px so the opaque .auth-brand-mark band (same colour,
       needed for contrast measurement) is seamless; then the original fade. */
    background: linear-gradient(180deg, #16110A 0, #16110A 360px, #1C1814 max(40%, 520px), var(--color-bg) 100%);
    min-height: 100dvh;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .auth-layout {
        background: linear-gradient(180deg, #16110A 0, #16110A 360px, #1C1814 max(60%, 520px), #1C1814 100%);
    }
}
:root[data-theme="dark"] .auth-layout {
    background: linear-gradient(180deg, #16110A 0, #16110A 360px, #1C1814 max(60%, 520px), #1C1814 100%);
}
:root[data-theme="light"] .auth-layout {
    background: linear-gradient(180deg, #16110A 0, #16110A 360px, #1C1814 max(40%, 520px), var(--color-bg) 100%);
}

/* Light theme: the same warm cream as the landing page and app, with a soft brand-tint glow,
   instead of a dark-to-grey fade. The header already carries the logo, so the in-page brand
   mark is dropped here. Dark theme keeps the dark treatment above. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .auth-layout {
        background: radial-gradient(900px 460px at 50% -120px, var(--color-brand-tint), transparent 70%), var(--color-bg);
    }
    :root:not([data-theme="dark"]) .auth-layout .auth-brand-mark { display: none; }
    :root:not([data-theme="dark"]) .auth-layout .auth-card { margin-top: 3rem; }
}
:root[data-theme="light"] .auth-layout {
    background: radial-gradient(900px 460px at 50% -120px, var(--color-brand-tint), transparent 70%), var(--color-bg);
}
:root[data-theme="light"] .auth-layout .auth-brand-mark { display: none; }
:root[data-theme="light"] .auth-layout .auth-card { margin-top: 3rem; }

/* ── Auth card ──────────────────────────────────────────────── */
.auth-brand-mark {
    /* Opaque, = the gradient's own top colour, so contrast on the brand name is computable. */
    background-color: #16110A;
    text-align: center;
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
}
.auth-brand-mark .brand-wordmark {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: #F9F5EE;
}
.auth-brand-mark .brand-wordmark-logo {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
.auth-brand-mark .brand-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.auth-card {
    max-width: 460px;
    margin: 0 auto 3rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-xl);
    padding: 2.5rem 2.25rem;
    box-shadow: var(--shadow-lg);
}
.auth-card h1 {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 700;
    margin-bottom: .25rem;
    letter-spacing: -.02em;
}
.subtitle { color: var(--color-muted); margin-bottom: 1.5rem; font-size: .95rem; }
.auth-footer { margin-top: 1.25rem; text-align: center; font-size: .9rem; color: var(--color-muted); }

/* ── Page header ────────────────────────────────────────────── */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.page-header h1 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* ── Utility ─────────────────────────────────────────────────── */
.text-center { text-align: center; }
.big-icon { font-size: 3rem; margin-bottom: 1rem; }
.muted { color: var(--color-muted); font-size: .95rem; margin-top: .5rem; }
.small { font-size: .85rem; }
.text-danger { color: var(--color-error); }

/* ── Search ─────────────────────────────────────────────────── */
.search-form { display: flex; gap: .75rem; margin-bottom: 1.5rem; }
.search-input { flex: 1; }

/* ── Badges & chips ─────────────────────────────────────────── */
.badge { font-size: .72rem; padding: .18rem .5rem; border-radius: var(--radius-full); font-weight: 700; letter-spacing: .02em; }
.badge-verified { background: var(--color-success-lt); color: var(--color-success); }

/* Badge semantic variants */
.badge--brand   { background: var(--color-brand-lt);   color: var(--color-brand); }
.badge--success { background: var(--color-success-lt); color: var(--color-success); }
.badge--error   { background: var(--color-error-lt);   color: var(--color-error); }
.badge--warning { background: var(--color-warning-lt); color: var(--color-warning); }
.badge--info    { background: var(--color-info-lt);    color: var(--color-info); }
.badge--neutral { background: var(--color-surface-container); color: var(--color-muted); }

/* Count badge */
.count-badge {
    background: var(--color-surface-container);
    color: var(--color-muted);
    font-size: .75rem;
    padding: .12rem .55rem;
    border-radius: var(--radius-full);
    font-weight: 600;
}

/* Status badges */
.status-badge { display: inline-block; font-size: .8rem; font-weight: 600; padding: .28rem .7rem; border-radius: var(--radius-full); }
.status-pending  { background: var(--color-warning-lt); color: var(--color-warning); }
.status-accepted { background: var(--color-success-lt); color: var(--color-success); }
.status-declined { background: var(--color-error-lt);   color: var(--color-error); }

/* Notification badge in nav */
.nav-notif { position: relative; display: inline-flex; align-items: center; gap: .2rem; }
.notif-badge {
    background: var(--color-error);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1;
    padding: .2rem .42rem;
    border-radius: var(--radius-full);
    min-width: 16px;
    text-align: center;
}

/* Filter chips */
.type-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.filter-chip {
    padding: .38rem .95rem;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--color-border);
    font-size: .85rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    transition: all var(--dur-fast) var(--ease);
    background: var(--color-surface);
}
.filter-chip:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
    background: var(--color-brand-tint);
    text-decoration: none;
}
.filter-chip--active {
    background: var(--color-brand);
    color: #fff;
    border-color: var(--color-brand);
    box-shadow: 0 1px 4px rgba(var(--primary-rgb),.25);
}

/* ── Avatar system ─────────────────────────────────────────── */
.user-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, var(--color-brand) 0%, #16261F 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.05rem; flex-shrink: 0;
    letter-spacing: -.5px;
}
.user-avatar.small { width: 32px; height: 32px; font-size: .88rem; }
.user-avatar.large { width: 68px; height: 68px; font-size: 1.6rem; }

/* ── Directory grid ─────────────────────────────────────────── */
.user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 1rem; }

.user-card {
    display: flex; gap: .875rem; align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-lg);
    padding: 1.1rem;
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow var(--dur) var(--ease),
                transform   var(--dur) var(--ease-exp),
                border-color var(--dur-fast);
    cursor: pointer;
}
.user-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--color-brand);
    text-decoration: none;
}
.user-name { font-weight: 700; font-size: .95rem; }
.user-meta { font-size: .83rem; color: var(--color-muted); }
.user-bio  { font-size: .83rem; color: var(--color-muted); margin-top: .2rem; }
.user-match-reason {
    font-size: .76rem;
    color: var(--color-accent, #C0492A);
    margin-top: .35rem;
    font-weight: 600;
    letter-spacing: .01em;
}
.user-info { min-width: 0; }

/* ── Profile card ───────────────────────────────────────────── */
.profile-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-xl);
    padding: 2.25rem;
    max-width: 640px;
    margin: 0 auto;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.profile-card > .profile-cover {
    margin: -2.25rem -2.25rem 1.5rem;
    width: calc(100% + 4.5rem);
    border-radius: 0;
}
.profile-header { display: flex; gap: 1.25rem; align-items: flex-start; margin-bottom: 1.25rem; }
.profile-header h1 { font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; margin-bottom: .2rem; letter-spacing: -.02em; }
.profile-bio { border-top: 1px solid var(--color-border-lt); padding-top: 1rem; margin-bottom: 1rem; }
.profile-actions { display: flex; flex-wrap: wrap; gap: .75rem; border-top: 1px solid var(--color-border-lt); padding-top: 1rem; }

/* Avatar preview in edit-profile form */
.avatar-preview { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; display: block; margin-bottom: .5rem; }

/* Intro send form on profile */
.intro-form { display: flex; flex-direction: column; gap: .5rem; width: 100%; }
.char-counter { font-size: .8rem; color: var(--color-muted); text-align: right; }

/* Safety actions */
.safety-actions { display: flex; gap: .5rem; align-items: center; margin-left: auto; padding-top: .25rem; }

/* ── Intros ─────────────────────────────────────────────────── */
.intros-section { margin-bottom: 2.5rem; }
.intros-section h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }

.intro-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-lg);
    padding: 1.1rem;
    margin-bottom: .75rem;
    transition: box-shadow var(--dur-fast) var(--ease);
}
.intro-card:hover { box-shadow: var(--shadow); }
.intro-card--accepted { border-left: 3px solid var(--color-success); }
.intro-card--declined { border-left: 3px solid var(--color-error); opacity: .7; }
.intro-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.intro-user { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--color-text); }
.intro-user:hover { text-decoration: underline; }
.intro-message {
    margin: .5rem 0;
    color: var(--color-muted);
    font-style: italic;
    font-size: .9rem;
    border-left: 3px solid rgba(var(--primary-rgb),.3);
    background: var(--color-brand-lt);
    padding: .45rem .75rem;
    border-radius: 0 var(--radius) var(--radius) 0;
}
.intro-actions { display: flex; gap: .5rem; margin-top: .75rem; }

/* ── Conversations (messages inbox) ─────────────────────────── */
.conversation-list {
    display: flex; flex-direction: column; gap: 0;
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.conversation-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .9rem 1.1rem;
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-lt);
    transition: background var(--dur-fast) var(--ease);
    position: relative;
}
.conversation-item:last-child { border-bottom: none; }
.conversation-item:hover { background: var(--color-surface-container); text-decoration: none; }
.conversation-item--unread { background: color-mix(in srgb, var(--color-info-lt) 60%, var(--color-surface)); }
.conversation-item--unread:hover { background: var(--color-info-lt); }
.conv-avatar { flex-shrink: 0; }
.conv-body { flex: 1; min-width: 0; }
.conv-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .2rem; }
.conv-name { font-weight: 700; font-size: .95rem; }
.conv-time { font-size: .8rem; color: var(--color-muted); }
.conv-preview { font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-muted); }
.conv-unread { flex-shrink: 0; margin-left: .5rem; }

/* ── Chat ────────────────────────────────────────────────────── */
.chat-container { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; height: calc(100vh - 140px); }
.chat-header {
    display: flex; align-items: center; gap: 1rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid var(--color-border-lt);
    margin-bottom: 1rem;
}
.chat-title { font-weight: 700; font-size: 1rem; }
.chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding-bottom: 1rem; }
.chat-empty { display: flex; align-items: center; justify-content: center; height: 100%; }

.message { display: flex; flex-direction: column; max-width: 68%; }
.message--mine   { align-self: flex-end; align-items: flex-end; }
.message--theirs { align-self: flex-start; align-items: flex-start; }

.message-bubble {
    padding: .65rem 1rem;
    border-radius: 20px;
    font-size: .93rem;
    line-height: 1.45;
    word-break: break-word;
}
.message--mine   .message-bubble {
    background: var(--color-brand);
    color: #fff;
    border-bottom-right-radius: 6px;
    box-shadow: 0 1px 4px rgba(var(--primary-rgb),.22);
}
.message--theirs .message-bubble {
    background: var(--color-surface-container);
    color: var(--color-text);
    border-bottom-left-radius: 6px;
    border: 1px solid var(--color-border-lt);
}
.message-time { font-size: .72rem; color: var(--color-muted); margin-top: .2rem; }

.chat-form {
    display: flex; gap: .75rem;
    padding-top: .875rem;
    border-top: 1px solid var(--color-border-lt);
}
.chat-input { flex: 1; resize: none; min-height: 44px; max-height: 160px; overflow-y: auto; border-radius: var(--radius-lg); }

/* ── Opportunities ──────────────────────────────────────────── */
.opp-list { display: flex; flex-direction: column; gap: 1rem; }
.opp-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-lg);
    padding: 1.35rem;
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease-exp);
}
.opp-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.opp-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.opp-type-badge { font-size: .73rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--color-brand); background: var(--color-brand-lt); padding: .2rem .55rem; border-radius: var(--radius-full); }
.opp-title { font-size: 1.05rem; font-weight: 700; margin-bottom: .4rem; }
.opp-description { font-size: .9rem; color: var(--color-muted); margin-bottom: .75rem; white-space: pre-wrap; }
.opp-footer { display: flex; align-items: center; justify-content: space-between; }

/* ── Empty state ────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--color-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-xl);
}
.empty-state p { font-size: .95rem; }

/* ── Pagination ─────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
.pagination-info { font-size: .9rem; color: var(--color-muted); }

/* ── Profile prompt ─────────────────────────────────────────── */
.profile-prompt {
    background: var(--color-info-lt);
    border-bottom: 1px solid color-mix(in srgb, var(--color-info) 30%, transparent);
    color: var(--color-info);
    padding: .65rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .875rem;
}
.profile-prompt p { margin: 0; }
.profile-prompt .btn-primary { background: var(--color-info); flex-shrink: 0; }

/* ── Consent banner ─────────────────────────────────────────── */
.consent-banner {
    background: var(--color-text);
    color: var(--color-surface);
    padding: .85rem 1.25rem;
    display: flex; align-items: center; justify-content: center;
    gap: 1rem; flex-wrap: wrap; font-size: .875rem;
}
.consent-banner a { color: color-mix(in srgb, var(--color-brand-lt) 80%, white); }
/* The banner fills with --color-text (dark in light mode, light in dark mode), so its
   buttons use --color-surface (the opposite) instead of a hardcoded #fff. */
.consent-banner .btn-primary { background: var(--color-surface); color: var(--color-brand-dk); flex-shrink: 0; }
.consent-banner .btn-primary:hover { background: color-mix(in srgb, var(--color-surface) 85%, var(--color-text)); }
.consent-banner__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.install-dismiss { font-size: .75rem; color: var(--color-muted); }
.consent-banner .btn-ghost { border-color: color-mix(in srgb, var(--color-surface) 50%, transparent) !important; color: var(--color-surface) !important; background: transparent !important; }
.consent-banner .btn-ghost:hover { background: color-mix(in srgb, var(--color-surface) 12%, transparent) !important; border-color: color-mix(in srgb, var(--color-surface) 80%, transparent) !important; }

/* ── Legal footer ───────────────────────────────────────────── */
.site-footer-legal {
    text-align: center;
    padding: 1.5rem;
    font-size: .8rem;
    color: var(--color-muted);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.5rem;
    border-top: 1px solid var(--color-border-lt);
    margin-top: 3rem;
}
.site-footer-legal a { color: var(--color-muted); }
/* On auth pages the footer sits where the body gradient has already faded to --color-bg;
   an explicit opaque fill makes that measurable without changing how it looks. */
.auth-layout .site-footer-legal { background-color: var(--color-bg); }
/* The sticky header's translucent blur over the auth page's dark gradient can't be
   contrast-measured; on auth pages use the solid surface colour (same look, no blur). */
html:root .auth-layout .site-header,
html:root[data-theme] .auth-layout .site-header {
    background-color: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.site-footer-legal a:hover { color: var(--color-text); }

/* ── Post action bar ─────────────────────────────────────────── */
.post-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-top: .5rem;
    flex-wrap: nowrap;   /* never wraps — overflow lives in ⋯ menu */
}
.post-action-form { display: inline-flex; }
.post-action-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    background: none; border: none; cursor: pointer;
    color: var(--color-muted);
    font-size: .85rem; font-weight: 500;
    padding: .4rem .55rem;
    border-radius: var(--radius-sm);
    min-height: 36px; min-width: 36px;
    transition: background var(--dur-fast), color var(--dur-fast);
    white-space: nowrap;
}
.post-action-btn:hover    { background: var(--color-brand-tint); color: var(--color-brand); }
.post-action-btn--active  { color: var(--color-brand); }
.post-action-btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.post-action-btn span     { font-size: .8rem; font-variant-numeric: tabular-nums; }
.post-action-reactions    { display: inline-flex; align-items: center; gap: .1rem; }
.post-reaction-btn {
    background: none; border: none; cursor: pointer;
    font-size: .85rem; padding: .3rem .35rem; border-radius: var(--radius-sm);
    min-height: 36px; transition: background var(--dur-fast), transform var(--dur-fast);
    display: inline-flex; align-items: center; gap: .15rem;
    color: var(--color-muted);
}
.post-reaction-btn span { font-size: .78rem; font-variant-numeric: tabular-nums; }
.post-reaction-btn:hover  { background: var(--color-brand-tint); transform: scale(1.1); }
.post-reaction-btn.post-action-btn--active { background: var(--color-brand-lt); }
.post-reaction-btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

/* Overflow menu */
.post-overflow { position: relative; }
.post-overflow-toggle { color: var(--color-muted); }
.post-overflow-menu {
    position: absolute; bottom: calc(100% + 4px); right: 0;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-md);
    min-width: 180px; z-index: 200; overflow: hidden;
}
@media (max-width: 480px) {
    .post-overflow-menu { right: auto; left: auto; bottom: calc(100% + 4px); }
}
.post-overflow-item {
    display: block; width: 100%; text-align: left;
    padding: .55rem .85rem; font-size: .85rem;
    color: var(--color-text); background: none; border: none; cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast);
    white-space: nowrap;
}
.post-overflow-item:hover { background: var(--color-brand-tint); color: var(--color-brand); }
.post-overflow-item--danger:hover { background: var(--color-error-lt); color: var(--color-error); }
.post-overflow-divider { height: 1px; background: var(--color-border-lt); margin: .25rem 0; }

/* ── Activity Feed ──────────────────────────────────────────── */
.feed-list {
    display: flex; flex-direction: column; gap: 0;
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.feed-item {
    display: flex; align-items: flex-start; gap: .875rem;
    padding: 1rem 1.1rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-lt);
    transition: background var(--dur-fast) var(--ease);
}
.feed-item:last-child { border-bottom: none; }
.feed-item:hover { background: var(--color-surface-container); }
.feed-icon {
    width: 38px; height: 38px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}
.feed-icon--intro  { background: var(--color-success-lt); }
.feed-icon--opp    { background: var(--color-brand-lt); }
.feed-icon--member { background: var(--color-warning-lt); }
.feed-body { flex: 1; min-width: 0; }
.feed-body p { margin: 0 0 .2rem; font-size: .9rem; }
.feed-subtitle { color: var(--color-muted); font-size: .83rem; }
.feed-actions { margin-top: .5rem; }
.feed-time { font-size: .78rem; color: var(--color-muted); white-space: nowrap; flex-shrink: 0; }

/* ── Events Calendar ────────────────────────────────────────── */
.events-layout { display: grid; grid-template-columns: 288px 1fr; gap: 2rem; align-items: start; }
@media (max-width: 680px) { .events-layout { grid-template-columns: 1fr; } }

.cal-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-lg);
    padding: 1.1rem;
    position: sticky;
    top: 72px;
    box-shadow: var(--shadow-sm);
}
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.cal-month-label { font-weight: 700; font-size: .95rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dayname {
    text-align: center; font-size: .68rem; color: var(--color-muted);
    font-weight: 700; padding: .2rem 0; text-transform: uppercase; letter-spacing: .05em;
}
.cal-cell {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem;
    border-radius: 50%;
    cursor: default;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.cal-blank { visibility: hidden; }
.cal-today { background: var(--color-surface-container); font-weight: 800; }
.cal-has-events {
    background: var(--color-brand);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(var(--primary-rgb),.25);
}
.cal-has-events:hover { background: var(--color-brand-dk); transform: scale(1.1); }
.cal-selected { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.cal-legend { margin-top: .75rem; font-size: .75rem; color: var(--color-muted); display: flex; align-items: center; gap: .4rem; }
.cal-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-brand); display: inline-block; }
.cal-day-events { margin-bottom: 1.5rem; }
.events-section-title { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; }

/* ── Groups ─────────────────────────────────────────────────── */
.group-list {
    display: flex; flex-direction: column; gap: 0;
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.group-card {
    display: flex; align-items: center; gap: .875rem;
    padding: 1rem 1.1rem;
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-lt);
    transition: background var(--dur-fast) var(--ease);
}
.group-card:last-child { border-bottom: none; }
.group-card:hover { background: var(--color-surface-container); text-decoration: none; }

/* Squircle group avatar — M3 style */
.group-avatar {
    width: 46px; height: 46px;
    border-radius: var(--radius-md);   /* squircle */
    background: linear-gradient(135deg, var(--color-brand) 0%, #16261F 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.1rem; flex-shrink: 0;
}
.group-info { flex: 1; min-width: 0; }
.group-name { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: .4rem; }
.group-desc { font-size: .83rem; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-meta { font-size: .78rem; color: var(--color-muted); margin-top: .15rem; }
.group-date { flex-shrink: 0; }

/* Group invite checklist */
.invite-list {
    display: flex; flex-direction: column; gap: .5rem;
    max-height: 264px; overflow-y: auto;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: .6rem;
    background: var(--color-surface);
}
.invite-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .45rem .6rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--dur-fast);
}
.invite-item:hover { background: var(--color-surface-container); }
.invite-check { width: 16px; height: 16px; cursor: pointer; accent-color: var(--color-brand); flex-shrink: 0; }
.invite-user { display: flex; align-items: center; gap: .6rem; }

/* ── Admin Analytics ────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-lg);
    padding: 1.35rem 1.1rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease-exp);
}
.stat-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.stat-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--color-muted); margin-bottom: .35rem; }
.stat-value { font-size: 2.4rem; font-weight: 800; line-height: 1.1; margin-bottom: .2rem; letter-spacing: -1px; color: var(--color-brand); }
.stat-sub { font-size: .78rem; color: var(--color-muted); }

.admin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (max-width: 640px) { .admin-two-col { grid-template-columns: 1fr; } }

.admin-section-title { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; letter-spacing: -.1px; }

.growth-bars { display: flex; align-items: flex-end; gap: 4px; height: 100px; padding: .5rem 0 0; }
.growth-bar-group { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.growth-bar { background: var(--color-brand); border-radius: 4px 4px 0 0; width: 100%; min-height: 2px; transition: height var(--dur-slow) var(--ease-exp); }
.growth-label { font-size: .64rem; color: var(--color-muted); }

.domain-bars { display: flex; flex-direction: column; gap: .55rem; }
.domain-bar-row { display: flex; align-items: center; gap: .75rem; }
.domain-label { font-size: .82rem; width: 110px; flex-shrink: 0; font-weight: 500; }
.domain-bar-track { flex: 1; background: var(--color-surface-container); border-radius: var(--radius-full); height: 12px; overflow: hidden; }
.domain-bar-fill { background: linear-gradient(90deg, var(--color-brand), #16261F); height: 100%; border-radius: var(--radius-full); transition: width .4s var(--ease-exp); }
.domain-count { font-size: .82rem; color: var(--color-muted); width: 32px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }

.admin-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.admin-table th {
    border-bottom: 2px solid var(--color-border);
    text-align: left; padding: .55rem .8rem;
    font-size: .75rem; color: var(--color-muted);
    font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
.admin-table td { border-bottom: 1px solid var(--color-border-lt); padding: .6rem .8rem; vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--color-surface-container); }

/* ── Landing page ───────────────────────────────────────────── */
.landing-hero {
    text-align: center;
    padding: 5rem 1rem 3.5rem;
    max-width: 720px;
    margin: 0 auto;
}
.hero-eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-brand);
    background: var(--color-brand-lt);
    padding: .3rem .85rem;
    border-radius: var(--radius-full);
    margin-bottom: 1.5rem;
}
.hero-headline {
    font-size: clamp(2.2rem, 6vw, 3.4rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.04em;
    margin-bottom: 1.25rem;
    color: var(--color-text);
    text-wrap: balance;
}
.hero-accent {
    background: linear-gradient(135deg, var(--color-brand) 0%, #C88A3A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-sub {
    font-size: 1.1rem;
    color: var(--color-muted);
    max-width: 540px;
    margin: 0 auto 2rem;
    line-height: 1.65;
}
.hero-ctas {
    display: flex;
    gap: .875rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: .875rem;
}
.btn-hero { padding: .75rem 1.75rem; font-size: 1rem; }
.hero-fine {
    font-size: .82rem;
    color: var(--color-muted);
    margin: 0;
}

.proof-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    padding: 1rem;
    margin: 0 auto 3.5rem;
    max-width: 640px;
    font-size: .83rem;
    color: var(--color-muted);
    border-top: 1px solid var(--color-border-lt);
    border-bottom: 1px solid var(--color-border-lt);
}
.proof-item { font-weight: 600; }
.proof-sep { opacity: .4; }

.landing-section {
    max-width: 900px;
    margin: 0 auto 4rem;
    padding: 0 1rem;
}
.landing-section-title {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.03em;
    margin-bottom: 1.75rem;
    text-align: center;
    color: var(--color-text);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}
.step-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-xl);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease-exp);
}
.step-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.step-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--color-brand);
    color: #fff;
    font-weight: 800;
    font-size: .95rem;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb),.25);
}
.step-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: .45rem; }
.step-card p  { font-size: .88rem; color: var(--color-muted); line-height: 1.55; margin: 0; }

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.feature-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.35rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease-exp);
}
.feature-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.feature-icon {
    font-size: 1.6rem;
    margin-bottom: .75rem;
    display: block;
}
.feature-card h3 { font-size: .95rem; font-weight: 700; margin-bottom: .35rem; }
.feature-card p  { font-size: .85rem; color: var(--color-muted); line-height: 1.55; margin: 0; }

.landing-cta-section {
    text-align: center;
    background: linear-gradient(135deg, var(--color-brand-lt) 0%, color-mix(in srgb, var(--color-brand-lt) 60%, var(--color-surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--color-brand) 20%, transparent);
    border-radius: var(--radius-xl);
    padding: 3.5rem 2rem;
    max-width: 640px;
    margin: 0 auto 3rem;
    box-shadow: var(--shadow);
}
.landing-cta-section h2 {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -.03em;
    margin-bottom: .5rem;
    color: var(--color-text);
}
.landing-cta-section p {
    color: var(--color-muted);
    margin-bottom: 1.75rem;
    font-size: .95rem;
}

@media (max-width: 640px) {
    .landing-hero { padding: 3rem 1rem 2rem; }
    .hero-ctas { flex-direction: column; align-items: center; }
    .btn-hero { width: 100%; max-width: 320px; }
    .steps-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .landing-cta-section { padding: 2.5rem 1.25rem; }
    .landing-cta-section h2 { font-size: 1.4rem; }
}

/* ── Micro-animations ───────────────────────────────────────── */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.auth-card,
.profile-card,
.user-card,
.opp-card,
.intro-card,
.stat-card {
    animation: fadeSlideUp var(--dur-slow) var(--ease-exp) both;
}

/* Stagger cards in grid */
.user-grid .user-card:nth-child(1)  { animation-delay:  20ms; }
.user-grid .user-card:nth-child(2)  { animation-delay:  55ms; }
.user-grid .user-card:nth-child(3)  { animation-delay:  90ms; }
.user-grid .user-card:nth-child(4)  { animation-delay: 125ms; }
.user-grid .user-card:nth-child(5)  { animation-delay: 160ms; }
.user-grid .user-card:nth-child(6)  { animation-delay: 195ms; }
.user-grid .user-card:nth-child(n+7){ animation-delay: 220ms; }

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ── Tablet responsive (641px – 959px) ─────────────────────── */
@media (min-width: 641px) and (max-width: 959px) {
    .site-nav a, .site-nav .btn-link { font-size: .82rem; padding: .35rem .55rem; }
    .site-nav .btn.btn-primary { padding: .35rem .75rem; font-size: .82rem; }
    .logo { font-size: 1.05rem; }
    .nav-search-wrap { max-width: 180px; }
    .main-content { padding: 1.5rem 1.25rem; }
    .user-grid { grid-template-columns: repeat(2, 1fr); }
    .form-row { grid-template-columns: 1fr; }
}

/* ── Mobile responsive ──────────────────────────────────────── */
@media (max-width: 640px) {
    .nav-toggle { display: flex; align-items: center; justify-content: center; }
    .theme-toggle { width: 44px; height: 44px; font-size: 1rem; }

    .site-header { position: sticky; top: 0; }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--color-surface);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--color-border-lt);
        box-shadow: var(--shadow-md);
        padding: .75rem 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: .2rem;
        z-index: 99;
    }
    .site-nav.nav-open { display: flex; }
    .site-nav a, .site-nav .btn-link { width: 100%; padding: .6rem .875rem; }

    .container     { padding: 0 1rem; }
    .main-content  { padding: 1.25rem 1rem; }
    .user-grid     { grid-template-columns: 1fr; }
    .auth-card     { margin: 1rem auto; padding: 1.75rem 1.25rem; border-radius: var(--radius-lg); }
    .form-row      { grid-template-columns: 1fr; }
    .page-header   { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .profile-card  { padding: 1.25rem 1rem; border-radius: var(--radius-lg); }
    .profile-actions { flex-direction: column; }
    .profile-header  { flex-direction: column; gap: .75rem; }
    .safety-actions  { margin-left: 0; }
    .type-filters  { gap: .35rem; }
    .opp-footer    { flex-direction: column; gap: .5rem; align-items: flex-start; }
    .chat-container { height: calc(100vh - 110px); }
    .message       { max-width: 84%; }
    .intro-card-header { flex-direction: column; align-items: flex-start; gap: .4rem; }
    .search-form   { flex-direction: column; }
    .admin-two-col { grid-template-columns: 1fr; }
}

/* ── Onboarding modal ────────────────────────────────────────── */
.onboarding-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 1rem;
}
.onboarding-modal {
  background: var(--color-surface); border-radius: var(--radius-lg);
  padding: 2rem; max-width: 480px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.onboarding-modal h2 { margin: 0 0 .75rem; font-size: 1.4rem; }
.onboarding-steps { padding-left: 1.25rem; margin: 1rem 0 0; }
.onboarding-steps li { margin-bottom: .75rem; line-height: 1.5; }

/* ── Notifications list ──────────────────────────────────────── */
.notif-list { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.notif-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 1.25rem; border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--color-border);
  text-decoration: none; color: inherit; transition: background .15s;
}
.notif-item:hover { background: var(--color-surface-container); }
.notif-item--unread {
    background: var(--color-brand-lt);
    border-color: rgba(var(--primary-rgb),.25);
}
.notif-item--unread:hover { background: color-mix(in srgb, var(--color-brand-lt) 80%, var(--color-surface-container)); }
.notif-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; position: relative; width: 2rem; text-align: center; }
.notif-unread-dot {
    position: absolute; top: 0; right: 0;
    width: .5rem; height: .5rem;
    border-radius: 50%; background: var(--color-brand);
}
.notif-content { flex: 1; min-width: 0; }
.notif-title { margin: 0 0 .2rem; font-weight: 600; font-size: .95rem; }
.notif-body { margin: 0 0 .25rem; font-size: .875rem; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-time { margin: 0; font-size: .8rem; color: var(--color-muted); }

/* ── Settings page ───────────────────────────────────────────── */
.profile-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem; margin: 1.5rem 0;
}
.profile-stat {
  background: var(--color-surface-container); border-radius: var(--radius-md);
  padding: 1rem; text-align: center;
}
.profile-stat-value { font-size: 1.75rem; font-weight: 700; margin: 0; }
.profile-stat-label { font-size: .8rem; color: var(--color-muted); margin: .2rem 0 0; }

/* ============================================================
   FEATURE EXPANSION — 300 new features (Migration 014)
   ============================================================ */

/* ── Toast Notifications ────────────────────────────────────── */
.toast-container {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
    display: flex; flex-direction: column; gap: .5rem; pointer-events: none;
}
@media (max-width: 640px) {
    .toast-container, #toast-container {
        bottom: calc(4.5rem + env(safe-area-inset-bottom));
        right: .75rem; left: .75rem;
        align-items: stretch;
    }
    .toast { max-width: 100%; min-width: 0; }
}
.toast {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: .75rem 1.1rem;
    box-shadow: var(--shadow-lg); font-size: .9rem; font-weight: 500;
    pointer-events: all; min-width: 240px; max-width: 360px;
    display: flex; align-items: center; gap: .6rem;
    animation: toastIn var(--dur-slow) var(--ease-exp);
}
.toast--success { border-left: 3px solid var(--color-success); }
.toast--error   { border-left: 3px solid var(--color-error); }
.toast--info    { border-left: 3px solid var(--color-info); }
.toast--warning { border-left: 3px solid var(--color-warning); }
@keyframes toastIn {
    from { opacity: 0; transform: translateY(1rem) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Command Palette ────────────────────────────────────────── */
.cmd-palette-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: max(2rem, 8vh);
}
@media (max-width: 640px) {
    .cmd-palette-overlay { padding-top: max(1rem, env(safe-area-inset-top)); align-items: flex-end; }
    .cmd-palette { width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 90dvh; }
    .cmd-results { max-height: calc(90dvh - 100px); }
}
.cmd-palette {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
    width: min(600px, 92vw); overflow: hidden;
}
.cmd-input {
    width: 100%; border: none; outline: none; padding: 1rem 1.25rem;
    font-size: 1.1rem; background: transparent; color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}
.cmd-results { max-height: 400px; overflow-y: auto; }
.cmd-result-item {
    display: flex; align-items: center; gap: .75rem; padding: .75rem 1.25rem;
    cursor: pointer; transition: background var(--dur-fast);
    font-size: .9rem; color: var(--color-text);
}
.cmd-result-item:hover, .cmd-result-item.selected {
    background: var(--color-brand-tint); color: var(--color-brand);
    text-decoration: none;
}
.cmd-result-icon { width: 2rem; text-align: center; font-size: 1rem; flex-shrink: 0; }
.cmd-group-label {
    font-size: .75rem; font-weight: 600; color: var(--color-muted);
    padding: .4rem 1.25rem; text-transform: uppercase; letter-spacing: .05em;
    background: var(--color-surface-container);
}
.cmd-shortcut {
    margin-left: auto; font-size: .75rem; color: var(--color-muted);
    background: var(--color-surface-cont-high); padding: .1rem .4rem;
    border-radius: var(--radius-xs);
}

/* ── Skeleton Loading ────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg,
        var(--color-surface-container) 25%,
        var(--color-surface-cont-high) 50%,
        var(--color-surface-container) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-line { height: 1em; margin: .4rem 0; }
.skeleton-circle { border-radius: 50%; }
.skeleton-card { border-radius: var(--radius); padding: 1rem; }

/* ── Hover Cards ────────────────────────────────────────────── */
.hover-card {
    position: absolute; z-index: 500; min-width: 240px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: 1rem; pointer-events: none;
    animation: fadeIn var(--dur-fast) var(--ease);
}
.hover-card-avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; margin-bottom: .5rem; }
.hover-card-name { font-weight: 700; font-size: 1rem; margin: 0 0 .2rem; }
.hover-card-headline { font-size: .85rem; color: var(--color-muted); margin: 0; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Empty States (enhanced) ────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1.5rem; }
.empty-state-icon {
    font-size: 3.5rem; display: block; margin-bottom: .75rem;
    filter: grayscale(.3);
}
.empty-state h3 { margin-bottom: .4rem; }
.empty-state p { color: var(--color-muted); }

/* ── Availability Status Badges ─────────────────────────────── */
.avail-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .75rem; font-weight: 600; padding: .2rem .6rem;
    border-radius: var(--radius-full);
}
.avail-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.avail-chip--available { background: var(--color-success-lt); color: var(--color-success); }
.avail-chip--available::before { background: var(--color-success); }
.avail-chip--open_to_work { background: var(--color-info-lt); color: var(--color-info); }
.avail-chip--open_to_work::before { background: var(--color-info); }
.avail-chip--open_to_mentoring { background: var(--color-brand-lt); color: var(--color-brand); }
.avail-chip--open_to_mentoring::before { background: var(--color-brand); }
.avail-chip--busy { background: var(--color-warning-lt); color: var(--color-warning); }
.avail-chip--busy::before { background: var(--color-warning); }
.avail-chip--away { background: var(--color-surface-cont-high); color: var(--color-muted); }
.avail-chip--away::before { background: var(--color-muted); }

/* ── Skill Chips ────────────────────────────────────────────── */
.skill-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.skill-chip {
    font-size: .8rem; font-weight: 500; padding: .25rem .7rem;
    background: var(--color-surface-container); border: 1px solid var(--color-border);
    border-radius: var(--radius-full); color: var(--color-text);
    transition: background var(--dur-fast), border-color var(--dur-fast);
    cursor: default;
}
.skill-chip:hover { border-color: var(--color-brand); color: var(--color-brand); }
.skill-chip-mini { font-size: .72rem; padding: .15rem .5rem; background: var(--color-brand-lt); color: var(--color-brand); border-radius: var(--radius-full); }
.skill-chips-mini { display: flex; flex-wrap: wrap; gap: .3rem; }

/* ── Hashtag Cloud ──────────────────────────────────────────── */
.hashtag-cloud {
    display: flex; flex-wrap: wrap; gap: .5rem; padding: 1.5rem 0;
    align-items: center;
}
.hashtag-cloud-item {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .8rem; border-radius: var(--radius-full);
    background: var(--color-surface-container); color: var(--color-brand);
    font-weight: 600; transition: background var(--dur-fast), transform var(--dur-fast);
}
.hashtag-cloud-item:hover {
    background: var(--color-brand-lt); transform: scale(1.04);
    text-decoration: none;
}
.hashtag-count { font-size: .72rem; color: var(--color-muted); font-weight: 400; }
.hashtag-hero-badge {
    font-size: 1.5rem; font-weight: 800; padding: .4rem 1rem;
    background: var(--color-brand-lt); color: var(--color-brand);
    border-radius: var(--radius-lg);
}

/* ── Search Page ────────────────────────────────────────────── */
.search-hero { margin-bottom: 1.5rem; }
.search-bar-form { margin-top: 1rem; }
.search-input-wrap {
    display: flex; align-items: center; gap: .5rem;
    background: var(--color-surface); border: 1.5px solid var(--color-border);
    border-radius: var(--radius-full); padding: .4rem .75rem .4rem 1rem;
    box-shadow: var(--shadow); transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
    position: relative;
}
.search-input-wrap:focus-within {
    border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-tint);
}
.search-icon { color: var(--color-muted); font-size: 1rem; flex-shrink: 0; }
.search-input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 1rem; color: var(--color-text);
}
.search-kind-tabs {
    display: flex; gap: .25rem; margin-top: .75rem; flex-wrap: wrap;
}
.search-kind-tab {
    font-size: .83rem; padding: .3rem .8rem; border-radius: var(--radius-full);
    color: var(--color-muted); background: transparent; border: 1px solid var(--color-border);
    transition: all var(--dur-fast);
}
.search-kind-tab:hover, .search-kind-tab.active {
    background: var(--color-brand-lt); color: var(--color-brand);
    border-color: var(--color-brand); text-decoration: none;
}
.search-section { margin-bottom: 2rem; }
.search-section-title { font-size: 1.1rem; font-weight: 700; margin-bottom: .75rem; border-bottom: 1px solid var(--color-border); padding-bottom: .4rem; }
.search-grid--users { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.search-user-card {
    display: flex; align-items: center; gap: .75rem; padding: .75rem;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); text-decoration: none; color: var(--color-text);
    transition: box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.search-user-card:hover { box-shadow: var(--shadow); border-color: var(--color-brand-lt); text-decoration: none; }
.search-avatar, .search-avatar--placeholder {
    width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.search-avatar--placeholder {
    background: var(--color-brand); color: #fff; display: flex;
    align-items: center; justify-content: center; font-weight: 700;
}
.search-user-headline { font-size: .82rem; color: var(--color-muted); margin: .1rem 0 0; }
.search-opp-card, .search-group-card, .search-event-card, .search-post-card {
    display: block; padding: .75rem 1rem; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius);
    text-decoration: none; color: var(--color-text); margin-bottom: .5rem;
    transition: box-shadow var(--dur-fast);
}
.search-opp-card:hover, .search-group-card:hover, .search-event-card:hover { box-shadow: var(--shadow); text-decoration: none; }
.badge-remote, .badge-virtual, .badge-ai, .badge-joined {
    font-size: .72rem; padding: .15rem .5rem; background: var(--color-info-lt);
    color: var(--color-info); border-radius: var(--radius-full); font-weight: 600;
}
.badge-inperson, .badge-completed {
    font-size: .72rem; padding: .15rem .5rem; background: var(--color-success-lt);
    color: var(--color-success); border-radius: var(--radius-full); font-weight: 600;
}
.badge-category, .badge-xp {
    font-size: .72rem; padding: .15rem .5rem; background: var(--color-brand-lt);
    color: var(--color-brand); border-radius: var(--radius-full); font-weight: 600;
}
.badge-featured {
    font-size: .72rem; padding: .15rem .5rem; background: var(--color-warning-lt);
    color: var(--color-warning); border-radius: var(--radius-full); font-weight: 600;
}
.badge-error-soft {
    font-size: .72rem; padding: .15rem .5rem; background: var(--color-error-lt);
    color: var(--color-error); border-radius: var(--radius-full); font-weight: 600;
}

/* Callout / alert blocks */
.callout {
    padding: .75rem 1rem; border-radius: var(--radius);
    font-size: .875rem; margin-bottom: 1.25rem;
}
.callout-info    { background: var(--color-info-lt);    border: 1px solid var(--color-info-lt); }
.callout-success { background: var(--color-success-lt); border: 1px solid var(--color-success-lt); }
.callout-warning { background: var(--color-warning-lt); border: 1px solid var(--color-warning-lt); }
.callout-ai {
    background: var(--color-brand-lt); border-left: 3px solid var(--color-brand);
    border-radius: 0 var(--radius) var(--radius) 0; font-size: .82rem; padding: .5rem .75rem;
}
.callout-note {
    background: var(--color-success-lt); border-left: 3px solid var(--color-success);
    border-radius: 0 var(--radius) var(--radius) 0; font-size: .82rem; padding: .5rem .75rem;
}

/* Success action button */
.btn-success { background: var(--color-success); color: #fff; border: none; }
.btn-success:hover { opacity: .88; }

/* Search autocomplete dropdown */
.search-suggest-box {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    z-index: 500; display: none; overflow: hidden;
}
.suggest-item {
    display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem;
    font-size: .9rem; color: var(--color-text); text-decoration: none;
    transition: background var(--dur-fast);
}
.suggest-item:hover { background: var(--color-brand-tint); color: var(--color-brand); text-decoration: none; }
.suggest-avatar {
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: var(--color-brand); color: #fff; display: flex;
    align-items: center; justify-content: center; font-size: .75rem; font-weight: 700;
    flex-shrink: 0;
}
.suggest-icon { width: 1.6rem; text-align: center; font-weight: 700; color: var(--color-brand); }

/* ── Analytics ──────────────────────────────────────────────── */
.analytics-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem; margin-top: 1rem;
}
.analytics-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}
.analytics-card h3 { margin: 0 0 .75rem; font-size: 1rem; }
.analytics-card--wide { grid-column: 1 / -1; }
.stat-row-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px,1fr)); gap: .5rem; }
.stat-tile {
    text-align: center; padding: .75rem .5rem;
    background: var(--color-surface-container); border-radius: var(--radius-sm);
}
.stat-tile-value { font-size: 1.5rem; font-weight: 800; color: var(--color-brand); margin: 0; }
.stat-tile-label { font-size: .72rem; color: var(--color-muted); margin: .2rem 0 0; }

/* Level display */
.level-display { display: flex; align-items: center; gap: .75rem; }
.level-icon { font-size: 2rem; }
.level-name { font-weight: 700; font-size: 1.05rem; }
.level-xp { font-size: .85rem; color: var(--color-muted); }
.xp-progress-bar {
    height: 8px; background: var(--color-surface-cont-high); border-radius: var(--radius-full);
    overflow: hidden;
}
.xp-progress-fill {
    height: 100%; background: linear-gradient(90deg, var(--color-brand), #16261F);
    border-radius: var(--radius-full); transition: width .6s var(--ease-exp);
}

/* Bar chart (pure CSS/HTML) */
.bar-chart {
    display: flex; align-items: flex-end; gap: 4px; height: 120px;
    padding: .5rem 0;
}
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem; height: 100%; justify-content: flex-end; }
.bar-fill {
    width: 100%; min-height: 4px;
    background: linear-gradient(to top, var(--color-brand), #16261F);
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    transition: height .4s var(--ease-exp);
}
.bar-label { font-size: .65rem; color: var(--color-muted); white-space: nowrap; }

/* Domain breakdown */
.domain-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.domain-label { width: 90px; font-size: .82rem; flex-shrink: 0; }
.domain-bar-wrap { flex: 1; height: 8px; background: var(--color-surface-cont-high); border-radius: var(--radius-full); overflow: hidden; }
.domain-bar-fill { height: 100%; background: var(--color-brand); border-radius: var(--radius-full); transition: width .5s var(--ease-exp); }
.domain-count { width: 28px; font-size: .8rem; text-align: right; color: var(--color-muted); flex-shrink: 0; }

/* Analytics table */
.analytics-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.analytics-table th { text-align: left; padding: .4rem .5rem; font-size: .78rem; color: var(--color-muted); border-bottom: 1px solid var(--color-border); }
.analytics-table td { padding: .5rem; border-bottom: 1px solid var(--color-border-lt); }

/* ── Streak ──────────────────────────────────────────────────── */
.streak-hero { text-align: center; padding: 1.5rem 0; }
.streak-big { display: flex; align-items: baseline; justify-content: center; gap: .4rem; }
.streak-flame { font-size: 3.5rem; }
.streak-number { font-size: 5rem; font-weight: 900; color: var(--color-brand); line-height: 1; }
.streak-unit { font-size: 1.2rem; color: var(--color-muted); align-self: center; }
.streak-display { display: flex; align-items: center; gap: .5rem; }
.streak-fire { font-size: 2rem; }
.streak-count { font-size: 1.5rem; font-weight: 700; }
.streak-ways-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1rem; }
.streak-ways-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem; }
.streak-ways-card h3 { margin: 0 0 .75rem; }
.xp-table { width: 100%; border-collapse: collapse; }
.xp-table tr { border-bottom: 1px solid var(--color-border-lt); }
.xp-table td { padding: .4rem .25rem; font-size: .875rem; }
.xp-table td:last-child { text-align: right; font-weight: 600; }
.xp-history-list { display: flex; flex-direction: column; gap: .25rem; }
.xp-history-item {
    display: flex; align-items: center; gap: .5rem; padding: .4rem .75rem;
    background: var(--color-surface-container); border-radius: var(--radius-sm);
}
.xp-reason { flex: 1; font-size: .875rem; }
.xp-amount { font-weight: 700; flex-shrink: 0; }
.xp-date { flex-shrink: 0; }

/* ── Leaderboard rows ───────────────────────────────────────── */
.leaderboard-row { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--color-border-lt); }
.leaderboard-avatar, .leaderboard-avatar--placeholder { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.leaderboard-avatar--placeholder { background: var(--color-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .75rem; }
.leaderboard-name { flex: 1; font-size: .875rem; font-weight: 500; }
.leaderboard-streak { font-size: .85rem; font-weight: 600; color: var(--color-muted); }
.leaderboard-rank { font-size: .8rem; color: var(--color-muted); width: 1.5rem; flex-shrink: 0; text-align: center; }

/* ── Hall of Fame ───────────────────────────────────────────── */
.hof-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 1.5rem; }
.hof-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem; }
.hof-section h2 { margin: 0 0 .4rem; font-size: 1.1rem; }
.hof-row { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--color-border-lt); }
.hof-avatar, .hof-avatar--placeholder { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hof-avatar--placeholder { background: var(--color-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.hof-info { flex: 1; min-width: 0; }
.hof-name { font-weight: 600; font-size: .9rem; display: block; }
.hof-rank { font-size: .9rem; font-weight: 800; color: var(--color-muted); width: 1.5rem; flex-shrink: 0; }
.hof-stat { font-size: .8rem; font-weight: 600; color: var(--color-brand); flex-shrink: 0; }

/* ── Q&A Board ──────────────────────────────────────────────── */
.qa-list { display: flex; flex-direction: column; gap: .75rem; }
.qa-question-card {
    display: flex; gap: 1rem; padding: 1rem;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); transition: box-shadow var(--dur-fast);
}
.qa-question-card:hover { box-shadow: var(--shadow); }
.qa-votes { display: flex; flex-direction: column; align-items: center; min-width: 44px; }
.qa-vote-count { font-size: 1.1rem; font-weight: 700; }
.qa-vote-label { font-size: .68rem; color: var(--color-muted); }
.qa-meta-badges { display: flex; flex-direction: column; align-items: center; min-width: 60px; }
.qa-answered-badge { font-size: .72rem; font-weight: 700; color: var(--color-success); background: var(--color-success-lt); padding: .15rem .4rem; border-radius: var(--radius-full); }
.qa-unanswered-badge { font-size: .72rem; color: var(--color-muted); background: var(--color-surface-container); padding: .15rem .4rem; border-radius: var(--radius-full); }
.qa-body { flex: 1; min-width: 0; }
.qa-title { font-size: 1rem; font-weight: 600; color: var(--color-text); }
.qa-title:hover { color: var(--color-brand); text-decoration: none; }
.qa-excerpt { margin: .3rem 0; font-size: .875rem; }
.qa-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.qa-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.qa-tag {
    font-size: .72rem; padding: .15rem .5rem; background: var(--color-brand-lt);
    color: var(--color-brand); border-radius: var(--radius-full); text-decoration: none;
}
.qa-tag:hover { opacity: .8; text-decoration: none; }
/* Q&A Detail */
.qa-question-detail { display: flex; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); }
.qa-question-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 .5rem; }
.qa-question-body { font-size: .95rem; white-space: pre-wrap; margin: .5rem 0; }
.qa-vote-col { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 44px; }
.qa-vote-btn { background: none; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); width: 36px; height: 28px; cursor: pointer; font-size: .9rem; display: flex; align-items: center; justify-content: center; transition: all var(--dur-fast); }
.qa-vote-btn:hover { border-color: var(--color-brand); color: var(--color-brand); background: var(--color-brand-tint); }
.qa-vote-up:hover { border-color: var(--color-success); color: var(--color-success); background: var(--color-success-lt); }
.qa-vote-down:hover { border-color: var(--color-error); color: var(--color-error); background: var(--color-error-lt); }
.qa-accepted-mark { font-size: 1.2rem; color: var(--color-success); font-weight: 700; }
.qa-content { flex: 1; min-width: 0; }
.qa-answers-section { margin-bottom: 2rem; }
.qa-answers-section h2 { margin-bottom: 1rem; }
.qa-answer {
    display: flex; gap: 1rem; padding: 1rem;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); margin-bottom: .75rem;
}
.qa-answer--accepted { border-color: var(--color-success); background: color-mix(in srgb, var(--color-surface) 95%, var(--color-success)); }
.qa-answer-body { font-size: .95rem; white-space: pre-wrap; }
.qa-meta { font-size: .8rem; }
.qa-post-answer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.qa-post-answer h3 { margin-bottom: .75rem; }

/* ── Resource Library ────────────────────────────────────────── */
.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1rem; }
.resource-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: 1rem;
    display: flex; flex-direction: column; gap: .5rem;
    transition: box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.resource-card:hover { box-shadow: var(--shadow); border-color: var(--color-brand-lt); }
.resource-category-chip {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--color-brand); background: var(--color-brand-lt);
    padding: .15rem .5rem; border-radius: var(--radius-full); align-self: flex-start;
}
.resource-title { font-size: .95rem; font-weight: 600; color: var(--color-text); text-decoration: none; }
.resource-title:hover { color: var(--color-brand); text-decoration: underline; }
.resource-desc { margin: 0; }
.resource-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.resource-tag { font-size: .72rem; color: var(--color-muted); }
.resource-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .3rem; margin-top: auto; }
.resource-upvote {
    font-size: .85rem; font-weight: 600; color: var(--color-muted);
    transition: color var(--dur-fast);
}
.resource-upvote:hover, .resource-upvote.upvoted { color: var(--color-brand); }

/* ── Challenges ─────────────────────────────────────────────── */
.challenge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 1rem; }
.challenge-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: 1.25rem; position: relative;
    overflow: hidden;
    transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.challenge-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.challenge-card--joined { border-color: var(--color-brand); }
.challenge-card--complete { border-color: var(--color-success); }
.challenge-xp-badge {
    position: absolute; top: .75rem; right: .75rem;
    font-size: .78rem; font-weight: 700; padding: .2rem .6rem;
    background: var(--color-brand); color: #fff; border-radius: var(--radius-full);
}
.challenge-title { font-size: 1rem; font-weight: 700; margin: 0 0 .4rem; padding-right: 3.5rem; }
.challenge-desc { font-size: .875rem; color: var(--color-muted); margin: 0 0 .4rem; }
.challenge-deadline { margin: 0; }
.challenge-joined-badge {
    display: inline-block; margin-top: .5rem; font-size: .8rem; font-weight: 700;
    color: var(--color-brand); background: var(--color-brand-lt);
    padding: .2rem .6rem; border-radius: var(--radius-full);
}
.challenge-complete-badge {
    display: inline-block; margin-top: .5rem; font-size: .8rem; font-weight: 700;
    color: var(--color-success); background: var(--color-success-lt);
    padding: .2rem .6rem; border-radius: var(--radius-full);
}
.challenge-in-progress { font-size: .8rem; color: var(--color-muted); margin-top: .4rem; }

/* ── Community Polls ────────────────────────────────────────── */
.polls-list { display: flex; flex-direction: column; gap: 1rem; }
.poll-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem; }
.poll-question { font-size: 1.05rem; font-weight: 700; margin: 0 0 .4rem; }
.poll-results { margin-top: .75rem; display: flex; flex-direction: column; gap: .4rem; }
.poll-option-result { display: flex; align-items: center; gap: .6rem; }
.poll-option-result--selected .poll-option-label { font-weight: 700; color: var(--color-brand); }
.poll-option-label { width: 140px; flex-shrink: 0; font-size: .875rem; }
.poll-bar-wrap { flex: 1; height: 10px; background: var(--color-surface-cont-high); border-radius: var(--radius-full); overflow: hidden; }
.poll-bar-fill { height: 100%; background: var(--color-brand); border-radius: var(--radius-full); transition: width .5s var(--ease-exp); }
.poll-pct { width: 36px; text-align: right; font-size: .78rem; color: var(--color-muted); }
.poll-vote-form { margin-top: .75rem; display: flex; flex-direction: column; gap: .4rem; }
.poll-option-label-radio { display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; padding: .3rem .5rem; border-radius: var(--radius-sm); transition: background var(--dur-fast); }
.poll-option-label-radio:hover { background: var(--color-brand-tint); }

/* ── Suggested Users ────────────────────────────────────────── */
.suggested-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1rem; }
.suggested-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: 1rem;
    display: flex; align-items: flex-start; gap: .75rem;
    transition: box-shadow var(--dur-fast);
}
.suggested-card:hover { box-shadow: var(--shadow); }
.suggested-avatar, .suggested-avatar--placeholder { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.suggested-avatar--placeholder { background: var(--color-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; }
.suggested-info { flex: 1; min-width: 0; }
.suggested-name { font-weight: 700; font-size: .95rem; display: block; margin-bottom: .15rem; text-decoration: none; color: var(--color-text); }
.suggested-name:hover { color: var(--color-brand); }
.suggested-headline { margin: 0 0 .15rem; }
.suggested-actions { flex-shrink: 0; }

/* ── Explore ────────────────────────────────────────────────── */
.explore-filters {
    display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end;
    background: var(--color-surface-container); border-radius: var(--radius-lg); padding: 1rem;
}
.filter-group { display: flex; flex-direction: column; gap: .25rem; min-width: 160px; flex: 1; }
.filter-label { font-size: .8rem; font-weight: 600; color: var(--color-muted); }
.explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: .75rem; }
.explore-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 1.25rem .75rem; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    text-decoration: none; color: var(--color-text);
    transition: box-shadow var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.explore-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-brand-lt); transform: translateY(-2px); text-decoration: none; }
.explore-avatar, .explore-avatar--placeholder { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; margin-bottom: .5rem; }
.explore-avatar--placeholder { background: var(--color-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; }
.explore-info { width: 100%; }
.explore-name { font-weight: 600; font-size: .9rem; display: block; margin-bottom: .2rem; }

/* ── Security Page ──────────────────────────────────────────── */
.security-sections { display: flex; flex-direction: column; gap: 1.25rem; max-width: 640px; }
.security-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem; }
.security-card h3 { margin: 0 0 .5rem; }
.security-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.security-status { font-size: .8rem; font-weight: 700; padding: .2rem .6rem; border-radius: var(--radius-full); }
.security-status--enabled { background: var(--color-success-lt); color: var(--color-success); }
.security-status--disabled { background: var(--color-warning-lt); color: var(--color-warning); }
.sessions-list { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0; }
.session-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .75rem; background: var(--color-surface-container); border-radius: var(--radius-sm); }
.session-agent { font-size: .85rem; font-weight: 500; }
.session-meta { margin-top: .1rem; }
.security-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.security-table th { text-align: left; padding: .35rem .5rem; font-size: .75rem; color: var(--color-muted); border-bottom: 1px solid var(--color-border); }
.security-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--color-border-lt); }

/* ── Notification Prefs ─────────────────────────────────────── */
.notif-prefs-list { display: flex; flex-direction: column; gap: .25rem; }
.notif-pref-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .6rem .75rem; border-radius: var(--radius-sm);
    cursor: pointer; transition: background var(--dur-fast);
}
.notif-pref-row:hover { background: var(--color-brand-tint); }
.notif-pref-label { font-size: .9rem; flex: 1; }
.toggle-checkbox { width: 1rem; height: 1rem; accent-color: var(--color-brand); cursor: pointer; }

/* ── Events Feedback ────────────────────────────────────────── */
.star-rating-group { display: flex; gap: .5rem; margin-top: .25rem; }
.star-label { display: flex; align-items: center; gap: .3rem; cursor: pointer; font-size: .9rem; }
.star-input { accent-color: var(--color-brand); }
.star-icon { font-size: 1.2rem; color: var(--color-warning); }
.feedback-list { display: flex; flex-direction: column; gap: .75rem; }
.feedback-item { padding: .75rem; background: var(--color-surface-container); border-radius: var(--radius); }
.feedback-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; }
.stars-display { color: var(--color-warning); letter-spacing: -.1em; }

/* ── Event Attendees ────────────────────────────────────────── */
.attendees-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: .75rem; }
.attendee-card { display: flex; align-items: center; gap: .75rem; padding: .75rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; color: var(--color-text); transition: box-shadow var(--dur-fast); }
.attendee-card:hover { box-shadow: var(--shadow); text-decoration: none; }
.attendee-avatar, .attendee-avatar--placeholder { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.attendee-avatar--placeholder { background: var(--color-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.attendee-info strong { display: block; font-size: .875rem; }

/* ── Floating Action Button ─────────────────────────────────── */
.fab {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100;
    width: 3.5rem; height: 3.5rem; border-radius: 50%;
    background: var(--color-brand); color: #fff; border: none;
    box-shadow: var(--shadow-md); cursor: pointer; font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.fab:hover { background: var(--color-brand-dk); box-shadow: var(--shadow-lg); transform: scale(1.07); }
@media (max-width: 640px) { .fab { bottom: calc(4.5rem + env(safe-area-inset-bottom)); right: 1rem; } }

/* ── Profile Cover Photo ────────────────────────────────────── */
.profile-cover {
    width: 100%; height: 160px; object-fit: cover; object-position: center;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: block;
}
.profile-cover-placeholder {
    width: 100%; height: 160px;
    background: linear-gradient(135deg, var(--color-brand-lt), var(--color-brand));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ── QR Code Page ───────────────────────────────────────────── */
.qr-page { padding: 1.5rem 0; }
.qr-canvas-wrap canvas { display: block; }

/* ── Opportunity Enhancements ───────────────────────────────── */
.opp-remote-badge {
    display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem;
    font-weight: 600; padding: .2rem .6rem; background: var(--color-info-lt);
    color: var(--color-info); border-radius: var(--radius-full);
}
.opp-salary { font-size: .82rem; color: var(--color-muted); }
.opp-type-chip {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: .15rem .5rem; background: var(--color-surface-container);
    border-radius: var(--radius-full); color: var(--color-muted); margin-right: .3rem;
}

/* ── Success Confetti (CSS only) ────────────────────────────── */
@keyframes confetti-fall {
    0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(60px) rotate(720deg); opacity: 0; }
}
.confetti-burst { position: relative; display: inline-block; }

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .xp-progress-fill, .poll-bar-fill, .domain-bar-fill { transition: none; }
}

/* ── High Contrast Mode ─────────────────────────────────────── */
@media (prefers-contrast: high) {
    .btn-primary { background: #000; color: #fff; border: 2px solid #000; }
    [data-theme="dark"] .btn-primary { background: #fff; color: #000; border: 2px solid #fff; }
    .skill-chip, .qa-tag, .avail-chip { border: 2px solid currentColor; }
}

/* ── Print Stylesheet ───────────────────────────────────────── */
@media print {
    .site-header, .site-nav, .nav-toggle, .theme-toggle, .bottom-nav,
    .consent-banner, .profile-prompt, .fab, .toast-container { display: none !important; }
    body { background: #fff; color: #000; }
    a { color: #000; }
}

/* ── Form Card ──────────────────────────────────────────────── */
.form-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.form-card h3 { margin: 0 0 1rem; }

/* ── Big stat ───────────────────────────────────────────────── */
.big-stat { font-size: 4rem; font-weight: 900; color: var(--color-brand); line-height: 1; }

/* ── Text utils ─────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-danger { color: var(--color-error); }
.text-success { color: var(--color-success); }
.text-sm { font-size: .875rem; }
.text-xs { font-size: .75rem; }
.text-muted { color: var(--color-muted); }
.text-primary { color: var(--color-brand); }

/* ── DND row ────────────────────────────────────────────────── */
.dnd-row label { display: flex; flex-direction: column; gap: .25rem; }


/* -- Skeleton loading screens (batch 9) ----------------------- */
@keyframes skeleton-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton {
    background: linear-gradient(90deg,
        var(--color-surface-container) 25%,
        var(--color-surface-cont-high) 50%,
        var(--color-surface-container) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.4s ease infinite;
    border-radius: var(--radius-sm);
    display: block;
}
.skeleton-text { height: .875rem; margin-bottom: .5rem; }
.skeleton-text.w-full  { width: 100%; }
.skeleton-text.w-3-4   { width: 75%; }
.skeleton-text.w-1-2   { width: 50%; }
.skeleton-text.w-1-4   { width: 25%; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); flex-shrink: 0; }
.skeleton-avatar.lg    { width: 56px; height: 56px; }
.skeleton-card { height: 120px; width: 100%; margin-bottom: 1rem; }
.skeleton-line { height: 14px; border-radius: 4px; }
.skeleton-card-group { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; background: var(--color-surface); border-radius: var(--radius); }

/* -- Empty states (batch 9) ----------------------------------- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--color-muted);
    gap: 1rem;
}
.empty-state-icon {
    width: 64px;
    height: 64px;
    background: var(--color-surface-container);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}
.empty-state-title { font-size: 1.125rem; font-weight: 600; color: var(--color-text); margin: 0; }
.empty-state-desc  { font-size: .9rem; max-width: 320px; margin: 0; }
.empty-state-actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }

/* -- Toast notifications (batch 9) ---------------------------- */
#toast-container {
    position: fixed;
    bottom: calc(var(--bottom-nav-h, 0px) + 1rem);
    right: 1rem;
    z-index: 9000;
    display: flex;
    flex-direction: column-reverse;
    gap: .5rem;
    pointer-events: none;
}
.toast {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: .75rem 1rem;
    font-size: .875rem;
    max-width: 320px;
    display: flex;
    align-items: center;
    gap: .5rem;
    pointer-events: all;
    animation: toast-in var(--dur) var(--ease);
    transition: opacity .2s, transform .2s;
}
@keyframes toast-in {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}
.toast.toast-success { border-left: 3px solid var(--color-success); }
.toast.toast-error   { border-left: 3px solid var(--color-error); }
.toast.toast-info    { border-left: 3px solid var(--color-info); }
.toast.toast-warn    { border-left: 3px solid var(--color-warning); }
.toast-dismiss {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-muted);
    font-size: 1rem;
    padding: 0 .25rem;
    line-height: 1;
}

/* -- Mobile bottom navigation (batch 9) ----------------------- */
:root { --bottom-nav-h: 0px; }
/* Bottom nav only when hamburger is also active (≤640px), avoiding double-nav on tablets */
@media (max-width: 640px) {
    :root { --bottom-nav-h: 60px; }
    body { padding-bottom: var(--bottom-nav-h); }
    .bottom-nav {
        display: flex;
    }
}
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    z-index: 200;
    align-items: stretch;
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
    padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--color-muted);
    text-decoration: none;
    font-size: .65rem;
    font-weight: 500;
    transition: color var(--dur-fast) var(--ease);
    position: relative;
    padding: .25rem 0;
}
.bottom-nav-item svg { width: 22px; height: 22px; }
.bottom-nav-item.active { color: var(--color-brand); }
.bottom-nav-item:hover  { color: var(--color-text); text-decoration: none; }
.bottom-nav-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
    background: var(--color-error);
    color: #fff;
    font-size: .55rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 10px;
    min-width: 14px;
    text-align: center;
}

/* -- App install prompt (A2HS) (batch 9) ----------------------- */
#install-prompt {
    position: fixed;
    bottom: calc(var(--bottom-nav-h) + 1rem);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1rem 1.25rem;
    display: none;
    align-items: center;
    gap: .75rem;
    z-index: 8000;
    max-width: 340px;
    width: calc(100% - 2rem);
    animation: toast-in .3s var(--ease);
}
#install-prompt.show { display: flex; }
#install-prompt .prompt-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--color-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 1.25rem;
}
#install-prompt .prompt-text { flex: 1; }
#install-prompt .prompt-title { font-weight: 600; font-size: .9rem; }
#install-prompt .prompt-sub   { font-size: .78rem; color: var(--color-muted); }

/* -- Confirmation modal (batch 9) ------------------------------ */
.confirm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.48);
    z-index: 7000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fade-in .15s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.confirm-modal {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
    max-width: 400px;
    width: 100%;
    animation: toast-in .2s var(--ease);
}
.confirm-modal h3  { font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; }
.confirm-modal p   { color: var(--color-muted); font-size: .9rem; margin-bottom: 1.25rem; }
.confirm-modal-actions { display: flex; gap: .75rem; justify-content: flex-end; }

/* -- Rich text editor toolbar (batch 9) ------------------------ */
.rte-toolbar {
    display: flex;
    gap: .25rem;
    padding: .375rem .5rem;
    background: var(--color-surface-container);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    flex-wrap: wrap;
}
.rte-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 28px;
    border-radius: var(--radius-xs);
    color: var(--color-muted);
    font-size: .8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.rte-btn:hover { background: var(--color-border); color: var(--color-text); }
.rte-btn.active { background: var(--color-brand-tint); color: var(--color-brand); }
.rte-btn + .rte-divider { width: 1px; background: var(--color-border); margin: .2rem .25rem; }
.rte-editor {
    border: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding: .625rem .75rem;
    min-height: 120px;
    outline: none;
    font-size: .9375rem;
    line-height: 1.6;
    background: var(--color-surface);
    color: var(--color-text);
}
.rte-editor:focus { border-color: var(--color-brand); }
.rte-editor[contenteditable] p { margin: 0 0 .5em; }

/* -- Breadcrumbs (batch 9) ------------------------------------- */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    color: var(--color-muted);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.breadcrumbs a { color: var(--color-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-brand); }
.breadcrumbs-sep { opacity: .4; }
.breadcrumbs span:last-child { color: var(--color-text); font-weight: 500; }

/* -- Explore / hashtag pages (batch 9) ------------------------- */
.explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
.topic-chip {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: .375rem 1rem;
    font-size: .85rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    transition: background var(--dur-fast), border-color var(--dur-fast);
}
.topic-chip:hover { background: var(--color-brand-tint); border-color: var(--color-brand); color: var(--color-brand); text-decoration: none; }
.topic-chip .count { font-size: .75rem; color: var(--color-muted); margin-left: .25rem; }



/* -- NPS widget (batch 9) -------------------------------------- */
#nps-widget {
    position: fixed;
    bottom: calc(var(--bottom-nav-h) + 1rem);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.25rem;
    z-index: 5000;
    max-width: 380px;
    width: calc(100% - 2rem);
    display: none;
}
#nps-widget.show { display: block; }
#nps-widget h4 { font-size: .95rem; font-weight: 700; margin-bottom: .75rem; }
.nps-scores { display: flex; gap: .25rem; flex-wrap: wrap; }
.nps-score-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--color-border);
    background: var(--color-surface-container);
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.nps-score-btn:hover, .nps-score-btn.selected { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }

/* ============================================================
   PREMIUM LAYER — UI/UX v2
   Page transitions · Scroll effects · Micro-interactions
   Improved focus · Better empty states · Skeleton polish
   ============================================================ */

/* ── Page entrance animation ───────────────────────────────── */
@keyframes page-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
    .main-content {
        animation: page-fade-up 260ms var(--ease-exp) both;
    }
}

/* ── Scroll-aware header ───────────────────────────────────── */
.site-header { transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.site-header.scrolled {
    box-shadow: var(--shadow-md);
    border-bottom-color: var(--color-border);
}

/* ── Card depth on hover ───────────────────────────────────── */
.card {
    transition: box-shadow var(--dur) var(--ease),
                transform  var(--dur) var(--ease-exp),
                border-color var(--dur) var(--ease);
}
.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* ── Better link transitions ───────────────────────────────── */
a { transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast); }

/* ── Universal focus ring ──────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }
.btn:focus-visible { border-radius: var(--radius-full); }
.nav-more-toggle:focus-visible,
.btn-ghost:focus-visible { border-radius: var(--radius-sm); }
.btn-link:focus-visible { border-radius: 2px; outline-offset: 1px; }

/* ── Skip link ─────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    z-index: 9999;
    padding: .4rem .8rem;
    background: var(--color-brand) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-size: .85rem;
    text-decoration: none;
    transition: top .15s;
}
.skip-link:focus { top: 6px; }

/* ── Back-to-top button ────────────────────────────────────── */
#back-to-top-global {
    display: none;
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 850;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    align-items: center;
    justify-content: center;
    line-height: 1;
    background: var(--color-brand) !important;
    transition: opacity var(--dur-fast), transform 200ms var(--ease-exp), box-shadow var(--dur-fast) !important;
}
#back-to-top-global:hover {
    box-shadow: 0 4px 16px rgba(var(--primary-rgb),.35) !important;
    transform: translateY(-3px) !important;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #back-to-top-global { box-shadow: 0 4px 16px rgba(0,0,0,.5) !important; } }
[data-theme="dark"] #back-to-top-global { box-shadow: 0 4px 16px rgba(0,0,0,.5) !important; }

/* ── Notification "See all" link fix ──────────────────────── */
#notif-panel a[href*="notifications"] {
    color: var(--color-brand) !important;
}

/* ── Button loading state ──────────────────────────────────── */
.btn[data-loading] {
    opacity: .72;
    pointer-events: none;
    position: relative;
}
.btn[data-loading]::after {
    content: '';
    position: absolute;
    right: .85rem;
    top: 50%;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 600ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Button press spring ───────────────────────────────────── */
.btn:active { transform: scale(.96); transition-duration: 80ms; }
.btn-sm:active { transform: scale(.97); }

/* ── Form control: taller hit target, smoother focus ──────── */
.form-control {
    padding: .72rem .95rem;
    font-size: .9375rem;
}
.form-control:focus {
    box-shadow: 0 0 0 3px var(--color-brand-tint), 0 0 0 1px var(--color-brand);
}

/* ── Textarea auto-resize cue ──────────────────────────────── */
textarea.form-control { resize: vertical; min-height: 80px; }

/* ── Select styling ────────────────────────────────────────── */
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A576A' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    padding-right: 2.2rem;
    cursor: pointer;
}

/* ── Label weight refinement ───────────────────────────────── */
.form-group label { font-weight: 550; letter-spacing: .01em; }

/* ── Auth card entrance ────────────────────────────────────── */
.auth-card {
    animation: page-fade-up 320ms var(--ease-exp) both;
}

/* ── Page header refinements ───────────────────────────────── */
.page-header h1 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.4px;
    line-height: 1.2;
}

/* ── Headings: sharper letter spacing ─────────────────────── */
h1, h2, h3, h4 {
    line-height: 1.25;
    letter-spacing: -.02em;
}
h1 { font-size: 2rem; font-weight: 800; }
h2 { font-size: 1.5rem; font-weight: 750; }
h3 { font-size: 1.2rem; font-weight: 700; }
h4 { font-size: 1rem;   font-weight: 650; }

/* ── Stat cards: icon + number premium layout ──────────────── */
.stat-card { transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease-exp); }
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ── Member/person card hover ──────────────────────────────── */
.member-card, .person-card, .user-card {
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease-exp);
}
.member-card:hover, .person-card:hover, .user-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* ── Avatar: consistent border ring ───────────────────────── */
.avatar {
    flex-shrink: 0;
    border: 2px solid var(--color-border-lt);
    transition: border-color var(--dur-fast);
}
a:hover .avatar, button:hover .avatar { border-color: var(--color-brand-lt); }

/* ── Bottom nav: active pill + icon scale ───────────────────── */
.bottom-nav-item.active svg {
    stroke: var(--color-brand);
    transform: scale(1.1);
    transition: transform var(--dur) var(--ease-exp);
}
.bottom-nav-item.active::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 28px;
    background: var(--color-brand-lt);
    border-radius: var(--radius-full);
    z-index: -1;
}
.bottom-nav-item svg { transition: transform var(--dur) var(--ease-exp); }
.bottom-nav-item:active svg { transform: scale(.9); }

/* ── Toast: better positioning + shadow ───────────────────── */
.toast-container {
    position: fixed;
    bottom: calc(var(--bottom-nav-h, 0px) + 1.25rem);
    right: 1.25rem;
    z-index: 9000;
    display: flex;
    flex-direction: column-reverse;
    gap: .5rem;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ── Skeleton shimmer — brighter pulse ─────────────────────── */
@keyframes skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-surface-container) 25%,
        var(--color-surface-cont-high) 50%,
        var(--color-surface-container) 75%
    );
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

/* ── Empty state: centered with icon breath ────────────────── */
@keyframes empty-breath {
    0%, 100% { transform: scale(1); opacity: .55; }
    50%       { transform: scale(1.06); opacity: .75; }
}
.empty-state .empty-icon,
.empty-state .big-icon {
    animation: empty-breath 3.5s ease-in-out infinite;
    display: inline-block;
}

/* ── Profile completeness bar in banner ────────────────────── */
.profile-prompt {
    border-left: 3px solid var(--color-brand);
}

/* ── Consent banner polish ──────────────────────────────────── */
.consent-banner {
    border-top: 1px solid var(--color-border);
}

/* ── Breadcrumb chevrons ────────────────────────────────────── */
.breadcrumbs-sep { opacity: .35; font-size: .75em; }

/* ── Notification badge pulse ──────────────────────────────── */
@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(186,26,26,.4); }
    50%       { box-shadow: 0 0 0 4px rgba(186,26,26,0); }
}
.notif-badge { animation: badge-pulse 2.4s ease-in-out infinite; }

/* ── Table refinements ──────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; }
th {
    font-size: .8rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-muted);
    padding: .6rem .75rem;
    border-bottom: 1.5px solid var(--color-border);
    text-align: left;
}
td {
    padding: .65rem .75rem;
    border-bottom: 1px solid var(--color-border-lt);
    font-size: .9rem;
    vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--dur-fast); }
tbody tr:hover { background: var(--color-brand-tint); }

/* ── Pill / chip refinements ────────────────────────────────── */
.chip, .tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .75rem;
    border-radius: var(--radius-full);
    font-size: .8rem;
    font-weight: 600;
    background: var(--color-surface-container);
    color: var(--color-text);
    border: 1px solid var(--color-border-lt);
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.chip:hover, .tag:hover {
    background: var(--color-brand-tint);
    border-color: var(--color-brand);
    color: var(--color-brand);
}
a.chip, a.tag { text-decoration: none; }

/* ── Code / mono ─────────────────────────────────────────────── */
code, pre {
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code',
                 ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;
    font-size: .88em;
}
code {
    background: var(--color-surface-container);
    padding: .15em .4em;
    border-radius: var(--radius-xs);
    color: var(--color-brand-dk);   /* --color-brand on this fill was 4.21:1 */
}

/* ── Divider ────────────────────────────────────────────────── */
hr {
    border: none;
    border-top: 1px solid var(--color-border-lt);
    margin: 1.5rem 0;
}

/* ── Smooth image loading ───────────────────────────────────── */
img {
    display: block;
    max-width: 100%;
    height: auto;
    transition: opacity var(--dur-fast);
}
img[loading="lazy"] { opacity: 0; }
img[loading="lazy"].loaded { opacity: 1; }

/* ── Section heading with accent bar ──────────────────────── */
.section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.section-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 1em;
    background: var(--color-brand);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

/* ── Smooth scrollbar (Webkit) ──────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-muted); }

/* ── Text selection ────────────────────────────────────────── */
::selection {
    background: var(--color-brand-lt);
    color: var(--color-brand);
}

/* ── Responsive utility: hide on mobile ────────────────────── */
@media (max-width: 640px) {
    .hide-mobile { display: none !important; }
    .main-content { padding: 1.25rem 1rem; }
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.3rem; }
}
@media (min-width: 641px) {
    .hide-desktop { display: none !important; }
}

/* ── Print: clean layout ────────────────────────────────────── */
@media print {
    .site-header, .bottom-nav, #back-to-top-global, .consent-banner,
    .profile-prompt, #nps-widget, #install-prompt { display: none !important; }
    .main-content { padding: 0; }
    body { font-size: 12pt; color: #000; background: #fff; }
}

/* ── Paywall modal (CSP-safe: no inline styles) ─────────────── */
#paywall-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0,0,0,.55);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
#paywall-modal.is-open {
    display: flex;
}
#paywall-modal .paywall-card {
    background: var(--surface, #fff);
    border-radius: .875rem;
    max-width: 400px;
    width: 100%;
    padding: 1.75rem 1.5rem;
    position: relative;
    box-shadow: 0 8px 40px rgba(0,0,0,.2);
}
#paywall-modal .paywall-close {
    position: absolute;
    top: .75rem;
    right: .9rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--color-muted);
    line-height: 1;
}
#paywall-modal .paywall-header {
    text-align: center;
    margin-bottom: 1.1rem;
}
#paywall-modal .paywall-icon {
    font-size: 2rem;
    margin-bottom: .5rem;
}
#paywall-modal .paywall-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 .35rem;
}
#paywall-modal .paywall-msg {
    font-size: .85rem;
    color: var(--color-muted);
    margin: 0;
}
#paywall-modal .paywall-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
#paywall-modal .paywall-features li {
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
#paywall-modal .paywall-features .check {
    color: var(--color-success);
}
#paywall-modal .paywall-cta {
    width: 100%;
    text-align: center;
    display: block;
}

/* ── Leaderboard ──────────────────────────────────────────── */
.leaderboard-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.leaderboard-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--color-border);
    transition: background .15s;
}
.leaderboard-item:last-child { border-bottom: none; }
.leaderboard-item:hover { background: var(--color-surface-container); }
.leaderboard-item.leaderboard-top { background: var(--color-brand-lt); }
.dark .leaderboard-item.leaderboard-top { background: rgba(var(--primary-rgb),.15); }
.leaderboard-item .rank {
    font-size: 1.1rem;
    width: 2rem;
    flex-shrink: 0;
    text-align: center;
}
.leaderboard-item .score {
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
}
.leaderboard-item .flex-grow { flex: 1; min-width: 0; }
.rank-badge { font-size: 1.1rem; }

/* Soft badge variants — all use CSS tokens so dark mode works automatically */
.badge-soft-primary { background: var(--color-brand-lt);   color: var(--color-brand); }
.badge-soft-success { background: var(--color-success-lt); color: var(--color-success); }
.badge-soft-warning { background: var(--color-warning-lt); color: var(--color-warning); }

/* Tab nav — period picker */
.tab-nav {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.tab-link {
    padding: .35rem .85rem;
    border-radius: var(--radius-full);
    font-size: .875rem;
    font-weight: 500;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.tab-link:hover, .tab-link.active {
    background: var(--color-brand);
    color: #fff;
    border-color: var(--color-brand);
}
.fw-semibold { font-weight: 600; }

/* ── Cross-device & browser compatibility fixes ─────────────────────────── */

/* Hide nav search bar on mobile — too cramped alongside logo + 2 buttons */
@media (max-width: 640px) {
    #nav-search-wrap { display: none; }
}

/* Fallbacks for browsers without color-mix() support
   (Chrome <111, Safari <16.2, Firefox <113, older Android WebView) */
@supports not (color: color-mix(in srgb, red, blue)) {
    .btn-secondary:hover { background: var(--color-brand); color: #fff; }
    .btn-danger:hover    { background: #991b1b; }
    .flash--success { border-color: var(--color-success); }
    .flash--error   { border-color: var(--color-error); }
    .flash--warning { border-color: var(--color-warning); }
    .flash--info    { border-color: var(--color-info); }
    .conversation-item--unread { background: var(--color-info-lt); }
    .profile-prompt { border-bottom-color: var(--color-info); }
    .consent-banner a { color: var(--color-brand-lt); }
    .landing-cta-section { background: var(--color-brand-lt); border-color: var(--color-brand); }
    .qa-answer--accepted { background: var(--color-surface); border-color: var(--color-success); }
}

/* ── CSP-safe base.html component classes (extracted from inline style= attrs) ── */

/* Nav search */
.nav-search-wrap { position: relative; flex: 1; max-width: 260px; margin: 0 .5rem; }
.nav-search-input { width: 100%; padding: .3rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: .82rem; background: var(--color-bg); color: var(--color-text); outline: none; }
.nav-search-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface, #fff); border: 1px solid var(--color-border); border-radius: .5rem; box-shadow: 0 4px 20px rgba(0,0,0,.12); z-index: 9999; overflow: hidden; max-height: 320px; overflow-y: auto; }
.nav-search-dropdown.is-open { display: block; }
.nav-search-result { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; text-decoration: none; color: var(--color-text); font-size: .85rem; }
.nav-search-result:hover, .nav-search-result.is-active { background: var(--color-hover, rgba(0,0,0,.05)); }
.nav-search-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.nav-search-initial { width: 28px; height: 28px; border-radius: 50%; background: var(--color-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; flex-shrink: 0; }
.nav-search-name { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-search-meta { font-size: .75rem; color: var(--color-muted); white-space: nowrap; }

/* Nav search suggestions */
.nav-suggest-item { display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem; text-decoration: none; color: var(--color-text); font-size: .85rem; transition: background .1s; }
.nav-suggest-item:hover { background: var(--color-hover, rgba(0,0,0,.05)); }
.nav-suggest-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.nav-suggest-avatar-fallback { width: 24px; height: 24px; border-radius: 50%; background: var(--color-brand, #6366f1); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 600; flex-shrink: 0; }
.nav-suggest-hash { font-size: .85rem; color: var(--color-muted); }
.nav-suggest-seeall { display: block; padding: .45rem .75rem; font-size: .8rem; color: var(--color-brand); border-top: 1px solid var(--color-border); text-decoration: none; }
.nav-suggest-empty { padding: .45rem .75rem; font-size: .82rem; color: var(--color-muted); text-align: center; }

/* Nav "More" dropdown arrow icon */
.nav-more-arrow { margin-top: 1px; }

/* Notification bell + dropdown panel */
.notif-bell-btn { background: none; border: none; cursor: pointer; font-size: inherit; padding: .375rem .5rem; }
.notif-panel { right: 0; min-width: 280px; max-width: 340px; padding: .5rem; }
.notif-panel-header { display: flex; justify-content: space-between; align-items: center; padding: .25rem .5rem .5rem; border-bottom: 1px solid var(--color-border); margin-bottom: .25rem; }
.notif-panel-title { font-size: .85rem; }
.notif-panel-seeall { font-size: .78rem; color: var(--color-brand); }
.notif-panel-items { max-height: 280px; overflow-y: auto; }
.notif-panel-loading { padding: .5rem; font-size: .82rem; text-align: center; }
#notif-mark-read-bar { display: none; border-top: 1px solid var(--color-border); padding: .4rem .5rem 0; margin-top: .25rem; text-align: center; }
.notif-mark-read-form { display: inline; }
.notif-mark-read-btn { font-size: .78rem; color: var(--color-muted); }

/* Nav dropdown badge overrides (position: static inside a menu item) */
.nav-more-menu .notif-badge { position: static; margin-left: 4px; }

/* Profile completeness banner */
.profile-banner-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.profile-banner-text { flex: 1; min-width: 0; }
.profile-banner-title { font-size: .9rem; }
.profile-banner-desc { font-size: .85rem; color: var(--color-muted); margin-left: .4rem; }
.profile-banner-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.profile-banner-bar-wrap { margin-top: .5rem; height: 4px; background: var(--color-border); border-radius: 999px; overflow: hidden; }
.profile-banner-fill { height: 100%; background: var(--color-brand); border-radius: 999px; transition: width .4s; }

/* NPS survey widget */
.nps-close { float: right; font-size: 1rem; color: var(--color-muted); }
#nps-form { margin-top: .75rem; }
.nps-comment-input { margin-bottom: .5rem; font-size: .8rem; }
.nps-submit { width: 100%; }

/* Push notification permission nudge */
.push-nudge { display: none; position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 1100; background: var(--surface, #fff); border: 1px solid var(--color-border); border-radius: .75rem; box-shadow: 0 4px 24px rgba(0,0,0,.14); padding: .85rem 1.1rem; max-width: 380px; width: calc(100% - 2rem); gap: .75rem; align-items: flex-start; }
.push-nudge-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.push-nudge-body { flex: 1; min-width: 0; }
.push-nudge-title { font-weight: 600; font-size: .88rem; margin-bottom: .2rem; }
.push-nudge-desc { font-size: .78rem; color: var(--color-muted); }
.push-nudge-actions { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.push-nudge-btn { font-size: .78rem; }

/* Command palette */
.cmd-palette-overlay { display: none; position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.45); }
.cmd-palette-overlay.is-open { display: block; }
.cmd-palette-inner { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); width: min(580px, calc(100vw - 2rem)); background: var(--surface, #fff); border: 1px solid var(--color-border); border-radius: .875rem; box-shadow: 0 8px 48px rgba(0,0,0,.22); overflow: hidden; }
.cmd-palette-search { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--color-border); }
.cmd-palette-icon { flex-shrink: 0; opacity: .5; }
.cmd-input { flex: 1; border: none; outline: none; font-size: .95rem; background: transparent; color: var(--color-text); }
.cmd-esc-kbd { font-size: .7rem; opacity: .5; background: var(--color-border); padding: .1rem .35rem; border-radius: .2rem; }
.cmd-results { max-height: 320px; overflow-y: auto; padding: .5rem 0; }
.cmd-footer { padding: .5rem 1rem; border-top: 1px solid var(--color-border); display: flex; gap: 1.5rem; font-size: .75rem; color: var(--color-muted); }
.cmd-footer kbd { background: var(--color-border); padding: .1rem .3rem; border-radius: .2rem; }
.cmd-item { display: flex; align-items: center; gap: .6rem; padding: .5rem 1rem; text-decoration: none; color: var(--color-text); font-size: .9rem; transition: background .1s; }
.cmd-item-icon { width: 20px; text-align: center; flex-shrink: 0; }
.cmd-section-label { padding: .25rem 1rem; font-size: .75rem; color: var(--color-muted); border-top: 1px solid var(--color-border); }

/* Keyboard shortcuts modal */
.shortcuts-modal { display: none; position: fixed; inset: 0; z-index: 9100; background: rgba(0,0,0,.45); align-items: center; justify-content: center; }
.shortcuts-modal.is-open { display: flex; }
.shortcuts-card { background: var(--surface, #fff); border-radius: .875rem; padding: 1.5rem; max-width: 480px; width: calc(100% - 2rem); box-shadow: 0 8px 40px rgba(0,0,0,.2); max-height: 80vh; overflow-y: auto; }
.shortcuts-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.shortcuts-title { font-size: 1rem; font-weight: 700; margin: 0; }
.shortcuts-close { background: none; border: none; cursor: pointer; font-size: 1.1rem; color: var(--color-muted); }
.shortcuts-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.shortcuts-group-row td { padding: .5rem 0 .25rem; font-weight: 700; font-size: .78rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .05em; }
.shortcuts-row { border-bottom: 1px solid var(--color-border); }
.shortcuts-key-cell { padding: .4rem 0; width: 180px; }
.shortcuts-key-cell kbd { background: var(--color-border); padding: .15rem .4rem; border-radius: .25rem; font-size: .8rem; }
.shortcuts-desc-cell { padding: .4rem 0; color: var(--color-muted); }

/* ════════════════════════════════════════════════════════════
   Pamposhun Warm Precision — Motion, Skeleton, Focus, Type
   ════════════════════════════════════════════════════════════ */

/* ── Page entrance ──────────────────────────────────────────── */
@keyframes page-enter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.main-content { animation: page-enter 200ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .main-content { animation: none; } }

/* ── Skeleton shimmer ───────────────────────────────────────── */
@keyframes skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}
.skeleton {
    background: linear-gradient(90deg,
        var(--color-surface-container) 25%,
        var(--color-surface-cont-high) 37%,
        var(--color-surface-container) 63%);
    background-size: 400px 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    border-radius: var(--radius-sm);
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}
.skeleton * { visibility: hidden; }
.sk-line  { height: 12px; border-radius: var(--radius-xs); margin-bottom: .5rem; }
.sk-short { width: 40%; }
.sk-medium { width: 65%; }
.sk-full  { width: 100%; }
.sk-avatar { border-radius: var(--radius-full); }
.skeleton-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
}
.sk-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }

/* ── Card hover — elevation lift (Airbnb) ───────────────────── */
.card, .post-card, .profile-card, .job-card, .event-card,
.lawyer-card, [class*="-card"] {
    transition: transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.card:hover, .post-card:hover, .profile-card:hover, .job-card:hover,
.event-card:hover, .lawyer-card:hover, [class*="-card"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
    .card, .post-card, .profile-card, [class*="-card"] {
        transition: box-shadow var(--dur-fast) var(--ease);
    }
    .card:hover, .post-card:hover, [class*="-card"]:hover {
        transform: none;
    }
}

/* ── Button press — Lovable inset shadow ────────────────────── */
.btn-primary {
    transition: background var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.btn-primary:active {
    transform: scale(.98);
    box-shadow: rgba(255,255,255,.15) 0 .5px 0 inset,
                rgba(0,0,0,.18) 0 0 0 .5px inset;
}

/* ── Focus rings — consistent, warm ────────────────────────── */
:focus-visible {
    outline: 2.5px solid var(--color-brand);
    outline-offset: 3px;
    border-radius: inherit;
}
:focus:not(:focus-visible) { outline: none; }

/* ── Display / editorial typography ────────────────────────── */
.font-display, .display-heading {
    font-family: var(--font-display);
    letter-spacing: -.025em;
}
.text-display-lg {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
}
.text-display-sm {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.5vw, 1.75rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
}

/* ── Warm accent helpers ────────────────────────────────────── */
.text-brand      { color: var(--color-brand); }
.text-brand-dk   { color: var(--color-brand-dk); }
.bg-brand        { background-color: var(--color-brand); }
.bg-brand-dk     { background-color: var(--color-brand-dk); }
.bg-brand-lt     { background-color: var(--color-brand-lt); }
.border-brand    { border-color: var(--color-brand); }
.border-brand-lt { border-color: color-mix(in srgb, var(--color-brand) 25%, white); }
.ring-brand      { --tw-ring-color: var(--color-brand); }
.hover\:bg-brand-dk:hover  { background-color: var(--color-brand-dk); }
.hover\:bg-brand-lt:hover  { background-color: var(--color-brand-lt); }
.hover\:text-brand:hover   { color: var(--color-brand); }

/* ── Navigation skeleton overlay ───────────────────────────── */
#nav-skeleton {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: var(--color-bg);
    padding-top: 64px;
    overflow: hidden;
}
body.is-navigating #nav-skeleton { display: block; }
body.is-navigating .main-content { opacity: 0; transition: opacity 50ms; }

#nav-skeleton-bar {
    height: 3px;
    background: linear-gradient(90deg,
        var(--color-brand) 0%,
        color-mix(in srgb, var(--color-brand) 60%, transparent) 50%,
        var(--color-brand) 100%);
    background-size: 200% 100%;
    animation: nav-progress 1s ease infinite;
    position: absolute;
    top: 0; left: 0; right: 0;
}
@keyframes nav-progress {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
.nav-skeleton-body {
    max-width: var(--content-width, 800px);
    margin: 2rem auto 0;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.nav-skeleton-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-lt);
}
.nav-skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: .5rem; }

/* ── Empty state component ──────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    max-width: 400px;
    margin: 2rem auto;
    /* reset stale overrides from earlier cascade layers */
    background: none;
    border: none;
    border-radius: 0;
    /* flex layout for consistent icon→title→body→actions stacking */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
}
.empty-state-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xl);
    background: var(--color-brand-lt);
    color: var(--color-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.5rem;
}
.empty-state h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .4rem;
    color: var(--color-text);
}
.empty-state p {
    font-size: .9rem;
    color: var(--color-muted);
    line-height: 1.5;
    margin-bottom: 1.25rem;
}
.empty-state-actions {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Feed compose box ────────────────────────────────────────── */
.feed-compose {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 1.5rem;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.feed-compose:focus-within {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.07);
}

/* ── Rich text editor (feed compose RTE) ─────────────────────── */
.feed-rte {
    min-height: 80px;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: .5rem .75rem;
    font-size: .9rem;
    line-height: 1.55;
    margin-bottom: .5rem;
    background: var(--color-bg);
    outline: none;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.feed-rte:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.07);
}
.feed-rte:empty::before {
    content: attr(data-placeholder);
    color: var(--color-muted);
    pointer-events: none;
}

/* ── Post body text ──────────────────────────────────────────── */
.post-body {
    font-size: .925rem;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    margin: .35rem 0 .5rem;
    color: var(--color-text);
}
.post-body a { color: var(--color-brand); font-weight: 500; }
.post-body a:hover { text-decoration: underline; }

/* ── Feed icon: post (avatar slot, no background fill) ────────── */
.feed-icon--post { background: transparent; padding: 0; width: 2.5rem; height: 2.5rem; }

/* ── Feed sidebar widgets (PYMK, Trending) ───────────────────── */
.feed-widget {
    background: var(--color-surface);
    border: 1px solid var(--color-border-lt);
    border-radius: var(--radius-lg);
    padding: .85rem 1rem;
    margin-bottom: 1.1rem;
}
.feed-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .65rem;
}
.feed-widget-title {
    font-weight: 600;
    font-size: .88rem;
    margin: 0;
    color: var(--color-text);
}

/* ── Availability badges on user cards ───────────────────────── */
.avail-badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    font-size: .68rem;
    border-radius: var(--radius-sm);
    padding: .15rem .4rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}
.avail-badge--work     { background: var(--color-success-lt); color: var(--color-success); }
.avail-badge--coffee   { background: var(--color-brand-lt);   color: var(--color-brand); }
.avail-badge--mentor   { background: var(--color-warning-lt); color: var(--color-warning); }

/* ── Activity and connection badges on user cards ────────────── */
.activity-badge {
    position: absolute;
    bottom: .5rem;
    left: .5rem;
    font-size: .65rem;
    background: var(--color-success-lt);
    color: var(--color-success);
    border-radius: var(--radius-sm);
    padding: .1rem .3rem;
    font-weight: 600;
    white-space: nowrap;
}
.connected-badge {
    position: absolute;
    bottom: .5rem;
    right: .5rem;
    font-size: .65rem;
    background: var(--color-brand);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: .1rem .3rem;
    font-weight: 600;
}

/* ── Intro card hover warmth ─────────────────────────────────── */
.intro-card {
    transition: box-shadow var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.intro-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    border-color: rgba(var(--primary-rgb),.2);
}

/* ── Settings page ───────────────────────────────────────────── */
.settings-layout { max-width: 700px; margin: 2rem auto; padding: 0 1rem; }
.settings-nav { display: grid; gap: .75rem; }
.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dur-fast),
                box-shadow var(--dur-fast),
                transform var(--dur-fast);
}
.settings-nav-item:hover {
    border-color: var(--color-brand);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb),.08);
    transform: translateY(-1px);
    text-decoration: none;
}
.settings-nav-icon { font-size: 1.5rem; flex-shrink: 0; }
.settings-nav-body { flex: 1; min-width: 0; }
.settings-nav-title { font-weight: 600; }
.settings-nav-desc { font-size: .875rem; color: var(--color-muted); }
.settings-nav-chevron { margin-left: auto; color: var(--color-muted); font-size: 1.1rem; flex-shrink: 0; }
.settings-nav-item--danger { border-color: var(--color-error-lt); }
.settings-nav-item--danger:hover {
    border-color: var(--color-error);
    box-shadow: 0 2px 8px rgba(186,26,26,.08);
}
.settings-nav-item--danger .settings-nav-title { color: var(--color-error); }

/* ── Profile verification nudge ──────────────────────────────── */
.profile-verify-nudge {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--color-warning-lt);
    border: 1px solid rgba(123,79,0,.3);
    border-radius: var(--radius);
    padding: .55rem .85rem;
    margin: .6rem 0;
    font-size: .82rem;
}
.profile-verify-text { flex: 1; color: var(--color-warning); }
.profile-verify-btn {
    background: var(--color-warning);
    color: #fff;
    padding: .2rem .65rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Responsive table wrapper ─────────────────────────────────── */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap       { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Data saver (audit item 26) ───────────────────────────────
   Set on <body> from the data_saver cookie. Webfonts are already
   skipped server-side; here we drop decorative imagery and heavy
   effects so the page is light on a slow / metered connection. */
body.data-saver {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body.data-saver .lp-globe-wrap,
body.data-saver .lp-cta-globe-wrap,
body.data-saver [data-decorative],
body.data-saver .hero-bg-image,
body.data-saver .lp-hero-stars {
    display: none !important;
}
body.data-saver .lp-hero,
body.data-saver [style*="background-image"] {
    background-image: none !important;
}
body.data-saver * {
    backdrop-filter: none !important;
    animation-duration: .001s !important;
}

/* ── Service-degraded banner (audit item 5) ──────────────────── */
.degraded-banner {
    background: var(--color-brand-lt, #F1EFEC);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-brand);
    padding: .6rem 1rem;
    text-align: center;
    font-size: .875rem;
    font-weight: 500;
}

/* Two-column page layout that stacks on narrow screens */
.split-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
.split-grid--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 768px) {
    .split-grid { grid-template-columns: 1fr; }
}

/* Keep header actions on one line ("Log out" wrapped at tablet width) */
.site-nav a, .site-nav button { white-space: nowrap; }

/* Header logo: same icon + wordmark as the landing page */
.site-header .logo { display: inline-flex; align-items: center; gap: .5rem; }
.site-header .logo-mark { width: 26px; height: 26px; border-radius: 7px; display: block; flex-shrink: 0; }

/* ── Legal pages (templates/legal/_layout.html) ─────────────── */
.legal-wrap { display: grid; grid-template-columns: 13rem minmax(0, 46rem); gap: 2rem; justify-content: center; align-items: start; }
.legal-nav { position: sticky; top: 5rem; display: flex; flex-direction: column; gap: .15rem; font-size: .9rem; }
.legal-nav a { color: var(--color-muted); text-decoration: none; padding: .35rem .6rem; border-radius: var(--radius-md, .5rem); }
.legal-nav a:hover { color: var(--color-text); background: var(--color-surface); }
.legal-nav a[aria-current="page"] { color: var(--color-text); font-weight: 600; background: var(--color-surface); }
.legal-doc { min-width: 0; background: var(--color-surface); border: 1px solid var(--color-border-lt); border-radius: var(--radius-xl); padding: 2.25rem; line-height: 1.65; }
.legal-doc h1 { margin: 0 0 .25rem; }
.legal-doc h2 { font-size: 1.15rem; margin: 2rem 0 .5rem; scroll-margin-top: 5rem; }
.legal-doc h3 { font-size: 1rem; margin: 1.25rem 0 .35rem; }
.legal-doc p, .legal-doc ul, .legal-doc ol { margin: 0 0 .75rem; }
.legal-doc ul, .legal-doc ol { padding-left: 1.25rem; }
.legal-doc li { margin-bottom: .3rem; }
.legal-updated { color: var(--color-muted); font-size: .9rem; margin-bottom: 1.5rem !important; }
.legal-summary { background: var(--color-bg, #fafaf9); border: 1px solid var(--color-border-lt); border-radius: var(--radius-lg); padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.legal-summary ul { margin: .25rem 0 0; }
.legal-table-wrap { overflow-x: auto; margin: 0 0 1rem; }
.legal-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.legal-table th { text-align: left; border-bottom: 2px solid var(--color-border); padding: .5rem .6rem; vertical-align: bottom; }
.legal-table td { border-bottom: 1px solid var(--color-border-lt); padding: .55rem .6rem; vertical-align: top; }
.legal-table td:first-child, .legal-table th:first-child { padding-left: 0; }
.legal-foot { margin-top: 2.5rem !important; padding-top: 1rem; border-top: 1px solid var(--color-border-lt); color: var(--color-muted); font-size: .9rem; }
.legal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; margin: 1rem 0; }
.legal-cards a { display: block; border: 1px solid var(--color-border-lt); border-radius: var(--radius-lg); padding: .9rem 1rem; text-decoration: none; color: var(--color-text); }
.legal-cards a:hover { border-color: var(--color-text); }
.legal-cards span { display: block; color: var(--color-muted); font-size: .85rem; margin-top: .2rem; }
@media (max-width: 860px) {
    .legal-wrap { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .legal-nav { position: static; flex-direction: row; flex-wrap: wrap; }
    .legal-doc { padding: 1.25rem 1rem; border-radius: var(--radius-lg); }
}
.consent-choice-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.policy-banner { border-bottom: 1px solid color-mix(in srgb, var(--color-surface) 20%, transparent); }