.grammar-app { padding-bottom:56px; }
.grammar-hero { margin-bottom:8px; }
.grammar-app.is-studying > :is(.grammar-hero,.grammar-stats,.grammar-grid) { display:none; }
.grammar-stats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:18px 0; }
.grammar-grid { display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:16px; }
.grammar-grid .study-setup-panel { border-top:4px solid var(--primary); }
.grammar-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
.grammar-controls label { display:grid; gap:7px; color:#344054; font-size:13px; font-weight:800; }
.grammar-controls select { width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#fff; color:var(--text); font:inherit; }
.grammar-controls select:focus { outline:none; border-color:#84adff; box-shadow:0 0 0 4px rgba(46,111,229,.08); }
#grammarUnit { min-width:0; }
.grammar-mode-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; }
.grammar-mode-actions button { width:100%; min-height:44px; }
.grammar-study-panel { margin-bottom:16px; }
.grammar-blank { display:inline-block; min-width:105px; padding:0 5px; border-bottom:3px solid #98a2b3; color:#667085; letter-spacing:.08em; }
.grammar-question { margin:0 auto 12px; max-width:680px; color:#475467; font-size:15px; font-weight:800; line-height:1.5; }
.grammar-audio-row { display:flex; justify-content:center; gap:8px; margin:0 0 16px; }
.grammar-hint { max-width:620px; margin:12px auto 0; padding:10px 12px; border:1px dashed #cbd5e1; border-radius:10px; background:#f8fafc; color:#475467; line-height:1.55; text-align:left; }
.grammar-hint strong { color:var(--text); }
.grammar-explanation { margin-top:10px; padding-top:10px; border-top:1px solid #e4e7ec; }
.grammar-answer-line { margin-bottom:8px; }
.grammar-source-status { margin-top:10px; color:#667085; font-size:12px; }
.grammar-source-status.error { color:#b42318; }
.grammar-source-status.success { color:#027a48; }
@media (max-width:980px) {
  .grammar-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grammar-controls { grid-template-columns:1fr 1fr; }
}
@media (max-width:680px) {
  .grammar-stats { grid-template-columns:1fr 1fr; }
  .grammar-controls,.grammar-mode-actions { grid-template-columns:1fr; }
}