:root{
  --green:#7ecb7f;
  --green-2:#9be59e;
  --green-3:#e6f8e9;
  --dark:#144d03;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--green-3);
  color:#222;
}
header{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; background:var(--green);
  position:sticky; top:0; z-index:10;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
header img.logo{width:180px;height:40px;border-radius:10px; background:white; object-fit:cover}
header h1{margin:0;color:var(--dark);font-weight:800;letter-spacing:.2px}
nav{
  display:flex; flex-wrap:wrap; gap:10px; padding:12px 16px; background: #f5fff6; border-bottom:1px solid #d9f6db;
}
nav a{
  text-decoration:none; color:#0b3418; background:var(--green-2);
  padding:9px 12px; border-radius:10px; font-weight:600;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}
nav a:hover{filter:brightness(1.05)}
main{max-width:1150px; margin:18px auto; padding:0 16px 60px}
.card{
  background:white; border-radius:16px; padding:18px; box-shadow:0 4px 18px rgba(0,0,0,.06); margin-bottom:16px;
}
h2{color:#0b3418; margin:8px 0 6px}
h3{color:#0e3e1f; margin:16px 0 6px}
.summary{color:#385c44}
.grid{display:grid; gap:16px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.btn{
  display:inline-block; border:0; background:#2b9f3a; color:white; padding:10px 14px; border-radius:10px;
  cursor:pointer; text-decoration:none; font-weight:700
}
.btn.secondary{background:#0e3e1f}
small.muted{color:#4a6b56}
table{width:100%; border-collapse:collapse; background:white; border-radius:12px; overflow:hidden}
th,td{padding:10px; border-bottom:1px solid #eef7ef; text-align:left; vertical-align:top}
th{background:#f1fbf2; color:#0b3418}
blockquote{
  margin:12px 0; padding:10px 12px; border-left:4px solid var(--green); background:#f7fff7; border-radius:8px;
}
footer{margin:30px 0 10px; text-align:center; color:#2b5138}
.hidden{display:none}
.solution{border:1px dashed #b8e6ba; background:#fdfffd; padding:12px; border-radius:10px; margin-top:8px}
hr.sep{border:none; height:1px; background:#e6f5e7; margin:16px 0}
.kicker{font-size:.95rem; color:#1a4f2a; background:#e6f7e8; padding:6px 10px; border-radius:8px; display:inline-block}
.meta{display:flex; gap:12px; flex-wrap:wrap; color:#345; font-size:.95rem}
.meta .tag{background:#eef9ef; padding:4px 8px; border-radius:999px}
.code{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.95rem; background:#f7fff7; padding:10px 12px; border-radius:8px}
.print-note{font-size:.95rem; color:#375e45}
@media print{
  nav, .no-print{ display:none !important;}
  body{background:white}
  .card{box-shadow:none}
}

/* Hybrid design accents for PDF/print */
.header-line{height:4px;background:linear-gradient(90deg,#7ecb7f, #9be59e)}
.answer-lines{margin:8px 0 14px}
.answer-lines .line{border-bottom:1px solid #999; height:20px; margin:6px 0}
.rubric table{width:100%; border-collapse:collapse}
.rubric th, .rubric td{border:1px solid #cfe9d0; padding:8px}
.rubric th{background:#f1fbf2}
.page-footer{position:fixed; bottom:0; left:0; right:0; font-size:11px; color:#3a5a45; text-align:center}
.head-flex{display:flex; justify-content:space-between; align-items:center}
.head-meta{font-size:0.95rem; color:#2b5138}
.print-meta{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}
.print-meta label{font-weight:600}