:root{
  --bg:#0f3d2e; --bg2:#123f32; --card:#ffffff; --brand:#0c8a43; --ink:#0b1f1a;
  --muted:#5f766e; --ring:#d1f7e6;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--ink);}
a{color:inherit}
.container{max-width:1200px;margin:0 auto;padding:16px}
.header{
  background: radial-gradient(circle at 50% -50%, #1a5c43, var(--bg));
  color:white;padding:24px 16px; text-align:center;
}
.brand{display:flex;gap:12px;align-items:center;justify-content:center}
.brand img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.brand .title{font-weight:800;letter-spacing:.3px;font-size: clamp(18px, 2.4vw, 26px);}
.sub{opacity:.9; font-size:14px}
.nav{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:12px}
.btn{
  background:white;color:#0e3729;border:none;padding:10px 14px;border-radius:999px;
  box-shadow:0 1px 0 rgba(0,0,0,.06), 0 4px 12px rgba(7,33,24,.18);
  cursor:pointer;font-weight:700
}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.5); color:white}
.card{background:var(--card); border-radius: var(--radius); padding:16px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.08);}
.grid{display:grid; gap:16px}
.grid.cols-2{grid-template-columns: 1fr 1fr}
.grid.cols-3{grid-template-columns: repeat(3,1fr)}
@media (max-width:900px){ .grid.cols-2, .grid.cols-3{grid-template-columns:1fr} }
.input, select{width:100%;padding:10px 12px;border:1px solid #d7e5df;border-radius:10px; outline:none}
.label{font-size:12px; color:var(--muted); margin-bottom:6px}
.field{display:flex;flex-direction:column; gap:6px}
.table{width:100%; border-collapse:separate; border-spacing:0 8px}
.table th{font-size:12px;color:var(--muted); text-align:left; padding:6px 8px}
.table td{background:#f9fffc; padding:10px 8px; border-top:1px solid #e5f4ec; border-bottom:1px solid #e5f4ec}
.actions{display:flex; gap:8px; flex-wrap:wrap}
.kbd{background:#ecfff6;border:1px solid #d4f5e7;border-radius:6px;padding:2px 6px;font-size:12px}
.footer{color:white; opacity:.8; text-align:center; padding:24px}
.result-card{max-width:820px;margin:0 auto}
.result-header{display:flex; gap:16px; align-items:center; justify-content:space-between; border-bottom:2px dashed #e6f3ec; padding-bottom:12px}
.result-header img{width:72px; height:72px; object-fit:contain}
.tag{display:inline-block; padding:4px 10px; border-radius:999px; background:#ecfff6; border:1px solid #d4f5e7; font-weight:700; font-size:12px}
.badge{display:inline-block;padding:6px 10px;border-radius:8px; font-weight:800}
.badge.pass{background:#e7fff0; border:1px solid #baf2d4; color:#08663a}
.badge.fail{background:#ffecec; border:1px solid #f4c1c1; color:#9b1c1c}
.print-area{padding:16px}
.logo-uploader{display:flex; gap:10px; align-items:center}
.photo{width:100px;height:120px;background:#eff7f3;border:1px dashed #cfe8dc;border-radius:10px; object-fit:cover}
.small{font-size:12px;color:var(--muted)}
hr.soft{border:none;border-top:1px solid #e8f5ee;margin:12px 0}