:root {
  --bg: #020816;
  --bg-2: #06172d;
  --text: #f5f8ff;
  --muted: #aab6ca;
  --soft: #7f8da4;
  --line: rgba(139, 164, 204, 0.18);
  --line-soft: rgba(139, 164, 204, 0.10);
  --speed: #a855f7;
  --speed-2: #fb923c;
  --cyan: #38bdf8;
  --green: #22c55e;
  --danger: #ef4444;
  --panel-w: 360px;
  --shell-top: 132px;
  --edge-pad: 16px;
  --ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 0%, rgba(42, 118, 255, .18), transparent 32%),
    radial-gradient(circle at 78% 8%, rgba(168, 85, 247, .12), transparent 35%),
    linear-gradient(180deg, #071c35 0%, #020816 74%);
  overflow: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
body [data-autobyte-header] {
  position: fixed !important;
  top: 18px !important;
  left: 50% !important;
  width: min(1880px, calc(100vw - 56px)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 1000 !important;
}
.app-shell { width: 100%; min-height: 100vh; padding: 0; }
.reader-layout {
  position: fixed;
  inset: var(--shell-top) var(--edge-pad) var(--edge-pad) var(--edge-pad);
  display: grid;
  grid-template-columns: var(--panel-w) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 22%, rgba(168, 85, 247, .12), transparent 44%),
    radial-gradient(circle at 48% 52%, rgba(68, 39, 125, .20), transparent 38%),
    rgba(3, 10, 23, .72);
  box-shadow: 0 34px 90px rgba(0,0,0,.40);
}
.reader-layout::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 18%, transparent 82%, rgba(255,255,255,.02)),
    linear-gradient(rgba(168,85,247,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,.032) 1px, transparent 1px);
  background-size: auto, 128px 128px, 128px 128px;
  opacity: .75;
}
.control-panel {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 24px 30px 26px;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid rgba(168, 85, 247, .18);
  background:
    radial-gradient(circle at 20% 10%, rgba(251,146,60,.08), transparent 32%),
    rgba(2, 8, 18, .40);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.reader-panel {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 20px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.clean-minimize-btn,
.panel-toggle {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(244,248,255,.92);
  background: rgba(255,255,255,.04);
  font-weight: 900;
}
.panel-toggle-icon { font-size: 1.18em; line-height: 1; }
.tool-title h1 {
  margin: 42px 0 12px;
  font-size: 30px;
  line-height: .98;
  letter-spacing: -.065em;
  font-weight: 850;
}
.tool-title p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 16px; }
.tool-kicker,
.field-label,
.control label {
  color: #ffbf7b;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 950;
}
.session-goal-card {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.session-goal-head { display: grid; gap: 8px; }
.session-goal-head strong { font-size: 16px; }
.session-goal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 16px;
}
.session-goal {
  width: 100%;
  min-height: 68px;
  text-align: left;
  padding: 14px 16px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.085);
  color: rgba(247,250,255,.95);
  background: rgba(2, 8, 18, .36);
  display: grid;
  gap: 4px;
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.session-goal span { font-weight: 900; }
.session-goal small { color: rgba(184,196,216,.78); line-height: 1.25; }
.session-goal:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.session-goal.is-active {
  border-color: rgba(251,146,60,.75);
  background: linear-gradient(135deg, rgba(251,146,60,.16), rgba(168,85,247,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 40px rgba(251,146,60,.08);
}
.session-goal-select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.speed-text-card,
.speed-control-card,
.panel-footer-actions { margin-top: 18px; }
.speed-text-card,
.speed-control-card {
  border-radius: 22px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}
textarea, select, input[type="number"] {
  width: 100%;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  color: var(--text);
  background: rgba(1,7,18,.72);
  outline: none;
}
textarea { margin-top: 10px; min-height: 132px; padding: 14px; resize: vertical; line-height: 1.5; }
select { min-height: 44px; padding: 0 12px; }
.control-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.control { display: grid; gap: 7px; }
.control label { color: rgba(214,226,246,.88); letter-spacing: 0; text-transform: none; font-size: 13px; }
.control small { color: var(--soft); }
input[type="range"] { width: 100%; accent-color: var(--speed); }
.display-card {
  position: relative;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(56,189,248,.16), transparent 24%),
    radial-gradient(circle at 72% 50%, rgba(14,165,233,.10), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.012), rgba(255,255,255,.006));
}
.display-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.04), transparent 34%),
    linear-gradient(90deg, transparent 0 49.95%, rgba(226,241,255,.24) 50%, transparent 50.08%);
}
.reader-word {
  position: relative;
  z-index: 2;
  font-size: 62px;
  font-weight: 850;
  letter-spacing: -.06em;
  text-align: center;
  color: rgba(250,253,255,.97);
  text-shadow: 0 16px 48px rgba(0,0,0,.45);
}
.orp, .orp-char {
  color: #fb923c;
  text-shadow: 0 0 18px rgba(251, 146, 60, .38);
}
.progress-wrap {
  width: min(960px, calc(100% - 96px));
  margin: 0 auto;
  border-radius: 18px;
  padding: 12px 14px 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(3,8,18,.44);
}
.progress-meta { display: flex; justify-content: space-between; color: var(--muted); font-weight: 700; }
.progress-track { height: 9px; border-radius: 999px; overflow: hidden; background: rgba(83,112,156,.28); margin-top: 8px; }
.progress-fill { height: 100%; width: 0%; border-radius: inherit; background: linear-gradient(90deg, #8b5cf6, #fb923c); }
.reader-actions {
  width: min(680px, calc(100% - 96px));
  margin: 0 auto 36px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.reader-btn {
  min-height: 74px;
  display: grid;
  place-items: center;
  gap: 2px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.035);
  color: #fff;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.reader-btn.start { background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(251,146,60,.16)); }
.btn-icon { font-size: 20px; color: #a855f7; }
.reader-btn.reset .btn-icon { color: #fb923c; }
.btn-label { font-size: 15px; }
.btn-key { color: var(--soft); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.metrics-grid,.reader-stats,.session-stats { display: none !important; }
.reader-layout.is-panel-collapsed { grid-template-columns: 82px minmax(0,1fr); }
.reader-layout.is-panel-collapsed .control-panel,
body.is-training-active .control-panel { padding: 22px 13px; }
.reader-layout.is-panel-collapsed .tool-title,
.reader-layout.is-panel-collapsed .speed-text-card,
.reader-layout.is-panel-collapsed .speed-control-card,
.reader-layout.is-panel-collapsed .panel-footer-actions,
.reader-layout.is-panel-collapsed .session-goal-card,
body.is-training-active .tool-title,
body.is-training-active .speed-text-card,
body.is-training-active .speed-control-card,
body.is-training-active .panel-footer-actions,
body.is-training-active .session-goal-card { display: none; }
.reader-layout.is-panel-collapsed .panel-toggle,
body.is-training-active .panel-toggle { width: 54px; height: 54px; border-radius: 999px; justify-content: center; padding: 0; }
.reader-layout.is-panel-collapsed .panel-toggle-text,
body.is-training-active .panel-toggle-text { display: none; }
.reader-layout.is-panel-collapsed .panel-toggle-icon,
body.is-training-active .panel-toggle-icon { transform: rotate(180deg); }
/* Modals */
.modal,.training-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px; }
.modal[hidden],.training-modal[hidden] { display: none !important; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.64); backdrop-filter: blur(10px); }
.modal-card {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  max-height: min(86vh, 900px);
  overflow: auto;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(5,14,29,.94);
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
  padding: 28px;
}
.modal-card h2 { margin: 12px 0 8px; font-size: 34px; line-height: 1; letter-spacing: -.06em; }
.modal-card p { color: var(--muted); line-height: 1.55; }
.modal-actions,.review-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.primary-action,.secondary-action,.modal-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.11);
  color: #fff;
  background: rgba(255,255,255,.05);
  font-weight: 900;
}
.primary-action,.modal-btn.primary { background: linear-gradient(135deg, #8b5cf6, #fb923c); border: 0; }
.review-close { float: right; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); color: #fff; background: rgba(255,255,255,.04); }
.recall-options,.review-grid,.summary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.recall-options button,.review-grid article,.summary-grid article { border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.035); color: #fff; padding: 18px; text-align: left; }
.review-layout { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 18px; }
.review-footer { margin-top: 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 2100; border-radius: 999px; padding: 12px 16px; color: #bbf7d0; background: rgba(4, 20, 15, .9); border: 1px solid rgba(34,197,94,.22); }
.toast[hidden] { display: none; }
@media (max-width: 980px) {
  body { overflow: auto; }
  body [data-autobyte-header] { position: relative !important; top: auto !important; left: auto !important; transform: none !important; width: min(100%, calc(100vw - 24px)) !important; margin: 12px auto !important; }
  .reader-layout { position: relative; inset: auto; width: min(100%, calc(100vw - 24px)); margin: 12px auto 24px; grid-template-columns: 1fr; min-height: auto; }
  .control-panel { border-right: 0; border-bottom: 1px solid var(--line); max-height: none; }
  .reader-panel { min-height: 70vh; }
  .display-card { min-height: 56vh; }
  .reader-actions { grid-template-columns: repeat(2,1fr); width: calc(100% - 24px); }
  .progress-wrap { width: calc(100% - 24px); }
}

.control-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(56,189,248,.36) transparent;
}
.control-panel::-webkit-scrollbar { width: 8px; }
.control-panel::-webkit-scrollbar-track { background: transparent; margin: 16px 0; }
.control-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(56,189,248,.44), rgba(251,146,60,.20));
  border: 2px solid rgba(2,8,18,.62);
}

/* v15: collapsed sidebar should be only a minimal expand symbol, no panel glass/background */
.reader-layout.is-panel-collapsed,
body.is-training-active .reader-layout {
  grid-template-columns: 66px minmax(0, 1fr);
}
.reader-layout.is-panel-collapsed .control-panel,
body.is-training-active .control-panel {
  background: transparent !important;
  border-right: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 22px 6px !important;
  overflow: visible !important;
}
.reader-layout.is-panel-collapsed .panel-toggle,
body.is-training-active .panel-toggle {
  width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}
.reader-layout.is-panel-collapsed .panel-toggle:hover,
body.is-training-active .panel-toggle:hover {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* v16 polish: shorter local focus guide, dimmer glow, no collapsed-sidebar residue */
.display-card {
  background:
    radial-gradient(circle at 50% 48%, rgba(56,189,248,.105), transparent 22%),
    radial-gradient(circle at 72% 50%, rgba(14,165,233,.065), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.010), rgba(255,255,255,.005));
}
.display-card::before {
  background:
    radial-gradient(circle at center, rgba(255,255,255,.026), transparent 32%);
}
.reader-panel {
  background:
    radial-gradient(circle at 50% 42%, rgba(56,189,248,.065), transparent 24%),
    radial-gradient(circle at 78% 42%, rgba(79,70,229,.055), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.008), rgba(255,255,255,.004));
}
.reader-layout.is-panel-collapsed,
body.is-training-active .reader-layout {
  grid-template-columns: 0 minmax(0, 1fr) !important;
}
.reader-layout.is-panel-collapsed .control-panel,
body.is-training-active .control-panel {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 64px !important;
  height: 90px !important;
  z-index: 20 !important;
  padding: 22px 0 0 14px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.reader-layout.is-panel-collapsed .panel-toggle,
body.is-training-active .panel-toggle {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  background: rgba(3,10,23,.42) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* v17 safety: auto-minimized panel must never hide the workspace */
.reader-layout.is-panel-collapsed .reader-panel,
body.is-training-active .reader-panel,
.reader-layout.is-panel-collapsed .display-card,
body.is-training-active .display-card,
.reader-layout.is-panel-collapsed .reader-actions,
body.is-training-active .reader-actions,
.reader-layout.is-panel-collapsed .progress-wrap,
body.is-training-active .progress-wrap {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.reader-layout.is-panel-collapsed .progress-wrap,
body.is-training-active .progress-wrap { display: block !important; }

/* v18: correct tool shell behavior
   - panel visible on page load
   - panel collapse never hides workspace
   - collapsed state is only a tiny expand control over the workspace
*/
.reader-layout.is-panel-collapsed,
body.is-training-active .reader-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

.reader-layout.is-panel-collapsed .reader-panel,
body.is-training-active .reader-panel {
  grid-column: 1 / -1 !important;
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.reader-layout.is-panel-collapsed .display-card,
body.is-training-active .display-card,
.reader-layout.is-panel-collapsed .progress-wrap,
body.is-training-active .progress-wrap,
.reader-layout.is-panel-collapsed .reader-actions,
body.is-training-active .reader-actions {
  visibility: visible !important;
  opacity: 1 !important;
}

.reader-layout.is-panel-collapsed .control-panel,
body.is-training-active .control-panel {
  position: absolute !important;
  z-index: 30 !important;
  top: 0 !important;
  left: 0 !important;
  width: 74px !important;
  height: 96px !important;
  padding: 22px 0 0 16px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

.reader-layout.is-panel-collapsed .panel-toggle,
body.is-training-active .panel-toggle {
  width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  justify-content: center !important;
  background: rgba(4, 12, 26, .28) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}

.reader-layout.is-panel-collapsed .panel-toggle-text,
.reader-layout.is-panel-collapsed .panel-toggle span:not(.panel-toggle-icon),
body.is-training-active .panel-toggle-text,
body.is-training-active .panel-toggle span:not(.panel-toggle-icon) {
  display: none !important;
}

.reader-layout.is-panel-collapsed .panel-toggle-icon,
body.is-training-active .panel-toggle-icon {
  display: inline-block !important;
  transform: rotate(180deg) !important;
}

/* v19 final visual correction: unified stage background + local focus guide */
.reader-panel {
  position: relative;
  background:
    radial-gradient(circle at 50% 43%, rgba(56,189,248,.070), transparent 24%),
    radial-gradient(circle at 72% 44%, rgba(79,70,229,.050), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.007), rgba(255,255,255,.003)) !important;
}
.reader-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(109,224,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,224,255,.023) 1px, transparent 1px);
  background-size: 128px 128px;
  opacity: .55;
}
.display-card {
  background: transparent !important;
  overflow: hidden;
}
.display-card::before {
  background:
    radial-gradient(circle at center, rgba(255,255,255,.018), transparent 31%) !important;
}
.reader-word { z-index: 3; }
.orp, .orp-char {
  color: #fb923c !important;
  text-shadow: 0 0 18px rgba(251,146,60,.38) !important;
}
.progress-wrap {
  position: relative;
  z-index: 3;
  background: rgba(3,8,18,.26) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.reader-actions { position: relative; z-index: 3; }
.reader-layout.is-panel-collapsed .control-panel,
body.is-training-active .control-panel {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.reader-layout.is-panel-collapsed .panel-toggle,
body.is-training-active .panel-toggle {
  background: rgba(4,12,26,.18) !important;
  border-color: rgba(255,255,255,.11) !important;
  box-shadow: none !important;
}

/* v20 polish: subtler speed-reader center glow */
.reader-panel {
  background:
    radial-gradient(circle at 50% 43%, rgba(56,189,248,.046), transparent 23%),
    radial-gradient(circle at 72% 44%, rgba(79,70,229,.034), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.007), rgba(255,255,255,.003)) !important;
}
.display-card::before {
  background:
    radial-gradient(circle at center, rgba(255,255,255,.012), transparent 30%) !important;
}

/* v21: game button hover polish */
.reader-btn {
  position: relative;
  overflow: hidden;
  transition:
    transform .22s var(--ease),
    border-color .22s var(--ease),
    background .22s var(--ease),
    box-shadow .22s var(--ease),
    filter .22s var(--ease);
}
.reader-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent),
    radial-gradient(circle at 82% 18%, rgba(139,92,246,.18), transparent 34%);
  transition: opacity .22s var(--ease);
}
.reader-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(215, 195, 255, .26) !important;
  background: rgba(255,255,255,.052) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 16px 36px rgba(0,0,0,.28),
    0 0 28px rgba(139,92,246,.075) !important;
}
.reader-btn.start:hover {
  border-color: rgba(251,146,60,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 16px 36px rgba(0,0,0,.28),
    0 0 30px rgba(251,146,60,.075) !important;
}
.reader-btn:hover::after {
  opacity: 1;
}
.reader-btn:active {
  transform: translateY(0);
  filter: brightness(.96);
}
.toast {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 34px !important;
  transform: translateX(-50%) translateY(10px) !important;
  z-index: 2200 !important;
  min-width: min(520px, calc(100vw - 48px)) !important;
  max-width: min(680px, calc(100vw - 48px)) !important;
  border-radius: 22px !important;
  padding: 18px 22px !important;
  color: rgba(245,248,255,.96) !important;
  background:
    radial-gradient(circle at 12% 40%, rgba(56,189,248,.10), transparent 34%),
    rgba(5,14,29,.88) !important;
  border: 1px solid rgba(148,200,255,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 24px 70px rgba(0,0,0,.42),
    0 0 34px rgba(56,189,248,.075) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  font-weight: 850 !important;
  letter-spacing: -.015em !important;
}
.toast:not([hidden]) {
  animation: autobyteToastIn .22s var(--ease) forwards;
}
@keyframes autobyteToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.toast[hidden] { display: none !important; }
.reader-btn:hover {
  transform: translateY(-2px);
}

/* v23: session-complete toast must sit top-right above modals and use current glass design */
.toast,
.toast.score-toast {
  position: fixed !important;
  top: 138px !important;
  right: 34px !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-8px) scale(.985) !important;
  z-index: 7000 !important;
  width: min(420px, calc(100vw - 48px)) !important;
  min-width: 0 !important;
  max-width: min(420px, calc(100vw - 48px)) !important;
  border-radius: 22px !important;
  padding: 18px 20px !important;
  display: grid !important;
  gap: 5px !important;
  color: rgba(245,248,255,.97) !important;
  background:
    radial-gradient(circle at 14% 36%, rgba(56,189,248,.13), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,.060), rgba(255,255,255,.020)),
    rgba(4,12,27,.90) !important;
  border: 1px solid rgba(137,201,255,.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    0 24px 70px rgba(0,0,0,.46),
    0 0 32px rgba(56,189,248,.085) !important;
  backdrop-filter: blur(22px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
  font-weight: 850 !important;
  letter-spacing: -.015em !important;
  opacity: 0;
  pointer-events: auto;
}
.toast::before,
.toast.score-toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(56,189,248,.20), rgba(56,189,248,.82), rgba(56,189,248,.20));
}
.toast strong {
  display: block;
  color: rgba(249,251,255,.98);
  font-size: 15px;
  line-height: 1.25;
}
.toast span {
  display: block;
  color: rgba(196,211,232,.76);
  font-size: 13px;
  line-height: 1.35;
}
.toast.is-visible,
.toast:not([hidden]) {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  animation: autobyteToastTopRightIn .22s var(--ease) forwards !important;
}
@keyframes autobyteToastTopRightIn {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.toast[hidden] { display: none !important; }
.toast,
.toast.score-toast {
  position: fixed !important;
  top: 118px !important;
  right: 34px !important;
  left: auto !important;
  bottom: auto !important;
  width: min(430px, calc(100vw - 48px)) !important;
  min-width: 0 !important;
  max-width: min(430px, calc(100vw - 48px)) !important;
  transform: translateY(-8px) scale(.985) !important;
  z-index: 8000 !important;
  display: grid !important;
  gap: 5px !important;
  padding: 18px 20px !important;
  border-radius: 24px !important;
  color: rgba(246,250,255,.98) !important;
  background:
    radial-gradient(circle at 13% 38%, rgba(56,189,248,.085), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.048), rgba(255,255,255,.018)),
    rgba(4,12,27,.88) !important;
  border: 1px solid rgba(137,201,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 22px 58px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(20px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
  opacity: 0;
  pointer-events: auto;
}
.toast::before,
.toast.score-toast::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  width: auto !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, rgba(56,189,248,.36), rgba(255,255,255,.06), rgba(255,255,255,.025)) border-box !important;
  opacity: .34 !important;
  pointer-events: none !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask-composite: exclude !important;
  padding: 1px !important;
}
.toast strong,
.toast.score-toast strong {
  display: block !important;
  color: rgba(249,251,255,.98) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}
.toast span,
.toast.score-toast span {
  display: block !important;
  color: rgba(196,211,232,.76) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}
.toast.is-visible,
.toast:not([hidden]) {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  animation: autobyteToastTopRightIn .22s var(--ease) forwards !important;
}
.toast[hidden] { display: none !important; }
@keyframes autobyteToastTopRightIn {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}


.reader-panel {
  background:
    radial-gradient(circle at 50% 48%, rgba(56,189,248,.035), transparent 18%),
    radial-gradient(circle at 66% 42%, rgba(79,70,229,.022), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.006), rgba(255,255,255,.003)) !important;
}
.display-card::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(56,189,248,.025), transparent 22%) !important;
}
.reader-word {
  position: relative !important;
  z-index: 4 !important;
}
.orp,
.orp-char {
  color: #fb923c !important;
  text-shadow: 0 0 16px rgba(251,146,60,.34) !important;
}

/* v28 targeted Speed Reader glow correction: remove purple wash, restore soft blue focus glow, strengthen local guide. */
body {
  background:
    radial-gradient(circle at 18% 0%, rgba(42, 118, 255, .16), transparent 32%),
    radial-gradient(circle at 78% 8%, rgba(56, 189, 248, .055), transparent 35%),
    linear-gradient(180deg, #071c35 0%, #020816 74%) !important;
}

.reader-layout {
  background:
    radial-gradient(circle at 50% 46%, rgba(56, 189, 248, .030), transparent 31%),
    radial-gradient(circle at 72% 24%, rgba(14, 165, 233, .035), transparent 38%),
    rgba(3, 10, 23, .72) !important;
}

.reader-layout::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.026), transparent 18%, transparent 82%, rgba(255,255,255,.016)),
    linear-gradient(rgba(109,224,255,.020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,224,255,.018) 1px, transparent 1px) !important;
  background-size: auto, 128px 128px, 128px 128px !important;
  opacity: .52 !important;
}

.reader-panel {
  background:
    radial-gradient(circle at 50% 48%, rgba(86, 190, 255, .052), transparent 15%),
    radial-gradient(circle at 50% 48%, rgba(56, 189, 248, .028), transparent 25%),
    linear-gradient(135deg, rgba(255,255,255,.006), rgba(255,255,255,.003)) !important;
}

.reader-panel::before {
  background:
    linear-gradient(rgba(109,224,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,224,255,.016) 1px, transparent 1px) !important;
  background-size: 128px 128px !important;
  opacity: .42 !important;
}

.display-card::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(80, 190, 255, .040), transparent 18%) !important;
}

.orp,
.orp-char {
  color: #fb923c !important;
  text-shadow: 0 0 16px rgba(251, 146, 60, .34) !important;
}


/* AutoByte Speed Reader v1.3.24 compact session modal
   --------------------------------------------------------------------------
   Premium, dashboard-aligned review modal. It intentionally avoids internal
   scrolling and keeps the completion state short enough to read at a glance.
*/
.session-review-modal{
  padding:24px !important;
  place-items:center !important;
}
.session-review-modal .modal-backdrop{
  background:rgba(0,0,0,.68) !important;
  backdrop-filter:blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.08) !important;
}
.session-review-card.compact-review-card{
  width:min(760px,calc(100vw - 48px)) !important;
  max-height:none !important;
  overflow:hidden !important;
  padding:0 !important;
  border-radius:30px !important;
  border:1px solid rgba(139,164,204,.20) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(56,189,248,.12), transparent 38%),
    radial-gradient(circle at 88% 18%, rgba(251,146,60,.09), transparent 34%),
    linear-gradient(180deg, rgba(8,20,39,.96), rgba(3,9,20,.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 38px 110px rgba(0,0,0,.62) !important;
}
.compact-review-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  padding:22px 24px 0 !important;
}
.review-complete-pill{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:34px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  border:1px solid rgba(56,189,248,.24) !important;
  color:rgba(204,244,255,.96) !important;
  background:rgba(56,189,248,.08) !important;
  font-size:12px !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
  letter-spacing:.12em !important;
}
.session-review-card .review-close{
  float:none !important;
  width:38px !important;
  height:38px !important;
  display:inline-grid !important;
  place-items:center !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:rgba(246,250,255,.94) !important;
  background:rgba(255,255,255,.045) !important;
}
.compact-review-body{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 190px !important;
  gap:18px !important;
  padding:20px 24px 18px !important;
}
.compact-review-main h2{
  margin:0 0 8px !important;
  font-size:clamp(40px,5vw,64px) !important;
  line-height:.9 !important;
  letter-spacing:-.08em !important;
}
.compact-review-main p{
  max-width:540px !important;
  margin:0 !important;
  color:rgba(198,211,232,.82) !important;
  font-size:16px !important;
  line-height:1.45 !important;
}
.compact-review-stats{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-top:18px !important;
}
.compact-review-stats article,
.compact-range-card,
.recommendation-card{
  border:1px solid rgba(139,164,204,.16) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.035) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.compact-review-stats article{
  padding:14px !important;
  text-align:left !important;
}
.compact-review-stats span,
.compact-range-card span,
.recommendation-card span{
  display:block !important;
  color:rgba(170,184,207,.76) !important;
  font-size:11px !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
  letter-spacing:.11em !important;
}
.compact-review-stats strong{
  display:block !important;
  margin-top:8px !important;
  color:#fff !important;
  font-size:26px !important;
  line-height:1 !important;
  letter-spacing:-.055em !important;
}
.compact-review-stats small{
  display:block !important;
  margin-top:4px !important;
  color:rgba(170,184,207,.74) !important;
  font-size:12px !important;
}
.compact-range-card{
  margin-top:10px !important;
  padding:15px !important;
}
.compact-range-card strong{
  display:block !important;
  margin-top:6px !important;
  font-size:20px !important;
  color:#fff !important;
}
.compact-review-grade{
  display:grid !important;
  align-items:stretch !important;
}
.compact-review-grade .review-grade-ring{
  min-height:100% !important;
  border-radius:22px !important;
  border:1px solid rgba(251,146,60,.20) !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(251,146,60,.13), transparent 52%),
    rgba(255,255,255,.03) !important;
  display:grid !important;
  place-items:center !important;
  align-content:center !important;
  padding:18px !important;
  text-align:center !important;
}
.compact-review-grade .review-grade{
  font-size:72px !important;
  line-height:.9 !important;
  letter-spacing:-.08em !important;
  color:#fff !important;
}
.compact-review-grade span{
  color:rgba(170,184,207,.75) !important;
  font-size:12px !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
  letter-spacing:.12em !important;
}
.compact-review-grade strong{
  color:rgba(246,250,255,.94) !important;
  font-size:14px !important;
}
.compact-review-footer{
  margin:0 !important;
  padding:0 24px 24px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:end !important;
  gap:14px !important;
}
.compact-review-footer .recommendation-card{
  padding:14px !important;
}
.compact-review-footer .recommendation-card strong{
  display:block !important;
  margin-top:6px !important;
  color:#fff !important;
  font-size:15px !important;
  line-height:1.35 !important;
}
.compact-review-footer .review-actions{
  margin:0 !important;
  gap:8px !important;
  justify-content:flex-end !important;
}
.compact-review-footer .primary-action,
.compact-review-footer .secondary-action{
  min-height:42px !important;
  border-radius:14px !important;
  padding:0 14px !important;
}
.compact-review-footer .primary-action{
  background:linear-gradient(135deg, rgba(251,146,60,.95), rgba(168,85,247,.90)) !important;
}
.review-hidden-metrics{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
}
@media (max-width:760px){
  .session-review-card.compact-review-card{width:min(560px,calc(100vw - 28px)) !important;}
  .compact-review-body{grid-template-columns:1fr !important;padding:18px !important;}
  .compact-review-grade .review-grade-ring{min-height:160px !important;}
  .compact-review-footer{grid-template-columns:1fr !important;padding:0 18px 18px !important;}
  .compact-review-footer .review-actions{justify-content:stretch !important;}
  .compact-review-footer .primary-action,
  .compact-review-footer .secondary-action{flex:1 1 auto !important;}
}


/* --------------------------------------------------------------------------
   AutoByte 1.3.44 - Tool typography density
   Reduce oversized tool headers/cards while preserving the premium tool UI.
   -------------------------------------------------------------------------- */
:where(
  .tool-title h1,
  .panel-head h2,
  .modal-card h2,
  .compact-review-main h2,
  .session-complete-title,
  .tool-card h2,
  .training-card h2,
  .metric-card strong,
  .summary-grid strong
){letter-spacing:0!important}

.tool-title h1{font-size:30px!important;line-height:.98!important}
.panel-head h2{font-size:clamp(24px,2.1vw,34px)!important;line-height:1.08!important}
.modal-card h2,.compact-review-main h2{font-size:clamp(26px,2.3vw,36px)!important;line-height:1.08!important}
.tool-card h2,.training-card h2{font-size:clamp(24px,2vw,32px)!important;line-height:1.08!important}
.metric-card strong,.summary-grid strong{font-size:clamp(20px,1.8vw,28px)!important;line-height:1.05!important}
/* AutoByte 1.3.71: single source of truth for Speed Reader focus glow
   The glow must belong to the word itself, not to the display-card background,
   center guide, minimized layout state, or training-active state.
*/
.display-card,
.reader-layout.is-panel-collapsed .display-card,
body.is-training-active .display-card{
  background:
    linear-gradient(135deg, rgba(255,255,255,.006), rgba(255,255,255,.002)) !important;
}

.display-card::before,
.display-card::after,
.reader-layout.is-panel-collapsed .display-card::before,
.reader-layout.is-panel-collapsed .display-card::after,
body.is-training-active .display-card::before,
body.is-training-active .display-card::after{
  content:none !important;
  display:none !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:0 !important;
}

.reader-word{
  position:relative !important;
  z-index:2 !important;
  text-shadow:0 8px 18px rgba(0,0,0,.28) !important;
  isolation:isolate;
}

.reader-word::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:calc(100% + 180px) !important;
  max-width:min(520px, 54vw) !important;
  height:150px !important;
  transform:translate(-50%, -50%) !important;
  border-radius:999px !important;
  background:radial-gradient(ellipse at center, rgba(56,189,248,.060), rgba(56,189,248,.020) 34%, transparent 72%) !important;
  box-shadow:none !important;
  filter:none !important;
  pointer-events:none !important;
  z-index:-1 !important;
}

.orp,
.orp-char{
  color:#fb923c !important;
  text-shadow:none !important;
  filter:none !important;
}
/* AutoByte 1.3.72: final visual layer lock
   Only .reader-word::before may create focus glow.
   All card, guide and collapsed training glow layers are disabled.
*/
.display-card,
.reader-layout.is-panel-collapsed .display-card,
body.is-training-active .display-card{
  background:
    linear-gradient(135deg, rgba(255,255,255,.006), rgba(255,255,255,.002)) !important;
  box-shadow:inherit;
}

.display-card::before,
.display-card::after,
.reader-layout.is-panel-collapsed .display-card::before,
.reader-layout.is-panel-collapsed .display-card::after,
body.is-training-active .display-card::before,
body.is-training-active .display-card::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:0 !important;
}

.reader-word{
  position:relative !important;
  z-index:2 !important;
  text-shadow:0 8px 18px rgba(0,0,0,.28) !important;
  isolation:isolate !important;
}

.reader-word::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:calc(100% + 180px) !important;
  max-width:min(520px, 54vw) !important;
  height:150px !important;
  transform:translate(-50%, -50%) !important;
  border-radius:999px !important;
  background:radial-gradient(ellipse at center, rgba(56,189,248,.060), rgba(56,189,248,.020) 34%, transparent 72%) !important;
  box-shadow:none !important;
  filter:none !important;
  pointer-events:none !important;
  z-index:-1 !important;
}

.orp,
.orp-char{
  color:#fb923c !important;
  text-shadow:none !important;
  filter:none !important;
}
/* AutoByte 1.3.73: hard lock Speed Reader glow source
   Lower glow source is the display surface/guide/background, not the word.
   This disables panel/guide/collapsed/training glow layers and keeps one tiny
   halo attached to .reader-word itself.
*/
.speed-reader-page .display-card,
.display-card,
.reader-layout .display-card,
.reader-layout.is-panel-collapsed .display-card,
body.is-training-active .display-card,
body.is-training-active .reader-layout .display-card,
body.is-training-active .reader-layout.is-panel-collapsed .display-card{
  background:
    linear-gradient(180deg, rgba(4,10,22,.96), rgba(2,7,17,.98)) !important;
  filter:none !important;
}

.speed-reader-page .display-card::before,
.speed-reader-page .display-card::after,
.display-card::before,
.display-card::after,
.reader-layout .display-card::before,
.reader-layout .display-card::after,
.reader-layout.is-panel-collapsed .display-card::before,
.reader-layout.is-panel-collapsed .display-card::after,
body.is-training-active .display-card::before,
body.is-training-active .display-card::after,
body.is-training-active .reader-layout .display-card::before,
body.is-training-active .reader-layout .display-card::after,
body.is-training-active .reader-layout.is-panel-collapsed .display-card::before,
body.is-training-active .reader-layout.is-panel-collapsed .display-card::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
}

.speed-reader-page .reader-word,
.reader-word{
  position:relative !important;
  z-index:2 !important;
  isolation:isolate !important;
  text-shadow:0 8px 18px rgba(0,0,0,.28) !important;
}

.speed-reader-page .reader-word::before,
.reader-word::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:calc(100% + 120px) !important;
  max-width:min(420px, 46vw) !important;
  height:112px !important;
  transform:translate(-50%, -50%) !important;
  border-radius:999px !important;
  background:radial-gradient(ellipse at center, rgba(56,189,248,.052), rgba(56,189,248,.014) 38%, transparent 72%) !important;
  box-shadow:none !important;
  filter:none !important;
  pointer-events:none !important;
  z-index:-1 !important;
}

.speed-reader-page .orp,
.speed-reader-page .orp-char,
.orp,
.orp-char{
  color:#fb923c !important;
  text-shadow:none !important;
  filter:none !important;
}
/* AutoByte 1.3.74: Speed Reader polish
   - +33% stronger word halo
   - center line restored and controlled by existing guide classes/settings
   - session complete/review buttons get premium hover/focus states
*/
.speed-reader-page .display-card,
.display-card,
.reader-layout .display-card,
.reader-layout.is-panel-collapsed .display-card,
body.is-training-active .display-card,
body.is-training-active .reader-layout .display-card,
body.is-training-active .reader-layout.is-panel-collapsed .display-card{
  background:
    linear-gradient(180deg, rgba(4,10,22,.96), rgba(2,7,17,.98)) !important;
  filter:none !important;
}

.speed-reader-page .display-card::before,
.speed-reader-page .display-card::after,
.display-card::before,
.display-card::after,
.reader-layout .display-card::before,
.reader-layout .display-card::after,
.reader-layout.is-panel-collapsed .display-card::before,
.reader-layout.is-panel-collapsed .display-card::after,
body.is-training-active .display-card::before,
body.is-training-active .display-card::after,
body.is-training-active .reader-layout .display-card::before,
body.is-training-active .reader-layout .display-card::after,
body.is-training-active .reader-layout.is-panel-collapsed .display-card::before,
body.is-training-active .reader-layout.is-panel-collapsed .display-card::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
}

.speed-reader-page .reader-word,
.reader-word{
  position:relative !important;
  z-index:2 !important;
  isolation:isolate !important;
  text-shadow:0 8px 18px rgba(0,0,0,.28) !important;
}

.speed-reader-page .reader-word::before,
.reader-word::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:calc(100% + 132px) !important;
  max-width:min(460px, 48vw) !important;
  height:126px !important;
  transform:translate(-50%, -50%) !important;
  border-radius:999px !important;
  background:radial-gradient(ellipse at center, rgba(56,189,248,.069), rgba(56,189,248,.019) 38%, transparent 72%) !important;
  box-shadow:none !important;
  filter:none !important;
  pointer-events:none !important;
  z-index:-1 !important;
}

.speed-reader-page .orp,
.speed-reader-page .orp-char,
.orp,
.orp-char{
  color:#fb923c !important;
  text-shadow:none !important;
  filter:none !important;
}

.review-footer .modal-btn,
.session-review .modal-btn,
.session-review button,
.review-modal .modal-btn,
.review-modal button{
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    color .18s ease !important;
}

.review-footer .modal-btn:hover,
.review-footer .modal-btn:focus-visible,
.session-review .modal-btn:hover,
.session-review .modal-btn:focus-visible,
.session-review button:hover,
.session-review button:focus-visible,
.review-modal .modal-btn:hover,
.review-modal .modal-btn:focus-visible,
.review-modal button:hover,
.review-modal button:focus-visible{
  transform:translateY(-2px) !important;
  border-color:rgba(125,211,252,.46) !important;
  background:rgba(56,189,248,.075) !important;
  box-shadow:
    0 16px 42px rgba(0,0,0,.28),
    0 0 24px rgba(56,189,248,.14),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  outline:0 !important;
}

.review-footer .modal-btn.primary:hover,
.review-footer .modal-btn.primary:focus-visible,
.session-review .modal-btn.primary:hover,
.session-review .modal-btn.primary:focus-visible,
.review-modal .modal-btn.primary:hover,
.review-modal .modal-btn.primary:focus-visible{
  background:linear-gradient(135deg, #9b6bff, #ff9f4a) !important;
  box-shadow:
    0 18px 48px rgba(251,146,60,.18),
    0 0 28px rgba(139,92,246,.20),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}
/* AutoByte 1.3.75: center line + session modal hover fix */
.display-card{
  position:relative !important;
}

.reader-word{
  position:relative !important;
  z-index:3 !important;
  isolation:auto !important;
  text-shadow:0 8px 18px rgba(0,0,0,.28) !important;
}

.reader-word::before{
  content:none !important;
  display:none !important;
}

.orp,
.orp-char{
  color:#fb923c !important;
  text-shadow:none !important;
  filter:none !important;
}

.review-footer .modal-btn,
.review-footer button,
.session-review .modal-btn,
.session-review button,
.review-modal .modal-btn,
.review-modal button,
.modal-actions .modal-btn,
.modal-actions button,
.modal-btn,
.primary-action{
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease !important;
}

.review-footer .modal-btn:hover,
.review-footer .modal-btn:focus-visible,
.review-footer button:hover,
.review-footer button:focus-visible,
.session-review .modal-btn:hover,
.session-review .modal-btn:focus-visible,
.session-review button:hover,
.session-review button:focus-visible,
.review-modal .modal-btn:hover,
.review-modal .modal-btn:focus-visible,
.review-modal button:hover,
.review-modal button:focus-visible,
.modal-actions .modal-btn:hover,
.modal-actions .modal-btn:focus-visible,
.modal-actions button:hover,
.modal-actions button:focus-visible,
.modal-btn:hover,
.modal-btn:focus-visible,
.primary-action:hover,
.primary-action:focus-visible{
  transform:translateY(-2px) !important;
  border-color:rgba(125,211,252,.50) !important;
  background:rgba(56,189,248,.09) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.30), 0 0 24px rgba(56,189,248,.16), inset 0 1px 0 rgba(255,255,255,.12) !important;
  outline:none !important;
}

.modal-btn.primary:hover,
.modal-btn.primary:focus-visible,
.primary-action:hover,
.primary-action:focus-visible,
button.primary:hover,
button.primary:focus-visible{
  background:linear-gradient(135deg, #9b6bff, #ff9f4a) !important;
  box-shadow:0 18px 48px rgba(251,146,60,.20), 0 0 28px rgba(139,92,246,.22), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.display-card{
  position:relative !important;
}

.reader-word{
  position:relative !important;
  z-index:3 !important;
  text-shadow:0 8px 18px rgba(0,0,0,.28) !important;
}

.reader-word::before{
  content:none !important;
  display:none !important;
}

.orp,
.orp-char{
  color:#fb923c !important;
  text-shadow:none !important;
  filter:none !important;
}
/* AutoByte 1.3.76: broader modal/review hover coverage */
.review-footer a,
.review-footer button,
.review-footer .modal-btn,
.review-footer .primary-action,
.review-footer .secondary-action,
.review-actions a,
.review-actions button,
.review-actions .modal-btn,
.session-review a,
.session-review button,
.session-review .modal-btn,
.review-modal a,
.review-modal button,
.review-modal .modal-btn,
.modal-actions a,
.modal-actions button,
.modal-actions .modal-btn,
.modal-btn,
.primary-action,
.secondary-action{
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease, opacity .18s ease !important;
}

.review-footer a:hover,
.review-footer a:focus-visible,
.review-footer button:hover,
.review-footer button:focus-visible,
.review-footer .modal-btn:hover,
.review-footer .modal-btn:focus-visible,
.review-footer .primary-action:hover,
.review-footer .primary-action:focus-visible,
.review-footer .secondary-action:hover,
.review-footer .secondary-action:focus-visible,
.review-actions a:hover,
.review-actions a:focus-visible,
.review-actions button:hover,
.review-actions button:focus-visible,
.review-actions .modal-btn:hover,
.review-actions .modal-btn:focus-visible,
.session-review a:hover,
.session-review a:focus-visible,
.session-review button:hover,
.session-review button:focus-visible,
.session-review .modal-btn:hover,
.session-review .modal-btn:focus-visible,
.review-modal a:hover,
.review-modal a:focus-visible,
.review-modal button:hover,
.review-modal button:focus-visible,
.review-modal .modal-btn:hover,
.review-modal .modal-btn:focus-visible,
.modal-actions a:hover,
.modal-actions a:focus-visible,
.modal-actions button:hover,
.modal-actions button:focus-visible,
.modal-actions .modal-btn:hover,
.modal-actions .modal-btn:focus-visible,
.modal-btn:hover,
.modal-btn:focus-visible,
.primary-action:hover,
.primary-action:focus-visible,
.secondary-action:hover,
.secondary-action:focus-visible{
  transform:translateY(-2px) !important;
  border-color:rgba(125,211,252,.52) !important;
  background:rgba(56,189,248,.10) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.30), 0 0 24px rgba(56,189,248,.16), inset 0 1px 0 rgba(255,255,255,.12) !important;
  outline:none !important;
}

.display-card{
  position:relative !important;
}

.reader-word{
  position:relative !important;
  z-index:3 !important;
  text-shadow:0 8px 18px rgba(0,0,0,.28) !important;
}

.reader-word::before{
  content:none !important;
  display:none !important;
}

.orp,
.orp-char{
  color:#fb923c !important;
  text-shadow:none !important;
  filter:none !important;
}

/* AutoByte 1.3.79: center line single source of truth
   The UI has exactly three modes: normal, soft, off.
   Normal and soft are 33% visually stronger than 1.3.78.
   The line is a fixation anchor behind the word, never a background glow.
*/
.display-card{
  position:relative !important;
}

.center-line,
.display-card .center-line{
  display:block !important;
  visibility:visible !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  bottom:auto !important;
  width:2px !important;
  height:230px !important;
  min-height:230px !important;
  transform:translate(-50%, -50%) !important;
  border-radius:999px !important;
  background:linear-gradient(180deg, transparent 0%, rgba(216,240,255,.27) 16%, rgba(236,249,255,1) 48%, rgba(56,189,248,.77) 52%, rgba(216,240,255,.27) 84%, transparent 100%) !important;
  box-shadow:0 0 12px rgba(56,189,248,.24) !important;
  filter:none !important;
  pointer-events:none !important;
  z-index:2 !important;
  opacity:.61 !important;
}

.display-card.guide-normal .center-line,
.display-card[data-center-guide="normal"] .center-line{
  display:block !important;
  visibility:visible !important;
  width:2px !important;
  opacity:.61 !important;
  background:linear-gradient(180deg, transparent 0%, rgba(216,240,255,.27) 16%, rgba(236,249,255,1) 48%, rgba(56,189,248,.77) 52%, rgba(216,240,255,.27) 84%, transparent 100%) !important;
  box-shadow:0 0 12px rgba(56,189,248,.24) !important;
}

.display-card.guide-soft .center-line,
.display-card[data-center-guide="soft"] .center-line{
  display:block !important;
  visibility:visible !important;
  width:1px !important;
  opacity:.35 !important;
  background:linear-gradient(180deg, transparent 0%, rgba(216,240,255,.19) 18%, rgba(236,249,255,.69) 50%, rgba(56,189,248,.45) 54%, rgba(216,240,255,.19) 82%, transparent 100%) !important;
  box-shadow:0 0 8px rgba(56,189,248,.11) !important;
}

.display-card.guide-off .center-line,
.display-card[data-center-guide="off"] .center-line{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
  background:none !important;
  box-shadow:none !important;
}


.recall-option { cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.recall-option:hover, .recall-option:focus-visible { transform: translateY(-1px); border-color: rgba(104,220,255,.55); background: rgba(104,220,255,.09); box-shadow: 0 16px 36px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.04); outline: none; }
.recall-option.is-selected { border-color: rgba(255,183,107,.72); background: linear-gradient(135deg, rgba(255,183,107,.16), rgba(104,220,255,.08)); box-shadow: 0 18px 42px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06); }
.recall-option-check { float: right; opacity: 0; color: #ffcf96; font-weight: 900; }
.recall-option.is-selected .recall-option-check { opacity: 1; }

/* AutoByte Speed Reader completion + recall interaction polish
   Narrow, additive polish only. Keeps existing layout/design while making recall
   choices and completion actions feel consistently responsive.
*/
.recall-options .recall-option{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  border-color:rgba(255,255,255,.11) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.028)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055) !important;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    color .18s ease !important;
}

.recall-options .recall-option::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 28% 16%, rgba(125,211,252,.18), transparent 42%);
  transition:opacity .18s ease;
}

.recall-options .recall-option:hover,
.recall-options .recall-option:focus-visible{
  transform:translateY(-2px) !important;
  border-color:rgba(125,211,252,.52) !important;
  background:linear-gradient(180deg, rgba(56,189,248,.105), rgba(255,255,255,.038)) !important;
  box-shadow:
    0 16px 42px rgba(0,0,0,.28),
    0 0 24px rgba(56,189,248,.14),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  outline:none !important;
}

.recall-options .recall-option:hover::before,
.recall-options .recall-option:focus-visible::before,
.recall-options .recall-option.is-selected::before{
  opacity:1;
}

.recall-options .recall-option.is-selected,
.recall-options .recall-option[aria-pressed="true"]{
  border-color:rgba(251,146,60,.68) !important;
  background:linear-gradient(135deg, rgba(139,92,246,.22), rgba(251,146,60,.16)) !important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.30),
    0 0 28px rgba(251,146,60,.16),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.recall-options .recall-option-check{
  opacity:0;
  transform:scale(.82);
  transition:opacity .18s ease, transform .18s ease;
}

.recall-options .recall-option.is-selected .recall-option-check,
.recall-options .recall-option[aria-pressed="true"] .recall-option-check{
  opacity:1;
  transform:scale(1);
}

.session-review-card .review-primary-action,
.session-review-card .review-secondary-action,
.session-review-card .review-close,
.recall-card .primary-action,
.recall-card .secondary-action,
.recall-card .review-close{
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    color .18s ease,
    opacity .18s ease !important;
}

.session-review-card .review-primary-action:hover,
.session-review-card .review-primary-action:focus-visible,
.session-review-card .review-secondary-action:hover,
.session-review-card .review-secondary-action:focus-visible,
.session-review-card .review-close:hover,
.session-review-card .review-close:focus-visible,
.recall-card .primary-action:hover,
.recall-card .primary-action:focus-visible,
.recall-card .secondary-action:hover,
.recall-card .secondary-action:focus-visible,
.recall-card .review-close:hover,
.recall-card .review-close:focus-visible{
  transform:translateY(-2px) !important;
  border-color:rgba(125,211,252,.50) !important;
  background:rgba(56,189,248,.10) !important;
  box-shadow:
    0 16px 42px rgba(0,0,0,.30),
    0 0 24px rgba(56,189,248,.15),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  outline:none !important;
}

.session-review-card .review-primary-action:hover,
.session-review-card .review-primary-action:focus-visible,
.recall-card .primary-action:hover,
.recall-card .primary-action:focus-visible{
  background:linear-gradient(135deg, #9b6bff, #ff9f4a) !important;
  box-shadow:
    0 18px 48px rgba(251,146,60,.20),
    0 0 28px rgba(139,92,246,.22),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.session-review-card button:active,
.recall-card button:active,
.recall-options .recall-option:active{
  transform:translateY(0) scale(.992) !important;
}

.session-review-card button:disabled,
.recall-card button:disabled{
  cursor:not-allowed !important;
  opacity:.48 !important;
  transform:none !important;
  box-shadow:none !important;
}




/* AutoByte 1.5.7 cleanup foundation lock: Speed title scale */
.tool-title h1 {
  font-size: 30px !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
}
@media (max-width: 760px) {
  .tool-title h1 {
    font-size: 28px !important;
  }
}