:root {
  --dsu-cert-radius: 22px;
  --dsu-cert-glass: rgba(255,255,255,0.6);
  --dsu-cert-glass-strong: rgba(255,255,255,0.7);
  --dsu-cert-border: rgba(255,255,255,0.45);
  --dsu-cert-text: #0c0c0c;
  --dsu-cert-muted: #757474;
}
a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}
button,
.dsu-cert-login-btn {
  text-decoration: none;
  outline: none;
  border: none;
  cursor: pointer;
}

button:hover,
.dsu-cert-login-btn:hover {
  text-decoration: none;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body.dsu-cert-shell {
  margin: 0;
  font: 500 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--dsu-cert-text);
  background:
    radial-gradient(1400px 1000px at 15% 15%, rgba(163,196,243,0.65), transparent 60%),
    radial-gradient(1200px 900px at 85% 10%, rgba(237,180,255,0.6), transparent 60%),
    radial-gradient(1400px 1100px at 25% 90%, rgba(172,255,221,0.55), transparent 65%),
    radial-gradient(1000px 900px at 90% 85%, rgba(255,228,196,0.45), transparent 65%),
    linear-gradient(180deg, #fdfdfd 0%, #f5f8ff 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}
.dsu-cert-bg {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.dsu-cert-header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(255,255,255,0.6);
  border-bottom: 1px solid var(--dsu-cert-border);
}

.dsu-cert-header-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* Left button */
.dsu-cert-header-inner .dsu-cert-login-wrap:first-child {
  justify-content: flex-start;
}

/* Centered logo */
.dsu-cert-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

/* Right button */
.dsu-cert-header-inner .dsu-cert-login-wrap:last-child {
  justify-content: flex-end;
}
.dsu-cert-logo{height:52px;width:auto;object-fit:contain;filter:drop-shadow(0 1px 0 rgba(255,255,255,0.65))}
.dsu-cert-login-wrap{display:flex;justify-content:flex-end;gap:8px}
.dsu-cert-login-btn{appearance:none;border:1px solid var(--dsu-cert-border);background:var(--dsu-cert-glass);backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);border-radius:999px;padding:10px 16px;font-weight:600;letter-spacing:.2px;color:var(--dsu-cert-text);box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),0 8px 20px rgba(0,0,0,0.06);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;text-decoration:none}
.dsu-cert-login-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.7),0 12px 28px rgba(0,0,0,0.08);background:var(--dsu-cert-glass-strong)}
.dsu-cert-main{display:grid;place-items:center;padding:56px 18px 32px}

.dsu-cert-card{width:100%;max-width:760px;border:1px solid var(--dsu-cert-border);background:rgba(255,255,255,0.25);backdrop-filter:blur(4px) saturate(150%);-webkit-backdrop-filter:blur(4px) saturate(150%);border-radius:var(--dsu-cert-radius);box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),0 25px 60px rgba(0,0,0,0.10);padding:28px}
.dsu-cert-card--wide{max-width:1100px}

.dsu-cert-badge-wrap {
  text-align: center;
  margin-bottom: 12px;
}

.dsu-cert-badge {
  height: 64px;
  width: auto;
  opacity: 0.95;
  position: relative;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25))
          drop-shadow(0 0 12px rgba(255, 230, 120, 0.4));
  animation: dsu-glow 2.8s ease-in-out infinite;
  transition: transform 0.3s ease;
}

.dsu-cert-badge:hover {
  transform: scale(1.05);
}

/* Pulsing yellow glow */
@keyframes dsu-glow {
  0%, 100% {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25))
            drop-shadow(0 0 12px rgba(255, 227, 100, 0.7));
  }
  50% {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25))
            drop-shadow(0 0 22px rgba(255, 211, 68, 0.8));
  }
}

/* Shine effect overlay */
.dsu-cert-badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.0) 100%);
  transform: skewX(-20deg);
  animation: dsu-shine 4s infinite ease-in-out;
  pointer-events: none;
}

@keyframes dsu-shine {
  0% { left: -75%; }
  50% { left: 125%; }
  100% { left: 125%; }
}

.dsu-cert-title{margin:8px 0 18px;font:700 clamp(1.2rem,3.2vw,1.8rem)/1.1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;text-align:center;letter-spacing:-0.02em;}

.dsu-cert-title.narrow{font:600 clamp(1.3rem,3.6vw,2.0rem)/1.1 system-ui,-apple-system, Segoe UI, Roboto, sans-serif}
.dsu-cert-subtle{margin:0 auto 22px;max-width:800px;text-align:center;color:var(--dsu-cert-muted);font-size:.975rem}
.dsu-cert-subtle.narrow{max-width:620px}

.dsu-cert-search{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin:18px auto 8px;max-width:620px}
.dsu-cert-input{appearance:none;width:100%;border:1px solid var(--dsu-cert-border);background:rgba(255,255,255,0.75);border-radius:14px;padding:14px 16px;font-size:1rem;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,0.7),0 6px 16px rgba(0,0,0,0.04);transition:box-shadow .18s ease,background .18s ease,border-color .18s ease}
.dsu-cert-input:focus{background:rgba(255,255,255,0.9);border-color:rgba(0,0,0,0.18);box-shadow:inset 0 1px 0 rgba(255,255,255,0.85),0 10px 22px rgba(0,0,0,0.06)}
.dsu-cert-search-btn{appearance:none;border:1px solid var(--dsu-cert-border);background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:14px;padding:14px 18px;font-weight:700;letter-spacing:.2px;min-width:120px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,0.75),0 10px 26px rgba(0,0,0,0.08);transition:transform .18s ease, box-shadow .18s ease}
.dsu-cert-search-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 14px 34px rgba(0,0,0,0.10)}
.dsu-cert-placeholder{margin:18px auto 0;max-width:620px;color:var(--dsu-cert-muted);font-size:.95rem;text-align:center}

.dsu-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dsu-kv{display:grid;grid-template-columns:220px 1fr;gap:8px;align-items:center;padding:10px 12px;border:1px solid rgba(0,0,0,0.06);border-radius:14px;background:rgba(255,255,255,0.6)}
.dsu-k{font-weight:700;color:#333}
.dsu-v{color:#111;word-break:break-word}
.dsu-section{margin:26px 0 10px;font-weight:800;letter-spacing:.2px}

.dsu-tests{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dsu-test{border:1px solid rgba(0,0,0,0.06);border-radius:14px;background:rgba(255,255,255,0.5);padding:12px}
.dsu-test h4{margin:0 0 8px;font-size:1rem}
.dsu-pill{display:inline-block;padding:6px 10px;border-radius:999px;font-weight:700}
.passed{background:#e6f7ec;color:#127c3e;border:1px solid #bde6c9}
.failed{background:#ffefef;color:#9c1d1d;border:1px solid #f2c2c2}
.not-tested{background:#f2f2f2;color:#555;border:1px solid #e6e6e6}

table.dsu-parts{width:100%;border-collapse:separate;border-spacing:0 8px}
table.dsu-parts th, table.dsu-parts td{padding:12px 14px;background:rgba(255,255,255,0.4);}
table.dsu-parts th{font-weight:800;text-align:left}
table.dsu-parts thead tr th:first-child {
  border-top-left-radius: 14px;
}

table.dsu-parts thead tr th:last-child {
  border-top-right-radius: 14px;
}

table.dsu-parts tbody tr:last-child td:first-child {
  border-bottom-left-radius: 14px;
}

table.dsu-parts tbody tr:last-child td:last-child {
  border-bottom-right-radius: 14px;
}
table.dsu-parts tr{border-radius:12px}

.dsu-cert-footer{padding:26px 18px 34px;text-align:center;color:var(--dsu-cert-muted);border-top:1px solid rgba(255,255,255,0.4);background:rgba(255,255,255,0.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.dsu-cert-footer a{color:#0071e3;text-decoration:none;font-weight:600}
.dsu-cert-footer a:hover{text-decoration:underline}
.copyright{margin-top:20px;font-size:small}

@media (max-width: 640px){
  .dsu-cert-search{grid-template-columns:1fr}
  .dsu-cert-search-btn{width:100%}
  .dsu-cert-header-inner{grid-template-columns:1fr auto}

}
@media(max-width:900px){
  .dsu-grid{grid-template-columns:1fr}
  .dsu-tests{grid-template-columns:1fr}
  .dsu-kv{grid-template-columns:1fr}
}

.border {
  border: 2px solid rgba(255, 220, 70, 0.6);
  border-radius: 18px;
  box-shadow:
    0 0 12px rgba(255, 220, 70, 0.6),
    0 0 24px rgba(255, 230, 100, 0.4),
    inset 0 0 6px rgba(255, 250, 150, 0.4);
  animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
  0%, 100% {
    box-shadow:
      0 0 12px rgba(255, 220, 70, 0.3),
      0 0 24px rgba(255, 230, 100, 0.2),
      inset 0 0 6px rgba(255, 250, 150, 0.2);
  }
  50% {
    box-shadow:
      0 0 20px rgba(255, 240, 120, 0.9),
      0 0 45px rgba(255, 250, 180, 0.8),
      inset 0 0 12px rgba(255, 255, 200, 0.6);
  }
}

.dsu-issuer{margin-top:18px}
.dsu-cert-signature{display:block;max-height:56px;opacity:.9;margin-left:auto;margin-top:10px;margin-bottom:6px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.issuer-text{font-size:.9rem;color:#4a4a4a;text-align:right}

.dsu-verify{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;border:1px solid rgba(0,0,0,.06);border-radius:16px;background:rgba(255,255,255,.6)}
.dsu-verify-row{display:flex;gap:14px;align-items:center}
.dsu-verify-row.small{font-size:.9rem;opacity:.8;margin-top:6px}
.pill{border-radius:999px;padding:6px 10px;font-weight:700}
.pill-ok{background:#e6f7ec;color:#127c3e;border:1px solid #bde6c9}
.pill-warn{background:#fff6e5;color:#8a5a00;border:1px solid #f1d7a8}
.dsu-verify-qr img{height:72px;width:72px}
.uid,.issued,.hashcode{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}

/* --- Mobile tuning --- */

/* Better tap targets */
.dsu-cert-login-btn,
.dsu-cert-search-btn {
  min-height: 44px;
}

/* Use safe-area padding on notched phones */
.dsu-cert-header,
.dsu-cert-main,
.dsu-cert-footer {
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
}

/* iOS perf: avoid fixed background on small screens */
@media (max-width: 768px) {
  body.dsu-cert-shell {
    background-attachment: scroll;
    background-size: cover;
    background-position: center top;
  }
}

/* Header: left button, center logo, right button stay aligned */
@media (max-width: 768px) {
  .dsu-cert-header-inner {
    grid-template-columns: 50px 1fr 48px; /* fixed button columns */
    gap: 6px;
  }
  .dsu-cert-logo { height: 42px; }
  .dsu-cert-login-btn { padding: 8px 12px; font-size: 0.95rem; }
}

/* Card breathing on phones */
@media (max-width: 768px) {
  .dsu-cert-card { padding: 18px; border-radius: 18px; }
  .dsu-cert-card--wide { max-width: 100%; }
  .dsu-cert-title { margin: 6px 0 14px; }
  .dsu-cert-subtle { font-size: 0.95rem; }
}

/* Verify block stacks neatly */
@media (max-width: 768px) {
  .dsu-verify {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .dsu-verify-qr img { height: 56px; width: 56px; }
  .uid, .issued { font-size: 0.95rem; }
}

/* Specs grid: 2 cols -> 1; label/value layout adapts */
@media (max-width: 900px) {
  .dsu-grid { grid-template-columns: 1fr; }
}

/* Label/value: side-by-side on tablets, stacked on small phones */
@media (max-width: 900px) {
  .dsu-kv {
    grid-template-columns: minmax(120px, 38%) 1fr;
  }
}
@media (max-width: 480px) {
  .dsu-kv {
    grid-template-columns: 1fr;  /* label above value */
    row-gap: 2px;
  }
  .dsu-k { opacity: 0.85; }
}

/* Tests grid stacks */
@media (max-width: 900px) {
  .dsu-tests { grid-template-columns: 1fr; }
  .dsu-test h4 { font-size: 0.95rem; }
}

/* Parts table: horizontal scroll on mobile instead of squish */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-responsive > table {
  min-width: 560px; /* keep columns readable */
}

/* QR/signature block spacing on mobile */
@media (max-width: 480px) {
  .dsu-cert-signature { max-height: 44px; }
  .issuer-text { font-size: 0.85rem; }
}

/* Back chevron button sizing */
.back-chevron {
  padding: 8px 16px !important;
  font-size: 22px !important;
  line-height: 1;
}

.dsu-cert-alert {

  padding: 14px 18px;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: rgba(255, 0, 0, 0.08);
  border: 1px solid rgba(255, 0, 0, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #d60000;
  font-weight: 600;
  text-align: center;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
  transition: all 0.3s ease;
}

.dsu-cert-alert:hover {
  background: rgba(255, 0, 0, 0.12);
  border-color: rgba(255, 0, 0, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

@media (max-width: 600px) {
  /* absolutely no horizontal scrolling */
  html,
  body {
    overflow-x: hidden;
  }

  body.dsu-cert-shell {
    font-size: 14px;
    line-height: 1.4;
  }

  .dsu-cert-main {
    display: block;
    width: 100%;
    max-width: 100vw;          /* never wider than viewport */
    margin: 0 auto;
    padding: 8px 8px 20px;     /* small, symmetric padding */
  }

  .dsu-cert-card {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
    padding: 16px 16px 22px;
    box-sizing: border-box;    /* belts and braces */
  }

  .dsu-cert-title {
    margin: 4px 0 12px;
    font-size: 1.25rem;
  }

  .dsu-cert-subtle {
    font-size: 0.9rem;
    margin-bottom: 16px;
    padding: 0 4px;
  }

  .dsu-section {
    margin: 18px 0 8px;
  }

  .dsu-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dsu-k {
    font-size: 0.8rem;
  }

  .dsu-kv {
    grid-template-columns: 1fr;
    padding: 8px 10px;
  }

  .dsu-tests {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dsu-test {
    padding: 10px;
  }

  .dsu-verify {
    padding: 10px 12px;
    gap: 8px;
    flex-direction: column;
    align-items: flex-start;
  }

  .dsu-verify-qr img {
    height: 52px;
    width: 52px;
  }

  .dsu-cert-footer {
    padding-top: 18px;
    padding-bottom: 24px;
  }
}