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

html,
body{
    width:100%;
    min-height:100%;
}

body{
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.08), transparent 40%),
        linear-gradient(135deg, #2b1f2f 0%, #3d2440 45%, #1d1724 100%);
    color:#fff;
    overflow:hidden;
}

.page-wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.card{
    width:100%;
    max-width:420px;
    min-height:240px;
    border-radius:24px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 20px 60px rgba(0,0,0,0.28);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
    cursor:pointer;
    user-select:none;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.card:hover{
    transform:translateY(-2px);
    box-shadow:0 26px 70px rgba(0,0,0,0.35);
    background:rgba(255,255,255,0.10);
}

.card:active{
    transform:scale(0.99);
}

.logo-wrap{
    width:78px;
    height:78px;
    border-radius:22px;
    background:linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0.08));
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 12px 30px rgba(0,0,0,0.18);
}

.logo-text{
    font-size:34px;
    font-weight:700;
    letter-spacing:2px;
    color:#fff;
}

.site-title{
    font-size:30px;
    font-weight:700;
    line-height:1;
    letter-spacing:2px;
    color:#fff;
}

.dots{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    height:16px;
}

.dots span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,0.88);
    animation:blink 1.2s infinite ease-in-out;
}

.dots span:nth-child(2){
    animation-delay:.2s;
}

.dots span:nth-child(3){
    animation-delay:.4s;
}

@keyframes blink{
    0%, 80%, 100%{
        transform:scale(.65);
        opacity:.35;
    }
    40%{
        transform:scale(1);
        opacity:1;
    }
}

@media (max-width: 768px){
    .card{
        max-width:100%;
        min-height:220px;
        border-radius:20px;
        gap:18px;
    }

    .logo-wrap{
        width:72px;
        height:72px;
        border-radius:20px;
    }

    .logo-text{
        font-size:30px;
    }

    .site-title{
        font-size:26px;
    }
}