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

/* ── LIGHT ── */
:root{
  --green:#15803d;--green-bg:rgba(21,128,61,.08);--green-border:rgba(21,128,61,.22);
  --bg:#f4f3ee;--surface:#ffffff;--surface2:#f1efe8;
  --border:#e7e3d8;--border2:#d8d3c4;
  --text:#1b1a16;--sub:#45433b;--muted:#8a857a;--muted2:#aaa498;
  --blue:#2563eb;--blue-bg:rgba(37,99,235,.07);--blue-border:rgba(37,99,235,.16);
  --red:#dc2626;--red-bg:rgba(220,38,38,.07);--red-border:rgba(220,38,38,.18);
  --amber:#b45309;
  --shadow:0 1px 2px rgba(40,35,20,.05),0 1px 4px rgba(40,35,20,.04);
  --shadow-md:0 8px 24px rgba(40,35,20,.12);
  --shadow-lg:0 8px 24px rgba(40,35,20,.12);
  --ctrl-bg:rgba(244,243,238,.85);
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Plus Jakarta Sans',-apple-system,sans-serif;
}

/* ── DARK ── */
[data-theme="dark"]{
  --green:#34d399;--green-bg:rgba(52,211,153,.1);--green-border:rgba(52,211,153,.24);
  --bg:#0c0d0b;--surface:#16171a;--surface2:#1e1f24;
  --border:#282a30;--border2:#363842;
  --text:#ecebe3;--sub:#c5c2b8;--muted:#857f74;--muted2:#4d4a42;
  --blue:#60a5fa;--blue-bg:rgba(96,165,250,.1);--blue-border:rgba(96,165,250,.2);
  --amber:#f59e0b;
  --shadow:0 1px 3px rgba(0,0,0,.5);
  --shadow-md:0 10px 30px rgba(0,0,0,.55);
  --shadow-lg:0 10px 30px rgba(0,0,0,.55);
  --ctrl-bg:rgba(12,13,11,.86);
}

body{
  font-family:var(--font-body);background:var(--bg);color:var(--text);
  min-height:100vh;transition:background .25s,color .25s;-webkit-font-smoothing:antialiased
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(720px 440px at 50% -8%,rgba(21,128,61,.06),transparent 70%)
}
[data-theme="dark"] body::before{
  background:radial-gradient(720px 440px at 50% -8%,rgba(52,211,153,.07),transparent 70%)
}

/* ── NAVBAR ── */
.navbar{
  position:sticky;top:0;z-index:100;height:52px;
  background:rgba(244,243,238,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border)
}
[data-theme="dark"] .navbar{background:rgba(12,13,11,.91)}
.navbar-inner{
  max-width:1320px;margin:0 auto;display:flex;align-items:center;
  height:100%;padding:0 1.25rem;gap:.75rem
}
.nav-logo{display:flex;align-items:center;gap:.42rem;text-decoration:none;flex-shrink:0}
.nav-logo .logo-badge{
  font-family:var(--font-display);font-weight:700;background:var(--green);color:#fff;
  font-size:.6rem;letter-spacing:.06em;padding:.2rem .38rem;border-radius:6px
}
.nav-links{display:flex;align-items:center;gap:.15rem;margin:0 auto}
.nav-links .theme-btn{margin-left:.35rem}
.nav-link{
  display:inline-flex;align-items:center;gap:.28rem;text-decoration:none;
  padding:.35rem .8rem;border-radius:99px;font-size:.75rem;font-weight:600;
  color:var(--muted);transition:all .18s
}
.nav-link:hover{color:var(--text);background:var(--surface2)}
.nav-link.active{background:var(--green);color:#fff;box-shadow:0 3px 10px rgba(21,128,61,.22)}
[data-theme="dark"] .nav-link.active{box-shadow:0 3px 10px rgba(52,211,153,.18)}
.nav-actions{display:flex;align-items:center;gap:.45rem;flex-shrink:0}

/* ── BUTTONS ── */
.btn-sm{
  display:inline-flex;align-items:center;gap:.28rem;padding:.3rem .7rem;border-radius:8px;
  font-size:.73rem;font-weight:700;border:none;cursor:pointer;transition:all .18s;
  text-decoration:none;white-space:nowrap;font-family:var(--font-body)
}
.btn-profile,.btn-view{background:var(--green-bg);border:1px solid var(--green-border);color:var(--green)}
.btn-profile:hover,.btn-view:hover{background:var(--green);color:#fff}
.btn-logout{background:var(--surface);border:1px solid var(--border);color:var(--muted)}
.btn-logout:hover{border-color:var(--border2);color:var(--text)}
.btn-login{background:var(--green);color:#fff;box-shadow:0 2px 8px rgba(21,128,61,.2)}
.btn-login:hover{filter:brightness(1.08)}
.btn-wa-hero{
  display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  background:#25D366;color:#fff;padding:.42rem 1.1rem;border-radius:99px;
  font-size:.78rem;font-weight:700;white-space:nowrap;
  box-shadow:0 2px 10px rgba(37,211,102,.35);transition:all .2s
}
.btn-wa-hero:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 5px 16px rgba(37,211,102,.5)}
.btn-wa-hero svg{width:14px;height:14px;flex-shrink:0}

/* ── THEME TOGGLE ── */
.theme-btn{
  background:none;border:1px solid var(--border);border-radius:9px;
  padding:.34rem .44rem;cursor:pointer;line-height:1;color:var(--muted);
  transition:all .18s;display:flex;align-items:center
}
.theme-btn:hover{border-color:var(--border2);color:var(--text)}
.theme-btn svg{width:15px;height:15px;display:block}

/* ── MOBILE NAV ── */
@media(max-width:640px){
  .navbar{height:52px}
  .content-subnav{top:52px}
  .member-subnav{top:90px}
  .nav-link{padding:.38rem .6rem;font-size:.7rem}
  .nav-link svg{width:13px!important;height:13px!important}
  .nav-links .theme-btn{margin-left:.15rem;padding:.4rem}
  .theme-btn svg{width:15px!important;height:15px!important}
  .navbar-inner{padding:0 .6rem;gap:.2rem}
  .nav-links{gap:.05rem}
  .btn-sm{padding:.28rem .52rem;font-size:.68rem}
  .btn-login span{display:none}
}

/* ── CONTENT SUB-NAV ── */
.content-subnav{
  position:sticky;top:52px;z-index:99;
  background:rgba(244,243,238,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border)
}
[data-theme="dark"] .content-subnav{background:rgba(12,13,11,.88)}
.csub-inner{
  max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:center;
  height:38px;padding:0 1.25rem;gap:.1rem;overflow-x:auto;scrollbar-width:none
}
.csub-inner::-webkit-scrollbar{display:none}
.csub-link{
  display:inline-flex;align-items:center;gap:.28rem;text-decoration:none;
  padding:.28rem .75rem;border-radius:99px;font-size:.72rem;font-weight:600;
  color:var(--muted);transition:all .15s;white-space:nowrap;flex-shrink:0
}
.csub-link:hover{color:var(--text);background:var(--surface2)}
.csub-link.active{background:var(--green);color:#fff;box-shadow:0 2px 8px rgba(21,128,61,.2)}
[data-theme="dark"] .csub-link.active{box-shadow:0 2px 8px rgba(52,211,153,.15)}
.csub-link svg{width:13px;height:13px;flex-shrink:0}

/* ── CREATOR SUB-NAV (Superadmin only) ── */
.creator-subnav{
  position:sticky;top:92px;z-index:97;
  background:rgba(99,102,241,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(99,102,241,.15)
}
[data-theme="dark"] .creator-subnav{background:rgba(99,102,241,.1);border-bottom-color:rgba(129,140,248,.18)}
.creator-subnav-label{
  display:inline-flex;align-items:center;gap:.25rem;
  font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:#818cf8;padding:.15rem .55rem;margin-right:.2rem;flex-shrink:0;opacity:.8
}
.creator-subnav .csub-link{color:var(--hub-c,#818cf8)}
.creator-subnav .csub-link:hover{color:var(--hub-c,#6366f1);background:rgba(99,102,241,.08)}
.creator-subnav .csub-link.active{background:var(--hub-c,#6366f1);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.csub-more{position:relative}
.csub-more-btn{background:none;border:none;font-family:inherit;padding:.28rem .65rem}
.csub-dropdown{
  position:fixed;transform:translateX(-50%);
  background:rgba(245,244,255,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(99,102,241,.22);border-radius:12px;
  padding:.3rem;min-width:140px;
  box-shadow:0 8px 28px rgba(99,102,241,.18),0 2px 8px rgba(0,0,0,.07);
  z-index:9999;display:none;white-space:nowrap
}
[data-theme="dark"] .csub-dropdown{
  background:rgba(18,17,32,.94);
  border-color:rgba(129,140,248,.22);
  box-shadow:0 8px 28px rgba(0,0,0,.45)
}
.csub-more.open .csub-dropdown{display:block}
.csub-dropdown-item{
  display:flex;align-items:center;gap:.28rem;text-decoration:none;
  padding:.38rem .65rem;border-radius:7px;font-size:.72rem;font-weight:600;
  color:var(--hub-c,#818cf8);transition:background .12s
}
.csub-dropdown-item svg{width:13px;height:13px;flex-shrink:0}
.csub-dropdown-item:hover{background:rgba(99,102,241,.1)}
.csub-dropdown-item.active{background:var(--hub-c,#6366f1);color:#fff}
@media(max-width:640px){.creator-subnav{top:92px}}

/* ── MEMBER SUB-NAV ── */
.member-subnav{
  position:sticky;top:52px;z-index:98;
  background:rgba(21,128,61,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(21,128,61,.15);
  box-shadow:0 1px 0 rgba(21,128,61,.08)
}
[data-theme="dark"] .member-subnav{background:rgba(52,211,153,.06);border-bottom-color:rgba(52,211,153,.12)}
.subnav-inner{
  max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:center;
  height:40px;padding:0 1.25rem;gap:.1rem;overflow-x:auto;scrollbar-width:none;position:relative
}
.subnav-inner::-webkit-scrollbar{display:none}
.subnav-user-link{
  display:flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:700;
  color:var(--muted);flex-shrink:0;padding:.28rem .7rem;border-radius:99px;
  text-decoration:none;transition:all .15s;white-space:nowrap
}
.subnav-user-link:hover{color:var(--text);background:var(--surface2)}
.subnav-user-link.active{background:var(--green);color:#fff;box-shadow:0 2px 8px rgba(21,128,61,.2)}
[data-theme="dark"] .subnav-user-link.active{box-shadow:0 2px 8px rgba(52,211,153,.15)}
.subnav-user-link svg{width:12px;height:12px;flex-shrink:0}
.subnav-link{
  display:inline-flex;align-items:center;gap:.24rem;text-decoration:none;
  padding:.28rem .7rem;border-radius:99px;font-size:.72rem;font-weight:600;
  color:var(--muted);transition:all .15s;white-space:nowrap;flex-shrink:0
}
.subnav-link:hover{color:var(--text);background:var(--surface2)}
.subnav-link.active{background:var(--green);color:#fff;box-shadow:0 2px 8px rgba(21,128,61,.2)}
[data-theme="dark"] .subnav-link.active{box-shadow:0 2px 8px rgba(52,211,153,.15)}
.subnav-link svg{width:12px;height:12px;flex-shrink:0}
.subnav-link-admin{background:rgba(217,119,6,.12);border:1px solid rgba(217,119,6,.32);color:#b45309}
.subnav-link-admin:hover{background:rgba(217,119,6,.2);color:#92400e}
[data-theme="dark"] .subnav-link-admin{background:rgba(217,119,6,.18);border-color:rgba(251,191,36,.28);color:#fde68a}
[data-theme="dark"] .subnav-link-admin:hover{background:rgba(217,119,6,.28);color:#fef3c7}
.subnav-sep{width:1px;height:16px;background:var(--border);flex-shrink:0;margin:0 .15rem}
.subnav-logout{
  position:absolute;right:1.25rem;flex-shrink:0;display:inline-flex;align-items:center;gap:.24rem;
  text-decoration:none;padding:.28rem .62rem;border-radius:99px;font-size:.68rem;font-weight:600;
  color:var(--muted);border:1px solid var(--border);transition:all .15s;white-space:nowrap;
  background:none;cursor:pointer;font-family:var(--font-body)
}
.subnav-logout:hover{color:var(--text);border-color:var(--border2);background:var(--surface2)}
.subnav-logout svg{width:11px;height:11px;flex-shrink:0}
@media(max-width:640px){
  .member-subnav{top:52px}
}
@media(max-width:600px){
  .subnav-inner{padding:0 .75rem;gap:.05rem;justify-content:flex-start;-webkit-overflow-scrolling:touch}
  .subnav-user-link{padding:.26rem .52rem;font-size:.7rem}
  .subnav-link{padding:.26rem .55rem;font-size:.7rem}
  .subnav-logout{position:static;padding:.26rem .52rem;margin-left:.15rem}
}

/* ── FOOTER ── */
.footer{
  position:relative;z-index:1;text-align:center;padding:1.3rem 1rem;
  font-size:.7rem;color:var(--muted2);font-family:var(--font-display);
  font-style:italic;border-top:1px solid var(--border)
}

/* ── INCOME BADGE & MODAL ── */
.income-badge{display:inline-flex;vertical-align:middle;flex-shrink:0;overflow:visible}

/* Hero pill (on member profile, below pena) */
.income-hero-pill{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:.38rem;cursor:pointer;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);
  border-radius:99px;padding:.22rem .75rem .22rem .2rem;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .18s
}
.income-hero-pill:hover{background:rgba(255,255,255,.22)}
.income-hero-pill-label{font-size:.72rem;font-weight:800;color:#fff;letter-spacing:.02em}
.income-hero-pill-range{font-size:.64rem;color:rgba(255,255,255,.6);margin-left:.05rem}

/* Income section (below MBTI) */
.income-section{}
.income-section-body{display:flex;align-items:center;gap:.9rem}
.income-section-meta{flex:1;min-width:0}
.income-section-label{font-size:1.05rem;font-weight:800;color:var(--text);letter-spacing:-.01em;line-height:1.2}
.income-section-range{font-size:.76rem;color:var(--muted);margin-top:.18rem}
.income-section-cta{
  display:inline-flex;align-items:center;gap:.3rem;margin-top:.55rem;
  font-size:.72rem;font-weight:700;color:var(--blue,#2563eb);
  background:none;border:none;cursor:pointer;padding:0;
  text-decoration:underline;text-underline-offset:2px
}
.income-info-btn{
  display:inline-flex;align-items:center;gap:.28rem;
  font-size:.68rem;font-weight:700;color:var(--muted);
  background:var(--surface2);border:1px solid var(--border);
  border-radius:99px;padding:.22rem .6rem;cursor:pointer;
  white-space:nowrap;transition:color .15s,border-color .15s
}
.income-info-btn:hover{color:var(--text);border-color:var(--border2,var(--border))}

/* Modal */
.income-modal{
  position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  padding:1rem
}
.income-modal-box{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:1rem;padding:1.25rem 1.25rem 1rem;
  max-width:360px;width:100%;max-height:84vh;overflow-y:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  animation:incomeModalIn .2s cubic-bezier(.22,.68,0,1.2) both
}
@keyframes incomeModalIn{from{opacity:0;transform:scale(.93) translateY(10px)}to{opacity:1;transform:none}}
.income-tier-list{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-direction:column;gap:.2rem}
.income-tier-list li{
  display:flex;align-items:center;gap:.5rem;padding:.3rem .45rem;
  border-radius:.4rem;font-size:.82rem;color:var(--text);
  border:1px solid transparent;transition:background .12s
}
.income-tier-list li .itl-badge{width:28px;height:28px;flex-shrink:0}
.income-tier-list li:hover{background:var(--surface2)}
.income-tier-current{background:var(--surface2)!important;border-color:var(--border)!important;font-weight:700}

/* Proof panel upload area hover */
.proof-upload-area:hover{border-color:var(--blue,#3b82f6)!important;color:var(--text)!important}