@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');
:root{--green:#00C896;--green-dark:#00A87A;--teal:#0ABFBC;--navy:#0D1B2A;--navy2:#132232;--card:#1A2E40;--card2:#1F3347;--text:#E8F4F0;--muted:#7A9BAD;--gold:#F5C842;--red:#FF5C5C;--radius:18px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'DM Sans',sans-serif;background:#070F17;color:var(--text);min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:20px}
.phone-wrap{width:390px;min-height:844px;background:var(--navy);border-radius:40px;overflow:hidden;box-shadow:0 40px 120px rgba(0,200,150,.15),0 0 0 1px rgba(255,255,255,.06);position:relative;display:flex;flex-direction:column}
/* NAV */
.bottom-nav{display:flex;background:var(--navy2);border-top:1px solid rgba(255,255,255,.05);padding:12px 0 20px;position:sticky;bottom:0;z-index:10}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;opacity:.45;transition:opacity .2s;font-size:10px;font-weight:500;letter-spacing:.3px;color:var(--text);text-decoration:none}
.nav-item.active{opacity:1;color:var(--green)}
.nav-item svg{width:22px;height:22px}
/* HEADER */
.home-header{background:linear-gradient(160deg,#0d2a1f,#0a1f2e);padding:50px 24px 28px;position:relative;overflow:hidden}
.home-header::after{content:'';position:absolute;width:220px;height:220px;background:var(--green);border-radius:50%;top:-80px;right:-60px;filter:blur(70px);opacity:.15}
.hdr-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.hdr-greeting{font-size:12px;color:var(--muted);margin-bottom:2px}
.hdr-name{font-family:'Syne',sans-serif;font-size:18px;font-weight:700}
.vip-badge{background:linear-gradient(135deg,#B8860B,var(--gold));padding:5px 14px;border-radius:20px;font-size:11px;font-weight:700;font-family:'Syne',sans-serif;color:#1a1000;letter-spacing:.5px}
.balance-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:20px;display:flex;justify-content:space-between;align-items:center}
.balance-label{font-size:12px;color:var(--muted);margin-bottom:6px}
.balance-amount{font-family:'Syne',sans-serif;font-size:28px;font-weight:800;color:var(--green)}
.balance-sub{font-size:11px;color:var(--muted);margin-top:2px}
.bal-btns{display:flex;gap:8px}
.bal-btn{padding:8px 16px;border-radius:10px;font-size:12px;font-weight:600;cursor:pointer;border:none;font-family:'DM Sans',sans-serif;text-decoration:none;display:inline-block}
.bal-btn.add{background:var(--green);color:#fff}
.bal-btn.out{background:rgba(255,255,255,.08);color:var(--text)}
/* STATS */
.stats-row{display:flex;gap:10px;padding:16px 24px}
.stat-box{flex:1;background:var(--card);border-radius:14px;padding:14px;text-align:center}
.stat-val{font-family:'Syne',sans-serif;font-size:16px;font-weight:700;margin-bottom:3px}
.stat-lbl{font-size:10px;color:var(--muted)}
.stat-val.green{color:var(--green)}
.stat-val.gold{color:var(--gold)}
/* SECTION */
.section-title{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;padding:0 24px 12px;display:flex;justify-content:space-between;align-items:center}
.section-title a{font-size:12px;color:var(--green);text-decoration:none;font-family:'DM Sans';font-weight:400}
/* PLANS */
.plans-scroll{padding:0 24px 16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;flex:1}
.plan-card{background:var(--card);border-radius:var(--radius);padding:18px;border:1px solid rgba(255,255,255,.05);cursor:pointer;transition:transform .2s,border-color .2s;position:relative;overflow:hidden;display:block;text-decoration:none;color:var(--text)}
.plan-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(to bottom,var(--green),var(--teal));border-radius:4px 0 0 4px}
.plan-card:hover{transform:translateX(4px);border-color:rgba(0,200,150,.2)}
.plan-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.plan-name{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;margin-bottom:3px}
.plan-tag{font-size:10px;padding:3px 8px;border-radius:6px;font-weight:600}
.tag-hot{background:rgba(255,92,92,.15);color:var(--red)}
.tag-new{background:rgba(0,200,150,.15);color:var(--green)}
.tag-vip{background:rgba(245,200,66,.15);color:var(--gold)}
.tag-event{background:rgba(167,139,250,.15);color:#a78bfa}
.plan-meta{display:flex;gap:16px;margin-bottom:12px}
.plan-meta-item{font-size:12px;color:var(--muted)}
.plan-meta-item strong{color:var(--text);font-size:13px}
.prog-bar{height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(to right,var(--green),var(--teal));border-radius:2px}
.plan-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.roi-daily{font-size:13px;color:var(--green);font-weight:700;font-family:'Syne'}
.roi-total{font-size:10px;color:var(--muted);margin-top:1px}
.plan-invest-btn{padding:8px 18px;background:linear-gradient(135deg,var(--green),var(--teal));border:none;border-radius:10px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:'DM Sans';text-decoration:none}
/* TABS */
.tab-pills{padding:0 24px 12px;display:flex;gap:8px}
.tab-pill{padding:8px 18px;border-radius:20px;font-size:12px;cursor:pointer;border:none;font-family:'DM Sans';background:var(--card);color:var(--muted)}
.tab-pill.active{background:var(--green);color:#fff;font-weight:700}
/* PROFILE */
.prof-header{background:linear-gradient(160deg,#0d1e2e,#091520);padding:50px 24px 28px;display:flex;flex-direction:column;align-items:center;gap:10px}
.prof-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--teal));display:flex;align-items:center;justify-content:center;font-size:28px;font-family:'Syne',sans-serif;font-weight:800;color:#fff;border:3px solid rgba(255,255,255,.1)}
.prof-name{font-family:'Syne',sans-serif;font-size:18px;font-weight:700}
.prof-id{font-size:12px;color:var(--muted)}
.prof-menu{padding:16px 24px;flex:1;overflow-y:auto}
.menu-section-title{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin:16px 0 8px;font-weight:600}
.menu-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--card);border-radius:14px;margin-bottom:8px;cursor:pointer;transition:background .2s;text-decoration:none;color:var(--text)}
.menu-item:hover{background:var(--card2)}
.menu-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px}
.menu-text{flex:1;font-size:14px}
.menu-arrow{color:var(--muted);font-size:16px}
.menu-item.danger .menu-text{color:var(--red)}
/* SUBSCREEN */
.sub-topbar{background:var(--navy2);padding:50px 20px 16px;display:flex;align-items:center;gap:14px;border-bottom:1px solid rgba(255,255,255,.05);position:sticky;top:0;z-index:10}
.sub-back-btn{width:36px;height:36px;border:none;background:rgba(255,255,255,.08);border-radius:50%;font-size:18px;cursor:pointer;color:var(--text);display:flex;align-items:center;justify-content:center;text-decoration:none}
.sub-title{font-family:'Syne',sans-serif;font-size:17px;font-weight:700}
.sub-content{padding:20px 24px;flex:1;overflow-y:auto}
/* FORMS */
.inp-group{width:100%;margin-bottom:14px;position:relative}
.inp-group input,.inp-group select{width:100%;padding:16px 18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;color:var(--text);font-size:15px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .2s,background .2s}
.inp-group input:focus,.inp-group select:focus{border-color:var(--green);background:rgba(0,200,150,.06)}
.inp-group input::placeholder{color:var(--muted)}
.inp-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:17px;opacity:.5}
.btn-primary{width:100%;padding:17px;background:linear-gradient(135deg,var(--green),var(--teal));border:none;border-radius:14px;color:#fff;font-size:16px;font-weight:600;font-family:'Syne',sans-serif;letter-spacing:.5px;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 8px 30px rgba(0,200,150,.3)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-outline{width:100%;padding:17px;background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:14px;color:var(--muted);font-size:15px;font-family:'DM Sans',sans-serif;cursor:pointer;margin-top:10px;transition:background .2s;text-decoration:none;display:block;text-align:center}
/* ALERTS */
.alert{padding:12px 16px;border-radius:12px;font-size:13px;margin-bottom:14px}
.alert-success{background:rgba(0,200,150,.12);border:1px solid rgba(0,200,150,.2);color:var(--green)}
.alert-error{background:rgba(255,92,92,.12);border:1px solid rgba(255,92,92,.2);color:var(--red)}
.alert-info{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.2);color:#93c5fd}
/* HISTORY */
.hist-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--card);border-radius:14px;margin-bottom:10px}
.hi-left{display:flex;flex-direction:column;gap:4px}
.hi-name{font-size:14px;font-weight:600}
.hi-date{font-size:11px;color:var(--muted)}
.hi-right{text-align:right}
.hi-amt{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:var(--green)}
.hi-status{font-size:10px;color:var(--muted);margin-top:2px}
.hi-status.pending{color:var(--gold)}
.hi-status.rejected{color:var(--red)}
/* EARN */
.earn-header{background:linear-gradient(160deg,#1a2010,#0a1f2e);padding:50px 24px 24px}
.earn-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.earn-box{background:rgba(255,255,255,.06);border-radius:14px;padding:16px}
.earn-box-lbl{font-size:11px;color:var(--muted);margin-bottom:6px}
.earn-box-val{font-family:'Syne',sans-serif;font-size:20px;font-weight:800}
.earn-box-val.green{color:var(--green)}
.earn-box-val.gold{color:var(--gold)}
.earn-list{padding:16px 24px;flex:1;overflow-y:auto}
.empty-state{text-align:center;padding:40px 0;color:var(--muted)}
.empty-state .e-icon{font-size:40px;margin-bottom:12px}
.empty-state .e-title{font-size:14px;margin-bottom:6px;color:var(--text)}
/* REF */
.ref-link-box{background:var(--card);border-radius:14px;padding:16px;margin-bottom:16px}
.ref-link-row{display:flex;align-items:center;gap:8px;background:var(--card2);border-radius:10px;padding:12px 14px;margin-bottom:12px}
.ref-link-text{flex:1;font-size:12px;color:var(--green);word-break:break-all}
.ref-copy-btn{background:var(--green);border:none;border-radius:8px;padding:6px 12px;color:#fff;font-size:11px;font-weight:700;cursor:pointer}
/* LOGIN */
#login-wrap{background:linear-gradient(160deg,#0a1a28 0%,#0d2235 60%,#091520 100%);padding:60px 28px 40px;align-items:center;justify-content:center;display:flex;flex-direction:column;flex:1;gap:0}
.login-logo{font-family:'Syne',sans-serif;font-size:36px;font-weight:800;color:var(--green);letter-spacing:-1px;margin-bottom:4px}
.login-logo span{color:var(--text)}
.login-tagline{font-size:13px;color:var(--muted);margin-bottom:44px;letter-spacing:.5px}
.login-switch{margin-top:20px;font-size:13px;color:var(--muted);text-align:center}
.login-switch a{color:var(--green);text-decoration:none;font-weight:600}
/* PAYMENT */
.pay-body{flex:1;overflow-y:auto;padding:20px 16px 100px;background:#f5f5f5;color:#1a1a2e}
.pay-banner{background:#fff;border-radius:14px;padding:18px 20px;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.pay-amount-val{font-size:32px;font-weight:800;color:#1a1a2e;font-family:'Syne',sans-serif}
.pay-method-list{border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.07)}
.pay-method-item{background:#fff;padding:17px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background .15s}
.pay-method-item:last-child{border-bottom:none}
.pay-upi-logo{font-size:28px;width:42px;text-align:center}
.pay-method-name{flex:1;font-size:15px;font-weight:600;color:#1a1a2e}
.utr-section{background:#fff;border-radius:14px;padding:20px;margin-top:16px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.utr-title{font-size:14px;font-weight:700;color:#1a5fa8;margin-bottom:6px}
.utr-input{width:100%;padding:14px 16px;background:#f8f8f8;border:1.5px solid #e0e0e0;border-radius:10px;font-size:15px;color:#1a1a2e;outline:none;margin-bottom:12px;letter-spacing:.5px}
.utr-input:focus{border-color:#1a5fa8}
.utr-submit-btn{width:100%;padding:14px;background:#1a5fa8;border:none;border-radius:10px;color:#fff;font-size:15px;font-weight:700;font-family:'Syne',sans-serif;cursor:pointer}
.pay-topbar{background:#fff;padding:50px 20px 16px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #e8e8e8;position:sticky;top:0;z-index:10}
.pay-topbar-title{font-size:17px;font-weight:700;color:#1a1a2e;font-family:'Syne',sans-serif}
.pay-back-btn{width:36px;height:36px;border:none;background:#f0f0f0;border-radius:50%;font-size:18px;cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center}
/* HOME SCROLL */
.home-scroll{flex:1;overflow-y:auto;padding-bottom:8px}
/* BANNER */
.banner-box{margin:0 24px 16px;background:linear-gradient(135deg,rgba(0,200,150,.15),rgba(10,191,188,.1));border:1px solid rgba(0,200,150,.2);border-radius:16px;padding:16px;display:flex;align-items:center;gap:12px}
.banner-go{margin-left:auto;background:var(--green);border:none;border-radius:10px;color:#fff;padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer;text-decoration:none}
@media(max-width:430px){body{padding:0}.phone-wrap{width:100%;border-radius:0;min-height:100vh}}