/* =====================================================================
   Accounts, plans, payments, referrals
   ===================================================================== */
.auth-tabs{display:flex; gap:6px; margin:0 0 14px; width:100%; justify-content:center; flex-wrap:wrap}
.auth-tabs .tab{padding:6px 13px; font-size:12.5px}
#form-recover,#form-signup{display:flex; flex-direction:column; gap:11px; width:100%}
#form-signup input,#form-recover input,#form-recover textarea{
  background:var(--bg); border:2px solid var(--ink); border-radius:var(--radius); color:var(--ink);
  padding:12px 14px; font:inherit; font-size:15px; width:100%;
}
#form-signup input:focus,#form-recover input:focus,#form-recover textarea:focus{outline:none; background:#fff; box-shadow:0 0 0 4px rgba(255,92,154,.25)}
#form-signup .btn,#form-recover .btn{margin-top:6px}

.usage-pill{background:var(--yellow); border:2px solid var(--ink); border-radius:999px; padding:5px 14px; font-weight:700; font-size:13px; box-shadow:0 3px 0 var(--ink); color:var(--ink)}
.usage-pill.warn{background:var(--pink); color:#fff}

.nav-item.locked,.launch-tile.locked{position:relative; filter:saturate(.45)}
.nav-item.locked::before,.launch-tile.locked::before{content:"\1F512"; position:absolute; top:3px; right:5px; font-size:11px}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; z-index:300; background:rgba(42,27,77,.55); backdrop-filter:blur(6px); display:grid; place-items:center; padding:18px; overflow-y:auto}
.modal-card{
  background:#fff; border:3px solid var(--ink); border-radius:28px; box-shadow:0 9px 0 var(--ink);
  width:min(520px,100%); padding:28px 26px; display:flex; flex-direction:column; gap:16px; animation:pop .28s cubic-bezier(.3,1.6,.5,1);
}
@keyframes pop{from{transform:scale(.88) translateY(20px); opacity:0}}
.modal-card h2{font-size:26px}
.modal-sub{margin:0; color:var(--dim); line-height:1.5; font-size:14.5px}
.modal-row{display:flex; gap:12px; flex-wrap:wrap}
.modal-row .btn{flex:1}
.check-row{display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px; cursor:pointer}
.check-row input{width:20px; height:20px; accent-color:var(--pink)}
.modal-card input[type=password],.modal-card input[type=text]{
  background:var(--bg); border:2px solid var(--ink); border-radius:var(--radius); padding:12px 14px; font:inherit; font-size:15px; width:100%}
.phrase-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
@media(max-width:480px){.phrase-grid{grid-template-columns:repeat(2,1fr)}}
.phrase-word{display:flex; align-items:center; gap:8px; background:var(--bg); border:2px solid var(--ink); border-radius:14px; padding:8px 10px; font-weight:800; font-family:var(--display); font-size:16px}
.phrase-word i{font-style:normal; font-size:11px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--ink); flex:0 0 auto}
.phrase-word.c0 i{background:var(--pink)} .phrase-word.c1 i{background:var(--yellow)} .phrase-word.c2 i{background:var(--mint)}
.phrase-word.c3 i{background:var(--sky)} .phrase-word.c4 i{background:var(--violet); color:#fff} .phrase-word.c5 i{background:var(--orange)}
.paid-burst{text-align:center; display:flex; flex-direction:column; gap:12px; align-items:center}
.paid-emoji{font-size:64px; animation:bounce .6s cubic-bezier(.3,1.6,.5,1) infinite alternate}

/* ---------- account page ---------- */
#account-root{display:flex; flex-direction:column; gap:38px; max-width:1100px}
.acct-head h2{font-size:28px}
.acct-head p{color:var(--dim); margin:6px 0 0; line-height:1.55}
.acct-section{display:flex; flex-direction:column; gap:16px}
.status-card{gap:14px}
.status-top{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.status-exp{color:var(--dim)}
.plan-badge{font-family:var(--display); font-weight:800; font-size:18px; padding:6px 18px; border-radius:999px; border:3px solid var(--ink); background:#fff}
.plan-badge.basic{background:var(--sky)} .plan-badge.pro{background:var(--pink); color:#fff} .plan-badge.none{background:var(--bg2)}
.meter{height:20px; border:3px solid var(--ink); border-radius:999px; background:#fff; overflow:hidden}
.meter-fill{height:100%; background:repeating-linear-gradient(45deg,var(--mint) 0 14px,#3be3b6 14px 28px); transition:width .6s cubic-bezier(.3,1.2,.5,1)}
.meter-label{font-size:13.5px; color:var(--dim)} .meter-label b{color:var(--ink)}
.friend-banner{background:var(--yellow); border:2px solid var(--ink); border-radius:14px; padding:9px 14px; font-weight:700; font-size:13.5px}
.friend-banner.warn{background:#FFE3E8}

.plan-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px}
.plan-card{
  position:relative; background:#fff; border:3px solid var(--ink); border-radius:var(--radius-lg); padding:26px 24px;
  box-shadow:0 7px 0 var(--ink); display:flex; flex-direction:column; gap:12px;
  transition:transform .18s cubic-bezier(.3,1.6,.5,1);
}
.plan-card:hover{transform:translateY(-6px) rotate(-.6deg)}
.plan-card.pro{background:linear-gradient(160deg,#fff 40%,#FFE3EF)}
.plan-card.current{outline:4px solid var(--mint); outline-offset:3px}
.plan-ribbon{position:absolute; top:-14px; right:18px; background:var(--violet); color:#fff; font-weight:800; font-size:12px; padding:5px 13px; border-radius:999px; border:3px solid var(--ink); transform:rotate(3deg)}
.plan-card h3{font-size:28px}
.plan-price{font-family:var(--display); font-weight:800; font-size:44px; letter-spacing:-.04em; line-height:1}
.plan-price small{font-size:15px; font-weight:600; color:var(--dim); letter-spacing:0; margin-left:4px}
.plan-price s{font-size:22px; color:var(--dim2); margin-right:6px}
.plan-quota{font-weight:600; color:var(--dim)} .plan-quota b{color:var(--ink)}
.plan-feats{list-style:none; margin:4px 0 8px; padding:0; display:flex; flex-direction:column; gap:7px}
.plan-feats li{font-weight:600; padding-left:28px; position:relative}
.plan-feats li::before{content:"\2713"; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; background:var(--mint); border:2px solid var(--ink); font-size:11px; display:grid; place-items:center}
.plan-feats li.no{color:var(--dim2); text-decoration:line-through}
.plan-feats li.no::before{content:"\2715"; background:#eee}
.invoice-list{background:rgba(255,255,255,.7); border:2px dashed var(--ink); border-radius:var(--radius-lg); padding:14px 18px}
.invoice-list h4{margin:0 0 8px; font-family:var(--display)}
.inv-row{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; border-bottom:2px dashed var(--line); font-weight:600; font-size:14px}
.inv-row:last-child{border-bottom:0}
.inv-row .plus{color:var(--ok)} .inv-row .minus{color:var(--danger)}
.pillx{font-size:11.5px; font-weight:800; padding:3px 11px; border-radius:999px; border:2px solid var(--ink); background:#eee; text-transform:uppercase; letter-spacing:.04em}
.pillx.paid{background:var(--mint)} .pillx.pending{background:var(--yellow)} .pillx.expired{background:#ffd9df}

/* ---------- payment modal ---------- */
.qr-wrap{display:grid; place-items:center}
#qr{padding:12px; background:#fff; border:3px solid var(--ink); border-radius:20px; box-shadow:0 5px 0 var(--ink); line-height:0}
.pay-fields{display:flex; flex-direction:column; gap:10px}
.pay-field label{font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--dim)}
.pay-val{display:flex; align-items:center; gap:10px; background:var(--bg); border:2px solid var(--ink); border-radius:14px; padding:9px 12px}
.pay-val code{font-family:var(--mono); font-size:14px; font-weight:500; word-break:break-all; flex:1}
.mini{border:2px solid var(--ink); background:var(--yellow); color:var(--ink); border-radius:999px; padding:3px 12px; font:inherit; font-weight:800; font-size:12px; cursor:pointer; flex:0 0 auto}
.mini:hover{background:var(--pink); color:#fff}
.pay-status{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--dim)}
.spinner{width:18px; height:18px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--pink); animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- referrals ---------- */
.ref-card{gap:16px}
.ref-link{display:flex; gap:12px; flex-wrap:wrap}
.ref-link input{flex:1; min-width:220px; font-family:var(--mono); font-size:13px}
.ref-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}
.stat{background:var(--bg); border:2px solid var(--ink); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:3px}
.stat b{font-family:var(--display); font-size:28px; font-weight:800; letter-spacing:-.03em}
.stat span{font-size:12px; color:var(--dim); font-weight:600}
.stat.hot{background:var(--mint)} .stat.hot span{color:var(--ink)}
.tier-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px}
.tier{border:3px dashed var(--line); border-radius:18px; padding:14px 10px; text-align:center; opacity:.6}
.tier.reached{border:3px solid var(--ink); opacity:1; background:#fff}
.tier.current{background:var(--yellow); box-shadow:0 5px 0 var(--ink); transform:translateY(-3px)}
.tier-rate{font-family:var(--display); font-size:30px; font-weight:800; letter-spacing:-.03em}
.tier-name{font-weight:800; font-size:13px} .tier-need{font-size:11.5px; color:var(--dim); font-weight:600}
.payout-row{display:flex; gap:12px; flex-wrap:wrap} .payout-row input{flex:1; min-width:220px}
.sec-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.sec-row h3{display:flex; align-items:center; gap:10px}
.sec-form{display:flex; flex-direction:column; gap:11px; max-width:380px}
.sep{border:0; border-top:2px dashed var(--line); width:100%; margin:4px 0}

.manual-tx{border:2px dashed var(--ink); border-radius:16px; padding:10px 14px; background:var(--bg)}
.manual-tx summary{cursor:pointer; font-weight:800; font-size:14px}
.manual-tx .payout-row{margin:10px 0 6px}
.claim-row{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
.claim-amt{font-family:var(--display); font-size:34px; letter-spacing:-.03em}
.meter.small{height:14px}
.stat b.bump,.claim-amt.bump{animation:bumpnum .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes bumpnum{50%{transform:scale(1.18); color:var(--pink)}}
.since{display:inline-block; margin-top:6px; background:var(--mint); border:2px solid var(--ink); border-radius:999px; padding:2px 11px; font-weight:800; font-size:12.5px; animation:pop .4s cubic-bezier(.3,1.6,.5,1)}

.packs{background:rgba(255,255,255,.75); border:3px solid var(--ink); border-radius:var(--radius-lg); padding:18px 20px; box-shadow:0 5px 0 var(--ink); display:flex; flex-direction:column; gap:14px}
.packs-head{display:flex; flex-direction:column; gap:3px} .packs-head h3{font-size:22px}
.pack-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px}
.pack{display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--yellow); border:3px solid var(--ink); border-radius:20px; padding:16px 10px; cursor:pointer; font:inherit; color:var(--ink); box-shadow:0 5px 0 var(--ink); transition:transform .15s cubic-bezier(.3,1.7,.5,1)}
.pack:nth-child(2){background:var(--mint)} .pack:nth-child(3){background:var(--pink); color:#fff}
.pack:hover:not(:disabled){transform:translateY(-5px) rotate(-1deg)} .pack:active:not(:disabled){transform:translateY(3px)}
.pack b{font-family:var(--display); font-size:34px; letter-spacing:-.03em; line-height:1} .pack span{font-weight:700; font-size:13px}
.pack i{font-style:normal; font-family:var(--display); font-size:22px; font-weight:800; margin-top:6px} .pack small{font-size:11.5px; font-weight:700; opacity:.85}
.pack.off,.pack:disabled{filter:grayscale(.6); opacity:.55; cursor:not-allowed}
.credit-chip{background:var(--mint); border:2px solid var(--ink); border-radius:999px; padding:5px 14px; font-size:13px; font-weight:600; width:max-content; max-width:100%}