/* ============================================
   SPAAN NOW — Design System (mobile-first)
   ============================================ */
:root{
    --bg:#F6F7F9;
    --surface:#FFFFFF;
    --ink:#0E1116;
    --ink-2:#5A6472;
    --ink-3:#98A1AC;
    --line:rgba(14,17,22,.07);
    --accent:#0B8A5C;
    --accent-ink:#07revised;
    --accent-soft:#E4F4ED;
    --warn:#B45309;
    --warn-soft:#FEF3E2;
    --danger:#DC2626;
    --info-soft:#EAF0FE;
    --info:#2F5FE0;
    --r-lg:22px;
    --r-md:16px;
    --r-sm:12px;
    --shadow:0 1px 2px rgba(14,17,22,.04), 0 8px 24px rgba(14,17,22,.06);
    --shadow-lift:0 12px 32px rgba(14,17,22,.12);
    --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
    --safe-b:env(safe-area-inset-bottom,0px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--ink);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
img{max-width:100%;display:block}
svg{width:22px;height:22px}

.page{
  max-width:1200px;
    margin:0 auto;
    padding:calc(64px + 16px) 16px calc(96px + var(--safe-b));
}
.is-guest .page{padding-bottom:calc(88px + var(--safe-b))}
.page--has-actionbar{padding-bottom:calc(160px + var(--safe-b))}

/* ---------- Header ---------- */
.app-header{
    position:fixed;inset:0 0 auto;z-index:60;
    background:rgba(246,247,249,.82);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
}
.app-header__inner{
    max-width:520px;margin:0 auto;
    height:64px;padding:0 16px;
    display:flex;align-items:center;gap:12px;
}
.brand { display: flex; align-items: center; gap: 2px; font-weight: 800; letter-spacing: -.02em; }
.brand__mark {
    width: 32px; height: 32px; border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), #0FB578);
    color: #fff;
    display: grid; place-items: center;
    overflow: hidden;          /* keeps the logo inside the rounded square */
}
.brand__mark svg,
.brand__mark img { max-height: 22px; width: auto; display: block; }

/* Stacked wordmark */
.brand__name {
    display: flex;
    flex-direction: column;
    font-size: 12px;            /* each line is 13px so the block reads like 16px */
    font-weight: 800;
    line-height:11px;
}

.brand__name > span {
    color: inherit;
}
.brand__name > em {
    font-style: normal;
    color: var(--accent);
    font-size: 12px;          /* "NOW" sits a touch smaller */
}
.app-header__actions{margin-left:auto;display:flex;align-items:center;gap:8px}

.icon-btn{
    width:40px;height:40px;border-radius:12px;
    display:grid;place-items:center;color:var(--ink);
    transition:background .18s;position:relative;
}
.icon-btn:active{background:rgba(14,17,22,.06)}
.icon-btn--tint{background:var(--surface);box-shadow:var(--shadow)}
.icon-btn--dot .dot{
    position:absolute;top:9px;right:9px;
    width:8px;height:8px;border-radius:50%;
    background:var(--danger);border:2px solid var(--bg);
}
.menu-lines{display:flex;flex-direction:column;gap:5px;width:18px}
.menu-lines i{height:2px;border-radius:2px;background:var(--ink)}
.menu-lines i:last-child{width:70%}

/* ---------- Avatar ---------- */
.avatar{
    width:44px;height:44px;border-radius:50%;
    background:linear-gradient(135deg,#1B2B3A,#3B516B);
    color:#fff;display:grid;place-items:center;
    font-weight:700;font-size:14px;flex-shrink:0;
}
.avatar--sm{width:36px;height:36px;font-size:12px}
.avatar--xl{width:84px;height:84px;font-size:26px}

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-weight:700;border-radius:999px;
    padding:12px 22px;font-size:15px;
    transition:transform .15s, box-shadow .15s, background .15s;
    white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--ink);color:#fff;box-shadow:0 6px 18px rgba(14,17,22,.22)}
.btn--invert{background:#fff;color:var(--ink)}
.btn--ghost{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.btn--lg{padding:15px 26px;font-size:16px}
.btn--sm{padding:9px 16px;font-size:13.5px}
.btn--xs{padding:7px 13px;font-size:12.5px}
.btn--block{width:100%;margin-top:14px}

/* ---------- Pills / tags / chips ---------- */
.pill{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px}
.pill--success{background:var(--accent-soft);color:var(--accent)}
.pill--soft{background:rgba(14,17,22,.06);color:var(--ink-2)}
.pill--muted{background:rgba(14,17,22,.05);color:var(--ink-3)}
.pill--new{background:var(--info-soft);color:var(--info)}

.tag{
    font-size:10px;font-weight:600;color:var(--ink-2);
    background:rgba(14,17,22,.05);
    padding:5px 11px;border-radius:999px;
}
.tag--accent{background:var(--accent-soft);color:var(--accent)}

.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 14px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips--wrap{flex-wrap:wrap;overflow:visible}
.chip{
    flex-shrink:0;font-size:13px;font-weight:600;
    padding:9px 16px;border-radius:999px;
    background:var(--surface);color:var(--ink-2);
    box-shadow:var(--shadow);transition:all .15s;
}
.chip.is-active{background:var(--ink);color:#fff}

/* ---------- Sections ---------- */
.section{margin:34px 0}
.section--tint{
    background:var(--surface);border-radius:var(--r-lg);
    padding:24px 18px;box-shadow:var(--shadow);
}
.section__head{margin-bottom:16px}
.section__head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.section__head h2, .section h2{font-size:20px;letter-spacing:-.02em}
.eyebrow{
    font-size:12px;font-weight:800;text-transform:uppercase;
    letter-spacing:.08em;color:var(--accent);display:block;margin-bottom:4px;
}
.link-more{font-size:13.5px;font-weight:700;color:var(--accent)}

/* ---------- Hero (guest) ---------- */
.hero{padding:28px 4px 16px;text-align:left}
.hero__badge{
    display:inline-block;font-size:12.5px;font-weight:700;
    background:var(--surface);box-shadow:var(--shadow);
    padding:7px 14px;border-radius:999px;margin-bottom:18px;
}
.hero h1{
    font-size:clamp(34px,9vw,44px);
    line-height:1.08;letter-spacing:-.035em;font-weight:800;
}
.hero h1 em{
    font-style:normal;
    background:linear-gradient(90deg,var(--accent),#0FB578);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{margin:16px 0 22px;font-size:16px;color:var(--ink-2);max-width:34ch}
.hero__cta{display:flex;flex-direction:column;gap:10px}

.hero__card{
    margin-top:30px;background:var(--surface);
    border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-lift);
}
.hero__card-row{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.hero__card-row strong{display:block;font-size:14.5px}
.hero__card-row small{color:var(--ink-2);font-size:12.5px}
.hero__card-job{display:flex;align-items:center;gap:12px;padding-top:14px}
.hero__card-job strong{display:block;font-size:13.5px}
.hero__card-job small{color:var(--ink-2);font-size:12px}
.hero__card-job .pill{margin-left:auto}

.pulse-dot{
    width:12px;height:12px;border-radius:50%;background:var(--accent);
    flex-shrink:0;position:relative;
}
.pulse-dot::after{
    content:"";position:absolute;inset:-5px;border-radius:50%;
    background:var(--accent);opacity:.3;animation:pulse 1.8s infinite;
}
@keyframes pulse{
    0%{transform:scale(.7);opacity:.5}
    70%{transform:scale(1.5);opacity:0}
    100%{opacity:0}
}

/* ---------- Stats Section ---------- */
.stats-section {
    margin: 24px 0 32px;
}

.stats-section__header {
    text-align: center;
    margin-bottom: 20px;
}

.stats-section__title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink-1);
    margin: 0 0 4px;
}

.stats-section__subtitle {
    font-size: 13px;
    color: var(--ink-3);
    margin: 0;
}

/* ---------- Stats Grid ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.stat {
    background: var(--surface);
    padding: 16px 12px;
    text-align: center;
}

.stat__number {
    display: block;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink-1);
    line-height: 1.1;
    margin-bottom: 2px;
}

.stat__label {
    font-size: 10px;
    font-weight: 500;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .stats-section {
        margin: 20px 0 28px;
    }

    .stats-section__title {
        font-size: 19px;
    }

    .stats-section__subtitle {
        font-size: 12px;
    }

    .stat__number {
        font-size: 20px;
    }

    .stat__label {
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        border-radius: 10px;
    }

    .stat {
        padding: 12px 8px;
    }

    .stat__number {
        font-size: 17px;
    }

    .stat__label {
        font-size: 8px;
        letter-spacing: 0.03em;
    }
}

/* ---------- Steps ---------- */
.steps {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media (min-width: 768px) {
    .steps {
        flex-direction: row;
        gap: 20px;
    }
    
    .steps li {
        flex: 1;
    }
}

.steps__item {
    display: flex;
    gap: 16px;
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: 20px;
    box-shadow: var(--shadow);
}

.steps__num {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 16px;
}

.steps__item h3 {
    font-size: 16px;
    margin-bottom: 4px;
}

.steps__item p {
    font-size: 13.5px;
    color: var(--ink-2);
}
/* ---------- Tips ---------- */
.tips{display:flex;flex-direction:column;gap:12px}
.tip-card{
    background:var(--surface);border-radius:var(--r-lg);
    padding:20px;box-shadow:var(--shadow);
}
.tip-card__icon{font-size:26px;display:inline-block;margin-bottom:10px}
.tip-card h3{font-size:16px;margin-bottom:4px}
.tip-card p{font-size:13.5px;color:var(--ink-2)}

/* ---------- Final CTA ---------- */
.cta-final{
    background:linear-gradient(135deg,#0E1116,#22303F);
    border-radius:var(--r-lg);color:#fff;
    padding:36px 24px;text-align:center;margin:34px 0;
}
.cta-final h2{font-size:24px;letter-spacing:-.02em}
.cta-final p{opacity:.7;margin:8px 0 20px}

/* ---------- Guest footer ---------- */
.guest-footer{
    position:fixed;inset:auto 0 0;z-index:60;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-top:1px solid var(--line);
    padding:12px 16px calc(12px + var(--safe-b));
    display:flex;gap:10px;
}
.guest-footer .btn{flex:1}
/* ================================================================
   Bottom nav (app) + "More" drawer
   Replaces your existing "Bottom nav (app)" CSS block in full.
   ================================================================ */

.bottom-nav,
.bottom-nav * {
    box-sizing: border-box;
}

/* The floating shell. It holds the drawer (top) and the bar (bottom),
   so opening "More" makes the bar itself grow upwards. */
.bottom-nav {
    --bn-ease: cubic-bezier(.32, .72, 0, 1);   /* iOS-style sheet curve */
    --bn-dur: .52s;

    position: fixed;
    left: 50%;
    bottom: calc(10px + var(--safe-b, 0px));
    transform: translateX(-50%);
    width: calc(100% - 20px);
    max-width: 520px;
    z-index: 60;

    display: flex;
    flex-direction: column;
    padding: 6px;

    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);

    border: 1px solid rgba(16, 24, 20, .07);
    border-radius: 22px;

    box-shadow:
        0 12px 32px -12px rgba(16, 24, 20, .28),
        0 2px 6px rgba(16, 24, 20, .05);

    transition: border-radius var(--bn-dur) var(--bn-ease), box-shadow var(--bn-dur) var(--bn-ease), background .3s;
}

.bottom-nav.is-open {
    border-radius: 28px;
    background: rgba(255, 255, 255, .97);
    box-shadow:
        0 30px 70px -20px rgba(16, 24, 20, .45),
        0 2px 8px rgba(16, 24, 20, .06);
}

.bottom-nav__bar {
    display: flex;
    align-items: center;
}

/* ---------- Bar items ---------- */
.bottom-nav__item {
    position: relative;
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;

    padding: 6px 2px 5px;

    border: 0;
    border-radius: 16px;
    background: none;

    color: #7D8883;
    font: inherit;
    font-size: 10.5px;
    font-weight: 650;
    line-height: 1.2;

    text-decoration: none;
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
    transition: color .2s, background .2s;
}

.bottom-nav__item:active { transform: none; }

.bottom-nav__item > svg {
    width: 21px;
    height: 21px;
    transition: transform .12s;
}

.bottom-nav__item:active > svg { transform: scale(.92); }

.bottom-nav__item span:not(.fab):not(.bnav-more-pill):not(.bnav-more-ico) {
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bottom-nav__item.is-active { color: #0B8A5C; }

.bottom-nav__item.is-active > svg {
    width: 46px;
    height: 28px;
    padding: 3.5px 12.5px;
    border-radius: 999px;
    background: #E3F2EA;
    box-sizing: content-box;
}

/* While the drawer is open, the bar's other active pills step back
   so the eye goes to "Close". */
.bottom-nav.is-open .bottom-nav__item:not(.bottom-nav__item--more).is-active { color: #7D8883; }
.bottom-nav.is-open .bottom-nav__item:not(.bottom-nav__item--more).is-active > svg { background: transparent; }

/* ---------- Centre Auto Apply action ---------- */
/* ---------- Centre Auto Apply action ---------- */
.bottom-nav__item--fab { padding-top: 0; padding-bottom: 0; }
.bottom-nav__item--fab:hover,
.bottom-nav__item--fab:active { background: none; }

.bottom-nav__item--fab .fab {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin: -12px 0 2px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0B8A5C, #0FB578);
    color: #fff;
    box-shadow:
        0 8px 20px rgba(11, 138, 92, .28),
        0 0 0 5px rgba(255, 255, 255, .92);
    transition: transform .15s, box-shadow .15s;
}

.bottom-nav.is-open .bottom-nav__item--fab .fab { margin-top: 0; box-shadow: 0 6px 16px rgba(11, 138, 92, .25); }
.bottom-nav__item--fab:active .fab { transform: scale(.92); }
.bottom-nav__item--fab .fab svg { width: 22px; height: 22px; }

/* ---------- Secondary "guest" Auto Apply action (login prompt) ---------- */
.bottom-nav__item--fab-2 { padding-top: 0; padding-bottom: 0; }
.bottom-nav__item--fab-2:hover,
.bottom-nav__item--fab-2:active { background: none; }

.bottom-nav__item--fab-2 .fab {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin: -12px 0 2px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1B2B3A, #2d4358);   /* neutral slate — signals "not ready to act" */
    color: #fff;
    box-shadow:
        0 8px 20px rgba(27, 43, 58, .28),
        0 0 0 5px rgba(255, 255, 255, .92);
    transition: transform .15s, box-shadow .15s, background .2s;
}

.bottom-nav__item--fab-2:hover .fab { background: linear-gradient(135deg, #22384a, #35506a); }
.bottom-nav__item--fab-2:active .fab { transform: scale(.92); }
.bottom-nav__item--fab-2 .fab svg { width: 22px; height: 22px; }

/* Same seated position as the primary FAB when the bottom nav is expanded */
.bottom-nav.is-open .bottom-nav__item--fab-2 .fab {
    margin-top: 0;
    box-shadow: 0 6px 16px rgba(27, 43, 58, .25);
}

/* ---------- "More" button: 4 dots that morph into an X ---------- */
.bnav-more-pill {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 999px;
    transition: width .35s var(--bn-ease), height .35s var(--bn-ease), background .25s;
}

.bottom-nav__item--more.is-active .bnav-more-pill,
.bottom-nav.is-open .bnav-more-pill {
    width: 71px;
    height: 35px;
    background: #E3F2EA;
}

.bottom-nav.is-open .bottom-nav__item--more { color: #0B8A5C; }

.bnav-more-ico {
    position: relative;
    display: block;
    width: 19px;
    height: 19px;
}

.bnav-more-ico i {
    position: absolute;
    width: 7.5px;
    height: 7.5px;
    border: 1.8px solid currentColor;
    border-radius: 2.6px;
    transition: all .38s var(--bn-ease);
}

.bnav-more-ico i:nth-child(1) { left: 0;  top: 0; }
.bnav-more-ico i:nth-child(2) { right: 0; top: 0; }
.bnav-more-ico i:nth-child(3) { left: 0;  bottom: 0; }
.bnav-more-ico i:nth-child(4) { right: 0; bottom: 0; }

.bottom-nav.is-open .bnav-more-ico i:nth-child(1),
.bottom-nav.is-open .bnav-more-ico i:nth-child(2) {
    left: 0;
    right: auto;
    top: 8.6px;
    width: 19px;
    height: 1.9px;
    border: 0;
    border-radius: 2px;
    background: currentColor;
}

.bottom-nav.is-open .bnav-more-ico i:nth-child(1) { transform: rotate(45deg); }
.bottom-nav.is-open .bnav-more-ico i:nth-child(2) { transform: rotate(-45deg); }

.bottom-nav.is-open .bnav-more-ico i:nth-child(3),
.bottom-nav.is-open .bnav-more-ico i:nth-child(4) {
    opacity: 0;
    transform: scale(.2);
}

/* ---------- Drawer: height animates 0 → content (grid-rows trick) ---------- */
.bottom-nav__drawer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--bn-dur) var(--bn-ease);
}

.bottom-nav.is-open .bottom-nav__drawer { grid-template-rows: 1fr; }

.bottom-nav__drawer-inner {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(18px) scale(.985);
    transform-origin: 50% 100%;
    transition: opacity .22s ease, transform var(--bn-dur) var(--bn-ease);
}

.bottom-nav.is-open .bottom-nav__drawer-inner {
    opacity: 1;
    transform: translateY(var(--drag, 0px));
    transition: opacity .3s ease .06s, transform var(--bn-dur) var(--bn-ease);
}

.bottom-nav.is-dragging .bottom-nav__drawer-inner { transition: none; }

/* Header */
.bnav-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 8px 8px 12px;
    touch-action: none;
    cursor: grab;
}

.bnav-head__grip {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 38px;
    height: 4.5px;
    margin-left: -19px;
    border-radius: 999px;
    background: #D5DDD9;
}

.bnav-head__title {
    flex: 1;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #101814;
}

.bnav-head__min {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #F1F4F2;
    color: #46564F;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s, color .2s, transform .15s;
}

.bnav-head__min:hover { background: #E3F2EA; color: #0B8A5C; }
.bnav-head__min:active { transform: scale(.9); }
.bnav-head__min svg { width: 18px; height: 18px; }

/* Scroll area */
.bnav-scroll {
    max-height: min(62vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 6px 10px;
    mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
}

.bnav-scroll::-webkit-scrollbar { display: none; }

.bnav-group + .bnav-group { margin-top: 14px; }

.bnav-group__label {
    margin: 6px 6px 8px;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8A9590;
}

.bnav-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}

/* Tiles */
.bnav-tile {
    --t: #0B8A5C;
    --ts: #E3F2EA;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 9px 0 8px;
    border-radius: 16px;
    color: #2E3A35;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;

    /* stagger in */
    opacity: 0;
    transform: translateY(10px) scale(.96);
    transition: opacity .18s ease, transform .3s var(--bn-ease), background .15s;
}

.bottom-nav.is-open .bnav-tile {
    opacity: 1;
    transform: none;
    transition:
        opacity .35s ease calc(var(--i) * 12ms + 90ms),
        transform .5s var(--bn-ease) calc(var(--i) * 12ms + 90ms),
        background .15s;
}

.bnav-tile:hover { background: #F6F8F7; }
.bnav-tile:active .bnav-tile__ico { transform: scale(.9); }

.bnav-tile__ico {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: var(--ts);
    color: var(--t);
    transition: transform .15s var(--bn-ease), box-shadow .2s;
}

.bnav-tile__ico svg { width: 22px; height: 22px; }

.bnav-tile__ico b {
    position: absolute;
    top: -5px;
    right: -9px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #DD5A2B;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 0 0 2px #fff;
}

.bnav-tile__label {
    max-width: 100%;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bnav-tile.is-active .bnav-tile__ico { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--t); }
.bnav-tile.is-active .bnav-tile__label { color: var(--t); font-weight: 750; }

.bnav-tile.is-green  { --t: #0B8A5C; --ts: #E3F2EA; }
.bnav-tile.is-cyan   { --t: #0E7490; --ts: #E3F5FA; }
.bnav-tile.is-slate  { --t: #475569; --ts: #EEF1F4; }
.bnav-tile.is-amber  { --t: #A86308; --ts: #FDF1DE; }
.bnav-tile.is-blue   { --t: #2F57C4; --ts: #EAF0FD; }
.bnav-tile.is-violet { --t: #6D3FC8; --ts: #F1EBFE; }
.bnav-tile.is-red    { --t: #C2362B; --ts: #FDECEA; }
.bnav-tile.is-orange { --t: #C2410C; --ts: #FDEDE3; }

/* Sign out */
.bnav-signout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 2px 2px;
    min-height: 46px;
    border-radius: 14px;
    background: #FDF1F0;
    color: #C2362B;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    opacity: 0;
    transition: opacity .18s ease, background .15s;
}

.bottom-nav.is-open .bnav-signout { opacity: 1; transition: opacity .35s ease calc(var(--i) * 12ms + 90ms), background .15s; }
.bnav-signout:hover { background: #FBE4E2; }
.bnav-signout svg { width: 18px; height: 18px; }

/* ---------- Scrim behind the open drawer ---------- */
.bnav-scrim {
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(9, 20, 16, .38);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s cubic-bezier(.32, .72, 0, 1);
}

.bnav-scrim.is-visible { opacity: 1; pointer-events: auto; }

/* Page behind doesn't scroll while the drawer is open */
html.bnav-lock,
html.bnav-lock body { overflow: hidden; }

/* ---------- Keyboard accessibility ---------- */
.bottom-nav__item:focus-visible,
.bnav-tile:focus-visible,
.bnav-head__min:focus-visible,
.bnav-signout:focus-visible {
    outline: 2px solid #0B8A5C;
    outline-offset: 1px;
}

/* ---------- Safe area ---------- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-nav { bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* ---------- Small phones ---------- */
@media (max-width: 360px) {
    .bnav-tile__ico { width: 44px; height: 44px; border-radius: 14px; }
    .bnav-tile__label { font-size: 11px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .bottom-nav,
    .bottom-nav *,
    .bottom-nav__item,
    .bottom-nav__item svg,
    .bottom-nav__item--fab .fab,
    .bnav-scrim {
        transition: none !important;
    }
}
/* ---------- Sidebar ---------- */
.sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:80;
    width:min(84vw,340px);
    background:var(--surface);
    box-shadow:var(--shadow-lift);
    transform:translateX(-105%);
    transition:transform .32s cubic-bezier(.32,.72,.24,1);
    display:flex;flex-direction:column;
    padding:20px 18px calc(18px + var(--safe-b));
    border-radius:0 26px 26px 0;
    overflow-y:auto;
}
.sidebar.is-open{transform:translateX(0)}
.sidebar__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.sidebar__user{display:flex;align-items:center;gap:12px}
.sidebar__user strong{display:block;font-size:15px}
.sidebar__user small{color:var(--ink-2);font-size:12px}

.sidebar__auto{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    background:var(--accent-soft);border-radius:var(--r-md);
    padding:14px 16px;margin-bottom:20px;
}
.sidebar__auto strong{display:block;font-size:14px;color:var(--accent)}
.sidebar__auto small{font-size:11.5px;color:var(--ink-2)}

.sidebar__nav{display:flex;flex-direction:column;gap:2px;flex:1}
.sidebar__label{
    font-size:11px;font-weight:800;text-transform:uppercase;
    letter-spacing:.08em;color:var(--ink-3);
    margin:14px 0 6px;padding:0 10px;
}
.sidebar__link{
    display:flex;align-items:center;gap:14px;
    padding:12px 10px;border-radius:var(--r-sm);
    font-weight:600;font-size:14.5px;color:var(--ink-2);
    transition:background .15s,color .15s;
}
.sidebar__link svg{width:21px;height:21px;flex-shrink:0}
.sidebar__link:active,.sidebar__link.is-active{background:var(--bg);color:var(--ink)}
.sidebar__link .pill{margin-left:auto}
.sidebar__link--danger{color:var(--danger)}
.sidebar__foot{font-size:11.5px;color:var(--ink-3);text-align:center;padding-top:16px}

.scrim{
    position:fixed;inset:0;z-index:70;background:rgba(14,17,22,.4);
    opacity:0;pointer-events:none;transition:opacity .28s;
}
.scrim.is-visible{opacity:1;pointer-events:auto}

/* ---------- Switch ---------- */
.switch{position:relative;display:inline-block;flex-shrink:0}
.switch input{position:absolute;opacity:0;inset:0;z-index:1;cursor:pointer;margin:0}
.switch__track{
    display:block;width:48px;height:29px;border-radius:999px;
    background:rgba(14,17,22,.14);transition:background .2s;position:relative;
}
.switch__track::after{
    content:"";position:absolute;top:2.5px;left:3px;
    width:24px;height:24px;border-radius:50%;background:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,.2);
    transition:transform .22s cubic-bezier(.32,.72,.24,1);
}
.switch input:checked + .switch__track{background:var(--accent)}
.switch input:checked + .switch__track::after{transform:translateX(18px)}
.switch--lg .switch__track{width:54px;height:32px}
.switch--lg .switch__track::after{width:27px;height:27px}
.switch--lg input:checked + .switch__track::after{transform:translateX(21px)}

/* ---------- Job card ---------- */
.job-list{display:flex;flex-direction:column;gap:12px}
.job-card{
    background:var(--surface);border-radius:var(--r-lg);
    padding:18px;box-shadow:var(--shadow);
    transition:transform .15s;display:block;
}
.job-card:active{transform:scale(.985)}
.job-card__top{display:flex;gap:13px;align-items:center}
.job-card__titles{flex:1;min-width:0}
.job-card__titles h3{font-size:15.5px;letter-spacing:-.01em}
.job-card__titles p{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.job-card__time{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-weight:600}
.job-card__applied{
    display:flex;align-items:center;gap:7px;margin-top:12px;
    padding-top:12px;border-top:1px solid var(--line);
    font-size:12.5px;font-weight:700;color:var(--accent);
}
.job-card__applied svg{width:16px;height:16px}

.logo-chip{
    width:46px;height:46px;border-radius:14px;flex-shrink:0;
    background:var(--bg);display:grid;place-items:center;
    font-weight:800;font-size:14px;color:var(--ink-2);
    border:1px solid var(--line);
}
.logo-chip--sm{width:38px;height:38px;font-size:12px}
.logo-chip--lg{width:64px;height:64px;font-size:19px;border-radius:18px}

.match-ring{
    width:46px;height:46px;border-radius:50%;flex-shrink:0;
    background:conic-gradient(var(--accent) calc(var(--match)*1%), rgba(14,17,22,.07) 0);
    display:grid;place-items:center;
}
.match-ring b{
    width:36px;height:36px;border-radius:50%;background:var(--surface);
    display:grid;place-items:center;font-size:10.5px;font-weight:800;color:var(--accent);
}

/* ---------- Job card meta row ---------- */
.job-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;               /* Firefox */
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
}
.job-card__meta::-webkit-scrollbar { display: none; }

/* Tags never shrink; the row scrolls instead of wrapping */
.job-card__meta .tag {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Time sits at the end of the row */
.job-card__time {
    flex: 0 0 auto;
}

/* ---------- Mobile: same horizontal scroll, smaller chips ---------- */
@media (max-width: 768px) {
    .job-card__meta {
        gap: 6px;
        margin-top: 10px;
    }

    .job-card__meta .tag {
        font-size: 10px;
        padding: 3px 10px;
    }

    .job-card__time {
        font-size: 10px;
    }
}


/* ---------- Lobby ---------- */
.greet{padding:6px 4px 18px}
.greet h1{font-size:24px;letter-spacing:-.025em}
.greet p{color:var(--ink-2);font-size:14px;margin-top:3px}

.auto-widget{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    background:linear-gradient(135deg,#0E1116,#1E3A2F);
    color:#fff;border-radius:var(--r-lg);
    padding:18px 20px;box-shadow:var(--shadow-lift);
}
.auto-widget__info{display:flex;align-items:center;gap:13px}
.auto-widget strong{display:block;font-size:15.5px}
.auto-widget small{opacity:.65;font-size:12.5px}

.widgets{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:16px 0}
.widget{
    background:var(--surface);border-radius:var(--r-md);
    padding:14px 6px;text-align:center;box-shadow:var(--shadow);
    transition:transform .15s;
}
.widget:active{transform:scale(.95)}
.widget strong{display:block;font-size:18px;letter-spacing:-.02em}
.widget span{font-size:10.5px;color:var(--ink-2);font-weight:700}
.widget--accent{background:var(--accent-soft)}
.widget--accent strong{color:var(--accent)}

.shortcuts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.shortcut{
    display:flex;align-items:center;gap:10px;
    background:var(--surface);border-radius:var(--r-md);
    padding:14px 15px;font-size:13.5px;font-weight:700;
    box-shadow:var(--shadow);transition:transform .15s;
}
.shortcut:active{transform:scale(.97)}
.shortcut__icon{font-size:19px}

/* ---------- Alerts ---------- */
.alerts{display:flex;flex-direction:column;gap:10px}
.alert{
    display:flex;align-items:center;gap:13px;
    background:var(--surface);border-radius:var(--r-md);
    padding:14px 16px;box-shadow:var(--shadow);
}
.alert strong{display:block;font-size:13.5px}
.alert small{font-size:12px;color:var(--ink-2)}
.alert__icon{
    width:38px;height:38px;border-radius:12px;flex-shrink:0;
    display:grid;place-items:center;font-weight:800;font-size:15px;
}
.alert__icon--success{background:var(--accent-soft);color:var(--accent)}
.alert__icon--warn{background:var(--warn-soft);color:var(--warn)}
.alert__icon--info{background:var(--info-soft);color:var(--info)}
.chev{margin-left:auto;color:var(--ink-3);font-size:20px;font-weight:600}

/* ---------- Page head / search ---------- */
.page-head{padding:6px 4px 16px}
.page-head h1{font-size:26px;letter-spacing:-.03em}
.page-head p{color:var(--ink-2);font-size:14px}

.search{
    display:flex;align-items:center;gap:10px;
    background:var(--surface);border-radius:16px;
    padding:6px 6px 6px 16px;box-shadow:var(--shadow);margin-bottom:12px;
}
.search svg{width:19px;height:19px;color:var(--ink-3);flex-shrink:0}
.search input{flex:1;border:0;outline:0;font:inherit;font-size:15px;background:none;min-width:0}
.search input::placeholder{color:var(--ink-3)}

/* ---------- Cards (job single) ---------- */
.card{
    background:var(--surface);border-radius:var(--r-lg);
    padding:20px;box-shadow:var(--shadow);margin-bottom:14px;
}
.card__title{font-size:16.5px;margin-bottom:10px;letter-spacing:-.01em}
.card__sub{font-size:14px;margin:16px 0 8px}
.card__text{font-size:14px;color:var(--ink-2)}
.card--row{display:flex;align-items:center;gap:14px;margin:16px 0}
.card--row__body{flex:1}
.card--row strong{display:block;font-size:14.5px}
.card--row small{font-size:12px;color:var(--ink-2)}

.check-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.check-list li{
    font-size:13.5px;color:var(--ink-2);
    padding-left:26px;position:relative;
}
.check-list li::before{
    content:"✓";position:absolute;left:0;top:0;
    color:var(--accent);font-weight:800;
}

.mini-steps{list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:10px}
.mini-steps li{
    counter-increment:step;font-size:13.5px;color:var(--ink-2);
    padding-left:34px;position:relative;
}
.mini-steps li::before{
    content:counter(step);
    position:absolute;left:0;top:-1px;
    width:24px;height:24px;border-radius:8px;
    background:var(--bg);color:var(--ink);
    display:grid;place-items:center;font-size:12px;font-weight:800;
}

/* ---------- Job hero ---------- */
.job-hero{
    background:var(--surface);border-radius:var(--r-lg);
    padding:26px 20px;box-shadow:var(--shadow);
    text-align:center;margin-bottom:14px;
}
.job-hero .logo-chip--lg{margin:0 auto 14px}
.job-hero h1{font-size:22px;letter-spacing:-.02em}
.job-hero p{color:var(--ink-2);font-size:14px;margin-top:4px}
.job-hero__tags{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.job-hero__deadline{
    display:inline-flex;align-items:center;gap:8px;margin-top:16px;
    font-size:13px;color:var(--warn);font-weight:600;
    background:var(--warn-soft);padding:8px 16px;border-radius:999px;
}
.job-hero__deadline svg{width:16px;height:16px}

/* ---------- Doc list ---------- */
.doc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.doc-list__item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    background: var(--bg);
}

.doc-list__item strong {
    display: block;
    font-size: 13.5px;
}

.doc-list__item small {
    font-size: 11.5px;
    color: var(--ink-2);
}

.doc-list__status {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
}

.is-ready .doc-list__status {
    background: var(--accent-soft);
    color: var(--accent);
}

.is-auto .doc-list__status {
    background: var(--info-soft);
    color: var(--info);
}

.is-missing .doc-list__status {
    background: var(--warn-soft);
    color: var(--warn);
}

.is-missing {
    border: 1px dashed rgba(180, 83, 9, 0.35);
}

/* ---------- Desktop: 3 per row ---------- */
@media (min-width: 768px) {
    .doc-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }

    .doc-list__item {
        flex: 0 0 calc(33.333% - 12px);
        /* 3 columns with gap accounted for */
        flex-direction: column;
        text-align: center;
        padding: 20px 16px;
        border-radius: var(--r-md);
        gap: 10px;
    }

    .doc-list__item strong {
        font-size: 14px;
    }

    .doc-list__item small {
        font-size: 12px;
    }

    .doc-list__status {
        width: 40px;
        height: 40px;
        font-size: 16px;
        border-radius: 12px;
    }
}

/* ---------- Tablet: 2 per row ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
    .doc-list__item {
        flex: 0 0 calc(50% - 8px);
    }
}

/* ---------- Large desktop: 3 per row with more spacing ---------- */
@media (min-width: 1200px) {
    .doc-list {
        gap: 20px;
    }

    .doc-list__item {
        flex: 0 0 calc(33.333% - 14px);
        padding: 24px 20px;
    }
}
/* ---------- Action bar / sheet ---------- */
.action-bar{
    position:fixed;inset:auto 0 0;z-index:60;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-top:1px solid var(--line);
    padding:12px 16px calc(12px + var(--safe-b));
    display:flex;gap:10px;align-items:center;
    max-width:520px;margin:0 auto;left:0;right:0;
}
.action-bar .btn--block{margin-top:0}

.sheet{
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    max-width:520px;margin:0 auto;
    background:var(--surface);
    border-radius:26px 26px 0 0;
    padding:12px 20px calc(22px + var(--safe-b));
    transform:translateY(110%);
    transition:transform .34s cubic-bezier(.32,.72,.24,1);
    box-shadow:var(--shadow-lift);
    max-height:86vh;overflow-y:auto;
}
.sheet.is-open{transform:translateY(0)}
.sheet__handle{
    width:40px;height:5px;border-radius:99px;
    background:rgba(14,17,22,.14);margin:0 auto 16px;
}
.sheet__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sheet__head h2{font-size:19px;letter-spacing:-.02em}
.sheet__desc{font-size:13.5px;color:var(--ink-2);margin-bottom:16px}
.sheet__group{margin-bottom:16px}
.sheet__label{
    display:block;font-size:12px;font-weight:800;text-transform:uppercase;
    letter-spacing:.07em;color:var(--ink-3);margin-bottom:9px;
}
.sheet__note{
    background:var(--bg);border-radius:var(--r-sm);
    padding:14px;font-size:12.5px;color:var(--ink-2);margin:16px 0 6px;
}

/* ---------- Applications ---------- */
.app-list{display:flex;flex-direction:column;gap:12px}
.app-card{
    background:var(--surface);border-radius:var(--r-lg);
    padding:18px;box-shadow:var(--shadow);display:block;
    transition:transform .15s;
}
.app-card:active{transform:scale(.985)}
.app-card.is-closed{opacity:.6}
.app-card__top{display:flex;align-items:center;gap:13px}
.app-card__titles{flex:1;min-width:0}
.app-card__titles h3{font-size:15.5px}
.app-card__titles p{font-size:12.5px;color:var(--ink-2)}
.app-card__timeline{
    display:flex;gap:6px;margin-top:15px;
}
.tstep{
    flex:1;text-align:center;font-size:10px;font-weight:700;
    color:var(--ink-3);padding-top:10px;position:relative;
}
.tstep::before{
    content:"";position:absolute;top:0;left:0;right:0;
    height:4px;border-radius:99px;background:rgba(14,17,22,.08);
}
.tstep.is-done{color:var(--ink-2)}
.tstep.is-done::before{background:var(--accent)}
.tstep.is-current{color:var(--accent)}
.app-card__foot{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
}
.app-card__foot small{font-size:12px;color:var(--ink-2)}

/* ---------- Profile ---------- */
.profile-head{text-align:center;padding:14px 0 20px}
.profile-head .avatar--xl{margin:0 auto 14px}
.profile-head h1{font-size:22px;letter-spacing:-.02em}
.profile-head p{color:var(--ink-2);font-size:14px}
.profile-head__score{margin-top:16px}
.score-bar{
    height:8px;border-radius:99px;background:rgba(14,17,22,.08);
    overflow:hidden;max-width:280px;margin:0 auto 8px;
}
.score-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#0FB578)}
.profile-head__score small{font-size:12.5px;color:var(--ink-2)}

.settings{margin-top:8px}
.settings__label{
    display:block;font-size:12px;font-weight:800;text-transform:uppercase;
    letter-spacing:.07em;color:var(--ink-3);margin:22px 0 8px;padding:0 6px;
}
.settings__group{
    background:var(--surface);border-radius:var(--r-lg);
    box-shadow:var(--shadow);overflow:hidden;
}
.settings__row{
    display:flex;align-items:center;gap:10px;
    padding:15px 18px;font-size:14.5px;font-weight:600;
    border-bottom:1px solid var(--line);
}
.settings__row:last-child{border-bottom:0}
.settings__row small{margin-left:auto;font-size:12.5px;color:var(--ink-3);font-weight:600}
.settings__row .switch{margin-left:auto}
.settings__row .chev{margin-left:0}
.settings__row small + .chev{margin-left:6px}
.settings__row--danger{color:var(--danger)}
.txt-warn{color:var(--warn) !important}

/* ---------- Larger screens ---------- */
@media (min-width:480px){
    .hero__cta{flex-direction:row}
    .tips{display:grid;grid-template-columns:repeat(3,1fr)}
}
/* ============================================
   SPAAN RADAR — premium sheet
   Drop-in replacement for the "SPAAN RADAR" section of spaan.css.
   Same class names / IDs as before; uses your theme variables with
   safe fallbacks.
   ============================================ */

/* ---------- Sheet shell ---------- */
.spaan-sheet{
    --sp-accent: var(--accent, #0B8A5C);
    --sp-mint: #2FE49B;
    --sp-ink: var(--ink, #0E1116);
    --sp-ink-2: var(--ink-2, #5A6470);
    --sp-ink-3: var(--ink-3, #8A939E);
    --sp-line: var(--line, #E8ECEF);
    --sp-surface: var(--surface, #fff);
    --sp-danger: var(--danger, #E5484D);
    --sp-warn: var(--warn, #B76E00);
    --sp-warn-soft: var(--warn-soft, #FFF4E0);
    --sp-info: var(--info, #3B82F6);
    --sp-ease: cubic-bezier(.22,1,.36,1);

    position:fixed;left:0;right:0;bottom:0;z-index:90;
    max-width:520px;margin:0 auto;
    background:var(--sp-surface);
    border-radius:30px 30px 0 0;
    padding:8px 18px calc(20px + var(--safe-b, env(safe-area-inset-bottom, 0px)));
    transform:translateY(110%);
    transition:transform .5s var(--sp-ease);
    box-shadow:0 -24px 60px -20px rgba(6,16,12,.35), 0 -1px 0 rgba(255,255,255,.6) inset;
    max-height:94vh;max-height:94dvh;overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
}
.spaan-sheet::-webkit-scrollbar{display:none}
.spaan-sheet.is-open{transform:translateY(0)}
.spaan-sheet.is-dragging{transition:none}

/* Grab handle bar (newer markup) — and a handle for the older one */
.spaan-panel__bar{
    position:sticky;top:-8px;z-index:3;
    display:flex;align-items:center;justify-content:center;
    height:30px;margin:-8px -18px 4px;cursor:grab;
    background:linear-gradient(var(--surface) 65%, transparent);
}
.spaan-panel__bar::before,
.spaan-sheet:not(:has(.spaan-panel__bar))::before{
    content:"";display:block;width:40px;height:5px;border-radius:5px;background:rgba(14,17,22,.14);
}
.spaan-sheet:not(:has(.spaan-panel__bar))::before{margin:2px auto 8px}
#spaanClose{
    position:absolute;right:14px;top:10px;z-index:4;
    width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
    display:grid;place-items:center;background:rgba(14,17,22,.06);color:var(--sp-ink-2);
    transition:background .2s, transform .15s;
}
#spaanClose:hover{background:rgba(14,17,22,.1)}
#spaanClose:active{transform:scale(.92)}

/* Phases slide + fade */
.spaan-phase{display:none}
.spaan-phase.is-active{display:block;animation:spPhaseIn .5s var(--sp-ease) both}
@keyframes spPhaseIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}

/* ============ Phase 1: setup ============ */
.spaan-head{text-align:center;padding:10px 0 22px}
.spaan-head__icon{
    position:relative;display:inline-grid;place-items:center;
    width:60px;height:60px;border-radius:20px;font-size:27px;margin-bottom:12px;
    background:radial-gradient(120% 120% at 30% 20%, #3BF0A8, var(--sp-accent) 55%, #06603F);
    box-shadow:0 14px 30px -10px rgba(11,138,92,.65), inset 0 1px 0 rgba(255,255,255,.35);
}
.spaan-head__icon::after{   /* radar ring around the icon */
    content:"";position:absolute;inset:-7px;border-radius:24px;border:1.5px solid rgba(47,228,155,.35);
    animation:spRing 2.4s var(--sp-ease) infinite;
}
@keyframes spRing{0%{opacity:.9;transform:scale(.92)}100%{opacity:0;transform:scale(1.18)}}
.spaan-head h2{font-size:24px;font-weight:800;letter-spacing:-.025em;color:var(--sp-ink);margin:0}
.spaan-head p{font-size:14px;color:var(--sp-ink-2);margin:4px auto 0;max-width:34ch;line-height:1.5}

.spaan-group{
    margin-bottom:10px;padding:16px;border-radius:22px;
    background:linear-gradient(180deg, #F7F9F8, #F3F6F5);
    border:1px solid var(--sp-line);
}
.spaan-group__label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.spaan-group__label span{font-size:15px;font-weight:800;color:var(--sp-ink);letter-spacing:-.01em}
.spaan-group__label small{font-size:12.5px;color:var(--sp-ink-3);font-weight:600}
.spaan-group__label small b{color:var(--sp-accent);font-variant-numeric:tabular-nums}

.spaan-locs{display:flex;flex-wrap:wrap;gap:8px}
.spaan-locs .chip{
    transition:background .2s, color .2s, border-color .2s, transform .12s, box-shadow .2s;
}
.spaan-locs .chip:active{transform:scale(.95)}
.spaan-locs .chip.is-active{
    box-shadow:0 6px 16px -8px rgba(11,138,92,.7);
}
.chip--loc.is-disabled{opacity:.38;pointer-events:none}

/* Slider */
.spaan-range{
    width:100%;-webkit-appearance:none;appearance:none;
    height:10px;border-radius:99px;margin:6px 0 2px;
    background:linear-gradient(90deg, #22C98A, var(--sp-accent) var(--fill,25%), rgba(14,17,22,.08) var(--fill,25%));
    outline:none;cursor:pointer;
}
.spaan-range:focus-visible{box-shadow:0 0 0 4px rgba(11,138,92,.18)}
.spaan-range::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:28px;height:28px;border-radius:50%;
    background:#fff;border:0;
    box-shadow:0 0 0 6px rgba(11,138,92,.14), 0 4px 12px rgba(6,16,12,.25);
    transition:transform .15s, box-shadow .2s;
}
.spaan-range:active::-webkit-slider-thumb{transform:scale(1.12);box-shadow:0 0 0 9px rgba(11,138,92,.16), 0 6px 16px rgba(6,16,12,.28)}
.spaan-range::-moz-range-thumb{
    width:28px;height:28px;border-radius:50%;background:#fff;border:0;
    box-shadow:0 0 0 6px rgba(11,138,92,.14), 0 4px 12px rgba(6,16,12,.25);
}
.spaan-range__marks{display:flex;justify-content:space-between;font-size:11.5px;color:var(--sp-ink-3);font-weight:700;margin-top:8px}

/* ============ Phase 2: radar ============ */
.spaan-radar{
    position:relative;border-radius:26px;overflow:hidden;isolation:isolate;
    background:
        radial-gradient(90% 70% at 50% 40%, #123629 0%, transparent 70%),
        linear-gradient(170deg,#0A1A14,#07120E 60%,#050D0A);
    aspect-ratio:4 / 5;
    max-height:min(64vh, 560px);width:100%;margin:6px auto 14px;
    box-shadow:0 24px 50px -24px rgba(5,20,14,.7), inset 0 0 0 1px rgba(47,228,155,.12);
}
/* faint scanlines */
.spaan-radar::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
    background:repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
    mix-blend-mode:screen;
}
#spaanCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.spaan-radar__overlay{
    position:absolute;left:12px;right:12px;bottom:12px;z-index:3;
    padding:16px 18px;text-align:center;color:#fff;border-radius:20px;
    background:rgba(8,20,15,.55);
    -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
    border:1px solid rgba(255,255,255,.09);
}
.spaan-radar__ping{
    display:block;width:10px;height:10px;border-radius:50%;
    background:var(--sp-mint);margin:0 auto 10px;position:relative;
    box-shadow:0 0 12px var(--sp-mint);
}
.spaan-radar__ping::after,
.spaan-radar__ping::before{
    content:"";position:absolute;inset:-6px;border-radius:50%;
    border:2px solid var(--sp-mint);opacity:0;animation:spPing 1.8s var(--sp-ease) infinite;
}
.spaan-radar__ping::before{animation-delay:.9s}
@keyframes spPing{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(2.2)}}
.spaan-radar__status{font-size:16px;font-weight:800;letter-spacing:-.01em}
.spaan-radar__found{display:block;margin-top:5px;font-size:13px;color:rgba(255,255,255,.7)}
.spaan-radar__found b{
    color:var(--sp-mint);font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;
    display:inline-block;min-width:1ch;text-shadow:0 0 14px rgba(47,228,155,.55);
    animation:spCount .5s var(--sp-ease);
}
@keyframes spCount{from{transform:scale(1.35)}to{transform:none}}

/* ============ Phase 3: swipe deck ============ */
.spaan-results__head{text-align:center;padding:8px 0 14px}
.spaan-results__head h2{font-size:22px;font-weight:800;letter-spacing:-.025em;color:var(--sp-ink);margin:0}
.spaan-results__head h2 b{color:var(--sp-accent)}
.spaan-results__head p{font-size:13.5px;color:var(--sp-ink-2);margin-top:3px}

.swipe-deck{
    position:relative;height:min(452px, 60vh);min-height:380px;
    touch-action:pan-y;perspective:1200px;
}
.swipe-card{
    position:absolute;inset:0;
    background:var(--surface);
    border:1px solid var(--sp-line);
    border-radius:28px;
    padding:22px 22px 18px;
    display:flex;flex-direction:column;
    user-select:none;-webkit-user-select:none;
    will-change:transform;cursor:grab;overflow:hidden;
    box-shadow:0 1px 2px rgba(6,16,12,.05), 0 22px 44px -26px rgba(6,16,12,.45);
    transition:transform .45s var(--sp-ease), filter .45s var(--sp-ease), opacity .3s;
}
.swipe-card::before{   /* soft brand glow at the top of each card */
    content:"";position:absolute;inset:0 0 auto;height:120px;pointer-events:none;
    background:radial-gradient(80% 100% at 20% 0%, rgba(47,228,155,.16), transparent 70%);
}
.swipe-card:active{cursor:grabbing}

/* Stack — driven SOLELY by the data-stack attribute that the JS sets
   (0 = top, 1–2 = visible behind, 3 = hidden).
   The old :nth-last-child selectors were removed on purpose: they count
   EVERY child of #swipeDeck, including a card that is still animating out
   (.is-flying) and has not yet been removed from the DOM. During quick
   swipes those lingering flying cards shifted the real top card's DOM
   position, so it started matching nth-last-child(2|3|n+4) and got pushed
   back, shrunk and faded to opacity:0 — that's the blank card you saw
   after a couple of swipes. data-stack is always correct because the JS
   counts only live (.swipe-card:not(.is-flying)) cards, so we trust it
   alone. The explicit data-stack="0" rule also resets any leftover
   opacity/filter so a card is fully solid once it becomes the top card. */
.swipe-card[data-stack="0"]{transform:none;filter:none;opacity:1}
.swipe-card[data-stack="1"]{transform:translateY(calc(16px - 16px * var(--sp-drag,0))) scale(calc(.95 + .05 * var(--sp-drag,0)));filter:brightness(calc(.97 + .03 * var(--sp-drag,0)));opacity:1}
.swipe-card[data-stack="2"]{transform:translateY(calc(32px - 16px * var(--sp-drag,0))) scale(calc(.9 + .05 * var(--sp-drag,0)));filter:brightness(.94);opacity:.9}
.swipe-card[data-stack="3"]{transform:translateY(40px) scale(.86);opacity:0;pointer-events:none}
.swipe-card.is-top{transition:none}
.swipe-card.is-flying{transition:transform .62s cubic-bezier(.25,.75,.35,1), opacity .3s .32s;pointer-events:none}
.swipe-card.is-returning{transition:transform .55s cubic-bezier(.34,1.45,.5,1)}

/* Tint the whole card while dragging toward a decision */
.swipe-card__stamp{
    position:absolute;top:24px;z-index:2;
    font-size:19px;font-weight:900;letter-spacing:.06em;
    padding:7px 14px;border-radius:14px;border:3px solid;
    opacity:0;pointer-events:none;background:rgba(255,255,255,.92);
    transition:opacity .1s;
}
.swipe-card__stamp--apply{left:18px;color:var(--sp-accent);border-color:var(--sp-accent);transform:rotate(-12deg)}
.swipe-card__stamp--skip{right:18px;color:var(--sp-danger);border-color:var(--sp-danger);transform:rotate(12deg)}

.swipe-card__top{position:relative;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.swipe-card__title{position:relative;font-size:22px;font-weight:800;letter-spacing:-.025em;line-height:1.2;color:var(--sp-ink);margin:0}
.swipe-card__co{font-size:14px;color:var(--sp-ink-2);margin-top:5px}
.swipe-card__facts{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.tag--warn{background:var(--sp-warn-soft);color:var(--sp-warn)}
.swipe-card__desc{
    font-size:14px;line-height:1.55;color:var(--sp-ink-2);flex:1;margin:0;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.swipe-card__missing{
    margin-top:14px;padding:2px 0;
    display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.swipe-card__missing small{width:100%;font-size:12px;font-weight:800;color:#8A5A00}
.miss-pill{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;background:#fff;color:#A15C00;border:1px solid #F3D9A8}
.miss-pill--more{background:transparent;border-color:transparent;color:var(--sp-ink-3)}
.swipe-card__ready{
    margin-top:14px;padding:11px 14px;border-radius:16px;
    background:#ECFBF4;border:1px solid #C7EEDB;
    font-size:13.5px;font-weight:800;color:var(--sp-accent);
}
.swipe-card__footer{margin-top:12px}

/* ---------- Action bar ---------- */
.swipe-actions{display:flex;justify-content:center;align-items:center;gap:22px;padding:22px 0 6px}
.swipe-btn{
    width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
    display:grid;place-items:center;font-size:22px;font-weight:800;
    background:var(--surface);
    box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 12px 26px -12px rgba(6,16,12,.4), 0 0 0 1px var(--sp-line);
    transition:transform .2s var(--sp-ease), box-shadow .2s;
    -webkit-tap-highlight-color:transparent;
}
.swipe-btn:hover{transform:translateY(-2px)}
.swipe-btn:active,.swipe-btn.is-pressed{transform:scale(.88)}

/* Skip — soft red pill with red icon (OLD look) */
.swipe-btn--skip{
    color:var(--sp-danger);
    background:linear-gradient(180deg, #FFF1F1, #FFE3E4);
    box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 12px 26px -14px rgba(229,72,77,.55), 0 0 0 1px rgba(229,72,77,.22);
}
.swipe-btn--skip:hover{background:linear-gradient(180deg, #FFE7E8, #FFD6D8)}

/* Apply — brand gradient (OLD look) */
.swipe-btn--apply{
    color:#fff;width:72px;height:72px;font-size:26px;
    background:radial-gradient(120% 120% at 30% 20%, #3BF0A8, var(--sp-accent) 55%, #06603F);
    box-shadow:0 18px 34px -12px rgba(11,138,92,.75), 0 1px 0 rgba(255,255,255,.35) inset;
}


/* Empty */
.spaan-empty{text-align:center;padding:36px 12px}
.spaan-empty span{font-size:48px;display:inline-block;animation:spFloat 3s ease-in-out infinite}
@keyframes spFloat{50%{transform:translateY(-6px)}}
.spaan-empty h3{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:12px 0 6px;color:var(--sp-ink)}
.spaan-empty p{font-size:14px;color:var(--sp-ink-2);max-width:32ch;margin:0 auto;line-height:1.55}

/* Toast (used by spaan-swipe.js) */
.swipe-toast{
    position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom, 0px));z-index:9999;
    display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);
    padding:12px 16px;border-radius:16px;
    background:rgba(14,22,18,.92);color:#fff;font-size:14px;font-weight:600;
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    box-shadow:0 18px 40px -16px rgba(0,0,0,.5);
    transform:translate(-50%, 16px);opacity:0;pointer-events:none;
    transition:transform .4s var(--sp-ease, ease), opacity .3s;
}
.swipe-toast.is-in{transform:translate(-50%, 0);opacity:1}
.swipe-toast i{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:#2FE49B;box-shadow:0 0 10px #2FE49B}
.swipe-toast--error i{background:#FF6B6B;box-shadow:0 0 10px #FF6B6B}


/* Skip — soft red pill with red icon */
.swipe-btn--skip{
    color:var(--sp-danger);
    background:linear-gradient(180deg, #FFF1F1, #FFE3E4);
    box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 12px 26px -14px rgba(229,72,77,.55), 0 0 0 1px rgba(229,72,77,.22);
}
.swipe-btn--skip:hover{
    background:linear-gradient(180deg, #FFE7E8, #FFD6D8);
}

/* Apply — brand gradient (matches the old sheet) */

.swipe-btn--apply:hover{
    box-shadow:0 22px 40px -12px rgba(11,138,92,.85), 0 1px 0 rgba(255,255,255,.45) inset;
}
/* New search — compact glass pill matching the skip button's shape */
.swipe-btn--new{
    width:48px;height:48px;font-size:20px;
    color:var(--sp-ink-2);
    background:rgba(14,17,22,.05);
    box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 12px 26px -14px rgba(6,16,12,.35), 0 0 0 1px var(--sp-line);
}
.swipe-btn--new:hover{
    color:var(--sp-accent);
    background:var(--lp-accent-soft, #ECFBF4);
    box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 12px 26px -14px rgba(11,138,92,.35), 0 0 0 1px rgba(11,138,92,.28);
}
.swipe-btn--new svg{width:18px;height:18px;display:block}

.swipe-btn:active{transform:scale(.9)}
.swipe-btn--skip{color:var(--danger)}
.swipe-btn--apply{
    color:#fff;width:66px;height:66px;
    background:linear-gradient(135deg,var(--accent),#0FB578);
    box-shadow:0 10px 24px rgba(11,138,92,.4);
}
.swipe-btn--info{color:var(--info);font-style:italic;font-family:Georgia,serif;width:48px;height:48px;align-self:center}


/* ---------- Responsive + motion preferences ---------- */
@media (min-width:560px){
    .spaan-sheet{bottom:16px;border-radius:30px;max-height:calc(100vh - 32px)}
}
@media (prefers-reduced-motion: reduce){
    .spaan-sheet,.spaan-phase.is-active,.swipe-card{transition:none;animation:none}
    .spaan-head__icon::after,.spaan-radar__ping::before,.spaan-radar__ping::after,.spaan-empty span{animation:none}
}
/* ============================================
   AD SLOTS
   ============================================ */
.ad-slot{margin:14px 0}
.ad-slot__label{
    display:block;font-size:10px;font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;color:var(--ink-3);margin-bottom:6px;text-align:center;
}
.ad-slot__placeholder{
    background:repeating-linear-gradient(
        -45deg,
        rgba(14,17,22,.03),rgba(14,17,22,.03) 10px,
        rgba(14,17,22,.06) 10px,rgba(14,17,22,.06) 20px
    );
    border:2px dashed rgba(14,17,22,.1);
    border-radius:var(--r-md);
    height:100px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:4px;
    color:var(--ink-3);
}
.ad-slot__placeholder span{font-size:18px;font-weight:800;opacity:.4}
.ad-slot__placeholder small{font-size:11px;opacity:.5}
.ad-slot__placeholder--lg{height:250px}
.ad-slot--progress{margin:22px 0 8px}

/* ============================================
   COMMENTS
   ============================================ */
.comments-section{margin:30px 0 0}
.comments-count{
    font-size:14px;font-weight:700;color:var(--ink-3);
    background:rgba(14,17,22,.06);padding:2px 10px;
    border-radius:999px;margin-left:6px;vertical-align:middle;
}

.comment-thread{display:flex;flex-direction:column;gap:0;margin-bottom:18px}

.comment{
    padding:16px 0;
    border-bottom:1px solid var(--line);
}
.comment:last-child{border-bottom:0}

.comment__head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.comment__avatar{
    width:36px;height:36px;border-radius:50%;flex-shrink:0;
    display:grid;place-items:center;
    color:#fff;font-weight:700;font-size:12px;
}
.comment__avatar--sm{width:32px;height:32px;font-size:11px}
.comment__meta{flex:1;min-width:0}
.comment__meta strong{display:block;font-size:14px}
.comment__meta time{font-size:12px;color:var(--ink-3)}

.comment__body{
    font-size:14px;color:var(--ink);line-height:1.55;
    padding-left:46px;
}

.comment__actions{
    display:flex;align-items:center;gap:4px;
    padding-left:46px;margin-top:8px;
}
.comment__action{
    display:inline-flex;align-items:center;gap:5px;
    font-size:12.5px;font-weight:700;color:var(--ink-3);
    padding:6px 10px;border-radius:999px;
    transition:background .15s, color .15s;
}
.comment__action:active{background:rgba(14,17,22,.06)}
.comment__action svg{width:15px;height:15px}
.comment__action--report{margin-left:auto;padding:6px 8px}
.comment__action--report svg{width:14px;height:14px}
.comment__action--report:active{color:var(--danger)}


.comment--reply{padding:14px 0}
.comment--reply .comment__body{padding-left:46px}
.comment--reply .comment__actions{padding-left:46px}

/* Comment form */
.comment-form{
    background:var(--surface);border-radius:var(--r-lg);
    box-shadow:var(--shadow);padding:14px;
    position:relative;
}
.comment-form__replying{
    display:flex;align-items:center;justify-content:space-between;
    padding:8px 12px;margin-bottom:10px;
    background:var(--accent-soft);border-radius:var(--r-sm);
}
.comment-form__replying small{font-size:12.5px;color:var(--accent)}
.comment-form__replying strong{color:var(--ink)}
.comment-form__cancel{
    width:28px;height:28px;border-radius:50%;
    display:grid;place-items:center;font-size:14px;
    color:var(--ink-2);transition:background .15s;
}
.comment-form__cancel:active{background:rgba(14,17,22,.08)}

.comment-form__input{display:flex;align-items:flex-end;gap:10px}
.comment-form__field{
    flex:1;display:flex;align-items:flex-end;
    background:var(--bg);border-radius:22px;
    padding:6px 6px 6px 16px;min-height:44px;
}
.comment-form__field textarea{
    flex:1;border:0;outline:0;background:none;
    font:inherit;font-size:14px;
    resize:none;max-height:120px;min-height:28px;line-height:1.4;
    padding:6px 0;
}
.comment-form__field textarea::placeholder{color:var(--ink-3)}
.comment-form__send{
    width:36px;height:36px;border-radius:50%;flex-shrink:0;
    background:var(--accent);color:#fff;
    display:grid;place-items:center;
    transition:transform .15s, opacity .15s;
    opacity:.4;
}
.comment-form__send.is-active{opacity:1}
.comment-form__send:active{transform:scale(.9)}
.comment-form__send svg{width:17px;height:17px}

/* ============================================
   APPLY PROGRESS
   ============================================ */
.apply-progress{text-align:center;padding:10px 0 6px}
.apply-progress__spinner{
    width:64px;height:64px;margin:0 auto 18px;
    position:relative;
}
.apply-progress__spinner svg{width:100%;height:100%}
.apply-progress__arc{
    transform-origin:center;
    animation:spinArc 1.1s linear infinite;
}
@keyframes spinArc{to{transform:rotate(360deg)}}

.apply-progress__title{font-size:19px;letter-spacing:-.02em}
.apply-progress__sub{font-size:13px;color:var(--ink-2);margin-top:3px}

.apply-progress__steps{
    text-align:left;margin:22px 0 4px;
    display:flex;flex-direction:column;gap:6px;
}
.prog-step{
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;border-radius:var(--r-sm);
    font-size:13.5px;font-weight:600;color:var(--ink-3);
    background:var(--bg);
    transition:all .3s;
}
.prog-step.is-active{
    color:var(--ink);background:var(--accent-soft);
}
.prog-step.is-done{color:var(--accent);background:transparent;padding:6px 14px}
.prog-step__icon{width:20px;text-align:center;flex-shrink:0}

/* ============================================
   APPLY SUCCESS
   ============================================ */
.apply-success{text-align:center;padding:14px 0 6px}
.apply-success__icon{
    width:64px;height:64px;border-radius:50%;
    background:var(--accent-soft);color:var(--accent);
    display:inline-grid;place-items:center;
    font-size:28px;font-weight:800;margin-bottom:14px;
    animation:popIn .4s cubic-bezier(.17,.67,.24,1.3);
}
@keyframes popIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.apply-success h2{font-size:21px;letter-spacing:-.02em}
.apply-success p{font-size:14px;color:var(--ink-2);margin:6px 0 20px}

.apply-success__summary{
    background:var(--bg);border-radius:var(--r-md);
    padding:4px 0;margin-bottom:18px;text-align:left;
}
.apply-success__row{
    display:flex;justify-content:space-between;
    padding:10px 16px;font-size:13.5px;
    border-bottom:1px solid var(--line);
}
.apply-success__row:last-child{border-bottom:0}
.apply-success__row span{color:var(--ink-2)}
.apply-success__row strong{font-weight:700}

/* ============================================
   TOAST
   ============================================ */
.toast{
    position:fixed;bottom:calc(100px + var(--safe-b));left:50%;
    transform:translateX(-50%) translateY(20px);
    background:var(--ink);color:#fff;
    padding:12px 20px;border-radius:999px;
    font-size:13px;font-weight:700;
    display:flex;align-items:center;gap:10px;
    box-shadow:var(--shadow-lift);
    opacity:0;pointer-events:none;
    transition:all .28s cubic-bezier(.32,.72,.24,1);
    z-index:100;white-space:nowrap;
}
.toast svg{width:16px;height:16px;flex-shrink:0}
.toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}





/* ============================================
   AUTH MODALS
   ============================================ */
.modal{
    position:fixed;inset:0;z-index:100;
    display:flex;align-items:flex-end;justify-content:center;
    opacity:0;pointer-events:none;
    transition:opacity .25s;
}
.modal.is-open{opacity:1;pointer-events:auto}
.modal__backdrop{
    position:absolute;inset:0;
    background:rgba(14,17,22,.5);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.modal__panel{
    position:relative;z-index:1;
    width:100%;max-width:420px;
    max-height:92vh;overflow-y:auto;
    background:var(--surface);
    border-radius:26px 26px 0 0;
    padding:12px 22px calc(26px + var(--safe-b));
    transform:translateY(30px);
    transition:transform .32s cubic-bezier(.32,.72,.24,1);
    overscroll-behavior:contain;
}
.modal.is-open .modal__panel{transform:translateY(0)}
.modal__panel--tall{max-height:94vh}
.modal__handle{
    width:40px;height:5px;border-radius:99px;
    background:rgba(14,17,22,.14);margin:0 auto 10px;
}
.modal__close{
    position:absolute;top:18px;right:18px;
    width:34px;height:34px;border-radius:50%;
    display:grid;place-items:center;
    background:var(--bg);color:var(--ink-2);
    transition:background .15s;
}
.modal__close:active{background:rgba(14,17,22,.1)}
.modal__close svg{width:18px;height:18px}

.modal__head{text-align:center;padding:12px 0 22px}
.modal__head h2{font-size:22px;letter-spacing:-.02em;margin-top:12px}
.modal__head p{font-size:14px;color:var(--ink-2);margin-top:4px}
.modal__head-icon{font-size:36px;display:block;margin-bottom:4px}
.brand__mark--lg{
    width:52px;height:52px;border-radius:16px;
    display:inline-grid;place-items:center;font-size:24px;
    background:linear-gradient(135deg,var(--accent),#0FB578);
    color:#fff;font-weight:800;
    box-shadow:0 8px 20px rgba(11,138,92,.3);
}

/* ----- Form fields ----- */
.auth-form{display:flex;flex-direction:column;gap:16px}

.field__label{
    display:block;font-size:13px;font-weight:700;
    margin-bottom:6px;color:var(--ink);
}
.field__opt{font-weight:600;color:var(--ink-3)}

.field__input-wrap{
    display:flex;align-items:center;gap:8px;
    background:var(--bg);
    border:1.5px solid var(--line);
    border-radius:14px;padding:0 14px;
    transition:border-color .18s, box-shadow .18s;
    min-height:50px;
}
.field__input-wrap:focus-within{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(11,138,92,.12);
}
.field__icon{width:19px;height:19px;color:var(--ink-3);flex-shrink:0}
.field__prefix{
    font-size:14px;font-weight:700;color:var(--ink-2);
    white-space:nowrap;flex-shrink:0;
}
.field__input{
    flex:1;border:0;outline:0;background:none;
    font:inherit;font-size:15px;min-width:0;
    padding:14px 0;color:var(--ink);
}
.field__input::placeholder{color:var(--ink-3)}
.field__toggle{
    width:34px;height:34px;border-radius:10px;flex-shrink:0;
    display:grid;place-items:center;color:var(--ink-3);
    transition:color .15s;
}
.field__toggle.is-visible{color:var(--accent)}
.field__toggle svg{width:19px;height:19px}

.field__row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.field__row-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.field__msg{display:block;font-size:12px;font-weight:600;margin-top:6px;padding:0 4px}
.field__msg--error{color:var(--danger)}
.field__msg--success{color:var(--accent)}
.field__msg--muted {
    color: #6B7280;
    font-size: 11px;
    margin-top: 8px;
    line-height: 1.4;
}

/* ----- Checkbox ----- */
.check{
    display:flex;align-items:center;gap:10px;
    font-size:13.5px;font-weight:600;color:var(--ink-2);
    cursor:pointer;
}
.check input{position:absolute;opacity:0;pointer-events:none}
.check__box{
    width:22px;height:22px;border-radius:7px;flex-shrink:0;
    border:2px solid rgba(14,17,22,.18);
    display:grid;place-items:center;
    transition:all .18s;
}
.check__box::after{
    content:"✓";font-size:13px;font-weight:800;color:#fff;
    opacity:0;transform:scale(0);transition:all .18s;
}
.check input:checked ~ .check__box{
    background:var(--accent);border-color:var(--accent);
}
.check input:checked ~ .check__box::after{opacity:1;transform:scale(1)}
.check--terms{margin-top:4px}
.check--terms a{color:var(--accent);text-decoration:underline}

/* ----- Password strength ----- */
.pw-strength{margin-top:8px}
.pw-strength__bar{
    height:5px;border-radius:99px;background:rgba(14,17,22,.08);
    overflow:hidden;
}
.pw-strength__bar span{
    display:block;height:100%;border-radius:99px;
    width:0;transition:width .3s, background .3s;
}
.pw-strength small{display:block;margin-top:5px;font-size:11.5px;font-weight:700;color:var(--ink-3)}

.pw-rules{
    list-style:none;display:flex;flex-direction:column;gap:4px;
    margin-top:8px;padding:0;
}
.pw-rules li{
    font-size:12px;font-weight:600;color:var(--ink-3);
    padding-left:22px;position:relative;transition:color .2s;
}
.pw-rules li::before{
    content:"○";position:absolute;left:0;top:0;
    font-size:11px;transition:all .2s;
}
.pw-rules li.is-valid{color:var(--accent)}
.pw-rules li.is-valid::before{content:"●";color:var(--accent)}

/* ----- OTP ----- */
.otp-group{display:flex;gap:8px;justify-content:center;margin:4px 0 12px}
.otp-box{
    width:48px;height:56px;border-radius:14px;
    border:1.5px solid var(--line);background:var(--bg);
    font:inherit;font-size:22px;font-weight:800;
    text-align:center;outline:0;
    transition:border-color .18s, box-shadow .18s;
}
.otp-box:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(11,138,92,.12)}
.otp-box.is-filled{border-color:var(--accent);background:var(--accent-soft)}

.otp-timer{
    display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:13.5px;font-weight:600;color:var(--ink-2);
    padding:8px 0;
}
.otp-timer svg{width:16px;height:16px}
.otp-timer strong{color:var(--accent);font-variant-numeric:tabular-nums}
.otp-timer.is-expired strong{color:var(--danger)}

/* ----- Auth extras ----- */
.link-btn{
    font-size:13px;font-weight:700;color:var(--accent);
    background:none;border:0;cursor:pointer;padding:4px 0;
}
.link-btn--center{display:block;width:100%;text-align:center;margin-top:4px}
.link-accent{color:var(--accent);font-weight:700}

.auth-footer{
    text-align:center;font-size:12px;color:var(--ink-3);
    margin-top:2px;
}

.auth-divider{
    display:flex;align-items:center;gap:14px;
    margin:4px 0;
}
.auth-divider::before,.auth-divider::after{
    content:"";flex:1;height:1px;background:var(--line);
}
.auth-divider span{font-size:12.5px;font-weight:700;color:var(--ink-3);white-space:nowrap}

/* ----- Forgot password phases ----- */
.forgot-phase{display:none}
.forgot-phase.is-active{display:block;animation:phaseIn .35s ease both}

/* ---- Register multi-step ---- */
.reg-step {
    display: none;
}
.reg-step.is-active {
    display: block;
}

/* ---- Verify email notice (login modal) ---- */
.verify-notice {
    background: #FFF8E1;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    text-align: center;
}
.verify-notice p {
    margin: 0 0 4px;
    font-size: 13px;
    color: #92600a;
    line-height: 1.5;
}
.verify-notice .verify-email-address {
    font-weight: 600;
    color: #6d4800;
}
.verify-notice .btn {
    margin-top: 10px;
    font-size: 13px;
}

/* ---- Success icon (step 3) ---- */
.success-icon {
    margin: 0 auto 12px;
    width: 64px;
    height: 64px;
    background: #e8f8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-accent {
    color: var(--accent, #0B8A5C);
    font-weight: 600;
}
.text-muted {
    color: #777;
}
.text-center {
    text-align: center;
}

/* ---- Message variants ---- */
.field__msg--success {
    color: #0B8A5C;
    display: block;
    font-size: 13px;
    margin-top: 8px;
    text-align: center;
}


/* ============================================
   AUTH MODALS — mobile compaction
   Shrink vertical rhythm so login/register fit
   without scrolling on typical phones (≤480px).
   Scoped to #loginModal / #registerModal /
   #forgotModal so no other modal is affected.
   ============================================ */
@media (max-width: 480px) {

    /* Give the panel a touch more usable height */
    #loginModal .modal__panel,
    #forgotModal .modal__panel {
        max-height: 96vh;
        padding: 8px 18px calc(18px + var(--safe-b));
    }
    #registerModal .modal__panel {
        max-height: 96vh;
        padding: 8px 18px calc(18px + var(--safe-b));
    }

    /* Tighter head block */
    #loginModal .modal__head,
    #registerModal .modal__head,
    #forgotModal .modal__head {
        padding: 4px 0 14px;
    }
    #loginModal .modal__head h2,
    #registerModal .modal__head h2,
    #forgotModal .modal__head h2 {
        font-size: 19px;
        margin-top: 8px;
    }
    #loginModal .modal__head p,
    #registerModal .modal__head p,
    #forgotModal .modal__head p {
        font-size: 13px;
    }
    #loginModal .brand__mark--lg,
    #registerModal .brand__mark--lg {
        width: 44px;
        height: 44px;
        border-radius: 13px;
        font-size: 20px;
    }

    /* Tighter form gaps */
    #loginModal .auth-form,
    #registerModal .auth-form,
    #forgotModal .auth-form {
        gap: 12px;
    }

    /* Shorter fields */
    #loginModal .field__input-wrap,
    #registerModal .field__input-wrap,
    #forgotModal .field__input-wrap {
        min-height: 44px;
        border-radius: 12px;
    }
    #loginModal .field__input,
    #registerModal .field__input,
    #forgotModal .field__input {
        padding: 10px 0;
        font-size: 14.5px;
        border:none;
        background:none;
    }
    #loginModal .field__label,
    #registerModal .field__label,
    #forgotModal .field__label {
        font-size: 12.5px;
        margin-bottom: 4px;
    }

    /* Smaller primary buttons */
    #loginModal .btn--lg,
    #registerModal .btn--lg,
    #forgotModal .btn--lg {
        padding-top: 12px;
        padding-bottom: 12px;
        font-size: 15px;
    }

    /* Compact OTP boxes so forgot-password step 2 fits too */
    #forgotModal .otp-box {
        width: 42px;
        height: 48px;
        font-size: 19px;
        border-radius: 12px;
    }
    #forgotModal .otp-group { gap: 6px; margin: 2px 0 8px; }
    #forgotModal .otp-timer { padding: 4px 0; font-size: 12.5px; }

    /* Hide the drag handle on very small screens — swipe-down still works */
    #loginModal .modal__handle,
    #registerModal .modal__handle,
    #forgotModal .modal__handle {
        margin-bottom: 6px;
    }
}

/* ============================================
   SPAAN SETUP — compact, fits one screen
   ============================================ */
#spaanSetup .spaan-setup__head { padding: 12px 0 6px; }
#spaanSetup .spaan-setup__head h2 { font-size: 19px; margin: 0 0 2px; letter-spacing: -.3px; }
#spaanSetup .spaan-setup__head p  { font-size: 12.5px; margin: 0; }

#spaanSetup .spaan-group { margin-bottom: 4px; }
#spaanSetup .spaan-group__label {
    margin-bottom: 5px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
#spaanSetup .spaan-group__label span { font-size: 12.5px; font-weight: 600; color: #555; }
#spaanSetup .spaan-group__label small { font-size: 11px; color: #b0b0b0; }

/* Horizontal scroll strips with edge fade */
#spaanSetup .chips {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding: 1px 0 3px;
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
    scroll-snap-type: x proximity;
}
#spaanSetup .chips::-webkit-scrollbar { display: none; }

#spaanSetup .chip {
    flex-shrink: 0;
    font-size: 12px;
    padding: 6px 13px;
    border-radius: 18px;
    scroll-snap-align: start;
    white-space: nowrap;
}

/* Remote checkbox — tighter */
#spaanSetup .spaan-check { font-size: 12.5px; padding: 1px 0; gap: 9px; }
#spaanSetup .spaan-check__box { width: 18px; height: 18px; border-radius: 5px; }
#spaanSetup .spaan-check input:checked + .spaan-check__box::after {
    left: 5.5px; top: 2px; width: 4px; height: 8px;
}

/* CTA */
#spaanSetup #spaanStart { margin-top: 12px; }

.turnstile-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 20px 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e8eaf0;
    margin: 16px 0;
    transition: all 0.2s ease;
}

.turnstile-wrapper:focus-within {
    border-color: #0B8A5C;
    box-shadow: 0 0 0 3px rgba(11, 138, 92, 0.06);
}

.turnstile-note {
    font-size: 0.7rem;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.turnstile-wrapper .cf-turnstile {
    transform: scale(0.9);
    transform-origin: center;
}

.btn.hidden {
    display: none !important;
}