*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#333;background:#fff;min-height:100vh;font-family:Noto Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}#app{flex-direction:column;align-items:center;min-height:100vh;display:flex}.banner-wrapper{width:100%;margin:0 auto}.banner{width:100%;height:auto;display:block}.query-container{flex-direction:column;align-items:center;width:100%;display:flex}.query-card{text-align:center;background:#fff;width:100%;max-width:900px;padding:48px 40px}.query-card .logo{width:180px;height:auto;margin-bottom:20px}.query-card h1{color:#1a3c5e;letter-spacing:-.5px;margin-bottom:8px;font-size:24px;font-weight:700}.query-card .subtitle{color:#666;margin-bottom:32px;font-size:14px;font-weight:400}.query-card .input-group{gap:12px;margin-bottom:16px;display:flex}.query-card input[type=text]{background:#fafbfc;border:2px solid #e8ecf1;border-radius:12px;outline:none;flex:1;padding:14px 18px;font-family:inherit;font-size:16px;transition:all .3s}.query-card input[type=text]:focus{background:#fff;border-color:#1a3c5e;box-shadow:0 0 0 4px #1a3c5e14}.query-card .error-msg{color:#e74c3c;text-align:left;margin-bottom:8px;font-size:13px;font-weight:500}.btn{cursor:pointer;white-space:nowrap;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:14px 28px;font-family:inherit;font-size:16px;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{color:#fff;background:linear-gradient(135deg,#1a3c5e 0%,#2d5a87 100%);box-shadow:0 4px 12px #1a3c5e40}.btn-primary:hover{background:linear-gradient(135deg,#15304d 0%,#244a70 100%);transform:translateY(-1px);box-shadow:0 6px 16px #1a3c5e4d}.btn-primary:disabled{cursor:not-allowed;box-shadow:none;background:#a0b4c8;transform:none}.btn-outline{color:#1a3c5e;background:#fff;border:2px solid #1a3c5e}.btn-outline:hover{background:#f0f5fa;transform:translateY(-1px)}.certificate-container{flex-direction:column;align-items:center;width:100%;display:flex}.result-card{text-align:center;background:#fff;width:100%;max-width:900px;padding:48px 40px}.result-header .result-logo{width:140px;height:auto;margin-bottom:12px}.result-header h2{color:#1a3c5e;letter-spacing:-.5px;margin-bottom:4px;font-size:22px;font-weight:700}.result-header .result-subtitle{color:#666;margin-bottom:28px;font-size:13px;font-weight:400}.result-info{text-align:left;background:#f8f9fa;border-radius:12px;margin-bottom:28px;padding:20px}.info-row{border-bottom:1px solid #e8ecf1;justify-content:space-between;align-items:center;padding:12px 0;display:flex}.info-row:last-child{border-bottom:none}.info-label{color:#666;font-size:14px;font-weight:500}.info-value{color:#1a3c5e;font-size:14px;font-weight:600}.result-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.cert-header{text-align:center;padding:36px 48px 20px}.cert-header .header-logo{width:200px;height:auto;margin:0 auto;display:block}.cert-header .divider{border:none;border-top:1px solid #ddd;margin:24px 0}.cert-sender{text-align:right;color:#666;padding:0 48px;font-size:13px;line-height:1.8}.cert-sender .date-line{color:#555;margin-top:20px;font-size:13px}.cert-recipient{color:#333;padding:24px 48px 0;font-size:15px;line-height:2}.cert-title{text-align:center;color:#1a3c5e;padding:28px 48px 0;font-size:15px;font-weight:700;line-height:1.7}.cert-body{color:#333;text-align:justify;padding:24px 48px 0;font-size:14px;line-height:2}.cert-body p{margin-bottom:14px}.cert-body a{color:#1a3c5e}.cert-signature{padding:28px 48px 24px}.cert-signature .sign-regards{color:#333;margin-bottom:24px;font-size:14px}.cert-signature .sign-images{gap:16px;margin-bottom:18px;display:flex}.cert-signature .sign-images img{width:150px;height:auto}.cert-signature .sign-names{color:#1a3c5e;margin-bottom:4px;font-size:14px;font-weight:700;line-height:1.6}.cert-signature .sign-org{color:#555;font-size:13px;line-height:1.8}.cert-footer{background:#f9f9f9;border-top:1px solid #eee;padding:16px 48px}.cert-footer p{color:#999;text-align:center;font-size:11px}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.success-msg{color:#27ae60;text-align:center;margin-top:12px;font-size:13px}@media (width<=640px){.query-card{padding:32px 24px}.query-card h1{font-size:20px}.query-card .input-group{flex-direction:column}.result-card{padding:32px 24px}.result-header .result-logo{width:120px}}