/* Courses now uses the shared .app-shell layout (fixed-height shell, sidebar
   + internally-scrolling .page-content) instead of a normal scrolling
   document, so no body/html position overrides are needed here any more -
   see .app-shell-body / .app-shell in style.css. */

#courses-page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.courses-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(111, 107, 114, .2);
}

.courses-tab {
  background: none;
  border: none;
  padding: 10px 18px;
  font-size: .9rem;
  color: var(--mid);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
}

.courses-tab.active {
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* ── Form controls ── */
.courses-input,
.courses-textarea {
  width: 100%;
  background: #fff;
  border: 1.5px solid rgba(111, 107, 114, .25);
  border-radius: 10px;
  color: #20202A;
  padding: 9px 12px;
  font-size: .9rem;
  font-family: inherit;
  outline: none;
  margin-bottom: 10px;
  transition: border-color .2s;
}
.courses-input:focus,
.courses-textarea:focus {
  border-color: var(--mid);
}

/* Single-line fields read as pills to match the reference site; the
   multi-line textarea keeps the base rectangular radius above. */
.courses-input {
  border-radius: 20px;
}

.courses-primary-btn {
  background: linear-gradient(135deg, var(--accent) 0%, #B58A58 100%);
  color: #F4F0F7;
  border: none;
  padding: 9px 20px;
  border-radius: 24px;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  font-family: inherit;
}
.courses-primary-btn:disabled { opacity: .5; cursor: default; }

.courses-secondary-btn {
  background: rgba(111, 107, 114, .1);
  color: var(--mid);
  border: 1px solid rgba(111, 107, 114, .3);
  padding: 8px 18px;
  border-radius: 24px;
  cursor: pointer;
  font-size: .82rem;
  font-family: inherit;
}

.courses-danger-btn {
  background: rgba(176, 65, 62, .08);
  color: #b0413e;
  border: 1px solid rgba(176, 65, 62, .3);
  padding: 7px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: .78rem;
  font-family: inherit;
}

.courses-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .85rem;
  color: var(--mid);
  padding: 2px 6px;
  flex-shrink: 0;
}
.courses-icon-btn:disabled {
  opacity: .3;
  cursor: default;
}

.ce-color-swatches {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 4px;
}

.ce-color-swatch {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .15);
  padding: 0;
  cursor: pointer;
}

.homework-desc-render {
  line-height: 1.5;
}

.courses-error {
  color: #b0413e;
  font-size: .82rem;
  margin-bottom: 8px;
}

/* ── Cards / lists ── */
.courses-card {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(111, 107, 114, .08);
}

.courses-inline-form {
  margin-bottom: 20px;
}

.courses-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.access-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(111, 107, 114, .08);
}

.client-doc-row {
  flex-wrap: wrap;
}

.client-doc-main {
  flex: 1;
  min-width: 140px;
}

.client-doc-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.client-doc-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  color: var(--mid);
  white-space: nowrap;
}

.client-doc-link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: .8rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  white-space: nowrap;
}

.cabinet-schedule-row {
  justify-content: flex-start;
  cursor: pointer;
}
.cabinet-schedule-row:hover {
  background: #FCFAFD;
}

.cabinet-schedule-title {
  font-size: .88rem;
  color: #20202A;
}

.access-row-email {
  font-size: .88rem;
  color: #20202A;
}

.duration-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}
.duration-picker .courses-input {
  margin: 0;
  width: auto;
}

.client-course-add-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(111, 107, 114, .12);
}
.client-course-add-row .courses-input {
  margin: 0;
  width: auto;
}
.client-course-add-row .duration-picker {
  margin: 0;
}

/* ── Клиенты: таблица списка, карточка клиента ── */

.clients-table-head,
.clients-table-row {
  display: grid;
  grid-template-columns: 1fr 100px 70px 110px;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
}
.clients-table-head {
  font-size: .78rem;
  color: var(--mid);
  border-bottom: 1px solid rgba(111, 107, 114, .15);
}
.clients-table-row {
  border-bottom: 1px solid rgba(111, 107, 114, .1);
  cursor: pointer;
  border-radius: 10px;
}
.clients-table-row:last-child { border-bottom: none; }
.clients-table-row:hover { background: #FCFAFD; }

.clients-table-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .92rem;
  font-weight: 600;
  color: #20202A;
}
.clients-table-name .item-meta { font-weight: 400; }

.clients-eco-badge { font-size: .85rem; font-weight: 600; }
.clients-eco-badge.yes { color: #2e7d4f; }
.clients-eco-badge.no { color: var(--mid); font-weight: 400; }

.client-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.client-avatar,
.client-avatar-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}
.client-avatar {
  background: linear-gradient(135deg, var(--accent) 0%, #B58A58 100%);
  color: #F4F0F7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}
.client-avatar-img {
  object-fit: cover;
}

.eco-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.eco-toggle-label {
  font-size: .92rem;
  font-weight: 600;
  color: #20202A;
}

.eco-duration-toggle-btn {
  margin-top: 12px;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(111, 107, 114, .3);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: transform .15s;
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--accent);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
}
.toggle-switch input:disabled + .toggle-slider {
  opacity: .6;
  cursor: default;
}

.clients-divider-list {
  display: flex;
  flex-direction: column;
}

.client-course-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(111, 107, 114, .1);
}
.client-course-row:last-child { border-bottom: none; }

.client-course-revoke-link {
  color: #b0413e;
  cursor: pointer;
  text-decoration: underline;
  margin-left: 4px;
}

.client-course-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.client-course-search-wrap .courses-input { width: 100%; }

.client-course-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(111, 107, 114, .2);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(111, 107, 114, .15);
  max-height: 220px;
  overflow-y: auto;
  z-index: 5;
}
.client-course-suggestion-item {
  padding: 8px 12px;
  font-size: .85rem;
  cursor: pointer;
}
.client-course-suggestion-item:hover { background: #FCFAFD; }
.client-course-suggestion-empty {
  padding: 8px 12px;
  font-size: .85rem;
  color: var(--mid);
}

/* ── Мероприятия (staff) ── */

.event-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.event-form-row .courses-input { flex: 1; min-width: 160px; }

.event-form-published {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: var(--mid);
  margin: 8px 0;
}
.event-form-published input { width: auto; margin: 0; }

.event-form-actions {
  display: flex;
  gap: 10px;
}

.event-admin-row {
  flex-wrap: wrap;
  gap: 10px;
}
.event-admin-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.student-row-name {
  font-size: 1rem;
  font-weight: 600;
  color: #20202A;
}

.student-row-email {
  font-size: .82rem;
  color: var(--mid);
  margin-left: 6px;
}

.course-card {
  display: flex;
  align-items: center;
  gap: 20px;
}

.course-card-body {
  flex: 1;
  min-width: 0;
}

.course-card .item-title {
  font-size: .98rem;
  font-weight: 600;
  color: #20202A;
  margin-bottom: 4px;
}

.course-card .item-meta {
  font-size: .82rem;
  color: var(--mid);
}

/* Shared cover image - the list card and the course detail header both use
   the same 370x250 slot (files are pre-cropped server-side to that ratio),
   just in slightly different layouts around it. */
.course-cover {
  width: 370px;
  height: 250px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #D0AE7B 0%, #D0AE7B 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6F6B72;
}

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

.course-cover .icon-svg {
  width: 48px;
  height: 48px;
}

.course-draft-badge {
  display: inline-block;
  background: rgba(176, 65, 62, .12);
  color: #b0413e;
  font-size: .68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  margin-left: 6px;
  vertical-align: middle;
}

.course-progress {
  font-size: .78rem;
  color: var(--mid);
  margin-top: 6px;
}

.course-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.courses-back-link {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--mid);
  font-size: .85rem;
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
  font-family: inherit;
  padding: 0;
}

.course-detail-header {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.course-detail-header-main {
  flex: 1;
  min-width: 0;
}

.course-cover-edit {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.course-detail-header h2 {
  color: #20202A;
  margin-bottom: 8px;
  font-size: 1.2rem;
}

.course-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.course-title-row h2 { margin-bottom: 0; }
.course-title-row .grow { flex: 1; }
.course-title-row .courses-input { margin-bottom: 0; }

.course-desc-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.course-desc-row .grow { flex: 1; }

.course-landing-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(111, 107, 114, .15);
}
.course-landing-row .courses-input { margin-bottom: 0; }

.course-detail-header .item-meta {
  color: var(--mid);
  font-size: .88rem;
  margin-bottom: 10px;
}

/* The full course description reads as a paragraph of real content here
   (unlike the one-line "item-meta" captions used elsewhere), so it gets its
   own darker color and looser line-height instead of the muted meta style. */
.course-detail-header .course-desc-row .item-meta {
  color: #6F6B72;
  font-size: .92rem;
  line-height: 1.6;
  margin-bottom: 0;
}

.course-detail-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.module-block {
  margin-bottom: 12px;
}

.module-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: 600;
  color: #20202A;
  gap: 8px;
}

.module-title-row .grow { flex: 1; }

.lesson-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .88rem;
  color: #20202A;
  gap: 8px;
}

.lesson-row:hover { background: #FCFAFD; }

.lesson-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.lesson-row-title span.title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-complete-check {
  color: #2e7d4f;
  font-size: .9rem;
  flex-shrink: 0;
}

.lesson-homework-badge {
  font-size: .68rem;
  color: var(--mid);
  background: rgba(111, 107, 114, .1);
  padding: 2px 8px;
  border-radius: 8px;
  flex-shrink: 0;
}

.lesson-date-badge {
  font-size: .68rem;
  color: #6F6B72;
  background: rgba(111, 107, 114, .1);
  padding: 2px 8px;
  border-radius: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.add-inline-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.add-inline-row .courses-input { margin-bottom: 0; }

/* ── Конструктор теста ── */
.quiz-question-card {
  margin-bottom: 12px;
}

.quiz-question-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.quiz-question-header .quiz-q-type {
  flex: 1;
  margin-bottom: 0;
}

.quiz-options-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.quiz-option-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.quiz-option-edit-row .quiz-option-input {
  flex: 1;
  margin-bottom: 0;
}

.quiz-q-error {
  margin-bottom: 8px;
}

/* ── Прохождение теста (клиент) ── */
.quiz-question-view {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(111, 107, 114, .12);
}
.quiz-question-view:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.quiz-question-text {
  font-weight: 600;
  color: #20202A;
  margin-bottom: 8px;
}

.quiz-choice-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: .88rem;
  color: #20202A;
}

.quiz-choice-option.is-correct { color: #2e7d4f; font-weight: 600; }
.quiz-choice-option.is-wrong-selected { color: #b0413e; font-weight: 600; }

/* ── Lesson editor / viewer ── */
.lesson-editor-title-input {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 16px;
}

#editorjs-container {
  background: #fff;
  border: 1.5px solid rgba(111, 107, 114, .2);
  border-radius: 12px;
  padding: 12px 16px;
  min-height: 260px;
  margin-bottom: 16px;
}

#homework-editorjs-container {
  background: #fff;
  border: 1.5px solid rgba(111, 107, 114, .2);
  border-radius: 12px;
  padding: 12px 16px;
  min-height: 120px;
  margin-bottom: 16px;
}

.course-desc-editorjs {
  background: #fff;
  border: 1.5px solid rgba(111, 107, 114, .2);
  border-radius: 12px;
  padding: 10px 14px;
  min-height: 90px;
  margin-bottom: 10px;
}

.courses-field-label {
  display: block;
  font-size: .8rem;
  color: var(--mid);
  margin-bottom: 4px;
}

.courses-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: .85rem;
  color: #20202A;
}

.lesson-links-row {
  margin-bottom: 8px;
}

.lesson-content-render p { margin: 0 0 .8em; line-height: 1.6; }
.lesson-content-render h1, .lesson-content-render h2, .lesson-content-render h3 { margin: .8em 0 .4em; color: #20202A; }
.lesson-content-render ul, .lesson-content-render ol { margin: .4em 0 .8em; padding-left: 1.4em; }
.lesson-quote-card {
  width: 100%;
  box-sizing: border-box;
  margin: 1em 0;
  padding: 10px 16px;
  border-radius: 16px;
  border-left: 4px solid var(--accent);
  background: linear-gradient(135deg, #D0AE7B 0%, #D0AE7B 100%);
}

.lesson-quote-text { color: #20202A; }
.lesson-quote-text p { margin: 0 0 .6em; }
.lesson-quote-text p:last-child { margin-bottom: 0; }

.lesson-quote-caption {
  margin-top: .6em;
  font-size: .85rem;
  color: var(--mid);
}
.lesson-table-scroll {
  overflow-x: auto;
  margin: .8em 0;
}
.lesson-table {
  border-collapse: collapse;
  width: 100%;
  font-size: .92em;
}
.lesson-table td, .lesson-table th {
  border: 1px solid rgba(111, 107, 114, .25);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}

.lesson-embed-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: .8em 0;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.lesson-embed-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.lesson-embed-caption {
  font-size: .8rem;
  color: var(--mid);
  text-align: center;
  margin: -.4em 0 .8em;
}
.lesson-table th {
  background: #FCFAFD;
  font-weight: 600;
}

.lesson-content-render hr {
  border: none;
  border-top: 1px solid rgba(111, 107, 114, .2);
  margin: 1.2em 0;
  /* Belt-and-braces alongside the flex align-items fix below: a plain <hr>
     is browser-themed and can report its own intrinsic width instead of
     filling the container, which is what was stretching the lecture block
     past the screen edge on mobile. */
  width: 100%;
  box-sizing: border-box;
}
.lesson-content-render a { color: #6F6B72; }

.lesson-content-render a.lesson-btn-link {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent) 0%, #B58A58 100%);
  color: #F4F0F7;
  padding: 9px 22px;
  border-radius: 20px;
  font-weight: 600;
  font-size: .88rem;
  text-decoration: none;
}

.lesson-view-layout {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.lesson-sidebar {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
}

.lesson-main {
  flex: 1;
  min-width: 0;
}

.lesson-sidebar-progress {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(111, 107, 114, .08);
}

.lesson-sidebar-progress-label {
  font-size: .78rem;
  color: var(--mid);
  margin-bottom: 8px;
}

.lesson-progress-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(111, 107, 114, .15);
  overflow: hidden;
}

.lesson-progress-bar-fill {
  height: 100%;
  background: linear-gradient(135deg, var(--accent) 0%, #B58A58 100%);
  border-radius: 3px;
}

.lesson-sidebar-modules {
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 2px 10px rgba(111, 107, 114, .08);
  max-height: 70vh;
  overflow-y: auto;
}

.lesson-sidebar-module {
  margin-bottom: 10px;
}
.lesson-sidebar-module:last-child {
  margin-bottom: 0;
}

.lesson-sidebar-module-title {
  font-size: .74rem;
  font-weight: 600;
  color: var(--mid);
  padding: 6px 8px 4px;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.lesson-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .84rem;
  color: #20202A;
}
.lesson-sidebar-item:hover {
  background: #FCFAFD;
}
.lesson-sidebar-item.active {
  background: rgba(111, 107, 114, .12);
  font-weight: 600;
}

.lesson-sidebar-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-sidebar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(111, 107, 114, .3);
  flex-shrink: 0;
}

.lesson-nav-buttons {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}

@media (max-width: 720px) {
  .lesson-view-layout {
    flex-direction: column;
    /* Column flex direction makes align-items control the cross (horizontal)
       axis - "flex-start" (needed for the row layout above) leaves children
       shrink-to-fit instead of full-width here, and a themed <hr> reports a
       browser-default intrinsic width under shrink-to-fit, pushing the whole
       lecture block off-screen. Force full width on mobile instead. */
    align-items: stretch;
  }
  .lesson-sidebar {
    width: 100%;
    position: static;
  }
  .lesson-sidebar-modules {
    max-height: 260px;
  }
}

.lesson-lecture-block {
  background: linear-gradient(135deg, #D0AE7B 0%, #D0AE7B 100%);
  border-radius: 16px;
  padding: 20px;
  margin: -4px -4px 20px -4px;
}

.lesson-lecture-block h2 {
  margin-top: 0;
}

.lesson-view-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 20px;
}
.lesson-view-meta a { color: var(--mid); font-size: .85rem; }

.homework-box {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(111, 107, 114, .15);
}
.homework-box h3 {
  font-size: .95rem;
  color: #20202A;
  margin-bottom: 10px;
}

.submission-status {
  font-size: .85rem;
  color: var(--mid);
  margin-bottom: 8px;
}

.homework-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.thread-msg {
  border-radius: 12px;
  padding: 10px 14px;
  max-width: 90%;
}

.thread-msg-user {
  align-self: flex-start;
  background: #FCFAFD;
}

.thread-msg-reviewer {
  align-self: flex-start;
  background: rgba(98, 87, 127, .06);
  border-left: 3px solid var(--accent);
}

.thread-msg-label {
  font-size: .74rem;
  font-weight: 600;
  color: var(--mid);
  margin-bottom: 4px;
}
.thread-msg-body {
  font-size: .88rem;
  color: #20202A;
  white-space: pre-wrap;
}

/* ── Submissions review tab ── */
.submission-card {
  margin-bottom: 12px;
}
.submission-card .item-title { font-weight: 600; color: #20202A; margin-bottom: 4px; }
.submission-card .item-meta { color: var(--mid); font-size: .8rem; margin-bottom: 8px; }
.submission-content {
  background: #FCFAFD;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .88rem;
  color: #20202A;
  margin-bottom: 12px;
  white-space: pre-wrap;
}

.courses-empty {
  color: var(--mid);
  font-size: .88rem;
  padding: 20px 0;
  text-align: center;
}

/* ── Profile tab (Личный кабинет) ── */
.profile-avatar-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.profile-avatar-large {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, #D0AE7B 0%, #F4F0F7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #6F6B72;
}

.profile-avatar-large .icon-svg {
  width: 34px;
  height: 34px;
}

.profile-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-upload-btn {
  background: none;
  border: 1px solid rgba(111, 107, 114, .3);
  border-radius: 20px;
  color: var(--mid);
  padding: 6px 14px;
  font-size: .8rem;
  cursor: pointer;
  font-family: inherit;
}

.profile-avatar-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 18px;
}
.profile-avatar-preset-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.profile-avatar-preset-btn:hover {
  border-color: rgba(111, 107, 114, .4);
}
.profile-avatar-preset-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-field-label {
  display: block;
  font-size: .78rem;
  color: var(--mid);
  margin: 10px 0 4px;
}

.profile-field-static {
  padding: 9px 14px;
  font-size: .9rem;
  color: var(--mid);
}

.profile-section-title {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(111, 107, 114, .15);
}

/* ── Crop picker (shared: course covers, avatar) ── */
.crop-modal-box {
  max-width: 480px;
}

.crop-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.crop-frame {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #D0AE7B;
  cursor: grab;
  touch-action: none;
}
.crop-frame.dragging { cursor: grabbing; }

.crop-frame img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

.crop-zoom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  color: var(--mid);
  font-size: .8rem;
}

.crop-zoom-slider {
  flex: 1;
}

.crop-hint {
  color: var(--mid);
  font-size: .78rem;
  text-align: center;
}

@media (max-width: 768px) {
  /* The 370x250 cover is a fixed size meant to sit beside the title on a
     wide screen - on a phone-width column there isn't 370px of spare room
     next to any text, so it was overflowing the card. Stack cover above
     content instead, and let the cover scale down to the full card width
     while keeping its aspect ratio (so it stays uncropped/undistorted). */
  .course-card,
  .course-detail-header {
    flex-direction: column;
  }
  .course-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 370 / 250;
  }
  .course-cover-edit {
    width: 100%;
    align-items: stretch;
  }
  .course-cover-edit .profile-avatar-upload-btn {
    align-self: center;
  }
}