/* ── VARIABLES ─────────────────────────────────────── */
:root {
  --bg:     #0C0A0C;
  --bg2:    #18141A;
  --bg3:    #221C26;
  --gold:   #BC8154;
  --gold-l: #E0B488;
  --gold-xl:#F4D7BE;
  --beige:  #F7EEE2;
  --rose:   #C98B9A;
  --rose-l: #E6B7C2;
  --text:   rgba(252,248,250,0.90);
  --text-m: rgba(252,248,250,0.52);
  --text-d: rgba(252,248,250,0.30);
  --bdr:    rgba(201,139,154,0.16);
  --bdr-l:  rgba(201,139,154,0.36);
  --g-gold: linear-gradient(135deg,#B0764E,#D29A74,#EBC49E,#F3D9C6,#E9B9C6,#D99FB2);
  --sb-w:   240px;
  --ease:   cubic-bezier(0.16,1,0.3,1);
  --r:      16px;
  --rs:     11px;
}

/* ── RESET ─────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{height:100%;font-size:16px}
body{height:100%;font-family:'Poppins',sans-serif;font-weight:400;background:radial-gradient(120% 80% at 82% -5%,rgba(201,139,154,0.12),transparent 52%),radial-gradient(100% 70% at -5% 105%,rgba(188,129,84,0.08),transparent 50%),var(--bg);background-attachment:fixed;color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{cursor:pointer;border:none;background:none;color:inherit;font:inherit}
input,textarea,select{font:inherit}
a{color:inherit;text-decoration:none}
svg{display:block;width:20px;height:20px;flex-shrink:0}
details>summary{list-style:none;-webkit-appearance:none}
details>summary::-webkit-details-marker{display:none}

/* ── LOGIN ─────────────────────────────────────────── */
.login-screen{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:var(--bg)}
#p-canvas{position:absolute;inset:0;pointer-events:none}
.login-box{
  position:relative;z-index:2;width:420px;max-width:calc(100vw - 40px);
  padding:52px 44px;
  background:rgba(20,14,8,0.95);
  border:1px solid var(--bdr);
  box-shadow:0 0 80px rgba(201,139,154,0.07),0 40px 80px rgba(0,0,0,0.6);
  animation:fadeUp 0.5s var(--ease) both;
}
.login-logo{text-align:center;margin-bottom:32px}
.login-brand{
  font-family:'Cinzel',serif;font-size:22px;font-weight:600;letter-spacing:0.35em;
  background:var(--g-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.login-club{font-family:'Cinzel',serif;font-size:10px;font-weight:400;letter-spacing:0.9em;color:rgba(212,168,85,0.5);margin-top:3px}
.login-tagline{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;line-height:1.75;color:var(--text-m);text-align:center;margin-bottom:32px}
.fi{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.fi label{font-size:10px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-d)}
.fi input{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--rs);padding:12px 16px;font-size:14px;color:var(--text);transition:border-color 0.2s;outline:none}
.fi input:focus{border-color:var(--gold)}
.li-err{font-size:12px;color:#E07070;margin-bottom:8px;text-align:center;padding:8px;background:rgba(220,80,80,0.08);border-radius:var(--rs)}
.login-link{display:block;text-align:center;margin-top:24px;font-size:12px;color:var(--text-d);transition:color 0.2s}
.login-link:hover{color:var(--gold-l)}

/* ── APP SHELL ─────────────────────────────────────── */
.app{display:flex;height:100vh}

/* ── SIDEBAR ───────────────────────────────────────── */
.sidebar{width:var(--sb-w);flex-shrink:0;background:var(--bg);border-right:1px solid var(--bdr);display:flex;flex-direction:column;height:100vh;overflow:hidden;z-index:50;transition:transform 0.3s var(--ease)}
.sb-top{padding:28px 20px 20px;border-bottom:1px solid var(--bdr);flex-shrink:0}
.sb-brand{font-family:'Cinzel',serif;font-size:13px;font-weight:600;letter-spacing:0.32em;background:var(--g-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sb-cl{font-family:'Cinzel',serif;font-size:8px;font-weight:400;letter-spacing:0.9em;color:rgba(212,168,85,0.45);margin-top:2px}
.sb-nav{flex:1;overflow-y:auto;padding:8px 0;scrollbar-width:none}
.sb-nav::-webkit-scrollbar{display:none}
.ni{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:11px 20px;font-size:13px;font-weight:400;color:var(--text-m);
  transition:background 0.15s,color 0.15s;position:relative;text-align:left;
}
.ni svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ni:hover{background:rgba(201,139,154,0.08);color:var(--text)}
.ni.active{color:var(--gold-l);background:linear-gradient(90deg,rgba(201,139,154,0.14),rgba(188,129,84,0.06))}
.ni.active::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:2px;background:var(--g-gold);border-radius:0 2px 2px 0}
.ni-vip{color:rgba(212,168,85,0.7)}
.ni-vip.active{color:var(--gold-xl)}
.vip-tag{margin-left:auto;font-style:normal;font-size:9px;font-weight:500;letter-spacing:0.12em;padding:2px 7px;background:rgba(201,139,154,0.18);color:var(--gold);border-radius:3px;flex-shrink:0}
.sb-foot{padding:14px 20px;border-top:1px solid var(--bdr);display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.sb-user{display:flex;align-items:center;gap:10px}
.user-av{width:34px;height:34px;border-radius:50%;background:rgba(201,139,154,0.18);border:1px solid var(--bdr-l);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;color:var(--gold);flex-shrink:0}
.user-nm{font-size:12px;font-weight:500}
.user-ti{font-size:10px;color:var(--gold);letter-spacing:0.04em;margin-top:1px}
.btn-logout{font-size:11px;color:var(--text-d);letter-spacing:0.1em;padding:5px 0;text-transform:uppercase;transition:color 0.2s;text-align:left}
.btn-logout:hover{color:var(--text-m)}

/* ── MOBILE HEADER ─────────────────────────────────── */
.mob-head{display:none;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--bg);border-bottom:1px solid var(--bdr);flex-shrink:0;position:sticky;top:0;z-index:20}
.hamburger{display:flex;flex-direction:column;gap:4px;padding:4px}
.hamburger span{display:block;width:20px;height:1.5px;background:var(--text-m);transition:0.3s}
.mob-logo{font-family:'Cinzel',serif;font-size:11px;font-weight:600;letter-spacing:0.28em;background:var(--g-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mob-logo em{font-style:normal;opacity:0.5}
.mob-pts{font-size:11px;font-weight:500;color:var(--gold)}

/* ── MAIN ──────────────────────────────────────────── */
.main-wrap{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.content{flex:1;overflow-y:auto;padding:32px 36px;scrollbar-width:thin;scrollbar-color:var(--bdr) transparent}
.content::-webkit-scrollbar{width:4px}
.content::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px}

/* ── MODULES ───────────────────────────────────────── */
.module{display:none}
.module.active{display:block;animation:fadeUp 0.28s var(--ease) both}

/* ── BOTTOM NAV ────────────────────────────────────── */
.bnav{display:none}

/* ── OVERLAY ───────────────────────────────────────── */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.78);z-index:40}
.overlay.show{display:block}

/* ── CARDS ─────────────────────────────────────────── */
.card{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r);padding:22px;transition:border-color 0.2s,transform 0.2s}
.card:hover{border-color:rgba(201,139,154,0.30)}
.card-glow{background:linear-gradient(155deg,rgba(201,139,154,0.06),var(--bg2) 60%);border-radius:var(--r);padding:22px;border:1px solid rgba(201,139,154,0.30);box-shadow:0 0 36px rgba(201,139,154,0.09)}
.card-sm{padding:14px 18px}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.cards-g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cards-g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

/* ── TYPOGRAPHY ────────────────────────────────────── */
.mod-label{font-family:'Cinzel',serif;font-size:10px;font-weight:500;letter-spacing:0.4em;text-transform:uppercase;color:var(--text-d);margin-bottom:20px}
.sec-title{font-family:'Cinzel',serif;font-size:11px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--text-m)}
.pg-title{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,3vw,38px);font-weight:300;margin-bottom:6px}
.pg-sub{font-size:13px;color:var(--text-m);margin-bottom:28px;line-height:1.6}
.disp-num{font-family:'Poppins',sans-serif;font-weight:600;line-height:1;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.tg{background:var(--g-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tm{color:var(--text-m)}
.td{color:var(--text-d)}

/* ── BUTTONS ───────────────────────────────────────── */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 26px;border-radius:var(--rs);background:var(--g-gold);color:#0A0A0A;font-size:12px;font-weight:500;letter-spacing:0.08em;transition:opacity 0.2s,transform 0.15s}
.btn-primary:hover{opacity:0.88;transform:translateY(-1px)}
.btn-primary:disabled{opacity:0.4;cursor:not-allowed;transform:none}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 22px;border-radius:var(--rs);border:1px solid var(--bdr-l);color:var(--gold-l);font-size:12px;font-weight:400;letter-spacing:0.06em;transition:background 0.2s,border-color 0.2s}
.btn-outline:hover{background:rgba(201,139,154,0.08);border-color:var(--gold)}
.btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 22px;border-radius:var(--rs);background:rgba(37,211,102,0.12);color:#25D366;font-size:12px;font-weight:500;border:1px solid rgba(37,211,102,0.22);transition:background 0.2s}
.btn-wa:hover{background:rgba(37,211,102,0.22)}
.btn-sm{padding:7px 16px;font-size:11px}
.btn-xs{padding:5px 12px;font-size:11px}

/* ── FORM ──────────────────────────────────────────── */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.fg label{font-size:10px;font-weight:500;letter-spacing:0.13em;text-transform:uppercase;color:var(--text-d)}
.fg input,.fg select,.fg textarea{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--rs);padding:11px 14px;font-size:13px;color:var(--text);transition:border-color 0.2s;outline:none}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--gold)}
.fg select{appearance:none;-webkit-appearance:none;cursor:pointer}
.fg textarea{resize:vertical;min-height:80px}
.radio-pills{display:flex;flex-wrap:wrap;gap:8px}
.radio-pill input{display:none}
.radio-pill span{display:inline-flex;align-items:center;padding:8px 16px;border-radius:99px;border:1px solid var(--bdr);font-size:12px;color:var(--text-m);cursor:pointer;transition:0.2s;user-select:none}
.radio-pill input:checked+span{border-color:var(--gold);background:rgba(201,139,154,0.12);color:var(--gold-l)}
.check-grid{display:flex;flex-wrap:wrap;gap:8px}
.check-chip input{display:none}
.check-chip span{display:inline-flex;align-items:center;padding:7px 14px;border-radius:99px;border:1px solid var(--bdr);font-size:12px;color:var(--text-m);cursor:pointer;transition:0.2s;user-select:none}
.check-chip input:checked+span{border-color:var(--gold);background:rgba(201,139,154,0.12);color:var(--gold-l)}
.food-chip{padding:8px 14px;border-radius:99px;border:1px solid var(--bdr);font-size:13px;cursor:pointer;transition:0.2s;color:var(--text-m);user-select:none}
.food-chip.sel{border-color:var(--gold);background:rgba(201,139,154,0.12);color:var(--gold-l)}
.food-chip.dis{opacity:0.32;text-decoration:line-through;cursor:not-allowed;pointer-events:none}
.food-grid{display:flex;flex-wrap:wrap;gap:8px}
.verse-card{background:linear-gradient(150deg,rgba(201,139,154,0.11),rgba(201,139,154,0.02));border:1px solid rgba(201,139,154,0.26);border-radius:var(--r);padding:20px 24px 18px;position:relative;overflow:hidden}
.verse-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--g-gold)}
.verse-top{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.verse-icon{color:var(--gold-l);font-size:12px}
.verse-label{font-family:'Cinzel',serif;font-size:10px;font-weight:500;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold-l)}
.verse-text{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:20px;line-height:1.5;color:var(--text)}
.verse-ref{font-family:'Cinzel',serif;font-size:10px;font-weight:500;letter-spacing:0.16em;color:var(--text-m);margin-top:12px;text-align:right}
.food-cat{font-family:'Cinzel',serif;font-size:10px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-l);margin:16px 0 9px}
.food-picker .food-cat:first-child{margin-top:0}
.act-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--bdr)}
.act-row:last-child{border-bottom:none}
.act-name{flex:1;font-size:13.5px;color:var(--text-m)}
.act-h{width:62px;padding:7px 8px;border-radius:8px;border:1px solid var(--bdr);background:var(--bg3);color:var(--text);text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
.act-h:focus{border-color:var(--gold);outline:none}
.act-unit{font-size:11px;color:var(--text-d);width:42px}

/* ── PROGRESS ──────────────────────────────────────── */
.prog-wrap{background:rgba(255,255,255,0.06);border-radius:99px;overflow:hidden}
.prog-fill{height:5px;border-radius:99px;background:var(--g-gold);transition:width 0.9s var(--ease)}
.prog-h6{height:6px}.prog-h8{height:8px}

/* ── WATER GLASSES ─────────────────────────────────── */
.glasses-grid{display:flex;gap:10px;flex-wrap:wrap}
.glass-btn{width:42px;height:58px;border-radius:6px;border:1.5px solid rgba(201,139,154,0.25);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:0.2s;position:relative;overflow:hidden}
.glass-btn.filled{border-color:var(--gold)}
.glass-btn.filled::after{content:'';position:absolute;bottom:0;left:0;right:0;height:58%;background:rgba(201,139,154,0.28);transition:0.3s}
.glass-btn svg{z-index:1;pointer-events:none}

/* ── TAGS & BADGES ─────────────────────────────────── */
.tag{display:inline-block;padding:3px 10px;border-radius:4px;font-size:10px;font-weight:500;letter-spacing:0.06em}
.tag-gold{background:rgba(201,139,154,0.18);color:var(--gold)}
.tag-green{background:rgba(80,200,120,0.14);color:#5CC87A}
.tag-blue{background:rgba(80,140,220,0.14);color:#7AAAE0}
.tag-red{background:rgba(220,80,80,0.14);color:#E07070}
.pts-badge{font-size:11px;font-weight:500;color:var(--gold);background:rgba(201,139,154,0.1);padding:3px 10px;border-radius:99px}

/* ── ALERTS ────────────────────────────────────────── */
.alert-ok{background:rgba(80,200,120,0.08);border:1px solid rgba(80,200,120,0.22);border-radius:var(--rs);padding:12px 16px;color:#5CC87A;font-size:13px;line-height:1.5}
.alert-warn{background:rgba(220,180,50,0.08);border:1px solid rgba(220,180,50,0.22);border-radius:var(--rs);padding:12px 16px;color:#DCA832;font-size:13px;line-height:1.5}
.alert-danger{background:rgba(220,80,80,0.08);border:1px solid rgba(220,80,80,0.22);border-radius:var(--rs);padding:12px 16px;color:#E07070;font-size:13px;line-height:1.5}

/* ── TIMELINE ──────────────────────────────────────── */
.timeline{display:flex;flex-direction:column}
.tl-item{display:flex;gap:14px;position:relative;padding-bottom:22px}
.tl-item::before{content:'';position:absolute;left:7px;top:18px;bottom:0;width:1px;background:var(--bdr)}
.tl-item:last-child::before{display:none}
.tl-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--gold);background:var(--bg);flex-shrink:0;margin-top:2px}
.tl-dot.on{background:var(--gold)}

/* ── LAUNCH CARDS ──────────────────────────────────── */
.launch-top{position:absolute;top:0;left:0;right:0;height:2px;background:var(--g-gold)}
.launch-new{font-size:9px;font-weight:500;letter-spacing:0.14em;padding:3px 9px;background:rgba(201,139,154,0.22);color:var(--gold);border-radius:3px;text-transform:uppercase}
.price-vip{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:600}
.price-pub{font-size:13px;color:var(--text-d);text-decoration:line-through}

/* ── POINTS ────────────────────────────────────────── */
.pts-big{font-family:'Poppins',sans-serif;font-size:clamp(52px,8vw,92px);font-weight:500;line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.reward-card{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.reward-icon{font-size:30px;margin-bottom:2px}

/* ── CHECKLIST ─────────────────────────────────────── */
.checklist{display:flex;flex-direction:column;gap:12px}
.check-item{display:flex;align-items:flex-start;gap:12px}
.check-item input[type=checkbox]{accent-color:var(--gold);width:16px;height:16px;flex-shrink:0;margin-top:3px;cursor:pointer}
.check-item label{font-size:13px;line-height:1.55;cursor:pointer}

/* ── REFERRAL ──────────────────────────────────────── */
.ref-box{background:var(--bg3);border:1px solid var(--bdr-l);border-radius:var(--r);padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ref-code{font-family:'Cinzel',serif;font-size:18px;font-weight:500;letter-spacing:0.15em;color:var(--gold-l)}

/* ── FAB ───────────────────────────────────────────── */
.fab-wa{position:fixed;bottom:28px;right:24px;z-index:30;width:52px;height:52px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 22px rgba(37,211,102,0.35);transition:transform 0.2s,box-shadow 0.2s}
.fab-wa:hover{transform:scale(1.08);box-shadow:0 6px 30px rgba(37,211,102,0.45)}
.fab-wa svg{width:26px;height:26px}

/* ── UTILS ─────────────────────────────────────────── */
.gold-line{height:1px;background:linear-gradient(90deg,transparent,var(--bdr-l),transparent);margin:18px 0}
.flex-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.flex-col{display:flex;flex-direction:column;gap:8px}
.flex-bet{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-10{margin-bottom:10px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px}
.fs-11{font-size:11px}.fs-12{font-size:12px}.fs-13{font-size:13px}.fs-14{font-size:14px}
.fw-500{font-weight:500}.fw-300{font-weight:300}
.shimmer{background:linear-gradient(90deg,var(--gold) 0%,var(--gold-xl) 25%,var(--gold) 50%,var(--gold-xl) 75%,var(--gold) 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 3s linear infinite}

/* ── ANIMATIONS ────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}

/* ── RESPONSIVE ────────────────────────────────────── */
@media(max-width:767px){
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;transform:translateX(-100%);z-index:50}
  .sidebar.open{transform:translateX(0)}
  .mob-head{display:flex}
  .content{padding:18px 14px 90px}
  .bnav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--bg);border-top:1px solid var(--bdr);padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:20}
  .bni{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;font-size:10px;color:var(--text-d);transition:color 0.15s}
  .bni svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .bni.active{color:var(--gold-l)}
  .bni-vip{color:var(--gold)}
  .bni-vip.active{color:var(--gold-xl)}
  .fab-wa{bottom:76px;right:14px}
  .cards-g2,.form-row{grid-template-columns:1fr}
  .cards-g3{grid-template-columns:1fr 1fr}
  .cards-grid{grid-template-columns:1fr}
  .ref-box{flex-direction:column;align-items:flex-start}
}
@media(min-width:768px) and (max-width:1080px){
  :root{--sb-w:200px}
  .content{padding:24px}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
}