@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Patrick+Hand&display=swap');
:root{--grid:rgba(54,78,122,.13);--paper:#f5f3ec;--ink:#1c3f86;--muted:#4b6798;--accent:#f59e0b;--accent-soft:#fde7bf}
*{box-sizing:border-box}body{margin:0;font-family:"Patrick Hand",sans-serif;color:var(--ink);background:var(--paper);background-image:linear-gradient(to right,var(--grid) 1px,transparent 1px),linear-gradient(to bottom,var(--grid) 1px,transparent 1px);background-size:42px 42px}
.container{max-width:980px;margin:0 auto;padding:16px}
.h1{font-family:"Caveat",cursive;font-size:54px;line-height:1;margin:4px 0}
.p{font-size:20px;color:var(--muted)}
.subtitle{font-size:18px;color:var(--muted)}
.sketch{position:relative;border:2.4px solid var(--ink);border-radius:16px;background:transparent;box-shadow:1px 1px 0 #315ea6}
.sketch:before{content:"";position:absolute;inset:-1px;border:2px solid var(--ink);border-radius:17px;transform:translate(1px,-1px) rotate(-.2deg);opacity:.55;pointer-events:none}
.panel{padding:14px}
.input{width:100%;padding:10px;border:2px solid var(--ink);border-radius:12px;background:transparent;font:inherit;font-size:18px;color:var(--ink)}
.input.repo{border-color:var(--accent);background:rgba(245,158,11,.06)}
label{display:block;margin:8px 0 4px;font-weight:700}
label.hot{color:#b86e00}
.row{display:flex;justify-content:center;padding:10px 0;font-weight:700}
.grid2{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:760px){.grid2{grid-template-columns:1fr 1fr}}
.btn{margin-top:12px;padding:10px 14px;border:2px solid var(--ink);border-radius:12px;background:transparent;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;color:var(--ink)}
.btn.primary{background:var(--accent-soft);border-color:var(--accent);color:#8a5200}
.progress{height:14px;border:2px solid var(--ink);border-radius:999px;overflow:hidden;position:relative;background:transparent}
.fill{height:100%;background:#7ea3df;opacity:.55}

.verdict-box{display:flex;flex-direction:column;gap:6px;padding:10px;border:2px solid var(--ink);border-radius:12px;background:transparent}
.verdict-badge{font-size:30px;font-weight:800;line-height:1}
.verdict-badge.ok{color:#1f8f52}.verdict-badge.warn{color:#b86e00}.verdict-badge.bad{color:#c84747}
.overall-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.overall-ring{--p:50; width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p)*1%), #d9deee 0);display:grid;place-items:center;border:2px solid var(--ink)}
.overall-ring::after{content:attr(data-v);width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:2px solid var(--ink);font-weight:800;font-size:20px}

.ratings{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:860px){.ratings{grid-template-columns:repeat(5,1fr)}}
.ring{display:flex;flex-direction:column;align-items:center;gap:6px}
.ring .circle{--p:50; width:78px;height:78px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p)*1%), #d9deee 0);display:grid;place-items:center;border:2px solid var(--ink)}
.ring .circle::after{content:attr(data-v);width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:2px solid var(--ink);font-weight:700}
.ring .cap{font-size:13px;text-align:center;color:var(--muted);line-height:1.2}

body.print-clean{background:#fff !important;background-image:none !important;color:#111}
body.print-clean .no-print-clean{display:none !important}
body.print-clean .sketch{border:1px solid #cfd4dc;box-shadow:none}

@media print {
  body{background:#fff !important;background-image:none !important;color:#111}
  .btn, #unlockBtn, #verifyBadge, #copyBadge, #printPdfBtn, #cleanPdfLink {display:none !important}
  .no-print-clean{display:none !important}
  .sketch{border:1px solid #cfd4dc;box-shadow:none}
}