/* =====================================================================
   JLW — "Today" design system (member app), themed from the JITO logo:
   navy ring #2E3192 · saffron squares #F5A623 · red wordmark #D7262E
   Neutral canvas · bold type · image-forward cards · one accent colour
   RULE: no transform / filter on page-level wrappers — a transformed
   ancestor becomes the containing block for position:fixed children
   and traps modals inside it.
   ===================================================================== */
:root {
    --ink: #111114;
    --ink-2: #2A2A30;
    --muted: #6B6B76;
    --line: #ECECF0;
    --bg: #F5F5F7;
    --surface: #FFFFFF;
    --accent: #2E3192;
    --accent-600: #23266F;
    --accent-50: #EEF0FB;
    --accent-100: #DADDF5;
    --gold: #F5A623;
    --gold-600: #D98A07;
    --red: #D7262E;
    --gold-50: #FFF5E0;
    --green: #1F8A5B;
    --green-50: #E7F6EE;
    --amber-50: #FFF4DE;
    --red-50: #FDECEC;
    --r-xl: 24px; --r-lg: 20px; --r-md: 16px; --r-sm: 12px;
    --sh-1: 0 1px 2px rgba(17,17,20,.04), 0 6px 18px rgba(17,17,20,.05);
    --sh-2: 0 2px 6px rgba(17,17,20,.06), 0 16px 36px rgba(17,17,20,.10);
    --ease: cubic-bezier(.2,.8,.2,1);

    /* legacy aliases still referenced by older views */
    --jlw-primary: var(--accent); --jlw-primary-dark: var(--accent-600); --jlw-primary-light: var(--accent-50);
    --jlw-gold: var(--gold); --jlw-text: var(--ink); --jlw-text-muted: var(--muted);
    --jlw-bg: var(--bg); --jlw-surface: var(--surface); --jlw-border: var(--line);
    --jlw-radius-lg: var(--r-lg); --jlw-radius-md: var(--r-md); --jlw-radius-sm: var(--r-sm);
    --jlw-shadow: var(--sh-1); --jlw-shadow-md: var(--sh-2); --jlw-ease: var(--ease);
}

[x-cloak] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body.jlw-body {
    margin: 0;
    font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    font-size: 15px;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1,h2,h3,h4,h5,h6 { font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.jlw-h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin: 0; }
.jlw-h2 { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .6rem; }
.text-muted { color: var(--muted) !important; }
.jlw-min-0 { min-width: 0; }
.jlw-prose { line-height: 1.75; color: var(--ink-2); }
.jlw-prose p:last-child { margin-bottom: 0; }
.jlw-prose ul, .jlw-prose ol { padding-left: 1.2rem; }

/* ---------- Layout ---------- */
.jlw-main { max-width: 520px; margin: 0 auto; padding: 6px 16px 120px; }
.jlw-main--immersive { padding-top: 0; }

/* ---------- Top bar (flat, blends into canvas) ---------- */
.jlw-topbar {
    position: sticky; top: 0; z-index: 1030;
    background: var(--bg);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px;
    max-width: 520px; margin: 0 auto;
}
.jlw-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.jlw-brand-mark {
    width: 36px; height: 36px; border-radius: 11px;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.jlw-brand-name { font-weight: 800; font-size: .98rem; line-height: 1.05; color: var(--ink); }
.jlw-brand-sub { font-size: .66rem; font-weight: 700; color: var(--muted); letter-spacing: .12em; }
.jlw-icon-btn {
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); color: var(--ink); border: 1px solid var(--line);
    text-decoration: none; transition: background .15s ease;
}
.jlw-icon-btn:hover { background: #fafafa; color: var(--ink); }
.jlw-icon-btn:active { opacity: .7; }

/* ---------- Buttons ---------- */
.btn { border-radius: 14px; font-weight: 700; }
.btn-lg { padding: .8rem 1.2rem; font-size: 1rem; }
.jlw-btn-primary {
    background: var(--accent); border: 1px solid var(--accent); color: #fff;
    border-radius: 14px; font-weight: 700; padding: .7rem 1.15rem;
    transition: background .15s ease, box-shadow .15s ease;
}
.jlw-btn-primary:hover, .jlw-btn-primary:focus { background: var(--accent-600); border-color: var(--accent-600); color: #fff; box-shadow: 0 8px 20px rgba(46,49,146,.25); }
.jlw-btn-primary:active { opacity: .85; }
.jlw-btn-primary:disabled { opacity: .55; box-shadow: none; }
.jlw-btn-dark { background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: 14px; font-weight: 700; padding: .7rem 1.15rem; }
.jlw-btn-dark:hover { background: #000; color: #fff; }
.jlw-btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; font-weight: 700; padding: .7rem 1rem; }
.jlw-btn-ghost:hover { background: #fafafa; color: var(--ink); }
.jlw-btn-soft { background: var(--accent-50); color: var(--accent); border: 1px solid var(--accent-50); border-radius: 14px; font-weight: 700; }
.jlw-btn-soft:hover { background: var(--accent-100); color: var(--accent-600); }
.jlw-btn-gold { background: var(--gold); border: none; color: #2B1D00; font-weight: 800; border-radius: 12px; }
.jlw-btn-gold:hover { background: var(--gold-600); color: #2B1D00; }
.jlw-btn-light { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; font-weight: 700; }
.jlw-btn-light:hover { background: rgba(255,255,255,.22); color: #fff; }
.btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-600); --bs-btn-hover-border-color: var(--accent-600); --bs-btn-active-bg: var(--accent-600); --bs-btn-active-border-color: var(--accent-600); }
.btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: 14px; border: 1px solid var(--line); background-color: var(--surface);
    padding: .7rem .95rem; font-size: .95rem; color: var(--ink);
}
.form-control::placeholder { color: #A3A3AD; }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(46,49,146,.12); }
.form-label { font-weight: 700; font-size: .82rem; color: var(--ink-2); margin-bottom: .35rem; }
.input-group-text { border-radius: 14px; border-color: var(--line); background: var(--surface); font-weight: 700; }
.is-invalid { border-color: #D93838 !important; }

/* ---------- Search pill ---------- */
.jlw-search { position: relative; display: block; }
.jlw-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.jlw-search input {
    width: 100%; height: 50px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--surface); padding: 0 46px; font-size: .95rem; color: var(--ink); outline: none;
}
.jlw-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(46,49,146,.12); }
.jlw-search .jlw-search-spin { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }

/* ---------- Chips ---------- */
.jlw-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.jlw-chips::-webkit-scrollbar { display: none; }
.jlw-chip {
    flex-shrink: 0; height: 36px; padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
    font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; transition: background .15s ease, color .15s ease;
}
.jlw-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.jlw-chip--clear { color: var(--accent); border-color: var(--accent-100); background: var(--accent-50); }

/* ---------- Cards ---------- */
.jlw-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; border: 0; }
a.jlw-card { display: block; text-decoration: none; color: inherit; }
.jlw-glass { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); }

/* ---------- Section title ---------- */
.jlw-section-title {
    display: flex; align-items: center; gap: 8px;
    font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; color: var(--ink);
    margin: 0 0 12px;
}
.jlw-section-title i { color: var(--accent); font-size: 1rem; }
.jlw-section-title .link-more { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--accent); text-decoration: none; }

/* ---------- Dark hero card ---------- */
.jlw-hero {
    background: var(--ink); color: #fff; border-radius: var(--r-xl);
    padding: 20px; box-shadow: var(--sh-2); position: relative; overflow: hidden;
}
.jlw-hero { background: var(--accent); }
.jlw-hero::after {
    content: ""; position: absolute; width: 190px; height: 190px; right: -70px; top: -70px;
    border-radius: 50%; border: 22px solid rgba(245,166,35,.85);
}
.jlw-hero::before {
    content: ""; position: absolute; width: 26px; height: 26px; right: 26px; bottom: 22px;
    background: rgba(245,166,35,.9); transform: rotate(45deg); border-radius: 4px;
}
.jlw-hero > * { position: relative; z-index: 1; }
.jlw-hero .kicker { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.jlw-hero .title { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 4px; color: #fff; }
.jlw-hero .meta { font-size: .85rem; color: rgba(255,255,255,.75); }
.jlw-hero .greeting { font-size: 1.2rem; font-weight: 800; }
.jlw-hero .sub { font-size: .82rem; color: rgba(255,255,255,.7); }

/* ---------- Quick nav ---------- */
.jlw-quicknav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.jlw-quicknav-item { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: var(--ink); }
.jlw-quicknav-icon {
    width: 56px; height: 56px; border-radius: 18px; background: var(--surface);
    box-shadow: var(--sh-1); display: flex; align-items: center; justify-content: center;
    color: var(--accent); font-size: 1.3rem; transition: box-shadow .15s ease;
}
.jlw-quicknav-item:hover .jlw-quicknav-icon { box-shadow: var(--sh-2); }
.jlw-quicknav-item:active .jlw-quicknav-icon { opacity: .75; }
.jlw-quicknav-item small { font-size: .72rem; font-weight: 700; color: var(--ink-2); text-align: center; line-height: 1.2; }

/* ---------- Horizontal scroller ---------- */
.jlw-hscroll {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -16px; padding: 2px 16px 10px; scrollbar-width: none;
    scroll-padding-inline: 16px; /* snap respects the 16px gutter instead of the screen edge */
}
.jlw-hscroll::-webkit-scrollbar { display: none; }
.jlw-hscroll > * { scroll-snap-align: start; }
.jlw-chip-row { scroll-snap-type: x mandatory; scrollbar-width: none; }
.jlw-chip-row::-webkit-scrollbar { display: none; }

/* ---------- Event: featured card ---------- */
.jlw-ev-feature {
    flex: 0 0 78%; max-width: 320px; background: var(--surface); border-radius: var(--r-lg);
    box-shadow: var(--sh-1); overflow: hidden; text-decoration: none; color: var(--ink);
}
.jlw-ev-feature:hover { color: var(--ink); box-shadow: var(--sh-2); }
.jlw-ev-media { position: relative; height: 160px; background: var(--accent-50); }
.jlw-ev-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jlw-ev-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent-50), #E3E6F7); color: var(--accent); font-size: 2rem;
}
.jlw-ev-body { padding: 12px 14px 14px; }
.jlw-ev-kicker { font-size: .74rem; font-weight: 800; color: var(--gold-600); letter-spacing: .02em; text-transform: uppercase; }
.jlw-ev-title { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jlw-ev-meta { font-size: .8rem; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jlw-going { font-size: .78rem; font-weight: 700; color: var(--ink-2); margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; }
.jlw-going i { color: var(--accent); }

.jlw-date-badge {
    position: absolute; top: 10px; left: 10px; background: #fff; border-radius: 12px;
    width: 46px; padding: 5px 0; text-align: center; line-height: 1.05; box-shadow: var(--sh-1);
}
.jlw-date-badge .d { display: block; font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.jlw-date-badge .m { display: block; font-weight: 800; font-size: .62rem; color: var(--red); text-transform: uppercase; letter-spacing: .06em; }
.jlw-media-chip { position: absolute; top: 10px; right: 10px; }

.jlw-price-chip {
    display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
    background: var(--green-50); color: var(--green); font-weight: 800; font-size: .75rem; white-space: nowrap;
}
.jlw-price-chip.is-paid { background: var(--ink); color: #fff; }

/* ---------- Event: list row ---------- */
.jlw-ev-row {
    display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--surface);
    border-radius: var(--r-lg); box-shadow: var(--sh-1); text-decoration: none; color: var(--ink);
}
.jlw-ev-row:hover { color: var(--ink); box-shadow: var(--sh-2); }
.jlw-ev-thumb { width: 78px; height: 78px; border-radius: 16px; overflow: hidden; flex-shrink: 0; position: relative; background: var(--accent-50); }
.jlw-ev-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jlw-ev-thumb .jlw-thumb-date {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--accent); line-height: 1.05;
}
.jlw-thumb-date .d { font-weight: 800; font-size: 1.4rem; }
.jlw-thumb-date .m { font-weight: 800; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }

.jlw-date-chip {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 12px; background: var(--accent-50); color: var(--accent);
    font-weight: 800; line-height: 1.05; flex-shrink: 0;
}
.jlw-date-chip .d { font-size: 1rem; }
.jlw-date-chip .m { font-size: .6rem; text-transform: uppercase; }

/* ---------- Event detail ---------- */
.jlw-cover { position: relative; height: 290px; margin: 0 -16px; background: var(--accent-50); overflow: hidden; }
.jlw-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jlw-cover .jlw-ev-placeholder { font-size: 3rem; }
.jlw-cover-btn {
    position: absolute; top: 14px; left: 16px; width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.95); color: var(--ink); border: 0; box-shadow: var(--sh-1);
    display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 1.1rem; z-index: 2;
}
.jlw-cover-btn--right { left: auto; right: 16px; }
.jlw-sheet {
    position: relative; margin: -28px -16px 0; padding: 22px 16px 0;
    background: var(--bg); border-radius: 28px 28px 0 0;
}
.jlw-info-list { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 4px 14px; margin: 16px 0; }
.jlw-info-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none; color: var(--ink); }
.jlw-info-row + .jlw-info-row { border-top: 1px solid var(--line); }
.jlw-info-row .ico {
    width: 42px; height: 42px; border-radius: 13px; background: var(--accent-50); color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0;
}
.jlw-info-row .t { font-weight: 800; font-size: .92rem; }
.jlw-info-row .s { font-size: .8rem; color: var(--muted); }
.jlw-progress { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 6px; }
.jlw-progress > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

.jlw-going-block { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 14px; margin-bottom: 18px; }
.jlw-avatar-stack { display: flex; padding-left: 10px; }
.jlw-avatar-stack > * { margin-left: -10px; border: 2px solid #fff !important; box-shadow: none !important; }

.jlw-notice { border-radius: var(--r-md); padding: 12px 14px; font-size: .88rem; background: var(--bg); color: var(--ink-2); display: flex; gap: 10px; align-items: flex-start; }
.jlw-notice i { font-size: 1.05rem; margin-top: 1px; }
.jlw-notice.is-danger { background: var(--red-50); color: #9B1C1C; }
.jlw-notice.is-warning { background: var(--amber-50); color: #8A5A00; }
.jlw-notice.is-success { background: var(--green-50); color: #13603E; }
.jlw-amount { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.jlw-qr-box { background: var(--surface); border: 1px dashed var(--accent-100); border-radius: var(--r-lg); padding: 14px; text-align: center; }
.jlw-qr-box img { max-width: 220px; width: 100%; border-radius: 10px; }

.jlw-cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    background: var(--surface); border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px rgba(17,17,20,.06);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}
.jlw-cta-inner { max-width: 520px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jlw-cta-price .label { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.jlw-cta-price .value { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.jlw-cta-actions { display: flex; align-items: center; gap: 8px; }
.jlw-state-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 14px;
    background: var(--bg); color: var(--ink-2); font-weight: 800; font-size: .85rem;
}
.jlw-state-chip.is-success { background: var(--green-50); color: var(--green); }
.jlw-state-chip.is-warning { background: var(--amber-50); color: #8A5A00; }

/* ---------- Pass (wallet style) ---------- */
.jlw-pass { max-width: 380px; margin: 0 auto; background: var(--surface); border-radius: 26px; box-shadow: var(--sh-2); overflow: hidden; }
.jlw-pass-top { background: var(--ink); color: #fff; padding: 22px 22px 26px; position: relative; overflow: hidden; }
.jlw-pass-top { background: var(--accent); }
.jlw-pass-top::after { content: ""; position: absolute; width: 170px; height: 170px; right: -60px; top: -60px; border-radius: 50%; border: 20px solid rgba(245,166,35,.85); }
.jlw-pass-top > * { position: relative; z-index: 1; }
.jlw-pass-tear { position: relative; height: 0; border-top: 2px dashed var(--line); margin: 0 22px; }
.jlw-pass-tear::before, .jlw-pass-tear::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); }
.jlw-pass-tear::before { left: -34px; } .jlw-pass-tear::after { right: -34px; }
.jlw-pass-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: left; }
.jlw-pass-grid .k { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.jlw-pass-grid .v { font-weight: 800; font-size: .85rem; }

/* ---------- Bottom nav (Material 3 style) ---------- */
.jlw-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 24px rgba(17,17,20,.06);
}
.jlw-bottomnav-inner { max-width: 520px; margin: 0 auto; display: flex; justify-content: space-around; }
.jlw-nav-link {
    flex: 1; text-decoration: none; color: var(--muted);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-size: .7rem; font-weight: 700;
}
.jlw-nav-link .ico { width: 58px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: background .2s ease; }
.jlw-nav-link.active { color: var(--ink); }
.jlw-nav-link.active .ico { background: var(--accent-50); color: var(--accent); }

/* ---------- Offcanvas ---------- */
.jlw-offcanvas { background: var(--surface); color: var(--ink); max-width: 300px; }
.jlw-offcanvas .offcanvas-header { border-bottom: 1px solid var(--line); }
.jlw-offcanvas .list-group-item {
    background: transparent; color: var(--ink); border: none; border-radius: 12px;
    padding: 12px 12px; display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: .92rem;
}
.jlw-offcanvas .list-group-item i { color: var(--muted); width: 22px; text-align: center; font-size: 1.05rem; }
.jlw-offcanvas .list-group-item:hover { background: var(--bg); }
.jlw-offcanvas .list-group-item.active { background: var(--accent-50); color: var(--accent); }
.jlw-offcanvas .list-group-item.active i { color: var(--accent); }

/* ---------- Avatars ---------- */
.jlw-avatar { border-radius: 50%; object-fit: cover; display: block; }
.jlw-avatar-fallback { display: flex; align-items: center; justify-content: center; border-radius: 50%; letter-spacing: .02em; }

/* ---------- Birthday ---------- */
.jlw-birthday-card { background: var(--gold-50); border: 1px solid #F4E1B5; border-radius: var(--r-lg); }
.jlw-confetti-emoji { display: inline-block; animation: jlwBounce 1.8s ease infinite; }
@keyframes jlwBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.jlw-emoji-picker button { font-size: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 50%; width: 44px; height: 44px; }
.jlw-emoji-picker button.active { background: var(--accent-50); border-color: var(--accent); }
.jlw-wish-bubble { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Floating WhatsApp ---------- */
.jlw-fab { width: 52px; height: 52px; background: #25D366; box-shadow: 0 8px 20px rgba(37,211,102,.35); border: 0; }

/* ---------- Badges / alerts ---------- */
.badge { border-radius: 999px; font-weight: 700; padding: .4em .75em; }
.badge.bg-success { background: var(--green) !important; }
.badge.bg-warning { background: var(--gold) !important; color: #3A2A00 !important; }
.badge.bg-danger { background: var(--accent) !important; }
.alert { border-radius: var(--r-md); border: 0; }

/* ---------- Skeleton ---------- */
.jlw-skeleton { background: linear-gradient(90deg, #ECECF0 25%, #F6F6F8 37%, #ECECF0 63%); background-size: 400% 100%; animation: jlwShimmer 1.4s ease infinite; border-radius: 10px; }
@keyframes jlwShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Motion (opacity only on wrappers; transforms only on leaf items, released after) ---------- */
.jlw-fade-in { animation: jlwFade .3s ease backwards; }
@keyframes jlwFade { from { opacity: 0; } to { opacity: 1; } }
.jlw-stagger > * { animation: jlwRise .4s var(--ease) backwards; }
@keyframes jlwRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.jlw-stagger > *:nth-child(2) { animation-delay: .04s; } .jlw-stagger > *:nth-child(3) { animation-delay: .08s; }
.jlw-stagger > *:nth-child(4) { animation-delay: .12s; } .jlw-stagger > *:nth-child(5) { animation-delay: .16s; }
.jlw-stagger > *:nth-child(n+6) { animation-delay: .2s; }
.jlw-spinner { color: var(--accent); }

/* ---------- Toasts ---------- */
#jlwToastStack { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 8px; width: calc(100% - 32px); max-width: 420px; pointer-events: none; }
.jlw-toast { pointer-events: auto; background: var(--ink); color: #fff; border-radius: 14px; box-shadow: var(--sh-2); padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; font-weight: 600; animation: jlwToastIn .25s var(--ease) both; }
.jlw-toast i { font-size: 1.05rem; margin-top: 1px; }
.jlw-toast.success i { color: #4ADE80; } .jlw-toast.error i { color: #F87171; }
.jlw-toast.info i { color: #93C5FD; } .jlw-toast.warning i { color: #FBBF24; }
.jlw-toast .close-x { margin-left: auto; background: none; border: 0; color: rgba(255,255,255,.6); font-size: 1.1rem; line-height: 1; }
.jlw-toast.jlw-toast-out { animation: jlwToastOut .2s ease forwards; }
@keyframes jlwToastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes jlwToastOut { to { opacity: 0; transform: translateY(-8px); } }

/* ---------- Splash ---------- */
#jlwSplash { position: fixed; inset: 0; z-index: 4000; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .35s ease, visibility .35s ease; }
#jlwSplash.jlw-splash-hide { opacity: 0; visibility: hidden; pointer-events: none; }
#jlwSplash .splash-logo { width: 76px; height: 76px; border-radius: 24px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 16px; }
#jlwSplash .splash-title { font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
#jlwSplash .splash-sub { font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--muted); margin-top: 2px; }
#jlwSplash .splash-bar { width: 120px; height: 4px; border-radius: 999px; background: var(--line); margin-top: 22px; overflow: hidden; }
#jlwSplash .splash-bar span { display: block; width: 40%; height: 100%; background: var(--accent); border-radius: 999px; animation: jlwSplashBar 1s ease-in-out infinite; }
@keyframes jlwSplashBar { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* ---------- Bootstrap modals (gallery etc.) ---------- */
.modal-content { border-radius: var(--r-lg); border: 0; }
html.jlw-modal-open, body.jlw-modal-open { overflow: hidden !important; }


/* =====================================================================
   Additions: logo, media placeholders, announcements, profile, misc
   ===================================================================== */
.jlw-logo { width: 40px; height: 40px; object-fit: contain; display: block; }
.jlw-logo-lg { width: 88px; height: 88px; object-fit: contain; }
.jlw-brand-name { color: var(--accent); }

.jlw-media-img { object-fit: cover; display: block; }
.jlw-media-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background-color: var(--accent-50);
    background-image: repeating-linear-gradient(45deg, rgba(46,49,146,.04) 0 12px, transparent 12px 24px);
    color: var(--accent); overflow: hidden;
}
.jlw-media-wm { width: 34%; max-width: 90px; min-width: 32px; opacity: .22; filter: grayscale(.2); }
.jlw-media-label { font-size: .72rem; font-weight: 700; color: var(--muted); }
.jlw-img-fallback { object-fit: cover; background: var(--accent-50); }

.jlw-month-label { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 14px 4px 2px; }
.jlw-month-label:first-child { margin-top: 0; }

.jlw-stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jlw-stat-strip > div { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 12px; text-align: center; }
.jlw-stat-strip .n { font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; color: var(--accent); }
.jlw-stat-strip .l { font-size: .7rem; font-weight: 700; color: var(--muted); }

/* Announcements */
.jlw-notice-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.jlw-notice-card .bar { width: 4px; background: var(--gold); align-self: stretch; flex-shrink: 0; }
.jlw-notice-card.is-pinned .bar { background: var(--red); }
.jlw-notice-card .t { font-weight: 800; letter-spacing: -.01em; }
.jlw-pin { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: .08em; }

/* Member profile */
.jlw-profile-head { background: var(--accent); border-radius: var(--r-xl); padding: 26px 18px 64px; color: #fff; position: relative; overflow: hidden; text-align: center; }
.jlw-profile-head::after { content: ""; position: absolute; width: 170px; height: 170px; left: -60px; top: -60px; border-radius: 50%; border: 20px solid rgba(245,166,35,.85); }
.jlw-profile-head > * { position: relative; z-index: 1; }
.jlw-profile-avatar { margin: -54px auto 0; width: fit-content; padding: 4px; background: var(--bg); border-radius: 50%; position: relative; z-index: 2; }
.jlw-action-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jlw-action { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1); text-decoration: none; color: var(--ink); font-weight: 700; font-size: .78rem; }
.jlw-action i { font-size: 1.2rem; color: var(--accent); }
.jlw-action.is-wa i { color: #1DA851; }
.jlw-action.is-disabled { opacity: .45; pointer-events: none; }

/* =====================================================================
   Round 3: notifications, birthdays, carousel, quote, gallery, zoom
   ===================================================================== */
html, body { overflow-x: clip; }
.jlw-bell-badge { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: .64rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }

.jlw-notif { display: flex; align-items: flex-start; gap: 12px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 12px; }
.jlw-notif.is-unread { box-shadow: inset 3px 0 0 var(--gold), var(--sh-1); }
.jlw-notif.is-unread .fw-bold::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-left: 6px; vertical-align: middle; }
.jlw-notif-ico { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; }

.jlw-bday-card { background: linear-gradient(160deg, #FFF8E8 0%, #FFFFFF 60%); border: 1px solid #F4E1B5; border-radius: var(--r-xl); padding: 16px; box-shadow: var(--sh-1); }
.jlw-bday-badge { position: absolute; right: -6px; bottom: -6px; font-size: 1.3rem; }
.jlw-wish-composer { background: var(--surface); border-radius: var(--r-lg); padding: 12px; box-shadow: var(--sh-1); }
.jlw-wish-bubble-v2 { background: var(--surface); border: 1px solid var(--line); border-radius: 4px 16px 16px 16px; padding: 8px 12px; display: inline-block; max-width: 100%; }
.jlw-wish-reply { display: flex; gap: 8px; background: var(--accent-50); color: var(--accent-600); border-radius: 16px 4px 16px 16px; padding: 8px 12px; margin-left: 12px; }
.jlw-wish-reply i { margin-top: 2px; }

.jlw-carousel { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-2); }
.jlw-carousel .carousel-item { height: 200px; background: var(--accent-50); }
.jlw-carousel .carousel-item > a, .jlw-carousel .carousel-item > div { display: block; width: 100%; height: 100%; position: relative; }
.jlw-carousel .carousel-item img, .jlw-carousel .carousel-item .jlw-media-img, .jlw-carousel .carousel-item .jlw-media-placeholder { width: 100%; height: 100%; object-fit: cover; }
.jlw-carousel .jlw-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 26px; color: #fff; background: linear-gradient(0deg, rgba(17,17,20,.78), rgba(17,17,20,0)); }
.jlw-carousel .jlw-cap .t { font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; line-height: 1.25; }
.jlw-carousel .jlw-cap .s { font-size: .8rem; opacity: .85; }
.jlw-carousel .carousel-indicators { margin-bottom: .55rem; }
.jlw-carousel .carousel-indicators [data-bs-target] { width: 7px; height: 7px; border-radius: 50%; border: 0; background: #fff; opacity: .55; }
.jlw-carousel .carousel-indicators .active { width: 20px; border-radius: 999px; background: var(--gold); opacity: 1; }

.jlw-quote-card { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-1); padding: 18px 18px 16px; position: relative; overflow: hidden; }
.jlw-quote-card::before { content: "\201C"; position: absolute; right: 12px; top: -18px; font-size: 7rem; line-height: 1; color: var(--gold); opacity: .25; font-family: Georgia, serif; }
.jlw-quote-card .q { font-weight: 700; font-size: 1rem; line-height: 1.55; color: var(--ink); position: relative; }
.jlw-quote-card .a { color: var(--gold-600); font-weight: 800; font-size: .82rem; margin-top: 8px; }

.jlw-photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.jlw-photo-strip img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; display: block; }
.jlw-photo-strip img:first-child { grid-column: span 2; grid-row: span 2; border-radius: 16px; }

.jlw-masonry { columns: 2; column-gap: 8px; }
.jlw-masonry-item { width: 100%; border-radius: 14px; margin-bottom: 8px; display: block; break-inside: avoid; box-shadow: var(--sh-1); }

.jlw-qr-wrap svg { display: block; width: 220px; height: 220px; }
main img:not(.jlw-logo):not(.jlw-logo-lg):not(.jlw-media-wm) { cursor: zoom-in; }
main a img, main button img { cursor: pointer; }
.fancybox__container { z-index: 5000 !important; }

/* =====================================================================
   Round 4: auth, home, programmes, about, fill images, person cards
   ===================================================================== */
.jlw-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; opacity: 0; }
.jlw-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jlw-contain { object-fit: contain !important; background: var(--accent-50); }

/* Fill: whole image visible over a blurred copy of itself (nothing cropped, no empty bands) */
.jlw-fill { position: relative; overflow: hidden; background: #1B1B20; }
.jlw-fill::before { content: ""; position: absolute; inset: -24px; background: var(--jlw-fill) center / cover no-repeat; filter: blur(22px) saturate(1.25); opacity: .9; transform: scale(1.12); }
.jlw-fill::after { content: ""; position: absolute; inset: 0; background: rgba(17,17,20,.12); }
.jlw-fill-img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
.jlw-cover .jlw-fill, .jlw-carousel .jlw-fill { width: 100%; height: 100%; }

/* ---------- Auth (login / OTP / admin login) ---------- */
body.jlw-auth-body { background: var(--accent); min-height: 100vh; }
.jlw-auth { min-height: 100vh; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; }
.jlw-auth-hero { position: relative; overflow: hidden; color: #fff; text-align: center; padding: 56px 24px 64px; flex-shrink: 0; }
.jlw-auth-hero .ring { position: absolute; border-radius: 50%; border: 22px solid rgba(245,166,35,.85); }
.jlw-auth-hero .r1 { width: 230px; height: 230px; right: -90px; top: -90px; }
.jlw-auth-hero .r2 { width: 140px; height: 140px; left: -70px; bottom: -40px; border-width: 14px; border-color: rgba(255,255,255,.12); }
.jlw-auth-hero .sq { position: absolute; width: 22px; height: 22px; background: rgba(245,166,35,.9); transform: rotate(45deg); border-radius: 4px; }
.jlw-auth-hero .s1 { left: 34px; top: 46px; } .jlw-auth-hero .s2 { right: 46px; bottom: 34px; width: 14px; height: 14px; background: rgba(215,38,46,.9); }
.jlw-auth-logo { width: 104px; height: 104px; margin: 0 auto 14px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(0,0,0,.25); position: relative; z-index: 1; }
.jlw-auth-logo img { width: 82px; height: 82px; object-fit: contain; }
.jlw-auth-brand { font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; position: relative; z-index: 1; }
.jlw-auth-sub { font-size: .66rem; font-weight: 800; letter-spacing: .16em; color: rgba(255,255,255,.7); margin-top: 4px; position: relative; z-index: 1; }
.jlw-auth-sheet { flex: 1; background: var(--bg); border-radius: 30px 30px 0 0; margin-top: -26px; padding: 30px 22px 32px; position: relative; z-index: 2; }
.jlw-auth-foot { margin-top: 28px; font-size: .8rem; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; background: var(--surface); border-radius: var(--r-md); padding: 12px 14px; }
.jlw-auth-foot i { color: var(--accent); }
.jlw-phone-field { display: flex; align-items: center; background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.jlw-phone-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(46,49,146,.12); }
.jlw-phone-field .cc { padding: 0 14px; font-weight: 800; color: var(--ink-2); border-right: 1px solid var(--line); height: 56px; display: flex; align-items: center; white-space: nowrap; }
.jlw-phone-field input { flex: 1; border: 0; outline: none; height: 56px; padding: 0 14px; font-size: 1.15rem; font-weight: 700; letter-spacing: .06em; background: transparent; min-width: 0; }
.jlw-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.jlw-otp input { width: 100%; aspect-ratio: 1 / 1.15; max-height: 64px; text-align: center; font-size: 1.5rem; font-weight: 800; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); outline: none; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.jlw-otp input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(46,49,146,.12); }
.jlw-otp input.filled { border-color: var(--accent); background: var(--accent-50); color: var(--accent); }
.jlw-icon-field { position: relative; }
.jlw-icon-field > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.jlw-icon-field .form-control { padding-left: 42px; height: 52px; }
.jlw-icon-field .eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); padding: 6px 8px; }

/* ---------- Home ---------- */
.jlw-greet { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-1); padding: 14px; margin-top: 4px; }
.jlw-greet-avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gold) !important; }
.jlw-greet-name { font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.15; }
.jlw-id-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; color: var(--accent); background: var(--accent-50); border-radius: 999px; padding: 2px 8px; }
.jlw-date-tile { width: 50px; border-radius: 14px; background: var(--accent); color: #fff; text-align: center; padding: 6px 0; line-height: 1.05; }
.jlw-date-tile .d { display: block; font-weight: 800; font-size: 1.2rem; }
.jlw-date-tile .m { display: block; font-weight: 800; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }

.jlw-carousel .carousel-item { height: 210px; }

.jlw-ticket { display: flex; background: var(--accent); color: #fff; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-2); position: relative; }
.jlw-ticket::after { content: ""; position: absolute; width: 150px; height: 150px; right: 50px; top: -80px; border-radius: 50%; border: 18px solid rgba(245,166,35,.8); }
.jlw-ticket-main { flex: 1; padding: 18px; position: relative; z-index: 1; min-width: 0; }
.jlw-ticket .kicker { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.jlw-ticket .title { font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; margin: 4px 0 6px; line-height: 1.25; }
.jlw-ticket .meta { font-size: .8rem; color: rgba(255,255,255,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jlw-countdown { display: flex; gap: 8px; }
.jlw-countdown > div { background: rgba(255,255,255,.12); border-radius: 12px; padding: 6px 10px; text-align: center; min-width: 54px; line-height: 1.1; }
.jlw-countdown strong { display: block; font-size: 1.2rem; font-weight: 800; }
.jlw-countdown span { font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .08em; }
.jlw-ticket-side { width: 84px; flex-shrink: 0; border-left: 2px dashed rgba(255,255,255,.25); display: flex; flex-direction: column; position: relative; z-index: 1; }
.jlw-ticket-side::before, .jlw-ticket-side::after { content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); }
.jlw-ticket-side::before { top: -10px; } .jlw-ticket-side::after { bottom: -10px; }
.jlw-ticket-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #2B1D00; background: var(--gold); text-decoration: none; font-weight: 800; font-size: .72rem; }
.jlw-ticket-btn i { font-size: 1.3rem; }
.jlw-ticket-btn.alt { background: transparent; color: #fff; }
.jlw-ticket-btn:hover { color: inherit; filter: brightness(1.05); }

.jlw-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 6px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-1); padding: 16px 8px; }
.jlw-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); }
.jlw-tile .ico { width: 52px; height: 52px; border-radius: 17px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; transition: transform .15s var(--ease); }
.jlw-tile:active .ico { transform: scale(.9); }
.jlw-tile .lbl { font-size: .7rem; font-weight: 700; color: var(--ink-2); text-align: center; line-height: 1.2; }

.jlw-bday-strip { background: linear-gradient(160deg, #FFF6E2 0%, #FFFFFF 70%); border: 1px solid #F4E1B5; border-radius: var(--r-xl); padding: 14px; }
.jlw-bday-person { flex: 0 0 auto; width: 76px; text-align: center; text-decoration: none; color: var(--ink); }
.jlw-bday-person .n { font-size: .72rem; font-weight: 800; margin-top: 4px; }
.jlw-bday-person .w { display: inline-block; margin-top: 3px; font-size: .64rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--gold); color: #2B1D00; }
.jlw-bday-person .w.done { background: var(--green-50); color: var(--green); }

.jlw-prog-mini { flex: 0 0 64%; max-width: 250px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; text-decoration: none; color: var(--ink); }
.jlw-prog-mini .img { height: 110px; position: relative; background: var(--accent-50); }
.jlw-prog-mini .in { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.jlw-prog-mini .b { padding: 10px 12px 12px; }
.jlw-prog-mini .t { font-weight: 800; font-size: .95rem; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jlw-prog-mini .m { font-size: .74rem; color: var(--muted); font-weight: 700; margin-top: 2px; }
.jlw-prog-mini .m i { color: var(--accent); }

.jlw-fom { display: flex; align-items: center; gap: 14px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-1); padding: 14px; text-decoration: none; color: var(--ink); }
.jlw-fom .ring { padding: 3px; border-radius: 50%; background: conic-gradient(var(--gold), var(--red), var(--accent), var(--gold)); flex-shrink: 0; }
.jlw-fom .ring > * { border: 3px solid #fff !important; box-shadow: none !important; }

/* ---------- Programmes ---------- */
.jlw-tag { display: inline-block; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-600); }
.jlw-cat-scroller { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; scroll-padding-inline: 16px; }
.jlw-cat-scroller::-webkit-scrollbar { display: none; }
.jlw-cat { flex: 0 0 auto; width: 84px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; }
.jlw-cat .ico { width: 58px; height: 58px; border-radius: 20px; background: var(--surface); box-shadow: var(--sh-1); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; transition: background .15s ease, color .15s ease; }
.jlw-cat .lbl { font-size: .68rem; font-weight: 800; color: var(--ink-2); text-align: center; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jlw-cat.active .ico { background: var(--accent); color: #fff; box-shadow: 0 8px 18px rgba(46,49,146,.3); }
.jlw-cat.active .lbl { color: var(--accent); }
.jlw-prog-feature { flex: 0 0 84%; max-width: 340px; height: 230px; border-radius: var(--r-xl); overflow: hidden; position: relative; text-decoration: none; color: #fff; box-shadow: var(--sh-2); }
.jlw-prog-feature-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.jlw-prog-feature-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 16px 16px; background: linear-gradient(0deg, rgba(17,17,20,.88), rgba(17,17,20,0)); }
.jlw-prog-feature-body .jlw-tag { color: var(--gold); }
.jlw-prog-feature-body .t { font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.jlw-prog-feature-body .s { font-size: .8rem; opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jlw-prog-feature-body .m { font-size: .75rem; font-weight: 700; margin-top: 6px; opacity: .9; }
.jlw-prog-card { display: block; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; text-decoration: none; color: var(--ink); }
.jlw-prog-card:hover { color: var(--ink); box-shadow: var(--sh-2); }
.jlw-prog-star { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #2B1D00; display: flex; align-items: center; justify-content: center; }
.jlw-prog-joined { position: absolute; top: 10px; right: 10px; background: var(--green); color: #fff; border-radius: 999px; font-size: .72rem; font-weight: 800; padding: 4px 10px; }
.jlw-prog-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jlw-prog-facts > div { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 10px 8px; text-align: center; line-height: 1.2; min-width: 0; }
.jlw-prog-facts i { color: var(--accent); font-size: 1.05rem; display: block; margin-bottom: 3px; }
.jlw-prog-facts strong { display: block; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jlw-prog-facts span { font-size: .64rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.jlw-check { width: 22px; height: 22px; border-radius: 50%; background: var(--green-50); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .85rem; margin-top: 1px; }

/* ---------- About ---------- */
.jlw-about-hero { position: relative; min-height: 250px; border-radius: var(--r-xl); overflow: hidden; background: var(--accent); display: flex; align-items: flex-end; box-shadow: var(--sh-2); }
.jlw-about-hero::after { content: ""; position: absolute; width: 190px; height: 190px; right: -70px; top: -70px; border-radius: 50%; border: 22px solid rgba(245,166,35,.85); z-index: 1; }
.jlw-about-hero-img { position: absolute !important; inset: 0; width: 100%; height: 100%; }
.jlw-about-hero-body { position: relative; z-index: 2; width: 100%; padding: 70px 20px 22px; background: linear-gradient(0deg, rgba(23,24,80,.92), rgba(23,24,80,0)); }
.jlw-about-logo { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 50%; padding: 6px; margin-bottom: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.jlw-mv-card { background: var(--accent); color: #fff; border-radius: var(--r-lg); padding: 16px; position: relative; overflow: hidden; }
.jlw-mv-card.is-gold { background: var(--gold-50); color: var(--ink); border: 1px solid #F4E1B5; }
.jlw-mv-card .ico { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 1.1rem; }
.jlw-mv-card.is-gold .ico { background: var(--gold); color: #2B1D00; }
.jlw-timeline { position: relative; padding-left: 22px; }
.jlw-timeline::before { content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--accent-100); }
.jlw-timeline-item { position: relative; display: flex; gap: 10px; align-items: baseline; padding: 6px 0 12px; }
.jlw-timeline-item::before { content: ""; position: absolute; left: -20px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--bg); }
.jlw-timeline-item .yr { font-weight: 800; color: var(--accent); min-width: 48px; }
.jlw-timeline-item .tt { font-weight: 600; }
.jlw-leader-card { flex: 0 0 auto; width: 118px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 14px 10px; text-align: center; text-decoration: none; color: var(--ink); }

/* ---------- Person cards (committee / directory) ---------- */
.jlw-person-card { display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 14px 8px 12px; text-decoration: none; color: var(--ink); }
.jlw-person-card:hover { color: var(--ink); box-shadow: var(--sh-2); }
.jlw-person-card .nm { font-weight: 800; font-size: .8rem; line-height: 1.25; margin-top: 6px; width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jlw-person-card .rl { font-size: .7rem; font-weight: 700; color: var(--gold-600); margin-top: 2px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jlw-avatar-fallback { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center; line-height: 1 !important; }
.jlw-cover .jlw-fill-img, .jlw-carousel .carousel-item .jlw-fill-img, .jlw-fill .jlw-fill-img { object-fit: contain !important; width: 100%; height: 100%; }
.jlw-fill .jlw-fill-img { cursor: zoom-in; }

/* =====================================================================
   Round 5: avatar links, carousel, gallery, face of month, thoughts, auth polish
   ===================================================================== */
.jlw-avatar-fallback { text-decoration: none !important; }
a .jlw-avatar-fallback, a:hover .jlw-avatar-fallback { text-decoration: none !important; }

/* Carousel: caption must sit above the image layers */
.jlw-carousel .jlw-cap { z-index: 3; }
.jlw-carousel .carousel-indicators { z-index: 4; }
.jlw-carousel .carousel-item .jlw-media-img, .jlw-carousel .carousel-item > a > img, .jlw-carousel .carousel-item > div > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Gallery albums */
.jlw-album { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--sh-1); text-decoration: none; color: #fff; background: var(--accent-50); }
.jlw-album:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
.jlw-album .jlw-media-img, .jlw-album .jlw-media-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; }
.jlw-album .ov { position: absolute; inset: auto 0 0 0; padding: 40px 12px 12px; background: linear-gradient(0deg, rgba(17,17,20,.85), rgba(17,17,20,0)); }
.jlw-album .ov .t { font-weight: 800; line-height: 1.2; }
.jlw-album .cnt { position: absolute; top: 10px; right: 10px; background: rgba(17,17,20,.6); backdrop-filter: blur(4px); border-radius: 999px; padding: 3px 9px; font-size: .72rem; font-weight: 800; }
.jlw-album-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

/* Face of the month */
.jlw-fom-hero { background: var(--accent); color: #fff; border-radius: var(--r-xl); padding: 26px 18px 22px; text-align: center; position: relative; overflow: hidden; box-shadow: var(--sh-2); }
.jlw-fom-hero::before { content: ""; position: absolute; width: 200px; height: 200px; left: -80px; top: -80px; border-radius: 50%; border: 22px solid rgba(245,166,35,.85); }
.jlw-fom-hero::after { content: "★"; position: absolute; right: 18px; top: 10px; font-size: 3rem; color: rgba(245,166,35,.35); }
.jlw-fom-hero > * { position: relative; z-index: 1; }
.jlw-fom-photo { width: fit-content; margin: 0 auto 12px; padding: 4px; border-radius: 50%; background: conic-gradient(#F5A623, #D7262E, #fff, #F5A623); }
.jlw-fom-photo > * { border: 4px solid var(--accent) !important; box-shadow: none !important; }
.jlw-fom-month { display: inline-block; background: var(--gold); color: #2B1D00; font-weight: 800; font-size: .72rem; letter-spacing: .1em; border-radius: 999px; padding: 4px 12px; margin-bottom: 8px; }
.jlw-fom-cite { font-size: .92rem; line-height: 1.6; color: rgba(255,255,255,.9); margin: 12px auto 0; max-width: 420px; }
.jlw-hall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* Thoughts (quote of the day) */
.jlw-thought-today { background: var(--accent); color: #fff; border-radius: var(--r-xl); padding: 24px 20px; position: relative; overflow: hidden; box-shadow: var(--sh-2); }
.jlw-thought-today::before { content: "\201C"; position: absolute; left: 10px; top: -30px; font-size: 9rem; line-height: 1; font-family: Georgia, serif; color: rgba(245,166,35,.35); }
.jlw-thought-today .q { position: relative; font-size: 1.2rem; font-weight: 700; line-height: 1.55; }
.jlw-thought-today .a { position: relative; color: var(--gold); font-weight: 800; margin-top: 10px; }
.jlw-thought { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 14px 16px; border-left: 4px solid var(--gold); }

/* Auth polish */
.jlw-auth-hero { background:
    radial-gradient(circle at 20% 110%, rgba(245,166,35,.25) 0, transparent 45%),
    radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.4px) 0 0 / 18px 18px,
    linear-gradient(160deg, #3438A8 0%, #2E3192 45%, #1F2170 100%); }
.jlw-auth-logo { animation: jlwFloat 4s ease-in-out infinite; }
.jlw-auth-logo::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid rgba(245,166,35,.8); animation: jlwPulse 2.6s ease-out infinite; }
@keyframes jlwFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes jlwPulse { 0% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.jlw-auth-sheet { animation: jlwSheetUp .45s cubic-bezier(.2,.8,.2,1) both; box-shadow: 0 -12px 30px rgba(0,0,0,.12); }
@keyframes jlwSheetUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.jlw-steps { display: flex; gap: 6px; margin-bottom: 18px; }
.jlw-steps span { height: 5px; flex: 1; border-radius: 999px; background: var(--line); }
.jlw-steps span.on { background: var(--accent); }
.jlw-auth-help { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); text-decoration: none; color: var(--ink); font-weight: 700; font-size: .85rem; box-shadow: var(--sh-1); }
.jlw-auth-help i { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-50); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.jlw-auth-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.jlw-auth-perks div { background: var(--surface); border-radius: var(--r-md); padding: 10px 6px; text-align: center; font-size: .7rem; font-weight: 700; color: var(--ink-2); box-shadow: var(--sh-1); }
.jlw-auth-perks i { display: block; font-size: 1.15rem; color: var(--accent); margin-bottom: 2px; }
/* Events list */
.jlw-spot { position: relative; display: block; height: 230px; border-radius: var(--r-xl); overflow: hidden; color: #fff; text-decoration: none; box-shadow: var(--sh-2); }
.jlw-spot-img { position: absolute !important; inset: 0; width: 100%; height: 100%; }
.jlw-spot-body { position: absolute; inset: auto 0 0 0; padding: 60px 16px 16px; background: linear-gradient(0deg, rgba(17,17,20,.9), rgba(17,17,20,0)); }
.jlw-spot-kicker { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.jlw-spot .t { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.2; margin-top: 2px; }
.jlw-spot .m { font-size: .8rem; opacity: .85; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jlw-spot:hover { color: #fff; }
.jlw-ev-thumb .jlw-media-img, .jlw-ev-thumb .jlw-media-placeholder { width: 100%; height: 100%; }
.jlw-thumb-badge { position: absolute; left: 5px; bottom: 5px; background: #fff; border-radius: 9px; padding: 2px 6px; font-size: .6rem; font-weight: 800; color: var(--red); text-transform: uppercase; line-height: 1.1; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.jlw-thumb-badge b { display: block; color: var(--ink); font-size: .85rem; }
.jlw-going-tag { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: .7rem; font-weight: 800; color: var(--green); }

/* Gate scanner inside the member app */
.jlw-menu-scan { background: var(--accent-50) !important; color: var(--accent) !important; font-weight: 800 !important; }
.jlw-scan-box { position: relative; border-radius: 18px; overflow: hidden; background: #111114; aspect-ratio: 1 / 1; }
.jlw-scan-box #jlw-qr-reader { width: 100%; height: 100%; }
.jlw-scan-box #jlw-qr-reader video { width: 100% !important; height: 100% !important; object-fit: cover; }
.jlw-scan-box #jlw-qr-reader img, .jlw-scan-box #qr-shaded-region { display: none !important; }
.jlw-scan-frame { position: absolute; inset: 14%; pointer-events: none; }
.jlw-scan-frame span { position: absolute; width: 38px; height: 38px; border: 5px solid var(--gold); }
.jlw-scan-frame span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.jlw-scan-frame span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.jlw-scan-frame span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.jlw-scan-frame span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.jlw-scan-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: #fff; background: rgba(17,17,20,.72); font-weight: 600; }
.jlw-scan-result { display: flex; align-items: center; gap: 12px; border: 2px solid; border-radius: 18px; padding: 14px; animation: jlwPop .25s cubic-bezier(.2,.8,.2,1) both; }
@keyframes jlwPop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.jlw-hscroll::after { content: ""; flex: 0 0 4px; } /* trailing space after the last card */

/* =====================================================================
   Round 7: compact auth screens, developer credit, polish
   ===================================================================== */
.jlw-auth { min-height: 100vh; min-height: 100dvh; }
.jlw-auth-hero { padding: 26px 20px 40px; }
.jlw-auth-hero .r1 { width: 180px; height: 180px; right: -80px; top: -80px; border-width: 18px; }
.jlw-auth-hero .s1 { left: 24px; top: 26px; }
.jlw-auth-logo { width: 78px; height: 78px; margin-bottom: 10px; }
.jlw-auth-logo img { width: 62px; height: 62px; }
.jlw-auth-brand { font-size: 1.25rem; }
.jlw-auth-sub { font-size: .6rem; letter-spacing: .14em; }
.jlw-auth-sheet { margin-top: -22px; border-radius: 26px 26px 0 0; padding: 22px 20px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; }
.jlw-auth-body { flex: 1 0 auto; }
.jlw-auth-title { font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; margin: 0 0 2px; }
.jlw-auth-lead { color: var(--muted); font-size: .9rem; margin: 0 0 16px; }
.jlw-steps { margin-bottom: 14px; }
.jlw-phone-field .cc, .jlw-phone-field input { height: 52px; }
.jlw-otp { gap: 7px; }
.jlw-otp input { aspect-ratio: auto; height: 54px; max-height: none; font-size: 1.35rem; border-radius: 13px; }
.jlw-icon-field .form-control { height: 50px; }
.jlw-auth-note { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; margin-top: 14px; font-size: .8rem; color: var(--muted); line-height: 1.45; }
.jlw-auth-note i { color: var(--accent); }
.jlw-auth-note a { color: var(--accent); font-weight: 700; text-decoration: none; }

/* Developer credit */
.jlw-builtby { text-align: center; }
.jlw-builtby--auth { margin-top: 22px; padding-top: 14px; }
.jlw-builtby-label { display: flex; align-items: center; gap: 10px; font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #A3A3AD; margin-bottom: 8px; }
.jlw-builtby-label span { flex: 1; height: 1px; background: var(--line); }
.jlw-builtby-brand { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--ink); }
.jlw-builtby-brand img { height: 30px; width: auto; max-width: 170px; object-fit: contain; cursor: pointer !important; }
.jlw-builtby-brand span { font-weight: 800; font-size: .82rem; }
.jlw-builtby-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.jlw-builtby-links a { font-size: .74rem; font-weight: 700; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.jlw-builtby-addr { font-size: .7rem; color: var(--muted); margin-top: 4px; }
.jlw-builtby--menu { padding: 14px 16px 6px; }
.jlw-builtby--menu .jlw-builtby-brand img { height: 24px; }
.jlw-builtby--menu .jlw-builtby-brand span { font-size: .74rem; }
.jlw-builtby--page { margin-top: 28px; padding: 16px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); }

/* Polish: section titles with a small saffron marker, consistent rhythm */
.jlw-section-title { display: flex; align-items: center; gap: 8px; }
.jlw-section-title::before { content: ""; width: 4px; height: 16px; border-radius: 4px; background: var(--gold); flex-shrink: 0; }
.jlw-section-title .link-more { margin-left: auto; }
.jlw-home > .jlw-section-title { margin-top: 4px; }