/* Grammar Practice only. Load after practice-page.css and website styles. */
body.gp-practice .module-header { flex-wrap: wrap; }
body.gp-practice .module-heading { flex: 1 1 360px; }
body.gp-practice .page-start-new,
body.gp-practice .pp-tour-btn {
  background: transparent;
  color: var(--muted);
  border-color: var(--border2);
  min-height: 44px !important;
}
body.gp-practice .page-start-new:hover,
body.gp-practice .pp-tour-btn:hover { color: var(--sky); background: var(--practice-accent-wash); border-color: var(--sky); }
body.gp-practice .ai-badge-nav { background: transparent; color: var(--muted); border-color: var(--border); }
body.gp-practice .ai-dot { animation: none; }
body.gp-practice .session-bar { background: transparent; border-color: var(--border); flex-wrap: wrap; }
body.gp-practice .mode-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
body.gp-practice .mode-card {
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 184px;
  padding: 20px;
  background: var(--practice-card);
  border-radius: 16px;
  border-color: var(--border);
  text-align: start;
  box-shadow: none;
}
body.gp-practice .mode-card:hover { background: var(--bg2); border-color: var(--border2); box-shadow: none; }
body.gp-practice .mode-card.selected { background: var(--practice-accent-wash); border-color: var(--sky); box-shadow: none; }
body.gp-practice .mode-icon { color: var(--sky); background: var(--practice-accent-wash) !important; width: 40px; height: 40px; border-radius: 12px; }
body.gp-practice .mode-info { min-width: 0; }
body.gp-practice .mode-name { color: var(--text) !important; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
body.gp-practice .mode-desc { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
body.gp-practice .mode-arrow { color: var(--muted); align-self: flex-end; }
body.gp-practice .mode-spinner { border-color: var(--border); border-top-color: var(--sky); }
body.gp-practice .focus-panel { padding: 0; background: transparent; border: 0; }
body.gp-practice .focus-copy { font-size: 14px; margin-bottom: 20px; }
body.gp-practice .focus-controls { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
body.gp-practice .focus-select { margin-bottom: 20px; }
body.gp-practice .focus-select,
body.gp-practice .focus-prompt,
body.gp-practice .multi-input,
body.gp-practice .single-input {
  background-color: var(--bg);
  color: var(--text);
  border: 1px solid var(--border2) !important;
  border-radius: 12px;
  min-height: 52px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
body.gp-practice .focus-prompt,
body.gp-practice .multi-input { min-height: 104px; resize: vertical; }
body.gp-practice .focus-select:focus,
body.gp-practice .focus-prompt:focus,
body.gp-practice .multi-input:focus,
body.gp-practice .single-input:focus { border-color: var(--sky) !important; box-shadow: none; }
body.gp-practice .focus-prompt::placeholder,
body.gp-practice .multi-input::placeholder,
body.gp-practice .single-input::placeholder { color: var(--muted); opacity: 1; }
body.gp-practice .input-label,
body.gp-practice .instruction,
body.gp-practice .answer-box-label { display: block; color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: 0; }
body.gp-practice .instruction { font-size: 14px; }

body.gp-practice #exScreen,
body.gp-practice .grammar-result-card {
  background: var(--practice-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 24px;
}
body.gp-practice #exScreen .ex-card { background: transparent; border: 0; padding: 0; margin-bottom: 20px; }
body.gp-practice .broken-box,
body.gp-practice .blank-box,
body.gp-practice .drop-zone,
body.gp-practice .answer-box,
body.gp-practice .mistake-row { background: var(--bg); border-color: var(--border) !important; }
body.gp-practice .broken-text,
body.gp-practice .blank-sentence { color: var(--text); font-size: 22px; font-weight: 500; line-height: 1.7; overflow-wrap: anywhere; }
body.gp-practice .blank-slot { color: var(--sky); }
body.gp-practice .drop-zone { min-height: 92px; border-color: var(--border2) !important; padding: 14px; gap: 8px; }
body.gp-practice .drop-placeholder { color: var(--muted); font-size: 14px; }
body.gp-practice .word-tile { font-size: 16px; font-weight: 500; min-height: 44px; padding: 10px 14px; overflow-wrap: anywhere; max-width: 100%; }
body.gp-practice .word-tile.in-bank { color: var(--text); background: var(--practice-card); border-color: var(--border2); }
body.gp-practice .word-tile.in-sentence { color: var(--sky) !important; background: var(--practice-accent-wash) !important; border-color: var(--sky) !important; }
body.gp-practice .word-tile:hover { transform: none; border-color: var(--sky); }
body.gp-practice .hint-toggle { color: var(--muted); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; min-height: 44px; }
body.gp-practice .hint-toggle:hover { background: var(--surface2); color: var(--text); }
body.gp-practice .hint-box,
body.gp-practice .rule-box { background: var(--bg2); border-color: var(--border); }
body.gp-practice .hint-box,
body.gp-practice .rule-text { color: var(--text); }
body.gp-practice .badge-pill { background: var(--bg2) !important; color: var(--muted) !important; border-color: var(--border) !important; }

/* Runtime mode/score colours formerly filled the action buttons. Keep actions
   consistently indigo, while score and correction text retain status colours. */
body.gp-practice .focus-generate,
body.gp-practice .check-btn,
body.gp-practice .next-btn,
body.gp-practice .btn-r-submit,
body.gp-practice .gp-tour-action.primary {
  background: var(--sky) !important;
  color: var(--practice-on-accent);
  border: 1px solid transparent;
  border-radius: 999px;
  min-height: 48px;
  font-weight: 600;
  filter: none;
  box-shadow: none;
}
body.gp-practice .focus-generate:hover,
body.gp-practice .check-btn:hover:not(:disabled),
body.gp-practice .next-btn:hover,
body.gp-practice .btn-r-submit:hover,
body.gp-practice .gp-tour-action.primary:hover { background: var(--sky2) !important; color: var(--practice-on-accent); filter: none; }
body.gp-practice .check-btn:disabled { background: var(--bg3) !important; color: var(--muted); border-color: var(--border); opacity: 1; }
body.gp-practice .focus-random { min-height: 48px; background: transparent; color: var(--muted); border-color: var(--border2); border-radius: 999px; }
body.gp-practice .focus-random:hover { background: var(--surface2); color: var(--text); }
body.gp-practice .btn-spinner { border-top-color: currentColor; }
body.gp-practice .big-spinner { border-color: var(--border); border-top-color: var(--sky); }
body.gp-practice .ring-wrap { justify-content: flex-start; }
body.gp-practice .result-status-row { display: flex; justify-content: flex-start; }
body.gp-practice .correct-badge { margin-inline: 0; background: var(--bg2) !important; }
body.gp-practice .answer-box-text,
body.gp-practice .mistake-expected { color: var(--mint); }
body.gp-practice .mistake-found { color: var(--red); }
body.gp-practice .feedback-text,
body.gp-practice .rule-text,
body.gp-practice .mistake-explanation,
body.gp-practice .answer-box-text { overflow-wrap: anywhere; }
body.gp-practice .encouragement { color: var(--sky); text-align: start; }
body.gp-practice .report-link { color: var(--muted); margin-inline: 0; text-align: start; }
body.gp-practice .report-link:hover { color: var(--red); }
body.gp-practice .pp-sv-btn.saved { color: var(--mint); background: var(--bg2); border-color: var(--border); }
body.gp-practice .pp-sv-input { min-width: 0; font-size: 16px; background: var(--bg); }
body.gp-practice .pp-sv-add { background: var(--bg2); color: var(--text); border: 1px solid var(--border2); }
body.gp-practice .pp-sv-add:hover { background: var(--surface2); }
body.gp-practice .pp-sv-hint { color: var(--muted); }
body.gp-practice .ai-banner { margin: 28px 0 0; background: transparent; border-color: var(--border); color: var(--muted); font-size: 13px; align-items: flex-start; }
body.gp-practice .ai-banner-badge { background: var(--bg2); color: var(--muted); }
body.gp-practice .report-card,
body.gp-practice .gp-tour-card { background: var(--practice-card); border-color: var(--border); box-shadow: none; }
body.gp-practice .gp-tour-card h2,
body.gp-practice .gp-tour-card p { color: var(--text); }
body.gp-practice .gp-tour-close,
body.gp-practice .gp-tour-progress,
body.gp-practice .gp-tour-action { color: var(--muted); }
body.gp-practice .gp-tour-action { background: transparent; border-color: var(--border2); }
body.gp-practice .gp-tour-action:hover,
body.gp-practice .gp-tour-close:hover { color: var(--text); }
body.gp-practice .gp-tour-action.primary { color: var(--practice-on-accent); }
body.gp-practice .gp-tour-spotlight { border-color: var(--sky); background: transparent; box-shadow: 0 0 0 9999px rgba(0,0,0,.68); }

@media (max-width: 860px) {
  body.gp-practice #exScreen,
  body.gp-practice .grammar-result-card { padding: 20px; border-radius: 16px; }
  body.gp-practice .focus-controls { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 680px) {
  body.gp-practice .mode-grid { grid-template-columns: minmax(0,1fr); }
  body.gp-practice .mode-card { flex-direction: row; align-items: center; min-height: 100px; padding: 16px; }
  body.gp-practice .mode-icon { flex: 0 0 40px; }
  body.gp-practice .mode-arrow { align-self: center; }
  body.gp-practice .pp-sv-input-inner { flex-direction: column; }
}