* {margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI','Microsoft YaHei',sans-serif;}
:root {--primary:#1e88e5;--secondary:#43a047;--accent:#ff9800;--light:#e8f5e9;--dark:#0d47a1;--dark-green:#2e7d32;--tab-inactive:#e0e0e0;}

::-webkit-scrollbar {width:8px;height:8px;}
::-webkit-scrollbar-track {background:#f1f1f1;border-radius:10px;}
::-webkit-scrollbar-thumb {background:linear-gradient(135deg,var(--primary),var(--dark-green));border-radius:10px;transition:background 0.3s;}
::-webkit-scrollbar-thumb:hover {background:linear-gradient(135deg,var(--dark),var(--dark-green));}
::-webkit-scrollbar-corner {background:#f1f1f1;}
* {scrollbar-width:thin;scrollbar-color:var(--primary) #f1f1f1;}
body {background:linear-gradient(rgba(255,255,255,0.9),rgba(230,247,255,0.8)),url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 800 800"><rect width="800" height="800" fill="%23e6f7ff"/><path d="M0,200 C200,100 400,300 600,150 C800,0 800,400 600,550 C400,700 200,600 0,700 Z" fill="%23f0f9eb" opacity="0.4"/><circle cx="100" cy="100" r="50" fill="%23e3f2fd" opacity="0.3"/><circle cx="700" cy="300" r="80" fill="%23e8f5e9" opacity="0.3"/><circle cx="400" cy="600" r="60" fill="%23ffecb3" opacity="0.2"/><path d="M200,500 Q400,400 600,500" stroke="%23bbdefb" stroke-width="10" fill="none" opacity="0.2"/><path d="M50,350 Q250,250 450,350" stroke="%23c8e6c9" stroke-width="8" fill="none" opacity="0.2"/></svg>');background-size:cover;background-attachment:fixed;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:10px;position:relative;overflow-x:hidden;}
body::before {content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" opacity="0.05"><path d="M20,20 Q40,5 60,20 T100,20 Q85,40 100,60 T100,100 Q80,85 60,100 T20,100 Q5,80 20,60 T20,20 Z" fill="none" stroke="%230d47a1" stroke-width="2"/><circle cx="50" cy="50" r="15" fill="%232e7d32"/></svg>');z-index:-1;}
.container {width:100%;max-width:1200px;background:rgba(255,255,255,0.95);border-radius:15px;box-shadow:0 20px 50px rgba(0,100,200,0.2);overflow:hidden;position:relative;z-index:10;transform:translateY(0);transition:transform 0.5s ease,box-shadow 0.3s;backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,0.5);}
.container:hover {transform:translateY(-5px);box-shadow:0 25px 60px rgba(0,100,200,0.3);}
/* ========== 头部（居中风格） ========== */.header {background:linear-gradient(120deg,var(--dark),var(--dark-green));color:white;padding:40px 50px;text-align:center;position:relative;overflow:hidden;}
.header::before {content:"";position:absolute;top:-50px;left:-50px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,0.08);}
.header::after {content:"";position:absolute;bottom:-80px;right:-30px;width:250px;height:250px;border-radius:50%;background:rgba(255,255,255,0.05);}
.school-badge {width:110px;height:110px;background:white;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,0.2);position:relative;z-index:2;border:3px solid var(--accent);animation:float 3s ease-in-out infinite;}
.school-badge a {display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-decoration:none;}
.school-badge i {font-size:60px;background:linear-gradient(to right,var(--dark),var(--dark-green));-webkit-background-clip:text;background-clip:text;color:transparent;}
.school-badge img {width:100%;}
@keyframes float {0% {transform:translateY(0px);}
50% {transform:translateY(-10px);}
100% {transform:translateY(0px);}
}
h1 {font-size:38px;margin-bottom:10px;position:relative;z-index:2;text-shadow:0 2px 8px rgba(0,0,0,0.3);font-weight:700;letter-spacing:1px;}
.subtitle {font-size:18px;opacity:0.95;position:relative;z-index:2;font-weight:300;margin-top:15px;}
.subtitle::after {content:"";display:block;width:80px;height:3px;background:var(--accent);margin:15px auto 0;border-radius:3px;}
/* ========== 主要内容区域 ========== */
.content {padding:45px 50px 30px;}
.query-card {background:white;border-radius:10px;box-shadow:0 12px 30px rgba(0,80,160,0.15);overflow:hidden;border:1px solid rgba(30,136,229,0.15);}
.query-tabs {display:flex;width:100%;padding:20px 30px 0 30px;border-bottom:2px solid #edf2f7;background:white;}
.tab-btn {flex:1;background:none;border:none;padding:14px 10px;font-size:18px;font-weight:600;color:#4a5568;border-radius:30px 30px 0 0;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:-2px;border-bottom:3px solid transparent;text-align:center;}
.tab-btn i {font-size:18px;}
.tab-btn.active {color:var(--dark);border-bottom-color:var(--primary);background:linear-gradient(to top,rgba(30,136,229,0.05),transparent);}
.tab-btn:not(.active):hover {color:var(--primary);background:#f8fafc;}
/* 表单容器 */.form-container {padding:30px;margin-top:10px;position:relative;overflow:hidden;display:none;background:transparent;}
.form-container.active-form {display:block;}
/* 左侧彩色线条 */.form-container::before {content:"";position:absolute;top:20px;left:0;height:calc(100% - 40px);width:6px;background:linear-gradient(to bottom,var(--primary),var(--dark-green));border-radius:0 4px 4px 0;}
.form-title {font-size:26px;color:var(--dark);margin-bottom:25px;display:flex;align-items:center;position:relative;padding-left:15px;}
.form-title i {margin-right:15px;background:#e3f2fd;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:24px;box-shadow:0 4px 8px rgba(0,0,0,0.05);}
.input-row {padding-left:15px;}
.input-group {margin-bottom:25px;}
.input-group:last-of-type {margin-bottom:0;}
label {display:block;font-size:17px;color:#2d3748;margin-bottom:10px;font-weight:500;padding-left:5px;}
.input-with-icon {position:relative;}
.form_input {width:100%;padding:16px 20px 16px 50px;font-size:14px;border:2px solid #e2e8f0;border-radius:12px;transition:all 0.3s;background:#f8fafc;}
.form_input:focus {border-color:var(--primary);box-shadow:0 0 0 4px rgba(30,136,229,0.15);outline:none;background:white;}
.input-icon {position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--primary);font-size:18px;}
.btn {display:block;width:calc(100% - 30px);margin-left:15px;margin-top:30px;padding:18px;background:linear-gradient(to right,var(--dark),var(--dark-green));color:white;font-size:20px;font-weight:bold;border:none;border-radius:12px;cursor:pointer;transition:all 0.3s;box-shadow:0 8px 18px rgba(30,136,229,0.3);position:relative;overflow:hidden;z-index:1;}
.btn::before {content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(to right,transparent,rgba(255,255,255,0.3),transparent);transition:all 0.6s;z-index:-1;}
.btn:hover {transform:translateY(-3px);box-shadow:0 12px 22px rgba(30,136,229,0.4);}
.btn:hover::before {left:100%;}
.btn:active {transform:translateY(1px);}
/* 查询须知框 */.info-box.query-tip {background:linear-gradient(to right,#f8fcff,#f0f7ff);border:1px solid #cae0f0;border-radius:10px;padding:15px 20px;margin:30px;position:relative;box-shadow:0 3px 10px rgba(0,60,120,0.05);display:none;}
.info-box.query-tip.active-tip {display:block;}
.info-box.query-tip::before {content:"📋 查询须知";position:absolute;top:-14px;left:25px;background:linear-gradient(to right,var(--primary),var(--dark));color:white;font-weight:bold;padding:5px 22px;font-size:16px;border-radius:20px;box-shadow:0 3px 8px rgba(0,0,0,0.1);letter-spacing:0.5px;}
.info-box.query-tip p {margin:14px 0;color:#2c3e50;line-height:1.7;font-size:16px;display:flex;align-items:center;gap:10px;}
.info-box.query-tip i {color:var(--accent);width:22px;text-align:center;font-size:17px;}
.info-box.query-tip .example {background:#e8f0fe;border-radius:8px;padding:8px 15px;margin:8px 0;font-family:'Courier New',monospace;border-left:4px solid var(--primary);color:#0d3c6c;font-size:15px;}
/* ========== 多条结果容器 ========== */.result-container {display:block;}
/* 全局返回链接 */.global-back {margin-bottom:20px;padding-left:10px;}
.global-back a {display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-weight:500;font-size:16px;text-decoration:none;padding:8px 16px;border-radius:30px;background:#f0f9ff;transition:all 0.2s;}
.global-back a:hover {background:#e3f2fd;text-decoration:underline;}
/* 证书卡片列表 */.cert-list {display:flex;flex-direction:column;gap:25px;}
/* 单个证书卡片 */
.cert-card {background:white;border-radius:20px;box-shadow:0 8px 20px rgba(0,40,100,0.08);padding:25px 30px;border:1px solid rgba(30,136,229,0.2);position:relative;overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;}
.cert-card:hover {transform:translateY(-3px);box-shadow:0 15px 30px rgba(30,136,229,0.15);}
.cert-card::before {content:"";position:absolute;top:0;left:0;width:6px;height:100%;background:linear-gradient(to bottom,var(--primary),var(--dark-green));}
.cert-header {display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-left:15px;border-bottom:1px dashed #dbeafe;padding-bottom:12px;}
.cert-header h3 {font-size:20px;color:var(--dark);display:flex;align-items:center;gap:10px;}
.cert-header h3 i {background:#e3f2fd;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:20px;}
.cert-badge {background:var(--accent);color:white;padding:4px 14px;border-radius:30px;font-size:14px;font-weight:600;}
/* 网格布局展示字段 (每个卡片内) */.cert-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:16px 25px;padding-left:15px;margin-bottom:20px;}
.cert-item {display:flex;align-items:baseline;border-bottom:1px dotted #cbd5e0;padding-bottom:6px;}
.cert-item .label {font-weight:600;color:#1e293b;width:140px;font-size:15px;display:flex;align-items:center;gap:6px;}
.cert-item .label i {color:var(--primary);width:18px;font-size:14px;}
.cert-item .value {flex:1;color:#0f172a;font-weight:500;word-break:break-word;font-size:15px;}
.cert-footer {display:flex;justify-content:center;padding-top:22px;border-top:1px solid #e2e8f0;gap: 12px;}
.view-cert-btn {display:inline-flex;align-items:center;gap:8px;background: linear-gradient(to right, var(--primary), var(--dark));color:#ffffff;border:1px solid var(--primary);border-radius:40px;padding:10px 24px;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s;box-shadow:0 4px 8px rgba(30,136,229,0.05);}
.view-cert-btn i {color:#ffffff;font-size:16px;}
.view-cert-btn:hover {transform:translateY(-2px);box-shadow:0 10px 18px rgba(30,136,229,0.2);}
.view-cert-btn:hover i {color:white;}

.view-cert-back {display:inline-flex;align-items:center;gap:8px;background:white;color:var(--dark);border:1px solid var(--primary);border-radius:40px;padding:10px 24px;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s;box-shadow:0 4px 8px rgba(30,136,229,0.05);}
.view-cert-back i {color:var(--primary);font-size:16px;}
.view-cert-back:hover {background:var(--primary);color:white;border-color:var(--primary);transform:translateY(-2px);box-shadow:0 10px 18px rgba(30,136,229,0.2);}
.view-cert-back:hover i {color:white;}

.result-section {display:none;}
.result-section.active-section {display:block;}

.cert-modal {display:none;position:fixed;z-index:999;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.6);backdrop-filter:blur(5px);align-items:center;justify-content:center;}
.modal-content {background:white;margin:auto;padding:0;width:90%;max-width:500px;border-radius:12px;box-shadow:0 25px 50px rgba(0,40,80,0.4);animation:modalFadeIn 0.3s;}
@keyframes modalFadeIn {from {opacity:0;transform:translateY(-30px);}
to {opacity:1;transform:translateY(0);}
}
.modal-header {padding:15px 20px;background:linear-gradient(to right,var(--primary),var(--dark-green));color:white;border-radius:12px 12px 0 0;display:flex;align-items:center;justify-content:space-between;}
.modal-title {font-size:20px;font-weight:600;display:flex;align-items:center;gap:10px;}
.close-modal {font-size:30px;font-weight:300;cursor:pointer;color:white;line-height:1;transition:transform 0.2s;}
.close-modal:hover {transform:scale(1.2);color:#ffecb3;}
.modal-body {padding:10px;text-align:center;background:#f8fafc;}
.cert-image-container {background:white;border-radius:12px;padding:10px;box-shadow:inset 0 2px 10px rgba(0,0,0,0.02),0 10px 20px rgba(0,40,80,0.1);border:1px dashed var(--primary);min-height:200px; max-height:76vh; overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;}
.cert-image-container img {width:100%;height:auto;border-radius:12px;object-fit:contain;}
.cert-image-container .loading-spinner {display:none;color:var(--primary);font-size:18px;margin:20px 0;}
.cert-image-container .error-message {display:none;color:#dc2626;font-size:16px;margin:20px 0;}
.cert-id {margin-top:15px;font-size:16px;font-weight:600;color:var(--primary);background:#e3f2fd;display:inline-block;padding:6px 20px;border-radius:40px;flex-shrink:0;/* 防止被压缩 */}
.modal-footer {padding:18px 25px;background:#f1f5f9;border-radius:0 0 12px 12px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}
.btn-close-modal {background:white;border:1px solid var(--primary);color:var(--primary);padding:10px 30px;border-radius:30px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.2s;}
.btn-close-modal:hover {background:var(--primary);color:white;}
.btn-download {background:linear-gradient(to right,var(--dark),var(--dark-green));border:none;color:white;padding:10px 30px;border-radius:30px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.2s;display:inline-flex;align-items:center;gap:8px;}
.btn-download:hover {transform:translateY(-2px);box-shadow:0 8px 15px rgba(30,136,229,0.3);}
.btn-download i {font-size:16px;}
/* ========== 底部版权 ========== */
.footer {text-align:center;padding:30px;color:#4a5568;background:rgba(245,245,245,0.8);border-top:1px solid #e2e8f0;font-size:16px;line-height:1.7;backdrop-filter:blur(5px);}
.footer-logo {color:var(--primary);font-weight:bold;font-size:20px;margin-bottom:12px;display:inline-block;text-shadow:0 1px 2px rgba(0,0,0,0.05);}
.footer a {color:#555555;text-decoration:none;}
a {text-decoration:none;}
/* ========== 响应式调整 ========== */
@media (max-width:768px) {.header {padding:30px 20px;}
h1 {font-size:28px;}
.subtitle {font-size:14px;}
.content {padding:20px 15px 15px;}
.query-tabs {padding:15px 20px 0 20px;}
.tab-btn {font-size:16px;padding:12px 6px;}
.form-container {padding:20px;}
.form-title {font-size:22px;padding-left:10px;}
.form-title i {width:42px;height:42px;font-size:20px;}
.input-row {padding-left:10px;}
.btn {width:calc(100% - 20px);margin-left:10px;font-size:18px;padding:16px;margin-top:25px;}
.info-box.query-tip {margin:25px 15px;padding:10px;}
.info-box.query-tip p {font-size:15px;}
.cert-item {flex-wrap:wrap;}
.cert-item .label {width:130px;margin-bottom:4px;}
.cert-item .value {padding-left:5px;}
.footer {padding:20px 15px;font-size:14px;}
.footer-logo {font-size:18px;}
.cert-card{padding: 15px 20px;}
.cert-grid {grid-template-columns:1fr;gap:10px;    padding-left: 0px;}
.cert-footer{padding-top: 15px;}
.cert-header h3 {font-size:18px;}
.modal-footer {flex-direction:column-reverse;align-items:stretch;}
.btn-download,.btn-close-modal {width:100%;text-align:center;justify-content:center;}
.cert-image-container {max-height:60vh;}
.cert-card::before {width:2px;}
}
@media (max-width:480px) {.school-badge {width:90px;height:90px;}
.school-badge i {font-size:48px;}
h1 {font-size:24px;}
.tab-btn {font-size:14px;padding:10px 4px;}
.tab-btn i {font-size:16px;}


}
.nocert-card {background:white;border-radius:20px;box-shadow:0 8px 20px rgba(0,40,100,0.08);padding:30px 30px;border:1px solid rgba(30,136,229,0.2);position:relative;overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;text-align:center;color:#2c3e50;}
.nocert-card:hover {transform:translateY(-3px);box-shadow:0 15px 30px rgba(30,136,229,0.15);}
.nocert-card::before {content:"";position:absolute;top:0;left:0;width:6px;height:100%;background:linear-gradient(to bottom,var(--primary),var(--dark-green));}
.no-result {color:var(--error-color);}
.result-icon {font-size:50px;margin-bottom:15px;}
.result-title {font-size:20px;margin-bottom:10px;font-weight:700;}
.result-message {font-size:14px;color:var(--gray-color);margin-bottom:15px;line-height:1.8;}