:root{
  --bg:#f7f9fc; --ink:#1f2433; --muted:#6b7280; --accent:#5b7cfa;
  --ok:#10b981; --warn:#f59e0b; --bad:#ef4444; --card:#ffffff;
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.site-header{
  position:sticky; top:0; z-index:10; background:linear-gradient(180deg,#fff,rgba(255,255,255,.8));
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid #e5e7eb; padding:12px 16px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.site-header h1{font-size:1.25rem; margin:0}
.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tabs .tab{
  appearance:none; border:1px solid #e5e7eb; background:#fff; color:var(--ink);
  padding:8px 12px; border-radius:999px; cursor:pointer;
}
.tabs .tab.active{background:var(--accent); color:#fff; border-color:transparent}
.tabs .tab.disabled{opacity:.5; cursor:not-allowed}
.wrapper{max-width:1100px; margin:20px auto; padding:0 16px;}

#filters{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
#filters select, #filters input[type=search]{
  padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px; background:#fff;
}
.toggle{display:flex; align-items:center; gap:8px; font-size:.95rem; color:var(--muted)}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px}
.card{
  background:var(--card); border:1px solid #e5e7eb; border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px; display:flex; flex-direction:column; gap:10px;
}
.card h3{margin:0; font-size:1.1rem}
.badges{display:flex; gap:6px; flex-wrap:wrap}
.badge{padding:2px 8px; border-radius:999px; font-size:.75rem; border:1px solid #e5e7eb; color:#374151; background:#fff}
.badge.axe{background:#eef2ff; border-color:#c7d2fe; color:#3730a3}
.badge.id{background:#ecfeff; border-color:#a5f3fc; color:#155e75}
.progress{
  display:flex; gap:6px; align-items:center;
}
.progress button{
  padding:6px 10px; border-radius:8px; border:1px solid #e5e7eb; background:#fff; cursor:pointer;
}
.progress .state{font-weight:600; color:var(--muted)}
.actions{display:flex; gap:8px; flex-wrap:wrap}
button.primary{
  background:var(--accent); color:#fff; border:none; padding:8px 12px; border-radius:10px; cursor:pointer;
}
button.ghost{
  background:#fff; color:var(--ink); border:1px solid #e5e7eb; padding:8px 12px; border-radius:10px; cursor:pointer;
}

.rule{font-size:.95rem; color:#374151; background:#f8fafc; border:1px dashed #e5e7eb; padding:10px; border-radius:12px}
details summary{cursor:pointer; font-weight:600}

.exercise{border-top:1px solid #e5e7eb; padding-top:10px; margin-top:6px}
.q{margin:8px 0; padding:10px; background:#fafafa; border-radius:10px; border:1px solid #eee}
.q .prompt{margin-bottom:6px}
.q input[type=text]{width:220px; padding:6px 8px; border-radius:8px; border:1px solid #d1d5db}
.q .choices{display:flex; gap:8px; flex-wrap:wrap}
.q .choices button{border:1px solid #e5e7eb; padding:6px 8px; border-radius:8px; background:#fff; cursor:pointer}
.q.correct{border-color:rgba(16,185,129,.5); background:#ecfdf5}
.q.wrong{border-color:rgba(239,68,68,.4); background:#fef2f2}

.score{margin-top:8px; font-weight:600}
.site-footer{padding:20px 16px; text-align:center; color:var(--muted)}
@media print{
  header, #filters, .actions, .site-footer{display:none}
  .card{break-inside:avoid}
}