/* NEXUS design system — nx- prefixed (theme engine se clash nahi) */
:root{
  --u:calc(min(100vw,480px)/360);
  --nx-blue:#2E7BF6; --nx-blue-d:#1C66E0; --nx-blue-l:#5B9BFF;
  --nx-blue-soft:#E8F1FF; --nx-blue-tint:rgba(46,123,246,.08);
  --nx-grad:linear-gradient(135deg,#4A91FF 0%,#2E7BF6 100%);
  --nx-grad-head:linear-gradient(180deg,#3B86F7 0%,#2E7BF6 100%);
  --nx-page:#F4F8FD; --nx-card:#FFFFFF; --nx-field:#F5F7FB;
  --nx-line:#EDF1F7; --nx-line2:#E3E9F2;
  --nx-ink:#121826; --nx-ink2:#5A6273; --nx-muted:#8A93A6;
  --nx-up:#02B583; --nx-down:#F23B4F; --nx-warn:#F5A623;
  --nx-r-card:calc(14*var(--u)); --nx-r-btn:calc(10*var(--u));
  --nx-r-chip:calc(8*var(--u)); --nx-r-pill:calc(99*var(--u));
  --nx-sh:0 calc(2*var(--u)) calc(12*var(--u)) rgba(28,70,140,.06);
  --nx-sh-pop:0 calc(6*var(--u)) calc(24*var(--u)) rgba(28,70,140,.14);
  --nx-pad:calc(14*var(--u)); --nx-gap:calc(12*var(--u));
  --nx-navh:calc(58*var(--u));
  --nx-font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:#E9EFF7;color:var(--nx-ink);font-family:var(--nx-font);
  font-size:calc(14*var(--u));line-height:1.45;-webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit}
input:focus,select:focus,textarea:focus{outline:none}
.nx{position:relative;max-width:480px;min-height:100vh;margin:0 auto;
  background:var(--nx-page);overflow-x:hidden}
.nx--tab{padding-bottom:calc(var(--nx-navh) + 10px + env(safe-area-inset-bottom))}

/* header */
.nx-head{position:sticky;top:0;z-index:40;display:flex;align-items:center;
  height:calc(48*var(--u));padding:0 var(--nx-pad);background:var(--nx-card);
  border-bottom:1px solid var(--nx-line)}
.nx-head--blue{background:var(--nx-grad-head);color:#fff;border:0}
.nx-head__t{flex:1;min-width:0;text-align:center;font-size:calc(16*var(--u));
  font-weight:600;letter-spacing:.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nx-ico{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:calc(30*var(--u));height:calc(30*var(--u));border:0;background:transparent;
  color:inherit;cursor:pointer;border-radius:var(--nx-r-chip)}
.nx-ico svg{width:calc(21*var(--u));height:calc(21*var(--u));fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nx-ico:active{background:rgba(0,0,0,.05)}

/* buttons */
.nx-btn{display:flex;align-items:center;justify-content:center;gap:calc(7*var(--u));
  width:100%;height:calc(48*var(--u));border:0;border-radius:var(--nx-r-btn);
  background:var(--nx-blue);color:#fff;font-size:calc(15*var(--u));font-weight:600;
  letter-spacing:.3px;cursor:pointer;-webkit-appearance:none;appearance:none;
  box-shadow:0 calc(6*var(--u)) calc(16*var(--u)) -8px rgba(46,123,246,.6);
  transition:transform .1s,filter .15s}
.nx-btn:active{transform:translateY(1px);filter:brightness(.95)}
.nx-btn:disabled{filter:saturate(.4);opacity:.75;cursor:default;box-shadow:none}
.nx-btn--ghost{background:var(--nx-card);color:var(--nx-blue);
  border:1.5px solid var(--nx-blue);box-shadow:none}
.nx-btn--up{background:var(--nx-up);box-shadow:0 calc(6*var(--u)) calc(16*var(--u)) -8px rgba(2,181,131,.6)}
.nx-btn--down{background:var(--nx-down);box-shadow:0 calc(6*var(--u)) calc(16*var(--u)) -8px rgba(242,59,79,.6)}
.nx-btn svg{width:calc(18*var(--u));height:calc(18*var(--u));fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* fields */
.nx-f{margin:0 0 calc(13*var(--u))}
.nx-lb{display:block;margin:0 0 calc(7*var(--u)) calc(2*var(--u));
  font-size:calc(12.5*var(--u));font-weight:600;color:var(--nx-ink2)}
.nx-box{display:flex;align-items:center;height:calc(50*var(--u));
  padding:0 calc(6*var(--u)) 0 calc(12*var(--u));background:var(--nx-field);
  border:1.5px solid transparent;border-radius:var(--nx-r-btn);
  transition:border-color .15s,background .15s}
.nx-box:focus-within{background:#fff;border-color:var(--nx-blue)}
.nx-box__ic{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:calc(22*var(--u));height:calc(22*var(--u));margin-right:calc(9*var(--u));
  color:var(--nx-muted)}
.nx-box__ic svg{width:calc(18*var(--u));height:calc(18*var(--u));fill:none;
  stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nx-in{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;outline:0;
  background:transparent;color:var(--nx-ink);font-size:calc(14*var(--u));
  font-weight:500;-webkit-appearance:none;appearance:none}
.nx-in::placeholder{color:var(--nx-muted);font-weight:400;font-size:calc(13.5*var(--u))}
.nx-in:-webkit-autofill,.nx-in:-webkit-autofill:hover,.nx-in:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--nx-ink)!important;caret-color:var(--nx-ink);
  transition:background-color 600000s 0s,color 600000s 0s!important;background-clip:text!important}
.nx-eye{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:calc(38*var(--u));height:calc(38*var(--u));border:0;background:transparent;
  color:var(--nx-muted);cursor:pointer;border-radius:var(--nx-r-chip)}
.nx-eye svg{width:calc(19*var(--u));height:calc(19*var(--u));fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nx-eye .o{display:none}
.nx-eye.on .c{display:none}
.nx-eye.on .o{display:block}
.nx-eye.on{color:var(--nx-blue)}

/* cards */
.nx-wrap{padding:var(--nx-pad)}
.nx-card{background:var(--nx-card);border-radius:var(--nx-r-card);
  box-shadow:var(--nx-sh);padding:var(--nx-pad);margin:0 0 var(--nx-gap)}
.nx-card--blue{background:var(--nx-grad);color:#fff;
  box-shadow:0 calc(8*var(--u)) calc(22*var(--u)) -10px rgba(46,123,246,.55)}
.nx-card--flat{box-shadow:none;border:1px solid var(--nx-line)}
.nx-sec{display:flex;align-items:center;justify-content:space-between;margin:0 0 calc(10*var(--u))}
.nx-sec__t{font-size:calc(15*var(--u));font-weight:600;color:var(--nx-ink)}
.nx-sec__m{display:flex;align-items:center;gap:calc(3*var(--u));
  font-size:calc(12*var(--u));color:var(--nx-muted)}

/* chips + grids */
.nx-chips{display:flex;flex-wrap:wrap;gap:calc(8*var(--u))}
.nx-chip{display:flex;align-items:center;justify-content:center;min-width:calc(62*var(--u));
  height:calc(36*var(--u));padding:0 calc(12*var(--u));background:var(--nx-field);
  border:1.5px solid transparent;border-radius:var(--nx-r-chip);color:var(--nx-ink2);
  font-size:calc(13*var(--u));font-weight:500;cursor:pointer;-webkit-appearance:none;
  appearance:none;transition:.15s}
.nx-chip.on{background:var(--nx-blue-soft);border-color:var(--nx-blue);
  color:var(--nx-blue);font-weight:600}
.nx-chip:active{transform:scale(.97)}
.nx-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(8*var(--u))}
.nx-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(8*var(--u))}
.nx-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(8*var(--u))}

/* list rows */
.nx-row{display:flex;align-items:center;gap:calc(10*var(--u));
  padding:calc(11*var(--u)) 0;border-bottom:1px solid var(--nx-line)}
.nx-row:last-child{border-bottom:0}
.nx-row__ic{flex:0 0 auto;width:calc(30*var(--u));height:calc(30*var(--u));
  border-radius:50%;object-fit:cover;background:var(--nx-field)}
.nx-row__b{flex:1;min-width:0}
.nx-row__t{font-size:calc(13.5*var(--u));font-weight:600;color:var(--nx-ink)}
.nx-row__s{font-size:calc(11.5*var(--u));color:var(--nx-muted);margin-top:calc(2*var(--u))}
.nx-row__r{flex:0 0 auto;text-align:right}
.nx-row__v{font-size:calc(13.5*var(--u));font-weight:600;color:var(--nx-ink)}

/* badges */
.nx-bdg{display:inline-flex;align-items:center;justify-content:center;
  min-width:calc(56*var(--u));height:calc(22*var(--u));padding:0 calc(8*var(--u));
  border-radius:calc(5*var(--u));font-size:calc(11.5*var(--u));font-weight:600;color:#fff}
.nx-bdg--up{background:var(--nx-up)}
.nx-bdg--down{background:var(--nx-down)}
.nx-bdg--soft{background:var(--nx-blue-soft);color:var(--nx-blue)}
.nx-up{color:var(--nx-up)}
.nx-down{color:var(--nx-down)}

/* segmented tabs */
.nx-seg{display:flex;gap:calc(6*var(--u));padding:calc(4*var(--u));
  background:var(--nx-field);border-radius:var(--nx-r-btn)}
.nx-seg a,.nx-seg button{flex:1;display:flex;align-items:center;justify-content:center;
  height:calc(34*var(--u));border:0;background:transparent;border-radius:calc(7*var(--u));
  color:var(--nx-ink2);font-size:calc(13*var(--u));font-weight:500;cursor:pointer}
.nx-seg .on{background:var(--nx-blue);color:#fff;font-weight:600;
  box-shadow:0 calc(4*var(--u)) calc(10*var(--u)) -5px rgba(46,123,246,.6)}

/* bottom tabbar */
.nxtb{position:fixed;z-index:100;left:50%;bottom:0;transform:translateX(-50%);
  display:flex;width:100%;max-width:480px;height:var(--nx-navh);
  padding-bottom:env(safe-area-inset-bottom);background:var(--nx-card);
  border-top:1px solid var(--nx-line);
  box-shadow:0 calc(-2*var(--u)) calc(14*var(--u)) rgba(28,70,140,.06)}
.nxtb a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:calc(3*var(--u));color:var(--nx-muted);
  font-size:calc(10.5*var(--u));font-weight:500;transition:color .2s}
.nxtb a svg{width:calc(22*var(--u));height:calc(22*var(--u));fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.nxtb a:active svg{transform:scale(.88)}
.nxtb a.on{color:var(--nx-blue);font-weight:600}
.nxtb a.on svg{stroke-width:2.1}

/* loader + utils */
.nx-mask{position:fixed;z-index:998;inset:0;display:none;background:rgba(18,24,38,.18)}
.nx-mask.on{display:block}
.nx-load{position:fixed;z-index:999;top:50%;left:50%;width:calc(104*var(--u));
  transform:translate(-50%,-50%);padding:calc(18*var(--u)) 0 calc(13*var(--u));
  border-radius:var(--nx-r-card);background:rgba(18,24,38,.88);text-align:center;
  color:#fff;font-size:calc(12.5*var(--u));display:none}
.nx-load.on{display:block}
.nx-load i{display:block;width:calc(28*var(--u));height:calc(28*var(--u));
  margin:0 auto calc(9*var(--u));border:calc(3*var(--u)) solid rgba(255,255,255,.2);
  border-top-color:#fff;border-radius:50%;animation:nxspin .8s linear infinite}
@keyframes nxspin{to{transform:rotate(360deg)}}
.nx-mute{color:var(--nx-muted)}
.nx-c{text-align:center}
.nx-empty{padding:calc(40*var(--u)) 0;text-align:center;color:var(--nx-muted);font-size:calc(13*var(--u))}
@media (prefers-reduced-motion:reduce){.nx-load i{animation:none}}