/* ==========================================================
CRAB AGENT
WALLET.CSS
========================================================== */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:'Poppins',sans-serif;

background:#0d0717;

color:#fff;

min-height:100vh;

overflow-x:hidden;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

/* ==========================================================
BACKGROUND
========================================================== */

body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(circle at top,#7b3fff55 0%,transparent 35%),

radial-gradient(circle at bottom,#24103c 0%,transparent 45%),

#0d0717;

z-index:-2;

}

.bgGlow{

position:fixed;

width:550px;

height:550px;

border-radius:50%;

background:#7b3fff;

filter:blur(170px);

opacity:.18;

z-index:-1;

}

/* ==========================================================
PAGE
========================================================== */

.walletPage{

width:100%;

max-width:700px;

padding:40px 20px;

}

.walletCard{

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

border-radius:30px;

padding:55px;

text-align:center;

backdrop-filter:blur(20px);

box-shadow:

0 25px 70px rgba(0,0,0,.35);

}

/* ==========================================================
HEADER
========================================================== */

.walletLogo{

width:120px;

height:120px;

aspect-ratio:1/1;

object-fit:contain;

margin:auto;

display:block;

margin-bottom:20px;

filter:

drop-shadow(0 0 30px rgba(139,77,255,.55));

}

.powered{

color:#a97cff;

font-size:14px;

font-weight:700;

letter-spacing:2px;

margin-bottom:18px;

text-transform:uppercase;

}

.walletCard h1{

font-size:52px;

margin-bottom:20px;

font-weight:800;

}

.walletCard p{

font-size:18px;

line-height:1.8;

color:#d2d2d2;

margin-bottom:35px;

}

/* ==========================================================
BUTTON
========================================================== */

.primaryBtn{

width:100%;

padding:18px;

border:none;

border-radius:999px;

background:#8b4dff;

color:white;

font-size:17px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.primaryBtn:hover{

transform:translateY(-3px);

background:#9d68ff;

}

.primaryBtn:disabled{

background:#555;

cursor:not-allowed;

transform:none;

}

/* ==========================================================
WALLET STATUS
========================================================== */

.walletStatus{

margin-top:20px;

padding:14px;

border-radius:14px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

font-size:15px;

font-weight:600;

color:#cfcfcf;

word-break:break-all;

}

/* ==========================================================
DISCLAIMER (modal overlay)
========================================================== */

.disclaimerOverlay{

position:fixed;

inset:0;

background:rgba(6,4,12,.78);

backdrop-filter:blur(8px);

display:flex;

align-items:center;

justify-content:center;

padding:20px;

z-index:999;

}

.disclaimerOverlay.hidden{

display:none;

}

.disclaimerModal{

width:100%;

max-width:480px;

max-height:85vh;

overflow-y:auto;

padding:32px;

border-radius:24px;

background:#15111f;

border:1px solid rgba(255,255,255,.08);

text-align:left;

box-shadow:0 30px 80px rgba(0,0,0,.5);

animation:fadeIn .35s ease;

}

.disclaimerModal::-webkit-scrollbar{

width:6px;

}

.disclaimerModal::-webkit-scrollbar-thumb{

background:rgba(139,77,255,.4);

border-radius:999px;

}

.disclaimerModal h2{

font-size:26px;

margin-bottom:18px;

text-align:center;

}

.disclaimerModal p{

font-size:15px;

color:#d2d2d2;

line-height:1.8;

margin-bottom:16px;

}

/* ==========================================================
WALLET PICKER / INSTALL MODAL
(same overlay + card visual language as the disclaimer
modal above - dark card, rounded corners, purple accent)
========================================================== */

.walletPickerOverlay{

position:fixed;

inset:0;

background:rgba(6,4,12,.78);

backdrop-filter:blur(8px);

display:flex;

align-items:center;

justify-content:center;

padding:20px;

z-index:999;

}

.walletPickerOverlay.hidden{

display:none;

}

.walletPickerModal{

width:100%;

max-width:400px;

max-height:85vh;

overflow-y:auto;

padding:26px;

border-radius:24px;

background:#15111f;

border:1px solid rgba(255,255,255,.08);

text-align:left;

box-shadow:0 30px 80px rgba(0,0,0,.5);

animation:fadeIn .35s ease;

}

.walletPickerModal h2{

font-size:20px;

margin-bottom:6px;

text-align:center;

}

.walletPickerSub{

font-size:13px;

color:#9a9a9a;

text-align:center;

margin-bottom:20px;

}

.walletPickerList{

display:flex;

flex-direction:column;

gap:10px;

}

.walletOption{

display:flex;

align-items:center;

gap:14px;

padding:14px 16px;

border-radius:16px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

cursor:pointer;

transition:.2s;

width:100%;

text-align:left;

color:white;

font-family:inherit;

}

.walletOption:hover{

border-color:#8b4dff;

background:rgba(139,77,255,.1);

transform:translateY(-2px);

}

.walletOptionIcon{

width:36px;

height:36px;

min-width:36px;

min-height:36px;

aspect-ratio:1/1;

flex-shrink:0;

border-radius:10px;

object-fit:cover;

background:rgba(255,255,255,.08);

display:flex;

align-items:center;

justify-content:center;

font-size:18px;

}

.walletOptionName{

font-size:15px;

font-weight:600;

}

.walletOptionTag{

font-size:11px;

color:#9a9a9a;

margin-top:2px;

}

.walletPickerClose{

display:block;

margin:18px auto 0;

background:none;

border:none;

color:#9a9a9a;

font-size:13px;

cursor:pointer;

text-decoration:underline;

}

.hidden{

display:none;

}

.agree{

display:flex;

align-items:flex-start;

gap:12px;

margin:25px 0;

font-size:15px;

cursor:pointer;

}

.agree input{

margin-top:4px;

transform:scale(1.2);

accent-color:#8b4dff;

}

/* ==========================================================
FEATURE LIST
========================================================== */

.featureList{

margin-top:40px;

display:flex;

flex-direction:column;

gap:18px;

}

.featureItem{

display:flex;

align-items:center;

gap:18px;

padding:20px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

border-radius:20px;

transition:.25s;

}

.featureItem:hover{

transform:translateY(-3px);

border-color:#8b4dff;

box-shadow:

0 10px 30px rgba(139,77,255,.18);

}

.featureIcon{

width:60px;

height:60px;

min-width:60px;

aspect-ratio:1/1;

border-radius:18px;

background:#8b4dff;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

flex-shrink:0;

}

.featureItem h3{

font-size:20px;

margin-bottom:6px;

}

.featureItem p{

margin:0;

font-size:15px;

line-height:1.6;

color:#d2d2d2;

}

/* ==========================================================
FOOTER
========================================================== */

footer{

margin-top:35px;

text-align:center;

}

footer a{

color:#b98cff;

text-decoration:none;

font-weight:600;

transition:.25s;

}

footer a:hover{

color:white;

}

/* ==========================================================
ANIMATION
========================================================== */

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.walletCard{

animation:fadeIn .45s ease;

}

/* ==========================================================
RESPONSIVE
========================================================== */

@media(max-width:768px){

.walletPage{

padding:25px 15px;

}

.walletCard{

padding:35px 22px;

border-radius:24px;

}

.walletLogo{

width:90px;

height:90px;

aspect-ratio:1/1;

}

.walletCard h1{

font-size:36px;

}

.walletCard p{

font-size:16px;

}

.featureItem{

flex-direction:column;

text-align:center;

padding:22px;

}

.featureIcon{

width:56px;

height:56px;

min-width:56px;

aspect-ratio:1/1;

flex-shrink:0;

font-size:24px;

}

.agree{

align-items:flex-start;

font-size:14px;

}

.primaryBtn{

padding:16px;

font-size:16px;

}

.disclaimerModal{

padding:24px;

max-height:90vh;

}

.disclaimerModal h2{

font-size:22px;

}

}

@media(max-width:480px){

.walletCard{

padding:28px 18px;

}

.walletCard h1{

font-size:30px;

}

.powered{

font-size:12px;

letter-spacing:1px;

}

.walletStatus{

font-size:13px;

}

.featureItem h3{

font-size:18px;

}

.featureItem p{

font-size:14px;

}

.disclaimerModal{

padding:20px;

border-radius:18px;

}

}

/* ==========================================================
END OF FILE
========================================================== */