/* ══════════════════════════════════════════════════════════════════════
   RL self-serve hub — rl/index.css
   Practice Room + Test Room + drafts-resume + self-test history ONLY
   (class homework lives in the separate Homework Hub app — see the header
   comment in rl/index.js). Reuses theme.css custom properties so light/dark
   themes Just Work. hw-* prefix kept for the pieces inherited from the old
   shared homework-hub layout (hero/gate/buttons/practice panel); tr-*/pr-*/
   hw-hist-* are new, purpose-built for this page's own req #11/#13/#14.
   ══════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Space Grotesk", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ── Layout wrap ──────────────────────────────────────────────────────── */
.hw-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 18px 72px;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hw-hero { text-align: center; padding: 28px 0 18px; }
.hw-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
}
.hw-title {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  margin: 6px 0 12px;
  letter-spacing: -.02em;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hw-sub { color: var(--text2); max-width: 560px; margin: 0 auto; line-height: 1.6; }

/* ── Plain-language note: class homework lives in the Homework Hub, not
   here — this page is self-serve (Practice Room + Test Room) only. ──── */
.hw-hub-note {
  font-size: .82rem;
  color: var(--dim);
  max-width: 560px;
  margin: 10px auto 0;
  line-height: 1.6;
}
.hw-hub-note a { color: var(--teal); text-decoration: none; font-weight: 600; }
.hw-hub-note a:hover { text-decoration: underline; }

/* ── Dim / empty state ────────────────────────────────────────────────── */
.hw-dim { text-align: center; color: var(--dim); padding: 48px 0; font-size: .95rem; }

/* ── Gate panel ───────────────────────────────────────────────────────── */
.hw-gate-panel {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--r, 14px);
  padding: 36px 28px;
  text-align: center;
  max-width: 480px;
  margin: 48px auto;
}
.hw-gate-icon { font-size: 2.4rem; margin-bottom: 12px; }
.hw-gate-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; }
.hw-gate-body { color: var(--text2); font-size: .92rem; line-height: 1.55; margin-bottom: 20px; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.hw-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: opacity .15s, transform .12s;
}
.hw-btn:hover { opacity: .88; transform: translateY(-1px); }
.hw-btn-primary { background: var(--grad, linear-gradient(135deg,#7C5CBF,#5B3FA0)); color: #fff; }
.hw-btn-sm { padding: 7px 13px; font-size: .84rem; }

/* ── Practice Room panel ──────────────────────────────────────────────── */
.hw-practice-panel {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--r, 14px);
  margin: 4px 0 18px;
  overflow: hidden;
}
.hw-practice-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
}
.hw-practice-toggle-icon { font-size: 1.4rem; }
.hw-practice-toggle-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hw-practice-toggle-title { font-weight: 700; font-size: .98rem; }
.hw-practice-toggle-sub { font-size: .8rem; color: var(--dim); }
.hw-practice-toggle-caret { color: var(--dim); font-size: .9rem; }
.hw-practice-toggle:hover .hw-practice-toggle-title { color: var(--teal); }

/* ── "Đang làm dở" saved-draft list (above the picker, always visible) ── */
.hw-pr-drafts { padding: 4px 18px 14px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--border); }
.hw-pr-drafts-lbl { font-size: .78rem; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.hw-pr-draft-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.hw-pr-draft-info { flex: 1; min-width: 0; }
.hw-pr-draft-title { font-size: .9rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-pr-draft-sub { font-size: .78rem; color: var(--dim); margin-top: 2px; }
.hw-pr-draft-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.hw-pr-draft-del {
  background: none;
  border: 1px solid var(--border);
  color: var(--dim);
  border-radius: 999px;
  width: 30px; height: 30px;
  font-size: .85rem;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.hw-pr-draft-del:hover { border-color: #ef4444; color: #ef4444; }

.hw-practice-body { padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.hw-pr-row { display: flex; flex-direction: column; gap: 8px; }
.hw-pr-lbl { font-size: .78rem; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.hw-pr-choices { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hw-pr-chip {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.hw-pr-chip:hover { border-color: var(--teal); color: var(--text); }
.hw-pr-chip-on { background: var(--grad, linear-gradient(135deg,#7C5CBF,#5B3FA0)); border-color: transparent; color: #fff; }
.hw-pr-custom-mins {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: .85rem;
  width: 108px;
}
.hw-pr-go { padding-top: 4px; }

/* ── Secondary ("ghost") button — outline style for non-primary actions
   (Xem lại / Tiếp tục rows) beside .hw-btn-primary. ─────────────────── */
.hw-btn-ghost {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text2);
}
.hw-btn-ghost:hover { border-color: var(--teal); color: var(--text); opacity: 1; }

/* ── Band chips — mirror testplayer/band.js's TPBand.bandClass() coloring
   (high ≥7 green / mid ≥5 amber / low red / pending grey) so a band shown
   here reads the same as the one on the test player's results screen. ── */
.rl-band-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.rl-band-high    { background: rgba(34,197,94,.13);   color: #22c55e; }
.rl-band-mid     { background: rgba(245,166,35,.14);  color: #F5A623; }
.rl-band-low     { background: rgba(239,68,68,.1);    color: #ef4444; }
.rl-band-pending { background: rgba(168,154,204,.15); color: var(--dim); }
/* Assigned-homework status chips (rl/index.js ASG_STATUS) — reuse the chip
   shape so a status and a band read as the same class of thing in one row. */
.rl-band-todo    { background: rgba(124,92,191,.16);  color: #7C5CBF; }
.rl-band-doing   { background: rgba(245,166,35,.14);  color: #F5A623; }
.rl-band-graded  { background: rgba(34,197,94,.13);   color: #22c55e; }

/* ══ TEST ROOM — book picker + per-book test-card grid (req #13) ══════ */
.tr-book-picker, .tr-book-detail { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.tr-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.tr-book-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: border-color .15s, transform .12s;
}
.tr-book-card:hover { border-color: var(--teal); transform: translateY(-1px); }
.tr-book-card-title { font-weight: 700; font-size: .95rem; }
.tr-book-card-sub { font-size: .78rem; color: var(--dim); margin-top: 4px; }

.tr-back-btn {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--border);
  color: var(--dim);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.tr-back-btn:hover { border-color: var(--teal); color: var(--text); }
.tr-book-head { font-weight: 700; font-size: 1rem; }

.tr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.tr-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tr-card-skill { font-size: .74rem; font-weight: 700; }
.tr-card-skill-listening { color: #0EA5E9; }
.tr-card-skill-reading   { color: var(--accent); }
.tr-card-testno { font-size: .78rem; color: var(--dim); font-weight: 600; }
.tr-card-meta { font-size: .76rem; color: var(--dim); }
.tr-card-band { font-size: .78rem; font-weight: 700; padding: 3px 0; }
.tr-card-band-high    { color: #22c55e; }
.tr-card-band-mid     { color: #F5A623; }
.tr-card-band-low     { color: #ef4444; }
.tr-card-band-pending { color: var(--dim); }
.tr-card-acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* ══ PRACTICE ROOM — rail (book list + question-type filter + search) beside
   a compact passages/Parts list (req: group by Cambridge book, compact
   list, search box, persistent side rail on wide/landscape viewports that
   collapses to a drawer on narrow ones). Mobile-first: column stack +
   collapsible rail body below; the (min-width:720px) block turns it into a
   real side-by-side layout with the rail pinned open. ═══════════════════ */
.pr-layout { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }

.pr-rail { display: flex; flex-direction: column; }
.pr-rail-toggle {
  align-self: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
.pr-rail-toggle:hover { border-color: var(--teal); color: var(--text); }
.pr-rail-body { display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
.pr-rail-body.pr-rail-collapsed { display: none; }
.pr-rail-section { display: flex; flex-direction: column; gap: 6px; }
.pr-filter-lbl { font-size: .74rem; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.pr-chip-sm { padding: 5px 11px; font-size: .78rem; }
/* Difficulty filter hook — disabled until rl_tests gets a difficulty field
   (see prRailEl() comment in index.js). Kept visible-but-inert so the gap
   is legible instead of silently missing. */
.pr-filter-row-disabled { opacity: .55; }
.pr-filter-hook { font-size: .8rem; color: var(--dim); font-style: italic; }

.pr-search-inp {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: .86rem;
  width: 100%;
}
.pr-search-inp:focus { outline: none; border-color: var(--teal); }

.pr-book-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-book-item {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color .15s, color .15s;
}
.pr-book-item:hover { border-color: var(--teal); color: var(--text); }
.pr-book-item-on { background: var(--grad, linear-gradient(135deg,#7C5CBF,#5B3FA0)); border-color: transparent; color: #fff; }
.pr-book-count { font-size: .72rem; opacity: .8; }

.pr-main { min-width: 0; }
.pr-compact-list { display: flex; flex-direction: column; gap: 4px; }

/* ── Collapsible per-Test groups (req #3 — "must stay usable at 12+
   books"): only the group holding the current selection (or the first
   group, by default) starts expanded — see prTestExpanded() in index.js.
   Cuts the visible row count for a book down to ~1 Test's worth instead of
   every Test at once. ──────────────────────────────────────────────────── */
.pr-compact-testhead {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 10px 0 2px;
  font-family: inherit;
  font-size: .74rem; font-weight: 700; color: var(--dim); text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  text-align: left;
}
.pr-compact-testhead:first-child { margin-top: 0; }
.pr-compact-testhead:hover { color: var(--teal); }
.pr-compact-testhead-count { text-transform: none; font-weight: 600; opacity: .75; }

/* ── Compact row: a checkbox (multi-select within one test, req #8) beside
   a click-to-select-only main area (unchanged single-pick UX — clicking
   the row body replaces the whole selection with just this entry). ─────── */
.pr-compact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  width: 100%;
  transition: border-color .15s;
}
.pr-compact-row:hover { border-color: var(--teal); }
.pr-compact-row-on { border-color: var(--teal); background: var(--surf2, var(--bg)); }
.pr-compact-check { flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; accent-color: var(--teal); }
.pr-compact-check:disabled { cursor: not-allowed; opacity: .35; }
.pr-compact-row-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.pr-compact-row-badge { font-size: .72rem; font-weight: 700; color: var(--dim); flex-shrink: 0; }
.pr-compact-row-label { font-size: .86rem; font-weight: 600; color: var(--text); flex-shrink: 0; }
.pr-compact-row-heading { font-size: .82rem; color: var(--text2); flex: 1; min-width: 120px; }
.pr-compact-row-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pr-entry-qtag {
  font-size: .68rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(32,185,185,.12);
  color: var(--teal);
  border: 1px solid rgba(32,185,185,.28);
}

/* Landscape/desktop — persistent side rail beside a content-only main
   column (owner req: "use the side margins; landscape-first"). Below this,
   mobile portrait falls back to the stacked + collapsible drawer above. */
@media (min-width: 720px) {
  .pr-layout { flex-direction: row; align-items: flex-start; gap: 22px; }
  .pr-rail { width: 230px; flex-shrink: 0; position: sticky; top: 12px; }
  .pr-rail-toggle { display: none; }
  .pr-rail-body.pr-rail-collapsed { display: flex; }
  .pr-rail-body { padding-top: 0; }
  .pr-main { flex: 1; }
}

/* ══ TEST ROOM — skill toggle before book (req: Reading vs Listening asked
   up front instead of mixing both skills in one long book/test list) ═══ */
.tr-skill-picker { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.tr-skill-count { font-size: .74rem; opacity: .75; }
.hw-pr-chip:disabled { opacity: .4; cursor: not-allowed; }
.hw-pr-chip:disabled:hover { border-color: var(--border); color: var(--text2); }

/* ══ SECTION LIST — the row layout the collapsible sections use ═══════
   Replaces the old .hw-hist-grid index cards for the two history sections
   and the assigned-homework section. A history entry is a LOG LINE (title +
   a few facts + one action), not a tile: as a card grid it wrapped title
   text at 240px and forced the eye to scan in two dimensions for what is a
   plain reverse-chronological list. Rows scan in one. */
.hw-sec-list { display: flex; flex-direction: column; }
.hw-sec-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-top: 1px solid var(--border);
}
.hw-sec-list > .hw-sec-row:first-child { border-top: none; }
.hw-sec-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hw-sec-row-title {
  font-size: .92rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Title + "MỚI" badge on one line (rl/index.js asgRowEl) — scoped so the
   flex/min-width overrides below only kick in when .hw-sec-row-title is
   nested here, leaving its bare use elsewhere (history rows, etc.) alone. */
.hw-sec-row-title-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hw-sec-row-title-line .hw-sec-row-title { flex: 1; min-width: 0; }
/* "MỚI" — teacher just assigned this, student hasn't opened or started it
   (rl/index.js asgIsNew()). Distinct red from the band-chip palette above
   (none of those are red-on-white) so it reads as an alert, not a score. */
.rl-new-badge {
  display: inline-flex; align-items: center; flex-shrink: 0;
  font-size: .66rem; font-weight: 800; letter-spacing: .3px;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  color: #fff; background: #e0475c;
}
.hw-sec-row-meta {
  font-size: .78rem; color: var(--dim);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.hw-sec-row-acts { display: flex; align-items: center; gap: 6px; flex: none; }
/* Nested per-attempt lines, revealed by the row's own "Xem N lần làm" toggle */
.hw-sec-sub { display: flex; flex-direction: column; gap: 2px; padding: 4px 18px 10px 44px; }
.hw-sec-subrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: .8rem; padding: 4px 0;
}
.hw-sec-subrow-info { display: flex; gap: 8px; color: var(--text2); flex-wrap: wrap; }
.hw-sec-empty { padding: 14px 18px; font-size: .85rem; color: var(--dim); }
/* Count badge in a section header ("3 bài") */
.hw-sec-count {
  font-size: .74rem; font-weight: 700; color: var(--dim);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px; margin-left: 6px;
  vertical-align: middle;
}
.hw-sec-count-due { color: #fff; background: #b4530f; border-color: #b4530f; }

/* ══ ASSIGNED HOMEWORK — group by skill + sort (owner req #8, 2026-08-07),
   mirroring the group/sort/declutter language just applied to the teacher's
   OWN view of this same data (vocab/teacher/rl-manage.js "Ra đề R/L"). Native
   <details> — rl/index.js's asgRowEl list renders once per boot() and isn't
   repainted on unrelated events, so <details>'s own open/closed state needs
   no JS bookkeeping the way rl-manage.js's STATE.groupOpen does. ══════════ */
.hw-asg-toolbar { display: flex; justify-content: flex-end; padding: 2px 18px 10px; }
.hw-asg-sort { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--dim); }
.hw-asg-sort select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 9px;
  font-family: inherit;
  font-size: .8rem;
}
.hw-asg-group { border-top: 1px solid var(--border); }
.hw-asg-group:first-of-type { border-top: none; }
.hw-asg-group > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 10px 18px;
  font-weight: 700;
  font-size: .86rem;
  color: var(--text);
}
.hw-asg-group > summary::-webkit-details-marker { display: none; }
.hw-asg-group-caret { display: inline-block; color: var(--dim); font-size: .76rem; transition: transform .15s; }
.hw-asg-group[open] > summary .hw-asg-group-caret { transform: rotate(90deg); }

@media (max-width: 560px) {
  .hw-asg-toolbar { justify-content: flex-start; }

  .hw-sec-row { flex-wrap: wrap; }
  .hw-sec-row-acts { width: 100%; justify-content: flex-end; }
  .hw-sec-sub { padding-left: 18px; }
}

/* ══ SELF-TEST HISTORY grid (req #11) ════════════════════════════════ */
.hw-hist-section { margin-top: 22px; }
.hw-hist-heading { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
.hw-hist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.hw-hist-card {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--r, 14px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hw-hist-title { font-size: .95rem; font-weight: 700; }
.hw-hist-meta { font-size: .78rem; color: var(--dim); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hw-hist-toggle {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--teal);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.hw-hist-attempts { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; border-top: 1px solid var(--border); padding-top: 8px; }
.hw-hist-attempt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .8rem; }
.hw-hist-attempt-info { display: flex; gap: 8px; color: var(--text2); flex-wrap: wrap; }
.hw-hist-attempt-date { color: var(--dim); }
.hw-hist-attempt-band { font-weight: 600; }

/* ── Test Room reminder callout (rl/index.js renderTestRoomBody) ──────── */
.hw-tr-info {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: .82rem;
  color: var(--text2);
  line-height: 1.6;
}
.hw-tr-error {
  color: #ef4444;
  font-size: .82rem;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 10px;
  padding: 9px 12px;
}

@media (max-width: 520px) {
  .hw-wrap { padding: 18px 14px 60px; }
  .tr-book-grid, .tr-grid, .hw-hist-grid { grid-template-columns: 1fr 1fr; }
}

/* ══ Practice Room sticky selection/launch bar (req #3 + #8) — pinned to
   the viewport bottom (not just the panel bottom) so "Bắt đầu" is always
   reachable without scrolling the picker's list, however long it gets; also
   doubles as the multi-select summary + combined-launch surface. Lives
   outside hw-practice-body (see rl/index.html) so it survives that panel's
   clear+rebuild cycle. ════════════════════════════════════════════════ */
#hwPracticeSticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: var(--surf);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(0,0,0,.22);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.pr-sticky-inner { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.pr-sticky-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-sticky-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 6px 4px 10px;
  font-size: .8rem;
  color: var(--text);
}
.pr-sticky-chip-rm {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: .78rem;
  width: 18px; height: 18px;
  border-radius: 999px;
  line-height: 1;
}
.pr-sticky-chip-rm:hover { color: #ef4444; }
.pr-sticky-time { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pr-sticky-go { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pr-sticky-go .hw-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.pr-sticky-go .hw-btn:disabled:hover { opacity: .5; transform: none; }
.pr-sticky-note { font-size: .78rem; color: var(--dim); line-height: 1.5; }

/* Reserve room at the bottom of the page so the fixed bar never covers the
   last rows of the picker/history sections beneath it. */
body.pr-has-sticky .hw-wrap { padding-bottom: 176px; }