/* ============================================================
   ROLEX — Premium Smart Investment Theme
   Bright emerald / mint green premium UI
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');

:root{
    --rx-1:#0056b3;          /* bright mint */
    --rx-2:#0056b3;          /* emerald */
    --rx-3:#0056b3;          /* deep green */
    --rx-4:#0056b3;          /* darkest */
    --rx-grad:linear-gradient(150deg,#0056b3 0%,#0a6ad6 55%,#0056b3 100%);
    --rx-grad-btn:linear-gradient(135deg,#0a6ad6 0%,#0056b3 100%);
    --rx-grad-dark:linear-gradient(150deg,#004a9e,#003a7d);
    --rx-bg:#eef2f4;         /* page background */
    --rx-card:#ffffff;
    --rx-ink:#16241d;        /* dark text */
    --rx-muted:#7c8a86;      /* muted text */
    --rx-line:#e7edeb;       /* borders */
    --rx-soft:#e0f2ff;       /* soft green tint */
    --rx-radius:18px;
    --rx-shadow:0 10px 30px rgba(12,120,72,.10);
    --rx-shadow-sm:0 4px 14px rgba(20,40,30,.06);
}

*{box-sizing:border-box;}

body{
    margin:0;
    background:var(--rx-bg);
    color:var(--rx-ink);
    font-family:'Hind Siliguri',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    -webkit-tap-highlight-color:transparent;
}

/* ---------- generic helpers ---------- */
.rx-page{max-width:520px;margin:0 auto;min-height:100vh;background:var(--rx-bg);padding-bottom:96px;}
.rx-container{width:100%;padding:0 16px;}
.rx-mt{margin-top:16px;}
.rx-gap{height:16px;}

/* ---------- brand / logo ---------- */
.rx-brand-name{
    font-family:'Poppins',sans-serif;
    font-weight:800;letter-spacing:1px;color:#fff;
    text-shadow:0 2px 10px rgba(0,0,0,.18);
}

/* ---------- top green header (rounded bottom) ---------- */
.rx-topbar{
    background:var(--rx-grad);
    color:#fff;padding:18px 18px 26px;position:relative;
    border-bottom-left-radius:26px;border-bottom-right-radius:26px;
    box-shadow:0 8px 24px rgba(12,150,90,.28);
}
.rx-topbar .rx-back{
    position:absolute;left:14px;top:50%;transform:translateY(-50%);
    color:#fff;font-size:26px;text-decoration:none;line-height:1;width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;
}
.rx-topbar .rx-title{text-align:center;font-size:18px;font-weight:700;}

/* simple flat page header bar */
.rx-head{
    display:flex;align-items:center;justify-content:center;position:relative;
    padding:16px;color:#fff;background:var(--rx-grad);
    border-bottom-left-radius:22px;border-bottom-right-radius:22px;
}
.rx-head .rx-back{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#fff;font-size:24px;text-decoration:none;}
.rx-head .t{font-size:18px;font-weight:700;}

/* ---------- cards ---------- */
.rx-card{
    background:var(--rx-card);border-radius:var(--rx-radius);
    box-shadow:var(--rx-shadow-sm);padding:18px;
}
.rx-card + .rx-card{margin-top:14px;}

/* ---------- buttons ---------- */
.rx-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;height:54px;border:none;border-radius:30px;cursor:pointer;
    background:var(--rx-grad-btn);color:#fff;font-size:16px;font-weight:700;
    font-family:inherit;box-shadow:0 8px 20px rgba(0,86,179,.35);
    transition:transform .15s ease,box-shadow .15s ease;
}
.rx-btn:active{transform:translateY(1px) scale(.99);box-shadow:0 4px 12px rgba(0,86,179,.3);}
.rx-btn-ghost{
    background:#fff;color:var(--rx-3);border:2px solid var(--rx-2);
    box-shadow:none;font-weight:700;
}
.rx-btn-outline{
    background:var(--rx-soft);color:var(--rx-3);border:1px solid #cdeeda;box-shadow:none;
}

/* ---------- inputs ---------- */
.rx-field{position:relative;margin-bottom:14px;}
.rx-input,.rx-select{
    width:100%;height:56px;border:1.6px solid var(--rx-line);border-radius:30px;
    background:#f7faf9;padding:0 18px;font-size:15px;color:var(--rx-ink);
    outline:none;font-family:inherit;transition:border-color .15s,box-shadow .15s;
}
.rx-input:focus,.rx-select:focus{border-color:var(--rx-2);box-shadow:0 0 0 4px rgba(22,193,114,.12);background:#fff;}
.rx-input::placeholder{color:#9aa8a3;}
.rx-input.has-icon{padding-left:52px;}
.rx-fic{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--rx-muted);}
.rx-eye{position:absolute;right:18px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;color:#9aa8a3;padding:4px;}
.rx-label{font-size:14px;font-weight:600;color:var(--rx-ink);margin:4px 0 8px;display:block;}

/* ---------- bottom nav ---------- */
.rx-footer{
    position:fixed;left:0;right:0;bottom:0;z-index:900;
    background:#fff;border-top:1px solid var(--rx-line);
    box-shadow:0 -6px 24px rgba(20,40,30,.07);
    max-width:520px;margin:0 auto;
}
.rx-foot-in{display:flex;justify-content:space-around;align-items:flex-end;padding:8px 4px 10px;}
.rx-foot-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:#9aa8a3;font-size:11px;font-weight:600;}
.rx-foot-item svg{width:24px;height:24px;}
.rx-foot-item.active{color:var(--rx-2);}
.rx-foot-item.active svg{filter:drop-shadow(0 2px 6px rgba(22,193,114,.4));}
/* raised center publish */
.rx-foot-pub{transform:translateY(-14px);}
.rx-foot-pub .rx-pub-c{
    width:52px;height:52px;border-radius:50%;background:var(--rx-grad-btn);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 18px rgba(0,86,179,.45);border:4px solid #fff;
}
.rx-foot-pub .rx-pub-c svg{width:26px;height:26px;}

/* ---------- misc ---------- */
.rx-badge-vip{
    display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#ffd86b,#f5a623);
    color:#6a4a00;font-weight:700;font-size:12px;padding:5px 12px;border-radius:20px;
    box-shadow:0 3px 8px rgba(245,166,35,.35);
}
.rx-note{background:var(--rx-soft);border-radius:14px;padding:16px;}
.rx-note .h{color:var(--rx-3);font-weight:700;font-size:15px;margin-bottom:10px;}
.rx-note p{color:#5f716b;font-size:13.5px;line-height:1.75;margin:0 0 8px;}
.rx-note p:last-child{margin:0;}