* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html, body {

    width: 100%;

    min-height: 100vh;

    font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;

    background: linear-gradient(135deg, #f8fafc 0%, #e0e7ef 100%);

}



a {

    text-decoration: none

}



.box {

    margin: 0 auto;

    padding: 40px 24px 24px 24px;

    max-width: 100vw;

    min-height: 100vh;

    background: #fff;

    border-radius: 18px;

    box-shadow: 0 6px 32px 0 rgba(0,0,0,0.08);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.ip {

    margin-bottom: 18px;

    color: #e74c3c;

    font-weight: 800;

    font-size: 2rem;

    letter-spacing: 2px;

    text-align: center;

}



.title {

    color: #c96501;

    font-size: 1.1rem;

    text-align: center;

    margin-bottom: 8px;

    font-weight: 500;

    line-height: 1.5;

}



.main {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;

    margin: 18px auto 0 auto;

    width: 100%;

    max-width: 700px;

    margin-left: auto;

    margin-right: auto;

}



.main a {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    margin: 0;

    padding: 0 16px;

    width: 100%;

    height: 44px;

    border: 1.5px solid #e0e0e0;

    border-radius: 8px;

    background: #f7fafd;

    color: #444;

    font-weight: 600;

    font-size: 15px;

    line-height: 44px;

    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.03);

    transition: box-shadow 0.2s, border 0.2s;

    cursor: not-allowed;

    pointer-events: none;

}



.main .success {

    border: 1.5px solid #53c957;

    background: linear-gradient(90deg, #eaffea 0%, #d2f8d2 100%);

    color: #1a7f2e;

    cursor: pointer;

    pointer-events: auto;

    box-shadow: 0 2px 12px 0 rgba(83,201,87,0.08);

}



.main .warn {

    border: 1.5px solid #ffc107;

    background: linear-gradient(90deg, #fffbe6 0%, #fff3cd 100%);

    color: #b8860b;

    cursor: pointer;

    pointer-events: auto;

    box-shadow: 0 2px 12px 0 rgba(255,193,7,0.08);

}



.main .err {

    border: 1.5px solid #e74c3c;

    background: linear-gradient(90deg, #ffeaea 0%, #ffd6d6 100%);

    color: #c0392b;

}



.main a .time {

    margin-left: auto;

    margin-right: 8px;

    text-align: right;

    font-size: 13px;

    flex-grow: 1;

    opacity: 0.7;

}



.main a i {

    display: block;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    margin-right: 8px;

    background: #333;

}



.main .success i { background: #53c957; }

.main .warn i { background: #ffc107; }

.main .err i { background: #e74c3c; }



.btn {

    margin: 18px auto 0 auto;

    width: 90%;

    max-width: 320px;

    height: 48px;

    border-radius: 24px;

    background: linear-gradient(90deg, #53c957 0%, #43b26c 100%);

    color: #fff;

    text-align: center;

    font-size: 20px;

    font-weight: 700;

    line-height: 48px;

    cursor: pointer;

    box-shadow: 0 2px 8px 0 rgba(83,201,87,0.10);

    border: none;

    transition: background 0.2s, box-shadow 0.2s;

    margin-bottom: 12px;

}

.btn:hover {

    background: linear-gradient(90deg, #43b26c 0%, #53c957 100%);

    box-shadow: 0 4px 16px 0 rgba(83,201,87,0.18);

}



.appbtn {

    background: linear-gradient(90deg, #00aeff 0%, #0077b6 100%);

    box-shadow: 0 2px 8px 0 rgba(0,174,255,0.10);

}

.appbtn:hover {

    background: linear-gradient(90deg, #0077b6 0%, #00aeff 100%);

}

.kfbtn {

    background: linear-gradient(90deg, #ff4d4f 0%, #c0392b 100%);

    box-shadow: 0 2px 8px 0 rgba(255,77,79,0.10);

}

.kfbtn:hover {

    background: linear-gradient(90deg, #c0392b 0%, #ff4d4f 100%);

}



/* 延迟分级颜色 */

.delay-fast {

    background: linear-gradient(90deg, #eaffea 0%, #d2f8d2 100%) !important;

    border-color: #53c957 !important;

    color: #1a7f2e !important;

}

.delay-medium {

    background: linear-gradient(90deg, #fffbe6 0%, #fff3cd 100%) !important;

    border-color: #ffc107 !important;

    color: #b8860b !important;

}

.delay-slow {

    background: linear-gradient(90deg, #fff4e6 0%, #ffd6a0 100%) !important;

    border-color: #ff9800 !important;

    color: #ff9800 !important;

}

.delay-error {

    background: linear-gradient(90deg, #ffeaea 0%, #ffd6d6 100%) !important;

    border-color: #e74c3c !important;

    color: #e74c3c !important;

}



/* 响应式适配 */

@media (max-width: 600px) {

    .box {

        max-width: 100vw;

        min-height: 100vh;

        border-radius: 0;

        padding: 24px 4vw 16vw 4vw;

        box-shadow: none;

    }

    .ip {

        font-size: 1.3rem;

    }

    .title {

        font-size: 1rem;

    }

    .main {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 12px;

        width: 100%;

    }

    .main a {

        width: 100%;

        min-width: 0;

        max-width: 100%;

        font-size: 15px;

        margin: 0;

    }

    .btn {

        width: 98vw;

        font-size: 18px;

        height: 44px;

        line-height: 44px;

    }

}