/* HSK 1–9 grammar flashcards using the existing authored lesson material */
.gr-root{--gr-ink:#2e3652;--gr-muted:#63708a;--gr-line:#d7ddef;--gr-card:#fff;--gr-soft:#eff1fa;--gr-accent:#5a5aba;background:linear-gradient(130deg,#f1f4fc,#f9fafb);border:1px solid var(--gr-line);border-radius:21px;padding:21px;margin:22px 0;color:var(--gr-ink)}
.gr-header{display:flex;gap:18px;align-items:center;justify-content:space-between}
.gr-header>div:first-child{flex:1;min-width:0}
.gr-kicker,.gr-tip{font-size:10px;letter-spacing:.095em;font-weight:850;color:var(--gr-accent)}
.gr-header h2{color:var(--gr-ink);font-size:clamp(21px,2.6vw,29px);margin:8px 0}
.gr-header p,.gr-disclaimer,.gr-next span{font-size:11px;line-height:1.8;color:var(--gr-muted)}
.gr-total{min-width:150px;max-width:185px;text-align:center;display:grid;gap:5px;padding:17px;border-radius:13px;background:#e6e6fd;border:1px solid #c5c7ee}
.gr-total strong{font-size:25px;color:#514ea8}
.gr-total span{font-size:11px;line-height:1.6;color:#55578d}
.gr-summary{background:var(--gr-soft);border-radius:11px;display:flex;align-items:center;gap:15px;flex-wrap:wrap;padding:12px 14px;margin:17px 0}
.gr-summary span{font-size:11px;color:var(--gr-ink)}
.gr-summary button{margin-left:auto;font-size:11px}
.gr-card{background:var(--gr-card);border:1px solid var(--gr-line);border-radius:16px;overflow:hidden}
.gr-label{display:block;padding:14px 19px 0;font-size:11px;font-weight:750;color:var(--gr-accent)}
.gr-front{padding:18px 19px 23px}
.gr-front h3{font-size:clamp(20px,2.6vw,27px);line-height:1.7;overflow-wrap:anywhere;color:var(--gr-ink);margin:12px 0}
.gr-front p{font-size:12px;color:var(--gr-muted);line-height:1.7}
.gr-back{background:var(--gr-soft);padding:17px 19px;border-top:1px solid var(--gr-line)}
.gr-back p{font-size:12px;color:var(--gr-ink);line-height:1.8;overflow-wrap:anywhere}
.gr-back p.gr-chinese{font:600 clamp(18px,2.7vw,24px)/1.8 "Microsoft YaHei",sans-serif}
.gr-back p.gr-pinyin{font-size:12px;letter-spacing:.025em;color:var(--gr-muted);font-style:italic}
.gr-hidden{background:var(--gr-soft);padding:18px;font-size:11px;color:var(--gr-muted);border-top:1px dashed var(--gr-line)}
.gr-card-actions{display:flex;flex-wrap:wrap;gap:9px;padding:15px 19px;border-top:1px solid var(--gr-line)}
.gr-card-actions button{font-size:11px;padding:10px 14px}
.gr-progress{padding:10px 19px 14px;font-size:11px;color:var(--gr-muted);line-height:1.8}
.gr-next{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin:16px 0}
.gr-next button{font-size:11px}
.gr-notice{min-height:22px;color:var(--gr-accent);font-size:11px;margin:9px 0}
.gr-root :is(button,input):focus-visible{outline:3px solid #7568c6;outline-offset:3px}
body.dark .gr-root{--gr-ink:#e6e8ff;--gr-muted:#bdc5df;--gr-line:#535878;--gr-card:#292d44;--gr-soft:#343b53;--gr-accent:#c4bcff;background:linear-gradient(125deg,#292e48,#232a41)}
body.dark .gr-total{background:#3a3f64;border-color:#646da5}
body.dark .gr-total strong,body.dark .gr-total span{color:#e1dbff}
@media(max-width:750px){.gr-root{padding:14px}.gr-header{align-items:stretch;flex-direction:column}.gr-total{min-width:0;max-width:none}.gr-summary button{margin-left:0}.gr-card-actions button{flex:1}.gr-next button{width:100%}}