:root {
  --bg: #eef1f3;
  --surface: #ffffff;
  --surface-soft: #f7f8f9;
  --text: #1c2429;
  --muted: #65737d;
  --line: #c8d0d6;
  --line-strong: #aeb8c0;
  --orange: #f1a929;
  --orange-strong: #df9717;
  --green: #2f9d58;
  --green-dark: #257a45;
  --danger: #b53737;
  --focus: #2769c8;
  --shadow: 0 20px 60px rgba(18, 36, 48, 0.16);
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

a {
  color: inherit;
}

button,
input,
select {
  font: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px clamp(16px, 4vw, 48px);
  background: rgba(216, 222, 226, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
}

.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #33404a;
  border: 2px solid var(--orange);
  font-weight: 700;
  letter-spacing: 0;
}

.brand-copy {
  display: grid;
  gap: 2px;
  line-height: 1.1;
}

.brand-copy strong {
  font-size: 20px;
}

.brand-copy small {
  color: var(--muted);
  font-size: 12px;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-button,
.button {
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  background: #d5dce1;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.nav-button:hover,
.button:hover {
  transform: translateY(-1px);
  border-color: #89969f;
}

.nav-button:active,
.button:active {
  background: var(--orange);
  border-color: var(--orange-strong);
  color: #111820;
  transform: translateY(0);
}

.button-primary {
  min-width: 190px;
  background: #d5dce1;
  border-color: var(--line-strong);
  color: var(--text);
  font-weight: 700;
}

.button-primary:disabled {
  background: var(--bg);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
}

.button-secondary {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.7);
}

.hero {
  position: relative;
  min-height: clamp(520px, 56.25vw, 860px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #102b42;
}

.hero-media {
  position: absolute;
  inset: 0;
  background-image: url("./assets/landing-page-background.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  filter: saturate(1.05) contrast(1.02);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 19, 31, 0.34), rgba(7, 19, 31, 0.14) 42%, rgba(7, 19, 31, 0.02)),
    linear-gradient(0deg, rgba(7, 19, 31, 0.12), rgba(7, 19, 31, 0));
}

.hero-content {
  position: relative;
  width: min(760px, calc(100% - 32px));
  margin-left: clamp(16px, 7vw, 96px);
  padding: 64px 0;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--orange);
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

.hero h1,
.register-intro h1 {
  margin: 0;
  font-size: clamp(42px, 8vw, 88px);
  line-height: 0.98;
  letter-spacing: 0;
}

.hero-lead {
  max-width: 650px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 22px;
  line-height: 1.42;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.overview-section {
  padding: 34px clamp(16px, 4vw, 48px) 48px;
  background: var(--surface);
}

.overview-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.overview-item {
  min-height: 190px;
  padding: 26px;
  background: var(--surface);
}

.overview-number {
  color: var(--orange-strong);
  font-weight: 700;
}

.overview-item h2 {
  margin: 18px 0 10px;
  font-size: 24px;
}

.overview-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.register-page {
  width: min(1260px, calc(100% - 32px));
  margin: 0 auto;
  padding: 46px 0 56px;
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: clamp(64px, 7vw, 96px);
}

.register-intro {
  align-self: start;
  min-width: 0;
  padding-top: 18px;
}

.register-intro h1 {
  color: var(--text);
  max-width: 100%;
  font-size: clamp(34px, 3.4vw, 50px);
  line-height: 1.04;
  white-space: nowrap;
}

.register-intro p {
  margin: 22px 0 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 17px;
}

.form-shell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.registration-form {
  padding: clamp(20px, 4vw, 34px);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
  row-gap: 16px;
}

.field {
  position: relative;
  display: grid;
  grid-template-rows: 18px 42px 16px 16px;
  gap: 6px;
  min-width: 0;
}

.field.show-other {
  grid-template-rows: 18px 42px 42px 16px 16px;
}

.field span {
  font-size: 14px;
  color: #34414a;
  font-weight: 700;
}

.field span b,
.required-note {
  color: var(--danger);
  font-weight: 700;
}

.field input,
.field select {
  width: 100%;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 0 12px;
  background: #ffffff;
  color: var(--text);
  outline: none;
}

.field input:disabled,
.field select:disabled {
  background: #eef2f5;
  color: #7d8992;
  cursor: not-allowed;
}

.field.is-disabled span {
  color: #7d8992;
}

.field input:focus,
.field select:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(39, 105, 200, 0.14);
}

.field.is-invalid input,
.field.is-invalid select {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(181, 55, 55, 0.12);
}

.field.is-backend-duplicate input,
.field.is-backend-duplicate select {
  border-color: #d00000 !important;
  border-width: 2px;
  background: #fff7f7;
  box-shadow: 0 0 0 4px rgba(208, 0, 0, 0.18);
}

.field.is-backend-duplicate span {
  color: #b00000;
}

.field-help {
  height: 16px;
  overflow: hidden;
  color: transparent;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.field-error {
  height: 16px;
  overflow: hidden;
  color: var(--danger);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.password-control {
  position: relative;
  display: block;
}

.password-control input {
  padding-right: 46px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 11px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.password-toggle::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 18px;
  height: 10px;
  border: 2px solid #7a8790;
  border-radius: 50%;
  background: transparent;
}

.password-toggle::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #7a8790;
}

.password-toggle:hover::before,
.password-toggle:focus::before {
  border-color: var(--focus);
}

.password-toggle:hover::after,
.password-toggle:focus::after {
  background: var(--focus);
}

.password-toggle.is-visible::before {
  border-color: var(--orange-strong);
}

.password-toggle.is-visible::after {
  background: var(--orange-strong);
}

.password-feedback {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  margin-top: -4px;
}

.password-meter {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbe1e5;
}

.password-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--danger);
  transition: width 0.2s ease, background 0.2s ease;
}

.password-meter.is-weak span {
  width: 34%;
  background: var(--danger);
}

.password-meter.is-medium span {
  width: 67%;
  background: var(--orange);
}

.password-meter.is-strong span {
  width: 100%;
  background: var(--green);
}

.password-strength {
  color: var(--muted);
  font-size: 12px;
}

.field-other {
  display: none;
}

.field.show-other .field-other {
  display: block;
}

.field-spacer {
  display: block;
}

.form-footer {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.form-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(29, 37, 43, 0.34);
}

.modal-backdrop[hidden] {
  display: none;
}

.result-panel {
  width: min(520px, 100%);
  padding: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(18, 36, 48, 0.28);
}

.result-panel h2 {
  margin: 0 0 14px;
  font-size: 30px;
}

.result-panel p {
  margin: 0 0 24px;
  color: var(--muted);
  line-height: 1.55;
}

.text-action {
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--focus);
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.text-action:hover,
.text-action:focus {
  color: #174c9a;
}

.result-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.status-card {
  display: grid;
  gap: 8px;
  margin: 22px 0;
  padding: 16px;
  border: 1px solid rgba(47, 157, 88, 0.35);
  border-radius: 8px;
  background: rgba(47, 157, 88, 0.08);
}

.status-card strong {
  color: var(--green-dark);
}

.status-card span {
  color: #35434c;
  line-height: 1.5;
}

.site-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px clamp(16px, 4vw, 48px);
  background: #cfd6dc;
  border-top: 1px solid var(--line-strong);
  color: #243039;
}

.site-footer a {
  text-decoration: none;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: min(360px, calc(100vw - 36px));
  padding: 14px 16px;
  border-radius: 8px;
  background: #1d252b;
  color: #ffffff;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.field-toast {
  position: fixed;
  z-index: 50;
  left: 0;
  top: 0;
  width: min(430px, calc(100vw - 24px));
  padding: 12px 14px;
  border: 1px solid #b8c2ca;
  border-radius: 8px;
  background: #ffffff;
  color: #26323a;
  box-shadow: 0 16px 44px rgba(18, 36, 48, 0.18);
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 4px));
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.field-toast::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-right: 1px solid #b8c2ca;
  border-bottom: 1px solid #b8c2ca;
  background: #ffffff;
  transform: translateX(-50%) rotate(45deg);
}

.field-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 10px));
}

@media (max-width: 860px) {
  .site-header {
    position: static;
    align-items: flex-start;
    flex-direction: column;
  }

  .top-nav {
    width: 100%;
    justify-content: flex-start;
  }

  .hero {
    min-height: 72vh;
  }

  .hero-content {
    margin: 0 auto;
    padding: 54px 0;
  }

  .hero-lead {
    font-size: 18px;
  }

  .overview-inner,
  .register-page,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .register-page {
    gap: 28px;
  }

  .register-intro h1 {
    white-space: normal;
  }

  .field-spacer {
    display: none;
  }

  .form-footer,
  .site-footer {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .brand-copy strong {
    font-size: 18px;
  }

  .nav-button,
  .button {
    width: 100%;
  }

  .hero-actions {
    width: 100%;
  }

  .overview-item {
    min-height: 0;
  }
}

.login-page {
  min-height: calc(100vh - 136px);
  display: grid;
  place-items: center;
  padding: clamp(28px, 6vw, 70px) 16px;
}

.login-card {
  width: min(520px, 100%);
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.login-card h1 {
  margin: 0 0 14px;
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.1;
}

.login-card > p:not(.eyebrow) {
  margin: 0 0 26px;
  color: var(--muted);
  line-height: 1.55;
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-field {
  grid-template-rows: 18px 42px 16px;
}

.remember-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #34414a;
  font-weight: 700;
}

.login-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}


.admin-shell-body {
  min-height: 100vh;
  background: #eef2f4;
}

.admin-shell-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(220px, auto) minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  min-height: 76px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 249, 250, 0.96);
  backdrop-filter: blur(12px);
}

.admin-brand {
  text-decoration: none;
}

.admin-shell-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-shell-title strong {
  color: var(--text);
  font-size: 18px;
}

.admin-shell-title span {
  color: var(--muted);
  font-size: 13px;
}

.admin-shell-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
}

.admin-shell-link:hover,
.admin-shell-link:focus {
  border-color: var(--focus);
}

.admin-workspace {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0;
  width: min(1680px, 100%);
  min-height: calc(100vh - 130px);
  margin: 0 auto;
}

.admin-sidebar {
  position: sticky;
  top: 77px;
  align-self: start;
  display: grid;
  gap: 10px;
  min-height: calc(100vh - 130px);
  padding: 28px 16px;
  border-right: 1px solid var(--line);
  background: #e4e9ec;
}

.admin-mode-button {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 54px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 10px;
  background: transparent;
  color: #2a3740;
  font: inherit;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.admin-mode-button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
}

.admin-mode-button:hover,
.admin-mode-button:focus {
  border-color: var(--focus);
  background: rgba(255, 255, 255, 0.65);
}

.admin-mode-button.is-active {
  border-color: rgba(31, 122, 72, 0.35);
  background: #ffffff;
  box-shadow: var(--shadow);
  color: var(--green-dark);
}

.admin-mode-button.is-active span {
  border-color: rgba(31, 122, 72, 0.3);
  background: rgba(47, 157, 88, 0.11);
  color: var(--green-dark);
}

.admin-content {
  min-width: 0;
  padding: 32px 28px 56px;
}

.admin-mode-panel {
  display: none;
}

.admin-mode-panel.is-active {
  display: block;
}

.admin-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 24px;
  align-items: end;
  margin-bottom: 22px;
}

.admin-section-head h1 {
  margin: 0;
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.06;
}

.admin-section-head p:not(.eyebrow) {
  max-width: 900px;
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.58;
}

.admin-summary {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.admin-summary span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.admin-summary strong {
  display: block;
  margin-top: 8px;
  font-size: 40px;
  line-height: 1;
}

.admin-mode-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.admin-note {
  margin-bottom: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(226, 154, 43, 0.35);
  border-radius: 8px;
  background: rgba(226, 154, 43, 0.1);
  color: #5e4518;
  line-height: 1.45;
}

.admin-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.admin-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.admin-filter {
  display: grid;
  gap: 6px;
}

.admin-filter span {
  color: #34414a;
  font-size: 14px;
  font-weight: 700;
}

.admin-filter select {
  min-width: 320px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 0 12px;
  background: #ffffff;
  color: var(--text);
}

.admin-table-wrap {
  overflow: auto;
}

.admin-table {
  width: 100%;
  min-width: 1360px;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table th,
.admin-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #e7ecef;
  color: #27343d;
  font-size: 12px;
  text-transform: uppercase;
}

.admin-table tbody tr:hover {
  background: #f7f9fa;
}

.admin-empty {
  color: var(--muted);
  text-align: center !important;
  padding: 28px !important;
}

.admin-cell-muted {
  color: var(--muted);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #eef2f5;
  color: #293640;
  font-weight: 700;
  white-space: nowrap;
}

.status-badge[data-status="pending_admin_activation"] {
  border-color: rgba(226, 154, 43, 0.5);
  background: rgba(226, 154, 43, 0.14);
}

.status-badge[data-status="active"] {
  border-color: rgba(47, 157, 88, 0.45);
  background: rgba(47, 157, 88, 0.12);
  color: var(--green-dark);
}

.status-badge[data-status="rejected"],
.status-badge[data-status="blocked"],
.status-badge[data-status="deleted"] {
  border-color: rgba(181, 55, 55, 0.35);
  background: rgba(181, 55, 55, 0.08);
  color: var(--danger);
}

.admin-actions-menu {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
  min-width: 48px;
}

.admin-action-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.admin-action-toggle:hover,
.admin-action-toggle:focus {
  border-color: var(--focus);
}

.admin-action-dropdown {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: none;
  min-width: 178px;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(27, 38, 46, 0.16);
}

.admin-actions-menu.is-open .admin-action-dropdown {
  display: grid;
  gap: 4px;
}

.admin-action-button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.admin-action-button:hover,
.admin-action-button:focus {
  border-color: var(--focus);
  background: #eef4f7;
}

.admin-action-button[data-action="activate"] {
  color: var(--green-dark);
}

.admin-action-button[data-action="reject"],
.admin-action-button[data-action="block"],
.admin-action-button[data-action="delete"] {
  color: var(--danger);
}

.admin-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.admin-placeholder-card,
.admin-empty-state {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.admin-placeholder-card {
  min-height: 150px;
  padding: 20px;
}

.admin-placeholder-card strong {
  display: block;
  margin-bottom: 10px;
  font-size: 20px;
}

.admin-placeholder-card p,
.admin-empty-state {
  color: var(--muted);
  line-height: 1.55;
}

.admin-empty-state {
  padding: 28px;
}

.admin-footer {
  margin-top: 0;
}

@media (max-width: 1100px) {
  .admin-workspace {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .admin-placeholder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .admin-shell-header {
    grid-template-columns: 1fr;
  }

  .admin-section-head {
    grid-template-columns: 1fr;
  }

  .admin-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-filter select {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 620px) {
  .admin-sidebar,
  .admin-placeholder-grid {
    grid-template-columns: 1fr;
  }

  .admin-content {
    padding-inline: 16px;
  }
}

.admin-mail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.admin-mail-card {
  align-items: flex-start;
}

.admin-mail-status {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 12px 0 18px;
}

.admin-mail-status div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.admin-mail-status dt {
  color: var(--muted);
  font-size: 0.88rem;
}

.admin-mail-status dd {
  margin: 0;
  color: var(--text);
  word-break: break-word;
}

.admin-mail-test-field {
  width: 100%;
  margin: 12px 0;
}

.admin-debug-card {
  grid-column: 1 / -1;
}

.admin-debug-log-output {
  width: 100%;
  min-height: 260px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  background: #0f172a;
  color: #dbeafe;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.8rem;
  line-height: 1.45;
  resize: vertical;
}


@media (max-width: 900px) {
  .admin-mail-grid {
    grid-template-columns: 1fr;
  }
}

.app-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 28, 34, 0.42);
}

.app-dialog-backdrop[hidden] {
  display: none;
}

.app-dialog {
  width: min(520px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  align-items: start;
  padding: 30px;
  border: 1px solid rgba(181, 55, 55, 0.35);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 26px 78px rgba(18, 36, 48, 0.28);
}

.app-dialog-icon {
  position: relative;
  width: 0;
  height: 0;
  margin: 6px auto 0;
  border-left: 32px solid transparent;
  border-right: 32px solid transparent;
  border-bottom: 58px solid #c93636;
  filter: drop-shadow(0 8px 12px rgba(181, 55, 55, 0.18));
}

.app-dialog-icon::after {
  content: "!";
  position: absolute;
  left: -5px;
  top: 17px;
  color: #ffffff;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

.app-dialog-content h2 {
  margin: 0 0 10px;
  color: #b53737;
  font-size: 30px;
}

.app-dialog-content p {
  margin: 0;
  color: #2a343b;
  line-height: 1.55;
}

.app-dialog-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

.has-open-dialog {
  overflow: hidden;
}

@media (max-width: 560px) {
  .app-dialog {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .app-dialog-actions {
    justify-content: center;
  }
}

.course-builder-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.course-builder-nav {
  position: sticky;
  top: 98px;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef2f5;
  box-shadow: var(--shadow);
}

.course-builder-nav-button {
  display: grid;
  gap: 3px;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 9px 10px;
  background: transparent;
  color: #2a3740;
  font: inherit;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.course-builder-nav-button span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.course-builder-nav-button:hover,
.course-builder-nav-button:focus {
  border-color: var(--focus);
  background: #ffffff;
}

.course-builder-nav-button.is-active {
  border-color: rgba(31, 122, 72, 0.35);
  background: #ffffff;
  color: var(--green-dark);
  box-shadow: 0 8px 22px rgba(27, 38, 46, 0.08);
}

.course-builder-nav-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.course-builder-workarea {
  min-width: 0;
}

.course-builder-panel {
  display: none;
}

.course-builder-panel.is-active {
  display: block;
}

.course-builder-note {
  max-width: 820px;
  color: var(--muted);
  line-height: 1.5;
}

.course-include-deleted {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--muted);
  font-weight: 750;
}

.course-table {
  min-width: 980px;
}

.course-table td:nth-child(2) {
  min-width: 300px;
}

.course-create-panel {
  padding: 24px;
}

.course-create-head {
  margin-bottom: 18px;
}

.course-create-head h2 {
  margin: 0 0 8px;
  font-size: clamp(26px, 3vw, 38px);
}

.course-create-head p {
  margin: 0;
  max-width: 720px;
  color: var(--muted);
  line-height: 1.55;
}

.course-create-form {
  max-width: 720px;
}

.course-create-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.status-badge[data-status="draft"] {
  border-color: rgba(226, 154, 43, 0.5);
  background: rgba(226, 154, 43, 0.14);
  color: #704d12;
}

.status-badge[data-status="published"] {
  border-color: rgba(47, 157, 88, 0.45);
  background: rgba(47, 157, 88, 0.12);
  color: var(--green-dark);
}

.status-badge[data-status="archived"] {
  border-color: rgba(87, 102, 112, 0.35);
  background: rgba(87, 102, 112, 0.1);
  color: #3e4b54;
}

@media (max-width: 1000px) {
  .course-builder-layout {
    grid-template-columns: 1fr;
  }

  .course-builder-nav {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .course-builder-nav {
    grid-template-columns: 1fr;
  }

  .course-include-deleted {
    width: 100%;
  }
}

.course-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.course-list-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid rgba(87, 102, 112, 0.18);
  border-radius: 999px;
  background: #f7f9fa;
  color: #4f5e67;
  font-size: 12px;
  font-weight: 800;
}

.course-description-panel {
  padding: 24px;
}

.course-description-empty {
  max-width: 720px;
  padding: 18px 20px;
  border: 1px dashed rgba(87, 102, 112, 0.35);
  border-radius: 8px;
  background: #f8fafb;
  color: var(--muted);
  line-height: 1.55;
}

.course-description-form {
  display: grid;
  gap: 16px;
  max-width: 980px;
}

.course-selected-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(31, 122, 72, 0.25);
  border-radius: 8px;
  background: rgba(47, 157, 88, 0.08);
}

.course-selected-card strong {
  color: var(--green-dark);
}

.course-selected-card span {
  padding: 4px 9px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.course-description-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.course-description-form textarea {
  min-height: 104px;
  resize: vertical;
}

@media (max-width: 760px) {
  .course-description-grid {
    grid-template-columns: 1fr;
  }
}

.field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 10px 12px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  line-height: 1.45;
  outline: none;
}

.field textarea:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(39, 105, 200, 0.14);
}

.field.is-invalid textarea {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(181, 55, 55, 0.12);
}

.course-description-form .field {
  grid-template-rows: auto;
}

/* v011: управление курсами */
.course-manager-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.course-manage-empty {
  padding: 22px 24px;
  border: 1px dashed rgba(87, 102, 112, 0.35);
  border-radius: 10px;
  background: #f8fafb;
  color: var(--muted);
  line-height: 1.55;
}

.course-manage-shell {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  min-height: 640px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.course-manage-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-right: 1px solid var(--line);
  background: #f5f7f8;
}

.course-manage-logo {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background: #e9edf0;
  color: #a4adb4;
  font-weight: 900;
}

.course-manage-sidebar h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
}

.course-manage-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.course-manage-badges span {
  padding: 4px 8px;
  border: 1px solid rgba(87, 102, 112, 0.18);
  border-radius: 999px;
  background: #ffffff;
  color: #52616b;
  font-size: 12px;
  font-weight: 850;
}

.course-manage-nav {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.course-manage-nav button {
  border: 0;
  border-left: 4px solid transparent;
  padding: 10px 12px;
  background: transparent;
  text-align: left;
  color: #45535c;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.course-manage-nav button:hover,
.course-manage-nav button.is-active {
  border-left-color: var(--green);
  background: #ffffff;
  color: var(--green-dark);
}

.course-manage-content {
  min-width: 0;
  padding: 22px;
  background: #ffffff;
}

.course-manage-view {
  display: none;
}

.course-manage-view.is-active {
  display: block;
}

.course-content-panel {
  padding: 24px;
}

.course-inline-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin: 18px 0 22px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafb;
}

.course-add-lesson-form {
  grid-template-columns: minmax(220px, 1fr) auto;
  margin: 14px 0 0;
  background: #ffffff;
}

.course-structure {
  display: grid;
  gap: 16px;
}

.course-module-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(27, 38, 46, 0.06);
  overflow: hidden;
}

.course-module-header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 18px;
  border-left: 5px solid var(--green);
  background: #fbfcfd;
}

.course-module-header h3 {
  margin: 0 0 5px;
  font-size: 19px;
}

.course-module-header p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.course-structure-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.course-structure-actions button {
  min-height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 5px 9px;
  background: #ffffff;
  color: #394852;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.course-structure-actions button:hover {
  border-color: var(--focus);
  color: var(--focus);
}

.course-lessons-list {
  display: grid;
  gap: 8px;
  padding: 12px 18px;
}

.course-lesson-row {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  border: 1px solid rgba(87, 102, 112, 0.16);
  border-radius: 8px;
  background: #ffffff;
}

.course-lesson-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.course-lesson-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #eef2f4;
  color: #7d8991;
  font-weight: 900;
}

.course-empty-program {
  padding: 16px;
  border: 1px dashed rgba(87, 102, 112, 0.32);
  border-radius: 9px;
  background: #f8fafb;
  color: var(--muted);
  line-height: 1.5;
}

.course-empty-program.is-small {
  padding: 11px 12px;
  font-size: 14px;
}

@media (max-width: 1100px) {
  .course-manager-layout,
  .course-manage-shell {
    grid-template-columns: 1fr;
  }

  .course-manage-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .course-inline-form,
  .course-add-lesson-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .course-module-header,
  .course-lesson-row {
    flex-direction: column;
    align-items: stretch;
  }

  .course-structure-actions {
    justify-content: flex-start;
  }
}

/* v012: широкая рабочая область админки */
.admin-workspace {
  display: block;
  width: min(1780px, calc(100% - 24px));
  min-height: calc(100vh - 130px);
  margin: 0 auto;
}

.admin-sidebar {
  position: sticky;
  top: 76px;
  z-index: 18;
  display: flex;
  gap: 8px;
  align-items: stretch;
  min-height: 0;
  padding: 10px 12px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(228, 233, 236, 0.96);
  box-shadow: 0 10px 26px rgba(27, 38, 46, 0.07);
  overflow-x: auto;
  scrollbar-width: thin;
}

.admin-mode-button {
  flex: 0 0 auto;
  grid-template-columns: 34px minmax(130px, 1fr);
  width: auto;
  min-width: 194px;
  max-width: 245px;
  min-height: 50px;
  padding: 7px 9px;
}

.admin-mode-button span {
  width: 30px;
  height: 30px;
}

.admin-content {
  padding: 26px 18px 56px;
}

.admin-section-head {
  margin-top: 6px;
}

/* v012: навигация внутри управления курсами больше не съедает левую часть экрана */
.course-manager-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.course-builder-nav {
  position: sticky;
  top: 145px;
  z-index: 12;
  display: flex;
  gap: 8px;
  align-items: stretch;
  padding: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.course-builder-nav-button {
  flex: 0 0 auto;
  min-width: 160px;
  min-height: 46px;
}

.course-builder-workarea {
  width: 100%;
}

.course-manage-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 620px;
}

.course-manage-sidebar {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}

.course-manage-logo {
  width: 46px;
  height: 46px;
  border-radius: 10px;
}

.course-manage-sidebar h2 {
  font-size: 18px;
}

.course-manage-badges {
  justify-content: flex-start;
}

.course-manage-nav {
  display: flex;
  gap: 6px;
  margin-top: 0;
  justify-content: flex-end;
}

.course-manage-nav button {
  min-height: 40px;
  border-left: 0;
  border-bottom: 4px solid transparent;
  border-radius: 6px 6px 0 0;
  padding: 8px 12px;
  background: #ffffff;
  white-space: nowrap;
}

.course-manage-nav button:hover,
.course-manage-nav button.is-active {
  border-left-color: transparent;
  border-bottom-color: var(--green);
  background: #ffffff;
}

.course-manage-content {
  padding: 18px;
}

.course-description-form {
  max-width: none;
}

.course-create-head p {
  max-width: 980px;
}

.course-inline-form {
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.4fr) auto;
}

.course-add-lesson-form {
  grid-template-columns: minmax(280px, 1fr) auto;
}

.course-content-panel,
.course-description-panel {
  padding: 20px;
}

.course-module-card {
  width: 100%;
}

@media (max-width: 1180px) {
  .course-manage-sidebar {
    grid-template-columns: auto minmax(180px, 1fr);
  }

  .course-manage-badges,
  .course-manage-nav,
  .course-manage-sidebar > .button {
    grid-column: 1 / -1;
  }

  .course-manage-nav {
    justify-content: flex-start;
  }

  .course-inline-form,
  .course-add-lesson-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .admin-workspace {
    width: 100%;
  }

  .admin-sidebar {
    top: 0;
    position: static;
  }

  .admin-mode-button {
    min-width: 170px;
  }

  .course-builder-nav {
    position: static;
  }

  .course-manage-sidebar {
    grid-template-columns: 1fr;
  }

  .course-manage-logo {
    display: none;
  }
}


/* v012: compact top navigation layout */
.admin-shell-header {
  min-height: 64px;
  padding: 8px 18px;
}

.admin-shell-title strong {
  font-size: 16px;
}

.admin-shell-title span {
  font-size: 12px;
}

.admin-shell-link {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

.admin-workspace {
  display: block;
  width: 100%;
  max-width: none;
  min-height: calc(100vh - 64px);
}

.admin-sidebar {
  position: sticky;
  top: 65px;
  z-index: 18;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-height: 0;
  padding: 8px 18px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(228, 233, 236, 0.97);
  backdrop-filter: blur(10px);
}

.admin-mode-button {
  width: auto;
  min-height: 36px;
  grid-template-columns: 25px auto;
  gap: 7px;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.12;
  white-space: nowrap;
}

.admin-mode-button span {
  width: 23px;
  height: 23px;
  border-radius: 5px;
  font-size: 10px;
}

.admin-mode-button.is-active {
  box-shadow: 0 5px 14px rgba(27, 38, 46, 0.08);
}

.admin-content {
  width: min(1760px, 100%);
  margin: 0 auto;
  padding: 22px 22px 48px;
}

.admin-section-head {
  margin-bottom: 16px;
}

.admin-section-head h1 {
  font-size: clamp(30px, 3vw, 44px);
}

.admin-section-head p:not(.eyebrow) {
  max-width: 980px;
}

.course-manager-layout {
  grid-template-columns: 1fr;
  gap: 12px;
}

.course-builder-nav {
  position: sticky;
  top: 114px;
  z-index: 14;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border-radius: 9px;
  background: rgba(238, 242, 245, 0.96);
  backdrop-filter: blur(10px);
}

.course-builder-nav-button {
  width: auto;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.1;
  white-space: nowrap;
}

.course-builder-nav-button span {
  display: none;
}

.course-builder-workarea {
  width: 100%;
}

.course-manage-shell {
  grid-template-columns: 1fr;
  min-height: 0;
  overflow: visible;
}

.course-manage-sidebar {
  position: sticky;
  top: 165px;
  z-index: 12;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(245, 247, 248, 0.97);
  backdrop-filter: blur(10px);
}

.course-manage-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 12px;
}

.course-manage-sidebar h2 {
  max-width: 280px;
  font-size: 16px;
}

.course-manage-badges {
  gap: 5px;
}

.course-manage-badges span {
  padding: 3px 7px;
  font-size: 11px;
}

.course-manage-sidebar > .button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.course-manage-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 0 auto;
}

.course-manage-nav button {
  min-height: 34px;
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  border-radius: 7px;
  padding: 6px 10px 5px;
  background: transparent;
  font-size: 13px;
  white-space: nowrap;
}

.course-manage-nav button:hover,
.course-manage-nav button.is-active {
  border-left-color: transparent;
  border-color: rgba(31, 122, 72, 0.22);
  border-bottom-color: var(--green);
  background: #ffffff;
}

.course-manage-content {
  padding: 14px;
}

.course-description-panel,
.course-content-panel,
.course-create-panel {
  padding: 18px;
}

.course-create-head {
  margin-bottom: 14px;
}

.course-create-head h2 {
  font-size: clamp(24px, 2.3vw, 34px);
}

.course-inline-form {
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1.2fr) auto;
  gap: 10px;
  margin: 14px 0 18px;
  padding: 12px;
}

.course-add-lesson-form {
  grid-template-columns: minmax(260px, 1fr) auto;
}

.course-module-header {
  padding: 13px 14px;
}

.course-lessons-list {
  padding: 10px 14px;
}

.course-lesson-row {
  padding: 9px 10px;
}

.course-structure-actions button {
  min-height: 29px;
  padding: 4px 8px;
  font-size: 11px;
}

@media (max-width: 1000px) {
  .admin-sidebar,
  .course-builder-nav,
  .course-manage-sidebar {
    position: static;
  }

  .admin-mode-button,
  .course-builder-nav-button,
  .course-manage-nav button {
    white-space: normal;
  }

  .course-manage-nav {
    margin-left: 0;
  }

  .course-inline-form,
  .course-add-lesson-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .admin-shell-header {
    padding-inline: 12px;
  }

  .admin-content {
    padding-inline: 12px;
  }

  .admin-sidebar {
    padding-inline: 12px;
  }

  .admin-mode-button {
    flex: 1 1 170px;
  }
}


/* v013: редактор урока и первые текстовые шаги */
.lesson-editor-shell {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  min-height: calc(100vh - 210px);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(27, 38, 46, 0.08);
}

.lesson-editor-tree {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  background: #1f2427;
  color: #f6f8f9;
}

.lesson-editor-tree-head {
  display: grid;
  gap: 6px;
  padding: 16px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lesson-editor-tree-head strong {
  font-size: 17px;
  line-height: 1.2;
}

.lesson-editor-tree-head span {
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
}

.lesson-editor-tree-body {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 12px 0 22px;
  overflow: auto;
}

.lesson-tree-module {
  display: grid;
  gap: 4px;
}

.lesson-tree-module-title {
  padding: 12px 12px 7px;
  color: #ffffff;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.25;
}

.lesson-tree-module.is-current .lesson-tree-module-title {
  color: #d8f1df;
}

.lesson-tree-lessons {
  display: grid;
}

.lesson-tree-lesson {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 38px;
  border: 0;
  padding: 8px 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.84);
  text-align: left;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.lesson-tree-lesson:hover {
  background: rgba(255, 255, 255, 0.08);
}

.lesson-tree-lesson.is-active {
  background: #3f7c3f;
  color: #ffffff;
}

.lesson-tree-lesson.is-active::after {
  content: "";
  position: absolute;
  top: 0;
  right: -12px;
  width: 0;
  height: 0;
  border-top: 19px solid transparent;
  border-bottom: 19px solid transparent;
  border-left: 12px solid #3f7c3f;
}

.lesson-tree-lesson span {
  color: rgba(255, 255, 255, 0.64);
  font-weight: 900;
}

.lesson-tree-empty {
  padding: 8px 12px 10px 22px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}

.lesson-editor-workarea {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  min-width: 0;
  padding: 22px 28px 28px;
  background: #ffffff;
}

.lesson-editor-topbar {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 18px;
}

.lesson-editor-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  max-width: 1160px;
}

.lesson-editor-cover {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: #edf1f3;
  color: #adb5bb;
  font-weight: 900;
}

.lesson-editor-main-fields {
  display: grid;
  gap: 8px;
}

.lesson-title-field {
  position: relative;
}

.lesson-title-field input {
  min-height: 42px;
  padding-right: 165px;
  font-size: 15px;
}

.lesson-title-field small {
  position: absolute;
  right: 12px;
  bottom: 11px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.lesson-editor-extra {
  color: #51606a;
  font-size: 14px;
  font-weight: 750;
}

.lesson-steps-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  margin: 28px 0 20px;
}

.lesson-step-tab {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid #d5dee4;
  border-radius: 8px;
  background: #e4e8eb;
  color: #687780;
  font: inherit;
  cursor: pointer;
}

.lesson-step-tab span {
  position: relative;
  top: -22px;
  color: #64737c;
  font-size: 12px;
  font-weight: 800;
}

.lesson-step-tab strong {
  margin-top: -18px;
  font-size: 12px;
}

.lesson-step-tab.is-active {
  border-color: #55bf62;
  background: #5dcc66;
  color: #ffffff;
}

.lesson-step-tab.is-active span {
  color: #23552a;
}

.lesson-step-add {
  min-height: 58px;
  border: 0;
  border-radius: 8px;
  padding: 0 22px;
  background: #d7f2ff;
  color: #216a9a;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.lesson-step-add:hover {
  background: #c5ecff;
}

.lesson-step-editor {
  min-width: 0;
  max-width: 1220px;
}

.lesson-step-empty {
  padding: 22px;
  border: 1px dashed rgba(87, 102, 112, 0.32);
  border-radius: 10px;
  background: #f8fafb;
  color: var(--muted);
  line-height: 1.55;
}

.lesson-step-card {
  display: grid;
  gap: 12px;
}

.lesson-step-card-head {
  display: flex;
  gap: 16px;
  align-items: end;
  justify-content: space-between;
}

.lesson-step-title-field {
  flex: 1 1 420px;
  max-width: 720px;
}

.lesson-step-card-actions {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lesson-step-card-actions button {
  min-height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 4px 9px;
  background: #ffffff;
  color: #394852;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.lesson-step-card-actions button:hover {
  border-color: var(--focus);
  color: var(--focus);
}

.lesson-step-label {
  font-size: 20px;
  font-weight: 900;
}

.lesson-text-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 7px;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #f4f6f7;
}

.lesson-text-toolbar button {
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 3px 8px;
  background: transparent;
  color: #33434d;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.lesson-text-toolbar button:hover {
  border-color: var(--line-strong);
  background: #ffffff;
}

.lesson-text-editor {
  display: block;
  width: 100%;
  min-height: 300px;
  border: 1px solid var(--line-strong);
  border-radius: 0 0 8px 8px;
  padding: 14px;
  font: inherit;
  line-height: 1.55;
  resize: vertical;
  outline: none;
}

.lesson-text-editor:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(39, 105, 200, 0.12);
}

.lesson-editor-bottom {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.lesson-editor-bottom .button {
  flex: 0 0 auto;
}

@media (max-width: 980px) {
  .lesson-editor-shell {
    grid-template-columns: 1fr;
  }

  .lesson-editor-tree {
    max-height: 280px;
  }

  .lesson-tree-lesson.is-active::after {
    display: none;
  }

  .lesson-editor-workarea {
    padding: 18px;
  }

  .lesson-step-card-head,
  .lesson-editor-bottom {
    flex-direction: column;
    align-items: stretch;
  }
}

/* v015: компактный редактор урока, типы шагов, сворачиваемое дерево курса */
.admin-section-head-compact {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  margin: 12px 0 10px;
  padding: 0;
}

.admin-section-head-compact .eyebrow {
  margin-bottom: 4px;
  font-size: 11px;
}

.admin-section-head-compact h1 {
  margin: 0 0 3px;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.12;
}

.admin-section-head-compact p {
  margin: 0;
  max-width: none;
  font-size: 13px;
  line-height: 1.35;
}

.lesson-editor-shell {
  position: relative;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: calc(100vh - 160px);
}

.lesson-editor-shell.is-tree-collapsed {
  grid-template-columns: 48px minmax(0, 1fr);
}

.lesson-editor-tree {
  position: relative;
  background: #d3d9dd;
  color: #1f2b33;
  transition: width 0.18s ease, background 0.18s ease;
}

.lesson-editor-tree-head {
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: start;
  padding: 15px 12px;
  border-bottom: 1px solid rgba(45, 59, 68, 0.14);
}

.lesson-editor-tree-head strong {
  color: #111b22;
  font-size: 18px;
}

.lesson-editor-tree-head span {
  color: #59656d;
  font-size: 12px;
}

.lesson-tree-pin {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(45, 59, 68, 0.18);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.68);
  cursor: pointer;
  font-size: 15px;
}

.lesson-tree-pin.is-unpinned {
  transform: rotate(-28deg);
}

.lesson-tree-rail {
  display: none;
  position: absolute;
  inset: 0;
  width: 48px;
  border: 0;
  background: #edf1f3;
  color: #6c777f;
  cursor: pointer;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: inherit;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.lesson-editor-shell.is-tree-collapsed .lesson-tree-rail {
  display: grid;
  place-items: center;
}

.lesson-editor-shell.is-tree-collapsed .lesson-editor-tree-head,
.lesson-editor-shell.is-tree-collapsed .lesson-editor-tree-body {
  opacity: 0;
  pointer-events: none;
}

.lesson-editor-shell.is-tree-collapsed .lesson-editor-tree:hover .lesson-editor-tree-head,
.lesson-editor-shell.is-tree-collapsed .lesson-editor-tree:hover .lesson-editor-tree-body {
  opacity: 1;
  pointer-events: auto;
}

.lesson-editor-shell.is-tree-collapsed .lesson-editor-tree:hover .lesson-tree-rail {
  display: none;
}

.lesson-tree-module-title {
  color: #1e2a31;
  font-size: 15px;
  padding: 13px 14px 8px;
}

.lesson-tree-module.is-current .lesson-tree-module-title {
  color: #234f29;
}

.lesson-tree-lesson {
  min-height: 42px;
  grid-template-columns: 52px minmax(0, 1fr);
  color: #2e3a42;
  font-size: 15px;
  font-weight: 850;
  padding: 9px 14px;
}

.lesson-tree-lesson span {
  color: #52616a;
  font-size: 14px;
}

.lesson-tree-lesson:hover {
  background: rgba(255, 255, 255, 0.52);
}

.lesson-tree-lesson.is-active {
  background: #4d9954;
  color: #ffffff;
}

.lesson-tree-lesson.is-active span {
  color: #e8ffe9;
}

.lesson-tree-lesson.is-active::after {
  border-left-color: #4d9954;
}

.lesson-tree-empty {
  color: #60707a;
  font-size: 13px;
}

.lesson-editor-workarea {
  padding: 18px 24px 26px;
}

.lesson-editor-topbar {
  margin-bottom: 14px;
}

.lesson-steps-strip {
  gap: 12px;
  margin: 22px 0 18px;
}

.lesson-step-tab {
  position: relative;
  width: 72px;
  height: 64px;
  border-radius: 9px;
  overflow: visible;
}

.lesson-step-tab span {
  position: absolute;
  top: -22px;
  left: 0;
  right: 0;
  color: #41515c;
  font-size: 15px;
  line-height: 1;
  font-weight: 900;
}

.lesson-step-tab strong {
  margin: 0;
  font-size: 19px;
  line-height: 1;
}

.lesson-step-tab em {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: 11px;
  font-weight: 850;
}

.lesson-step-type-video strong {
  font-size: 22px;
}

.lesson-step-type-test strong {
  font-size: 22px;
}

.lesson-step-type-practical strong {
  font-size: 15px;
}

.lesson-step-tab.is-active span {
  color: #1f5628;
}

.lesson-step-add {
  min-height: 64px;
  padding: 0 24px;
  font-size: 15px;
}

.lesson-step-card-head {
  align-items: end;
}

.lesson-step-title-field {
  max-width: 820px;
}

.lesson-step-label {
  margin-top: 6px;
  font-size: 22px;
}

.lesson-text-toolbar {
  gap: 6px;
  padding: 8px 9px;
}

.lesson-text-toolbar button {
  min-height: 32px;
  padding: 4px 9px;
  font-size: 12px;
}

.lesson-video-editor,
.lesson-test-editor,
.lesson-practical-editor {
  display: grid;
  gap: 14px;
}

.lesson-step-help {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.lesson-video-tabs {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid #b7c3cc;
  border-radius: 4px;
  overflow: hidden;
}

.lesson-video-tabs button {
  min-height: 36px;
  border: 0;
  border-right: 1px solid #b7c3cc;
  padding: 0 22px;
  background: #ffffff;
  color: #384853;
  font: inherit;
  font-weight: 800;
}

.lesson-video-tabs button:last-child {
  border-right: 0;
}

.lesson-video-tabs button.is-active {
  background: #edf0ff;
  color: #314d95;
}

.lesson-video-controls {
  display: grid;
  grid-template-columns: auto minmax(280px, 520px);
  gap: 14px;
  align-items: end;
}

.lesson-video-help {
  display: grid;
  gap: 8px;
  color: #32424d;
}

.lesson-video-help summary {
  cursor: pointer;
  font-weight: 850;
}

.lesson-video-help code {
  display: block;
  padding: 16px 18px;
  overflow-x: auto;
  border-radius: 4px;
  background: #f0f1f3;
  font-family: Consolas, Monaco, monospace;
  color: #1c2630;
}

.lesson-video-description {
  min-height: 150px;
}

.lesson-test-points {
  max-width: 180px;
}

.lesson-test-settings,
.lesson-test-checks {
  display: flex;
  gap: 12px 18px;
  flex-wrap: wrap;
  align-items: center;
  color: #31404a;
  font-weight: 750;
}

.lesson-test-settings label,
.lesson-test-checks label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-weight: 700;
}

.lesson-test-options {
  display: grid;
  gap: 8px;
  max-width: 900px;
}

.lesson-test-option-row {
  display: grid;
  grid-template-columns: 24px minmax(220px, 1fr) 26px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid #dce3e8;
  border-radius: 8px;
  background: #ffffff;
}

.lesson-test-option-row input[type="text"] {
  min-height: 36px;
  border: 1px solid #d1dbe2;
  border-radius: 6px;
  padding: 7px 10px;
  font: inherit;
}

.step-type-modal[hidden] {
  display: none;
}

.step-type-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 22px;
}

.step-type-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 28, 34, 0.38);
}

.step-type-dialog {
  position: relative;
  z-index: 1;
  width: min(840px, 96vw);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(17, 27, 35, 0.28);
  padding: 26px;
}

.step-type-dialog h2 {
  margin: 0 0 20px;
  text-align: center;
  font-size: 30px;
}

.step-type-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f0f3f5;
  font: inherit;
  font-size: 25px;
  cursor: pointer;
}

.step-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.step-type-option {
  display: grid;
  gap: 7px;
  min-height: 112px;
  border: 1px solid #dce5ea;
  border-radius: 12px;
  background: #ffffff;
  padding: 18px;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.step-type-option:hover {
  border-color: #65b96a;
  box-shadow: 0 10px 24px rgba(70, 139, 77, 0.14);
}

.step-type-option strong {
  font-size: 18px;
}

.step-type-option span {
  color: #596975;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .lesson-video-controls,
  .step-type-grid {
    grid-template-columns: 1fr;
  }

  .lesson-editor-shell,
  .lesson-editor-shell.is-tree-collapsed {
    grid-template-columns: 1fr;
  }

  .lesson-editor-tree {
    min-height: 220px;
  }
}

/* v016: единый компактный заголовок админки, описание урока и рабочий rich-text редактор */
.admin-section-head-compact {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 8px 0 12px;
}

.admin-section-head-compact h1 {
  font-size: clamp(20px, 1.9vw, 28px);
}

.admin-section-head-compact p:not(.eyebrow) {
  font-size: 13px;
  line-height: 1.34;
  max-width: 980px;
}

.admin-section-head-compact .admin-summary {
  width: 148px;
  padding: 10px 12px;
  border-radius: 7px;
}

.admin-section-head-compact .admin-summary span {
  font-size: 11px;
  line-height: 1.22;
}

.admin-section-head-compact .admin-summary strong {
  margin-top: 5px;
  font-size: 28px;
}

.course-lesson-title {
  align-items: flex-start;
}

.course-lesson-title-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.course-lesson-title-text small {
  color: #667682;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 650;
}

.lesson-admin-description-field textarea {
  min-height: 78px;
  resize: vertical;
  font-size: 14px;
  line-height: 1.45;
}

.lesson-step-card-head-compact {
  align-items: center;
}

.lesson-step-card-head-compact .lesson-step-label {
  margin-top: 0;
}

.lesson-step-tab {
  width: 78px;
  height: 72px;
  padding-top: 12px;
}

.lesson-step-tab span {
  top: -19px;
  font-size: 18px;
}

.lesson-step-tab strong {
  font-size: 22px;
}

.lesson-step-tab em {
  font-size: 12px;
}

.lesson-rich-editor {
  display: block;
  width: 100%;
  min-height: 340px;
  border: 1px solid var(--line-strong);
  border-radius: 0 0 8px 8px;
  padding: 16px;
  background: #ffffff;
  color: #1f2b33;
  font: inherit;
  line-height: 1.6;
  outline: none;
  overflow: auto;
}

.lesson-rich-editor:empty::before {
  content: attr(data-placeholder);
  color: #87939b;
}

.lesson-rich-editor:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(39, 105, 200, 0.12);
}

.lesson-rich-editor h2 {
  margin: 0.9em 0 0.45em;
  font-size: 1.55em;
  line-height: 1.2;
}

.lesson-rich-editor blockquote {
  margin: 12px 0;
  padding: 10px 14px;
  border-left: 4px solid #8bbd92;
  background: #f4faf5;
  color: #33434d;
}

.lesson-rich-editor img {
  max-width: 100%;
  height: auto;
}

.lesson-formula {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 4px;
  background: #eef4ff;
  color: #244a91;
  font-family: Consolas, Monaco, monospace;
}

.lesson-content-table {
  width: 100%;
  max-width: 760px;
  border-collapse: collapse;
  margin: 12px 0;
}

.lesson-content-table th,
.lesson-content-table td {
  border: 1px solid #cbd6dd;
  padding: 8px 10px;
  text-align: left;
}

.lesson-content-table th {
  background: #edf2f5;
}

@media (max-width: 760px) {
  .admin-section-head-compact {
    grid-template-columns: 1fr;
  }
}

/* v017: toolbar with custom SVG icons for text-step editor */
.lesson-text-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fa 100%);
}

.lesson-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding-right: 7px;
  border-right: 1px solid #d6e0e7;
}

.lesson-toolbar-group:last-child {
  border-right: 0;
  padding-right: 0;
}

.lesson-text-toolbar .lesson-toolbar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #22313a;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.lesson-text-toolbar .lesson-toolbar-button:hover {
  border-color: #b7c8d4;
  background: #ffffff;
}

.lesson-text-toolbar .lesson-toolbar-button:active {
  transform: translateY(1px);
}

.lesson-text-toolbar .lesson-toolbar-button img {
  display: block;
  width: 19px;
  height: 19px;
  object-fit: contain;
  pointer-events: none;
}

.lesson-toolbar-text-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.lesson-rich-editor a {
  color: #1d62b7;
  text-decoration: underline;
}

.lesson-rich-editor ul,
.lesson-rich-editor ol {
  padding-left: 28px;
}

.lesson-rich-editor hr {
  border: 0;
  border-top: 1px solid #cbd6dd;
  margin: 16px 0;
}

/* v018: крупные SVG-иконки, активные Undo/Redo, палитра цвета и список заголовков */
.lesson-text-toolbar {
  gap: 9px;
  padding: 11px 12px;
}

.lesson-toolbar-group {
  gap: 5px;
  padding-right: 10px;
}

.lesson-text-toolbar .lesson-toolbar-button {
  width: 48px;
  height: 46px;
  min-height: 46px;
  border-radius: 7px;
}

.lesson-text-toolbar .lesson-toolbar-button img {
  width: 38px;
  height: 38px;
}

.lesson-text-toolbar .lesson-toolbar-button:hover {
  border-color: #9eb2bf;
  background: #ffffff;
}

.lesson-text-toolbar .lesson-toolbar-button.is-disabled-state,
.lesson-text-toolbar .lesson-toolbar-button[aria-disabled="true"] {
  cursor: default;
  opacity: 1;
  background: transparent;
  border-color: transparent;
}

.lesson-text-toolbar .lesson-toolbar-button.is-disabled-state:hover,
.lesson-text-toolbar .lesson-toolbar-button[aria-disabled="true"]:hover {
  background: transparent;
  border-color: transparent;
}

.lesson-toolbar-color-wrap {
  position: relative;
  display: inline-flex;
}

.lesson-text-toolbar .lesson-toolbar-color-button {
  width: 69px;
  height: 46px;
  min-height: 46px;
}

.lesson-color-palette[hidden] {
  display: none;
}

.lesson-color-palette {
  position: absolute;
  z-index: 100;
  top: calc(100% + 8px);
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, 28px);
  gap: 7px;
  padding: 10px;
  border: 1px solid #c9d5dc;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(24, 35, 43, 0.18);
}

.lesson-color-swatch {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(31, 43, 51, 0.24);
  border-radius: 6px;
  background: var(--swatch-color);
  cursor: pointer;
}

.lesson-color-swatch:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(39, 105, 200, 0.16);
}

.lesson-heading-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 46px;
  padding: 0 8px 0 10px;
  border: 1px solid #c9d5dc;
  border-radius: 7px;
  background: #ffffff;
  color: #22313a;
  font-size: 13px;
  font-weight: 850;
}

.lesson-heading-control span {
  white-space: nowrap;
}

.lesson-heading-control select {
  min-width: 154px;
  height: 34px;
  border: 1px solid #d6e0e7;
  border-radius: 6px;
  background: #f7fafc;
  color: #22313a;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.lesson-heading-control select option[value="H1"] {
  font-size: 22px;
  font-weight: 900;
}

.lesson-heading-control select option[value="H2"] {
  font-size: 19px;
  font-weight: 900;
}

.lesson-heading-control select option[value="H3"] {
  font-size: 16px;
  font-weight: 850;
}

.lesson-heading-control select option[value="H4"] {
  font-size: 14px;
  font-weight: 800;
}

.lesson-toolbar-text-button {
  font-size: 18px;
  font-weight: 950;
}

.lesson-rich-editor h1 {
  margin: 1em 0 0.5em;
  font-size: 2em;
  line-height: 1.16;
}

.lesson-rich-editor h3 {
  margin: 0.85em 0 0.42em;
  font-size: 1.32em;
  line-height: 1.22;
}

.lesson-rich-editor h4 {
  margin: 0.75em 0 0.38em;
  font-size: 1.14em;
  line-height: 1.25;
}


/* v019: компактная корректировка редактора текста и верхнего блока урока */
.lesson-text-toolbar {
  gap: 7px;
  padding: 8px 10px;
}

.lesson-toolbar-group {
  gap: 4px;
  padding-right: 8px;
}

.lesson-text-toolbar .lesson-toolbar-button {
  width: 38px;
  height: 37px;
  min-height: 37px;
  border-radius: 6px;
}

.lesson-text-toolbar .lesson-toolbar-button img {
  width: 30px;
  height: 30px;
}

.lesson-text-toolbar .lesson-toolbar-color-button {
  width: 56px;
  height: 37px;
  min-height: 37px;
}

.lesson-heading-control {
  height: 37px;
  padding: 0 6px;
  gap: 0;
}

.lesson-heading-control span {
  display: none;
}

.lesson-heading-control select {
  min-width: 142px;
  height: 29px;
  font-size: 13px;
}

.lesson-toolbar-text-button {
  font-size: 15px;
}

.lesson-color-palette {
  grid-template-columns: repeat(4, 30px);
  gap: 8px;
  padding: 11px;
  border: 1px solid #9aabb6;
}

.lesson-color-swatch {
  width: 30px;
  height: 30px;
  border: 2px solid #2d3941;
  border-radius: 5px;
  background-color: var(--swatch-color, #ffffff) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.lesson-color-swatch[data-editor-color="#ffffff"] {
  border-color: #687780;
  box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 3px #a8b4bc;
}

.lesson-editor-main-fields {
  gap: 7px;
}

.lesson-title-field {
  grid-template-rows: 18px 42px;
  gap: 6px;
}

.lesson-title-field small {
  top: calc(100% + 7px);
  bottom: auto;
  right: 0;
  z-index: 2;
  line-height: 18px;
}

.lesson-admin-description-field {
  grid-template-rows: 18px auto;
  gap: 6px;
  margin-top: 0;
}

.lesson-admin-description-field span {
  line-height: 18px;
}

.lesson-admin-description-field textarea {
  min-height: 70px;
}

.lesson-steps-strip {
  gap: 11px;
  margin: 34px 0 18px;
}

.lesson-step-tab {
  width: 70px;
  height: 65px;
  padding-top: 9px;
}

.lesson-step-tab span {
  top: -29px;
  font-size: 16px;
}

.lesson-step-tab strong {
  font-size: 20px;
}

.lesson-step-tab em {
  font-size: 11px;
}

.lesson-step-type-video strong,
.lesson-step-type-test strong {
  font-size: 20px;
}

.lesson-step-type-practical strong {
  font-size: 14px;
}

.lesson-step-add {
  min-height: 65px;
  padding: 0 21px;
}

/* v020: image/table dialogs and final toolbar proportions */
.lesson-text-toolbar .lesson-toolbar-color-button img {
  width: 33px;
  height: 33px;
}

.lesson-image-figure {
  max-width: 100%;
  margin: 16px 0;
  text-align: center;
}

.lesson-image-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #d5e0e8;
}

.lesson-image-figure figcaption {
  margin-top: 7px;
  color: #687780;
  font-size: 13px;
}

.editor-image-modal[hidden],
.editor-table-modal[hidden] {
  display: none;
}

.editor-image-modal,
.editor-table-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editor-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.46);
}

.editor-image-dialog,
.editor-table-dialog {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #ccd6dd;
  box-shadow: 0 24px 72px rgba(17, 24, 39, 0.25);
  overflow: hidden;
}

.editor-image-dialog {
  display: grid;
  grid-template-columns: 250px minmax(520px, 1fr);
  width: min(1080px, calc(100vw - 56px));
  min-height: 650px;
}

.editor-image-sidebar {
  background: #e7e7e9;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
}

.editor-image-source {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 16px 20px;
  color: #5f6368;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}

.editor-image-source.is-active {
  background: #ffffff;
  color: #232f3a;
}

.editor-image-source:disabled {
  cursor: default;
  opacity: 0.75;
}

.editor-image-source > span {
  flex: 1;
}

.editor-image-main {
  position: relative;
  min-height: 650px;
  padding: 42px 48px 36px;
}

.editor-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  border: 0;
  background: transparent;
  color: #969ca3;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.editor-image-screen {
  display: none;
  min-height: 560px;
}

.editor-image-screen.is-active {
  display: flex;
  flex-direction: column;
}

.editor-image-dropzone {
  flex: 1;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 2px dashed transparent;
  border-radius: 10px;
  color: #3d3f43;
  text-align: center;
}

.editor-image-dropzone.is-dragover {
  border-color: #2a7fe8;
  background: #f2f8ff;
}

.editor-image-dropzone strong {
  font-size: 40px;
  font-weight: 500;
}

.editor-image-dropzone small {
  color: #7a838b;
}

.editor-image-screen h2 {
  margin: 0 0 24px;
  color: #2f3338;
  font-size: 25px;
}

.editor-image-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333942;
  font-size: 18px;
}

.editor-image-preview-wrap {
  flex: 1;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.editor-image-preview-wrap img {
  max-width: min(650px, 100%);
  max-height: 420px;
  object-fit: contain;
}

.editor-image-preview-tools {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 10px 0 14px;
}

.editor-image-preview-tools button {
  border: 0;
  background: transparent;
  color: #1f2933;
  font-size: 26px;
  opacity: 0.65;
}

.editor-image-link-field,
.editor-image-alt-field {
  max-width: 640px;
}

.editor-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: auto;
}

.editor-modal-actions-left {
  justify-content: flex-start;
}

.editor-modal-actions-split {
  justify-content: space-between;
}

.editor-table-dialog {
  width: 360px;
}

.editor-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #d6d6d6;
  color: #39424a;
}

.editor-table-head .editor-modal-close {
  position: static;
  font-size: 22px;
}

.editor-table-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  padding: 14px;
}

.editor-table-grid .field,
.editor-table-wide {
  gap: 5px;
}

.editor-table-grid input,
.editor-table-grid select,
.editor-table-wide input {
  height: 36px;
  border: 1px solid #c7d1d8;
  border-radius: 0;
  padding: 6px 8px;
}

.editor-table-wide {
  display: grid;
  margin: 0 14px 12px;
}

.editor-table-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding: 10px 14px;
  border-top: 1px solid #d6d6d6;
  background: #f2f2f2;
}

.editor-table-actions .button-primary {
  background: #07883f;
}

@media (max-width: 860px) {
  .editor-image-dialog {
    grid-template-columns: 1fr;
    width: calc(100vw - 28px);
  }

  .editor-image-sidebar {
    flex-direction: row;
    overflow-x: auto;
  }

  .editor-image-source {
    min-width: 170px;
  }
}

/* v021: resizable images inside rich-text editor and image properties dialog */
.lesson-rich-editor .lesson-image-figure,
.lesson-rich-editor .lesson-resizable-image {
  position: relative;
  display: block;
  max-width: 100%;
  min-width: 48px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}

.lesson-rich-editor .lesson-image-figure:hover,
.lesson-rich-editor .lesson-image-figure.is-selected,
.lesson-rich-editor .lesson-image-figure.is-resizing {
  border-color: #1e90ff;
  box-shadow: 0 0 0 1px rgba(30, 144, 255, 0.15);
}

.lesson-rich-editor .lesson-image-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  user-select: none;
}

.lesson-rich-editor .lesson-image-figure::after {
  content: "";
  position: absolute;
  left: -7px;
  bottom: -7px;
  width: 13px;
  height: 13px;
  border: 2px solid #1e90ff;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
}

.lesson-rich-editor .lesson-image-figure:hover::after,
.lesson-rich-editor .lesson-image-figure.is-selected::after,
.lesson-rich-editor .lesson-image-figure.is-resizing::after {
  opacity: 1;
}

.lesson-rich-editor .lesson-image-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  pointer-events: none;
}

.lesson-rich-editor .lesson-image-figure:hover::before,
.lesson-rich-editor .lesson-image-figure.is-selected::before,
.lesson-rich-editor .lesson-image-figure.is-resizing::before {
  border-color: rgba(30, 144, 255, 0.55);
}

body.is-resizing-editor-image {
  cursor: nwse-resize;
  user-select: none;
}

.editor-image-props-modal[hidden] {
  display: none;
}

.editor-image-props-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editor-image-props-dialog {
  position: relative;
  z-index: 1;
  width: 365px;
  max-width: calc(100vw - 24px);
  background: #ffffff;
  border: 1px solid #c9d1d8;
  border-radius: 4px;
  box-shadow: 0 20px 64px rgba(17, 24, 39, 0.24);
  overflow: hidden;
}

.editor-image-props-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #d6d6d6;
  color: #323b44;
  font-weight: 800;
}

.editor-image-props-head .editor-modal-close {
  position: static;
  font-size: 22px;
}

.editor-image-props-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.editor-image-props-wide input,
.editor-image-props-size-row input {
  height: 36px;
  border: 1px solid #bfcad2;
  border-radius: 0;
  padding: 7px 8px;
}

.editor-image-props-size-row {
  display: grid;
  grid-template-columns: 76px 76px 34px 34px;
  align-items: end;
  gap: 10px;
}

.editor-image-ratio-lock,
.editor-image-reset-size {
  width: 34px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #38424c;
  font-size: 20px;
  cursor: pointer;
}

.editor-image-ratio-lock:not(.is-active) {
  opacity: 0.45;
}

.editor-image-align-field {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.editor-image-align-field legend {
  width: 100%;
  margin-bottom: 2px;
  color: #34404a;
  font-weight: 750;
}

.editor-image-align-field label,
.editor-image-caption-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #303942;
}

.editor-image-props-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid #d6d6d6;
  background: #f2f2f2;
}

.editor-image-props-actions .button-primary {
  background: #07883f;
}

/* v022: image selection, wrapping alignment, captions and resizable properties dialog */
.lesson-rich-editor .lesson-image-figure,
.lesson-rich-editor .lesson-resizable-image {
  display: block;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  box-sizing: border-box;
  cursor: default;
}

.lesson-rich-editor .lesson-image-figure[data-image-align="center"] {
  width: 100% !important;
  clear: both;
  text-align: center;
}

.lesson-rich-editor .lesson-image-figure[data-image-align="left"] {
  float: left;
  clear: none;
  text-align: left;
}

.lesson-rich-editor .lesson-image-figure[data-image-align="right"] {
  float: right;
  clear: none;
  text-align: right;
}

.lesson-rich-editor .lesson-image-figure[data-image-align="none"] {
  float: none;
  clear: both;
  text-align: left;
}

.lesson-rich-editor .lesson-image-figure:hover,
.lesson-rich-editor .lesson-image-figure.is-selected,
.lesson-rich-editor .lesson-image-figure.is-resizing {
  border-color: #1e90ff;
  box-shadow: 0 0 0 1px rgba(30, 144, 255, 0.2);
}

.lesson-rich-editor .lesson-image-figure img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  pointer-events: auto;
  user-select: none;
  cursor: pointer;
}

.lesson-rich-editor .lesson-image-figure figcaption {
  display: block;
  min-height: 28px;
  margin-top: 6px;
  padding: 5px 8px;
  border: 1px dashed #b6c5d2;
  background: rgba(248, 250, 252, 0.92);
  color: #49545d;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

.lesson-rich-editor .lesson-image-figure figcaption[hidden] {
  display: none;
}

.lesson-rich-editor .lesson-image-figure figcaption:focus {
  outline: 2px solid rgba(30, 144, 255, 0.35);
  border-color: #1e90ff;
  background: #ffffff;
}

.lesson-rich-editor .lesson-image-figure::after {
  left: -8px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  border: 2px solid #1e90ff;
  background: #ffffff;
  cursor: nwse-resize;
}

.editor-image-props-dialog {
  width: 365px;
  min-width: 365px;
  min-height: 520px;
  resize: none;
}

.editor-image-props-size-row {
  grid-template-columns: 76px 76px 36px 36px;
  align-items: center;
}

.editor-image-ratio-lock,
.editor-image-reset-size {
  align-self: end;
  margin-bottom: 0;
  line-height: 1;
}

.editor-dialog-resize-grip {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 26px;
  cursor: nesw-resize;
  z-index: 2;
}

.editor-dialog-resize-grip::before {
  content: "";
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 0;
  height: 0;
  border-left: 14px solid #9aa6b2;
  border-top: 14px solid transparent;
  opacity: 0.85;
}

body.is-resizing-image-props-dialog {
  cursor: nesw-resize;
  user-select: none;
}

/* v023: fixes for image object editing, image properties window and file library */
.lesson-rich-editor .lesson-image-figure::after {
  left: auto;
  right: -8px;
  bottom: -8px;
  cursor: nwse-resize;
}

.lesson-rich-editor .lesson-image-figure[data-image-align="center"]::after {
  right: calc(50% - (var(--lesson-image-width, 0px) / 2) - 8px);
}

.lesson-rich-editor .lesson-image-figure figcaption {
  cursor: text;
  user-select: text;
  pointer-events: auto;
}

.editor-image-props-size-row {
  align-items: start;
}

.editor-image-ratio-lock,
.editor-image-reset-size {
  align-self: start;
  margin-top: 24px;
  margin-bottom: 0;
}

.editor-dialog-resize-grip {
  left: auto;
  right: 0;
  bottom: 0;
  cursor: nwse-resize;
}

.editor-dialog-resize-grip::before {
  left: auto;
  right: 4px;
  bottom: 4px;
  border-left: 0;
  border-right: 14px solid #9aa6b2;
  border-top: 14px solid transparent;
}

body.is-resizing-image-props-dialog {
  cursor: nwse-resize;
}

.file-library-panel {
  min-height: 520px;
}

.file-library-actions {
  align-items: center;
  flex-wrap: wrap;
}

.file-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.file-library-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7e0e8;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.file-library-preview {
  display: grid;
  place-items: center;
  min-height: 130px;
  border: 1px dashed #c4d0da;
  border-radius: 10px;
  background: #f8fafc;
  overflow: hidden;
}

.file-library-preview img {
  width: 100%;
  height: 130px;
  object-fit: contain;
  display: block;
}

.file-library-preview span {
  color: #64748b;
  font-weight: 800;
}

.file-library-info {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.file-library-info strong,
.file-library-info span,
.file-library-info small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-library-info strong {
  color: #172033;
}

.file-library-info span,
.file-library-info small {
  color: #64748b;
}


/* v024: image-area resize handle, caption isolation and corrected properties window layout */
.lesson-rich-editor .lesson-image-figure::after {
  left: auto !important;
  right: -8px !important;
  bottom: -8px !important;
}

.lesson-rich-editor .lesson-image-figure[data-image-align="center"]::after {
  right: -8px !important;
}

.lesson-rich-editor .lesson-image-figure {
  outline-offset: 0;
}

.lesson-rich-editor .lesson-image-figure figcaption {
  position: relative;
  z-index: 1;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
  pointer-events: auto;
}

.lesson-rich-editor .lesson-image-figure figcaption:empty::before {
  content: "Подпись изображения";
  color: #9aa6b2;
}

.editor-image-props-size-row {
  grid-template-columns: 76px 76px 36px 36px !important;
  align-items: end !important;
  gap: 10px !important;
}

.editor-image-props-size-row .field {
  grid-template-rows: 18px 36px !important;
  gap: 4px !important;
  min-height: auto !important;
}

.editor-image-props-size-row .field input {
  height: 36px !important;
}

.editor-image-ratio-lock,
.editor-image-reset-size {
  align-self: end !important;
  margin: 0 !important;
  height: 36px !important;
  line-height: 36px !important;
}

.editor-dialog-resize-grip {
  left: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  cursor: nwse-resize !important;
}

.editor-dialog-resize-grip::before {
  left: auto !important;
  right: 4px !important;
  bottom: 4px !important;
  border-left: 0 !important;
  border-right: 14px solid #9aa6b2 !important;
  border-top: 14px solid transparent !important;
}

body.is-resizing-image-props-dialog {
  cursor: nwse-resize !important;
}

/* v025: защита от потери данных в редакторе шага и нормальный размер подписи изображения */
.lesson-step-card.is-dirty {
  border-color: #d4a72c;
  box-shadow: 0 0 0 2px rgba(212, 167, 44, 0.14);
}

.lesson-step-card-actions button.is-dirty,
.lesson-editor-bottom .button.is-dirty {
  box-shadow: 0 0 0 3px rgba(212, 167, 44, 0.18);
}

.lesson-rich-editor .lesson-image-figure figcaption {
  font-size: inherit;
  line-height: 1.6;
  color: #1f2b33;
}

.lesson-rich-editor .lesson-image-figure figcaption:empty::before {
  content: attr(data-placeholder);
  color: #8a98a3;
}

/* v026: дерево курса вынесено из рабочей карточки урока в статичную левую область экрана */
body.is-lesson-editor-active .admin-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 18px;
}

body.is-lesson-editor-active .course-builder-workarea,
body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
  width: 100%;
  max-width: none;
}

body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"].is-active {
  display: block;
}

body.is-lesson-editor-active .lesson-editor-shell {
  --lesson-tree-width: 286px;
  --lesson-tree-rail-width: 52px;
  --lesson-tree-top: 148px;
  display: block;
  min-height: calc(100vh - var(--lesson-tree-top));
  padding-left: calc(var(--lesson-tree-width) + 28px);
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed {
  padding-left: calc(var(--lesson-tree-rail-width) + 24px);
}

body.is-lesson-editor-active .lesson-editor-tree {
  position: fixed;
  z-index: 13;
  left: 0;
  top: var(--lesson-tree-top);
  bottom: 0;
  width: var(--lesson-tree-width);
  min-height: 0;
  border-right: 1px solid rgba(45, 59, 68, 0.18);
  box-shadow: 12px 0 28px rgba(18, 29, 38, 0.08);
  overflow: hidden;
}

body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed .lesson-editor-tree {
  width: var(--lesson-tree-rail-width);
  box-shadow: none;
}

body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed .lesson-editor-tree:hover {
  width: var(--lesson-tree-width);
  box-shadow: 12px 0 30px rgba(18, 29, 38, 0.18);
}

body.is-lesson-editor-active .lesson-editor-workarea {
  width: min(1260px, calc(100vw - var(--lesson-tree-width) - 64px));
  min-height: calc(100vh - var(--lesson-tree-top));
  margin: 0 auto 0 0;
  padding: 18px 0 34px;
  background: transparent;
}

body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed .lesson-editor-workarea {
  width: min(1360px, calc(100vw - var(--lesson-tree-rail-width) - 64px));
}

body.is-lesson-editor-active .lesson-step-editor {
  max-width: none;
}

body.is-lesson-editor-active .lesson-rich-editor {
  min-height: 440px;
}

@media (max-width: 1000px) {
  body.is-lesson-editor-active .admin-content {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.is-lesson-editor-active .lesson-editor-shell,
  body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed {
    padding-left: 0;
  }

  body.is-lesson-editor-active .lesson-editor-tree {
    position: static;
    width: 100%;
    max-height: 280px;
    margin-bottom: 14px;
    border-right: 0;
    border-radius: 10px;
  }

  body.is-lesson-editor-active .lesson-editor-workarea,
  body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed .lesson-editor-workarea {
    width: 100%;
  }
}

/* v027: выравнивание архитектуры админки — команды в шапке, команды курсов под шапкой, лента по центру */
body.admin-shell-body {
  --admin-shell-max-width: 1640px;
  --admin-content-max-width: 1540px;
  --admin-workarea-max-width: 1180px;
}

.admin-shell-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px 22px;
  align-items: start;
  padding: 10px 16px 0;
}

.admin-shell-title {
  align-self: center;
}

.admin-header-modes {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 0 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.admin-workspace {
  display: block;
  padding: 18px 0 42px;
}

.admin-content {
  width: min(var(--admin-content-max-width), calc(100vw - 32px));
  max-width: var(--admin-content-max-width);
  margin: 0 auto;
  padding: 0 16px 48px;
}

.admin-sidebar {
  display: none !important;
}

.admin-mode-button {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}

.admin-mode-button span {
  width: 18px;
  height: 18px;
  font-size: 10px;
}

.course-manager-layout {
  display: block;
}

.course-builder-nav {
  position: static;
  top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  width: min(var(--admin-workarea-max-width), calc(100vw - 120px));
  max-width: var(--admin-workarea-max-width);
  margin: 0 auto 18px;
  padding: 10px 12px;
  background: #f9fbfc;
}

.course-builder-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 38px;
  min-width: 128px;
  padding: 8px 14px;
  text-align: center;
  white-space: nowrap;
}

.course-builder-nav-button span {
  display: none;
}

.course-builder-workarea {
  width: min(var(--admin-workarea-max-width), calc(100vw - 120px));
  max-width: var(--admin-workarea-max-width);
  margin: 0 auto;
}

.course-builder-panel {
  width: 100%;
}

.lesson-editor-shell {
  position: relative;
}

body.is-lesson-editor-active .admin-content {
  width: min(var(--admin-content-max-width), calc(100vw - 32px));
  max-width: var(--admin-content-max-width);
  margin: 0 auto;
  padding: 0 16px 48px;
}

body.is-lesson-editor-active .course-builder-nav {
  width: min(var(--admin-workarea-max-width), calc(100vw - 340px));
  margin-left: auto;
  margin-right: auto;
}

body.is-lesson-editor-active .course-builder-workarea,
body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
  width: 100%;
  max-width: none;
}

body.is-lesson-editor-active .lesson-editor-shell {
  --lesson-tree-width: 214px;
  --lesson-tree-rail-width: 42px;
  --lesson-tree-gap: 18px;
  --lesson-tree-top: 114px;
  min-height: calc(100vh - var(--lesson-tree-top));
  padding-left: calc(var(--lesson-tree-width) + var(--lesson-tree-gap));
}

body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed {
  padding-left: calc(var(--lesson-tree-rail-width) + 14px);
}

body.is-lesson-editor-active .lesson-editor-tree {
  left: max(16px, calc((100vw - var(--admin-content-max-width)) / 2));
  top: var(--lesson-tree-top);
  width: var(--lesson-tree-width);
  bottom: 0;
}

body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed .lesson-editor-tree {
  width: var(--lesson-tree-rail-width);
}

body.is-lesson-editor-active .lesson-editor-workarea {
  width: min(var(--admin-workarea-max-width), calc(100vw - var(--lesson-tree-width) - 120px));
  max-width: var(--admin-workarea-max-width);
  margin: 0 auto;
  padding: 6px 0 36px;
}

body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed .lesson-editor-workarea {
  width: min(calc(var(--admin-workarea-max-width) + 120px), calc(100vw - var(--lesson-tree-rail-width) - 120px));
  max-width: calc(var(--admin-workarea-max-width) + 120px);
}

body.is-lesson-editor-active .lesson-editor-topbar,
body.is-lesson-editor-active .lesson-editor-head,
body.is-lesson-editor-active .lesson-steps-strip,
body.is-lesson-editor-active .lesson-step-editor {
  max-width: 100%;
}

@media (max-width: 1200px) {
  .course-builder-nav,
  .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-nav,
  body.is-lesson-editor-active .lesson-editor-workarea,
  body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed .lesson-editor-workarea {
    width: calc(100vw - 56px);
    max-width: none;
  }
}

@media (max-width: 1000px) {
  .admin-shell-header {
    grid-template-columns: 1fr;
  }

  .admin-shell-link {
    justify-self: start;
  }

  .admin-header-modes {
    gap: 8px;
  }

  .course-builder-nav {
    width: 100%;
    justify-content: flex-start;
  }

  .course-builder-workarea {
    width: 100%;
  }

  body.is-lesson-editor-active .lesson-editor-shell,
  body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed {
    padding-left: 0;
  }

  body.is-lesson-editor-active .lesson-editor-tree {
    left: 0;
    width: 100%;
    position: static;
    margin-bottom: 14px;
  }

  body.is-lesson-editor-active .lesson-editor-workarea,
  body.is-lesson-editor-active .course-builder-nav,
  body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed .lesson-editor-workarea {
    width: 100%;
    max-width: none;
  }
}

/* v027 compact header for course mode */
.admin-mode-panel[data-admin-mode-panel="courses"] > .admin-section-head { display: none; }


/* v028: повторная правка расположения зон по макету пользователя */
body.admin-shell-body {
  --admin-content-max-width: 1480px;
  --admin-workarea-max-width: 1040px;
  --lesson-tree-fixed-width: 246px;
  --admin-header-height-approx: 58px;
  --course-tabs-height-approx: 56px;
}

/* Синяя зона: команды всей админки прямо в шапке, а не отдельной строкой ниже */
.admin-shell-header {
  position: relative;
  display: grid !important;
  grid-template-columns: auto 300px minmax(460px, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 16px !important;
  min-height: 54px;
}

.admin-shell-title {
  min-width: 0;
}

.admin-shell-title strong {
  font-size: 16px;
}

.admin-shell-title span {
  font-size: 11px;
}

.admin-header-modes {
  grid-column: auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-width: 0;
  padding: 0 !important;
  border-top: 0 !important;
  overflow-x: auto;
  scrollbar-width: thin;
}

.admin-header-modes .admin-mode-button {
  flex: 0 0 auto;
  min-height: 30px !important;
  padding: 5px 10px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
}

.admin-header-modes .admin-mode-button span {
  width: 17px !important;
  height: 17px !important;
  font-size: 9px !important;
}

.admin-shell-link {
  align-self: center;
  white-space: nowrap;
  padding: 8px 12px !important;
}

/* Основной контейнер больше не сдвигает рабочую область вправо */
.admin-workspace {
  display: block !important;
  padding: 0 0 44px !important;
}

.admin-content {
  width: min(var(--admin-content-max-width), calc(100vw - 28px)) !important;
  max-width: var(--admin-content-max-width) !important;
  margin: 0 auto !important;
  padding: 0 14px 48px !important;
}

/* Красная зона: команды управления курсами отдельной лентой под шапкой, по центру ширины редактора */
.course-manager-layout {
  display: block !important;
}

.course-builder-nav {
  position: sticky !important;
  top: 0;
  z-index: 30;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: min(var(--admin-workarea-max-width), calc(100vw - 320px)) !important;
  max-width: var(--admin-workarea-max-width) !important;
  margin: 0 auto 18px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  background: #f8fbfc !important;
  overflow-x: auto;
}

.course-builder-nav-button {
  flex: 0 0 auto;
  min-width: 120px !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
}

.course-builder-nav-button span {
  display: none !important;
}

/* Зеленая зона: центральная лента редактора строго по центру экрана */
.course-builder-workarea {
  width: min(var(--admin-workarea-max-width), calc(100vw - 320px)) !important;
  max-width: var(--admin-workarea-max-width) !important;
  margin: 0 auto !important;
}

/* В редакторе урока дерево — отдельная фиксированная область слева, не часть ленты */
body.is-lesson-editor-active .admin-content {
  width: min(var(--admin-content-max-width), calc(100vw - 28px)) !important;
  max-width: var(--admin-content-max-width) !important;
  margin: 0 auto !important;
  padding: 0 14px 48px !important;
}

body.is-lesson-editor-active .course-builder-nav {
  width: min(var(--admin-workarea-max-width), calc(100vw - 320px)) !important;
  margin: 0 auto 18px !important;
}

body.is-lesson-editor-active .course-builder-workarea,
body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
  width: min(var(--admin-workarea-max-width), calc(100vw - 320px)) !important;
  max-width: var(--admin-workarea-max-width) !important;
  margin: 0 auto !important;
}

body.is-lesson-editor-active .lesson-editor-shell,
body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed {
  display: block !important;
  min-height: auto !important;
  padding-left: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.is-lesson-editor-active .lesson-editor-tree {
  position: fixed !important;
  left: 0 !important;
  top: 110px !important;
  bottom: 0 !important;
  width: var(--lesson-tree-fixed-width) !important;
  min-height: 0 !important;
  z-index: 20 !important;
  border-radius: 0 !important;
  border-right: 1px solid rgba(45, 59, 68, 0.22) !important;
  box-shadow: 10px 0 24px rgba(18, 29, 38, 0.08) !important;
}

body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed .lesson-editor-tree {
  width: 42px !important;
}

body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed .lesson-editor-tree:hover {
  width: var(--lesson-tree-fixed-width) !important;
}

body.is-lesson-editor-active .lesson-editor-workarea,
body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed .lesson-editor-workarea {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 36px !important;
}

body.is-lesson-editor-active .lesson-editor-topbar {
  margin-top: 0;
}

body.is-lesson-editor-active .lesson-editor-head,
body.is-lesson-editor-active .lesson-steps-strip,
body.is-lesson-editor-active .lesson-step-editor {
  width: 100% !important;
  max-width: none !important;
}

/* В режиме урока скрываем большой заголовок режима, чтобы не было лишнего пустого пространства */
.admin-mode-panel[data-admin-mode-panel="courses"] > .admin-section-head {
  display: none !important;
}

@media (max-width: 1300px) {
  .admin-shell-header {
    grid-template-columns: auto minmax(210px, 280px) minmax(340px, 1fr) auto !important;
  }

  .admin-header-modes .admin-mode-button {
    font-size: 11px !important;
    padding-inline: 8px !important;
  }

  .course-builder-nav,
  .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-nav,
  body.is-lesson-editor-active .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
    width: calc(100vw - 300px) !important;
  }
}

@media (max-width: 1050px) {
  .admin-shell-header {
    grid-template-columns: 1fr !important;
  }

  .admin-header-modes {
    grid-column: 1 / -1 !important;
    flex-wrap: wrap !important;
  }

  .course-builder-nav,
  .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-nav,
  body.is-lesson-editor-active .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
    width: calc(100vw - 36px) !important;
    max-width: none !important;
  }

  body.is-lesson-editor-active .lesson-editor-tree {
    position: static !important;
    width: 100% !important;
    max-height: 280px;
    margin-bottom: 14px;
    border-radius: 10px !important;
  }
}


/* v029: финальная раскладка шапки, дерева курса, команд и root-входа */
body.admin-shell-body {
  --admin-title-width: 320px;
  --lesson-tree-fixed-width: 320px;
  --admin-workarea-max-width: 1040px;
  --admin-content-max-width: 1500px;
}

/* В шапке больше нет логотипа компании: слева только название рабочей среды. */
.admin-brand {
  display: none !important;
}

.admin-shell-header {
  display: grid !important;
  grid-template-columns: var(--admin-title-width) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 58px !important;
  padding: 8px 14px !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.admin-shell-title {
  justify-self: start !important;
  align-self: center !important;
  min-width: 0 !important;
}

.admin-shell-title strong {
  display: block;
  font-size: 16px !important;
  line-height: 1.15;
}

.admin-shell-title span {
  display: block;
  max-width: 290px;
  margin-top: 2px;
  font-size: 11px !important;
  line-height: 1.2;
  color: #64717a;
}

.admin-header-modes {
  grid-column: auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  overflow-x: auto;
  scrollbar-width: thin;
}

.admin-header-modes .admin-mode-button {
  flex: 0 0 auto;
  min-height: 30px !important;
  padding: 5px 9px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  background: #ffffff;
}

.admin-header-modes .admin-mode-button span {
  width: 17px !important;
  height: 17px !important;
  font-size: 9px !important;
}

.admin-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.admin-shell-link {
  min-height: 30px !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.admin-shell-link-logout {
  border-color: rgba(181, 55, 55, 0.25) !important;
  color: #9f2e2e !important;
}

/* Общий контейнер не создает левый сайдбар. */
.admin-workspace {
  display: block !important;
  padding: 0 0 44px !important;
}

.admin-content {
  width: min(var(--admin-content-max-width), calc(100vw - 28px)) !important;
  max-width: var(--admin-content-max-width) !important;
  margin: 0 auto !important;
  padding: 0 14px 48px !important;
}

.admin-sidebar {
  display: none !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] > .admin-section-head {
  display: none !important;
}

/* Команды управления курсами — под шапкой, по центру ширины рабочей ленты. */
.course-manager-layout {
  display: block !important;
}

.course-builder-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: min(var(--admin-workarea-max-width), calc(100vw - var(--lesson-tree-fixed-width) - 120px)) !important;
  max-width: var(--admin-workarea-max-width) !important;
  margin: 0 auto 18px !important;
  padding: 9px 12px !important;
  border-radius: 0 0 8px 8px !important;
  background: #f8fbfc !important;
  overflow-x: auto;
}

.course-builder-nav-button {
  flex: 0 0 auto !important;
  min-width: 118px !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.course-builder-nav-button span {
  display: none !important;
}

.course-builder-workarea {
  width: min(var(--admin-workarea-max-width), calc(100vw - var(--lesson-tree-fixed-width) - 120px)) !important;
  max-width: var(--admin-workarea-max-width) !important;
  margin: 0 auto !important;
}

/* Дерево курса: под названием рабочей среды, шире примерно на 30%, статично слева. */
body.is-lesson-editor-active .lesson-editor-tree {
  position: fixed !important;
  left: 0 !important;
  top: 58px !important;
  bottom: 0 !important;
  width: var(--lesson-tree-fixed-width) !important;
  z-index: 20 !important;
  border-radius: 0 !important;
  border-right: 1px solid rgba(45, 59, 68, 0.24) !important;
  box-shadow: 12px 0 24px rgba(18, 29, 38, 0.08) !important;
}

body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed .lesson-editor-tree {
  width: 42px !important;
}

body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed .lesson-editor-tree:hover {
  width: var(--lesson-tree-fixed-width) !important;
}

body.is-lesson-editor-active .course-builder-nav,
body.is-lesson-editor-active .course-builder-workarea,
body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
  width: min(var(--admin-workarea-max-width), calc(100vw - var(--lesson-tree-fixed-width) - 120px)) !important;
  max-width: var(--admin-workarea-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.is-lesson-editor-active .lesson-editor-shell,
body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed {
  display: block !important;
  min-height: auto !important;
  padding-left: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.is-lesson-editor-active .lesson-editor-workarea,
body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed .lesson-editor-workarea {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 36px !important;
}

body.is-lesson-editor-active .lesson-editor-head,
body.is-lesson-editor-active .lesson-steps-strip,
body.is-lesson-editor-active .lesson-step-editor,
body.is-lesson-editor-active .lesson-editor-topbar {
  width: 100% !important;
  max-width: none !important;
}

/* Root login */
.admin-login-body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e9eef2 0%, #f8fafb 100%);
  color: var(--text);
}

.admin-login-shell {
  width: min(520px, calc(100vw - 32px));
}

.admin-login-card {
  padding: 34px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 26px 80px rgba(24, 39, 52, 0.16);
}

.admin-login-card h1 {
  margin: 0 0 10px;
  font-size: 34px;
}

.admin-login-note {
  margin: 0 0 22px;
  color: #5d6a73;
  line-height: 1.5;
}

.admin-login-form {
  display: grid;
  gap: 14px;
}

.admin-login-error {
  display: block;
  min-height: 20px;
  color: #b53737;
}

.admin-login-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

@media (max-width: 1320px) {
  body.admin-shell-body {
    --admin-title-width: 260px;
    --lesson-tree-fixed-width: 280px;
  }

  .admin-shell-header {
    grid-template-columns: var(--admin-title-width) minmax(0, 1fr) auto !important;
  }

  .admin-header-modes .admin-mode-button {
    font-size: 11px !important;
    padding-inline: 7px !important;
  }

  .course-builder-nav,
  .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-nav,
  body.is-lesson-editor-active .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
    width: calc(100vw - var(--lesson-tree-fixed-width) - 72px) !important;
  }
}

@media (max-width: 1060px) {
  .admin-shell-header {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .admin-header-modes {
    flex-wrap: wrap !important;
  }

  .admin-header-actions {
    justify-content: flex-start;
  }

  .course-builder-nav,
  .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-nav,
  body.is-lesson-editor-active .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
    width: calc(100vw - 32px) !important;
    max-width: none !important;
  }

  body.is-lesson-editor-active .lesson-editor-tree {
    position: static !important;
    width: 100% !important;
    max-height: 280px !important;
    margin-bottom: 14px !important;
    border-radius: 10px !important;
  }
}


/* v031: широкая лента управления курсами + левое дерево всех курсов + правое вертикальное меню */
body.admin-shell-body {
  --course-left-tree-width: 370px;
  --course-right-tools-width: 230px;
  --course-side-gap: 22px;
  --admin-header-fixed-height: 58px;
}

/* Шапка не прячется при прокрутке. */
.admin-shell-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
  background: rgba(247, 250, 252, 0.96) !important;
  backdrop-filter: blur(8px);
}

/* Левая зона дерева курсов в режиме Управление курсами. */
.course-global-tree {
  position: fixed;
  left: 0;
  top: var(--admin-header-fixed-height);
  bottom: 0;
  z-index: 40;
  width: var(--course-left-tree-width);
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(45, 59, 68, 0.22);
  background: #d7dfe4;
  box-shadow: 12px 0 30px rgba(18, 29, 38, 0.08);
  transition: width 0.18s ease;
}

.course-global-tree.is-collapsed {
  width: 42px;
}

.course-global-tree-rail {
  display: none;
  width: 42px;
  height: 100%;
  border: 0;
  border-right: 1px solid rgba(45, 59, 68, 0.18);
  background: #eef3f6;
  color: #56636d;
  font: inherit;
  font-weight: 800;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  cursor: pointer;
}

.course-global-tree.is-collapsed .course-global-tree-rail {
  display: block;
}

.course-global-tree.is-collapsed .course-global-tree-head,
.course-global-tree.is-collapsed .course-global-tree-body {
  display: none;
}

.course-global-tree-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 12px 10px;
  border-bottom: 1px solid rgba(45, 59, 68, 0.16);
}

.course-global-tree-head strong {
  display: block;
  color: #1f2b33;
  font-size: 16px;
}

.course-global-tree-head span {
  display: block;
  margin-top: 3px;
  color: #64717a;
  font-size: 11px;
  font-weight: 700;
}

.course-global-tree-toggle {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(80, 96, 108, 0.24);
  border-radius: 7px;
  background: #ffffff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.course-global-tree-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 10px 0 32px;
  scrollbar-width: thin;
}

.course-tree-node {
  min-width: 0;
}

.course-tree-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 2px 8px;
}

.course-tree-row:hover {
  background: rgba(255, 255, 255, 0.45);
}

.course-tree-toggle,
.course-tree-toggle-spacer {
  flex: 0 0 22px;
  width: 22px;
  height: 24px;
}

.course-tree-toggle {
  border: 0;
  background: transparent;
  color: #34414a;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.course-tree-open {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  color: #1f2b33;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-tree-open:hover,
.course-tree-open:focus {
  color: var(--green-dark);
  text-decoration: underline;
}

.course-tree-children {
  margin-left: 17px;
  border-left: 1px dashed rgba(80, 96, 108, 0.28);
}

.course-tree-module .course-tree-open {
  font-weight: 750;
}

.course-tree-lesson .course-tree-open {
  font-weight: 650;
}

.course-tree-step {
  color: #5f6b74;
  font-size: 12px;
}

.course-tree-empty {
  padding: 8px 14px;
  color: #6f7a83;
  font-size: 12px;
}

/* Правый вертикальный блок команд управления курсами. */
.course-builder-nav {
  position: fixed !important;
  right: 0 !important;
  top: var(--admin-header-fixed-height) !important;
  bottom: 0 !important;
  z-index: 35 !important;
  width: var(--course-right-tools-width) !important;
  max-width: var(--course-right-tools-width) !important;
  margin: 0 !important;
  padding: 12px 10px !important;
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  overflow: auto !important;
  border-radius: 0 !important;
  border-left: 1px solid rgba(45, 59, 68, 0.18) !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  background: #f4f8fa !important;
  box-shadow: -10px 0 26px rgba(18, 29, 38, 0.07) !important;
}

.course-builder-nav-button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 8px 10px !important;
  white-space: normal !important;
}

/* Центральная рабочая лента: по ширине как рабочие страницы, но с учетом двух боковых модулей. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-workarea,
body.is-lesson-editor-active .course-builder-workarea,
body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
  width: auto !important;
  max-width: none !important;
  margin-left: calc(var(--course-left-tree-width) + var(--course-side-gap)) !important;
  margin-right: calc(var(--course-right-tools-width) + var(--course-side-gap)) !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-panel {
  width: 100%;
}

/* Внутренние кнопки ленты фиксируются под шапкой при прокрутке. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-panel.is-active > .admin-mode-actions,
.lesson-editor-topbar {
  position: sticky;
  top: calc(var(--admin-header-fixed-height) + 10px);
  z-index: 32;
  padding: 10px 0;
  background: rgba(236, 243, 247, 0.94);
  backdrop-filter: blur(8px);
}

/* В редакторе урока старое дерево больше не занимает отдельный слой: используем левое глобальное дерево. */
body.is-lesson-editor-active .lesson-editor-tree {
  display: none !important;
}

body.is-lesson-editor-active .lesson-editor-shell,
body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed {
  padding-left: 0 !important;
}

body.is-lesson-editor-active .lesson-editor-workarea,
body.is-lesson-editor-active .lesson-editor-shell.is-tree-collapsed .lesson-editor-workarea {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 36px !important;
}

body.is-lesson-editor-active .lesson-editor-head,
body.is-lesson-editor-active .lesson-steps-strip,
body.is-lesson-editor-active .lesson-step-editor,
body.is-lesson-editor-active .lesson-editor-topbar {
  width: 100% !important;
  max-width: none !important;
}

/* На малых экранах боковые блоки уходят в обычный поток. */
@media (max-width: 1180px) {
  .course-global-tree,
  .course-builder-nav {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
  }

  .course-global-tree {
    max-height: 300px;
  }

  .course-global-tree.is-collapsed {
    width: 100% !important;
  }

  .course-global-tree.is-collapsed .course-global-tree-rail {
    display: none;
  }

  .course-global-tree.is-collapsed .course-global-tree-head,
  .course-global-tree.is-collapsed .course-global-tree-body {
    display: flex;
  }

  .course-global-tree.is-collapsed .course-global-tree-body {
    display: block;
  }

  .course-builder-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  .course-builder-nav-button {
    width: auto !important;
    min-width: 120px !important;
  }

  .admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* v032: расширение рабочей зоны управления курсами и увеличение шрифтов вертикальных модулей */
body.admin-shell-body {
  --course-left-tree-width: 370px;
  --course-right-tools-width: 230px;
  --course-side-gap: 18px;
  --admin-workarea-max-width: none;
}

/* Центральная рабочая зона теперь занимает всю доступную ширину между левым деревом и правым меню. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-workarea,
body.is-lesson-editor-active .course-builder-workarea,
body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
  width: calc(100vw - var(--course-left-tree-width) - var(--course-right-tools-width) - (var(--course-side-gap) * 2)) !important;
  max-width: none !important;
  margin-left: calc(var(--course-left-tree-width) + var(--course-side-gap)) !important;
  margin-right: calc(var(--course-right-tools-width) + var(--course-side-gap)) !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-panel,
.admin-mode-panel[data-admin-mode-panel="courses"] .admin-panel,
.admin-mode-panel[data-admin-mode-panel="courses"] .admin-table-wrap,
body.is-lesson-editor-active .lesson-editor-workarea,
body.is-lesson-editor-active .lesson-editor-topbar,
body.is-lesson-editor-active .lesson-editor-head,
body.is-lesson-editor-active .lesson-steps-strip,
body.is-lesson-editor-active .lesson-step-editor {
  width: 100% !important;
  max-width: none !important;
}

/* Таблица курсов должна растягиваться на всю ширину панели, а не выглядеть узким блоком по центру. */
.admin-mode-panel[data-admin-mode-panel="courses"] .admin-table {
  width: 100% !important;
}

/* Увеличенный шрифт левого вертикального дерева курсов. */
.course-global-tree-head strong {
  font-size: 18px !important;
}

.course-global-tree-head span {
  font-size: 12px !important;
}

.course-tree-row {
  min-height: 34px !important;
  padding: 3px 10px !important;
}

.course-tree-toggle,
.course-tree-toggle-spacer {
  flex-basis: 26px !important;
  width: 26px !important;
  height: 28px !important;
  font-size: 16px !important;
}

.course-tree-open {
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.course-tree-module .course-tree-open {
  font-size: 14px !important;
}

.course-tree-lesson .course-tree-open {
  font-size: 14px !important;
}

.course-tree-step {
  font-size: 13px !important;
}

.course-tree-empty {
  font-size: 13px !important;
  padding: 9px 16px !important;
}

/* Увеличенный шрифт правого вертикального блока команд. */
.course-builder-nav {
  width: var(--course-right-tools-width) !important;
  max-width: var(--course-right-tools-width) !important;
  padding: 14px 12px !important;
}

.course-builder-nav-button {
  min-height: 42px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
}

/* На средних экранах рабочая зона не должна схлопываться раньше времени. */
@media (max-width: 1320px) {
  body.admin-shell-body {
    --course-left-tree-width: 320px;
    --course-right-tools-width: 210px;
    --course-side-gap: 14px;
  }

  .admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
    width: calc(100vw - var(--course-left-tree-width) - var(--course-right-tools-width) - (var(--course-side-gap) * 2)) !important;
    margin-left: calc(var(--course-left-tree-width) + var(--course-side-gap)) !important;
    margin-right: calc(var(--course-right-tools-width) + var(--course-side-gap)) !important;
  }
}

@media (max-width: 1180px) {
  .admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* v033: центрирование рабочей области и статичная верхняя карточка открытого курса */
body.admin-shell-body {
  --course-left-tree-width: 370px;
  --course-right-tools-width: 230px;
  --course-side-gap: 18px;
  --course-center-width: calc(100vw - var(--course-left-tree-width) - var(--course-right-tools-width) - (var(--course-side-gap) * 2));
  --course-center-left: calc(var(--course-left-tree-width) + var(--course-side-gap));
}

/* Центральная область управления курсами строго занимает полосу между левым деревом и правым меню. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-workarea,
body.is-lesson-editor-active .course-builder-workarea,
body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: var(--course-center-width) !important;
  max-width: none !important;
  margin-left: var(--course-center-left) !important;
  margin-right: calc(var(--course-right-tools-width) + var(--course-side-gap)) !important;
}

/* Панели внутри рабочей области не должны дополнительно центрироваться узким блоком. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-panel,
.admin-mode-panel[data-admin-mode-panel="courses"] .admin-panel,
.admin-mode-panel[data-admin-mode-panel="courses"] .admin-table-wrap,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-manage-shell,
body.is-lesson-editor-active .lesson-editor-shell,
body.is-lesson-editor-active .lesson-editor-workarea {
  width: 100% !important;
  max-width: none !important;
}

/* Открытый курс: верхняя синяя зона сразу под шапкой и не смещается при прокрутке. */
.course-manage-shell {
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  min-height: auto !important;
}

.course-manage-sidebar {
  position: sticky !important;
  top: var(--admin-header-fixed-height, 58px) !important;
  z-index: 34 !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "logo title publish"
    "logo nav nav";
  align-items: center !important;
  gap: 8px 14px !important;
  width: 100% !important;
  min-height: 86px !important;
  margin: 0 0 12px !important;
  padding: 10px 16px !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 0 0 10px 10px !important;
  background: rgba(247, 250, 252, 0.96) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 28px rgba(18, 29, 38, 0.08) !important;
}

.course-manage-logo {
  grid-area: logo;
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
}

.course-manage-sidebar h2 {
  grid-area: title;
  margin: 0 !important;
  text-align: center;
  font-size: 18px !important;
}

.course-manage-badges {
  display: none !important;
}

.course-manage-sidebar > .button {
  grid-area: publish;
  justify-self: end;
  min-height: 34px !important;
  padding: 7px 12px !important;
}

.course-manage-nav {
  grid-area: nav;
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  align-items: center;
  justify-content: flex-start;
  margin: 0 !important;
}

.course-manage-nav button {
  min-height: 32px !important;
  border: 1px solid rgba(47, 157, 88, 0.28) !important;
  border-radius: 7px !important;
  padding: 6px 12px !important;
  background: #ffffff !important;
  text-align: center !important;
  font-size: 12px !important;
}

.course-manage-nav button.is-active {
  background: rgba(47, 157, 88, 0.08) !important;
  color: var(--green-dark) !important;
  box-shadow: inset 0 0 0 1px rgba(47, 157, 88, 0.2);
}

.course-manage-content {
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
}

.course-content-panel,
.course-description-panel {
  width: 100% !important;
  max-width: none !important;
}

/* Внутреннюю форму и список модулей держим в одной широкой рабочей полосе. */
.course-inline-form,
.course-structure,
.course-module-card {
  width: 100% !important;
  max-width: none !important;
}

/* В режиме редактора урока верхняя панель тоже статична сразу после шапки. */
.lesson-editor-topbar {
  top: var(--admin-header-fixed-height, 58px) !important;
}

/* Горизонтальная прокрутка страницы больше не должна уводить центральную карточку в сторону. */
.admin-mode-panel[data-admin-mode-panel="courses"] {
  overflow: visible;
}

@media (max-width: 1180px) {
  body.admin-shell-body {
    --course-center-width: 100%;
    --course-center-left: 0px;
  }

  .admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .course-manage-sidebar {
    position: static !important;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas:
      "logo title"
      "nav nav";
  }

  .course-manage-sidebar > .button {
    display: none !important;
  }
}


/* v034: исправление центрирования рабочей области относительно экрана, а не вложенного .admin-content */
body.admin-shell-body {
  --course-left-tree-width: 370px;
  --course-right-tools-width: 230px;
  --course-side-gap: 18px;
  --course-center-left: calc(var(--course-left-tree-width) + var(--course-side-gap));
  --course-center-right: calc(var(--course-right-tools-width) + var(--course-side-gap));
  --course-center-width: calc(100vw - var(--course-center-left) - var(--course-center-right));
}

/* В режиме управления курсами .admin-content больше не центрирует внутреннюю область повторно. */
body:has(.admin-mode-panel[data-admin-mode-panel="courses"].is-active) .admin-content {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Центральная рабочая область считается от viewport: слева дерево, справа вертикальное меню. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-workarea,
body.is-lesson-editor-active .course-builder-workarea,
body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
  width: var(--course-center-width) !important;
  max-width: none !important;
  margin-left: var(--course-center-left) !important;
  margin-right: var(--course-center-right) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Вся внутренняя лента занимает эту центральную область без дополнительного смещения. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-panel,
.admin-mode-panel[data-admin-mode-panel="courses"] .admin-panel,
.admin-mode-panel[data-admin-mode-panel="courses"] .admin-table-wrap,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-manage-shell,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-manage-content,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-content-panel,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-description-panel,
body.is-lesson-editor-active .lesson-editor-shell,
body.is-lesson-editor-active .lesson-editor-workarea,
body.is-lesson-editor-active .lesson-editor-topbar,
body.is-lesson-editor-active .lesson-editor-head,
body.is-lesson-editor-active .lesson-steps-strip,
body.is-lesson-editor-active .lesson-step-editor {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Верхний блок открытого курса закреплен в этой же центральной полосе сразу под шапкой. */
.course-manage-sidebar {
  left: auto !important;
  right: auto !important;
  width: 100% !important;
}

/* Список курсов: таблица растягивается по всей центральной зоне. */
.admin-mode-panel[data-admin-mode-panel="courses"] .admin-table {
  width: 100% !important;
  min-width: 0 !important;
}

/* Если данных много, горизонтальная прокрутка остается внутри таблицы, а не уводит всю страницу. */
.admin-mode-panel[data-admin-mode-panel="courses"] .admin-table-wrap {
  overflow-x: auto !important;
}

/* Убираем горизонтальное смещение страницы от старых правил. */
.admin-mode-panel[data-admin-mode-panel="courses"] {
  width: 100vw !important;
  max-width: none !important;
  overflow-x: hidden !important;
}

@media (max-width: 1320px) {
  body.admin-shell-body {
    --course-left-tree-width: 320px;
    --course-right-tools-width: 210px;
    --course-side-gap: 14px;
  }
}

@media (max-width: 1180px) {
  body.admin-shell-body {
    --course-center-left: 0px;
    --course-center-right: 0px;
    --course-center-width: 100vw;
  }

  body:has(.admin-mode-panel[data-admin-mode-panel="courses"].is-active) .admin-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100% !important;
  }

  .admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* v035: фиксированный подвал, боковые окна до подвала, рабочая область нормальной ширины */
body.admin-shell-body {
  --admin-footer-height: 46px;
  --course-left-tree-width: 370px;
  --course-right-tools-width: 230px;
  --course-side-gap: 18px;
  --course-center-target-width: 1120px;
  --course-center-available-width: calc(100vw - var(--course-left-tree-width) - var(--course-right-tools-width) - (var(--course-side-gap) * 2));
  --course-center-left-base: calc(var(--course-left-tree-width) + var(--course-side-gap));
  --course-center-left-offset: max(0px, calc((var(--course-center-available-width) - var(--course-center-target-width)) / 2));
}

/* Подвал закреплен внизу окна и больше не пропадает при прокрутке. */
.admin-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 130 !important;
  min-height: var(--admin-footer-height) !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.35) !important;
  background: rgba(222, 230, 235, 0.96) !important;
  backdrop-filter: blur(8px);
}

.admin-shell-body {
  padding-bottom: var(--admin-footer-height) !important;
}

/* Вертикальные окна доходят до подвала, а не уходят под него. */
.course-global-tree,
body.is-lesson-editor-active .lesson-editor-tree {
  bottom: var(--admin-footer-height) !important;
}

.course-builder-nav {
  bottom: var(--admin-footer-height) !important;
}

/* Центральная область управления курсами — ширина как у обычной рабочей страницы, без чрезмерного растягивания. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-workarea,
body.is-lesson-editor-active .course-builder-workarea,
body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
  width: min(var(--course-center-target-width), var(--course-center-available-width)) !important;
  max-width: var(--course-center-target-width) !important;
  margin-left: calc(var(--course-center-left-base) + var(--course-center-left-offset)) !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Внутренние панели остаются на всю ширину центральной рабочей ленты. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-panel,
.admin-mode-panel[data-admin-mode-panel="courses"] .admin-panel,
.admin-mode-panel[data-admin-mode-panel="courses"] .admin-table-wrap,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-manage-shell,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-manage-content,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-content-panel,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-description-panel,
body.is-lesson-editor-active .lesson-editor-shell,
body.is-lesson-editor-active .lesson-editor-workarea,
body.is-lesson-editor-active .lesson-editor-topbar,
body.is-lesson-editor-active .lesson-editor-head,
body.is-lesson-editor-active .lesson-steps-strip,
body.is-lesson-editor-active .lesson-step-editor {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Таблица курсов использует ширину центральной области, горизонтальная прокрутка только внутри таблицы. */
.admin-mode-panel[data-admin-mode-panel="courses"] .admin-table {
  width: 100% !important;
  min-width: 980px !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .admin-table-wrap {
  overflow-x: auto !important;
}

/* Чтобы последний контент не прятался за фиксированным подвалом. */
.admin-content,
.course-builder-workarea,
.lesson-editor-workarea {
  padding-bottom: calc(var(--admin-footer-height) + 24px) !important;
}

/* На средних экранах рабочая область занимает всё доступное место между боковыми окнами. */
@media (max-width: 1450px) {
  body.admin-shell-body {
    --course-center-target-width: 1040px;
  }
}

@media (max-width: 1320px) {
  body.admin-shell-body {
    --course-left-tree-width: 320px;
    --course-right-tools-width: 210px;
    --course-side-gap: 14px;
    --course-center-target-width: 980px;
  }
}

@media (max-width: 1180px) {
  body.admin-shell-body {
    --course-center-target-width: 100vw;
    --course-center-available-width: 100vw;
    --course-center-left-base: 0px;
    --course-center-left-offset: 0px;
  }

  .admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .course-global-tree,
  .course-builder-nav,
  body.is-lesson-editor-active .lesson-editor-tree {
    bottom: auto !important;
  }
}


/* v036: единый эталон ширины рабочих областей админки
   Эталон по скрину:
   - область экрана: 1935px
   - рабочая зона Статус обучающихся: 1500px
   - наружный габарит с padding 14px + 14px: 1528px
*/
body.admin-shell-body {
  --admin-reference-screen-width: 1935px;
  --admin-workspace-width: 1500px;
  --admin-workspace-padding-x: 14px;
  --admin-workspace-outer-width: 1528px;
}

/* Базовая рабочая область всех основных страниц админки. */
.admin-content {
  width: min(var(--admin-workspace-width), calc(100vw - (var(--admin-workspace-padding-x) * 2))) !important;
  max-width: var(--admin-workspace-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--admin-workspace-padding-x) !important;
  padding-right: var(--admin-workspace-padding-x) !important;
  box-sizing: content-box !important;
}

/* В режиме Управление курсами больше не считаем ширину от левого/правого служебных окон.
   Центральная лента должна быть такого же размера, как Статус обучающихся. */
body:has(.admin-mode-panel[data-admin-mode-panel="courses"].is-active) .admin-content {
  width: min(var(--admin-workspace-width), calc(100vw - (var(--admin-workspace-padding-x) * 2))) !important;
  max-width: var(--admin-workspace-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--admin-workspace-padding-x) !important;
  padding-right: var(--admin-workspace-padding-x) !important;
  box-sizing: content-box !important;
}

/* Панель режима курсов больше не растягивается на 100vw и не сдвигает рабочую ленту. */
.admin-mode-panel[data-admin-mode-panel="courses"] {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: visible !important;
}

/* Центральная рабочая лента Управления курсами = 1500px внутри .admin-content. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-workarea,
body.is-lesson-editor-active .course-builder-workarea,
body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
  width: 100% !important;
  max-width: var(--admin-workspace-width) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Внутренние панели занимают всю ширину единой рабочей ленты. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-panel,
.admin-mode-panel[data-admin-mode-panel="courses"] .admin-panel,
.admin-mode-panel[data-admin-mode-panel="courses"] .admin-table-wrap,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-manage-shell,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-manage-content,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-content-panel,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-description-panel,
body.is-lesson-editor-active .lesson-editor-shell,
body.is-lesson-editor-active .lesson-editor-workarea,
body.is-lesson-editor-active .lesson-editor-topbar,
body.is-lesson-editor-active .lesson-editor-head,
body.is-lesson-editor-active .lesson-steps-strip,
body.is-lesson-editor-active .lesson-step-editor {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Таблицы могут иметь внутреннюю горизонтальную прокрутку, но не сдвигают всю страницу. */
.admin-mode-panel[data-admin-mode-panel="courses"] .admin-table-wrap {
  overflow-x: auto !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .admin-table {
  width: 100% !important;
  min-width: 980px !important;
}

/* Служебные вертикальные окна остаются независимыми и не участвуют в расчете ширины центральной ленты. */
.course-global-tree,
.course-builder-nav {
  z-index: 40;
}

@media (max-width: 1180px) {
  .admin-content,
  body:has(.admin-mode-panel[data-admin-mode-panel="courses"].is-active) .admin-content {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  .admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
    width: 100% !important;
    max-width: none !important;
  }
}


/* v038: относительные размеры без нарушения геометрии v036.
   Важно: v037 визуально сместил центр, поэтому геометрию берем как в v036,
   но сами базовые размеры задаем пропорциями от экрана 1920px.

   Эталон:
   - экран: 1920px;
   - рабочая зона: 1500px = 78.125vw;
   - padding: 14px = 0.7291667vw;
   - наружный габарит: 1528px = 79.583333vw.
*/
body.admin-shell-body {
  --admin-reference-screen-width: 1920px;

  /* Центральная рабочая зона как относительная величина. */
  --admin-workspace-width: clamp(980px, 78.125vw, 1500px);
  --admin-workspace-padding-x: clamp(10px, 0.7291667vw, 14px);
  --admin-workspace-outer-width: calc(var(--admin-workspace-width) + (var(--admin-workspace-padding-x) * 2));

  /* Служебные панели тоже переведены в относительные пропорции,
     но имеют верхний предел как в удачной v036. */
  --course-left-tree-width: clamp(280px, 19.2708vw, 370px);
  --course-right-tools-width: clamp(190px, 11.9792vw, 230px);
  --course-side-gap: clamp(14px, 0.9375vw, 18px);
}

/* Единый центр для всех рабочих страниц админки.
   Это главный принцип: рабочая область центрируется относительно экрана,
   а левое дерево и правое меню являются служебными боковыми панелями. */
.admin-content,
body:has(.admin-mode-panel[data-admin-mode-panel="courses"].is-active) .admin-content {
  width: var(--admin-workspace-width) !important;
  max-width: var(--admin-workspace-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--admin-workspace-padding-x) !important;
  padding-right: var(--admin-workspace-padding-x) !important;
  box-sizing: content-box !important;
}

/* Управление курсами использует такую же центральную ленту, как Статус обучающихся. */
.admin-mode-panel[data-admin-mode-panel="courses"] {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: visible !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-workarea,
body.is-lesson-editor-active .course-builder-workarea,
body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
  width: 100% !important;
  max-width: var(--admin-workspace-width) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Внутренние элементы занимают всю ширину центральной ленты. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-panel,
.admin-mode-panel[data-admin-mode-panel="courses"] .admin-panel,
.admin-mode-panel[data-admin-mode-panel="courses"] .admin-table-wrap,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-manage-shell,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-manage-content,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-content-panel,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-description-panel,
body.is-lesson-editor-active .lesson-editor-shell,
body.is-lesson-editor-active .lesson-editor-workarea,
body.is-lesson-editor-active .lesson-editor-topbar,
body.is-lesson-editor-active .lesson-editor-head,
body.is-lesson-editor-active .lesson-steps-strip,
body.is-lesson-editor-active .lesson-step-editor {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Боковые панели не участвуют в расчете центра и не должны сдвигать рабочую область. */
.course-global-tree {
  width: var(--course-left-tree-width) !important;
  bottom: var(--admin-footer-height, 46px) !important;
}

.course-global-tree.is-collapsed {
  width: 42px !important;
}

.course-builder-nav {
  width: var(--course-right-tools-width) !important;
  max-width: var(--course-right-tools-width) !important;
  bottom: var(--admin-footer-height, 46px) !important;
}

/* Таблица может иметь внутреннюю прокрутку, но не должна растягивать всю страницу. */
.admin-mode-panel[data-admin-mode-panel="courses"] .admin-table-wrap {
  overflow-x: auto !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .admin-table {
  width: 100% !important;
  min-width: 980px !important;
}

/* Подвал и боковые панели сохраняются как в удачной геометрии v036. */
.admin-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 130 !important;
}

.admin-shell-body {
  padding-bottom: var(--admin-footer-height, 46px) !important;
}

/* На узких экранах боковые панели возвращаются в поток, рабочая зона занимает доступную ширину. */
@media (max-width: 1180px) {
  .admin-content,
  body:has(.admin-mode-panel[data-admin-mode-panel="courses"].is-active) .admin-content {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  .admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-workarea,
  body.is-lesson-editor-active .course-builder-panel[data-course-builder-panel="lessonEditor"] {
    width: 100% !important;
    max-width: none !important;
  }

  .course-global-tree,
  .course-builder-nav {
    width: 100% !important;
    max-width: none !important;
    bottom: auto !important;
  }
}


/* v039: доработка текстового шага — чистая вставка, очистка формата, таблицы */
.editor-table-dialog {
  min-width: 360px !important;
  min-height: 520px !important;
  resize: none !important;
  overflow: auto !important;
  position: relative !important;
}

.editor-table-resize-grip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  cursor: nwse-resize;
  z-index: 5;
}

.editor-table-resize-grip::before {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 0;
  height: 0;
  border-right: 14px solid #9aa6b2;
  border-top: 14px solid transparent;
}

body.is-resizing-table-dialog {
  cursor: nwse-resize !important;
  user-select: none;
}

.lesson-content-table {
  border-collapse: separate;
  background: #ffffff;
}

.lesson-content-table th {
  background: #eaf0f4;
  font-weight: 850;
}

.lesson-content-table tbody tr.is-striped-row td,
.lesson-content-table tbody tr.is-striped-row th {
  background: #f2f2f2;
}

.lesson-content-table tbody tr:nth-child(even) td,
.lesson-content-table tbody tr:nth-child(even) th {
  background: #f2f2f2;
}

.lesson-content-table caption {
  caption-side: top;
  padding: 6px 0;
  color: #47545d;
  font-weight: 800;
  text-align: left;
}


/* v040: исправление очистки формата и окна свойств таблицы */
.editor-table-dialog {
  width: 520px !important;
  min-width: 520px !important;
  min-height: 430px !important;
  max-width: calc(100vw - 40px) !important;
  max-height: calc(100vh - 40px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  position: relative !important;
}

.editor-table-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  background: #ffffff !important;
}

.editor-table-scroll {
  min-height: 0 !important;
  overflow: auto !important;
  padding: 14px !important;
  align-content: start !important;
}

.editor-table-grid {
  display: grid !important;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) !important;
  gap: 14px 18px !important;
  padding: 0 !important;
  align-content: start !important;
}

.editor-table-grid .field,
.editor-table-wide {
  gap: 5px !important;
  margin: 0 !important;
  align-content: start !important;
}

.editor-table-wide {
  display: grid !important;
  margin-top: 14px !important;
}

.editor-table-grid input,
.editor-table-grid select,
.editor-table-wide input {
  height: 34px !important;
  min-height: 34px !important;
}

.editor-table-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 4 !important;
  min-height: 54px !important;
  align-items: center !important;
  background: #f2f2f2 !important;
}

.editor-table-resize-grip {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 8 !important;
  width: 22px !important;
  height: 22px !important;
}

/* Выделенный текст после очистки формата остается обычным текстом без дополнительных абзацев. */
.lesson-rich-editor br {
  line-height: inherit;
}


/* v041: уплотнение окна "Свойства таблицы" */
.editor-table-dialog {
  min-width: 500px !important;
  min-height: 380px !important;
}

.editor-table-head {
  padding: 9px 12px !important;
}

.editor-table-scroll {
  padding: 10px 12px !important;
}

.editor-table-grid {
  gap: 8px 18px !important;
}

.editor-table-grid .field,
.editor-table-wide {
  gap: 3px !important;
}

.editor-table-grid input,
.editor-table-grid select,
.editor-table-wide input {
  height: 31px !important;
  min-height: 31px !important;
  padding: 4px 7px !important;
}

.editor-table-wide {
  margin-top: 8px !important;
}

.editor-table-actions {
  min-height: 48px !important;
  padding: 7px 12px !important;
}

.editor-table-actions .button {
  min-height: 34px !important;
}

/* Служебная подсказка в коде: adminTableSpacing = расстояние между соседними ячейками,
   adminTablePadding = внутренний отступ от границы ячейки до текста. */


/* v042: реальное удаление пустых промежутков в окне "Свойства таблицы".
   Причина была не в gap окна, а в общем классе .field:
   grid-template-rows: 18px 42px 16px 16px;
   Эти две дополнительные строки 16px создавали пустоты под каждым полем. */
.editor-table-scroll .field,
.editor-table-grid .field,
.editor-table-wide {
  display: grid !important;
  grid-template-rows: auto auto !important;
  grid-auto-rows: 0 !important;
  row-gap: 3px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.editor-table-scroll .field span,
.editor-table-grid .field span,
.editor-table-wide span {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.editor-table-scroll .field .field-error,
.editor-table-scroll .field .field-help,
.editor-table-grid .field .field-error,
.editor-table-grid .field .field-help,
.editor-table-wide .field-error,
.editor-table-wide .field-help {
  display: none !important;
}

.editor-table-grid {
  gap: 9px 18px !important;
  align-items: start !important;
}

.editor-table-wide {
  margin-top: 9px !important;
}

.editor-table-grid input,
.editor-table-grid select,
.editor-table-wide input {
  height: 32px !important;
  min-height: 32px !important;
  line-height: 1.2 !important;
}

.editor-table-scroll {
  padding: 10px 12px 8px !important;
}

.editor-table-dialog {
  min-height: 360px !important;
}


/* v043: сохранение урока со вложенным шагом, link dialog, активная позиция дерева, sticky toolbar */
.editor-link-modal[hidden] {
  display: none !important;
}

.editor-link-modal {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editor-link-dialog {
  position: relative;
  z-index: 1;
  width: 460px;
  min-width: 420px;
  border: 1px solid #bfc9d1;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0 24px 72px rgba(17, 24, 39, 0.25);
  overflow: hidden;
}

.editor-link-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 8px 12px;
  border-bottom: 1px solid #cfd6dc;
  color: #39424a;
}

.editor-link-head .editor-modal-close {
  position: static;
  font-size: 24px;
}

.editor-link-body {
  display: grid;
  gap: 14px;
  padding: 18px 14px 22px;
}

.editor-link-field {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 5px !important;
}

.editor-link-field input {
  height: 34px;
  border: 1px solid #bdc7cf;
  padding: 6px 8px;
}

.editor-link-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding: 8px 14px;
  border-top: 1px solid #d6d6d6;
  background: #f2f2f2;
}

.editor-link-actions .button-primary {
  min-width: 54px;
  background: #07883f;
}

.course-tree-row.is-active,
.course-tree-node.is-active > .course-tree-row,
.course-tree-step.is-active {
  background: rgba(255, 138, 0, 0.16) !important;
  box-shadow: inset 4px 0 0 #ff8a00;
}

.course-tree-row.is-active .course-tree-open,
.course-tree-step.is-active .course-tree-open {
  color: #1f2b33 !important;
  font-weight: 950 !important;
}

.course-tree-step-open {
  font-size: 12px !important;
  color: #5d6770 !important;
}

/* Правое служебное меню: удалены Новый курс и Открытый курс, оставшиеся пункты компактнее. */
.course-builder-nav .course-builder-nav-button[data-course-builder-tab="new"],
.course-builder-nav .course-builder-nav-button[data-course-builder-tab="manage"] {
  display: none !important;
}

.lesson-step-card-head-compact {
  position: sticky;
  top: calc(var(--admin-header-fixed-height, 58px) + 54px);
  z-index: 45;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
}

.lesson-text-toolbar {
  position: sticky;
  top: calc(var(--admin-header-fixed-height, 58px) + 98px);
  z-index: 44;
  background: rgba(248, 250, 252, 0.98);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(148, 163, 184, 0.35);
}

.lesson-step-card.is-dirty .lesson-step-card-head-compact {
  box-shadow: inset 4px 0 0 #ff8a00, 0 1px 0 rgba(148, 163, 184, 0.25);
}


/* v046: icon for formula button and stable custom indent behavior */
.lesson-toolbar-button img[src$="insert_formula.svg"] {
  width: 1.2em;
  height: 1.2em;
}

.lesson-rich-editor [style*="margin-left"] {
  transition: margin-left 0.08s ease;
}


/* v047: окно вставки TeX-формулы и увеличенная иконка формулы */
.lesson-toolbar-button[data-editor-command="formula"] img {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
}

.lesson-toolbar-button[data-editor-command="formula"] {
  min-width: 34px;
}

.editor-formula-modal[hidden] {
  display: none !important;
}

.editor-formula-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editor-formula-dialog {
  position: relative;
  z-index: 1;
  width: 430px;
  max-width: calc(100vw - 36px);
  border: 1px solid #bfc8cf;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 24px 72px rgba(17, 24, 39, 0.25);
  overflow: hidden;
}

.editor-formula-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 8px 12px;
  border-bottom: 1px solid #d6d6d6;
  color: #39424a;
}

.editor-formula-head .editor-modal-close {
  position: static;
  font-size: 28px;
}

.editor-formula-body {
  padding: 14px 14px 10px;
}

.editor-formula-field {
  gap: 6px !important;
}

.editor-formula-field textarea {
  width: 100%;
  min-height: 82px;
  border: 2px solid #17a3e8;
  border-radius: 0;
  padding: 8px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
  resize: vertical;
}

.editor-formula-mode-row {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin: 8px 0 2px;
  font-size: 14px;
}

.editor-formula-mode-row label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.editor-formula-doc-link {
  display: block;
  width: fit-content;
  margin: 3px 0 12px auto;
  color: #1f2933;
  font-size: 14px;
  text-decoration: underline;
}

.editor-formula-preview {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111827;
  font-family: "Times New Roman", serif;
  font-size: 20px;
}

.lesson-formula-preview-display {
  display: block;
  text-align: center;
}

.formula-preview-empty {
  color: #8a949d;
  font-family: var(--font-body, Arial, sans-serif);
  font-size: 13px;
}

.editor-formula-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding: 8px 12px;
  border-top: 1px solid #d6d6d6;
  background: #f2f2f2;
}

.editor-formula-actions .button-primary {
  background: #07883f;
}

.lesson-formula {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(47, 157, 88, 0.08);
  color: #111827;
  font-family: "Times New Roman", serif;
}

.lesson-formula-display {
  display: block;
  margin: 12px auto;
  text-align: center;
  font-size: 20px;
}

/* v048 formula rendering */
.lesson-toolbar-button[data-editor-command="formula"] img { width: 30px !important; height: 30px !important; max-width: 30px !important; max-height: 30px !important; }
.lesson-toolbar-button[data-editor-command="formula"] { min-width: 38px; }
#adminFormulaPreview { min-height: 72px; }
#adminFormulaPreview mjx-container { font-size: 122% !important; }
.lesson-formula mjx-container { display: inline-block; }
.lesson-formula-display mjx-container { display: block; margin: 0 auto; }


/* v049: собственный HTML-рендер TeX без внешней зависимости MathJax */
.lesson-formula,
.lesson-formula-rendered {
  font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
  color: #111827;
}

.lesson-formula {
  background: transparent !important;
  border: 0 !important;
  padding: 0 2px !important;
}

.lesson-formula-rendered {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  white-space: nowrap;
  font-size: 1.1em;
  line-height: 1.25;
}

.lesson-formula-display {
  display: flex !important;
  justify-content: center;
  margin: 10px auto;
  text-align: center;
  font-size: 1.16em;
}

.formula-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1.05;
  margin: 0 0.12em;
}

.formula-num {
  display: block;
  min-width: 100%;
  padding: 0 0.22em 0.08em;
  border-bottom: 1.8px solid currentColor;
  text-align: center;
}

.formula-den {
  display: block;
  min-width: 100%;
  padding: 0.08em 0.22em 0;
  text-align: center;
}

.formula-sqrt {
  display: inline-flex;
  align-items: flex-start;
  position: relative;
  padding-left: 0.68em;
  margin: 0 0.08em;
}

.formula-sqrt::before {
  content: "√";
  position: absolute;
  left: 0;
  top: 0.02em;
  font-size: 1.12em;
  line-height: 1;
}

.formula-radicand {
  display: inline-block;
  border-top: 1.7px solid currentColor;
  padding: 0.02em 0.1em 0 0.12em;
}

.lesson-formula-rendered sup {
  font-size: 0.72em;
  line-height: 0;
  vertical-align: super;
}

.lesson-formula-rendered sub {
  font-size: 0.72em;
  line-height: 0;
  vertical-align: sub;
}

#adminFormulaPreview {
  min-height: 72px;
  padding: 8px 0;
}

#adminFormulaPreview .lesson-formula-rendered {
  font-size: 1.35em;
}

#adminFormulaPreview .formula-num {
  border-bottom-width: 2px;
}


/* v050: убрать лишний верхний блок шага и прижать панель форматирования к верхней панели урока */
.lesson-step-card[data-active-step-type="text"] {
  gap: 0 !important;
}

/* В текстовом шаге строка "Шаг 1: Текст" + кнопки вверх/вниз/удалить была лишней
   и создавала пустую зону между верхней панелью урока и панелью форматирования. */
.lesson-step-card[data-active-step-type="text"] .lesson-step-card-head-compact {
  display: none !important;
}

/* Панель форматирования теперь фиксируется сразу под блоком "Вернуться к содержанию курса / Сохранить урок". */
.lesson-step-card[data-active-step-type="text"] .lesson-text-toolbar {
  position: sticky !important;
  top: calc(var(--admin-header-fixed-height, 58px) + 54px) !important;
  z-index: 46 !important;
  margin-top: 0 !important;
  border-top: 1px solid var(--line-strong) !important;
  border-radius: 8px 8px 0 0 !important;
  box-shadow: 0 1px 0 rgba(148, 163, 184, 0.35) !important;
}

/* Убираем компенсационные отступы вокруг редактора, чтобы toolbar был вплотную к рабочей области. */
.lesson-step-card[data-active-step-type="text"] .lesson-rich-editor {
  margin-top: 0 !important;
}

/* Если верхняя панель урока прилипла к шапке, она должна быть выше панели форматирования. */
body.is-lesson-editor-active .lesson-editor-topbar {
  z-index: 47 !important;
}


/* v051: возвращаем важную область заголовка шага, но она больше не закрепляется при прокрутке */
.lesson-step-card[data-active-step-type="text"] {
  gap: 12px !important;
}

/* Заголовок шага снова виден в обычном положении:
   "Шаг N: Текст" + кнопки управления шагом.
   При прокрутке он уходит вверх вместе с контентом, не зависает над toolbar. */
.lesson-step-card[data-active-step-type="text"] .lesson-step-card-head-compact {
  display: flex !important;
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Панель форматирования остается закрепленной и поднимается вплотную под верхнюю панель урока. */
.lesson-step-card[data-active-step-type="text"] .lesson-text-toolbar {
  position: sticky !important;
  top: calc(var(--admin-header-fixed-height, 58px) + 54px) !important;
  z-index: 46 !important;
  margin-top: 0 !important;
  border-top: 1px solid var(--line-strong) !important;
  border-radius: 8px 8px 0 0 !important;
  box-shadow: 0 1px 0 rgba(148, 163, 184, 0.35) !important;
}

/* Верхняя панель урока должна быть выше панели форматирования. */
body.is-lesson-editor-active .lesson-editor-topbar {
  z-index: 47 !important;
}


/* v052: шаг Видео — логика Stepik-like и правый модуль до подвала */
body.admin-shell-body {
  --admin-footer-height: 64px;
}

.course-builder-nav {
  bottom: var(--admin-footer-height) !important;
}

.admin-footer {
  position: relative;
  z-index: 50;
}

/* Видеошаг: табы источника и состояния загрузки */
.lesson-video-editor {
  display: grid;
  gap: 14px;
  max-width: 100%;
}

.lesson-video-tabs {
  display: inline-flex;
  align-items: stretch;
  width: fit-content;
  border: 1px solid #b7c3cc;
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
}

.lesson-video-tabs button {
  min-height: 36px;
  border: 0;
  border-right: 1px solid #b7c3cc;
  padding: 0 22px;
  background: #ffffff;
  color: #384853;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.lesson-video-tabs button:last-child {
  border-right: 0;
}

.lesson-video-tabs button.is-active {
  background: #edf0ff;
  color: #314d95;
}

.lesson-video-panels {
  display: grid;
  gap: 10px;
}

.lesson-video-panel[hidden] {
  display: none !important;
}

.lesson-video-panel {
  display: grid;
  gap: 8px;
  max-width: 1000px;
}

.lesson-video-url-panel {
  grid-template-columns: minmax(280px, 1fr);
}

.lesson-video-url-panel input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 9px 12px;
  font: inherit;
}

.lesson-video-url-panel small {
  color: #66757f;
  font-size: 13px;
}

.lesson-video-main-action {
  width: fit-content;
  min-width: 180px;
}

.lesson-video-selected-file {
  color: #394852;
  font-weight: 750;
}

.lesson-video-help {
  display: grid;
  gap: 8px;
  max-width: 1000px;
  color: #32424d;
}

.lesson-video-help summary {
  width: fit-content;
  cursor: pointer;
  font-weight: 850;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.lesson-video-help a {
  color: #1685ad;
}

.lesson-video-help code {
  display: block;
  padding: 16px 18px;
  overflow-x: auto;
  border-radius: 0;
  background: #f0f1f3;
  font-family: Consolas, Monaco, monospace;
  color: #1c2630;
}

.lesson-video-processing-card {
  display: grid;
  gap: 14px;
  max-width: 1000px;
  margin-top: 8px;
}

.lesson-video-processing-preview {
  display: grid;
  gap: 10px;
  align-content: center;
  width: 320px;
  min-height: 190px;
  padding: 20px;
  border: 1px solid #d8e0e5;
  border-radius: 4px;
  background: #ffffff;
  color: #4a5862;
}

.lesson-video-play-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid #d8e0e5;
  border-radius: 50%;
  color: #a9b2b9;
  font-size: 24px;
}

.lesson-video-processing-preview strong {
  overflow-wrap: anywhere;
  font-weight: 700;
}

.lesson-video-progress {
  height: 9px;
  border-radius: 999px;
  background: #e3e7ea;
  overflow: hidden;
}

.lesson-video-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: #6fc36f;
}

.lesson-video-processing-preview em {
  color: #66757f;
  font-style: normal;
}

.lesson-video-processing-note {
  margin: 0;
  color: #27323a;
  font-size: 15px;
}

.lesson-video-subtitles-field {
  max-width: 1000px;
}

.lesson-video-subtitles-field textarea {
  min-height: 145px;
  font-family: Consolas, Monaco, monospace;
  color: #495863;
}

.lesson-video-description {
  max-width: 1000px;
  min-height: 150px;
}

@media (max-width: 760px) {
  .lesson-video-tabs {
    width: 100%;
    flex-direction: column;
  }

  .lesson-video-tabs button {
    border-right: 0;
    border-bottom: 1px solid #b7c3cc;
  }

  .lesson-video-tabs button:last-child {
    border-bottom: 0;
  }

  .lesson-video-processing-preview {
    width: 100%;
  }
}


/* v053: шаг Видео — состояние загрузки и правое меню до подвала */
body.admin-shell-body {
  padding-bottom: var(--admin-footer-height, 64px) !important;
}

.site-footer.admin-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 90 !important;
  min-height: var(--admin-footer-height, 64px) !important;
}

.course-builder-nav {
  top: var(--admin-header-fixed-height, 58px) !important;
  bottom: var(--admin-footer-height, 64px) !important;
  height: calc(100dvh - var(--admin-header-fixed-height, 58px) - var(--admin-footer-height, 64px)) !important;
  min-height: calc(100dvh - var(--admin-header-fixed-height, 58px) - var(--admin-footer-height, 64px)) !important;
  max-height: calc(100dvh - var(--admin-header-fixed-height, 58px) - var(--admin-footer-height, 64px)) !important;
}

.lesson-video-editor.is-video-busy {
  gap: 16px !important;
}

.lesson-video-editor.is-video-busy .lesson-step-help,
.lesson-video-editor.is-video-busy .lesson-video-tabs,
.lesson-video-editor.is-video-busy .lesson-video-panels,
.lesson-video-editor.is-video-busy .lesson-video-help {
  display: none !important;
}

.lesson-video-upload-card {
  display: grid;
  gap: 18px;
  width: fit-content;
}

.lesson-video-upload-preview {
  display: grid;
  gap: 11px;
  align-content: center;
  width: 320px;
  min-height: 190px;
  padding: 20px;
  border: 1px solid #2f9d58;
  border-radius: 4px;
  background: #ecfaef;
  color: #31404a;
}

.lesson-video-upload-preview .lesson-video-play-icon {
  border-color: #2f9d58;
  color: #2f9d58;
}

.lesson-video-upload-preview strong {
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 750;
}

.lesson-video-upload-card .lesson-video-progress {
  width: 100%;
  height: 9px;
  border-radius: 999px;
  background: #ffffff;
  overflow: hidden;
}

.lesson-video-upload-card .lesson-video-progress span {
  display: block;
  height: 100%;
  background: #55b967;
}

.lesson-video-upload-card em {
  color: #52616b;
  font-style: normal;
}

.lesson-video-cancel-button {
  width: fit-content;
  min-width: 126px;
}

.lesson-video-processing-card {
  display: grid;
  gap: 14px;
  max-width: 1000px;
  margin-top: 0;
}

.lesson-video-processing-preview {
  width: 320px;
}

.lesson-video-processing-card .lesson-video-subtitles-field {
  margin-top: 8px;
}

.lesson-video-hidden-description {
  display: none !important;
}


/* v054: реальная локальная библиотека файлов */
.file-library-preview.is-video-preview {
  background: linear-gradient(135deg, #1f2933, #3e4c59);
  color: #ffffff;
}

.file-library-path {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #63717b;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-video-upload-card .lesson-video-progress span {
  transition: width 0.18s ease;
}


/* v055: видео после загрузки — окно просмотра */
.lesson-video-ready-card {
  display: grid;
  gap: 14px;
  width: fit-content;
}

.lesson-video-preview-player {
  position: relative;
  width: 320px;
  height: 180px;
  overflow: hidden;
  border: 1px solid #111827;
  border-radius: 4px;
  background: #1f2933;
}

.lesson-video-preview-player video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: brightness(0.78);
}

.lesson-video-big-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #5ac95f;
  font-size: 34px;
  line-height: 1;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.lesson-video-big-play.is-hidden {
  display: none;
}

.lesson-video-preview-player strong {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 2;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.45);
}

.lesson-video-ready-meta {
  margin: 0;
  color: #1f2933;
  font-size: 15px;
}

.lesson-video-ready-meta strong {
  font-weight: 900;
}

.lesson-video-ready-card .button {
  width: fit-content;
  min-width: 150px;
}


/* v056: web-окно просмотра видео и физическое удаление видео */
.admin-video-viewer-modal[hidden] {
  display: none !important;
}

.admin-video-viewer-modal {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-video-viewer-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  max-width: calc(100vw - 44px);
  max-height: calc(100vh - 44px);
  overflow: hidden;
  border: 1px solid #aeb8c2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 28px 90px rgba(17, 24, 39, 0.35);
}

.admin-video-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 9px 14px;
  border-bottom: 1px solid #d7dee4;
  background: #f8fafc;
}

.admin-video-viewer-head .editor-modal-close {
  position: static;
  font-size: 28px;
}

.admin-video-viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid #d7dee4;
  background: #ffffff;
}

.admin-video-viewer-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: #364651;
}

.admin-video-viewer-toolbar select {
  min-height: 32px;
  border: 1px solid #aeb8c2;
  border-radius: 5px;
  background: #ffffff;
  padding: 4px 8px;
  font: inherit;
}

.admin-video-viewer-toolbar small {
  color: #61707a;
  font-size: 12px;
}

.admin-video-viewer-body {
  display: grid;
  place-items: center;
  min-width: 360px;
  min-height: 220px;
  padding: 14px;
  overflow: auto;
  background: #111827;
}

.admin-video-viewer-stage {
  width: 640px;
  height: 360px;
  max-width: calc(100vw - 92px);
  max-height: calc(100vh - 180px);
  background: #000000;
}

.admin-video-viewer-stage video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000000;
  object-fit: contain;
}

.lesson-video-preview-player video {
  pointer-events: none;
}

/* v059.1: выбор существующего видео из локальной библиотеки файлов */
.video-library-modal[hidden] {
  display: none !important;
}

.video-library-modal {
  position: fixed;
  inset: 0;
  z-index: 270;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-library-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(980px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  overflow: hidden;
  border: 1px solid #aeb8c2;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 28px 90px rgba(17, 24, 39, 0.35);
}

.video-library-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  border-bottom: 1px solid #d7dee4;
  background: #f8fafc;
}

.video-library-head div {
  display: grid;
  gap: 4px;
}

.video-library-head strong {
  color: #172033;
  font-size: 20px;
}

.video-library-head span {
  color: #61707a;
  font-size: 13px;
}

.video-library-head .editor-modal-close {
  position: static;
  font-size: 28px;
}

.video-library-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid #d7dee4;
}

.video-library-toolbar .field {
  flex: 1;
  margin: 0;
}

.video-library-list {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  overflow: auto;
  background: #f8fafc;
}

.video-library-card {
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid #d7e0e8;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.video-library-preview {
  display: grid;
  place-items: center;
  width: 154px;
  height: 86px;
  overflow: hidden;
  border: 1px solid #111827;
  border-radius: 6px;
  background: #1f2933;
  color: #ffffff;
  font-weight: 900;
}

.video-library-preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #000000;
}

.video-library-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.video-library-meta strong,
.video-library-meta span,
.video-library-meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-library-meta strong {
  color: #172033;
}

.video-library-meta span,
.video-library-meta small {
  color: #64748b;
}

.video-library-actions {
  display: flex;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid #d7dee4;
  background: #ffffff;
}

@media (max-width: 760px) {
  .video-library-toolbar,
  .video-library-card {
    grid-template-columns: 1fr;
    display: grid;
  }

  .video-library-preview {
    width: 100%;
    height: 170px;
  }
}

/* v060: file library tabs, upload and integrity diagnostics */
.file-library-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 8px;
  padding: 6px;
  border: 1px solid #d7e0e8;
  border-radius: 14px;
  background: #f8fafc;
}

.file-library-tabs button {
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #475569;
  cursor: pointer;
  font-weight: 800;
  padding: 9px 14px;
}

.file-library-tabs button.is-active {
  border-color: #b7d8c2;
  background: #e9f9ef;
  color: #166534;
}

.file-library-search-field {
  min-width: min(360px, 100%);
  margin: 0;
}

.file-library-check-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  font-size: 0.92rem;
  font-weight: 700;
}

.file-library-upload-actions {
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.file-library-upload-actions input[type="file"] {
  max-width: min(420px, 100%);
}

.file-library-card.is-bad {
  border-color: #fecaca;
  background: #fff7f7;
}

.file-library-card.is-warning {
  border-color: #fde68a;
  background: #fffbeb;
}

.file-integrity {
  display: block;
  border-radius: 8px;
  padding: 6px 8px;
  white-space: normal !important;
}

.file-integrity.is-ok {
  background: #eefdf3;
  color: #166534;
}

.file-integrity.is-warning {
  background: #fef3c7;
  color: #92400e;
}

.file-integrity.is-bad {
  background: #fee2e2;
  color: #991b1b;
}

.file-library-card button[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}


.file-library-actions,
.file-library-upload-actions {
  align-items: center;
}

.admin-inline-note {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.file-library-selection-summary {
  min-width: 130px;
  font-weight: 700;
}

.file-library-upload-note {
  flex: 0 1 520px;
}

.app-confirm-checkbox[hidden] {
  display: none !important;
}

/* v061: library cleanup controls and editor object deletion focus */
.file-library-panel {
  padding-left: 24px;
  padding-right: 24px;
}

.file-library-selection-summary {
  min-width: 130px;
  font-weight: 700;
}

.file-library-select {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #475569;
  font-size: 0.9rem;
  font-weight: 800;
  user-select: none;
}

.file-library-select input {
  width: 16px;
  height: 16px;
}

.file-library-card:has([data-file-select]:checked) {
  border-color: #2f9e63;
  box-shadow: 0 0 0 2px rgba(47, 158, 99, 0.16), 0 8px 20px rgba(15, 23, 42, 0.06);
}

.app-confirm-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 4px;
  color: #475569;
  font-weight: 700;
  line-height: 1.35;
}

.app-confirm-checkbox input {
  margin-top: 3px;
}

.lesson-rich-editor .lesson-content-table.is-selected {
  outline: 2px solid #1e90ff;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(30, 144, 255, 0.12);
}

.lesson-rich-editor .lesson-content-table.is-selected::after {
  content: "Delete — удалить таблицу";
  display: table-caption;
  caption-side: bottom;
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 800;
  padding-top: 4px;
}

.button-danger {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
  font-weight: 800;
}

.button-danger:disabled {
  background: #f1f5f9;
  border-color: #d7e0e8;
  color: #94a3b8;
  cursor: not-allowed;
  transform: none;
}

/* v063: image picker from file library and direct course delete button */
.course-delete-button {
  width: 100%;
  margin-top: 8px;
  background: #fee2e2;
  border-color: #ef4444;
  color: #991b1b;
  font-weight: 800;
}

.course-delete-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.editor-image-library-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.editor-image-library-search-field {
  flex: 1 1 320px;
  max-width: 520px;
  margin: 0;
}

.editor-image-library-list {
  flex: 1;
  min-height: 360px;
  max-height: 420px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  padding: 2px 4px 8px 2px;
}

.editor-image-library-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px;
  border: 1px solid #d7e0e8;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
}

.editor-image-library-card.is-ok:has([data-image-library-select]:checked) {
  border-color: #2f9e63;
  box-shadow: 0 0 0 2px rgba(47, 158, 99, 0.16), 0 8px 20px rgba(15, 23, 42, 0.06);
}

.editor-image-library-card.is-disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.editor-image-library-card .file-library-preview {
  min-height: 112px;
}

.editor-image-library-card .file-library-preview img {
  height: 112px;
}

.editor-image-library-card .file-integrity {
  font-size: 0.78rem;
}

.editor-image-library-actions {
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.editor-image-library-action-buttons {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* v064: test library MVP */
.test-library-panel {
  padding-left: 24px;
  padding-right: 24px;
  min-height: 520px;
}

.test-library-actions {
  align-items: center;
  flex-wrap: wrap;
}

.test-create-form {
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid #d7e0e8;
  border-radius: 14px;
  background: #f8fafc;
}

.test-create-form[hidden] {
  display: none !important;
}

.test-library-list {
  display: grid;
  gap: 12px;
}

.test-library-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid #d7e0e8;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.test-library-card-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.test-library-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: #e8f6ef;
  color: #0f7a45;
  font-weight: 900;
  border: 1px solid #bee6cf;
}

.test-library-card h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: #172033;
}

.test-library-card p {
  margin: 0 0 10px;
  color: #475569;
  line-height: 1.45;
}

.test-library-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.test-library-meta span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef2f6;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 700;
}

.test-library-card-actions {
  flex: 0 0 auto;
}

@media (max-width: 920px) {
  .test-library-card {
    align-items: stretch;
    flex-direction: column;
  }

  .test-library-card-actions {
    width: 100%;
  }

  .test-library-card-actions .button {
    width: 100%;
  }
}

/* v065: test library actions and question editor */
.test-library-card.is-deleted {
  opacity: 0.68;
  background: #fff7f7;
}

.admin-test-actions-menu .admin-action-dropdown {
  min-width: 190px;
}

.admin-action-button[data-test-action="delete"] {
  color: var(--danger);
}

.test-editor-panel {
  display: grid;
  gap: 16px;
  margin-top: 8px;
}

.test-editor-panel[hidden] {
  display: none !important;
}

.test-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid #d7e0e8;
  border-radius: 14px;
  background: #ffffff;
}

.test-editor-head h3 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  color: #172033;
}

.test-editor-head p {
  margin: 0;
  color: #64748b;
  line-height: 1.45;
}

.test-editor-form {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid #d7e0e8;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.test-editor-main-fields {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.25fr);
  gap: 16px;
}

.test-editor-questions {
  display: grid;
  gap: 16px;
}

.test-question-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #d7e0e8;
  border-radius: 12px;
  background: #fbfdff;
}

.test-question-head,
.test-editor-bottom-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.test-question-head {
  justify-content: space-between;
}

.test-question-head h4 {
  margin: 0;
  font-size: 1rem;
  color: #172033;
}

.test-delete-link,
.test-add-answer {
  border: 0;
  background: transparent;
  color: var(--danger);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.test-add-answer {
  justify-self: flex-start;
  color: #1f5f99;
  text-decoration: underline;
}

.test-question-settings {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(180px, 240px);
  gap: 12px;
}

.test-question-editor-shell {
  border: 1px solid #ccd6df;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.test-question-toolbar {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid #d7e0e8;
  background: #f3f6f9;
  color: #64748b;
  font-size: 0.88rem;
}

.test-question-toolbar button {
  min-width: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #172033;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.test-question-toolbar button:hover,
.test-question-toolbar button:focus {
  background: #e4edf4;
}

.test-question-text {
  min-height: 110px;
  padding: 14px;
  outline: none;
  line-height: 1.5;
}

.test-question-text:empty::before {
  content: attr(data-placeholder);
  color: #9aa8b5;
}

.test-question-rules {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(220px, 1fr);
  gap: 16px;
}

.test-question-rules fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.test-question-rules legend,
.test-answers-block > strong {
  margin-bottom: 4px;
  color: #172033;
  font-weight: 900;
}

.test-question-rules label,
.test-answer-correct {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #475569;
}

.test-answers-block {
  display: grid;
  gap: 10px;
}

.test-answers-list {
  display: grid;
  gap: 10px;
}

.test-answer-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
}

.test-answer-text {
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0 10px;
  font: inherit;
}

.test-answer-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.test-arrow-button {
  width: 28px;
  height: 28px;
  border: 1px solid #cbd5df;
  border-radius: 5px;
  background: #f8fafc;
  cursor: pointer;
}

.test-answer-correct {
  grid-column: 1 / -1;
  font-size: 0.92rem;
}

.test-editor-spacer {
  flex: 1 1 auto;
}

@media (max-width: 920px) {
  .test-editor-head,
  .test-editor-bottom-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .test-editor-main-fields,
  .test-question-settings,
  .test-question-rules,
  .test-answer-row {
    grid-template-columns: 1fr;
  }
}

/* v068: чистый режим редактирования теста без боковых панелей и элементов библиотеки */
#adminTestLibraryIntro[hidden],
#adminTestLibraryActions[hidden],
#adminCreateTestForm[hidden],
#adminTestsList[hidden] {
  display: none !important;
}

body.is-test-editor-active .course-global-tree,
body.is-test-editor-active .course-builder-nav {
  display: none !important;
}

body.is-test-editor-active .admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-workarea {
  width: min(1480px, calc(100vw - 44px)) !important;
  max-width: 1480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.is-test-editor-active .test-library-panel {
  min-height: calc(100vh - var(--admin-header-fixed-height) - 92px);
}

body.is-test-editor-active .test-editor-panel {
  margin-top: 0;
}

/* v069: shared rich text editor inside test questions */
.test-question-rich-editor-shell {
  overflow: visible;
}

.test-question-rich-editor-shell .lesson-text-toolbar {
  border: 0;
  border-bottom: 1px solid #d7e0e8;
  border-radius: 8px 8px 0 0;
  box-shadow: none;
  margin: 0;
}

.test-question-rich-editor {
  min-height: 170px;
  border: 0;
  border-radius: 0 0 8px 8px;
  box-shadow: none;
  background: #ffffff;
}

.test-question-rich-editor:empty::before {
  content: attr(data-placeholder);
  color: #9aa8b5;
}

.test-editor-leave-dialog .app-dialog-actions {
  flex-wrap: wrap;
}

.test-editor-leave-actions .button-primary {
  min-width: 210px;
}

/* v070/v071: редактор вопроса теста — прокрутка только в области текста, без наложения на панель */
.test-question-rich-editor-shell {
  max-height: none;
  overflow: hidden !important;
  position: relative;
  overscroll-behavior: contain;
}

.test-question-rich-editor-shell .lesson-text-toolbar {
  position: relative !important;
  top: auto !important;
  z-index: 25 !important;
  background: #f4f6f7 !important;
  border-bottom: 1px solid #d7e0e8 !important;
  box-shadow: 0 1px 0 rgba(148, 163, 184, 0.28) !important;
}

.test-question-rich-editor {
  min-height: 300px;
  max-height: 430px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
  padding-bottom: 28px;
}

.test-question-rich-editor .lesson-image-figure,
.test-question-rich-editor .lesson-resizable-image {
  max-width: 100%;
}

/* v074: temporary rich-text formatting diagnostics */
.rich-format-debug-panel {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 5000;
  width: min(720px, calc(100vw - 36px));
  max-height: min(520px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto minmax(180px, 1fr);
  border: 1px solid rgba(30, 64, 175, 0.28);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.26);
  overflow: hidden;
}

.rich-format-debug-panel.is-hidden {
  display: none;
}

.rich-format-debug-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #dbe3ea;
  background: #eef4ff;
  color: #172033;
}

.rich-format-debug-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rich-format-debug-actions button {
  min-height: 30px;
  border: 1px solid #b9c5d2;
  border-radius: 7px;
  padding: 0 10px;
  background: #ffffff;
  color: #172033;
  cursor: pointer;
  font-weight: 700;
}

.rich-format-debug-panel textarea {
  width: 100%;
  min-height: 260px;
  border: 0;
  resize: vertical;
  padding: 12px;
  background: #0f172a;
  color: #e2e8f0;
  font: 12px/1.45 Consolas, "Courier New", monospace;
  white-space: pre;
}

/* v081: шаг Тест — новый интерфейс выбора теста из библиотеки + случайная выборка вопросов */
body.admin-shell-body {
  overflow: hidden !important;
}

.admin-workspace {
  height: calc(100dvh - var(--admin-header-fixed-height, 58px) - var(--admin-footer-height, 64px)) !important;
  min-height: calc(100dvh - var(--admin-header-fixed-height, 58px) - var(--admin-footer-height, 64px)) !important;
  max-height: calc(100dvh - var(--admin-header-fixed-height, 58px) - var(--admin-footer-height, 64px)) !important;
  overflow: hidden !important;
}

.admin-content {
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}

.lesson-test-step-editor {
  display: grid;
  gap: 18px;
}

.lesson-test-step-section {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #d9e2ea;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(148, 163, 184, 0.12);
}

.lesson-test-step-section-head {
  display: grid;
  gap: 4px;
}

.lesson-test-step-section-head h3 {
  margin: 0;
  font-size: 1.06rem;
  color: #172033;
}

.lesson-test-step-section-head p {
  margin: 0;
  color: #607284;
  font-size: 0.94rem;
}

.lesson-test-step-rich-editor {
  min-height: 260px;
}

.lesson-test-config-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
  gap: 14px 18px;
  align-items: start;
}

.lesson-test-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.lesson-test-picker-row select,
.lesson-test-count-field input {
  min-height: 44px;
  border: 1px solid #c7d2dc;
  border-radius: 10px;
  padding: 0 12px;
  font: inherit;
  color: #172033;
  background: #ffffff;
}

.lesson-test-library-summary {
  min-height: 78px;
}

.lesson-test-summary-card {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #d8e2eb;
  border-radius: 12px;
  background: #f8fbfd;
}

.lesson-test-summary-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.lesson-test-summary-title-row strong {
  font-size: 1rem;
  color: #162132;
}

.lesson-test-summary-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eaf2f8;
  color: #35516b;
  font-size: 0.84rem;
  font-weight: 700;
}

.lesson-test-summary-card p,
.lesson-test-summary-card small {
  margin: 0;
  color: #5f7184;
}

.lesson-test-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.lesson-test-summary-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #d7e0e8;
  color: #2c4055;
  font-size: 0.88rem;
}

@media (max-width: 980px) {
  .lesson-test-config-grid,
  .lesson-test-picker-row {
    grid-template-columns: 1fr;
  }
}


/* v082: убрать зазор между фиксированной шапкой и верхней панелью редактора урока */
body.is-lesson-editor-active .lesson-editor-topbar {
  top: var(--admin-header-fixed-height, 58px) !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  padding-top: 0 !important;
  padding-bottom: 8px !important;
  border-radius: 0 !important;
}

body.is-lesson-editor-active .lesson-editor-workarea {
  padding-top: 0 !important;
}

body.is-lesson-editor-active .lesson-editor-head {
  margin-top: 0 !important;
}


/* v083: убрать реальный верхний зазор у lesson editor — проблема была в padding-top у .admin-content */
body.is-lesson-editor-active .admin-content,
body:has(.admin-mode-panel[data-admin-mode-panel="courses"].is-active .course-builder-panel[data-course-builder-panel="lessonEditor"].is-active) .admin-content {
  padding-top: 0 !important;
}

body.is-lesson-editor-active .course-builder-workarea,
body.is-lesson-editor-active .lesson-editor-shell,
body.is-lesson-editor-active .lesson-editor-workarea {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.is-lesson-editor-active .lesson-editor-topbar {
  top: var(--admin-header-fixed-height, 58px) !important;
  margin-top: 0 !important;
}


/* v084: убираем фактическую щель под шапкой — её создавал inherited padding-top у .admin-workspace */
.admin-workspace {
  padding-top: 0 !important;
}

body:has(.admin-mode-panel[data-admin-mode-panel="courses"].is-active) .admin-workspace,
body.is-lesson-editor-active .admin-workspace {
  padding-top: 0 !important;
}

body:has(.admin-mode-panel[data-admin-mode-panel="courses"].is-active) .admin-content,
body:has(.admin-mode-panel[data-admin-mode-panel="courses"].is-active) .admin-mode-panel[data-admin-mode-panel="courses"],
body:has(.admin-mode-panel[data-admin-mode-panel="courses"].is-active) .course-builder-workarea,
body.is-lesson-editor-active .admin-content,
body.is-lesson-editor-active .course-builder-workarea,
body.is-lesson-editor-active .lesson-editor-shell,
body.is-lesson-editor-active .lesson-editor-workarea {
  margin-top: 0 !important;
}


/* v085: фактическая причина щели — sticky-элементы находятся ВНУТРИ .admin-content,
   который уже начинается под шапкой. Поэтому top: 58px/68px добавлял пустую полосу.
   Координата sticky должна быть 0 относительно собственного scroll-контейнера. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-panel.is-active > .admin-mode-actions,
body.is-lesson-editor-active .lesson-editor-topbar,
.course-manage-sidebar {
  top: 0 !important;
}

/* Верхние действия не должны добавлять еще одну искусственную полосу. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-builder-panel.is-active > .admin-mode-actions,
body.is-lesson-editor-active .lesson-editor-topbar {
  margin-top: 0 !important;
}

/* v086: корректная цепочка sticky-элементов внутри scroll-контейнера редактора урока.
   После v085 верхняя панель стала top: 0, но toolbar и заголовок шага всё еще
   использовали старые координаты относительно шапки страницы (58px + ...),
   из-за чего между ними оставалась полоса содержимого. */
body.is-lesson-editor-active {
  --lesson-editor-topbar-sticky-height: 54px;
  --lesson-step-head-sticky-height: 42px;
}

/* Заголовок шага в нетекстовых шагах располагается непосредственно под верхней панелью урока. */
body.is-lesson-editor-active .lesson-step-card-head-compact {
  top: var(--lesson-editor-topbar-sticky-height) !important;
}

/* Обычный rich-text toolbar в шагах, где заголовок шага остается sticky. */
body.is-lesson-editor-active .lesson-text-toolbar {
  top: calc(var(--lesson-editor-topbar-sticky-height) + var(--lesson-step-head-sticky-height)) !important;
}

/* В текстовом шаге заголовок шага не sticky, поэтому toolbar должен стоять сразу под верхней панелью. */
body.is-lesson-editor-active .lesson-step-card[data-active-step-type="text"] .lesson-text-toolbar {
  top: var(--lesson-editor-topbar-sticky-height) !important;
}

/* В шаге Тест rich-text вводный блок идет после sticky-заголовка шага. */
body.is-lesson-editor-active .lesson-step-card[data-active-step-type="test"] .lesson-text-toolbar {
  top: calc(var(--lesson-editor-topbar-sticky-height) + var(--lesson-step-head-sticky-height)) !important;
}

/* v087: шаг Тест — заголовок шага и toolbar прокручиваются вместе с содержимым;
   скролл большого вводного текста остается внутри самого текстового блока. */
body.is-lesson-editor-active .lesson-step-card-head-compact {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* В шаге Тест панель форматирования не закрепляется к верхней границе страницы.
   При прокрутке содержимого шага она уходит вверх вместе с заголовком «Шаг N: Тест». */
body.is-lesson-editor-active .lesson-step-card[data-active-step-type="test"] .lesson-text-toolbar {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  margin-top: 0 !important;
  box-shadow: none !important;
}

/* Вводный текст теста прокручивается только внутри собственного поля.
   Панель инструментов остается над этим полем и не попадает в его scrollbar. */
body.is-lesson-editor-active .lesson-step-card[data-active-step-type="test"] .lesson-test-step-rich-editor {
  min-height: 300px !important;
  max-height: 430px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

/* v088: модальное окно выбора теста из библиотеки для шага Тест */
.lesson-test-library-modal[hidden] {
  display: none !important;
}

.lesson-test-library-modal {
  position: fixed;
  inset: 0;
  z-index: 280;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lesson-test-library-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(1040px, calc(100vw - 44px));
  max-height: calc(100dvh - 44px);
  min-height: min(620px, calc(100dvh - 44px));
  overflow: hidden;
  border: 1px solid #aeb8c2;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 28px 90px rgba(17, 24, 39, 0.35);
}

.lesson-test-library-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  border-bottom: 1px solid #d7dee4;
  background: #f8fafc;
}

.lesson-test-library-head > div {
  display: grid;
  gap: 4px;
}

.lesson-test-library-head strong {
  color: #172033;
  font-size: 20px;
}

.lesson-test-library-head span {
  color: #61707a;
  font-size: 13px;
}

.lesson-test-library-head .editor-modal-close {
  position: static;
  font-size: 28px;
}

.lesson-test-library-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid #d7dee4;
  background: #ffffff;
}

.lesson-test-library-toolbar .field {
  flex: 1;
  margin: 0;
}

.lesson-test-library-picker-list {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px 18px;
  overflow: auto;
  background: #f8fafc;
}

.lesson-test-library-picker-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid #d7e0e8;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.lesson-test-library-picker-card:hover {
  border-color: #9eb8cd;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.09);
}

.lesson-test-library-picker-card.is-selected {
  border-color: #2f9d58;
  background: #f2fbf5;
  box-shadow: 0 0 0 2px rgba(47, 157, 88, 0.12), 0 10px 24px rgba(15, 23, 42, 0.08);
}

.lesson-test-library-picker-card input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: #2f9d58;
}

.lesson-test-library-picker-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.lesson-test-library-picker-main strong {
  color: #172033;
  font-size: 1rem;
}

.lesson-test-library-picker-main em {
  overflow: hidden;
  color: #607284;
  font-size: 0.92rem;
  font-style: normal;
  line-height: 1.42;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-test-library-picker-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.lesson-test-library-picker-meta small {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid #d7e0e8;
  border-radius: 999px;
  background: #ffffff;
  color: #4c6176;
  font-size: 0.8rem;
  font-weight: 700;
}

.lesson-test-library-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid #d7dee4;
  background: #ffffff;
}

.lesson-test-selected-value {
  display: flex;
  align-items: center;
  min-height: 44px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid #c7d2dc;
  border-radius: 10px;
  background: #f8fbfd;
  color: #172033;
  font-weight: 700;
}

.lesson-test-selected-value.is-empty {
  color: #6f8192;
  font-weight: 500;
}

.lesson-test-picker-row-modal {
  grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 760px) {
  .lesson-test-library-dialog {
    width: min(100vw - 20px, 1040px);
    min-height: min(560px, calc(100dvh - 20px));
    max-height: calc(100dvh - 20px);
  }

  .lesson-test-library-toolbar,
  .lesson-test-library-actions,
  .lesson-test-picker-row-modal {
    flex-direction: column;
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .lesson-test-library-toolbar .button,
  .lesson-test-library-actions .button,
  .lesson-test-picker-row-modal .button {
    width: 100%;
  }
}

/* v089: точная настройка количества вопросов и общей суммы баллов в шаге Тест */
.lesson-test-config-grid-three {
  grid-template-columns: minmax(360px, 1.5fr) minmax(190px, 0.7fr) minmax(220px, 0.85fr);
}

.lesson-test-points-target-field input {
  min-height: 44px;
  border: 1px solid #c7d2dc;
  border-radius: 10px;
  padding: 0 12px;
  font: inherit;
  color: #172033;
  background: #ffffff;
}

.lesson-test-selection-status {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid #d7e0e8;
  border-radius: 10px;
  color: #40566b;
  background: #ffffff;
  font-size: 0.9rem;
}

.lesson-test-selection-status strong {
  color: #172033;
}

.lesson-test-selection-status small {
  color: #61758a;
}

.lesson-test-selection-status.is-checking {
  border-color: #b8cde1;
  background: #f4f9fd;
}

.lesson-test-selection-status.is-valid {
  border-color: rgba(47, 157, 88, 0.42);
  background: #f1fbf4;
}

.lesson-test-selection-status.is-valid strong {
  color: #176b3c;
}

.lesson-test-selection-status.is-invalid {
  border-color: rgba(190, 74, 74, 0.45);
  background: #fff6f5;
}

.lesson-test-selection-status.is-invalid strong {
  color: #9e3030;
}

@media (max-width: 1180px) {
  .lesson-test-config-grid-three {
    grid-template-columns: 1fr 1fr;
  }

  .lesson-test-picker-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .lesson-test-config-grid-three {
    grid-template-columns: 1fr;
  }

  .lesson-test-picker-field {
    grid-column: auto;
  }
}

/* v090: компактное описание теста и сворачиваемые карточки вопросов */
.test-editor-main-fields {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr) !important;
  align-items: start;
}

.test-editor-main-fields > .field,
.test-description-field {
  min-width: 0;
  max-width: 100%;
}

.test-description-field textarea,
#adminTestDescription,
#adminTestEditorDescription {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 96px;
  max-height: 128px;
  box-sizing: border-box !important;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  line-height: 1.45;
}

.test-question-card {
  gap: 12px;
  padding: 12px 14px;
}

.test-question-head {
  min-height: 32px;
}

.test-question-head-main {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.test-question-collapse-toggle {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  padding: 0;
  border: 1px solid #cbd7e1;
  border-radius: 6px;
  background: #ffffff;
  color: #31465a;
  font: inherit;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.test-question-collapse-toggle:hover,
.test-question-collapse-toggle:focus-visible {
  border-color: #7da6c8;
  background: #edf6fc;
  outline: none;
}

.test-question-summary {
  display: none;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.test-question-summary-cell {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #d3dee7;
  border-radius: 999px;
  background: #f7fafc;
  color: #465a6d;
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
}

.test-question-body {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.test-question-settings {
  min-height: 0 !important;
  align-items: end;
  gap: 10px;
  padding: 0;
}

.test-question-settings .field {
  min-width: 0;
  margin: 0;
}

.test-question-settings .field > span {
  margin-bottom: 4px;
}

.test-question-settings input {
  min-height: 36px;
  box-sizing: border-box;
}

.test-question-card.is-collapsed {
  gap: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #f8fbfd;
}

.test-question-card.is-collapsed .test-question-body {
  display: none;
}

.test-question-card.is-collapsed .test-question-summary {
  display: inline-flex;
}

.test-question-card.is-collapsed .test-question-head {
  min-height: 34px;
}

@media (max-width: 760px) {
  .test-editor-main-fields,
  .test-question-settings {
    grid-template-columns: 1fr !important;
  }

  .test-question-head {
    align-items: flex-start;
  }

  .test-question-head-main {
    flex-wrap: wrap;
  }
}

/* v091: компактная подсказка описания и сводка теста в заголовке редактора */
.test-description-field {
  grid-template-rows: 18px minmax(96px, 128px) 16px !important;
  gap: 6px !important;
}

.test-description-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.test-description-label-row > span {
  flex: 0 0 auto;
}

.test-description-inline-hint {
  min-width: 0;
  overflow: hidden;
  color: #7b8794;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test-description-field textarea,
#adminTestDescription,
#adminTestEditorDescription {
  height: 100% !important;
  min-height: 96px !important;
  max-height: 128px !important;
  margin: 0 !important;
}

.test-editor-heading-block {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.test-editor-title-line {
  display: flex;
  align-items: center;
  gap: 10px 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.test-editor-title-line h3,
.test-editor-head .test-editor-title-line h3 {
  margin: 0;
}

.test-editor-header-summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.test-editor-summary-cell {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #d3dee7;
  border-radius: 999px;
  background: #f7fafc;
  color: #465a6d;
  font-size: 0.84rem;
  font-weight: 800;
  white-space: nowrap;
}

.test-editor-heading-block > p {
  margin: 0;
}

@media (max-width: 760px) {
  .test-description-label-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .test-description-inline-hint {
    white-space: normal;
    text-align: left;
  }

  .test-description-field {
    grid-template-rows: 36px minmax(96px, 128px) 16px !important;
  }
}

/* v092: компактная подсказка ограничения названия теста в строке заголовка поля */
.test-title-field {
  grid-template-rows: 18px 42px 16px !important;
  gap: 6px !important;
}

.test-title-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.test-title-label-row > span {
  flex: 0 0 auto;
}

.test-title-inline-hint {
  min-width: 0;
  overflow: hidden;
  color: #7b8794;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .test-title-label-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .test-title-field {
    grid-template-rows: auto 42px 16px !important;
  }

  .test-title-inline-hint {
    text-align: left;
    white-space: normal;
  }
}

/* v095: практическое задание — rich text + шаблонная 3D-модель / файл для скачивания */
.lesson-practical-step-editor {
  display: grid;
  gap: 18px;
}

.lesson-practical-section {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #d9e2ea;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(148, 163, 184, 0.12);
}

.lesson-practical-section-head {
  display: grid;
  gap: 4px;
}

.lesson-practical-section-head h3 {
  margin: 0;
  color: #172033;
  font-size: 1.06rem;
}

.lesson-practical-section-head p {
  margin: 0;
  color: #607284;
  font-size: 0.94rem;
}

.lesson-practical-rich-editor {
  min-height: 280px;
}

.lesson-practical-file-slot {
  min-height: 88px;
}

.lesson-practical-file-empty {
  display: grid;
  gap: 5px;
  align-content: center;
  min-height: 94px;
  padding: 14px 16px;
  border: 1px dashed #bac9d5;
  border-radius: 12px;
  background: #f8fbfd;
  color: #617286;
}

.lesson-practical-file-empty strong {
  color: #2c4055;
}

.lesson-practical-file-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  min-height: 94px;
  padding: 14px 16px;
  border: 1px solid #c9dbe6;
  border-radius: 12px;
  background: #f4f9fc;
}

.lesson-practical-file-icon,
.lesson-practical-library-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid #a8c3d4;
  border-radius: 10px;
  background: #e9f4fb;
  color: #28536e;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.lesson-practical-file-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.lesson-practical-file-meta strong {
  overflow: hidden;
  color: #172033;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-practical-file-meta span,
.lesson-practical-file-meta small {
  color: #5e7183;
}

.lesson-practical-file-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.lesson-practical-file-actions span {
  flex: 1 1 320px;
  color: #6a7a89;
  font-size: 0.88rem;
  line-height: 1.42;
}

.lesson-practical-file-library-modal[hidden] {
  display: none !important;
}

.lesson-practical-file-library-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
}

.lesson-practical-file-library-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto minmax(220px, 1fr) auto;
  width: min(940px, calc(100vw - 40px));
  max-height: min(760px, calc(100dvh - 40px));
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid #cbd7e1;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.32);
}

.lesson-practical-file-library-head,
.lesson-practical-file-library-toolbar,
.lesson-practical-file-library-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}

.lesson-practical-file-library-head {
  justify-content: space-between;
  border-bottom: 1px solid #d7dee4;
  background: #f8fafc;
}

.lesson-practical-file-library-head > div {
  display: grid;
  gap: 4px;
}

.lesson-practical-file-library-head strong {
  color: #172033;
  font-size: 20px;
}

.lesson-practical-file-library-head span {
  color: #61707a;
  font-size: 13px;
}

.lesson-practical-file-library-head .editor-modal-close {
  position: static;
  font-size: 28px;
}

.lesson-practical-file-library-toolbar {
  align-items: flex-end;
  border-bottom: 1px solid #d7dee4;
  background: #ffffff;
}

.lesson-practical-file-library-toolbar .field {
  flex: 1;
  margin: 0;
}

.lesson-practical-file-library-list {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px 18px;
  overflow: auto;
  background: #f8fafc;
}

.lesson-practical-library-card {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid #d7e0e8;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  cursor: pointer;
}

.lesson-practical-library-card:hover {
  border-color: #9eb8cd;
}

.lesson-practical-library-card.is-selected {
  border-color: #2f9d58;
  background: #f2fbf5;
  box-shadow: 0 0 0 2px rgba(47, 157, 88, 0.12), 0 10px 24px rgba(15, 23, 42, 0.08);
}

.lesson-practical-library-card input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #2f9d58;
}

.lesson-practical-library-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.lesson-practical-library-main strong {
  overflow: hidden;
  color: #172033;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-practical-library-main em,
.lesson-practical-library-main small {
  overflow: hidden;
  color: #607284;
  font-size: 0.9rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-practical-file-library-actions {
  justify-content: flex-end;
  border-top: 1px solid #d7dee4;
  background: #ffffff;
}

@media (max-width: 820px) {
  .lesson-practical-file-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .lesson-practical-file-card .button {
    grid-column: span 1;
  }

  .lesson-practical-file-library-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}

/* v096: Практическое задание — toolbar и скролл текста; SVG-иконки типов шагов */
body.is-lesson-editor-active .lesson-step-card[data-active-step-type="practical"] .lesson-text-toolbar {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.lesson-practical-rich-editor-shell {
  display: grid;
  gap: 0;
  overflow: hidden;
}

.lesson-practical-rich-editor-shell .lesson-text-toolbar {
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.lesson-practical-rich-editor {
  min-height: 300px !important;
  max-height: 430px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  border-radius: 0 0 8px 8px;
}

.lesson-step-type-icon {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
}

.lesson-step-tab strong {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.lesson-step-tab .lesson-step-tab-icon {
  width: 27px;
  height: 27px;
}

.lesson-step-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.lesson-step-label .lesson-step-heading-icon {
  width: 26px;
  height: 26px;
}

.lesson-editor-bottom-type {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.lesson-editor-bottom-type .lesson-step-bottom-icon {
  width: 19px;
  height: 19px;
}

.course-tree-step-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.course-tree-step-open .course-tree-step-icon {
  width: 18px;
  height: 18px;
}

.step-type-option-title {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
}

.step-type-option-title img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* v097: в верхней ленте редактора урока показываются только SVG-иконки шагов */
.lesson-steps-strip .lesson-step-tab {
  display: grid;
  place-items: center;
  padding: 0;
}

.lesson-steps-strip .lesson-step-tab .lesson-step-tab-icon {
  width: 34px;
  height: 34px;
}


/* v098: пользовательский интерфейс прохождения курса и предпросмотр создателя */
.lesson-editor-topbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.training-page {
  background: #eef1f3;
  color: #1c2429;
}

.training-app {
  min-height: 100vh;
}

.training-loading,
.training-error {
  width: min(680px, calc(100% - 32px));
  margin: 12vh auto;
  padding: 28px;
  border: 1px solid #c8d0d6;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(18, 36, 48, 0.12);
}

.training-loading {
  display: grid;
  gap: 8px;
  text-align: center;
}

.training-loading strong,
.training-error h1 {
  margin: 0;
  color: #21303a;
  font-size: 22px;
}

.training-loading span,
.training-error p {
  margin: 0;
  color: #65737d;
  line-height: 1.5;
}

.training-error a {
  display: inline-flex;
  margin-top: 12px;
  color: #2769c8;
  font-weight: 800;
}

.training-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 304px minmax(0, 1fr);
}

.training-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 5;
  width: 304px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #1d2830 0%, #182128 100%);
  color: #f5f8fa;
  box-shadow: 9px 0 26px rgba(15, 25, 32, 0.18);
}

.training-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 15px;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.training-brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid #f1a929;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 900;
  letter-spacing: -0.05em;
}

.training-brand > span:last-child {
  display: grid;
  gap: 1px;
  line-height: 1.05;
}

.training-brand strong {
  font-size: 18px;
}

.training-brand small {
  color: #aab8c0;
  font-size: 11px;
}

.training-course-summary {
  padding: 15px 15px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.training-course-summary h1 {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.25;
}

.training-course-progress-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: #d9e2e7;
  font-size: 12px;
}

.training-course-progress-line strong {
  color: #ffffff;
  font-size: 13px;
}

.training-progress-bar {
  height: 6px;
  margin: 9px 0 7px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.23);
}

.training-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #61c976, #2f9d58);
  transition: width 0.22s ease;
}

.training-course-summary small {
  color: #aebbc3;
  font-size: 11px;
  line-height: 1.35;
}

.training-course-tree {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 0 20px;
}

.training-module {
  padding: 0 0 8px;
}

.training-module h2 {
  margin: 0;
  padding: 12px 15px 7px;
  color: #f5f8fa;
  font-size: 14px;
  line-height: 1.25;
}

.training-module.is-current-module h2 {
  color: #a9e8b3;
}

.training-module-lessons {
  display: grid;
}

.training-lesson {
  position: relative;
  width: 100%;
  min-height: 39px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  padding: 9px 14px;
  border: 0;
  border-left: 4px solid transparent;
  background: transparent;
  color: #e8eef1;
  text-align: left;
  cursor: pointer;
}

.training-lesson:hover:not(:disabled),
.training-lesson:focus-visible:not(:disabled) {
  outline: 0;
  background: rgba(255, 255, 255, 0.08);
}

.training-lesson.is-active {
  border-left-color: #6bce78;
  background: #3b8750;
  color: #ffffff;
}

.training-lesson.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #eef1f3;
}

.training-lesson.is-locked {
  color: #81909a;
  cursor: not-allowed;
}

.training-lesson-number {
  color: #a7b8c1;
  font-size: 12px;
  font-weight: 800;
}

.training-lesson.is-active .training-lesson-number {
  color: #effff1;
}

.training-lesson-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}

.training-lesson-tooltip {
  position: fixed;
  top: 72px;
  z-index: 20;
  left: 314px;
  display: none;
  width: min(270px, calc(100vw - 332px));
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: #20282f;
  color: #f6f8fa;
  box-shadow: 0 13px 30px rgba(0, 0, 0, 0.26);
  pointer-events: none;
  transform: translateY(-50%);
}

.training-lesson:hover .training-lesson-tooltip,
.training-lesson:focus-visible .training-lesson-tooltip {
  display: grid;
  gap: 5px;
}

.training-lesson-tooltip strong {
  font-size: 13px;
  line-height: 1.25;
}

.training-lesson-tooltip span {
  color: #c7d0d5;
  font-size: 11px;
  line-height: 1.32;
}

.training-empty-module {
  padding: 8px 16px;
  color: #81909a;
  font-size: 12px;
}

.training-sidebar-footer {
  flex: 0 0 auto;
  padding: 11px 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  color: #8797a1;
  font-size: 10px;
}

.training-workspace {
  min-width: 0;
  margin-left: 304px;
  background: #eef1f3;
}

.training-topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px clamp(18px, 3vw, 42px);
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid #c8d0d6;
  box-shadow: 0 4px 16px rgba(27, 41, 50, 0.06);
  backdrop-filter: blur(10px);
}

.training-step-strip {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: min(58vw, 720px);
  overflow-x: auto;
  padding: 5px 4px 10px;
}

.training-step-tab {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #aeb8c0;
  border-radius: 6px;
  background: #f4f6f7;
  cursor: pointer;
}

.training-step-tab img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.training-step-tab.is-complete {
  border-color: #419b56;
  background: #eaf7ed;
}

.training-step-tab.is-active {
  border-color: #2769c8;
  background: #edf5ff;
  box-shadow: 0 0 0 2px rgba(39, 105, 200, 0.18);
}

.training-step-tab.is-active::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #2769c8;
}

.training-step-tab.is-locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.training-no-steps {
  color: #65737d;
  font-size: 13px;
}

.training-topbar-spacer {
  flex: 1;
}

.training-edit-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 17px;
  border: 1px solid #2769c8;
  border-radius: 6px;
  background: #edf5ff;
  color: #2769c8;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.training-edit-button:hover {
  background: #dfeeff;
}

.training-preview-banner {
  width: min(1180px, calc(100% - 40px));
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px 16px;
  margin: 18px auto 0;
  padding: 12px 14px;
  border: 1px solid #d5a42c;
  border-radius: 8px;
  background: #fff7df;
  color: #594415;
  font-size: 12px;
  line-height: 1.4;
}

.training-preview-banner strong {
  font-size: 13px;
}

.training-preview-banner span {
  flex: 1 1 360px;
}

.training-preview-banner button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #c58f10;
  border-radius: 5px;
  background: #fffdf5;
  color: #60480d;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.training-lesson-info {
  width: min(1180px, calc(100% - 40px));
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 18px auto 0;
  padding: 16px 18px;
  border-left: 4px solid #2f9d58;
  background: #ffffff;
  box-shadow: 0 3px 13px rgba(25, 42, 52, 0.07);
}

.training-lesson-info strong {
  color: #1c2b33;
  font-size: 18px;
}

.training-lesson-info span {
  color: #64727b;
  font-size: 13px;
}

.training-content-wrap {
  width: min(980px, calc(100% - 40px));
  margin: 20px auto 42px;
}

.training-step-card {
  min-height: 360px;
  padding: clamp(22px, 4vw, 48px);
  border: 1px solid #d2dbe0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(19, 35, 45, 0.08);
}

.training-step-heading {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e0e7ea;
}

.training-step-heading > img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.training-step-heading div {
  display: grid;
  gap: 3px;
}

.training-step-heading span {
  color: #71808a;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.training-step-heading h1 {
  margin: 0;
  color: #1d2b34;
  font-size: clamp(22px, 2.8vw, 31px);
  line-height: 1.18;
}

.training-rich-content {
  max-width: 820px;
  margin: 26px auto 0;
  color: #25323a;
  font-size: 16px;
  line-height: 1.68;
}

.training-rich-content > :first-child {
  margin-top: 0;
}

.training-rich-content h1,
.training-rich-content h2,
.training-rich-content h3,
.training-rich-content h4 {
  color: #1d2b34;
  line-height: 1.25;
}

.training-rich-content h1 { font-size: 1.85em; }
.training-rich-content h2 { font-size: 1.55em; }
.training-rich-content h3 { font-size: 1.28em; }
.training-rich-content h4 { font-size: 1.1em; }

.training-rich-content p,
.training-rich-content ul,
.training-rich-content ol,
.training-rich-content blockquote,
.training-rich-content figure,
.training-rich-content table {
  margin: 1em 0;
}

.training-rich-content ul,
.training-rich-content ol {
  padding-left: 1.45em;
}

.training-rich-content blockquote {
  padding: 12px 16px;
  border-left: 4px solid #79b985;
  background: #f1f8f2;
  color: #365142;
}

.training-rich-content img,
.training-rich-content video {
  max-width: 100%;
  height: auto;
}

.training-rich-content .lesson-image-figure {
  max-width: 100%;
}

.training-rich-content .lesson-image-figure[data-image-align="center"] {
  margin-right: auto;
  margin-left: auto;
}

.training-rich-content .lesson-image-figure[data-image-align="right"] {
  margin-left: auto;
}

.training-rich-content .lesson-image-figure[data-image-align="left"] {
  margin-right: auto;
}

.training-rich-content .lesson-image-figure figcaption {
  margin-top: 6px;
  color: #6d7b84;
  font-size: 13px;
  text-align: center;
}

.training-rich-content .lesson-content-table {
  width: 100%;
  border-collapse: collapse;
}

.training-rich-content .lesson-content-table th,
.training-rich-content .lesson-content-table td {
  padding: 8px 10px;
  border: 1px solid #cdd7dc;
}

.training-rich-content .lesson-content-table th {
  background: #f1f5f6;
}

.training-video {
  display: block;
  width: min(840px, 100%);
  margin: 26px auto 0;
  border-radius: 9px;
  background: #10171c;
}

.training-media-empty,
.training-empty-content {
  margin-top: 25px;
  padding: 18px;
  border: 1px dashed #b7c4ca;
  border-radius: 8px;
  background: #f7f9fa;
  color: #667681;
  line-height: 1.45;
}

.training-task-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 0;
}

.training-task-summary > div {
  display: grid;
  gap: 5px;
  min-height: 84px;
  padding: 13px 14px;
  border: 1px solid #d3dde2;
  border-radius: 8px;
  background: #f8fafb;
}

.training-task-summary span {
  color: #6c7b84;
  font-size: 12px;
}

.training-task-summary strong {
  color: #22323b;
  font-size: 18px;
}

.training-file-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding: 15px;
  border: 1px solid #c9d6dd;
  border-radius: 9px;
  background: #f7fafb;
}

.training-file-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #32414b;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
}

.training-file-card > div:nth-child(2) {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.training-file-card strong {
  overflow: hidden;
  color: #23333c;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-file-card span {
  color: #687780;
  font-size: 12px;
}

.training-file-download {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid #9eb0ba;
  border-radius: 6px;
  background: #ffffff;
  color: #22333c;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.training-step-note {
  margin: 20px 0 0;
  padding: 11px 13px;
  border-left: 3px solid #f1a929;
  background: #fff9e9;
  color: #655326;
  font-size: 13px;
  line-height: 1.5;
}

.training-step-navigation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}

.training-nav-button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #aebac1;
  border-radius: 7px;
  background: #ffffff;
  color: #25343d;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.training-nav-button:hover:not(:disabled) {
  border-color: #879aa4;
  background: #f9fbfc;
}

.training-nav-button:disabled {
  color: #98a5ac;
  cursor: not-allowed;
}

.training-nav-next {
  justify-self: end;
  border-color: #2f9d58;
  background: #2f9d58;
  color: #ffffff;
}

.training-nav-next:hover:not(:disabled) {
  border-color: #257a45;
  background: #257a45;
}

.training-step-status {
  color: #687780;
  font-size: 12px;
  text-align: center;
}

.training-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  max-width: min(420px, calc(100vw - 40px));
  padding: 12px 15px;
  border-radius: 8px;
  background: #24323b;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.42;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.training-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 980px) {
  .training-layout {
    display: block;
  }

  .training-sidebar {
    position: static;
    width: 100%;
    min-height: auto;
    max-height: none;
    box-shadow: none;
  }

  .training-course-tree {
    max-height: 300px;
  }

  .training-sidebar-footer {
    display: none;
  }

  .training-workspace {
    margin-left: 0;
  }

  .training-topbar {
    position: sticky;
  }

  .training-lesson-tooltip {
    position: absolute;
    top: 100% !important;
    left: 10px;
    width: min(300px, calc(100vw - 40px));
    transform: none;
  }
}

@media (max-width: 680px) {
  .training-topbar {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 10px 14px;
  }

  .training-step-strip {
    max-width: 100%;
    width: 100%;
  }

  .training-topbar-spacer {
    display: none;
  }

  .training-edit-button {
    width: 100%;
  }

  .training-preview-banner,
  .training-lesson-info,
  .training-content-wrap {
    width: min(100% - 24px, 980px);
  }

  .training-step-card {
    min-height: 0;
    padding: 22px 18px;
  }

  .training-task-summary {
    grid-template-columns: 1fr;
  }

  .training-file-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .training-file-download {
    grid-column: 1 / -1;
    width: 100%;
  }

  .training-step-navigation {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .training-nav-next {
    justify-self: stretch;
  }

  .training-step-status {
    order: -1;
  }
}

/* v100: исправление пропорций только для страницы предпросмотра обучения.
   В v098 одновременно использовались CSS-grid и margin-left рабочей области,
   из-за чего область просмотра могла сжиматься. Для training.html оставляем
   фиксированную левую колонку и независимую рабочую область справа. */
.training-page .training-layout {
  display: block;
  min-height: 100vh;
}

.training-page .training-workspace {
  min-height: 100vh;
  margin-left: 304px;
}

/* Ширина основных блоков считается внутри свободной области справа от меню. */
.training-page .training-preview-banner,
.training-page .training-lesson-info {
  width: min(1180px, calc(100% - 48px));
}

.training-page .training-content-wrap {
  width: min(980px, calc(100% - 48px));
}

@media (max-width: 980px) {
  .training-page .training-workspace {
    margin-left: 0;
  }
}

/* v101: аккуратная правка только окна предпросмотра/прохождения курса.
   Общие страницы сайта не затрагиваются. */
.training-page .training-layout {
  --training-header-height: 72px;
  --training-sidebar-width: 320px;
  --training-sidebar-collapsed-width: 44px;
  position: relative;
  min-height: 100vh;
  padding-top: var(--training-header-height);
  background: #eef1f3;
}

.training-page .training-layout.is-sidebar-collapsed {
  --training-sidebar-width: var(--training-sidebar-collapsed-width);
}

.training-page .training-shell-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  min-height: var(--training-header-height);
  display: grid;
  grid-template-columns: var(--training-sidebar-width) minmax(0, 1fr);
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid #c8d0d6;
  box-shadow: 0 4px 16px rgba(27, 41, 50, 0.08);
  backdrop-filter: blur(10px);
}

.training-page .training-shell-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 14px;
  border-right: 1px solid #d6dde2;
}

.training-page .training-shell-brand .training-brand {
  min-width: 0;
}

.training-page .training-shell-toolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
}

.training-page .training-step-strip {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 0 12px;
}

.training-page .training-sidebar {
  position: fixed;
  top: var(--training-header-height);
  left: 0;
  bottom: 0;
  z-index: 20;
  width: var(--training-sidebar-width);
  overflow: hidden;
  background: linear-gradient(180deg, #1d2830 0%, #182128 100%);
  color: #f5f8fa;
  box-shadow: 9px 0 26px rgba(15, 25, 32, 0.18);
}

.training-page .training-sidebar-expanded {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.training-page .training-sidebar-rail {
  display: none;
}

.training-page .training-layout.is-sidebar-collapsed .training-sidebar-expanded {
  display: none;
}

.training-page .training-layout.is-sidebar-collapsed .training-sidebar {
  width: var(--training-sidebar-width);
}

.training-page .training-layout.is-sidebar-collapsed .training-sidebar-rail {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: linear-gradient(180deg, #1d2830 0%, #182128 100%);
  color: #f5f8fa;
  cursor: pointer;
}

.training-page .training-layout.is-sidebar-collapsed .training-sidebar-rail span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.training-page .training-course-summary {
  padding: 16px 16px 14px;
}

.training-page .training-course-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.training-page .training-course-summary-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.training-page .training-course-summary h1 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.2;
}

.training-page .training-course-summary .training-course-progress-line {
  font-size: 14px;
}

.training-page .training-course-summary .training-course-progress-line strong {
  font-size: 15px;
}

.training-page .training-course-summary small {
  font-size: 12px;
}

.training-page .training-sidebar-pin {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
}

.training-page .training-sidebar-pin:hover {
  background: rgba(255, 255, 255, 0.14);
}

.training-page .training-course-tree {
  padding-top: 10px;
}

.training-page .training-module h2 {
  padding: 12px 16px 8px;
  font-size: 15px;
}

.training-page .training-lesson {
  grid-template-columns: 58px minmax(0, 1fr);
  padding: 12px 16px;
}

.training-page .training-lesson-number {
  font-size: 14px;
}

.training-page .training-lesson-title {
  font-size: 14px;
}

.training-page .training-lesson-tooltip {
  width: 320px;
}

.training-page .training-sidebar-footer {
  font-size: 11px;
}

.training-page .training-workspace {
  min-height: calc(100vh - var(--training-header-height));
  margin-left: var(--training-sidebar-width);
  background: #eef1f3;
}

.training-page .training-lesson-info-bar {
  margin: 0;
  border: 0;
  border-top: 1px solid #e2e8ec;
  border-bottom: 1px solid #c8d0d6;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 3px 10px rgba(25, 42, 52, 0.05);
}

.training-page .training-lesson-info-inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 10px 24px;
}

.training-page .training-lesson-info {
  gap: 0;
}

.training-page .training-lesson-info strong {
  font-size: 20px;
}

.training-page .training-lesson-info span {
  font-size: 14px;
}

.training-page .training-info-action {
  margin-left: auto;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #c0a24b;
  border-radius: 6px;
  background: #fff8dd;
  color: #66531f;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.training-page .training-content-wrap {
  width: min(1280px, calc(100% - 72px));
  margin: 28px auto 0;
}

.training-page .training-step-card {
  width: 100%;
  padding: clamp(26px, 3vw, 42px);
}

.training-page .training-step-heading {
  gap: 14px;
}

.training-page .training-step-heading h1 {
  font-size: clamp(30px, 2.4vw, 42px);
}

.training-page .training-step-heading span {
  font-size: 13px;
}

.training-page .training-rich-content {
  margin-top: 28px;
  font-size: 17px;
  line-height: 1.72;
}

.training-page .training-step-navigation {
  margin-top: 24px;
}

@media (max-width: 980px) {
  .training-page .training-layout {
    --training-sidebar-width: 0px;
    padding-top: 126px;
  }

  .training-page .training-shell-header {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .training-page .training-shell-brand {
    display: none;
  }

  .training-page .training-shell-toolbar {
    padding: 10px 14px;
    flex-wrap: wrap;
  }

  .training-page .training-sidebar {
    position: static;
    top: auto;
    bottom: auto;
    width: auto;
    max-height: 340px;
  }

  .training-page .training-sidebar-expanded {
    display: flex !important;
  }

  .training-page .training-sidebar-rail {
    display: none !important;
  }

  .training-page .training-workspace {
    margin-left: 0;
  }

  .training-page .training-lesson-info-inner {
    padding: 10px 18px;
  }

  .training-page .training-content-wrap {
    width: calc(100% - 28px);
    margin-top: 18px;
  }
}

@media (max-width: 680px) {
  .training-page .training-layout {
    padding-top: 142px;
  }

  .training-page .training-lesson-info strong {
    width: 100%;
    font-size: 18px;
  }

  .training-page .training-info-action {
    margin-left: 0;
    width: 100%;
  }
}

/* v102: точечная корректировка геометрии окна предпросмотра.
   Меняется только training.html; общие страницы и элементы админки не затрагиваются. */
.training-page .training-shell-header {
  display: flex;
  align-items: center;
  grid-template-columns: none;
}

.training-page .training-shell-brand {
  flex: 0 0 236px;
  height: var(--training-header-height);
  padding: 0 18px;
  border-right: 0;
}

.training-page .training-shell-toolbar {
  flex: 1 1 auto;
  min-width: 0;
}

/* Верхняя шапка сохраняет одинаковую геометрию независимо от состояния левой панели. */
.training-page .training-layout.is-sidebar-collapsed .training-shell-header {
  grid-template-columns: none;
}

/* Полоса сведений об уроке растягивается на всю свободную область справа от содержания. */
.training-page .training-lesson-info-bar {
  width: 100% !important;
  min-width: 0;
}

.training-page .training-lesson-info-inner {
  width: 100%;
  max-width: none;
}

/* Карточка учебного материала шире и начинается непосредственно под информационной полосой. */
.training-page .training-content-wrap {
  width: min(1400px, calc(100% - 48px));
  margin: 0 auto;
}

.training-page .training-step-card {
  border-radius: 0 0 12px 12px;
}

@media (max-width: 980px) {
  .training-page .training-shell-brand {
    display: none;
  }

  .training-page .training-content-wrap {
    width: calc(100% - 28px);
    margin: 0 auto;
  }
}

/* v103: завершающая корректировка геометрии и читаемости учебного полотна.
   Селекторы ограничены .training-page, общие страницы сайта не меняются. */
.training-page .training-shell-toolbar {
  padding-left: clamp(160px, 13vw, 240px);
}

.training-page .training-step-strip {
  flex: 0 1 auto;
}

.training-page .training-lesson-info-inner {
  min-height: 48px;
  justify-content: center;
  gap: 8px 18px;
  padding: 6px 24px;
}

.training-page .training-lesson-info strong,
.training-page .training-lesson-info span {
  white-space: nowrap;
}

.training-page .training-info-action {
  position: absolute;
  right: 24px;
  margin-left: 0;
  min-height: 30px;
  font-size: 12px;
}

.training-page .training-lesson-info-bar {
  position: relative;
}

.training-page .training-content-wrap {
  width: calc(100% - 32px);
  max-width: none;
  margin: 0 auto;
}

.training-page .training-step-card {
  min-height: calc(100vh - 120px);
  padding: 22px 28px 40px;
  border-top: 0;
  border-radius: 0 0 12px 12px;
}

.training-page .training-step-heading {
  display: none;
}

.training-page .training-rich-content {
  width: 100%;
  max-width: none;
  margin: 0;
  font-size: 17px;
  line-height: 1.72;
}

.training-page .training-rich-content > * {
  max-width: 100%;
}

.training-page .training-rich-content p,
.training-page .training-rich-content ul,
.training-page .training-rich-content ol,
.training-page .training-rich-content blockquote,
.training-page .training-rich-content figure,
.training-page .training-rich-content table {
  margin: 0 0 1.15em;
}

.training-page .training-rich-content ul,
.training-page .training-rich-content ol {
  padding-left: 1.7em;
}

.training-page .training-rich-content img,
.training-page .training-rich-content video,
.training-page .training-video {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

.training-page .training-video-card .training-video,
.training-page .training-video-card .training-media-empty {
  margin-top: 0;
}

.training-page .training-task-summary,
.training-page .training-file-card,
.training-page .training-step-note {
  margin-top: 22px;
}

@media (max-width: 1120px) {
  .training-page .training-shell-toolbar {
    padding-left: 96px;
  }

}

@media (max-width: 980px) {
  .training-page .training-shell-toolbar {
    padding-left: 14px;
  }

  .training-page .training-lesson-info-inner {
    min-height: 52px;
    padding: 8px 14px;
    justify-content: flex-start;
  }

  .training-page .training-info-action {
    position: static;
    margin-left: auto;
  }

  .training-page .training-content-wrap {
    width: calc(100% - 24px);
  }

  .training-page .training-step-card {
    min-height: auto;
    padding: 20px 18px 34px;
  }
}

@media (max-width: 680px) {
  .training-page .training-lesson-info-inner {
    justify-content: flex-start;
  }

  .training-page .training-lesson-info strong,
  .training-page .training-lesson-info span {
    white-space: normal;
  }
}


/* v104: финальная стыковка геометрии шапки, инфо-полосы и учебного полотна.
   Меняем только desktop-раскладку training.html. */
.training-page .training-layout {
  --training-content-left: 64px;
  --training-content-right: 16px;
}

.training-page .training-shell-toolbar {
  padding-left: var(--training-content-left);
  padding-right: var(--training-content-right);
}

.training-page .training-step-strip {
  justify-content: flex-start;
}

.training-page .training-lesson-info-bar {
  width: auto !important;
  margin: 0 var(--training-content-right) 0 var(--training-content-left);
}

.training-page .training-lesson-info-inner {
  min-height: 36px;
  padding: 4px 20px;
  justify-content: center;
  gap: 6px 18px;
}

.training-page .training-content-wrap {
  width: auto;
  max-width: none;
  margin: 0 var(--training-content-right) 0 var(--training-content-left);
}

.training-page .training-step-card {
  padding: 18px 20px 36px;
}

@media (max-width: 1120px) {
  .training-page .training-layout {
    --training-content-left: 36px;
    --training-content-right: 12px;
  }

  .training-page .training-shell-toolbar {
    padding-left: var(--training-content-left);
    padding-right: var(--training-content-right);
  }
}

@media (max-width: 980px) {
  .training-page .training-layout {
    --training-content-left: 12px;
    --training-content-right: 12px;
  }

  .training-page .training-shell-toolbar {
    padding-left: 14px;
    padding-right: 14px;
  }

  .training-page .training-lesson-info-bar,
  .training-page .training-content-wrap {
    margin-left: 12px;
    margin-right: 12px;
  }

  .training-page .training-lesson-info-inner {
    min-height: 44px;
    padding: 6px 12px;
  }

  .training-page .training-step-card {
    padding: 18px 16px 30px;
  }
}

/* v105: фиксированная ширина учебного полотна и точный сдвиг ленты шагов.
   Только training.html, остальные интерфейсы не затрагиваются. */
.training-page .training-lesson-info-bar,
.training-page .training-content-wrap {
  width: min(1200px, calc(100% - 32px)) !important;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Две позиции шагов: 2 × (44 px кнопка + 8 px интервал) = 104 px. */
.training-page .training-step-strip {
  margin-left: 104px;
}

@media (max-width: 980px) {
  .training-page .training-lesson-info-bar,
  .training-page .training-content-wrap {
    width: calc(100% - 24px) !important;
    max-width: none;
  }

  .training-page .training-step-strip {
    margin-left: 0;
  }
}

/* =========================================================
   v106 — Компактное окно входа администратора.
   Изменения ограничены admin_login.html.
   ========================================================= */
.admin-login-shell {
  width: min(460px, calc(100vw - 32px));
}

.admin-login-card {
  padding: 26px 28px 24px;
  border-radius: 12px;
}

.admin-login-card .eyebrow {
  margin: 0 0 7px;
  font-size: 11px;
  line-height: 1.2;
}

.admin-login-card h1 {
  margin: 0 0 7px;
  font-size: 28px;
  line-height: 1.16;
}

.admin-login-note {
  margin: 0 0 13px;
  color: #69757d;
  font-size: 12px;
  line-height: 1.34;
}

.admin-login-form {
  gap: 10px;
}

/* Убираем зарезервированные пустые строки под подсказку/ошибку
   у каждого поля: на этой форме они не используются. */
.admin-login-form .field {
  grid-template-rows: 16px 38px;
  gap: 4px;
}

.admin-login-form .field span {
  font-size: 12px;
  line-height: 16px;
}

.admin-login-form .field input,
.admin-login-form .field select {
  height: 38px;
  padding: 0 11px;
  border-color: #aeb8c0;
  border-radius: 5px;
  font-size: 14px;
}

.admin-login-error {
  min-height: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
}

.admin-login-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.admin-login-actions .button,
.admin-login-actions .button-primary,
.admin-login-actions .button-secondary {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #aeb8c0;
  border-radius: 5px;
  background: #eef1f3;
  color: #2d3942;
  font-size: 14px;
  font-weight: 700;
}

.admin-login-actions .button:hover,
.admin-login-actions .button-primary:hover,
.admin-login-actions .button-secondary:hover {
  border-color: #8f9da6;
  background: #e4e9ec;
}

.admin-login-actions .button:active,
.admin-login-actions .button-primary:active,
.admin-login-actions .button-secondary:active {
  border-color: #84939c;
  background: #dce3e7;
  color: #2d3942;
}

@media (max-width: 520px) {
  .admin-login-card {
    padding: 22px 20px;
  }
}

/* =========================================================
   v107 — Компактная геометрия режима «Управление курсами».
   Изменения ограничены админкой и не влияют на остальные страницы.
   ========================================================= */

/* Зеленые боковые зоны: каждая уже примерно на 20%. */
body.admin-shell-body {
  --course-left-tree-width: 296px;
  --course-right-tools-width: 184px;
  --course-side-gap: 16px;
}

/* Правая панель разделов: компактнее сами кнопки и подписи. */
.course-builder-nav {
  padding: 10px 8px !important;
  gap: 6px !important;
}

.course-builder-nav-button {
  min-height: 34px !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;
}

.course-builder-nav-button span {
  font-size: 10px !important;
  line-height: 1.2 !important;
}

/* Активный раздел справа: оранжевый вместо зеленого. */
.course-builder-nav-button.is-active {
  border-color: rgba(224, 136, 0, 0.45) !important;
  background: #fff7e5 !important;
  color: #9a5b00 !important;
  box-shadow: 0 5px 14px rgba(154, 91, 0, 0.10) !important;
}

/* Красная зона: семь режимов в шапке уменьшены примерно на 10%. */
.admin-header-modes {
  gap: 7px !important;
}

.admin-header-modes .admin-mode-button {
  min-height: 27px !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
}

.admin-header-modes .admin-mode-button span {
  width: 16px !important;
  height: 16px !important;
  font-size: 8px !important;
}

/* Активный режим в шапке: оранжевая подсветка вместо зеленой. */
.admin-header-modes .admin-mode-button.is-active {
  border-color: rgba(224, 136, 0, 0.48) !important;
  background: #fff7e5 !important;
  color: #9a5b00 !important;
  box-shadow: 0 4px 12px rgba(154, 91, 0, 0.10) !important;
}

.admin-header-modes .admin-mode-button.is-active span {
  border-color: rgba(224, 136, 0, 0.48) !important;
  background: rgba(255, 173, 46, 0.18) !important;
  color: #9a5b00 !important;
}

/* Голубая зона: компактная лента команд именно для списка курсов. */
.admin-mode-panel[data-admin-mode-panel="courses"]
  .course-builder-panel[data-course-builder-panel="overview"].is-active
  > .admin-mode-actions {
  gap: 8px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"]
  .course-builder-panel[data-course-builder-panel="overview"].is-active
  > .admin-mode-actions .button {
  min-height: 34px !important;
  padding: 0 11px !important;
  font-size: 12px !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"]
  .course-builder-panel[data-course-builder-panel="overview"].is-active
  > .admin-mode-actions .button-primary {
  min-width: 152px !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"]
  .course-builder-panel[data-course-builder-panel="overview"].is-active
  > .admin-mode-actions .course-include-deleted {
  min-height: 34px !important;
  gap: 6px !important;
  padding: 0 9px !important;
  font-size: 12px !important;
}

@media (max-width: 1320px) {
  body.admin-shell-body {
    --course-left-tree-width: 256px;
    --course-right-tools-width: 168px;
    --course-side-gap: 12px;
  }
}

/* =========================================================
   v108 — Точная геометрия окна «Управление курсами».
   Изменения ограничены админкой.
   ========================================================= */

/* Зеленая зона: левое дерево курсов — 250 px. */
body.admin-shell-body {
  --course-left-tree-width: 250px;

  /* Центральное рабочее полотно списка курсов — 1400 px. */
  --admin-workspace-width: 1400px;

  /* Желтая зона: компактный фиксированный подвал. */
  --admin-footer-height: 35px;
}

/* Красная зона: каждая кнопка режима 180 × 28 px.
   Уменьшен зазор между номером и текстом, размер шрифта сохранен. */
.admin-header-modes {
  gap: 7px !important;
}

.admin-header-modes .admin-mode-button {
  display: grid !important;
  grid-template-columns: 16px minmax(0, 1fr) !important;
  gap: 4px !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 3px 7px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.admin-header-modes .admin-mode-button span {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  font-size: 8px !important;
  line-height: 1 !important;
}

/* Желтая зона: высота подвала строго 35 px, текст по вертикальному центру. */
.site-footer.admin-footer,
.admin-footer {
  height: 35px !important;
  min-height: 35px !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* Боковые панели и рабочая область заканчиваются непосредственно над новым подвалом. */
.course-global-tree,
.course-builder-nav {
  bottom: 35px !important;
}

.course-builder-nav {
  height: calc(100dvh - var(--admin-header-fixed-height, 58px) - 35px) !important;
  min-height: calc(100dvh - var(--admin-header-fixed-height, 58px) - 35px) !important;
  max-height: calc(100dvh - var(--admin-header-fixed-height, 58px) - 35px) !important;
}

/* На более узких экранах сохраняем адаптивность, не фиксируя чрезмерную ширину. */
@media (max-width: 1480px) {
  body.admin-shell-body {
    --admin-workspace-width: min(1400px, calc(100vw - 48px));
  }
}

@media (max-width: 1320px) {
  body.admin-shell-body {
    --course-left-tree-width: 250px;
    --course-right-tools-width: 168px;
    --course-side-gap: 12px;
  }
}

/* =========================================================
   v109 — компактная карточка курса в списке.
   Изменения ограничены режимом «Управление курсами». 
   ========================================================= */

/* Жёлтая зона: информационный блок становится ниже, а текст
   использует всю ширину центральной рабочей ленты. */
.admin-mode-panel[data-admin-mode-panel="courses"]
  .course-builder-panel[data-course-builder-panel="overview"].is-active
  .admin-toolbar {
  min-height: 0 !important;
  padding: 8px 14px !important;
  align-items: center !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"]
  .course-builder-panel[data-course-builder-panel="overview"].is-active
  .course-builder-note {
  width: 100% !important;
  max-width: none !important;
  color: #63717a !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

/* Красная зона: параметры курса выводятся в строку рядом с названием,
   а не отдельной строкой под описанием. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-table {
  font-size: 12px !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-table th {
  padding: 7px 10px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-table td {
  padding: 5px 10px !important;
  line-height: 1.15 !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-table tbody tr {
  height: 52px;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-table td:not(:nth-child(2)) {
  vertical-align: middle !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-table td:nth-child(2) {
  vertical-align: middle !important;
}

.course-list-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.course-list-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.15;
}

.course-list-meta {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.course-list-meta span {
  min-height: 19px;
  padding: 1px 7px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-description-inline {
  margin-top: 2px;
  overflow: hidden;
  color: #71808a;
  font-size: 11px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .course-list-title-row {
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  .course-list-meta {
    flex-wrap: wrap;
  }

  .admin-mode-panel[data-admin-mode-panel="courses"] .course-table tbody tr {
    height: auto;
  }
}


/* =========================================================
   v110 — выравнивание параметров в строках курса и компактные
   однострочные подписи дерева курсов.
   ========================================================= */

/* Параметры курса всегда упираются правым краем в одну вертикаль
   внутри второй ячейки таблицы; название остаётся слева. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-list-title-row {
  width: 100%;
  gap: 10px;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-list-title {
  flex: 1 1 auto;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-list-meta {
  margin-left: auto;
  justify-content: flex-end;
}

/* В дереве курса длинные названия остаются в одну строку и
   сокращаются многоточием вместо переноса на вторую строку. */
.course-global-tree .course-tree-open {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-global-tree .course-tree-step-open {
  display: flex;
  min-width: 0;
  max-width: 100%;
}

.course-global-tree .course-tree-step-open > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   v111 — компактная верхняя панель открытого курса.
   Изменения ограничены страницей управления курсами.
   ========================================================= */

/* Верхняя карточка курса: одна компактная строка высотой 60 px. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-manage-sidebar {
  position: sticky !important;
  top: 0 !important;
  z-index: 34 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 60px !important;
  height: 60px !important;
  margin: 0 0 8px !important;
  padding: 7px 14px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 0 0 8px 8px !important;
  background: rgba(247, 250, 252, 0.98) !important;
  box-shadow: 0 7px 18px rgba(18, 29, 38, 0.06) !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-manage-logo {
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-manage-sidebar h2 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-manage-badges {
  display: none !important;
}

/* Кнопки «Содержание» и «Описание» находятся справа от названия. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-manage-nav {
  order: 3 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 4px 0 0 !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-manage-nav button,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-header-action {
  width: auto !important;
  min-width: auto !important;
  min-height: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  border: 1px solid #b8c4cb !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #2f3d46 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

/* Активное представление курса — оранжевое. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-manage-nav button.is-active {
  border-color: #e0ad46 !important;
  background: #fff6df !important;
  color: #a66105 !important;
  box-shadow: inset 0 0 0 1px rgba(224, 173, 70, 0.16) !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-manage-nav button:hover,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-header-action:hover:not(:disabled) {
  border-color: #d2a348 !important;
  background: #fff9eb !important;
}

/* Кнопки публикации и удаления остаются справа и имеют одинаковый нейтральный стиль. */
.admin-mode-panel[data-admin-mode-panel="courses"] #adminManagedCoursePublish {
  order: 4 !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] #adminManagedCourseDelete {
  order: 5 !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-delete-button,
.admin-mode-panel[data-admin-mode-panel="courses"] .course-delete-button:disabled {
  background: #ffffff !important;
  border-color: #b8c4cb !important;
  color: #2f3d46 !important;
  opacity: 1 !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] #adminManagedCoursePublish:disabled {
  background: #ffffff !important;
  border-color: #b8c4cb !important;
  color: #6b7780 !important;
  opacity: 1 !important;
}

@media (max-width: 1180px) {
  .admin-mode-panel[data-admin-mode-panel="courses"] .course-manage-sidebar {
    min-height: auto !important;
    height: auto !important;
    flex-wrap: wrap !important;
    padding: 8px 10px !important;
  }

  .admin-mode-panel[data-admin-mode-panel="courses"] .course-manage-nav {
    order: 6 !important;
    width: 100% !important;
    margin-left: 42px !important;
  }
}

/* =========================================================
   v112 — компактная программа курса.
   Изменения ограничены редактором содержания выбранного курса.
   ========================================================= */

/* Информационный текст под заголовком «Программа курса»:
   занимает всю рабочую ширину и читается как компактная служебная строка. */
.admin-mode-panel[data-admin-mode-panel="courses"]
  .course-builder-panel[data-course-builder-panel="manage"]
  .course-content-panel
  .course-create-head {
  margin-bottom: 8px !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"]
  .course-builder-panel[data-course-builder-panel="manage"]
  .course-content-panel
  .course-create-head p {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  color: #6a7881 !important;
  font-size: 11px !important;
  line-height: 1.32 !important;
  text-align: justify;
}

/* Форма создания модуля: одна компактная строка высотой 94 px.
   Кнопка расположена на одной линии с самими полями ввода. */
.admin-mode-panel[data-admin-mode-panel="courses"] #adminCreateModuleForm.course-inline-form {
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.2fr) auto !important;
  align-items: start !important;
  min-height: 94px !important;
  height: 94px !important;
  margin: 8px 0 14px !important;
  padding: 6px 12px !important;
  box-sizing: border-box !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] #adminCreateModuleForm .field {
  grid-template-rows: 16px 38px 8px 8px !important;
  gap: 3px !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] #adminCreateModuleForm .field span {
  font-size: 12px !important;
  line-height: 16px !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] #adminCreateModuleForm .field input {
  height: 38px !important;
  padding: 0 11px !important;
  font-size: 13px !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] #adminCreateModuleForm > .button {
  align-self: start !important;
  min-height: 38px !important;
  height: 38px !important;
  margin-top: 19px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
}

/* Левая цветовая полоса модулей: оранжевая вместо зелёной.
   Описание модуля вынесено на всю ширину его заголовка. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-module-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "heading actions"
    "description description" !important;
  align-items: start !important;
  column-gap: 16px !important;
  row-gap: 4px !important;
  border-left-color: #e0ad46 !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-module-header > div:first-child {
  display: contents;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-module-header h3 {
  grid-area: heading;
  margin: 0 !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-module-header p {
  grid-area: description;
  width: 100%;
  margin: 0 !important;
  color: #75828a !important;
  font-size: 11px !important;
  line-height: 1.32 !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-module-header .course-structure-actions {
  grid-area: actions;
}

/* Форма добавления урока: кнопка в одной линии с полем,
   светло-серый фон и видимая нейтральная рамка. */
.admin-mode-panel[data-admin-mode-panel="courses"] .course-add-lesson-form {
  align-items: start !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-add-lesson-form > .button {
  align-self: start !important;
  min-height: 42px !important;
  height: 42px !important;
  margin-top: 24px !important;
  padding: 0 15px !important;
  border: 1px solid #aeb8c0 !important;
  border-radius: 6px !important;
  background: #eef2f4 !important;
  color: #33424b !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  box-shadow: none !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .course-add-lesson-form > .button:hover {
  border-color: #909fa8 !important;
  background: #e4eaed !important;
}

@media (max-width: 1000px) {
  .admin-mode-panel[data-admin-mode-panel="courses"] #adminCreateModuleForm.course-inline-form {
    height: auto !important;
    min-height: 0 !important;
  }

  .admin-mode-panel[data-admin-mode-panel="courses"] #adminCreateModuleForm > .button,
  .admin-mode-panel[data-admin-mode-panel="courses"] .course-add-lesson-form > .button {
    margin-top: 0 !important;
  }

  .admin-mode-panel[data-admin-mode-panel="courses"] .course-module-header {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "heading"
      "description"
      "actions" !important;
  }
}

/* =========================================================
   v113 — компактная панель редактора текстового шага.
   Изменения ограничены экраном редактирования урока.
   ========================================================= */

/* Активный тип шага: оранжевое выделение вместо зелёного. */
body.is-lesson-editor-active .lesson-steps-strip .lesson-step-tab.is-active {
  border-color: #df9b25 !important;
  background: #f2ae36 !important;
  color: #26323a !important;
}

body.is-lesson-editor-active .lesson-steps-strip .lesson-step-tab.is-active span {
  color: #6f4600 !important;
}

/* Верхние действия урока — немного компактнее, но без изменения их логики. */
body.is-lesson-editor-active .lesson-editor-topbar {
  min-height: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.is-lesson-editor-active .lesson-editor-topbar > .button,
body.is-lesson-editor-active .lesson-editor-topbar-actions > .button {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 13px !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

body.is-lesson-editor-active .lesson-editor-topbar-actions {
  gap: 7px !important;
}

/* Текстовый шаг: сохраняем интервал после заголовка шага,
   но убираем щель между toolbar и областью rich-text. */
body.is-lesson-editor-active .lesson-step-card[data-active-step-type="text"] {
  row-gap: 0 !important;
}

body.is-lesson-editor-active .lesson-step-card[data-active-step-type="text"] .lesson-step-card-head-compact {
  margin: 0 0 10px !important;
}

body.is-lesson-editor-active .lesson-step-card[data-active-step-type="text"] .lesson-text-toolbar {
  top: 40px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

body.is-lesson-editor-active .lesson-step-card[data-active-step-type="text"] .lesson-text-toolbar + .lesson-rich-editor {
  margin: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Когда toolbar становится sticky, он примыкает к панели верхних действий
   без белой полосы и без скругления верхних углов. */
body.is-lesson-editor-active .lesson-step-card[data-active-step-type="text"] .lesson-text-toolbar {
  box-shadow: 0 1px 0 rgba(148, 163, 184, 0.35) !important;
}

@media (max-width: 980px) {
  body.is-lesson-editor-active .lesson-editor-topbar {
    height: auto !important;
    min-height: 0 !important;
  }

  body.is-lesson-editor-active .lesson-step-card[data-active-step-type="text"] .lesson-text-toolbar {
    top: 0 !important;
  }
}

/* =========================================================
   v114 — учебный просмотр: единая геометрия, компактная шапка
   и серое дерево курса. Изменения ограничены training.html.
   ========================================================= */

/* Базовая геометрия: шапка 62 px, дерево обучения 250 px. */
.training-page .training-layout {
  --training-header-height: 62px;
  --training-sidebar-width: 250px;
  --training-sidebar-collapsed-width: 38px;
}

/* Единая статичная шапка. Лента начинается с X = 405 px:
   250 px блок бренда + 155 px отступ до первого значка. */
.training-page .training-shell-header {
  min-height: 62px;
  height: 62px;
  box-sizing: border-box;
}

.training-page .training-shell-brand {
  flex: 0 0 250px;
  height: 62px;
  padding: 0 18px;
}

.training-page .training-shell-toolbar {
  height: 62px;
  min-height: 62px;
  align-items: center;
  padding: 0 18px;
  box-sizing: border-box;
}

.training-page .training-step-strip {
  flex: 0 0 auto;
  height: 62px;
  align-items: center;
  margin-left: 155px;
  padding: 0 0 10px;
  overflow: visible;
}

/* Указатель активного шага — оранжевый и касается нижней границы шапки. */
.training-page .training-step-tab.is-active::after {
  bottom: -14px;
  border-left-width: 8px;
  border-right-width: 8px;
  border-top: 8px solid #e0a13c;
}

.training-page .training-step-tab.is-active {
  border-color: #df9b25;
  background: #fff7e5;
  box-shadow: 0 0 0 2px rgba(224, 161, 60, 0.18);
}

/* Серое дерево обучения, как дерево курсов в админке. */
.training-page .training-sidebar {
  top: 62px;
  width: var(--training-sidebar-width);
  overflow-x: hidden;
  background: #d9e2e8;
  color: #24333c;
  border-right: 1px solid #bdc9d0;
  box-shadow: none;
}

.training-page .training-course-summary {
  padding: 14px 14px 12px;
  border-bottom: 1px solid #bec9d0;
}

.training-page .training-course-summary h1,
.training-page .training-course-progress-line strong {
  color: #22323b;
}

.training-page .training-course-progress-line,
.training-page .training-course-summary small {
  color: #5d6d77;
}

.training-page .training-progress-bar {
  background: #afbbc2;
}

.training-page .training-progress-bar span {
  background: linear-gradient(90deg, #f0b34b, #d98616);
}

.training-page .training-module h2 {
  color: #263640;
}

.training-page .training-module.is-current-module h2 {
  color: #263640;
}

.training-page .training-lesson {
  color: #273640;
}

.training-page .training-lesson-number {
  color: #5a6b75;
}

.training-page .training-lesson:hover:not(:disabled),
.training-page .training-lesson:focus-visible:not(:disabled) {
  background: rgba(255, 255, 255, 0.44);
}

.training-page .training-lesson.is-active {
  border-left-color: #e09b24;
  background: #f3dfbd;
  color: #283841;
}

.training-page .training-lesson.is-active .training-lesson-number {
  color: #7a4d06;
}

/* Указатель активного урока направлен в рабочую область. */
.training-page .training-lesson.is-active::after {
  right: -12px;
  border-top-width: 12px;
  border-bottom-width: 12px;
  border-left: 12px solid #eef1f3;
}

.training-page .training-lesson.is-locked,
.training-page .training-empty-module {
  color: #71818a;
}

.training-page .training-course-tree {
  overflow-x: hidden !important;
  scrollbar-width: thin;
}

.training-page .training-course-tree,
.training-page .training-module,
.training-page .training-module-lessons,
.training-page .training-lesson,
.training-page .training-lesson-title {
  min-width: 0;
  max-width: 100%;
}

.training-page .training-sidebar-footer {
  border-top-color: #bec9d0;
  color: #61727c;
}

/* Кнопка сворачивания — обычная стрелка вместо булавки. */
.training-page .training-sidebar-pin {
  width: 28px;
  height: 28px;
  border: 1px solid #aebbc3;
  border-radius: 6px;
  background: #f7f9fa;
  color: #42535d;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.training-page .training-sidebar-pin:hover {
  border-color: #93a2ab;
  background: #eef2f4;
}

.training-page .training-sidebar-pin span {
  transform: translateY(-1px);
}

.training-page .training-layout.is-sidebar-collapsed .training-sidebar {
  width: 38px;
  background: #d9e2e8;
  border-right-color: #bdc9d0;
}

.training-page .training-layout.is-sidebar-collapsed .training-sidebar-rail {
  display: grid;
  place-items: start center;
  padding-top: 12px;
  background: #d9e2e8;
  color: #42535d;
  font-size: 24px;
  font-weight: 700;
}

.training-page .training-layout.is-sidebar-collapsed .training-sidebar-rail span {
  writing-mode: initial;
  transform: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #aebbc3;
  border-radius: 6px;
  background: #f7f9fa;
}

/* Инфополоса и рабочее полотно используют абсолютно одинаковую ширину.
   Между ними остаётся только единая горизонтальная разделительная линия. */
.training-page .training-lesson-info-bar,
.training-page .training-content-wrap {
  width: min(1200px, calc(100% - 32px)) !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

.training-page .training-lesson-info-bar {
  min-height: 44px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: 1px solid #d2dbe0;
  border-bottom: 1px solid #c4d0d6;
  border-radius: 10px 10px 0 0;
  box-shadow: none;
}

.training-page .training-lesson-info-inner {
  min-height: 42px;
  padding: 3px 18px;
  gap: 6px 16px;
}

.training-page .training-content-wrap {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

.training-page .training-step-card {
  border: 1px solid #d2dbe0;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 24px rgba(19, 35, 45, 0.07);
}

/* Нижняя навигация: одинаковые размеры, нейтральный светло-серый стиль. */
.training-page .training-step-navigation {
  grid-template-columns: 250px minmax(0, 1fr) 250px;
  gap: 16px;
}

.training-page .training-nav-button,
.training-page .training-nav-next {
  width: 250px;
  min-height: 42px;
  height: 42px;
  justify-self: stretch;
  border: 1px solid #aeb8c0;
  border-radius: 6px;
  background: #eef2f4;
  color: #34434c;
  box-shadow: none;
}

.training-page .training-nav-next {
  justify-self: end;
}

.training-page .training-nav-button:hover:not(:disabled),
.training-page .training-nav-next:hover:not(:disabled) {
  border-color: #8d9ca5;
  background: #e3e9ec;
}

.training-page .training-nav-button:disabled,
.training-page .training-nav-next:disabled {
  border-color: #d5dde1;
  background: #f1f3f4;
  color: #9aa6ad;
  opacity: 1;
}

@media (max-width: 980px) {
  .training-page .training-layout {
    --training-sidebar-width: 0px;
  }

  .training-page .training-shell-header,
  .training-page .training-shell-toolbar {
    min-height: auto;
    height: auto;
  }

  .training-page .training-step-strip {
    height: auto;
    margin-left: 0;
    padding-bottom: 10px;
  }

  .training-page .training-sidebar {
    width: auto;
  }

  .training-page .training-lesson-info-bar,
  .training-page .training-content-wrap {
    width: calc(100% - 24px) !important;
    max-width: none !important;
  }
}

@media (max-width: 680px) {
  .training-page .training-step-navigation {
    grid-template-columns: 1fr;
  }

  .training-page .training-nav-button,
  .training-page .training-nav-next {
    width: 100%;
    justify-self: stretch;
  }
}

/* =========================================================
   v115 — учебный просмотр: корректная карточка урока и видео
   Изменения ограничены только training.html.
   ========================================================= */

/* Карточка урока выводится рядом с наведённым уроком, а не под лентой шагов. */
.training-page .training-sidebar {
  z-index: 45;
}

.training-page .training-lesson-tooltip {
  position: fixed;
  top: var(--training-tooltip-top, 132px);
  left: calc(var(--training-sidebar-width) + 12px);
  z-index: 80;
  width: min(310px, calc(100vw - var(--training-sidebar-width) - 28px));
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background: #222a30;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
  transform: translateY(-50%);
}

.training-page .training-lesson-tooltip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #222a30;
  transform: translateY(-50%);
}

.training-page .training-lesson-tooltip strong {
  font-size: 13px;
  line-height: 1.3;
}

.training-page .training-lesson-tooltip span {
  font-size: 12px;
  line-height: 1.35;
}

/* Видео занимает всю ширину учебного полотна: 1200 px на desktop,
   высота остаётся пропорциональной исходному видео. */
.training-page .training-video-card {
  padding: 0 !important;
  overflow: hidden;
}

.training-page .training-video-card .training-video {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 !important;
  border-radius: 0;
  background: #000000;
  object-fit: contain;
}

.training-page .training-video-card .training-rich-content {
  padding: 22px 24px 30px;
}

@media (max-width: 980px) {
  .training-page .training-lesson-tooltip {
    left: 12px;
    width: min(310px, calc(100vw - 24px));
  }

  .training-page .training-video-card .training-rich-content {
    padding: 18px 16px 24px;
  }
}

/* =========================================================
   v116 — видео-шаг: карточка заканчивается у нижней границы видео.
   Навигация располагается сразу после ролика.
   ========================================================= */
.training-page .training-video-card {
  min-height: 0 !important;
  height: auto;
  line-height: 0;
}

.training-page .training-video-card .training-video {
  vertical-align: top;
}

.training-page .training-video-card .training-rich-content {
  line-height: 1.68;
}

.training-page .training-video-card + .training-step-navigation {
  margin-top: 12px;
}

/* =========================================================
   v117 — единый стиль меню «…» и корректная прокрутка редактора тестов.
   Изменения ограничены только административным интерфейсом.
   ========================================================= */

/* Меню действий курсов и тестов использует одинаковую компактную геометрию. */
.admin-course-actions-menu .admin-action-dropdown,
.admin-test-actions-menu .admin-action-dropdown {
  width: 178px !important;
  min-width: 178px !important;
  padding: 6px !important;
  border-color: var(--line-strong) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 36px rgba(27, 38, 46, 0.16) !important;
}

.admin-course-actions-menu .admin-action-button,
.admin-test-actions-menu .admin-action-button {
  width: 100% !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  color: var(--text) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

.admin-course-actions-menu .admin-action-button:hover,
.admin-course-actions-menu .admin-action-button:focus,
.admin-test-actions-menu .admin-action-button:hover,
.admin-test-actions-menu .admin-action-button:focus {
  border-color: var(--focus) !important;
  background: #eef4f7 !important;
  color: var(--text) !important;
  outline: none !important;
}

/* Удаление в обоих меню остается обычной командой того же стиля,
   без постоянной красной окраски. */
.admin-action-button[data-course-action="delete"],
.admin-action-button[data-test-action="delete"] {
  color: var(--text) !important;
}

/* В режиме редактора теста прокрутка принадлежит всей видимой рабочей части.
   Поэтому полоса прокрутки располагается у правого края окна сайта,
   а сам редактор остается центрированной лентой шириной до 1400 px. */
body.is-test-editor-active .admin-content {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  scrollbar-gutter: stable;
}

body.is-test-editor-active .course-builder-workarea,
body.is-test-editor-active .course-builder-panel[data-course-builder-panel="tests"],
body.is-test-editor-active .test-library-panel {
  width: min(1400px, calc(100% - 48px)) !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* При обычной высоте экрана редактор не создает искусственный нижний запас.
   Прокрутка появляется только если реального содержимого больше, чем высота рабочей области. */
body.is-test-editor-active .test-library-panel {
  min-height: 0 !important;
  padding-bottom: 18px !important;
}

body.is-test-editor-active .test-editor-panel {
  margin-bottom: 0 !important;
}

/* Убираем наследуемый резерв под фиксированный подвал: именно он создавал
   прокрутку даже тогда, когда короткий редактор полностью помещался в окне. */
body.is-test-editor-active .admin-content,
body.is-test-editor-active .course-builder-workarea {
  padding-bottom: 0 !important;
}

/* =========================================================
   v118 — симметричный внешний отступ редактора тестов.
   Изменения ограничены только режимом редактирования теста.
   ========================================================= */

/* Полоса прокрутки остаётся у правого края рабочей области,
   а контент редактора получает одинаковый отступ 24 px слева и справа. */
body.is-test-editor-active .admin-content {
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* Центральная лента использует всю внутреннюю ширину admin-content,
   поэтому её правая граница отстоит от края ровно на тот же размер,
   что и левая. */
body.is-test-editor-active .course-builder-workarea,
body.is-test-editor-active .course-builder-panel[data-course-builder-panel="tests"],
body.is-test-editor-active .test-library-panel {
  width: min(1400px, 100%) !important;
  max-width: 1400px !important;
}

@media (max-width: 760px) {
  body.is-test-editor-active .admin-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* =========================================================
   v119 — Чистый режим «Редактирование теста».
   В этом режиме скрываются служебная правая панель и нижний подвал,
   а рабочая область занимает всю доступную ширину без резервов под них.
   ========================================================= */

/* Правая панель разделов и подвал не должны занимать место поверх редактора теста. */
body.is-test-editor-active .course-builder-nav,
body.is-test-editor-active .site-footer.admin-footer,
body.is-test-editor-active .admin-footer {
  display: none !important;
}

/* Убираем резерв внизу, который в обычном режиме оставляется для фиксированного подвала. */
body.is-test-editor-active {
  padding-bottom: 0 !important;
}

body.is-test-editor-active .admin-workspace {
  height: calc(100dvh - var(--admin-header-fixed-height, 58px)) !important;
  min-height: calc(100dvh - var(--admin-header-fixed-height, 58px)) !important;
  max-height: calc(100dvh - var(--admin-header-fixed-height, 58px)) !important;
  padding-bottom: 0 !important;
}

/* Сбрасываем старую геометрию центральной ленты, которая резервировала место справа. */
body.is-test-editor-active .admin-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 24px 24px !important;
  box-sizing: border-box !important;
}

body.is-test-editor-active .course-manager-layout,
body.is-test-editor-active .course-builder-workarea,
body.is-test-editor-active .course-builder-panel[data-course-builder-panel="tests"] {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Сам редактор остаётся читаемой центральной лентой, но без «пустого блока» справа. */
body.is-test-editor-active .test-library-panel {
  width: min(1400px, 100%) !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 760px) {
  body.is-test-editor-active .admin-content {
    padding: 0 12px 16px !important;
  }
}

/* =========================================================
   v120 — редактор теста: убрать резервную правую колонку.
   Режим теста использует пространство до правого края сайта.
   ========================================================= */

/* Дублирующий селектор через :has нужен на случай, когда класс body
   обновляется после первой отрисовки редактора. */
body.is-test-editor-active .course-builder-nav,
body:has(.test-editor-panel:not([hidden])) .course-builder-nav {
  display: none !important;
}

/* Правая колонка не только скрывается, но и исключается из расчета
   центральной рабочей ленты. Это устраняет пустой блок справа. */
body.is-test-editor-active .course-manager-layout,
body:has(.test-editor-panel:not([hidden])) .course-manager-layout {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

body.is-test-editor-active .course-builder-workarea,
body:has(.test-editor-panel:not([hidden])) .course-builder-workarea {
  width: calc(100vw - var(--course-left-tree-width, 250px) - 28px) !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

body.is-test-editor-active .course-builder-panel[data-course-builder-panel="tests"],
body.is-test-editor-active .test-library-panel,
body:has(.test-editor-panel:not([hidden])) .course-builder-panel[data-course-builder-panel="tests"],
body:has(.test-editor-panel:not([hidden])) .test-library-panel {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 1180px) {
  body.is-test-editor-active .course-builder-workarea,
  body:has(.test-editor-panel:not([hidden])) .course-builder-workarea {
    width: calc(100vw - 24px) !important;
  }
}

/* =========================================================
   v121 — диагностический режим редактора теста.
   Убрана ТОЛЬКО внутренняя вертикальная прокрутка .admin-content,
   чтобы проверить геометрию правой области без полосы скролла.
   ========================================================= */
body.is-test-editor-active .admin-content,
body:has(.test-editor-panel:not([hidden])) .admin-content {
  overflow-y: hidden !important;
  scrollbar-gutter: auto !important;
}

/* На Chromium полностью скрываем внутреннюю полосу прокрутки.
   Длинный тест в этом временном варианте не будет прокручиваться,
   поэтому правило ограничено только диагностикой редактора теста. */
body.is-test-editor-active .admin-content::-webkit-scrollbar,
body:has(.test-editor-panel:not([hidden])) .admin-content::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* =========================================================
   v122 — редактор теста: убрать зарезервированную правую колонку.
   Причина: прежняя схема раскладки продолжала рассчитывать центральную
   ленту как часть трёхколоночного режима «Управление курсами».
   В режиме редактирования теста редактор выводится как отдельная
   центральная лента шириной до 1400 px относительно всего окна сайта.
   ========================================================= */

/* Временный диагностический режим сохраняется: у тестового редактора
   нет внутренней вертикальной полосы. Это позволяет проверить чистую
   геометрию без влияния scroll-контейнера. */
body.is-test-editor-active .admin-content,
body:has(.test-editor-panel:not([hidden])) .admin-content {
  position: fixed !important;
  top: var(--admin-header-fixed-height, 54px) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 24px !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  box-sizing: border-box !important;
}

/* Сбрасываем остатки сетки «дерево — контент — правое меню».
   Ни левое дерево, ни правый блок не участвуют в расчете ширины теста. */
body.is-test-editor-active .course-manager-layout,
body:has(.test-editor-panel:not([hidden])) .course-manager-layout,
body.is-test-editor-active .course-builder-workarea,
body:has(.test-editor-panel:not([hidden])) .course-builder-workarea,
body.is-test-editor-active .course-builder-panel[data-course-builder-panel="tests"],
body:has(.test-editor-panel:not([hidden])) .course-builder-panel[data-course-builder-panel="tests"] {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Сам редактор — ровно 1400 px максимум и центрируется в окне сайта.
   При меньшей ширине окна остаётся одинаковый внешний отступ 24 px. */
body.is-test-editor-active .test-library-panel,
body:has(.test-editor-panel:not([hidden])) .test-library-panel {
  width: min(1400px, calc(100vw - 48px)) !important;
  max-width: 1400px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* На случай, когда скрытые панели успели получить фиксированную геометрию
   до включения редактора: исключаем их из отображения и из слоя над тестом. */
body.is-test-editor-active .course-global-tree,
body:has(.test-editor-panel:not([hidden])) .course-global-tree,
body.is-test-editor-active .course-builder-nav,
body:has(.test-editor-panel:not([hidden])) .course-builder-nav,
body.is-test-editor-active .site-footer.admin-footer,
body:has(.test-editor-panel:not([hidden])) .site-footer.admin-footer {
  display: none !important;
}

@media (max-width: 760px) {
  body.is-test-editor-active .admin-content,
  body:has(.test-editor-panel:not([hidden])) .admin-content {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  body.is-test-editor-active .test-library-panel,
  body:has(.test-editor-panel:not([hidden])) .test-library-panel {
    width: calc(100vw - 24px) !important;
  }
}

/* =========================================================
   v123 — редактор теста: ширина считается от РЕАЛЬНОЙ рабочей зоны.

   Предыдущий вариант принудительно задавал внутренней панели ширину
   через 100vw. Если родительская рабочая область уже уже viewport,
   то редактор становился шире видимой зоны и правая часть обрезалась.
   Здесь нет расчётов от 100vw для вложенных панелей: все они занимают
   ровно 100% единой ленты шириной максимум 1400 px.
   ========================================================= */

/* Редактор теста снова живёт в обычном потоке страницы. Убираем fixed/
   inset/overflow-x:hidden из диагностических вариантов v121–v122: именно
   они обрезали правую часть при более узком фактическом контейнере. */
body.is-test-editor-active .admin-workspace,
body:has(.test-editor-panel:not([hidden])) .admin-workspace {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Это внешний габарит видимой рабочей ленты: не более 1400 px целиком,
   включая рамки и внутренние отступы. */
body.is-test-editor-active .admin-content,
body:has(.test-editor-panel:not([hidden])) .admin-content {
  position: relative !important;
  inset: auto !important;
  width: min(1400px, calc(100vw - 48px)) !important;
  max-width: calc(100vw - 48px) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  scrollbar-gutter: auto !important;
  box-sizing: border-box !important;
}

/* Все промежуточные контейнеры наследуют фактическую ширину admin-content,
   а не вычисляют собственную ширину от окна браузера. */
body.is-test-editor-active .course-manager-layout,
body:has(.test-editor-panel:not([hidden])) .course-manager-layout,
body.is-test-editor-active .course-builder-workarea,
body:has(.test-editor-panel:not([hidden])) .course-builder-workarea,
body.is-test-editor-active .course-builder-panel[data-course-builder-panel="tests"],
body:has(.test-editor-panel:not([hidden])) .course-builder-panel[data-course-builder-panel="tests"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* У самой панели библиотеки и у редактора нет собственной фиксированной
   ширины: они строго ограничены шириной 1400 px внешней ленты. */
body.is-test-editor-active .test-library-panel,
body:has(.test-editor-panel:not([hidden])) .test-library-panel,
body.is-test-editor-active .test-editor-panel,
body:has(.test-editor-panel:not([hidden])) .test-editor-panel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Вложенные карточки не могут растянуть родителя по минимальной ширине. */
body.is-test-editor-active .test-editor-head,
body.is-test-editor-active .test-editor-form,
body.is-test-editor-active .test-editor-main-fields,
body.is-test-editor-active .test-editor-questions,
body.is-test-editor-active .test-question-card,
body.is-test-editor-active .test-editor-bottom-actions,
body:has(.test-editor-panel:not([hidden])) .test-editor-head,
body:has(.test-editor-panel:not([hidden])) .test-editor-form,
body:has(.test-editor-panel:not([hidden])) .test-editor-main-fields,
body:has(.test-editor-panel:not([hidden])) .test-editor-questions,
body:has(.test-editor-panel:not([hidden])) .test-question-card,
body:has(.test-editor-panel:not([hidden])) .test-editor-bottom-actions {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.is-test-editor-active .test-editor-form input,
body.is-test-editor-active .test-editor-form textarea,
body:has(.test-editor-panel:not([hidden])) .test-editor-form input,
body:has(.test-editor-panel:not([hidden])) .test-editor-form textarea {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Скрытые в режиме редактора вспомогательные блоки не участвуют в геометрии. */
body.is-test-editor-active .course-global-tree,
body:has(.test-editor-panel:not([hidden])) .course-global-tree,
body.is-test-editor-active .course-builder-nav,
body:has(.test-editor-panel:not([hidden])) .course-builder-nav,
body.is-test-editor-active .site-footer.admin-footer,
body:has(.test-editor-panel:not([hidden])) .site-footer.admin-footer {
  display: none !important;
}

@media (max-width: 760px) {
  body.is-test-editor-active .admin-content,
  body:has(.test-editor-panel:not([hidden])) .admin-content {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* =========================================================
   v124 — Редактирование теста: внутренняя лента с отступами
   и штатная прокрутка по правой границе видимой рабочей области.

   Рабочая зона остаётся 1400 px. Карточки редактора получают
   отдельные симметричные поля внутри этой зоны; scroll-container
   занимает всю область под шапкой, поэтому его полоса находится
   у крайней правой границы сайта.
   ========================================================= */

/* Прокрутка принадлежит всей области под шапкой, а не центральной карточке.
   При коротком тесте полоса не отображается; при длинном — находится справа
   от видимой рабочей области и идёт от нижней границы шапки до низа окна. */
body.is-test-editor-active .admin-content,
body:has(.test-editor-panel:not([hidden])) .admin-content {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: auto !important;
  box-sizing: border-box !important;
}

/* Все промежуточные обёртки не создают собственной ширины от viewport.
   Внешний размер рабочей зоны — максимум 1400 px. */
body.is-test-editor-active .course-manager-layout,
body:has(.test-editor-panel:not([hidden])) .course-manager-layout,
body.is-test-editor-active .course-builder-workarea,
body:has(.test-editor-panel:not([hidden])) .course-builder-workarea,
body.is-test-editor-active .course-builder-panel[data-course-builder-panel="tests"],
body:has(.test-editor-panel:not([hidden])) .course-builder-panel[data-course-builder-panel="tests"] {
  display: block !important;
  width: min(1400px, calc(100% - 48px)) !important;
  max-width: 1400px !important;
  min-width: 0 !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Внутри рабочей зоны формируется отдельное полотно контента:
   по 20 px слева и справа. Сама зона 1400 px не меняется. */
body.is-test-editor-active .test-library-panel,
body:has(.test-editor-panel:not([hidden])) .test-library-panel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

body.is-test-editor-active .test-editor-panel,
body:has(.test-editor-panel:not([hidden])) .test-editor-panel {
  width: calc(100% - 40px) !important;
  max-width: calc(100% - 40px) !important;
  min-width: 0 !important;
  margin: 0 auto 24px !important;
  box-sizing: border-box !important;
}

/* Боковые панели и подвал не участвуют в геометрии тестового редактора. */
body.is-test-editor-active .course-global-tree,
body:has(.test-editor-panel:not([hidden])) .course-global-tree,
body.is-test-editor-active .course-builder-nav,
body:has(.test-editor-panel:not([hidden])) .course-builder-nav,
body.is-test-editor-active .site-footer.admin-footer,
body:has(.test-editor-panel:not([hidden])) .site-footer.admin-footer {
  display: none !important;
}

@media (max-width: 760px) {
  body.is-test-editor-active .course-manager-layout,
  body:has(.test-editor-panel:not([hidden])) .course-manager-layout,
  body.is-test-editor-active .course-builder-workarea,
  body:has(.test-editor-panel:not([hidden])) .course-builder-workarea,
  body.is-test-editor-active .course-builder-panel[data-course-builder-panel="tests"],
  body:has(.test-editor-panel:not([hidden])) .course-builder-panel[data-course-builder-panel="tests"] {
    width: calc(100% - 24px) !important;
  }

  body.is-test-editor-active .test-editor-panel,
  body:has(.test-editor-panel:not([hidden])) .test-editor-panel {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
  }
}

/* =========================================================
   v125 — редактор теста: одна геометрическая цепочка ширины.

   Исправление v124. В v124 ограничение 1400 px повторялось на каждом
   вложенном контейнере, затем к нему добавлялись отдельные внутренние
   отступы. Из-за этого итоговая доступная ширина вычислялась неодинаково,
   а overflow-x:hidden скрывал правую часть вместо того, чтобы показать её.

   Теперь:
   1) прокручивается только внешняя рабочая область под шапкой;
   2) единственный контейнер с шириной до 1400 px — .admin-content;
   3) внутреннее полотно получает отступы ВНУТРИ 1400 px;
   4) все дочерние панели имеют ровно width:100% от этого полотна.
   ========================================================= */

/* В редакторе теста подвал и боковые служебные панели не занимают место. */
body.is-test-editor-active,
body:has(.test-editor-panel:not([hidden])) {
  padding-bottom: 0 !important;
}

body.is-test-editor-active .course-global-tree,
body:has(.test-editor-panel:not([hidden])) .course-global-tree,
body.is-test-editor-active .course-builder-nav,
body:has(.test-editor-panel:not([hidden])) .course-builder-nav,
body.is-test-editor-active .site-footer.admin-footer,
body:has(.test-editor-panel:not([hidden])) .site-footer.admin-footer,
body.is-test-editor-active .admin-footer,
body:has(.test-editor-panel:not([hidden])) .admin-footer {
  display: none !important;
}

/* Это ЕДИНСТВЕННЫЙ scroll-container. Он занимает всю область под шапкой,
   поэтому вертикальная полоса находится у крайней правой границы сайта. */
body.is-test-editor-active .admin-workspace,
body:has(.test-editor-panel:not([hidden])) .admin-workspace {
  display: block !important;
  width: 100% !important;
  height: calc(100dvh - var(--admin-header-fixed-height, 58px)) !important;
  min-height: calc(100dvh - var(--admin-header-fixed-height, 58px)) !important;
  max-height: calc(100dvh - var(--admin-header-fixed-height, 58px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-gutter: auto !important;
  box-sizing: border-box !important;
}

/* Внешняя центральная рабочая зона: не более 1400 px ЦЕЛИКОМ.
   20 px слева и справа входят в эти 1400 px, а не добавляются снаружи. */
body.is-test-editor-active .admin-content,
body:has(.test-editor-panel:not([hidden])) .admin-content {
  position: static !important;
  inset: auto !important;
  width: min(1400px, calc(100% - 48px)) !important;
  max-width: 1400px !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 20px 24px !important;
  overflow: visible !important;
  scrollbar-gutter: auto !important;
  box-sizing: border-box !important;
}

/* Сбрасываем старую трёхколоночную раскладку и старые повторные расчёты
   width: min(1400px, ...). Внутри используется только ширина admin-content. */
body.is-test-editor-active .admin-mode-panel[data-admin-mode-panel="courses"],
body:has(.test-editor-panel:not([hidden])) .admin-mode-panel[data-admin-mode-panel="courses"],
body.is-test-editor-active .course-manager-layout,
body:has(.test-editor-panel:not([hidden])) .course-manager-layout,
body.is-test-editor-active .course-builder-workarea,
body:has(.test-editor-panel:not([hidden])) .course-builder-workarea,
body.is-test-editor-active .course-builder-panel[data-course-builder-panel="tests"],
body:has(.test-editor-panel:not([hidden])) .course-builder-panel[data-course-builder-panel="tests"],
body.is-test-editor-active .test-library-panel,
body:has(.test-editor-panel:not([hidden])) .test-library-panel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Сам редактор сохраняет исходную сетку и промежутки между заголовком и формой,
   но не имеет собственной фиксированной ширины или внешнего отступа. */
body.is-test-editor-active .test-editor-panel,
body:has(.test-editor-panel:not([hidden])) .test-editor-panel {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Все карточки и поля не могут расширить 1400-пиксельную ленту. */
body.is-test-editor-active .test-editor-head,
body.is-test-editor-active .test-editor-form,
body.is-test-editor-active .test-editor-main-fields,
body.is-test-editor-active .test-editor-questions,
body.is-test-editor-active .test-question-card,
body.is-test-editor-active .test-editor-bottom-actions,
body:has(.test-editor-panel:not([hidden])) .test-editor-head,
body:has(.test-editor-panel:not([hidden])) .test-editor-form,
body:has(.test-editor-panel:not([hidden])) .test-editor-main-fields,
body:has(.test-editor-panel:not([hidden])) .test-editor-questions,
body:has(.test-editor-panel:not([hidden])) .test-question-card,
body:has(.test-editor-panel:not([hidden])) .test-editor-bottom-actions {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.is-test-editor-active .test-editor-form input,
body.is-test-editor-active .test-editor-form textarea,
body:has(.test-editor-panel:not([hidden])) .test-editor-form input,
body:has(.test-editor-panel:not([hidden])) .test-editor-form textarea {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 760px) {
  body.is-test-editor-active .admin-content,
  body:has(.test-editor-panel:not([hidden])) .admin-content {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
}

/* =========================================================
   v126 — предпросмотр обучения: единые стрелки сворачивания,
   вертикальная подпись скрытого дерева и нейтральные завершённые шаги.
   Изменения ограничены training.html.
   ========================================================= */

/* Убираем зелёную заливку/контур у уже пройденных шагов.
   Активный шаг остаётся оранжевым по существующему правилу. */
.training-page .training-step-tab.is-complete:not(.is-active) {
  border-color: #aeb8c0 !important;
  background: #f4f6f7 !important;
  box-shadow: none !important;
}

/* Стрелка раскрытия скрытого дерева имеет тот же размер, что и стрелка
   сворачивания в раскрытом дереве. */
.training-page .training-layout.is-sidebar-collapsed .training-sidebar-rail {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
}

.training-page .training-layout.is-sidebar-collapsed .training-sidebar-rail > span {
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #aebbc3 !important;
  border-radius: 6px !important;
  background: #f7f9fa !important;
  color: #42535d !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
}

/* Название сохранено и после сворачивания: вертикально, тёмно-серым цветом. */
.training-page .training-layout.is-sidebar-collapsed .training-sidebar-rail::after {
  content: "Содержание";
  position: absolute;
  top: 52px;
  left: 50%;
  color: #42535d;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
}

.training-page .training-layout.is-sidebar-collapsed .training-sidebar-rail:hover > span,
.training-page .training-layout.is-sidebar-collapsed .training-sidebar-rail:focus-visible > span {
  border-color: #93a2ab !important;
  background: #eef2f4 !important;
}

/* =========================================================
   v127 — предпросмотр обучения: оранжевые линии иконки
   у пройденного, но не активного шага.
   Фон и рамка кнопки остаются нейтральными.
   ========================================================= */
.training-page .training-step-tab.is-complete:not(.is-active) img {
  /* SVG вставлен через <img>; фильтр меняет цвет самих непрозрачных
     линий иконки, не меняя прозрачный фон файла. */
  filter: invert(60%) sepia(86%) saturate(740%) hue-rotate(350deg) brightness(98%) contrast(95%) !important;
  opacity: 1 !important;
}

/* =========================================================
   v128 — предпросмотр обучения: единая логика состояния шагов.
   Непройденный: чёрные контур и линии, пустой фон.
   Пройденный: оранжевые контур и линии, пустой фон.
   Активный: только оранжевый фон; контур и линии не меняются.
   ========================================================= */

/* Обычный, непройденный шаг. */
.training-page .training-step-tab:not(.is-complete):not(.is-active) {
  border-color: #20292f !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.training-page .training-step-tab:not(.is-complete):not(.is-active) img {
  filter: none !important;
  opacity: 1 !important;
}

/* Пройденный, но не активный шаг. */
.training-page .training-step-tab.is-complete:not(.is-active) {
  border-color: #df8e1f !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.training-page .training-step-tab.is-complete:not(.is-active) img {
  filter: invert(56%) sepia(91%) saturate(934%) hue-rotate(352deg) brightness(94%) contrast(87%) !important;
  opacity: 1 !important;
}

/* Активный шаг: выделение только фоном. Для пройденного активного
   шага также отменяется оранжевое окрашивание линий и рамки. */
.training-page .training-step-tab.is-active,
.training-page .training-step-tab.is-active.is-complete {
  border-color: #20292f !important;
  background: #f2a01d !important;
  box-shadow: none !important;
}

.training-page .training-step-tab.is-active img,
.training-page .training-step-tab.is-active.is-complete img {
  filter: none !important;
  opacity: 1 !important;
}

/* Указатель активного шага остаётся оранжевым. */
.training-page .training-step-tab.is-active::after {
  border-top-color: #df8e1f !important;
}

/* =========================================================
   v129 — предпросмотр обучения: прозрачное активное выделение
   и сохранение оранжевого контура/линий у пройденного шага.
   ========================================================= */

/* У пройденного шага контур немного толще, чтобы его состояние
   читалось даже без заливки. */
.training-page .training-step-tab.is-complete:not(.is-active),
.training-page .training-step-tab.is-complete.is-active {
  border-width: 2px !important;
  border-color: #df8e1f !important;
}

/* Активный, но ещё не пройденный шаг: меняется только полупрозрачный фон.
   Чёрные контур и линии SVG остаются исходными. */
.training-page .training-step-tab.is-active:not(.is-complete) {
  border-width: 1px !important;
  border-color: #20292f !important;
  background: rgba(242, 160, 29, 0.50) !important;
}

.training-page .training-step-tab.is-active:not(.is-complete) img {
  filter: none !important;
}

/* Активный и уже пройденный шаг: получает тот же полупрозрачный фон,
   но сохраняет оранжевые «чернила» SVG и оранжевый усиленный контур. */
.training-page .training-step-tab.is-active.is-complete {
  background: rgba(242, 160, 29, 0.50) !important;
  box-shadow: none !important;
}

.training-page .training-step-tab.is-active.is-complete img {
  filter: invert(56%) sepia(91%) saturate(934%) hue-rotate(352deg) brightness(94%) contrast(87%) !important;
  opacity: 1 !important;
}

/* =========================================================
   v130 — толщина рамки зависит только от активного состояния.
   Пройденный неактивный: 1 px; любой активный: 2 px.
   ========================================================= */

/* Пройденный, но не выбранный шаг: оранжевые рамка и SVG,
   но стандартная толщина рамки 1 px. */
.training-page .training-step-tab.is-complete:not(.is-active) {
  border-width: 1px !important;
}

/* Выбранный непройденный шаг: чёрные рамка и SVG,
   полупрозрачный оранжевый фон, усиленная рамка 2 px. */
.training-page .training-step-tab.is-active:not(.is-complete) {
  border-width: 2px !important;
}

/* Выбранный пройденный шаг: оранжевые рамка и SVG,
   полупрозрачный оранжевый фон, усиленная рамка 2 px. */
.training-page .training-step-tab.is-active.is-complete {
  border-width: 2px !important;
}

/* =========================================================
   v131 — предпросмотр: вертикальный прогресс каждого урока.
   Полоса показывает долю завершённых шагов в конкретном уроке.
   Цвет — оранжевый; активность урока влияет только на фон строки.
   ========================================================= */

/* Больше не используем левую рамку как часть подсветки активного урока:
   теперь это самостоятельный индикатор прогресса. */
.training-page .training-lesson,
.training-page .training-lesson.is-active {
  border-left-color: transparent !important;
}

/* Контейнер полосы занимает всю высоту строки урока и не участвует
   в разметке текста. */
.training-page .training-lesson-progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

/* Оранжевый участок растёт сверху вниз пропорционально числу
   завершённых шагов: 2 из 5 = 40% высоты строки урока. */
.training-page .training-lesson-progress > span {
  display: block;
  width: 100%;
  height: var(--lesson-progress, 0%);
  background: #df8e1f;
  transition: height 0.2s ease;
}

/* Оставляем текст и всплывающую карточку поверх индикатора. */
.training-page .training-lesson-number,
.training-page .training-lesson-title,
.training-page .training-lesson-tooltip {
  position: relative;
  z-index: 1;
}

/* =========================================================
   v132 — восстановление всплывающей карточки урока.
   v131 случайно переопределил position: fixed на position: relative,
   из-за чего tooltip попадал в поток строки дерева и увеличивал её высоту.
   ========================================================= */
.training-page .training-lesson-tooltip {
  position: fixed !important;
  top: var(--training-tooltip-top, 132px) !important;
  left: calc(var(--training-sidebar-width) + 12px) !important;
  z-index: 80 !important;
  display: none;
  width: min(310px, calc(100vw - var(--training-sidebar-width) - 28px));
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background: #222a30;
  color: #f6f8fa;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  transform: translateY(-50%);
}

.training-page .training-lesson:hover .training-lesson-tooltip,
.training-page .training-lesson:focus-visible .training-lesson-tooltip {
  display: grid;
  gap: 5px;
}

.training-page .training-lesson-tooltip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #222a30;
  transform: translateY(-50%);
}

.training-page .training-lesson-tooltip strong,
.training-page .training-lesson-tooltip span {
  position: static;
  z-index: auto;
}

@media (max-width: 980px) {
  .training-page .training-lesson-tooltip {
    left: 12px !important;
    width: min(310px, calc(100vw - 24px));
  }
}

/* =========================================================
   v133 — Редактирование теста: внутренние поля как в окне
   «Программа курса».

   Внешняя рабочая зона по-прежнему ограничена 1400 px правилами v125.
   Этот блок не меняет её ширину и не участвует в расчёте скролла.
   Он создаёт только внутреннее полотно: 20 px слева и справа, как у
   course-content-panel в редакторе курса.
   ========================================================= */
body.is-test-editor-active .test-editor-panel,
body:has(.test-editor-panel:not([hidden])) .test-editor-panel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 20px !important;
  gap: 16px !important;
  border: 1px solid #d7e0e8 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
  box-sizing: border-box !important;
}

/* Заголовок, форма и карточки вопросов остаются внутри нового полотна
   и занимают доступную ширину после вычета внутренних полей. */
body.is-test-editor-active .test-editor-panel > .test-editor-head,
body.is-test-editor-active .test-editor-panel > .test-editor-form,
body:has(.test-editor-panel:not([hidden])) .test-editor-panel > .test-editor-head,
body:has(.test-editor-panel:not([hidden])) .test-editor-panel > .test-editor-form {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 760px) {
  body.is-test-editor-active .test-editor-panel,
  body:has(.test-editor-panel:not([hidden])) .test-editor-panel {
    padding: 12px !important;
  }
}

/* =========================================================
   v134 — параметры теста в библиотеке и реальное прохождение
   теста в учебном предпросмотре.
   ========================================================= */
.test-editor-attempt-settings {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #d8e1e6;
  border-radius: 10px;
  background: #f8fafb;
}

.test-editor-attempt-settings-head {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.test-editor-attempt-settings-head h4 {
  margin: 0;
  color: #26343d;
  font-size: 15px;
}

.test-editor-attempt-settings-head p,
.test-editor-attempt-max {
  margin: 0;
  color: #687782;
  font-size: 12px;
  line-height: 1.45;
}

.test-editor-attempt-settings-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 12px;
}

.test-editor-attempt-settings-grid .field {
  grid-template-rows: auto 38px auto;
  gap: 5px;
}

.test-editor-attempt-settings-grid .field > span {
  min-height: 30px;
  font-size: 12px;
  line-height: 1.2;
}

.test-editor-attempt-settings-grid .field input {
  height: 38px;
  min-width: 0;
}

.test-editor-attempt-max {
  display: block;
  margin-top: 11px;
}

.test-library-actions #adminTestsImportButton {
  background: #eef2f4;
}

/* Экран теста студента. */
.training-page .training-test-card {
  display: grid;
  gap: 22px;
}

.training-page .training-test-intro {
  display: grid;
  gap: 16px;
}

.training-page .training-test-intro h2,
.training-page .training-test-result h2 {
  margin: 0;
  color: #23323b;
  font-size: 26px;
}

.training-page .training-test-intro > p,
.training-page .training-test-result > p {
  margin: 0;
  color: #586872;
  line-height: 1.55;
}

.training-page .training-test-start,
.training-page .training-test-submit {
  min-height: 44px;
  justify-self: start;
  padding: 0 22px;
  border: 1px solid #cf7f16;
  border-radius: 7px;
  background: rgba(242, 160, 29, 0.50);
  color: #25323a;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.training-page .training-test-start:disabled,
.training-page .training-test-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.training-page .training-test-run {
  display: grid;
  gap: 18px;
}

.training-page .training-test-run-head {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.training-page .training-test-run-head > div,
.training-page .training-test-result-grid > div {
  display: grid;
  gap: 4px;
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid #d5dfe4;
  border-radius: 8px;
  background: #f8fafb;
}

.training-page .training-test-run-head span,
.training-page .training-test-result-grid span {
  color: #6c7a83;
  font-size: 12px;
}

.training-page .training-test-run-head strong,
.training-page .training-test-result-grid strong {
  color: #23323b;
  font-size: 20px;
}

.training-page .training-test-run-head > div:first-child strong {
  color: #b86410;
  font-variant-numeric: tabular-nums;
}

.training-page .training-test-question {
  padding: 4px 0 0;
}

.training-page .training-test-question-text {
  margin-top: 0;
}

.training-page .training-test-hint {
  margin: 14px 0 12px;
  color: #697981;
  font-size: 13px;
}

.training-page .training-test-options {
  display: grid;
  gap: 9px;
}

.training-page .training-test-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #cfdbe1;
  border-radius: 7px;
  background: #ffffff;
  color: #26343d;
  cursor: pointer;
}

.training-page .training-test-option:hover {
  border-color: #b88a35;
  background: #fffaf0;
}

.training-page .training-test-option input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #df8e1f;
}

.training-page .training-test-custom-answer {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  color: #4a5a64;
  font-size: 13px;
  font-weight: 700;
}

.training-page .training-test-custom-answer input {
  height: 42px;
  padding: 0 12px;
  border: 1px solid #c7d2d8;
  border-radius: 6px;
  background: #ffffff;
  color: #1e2d35;
  font: inherit;
}

.training-page .training-test-question-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.training-page .training-test-question-actions .training-nav-button:last-child {
  justify-self: end;
}

.training-page .training-test-result {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #d4dde1;
  border-radius: 10px;
  background: #f8fafb;
}

.training-page .training-test-result.is-passed {
  border-color: #d3a24c;
  background: #fff9eb;
}

.training-page .training-test-result.is-failed {
  border-color: #d7dde1;
  background: #f7f9fa;
}

.training-page .training-test-result-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.training-page .training-test-cooldown {
  padding: 10px 12px;
  border-left: 3px solid #df8e1f;
  background: #fff8e4;
  color: #5e4b1f;
}

.training-page .training-test-loading {
  padding: 22px;
  color: #64747e;
  text-align: center;
}

@media (max-width: 1100px) {
  .test-editor-attempt-settings-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .training-page .training-test-result-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .test-editor-attempt-settings-grid,
  .training-page .training-test-run-head,
  .training-page .training-test-result-grid,
  .training-page .training-test-question-actions {
    grid-template-columns: 1fr;
  }

  .training-page .training-test-question-actions .training-nav-button:last-child {
    justify-self: stretch;
  }

  .training-page .training-test-start,
  .training-page .training-test-submit {
    width: 100%;
  }
}

/* v138: самостоятельный экран прохождения теста. */
.training-page .training-test-intro-compact {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.training-page .training-test-intro-compact .training-test-cooldown {
  flex: 1 1 auto;
  margin: 0;
}

.training-page .training-layout.is-test-mode {
  min-height: 100vh;
  display: block;
  background: #eef1f3;
}

.training-page .training-layout.is-test-mode .training-test-mode-workspace {
  min-height: 100vh;
  margin: 0 !important;
  padding: 22px 16px 26px;
  background: #eef1f3;
  box-sizing: border-box;
}

.training-page .training-layout.is-test-mode .training-test-mode-wrap {
  width: min(1200px, calc(100vw - 32px)) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  background: transparent;
}

.training-page .training-layout.is-test-mode .training-test-card {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.training-page .training-layout.is-test-mode .training-test-run {
  display: grid;
  grid-template-rows: auto 550px 170px auto;
  gap: 14px;
  min-height: calc(100vh - 48px);
}

.training-page .training-layout.is-test-mode .training-test-run-head {
  width: min(1200px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 auto;
}

.training-page .training-layout.is-test-mode .training-test-run-head > div {
  min-height: 54px;
  padding: 8px 14px;
  border: 1px solid #d4dde2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(23, 37, 47, 0.045);
}

.training-page .training-layout.is-test-mode .training-test-run-head span {
  font-size: 12px;
}

.training-page .training-layout.is-test-mode .training-test-run-head strong {
  font-size: 20px;
  line-height: 1.1;
}

.training-page .training-layout.is-test-mode .training-test-question {
  width: min(1200px, calc(100vw - 32px));
  height: 550px;
  margin: 0 auto;
  padding: 28px 32px;
  overflow: auto;
  border: 1px solid #d4dde2;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(23, 37, 47, 0.06);
  box-sizing: border-box;
}

.training-page .training-layout.is-test-mode .training-test-question-text {
  min-height: 0;
  margin: 0;
}

.training-page .training-layout.is-test-mode .training-test-hint {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid #edf1f3;
}

.training-page .training-layout.is-test-mode .training-test-answer-panel {
  width: min(1200px, calc(100vw - 32px));
  height: 170px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.training-page .training-layout.is-test-mode .training-test-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(50px, 1fr);
  gap: 10px 12px;
  height: 100%;
}

.training-page .training-layout.is-test-mode .training-test-options.has-six-options {
  grid-auto-rows: minmax(48px, 1fr);
}

.training-page .training-layout.is-test-mode .training-test-option {
  min-height: 0;
  height: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  background: #ffffff;
  box-sizing: border-box;
}

.training-page .training-layout.is-test-mode .training-test-option span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
}

.training-page .training-layout.is-test-mode .training-test-custom-answer {
  margin-top: 10px;
}

.training-page .training-layout.is-test-mode .training-test-question-actions {
  width: min(1200px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 250px minmax(250px, 1fr) 250px;
  align-items: center;
  gap: 14px;
  margin: 0 auto;
}

.training-page .training-layout.is-test-mode .training-test-question-actions .training-test-submit {
  justify-self: center;
  min-width: 250px;
}

.training-page .training-layout.is-test-mode .training-test-question-actions .training-nav-button:last-child {
  justify-self: end;
}

@media (max-height: 820px) {
  .training-page .training-layout.is-test-mode .training-test-run {
    grid-template-rows: auto minmax(360px, 1fr) 150px auto;
  }

  .training-page .training-layout.is-test-mode .training-test-question {
    height: auto;
  }

  .training-page .training-layout.is-test-mode .training-test-answer-panel {
    height: 150px;
  }
}

@media (max-width: 760px) {
  .training-page .training-layout.is-test-mode .training-test-run {
    grid-template-rows: auto minmax(320px, 1fr) auto auto;
  }

  .training-page .training-layout.is-test-mode .training-test-run-head,
  .training-page .training-layout.is-test-mode .training-test-options,
  .training-page .training-layout.is-test-mode .training-test-question-actions {
    grid-template-columns: 1fr;
  }

  .training-page .training-layout.is-test-mode .training-test-answer-panel {
    height: auto;
    overflow: visible;
  }

  .training-page .training-layout.is-test-mode .training-test-question-actions .training-test-submit,
  .training-page .training-layout.is-test-mode .training-test-question-actions .training-nav-button {
    width: 100%;
    min-width: 0;
  }
}


/* =========================================================
   v142 — компактная компоновка шага «Тест» до запуска.
   Селекторы ограничены префиксом .training-page и новым
   классом .training-test-intro-card, который рендерится только
   до старта/возобновления попытки. Активный режим v138 и экран
   результата не меняются.
   ========================================================= */
.training-page .training-step-card.training-test-intro-card {
  min-height: 0 !important;
  padding: 8px 20px 12px !important;
  row-gap: 0 !important;
  gap: 0 !important;
}

/* У последнего элемента инструкции не остаётся браузерский
   нижний отступ, который ранее складывался с grid-gap карточки. */
.training-page .training-test-intro-card .training-rich-content > :last-child {
  margin-bottom: 0 !important;
}

/* До старта теста сообщение о повторной попытке и кнопка
   размещаются компактной вертикальной группой; кнопка — по центру. */
.training-page .training-test-intro-card .training-test-intro-compact {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.training-page .training-test-intro-card .training-test-cooldown {
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
}

.training-page .training-test-intro-card .training-test-start {
  justify-self: center;
}

/* Нижняя навигация должна примыкать к компактной тестовой карточке,
   а не оставлять стандартный большой интервал. */
.training-page .training-test-intro-card + .training-step-navigation {
  margin-top: 12px;
}

@media (max-width: 980px) {
  .training-page .training-step-card.training-test-intro-card {
    padding: 8px 16px 12px !important;
  }
}

/* v143: Tx / очистить форматирование — компактные строки без браузерских
   отступов p. Класс добавляется только алгоритмом очистки форматирования;
   обычные абзацы, созданные вручную, не меняются. */
.lesson-rich-editor .lesson-rich-clear-compact-block {
  margin: 0;
  line-height: inherit;
}

/* Сохраненный после очистки текст должен иметь ту же плотность в учебном экране. */
.training-page .training-rich-content .lesson-rich-clear-compact-block {
  margin: 0;
  line-height: inherit;
}

/* =========================================================
   v144 — фиксированная компактная высота информационной полосы урока.
   Применяется ко всем обычным шагам training.html: text, video, test,
   practical и результат теста. Активный полноэкранный режим попытки
   не содержит эту полосу и не меняется.

   ВАЖНО: desktop-высота блока зафиксирована на 44 px вместе с рамкой:
   42 px внутреннее содержимое + 1 px верхняя + 1 px нижняя граница.
   Не увеличивать вертикальные padding / min-height этого блока без
   отдельного согласования и проверки всех шагов.
   ========================================================= */
.training-page .training-lesson-info.training-lesson-info-bar {
  display: block !important;
  height: 44px !important;
  min-height: 44px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.training-page .training-lesson-info-bar .training-lesson-info-inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  height: 42px !important;
  min-height: 42px !important;
  padding: 3px 18px !important;
  box-sizing: border-box;
  overflow: visible;
}

/* На компактных экранах сведения могут переноситься на вторую строку.
   Там сохраняем минимальную компактную высоту, но не обрезаем контент. */
@media (max-width: 980px) {
  .training-page .training-lesson-info.training-lesson-info-bar {
    height: auto !important;
    min-height: 44px !important;
  }

  .training-page .training-lesson-info-bar .training-lesson-info-inner {
    height: auto !important;
    min-height: 42px !important;
    flex-wrap: wrap;
    padding: 4px 12px !important;
  }
}

/* =========================================================
   v145 — активное прохождение теста: убрать пустую верхнюю
   полосу и перенести подсказку к области вариантов ответа.
   Активный тест рендерится без шапки и бокового дерева,
   поэтому наследуемый desktop padding обычной оболочки здесь
   запрещён. Все правила ограничены .training-page.
   ========================================================= */
.training-page .training-layout.is-test-mode {
  padding-top: 0 !important;
}

/* Верхний край первой строки статусов должен иметь тот же
   компактный отступ, что и промежутки между рабочими блоками. */
.training-page .training-layout.is-test-mode .training-test-mode-workspace {
  padding-top: 14px;
}

/* Подсказка больше не находится внутри прокручиваемого окна вопроса.
   Она занимает отдельную низкую строку непосредственно над вариантами. */
.training-page .training-layout.is-test-mode .training-test-answer-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
}

.training-page .training-layout.is-test-mode .training-test-hint {
  min-height: 28px;
  margin: 0;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid #d9e1e5;
  border-radius: 6px;
  background: #f8fafb;
  color: #697981;
  font-size: 12px;
  line-height: 1.25;
}

/* Для пяти-шести вариантов сохраняем три полноценные строки ответов:
   подсказка добавляется без сжатия карточек выбора. */
.training-page .training-layout.is-test-mode .training-test-run.has-six-options {
  grid-template-rows: auto 550px 204px auto;
}

.training-page .training-layout.is-test-mode .training-test-answer-panel.has-six-options {
  height: 204px;
}

@media (max-height: 820px) {
  .training-page .training-layout.is-test-mode .training-test-run.has-six-options {
    grid-template-rows: auto minmax(360px, 1fr) 184px auto;
  }

  .training-page .training-layout.is-test-mode .training-test-answer-panel.has-six-options {
    height: 184px;
  }
}

@media (max-width: 760px) {
  .training-page .training-layout.is-test-mode .training-test-run.has-six-options {
    grid-template-rows: auto minmax(320px, 1fr) auto auto;
  }

  .training-page .training-layout.is-test-mode .training-test-answer-panel.has-six-options {
    height: auto;
  }
}

/* =========================================================
   v146 — фиксированная desktop-компоновка активной попытки теста.

   Назначение зон:
   1) статусные ячейки — компактные, строго однострочные;
   2) окно вопроса — НЕИЗМЕНЯЕМАЯ рабочая область 1200 × 550 px;
   3) варианты — всегда резерв из 3 рядов × 2 колонки;
   4) кнопки — закреплены у нижней границы рабочей области.

   ВАЖНО: не менять 1200 × 550 px, координаты окна вопроса,
   высоты статусных ячеек, панель ответов и позицию кнопок
   без отдельного согласования владельца проекта.
   ========================================================= */
@media (min-width: 761px) {
  .training-page .training-layout.is-test-mode .training-test-run {
    position: relative;
    display: block;
    height: calc(100dvh - 40px);
    min-height: 820px;
  }

  /* Зелёная зона: три однострочные статусные ячейки. */
  .training-page .training-layout.is-test-mode .training-test-run-head {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1200px, calc(100vw - 32px));
    height: 30px;
    min-height: 30px;
    margin: 0;
    transform: translateX(-50%);
    box-sizing: border-box;
  }

  .training-page .training-layout.is-test-mode .training-test-run-head > div {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    min-height: 30px;
    padding: 0 12px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
  }

  .training-page .training-layout.is-test-mode .training-test-run-head > div:first-child strong {
    color: #b86410;
  }

  .training-page .training-layout.is-test-mode .training-test-run-head span {
    flex: 0 1 auto;
    overflow: hidden;
    color: #6c7a83;
    font-size: 11px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .training-page .training-layout.is-test-mode .training-test-run-head strong {
    flex: 0 0 auto;
    color: #23323b;
    font-size: 18px;
    line-height: 1;
    white-space: nowrap;
  }

  /* Голубая зона: неизменяемое окно вопроса 1200 × 550 px. */
  .training-page .training-layout.is-test-mode .training-test-question {
    position: absolute;
    top: 42px;
    left: 50%;
    width: min(1200px, calc(100vw - 32px));
    height: 550px !important;
    min-height: 550px !important;
    max-height: 550px !important;
    margin: 0;
    transform: translateX(-50%);
  }

  /* Панель вариантов начинается сразу после неизменяемого окна вопроса.
     Её высота рассчитана на информационную строку и 3 одинаковых ряда. */
  .training-page .training-layout.is-test-mode .training-test-answer-panel,
  .training-page .training-layout.is-test-mode .training-test-answer-panel.has-six-options {
    position: absolute;
    top: 604px;
    left: 50%;
    width: min(1200px, calc(100vw - 32px));
    height: 166px !important;
    min-height: 166px !important;
    max-height: 166px !important;
    grid-template-rows: 24px 136px;
    gap: 6px;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(-50%);
  }

  .training-page .training-layout.is-test-mode .training-test-hint {
    height: 24px;
    min-height: 24px;
    margin: 0;
    padding: 4px 10px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Резерв всегда содержит 3 строки по 2 ячейки.
     При четырёх ответах третий ряд сохраняется пустым. */
  .training-page .training-layout.is-test-mode .training-test-options,
  .training-page .training-layout.is-test-mode .training-test-options.has-six-options {
    grid-template-rows: repeat(3, 40px);
    grid-auto-rows: 40px;
    grid-auto-flow: row;
    align-content: start;
    gap: 8px 12px;
    height: 136px;
  }

  .training-page .training-layout.is-test-mode .training-test-option {
    height: 40px;
    min-height: 40px;
    padding: 7px 12px;
  }

  /* Красная зона: панель операций закреплена у нижнего края viewport. */
  .training-page .training-layout.is-test-mode .training-test-question-actions {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: min(1200px, calc(100vw - 32px));
    height: 40px;
    min-height: 40px;
    margin: 0;
    transform: translateX(-50%);
    box-sizing: border-box;
  }

  .training-page .training-layout.is-test-mode .training-test-question-actions .training-nav-button,
  .training-page .training-layout.is-test-mode .training-test-question-actions .training-test-submit {
    height: 40px;
    min-height: 40px;
  }
}

/* =========================================================
   v149 — Библиотека шаблонов и компактный выбор текста перед тестом.
   Текст шаблона хранится отдельно, но каждый шаг сохраняет собственную
   копию HTML, поэтому изменения библиотеки не переписывают старые шаги.
   ========================================================= */
.content-template-library-panel {
  display: grid;
  gap: 16px;
}

.content-template-actions {
  margin: 0;
}

.content-template-list {
  display: grid;
  gap: 10px;
}

.content-template-list-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px solid #d7e0e5;
  border-radius: 10px;
  background: #fbfcfd;
  padding: 14px 16px;
}

.content-template-list-card.is-deleted {
  opacity: 0.6;
}

.content-template-list-main {
  min-width: 0;
}

.content-template-list-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.content-template-list-title-row strong {
  color: #1f2f39;
  font-size: 16px;
}

.content-template-list-main p {
  margin: 5px 0 0;
  color: #6a7881;
  font-size: 13px;
}

.content-template-default-badge,
.content-template-deleted-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.content-template-default-badge {
  border: 1px solid #e2b454;
  background: #fff6dd;
  color: #765214;
}

.content-template-deleted-badge {
  border: 1px solid #e0b2b2;
  background: #fff0f0;
  color: #9a3434;
}

.content-template-list-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.content-template-editor {
  border: 1px solid #d6e0e6;
  border-radius: 10px;
  background: #ffffff;
  padding: 18px;
}

.content-template-editor-head h3 {
  margin: 0;
  color: #1f2f39;
  font-size: 20px;
}

.content-template-editor-head p {
  margin: 5px 0 16px;
  color: #66757f;
  font-size: 13px;
  line-height: 1.45;
}

.content-template-editor-fields {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, 0.8fr);
  gap: 16px;
  align-items: end;
  margin-bottom: 16px;
}

.content-template-default-option {
  display: flex;
  gap: 9px;
  align-items: center;
  min-height: 42px;
  border: 1px solid #e0e7eb;
  border-radius: 7px;
  padding: 10px 12px;
  color: #384854;
  font-size: 13px;
  font-weight: 750;
}

.content-template-default-option input {
  width: 16px;
  height: 16px;
  accent-color: #d68e1b;
}

.content-template-editor-text {
  display: grid;
  gap: 8px;
}

.content-template-editor-text-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
}

.content-template-editor-text-head strong {
  color: #293943;
}

.content-template-editor-text-head span {
  color: #71808a;
  font-size: 12px;
}

.content-template-rich-editor {
  min-height: 280px;
  max-height: 540px;
  overflow: auto;
}

.content-template-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

#adminContentTemplateSaveButton.is-dirty {
  box-shadow: 0 0 0 2px rgba(214, 142, 27, 0.2);
}

.lesson-test-intro-template-section {
  gap: 12px;
}

.lesson-test-intro-template-controls {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
  gap: 12px 16px;
  align-items: end;
}

.lesson-test-intro-template-select-field {
  min-width: 0;
}

.lesson-test-intro-template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lesson-test-intro-template-actions .button {
  min-height: 36px;
}

.lesson-test-intro-template-state {
  margin: 0;
  border-left: 3px solid #d99620;
  background: #fff8e8;
  padding: 9px 12px;
  color: #665425;
  font-size: 13px;
  line-height: 1.45;
}

.lesson-test-intro-template-preview[hidden] {
  display: none !important;
}

.lesson-test-intro-template-preview {
  max-height: 340px;
  overflow: auto;
  border: 1px solid #d7e1e6;
  border-radius: 8px;
  background: #f9fbfc;
  padding: 16px 18px;
}

/*
 * Локальный rich-text редактор тестового шага скрыт по умолчанию.
 * Базовый .lesson-test-intro-editor-shell работает как display:grid,
 * поэтому одного HTML-атрибута hidden недостаточно: авторское правило
 * display:grid может его перекрыть. Не удалять этот селектор.
 */
.lesson-test-intro-editor-shell[hidden] {
  display: none !important;
}

.lesson-test-intro-editor-shell:not([hidden]) {
  display: grid;
  gap: 0;
  border: 1px solid #c9d7df;
  border-radius: 8px;
  overflow: hidden;
}

.lesson-test-intro-editor-shell .lesson-text-toolbar {
  position: static !important;
  top: auto !important;
  border-bottom: 1px solid #d6e0e5;
}

.lesson-test-intro-editor-shell .lesson-test-step-rich-editor {
  min-height: 260px;
  border: 0;
  border-radius: 0;
}

@media (max-width: 980px) {
  .content-template-editor-fields,
  .lesson-test-intro-template-controls {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .content-template-list-card {
    grid-template-columns: 1fr;
  }

  .content-template-list-actions {
    justify-content: flex-start;
  }

  .content-template-editor-actions {
    justify-content: stretch;
    flex-direction: column;
  }

  .lesson-test-intro-template-actions {
    flex-direction: column;
  }
}


/* =========================================================
   v150 — Библиотека шаблонов: список, отдельное редактирование
   и выбор шаблона из шага «Тест».
   ========================================================= */
.content-template-library-head {
  margin: 0 !important;
  padding: 0 0 12px !important;
}

.content-template-library-head h2 {
  margin: 0 0 6px !important;
}

.content-template-library-description {
  width: 100%;
  margin: 0 !important;
  padding: 10px 14px !important;
  border-left: 3px solid #d99620;
  background: #fffaf0;
  color: #66737c !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.content-template-picker-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #e8ca82;
  border-radius: 8px;
  background: #fffaf0;
}

.content-template-picker-notice > div {
  display: grid;
  gap: 3px;
}

.content-template-picker-notice strong {
  color: #3c4a53;
}

.content-template-picker-notice span {
  color: #687781;
  font-size: 13px;
}

.content-template-list {
  display: grid;
  gap: 10px;
}

.content-template-list-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  padding: 13px 14px 13px 16px;
  border: 1px solid #d7e1e6;
  border-radius: 8px;
  background: #ffffff;
}

.content-template-list-card:hover {
  border-color: #b7c7d1;
  box-shadow: 0 3px 10px rgba(55, 76, 92, 0.08);
}

.content-template-list-main {
  min-width: 0;
}

.content-template-list-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.content-template-list-title-row strong {
  color: #263640;
  font-size: 15px;
}

.content-template-list-main p {
  margin: 5px 0 0;
  color: #73808a;
  font-size: 12px;
}

.content-template-default-badge,
.content-template-deleted-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
}

.content-template-default-badge {
  border: 1px solid #e2b64c;
  background: #fff6db;
  color: #7a5714;
}

.content-template-deleted-badge {
  border: 1px solid #e0a9a9;
  background: #fff1f1;
  color: #9b3434;
}

.content-template-actions-menu {
  position: relative;
}

.content-template-menu-toggle {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #cbd7de;
  border-radius: 6px;
  background: #ffffff;
  color: #354651;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.content-template-menu-toggle:hover,
.content-template-actions-menu.is-open .content-template-menu-toggle {
  border-color: #d58e1d;
  background: #fff8e9;
}

.content-template-action-dropdown {
  position: fixed;
  z-index: 200;
  display: none;
  min-width: 170px;
  padding: 5px;
  border: 1px solid #cdd8de;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(31, 47, 57, 0.2);
}

.content-template-actions-menu.is-open .content-template-action-dropdown {
  display: grid;
}

.content-template-action-dropdown button {
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #30414c;
  text-align: left;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.content-template-action-dropdown button:hover:not(:disabled) {
  background: #fff4dc;
}

.content-template-action-dropdown button:disabled {
  color: #a7b1b7;
  cursor: not-allowed;
}

.content-template-picker-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.content-template-picker-default-option {
  display: flex;
  max-width: 290px;
  gap: 8px;
  align-items: center;
  color: #596a75;
  font-size: 12px;
  line-height: 1.3;
}

.content-template-picker-default-option input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: #d68e1b;
}

.content-template-editor {
  border: 1px solid #d6e0e6;
  border-radius: 10px;
  background: #ffffff;
  padding: 18px;
}

.content-template-back-link {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #826019;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.content-template-back-link:hover {
  color: #bc7410;
  text-decoration: underline;
}

.content-template-editor-head h3 {
  margin: 0;
  color: #1f2f39;
  font-size: 20px;
}

.content-template-editor-head p {
  margin: 5px 0 16px;
  color: #66757f;
  font-size: 13px;
  line-height: 1.45;
}

.content-template-editor-fields {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, 0.7fr);
  gap: 16px;
  align-items: end;
  margin-bottom: 16px;
}

.content-template-editor-text {
  display: grid;
  gap: 8px;
}

.content-template-editor-text-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
}

.content-template-editor-text-head strong {
  color: #293943;
}

.content-template-editor-text-head span {
  color: #71808a;
  font-size: 12px;
}

.content-template-rich-editor-shell {
  display: grid;
  overflow: hidden;
  border: 1px solid #c9d7df;
  border-radius: 8px;
}

/* В Библиотеке шаблонов toolbar не является sticky-элементом страницы.
   Он прокручивается вместе с редактором и не сползает поверх текста. */
.content-template-rich-editor-shell .lesson-text-toolbar,
.content-template-editor .lesson-text-toolbar {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.content-template-rich-editor {
  min-height: 280px;
  max-height: 540px;
  overflow: auto;
  border: 0;
  border-radius: 0;
}

.content-template-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

#adminContentTemplateSaveButton.is-dirty {
  box-shadow: 0 0 0 2px rgba(214, 142, 27, 0.2);
}

.lesson-test-intro-template-section {
  gap: 12px;
}

.lesson-test-intro-template-controls {
  display: grid;
  grid-template-columns: minmax(220px, 0.65fr) minmax(0, 1.35fr);
  gap: 12px 16px;
  align-items: end;
}

.lesson-test-intro-template-selected {
  display: grid;
  gap: 4px;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid #d8e2e7;
  border-radius: 7px;
  background: #f9fbfc;
}

.lesson-test-intro-template-selected span {
  color: #72808a;
  font-size: 12px;
}

.lesson-test-intro-template-selected strong {
  color: #2c3c46;
  font-size: 14px;
}

.lesson-test-intro-template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lesson-test-intro-template-actions .button {
  min-height: 36px;
}

.lesson-test-intro-template-state {
  margin: 0;
  border-left: 3px solid #d99620;
  background: #fff8e8;
  padding: 9px 12px;
  color: #665425;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .content-template-editor-fields,
  .lesson-test-intro-template-controls {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .content-template-picker-notice,
  .content-template-list-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .content-template-picker-notice {
    display: grid;
  }

  .content-template-picker-row-actions,
  .lesson-test-intro-template-actions {
    justify-content: flex-start;
  }

  .content-template-picker-row-actions,
  .content-template-editor-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =========================================================
   v152 — результат теста показывается без инструкции из шаблона.
   Инструкция относится только к состоянию до запуска теста.
   ========================================================= */
.training-page .training-step-card.training-test-result-card {
  min-height: 0;
  padding: 18px 20px;
}

.training-page .training-test-result-card .training-test-result {
  min-height: 0;
  gap: 16px;
}

.training-page .training-test-result-heading {
  display: grid;
  gap: 6px;
}

.training-page .training-test-result.is-passed {
  border-color: #78ad85;
  background: #edf8ef;
}

.training-page .training-test-result.is-passed h2 {
  color: #245f35;
}

.training-page .training-test-result.is-passed > p,
.training-page .training-test-result.is-passed .training-test-result-heading > p {
  color: #3d6848;
}

.training-page .training-test-result.is-passed .training-test-result-grid > div {
  border-color: #bedbc4;
  background: rgba(255, 255, 255, 0.74);
}

.training-page .training-test-result.is-failed {
  border-color: #d98d8d;
  background: #fff0f0;
}

.training-page .training-test-result.is-failed h2 {
  color: #9b3333;
}

.training-page .training-test-result.is-failed > p,
.training-page .training-test-result.is-failed .training-test-result-heading > p {
  color: #844646;
}

.training-page .training-test-result.is-failed .training-test-result-grid > div {
  border-color: #edc2c2;
  background: rgba(255, 255, 255, 0.78);
}

.training-page .training-test-result-actions {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}

.training-page .training-test-result-actions .training-test-start {
  justify-self: auto;
}

.training-page .training-test-result.is-failed .training-test-cooldown {
  border-left-color: #bf5656;
  background: rgba(255, 255, 255, 0.66);
  color: #743d3d;
}

@media (max-width: 980px) {
  .training-page .training-step-card.training-test-result-card {
    padding: 16px;
  }
}

/* =========================================================
   v153 — единые внутренние отступы библиотек и компактная лента шагов.
   Библиотека шаблонов использует ту же рабочую геометрию, что и
   Библиотека тестов. Размер SVG-иконок шагов не меняется.
   ========================================================= */

/* Библиотека шаблонов: одинаковое внутреннее полотно с Библиотекой тестов.
   Внешняя панель остаётся прежней; 24 px создают симметричный безопасный
   отступ между краем белой ленты и всеми элементами содержимого. */
.admin-mode-panel[data-admin-mode-panel="courses"] .content-template-library-panel {
  min-height: 520px !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .content-template-library-head {
  margin: 0 0 18px !important;
  padding: 0 !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .content-template-actions {
  margin-bottom: 16px !important;
}

/* Карточки шаблонов повторяют нейтральную геометрию карточек тестов:
   та же округлость, внутренний отступ и мягкая тень. */
.admin-mode-panel[data-admin-mode-panel="courses"] .content-template-list {
  gap: 12px !important;
}

.admin-mode-panel[data-admin-mode-panel="courses"] .content-template-list-card {
  min-height: 0 !important;
  gap: 18px !important;
  padding: 16px !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
}

@media (max-width: 760px) {
  .admin-mode-panel[data-admin-mode-panel="courses"] .content-template-library-panel {
    min-height: 0 !important;
    padding: 12px !important;
  }
}

/* Верхняя лента шагов в редакторе урока: компактные кнопки 46 × 46 px.
   SVG-иконки сохраняют согласованный размер 34 × 34 px. */
body.is-lesson-editor-active .lesson-steps-strip {
  gap: 8px !important;
}

body.is-lesson-editor-active .lesson-steps-strip .lesson-step-tab {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border-radius: 7px !important;
  flex: 0 0 46px !important;
}

body.is-lesson-editor-active .lesson-steps-strip .lesson-step-tab .lesson-step-tab-icon {
  width: 34px !important;
  height: 34px !important;
}

/* Кнопка добавления выровнена по новой высоте ленты, но не меняет свою логику. */
body.is-lesson-editor-active .lesson-steps-strip .lesson-step-add {
  min-height: 46px !important;
  height: 46px !important;
  padding: 0 18px !important;
}


/* v154: практический шаг и восстановление логически удалённых шагов урока */
.lesson-practical-file-slot[data-file-id=""] {
  min-height: 94px;
}

.lesson-practical-file-actions .button-danger {
  border-color: #d78383;
  background: #fff7f7;
  color: #a13c3c;
}

.lesson-practical-file-actions .button-danger:hover {
  border-color: #b95050;
  background: #fff0f0;
}

body.is-lesson-editor-active .lesson-steps-strip .lesson-step-deleted {
  box-sizing: border-box;
  min-height: 46px;
  height: 46px;
  margin-left: 2px;
  border: 1px solid #c9d4dc;
  border-radius: 8px;
  padding: 0 14px;
  background: #f7fafc;
  color: #435466;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

body.is-lesson-editor-active .lesson-steps-strip .lesson-step-deleted:hover {
  border-color: #9db0bf;
  background: #eef4f8;
}

.lesson-deleted-steps-modal[hidden] {
  display: none !important;
}

.lesson-deleted-steps-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
}

.lesson-deleted-steps-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(160px, 1fr) auto;
  width: min(840px, calc(100vw - 40px));
  max-height: min(680px, calc(100dvh - 40px));
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid #cbd7e1;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.32);
}

.lesson-deleted-steps-head,
.lesson-deleted-steps-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}

.lesson-deleted-steps-head {
  justify-content: space-between;
  border-bottom: 1px solid #d7dee4;
  background: #f8fafc;
}

.lesson-deleted-steps-head > div {
  display: grid;
  gap: 4px;
}

.lesson-deleted-steps-head strong {
  color: #172033;
  font-size: 20px;
}

.lesson-deleted-steps-head span {
  color: #61707a;
  font-size: 13px;
}

.lesson-deleted-steps-head .editor-modal-close {
  position: static;
  font-size: 28px;
}

.lesson-deleted-steps-list {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px 18px;
  overflow: auto;
  background: #f8fafc;
}

.lesson-deleted-step-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 74px;
  padding: 13px 14px;
  border: 1px solid #d7e0e8;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.lesson-deleted-step-card-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.lesson-deleted-step-card-main > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.lesson-deleted-step-card-main strong,
.lesson-deleted-step-card-main span,
.lesson-deleted-step-card-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-deleted-step-card-main strong {
  color: #172033;
}

.lesson-deleted-step-card-main span,
.lesson-deleted-step-card-main small {
  color: #607284;
  font-size: 0.88rem;
}

.lesson-deleted-step-icon {
  width: 34px;
  height: 34px;
}

.lesson-deleted-steps-actions {
  justify-content: flex-end;
  border-top: 1px solid #d7dee4;
  background: #ffffff;
}

@media (max-width: 820px) {
  .lesson-deleted-step-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .lesson-deleted-step-card .button {
    width: 100%;
  }
}


/* =========================================================
   v158 — Библиотека и редактор Карт обучения.
   Визуально повторяет карточки Библиотеки тестов/шаблонов и
   не влияет на фиксированные размеры активного теста.
   ========================================================= */
.learning-map-library-panel {
  display: grid;
  gap: 16px;
  min-height: 520px;
  padding: 24px;
  box-sizing: border-box;
}

.learning-map-library-head {
  margin: 0 0 18px !important;
  padding: 0 !important;
}

.learning-map-library-head h2 { margin: 0 0 6px !important; }

.learning-map-library-description {
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid #4177bf;
  background: #f1f6ff;
  color: #5b6f7f;
  font-size: 13px;
  line-height: 1.45;
  box-sizing: border-box;
}

.learning-map-actions { margin: 0 0 16px !important; }

.learning-map-create-form {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(180px, 240px);
  gap: 14px 16px;
  padding: 16px;
  border: 1px solid #d6e1ec;
  border-radius: 12px;
  background: #fbfdff;
}

.learning-map-create-form[hidden] { display: none !important; }
.learning-map-create-description { grid-column: 1 / -1; }
.learning-map-create-form .course-create-actions { grid-column: 1 / -1; margin-top: 0; }

.learning-map-list { display: grid; gap: 12px; }

.learning-map-list-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid #d7e0e8;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.learning-map-list-card:hover { border-color: #b7c7d1; box-shadow: 0 5px 14px rgba(55, 76, 92, 0.1); }
.learning-map-list-card.is-deleted { opacity: 0.62; background: #fff8f8; }
.learning-map-list-main { min-width: 0; }
.learning-map-list-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.learning-map-list-title-row strong { color: #172033; font-size: 1.05rem; }
.learning-map-list-main p { margin: 6px 0 10px; color: #475569; line-height: 1.45; }
.learning-map-list-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.learning-map-list-meta span { padding: 4px 8px; border-radius: 999px; background: #eef2f6; color: #475569; font-size: 0.82rem; font-weight: 700; }
.learning-map-list-actions { flex: 0 0 auto; }
.learning-map-deleted-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border: 1px solid #e0b2b2; border-radius: 999px; background: #fff0f0; color: #9a3434; font-size: 11px; font-weight: 850; }
.learning-map-actions-menu .admin-action-dropdown { min-width: 210px; }
.learning-map-actions-menu .admin-action-button.is-danger { color: var(--danger); }

.learning-map-editor {
  display: grid;
  gap: 16px;
}
.learning-map-editor[hidden] { display: none !important; }
.learning-map-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 2px 0 16px;
  border-bottom: 1px solid #dbe5eb;
}
.learning-map-editor-head-main { min-width: 0; }
.learning-map-editor-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.learning-map-editor-head h2 { margin: 0; color: #1f2f39; font-size: 24px; line-height: 1.2; }
.learning-map-editor-head p { max-width: 790px; margin: 6px 0 0; color: #64747e; font-size: 13px; line-height: 1.45; }
.learning-map-back-button { padding: 0; border: 0; background: transparent; color: #2b66aa; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.learning-map-back-button:hover { text-decoration: underline; }
.learning-map-version-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 9px; border: 1px solid #c7d7e2; border-radius: 999px; color: #45606e; background: #f5f9fc; font-size: 12px; font-weight: 800; white-space: nowrap; }
.learning-map-version-badge.is-draft { border-color: #e5cc88; color: #87611a; background: #fff8e4; }
.learning-map-version-badge.is-published { border-color: #b6d8c0; color: #2c7043; background: #eff9f1; }
.learning-map-editor-head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }

.learning-map-meta-form,
.learning-map-version-section,
.learning-map-stages-section {
  min-width: 0;
  padding: 18px;
  border: 1px solid #d7e1e7;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(35, 54, 67, 0.035);
}
.learning-map-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.learning-map-section-heading > div { display: grid; gap: 4px; }
.learning-map-section-heading strong { color: #283943; font-size: 16px; }
.learning-map-section-heading span { max-width: 840px; color: #6e7f89; font-size: 12px; line-height: 1.45; }
.learning-map-meta-grid { display: grid; grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr); align-items: start; gap: 14px 18px; }
.learning-map-meta-grid .field { min-width: 0; }
.learning-map-meta-grid input,
.learning-map-meta-grid textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.learning-map-meta-description { min-width: 0; }
.learning-map-meta-description textarea { height: 96px; min-height: 96px; max-height: 96px; resize: none; overflow-y: auto; }

.learning-map-version-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.learning-map-version-toolbar > div { display: grid; gap: 4px; min-width: 0; }
.learning-map-version-toolbar strong { color: #283943; font-size: 16px; }
.learning-map-version-toolbar span { max-width: 760px; color: #6e7f89; font-size: 12px; line-height: 1.45; }
.learning-map-version-select { width: min(320px, 100%); flex: 0 0 min(320px, 100%); }
.learning-map-version-form { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); align-items: end; gap: 14px 18px; }
.learning-map-version-form .field { min-width: 0; }
.learning-map-version-note { min-width: 0; }

.learning-map-stages-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.learning-map-stages-head h3 { margin: 0 0 5px; color: #293943; font-size: 18px; }
.learning-map-stages-head p { max-width: 780px; margin: 0; color: #6d7c85; font-size: 13px; line-height: 1.45; }
.learning-map-stages-list { display: grid; gap: 14px; }
.learning-map-stage-card { overflow: hidden; border: 1px solid #cad8e3; border-radius: 10px; background: #fbfdff; }
.learning-map-stage-form { padding: 15px 16px 14px; border-bottom: 1px solid #dbe5eb; }
.learning-map-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.learning-map-stage-heading { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.learning-map-stage-number { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; background: #eaf3ff; color: #2b65a5; font-size: 12px; font-weight: 850; }
.learning-map-stage-heading input { min-width: 0; width: 100%; padding: 7px 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #23353f; font: inherit; font-size: 16px; font-weight: 800; }
.learning-map-stage-heading input:focus { border-color: #8fb3de; outline: 0; background: #ffffff; }
.learning-map-stage-tools,
.learning-map-stage-course-tools { display: flex; align-items: center; gap: 5px; }
.icon-mini-button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid #c8d5dd; border-radius: 6px; background: #ffffff; color: #415560; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.icon-mini-button:hover { border-color: #93a9b7; background: #f5f9fb; }
.icon-mini-button.is-danger { color: #a74343; border-color: #e2b8b8; background: #fff8f8; }
.learning-map-stage-settings { display: grid; grid-template-columns: minmax(230px, 280px) minmax(240px, 1fr) auto; align-items: end; gap: 12px 16px; margin-top: 13px; }
.learning-map-stage-settings .field { min-width: 0; }
.learning-map-stage-rule { display: grid; gap: 3px; min-height: 40px; padding: 8px 0; color: #516570; }
.learning-map-stage-rule strong { font-size: 12px; color: #4a606c; }
.learning-map-stage-rule span { font-size: 12px; line-height: 1.35; }
.learning-map-stage-save { display: flex; justify-content: flex-end; }
.learning-map-stage-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.learning-map-stage-summary span { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 8px; border-radius: 999px; background: #eef4f8; color: #4a6370; font-size: 11px; font-weight: 750; }
.learning-map-stage-advanced { margin-top: 12px; border-top: 1px dashed #c9d6de; padding-top: 10px; }
.learning-map-stage-advanced summary,
.learning-map-course-advanced summary { color: #45687f; font-size: 12px; font-weight: 800; cursor: pointer; }
.learning-map-stage-advanced .field { display: grid; margin-top: 10px; min-width: 0; }
.learning-map-stage-description textarea { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 70px; resize: vertical; }
.learning-map-stage-courses { padding: 14px 16px 16px; }
.learning-map-stage-courses-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.learning-map-stage-courses-head strong { color: #344752; font-size: 14px; }
.learning-map-stage-courses-head span { color: #71818b; font-size: 12px; }
.learning-map-stage-course-list { display: grid; gap: 8px; }
.learning-map-stage-course-row { display: grid; grid-template-columns: 26px minmax(180px, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid #dce5eb; border-radius: 8px; background: #ffffff; }
.learning-map-stage-course-order { align-self: center; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #eef3f7; color: #5f7482; font-size: 12px; font-weight: 850; }
.learning-map-stage-course-title { align-self: center; min-width: 0; display: grid; gap: 3px; }
.learning-map-stage-course-title strong { overflow: hidden; color: #283944; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.learning-map-stage-course-title span { color: #74838c; font-size: 11px; line-height: 1.35; }
.learning-map-course-advanced { grid-column: 2 / -1; margin-top: 2px; padding-top: 9px; border-top: 1px dashed #ccd8df; }
.learning-map-course-advanced-grid { display: grid; grid-template-columns: minmax(150px, 220px) minmax(160px, 220px) minmax(220px, 1fr) auto; align-items: end; gap: 10px 12px; margin-top: 10px; }
.learning-map-compact-field { min-width: 0; }
.learning-map-compact-field span { font-size: 11px; }
.learning-map-compact-field select { min-width: 0; }
.learning-map-required-check { display: flex; align-items: center; gap: 6px; align-self: center; color: #52646e; font-size: 12px; font-weight: 700; }
.learning-map-required-check input { width: 15px; height: 15px; accent-color: #2d8b52; }
.learning-map-course-save { white-space: nowrap; }
.learning-map-stage-empty { padding: 11px 12px; border: 1px dashed #bccbd4; border-radius: 7px; color: #6c7d87; font-size: 12px; }
.learning-map-add-course-form { display: grid; grid-template-columns: minmax(210px, 1.1fr) minmax(190px, 0.9fr) auto; align-items: end; gap: 10px 12px; margin-top: 12px; padding: 13px; border: 1px dashed #aebfca; border-radius: 8px; background: #f8fbfd; }
.learning-map-add-course-heading { grid-column: 1 / -1; display: grid; gap: 3px; }
.learning-map-add-course-heading strong { color: #3d5360; font-size: 13px; }
.learning-map-add-course-heading span { color: #72818b; font-size: 12px; line-height: 1.35; }
.learning-map-add-course-advanced { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .learning-map-stage-settings,
  .learning-map-course-advanced-grid,
  .learning-map-add-course-form { grid-template-columns: 1fr 1fr; }
  .learning-map-stage-save { justify-content: flex-start; }
  .learning-map-add-course-form > .button { justify-self: start; }
}

@media (max-width: 760px) {
  .learning-map-library-panel { min-height: 0; padding: 12px; }
  .learning-map-meta-grid,
  .learning-map-version-form,
  .learning-map-stage-settings,
  .learning-map-course-advanced-grid,
  .learning-map-add-course-form { grid-template-columns: 1fr; }
  .learning-map-list-card,
  .learning-map-editor-head,
  .learning-map-version-toolbar,
  .learning-map-stages-head { align-items: stretch; flex-direction: column; }
  .learning-map-list-actions { width: 100%; }
  .learning-map-list-actions .admin-actions-menu { justify-content: flex-start; }
  .learning-map-editor-head-actions { justify-content: flex-start; }
  .learning-map-version-select { width: 100%; flex-basis: auto; }
  .learning-map-stage-course-order { display: none; }
  .learning-map-stage-course-row { grid-template-columns: minmax(0, 1fr) auto; }
  .learning-map-course-advanced { grid-column: 1 / -1; }
  .learning-map-stage-course-tools { justify-content: flex-start; }
}


/* v159: individual student learning management dialog */
.student-learning-modal[hidden] {
  display: none !important;
}

.student-learning-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.student-learning-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1180px, calc(100vw - 44px));
  max-height: min(900px, calc(100vh - 44px));
  overflow: hidden;
  border: 1px solid #ccd6dd;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 24px 72px rgba(17, 24, 39, 0.28);
}

.student-learning-dialog-head,
.student-learning-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #d9e2e8;
  background: #f8fafc;
}

.student-learning-dialog-head {
  position: relative;
  min-height: 76px;
  padding-right: 58px;
}

.student-learning-dialog-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.student-learning-dialog-head strong {
  color: #172033;
  font-size: 1.08rem;
}

.student-learning-dialog-head span {
  overflow: hidden;
  color: #64748b;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-learning-dialog-body {
  min-height: 0;
  overflow: auto;
  padding: 18px 20px 22px;
  background: #ffffff;
}

.student-learning-dialog-actions {
  justify-content: flex-end;
  border-top: 1px solid #d9e2e8;
  border-bottom: 0;
}

.student-learning-summary {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.student-learning-level-card {
  display: grid;
  gap: 4px;
  min-height: 138px;
  padding: 17px 18px;
  border: 1px solid #b9dfca;
  border-radius: 12px;
  background: linear-gradient(135deg, #eefaf2, #f8fffb);
}

.student-learning-level-card span,
.student-learning-summary-meta span {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 800;
}

.student-learning-level-card strong {
  color: #0f6a40;
  font-size: 2.15rem;
  line-height: 1;
}

.student-learning-level-card small {
  color: #4b6679;
  line-height: 1.35;
}

.student-learning-summary-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.student-learning-summary-meta > div {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 138px;
  padding: 16px;
  border: 1px solid #d7e0e8;
  border-radius: 12px;
  background: #fbfdff;
}

.student-learning-summary-meta strong {
  color: #1f2937;
  line-height: 1.35;
}

.student-learning-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.student-learning-action-card {
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 16px;
  border: 1px solid #d7e0e8;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.student-learning-action-card header {
  display: grid;
  gap: 4px;
}

.student-learning-action-card h3,
.student-learning-section-head h3 {
  margin: 0;
  color: #172033;
  font-size: 1rem;
}

.student-learning-action-card p,
.student-learning-section-head p {
  margin: 0;
  color: #64748b;
  font-size: 0.86rem;
  line-height: 1.4;
}

.student-learning-action-card .field {
  gap: 5px;
}

.student-learning-action-card .field input,
.student-learning-action-card .field select,
.student-learning-action-card .field textarea {
  min-width: 0;
}

.student-learning-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #465766;
  font-size: 0.86rem;
  line-height: 1.35;
}

.student-learning-check input {
  margin-top: 2px;
  accent-color: var(--green);
}

.student-learning-section {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.student-learning-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.student-learning-section-head > span {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #edf2f7;
  color: #475569;
  font-size: 0.8rem;
  font-weight: 900;
}

.student-learning-card-list,
.student-learning-course-list,
.student-learning-history-list {
  display: grid;
  gap: 8px;
}

.student-learning-map-card,
.student-learning-course-card,
.student-learning-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid #d7e0e8;
  border-radius: 10px;
  background: #ffffff;
}

.student-learning-map-card > div:first-child,
.student-learning-course-main,
.student-learning-history-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.student-learning-map-card strong,
.student-learning-course-main strong,
.student-learning-history-row strong {
  color: #172033;
}

.student-learning-map-card span,
.student-learning-course-main > span,
.student-learning-history-row span,
.student-learning-history-row small {
  color: #64748b;
  font-size: 0.84rem;
}

.student-learning-badges,
.student-learning-grants {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.student-learning-status,
.student-learning-primary,
.student-learning-grant {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid #d7e0e8;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
}

.student-learning-status.is-available,
.student-learning-status.is-active,
.student-learning-status.is-completed {
  border-color: #b7e2c7;
  background: #effaf3;
  color: #137a45;
}

.student-learning-status.is-in-progress,
.student-learning-primary {
  border-color: #b9d6f5;
  background: #eff6ff;
  color: #1d5f9a;
}

.student-learning-status.is-locked,
.student-learning-status.is-awaiting-review {
  border-color: #eed9aa;
  background: #fff9e8;
  color: #8a6617;
}

.student-learning-status.is-revoked,
.student-learning-status.is-archived {
  border-color: #e5c9c9;
  background: #fff5f5;
  color: #9b3c3c;
}

.student-learning-grant.is-map {
  border-color: #c7d9f7;
  background: #f3f7ff;
  color: #285f9d;
}

.student-learning-grant.is-admin {
  border-color: #cce1d5;
  background: #f2fbf5;
  color: #167348;
}

.student-learning-muted {
  color: #94a3b8;
  font-size: 0.82rem;
}

.student-learning-history-row > div:last-child {
  justify-items: end;
  text-align: right;
}

.student-learning-empty,
.student-learning-warning {
  padding: 13px 15px;
  border: 1px dashed #c6d2db;
  border-radius: 10px;
  background: #f8fafc;
  color: #64748b;
  line-height: 1.45;
}

.student-learning-warning {
  border-style: solid;
  border-color: #efd3a0;
  background: #fff9e9;
  color: #7a5a16;
}

@media (max-width: 1080px) {
  .student-learning-action-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .student-learning-dialog {
    width: min(100vw - 20px, 100%);
    max-height: calc(100vh - 20px);
  }
  .student-learning-dialog-head,
  .student-learning-dialog-body,
  .student-learning-dialog-actions {
    padding-left: 14px;
    padding-right: 14px;
  }
  .student-learning-summary,
  .student-learning-summary-meta {
    grid-template-columns: 1fr;
  }
  .student-learning-map-card,
  .student-learning-course-card,
  .student-learning-history-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .student-learning-history-row > div:last-child {
    justify-items: start;
    text-align: left;
  }
}

/* =========================================================
   v160 — Личный кабинет студента / my_learning.html
   ========================================================= */
.student-cabinet-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.student-cabinet-main {
  width: min(1420px, calc(100% - 48px));
  margin: 0 auto;
  padding: 30px 0 56px;
  flex: 1 0 auto;
}

.student-cabinet-loading,
.student-cabinet-error {
  min-height: 250px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 9px;
  padding: 30px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 16px 44px rgba(24, 42, 55, 0.08);
}

.student-cabinet-loading strong,
.student-cabinet-error h1 {
  margin: 0;
  font-size: 22px;
}

.student-cabinet-loading span,
.student-cabinet-error p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.student-cabinet-hero {
  min-height: 192px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 28px;
  align-items: stretch;
  padding: 30px 32px;
  border: 1px solid #394b58;
  background:
    linear-gradient(125deg, rgba(47, 65, 77, 0.96), rgba(24, 37, 47, 0.98)),
    linear-gradient(0deg, #273945, #202e38);
  color: #ffffff;
  box-shadow: 0 16px 50px rgba(26, 43, 53, 0.18);
}

.student-cabinet-hero .eyebrow {
  margin-bottom: 10px;
}

.student-cabinet-hero h1 {
  margin: 0;
  font-size: clamp(28px, 3.1vw, 42px);
  line-height: 1.08;
}

.student-cabinet-hero p:not(.eyebrow) {
  max-width: 760px;
  margin: 15px 0 0;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
}

.student-level-card {
  min-height: 130px;
  padding: 20px;
  display: grid;
  align-content: center;
  justify-items: center;
  border: 1px solid rgba(241, 169, 41, 0.78);
  background: rgba(7, 17, 24, 0.28);
  text-align: center;
}

.student-level-card span,
.student-level-card small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.student-level-card strong {
  display: block;
  margin: 2px 0;
  color: var(--orange);
  font-size: 58px;
  line-height: 1;
}

.student-next-card {
  min-height: 74px;
  margin: 16px 0 24px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.student-next-card > div {
  display: grid;
  gap: 3px;
}

.student-next-card span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
}

.student-next-card strong {
  font-size: 17px;
}

.student-next-card small {
  color: var(--muted);
}

.student-next-card .button {
  min-width: 178px;
}

.student-cabinet-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

.student-cabinet-primary {
  min-width: 0;
  display: grid;
  gap: 20px;
}

.student-cabinet-section,
.student-side-card {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 10px 32px rgba(24, 42, 55, 0.06);
}

.student-cabinet-section {
  padding: 24px;
}

.student-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.student-section-kicker {
  margin: 0 0 5px;
  color: var(--orange-strong);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.student-section-head h2 {
  margin: 0;
  font-size: 23px;
  line-height: 1.2;
}

.student-section-head p:not(.student-section-kicker) {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.student-map-version,
.student-section-count {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.student-stage-list {
  display: grid;
  gap: 14px;
}

.student-stage-card {
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fbfcfd;
}

.student-stage-head {
  padding: 16px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: #f2f5f7;
}

.student-stage-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--orange-strong);
  background: var(--orange);
  color: #1d2830;
  font-weight: 700;
}

.student-stage-head h3,
.student-stage-head p {
  margin: 0;
}

.student-stage-head h3 {
  font-size: 17px;
}

.student-stage-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.student-stage-level {
  align-self: start;
  padding: 6px 8px;
  border: 1px solid #b8c3ca;
  background: #ffffff;
  color: #43525c;
  font-size: 12px;
  white-space: nowrap;
}

.student-stage-courses,
.student-course-list {
  display: grid;
  gap: 9px;
}

.student-stage-courses {
  padding: 12px;
}

.student-course-card {
  min-width: 0;
  padding: 14px 15px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid #c8d1d7;
  background: #ffffff;
}

.student-course-card.is-locked {
  border-color: #cfd6da;
  background: #f5f7f8;
}

.student-course-card.is-completed {
  border-color: rgba(47, 157, 88, 0.45);
  background: rgba(47, 157, 88, 0.06);
}

.student-course-card-title-row {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.student-course-card h3,
.student-course-card p {
  margin: 0;
}

.student-course-card h3 {
  font-size: 16px;
  line-height: 1.3;
}

.student-course-card p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

.student-course-status {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid currentColor;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.student-course-status.is-available { color: #216f40; background: #e7f4eb; }
.student-course-status.is-in_progress { color: #176b91; background: #e8f4fa; }
.student-course-status.is-completed { color: #216f40; background: #e7f4eb; }
.student-course-status.is-awaiting_review { color: #8b5b0c; background: #fff6df; }
.student-course-status.is-locked { color: #65737d; background: #edf1f3; }

.student-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.student-course-meta span {
  padding: 4px 7px;
  border: 1px solid #d7dfe4;
  color: #586873;
  background: #f8fafb;
  font-size: 11px;
}

.student-course-hint {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.student-course-actions {
  align-self: stretch;
  display: flex;
  align-items: center;
}

.student-course-open {
  min-width: 142px;
}

.student-course-open:disabled,
.student-next-card .button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.student-self-study-section {
  background: linear-gradient(135deg, #ffffff, #f8fbfd);
}

.student-subsection {
  margin: 0 0 18px;
}

.student-subsection h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.student-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.student-catalog-card {
  min-height: 188px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  background: #ffffff;
}

.student-catalog-level {
  margin-bottom: 10px;
  color: var(--orange-strong);
  font-size: 12px;
  font-weight: 700;
}

.student-catalog-card h3,
.student-catalog-card p {
  margin: 0;
}

.student-catalog-card h3 {
  font-size: 17px;
  line-height: 1.28;
}

.student-catalog-card p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.student-catalog-card .button {
  min-width: 0;
  align-self: flex-start;
}

.student-empty-state {
  min-height: 94px;
  padding: 20px;
  display: flex;
  align-items: center;
  border: 1px dashed var(--line-strong);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.student-cabinet-side {
  position: sticky;
  top: 90px;
  display: grid;
  gap: 14px;
}

.student-side-card {
  padding: 18px;
}

.student-side-card h2 {
  margin: 0 0 14px;
  font-size: 17px;
}

.student-side-card dl {
  margin: 0;
  display: grid;
  gap: 0;
}

.student-side-card dl > div {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.student-side-card dt {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
}

.student-side-card dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.38;
}

.student-side-note {
  border-color: rgba(241, 169, 41, 0.7);
  background: #fffaf0;
}

.student-side-note p {
  margin: 0;
  color: #665938;
  font-size: 13px;
  line-height: 1.48;
}

.course-self-study-field {
  grid-column: span 2;
}

.course-self-study-control {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.course-self-study-control input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: var(--orange-strong);
}

.course-self-study-field small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 1040px) {
  .student-cabinet-main {
    width: min(100% - 32px, 1040px);
  }

  .student-cabinet-layout {
    grid-template-columns: 1fr;
  }

  .student-cabinet-side {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .student-cabinet-main {
    width: min(100% - 24px, 720px);
    padding-top: 18px;
  }

  .student-cabinet-hero {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .student-level-card {
    min-height: 100px;
  }

  .student-next-card,
  .student-section-head,
  .student-course-card {
    align-items: stretch;
    flex-direction: column;
  }

  .student-next-card {
    display: grid;
  }

  .student-next-card .button,
  .student-course-open {
    width: 100%;
  }

  .student-section-head {
    display: grid;
  }

  .student-map-version,
  .student-section-count {
    justify-self: start;
  }

  .student-stage-head {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .student-stage-level {
    grid-column: 2;
    justify-self: start;
  }

  .student-course-card {
    display: grid;
    grid-template-columns: 1fr;
  }

  .student-course-card-title-row {
    display: grid;
  }

  .student-course-status {
    justify-self: start;
  }

  .student-catalog-grid,
  .student-cabinet-side {
    grid-template-columns: 1fr;
  }

  .student-cabinet-section {
    padding: 16px;
  }

  .course-self-study-field {
    grid-column: span 1;
  }
}

/* v164 — student practical submission and administrator review queue. */
.training-practical-submission {
  margin-top: 16px;
  border: 1px solid #d7dee5;
  border-radius: 12px;
  padding: 16px;
  background: #f8fafc;
}
.training-practical-submission.is-awaiting { border-color: #e0c56d; background: #fff9e9; }
.training-practical-submission.is-accepted { border-color: #86c49d; background: #eff9f1; }
.training-practical-submission.is-returned { border-color: #e6b56d; background: #fff7eb; }
.training-practical-submission.is-rejected { border-color: #d88b8b; background: #fff1f1; }
.training-practical-preview-note { background: #f4f6f8; }
.training-practical-submission-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.training-practical-submission-head strong { font-size: 17px; }
.training-practical-submission-head span { border-radius: 999px; padding: 4px 9px; background: rgba(35, 50, 64, .08); font-size: 12px; font-weight: 700; white-space: nowrap; }
.training-practical-submission > p { margin: 8px 0 0; color: #536170; }
.training-practical-comment { margin-top: 12px; border-left: 3px solid #c8d4df; padding-left: 11px; }
.training-practical-comment strong { display: block; font-size: 13px; }
.training-practical-comment p { margin: 5px 0 0; white-space: pre-wrap; }
.training-practical-upload { display: grid; gap: 6px; margin-top: 13px; font-weight: 700; font-size: 13px; }
.training-practical-upload input[type="file"], .training-practical-upload textarea { width: 100%; font: inherit; font-weight: 400; }
.training-practical-upload textarea { min-height: 76px; resize: vertical; }
.training-practical-submit { margin-top: 14px; }
.training-practical-submission-files { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.training-practical-submission-files li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border: 1px solid #dce4eb; background: #fff; border-radius: 8px; }
.training-practical-submission-files li span { font-weight: 700; }
.training-practical-submission-files li small { color: #687787; }
.training-practical-submission-files li a { margin-left: auto; color: #1d5d94; font-weight: 700; }
.training-practical-submission-files li em { margin-left: auto; color: #a14a4a; font-style: normal; font-size: 12px; }

.admin-practical-review-panel { padding: 16px; }
.admin-practical-review-actions { align-items: flex-end; }
.admin-practical-review-actions .admin-filter { min-width: 260px; }
.admin-practical-review-list { display: grid; gap: 14px; }
.admin-practical-review-card { border: 1px solid #d9e0e7; border-radius: 12px; padding: 16px; background: #fff; box-shadow: 0 6px 18px rgba(46, 63, 78, .05); }
.admin-practical-review-card-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.admin-practical-review-card-head h3 { margin: 0; font-size: 18px; }
.admin-practical-review-card-head p { margin: 4px 0 0; color: #657383; }
.admin-practical-review-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 11px; color: #627283; font-size: 13px; }
.admin-practical-review-comment { margin-top: 14px; padding: 11px 12px; border-left: 3px solid #c9d5e0; background: #f8fafc; }
.admin-practical-review-comment p { margin: 6px 0 0; white-space: pre-wrap; }
.admin-practical-review-files-wrap { margin-top: 14px; }
.admin-practical-review-files-wrap > strong { display: block; margin-bottom: 8px; }
.admin-practical-review-files { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.admin-practical-review-files li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 11px; border-radius: 8px; background: #f7f9fb; border: 1px solid #e0e6ec; }
.admin-practical-review-files li div { display: grid; gap: 2px; }
.admin-practical-review-files li small { color: #6d7c8b; }
.admin-practical-review-decision { display: grid; gap: 12px; grid-template-columns: minmax(180px, .5fr) minmax(240px, 1fr); margin-top: 16px; padding-top: 16px; border-top: 1px solid #e0e6ec; }
.admin-practical-review-decision .field { margin: 0; }
.admin-practical-review-decision .field:last-of-type { grid-column: 1 / -1; max-width: 340px; }
.admin-practical-review-decision button { justify-self: start; align-self: end; }
.admin-practical-review-resolution { margin-top: 16px; padding: 12px; border-radius: 8px; background: #f7f9fb; display: grid; gap: 4px; }
.admin-practical-review-resolution span, .admin-practical-review-resolution small { color: #657383; }
.admin-practical-review-resolution p { margin: 4px 0 0; white-space: pre-wrap; }

@media (max-width: 780px) {
  .training-practical-submission-head, .admin-practical-review-card-head { align-items: flex-start; flex-direction: column; }
  .admin-practical-review-decision { grid-template-columns: 1fr; }
  .admin-practical-review-decision .field:last-of-type { grid-column: auto; max-width: none; }
  .admin-practical-review-files li { align-items: flex-start; flex-direction: column; }
  .training-practical-submission-files li a, .training-practical-submission-files li em { margin-left: 0; }
}
.training-practical-history { margin-top: 13px; border-top: 1px solid rgba(91, 111, 128, .18); padding-top: 10px; }
.training-practical-history summary { cursor: pointer; color: #365f84; font-weight: 700; }
.training-practical-history > div { display: grid; gap: 3px; margin-top: 9px; padding: 9px; border-radius: 7px; background: rgba(255,255,255,.68); }
.training-practical-history > div span { color: #667686; font-size: 13px; }
.training-practical-history > div p { margin: 2px 0 0; white-space: pre-wrap; }

/* v166 — учебные уведомления и серверная статистика. */
.admin-student-stats-panel { padding: 18px; }
.admin-student-stats-root { display: grid; gap: 18px; }
.learning-stat-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.learning-stat-card { min-height: 116px; padding: 15px 16px; border: 1px solid #d8e1e9; border-radius: 12px; background: #fbfdff; display: grid; align-content: start; gap: 5px; }
.learning-stat-card span { color: #627383; font-size: 13px; font-weight: 700; }
.learning-stat-card strong { color: #1d2d3c; font-size: 30px; line-height: 1; }
.learning-stat-card small { color: #758494; font-size: 12px; }
.learning-stat-card.is-warning { background: #fffaf0; border-color: #eed7a4; }
.learning-stat-layout { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; }
.learning-stat-section { border: 1px solid #d9e1e8; border-radius: 12px; background: #fff; padding: 15px; min-width: 0; }
.learning-stat-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.learning-stat-section-head h2 { margin: 0; color: #243545; font-size: 17px; }
.learning-stat-section-head > span { color: #738393; font-size: 12px; white-space: nowrap; }
.learning-level-chart { display: grid; gap: 9px; }
.learning-level-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) 28px; gap: 8px; align-items: center; color: #607284; font-size: 12px; }
.learning-level-row strong { color: #263645; text-align: right; }
.learning-level-track { height: 8px; overflow: hidden; border-radius: 99px; background: #edf2f6; }
.learning-level-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #799dbe, #bf8b2f); }
.learning-status-summary { display: grid; gap: 9px; }
.learning-status-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px dashed #e1e7ec; }
.learning-status-summary > div:last-child { padding-bottom: 0; border-bottom: 0; }
.learning-status-summary strong { font-size: 18px; color: #243545; }
.learning-stat-dl { margin: 0; display: grid; gap: 8px; }
.learning-stat-dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px dashed #e1e7ec; }
.learning-stat-dl div:last-child { padding-bottom: 0; border-bottom: 0; }
.learning-stat-dl dt { color: #647584; font-size: 13px; }
.learning-stat-dl dd { margin: 0; color: #243545; font-size: 17px; font-weight: 800; }
.learning-stat-table-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.learning-stat-table-wrap { overflow: auto; }
.learning-stat-table { width: 100%; min-width: 540px; border-collapse: collapse; }
.learning-stat-table th, .learning-stat-table td { padding: 9px 8px; text-align: left; border-bottom: 1px solid #e6ebef; color: #314555; font-size: 13px; }
.learning-stat-table th { color: #617383; font-size: 11px; text-transform: uppercase; letter-spacing: .035em; }
.learning-stat-table td small { color: #7a8997; white-space: nowrap; }
.learning-stat-awaiting { padding-bottom: 10px; }
.learning-awaiting-list { display: grid; gap: 8px; }
.learning-awaiting-list article { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 11px; border: 1px solid #e5e9ed; border-radius: 9px; background: #fafcfd; }
.learning-awaiting-list article div { display: grid; gap: 3px; }
.learning-awaiting-list article span, .learning-awaiting-list time { color: #687887; font-size: 12px; }
.admin-learning-notification-card { display: grid; gap: 12px; align-content: start; }
.admin-learning-notification-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-learning-notification-card-head p { margin: 5px 0 0; color: #667785; font-size: 13px; }
.admin-learning-notification-count { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; color: #80510a; font-size: 13px; font-weight: 800; background: #fff1cd; border: 1px solid #e5c57c; border-radius: 999px; }
.admin-learning-notification-list { display: grid; gap: 9px; max-height: 390px; overflow: auto; }
.admin-learning-notification { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 10px; padding: 10px; border: 1px solid #e0e6eb; border-radius: 9px; background: #fbfdff; }
.admin-learning-notification.is-read { opacity: .68; }
.admin-learning-notification-marker { min-height: 100%; border-radius: 9px; background: #8ca5bb; }
.admin-learning-notification-marker.is-warning { background: #c99635; }
.admin-learning-notification-marker.is-success { background: #4d9b71; }
.admin-learning-notification-marker.is-danger { background: #bf6262; }
.admin-learning-notification strong { display: block; color: #293c4c; font-size: 13px; }
.admin-learning-notification p { margin: 4px 0; color: #617382; font-size: 12px; line-height: 1.35; }
.admin-learning-notification small { color: #82909b; font-size: 11px; }
.student-notifications-button { position: relative; display: inline-flex; align-items: center; gap: 7px; }
.student-notifications-button span { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; background: #b87824; border-radius: 999px; }
.student-learning-events { scroll-margin-top: 22px; }
.student-events-actions { display: flex; align-items: center; gap: 9px; }
.student-section-count.is-unread { color: #7a500b; background: #fff1cf; border-color: #e6c173; }
.student-event-list { display: grid; gap: 9px; }
.student-event-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 11px 12px; border: 1px solid #dce5eb; border-radius: 10px; background: #fbfdff; }
.student-event-item.is-read { opacity: .72; }
.student-event-item.is-success { border-color: #cfe4d7; background: #f6fbf8; }
.student-event-item.is-warning { border-color: #efdbad; background: #fffaf0; }
.student-event-item.is-danger { border-color: #ecc9c9; background: #fff7f7; }
.student-event-icon { display: grid; place-items: center; width: 30px; height: 30px; color: #547188; font-weight: 900; background: #eaf1f6; border-radius: 50%; }
.student-event-item.is-success .student-event-icon { color: #397952; background: #def0e4; }
.student-event-item.is-warning .student-event-icon { color: #855b0f; background: #fff0ce; }
.student-event-item.is-danger .student-event-icon { color: #a24b4b; background: #f9e1e1; }
.student-event-item strong { color: #263a4a; font-size: 14px; }
.student-event-item p { margin: 4px 0 5px; color: #607282; font-size: 13px; line-height: 1.4; white-space: pre-wrap; }
.student-event-item time { color: #82909b; font-size: 12px; }
@media (max-width: 1050px) { .learning-stat-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .learning-stat-layout, .learning-stat-table-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .learning-stat-overview-grid { grid-template-columns: 1fr; } .learning-awaiting-list article { align-items: flex-start; flex-direction: column; } .student-events-actions { width: 100%; justify-content: space-between; } .student-section-head:has(.student-events-actions) { align-items: flex-start; flex-direction: column; } }


/* v168 — blind review: no identity is rendered in the reviewer contour. */
.admin-practical-blind-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d7e3ed;
  background: #f3f8fc;
  color: #426176;
  font-size: 13px;
  line-height: 1.45;
}
.training-practical-anonymous-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #c8d9e6;
  background: #f1f7fb;
  color: #385b73;
  font-size: 13px;
  line-height: 1.45;
}
.training-practical-anonymous-note strong { color: #214f70; }
@media (max-width: 760px) { .admin-practical-blind-note { grid-column: auto; } }


/* v169 — staff roles and audit */
.admin-permissions-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0; }
.admin-role-rule-card { min-height:132px; }
.admin-permissions-card { border:1px solid var(--line,#dbe2e7); background:#fff; border-radius:12px; padding:18px; margin:16px 0; }
.admin-permissions-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.admin-permissions-card-head h2 { margin:0 0 4px; font-size:18px; }
.admin-permissions-card-head p { margin:0; color:var(--muted,#697783); }
.admin-staff-role-list { display:grid; gap:10px; }
.admin-staff-role-row { display:grid; grid-template-columns:minmax(210px,1fr) minmax(360px,1.5fr) auto; align-items:center; gap:14px; padding:14px; border:1px solid var(--line,#dbe2e7); border-radius:10px; background:#fbfcfd; }
.admin-staff-role-user { display:grid; gap:3px; min-width:0; }
.admin-staff-role-user small,.admin-staff-role-user span { color:var(--muted,#697783); overflow-wrap:anywhere; }
.admin-staff-role-controls { display:flex; flex-wrap:wrap; gap:8px 12px; }
.admin-role-checkbox { display:inline-flex; align-items:center; gap:6px; font-size:13px; white-space:nowrap; }
.admin-audit-log-list { display:grid; gap:8px; max-height:460px; overflow:auto; }
.admin-audit-entry { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line,#dbe2e7); }
.admin-audit-entry:last-child { border-bottom:0; }
.admin-audit-entry strong { display:block; }
.admin-audit-entry p,.admin-audit-entry small { margin:4px 0 0; color:var(--muted,#697783); }
.admin-audit-entry time { flex:0 0 auto; color:var(--muted,#697783); font-size:12px; }
@media (max-width: 960px) { .admin-permissions-layout { grid-template-columns:1fr; } .admin-staff-role-row { grid-template-columns:1fr; } .admin-permissions-card-head,.admin-audit-entry { align-items:flex-start; flex-direction:column; } }

/* =========================================================
   v170 — Личный кабинет студента в стиле рабочей панели
   ========================================================= */
.student-cabinet-page-v170 {
  min-height: 100dvh;
  background: #ffffff;
  color: #1f2a30;
}

.student-topbar {
  height: 50px;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) auto;
  align-items: center;
  background: #17191b;
  color: #ffffff;
  border-bottom: 1px solid #0e1012;
}

.student-topbar-brand {
  height: 50px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  text-decoration: none;
}

.student-topbar-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.22);
  font-size: 11px;
  font-weight: 800;
}

.student-topbar-name {
  color: rgba(255,255,255,.82);
  font-size: 13px;
}

.student-topbar-tabs {
  height: 50px;
  display: flex;
  align-items: stretch;
}

.student-topbar-tabs a {
  min-width: 150px;
  padding: 0 22px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-weight: 700;
}

.student-topbar-tabs a.is-active {
  background: #23282c;
  color: #ffffff;
}

.student-account-menu {
  position: relative;
  padding-right: 14px;
}

.student-account-trigger {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: #8d5264;
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
}

.student-account-trigger::after {
  content: "⋯";
  position: absolute;
  bottom: -2px;
  right: -6px;
  color: #a7b6ff;
  font-size: 20px;
  line-height: 1;
}

.student-account-trigger i {
  position: absolute;
  top: -5px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #41ad57;
  color: #ffffff;
  font-size: 11px;
  font-style: normal;
}

.student-account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 12px;
  z-index: 50;
  min-width: 190px;
  padding: 8px;
  border: 1px solid #cfd7dc;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(20,34,45,.18);
}

.student-account-dropdown button {
  width: 100%;
  padding: 10px 11px;
  border: 0;
  background: transparent;
  color: #1f2a30;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.student-account-dropdown button:hover,
.student-account-dropdown button.is-active {
  background: #f1f5f7;
}

.student-account-dropdown hr {
  border: 0;
  border-top: 1px solid #e0e5e8;
  margin: 6px 0;
}

.student-shell {
  min-height: calc(100dvh - 50px);
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}

.student-sidebar {
  min-height: calc(100dvh - 50px);
  padding: 18px 18px 28px;
  border-right: 1px solid #d9e0e4;
  background: #f6f8f9;
}

.student-sidebar-hero {
  height: 64px;
  margin-bottom: 22px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 24% 40%, rgba(87,164,110,.22), transparent 36%),
    linear-gradient(135deg, #dfe8ff, #edf3ff 60%, #e8f2ef);
}

.student-sidebar-link {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: #42505a;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.student-sidebar-link::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid #7e8c95;
  border-radius: 4px;
  background: #ffffff;
}

.student-sidebar-link.is-active,
.student-sidebar-link:hover {
  color: #2b8a43;
  background: #eef7f0;
}

.student-cabinet-page-v170 .student-cabinet-main {
  width: min(1000px, calc(100% - 72px));
  margin: 0 auto;
  padding: 30px 0 64px;
}

.student-page-title {
  margin: 0 0 28px;
}

.student-page-title h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 500;
}

.student-page-title p {
  margin: 6px 0 0;
  color: #65737d;
  line-height: 1.45;
}

.student-learning-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 24px;
  margin-bottom: 34px;
}

.student-feature-course,
.student-stat-card {
  min-height: 246px;
  border: 1px solid #e0e5e8;
  border-radius: 12px;
  background: #ffffff;
}

.student-feature-course {
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #f4f7ff;
}

.student-feature-course h2,
.student-stat-card h2,
.student-dashboard-section h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}

.student-feature-course p {
  margin: 10px 0 20px;
  color: #53616b;
  line-height: 1.45;
}

.student-feature-course small {
  display: block;
  margin-top: 8px;
  color: #303a40;
  font-weight: 700;
}

.student-feature-course .button {
  align-self: flex-start;
  min-width: 150px;
}

.student-stat-card {
  padding: 26px;
}

.student-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.student-stat-grid div {
  min-height: 74px;
  padding: 13px;
  border: 1px solid #e1e7ea;
  border-radius: 8px;
  background: #fbfcfd;
}

.student-stat-grid strong,
.student-week-card strong {
  display: block;
  font-size: 26px;
  line-height: 1;
}

.student-stat-grid span,
.student-week-card span {
  display: block;
  margin-top: 7px;
  color: #65737d;
  font-size: 13px;
}

.student-week-card {
  border-top: 1px solid #edf1f3;
  padding-top: 17px;
}

.student-dashboard-section {
  margin-top: 32px;
}

.student-dashboard-section > h2 {
  margin-bottom: 14px;
}

.student-subtitle {
  margin: 18px 0 10px;
  color: #53616b;
  font-size: 15px;
}

.student-learn-list {
  display: grid;
  gap: 10px;
}

.student-learn-row {
  min-height: 68px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #edf1f3;
}

.student-learn-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #e8eef2;
  color: #2d3a42;
  font-weight: 800;
}

.student-learn-row.is-completed .student-learn-icon,
.student-learn-row.is-available .student-learn-icon,
.student-learn-row.is-in_progress .student-learn-icon {
  background: #e9f6ec;
  color: #2b8a43;
}

.student-learn-titleline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.student-learn-titleline h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}

.student-learn-main p {
  margin: 4px 0 8px;
  color: #65737d;
  font-size: 13px;
  line-height: 1.35;
}

.student-learn-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #53616b;
  font-size: 12px;
}

.student-course-progress {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4e9ed;
}

.student-course-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #47aa5d;
}

.student-course-status {
  padding: 4px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.student-course-status.is-available { color: #216f40; background: #e7f4eb; }
.student-course-status.is-in_progress { color: #176b91; background: #e8f4fa; }
.student-course-status.is-completed { color: #216f40; background: #e7f4eb; }
.student-course-status.is-awaiting_review { color: #8b5b0c; background: #fff6df; }
.student-course-status.is-locked { color: #65737d; background: #edf1f3; }

.student-map-card {
  display: grid;
  gap: 16px;
}

.student-map-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.student-stage-compact {
  padding: 16px;
  border: 1px solid #dde4e8;
  border-radius: 12px;
  background: #ffffff;
}

.student-stage-compact header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.student-stage-compact header span {
  color: #65737d;
  font-size: 13px;
}

.student-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.student-catalog-card {
  min-height: 176px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #dde4e8;
  border-radius: 12px;
  background: #ffffff;
}

.student-catalog-level {
  margin-bottom: 8px;
  color: #2b8a43;
  font-size: 12px;
  font-weight: 800;
}

.student-catalog-card h3,
.student-catalog-card p {
  margin: 0;
}

.student-catalog-card p {
  margin-top: 6px;
  color: #65737d;
  font-size: 13px;
  line-height: 1.42;
}

.student-empty-state {
  min-height: 74px;
  padding: 18px;
  display: flex;
  align-items: center;
  border: 1px dashed #cfd7dc;
  background: #f8fafb;
  color: #65737d;
}

.student-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.student-section-head h2,
.student-section-head p {
  margin: 0;
}

.student-section-head p {
  margin-top: 6px;
  color: #65737d;
}

.student-event-list {
  display: grid;
  gap: 8px;
}

.student-event-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 13px;
  border: 1px solid #dde4e8;
  border-radius: 10px;
  background: #ffffff;
}

.student-event-item.is-unread {
  border-color: #f1a929;
  background: #fffaf0;
}

.student-event-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf2f5;
  color: #2d3a42;
  font-weight: 800;
}

.student-event-item strong,
.student-event-item p,
.student-event-item time {
  margin: 0;
}

.student-event-item p {
  margin-top: 4px;
  color: #53616b;
}

.student-event-item time {
  display: block;
  margin-top: 5px;
  color: #8a969e;
  font-size: 12px;
}

.student-profile-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.student-profile-card,
.student-profile-form {
  border: 1px solid #dde4e8;
  border-radius: 12px;
  background: #ffffff;
}

.student-profile-card {
  padding: 26px;
  text-align: center;
}

.student-avatar-big {
  width: 150px;
  height: 150px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  background: #8d5264;
  color: #ffffff;
  font-size: 44px;
}

.student-profile-card h2,
.student-profile-card p {
  margin: 0;
}

.student-profile-card p {
  margin-top: 5px;
  color: #65737d;
}

.student-profile-card dl {
  margin: 22px 0 0;
  border-top: 1px solid #edf1f3;
}

.student-profile-card dl div {
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #edf1f3;
}

.student-profile-card dt,
.student-profile-card dd {
  margin: 0;
}

.student-profile-card dt { color: #65737d; }
.student-profile-card dd { font-weight: 800; }

.student-profile-form {
  padding: 28px;
}

.student-profile-form h2 {
  margin: 0 0 18px;
}

.student-profile-form label {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  color: #53616b;
}

.student-profile-form input {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #cfd7dc;
  background: #f9fbfc;
  color: #1f2a30;
}

.student-profile-form p {
  margin: 18px 0 0;
  color: #65737d;
  line-height: 1.45;
}

.student-checkbox {
  grid-template-columns: 20px minmax(0, 1fr) !important;
}

.student-checkbox input {
  min-height: 16px;
}

@media (max-width: 1040px) {
  .student-shell { grid-template-columns: 1fr; }
  .student-sidebar { min-height: 0; display: flex; gap: 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid #d9e0e4; }
  .student-sidebar-hero { display: none; }
  .student-sidebar-link { width: auto; white-space: nowrap; }
  .student-cabinet-page-v170 .student-cabinet-main { width: min(100% - 32px, 960px); }
  .student-learning-overview,
  .student-profile-layout { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .student-topbar { grid-template-columns: 1fr auto; }
  .student-topbar-tabs { display: none; }
  .student-topbar-brand { min-width: 0; }
  .student-learning-overview,
  .student-catalog-grid { grid-template-columns: 1fr; }
  .student-learn-row { grid-template-columns: 38px minmax(0,1fr); }
  .student-learn-actions { grid-column: 2; }
  .student-learn-actions .button { width: 100%; }
  .student-profile-form label { grid-template-columns: 1fr; }
}

/* =========================================================
   v171 — Student account profile, email, password and preferences
   ========================================================= */
.student-profile-edit-form .student-form-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.student-profile-edit-form .student-form-heading h2,
.student-profile-edit-form .student-form-heading p {
  margin: 0;
}

.student-profile-edit-form .student-form-heading p,
.student-settings-help,
.student-settings-note {
  margin-top: 7px;
  color: #65737d;
  line-height: 1.45;
}

.student-form-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #edf1f3;
}

.student-settings-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.student-settings-nav {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid #dde4e8;
  border-radius: 10px;
  background: #f8fafb;
}

.student-settings-nav button {
  min-height: 38px;
  padding: 8px 11px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #52606a;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.student-settings-nav button:hover,
.student-settings-nav button.is-active {
  background: #eaf5ed;
  color: #216f40;
}

.student-settings-panel {
  padding: 28px;
  border: 1px solid #dde4e8;
  border-radius: 12px;
  background: #ffffff;
}

.student-settings-panel h2 {
  margin: 0;
  font-size: 22px;
}

.student-settings-form {
  display: grid;
  gap: 12px;
  max-width: 700px;
  margin-top: 22px;
}

.student-settings-form label {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  color: #53616b;
}

.student-settings-form input,
.student-settings-form select {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #cfd7dc;
  border-radius: 5px;
  background: #ffffff;
  color: #1f2a30;
}

.student-settings-form input:focus,
.student-settings-form select:focus,
.student-profile-edit-form input:focus {
  outline: 2px solid rgba(45, 132, 73, .2);
  border-color: #47aa5d;
}

.student-confirmation-box {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid #f0c46b;
  border-radius: 10px;
  background: #fffaf0;
}

.student-confirmation-box > strong,
.student-confirmation-box > span {
  display: block;
}

.student-confirmation-box > span {
  margin-top: 5px;
  color: #76500b;
  font-size: 13px;
}

.student-notification-form .student-checkbox {
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: start;
  padding: 8px 0;
}

.student-notification-form .student-checkbox input {
  min-height: 16px;
  width: 16px;
  margin-top: 2px;
}

.student-notification-form .student-checkbox span {
  line-height: 1.4;
}

@media (max-width: 840px) {
  .student-settings-layout { grid-template-columns: 1fr; gap: 18px; }
  .student-settings-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .student-settings-nav button { text-align: center; }
}

@media (max-width: 620px) {
  .student-profile-edit-form .student-form-heading { flex-direction: column; }
  .student-settings-panel { padding: 20px; }
  .student-settings-form label { grid-template-columns: 1fr; gap: 6px; }
  .student-settings-nav { grid-template-columns: 1fr; }
}
.student-profile-edit-form input:not([readonly]) { background: #ffffff; }

/* =========================================================
   v172 — сроки, отзыв доступов и история прохождений
   ========================================================= */
.student-learning-map-card,
.student-learning-course-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.student-learning-card-controls {
  grid-column: 1 / -1;
  margin-top: 2px;
  border-top: 1px dashed #d8e1e8;
  padding-top: 9px;
}

.student-learning-card-controls summary {
  cursor: pointer;
  color: #35536a;
  font-size: 0.84rem;
  font-weight: 800;
}

.student-learning-control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.student-learning-control-grid form {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dbe4eb;
  border-radius: 9px;
  background: #fbfdff;
}

.student-learning-control-grid .field {
  display: grid;
  gap: 4px;
}

.student-learning-control-grid .field > span {
  color: #526779;
  font-size: 0.8rem;
  font-weight: 800;
}

.student-learning-control-grid input,
.student-learning-control-grid textarea {
  width: 100%;
  box-sizing: border-box;
}

.student-learning-control-grid .student-learning-danger {
  border-color: #ebcccc;
  background: #fff8f8;
}

.student-learning-deadline,
.student-learning-run-history,
.student-deadline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 7px;
  color: #60748a;
  font-size: 0.8rem;
  line-height: 1.35;
}

.student-learning-deadline strong,
.student-deadline-meta strong {
  color: #9a3f3f;
  font-weight: 800;
}

.student-learning-deadline.is-on-track strong,
.student-deadline-meta.is-on-track strong {
  color: #167348;
}

.student-learning-run-history {
  display: grid;
  gap: 3px;
  padding-top: 7px;
}

.student-learning-run-history strong {
  color: #42566b;
  font-size: 0.81rem;
}

.student-learning-revoked-note {
  display: block;
  margin-top: 7px;
  color: #9b3c3c;
  font-size: 0.8rem;
  line-height: 1.35;
}

.student-deadline-meta {
  margin-top: 8px;
}

.student-learn-row.is-revoked {
  border-color: #e7caca;
  background: #fffafb;
}

.student-course-status.is-revoked {
  border-color: #e5c9c9;
  background: #fff5f5;
  color: #9b3c3c;
}

.student-section-note {
  margin: -4px 0 12px;
  color: #66798b;
  font-size: 0.88rem;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .student-learning-map-card,
  .student-learning-course-card {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   v174 — отдельный кадровый контур: вход, сотрудники, роли
   ========================================================= */
.admin-login-brand-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.admin-login-kind { font-size:11px; line-height:1; padding:6px 8px; border:1px solid #d7e0e5; border-radius:999px; color:#697783; background:#f7fafb; text-transform:uppercase; letter-spacing:.04em; }
.admin-login-view[hidden] { display:none !important; }
.admin-login-divider { display:flex; align-items:center; gap:10px; margin:18px 0 12px; color:#7a8791; font-size:12px; }
.admin-login-divider::before,.admin-login-divider::after { content:""; height:1px; flex:1; background:#dce4e8; }
.admin-auth-switch,.admin-auth-back { border:0; padding:0; background:transparent; color:#a87815; font:inherit; font-weight:700; cursor:pointer; text-align:left; }
.admin-auth-switch:hover,.admin-auth-back:hover { color:#76500b; text-decoration:underline; }
.admin-auth-back { margin:0 0 12px; font-size:13px; }
.admin-register-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.admin-register-result { margin:0; padding:11px 12px; border-radius:8px; background:#edf8f1; border:1px solid #c7e5d0; color:#2f6c42; font-size:13px; line-height:1.45; }

.admin-staff-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:16px 0 18px; }
.admin-staff-summary-card { min-height:106px; display:grid; align-content:start; gap:5px; padding:16px; border:1px solid var(--line,#dbe2e7); border-radius:12px; background:#fff; }
.admin-staff-summary-card span,.admin-staff-summary-card small { color:var(--muted,#697783); }
.admin-staff-summary-card strong { font-size:28px; line-height:1; color:#24313a; }
.admin-staff-summary-card.is-pending { border-top:3px solid #d49a25; }
.admin-staff-summary-card.is-active { border-top:3px solid #2f9464; }
.admin-staff-summary-card.is-blocked { border-top:3px solid #bd5b5b; }
.admin-permissions-tabs { display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid var(--line,#dbe2e7); margin:0 0 16px; padding-bottom:10px; }
.admin-permissions-tab { appearance:none; border:1px solid #d7e0e5; background:#fff; color:#4e5d67; border-radius:8px; padding:9px 13px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.admin-permissions-tab:hover { border-color:#b9c8d0; background:#f7fafb; }
.admin-permissions-tab.is-active { background:#26343d; border-color:#26343d; color:#fff; }
.admin-staff-panel[hidden] { display:none !important; }
.admin-staff-employee-list { display:grid; gap:10px; }
.admin-staff-employee-row { display:grid; grid-template-columns:minmax(250px,1.35fr) minmax(180px,.85fr) minmax(150px,.65fr) auto; gap:16px; align-items:center; padding:15px; border:1px solid var(--line,#dbe2e7); border-radius:11px; background:#fbfcfd; }
.admin-staff-employee-main,.admin-staff-employee-roles,.admin-staff-employee-meta { min-width:0; display:grid; gap:6px; }
.admin-staff-person { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.admin-staff-person strong { font-size:15px; color:#26343d; }
.admin-staff-status,.admin-staff-system { display:inline-flex; align-items:center; min-height:22px; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; }
.admin-staff-status.is-pending_admin_activation { color:#8a5d04; background:#fff5db; }
.admin-staff-status.is-active { color:#277444; background:#e9f7ee; }
.admin-staff-status.is-blocked,.admin-staff-status.is-rejected { color:#983b3b; background:#ffeded; }
.admin-staff-system { color:#42525e; background:#eaf0f3; }
.admin-staff-identity,.admin-staff-contact { display:flex; gap:8px; flex-wrap:wrap; color:var(--muted,#697783); font-size:12px; overflow-wrap:anywhere; }
.admin-staff-cell-label { color:#83919a; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.admin-staff-role-badges { display:flex; flex-wrap:wrap; gap:5px; }
.admin-staff-role-badges span { display:inline-flex; padding:4px 7px; border-radius:6px; background:#eaf0f3; color:#43545f; font-size:11px; font-weight:700; }
.admin-staff-no-role,.admin-staff-no-action { color:#83919a; font-size:12px; }
.admin-staff-employee-meta strong { font-size:12px; font-weight:600; color:#51606a; }
.admin-staff-employee-meta small,.admin-staff-legacy-note { color:#8a6972; font-size:11px; line-height:1.35; }
.admin-staff-employee-actions { display:flex; flex-direction:column; align-items:stretch; gap:7px; min-width:130px; }
.admin-staff-employee-actions .button { min-height:34px; padding:7px 10px; font-size:12px; white-space:nowrap; }
.admin-staff-text-action { appearance:none; padding:0; border:0; background:transparent; color:#a24141; font:inherit; font-size:12px; font-weight:700; cursor:pointer; text-align:left; }
.admin-staff-text-action:hover { text-decoration:underline; }
.admin-root-rule-card { border-top:3px solid #53606a; }
.admin-staff-role-row { grid-template-columns:minmax(230px,1fr) minmax(360px,1.5fr) auto; }
.admin-staff-role-row.is-system { grid-template-columns:minmax(230px,1fr) auto; background:#f4f7f8; }
.admin-staff-role-system-note { color:#43545f; font-weight:700; }
.admin-audit-entry { align-items:flex-start; padding:13px 0; }
.admin-audit-entry-main { min-width:0; }
.admin-audit-entry p { display:flex; flex-wrap:wrap; gap:6px; }
.admin-audit-entry p span { display:inline-flex; align-items:center; padding:2px 6px; border-radius:5px; background:#f0f4f6; color:#5d6d77; font-size:11px; }
.admin-staff-action-dialog[hidden] { display:none !important; }
.admin-staff-action-dialog { position:fixed; inset:0; z-index:2300; display:grid; place-items:center; padding:20px; }
.admin-staff-action-backdrop { position:absolute; inset:0; background:rgba(22,31,37,.48); }
.admin-staff-action-card { position:relative; z-index:1; width:min(520px,100%); padding:24px; border-radius:14px; background:#fff; box-shadow:0 20px 50px rgba(13,22,28,.24); }
.admin-staff-action-card h2 { margin:4px 30px 8px 0; color:#25323b; font-size:21px; }
.admin-staff-action-card p { margin:0 0 16px; color:#61717c; line-height:1.45; }
.admin-staff-action-close { position:absolute; top:14px; right:15px; width:30px; height:30px; border:0; border-radius:6px; background:#eef2f4; color:#50606a; font-size:22px; line-height:1; cursor:pointer; }
.admin-staff-action-buttons { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

@media (max-width: 1100px) {
  .admin-staff-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-staff-employee-row { grid-template-columns:1fr 1fr; }
  .admin-staff-employee-actions { flex-direction:row; flex-wrap:wrap; align-items:center; }
}
@media (max-width: 760px) {
  .admin-register-grid,.admin-staff-summary-grid { grid-template-columns:1fr; }
  .admin-staff-employee-row,.admin-staff-role-row,.admin-staff-role-row.is-system { grid-template-columns:1fr; }
  .admin-staff-employee-actions { align-items:stretch; }
  .admin-staff-action-buttons { flex-direction:column-reverse; }
  .admin-staff-action-buttons .button { width:100%; }
}


/* =========================================================
   v175 — First-login access documents
   ========================================================= */
.admin-access-documents-note { margin: 0 0 18px; padding: 14px 16px; border: 1px solid #e0c276; border-radius: 10px; background: #fff8e6; color: #654e16; line-height: 1.5; }
.admin-access-documents-list { display: grid; gap: 16px; }
.admin-access-document-card { border: 1px solid #d8e1e6; border-radius: 12px; background: #fff; overflow: hidden; }
.admin-access-document-card > header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:18px 20px; border-bottom:1px solid #edf1f3; }
.admin-access-document-card h2 { margin:4px 0 6px; font-size:20px; }
.admin-access-document-card header p { margin:0; color:#697783; font-size:13px; }
.admin-access-document-code, .admin-access-document-required { display:inline-flex; align-items:center; min-height:24px; padding:2px 8px; border-radius:999px; background:#eef3f5; color:#53616b; font-size:11px; font-weight:800; letter-spacing:.03em; }
.admin-access-document-required { background:#fff4d6; color:#87611a; white-space:nowrap; }
.admin-access-document-card details { margin:0; padding:0 20px; }
.admin-access-document-card summary { padding:14px 0; cursor:pointer; font-weight:700; color:#31434d; }
.admin-access-document-preview { max-height:360px; overflow:auto; margin:0 0 16px; padding:16px 18px; border:1px solid #e1e8eb; border-radius:8px; background:#fbfcfd; color:#35434b; line-height:1.58; }
.admin-access-document-preview h2 { margin:18px 0 8px; font-size:17px; }
.admin-access-document-preview h2:first-child { margin-top:0; }
.admin-access-document-preview p { margin:8px 0; }
.admin-access-document-preview ul { margin:8px 0; padding-left:21px; }
.admin-access-document-editor { margin:16px 20px; padding:16px; border:1px solid #cbd9df; border-radius:10px; background:#f8fbfc; }
.admin-access-document-editor .field { display:grid; gap:7px; margin-bottom:12px; }
.admin-access-document-editor input, .admin-access-document-editor textarea { width:100%; box-sizing:border-box; border:1px solid #cbd6db; border-radius:7px; background:#fff; padding:9px 10px; font:inherit; color:#26343d; }
.admin-access-document-editor textarea { resize:vertical; line-height:1.45; font-family:Consolas, "Courier New", monospace; font-size:12px; }
.admin-access-document-warning { margin:0 0 14px; color:#7b5a1b; font-size:13px; line-height:1.45; }
.admin-access-document-card > footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; border-top:1px solid #edf1f3; color:#78858e; font-size:12px; }
.access-documents-page { min-height:100dvh; background:linear-gradient(145deg,#eef3f4,#f8fafb 48%,#e9eff1); color:#28363e; }
.access-documents-shell { width:min(1100px,calc(100% - 32px)); margin:0 auto; padding:28px 0 54px; }
.access-documents-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; }
.access-documents-card { padding:34px; border:1px solid #d9e2e6; border-radius:16px; background:#fff; box-shadow:0 18px 54px rgba(29,48,59,.10); }
.access-documents-card > h1 { margin:5px 0 10px; font-size:clamp(27px,3vw,38px); }
.access-documents-intro { max-width:820px; margin:0 0 26px; color:#62717b; line-height:1.55; }
.access-documents-form { display:grid; gap:18px; }
.access-document-student-card { border:1px solid #dbe4e8; border-radius:12px; overflow:hidden; background:#fff; }
.access-document-student-card > header { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; padding:18px 20px; background:#f7fafb; border-bottom:1px solid #e4ecef; }
.access-document-student-card header span { color:#b17d13; font-size:12px; font-weight:800; text-transform:uppercase; }
.access-document-student-card h2 { margin:5px 0 5px; font-size:20px; }
.access-document-student-card header small { color:#71808a; }
.access-document-student-card header b { padding:5px 9px; border-radius:999px; background:#fff0cc; color:#855c0c; white-space:nowrap; font-size:12px; }
.access-document-student-content { max-height:420px; overflow:auto; padding:22px 24px; line-height:1.62; color:#35444d; }
.access-document-student-content h2 { margin:21px 0 8px; font-size:18px; color:#263840; }
.access-document-student-content h2:first-child { margin-top:0; }
.access-document-student-content p { margin:9px 0; }
.access-document-student-content ul { margin:9px 0; padding-left:22px; }
.access-document-accept { display:flex; gap:11px; align-items:flex-start; padding:16px 20px; border-top:1px solid #e4ecef; font-weight:700; color:#31424b; cursor:pointer; }
.access-document-accept input { width:18px; height:18px; margin:1px 0 0; accent-color:#bd8a1c; }
.access-documents-actions { display:flex; justify-content:flex-end; padding-top:4px; }
.access-documents-error { margin:0; padding:11px 13px; border:1px solid #e49c9c; border-radius:8px; background:#fff4f4; color:#9e3131; }
@media (max-width:720px) { .access-documents-shell { width:min(100% - 20px, 1100px); padding-top:12px; } .access-documents-head { align-items:flex-start; } .access-documents-card { padding:20px; border-radius:12px; } .access-document-student-card > header, .admin-access-document-card > header, .admin-access-document-card > footer { align-items:flex-start; flex-direction:column; } .access-documents-actions .button { width:100%; } .access-document-student-content { padding:18px; } }


/* =========================================================
   v176 — сроки обучения, напоминания и контроль просрочки
   ========================================================= */
.admin-deadline-control-card { grid-column: span 2; display: grid; gap: 14px; }
.admin-deadline-control-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.admin-deadline-control-head strong { display: block; color: #293c4c; font-size: 15px; }
.admin-deadline-control-head p { margin: 5px 0 0; color: #667785; font-size: 12px; line-height: 1.45; }
.admin-deadline-settings { padding: 12px; border: 1px solid #d9e4eb; border-radius: 10px; background: #f8fbfd; }
.admin-deadline-settings-form { display: grid; grid-template-columns: minmax(180px, 1.25fr) minmax(170px, .75fr); gap: 10px 14px; align-items: end; }
.admin-deadline-settings-form .field { display: grid; gap: 5px; }
.admin-deadline-settings-form .field span { color: #526779; font-size: 12px; font-weight: 800; }
.admin-deadline-settings-form .field small { color: #738494; font-size: 11px; line-height: 1.35; }
.admin-deadline-checkbox { display: flex; align-items: center; gap: 8px; color: #41566a; font-size: 12px; font-weight: 700; cursor: pointer; }
.admin-deadline-checkbox input { width: 16px; height: 16px; margin: 0; }
.admin-deadline-settings-actions { display: flex; align-items: center; gap: 10px; grid-column: 1 / -1; }
.admin-deadline-settings-actions span { color: #738494; font-size: 11px; line-height: 1.35; }
.admin-deadline-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.admin-deadline-summary-grid article { display: grid; gap: 4px; padding: 10px; border: 1px solid #dbe5eb; border-radius: 9px; background: #fff; }
.admin-deadline-summary-grid article span { color: #6b7d8b; font-size: 11px; font-weight: 700; }
.admin-deadline-summary-grid article strong { color: #2e4659; font-size: 22px; line-height: 1; }
.admin-deadline-summary-grid article small { color: #7a8a96; font-size: 10px; line-height: 1.35; }
.admin-deadline-summary-grid article.is-danger { border-color: #e5c4c4; background: #fff8f8; }
.admin-deadline-summary-grid article.is-danger strong { color: #a44747; }
.admin-deadline-summary-grid article.is-warning { border-color: #ead9ae; background: #fffdf6; }
.admin-deadline-summary-grid article.is-warning strong { color: #936911; }
.admin-deadline-filter { margin-top: -2px; }
.admin-deadline-list { display: grid; gap: 8px; max-height: 480px; overflow: auto; }
.admin-deadline-assignment { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px; border: 1px solid #dde6ec; border-radius: 9px; background: #fff; }
.admin-deadline-assignment.is-overdue { border-color: #e9c7c7; background: #fffafa; }
.admin-deadline-assignment-main h3 { margin: 6px 0 3px; color: #2c4355; font-size: 14px; }
.admin-deadline-assignment-main p { margin: 0; color: #607483; font-size: 12px; line-height: 1.45; }
.admin-deadline-assignment-main small { display: block; margin-top: 5px; color: #82919c; font-size: 11px; }
.admin-deadline-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.admin-deadline-tags span, .admin-deadline-tags strong { padding: 3px 6px; border-radius: 999px; font-size: 10px; line-height: 1.2; }
.admin-deadline-tags span { color: #506879; background: #eef4f7; border: 1px solid #dae6eb; }
.admin-deadline-tags strong { color: #8a6312; background: #fff4d5; border: 1px solid #ecd99b; }
.admin-deadline-assignment.is-overdue .admin-deadline-tags strong { color: #9a3f3f; background: #fff0f0; border-color: #e9c9c9; }
.admin-deadline-assignment-meta { display: grid; gap: 7px; justify-items: end; color: #627786; font-size: 11px; white-space: nowrap; }
@media (max-width: 1100px) { .admin-deadline-control-card { grid-column: auto; } .admin-deadline-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .admin-deadline-control-head, .admin-deadline-assignment { grid-template-columns: 1fr; display: grid; } .admin-deadline-settings-form { grid-template-columns: 1fr; } .admin-deadline-assignment-meta { justify-items: start; white-space: normal; } .admin-deadline-summary-grid { grid-template-columns: 1fr; } }


/* v177 — factual activity and engagement dashboards. */
.student-activity-panel { border: 1px solid rgba(116, 156, 211, .22); background: linear-gradient(135deg, rgba(26, 52, 85, .48), rgba(18, 30, 49, .56)); }
.student-activity-period { display: flex; gap: 10px; align-items: center; }
.student-activity-period label { display: grid; gap: 4px; font-size: 12px; color: var(--muted, #9db0c4); }
.student-activity-period select, .student-activity-custom input { min-height: 34px; border-radius: 8px; }
.student-activity-custom { display: flex; align-items: end; gap: 10px; margin: 0 0 16px; padding: 12px; border-radius: 10px; background: rgba(5, 15, 30, .22); }
.student-activity-custom label { display: grid; gap: 5px; flex: 1; font-size: 12px; color: var(--muted, #9db0c4); }
.student-activity-grid, .admin-period-activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.student-activity-grid article, .admin-period-activity-grid article { min-height: 82px; padding: 14px; border-radius: 10px; background: rgba(5, 14, 28, .28); display: grid; align-content: center; gap: 6px; }
.student-activity-grid strong, .admin-period-activity-grid strong { font-size: 19px; color: #d9edff; }
.student-activity-grid span, .admin-period-activity-grid span { font-size: 12px; color: var(--muted, #9db0c4); }
.student-activity-footnote { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 12px; color: var(--muted, #9db0c4); }
.student-activity-footnote strong { color: #d7e5f5; font-weight: 600; }
.admin-stat-period-actions { flex-wrap: wrap; justify-content: flex-end; }
.admin-stat-period-actions .admin-filter input { min-height: 34px; }
.admin-period-activity-section { margin: 16px 0; }
.admin-engagement-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.admin-engagement-summary-grid article { border: 1px solid rgba(100, 138, 181, .22); border-radius: 10px; padding: 13px; display: grid; gap: 4px; background: rgba(5, 15, 30, .24); }
.admin-engagement-summary-grid article.is-warning { border-color: rgba(211, 153, 65, .48); }
.admin-engagement-summary-grid span, .admin-engagement-summary-grid small { color: var(--muted, #9db0c4); font-size: 12px; }
.admin-engagement-summary-grid strong { color: #d6ebff; font-size: 24px; }
.admin-engagement-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.admin-engagement-lists > section { min-width: 0; padding: 12px; border-radius: 10px; background: rgba(5, 14, 28, .2); }
.admin-engagement-list { display: grid; gap: 9px; margin-top: 9px; }
.admin-engagement-item { padding: 12px; border: 1px solid rgba(100, 138, 181, .2); border-radius: 9px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.admin-engagement-item.is-inactive { border-left: 3px solid #d79a4f; }
.admin-engagement-item.is-noProgress { border-left: 3px solid #7898c3; }
.admin-engagement-item h3 { margin: 7px 0 4px; font-size: 14px; }
.admin-engagement-item p, .admin-engagement-item small { margin: 0; color: var(--muted, #9db0c4); font-size: 12px; }
@media (max-width: 900px) { .student-activity-grid, .admin-period-activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-engagement-lists { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .student-activity-grid, .admin-period-activity-grid, .admin-engagement-summary-grid { grid-template-columns: 1fr; } .student-section-head { gap: 12px; align-items: stretch; } .student-activity-period { width: 100%; } .student-activity-period select { width: 100%; } .student-activity-custom { align-items: stretch; flex-direction: column; } .admin-engagement-item { align-items: stretch; flex-direction: column; } }

/* v178.8 — employee TOTP setup */
.admin-mfa-secret, .admin-mfa-recovery { margin-top: 18px; border: 1px solid rgba(126, 177, 255, .35); border-radius: 12px; padding: 14px; background: rgba(13, 28, 49, .55); }
.admin-mfa-secret > span { display:block; color:#a9c7ef; font-size:.82rem; margin-bottom:6px; }
.admin-mfa-secret code { display:block; overflow-wrap:anywhere; color:#fff; font-size:1rem; letter-spacing:.08em; padding:10px; border-radius:8px; background:rgba(0,0,0,.22); }
.admin-mfa-secret small { display:block; color:#bdd0e5; margin-top:9px; line-height:1.45; }
.admin-mfa-recovery h2 { margin:0 0 7px; font-size:1.05rem; }
.admin-mfa-recovery p { margin:0 0 10px; color:#c4d4e7; line-height:1.45; }
.admin-mfa-recovery pre { margin:0 0 14px; white-space:pre-wrap; user-select:all; letter-spacing:.08em; padding:12px; border-radius:8px; background:rgba(0,0,0,.25); color:#fff; }


/* v178.9 — compact admin header menu + QR enrollment */
body.admin-shell-body {
  --admin-title-width: 265px;
}

.admin-header-actions {
  position: relative;
}

.admin-header-menu {
  position: relative;
}

.admin-header-menu-button {
  min-height: 30px;
  padding: 6px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 8px;
  background: #ffffff;
  color: #1f2933;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.admin-header-menu-button:hover,
.admin-header-menu-button:focus-visible {
  border-color: rgba(90, 107, 132, 0.55);
  background: #f8fafc;
  outline: none;
}

.admin-header-menu-button-dots {
  display: inline-block;
  margin-top: -3px;
  font-size: 22px;
  line-height: 0.6;
}

.admin-header-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 140;
  min-width: 220px;
  padding: 8px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.admin-header-menu-link {
  min-height: 38px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  color: #24313b;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.admin-header-menu-link:hover,
.admin-header-menu-link:focus-visible {
  background: #f3f6f8;
  outline: none;
}

.admin-header-menu-link.is-danger {
  color: #9f2e2e;
}

.admin-header-menu-link.is-danger:hover,
.admin-header-menu-link.is-danger:focus-visible {
  background: #fff3f3;
}

.admin-mfa-qr,
.admin-mfa-secret,
.admin-mfa-recovery {
  margin-top: 18px;
  border: 1px solid rgba(126, 177, 255, 0.35);
  border-radius: 12px;
  padding: 14px;
  background: rgba(13, 28, 49, 0.55);
}

.admin-mfa-qr > span,
.admin-mfa-secret > span {
  display: block;
  color: #a9c7ef;
  font-size: 0.82rem;
  margin-bottom: 8px;
}

.admin-mfa-qr-box {
  width: min(100%, 220px);
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 10px;
  border-radius: 12px;
  background: #ffffff;
  display: grid;
  place-items: center;
}

.admin-mfa-qr-box img {
  width: 100%;
  height: auto;
  display: block;
}

.admin-mfa-qr small,
.admin-mfa-secret small {
  display: block;
  color: #bdd0e5;
  margin-top: 10px;
  line-height: 1.45;
}

.admin-mfa-secret code {
  display: block;
  overflow-wrap: anywhere;
  color: #ffffff;
  font-size: 1rem;
  letter-spacing: 0.08em;
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
}

@media (max-width: 1180px) {
  body.admin-shell-body {
    --admin-title-width: 230px;
  }
  .admin-header-menu-button-text {
    display: none;
  }
  .admin-header-menu-button {
    padding-inline: 10px;
    gap: 0;
  }
}


/* v178.16 — compact lesson list and simplified collapsed lesson preview rail */

/* 1) В раскрытом содержании предпросмотра делаем строки уроков заметно плотнее,
   не уменьшая сам размер шрифта. */
.training-page .training-course-tree {
  padding-top: 8px;
}

.training-page .training-module h2 {
  padding: 10px 12px 6px !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
}

.training-page .training-lesson {
  min-height: 0 !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 2px !important;
  padding: 6px 12px 6px 10px !important;
}

.training-page .training-lesson-number {
  font-size: 14px !important;
  line-height: 1.1 !important;
}

.training-page .training-lesson-title {
  font-size: 14px !important;
  line-height: 1.1 !important;
}

.training-page .training-lesson.is-active::after {
  right: -10px !important;
  border-top-width: 10px !important;
  border-bottom-width: 10px !important;
  border-left-width: 10px !important;
}

/* 2) В свернутом состоянии убираем верхнюю мини-кнопку и делаем цельную
   боковую плашку с крупной вертикальной подписью по центру, как в образце. */
.training-page .training-layout.is-sidebar-collapsed .training-sidebar {
  width: 40px !important;
}

.training-page .training-layout.is-sidebar-collapsed .training-sidebar-rail {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
  background: #d9e2e8 !important;
  color: #3d4c56 !important;
  border: 0 !important;
}

.training-page .training-layout.is-sidebar-collapsed .training-sidebar-rail > span,
.training-page .training-layout.is-sidebar-collapsed .training-sidebar-rail:hover > span,
.training-page .training-layout.is-sidebar-collapsed .training-sidebar-rail:focus-visible > span {
  display: none !important;
}

.training-page .training-layout.is-sidebar-collapsed .training-sidebar-rail::after {
  content: "Курсы" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #42535d !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}


/* v178.17 — authoritative initial state for the admin header dropdown */
/* The global author rule for .admin-header-menu-panel uses display:grid.
   Without this selector it overrides the browser's [hidden] rule and the
   dropdown is visible immediately after page load. */
.admin-header-menu-panel[hidden] {
  display: none !important;
}