* {margin:0;padding:0;box-sizing:border-box;font-family:'Noto Sans SC','Microsoft YaHei',sans-serif;}

  :root {
            --primary-color: #367EB5;
            --primary-light: #5b9bd5;
            --secondary-color: #2a6496;
            --accent-color: #4CAF50;
            --warning-color: #FF9800;
            --error-color: #F44336;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
            --gray-color: #6c757d;
            --light-gray: #e9ecef;
            --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }
      
/* 全屏渐变背景 */
body {min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;background:linear-gradient(135deg,rgba(54,126,181,0.1) 0%,rgba(42,106,156,0.08) 100%),url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="none" stroke="%23367eb5" stroke-opacity="0.03" stroke-width="0.5" d="M0,0 L100,100 M100,0 L0,100"/></svg>');background-size:cover;background-attachment:fixed;position:relative;}
/* 背景装饰元素 */
body::before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,rgba(54,126,181,0.05) 0%,transparent 20%),radial-gradient(circle at 80% 70%,rgba(42,106,156,0.05) 0%,transparent 20%);z-index:-1;}
/* 顶部导航栏 - 全屏宽度 */
.top-bar {background:linear-gradient(to right,#1a5f9e,#367EB5);width:100%;padding:10px 5%;display:flex;justify-content:space-between;align-items:center;height:90px;box-shadow:0 4px 20px rgba(0,0,0,0.15);position:relative;z-index:100;}
.logo-container {display:flex;align-items:center;}
.logo img {width:auto;height:70px;}
.logo-title {font-size:20px;color:white;font-weight:600;letter-spacing:1px;}
.logo-subtitle {font-size:13px;color:rgba(255,255,255,0.8);margin-top:3px;letter-spacing:1px;}
.nav-links {display:flex;align-items:center;gap:25px;}
.nav-link {color:white;text-decoration:none;font-weight:500;font-size:15px;display:flex;align-items:center;transition:all 0.3s;padding:8px 12px;border-radius:30px;position:relative;}
.nav-link:hover {background:rgba(255,255,255,0.15);}
.nav-link i {margin-right:8px;font-size:18px;}
.nav-link.active {background:rgba(255,255,255,0.25);}
.nav-link.active::after {content:'';position:absolute;bottom:-5px;left:8%;width:86%;height:3px;background:white;border-radius:3px;}
/* 手机菜单按钮 */
.menu-toggle {display:none;background:transparent;border:none;color:white;font-size:24px;cursor:pointer;padding:10px;}
/* 头部区域 - 带背景图 */
.header {text-align:center;padding:60px 5% 80px;width:100%;position:relative;margin-top:0;background:linear-gradient(135deg,rgba(54,126,181,0.85) 0%,rgba(42,106,156,0.85) 100%),url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,160L48,149.3C96,139,192,117,288,112C384,107,480,117,576,128C672,139,768,149,864,154.7C960,160,1056,160,1152,138.7C1248,117,1344,75,1392,53.3L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');background-size:cover;background-position:center;color:white;box-shadow:0 10px 30px rgba(0,0,0,0.15);}
.header-content {max-width:1200px;margin:0 auto;position:relative;z-index:2;}
.main-title {font-size:36px;font-weight:700;letter-spacing:1px;margin-bottom:5px;text-shadow:0 2px 8px rgba(0,0,0,0.2);}
.subtitle {font-size:18px;font-weight:400;max-width:800px;line-height:1.6;margin:10px auto 0;color:rgba(255,255,255,0.9);}
.title-decoration {font-size:100px;font-weight:bold;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0.05;z-index:1;white-space:nowrap;}
/* 主内容区 */
.container {background:rgba(255,255,255,0.95);border-radius:15px;box-shadow:0 8px 40px rgba(54,126,181,0.2);width:100%;max-width:1180px;overflow:hidden;margin:-50px auto 30px;border:1px solid rgba(54,126,181,0.1);position:relative;z-index:10;}
.tabs {display:flex;background-color:#f8fafd;border-bottom:1px solid #e0e9f5;}
.tab {flex:1;padding:22px;text-align:center;cursor:pointer;font-size:18px;font-weight:600;color:#666;transition:all 0.3s ease;position:relative;}
.tab.active {color:#367EB5;}
.tab.active::after {content:'';position:absolute;bottom:0;left:0;width:100%;height:4px;background:linear-gradient(to right,#2a6a9c,#367EB5);border-radius:2px 2px 0 0;}
.tab i {margin-right:10px;font-size:20px;}
.tab-content {padding:40px;}
.form-container {display:none;}
.form-container.active {display:block;animation:fadeIn 0.5s ease;}
@keyframes fadeIn {from {opacity:0;transform:translateY(10px);}
to {opacity:1;transform:translateY(0);}
}
.input-group {margin-bottom:25px;position:relative;}
label {display:block;margin-bottom:8px;color:#444;font-weight:600;display:flex;align-items:center;}
label i {margin-right:10px;color:#367EB5;width:24px;text-align:center;}
input {width:100%;padding:15px 20px 15px 50px;border:2px solid #e0e9f5;border-radius:10px;font-size:16px;transition:all 0.3s;box-shadow:inset 0 2px 5px rgba(0,0,0,0.05);background:rgba(255,255,255,0.8);}
input:focus {border-color:#367EB5;outline:none;box-shadow:0 0 0 3px rgba(54,126,181,0.2),inset 0 2px 5px rgba(0,0,0,0.05);}
.input-icon {position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#367EB5;font-size:20px;}
.btn {background:linear-gradient(to right,#367EB5,#2a6a9c);color:white;border:none;padding:16px 30px;font-size:18px;border-radius:10px;cursor:pointer;transition:all 0.3s ease;font-weight:bold;width:100%;margin-top:15px;box-shadow:0 5px 20px rgba(54,126,181,0.4);position:relative;overflow:hidden;}
.btn::after {content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:rgba(255,255,255,0.1);transform:rotate(30deg);transition:all 0.6s;}
.btn:hover {transform:translateY(-3px);box-shadow:0 8px 25px rgba(54,126,181,0.5);}
.btn:hover::after {transform:rotate(30deg) translate(20%,20%);}
.btn i {margin-right:10px;}
.result-container {padding:30px;background:#f9fbfe;border-radius:10px;border:1px solid #e0e9f5;animation:slideIn 0.5s ease;}
@keyframes slideIn {from {opacity:0;transform:translateY(20px);}
to {opacity:1;transform:translateY(0);}
}
.result-header {color:#367EB5;font-size:24px;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #e0e9f5;display:flex;align-items:center;justify-content:space-between;}
.result-header i {margin-right:12px;font-size:28px;}
.result-content {display:flex;margin-bottom: 35px;;}
.certificate-image {flex:0 0 220px;background:linear-gradient(135deg,#367EB5 0%,#2a6a9c 100%);border-radius:10px;display:flex;align-items:center;justify-content:center;color:white;font-size:24px;padding:20px;text-align:center;margin-right:30px;box-shadow:0 5px 15px rgba(0,0,0,0.1);flex-direction:column;position:relative;overflow:hidden;}
.certificate-image::before {content:'';position:absolute;width:150%;height:40px;background:rgba(255,255,255,0.15);transform:rotate(-30deg);top:-20px;left:-25%;}
.certificate-image i {font-size:60px;margin-bottom:15px;opacity:0.8;}
.certificate-details {flex:1;}
.detail-row {display:flex;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #eee;}
.detail-label {flex:0 0 130px;font-weight:bold;color:#555;display:flex;align-items:center;}
.detail-label i {margin-right:10px;color:#367EB5;}
.detail-value {flex:1;color:#333;}
.video-section {margin-top:25px;padding-top:20px;border-top:1px dashed #e0e9f5;text-align:center;}
.video-btn {display:inline-flex;align-items:center;background:linear-gradient(to right,#367EB5,#2a6a9c);color:white;border:none;padding:12px 25px;font-size:16px;border-radius:50px;cursor:pointer;transition:all 0.3s;font-weight:bold;box-shadow:0 4px 15px rgba(54,126,181,0.3);}
.video-btn:hover {transform:translateY(-3px);box-shadow:0 6px 20px rgba(54,126,181,0.4);}
.video-btn i {margin-right:10px;font-size:20px;}
.instructions {background:#eef6ff;border-left:4px solid #367EB5;padding:20px;border-radius:0 8px 8px 0;margin-top:30px;font-size:14px;color:#555;animation:fadeIn 0.8s ease;}
.instructions h3 {color:#367EB5;margin-bottom:10px;display:flex;align-items:center;}
.instructions h3 i {margin-right:10px;}
.instructions ul {padding-left:20px;}
.instructions li {margin-bottom:8px;line-height:1.6;}
/* 底部区域 - 全屏宽度 */
.footer {background:linear-gradient(to right,#1a5f9e,#367EB5);width:100%;padding:30px 5%;margin-top:auto;color:rgba(255,255,255,0.85);font-size:14px;}
.footer-content {max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;}
.footer-section {flex:1;min-width:300px;margin-bottom:20px;padding-right:30px;}
.footer-title {font-size:18px;color:white;margin-bottom:15px;position:relative;padding-bottom:10px;font-weight:600;}
.footer-title::after {content:'';position:absolute;bottom:0;left:0;width:50px;height:2px;background:rgba(255,255,255,0.5);}
.footer-links {list-style:none;}
.footer-links li {margin-bottom:10px;display:flex;align-items:center;}
.footer-links li i {margin-right:10px;width:18px;text-align:center;}
.copyright a {color:rgba(255,255,255,0.8);text-decoration:none;transition:all 0.3s;}
.copyright a:hover {color:white;text-decoration:none;}
.copyright {text-align:center;width:100%;font-size:13px;}
.copyright {line-height:22px;}
.copyright a{color: #ffffff;text-decoration: none;}
/* 响应式设计 - 重点优化部分 */
@media (max-width:768px) {.main-title {font-size:36px;}
.subtitle {font-size:20px;}
.result-content {flex-direction:column;}
.certificate-image {margin-right:0;margin-bottom:20px;width:100%;}
.tab {padding:18px 10px;font-size:16px;}
.tab-content {padding:15px;}
.result-container{padding:15px;}
.footer-section {min-width:50%;padding-right:15px;}
.top-bar {flex-wrap:wrap;height:auto;padding:5px 5%;}
.logo-container {width:100%;/* justify-content:center;margin-bottom:15px;*/}
.logo img {height:60px;}
.nav-links {width:100%;justify-content:center;flex-wrap:wrap;gap:10px;display:none;flex-direction:column;}
.nav-links.active {display:flex;}
.nav-link {width:100%;text-align:center;padding:10px;margin-bottom:5px;font-size:16px;}
.nav-link.active::after {display:none;}
.menu-toggle {display:block;position:absolute;top:5px;right:20px;}
.header {padding:40px 5% 60px;}
.main-title {font-size:25px;}
.subtitle {font-size:15px;}
.container {margin-top:-35px;width:96%;}
/* .tabs {flex-direction:column;}
*/.footer-section {min-width:100%;padding-right:0;margin-bottom:25px;display:none;}
/* 简化移动端底部 */
.footer {padding:25px 5%;}
.footer-title {font-size:16px;padding-bottom:8px;}
.footer-title::after {width:40px;}
.footer-links li {font-size:13px;}
.copyright {padding-top:0;margin-top:0;border-top:none;font-size:12px;}
.video-container {width:95%;}
.video-btn {padding:10px 20px;font-size:14px;}
}
.play-button {position:fixed;bottom:30px;right:30px;width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#ff416c,#ff4b2b);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 25px rgba(255,75,43,0.5);z-index:100;transition:all 0.3s ease;animation:pulse 2s infinite;}
.play-button:hover {transform:scale(1.1);box-shadow:0 15px 30px rgba(255,75,43,0.7);}
.play-button i {font-size:36px;color:white;}
@keyframes pulse {0% {box-shadow:0 0 0 0 rgba(255,75,43,0.7);}
70% {box-shadow:0 0 0 15px rgba(255,75,43,0);}
100% {box-shadow:0 0 0 0 rgba(255,75,43,0);}
}
.video-overlay {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all 0.4s ease;}
.video-overlay.active {opacity:1;visibility:visible;}
.video-container {width:80%;max-width:900px;position:relative;transform:scale(0.9);transition:transform 0.4s ease;}
.video-overlay.active .video-container {transform:scale(1);}
.video-player {width:100%;border-radius:5px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,0.7);}
video {width:100%;display:block;}
.video-controls {background:rgba(0,0,0,0.7);padding:15px;display:flex;align-items:center;gap:15px;}
.control-btn {background:none;border:none;color:white;cursor:pointer;font-size:18px;transition:color 0.2s;}
.control-btn:hover {color:#ff4b2b;}
.progress-container {flex-grow:1;height:6px;background:rgba(255,255,255,0.2);border-radius:3px;cursor:pointer;position:relative;}
.progress-bar {height:100%;background:#ff4b2b;border-radius:3px;width:0%;}
.volume-container {display:flex;align-items:center;gap:8px;}
.volume-slider {width:80px;height:6px;background:rgba(255,255,255,0.2);border-radius:3px;cursor:pointer;position:relative;}
.volume-level {height:100%;background:#ff4b2b;border-radius:3px;width:70%;}
.close-btn {position:absolute;top:-40px;right:0;width:35px;height:35px;background:#ff4b2b;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;color:white;font-size:18px;transition:all 0.2s;}
.close-btn:hover {transform:rotate(90deg);background:#ff8a00;}
.video-title {position:absolute;top:-60px;left:0;color:white;font-size:24px;font-weight:bold;}
footer {text-align:center;margin-top:auto;padding:20px;color:rgba(255,255,255,0.6);font-size:0.9rem;}
@media (max-width:768px) {
    .result-header{display:block;font-size: 22px;}
    .video-btn{margin-top:20px}
    .video-container {width:95%;}
.control-btn {font-size:16px;}
.volume-slider {width:60px;}
h1 {font-size:2.2rem;}
}


   .result-card {
            padding: 2.5rem;
            max-width: 100%;
            margin: 0 auto;
            text-align: center;
        }
        .no-result {
            color: var(--error-color);
        }
        .result-icon {
            font-size: 4rem;
            margin-bottom: 1.5rem;
        }
        
        .result-title {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            font-weight: 700;
        }
        
        .result-message {
            font-size: 1.1rem;
            color: var(--gray-color);
            margin-bottom: 1.5rem;
            line-height: 1.8;
        }
         .result-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }
        
        .action-btn {
            flex: 1;
            padding: 0.8rem;
            border-radius: 8px;
            border: none;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .new-query {
            background: var(--primary-light);
            color: white;
        }
        
        .new-query:hover {
            background: var(--primary-color);
        }
        
        .contact-support {
            background: var(--light-gray);
            color: var(--dark-color);
        }
        
        .contact-support:hover {
            background: #d1d5db;
        }