:root{
    color-scheme: dark;
    --bg:#301b00;
    --normal-text:#f4f4f4;
    --lighter-text:#a4a4a4;
    --href-hover:#e08ec4;
    --href:#00a2d8;
    --blk:#3f002e;
    --style-text-l:#cd6aae;
    --style-text-n:#a54688;
    --style-text-d:#7e2065;
    --radius:2rem;
}

*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
}
html{
    font-size: 16px;
    font-family: "Noto Sans CJK",sans-serif;
}
body{
    background: var(--bg);
    color: var(--normal-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: 1.7;    /* 行高=字号×1.7，中文正文舒适区 */
    animation: page-in .6s ease-out;   /* 背景图随页面一起淡入 */
}
@keyframes page-in{
    from{ opacity: 0; }
    to{ opacity: 1; }
}
main{
    flex: 1;
}
a{
    color: var(--href);
    transition: color .15s ease;
}
a:hover{
    color: var(--href-hover);
}
footer
{
    background: linear-gradient(#ffffff00,color-mix(in srgb,var(--blk) 90%,#ffffff00),var(--blk));
    margin: 0;
    animation: foot-up .6s ease-out .3s both;   /* 文字延迟上浮 */
}
@keyframes foot-up{
    from{ opacity: 0; transform: translateY(10px); }
    to{ opacity: 1; transform: translateY(0); }
}
.vbox{
    margin: auto;
    padding: 1rem;
    padding-bottom: 0.5rem;
}
.icp,.signed{
    text-align: right;
    font-size: 0.8rem;
    color: var(--lighter-text);
}
img.icon{
    width: 4rem;
    height: auto;
    border-radius: 2rem;
}
.site-brand{
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
}
.flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.rowflex{
    flex-direction: row;
    gap: 1rem;
    margin: 1rem;
}
.cloumflex{
    flex-direction: column;
    gap: 1rem;
    margin: 1rem;
}
#loading-text{
    margin: auto;
}
#imei-info{
    flex:1;
    text-align: right;
}

/* ===== 响应式：平板/手机 ===== */
@media (max-width: 768px){
    .flex{
        flex-direction: column;   /* footer 四块竖排，不再一行硬挤 */
        align-items: flex-start;
        gap: 0.75rem;
    }
    #imei-info{
        flex: none;
        text-align: left;         /* 竖排后右对齐没意义，靠左 */
    }
    .rowflex,.cloumflex{
        margin: 0.5rem 0;         /* 收紧纵向间距 */
        gap: 0.5rem;
    }
    .icp,.signed{
        text-align: left;
    }
}

/* ===== 无障碍：用户系统关闭动效时，全部动画停播 ===== */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}