.color-complete-header{padding-top:20px;padding-bottom:24px;}
.color-complete-main{padding-bottom:58px;}
.cce-nav{width:1200px;margin:0 auto;font-size:12px;line-height:17px;color:#333333;}
.cce-nav a:hover{color:#0057FF;}
.cce-h1{font-size:28px;color:#595975;padding-left:20px;position:relative;width:1200px;margin:24px auto 0;}
.cce-h1::before{box-sizing:border-box;content:'';position:absolute;width:6px;height:30px;left:0;top:50%;transform:translateY(-50%);background:#378BFF;box-shadow:-6px -6px 3px #FFFFFF,3px 3px 3px rgba(176,202,234,0.8);border-radius:12px;}
.cce-complete-list-wrapper{}
.cce-complete-list-wrapper .complete-list{}
.cce-complete-list-wrapper .complete-list .complete-item{height:74px;background:#f5f7fd;border-radius:4px;position:relative;display:flex;justify-content:center;align-items:center;transition:all .3s;}
.cce-complete-list-wrapper .complete-list .complete-item:hover{box-shadow:-6px -6px 6px rgba(255,255,255,0.8),6px 6px 6px #E0E4EB;}
.cce-complete-list-wrapper .complete-list .complete-item:nth-child(-n+4){margin-top:0;}
.cce-complete-list-wrapper .complete-list .complete-item .magnifier-icon{width:18px;height:18px;display:block;cursor:pointer;}
.cce-complete-list-wrapper .complete-list .complete-item .magnifier-icon:hover{opacity:0.8;}
.cce-complete-list-wrapper .complete-list .complete-item .magnifier-icon::before{content:'';position:absolute;top:1px;left:1px;width:14px;height:14px;border-radius:50%;border:1px solid #333;box-sizing:border-box;}
.cce-complete-list-wrapper .complete-list .complete-item .magnifier-icon::after{content:'';position:absolute;right:3px;bottom:1px;width:1px;height:6px;background:#333;transform:rotate(-45deg);box-sizing:border-box;}
.cce-complete-list-wrapper .complete-list .complete-item .copy-icon{width:18px;height:18px;display:block;cursor:pointer;}
.cce-complete-list-wrapper .complete-list .complete-item .copy-icon:hover{opacity:0.8;}
.cce-complete-list-wrapper .complete-list .complete-item .copy-icon::before{content:'';box-sizing:border-box;position:absolute;top:3px;right:4px;width:8px;height:9px;border:1px solid #333;}
.cce-complete-list-wrapper .complete-list .complete-item .copy-icon::after{content:'';box-sizing:border-box;position:absolute;bottom:3px;left:4px;width:8px;height:9px;border:1px solid #333;background:#F1F4F7;}
.cce-complete-list-wrapper .complete-list .complete-item span,.cce-complete-list-wrapper .complete-list .complete-item input{color:#333333;position:absolute;font-size:13px;}
.cce-complete-list-wrapper .complete-list .complete-item span:first-child{top:9px;left:18px;}
.cce-complete-list-wrapper .complete-list .complete-item span:nth-child(2){top:9px;right:18px;}
.cce-complete-list-wrapper .complete-list .complete-item span:nth-child(3){right:18px;bottom:9px;cursor:pointer;}
.cce-complete-list-wrapper .complete-list .complete-item span:nth-child(3):hover{opacity:0.8;}
.cce-complete-list-wrapper .complete-list .complete-item input{left:18px;bottom:9px;background:transparent;width:80px;border:0;outline:none;}
.cce-complete-list-wrapper .complete-list .complete-item .color-show{width:53px;height:53px;border-radius:50%;}
.cce-complete-list-wrapper .complete-list .complete-item .color-show:hover{opacity:0.8;}
.cce-color-full-screen{background-image:linear-gradient(
    45deg,rgb(255,154,158) 0%,rgb(250,208,196) 99%,rgb(250,208,196) 100%);z-index:5000;position:fixed;height:3000px;width:3000px;left:0;top:0;border-radius:50%;transform:scale(0);transform-origin:center;transition:transform 0.7s cubic-bezier(0.47,0.04,0.22,0.92);background-color:#86939e;}
.cce-color-full-screen.state-pending{transform:scale(2)}
.cce-color-full-screen.state-fulfilled{transition:transform 0.7s cubic-bezier(0.47,0.04,0.22,0.92),height 0.2s ease,width 0.2s ease;transform:none;border-radius:0;height:100vh !important;width:100vw !important;left:0 !important;top:0 !important;cursor:pointer;}

/* ========== 兼容 CeoMax-Pro 深色主题 ========== */
.night .cce-complete-list-wrapper .complete-list .complete-item{
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}
.night .cce-complete-list-wrapper .complete-list .complete-item:hover{
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    border-color: rgba(255,255,255,0.15);
}
.night .cce-complete-list-wrapper .complete-list .complete-item span,
.night .cce-complete-list-wrapper .complete-list .complete-item input{
    color: #e0e0e0;
}
.night .cce-complete-list-wrapper .complete-list .complete-item .magnifier-icon::before{
    border-color: #ccc;
}
.night .cce-complete-list-wrapper .complete-list .complete-item .magnifier-icon::after{
    background: #ccc;
}
.night .cce-complete-list-wrapper .complete-list .complete-item .copy-icon::before{
    border-color: #ccc;
}
.night .cce-complete-list-wrapper .complete-list .complete-item .copy-icon::after{
    border-color: #ccc;
    background: rgba(255,255,255,0.1);
}
.night .cce-h1{
    color: #e0e0e0;
}
.night .cce-nav{
    color: #aaa;
}

/* ========== 兼容 CeoMax-Pro 内容宽度 ========== */
.ceo-pages-color .cce-complete-list-wrapper{
    max-width: 100%;
}
.ceo-pages-color .complete-list{
    list-style: none;
    padding: 0;
    margin: 0;
}
.ceo-pages-color .complete-list li{
    margin-bottom: 16px;
    padding: 0 8px;
    box-sizing: border-box;
}

.color-toast{
  position: fixed;
  z-index:99999;
  left:50%;
  top:40%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.7);
  color:#fff;
  padding:8px 22px;
  /* 胶囊圆角，超大半径实现两端半圆 */
  border-radius: 9999px;
}