/* ============================================================
   FlashDex — member app views

   Components for Packages, Income, Team, Refer, Withdraw and Plan.
   Loaded after rich.css, which owns icons, motion and the shared
   chart primitives.
   ============================================================ */

/* ------------------------------------------------------------
   Tier cards — the package chooser, and the plan's tier strip
   ------------------------------------------------------------ */
.tiergrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.tiercard{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:16px 16px 14px;border-radius:var(--r-m);text-align:left;cursor:pointer;
  background:var(--surface-3);border:1px solid var(--outline-variant);
  transition:.2s var(--ease);overflow:hidden;
}
.tiercard::after{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:linear-gradient(90deg,var(--a),var(--b));opacity:.55;transition:.2s var(--ease);
}
.tiercard:hover{border-color:var(--a);transform:translateY(-2px);}
.tiercard.on{border-color:var(--a);background:linear-gradient(180deg,rgba(255,255,255,.05),transparent);}
.tiercard.on::after{opacity:1;height:4px;}
.tiercard .tno{
  position:absolute;right:12px;top:8px;font:700 34px var(--font);
  color:var(--a);opacity:.16;letter-spacing:-.04em;
}
.tiercard .tic{color:var(--a);}
.tiercard .tpc{font:700 22px var(--font);letter-spacing:-.03em;color:var(--on-surface);}
.tiercard .tpc em{font:400 11px var(--mono);font-style:normal;color:var(--on-surface-variant);margin-left:4px;}
.tiercard .trange{font:11px var(--mono);color:var(--outline);}

/* ------------------------------------------------------------
   Package cards
   ------------------------------------------------------------ */
.pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px;}
.pkg{
  position:relative;padding:16px 17px;border-radius:var(--r-m);
  background:var(--surface-3);border:1px solid var(--outline-variant);overflow:hidden;
}
.pkg::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(180deg,var(--a),var(--b));}
.pkg.closed{opacity:.62;}
.pkg-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.pkg-ic{color:var(--a);display:grid;place-items:center;flex:none;}
.pkg-h > span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;}
.pkg-h b{font-size:14px;font-weight:600;}
.pkg-h em{font-style:normal;font:10.5px var(--mono);color:var(--outline);margin-top:2px;}
.pkg-n{font:700 25px var(--font);letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.pkg-bar{height:6px;border-radius:99px;background:var(--surface);overflow:hidden;margin:12px 0 9px;}
.pkg-bar > i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--a),var(--b));transition:width .6s var(--ease);}
.pkg-f{display:flex;justify-content:space-between;gap:10px;font:11px var(--mono);color:var(--on-surface-variant);}

/* ------------------------------------------------------------
   Quote block — live preview of a package or a withdrawal
   ------------------------------------------------------------ */
.quote{margin-top:16px;}
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:1px;
  background:var(--outline-variant);border:1px solid var(--outline-variant);
  border-radius:var(--r-s);overflow:hidden;}
.quote-grid > div{background:var(--surface-3);padding:11px 13px;display:flex;flex-direction:column;gap:6px;min-width:0;}
.qk{font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-surface-variant);
  display:flex;align-items:center;gap:6px;}
.qv{font:700 17px var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.qv.pos{color:var(--tertiary);}
.quickamt{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap;}

/* ------------------------------------------------------------
   Filter chips
   ------------------------------------------------------------ */
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:var(--s2);}
.fchip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r-full);
  background:var(--surface-3);border:1px solid var(--outline-variant);
  color:var(--on-surface-variant);font-size:12.5px;cursor:pointer;transition:.15s var(--ease);
}
.fchip:hover{color:var(--on-surface);border-color:var(--outline);}
.fchip.on{background:var(--primary-container);border-color:rgba(52,211,153,.4);color:var(--primary);}
.fchip .ic{color:var(--a,currentColor);}

/* ------------------------------------------------------------
   Feed list — ledger rows and withdrawal history
   ------------------------------------------------------------ */
.feedlist{display:flex;flex-direction:column;gap:1px;background:var(--outline-variant);
  border:1px solid var(--outline-variant);border-radius:var(--r-m);overflow:hidden;}
.fitem{display:flex;align-items:center;gap:13px;padding:12px 15px;background:var(--surface-2);
  transition:background .15s var(--ease);min-width:0;}
.fitem:hover{background:var(--surface-3);}
.fic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;}
.ftx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.ftx b{font-size:13.5px;font-weight:500;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.ftx em{font-style:normal;font:10.5px var(--mono);color:var(--outline);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fwhen{font:10.5px var(--mono);color:var(--outline);white-space:nowrap;flex:none;}
.famt{font:14px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none;min-width:88px;text-align:right;}

/* ------------------------------------------------------------
   Team pyramid
   ------------------------------------------------------------ */
.pyramid{display:flex;flex-direction:column;gap:6px;}
.pyr-row{display:flex;align-items:center;gap:13px;min-width:0;}
.pyr-l{font:12px var(--mono);color:var(--secondary);min-width:34px;flex:none;}
.pyr-track{flex:1;min-width:0;height:26px;display:flex;align-items:center;}
.pyr-bar{height:26px;border-radius:6px;display:flex;align-items:center;padding:0 10px;
  background:linear-gradient(90deg,var(--primary),rgba(52,211,153,.35));
  transition:width .6s var(--ease);min-width:34px;}
.pyr-bar.off{background:linear-gradient(90deg,var(--surface-3),rgba(40,37,66,.6));}
.pyr-bar b{font:12px var(--mono);color:#032117;font-weight:700;}
.pyr-bar.off b{color:var(--on-surface-variant);}
.pyr-pc{font:12px var(--mono);min-width:44px;text-align:right;flex:none;}
.pyr-q{flex:none;min-width:96px;}

.memgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:10px;}
.mem{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-s);
  background:var(--surface-3);border:1px solid var(--outline-variant);min-width:0;}
.mem-b{flex:none;display:grid;place-items:center;}
.mem-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.mem-t b{font:12.5px var(--mono);color:var(--primary);}
/* an email longer than its column runs underneath the balance beside
   it, so it has to be clipped rather than allowed to overflow */
.mem-t b,.mem-t em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.mem-t em{font-style:normal;font:10px var(--mono);color:var(--outline);}
.mem-v{text-align:right;flex:none;display:flex;flex-direction:column;gap:2px;
  font:12px var(--mono);font-variant-numeric:tabular-nums;}
.mem-v em{font-style:normal;font-size:10px;color:var(--outline);}
.mem-s{width:7px;height:7px;border-radius:50%;background:var(--outline-variant);flex:none;}
.mem-s.on{background:var(--tertiary);box-shadow:0 0 7px rgba(74,222,128,.6);}

/* ------------------------------------------------------------
   Refer
   ------------------------------------------------------------ */
.invite-grid{display:grid;grid-template-columns:210px 1fr;gap:var(--s3);align-items:start;}
.codebox{display:flex;flex-direction:column;gap:11px;padding:18px;border-radius:var(--r-m);
  background:linear-gradient(160deg,rgba(52,211,153,.12),rgba(245,183,76,.06));
  border:1px solid rgba(52,211,153,.26);text-align:center;}
.cb-k{font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-surface-variant);}
.cb-v{font:700 25px var(--mono);letter-spacing:.02em;color:var(--primary);}
.linkbox{min-width:0;}

.boosters{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px;}
.boost{padding:15px 16px;border-radius:var(--r-m);background:var(--surface-3);
  border:1px solid var(--outline-variant);}
.boost.done{border-color:rgba(74,222,128,.32);background:rgba(74,222,128,.06);}
.boost-h{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.boost-m{font:700 24px var(--font);letter-spacing:-.03em;color:var(--secondary);flex:none;}
.boost.done .boost-m{color:var(--tertiary);}
.boost-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.boost-t b{font-size:13px;font-weight:500;}
.boost-t em{font-style:normal;font:10px var(--mono);color:var(--outline);}
.meter{margin-top:9px;}
.ml{display:flex;align-items:center;gap:6px;font:10.5px var(--mono);color:var(--on-surface-variant);margin-bottom:5px;}
.mbar{display:block;height:5px;border-radius:99px;background:var(--surface);overflow:hidden;}
.mbar > i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--secondary),var(--primary));transition:width .6s var(--ease);}

.worth{display:flex;flex-direction:column;gap:12px;}
.worth-i{display:flex;gap:13px;align-items:flex-start;}
.wic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--primary-container);color:var(--primary);border:1px solid rgba(52,211,153,.2);}
.worth-i b{display:block;font-size:13.5px;font-weight:500;margin-bottom:3px;}
.worth-i em{font-style:normal;font-size:12.5px;color:var(--on-surface-variant);line-height:1.5;}

/* ------------------------------------------------------------
   Plan — rank cards and level grid
   ------------------------------------------------------------ */
.rankgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:13px;}
.rankcard{position:relative;padding:17px 15px;border-radius:var(--r-m);text-align:center;
  background:var(--surface-3);border:1px solid var(--outline-variant);transition:.2s var(--ease);}
.rankcard.done{border-color:rgba(52,211,153,.3);background:var(--primary-container);}
.rankcard.now{border-color:var(--secondary);background:var(--secondary-container);
  box-shadow:0 0 0 1px rgba(245,183,76,.25);}
.rankcard:not(.done):not(.now){opacity:.72;}
.rankcard:not(.done):not(.now) .rc-b{filter:saturate(.3) brightness(.75);}
.rc-b{display:grid;place-items:center;margin-bottom:11px;}
.rc-n{font-size:14px;font-weight:600;letter-spacing:-.01em;}
.rc-p{font:700 21px var(--font);color:var(--secondary);letter-spacing:-.02em;margin:4px 0 11px;}
.rc-r{display:flex;flex-direction:column;gap:5px;font:10.5px var(--mono);color:var(--on-surface-variant);}
.rc-r span{display:flex;align-items:center;gap:6px;justify-content:center;}
.rc-tag{position:absolute;top:9px;right:9px;font:9px var(--mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--secondary);}
.rc-tag.done{color:var(--tertiary);}

.lvlgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:10px;}
.lvl{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-s);
  background:var(--surface-3);border:1px solid var(--outline-variant);min-width:0;}
.lvl.on{border-color:rgba(52,211,153,.3);background:var(--primary-container);}
.lv-n{font:12px var(--mono);color:var(--secondary);min-width:52px;flex:none;}
.lv-p{font:700 17px var(--font);letter-spacing:-.02em;min-width:44px;flex:none;}
.lvl.on .lv-p{color:var(--tertiary);}
.lv-r{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.lv-r em{font-style:normal;font:9.5px var(--mono);color:var(--outline);display:flex;align-items:center;gap:5px;}
.lv-q{flex:none;}

@media (max-width:760px){
  .invite-grid{grid-template-columns:1fr;}
  .fwhen{display:none;}
  .pyr-q{min-width:0;}
  .pyr-q .pill{padding:3px 6px;}
  .famt{min-width:72px;font-size:12.5px;}
}

/* ------------------------------------------------------------
   At-a-glance row, above the earnings chart
   ------------------------------------------------------------ */
.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:1px;
  background:var(--outline-variant);border:1px solid var(--outline-variant);
  border-radius:var(--r-m);overflow:hidden;margin-bottom:var(--s3);}
.glance > div{background:var(--surface-3);padding:13px 15px;display:flex;flex-direction:column;gap:5px;min-width:0;}
.gk{display:flex;align-items:center;gap:6px;font:9.5px var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--on-surface-variant);}
.gv{font:700 20px var(--font);letter-spacing:-.025em;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gv.pos{color:var(--tertiary);}
.gd{font:10px var(--mono);color:var(--outline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ------------------------------------------------------------
   Wallet picker
   ------------------------------------------------------------ */
.orline{display:flex;align-items:center;gap:12px;margin:20px 0 16px;
  font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--outline);}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--outline-variant);}

.wlist{display:flex;flex-direction:column;gap:7px;margin-top:12px;}
.wopt{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:11px 14px;
  border-radius:var(--r-m);background:var(--surface-3);border:1px solid var(--outline-variant);
  color:var(--on-surface);font-size:14px;cursor:pointer;transition:.16s var(--ease);text-align:left;}
.wopt:hover:not(:disabled){border-color:var(--primary);background:var(--surface);transform:translateX(2px);}
.wopt:disabled{opacity:.5;cursor:default;}
.wic{width:28px;height:28px;border-radius:8px;flex:none;object-fit:contain;background:var(--surface);}
.wic.ph{display:grid;place-items:center;font:700 14px var(--font);
  background:var(--primary-container);color:var(--primary);}
.wnm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wgo{color:var(--outline);flex:none;}
.wopt:hover .wgo{color:var(--primary);}
.wnote{font-size:13px;color:var(--on-surface-variant);line-height:1.6;margin-top:12px;}
.wnote a{color:var(--primary);}
.wsponsor{margin-top:16px;}

/* the spinner used while a wallet prompt is open */
.spin{display:inline-block;width:12px;height:12px;vertical-align:-1px;margin-right:6px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:spin360 .7s linear infinite;}
@keyframes spin360{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.spin{animation:none;}}

/* ------------------------------------------------------------
   Sponsor confirmation on the join screen
   ------------------------------------------------------------ */
#sponsorInfo{margin-top:10px;}
.sfound{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-m);
  font-size:13px;border:1px solid var(--outline-variant);background:var(--surface-3);}
.sfound.checking{color:var(--on-surface-variant);font-family:var(--mono);font-size:12px;}
.sfound.ok{border-color:rgba(52,211,153,.32);background:var(--primary-container);}
.sfound.ok .ic{color:var(--primary);margin-left:auto;flex:none;}
.sfound.bad{border-color:rgba(255,110,110,.4);background:var(--error-container);color:var(--error);}
.sfound.bad .ic{flex:none;}
.sf-b{flex:none;display:grid;place-items:center;}
.sf-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.sf-t b{font-size:13px;font-weight:500;}
.sf-t em{font-style:normal;font:10.5px var(--mono);color:var(--on-surface-variant);}

/* ------------------------------------------------------------
   Wrong-network banner

   Fixed to the top of the viewport and above everything, because
   paying from the wrong chain loses the money — this is not a
   message that should be scrolled past.
   ------------------------------------------------------------ */
.netbar{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;gap:12px;
  padding:11px 18px;padding-top:calc(11px + env(safe-area-inset-top, 0px));
  background:linear-gradient(90deg,rgba(255,110,110,.22),rgba(245,183,76,.18));
  border-bottom:1px solid rgba(255,110,110,.45);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-size:13.5px;color:var(--on-surface);
  animation:netIn .3s var(--ease) both;
}
.netbar .ic{color:var(--error);flex:none;}
.netbar span{flex:1;min-width:0;}
.netbar b{color:var(--secondary);}
.netbar .btn{flex:none;}
@keyframes netIn{from{transform:translateY(-100%);}to{transform:none;}}
@media (max-width:760px){
  .netbar{flex-wrap:wrap;gap:9px;font-size:12.5px;padding:10px 13px;}
  .netbar .btn{width:100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){.netbar{animation:none;}}


/* ------------------------------------------------------------
   Network

   FlashDex is a BNB Smart Chain deployment. Being on the wrong
   network is the one mistake here that costs real money, so it
   gets stated up front on the gate and, if it happens, a button
   rather than a paragraph.
   ------------------------------------------------------------ */

/* the quiet line under the connect button */
.netline{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;
  font:11.5px var(--mono);color:var(--on-surface-variant);letter-spacing:.02em;}
/* The text is one flex item. Left as bare text nodes each fragment
   became an anonymous item and wrapped on its own. */
.netline .nl-t{min-width:0;}
.netline b{color:var(--on-surface);font-weight:500;white-space:nowrap;}
.netdot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--tertiary,#4ade80);
  box-shadow:0 0 0 3px rgba(74,222,128,.16);}
@media (prefers-reduced-motion:no-preference){
  .netdot{animation:netpulse 2.4s var(--ease,ease-in-out) infinite;}
}
@keyframes netpulse{
  0%,100%{box-shadow:0 0 0 3px rgba(74,222,128,.16);}
  50%{box-shadow:0 0 0 6px rgba(74,222,128,.04);}
}

/* the wrong-network state on the gate */
.note.netfix{display:flex;flex-direction:column;align-items:stretch;gap:12px;
  padding:14px;text-align:left;}
.netfix .nf-t{line-height:1.6;}
.netfix .nf-t .ic{vertical-align:-3px;margin-right:4px;}
.netfix .btn{width:100%;justify-content:center;}

/* build stamp on the sign-in card — deliberately quiet */
.buildid{margin-top:14px;text-align:center;font:10px var(--mono);color:var(--outline);letter-spacing:.06em;}