:root{
  --bg:#f4f7fb;
  --surface:#ffffff;
  --text:#132238;
  --muted:#64748b;
  --brand:#0f3d63;
  --brand-2:#1167a8;
  --line:#dce5ef;
  --green:#15803d;
  --green-bg:#dcfce7;
  --amber:#a16207;
  --amber-bg:#fef3c7;
  --red:#b42318;
  --red-bg:#fee4e2;
  --shadow:0 18px 55px rgba(15,61,99,.10);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}
.container{width:min(1120px,calc(100% - 36px));margin:auto}
.site-header{background:#fff;border-bottom:1px solid var(--line)}
.header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--brand);color:#fff;font-weight:800;letter-spacing:.5px}
.brand strong,.brand span{display:block}
.brand span{font-size:12px;color:var(--muted);margin-top:2px}
.secure-badge{font-size:13px;color:var(--green);font-weight:700;background:var(--green-bg);padding:9px 12px;border-radius:999px}
.hero{padding:62px 0 38px;background:linear-gradient(145deg,#eef5fb 0%,#fff 70%);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.55fr .8fr;gap:42px;align-items:center}
.eyebrow{color:var(--brand-2);font-size:12px;font-weight:800;letter-spacing:.14em}
h1{font-size:clamp(34px,5vw,56px);line-height:1.04;margin:12px 0 18px;letter-spacing:-.04em;max-width:760px}
.lead{font-size:18px;line-height:1.7;color:var(--muted);max-width:720px}
.verify-box{background:#fff;padding:22px;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);margin-top:30px}
.verify-box label{display:block;font-size:13px;font-weight:800;margin-bottom:9px}
.input-row{display:flex;gap:10px}
input{flex:1;min-width:0;border:1px solid #bccadd;border-radius:11px;padding:15px 16px;font:inherit;outline:none}
input:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(17,103,168,.12)}
button{border:0;border-radius:11px;background:var(--brand);color:#fff;padding:0 22px;font:inherit;font-weight:800;cursor:pointer}
button:hover{filter:brightness(1.05)}
.verify-box small{display:block;color:var(--muted);margin-top:10px}
.qr-card{background:var(--brand);color:#fff;border-radius:24px;padding:30px;box-shadow:var(--shadow)}
.qr-icon{width:74px;height:74px;display:grid;place-items:center;background:#fff;border-radius:18px;margin-bottom:22px}
.qr-icon svg{width:48px;fill:var(--brand)}
.qr-card h2{margin:0 0 10px;font-size:24px}
.qr-card p{color:#dbeafe;line-height:1.6}
.example-url{margin-top:20px;padding:12px 14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:10px;font-size:12px;word-break:break-all}
.result-area{padding:44px 0 70px;min-height:410px}
.info-card,.not-found,.certificate-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.info-card{display:flex;gap:15px;padding:22px;color:var(--muted)}
.info-card strong{color:var(--text)}
.info-card p{margin:5px 0 0;line-height:1.6}
.info-icon,.not-found-icon{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:#eaf2f8;color:var(--brand)}
.certificate-card{padding:30px}
.status-line{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-bottom:22px;border-bottom:1px solid var(--line)}
.mini-label{font-size:11px;letter-spacing:.13em;font-weight:800;color:var(--muted)}
.status-line h2{margin:6px 0 0;font-size:30px}
.status-badge{border-radius:999px;padding:10px 14px;font-size:12px;font-weight:900;letter-spacing:.08em}
.status-badge.valid{background:var(--green-bg);color:var(--green)}
.status-badge.expired{background:var(--amber-bg);color:var(--amber)}
.status-badge.revoked{background:var(--red-bg);color:var(--red)}
.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:24px}
.detail{padding:18px 20px;border-bottom:1px solid var(--line)}
.detail:nth-child(odd){border-right:1px solid var(--line)}
.detail.full{grid-column:1/-1;border-bottom:0;border-right:0}
.detail span,.detail strong{display:block}
.detail span{font-size:12px;color:var(--muted);margin-bottom:7px}
.detail strong{line-height:1.45}
.warning{margin:20px 0 0;padding:14px 16px;border-radius:12px;font-size:14px;line-height:1.6}
.warning.expired{background:var(--amber-bg);color:#7c4a03}
.warning.revoked{background:var(--red-bg);color:#7a271a}
.verification-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;color:var(--muted);font-size:13px}
.ghost-btn{background:#fff;color:var(--brand);border:1px solid #bccadd;padding:10px 14px}
.not-found{text-align:center;padding:42px 24px}
.not-found-icon{margin:0 auto 16px;background:var(--red-bg);color:var(--red)}
.not-found h2{margin:0 0 10px}
.not-found p{color:var(--muted)}
.hidden{display:none!important}
footer{border-top:1px solid var(--line);background:#fff}
.footer-inner{min-height:76px;display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--muted);font-size:13px}
@media(max-width:820px){
  .hero{padding-top:40px}.hero-grid{grid-template-columns:1fr}.qr-card{display:none}.input-row{flex-direction:column}.input-row button{min-height:50px}.details-grid{grid-template-columns:1fr}.detail:nth-child(odd){border-right:0}.detail.full{grid-column:auto}.detail:last-child{border-bottom:0}.verification-foot,.footer-inner{align-items:flex-start;flex-direction:column}.footer-inner{padding:20px 0}.secure-badge{display:none}
}