/* ========= 证书页：整体布局（沿用报告页体系） ========= */

/* 页面容器 */
.pdf-viewer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 头部 */
.viewer-head {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}
.viewer-head h1 {
  font-family: 'Noto Serif SC', 'Noto Serif', serif;
  font-size: 32px;
  color: #111827;
  margin-bottom: 8px;
}
.viewer-head .meta {
  color: #6b7280;
  margin-bottom: 20px;
}

/* 按钮区 */
.controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

/* ========= 加载 / 错误 状态（与报告页一致） ========= */

.loading-state {
  text-align: center;
  padding: 60px 20px;
}
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f4f6;
  border-left: 4px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.loading-state p {
  color: #6b7280;
  font-size: 16px;
}

.error-state {
  text-align: center;
  padding: 60px 20px;
  color: #dc2626;
}
.error-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.error-state h3 {
  font-size: 24px;
  margin-bottom: 12px;
  color: #dc2626;
}
.error-state p {
  color: #6b7280;
  margin-bottom: 20px;
}

/* ========= 证书预览容器（对应 #certContainer / #certViewer） ========= */

.pdf-container {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  background: #fafaf7;
}

/* 证书是图片预览：保证在容器内完整展示 */
#certViewer {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  margin: 0 auto;
  object-fit: contain;
  background: #fafaf7;
}


/* ========= 响应式（与报告页一致） ========= */
@media (max-width: 768px) {
  .pdf-viewer { padding: 10px; }
  .viewer-head h1 { font-size: 24px; }
  .controls { flex-direction: column; gap: 8px; }
}

/* ========= 可选：证书“纸张风格”排版（保持你的原有样式，便于后续切换 HTML 证书） ========= */

.cert-wrap {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 30px 20px;
}

.cert-paper {
  width: min(900px, 92vw);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.08);
  border: 1px solid #E8E6E0;
  padding: 32px 24px;
  position: relative;
  overflow: hidden;
}
.cert-paper::before {
  content:"";
  position: absolute;
  inset: 12px;
  border: 1px solid #EDEAE3;
  border-radius: 14px;
  pointer-events: none;
}

.cert-head h1 {
  font-family: 'Noto Serif SC','Noto Serif', serif;
  text-align: center;
  font-size: 32px;
  margin-bottom: 6px;
}
.issuer { text-align: center; color: #6B7280; margin-bottom: 18px; }
.cert-body { text-align: center; line-height: 1.9; }
.certee { font-size: 18px; }
.medal { font-size: 48px; margin: 14px 0; }
.date { color: #6B7280; }
.cert-foot { display: flex; gap: 12px; justify-content: center; margin-top: 26px; }

/* 统一表单控件的排版继承（解决 <button> 与 <a> 视觉字号不一致） */
button, input, select, textarea {
  font: inherit;          /* 同时继承 family/size/weight/line-height */
  color: inherit;
}

/* 取消原生按钮外观，避免各平台默认样式干扰字重/字距/缩放 */
button.btn {
  -webkit-appearance: none;
  appearance: none;
  background: none;       /* 你的主题里若有背景色/边框会在下面 .btn.* 中设定 */
  border: none;
}

/* 统一 .btn 的基础排版与布局（<a> 与 <button> 一样的“按钮”表现） */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;      /* <a> 去下划线 */
  font-size: 16px;            /* ← 统一字号 */
  line-height: 1.2;           /* ← 统一行高 */
  font-weight: 600;           /* ← 统一字重 */
  letter-spacing: 0;          /* ← 避免平台默认字距差异 */
  cursor: pointer;
}

/* 主题色按你现有风格来，下面只是示例 */
.btn.primary {
  background: #ffd182;
  color: #111827;
}
.btn.secondary {
  background: #fff;
  color: #111827;
  border: 1px solid #e5e7eb;
}

/* disabled 状态：只改交互与透明度，不改字号/字重，避免“看起来变小” */
.btn[disabled],
button[disabled].btn {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}