@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap");

:root {
  --bg: #f4f8fb;
  --bg-soft: #eaf3f7;
  --panel: #ffffff;
  --panel-soft: #f7fafc;
  --ink: #17283f;
  --ink-soft: #60708a;
  --line: #dce7ef;
  --line-strong: #c9d8e4;
  --accent: #118fa0;
  --accent-strong: #0c6f86;
  --accent-soft: #e7f7fa;
  --navy: #12335c;
  --success: #28a968;
  --success-strong: #16824c;
  --success-soft: #eaf8f1;
  --danger: #d35757;
  --danger-soft: #fff1f1;
  --shadow: 0 18px 48px rgba(29, 64, 98, 0.08);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

.kb-page-head,
.kb-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.kb-page-head h1,
.kb-hero h1 {
  margin: 4px 0 8px;
  color: var(--navy);
  font-size: 30px;
  line-height: 1.15;
}

.kb-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.35fr);
  gap: 18px;
}

.kb-search-form {
  margin: 16px 0;
}

.kb-section {
  margin-top: 0;
}

.kb-section.panel {
  padding: 18px;
}

.kb-panel-breadcrumbs {
  margin: 0 0 8px;
}

.kb-folder-description {
  margin: -6px 0 0;
}

.kb-new-materials {
  margin-top: 14px;
}

.kb-folder-list {
  display: grid;
  gap: 8px;
}

.kb-folder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  height: 68px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: visible;
}

.kb-material-row .table-badge {
  justify-self: end;
  width: auto;
  max-width: max-content;
  padding: 3px 8px;
  line-height: 1.2;
}

.kb-row-badges {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.kb-status-note {
  color: #7a8494;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.kb-material-row-muted {
  background: #f7f8fa;
}

.kb-material-row .kb-folder-copy strong {
  font-weight: 500;
}

.kb-folder-tree-select {
  position: relative;
}

.kb-folder-tree-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}

.kb-folder-tree-trigger::after {
  content: "⌄";
  color: var(--ink-soft);
}

.kb-folder-tree-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: grid;
  gap: 8px;
  width: min(640px, 100%);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(18, 51, 92, 0.14);
}

.kb-folder-tree-search {
  min-height: 40px;
}

.kb-folder-tree-options {
  display: grid;
  gap: 3px;
  max-height: 320px;
  overflow: auto;
}

.kb-folder-tree-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px 10px 8px calc(10px + (var(--depth, 0) * 22px));
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.kb-folder-tree-option:hover,
.kb-folder-tree-option:focus-visible,
.kb-folder-tree-option.is-selected {
  background: var(--panel-soft);
  outline: none;
}

.kb-folder-tree-option strong {
  display: block;
  color: var(--navy);
  font-size: 14px;
  line-height: 1.25;
}

.kb-folder-tree-option small {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.25;
}

.kb-folder-tree-icon {
  color: #d2a444;
  font-size: 13px;
  line-height: 1.35;
}

.kb-article-editor-topbar {
  align-items: flex-start;
}

.kb-article-editor-topbar > div {
  text-align: left;
}

.kb-article-editor-topbar h2 {
  text-align: left;
}

.kb-article-meta-grid {
  grid-template-columns: minmax(0, 1fr) 180px 130px;
  align-items: start;
}

.kb-article-meta-grid .login-label:first-child,
.kb-article-meta-grid .lesson-meta-full {
  grid-column: 1 / -1;
}

.kb-article-folder-field {
  grid-column: 1 / 2;
}

.kb-article-status-field {
  grid-column: 2 / 3;
}

.kb-article-order-field {
  grid-column: 3 / 4;
}

.kb-folder-row-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.kb-folder-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.kb-folder-copy strong {
  color: var(--navy);
  font-size: 15px;
  line-height: 1.2;
}

.kb-folder-copy span,
.kb-folder-copy small {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.25;
}

.kb-folder-copy > span:not(.kb-badges) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.kb-badges em {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 11px;
  font-style: normal;
}

.kb-folder-actions {
  position: relative;
}

.kb-folder-actions summary {
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
}

.kb-folder-actions summary::-webkit-details-marker {
  display: none;
}

.kb-folder-menu {
  position: absolute;
  right: 0;
  top: 42px;
  z-index: 10;
  display: grid;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(18, 51, 92, 0.12);
}

.kb-folder-menu a,
.kb-folder-menu span,
.kb-folder-menu button {
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--ink);
  border: 0;
  background: transparent;
  text-decoration: none;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.kb-folder-menu a:hover,
.kb-folder-menu a:focus-visible,
.kb-folder-menu button:hover,
.kb-folder-menu button:focus-visible {
  background: var(--panel-soft);
}

.kb-folder-menu form {
  margin: 0;
}

.kb-folder-menu-danger {
  border-top: 1px solid var(--line);
  color: var(--danger) !important;
}

.kb-new-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.kb-new-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.kb-new-card .table-badge {
  justify-self: start;
  width: auto;
  max-width: max-content;
  padding: 3px 8px;
  line-height: 1.2;
}

.kb-new-card h3 {
  margin: 0;
  color: var(--navy);
  font-size: 17px;
  line-height: 1.25;
}

.kb-new-card p {
  margin: 0;
}

.kb-folder-grid,
.kb-article-list {
  display: grid;
  gap: 10px;
}

.kb-folder-card,
.kb-article-row {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.kb-folder-card:hover,
.kb-folder-card:focus-visible,
.kb-article-row:hover,
.kb-article-row:focus-visible {
  border-color: rgba(18, 51, 92, 0.28);
  box-shadow: 0 12px 30px rgba(18, 51, 92, 0.08);
}

.kb-folder-card strong,
.kb-article-row strong {
  color: var(--navy);
}

.kb-folder-card span {
  color: var(--ink-soft);
  font-size: 14px;
}

.kb-article-row {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.kb-article-row .table-badge {
  white-space: nowrap;
}

.kb-reader {
  max-width: 980px;
  margin: 0 auto;
}

.kb-reader-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.kb-reader-head h1 {
  margin: 10px 0 8px;
  color: var(--navy);
  font-size: 34px;
  line-height: 1.14;
}

.kb-reader .longread-content {
  max-width: 820px;
}

.kb-course-note {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.kb-course-note h2 {
  margin: 2px 0 6px;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.25;
}

.kb-folder-settings {
  max-width: 980px;
}

.kb-folder-settings .builder-toolbar {
  margin-bottom: 12px;
}

.kb-settings-block {
  display: grid;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.kb-settings-block:first-of-type {
  border-top: 0;
  padding-top: 4px;
}

.kb-settings-head h3 {
  margin: 0;
  color: var(--navy);
  font-size: 17px;
  line-height: 1.25;
}

.kb-settings-description {
  min-height: 78px;
}

.kb-settings-grid-3,
.kb-settings-grid-2 {
  display: grid;
  gap: 12px;
}

.kb-settings-grid-3 {
  grid-template-columns: minmax(220px, 1.4fr) minmax(120px, 0.6fr) minmax(150px, 0.75fr);
}

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

.kb-folder-type-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
}

.kb-folder-type-toggle label {
  cursor: pointer;
}

.kb-folder-type-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.kb-folder-type-toggle span {
  display: block;
  padding: 8px 12px;
  border-radius: 9px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.kb-folder-type-toggle input:checked + span {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 6px 16px rgba(18, 51, 92, 0.08);
}

.kb-course-link-fields {
  display: grid;
  gap: 10px;
  max-width: 680px;
}

.kb-access-all {
  width: max-content;
  max-width: 100%;
}

.kb-access-inherit {
  width: max-content;
  max-width: 100%;
}

.kb-access-note {
  margin: -4px 0 0;
  font-size: 13px;
}

.kb-access-inherited-note {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  color: var(--ink-soft);
  font-size: 14px;
}

.kb-access-settings {
  display: grid;
  gap: 14px;
}

.kb-access-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
  gap: 12px;
  align-items: start;
}

.kb-access-row h4 {
  margin: 2px 0 4px;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.25;
}

.kb-access-row p {
  margin: 0;
  font-size: 13px;
}

.kb-access-toggle {
  justify-self: start;
}

.kb-department-picker {
  position: relative;
  display: grid;
  gap: 8px;
  max-width: 620px;
}

.kb-department-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
}

.kb-department-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 13px;
  line-height: 1.2;
}

.kb-department-chip button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--panel-soft);
  color: var(--ink-soft);
  cursor: pointer;
}

.kb-department-search {
  min-height: 40px;
}

.kb-department-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 12;
  display: grid;
  width: min(520px, 100%);
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(18, 51, 92, 0.12);
}

.kb-department-options button {
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.kb-department-options button:hover,
.kb-department-options button:focus-visible {
  background: var(--panel-soft);
  outline: none;
}

.kb-access-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.kb-access-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
}

.kb-access-card h4 {
  margin: 0;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.25;
}

.kb-compact-multiselect {
  min-height: 88px;
  max-height: 96px;
  overflow: auto;
}

@media (max-width: 860px) {
  .kb-page-head,
  .kb-hero,
  .kb-reader-head,
  .kb-course-note {
    display: grid;
  }

  .kb-layout {
    grid-template-columns: 1fr;
  }

  .kb-article-row {
    grid-template-columns: 1fr;
  }

  .kb-new-grid {
    grid-template-columns: 1fr;
  }

  .kb-folder-row {
    grid-template-columns: 1fr;
  }

  .kb-settings-grid-3,
  .kb-settings-grid-2,
  .kb-access-row,
  .kb-access-split {
    grid-template-columns: 1fr;
  }

  .kb-folder-type-toggle {
    width: 100%;
  }

  .kb-folder-type-toggle label {
    flex: 1;
  }

  .kb-folder-type-toggle span {
    text-align: center;
  }

  .kb-article-meta-grid {
    grid-template-columns: 1fr;
  }

  .kb-article-folder-field,
  .kb-article-status-field,
  .kb-article-order-field {
    grid-column: 1 / -1;
  }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at top right, rgba(17, 143, 160, 0.1), transparent 22%),
    linear-gradient(180deg, #f9fbfe 0%, var(--bg) 100%);
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI Variable", "Segoe UI", sans-serif;
  line-height: 1.45;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

code {
  padding: 2px 6px;
  border-radius: 8px;
  background: #f1f5fa;
  color: var(--navy);
}

.app-shell {
  display: grid;
  grid-template-columns: 72px 276px minmax(0, 1fr);
  min-height: 100vh;
}

.app-shell-simple {
  grid-template-columns: 276px minmax(0, 1fr);
}

.icon-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  background: #f1f4f9;
  border-right: 1px solid var(--line);
}

.rail-logo,
.topbar-avatar,
.profile-badge {
  display: grid;
  place-items: center;
  border-radius: 18px;
  font-weight: 700;
}

.rail-logo {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: white;
  box-shadow: 0 12px 24px rgba(17, 143, 160, 0.18);
}

.rail-nav,
.rail-footer {
  display: grid;
  gap: 12px;
}

.rail-nav {
  flex: 1;
  align-content: start;
}

.rail-link {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--ink-soft);
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.rail-link:hover,
.rail-link:focus-visible {
  background: white;
  color: var(--navy);
  transform: translateY(-1px);
  outline: none;
}

.rail-link-muted {
  opacity: 0.7;
}

.side-panel {
  padding: 26px 22px 28px;
  background: #fbfcfe;
  border-right: 1px solid var(--line);
}

.side-footer {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.side-head {
  margin-bottom: 22px;
}

.side-head-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.side-brand {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.side-subtitle {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 14px;
}

.profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
}

.profile-badge,
.topbar-avatar {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--navy), var(--accent));
  color: white;
}

.profile-name {
  font-weight: 700;
}

.profile-role {
  color: var(--ink-soft);
  font-size: 13px;
  text-transform: uppercase;
}

.section-nav {
  display: grid;
  gap: 8px;
  margin-bottom: 24px;
}

.section-link {
  padding: 11px 14px;
  border-radius: 14px;
  color: var(--ink-soft);
  transition: background 0.2s ease, color 0.2s ease;
}

.section-link:hover,
.section-link:focus-visible {
  background: white;
  color: var(--navy);
  outline: none;
}

.section-link-muted {
  color: var(--ink-soft);
}

.side-note,
.side-title,
.sidebar-title {
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.side-block {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.side-title {
  margin-bottom: 12px;
}

.side-item {
  padding: 8px 0;
  color: var(--ink);
  font-size: 14px;
}

.workspace {
  min-width: 0;
  padding: 18px 20px 24px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 14px 18px;
}

.topbar-search {
  position: relative;
  flex: 1;
  max-width: 520px;
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
}

.topbar-search input {
  width: 100%;
  height: 46px;
  padding: 0 18px 0 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-soft);
  font: inherit;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-btn,
.login-submit,
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.topbar-btn:hover,
.login-submit:hover,
.action-btn:hover {
  transform: translateY(-1px);
}

.topbar-btn-primary,
.login-submit,
.action-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: white;
  box-shadow: 0 10px 20px rgba(49, 180, 106, 0.18);
}

.action-btn-soft {
  background: var(--navy);
  color: white;
  box-shadow: 0 10px 20px rgba(31, 54, 88, 0.16);
}

.action-btn-ghost,
.topbar-btn {
  background: white;
  color: var(--navy);
  border: 1px solid var(--line);
  box-shadow: none;
}

.action-btn-secondary {
  background: var(--navy);
  color: white;
  box-shadow: 0 10px 20px rgba(31, 54, 88, 0.14);
}

.page-frame {
  min-width: 0;
  padding: 14px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.52);
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 8px 18px;
}

.page-head h1 {
  margin: 4px 0 0;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.eyebrow {
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.panel,
.card,
.answer-card,
.module-card,
.login-card {
  background: var(--panel);
  border: 1px solid rgba(221, 229, 240, 0.8);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.panel {
  padding: 24px;
  margin-bottom: 20px;
}

.hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 18px;
  padding: 28px;
  margin-bottom: 20px;
  border: 1px solid rgba(221, 229, 240, 0.8);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(49, 180, 106, 0.08), transparent 40%),
    white;
  box-shadow: var(--shadow);
}

.hero-copy h2 {
  margin: 12px 0 10px;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.hero-badge,
.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f3f6fb;
  border: 1px solid var(--line);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
}

.hero-metrics {
  display: grid;
  gap: 14px;
  align-content: start;
}

.hero-metric {
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
}

.hero-metric span {
  display: block;
  color: var(--ink-soft);
  font-size: 13px;
}

.hero-metric strong {
  display: block;
  margin-top: 10px;
  font-size: 26px;
  letter-spacing: -0.04em;
}

.panel h2,
.panel h3,
.card h3 {
  margin: 0 0 14px;
  letter-spacing: -0.03em;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.card {
  padding: 20px;
  min-height: 136px;
}

.card span,
.muted,
.meta-grid span,
.table th,
.table td .muted {
  color: var(--ink-soft);
}

.card strong {
  display: block;
  margin-top: 18px;
  font-size: 34px;
  letter-spacing: -0.04em;
}

.accent {
  background: linear-gradient(180deg, #f5fbfd 0%, var(--accent-soft) 100%);
}

.module-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.catalog-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow: 0 14px 30px rgba(44, 67, 101, 0.06);
}

.catalog-card-link {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.catalog-card-link:hover {
  transform: translateY(-2px);
  border-color: rgba(49, 180, 106, 0.32);
  box-shadow: 0 18px 34px rgba(44, 67, 101, 0.1);
}

.catalog-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.catalog-card-head h3 {
  margin: 0 0 8px;
}

.catalog-meta,
.activity-meta,
.lesson-roadmap-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.catalog-meta div,
.lesson-roadmap-meta span,
.activity-meta span {
  color: var(--ink-soft);
}

.catalog-meta strong,
.lesson-roadmap-meta strong,
.activity-meta strong {
  color: var(--navy);
}

.module-card {
  padding: 20px;
}

.split,
.editor-grid,
.content-workspace,
.split-admin,
.split-content {
  display: grid;
  gap: 20px;
}

.split {
  grid-template-columns: 1.15fr 0.85fr;
}

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

.content-workspace {
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: start;
}

.builder-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 4px 18px;
  color: var(--ink-soft);
}

.builder-page {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.builder-sidebar {
  position: sticky;
  top: 22px;
}

.builder-main {
  display: grid;
  gap: 20px;
}

.builder-main-single {
  grid-template-columns: 1fr;
}

.builder-panel {
  padding: 28px;
}

.builder-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.builder-list {
  display: grid;
  gap: 10px;
}

.builder-item-with-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.builder-item-main {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.builder-item-main:hover,
.builder-item-main:focus-visible {
  color: inherit;
}

.builder-item-order-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.builder-item-order-actions form {
  margin: 0;
}

.lesson-save-error {
  margin-bottom: 14px;
}

.action-btn-danger-soft {
  color: #b4232d;
}

.inline-docx-form {
  margin-bottom: 12px;
}

.builder-list-inline {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.builder-item {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfcff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.builder-item.builder-item-with-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.builder-item-order-actions .mini-icon-btn:disabled {
  opacity: 0.38;
  cursor: default;
  background: #f8fafc;
}

.test-question-client-error,
.kb-article-client-error {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--danger-soft);
  color: #984242;
  border: 1px solid #f0c9c9;
}

.builder-item strong,
.builder-item span {
  display: block;
}

.builder-item:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  box-shadow: 0 12px 24px rgba(44, 67, 101, 0.08);
}

.builder-item.active {
  border-color: rgba(49, 180, 106, 0.36);
  box-shadow: 0 0 0 3px rgba(49, 180, 106, 0.12);
}

.builder-assets {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
}

.lesson-editor-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.lesson-steps-sidebar {
  position: sticky;
  top: 22px;
}

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

.lesson-assets-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
}

.builder-assets-list,
.builder-assets-editor {
  display: grid;
  gap: 12px;
}

.longread-editor {
  display: grid;
  gap: 24px;
}

.longread-editor-form {
  display: grid;
  gap: 18px;
}

.longread-body-input {
  min-height: 540px;
  line-height: 1.7;
}

.textarea-xxl {
  min-height: 540px;
}

.lesson-materials-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.lesson-materials-list,
.lesson-materials-editor {
  display: grid;
  gap: 12px;
}

.empty-state-inline {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 18px;
  background: #fbfcff;
}

.material-preview-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfcff;
}

.material-preview-image {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: white;
}

.panel-muted {
  background: #fbfcff;
}

.longread-editor-page,
.longread-composer {
  display: grid;
  gap: 20px;
}

.longread-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.longread-block-canvas {
  display: grid;
  gap: 16px;
}

.longread-block-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fbfcff;
  display: grid;
  gap: 16px;
}

.longread-block-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.button-row-compact {
  gap: 8px;
}

.longread-preview-panel {
  display: grid;
  gap: 18px;
}

.longread-stage {
  display: grid;
  justify-content: center;
}

.learning-fullwidth {
  width: 100%;
  max-width: none;
}

.longread-hero,
.longread-article {
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
}

.longread-hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}

.longread-summary {
  max-width: 720px;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.7;
}

.lesson-overview-panel {
  display: grid;
  gap: 16px;
}

.lesson-overview-copy {
  display: grid;
  gap: 14px;
}

.lesson-overview-copy h1 {
  margin: 0;
}

.lesson-overview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
}

.lesson-overview-meta span {
  position: relative;
}

.lesson-overview-meta span + span::before {
  content: "•";
  margin-right: 18px;
  color: #a0afc5;
}

.longread-article {
  padding: 56px 72px;
}

.longread-h1,
.longread-h2,
.longread-h3 {
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 20px;
}

.longread-h1[data-align="center"],
.longread-h2[data-align="center"],
.longread-h3[data-align="center"],
.longread-paragraph[data-align="center"],
.longread-list[data-align="center"],
.longread-checklist[data-align="center"],
.longread-callout[data-align="center"],
.longread-quote[data-align="center"] {
  text-align: center;
}

.longread-h1[data-align="right"],
.longread-h2[data-align="right"],
.longread-h3[data-align="right"],
.longread-paragraph[data-align="right"],
.longread-list[data-align="right"],
.longread-checklist[data-align="right"],
.longread-callout[data-align="right"],
.longread-quote[data-align="right"] {
  text-align: right;
}

.longread-h1 {
  font-size: 44px;
}

.longread-h2 {
  font-size: 32px;
  margin-top: 38px;
}

.longread-h3 {
  font-size: 24px;
  margin-top: 28px;
}

.longread-paragraph,
.longread-callout p,
.longread-quote p {
  font-size: 19px;
  line-height: 1.85;
  color: #24364f;
  white-space: pre-line;
}

.longread-list {
  margin: 0 0 24px 24px;
  padding: 0;
  display: grid;
  gap: 10px;
  color: #24364f;
  font-size: 18px;
  line-height: 1.75;
}

.longread-list ul,
.longread-list ol {
  margin: 6px 0 0 22px;
  padding: 0;
}

.longread-checklist {
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
  color: #24364f;
  font-size: 18px;
  line-height: 1.7;
  list-style: none;
}

.longread-checklist li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.longread-checklist-box {
  width: 20px;
  height: 20px;
  margin-top: 5px;
  display: grid;
  place-items: center;
  border: 1px solid #b9c6d8;
  border-radius: 6px;
  color: white;
  font-size: 13px;
  font-weight: 700;
}

.longread-checklist li.is-checked .longread-checklist-box {
  border-color: var(--accent);
  background: var(--accent);
}

.longread-media {
  margin: 32px 0;
  display: grid;
  gap: 14px;
}

.longread-media img {
  display: block;
  width: 100%;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: #f8fbff;
}

.longread-media figcaption {
  color: var(--ink-soft);
  font-size: 15px;
}

.longread-callout {
  margin: 28px 0;
  padding: 22px 24px;
  border-radius: 24px;
  display: grid;
  gap: 10px;
}

.longread-callout-warning {
  background: #fff1f4;
  border: 1px solid #ffd1dc;
}

.longread-callout-warning strong {
  color: #b92742;
}

.longread-callout-example {
  background: #f2f7ff;
  border: 1px solid #d5e5ff;
}

.longread-callout-example strong {
  color: #285ca8;
}

.longread-callout-remember {
  background: #f1f8f4;
  border: 1px solid #cfead8;
}

.longread-callout-remember strong {
  color: #217346;
}

.longread-quote {
  margin: 28px 0;
  padding: 18px 24px;
  border-left: 4px solid #cad7e7;
  background: #f8fbff;
  border-radius: 0 20px 20px 0;
}

.longread-quote cite {
  display: block;
  margin-top: 10px;
  color: var(--ink-soft);
  font-style: normal;
}

.longread-divider {
  margin: 34px 0;
  border: none;
  border-top: 1px solid var(--line);
}

.longread-resource-card {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fbfcff;
}

.longread-resource-card span {
  color: var(--ink-soft);
}

.lesson-editor-shell {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 48px 64px;
  box-shadow: 0 18px 48px rgba(36, 54, 79, 0.05);
}

#lesson-editor,
#kb-editor {
  max-width: 880px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.65;
}

.ce-block__content,
.ce-toolbar__content {
  max-width: 880px;
}

.codex-editorjs .ce-popover,
.ce-popover {
  z-index: 20;
}

.editor-callout-block,
.editor-media-block,
.editor-link-block {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fbfcff;
}

.editor-callout-block {
  background: #fff1f4;
  border-color: #ffd1dc;
  border-left: 4px solid #d94a64;
}

.editor-callout-block[data-variant="example"] {
  background: #f2f7ff;
  border-color: #d5e5ff;
  border-left-color: #5f8fd9;
}

.editor-callout-block[data-variant="remember"] {
  background: #f1f8f4;
  border-color: #cfead8;
  border-left-color: #50a06b;
}

.editor-callout-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  outline: none;
}

.editor-callout-text {
  min-height: 84px;
  color: #24364f;
  line-height: 1.6;
  outline: none;
  white-space: pre-wrap;
}

.editor-align-tune {
  display: flex;
  gap: 6px;
  padding: 4px;
}

.editor-callout-title:empty:before,
.editor-callout-text:empty:before {
  content: attr(data-placeholder);
  color: #9aa6b2;
}

.editor-mini-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.editor-url-input,
.editor-text-input {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  font: inherit;
  background: #fff;
  color: var(--navy);
}

.editor-url-input {
  resize: vertical;
}

.editor-hidden-file {
  display: none;
}

.editor-upload-label {
  cursor: pointer;
}

.editor-image-preview img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
}

.editor-file-preview {
  font-size: 15px;
}

.lesson-editor-shell .ce-header {
  color: var(--navy);
}

.lesson-editor-shell .ce-paragraph,
.lesson-editor-shell .cdx-list__item {
  color: #24364f;
  line-height: 1.75;
}

.content-sidebar {
  position: sticky;
  top: 22px;
}

.content-nav-panel {
  padding: 20px;
}

.content-intro {
  padding: 26px;
  background:
    linear-gradient(135deg, rgba(49, 180, 106, 0.08), transparent 45%),
    white;
}

.content-path {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}

.path-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f4f7fb;
  border: 1px solid var(--line);
  color: var(--navy);
  font-weight: 600;
}

.path-arrow {
  color: var(--ink-soft);
}

.nav-section + .nav-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.nav-section-title,
.editor-kicker {
  margin-bottom: 12px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stack-list {
  display: grid;
  gap: 10px;
}

.list-link,
.module-lesson-link,
.step-card {
  display: block;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fbfcff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}

.list-link:hover,
.module-lesson-link:hover,
.step-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 10px 22px rgba(50, 74, 110, 0.06);
}

.list-link.active,
.module-lesson-link.active,
.step-card.active,
.module-tree-item.active {
  border-color: rgba(49, 180, 106, 0.36);
  box-shadow: 0 0 0 3px rgba(49, 180, 106, 0.12);
}

.list-link strong,
.list-link span {
  display: block;
}

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

.module-tree-item {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fbfcff;
  overflow: hidden;
}

.module-tree-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
}

.module-tree-count,
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
}

.module-tree-lessons {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px 28px;
}

.module-lesson-title {
  font-weight: 700;
}

.module-empty {
  padding: 8px 12px 10px;
}

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

.activity-list {
  display: grid;
  gap: 14px;
}

.activity-item {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfcff;
}

.activity-item-head,
.lesson-roadmap-top,
.lesson-stage-head,
.lesson-asset-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.status-chip-success {
  background: var(--accent-soft);
  border-color: rgba(49, 180, 106, 0.2);
  color: var(--accent-strong);
}

.status-chip-danger {
  background: #fff3f3;
  border-color: rgba(214, 74, 74, 0.22);
  color: #b84a4a;
}

.status-chip-muted {
  background: #f7f8fb;
  color: var(--ink-soft);
}

.empty-state-panel {
  padding: 34px;
}

.empty-state,
.empty-state-compact {
  display: grid;
  gap: 8px;
  place-items: center;
  text-align: center;
}

.empty-state h3,
.empty-state-compact h3 {
  margin: 0;
}

.empty-state-compact {
  place-items: start;
  text-align: left;
}

.learning-section {
  padding-bottom: 28px;
}

.lesson-roadmap {
  display: grid;
  gap: 14px;
}

.lesson-roadmap-card {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fbfcff;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.lesson-roadmap-card:hover {
  transform: translateY(-2px);
  border-color: rgba(49, 180, 106, 0.32);
  box-shadow: 0 16px 30px rgba(44, 67, 101, 0.08);
}

.module-disclosure {
  display: grid;
  gap: 18px;
}

.module-disclosure .content-disclosure-summary h2 {
  margin: 2px 0 0;
}

.lesson-roadmap-link {
  color: var(--accent-strong);
}

.lesson-roadmap-card .muted {
  font-size: 15px;
}

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

.lesson-roadmap-card strong {
  font-size: 18px;
  line-height: 1.4;
}

.course-overview-panel.course-overview-panel-compact {
  grid-template-columns: minmax(0, 0.68fr) minmax(560px, 1.32fr);
  gap: 18px;
  min-height: 0;
  padding: 20px 22px;
  align-items: stretch;
}

.course-overview-panel.course-overview-panel-compact .hero-copy {
  align-self: center;
}

.course-overview-panel.course-overview-panel-compact .hero-copy h2 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.12;
}

.course-overview-panel.course-overview-panel-compact .hero-copy .muted {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.course-overview-panel.course-overview-panel-compact .hero-copy .muted:first-of-type {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.course-overview-panel.course-overview-panel-compact .test-progress-bar {
  grid-column: 1 / -1;
  margin-top: 0;
}

.course-overview-side {
  gap: 12px;
}

.course-overview-panel-compact .hero-metrics-compact {
  grid-template-columns: 1fr;
  gap: 10px;
}

.course-overview-panel.course-overview-panel-compact .course-overview-side {
  grid-template-columns: minmax(130px, 0.24fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.course-overview-panel-compact .hero-metric {
  min-height: 0;
  padding: 12px 14px;
  border-radius: 14px;
}

.course-overview-panel-compact .hero-metric strong {
  margin-top: 4px;
  font-size: 20px;
}

.course-overview-next.course-overview-next-compact {
  min-height: 0;
  padding: 18px 20px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(31, 54, 88, 0.08);
}

.course-overview-next.course-overview-next-compact h3 {
  max-width: 680px;
  font-size: 21px;
  line-height: 1.28;
}

.course-overview-next.course-overview-next-compact .editor-kicker {
  margin-bottom: 6px;
}

.course-overview-next.course-overview-next-compact .action-btn {
  flex: 0 0 auto;
}

.module-roadmap-section.learning-section {
  padding: 16px 18px;
  margin-bottom: 12px;
}

.module-roadmap-section .content-disclosure-summary {
  min-height: 54px;
  padding: 8px 0 10px;
  align-items: center;
}

.module-disclosure {
  gap: 12px;
}

.module-disclosure .content-disclosure-summary h2 {
  margin: 0;
  font-size: 22px;
}

.module-roadmap-section .editor-kicker {
  margin-bottom: 4px;
}

.lesson-roadmap {
  gap: 10px;
}

.lesson-roadmap-card {
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
}

.lesson-roadmap-top {
  align-items: center;
  margin-bottom: 0;
}

.lesson-roadmap-card strong {
  font-size: 16px;
  line-height: 1.32;
}

.lesson-roadmap-flags {
  gap: 8px;
}

.lesson-roadmap-card .status-chip {
  min-height: 28px;
  padding: 4px 10px;
}

.course-overview-panel {
  display: grid;
  gap: 22px;
}

.course-overview-panel-compact {
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.9fr);
  align-items: start;
}

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

.hero-metrics-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.course-overview-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 6px;
}

.course-overview-next h3 {
  margin: 0 0 8px;
  font-size: 28px;
  color: var(--navy);
}

.course-overview-next-compact {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #f8fbff;
}

.course-overview-next-compact h3 {
  font-size: 22px;
  line-height: 1.35;
}

.learning-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.learning-sidebar {
  position: sticky;
  top: 22px;
}

.step-outline {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.outline-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfcff;
}

.outline-item.active {
  border-color: rgba(49, 180, 106, 0.36);
  box-shadow: 0 0 0 3px rgba(49, 180, 106, 0.12);
}

.outline-index {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
}

.outline-copy {
  display: grid;
  gap: 4px;
}

.outline-copy small {
  color: var(--ink-soft);
}

.lesson-stage {
  padding: 30px;
}

.lesson-body {
  margin: 22px 0;
  white-space: pre-line;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.7;
}

.lesson-asset {
  padding: 18px 0;
  border-top: 1px solid #edf1f7;
}

.lesson-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.resource-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  background: #f3f7fc;
  color: var(--navy);
  font-weight: 600;
}

.step-card-static {
  cursor: default;
}

.course-access-row {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid #edf1f7;
}

.course-access-row:first-of-type {
  border-top: 0;
}

.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.checkbox-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}

.access-admin-shell {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.access-admin-shell-users {
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
}

.settings-tabs {
  margin-bottom: 18px;
}

.settings-single-panel {
  display: block;
}

.settings-department-create-form {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.settings-department-create-form .action-btn {
  min-height: 48px;
  padding-inline: 22px;
  width: auto;
}

.settings-department-list {
  gap: 8px;
}

.settings-department-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
}

.settings-department-title {
  color: var(--ink);
  font-weight: 500;
}

.settings-department-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.settings-department-actions form {
  margin: 0;
}

.settings-department-icon {
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: #9aa3b2;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}

.settings-department-icon:hover,
.settings-department-icon:focus-visible {
  border-color: transparent;
  background: #f2f4f7;
  box-shadow: none;
  color: #667085;
}

.settings-department-delete {
  color: #b06f7a;
}

.settings-department-delete:hover,
.settings-department-delete:focus-visible {
  background: #f6eef0;
  color: #9f1d2e;
}

.access-profile-panel,
.access-editor-panel {
  min-width: 0;
}

.access-profile-list {
  margin-top: 18px;
}

.access-profile-link span {
  color: var(--ink-soft);
}

.access-editor-head,
.access-course-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.access-editor-head {
  margin-bottom: 20px;
}

.access-activation-box {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
  overflow-wrap: anywhere;
}

.access-activation-box span {
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

.access-role-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.access-role-card {
  appearance: none;
  text-align: left;
  min-height: 112px;
  padding: 14px;
  border: 1px solid #e4eaf2;
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
}

.access-role-card.active {
  border-color: rgba(190, 30, 45, 0.36);
  background: #fff7f7;
}

.access-role-card:hover,
.access-role-card:focus-visible {
  border-color: rgba(190, 30, 45, 0.28);
  background: #fffafa;
}

.access-role-card strong,
.access-role-card span {
  display: block;
}

.access-role-card strong {
  margin-bottom: 8px;
  color: var(--ink);
}

.access-role-card span {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.45;
}

.access-status-field {
  max-width: 260px;
}

.access-course-matrix {
  margin-top: 22px;
}

.access-course-row {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  align-items: center;
}

.access-course-title strong,
.access-course-title span {
  display: block;
}

.access-course-title span {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 13px;
}

.access-right-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(118px, 1fr));
  gap: 10px;
}

.access-right-grid label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #e4eaf2;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
}

.access-users-panel {
  margin-top: 24px;
}

.access-users-table-wrap {
  overflow-x: auto;
}

.access-users-table th,
.access-users-table td {
  white-space: nowrap;
}

.access-filter-tabs {
  display: flex;
  gap: 8px;
  margin: 14px 0 16px;
}

.access-user-link span {
  line-height: 1.35;
}

.access-user-link-compact {
  min-height: 42px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.access-status-row {
  max-width: 260px;
}

.bitrix-sync-form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px 14px;
  flex-wrap: wrap;
}

.bitrix-sync-form .muted {
  font-size: 13px;
}

.access-role-note {
  margin-top: 12px;
}

.step-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.step-card p {
  margin: 0;
  color: var(--ink-soft);
}

.editor-card h2 {
  margin-bottom: 14px;
}

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

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

.login-label {
  display: grid;
  gap: 8px;
}

.login-label span {
  color: var(--ink-soft);
  font-size: 14px;
}

.login-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fbfcff;
  color: var(--ink);
  font: inherit;
}

.login-input:focus,
.topbar-search input:focus {
  outline: none;
  border-color: rgba(49, 180, 106, 0.45);
  box-shadow: 0 0 0 4px rgba(49, 180, 106, 0.12);
}

.textarea-input {
  min-height: 110px;
  resize: vertical;
}

.textarea-large {
  min-height: 240px;
}

.textarea-xl {
  min-height: 360px;
}

.button-row,
.panel-row,
.top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.panel-row {
  justify-content: space-between;
  margin-bottom: 12px;
}

.action-link {
  display: inline-flex;
}

.access-box,
.llm-box {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #f8fbff;
}

.llm-box {
  background: linear-gradient(180deg, #f6fbff 0%, #eef7ff 100%);
}

.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.employees-table th:nth-child(1),
.employees-table td:nth-child(1) {
  width: 34%;
}

.employees-table th:nth-child(2),
.employees-table td:nth-child(2) {
  width: 150px;
}

.employees-table th:nth-child(3),
.employees-table td:nth-child(3) {
  width: 130px;
}

.employees-table th:nth-child(4),
.employees-table td:nth-child(4) {
  width: 24%;
}

.employees-table th:nth-child(5),
.employees-table td:nth-child(5) {
  width: 150px;
}

.table thead th {
  padding: 14px 12px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}

.table tbody td {
  padding: 16px 12px;
  vertical-align: top;
  border-bottom: 1px solid #edf1f7;
  overflow-wrap: anywhere;
}

.table tbody tr:hover td {
  background: #fbfdff;
}

.table-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f5f8fc;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
}

.table-badge-success {
  background: #effbf4;
  color: #1d7a47;
  border-color: #caecd7;
}

.table-badge-warning {
  background: #fff7e8;
  color: #8a5a12;
  border-color: #f1d5a2;
}

.table-badge-invited {
  background: #fff4f4;
  color: #9a2f3d;
  border-color: #f1c6cc;
}

.table-badge-bitrix {
  background: #eef6ff;
  color: #285b8d;
  border-color: #c9dff5;
}

.table-badge-dismissed {
  background: #f2f4f7;
  color: #626b79;
  border-color: #d9dee7;
}

.employee-restore-form {
  margin-top: 8px;
}

.employee-restore-form button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.employee-restore-form button:hover,
.employee-restore-form button:focus-visible {
  text-decoration: underline;
}

.employee-open-form {
  margin: 0;
}

.employee-open-form button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-weight: 400;
  cursor: pointer;
  text-align: left;
}

.employee-open-form button:hover,
.employee-open-form button:focus-visible {
  text-decoration: underline;
}

.employee-list-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.employees-toolbar-search {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
}

.employee-filters {
  margin: 0 0 24px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfdff;
}

.employee-filter-search {
  margin-bottom: 14px;
}

.employee-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.employee-filter-actions,
.employee-table-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.employee-filter-actions {
  margin-top: 16px;
}

.employee-table-actions {
  flex-wrap: wrap;
}

.employee-filters-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 0 0 20px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.employee-filters-compact .employee-filter-search {
  margin: 0;
}

.employee-filters-compact .login-label span {
  font-size: 12px;
}

.employees-last-activity {
  font-size: 13px;
}

.employee-access-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}

.employee-access-tabs .notifications-filter-tab {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 400;
}

.employee-incident-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.employee-incident-notice a {
  color: #8a5a12;
  font-weight: 700;
}

.employee-profile-form {
  display: grid;
  gap: 20px;
}

.employee-form-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 16px 18px;
  align-items: start;
}

.employee-form-grid .login-label {
  margin: 0;
}

.employee-main-fields .login-label:first-child {
  grid-column: 1 / -1;
}

.employee-access-section {
  display: grid;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.employee-access-section h3 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 18px;
}

.action-btn-danger {
  color: #9a2f3d;
  border-color: #f1c6cc;
  background: #fff4f4;
}

.action-btn-danger:hover,
.action-btn-danger:focus-visible {
  background: #ffe8eb;
  border-color: #e9aab4;
}

.course-review-filters {
  grid-template-columns: minmax(180px, 260px) minmax(180px, 260px) auto;
  justify-content: start;
}

.course-review-filters .action-btn {
  width: auto;
  min-width: 112px;
}

.course-analytics-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  width: fit-content;
  padding: 5px;
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fbff;
}

.course-analytics-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.course-analytics-tabs a:hover,
.course-analytics-tabs a:focus-visible,
.course-analytics-tabs a.active {
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(20, 46, 93, 0.08);
}

.course-progress-panel {
  display: grid;
  gap: 18px;
}

.course-progress-filters {
  grid-template-columns: minmax(220px, 320px) minmax(180px, 240px) auto;
  justify-content: start;
}

.course-progress-filters .action-btn {
  width: auto;
  min-width: 112px;
}

.course-progress-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.course-progress-kpi {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fbff;
  padding: 14px 16px;
  min-width: 0;
}

.course-progress-kpi span {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 6px;
}

.course-progress-kpi strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1.1;
}

.course-progress-summary {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 360px 18px;
  align-items: center;
  background: #ffffff;
}

.course-progress-person {
  min-width: 0;
}

.course-progress-person strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-progress-summary-metrics {
  display: grid;
  grid-template-columns: 220px 110px;
  align-items: center;
  justify-self: end;
  gap: 18px;
  width: 348px;
  text-align: left;
}

.course-progress-bar-cell {
  display: grid;
  gap: 7px;
  width: 100%;
  min-width: 0;
}

.course-progress-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

.course-progress-bar-head strong {
  color: var(--ink);
  font-size: 14px;
}

.course-progress-bar {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7edf5;
}

.course-progress-bar span {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: #22a66f;
}

.course-progress-date {
  min-width: 0;
  text-align: right;
}

.course-progress-table th,
.course-progress-table td {
  white-space: normal;
}

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

.course-page-intro {
  margin: 8px 0 0;
  max-width: 760px;
}

.course-review-table th,
.course-review-table td {
  vertical-align: top;
}

.course-review-cell {
  min-width: 220px;
  max-width: 340px;
}

.course-review-question,
.course-review-answer {
  white-space: normal;
  line-height: 1.45;
}

.course-review-form {
  display: grid;
  gap: 10px;
  min-width: 220px;
}

.course-review-score {
  max-width: 120px;
}

.course-review-tree {
  display: grid;
  gap: 12px;
}

.course-review-group {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfdff;
  overflow: hidden;
}

.course-review-group[open] {
  box-shadow: 0 10px 22px rgba(20, 46, 93, 0.05);
}

.course-review-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
}

.course-review-summary::-webkit-details-marker {
  display: none;
}

.course-review-summary::after {
  content: "⌄";
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
  margin-left: auto;
}

.course-review-group[open] > .course-review-summary::after {
  transform: rotate(180deg);
}

.course-review-summary-level1 {
  background: #ffffff;
}

.course-review-summary-level2 {
  background: #f8fbff;
}

.course-review-summary-level3 {
  background: #ffffff;
}

.course-progress-summary.course-review-summary {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 360px 18px;
  align-items: center;
  justify-content: normal;
}

.course-progress-summary.course-review-summary::after {
  grid-column: 3;
  justify-self: end;
  margin-left: 0;
}

.course-progress-summary .course-progress-person {
  grid-column: 1;
}

.course-progress-summary .course-progress-summary-metrics {
  grid-column: 2;
}

.course-review-group-body {
  padding: 0 16px 16px;
  display: grid;
  gap: 10px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.22s ease, padding-top 0.22s ease;
  padding-top: 0;
}

.course-review-group-sub {
  border-radius: 16px;
}

.course-review-group-lesson {
  border-radius: 14px;
  background: #fff;
}

.course-review-table-compact th,
.course-review-table-compact td {
  padding-top: 12px;
  padding-bottom: 12px;
}

.course-review-table-compact {
  margin-top: 4px;
}

.course-review-group[open] > .course-review-group-body {
  opacity: 1;
  max-height: 6000px;
  padding-top: 10px;
}

.course-assignments-panel {
  display: grid;
  gap: 22px;
}

.course-assignment-form {
  grid-template-columns: minmax(260px, 1.4fr) minmax(160px, 0.7fr) minmax(160px, 0.7fr) auto auto;
  align-items: end;
  gap: 14px;
}

.course-assignment-employee {
  min-width: 0;
}

.course-assignment-no-due {
  min-height: 44px;
  align-items: center;
  padding-bottom: 2px;
}

.course-assignment-actions {
  display: flex;
  justify-content: flex-end;
}

.course-assignment-actions .action-btn {
  width: auto;
  min-width: 150px;
}

.course-assignment-list {
  display: grid;
  gap: 10px;
}

.course-assignment-item {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(224, 232, 242, 0.95);
  border-radius: var(--radius-md);
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.course-assignment-item:hover,
.course-assignment-item:focus-visible {
  border-color: rgba(17, 143, 160, 0.3);
  box-shadow: 0 16px 34px rgba(31, 47, 71, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.course-assignment-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: var(--ink-soft);
  font-size: 14px;
}

.assignment-drawer[hidden] {
  display: none;
}

.assignment-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
}

.assignment-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 27, 40, 0.36);
  backdrop-filter: blur(2px);
}

.assignment-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(440px, 100vw);
  min-height: 100vh;
  padding: 28px;
  border-left: 1px solid rgba(230, 232, 238, 0.95);
  background: #fff;
  box-shadow: -22px 0 48px rgba(31, 47, 71, 0.14);
}

.assignment-drawer-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.assignment-drawer-head h3 {
  margin: 4px 0 0;
  font-size: 24px;
}

.assignment-drawer-form {
  display: grid;
  gap: 18px;
}

.assignment-drawer-person {
  display: grid;
  gap: 5px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: #f7fafc;
}

.assignment-drawer-person span {
  color: var(--ink-soft);
  font-size: 14px;
}

.assignment-drawer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
}

.answer-card {
  padding: 20px;
}

.answer-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.question-text,
.code-block {
  color: var(--navy);
}

.code-block {
  white-space: pre-wrap;
  padding: 18px;
  border-radius: 18px;
  background: #f7f9fc;
  border: 1px solid var(--line);
}

.media-item,
.question-block {
  padding: 12px 0;
  border-bottom: 1px solid #edf1f7;
}

.media-item:last-child,
.question-block:last-child {
  border-bottom: 0;
}

.notice-success,
.notice-error,
.login-error {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 16px;
}

.notice-success {
  background: #effbf4;
  color: #1d7a47;
  border: 1px solid #caecd7;
}

.notice-error,
.login-error {
  background: var(--danger-soft);
  color: #984242;
  border: 1px solid #f0c9c9;
}

.notice-warning {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff7e8;
  color: #8a5a12;
  border: 1px solid #f1d5a2;
}

.asset-preview {
  width: 100%;
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: white;
}

.video-frame {
  position: relative;
  width: 100%;
  margin-top: 12px;
  padding-top: 56.25%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0f1726;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background:
    radial-gradient(circle at top left, rgba(49, 180, 106, 0.1), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
}

.login-card {
  width: min(460px, 100%);
  padding: 30px;
}

.login-card-wide {
  width: min(520px, 100%);
}

.compact-form,
.inline-form {
  margin-top: 12px;
}

body.modal-open {
  overflow: hidden;
}

.lesson-meta-card {
  display: block;
  gap: 0;
  padding: 0;
}

.lesson-meta-card-compact {
  opacity: 0.78;
}

.lesson-meta-card h2,
.inline-docx-form strong {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.lesson-meta-card .editor-kicker,
.inline-docx-form .editor-kicker {
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.lesson-meta-card .login-label span,
.inline-docx-form .login-label span {
  font-size: 13px;
}

.lesson-meta-card .login-input,
.inline-docx-form .login-input {
  min-height: 42px;
}

.lesson-meta-card textarea.login-input {
  min-height: 90px;
}

.content-disclosure {
  margin: 0 0 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.content-disclosure[open] {
  padding-bottom: 10px;
}

.content-disclosure-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  list-style: none;
  cursor: pointer;
}

.content-disclosure-summary::-webkit-details-marker {
  display: none;
}

.content-disclosure-note {
  margin: 4px 0 0;
  font-size: 13px;
}

.content-disclosure-body {
  padding: 4px 0 6px;
}

.content-disclosure-actions {
  align-items: center;
  justify-content: flex-start;
}

.content-disclosure-actions .login-input[type="file"] {
  width: min(420px, 100%);
}

.content-disclosure-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.lesson-meta-full {
  grid-column: 1 / -1;
}

.lesson-editor-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 64px);
  box-shadow: 0 18px 48px rgba(36, 54, 79, 0.05);
}

#lesson-editor,
#kb-editor {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.65;
}

.ce-block__content,
.ce-toolbar__content {
  max-width: 900px;
}

.lesson-editor-shell .ce-toolbar__plus,
.lesson-editor-shell .ce-toolbar__settings-btn,
.lesson-editor-shell .ce-inline-toolbar,
.lesson-editor-shell .ce-conversion-toolbar,
.lesson-editor-shell .ce-popover {
  z-index: 40;
}

.lesson-editor-shell .ce-header {
  color: var(--navy);
  line-height: 1.2;
}

.lesson-editor-shell .editor-heading-block {
  margin: 0;
  color: var(--navy);
  line-height: 1.2;
  outline: none;
}

.lesson-editor-shell h2.editor-heading-block {
  font-size: clamp(32px, 3vw, 44px);
}

.lesson-editor-shell h3.editor-heading-block {
  font-size: clamp(24px, 2.2vw, 32px);
}

.lesson-editor-shell h4.editor-heading-block {
  font-size: clamp(20px, 1.8vw, 24px);
}

.lesson-editor-shell .editor-heading-block:empty:before {
  content: attr(data-placeholder);
  color: #9aa6b2;
}

.lesson-editor-shell .ce-header[data-level="2"] {
  font-size: clamp(32px, 3vw, 44px);
}

.lesson-editor-shell .ce-header[data-level="3"] {
  font-size: clamp(24px, 2.2vw, 32px);
}

.lesson-editor-shell .ce-header[data-level="4"] {
  font-size: clamp(20px, 1.8vw, 24px);
}

.lesson-editor-shell .ce-paragraph,
.lesson-editor-shell .cdx-list,
.lesson-editor-shell .cdx-list__item,
.lesson-editor-shell .editor-nested-list,
.lesson-editor-shell .editor-nested-list li,
.lesson-editor-shell .cdx-quote__text,
.lesson-editor-shell .cdx-quote__caption {
  color: #24364f;
  font-size: 18px;
  line-height: 1.75;
}

.lesson-editor-shell .ce-block {
  padding: 0.3em 0;
}

.lesson-editor-shell .editor-nested-list {
  margin: 0;
  padding-left: 34px;
  outline: none;
}

.lesson-editor-shell .editor-nested-list ul,
.lesson-editor-shell .editor-nested-list ol {
  margin: 6px 0 0 22px;
  padding-left: 18px;
}

.lesson-editor-shell .ce-toolbar__plus,
.lesson-editor-shell .ce-toolbar__settings-btn {
  color: var(--navy);
}

.lesson-editor-shell .ce-popover-item__title,
.lesson-editor-shell .ce-popover-item__icon {
  color: var(--navy);
}

.editor-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  overflow-y: auto;
  padding: 16px 0;
}

.editor-modal-backdrop,
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 31, 52, 0.48);
  backdrop-filter: blur(3px);
}

.editor-modal-dialog,
.lightbox-dialog {
  position: relative;
  z-index: 1;
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: 16px auto;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(15, 35, 70, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.editor-modal-dialog > form {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.editor-modal-head,
.editor-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
}

.editor-modal-head {
  border-bottom: 1px solid var(--line);
}

.editor-modal-foot {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
}

.editor-modal-head h3 {
  margin: 0;
  font-size: 22px;
}

.editor-modal-close,
.lightbox-close {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  background: #f4f7fb;
  color: var(--navy);
  font-size: 24px;
  cursor: pointer;
}

.editor-modal-body {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  gap: 16px;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.editor-modal-error {
  min-height: 20px;
  color: var(--danger);
  font-size: 14px;
}

.editor-modal .textarea-input,
.editor-modal textarea.login-input {
  min-height: 120px;
}

.editor-placeholder-btn {
  min-height: 54px;
  padding: 0 20px;
  border: 1px dashed var(--line-strong);
  border-radius: 18px;
  background: #fbfcff;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.editor-media-render,
.editor-file-render {
  position: relative;
}

.editor-media-actions {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.editor-media-render:hover .editor-media-actions,
.editor-file-render:hover .editor-media-actions,
.editor-media-render:focus-within .editor-media-actions,
.editor-file-render:focus-within .editor-media-actions {
  opacity: 1;
  pointer-events: auto;
}

.editor-media-edit {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(31, 54, 88, 0.92);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 35, 70, 0.16);
}

.editor-media-chipset {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 20px rgba(15, 35, 70, 0.08);
}

.editor-media-chip {
  min-width: 36px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.editor-media-chip:hover {
  border-color: var(--line-strong);
  background: #f7fbff;
}

.editor-media-chip.is-active {
  border-color: rgba(49, 180, 106, 0.4);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.lesson-image-block {
  margin: 28px 0;
}

.lesson-image-block img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid #dbe5f3;
  box-shadow: 0 12px 28px rgba(15, 35, 70, 0.08);
  cursor: zoom-in;
}

.lesson-image-block[data-width="25"] img {
  width: 25%;
}

.lesson-image-block[data-width="50"] img {
  width: 50%;
}

.lesson-image-block[data-width="75"] img {
  width: 75%;
}

.lesson-image-block[data-width="100"] img {
  width: 100%;
}

.lesson-image-block[data-align="left"] img {
  margin-left: 0;
  margin-right: auto;
}

.lesson-image-block[data-align="center"] img {
  margin-left: auto;
  margin-right: auto;
}

.lesson-image-block[data-align="right"] img {
  margin-left: auto;
  margin-right: 0;
}

.lesson-image-caption {
  margin-top: 8px;
  color: #5b6b86;
  font-size: 14px;
  text-align: center;
}

.lesson-video-block {
  margin: 32px 0;
}

.lesson-video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(15, 35, 70, 0.12);
}

.lesson-video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.lesson-video-caption {
  margin-top: 8px;
  color: #5b6b86;
  font-size: 14px;
  text-align: center;
}

.longread-resource-card {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fbfcff;
}

.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
}

.lightbox-dialog {
  width: min(1160px, calc(100vw - 32px));
  padding: 16px;
  background: #0f1621;
}

.lightbox-dialog img {
  display: block;
  width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  border-radius: 18px;
}

.longread-stage {
  display: grid;
  justify-content: center;
}

.longread-hero,
.longread-article {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.longread-stage.learning-fullwidth,
.longread-hero.learning-fullwidth,
.longread-article.learning-fullwidth {
  width: 100%;
  max-width: none;
  margin: 0;
}

.longread-article {
  padding: clamp(24px, 4vw, 64px);
}

@media (max-width: 1280px) {
  .app-shell {
    grid-template-columns: 72px 240px minmax(0, 1fr);
  }

  .content-workspace {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .learning-layout {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .app-shell-simple {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .builder-page {
    grid-template-columns: 280px minmax(0, 1fr);
  }
}

@media (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 72px 1fr;
  }

  .app-shell-simple {
    grid-template-columns: 1fr;
  }

  .side-panel {
    display: none;
  }

  .split,
  .split-admin,
  .split-content,
  .editor-grid,
  .content-workspace,
  .form-grid,
  .meta-grid,
  .course-access-row {
    grid-template-columns: 1fr;
  }

  .access-admin-shell,
  .access-role-summary,
  .access-course-row,
  .access-right-grid {
    grid-template-columns: 1fr;
  }

  .access-editor-head,
  .access-course-head {
    align-items: stretch;
    flex-direction: column;
  }

  .content-sidebar {
    position: static;
  }

  .learning-layout,
  .hero-panel,
  .builder-page,
  .builder-assets,
  .lesson-editor-layout,
  .lesson-assets-grid,
  .lesson-materials-layout {
    grid-template-columns: 1fr;
  }

  .longread-hero {
    flex-direction: column;
  }

  .longread-article {
    padding: 28px 22px;
  }

  .lesson-editor-shell {
    padding: 24px;
  }

  .lesson-meta-grid {
    grid-template-columns: 1fr;
  }

  .employee-filter-grid {
    grid-template-columns: 1fr;
  }

  .employee-filters-compact {
    grid-template-columns: 1fr;
  }

  .course-analytics-tabs,
  .course-analytics-tabs a {
    width: 100%;
  }

  .course-progress-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-progress-summary {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .course-progress-summary.course-review-summary {
    grid-template-columns: 1fr 18px;
  }

  .course-progress-summary.course-review-summary::after {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .course-progress-summary .course-progress-person {
    grid-column: 1;
  }

  .course-progress-summary .course-progress-summary-metrics {
    grid-column: 1;
  }

  .course-progress-summary-metrics {
    grid-template-columns: 1fr;
    justify-self: stretch;
    justify-content: flex-start;
    min-width: 0;
    max-width: none;
    text-align: left;
  }

  .course-progress-bar-cell {
    width: min(100%, 320px);
  }

  .course-progress-date {
    text-align: left;
  }

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

  .employee-list-actions {
    flex-wrap: wrap;
  }

  #lesson-editor,
  #kb-editor,
  .ce-block__content,
  .ce-toolbar__content {
    max-width: 100%;
  }
}

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

  .icon-rail {
    display: none;
  }

  .workspace {
    padding: 14px;
  }

  .course-progress-kpis {
    grid-template-columns: 1fr;
  }

  .topbar {
    padding: 6px 4px 14px;
    flex-direction: column;
    align-items: stretch;
  }

  .topbar-search {
    max-width: none;
  }

  .page-head h1 {
    font-size: 28px;
  }

  .panel,
  .card {
    padding: 18px;
    border-radius: 22px;
  }

  .editor-modal-dialog,
  .lightbox-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    margin: 10px auto;
  }

  .editor-modal-head,
  .editor-modal-foot,
  .editor-modal-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .lesson-image-block[data-width="25"] img,
  .lesson-image-block[data-width="50"] img,
  .lesson-image-block[data-width="75"] img,
.lesson-image-block[data-width="100"] img {
    width: 100%;
  }
}

.button-row-stack {
  align-items: stretch;
}

.learning-hint-panel {
  max-width: 920px;
  margin: 0 auto 18px;
}

.lesson-roadmap-flags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.test-panel,
.result-panel {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
}

.test-progress {
  display: grid;
  gap: 10px;
}

.test-progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #edf3fb;
  overflow: hidden;
}

.test-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #2bb7c5);
}

.test-hero-cover {
  align-self: stretch;
  width: min(260px, 24vw);
  min-height: 140px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
}

.test-hero-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.employee-tests-panel {
  display: grid;
  gap: 22px;
  margin-bottom: 22px;
}

.employee-test-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
}

.employee-test-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  text-transform: lowercase;
}

.employee-test-tab span {
  color: inherit;
  font-size: 12px;
  font-weight: 700;
}

.employee-test-tab:hover,
.employee-test-tab:focus-visible {
  color: var(--navy);
  outline: none;
}

.employee-test-tab.active {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 8px 18px rgba(18, 51, 92, 0.08);
}

.employee-test-section {
  display: grid;
  gap: 12px;
}

.employee-test-list {
  display: grid;
  gap: 12px;
}

.employee-test-card {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  background: #fff;
}

.employee-test-cover {
  width: 148px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #f3f6fa;
}

.employee-test-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.employee-test-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.employee-test-title-row h3 {
  margin: 0;
  color: #202936;
  font-size: 18px;
  line-height: 1.25;
}

.employee-test-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.employee-test-actions strong {
  color: #202936;
  font-size: 20px;
}

.test-form,
.test-question,
.result-list {
  display: grid;
  gap: 18px;
}

.learning-progress-card {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #f8fbff;
  border: 1px solid var(--line);
}

.lesson-open-answer-field {
  gap: 10px;
}

.lesson-question-panel {
  margin-top: 20px;
}

.compact-disclosure {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.compact-disclosure summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink-strong);
  list-style: none;
}

.compact-disclosure summary::-webkit-details-marker {
  display: none;
}

.compact-disclosure summary::after {
  content: "+";
  float: right;
  color: var(--ink-soft);
}

.compact-disclosure[open] summary::after {
  content: "−";
}

.lesson-question-form {
  margin-top: 14px;
}

.lesson-question-textarea {
  min-height: 132px;
}

.lesson-open-answer {
  min-height: 220px;
  width: 100%;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfcff;
  color: var(--ink);
  font: inherit;
  line-height: 1.7;
  resize: vertical;
  box-sizing: border-box;
}

.lesson-open-answer:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(17, 143, 160, 0.12);
}

.lesson-overview-panel-soft {
  background: linear-gradient(180deg, #fdfefe 0%, #f7fbff 100%);
  border-color: rgba(214, 225, 240, 0.95);
}

.lesson-overview-meta span + span::before {
  content: "•";
  margin-right: 18px;
  color: #a0afc5;
}

.lesson-sticky-actions.learning-fullwidth {
  width: 100%;
  max-width: none;
}

.learning-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.learning-progress-head span {
  color: var(--ink-soft);
  font-size: 14px;
}

.choice-list {
  display: grid;
  gap: 12px;
}

.choice-card {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfcff;
  cursor: pointer;
}

.choice-card input {
  margin-top: 4px;
}

.choice-card div {
  display: grid;
  gap: 6px;
}

.choice-card span {
  color: var(--ink-soft);
  line-height: 1.6;
}

.question-review-list {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.question-review-list-compact {
  gap: 10px;
}

.question-review-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px 22px;
  background: #fff;
}

.question-review-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

.question-review-summary {
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  cursor: pointer;
}

.question-review-summary::-webkit-details-marker {
  display: none;
}

.question-review-summary-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.question-review-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.question-review-summary-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.question-review-body {
  padding: 16px 18px 18px;
  border-top: 1px solid var(--line);
}

.question-review-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.question-review-head h3 {
  margin: 8px 0 0;
  font-size: 20px;
  line-height: 1.35;
}

.question-review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 14px;
}

.question-review-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.question-review-answer {
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f7fbff;
}

.question-review-answer p {
  margin: 8px 0 0;
}

.question-review-form .field textarea {
  min-height: 120px;
}

.question-review-form-grid {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 14px 18px;
  align-items: end;
  margin-bottom: 14px;
}

.question-review-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 12px 0 14px;
  color: var(--ink);
}

.question-review-check input {
  width: 18px;
  height: 18px;
}

.question-review-publish-note {
  margin: 8px 0 14px;
}

.compact-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.question-filters-bar {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(200px, 260px) auto;
  gap: 10px;
  align-items: end;
  justify-content: start;
  margin: 18px 0 8px;
}

.question-filters-actions {
  display: flex;
  justify-content: flex-start;
}

.question-filters-actions .action-btn {
  width: auto;
  min-width: 108px;
}

.compact-field {
  gap: 8px;
}

.compact-filter select {
  min-width: 180px;
}

.compact-select {
  min-height: 44px;
  padding: 10px 42px 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background:
    linear-gradient(45deg, transparent 50%, #6b7383 50%) calc(100% - 20px) 18px / 7px 7px no-repeat,
    linear-gradient(135deg, #6b7383 50%, transparent 50%) calc(100% - 15px) 18px / 7px 7px no-repeat,
    #fbfcff;
  color: var(--ink);
  font: inherit;
  appearance: none;
}

.question-review-list .status-chip-new {
  background: rgba(255, 244, 244, 0.9);
  border-color: rgba(227, 6, 19, 0.22);
  color: #d90416;
}

.question-review-list .status-chip-in_progress {
  background: #ffffff;
  border-color: rgba(207, 213, 224, 0.95);
  color: #20242d;
}

.question-review-list .status-chip-answered {
  background: #f1f2f5;
  border-color: rgba(207, 213, 224, 0.95);
  color: #737b8a;
}

.empty-state {
  padding: 36px 20px;
  border: 1px dashed var(--line);
  border-radius: 20px;
  text-align: center;
  background: #f7fbff;
}

.status-chip-answered {
  border-color: rgba(32, 157, 90, 0.18);
  background: rgba(32, 157, 90, 0.1);
  color: #1c7b4e;
}

.status-chip-in_progress {
  border-color: rgba(227, 151, 39, 0.2);
  background: rgba(227, 151, 39, 0.12);
  color: #9f6410;
}

.lesson-faq-panel .compact-disclosure summary {
  font-weight: 700;
}

.lesson-faq-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.lesson-faq-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 18px;
  background: #fbfdff;
}

.lesson-faq-question {
  font-weight: 700;
  margin-bottom: 8px;
}

.lesson-faq-answer {
  line-height: 1.65;
}

.lesson-faq-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 14px;
}

.result-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
}

.result-summary-text {
  margin: 8px 0 0;
  color: var(--ink);
  font-weight: 600;
}

.result-summary-text-warning {
  color: #9f1239;
}

.result-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 18px 0 20px;
}

.result-summary-row-polished {
  align-items: stretch;
}

@media (max-width: 1100px) {
  .question-filters-bar {
    grid-template-columns: 1fr 1fr;
  }

  .question-review-form-grid {
    grid-template-columns: 1fr;
  }
}

.result-summary-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfcff;
  padding: 16px 18px;
}

.result-summary-grid-polished {
  margin-top: 0;
}

.result-completion-panel {
  max-width: none;
  margin: 0;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  align-items: center;
}

.result-next-note {
  display: grid;
  gap: 10px;
  align-content: center;
}

.result-next-note h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
}

.result-next-note .muted {
  margin: 0;
  line-height: 1.55;
}

.result-review-note {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
  gap: 22px;
}

.result-review-note h3 {
  margin: 6px 0 0;
  font-size: 18px;
  line-height: 1.35;
}

.result-review-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.result-review-columns ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--ink-soft);
  display: grid;
  gap: 6px;
}

.result-summary-card-primary {
  background: #f7fbff;
}

.result-summary-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.result-summary-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-soft);
  display: grid;
  gap: 6px;
}

.result-score {
  min-width: 112px;
  height: 112px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  font-size: 32px;
  font-weight: 800;
  color: var(--navy);
  background: linear-gradient(135deg, #edf7ff, #eefced);
  border: 1px solid var(--line);
}

.result-score-success {
  color: var(--accent-strong);
  background: linear-gradient(135deg, #ecfbf2, #f5fff8);
  border-color: rgba(49, 180, 106, 0.22);
}

.result-score-warning {
  color: #9f6410;
  background: linear-gradient(135deg, #fff7e9, #fffdf7);
  border-color: rgba(227, 151, 39, 0.24);
}

.result-score-small {
  min-width: 88px;
  height: 88px;
  font-size: 28px;
}

.result-item {
  display: grid;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fbfcff;
}

.result-feedback-card {
  gap: 14px;
}

.result-next-panel {
  margin-bottom: 8px;
}

.result-status-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.result-next-card,
.result-guidance-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfcff;
  padding: 18px;
}

.result-next-card {
  width: min(340px, 100%);
  display: grid;
  align-content: start;
  gap: 10px;
}

.result-next-card h3,
.result-guidance-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
}

.result-next-card .muted,
.result-guidance-card .muted {
  margin: 0;
  line-height: 1.55;
}

.result-next-actions {
  gap: 10px;
}

.result-next-actions .inline-form,
.result-guidance-card .inline-form,
.result-bottom-actions .inline-form {
  margin-top: 0;
}

.result-guidance-card {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.result-panel-compact {
  gap: 22px;
}

.result-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.result-list-compact {
  gap: 14px;
}

.result-details-disclosure {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
}

.result-details-disclosure summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  font-weight: 800;
  color: var(--ink-strong);
  list-style: none;
}

.result-details-disclosure summary::-webkit-details-marker {
  display: none;
}

.result-details-disclosure .result-list {
  padding: 0 18px 18px;
}

.result-item-compact {
  gap: 10px;
  padding: 16px 18px;
}

.result-item-success {
  border-color: rgba(49, 180, 106, 0.2);
  background: #fbfffc;
}

.result-item-partial {
  border-color: rgba(227, 151, 39, 0.2);
  background: #fffdf7;
}

.result-item-missed {
  border-color: rgba(214, 74, 74, 0.18);
  background: #fffafa;
}

.result-item-compact h3 {
  margin: 0;
  font-size: 26px;
}

.result-item-compact .muted {
  font-size: 15px;
}

.result-item-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.result-bottom-actions {
  justify-content: flex-end;
}

.grading-pending-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 28px;
  box-shadow: var(--shadow);
}

.grading-spinner {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 8px solid #e8eef7;
  border-top-color: var(--accent);
  animation: grading-spin 1s linear infinite;
}

@keyframes grading-spin {
  to {
    transform: rotate(360deg);
  }
}

.callout {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid #d8e4f5;
  background: #f8fbff;
  display: grid;
  gap: 8px;
}

.callout-note {
  border-color: #d8e4f5;
}

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

  .result-summary-row {
    flex-direction: column;
    align-items: stretch;
  }

  .result-next-card {
    width: auto;
  }

  .result-completion-panel,
  .result-review-note {
    grid-template-columns: 1fr;
  }

  .result-guidance-card {
    grid-template-columns: 1fr;
  }

  .result-bottom-actions {
    justify-content: flex-start;
  }
}

.lesson-test-grid {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.lesson-test-list,
.lesson-test-editor {
  display: grid;
  align-self: start;
  gap: 10px;
}

.lesson-test-disclosure {
  margin-top: 18px;
}

.lesson-test-disclosure .content-disclosure-chips {
  display: none;
}

.lesson-test-list-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 0 0 8px;
}

.lesson-test-form {
  gap: 16px;
  border-radius: 8px;
}

.lesson-test-options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.lesson-answer-option {
  position: relative;
  display: grid;
  grid-template-columns: 18px 86px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.lesson-answer-option.is-correct {
  border-color: rgba(40, 169, 104, 0.5);
  background: #f1fbf6;
  box-shadow: none;
}

.lesson-answer-option > span {
  color: #617392;
  font-size: 13px;
  line-height: 1.2;
}

.lesson-answer-option .login-input {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(197, 214, 234, 0.9);
  background: #fff;
  box-shadow: none;
}

.lesson-answer-option .login-input:focus {
  border-color: rgba(17, 143, 160, 0.5);
  box-shadow: 0 0 0 3px rgba(17, 143, 160, 0.08);
}

.answer-correct-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.answer-correct-mark {
  width: 14px;
  height: 14px;
  border: 1.5px solid #9aa9bb;
  border-radius: 999px;
  background: #fff;
}

.lesson-answer-option.is-correct .answer-correct-mark {
  border-color: #28a968;
  background: radial-gradient(circle, #28a968 0 42%, transparent 46%);
}

.lesson-form-section-head {
  display: grid;
  gap: 4px;
}

.lesson-form-section-head h4 {
  margin: 0;
  font-size: 16px;
  color: var(--navy);
}

.lesson-form-section-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.lesson-inline-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.action-btn-danger {
  background: #fff2f2;
  color: #a33f3f;
  border: 1px solid #f1caca;
}

.action-btn-danger:hover {
  background: #ffe9e9;
}

.lesson-test-lines {
  display: grid;
  gap: 0;
  border-top: 0;
}

.lesson-test-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(224, 232, 242, 0.85);
}

.lesson-test-line.is-active {
  background: rgba(17, 143, 160, 0.06);
  border-left: 2px solid var(--accent);
  padding: 8px 8px 8px 10px;
  border-radius: 8px;
  box-shadow: none;
}

.lesson-test-line-main {
  display: grid;
  gap: 2px;
}

.lesson-test-open {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: inherit;
  text-decoration: none;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.lesson-test-open strong {
  color: var(--navy);
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lesson-test-number {
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.lesson-test-line-copy {
  display: grid;
  gap: 3px;
}

.lesson-test-line-copy > span {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.25;
}

.lesson-test-line-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  padding-top: 2px;
}

.mini-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-weight: 600;
  cursor: pointer;
}

.mini-icon-btn:hover {
  background: #f6f9ff;
}

.mini-icon-btn-grip {
  cursor: grab;
  color: var(--ink-soft);
}

.lesson-add-question-link,
.lesson-test-list-footer #new-question-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  appearance: none;
}

.lesson-add-question-link::before,
.lesson-test-list-footer #new-question-btn::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #f2f6fc;
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.lesson-add-question-link:hover,
.lesson-add-question-link:focus-visible,
.lesson-test-list-footer #new-question-btn:hover,
.lesson-test-list-footer #new-question-btn:focus-visible {
  transform: none;
  background: transparent;
  color: var(--accent-strong);
  box-shadow: none;
}

.lesson-add-question-link:hover::before,
.lesson-add-question-link:focus-visible::before,
.lesson-test-list-footer #new-question-btn:hover::before,
.lesson-test-list-footer #new-question-btn:focus-visible::before {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.action-btn-small {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
}

.lesson-test-disclosure .content-disclosure-body {
  padding-top: 12px;
}

.check-option {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 14px;
}

.check-option input {
  width: 16px;
  height: 16px;
}

.lesson-test-editor-actions {
  padding-top: 2px;
}

.lesson-sticky-actions {
  position: sticky;
  bottom: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding: 14px 16px;
  border: 1px solid rgba(214, 225, 240, 0.95);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 36px rgba(15, 35, 70, 0.12);
  z-index: 15;
}

#save-question-btn-bottom {
  display: none !important;
}

.lesson-save-main {
  min-width: 168px;
}

.lesson-editor-topbar {
  justify-content: flex-end;
  margin-bottom: 14px;
}

.lesson-editor-topbar .button-row {
  margin-left: auto;
}

.lesson-editor-topbar .inline-form {
  display: inline-flex;
  margin-top: 0;
}

.action-btn-muted {
  background: #eef2f7;
  color: #516176;
  border: 1px solid #dce4ee;
  box-shadow: none;
}

.action-btn-muted:hover {
  background: #e7edf5;
}

.lesson-meta-grid {
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: start;
}

.lesson-meta-module {
  grid-column: 1;
}

.lesson-meta-order {
  grid-column: 2;
}

.lesson-meta-grid .lesson-meta-full {
  grid-column: 1 / -1;
}

.lesson-meta-grid .lesson-meta-order input {
  text-align: center;
}

.lesson-sticky-actions .action-btn,
.lesson-sticky-actions .login-submit {
  border-radius: var(--radius-md);
}

.hero-badge-soft {
  background: #f7fbff;
  color: var(--ink-soft);
}

.lesson-question-toprow {
  display: grid;
  grid-template-columns: minmax(240px, 420px) minmax(100px, 140px);
  gap: 12px;
  align-items: center;
  justify-content: start;
}

.lesson-form-section-soft {
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid rgba(224, 232, 242, 0.95);
  border-radius: 0;
  background: transparent;
}

.lesson-test-editor .login-label > span {
  font-size: 12px;
  color: #617392;
}

.lesson-test-editor .login-input {
  min-height: 44px;
  border-radius: 8px;
}

.lesson-test-editor .textarea-input {
  min-height: 88px;
}

@media (max-width: 900px) {
  .lesson-test-grid,
  .lesson-test-options-grid,
  .course-assignment-form,
  .course-assignment-item {
    grid-template-columns: 1fr;
  }

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

  .lesson-sticky-actions {
    flex-wrap: wrap;
    justify-content: stretch;
  }
}

.course-overview-panel.course-overview-panel-compact {
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.9fr);
  align-items: start;
}

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

.hero-metrics.hero-metrics-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.course-overview-next.course-overview-next-compact {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #f8fbff;
}

.course-overview-next.course-overview-next-compact h3 {
  font-size: 22px;
  line-height: 1.35;
}

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

.lesson-roadmap-card strong {
  font-size: 18px;
  line-height: 1.4;
}

.lesson-hero-panel {
  background:
    linear-gradient(135deg, rgba(234, 248, 255, 0.98) 0%, rgba(249, 252, 255, 1) 54%, rgba(236, 247, 240, 0.92) 100%);
  border-color: rgba(209, 224, 242, 0.95);
  padding: 34px 38px;
}

.lesson-hero-copy {
  display: grid;
  gap: 16px;
}

.lesson-hero-copy h1 {
  margin: 0;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.1;
}

.lesson-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 18px;
}

.lesson-hero-meta span + span::before {
  content: "•";
  margin-right: 12px;
  color: #9fb0c7;
}

.result-panel.result-panel-compact {
  gap: 18px;
}

.result-panel.result-panel-compact .result-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0 0;
}

.result-panel.result-panel-compact .result-score {
  width: 92px;
  height: 92px;
  font-size: 24px;
}

.result-panel.result-panel-compact .result-item {
  padding: 16px 18px;
}

.result-panel.result-panel-compact .result-item h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
}

.result-panel.result-panel-compact .result-list {
  gap: 14px;
}

@media (max-width: 1100px) {
  .course-overview-panel.course-overview-panel-compact {
    grid-template-columns: 1fr;
  }
}

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

.llm-manager-card,
.llm-signal-item {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fbfcff;
  padding: 18px;
}

.llm-manager-card h3,
.llm-signal-item h3 {
  margin: 0 0 12px;
  font-size: 18px;
}

.llm-point-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.llm-point-list-compact {
  gap: 6px;
  font-size: 14px;
}

.llm-summary-text {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
}

.llm-manager-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.llm-manager-note strong,
.llm-mini-title {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.llm-signal-list {
  display: grid;
  gap: 16px;
}

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

.llm-profile-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fbfcff;
  padding: 18px;
}

.llm-signal-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.open-review-list {
  display: grid;
  gap: 18px;
}

.open-review-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 20px;
}

.open-review-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.open-review-question {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
  margin-bottom: 14px;
}

.open-review-answer,
.open-review-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.open-review-answer p,
.open-review-note p {
  margin: 8px 0 0;
}

.open-review-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
}

.open-review-form {
  margin-top: 14px;
}

.test-review-mode-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 10px 0 18px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
  color: #687386;
  font-size: 13px;
}

.test-review-mode-summary strong {
  color: #252a33;
  font-weight: 650;
}

.test-review-filter-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

.test-review-filter-tabs a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border-radius: 9px;
  color: #65758a;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.test-review-filter-tabs a:hover,
.test-review-filter-tabs a:focus-visible,
.test-review-filter-tabs a.active {
  background: #fff;
  color: #252a33;
  box-shadow: 0 6px 14px rgba(29, 64, 98, 0.07);
  outline: none;
}

.test-open-review-list {
  gap: 8px;
}

.test-open-review-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.test-open-review-summary {
  display: grid;
  grid-template-columns: 22px minmax(150px, 220px) minmax(220px, 1fr) auto minmax(100px, auto);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.test-open-review-summary::-webkit-details-marker {
  display: none;
}

.test-open-review-summary::before {
  content: "+";
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #5f6b7a;
  font-size: 14px;
  grid-column: 1;
  grid-row: 1;
}

.test-open-review-item[open] .test-open-review-summary::before {
  content: "−";
}

.test-open-review-person {
  font-weight: 600;
  color: #23262f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.test-open-review-question {
  min-width: 0;
  color: #23262f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.test-open-review-score {
  color: #6c7482;
  font-size: 13px;
  white-space: nowrap;
  text-align: right;
}

.test-open-review-body {
  border-top: 1px solid var(--line);
  padding: 12px;
  background: #fbfcfe;
}

.test-open-review-text-block {
  padding: 8px 0;
  border-bottom: 1px solid rgba(223, 227, 235, 0.7);
}

.test-open-review-text-block:first-child {
  padding-top: 0;
}

.test-open-review-text-block h4 {
  margin: 0 0 4px;
  color: #758093;
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
}

.test-open-review-text-block p {
  margin: 0;
  color: #252a33;
  font-size: 14px;
  line-height: 1.45;
}

.test-open-review-score-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 10px 0 4px;
  color: #687386;
  font-size: 13px;
}

.test-open-review-score-line strong {
  color: #252a33;
  font-weight: 650;
}

.test-open-review-form {
  display: grid;
  grid-template-columns: 150px minmax(120px, 150px) minmax(260px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(223, 227, 235, 0.7);
}

.test-open-review-form-title {
  align-self: center;
  color: #252a33;
  font-size: 13px;
  font-weight: 700;
}

.test-open-review-score-field {
  min-width: 0;
}

.test-open-review-score-field .login-input {
  max-width: 150px;
  min-height: 42px;
}

.test-open-review-llm-form {
  margin-top: 8px;
}

.test-open-review-llm-btn,
.test-open-review-save-btn {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  white-space: nowrap;
}

.test-open-review-missing {
  margin: 0;
  padding-left: 18px;
  color: #5f6b7a;
  font-size: 14px;
}

.test-open-review-comment {
  min-width: 0;
}

.test-open-review-comment .textarea-input {
  min-height: 44px;
  height: 44px;
  resize: vertical;
}

@media (max-width: 760px) {
  .test-open-review-summary {
    grid-template-columns: 22px 1fr;
  }

  .test-open-review-summary::before {
    grid-column: 1;
  }

  .test-open-review-person {
    grid-column: 2;
  }

  .test-open-review-question {
    grid-column: 1 / -1;
    white-space: normal;
  }

  .test-open-review-form {
    grid-template-columns: 1fr;
  }

  .test-open-review-score-field .login-input {
    max-width: 160px;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .test-open-review-form {
    grid-template-columns: 1fr minmax(120px, 150px) minmax(220px, 1fr);
  }

  .test-open-review-save-btn {
    grid-column: 3;
    justify-self: end;
  }
}

@media (max-width: 1100px) {
  .llm-profile-grid,
  .llm-manager-grid,
  .llm-signal-grid {
    grid-template-columns: 1fr;
  }

  .llm-signal-head {
    flex-direction: column;
  }

  .open-review-head {
    flex-direction: column;
  }

  .open-review-grid {
    grid-template-columns: 1fr;
  }
}

.section-link-with-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nav-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #e8f7ef;
  color: #1f7a45;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notification-list {
  display: grid;
  gap: 16px;
}

.notification-card {
  border: 1px solid #d9e3f1;
  border-radius: 22px;
  background: #fff;
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.notification-card-unread {
  border-color: #b8d9c4;
  box-shadow: 0 10px 28px rgba(31, 122, 69, 0.08);
}

.notification-priority-high {
  background: linear-gradient(180deg, rgba(255, 246, 238, 0.92), #fff 45%);
}

.notification-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.notification-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.notification-text {
  margin: 0;
  color: #41546f;
  line-height: 1.55;
}

.notification-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .notification-card {
    flex-direction: column;
  }

  .notification-actions {
    width: 100%;
  }
}

.side-panel-employee .side-head {
  margin-bottom: 18px;
}

.side-panel-employee .side-brand {
  font-size: 26px;
}

.side-panel-employee .section-nav {
  margin-bottom: 16px;
}

.side-panel-employee .section-link {
  padding: 10px 12px;
}

.topbar-menu-wrap {
  position: relative;
}

.topbar-icon-btn,
.topbar-avatar-btn {
  position: relative;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
}

.topbar-icon-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--navy);
  box-shadow: 0 10px 24px rgba(31, 54, 88, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.topbar-icon-btn-plain {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--ink-soft);
}

.topbar-icon-btn-plain:hover,
.topbar-icon-btn-plain:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--navy);
}

.topbar-icon-svg {
  width: 20px;
  height: 20px;
}

.topbar-icon-btn:hover,
.topbar-icon-btn:focus-visible,
.topbar-avatar-btn:hover,
.topbar-avatar-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(31, 54, 88, 0.08);
  border-color: var(--line-strong);
  outline: none;
}

.topbar-notification-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e14b4b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(225, 75, 75, 0.24);
}

.topbar-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 19, 24, 0.34);
  z-index: 45;
}

body.topbar-menu-open .topbar {
  position: relative;
  z-index: 60;
}

.topbar-overlay-panel {
  position: fixed;
  top: 92px;
  right: 28px;
  width: min(380px, calc(100vw - 36px));
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 48px rgba(31, 54, 88, 0.14);
  overflow: hidden;
  z-index: 50;
  backdrop-filter: blur(14px);
}

.topbar-notifications-menu {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100vw);
  min-height: 100vh;
  border: 0;
  border-left: 1px solid rgba(230, 232, 238, 0.95);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: -24px 0 68px rgba(18, 19, 24, 0.16);
  display: flex;
  flex-direction: column;
}

.topbar-overlay-panel[hidden],
.topbar-overlay-backdrop[hidden] {
  display: none !important;
}

.topbar-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 28px;
  border-bottom: 1px solid rgba(230, 232, 238, 0.9);
}

.topbar-notifications-menu .topbar-dropdown-head strong {
  flex: 1;
  color: var(--ink);
  font-size: 20px;
  text-align: center;
}

.topbar-dropdown-link-button {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}

.topbar-drawer-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8a909a;
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
}

.topbar-drawer-close:hover,
.topbar-drawer-close:focus-visible {
  color: var(--ink);
  background: #f4f5f8;
  outline: none;
}

.topbar-dropdown-list {
  max-height: none;
  overflow: auto;
  padding: 0;
}

.topbar-notifications-menu .topbar-dropdown-list {
  flex: 1;
}

.topbar-dropdown-empty {
  padding: 28px;
  color: var(--ink-soft);
  font-size: 14px;
}

.topbar-notification-form {
  margin: 0;
}

.topbar-notification-item {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 20px 28px;
  border: 0;
  border-bottom: 1px solid rgba(230, 232, 238, 0.9);
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 0.2s ease;
}

.topbar-notification-item:hover,
.topbar-notification-item:focus-visible {
  background: #f7f8fa;
  outline: none;
}

.topbar-notification-item-unread {
  background: transparent;
}

.topbar-notification-dot {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background: #f1f2f5;
  box-shadow: inset 0 0 0 1px #d7dbe4;
}

.topbar-notification-item-unread .topbar-notification-dot {
  background: #fff2f2;
  box-shadow: inset 0 0 0 1px #f2c7c7;
}

.topbar-notification-body {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.topbar-notification-title {
  display: block;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 0;
}

.topbar-notification-text {
  display: block;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.topbar-notification-meta {
  display: block;
  margin-top: 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.topbar-notification-actions {
  display: none;
}

.topbar-dropdown-footer {
  padding: 10px 18px 18px;
  border-top: 1px solid var(--line);
}

.topbar-profile-menu {
  width: min(360px, calc(100vw - 36px));
  padding: 16px;
}

.topbar-profile-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.topbar-profile-badge {
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #690d1e 0%, #b3122d 100%);
  color: #ffffff;
  font-weight: 800;
}

.topbar-profile-name {
  font-weight: 700;
}

.topbar-profile-subtitle {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 13px;
}

.topbar-profile-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.topbar-profile-block-title {
  margin-bottom: 10px;
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar-profile-course-list {
  display: grid;
  gap: 8px;
}

.topbar-profile-course-item {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcff;
  font-size: 14px;
}

.topbar-profile-footnote {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 13px;
}

.topbar-profile-actions {
  display: grid;
  gap: 10px;
  padding-top: 14px;
}

@media (max-width: 820px) {
  .topbar {
    flex-wrap: wrap;
  }

  .topbar-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .topbar-overlay-panel {
    top: 82px;
    right: 14px;
    width: min(340px, calc(100vw - 28px));
  }
}

/* 2026 LMS visual refresh */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #101827;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.brand-lockup img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand-lockup span {
  display: grid;
  line-height: 1;
  font-size: 0;
}

.brand-lockup strong {
  font-size: 24px;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.brand-lockup em {
  font-style: normal;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.brand-lockup-side {
  margin-bottom: 10px;
}

.app-shell {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
}

.app-shell-employee {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell-simple {
  transition: grid-template-columns 0.2s ease;
}

.app-shell-simple.is-sidebar-collapsed {
  grid-template-columns: 96px minmax(0, 1fr);
}

.side-panel {
  background: rgba(255, 255, 255, 0.88);
  border-right: 1px solid rgba(209, 224, 235, 0.86);
  box-shadow: 16px 0 38px rgba(24, 54, 86, 0.04);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.side-brand {
  font-size: 0;
}

.side-subtitle {
  margin-top: 12px;
  line-height: 1.45;
}

.section-nav {
  gap: 6px;
}

.section-link {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  color: #42536d;
  min-height: 46px;
}

.section-link:hover,
.section-link:focus-visible,
.section-link.active {
  background: #eef7fb;
  color: var(--accent-strong);
}

.section-link-icon {
  width: 22px;
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: currentColor;
  font-size: 18px;
  line-height: 1;
}

.section-link-text {
  min-width: 0;
}

.section-link-disabled {
  cursor: default;
  opacity: 0.82;
}

.section-link-secondary {
  margin-top: 8px;
}

.side-footer {
  margin-top: auto;
}

.sidebar-toggle {
  width: 42px;
  min-width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: #f3f8fb;
  color: #52637b;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  border-radius: 12px;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  background: #eef7fb;
  color: var(--accent-strong);
  outline: none;
}

.sidebar-toggle-icon {
  font-size: 28px;
  line-height: 1;
}

.workspace {
  padding: 18px 24px 28px;
}

.app-shell-employee .workspace {
  padding-top: 0;
}

.topbar {
  border-bottom: 1px solid rgba(209, 224, 235, 0.72);
}

.topbar-employee {
  min-height: 76px;
  padding: 12px 26px;
  background: rgba(255, 255, 255, 0.94);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
}

.topbar-employee .topbar-search {
  max-width: 340px;
}

.employee-topnav {
  display: flex;
  align-items: stretch;
  gap: 24px;
  min-height: 52px;
  margin: 0 auto;
}

.employee-topnav-link {
  display: inline-flex;
  align-items: center;
  border-bottom: 3px solid transparent;
  color: #536177;
  font: inherit;
  font-weight: 400;
  white-space: nowrap;
}

.employee-topnav-link:hover,
.employee-topnav-link:focus-visible,
.employee-topnav-link.active {
  color: #536177;
  border-bottom-color: var(--accent);
  outline: none;
}

.page-frame {
  background: transparent;
  padding: 18px;
}

.app-shell-employee .page-frame {
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
}

.panel,
.card,
.answer-card,
.module-card,
.login-card,
.catalog-card,
.notification-card,
.course-review-group,
.result-details-disclosure {
  border-color: rgba(207, 222, 235, 0.74);
  box-shadow: 0 18px 45px rgba(25, 64, 99, 0.06);
}

.panel {
  border-radius: 22px;
}

.hero-panel {
  position: relative;
  overflow: hidden;
  border-color: rgba(200, 220, 234, 0.86);
  background:
    radial-gradient(circle at 78% 18%, rgba(17, 143, 160, 0.16), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f3f9fc 52%, #eef7fa 100%);
}

.hero-panel::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -80px;
  width: 340px;
  height: 260px;
  background: linear-gradient(135deg, rgba(18, 51, 92, 0.13), rgba(17, 143, 160, 0.12));
  border-radius: 48px;
  transform: rotate(-14deg);
  pointer-events: none;
}

.hero-panel > * {
  position: relative;
  z-index: 1;
}

.portal-hero {
  min-height: 210px;
  align-items: center;
}

.dashboard-hero,
.employee-hero {
  min-height: 250px;
}

.hero-copy h2 {
  max-width: 780px;
  color: #12233a;
}

.hero-badge {
  background: rgba(231, 247, 250, 0.86);
  border-color: rgba(17, 143, 160, 0.2);
  color: var(--accent-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-metric {
  border-color: rgba(197, 216, 230, 0.7);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.topbar-btn-primary,
.login-submit,
.action-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 12px 24px rgba(17, 143, 160, 0.18);
}

.action-btn-soft,
.action-btn-secondary {
  background: linear-gradient(135deg, var(--navy), #1e5d9e);
}

.action-btn-ghost,
.topbar-btn {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(196, 216, 230, 0.88);
}

.topbar-search input,
.login-input,
.compact-select {
  border-color: rgba(194, 215, 230, 0.9);
  background: rgba(255, 255, 255, 0.88);
}

.metric-cards {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.metric-card {
  position: relative;
  min-height: 128px;
  border-radius: 22px;
  overflow: hidden;
}

.metric-card::before {
  content: "";
  position: absolute;
  right: 18px;
  top: 18px;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: linear-gradient(135deg, #e9f6fb, #f6fbfd);
  border: 1px solid rgba(185, 210, 228, 0.58);
}

.metric-card strong {
  color: #111827;
}

.accent {
  background: linear-gradient(180deg, #f5fbfd 0%, var(--accent-soft) 100%);
}

.catalog-grid {
  gap: 18px;
}

.catalog-card {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
}

.catalog-card-link:hover {
  border-color: rgba(17, 143, 160, 0.34);
  box-shadow: 0 20px 42px rgba(17, 87, 114, 0.12);
}

.employee-course-grid {
  grid-template-columns: 1fr;
  max-width: none;
  margin: 0 auto;
}

.employee-cabinet-panel {
  display: grid;
  gap: 22px;
  max-width: 1480px;
  margin: 0 auto 22px;
}

.employee-cabinet-head h2 {
  margin: 0 0 14px;
  color: var(--ink);
  letter-spacing: -0.03em;
}

.employee-cabinet-head .editor-kicker {
  margin-bottom: 0;
}

.employee-course-section {
  display: grid;
  gap: 12px;
  width: 100%;
}

.employee-course-section .employee-course-grid {
  width: 100%;
}

.employee-course-section .empty-state-compact {
  width: 100%;
}

.employee-course-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) minmax(260px, 0.45fr);
  gap: 22px;
  align-items: center;
  padding: 14px 18px 14px 14px;
  width: 100%;
}

.course-card-visual {
  min-height: 128px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(18, 51, 92, 0.55), rgba(17, 143, 160, 0.38)),
    linear-gradient(135deg, #d8e7ef, #f4f8fb);
  overflow: hidden;
}

.course-card-visual img {
  display: block;
}

.course-card-visual .course-card-cover-img {
  width: 100%;
  height: 100%;
  min-height: 128px;
  object-fit: cover;
  filter: none;
}

.course-card-visual .course-card-logo-img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18));
}

.employee-course-card .catalog-card-head,
.employee-course-card .learning-progress-card {
  margin: 0;
}

.learning-progress-card,
.course-overview-next,
.course-overview-next-compact {
  border-color: rgba(197, 216, 230, 0.72);
  background: #f7fbfd;
}

.test-progress-bar {
  background: #dfe8ee;
}

.test-progress-bar span {
  background: linear-gradient(90deg, var(--accent), #2bb7c5);
}

.status-chip {
  background: #eef5f8;
  border-color: rgba(194, 215, 230, 0.9);
  color: #28506b;
}

.status-chip-success,
.table-badge-success,
.notice-success {
  background: var(--success-soft);
  color: var(--success-strong);
  border-color: rgba(40, 169, 104, 0.22);
}

.result-score-success {
  color: var(--success-strong);
  background: linear-gradient(135deg, var(--success-soft), #f7fffa);
  border-color: rgba(40, 169, 104, 0.24);
}

.result-item-success {
  border-color: rgba(40, 169, 104, 0.2);
  background: #fbfffc;
}

.status-chip-in_progress,
.status-chip-new {
  background: var(--accent-soft);
  border-color: rgba(17, 143, 160, 0.22);
  color: var(--accent-strong);
}

.table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.table th {
  background: #f5f9fc;
  color: #5a6c84;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.table td,
.table th {
  border-color: rgba(209, 224, 235, 0.72);
}

.activity-item,
.notification-card,
.lesson-roadmap-card,
.builder-item,
.list-link {
  border-color: rgba(207, 222, 235, 0.78);
}

.notification-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 18px;
}

.notification-card-unread {
  background: linear-gradient(90deg, #f3fbfd 0%, #ffffff 76%);
  border-color: rgba(17, 143, 160, 0.24);
}

.notifications-panel {
  max-width: 1180px;
}

.course-overview-panel {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.62fr);
}

.module-roadmap-section {
  background: rgba(255, 255, 255, 0.9);
}

.lesson-roadmap-card {
  background: #ffffff;
  border-radius: 18px;
}

.lesson-roadmap-card:hover {
  border-color: rgba(17, 143, 160, 0.28);
}

.content-sidebar .panel,
.content-nav-panel {
  background: rgba(255, 255, 255, 0.86);
}

.builder-panel.course-builder-hero {
  display: block;
}

.course-admin-cover {
  min-height: 330px;
  display: grid;
  align-items: end;
  margin-top: 18px;
  padding: 40px;
}

.course-admin-cover-inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 24px;
  max-width: 920px;
  min-height: 238px;
  align-content: space-between;
}

.course-admin-cover-copy h2 {
  max-width: 900px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(36px, 4.2vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.course-admin-cover-copy p {
  max-width: 720px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 17px;
  line-height: 1.55;
}

.course-admin-cover-actions {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}

.course-admin-cover-actions .action-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  white-space: nowrap;
}

.course-admin-cover-actions .action-btn-ghost {
  background: rgba(255, 255, 255, 0.86);
  color: #20242d;
  box-shadow: none;
}

.course-admin-cover-image {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(46%, 620px);
  height: 100%;
  object-fit: cover;
  opacity: 0.24;
  mix-blend-mode: screen;
}

.builder-toolbar {
  position: relative;
  z-index: 1;
}

@media (max-width: 1220px) {
  .topbar-employee {
    flex-wrap: wrap;
  }

  .employee-topnav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    margin: 0;
  }

  .topbar-employee .topbar-search {
    max-width: none;
  }

  .employee-course-card {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .employee-course-card .course-card-next {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .workspace,
  .app-shell-employee .workspace {
    padding: 0 12px 18px;
  }

  .topbar-employee {
    padding: 10px 14px;
  }

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

  .employee-course-card {
    grid-template-columns: 1fr;
  }

  .course-card-visual {
    min-height: 150px;
  }
}

.app-shell-simple.is-sidebar-collapsed .side-panel {
  padding-left: 14px;
  padding-right: 14px;
  align-items: center;
}

.app-shell-simple.is-sidebar-collapsed .side-head {
  width: 100%;
}

.app-shell-simple.is-sidebar-collapsed .side-head-top {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding-right: 0;
}

.app-shell-simple.is-sidebar-collapsed .brand-lockup {
  justify-content: center;
}

.app-shell-simple.is-sidebar-collapsed .brand-lockup img {
  width: 44px;
  height: 44px;
}

.app-shell-simple.is-sidebar-collapsed .brand-lockup span,
.app-shell-simple.is-sidebar-collapsed .side-subtitle,
.app-shell-simple.is-sidebar-collapsed .section-link-text,
.app-shell-simple.is-sidebar-collapsed .sidebar-toggle-text {
  display: none;
}

.app-shell-simple.is-sidebar-collapsed .section-nav {
  width: 100%;
  align-items: center;
}

.app-shell-simple.is-sidebar-collapsed .section-link {
  width: 52px;
  height: 52px;
  justify-content: center;
  padding: 0;
}

.app-shell-simple.is-sidebar-collapsed .section-link-icon {
  font-size: 20px;
}

.app-shell-simple.is-sidebar-collapsed .side-footer {
  width: 100%;
}

.app-shell-simple.is-sidebar-collapsed .sidebar-toggle-icon {
  transform: rotate(180deg);
}

.app-shell-simple.is-sidebar-collapsed .sidebar-toggle {
  position: static;
}

.app-shell-simple.is-sidebar-collapsed .sidebar-toggle-img {
  transform: rotate(180deg);
}

/* DSL air concept pass */
:root {
  --bg: #f3f4f7;
  --bg-soft: #f7f8fa;
  --panel: rgba(255, 255, 255, 0.84);
  --panel-soft: #f5f6f9;
  --ink: #1d2027;
  --ink-soft: #747a86;
  --line: #e6e8ee;
  --line-strong: #d7dbe4;
  --accent: #e30613;
  --accent-strong: #b9000b;
  --accent-soft: #fff0f1;
  --navy: #121318;
  --success: #26965b;
  --success-strong: #1f7f4c;
  --success-soft: #eaf8f0;
  --danger: #d35757;
  --danger-soft: #fff1f1;
  --shadow: 0 24px 68px rgba(18, 19, 24, 0.08);
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
}

body {
  background:
    radial-gradient(circle at 12% 5%, rgba(227, 6, 19, 0.11), transparent 31%),
    radial-gradient(circle at 88% 10%, rgba(18, 19, 24, 0.09), transparent 30%),
    linear-gradient(180deg, #fbfbfc 0%, #f3f4f7 100%);
  color: var(--ink);
  font-family: "Open Sans", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

.app-shell {
  background: transparent;
}

.workspace {
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
  padding: 28px;
}

.app-shell-employee .workspace {
  max-width: none;
  padding: 0 0 32px;
}

.side-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 28px 18px;
  overflow-y: auto;
  color: #ffffff;
  background:
    radial-gradient(circle at 16% 7%, rgba(227, 6, 19, 0.35), transparent 24%),
    linear-gradient(180deg, #15161b 0%, #242730 100%);
  border-right: 0;
  box-shadow: 20px 0 60px rgba(18, 19, 24, 0.1);
}

.side-head {
  margin-bottom: 24px;
}

.side-head-top {
  align-items: flex-start;
  position: relative;
  padding-right: 0;
}

.brand-lockup {
  gap: 13px;
  color: var(--ink);
}

.brand-lockup-side {
  color: #ffffff;
  margin-bottom: 0;
  max-width: calc(100% - 56px);
}

.brand-lockup img {
  width: 44px;
  height: 44px;
  padding: 4px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(227, 6, 19, 0.26);
}

.brand-lockup img.brand-full-logo {
  width: 218px;
  height: auto;
  max-height: 70px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

.brand-lockup strong {
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 500;
  text-transform: none;
}

.brand-lockup em {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.brand-lockup-side em {
  color: rgba(255, 255, 255, 0.72);
}

.side-subtitle {
  margin: 18px 4px 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  line-height: 1.55;
}

.section-nav {
  gap: 5px;
}

.section-link {
  min-height: 48px;
  padding: 0 12px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 800;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.section-link:hover,
.section-link:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(2px);
}

.section-link.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 16px 36px rgba(227, 6, 19, 0.28);
}

.section-link-disabled {
  color: rgba(255, 255, 255, 0.45);
}

.section-link-icon {
  width: 24px;
  min-width: 24px;
  height: 24px;
}

.sidebar-toggle {
  position: absolute;
  top: 1px;
  right: 0;
  width: 38px;
  min-width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
}

.sidebar-toggle-img {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
  filter: invert(1);
  opacity: 0.8;
}

.sidebar-toggle:hover .sidebar-toggle-img,
.sidebar-toggle:focus-visible .sidebar-toggle-img {
  opacity: 1;
}

.topbar {
  margin-bottom: 24px;
  padding: 0;
  border-bottom: 0;
}

.topbar-search {
  max-width: 660px;
}

.topbar-search input {
  height: 52px;
  border: 1px solid rgba(230, 232, 238, 0.88);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 34px rgba(18, 19, 24, 0.05);
  backdrop-filter: blur(12px);
}

.topbar-btn,
.topbar-icon-btn,
.topbar-avatar {
  box-shadow: 0 12px 30px rgba(18, 19, 24, 0.06);
}

.topbar-btn-primary,
.login-submit,
.action-btn {
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #ffffff;
  box-shadow: 0 16px 36px rgba(227, 6, 19, 0.22);
}

.topbar-btn-primary:hover,
.login-submit:hover,
.action-btn:hover {
  box-shadow: 0 20px 42px rgba(227, 6, 19, 0.24);
}

.action-btn-soft,
.action-btn-secondary {
  background: linear-gradient(135deg, #121318, #242730);
  box-shadow: 0 16px 34px rgba(18, 19, 24, 0.16);
}

.action-btn-ghost,
.topbar-btn {
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  border: 1px solid rgba(230, 232, 238, 0.94);
  box-shadow: 0 10px 28px rgba(18, 19, 24, 0.05);
}

.page-frame {
  padding: 0;
  background: transparent;
}

.page-head {
  padding: 2px 0 22px;
}

.page-head h1 {
  font-size: 38px;
  letter-spacing: -0.055em;
}

.eyebrow {
  color: var(--muted, var(--ink-soft));
  font-weight: 850;
  letter-spacing: 0.12em;
}

.panel,
.card,
.answer-card,
.module-card,
.login-card,
.catalog-card,
.notification-card,
.course-review-group,
.result-details-disclosure,
.learning-progress-card,
.course-overview-next,
.course-overview-next-compact,
.module-roadmap-section,
.lesson-roadmap-card,
.builder-item,
.list-link {
  border: 1px solid rgba(230, 232, 238, 0.84);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 46px rgba(18, 19, 24, 0.06);
  backdrop-filter: blur(14px);
}

.panel {
  padding: 28px;
}

.hero-panel {
  min-height: 330px;
  padding: 38px;
  border: 0;
  border-radius: 38px;
  color: #ffffff;
  background:
    linear-gradient(105deg, rgba(18, 19, 24, 0.98) 0%, rgba(36, 39, 48, 0.97) 58%, rgba(227, 6, 19, 0.88) 100%);
  box-shadow: 0 28px 70px rgba(18, 19, 24, 0.1);
}

.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(255, 255, 255, 0.05) 48% 50%, transparent 50% 100%),
    radial-gradient(circle at 84% 20%, rgba(255, 255, 255, 0.14), transparent 21%);
  opacity: 0.9;
  pointer-events: none;
}

.hero-panel::after {
  right: -150px;
  top: -128px;
  width: 460px;
  height: 460px;
  border: 60px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  background: transparent;
  transform: none;
}

.portal-hero,
.dashboard-hero,
.employee-hero {
  min-height: 330px;
}

.hero-copy h2 {
  color: #ffffff;
  max-width: 860px;
  font-size: clamp(36px, 4.5vw, 62px);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.hero-copy p,
.hero-panel .muted {
  color: rgba(255, 255, 255, 0.72);
}

.hero-badge,
.hero-panel .status-chip {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
}

.hero-metrics {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-metric {
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}

.hero-metric span {
  color: rgba(255, 255, 255, 0.62);
}

.hero-metric strong {
  color: #ffffff;
}

.metric-card {
  min-height: 136px;
  border-radius: 28px;
}

.metric-card::before {
  border-radius: 50%;
  background: #f0f1f5;
  border-color: transparent;
}

.catalog-card {
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.84);
}

.catalog-card-link:hover,
.lesson-roadmap-card:hover,
.builder-item:hover,
.list-link:hover {
  transform: translateY(-2px);
  border-color: rgba(227, 6, 19, 0.22);
  box-shadow: 0 24px 54px rgba(18, 19, 24, 0.1);
}

.employee-course-card {
  border-radius: 28px;
}

.course-card-visual {
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(18, 19, 24, 0.76), rgba(227, 6, 19, 0.28)),
    linear-gradient(135deg, #eef0f4, #ffffff);
}

.test-progress-bar,
.progress-bar,
.progress-line {
  background: #e9ebf0;
}

.test-progress-bar span,
.progress-bar span,
.progress-line span {
  background: linear-gradient(90deg, var(--accent), #ff6a72);
}

.status-chip {
  background: #f1f2f5;
  border-color: #e3e6ed;
  color: #5d6470;
}

.status-chip-success,
.table-badge-success,
.notice-success {
  background: var(--success-soft);
  color: var(--success-strong);
  border-color: rgba(38, 150, 91, 0.24);
}

.status-chip-in_progress,
.status-chip-new,
.status-chip-answered {
  background: var(--accent-soft);
  border-color: rgba(227, 6, 19, 0.16);
  color: var(--accent-strong);
}

.status-chip-published {
  background: var(--success-soft);
  border-color: rgba(38, 150, 91, 0.24);
  color: var(--success-strong);
}

.status-chip-draft {
  background: #fff7e8;
  border-color: rgba(210, 142, 28, 0.24);
  color: #9f6410;
}

.status-chip-archived {
  background: #f1f2f5;
  border-color: #e0e3e9;
  color: #687080;
}

.table {
  overflow: hidden;
  border-radius: 24px;
}

.table th {
  background: #f1f2f5;
  color: #747a86;
}

.table td,
.table th {
  border-color: rgba(230, 232, 238, 0.82);
}

.notification-card-unread {
  background: linear-gradient(90deg, #fff4f4 0%, rgba(255, 255, 255, 0.86) 76%);
  border-color: rgba(227, 6, 19, 0.18);
}

.topbar-employee {
  min-height: 76px;
  padding: 12px 34px;
  border-bottom: 1px solid rgba(230, 232, 238, 0.86);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 32px rgba(18, 19, 24, 0.04);
}

.employee-topnav-link {
  color: #5c6370;
  font: inherit;
  font-weight: 400;
}

.employee-topnav-link:hover,
.employee-topnav-link:focus-visible,
.employee-topnav-link.active {
  color: #5c6370;
  border-bottom-color: var(--accent);
}

.notifications-page-card {
  max-width: 1400px;
  margin: 0 auto;
  padding: 34px 24px 24px;
  border: 1px solid rgba(230, 232, 238, 0.88);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 26px 70px rgba(18, 19, 24, 0.08);
  backdrop-filter: blur(18px);
}

.notifications-page-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.notifications-page-title {
  margin: 24px 0 10px;
  color: #171a22;
  font-size: clamp(40px, 4vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.notifications-page-subtitle {
  max-width: 720px;
  margin: 0;
  color: #6b7383;
  font-size: 16px;
  line-height: 1.55;
}

.notifications-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.notifications-filter-form {
  display: flex;
  align-items: end;
  gap: 14px;
  flex-wrap: wrap;
}

.notifications-filter-field {
  display: grid;
  gap: 7px;
  min-width: 190px;
}

.notifications-filter-field span {
  color: #5b6575;
  font-size: 12px;
  font-weight: 750;
}

.notifications-show-btn {
  min-height: 42px;
  padding: 0 22px;
  border-radius: 999px;
  background: #e30613;
  box-shadow: 0 14px 26px rgba(227, 6, 19, 0.18);
}

.notifications-read-all-form {
  flex-shrink: 0;
}

.notifications-read-all-btn {
  border: 0;
  background: transparent;
  color: #8a93a3;
  font-weight: 750;
  cursor: pointer;
}

.notifications-read-all-btn:hover,
.notifications-read-all-btn:focus-visible {
  color: #171a22;
}

.notifications-table-wrap {
  overflow: hidden;
  border: 1px solid rgba(230, 232, 238, 0.9);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
}

.notifications-table {
  width: 100%;
  border-collapse: collapse;
}

.notifications-table th {
  padding: 16px 18px;
  background: #f4f5f8;
  color: #9098a8;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.notifications-table td {
  padding: 18px;
  border-top: 1px solid rgba(230, 232, 238, 0.92);
  color: #20242d;
  vertical-align: middle;
}

.notifications-row-unread {
  background: rgba(255, 244, 244, 0.74);
}

.notifications-row-read {
  background: rgba(255, 255, 255, 0.72);
}

.notifications-title-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

.notifications-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #e30613;
  box-shadow: 0 0 0 5px rgba(227, 6, 19, 0.1);
}

.notifications-description {
  max-width: 620px;
  color: #56647a;
  line-height: 1.55;
}

.notifications-date {
  white-space: nowrap;
  color: #63708a;
}

.notifications-type-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(230, 232, 238, 0.9);
  border-radius: 999px;
  background: #ffffff;
  color: #5b6575;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.notifications-open-btn {
  min-height: 40px;
  padding: 0 18px;
  white-space: nowrap;
}

.notifications-no-action {
  color: #b1b7c2;
}

.notifications-empty-state {
  box-shadow: none;
}

.notifications-page {
  max-width: none;
  margin: 0;
}

.notifications-page .notifications-toolbar {
  align-items: center;
  margin-bottom: 12px;
}

.notifications-filter-tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.notifications-filter-tab {
  color: #8a93a3;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.notifications-filter-tab:hover,
.notifications-filter-tab:focus-visible,
.notifications-filter-tab.active {
  color: #171a22;
  outline: none;
}

.notifications-stream {
  display: grid;
  gap: 8px;
}

.notifications-stream-form {
  margin: 0;
}

.notifications-stream-item {
  width: 100%;
  display: grid;
  gap: 5px;
  padding: 14px 18px;
  border: 1px solid rgba(230, 232, 238, 0.9);
  border-radius: 16px;
  background: #ffffff;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.notifications-stream-item:hover,
.notifications-stream-item:focus-visible {
  border-color: rgba(227, 6, 19, 0.22);
  box-shadow: 0 18px 42px rgba(18, 19, 24, 0.08);
  outline: none;
  transform: translateY(-1px);
}

.notifications-stream-item-unread {
  background: rgba(255, 244, 244, 0.78);
  border-color: rgba(227, 6, 19, 0.14);
}

.notifications-stream-title {
  color: #20242d;
  font-size: 15px;
  font-weight: 750;
}

.notifications-stream-text {
  max-width: 920px;
  color: #56647a;
  font-size: 13px;
  line-height: 1.45;
}

.notifications-stream-date {
  color: #8a93a3;
  font-size: 12px;
}

.course-list-page {
  max-width: none;
  margin: 0;
}

.course-list-actions {
  display: flex;
  justify-content: flex-end;
  margin: -58px 0 18px;
}

.course-create-btn {
  min-height: 42px;
  padding: 0 20px;
}

.course-list-grid {
  display: grid;
  gap: 14px;
}

.course-list-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 190px;
  align-items: center;
  gap: 28px;
  min-height: 150px;
  padding: 22px 30px;
  border: 1px solid rgba(230, 232, 238, 0.92);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.course-list-card:hover,
.course-list-card:focus-visible {
  border-color: rgba(227, 6, 19, 0.22);
  box-shadow: 0 18px 42px rgba(18, 19, 24, 0.08);
  outline: none;
  transform: translateY(-1px);
}

.course-list-main {
  min-width: 0;
  align-self: start;
  padding-top: 4px;
}

.course-list-card h2 {
  max-width: 820px;
  margin: 0;
  color: #171a22;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.course-list-main p {
  max-width: 760px;
  margin: 10px 0 0;
  color: #8a93a3;
  font-size: 14px;
  line-height: 1.45;
}

.course-list-image {
  width: 220px;
  height: 124px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(18, 19, 24, 0.88), rgba(227, 6, 19, 0.3)),
    #f1f2f5;
  overflow: hidden;
}

.course-list-image img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.18));
}

.course-list-image img.course-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.course-list-stats {
  display: grid;
  gap: 10px;
  align-content: center;
  justify-items: start;
}

.course-list-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.course-list-stat strong {
  color: #171a22;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.course-list-stat span {
  color: #6b7383;
  font-size: 14px;
}

.course-form-panel {
  padding: 28px;
}

.course-form {
  gap: 18px;
}

.course-form-toolbar {
  align-items: center;
  gap: 18px;
  margin-bottom: 4px;
}

.course-form-toolbar h2 {
  margin: 0;
  color: #171a22;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.course-form-save {
  width: auto;
  min-width: 128px;
  min-height: 42px;
  padding: 0 24px;
  justify-self: end;
}

.course-cover-field {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.course-cover-preview {
  width: 220px;
  height: 124px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(230, 232, 238, 0.92);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(18, 19, 24, 0.88), rgba(227, 6, 19, 0.3)),
    #f1f2f5;
}

.course-cover-preview img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.18));
}

.course-cover-preview img[src^="/uploads/"],
.course-cover-preview img[src^="http"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.course-cover-upload small {
  color: #8a93a3;
  font-size: 12px;
}

.course-form-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.brand-lockup,
.section-nav,
.section-link {
  font-family: "Trebuchet MS", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

@media (max-width: 1050px) {
  .notifications-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .notifications-read-all-form {
    align-self: flex-start;
  }

  .notifications-table-wrap {
    overflow-x: auto;
  }

  .notifications-table {
    min-width: 900px;
  }
}

@media (max-width: 720px) {
  .notifications-page-card {
    padding: 24px 16px 18px;
    border-radius: 24px;
  }

  .notifications-page-title {
    font-size: 38px;
  }

  .notifications-filter-form,
  .notifications-filter-field,
  .notifications-show-btn {
    width: 100%;
  }

  .course-cover-field {
    grid-template-columns: 1fr;
  }

  .course-cover-preview {
    width: 100%;
    max-width: 280px;
  }
}

.app-shell-simple.is-sidebar-collapsed {
  grid-template-columns: 92px minmax(0, 1fr);
}

.app-shell-simple.is-sidebar-collapsed .side-panel {
  padding-left: 18px;
  padding-right: 18px;
}

.app-shell-simple.is-sidebar-collapsed .brand-lockup img {
  width: 52px;
  height: 52px;
}

.app-shell-simple.is-sidebar-collapsed .brand-lockup img.brand-full-logo {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  object-fit: cover;
  object-position: left center;
  background: #ffffff;
}

.app-shell-simple.is-sidebar-collapsed .section-link {
  width: 52px;
  height: 52px;
  border-radius: 18px;
}

@media (max-width: 760px) {
  .workspace,
  .app-shell-employee .workspace {
    padding: 14px;
  }

  .hero-panel {
    min-height: 280px;
    padding: 28px;
    border-radius: 30px;
  }

  .hero-copy h2 {
    font-size: 36px;
  }

  .topbar-employee {
    padding: 10px 14px;
  }
}

/* Dashboard refinement */
.section-link {
  font-weight: 500;
}

.section-link-icon img,
.topbar-icon-img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.side-panel .section-link-icon img {
  filter: invert(1);
  opacity: 0.74;
}

.side-panel .section-link:hover .section-link-icon img,
.side-panel .section-link:focus-visible .section-link-icon img,
.side-panel .section-link.active .section-link-icon img {
  opacity: 1;
}

.topbar-icon-img {
  width: 22px;
  height: 22px;
}

.topbar-avatar.topbar-avatar-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, #690d1e 0%, #b3122d 100%);
  color: #ffffff;
  font-weight: 800;
  box-shadow: none;
}

.lesson-reading-body {
  background: #ffffff;
}

.lesson-reading-body .workspace,
.lesson-reading-body .page-frame {
  background: #ffffff;
}

.lesson-reading-body .page-frame {
  max-width: none;
  padding: 18px 24px 32px;
}

.lesson-reading-page {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.lesson-reading-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px auto 30px;
  color: #6f7b8c;
  font-size: 14px;
  line-height: 1.4;
}

.lesson-reading-breadcrumbs a {
  color: #4f5e72;
  transition: color 0.18s ease;
}

.lesson-reading-breadcrumbs a:hover,
.lesson-reading-breadcrumbs a:focus-visible {
  color: var(--accent);
  outline: none;
}

.lesson-reading-head {
  max-width: 820px;
  margin: 0 auto 34px;
  text-align: center;
}

.lesson-reading-head h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.lesson-reading-head p {
  max-width: 720px;
  margin: 18px auto 0;
  color: #6f7b8c;
  font-size: 18px;
  line-height: 1.65;
}

.kb-reading-source {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.kb-reading-admin-actions {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.lesson-reading-stage {
  display: block;
}

.lesson-reading-article.longread-article {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 0 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.lesson-reading-article .longread-h1,
.lesson-reading-article .longread-h2,
.lesson-reading-article .longread-h3 {
  color: var(--ink);
}

.lesson-reading-article .longread-h2 {
  margin-top: 30px;
  margin-bottom: 12px;
}

.lesson-reading-article .longread-paragraph,
.lesson-reading-article .longread-list,
.lesson-reading-article .longread-callout p,
.lesson-reading-article .longread-quote p {
  color: #242936;
  font-size: 18px;
  line-height: 1.66;
}

.lesson-reading-article .longread-paragraph {
  margin: 0 0 14px;
}

.lesson-reading-article .longread-list {
  gap: 6px;
  margin: 0 0 18px 24px;
  line-height: 1.62;
}

.lesson-reading-article .longread-callout {
  margin: 22px 0;
  padding: 18px 20px;
  border-radius: 18px;
  gap: 8px;
}

.lesson-reading-article .longread-callout-warning {
  border: 1px solid #ffd1dc;
  border-left: 4px solid #d94a64;
  background: #fff1f4;
}

.lesson-reading-article .longread-callout-example {
  border: 1px solid #d5e5ff;
  border-left: 4px solid #5f8fd9;
  background: #f2f7ff;
}

.lesson-reading-article .longread-callout-remember {
  border: 1px solid #cfead8;
  border-left: 4px solid #50a06b;
  background: #f1f8f4;
}

.lesson-reading-article .longread-quote {
  background: transparent;
  border-radius: 0;
}

.lesson-reading-extra {
  max-width: 820px;
  margin: 28px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.lesson-reading-extra .compact-disclosure {
  border-top: 1px solid rgba(224, 232, 242, 0.95);
  border-bottom: 1px solid rgba(224, 232, 242, 0.95);
}

.lesson-reading-actions.lesson-sticky-actions {
  max-width: 820px;
  margin: 34px auto 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
}

.lesson-reading-action,
.lesson-reading-arrow {
  height: 42px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(224, 232, 242, 0.95);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.lesson-reading-actions .inline-form {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  height: 42px;
}

.lesson-reading-action {
  min-width: 190px;
  padding: 0 18px;
}

.lesson-reading-arrow {
  width: 42px;
  padding: 0;
  font-size: 18px;
}

.lesson-reading-action:hover,
.lesson-reading-action:focus-visible,
.lesson-reading-arrow:hover,
.lesson-reading-arrow:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(227, 6, 19, 0.28);
  box-shadow: 0 14px 30px rgba(227, 6, 19, 0.16);
  color: var(--accent);
  outline: none;
}

.course-overview-panel.course-overview-panel-compact {
  grid-template-columns: minmax(0, 0.68fr) minmax(560px, 1.32fr);
  gap: 18px;
  min-height: 0;
  padding: 20px 22px;
  align-items: stretch;
  border-radius: 22px;
}

.portal-hero.course-overview-panel-compact {
  min-height: 0;
}

.course-overview-panel.course-overview-panel-compact .hero-copy {
  align-self: start;
}

.course-overview-panel.course-overview-panel-compact .hero-copy h2 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.course-overview-panel.course-overview-panel-compact .hero-copy .muted {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.course-overview-panel.course-overview-panel-compact .hero-copy .muted:first-of-type {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.course-overview-panel.course-overview-panel-compact .test-progress-bar {
  grid-column: 1 / -1;
  margin-top: 0;
}

.course-overview-panel-compact .hero-metrics-compact {
  grid-template-columns: 1fr;
  gap: 10px;
}

.course-overview-panel.course-overview-panel-compact .course-overview-side {
  grid-template-columns: minmax(130px, 0.24fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.course-overview-panel-compact .hero-metric {
  min-height: 0;
  padding: 12px 14px;
  border-radius: 14px;
}

.course-overview-panel-compact .hero-metric strong {
  margin-top: 4px;
  font-size: 20px;
}

.course-overview-next.course-overview-next-compact {
  min-height: 0;
  padding: 18px 20px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(31, 54, 88, 0.08);
}

.course-overview-next.course-overview-next-compact h3 {
  max-width: 680px;
  font-size: 21px;
  line-height: 1.28;
}

.course-overview-next.course-overview-next-compact .editor-kicker {
  margin-bottom: 6px;
}

.course-overview-next.course-overview-next-compact .action-btn {
  flex: 0 0 auto;
}

.module-roadmap-section.learning-section {
  padding: 16px 18px;
  margin-bottom: 12px;
  border-radius: 18px;
}

.module-roadmap-section .content-disclosure {
  margin: 0;
  border-top: 0;
  border-bottom: 0;
}

.module-roadmap-section .content-disclosure-summary {
  min-height: 54px;
  padding: 8px 0 10px;
  align-items: center;
}

.module-disclosure {
  gap: 12px;
}

.module-disclosure .content-disclosure-summary h2 {
  margin: 0;
  font-size: 22px;
}

.module-roadmap-section .editor-kicker {
  margin-bottom: 4px;
}

.lesson-roadmap {
  gap: 10px;
}

.lesson-roadmap-card {
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
}

.lesson-roadmap-top {
  align-items: center;
  margin-bottom: 0;
}

.lesson-roadmap-card strong {
  font-size: 16px;
  line-height: 1.32;
}

.lesson-roadmap-flags {
  gap: 8px;
}

.lesson-roadmap-card .status-chip {
  min-height: 28px;
  padding: 4px 10px;
}

.dashboard-hero-air {
  grid-template-columns: 1fr;
  min-height: 420px;
  padding: 42px 38px 34px;
}

.dashboard-hero-copy {
  max-width: 820px;
}

.dashboard-hero-air .hero-badge {
  width: fit-content;
  font-weight: 700;
}

.dashboard-hero-air .hero-copy h2 {
  max-width: 860px;
  margin-top: 28px;
}

.dashboard-hero-air .hero-copy p {
  max-width: 720px;
  font-size: 19px;
  line-height: 1.65;
}

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

.hero-action-primary.action-btn {
  background: #ffffff;
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 18px 38px rgba(255, 255, 255, 0.13);
}

.dashboard-hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 46px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.dashboard-hero-metrics .hero-metric {
  min-width: 120px;
  padding: 0;
  border: 0;
  background: transparent;
}

.dashboard-hero-metrics .hero-metric strong {
  margin: 0;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.05em;
}

.dashboard-hero-metrics .hero-metric span {
  margin-top: 8px;
  font-size: 14px;
}

.dashboard-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.dashboard-rating-panel,
.dashboard-tasks-panel {
  margin-bottom: 0;
}

.dashboard-section-head {
  margin-bottom: 18px;
}

.dashboard-section-head h2 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.04em;
}

.employee-rating-list {
  display: grid;
  gap: 12px;
}

.employee-rating-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 12px;
  border: 1px solid rgba(230, 232, 238, 0.9);
  border-radius: 18px;
  background: #f4f5f8;
}

.employee-rating-place {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #ffffff;
  color: var(--accent);
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(230, 232, 238, 0.9);
}

.employee-rating-copy {
  min-width: 0;
}

.employee-rating-copy strong,
.employee-rating-copy span {
  display: block;
}

.employee-rating-copy strong {
  color: var(--ink);
  font-size: 17px;
}

.employee-rating-copy span {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 14px;
}

.employee-rating-score {
  color: #05070a;
  font-size: 21px;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.dashboard-task-table-wrap {
  overflow-x: auto;
}

.dashboard-task-table {
  min-width: 0;
  width: 100%;
}

.dashboard-task-table th,
.dashboard-task-table td {
  padding: 14px 18px;
}

.dashboard-task-table th {
  background: transparent;
  color: #8a909a;
}

.dashboard-task-table td {
  background: rgba(255, 255, 255, 0.34);
}

@media (max-width: 1120px) {
  .dashboard-board {
    grid-template-columns: 1fr;
  }
}

/* Unified rectangular block radius */
:root {
  --radius-xl: 8px;
  --radius-lg: 8px;
  --radius-md: 8px;
  --radius-sm: 8px;
}

.hero-panel,
.panel,
.card,
.answer-card,
.module-card,
.login-card,
.catalog-card,
.notification-card,
.course-review-group,
.result-details-disclosure,
.learning-progress-card,
.course-overview-next,
.course-overview-next-compact,
.module-roadmap-section,
.lesson-roadmap-card,
.builder-panel,
.builder-item,
.list-link,
.step-card,
.material-preview-card,
.longread-block-card,
.longread-resource-card,
.lesson-editor-shell,
.lesson-meta-card,
.test-panel,
.result-panel,
.learning-hint-panel,
.lesson-question-panel,
.choice-card,
.question-review-card,
.result-summary-card,
.result-completion-panel,
.result-feedback-card,
.result-next-card,
.result-guidance-card,
.grading-pending-panel,
.llm-manager-card,
.llm-profile-card,
.open-review-card,
.metric-card,
.employee-course-card,
.course-card-visual,
.notifications-page-card,
.notifications-table-wrap,
.notifications-stream-item,
.course-list-card,
.course-list-image,
.dashboard-rating-panel,
.dashboard-tasks-panel,
.employee-rating-item,
.empty-state,
.empty-state-panel,
.access-box,
.table {
  border-radius: 8px;
}

.hero-panel::after,
.metric-card::before {
  border-radius: 8px;
}

.action-btn.action-btn-muted {
  background: #eef2f7;
  color: #516176;
  border: 1px solid #dce4ee;
  box-shadow: none;
}

.action-btn.action-btn-muted:hover {
  background: #e7edf5;
}

.lesson-editor-topbar {
  justify-content: flex-end;
  margin-bottom: 14px;
}

.lesson-editor-topbar .button-row {
  margin-left: auto;
}

.lesson-meta-grid {
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: start;
}

.lesson-meta-module {
  grid-column: 1;
}

.lesson-meta-order {
  grid-column: 2;
}

.lesson-meta-grid .lesson-meta-full {
  grid-column: 1 / -1;
}

.lesson-meta-grid .lesson-meta-order input {
  text-align: center;
}

.lesson-sticky-actions .action-btn,
.lesson-sticky-actions .login-submit {
  border-radius: 8px;
}

.lesson-test-disclosure,
.lesson-test-form,
.lesson-answer-option,
.lesson-test-line.is-active,
.mini-icon-btn {
  border-radius: 8px;
}

.lesson-question-toprow {
  grid-template-columns: minmax(240px, 420px) minmax(100px, 140px);
  justify-content: start;
}

.lesson-question-toprow .login-label {
  margin-left: 0;
  width: 100%;
}

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

  .lesson-meta-module,
  .lesson-meta-order {
    grid-column: 1;
  }

  .lesson-sticky-actions {
    justify-content: stretch;
  }

  .lesson-sticky-actions .action-btn,
  .lesson-sticky-actions .login-submit {
    flex: 1 1 auto;
  }
}

@media (max-width: 760px) {
  .employee-test-card {
    grid-template-columns: 1fr;
  }

  .test-hero-cover {
    width: 100%;
    min-height: 180px;
  }

  .employee-test-cover {
    width: 100%;
  }

  .employee-test-actions {
    justify-content: flex-start;
  }
}

.tests-panel {
  display: grid;
  gap: 18px;
}

.tests-list {
  display: grid;
  gap: 12px;
}

.test-list-item {
  grid-template-columns: 220px minmax(0, 1fr);
}

.test-list-link {
  color: inherit;
  text-decoration: none;
}

.test-list-link:hover,
.test-list-link:focus-visible {
  outline: none;
}

.test-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  color: #65758a;
  font-size: 13px;
}

.test-list-meta span {
  padding: 5px 8px;
  border-radius: 8px;
  background: #f4f7fb;
}

.test-list-image {
  background:
    linear-gradient(135deg, rgba(18, 19, 24, 0.88), rgba(227, 6, 19, 0.3)),
    #f1f2f5;
}

.test-admin-hero {
  margin-bottom: 18px;
}

.test-admin-hero .course-admin-cover-actions {
  gap: 10px;
}

.test-admin-hero .course-admin-cover-actions .action-btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
}

.test-admin-hero .course-admin-cover-actions .action-btn:not(.action-btn-ghost) {
  background: var(--accent);
  color: #fff;
}

.test-admin-hero .course-admin-cover-actions .action-btn-ghost {
  background: rgba(255, 255, 255, 0.86);
  color: #20242d;
  border-color: rgba(218, 225, 235, 0.9);
  box-shadow: none;
}

.test-detail-grid {
  align-items: start;
}

.test-settings-list {
  display: grid;
  gap: 10px;
}

.test-settings-list div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
  border-bottom: 1px solid #edf2f6;
}

.test-settings-list span {
  color: #708095;
  font-size: 13px;
}

.test-settings-list strong {
  color: #202936;
  font-size: 14px;
}

.test-assign-form {
  display: grid;
  gap: 14px;
}

.test-assignments-page {
  display: grid;
  gap: 14px;
}

.test-assignment-create-panel {
  display: grid;
  grid-template-columns: minmax(180px, 0.36fr) minmax(0, 1fr);
  gap: 18px;
  align-items: end;
}

.test-assignment-create-panel h2 {
  margin: 4px 0 0;
  color: #202936;
}

.test-assign-compact-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 170px auto;
  gap: 10px;
  align-items: end;
}

.test-assign-compact-form .login-label {
  gap: 5px;
}

.test-assign-compact-form .login-label > span {
  color: #68778c;
  font-size: 12px;
}

.test-assign-compact-form .login-input,
.test-assignment-filters .login-input,
.test-assignment-due-form .login-input {
  min-height: 40px;
  height: 40px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.2;
  box-shadow: none;
}

.test-assign-compact-form select.login-input,
.test-assignment-filters select.login-input {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 11px;
  padding-right: 32px;
}

.test-assign-compact-form .action-btn {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 9px;
}

.test-assignment-summary-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e3ebf3;
  border-radius: 12px;
  background: #fff;
}

.test-assignment-summary-line span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f7fafc;
  color: #68778c;
  font-size: 12px;
}

.test-assignment-summary-line strong {
  margin-left: 4px;
  color: #202936;
}

.test-assignments-panel {
  display: grid;
  gap: 12px;
  overflow: visible;
}

.test-assignment-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 170px 160px auto;
  gap: 10px;
  align-items: end;
}

.test-assignment-filters label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.test-assignment-filters label > span {
  color: #68778c;
  font-size: 12px;
  line-height: 1.25;
}

.test-assignment-filters .action-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 9px;
}

.test-selection-rules {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.test-selection-rules-inline {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 18px;
}

.test-selection-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f7fafc;
  color: #65758a;
  font-size: 13px;
}

.test-selection-rule strong {
  min-width: 34px;
  color: #202936;
  font-size: 16px;
}

.test-assignments-table td:first-child strong {
  color: #202936;
  font-weight: 600;
}

.test-assignments-table {
  table-layout: fixed;
}

.test-assignments-table th,
.test-assignments-table td {
  padding-top: 11px;
  padding-bottom: 11px;
  vertical-align: middle;
}

.test-assignments-table th:nth-child(1) {
  width: 28%;
}

.test-assignments-table th:nth-child(2) {
  width: 130px;
}

.test-assignments-table th:nth-child(3) {
  width: 130px;
}

.test-assignments-table th:nth-child(4) {
  width: 130px;
}

.test-assignments-table th:nth-child(5) {
  width: 190px;
}

.test-assignments-table th:nth-child(6) {
  width: 190px;
}

.test-assignments-table td:first-child {
  min-width: 0;
}

.test-assignments-table td:first-child strong,
.test-assignments-table td:first-child .muted {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test-assignment-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #526173;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.test-assignment-status-not_started {
  background: #f1f5f9;
  color: #526173;
}

.test-assignment-status-in_progress,
.test-assignment-status-pending_review {
  background: #eef7fb;
  color: #246b80;
}

.test-assignment-status-completed {
  background: #eaf8f0;
  color: #247a4e;
}

.test-assignment-status-overdue {
  background: #fff0f1;
  color: #a31625;
}

.test-assignment-overdue {
  color: #a31625;
  font-weight: 650;
}

.test-assignment-actions-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}

.test-assignment-due-details {
  min-width: 0;
}

.test-assignment-due-details summary {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #dce4ee;
  border-radius: 8px;
  background: #fff;
  color: #526173;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.test-assignment-due-details summary::-webkit-details-marker {
  display: none;
}

.test-assignment-due-details[open] summary {
  border-color: #c7d6e6;
  color: #202936;
}

.test-assignment-due-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: min(220px, 100%);
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #dce4ee;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

.test-assignment-due-form .action-btn {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 9px;
}

.test-assignment-remove-btn {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  box-shadow: none;
}

.test-question-list {
  display: grid;
  gap: 10px;
  align-content: start;
}

.test-question-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  background: #fff;
}

.test-question-row.is-active {
  border-color: #9fb7cf;
  background: #f7fafc;
}

.test-question-row:hover,
.test-question-row:focus-visible {
  border-color: #cddbe8;
  box-shadow: 0 12px 28px rgba(31, 54, 81, 0.07);
  outline: none;
}

.test-question-row strong {
  display: block;
  color: #202936;
  font-weight: 600;
  line-height: 1.35;
}

.test-question-row span:not(.status-chip) {
  display: block;
  margin-top: 4px;
  color: #708095;
  font-size: 13px;
}

.test-settings-form {
  display: grid;
  gap: 18px;
}

.test-settings-page {
  display: grid;
  gap: 12px;
}

.test-settings-title-row {
  margin-bottom: 0;
}

.test-settings-modern-form {
  gap: 0;
}

.test-settings-card {
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 1px solid #e3ebf3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(29, 64, 98, 0.035);
}

.test-settings-card-simple {
  width: 100%;
}

.test-settings-simple-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.test-settings-card .login-label {
  gap: 6px;
}

.test-settings-card .login-label > span,
.test-settings-card .login-label small {
  color: #68778c;
  font-size: 12px;
  line-height: 1.35;
}

.test-settings-card .login-input {
  width: 100%;
  height: 50px;
  min-height: 50px;
  border-radius: 10px;
  box-shadow: none;
}

.test-settings-description {
  min-height: 86px;
  resize: vertical;
}

.test-settings-full {
  grid-column: 1 / -1;
}

.test-pass-percent-field {
  max-width: none;
}

.test-percent-input-wrap {
  position: relative;
  display: block;
  height: 50px;
}

.test-percent-input-wrap .login-input {
  width: 100%;
  height: 50px;
  padding-right: 42px;
  font-weight: 700;
}

.test-percent-input-wrap > span {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  right: 14px;
  color: #68778c;
  line-height: 1;
  pointer-events: none;
}

.test-settings-review-select {
  align-self: start;
  min-width: 0;
}

.test-settings-review-select .login-input {
  height: 50px;
  padding-left: 12px;
  padding-right: 34px;
  font-size: 15px;
  line-height: 1.2;
  text-overflow: ellipsis;
}

.test-review-mode-helper {
  display: block;
  min-height: 0;
  margin-top: 2px;
  padding: 0;
  color: #68778c;
  font-size: 12px;
  line-height: 1.35;
}

.test-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

.test-settings-actions .action-btn {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 10px;
}

.test-settings-rules {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  background: #fbfdff;
}

.test-settings-rules h3 {
  margin: 2px 0 0;
  color: #202936;
  font-size: 18px;
}

.test-rule-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.test-editor-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.5fr);
  gap: 18px;
  align-items: start;
}

.test-questions-flow {
  display: grid;
  gap: 18px;
}

.test-question-blocks {
  gap: 12px;
}

.test-question-block {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  background: #fff;
}

.test-question-block.is-active {
  border-color: #c7d6e6;
  background: #fbfdff;
}

.test-question-block .lesson-test-open {
  grid-template-columns: 28px minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.test-question-block .lesson-test-number {
  align-self: center;
  min-width: 0;
  white-space: nowrap;
  text-align: center;
}

.test-question-block .lesson-test-line-copy {
  align-self: center;
  min-width: 0;
}

.test-question-block .lesson-test-line-copy strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.test-question-line-type,
.test-question-line-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid #dce4ee;
  border-radius: 999px;
  background: #f7fafc;
  color: #687386;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.test-question-line-score {
  color: #2f3b4d;
  font-weight: 650;
}

.test-question-block .lesson-test-line-actions {
  align-self: center;
}

.mini-icon-btn-danger,
.test-question-form .action-btn.action-btn-danger {
  background: #eef2f7;
  color: #7f2f3a;
  border: 1px solid #dce4ee;
  box-shadow: none;
}

.mini-icon-btn-danger:hover,
.mini-icon-btn-danger:focus-visible,
.test-question-form .action-btn.action-btn-danger:hover,
.test-question-form .action-btn.action-btn-danger:focus-visible {
  background: #fff0f1;
  color: #a31625;
  border-color: #efb8bf;
  box-shadow: none;
}

.test-question-inline-form {
  grid-column: 1 / -1;
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: 0 solid transparent;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.32s ease, opacity 0.2s ease, margin-top 0.24s ease, padding-top 0.24s ease;
}

.test-question-inline-form.is-open {
  max-height: 1800px;
  margin-top: 10px;
  padding-top: 10px;
  border-top-color: #edf2f6;
  border-top-width: 1px;
  opacity: 1;
  visibility: visible;
}

.test-question-inline-form .lesson-test-form {
  max-width: 920px;
}

.test-question-inline-form .test-question-form {
  gap: 10px;
}

.test-question-fields-row {
  grid-template-columns: minmax(220px, 360px) 120px;
  gap: 8px;
}

.test-question-fields-row .login-input,
.test-question-form .login-input {
  min-height: 40px;
}

.test-question-fields-row .lesson-score-field .login-input {
  max-width: 120px;
}

.test-question-form .login-label > span {
  margin-bottom: 5px;
  font-size: 12px;
}

.test-question-textarea {
  min-height: 52px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.test-question-form .lesson-form-section-soft {
  padding-top: 10px;
}

.test-question-form .lesson-inline-heading {
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.test-question-form .lesson-test-options-grid {
  gap: 6px;
}

.test-question-form .lesson-answer-option {
  grid-template-columns: 18px 24px minmax(0, 1fr);
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
}

.test-question-form .lesson-answer-option.is-correct {
  border-color: rgba(40, 169, 104, 0.22);
  background: #f6fcf9;
}

.test-question-form .lesson-answer-option > span:not(.answer-correct-mark) {
  font-weight: 650;
  text-align: center;
}

.test-question-form .lesson-answer-option .login-input {
  min-height: 36px;
  padding: 0 10px;
}

.test-question-explanation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.test-question-explanation-head .lesson-inline-heading {
  margin: 0;
}

.test-question-explanation-head .check-option {
  margin: 0;
  color: #687386;
  font-size: 12px;
}

.test-question-form .lesson-test-editor-actions {
  margin-top: 0;
  padding-top: 0;
  gap: 8px;
}

.test-question-form .lesson-test-editor-actions .action-btn {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 9px;
}

.test-add-question-bottom {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding-top: 4px;
}

.test-add-question-bottom .test-question-block {
  width: 100%;
}

.test-new-question-block:not(.is-active) {
  display: none;
}

.test-new-question-head {
  display: grid;
  gap: 3px;
}

.test-new-question-head strong {
  color: var(--navy);
  font-size: 15px;
  line-height: 1.25;
}

.test-new-question-head span {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.35;
}

.test-question-editor {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  background: #fbfdff;
}

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

.test-question-mode {
  display: grid;
  gap: 14px;
}

.test-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.test-question-actions {
  justify-content: flex-start;
}

.test-question-delete-form {
  display: flex;
  justify-content: flex-start;
  padding-top: 4px;
  border-top: 1px solid #edf2f6;
}

.test-assignment-actions {
  display: grid;
  gap: 8px;
  min-width: 360px;
}

.test-assignment-inline-form {
  display: grid;
  grid-template-columns: 140px 140px auto;
  gap: 8px;
  align-items: center;
}

.test-assignment-actions .action-btn {
  min-height: 38px;
}

.test-analytics-page {
  display: grid;
  gap: 14px;
}

.test-analytics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.test-analytics-head h2,
.test-analytics-panel h2,
.test-analytics-panel h3 {
  margin: 4px 0 0;
  color: #202936;
}

.test-analytics-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border: 1px solid #e1e8f0;
  border-radius: 12px;
  background: #f7fafc;
}

.test-analytics-tabs a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 9px;
  color: #65758a;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.test-analytics-tabs a:hover,
.test-analytics-tabs a:focus-visible,
.test-analytics-tabs a.active {
  background: #fff;
  color: #202936;
  box-shadow: 0 6px 14px rgba(29, 64, 98, 0.07);
  outline: none;
}

.test-analytics-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.test-analytics-metric {
  min-height: 78px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 14px;
  border: 1px solid #e3ebf3;
  border-radius: 12px;
  background: #fff;
}

.test-analytics-metric span {
  color: #708095;
  font-size: 12px;
  line-height: 1.25;
}

.test-analytics-metric strong {
  color: #202936;
  font-size: 24px;
  line-height: 1;
}

.test-analytics-metric-success {
  border-color: #d5eadf;
  background: #f7fcf9;
}

.test-analytics-metric-success strong {
  color: #247a4e;
}

.test-analytics-metric-danger {
  border-color: #f2cbd0;
  background: #fff7f8;
}

.test-analytics-metric-danger strong {
  color: #b42332;
}

.test-analytics-metric-warning {
  border-color: #f3dfb7;
  background: #fffaf0;
}

.test-analytics-metric-warning strong {
  color: #9a6a13;
}

.test-analytics-filters {
  display: grid;
  grid-template-columns: 160px 180px minmax(170px, 1fr) minmax(180px, 1.1fr) 170px auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid #e3ebf3;
  border-radius: 12px;
  background: #fff;
}

.test-analytics-filters label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.test-analytics-filters label > span {
  color: #68778c;
  font-size: 12px;
  line-height: 1.25;
}

.test-analytics-filters .login-input {
  min-height: 40px;
  height: 40px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.2;
  box-shadow: none;
}

.test-analytics-filters select.login-input {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 11px;
  padding-right: 32px;
}

.test-analytics-filters .action-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 9px;
}

.test-analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.test-analytics-panel {
  display: grid;
  gap: 14px;
}

.test-analytics-panel-wide {
  grid-column: 1 / -1;
}

.test-analytics-funnel {
  display: grid;
  gap: 9px;
}

.test-analytics-funnel div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f7fafc;
}

.test-analytics-funnel span,
.test-analytics-insights,
.test-question-problem-list span {
  color: #68778c;
  font-size: 13px;
}

.test-analytics-funnel strong {
  color: #202936;
  font-size: 18px;
}

.test-analytics-insights {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  line-height: 1.45;
}

.test-question-problem-list {
  display: grid;
  gap: 8px;
}

.test-question-problem-list div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7f8;
}

.test-question-problem-list strong {
  color: #202936;
  font-size: 14px;
  line-height: 1.35;
}

.test-analytics-table {
  margin-top: 2px;
}

.test-analytics-table th {
  color: #738094;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.test-analytics-table td {
  vertical-align: middle;
}

.test-analytics-table td strong {
  color: #202936;
  font-weight: 600;
}

.test-analytics-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #526173;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.test-analytics-status-not_started {
  background: #f1f5f9;
  color: #526173;
}

.test-analytics-status-in_progress {
  background: #eef7fb;
  color: #246b80;
}

.test-analytics-status-pending_review {
  background: #fff4dc;
  color: #8a5a0a;
}

.test-analytics-status-passed {
  background: #eaf8f0;
  color: #247a4e;
}

.test-analytics-status-failed,
.test-analytics-status-overdue {
  background: #fff0f1;
  color: #a31625;
}

.test-question-row-danger td {
  background: #fffafa;
}

@media (max-width: 900px) {
  .test-list-item {
    grid-template-columns: 1fr;
  }

  .test-editor-grid {
    grid-template-columns: 1fr;
  }

  .test-settings-simple-grid {
    grid-template-columns: 1fr;
  }

  .test-question-block {
    grid-template-columns: 1fr;
  }

  .test-selection-rules-inline,
  .test-rule-grid {
    grid-template-columns: 1fr 1fr;
  }

  .test-settings-list div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .test-assignment-actions {
    min-width: 0;
  }

  .test-assignment-inline-form {
    grid-template-columns: 1fr;
  }

  .test-assignment-create-panel {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .test-assign-compact-form {
    grid-template-columns: minmax(220px, 1fr) 160px auto;
  }

  .test-assignment-filters {
    grid-template-columns: minmax(220px, 1fr) 160px 150px auto;
  }

  .test-analytics-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .test-analytics-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .test-analytics-filters,
  .test-analytics-grid {
    grid-template-columns: 1fr 1fr;
  }

  .test-analytics-filters .action-btn {
    justify-self: start;
  }
}

@media (max-width: 700px) {
  .test-assign-compact-form,
  .test-assignment-filters {
    grid-template-columns: 1fr;
  }

  .test-assignment-summary-line {
    gap: 6px;
  }

  .test-assignment-summary-line span {
    flex: 1 1 140px;
    justify-content: center;
  }

  .test-assignments-table {
    display: block;
  }

  .test-assignments-table thead {
    display: none;
  }

  .test-assignments-table tbody,
  .test-assignments-table tr,
  .test-assignments-table td {
    display: block;
    width: 100%;
  }

  .test-assignments-table tr {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #e3ebf3;
    border-radius: 10px;
    background: #fff;
  }

  .test-assignments-table td {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 10px;
    padding: 7px 0;
    border: 0;
  }

  .test-assignments-table td::before {
    content: attr(data-label);
    color: #738094;
    font-size: 12px;
  }

  .test-assignments-table td:first-child strong,
  .test-assignments-table td:first-child .muted {
    white-space: normal;
  }

  .test-assignment-actions-compact {
    justify-content: flex-start;
  }

  .test-assignment-due-form {
    position: static;
    grid-template-columns: 1fr;
    margin-top: 6px;
  }
}

@media (max-width: 560px) {
  .test-settings-card,
  .test-settings-actions {
    padding: 14px;
  }

  .test-settings-actions {
    padding: 0;
    justify-content: stretch;
  }

  .test-settings-actions .action-btn {
    flex: 1;
  }

  .test-selection-rules-inline,
  .test-rule-grid,
  .test-question-row,
  .test-option-grid,
  .test-question-block .lesson-test-open {
    grid-template-columns: 1fr;
  }

  .test-question-block .lesson-test-number {
    min-width: 0;
  }

  .test-question-fields-row {
    grid-template-columns: 1fr 120px;
  }

  .test-question-explanation-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .test-assign-compact-form,
  .test-assignment-filters {
    grid-template-columns: 1fr;
  }

  .test-assignment-summary-line {
    gap: 6px;
  }

  .test-assignment-summary-line span {
    flex: 1 1 140px;
    justify-content: center;
  }

  .test-assignments-table {
    display: block;
  }

  .test-assignments-table thead {
    display: none;
  }

  .test-assignments-table tbody,
  .test-assignments-table tr,
  .test-assignments-table td {
    display: block;
    width: 100%;
  }

  .test-assignments-table tr {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #e3ebf3;
    border-radius: 10px;
    background: #fff;
  }

  .test-assignments-table td {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 10px;
    padding: 7px 0;
    border: 0;
  }

  .test-assignments-table td::before {
    content: attr(data-label);
    color: #738094;
    font-size: 12px;
  }

  .test-assignments-table td:first-child strong,
  .test-assignments-table td:first-child .muted {
    white-space: normal;
  }

  .test-assignment-actions-compact {
    justify-content: flex-start;
  }

  .test-assignment-due-form {
    position: static;
    grid-template-columns: 1fr;
    margin-top: 6px;
  }

  .test-analytics-tabs,
  .test-analytics-tabs a {
    width: 100%;
  }

  .test-analytics-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .test-analytics-metrics,
  .test-analytics-filters,
  .test-analytics-grid {
    grid-template-columns: 1fr;
  }

  .test-analytics-metric {
    min-height: 66px;
  }

  .test-analytics-panel {
    overflow-x: auto;
  }
}

.analytics-page {
  display: grid;
  gap: 14px;
}

.analytics-head {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.analytics-head h2,
.analytics-panel h3,
.analytics-problem-card h3 {
  margin: 4px 0 0;
  color: #202936;
}

.analytics-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border: 1px solid #e1e8f0;
  border-radius: 12px;
  background: #f7fafc;
}

.analytics-tabs a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 9px;
  color: #65758a;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.analytics-tabs a:hover,
.analytics-tabs a:focus-visible,
.analytics-tabs a.active {
  background: #fff;
  color: #202936;
  box-shadow: 0 6px 14px rgba(29, 64, 98, 0.07);
  outline: none;
}

.analytics-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.analytics-metrics-tests {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.analytics-metric {
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 14px;
  border: 1px solid #e3ebf3;
  border-radius: 12px;
  background: #fff;
}

.analytics-metric span {
  color: #708095;
  font-size: 12px;
  line-height: 1.25;
}

.analytics-metric strong {
  color: #202936;
  font-size: 24px;
  line-height: 1;
}

.analytics-metric-success {
  border-color: #d5eadf;
  background: #f7fcf9;
}

.analytics-metric-success strong {
  color: #247a4e;
}

.analytics-metric-danger {
  border-color: #f2cbd0;
  background: #fff7f8;
}

.analytics-metric-danger strong {
  color: #b42332;
}

.analytics-metric-warning {
  border-color: #f3dfb7;
  background: #fffaf0;
}

.analytics-metric-warning strong {
  color: #9a6a13;
}

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

.analytics-panel,
.analytics-problem-card {
  display: grid;
  gap: 8px;
  align-content: start;
}

.analytics-card-head {
  min-height: 48px;
  display: grid;
  align-content: start;
  gap: 3px;
}

.analytics-card-head .editor-kicker {
  margin: 0;
}

.analytics-card-head h3 {
  margin: 0;
  min-height: 24px;
  line-height: 1.25;
}

.analytics-list {
  display: grid;
  align-content: start;
  grid-auto-rows: min-content;
  gap: 8px;
}

.analytics-grid .analytics-list {
  height: 248px;
  max-height: 248px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.analytics-list article {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f7fafc;
}

.analytics-list .empty-state {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 118px;
  align-content: center;
  justify-items: start;
  padding: 18px 20px;
  border: 1px dashed #dfe8f2;
  border-radius: 10px;
  background: #f7fafc;
  text-align: left;
}

.analytics-list .empty-state h3 {
  margin: 0;
  font-size: 16px;
}

.analytics-list .empty-state p {
  margin: 8px 0 0;
}

.analytics-list article strong {
  color: #202936;
  font-size: 14px;
  line-height: 1.35;
}

.analytics-page a {
  color: inherit;
  text-decoration: none;
}

.analytics-page a:hover,
.analytics-page a:focus-visible {
  color: #c40018;
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.analytics-list article span {
  color: #68778c;
  font-size: 13px;
  line-height: 1.35;
}

.analytics-list article em {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: #526173;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.analytics-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(145px, 1fr)) auto auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid #e3ebf3;
  border-radius: 12px;
  background: #fff;
}

.analytics-filters label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.analytics-filters label > span {
  color: #68778c;
  font-size: 12px;
  line-height: 1.25;
}

.analytics-filters .login-input {
  min-height: 40px;
  height: 40px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.2;
  box-shadow: none;
}

.analytics-filters select.login-input {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 11px;
  padding-right: 32px;
}

.analytics-filters .action-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 9px;
}

.analytics-table-panel {
  overflow-x: auto;
}

.analytics-table {
  min-width: 920px;
}

.analytics-activity-table {
  min-width: 760px;
}

.analytics-table th {
  color: #738094;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.analytics-table td {
  vertical-align: middle;
}

.analytics-table td strong {
  color: #202936;
  font-weight: 650;
}

.analytics-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #526173;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.analytics-status-active,
.analytics-status-completed {
  background: #eaf8f0;
  color: #247a4e;
}

.analytics-status-in_progress,
.analytics-status-low_score {
  background: #fff4dc;
  color: #8a5a0a;
}

.analytics-status-not_started {
  background: #f1f5f9;
  color: #526173;
}

.analytics-status-overdue {
  background: #fff0f1;
  color: #a31625;
}

.analytics-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.analytics-chip-list span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f7fafc;
  color: #526173;
  font-size: 12px;
  font-weight: 650;
}

.analytics-filters-activity {
  grid-template-columns: minmax(190px, 1fr) minmax(220px, 1.1fr) minmax(140px, 180px) auto;
  max-width: 960px;
}

.analytics-metrics-activity {
  grid-template-columns: repeat(6, minmax(130px, 1fr));
}

.analytics-activity-grid .analytics-activity-consult {
  grid-column: 1 / -1;
}

.analytics-activity-consult .analytics-list {
  max-height: 248px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.analytics-note {
  margin: 2px 0 0;
  font-size: 12px;
}

.analytics-chip-list a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f7fafc;
  color: #526173;
  font-size: 12px;
  font-weight: 650;
}

.analytics-chip-list a:hover,
.analytics-chip-list a:focus-visible {
  background: #fff0f1;
  color: #a31625;
  text-decoration: none;
}

@media (max-width: 980px) {
  .analytics-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .analytics-metrics,
  .analytics-metrics-tests {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-grid,
  .analytics-problems,
  .analytics-filters {
    grid-template-columns: 1fr 1fr;
  }

  .analytics-filters .action-btn {
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .analytics-tabs,
  .analytics-tabs a {
    width: 100%;
  }

  .analytics-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .analytics-metrics,
  .analytics-metrics-tests,
  .analytics-grid,
  .analytics-problems,
  .analytics-filters {
    grid-template-columns: 1fr;
  }

  .analytics-metric {
    min-height: 66px;
  }
}

/* KB article form overrides: keep these after shared lesson editor rules. */
.longread-editor-form .kb-article-editor-topbar {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.longread-editor-form .kb-article-editor-topbar > div {
  margin-right: auto;
  text-align: left;
}

.longread-editor-form .kb-article-editor-topbar h2 {
  text-align: left;
}

.longread-editor-form .kb-article-meta-grid {
  grid-template-columns: minmax(360px, 1fr) 180px 130px;
  align-items: start;
}

.longread-editor-form .kb-article-meta-grid .login-label:first-child,
.longread-editor-form .kb-article-meta-grid .lesson-meta-full {
  grid-column: 1 / -1;
}

.longread-editor-form .kb-article-folder-field {
  grid-column: 1 / 2;
}

.longread-editor-form .kb-article-status-field {
  grid-column: 2 / 3;
}

.longread-editor-form .kb-article-order-field {
  grid-column: 3 / 4;
}

@media (max-width: 860px) {
  .longread-editor-form .kb-article-meta-grid {
    grid-template-columns: 1fr;
  }

  .longread-editor-form .kb-article-folder-field,
  .longread-editor-form .kb-article-status-field,
  .longread-editor-form .kb-article-order-field {
    grid-column: 1 / -1;
  }
}

/* Employee cabinet refinements */
.topbar-employee .brand-lockup-top {
  min-width: 214px;
  color: var(--ink);
  gap: 10px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.topbar-employee .brand-lockup-top img {
  width: 44px;
  height: 44px;
}

.topbar-employee .brand-lockup-top strong {
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: none;
}

.topbar-employee .brand-lockup-top em {
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.topbar-employee .topbar-notifications-btn.topbar-icon-btn-plain {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.topbar-employee .topbar-notifications-btn.topbar-icon-btn-plain:hover,
.topbar-employee .topbar-notifications-btn.topbar-icon-btn-plain:focus-visible {
  background: rgba(227, 6, 19, 0.08);
  box-shadow: none;
}

/* Device adaptation pass: shared shell, employee flow, and report fallback. */
.analytics-mobile-note {
  display: none;
}

@media (max-width: 820px) {
  .app-shell-simple {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .app-shell-simple .side-panel {
    padding: 18px 14px;
  }

  .app-shell-simple .side-head-top {
    justify-content: center;
  }

  .app-shell-simple .brand-lockup-side span,
  .app-shell-simple .side-subtitle,
  .app-shell-simple .section-link-text,
  .app-shell-simple .sidebar-toggle {
    display: none;
  }

  .app-shell-simple .section-link {
    width: 52px;
    height: 52px;
    justify-content: center;
    padding: 0;
    border-radius: 18px;
  }

  .app-shell-simple .section-nav {
    justify-items: center;
  }

  .topbar,
  .topbar-employee {
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  .topbar-search {
    order: 3;
    width: 100%;
    max-width: none;
    flex-basis: 100%;
  }

  .topbar-actions {
    margin-left: auto;
  }

  .course-overview-panel-compact,
  .learning-layout,
  .access-admin-shell,
  .access-admin-shell-users,
  .lesson-assets-grid {
    grid-template-columns: 1fr;
  }

  .learning-sidebar,
  .content-sidebar,
  .builder-sidebar,
  .lesson-steps-sidebar {
    position: static;
  }
}

@media (max-width: 820px) {
  body {
    background: #f7f9fc;
  }

  .workspace,
  .app-shell-employee .workspace {
    padding: 10px;
  }

  .page-frame {
    border-radius: 22px;
  }

  .page-head {
    padding-bottom: 14px;
  }

  .page-head h1 {
    font-size: 28px;
    line-height: 1.14;
  }

  .panel {
    padding: 18px;
    border-radius: 22px;
  }

  .hero-panel,
  .portal-hero,
  .dashboard-hero,
  .employee-hero,
  .test-hero-panel,
  .result-completion-panel {
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 22px;
    border-radius: 24px;
  }

  .hero-copy h2 {
    font-size: 30px;
    line-height: 1.08;
  }

  .hero-metrics,
  .hero-metrics-compact,
  .analytics-metrics,
  .analytics-metrics-tests,
  .analytics-metrics-activity {
    grid-template-columns: 1fr 1fr;
  }

  .course-overview-next,
  .course-overview-next-compact {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .course-overview-next .action-btn,
  .course-overview-next-compact .action-btn {
    width: 100%;
  }

  .lesson-roadmap-top,
  .employee-test-title-row,
  .panel-row,
  .button-row,
  .result-bottom-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .button-row .action-btn,
  .result-bottom-actions .action-btn,
  .result-bottom-actions form,
  .result-bottom-actions button {
    width: 100%;
  }

  .employee-test-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .employee-test-tab {
    justify-content: center;
    min-width: 0;
    padding-inline: 10px;
  }

  .employee-test-card {
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: start;
  }

  .employee-test-cover {
    width: 96px;
  }

  .employee-test-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    width: 100%;
  }

  .employee-test-actions .action-btn,
  .employee-test-actions form,
  .employee-test-actions button {
    width: 100%;
  }

  .catalog-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .course-card-visual {
    min-height: 150px;
  }

  .lesson-reading-body .page-frame {
    padding: 10px 10px 24px;
  }

  .lesson-reading-head {
    margin-bottom: 22px;
    text-align: left;
  }

  .lesson-reading-head h1 {
    font-size: 30px;
    line-height: 1.14;
  }

  .lesson-reading-head p {
    margin-top: 12px;
  }

  .lesson-reading-article.longread-article {
    padding-bottom: 18px;
  }

  .lesson-reading-article .longread-h1 {
    font-size: 28px;
  }

  .lesson-reading-article .longread-h2 {
    font-size: 24px;
  }

  .lesson-reading-article .longread-h3 {
    font-size: 20px;
  }

  .lesson-reading-article .longread-paragraph,
  .lesson-reading-article .longread-list,
  .lesson-reading-article .longread-callout p,
  .lesson-reading-article .longread-quote p {
    font-size: 17px;
    line-height: 1.62;
  }

  .lesson-reading-actions.lesson-sticky-actions {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 8px;
  }

  .lesson-reading-actions .inline-form,
  .lesson-reading-action {
    min-width: 0;
    width: 100%;
  }

  .result-hero {
    grid-template-columns: 1fr;
  }

  .result-score,
  .result-score-small {
    width: 92px;
    min-width: 92px;
    height: 92px;
    font-size: 28px;
  }

  .analytics-head {
    gap: 12px;
  }

  .analytics-mobile-note {
    display: grid;
  }

  .analytics-mobile-note h2 {
    margin: 4px 0 8px;
    color: #202936;
    font-size: 24px;
    line-height: 1.2;
  }

  .analytics-desktop-content {
    display: none;
  }
}

@media (max-width: 620px) {
  .app-shell,
  .app-shell-simple,
  .app-shell-simple.is-sidebar-collapsed,
  .app-shell-employee {
    display: block;
    min-height: 100vh;
  }

  .side-panel {
    position: sticky;
    top: 0;
    z-index: 20;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 8px 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(230, 232, 238, 0.9);
    background: rgba(18, 19, 24, 0.96);
  }

  .side-head {
    display: none;
  }

  .side-footer {
    display: none;
  }

  .section-nav {
    display: flex;
    gap: 6px;
    margin: 0;
    overflow-x: auto;
    padding: 2px 0;
    scrollbar-width: none;
  }

  .section-nav::-webkit-scrollbar {
    display: none;
  }

  .section-link,
  .app-shell-simple .section-link,
  .app-shell-simple.is-sidebar-collapsed .section-link {
    width: auto;
    height: 44px;
    min-width: 46px;
    flex: 0 0 auto;
    padding: 0 12px;
    border-radius: 14px;
  }

  .section-link-text,
  .app-shell-simple .section-link-text {
    display: inline;
    color: inherit;
    font-size: 12px;
    white-space: nowrap;
  }

  .section-link-icon {
    width: 18px;
    min-width: 18px;
    height: 18px;
  }

  .topbar,
  .topbar-employee {
    position: sticky;
    top: 0;
    z-index: 18;
    min-height: 0;
    margin: 0 0 14px;
    padding: 10px;
    border: 1px solid rgba(230, 232, 238, 0.9);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
  }

  .topbar-employee {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 18px;
  }

  .topbar-employee .brand-lockup-top {
    display: none;
  }

  .employee-topnav {
    order: 2;
    grid-column: 1 / -1;
    width: auto;
    gap: 6px;
    overflow-x: auto;
    padding: 0;
    scrollbar-width: none;
  }

  .employee-topnav::-webkit-scrollbar {
    display: none;
  }

  .employee-topnav-link {
    min-height: 34px;
    flex: 0 0 auto;
    padding: 0 10px;
    border: 1px solid #e4e9f1;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
  }

  .employee-topnav-link.active {
    border-color: rgba(227, 6, 19, 0.28);
    background: #fff5f6;
  }

  .topbar-search input {
    height: 38px;
    padding: 0 12px;
    border-radius: 13px;
    font-size: 13px;
  }

  .topbar-actions {
    grid-column: 2 / 3;
    grid-row: 1;
    gap: 8px;
  }

  .topbar-employee .topbar-search {
    order: 0;
    grid-column: 1 / 2;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    flex-basis: auto;
    margin: 0;
  }

  .topbar-search .search-icon {
    display: none;
  }

  .topbar-avatar,
  .topbar-icon-btn,
  .topbar-employee .topbar-notifications-btn.topbar-icon-btn-plain {
    width: 34px;
    height: 34px;
  }

  .topbar-avatar {
    font-size: 12px;
  }

  .topbar-overlay-panel {
    top: 76px;
    right: 10px;
    width: min(360px, calc(100vw - 20px));
    max-height: calc(100vh - 96px);
  }

  .workspace,
  .app-shell-employee .workspace {
    padding: 10px;
  }

  .page-frame {
    padding: 0;
  }

  .page-head h1,
  .hero-copy h2,
  .course-overview-next h3,
  .course-overview-next-compact h3 {
    overflow-wrap: anywhere;
  }

  .hero-metrics,
  .hero-metrics-compact,
  .analytics-metrics,
  .analytics-metrics-tests,
  .analytics-metrics-activity {
    grid-template-columns: 1fr;
  }

  .employee-test-card {
    grid-template-columns: 1fr;
  }

  .employee-test-cover {
    width: 100%;
  }

  .employee-course-card {
    border-radius: 22px;
  }

  .employee-course-card .catalog-card-head {
    gap: 8px;
  }

  .employee-course-card .status-chip {
    width: max-content;
    min-height: 26px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.2;
  }

  .employee-course-card .learning-progress-card {
    padding: 14px;
    border-radius: 14px;
  }

  .course-overview-panel.course-overview-panel-compact,
  .portal-hero.course-overview-panel-compact {
    grid-template-columns: 1fr !important;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(230, 232, 238, 0.88);
    border-radius: 22px;
    background: #ffffff;
    color: var(--ink);
    box-shadow: 0 18px 46px rgba(18, 19, 24, 0.06);
    overflow: hidden;
  }

  .course-overview-panel.course-overview-panel-compact::before,
  .course-overview-panel.course-overview-panel-compact::after,
  .portal-hero.course-overview-panel-compact::before,
  .portal-hero.course-overview-panel-compact::after {
    display: none;
  }

  .course-overview-panel.course-overview-panel-compact .hero-copy h2 {
    color: var(--ink);
    font-size: 28px;
    line-height: 1.16;
    overflow-wrap: anywhere;
  }

  .course-overview-panel.course-overview-panel-compact .hero-copy .muted,
  .course-overview-panel.course-overview-panel-compact .muted {
    color: var(--ink-soft);
  }

  .course-overview-panel.course-overview-panel-compact .course-overview-side {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .course-overview-panel-compact .hero-metrics-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
    padding: 0;
    border-top: 0;
  }

  .course-overview-panel-compact .hero-metric {
    min-height: 76px;
    padding: 12px;
    border-color: rgba(230, 232, 238, 0.9);
    border-radius: 14px;
    background: #f8fbff;
  }

  .course-overview-panel-compact .hero-metric span {
    color: var(--ink-soft);
  }

  .course-overview-panel-compact .hero-metric strong {
    color: var(--ink);
    font-size: 22px;
  }

  .course-overview-next.course-overview-next-compact {
    padding: 14px;
    border-radius: 16px;
    background: #f8fbff;
    box-shadow: none;
  }

  .course-overview-next.course-overview-next-compact h3 {
    font-size: 20px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .module-roadmap-section.learning-section {
    padding: 14px;
    border-radius: 18px;
  }

  .module-roadmap-section .content-disclosure-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    min-height: 46px;
    padding: 4px 0 8px;
    gap: 10px;
  }

  .module-roadmap-section .content-disclosure-summary h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.24;
    letter-spacing: -0.02em;
  }

  .module-roadmap-section .content-disclosure-summary .status-chip {
    min-width: 52px;
    min-height: 32px;
    padding: 4px 9px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    justify-content: center;
    flex-shrink: 0;
  }

  .lesson-roadmap-card strong {
    font-size: 15px;
    line-height: 1.28;
  }

  .lesson-roadmap-card .status-chip,
  .lesson-roadmap-flags .status-chip {
    min-height: 24px;
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1.15;
  }

  .lesson-roadmap-card {
    padding: 12px;
    border-radius: 16px;
  }

  .lesson-roadmap-flags {
    align-items: flex-start;
    flex-direction: column;
  }

  .lesson-reading-breadcrumbs {
    gap: 6px;
    font-size: 12px;
  }

  .lesson-reading-actions.lesson-sticky-actions {
    grid-template-columns: 1fr;
  }

  .lesson-reading-arrow {
    display: none;
  }

  .longread-media img {
    border-radius: 18px;
  }

  .longread-table-wrap,
  .analytics-table-panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .choice-card {
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    min-height: 0;
    padding: 14px;
    border-radius: 14px;
  }

  .choice-card input {
    margin-top: 2px;
  }

  .choice-card div {
    gap: 4px;
  }

  .choice-card strong {
    font-size: 14px;
    line-height: 1.2;
  }

  .choice-card span {
    font-size: 15px;
    line-height: 1.45;
  }

  .result-panel-feedback {
    padding: 14px;
    border-radius: 18px;
  }

  .result-panel-feedback .result-hero {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  .result-panel-feedback .result-score-small {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 20px;
  }

  .result-panel-feedback .result-hero h2 {
    margin: 0 0 4px;
    font-size: 22px;
    line-height: 1.18;
  }

  .result-panel-feedback .result-hero .muted {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
  }

  .result-feedback-card {
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
  }

  .result-feedback-card .result-item-head {
    gap: 8px;
  }

  .result-feedback-card .result-item-head strong {
    font-size: 14px;
  }

  .result-feedback-card .status-chip {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 12px;
    white-space: nowrap;
  }

  .result-feedback-card h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.28;
  }

  .result-feedback-card .muted {
    font-size: 14px;
    line-height: 1.4;
  }

  .result-feedback-card .callout {
    padding: 12px;
    border-radius: 14px;
  }

  .result-panel-feedback .button-row {
    gap: 8px;
  }

  .result-answers-panel {
    padding: 14px;
    border-radius: 18px;
  }

  .result-answers-panel .panel-row {
    margin-bottom: 10px;
  }

  .result-answers-panel h2 {
    margin: 2px 0 0;
    font-size: 22px;
    line-height: 1.2;
  }

  .result-answers-table {
    display: block;
    border-spacing: 0;
  }

  .result-answers-table thead {
    display: none;
  }

  .result-answers-table tbody {
    display: grid;
    gap: 10px;
  }

  .result-answers-table tr {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fbfcff;
  }

  .result-answers-table tbody td {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 0;
    border-bottom: 0;
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .result-answers-table tbody td::before {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .result-answers-table tbody td:nth-child(1) {
    display: block;
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.32;
    overflow-wrap: break-word;
  }

  .result-answers-table tbody td:nth-child(1)::before {
    content: "Вопрос";
    display: block;
    margin-bottom: 4px;
  }

  .result-answers-table tbody td:nth-child(2)::before {
    content: "Тип";
  }

  .result-answers-table tbody td:nth-child(3)::before {
    content: "Ответ";
  }

  .result-answers-table tbody td:nth-child(4)::before {
    content: "Балл";
  }

  .test-hero-panel-result {
    display: none;
  }

  .result-completion-panel {
    padding: 18px;
    border-radius: 18px;
    background: #ffffff;
    color: var(--ink);
    box-shadow: 0 18px 46px rgba(18, 19, 24, 0.06);
  }

  .result-completion-panel::before,
  .result-completion-panel::after {
    display: none;
  }

  .result-completion-panel .result-hero {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .result-completion-panel .result-score {
    width: 58px;
    min-width: 58px;
    height: 58px;
    border-radius: 16px;
    font-size: 18px;
  }

  .result-completion-panel .result-status-line {
    gap: 8px;
    margin-bottom: 8px;
  }

  .result-completion-panel .status-chip {
    min-height: 26px;
    padding: 3px 9px;
    font-size: 11px;
  }

  .result-completion-panel h2 {
    margin: 6px 0;
    font-size: 24px;
    line-height: 1.18;
    color: var(--ink);
  }

  .result-completion-panel .muted {
    color: var(--ink-soft);
  }

  .employee-tests-panel {
    gap: 14px;
  }

  .employee-test-card {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
  }

  .employee-test-cover {
    width: 54px;
    aspect-ratio: 1;
    border-radius: 12px;
  }

  .employee-test-title-row {
    gap: 6px;
  }

  .employee-test-title-row h3 {
    font-size: 16px;
    line-height: 1.25;
  }

  .employee-test-card .muted {
    margin: 6px 0;
    font-size: 13px;
    line-height: 1.4;
  }

  .employee-test-card .status-chip {
    min-height: 24px;
    padding: 3px 8px;
    font-size: 11px;
  }

  .test-list-meta {
    gap: 6px;
    font-size: 12px;
  }

  .employee-test-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }

  .employee-test-actions strong {
    text-align: right;
    font-size: 18px;
  }

  .employee-test-actions .action-btn,
  .employee-test-actions form,
  .employee-test-actions button {
    width: 100%;
    min-height: 40px;
  }

  .employee-test-actions .action-btn,
  .employee-test-actions button {
    padding-inline: 14px;
    font-size: 14px;
    line-height: 1.15;
  }

  .kb-article-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .kb-article-row .table-badge {
    justify-self: start;
    width: auto;
    max-width: max-content;
    min-height: 24px;
    padding: 3px 9px;
    font-size: 11px;
    line-height: 1.2;
  }

  .topbar-profile-menu {
    top: 70px;
    right: 12px;
    width: min(324px, calc(100vw - 24px));
    padding: 12px;
    border-radius: 20px;
  }

  .topbar-profile-head {
    gap: 10px;
    padding-bottom: 10px;
  }

  .topbar-profile-name {
    font-size: 15px;
    line-height: 1.25;
  }

  .topbar-profile-subtitle {
    margin-top: 2px;
    font-size: 12px;
  }

  .topbar-profile-actions {
    gap: 8px;
    padding-top: 10px;
  }

  .topbar-profile-actions .action-btn {
    min-height: 42px;
  }

  .topbar-employee .topbar-overlay-panel,
  .topbar-notifications-menu {
    top: 84px;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(320px, calc(100vw - 28px));
    min-height: 0;
    max-height: min(560px, calc(100vh - 124px));
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(31, 54, 88, 0.18);
    transform: translateX(-50%);
  }

  .topbar-employee .topbar-profile-menu {
    padding: 12px;
  }

  .topbar-notifications-menu .topbar-dropdown-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
  }

  .topbar-notifications-menu .topbar-dropdown-head strong {
    min-width: 0;
    text-align: left;
    font-size: 18px;
    line-height: 1.2;
  }

  .topbar-dropdown-link-button {
    flex-shrink: 0;
    font-size: 11px;
    line-height: 1.2;
  }

  .topbar-notifications-center-link {
    display: none;
  }

  .topbar-drawer-close {
    display: none;
  }

  .topbar-notification-item {
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
  }

  .topbar-notification-dot {
    width: 14px;
    height: 14px;
    margin-top: 3px;
  }

  .topbar-notification-title {
    font-size: 15px;
    line-height: 1.25;
  }

  .topbar-notification-text {
    font-size: 12px;
    line-height: 1.4;
  }

  .lesson-reading-page {
    padding-bottom: 82px;
  }

  .lesson-reading-actions.lesson-sticky-actions {
    position: fixed;
    left: 38px;
    right: 38px;
    bottom: 18px;
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr;
    max-width: none;
    margin: 0;
    padding: 6px;
    border-radius: 20px;
  }

  .lesson-reading-actions.lesson-sticky-actions .inline-form,
  .lesson-reading-actions.lesson-sticky-actions .lesson-reading-action {
    width: 100%;
    min-width: 0;
  }

  .lesson-reading-actions.lesson-sticky-actions .lesson-reading-action {
    height: 40px;
    font-size: 14px;
    line-height: 1.15;
  }

  .lesson-next-panel {
    margin-top: 22px;
  }

  .lesson-next-link {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--ink);
    font-weight: 700;
  }

  .result-details-disclosure summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .app-shell:not(.app-shell-employee),
  .app-shell-simple:not(.app-shell-employee),
  .app-shell-simple.is-sidebar-collapsed:not(.app-shell-employee) {
    padding-bottom: 76px;
  }

  .app-shell:not(.app-shell-employee) .side-panel,
  .app-shell-simple:not(.app-shell-employee) .side-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 10px;
    top: auto;
    z-index: 55;
    padding: 6px;
    border: 1px solid rgba(230, 232, 238, 0.14);
    border-radius: 20px;
    background: rgba(18, 19, 24, 0.96);
    box-shadow: 0 16px 46px rgba(18, 19, 24, 0.24);
  }

  .app-shell:not(.app-shell-employee) .section-nav,
  .app-shell-simple:not(.app-shell-employee) .section-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(58px, 1fr);
    gap: 4px;
    overflow-x: auto;
    padding: 0;
  }

  .app-shell:not(.app-shell-employee) .section-link,
  .app-shell-simple:not(.app-shell-employee) .section-link,
  .app-shell-simple.is-sidebar-collapsed:not(.app-shell-employee) .section-link {
    display: grid;
    grid-template-rows: 20px auto;
    justify-items: center;
    gap: 3px;
    width: auto;
    height: 56px;
    min-width: 58px;
    padding: 7px 6px 5px;
    border-radius: 16px;
  }

  .app-shell:not(.app-shell-employee) .section-link-icon,
  .app-shell-simple:not(.app-shell-employee) .section-link-icon {
    width: 19px;
    min-width: 19px;
    height: 19px;
  }

  .app-shell:not(.app-shell-employee) .section-link-text,
  .app-shell-simple:not(.app-shell-employee) .section-link-text {
    display: block;
    max-width: 64px;
    overflow: hidden;
    color: inherit;
    font-size: 10px;
    line-height: 1.05;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-shell:not(.app-shell-employee) .workspace,
  .app-shell-simple:not(.app-shell-employee) .workspace {
    padding: 10px 10px 0;
  }

  .app-shell:not(.app-shell-employee) .topbar,
  .app-shell-simple:not(.app-shell-employee) .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 22px;
  }

  .app-shell:not(.app-shell-employee) .topbar-search,
  .app-shell-simple:not(.app-shell-employee) .topbar-search {
    grid-column: 1 / 2;
    grid-row: 1;
    order: 0;
    width: 100%;
    min-width: 0;
    margin: 0;
    flex-basis: auto;
  }

  .app-shell:not(.app-shell-employee) .topbar-actions,
  .app-shell-simple:not(.app-shell-employee) .topbar-actions {
    grid-column: 2 / 3;
    grid-row: 1;
    width: auto;
    margin-left: 0;
    justify-content: flex-end;
  }

  .app-shell:not(.app-shell-employee) .topbar-overlay-panel,
  .app-shell-simple:not(.app-shell-employee) .topbar-overlay-panel,
  .topbar-employee .topbar-overlay-panel {
    top: 86px;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(340px, calc(100vw - 24px));
    max-height: min(520px, calc(100vh - 160px));
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    transform: translateX(-50%);
  }

  .app-shell:not(.app-shell-employee) .topbar-notifications-menu,
  .app-shell-simple:not(.app-shell-employee) .topbar-notifications-menu,
  .topbar-employee .topbar-notifications-menu {
    display: flex;
    flex-direction: column;
  }

  .topbar-profile-menu,
  .topbar-employee .topbar-profile-menu {
    padding: 12px;
  }

  .topbar-notifications-menu .topbar-dropdown-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
  }

  .topbar-notifications-menu .topbar-dropdown-head strong {
    min-width: 0;
    font-size: 18px;
    line-height: 1.2;
    text-align: left;
  }

  .topbar-notification-item {
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
  }

  .topbar-notification-dot {
    width: 14px;
    height: 14px;
    margin-top: 3px;
  }

  .course-list-actions {
    justify-content: stretch;
    margin: 0 0 12px;
  }

  .course-create-btn {
    width: 100%;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 14px;
  }

  .course-list-grid {
    gap: 12px;
  }

  .course-list-card,
  .tests-catalog-list .course-list-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    padding: 12px;
    border-radius: 16px;
  }

  .course-list-image,
  .tests-catalog-list .course-list-image {
    width: 72px;
    height: 72px;
    border-radius: 12px;
  }

  .course-list-image img {
    width: 42px;
    height: 42px;
  }

  .course-list-image img.course-cover-img {
    width: 100%;
    height: 100%;
  }

  .course-list-main {
    align-self: center;
    padding-top: 0;
  }

  .course-list-card h2 {
    max-width: none;
    font-size: 18px;
    line-height: 1.18;
    letter-spacing: 0;
  }

  .course-list-main p {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.35;
  }

  .course-list-stats,
  .test-list-meta {
    grid-column: 1 / -1;
  }

  .course-list-stats {
    display: flex;
    gap: 8px;
    justify-items: stretch;
  }

  .course-list-stat {
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f7f9fc;
  }

  .course-list-stat strong {
    font-size: 16px;
  }

  .course-list-stat span,
  .test-list-meta span {
    font-size: 12px;
  }

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

  .test-list-meta span,
  .test-list-meta .status-chip {
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f5f8fc;
    font-size: 11px;
    line-height: 1.2;
  }

  .employees-toolbar,
  .employee-filters-compact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }

  .employee-list-actions,
  .employee-list-actions .action-btn,
  .employee-filters-compact .action-btn {
    width: 100%;
  }

  .employee-access-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .employee-access-tabs::-webkit-scrollbar {
    display: none;
  }

  .employee-access-tabs .notifications-filter-tab {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  .employees-table {
    display: block;
  }

  .employees-table thead {
    display: none;
  }

  .employees-table tbody {
    display: grid;
    gap: 10px;
  }

  .employees-table tr {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
  }

  .employees-table tbody td {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    width: auto !important;
    padding: 0;
    border-bottom: 0;
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  .employees-table tbody td::before {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .employees-table tbody td:nth-child(1) {
    display: block;
    font-size: 16px;
    font-weight: 700;
  }

  .employees-table tbody td:nth-child(1)::before {
    content: "Сотрудник";
    display: block;
    margin-bottom: 4px;
  }

  .employees-table tbody td:nth-child(2)::before {
    content: "Доступ";
  }

  .employees-table tbody td:nth-child(3)::before {
    content: "Роль";
  }

  .employees-table tbody td:nth-child(4)::before {
    content: "Должность";
  }

  .employees-table tbody td:nth-child(5)::before {
    content: "Активность";
  }

  .builder-breadcrumbs {
    gap: 6px;
    margin: 0 2px 10px;
    font-size: 12px;
  }

  .course-admin-cover.hero-panel,
  .course-admin-cover.builder-panel {
    min-height: 0;
    padding: 14px;
    border-radius: 18px;
  }

  .course-admin-cover-image {
    display: none;
  }

  .course-admin-cover-copy h2 {
    font-size: 24px;
    line-height: 1.12;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  .course-page-intro {
    display: -webkit-box;
    max-width: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.4;
  }

  .course-admin-cover-actions {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .course-admin-cover-actions::-webkit-scrollbar {
    display: none;
  }

  .course-admin-cover-actions .action-btn {
    flex: 0 0 auto;
    width: auto;
    min-height: 34px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
  }

  .builder-panel .builder-toolbar,
  .course-assignments-panel .builder-toolbar,
  .course-progress-panel .panel-row {
    align-items: stretch;
    gap: 10px;
  }

  .builder-panel .builder-toolbar .button-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  .builder-panel .builder-toolbar .action-btn,
  .kb-course-note .action-btn {
    width: 100%;
    min-height: 40px;
  }

  .builder-item {
    padding: 12px;
    border-radius: 14px;
  }

  .kb-course-note {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
  }

  .kb-course-note h2,
  .course-assignments-panel h2,
  .course-progress-panel h2 {
    font-size: 20px;
    line-height: 1.2;
  }

  .course-analytics-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin-bottom: 12px;
  }

  .course-analytics-tabs a {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 12px;
  }

  .course-progress-filters,
  .course-review-filters,
  .question-filters-bar,
  .course-assignment-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .course-progress-filters .action-btn,
  .course-review-filters .action-btn,
  .question-filters-actions .action-btn,
  .course-assignment-actions .action-btn {
    width: 100%;
    min-width: 0;
  }

  .course-progress-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .course-progress-kpi {
    padding: 12px;
    border-radius: 14px;
  }

  .course-progress-kpi span {
    font-size: 11px;
    line-height: 1.2;
  }

  .course-progress-kpi strong {
    font-size: 20px;
  }

  .course-review-summary,
  .course-progress-summary.course-review-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }

  .course-progress-summary .course-progress-person,
  .course-progress-summary .course-progress-summary-metrics {
    grid-column: 1 / -1;
  }

  .course-progress-summary-metrics {
    width: 100%;
    grid-template-columns: 1fr;
    justify-self: stretch;
    gap: 8px;
  }

  .course-progress-date {
    text-align: left;
  }

  .course-review-summary::after,
  .course-progress-summary.course-review-summary::after {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .course-review-group {
    border-radius: 16px;
  }

  .course-review-group-body {
    padding-inline: 10px;
  }

  .course-review-summary .table-badge {
    justify-self: start;
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
  }

  .course-analytics-lessons-table,
  .course-progress-table,
  .course-review-table-compact {
    display: block;
  }

  .course-analytics-lessons-table thead,
  .course-progress-table thead,
  .course-review-table-compact thead {
    display: none;
  }

  .course-analytics-lessons-table tbody,
  .course-progress-table tbody,
  .course-review-table-compact tbody {
    display: grid;
    gap: 10px;
  }

  .course-analytics-lessons-table tr,
  .course-progress-table tr,
  .course-review-table-compact tr {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
  }

  .course-analytics-lessons-table tbody td,
  .course-progress-table tbody td,
  .course-review-table-compact tbody td {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
    width: auto !important;
    min-width: 0;
    max-width: none;
    padding: 0;
    border-bottom: 0;
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  .course-analytics-lessons-table tbody td::before,
  .course-progress-table tbody td::before,
  .course-review-table-compact tbody td::before {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .course-analytics-lessons-table tbody td:nth-child(1)::before {
    content: "Модуль";
  }

  .course-analytics-lessons-table tbody td:nth-child(2)::before {
    content: "Урок";
  }

  .course-analytics-lessons-table tbody td:nth-child(3)::before {
    content: "Сотрудники";
  }

  .course-analytics-lessons-table tbody td:nth-child(4)::before {
    content: "Попытки";
  }

  .course-analytics-lessons-table tbody td:nth-child(5)::before {
    content: "Завершено";
  }

  .course-analytics-lessons-table tbody td:nth-child(6)::before {
    content: "Средний";
  }

  .course-analytics-lessons-table tbody td:nth-child(7)::before {
    content: "Сдали";
  }

  .course-analytics-lessons-table tbody td:nth-child(8)::before {
    content: "Вопросы";
  }

  .course-progress-table tbody td:nth-child(1)::before {
    content: "Модуль";
  }

  .course-progress-table tbody td:nth-child(2)::before {
    content: "Урок";
  }

  .course-progress-table tbody td:nth-child(3)::before {
    content: "Статус";
  }

  .course-progress-table tbody td:nth-child(4)::before {
    content: "Балл";
  }

  .course-progress-table tbody td:nth-child(5)::before {
    content: "Процент";
  }

  .course-progress-table tbody td:nth-child(6)::before {
    content: "Открытые";
  }

  .course-progress-table tbody td:nth-child(7)::before {
    content: "Завершен";
  }

  .course-review-table-compact tbody td:nth-child(1)::before {
    content: "Вопрос";
  }

  .course-review-table-compact tbody td:nth-child(2)::before {
    content: "Ответ";
  }

  .course-review-table-compact tbody td:nth-child(3)::before {
    content: "Эталон";
  }

  .course-review-table-compact tbody td:nth-child(4)::before {
    content: "Баллы";
  }

  .course-review-table-compact tbody td:nth-child(5)::before {
    content: "Проверка";
  }

  .course-review-form {
    min-width: 0;
  }

  .course-review-score {
    max-width: none;
  }

  .course-assignment-item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
  }

  .course-assignment-dates {
    display: grid;
    gap: 4px;
    font-size: 13px;
  }

  .course-assignment-item .status-chip {
    justify-self: start;
    min-height: 24px;
    padding: 3px 8px;
    font-size: 11px;
  }

  .assignment-drawer-panel {
    top: auto;
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100vh - 40px);
    border-radius: 20px;
  }

  .assignment-drawer-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .question-filters-bar {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fbfdff;
  }

  .question-review-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .question-review-summary-side {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .question-review-title {
    font-size: 15px;
    line-height: 1.35;
  }

  .question-review-form .button-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .test-admin-hero .course-admin-cover-actions {
    gap: 6px;
  }

  .test-admin-hero .course-admin-cover-actions .action-btn {
    min-height: 34px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 12px;
  }

  .test-admin-hero .course-admin-cover-actions .action-btn:not(.action-btn-ghost) {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #ffffff;
  }

  .kb-section.panel {
    padding: 14px;
    border-radius: 18px;
  }

  .kb-section .builder-toolbar,
  .kb-new-materials .builder-toolbar {
    align-items: stretch;
    gap: 10px;
  }

  .kb-section .builder-toolbar h2,
  .kb-new-materials .builder-toolbar h2 {
    font-size: 22px;
    line-height: 1.2;
  }

  .kb-section .builder-toolbar .button-row {
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .kb-section .builder-toolbar .action-btn {
    flex: 1;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 13px;
  }

  .kb-folder-list {
    gap: 8px;
  }

  .kb-folder-row {
    grid-template-columns: minmax(0, 1fr) 34px;
    min-height: 58px;
    height: auto;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 10px;
  }

  .kb-folder-row-main {
    min-width: 0;
  }

  .kb-folder-copy strong {
    font-size: 15px;
    line-height: 1.2;
  }

  .kb-folder-copy span,
  .kb-folder-copy small {
    font-size: 12px;
    line-height: 1.25;
  }

  .kb-folder-actions {
    align-self: start;
    justify-self: end;
  }

  .kb-folder-actions summary {
    width: 34px;
    height: 30px;
    border-radius: 10px;
    background: #fff;
    font-size: 12px;
  }

  .kb-folder-menu {
    top: 36px;
    right: 0;
    min-width: 190px;
  }

  .kb-material-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .kb-row-badges {
    justify-content: flex-start;
  }

  .kb-new-materials {
    margin-top: 20px;
  }

  .kb-new-card {
    padding: 12px;
    border-radius: 14px;
  }

  .kb-new-card h3 {
    font-size: 16px;
  }

  .kb-new-card .action-btn {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
  }
}

@media (min-width: 621px) and (max-width: 820px) {
  .app-shell:not(.app-shell-employee),
  .app-shell-simple:not(.app-shell-employee),
  .app-shell-simple.is-sidebar-collapsed:not(.app-shell-employee) {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .app-shell:not(.app-shell-employee) .side-panel,
  .app-shell-simple:not(.app-shell-employee) .side-panel {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 18px 12px;
  }

  .app-shell:not(.app-shell-employee) .side-head,
  .app-shell-simple:not(.app-shell-employee) .side-head {
    display: block;
    margin-bottom: 18px;
  }

  .app-shell:not(.app-shell-employee) .side-head-top,
  .app-shell-simple:not(.app-shell-employee) .side-head-top {
    display: flex;
    justify-content: center;
  }

  .app-shell:not(.app-shell-employee) .brand-lockup,
  .app-shell-simple:not(.app-shell-employee) .brand-lockup {
    width: 56px;
    justify-content: center;
    padding: 0;
  }

  .app-shell:not(.app-shell-employee) .brand-lockup img,
  .app-shell-simple:not(.app-shell-employee) .brand-lockup img {
    width: 48px;
    height: 48px;
  }

  .app-shell:not(.app-shell-employee) .brand-lockup span,
  .app-shell-simple:not(.app-shell-employee) .brand-lockup span,
  .app-shell:not(.app-shell-employee) .side-subtitle,
  .app-shell-simple:not(.app-shell-employee) .side-subtitle,
  .app-shell:not(.app-shell-employee) .section-link-text,
  .app-shell-simple:not(.app-shell-employee) .section-link-text,
  .app-shell:not(.app-shell-employee) .sidebar-toggle,
  .app-shell-simple:not(.app-shell-employee) .sidebar-toggle {
    display: none;
  }

  .app-shell:not(.app-shell-employee) .section-nav,
  .app-shell-simple:not(.app-shell-employee) .section-nav {
    display: grid;
    justify-items: center;
    gap: 10px;
  }

  .app-shell:not(.app-shell-employee) .section-link,
  .app-shell-simple:not(.app-shell-employee) .section-link {
    width: 52px;
    height: 52px;
    justify-content: center;
    padding: 0;
    border-radius: 18px;
  }

  .app-shell:not(.app-shell-employee) .section-link-icon,
  .app-shell-simple:not(.app-shell-employee) .section-link-icon {
    width: 22px;
    min-width: 22px;
    height: 22px;
  }

  .app-shell:not(.app-shell-employee) .topbar,
  .app-shell-simple:not(.app-shell-employee) .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
  }

  .app-shell:not(.app-shell-employee) .topbar-search,
  .app-shell-simple:not(.app-shell-employee) .topbar-search {
    grid-column: 1 / 2;
    grid-row: 1;
    order: 0;
    width: 100%;
    max-width: none;
    flex-basis: auto;
  }

  .app-shell:not(.app-shell-employee) .topbar-actions,
  .app-shell-simple:not(.app-shell-employee) .topbar-actions {
    grid-column: 2 / 3;
    grid-row: 1;
    width: auto;
  }

  .app-shell:not(.app-shell-employee) .topbar-overlay-panel,
  .app-shell-simple:not(.app-shell-employee) .topbar-overlay-panel {
    top: 76px;
    right: 18px;
    left: auto;
    width: min(440px, calc(100vw - 136px));
    max-height: calc(100vh - 108px);
    transform: none;
  }

  .app-shell:not(.app-shell-employee) .topbar-notifications-menu,
  .app-shell-simple:not(.app-shell-employee) .topbar-notifications-menu {
    bottom: auto;
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(31, 54, 88, 0.18);
  }

  .course-list-card,
  .tests-catalog-list .course-list-card {
    grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
    padding: 18px;
  }

  .course-list-image,
  .tests-catalog-list .course-list-image {
    width: 100%;
    max-width: 240px;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .course-list-card h2 {
    font-size: 24px;
    line-height: 1.12;
    letter-spacing: 0;
    overflow-wrap: break-word;
  }

  .course-list-main p {
    font-size: 14px;
    line-height: 1.4;
  }

  .course-list-stats,
  .test-list-meta {
    grid-column: 1 / -1;
  }

  .course-list-stats {
    display: flex;
    gap: 8px;
  }

  .course-list-stat {
    flex: 1;
    justify-content: center;
    min-height: 34px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f7f9fc;
  }

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

  .test-list-meta span,
  .test-list-meta .status-chip {
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f5f8fc;
    font-size: 11px;
  }

  .kb-folder-row {
    grid-template-columns: minmax(0, 1fr) 36px;
    min-height: 64px;
    height: auto;
  }

  .kb-folder-actions {
    align-self: start;
    justify-self: end;
  }

  .kb-folder-actions summary {
    width: 34px;
    height: 30px;
    background: #fff;
  }

  .kb-material-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .employees-table {
    display: block;
  }

  .employees-table thead {
    display: none;
  }

  .employees-table tbody {
    display: grid;
    gap: 10px;
  }

  .employees-table tr {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
  }

  .employees-table tbody td {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    width: auto !important;
    padding: 0;
    border-bottom: 0;
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  .employees-table tbody td::before {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .employees-table tbody td:nth-child(1) {
    display: block;
    font-size: 16px;
    font-weight: 700;
  }

  .employees-table tbody td:nth-child(1)::before {
    content: "Сотрудник";
    display: block;
    margin-bottom: 4px;
  }

  .employees-table tbody td:nth-child(2)::before {
    content: "Доступ";
  }

  .employees-table tbody td:nth-child(3)::before {
    content: "Роль";
  }

  .employees-table tbody td:nth-child(4)::before {
    content: "Должность";
  }

  .employees-table tbody td:nth-child(5)::before {
    content: "Активность";
  }
}

@media (min-width: 621px) and (max-width: 820px) {
  .app-shell-employee {
    display: block;
    min-height: 100vh;
  }

  .app-shell-employee .workspace {
    padding: 10px;
  }

  .app-shell-employee .page-frame {
    padding: 0;
    border-radius: 22px;
  }

  .topbar-employee {
    position: sticky;
    top: 0;
    z-index: 18;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 0;
    margin: 0 0 14px;
    padding: 8px;
    border: 1px solid rgba(230, 232, 238, 0.9);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
  }

  .topbar-employee .brand-lockup-top {
    display: none;
  }

  .topbar-employee .topbar-search {
    order: 0;
    grid-column: 1 / 2;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    flex-basis: auto;
    margin: 0;
  }

  .topbar-employee .topbar-search input {
    height: 38px;
    padding: 0 12px;
    border-radius: 13px;
    font-size: 13px;
  }

  .topbar-employee .topbar-actions {
    grid-column: 2 / 3;
    grid-row: 1;
    width: auto;
    gap: 8px;
  }

  .topbar-employee .topbar-avatar,
  .topbar-employee .topbar-icon-btn,
  .topbar-employee .topbar-notifications-btn.topbar-icon-btn-plain {
    width: 34px;
    height: 34px;
  }

  .topbar-employee .topbar-avatar {
    font-size: 12px;
  }

  .employee-topnav {
    order: 2;
    grid-column: 1 / -1;
    display: flex;
    width: auto;
    gap: 6px;
    overflow-x: auto;
    padding: 0;
    scrollbar-width: none;
  }

  .employee-topnav::-webkit-scrollbar {
    display: none;
  }

  .employee-topnav-link {
    min-height: 34px;
    flex: 0 0 auto;
    padding: 0 10px;
    border: 1px solid #e4e9f1;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
  }

  .employee-topnav-link.active {
    border-color: rgba(227, 6, 19, 0.28);
    background: #fff5f6;
  }

  .app-shell-employee .topbar-overlay-panel {
    top: 86px;
    left: 50%;
    right: auto;
    width: min(340px, calc(100vw - 24px));
    max-height: min(520px, calc(100vh - 120px));
    min-height: 0;
    transform: translateX(-50%);
  }

  .employee-course-grid,
  .catalog-grid.employee-course-grid {
    grid-template-columns: 1fr;
  }

  .employee-course-card {
    border-radius: 22px;
  }

  .employee-course-card .course-card-visual {
    min-height: 150px;
  }

  .employee-course-card .catalog-card-head {
    gap: 8px;
    align-items: flex-start;
    flex-direction: column;
  }

  .employee-course-card .status-chip {
    width: max-content;
    min-height: 26px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.2;
  }

  .employee-course-card .learning-progress-card {
    padding: 14px;
    border-radius: 14px;
  }
}

@media (min-width: 621px) and (max-width: 820px) {
  .app-shell-employee {
    display: block;
    min-height: 100vh;
  }

  .app-shell-employee .workspace {
    padding: 10px;
  }

  .app-shell-employee .page-frame {
    padding: 0;
    border-radius: 22px;
  }

  .topbar-employee {
    position: sticky;
    top: 0;
    z-index: 18;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 0;
    margin: 0 0 14px;
    padding: 8px;
    border: 1px solid rgba(230, 232, 238, 0.9);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
  }

  .topbar-employee .brand-lockup-top {
    display: none;
  }

  .topbar-employee .topbar-search {
    order: 0;
    grid-column: 1 / 2;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    flex-basis: auto;
    margin: 0;
  }

  .topbar-employee .topbar-actions {
    grid-column: 2 / 3;
    grid-row: 1;
    width: auto;
    margin-left: 0;
    gap: 8px;
  }

  .employee-topnav {
    order: 2;
    grid-column: 1 / -1;
    display: flex;
    width: auto;
    gap: 6px;
    overflow-x: auto;
    padding: 0;
  }

  .employee-topnav-link {
    min-height: 34px;
    flex: 0 0 auto;
    padding: 0 10px;
    border: 1px solid #e4e9f1;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
  }

  .employee-course-grid,
  .catalog-grid.employee-course-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 821px) and (max-width: 1080px) {
  .app-shell-simple:not(.app-shell-employee) {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .app-shell-simple:not(.app-shell-employee) .side-panel {
    display: flex;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 28px 18px;
  }

  .app-shell-simple:not(.app-shell-employee) .brand-lockup-side span,
  .app-shell-simple:not(.app-shell-employee) .side-subtitle,
  .app-shell-simple:not(.app-shell-employee) .section-link-text {
    display: inline;
  }

  .app-shell-simple:not(.app-shell-employee) .sidebar-toggle {
    display: none;
  }

  .app-shell-simple:not(.app-shell-employee) .section-nav {
    display: grid;
    justify-items: stretch;
  }

  .app-shell-simple:not(.app-shell-employee) .section-link {
    width: auto;
    height: auto;
    justify-content: flex-start;
    padding: 11px 14px;
  }

  .app-shell-simple:not(.app-shell-employee) .topbar {
    display: flex;
    flex-wrap: nowrap;
  }

  .app-shell-simple:not(.app-shell-employee) .topbar-search {
    order: 0;
    width: auto;
    max-width: 520px;
    flex: 1 1 420px;
    flex-basis: auto;
  }

  .app-shell-simple:not(.app-shell-employee) .topbar-actions {
    width: auto;
    margin-left: auto;
  }

  .app-shell-simple:not(.app-shell-employee) .brand-lockup-side {
    max-width: 100%;
  }

  .app-shell-simple:not(.app-shell-employee) .brand-lockup-side span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kb-folder-row {
    grid-template-columns: minmax(0, 1fr) 38px;
    min-height: 64px;
    height: auto;
  }

  .kb-folder-actions {
    align-self: start;
    justify-self: end;
  }

  .kb-folder-actions summary {
    width: 34px;
    height: 30px;
    background: #fff;
  }

  .course-list-card,
  .tests-catalog-list .course-list-card {
    grid-template-columns: minmax(190px, 0.48fr) minmax(0, 1fr);
    gap: 24px;
    padding: 22px;
  }

  .course-list-image,
  .tests-catalog-list .course-list-image {
    width: 100%;
    max-width: 260px;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .course-list-main {
    align-self: center;
    padding-top: 0;
  }

  .course-list-card h2 {
    font-size: 24px;
    line-height: 1.14;
    letter-spacing: 0;
    overflow-wrap: break-word;
  }

  .course-list-stats {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
  }

  .course-list-stat {
    flex: 1;
    justify-content: center;
    min-height: 34px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f7f9fc;
  }
}