*{margin:0;padding:0;box-sizing:border-box;}

html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;background:#050816;}

body{position:relative;color:#fff;}

.bg{
    position:absolute;inset:0;overflow:hidden;
    background:
    radial-gradient(circle at 20% 20%,rgba(59,130,246,.28),transparent 30%),
    radial-gradient(circle at 80% 80%,rgba(168,85,247,.25),transparent 30%),
    linear-gradient(135deg,#050816,#0b1220 60%,#101827);
}

.bg::before,.bg::after{
    content:"";position:absolute;width:520px;height:520px;border-radius:50%;
    filter:blur(120px);opacity:.18;animation:move 12s ease-in-out infinite;
}

.bg::before{background:#3b82f6;top:-220px;left:-220px;}
.bg::after{background:#8b5cf6;right:-220px;bottom:-220px;animation-delay:4s;}

@keyframes move{0%,100%{transform:translateY(0);}50%{transform:translateY(40px);}}

.stars{
    position:absolute;inset:0;
    background-image:
    radial-gradient(2px 2px at 20px 30px,rgba(255,255,255,.7),transparent),
    radial-gradient(2px 2px at 80px 120px,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 150px 60px,rgba(255,255,255,.7),transparent);
    background-size:200px 200px;opacity:.3;
}

.container{position:relative;z-index:2;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:20px;}

.card{
    width:100%;max-width:560px;padding:50px 30px;border-radius:32px;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    box-shadow:0 10px 40px rgba(0,0,0,.4);text-align:center;
}

.logo{
    width:96px;height:96px;margin:0 auto 25px;border-radius:28px;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    display:flex;align-items:center;justify-content:center;
    font-size:34px;font-weight:700;
    box-shadow:0 10px 35px rgba(37,99,235,.35);
}

.title{
    font-size:40px;font-weight:700;margin-bottom:12px;
    background:linear-gradient(135deg,#60a5fa,#c084fc);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

.desc{color:rgba(255,255,255,.68);font-size:15px;line-height:1.8;margin-bottom:38px;}

.city-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}

.city-btn{
    position:relative;height:58px;border-radius:18px;text-decoration:none;color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;
    overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);transition:.3s;
}

.city-btn::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(168,85,247,.2));
    opacity:0;transition:.3s;
}

.city-btn:hover{transform:translateY(-4px);box-shadow:0 10px 25px rgba(59,130,246,.2);}
.city-btn:hover::before{opacity:1;}
.city-btn span{position:relative;z-index:2;}

.footer{margin-top:34px;font-size:12px;color:rgba(255,255,255,.3);letter-spacing:2px;}

.toast{
    position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);
    width:86%;max-width:340px;padding:28px 24px;border-radius:28px;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);
    box-shadow:0 20px 60px rgba(0,0,0,.45);text-align:center;z-index:9999;
    opacity:0;visibility:hidden;transition:opacity .35s ease,transform .35s ease,visibility .35s;
}

.toast.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);}

.toast-icon{
    width:72px;height:72px;margin:0 auto 20px;border-radius:22px;
    background:linear-gradient(135deg,#3b82f6,#8b5cf6);
    display:flex;align-items:center;justify-content:center;font-size:34px;
    box-shadow:0 10px 30px rgba(59,130,246,.28);
}

.toast-title{font-size:22px;font-weight:700;margin-bottom:10px;}
.toast-desc{font-size:14px;line-height:1.8;color:rgba(255,255,255,.72);}

.mask{
    position:fixed;inset:0;background:rgba(0,0,0,.35);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    opacity:0;visibility:hidden;transition:.35s;z-index:9998;
}

.mask.show{opacity:1;visibility:visible;}

@media(max-width:640px){
    .card{padding:40px 22px;}
    .title{font-size:32px;}
    .city-grid{grid-template-columns:1fr;}
    .city-btn{height:54px;}
    .toast{padding:24px 20px;}
}