* {
box-sizing:border-box;
}


body {

margin:0;
min-height:100vh;

font-family:
Inter,
system-ui,
Arial;

background:
radial-gradient(
circle at top,
#303bff,
#090b12 50%
);

color:white;

}



.app {

max-width:900px;
margin:auto;
padding:40px 20px;

}



.glass {

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

backdrop-filter:
blur(20px);

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

box-shadow:
0 20px 60px
rgba(0,0,0,.4);

}



.header {

padding:30px;

border-radius:24px;

display:flex;
justify-content:space-between;

animation:
slide .5s ease;

}



h1 {

font-size:28px;
word-break:break-all;

}



.address-actions {

display:flex;
gap:10px;

}



button {

border:0;
padding:12px 20px;

border-radius:12px;

font-weight:600;

cursor:pointer;

transition:.25s;

}



button:hover {

transform:
translateY(-3px);

}



.copy {

background:#fff;
color:#111;

}



.extend {

background:#6366ff;
color:white;

}


.danger {

background:#ef4444;
color:white;

}



.timer-box {

text-align:center;

}


#timer {

font-size:50px;
font-weight:800;

}



.actions {

margin:25px 0;

}



.email {

margin-top:20px;

border-radius:20px;

padding:20px;

animation:
fade .4s ease;

}



.email summary {

cursor:pointer;

list-style:none;

}



.email-top {

display:flex;
justify-content:space-between;

}



.email h3 {

margin:0;

}



.preview {

opacity:.7;

}



.email-content {

margin-top:25px;

padding-top:20px;

border-top:
1px solid rgba(255,255,255,.15);

white-space:pre-wrap;

line-height:1.6;

}



.empty {

padding:60px;
text-align:center;

border-radius:20px;

}



@keyframes slide {

from {
opacity:0;
transform:translateY(-30px);
}

}



@keyframes fade {

from {
opacity:0;
transform:scale(.96);
}

}

.auth-card {

max-width:420px;
margin:120px auto;

padding:40px;

border-radius:28px;

text-align:center;

animation:
fade .5s ease;

}


.logo {

font-size:36px;
font-weight:900;

margin-bottom:10px;

background:
linear-gradient(
90deg,
#ffffff,
#9da7ff
);

-webkit-background-clip:text;
color:transparent;

}



.subtitle {

opacity:.65;
margin-bottom:30px;

}



.input {

width:100%;

padding:15px 18px;

border-radius:14px;

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

background:
rgba(0,0,0,.25);

color:white;

font-size:16px;

margin-bottom:15px;

outline:none;

}



.input:focus {

border-color:#6366ff;

}



.full {

width:100%;

}



.primary {

background:#6366ff;
color:white;

}



.secondary {

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

color:white;

}



.separator {

margin:25px 0;

opacity:.5;

}



.info-box {

margin-top:30px;

padding:18px;

border-radius:16px;

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

}



.danger-text {

color:#ff6b6b;

}



.email-input {

display:flex;
align-items:center;

background:
rgba(0,0,0,.25);

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

border-radius:14px;

margin-bottom:15px;

overflow:hidden;

}


.email-input input {

margin:0;

border:0;

background:transparent;

border-radius:0;

flex:1;

}


.email-input span {

padding-right:16px;

opacity:.65;

white-space:nowrap;

font-size:14px;

}