:root{--primary-color:#4a6bff;--secondary-color:#f5f7ff;--text-color:#333;--light-gray:#f0f2f5;--radius-lg:20px;--radius-md:12px;--shadow:0 10px 30px rgba(0, 0, 0, 0.08);--transition:all 0.3s ease}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI','PingFang SC',sans-serif;text-decoration: none; }
#think_page_trace_open{display:none}
body{background:linear-gradient(135deg,#f5f7ff 0,#e8ecff 100%);color:var(--text-color);min-height:100vh;padding:40px;}
.container{width:100%;max-width:1200px;display:flex;gap:40px;position:relative;margin: auto;}
.phone-container{flex:1;display:flex;justify-content:center;align-items:center;min-height:600px;position:relative}
.iphone{width:388px;height:720px;background:#f0f0f0;border-radius:35px;position:relative;box-shadow:0 0 0 10px #1a1a1a,0 0 0 11px #3a3a3a,0 30px 60px rgba(0,0,0,.3);transform-style:preserve-3d;transition:var(--transition)}
.iphone::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:50%;height:25px;background:#1a1a1a;border-bottom-left-radius:15px;border-bottom-right-radius:15px;z-index:11}
.iphone::after{content:'';position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:100px;height:5px;background:#1a1a1a;border-radius:5px}
.screen{width:100%;height:100%;background:#fff;border-radius:35px;overflow:hidden;position:relative;box-shadow:inset 0 0 10px rgba(0,0,0,.1)}
.status-bar{padding:8px 15px;display:flex;justify-content:space-between;align-items:center;position:absolute;background-color:#fff;color:#333;top:0;left:0;right:0;z-index:10;font-size:12px;backdrop-filter:blur(5px)}
.status-left{display:flex;align-items:center;gap:4px}
.status-right{display:flex;align-items:center;gap:8px}
.signal-bars{display:flex;align-items:center;gap:2px}
.signal-bar{width:3px;height:8px;background:#333;border-radius:1px}
.signal-bar:nth-child(1){height:4px}
.signal-bar:nth-child(2){height:6px}
.signal-bar:nth-child(3){height:8px}
.iframe-container{width:100%;height:calc(100% - 30px);border:none;margin-top:30px;border-radius:0 0 35px 35px;overflow:hidden;padding-bottom:12px}
.iframe-container::-webkit-scrollbar{width:1px;background-color:rgba(245,247,255,.3)}
.iframe-container::-webkit-scrollbar-thumb{background-color:#afafaf;border-radius:4px}
.iframe-container::-webkit-scrollbar-track{background:rgba(200,200,200,.1)}
.qr-container{flex:.6;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;padding:40px;background:var(--secondary-color);border-radius:var(--radius-lg);position:relative;overflow:hidden}
.qr-container::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,var(--primary-color) 0,transparent 70%);opacity:.1;z-index:0;animation:pulse 15s infinite linear}
.qr-code{width:200px;height:200px;background:#fff;padding:15px;border-radius:var(--radius-md);box-shadow:var(--shadow);position:relative;z-index:1;transition:var(--transition)}
.qr-code:hover{transform:translateY(-5px) scale(1.03)}
.qr-code img{width:100%;height:100%;}
.qr-text{text-align:center;z-index:1}
.qr-text h2{font-size:24px;margin-bottom:15px;color:var(--primary-color)}
.qr-text p{font-size:16px;color:#666;line-height:1.6}
.scan-animation{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:220px;height:10px;background:rgba(74,107,255,.3);border-radius:10px;animation:scan 2s infinite ease-in-out;z-index:2;opacity:0}
.mobile-button{display:none;padding:15px 40px;background:var(--primary-color);color:#fff;border-radius:30px;font-weight:700;text-decoration:none;box-shadow:0 10px 20px rgba(74,107,255,.3);transition:var(--transition);position:relative;overflow:hidden;z-index:1}
.mobile-button::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 20%,rgba(255,255,255,.3) 50%,transparent 80%);animation:shine 3s infinite;z-index:-1}
@keyframes scan{0%{top:30%;opacity:1}
100%{top:50%;opacity:0}
}
@keyframes pulse{0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
@keyframes shine{0%{transform:translateX(-100%)}
100%{transform:translateX(100%)}
}
@media (max-width:992px){.container{display: block;}
.phone-container{min-height:400px;display:none}
.iphone{width:250px;height:500px}
.mobile-button{display:inline-block;margin-top:20px}
.qr-text p:last-child{display:none}
.qr-container{padding:30px;height: 78vh;}
@keyframes scan{0%{top:20%;opacity:1}
100%{top:50%;opacity:0}
}
}
@media (max-width:576px){body{padding:20px}
.iphone{width:200px;height:400px;border-radius:30px}
.screen{border-radius:25px}
}
.footer {
    text-align: center;
    padding: 20px;
    color: #666;
    font-size: 0.9rem;
    margin-top: 30px;
}
.footer a{
 color: #9fa0a1;
}
/* 悬浮按钮样式 */
.erweima .qr-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

.erweima .qr-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.erweima .qr-button:active {
    transform: translateY(1px);
}

/* 遮罩层样式 */
.erweima .overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1001;
    display: none;
    backdrop-filter: blur(3px);
}

/* 二维码弹出层样式 */
.erweima .qr-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 1002;
    display: none;
    text-align: center;
    max-width: 90%;
    width: 300px;
    animation: fadeIn 0.3s ease;
}

.erweima .qr-popup h3 {
    margin-top: 0;
    color: #333;
    font-weight: 600;
    margin-bottom: 20px;
}

.erweima .qr-popup p {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
}

.erweima .qr-codes {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background-color: #f8f8f8;
    padding: 10px;
    border-radius: 8px;
}

.erweima .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.erweima .close-btn:hover {
    opacity: 1;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -55%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}