.cards-page{max-width:720px}
.cards-filter{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 18px}
.cards-filter label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.cards-top{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);margin-bottom:6px;font-variant-numeric:tabular-nums}
.cards-bar{height:6px;background:var(--soft);border-radius:99px;overflow:hidden;margin-bottom:14px}
.cards-bar i{display:block;height:100%;background:var(--steel)}
.card{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;min-height:280px;padding:28px 24px;text-align:center;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--steel);border-radius:14px;box-shadow:0 4px 18px rgba(18,18,18,.06);color:var(--fg);cursor:pointer;position:relative}
.card.is-back{border-top-color:var(--accent);background:#fff}
.c-tag{position:absolute;top:12px;left:16px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.c-front{font-family:var(--f-head);font-weight:700;font-size:26px;line-height:1.2}
.c-q{color:var(--muted);font-size:15px}
.c-hint{font-size:12px;color:var(--muted);margin-top:8px}
.c-back{font-size:19px;line-height:1.5;max-width:52ch}
.c-link{font-size:14px;font-weight:600}
.cards-act{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:16px}
.cards-act .btn{min-width:140px}
.cards-done{text-align:center;padding:30px 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
@media (max-width:640px){.c-front{font-size:22px}.c-back{font-size:17px}.card{min-height:240px}}