* { box-sizing: border-box; margin: 0; }

body {
  font-family: system-ui, sans-serif;
  background: #11151c;
  color: #e8eaf0;
  min-height: 100vh;
  user-select: none;
}

.screen { display: none; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
.screen.active { display: flex; }

.card { background: #1a2029; border: 1px solid #2a3240; border-radius: 12px; padding: 28px; max-width: 640px; width: 100%; }
.card.center { text-align: center; }

h1 { font-size: 1.4rem; margin-bottom: 16px; }

ul { padding-left: 20px; line-height: 1.9; margin-bottom: 24px; }

button {
  font: inherit;
  background: #2f6fed;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 12px 20px;
  cursor: pointer;
  width: 100%;
}
button:disabled { background: #2a3240; color: #6b7382; cursor: default; }

header {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px;
  background: #1a2029;
  font-size: 0.95rem;
}
#timer { font-variant-numeric: tabular-nums; font-weight: 600; }

#timebar-wrap { position: fixed; top: 44px; left: 0; right: 0; height: 4px; background: #2a3240; }
#timebar { height: 100%; width: 100%; background: #2f6fed; transition: width 1s linear; }
#timebar.low { background: #e05252; }

#screen-quiz .card { margin-top: 64px; }
#qtext { font-size: 1.15rem; line-height: 1.5; margin-bottom: 20px; }

#options { display: grid; gap: 10px; margin-bottom: 20px; }
.option {
  background: #232b37;
  text-align: left;
  border: 1px solid #2a3240;
}
.option.selected { background: #2f6fed; border-color: #2f6fed; }

#overlay {
  position: fixed; inset: 0;
  background: rgba(120, 20, 20, 0.97);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  z-index: 10;
}
#overlay .card { background: #2a1518; border-color: #7a3038; }
#overlay.hidden { display: none; }

#qtext .kod { margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: #11131a; color: #e6e6e9;
  font: 0.95rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; }
.option { white-space: pre-wrap; text-align: left; font-variant-ligatures: none; }

.suv {
  position: fixed;
  right: 12px;
  bottom: 10px;
  pointer-events: none;
  z-index: 50;
  color: #6b7382;
  font: 0.75rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.imtihon .card { max-width: 980px; padding: clamp(20px, 4vw, 40px); border-radius: 16px; }
.imtihon h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
.imtihon ul { font-size: clamp(1rem, 1.8vw, 1.15rem); }
.imtihon button { padding: 16px 22px; font-size: 1.1rem; font-weight: 600; border-radius: 10px; }
.imtihon header { padding: 14px clamp(16px, 3vw, 32px); font-size: 1.05rem; border-bottom: 1px solid #2a3240; }
.imtihon #qnum { font-weight: 700; color: #9ec1ff; }
.imtihon #timer { padding: 4px 14px; border-radius: 999px; background: #15392a; color: #5fe0a0; font-size: 1.15rem; }
.imtihon #timer.mid { background: #3d3315; color: #f5c84c; }
.imtihon #timer.low { background: #45181c; color: #ff7b7b; }
.imtihon #timebar-wrap { top: 56px; height: 6px; }
.imtihon #timebar { background: #3fbf7f; }
.imtihon #timebar.low { background: #e05252; }
.imtihon #screen-quiz .card { margin-top: 84px; }
.imtihon #qtext { font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.5; font-weight: 600; margin-bottom: 26px; }
.imtihon #qtext .kod { margin-top: 18px; padding: 20px 24px; border-radius: 12px; background: #0d1117;
  border: 1px solid #263041; border-left: 4px solid #2f6fed; color: #d4d4d4; font-weight: 400;
  font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.65; }
.imtihon #options { gap: 14px; margin-bottom: 26px; }
.imtihon .option { display: flex; align-items: center; gap: 16px; padding: 16px 18px; font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 500; background: #1f2733; border: 2px solid #2d3747; color: #e8eaf0; transition: border-color .12s, background .12s; }
.imtihon .option:hover { border-color: #4a6fb5; background: #232d3b; }
.imtihon .option.selected { background: #17305e; border-color: #4d8bff; }
.imtihon .harf { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  font-weight: 800; font-size: 1.05rem; color: #0d1117; }
.imtihon .option:nth-child(1) .harf { background: #4d8bff; }
.imtihon .option:nth-child(2) .harf { background: #3fbf7f; }
.imtihon .option:nth-child(3) .harf { background: #f5a524; }
.imtihon .option:nth-child(4) .harf { background: #c084fc; }
.imtihon .option.selected .harf { outline: 3px solid #fff; outline-offset: 2px; }
.imtihon .matn { min-width: 0; overflow-wrap: anywhere; }
.imtihon .matn.kodli { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #d4d4d4; }
.imtihon #confirm:not(:disabled) { background: #3fbf7f; color: #0d1117; }
.t-k { color: #c586c0; }
.t-k2 { color: #569cd6; font-weight: 600; }
.t-b { color: #4fc1ff; }
.t-f { color: #dcdcaa; }
.t-s { color: #ce9178; }
.t-n { color: #b5cea8; }
.t-c { color: #6a9955; font-style: italic; }
.t-o { color: #d4d4d4; }
@media (max-width: 600px) {
  .imtihon .option { gap: 12px; padding: 14px; }
  .imtihon .harf { width: 34px; height: 34px; }
}
.imtihon header { gap: 12px; }
.imtihon #who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imtihon #qnum, .imtihon #timer { flex: none; white-space: nowrap; }
.imtihon #review { text-align: left; margin-top: 24px; }
.imtihon #review .ball { font-size: 1.3rem; font-weight: 700; color: #9ec1ff; text-align: center; }
.imtihon #retry, .imtihon #retry-end { display: block; margin: 16px auto 8px; background: #3fbf7f; color: #0d1117; }
.imtihon #retry[hidden], .imtihon #retry-end[hidden] { display: none; }
.imtihon #mistakes { padding-left: 1.4em; }
.imtihon #mistakes li { margin: 0 0 22px; padding: 16px 18px; border-radius: 12px; background: #161b24; border: 1px solid #263041; }
.imtihon #mistakes .savol { font-weight: 600; font-size: 1.1rem; margin-bottom: 10px; }
.imtihon #mistakes .kod { margin: 10px 0; padding: 14px 18px; border-radius: 10px; background: #0d1117; border-left: 4px solid #2f6fed;
  color: #d4d4d4; font: 1rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; }
.imtihon #mistakes p { margin: 6px 0; white-space: pre-wrap; }
.imtihon #mistakes .xato { color: #ff8f8f; }
.imtihon #mistakes .togri { color: #5fe0a0; }
.imtihon #mistakes .kodli { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.imtihon .nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.imtihon button.ikkinchi { background: #232d3b; color: #d4dbe6; border: 1px solid #34405a; }
.imtihon button.ikkinchi:disabled { opacity: .4; }
.imtihon #grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; margin-bottom: 16px; }
.imtihon #grid button { min-height: 44px; padding: 0; font-size: 1rem; background: #161b24; color: #9aa4b2; border: 1px solid #263041; }
.imtihon #grid button.javobli { background: #17305e; color: #fff; border-color: #4d8bff; }
.imtihon #grid button.joriy { outline: 3px solid #f5c84c; outline-offset: 1px; }
.imtihon #finish { display: block; width: 100%; background: #3fbf7f; color: #0d1117; }
#ask { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.7); z-index: 20; }
#ask.hidden { display: none; }
#ask h1 { font-size: 1.25rem; }
.imtihon .filtr { display: block; margin: 0 0 14px; color: #9aa4b2; cursor: pointer; }
.imtihon .filtr[hidden] { display: none; }
.imtihon #mistakes li.javob-ok { border-color: #1f4a35; }
.imtihon #mistakes li.javob-xato { border-color: #5a2a30; }
.imtihon #mistakes .nega { color: #c9d1dc; background: #1b2230; padding: 10px 12px; border-radius: 8px; }