*{margin:0;padding:0;box-sizing:border-box}
body{
    background:linear-gradient(135deg,#f7faff,#fff);
    display:flex;
    justify-content:center;
    /* 原居中改为顶部对齐，配合margin-top上移到上半部分 */
    align-items:flex-start;
    height:100vh;
    font-family:"Microsoft YaHei",system-ui,sans-serif;
    color:#333;
    user-select:none;
    overflow:hidden;
}
.circle-loader{
    width:48px;height:48px;
    position:relative;
    animation:breathe 1.5s ease-in-out infinite alternate;
    will-change:transform;transform:translateZ(0);
    /* 给圆形加载器添加上边距，单独上移 */
    margin-top: 20vh;
}
.circle-loader::before{
    content:'';position:absolute;top:0;left:0;
    width:100%;height:100%;
    border:4px solid #e8f2ff;border-radius:50%
}
.circle-loader::after{
    content:'';position:absolute;top:0;left:0;
    width:100%;height:100%;
    border:4px solid transparent;border-top-color:#4096ff;
    border-radius:50%;
    animation:spin 1.2s linear infinite;will-change:transform
}
.diamond-container{
    text-align:center;
    opacity:0;
    transition:opacity .6s ease;
    position:absolute;
    /* 钻石加载容器整体上移到屏幕上半部分 */
    top: 20vh;
    left: 50%;
    transform: translateX(-50%);
}
.diamond-loader{width:60px;height:60px;position:relative;margin:0 auto 24px}
.diamond{
    position:absolute;width:30px;height:30px;
    border:2px solid #7998bb;
    transform:rotate(45deg);
    top:50%;left:50%;
    margin:-15px 0 0 -15px;
    border-radius:2px;will-change:transform
}
.diamond:nth-child(1){
  animation: diamond 2.2s infinite, innerColor 8.8s step-end infinite;
}
.diamond:nth-child(2){
    border-color:#a0b4cc;width:38px;height:38px;
    margin:-19px 0 0 -19px;opacity:.6;
    animation:diamond 2.2s infinite reverse;
}
.diamond:nth-child(3){
    border-color:#c2d4e8;width:46px;height:46px;
    margin:-23px 0 0 -23px;opacity:.4;
    animation:diamond 2.2s infinite;
}
.title{font-size:17px;margin-bottom:10px;color:#222;letter-spacing:1px}
.tip{font-size:13px;color:#888}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes diamond{
0%{transform:rotate(45deg) scale(1)}
50%{transform:rotate(225deg) scale(.95)}
100%{transform:rotate(405deg) scale(1)}
}
@keyframes breathe{0%{transform:scale(1)}100%{transform:scale(1.05)}}
@keyframes innerColor {
  0%    { border-color: #AAAAAA; }
  25%   { border-color: #FF0000; }
  50%   { border-color: #228B22; }
  75%   { border-color: #1E90FF; }
  100%  { border-color: #AAAAAA; }
}