:root{
  --page-col:#FFFFFF;
  --text-col:#404040;
  --link-col:#008AFF;
  --hover-col:#0085A1;
  --line:#DDDDDD;
  --body-font:'Lora','Times New Roman',serif;
  --header-font:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{ box-sizing:border-box; }
.certs-wrap{ max-width:960px; margin:0 auto; padding:1rem 1rem 3rem; font-family:var(--body-font); color:var(--text-col); }
.certs-head p{ margin:0; opacity:.8; line-height:1.6; }

.certs-tabs{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1.5rem 0 2rem; border-bottom:1px solid var(--line); padding-bottom:1rem; }
.certs-tab{
  font-family:var(--header-font); font-size:.85rem; font-weight:600;
  padding:.5rem 1rem; border-radius:999px; border:1px solid var(--line);
  background:var(--page-col); color:var(--text-col); cursor:pointer;
}
.certs-tab.active{ background:var(--link-col); border-color:var(--link-col); color:#fff; }
.certs-tab:hover:not(.active){ border-color:var(--link-col); color:var(--link-col); }
.certs-tab .count{ opacity:.65; font-weight:400; margin-left:.25rem; }

.certs-section{ display:none; margin-bottom:2rem; }
.certs-section.active{ display:block; }
.certs-section h2{ font-family:var(--header-font); font-weight:700; font-size:1rem; margin:1.5rem 0 1rem; }
.certs-section h2:first-child{ margin-top:0; }

.certs-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; }
.cert-card{
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
  text-decoration:none; color:inherit; display:block; background:var(--page-col);
  transition:border-color .15s ease, box-shadow .15s ease; cursor:pointer;
}
.cert-card:hover, .cert-card:focus-visible{ border-color:var(--link-col); box-shadow:0 6px 18px rgba(0,0,0,.08); outline:none; }

.cert-thumb{
  aspect-ratio:1.4/1; background:linear-gradient(135deg,#F4F7FB,#EAF1FA);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border-bottom:1px solid var(--line); position:relative;
}
.cert-thumb-icon{ width:38%; height:38%; opacity:.75; position:relative; z-index:1; }
.cert-thumb-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top; display:block;
  background:var(--page-col); z-index:2;
}
.verify-tag{
  position:absolute; top:8px; right:8px; font-family:var(--header-font); font-size:.62rem;
  font-weight:700; color:#fff; background:var(--link-col); border-radius:4px; padding:2px 7px;
  z-index:3; text-decoration:none; cursor:pointer;
}
a.verify-tag:hover, a.verify-tag:focus-visible{ background:var(--hover-col); outline:none; }
.cert-info{ padding:.65rem .7rem .8rem; }
.cert-info .name{ font-family:var(--header-font); font-weight:700; font-size:.82rem; line-height:1.3; margin:0 0 .25rem; }
.cert-info .meta{ font-size:.75rem; opacity:.65; margin:0; }

/* in-page document viewer - a CONTAINED box, not full-screen, so the certs
   page stays visibly present around the edges (dimmed backdrop, not covered) */
.doc-viewer{
  position:fixed; inset:0; background:rgba(20,24,28,.78); z-index:40;
  display:none; align-items:center; justify-content:center;
  padding:5vh 5vw;
}
.doc-viewer.open{ display:flex; }
.doc-viewer-box{
  background:#14181c; width:100%; max-width:960px; height:100%; max-height:760px;
  border-radius:12px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.doc-viewer-bar{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.7rem .85rem; background:#1c2126; color:#fff; flex-wrap:wrap;
  font-family:var(--header-font); font-size:.85rem; font-weight:600;
  flex-shrink:0;
}
#doc-viewer-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; min-width:0; }
.doc-viewer-actions{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
#doc-viewer-open{
  color:#fff; font-size:.8rem; font-weight:600; text-decoration:none;
  border:1px solid rgba(255,255,255,.4); border-radius:6px; padding:.4rem .7rem;
  white-space:nowrap;
}
#doc-viewer-open:hover, #doc-viewer-open:focus-visible{ background:rgba(255,255,255,.12); border-color:#fff; }

#doc-viewer-close{
  display:flex; align-items:center; gap:.35rem;
  background:#fff; color:#14181c; border:none; border-radius:6px;
  font-family:var(--header-font); font-size:.82rem; font-weight:700;
  padding:.5rem .85rem; cursor:pointer; white-space:nowrap;
}
#doc-viewer-close span{ font-size:1.15rem; line-height:1; }
#doc-viewer-close:hover, #doc-viewer-close:focus-visible{ background:#e4e7eb; outline:2px solid var(--link-col); outline-offset:2px; }

.doc-viewer-body{ flex:1; display:flex; align-items:center; justify-content:center; overflow:auto; padding:.75rem; min-height:0; background:#f2f2f2; }
.doc-viewer-body iframe{ width:100%; height:100%; border:none; background:#fff; border-radius:4px; }
.doc-viewer-body img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; }

.doc-viewer-unsupported{ text-align:center; color:var(--text-col); font-family:var(--header-font); padding:2rem; }
.doc-viewer-unsupported p{ margin:0 0 1rem; font-size:.9rem; }
.doc-viewer-download-link{
  display:inline-block; background:var(--link-col); color:#fff; text-decoration:none;
  font-weight:700; font-size:.85rem; padding:.6rem 1.2rem; border-radius:6px;
}
.doc-viewer-download-link:hover{ background:var(--hover-col); }

@media (max-width:640px){
  .certs-wrap{ padding:.75rem .75rem 2.5rem; }
  .certs-tabs{ gap:.3rem; margin:1rem 0 1.5rem; }
  .certs-tab{ font-size:.78rem; padding:.4rem .75rem; }
  .certs-grid{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.7rem; }
  .cert-info .name{ font-size:.76rem; }
  .cert-info .meta{ font-size:.68rem; }

  .doc-viewer{ padding:3vh 2.5vw; }
  .doc-viewer-box{ max-height:none; border-radius:10px; }
  .doc-viewer-bar{ padding:.6rem .6rem; }
  #doc-viewer-title{ font-size:.78rem; flex-basis:100%; order:1; }
  .doc-viewer-actions{ order:2; width:100%; justify-content:space-between; }
  #doc-viewer-open{ font-size:.75rem; padding:.4rem .6rem; }
  #doc-viewer-close{ font-size:.78rem; padding:.45rem .7rem; }
  .doc-viewer-body{ padding:.5rem; }
}

@media (prefers-reduced-motion:reduce){
  .cert-card{ transition:none; }
}

.certs-thm-section{ margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid #DDDDDD; }
.thm-label{ font-size:.85rem; font-weight:700; margin:0 0 .6rem; }
.thm-card{ display:block; max-width:280px; border:1px solid #DDDDDD; border-radius:8px; overflow:hidden; }
.thm-card img{ width:100%; display:block; }
.thm-stats{ font-size:.78rem; color:#404040; margin-top:.6rem; }