/* ===========================================================================
   Informatika — mutaxassislik fan

   Klassik akademik musobaqa uslubi: tinch ranglar, aniq jadvallar, tor
   burchaklar, kam bezak. Saytning qolgan qismi yumaloq va rangli — bu
   bo'lim esa ish maydoni: o'quvchi bu yerda soatlab masala yechadi,
   shuning uchun ko'z charchatmaydigan, tez o'qiladigan ko'rinish.

   Ranglar `--oj-*` o'zgaruvchilarida. Qorong'i rejim saytning umumiy
   kalitiga (`data-bs-theme`) bo'ysunadi — o'quvchi bo'limga kirganda
   temani qaytadan tanlamaydi.
   =========================================================================== */

:root {
  --oj-bg:          #f4f5f7;
  --oj-surface:     #ffffff;
  --oj-surface-alt: #fafbfc;
  --oj-border:      #d7dce3;
  --oj-border-soft: #e6e9ee;

  --oj-text:        #1a2733;
  --oj-muted:       #5b6b7c;
  --oj-faint:       #8794a3;

  --oj-link:        #14568c;
  --oj-link-hover:  #0d3c66;
  --oj-head:        #123a5c;
  --oj-accent:      #123a5c;

  --oj-ok:          #1c7a45;
  --oj-ok-bg:       #e6f4ec;
  --oj-bad:         #b02a1c;
  --oj-bad-bg:      #fbeceb;
  --oj-warn:        #96590a;
  --oj-warn-bg:     #fdf3e3;
  --oj-wait:        #4b5b6b;
  --oj-wait-bg:     #eef1f4;
  --oj-info:        #0f5c74;
  --oj-info-bg:     #e6f2f6;

  --oj-radius:      3px;
  --oj-mono: "Cascadia Mono", "Consolas", "SF Mono", "DejaVu Sans Mono", monospace;
  --oj-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

[data-bs-theme="dark"] {
  --oj-bg:          #12171d;
  --oj-surface:     #1a2129;
  --oj-surface-alt: #1f2731;
  --oj-border:      #2f3a46;
  --oj-border-soft: #262f39;

  --oj-text:        #dfe6ee;
  --oj-muted:       #9aa8b7;
  --oj-faint:       #75828f;

  --oj-link:        #6bb2ec;
  --oj-link-hover:  #97cbf5;
  --oj-head:        #cfe0f0;
  --oj-accent:      #2f6fa5;

  --oj-ok:          #4cc07d;
  --oj-ok-bg:       #16301f;
  --oj-bad:         #f08579;
  --oj-bad-bg:      #351c18;
  --oj-warn:        #e5aa5a;
  --oj-warn-bg:     #33260f;
  --oj-wait:        #a8b5c2;
  --oj-wait-bg:     #232c35;
  --oj-info:        #6ec2d8;
  --oj-info-bg:     #132b33;
}

/* --------------------------------------------------------------------------
   Karkas
   -------------------------------------------------------------------------- */
.oj {
  background: var(--oj-bg);
  color: var(--oj-text);
  font-family: var(--oj-sans);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.oj a { color: var(--oj-link); text-decoration: none; }
.oj a:hover { color: var(--oj-link-hover); text-decoration: underline; }

.oj-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

.oj-main { flex: 1; padding: 18px 0 40px; }

/* Shapka */
.oj-header {
  background: var(--oj-surface);
  border-bottom: 1px solid var(--oj-border);
}

.oj-header__top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  flex-wrap: wrap;
}

.oj-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--oj-head) !important;
  text-decoration: none !important;
}

/* Litsey gerbi: litsey saytiga qaytish havolasi */
.oj-lyceum {
  display: flex;
  flex-shrink: 0;
  margin-right: -6px;
  border-radius: 50%;
  transition: transform .15s ease;
}
.oj-lyceum:hover { transform: scale(1.06); }
.oj-lyceum:focus-visible { outline: 2px solid var(--oj-accent); outline-offset: 3px; }

.oj-brand__mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--oj-accent);
  color: #fff;
  border-radius: var(--oj-radius);
  font-size: 16px;
}

.oj-brand__name { font-weight: 700; font-size: 15px; letter-spacing: .2px; }
.oj-brand__sub { display: block; font-size: 11.5px; color: var(--oj-muted); font-weight: 400; }

.oj-header__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.oj-search {
  display: flex;
  border: 1px solid var(--oj-border);
  border-radius: var(--oj-radius);
  overflow: hidden;
  background: var(--oj-surface);
}
.oj-search input {
  border: 0; padding: 5px 9px; font-size: 13px; width: 190px;
  background: transparent; color: var(--oj-text);
}
.oj-search input:focus { outline: 2px solid var(--oj-link); outline-offset: -2px; }
.oj-search button {
  border: 0; border-left: 1px solid var(--oj-border);
  background: var(--oj-surface-alt); color: var(--oj-muted);
  padding: 5px 10px; cursor: pointer;
}
.oj-search button:hover { color: var(--oj-link); }

/* Telefonda o'ng qism bir qatorga sig'maydi va sahifani yonga suradi:
   qidiruv alohida qatorga to'liq kenglikda, tugmalar uning ostida,
   akkaunt o'ng chetda. */
@media (max-width: 700px) {
  .oj-header__right { flex: 1 1 100%; flex-wrap: wrap; margin-left: 0; }
  .oj-search { flex: 1 1 100%; }
  .oj-search input { flex: 1; width: auto; min-width: 0; }
  .oj-me { margin-left: auto; max-width: 60%; min-width: 0; }
  .oj-me > :last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Menyu */
.oj-nav {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border-top: 1px solid var(--oj-border-soft);
}
.oj-nav a {
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--oj-muted) !important;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  text-decoration: none !important;
}
.oj-nav a:hover { color: var(--oj-link) !important; background: var(--oj-surface-alt); }
.oj-nav a.is-active {
  color: var(--oj-head) !important;
  border-bottom-color: var(--oj-link);
  background: var(--oj-surface-alt);
}
.oj-nav a.oj-nav__manage { margin-left: auto; color: var(--oj-warn) !important; }

/* Yo'naltirgich */
.oj-crumbs {
  font-size: 12.5px;
  color: var(--oj-faint);
  padding: 10px 0 0;
}
.oj-crumbs a { color: var(--oj-muted); }
.oj-crumbs span { margin: 0 6px; }

/* Sarlavha */
.oj-title {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 10px 0 14px;
}
.oj-title h1 {
  font-size: 21px; font-weight: 700; color: var(--oj-head); margin: 0;
}
.oj-title p { margin: 0; color: var(--oj-muted); font-size: 13px; }

/* Profil sarlavhasi: rasm va ism yonma-yon. `baseline` o'rniga
   `center` — aks holda avatar matnning tagiga osilib qoladi. */
.oj-title--person { align-items: center; }

.oj-h2 {
  font-size: 15px; font-weight: 700; color: var(--oj-head);
  margin: 22px 0 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--oj-border);
}

/* Panellar */
.oj-panel {
  background: var(--oj-surface);
  border: 1px solid var(--oj-border);
  border-radius: var(--oj-radius);
  margin-bottom: 16px;
}
.oj-panel__head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--oj-border);
  background: var(--oj-surface-alt);
  font-weight: 700;
  font-size: 13px;
  color: var(--oj-head);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.oj-panel__body { padding: 12px; }
.oj-panel__body > *:last-child { margin-bottom: 0; }

.oj-grid { display: grid; gap: 16px; }
.oj-grid--main { grid-template-columns: minmax(0, 1fr) 300px; }
.oj-grid--half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oj-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oj-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .oj-grid--main, .oj-grid--half, .oj-grid--3, .oj-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Jadvallar
   -------------------------------------------------------------------------- */
.oj-table-wrap { overflow-x: auto; }

.oj-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--oj-surface);
}
.oj-table th, .oj-table td {
  border: 1px solid var(--oj-border-soft);
  padding: 6px 10px;
  text-align: left;
  vertical-align: middle;
}
.oj-table thead th {
  background: var(--oj-surface-alt);
  color: var(--oj-head);
  font-weight: 700;
  font-size: 12.5px;
  border-color: var(--oj-border);
  white-space: nowrap;
}
.oj-table tbody tr:hover { background: var(--oj-surface-alt); }
.oj-table td.num, .oj-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.oj-table td.mid, .oj-table th.mid { text-align: center; }
.oj-table .oj-code-cell { font-family: var(--oj-mono); font-size: 12.5px; }
.oj-table tr.is-solved td:first-child { border-left: 3px solid var(--oj-ok); }

/* --------------------------------------------------------------------------
   Nishonlar
   -------------------------------------------------------------------------- */
.oj-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--oj-radius);
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.oj-badge--muted { background: var(--oj-wait-bg); color: var(--oj-wait); border-color: var(--oj-border); }
.oj-badge--ok { background: var(--oj-ok-bg); color: var(--oj-ok); border-color: currentColor; }
.oj-badge--bad { background: var(--oj-bad-bg); color: var(--oj-bad); border-color: currentColor; }
.oj-badge--warn { background: var(--oj-warn-bg); color: var(--oj-warn); border-color: currentColor; }
.oj-badge--info { background: var(--oj-info-bg); color: var(--oj-info); border-color: currentColor; }

/* Natijalar */
.oj-v { font-weight: 700; font-size: 12.5px; }
.oj-v--ok { color: var(--oj-ok); }
.oj-v--bad { color: var(--oj-bad); }
.oj-v--partial { color: var(--oj-warn); }
.oj-v--wait { color: var(--oj-wait); }
.oj-v--err { color: var(--oj-bad); font-style: italic; }

/* Qiyinlik */
.oj-diff { font-weight: 600; font-size: 12.5px; white-space: nowrap; }
/* Masala reytingi — Codeforces ranglari (apps/contest/problem_rating.py) */
.oj-diff-cell { white-space: nowrap; }
.oj-range { display: flex; align-items: center; gap: 4px; }
.oj-range .oj-select { min-width: 0; flex: 1 1 0; }
.oj-rating { display: inline-block; min-width: 38px; padding: 1px 6px; margin-right: 4px; border-radius: 6px;
  font: 700 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: center;
  color: var(--oj-rating, #808080); background: color-mix(in srgb, var(--oj-rating, #808080) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--oj-rating, #808080) 35%, transparent); }
.oj-rating--gray   { --oj-rating: #808080; }
.oj-rating--green  { --oj-rating: #008000; }
.oj-rating--cyan   { --oj-rating: #03a89e; }
.oj-rating--blue   { --oj-rating: #0000ff; }
.oj-rating--violet { --oj-rating: #aa00aa; }
.oj-rating--orange { --oj-rating: #ff8c00; }
.oj-rating--red    { --oj-rating: #ff0000; }
.oj-diff--beginner  { color: #2e7d32; }
.oj-diff--easy      { color: #1b7a4b; }
.oj-diff--medium    { color: #96590a; }
.oj-diff--hard      { color: #b0521c; }
.oj-diff--very-hard { color: #a52a2a; }
.oj-diff--olympiad  { color: #6a1b9a; }

[data-bs-theme="dark"] .oj-diff--beginner  { color: #7bc47f; }
[data-bs-theme="dark"] .oj-diff--easy      { color: #63c495; }
[data-bs-theme="dark"] .oj-diff--medium    { color: #e0a35c; }
[data-bs-theme="dark"] .oj-diff--hard      { color: #ef9a6a; }
[data-bs-theme="dark"] .oj-diff--very-hard { color: #ef8a8a; }
[data-bs-theme="dark"] .oj-diff--olympiad  { color: #c79ae0; }

/* Uch tilli maydon (boshqaruv formalari): UZ · RU · EN tablari */
.oj-i18n__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.oj-i18n__tabs { display: inline-flex; border: 1px solid var(--oj-border); border-bottom: 0;
                 border-radius: var(--oj-radius) var(--oj-radius) 0 0; overflow: hidden; }
.oj-i18n__tab { position: relative; border: 0; background: transparent; color: var(--oj-muted);
                font-size: 11.5px; font-weight: 700; padding: 3px 10px; cursor: pointer; }
.oj-i18n__tab + .oj-i18n__tab { border-left: 1px solid var(--oj-border); }
.oj-i18n__tab.is-active { background: var(--oj-surface-alt); color: var(--oj-text); }
.oj-i18n__tab.has-error { color: #c5221f; }
.oj-i18n__dot { display: inline-block; width: 5px; height: 5px; margin-left: 4px; border-radius: 50%;
                background: #1e8e3e; vertical-align: middle; }

/* Til almashtirgich (shapkada) */
.oj-lang { display: inline-flex; border: 1px solid var(--oj-border); border-radius: var(--oj-radius); overflow: hidden; }
.oj-lang__item { border: 0; background: transparent; color: var(--oj-muted); font-size: 12px;
                 font-weight: 600; padding: 4px 8px; cursor: pointer; }
.oj-lang__item + .oj-lang__item { border-left: 1px solid var(--oj-border); }
.oj-lang__item:hover { color: var(--oj-text); }
.oj-lang__item.is-active { background: var(--oj-surface-alt); color: var(--oj-text); }

/* Reyting unvonlari — Codeforces ranglari (`apps/contest/problem_rating.py`).
   `--tier` bitta joyda: matn rangi ham, grafik foni ham shundan olinadi. */
.oj-tier--unrated     { --tier: var(--oj-text); }
.oj-tier--newbie      { --tier: #808080; }
.oj-tier--pupil       { --tier: #008000; }
.oj-tier--specialist  { --tier: #03a89e; }
.oj-tier--expert      { --tier: #0000ff; }
.oj-tier--candidate   { --tier: #aa00aa; }
.oj-tier--master      { --tier: #ff8c00; }
.oj-tier--grandmaster { --tier: #ff0000; }
[data-bs-theme="dark"] .oj-tier--newbie    { --tier: #a0a0a0; }
[data-bs-theme="dark"] .oj-tier--pupil     { --tier: #4cbb4c; }
[data-bs-theme="dark"] .oj-tier--specialist { --tier: #3cc8bd; }
[data-bs-theme="dark"] .oj-tier--expert    { --tier: #6b8cff; }
[data-bs-theme="dark"] .oj-tier--candidate { --tier: #d56bd5; }
[data-bs-theme="dark"] .oj-tier--grandmaster { --tier: #ff5a5a; }
[class*="oj-tier--"],
.oj a[class*="oj-tier--"],
.oj a[class*="oj-tier--"]:hover { color: var(--tier); }   /* havola rangidan ustun */
.oj-tier-name { font-weight: 700; }
.oj-delta--up { color: #1e8e3e; font-size: 12px; }
.oj-delta--down { color: #c5221f; font-size: 12px; }
[data-bs-theme="dark"] .oj-delta--up { color: #5bc97a; }
[data-bs-theme="dark"] .oj-delta--down { color: #ef7b76; }

/* Reyting grafigi: fon — unvon chiziqlari, ustida — reyting chizig'i */
.oj-rating-chart { width: 100%; height: auto; display: block; }
.oj-rating-chart .band { fill: var(--tier); opacity: .16; }
.oj-rating-chart .grid { stroke: var(--oj-border); stroke-width: 1; }
.oj-rating-chart .axis { fill: var(--oj-muted); font-size: 11px; }
.oj-rating-chart .line { fill: none; stroke: #e0a100; stroke-width: 2; }
.oj-rating-chart .dot { fill: #fff; stroke: #e0a100; stroke-width: 2; }
.oj-rating-chart a:hover .dot, .oj-rating-chart a:focus .dot { fill: #e0a100; }

/* --------------------------------------------------------------------------
   Tugmalar va maydonlar
   -------------------------------------------------------------------------- */
.oj-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--oj-border);
  border-radius: var(--oj-radius);
  background: var(--oj-surface);
  color: var(--oj-text) !important;
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  text-decoration: none !important;
  font-family: inherit;
  transition: background-color .15s ease, border-color .15s ease,
              box-shadow .15s ease, filter .15s ease, transform .05s ease;
}
.oj-btn:hover { background: var(--oj-surface-alt); border-color: var(--oj-link); }
.oj-btn:active { transform: translateY(1px); }
.oj-btn:focus-visible { outline: 2px solid var(--oj-link); outline-offset: 1px; }
.oj-btn[disabled], .oj-btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none; }

.oj-btn--primary {
  background: var(--oj-accent); border-color: var(--oj-accent); color: #fff !important;
}
.oj-btn--primary:hover {
  background: var(--oj-link); border-color: var(--oj-link);
  box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .4);
}
.oj-btn--primary:active { filter: brightness(.95); box-shadow: none; }

.oj-btn--ok { background: var(--oj-ok); border-color: var(--oj-ok); color: #fff !important; }
.oj-btn--ok:hover { filter: brightness(1.1); box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .4); }

.oj-btn--danger { background: var(--oj-bad); border-color: var(--oj-bad); color: #fff !important; }
.oj-btn--danger:hover { filter: brightness(1.1); box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .4); }

.oj-btn--sm { padding: 3px 9px; font-size: 12.5px; }
.oj-btn--ghost { background: transparent; }
.oj-btn--ghost:hover { background: var(--oj-surface-alt); }
.oj-btn.is-active {
  background: var(--oj-accent); border-color: var(--oj-accent); color: #fff !important;
}
@keyframes oj-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.oj-btn.is-loading { opacity: .75; cursor: wait; }
.oj-btn.is-loading i { animation: oj-spin .7s linear infinite; }

.oj-input, .oj-select, .oj-textarea {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--oj-border);
  border-radius: var(--oj-radius);
  background: var(--oj-surface);
  color: var(--oj-text);
  font-size: 13.5px;
  font-family: inherit;
}
.oj-textarea { font-family: inherit; line-height: 1.5; }
.oj-mono, .oj-textarea.oj-mono { font-family: var(--oj-mono); font-size: 13px; }
.oj-input--num { max-width: 120px; }
.oj-input:focus, .oj-select:focus, .oj-textarea:focus {
  outline: 2px solid var(--oj-link); outline-offset: -1px; border-color: var(--oj-link);
}

.oj-field { margin-bottom: 12px; }
.oj-field label { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 3px; color: var(--oj-head); }
.oj-field .oj-help { font-size: 12px; color: var(--oj-muted); margin-top: 3px; }
.oj-field .oj-error { font-size: 12.5px; color: var(--oj-bad); margin-top: 3px; }

.oj-filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
}
.oj-filters .oj-field { margin: 0; min-width: 150px; flex: 1 1 150px; }
.oj-filters .oj-field--wide { flex: 2 1 260px; }

.oj-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.oj-checks label { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; }

/* Xabarlar */
.oj-note-box {
  padding: 9px 12px;
  border: 1px solid var(--oj-border);
  border-left: 3px solid var(--oj-info);
  border-radius: var(--oj-radius);
  background: var(--oj-info-bg);
  font-size: 13px;
  margin-bottom: 14px;
}
.oj-note-box--warn { border-left-color: var(--oj-warn); background: var(--oj-warn-bg); }
.oj-note-box--bad { border-left-color: var(--oj-bad); background: var(--oj-bad-bg); }
.oj-note-box--ok { border-left-color: var(--oj-ok); background: var(--oj-ok-bg); }

.oj-empty {
  padding: 28px 14px; text-align: center; color: var(--oj-muted); font-size: 13.5px;
}

/* --------------------------------------------------------------------------
   Masala matni
   -------------------------------------------------------------------------- */
.oj-statement {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--oj-text);
}
.oj-statement h2, .oj-statement h3, .oj-statement h4 {
  font-size: 15px; font-weight: 700; color: var(--oj-head); margin: 18px 0 6px;
}
.oj-statement p { margin: 0 0 10px; }
.oj-statement ul, .oj-statement ol { margin: 0 0 10px; padding-left: 22px; }
.oj-statement li { margin-bottom: 3px; }
.oj-statement code {
  font-family: var(--oj-mono); font-size: 13px;
  background: var(--oj-surface-alt); border: 1px solid var(--oj-border-soft);
  border-radius: 2px; padding: 0 4px; color: var(--oj-text);
}
.oj-statement .oj-math { font-family: var(--oj-mono); font-style: italic; }
.oj-note {
  margin: 0 0 10px; padding: 8px 12px;
  border-left: 3px solid var(--oj-border);
  background: var(--oj-surface-alt);
  color: var(--oj-muted);
}
.oj-code {
  background: var(--oj-surface-alt);
  border: 1px solid var(--oj-border);
  border-radius: var(--oj-radius);
  padding: 10px 12px;
  overflow-x: auto;
  margin: 0 0 12px;
}
.oj-code code {
  font-family: var(--oj-mono); font-size: 13px; background: none;
  border: 0; padding: 0; white-space: pre;
}

/* Masala yon paneli */
.oj-meta { font-size: 13px; }
.oj-meta__row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-bottom: 1px dashed var(--oj-border-soft);
}
.oj-meta__row:last-child { border-bottom: 0; }
.oj-meta__key { color: var(--oj-muted); }
.oj-meta__val { font-weight: 600; text-align: right; }

/* Tekshiruv jarayonida: har test uchun bitta "pilla", tugagan sari
   rangga kirib "sakraydi" (RoboContest uslubidagi qator). */
@keyframes oj-progress-pop {
  0% { transform: scale(.7); opacity: .4; }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes oj-progress-pulse {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}
.oj-progress { display: flex; flex-wrap: wrap; gap: 6px; }
.oj-progress__cell {
  min-width: 34px; height: 24px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--oj-surface-alt); border: 1px solid var(--oj-border);
  color: var(--oj-muted); font-size: 11.5px; font-weight: 700;
  font-family: var(--oj-mono);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.oj-progress__cell.oj-v--ok {
  background: var(--oj-ok); border-color: var(--oj-ok); color: #fff;
  animation: oj-progress-pop .35s ease;
}
.oj-progress__cell.oj-v--bad,
.oj-progress__cell.oj-v--err {
  background: var(--oj-bad); border-color: var(--oj-bad); color: #fff;
  animation: oj-progress-pop .35s ease;
}
.oj-progress__cell.oj-v--partial {
  background: var(--oj-warn); border-color: var(--oj-warn); color: #fff;
  animation: oj-progress-pop .35s ease;
}
.oj-progress__cell.oj-v--wait {
  background: var(--oj-surface-alt); border-color: var(--oj-border);
  animation: oj-progress-pulse 1.4s ease-in-out infinite;
}
.oj-progress__cell.is-current {
  border-color: var(--oj-link); color: var(--oj-link);
}

/* Misollar */
.oj-samples { display: grid; gap: 12px; }
.oj-sample {
  border: 1px solid var(--oj-border);
  border-radius: var(--oj-radius);
  overflow: hidden;
}
.oj-sample__grid { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .oj-sample__grid { grid-template-columns: 1fr; } }
.oj-sample__col + .oj-sample__col { border-left: 1px solid var(--oj-border); }
@media (max-width: 700px) {
  .oj-sample__col + .oj-sample__col { border-left: 0; border-top: 1px solid var(--oj-border); }
}
.oj-sample__head {
  padding: 5px 10px; background: var(--oj-surface-alt);
  border-bottom: 1px solid var(--oj-border);
  font-size: 12px; font-weight: 700; color: var(--oj-head);
  display: flex; justify-content: space-between; align-items: center;
}
.oj-sample__copy {
  border: 0; background: none; color: var(--oj-link); cursor: pointer;
  font-size: 11.5px; font-weight: 600; padding: 0;
}
.oj-sample pre {
  margin: 0; padding: 9px 10px; font-family: var(--oj-mono); font-size: 13px;
  white-space: pre; overflow-x: auto; background: var(--oj-surface);
  color: var(--oj-text); min-height: 42px;
}
.oj-sample__note {
  padding: 6px 10px; font-size: 12.5px; color: var(--oj-muted);
  border-top: 1px dashed var(--oj-border-soft);
}

/* --------------------------------------------------------------------------
   Kod muharriri
   -------------------------------------------------------------------------- */
.oj-editor {
  border: 1px solid var(--oj-border);
  border-radius: var(--oj-radius);
  background: var(--oj-surface);
  overflow: hidden;
}
.oj-editor__bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 10px;
  background: var(--oj-surface-alt);
  border-bottom: 1px solid var(--oj-border);
}
.oj-editor__bar .oj-select { width: auto; min-width: 150px; }
.oj-editor__spacer { margin-left: auto; }
.oj-editor__hint { font-size: 12px; color: var(--oj-muted); }

.oj-editor__pane {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  background: var(--oj-surface);
  font-family: var(--oj-mono);
  font-size: 13.5px;
  line-height: 1.5;
}

.oj-editor__gutter {
  padding: 10px 8px 10px 10px;
  text-align: right;
  color: var(--oj-faint);
  background: var(--oj-surface-alt);
  border-right: 1px solid var(--oj-border-soft);
  user-select: none;
  white-space: pre;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

.oj-editor__scroll {
  position: relative;
  overflow: auto;
  max-height: 62vh;
  min-height: 320px;
}

/* Bo'yalgan qatlam va haqiqiy maydon aynan ustma-ust turishi shart:
   bitta piksel farq ham kursorni "sirg'antirib" yuboradi. */
.oj-editor__highlight,
.oj-editor__input {
  margin: 0;
  padding: 10px 12px;
  font: inherit;
  line-height: inherit;
  white-space: pre;
  word-wrap: normal;
  tab-size: 4;
  border: 0;
  min-height: 320px;
  box-sizing: border-box;
}

.oj-editor__highlight {
  position: absolute;
  inset: 0;
  color: var(--oj-text);
  pointer-events: none;
  overflow: hidden;
}

.oj-editor__input {
  position: relative;
  display: block;
  width: 100%;
  background: transparent;
  color: transparent;
  caret-color: var(--oj-text);
  resize: none;
  outline: none;
  overflow: hidden;
}
.oj-editor__input::selection { background: rgba(20, 86, 140, .28); color: transparent; }
.oj-editor__input:focus { outline: none; }
.oj-editor.is-focused { border-color: var(--oj-link); }

/* Sintaksis */
.tok-kw { color: #0b57a4; font-weight: 600; }
.tok-str { color: #0f7b3f; }
.tok-num { color: #a3541a; }
.tok-com { color: var(--oj-faint); font-style: italic; }
.tok-fn { color: #6a1b9a; }
.tok-op { color: #7a3b2a; }

[data-bs-theme="dark"] .tok-kw { color: #7cb7f0; }
[data-bs-theme="dark"] .tok-str { color: #86d19a; }
[data-bs-theme="dark"] .tok-num { color: #e0a35c; }
[data-bs-theme="dark"] .tok-fn { color: #cfa0ea; }
[data-bs-theme="dark"] .tok-op { color: #dba58f; }

.oj-editor__actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 8px 10px;
  border-top: 1px solid var(--oj-border);
  background: var(--oj-surface-alt);
}
.oj-editor__status { font-size: 12.5px; color: var(--oj-muted); margin-left: auto; }

/* "Sinab ko'rish" natijasi */
.oj-run {
  margin: 0; padding: 10px; display: grid; gap: 10px;
  border-top: 1px solid var(--oj-border);
  background: var(--oj-surface);
}
.oj-run__row label {
  display: block; font-weight: 600; font-size: 12.5px;
  margin-bottom: 4px; color: var(--oj-head);
}
.oj-run__head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-weight: 600; font-size: 12.5px; color: var(--oj-head); margin-bottom: 4px;
}
.oj-run__meta { font-weight: 400; color: var(--oj-muted); }
.oj-run__output {
  margin: 0; padding: 9px 10px; min-height: 42px; max-height: 260px;
  border: 1px solid var(--oj-border); border-radius: var(--oj-radius);
  background: var(--oj-surface-alt); color: var(--oj-text);
  font-family: var(--oj-mono); font-size: 13px;
  white-space: pre-wrap; word-break: break-word; overflow: auto;
}

/* Qoralama doskasi */
.oj-scratchpad { border-top: 1px solid var(--oj-border); }
.oj-scratchpad__tools {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 10px;
  border-bottom: 1px solid var(--oj-border);
  background: var(--oj-surface-alt);
}
.oj-scratchpad__spacer { flex: 1 1 auto; }
.oj-scratchpad__color {
  width: 30px; height: 28px; padding: 2px;
  border: 1px solid var(--oj-border); border-radius: var(--oj-radius);
  background: var(--oj-surface); cursor: pointer;
}
.oj-scratchpad__width { width: 100px; accent-color: var(--oj-link); }
.oj-scratchpad__canvas {
  display: block; width: 100%; height: 380px;
  background: var(--oj-surface); cursor: crosshair;
}

@media (max-width: 700px) {
  .oj-scratchpad__canvas { height: 280px; }
}

/* --------------------------------------------------------------------------
   Musobaqa
   -------------------------------------------------------------------------- */
.oj-contest-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--oj-border);
  background: var(--oj-surface);
}
.oj-contest-bar__title { font-weight: 700; font-size: 15px; color: var(--oj-head); }
.oj-contest-bar__sub { font-size: 12.5px; color: var(--oj-muted); }

.oj-timer {
  font-family: var(--oj-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--oj-head);
  font-variant-numeric: tabular-nums;
}
.oj-timer.is-soon { color: var(--oj-bad); }
.oj-timer__label { display: block; font-size: 11px; font-weight: 600; color: var(--oj-muted); letter-spacing: 0; font-family: var(--oj-sans); }

.oj-subnav { display: flex; gap: 2px; flex-wrap: wrap; }
.oj-subnav a {
  padding: 5px 12px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--oj-border); border-radius: var(--oj-radius);
  color: var(--oj-muted) !important; background: var(--oj-surface);
  text-decoration: none !important;
}
.oj-subnav a.is-active { background: var(--oj-accent); border-color: var(--oj-accent); color: #fff !important; }

/* Jadval kataklari */
.oj-cell { text-align: center; font-weight: 700; font-size: 13px; min-width: 46px; }
.oj-cell--ok { background: var(--oj-ok-bg); color: var(--oj-ok); }
.oj-cell--bad { background: var(--oj-bad-bg); color: var(--oj-bad); }
.oj-cell--wait { background: var(--oj-wait-bg); color: var(--oj-wait); }
.oj-cell--frozen { background: var(--oj-info-bg); color: var(--oj-info); }
.oj-cell__min { display: block; font-size: 10.5px; font-weight: 400; color: var(--oj-muted); }

.oj-rank { font-weight: 700; font-variant-numeric: tabular-nums; }
.oj-standings tbody tr.is-me { outline: 2px solid var(--oj-link); outline-offset: -2px; }

/* --------------------------------------------------------------------------
   Himoyalangan matn (nusxa olishga qarshi)
   -------------------------------------------------------------------------- */
.oj-protected {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  position: relative;
}
/* Muharrir va maydonlar himoyadan tashqarida: o'quvchi kod yozishi kerak */
.oj-protected input,
.oj-protected textarea,
.oj-protected .oj-editor,
.oj-protected [contenteditable] {
  user-select: text;
  -webkit-user-select: text;
}

.oj-watermark {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: .05;
  font-size: 15px;
  font-weight: 700;
  color: var(--oj-text);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-content: start;
  gap: 60px 20px;
  padding: 40px 10px;
  transform: rotate(-24deg) scale(1.4);
  transform-origin: center;
}
.oj-watermark span { white-space: nowrap; }

/* Oynadan chiqilganda xiralashtirish (screenshot to'sig'i) */
.oj.is-blurred { filter: blur(14px); pointer-events: none; user-select: none; }
.oj-focus-guard {
  position: fixed; inset: 0; z-index: 20;
  display: none; align-items: center; justify-content: center;
  padding: 20px; text-align: center; cursor: pointer;
  background: rgba(0, 0, 0, .55);
}
.oj-focus-guard.is-visible { display: flex; }
.oj-focus-guard__box {
  max-width: 380px;
  padding: 20px 26px;
  border: 1px solid var(--oj-border);
  border-radius: var(--oj-radius);
  background: var(--oj-surface);
  color: var(--oj-text);
  font-size: 15px; font-weight: 600; line-height: 1.5;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .4);
}

.oj-focus-guard__box--warn { border-color: var(--oj-bad); }
.oj-focus-guard__count { display: block; margin-top: 8px; color: var(--oj-bad); font-size: 14px; }

/* Sahifa ichidagi tasdiqlash oynasi (brauzer confirm() fokusni olib ketadi) */
.oj-dialog {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, .5);
}
.oj-dialog__box {
  width: 100%; max-width: 360px; padding: 18px 20px;
  border: 1px solid var(--oj-border); border-radius: var(--oj-radius);
  background: var(--oj-surface); color: var(--oj-text);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .4);
}
.oj-dialog__text { margin: 0 0 14px; font-weight: 600; }
.oj-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* --------------------------------------------------------------------------
   Masala sahifasi: o'ngda qotib turadigan kod paneli (`_dock.html`, `dock.js`)
   -------------------------------------------------------------------------- */
.oj-title .oj-solve__toggle { margin-left: auto; align-self: center; }
.oj-solve__close-label, .oj-solve__back, .oj-solve__hide { display: none; }
.oj-solve__toggle[aria-expanded="true"] .oj-solve__open-label { display: none; }
.oj-solve__toggle[aria-expanded="true"] .oj-solve__close-label { display: inline; }

.oj-solve__dock { display: none; }
.oj-solve__dock #yuborish { margin-bottom: 0; }
.oj-solve__dock-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 10px; font-weight: 700; font-size: 13px; color: var(--oj-head);
  background: var(--oj-surface-alt); border: 1px solid var(--oj-border); border-bottom: 0;
  border-radius: var(--oj-radius) var(--oj-radius) 0 0;
}
.oj-solve__dock-head i { margin-right: 4px; }

/* Panel yopiq: ekran o'ng chetidagi yorliq — shart qancha aylantirilsa ham qo'l ostida */
.oj-solve__tab {
  position: fixed; right: 0; top: 50%; z-index: 40; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 7px; border: 1px solid var(--oj-accent); border-right: 0;
  border-radius: 8px 0 0 8px; background: var(--oj-accent); color: #fff;
  font: 700 12px/1 var(--oj-sans); cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.oj-solve__tab span { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .04em; }
.oj-solve__tab[aria-expanded="true"] { display: none; }

/* Panel ochiq: muharrir bor bo'yni egallaydi, tugmalar doim pastda ko'rinadi */
.oj-solve.is-open .oj-solve__dock { display: flex; flex-direction: column; min-height: 0; }
.oj-solve.is-open .oj-solve__dock #yuborish {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  border-radius: 0 0 var(--oj-radius) var(--oj-radius);
}
.oj-solve__dock #yuborish > form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.oj-solve__dock .oj-editor { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 0; border-radius: 0; }
.oj-solve__dock .oj-editor__pane { flex: 1; min-height: 0; }
.oj-solve__dock .oj-editor__scroll { max-height: none; min-height: 160px; height: 100%; }
.oj-solve__dock .oj-run { grid-template-columns: 1fr 1fr; padding: 8px 10px; gap: 8px; }
.oj-solve__dock .oj-run textarea { height: 86px; resize: vertical; }
.oj-solve__dock .oj-run__output { height: 86px; min-height: 0; max-height: 86px; }
.oj-solve__dock #yuborish > .oj-panel__body { padding: 6px 10px; }

/* Keng ekran: chapda shart, o'ngda panel — sahifa aylantirilsa ham joyida */
@media (min-width: 1100px) {
  .oj-wrap:has(.oj-solve.is-open) { max-width: 1680px; }
  .oj-solve.is-open { grid-template-columns: minmax(0, 1fr) minmax(460px, 46%); align-items: start; }
  .oj-solve.is-open .oj-solve__main { grid-column: 1; grid-row: 1; }
  .oj-solve.is-open .oj-solve__side { grid-column: 1; grid-row: 2; }
  .oj-solve.is-open .oj-solve__dock { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 12px; height: calc(100vh - 24px); }
  .oj-solve__hide { display: inline; }
}

/* Tor ekran: panel butun ekranga ochiladi, «Shartga qaytish» bilan yopiladi */
@media (max-width: 1099.98px) {
  .oj-solve.is-open .oj-solve__dock { position: fixed; inset: 0; z-index: 1000; padding: 8px; background: var(--oj-bg); }
  .oj-solve__back { display: inline; }
  .oj-solve__dock .oj-run { grid-template-columns: 1fr; }
  /* Yorliq matnni yopmasin — pastki o'ng burchakda yumaloq tugma */
  .oj-solve__tab { top: auto; bottom: 16px; right: 16px; transform: none; flex-direction: row;
    padding: 12px 16px; border: 0; border-radius: 999px; font-size: 13px; }
  .oj-solve__tab span { writing-mode: horizontal-tb; transform: none; }
  html.oj-dock-full, html.oj-dock-full body { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   Musobaqa masalasi: A, B, C… bo'yicha o'tish (`_contest_problem_rail.html`, `rail.js`).
   Keng ekranda chap chetda, tor ekranda tepada — ikkalasida ham qotib turadi.
   -------------------------------------------------------------------------- */
.oj-rail { display: flex; gap: 6px; }
.oj-rail__item {
  position: relative; flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 8px;
  border: 1px solid var(--oj-border); background: var(--oj-surface);
  color: var(--oj-head) !important; font: 700 15px/1 var(--oj-sans); text-decoration: none !important;
}
.oj-rail__item:hover { border-color: var(--oj-link); }
.oj-rail__item i { position: absolute; right: 2px; bottom: 2px; font-size: 9px; }
.oj-rail__item.is-ok { background: var(--oj-ok-bg); border-color: var(--oj-ok); color: var(--oj-ok) !important; }
.oj-rail__item.is-bad { background: var(--oj-bad-bg); border-color: var(--oj-bad); color: var(--oj-bad) !important; }
.oj-rail__item.is-part { background: var(--oj-warn-bg); border-color: var(--oj-warn); color: var(--oj-warn) !important; }
.oj-rail__item.is-wait { background: var(--oj-wait-bg); color: var(--oj-wait) !important; }
.oj-rail__item.is-current { outline: 2px solid var(--oj-accent); outline-offset: 2px; }

@media (min-width: 1100px) {
  .oj-rail { flex-direction: column; align-self: start; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
  .oj-solve--rail { grid-template-columns: 40px minmax(0, 1fr) 300px; }
  .oj-solve--rail .oj-rail { grid-column: 1; grid-row: 1 / span 2; }
  .oj-solve--rail .oj-solve__main { grid-column: 2; grid-row: 1; }
  .oj-solve--rail .oj-solve__side { grid-column: 3; grid-row: 1; }
  .oj-solve--rail.is-open { grid-template-columns: 40px minmax(0, 1fr) minmax(460px, 46%); }
  .oj-solve--rail.is-open .oj-solve__main { grid-column: 2; }
  .oj-solve--rail.is-open .oj-solve__side { grid-column: 2; grid-row: 2; }
  .oj-solve--rail.is-open .oj-solve__dock { grid-column: 3; }
}
@media (max-width: 1099.98px) {
  .oj-solve--rail .oj-rail {
    grid-column: 1 / -1; position: sticky; top: 0; z-index: 30; overflow-x: auto;
    margin: 0 -16px; padding: 8px 16px; background: var(--oj-bg); border-bottom: 1px solid var(--oj-border);
  }
}

/* Chop etishni cheklash: musobaqa sahifasi qog'ozga tushmasin */
@media print {
  .oj-protected, .oj-no-print { display: none !important; }
  .oj-print-note::after {
    content: "Musobaqa sahifasini chop etish taqiqlangan.";
    display: block; font-size: 16px; padding: 40px; text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Statistika va o'sish
   -------------------------------------------------------------------------- */
.oj-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.oj-stat {
  border: 1px solid var(--oj-border);
  border-radius: var(--oj-radius);
  background: var(--oj-surface);
  padding: 10px 12px;
}
.oj-stat__value { font-size: 22px; font-weight: 700; color: var(--oj-head); line-height: 1.1; font-variant-numeric: tabular-nums; }
.oj-stat__label { font-size: 12px; color: var(--oj-muted); }

.oj-bar {
  height: 8px; background: var(--oj-border-soft);
  border-radius: 2px; overflow: hidden; min-width: 80px;
}
.oj-bar__fill { height: 100%; background: var(--oj-ok); }
.oj-bar__fill--low { background: var(--oj-warn); }

.oj-progress-row { display: grid; grid-template-columns: 1fr 90px 60px; gap: 10px; align-items: center; padding: 4px 0; }

/* Faoliyat diagrammasi (profil) */
.oj-activity { display: flex; gap: 2px; align-items: flex-end; height: 60px; overflow: hidden; }
.oj-activity__bar { flex: 1; min-width: 2px; background: var(--oj-border); border-radius: 1px; }
.oj-activity__bar.has-ac { background: var(--oj-ok); }

/* Sahifalash */
.oj-pager { display: flex; gap: 4px; align-items: center; justify-content: center; margin: 16px 0 0; flex-wrap: wrap; }
.oj-pager a, .oj-pager span {
  padding: 4px 10px; border: 1px solid var(--oj-border); border-radius: var(--oj-radius);
  font-size: 13px; background: var(--oj-surface); color: var(--oj-muted);
  text-decoration: none !important;
}
.oj-pager .is-current { background: var(--oj-accent); color: #fff; border-color: var(--oj-accent); }

/* Podval */
.oj-footer {
  border-top: 1px solid var(--oj-border);
  background: var(--oj-surface);
  padding: 14px 0;
  font-size: 12.5px;
  color: var(--oj-muted);
}
.oj-footer__inner { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* To'liq ekran rejimi: sahifa yon oq joylarsiz ishlaydi */
.oj.is-fullscreen .oj-wrap { max-width: 100%; }
.oj.is-fullscreen .oj-footer { display: none; }

/* Fokus ko'rinishi — klaviatura bilan yurish qulay bo'lsin */
.oj a:focus-visible,
.oj button:focus-visible,
.oj [tabindex]:focus-visible {
  outline: 2px solid var(--oj-link);
  outline-offset: 2px;
}

.oj-skip {
  position: absolute; left: -9999px;
}
.oj-skip:focus { left: 8px; top: 8px; z-index: 20; background: var(--oj-surface); padding: 8px 12px; }

/* --------------------------------------------------------------------------
   Dars testi
   -------------------------------------------------------------------------- */
.oj-question {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
}
.oj-question + .oj-question {
  border-top: 1px solid var(--oj-border-soft);
  padding-top: 16px;
}
.oj-question__text {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--oj-text);
  margin-bottom: 8px;
  padding: 0;
}
.oj-question__num {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  margin-right: 6px;
  background: var(--oj-surface-alt);
  border: 1px solid var(--oj-border);
  border-radius: 50%;
  font-size: 11.5px;
  color: var(--oj-muted);
}
.oj-question__hint { font-size: 12.5px; color: var(--oj-muted); margin: 0 0 6px; }
.oj-question__answer { display: block; max-width: 420px; }
.oj-question .oj-code { margin: 8px 0 10px; }

.oj-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: var(--oj-radius);
  font-size: 13.5px;
  cursor: pointer;
}
.oj-option:hover { background: var(--oj-surface-alt); border-color: var(--oj-border-soft); }
.oj-option input { margin-top: 3px; flex: 0 0 auto; }

/* Javoblar tahlili */
.oj-review { padding: 10px 0; }
.oj-review--sep { border-bottom: 1px dashed var(--oj-border-soft); }
.oj-review__head { display: flex; gap: 8px; font-weight: 600; font-size: 13.5px; }
.oj-review__body { padding-left: 22px; }
.oj-review__line { font-size: 13px; color: var(--oj-muted); margin-top: 2px; }
.oj-review__why { color: var(--oj-text); }

/* --------------------------------------------------------------------------
   Masala rasmlari (shart ichida)
   -------------------------------------------------------------------------- */
.oj-figure { margin: 12px 0 14px; text-align: center; }
.oj-figure img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.oj-figure figcaption { margin-top: 6px; font-size: 12.5px; color: var(--oj-muted); }

/* --------------------------------------------------------------------------
   Masalalar ketma-ketligi (`learn/track.html`)
   Chapda mavzular, o'rtada shart, o'ngda muharrir va natija.
   -------------------------------------------------------------------------- */
.oj--wide .oj-wrap { max-width: 1640px; }

.tr {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.tr-side {
  position: sticky; top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: var(--oj-surface);
  border: 1px solid var(--oj-border);
  border-radius: var(--oj-radius);
  padding: 12px;
}
.tr-side__back { display: block; font-weight: 600; font-size: 13px; margin-bottom: 12px; }

.tr-progress {
  padding: 10px; margin-bottom: 12px;
  background: var(--oj-surface-alt);
  border: 1px solid var(--oj-border-soft);
  border-radius: var(--oj-radius);
}
.tr-progress__row { display: flex; justify-content: space-between; font-size: 12.5px; }
.tr-progress__row strong { color: var(--oj-ok); }
.tr-progress__bar {
  height: 7px; margin: 7px 0 5px;
  background: var(--oj-border-soft);
  border-radius: 4px; overflow: hidden;
}
.tr-progress__bar i { display: block; height: 100%; background: var(--oj-ok); transition: width .4s; }
.tr-progress__note { font-size: 12px; color: var(--oj-muted); }

.tr-lesson { border-top: 1px solid var(--oj-border-soft); }
.tr-lesson summary {
  display: flex; align-items: baseline; gap: 6px;
  padding: 8px 2px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--oj-head);
}
.tr-lesson summary::-webkit-details-marker { display: none; }
.tr-lesson summary::before {
  content: "\25B8"; color: var(--oj-faint); font-size: 11px; transition: transform .15s;
}
.tr-lesson[open] summary::before { transform: rotate(90deg); }
.tr-lesson__num { color: var(--oj-faint); }
.tr-lesson__title { flex: 1; min-width: 0; }
.tr-lesson__count {
  font-size: 11.5px; font-weight: 600; color: var(--oj-muted);
  font-variant-numeric: tabular-nums;
}
.tr-lesson__count.is-done { color: var(--oj-ok); }
.tr-lesson ul { list-style: none; margin: 0 0 6px; padding: 0 0 0 14px; }
.tr-lesson__theory { display: inline-block; font-size: 12px; margin: 0 0 10px 18px; }

.tr-item {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 6px; border-radius: var(--oj-radius);
  font-size: 12.5px; color: var(--oj-text) !important;
}
a.tr-item:hover { background: var(--oj-surface-alt); text-decoration: none !important; }
.tr-item.is-current { background: var(--oj-info-bg); font-weight: 600; }
.tr-item.is-locked { color: var(--oj-faint) !important; cursor: not-allowed; }
.tr-item__icon { width: 14px; text-align: center; color: var(--oj-faint); }
.tr-item.is-solved .tr-item__icon { color: var(--oj-ok); }
.tr-item__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tr-tabs {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 8px; margin-bottom: 12px;
  background: var(--oj-surface);
  border: 1px solid var(--oj-border);
  border-radius: var(--oj-radius);
}
.tr-tab {
  position: relative;
  min-width: 32px; height: 30px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--oj-border);
  border-radius: var(--oj-radius);
  background: var(--oj-surface);
  color: var(--oj-text) !important;
  font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none !important;
}
a.tr-tab:hover { border-color: var(--oj-link); }
.tr-tab.is-solved { background: var(--oj-ok-bg); border-color: var(--oj-ok); color: var(--oj-ok) !important; }
.tr-tab.is-tried { background: var(--oj-warn-bg); border-color: var(--oj-warn); }
.tr-tab.is-current { outline: 2px solid var(--oj-link); outline-offset: 1px; }
.tr-tab.is-locked {
  color: var(--oj-faint) !important; background: var(--oj-surface-alt);
  cursor: not-allowed; font-size: 11px;
}
.tr-tab__mark {
  position: absolute; top: -6px; right: -6px;
  width: 14px; height: 14px; display: grid; place-items: center;
  font-size: 8px; color: #fff; background: var(--oj-ok); border-radius: 50%;
}

.tr-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.tr-statement { padding: 16px 18px; margin: 0; }
.tr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tr-head__code { font-family: var(--oj-mono); font-size: 12px; color: var(--oj-faint); }
.tr-head__title { font-size: 20px; font-weight: 700; color: var(--oj-head); margin: 2px 0 8px; }
.tr-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 12.5px; color: var(--oj-muted);
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--oj-border-soft);
}
.tr-pager {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--oj-border-soft);
}

.tr-code { position: sticky; top: 12px; }
.tr-code .oj-editor { margin-bottom: 12px; }
.tr-code .oj-editor__scroll { min-height: 300px; max-height: 52vh; }
.tr-code__label { font-weight: 600; font-size: 12.5px; color: var(--oj-head); }

.tr-results { margin: 0; }
.tr-results__tabs {
  display: flex;
  border-bottom: 1px solid var(--oj-border);
  background: var(--oj-surface-alt);
}
.tr-results__tabs button {
  border: 0; background: transparent; padding: 8px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--oj-muted);
  border-bottom: 2px solid transparent; cursor: pointer;
}
.tr-results__tabs button.is-active { color: var(--oj-head); border-bottom-color: var(--oj-link); }
.tr-results__pane { padding: 12px; }
.tr-results__empty { margin: 0; font-size: 13px; }
.tr-history { font-size: 12.5px; }

.tr-verdict__main { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tr-verdict__main .oj-v { font-size: 16px; }
.tr-verdict__stats {
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px;
  font-size: 12.5px; color: var(--oj-muted);
}
.tr-verdict__stats b { color: var(--oj-text); font-variant-numeric: tabular-nums; }
.tr-verdict__next {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px; padding: 10px 12px;
  background: var(--oj-ok-bg); color: var(--oj-ok);
  border-radius: var(--oj-radius); font-weight: 600;
}
.tr-verdict__next .oj-btn { margin-left: auto; }
.tr-verdict.is-running .oj-v::before {
  content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 6px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  vertical-align: -1px; animation: tr-spin .8s linear infinite;
}
@keyframes tr-spin { to { transform: rotate(360deg); } }

/* Kurs sahifasidagi «Masalalar ketma-ketligi» tugmasi */
.tr-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 16px;
  background: var(--oj-info-bg);
  border: 1px solid var(--oj-border);
  border-left: 4px solid var(--oj-info);
  border-radius: var(--oj-radius);
}
.tr-cta__text { flex: 1; min-width: 220px; }
.tr-cta__text strong { display: block; font-size: 15px; color: var(--oj-head); }
.tr-cta__text span { font-size: 13px; color: var(--oj-muted); }
.tr-cta .tr-progress__bar { width: 160px; margin: 0; }

@media (max-width: 1200px) {
  .tr-work { grid-template-columns: minmax(0, 1fr); }
  .tr-code { position: static; }
}
@media (max-width: 860px) {
  .tr { grid-template-columns: minmax(0, 1fr); }
  .tr-side { position: static; max-height: none; }
}

/* --------------------------------------------------------------------------
   Mashq guruhlari (`templates/contest/groups/`)
   -------------------------------------------------------------------------- */
.gr-side__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.gr-side__actions form { margin: 0; }
.gr-side__item {
  display: block; padding: 7px 8px; margin: 0 -8px;
  border-top: 1px solid var(--oj-border-soft);
  color: var(--oj-text) !important; text-decoration: none !important;
}
.gr-side__item:hover { background: var(--oj-surface-alt); }
.gr-side__name { display: block; font-weight: 600; }
.gr-side__meta { display: block; font-size: 12px; color: var(--oj-muted); }
.gr-side__empty { margin: 0; font-size: 12.5px; }

.gr-narrow { max-width: 620px; }
.gr-form-actions { display: flex; gap: 8px; }
.gr-preview {
  padding: 10px 12px; margin-bottom: 14px;
  background: var(--oj-surface-alt); border: 1px solid var(--oj-border-soft);
  border-radius: var(--oj-radius);
}
.gr-preview__name { font-size: 16px; font-weight: 700; color: var(--oj-head); }

.gr-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 14px;
}
.gr-head__title { font-size: 20px; font-weight: 700; color: var(--oj-head); margin: 0 0 4px; }
.gr-head__desc { margin: 8px 0 0; max-width: 720px; }
.gr-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gr-head__actions form { margin: 0; }
.gr-h2 { display: flex; justify-content: space-between; align-items: center; }

.gr-task__meta { display: flex; gap: 6px; font-weight: 400; }
.gr-task__problems { display: flex; flex-wrap: wrap; gap: 6px; }
.gr-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border: 1px solid var(--oj-border); border-radius: 12px;
  font-family: var(--oj-mono); font-size: 12.5px;
  color: var(--oj-text) !important; background: var(--oj-surface);
  text-decoration: none !important;
}
.gr-chip:hover { border-color: var(--oj-link); }
.gr-chip.is-solved { background: var(--oj-ok-bg); border-color: var(--oj-ok); color: var(--oj-ok) !important; }
.gr-task__progress { margin-top: 10px; }
.gr-task__progress summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--oj-link); }
.gr-task__progress .oj-table { margin-top: 6px; }
.gr-task__actions { display: flex; gap: 6px; margin-top: 10px; }
.gr-task__actions form { margin: 0; }
.gr-member-actions { display: flex; gap: 6px; justify-content: flex-end; }
.gr-member-actions form { margin: 0; }

.gr-code {
  font-family: var(--oj-mono); font-size: 26px; font-weight: 700; letter-spacing: 4px;
  text-align: center; padding: 8px; margin-bottom: 8px;
  background: var(--oj-surface-alt); border: 1px dashed var(--oj-border);
  border-radius: var(--oj-radius); color: var(--oj-head);
}
.gr-link { display: flex; gap: 6px; align-items: center; }
.gr-link span {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--oj-muted); font-family: var(--oj-mono);
}

.gr-lessons { max-height: 460px; overflow-y: auto; }
.gr-lesson {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 4px 0; font-size: 13px; cursor: pointer;
}
.gr-lesson input { margin-top: 3px; }

/* Reytingdagi odam: kichik rasm (yoki bosh harflar) va ism */
.oj-person { display: inline-flex; align-items: center; gap: 8px; }
.oj-person__avatar {
  width: 28px; height: 28px; flex: 0 0 28px;
  display: inline-grid; place-items: center; overflow: hidden;
  border-radius: 50%; background: var(--oj-surface-alt);
  border: 1px solid var(--oj-border);
  font-size: 11px; font-weight: 700; color: var(--oj-muted);
}
.oj-person__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Maqolalar
   Bo'limning tinch uslubida, lekin o'qish uchun: kartochkalar, keng
   muqovalar, katta shrift va qulay qator oralig'i.
   ========================================================================== */
:root {
  --oj-a-python: #2f6fa5;  --oj-a-python-2: #f2c14e;
  --oj-a-algoritm: #6a4bb3; --oj-a-algoritm-2: #3aa0c8;
  --oj-a-olimpiada: #c7651d; --oj-a-olimpiada-2: #e8b33a;
  --oj-a-tuzilma: #1f7f6a;  --oj-a-tuzilma-2: #6cc3a0;
  --oj-a-veb: #b0336e;      --oj-a-veb-2: #e98bb3;
  --oj-a-maslahat: #8a6d1a; --oj-a-maslahat-2: #e6c65a;
  --oj-a-boshqa: #4b5b6b;   --oj-a-boshqa-2: #9aa8b7;
  --oj-a-radius: 10px;
}

/* ---- sarlavha bloki ---- */
.oj-ahero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin: 4px 0 18px; padding: 22px 24px;
  border: 1px solid var(--oj-border); border-radius: var(--oj-a-radius);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--oj-accent) 18%, transparent) 0%, transparent 55%),
    var(--oj-surface);
}
.oj-ahero h1 { margin: 0 0 6px; font-size: 26px; color: var(--oj-head); letter-spacing: -.01em; }
.oj-ahero p { margin: 0; max-width: 620px; color: var(--oj-muted); line-height: 1.55; }
.oj-ahero__side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.oj-ahero__count { color: var(--oj-muted); font-size: 13px; }
.oj-ahero__count strong { color: var(--oj-head); font-size: 20px; margin-right: 2px; }
.oj-ahero .oj-btn--primary { padding: 9px 16px; font-size: 14px; border-radius: 8px; }

/* ---- rubrikalar va qidiruv ---- */
.oj-atoolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.oj-achips { display: flex; gap: 6px; flex-wrap: wrap; }
.oj-achip {
  --chip: var(--oj-muted);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--oj-border); background: var(--oj-surface); color: var(--oj-text) !important;
  text-decoration: none !important; transition: border-color .15s, background .15s;
}
.oj-achip:hover { border-color: var(--chip); }
.oj-achip.is-active { background: var(--oj-accent); border-color: var(--oj-accent); color: #fff !important; }
.oj-achip__n { font-weight: 500; opacity: .7; font-size: 11.5px; }
.oj-achip--python { --chip: var(--oj-a-python); }
.oj-achip--algoritm { --chip: var(--oj-a-algoritm); }
.oj-achip--olimpiada { --chip: var(--oj-a-olimpiada); }
.oj-achip--tuzilma { --chip: var(--oj-a-tuzilma); }
.oj-achip--veb { --chip: var(--oj-a-veb); }
.oj-achip--maslahat { --chip: var(--oj-a-maslahat); }
.oj-achip--boshqa { --chip: var(--oj-a-boshqa); }
.oj-acard__top .oj-achip, .oj-ahead > .oj-achip {
  background: color-mix(in srgb, var(--chip) 14%, transparent);
  border-color: color-mix(in srgb, var(--chip) 40%, transparent);
  color: color-mix(in srgb, var(--chip) 75%, var(--oj-text)) !important;
  padding: 2px 9px; font-size: 11.5px;
}
.oj-asearch { position: relative; flex: 0 1 280px; }
.oj-asearch i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--oj-faint); font-size: 13px; }
.oj-asearch .oj-input { padding-left: 32px; border-radius: 999px; width: 100%; }

.oj-asort { display: flex; gap: 18px; border-bottom: 1px solid var(--oj-border); margin-bottom: 18px; }
.oj-asort a {
  padding: 8px 0; margin-bottom: -1px; font-size: 13px; font-weight: 600;
  color: var(--oj-muted) !important; text-decoration: none !important; border-bottom: 2px solid transparent;
}
.oj-asort a:hover { color: var(--oj-text) !important; }
.oj-asort a.is-active { color: var(--oj-head) !important; border-bottom-color: var(--oj-link); }

/* ---- muqova (rasm yoki rubrika rangidagi fon) ---- */
.oj-acover {
  --c1: var(--oj-a-boshqa); --c2: var(--oj-a-boshqa-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .14) 0 18%, transparent 19%),
    radial-gradient(circle at 88% 85%, rgba(255, 255, 255, .09) 0 26%, transparent 27%),
    linear-gradient(135deg, var(--c1), var(--c2));
  color: rgba(255, 255, 255, .92);
}
.oj-acover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.oj-acover i { font-size: 38px; color: #fff; opacity: .95; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .28)); }
.oj-acover--python { --c1: var(--oj-a-python); --c2: var(--oj-a-python-2); }
.oj-acover--algoritm { --c1: var(--oj-a-algoritm); --c2: var(--oj-a-algoritm-2); }
.oj-acover--olimpiada { --c1: var(--oj-a-olimpiada); --c2: var(--oj-a-olimpiada-2); }
.oj-acover--tuzilma { --c1: var(--oj-a-tuzilma); --c2: var(--oj-a-tuzilma-2); }
.oj-acover--veb { --c1: var(--oj-a-veb); --c2: var(--oj-a-veb-2); }
.oj-acover--maslahat { --c1: var(--oj-a-maslahat); --c2: var(--oj-a-maslahat-2); }
.oj-acover--boshqa { --c1: var(--oj-a-boshqa); --c2: var(--oj-a-boshqa-2); }

/* ---- kartochka ---- */
.oj-agrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.oj-acard {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--oj-border); border-radius: var(--oj-a-radius); background: var(--oj-surface);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.oj-acard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--oj-link) 45%, var(--oj-border)); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .45); }
.oj-acard__cover { aspect-ratio: 16 / 8; text-decoration: none !important; }
.oj-acard:hover .oj-acover img { transform: scale(1.03); }
.oj-acard__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; flex: 1; }
.oj-acard__top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.oj-acard__title { margin: 0; font-size: 16.5px; line-height: 1.35; letter-spacing: -.005em; }
.oj-acard__title a { color: var(--oj-head) !important; text-decoration: none !important; }
.oj-acard__title a:hover { color: var(--oj-link) !important; }
.oj-acard__summary {
  margin: 0; color: var(--oj-muted); font-size: 13.5px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.oj-acard__meta {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--oj-border-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--oj-faint);
}
.oj-acard__stats { display: inline-flex; gap: 10px; }
.oj-acard__stats i { margin-right: 2px; }

.oj-acard--big { flex-direction: row; margin-bottom: 18px; min-height: 250px; }
.oj-acard--big .oj-acard__cover { aspect-ratio: auto; flex: 0 0 46%; }
.oj-acard--big .oj-acover i { font-size: 64px; }
.oj-acard--big .oj-acard__body { padding: 24px 26px; gap: 10px; justify-content: center; }
.oj-acard--big .oj-acard__title { font-size: 24px; }
.oj-acard--big .oj-acard__summary { font-size: 15px; -webkit-line-clamp: 4; }
.oj-acard--big .oj-acard__meta { margin-top: 8px; }

/* ---- muallif ---- */
.oj-aauthor { display: inline-flex; align-items: center; gap: 8px; color: var(--oj-muted); min-width: 0; }
.oj-avatar {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--oj-link) 18%, var(--oj-surface-alt));
  color: var(--oj-head); font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.oj-aauthor--lg .oj-avatar { width: 40px; height: 40px; font-size: 14px; }
.oj-aauthor--lg > span:last-child { display: flex; flex-direction: column; line-height: 1.35; }
.oj-aauthor--lg strong { color: var(--oj-head); }

/* ---- bo'sh holat ---- */
.oj-aempty {
  text-align: center; padding: 56px 20px; border: 1px dashed var(--oj-border);
  border-radius: var(--oj-a-radius); background: var(--oj-surface);
}
.oj-aempty > i { font-size: 34px; color: var(--oj-faint); }
.oj-aempty h2 { margin: 12px 0 6px; font-size: 18px; color: var(--oj-head); }
.oj-aempty p { margin: 0 auto 16px; max-width: 420px; color: var(--oj-muted); }

/* ---- o'qish sahifasi ---- */
.oj-aread { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; align-items: start; }
.oj-aread__main {
  border: 1px solid var(--oj-border); border-radius: var(--oj-a-radius); background: var(--oj-surface);
  padding: 34px clamp(18px, 5vw, 56px) 26px;
}
.oj-ahead { max-width: 740px; margin: 0 auto 22px; }
.oj-ahead__title { margin: 12px 0 10px; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.2; color: var(--oj-head); letter-spacing: -.015em; }
.oj-ahead__lead { margin: 0 0 18px; font-size: 17px; line-height: 1.6; color: var(--oj-muted); }
.oj-ahead__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 0; border-top: 1px solid var(--oj-border-soft); border-bottom: 1px solid var(--oj-border-soft);
}
.oj-ahead__sub { font-size: 12.5px; color: var(--oj-faint); font-weight: 400; }
.oj-ahead__stats { display: inline-flex; gap: 14px; color: var(--oj-faint); font-size: 13px; }
.oj-aread__cover { margin: 0 auto 26px; max-width: 840px; border-radius: 8px; overflow: hidden; }
.oj-aread__cover img { width: 100%; display: block; max-height: 440px; object-fit: cover; }

.oj-aprose { max-width: 740px; margin: 0 auto; font-size: 16px; line-height: 1.75; }
.oj-aprose h2, .oj-aprose h3 { font-size: 22px; margin: 30px 0 10px; color: var(--oj-head); line-height: 1.3; }
.oj-aprose h4 { font-size: 18px; margin: 24px 0 8px; color: var(--oj-head); }
.oj-aprose h5 { font-size: 16px; margin: 20px 0 6px; }
.oj-aprose p { margin: 0 0 16px; }
.oj-aprose ul, .oj-aprose ol { margin: 0 0 16px; padding-left: 24px; }
.oj-aprose li { margin-bottom: 6px; }
.oj-aprose .oj-code { margin: 6px 0 18px; border-radius: 8px; font-size: 13.5px; line-height: 1.6; padding: 14px 16px; }
.oj-aprose blockquote.oj-note { border-radius: 6px; margin: 0 0 18px; }
.oj-aprose .oj-table-wrap { margin: 0 0 18px; }

.oj-afoot {
  max-width: 740px; margin: 26px auto 0; padding-top: 18px; border-top: 1px solid var(--oj-border-soft);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.oj-afoot form { margin: 0; }
.oj-afoot__manage { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.oj-afoot__danger { color: var(--oj-bad) !important; }
.oj-alike {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; font: inherit; font-weight: 600; font-size: 13.5px;
  border: 1px solid var(--oj-border); background: var(--oj-surface-alt); color: var(--oj-text);
  transition: background .15s, border-color .15s, transform .1s;
}
.oj-alike:hover { border-color: var(--oj-ok); }
.oj-alike:active { transform: scale(.97); }
.oj-alike.is-on { background: var(--oj-ok-bg); border-color: var(--oj-ok); color: var(--oj-ok); }
.oj-alike__n { padding-left: 8px; border-left: 1px solid currentColor; opacity: .8; }
/* Biriktirilgan fayl: «Havolani nusxalash» yonida */
.oj-afile { gap: 7px; border-color: var(--oj-accent) !important; color: var(--oj-accent) !important; font-weight: 600; text-decoration: none !important; }
.oj-afile:hover { background: var(--oj-accent); color: #fff !important; }
.oj-afile__meta { font-size: 11.5px; font-weight: 500; opacity: .75; }
.oj-afile__n { font-size: 11.5px; font-weight: 600; padding-left: 7px; border-left: 1px solid currentColor; opacity: .8; }

.oj-aread__side { position: sticky; top: 16px; display: grid; }
.oj-arelated { list-style: none; margin: 0; padding: 4px 0; }
.oj-arelated li + li { border-top: 1px solid var(--oj-border-soft); }
.oj-arelated a { display: flex; gap: 10px; padding: 10px 12px; text-decoration: none !important; }
.oj-arelated a:hover { background: var(--oj-surface-alt); }
.oj-arelated strong { display: block; color: var(--oj-head); font-size: 13.5px; line-height: 1.35; }
.oj-arelated__icon { flex: 0 0 38px; height: 38px; border-radius: 8px; }
.oj-arelated__icon i { font-size: 16px; }
.oj-aread__back { justify-self: start; }

/* ---- yozish oynasi ---- */
.oj-aform { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; align-items: start; }
.oj-aform .oj-article-form__title { font-size: 22px; font-weight: 700; padding: 10px 12px; }
.oj-aeditor { border: 1px solid var(--oj-border); border-radius: 8px; background: var(--oj-surface); overflow: hidden; }
.oj-aeditor:focus-within { border-color: var(--oj-link); }
.oj-aeditor__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 8px; border-bottom: 1px solid var(--oj-border); background: var(--oj-surface-alt);
}
.oj-aeditor__tabs { display: flex; gap: 2px; }
.oj-aeditor__tabs button, .oj-aeditor__tools button {
  border: 1px solid transparent; background: transparent; color: var(--oj-muted);
  font: inherit; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 6px; cursor: pointer;
}
.oj-aeditor__tabs button.is-active { background: var(--oj-surface); border-color: var(--oj-border); color: var(--oj-head); }
.oj-aeditor__tools { display: flex; gap: 1px; flex-wrap: wrap; }
.oj-aeditor__tools button { padding: 5px 8px; }
.oj-aeditor__tools button:hover, .oj-aeditor__tabs button:hover { color: var(--oj-text); background: var(--oj-surface); }
.oj-aeditor textarea.oj-article-form__body {
  display: block; width: 100%; border: 0; border-radius: 0; resize: vertical; outline: none;
  min-height: 460px; padding: 14px 16px; font-size: 14px; line-height: 1.65; box-shadow: none;
}
.oj-aeditor__preview { min-height: 460px; padding: 18px 22px; max-width: none; }
.oj-aeditor__foot { padding: 6px 12px; border-top: 1px solid var(--oj-border-soft); font-size: 12px; color: var(--oj-faint); text-align: right; }
.oj-aform__side .oj-panel { margin-bottom: 14px; }
.oj-aform__side .oj-textarea { min-height: 70px; width: 100%; }
.oj-aform__side .oj-select, .oj-aform__side .oj-input { width: 100%; }
.oj-acheck { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; cursor: pointer; }
.oj-acheck input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--oj-accent); }
.oj-acheck span { font-weight: 600; font-size: 13.5px; }
.oj-acheck small { display: block; font-weight: 400; color: var(--oj-muted); font-size: 12px; }
.oj-aform__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.oj-aform__actions .oj-btn--primary { flex: 1; justify-content: center; }
.oj-acheat summary { cursor: pointer; list-style: none; }
.oj-acheat summary::-webkit-details-marker { display: none; }
.oj-acheat dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; font-size: 12.5px; }
.oj-acheat dt, .oj-acheat dd { margin: 0; }
.oj-acheat dd { color: var(--oj-muted); }
.oj-acheat code { font-family: var(--oj-mono); font-size: 11.5px; background: var(--oj-surface-alt); border: 1px solid var(--oj-border-soft); padding: 0 4px; border-radius: 3px; }

@media (max-width: 1100px) {
  .oj-agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oj-aread { grid-template-columns: minmax(0, 1fr); }
  .oj-aread__side { position: static; }
}
@media (max-width: 860px) {
  .oj-aform { grid-template-columns: minmax(0, 1fr); }
  .oj-acard--big { flex-direction: column; min-height: 0; }
  .oj-acard--big .oj-acard__cover { aspect-ratio: 16 / 8; flex: none; }
  .oj-acard--big .oj-acard__body { padding: 16px 18px; }
  .oj-acard--big .oj-acard__title { font-size: 20px; }
}
@media (max-width: 620px) {
  .oj-agrid { grid-template-columns: minmax(0, 1fr); }
  .oj-ahero { padding: 18px; }
  .oj-asearch { flex: 1 1 100%; }
  .oj-aread__main { padding: 22px 16px; }
  .oj-afoot__manage { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Musobaqalar ro'yxati (ikki jadval) va virtual qatnashish
   -------------------------------------------------------------------------- */
.oj-clist .oj-panel__head { font-size: 14px; }
.oj-clist .oj-panel__head i { color: var(--oj-link); margin-right: 4px; }
.oj-clist .oj-table-wrap { border: 0; }
.oj-clist__table { font-size: 14px; }
.oj-clist__table th, .oj-clist__table td { border-left: 0; border-right: 0; padding: 9px 10px; }
.oj-clist__table tbody tr:nth-child(even) { background: var(--oj-surface-alt); }
.oj-clist__table tr.is-running td:first-child { box-shadow: inset 3px 0 0 var(--oj-ok); }
.oj-clist__name > a { font-weight: 600; font-size: 14.5px; }
.oj-clist__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--oj-muted); }
.oj-clist__tags span + span::before { content: "·"; margin-right: 6px; }
.oj-clist__tags .oj-badge::before { content: none; }
.oj-clist__links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 12.5px; }
.oj-clist__links a.is-live { color: var(--oj-ok); font-weight: 700; }
.oj-clist__date { font-variant-numeric: tabular-nums; line-height: 1.35; }
.oj-clist__date sup { font-size: 10px; color: var(--oj-muted); margin-left: 2px; }
.oj-clist__mono { font-family: var(--oj-mono); font-size: 13.5px; }
.oj-clist__small { margin-top: 4px; font-size: 12.5px; }
.oj-clist__muted { color: var(--oj-muted); font-weight: 400; }
.oj-clist__clock { font-family: var(--oj-mono); font-variant-numeric: tabular-nums; color: var(--oj-head); }
.oj-clist__clock--big { display: block; font-size: 16px; margin-top: 2px; }
.oj-clist__clock.is-soon { color: var(--oj-bad); }
.oj-clist__days { display: block; font-size: 15px; color: var(--oj-head); margin-top: 2px; }
.oj-clist__small .oj-clist__days { display: inline; font-size: inherit; }
.oj-clist__reg { font-weight: 700; }
.oj-clist__go { font-weight: 700; }
.oj-clist__virtual-now { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.oj-virtual__lead { font-size: 15px; font-weight: 600; color: var(--oj-head); margin-top: 0; }
.oj-virtual__rules { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; }
.oj-virtual__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.oj-virtual__actions form { margin: 0; }
.oj-virtual__start { font-size: 14px; padding: 7px 16px; }
.oj-standings__toggle { margin: 0 0 8px; font-size: 13px; }
.oj-standings tr.is-virtual td:not(.oj-cell) { background: var(--oj-info-bg); }
@media (max-width: 720px) {
  .oj-clist__table th, .oj-clist__table td { padding: 7px 6px; }
}