/* ============================================================================
 * WorkOfficially - design system v3 "Editorial Precision"
 *
 * Aesthetic: cream paper meets fintech control panel.
 *   - Warm-paper background (#fbf5e8) + sharp warm-black ink (#11100c)
 *   - WRK orange #ff9900 used like a Penguin Classics spine accent
 *   - Bricolage Grotesque + Instrument Serif italic + JetBrains Mono
 *   - HARD edges (4px corners max), 1px hairlines, no pillow buttons
 *   - Real data shown as data: monospace numerics with tabular figures
 *   - No fake "trusted by" logos, no fake testimonials, no glassmorphism
 *
 * NEVER use Inter, generic feature grids, purple gradients, glassmorphism,
 * decorative emoji, or 12 cards of vague benefits. Be specific.
 * ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    /* Palette - restrained, intentional, paper-cream surface */
    --wo-primary:        #ff9900;
    --wo-primary-strong: #d97800;
    --wo-primary-deep:   #8a4d00;
    --wo-primary-soft:   #ffe4bf;

    /* Ink = espresso brown (same family as the footer) so the whole site reads
       as one warm-brown palette. Orange is reserved for accent only. */
    --wo-ink:            #261b10;     /* espresso brown - body text, dark slabs, brand-mark */
    --wo-ink-2:          #4a3b29;     /* one step lighter, for secondary text */
    --wo-text-muted:     #7a6a52;     /* warm muted helper text */

    --wo-line:           #d6cdb7;     /* hairline borders */
    --wo-line-soft:      #ece3cd;
    --wo-paper:          #fbf5e8;     /* cream paper */
    --wo-paper-2:        #f4ecd6;
    --wo-card:           #fffdf6;
    --wo-shell:          #f7f0dd;

    --wo-accent-ink:     #0a0907;     /* near-black with warmth */
    --wo-espresso:       #261b10;     /* luxury warm-brown - footers, slabs */
    --wo-espresso-2:     #1d140a;     /* slightly deeper for layered footers */
    --wo-cream-soft:     #ede3c8;     /* warm sand - soft accent on dark */
    --wo-warm:           #d97800;
    --wo-good:           #1f7a3a;     /* live indicator green */
    --wo-bad:            #b13d2d;     /* error red */

    /* Sharp, restrained shadows */
    --wo-shadow-line:    0 0 0 1px var(--wo-line);
    --wo-shadow-sm:      0 1px 0 var(--wo-line);
    --wo-shadow-md:      0 2px 0 var(--wo-line), 0 12px 30px -18px rgba(17,16,12,.18);
    --wo-shadow-pop:     0 2px 0 var(--wo-line), 0 24px 50px -16px rgba(17,16,12,.35);

    /* Type */
    --font-display: 'Bricolage Grotesque', 'Helvetica Neue', system-ui, sans-serif;
    --font-serif:   'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    --font-body:    'Bricolage Grotesque', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* -------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--wo-paper); }
body {
    font-family: var(--font-body);
    font-feature-settings: 'ss01', 'ss02', 'cv11';
    color: var(--wo-ink);
    background: var(--wo-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
::selection { background: var(--wo-ink); color: var(--wo-primary); }
.bg-body-tertiary { background: var(--wo-shell) !important; }
.text-muted { color: var(--wo-text-muted) !important; }
hr { border: none; border-top: 1px solid var(--wo-line); opacity: 1; margin: 1.5rem 0; }

/* -------- Typography ---------- */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--wo-ink);
}
.display-3, .display-4, .display-5 { letter-spacing: -0.04em; font-weight: 800; }
.h1, h1 { font-size: clamp(2rem, 4vw, 3rem); }
.h2, h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.lead {
    color: var(--wo-text-muted); font-size: 1.13rem; line-height: 1.55; font-weight: 400;
    max-width: 56ch;
}
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.mono, .num {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* -------- Eyebrow / spec-tag (signature motif) ---------- */
.eyebrow {
    font-family: var(--font-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 500;
    color: var(--wo-ink-2);
    display: inline-flex; align-items: center; gap: .55rem;
    margin-bottom: 1rem;
}
.eyebrow::before {
    content: ''; width: 8px; height: 8px;
    background: var(--wo-primary);
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(255,153,0,.18);
    animation: livePulse 2.2s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255,153,0,.18); }
    50%      { box-shadow: 0 0 0 5px rgba(255,153,0,.0); }
}

/* "Spec-tag" - used to label sections like a technical document */
.spec-tag {
    font-family: var(--font-mono); font-size: .68rem;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-text-muted); font-weight: 500;
    border-top: 1px solid var(--wo-line);
    padding-top: .4rem;
    display: inline-block;
}

/* -------- Buttons - squared, hard ---------- */
.btn {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.005em;
    border-radius: 4px;
    padding: .65rem 1.15rem;
    border: 1px solid transparent;
    transition: transform .12s ease, background .14s ease, color .14s ease, border-color .14s ease;
    box-shadow: none;
}
.btn-lg { padding: .85rem 1.5rem; font-size: 1rem; }
.btn-sm { padding: .35rem .8rem; font-size: .82rem; }

.btn-primary {
    background: var(--wo-ink); border-color: var(--wo-ink); color: var(--wo-paper);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--wo-primary); border-color: var(--wo-primary); color: var(--wo-ink);
    transform: translateY(-1px);
}
.btn-outline-primary {
    color: var(--wo-ink); border-color: var(--wo-ink); background: transparent;
}
.btn-outline-primary:hover { background: var(--wo-ink); color: var(--wo-paper); }
.btn-outline-secondary {
    color: var(--wo-ink); border-color: var(--wo-line); background: var(--wo-card);
}
.btn-outline-secondary:hover { border-color: var(--wo-ink); background: var(--wo-paper); }
.btn-link { color: var(--wo-ink); text-decoration: none; font-weight: 600; }
.btn-link:hover { color: var(--wo-primary-deep); text-decoration: underline; }

.bg-primary { background-color: var(--wo-primary) !important; }
.text-primary { color: var(--wo-primary-deep) !important; }
.border-primary { border-color: var(--wo-primary) !important; }
a { color: var(--wo-ink); text-decoration: underline; text-decoration-color: var(--wo-primary); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--wo-primary-deep); }
a.link-dark, .link-dark { color: var(--wo-ink) !important; text-decoration: none; }
a.link-secondary, .link-secondary { color: var(--wo-text-muted) !important; }

/* -------- Forms ---------- */
.form-control, .form-select {
    border: 1px solid var(--wo-line);
    background: var(--wo-card);
    border-radius: 4px;
    padding: .65rem .85rem;
    font-size: .95rem;
    font-family: var(--font-body);
    color: var(--wo-ink);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--wo-ink); outline: none;
    box-shadow: 0 0 0 1px var(--wo-ink), 0 0 0 4px rgba(255,153,0,.18);
}
.form-label { font-weight: 500; color: var(--wo-ink-2); font-size: .88rem; }
.form-text { color: var(--wo-text-muted); font-family: var(--font-mono); font-size: .76rem; }

/* -------- Cards (sharp) ---------- */
.card {
    border-radius: 6px;
    border: 1px solid var(--wo-line) !important;
    background: var(--wo-card);
    box-shadow: none;
}
.card.shadow-sm { box-shadow: var(--wo-shadow-sm) !important; }

.badge.text-bg-warning { background: var(--wo-primary) !important; color: var(--wo-ink); font-family: var(--font-mono); font-weight: 600; }

/* -------- Header ---------- */
.wrk-header, .wo-header {
    background: var(--wo-paper) !important;
    border-bottom: 1px solid var(--wo-line) !important;
    backdrop-filter: blur(8px);
}
.wo-wordmark {
    font-family: var(--font-display);
    font-weight: 800; font-size: 1.28rem;
    letter-spacing: -.04em;
    color: var(--wo-ink); line-height: 1;
    display: inline-flex; align-items: baseline; gap: 0;
}
.wo-wordmark .wo-accent {
    font-family: var(--font-serif); font-style: italic; font-weight: 400;
    color: var(--wo-primary-deep);
}
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: var(--wo-ink); color: var(--wo-primary);
    font-family: var(--font-serif); font-style: italic; font-weight: 400;
    font-size: 19px; letter-spacing: -.04em;
}
.brand-mark::after { content: 'Wo'; }
.navbar-nav .nav-link {
    color: var(--wo-ink-2); font-weight: 500; font-size: .93rem;
    padding: .45rem .7rem !important;
    transition: color .12s;
}
.navbar-nav .nav-link:hover { color: var(--wo-ink); }
.navbar .btn { font-size: .9rem; padding: .5rem 1rem; }

/* -------- Hero - editorial split ---------- */
.hero {
    position: relative; padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 5vw, 4rem);
    border-bottom: 1px solid var(--wo-line);
    background:
        linear-gradient(180deg, var(--wo-paper) 0%, var(--wo-paper-2) 100%);
}
.hero::before {
    /* faint registration crosshair top-right - editorial print mark */
    content: ''; position: absolute; top: 28px; right: 32px;
    width: 14px; height: 14px;
    background:
        linear-gradient(var(--wo-text-muted), var(--wo-text-muted)) center/1px 100% no-repeat,
        linear-gradient(var(--wo-text-muted), var(--wo-text-muted)) center/100% 1px no-repeat;
    opacity: .35;
}
.hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: .96;
    animation: fadeUp .85s cubic-bezier(.2,.7,.2,1) both;
}
.hero h1 .accent {
    color: var(--wo-primary-deep);
    font-family: var(--font-serif);
    font-style: italic; font-weight: 400;
    letter-spacing: -.02em;
}
.hero .lead { font-size: 1.18rem; max-width: 540px; animation: fadeUp .85s .1s both; }
.hero .eyebrow { animation: fadeUp .85s 0s both; }
.hero-ctas { animation: fadeUp .85s .18s both; }
.hero-trust {
    display: flex; gap: 1.4rem; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: .8rem; color: var(--wo-text-muted);
    border-top: 1px solid var(--wo-line);
    padding-top: 1.1rem;
    animation: fadeUp .85s .26s both;
}
.hero-trust i { color: var(--wo-primary-deep); margin-right: .35rem; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* -------- Live data panel (the "control panel" companion to the hero) ---------- */
.data-panel {
    background: var(--wo-ink);
    color: var(--wo-paper);
    border: 1px solid var(--wo-ink);
    border-radius: 6px;
    padding: 1.6rem;
    font-family: var(--font-mono);
    font-size: .82rem;
    box-shadow: var(--wo-shadow-pop);
    animation: fadeUp .85s .35s both;
    position: relative; overflow: hidden;
}
.data-panel::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(255,153,0,.04) 100%);
    pointer-events: none;
}
.data-panel__head {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.12);
    padding-bottom: .8rem; margin-bottom: 1rem;
}
.data-panel__head-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.05rem; letter-spacing: -.01em;
    color: var(--wo-paper);
}
.data-panel__head-id { color: var(--wo-primary); font-size: .72rem; }
.data-panel__row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .55rem 0;
    border-bottom: 1px dashed rgba(255,255,255,.08);
}
.data-panel__row:last-child { border-bottom: none; }
.data-panel__label { color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; }
.data-panel__value { font-weight: 600; color: var(--wo-paper); font-variant-numeric: tabular-nums; }
.data-panel__value .accent { color: var(--wo-primary); }
.data-panel__live {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-good); font-weight: 600;
}
.data-panel__live::before {
    content: ''; width: 6px; height: 6px; background: var(--wo-good); border-radius: 50%;
    animation: livePulse 1.8s ease-in-out infinite;
}

/* -------- Stats strip ---------- */
.stats-strip {
    background: var(--wo-card);
    border-top: 1px solid var(--wo-line);
    border-bottom: 1px solid var(--wo-line);
    padding: 1.5rem 0;
}
.stats-strip .stat-num {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 800;
    letter-spacing: -.03em;
    color: var(--wo-ink);
}
.stats-strip .stat-num .accent { color: var(--wo-primary-deep); }
.stats-strip .stat-label {
    font-family: var(--font-mono);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-text-muted); font-weight: 500;
}
.stats-strip .stat { position: relative; padding-left: 1rem; }
.stats-strip .stat::before {
    content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
    width: 2px; background: var(--wo-primary);
}

/* -------- Sections ---------- */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-tight { padding: 3rem 0; }
.section-divider { border-top: 1px solid var(--wo-line); }

/* Numbered section header - editorial */
.section-num {
    display: inline-flex; align-items: baseline; gap: .75rem;
    font-family: var(--font-mono); font-size: .72rem;
    color: var(--wo-text-muted);
    margin-bottom: .6rem;
}
.section-num strong { color: var(--wo-primary-deep); font-weight: 600; }

/* -------- Feature cards (refined, hard-edge) ---------- */
.feature-card {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 6px;
    padding: 1.6rem 1.7rem;
    height: 100%;
    transition: border-color .15s ease, transform .15s ease;
}
.feature-card:hover { border-color: var(--wo-ink); transform: translateY(-2px); }
.feature-card .feat-num {
    font-family: var(--font-mono); font-size: .72rem;
    color: var(--wo-primary-deep); font-weight: 600;
    letter-spacing: .08em;
    border-bottom: 1px solid var(--wo-line);
    padding-bottom: .5rem; margin-bottom: 1rem;
    display: block;
}
.feature-card h4 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; }
.feature-card p { color: var(--wo-text-muted); font-size: .94rem; margin-bottom: 0; line-height: 1.5; }
.feature-card p strong { color: var(--wo-ink); font-weight: 700; }

/* REP-V8 (2026-05-30): F01 "Reputation Bridge" card gets the gold treatment
   so it stands out as the new headline feature in the grid. */
.feature-card--new {
    position: relative;
    background: linear-gradient(180deg, #fffaf0 0%, #fbf2e0 100%);
    border-color: rgba(255, 153, 0, .35);
    overflow: hidden;
}
.feature-card--new::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 200, 80, .20), transparent 55%);
    pointer-events: none;
}
.feature-card--new:hover { border-color: rgba(255, 153, 0, .75); }
.feat-badge-new {
    position: absolute;
    top: 1rem; right: 1rem;
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .14em;
    padding: 3px 9px;
    border-radius: 999px;
    color: #3a2400;
    background: linear-gradient(180deg, #ffd97a 0%, #ffb340 100%);
    border: 1px solid rgba(196, 130, 0, .45);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 2px 8px rgba(255, 153, 0, .35);
    animation: featBadgeGlow 3.6s ease-in-out infinite;
    z-index: 1;
}
@keyframes featBadgeGlow {
    0%, 100% { box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 2px 8px rgba(255, 153, 0, .35); }
    50%      { box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 2px 18px rgba(255, 153, 0, .65); }
}
.feature-card--new .feat-num { color: #b95400; border-bottom-color: rgba(255, 153, 0, .25); position: relative; }
.feature-card--new h4 { color: var(--wo-ink); position: relative; }
.feature-card--new p  { color: rgba(38, 27, 16, .78); position: relative; }
.feature-card--new p strong { color: var(--wo-ink); }
.feat-link {
    display: inline-flex; align-items: center; gap: .25rem;
    margin-top: .85rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #b95400;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    position: relative;
    transition: gap .15s ease, color .15s ease;
}
.feat-link:hover { color: #8a3e00; gap: .5rem; }
@media (prefers-reduced-motion: reduce) {
    .feat-badge-new { animation: none; }
}

/* -------- Steps ---------- */
.step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: var(--wo-ink); color: var(--wo-primary);
    font-family: var(--font-mono); font-weight: 600; font-size: .9rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* -------- Talent / job cards ---------- */
.tcard, .job-card {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 6px;
    padding: 1.4rem 1.5rem;
    transition: border-color .15s ease, transform .15s ease;
}
.tcard:hover, .job-card:hover { border-color: var(--wo-ink); transform: translateY(-1px); }
.tcard .tcard-skills { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .65rem; }
.tag {
    background: var(--wo-paper);
    color: var(--wo-ink);
    border: 1px solid var(--wo-line);
    border-radius: 3px;
    padding: .15rem .55rem;
    font-family: var(--font-mono); font-size: .72rem;
    font-weight: 500;
    display: inline-block;
    letter-spacing: -.005em;
}

/* -------- Avatars ---------- */
.avatar-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 4px;
    background: var(--wo-ink); color: var(--wo-primary);
    font-family: var(--font-display);
    font-weight: 700; font-size: 13px; line-height: 1;
    letter-spacing: -.02em;
}
.avatar-lg { width: 56px; height: 56px; font-size: 18px; }
.avatar-xl { width: 80px; height: 80px; font-size: 26px; border-radius: 6px; }

/* -------- KPI tiles ---------- */
.kpi-tile {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 6px;
    padding: 1.1rem 1.35rem;
    position: relative;
    transition: border-color .15s ease;
}
.kpi-tile:hover { border-color: var(--wo-ink); }
.kpi-tile::after {
    content: ''; position: absolute; top: 0; left: 0;
    width: 32px; height: 2px; background: var(--wo-primary);
}
.kpi-tile .kpi-num {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.4vw, 2rem);
    font-weight: 800; letter-spacing: -.03em;
    line-height: 1; color: var(--wo-ink);
    margin-top: .4rem;
}
.kpi-tile .kpi-num .small-unit { font-family: var(--font-mono); font-size: .7rem; color: var(--wo-text-muted); font-weight: 500; }
.kpi-tile .kpi-label {
    font-family: var(--font-mono);
    font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-text-muted); font-weight: 500;
}

/* -------- Pills ---------- */
.pill-wrk, .pill-ai, .pill-vet {
    font-family: var(--font-mono);
    font-size: .68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
    padding: .22rem .55rem;
    border-radius: 3px;
    display: inline-block;
}
.pill-wrk { background: rgba(217,120,0,.12); color: var(--wo-primary-deep); border: 1px solid rgba(217,120,0,.3); }
.pill-ai  { background: rgba(29,93,214,.08); color: #1d5dd6;             border: 1px solid rgba(29,93,214,.25); }
.pill-vet { background: var(--wo-ink); color: var(--wo-primary); border: 1px solid var(--wo-ink); }

/* -------- Status pills ---------- */
.status-pill {
    display: inline-block;
    font-family: var(--font-mono);
    border-radius: 3px;
    padding: .15rem .55rem;
    font-size: .68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
}
.status-draft     { background: var(--wo-paper-2); color: var(--wo-ink-2); }
.status-open, .status-active, .status-approved, .status-released, .status-credited
                  { background: rgba(31,122,58,.08); color: var(--wo-good); border: 1px solid rgba(31,122,58,.2); }
.status-funded, .status-pending, .status-submitted, .status-confirmed
                  { background: rgba(217,120,0,.10); color: var(--wo-primary-deep); border: 1px solid rgba(217,120,0,.2); }
.status-dispute, .status-rejected, .status-reorged, .status-failed
                  { background: rgba(177,61,45,.08); color: var(--wo-bad); border: 1px solid rgba(177,61,45,.2); }
.status-closed, .status-paused
                  { background: var(--wo-line-soft); color: var(--wo-ink-2); }

/* -------- AI panel ---------- */
.ai-panel {
    border: 1px solid var(--wo-line);
    border-radius: 6px;
    background: var(--wo-card);
    padding: 1.15rem 1.3rem;
    position: relative;
}
.ai-panel::before {
    content: 'AI'; position: absolute; right: .9rem; top: .65rem;
    font-family: var(--font-mono); font-size: .65rem; letter-spacing: .14em;
    color: var(--wo-primary-deep); font-weight: 600;
    background: var(--wo-paper); padding: .15rem .4rem;
    border: 1px solid var(--wo-primary-deep); border-radius: 2px;
}
.ai-panel .ai-eyebrow {
    color: var(--wo-text-muted); font-family: var(--font-mono);
    font-weight: 500; font-size: .68rem;
    letter-spacing: .14em; text-transform: uppercase;
    margin-bottom: .4rem;
}

/* -------- Footer - luxury espresso ---------- */
.wo-footer {
    position: relative;
    background:
        radial-gradient(900px 360px at 12% -10%, rgba(217,120,0,.10) 0%, transparent 60%),
        linear-gradient(180deg, var(--wo-espresso) 0%, var(--wo-espresso-2) 100%);
    color: rgba(253,247,232,.72);
    padding: 4.5rem 0 1.75rem;
}
/* hairline gold rule, not a slab */
.wo-footer::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,153,0,.6) 18%,
        rgba(255,153,0,.6) 82%,
        transparent 100%);
}
/* subtle paper-grain on the dark surface */
.wo-footer::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    opacity: .25; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><filter id='n'><feTurbulence baseFrequency='0.85' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.65  0 0 0 0 0.45  0 0 0 0 0.22  0 0 0 0.5 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}
.wo-footer .container-xxl { position: relative; z-index: 1; }

.wo-footer h6 {
    color: var(--wo-cream-soft);
    font-family: var(--font-mono);
    font-size: .7rem; text-transform: uppercase; letter-spacing: .18em;
    font-weight: 500; margin-bottom: 1.1rem;
}
.wo-footer a {
    color: rgba(253,247,232,.72);
    text-decoration: none;
    font-size: .94rem; line-height: 1.55;
    border-bottom: 1px solid transparent;
    transition: color .12s, border-color .12s;
}
.wo-footer a:hover {
    color: var(--wo-primary);
    border-bottom-color: rgba(255,153,0,.45);
}
.wo-footer ul { list-style: none; padding: 0; margin: 0; }
.wo-footer ul li { margin-bottom: .55rem; }

.wo-footer-bottom {
    border-top: 1px solid rgba(253,247,232,.10);
    margin-top: 3rem; padding-top: 1.5rem;
    font-family: var(--font-mono);
    font-size: .75rem; letter-spacing: .02em;
    color: rgba(253,247,232,.52);
}
.wo-footer-bottom a { color: rgba(253,247,232,.6); }

/* wordmark on the dark surface - serif italic accent stays in orange */
.wo-footer .wo-wordmark { color: var(--wo-cream-soft); }
.wo-footer .wo-wordmark .wo-accent {
    color: var(--wo-primary);
    font-family: var(--font-serif); font-style: italic; font-weight: 400;
}
.wo-footer .brand-mark {
    background: var(--wo-primary);
    color: var(--wo-espresso);
}
/* a small editorial flourish - pulled from the editorial-mark idea */
.wo-footer-mark {
    font-family: var(--font-serif); font-style: italic;
    color: var(--wo-primary); font-size: 1.1rem; opacity: .9;
}

/* ============================================================================
 * FULL-SCREEN APP SHELL (top bar + main area, no marketing footer)
 * ============================================================================ */
.app-fullscreen {
    background: var(--wo-paper);
    height: 100vh;
    height: 100dvh;          /* respects mobile URL bar */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.app-bar {
    /* Universal pin - sits in the same spot on every page, doesn't move
       when you scroll. Same height, same padding, same background - every
       layout (marketing, main, fullscreen, admin) inherits this. */
    position: sticky;
    top: 0;
    z-index: 100;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: .75rem 1.5rem;
    background: rgba(255, 253, 246, .96);   /* cream-card with slight transparency */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--wo-line);
    height: 60px;
}
.app-bar__brand { display: flex; align-items: center; }
.app-bar__nav {
    display: flex; gap: 1.6rem; align-items: center; justify-content: center;
}
.app-bar__link {
    display: inline-flex; align-items: center; gap: .45rem;
    color: var(--wo-ink-2);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .94rem;
    letter-spacing: -.005em;
    text-decoration: none;
    padding: .35rem .1rem;
    border-bottom: 2px solid transparent;
    transition: color .12s, border-color .12s;
}
.app-bar__link i { color: var(--wo-primary-deep); font-size: 1rem; line-height: 1; }
.app-bar__link.is-active i { color: var(--wo-primary); }
@media (max-width: 1280px) {
    .app-bar__link span { display: none; }
    .app-bar__link i { font-size: 1.1rem; }
}
.app-bar__link:hover { color: var(--wo-ink); }
.app-bar__link.is-active {
    color: var(--wo-ink);
    border-bottom-color: var(--wo-primary);
}
.app-bar__num {
    font-family: var(--font-mono);
    font-size: .68rem; letter-spacing: .08em;
    color: var(--wo-primary-deep);
    font-weight: 600;
}
.app-bar__actions { display: flex; align-items: center; gap: .4rem; }
.app-bar__me {
    background: transparent; border: none; padding: 2px;
    cursor: pointer; border-radius: 50%;
    transition: box-shadow .12s;
}
.app-bar__me:hover { box-shadow: 0 0 0 2px var(--wo-primary-soft); }
@media (max-width: 1100px) {
    .app-bar__num { display: none; }
    .app-bar__nav { gap: 1rem; }
}
@media (max-width: 900px) {
    .app-bar {
        grid-template-columns: auto auto 1fr auto;
        gap: .85rem;
    }
    .app-bar__nav { display: none; }
}

/* MOBILE-FIX-02 (2026-05-29): hamburger trigger (mobile only) */
.app-bar__hamburger {
    display: none;
    background: transparent; border: 0;
    width: 38px; height: 38px;
    align-items: center; justify-content: center;
    color: var(--wo-ink);
    cursor: pointer;
    border-radius: 6px;
    transition: background .15s;
}
.app-bar__hamburger i { font-size: 1.4rem; }
.app-bar__hamburger:hover { background: var(--wo-paper-2); }
@media (max-width: 900px) {
    .app-bar__hamburger { display: inline-flex; }
}

/* Slide-in drawer */
.app-drawer {
    position: fixed; inset: 0;
    z-index: 1100;
}
.app-drawer__backdrop {
    position: absolute; inset: 0;
    background: rgba(38, 27, 16, .42);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .22s ease;
}
/* MOBILE-FIX-03 (2026-05-29): drawer slides from the RIGHT side
   (closer to the hamburger's natural reach on mobile/tablet). */
.app-drawer__panel {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: min(320px, 86vw);
    background: var(--wo-card);
    border-left: 1px solid var(--wo-line);
    box-shadow: 0 0 60px rgba(17,16,12,.18);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.2,.7,.2,1);
    overflow-y: auto;
}
.app-drawer.is-open .app-drawer__backdrop { opacity: 1; }
.app-drawer.is-open .app-drawer__panel    { transform: translateX(0); }
.app-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--wo-line);
}
.app-drawer__nav, .app-drawer__foot {
    display: flex; flex-direction: column;
    padding: .5rem 0;
}
.app-drawer__foot {
    margin-top: auto;
    border-top: 1px solid var(--wo-line);
    background: var(--wo-paper);
}
.app-drawer__link {
    display: flex; align-items: center; gap: .75rem;
    padding: .85rem 1.1rem;
    color: var(--wo-ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 500;
    background: transparent;
    border: 0;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: background .12s;
}
.app-drawer__link:hover { background: var(--wo-paper-2); }
.app-drawer__link.is-active {
    background: var(--wo-primary-soft);
    color: var(--wo-ink);
}
.app-drawer__link i {
    font-size: 1.15rem;
    color: var(--wo-primary-deep);
    width: 22px; text-align: center;
}
@media (prefers-reduced-motion: reduce) {
    .app-drawer__backdrop, .app-drawer__panel { transition: none; }
}

.app-content {
    flex: 1 1 auto;          /* fills whatever's left below the app-bar */
    min-height: 0;           /* lets children scroll instead of pushing parent */
    overflow: hidden;
}

/* ============================================================================
 * INBOX - 3-pane app (list · thread · details)
 * ============================================================================ */
.inbox-app {
    display: grid;
    grid-template-columns: 320px 1fr 360px;
    height: 100%;
    background: var(--wo-paper);
}
.inbox-app.is-details-hidden { grid-template-columns: 320px 1fr 0; }
@media (max-width: 1280px) {
    .inbox-app { grid-template-columns: 300px 1fr 320px; }
}
@media (max-width: 1100px) {
    .inbox-app { grid-template-columns: 280px 1fr; }
    .inbox-details { display: none !important; }
}
@media (max-width: 760px) {
    .inbox-app { grid-template-columns: 1fr; }
    .inbox-list { display: none; }   /* would toggle via JS in a real implementation */
}

/* Legacy .inbox-shell kept off - old wrapping is gone */
.inbox-shell { display: contents; }

.inbox-list {
    border-right: 1px solid var(--wo-line);
    display: flex; flex-direction: column; min-height: 0;
    background: var(--wo-card);
}
.inbox-list__header { padding: 1.1rem 1.2rem .75rem; border-bottom: 1px solid var(--wo-line); background: var(--wo-card); }

/* Filter pill row above the list */
.inbox-filters {
    display: flex; gap: .35rem; margin-top: .9rem;
}
.inbox-filter {
    background: var(--wo-paper);
    color: var(--wo-ink-2);
    border: 1px solid var(--wo-line);
    border-radius: 999px;
    padding: .3rem .85rem;
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .14s;
}
.inbox-filter:hover { border-color: var(--wo-ink); color: var(--wo-ink); }
.inbox-filter.is-active {
    background: var(--wo-ink); color: var(--wo-paper);
    border-color: var(--wo-ink);
}
.inbox-search { position: relative; }
.inbox-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--wo-text-muted); }
.inbox-search input {
    width: 100%; background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    border-radius: 4px;
    padding: .5rem .7rem .5rem 2rem;
    font-size: .88rem; font-family: var(--font-mono);
    transition: border-color .12s;
}
.inbox-search input:focus { outline: none; border-color: var(--wo-ink); background: var(--wo-card); }

/* INBOX-FIX-13 (2026-05-29): narrower list (340px) now that A-Z is snug
   next to other filter pills (no auto-margin spacer). When details panel
   is hidden, the grid collapses to 2 columns so the message view fills the
   freed space edge-to-edge. */
.inbox-app                    { grid-template-columns: 340px 1fr 360px !important; }
.inbox-app.is-details-hidden  { grid-template-columns: 340px 1fr        !important; }
@media (max-width: 1280px) {
    .inbox-app                    { grid-template-columns: 320px 1fr 320px !important; }
    .inbox-app.is-details-hidden  { grid-template-columns: 320px 1fr        !important; }
}
@media (max-width: 1100px) {
    .inbox-app                    { grid-template-columns: 280px 1fr !important; }
    .inbox-app.is-details-hidden  { grid-template-columns: 280px 1fr !important; }
}
@media (max-width: 760px) {
    .inbox-app                    { grid-template-columns: 1fr !important; }
    .inbox-app.is-details-hidden  { grid-template-columns: 1fr !important; }
}

/* When the details column is gone, hide the empty .inbox-details element
   completely so it doesn't reserve any space the grid couldn't reclaim. */
.inbox-app.is-details-hidden .inbox-details { display: none !important; }

/* INBOX-FIX-14 (2026-05-29): filter row stays on ONE line, no scroll, no
   vertical bounce. Pills shrink their padding instead of overflowing. */
.inbox-filters {
    flex-wrap: nowrap !important;
    overflow: visible !important;
    gap: .25rem !important;
    margin-top: .7rem !important;
}
.inbox-filters .inbox-filter {
    padding: .28rem .6rem !important;
    font-size: .72rem !important;
    flex: 0 0 auto;
    white-space: nowrap;
}
.inbox-filters .inbox-filter--sort {
    padding: .28rem .55rem !important;   /* even tighter for A-Z */
}

.inbox-search__clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: transparent; border: 0; color: var(--wo-text-muted);
    width: 22px; height: 22px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .15s, background .15s;
}
.inbox-search input:not(:placeholder-shown) ~ .inbox-search__clear {
    opacity: 1; pointer-events: auto;
}
.inbox-search__clear:hover { background: var(--wo-paper-2); color: var(--wo-ink); }

/* A-Z sort toggle - styled to match the filter pills.
   INBOX-FIX-13 (2026-05-29): removed margin-left:auto so A-Z sits snug
   against the Attachment pill (no gap). */
.inbox-filter--sort {
    font-family: var(--font-mono);
    letter-spacing: .04em;
    font-weight: 600;
}
.inbox-filter--sort.is-active {
    background: var(--wo-primary);
    color: var(--wo-ink);
    border-color: var(--wo-primary);
}

/* ============================================================
   INBOX-FIX-09/10 (2026-05-29): Categorized + collapsible files
   ============================================================ */
.files-cat { margin-bottom: .5rem; border-top: 1px solid var(--wo-line-soft); }
.files-cat:first-child { border-top: 0; }
.files-cat[open] { padding-bottom: .35rem; }
.files-cat__head {
    list-style: none;
    cursor: pointer;
    user-select: none;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wo-text-muted);
    padding: .55rem 0;
    display: flex; align-items: center; gap: .35rem;
    transition: color .15s;
}
.files-cat__head::-webkit-details-marker { display: none; }
.files-cat__head:hover { color: var(--wo-ink); }
.files-cat__head i { color: var(--wo-primary-strong); }
.files-cat__head .num { margin-left: .25rem; }
.files-cat__chev {
    margin-left: auto;
    transition: transform .2s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1));
    color: var(--wo-text-muted) !important;
    font-size: .85rem;
}
.files-cat[open] .files-cat__chev { transform: rotate(180deg); }
.files-cat__body { padding-bottom: .35rem; }
.files-rows { display: flex; flex-direction: column; gap: .25rem; }
.details-file.files-row {
    background: transparent; border: 0; text-align: left; width: 100%;
    cursor: pointer; padding: .4rem .5rem; border-radius: 4px;
    display: flex; align-items: center; gap: .5rem;
    color: var(--wo-ink);
    transition: background .12s;
}
.details-file.files-row:hover { background: var(--wo-paper-2); }
.details-file.files-row em { margin-left: auto; color: var(--wo-text-muted); font-style: normal; font-size: .76rem; font-family: var(--font-mono); }

/* Image thumbnails grid */
.files-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.files-thumb {
    aspect-ratio: 1 / 1;
    background: var(--wo-paper-2);
    border: 1px solid var(--wo-line);
    border-radius: 4px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: transform .14s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1)), border-color .14s;
}
.files-thumb:hover { transform: scale(1.03); border-color: var(--wo-primary); }
.files-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The viewer overlay */
.wo-no-scroll { overflow: hidden !important; }
.file-viewer {
    position: fixed; inset: 0;
    /* MOBILE-Z5 (2026-05-30): bumped above the mobile details overlay
       (which uses 1091) so the viewer always sits on top, even if the
       auto-close JS hasn't fired yet. */
    z-index: 1100;
    display: none;
    animation: fvFadeIn .2s ease both;
}
.file-viewer.is-open { display: block; }
.file-viewer__backdrop {
    position: absolute; inset: 0;
    background: rgba(17, 16, 12, .72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.file-viewer__panel {
    position: relative;
    width: min(1080px, 96vw);
    height: min(86vh, 920px);
    margin: max(2vh, 24px) auto 0;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0,0,0,.45);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: fvScaleIn .25s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1)) both;
}
.file-viewer__head {
    display: flex; align-items: center; gap: 1rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--wo-line);
    background: var(--wo-paper-2);
}
.file-viewer__title { font-weight: 600; display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; }
.file-viewer__title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-viewer__title i { color: var(--wo-primary-strong); }
.file-viewer__meta {
    font-family: var(--font-mono);
    font-size: .7rem; letter-spacing: .12em;
    color: var(--wo-text-muted);
    text-transform: uppercase;
}
.file-viewer__actions { display: flex; align-items: center; gap: .5rem; }
.file-viewer__body {
    flex: 1; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    background: #11100c;
    overflow: auto;
}
.file-viewer__body img,
.file-viewer__body video {
    max-width: 100%; max-height: 100%; display: block;
}
.file-viewer__body iframe {
    width: 100%; height: 100%; border: 0; background: #fff;
}
.file-viewer__audio {
    width: min(560px, 90%);
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 6px;
    padding: 1.25rem;
}
.file-viewer__audio audio { width: 100%; }
.file-viewer__nopreview {
    color: rgba(255,255,255,.85);
    text-align: center;
    padding: 2rem;
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.file-viewer__nopreview .btn { color: var(--wo-ink); }
@keyframes fvFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fvScaleIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .file-viewer, .file-viewer__panel { animation: none; }
}

/* Inline message-search bar (slides down from the conv header) */
.inbox-msg-search {
    display: none;
    align-items: center; gap: .5rem;
    padding: .55rem .85rem;
    background: var(--wo-card);
    border-bottom: 1px solid var(--wo-line);
    position: relative;
}
.inbox-msg-search.is-open { display: flex; animation: woSlideDown .25s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1)) both; }
.inbox-msg-search > i { color: var(--wo-text-muted); flex: 0 0 auto; }
.inbox-msg-search input[type="search"] {
    flex: 1 1 auto; border: 0; outline: none; background: transparent;
    font-family: var(--font-body); font-size: .94rem; color: var(--wo-ink);
}
.inbox-msg-search input[type="search"]::placeholder { color: var(--wo-text-muted); }
.inbox-msg-search__count {
    font-family: var(--font-mono); font-size: .75rem; color: var(--wo-text-muted);
    white-space: nowrap;
}
.inbox-msg-search__close {
    background: transparent; border: 0; color: var(--wo-text-muted);
    width: 26px; height: 26px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    transition: background .14s;
}
.inbox-msg-search__close:hover { background: var(--wo-paper-2); color: var(--wo-ink); }
@keyframes woSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.inbox-list__items { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex: 1; min-height: 0; }
.inbox-item a {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .8rem 1.05rem;
    text-decoration: none; color: inherit;
    border-bottom: 1px solid var(--wo-line-soft);
    transition: background .12s;
    position: relative;
}
.inbox-item a:hover { background: var(--wo-card); }
.inbox-item.is-active a {
    background: rgba(255,153,0,.18);   /* solid orange tint across the whole row */
}
.inbox-item.is-active a:hover {
    background: rgba(255,153,0,.24);
}
.inbox-item.is-active a::before {
    content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
    width: 4px; background: #ff9900;
    border-radius: 0 2px 2px 0;
}
.inbox-item.is-active .inbox-item__name { color: #8a3a00; }
.inbox-item.is-active .inbox-item__subject,
.inbox-item.is-active .inbox-item__preview { color: var(--wo-ink); opacity: .85; }
.inbox-item__avatar {
    width: 36px; height: 36px;
    background: var(--wo-ink); color: var(--wo-primary);
    font-family: var(--font-display); font-weight: 700;
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; border-radius: 4px;
}
.inbox-item__body { min-width: 0; flex: 1; }
.inbox-item__top { display: flex; justify-content: space-between; gap: .5rem; }
.inbox-item__name { font-weight: 700; color: var(--wo-ink); font-size: .92rem; }
.inbox-item__top time { font-family: var(--font-mono); font-size: .68rem; color: var(--wo-text-muted); white-space: nowrap; }
.inbox-item__subject { font-size: .82rem; color: var(--wo-ink-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.inbox-item__preview { font-size: .8rem; color: var(--wo-text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-item__unread {
    background: var(--wo-primary); color: var(--wo-ink);
    font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
    min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    align-self: center;
}
.inbox-empty { padding: 3rem 1.5rem; text-align: center; color: var(--wo-text-muted); }
.inbox-empty i { font-size: 2.2rem; color: var(--wo-line); display: block; margin-bottom: .6rem; }

.inbox-thread {
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--wo-paper);
    min-height: 0;
    height: 100%;            /* fill the inbox-app grid cell */
    overflow: hidden;
}
.inbox-thread__header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--wo-line);
    background: var(--wo-card);
    border-right: 1px solid var(--wo-line);
}
.thread-name {
    font-family: var(--font-display);
    font-weight: 700; letter-spacing: -.02em;
    font-size: 1.15rem;
    color: var(--wo-ink);
}
.thread-sub {
    font-family: var(--font-mono);
    font-size: .76rem;
    color: var(--wo-text-muted);
}
.thread-sub i { color: var(--wo-primary-deep); }
.thread-sub a { color: var(--wo-ink-2); text-decoration: none; border-bottom: 1px dotted var(--wo-line); }
.thread-sub a:hover { color: var(--wo-ink); border-bottom-color: var(--wo-primary); }

.icon-btn {
    background: transparent; border: 1px solid transparent;
    width: 34px; height: 34px; border-radius: 4px;
    color: var(--wo-ink-2); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .12s;
    font-size: 1rem;
    position: relative;
}
.icon-btn:hover { background: var(--wo-paper); border-color: var(--wo-line); color: var(--wo-ink); }
.icon-btn.is-open { background: var(--wo-ink); color: var(--wo-primary); border-color: var(--wo-ink); }
.icon-btn.is-active {
    background: rgba(255,153,0,.12);
    border-color: rgba(255,153,0,.40);
    color: #b95400;
}
/* ============================================================
   NATIVE VIDEO CALL SCREEN (full-page, 1:1 + group mesh)
   ============================================================ */
.call-app {
    position: fixed; inset: 0;
    display: grid;
    grid-template-rows: 60px 1fr 84px;
    grid-template-columns: 1fr 0;
    grid-template-areas:
        "head head"
        "stage chat"
        "bar  bar";
    background: #0c0a08;
    color: #fff;
    z-index: 500;
    transition: grid-template-columns .25s ease;
}
.call-app.has-chat-open {
    grid-template-columns: 1fr min(360px, 90vw);
}
.call-head  { grid-area: head; }
.call-stage { grid-area: stage; }
.call-bar   { grid-area: bar; }
.call-chat  { grid-area: chat; }
.call-head {
    display: flex; align-items: center; gap: 14px;
    padding: 0 18px;
    background: rgba(20,15,10,.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.call-head__back {
    color: #fff; text-decoration: none;
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06);
    transition: background .12s;
}
.call-head__back:hover { background: rgba(255,255,255,.14); color: #fff; }
.call-head__brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; }
.call-head__brand .brand-mark { background: #ff9900; width: 18px; height: 18px; border-radius: 4px; }
.call-head__brand .wo-wordmark { color: #fff; font-size: 1rem; }
.call-head__brand .wo-wordmark .wo-accent { color: #ff9900; }
.call-head__dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.4); margin: 0 2px; }
.call-head__label { font-size: .82rem; color: rgba(255,255,255,.65); letter-spacing: .04em; text-transform: uppercase; }
.call-head__meta {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: .82rem; color: rgba(255,255,255,.75);
    padding: 6px 12px; background: rgba(255,255,255,.06); border-radius: 999px;
}
.call-head__count::after { content: ' in call'; color: rgba(255,255,255,.5); }
.call-head__sep { opacity: .4; }
.call-head__actions { display: flex; gap: 6px; }
.call-head__btn {
    background: rgba(255,255,255,.06); border: 0; color: #fff;
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .12s;
}
.call-head__btn:hover { background: rgba(255,255,255,.14); }

/* ─── Stage / video grid ─── */
.call-stage {
    position: relative;
    overflow: hidden;
    padding: 16px;
}
.call-empty {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 32px;
    color: rgba(255,255,255,.7);
}
.call-empty[hidden] { display: none; }
.call-empty__icon {
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(255,255,255,.06);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 32px; color: #ff9900;
    margin-bottom: 16px;
    animation: callPulse 2s ease-in-out infinite;
}
@keyframes callPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,153,0,.55); }
    50%     { box-shadow: 0 0 0 16px rgba(255,153,0,0); }
}
.call-empty h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; margin-bottom: 6px; color: #fff; }
.call-empty p { font-size: .94rem; margin-bottom: 12px; }
.call-empty__link {
    font-family: var(--font-mono); font-size: .82rem;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    padding: 10px 16px; border-radius: 8px;
    margin-bottom: 16px;
    color: #ff9900;
    word-break: break-all;
}

.call-remotes {
    display: grid; gap: 12px;
    width: 100%; height: 100%;
    /* grid-template adjusted via JS based on participant count */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-auto-rows: 1fr;
}
.call-stage[data-count="1"] .call-remotes { grid-template-columns: 1fr; }
.call-stage[data-count="2"] .call-remotes { grid-template-columns: 1fr 1fr; }
.call-stage[data-count="3"] .call-remotes,
.call-stage[data-count="4"] .call-remotes { grid-template-columns: 1fr 1fr; }
.call-stage[data-count="5"] .call-remotes,
.call-stage[data-count="6"] .call-remotes { grid-template-columns: repeat(3, 1fr); }
.call-stage[data-count="7"] .call-remotes,
.call-stage[data-count="8"] .call-remotes,
.call-stage[data-count="9"] .call-remotes { grid-template-columns: repeat(3, 1fr); }

.call-tile {
    position: relative;
    background: #1c1612;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
/* CALL-FIX-04 (2026-05-29): remote tiles use object-fit:contain so a portrait
   phone camera doesn't get zoomed/cropped when shown in a landscape desktop
   tile. The empty side gets a soft espresso fill so the letterbox looks
   intentional. Self-view (PIP) keeps `cover` because it's small and we
   want it to fill its mini frame. */
.call-tile video {
    width: 100%; height: 100%;
    object-fit: contain;
    background: #0c0a08;
}
.call-tile--self video {
    object-fit: cover;       /* PIP fills its mini-frame, ok to crop */
    transform: scaleX(-1);   /* mirror self-view */
}
.call-tile--self {
    position: absolute;
    bottom: 16px; right: 16px;
    width: min(220px, 22vw);
    aspect-ratio: 16/10;
    z-index: 10;
    border: 2px solid rgba(255,153,0,.6);
    box-shadow: 0 8px 28px rgba(0,0,0,.6);
    transition: transform .12s;
}
.call-tile--self:hover { transform: scale(1.02); }
.call-tile.cam-off video { visibility: hidden; }
.call-tile__placeholder {
    position: absolute; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, #261b10 0%, #1a1208 100%);
}
.call-tile.cam-off .call-tile__placeholder { display: flex; }
.call-avatar {
    width: 88px; height: 88px; border-radius: 50%;
    background: #ff9900; color: #261b10;
    font-family: var(--font-display); font-weight: 700; font-size: 32px;
    display: inline-flex; align-items: center; justify-content: center;
}
.call-tile__label {
    position: absolute; bottom: 12px; left: 12px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(8px);
    padding: 5px 10px; border-radius: 999px;
    font-size: .82rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
}
.call-host-pill {
    background: #ff9900; color: #261b10;
    font-size: .62rem; padding: 1px 6px; border-radius: 3px;
    letter-spacing: .04em; font-weight: 800;
}
.call-tile__bad {
    position: absolute; top: 12px; right: 12px;
    background: rgba(185,28,28,.85);
    color: #fff;
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.call-tile.is-reconnecting::after {
    content: 'Reconnecting...';
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    color: rgba(255,255,255,.85);
    font-family: var(--font-mono); font-size: .9rem;
}
.call-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.call-dot--green { background: #1f7a3a; box-shadow: 0 0 0 2px rgba(31,122,58,.3); }

/* ─── Bottom control bar ─── */
.call-bar {
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(20,15,10,.85);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,.06);
    position: relative;
}
.call-bar__left, .call-bar__center, .call-bar__right {
    display: flex; gap: 10px; align-items: center;
    flex: 1;
}
.call-bar__left { justify-content: flex-end; }
.call-bar__center { justify-content: center; flex: 0; }
.call-bar__right { justify-content: flex-start; }
.call-ctrl {
    background: rgba(255,255,255,.08);
    border: 0;
    color: #fff;
    border-radius: 12px;
    padding: 10px 16px;
    display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
    font-size: .72rem;
    cursor: pointer;
    transition: background .14s, transform .08s;
    font-family: inherit;
    min-width: 76px;
}
.call-ctrl i { font-size: 1.35rem; }
.call-ctrl:hover { background: rgba(255,255,255,.16); }
.call-ctrl:active { transform: scale(.97); }
.call-ctrl[data-on="0"] {
    background: rgba(185,28,28,.85);
}
.call-ctrl[data-on="0"]:hover { background: rgba(220,28,28,.95); }
.call-ctrl.is-on { background: rgba(255,153,0,.9); color: #261b10; }
.call-ctrl.is-on:hover { background: #ff9900; }
.call-ctrl--end {
    background: #b91c1c !important;
    padding: 12px 22px;
    border-radius: 999px;
    min-width: 110px;
}
.call-ctrl--end:hover { background: #d12727 !important; }

/* ============================================================
   CALL-FIX-03 (2026-05-29): Full call-screen theme refresh
   ============================================================
   Goals
     - Match the rest of the site (warm-paper + espresso + WRK orange)
     - Single hangup per device (floating on mobile, bar on desktop)
     - Spotlight layout actually changes visually
     - Portrait tiles on portrait phones (9/16 not 16/9)
     - Subtle "luxury" accents: gold ring on active state, smooth animation
============================================================ */

/* Warm-paper substrate inside the call shell */
.call-app {
    background:
        radial-gradient(circle at 20% 0%, rgba(255,153,0,.10), transparent 55%),
        radial-gradient(circle at 80% 100%, rgba(255,153,0,.07), transparent 50%),
        linear-gradient(180deg, #1a140d 0%, #0e0a06 100%);
}
.call-head, .call-bar {
    /* CALL-FIX-11 (2026-05-30): warmer translucent backdrop so the cream
       control buttons read clearly against it. Subtle gold hairline borders. */
    background:
        linear-gradient(180deg, rgba(38, 27, 16, .94) 0%, rgba(26, 18, 10, .94) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-color: rgba(217, 120, 0, .22) !important;
    box-shadow: 0 1px 0 rgba(255, 200, 80, .08) inset;
}
.call-bar { border-top: 1px solid rgba(217, 120, 0, .22); }
.call-head { border-bottom: 1px solid rgba(217, 120, 0, .22); }

/* CALL-FIX-13 (2026-05-30): single equidistant row. No more left/center/right
   asymmetry - all buttons line up with the same gap, centered in the bar. */
.call-bar--flat { padding: 14px 18px !important; justify-content: center; }
.call-bar--flat .call-bar__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: nowrap;
    max-width: 100%;
}
.call-bar--flat .call-bar__left,
.call-bar--flat .call-bar__center,
.call-bar--flat .call-bar__right { display: none !important; }
@media (max-width: 720px) {
    .call-bar--flat .call-bar__row {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
}

/* CALL-FIX-11 (2026-05-30): Editorial-precision control buttons.
   Cream-paper interior, espresso ink text + icon, 1px gold hairline.
   Active state uses the full orange gradient with espresso text - same
   treatment as the NEW badge on the top nav, so the call view feels
   visually anchored to the rest of the brand. */
.call-ctrl {
    background: linear-gradient(180deg, #fffdf6 0%, #faf2dd 100%) !important;
    color: #261b10 !important;
    border: 1px solid rgba(217, 120, 0, .22) !important;
    border-radius: 14px !important;
    padding: 9px 16px !important;
    min-width: 72px;
    display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
    transition: transform .12s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1)),
                background .15s, border-color .14s,
                box-shadow .22s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1)) !important;
    box-shadow: 0 1px 0 rgba(255, 245, 220, .6) inset,
                0 2px 4px rgba(38, 27, 16, .15);
}
.call-ctrl i {
    color: #d97800 !important;     /* WRK primary-strong */
    font-size: 1.32rem !important;
}
.call-ctrl span {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #4a3b29;
    font-weight: 600;
}
.call-ctrl:hover {
    transform: translateY(-1px);
    border-color: rgba(217, 120, 0, .5) !important;
    box-shadow: 0 1px 0 rgba(255, 245, 220, .6) inset,
                0 6px 18px rgba(38, 27, 16, .25),
                0 0 0 3px rgba(255, 153, 0, .12);
}
.call-ctrl:active { transform: translateY(0) scale(.97); }

/* Active state: full WRK orange gradient + espresso ink + soft halo */
.call-ctrl.is-on {
    background: linear-gradient(135deg, #ffd58a 0%, #ff9900 60%, #e6850a 100%) !important;
    color: #1a0e02 !important;
    border-color: rgba(217, 120, 0, .85) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 6px 22px rgba(255, 153, 0, .55),
                0 0 0 3px rgba(255, 200, 80, .25);
}
.call-ctrl.is-on i,
.call-ctrl.is-on span {
    color: #1a0e02 !important;
}

/* Mute / cam-off "off" state: deep warm brick, not screaming red */
.call-ctrl[data-on="0"] {
    background: linear-gradient(180deg, #c14a3a 0%, #8b2a1f 100%) !important;
    border-color: rgba(177, 61, 45, .5) !important;
    color: #fff5e6 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset,
                0 4px 14px rgba(139, 42, 31, .45);
}
.call-ctrl[data-on="0"] i,
.call-ctrl[data-on="0"] span { color: #fff5e6 !important; }
.call-ctrl[data-on="0"]:hover {
    background: linear-gradient(180deg, #d9594a 0%, #9a3325 100%) !important;
    border-color: rgba(217, 71, 50, .65) !important;
}

/* CALL-FIX-15 (2026-05-30): Subtle "burnished brick" Leave that matches
   the editorial cream/paper feel of the other buttons - same surface,
   refined red ink, gold flare on hover. Still unmistakably the danger
   action, just not harsh. */
.call-ctrl--end {
    background: linear-gradient(180deg, #fbf5e8 0%, #f4ead1 100%) !important;
    color: #8a261b !important;
    border: 1px solid rgba(138, 38, 27, .40) !important;
    border-radius: 14px !important;
    padding: 9px 22px !important;
    min-width: 90px;
    margin-left: 12px;          /* small extra gap from the previous button */
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 2px 6px rgba(138, 38, 27, .10) !important;
    transition: transform .12s, background .14s, box-shadow .22s, border-color .14s, color .14s !important;
}
.call-ctrl--end i {
    color: #8a261b !important;
    font-size: 1.4rem !important;
    transition: color .14s !important;
}
.call-ctrl--end span {
    color: #8a261b !important;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    transition: color .14s !important;
}
.call-ctrl--end:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #fbf5e8 0%, #efdfb6 100%) !important;
    border-color: rgba(138, 38, 27, .70) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 8px 22px rgba(138, 38, 27, .18),
                0 0 0 3px rgba(255, 153, 0, .22) !important;   /* gold flare */
}
.call-ctrl--end:hover i,
.call-ctrl--end:hover span { color: #6e1a12 !important; }
/* Pressed = the only state that goes fully saturated, so the click reads
   as "yes, that did something". Still warm, not harsh. */
.call-ctrl--end:active {
    transform: translateY(0) scale(.97);
    background: linear-gradient(180deg, #9a2a1d 0%, #7a1f15 100%) !important;
    border-color: rgba(138, 38, 27, .85) !important;
}
.call-ctrl--end:active i,
.call-ctrl--end:active span { color: #fbf5e8 !important; }
@media (prefers-reduced-motion: reduce) {
    .call-ctrl, .call-ctrl--end { transition: none !important; transform: none !important; }
}

/* ─── Layout: Grid vs Spotlight ─── */
.call-stage[data-layout="spotlight"] .call-remotes {
    display: grid;
    grid-template-columns: 1fr 180px;
    grid-template-rows: 1fr;
    gap: 8px;
    grid-auto-flow: column;
}
.call-stage[data-layout="spotlight"] .call-remotes > :first-child {
    grid-row: 1;
    grid-column: 1;
}
.call-stage[data-layout="spotlight"] .call-remotes > :not(:first-child) {
    grid-row: span 1;
    grid-column: 2;
    max-height: 140px;
}

/* ─── Mobile: bar wraps + hangup consolidation ─── */
@media (max-width: 720px) {
    .call-bar {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px;
    }
    .call-bar__left, .call-bar__right {
        flex: 1 1 100%;
        justify-content: center;
        order: 2;
        gap: 6px;
    }
    .call-bar__center { display: none; }     /* mobile uses the floating end button instead */
    /* CALL-FIX-11: keep editorial-cream feel on mobile but more compact. */
    .call-ctrl {
        min-width: 58px !important;
        padding: 7px 10px !important;
        border-radius: 12px !important;
        gap: 3px;
    }
    .call-ctrl i { font-size: 1.18rem !important; }
    .call-ctrl span { font-size: .62rem !important; letter-spacing: .07em; }

    /* CALL-FIX-04 (2026-05-29): use a portrait-friendly tall aspect on phones
       (3:5, less extreme than 9:16 so a landscape remote feed isn't dwarfed),
       and don't force the inner <video> to that aspect - let it render at its
       natural ratio inside the tile with letterbox bars. */
    .call-tile {
        aspect-ratio: 3 / 5 !important;
    }
    .call-tile video {
        aspect-ratio: auto !important;     /* let video render natural */
    }
    .call-stage[data-layout="spotlight"] .call-remotes {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
    .call-stage[data-layout="spotlight"] .call-remotes > :not(:first-child) {
        grid-column: 1;
        max-height: 88px;
    }
}

/* CALL-FIX-09 (2026-05-30): In-call message bubble notifications.
   When a chat message arrives during a call and the chat sidebar is closed,
   a bubble slides in from the right at the top of the screen, sits for 3.5s,
   then slides out. Multiple bubbles stack vertically. Tap to open chat. */
.call-bubble-stack {
    position: fixed;
    top: 72px;
    right: 16px;
    z-index: 1080;
    display: flex; flex-direction: column; gap: 8px;
    max-width: min(340px, 90vw);
    pointer-events: none;            /* container ignores clicks; individual bubbles enable */
}
.call-bubble {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(38, 27, 16, .96) 0%, rgba(26, 18, 10, .96) 100%);
    border: 1px solid rgba(255, 222, 174, .22);
    border-left: 3px solid var(--wo-primary, #ff9900);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
    color: #fef6e3;
    text-align: left;
    cursor: pointer;
    min-width: 220px;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity .26s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1)),
                transform .26s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1));
}
.call-bubble.is-in  { opacity: 1; transform: translateX(0); }
.call-bubble.is-out { opacity: 0; transform: translateX(40px); }
.call-bubble:hover { border-color: rgba(255, 200, 80, .45); }
.call-bubble__avatar {
    flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, #ffd58a 0%, #ff9900 100%);
    color: #1a0e02;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .8rem;
    font-family: var(--font-display);
}
.call-bubble__body {
    flex: 1; min-width: 0;
}
.call-bubble__who {
    font-weight: 600; font-size: .82rem;
    color: var(--wo-primary, #ff9900);
    margin-bottom: 2px;
}
.call-bubble__text {
    font-size: .85rem; line-height: 1.35;
    color: #fef6e3;
    word-wrap: break-word;
}
/* CALL-FIX-10 (2026-05-30): explicit "Reply" CTA on each bubble */
.call-bubble__reply {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px;
    background: rgba(255, 153, 0, .18);
    border: 1px solid rgba(255, 200, 80, .35);
    color: var(--wo-primary, #ff9900);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}
.call-bubble:hover .call-bubble__reply {
    background: rgba(255, 153, 0, .3);
    color: #fef6e3;
}
.call-bubble__reply i { font-size: .8rem; }

/* CALL-FIX-10: unread badge on the Chat button */
#ctlChat { position: relative; }
.call-chat-unread {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: linear-gradient(135deg, #ffd58a 0%, #ff9900 100%);
    color: #1a0e02;
    border: 2px solid rgba(20, 15, 10, .9);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(255, 153, 0, .45);
}
.call-chat-unread.pop {
    animation: chatUnreadPop .35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes chatUnreadPop {
    0%   { transform: scale(.6); }
    60%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}
/* Mobile placement: under the brand bar, full width */
@media (max-width: 720px) {
    .call-bubble-stack {
        top: 60px;
        right: 8px; left: 8px;
        max-width: none;
    }
    .call-bubble { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .call-bubble { transition: opacity .15s ease; transform: none !important; }
}

/* CALL-FIX-14 (2026-05-30): WO-themed Leave confirm modal.
   Replaces the browser's confirm() dialog with on-brand UX. */
.call-leave-confirm {
    position: fixed; inset: 0;
    z-index: 1110;        /* above the call view and invite modal */
}
.call-leave-confirm[hidden] { display: none !important; }
.call-leave-confirm__backdrop {
    position: absolute; inset: 0;
    background: rgba(20, 14, 8, .68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .2s;
}
.call-leave-confirm__panel {
    position: absolute; left: 50%; top: 22vh;
    transform: translateX(-50%) translateY(-12px) scale(.97);
    width: min(440px, 92vw);
    background: linear-gradient(180deg, var(--wo-card, #fffdf6) 0%, var(--wo-paper, #fbf5e8) 100%);
    border: 1px solid var(--wo-line, #d6cdb7);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(38, 27, 16, .45);
    opacity: 0;
    transition: opacity .22s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1)),
                transform .22s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1));
    overflow: hidden;
}
.call-leave-confirm.is-open .call-leave-confirm__backdrop { opacity: 1; }
.call-leave-confirm.is-open .call-leave-confirm__panel    { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.call-leave-confirm__head {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1.2rem 1.4rem 0.8rem;
}
/* CALL-FIX-15 (2026-05-30): softer brick + warm cream highlight on the
   modal's danger icon - pairs with the new Confirm button below. */
.call-leave-confirm__icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    background: linear-gradient(180deg, #9a2a1d 0%, #7a1f15 100%);
    color: #fbf5e8;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset,
                0 4px 10px rgba(138, 38, 27, .22);
}
.call-leave-confirm__icon i { font-size: 1.4rem; }
.call-leave-confirm__head h3 {
    margin: 2px 0 4px; font-family: var(--font-display);
    font-size: 1.15rem; color: var(--wo-ink, #261b10);
    font-weight: 700;
}
.call-leave-confirm__sub {
    color: var(--wo-text-muted, #7a6a52);
    font-size: .85rem; margin: 0;
}
.call-leave-confirm__foot {
    display: flex; justify-content: flex-end; gap: .6rem;
    padding: .9rem 1.4rem 1.1rem;
}
/* CALL-FIX-15 (2026-05-30): Confirm button in the Leave modal matches the
   bar Leave - burnished brick on cream, gold flare on hover. */
.call-leave-confirm__foot .btn-danger {
    background: linear-gradient(180deg, #fbf5e8 0%, #f4ead1 100%);
    border: 1px solid rgba(138, 38, 27, .40);
    color: #8a261b;
    font-weight: 700;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 2px 6px rgba(138, 38, 27, .10);
    transition: transform .12s, background .14s, box-shadow .22s, border-color .14s, color .14s;
}
.call-leave-confirm__foot .btn-danger:hover {
    background: linear-gradient(180deg, #fbf5e8 0%, #efdfb6 100%);
    border-color: rgba(138, 38, 27, .70);
    color: #6e1a12;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 8px 22px rgba(138, 38, 27, .18),
                0 0 0 3px rgba(255, 153, 0, .22);  /* gold flare */
}
.call-leave-confirm__foot .btn-danger:active {
    transform: scale(.97);
    background: linear-gradient(180deg, #9a2a1d 0%, #7a1f15 100%);
    color: #fbf5e8;
    border-color: rgba(138, 38, 27, .85);
}

/* CALL-FIX-14 (2026-05-30): Chat header Leave button. Pill with red accent. */
.call-chat__actions {
    display: flex; align-items: center; gap: .5rem;
}
/* CALL-FIX-15 (2026-05-30): match the bar Leave - subtle burnished brick. */
.call-chat__leave {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: 6px 12px;
    background: linear-gradient(180deg, #fbf5e8 0%, #f4ead1 100%);
    color: #8a261b;
    border: 1px solid rgba(138, 38, 27, .40);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .7rem; font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 2px 6px rgba(138, 38, 27, .10);
    transition: transform .12s, background .14s, box-shadow .22s, border-color .14s, color .14s;
}
.call-chat__leave:hover {
    background: linear-gradient(180deg, #fbf5e8 0%, #efdfb6 100%);
    border-color: rgba(138, 38, 27, .70);
    color: #6e1a12;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 6px 16px rgba(138, 38, 27, .18),
                0 0 0 3px rgba(255, 153, 0, .22);  /* gold flare */
}
.call-chat__leave:active {
    transform: scale(.97);
    background: linear-gradient(180deg, #9a2a1d 0%, #7a1f15 100%);
    color: #fbf5e8;
    border-color: rgba(138, 38, 27, .85);
}
.call-chat__leave i { font-size: .95rem; }

/* CALL-FIX-06 (2026-05-30): Invite modal */
.call-invite {
    position: fixed; inset: 0; z-index: 1100;
}
.call-invite[hidden] { display: none !important; }
.call-invite__backdrop {
    position: absolute; inset: 0;
    background: rgba(20, 14, 8, .6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .2s;
}
.call-invite__panel {
    position: absolute; left: 50%; top: 14vh;
    transform: translateX(-50%) translateY(-12px) scale(.97);
    width: min(520px, 92vw);
    background: linear-gradient(180deg, var(--wo-card, #fffdf6) 0%, var(--wo-paper, #fbf5e8) 100%);
    border: 1px solid var(--wo-line, #d6cdb7);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(38, 27, 16, .35);
    opacity: 0;
    transition: opacity .22s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1)),
                transform .22s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1));
    overflow: hidden;
}
.call-invite.is-open .call-invite__backdrop { opacity: 1; }
.call-invite.is-open .call-invite__panel    { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.call-invite__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--wo-line, #d6cdb7);
    background: var(--wo-paper-2, #f4ecd6);
}
.call-invite__head h3 {
    margin: 0; font-family: var(--font-display);
    font-size: 1.05rem; color: var(--wo-ink, #261b10);
}
.call-invite__head i { color: var(--wo-primary-strong); }
.call-invite__body  { padding: 1rem 1.2rem; }
.call-invite__hint  { color: var(--wo-text-muted); margin-bottom: .5rem; }
.call-invite__hint code { background: var(--wo-paper-2); padding: 1px 5px; border-radius: 3px; color: var(--wo-ink); }
.call-invite__textarea {
    width: 100%;
    background: var(--wo-card, #fff);
    border: 1px solid var(--wo-line, #d6cdb7);
    border-radius: 6px;
    padding: .6rem .75rem;
    font-family: var(--font-mono);
    font-size: .88rem;
    color: var(--wo-ink);
    resize: vertical;
}
.call-invite__textarea:focus {
    outline: none;
    border-color: var(--wo-primary);
    box-shadow: 0 0 0 3px rgba(255, 153, 0, .18);
}
.call-invite__results {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--wo-line-soft);
    max-height: 200px;
    overflow-y: auto;
}
/* CALL-FIX-12 (2026-05-30): Copy-link section inside invite modal */
.call-invite__divider {
    display: flex; align-items: center;
    margin: 1rem 0 .75rem;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wo-text-muted);
}
.call-invite__divider::before,
.call-invite__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--wo-line);
}
.call-invite__divider span { padding: 0 .75rem; }
.call-invite__copylink {
    display: flex; align-items: center; gap: .5rem;
}
.call-invite__linkfield {
    flex: 1;
    background: var(--wo-paper-2, #f4ecd6);
    border: 1px solid var(--wo-line, #d6cdb7);
    border-radius: 6px;
    padding: .5rem .7rem;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--wo-ink);
}
.call-invite__linkfield:focus {
    outline: none;
    border-color: var(--wo-primary);
    background: var(--wo-card);
}

/* CALL-FIX-12 (2026-05-30): in fullscreen, auto-hide head + bar after 2s idle.
   Hovering or moving the mouse brings them back. */
body.call-idle .call-head,
body.call-idle .call-bar,
body.call-idle .call-end-floating {
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}
.call-head, .call-bar, .call-end-floating {
    transition: opacity .25s ease;
}
body.call-idle .call-app { cursor: none; }
.call-invite__foot {
    display: flex; justify-content: flex-end; gap: .5rem;
    padding: .75rem 1.2rem;
    border-top: 1px solid var(--wo-line, #d6cdb7);
    background: var(--wo-paper-2, #f4ecd6);
}

/* CALL-FIX-05 (2026-05-29): connection-status banner */
.call-status-banner {
    position: fixed;
    top: 70px; left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    background: linear-gradient(180deg, #2c1d10 0%, #1d130b 100%);
    border: 1px solid rgba(255, 153, 0, .35);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,.5);
    max-width: 92vw;
    animation: csb-pop .25s var(--wo-ease-out, cubic-bezier(.2,.7,.2,1)) both;
}
.call-status-banner__inner {
    display: flex; align-items: center; gap: .85rem;
    padding: .8rem 1rem;
    color: #fef6e3;
}
.call-status-banner__inner > i {
    font-size: 1.5rem;
    color: #ff9900;
    flex-shrink: 0;
}
.call-status-banner__inner strong { color: #fef6e3; }
.call-status-banner__inner .small { color: rgba(254, 246, 227, .72); font-size: .78rem; }
.call-status-banner .btn {
    background: linear-gradient(135deg, #ffd58a 0%, #ff9900 100%);
    color: #1a0e02; border: 0; font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 153, 0, .35);
}
.call-status-banner .btn:hover { filter: brightness(1.07); }
@keyframes csb-pop {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.95); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* CALL-FIX-05 (2026-05-29): on mobile, when chat is open, the call view
   shrinks to a small floating PIP at top-right while the chat takes the
   full screen. Tap the PIP to return to the call. */
@media (max-width: 720px) {
    .call-app.has-chat-open .call-stage {
        position: fixed;
        top: 56px; right: 8px;
        width: 120px; height: 200px;
        z-index: 1095;
        border-radius: 12px;
        overflow: hidden;
        border: 2px solid rgba(255, 153, 0, .6);
        box-shadow: 0 10px 30px rgba(0,0,0,.5);
        background: #0c0a08;
    }
    .call-app.has-chat-open .call-stage::after {
        content: 'Tap to return';
        position: absolute;
        bottom: 0; left: 0; right: 0;
        background: rgba(20, 15, 10, .8);
        color: #fef6e3;
        font-size: .65rem;
        text-align: center;
        padding: 3px;
        pointer-events: none;
    }
    .call-app.has-chat-open .call-tile--self {
        bottom: 22px; right: 4px;
        width: 36px; height: 50px;
        border-width: 1px;
    }
    .call-app.has-chat-open .call-bar {
        display: none;        /* hide the bar; rely on floating End + chat composer */
    }
    .call-app.has-chat-open .call-chat {
        position: fixed; inset: 0;
        width: 100% !important; height: 100% !important;
        max-width: none !important;
        z-index: 1090;
        border: 0;
        border-radius: 0;
    }
    .call-app.has-chat-open .call-chat__head h3::after {
        content: ' · call ongoing';
        color: var(--wo-primary, #ff9900);
        font-weight: 400;
        font-size: .8rem;
        margin-left: .25rem;
    }
}

/* Always-visible safety hangup, mobile-only.
   Premium pill with subtle gold ring on hover. */
.call-end-floating {
    position: fixed;
    top: 12px; right: 12px;
    z-index: 1090;
    background: linear-gradient(180deg, #c12121 0%, #8b1414 100%);
    color: #fff;
    border: 1px solid rgba(255, 222, 174, .25);
    width: 48px; height: 48px;
    border-radius: 999px;
    display: none;
    align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 0 0 rgba(255, 200, 80, 0);
    cursor: pointer;
    transition: transform .12s, background .14s, box-shadow .22s;
}
.call-end-floating i { font-size: 1.35rem; }
.call-end-floating:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 0 4px rgba(255, 200, 80, .35);
}
.call-end-floating:active { transform: scale(.95); }
/* ONLY shown on mobile / tablet (desktop uses the bar's End button) */
@media (max-width: 720px) {
    .call-app .call-end-floating { display: inline-flex; }
}

/* ─── Toast inside call ─── */
.call-toast {
    position: fixed; bottom: 110px; left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(20,15,10,.92);
    border: 1px solid rgba(255,153,0,.4);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: .9rem;
    opacity: 0;
    transition: opacity .2s, transform .2s;
    z-index: 1000;
}
.call-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ─── Pre-flight modal ─── */
.call-preflight {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(0,0,0,.88);
    display: flex; align-items: center; justify-content: center;
    transition: opacity .25s;
}
.call-preflight.is-hidden { opacity: 0; pointer-events: none; }
.call-preflight__panel {
    background: #1c1612;
    color: #fff;
    border-radius: 18px;
    padding: 28px;
    width: min(540px, 92vw);
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.call-preflight__panel h2 {
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.6rem; margin: 0 0 4px;
}
.call-preflight__sub { color: rgba(255,255,255,.65); margin-bottom: 18px; }
.call-preflight__preview {
    background: #0c0a08;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/9;
    margin-bottom: 16px;
}
.call-preflight__preview video {
    width: 100%; height: 100%; object-fit: cover;
    transform: scaleX(-1);
}
.call-preflight__row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-bottom: 12px;
}
.call-preflight__row label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: .78rem; color: rgba(255,255,255,.65);
}
.call-preflight__row select {
    background: #0c0a08;
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    padding: 8px 10px;
    border-radius: 8px;
    font-family: inherit; font-size: .9rem;
}
.call-pf-toggle {
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
    cursor: pointer;
}
.call-pf-toggle input[type="checkbox"] { accent-color: #ff9900; }
.call-preflight__actions {
    display: flex; justify-content: flex-end; gap: 10px;
    margin-top: 20px;
}
.call-preflight__actions .btn-dark {
    background: #ff9900; border-color: #ff9900; color: #261b10; font-weight: 700;
}
.call-preflight__actions .btn-dark:hover { background: #ffaa1f; border-color: #ffaa1f; color: #261b10; }
.call-preflight__hint { font-size: .82rem; color: #ff6b6b; margin-top: 12px; }

/* ───────── In-call chat sidebar ───────── */
.call-chat {
    background: #14100a;
    border-left: 1px solid rgba(255,255,255,.08);
    display: flex; flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.call-chat[hidden] { display: none; }
.call-chat__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(20,15,10,.85);
}
.call-chat__head h3 {
    margin: 0; font-family: var(--font-display);
    font-weight: 700; font-size: 1.05rem;
}
.call-chat__close {
    /* CALL-FIX-03 (2026-05-29): bigger + clearer on mobile so user can find it. */
    background: rgba(255, 222, 174, .12); border: 1px solid rgba(255, 222, 174, .15); color: #fef6e3;
    width: 38px; height: 38px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .12s, border-color .14s;
}
.call-chat__close i { font-size: 1.05rem; }
.call-chat__close:hover { background: rgba(255, 222, 174, .22); border-color: rgba(255, 200, 80, .35); }
.call-chat__messages {
    flex: 1; overflow-y: auto;
    padding: 14px;
    display: flex; flex-direction: column; gap: 8px;
}
.call-chat__messages::-webkit-scrollbar { width: 6px; }
.call-chat__messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }

/* CALL-FIX-01 (2026-05-29): "Show earlier messages" pill at top of chat */
.call-chat__more {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    margin: 6px auto 12px;
    padding: 6px 14px;
    background: rgba(255,255,255,.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    font-size: .75rem;
    cursor: pointer;
    transition: background .14s;
}
.call-chat__more:hover  { background: rgba(255,255,255,.16); }
.call-chat__more:active { transform: scale(.97); }
.call-chat__more i      { font-size: 1rem; }
.call-chat__msg {
    display: flex; flex-direction: column;
    max-width: 85%;
    align-self: flex-start;
}
.call-chat__msg.is-mine {
    align-self: flex-end;
    align-items: flex-end;
}
.call-chat__who {
    font-size: .68rem;
    color: #ffd58a;
    font-weight: 700;
    margin-bottom: 2px;
    padding: 0 2px;
}
.call-chat__bubble {
    background: rgba(255,255,255,.10);
    padding: 8px 12px;
    border-radius: 14px 14px 14px 4px;
    font-size: .88rem;
    line-height: 1.4;
    color: #fff;
    word-wrap: break-word;
}
.call-chat__msg.is-mine .call-chat__bubble {
    background: #ff9900;
    color: #261b10;
    border-radius: 14px 14px 4px 14px;
    font-weight: 500;
}
.call-chat__time {
    font-size: .65rem;
    color: rgba(255,255,255,.4);
    margin-top: 2px;
    padding: 0 4px;
    font-family: var(--font-mono);
}
.call-chat__composer {
    display: flex; gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(20,15,10,.6);
}
.call-chat__composer input {
    flex: 1;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    color: #fff;
    padding: 9px 12px;
    border-radius: 999px;
    font-family: inherit; font-size: .9rem;
}
.call-chat__composer input::placeholder { color: rgba(255,255,255,.4); }
.call-chat__composer input:focus {
    outline: none;
    border-color: #ff9900;
    background: rgba(255,153,0,.08);
}
.call-chat__composer button {
    background: #ff9900;
    color: #261b10;
    border: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .12s, transform .08s;
}
.call-chat__composer button:hover { background: #ffaa1f; }
.call-chat__composer button:active { transform: scale(.94); }

/* On phones, the chat takes over the whole stage */
@media (max-width: 720px) {
    .call-app.has-chat-open {
        grid-template-columns: 0 1fr;
    }
    .call-app.has-chat-open .call-stage {
        display: none;
    }
}

.call-preflight__err {
    margin-top: 18px;
    background: rgba(185,28,28,.12);
    border: 1px solid rgba(220,38,38,.4);
    border-radius: 12px;
    padding: 16px;
    display: flex; gap: 14px;
    color: #fff;
}
.call-preflight__err[hidden] { display: none; }
.call-preflight__err-icon {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(220,38,38,.25);
    color: #ffb0b0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.call-preflight__err-body { flex: 1; min-width: 0; }
.call-preflight__err-body h4 {
    margin: 0 0 4px; font-family: var(--font-display);
    font-size: 1.05rem; font-weight: 700; color: #fff;
}
.call-preflight__err-body p {
    margin: 0 0 10px; font-size: .9rem; color: rgba(255,255,255,.85);
}
.call-preflight__err-help {
    background: rgba(0,0,0,.25);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .85rem;
    color: rgba(255,255,255,.88);
}
.call-preflight__err-help ol {
    margin: 0; padding-left: 18px;
    display: flex; flex-direction: column; gap: 4px;
}
.call-preflight__err-help li { line-height: 1.45; }
.call-preflight__err-help code {
    background: rgba(255,255,255,.1);
    padding: 1px 6px; border-radius: 3px;
    color: #ffd58a;
    font-family: var(--font-mono); font-size: .78rem;
}
.call-preflight__err-help strong { color: #ff9900; }
.call-preflight__err-actions {
    display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
.call-preflight__err-actions .btn-outline-light {
    border-color: rgba(255,255,255,.4);
    color: #fff;
}
.call-preflight__err-actions .btn-outline-light:hover {
    background: rgba(255,255,255,.1);
    border-color: #fff;
    color: #fff;
}

/* ============================================================
   TWO-FACTOR AUTHENTICATION SETUP (premium 3-step wizard)
   ============================================================ */
.twofa-setup {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}
.twofa-setup__head { margin-bottom: 32px; }
.twofa-setup__crumb {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--wo-ink-2); font-size: .82rem;
    font-family: var(--font-mono);
    letter-spacing: .04em;
    margin-bottom: 14px;
}
.twofa-setup__crumb a {
    color: var(--wo-ink); text-decoration: none;
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    transition: background .12s;
}
.twofa-setup__crumb a:hover { background: var(--wo-paper); border-color: #ff9900; color: #b95400; }
.twofa-setup__head h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.1rem;
    letter-spacing: -.02em;
    margin: 0 0 10px;
    color: var(--wo-ink);
}
.twofa-setup__head p {
    color: var(--wo-ink-2);
    font-size: 1rem;
    margin: 0;
}
.twofa-steps {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: 24px;
    counter-reset: step;
}
.twofa-step {
    display: flex; gap: 18px;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 14px;
    padding: 24px;
}
.twofa-step__num {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--wo-ink);
    color: #ff9900;
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.05rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.twofa-step__body { flex: 1; min-width: 0; }
.twofa-step__body h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0 0 6px;
    color: var(--wo-ink);
}
.twofa-step__body > p {
    color: var(--wo-ink-2);
    font-size: .94rem;
    margin: 0 0 14px;
}

/* App grid */
.twofa-apps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 4px;
}
.twofa-app {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px;
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    border-radius: 10px;
    text-decoration: none;
    color: var(--wo-ink);
    transition: border-color .14s, transform .08s, background .14s;
}
.twofa-app:hover {
    border-color: #ff9900;
    background: rgba(255,153,0,.04);
    transform: translateY(-1px);
    color: var(--wo-ink);
}
.twofa-app i { font-size: 1.3rem; color: #ff9900; }
.twofa-app span { font-weight: 700; font-size: .94rem; }
.twofa-app em {
    font-style: normal;
    font-size: .72rem;
    color: var(--wo-text-muted);
    font-family: var(--font-mono);
}

/* QR card */
.twofa-qr-card {
    display: grid; grid-template-columns: auto 1fr;
    gap: 24px;
    padding: 20px;
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
}
@media (max-width: 600px) {
    .twofa-qr-card { grid-template-columns: 1fr; }
}
.twofa-qr {
    background: #fbf5e8;      /* matches the QR's bgcolor so it blends seamlessly */
    border-radius: 10px;
    padding: 14px;
    box-shadow: inset 0 0 0 1px rgba(38,27,16,.08);
}
.twofa-qr img {
    display: block;
    width: 200px; height: 200px;
    background: transparent;
}
.twofa-qr-side { display: flex; flex-direction: column; gap: 10px; }
.twofa-qr-side__label {
    font-size: .82rem; color: var(--wo-ink-2);
    margin: 0;
}
.twofa-secret {
    font-family: var(--font-mono);
    font-size: .92rem; letter-spacing: .04em;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 8px;
    padding: 12px 14px;
    color: var(--wo-ink);
    word-break: break-all;
    user-select: all;
}
.twofa-copy {
    align-self: flex-start;
    background: transparent;
    border: 1px solid var(--wo-line);
    color: var(--wo-ink);
    padding: 7px 14px;
    border-radius: 6px;
    font-size: .85rem; font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .12s, border-color .12s;
}
.twofa-copy:hover { background: rgba(255,153,0,.08); border-color: #ff9900; color: #b95400; }
.twofa-copy.is-done { background: rgba(31,122,58,.10); border-color: #1f7a3a; color: #1f7a3a; }
.twofa-qr-side__hint {
    font-size: .78rem; color: var(--wo-text-muted);
    margin: 4px 0 0;
}
.twofa-qr-side__hint i { color: var(--wo-primary-deep); }

/* 6-digit OTP input */
.twofa-form { margin-top: 6px; }
.twofa-otp {
    display: flex; gap: 8px;
    margin: 0 0 18px;
}
.twofa-otp input {
    flex: 1; min-width: 0; max-width: 60px;
    height: 60px;
    border: 1.5px solid var(--wo-line);
    background: var(--wo-paper);
    border-radius: 10px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--wo-ink);
    transition: border-color .14s, box-shadow .14s;
}
.twofa-otp input:focus {
    outline: 0;
    border-color: #ff9900;
    box-shadow: 0 0 0 4px rgba(255,153,0,.14);
}
.twofa-confirm {
    background: var(--wo-ink);
    color: #ff9900;
    border: 0;
    padding: 14px 22px;
    border-radius: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    width: 100%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .14s, color .14s, transform .08s;
}
.twofa-confirm:hover:not(:disabled) { background: #ff9900; color: var(--wo-ink); }
.twofa-confirm:disabled { opacity: .45; cursor: not-allowed; }
.twofa-confirm:active:not(:disabled) { transform: translateY(1px); }
.twofa-foot {
    margin-top: 24px;
    padding: 14px 18px;
    background: rgba(255,153,0,.08);
    border: 1px solid rgba(255,153,0,.25);
    border-left: 3px solid #ff9900;
    border-radius: 8px;
    font-size: .88rem;
    color: var(--wo-ink-2);
    display: flex; gap: 10px; align-items: flex-start;
}
.twofa-foot i { color: #ff9900; font-size: 1.1rem; margin-top: 1px; }

/* ============================================================
   2FA BACKUP CODES (shown once after enabling)
   ============================================================ */
.twofa-codes { max-width: 700px; margin: 0 auto; padding: 32px 24px 80px; }
.twofa-codes__head { text-align: center; margin-bottom: 28px; }
.twofa-codes__check {
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(31,122,58,.14);
    color: #1f7a3a;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px;
    margin-bottom: 14px;
}
.twofa-codes__head h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.9rem; letter-spacing: -.02em;
    margin: 0 0 10px;
}
.twofa-codes__head p { color: var(--wo-ink-2); margin: 0 auto; max-width: 540px; }
.twofa-codes__grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 18px;
}
.twofa-codes__code {
    font-family: var(--font-mono);
    font-size: 1.05rem; font-weight: 700;
    letter-spacing: .08em;
    color: var(--wo-ink);
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    border-radius: 8px;
    padding: 12px 14px;
    text-align: center;
    user-select: all;
}
.twofa-codes__actions {
    display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
    margin-bottom: 22px;
}
.twofa-codes__actions .btn-dark {
    background: var(--wo-ink); color: #ff9900;
    border-color: var(--wo-ink); font-weight: 700;
}
.twofa-codes__actions .btn-dark:hover { background: #ff9900; color: var(--wo-ink); }
.twofa-codes__warning {
    background: rgba(185,28,28,.07);
    border: 1px solid rgba(185,28,28,.25);
    border-left: 3px solid #b91c1c;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: .88rem;
    color: var(--wo-ink);
    display: flex; gap: 10px;
}
.twofa-codes__warning i { color: #b91c1c; font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.twofa-codes__done {
    margin-top: 22px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
    padding-top: 22px;
    border-top: 1px solid var(--wo-line);
}
.twofa-codes__done label {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
}
.twofa-codes__done input[type=checkbox] {
    width: 18px; height: 18px; accent-color: #ff9900;
}
.twofa-codes__done .btn-dark {
    background: var(--wo-ink); color: #ff9900;
    border-color: var(--wo-ink); font-weight: 700;
    transition: opacity .14s, background .14s, color .14s;
}
.twofa-codes__done .btn-dark:hover {
    background: #ff9900; color: var(--wo-ink);
}
@media print {
    .twofa-codes__actions, .twofa-codes__done, .wo-header, .wo-footer { display: none !important; }
}

/* ============================================================
   2FA MANAGE (shown when 2FA is already enabled)
   ============================================================ */
.twofa-manage { max-width: 740px; margin: 0 auto; padding: 32px 24px 80px; }
.twofa-manage__head { margin-bottom: 22px; }
.twofa-manage__crumb {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--wo-ink-2); font-family: var(--font-mono);
    font-size: .82rem; letter-spacing: .04em;
    margin-bottom: 14px;
}
.twofa-manage__crumb a {
    color: var(--wo-ink); text-decoration: none;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--wo-card); border: 1px solid var(--wo-line);
    display: inline-flex; align-items: center; justify-content: center;
}
.twofa-manage__crumb a:hover { background: var(--wo-paper); border-color: #ff9900; color: #b95400; }
.twofa-manage__head h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 2rem; letter-spacing: -.02em;
    margin: 0 0 8px;
}
.twofa-manage__head p { color: var(--wo-ink-2); margin: 0; }
.twofa-manage__status {
    display: flex; gap: 18px; align-items: flex-start;
    background: rgba(31,122,58,.06);
    border: 1px solid rgba(31,122,58,.3);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 22px;
}
.twofa-manage__check {
    flex-shrink: 0;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(31,122,58,.18);
    color: #1f7a3a;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.twofa-manage__status h2 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.15rem; margin: 0 0 4px; color: #1f7a3a;
}
.twofa-manage__status p { margin: 0; color: var(--wo-ink); font-size: .92rem; }
.twofa-manage__small {
    color: var(--wo-text-muted) !important;
    font-family: var(--font-mono);
    font-size: .78rem !important;
    margin-top: 6px !important;
}
.twofa-manage__panel {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}
.twofa-manage__panel summary {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
}
.twofa-manage__panel summary::-webkit-details-marker { display: none; }
.twofa-manage__panel summary:hover { background: var(--wo-paper); }
.twofa-manage__action-icon {
    flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255,153,0,.15);
    color: #ff9900;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.twofa-manage__action-icon--danger {
    background: rgba(185,28,28,.10);
    color: #b91c1c;
}
.twofa-manage__panel summary > div {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.twofa-manage__panel summary strong {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--wo-ink);
}
.twofa-manage__panel summary em {
    font-style: normal;
    color: var(--wo-ink-2);
    font-size: .85rem;
}
.twofa-manage__chev {
    color: var(--wo-text-muted);
    transition: transform .14s;
}
.twofa-manage__panel[open] .twofa-manage__chev {
    transform: rotate(180deg);
}
.twofa-manage__form {
    padding: 0 20px 20px;
    border-top: 1px solid var(--wo-line);
    padding-top: 18px;
}
.twofa-manage__label {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 14px;
}
.twofa-manage__label > span {
    font-size: .82rem; font-weight: 600;
    color: var(--wo-ink-2);
}
.twofa-manage__label input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--wo-line);
    background: var(--wo-paper);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 1rem; letter-spacing: .05em;
    color: var(--wo-ink);
    transition: border-color .12s, box-shadow .12s;
}
.twofa-manage__label input:focus {
    outline: 0; border-color: #ff9900;
    box-shadow: 0 0 0 4px rgba(255,153,0,.16);
}
.twofa-manage__form .btn-dark {
    background: var(--wo-ink); color: #ff9900;
    border-color: var(--wo-ink);
    font-family: var(--font-display); font-weight: 700;
}
.twofa-manage__form .btn-dark:hover { background: #ff9900; color: var(--wo-ink); }
.twofa-manage__form .btn-danger {
    background: #b91c1c; border-color: #b91c1c; color: #fff;
    font-family: var(--font-display); font-weight: 700;
}
.twofa-manage__form .btn-danger:hover { background: #a01818; border-color: #a01818; color: #fff; }
.twofa-manage__lost {
    margin-top: 22px;
    background: rgba(255,153,0,.05);
    border: 1px solid rgba(255,153,0,.2);
    border-radius: 10px;
    padding: 16px 18px;
}
.twofa-manage__lost h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 6px;
    color: var(--wo-ink);
    display: inline-flex; align-items: center; gap: 8px;
}
.twofa-manage__lost h3 i { color: #ff9900; }
.twofa-manage__lost p { margin: 0; font-size: .9rem; color: var(--wo-ink-2); }
.twofa-manage__lost a { color: #b95400; font-weight: 600; }
.twofa-manage__lost .btn-dark {
    background: var(--wo-ink); color: #ff9900;
    border-color: var(--wo-ink); font-weight: 700;
    margin-top: 10px;
}
.twofa-manage__lost .btn-dark:hover { background: #ff9900; color: var(--wo-ink); }

/* ============================================================
   SUPPORT - Lost 2FA request form
   ============================================================ */
.support { max-width: 700px; margin: 0 auto; padding: 32px 24px 80px; }
.support__head { margin-bottom: 22px; }
.support__crumb {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--wo-ink-2); font-family: var(--font-mono);
    font-size: .82rem; letter-spacing: .04em;
    margin-bottom: 14px;
}
.support__crumb a {
    color: var(--wo-ink); text-decoration: none;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--wo-card); border: 1px solid var(--wo-line);
    display: inline-flex; align-items: center; justify-content: center;
}
.support__crumb a:hover { background: var(--wo-paper); border-color: #ff9900; color: #b95400; }
.support__head h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 2rem; letter-spacing: -.02em;
    margin: 0 0 8px;
}
.support__head p { color: var(--wo-ink-2); margin: 0; }

.support__account {
    display: flex; align-items: center; gap: 14px;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 18px;
}
.support__account-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--wo-ink); color: #ff9900;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 14px;
}
.support__account-name { font-weight: 700; color: var(--wo-ink); }
.support__account-mail {
    font-family: var(--font-mono);
    color: var(--wo-ink-2);
    font-size: .82rem;
}
.support__account-tag {
    margin-left: auto;
    background: rgba(31,122,58,.10);
    color: #1f7a3a;
    border: 1px solid rgba(31,122,58,.3);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.support__form {
    display: flex; flex-direction: column; gap: 16px;
}
.support__field {
    border: 1px solid var(--wo-line);
    background: var(--wo-card);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.support__field legend {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--wo-ink);
    padding: 0;
    margin-bottom: 4px;
}
.support__field legend small,
.support__field span small {
    font-weight: 400;
    color: var(--wo-text-muted);
    font-family: var(--font-mono);
    font-size: .76rem;
    margin-left: 4px;
}
.support__field label {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s;
    font-size: .92rem;
}
.support__field label:hover { background: var(--wo-paper); }
.support__field input[type=radio] { accent-color: #ff9900; }
.support__field--text > span {
    font-size: .82rem; font-weight: 600;
    color: var(--wo-ink-2);
}
.support__field--text textarea,
.support__field--text input[type=tel],
.support__field--text input[type=text] {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--wo-line);
    background: var(--wo-paper);
    border-radius: 8px;
    font-family: inherit; font-size: .94rem;
    color: var(--wo-ink);
    transition: border-color .12s, box-shadow .12s;
}
.support__field--text textarea:focus,
.support__field--text input:focus {
    outline: 0; border-color: #ff9900;
    box-shadow: 0 0 0 4px rgba(255,153,0,.16);
}
.support__notice {
    display: flex; gap: 12px; align-items: flex-start;
    background: rgba(255,153,0,.06);
    border: 1px solid rgba(255,153,0,.25);
    border-left: 3px solid #ff9900;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: .88rem;
    color: var(--wo-ink);
}
.support__notice i { color: #ff9900; font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.support__notice strong { display: block; margin-bottom: 4px; }
.support__notice ol { margin: 0; padding-left: 18px; color: var(--wo-ink-2); }
.support__notice code { background: var(--wo-card); padding: 1px 6px; border-radius: 3px; font-family: var(--font-mono); font-size: .82rem; color: var(--wo-ink); }
.support__actions {
    display: flex; justify-content: flex-end; gap: 10px;
    padding-top: 6px;
}
.support__actions .btn-dark {
    background: var(--wo-ink); color: #ff9900;
    border-color: var(--wo-ink); font-weight: 700;
    padding: 10px 22px;
}
.support__actions .btn-dark:hover { background: #ff9900; color: var(--wo-ink); }

/* Confirmation */
.support-confirm {
    max-width: 560px; margin: 60px auto;
    padding: 36px 28px;
    text-align: center;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 14px;
}
.support-confirm__check {
    width: 72px; height: 72px; border-radius: 50%;
    background: rgba(31,122,58,.12);
    color: #1f7a3a;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 32px;
    margin-bottom: 14px;
}
.support-confirm h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.7rem; letter-spacing: -.02em;
    margin: 0 0 10px;
}
.support-confirm > p { color: var(--wo-ink-2); margin: 0 0 18px; }
.support-confirm__ref {
    display: inline-flex; flex-direction: column; gap: 4px;
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    padding: 10px 18px;
    border-radius: 10px;
    margin-bottom: 14px;
}
.support-confirm__ref span {
    font-size: .68rem; font-weight: 600;
    color: var(--wo-text-muted);
    text-transform: uppercase; letter-spacing: .06em;
}
.support-confirm__ref code {
    font-family: var(--font-mono); font-size: 1rem; font-weight: 700;
    color: var(--wo-ink);
    user-select: all;
}
.support-confirm__hint { font-size: .85rem; color: var(--wo-text-muted); margin-bottom: 22px; }
.support-confirm__actions .btn-dark {
    background: var(--wo-ink); color: #ff9900;
    border-color: var(--wo-ink); font-weight: 700;
    padding: 10px 22px;
}
.support-confirm__actions .btn-dark:hover { background: #ff9900; color: var(--wo-ink); }

/* Subtle separator in the auth-alt row */
.auth-alt__sep { color: var(--wo-text-muted); margin: 0 6px; }

/* ============================================================
   KYC WIZARD (multi-step identity verification)
   ============================================================ */
.kyc { max-width: 820px; margin: 0 auto; padding: 32px 24px 80px; }
.kyc__head { margin-bottom: 24px; }
.kyc__crumb {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--wo-ink-2); font-family: var(--font-mono);
    font-size: .82rem; letter-spacing: .04em;
    margin-bottom: 14px;
}
.kyc__crumb a {
    color: var(--wo-ink); text-decoration: none;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--wo-card); border: 1px solid var(--wo-line);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s;
}
.kyc__crumb a:hover { background: var(--wo-paper); border-color: #ff9900; color: #b95400; }
.kyc__head h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 2.1rem; letter-spacing: -.02em;
    margin: 0 0 10px;
}
.kyc__head p { color: var(--wo-ink-2); font-size: 1rem; margin: 0; }

/* Status banners (approved / under review / rejected) */
.kyc-status {
    display: flex; gap: 18px; align-items: center;
    padding: 24px;
    border-radius: 14px;
    border: 1px solid var(--wo-line);
}
.kyc-status h2 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.3rem; margin: 0 0 4px;
}
.kyc-status p { margin: 0; color: var(--wo-ink-2); }
.kyc-status__small {
    font-family: var(--font-mono); font-size: .8rem;
    color: var(--wo-text-muted) !important;
    margin-top: 6px !important;
}
.kyc-status__icon {
    flex-shrink: 0;
    width: 56px; height: 56px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
}
.kyc-status--approved { background: rgba(31,122,58,.08); border-color: rgba(31,122,58,.3); }
.kyc-status--approved .kyc-status__icon { background: rgba(31,122,58,.18); color: #1f7a3a; }
.kyc-status--review   { background: rgba(255,153,0,.08); border-color: rgba(255,153,0,.3); }
.kyc-status--review .kyc-status__icon { background: rgba(255,153,0,.18); color: #b95400; }
.kyc-status--rejected { background: rgba(185,28,28,.08); border-color: rgba(185,28,28,.3); }
.kyc-status--rejected .kyc-status__icon { background: rgba(185,28,28,.18); color: #b91c1c; }

/* Stepper */
.kyc-progress {
    display: flex; gap: 0;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 999px;
    padding: 6px;
    margin-bottom: 24px;
    overflow: hidden;
}
.kyc-progress__step {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: .85rem; font-weight: 600;
    color: var(--wo-text-muted);
    transition: background .14s, color .14s;
    text-align: center;
    white-space: nowrap;
}
.kyc-progress__step span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--wo-line);
    color: var(--wo-ink-2);
    font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
}
.kyc-progress__step.is-active {
    background: var(--wo-ink); color: var(--wo-paper);
}
.kyc-progress__step.is-active span { background: #ff9900; color: var(--wo-ink); }
.kyc-progress__step.is-done span { background: #1f7a3a; color: #fff; }
.kyc-progress__step.is-done span::before { content: '✓'; }
.kyc-progress__step.is-done span > * { display: none; }
@media (max-width: 700px) {
    .kyc-progress__step { padding: 8px; font-size: 0; }
    .kyc-progress__step span { margin: 0; font-size: .72rem; }
}

/* Panels */
.kyc-panel {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 14px;
    padding: 26px;
    display: none;
}
.kyc-panel.is-active { display: block; animation: kycFade .24s ease; }
@keyframes kycFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.kyc-panel h2 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.45rem; margin: 0 0 6px;
}
.kyc-panel__sub { color: var(--wo-ink-2); margin: 0 0 22px; font-size: .94rem; }

/* Form grid */
.kyc-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.kyc-field { display: flex; flex-direction: column; gap: 5px; }
.kyc-field--full { grid-column: 1 / -1; }
.kyc-field > span {
    font-size: .74rem; font-weight: 600; color: var(--wo-ink-2);
    text-transform: uppercase; letter-spacing: .04em;
}
.kyc-field input,
.kyc-field select,
.kyc-field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--wo-line);
    background: var(--wo-paper);
    border-radius: 8px;
    font-family: inherit; font-size: .94rem;
    color: var(--wo-ink);
    transition: border-color .12s, box-shadow .12s;
}
.kyc-field input:focus, .kyc-field select:focus, .kyc-field textarea:focus {
    outline: 0;
    border-color: #ff9900;
    box-shadow: 0 0 0 4px rgba(255,153,0,.16);
}
@media (max-width: 600px) { .kyc-grid { grid-template-columns: 1fr; } }

/* Document choice radio cards */
.kyc-doc-choice {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;
}
.kyc-doc-option { position: relative; cursor: pointer; }
.kyc-doc-option input {
    position: absolute; opacity: 0; pointer-events: none;
}
.kyc-doc-option__inner {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 22px 18px;
    background: var(--wo-paper);
    border: 1.5px solid var(--wo-line);
    border-radius: 12px;
    transition: border-color .14s, background .14s, transform .08s;
}
.kyc-doc-option:hover .kyc-doc-option__inner {
    border-color: #ff9900;
    transform: translateY(-1px);
}
.kyc-doc-option input:checked + .kyc-doc-option__inner {
    border-color: #ff9900;
    background: rgba(255,153,0,.08);
    box-shadow: 0 0 0 3px rgba(255,153,0,.12);
}
.kyc-doc-option__icon {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,153,0,.16);
    color: #ff9900;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 10px;
}
.kyc-doc-option__label { font-weight: 700; margin-bottom: 4px; }
.kyc-doc-option__hint { color: var(--wo-text-muted); font-size: .78rem; }

/* Upload tiles (front/back) */
.kyc-uploads {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 600px) { .kyc-uploads { grid-template-columns: 1fr; } }
.kyc-upload {
    position: relative;
    aspect-ratio: 16/10;
    border: 2px dashed var(--wo-line);
    border-radius: 12px;
    background: var(--wo-paper);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .14s, background .14s;
}
.kyc-upload:hover { border-color: #ff9900; background: rgba(255,153,0,.04); }
.kyc-upload.is-done { border-style: solid; border-color: #1f7a3a; }
.kyc-upload.is-uploading::after {
    content: 'Uploading...';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.7);
    font-weight: 700;
    color: var(--wo-ink);
}
.kyc-upload__inner {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 18px;
    color: var(--wo-ink-2);
}
.kyc-upload__inner i { font-size: 2rem; color: #ff9900; margin-bottom: 8px; }
.kyc-upload__inner h4 { font-family: var(--font-display); font-weight: 700; margin: 0 0 2px; color: var(--wo-ink); font-size: .98rem; }
.kyc-upload__inner h4 em { color: var(--wo-text-muted); font-style: normal; font-weight: 500; font-size: .78rem; }
.kyc-upload__inner p { margin: 0; font-size: .85rem; }
.kyc-upload__preview {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}
.kyc-upload__remove {
    position: absolute; top: 8px; right: 8px;
    background: rgba(0,0,0,.65); color: #fff; border: 0;
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2;
}
.kyc-upload__remove:hover { background: #b91c1c; }

/* Selfie */
.kyc-selfie {
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}
.kyc-selfie__preview {
    position: relative;
    aspect-ratio: 4/5;
    max-width: 320px; margin: 0 auto 16px;
    background: #000; border-radius: 14px; overflow: hidden;
}
.kyc-selfie__preview video,
.kyc-selfie__preview img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transform: scaleX(-1); /* mirror video for natural feel */
}
.kyc-selfie__preview img { transform: none; }
.kyc-selfie__overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.kyc-selfie__face {
    width: 60%; aspect-ratio: 3/4;
    border: 2px dashed rgba(255,153,0,.8);
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.25);
}
.kyc-selfie__controls {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.kyc-selfie__hint {
    margin-top: 12px; font-size: .86rem; color: var(--wo-ink-2);
}

/* Review */
.kyc-review { margin-bottom: 18px; }
.kyc-review__list {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    border-radius: 10px;
    padding: 16px 20px;
}
.kyc-review__list > div { display: flex; flex-direction: column; gap: 2px; }
.kyc-review__list dt {
    font-size: .72rem; font-weight: 600;
    color: var(--wo-ink-2);
    text-transform: uppercase; letter-spacing: .04em;
}
.kyc-review__list dd { margin: 0; font-size: .94rem; color: var(--wo-ink); font-weight: 500; }
.kyc-review__list dd em { color: var(--wo-text-muted); font-style: italic; font-weight: 400; }
.kyc-review__imgs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px; margin-top: 14px;
}
.kyc-review__imgs > div {
    display: flex; flex-direction: column; gap: 6px;
}
.kyc-review__imgs span {
    font-size: .72rem; font-weight: 600;
    color: var(--wo-ink-2);
    text-transform: uppercase; letter-spacing: .04em;
}
.kyc-review__imgs img {
    width: 100%; aspect-ratio: 16/10; object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--wo-line);
}

/* Consent */
.kyc-consent {
    background: rgba(255,153,0,.06);
    border: 1px solid rgba(255,153,0,.2);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.kyc-consent label {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: .88rem; color: var(--wo-ink);
    cursor: pointer;
}
.kyc-consent input[type=checkbox] {
    margin-top: 3px; accent-color: #ff9900; flex-shrink: 0;
    width: 18px; height: 18px;
}

/* Footer actions on every panel */
.kyc-actions {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 24px;
}
.kyc-actions .btn-dark {
    background: var(--wo-ink); color: #ff9900;
    border-color: var(--wo-ink);
    font-family: var(--font-display); font-weight: 700;
    padding: 10px 22px;
}
.kyc-actions .btn-dark:hover:not(:disabled) {
    background: #ff9900; color: var(--wo-ink); border-color: #ff9900;
}
.kyc-actions .btn-dark:disabled { opacity: .45; cursor: not-allowed; }
.kyc-error {
    color: #b91c1c; font-size: .88rem;
    margin-top: 12px;
    background: rgba(185,28,28,.08);
    border: 1px solid rgba(185,28,28,.2);
    border-radius: 8px;
    padding: 10px 14px;
}

/* ============================================================
   DASHBOARD - whole-card clickable cards
   ============================================================ */
/* KPI tiles - now anchors */
a.kpi-tile,
a.kpi-tile:hover,
a.kpi-tile:focus {
    text-decoration: none;
    color: inherit;
}
.kpi-tile--link {
    display: block;
    position: relative;
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.kpi-tile--link:hover {
    transform: translateY(-2px);
    border-color: #ff9900 !important;
    box-shadow: 0 8px 22px -8px rgba(255,153,0,.35);
}
.kpi-tile__cta,
.kpi-cta {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: .7rem; letter-spacing: .04em;
    color: var(--wo-text-muted);
    text-transform: uppercase;
    font-weight: 600;
    opacity: .7;
    transition: opacity .14s ease, color .14s ease, transform .14s ease;
}
.kpi-tile--link:hover .kpi-cta {
    color: #b95400;
    opacity: 1;
    transform: translateX(2px);
}

/* Job card - stretched-link covers the whole tile */
.job-card--link {
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.job-card--link:hover {
    transform: translateY(-2px);
    border-color: #ff9900 !important;
    box-shadow: 0 8px 22px -8px rgba(255,153,0,.30);
}
.job-card__title {
    color: var(--wo-ink);
    font-weight: 700;
    transition: color .12s;
}
.job-card--link:hover .job-card__title { color: #b95400; }
.job-card--empty {
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease;
}
.job-card--empty:hover {
    transform: translateY(-2px);
    border-color: #ff9900 !important;
}
/* The stretched-link itself must be invisible */
.job-card .stretched-link::after {
    background: transparent;
}

/* AI suggestion card - whole block clickable */
a.ai-panel,
a.ai-panel:hover,
a.ai-panel:focus { color: inherit; text-decoration: none; }
.ai-panel--link {
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease;
}
.ai-panel--link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -10px rgba(38,27,16,.20);
}

/* Contract rows + Quick links - hover state */
.dash-contract-row { transition: background .14s, padding-left .14s; }
.dash-contract-row:hover {
    background: rgba(255,153,0,.06);
    padding-left: 8px;
    color: var(--wo-ink) !important;
}
.dash-quick-link {
    border-radius: 6px;
    padding: 7px 10px !important;
    transition: background .14s, color .14s, padding-left .14s;
}
.dash-quick-link:hover {
    background: rgba(255,153,0,.10);
    color: #b95400 !important;
    padding-left: 14px !important;
}
.dash-quick-link i { color: #ff9900; transition: transform .14s; }
.dash-quick-link:hover i { transform: scale(1.1); }

/* ============================================================
   ERROR PAGES (404 / 500 / 403)
   ============================================================ */
.err-page {
    min-height: 60vh;
    display: flex; align-items: center; justify-content: center;
    padding: 60px 24px;
}
.err-page__inner {
    max-width: 540px; text-align: center;
}
.err-page__code {
    font-family: var(--font-display);
    font-size: 9rem; font-weight: 800;
    line-height: 1; letter-spacing: -.05em;
    color: #ff9900;
    margin-bottom: 8px;
    text-shadow: 0 8px 30px rgba(255,153,0,.25);
    background: linear-gradient(135deg, #ff9900 0%, #b95400 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.err-page__code--red {
    background: linear-gradient(135deg, #b91c1c 0%, #7a0d0d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 8px 30px rgba(185,28,28,.25);
}
.err-page__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.9rem;
    letter-spacing: -.02em;
    color: var(--wo-ink);
    margin: 0 0 12px;
}
.err-page__sub {
    color: var(--wo-ink-2);
    font-size: 1rem;
    margin: 0 0 28px;
    line-height: 1.5;
}
.err-page__actions {
    display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.err-page__actions .btn-dark {
    background: var(--wo-ink); color: #ff9900;
    border-color: var(--wo-ink); font-weight: 700;
}
.err-page__actions .btn-dark:hover {
    background: #ff9900; color: var(--wo-ink); border-color: #ff9900;
}
@media (max-width: 600px) {
    .err-page__code { font-size: 6.5rem; }
    .err-page__title { font-size: 1.5rem; }
}

/* ============================================================
   CONTRACTS INDEX  (/contracts)
   ============================================================ */
.contracts-index { max-width: 1080px; margin: 0 auto; padding: 32px 24px 80px; }
.contracts-index__head { margin-bottom: 22px; }
.contracts-index__crumb {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--wo-ink-2); font-family: var(--font-mono);
    font-size: .82rem; letter-spacing: .04em;
    margin-bottom: 14px;
}
.contracts-index__crumb a {
    color: var(--wo-ink); text-decoration: none;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--wo-card); border: 1px solid var(--wo-line);
    display: inline-flex; align-items: center; justify-content: center;
}
.contracts-index__crumb a:hover { background: var(--wo-paper); border-color: #ff9900; color: #b95400; }
.contracts-index__head h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 2.1rem; letter-spacing: -.02em;
    margin: 0 0 8px;
}
.contracts-index__head p { color: var(--wo-ink-2); margin: 0; }

.contracts-filters {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 22px;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 999px;
    padding: 6px;
}
.contracts-filter {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    color: var(--wo-ink-2);
    text-decoration: none;
    font-size: .86rem; font-weight: 600;
    transition: background .12s, color .12s;
}
.contracts-filter:hover {
    background: rgba(255,153,0,.10);
    color: var(--wo-ink);
}
.contracts-filter.is-active {
    background: var(--wo-ink);
    color: var(--wo-paper);
}
.contracts-filter__n {
    background: rgba(0,0,0,.08);
    padding: 1px 8px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .68rem;
    color: inherit;
}
.contracts-filter.is-active .contracts-filter__n {
    background: #ff9900;
    color: var(--wo-ink);
}

.contracts-empty {
    text-align: center;
    padding: 60px 24px;
    background: var(--wo-card);
    border: 1px dashed var(--wo-line);
    border-radius: 14px;
}
.contracts-empty__icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: rgba(255,153,0,.10);
    color: #ff9900;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 30px;
    margin-bottom: 16px;
}
.contracts-empty h2 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.4rem; margin: 0 0 6px;
}
.contracts-empty p { color: var(--wo-ink-2); margin: 0 auto 18px; max-width: 460px; }
.contracts-empty__actions { display: inline-flex; gap: 10px; }
.contracts-empty__actions .btn-dark { background: var(--wo-ink); color: #ff9900; border-color: var(--wo-ink); font-weight: 700; }
.contracts-empty__actions .btn-dark:hover { background: #ff9900; color: var(--wo-ink); border-color: #ff9900; }

.contracts-list {
    display: flex; flex-direction: column; gap: 10px;
}
.contracts-row {
    display: flex; align-items: center; gap: 20px;
    padding: 18px 22px;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    text-decoration: none;
    color: var(--wo-ink);
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.contracts-row:hover {
    border-color: #ff9900;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px -10px rgba(255,153,0,.30);
    color: var(--wo-ink);
}
.contracts-row__main { flex: 1; min-width: 0; }
.contracts-row__title {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.05rem; margin: 0 0 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.contracts-row__meta {
    display: flex; flex-wrap: wrap; gap: 14px;
    color: var(--wo-ink-2);
    font-size: .85rem;
}
.contracts-row__meta i { color: #ff9900; margin-right: 4px; }
.contracts-row__meta strong { color: var(--wo-ink); font-weight: 600; }
.contracts-row__side {
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
    flex-shrink: 0;
}
.contracts-row__amount {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.02rem; color: var(--wo-ink);
}
.contracts-row__type {
    font-family: var(--font-mono);
    font-size: .68rem; letter-spacing: .04em;
    color: var(--wo-text-muted);
    text-transform: uppercase;
}
.contracts-row__status {
    border: 1px solid;
    padding: 2px 10px; border-radius: 999px;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .02em;
    margin-top: 2px;
}
.contracts-row__chev {
    color: var(--wo-text-muted);
    font-size: 1.1rem;
    transition: transform .14s, color .14s;
}
.contracts-row:hover .contracts-row__chev {
    color: #ff9900;
    transform: translateX(3px);
}
@media (max-width: 700px) {
    .contracts-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .contracts-row__side { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
    .contracts-row__chev { display: none; }
}

/* ============================================================
   PROFILE EDIT (matches 2FA / KYC visual language)
   ============================================================ */
.prof-edit { max-width: 820px; margin: 0 auto; padding: 32px 24px 80px; }
.prof-edit__head { margin-bottom: 24px; }
.prof-edit__crumb {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--wo-ink-2); font-family: var(--font-mono);
    font-size: .82rem; letter-spacing: .04em;
    margin-bottom: 14px;
}
.prof-edit__crumb a {
    color: var(--wo-ink); text-decoration: none;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--wo-card); border: 1px solid var(--wo-line);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s;
}
.prof-edit__crumb a:hover { background: var(--wo-paper); border-color: #ff9900; color: #b95400; }
.prof-edit__head h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 2.1rem; letter-spacing: -.02em;
    margin: 0 0 10px;
}
.prof-edit__head p { color: var(--wo-ink-2); font-size: 1rem; margin: 0; }

.prof-edit__flash {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: .92rem;
    margin-bottom: 18px;
}
.prof-edit__flash i { font-size: 1.15rem; }
.prof-edit__flash--ok  { background: rgba(31,122,58,.10); color: #1f7a3a; border: 1px solid rgba(31,122,58,.3); }
.prof-edit__flash--err { background: rgba(185,28,28,.10); color: #b91c1c; border: 1px solid rgba(185,28,28,.3); }

.prof-edit__form { display: flex; flex-direction: column; gap: 18px; }
.prof-card {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 14px;
    padding: 22px;
    margin: 0;
}
.prof-card legend {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 14px;
    padding: 0;
    color: var(--wo-ink);
}
.prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.prof-field { display: flex; flex-direction: column; gap: 5px; }
.prof-field--full { grid-column: 1 / -1; }
.prof-field > span {
    font-size: .74rem; font-weight: 600;
    color: var(--wo-ink-2);
    text-transform: uppercase; letter-spacing: .04em;
    display: flex; align-items: center; gap: 8px;
}
.prof-field__lock {
    font-style: normal;
    font-size: .68rem; letter-spacing: .04em;
    color: #8a3a00;
    background: rgba(255,153,0,.12);
    border: 1px solid rgba(255,153,0,.3);
    padding: 2px 8px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 4px;
    text-transform: none;
}
.prof-field__lock i { font-size: .72rem; }
.prof-field input,
.prof-field select,
.prof-field textarea {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid var(--wo-line);
    background: var(--wo-paper);
    border-radius: 8px;
    font-family: inherit; font-size: .94rem;
    color: var(--wo-ink);
    transition: border-color .12s, box-shadow .12s;
}
.prof-field input:focus, .prof-field select:focus, .prof-field textarea:focus {
    outline: 0; border-color: #ff9900;
    box-shadow: 0 0 0 4px rgba(255,153,0,.16);
}
.prof-field input[readonly] {
    background: var(--wo-line-soft);
    color: var(--wo-ink-2);
    cursor: not-allowed;
}
.prof-field__hint {
    font-size: .78rem; color: var(--wo-text-muted);
    line-height: 1.4;
}
.prof-field__hint strong { color: var(--wo-ink); }

.prof-handle {
    display: flex; align-items: stretch;
    border: 1.5px solid var(--wo-line);
    border-radius: 8px;
    background: var(--wo-paper);
    transition: border-color .12s, box-shadow .12s;
    overflow: hidden;
}
.prof-handle:focus-within {
    border-color: #ff9900;
    box-shadow: 0 0 0 4px rgba(255,153,0,.16);
}
.prof-handle__prefix {
    background: var(--wo-line-soft);
    color: var(--wo-ink-2);
    font-family: var(--font-mono);
    font-size: .85rem;
    padding: 11px 12px;
    border-right: 1px solid var(--wo-line);
    display: inline-flex; align-items: center;
    white-space: nowrap;
}
.prof-handle input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    flex: 1;
    padding: 11px 14px;
    font-family: var(--font-mono);
    font-size: .94rem;
}
.prof-handle input[readonly] {
    color: var(--wo-ink) !important;
    font-weight: 600;
}

.prof-edit__actions {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 8px;
}
.prof-edit__actions .btn-dark {
    background: var(--wo-ink); color: #ff9900;
    border-color: var(--wo-ink);
    font-family: var(--font-display); font-weight: 700;
    padding: 10px 22px;
}
.prof-edit__actions .btn-dark:hover { background: #ff9900; color: var(--wo-ink); border-color: #ff9900; }
@media (max-width: 600px) {
    .prof-grid { grid-template-columns: 1fr; }
    .prof-handle { flex-direction: column; }
    .prof-handle__prefix { border-right: 0; border-bottom: 1px solid var(--wo-line); }
}

/* ============================================================
   VIDEO CALL CARD inside chat (live + ended states)
   ============================================================ */
.msg-callcard {
    background: linear-gradient(135deg, #ffffff 0%, #fffaf2 100%);
    border: 1px solid rgba(255,153,0,.25);
    border-radius: 12px;
    padding: 14px 16px;
    min-width: 280px;
    max-width: 440px;
    box-shadow: 0 4px 12px rgba(38,27,16,.06);
    color: var(--wo-ink);
}
.msg-row--mine .msg-callcard {
    background: linear-gradient(135deg, #3b2a17 0%, #2b1d10 100%);
    border-color: rgba(255,213,138,.30);
    color: #fff;
}
.msg-callcard__head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.msg-callcard__icon {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,153,0,.18);
    color: #ff9900;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.msg-callcard__title {
    font-weight: 700;
    font-family: var(--font-display);
    font-size: .98rem;
    flex: 1;
}
.msg-callcard__live-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: #b91c1c;
    color: #fff;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .06em;
    font-family: var(--font-mono);
    animation: callLivePulse 1.4s ease-in-out infinite;
}
@keyframes callLivePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(185,28,28,.55); }
    50%      { box-shadow: 0 0 0 6px rgba(185,28,28,0); }
}
.msg-callcard__live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #fff;
    animation: callDotBlink 1s ease-in-out infinite;
}
@keyframes callDotBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}
.msg-callcard__ended-pill {
    background: rgba(38,27,16,.08);
    color: var(--wo-ink-2);
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    font-family: var(--font-mono);
    text-transform: uppercase;
}
.msg-row--mine .msg-callcard__ended-pill {
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.75);
}
.msg-callcard__body { font-size: .9rem; }
.msg-callcard__started {
    color: var(--wo-ink-2);
    margin-bottom: 10px;
    font-size: .88rem;
}
.msg-row--mine .msg-callcard__started { color: rgba(255,255,255,.75); }
.msg-row--mine .msg-callcard__started strong { color: #ffd58a; }
.msg-callcard__join {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    background: #ff9900;
    color: #261b10;
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
    font-size: .92rem;
    transition: background .14s, transform .08s;
}
.msg-callcard__join:hover { background: #ffaa1f; color: #261b10; transform: translateY(-1px); }
.msg-callcard__join:active { transform: translateY(0); }
.msg-callcard__stats {
    display: flex; flex-wrap: wrap; gap: 14px;
    padding: 10px 0;
    border-top: 1px dashed rgba(38,27,16,.10);
    border-bottom: 1px dashed rgba(38,27,16,.10);
    margin-bottom: 10px;
}
.msg-row--mine .msg-callcard__stats {
    border-color: rgba(255,255,255,.12);
}
.msg-callcard__stat {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .82rem;
    color: var(--wo-ink-2);
}
.msg-row--mine .msg-callcard__stat { color: rgba(255,255,255,.75); }
.msg-callcard__stat i { color: #ff9900; font-size: .95rem; }
.msg-callcard__stat strong {
    color: var(--wo-ink);
    font-family: var(--font-display);
    font-weight: 700;
}
.msg-row--mine .msg-callcard__stat strong { color: #fff; }
.msg-callcard__parts {
    display: flex; flex-wrap: wrap; gap: 8px 12px;
    margin-bottom: 10px;
}
.msg-callcard__part {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .82rem;
}
.msg-callcard__part-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: #ff9900;
    color: #261b10;
    font-family: var(--font-display);
    font-weight: 700; font-size: 9px;
    display: inline-flex; align-items: center; justify-content: center;
}
.msg-row--mine .msg-callcard__part-avatar { background: #ffd58a; color: #261b10; }
.msg-callcard__part-name { color: var(--wo-ink); }
.msg-callcard__part-name em { color: var(--wo-text-muted); font-style: normal; font-size: .78rem; }
.msg-row--mine .msg-callcard__part-name { color: rgba(255,255,255,.92); }
.msg-row--mine .msg-callcard__part-name em { color: rgba(255,255,255,.55); }
.msg-callcard__actions {
    display: flex; gap: 8px;
}

/* Search hit accent in the message list */
.msg-row.msg-search-hit .msg-bubble,
.msg-row.msg-search-hit .msg-voice,
.msg-row.msg-search-hit .msg-file,
.msg-row.msg-search-hit .msg-offer {
    box-shadow: 0 0 0 2px rgba(255,153,0,.45);
}

/* ============================================================
   Generic Workofficially modal (used by Video call + Scheduler)
   ============================================================ */
.wo-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
}
.wo-modal[hidden] { display: none; }
.wo-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(38,27,16,.55);
    backdrop-filter: blur(4px);
}
.wo-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(38,27,16,.45);
    width: min(640px, 92vw);
    max-height: 90vh;
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: woModalIn .22s cubic-bezier(.2,.9,.3,1.05);
}
.wo-modal__panel--call {
    width: min(1100px, 96vw);
    height: min(720px, 90vh);
}
@keyframes woModalIn {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.wo-modal__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--wo-line);
    gap: 12px;
}
.wo-modal__head > div:first-child { min-width: 0; flex: 1; }
.wo-modal__title {
    font-family: var(--font-display);
    font-size: 1.25rem; font-weight: 700;
    margin: 0; color: var(--wo-ink);
    display: inline-flex; align-items: center; gap: 8px;
}
.wo-modal__title i { color: #ff9900; }
.wo-modal__sub {
    margin: 4px 0 0; font-size: .82rem;
    color: var(--wo-text-muted);
}
.wo-modal__head-actions { display: flex; gap: 6px; align-items: center; }
.wo-modal__close {
    background: transparent; border: 0;
    font-size: 28px; line-height: 1;
    color: var(--wo-ink-2); cursor: pointer;
    width: 36px; height: 36px;
    border-radius: 50%;
    transition: background .12s;
}
.wo-modal__close:hover { background: rgba(38,27,16,.08); color: var(--wo-ink); }
.wo-modal__body { padding: 22px; overflow-y: auto; flex: 1; }
.wo-modal__body--call { padding: 0; }
.wo-modal__foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--wo-line);
    background: var(--wo-paper);
}
/* (Legacy iframe styles removed - WorkOfficially native video call is now a full page at /call/{pid}) */

/* Schedule modal grid */
.sched-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.sched-field { display: flex; flex-direction: column; gap: 6px; }
.sched-field--full { grid-column: 1 / -1; }
.sched-field > span {
    font-size: .76rem; font-weight: 600; color: var(--wo-ink-2);
    text-transform: uppercase; letter-spacing: .04em;
}
.sched-field input[type="text"],
.sched-field input[type="date"],
.sched-field input[type="time"],
.sched-field select,
.sched-field textarea {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--wo-line);
    border-radius: 8px;
    font-family: inherit; font-size: .94rem;
    background: #fff;
    color: var(--wo-ink);
    transition: border-color .12s, box-shadow .12s;
}
.sched-field input:focus,
.sched-field select:focus,
.sched-field textarea:focus {
    outline: 0;
    border-color: #ff9900;
    box-shadow: 0 0 0 3px rgba(255,153,0,.16);
}
.sched-where { display: flex; flex-direction: column; gap: 6px; }
.sched-where label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .9rem; color: var(--wo-ink);
    cursor: pointer;
}
.sched-where input[type="radio"] { accent-color: #ff9900; }
.sched-where input[type="text"] { margin-top: 8px; }
@media (max-width: 640px) {
    .sched-grid { grid-template-columns: 1fr; }
}

.inbox-thread__messages {
    flex: 1; padding: 1.4rem; overflow-y: auto; min-height: 0;
    display: flex; flex-direction: column; gap: .5rem;
    background: var(--wo-paper);
}
.msg-day-divider {
    display: flex; align-items: center; gap: .8rem;
    margin: 1rem 0 .3rem;
    font-family: var(--font-mono);
    color: var(--wo-text-muted);
    font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 500;
}
.msg-day-divider::before, .msg-day-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--wo-line);
}
.msg-row { display: flex; align-items: flex-end; gap: .5rem; max-width: 70%; }
.msg-row--mine { margin-left: auto; flex-direction: row-reverse; }
.msg-avatar {
    width: 26px; height: 26px;
    background: var(--wo-paper-2); color: var(--wo-ink-2);
    font-family: var(--font-display); font-weight: 700;
    font-size: 10px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.msg-stack { display: flex; flex-direction: column; min-width: 0; }
.msg-meta { font-family: var(--font-mono); font-size: .68rem; color: var(--wo-text-muted); padding: 0 .35rem; margin-bottom: 2px; letter-spacing: .02em; }
.msg-meta--mine { text-align: right; }
.msg-bubble {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 6px 6px 6px 1px;
    padding: .6rem .9rem;
    font-size: .94rem; line-height: 1.45;
    color: var(--wo-ink);
}
.msg-row--mine .msg-bubble {
    background: var(--wo-ink); color: var(--wo-paper);
    border-color: var(--wo-ink);
    border-radius: 6px 6px 1px 6px;
}
.msg-system {
    text-align: center; color: var(--wo-text-muted);
    font-family: var(--font-mono);
    font-size: .76rem; margin: 1rem auto;
    padding: .3rem .8rem;
    background: var(--wo-card); border: 1px solid var(--wo-line);
    border-radius: 3px; align-self: center;
}
.msg-row--sending .msg-bubble { opacity: .55; }
.msg-row--failed .msg-bubble { border: 1px solid var(--wo-bad); color: var(--wo-bad); }

/* file attachment card inside a message */
.msg-file {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .4rem .6rem;
    background: var(--wo-paper); color: var(--wo-ink);
    border: 1px solid var(--wo-line);
    border-radius: 4px;
    font-family: var(--font-mono); font-size: .82rem;
    text-decoration: none;
}
.msg-file i { color: var(--wo-primary-deep); font-size: 1.1rem; }
.msg-file .file-size { color: var(--wo-text-muted); font-size: .7rem; }
/* INBOX-FILE-FIX (2026-05-30): "mine" file chip sits on the cream thread
   background (not inside the dark bubble), so white text was invisible.
   Repainted as dark espresso text on warm cream-gold so the filename and
   size are legible while keeping the WO gold-accent feel. */
.msg-row--mine .msg-file {
    background: linear-gradient(180deg, #fdf6e3 0%, #faecc5 100%);
    border-color: rgba(255,153,0,.55);
    color: var(--wo-ink);
    font-weight: 500;
}
.msg-row--mine .msg-file i { color: #b95400; }
.msg-row--mine .msg-file .file-size { color: rgba(38,27,16,.6); }
/* Inline file/PDF/video caption inside a mine bubble */
.msg-row--mine .msg-media__caption {
    background: rgba(38,27,16,.85);
    color: #fff;
    border-top-color: rgba(255,255,255,.08);
}
.msg-row--mine .msg-media__caption a { color: #fff; }
.msg-row--mine .msg-media__caption .file-size { color: rgba(255,255,255,.65); }
.msg-row--mine .msg-media__caption i { color: #ffd58a; }

/* -------- Composer ---------- */
.inbox-composer {
    border-top: 1px solid var(--wo-line);
    background: var(--wo-card);
    padding: 1rem 1.5rem max(1.1rem, env(safe-area-inset-bottom));
    position: relative;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;          /* never let the composer be squeezed away */
}
.composer-inner {
    border: 1px solid var(--wo-line);
    border-radius: 6px;
    background: var(--wo-paper);
    transition: border-color .12s, box-shadow .12s;
}
.composer-inner:focus-within {
    border-color: var(--wo-ink);
    background: var(--wo-card);
    box-shadow: 0 0 0 1px var(--wo-ink);
}
.inbox-composer textarea {
    width: 100%; border: 0; outline: 0; background: transparent;
    padding: .8rem 1rem .3rem;
    font-family: var(--font-body); font-size: .96rem; line-height: 1.45;
    resize: none; max-height: 180px; min-height: 42px;
    color: var(--wo-ink);
}
.composer-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .25rem .55rem .55rem;
}
.composer-toolbar { display: flex; gap: .15rem; }
.composer-send {
    background: var(--wo-ink); color: var(--wo-primary);
    font-family: var(--font-display); font-weight: 700;
    border: 1px solid var(--wo-ink); border-radius: 4px;
    padding: .55rem 1rem; font-size: .88rem;
    display: inline-flex; align-items: center; gap: .4rem;
    cursor: pointer;
    transition: all .14s;
    letter-spacing: -.005em;
}
.composer-send:hover:not(:disabled) {
    background: var(--wo-primary); color: var(--wo-ink); border-color: var(--wo-primary);
}
.composer-send:disabled { opacity: .45; cursor: default; }

/* ============================================================================
 * DETAILS PANEL (right side)
 * ============================================================================ */
.inbox-details {
    background: var(--wo-card);
    border-left: 1px solid var(--wo-line);
    overflow-y: auto;
    padding: 1.25rem 1.25rem 2rem;
    position: relative;
    transition: transform .25s ease, opacity .2s ease;
}
.inbox-details.is-hidden { transform: translateX(100%); opacity: 0; }
.details-close {
    position: absolute; top: .9rem; right: 1rem;
    background: transparent; border: 0;
    font-size: 1.4rem; color: var(--wo-text-muted);
    cursor: pointer; line-height: 1;
}
.details-close:hover { color: var(--wo-ink); }
.details-hero {
    display: flex; flex-direction: column; align-items: center;
    padding: 1.5rem 0 1.25rem;
    border-bottom: 1px solid var(--wo-line);
    margin-bottom: .25rem;
}
.details-name {
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em;
    color: var(--wo-ink);
    margin-top: 1rem;
}
.details-tag {
    font-family: var(--font-mono);
    font-size: .76rem; color: var(--wo-text-muted);
    margin-top: .25rem;
    display: inline-flex; align-items: center; gap: .35rem;
}
.details-tag i { color: var(--wo-primary-deep); }
.details-tag .num { color: var(--wo-ink); font-weight: 500; }
.details-cta {
    margin-top: 1rem;
    color: var(--wo-primary-deep);
    font-family: var(--font-display);
    font-weight: 600; font-size: .9rem;
    text-decoration: none;
    border-bottom: 1px solid var(--wo-primary);
    padding-bottom: 1px;
}
.details-cta:hover { color: var(--wo-primary); }

.details-section {
    border-bottom: 1px solid var(--wo-line-soft);
    padding: .25rem 0;
}
.details-section > summary {
    list-style: none; cursor: pointer;
    padding: .9rem .25rem;
    display: flex; align-items: center; gap: .55rem;
    font-family: var(--font-display);
    font-weight: 600; font-size: .94rem;
    color: var(--wo-ink-2);
    transition: color .12s;
}
.details-section > summary::-webkit-details-marker { display: none; }
.details-section > summary i:first-child { color: var(--wo-primary-deep); width: 16px; text-align: center; }
.details-section > summary .chev {
    margin-left: auto; transition: transform .25s;
    font-family: var(--font-mono); font-size: .9rem;
    color: var(--wo-text-muted);
    display: inline-block;
}
.details-section[open] > summary .chev { transform: rotate(180deg); }
.details-section:hover > summary { color: var(--wo-ink); }
.details-body { padding: 0 .25rem 1rem; }
.details-empty {
    font-family: var(--font-mono); font-size: .8rem;
    color: var(--wo-text-muted); margin: 0 0 .7rem;
}
.details-help {
    font-family: var(--font-mono); font-size: .72rem;
    color: var(--wo-text-muted); margin: 0 0 .5rem; letter-spacing: .02em;
}
.details-recap {
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    border-radius: 4px;
    padding: .75rem .85rem;
    margin-top: .75rem;
    font-size: .9rem; line-height: 1.45;
    color: var(--wo-ink-2);
}
.details-recap strong { color: var(--wo-ink); }

.details-person {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem 0;
    border-bottom: 1px dashed var(--wo-line-soft);
}
.details-person:last-child { border-bottom: none; }

.details-file {
    display: flex; align-items: center; gap: .55rem;
    padding: .55rem .7rem;
    border: 1px solid var(--wo-line);
    border-radius: 4px;
    text-decoration: none;
    color: var(--wo-ink);
    font-family: var(--font-mono);
    font-size: .82rem;
    margin-bottom: .4rem;
    transition: border-color .12s;
}
.details-file:hover { border-color: var(--wo-ink); }
.details-file i { color: var(--wo-primary-deep); }
.details-file__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.details-file__size { color: var(--wo-text-muted); }

/* ============================================================================
 * NOTIFICATION BELL + POPUP (top-bar)
 * ============================================================================ */
.notif-wrap { position: relative; }
.notif-bell { position: relative; }
.notif-dot {
    position: absolute; top: 6px; right: 6px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--wo-primary);
    box-shadow: 0 0 0 2px var(--wo-card);
    display: none;
}
.notif-dot.is-on { display: block; }
/* Notification popup - Upwork-style: clean rounded card, icon glyph per item,
   plain dividers, no chips. */
.notif-pop {
    position: absolute; right: -8px; top: calc(100% + 10px);
    width: 420px; max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid rgba(38, 27, 16, 0.08);
    border-radius: 14px;
    box-shadow: 0 18px 48px -12px rgba(17, 16, 12, 0.22);
    display: none;
    z-index: 200;
    overflow: hidden;
    transform-origin: top right;
    animation: notif-in .18s ease;
}
@keyframes notif-in {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.notif-pop.is-open { display: block; }
.notif-pop__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px 10px;
}
.notif-pop__head strong {
    font-family: var(--font-display);
    font-size: 16px; font-weight: 600; letter-spacing: -.005em;
    color: var(--wo-ink);
}
.btn-link-mono {
    background: transparent; border: 0; padding: 0;
    font-family: inherit;
    font-size: 13px; font-weight: 500;
    color: var(--wo-primary-deep);
    cursor: pointer;
    text-decoration: none;
}
.btn-link-mono:hover { text-decoration: underline; }
/* NOTIF-FIX-01 (2026-05-30): pair Mark all read + Clear all in the popup head. */
.notif-pop__actions {
    display: inline-flex; align-items: center; gap: 12px;
}
.notif-pop__actions .btn-link-mono { white-space: nowrap; }
.notif-pop__danger {
    color: #b3261e;
}
.notif-pop__danger:hover { color: #8b1d18; }
.notif-pop__list {
    list-style: none; padding: 0; margin: 0;
    max-height: 440px; overflow-y: auto;
}
.notif-pop__item {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 18px;
    border-top: 1px solid rgba(38, 27, 16, 0.06);
    transition: background .12s;
    cursor: pointer;
}
.notif-pop__item:hover { background: rgba(255, 153, 0, 0.04); }
.notif-pop__icon {
    width: 32px; height: 32px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--wo-ink);
    font-size: 18px;
}
.notif-pop__icon i { line-height: 1; }
.notif-pop__item.is-unread { background: rgba(255, 153, 0, 0.03); }
.notif-pop__item.is-unread .notif-pop__title { color: var(--wo-ink); font-weight: 600; }
.notif-pop__body { flex: 1; min-width: 0; }
.notif-pop__title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    color: var(--wo-ink);
    line-height: 1.45;
    word-break: break-word;
}
.notif-pop__text { display: none; }   /* Upwork-style: single-line title only */
.notif-pop__time {
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(38, 27, 16, 0.55);
    margin-top: 4px;
}
.notif-pop__empty, .notif-pop__loading {
    padding: 36px 18px; text-align: center;
    color: rgba(38, 27, 16, 0.55); font-size: 14px;
}
.notif-pop__foot {
    padding: 12px 18px;
    border-top: 1px solid rgba(38, 27, 16, 0.06);
    text-align: center;
}
.notif-pop__foot a {
    color: var(--wo-primary-deep);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
}
.notif-pop__foot a:hover { text-decoration: underline; }

/* "New" tag on luxury features */
.lux-tag {
    font-family: var(--font-mono);
    font-size: .6rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--wo-primary);
    border: 1px solid var(--wo-primary);
    padding: 1px 5px;
    border-radius: 2px;
    margin-right: .3rem;
}

.inbox-empty-state {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 3rem; text-align: center;
}
.inbox-empty-glyph {
    font-family: var(--font-serif); font-style: italic;
    font-size: 5rem; color: var(--wo-primary); opacity: .55;
    margin-bottom: 1rem; line-height: 1;
}

/* Emoji popover */
.emoji-popover {
    position: absolute; bottom: 70px; left: 1rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line); border-radius: 6px;
    padding: .5rem;
    display: none;
    grid-template-columns: repeat(8, 32px); gap: 2px;
    box-shadow: var(--wo-shadow-pop);
    z-index: 50;
}
.emoji-popover.is-open { display: grid; }
.emoji-popover button {
    background: transparent; border: none; cursor: pointer;
    width: 32px; height: 32px; font-size: 1.2rem;
    border-radius: 3px; transition: background .1s;
}
.emoji-popover button:hover { background: var(--wo-paper); }

/* AI rewrite popover */
.ai-popover {
    position: absolute; bottom: 70px; left: 1rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line); border-radius: 6px;
    padding: .65rem;
    display: none; flex-direction: column; gap: .25rem;
    box-shadow: var(--wo-shadow-pop);
    min-width: 220px;
    z-index: 50;
}
.ai-popover.is-open { display: flex; }
.ai-popover button {
    background: transparent; border: 1px solid transparent;
    text-align: left; padding: .45rem .65rem;
    font-family: var(--font-body); font-size: .87rem;
    color: var(--wo-ink);
    border-radius: 3px; cursor: pointer;
    transition: all .12s;
    display: flex; align-items: center; gap: .55rem;
}
.ai-popover button:hover { background: var(--wo-paper); border-color: var(--wo-line); }
.ai-popover button .ai-key {
    color: var(--wo-primary-deep);
    font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
    margin-right: .25rem;
}

/* file upload chip during upload - INBOX-FIX-04 (2026-05-27): animated
   progress bar + percentage + success snap + error state. Previous build
   showed only static "Uploading…" text. */
.composer-upload-chip {
    position: absolute; bottom: 70px; left: 1rem; right: 1rem; max-width: 420px;
    background: var(--wo-card); border: 1px solid var(--wo-line); border-radius: 10px;
    padding: .55rem .8rem;
    font-family: var(--font-mono); font-size: .8rem;
    color: var(--wo-ink); display: none; gap: .55rem; align-items: center;
    box-shadow: 0 8px 24px rgba(38, 27, 16, 0.10);
}
.composer-upload-chip.is-open { display: inline-flex; }
.composer-upload-chip > i { font-size: 1.05rem; color: var(--wo-accent, #d97706); }
.composer-upload-chip.is-uploading > i { animation: wo-upload-pulse 1.2s ease-in-out infinite; }
@keyframes wo-upload-pulse {
    0%, 100% { transform: translateY(0);    opacity: .85; }
    50%      { transform: translateY(-3px); opacity: 1; }
}
.composer-upload-chip__label   { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-upload-chip__label strong { font-weight: 600; }
.composer-upload-chip__pct     { font-variant-numeric: tabular-nums; opacity: .75; font-size: .75rem; min-width: 2.6em; text-align: right; }
.composer-upload-chip__bar     { flex: 0 0 110px; height: 4px; background: rgba(38, 27, 16, .08); border-radius: 999px; overflow: hidden; position: relative; }
.composer-upload-chip__fill    {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--wo-accent, #d97706), #f59e0b);
    width: 0%; transition: width .2s ease;
    border-radius: 999px; position: relative;
}
.composer-upload-chip__fill::after {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    animation: wo-upload-shimmer 1.4s linear infinite;
}
@keyframes wo-upload-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.composer-upload-chip.is-complete .composer-upload-chip__fill { background: #16a34a; }
.composer-upload-chip.is-complete .composer-upload-chip__fill::after { animation: none; opacity: 0; }
.composer-upload-chip.is-complete > i { color: #16a34a; animation: none; }
.composer-upload-chip.is-error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.composer-upload-chip.is-error > i { color: #dc2626; animation: none; }
.composer-upload-chip.is-error .composer-upload-chip__pct,
.composer-upload-chip.is-error .composer-upload-chip__bar { display: none; }

/* INBOX-FIX-03 - Office file cards in message bubbles (Word / Excel / PowerPoint). */
.msg-media--office {
    display: flex; gap: .75rem; align-items: center;
    padding: .75rem .85rem; background: var(--wo-card); border: 1px solid var(--wo-line);
    border-radius: 12px; max-width: 360px;
}
.msg-media__office-icon {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px;
    display: grid; place-items: center; font-size: 1.5rem; color: #fff;
}
.msg-media--doc .msg-media__office-icon { background: #2b579a; }
.msg-media--xls .msg-media__office-icon { background: #217346; }
.msg-media--ppt .msg-media__office-icon { background: #b7472a; }
.msg-media__office-body { flex: 1 1 auto; min-width: 0; }
.msg-media__office-name { font-weight: 600; font-size: .92rem; color: var(--wo-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-media__office-meta { font-size: .75rem; color: var(--wo-muted, #6b7280); margin-top: .15rem; }
.msg-media__office-actions { display: flex; gap: .4rem; margin-top: .45rem; flex-wrap: wrap; }
.msg-media__office-btn {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .75rem; padding: .25rem .55rem; border-radius: 999px;
    background: rgba(38, 27, 16, .05); color: var(--wo-ink); text-decoration: none;
    transition: background .15s ease;
}
.msg-media__office-btn:hover { background: rgba(38, 27, 16, .12); color: var(--wo-ink); }
.msg-media__office-btn i { font-size: .9rem; }
.msg-row--mine .msg-media--office { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
.msg-row--mine .msg-media__office-name { color: #fff; }
.msg-row--mine .msg-media__office-meta { color: rgba(255,255,255,.7); }
.msg-row--mine .msg-media__office-btn  { background: rgba(255,255,255,.15); color: #fff; }
.msg-row--mine .msg-media__office-btn:hover { background: rgba(255,255,255,.25); color: #fff; }

/* -------- Workroom chips ---------- */
.task-chip {
    background: var(--wo-card); border: 1px solid var(--wo-line);
    border-radius: 4px; padding: .55rem .85rem; margin-bottom: .5rem;
    font-size: .9rem;
}

/* ============================================================================
 * AUTH SHELL - animated split layout
 *   - Left: editorial cream panel with wordmark + headline + quote
 *   - Right: refined form with sweep-underline inputs, animated button
 * ============================================================================ */
.auth-page {
    background: var(--wo-paper);
    overflow: hidden;
}
.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
}
@media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } }

/* ----- LEFT panel - quiet, atmospheric ----- */
.auth-side {
    position: relative;
    background:
        radial-gradient(1100px 800px at 5% -5%, rgba(255,153,0,.16) 0%, transparent 55%),
        radial-gradient(700px 500px at 85% 110%, rgba(217,120,0,.10) 0%, transparent 60%),
        linear-gradient(180deg, var(--wo-paper) 0%, var(--wo-paper-2) 100%);
    overflow: hidden;
    border-right: 1px solid var(--wo-line);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 3rem clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 900px) { .auth-side { display: none; } }
/* warm paper grain - replaces the geometric marks */
.auth-side::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    opacity: .55; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><filter id='n'><feTurbulence baseFrequency='0.82' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.12  0 0 0 0 0.06  0 0 0 0.42 0'/></filter><rect width='320' height='320' filter='url(%23n)'/></svg>");
    background-size: 320px 320px;
}
/* warm halo - static, atmospheric, not animated */
.auth-side::after {
    content: ''; position: absolute; inset: -20% -20% auto -20%;
    height: 70%; pointer-events: none;
    background: radial-gradient(circle at 30% 30%, rgba(255,184,77,.20), transparent 55%);
}
.auth-side__inner { position: relative; z-index: 1; max-width: 460px; }
/* No entrance animations - render statically, one place, stuck. */

.auth-brand {
    display: inline-flex; align-items: center; gap: .65rem;
    text-decoration: none; margin-bottom: 3rem;
}
.auth-eyebrow {
    font-family: var(--font-mono);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-ink-2);
    display: inline-flex; align-items: center; gap: .55rem;
    margin-bottom: 1.2rem;
}
.auth-eyebrow__dot {
    width: 8px; height: 8px; background: var(--wo-primary);
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(255,153,0,.18);
    animation: livePulse 2.2s ease-in-out infinite;
}

.auth-headline {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.4rem, 4.5vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -.04em;
    color: var(--wo-ink);
    margin-bottom: 2.4rem;
}
.auth-headline .serif {
    font-family: var(--font-serif); font-style: italic; font-weight: 400;
    color: var(--wo-primary-deep);
    letter-spacing: -.02em;
}
/* Words render statically - no animation, no movement, one place. */
.auth-headline .word {
    display: inline-block;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
}
/* Static quote - shows the first one only, no rotation. */
.auth-quotes {
    position: relative;
    padding: .25rem 0 .25rem 1.4rem;
    margin: 0 0 2.4rem;
    max-width: 400px;
    border-left: 1px solid var(--wo-primary);
}
.auth-quote {
    /* Hide all quotes by default … */
    display: none;
}
.auth-quote.is-active {
    /* … then show only the first (server gives it .is-active). */
    display: block;
    opacity: 1;
}
.auth-quote p {
    font-family: var(--font-serif); font-style: italic; font-weight: 400;
    font-size: 1.1rem; line-height: 1.45;
    color: var(--wo-ink-2);
    margin: 0 0 .7rem;
}
.auth-quote cite {
    font-style: normal; font-family: var(--font-mono);
    font-size: .76rem; color: var(--wo-text-muted);
    letter-spacing: .04em;
}
.auth-quote-nav { display: none; }
/* Numbered footer stats - animated count-up on page load */
.auth-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    border-top: 1px solid var(--wo-line);
    padding-top: 1.6rem;
    margin-top: 2rem;
}
.auth-stat__num {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--wo-ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.auth-stat__num .accent { color: var(--wo-primary-deep); }
.auth-stat__num .unit { font-family: var(--font-mono); font-size: .9rem; color: var(--wo-text-muted); font-weight: 500; margin-left: 4px; }
.auth-stat__label {
    font-family: var(--font-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--wo-text-muted);
    margin-top: .4rem;
    line-height: 1.3;
}

/* AUTH-REPUTATION v2 (2026-05-30): creative Reputation Bridge preview on
   login/signup. Replaces the small pill with a mock profile card showing
   reviews flowing in from Upwork + Fiverr. Editorial cream-gold palette. */
.auth-rep {
    position: relative;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--wo-line);
}
.auth-rep__stamp {
    position: absolute;
    top: -22px; right: 0;
    width: 76px; height: 76px;
    border-radius: 50%;
    background: linear-gradient(140deg, #ffd97a 0%, #ffb340 60%, #ff9900 100%);
    box-shadow: 0 6px 18px rgba(255, 153, 0, .35),
                0 1px 0 rgba(255, 255, 255, .6) inset;
    color: #3a2400;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    transform: rotate(8deg);
    font-family: var(--font-mono);
}
.auth-rep__stamp-num {
    font-size: 1.4rem;
    font-weight: 900;
    font-family: var(--font-display);
    line-height: 1;
}
.auth-rep__stamp-label {
    font-size: .52rem;
    letter-spacing: .12em;
    font-weight: 700;
    margin-top: 2px;
    opacity: .85;
    line-height: 1.15;
}
.auth-rep__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #b95400;
    font-weight: 700;
    margin-bottom: .35rem;
}
.auth-rep__pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ff9900;
    box-shadow: 0 0 0 0 rgba(255, 153, 0, .65);
    animation: authRepPulse 1.8s ease-out infinite;
}
@keyframes authRepPulse {
    0%   { box-shadow: 0 0 0 0   rgba(255, 153, 0, .65); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 153, 0, 0); }
    100% { box-shadow: 0 0 0 0   rgba(255, 153, 0, 0); }
}
.auth-rep__title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--wo-ink);
    margin: 0 0 .35rem;
    letter-spacing: -.015em;
}
.auth-rep__title .serif {
    font-family: var(--font-serif, "Instrument Serif", serif);
    font-style: italic;
    font-weight: 500;
    color: #b95400;
}
.auth-rep__sub {
    font-size: .92rem;
    line-height: 1.5;
    color: var(--wo-text-muted);
    margin: 0 0 1rem;
}

/* The mock profile card */
.auth-rep__card {
    background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
    border: 1px solid rgba(255, 153, 0, .25);
    border-radius: 12px;
    padding: .95rem 1rem 1rem;
    box-shadow: 0 8px 24px rgba(38, 27, 16, .08),
                0 1px 0 rgba(255, 255, 255, .9) inset;
    position: relative;
}
.auth-rep__card::after {
    /* subtle corner tape so the card feels printed/pinned */
    content: "VERIFIED";
    position: absolute;
    top: -8px; right: 12px;
    font-family: var(--font-mono);
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: #5b3d00;
    background: linear-gradient(180deg, #ffd97a, #ffb340);
    padding: 3px 8px;
    border-radius: 3px;
    border: 1px solid rgba(196, 130, 0, .45);
    box-shadow: 0 2px 6px rgba(255, 153, 0, .35);
}
.auth-rep__card-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .7rem;
}
.auth-rep__avatar {
    width: 40px; height: 40px;
    background: #261b10;
    color: #ff9900;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .04em;
}
.auth-rep__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--wo-ink);
    display: inline-flex; align-items: center; gap: .35rem;
}
.auth-rep__name i { color: #1d8a4e; font-size: .9rem; }
.auth-rep__meta {
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--wo-text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: 1px;
}
.auth-rep__stars {
    display: flex; align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .65rem;
    background: rgba(255, 153, 0, .07);
    border-radius: 8px;
    margin-bottom: .65rem;
}
.auth-rep__star-row {
    display: inline-flex; align-items: center; gap: .15rem;
}
.auth-rep__star-row i { color: #ff9900; font-size: .82rem; }
.auth-rep__score {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--wo-ink);
    margin-left: .5rem;
    font-variant-numeric: tabular-nums;
}
.auth-rep__count {
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--wo-text-muted);
    letter-spacing: .04em;
}
.auth-rep__sources {
    display: flex; gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .65rem;
}
.auth-rep__chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .55rem .3rem .35rem;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--wo-ink);
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
}
.auth-rep__chip strong { color: #b95400; font-weight: 700; }
.auth-rep__chip-glyph {
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 800;
    color: #fff;
}
.auth-rep__chip--upwork .auth-rep__chip-glyph { background: #14a800; }
.auth-rep__chip--fiverr .auth-rep__chip-glyph { background: #1dbf73; }
.auth-rep__transfer {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-mono);
    font-size: .7rem;
    color: #1d8a4e;
    font-weight: 600;
    letter-spacing: .02em;
}
.auth-rep__transfer i { font-size: .9rem; }
.auth-rep__cta {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--wo-ink);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: color .15s ease, gap .15s ease;
}
.auth-rep__cta:hover { color: #b95400; gap: .6rem; }
@media (prefers-reduced-motion: reduce) {
    .auth-rep__pulse { animation: none; }
}

/* ----- RIGHT panel ----- */
.auth-main {
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 3rem clamp(1.5rem, 5vw, 4rem);
    background: var(--wo-card);
    position: relative;
}
.auth-form-wrap {
    width: 100%; max-width: 440px;
    margin: auto 0;
    /* No fade-in - render in place immediately. */
}
.auth-step {
    font-family: var(--font-mono);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-text-muted);
    margin-bottom: 1rem;
    position: relative; padding-left: 1.2rem;
}
.auth-step::before {
    content: ''; position: absolute; left: 0; top: .55em;
    width: .8rem; height: 1px; background: var(--wo-primary);
}
.auth-title {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(1.8rem, 3vw, 2.3rem);
    letter-spacing: -.035em; line-height: 1.05;
    color: var(--wo-ink); margin-bottom: .5rem;
}
.auth-sub { color: var(--wo-text-muted); margin-bottom: 2rem; font-size: 1.02rem; }

/* Inputs - floating-label feel with sweep underline on focus */
.auth-form { display: flex; flex-direction: column; gap: 1.4rem; }
.auth-field {
    position: relative;
    display: block;
    border-bottom: 1px solid var(--wo-line);
    padding: 1.15rem 0 .35rem;
    cursor: text;
}
.auth-field__label {
    position: absolute;
    top: 1.25rem; left: 0;
    font-family: var(--font-mono);
    font-size: .92rem;
    color: var(--wo-text-muted);
    letter-spacing: -.005em;
    pointer-events: none;
    transition: transform .25s cubic-bezier(.2,.7,.2,1), font-size .25s, color .25s;
    transform-origin: left top;
}
/* NAV-FIX (2026-05-29): pure-CSS floating label - was JS-driven via
   .is-focused / .has-value classes that nobody set, so the label sat on
   top of the typed text. Now driven by :focus-within (label floats up
   while typing) and :has(input:not(:placeholder-shown)) (label stays up
   once a value is present). Requires placeholder=" " on every input so
   :placeholder-shown can flip on/off - added in the auth view files. */
.auth-field:focus-within .auth-field__label,
.auth-field:has(input:not(:placeholder-shown)) .auth-field__label,
.auth-field.is-focused .auth-field__label,
.auth-field.has-value  .auth-field__label {
    transform: translateY(-1.1rem) scale(.78);
    color: var(--wo-primary-deep);
    text-transform: uppercase;
    letter-spacing: .14em;
}
.auth-field input {
    width: 100%;
    border: 0; outline: 0;
    background: transparent;
    font-family: var(--font-body); font-size: 1rem;
    color: var(--wo-ink);
    padding: .35rem 0 .25rem;
    line-height: 1.4;
}
/* Placeholders are whitespace ( placeholder=" " ) - keep them invisible. */
.auth-field input::placeholder { color: transparent; }
/* Sweep-in underline on focus */
.auth-field__line {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--wo-primary);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.auth-field:focus-within .auth-field__line,
.auth-field.is-focused .auth-field__line { transform: scaleX(1); }
.auth-field__action {
    position: absolute; right: 0; top: 1.25rem;
    font-family: var(--font-mono);
    font-size: .78rem; color: var(--wo-text-muted);
    text-decoration: none;
    transition: color .15s;
}
.auth-field__action:hover { color: var(--wo-primary-deep); }
.auth-hint {
    font-family: var(--font-mono);
    font-size: .72rem; color: var(--wo-text-muted);
    margin: .55rem 0 0; letter-spacing: .04em;
    display: flex; align-items: center; gap: .4rem;
}
.auth-hint::before {
    content: ''; width: 4px; height: 4px;
    background: var(--wo-primary); border-radius: 50%;
}

/* Role picker */
.auth-roles { display: flex; flex-direction: column; gap: .65rem; }
.auth-roles__label {
    font-family: var(--font-mono);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-text-muted);
}
.auth-roles__group { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.auth-role { cursor: pointer; }
.auth-role input { position: absolute; opacity: 0; pointer-events: none; }
.auth-role__card {
    display: flex; flex-direction: column; gap: .25rem;
    border: 1px solid var(--wo-line);
    border-radius: 6px;
    padding: 1rem 1.1rem;
    transition: all .18s ease;
    background: var(--wo-card);
}
.auth-role__card i { color: var(--wo-primary-deep); font-size: 1.1rem; margin-bottom: .35rem; }
.auth-role__card strong { font-family: var(--font-display); font-weight: 700; color: var(--wo-ink); }
.auth-role__card span { font-family: var(--font-mono); font-size: .76rem; color: var(--wo-text-muted); }
.auth-role input:checked + .auth-role__card {
    border-color: var(--wo-ink);
    background: var(--wo-paper);
    box-shadow: 0 0 0 1px var(--wo-ink);
}
.auth-role input:checked + .auth-role__card i { color: var(--wo-primary); }

.auth-agree {
    display: flex; align-items: flex-start; gap: .6rem;
    font-size: .88rem; color: var(--wo-text-muted);
    cursor: pointer;
}
.auth-agree input {
    width: 18px; height: 18px;
    appearance: none;
    border: 1px solid var(--wo-line);
    border-radius: 3px;
    margin-top: 2px;
    cursor: pointer; flex-shrink: 0;
    position: relative;
    transition: all .15s;
    background: var(--wo-card);
}
.auth-agree input:checked {
    background: var(--wo-ink); border-color: var(--wo-ink);
}
.auth-agree input:checked::after {
    content: '✓'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--wo-primary); font-size: 12px; font-weight: 700;
}
.auth-agree a { color: var(--wo-ink); border-bottom: 1px solid var(--wo-primary); text-decoration: none; }
.auth-agree a:hover { color: var(--wo-primary-deep); }

/* Submit button - magnetic + slide-arrow + loading state */
.auth-submit {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    gap: .7rem;
    padding: 1.05rem 1.5rem;
    background: var(--wo-ink); color: var(--wo-paper);
    border: 1px solid var(--wo-ink);
    border-radius: 4px;
    font-family: var(--font-display); font-weight: 700;
    font-size: 1rem; letter-spacing: -.005em;
    cursor: pointer;
    overflow: hidden;
    will-change: transform;
    transition:
        background .18s ease, color .18s, border-color .18s,
        transform .35s cubic-bezier(.18,.7,.18,1),
        box-shadow .25s ease;
    box-shadow: 0 2px 0 var(--wo-line);
}
.auth-submit:hover {
    box-shadow: 0 8px 28px -8px rgba(38,27,16,.45), 0 2px 0 var(--wo-line);
}
.auth-submit::before {
    content: ''; position: absolute; inset: 0;
    background: var(--wo-primary);
    transform: translateX(-101%);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
    z-index: 0;
}
.auth-submit:hover { color: var(--wo-ink); }
.auth-submit:hover::before { transform: translateX(0); }
.auth-submit:active { transform: translateY(1px); }
.auth-submit__label,
.auth-submit__arrow,
.auth-submit__spin { position: relative; z-index: 1; transition: opacity .18s, transform .25s; }
.auth-submit__arrow { transform: translateX(-2px); }
.auth-submit:hover .auth-submit__arrow { transform: translateX(2px); }
.auth-submit__spin { display: none; }
.auth-submit.is-loading .auth-submit__label,
.auth-submit.is-loading .auth-submit__arrow { opacity: 0; }
.auth-submit.is-loading .auth-submit__spin {
    display: inline-flex;
    position: absolute; inset: 0; align-items: center; justify-content: center;
    animation: spin 1s linear infinite;
}
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Continue-with-Google button - refined, not Material-template */
.auth-social {
    display: flex; align-items: center; justify-content: center;
    gap: .7rem;
    padding: .85rem 1.1rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 4px;
    text-decoration: none;
    color: var(--wo-ink);
    font-family: var(--font-display); font-weight: 600;
    font-size: .95rem; letter-spacing: -.005em;
    transition: border-color .15s ease, background .15s ease, transform .12s;
    margin-bottom: 1.5rem;
}
.auth-social:hover {
    border-color: var(--wo-ink);
    background: var(--wo-paper);
    color: var(--wo-ink);
    transform: translateY(-1px);
}
.auth-social:active { transform: translateY(0); }
.auth-social__g { display: inline-block; flex-shrink: 0; }

.auth-divider {
    display: flex; align-items: center; gap: 1rem;
    margin: 0 0 1.5rem;
    color: var(--wo-text-muted);
    font-family: var(--font-mono);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--wo-line);
}

/* OTP / 2FA - big, tracked, monospace input */
.auth-otp {
    margin-bottom: 1.8rem;
    border: 1px solid var(--wo-line);
    border-radius: 6px;
    background: var(--wo-card);
    transition: border-color .15s, box-shadow .15s;
}
.auth-otp:focus-within {
    border-color: var(--wo-ink);
    box-shadow: 0 0 0 1px var(--wo-ink), 0 0 0 4px rgba(255,153,0,.15);
}
.auth-otp input {
    width: 100%;
    border: 0; outline: 0; background: transparent;
    font-family: var(--font-mono); font-weight: 600;
    font-size: 1.6rem; letter-spacing: .35em;
    text-align: center;
    color: var(--wo-ink);
    padding: 1rem 1rem;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.auth-otp input::placeholder {
    color: var(--wo-line);
    letter-spacing: .15em;
    font-weight: 400;
}

.auth-alt {
    margin-top: 2rem;
    font-family: var(--font-mono); font-size: .85rem;
    color: var(--wo-text-muted);
    display: flex; gap: .4rem;
}
.auth-alt a {
    color: var(--wo-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--wo-primary);
}
.auth-alt a:hover { color: var(--wo-primary-deep); }

.auth-foot {
    display: flex; gap: 1.5rem;
    font-family: var(--font-mono); font-size: .72rem; color: var(--wo-text-muted);
    margin-top: 2rem;
    border-top: 1px solid var(--wo-line);
    padding-top: 1rem;
}
.auth-foot a { color: var(--wo-text-muted); text-decoration: none; }
.auth-foot a:hover { color: var(--wo-ink); }

/* Flash alerts on auth pages - minimal, no Bootstrap chrome */
.auth-form-wrap .alert {
    border: 1px solid var(--wo-line);
    border-left: 3px solid var(--wo-primary);
    border-radius: 4px;
    background: var(--wo-paper);
    color: var(--wo-ink);
    font-size: .92rem;
    padding: .75rem 1rem;
    margin-bottom: 1.2rem;
}
.auth-form-wrap .alert-danger,
.auth-form-wrap .alert-warning { border-left-color: var(--wo-bad); }

/* -------- Admin sidebar ---------- */
.admin-sidebar { background: var(--wo-paper); border-right: 1px solid var(--wo-line); }
.admin-sidebar .nav-link {
    color: var(--wo-ink-2); border-radius: 4px;
    padding: .5rem .75rem; font-weight: 500; font-size: .9rem;
}
.admin-sidebar .nav-link:hover { background: var(--wo-card); color: var(--wo-ink); }
.admin-sidebar .nav-link.active {
    background: var(--wo-ink); color: var(--wo-primary);
    font-weight: 600;
}

/* ============================================================================
 * LEGAL PROSE - Terms + Privacy editorial layout
 * ============================================================================ */
.legal-toc {
    position: sticky; top: 5rem;
    padding-right: 1rem;
}
.legal-toc .spec-tag { color: var(--wo-primary-deep); }
.legal-toc ol {
    list-style: none; counter-reset: toc;
    padding: 0; margin: 1rem 0 0;
    font-family: var(--font-mono); font-size: .82rem;
}
.legal-toc ol li {
    counter-increment: toc;
    padding: .4rem 0;
    border-bottom: 1px dashed var(--wo-line-soft);
}
.legal-toc ol li::before {
    content: counter(toc, decimal-leading-zero);
    color: var(--wo-primary-deep);
    font-weight: 600; margin-right: .55rem;
}
.legal-toc a {
    color: var(--wo-ink-2); text-decoration: none;
    border: none; transition: color .12s;
}
.legal-toc a:hover { color: var(--wo-primary-deep); }

.legal-prose {
    max-width: 720px;
    font-size: 1.02rem; line-height: 1.7;
    color: var(--wo-ink-2);
}
.legal-prose section { margin-bottom: 2.8rem; scroll-margin-top: 5rem; }
.legal-prose h2 {
    font-family: var(--font-display);
    font-size: 1.55rem; font-weight: 700; letter-spacing: -.025em;
    color: var(--wo-ink);
    margin: 0 0 .9rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--wo-line);
}
.legal-prose section:first-of-type h2 { border-top: none; padding-top: 0; }
.legal-prose p { margin: 0 0 1rem; }
.legal-prose ul { margin: 0 0 1rem; padding-left: 1.4rem; }
.legal-prose ul li { margin-bottom: .5rem; padding-left: .15rem; }
.legal-prose ul li::marker { color: var(--wo-primary-deep); }
.legal-prose code {
    font-family: var(--font-mono); font-size: .88em;
    background: var(--wo-paper-2);
    border: 1px solid var(--wo-line);
    padding: 1px 6px; border-radius: 3px;
    color: var(--wo-ink);
    word-break: break-all;
}
.legal-prose a {
    color: var(--wo-ink);
    border-bottom: 1px solid var(--wo-primary);
    text-decoration: none;
}
.legal-prose a:hover { color: var(--wo-primary-deep); }

/* ============================================================================
 * FREELANCER PROFILE - rich, future-ready
 * ============================================================================ */
.profile-hero { position: relative; padding-bottom: 1.5rem; }
.profile-hero__cover {
    height: 200px;
    background:
        radial-gradient(900px 400px at 5% 0%, rgba(255,153,0,.22) 0%, transparent 65%),
        radial-gradient(700px 300px at 95% 0%, rgba(217,120,0,.16) 0%, transparent 60%),
        linear-gradient(180deg, var(--wo-paper-2) 0%, var(--wo-paper) 100%);
    border-bottom: 1px solid var(--wo-line);
}
.profile-hero__card {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin-top: -80px;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr 280px;
    gap: 1.75rem;
    align-items: flex-start;
    box-shadow: var(--wo-shadow-md);
}
@media (max-width: 900px) {
    .profile-hero__card { grid-template-columns: 1fr; gap: 1.25rem; }
}
.profile-hero__left {
    display: flex; flex-direction: column; align-items: center; gap: .75rem;
}
.profile-hero__avatar {
    width: 110px; height: 110px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--wo-primary), var(--wo-primary-strong));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 800; font-size: 38px; letter-spacing: -.03em;
    box-shadow: 0 6px 18px rgba(255,153,0,.35);
}
.profile-hero__main { min-width: 0; }
.profile-hero__name-row {
    display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
    margin-bottom: .35rem;
}
.profile-hero__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--wo-ink);
    margin: 0;
}
.profile-verified {
    background: var(--wo-primary-soft);
    color: var(--wo-primary-deep);
    font-family: var(--font-mono);
    font-size: .68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
    padding: .2rem .55rem;
    border-radius: 3px;
    display: inline-flex; align-items: center; gap: .3rem;
}

/* ──────────────────────────────────────────────────────────
   PROFILE-TIER-V2 (2026-06-01) - Creative tier medal
   A minted "medal" badge: circular icon stamp on the left,
   tier wordmark on the right. Each tier has its own
   stamp colour, wordmark colour, and subtle texture so the
   badge feels earned, not just a coloured pill.
   ────────────────────────────────────────────────────────── */
.tier-medal {
    --stamp-bg: #ddc28a;
    --stamp-ring: #fffaee;
    --stamp-fg: #4a3015;
    --plate-bg: #fffaee;
    --plate-border: rgba(180, 140, 70, .35);
    --plate-fg: #3a2412;

    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 3px 12px 3px 3px;
    border-radius: 999px;
    background: var(--plate-bg);
    border: 1px solid var(--plate-border);
    color: var(--plate-fg);
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .7) inset,
        0 -1px 0 rgba(58, 36, 18, .04) inset,
        0 2px 6px rgba(58, 36, 18, .08);
    transition: transform .16s ease, box-shadow .16s ease;
    cursor: default;
    user-select: none;
    white-space: nowrap;
    vertical-align: middle;
}
.tier-medal:hover {
    transform: translateY(-1px) rotate(-.6deg);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .7) inset,
        0 -1px 0 rgba(58, 36, 18, .04) inset,
        0 6px 14px rgba(58, 36, 18, .14);
}

/* The minted "stamp" - a small coloured disc with the tier icon */
.tier-medal__stamp {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--stamp-bg);
    color: var(--stamp-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow:
        0 0 0 2px var(--stamp-ring),
        0 0 0 3px var(--plate-border),
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -1px 0 rgba(58, 36, 18, .14);
    flex: 0 0 auto;
}
.tier-medal__stamp i {
    font-size: 11px;
    line-height: 1;
}
.tier-medal__name {
    padding-right: 1px;
}

/* ── Start Star - cream / Newcomer ──
   Light, friendly, "fresh enrolment" feel. */
.tier-medal--start_star {
    --plate-bg: linear-gradient(180deg, #fffaee 0%, #f7eed5 100%);
    --plate-border: rgba(180, 140, 70, .32);
    --plate-fg: #5a3a1c;
    --stamp-bg: radial-gradient(circle at 30% 30%, #fff3cf 0%, #d9b87b 100%);
    --stamp-ring: #fffaee;
    --stamp-fg: #6b4c20;
}

/* ── Gold Genius - gold / Top 50% ──
   Warm gilt, brighter stamp, espresso wordmark for contrast. */
.tier-medal--gold_genius {
    --plate-bg: linear-gradient(160deg, #ffe9a8 0%, #e8b945 100%);
    --plate-border: rgba(155, 100, 20, .55);
    --plate-fg: #3a2412;
    --stamp-bg: radial-gradient(circle at 30% 30%, #fff2c0 0%, #b07700 100%);
    --stamp-ring: #ffe9a8;
    --stamp-fg: #fff8e1;
}

/* ── Prime Pro - espresso / Top 10% ──
   Dark roast plate with a hot-gold stamp. Reads as senior. */
.tier-medal--prime_pro {
    --plate-bg: linear-gradient(160deg, #5a3a1c 0%, #3a2412 100%);
    --plate-border: rgba(255, 213, 138, .35);
    --plate-fg: #fdf6e3;
    --stamp-bg: radial-gradient(circle at 30% 30%, #ffe6a8 0%, #d6961f 100%);
    --stamp-ring: #5a3a1c;
    --stamp-fg: #3a2412;
}

/* ── Expert Elite - burgundy / Top 1% ──
   Burgundy plate with a gold trim glow, plus a soft shimmer
   that sweeps across the medal every few seconds so it reads
   as the apex tier. Reduced motion users get the static look. */
.tier-medal--expert_elite {
    --plate-bg: radial-gradient(circle at 28% 28%, rgba(255, 213, 138, .25), transparent 65%),
                linear-gradient(160deg, #7a1a2e 0%, #4a0e1c 100%);
    --plate-border: rgba(255, 213, 138, .65);
    --plate-fg: #fff5d8;
    --stamp-bg: radial-gradient(circle at 30% 30%, #fff2c0 0%, #f0c87a 55%, #b8851d 100%);
    --stamp-ring: #4a0e1c;
    --stamp-fg: #4a0e1c;

    position: relative;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 213, 138, .25) inset,
        0 -1px 0 rgba(0, 0, 0, .25) inset,
        0 2px 8px rgba(74, 14, 28, .35),
        0 0 0 1px rgba(255, 213, 138, .15);
}
/* gold shimmer sweep on the elite medal */
.tier-medal--expert_elite::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(255, 234, 178, .42) 50%,
        transparent 70%);
    transform: translateX(-120%);
    animation: tier-medal-shine 5.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes tier-medal-shine {
    0%, 75%   { transform: translateX(-120%); }
    100%      { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
    .tier-medal--expert_elite::after { animation: none; display: none; }
    .tier-medal:hover { transform: none; }
}

@media (max-width: 640px) {
    .tier-medal { font-size: .66rem; padding: 2px 10px 2px 2px; gap: .35rem; }
    .tier-medal__stamp { width: 20px; height: 20px; }
    .tier-medal__stamp i { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════════════════
   CLIENT-PROFILE-V2 (2026-06-01) - Modern editorial /client/{handle}
   Cover band, company crest, identity, stats strip, dual-column body with
   trust panel, hiring facts sidebar, Reputation Bridge soft-CTA.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hero band ──────────────────────────────────────────────────────── */
.client-hero {
    position: relative;
    padding-bottom: 24px;
    background: var(--wo-paper, #fdf7e8);
}
.client-hero__cover {
    position: absolute;
    inset: 0 0 auto 0;
    height: 180px;
    background:
        radial-gradient(circle at 12% 25%, rgba(214, 90, 19, .14), transparent 55%),
        radial-gradient(circle at 88% 10%, rgba(122, 26, 46, .12), transparent 60%),
        linear-gradient(135deg, #3a2412 0%, #5a3a1c 55%, #7a4a2a 100%);
    z-index: 0;
}
.client-hero__cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: .35;
    pointer-events: none;
}

.client-hero__card {
    position: relative;
    z-index: 1;
    margin-top: 100px;
    display: grid;
    grid-template-columns: 132px 1fr 240px;
    gap: 28px;
    align-items: start;
    background: #fffaee;
    border: 1px solid rgba(58, 36, 18, .14);
    border-radius: 16px;
    padding: 22px 26px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .8) inset,
        0 12px 28px rgba(58, 36, 18, .14),
        0 2px 6px rgba(58, 36, 18, .08);
}

/* ── Crest (company logo / initials) ────────────────────────────────── */
.client-hero__crest {
    position: relative;
    width: 132px;
    height: 132px;
    margin-top: -56px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff 0%, #fdf3e0 100%);
    border: 1px solid rgba(58, 36, 18, .18);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .8) inset,
        0 10px 22px rgba(58, 36, 18, .18);
}
.client-hero__crest img {
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    object-fit: cover;
    border-radius: 12px;
}
.client-hero__crest-letters {
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--wo-ink-1, #3a2412);
    line-height: 1;
}
.client-hero__crest-tick {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(160deg, #d65a13 0%, #a8430b 100%);
    color: #fff5d8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border: 3px solid #fffaee;
    box-shadow: 0 4px 10px rgba(214, 90, 19, .35);
}

/* ── Identity column ─────────────────────────────────────────────────── */
.client-hero__main {
    min-width: 0;
    padding-top: 6px;
}
.client-hero__eyebrow {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wo-orange, #d65a13);
    margin-bottom: 6px;
}
.client-hero__name {
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: clamp(1.7rem, 2.4vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 8px;
    color: var(--wo-ink-1, #3a2412);
    letter-spacing: -.01em;
}
.client-hero__sub {
    color: var(--wo-ink-2, #6b4c2b);
    font-size: .92rem;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.client-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 12px;
}
.client-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fdf3e0;
    border: 1px solid rgba(58, 36, 18, .14);
    color: var(--wo-ink-2, #6b4c2b);
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .02em;
    line-height: 1.1;
}
.client-chip i { font-size: .85em; }
.client-chip--verified {
    background: linear-gradient(180deg, #f6e6c4 0%, #e6cc8c 100%);
    border-color: rgba(155, 100, 20, .42);
    color: #4a3015;
    font-weight: 700;
}
.client-chip--payment {
    background: #fff;
    border-color: rgba(214, 90, 19, .35);
    color: var(--wo-orange, #d65a13);
}
.client-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--wo-text-muted, #8a6d4c);
}
.client-hero__meta i { margin-right: 3px; }
.client-hero__handle { color: var(--wo-ink-2, #6b4c2b); font-weight: 600; }
.client-hero__website {
    color: var(--wo-orange, #d65a13);
    text-decoration: none;
    border-bottom: 1px dashed rgba(214, 90, 19, .45);
}
.client-hero__website:hover { color: #8a3e00; border-bottom-style: solid; }

/* ── CTA column ──────────────────────────────────────────────────────── */
.client-hero__cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: stretch;
    padding-top: 6px;
}
.client-hero__cta .btn-wo,
.client-hero__cta form { width: 100%; }
.btn-wo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.btn-wo--primary {
    background: linear-gradient(160deg, #d65a13 0%, #a8430b 100%);
    color: #fff5d8;
    box-shadow: 0 4px 10px rgba(214, 90, 19, .28);
}
.btn-wo--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(214, 90, 19, .35);
    color: #fff5d8;
}
.btn-wo--ghost {
    background: #fff;
    color: var(--wo-ink-1, #3a2412);
    border-color: rgba(58, 36, 18, .25);
}
.btn-wo--ghost:hover { background: #fdf3e0; color: var(--wo-ink-1, #3a2412); }
.btn-wo__count {
    background: rgba(255, 245, 216, .25);
    border: 1px solid rgba(255, 245, 216, .35);
    padding: 0 7px;
    border-radius: 999px;
    font-size: .72rem;
    line-height: 1.4;
    margin-left: 2px;
}
.client-share {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--wo-text-muted, #8a6d4c);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 0;
    cursor: pointer;
}
.client-share:hover { color: var(--wo-orange, #d65a13); }
.client-share.is-copied { color: #1f7a3a; }
.client-hero__vis {
    text-align: center;
    color: var(--wo-text-muted, #8a6d4c);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ── Stats strip ─────────────────────────────────────────────────────── */
.client-stats {
    margin: 18px 0 4px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: rgba(58, 36, 18, .12);
    border: 1px solid rgba(58, 36, 18, .12);
    border-radius: 14px;
    overflow: hidden;
}
.client-stat {
    background: #fffaee;
    padding: 16px 18px;
    text-align: center;
}
.client-stat__num {
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--wo-ink-1, #3a2412);
    margin-bottom: 4px;
}
.client-stat__label {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wo-text-muted, #8a6d4c);
}

/* ── Tabs ────────────────────────────────────────────────────────────── */
.client-tabs {
    margin: 22px 0 0;
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(58, 36, 18, .14);
}
.client-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--wo-text-muted, #8a6d4c);
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
    transition: color .14s ease, border-color .14s ease;
}
.client-tab:hover { color: var(--wo-ink-1, #3a2412); }
.client-tab.is-active {
    color: var(--wo-ink-1, #3a2412);
    border-bottom-color: var(--wo-orange, #d65a13);
}

/* ── Body grid ───────────────────────────────────────────────────────── */
.client-body { padding: 24px 0 56px; }
.client-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
}
.client-col-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.client-col-side { display: flex; flex-direction: column; gap: 18px; }

/* ── Main cards ──────────────────────────────────────────────────────── */
.client-card {
    background: #fffaee;
    border: 1px solid rgba(58, 36, 18, .12);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 1px 2px rgba(58, 36, 18, .04);
}
.client-card__head { margin-bottom: 14px; }
.client-card__kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wo-orange, #d65a13);
    margin-bottom: 4px;
}
.client-card h2 {
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--wo-ink-1, #3a2412);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.client-card__count {
    background: var(--wo-orange, #d65a13);
    color: #fff5d8;
    padding: 1px 9px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.5;
}
.client-prose {
    color: var(--wo-ink-2, #5a3a1c);
    font-size: 1rem;
    line-height: 1.65;
    white-space: pre-wrap;
}
.client-empty {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    background: #fdf3e0;
    border: 1px dashed rgba(58, 36, 18, .2);
    border-radius: 10px;
    color: var(--wo-ink-2, #6b4c2b);
    font-size: .92rem;
}
.client-empty i { color: var(--wo-orange, #d65a13); font-size: 1.1rem; margin-top: 1px; }
.client-empty a { color: var(--wo-orange, #d65a13); font-weight: 700; text-decoration: none; }
.client-empty a:hover { color: #8a3e00; }

/* ── Open jobs ──────────────────────────────────────────────────────── */
.client-jobs { list-style: none; margin: 0; padding: 0; }
.client-job {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 14px 16px;
    border: 1px solid rgba(58, 36, 18, .1);
    border-radius: 10px;
    background: #fff;
    margin-bottom: 8px;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.client-job:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(58, 36, 18, .08);
    border-color: rgba(214, 90, 19, .35);
}
.client-job__link {
    flex: 1;
    display: block;
    text-decoration: none;
    color: var(--wo-ink-1, #3a2412);
}
.client-job__title { display: block; font-weight: 700; font-size: 1rem; line-height: 1.3; }
.client-job__meta {
    display: block;
    margin-top: 2px;
    color: var(--wo-text-muted, #8a6d4c);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .04em;
}
.client-job__arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fdf3e0;
    color: var(--wo-orange, #d65a13);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.client-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: var(--wo-orange, #d65a13);
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
}
.client-more:hover { color: #8a3e00; }

/* ── Trust panel ─────────────────────────────────────────────────────── */
.client-card--trust {
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 213, 138, .18), transparent 50%),
        #fffaee;
    border-color: rgba(155, 100, 20, .28);
}
.client-trust {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.client-trust li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.client-trust__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(160deg, #fde6a8 0%, #e8b945 100%);
    color: #4a3015;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(155, 100, 20, .2);
}
.client-trust strong {
    display: block;
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: 1rem;
    color: var(--wo-ink-1, #3a2412);
    margin-bottom: 2px;
}
.client-trust p {
    margin: 0;
    color: var(--wo-ink-2, #6b4c2b);
    font-size: .9rem;
    line-height: 1.45;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.client-side {
    background: #fffaee;
    border: 1px solid rgba(58, 36, 18, .12);
    border-radius: 14px;
    padding: 18px 20px;
}
.client-side__head {
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wo-orange, #d65a13);
    margin-bottom: 12px;
}
.client-facts { margin: 0; display: grid; grid-template-columns: 1fr; gap: 4px; }
.client-facts dt {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--wo-text-muted, #8a6d4c);
    margin-top: 8px;
}
.client-facts dd {
    margin: 0;
    color: var(--wo-ink-1, #3a2412);
    font-weight: 600;
    font-size: .96rem;
}

.client-side--cta {
    background: linear-gradient(180deg, #fffaee 0%, #fdf3e0 100%);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.client-side__pitch {
    color: var(--wo-ink-2, #6b4c2b);
    font-size: .88rem;
    line-height: 1.5;
    margin: 0 0 4px;
}

.client-side--bridge {
    background:
        radial-gradient(circle at 80% 20%, rgba(255, 213, 138, .25), transparent 55%),
        linear-gradient(160deg, #3a2412 0%, #5a3a1c 100%);
    border-color: rgba(255, 213, 138, .35);
    color: #fdf6e3;
}
.client-side--bridge strong {
    display: block;
    font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
    font-size: 1.05rem;
    margin: 4px 0;
    color: #fff5d8;
}
.client-side--bridge p {
    margin: 0 0 10px;
    color: rgba(253, 246, 227, .82);
    font-size: .88rem;
    line-height: 1.5;
}
.client-side__bridge-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #ffd58a;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
}
.client-side__bridge-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #ffd58a;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 213, 138, .4);
    padding-bottom: 2px;
}
.client-side__bridge-link:hover { color: #fff5d8; border-bottom-color: #fff5d8; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .client-grid { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
    .client-hero__card {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 18px;
        margin-top: 80px;
    }
    .client-hero__crest {
        width: 88px;
        height: 88px;
        margin-top: -50px;
        margin-bottom: 4px;
    }
    .client-hero__crest-letters { font-size: 1.8rem; }
    .client-hero__crest-tick { width: 28px; height: 28px; font-size: .85rem; }
    .client-stats { grid-template-columns: repeat(2, 1fr); }
    .client-trust { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
    .client-hero__cover { height: 140px; }
    .client-hero__card { padding: 16px; }
    .client-stat__num { font-size: 1.4rem; }
    .client-stat { padding: 14px 10px; }
    .client-card { padding: 18px 16px; }
}
    color: var(--wo-ink-2);
    font-size: 1.08rem;
    margin: 0 0 .8rem;
}
.profile-hero__meta {
    display: flex; flex-wrap: wrap; gap: .65rem 1.25rem;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--wo-text-muted);
}
.profile-hero__meta i { color: var(--wo-primary-deep); margin-right: .25rem; }
.profile-hero__handle { color: var(--wo-primary-deep); font-weight: 600; }

.profile-hero__cta {
    display: flex; flex-direction: column; gap: .55rem;
    padding-left: 1.25rem; border-left: 1px solid var(--wo-line);
}
@media (max-width: 900px) {
    .profile-hero__cta { padding-left: 0; border-left: none; border-top: 1px solid var(--wo-line); padding-top: 1rem; }
}
.profile-hero__rate {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--wo-ink);
    line-height: 1;
    margin-bottom: .35rem;
}
.profile-hero__rate .num { font-size: 2rem; letter-spacing: -.03em; }
.profile-hero__rate-unit {
    font-family: var(--font-mono); font-size: .8rem;
    color: var(--wo-text-muted); font-weight: 500;
    margin-left: .25rem;
}
.profile-hero__cta-row {
    display: flex; gap: .35rem; margin-top: .35rem;
}
.profile-icon-btn {
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    border-radius: 4px;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--wo-ink-2); cursor: pointer;
    transition: all .14s;
}
.profile-icon-btn:hover {
    border-color: var(--wo-ink); color: var(--wo-ink); background: var(--wo-card);
}

/* Profile stats strip */
.profile-stats {
    background: var(--wo-ink);
    color: var(--wo-paper);
    border-top: 1px solid var(--wo-line);
    border-bottom: 1px solid var(--wo-line);
}
.profile-stat {
    padding: 1.25rem 1.5rem;
    border-right: 1px solid rgba(255,255,255,.08);
}
.profile-stat:last-child { border-right: none; }
.profile-stat__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    letter-spacing: -.03em;
    color: var(--wo-primary);
    line-height: 1;
}
.profile-stat__suffix { color: var(--wo-paper); font-size: 1rem; margin-left: 2px; }
.profile-stat__label {
    font-family: var(--font-mono);
    font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
    color: rgba(255,255,255,.55); font-weight: 500;
    margin-top: .35rem;
}

/* Profile body - blocks */
.profile-block {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 8px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
}
.profile-block__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -.02em;
    color: var(--wo-ink);
    margin-bottom: 1rem;
}
.profile-bio { color: var(--wo-ink-2); line-height: 1.65; }

/* Skill bars */
.profile-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
@media (max-width: 760px) { .profile-skills { grid-template-columns: 1fr; } }
.profile-skill__name {
    font-weight: 600; color: var(--wo-ink);
}
.profile-skill__lv {
    font-family: var(--font-mono);
    font-size: .72rem; color: var(--wo-text-muted);
    letter-spacing: .02em;
}
.profile-skill__bar {
    height: 4px; background: var(--wo-line-soft);
    border-radius: 2px; overflow: hidden; position: relative;
}
.profile-skill__bar span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--wo-primary-deep), var(--wo-primary));
    transition: width .8s cubic-bezier(.2,.7,.2,1);
}

/* Portfolio cards */
.portfolio-card {
    border: 1px solid var(--wo-line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--wo-paper);
    transition: all .18s ease;
    height: 100%;
    display: flex; flex-direction: column;
}
.portfolio-card:hover { border-color: var(--wo-ink); transform: translateY(-2px); box-shadow: var(--wo-shadow-md); }
.portfolio-card__visual {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--wo-paper-2), var(--wo-shell));
    display: flex; align-items: center; justify-content: center;
}
.portfolio-card__visual i {
    font-size: 2.5rem; color: var(--wo-primary-deep); opacity: .35;
}
.portfolio-card__body { padding: 1rem 1.15rem; flex: 1; display: flex; flex-direction: column; }
.portfolio-card__title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; margin-bottom: .35rem; color: var(--wo-ink); }
.portfolio-card__desc { color: var(--wo-text-muted); font-size: .9rem; flex: 1; }
.portfolio-card__link {
    color: var(--wo-primary-deep); font-weight: 600;
    font-family: var(--font-display); font-size: .9rem;
    text-decoration: none; margin-top: .6rem;
}
.portfolio-card__link:hover { color: var(--wo-primary); }

.profile-portfolio-empty {
    text-align: center; padding: 2.5rem 1rem;
    background: var(--wo-paper); border: 1px dashed var(--wo-line);
    border-radius: 8px;
}
.profile-portfolio-empty i { font-size: 2rem; color: var(--wo-line); display: block; margin-bottom: .5rem; }

/* Sidebar cards */
.profile-sidebar { position: sticky; top: 80px; }
.sidebar-card {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 8px;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1rem;
}
.sidebar-card--accent {
    background: linear-gradient(180deg, var(--wo-primary-soft), var(--wo-card));
    border-color: var(--wo-primary-edge);
}
.sidebar-card__title {
    font-family: var(--font-display);
    font-weight: 700; font-size: .92rem;
    color: var(--wo-ink);
    margin-bottom: .85rem;
    border-bottom: 1px solid var(--wo-line);
    padding-bottom: .55rem;
}
.sidebar-card__eyebrow {
    font-family: var(--font-mono);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-primary-deep); font-weight: 600;
    margin-bottom: .65rem;
    display: flex; align-items: center; gap: .35rem;
}
.sidebar-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: .35rem 0;
    border-bottom: 1px dashed var(--wo-line-soft);
    font-size: .92rem;
}
.sidebar-row:last-child { border-bottom: none; }
.sidebar-row__label { color: var(--wo-text-muted); }
.sidebar-row__val { color: var(--wo-ink); font-weight: 600; }
.sidebar-trust {
    list-style: none; padding: 0; margin: 0;
}
.sidebar-trust li {
    display: flex; align-items: center; gap: .55rem;
    padding: .35rem 0;
    color: var(--wo-ink-2);
    font-size: .9rem;
}
.sidebar-trust li i { color: var(--wo-primary-deep); }

/* ============================================================================
 * TALENT SEARCH - refined
 * ============================================================================ */
.talent-head {
    padding: 2rem 0 1.5rem;
    border-bottom: 1px solid var(--wo-line);
    background: linear-gradient(180deg, var(--wo-paper) 0%, var(--wo-paper-2) 100%);
}
.talent-search-bar {
    position: relative;
    display: flex; align-items: center; gap: .55rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 6px;
    padding: .4rem .55rem .4rem 2.4rem;
    width: 460px; max-width: 100%;
}
.talent-search-bar i {
    position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
    color: var(--wo-text-muted);
}
.talent-search-bar input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font-family: var(--font-body); font-size: .95rem;
    padding: .35rem 0;
}
.talent-search-bar .btn { padding: .45rem 1rem; font-size: .87rem; }

/* Filter rail */
.talent-filters {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 8px;
    padding: 1.25rem 1.4rem;
    position: sticky; top: 80px;
}
.filter-block { padding: 0 0 1rem; border-bottom: 1px solid var(--wo-line-soft); margin-bottom: 1rem; }
.filter-block:last-of-type { border-bottom: none; }
.filter-block__title {
    font-family: var(--font-mono);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-ink-2); font-weight: 600;
    margin: 0 0 .65rem;
}
.filter-check {
    display: flex; align-items: center; gap: .55rem;
    cursor: pointer; font-size: .92rem; color: var(--wo-ink-2);
}
.filter-check input { width: 16px; height: 16px; }
.filter-check span { display: flex; align-items: center; gap: .35rem; }
.filter-count { color: var(--wo-text-muted); font-family: var(--font-mono); font-size: .76rem; }
.filter-range { display: flex; align-items: center; gap: .35rem; }
.filter-range input {
    border: 1px solid var(--wo-line); background: var(--wo-paper);
    border-radius: 4px; padding: .35rem .55rem;
    font-family: var(--font-mono); font-size: .85rem;
    width: 70px;
}
.filter-text {
    width: 100%; border: 1px solid var(--wo-line); background: var(--wo-paper);
    border-radius: 4px; padding: .45rem .65rem;
    font-family: var(--font-body); font-size: .9rem;
}
.filter-skill-chips {
    display: flex; flex-wrap: wrap; gap: .35rem;
}
.filter-skill-chip {
    cursor: pointer; position: relative;
}
.filter-skill-chip input { position: absolute; opacity: 0; pointer-events: none; }
.filter-skill-chip span {
    display: inline-block;
    background: var(--wo-paper);
    border: 1px solid var(--wo-line);
    border-radius: 999px;
    padding: .22rem .65rem;
    font-family: var(--font-mono); font-size: .76rem;
    color: var(--wo-ink-2);
    transition: all .12s;
}
.filter-skill-chip:hover span { border-color: var(--wo-ink); color: var(--wo-ink); }
.filter-skill-chip input:checked + span {
    background: var(--wo-ink); color: var(--wo-primary);
    border-color: var(--wo-ink);
}

.sort-by { display: flex; align-items: center; }
.sort-select {
    border: 1px solid var(--wo-line); background: var(--wo-card);
    border-radius: 4px; padding: .35rem .65rem;
    font-family: var(--font-body); font-size: .85rem; color: var(--wo-ink);
}

/* Talent card (grid result) */
.talent-card {
    display: block;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 10px;
    padding: 1.25rem 1.4rem;
    text-decoration: none;
    color: inherit;
    transition: all .18s ease;
    height: 100%;
}
.talent-card:hover {
    border-color: var(--wo-ink);
    transform: translateY(-2px);
    box-shadow: var(--wo-shadow-md);
}
.talent-card__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .85rem;
    align-items: center;
    margin-bottom: .7rem;
}
.talent-card__avatar {
    width: 48px; height: 48px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--wo-primary), var(--wo-primary-strong));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 15px;
}
.talent-card__name { font-family: var(--font-display); font-size: 1rem; color: var(--wo-ink); }
.talent-card__role { font-size: .85rem; color: var(--wo-text-muted); margin-top: 2px; }
.talent-card__rate {
    font-family: var(--font-display); font-weight: 700;
    color: var(--wo-ink); text-align: right;
    line-height: 1;
}
.talent-card__rate .num { font-size: 1.15rem; }
.talent-card__rate span:last-child {
    display: block; font-family: var(--font-mono); font-size: .7rem;
    color: var(--wo-text-muted); margin-top: 3px; font-weight: 500;
}
.talent-card__bio {
    color: var(--wo-text-muted);
    font-size: .92rem; line-height: 1.5;
    margin: .6rem 0 .75rem;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.talent-card__foot {
    display: flex; flex-wrap: wrap; gap: 1rem;
    border-top: 1px solid var(--wo-line-soft);
    padding-top: .7rem;
}
.talent-card__meta {
    font-family: var(--font-mono); font-size: .76rem;
    color: var(--wo-text-muted);
    display: inline-flex; align-items: center; gap: .35rem;
}
.talent-card__meta i { color: var(--wo-primary-deep); }

.talent-empty {
    background: var(--wo-card);
    border: 1px dashed var(--wo-line);
    border-radius: 8px;
    padding: 3rem 1rem;
    text-align: center;
}
.talent-empty i { font-size: 2.2rem; color: var(--wo-line); display: block; margin-bottom: .6rem; }
.talent-empty h3 { font-family: var(--font-display); margin-bottom: .35rem; }

/* -------- Utilities ---------- */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 768px) { .hide-sm { display: none !important; } }

/* Scrollbar */
.inbox-list__items::-webkit-scrollbar,
.inbox-thread__messages::-webkit-scrollbar { width: 6px; }
.inbox-list__items::-webkit-scrollbar-thumb,
.inbox-thread__messages::-webkit-scrollbar-thumb { background: var(--wo-line); border-radius: 2px; }
.inbox-list__items::-webkit-scrollbar-thumb:hover,
.inbox-thread__messages::-webkit-scrollbar-thumb:hover { background: var(--wo-ink); }

/* ───────── PROFILE DEPTH RING ───────── */
.sidebar-card--ring { background: linear-gradient(135deg, #fffaf0, #fdf3df); }
.ring-wrap { position: relative; width: 92px; height: 92px; flex: 0 0 92px; }
.ring-pct {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Bricolage Grotesque', system-ui;
    font-size: 22px; font-weight: 700; color: #261b10; letter-spacing: -0.02em;
}
.ring-pct span { font-size: 12px; font-weight: 600; color: #ff9900; margin-left: 1px; }
.ring-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ring-checklist li {
    display: flex; align-items: center; gap: 8px;
    font-size: 13.5px; color: rgba(38, 27, 16, 0.55);
}
.ring-checklist li i { color: rgba(38, 27, 16, 0.25); width: 14px; }
.ring-checklist li.is-done { color: #261b10; }
.ring-checklist li.is-done i { color: #ff9900; }

/* ───────── MESSAGE DELETE + OFFER ───────── */
.msg-row { position: relative; }
.msg-del-btn {
    position: absolute; top: 4px; right: -28px;
    background: transparent; border: 0; padding: 4px 6px;
    color: rgba(38, 27, 16, 0.45); cursor: pointer;
    opacity: 0; transition: opacity .15s ease, color .15s ease;
    border-radius: 6px;
}
.msg-row:hover .msg-del-btn { opacity: 1; }
.msg-del-btn:hover { color: #b91c1c; background: rgba(185, 28, 28, 0.08); }
.msg-row--deleted .msg-bubble { opacity: 0.7; font-style: italic; }
.msg-bubble--deleted { background: rgba(38, 27, 16, 0.05) !important; color: rgba(38, 27, 16, 0.55) !important; }
.msg-deleted-banner {
    font-size: 11px; font-weight: 600; color: #b95400;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 4px; padding-bottom: 4px;
    border-bottom: 1px dashed rgba(185, 84, 0, 0.3);
}

/* Offer card */
.msg-offer {
    background: linear-gradient(135deg, #fffaf0, #fdf3df);
    border: 1px solid rgba(255, 153, 0, 0.25);
    border-radius: 14px;
    padding: 16px 18px;
    max-width: 360px;
    box-shadow: 0 4px 14px rgba(255, 153, 0, 0.08);
}
.msg-offer__head {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; color: #ff9900; margin-bottom: 8px;
}
.msg-offer__title {
    font-family: 'Bricolage Grotesque', system-ui;
    font-weight: 600; font-size: 16px; color: #261b10;
    margin-bottom: 8px; line-height: 1.3;
}
.msg-offer__price {
    font-family: 'Bricolage Grotesque', system-ui;
    font-size: 24px; font-weight: 700; color: #261b10;
    letter-spacing: -0.02em;
}
.msg-offer__unit { font-size: 12px; font-weight: 500; color: rgba(38, 27, 16, 0.55); margin-left: 6px; letter-spacing: 0; }
.msg-offer__desc { font-size: 13px; color: rgba(38, 27, 16, 0.75); margin-top: 8px; line-height: 1.5; }
.msg-offer__actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(38, 27, 16, 0.06); }

/* Offer modal */
.offer-modal {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(38, 27, 16, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.offer-modal[hidden] { display: none; }
.offer-modal__card {
    width: 100%; max-width: 440px;
    background: #fff; border-radius: 16px;
    box-shadow: 0 24px 64px rgba(38, 27, 16, 0.32);
    padding: 24px; max-height: 92vh; overflow-y: auto;
}
.offer-modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.offer-modal__head h3 { margin: 0; font-family: 'Bricolage Grotesque', system-ui; font-size: 18px; font-weight: 600; color: #261b10; }
.offer-modal__close { background: transparent; border: 0; font-size: 24px; line-height: 1; color: rgba(38, 27, 16, 0.55); cursor: pointer; padding: 0 4px; }
.offer-modal__close:hover { color: #261b10; }

/* ───────── MEDIA MESSAGES (image / video / pdf inline) ───────── */
.msg-media {
    display: block;
    text-decoration: none;
    border-radius: 14px;
    overflow: hidden;
    max-width: 380px;
    background: rgba(38, 27, 16, 0.04);
    border: 1px solid rgba(38, 27, 16, 0.08);
    box-shadow: 0 2px 10px rgba(38, 27, 16, 0.05);
    margin-top: 2px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.msg-media:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(38, 27, 16, 0.10); }

.msg-media--image img {
    display: block; width: 100%; max-height: 420px; object-fit: cover;
    background: rgba(0,0,0,0.04);
}
.msg-media--video video {
    display: block; width: 100%; max-height: 420px; background: #000;
    border: 0; outline: none;
}
.msg-media--pdf iframe {
    display: block; width: 100%; height: 420px; border: 0; background: #fafafa;
}

.msg-media__caption {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    font-size: 12.5px; color: rgba(38, 27, 16, 0.65);
    background: rgba(255, 255, 255, 0.85);
    border-top: 1px solid rgba(38, 27, 16, 0.06);
}
.msg-media__caption i { color: #ff9900; }
.msg-media__caption a { color: #261b10; text-decoration: none; }
.msg-media__caption a:hover { text-decoration: underline; }
.msg-media__caption .file-size {
    margin-left: auto; padding-left: 8px;
    color: rgba(38, 27, 16, 0.45); font-size: 11.5px;
}

/* mine alignment - keep media right-aligned in own column */
.msg-row--mine .msg-media { margin-left: auto; }

/* ───────── COMPOSER ATTACH PREVIEW CHIP ───────── */
.composer-attach-preview {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    margin: 0 4px 8px;
    background: rgba(255, 153, 0, 0.06);
    border: 1px solid rgba(255, 153, 0, 0.22);
    border-radius: 12px;
    animation: chip-in .15s ease;
}
@keyframes chip-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.composer-attach-preview__thumb {
    width: 44px; height: 44px; object-fit: cover;
    border-radius: 8px; flex-shrink: 0;
    background: rgba(0,0,0,0.06);
}
.composer-attach-preview__icon {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 153, 0, 0.15);
    color: #ff9900;
    font-size: 22px;
}
.composer-attach-preview__body { flex: 1; min-width: 0; }
.composer-attach-preview__name {
    font-weight: 600; font-size: 13.5px; color: #261b10;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.composer-attach-preview__meta {
    font-size: 12px; color: rgba(38, 27, 16, 0.55);
}
.composer-attach-preview__remove {
    background: transparent; border: 0;
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(38, 27, 16, 0.55); font-size: 18px; line-height: 1;
    cursor: pointer; transition: background .12s ease, color .12s ease;
}
.composer-attach-preview__remove:hover { background: rgba(185, 28, 28, 0.10); color: #b91c1c; }

/* ───────── LOAD OLDER MESSAGES ───────── */
.msg-load-older {
    display: flex; justify-content: center;
    padding: 12px 0 8px;
}
.msg-load-older button {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px;
    background: rgba(255, 153, 0, 0.08);
    color: #261b10;
    border: 1px solid rgba(255, 153, 0, 0.25);
    border-radius: 999px;
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.msg-load-older button:hover:not(:disabled) {
    background: rgba(255, 153, 0, 0.16);
    border-color: rgba(255, 153, 0, 0.42);
    transform: translateY(-1px);
}
.msg-load-older button:disabled { opacity: 0.7; cursor: default; }
.msg-load-older button i { color: #ff9900; font-size: 15px; }

/* ───────── IMAGE MESSAGE - WhatsApp style: image only, no caption ───────── */
.msg-media--bare {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.msg-media--bare img {
    border-radius: 12px;
    max-width: 280px;
    max-height: 360px;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 4px 14px rgba(38, 27, 16, 0.10);
    transition: transform .15s ease;
}
.msg-media--bare:hover img { transform: scale(1.01); }

/* ───────── COMPOSER ATTACH PREVIEW - image style ───────── */
.composer-attach-preview--image {
    padding: 8px;
    background: transparent;
    border: 0;
    align-items: flex-start;
}
.composer-attach-preview__image-wrap {
    position: relative;
    display: inline-block;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 8px rgba(38, 27, 16, 0.10);
}
.composer-attach-preview__image {
    display: block;
    max-width: 220px;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: cover;
}
.composer-attach-preview__remove--overlay {
    position: absolute;
    top: 6px; right: 6px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(38, 27, 16, 0.78);
    color: #fff;
    border: 0;
    font-size: 16px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
}
.composer-attach-preview__remove--overlay:hover { background: #b91c1c; }

/* ───────── OFFER MODAL - innovative builder + live preview ───────── */
.offer-modal__card--xl { max-width: 860px; padding: 0; overflow: hidden; }
.offer-modal__card--xl .offer-modal__head { padding: 18px 24px 12px; }
.offer-builder { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; }
@media (max-width: 760px) { .offer-builder { grid-template-columns: 1fr; } }
.offer-builder__form {
    padding: 8px 24px 0;
    max-height: 70vh; overflow-y: auto;
}
.offer-builder__preview {
    background: linear-gradient(180deg, #fdf3df, #fffaf0);
    padding: 18px;
    border-left: 1px solid rgba(38, 27, 16, 0.06);
    display: flex; flex-direction: column; gap: 10px;
}
.offer-builder__preview-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(38, 27, 16, 0.55);
    margin-bottom: 4px;
}
.offer-section { margin-bottom: 14px; }
.offer-section__label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: rgba(38, 27, 16, 0.55);
    margin-bottom: 8px;
}
.offer-row { display: flex; gap: 10px; align-items: flex-end; }
.offer-field { display: block; }
.offer-field span { display: block; font-size: 12px; font-weight: 500; color: rgba(38, 27, 16, 0.7); margin-bottom: 4px; }
.offer-field--grow { flex: 1; }
.offer-modal__foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 0;
    border-top: 1px solid rgba(38, 27, 16, 0.06);
    margin-top: 12px; position: sticky; bottom: 0; background: #fff;
}

/* Presets */
.offer-presets {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.offer-preset {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 10px 12px;
    background: rgba(255, 153, 0, 0.05);
    border: 1px solid rgba(38, 27, 16, 0.08);
    border-radius: 10px;
    cursor: pointer; text-align: left;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.offer-preset:hover { background: rgba(255, 153, 0, 0.12); border-color: rgba(255, 153, 0, 0.32); transform: translateY(-1px); }
.offer-preset i { font-size: 16px; color: #ff9900; margin-bottom: 4px; }
.offer-preset span { font-weight: 600; font-size: 13.5px; color: #261b10; }
.offer-preset em { font-style: normal; font-size: 11.5px; color: rgba(38, 27, 16, 0.6); }

/* Tier */
.offer-tiers { display: flex; gap: 6px; flex-wrap: wrap; }
.offer-tier {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    background: #fff; border: 1px solid rgba(38, 27, 16, 0.12);
    color: rgba(38, 27, 16, 0.7);
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.offer-tier:hover { border-color: #ff9900; color: #261b10; }
.offer-tier.is-active { background: #ff9900; color: #1a1209; border-color: #ff9900; font-weight: 600; }
.offer-tier i { font-size: 12px; }

/* Milestones (form rows) */
.offer-milestones { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.offer-milestone-row {
    display: grid; grid-template-columns: 1fr 120px auto; gap: 6px; align-items: center;
}
.offer-ms-remove {
    background: transparent; border: 0; color: rgba(38,27,16,.5);
    font-size: 14px; width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
}
.offer-ms-remove:hover { background: rgba(185, 28, 28, 0.08); color: #b91c1c; }
.offer-milestone-add {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; background: transparent;
    border: 1px dashed rgba(255, 153, 0, 0.45); color: #b95400;
    border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background .12s, border-color .12s;
}
.offer-milestone-add:hover { background: rgba(255, 153, 0, 0.08); border-color: #ff9900; }

/* Offer card additions */
.msg-offer { position: relative; }
.msg-offer__head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.msg-offer__status {
    margin-left: auto;
    font-size: 10px; font-weight: 700;
    color: #fff; padding: 3px 10px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.msg-offer__tier {
    font-size: 10px; font-weight: 700;
    background: #261b10; color: #ff9900;
    padding: 3px 10px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.msg-offer__chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 10px;
}
.msg-offer__chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-weight: 500;
    background: rgba(38, 27, 16, 0.06); color: rgba(38, 27, 16, 0.75);
    padding: 4px 10px; border-radius: 999px;
}
.msg-offer__chip i { font-size: 11px; color: #b95400; }
.msg-offer__milestones {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px dashed rgba(38, 27, 16, 0.12);
    display: flex; flex-direction: column; gap: 6px;
}
.msg-offer__milestone {
    display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center;
    font-size: 13px;
}
.msg-offer__milestone-i {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255, 153, 0, 0.18); color: #b95400;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}
.msg-offer__milestone-name { color: #261b10; }
.msg-offer__milestone-amt { font-weight: 600; color: #261b10; }

.msg-offer--accepted  { border-color: rgba(31, 122, 58, 0.4); background: linear-gradient(135deg, #ecf7ef, #fffaf0); }
.msg-offer--declined  { border-color: rgba(160, 24, 24, 0.32); background: linear-gradient(135deg, #fbeeee, #fffaf0); }
.msg-offer--expired   { opacity: 0.78; }
.msg-offer--withdrawn { opacity: 0.78; }
.msg-offer--preview { max-width: none; }

/* ───────── MESSENGER V2 ───────── */
/* Hover action bar on each message */
.msg-row { position: relative; }
.msg-actions {
    position: absolute; top: -6px; right: 8px;
    display: none; gap: 2px;
    background: #fff;
    border: 1px solid rgba(38,27,16,.10);
    border-radius: 999px;
    padding: 3px;
    box-shadow: 0 4px 14px rgba(38,27,16,.12);
    z-index: 5;
}
.msg-row:hover .msg-actions { display: inline-flex; }
.msg-row--mine .msg-actions { right: auto; left: 8px; }
.msg-actions__btn {
    width: 26px; height: 26px; border: 0; background: transparent;
    border-radius: 50%; cursor: pointer; color: rgba(38,27,16,.6);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; transition: background .12s, color .12s;
}
.msg-actions__btn:hover { background: rgba(255,153,0,.10); color: #b95400; }
.msg-actions__btn.is-active { color: #ff9900; }

/* Reaction picker (positioned popover) */
.msg-rx-picker {
    position: fixed; z-index: 9999;
    background: #fff; border: 1px solid rgba(38,27,16,.10);
    border-radius: 999px; padding: 5px 6px;
    box-shadow: 0 8px 28px rgba(38,27,16,.18);
    display: flex; gap: 2px;
    animation: rx-in .12s ease;
}
@keyframes rx-in { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.msg-rx-picker button {
    border: 0; background: transparent; cursor: pointer;
    width: 32px; height: 32px; border-radius: 50%;
    font-size: 18px; transition: transform .12s, background .12s;
}
.msg-rx-picker button:hover { background: rgba(255,153,0,.10); transform: scale(1.25); }

/* Reactions strip under bubble */
.msg-rx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.msg-rx__chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    background: rgba(38,27,16,.06); border: 1px solid transparent;
    font-size: 12px; cursor: pointer; line-height: 1.2;
    transition: background .12s, border-color .12s;
}
.msg-rx__chip:hover { background: rgba(255,153,0,.10); }
.msg-rx__chip.is-mine { background: rgba(255,153,0,.16); border-color: rgba(255,153,0,.45); }
.msg-rx__chip span { font-size: 14px; }
.msg-rx__chip em { font-style: normal; font-weight: 600; color: rgba(38,27,16,.7); font-size: 11px; }

/* Reply quote in bubble */
.msg-quote {
    background: rgba(38,27,16,.05);
    border-left: 3px solid #ff9900;
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 6px;
    font-size: 12.5px;
}
.msg-quote__who { font-weight: 600; color: #b95400; font-size: 11.5px; }
.msg-quote__body { color: rgba(38,27,16,.7); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Composer reply chip */
.composer-reply-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    margin: 6px 4px 0;
    background: rgba(255,153,0,.08);
    border: 1px solid rgba(255,153,0,.28);
    border-radius: 10px;
}
.composer-reply-chip > i { color: #ff9900; }
.composer-reply-chip__body { flex: 1; min-width: 0; font-size: 12.5px; }
.composer-reply-chip__who { color: rgba(38,27,16,.7); }
.composer-reply-chip__body-text { color: #261b10; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer-reply-chip__close {
    background: transparent; border: 0; font-size: 18px; color: rgba(38,27,16,.5);
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
}
.composer-reply-chip__close:hover { background: rgba(185,28,28,.10); color: #b91c1c; }

/* Smart reply chips */
.composer-smart-replies {
    display: flex; gap: 6px; padding: 6px 4px 0; flex-wrap: wrap;
}
.composer-smart-chip {
    padding: 5px 12px; border-radius: 999px;
    background: #fff; border: 1px solid rgba(38,27,16,.14);
    font-size: 13px; color: #261b10; cursor: pointer;
    transition: background .12s, border-color .12s;
}
.composer-smart-chip:hover { background: rgba(255,153,0,.10); border-color: rgba(255,153,0,.45); }

/* Voice notes */
.composer-recording {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    margin: 6px 4px 0;
    background: rgba(185,28,28,.06);
    border: 1px solid rgba(185,28,28,.32);
    border-radius: 10px;
}
.composer-recording__dot {
    width: 10px; height: 10px; border-radius: 50%; background: #b91c1c;
    animation: rec-pulse 1s ease-in-out infinite;
}
@keyframes rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.msg-voice audio { display: block; width: 100%; max-width: 320px; }

/* Presence dot */
.avatar-with-dot { position: relative; }
.presence-dot {
    position: absolute; bottom: -1px; right: -1px;
    width: 11px; height: 11px; border-radius: 50%;
    background: rgba(38,27,16,.3);
    box-shadow: 0 0 0 2px #fff;
}
.presence-dot[data-state="online"] { background: #1f7a3a; }
.presence-dot[data-state="away"]   { background: #b95400; }

/* Typing bubble */
.msg-row--typing .msg-bubble--typing {
    display: inline-flex; gap: 4px; padding: 8px 14px;
    background: rgba(38,27,16,.06); border-radius: 18px;
}
.msg-bubble--typing span {
    width: 6px; height: 6px; border-radius: 50%; background: rgba(38,27,16,.4);
    animation: typ 1.2s ease-in-out infinite;
}
.msg-bubble--typing span:nth-child(2) { animation-delay: .15s; }
.msg-bubble--typing span:nth-child(3) { animation-delay: .30s; }
@keyframes typ { 0%,80%,100% { transform: scale(.7); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* Contract card */
.msg-contract {
    background: linear-gradient(135deg, #f0fdf4, #fffaf0);
    border: 1px solid rgba(31, 122, 58, .3);
    border-radius: 14px;
    padding: 16px 18px;
    max-width: 360px;
}
.msg-contract__head { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #1f7a3a; margin-bottom: 8px; }
.msg-contract__title { font-weight: 600; font-size: 15px; color: #261b10; margin-bottom: 6px; }
.msg-contract__price { font-family: 'Bricolage Grotesque', system-ui; font-size: 22px; font-weight: 700; color: #261b10; letter-spacing: -.02em; }
.msg-contract__price span { font-size: 12px; font-weight: 500; color: rgba(38,27,16,.5); margin-left: 6px; letter-spacing: 0; }
.msg-contract__actions { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(38,27,16,.06); }

/* Details: files / links / quiet */
.details-file, .details-link {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 8px;
    color: #261b10; font-size: 13px; text-decoration: none;
    transition: background .12s;
}
.details-file:hover, .details-link:hover { background: rgba(255,153,0,.08); }
.details-file i, .details-link i { color: #ff9900; font-size: 15px; }
.details-file span, .details-link span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.details-file em, .details-link em {
    font-style: normal; font-size: 11.5px; color: rgba(38,27,16,.5);
}
.details-quiet__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 6px 0;
}
.details-quiet__row .btn { padding: 2px 10px; font-size: 12px; }
.details-quiet__label { font-size: 12px; font-weight: 600; color: rgba(38,27,16,.7); }

/* ───────── MESSENGER V2 - delete + action button positioning fix ─────────
   Original position was right:8px which put the trash icon directly under
   the scrollbar, making it unclickable. Tuck buttons inside the bubble flow
   and give the scroll container right padding to clear the scrollbar. */
.inbox-thread__messages { padding-right: 12px; }
@supports (scrollbar-gutter: stable) {
    .inbox-thread__messages { scrollbar-gutter: stable; padding-right: 4px; }
}
.msg-del-btn {
    position: static !important;            /* take it out of the absolute corner */
    display: none;                          /* show on row hover */
    align-self: flex-end;
    margin-top: 4px;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(38, 27, 16, 0.10);
    background: #fff;
    color: rgba(38, 27, 16, 0.55);
    font-size: 13px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.msg-row:hover .msg-del-btn { display: inline-flex; align-items: center; justify-content: center; }
.msg-del-btn:hover { background: rgba(185, 28, 28, 0.10); color: #b91c1c; border-color: rgba(185, 28, 28, 0.32); }

/* Hover action bar - position relative to the message STACK (the bubble
   column), not the row. That way the menu sits on top of the bubble for
   both incoming AND outgoing messages, regardless of bubble width. */
.msg-stack { position: relative; }
.msg-actions {
    position: absolute;
    top: -28px;
    z-index: 6;
}
/* Incoming (their) messages: stack is on the LEFT (after the avatar)   */
.msg-row:not(.msg-row--mine) .msg-actions {
    left: 0;
    right: auto;
}
/* Outgoing (mine) messages: stack is on the RIGHT, anchor to right     */
.msg-row--mine .msg-actions {
    right: 0;
    left: auto;
}
@media (max-width: 720px) {
    .msg-actions { position: static; display: inline-flex; margin-top: 6px; }
    .msg-row:hover .msg-actions { display: inline-flex; }
}

/* ───────── VOICE NOTE PREVIEW (between Stop and Send) ───────── */
.composer-recording--preview {
    background: rgba(255, 153, 0, 0.06);
    border-color: rgba(255, 153, 0, 0.32);
    gap: 12px;
}
.composer-recording--preview > i { color: #ff9900; font-size: 18px; }
.composer-recording--preview audio {
    flex: 1; min-width: 0; height: 36px;
    border-radius: 18px;
}
.composer-recording--preview audio::-webkit-media-controls-panel {
    background-color: rgba(255, 255, 255, 0.85);
}
.composer-recording--preview .text-muted { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ───────── VOICE MESSAGE - WhatsApp style player ───────── */
.vmsg {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 8px 14px;
    background: rgba(38, 27, 16, 0.05);
    border-radius: 24px;
    min-width: 230px; max-width: 360px;
    user-select: none;
}
.msg-row--mine .vmsg { background: rgba(255, 153, 0, 0.14); }
.vmsg__play {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%; border: 0;
    background: #ff9900; color: #1a1209;
    font-size: 16px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(255, 153, 0, 0.35);
    transition: transform .12s ease;
}
.vmsg__play:hover { transform: scale(1.06); }
.vmsg__play i { line-height: 1; }
.vmsg__wave {
    flex: 1;
    display: flex; align-items: center; gap: 2px;
    height: 28px;
    cursor: pointer;
    min-width: 80px;
}
.vmsg__wave span {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: rgba(38, 27, 16, 0.32);
    transition: background .12s ease;
}
.vmsg__wave span.is-played { background: #ff9900; }
.vmsg.is-playing .vmsg__wave span { animation: none; }
.vmsg__time {
    font-variant-numeric: tabular-nums;
    font-size: 12px; font-weight: 500;
    color: rgba(38, 27, 16, 0.7);
    min-width: 32px; text-align: right;
}

/* Hide the body text for voice messages (the player is enough) */
.msg-row .msg-voice + .msg-bubble { display: none; }

/* ───────── VOICE RECORDER UI - modern, animated ───────── */
.voice-rec {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    margin: 8px 4px 0;
    background: linear-gradient(90deg, rgba(255, 153, 0, 0.08), rgba(255, 153, 0, 0.04));
    border: 1px solid rgba(255, 153, 0, 0.32);
    border-radius: 28px;
    animation: voice-rec-in .18s ease;
}
@keyframes voice-rec-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.voice-rec__cancel,
.voice-rec__send,
.voice-rec__stop {
    width: 36px; height: 36px; border-radius: 50%; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; cursor: pointer;
    flex-shrink: 0;
    transition: transform .12s, background .12s, color .12s;
}
.voice-rec__cancel { background: rgba(38, 27, 16, 0.06); color: rgba(38, 27, 16, 0.65); }
.voice-rec__cancel:hover { background: rgba(185, 28, 28, 0.12); color: #b91c1c; }
.voice-rec__stop { background: #261b10; color: #ff9900; }
.voice-rec__stop:hover { transform: scale(1.06); }
.voice-rec__send { background: #ff9900; color: #1a1209; box-shadow: 0 2px 8px rgba(255, 153, 0, 0.35); }
.voice-rec__send:hover { transform: scale(1.06); }
.voice-rec__dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: #b91c1c;
    box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.6);
    animation: rec-pulse-ring 1.2s ease-out infinite;
    flex-shrink: 0;
}
@keyframes rec-pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(185, 28, 28, 0); }
    100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0); }
}
.voice-rec__bars {
    flex: 1;
    display: flex; align-items: center; justify-content: space-between;
    height: 28px; gap: 2px;
    min-width: 100px;
}
.voice-rec__bars span {
    display: block;
    width: 3px;
    height: 6px;
    border-radius: 2px;
    background: #ff9900;
    transition: height .08s linear;
}
.voice-rec__time {
    font-variant-numeric: tabular-nums;
    font-size: 13px; font-weight: 600; color: #261b10;
    min-width: 42px; text-align: center;
}
.voice-rec--preview { padding: 8px 12px; gap: 10px; background: linear-gradient(90deg, rgba(38, 27, 16, 0.04), rgba(255, 153, 0, 0.06)); }
.voice-rec--preview .vmsg { flex: 1; min-width: 0; background: rgba(255, 153, 0, 0.10); }

/* ───────── INLINE VOICE RECORDER (takes over the composer) ───────── */
.composer-voice {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(90deg, rgba(38, 27, 16, 0.03), rgba(255, 153, 0, 0.06));
    border-radius: 12px;
    animation: voice-rec-in .15s ease;
}
.composer-voice__cancel,
.composer-voice__stop,
.composer-voice__send {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, color .12s ease;
}
.composer-voice__cancel {
    background: rgba(38, 27, 16, 0.06);
    color: rgba(38, 27, 16, 0.6);
}
.composer-voice__cancel:hover { background: rgba(185, 28, 28, 0.10); color: #b91c1c; transform: scale(1.05); }

.composer-voice__stop {
    background: #261b10;
    color: #ff9900;
}
.composer-voice__stop:hover { transform: scale(1.06); }

.composer-voice__send {
    background: #ff9900;
    color: #1a1209;
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.35);
}
.composer-voice__send:hover { transform: scale(1.06); }

/* Center area - live state */
.composer-voice__center {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 12px;
    padding: 0 8px;
}
.composer-voice__dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: #b91c1c;
    box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.6);
    animation: rec-pulse-ring 1.2s ease-out infinite;
    flex-shrink: 0;
}
.composer-voice__bars {
    flex: 1;
    display: flex; align-items: center; justify-content: space-between;
    height: 36px; gap: 2px;
    min-width: 80px;
}
.composer-voice__bars span {
    display: block;
    width: 3px;
    height: 6px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ffb84d, #ff9900);
    transition: height .08s linear;
}
.composer-voice__time {
    font-variant-numeric: tabular-nums;
    font-size: 14px; font-weight: 600;
    color: #261b10;
    min-width: 44px; text-align: right;
    flex-shrink: 0;
}

/* Preview state */
.composer-voice__preview {
    flex: 1; min-width: 0;
    display: flex; align-items: center;
}
.composer-voice__preview .vmsg {
    flex: 1;
    background: rgba(255, 153, 0, 0.12);
}

/* ───────── INLINE VOICE RECORDER v2 - premium mirrored waveform ───────── */
.composer-voice.is-recording {
    background: linear-gradient(90deg, rgba(38, 27, 16, 0.04) 0%, rgba(255, 153, 0, 0.10) 50%, rgba(38, 27, 16, 0.04) 100%);
    box-shadow: 0 0 0 1px rgba(255, 153, 0, 0.18), 0 2px 12px rgba(255, 153, 0, 0.10);
}

/* REC pill - red dot + label + timer, all in one rounded badge */
.composer-voice__rec-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 8px;
    background: #1a1209;
    color: #fff;
    border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.composer-voice__rec-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    animation: rec-pulse-ring 1.2s ease-out infinite;
}
.composer-voice__rec-label { color: #ef4444; }
.composer-voice__rec-pill .composer-voice__time {
    color: #ff9900;
    font-size: 13px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: auto;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding-left: 8px;
    margin-left: 2px;
}

/* Mirrored waveform - top row, gap line, bottom row */
.composer-voice__wave {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: stretch;
    gap: 2px;
    height: 48px;
    padding: 0 4px;
    position: relative;
}
.composer-voice__wave::after {
    /* Subtle center line so the mirror reads clearly */
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: 1px; background: rgba(255, 153, 0, 0.18);
    transform: translateY(-0.5px);
    pointer-events: none;
}
.composer-voice__bars {
    flex: 1;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 3px;
    min-width: 80px;
}
.composer-voice__bars--top { align-items: flex-end; }
.composer-voice__bars--bot { align-items: flex-start; }
.composer-voice__bars span {
    display: block;
    width: 3px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ffb84d 0%, #ff9900 100%);
    transition: height .07s linear;
    flex: 1;
}
.composer-voice__bars--bot span {
    background: linear-gradient(0deg, #ffb84d 0%, #ff9900 100%);
}

/* Speak-now hint - subtle, fades on hover */
.composer-voice__hint {
    font-size: 12px;
    color: rgba(38, 27, 16, 0.55);
    font-style: italic;
    flex-shrink: 0;
    padding-right: 4px;
    user-select: none;
}
@media (max-width: 640px) {
    .composer-voice__hint { display: none; }
}

/* Stop button - bigger, with depth + glow */
.composer-voice.is-recording .composer-voice__stop {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, #261b10, #1a1209);
    color: #ff9900;
    font-size: 18px;
    box-shadow:
        0 4px 14px rgba(38, 27, 16, 0.35),
        inset 0 0 0 2px rgba(255, 153, 0, 0.35);
    animation: stop-glow 2.4s ease-in-out infinite;
}
.composer-voice.is-recording .composer-voice__stop:hover {
    transform: scale(1.08);
    box-shadow:
        0 6px 18px rgba(38, 27, 16, 0.45),
        inset 0 0 0 2px rgba(255, 153, 0, 0.65);
}
@keyframes stop-glow {
    0%, 100% { box-shadow: 0 4px 14px rgba(38, 27, 16, 0.35), inset 0 0 0 2px rgba(255, 153, 0, 0.32); }
    50%      { box-shadow: 0 4px 18px rgba(255, 153, 0, 0.30), inset 0 0 0 2px rgba(255, 153, 0, 0.55); }
}

/* Cancel button in recording state - slightly larger trash with hover bloom */
.composer-voice.is-recording .composer-voice__cancel {
    width: 40px; height: 40px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    color: rgba(38, 27, 16, 0.55);
}
.composer-voice.is-recording .composer-voice__cancel:hover {
    background: rgba(239, 68, 68, 0.10);
    color: #b91c1c;
    transform: scale(1.08);
}

/* Slight breathing animation on the whole row so it feels alive */
.composer-voice.is-recording { animation: voice-breathe 3s ease-in-out infinite; }
@keyframes voice-breathe {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ───────── COMPOSER VOICE - sending spinner state ───────── */
.composer-voice__send.is-sending {
    pointer-events: none;
    background: linear-gradient(135deg, #ffb84d, #ff9900);
    color: transparent;          /* hide the send icon entirely */
    position: relative;
}
.composer-voice__send.is-sending::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2.5px solid rgba(26, 18, 9, 0.25);
    border-top-color: #1a1209;
    animation: send-spinner .7s linear infinite;
}
@keyframes send-spinner { to { transform: rotate(360deg); } }

/* Same spinner state for the generic composer-send button (text mode) */
.composer-send.is-sending { color: transparent; pointer-events: none; position: relative; }
.composer-send.is-sending::after {
    content: ''; position: absolute; inset: 0; margin: auto;
    width: 16px; height: 16px; border-radius: 50%;
    border: 2.5px solid rgba(26, 18, 9, 0.25);
    border-top-color: #1a1209;
    animation: send-spinner .7s linear infinite;
}

/* ───────── Voice / message - sending + failed states ───────── */
.msg-row--sending .vmsg,
.msg-row--sending .msg-bubble {
    opacity: 0.72;
    position: relative;
}
.msg-row--sending .vmsg::after {
    content: '';
    position: absolute;
    right: -22px; top: 50%;
    width: 12px; height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 153, 0, 0.25);
    border-top-color: #ff9900;
    animation: send-spinner .7s linear infinite;
}
.msg-row--failed .vmsg,
.msg-row--failed .msg-bubble {
    border: 1px solid rgba(185, 28, 28, 0.3);
    background: rgba(185, 28, 28, 0.04);
}
.msg-fail-note {
    margin-top: 4px;
    font-size: 11.5px; color: #b91c1c;
    display: inline-flex; align-items: center; gap: 4px;
}
.msg-fail-note i { font-size: 12px; }

/* ============================================================
   Read receipts - WhatsApp-style time + ticks INSIDE the bubble
   single grey ✓ = delivered, double orange ✓✓ = read by partner
   ============================================================ */
.msg-bubble {
    position: relative;
    /* enough right padding to fit the meta strip without overlap */
    padding-right: 4.6rem !important;
    padding-bottom: 1.35rem !important;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.msg-bubble__text {
    white-space: pre-wrap;
    word-break: break-word;
}
.msg-bubble__meta {
    position: absolute;
    right: .7rem;
    bottom: .35rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
    color: var(--wo-text-muted);
    pointer-events: none;
    user-select: none;
}
.msg-row--mine .msg-bubble__meta {
    color: rgba(255,255,255,.62);
}
.msg-bubble__time { opacity: .9; }

/* Tick mark - single grey ✓ until read, double orange ✓✓ when seen */
.msg-tick {
    font-size: .82rem;
    line-height: 1;
    font-weight: 700;
    color: inherit;
    opacity: .85;
    letter-spacing: -.07em;
    transition: color .3s ease;
    margin-left: 1px;
}
.msg-row--mine .msg-tick--read,
.msg-tick--read {
    color: #ff9900 !important;   /* orange, regardless of bubble bg */
    opacity: 1;
    text-shadow: 0 0 1px rgba(255,153,0,.3);
}

/* Sending state - small clock instead of ✓ */
.msg-tick--sending {
    font-size: .72rem;
    opacity: .65;
    animation: tick-sending-spin 1.4s linear infinite;
    display: inline-block;
}
@keyframes tick-sending-spin {
    0%, 100% { opacity: .65; }
    50%      { opacity: 1; }
}
.msg-row--sending .msg-bubble { opacity: .82; }
/* Outside-the-bubble meta for media/voice/offer cards (mine only) */
.msg-meta--mine {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}
.msg-meta--mine .msg-bubble__time { color: var(--wo-text-muted); }
.msg-meta--mine .msg-tick { color: var(--wo-text-muted); }
.msg-meta--mine .msg-tick--read { color: #ff9900; }

/* ============================================================
   3-dot "More" menu in the action bar - WhatsApp/iMessage style
   ============================================================ */
.msg-actions__more { position: relative; display: inline-block; }
.msg-actions__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid rgba(38,27,16,.08);
    border-radius: 12px;
    box-shadow: 0 20px 50px -10px rgba(38,27,16,.28),
                0 4px 12px rgba(38,27,16,.08);
    padding: 6px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 1px;
    animation: msg-menu-in .14s cubic-bezier(.2,.9,.3,1.2);
    transform-origin: top right;
}
@keyframes msg-menu-in {
    from { opacity: 0; transform: scale(.92) translateY(-4px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.msg-row--mine .msg-actions__menu { right: 0; left: auto; transform-origin: top right; }
.msg-actions__menu[hidden] { display: none; }
.msg-actions__menu-item {
    appearance: none; border: 0;
    background: transparent;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 500;
    color: var(--wo-ink);
    display: flex;
    align-items: center;
    gap: .7rem;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s ease, color .12s ease, transform .08s ease;
    width: 100%;
    line-height: 1.2;
}
.msg-actions__menu-item i {
    font-size: 1.05rem;
    color: var(--wo-ink-2);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.msg-actions__menu-item:hover {
    background: rgba(255,153,0,.10);
    color: var(--wo-ink);
}
.msg-actions__menu-item:hover i { color: #b95400; }
.msg-actions__menu-item:active { transform: scale(.98); }
.msg-actions__menu-item--danger { color: #b91c1c; }
.msg-actions__menu-item--danger i { color: #b91c1c; }
.msg-actions__menu-item--danger:hover {
    background: rgba(185,28,28,.10);
    color: #b91c1c;
}
.msg-actions__menu-item--danger:hover i { color: #b91c1c; }

/* Toast/copy-confirm tag that appears briefly */
.msg-copy-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--wo-ink);
    color: var(--wo-paper);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(38,27,16,.25);
    z-index: 1000;
    animation: toast-pop 1.6s ease forwards;
    pointer-events: none;
}
@keyframes toast-pop {
    0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
    15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    80%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* ============================================================
   "N new messages" floating pill - clicks to scroll to bottom
   ============================================================ */
.new-msg-pill {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--wo-ink);
    color: var(--wo-primary);
    border: 0;
    padding: 8px 14px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 12px 28px -4px rgba(38,27,16,.35);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.new-msg-pill.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.new-msg-pill:hover {
    background: var(--wo-primary);
    color: var(--wo-ink);
}
.new-msg-pill i { font-size: 1rem; }

/* Hide the old floating trash entirely now that the menu owns delete */
.msg-del-btn { display: none !important; }

/* ============================================================
   Reply quote - SOLID background so it's readable on the page
   ============================================================ */
button.msg-quote {
    appearance: none;
    background: #fff8e8;            /* warm cream pill, contrasts the page */
    border: 1px solid rgba(255,153,0,.30);
    border-left: 3px solid #ff9900;
    padding: 8px 12px;
    margin-bottom: 5px;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    font-family: inherit;
    color: var(--wo-ink);
    width: auto;
    max-width: 100%;
    display: block;
    transition: background .12s ease, transform .08s ease;
}
button.msg-quote:hover {
    background: #ffeed0;
    border-color: rgba(255,153,0,.50);
}
button.msg-quote:active { transform: translateY(1px); }
.msg-quote__who {
    font-size: .76rem;
    font-weight: 700;
    color: #8a3a00;
    letter-spacing: .01em;
    margin-bottom: 3px;
}
.msg-quote__body {
    font-size: .85rem;
    color: var(--wo-ink);
    line-height: 1.35;
    opacity: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* Mine reply quote - same warm cream/orange pill as incoming, just right-aligned */
.msg-row--mine button.msg-quote {
    background: #fff8e8;
    border: 1px solid rgba(255,153,0,.30);
    border-left: 3px solid #ff9900;
    color: var(--wo-ink);
    margin-left: auto;
}
.msg-row--mine button.msg-quote:hover {
    background: #ffeed0;
    border-color: rgba(255,153,0,.50);
}
.msg-row--mine .msg-quote__who  { color: #8a3a00; font-weight: 700; }
.msg-row--mine .msg-quote__body { color: var(--wo-ink); opacity: 1; }

/* ============================================================
   Flash highlight - clean glowing outline around the message
   Preserves the bubble's own colors so text stays readable
   ============================================================ */
@keyframes msg-flash-pulse {
    0%   { box-shadow: 0 0 0 3px #ff9900, 0 0 0 6px rgba(255,153,0,.35); }
    60%  { box-shadow: 0 0 0 2px rgba(255,153,0,.45), 0 0 24px rgba(255,153,0,.18); }
    100% { box-shadow: 0 0 0 0 rgba(255,153,0,0); }
}
.msg-flash {
    animation: msg-flash-pulse 1.8s cubic-bezier(.22,.61,.36,1);
    border-radius: 6px;
    position: relative;
    z-index: 5;
}

/* ───────── INBOX-FIX-08 (2026-05-27) - Image lightbox ───────── */
.lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(10, 8, 6, 0.92);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; transition: opacity .18s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.lightbox.is-open { opacity: 1; }
body.lightbox-open { overflow: hidden; }

.lightbox__stage {
    position: relative;
    max-width: min(94vw, 1400px);
    max-height: 82vh;
    display: flex; align-items: center; justify-content: center;
    transform: scale(.96); transition: transform .2s ease;
}
.lightbox.is-open .lightbox__stage { transform: scale(1); }
.lightbox__stage img {
    max-width: 100%; max-height: 82vh;
    width: auto; height: auto;
    border-radius: 6px;
    box-shadow: 0 24px 80px rgba(0,0,0,.5);
    background: #1a1310;
    user-select: none;
}

.lightbox__close {
    position: absolute; top: 18px; right: 18px;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff;
    border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    transition: background .15s ease, transform .15s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.lightbox__close:hover { background: rgba(255,255,255,.22); transform: scale(1.05); }

.lightbox__bar {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    display: inline-flex; gap: .5rem;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
}
.lightbox__btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .45rem .85rem;
    background: transparent; color: #fff;
    border: 0; border-radius: 999px;
    font-size: .85rem; font-family: var(--font-body, inherit);
    text-decoration: none; cursor: pointer;
    transition: background .14s ease;
}
.lightbox__btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.lightbox__btn i { font-size: 1rem; }
.lightbox__btn--danger { color: #fda4af; }
.lightbox__btn--danger:hover { background: rgba(220, 38, 38, .26); color: #fff; }

@media (max-width: 600px) {
    .lightbox__btn span { display: none; }
    .lightbox__btn { padding: .55rem .65rem; }
    .lightbox__close { top: 12px; right: 12px; width: 38px; height: 38px; }
}

/* INBOX-FIX-07 relaxed - image-fallback chip is icon-only (no filename) */
.composer-attach-preview--image-fallback {
    padding: 8px 12px;
    background: rgba(255, 153, 0, 0.06);
    border: 1px solid rgba(255, 153, 0, 0.22);
}

/* ───────── INBOX-FIX-12 (2026-05-27) - multi-attachment composer + bubble ───────── */
/* container for multiple pending-chip previews in the composer */
.composer-attach-previews {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0 4px 8px;
    padding: 0;
}
.composer-attach-previews .composer-attach-preview { margin: 0; flex: 0 1 auto; }
.composer-attach-previews .composer-attach-preview--image { padding: 0; }

/* stack inside a message bubble - multiple files in one message */
.msg-attach-stack { display: flex; flex-direction: column; gap: 6px; }
.msg-attach-stack .msg-media { margin: 0; }

/* grid for 2+ images in the same bubble */
.msg-gallery {
    display: grid; gap: 4px;
    border-radius: 12px; overflow: hidden;
    max-width: 360px;
}
.msg-gallery .msg-media--image,
.msg-gallery .msg-media--bare {
    margin: 0; border-radius: 0; box-shadow: none;
}
.msg-gallery .msg-media--bare img {
    width: 100%; height: 100%; max-width: none; max-height: none;
    object-fit: cover; border-radius: 0;
    box-shadow: none;
    transition: none;
    display: block;
}
.msg-gallery .msg-media--bare:hover img { transform: none; }
.msg-gallery--n1 { grid-template-columns: 1fr; }
.msg-gallery--n1 .msg-media--bare img { aspect-ratio: auto; max-height: 360px; object-fit: contain; background: #1a1310; }
.msg-gallery--n2 { grid-template-columns: 1fr 1fr; }
.msg-gallery--n2 .msg-media--bare img { aspect-ratio: 1 / 1; }
.msg-gallery--n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.msg-gallery--n3 .msg-media--bare:first-child { grid-column: span 2; }
.msg-gallery--n3 .msg-media--bare img { aspect-ratio: 1 / 1; }
.msg-gallery--n3 .msg-media--bare:first-child img { aspect-ratio: 2 / 1; }
.msg-gallery--n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.msg-gallery--n4 .msg-media--bare img { aspect-ratio: 1 / 1; }

/* If the user attaches more than 4 images, the 4th tile shows a +N overlay */
.msg-gallery--n4 .msg-media--bare:nth-child(n+5) { display: none; }
.msg-gallery--n4 .msg-media--bare:nth-child(4) { position: relative; }
.msg-gallery--n4 .msg-media--bare:nth-child(4)::after {
    content: attr(data-more);
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.55); color: #fff;
    font-weight: 600; font-size: 1.5rem;
    pointer-events: none;
}

/* ───────── INBOX-FIX-13 (2026-05-27) - orange-tint upload overlay per chip ─────────
   The user picks files → chips render INSTANTLY from local blob URLs. A
   semi-opaque orange overlay sits on top of each chip and DRAINS from full
   (100%-tinted) to empty (0%-tinted) as the XHR progresses. Driven by the
   --upload-progress custom prop set inline by JS. */

/* Image chip - overlay covers the wrap, drains via height anim */
.composer-attach-preview .composer-attach-preview__progress-overlay {
    position: absolute;
    inset: auto 0 0 0;
    height: calc(100% - var(--upload-progress, 0%));
    background: rgba(255, 153, 0, 0.55);
    border-radius: inherit;
    pointer-events: none;
    transition: height .25s ease;
    z-index: 2;
    /* subtle shimmer to communicate "active" */
    background-image: linear-gradient(180deg, rgba(255, 200, 100, .25) 0%, rgba(255, 153, 0, .65) 100%);
}
/* Hide overlay entirely once done */
.composer-attach-preview:not(.is-uploading) .composer-attach-preview__progress-overlay {
    opacity: 0;
    transition: opacity .25s ease, height .25s ease;
}

/* Image-wrap needs relative for the overlay to anchor */
.composer-attach-preview--image .composer-attach-preview__image-wrap {
    position: relative;
}

/* Center percentage badge - visible while uploading */
.composer-attach-preview__progress-badge {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 3;
    pointer-events: none;
    color: #fff;
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    font-size: .95rem;
    text-shadow: 0 1px 4px rgba(0,0,0,.35);
    opacity: 0; transition: opacity .15s ease;
}
.composer-attach-preview.is-uploading .composer-attach-preview__progress-badge { opacity: 1; }

/* Non-image chips - overlay sits over the icon square only (so the filename text
   stays readable). Use icon-wrap as the anchor. */
.composer-attach-preview__icon-wrap {
    position: relative;
    flex-shrink: 0;
}
.composer-attach-preview__icon-wrap .composer-attach-preview__progress-overlay {
    border-radius: 8px;
}
.composer-attach-preview__icon-wrap .composer-attach-preview__icon {
    position: relative;
    z-index: 1;
}

/* Error state - replace orange with red tint */
.composer-attach-preview.is-error .composer-attach-preview__progress-overlay {
    background: rgba(220, 38, 38, 0.55);
    background-image: none;
    height: 100%;
    opacity: 1;
}
.composer-attach-preview.is-error .composer-attach-preview__meta { color: #b91c1c; }

/* While uploading, the remove × is still clickable (lets the user cancel) */
.composer-attach-preview.is-uploading .composer-attach-preview__remove {
    z-index: 4;
}

/* Send button while waiting on uploads - subtle disabled-ish look (no shake) */
.composer-send.composer-send--waiting {
    opacity: .55; cursor: progress;
}
.composer-send.composer-send--waiting i { animation: wo-upload-pulse 1.2s ease-in-out infinite; }

/* INBOX-FIX-15 - placeholder visible only while <img> has no src yet */
.composer-attach-preview__image-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 153, 0, .55); font-size: 2rem;
    pointer-events: none;
    background: rgba(255, 153, 0, 0.05);
    border-radius: inherit;
    z-index: 0;
}
.composer-attach-preview__image-wrap > .composer-attach-preview__image[src]:not([src=""]) ~ .composer-attach-preview__image-placeholder {
    display: none;
}
.composer-attach-preview__image[src=""] {
    /* Empty src - keep the tag in DOM but hide visually until FileReader resolves */
    width: 220px; height: 140px; visibility: hidden;
}
/* Once filled in: smooth fade from placeholder to real image */
.composer-attach-preview__image {
    animation: wo-img-in .25s ease-out;
}
@keyframes wo-img-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }

/* ───────── INBOX-FIX-20 (2026-05-27) - WorkOfficially confirm modal ─────────
   Drop-in replacement for native browser confirm(). Matches the rest of the UI. */
.wo-confirm {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; transition: opacity .15s ease;
}
.wo-confirm.is-open { opacity: 1; }
body.wo-confirm-open { overflow: hidden; }
.wo-confirm__backdrop {
    position: absolute; inset: 0;
    background: rgba(10, 8, 6, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.wo-confirm__panel {
    position: relative;
    background: var(--wo-card, #fff);
    border: 1px solid var(--wo-line, rgba(0,0,0,.08));
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0,0,0,.28);
    width: 100%; max-width: 440px;
    padding: 22px 22px 18px;
    transform: scale(.96) translateY(6px); transition: transform .18s ease;
}
.wo-confirm.is-open .wo-confirm__panel { transform: scale(1) translateY(0); }
.wo-confirm__head {
    display: flex; gap: 14px; align-items: flex-start;
    margin-bottom: 18px;
}
.wo-confirm__icon {
    flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 153, 0, .12); color: #d97706;
    font-size: 1.25rem;
}
.wo-confirm--danger .wo-confirm__icon {
    background: rgba(220, 38, 38, .12); color: #dc2626;
}
.wo-confirm__title {
    font-family: var(--font-display, inherit);
    font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em;
    color: var(--wo-ink, #261b10);
    margin: 0 0 .25rem;
}
.wo-confirm__message {
    font-size: .9rem; color: var(--wo-text-muted, rgba(38,27,16,.65));
    margin: 0; line-height: 1.45;
}
.wo-confirm__foot {
    display: flex; gap: .5rem; justify-content: flex-end;
    margin-top: .5rem;
}
.wo-confirm__btn {
    padding: .55rem 1.1rem;
    font-family: var(--font-display, inherit);
    font-weight: 600; font-size: .9rem;
    border-radius: 8px; border: 1px solid transparent;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, transform .1s ease;
}
.wo-confirm__btn:active { transform: translateY(1px); }
.wo-confirm__btn--ghost {
    background: transparent; color: var(--wo-ink, #261b10);
    border-color: var(--wo-line, rgba(0,0,0,.12));
}
.wo-confirm__btn--ghost:hover { background: rgba(38,27,16,.05); }
.wo-confirm__btn--primary {
    background: var(--wo-ink, #261b10); color: var(--wo-primary, #ff9900);
    border-color: var(--wo-ink, #261b10);
}
.wo-confirm__btn--primary:hover { background: var(--wo-primary, #ff9900); color: var(--wo-ink, #261b10); }
.wo-confirm__btn--danger {
    background: #dc2626; color: #fff; border-color: #dc2626;
}
.wo-confirm__btn--danger:hover { background: #b91c1c; border-color: #b91c1c; }

@media (max-width: 500px) {
    .wo-confirm__panel { padding: 18px 16px 14px; }
    .wo-confirm__foot  { flex-direction: column-reverse; }
    .wo-confirm__btn   { width: 100%; padding: .7rem; }
}

/* INBOX-FIX-21 - caption text shown ABOVE an attachment (or gallery).
   Renders as a regular speech bubble but with a tighter bottom margin so it
   sits flush with the image/gallery beneath. */
.msg-bubble--caption {
    margin-bottom: 4px;
    max-width: 360px;
    /* let it line-break naturally */
}
.msg-row--mine .msg-bubble--caption { margin-left: auto; }

/* INBOX-FIX-22 - preserve newlines inside the woConfirm message text so the
   per-file rejection list reads nicely. */
.wo-confirm__message { white-space: pre-line; }

/* INBOX-FIX-23 - "Tap to retry" bar attached to a failed bubble */
.msg-retry-bar {
    margin-top: 4px;
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .3rem .55rem;
    font-size: .75rem; color: #b91c1c;
    background: rgba(220, 38, 38, .08);
    border: 1px solid rgba(220, 38, 38, .25);
    border-radius: 8px;
}
.msg-retry-bar i { font-size: .9rem; }
.msg-retry-btn {
    background: transparent; border: 0; color: #b91c1c;
    font-weight: 600; cursor: pointer; text-decoration: underline;
    padding: 0;
}
.msg-retry-btn:hover { color: #7f1d1d; }
/* Sending state - slightly dimmed (was already in CSS as msg-row--sending) but
   tweak to read more like WhatsApp's grey-clock. */
.msg-row--sending .msg-tick--sending { opacity: .55; }
.msg-row--failed  .msg-bubble        { opacity: .85; }

/* ───────── INBOX-FIX-25 (2026-05-27) - inbox list star button + empty state ───────── */
.inbox-item { position: relative; }
.inbox-item__fav {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 28px; height: 28px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: rgba(38, 27, 16, .35);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, background .12s ease, color .12s ease, transform .12s ease;
    z-index: 4;
}
.inbox-item:hover .inbox-item__fav,
.inbox-item[data-favorite="1"] .inbox-item__fav {
    opacity: 1;
}
.inbox-item__fav:hover { background: rgba(255, 153, 0, .12); color: #d97706; transform: scale(1.1); }
.inbox-item[data-favorite="1"] .inbox-item__fav { color: #ff9900; }
.inbox-item[data-favorite="1"] .inbox-item__fav i.bi-star-fill { color: #ff9900; }

/* Filter empty state */
.inbox-empty--filter {
    padding: 28px 18px;
    text-align: center;
    color: rgba(38, 27, 16, .65);
}
.inbox-empty--filter i {
    display: block;
    font-size: 1.8rem;
    margin-bottom: 8px;
    color: rgba(255, 153, 0, .55);
}
.inbox-empty--filter .btn-link {
    color: #d97706;
    font-weight: 600;
    text-decoration: underline;
    vertical-align: baseline;
}

/* ───────── MODE-FIX-01 (2026-05-27) - dual-mode switcher ───────── */

/* Header pill - always visible next to the WO wordmark */
.mode-pill {
    position: relative;
    margin-left: .9rem;
    display: inline-flex;
}
.mode-pill__btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .7rem .35rem .55rem;
    background: var(--wo-card, #fff);
    border: 1px solid var(--wo-line, rgba(0,0,0,.10));
    border-radius: 999px;
    font-family: var(--font-display, inherit);
    font-weight: 500; font-size: .82rem;
    color: var(--wo-ink, #261b10);
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease;
}
.mode-pill__btn:hover { background: rgba(255, 153, 0, .07); border-color: rgba(255, 153, 0, .35); }
.mode-pill__btn > i:first-child { font-size: 1rem; }
.mode-pill__chev { font-size: .7rem; opacity: .55; margin-left: .15rem; }
.mode-pill__label { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; gap: 1px; }
.mode-pill__as { font-size: .62rem; opacity: .55; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }
.mode-pill__label strong { font-weight: 600; }

.mode-pill--freelancer .mode-pill__btn > i:first-child { color: #d97706; }
.mode-pill--client     .mode-pill__btn > i:first-child { color: #2b579a; }

.mode-pill__menu {
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 240px;
    background: var(--wo-card, #fff);
    border: 1px solid var(--wo-line, rgba(0,0,0,.10));
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
    padding: .35rem;
    z-index: 200;
    animation: mode-pill-in .15s ease;
}
@keyframes mode-pill-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mode-pill__menu-head {
    padding: .4rem .6rem .15rem;
    font-size: .65rem; text-transform: uppercase; letter-spacing: .06em;
    color: rgba(38, 27, 16, .55); font-weight: 600;
}
.mode-pill__menu-item {
    display: flex; align-items: center; gap: .5rem;
    width: 100%;
    padding: .55rem .65rem;
    background: transparent; border: 0;
    border-radius: 8px;
    color: var(--wo-ink, #261b10);
    font-size: .85rem; text-align: left;
    cursor: pointer; text-decoration: none;
    transition: background .12s ease;
    font-family: inherit;
}
.mode-pill__menu-item:hover { background: rgba(255, 153, 0, .10); color: var(--wo-ink, #261b10); }
.mode-pill__menu-item i { font-size: 1rem; opacity: .8; }
.mode-pill__menu-item--activate { color: #d97706; font-weight: 600; }
.mode-pill__menu-item--activate i { color: #d97706; }
.mode-pill__form { margin: 0; }
.mode-pill__hint {
    margin-top: .25rem;
    padding: .55rem .65rem;
    font-size: .72rem;
    color: rgba(38, 27, 16, .55);
    border-top: 1px solid rgba(0,0,0,.06);
    line-height: 1.35;
}

/* Mode chip inside account dropdown */
.mode-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    background: rgba(255, 153, 0, .08);
    color: #b95400;
    margin-bottom: .35rem;
}
.mode-chip--client { background: rgba(43, 87, 154, .1); color: #2b579a; }
.mode-chip i { font-size: .85rem; }

/* Activation form - full-page onboarding for the second mode */
.mode-activate {
    min-height: 70vh;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 48px 16px;
}
.mode-activate__container {
    width: 100%; max-width: 640px;
    background: var(--wo-card, #fff);
    border: 1px solid var(--wo-line, rgba(0,0,0,.08));
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
    padding: 32px;
}
.mode-activate__header {
    display: flex; gap: 18px; align-items: flex-start;
    margin-bottom: 24px;
}
.mode-activate__icon {
    flex: 0 0 56px; width: 56px; height: 56px;
    border-radius: 14px;
    display: grid; place-items: center;
    background: rgba(255, 153, 0, .1); color: #d97706;
    font-size: 1.7rem;
}
.mode-activate__title {
    font-family: var(--font-display, inherit);
    font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em;
    color: var(--wo-ink, #261b10); margin: 0 0 .35rem;
}
.mode-activate__sub {
    margin: 0; font-size: .9rem; line-height: 1.45;
    color: rgba(38, 27, 16, .7);
}
.mode-activate__form {
    display: flex; flex-direction: column; gap: 18px;
}
.mode-activate__field { display: flex; flex-direction: column; gap: .35rem; }
.mode-activate__field label { font-weight: 600; font-size: .82rem; color: var(--wo-ink); }
.mode-activate__field .form-control,
.mode-activate__field .form-select {
    font-size: .92rem; padding: .55rem .7rem;
    border-radius: 8px;
}
.mode-activate__field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) {
    .mode-activate__container { padding: 22px; }
    .mode-activate__field-row { grid-template-columns: 1fr; }
}
.mode-activate__optional { font-weight: 400; color: rgba(38, 27, 16, .5); }
.mode-activate__hint {
    font-size: .75rem; color: rgba(38, 27, 16, .6);
    margin-top: -.15rem;
}
.mode-activate__hint--note {
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(43, 87, 154, .06);
    border: 1px solid rgba(43, 87, 154, .18);
    border-radius: 8px;
    color: #2b579a; font-size: .8rem;
    display: flex; align-items: flex-start; gap: .5rem;
}
.mode-activate__hint--note i { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.mode-activate__actions {
    display: flex; justify-content: flex-end; gap: .55rem;
    margin-top: 8px; padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,.06);
}
.mode-activate__foot {
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 153, 0, .06);
    color: var(--wo-ink, #261b10);
    font-size: .82rem; line-height: 1.45;
}

/* ───────── BRIDGE-FIX-02 (2026-05-27) - "NEW" badge on top-bar nav items ─────────
   NAV-FIX (2026-05-29): upgraded to a proper golden flare. Three layers:
   1) Metallic gradient base (light-gold → bright-gold → deep-gold) for a
      molten look, with a 1px white inset border at the top for a polished
      metallic edge and 1px dark shadow at the bottom.
   2) Pulsing outer halo (box-shadow ring expanding + fading on a 2.4s loop).
   3) Sweeping shimmer overlay (::after) that sweeps left-to-right every
      3.6s - gives the "freshly polished gold" flare. */
.app-bar__link--new {
    position: relative;
}
.app-bar__new-badge {
    position: relative;
    overflow: hidden;                 /* clips the shimmer sweep */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: .4rem;
    padding: 3px 8px;
    font-family: var(--font-display, inherit);
    font-size: .6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .08em;
    color: #2a1505;                   /* deep brown - more contrast on gold than #1a1209 */
    background:
        linear-gradient(180deg,
            #fff3c4 0%,               /* champagne highlight */
            #ffd97a 22%,
            #ffb238 55%,               /* core gold */
            #f49118 80%,
            #c8650a 100%);            /* deep amber base */
    border-radius: 999px;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255, 245, 200, .55);  /* soft top highlight on the text */
    pointer-events: none;
    vertical-align: middle;
    /* Metallic edge: bright inset on top, dark inset on bottom */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .65),
        inset 0 -1px 0 rgba(120, 60, 0, .45),
        0 2px 6px rgba(255, 153, 0, .45),
        0 0 0 0 rgba(255, 200, 80, .55);
    animation: wo-new-halo 2.4s ease-in-out infinite;
}
/* Sweeping shimmer overlay - bright white diagonal stripe that travels
   across the badge every 3.6s. */
.app-bar__new-badge::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -60%;
    width: 50%;
    background: linear-gradient(115deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, .75) 50%,
        rgba(255, 255, 255, 0) 70%,
        transparent 100%);
    transform: skewX(-22deg);
    animation: wo-new-shimmer 3.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes wo-new-halo {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .65),
            inset 0 -1px 0 rgba(120, 60, 0, .45),
            0 2px 6px rgba(255, 153, 0, .45),
            0 0 0 0 rgba(255, 200, 80, .55);
        transform: scale(1);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .85),
            inset 0 -1px 0 rgba(120, 60, 0, .55),
            0 3px 10px rgba(255, 153, 0, .65),
            0 0 0 5px rgba(255, 200, 80, 0);
        transform: scale(1.05);
    }
}
@keyframes wo-new-shimmer {
    0%        { left: -60%; }
    60%, 100% { left: 130%; }
}
/* When the user is ON the new-feature page, retire the flare so it doesn't
   keep nagging - replace with a static "you're here" highlight */
.app-bar__link--new.is-active .app-bar__new-badge {
    animation: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--wo-ink, #1a1209);
    text-shadow: none;
    box-shadow:
        inset 0 0 0 1px rgba(120, 60, 0, .2),
        0 1px 0 rgba(255, 153, 0, .15);
}
.app-bar__link--new.is-active .app-bar__new-badge::after { display: none; }

/* Respect reduced motion - kill halo + shimmer, keep the static gold pill */
@media (prefers-reduced-motion: reduce) {
    .app-bar__new-badge          { animation: none; }
    .app-bar__new-badge::after   { display: none; }
}

@media (max-width: 600px) {
    /* Narrow screens: hide badge text, keep a small gold dot via ::before */
    .app-bar__new-badge {
        font-size: 0;
        padding: 4px;
        margin-left: .25rem;
    }
    .app-bar__new-badge::before {
        content: '';
        display: block;
        width: 6px; height: 6px;
        background: #2a1505;
        border-radius: 50%;
    }
}

/* ───────── BRIDGE-FIX-03 (2026-05-27) - visible platform dropdown ───────── */
.bridge-select-wrap {
    position: relative;
}
.bridge-select-wrap .bridge-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: none;        /* kill Bootstrap's built-in chevron - we draw our own */
    padding: .65rem 2.4rem .65rem 2.2rem;
    border-radius: 8px;
    border: 1.5px solid var(--wo-line, rgba(0,0,0,.18));
    background-color: var(--wo-card, #fff);
    font-weight: 500;
    color: var(--wo-ink, #1a1209);
    cursor: pointer;
    width: 100%;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bridge-select-wrap .bridge-select:hover {
    border-color: rgba(255, 153, 0, .55);
}
.bridge-select-wrap .bridge-select:focus {
    outline: none;
    border-color: #ff9900;
    box-shadow: 0 0 0 3px rgba(255, 153, 0, .15);
}
.bridge-select-icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(38, 27, 16, .55);
    font-size: 1rem;
    pointer-events: none;
}
.bridge-select-chev {
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #ff9900;
    font-size: .9rem;
    font-weight: 700;
    pointer-events: none;
    transition: transform .15s ease;
}
.bridge-select-wrap:focus-within .bridge-select-chev {
    transform: translateY(-50%) rotate(180deg);
    color: #d97706;
}


/* ============================================================================
 * MOBILE-PASS-2026-05-30  ·  Safe primitives only
 * ----------------------------------------------------------------------------
 * The big sweep was rolled back because it broke layouts. What remains here
 * are only safe, isolated primitives. Anything more invasive will be done
 * per-page after walking through the inventory together.
 *
 *   1. iOS safe-area on the top app bar (notch / dynamic island)
 *   2. Inputs ≥16px on phones so iOS Safari doesn't auto-zoom on focus
 * ============================================================================ */

@supports (padding: env(safe-area-inset-top)) {
    .app-bar {
        padding-top: max(.75rem, env(safe-area-inset-top));
        padding-left: max(1.5rem, env(safe-area-inset-left));
        padding-right: max(1.5rem, env(safe-area-inset-right));
    }
}

@media (max-width: 640px) {
    .form-control, .form-select,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="tel"], input[type="url"], input[type="search"],
    input[type="number"], textarea, select {
        font-size: 16px;
    }
}
/* ── MOBILE-Z1 (2026-05-30): mobile app-bar layout per design feedback ────────
 * Phone (≤900): hamburger LEFT, "WorkOfficially" CENTERED, actions RIGHT
 * (Messages icon surfaced next to bell + shield + avatar). Drawer from LEFT.
 * Desktop is untouched - every rule below sits in @media.
 * --------------------------------------------------------------------------- */

/* Messages icon in the actions cluster: only visible on mobile. */
.app-bar__msg-mobile { display: none; }
@media (max-width: 900px) {
    .app-bar__msg-mobile {
        display: inline-flex;
        width: 40px; height: 40px;
        align-items: center; justify-content: center;
    }
}

/* Re-grid the bar on phones so the brand is centered. */
@media (max-width: 900px) {
    .app-bar {
        grid-template-columns: auto 1fr auto !important;
        gap: .5rem;
    }
    .app-bar__brand {
        justify-content: center;
        text-align: center;
        min-width: 0;
        overflow: hidden;
    }
    .app-bar__brand .wo-wordmark {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .app-bar__actions {
        justify-self: end;
        gap: .15rem;
    }
}

/* Drawer slides in from the LEFT on mobile (was right). */
@media (max-width: 900px) {
    .app-drawer__panel {
        right: auto !important;
        left: 0 !important;
        border-left: 0 !important;
        border-right: 1px solid var(--wo-line) !important;
        transform: translateX(-100%);
    }
    .app-drawer.is-open .app-drawer__panel { transform: translateX(0); }
}

/* ── MOBILE-Z2 (2026-05-30): inbox single-pane on phones ─────────────────────
 * The 3-pane (list · thread · details) grid was rendering ALL THREE panes
 * stacked on mobile because earlier rules in the file have `display:flex`
 * for `.inbox-list` and `.inbox-thread` outside any media query. These
 * rules sit at the END of the file so they win the cascade without needing
 * to chase down every earlier rule.
 *
 * Mobile state model:
 *   .inbox-app                  → list-mode (no active conversation)
 *   .inbox-app.is-thread-open   → thread-mode (active conversation)
 * The server stamps the class based on $activeConv. Desktop = unchanged.
 * --------------------------------------------------------------------------- */

@media (max-width: 760px) {
    /* Reset the grid so panes can stack/hide without the grid widths fighting us. */
    .inbox-app {
        display: block !important;
        height: 100%;
        position: relative;
    }

    /* List-mode (default): show the list pane, hide thread + details. */
    .inbox-app:not(.is-thread-open) .inbox-list {
        display: flex !important;
        width: 100% !important;
        height: 100%;
        border-right: 0 !important;
    }
    .inbox-app:not(.is-thread-open) .inbox-thread,
    .inbox-app:not(.is-thread-open) .inbox-details {
        display: none !important;
    }

    /* Thread-mode: show the thread pane only. List + details hidden. */
    .inbox-app.is-thread-open .inbox-thread {
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        height: 100%;
    }
    .inbox-app.is-thread-open .inbox-list,
    .inbox-app.is-thread-open .inbox-details {
        display: none !important;
    }

    /* The back arrow lives in the thread header - make it a real 40px touch
       target. The d-lg-none class was unreliable here. */
    .inbox-back-mobile {
        width: 40px; height: 40px;
        display: inline-flex !important;
        align-items: center; justify-content: center;
        margin-right: .25rem;
        flex-shrink: 0;
        color: var(--wo-ink);
        text-decoration: none;
    }

    /* Tighten the thread header so the back + avatar + tools fit without
       wrapping or pushing the composer down. */
    .inbox-thread__header {
        padding: .65rem .75rem !important;
        flex-wrap: nowrap;
    }
    .inbox-thread__header .icon-btn {
        width: 36px; height: 36px;
    }

    /* List header tightening so the search + filter row fits cleanly. */
    .inbox-list__header { padding: .9rem 1rem .6rem; }
}

/* Above ≥ 761px: hide the mobile back link, restore desktop. */
@media (min-width: 761px) {
    .inbox-back-mobile { display: none !important; }
}

/* ── MOBILE-Z4 (2026-05-30): details panel as slide-in overlay on phones ─────
 * The right details rail (files, links, pinned, etc.) is hidden on mobile
 * by Z2. Tapping #detailsToggle in the thread header adds `is-details-open`
 * on .inbox-app, which slides the panel in from the right over the thread.
 * Tap backdrop or the close icon to dismiss. */

@media (max-width: 760px) {
    /* Backdrop for the slide-in. Rendered as a ::before on .inbox-app so we
       don't have to touch the markup. */
    .inbox-app.is-thread-open.is-details-open::before {
        content: "";
        position: fixed; inset: 0;
        background: rgba(38, 27, 16, .42);
        backdrop-filter: blur(2px);
        z-index: 1090;
        animation: woFadeIn .18s ease;
    }
    @keyframes woFadeIn { from { opacity: 0 } to { opacity: 1 } }

    /* Make the details panel a positioned slide-in (only when open). */
    .inbox-app.is-thread-open.is-details-open .inbox-details {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(360px, 92vw);
        background: var(--wo-card, #fff);
        border-left: 1px solid var(--wo-line, #ece5d5);
        box-shadow: 0 0 60px rgba(17, 16, 12, .22);
        z-index: 1091;
        overflow-y: auto;
        transform: translateX(0);
        animation: woSlideInRight .22s cubic-bezier(.2, .7, .2, 1);
        padding-bottom: env(safe-area-inset-bottom);
    }
    @keyframes woSlideInRight {
        from { transform: translateX(100%); }
        to   { transform: translateX(0); }
    }
}
@media (prefers-reduced-motion: reduce) {
    .inbox-app.is-thread-open.is-details-open::before,
    .inbox-app.is-thread-open.is-details-open .inbox-details {
        animation: none !important;
    }
}

/* ── CALL-O (2026-05-30): Cancel button on waiting screen + Active-call
 *    banner in the inbox thread when a call is in progress ───────────────── */

/* Empty-state: Copy invite + Cancel side by side. */
.call-empty__actions {
    display: flex;
    gap: .65rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.call-empty__cancel {
    background: linear-gradient(180deg, #fbf5e8 0%, #f4ead1 100%);
    color: #8a261b;
    border: 1px solid rgba(138, 38, 27, .40);
    font-weight: 700;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 2px 6px rgba(138, 38, 27, .10);
    transition: transform .12s, background .14s, box-shadow .22s, border-color .14s, color .14s;
}
.call-empty__cancel:hover {
    background: linear-gradient(180deg, #fbf5e8 0%, #efdfb6 100%);
    border-color: rgba(138, 38, 27, .70);
    color: #6e1a12;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 8px 22px rgba(138, 38, 27, .18),
                0 0 0 3px rgba(255, 153, 0, .22);
}
.call-empty__cancel:active {
    transform: scale(.97);
    background: linear-gradient(180deg, #9a2a1d 0%, #7a1f15 100%);
    color: #fbf5e8;
    border-color: rgba(138, 38, 27, .85);
}

/* Active-call banner inside the conversation thread. Hidden by default;
   shown by JS when sessionStorage holds an active call for this conv. */
.inbox-active-call {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .9rem;
    background: linear-gradient(180deg, #fff8e6 0%, #ffeec2 100%);
    border-bottom: 1px solid rgba(255, 153, 0, .35);
    color: #5b3d00;
    font-family: var(--font-mono);
    font-size: .82rem;
    letter-spacing: .02em;
}
.inbox-active-call.is-visible { display: flex; }
.inbox-active-call__label {
    display: inline-flex; align-items: center; gap: .45rem;
    font-weight: 700;
}
.inbox-active-call__label .pulse {
    width: 9px; height: 9px; border-radius: 50%;
    background: #d12727;
    box-shadow: 0 0 0 0 rgba(209, 39, 39, .6);
    animation: woPulseDot 1.4s infinite;
}
@keyframes woPulseDot {
    0%   { box-shadow: 0 0 0 0   rgba(209, 39, 39, .55); }
    70%  { box-shadow: 0 0 0 10px rgba(209, 39, 39, 0); }
    100% { box-shadow: 0 0 0 0   rgba(209, 39, 39, 0); }
}
.inbox-active-call__actions {
    display: inline-flex; align-items: center; gap: .45rem;
    flex-shrink: 0;
}
.inbox-active-call__join,
.inbox-active-call__end {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .7rem; font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid rgba(138, 38, 27, .40);
    transition: transform .12s, background .14s, box-shadow .22s, border-color .14s, color .14s;
}
.inbox-active-call__join {
    background: #261b10;
    color: #fbf5e8;
    border-color: #261b10;
    text-decoration: none;
}
.inbox-active-call__join:hover {
    background: #3a2a18;
    color: #fbf5e8;
}
.inbox-active-call__end {
    background: linear-gradient(180deg, #fbf5e8 0%, #f4ead1 100%);
    color: #8a261b;
}
.inbox-active-call__end:hover {
    background: linear-gradient(180deg, #fbf5e8 0%, #efdfb6 100%);
    border-color: rgba(138, 38, 27, .70);
    color: #6e1a12;
    box-shadow: 0 0 0 3px rgba(255, 153, 0, .22);
}
.inbox-active-call__end:active {
    transform: scale(.97);
    background: linear-gradient(180deg, #9a2a1d 0%, #7a1f15 100%);
    color: #fbf5e8;
}
@media (prefers-reduced-motion: reduce) {
    .inbox-active-call__label .pulse { animation: none; }
}

/* ── MOBILE-Z6 (2026-05-30): keep message rows inside the viewport ───────────
 * The desktop bubbles use max-width:70% which is fine, but the inner widgets
 * (voice waveform card, file card, offer card) have min-widths set for
 * desktop that overflow on phones - voice cards push right off-screen.
 * Constrain everything to the row's width on ≤640. */

@media (max-width: 640px) {
    /* Tighter padding so bubbles have more room without changing desktop. */
    .inbox-thread__messages {
        padding: .9rem .75rem !important;
    }

    /* Rows: wider, but never beyond what fits. min-width:0 lets flex children
       shrink instead of forcing horizontal overflow. */
    .msg-row {
        max-width: 88% !important;
        min-width: 0;
    }

    /* Inner stack containing the bubble + its action row must shrink too. */
    .msg-stack {
        min-width: 0;
        max-width: 100%;
        flex: 1 1 auto;
    }

    /* Text bubble: wrap long words/URLs that would otherwise extend the box. */
    .msg-bubble {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }

    /* Voice message pill - was min-width:230px / max-width:360px which is
       wider than a phone column. Snap it to the row width. */
    .msg-voice { max-width: 100%; }
    .msg-voice .vmsg {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100%;
        box-sizing: border-box;
    }
    .vmsg__wave { min-width: 40px; }
    .vmsg__time { flex-shrink: 0; }

    /* File / offer / contract cards: same containment. */
    .msg-file, .msg-offer, .msg-contract, .msg-callcard, .msg-media {
        max-width: 100%;
        box-sizing: border-box;
    }
    .msg-file { white-space: normal; }

    /* Inline reaction / action chip row under a bubble must not push the
       bubble wider than its row. */
    .msg-row .msg-actions { max-width: 100%; }
}

/* ── MOBILE-Z7 (2026-05-30): inbox thread polish ─────────────────────────────
 * 1. Action pills (react / reply / star / pin / more) were permanently
 *    visible below every message on mobile because the existing 720px
 *    rule turned them into static flex items. Hide them by default and
 *    reveal only when the row carries `.is-actions-open` (tap-to-toggle).
 * 2. Voice card: right-padding so "0:04" timer doesn't touch the edge.
 * 3. Bubbles: claim the wasted left space (88% → 92% max-width).
 * 4. Thread header status: stays on one line, truncates.
 * 5. Header action icons: tighter packing so name + status fit. */

@media (max-width: 760px) {
    /* (1) Action pills hidden by default. */
    .msg-row .msg-actions {
        display: none !important;
    }
    .msg-row.is-actions-open .msg-actions {
        display: inline-flex !important;
        position: static;
        margin-top: 6px;
        background: var(--wo-card, #fff);
        border: 1px solid rgba(38, 27, 16, .1);
        border-radius: 999px;
        padding: 3px;
        box-shadow: 0 2px 8px rgba(38, 27, 16, .08);
        max-width: 100%;
        flex-wrap: wrap;
    }
    /* When mine: align the pill to the right with the bubble. */
    .msg-row--mine.is-actions-open .msg-actions {
        margin-left: auto;
    }

    /* (2) Voice card: extra right padding for the timer. */
    .msg-voice .vmsg {
        padding-right: 16px;
    }

    /* (3) Bubbles claim more width on phones (88% → 92%). */
    .msg-row { max-width: 92% !important; }

    /* (4) Thread header: status stays on one line. */
    .inbox-thread__header .thread-name,
    .inbox-thread__header .thread-sub {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .inbox-thread__header > div:first-child {
        min-width: 0;
        flex: 1 1 auto;
    }

    /* (5) Right-side action icons in the thread header - tighter spacing. */
    .inbox-thread__header > div:last-child {
        gap: 0 !important;
        flex-shrink: 0;
    }
    .inbox-thread__header .icon-btn {
        width: 34px; height: 34px;
    }
    .inbox-thread__header .icon-btn i { font-size: 1.05rem; }
}
@media (min-width: 761px) {
    /* Desktop: ignore the tap-toggle, keep original hover behaviour. */
    .msg-row.is-actions-open .msg-actions { /* no-op */ }
}

/* ── MOBILE-Z8 (2026-05-30): caption text + reaction picker fixes ───────────
 * 1. Mine caption bubbles ("Attached the SOW for review" etc) were rendering
 *    with an orange tint instead of the bubble's cream-paper. Force the
 *    cascade so caption inherits the standard mine-bubble color.
 * 2. The reaction picker (.msg-rx-picker) is JS-positioned via inline `left`
 *    and on phones that puts it off-screen for right-aligned bubbles.
 *    On ≤640 we override and anchor it centered horizontally, clamped
 *    to the viewport. */

/* (1) Caption bubble - explicit color, beats any later cascade. */
.msg-row--mine .msg-bubble--caption,
.msg-row--mine .msg-bubble--caption .msg-bubble__text,
.msg-row--mine .msg-bubble--caption a,
.msg-row--mine .msg-bubble--caption span {
    color: var(--wo-paper) !important;
}

/* (2) Reaction picker centered + viewport-clamped on phones. */
@media (max-width: 640px) {
    .msg-rx-picker {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        max-width: calc(100vw - 24px);
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── MOBILE-Z9 (2026-05-30): bubbles fit their content, never full-row ─────
 * .msg-stack is a flex column; default `align-items: stretch` forced the
 * bubble to fill the column. Short messages ("456", "lets test") came out
 * as huge empty cream cards. Make bubbles fit-content and align the stack
 * start/end so each bubble hugs its text and sits on the right (mine) /
 * left (them) side of its row. */

@media (max-width: 760px) {
    .msg-stack {
        align-items: flex-start;
    }
    .msg-row--mine .msg-stack {
        align-items: flex-end;
    }
    .msg-bubble,
    .msg-bubble--caption,
    .msg-voice .vmsg,
    .msg-file {
        max-width: 100%;
        width: -moz-fit-content;
        width: fit-content;
    }
    /* The text/file/voice container should not push past the parent row.
       fit-content + max-width:100% does the right thing for short and long
       messages alike. */

    /* Reaction strip + action pill belong with the bubble, not stretched. */
    .msg-stack .msg-rx,
    .msg-stack .msg-actions {
        align-self: flex-start;
    }
    .msg-row--mine .msg-stack .msg-rx,
    .msg-row--mine .msg-stack .msg-actions {
        align-self: flex-end;
    }

    /* Bubble timestamp meta row (the "12:02pm ✓✓") also aligns with bubble. */
    .msg-stack .msg-meta {
        align-self: flex-start;
    }
    .msg-row--mine .msg-stack .msg-meta {
        align-self: flex-end;
    }
}

/* ── REP-FEATURE (2026-05-30): Reputation Bridge section on the public
 *    home page. Editorial copy left, mock profile-card visual right.
 *    Pairs with the auth-side `.auth-rep` block - same vocabulary. */

.home-rep {
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 200, 80, .18), transparent 45%),
        radial-gradient(circle at 5% 90%,  rgba(255, 153, 0,  .12), transparent 55%),
        linear-gradient(180deg, #fffaf0 0%, #fbf2e0 100%);
    border-top: 1px solid rgba(255, 153, 0, .25);
    border-bottom: 1px solid rgba(255, 153, 0, .25);
}
.home-rep__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-mono);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #b95400;
    font-weight: 700;
    margin-bottom: 1.1rem;
}
.home-rep__pulse {
    width: 10px; height: 10px; border-radius: 50%;
    background: #ff9900;
    box-shadow: 0 0 0 0 rgba(255, 153, 0, .65);
    animation: homeRepPulse 1.8s ease-out infinite;
}
@keyframes homeRepPulse {
    0%   { box-shadow: 0 0 0 0   rgba(255, 153, 0, .65); }
    70%  { box-shadow: 0 0 0 14px rgba(255, 153, 0, 0); }
    100% { box-shadow: 0 0 0 0   rgba(255, 153, 0, 0); }
}
.home-rep__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4.5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.025em;
    color: var(--wo-ink);
    margin-bottom: 1rem;
}
.home-rep__title .serif {
    font-family: var(--font-serif, "Instrument Serif", serif);
    font-style: italic;
    font-weight: 500;
    color: #b95400;
    letter-spacing: -.01em;
}
.home-rep__sub {
    max-width: 540px;
    color: var(--wo-ink-2);
    margin-bottom: 1.5rem;
}
.home-rep__list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.8rem;
}
.home-rep__list li {
    padding: .55rem 0;
    border-bottom: 1px solid rgba(255, 153, 0, .15);
    color: var(--wo-ink);
    font-size: .98rem;
    display: flex; align-items: flex-start; gap: .55rem;
}
.home-rep__list li:last-child { border-bottom: 0; }
.home-rep__list li i {
    color: #1d8a4e;
    font-size: 1.15rem;
    margin-top: 2px;
    flex-shrink: 0;
}
.home-rep__list li strong { color: var(--wo-ink); font-weight: 700; margin-right: 3px; }
.home-rep__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    align-items: center;
}
/* REP-V12 (2026-05-30): "How it works" is now a real outlined button (was a
   subtle text link). Matching the primary CTA's height/weight so they sit
   as a proper pair, but in WO orange outline so the visual hierarchy stays
   primary > secondary. */
.home-rep__cta-secondary.btn {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .005em;
    border: 1.5px solid #b95400;
    color: #b95400;
    background: #fff;
    box-shadow: 0 2px 6px rgba(138, 38, 27, .08);
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .22s ease, transform .12s ease;
}
.home-rep__cta-secondary.btn:hover {
    background: #b95400;
    color: #fff;
    border-color: #b95400;
    box-shadow: 0 6px 16px rgba(185, 84, 0, .25),
                0 0 0 3px rgba(255, 153, 0, .18);
    transform: translateY(-1px);
}
.home-rep__cta-secondary.btn:active { transform: scale(.97); }

/* Right side: visual */
.home-rep__visual {
    position: relative;
    max-width: 480px;
    margin-left: auto;
}
.home-rep__sources {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-bottom: .8rem;
}
.home-rep__source {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .85rem;
    background: #fff;
    border: 1px solid var(--wo-line);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(38, 27, 16, .06);
    animation: homeRepDrift 6s ease-in-out infinite;
}
.home-rep__source:nth-child(2) {
    animation-delay: .8s;
    margin-left: 32px;
}
@keyframes homeRepDrift {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
.home-rep__source-glyph {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    flex-shrink: 0;
}
.home-rep__source--upwork .home-rep__source-glyph { background: #14a800; }
.home-rep__source--fiverr .home-rep__source-glyph { background: #1dbf73; }
.home-rep__source-meta { display: flex; flex-direction: column; line-height: 1.2; }
.home-rep__source-meta strong { font-weight: 700; color: var(--wo-ink); }
.home-rep__source-meta em {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--wo-text-muted);
}

/* Flow arrow */
.home-rep__flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin: .25rem 0 .55rem;
    color: #b95400;
}
.home-rep__flow-line {
    width: 1px;
    height: 18px;
    background: linear-gradient(180deg, rgba(255, 153, 0, .55), rgba(255, 153, 0, .15));
    margin-bottom: 4px;
}
.home-rep__flow-label {
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2px;
}
.home-rep__flow i { font-size: 1.1rem; }

/* Mock profile card */
.home-rep__card {
    position: relative;
    padding: 1.2rem 1.25rem 1.1rem;
    background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
    border: 1px solid rgba(255, 153, 0, .3);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(38, 27, 16, .12),
                0 1px 0 rgba(255, 255, 255, .9) inset;
}
.home-rep__card-stamp {
    position: absolute;
    top: -10px; right: 16px;
    font-family: var(--font-mono);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: #3a2400;
    background: linear-gradient(180deg, #ffd97a, #ffb340);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(196, 130, 0, .45);
    box-shadow: 0 4px 10px rgba(255, 153, 0, .4);
}
.home-rep__card-head {
    display: flex; align-items: center; gap: .85rem;
    margin-bottom: .9rem;
}
.home-rep__card-avatar {
    width: 50px; height: 50px;
    background: #261b10;
    color: #ff9900;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
}
.home-rep__card-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--wo-ink);
    display: inline-flex; align-items: center; gap: .4rem;
}
.home-rep__card-name i { color: #1d8a4e; font-size: .9rem; }
.home-rep__card-meta {
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--wo-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px;
}
.home-rep__card-score {
    display: flex; align-items: baseline;
    gap: .55rem;
    padding: .65rem .75rem;
    background: rgba(255, 153, 0, .07);
    border-radius: 10px;
    margin-bottom: .8rem;
    flex-wrap: wrap;
}
.home-rep__card-stars { display: inline-flex; gap: .15rem; }
.home-rep__card-stars i { color: #ff9900; font-size: .9rem; }
.home-rep__card-score strong {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--wo-ink);
    font-variant-numeric: tabular-nums;
}
.home-rep__card-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: .7rem;
    color: var(--wo-text-muted);
}
.home-rep__card-quote {
    font-family: var(--font-serif, "Instrument Serif", serif);
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.4;
    color: var(--wo-ink);
    padding: .25rem 0 .55rem;
    border-bottom: 1px dashed rgba(255, 153, 0, .25);
}
.home-rep__card-source {
    display: flex; align-items: center; gap: .55rem;
    margin-top: .55rem;
    font-family: var(--font-mono);
    font-size: .7rem;
    color: var(--wo-text-muted);
}
.home-rep__card-source-tag {
    background: #14a800;
    color: #fff;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 700;
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .home-rep__visual { max-width: 100%; margin: 1.5rem auto 0; }
    .home-rep__title  { font-size: 2rem; }
    .home-rep__source:nth-child(2) { margin-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-rep__pulse,
    .home-rep__source { animation: none; }
}

/* REP-V11 (2026-05-30): smooth modern crossfade for the rotating card.
   Was: 180ms opacity-only fade - read as a synchronized "page-refresh" blink.
   Now: 420ms cubic-bezier ease + gentle slide + slight scale + tiny blur,
   plus a staggered start handled in JS so elements crossfade in sequence,
   not all-at-once. */
.home-rep__source,
.auth-rep__chip,
.home-rep__card-quote,
.home-rep__card-name span,
.home-rep__card-meta span,
.home-rep__card-avatar,
.auth-rep__name span,
.auth-rep__meta span,
.auth-rep__avatar {
    transition: opacity .42s cubic-bezier(.4, 0, .2, 1),
                transform .42s cubic-bezier(.4, 0, .2, 1),
                filter .42s cubic-bezier(.4, 0, .2, 1);
    will-change: opacity, transform;
}
.home-rep__source.is-fading,
.auth-rep__chip.is-fading,
.home-rep__card-quote.is-fading,
.home-rep__card-name span.is-fading,
.home-rep__card-meta span.is-fading,
.home-rep__card-avatar.is-fading,
.auth-rep__name span.is-fading,
.auth-rep__meta span.is-fading,
.auth-rep__avatar.is-fading {
    opacity: 0;
    transform: translateY(6px) scale(.97);
    filter: blur(1.5px);
}
/* Via-tag pill: longer easing so the color shift glides instead of flashing. */
.home-rep__card-source-tag {
    transition: background .55s cubic-bezier(.4, 0, .2, 1),
                color .55s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
    .home-rep__source,
    .auth-rep__chip,
    .home-rep__card-quote,
    .home-rep__card-name span,
    .home-rep__card-meta span,
    .home-rep__card-avatar,
    .auth-rep__name span,
    .auth-rep__meta span,
    .auth-rep__avatar,
    .home-rep__card-source-tag {
        transition: none !important;
        filter: none !important;
    }
}

/* ── REP-PUBLIC (2026-05-30): public Reputation Bridge explainer page
 *    (/how/reputation-bridge). 3-step cards, FAQ list, CTA strip.
 *    Reuses the .home-rep palette so the page reads as a continuation. */

.rep-how { background: linear-gradient(180deg, #fff 0%, #fffaf0 100%); }
.rep-step {
    position: relative;
    height: 100%;
    padding: 1.5rem 1.4rem 1.3rem;
    background: #fff;
    border: 1px solid rgba(255, 153, 0, .22);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(38, 27, 16, .06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rep-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(38, 27, 16, .12);
    border-color: rgba(255, 153, 0, .55);
}
.rep-step__num {
    position: absolute;
    top: -14px; left: 1.4rem;
    background: linear-gradient(180deg, #ffd97a, #ffb340);
    color: #3a2400;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(196, 130, 0, .45);
    box-shadow: 0 4px 10px rgba(255, 153, 0, .35);
    letter-spacing: .04em;
}
.rep-step h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    margin: .25rem 0 .55rem;
    color: var(--wo-ink);
    letter-spacing: -.01em;
}
.rep-step p {
    color: var(--wo-ink-2);
    font-size: .94rem;
    line-height: 1.5;
    margin-bottom: 1.1rem;
}
.rep-step__visual {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(255, 153, 0, .25);
}
.rep-step__platforms {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}
.rep-step__plat {
    width: 30px; height: 30px;
    border-radius: 50%;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .82rem;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(38, 27, 16, .15);
}
.rep-step__visual--code {
    background: #261b10;
    border-radius: 8px;
    padding: .65rem .8rem;
    border-top: 0;
    font-family: var(--font-mono);
    font-size: .76rem;
    color: #fbf5e8;
}
.rep-step__code-line { padding: 2px 0; }
.rep-step__code-line--dim { color: rgba(255, 245, 230, .55); }
.rep-step__code-line--ok  { color: #4ade80; }
.rep-step__code-tag {
    background: #ff9900;
    color: #1a1209;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 800;
    font-size: .68rem;
    letter-spacing: .08em;
    margin-right: 6px;
}
.rep-step__mini-card {
    display: flex; align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .65rem .75rem;
    background: rgba(255, 153, 0, .07);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: .82rem;
}
.rep-step__mini-stars { color: #ff9900; letter-spacing: 1px; }
.rep-step__mini-card strong { color: var(--wo-ink); font-size: .92rem; }
.rep-step__mini-tag {
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 2px 6px;
    border-radius: 3px;
}

/* FAQ */
.rep-faq {
    border-bottom: 1px solid rgba(255, 153, 0, .22);
    padding: 1rem 0;
}
.rep-faq:last-of-type { border-bottom: 0; }
.rep-faq > summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--wo-ink);
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
}
.rep-faq > summary::-webkit-details-marker { display: none; }
.rep-faq > summary::after {
    content: "+";
    color: #b95400;
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
    transition: transform .2s ease;
}
.rep-faq[open] > summary::after { transform: rotate(45deg); }
.rep-faq p {
    margin: .65rem 0 0;
    color: var(--wo-ink-2);
    line-height: 1.6;
}
.rep-faq p em { color: var(--wo-ink); font-style: italic; }

/* CTA section */
.rep-cta {
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 200, 80, .22), transparent 45%),
        radial-gradient(circle at 5% 90%,  rgba(255, 153, 0,  .14), transparent 55%),
        linear-gradient(180deg, #fffaf0 0%, #fbf2e0 100%);
}
.rep-cta h2 .serif {
    font-family: var(--font-serif, "Instrument Serif", serif);
    font-style: italic;
    font-weight: 500;
    color: #b95400;
}

@media (max-width: 640px) {
    .rep-step { padding: 1.3rem 1.2rem 1.1rem; }
    .rep-faq > summary { font-size: .98rem; }
}

/* ── REP-V4 (2026-05-30): auth panel - Reputation on top, WRK Token below ──
 * Side panel had: brand → eyebrow → headline → quotes carousel → stats grid
 *               → rep card.
 * Now has:      brand → rep card → WRK Token panel.
 * The .auth-rep--top variant removes the top border that was there to
 * separate it from the stats above it. */

.auth-rep--top {
    margin-top: 2.25rem;
    padding-top: 0 !important;
    border-top: 0 !important;
}

/* WRK Token panel on auth pages. Compact version of the home-page data
   panel so the visual language is consistent across surfaces. */
.auth-wrk {
    margin-top: 2.25rem;
    padding: 1.1rem 1.2rem 1rem;
    background: linear-gradient(180deg, #fffaf0 0%, #f7ecd0 100%);
    border: 1px solid rgba(255, 153, 0, .28);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(38, 27, 16, .06),
                0 1px 0 rgba(255, 255, 255, .9) inset;
    position: relative;
    overflow: hidden;
}
.auth-wrk::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 200, 80, .18), transparent 55%);
    pointer-events: none;
}
.auth-wrk__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .85rem;
    padding-bottom: .65rem;
    border-bottom: 1px dashed rgba(255, 153, 0, .25);
    position: relative;
}
.auth-wrk__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wo-ink);
    letter-spacing: -.01em;
}
.auth-wrk__id {
    font-family: var(--font-mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--wo-text-muted);
    margin-top: 2px;
}
.auth-wrk__live {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #1d8a4e;
}
.auth-wrk__live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #1d8a4e;
    box-shadow: 0 0 0 0 rgba(29, 138, 78, .55);
    animation: authWrkPulse 1.8s ease-out infinite;
}
@keyframes authWrkPulse {
    0%   { box-shadow: 0 0 0 0   rgba(29, 138, 78, .55); }
    70%  { box-shadow: 0 0 0 8px rgba(29, 138, 78, 0); }
    100% { box-shadow: 0 0 0 0   rgba(29, 138, 78, 0); }
}
.auth-wrk__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    padding: .35rem 0;
    border-bottom: 1px solid rgba(255, 153, 0, .12);
    position: relative;
}
.auth-wrk__row--last { border-bottom: 0; }
.auth-wrk__label {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--wo-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.auth-wrk__value {
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 700;
    color: var(--wo-ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.auth-wrk__value .accent { color: #b95400; }

@media (prefers-reduced-motion: reduce) {
    .auth-wrk__live-dot { animation: none; }
}

/* REP-V7 block superseded by REP-V11 above (unified, smoother crossfade). */

/* ── LEGAL-V1 (2026-05-30): About + Careers + subprocessors table ─────────── */

/* Subprocessor table on /legal/privacy */
.legal-subproc-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.2rem 0; }
.legal-subproc {
    width: 100%; border-collapse: collapse;
    font-size: .92rem; background: var(--wo-card);
    border: 1px solid var(--wo-line); border-radius: 8px; overflow: hidden;
}
.legal-subproc thead th {
    background: var(--wo-paper-2);
    text-align: left;
    padding: .65rem .85rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--wo-ink-2);
    border-bottom: 1px solid var(--wo-line);
}
.legal-subproc tbody td {
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--wo-line);
    color: var(--wo-ink);
    vertical-align: top;
}
.legal-subproc tbody tr:last-child td { border-bottom: 0; }
.legal-subproc tbody tr:nth-child(odd) { background: rgba(255,153,0,.03); }

/* About page */
.about-hero { padding: 4rem 0 2.5rem; }
.about-numbers {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
    padding: 1.4rem 1.5rem;
    background: linear-gradient(180deg, #fffaf0 0%, #f7ecd0 100%);
    border: 1px solid rgba(255, 153, 0, .28);
    border-radius: 14px;
}
.about-numbers > div { text-align: left; }
.about-numbers strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--wo-ink);
}
.about-numbers span {
    font-family: var(--font-mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--wo-text-muted);
}

.about-mission .lead { color: var(--wo-ink-2); }
.about-mission strong { color: var(--wo-ink); }

.about-principle {
    height: 100%;
    padding: 1.4rem 1.3rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    transition: border-color .15s ease, transform .15s ease;
}
.about-principle:hover { border-color: rgba(255, 153, 0, .55); transform: translateY(-2px); }
.about-principle__num {
    font-family: var(--font-mono); font-size: .68rem;
    color: #b95400; font-weight: 700;
    letter-spacing: .12em;
    border-bottom: 1px solid rgba(255, 153, 0, .25);
    padding-bottom: .45rem; margin-bottom: .8rem;
    display: block;
}
.about-principle h3 {
    font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
    margin-bottom: .4rem; color: var(--wo-ink);
}
.about-principle p {
    font-size: .92rem; color: var(--wo-ink-2); line-height: 1.5; margin: 0;
}

.about-founder { background: linear-gradient(180deg, #fffaf0 0%, #fbf2e0 100%); }
.about-founder__card {
    padding: 1.6rem 1.7rem;
    background: #fff;
    border: 1px solid rgba(255, 153, 0, .3);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(38, 27, 16, .12);
}
.about-founder__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.about-founder__avatar {
    width: 60px; height: 60px;
    background: #261b10; color: #ff9900;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
}
.about-founder__name {
    font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
    display: inline-flex; align-items: center; gap: .35rem; color: var(--wo-ink);
}
.about-founder__name i { color: #1d8a4e; font-size: .9rem; }
.about-founder__role {
    font-family: var(--font-mono); font-size: .68rem;
    text-transform: uppercase; letter-spacing: .14em; color: var(--wo-text-muted);
}
.about-founder__list { list-style: none; padding: 0; margin: 0; }
.about-founder__list li {
    padding: .5rem 0;
    border-bottom: 1px dashed rgba(255, 153, 0, .25);
    color: var(--wo-ink); font-size: .94rem; line-height: 1.5;
}
.about-founder__list li:last-child { border-bottom: 0; }
.about-founder__list li strong { color: #b95400; font-weight: 700; }
.about-founder__sign {
    margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--wo-line);
    color: var(--wo-ink); font-size: .98rem;
}

.about-stack {
    padding: 1rem 1.1rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 10px;
    display: flex; flex-direction: column; gap: 4px;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.about-stack:hover {
    border-color: #b95400;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(38, 27, 16, .08);
    color: inherit;
    text-decoration: none;
}
.about-stack:hover strong { color: #b95400; }
.about-stack strong {
    font-family: var(--font-mono); font-size: .88rem;
    color: var(--wo-ink); font-weight: 700;
    transition: color .15s ease;
}
.about-stack span { color: var(--wo-text-muted); font-size: .85rem; line-height: 1.4; }

/* Careers page */
.careers-hero { padding: 4rem 0 2.5rem; }
.careers-card {
    padding: 1.3rem 1.4rem;
    background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
    border: 1px solid rgba(255, 153, 0, .3);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(38, 27, 16, .08);
}
.careers-card__head {
    display: flex; align-items: center; gap: .55rem;
    padding-bottom: .65rem; margin-bottom: .65rem;
    border-bottom: 1px dashed rgba(255, 153, 0, .25);
}
.careers-card__head strong {
    font-family: var(--font-display); font-weight: 700; color: var(--wo-ink);
}
.careers-card__dot {
    width: 10px; height: 10px; border-radius: 50%; background: #1d8a4e;
    box-shadow: 0 0 0 0 rgba(29, 138, 78, .55);
    animation: careersDot 1.8s ease-out infinite;
}
@keyframes careersDot {
    0%   { box-shadow: 0 0 0 0   rgba(29, 138, 78, .55); }
    70%  { box-shadow: 0 0 0 12px rgba(29, 138, 78, 0); }
    100% { box-shadow: 0 0 0 0   rgba(29, 138, 78, 0); }
}
.careers-card__list { list-style: none; padding: 0; margin: 0; }
.careers-card__list li {
    padding: .4rem 0; display: flex; align-items: center; gap: .55rem;
    color: var(--wo-ink); font-size: .94rem;
}
.careers-card__list li i { color: #1d8a4e; }

.careers-tile {
    height: 100%; padding: 1.4rem 1.3rem;
    background: var(--wo-card); border: 1px solid var(--wo-line);
    border-radius: 12px;
    transition: transform .15s, border-color .15s;
}
.careers-tile:hover { transform: translateY(-2px); border-color: rgba(255, 153, 0, .55); }
.careers-tile__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: #261b10; color: #ff9900;
    border-radius: 8px;
    font-family: var(--font-display); font-weight: 800;
    font-size: .9rem;
    margin-bottom: .8rem;
}
.careers-tile h3 {
    font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
    margin-bottom: .4rem; color: var(--wo-ink);
}
.careers-tile p {
    font-size: .92rem; color: var(--wo-ink-2); line-height: 1.5; margin: 0;
}

.careers-benefit {
    height: 100%; padding: 1.3rem 1.3rem;
    background: var(--wo-card); border: 1px solid var(--wo-line);
    border-radius: 12px;
    text-align: left;
}
.careers-benefit i {
    font-size: 1.5rem; color: #b95400;
    margin-bottom: .65rem; display: block;
}
.careers-benefit h4 {
    font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
    margin-bottom: .35rem; color: var(--wo-ink);
}
.careers-benefit p {
    color: var(--wo-ink-2); font-size: .9rem; line-height: 1.5; margin: 0;
}

.careers-roles__list {
    display: flex; flex-direction: column; gap: .85rem;
}

/* CAREERS-V2 (2026-05-30): grouped role categories - Security + Full-stack. */
.role-cat {
    margin-bottom: 2.5rem;
}
.role-cat:last-of-type { margin-bottom: 0; }
.role-cat__head {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1.1rem 0 .9rem;
    border-bottom: 1px solid var(--wo-line);
    margin-bottom: 1rem;
}
.role-cat__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: 10px;
    background: #261b10; color: #ff9900;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.role-cat__title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--wo-ink);
    margin: 0 0 .25rem;
}
.role-cat__sub {
    color: var(--wo-ink-2);
    font-size: .95rem;
    line-height: 1.5;
    margin: 0;
    max-width: 70ch;
}
.role-cat__list {
    display: flex; flex-direction: column; gap: .75rem;
}
@media (max-width: 640px) {
    .role-cat__head { flex-direction: column; gap: .6rem; }
    .role-cat__title { font-size: 1.35rem; }
}
.role-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem;
    padding: 1.2rem 1.4rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.role-row:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 153, 0, .55);
    box-shadow: 0 8px 22px rgba(38, 27, 16, .08);
}
.role-title {
    font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
    margin: 0 0 .25rem; color: var(--wo-ink);
}
.role-blurb {
    color: var(--wo-ink-2); font-size: .92rem; margin: 0; line-height: 1.45;
    max-width: 60ch;
}
.role-meta {
    display: flex; align-items: center; gap: .55rem;
    flex-shrink: 0;
}
.role-tag {
    font-family: var(--font-mono);
    font-size: .66rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--wo-ink-2); padding: 4px 9px;
    background: var(--wo-paper-2); border: 1px solid var(--wo-line);
    border-radius: 999px; font-weight: 700;
}
.role-tag--loc { color: #1d8a4e; background: rgba(29, 138, 78, .08); border-color: rgba(29, 138, 78, .22); }

.careers-equal-opp {
    margin-top: 2.5rem; padding: 1rem 1.2rem;
    background: var(--wo-paper); border-left: 3px solid #b95400;
    border-radius: 4px;
    color: var(--wo-ink-2); font-size: .9rem; line-height: 1.55;
    font-style: italic;
}

@media (max-width: 800px) {
    .role-row { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .role-meta { flex-wrap: wrap; }
    .about-numbers { grid-template-columns: 1fr; gap: .5rem; }
    .about-numbers > div { display: flex; justify-content: space-between; align-items: baseline; }
    .about-numbers strong { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .careers-card__dot { animation: none; }
}

/* ── CAR.G (2026-05-30): Careers apply flow (gate, form, submitted) ──── */

/* Apply gate (anonymous visitor) */
.apply-gate-hero { padding: 4rem 0 2rem; }
.apply-gate { background: linear-gradient(180deg, #fffaf0 0%, #fbf2e0 100%); }
.apply-gate__card {
    height: 100%;
    padding: 1.6rem 1.5rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 14px;
    text-align: left;
    position: relative;
    transition: transform .15s ease, border-color .15s ease, box-shadow .22s ease;
}
.apply-gate__card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 153, 0, .55);
    box-shadow: 0 10px 28px rgba(38, 27, 16, .10);
}
.apply-gate__card--gold {
    background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
    border-color: rgba(255, 153, 0, .40);
}
.apply-gate__badge {
    position: absolute;
    top: -10px; right: 14px;
    font-family: var(--font-mono);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: #3a2400;
    background: linear-gradient(180deg, #ffd97a, #ffb340);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(196, 130, 0, .45);
    box-shadow: 0 4px 10px rgba(255, 153, 0, .35);
}
.apply-gate__icon {
    width: 48px; height: 48px;
    background: #261b10; color: #ff9900;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    margin-bottom: .85rem;
}
.apply-gate__card h3 {
    font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
    margin: 0 0 .35rem; color: var(--wo-ink);
}
.apply-gate__card p {
    color: var(--wo-ink-2); font-size: .94rem; line-height: 1.55;
    margin: 0 0 1.1rem;
}
.apply-gate__note {
    margin-top: 2rem; padding: 1rem 1.2rem;
    background: var(--wo-paper);
    border-left: 3px solid #b95400;
    border-radius: 4px;
    color: var(--wo-ink-2); font-size: .9rem; line-height: 1.55;
}
.apply-gate__note i { color: #b95400; margin-right: .35rem; }
.apply-gate__back { margin-top: 1.5rem; font-family: var(--font-mono); font-size: .82rem; }
.apply-gate__back a { color: var(--wo-ink-2); text-decoration: none; }
.apply-gate__back a:hover { color: #b95400; }

/* Apply form */
.apply-form-hero { padding: 3rem 0 1.5rem; }
.apply-form-section { padding-top: 1.5rem; }
.apply-form {
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 14px;
    padding: 1.8rem 2rem;
    box-shadow: 0 6px 18px rgba(38, 27, 16, .04);
}
.apply-form__group {
    border: 0;
    margin: 0 0 1.6rem;
    padding: 0 0 1.4rem;
    border-bottom: 1px solid var(--wo-line);
}
.apply-form__group:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.apply-form__group legend {
    font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
    color: var(--wo-ink); margin-bottom: .85rem; padding: 0;
    display: flex; align-items: center; gap: .55rem;
}
.apply-form__group label {
    display: block;
    font-family: var(--font-mono);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--wo-ink-2); font-weight: 700;
    margin-bottom: .3rem;
}
.apply-form__group label a { color: inherit; }
.apply-form__req {
    font-family: var(--font-mono); font-size: .58rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .14em;
    color: #b95400;
    padding: 2px 7px;
    background: rgba(255, 153, 0, .12);
    border-radius: 999px;
}
.apply-form__opt {
    font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--wo-text-muted);
    padding: 2px 7px;
    background: var(--wo-paper-2);
    border-radius: 999px;
}
.apply-form__hint {
    margin: .35rem 0 0; font-size: .82rem; color: var(--wo-text-muted);
}
.apply-form__err {
    margin-top: .35rem;
    padding: .45rem .7rem;
    background: rgba(185, 28, 28, .07);
    border-left: 3px solid #b91c1c;
    color: #8b1414;
    font-size: .84rem;
    border-radius: 3px;
}
.apply-form__drop {
    display: block;
    text-align: center;
    padding: 1.4rem 1.4rem;
    background: linear-gradient(180deg, #fffaf0 0%, #fbf2e0 100%);
    border: 2px dashed rgba(255, 153, 0, .45);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.apply-form__drop:hover { border-color: #b95400; background: linear-gradient(180deg, #fff7e2 0%, #f9e6b8 100%); }
.apply-form__drop input[type="file"] { display: block; width: 100%; margin-top: .75rem; font-size: .85rem; }
.apply-form__drop-icon i { font-size: 2.1rem; color: #b95400; }
.apply-form__drop-text {
    display: block;
    color: var(--wo-ink);
    font-family: var(--font-display);
    margin-top: .35rem;
    line-height: 1.4;
}
.apply-form__drop-text em {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--wo-text-muted);
}
.apply-form__group--terms { background: var(--wo-paper); border-radius: 10px; padding: 1rem 1.2rem; border: 0; margin-top: 1.6rem; }
.apply-form__terms {
    display: flex; align-items: flex-start; gap: .65rem;
    font-family: inherit; font-size: .92rem; text-transform: none; letter-spacing: 0;
    color: var(--wo-ink); font-weight: 400;
    line-height: 1.55;
}
.apply-form__terms input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: #ff9900;
    margin-top: 2px;
    flex-shrink: 0;
}
.apply-form__actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-top: 1.4rem; padding-top: 1.4rem;
    border-top: 1px solid var(--wo-line);
}

/* Sticky role recap */
.apply-recap {
    position: sticky; top: 90px;
    padding: 1.4rem 1.5rem;
    background: linear-gradient(180deg, #fffaf0 0%, #fbf2e0 100%);
    border: 1px solid rgba(255, 153, 0, .35);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(38, 27, 16, .06);
}
.apply-recap__tag {
    display: inline-block;
    font-family: var(--font-mono); font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    color: #b95400;
    background: rgba(255, 153, 0, .12);
    padding: 3px 9px; border-radius: 999px;
    margin-bottom: .85rem;
}
.apply-recap h3 {
    font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
    color: var(--wo-ink); margin: 0 0 .25rem;
}
.apply-recap__loc {
    font-family: var(--font-mono); font-size: .72rem;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--wo-text-muted); margin: 0 0 .85rem;
}
.apply-recap__blurb {
    color: var(--wo-ink-2); font-size: .88rem; line-height: 1.55;
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed rgba(255, 153, 0, .25);
}
.apply-recap__list { display: flex; flex-direction: column; gap: .55rem; }
.apply-recap__list > div { display: flex; justify-content: space-between; gap: .85rem; align-items: baseline; }
.apply-recap__list span {
    font-family: var(--font-mono); font-size: .65rem;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--wo-text-muted);
}
.apply-recap__list strong {
    font-family: var(--font-display); font-size: .88rem; font-weight: 700;
    color: var(--wo-ink); text-align: right;
}

/* Submitted page */
.apply-done-hero {
    padding: 5rem 0 3rem;
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 200, 80, .22), transparent 45%),
        radial-gradient(circle at 5% 90%,  rgba(255, 153, 0,  .14), transparent 55%),
        linear-gradient(180deg, #fffaf0 0%, #fbf2e0 100%);
    text-align: center;
}
.apply-done { max-width: 720px; margin: 0 auto; }
.apply-done__stamp {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px;
    background: linear-gradient(180deg, #1d8a4e 0%, #146a3b 100%);
    color: #fff;
    border-radius: 50%;
    font-size: 2.2rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 6px 22px rgba(29, 138, 78, .35), 0 1px 0 rgba(255,255,255,.4) inset;
    animation: applyDoneStamp .55s cubic-bezier(.18,.89,.32,1.28) both;
}
@keyframes applyDoneStamp {
    0%   { transform: scale(.4); opacity: 0; }
    70%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); }
}
.apply-done__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-bottom: 1rem;
}
.apply-done__title .serif {
    font-family: var(--font-serif, "Instrument Serif", serif);
    font-style: italic; font-weight: 500; color: #b95400;
}
.apply-done__sub {
    color: var(--wo-ink-2);
    font-size: 1.05rem; line-height: 1.55;
    max-width: 600px; margin: 0 auto 1.5rem;
}
.apply-done__meta {
    display: inline-flex; gap: 2rem;
    padding: 1rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(255, 153, 0, .3);
    border-radius: 12px;
    margin-bottom: 1rem;
    flex-wrap: wrap; justify-content: center;
}
.apply-done__meta > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.apply-done__meta span {
    font-family: var(--font-mono); font-size: .62rem;
    text-transform: uppercase; letter-spacing: .14em; color: var(--wo-text-muted);
}
.apply-done__meta strong {
    font-family: var(--font-display); font-weight: 700; font-size: 1rem;
    color: var(--wo-ink); font-variant-numeric: tabular-nums;
}
.apply-done__withdraw .btn-link {
    color: #8b1414; font-size: .85rem;
    text-decoration: underline; text-underline-offset: 3px;
}
.apply-done__withdraw .btn-link:hover { color: #6b0f0f; }

/* While you wait */
.apply-while { background: var(--wo-paper); }
.apply-while__card {
    height: 100%;
    display: flex; flex-direction: column;
    padding: 1.3rem 1.3rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.apply-while__card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 153, 0, .55);
    box-shadow: 0 10px 24px rgba(38, 27, 16, .10);
    color: inherit;
}
.apply-while__card--gold {
    background: linear-gradient(180deg, #fffaf0 0%, #fbf2e0 100%);
    border-color: rgba(255, 153, 0, .35);
}
.apply-while__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    background: #261b10; color: #ff9900;
    border-radius: 8px;
    font-family: var(--font-display); font-weight: 800; font-size: .85rem;
    margin-bottom: .65rem;
}
.apply-while__card h4 {
    font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
    margin: 0 0 .35rem; color: var(--wo-ink);
}
.apply-while__card p {
    color: var(--wo-ink-2); font-size: .88rem; line-height: 1.5; margin: 0 0 .8rem;
    flex: 1;
}
.apply-while__cta {
    font-family: var(--font-mono); font-size: .7rem;
    text-transform: uppercase; letter-spacing: .1em;
    color: #b95400; font-weight: 700;
}

@media (max-width: 800px) {
    .apply-form { padding: 1.3rem 1.2rem; }
    .apply-recap { position: static; }
    .apply-done__meta { gap: 1.2rem; padding: .9rem 1.1rem; }
    .apply-form__actions { flex-direction: column-reverse; align-items: stretch; }
    .apply-form__actions .btn-primary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .apply-done__stamp { animation: none; }
}

/* ── CAR.I (2026-05-30): /my-applications applicant tracking page ───────── */

.my-apps { padding-top: .5rem; }
.my-apps__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    margin-bottom: 1.6rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--wo-line);
}
.my-apps__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: .25rem 0 .55rem;
}
.my-apps__sub { color: var(--wo-ink-2); max-width: 60ch; margin: 0; }

.my-apps__empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--wo-card);
    border: 1px dashed rgba(255, 153, 0, .35);
    border-radius: 14px;
}
.my-apps__empty-glyph {
    width: 60px; height: 60px;
    margin: 0 auto 1rem;
    background: var(--wo-paper);
    color: #b95400;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
}
.my-apps__empty h2 {
    font-family: var(--font-display); font-weight: 800; font-size: 1.4rem;
    color: var(--wo-ink); margin-bottom: .5rem;
}
.my-apps__empty p { color: var(--wo-ink-2); max-width: 480px; margin: 0 auto 1.3rem; }

.my-apps__list { display: flex; flex-direction: column; gap: .8rem; }
.my-apps__row {
    display: flex; align-items: center; gap: 1.5rem;
    justify-content: space-between;
    padding: 1.1rem 1.3rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.my-apps__row:hover {
    border-color: rgba(255, 153, 0, .55);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(38, 27, 16, .07);
}
.my-apps__row-body { min-width: 0; flex: 1; }
.my-apps__row-meta {
    display: flex; align-items: center; gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .35rem;
}
.my-apps__cat,
.my-apps__tag,
.my-apps__loc {
    font-family: var(--font-mono); font-size: .66rem;
    text-transform: uppercase; letter-spacing: .12em;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
}
.my-apps__cat { background: #261b10; color: #ff9900; }
.my-apps__tag { background: var(--wo-paper-2); color: var(--wo-ink-2); border: 1px solid var(--wo-line); }
.my-apps__loc { background: rgba(29, 138, 78, .08); color: #1d8a4e; border: 1px solid rgba(29, 138, 78, .22); }
.my-apps__role {
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
    color: var(--wo-ink); margin: 0 0 .25rem;
}
.my-apps__sub-meta {
    margin: 0;
    font-family: var(--font-mono); font-size: .72rem;
    color: var(--wo-text-muted);
}
.my-apps__sub-meta code {
    background: var(--wo-paper); padding: 1px 5px; border-radius: 3px;
    color: var(--wo-ink-2); font-size: .72rem;
}
.my-apps__row-side {
    display: flex; flex-direction: column; align-items: flex-end; gap: .55rem;
    flex-shrink: 0;
}
.my-apps__status {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    padding: 5px 10px;
    border-radius: 999px;
}
.my-apps__status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
}
.my-apps__status.is-new      { color: #b95400; background: rgba(255, 153, 0, .12); border: 1px solid rgba(255, 153, 0, .35); }
.my-apps__status.is-progress { color: #1d4ed8; background: rgba(29, 78, 216, .10); border: 1px solid rgba(29, 78, 216, .30); }
.my-apps__status.is-good     { color: #1d8a4e; background: rgba(29, 138, 78, .10); border: 1px solid rgba(29, 138, 78, .30); }
.my-apps__status.is-bad      { color: #8b1414; background: rgba(185, 28, 28, .08); border: 1px solid rgba(185, 28, 28, .30); }
.my-apps__status.is-muted    { color: var(--wo-text-muted); background: var(--wo-paper-2); border: 1px solid var(--wo-line); }
.my-apps__status.is-new .my-apps__status-dot      { animation: myAppsDot 1.8s ease-out infinite; }
.my-apps__status.is-progress .my-apps__status-dot { animation: myAppsDot 1.8s ease-out infinite; }
@keyframes myAppsDot {
    0%   { box-shadow: 0 0 0 0   currentColor; opacity: 1; }
    70%  { box-shadow: 0 0 0 8px transparent;  opacity: .65; }
    100% { box-shadow: 0 0 0 0   transparent;  opacity: 1; }
}
.my-apps__row-actions { display: flex; align-items: center; gap: .55rem; }
.my-apps__withdraw { color: #8b1414; text-decoration: underline; text-underline-offset: 3px; font-size: .82rem; padding: 0 .35rem; }
.my-apps__withdraw:hover { color: #6b0f0f; }

.my-apps__foot {
    margin-top: 2rem; padding: 1rem 1.2rem;
    background: var(--wo-paper);
    border-left: 3px solid #b95400;
    border-radius: 4px;
    color: var(--wo-ink-2); font-size: .9rem;
}
.my-apps__foot i { color: #b95400; margin-right: .35rem; }

/* Submitted page nav row */
.apply-done__nav {
    margin-top: 1.5rem;
    display: flex; align-items: center; gap: 1rem;
    flex-wrap: wrap; justify-content: center;
}

@media (max-width: 760px) {
    .my-apps__row { flex-direction: column; align-items: stretch; gap: .75rem; }
    .my-apps__row-side { flex-direction: row; justify-content: space-between; align-items: center; }
    .my-apps__head { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .my-apps__status .my-apps__status-dot { animation: none; }
}

/* ── CONFIRM-V1 (2026-05-31): GLOBAL WorkOfficially-themed dialog ───────── */

.wo-dialog {
    position: fixed; inset: 0;
    z-index: 10010;
}
.wo-dialog[hidden] { display: none !important; }
.wo-dialog__backdrop {
    position: absolute; inset: 0;
    background: rgba(38, 27, 16, .58);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .18s ease;
}
.wo-dialog__panel {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, calc(-50% - 12px)) scale(.97);
    width: min(440px, calc(100vw - 32px));
    background: linear-gradient(180deg, #fffaf0 0%, #f7ecd0 100%);
    border: 1px solid rgba(255, 153, 0, .35);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(38, 27, 16, .45),
                0 1px 0 rgba(255, 255, 255, .85) inset;
    opacity: 0;
    transition: opacity .22s cubic-bezier(.2,.7,.2,1),
                transform .22s cubic-bezier(.2,.7,.2,1);
    overflow: hidden;
}
.wo-dialog.is-open .wo-dialog__backdrop { opacity: 1; }
.wo-dialog.is-open .wo-dialog__panel    { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.wo-dialog__head {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1.3rem 1.4rem .9rem;
}
.wo-dialog__icon {
    flex-shrink: 0;
    width: 46px; height: 46px;
    background: linear-gradient(180deg, #ffd97a, #ffb340);
    color: #3a2400;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 4px 12px rgba(255, 153, 0, .3),
                0 1px 0 rgba(255, 255, 255, .55) inset;
}
.wo-dialog--danger .wo-dialog__icon {
    background: linear-gradient(180deg, #9a2a1d 0%, #7a1f15 100%);
    color: #fbf5e8;
    box-shadow: 0 4px 12px rgba(138, 38, 27, .35),
                0 1px 0 rgba(255, 255, 255, .14) inset;
}
.wo-dialog__head-text { flex: 1; min-width: 0; }
.wo-dialog__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--wo-ink);
    letter-spacing: -.01em;
    margin: 2px 0 .35rem;
}
.wo-dialog__message {
    margin: 0;
    color: var(--wo-ink-2);
    font-size: .94rem;
    line-height: 1.55;
    white-space: pre-line;
}
.wo-dialog__field {
    padding: 0 1.4rem .35rem;
}
.wo-dialog__input {
    width: 100%;
    font-family: var(--font-display);
    font-size: 1rem;
    padding: .7rem .85rem;
    background: #fff;
    border: 1px solid rgba(255, 153, 0, .35);
    border-radius: 10px;
    color: var(--wo-ink);
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.wo-dialog__input:focus {
    border-color: #b95400;
    box-shadow: 0 0 0 3px rgba(255, 153, 0, .18);
}
.wo-dialog__foot {
    display: flex; justify-content: flex-end; gap: .6rem;
    padding: 1rem 1.4rem 1.2rem;
}
.wo-dialog__btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .55rem 1.1rem;
    border-radius: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .12s ease, background .14s ease, box-shadow .22s ease, border-color .14s ease, color .14s ease;
}
.wo-dialog__btn:active { transform: scale(.97); }
.wo-dialog__btn--ghost {
    background: transparent;
    color: var(--wo-ink-2);
    border-color: rgba(38, 27, 16, .15);
}
.wo-dialog__btn--ghost:hover {
    color: var(--wo-ink);
    border-color: var(--wo-ink-2);
    background: rgba(255, 255, 255, .35);
}
.wo-dialog__btn--primary {
    background: #261b10;
    color: #ffd58a;
    border-color: #261b10;
    box-shadow: 0 4px 12px rgba(38, 27, 16, .22);
}
.wo-dialog__btn--primary:hover {
    background: #3a2a18;
    color: #ffd58a;
    box-shadow: 0 8px 22px rgba(38, 27, 16, .35),
                0 0 0 3px rgba(255, 153, 0, .18);
}
.wo-dialog__btn--danger {
    background: linear-gradient(180deg, #fbf5e8 0%, #f4ead1 100%);
    color: #8a261b;
    border-color: rgba(138, 38, 27, .40);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 2px 6px rgba(138, 38, 27, .10);
}
.wo-dialog__btn--danger:hover {
    background: linear-gradient(180deg, #fbf5e8 0%, #efdfb6 100%);
    color: #6e1a12;
    border-color: rgba(138, 38, 27, .70);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 8px 22px rgba(138, 38, 27, .18),
                0 0 0 3px rgba(255, 153, 0, .22);
}
.wo-dialog__btn--danger:active {
    background: linear-gradient(180deg, #9a2a1d 0%, #7a1f15 100%);
    color: #fbf5e8;
}

/* Lock the page underneath while the dialog is open. */
body.wo-dialog-open { overflow: hidden; }

@media (max-width: 480px) {
    .wo-dialog__panel { width: calc(100vw - 16px); border-radius: 14px; }
    .wo-dialog__head { padding: 1.1rem 1.2rem .7rem; }
    .wo-dialog__foot { padding: .85rem 1.2rem 1rem; flex-wrap: wrap; }
    .wo-dialog__btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .wo-dialog__backdrop, .wo-dialog__panel { transition: none; }
}

/* ── CAREERS-V4 (2026-05-31): tier ladder on /profile/edit ────────────────── */

.prof-tier-ladder {
    margin-top: .85rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(180deg, #fffaf0 0%, #fbf2e0 100%);
    border: 1px solid rgba(255, 153, 0, .28);
    border-radius: 12px;
}
.prof-tier-ladder__head {
    display: flex; align-items: baseline; gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .85rem;
}
.prof-tier-ladder__head strong {
    font-family: var(--font-display);
    font-weight: 700; font-size: 1rem;
    color: var(--wo-ink);
}
.prof-tier-ladder__head em {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #b95400;
    padding: 3px 8px;
    background: rgba(255, 153, 0, .12);
    border-radius: 999px;
    font-weight: 700;
}

.prof-tier-ladder__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .65rem;
}
.prof-tier {
    display: flex; flex-direction: column; gap: .35rem;
    padding: .75rem .85rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 10px;
    transition: transform .15s ease, border-color .15s ease;
}
.prof-tier:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 153, 0, .55);
}
.prof-tier__chip {
    display: inline-block;
    width: 28px; height: 28px;
    border-radius: 8px;
    margin-bottom: .15rem;
    position: relative;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
                0 2px 6px rgba(38, 27, 16, .12);
}
.prof-tier__chip::after {
    /* tiny "T" mark so the chip reads as a tee, not a swatch. */
    content: "T";
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .75rem;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 1px rgba(38, 27, 16, .25);
}
.prof-tier__chip--start { background: linear-gradient(160deg, #fbf5e8 0%, #e9dcb8 100%); }
.prof-tier__chip--start::after { color: #261b10; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.prof-tier__chip--gold  { background: linear-gradient(160deg, #ffd97a 0%, #ffb340 100%); }
.prof-tier__chip--gold::after { color: #3a2400; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }
.prof-tier__chip--prime { background: linear-gradient(160deg, #4a3622 0%, #261b10 100%); }
/* CAREERS-V4 polish: Expert Elite = rich burgundy with a subtle gold sheen
   and a thin gold trim. Reads as "premium" without going full black-gold. */
.prof-tier__chip--elite {
    background:
        radial-gradient(circle at 28% 28%, rgba(255, 213, 138, .28), transparent 60%),
        linear-gradient(160deg, #7a1a2e 0%, #4a0e1c 100%);
    border: 1px solid rgba(255, 213, 138, .55);
    box-shadow: 0 1px 0 rgba(255, 213, 138, .35) inset,
                0 2px 8px rgba(74, 14, 28, .35);
}
.prof-tier__chip--elite::after { color: #ffd58a; }
.prof-tier strong {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .88rem;
    color: var(--wo-ink);
    line-height: 1.2;
    /* CAREERS-V5: keep the tier name on one line at all desktop widths.
       Names compress to 13-14 chars so this fits the narrower 4-col layout. */
    white-space: nowrap;
}
.prof-tier em {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--wo-text-muted);
    letter-spacing: .04em;
    line-height: 1.4;
    display: flex; flex-direction: column;
    gap: 1px;
}
.prof-tier em .prof-tier__rank {
    color: var(--wo-ink-2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.prof-tier em .prof-tier__tee {
    color: var(--wo-text-muted);
    font-weight: 500;
}
.prof-tier-ladder__zero {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--wo-ink);
    letter-spacing: -.005em;
    margin-right: .4rem;
}
.prof-tier-ladder__foot {
    margin: .85rem 0 0;
    font-size: .82rem;
    color: var(--wo-ink-2);
    line-height: 1.5;
}

@media (max-width: 760px) {
    .prof-tier-ladder__row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
    .prof-tier-ladder__row { grid-template-columns: 1fr; }
}

/* ── CAREERS-V5 (2026-05-31): locked / unlocked profile head-shot field ──── */

.prof-avatar > span .prof-field__lock {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #b95400;
    background: rgba(255, 153, 0, .12);
    padding: 3px 8px;
    border-radius: 999px;
    margin-left: .55rem;
    font-weight: 700;
}
.prof-avatar > span .prof-field__lock i { margin-right: 3px; }

.prof-avatar__row {
    display: flex; align-items: center;
    gap: .65rem;
    padding: .75rem;
    background: var(--wo-card);
    border: 1px solid var(--wo-line);
    border-radius: 10px;
    flex-wrap: wrap;
}
.prof-avatar__upload {
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--font-display);
    font-weight: 700;
    border-width: 1.5px;
    flex-shrink: 0;
}
.prof-avatar__or {
    font-family: var(--font-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--wo-text-muted);
    font-weight: 700;
    padding: 0 .25rem;
}
.prof-avatar__url {
    flex: 1 1 240px;
    min-width: 0;
}

.prof-avatar__locked {
    display: flex; align-items: flex-start; gap: .85rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(180deg, #fffaf0 0%, #faecc5 100%);
    border: 1px solid rgba(255, 153, 0, .35);
    border-radius: 10px;
}
.prof-avatar__locked > i {
    color: #b95400;
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.prof-avatar__locked strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--wo-ink);
    margin-bottom: 2px;
}
.prof-avatar__locked div { color: var(--wo-ink-2); font-size: .92rem; line-height: 1.55; }
.prof-avatar__locked a {
    display: inline-block;
    margin-top: .35rem;
    color: #b95400;
    font-family: var(--font-mono);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.prof-avatar__locked a:hover { color: #8a3e00; }

/* ────────────────────────────────────────────────────────────────────────────
   CAREERS-V6 (2026-05-31) - Skills tag-input
   Cream chip with WRK-orange accent on hover, X removes. The whole wrap
   looks like one input field; the real <input> is borderless inside it.
   ──────────────────────────────────────────────────────────────────────────── */
.skill-tagger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid rgba(58, 36, 18, .18);
    border-radius: 10px;
    cursor: text;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.skill-tagger:focus-within {
    border-color: var(--wo-orange, #d65a13);
    box-shadow: 0 0 0 3px rgba(214, 90, 19, .12);
}
.skill-tagger__list {
    display: contents;
    margin: 0;
    padding: 0;
    list-style: none;
}
.skill-tagger__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 4px 5px 12px;
    background: linear-gradient(180deg, #fdf3e0 0%, #f6e6c4 100%);
    color: var(--wo-ink-1, #3a2412);
    border: 1px solid rgba(214, 90, 19, .28);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    transition: transform .14s ease, box-shadow .14s ease;
}
.skill-tagger__chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(58, 36, 18, .08);
}
.skill-tagger__x {
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(58, 36, 18, .55);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    transition: background-color .14s ease, color .14s ease;
}
.skill-tagger__x:hover {
    background: rgba(214, 90, 19, .15);
    color: var(--wo-orange, #d65a13);
}
.skill-tagger__x:focus-visible {
    outline: 2px solid var(--wo-orange, #d65a13);
    outline-offset: 1px;
}
.skill-tagger__entry {
    position: relative;
    flex: 1 1 160px;
    min-width: 140px;
    display: flex;
}
.skill-tagger__input {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 6px 4px;
    font-family: inherit;
    font-size: .95rem;
    color: var(--wo-ink-1, #3a2412);
}
.skill-tagger__input::placeholder {
    color: rgba(58, 36, 18, .42);
    font-style: italic;
}
.skill-tagger__input:disabled {
    color: rgba(58, 36, 18, .35);
    cursor: not-allowed;
}

/* ── CAREERS-V7 (2026-06-01) ── Autocomplete dropdown ────────
   Anchored to .skill-tagger__entry. Cream sheet with a thin
   gold rule under each item, WRK-orange highlight on hover/focus. */
.skill-tagger__suggest {
    position: absolute;
    z-index: 50;
    top: calc(100% + 6px);
    left: -8px;
    right: -8px;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #fffaf0;
    border: 1px solid rgba(58, 36, 18, .18);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(58, 36, 18, .14), 0 2px 6px rgba(58, 36, 18, .08);
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.skill-tagger__suggest[hidden] { display: none; }
.skill-tagger__opt {
    padding: 8px 12px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: .88rem;
    color: var(--wo-ink-1, #3a2412);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.skill-tagger__opt + .skill-tagger__opt {
    border-top: 1px solid rgba(214, 90, 19, .08);
    border-radius: 0;
}
.skill-tagger__opt:first-child,
.skill-tagger__opt.is-active {
    border-radius: 6px;
}
.skill-tagger__opt:hover,
.skill-tagger__opt.is-active {
    background: linear-gradient(180deg, #fdf3e0 0%, #f6e6c4 100%);
    color: var(--wo-ink-1, #3a2412);
}
.skill-tagger__opt mark {
    background: transparent;
    color: var(--wo-orange, #d65a13);
    font-weight: 700;
    padding: 0;
}

@media (max-width: 540px) {
    .skill-tagger { min-height: 56px; padding: 10px; }
    .skill-tagger__chip { font-size: .78rem; }
    .skill-tagger__input { font-size: 16px; /* iOS no-zoom */ }
    .skill-tagger__entry { flex-basis: 100%; }
    .skill-tagger__suggest { left: -10px; right: -10px; max-height: 240px; }
    .skill-tagger__opt { padding: 10px 12px; font-size: .82rem; }
}

@media (max-width: 640px) {
    .prof-tier strong { font-size: .82rem; white-space: normal; }
}

/* === END MOBILE-PASS-2026-05-30 ============================================= */