@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;600;700&family=Karla:wght@400;600;700&display=swap");

/* JCI Zone Conference — phone first. Volunteers use this on a phone at 11pm. */
:root{
  --zc-navy:#1b0b4f; --zc-blue:#3a1c8c; --zc-accent:#7a0ae0;
  --zc-bg:#f7f5fd; --zc-line:#e5e0f3; --zc-gold:#fff8e6; --zc-gold-line:#f0dfa8;
}
body{background:var(--zc-bg);-webkit-tap-highlight-color:transparent;}
.min-w-0{min-width:0}

.zc-nav{background:var(--zc-navy)}
.zc-main{padding-bottom:78px;max-width:960px}

/* ---- bottom tabs: 5 screens, thumb reachable ---- */
.zc-tabs{
  position:fixed;bottom:0;left:0;right:0;z-index:1030;
  display:flex;background:#fff;border-top:1px solid var(--zc-line);
  padding-bottom:env(safe-area-inset-bottom);
}
.zc-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 2px 6px;text-decoration:none;color:#6f6a95;font-size:.68rem;
}
.zc-tab svg{width:21px;height:21px}
.zc-tab.on{color:var(--zc-accent);font-weight:600}

/* ---- cards ---- */
.zc-box{background:#fff;border:1px solid var(--zc-line);border-radius:10px;padding:12px}
.zc-box-h{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:#6f6a95;font-weight:600;margin-bottom:4px}
.zc-gold{background:var(--zc-gold);border-color:var(--zc-gold-line)}

/* ---- the headline stats. every one is a link. ---- */
.zc-stat{
  display:block;background:#fff;border:1px solid var(--zc-line);border-radius:10px;
  padding:10px 8px;text-decoration:none;color:inherit;height:100%;
}
.zc-stat:active{background:#f0eef7}
.zc-stat-l{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;color:#6f6a95;font-weight:600}
.zc-stat-n{display:block;font-size:1.6rem;font-weight:700;line-height:1.15;color:var(--zc-navy)}
.zc-stat-s{display:block;font-size:.7rem;color:#6f6a95}

.zc-kv{list-style:none;margin:0;padding:0;font-size:.82rem}
.zc-kv li{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dashed var(--zc-line)}
.zc-kv li:last-child{border:0}
.zc-kv a{text-decoration:none;color:#554f7d}
.zc-kv.zc-warn b,.zc-kv li.zc-warn b{color:#b45309}

.zc-t td,.zc-t th{padding:.4rem .35rem;vertical-align:middle}
.zc-t th{font-size:.68rem;text-transform:uppercase;color:#6f6a95;font-weight:600}
.zc-t a{text-decoration:none}
.zc-late{background:#fff4f4}

/* ---- status pills ---- */
.badge[class*="zc-s-"]{font-weight:600;font-size:.65rem}
.zc-s-new{background:#eae7f3;color:#5f547e}
.zc-s-contacted{background:#dbeafe;color:#1e40af}
.zc-s-interested{background:#fef3c7;color:#92400e}
.zc-s-not_interested{background:#f3f1f9;color:#9d94b8}
.zc-s-link_sent{background:#e0e7ff;color:#3730a3}
.zc-s-submitted{background:#fed7aa;color:#9a3412}
.zc-s-confirmed{background:#d1fae5;color:#065f46}

/* ---- person ---- */
.zc-avatar{width:64px;height:64px;border-radius:10px;object-fit:cover;flex-shrink:0;border:1px solid var(--zc-line)}
.zc-avatar-blank{display:flex;align-items:center;justify-content:center;background:var(--zc-blue);color:#fff;font-size:1.5rem;font-weight:600}
.zc-timeline{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--zc-line)}
.zc-timeline li{position:relative;padding:0 0 12px 10px}
.zc-timeline li:before{content:"";position:absolute;left:-19px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--zc-accent)}

/* ---- reimbursement: amber until acknowledged ---- */
.zc-reimb{border:1px solid var(--zc-line);border-radius:8px;padding:10px;margin-bottom:8px}
.zc-reimb-act{border-color:#ffd24a;background:#fffbf0}

/* ---- QR ---- */
.zc-qr{width:min(260px,72vw);height:auto;border:1px solid var(--zc-line);border-radius:10px;background:#fff;cursor:pointer}
.zc-qr-big{width:min(420px,94vw)}
.zc-refcode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.5rem;font-weight:700;letter-spacing:.16em;color:var(--zc-navy);margin-top:8px}
.zc-upi-qr{width:min(220px,60vw);border:1px solid var(--zc-line);border-radius:8px;background:#fff;padding:6px}

/* ---- public form ---- */
.zc-public{background:var(--zc-bg)}
.zc-public-head{background:#fff;color:#1b0b4f;padding:12px 0;border-bottom:1px solid #e8e2f6}
.zc-prev-img{max-height:150px;border-radius:8px;border:1px solid var(--zc-line)}
.zc-regno{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.7rem;font-weight:700;letter-spacing:.08em;color:var(--zc-navy);background:var(--zc-bg);border-radius:8px;padding:12px}

.zc-centre{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#fbf9ff,#f3effc);padding:16px}
.zc-card-wrap{width:100%;max-width:380px}

/* Inputs at 16px — anything smaller makes iOS zoom on focus */
.form-control,.form-select{font-size:16px}
@media(min-width:768px){.form-control,.form-select{font-size:.95rem}}

.nav-pills .nav-link{padding:.25rem .7rem;font-size:.82rem;border-radius:20px}
.nav-pills .nav-link.active{background:var(--zc-accent)}
.btn-primary{background:var(--zc-accent);border-color:var(--zc-accent)}

/* ============ registration wizard ============ */
.zc-steps{display:flex;gap:4px;margin-bottom:8px}
.zc-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.68rem;color:#a29ab8}
.zc-step span{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#eae7f3;color:#6f6a95;font-weight:700;font-size:.78rem;transition:.2s}
.zc-step.on{color:var(--zc-accent);font-weight:600}
.zc-step.on span{background:var(--zc-accent);color:#fff;transform:scale(1.1)}
.zc-step.done span{background:#22c55e;color:#fff}
.zc-step.done span:after{content:"✓";font-size:.8rem}
.zc-step.done span{font-size:0}

.zc-pane{animation:zcIn .22s ease}
@keyframes zcIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}

.zc-chips{display:flex;gap:6px;flex-wrap:wrap}
.zc-chip input{position:absolute;opacity:0;pointer-events:none}
.zc-chip span{display:inline-block;padding:8px 14px;border:1.5px solid var(--zc-line);border-radius:20px;
  font-size:.88rem;cursor:pointer;transition:.15s;background:#fff}
.zc-chip input:checked + span{border-color:var(--zc-accent);background:#eeeaf9;color:var(--zc-accent);font-weight:600}

.zc-invite{display:flex;align-items:center;gap:10px;background:#e8f6ec;border:1px solid #b7e0c4;
  border-radius:10px;padding:8px 12px;margin-bottom:12px}
.zc-invite-av{width:38px;height:38px;border-radius:50%;background:var(--zc-blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}

.zc-prev-round{width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid #22c55e}

/* ============ done + navigator ============ */
.zc-celebrate{background:#fff;border:1px solid var(--zc-line);border-radius:12px;padding:24px 16px;text-align:center}
.zc-tick{width:56px;height:56px;border-radius:50%;background:#22c55e;color:#fff;font-size:1.9rem;
  display:flex;align-items:center;justify-content:center;margin:0 auto 10px;animation:zcPop .35s ease}
@keyframes zcPop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}

.zc-nav-cta{border:1px solid #ccc1ed;background:linear-gradient(180deg,#f8f6fd,#efecf9)}
.zc-perks{list-style:none;padding:0;margin:0}
.zc-perks li{display:flex;gap:10px;padding:8px 0;border-bottom:1px dashed var(--zc-line)}
.zc-perks li:last-child{border:0}
.zc-perks span{font-size:1.2rem;flex-shrink:0}

/* ============ dark public pages (register / done) ============ */
.zc-dark{background:#12073a;color:#efeafa}
.zc-dark .zc-public-head{background:#190a49;border-bottom:1px solid #2a1270}
.zc-dark .card{background:#190a49;border:1px solid #2a1270;color:#efeafa}
.zc-dark .form-label{color:#efeafa}
.zc-dark .form-control,.zc-dark .form-select{
  background:#12073a;border-color:#2a1270;color:#efeafa}
.zc-dark .form-control::placeholder{color:#7f8f89}
.zc-dark .form-control:focus,.zc-dark .form-select:focus{
  background:#12073a;border-color:#ffbf02;color:#efeafa;box-shadow:0 0 0 2px rgba(200,149,46,.25)}
.zc-dark .bg-light{background:#12073a !important;color:#efeafa}
.zc-dark .text-muted{color:#9aa8a2 !important}
.zc-dark .input-group-text{background:#12073a;border-color:#2a1270;color:#9aa8a2}
.zc-dark .btn-outline-secondary{color:#ffbf02;border-color:#2a1270}
.zc-dark .btn-primary{background:#ffbf02;border-color:#ffbf02;color:#12073a;font-weight:700}
.zc-dark .btn-primary:hover{background:#ffd24a;border-color:#ffd24a;color:#12073a}
.zc-dark .zc-regno{background:#12073a;color:#ffd24a}
.zc-dark .zc-celebrate{background:#190a49;border-color:#2a1270}
.zc-dark .zc-nav-cta{border-color:#7a0ae0;background:linear-gradient(180deg,#1e0c4f,#1a0a46)}
.zc-dark .zc-invite{background:#123a2c;border-color:#1c5a44}
.zc-dark .btn-warning{background:#ffbf02;border-color:#ffbf02;color:#12073a}
.zc-dark .zc-steps .zc-step.on span{background:#ffbf02;color:#12073a}
.zc-dark .zc-steps .zc-step.on{color:#ffbf02}
.zc-dark .zc-steps .zc-step.done span{background:#2a9d6f}
.zc-dark .zc-chip span{background:#12073a;border-color:#2a1270;color:#efeafa}
.zc-dark .zc-chip input:checked + span{border-color:#ffbf02;background:rgba(200,149,46,.15);color:#ffd24a}
.zc-dark .progress{background:#2a1270}
.zc-dark .zc-prev-round{border-color:#2a9d6f}
.zc-dark details summary{color:#ffbf02}

/* accent download button inside the app (QR screens) */
.btn-brass-app{background:#ffbf02;border:none;color:#12073a;font-weight:700}
.btn-brass-app:hover{background:#ffd24a;color:#12073a}

/* Jagapoka logo on the dark register header */
.pub-logo{height:40px;width:auto;background:transparent;padding:0;display:block}
.zc-centre .zc-card-wrap .card img[alt="Jagapoka"]{background:transparent;padding:0}

/* light theme: register/public pages on warm paper to match the site */
body.zc-public{background:#fbf9ff}

/* ════════════════════════════════════════════════════════════════════
   JAGAPOKA THEME OVERRIDE — appended 22 Jul. The signed-in app now wears
   the public site's identity (lavender paper / deep indigo / violet accent / Fraunces).
   Nothing above this line was edited; these rules win by cascade.
   ════════════════════════════════════════════════════════════════════ */
:root{
  /* the Jagapoka palette, verbatim from site.css (derived from the logo) */
  --zc-page:   #fbf9ff;   /* warm paper */
  --zc-card:   #ffffff;
  --zc-ink:    #1b0b4f;   /* deep teal — text + dark surfaces */
  --zc-ink-70: #3c554e;
  --zc-line:   #e3dcf4;   /* hairlines on paper */
  --zc-brass:  #7a0ae0;   /* the accent */
  --zc-brass-soft:#f3eefc;
  --zc-muted:  #6b6390;
  --zc-good:   #1f6f4a;
  --zc-bad:    #a03c2e;
  --zc-warn:   #5d08b3;

  /* legacy token names still referenced around the views */
  --zc-navy: var(--zc-ink);
  --zc-blue: var(--zc-ink);
  --zc-accent: var(--zc-brass);
  --zc-bg: var(--zc-page);
  --zc-gold: var(--zc-brass-soft);
  --zc-gold-line: #e3d9f8;

  --f-disp: "Fraunces", Georgia, serif;
  --f-body: "Karla", system-ui, -apple-system, sans-serif;
}

body{
  background:var(--zc-page);
  color:var(--zc-ink);
  font-family:var(--f-body);
  -webkit-tap-highlight-color:transparent;
}
.min-w-0{min-width:0}

h1,h2,h3,.h1,.h2,.h3,.h4,.h5{
  font-family:var(--f-disp);
  color:var(--zc-ink);
  letter-spacing:.005em;
}

a{color:var(--zc-brass)}
a:hover{color:#5d08b3}

/* ---- top bar: deep teal, like the site's footer band ---- */
.zc-nav{background:var(--zc-ink);border-bottom:2px solid var(--zc-brass)}
.zc-nav .navbar-brand{font-family:var(--f-disp);letter-spacing:.01em}
.zc-brandmark{height:30px;width:auto;background:#fff;border-radius:6px;padding:2px 4px}
.zc-brandname{color:#fff}
.zc-nav .btn-outline-light{border-color:rgba(255,255,255,.45)}
.zc-nav .btn-outline-light:hover{background:var(--zc-brass);border-color:var(--zc-brass);color:#fff}

.zc-main{padding-bottom:82px;max-width:960px}

/* ---- bottom tabs: paper bar, brass for the active screen ---- */
.zc-tabs{
  position:fixed;bottom:0;left:0;right:0;z-index:1030;
  display:flex;background:var(--zc-card);border-top:1px solid var(--zc-line);
  box-shadow:0 -6px 18px -12px rgba(18,49,43,.35);
  padding-bottom:env(safe-area-inset-bottom);
}
.zc-tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 2px 6px;text-decoration:none;color:var(--zc-muted);font-size:.68rem;
}
.zc-tab svg{width:21px;height:21px}
.zc-tab.on{color:var(--zc-brass);font-weight:700}
.zc-tab.on svg{stroke-width:2.2}

/* ---- cards ---- */
.zc-box{background:var(--zc-card);border:1px solid var(--zc-line);border-radius:12px;padding:12px}
.zc-box-h{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--zc-muted);font-weight:700;margin-bottom:4px;
}
.zc-gold{background:var(--zc-brass-soft);border-color:var(--zc-gold-line)}

/* ---- headline stats: every one is a link ---- */
.zc-stat{
  display:block;background:var(--zc-card);border:1px solid var(--zc-line);border-radius:12px;
  padding:10px 8px;text-decoration:none;color:inherit;height:100%;
  transition:border-color .12s;
}
.zc-stat:hover{border-color:var(--zc-brass)}
.zc-stat:active{background:var(--zc-brass-soft)}
.zc-stat-l{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--zc-muted);font-weight:700}
.zc-stat-n{display:block;font-size:1.65rem;font-weight:600;line-height:1.15;color:var(--zc-ink);font-family:var(--f-disp)}
.zc-stat-s{display:block;font-size:.7rem;color:var(--zc-muted)}

.zc-kv{list-style:none;margin:0;padding:0;font-size:.82rem}
.zc-kv li{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dashed var(--zc-line)}
.zc-kv li:last-child{border:0}
.zc-kv a{text-decoration:none;color:var(--zc-ink-70)}
.zc-kv.zc-warn b,.zc-kv li.zc-warn b{color:var(--zc-warn)}

.zc-t td,.zc-t th{padding:.42rem .35rem;vertical-align:middle}
.zc-t th{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--zc-muted);font-weight:700}
.zc-t a{text-decoration:none;color:var(--zc-ink)}
.zc-t a:hover{color:var(--zc-brass)}
.zc-late{background:#fbf0ee}

/* ---- Bootstrap components, re-inked ---- */
.btn-primary{
  --bs-btn-bg:var(--zc-ink);--bs-btn-border-color:var(--zc-ink);
  --bs-btn-hover-bg:#150944;--bs-btn-hover-border-color:#150944;
  --bs-btn-active-bg:#150944;--bs-btn-active-border-color:#150944;
  font-weight:600;
}
.btn-success{
  --bs-btn-bg:var(--zc-good);--bs-btn-border-color:var(--zc-good);
  --bs-btn-hover-bg:#175a3b;--bs-btn-hover-border-color:#175a3b;
}
.btn-outline-secondary{
  --bs-btn-color:var(--zc-ink-70);--bs-btn-border-color:var(--zc-line);
  --bs-btn-hover-bg:var(--zc-brass-soft);--bs-btn-hover-border-color:var(--zc-brass);
  --bs-btn-hover-color:var(--zc-ink);
  --bs-btn-active-bg:var(--zc-brass);--bs-btn-active-border-color:var(--zc-brass);
}
.btn-outline-primary{
  --bs-btn-color:var(--zc-ink);--bs-btn-border-color:var(--zc-ink);
  --bs-btn-hover-bg:var(--zc-ink);--bs-btn-hover-border-color:var(--zc-ink);
}
.btn-dark{--bs-btn-bg:var(--zc-ink);--bs-btn-border-color:var(--zc-ink)}
.btn-link{color:var(--zc-brass)}

.nav-pills .nav-link{color:var(--zc-ink-70);font-weight:600}
.nav-pills .nav-link.active{background:var(--zc-ink)}

.form-control,.form-select{border-color:#d4cbee;border-radius:8px}
.form-control:focus,.form-select:focus{
  border-color:var(--zc-brass);
  box-shadow:0 0 0 .2rem rgba(176,125,30,.15);
}
.form-label{font-weight:600;color:var(--zc-ink)}

.progress{background:#f1ecfb}
.progress-bar{background:var(--zc-brass)}
.progress-bar.bg-success{background:var(--zc-good)!important}
.progress-bar.bg-danger{background:var(--zc-bad)!important}

.alert-success{--bs-alert-bg:#e8f2ec;--bs-alert-border-color:#bcd8c8;--bs-alert-color:#1f4a35}
.alert-danger{--bs-alert-bg:#f9ebe8;--bs-alert-border-color:#e5c2ba;--bs-alert-color:#7c3427}
.alert-info{--bs-alert-bg:var(--zc-brass-soft);--bs-alert-border-color:var(--zc-gold-line);--bs-alert-color:#5d08b3}
.alert-warning{--bs-alert-bg:#e9e6f4;--bs-alert-border-color:#cec5e9;--bs-alert-color:#5d08b3}

.text-primary{color:var(--zc-ink)!important}
.text-success{color:var(--zc-good)!important}
.text-danger{color:var(--zc-bad)!important}
.text-warning{color:var(--zc-warn)!important}
.badge.text-bg-primary{background:var(--zc-ink)!important}
.badge.text-bg-success{background:var(--zc-good)!important}
.badge.text-bg-danger{background:var(--zc-bad)!important}
.badge.text-bg-warning{background:#ffd24a!important;color:#1b0a49!important}
.badge.text-bg-info{background:var(--zc-brass-soft)!important;color:#5d08b3!important}
.badge.text-bg-light{background:#f1ecfb!important;color:var(--zc-ink-70)!important}

.dropdown-menu{border-color:var(--zc-line);border-radius:10px}
.dropdown-item:active{background:var(--zc-ink)}
.table{--bs-table-hover-bg:var(--zc-brass-soft)}

/* ---- CRM status pills, tuned to the palette ---- */
.badge[class*="zc-s-"]{font-weight:700;font-size:.65rem;letter-spacing:.02em}
.zc-s-new{background:#f1ecfb;color:#6b6390}
.zc-s-contacted{background:#e7e3f3;color:#3e2d70}
.zc-s-interested{background:#f3eefc;color:#5d08b3}
.zc-s-not_interested{background:#e6e2f2;color:#8c80ae}
.zc-s-link_sent{background:#e9e4f2;color:#5b4a86}
.zc-s-submitted{background:#dbd5ed;color:#5d08b3}
.zc-s-confirmed{background:#dcefe4;color:#1f6f4a}

/* ---- QR page ---- */
.zc-qr{max-width:250px;width:100%;border:1px solid var(--zc-line);border-radius:12px;background:#fff;padding:10px}
.zc-refcode{
  font-family:var(--f-disp);font-size:1.35rem;font-weight:600;
  letter-spacing:.35em;margin:10px 0 2px;color:var(--zc-ink);
}

/* ---- registration wizard chips (shared with /register) ---- */
.zc-chips{display:flex;gap:8px;flex-wrap:wrap}
.zc-chip input{position:absolute;opacity:0;pointer-events:none}
.zc-chip span{
  display:inline-block;padding:8px 16px;border:1.5px solid var(--zc-line);
  border-radius:999px;font-weight:600;color:var(--zc-ink-70);cursor:pointer;background:#fff;
  transition:all .12s;
}
.zc-chip input:checked + span{
  background:var(--zc-ink);border-color:var(--zc-ink);color:#fff;
}

/* fixed tab bar must never cover the last row (gesture-bar phones) —
   padding must track the bar's REAL height, which grows with
   env(safe-area-inset-bottom) on gesture-nav phones. A fixed px value
   here was leaving the last bit of content permanently unreachable on
   phones with a larger gesture bar, however far you scrolled.
   !important is REQUIRED: this element also carries Bootstrap's py-3
   utility class, which sets padding-bottom:1rem !important — without
   matching that, Bootstrap silently wins regardless of this value or
   source order, and the "fix" does nothing at all. */
.zc-main{padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important}

/* ── PRINT / FULL-PAGE CAPTURE ──────────────────────────────────────
   Screenshot-to-PDF tools use the print renderer. A position:fixed
   bottom bar makes them clip everything below the first viewport,
   which looks like "the page did not load fully". In print, unpin
   everything so captures show the whole page. */
@media print{
  .zc-tabs{display:none !important}
  .zc-savebar{position:static !important;background:none !important;padding:0 !important}
  .zc-main{padding-bottom:0 !important}
  .zc-nav{position:static !important}
  body{background:#fff !important}
}

/* ── DESKTOP: bottom tabs + save bar stay reachable without scrolling
   to the very end of the page. ──────────────────────────────────────
   sticky, not fixed: both still occupy their own row in the flow (so
   neither can ever overlap or trap content below it — the exact
   failure mode that got position:fixed removed from here on 23 Jul),
   but once that row reaches the bottom of the viewport it pins there
   while the rest of the page keeps scrolling underneath. margin-top:auto
   still does its job on short pages — the flex column pushes .zc-tabs
   to the bottom of the viewport even with nothing to scroll. */
@media (min-width: 992px){
  html{background:#fbf9ff;min-height:100%}
  body{min-height:100vh;display:flex;flex-direction:column}
  .zc-main{flex:1 0 auto;width:100%;padding-bottom:20px}
  .zc-tabs{
    position:sticky !important; bottom:0 !important; margin-top:auto;
    box-shadow:0 -6px 18px -12px rgba(18,49,43,.25);
    border-top:1px solid var(--zc-line,#e3dcf4);
  }
  .zc-savebar{
    position:sticky !important; bottom:0 !important; max-width:none;
    background:linear-gradient(180deg, rgba(250,247,239,0), rgba(250,247,239,.97) 35%) !important;
    padding:16px 0 12px !important;
  }
}
/* Defensive: nothing may ever disable page scroll (e.g. a modal that
   failed to clean up Bootstrap's .modal-open{overflow:hidden}).
   MUST be "visible", not "auto": any overflow value other than visible
   turns the element into its own scroll container, and since body here
   has no constrained height (it just grows to fit its content), it would
   never actually scroll itself — which breaks every position:sticky
   element on the page, because sticky then tracks body's own (static)
   scrollport instead of the real viewport, and so never visually sticks.
   "visible" still undoes a stuck "hidden" without creating that trap. */
html,body{overflow-y:visible !important;height:auto !important}
.zc-clickable{cursor:pointer}
.zc-clickable:hover{background:var(--zc-brass-soft,#f3eefc)}
.zc-rec-list .zc-rec-row{border-bottom:1px solid var(--zc-line,#e3dcf4)}
.zc-rec-list .zc-rec-row:last-child{border-bottom:none}
/* Bootstrap's py-3 (also on this element) sets padding-bottom !important,
   which silently wins over a plain inline style no matter its value —
   that's why the bottom tab bar kept covering the last bit of content
   even after "fixing" the padding number itself. !important here is
   required to actually beat it. */
.zc-nav-main{padding-bottom:calc(90px + env(safe-area-inset-bottom)) !important}

/* ── PERFORMANCE TILES (Navigator/Influencer "Your performance" section) ──
   A dedicated look instead of reusing the plain .zc-box everywhere: an
   icon badge, a colored accent bar, and a bit more visual weight so the
   numbers people care about most don't read as just another form field. */
.zc-perf-tile{
  background:var(--zc-card); border:1px solid var(--zc-line); border-radius:14px;
  padding:16px 14px; text-align:center; position:relative; overflow:hidden;
  height:100%; display:flex; flex-direction:column; justify-content:center;
}
.zc-perf-tile::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
}
.zc-perf-tile.zc-perf-direct::before{background:var(--zc-good)}
.zc-perf-tile.zc-perf-network::before{background:var(--zc-brass)}
.zc-perf-icon{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; margin:0 auto 8px; font-size:1.05rem;
}
.zc-perf-direct .zc-perf-icon{background:#e7f3ec; color:var(--zc-good)}
.zc-perf-network .zc-perf-icon{background:var(--zc-brass-soft); color:var(--zc-brass)}
.zc-perf-n{font-family:var(--f-disp); font-size:2rem; font-weight:600; line-height:1.1}
.zc-perf-l{font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--zc-muted); font-weight:700}
.zc-perf-s{font-size:.72rem; color:var(--zc-muted); margin-top:2px}

/* ── Personal greeting strip (My Code / Leaderboard / Guide) ──
   A small round avatar + "Hi Name" line, so these pages read as someone's
   own space rather than a generic report screen. */
.zc-hello{display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:14px}
.zc-hello-photo{
  width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:2px solid var(--zc-brass-soft);
}
.zc-hello-photo-fallback{
  width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex;
  align-items:center; justify-content:center; background:var(--zc-ink); color:#fff;
  font-family:var(--f-disp); font-weight:600; font-size:1.1rem;
}
.zc-hello-text{text-align:left; font-size:.84rem; color:var(--zc-muted); line-height:1.35}
.zc-hello-text strong{color:var(--zc-ink)}


/* ═══ Jagapoka spectrum layer (logo palette) — Bootstrap overrides ══ */
:root{
  --spectrum:linear-gradient(90deg,#f61455 0%,#fc690a 17%,#ffbf02 33%,#3fa914 50%,#03c8fd 66%,#0630fb 83%,#8403ed 100%);
  --bs-primary:#7a0ae0; --bs-primary-rgb:122,10,224;
  --bs-link-color:#6a0bd0; --bs-link-color-rgb:106,11,208; --bs-link-hover-color:#4f08a0; --bs-link-hover-color-rgb:79,8,160;
}
.zc-nav{border-bottom:3px solid transparent;border-image:var(--spectrum) 1}
.btn-primary{--bs-btn-bg:#7a0ae0;--bs-btn-border-color:#7a0ae0;--bs-btn-hover-bg:#6508c0;--bs-btn-hover-border-color:#6508c0;
  --bs-btn-active-bg:#5a07ab;--bs-btn-active-border-color:#5a07ab;--bs-btn-disabled-bg:#7a0ae0;--bs-btn-disabled-border-color:#7a0ae0;--bs-btn-color:#fff}
.btn-outline-primary{--bs-btn-color:#7a0ae0;--bs-btn-border-color:#7a0ae0;--bs-btn-hover-bg:#7a0ae0;--bs-btn-hover-border-color:#7a0ae0;
  --bs-btn-active-bg:#6508c0;--bs-btn-active-border-color:#6508c0;--bs-btn-hover-color:#fff}
.text-primary{color:#7a0ae0 !important}.bg-primary{background-color:#7a0ae0 !important}.border-primary{border-color:#7a0ae0 !important}
.form-control:focus,.form-select:focus{border-color:#a56bf0;box-shadow:0 0 0 .2rem rgba(122,10,224,.18)}
.form-check-input:checked{background-color:#7a0ae0;border-color:#7a0ae0}
.form-check-input:focus{border-color:#a56bf0;box-shadow:0 0 0 .2rem rgba(122,10,224,.18)}
.nav-pills .nav-link.active,.nav-pills .show>.nav-link{background-color:#7a0ae0}
.page-item.active .page-link{background-color:#7a0ae0;border-color:#7a0ae0}
.progress-bar{background-image:var(--spectrum);background-color:#7a0ae0}
.zc-brandmark{height:30px;width:auto;background:#fff;border-radius:8px;padding:2px 5px;box-sizing:content-box}
::selection{background:#ffbf02;color:#1b0b4f}