.quiz-shell {
  width: min(920px, calc(100% - 250px));
  min-height: calc(72vh + 105px);
}

.question-track {
  position: absolute;
  top: 0;
  left: calc(100% + 24px);
  width: 190px;
  height: 72vh;
  padding: 16px;
  border: 1px solid #284f70;
  background: linear-gradient(180deg, #071d32f5, #041321f5);
  box-shadow: 0 20px 45px #0006;
}

.track-heading span,
.track-heading strong { display: block; text-transform: uppercase; }
.track-heading span { color: #54c7ff; font-size: 8px; letter-spacing: .17em; }
.track-heading strong { margin-top: 4px; font-family: var(--display); font-size: 19px; }
.track-score { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 13px 0; }
.track-score span { padding: 8px; border: 1px solid #ffffff18; text-align: center; }
.track-score b,.track-score small { display: block; }
.track-score b { font-family: var(--display); font-size: 20px; }
.track-score small { margin-top: 2px; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.track-right b,.track-right small { color: var(--green); }
.track-wrong b,.track-wrong small { color: var(--red); }
.track-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; height: calc(72vh - 280px); min-height: 170px; padding-right: 4px; overflow-y: auto; scrollbar-color: #2874a9 #07182a; scrollbar-width: thin; }
.track-item { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 7px; border: 1px solid #213f5a; background: #07182a; color: #668096; transition: .2s; }
.track-item span { font-family: var(--display); font-size: 12px; }
.track-item i { font-size: 12px; font-style: normal; }
.track-item.current { border-color: var(--cyan); background: #0d385c; color: #fff; box-shadow: inset 3px 0 var(--cyan), 0 0 12px #168bf83d; }
.track-item.right { border-color: #177657; color: var(--green); background: #092b25; }
.track-item.wrong { border-color: #84303d; color: var(--red); background: #30151c; }
.track-item.right.current { box-shadow: inset 3px 0 var(--green), 0 0 12px #21d78535; }
.track-item.wrong.current { box-shadow: inset 3px 0 var(--red), 0 0 12px #ff4f6035; }
.track-legend { display: flex; justify-content: space-between; margin-top: 12px; color: #668096; font-size: 7px; text-transform: uppercase; }
.track-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }
.track-statistics { margin-top: 12px; padding-top: 11px; border-top: 1px solid #ffffff18; }
.stat-title,.stat-row { display: flex; align-items: center; justify-content: space-between; }
.stat-title { margin-bottom: 9px; color: #7e96aa; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.stat-title b { color: #d9e8f4; font-family: var(--display); font-size: 12px; }
.stat-row { margin: 7px 0 4px; color: #7990a5; font-size: 7px; text-transform: uppercase; }
.stat-row b { font-family: var(--display); font-size: 12px; }
.stat-bar { height: 3px; background: #ffffff14; }
.stat-bar i { display: block; width: 0; height: 100%; transition: width .35s ease; }
.stat-bar.right i { background: var(--green); box-shadow: 0 0 7px #21d78599; }
.stat-bar.wrong i { background: var(--red); box-shadow: 0 0 7px #ff4f6099; }

@media (max-width: 1200px) {
  .quiz-shell { width: min(920px, calc(100% - 32px)); min-height: 0; }
  .question-track { position: static; width: 100%; height: auto; max-height: none; margin-top: 24px; }
  .track-items { display: flex; width: 100%; height: auto; min-height: 0; padding: 2px 0 7px; overflow-x: auto; }
  .track-item { min-width: 58px; }
}