/* =========================================================
   Magic Profit — Wallet Connect Login Page
   ========================================================= */

:root{
   --mp-bg-0:#070A0F;
   --mp-bg-1:#0B1218;
   --mp-card:#0E1620;
   --mp-line:rgba(255,255,255,.07);
   --mp-text:#E8EEF6;
   --mp-text-dim:#8A96A8;
   --mp-purple:#A86BFF;
   --mp-cyan:#36CFFF;
   --mp-green:#3FE0A5;
   --mp-gold:#F2C25B;
   --mp-danger:#FF6B7A;
   --mp-grad-brand: linear-gradient(90deg,#A86BFF 0%,#7A8BFF 55%,#36CFFF 100%);
   --mp-grad-green: linear-gradient(135deg,#3FE0A5 0%,#27C795 100%);
}

html,body{ margin:0; padding:0; overflow-x:hidden; }
body.mp-wallet-page{
   min-height:100vh;
   background:
      radial-gradient(1100px 700px at 85% -10%, rgba(54,207,255,.10), transparent 60%),
      radial-gradient(900px 600px at -10% 110%, rgba(168,107,255,.16), transparent 60%),
      radial-gradient(1200px 520px at 50% -120px, rgba(63,224,165,.14), transparent 60%),
      var(--mp-bg-0);
   color: var(--mp-text);
   font-family: 'Poppins', system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
}

/* ---------- TOP BAR (logo left, Connect right) ---------- */
.mp-wl-bar{
   display:flex; align-items:center; justify-content:space-between;
   padding:20px 28px;
   position:relative; z-index:5;
}
.mp-wl-bar .brand{ display:flex; align-items:center; }
.mp-wl-bar .brand img{
   height:46px; width:auto; max-width:200px;
   object-fit:contain; display:block;
}

/* Connect Wallet button (shared style) */
.mp-connect-btn{
   display:inline-flex; align-items:center; gap:10px;
   padding:11px 18px;
   border:0; border-radius:12px; cursor:pointer;
   font-family:inherit; font-weight:700; font-size:14px; letter-spacing:.3px;
   color:#06140E;
   background: var(--mp-grad-green);
   box-shadow: 0 10px 24px rgba(63,224,165,.25);
   transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
   white-space:nowrap;
}
.mp-connect-btn:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.mp-connect-btn:disabled{ opacity:.7; cursor:wait; transform:none; }
.mp-connect-btn[disabled]:not(.is-busy){
   background: #1A1820 !important;
   color: var(--mp-text-dim) !important;
   box-shadow: none !important;
   border:1px solid rgba(255,107,122,.28) !important;
   cursor:not-allowed !important;
   filter:none !important;
}
.mp-connect-btn[disabled]:not(.is-busy):hover{ transform:none !important; }
.mp-connect-btn[disabled]:not(.is-busy) .ic{ color: var(--mp-danger); }

/* Top-right "Sign up / Login" secondary link */
.mp-secondary-link{
   display:inline-flex; align-items:center; gap:7px;
   padding:9px 14px; border-radius:10px;
   background:var(--mp-card); color:var(--mp-text);
   border:1px solid var(--mp-line);
   font-weight:600; font-size:13px; text-decoration:none;
   transition: border-color .15s, color .15s, background .15s;
}
.mp-secondary-link:hover{ color:var(--mp-green); border-color:rgba(63,224,165,.4); }
@media (max-width: 575.98px){
   .mp-secondary-link{ padding:8px 11px; font-size:12px; }
}
.mp-connect-btn .ic{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; }
.mp-connect-btn.is-busy .ic{ animation: mpSpin 1s linear infinite; }
@keyframes mpSpin{ to { transform: rotate(360deg); } }

/* big version in card */
.mp-connect-btn.big{
   padding:15px 26px; font-size:15px; letter-spacing:.4px;
   border-radius:14px;
   width:100%; max-width:340px; justify-content:center;
}

/* ---------- MAIN HERO ---------- */
.mp-wl-main{
   min-height: calc(100vh - 90px);
   display:flex; align-items:center; justify-content:center;
   padding:24px 20px 60px; position:relative;
}
.mp-wl-main::before{
   content:""; position:absolute; inset:0;
   background-image:
      linear-gradient(transparent 95%, rgba(255,255,255,.04) 95%),
      linear-gradient(90deg, transparent 95%, rgba(255,255,255,.04) 95%);
   background-size: 42px 42px; opacity:.35; pointer-events:none;
}

.mp-wl-card{
   position:relative; z-index:2;
   width:100%; max-width:560px;
   background: linear-gradient(180deg, rgba(20,28,40,.92), rgba(12,18,26,.92));
   border:1px solid var(--mp-line);
   border-radius:22px;
   padding:42px 36px 32px;
   text-align:center;
   box-shadow:
      0 24px 70px rgba(0,0,0,.55),
      inset 0 1px 0 rgba(255,255,255,.04);
   backdrop-filter: blur(12px);
}
.mp-wl-card::before{
   content:""; position:absolute; inset:-1px;
   border-radius:22px; padding:1px;
   background: var(--mp-grad-brand);
   -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
           mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
   -webkit-mask-composite: xor; mask-composite: exclude;
   opacity:.45; pointer-events:none;
}

.mp-wl-card .logo{
   display:flex; justify-content:center; margin:6px 0 18px;
}
.mp-wl-card .logo img{
   width:100%; max-width:340px; height:auto;
   max-height:120px; object-fit:contain; display:block;
}

.mp-wl-card h1{
   margin:8px 0 6px;
   font-size:24px; font-weight:700; letter-spacing:.3px;
   background: var(--mp-grad-brand);
   -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mp-wl-card p.lead{
   margin:0 0 26px;
   color:var(--mp-text-dim); font-size:14px; letter-spacing:.3px;
}

/* "referral required" error banner */
.mp-ref-error{
   display:flex; align-items:flex-start; gap:14px;
   margin: 4px 0 20px;
   padding: 14px 16px;
   background: rgba(255,107,122,.07);
   border: 1px solid rgba(255,107,122,.32);
   border-radius: 12px;
   text-align:left;
}
.mp-ref-error > i{
   width:34px; height:34px; border-radius:9px;
   background: rgba(255,107,122,.14); color:var(--mp-danger);
   display:flex; align-items:center; justify-content:center; font-size:14px;
   border:1px solid rgba(255,107,122,.24);
   flex-shrink:0;
}
.mp-ref-error .lbl{
   font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
   color:var(--mp-danger); font-weight:700;
}
.mp-ref-error .msg{
   font-size:12.5px; color:var(--mp-text-dim); margin-top:4px; line-height:1.55;
}
.mp-ref-error .msg b{ color:var(--mp-text); font-family:monospace; font-weight:600; }

/* "sponsor detected" banner (only shown when ?ref= is in the URL) */
.mp-ref-banner{
   display:flex; align-items:center; gap:12px;
   margin: 4px 0 20px;
   padding: 12px 14px;
   background: rgba(63,224,165,.07);
   border: 1px solid rgba(63,224,165,.28);
   border-radius: 12px;
   text-align:left;
}
.mp-ref-banner > i{
   width:32px; height:32px; border-radius:9px;
   background: rgba(63,224,165,.14); color:var(--mp-green);
   display:flex; align-items:center; justify-content:center; font-size:13px;
   border:1px solid rgba(63,224,165,.22);
   flex-shrink:0;
}
.mp-ref-banner .lbl{ font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--mp-text-dim); font-weight:700; }
.mp-ref-banner .val{ font-size:14px; font-weight:700; color:var(--mp-green); font-family:monospace; margin-top:2px; }
.mp-ref-banner > i.ok{
   margin-left:auto;
   background: transparent; border:0;
   width:auto; height:auto; color:var(--mp-green); font-size:16px;
}

/* connect button area */
.mp-connect-wrap{
   display:flex; flex-direction:column; align-items:center; gap:12px;
   margin-top:10px;
}

/* live status text */
.mp-connect-status{
   min-height:18px;
   font-size:13px; color:var(--mp-text-dim);
   letter-spacing:.2px;
}
.mp-connect-status.ok  { color: var(--mp-green); }
.mp-connect-status.err { color: var(--mp-danger); }
.mp-connect-status.warn{ color: var(--mp-gold); }

/* helper grid of supported wallets (cosmetic) */
.mp-wallets{
   margin-top:22px; padding-top:18px;
   border-top:1px solid var(--mp-line);
}
.mp-wallets .lbl{
   font-size:11px; letter-spacing:2.5px;
   color:#5C6B82; text-transform:uppercase; margin-bottom:12px;
}
.mp-wallets .row{
   display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.mp-wallet-chip{
   display:inline-flex; align-items:center; gap:8px;
   background:#0A1119; border:1px solid var(--mp-line);
   border-radius:99px; padding:8px 14px;
   color:var(--mp-text-dim); font-size:12.5px; font-weight:600;
}
.mp-wallet-chip i{ color:var(--mp-text); }

/* terms note */
.mp-terms-note{
   margin-top:18px; font-size:12px; color:var(--mp-text-dim-2, #5C6B82);
}
.mp-terms-note a{
   color:var(--mp-cyan); text-decoration:none;
}

/* ---------- WALLET MODAL ---------- */
.mp-modal-backdrop{
   position:fixed; inset:0; z-index:1000;
   background:rgba(4,7,11,.72);
   backdrop-filter: blur(6px);
   display:none; align-items:center; justify-content:center;
   padding:20px;
   animation: mpFade .2s ease;
}
.mp-modal-backdrop.is-open{ display:flex; }
@keyframes mpFade { from { opacity:0 } to { opacity:1 } }

.mp-modal{
   position:relative;
   width:100%; max-width:440px;
   background: linear-gradient(180deg, rgba(20,28,40,.96), rgba(12,18,26,.96));
   border:1px solid var(--mp-line);
   border-radius:20px;
   box-shadow: 0 30px 80px rgba(0,0,0,.6);
   overflow:hidden;
   animation: mpRise .25s cubic-bezier(.22,.61,.36,1);
}
@keyframes mpRise { from { transform:translateY(20px); opacity:0 } to { transform:translateY(0); opacity:1 } }
.mp-modal::before{
   content:""; position:absolute; inset:-1px;
   border-radius:20px; padding:1px;
   background: var(--mp-grad-brand);
   -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
           mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
   -webkit-mask-composite: xor; mask-composite: exclude;
   opacity:.45; pointer-events:none;
}

.mp-modal-head{
   padding:20px 22px 14px;
   display:flex; align-items:center; justify-content:space-between;
   border-bottom:1px solid var(--mp-line);
   position:relative; z-index:1;
}
.mp-modal-head h3{
   margin:0; font-size:16px; font-weight:700; letter-spacing:.3px;
}
.mp-modal-head p{
   margin:3px 0 0; font-size:12px; color:var(--mp-text-dim);
}
.mp-modal-close{
   width:34px; height:34px; border-radius:10px;
   border:1px solid var(--mp-line); background:#0A1119; color:var(--mp-text);
   cursor:pointer; font-size:13px;
   display:inline-flex; align-items:center; justify-content:center;
}
.mp-modal-close:hover{ color:var(--mp-danger); border-color:rgba(255,107,122,.4); }

.mp-modal-body{
   padding:14px 14px 18px;
   max-height:62vh; overflow-y:auto;
   scrollbar-width:thin;
   scrollbar-color: rgba(255,255,255,.15) transparent;
}
.mp-modal-body::-webkit-scrollbar{ width:6px; }
.mp-modal-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.1); border-radius:99px; }

.mp-modal-section{
   font-size:11px; letter-spacing:2.5px; color:var(--mp-text-dim-2,#5C6B82);
   text-transform:uppercase; padding:10px 10px 8px;
}

.mp-wallet-list{
   display:flex; flex-direction:column; gap:8px;
}
.mp-wallet-item{
   display:flex; align-items:center; gap:14px;
   padding:14px 14px;
   border:1px solid var(--mp-line);
   background:#0A1119;
   border-radius:14px;
   color:var(--mp-text);
   text-align:left; width:100%;
   font-family:inherit; font-size:14px; font-weight:600;
   cursor:pointer;
   transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.mp-wallet-item:hover{
   border-color: rgba(63,224,165,.45);
   background:#0C1420;
   transform: translateY(-1px);
}
.mp-wallet-item:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.mp-wallet-item.is-busy{ border-color:rgba(54,207,255,.5); }

.mp-wallet-item .ic{
   width:40px; height:40px; border-radius:12px;
   display:flex; align-items:center; justify-content:center;
   font-size:20px; flex-shrink:0;
   background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
   border:1px solid var(--mp-line);
}
.mp-wallet-item .ic.metamask  { color:#F2A45B; }
.mp-wallet-item .ic.phantom   { color:#AB9FF2; }
.mp-wallet-item .ic.solflare  { color:#FFB229; }
.mp-wallet-item .ic.trust     { color:#3375BB; }
.mp-wallet-item .ic.coinbase  { color:#1652F0; }
.mp-wallet-item .ic.walletconnect{ color:#3B99FC; }
.mp-wallet-item .ic.backpack  { color:#E33E3E; }

.mp-wallet-item .body{ flex:1; min-width:0; }
.mp-wallet-item .name{ display:block; font-weight:700; font-size:14.5px; }
.mp-wallet-item .sub { display:block; font-size:11.5px; color:var(--mp-text-dim); font-weight:500; margin-top:2px; }

.mp-wallet-item .badge{
   font-size:10.5px; font-weight:700; letter-spacing:1px;
   padding:4px 9px; border-radius:99px; text-transform:uppercase;
   white-space:nowrap;
}
.mp-wallet-item .badge.detected{
   background:rgba(63,224,165,.14); color:var(--mp-green);
   border:1px solid rgba(63,224,165,.22);
}
.mp-wallet-item .badge.install{
   background:rgba(168,107,255,.12); color:var(--mp-purple);
   border:1px solid rgba(168,107,255,.22);
}
.mp-wallet-item .chev{ color:var(--mp-text-dim); font-size:13px; margin-left:6px; }

.mp-wallet-item .spin{
   width:18px; height:18px; border-radius:50%;
   border:2px solid rgba(54,207,255,.25);
   border-top-color: var(--mp-cyan);
   animation: mpSpin 1s linear infinite;
}

.mp-modal-foot{
   padding:12px 18px 16px;
   border-top:1px solid var(--mp-line);
   font-size:11.5px; color:var(--mp-text-dim);
   text-align:center;
}
.mp-modal-foot a{ color:var(--mp-cyan); text-decoration:none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 575.98px){
   .mp-wl-bar{ padding:14px 16px; }
   .mp-wl-bar .brand img{ height:36px; }
   .mp-connect-btn{ padding:9px 14px; font-size:13px; }
   .mp-connect-btn .label{ display:none; }
   .mp-connect-btn .label-sm{ display:inline; }

   .mp-wl-card{ padding:30px 22px 26px; border-radius:18px; }
   .mp-wl-card h1{ font-size:20px; }
   .mp-wl-card p.lead{ font-size:13px; }
   .mp-wl-card .logo img{ max-width:260px; max-height:90px; }

   .mp-modal{ border-radius:18px; }
   .mp-modal-head{ padding:16px 18px 12px; }
   .mp-wallet-item{ padding:12px; gap:12px; }
   .mp-wallet-item .ic{ width:36px; height:36px; font-size:18px; }
}
.mp-connect-btn .label-sm{ display:none; }

/* ---------- Toastify (Magic Profit dark theme) ---------- */
.toastify{
   font-family:'Poppins', system-ui, sans-serif !important;
   font-size:13.5px !important;
   font-weight:600 !important;
   letter-spacing:.2px;
   padding:14px 18px !important;
   border-radius:14px !important;
   box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) !important;
   backdrop-filter: blur(12px);
   border:1px solid var(--mp-line);
   max-width:380px;
   display:flex !important;
   align-items:center;
   gap:10px;
   line-height:1.45;
}
.toastify.on{ animation: mpToastIn .32s cubic-bezier(.22,.61,.36,1); }
@keyframes mpToastIn { from { transform: translateY(-12px); opacity:0; } to { transform: translateY(0); opacity:1; } }

.toastify.mp-toast-success{
   background: linear-gradient(135deg,#1A2D26,#0E1620) !important;
   color: var(--mp-green) !important;
   border-color: rgba(63,224,165,.32) !important;
}
.toastify.mp-toast-error{
   background: linear-gradient(135deg,#2D1A1F,#1A0E14) !important;
   color: var(--mp-danger) !important;
   border-color: rgba(255,107,122,.38) !important;
}
.toastify.mp-toast-info{
   background: linear-gradient(135deg,#1B1F2B,#0E1620) !important;
   color: var(--mp-cyan) !important;
   border-color: rgba(54,207,255,.32) !important;
}
.toastify.mp-toast-warn{
   background: linear-gradient(135deg,#2D261A,#1A140E) !important;
   color: var(--mp-gold) !important;
   border-color: rgba(242,194,91,.32) !important;
}

.toastify .toast-close{
   color: rgba(255,255,255,.55) !important;
   opacity:1 !important;
   font-size:18px;
   margin-left:8px !important;
   align-self:center;
}
.toastify .toast-close:hover{ color: var(--mp-text) !important; }

.toastify::before{
   font-family: "Font Awesome 6 Free"; font-weight:900;
   font-size:18px; flex-shrink:0;
}
.toastify.mp-toast-success::before{ content:"\f058"; }   /* check-circle */
.toastify.mp-toast-error::before  { content:"\f06a"; }   /* circle-exclamation */
.toastify.mp-toast-info::before   { content:"\f05a"; }   /* circle-info */
.toastify.mp-toast-warn::before   { content:"\f071"; }   /* triangle-exclamation */