/* IELTS Listening & Reading: Mock page list + the exam player (static/lr-player.js). Phone first; desktop at 1024px+. */

/* ---------- Mock page: Writing | Listening & Reading switch ---------- */
.lr-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: #eceef6; }
.lr-switch button { min-height: 40px; border-radius: 999px; color: #4b5068; font-size: 13.5px; font-weight: 700; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.lr-switch button.on { background: #fff; color: var(--aura-ink); box-shadow: var(--aura-shadow-sm); }

.lr-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 12px 14px; border: 1.5px solid #eceef6; border-radius: 20px; background: #fff; text-align: left; font: inherit; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s var(--aura-ease); }
.lr-card:hover { border-color: #c7d2fe; box-shadow: 0 12px 24px -18px rgba(79, 70, 229, .7); }
.lr-card:active { transform: scale(.98); }
.lr-card-body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.lr-card-body b { color: var(--aura-ink); font-size: 15px; font-weight: 800; }
.lr-card-source { color: var(--aura-muted); font-size: 12px; }
.lr-card-go { color: #a5b4fc; font-size: 26px; line-height: 1; }
.lr-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid #eceef6; border-radius: 16px; background: #fafbff; text-align: left; }
.lr-row-live { border-color: #fde68a; background: #fffbeb; }
.lr-row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lr-row-main b { color: var(--aura-ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-row-meta { color: var(--aura-muted); font-size: 12px; }
.lr-band-chip { min-width: 44px; padding: 6px 10px; border-radius: 12px; background: var(--aura-night); color: #fff; font-size: 15px; font-weight: 800; text-align: center; }
.lr-pill { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.lr-pill-live { background: #f59e0b; color: #fff; }
/* "New" test: a flashing dot on the card, the Listening & Reading switch and the Mock tab */
.lr-new { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #fef2f2; color: #dc2626; font-size: 11px; font-weight: 800; vertical-align: 2px; }
.lr-new i, .lr-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: lr-flash 1.2s ease-in-out infinite; }
.lr-dot { position: absolute; top: 4px; right: 6px; display: block; box-shadow: 0 0 0 2px #fff; }
[data-mock-tab="lr"], .nav-btn[data-page="mock"] .nav-icon-wrap { position: relative; }
@keyframes lr-flash { 0%, 100% { opacity: 1; transform: scale(1); background: #ef4444; } 50% { opacity: .35; transform: scale(.8); background: #f59e0b; } }
.lr-check-bar { height: 6px; margin-top: 14px; border-radius: 999px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.lr-check-bar span { display: block; width: 35%; height: 100%; border-radius: 999px; background: #fff; animation: lr-slide 1.4s ease-in-out infinite; }
@keyframes lr-slide { from { transform: translateX(-110%); } to { transform: translateX(300%); } }
.lr-error { padding: 12px 14px; border-radius: 16px; background: #fef2f2; color: #b91c1c; font-size: 13px; }

/* Progress page card and teacher Class progress panel */
.lr-sub-title { margin: 16px 0 8px; color: var(--aura-ink); font-size: 13.5px; font-weight: 800; }
.lr-link { color: var(--aura-indigo); font-size: 13px; font-weight: 700; }
#lrProgress .lr-tiles { margin-bottom: 0; }
#lrProgress .lr-tile { box-shadow: none; background: #fafbff; }
#lrProgress .lr-type-bar span { background: #10b981; }
.p1-lr-avg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 12px; }
.p1-lr-avg div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 16px; background: #f8f9fc; }
.p1-lr-avg span { color: var(--aura-muted); font-size: 12px; font-weight: 700; }
.p1-lr-avg b { color: var(--aura-ink); font-size: 22px; font-weight: 800; }
.p1-lr-pair { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.p1-lr-pair small { color: var(--aura-muted); font-size: 11px; font-weight: 800; }
.p1-lr-cell { min-width: 42px; padding: 5px 8px; border-radius: 10px; background: var(--aura-night); color: #fff; font-size: 14px; font-weight: 800; text-align: center; }
.p1-lr-cell.is-empty { background: #f1f2f7; color: #9ca3af; }
.p1-lr-types { display: grid; gap: 10px; }
.p1-lr-type { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 14px; }
.p1-lr-type b { color: #b91c1c; font-size: 13px; }
.p1-lr-type i { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: #f1f2f7; overflow: hidden; }
.p1-lr-type em { display: block; height: 100%; border-radius: 999px; background: #f87171; }

/* ---------- Player shell ---------- */
html.lr-locked, html.lr-locked body { overflow: hidden; }
.lr-overlay { position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column; background: #fff; color: #111827; font-family: Inter, Arial, sans-serif; }
.lr-overlay.hidden { display: none; }
.lr-overlay button { font: inherit; cursor: pointer; }
:where(.lr-overlay button) { border: 0; background: transparent; color: inherit; }  /* pages without Tailwind's reset (admin preview) */
.lr-bar { display: flex; align-items: center; gap: 8px; min-height: 54px; padding: calc(env(safe-area-inset-top) + 6px) 10px 6px; border-bottom: 1px solid #e5e7eb; background: #fff; }
.lr-icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #374151; }
.lr-icon-btn:hover { background: #f3f4f6; }
.lr-bar-title { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.lr-bar-title b { font-size: 15px; font-weight: 800; color: var(--aura-ink); }
.lr-bar-title span { font-size: 12px; color: var(--aura-muted); }
.lr-timer { min-width: 66px; padding: 7px 10px; border-radius: 12px; background: #f1f5f9; color: var(--aura-ink); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; }
.lr-timer.hidden { display: none; }
.lr-timer-amber { background: #fef3c7; color: #92400e; }
.lr-timer-red { background: #fee2e2; color: #b91c1c; animation: lr-blink 1s steps(2) infinite; }
.lr-timer-practice { background: #ecfdf5; color: #047857; font-size: 13px; }
@keyframes lr-blink { 50% { opacity: .55; } }
.lr-submit { padding: 9px 16px; border-radius: 999px; background: var(--aura-brand); color: #fff; font-size: 14px; font-weight: 700; }
.lr-submit.hidden { display: none; }

.lr-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 8px 10px 0; padding: 4px; border-radius: 999px; background: #f1f2f7; }
.lr-tabs.hidden { display: none; }
.lr-tabs button { min-height: 36px; border-radius: 999px; color: #4b5068; font-size: 13.5px; font-weight: 700; }
.lr-tabs button.on { background: #fff; color: var(--aura-ink); box-shadow: var(--aura-shadow-sm); }

.lr-main { flex: 1; min-height: 0; display: flex; position: relative; }
.lr-overlay .lr-main.hidden { display: none !important; }
.lr-pane { flex: 1; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 16px 28px; }
.lr-divider { display: none; }
.lr-two-panes.lr-view-passage .lr-questions, .lr-two-panes.lr-view-questions .lr-passage { display: none; }
.lr-overlay:not(.lr-two-panes) .lr-passage { display: none; }

/* ---------- Listening audio bar ---------- */
.lr-audio { padding: 8px 10px; border-bottom: 1px solid #e5e7eb; background: #f8f9fc; }
.lr-audio.hidden { display: none; }
.lr-audio-start { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--aura-night); color: #fff; }
.lr-audio-start div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lr-audio-start b { font-size: 14px; }
.lr-audio-start div span { color: rgba(226, 232, 255, .8); font-size: 12px; line-height: 1.4; }
.lr-audio-go { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 10px 14px; border-radius: 999px; background: #fff; color: var(--aura-ink); font-size: 13.5px; font-weight: 800; }
.lr-audio-row { display: flex; align-items: center; gap: 8px; }
.lr-audio-btn, .lr-audio-speed { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #374151; }
.lr-audio-speed { width: auto; padding: 0 8px; font-size: 12.5px; font-weight: 800; background: #eef0f6; }
.lr-audio-main { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--aura-brand); color: #fff; }
.lr-audio-live { flex: 0 0 auto; width: 12px; height: 12px; margin: 0 6px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, .5); animation: lr-live 1.6s infinite; }
@keyframes lr-live { 70% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.lr-audio-track { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lr-audio-label { display: flex; justify-content: space-between; gap: 8px; color: #4b5563; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lr-audio-seek { width: 100%; accent-color: var(--aura-indigo); }
.lr-audio-seek:disabled { opacity: 1; }
.lr-audio-vol { display: none; align-items: center; gap: 4px; color: #4b5563; }
.lr-audio-vol input { width: 80px; accent-color: var(--aura-indigo); }
.lr-line-t.lr-playing { background: #eef2ff; border-radius: 10px; }

/* ---------- Passage ---------- */
.lr-passage { background: #fcfcfd; }
.lr-passage-kicker { margin: 0 0 4px; color: var(--aura-indigo); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.lr-passage-title { margin: 0 0 14px; color: var(--aura-ink); font-size: 21px; font-weight: 800; line-height: 1.25; }
.lr-passage-sub { margin: -8px 0 14px; color: var(--aura-muted); font-style: italic; }
.lr-para { margin: 0 0 14px; font-size: 16px; line-height: 1.72; }
.lr-para p { margin: 0; }
.lr-para-lettered { display: grid; grid-template-columns: 26px 1fr; gap: 6px; }
.lr-para-label { padding-top: 1px; color: var(--aura-indigo); font-weight: 800; }
.lr-s { border-radius: 4px; transition: background .3s ease; }
.lr-s.lr-hl { background: #fef3c7; box-shadow: 0 0 0 2px #fef3c7; }
.lr-s mark { background: #fcd34d; border-radius: 3px; padding: 0 1px; }
.lr-line-t { display: grid; grid-template-columns: 30px 1fr; gap: 6px; margin: 0 0 6px; padding: 4px 6px 4px 0; font-size: 15px; line-height: 1.6; }
.lr-play-from { width: 28px; height: 28px; border-radius: 50%; background: #eef2ff; color: var(--aura-indigo); font-size: 11px; }

/* ---------- Questions ---------- */
.lr-part-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.lr-part-head b { color: var(--aura-ink); font-size: 18px; font-weight: 800; }
.lr-part-head span { color: var(--aura-muted); font-size: 13px; }
.lr-part-instr { margin: 0 0 12px; color: #4b5563; font-size: 13.5px; }
.lr-group { margin: 0 0 18px; padding: 14px; border: 1px solid #eceef6; border-radius: 18px; background: #fff; }
.lr-group-range { margin: 0 0 4px; color: var(--aura-ink); font-size: 14px; font-weight: 800; }
.lr-group-instr { margin: 0 0 12px; color: #4b5563; font-size: 13.5px; line-height: 1.5; }
.lr-image { display: block; width: 100%; max-width: 520px; margin: 0 auto 12px; border-radius: 12px; border: 1px solid #eceef6; }
.lr-options { margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: #f8f9fc; font-size: 14px; line-height: 1.5; }
.lr-options p { display: grid; grid-template-columns: 34px 1fr; margin: 3px 0; }
.lr-options b { display: inline-block; min-width: 28px; color: var(--aura-indigo); }
.lr-options-title { font-weight: 800; color: var(--aura-ink); }

.lr-q { padding: 10px 0; border-top: 1px solid #f1f2f7; border-radius: 10px; transition: background .4s ease; }
.lr-q:first-of-type { border-top: 0; }
.lr-pulse { background: #eef2ff; }
.lr-q-head { display: flex; align-items: flex-start; gap: 10px; }
.lr-num { flex: 0 0 auto; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--aura-night); color: #fff; font-size: 13px; font-weight: 800; line-height: 26px; text-align: center; }
.lr-q-prompt { flex: 1; min-width: 0; font-size: 15px; line-height: 1.6; padding-top: 1px; }
.lr-flag { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; margin: -3px -4px 0 0; border-radius: 10px; color: #cbd5e1; }
.lr-flag.on { color: #f59e0b; }
.lr-truth { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 40px; }
.lr-chip { position: relative; }
.lr-letters .lr-chip span { min-width: 40px; text-align: center; }
.lr-chip input, .lr-opt input { position: absolute; opacity: 0; pointer-events: none; }
.lr-chip span { display: inline-block; min-height: 38px; padding: 9px 14px; border: 1.5px solid #e5e7eb; border-radius: 999px; font-size: 13px; font-weight: 700; color: #374151; }
.lr-chip input:checked + span { border-color: var(--aura-indigo); background: var(--aura-indigo); color: #fff; }
.lr-chip input:focus-visible + span, .lr-opt input:focus-visible ~ .lr-letter { outline: 3px solid #c7d2fe; }
.lr-mc { display: grid; gap: 8px; margin: 10px 0 0 40px; }
.lr-mc-hint { margin: 0; color: var(--aura-muted); font-size: 12.5px; font-weight: 700; }
.lr-opt { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1.5px solid #e5e7eb; border-radius: 14px; cursor: pointer; font-size: 14.5px; line-height: 1.45; }
.lr-letter { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid #cbd5e1; border-radius: 50%; font-size: 13px; font-weight: 800; color: #475569; }
.lr-opt input[type=checkbox] ~ .lr-letter { border-radius: 7px; }
.lr-opt:has(input:checked) { border-color: var(--aura-indigo); background: #eef2ff; }
.lr-opt input:checked ~ .lr-letter { border-color: var(--aura-indigo); background: var(--aura-indigo); color: #fff; }
.lr-q-select, .lr-q-input { margin: 8px 0 0 40px; }

.lr-gap, .lr-select { min-height: 38px; border: 1.5px solid #c7cbe0; border-radius: 10px; background: #fff; color: var(--aura-ink); font-size: 15px; font-weight: 600; }
.lr-gap { width: 8em; max-width: 100%; padding: 4px 8px; vertical-align: middle; }
.lr-gap::placeholder { color: #94a3b8; font-weight: 800; text-align: center; }
.lr-gap:focus, .lr-select:focus { outline: none; border-color: var(--aura-indigo); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15); }
.lr-select { width: 100%; max-width: 420px; padding: 6px 8px; }
.lr-inline .lr-select { width: auto; min-width: 74px; }
.lr-gap-wrap, .lr-select-wrap.lr-inline { display: inline-block; margin: 2px 0; }
.lr-template { padding: 12px 14px; border-radius: 14px; background: #f8f9fc; font-size: 15px; line-height: 2.1; }
.lr-template p { margin: 0; }
.lr-template-title { margin: 0 0 4px; font-weight: 800; color: var(--aura-ink); text-align: center; }
.lr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lr-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 14px; }
.lr-table th, .lr-table td { padding: 8px; border: 1px solid #e2e5ef; text-align: left; vertical-align: middle; }
.lr-table th { background: #f1f2f7; font-weight: 800; }
.lr-table .lr-gap { width: 7em; }
.lr-flow { display: grid; justify-items: center; gap: 4px; }
.lr-flow-step { width: 100%; max-width: 560px; padding: 10px 12px; border: 1.5px solid #e2e5ef; border-radius: 12px; background: #fff; font-size: 14.5px; line-height: 1.9; text-align: center; }
.lr-flow-arrow { color: #94a3b8; font-weight: 800; }
.lr-next-part { display: block; width: 100%; margin: 6px 0 12px; padding: 13px; border-radius: 999px; background: #eef2ff; color: var(--aura-indigo); font-weight: 800; }

/* ---------- Review marks ---------- */
.lr-q-review:empty { display: none; }
.lr-q-review { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0 40px; font-size: 13.5px; }
.lr-q-review-list { margin: 6px 0 0; padding: 8px 10px; border-radius: 12px; background: #f8f9fc; }
.lr-ok { color: #047857; font-weight: 700; }
.lr-bad { color: #b91c1c; font-weight: 700; }
.lr-evidence { padding: 4px 10px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 12.5px; font-weight: 700; }
.lr-explain { flex-basis: 100%; margin: 0; color: #4b5563; }
.lr-gap.lr-correct, .lr-select.lr-correct { border-color: #10b981; background: #ecfdf5; }
.lr-gap.lr-wrong, .lr-select.lr-wrong { border-color: #ef4444; background: #fef2f2; text-decoration: line-through; }
.lr-gap.lr-wrong:placeholder-shown { text-decoration: none; }
.lr-opt.lr-correct, .lr-chip.lr-correct span { border-color: #10b981; background: #ecfdf5; }
.lr-opt.lr-wrong, .lr-chip.lr-wrong span { border-color: #ef4444; background: #fef2f2; }
.lr-chip.lr-wrong input:checked + span { background: #ef4444; border-color: #ef4444; }
.lr-chip.lr-correct input:checked + span { background: #10b981; border-color: #10b981; }
.lr-inline-key { margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: #ecfdf5; color: #047857; font-size: 13px; font-weight: 700; }

/* ---------- Bottom navigator ---------- */
.lr-nav { flex: 0 0 auto; border-top: 1px solid #e5e7eb; background: #fff; padding: 8px 10px calc(env(safe-area-inset-bottom) + 8px); }
.lr-nav.hidden { display: none; }
.lr-nav-parts { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lr-nav-parts::-webkit-scrollbar { display: none; }
.lr-nav-part { flex: 0 0 auto; display: grid; padding: 4px 10px; border-radius: 10px; background: #f1f2f7; color: #374151; font-size: 12px; font-weight: 700; line-height: 1.25; text-align: center; }
.lr-nav-part small { color: var(--aura-muted); font-weight: 600; }
.lr-nav-current { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.lr-nav-label { padding: 0 4px; color: var(--aura-ink); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.lr-nav-num { position: relative; flex: 0 0 auto; width: 34px; height: 34px; border: 1.5px solid #d6d9e6; border-radius: 9px; background: #fff; color: #374151; font-size: 13px; font-weight: 700; }
.lr-nav-num.done { border-color: var(--aura-indigo); background: #eef2ff; color: var(--aura-indigo); }
.lr-nav-num.flagged::after { content: ''; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #f59e0b; }
.lr-nav-num.ok { border-color: #10b981; background: #10b981; color: #fff; }
.lr-nav-num.bad { border-color: #ef4444; background: #fee2e2; color: #b91c1c; }

/* ---------- Result ---------- */
.lr-result { flex: 1; overflow-y: auto; padding: 16px 16px calc(env(safe-area-inset-bottom) + 24px); background: var(--aura-canvas); }
.lr-result.hidden { display: none; }
.lr-result > * { max-width: 640px; margin-left: auto; margin-right: auto; }
.lr-result-card { margin-bottom: 14px; padding: 18px; border: 1px solid var(--aura-line); border-radius: 24px; background: #fff; box-shadow: var(--aura-shadow-sm); }
.lr-result-card:first-child { background: radial-gradient(120% 90% at 100% 0%, rgba(124, 58, 237, .55) 0%, rgba(124, 58, 237, 0) 55%), var(--aura-night); color: #fff; text-align: center; }
.lr-result-kicker { margin: 0; color: rgba(226, 232, 255, .85); font-size: 13px; }
.lr-result-band { display: grid; justify-items: center; margin: 10px 0 4px; }
.lr-result-band span { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #c7d2fe; }
.lr-result-band b { font-size: 56px; font-weight: 800; line-height: 1.05; }
.lr-result-raw { margin: 0; font-size: 15px; color: #e0e7ff; }
.lr-result-raw b { color: #fff; font-size: 18px; }
.lr-result-note { margin: 8px 0 0; color: #a7f3d0; font-size: 12.5px; }
.lr-types { display: grid; gap: 12px; margin-top: 10px; }
.lr-type-head { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.lr-type-bar { height: 8px; margin: 6px 0 3px; border-radius: 999px; background: #fee2e2; overflow: hidden; }
.lr-type-bar span { display: block; height: 100%; border-radius: 999px; background: #10b981; }
.lr-type small { color: #b91c1c; font-size: 12px; font-weight: 600; }
.lr-type small.lr-ok { color: #047857; }
.lr-result-actions { display: grid; gap: 10px; margin-bottom: 14px; }
.lr-result-actions .bubble-btn { min-height: 48px; }

/* Full test / Full mock */
.lr-steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 14px; }
.lr-step { padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: rgba(226, 232, 255, .75); font-size: 12px; font-weight: 700; }
.lr-step.done { background: rgba(16, 185, 129, .25); color: #a7f3d0; }
.lr-step.now { background: #fff; color: var(--aura-ink); }
.lr-step-line { width: 14px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.lr-next-title { margin: 0; font-size: 20px; font-weight: 800; color: #fff; }
.lr-next-title:empty { display: none; }
.lr-next-text { margin: 8px 0 0; color: #e0e7ff; font-size: 14px; line-height: 1.55; }
.lr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin-bottom: 14px; }
.lr-tile { display: grid; justify-items: center; gap: 2px; padding: 14px 8px; border: 1px solid var(--aura-line); border-radius: 20px; background: #fff; box-shadow: var(--aura-shadow-sm); }
.lr-tile span { color: var(--aura-muted); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.lr-tile b { color: var(--aura-ink); font-size: 28px; font-weight: 800; }
.lr-tile small { color: var(--aura-muted); font-size: 11.5px; text-align: center; }

.lr-toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 64px); z-index: 2; transform: translate(-50%, -12px); padding: 8px 14px; border-radius: 999px; background: var(--aura-night); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.lr-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  #lrHome:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 24px; align-items: start; }
  #lrHome > * { margin-top: 0 !important; }
  #lrHome > .aura-mock-hero, #lrHome > .aura-rules, #lrHome > .lr-error, #lrHome > p { grid-column: 1 / -1; }
  .lr-bar { padding: 8px 20px; min-height: 60px; }
  .lr-bar-title { flex-direction: row; }
  .lr-tabs { display: none !important; }
  .lr-two-panes .lr-main { display: grid; grid-template-columns: var(--lr-split, 50%) 12px minmax(0, 1fr); }
  .lr-two-panes.lr-view-passage .lr-questions, .lr-two-panes.lr-view-questions .lr-passage { display: block; }
  .lr-two-panes .lr-divider { display: grid; place-items: center; cursor: col-resize; background: #f1f2f7; }
  .lr-two-panes .lr-divider span { width: 4px; height: 40px; border-radius: 4px; background: #c7cbe0; }
  .lr-pane { padding: 22px 28px 40px; }
  .lr-para { font-size: 16.5px; }
  .lr-overlay:not(.lr-two-panes) .lr-questions { max-width: 900px; margin: 0 auto; }
  .lr-nav { padding: 10px 20px; }
  .lr-audio { padding: 10px 20px; }
  .lr-audio-row, .lr-audio-start { max-width: 900px; margin: 0 auto; }
  .lr-audio-vol { display: inline-flex; }
  .lr-nav-parts { justify-content: center; flex-wrap: wrap; }
  .lr-nav-num { width: 36px; height: 36px; }
  .lr-result { padding: 32px; }
}