/* ============================================================
   ENGLISH PRACTICE
   A focused exercise surface that replaces the former Grammar Lab.
   ============================================================ */

.english-practice-page {
  --practice-line:var(--border);
  --practice-surface:var(--bg-card);
  --practice-soft:var(--bg-secondary);
  --practice-wash:color-mix(in srgb,var(--accent) 9%,var(--bg-card));
  padding-bottom:64px;
}

.english-practice-hero {
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);
  gap:28px;
  align-items:center;
  margin-bottom:18px;
  padding:30px;
  border:1px solid var(--practice-line);
  border-radius:22px;
  color:var(--text-primary);
  background:linear-gradient(125deg,color-mix(in srgb,var(--accent) 12%,var(--practice-surface)),var(--practice-surface) 60%,color-mix(in srgb,var(--warning) 7%,var(--practice-surface)));
  box-shadow:0 18px 45px color-mix(in srgb,var(--text-primary) 8%,transparent);
}
.english-practice-kicker { display:flex; align-items:center; gap:7px; color:var(--accent); font-size:.66rem; font-weight:850; letter-spacing:.12em; }
.english-practice-kicker .material-icons { font-size:18px; }
.english-practice-hero h1 { margin-top:8px; font-size:clamp(2rem,4vw,3.25rem); line-height:1.02; letter-spacing:-.055em; }
.english-practice-hero p { max-width:720px; margin-top:12px; color:var(--text-secondary); font-size:.79rem; line-height:1.65; }
.english-practice-overview { display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; border:1px solid var(--practice-line); border-radius:16px; background:color-mix(in srgb,var(--bg-primary) 45%,transparent); }
.english-practice-overview>div { min-width:0; padding:17px 12px; text-align:center; }
.english-practice-overview>div+div { border-left:1px solid var(--practice-line); }
.english-practice-overview strong,.english-practice-overview span { display:block; }
.english-practice-overview strong { color:var(--text-primary); font-size:1.38rem; line-height:1; }
.english-practice-overview span { margin-top:6px; color:var(--text-muted); font-size:.56rem; font-weight:750; text-transform:uppercase; letter-spacing:.06em; }

.english-practice-insights { margin-bottom:18px; padding:18px; border:1px solid var(--practice-line); border-radius:18px; background:var(--practice-surface); }
.english-practice-insights-loading { display:flex; align-items:center; gap:9px; color:var(--text-muted); font-size:.68rem; }
.english-practice-insights-loading .material-icons { color:var(--accent); font-size:20px; }
.english-practice-insights-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:13px; }
.english-practice-insights-head>div { display:flex; align-items:center; gap:10px; }
.english-practice-insights-head>div>.material-icons { display:grid; width:38px; height:38px; place-items:center; border-radius:11px; color:var(--accent); background:var(--practice-wash); font-size:20px; }
.english-practice-insights-head small,.english-practice-insights-head h2 { display:block; }
.english-practice-insights-head small { color:var(--accent); font-size:.54rem; font-weight:850; letter-spacing:.1em; }
.english-practice-insights-head h2 { margin-top:3px; color:var(--text-primary); font-size:1rem; letter-spacing:-.02em; }
.english-practice-saved { display:flex; align-items:center; gap:5px; padding:6px 9px; border:1px solid var(--practice-line); border-radius:99px; color:var(--text-muted); background:var(--practice-soft); font-size:.57rem; font-weight:700; }
.english-practice-saved .material-icons { color:var(--success); font-size:15px; }
.english-practice-insight-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(190px,1.25fr); gap:8px; }
.english-practice-insight-grid article { min-width:0; padding:13px; border:1px solid var(--practice-line); border-radius:12px; background:var(--practice-soft); }
.english-practice-insight-grid article>small,.english-practice-insight-grid article>strong,.english-practice-insight-grid article>span { display:block; }
.english-practice-insight-grid article>small { color:var(--text-muted); font-size:.5rem; font-weight:850; letter-spacing:.08em; }
.english-practice-insight-grid article>strong { overflow:hidden; margin-top:5px; color:var(--text-primary); font-size:1.15rem; text-overflow:ellipsis; white-space:nowrap; }
.english-practice-insight-grid article>span { margin-top:3px; color:var(--text-muted); font-size:.55rem; line-height:1.45; }
.english-practice-insight-grid .english-practice-weakness>strong { color:var(--warning); font-size:.81rem; }
.english-practice-insight-grid .english-practice-weakness>.btn { display:inline-flex; width:auto; margin-top:8px; padding:5px 8px; font-size:.52rem; }
.english-practice-insight-grid .english-practice-weakness>.btn:disabled { cursor:not-allowed; opacity:.45; }
.english-practice-review-card { display:grid; grid-column:1/-1; grid-template-columns:auto minmax(0,1fr) auto; gap:11px; align-items:center; background:linear-gradient(110deg,var(--practice-wash),var(--practice-soft))!important; }
.english-practice-review-card>.material-icons { color:var(--accent); font-size:28px; }
.english-practice-review-card>div small,.english-practice-review-card>div strong,.english-practice-review-card>div span { display:block; }
.english-practice-review-card>div small { color:var(--accent); font-size:.5rem; font-weight:850; letter-spacing:.08em; }
.english-practice-review-card>div strong { margin-top:2px; color:var(--text-primary); font-size:.76rem; }
.english-practice-review-card>div span { margin-top:2px; color:var(--text-muted); font-size:.56rem; }
.english-practice-review-card .btn { white-space:nowrap; }
.english-practice-review-card .btn:disabled { cursor:not-allowed; opacity:.45; }

.english-practice-picker { margin-bottom:18px; padding:20px; border:1px solid var(--practice-line); border-radius:18px; background:var(--practice-surface); }
.english-practice-picker-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:15px; }
.english-practice-picker-head span { color:var(--accent); font-size:.58rem; font-weight:850; letter-spacing:.11em; }
.english-practice-picker-head h2 { margin-top:4px; color:var(--text-primary); font-size:1.18rem; letter-spacing:-.025em; }
.english-practice-picker-head p { max-width:440px; color:var(--text-muted); font-size:.65rem; line-height:1.55; text-align:right; }
.english-practice-level-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:13px; padding:11px; border:1px solid var(--practice-line); border-radius:13px; background:var(--practice-soft); }
.english-practice-level-bar>div:first-child { display:flex; align-items:center; gap:8px; min-width:170px; }
.english-practice-level-bar>div:first-child>.material-icons { display:grid; width:31px; height:31px; place-items:center; border-radius:9px; color:var(--accent); background:var(--practice-wash); font-size:17px; }
.english-practice-level-bar small,.english-practice-level-bar strong { display:block; }
.english-practice-level-bar small { color:var(--text-muted); font-size:.47rem; font-weight:850; letter-spacing:.08em; }
.english-practice-level-bar strong { margin-top:2px; color:var(--text-primary); font-size:.64rem; }
.english-practice-level-options { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.english-practice-level { display:grid; gap:1px; min-width:105px; padding:7px 9px; border:1px solid var(--practice-line); border-radius:9px; color:var(--text-primary); background:var(--practice-surface); font:inherit; text-align:left; cursor:pointer; }
.english-practice-level span { font-size:.61rem; font-weight:800; }
.english-practice-level small { color:var(--text-muted); font-size:.46rem; font-weight:600; letter-spacing:0; }
.english-practice-level:hover { border-color:color-mix(in srgb,var(--accent) 48%,var(--practice-line)); }
.english-practice-level.is-active { border-color:var(--accent); color:var(--accent); background:var(--practice-wash); box-shadow:inset 0 -2px 0 var(--accent); }
.english-practice-catalog { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:8px; }
.english-practice-mode { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:9px; align-items:center; min-height:72px; padding:10px; border:1px solid var(--practice-line); border-radius:12px; color:var(--text-primary); background:var(--practice-soft); font:inherit; text-align:left; cursor:pointer; }
.english-practice-mode:hover { border-color:color-mix(in srgb,var(--accent) 48%,var(--practice-line)); background:var(--practice-wash); }
.english-practice-mode:disabled { cursor:not-allowed; opacity:.5; }
.english-practice-mode:disabled:hover { border-color:var(--practice-line); background:var(--practice-soft); }
.english-practice-mode:focus-visible,.english-practice-option:focus-visible,.english-practice-token:focus-visible,.english-practice-session button:focus-visible,.english-practice-typed input:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 42%,transparent); outline-offset:2px; }
.english-practice-mode>.material-icons { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; color:var(--accent); background:var(--practice-wash); font-size:18px; }
.english-practice-mode>span:nth-child(2) { min-width:0; }
.english-practice-mode b,.english-practice-mode small { display:block; }
.english-practice-mode b { overflow:hidden; color:var(--text-primary); font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }
.english-practice-mode small { overflow:hidden; margin-top:3px; color:var(--text-muted); font-size:.55rem; text-overflow:ellipsis; white-space:nowrap; }
.english-practice-mode em { padding:4px 7px; border-radius:99px; color:var(--text-muted); background:var(--bg-card); font-size:.52rem; font-style:normal; font-weight:750; white-space:nowrap; }
.english-practice-mode.is-active { border-color:color-mix(in srgb,var(--accent) 55%,var(--practice-line)); background:var(--practice-wash); box-shadow:inset 3px 0 0 var(--accent); }
.english-practice-mode.is-active em { color:var(--accent); }

.english-practice-content { min-height:360px; }
.english-practice-session { display:grid; gap:10px; }
.english-practice-session-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 15px; border:1px solid var(--practice-line); border-radius:14px; background:var(--practice-surface); }
.english-practice-session-head>div { display:flex; align-items:center; gap:9px; }
.english-practice-session-head>div>.material-icons { display:grid; width:35px; height:35px; place-items:center; border-radius:10px; color:var(--accent); background:var(--practice-wash); font-size:19px; }
.english-practice-session-head small,.english-practice-session-head strong { display:block; }
.english-practice-session-head small { color:var(--text-muted); font-size:.51rem; font-weight:800; letter-spacing:.08em; }
.english-practice-session-head strong { margin-top:2px; color:var(--text-primary); font-size:.78rem; }
.english-practice-session-head .btn { display:inline-flex; align-items:center; gap:5px; }
.english-practice-session-head .material-icons { font-size:16px; }
.english-practice-progress { height:5px; overflow:hidden; border-radius:99px; background:color-mix(in srgb,var(--accent) 10%,var(--practice-line)); }
.english-practice-progress span { display:block; height:100%; border-radius:inherit; background:var(--accent); }
.english-practice-stats { display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; border:1px solid var(--practice-line); border-radius:11px; background:var(--practice-soft); }
.english-practice-stats span { padding:9px 12px; color:var(--text-muted); font-size:.64rem; text-align:center; }
.english-practice-stats span+span { border-left:1px solid var(--practice-line); }
.english-practice-stats b { margin-left:4px; color:var(--text-primary); }

.english-practice-card { padding:24px; border:1px solid var(--practice-line); border-radius:18px; background:var(--practice-surface); box-shadow:0 12px 35px color-mix(in srgb,var(--text-primary) 6%,transparent); }
.english-practice-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:17px; }
.english-practice-card-head>span { display:flex; align-items:center; gap:6px; color:var(--accent); font-size:.65rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.english-practice-card-head .material-icons { font-size:18px; }
.english-practice-card-head em { padding:4px 9px; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--practice-line)); border-radius:99px; color:var(--accent); background:var(--practice-wash); font-size:.58rem; font-style:normal; font-weight:750; }
.english-practice-card h2 { margin:14px 0; color:var(--text-primary); font-size:1.12rem; line-height:1.5; letter-spacing:-.015em; }
.english-practice-context { display:flex; gap:8px; padding:11px 12px; border-left:3px solid var(--accent); border-radius:0 9px 9px 0; color:var(--text-secondary); background:var(--practice-wash); font-size:.74rem; line-height:1.55; }
.english-practice-context .material-icons { flex:none; color:var(--accent); font-size:18px; }
.english-practice-sentence { margin-bottom:16px; padding:14px; border:1px solid var(--practice-line); border-radius:11px; color:var(--text-primary); background:var(--practice-soft); font-size:.92rem; line-height:1.65; }
.english-practice-reading { margin:5px 0 15px; overflow:hidden; border:1px solid color-mix(in srgb,var(--warning) 28%,var(--practice-line)); border-radius:12px; background:color-mix(in srgb,var(--warning) 5%,var(--practice-surface)); }
.english-practice-reading header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 11px; border-bottom:1px solid color-mix(in srgb,var(--warning) 20%,var(--practice-line)); color:var(--warning); font-size:.66rem; }
.english-practice-reading header .material-icons { font-size:17px; }
.english-practice-reading p { padding:15px; color:var(--text-primary); font-size:.8rem; line-height:1.75; }
.english-practice-document-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }

.english-practice-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.english-practice-option { display:flex; align-items:flex-start; gap:10px; min-height:61px; padding:12px; border:1px solid var(--practice-line); border-radius:11px; color:var(--text-primary); background:var(--practice-soft); font:inherit; text-align:left; cursor:pointer; }
.english-practice-option:not(:disabled):hover { border-color:color-mix(in srgb,var(--accent) 50%,var(--practice-line)); background:var(--practice-wash); }
.english-practice-option>span { display:grid; flex:none; width:25px; height:25px; place-items:center; border-radius:8px; color:var(--accent); background:var(--practice-wash); font-size:.62rem; font-weight:850; }
.english-practice-option b { color:inherit; font-size:.76rem; font-weight:650; line-height:1.5; }
.english-practice-option:disabled { cursor:default; opacity:.58; }
.english-practice-option.is-correct { border-color:var(--success); background:color-mix(in srgb,var(--success) 10%,var(--practice-surface)); opacity:1; }
.english-practice-option.is-correct>span { color:#fff; background:var(--success); }
.english-practice-option.is-wrong { border-color:var(--danger); background:color-mix(in srgb,var(--danger) 9%,var(--practice-surface)); opacity:1; }
.english-practice-option.is-wrong>span { color:#fff; background:var(--danger); }
.english-practice-options.is-evidence { grid-template-columns:1fr; }
.english-practice-options.is-evidence .english-practice-option { min-height:54px; }
.english-practice-options.is-evidence .english-practice-option>span i { font-size:16px; }
.english-practice-multi { display:grid; gap:10px; }
.english-practice-multi-status { display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--practice-line)); border-radius:11px; color:var(--accent); background:var(--practice-wash); }
.english-practice-multi-status>.material-icons { font-size:20px; }
.english-practice-multi-status small,.english-practice-multi-status strong { display:block; }
.english-practice-multi-status small { font-size:.49rem; font-weight:850; letter-spacing:.08em; }
.english-practice-multi-status strong { margin-top:2px; color:var(--text-primary); font-size:.68rem; }
.english-practice-options.is-multi .english-practice-option.is-selected { border-color:var(--accent); color:var(--accent); background:var(--practice-wash); box-shadow:inset 0 0 0 1px var(--accent); }
.english-practice-options.is-multi .english-practice-option.is-selected>span { color:#fff; background:var(--accent); }
.english-practice-multi-check { justify-self:end; }
.english-practice-multi-check:disabled { cursor:not-allowed; opacity:.45; }

.english-practice-table-wrap { margin:5px 0 15px; overflow-x:auto; border:1px solid var(--practice-line); border-radius:12px; background:var(--practice-surface); }
.english-practice-table { width:100%; min-width:440px; border-collapse:collapse; color:var(--text-primary); font-size:.7rem; }
.english-practice-table caption { padding:10px 12px; color:var(--accent); background:var(--practice-wash); font-size:.62rem; font-weight:850; letter-spacing:.05em; text-align:left; text-transform:uppercase; }
.english-practice-table th,.english-practice-table td { padding:10px 12px; border-top:1px solid var(--practice-line); text-align:left; }
.english-practice-table thead th { color:var(--text-secondary); background:var(--practice-soft); font-size:.58rem; letter-spacing:.04em; text-transform:uppercase; }
.english-practice-table tbody th { color:var(--accent); font-weight:800; }
.english-practice-table tbody tr:hover { background:var(--practice-wash); }

.english-practice-pair { display:grid; gap:10px; }
.english-practice-pair-guide { display:flex; align-items:center; gap:7px; color:var(--text-muted); font-size:.61rem; }
.english-practice-pair-guide .material-icons { color:var(--accent); font-size:17px; }
.english-practice-pair-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:10px; }
.english-practice-pair-column { display:grid; align-content:start; gap:7px; }
.english-practice-pair-item { display:grid; grid-template-columns:25px minmax(0,1fr) auto; gap:8px; align-items:center; min-height:54px; padding:9px 10px; border:1px solid var(--practice-line); border-radius:10px; color:var(--text-primary); background:var(--practice-soft); font:inherit; text-align:left; cursor:pointer; }
.english-practice-pair-item small { display:grid; width:25px; height:25px; place-items:center; border-radius:7px; color:var(--accent); background:var(--practice-wash); font-size:.57rem; font-weight:850; }
.english-practice-pair-item b { font-size:.65rem; line-height:1.4; }
.english-practice-pair-item>span { color:var(--text-muted); font-size:.62rem; }
.english-practice-pair-item>.material-icons { font-size:17px; }
.english-practice-pair-item:not(:disabled):hover,.english-practice-pair-item.is-selected { border-color:var(--accent); background:var(--practice-wash); }
.english-practice-pair-item.is-selected { box-shadow:inset 3px 0 0 var(--accent); }
.english-practice-pair-item.is-matched:not(.is-selected) { border-style:dashed; }
.english-practice-pair-item.is-correct { border-color:var(--success); background:color-mix(in srgb,var(--success) 9%,var(--practice-surface)); }
.english-practice-pair-item.is-wrong { border-color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,var(--practice-surface)); }
.english-practice-pair-check,.english-practice-sort-check { justify-self:end; }
.english-practice-pair-check:disabled,.english-practice-sort-check:disabled { cursor:not-allowed; opacity:.45; }

.english-practice-sort { display:grid; gap:10px; }
.english-practice-sort-head { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.english-practice-sort-head span { display:flex; align-items:center; gap:7px; padding:9px 11px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--practice-line)); border-radius:10px; color:var(--accent); background:var(--practice-wash); font-size:.65rem; font-weight:800; }
.english-practice-sort-head small { display:grid; width:22px; height:22px; place-items:center; border-radius:6px; color:#fff; background:var(--accent); font-size:.54rem; }
.english-practice-sort-items { display:grid; gap:7px; }
.english-practice-sort-item { display:grid; grid-template-columns:minmax(130px,1fr) minmax(220px,1.4fr); gap:10px; align-items:center; padding:9px 10px; border:1px solid var(--practice-line); border-radius:10px; background:var(--practice-soft); }
.english-practice-sort-item>b { font-size:.67rem; }
.english-practice-sort-item>div { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.english-practice-sort-item button { padding:7px 8px; border:1px solid var(--practice-line); border-radius:8px; color:var(--text-secondary); background:var(--practice-surface); font:inherit; font-size:.58rem; font-weight:700; cursor:pointer; }
.english-practice-sort-item button:not(:disabled):hover,.english-practice-sort-item button.is-selected { border-color:var(--accent); color:var(--accent); background:var(--practice-wash); }
.english-practice-sort-item.is-correct { border-color:var(--success); background:color-mix(in srgb,var(--success) 8%,var(--practice-surface)); }
.english-practice-sort-item.is-wrong { border-color:var(--danger); background:color-mix(in srgb,var(--danger) 7%,var(--practice-surface)); }

.english-practice-insertion { display:grid; gap:10px; }
.english-practice-insert-card { display:flex; align-items:flex-start; gap:9px; padding:12px; border:1px solid color-mix(in srgb,var(--accent) 35%,var(--practice-line)); border-radius:11px; color:var(--accent); background:var(--practice-wash); }
.english-practice-insert-card>.material-icons { flex:none; font-size:20px; }
.english-practice-insert-card small,.english-practice-insert-card strong { display:block; }
.english-practice-insert-card small { font-size:.48rem; font-weight:850; letter-spacing:.08em; }
.english-practice-insert-card strong { margin-top:3px; color:var(--text-primary); font-size:.7rem; line-height:1.5; }
.english-practice-insert-passage { padding:15px; border:1px solid var(--practice-line); border-radius:11px; color:var(--text-primary); background:var(--practice-soft); }
.english-practice-insert-passage p { font-size:.74rem; line-height:2.35; }
.english-practice-insert-passage button { display:inline-flex; align-items:center; gap:4px; margin:0 3px; padding:4px 7px; border:1px dashed var(--accent); border-radius:7px; color:var(--accent); background:var(--practice-wash); font:inherit; font-size:.53rem; font-weight:750; cursor:pointer; vertical-align:middle; }
.english-practice-insert-passage button span { display:grid; width:18px; height:18px; place-items:center; border-radius:5px; color:#fff; background:var(--accent); }
.english-practice-insert-passage button:not(:disabled):hover { border-style:solid; transform:translateY(-1px); }
.english-practice-insert-passage button.is-correct { border-color:var(--success); color:var(--success); background:color-mix(in srgb,var(--success) 9%,var(--practice-surface)); }
.english-practice-insert-passage button.is-correct span { background:var(--success); }
.english-practice-insert-passage button.is-wrong { border-color:var(--danger); color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,var(--practice-surface)); }
.english-practice-insert-passage button.is-wrong span { background:var(--danger); }

.english-practice-verdict { display:grid; gap:10px; }
.english-practice-verdict blockquote { padding:13px 14px; border-left:3px solid var(--accent); border-radius:0 10px 10px 0; background:var(--practice-wash); }
.english-practice-verdict blockquote small,.english-practice-verdict blockquote strong { display:block; }
.english-practice-verdict blockquote small { color:var(--accent); font-size:.49rem; font-weight:850; letter-spacing:.08em; }
.english-practice-verdict blockquote strong { margin-top:5px; color:var(--text-primary); font-size:.76rem; line-height:1.55; }
.english-practice-verdict>div { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.english-practice-verdict button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:48px; padding:9px; border:1px solid var(--practice-line); border-radius:10px; color:var(--text-primary); background:var(--practice-soft); font:inherit; cursor:pointer; }
.english-practice-verdict button .material-icons { color:var(--accent); font-size:18px; }
.english-practice-verdict button b { font-size:.62rem; }
.english-practice-verdict button:not(:disabled):hover { border-color:var(--accent); background:var(--practice-wash); }
.english-practice-verdict button.is-correct { border-color:var(--success); color:var(--success); background:color-mix(in srgb,var(--success) 9%,var(--practice-surface)); }
.english-practice-verdict button.is-wrong { border-color:var(--danger); color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,var(--practice-surface)); }

.english-practice-form-card { display:grid; grid-template-columns:1fr 1fr; gap:1px; overflow:hidden; margin-bottom:10px; border:1px solid var(--practice-line); border-radius:11px; background:var(--practice-line); }
.english-practice-form-card>div { min-height:57px; padding:10px 12px; background:var(--practice-soft); }
.english-practice-form-card small,.english-practice-form-card strong { display:block; }
.english-practice-form-card small { color:var(--text-muted); font-size:.48rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.english-practice-form-card strong { margin-top:4px; color:var(--text-primary); font-size:.7rem; }
.english-practice-form-card .is-blank { background:var(--practice-wash); }
.english-practice-form-card .is-blank strong { color:var(--accent); font-style:italic; }

.english-practice-typed { display:grid; gap:8px; padding:14px; border:1px solid var(--practice-line); border-radius:12px; background:var(--practice-soft); }
.english-practice-typed label { display:flex; align-items:center; gap:6px; color:var(--text-secondary); font-size:.65rem; font-weight:750; }
.english-practice-typed label .material-icons { color:var(--accent); font-size:18px; }
.english-practice-typed>div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.english-practice-typed input { min-width:0; padding:12px 13px; border:1px solid var(--practice-line); border-radius:10px; color:var(--text-primary); background:var(--practice-surface); font:inherit; font-size:.79rem; }
.english-practice-typed input::placeholder { color:var(--text-muted); }
.english-practice-typed input.is-correct { border-color:var(--success); background:color-mix(in srgb,var(--success) 8%,var(--practice-surface)); }
.english-practice-typed input.is-wrong { border-color:var(--danger); background:color-mix(in srgb,var(--danger) 7%,var(--practice-surface)); }
.english-practice-typed input.is-review { border-color:var(--warning); background:color-mix(in srgb,var(--warning) 7%,var(--practice-surface)); }
.english-practice-typed small { color:var(--text-muted); font-size:.55rem; line-height:1.45; }

.english-practice-bank { display:grid; gap:10px; }
.english-practice-bank-slot { display:flex; align-items:center; gap:9px; min-height:58px; padding:11px 13px; border:1px dashed color-mix(in srgb,var(--accent) 38%,var(--practice-line)); border-radius:11px; color:var(--text-muted); background:var(--practice-wash); }
.english-practice-bank-slot>.material-icons { flex:none; color:var(--accent); font-size:21px; }
.english-practice-bank-slot small,.english-practice-bank-slot strong { display:block; }
.english-practice-bank-slot small { font-size:.48rem; font-weight:850; letter-spacing:.09em; }
.english-practice-bank-slot strong { margin-top:3px; color:var(--text-muted); font-size:.74rem; line-height:1.45; }
.english-practice-bank-slot.has-answer { border-style:solid; }
.english-practice-bank-slot.has-answer strong { color:var(--text-primary); }
.english-practice-bank-options { display:flex; flex-wrap:wrap; gap:7px; }
.english-practice-bank-chip { padding:9px 12px; border:1px solid var(--practice-line); border-radius:99px; color:var(--text-primary); background:var(--practice-soft); font:inherit; font-size:.69rem; font-weight:650; cursor:pointer; }
.english-practice-bank-chip:not(:disabled):hover,.english-practice-bank-chip.is-selected { border-color:var(--accent); color:var(--accent); background:var(--practice-wash); }
.english-practice-bank-chip.is-correct { border-color:var(--success); color:var(--success); background:color-mix(in srgb,var(--success) 9%,var(--practice-surface)); }
.english-practice-bank-chip.is-wrong { border-color:var(--danger); color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,var(--practice-surface)); }
.english-practice-bank-chip:disabled { cursor:default; }
.english-practice-bank-check { justify-self:end; }
.english-practice-bank-check:disabled { cursor:not-allowed; opacity:.45; }

.english-practice-error-task { display:grid; gap:9px; }
.english-practice-error-task>span { display:flex; align-items:center; gap:6px; color:var(--text-muted); font-size:.61rem; font-weight:700; }
.english-practice-error-task>span .material-icons { color:var(--accent); font-size:17px; }
.english-practice-error-task>div { display:flex; flex-wrap:wrap; gap:7px; padding:14px; border:1px solid var(--practice-line); border-radius:11px; background:var(--practice-soft); }
.english-practice-error-task button { padding:8px 10px; border:0; border-bottom:2px solid color-mix(in srgb,var(--accent) 30%,var(--practice-line)); border-radius:7px; color:var(--text-primary); background:var(--practice-surface); font:inherit; font-size:.76rem; font-weight:650; cursor:pointer; }
.english-practice-error-task button:not(:disabled):hover { border-color:var(--accent); color:var(--accent); }
.english-practice-error-task button.is-correct { border-color:var(--success); color:var(--success); background:color-mix(in srgb,var(--success) 9%,var(--practice-surface)); }
.english-practice-error-task button.is-wrong { border-color:var(--danger); color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,var(--practice-surface)); }
.english-practice-error-task button:disabled { cursor:default; }

.english-practice-order-answer { min-height:55px; padding:14px; border:1px dashed color-mix(in srgb,var(--accent) 40%,var(--practice-line)); border-radius:11px; color:var(--text-primary); background:var(--practice-wash); font-size:.86rem; font-weight:650; line-height:1.55; }
.english-practice-order-answer span { color:var(--text-muted); font-weight:500; }
.english-practice-order-answer.is-process { display:grid; gap:7px; }
.english-practice-order-answer.is-process b { display:grid; grid-template-columns:24px minmax(0,1fr); gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--practice-line); border-radius:9px; background:var(--practice-surface); font-size:.72rem; }
.english-practice-order-answer.is-process b small { display:grid; width:24px; height:24px; place-items:center; border-radius:50%; color:var(--accent); background:var(--practice-wash); font-size:.62rem; }
.english-practice-tokens { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.english-practice-token { padding:8px 11px; border:1px solid var(--practice-line); border-radius:9px; color:var(--text-primary); background:var(--practice-soft); font:inherit; font-size:.74rem; font-weight:650; cursor:pointer; }
.english-practice-token:not(:disabled):hover { border-color:var(--accent); color:var(--accent); }
.english-practice-token:disabled,.english-practice-token.is-picked { color:var(--text-muted); cursor:default; opacity:.55; }
.english-practice-order-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:13px; }
.english-practice-order-actions .btn:disabled,.english-practice-card footer .btn:disabled { cursor:not-allowed; opacity:.45; }

.english-practice-feedback { display:flex; align-items:flex-start; gap:8px; margin-top:15px; color:var(--text-secondary); font-size:.74rem; line-height:1.6; }
.english-practice-feedback:empty { display:none; }
.english-practice-feedback .material-icons { flex:none; font-size:18px; }
.english-practice-feedback.is-correct,.english-practice-feedback.is-wrong,.english-practice-feedback.is-review { padding:12px; border-radius:10px; }
.english-practice-feedback.is-correct { border:1px solid color-mix(in srgb,var(--success) 35%,var(--practice-line)); color:var(--success); background:color-mix(in srgb,var(--success) 8%,var(--practice-surface)); }
.english-practice-feedback.is-wrong { border:1px solid color-mix(in srgb,var(--warning) 38%,var(--practice-line)); color:var(--warning); background:color-mix(in srgb,var(--warning) 8%,var(--practice-surface)); }
.english-practice-feedback.is-review { border:1px solid color-mix(in srgb,var(--accent) 32%,var(--practice-line)); color:var(--text-primary); background:color-mix(in srgb,var(--accent) 7%,var(--practice-surface)); }
.english-practice-card footer { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; padding-top:15px; border-top:1px solid var(--practice-line); }
.english-practice-card footer small { color:var(--text-muted); font-size:.61rem; }

.english-practice-complete { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:17px; align-items:center; padding:27px; border:1px solid color-mix(in srgb,var(--success) 38%,var(--practice-line)); border-radius:18px; background:linear-gradient(120deg,color-mix(in srgb,var(--success) 10%,var(--practice-surface)),var(--practice-surface)); }
.english-practice-complete>.material-icons { color:var(--success); font-size:42px; }
.english-practice-complete span { color:var(--success); font-size:.61rem; font-weight:850; letter-spacing:.09em; }
.english-practice-complete h2 { margin:4px 0; color:var(--text-primary); font-size:1.35rem; }
.english-practice-complete p { color:var(--text-secondary); font-size:.68rem; }
.english-practice-complete-actions { display:flex; gap:8px; }
.english-practice-empty { display:flex; align-items:center; gap:10px; padding:22px; border:1px dashed var(--practice-line); border-radius:14px; color:var(--text-secondary); background:var(--practice-soft); }
.english-practice-empty .material-icons { color:var(--accent); }
.english-practice-review-empty { justify-content:space-between; }
.english-practice-review-empty h2 { color:var(--text-primary); font-size:.92rem; }
.english-practice-review-empty p { margin-top:3px; font-size:.64rem; }

@media (max-width:980px) {
  .english-practice-hero { grid-template-columns:1fr; }
  .english-practice-overview { max-width:520px; }
  .english-practice-insight-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .english-practice-page { padding-inline:13px; }
  .english-practice-hero { padding:23px 19px; border-radius:18px; }
  .english-practice-hero h1 { font-size:2.15rem; }
  .english-practice-picker { padding:15px; }
  .english-practice-insights { padding:15px; }
  .english-practice-insights-head { align-items:flex-start; flex-direction:column; }
  .english-practice-insight-grid { grid-template-columns:1fr 1fr; }
  .english-practice-review-card { display:grid; grid-template-columns:auto minmax(0,1fr); }
  .english-practice-review-card .btn { grid-column:1/-1; width:100%; justify-content:center; }
  .english-practice-picker-head { align-items:flex-start; flex-direction:column; }
  .english-practice-picker-head p { text-align:left; }
  .english-practice-level-bar { align-items:stretch; flex-direction:column; }
  .english-practice-level-options { display:grid; grid-template-columns:1fr 1fr; }
  .english-practice-level { min-width:0; }
  .english-practice-catalog { grid-template-columns:1fr 1fr; }
  .english-practice-mode { grid-template-columns:32px minmax(0,1fr); min-height:65px; }
  .english-practice-mode em,.english-practice-mode small { display:none; }
  .english-practice-card { padding:17px 14px; }
  .english-practice-options,.english-practice-document-grid { grid-template-columns:1fr; }
  .english-practice-card footer,.english-practice-session-head,.english-practice-complete { align-items:stretch; flex-direction:column; }
  .english-practice-card footer { display:flex; }
  .english-practice-card footer .btn,.english-practice-session-head .btn { width:100%; justify-content:center; }
  .english-practice-complete { display:flex; }
  .english-practice-complete-actions { flex-direction:column; }
  .english-practice-review-empty { align-items:stretch; flex-direction:column; }
  .english-practice-order-actions { justify-content:stretch; }
  .english-practice-order-actions .btn { flex:1; padding-inline:7px; font-size:.64rem; }
  .english-practice-typed>div { grid-template-columns:1fr; }
  .english-practice-typed .btn,.english-practice-bank-check { width:100%; justify-content:center; }
  .english-practice-multi-check { width:100%; justify-content:center; }
  .english-practice-pair-grid { grid-template-columns:1fr; }
  .english-practice-pair-check,.english-practice-sort-check { width:100%; justify-content:center; }
  .english-practice-sort-item { grid-template-columns:1fr; }
  .english-practice-verdict>div { grid-template-columns:1fr; }
}
@media (max-width:430px) {
  .english-practice-overview>div { padding:13px 7px; }
  .english-practice-overview strong { font-size:1.08rem; }
  .english-practice-catalog { grid-template-columns:1fr; }
  .english-practice-level-options { grid-template-columns:1fr; }
  .english-practice-insight-grid { grid-template-columns:1fr; }
  .english-practice-review-card { grid-column:auto; }
  .english-practice-stats span { padding-inline:5px; }
}