/* ============================================================
   Khan SAT-1600 · Режим оформления «Студия»
   Author: Xudoyorxon Bunyodov / Худоёрхон Бунёдов

   Сделан по присланному образцу EduSphere, но в вашей палитре:
   зелёный #1B5E20 и золотой #C9A227 остаются, меняется форма —
   крупные скругления, мягкие тени, карточки-показатели с
   градиентом, полупрозрачная шапка, плиточная раскладка.

   Все правила действуют только при html[data-skin="edu"],
   поэтому классический вид остаётся нетронутым.
   ============================================================ */

html[data-skin="edu"] {
  --edu-r: 20px;
  --edu-r-sm: 14px;
  --edu-shadow: 0 10px 34px rgba(14, 61, 20, .10);
  --edu-shadow-lg: 0 22px 60px rgba(14, 61, 20, .16);
}

html[data-skin="edu"] body { background: #F1F6F1; }

/* ---------- шапка: стекло и мягкая тень ---------- */
html[data-skin="edu"] .topbar {
  background: linear-gradient(135deg, rgba(20, 67, 26, .96), rgba(27, 94, 32, .92));
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 0;
  box-shadow: 0 6px 24px rgba(10, 40, 14, .22);
}
html[data-skin="edu"] .topbar .brand b,
html[data-skin="edu"] .topbar .brand .name { letter-spacing: -.01em; }
html[data-skin="edu"] .topbar a,
html[data-skin="edu"] .topbar .nav a {
  border-radius: 999px; padding: 7px 14px; transition: background .15s, transform .12s;
}
html[data-skin="edu"] .topbar a:hover { background: rgba(255, 255, 255, .14); transform: translateY(-1px); }
html[data-skin="edu"] .topbar a.active,
html[data-skin="edu"] .topbar .nav a.active {
  background: rgba(201, 162, 39, .28);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .5);
}

/* ---------- карточки ---------- */
html[data-skin="edu"] .panel,
html[data-skin="edu"] .card,
html[data-skin="edu"] .ds-card,
html[data-skin="edu"] .nx-card,
html[data-skin="edu"] .cat-item,
html[data-skin="edu"] .dc-card,
html[data-skin="edu"] .ct-col,
html[data-skin="edu"] .ct-row,
html[data-skin="edu"] .mth-topic,
html[data-skin="edu"] .syl-row {
  border-radius: var(--edu-r);
  border: 1px solid rgba(220, 229, 221, .9);
  box-shadow: var(--edu-shadow);
  transition: transform .14s, box-shadow .18s, border-color .18s;
}
html[data-skin="edu"] .cat-item:hover,
html[data-skin="edu"] .mth-topic:hover,
html[data-skin="edu"] .ct-row:hover,
html[data-skin="edu"] .dc-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--edu-shadow-lg);
  border-color: rgba(143, 193, 148, .9);
}

/* ---------- показатели: плитки с градиентом ---------- */
html[data-skin="edu"] .stat,
html[data-skin="edu"] .stat-card,
html[data-skin="edu"] .dc-card,
html[data-skin="edu"] .tf-card {
  background: linear-gradient(160deg, #FFFFFF 0%, #F4F9F4 100%);
  border-radius: var(--edu-r);
  padding: 18px 16px;
}
html[data-skin="edu"] .stat .n,
html[data-skin="edu"] .dc-card b,
html[data-skin="edu"] .tf-card b {
  font-size: 30px; line-height: 1.05;
  background: linear-gradient(135deg, #1B5E20, #43964A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-skin="edu"] .dc-card.is-ok b { background: linear-gradient(135deg, #14562B, #2E7D32);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-skin="edu"] .dc-card.is-bad b { background: linear-gradient(135deg, #B3261E, #E05A4F);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- заголовки разделов ---------- */
html[data-skin="edu"] h1 { letter-spacing: -.015em; }
html[data-skin="edu"] .cat-h2,
html[data-skin="edu"] .dc-h2,
html[data-skin="edu"] .mth-h2,
html[data-skin="edu"] .ct-h2 {
  position: relative; padding-left: 14px; color: #14501A;
}
html[data-skin="edu"] .cat-h2::before,
html[data-skin="edu"] .dc-h2::before,
html[data-skin="edu"] .mth-h2::before,
html[data-skin="edu"] .ct-h2::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 16px; border-radius: 3px;
  background: linear-gradient(180deg, #C9A227, #1B5E20);
}

/* ---------- кнопки ---------- */
html[data-skin="edu"] .btn,
html[data-skin="edu"] .ds-btn {
  border-radius: 999px; padding: 10px 18px; font-weight: 600;
  transition: transform .12s, box-shadow .16s, filter .16s;
}
html[data-skin="edu"] .btn:hover,
html[data-skin="edu"] .ds-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(14, 61, 20, .18); }
html[data-skin="edu"] .btn-primary,
html[data-skin="edu"] .ds-btn--primary {
  background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 60%, #43964A 100%);
  border: 0; color: #fff;
}
html[data-skin="edu"] .btn-primary:hover { filter: brightness(1.06); }

/* ---------- задания и прохождение ---------- */
html[data-skin="edu"] .mr-opt,
html[data-skin="edu"] .ct-opt {
  border-radius: var(--edu-r-sm); border-width: 1.5px;
}
html[data-skin="edu"] .mr-opt.is-on {
  background: linear-gradient(135deg, #1B5E20, #2E7D32);
  border-color: transparent; color: #fff;
}
html[data-skin="edu"] .mr-img,
html[data-skin="edu"] .mr-video,
html[data-skin="edu"] .mr-svg svg { border-radius: var(--edu-r-sm); }

/* ---------- нижнее меню на телефоне ---------- */
html[data-skin="edu"] #ksat-bottomnav,
html[data-skin="edu"] .bottomnav {
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 28px rgba(14, 61, 20, .14);
  backdrop-filter: blur(8px);
}

/* ---------- полосы прогресса ---------- */
html[data-skin="edu"] progress,
html[data-skin="edu"] .bar, html[data-skin="edu"] .progress {
  border-radius: 999px; overflow: hidden;
}
html[data-skin="edu"] .bar > i, html[data-skin="edu"] .progress > span {
  background: linear-gradient(90deg, #1B5E20, #C9A227);
}

/* ---------- тёмная тема режима ---------- */
[data-theme="dark"] html[data-skin="edu"] body,
html[data-skin="edu"][data-theme="dark"] body { background: #0E1712; }
html[data-skin="edu"][data-theme="dark"] .panel,
html[data-skin="edu"][data-theme="dark"] .card,
html[data-skin="edu"][data-theme="dark"] .ct-row,
html[data-skin="edu"][data-theme="dark"] .cat-item {
  background: linear-gradient(160deg, #1A2620 0%, #15201A 100%);
  border-color: #2A3A2E;
}

@media (max-width: 620px) {
  html[data-skin="edu"] { --edu-r: 16px; --edu-r-sm: 12px; }
}

/* показатели конструктора в режиме «Студия» */
html[data-skin="edu"] .ct-stat {
  border-radius: 999px; border: 0;
  background: linear-gradient(135deg, #EAF2EB, #F4F9F4);
  box-shadow: 0 3px 12px rgba(14, 61, 20, .08);
  padding: 8px 15px;
}
html[data-skin="edu"] .ct-stat b {
  background: linear-gradient(135deg, #1B5E20, #43964A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-skin="edu"] .ct-stat--gold {
  background: linear-gradient(135deg, #FBF4DD, #F3E6B4); color: #6F5510;
}
html[data-skin="edu"] .ct-head { padding-bottom: 4px; }

/* ============================================================
   БОКОВОЕ МЕНЮ РЕЖИМА «СТУДИЯ»
   Появляется только при html.has-edu-side, то есть в этом режиме
   и на экранах шире 1024 px. Разметка страниц не меняется:
   содержимое просто сдвигается вправо на ширину панели.
   ============================================================ */
.edu-side {
  position: fixed; left: 0; top: 0; bottom: 0; width: 240px; z-index: 60;
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 12px;
  background: linear-gradient(180deg, #14431a 0%, #0E3D14 60%, #08240C 100%);
  box-shadow: 6px 0 28px rgba(8, 36, 12, .28);
  overflow-y: auto; scrollbar-width: thin;
}
.edu-side::-webkit-scrollbar { width: 6px; }
.edu-side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }

.edu-side__top { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; }
.edu-side__logo {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px;
  background: linear-gradient(135deg, #C9A227, #A8861B);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  box-shadow: 0 6px 16px rgba(201,162,39,.32);
}
.edu-side__ttl b { display: block; color: #fff; font-size: 14.5px; letter-spacing: -.01em; }
.edu-side__ttl span { display: block; color: rgba(255,255,255,.6); font-size: 11.5px; }

.edu-side__nav { display: flex; flex-direction: column; gap: 3px; }
.edu-side__i {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 12px;
  color: rgba(255,255,255,.82); text-decoration: none; font-size: 13.5px;
  transition: background .14s, color .14s, transform .12s;
}
.edu-side__i:hover { background: rgba(255,255,255,.10); color: #fff; transform: translateX(2px); }
.edu-side__i.is-on {
  background: linear-gradient(135deg, rgba(201,162,39,.30), rgba(201,162,39,.14));
  color: #fff; box-shadow: inset 0 0 0 1px rgba(201,162,39,.45);
}
.edu-side__ic { width: 22px; text-align: center; font-size: 15px; flex: 0 0 22px; }
.edu-side__tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.edu-side__foot {
  margin-top: auto; padding: 12px 12px 4px; font-size: 11.5px;
  color: rgba(255,255,255,.5); line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,.10);
}
.edu-side__foot a { color: #E2C766; }

/* сдвиг содержимого и облегчённая шапка */
html.has-edu-side body { padding-left: 240px; }
html.has-edu-side .topbar { padding-left: 18px; }
html.has-edu-side .topbar .topnav,
html.has-edu-side .topbar .nav { display: none !important; }
html.has-edu-side #ksat-bottomnav,
html.has-edu-side .bottomnav { display: none !important; }

@media (max-width: 1023px) { .edu-side { display: none; } html.has-edu-side body { padding-left: 0; } }

/* Фон страницы в режиме «Студия» ровный: погодная подложка SAT
   с её жёлтым отливом здесь перебивается. */
html[data-skin="edu"] body,
html[data-skin="edu"] body[class*="nx-w-"],
html[data-skin="edu"] body[class*="nx-bg-"] {
  background: #F1F6F1 !important;
}
html[data-skin="edu"][data-theme="dark"] body,
html[data-skin="edu"][data-theme="dark"] body[class*="nx-w-"] { background: #0E1712 !important; }
html[data-skin="edu"] .nx-po { opacity: .35; }

/* ============================================================
   ТЕЛЕФОН: боковое меню выезжает поверх страницы
   ============================================================ */
html.edu-side-drawer .edu-side {
  display: flex;
  transform: translateX(-104%);
  transition: transform .22s cubic-bezier(.22,.61,.36,1);
  width: 268px; z-index: 340;
  padding-top: max(16px, env(safe-area-inset-top));
}
html.edu-side-drawer.edu-side-open .edu-side { transform: translateX(0); }
html.edu-side-drawer body { padding-left: 0; }

/* на телефоне верхнее и нижнее меню остаются: шторка их дополняет */
html.edu-side-drawer .topbar .topnav,
html.edu-side-drawer .topbar .nav { display: flex !important; }
html.edu-side-drawer #ksat-bottomnav,
html.edu-side-drawer .bottomnav { display: flex !important; }

.edu-veil {
  position: fixed; inset: 0; z-index: 330; background: rgba(8, 28, 12, .5);
  opacity: 0; pointer-events: none; transition: opacity .2s;
  backdrop-filter: blur(2px);
}
html.edu-side-open .edu-veil { opacity: 1; pointer-events: auto; }

/* кнопка вызова: над нижним меню, не перекрывает содержимое */
.edu-burger {
  position: fixed; left: 14px; bottom: calc(76px + env(safe-area-inset-bottom));
  width: 52px; height: 52px; border-radius: 17px; border: 0; z-index: 335;
  background: linear-gradient(135deg, #1B5E20, #14431a);
  box-shadow: 0 10px 26px rgba(10, 40, 14, .38);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer;
}
.edu-burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: #F4E9C6;
  transition: transform .2s, opacity .2s;
}
html.edu-side-open .edu-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
html.edu-side-open .edu-burger span:nth-child(2) { opacity: 0; }
html.edu-side-open .edu-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* пункты крупнее — пальцем попадать легче */
html.edu-side-drawer .edu-side__i { padding: 13px 14px; font-size: 14.5px; }
html.edu-side-drawer .edu-side__ic { font-size: 17px; }

@media (max-width: 1023px) {
  /* правило из основной части прячет панель — на телефоне она нужна */
  html.edu-side-drawer .edu-side { display: flex; }
}

/* прочее оформление режима на узком экране */
@media (max-width: 620px) {
  html[data-skin="edu"] .panel,
  html[data-skin="edu"] .card,
  html[data-skin="edu"] .ct-row,
  html[data-skin="edu"] .cat-item { box-shadow: 0 4px 14px rgba(14, 61, 20, .08); }
  html[data-skin="edu"] .btn, html[data-skin="edu"] .ds-btn { padding: 11px 18px; }
  html[data-skin="edu"] .stat .n,
  html[data-skin="edu"] .dc-card b { font-size: 26px; }
}

/* Кнопка предмета внутри панели */
.edu-side__subj {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin: 2px 0 10px; padding: 11px 12px; cursor: pointer;
  border: 1px solid rgba(201,162,39,.35); border-radius: 13px;
  background: linear-gradient(135deg, rgba(201,162,39,.20), rgba(201,162,39,.08));
  color: #fff; text-align: left; font-size: 13.5px;
}
.edu-side__subj:hover { background: linear-gradient(135deg, rgba(201,162,39,.32), rgba(201,162,39,.14)); }
.edu-side__subj span { font-size: 17px; }
.edu-side__subj b { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edu-side__subj i { font-style: normal; font-size: 11.5px; color: #E2C766; }

/* В этом режиме «Ещё» не нужна: всё есть в панели */
html.has-edu-side .ext-more { display: none !important; }
/* Кнопка предмета в шапке остаётся видимой на любом экране */
html[data-skin="edu"] .subj-btn-wrap { display: inline-flex !important; }
html[data-skin="edu"] .topbar > .subj-btn-wrap .subj-btn__name { display: inline !important; }

/* Кнопка предмета в шапке: перебиваем правило узкого экрана,
   которое прятало её вместе с названием. */
html[data-skin="edu"] .topbar > .subj-btn-wrap,
html[data-skin="edu"] .topbar .subj-btn-wrap { display: inline-flex !important; }
html[data-skin="edu"] .topbar > .subj-btn-wrap .subj-btn {
  border-radius: 999px; padding: 6px 12px; gap: 6px;
  background: rgba(201,162,39,.22); border: 1px solid rgba(201,162,39,.42);
}
html[data-skin="edu"] .topbar > .subj-btn-wrap .subj-btn__name {
  display: inline !important; max-width: 118px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 12.5px;
}

/* Правило шапки грузится позже и с !important, поэтому здесь
   специфичность поднята добавлением body — иначе кнопка предмета
   так и остаётся скрытой на узком экране. */
html[data-skin="edu"] body .topbar > .subj-btn-wrap,
html[data-skin="edu"] body .topbar .subj-btn-wrap { display: inline-flex !important; }
html[data-skin="edu"] body .topbar > .subj-btn-wrap .subj-btn__name { display: inline !important; }

/* Ничего не «прыгает» под пальцем: подсветка нажатия вместо
   переноса элемента, и никакого выделения текста при касании. */
html.edu-side-drawer .edu-side__i:hover { transform: none; }
.edu-side, .edu-side * { -webkit-tap-highlight-color: transparent; user-select: none; }
.edu-side__i:active { background: rgba(255,255,255,.16); }
.edu-burger:active { transform: scale(.96); }
.edu-side { will-change: transform; backface-visibility: hidden; }