/* Опросы и тесты. Цвета — из темы портала, а где её нет — из палитры MudBlazor.
   Раскладка и отступы одного компонента заданы утилитами MudBlazor в разметке; здесь — то, что повторяется
   между компонентами, цвета темы и типографика.
   Герой каталога (.sv-hero) стоит на фирменном поле портала и задаёт свои цвета текста, поэтому имена ниже
   объявлены и на нём: иначе в герой пришли бы значения, вычисленные для страницы. */
:root, .sv-hero {
  --sv-bg: var(--bg-card, var(--mud-palette-surface));
  --sv-line: var(--border, var(--mud-palette-divider));
  --sv-text: var(--text-primary, var(--mud-palette-text-primary));
  --sv-muted: var(--text-secondary, var(--mud-palette-text-secondary));
  --sv-accent: var(--accent, var(--mud-palette-primary));
  --sv-sticky-top: calc(var(--portal-sticky-top, 64px) + 16px);
}

/* ── Рамка страницы ── */
.sv {
  color: var(--sv-text);
  font-size: 16px;
  line-height: 1.6;
}

/* Фокус с клавиатуры. MudBlazor гасит обводку и показывает фокус кнопки одной слабой заливкой, а у кнопок
   раздела свой фон и её перекрывает; у ссылок без подчёркивания признака нет вовсе. Обводка — как в профиле. */
:is(.sv, .sv-hero) :is(a, button):focus-visible {
  outline: 2px solid var(--sv-accent);
  outline-offset: 2px;
}

/* Как у страниц сообществ (.cm-wrap) и профиля. */
.container.sv-wrap {
  padding-top: 28px;
  padding-bottom: 64px;
}

.sv h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sv h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Заголовок вопроса получает фокус при переходе к вопросу, чтобы его зачитал скринридер; он не кнопка. */
.sv-question h3:focus {
  outline: none;
}

.sv p {
  margin: 0;
  overflow-wrap: anywhere;
}

.sv-heading {
  margin: 0 0 24px;
}

.sv-heading-text {
  min-width: 0;
  flex: 1 1 320px;
}

/* Строка над заголовком (вид, состояние) занимает своё место и пока пуста: заголовок не съезжает, когда она появится. */
.sv-eyebrow {
  min-height: 25px;
}

/* Пока страница грузится, подвал не подпрыгивает к заглушке. */
.sv:has(.sv-page-skeleton) {
  min-height: 100vh;
}

/* Каталог всегда выше окна: полоса прокрутки не появляется и не пропадает при входе в раздел и смене
   вкладки, иначе вся страница вместе с шапкой сдвигается на её ширину (тот же приём у афиши). */
.container.sv.catalog-wrap {
  min-height: 100vh;
}

.sv-title {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

.sv-subtitle {
  max-width: 780px;
  color: var(--sv-muted);
  font-size: 15px;
}

/* Герой каталога — общий для портала (.catalog-hero): правила только для своего, чужие каталоги не трогаем. */
.sv-hero .sv-heading {
  position: relative;
  margin-bottom: 0;
}

/* До подзаголовка те же 8 px, что в каталоге сообществ: 4 px даёт отступ между строками заголовка. */
.sv-hero .catalog-hero-title {
  margin-bottom: 4px;
}

/* Вкладки — MudTabs с общим видом вкладок профиля (.pf-mud-tabs), как в сообществах. */
.sv-mud-tabs .mud-tabs-tabbar {
  background: transparent;
  border-bottom: 1px solid var(--sv-line);
}

.sv-mud-tabs .mud-tab {
  min-height: 48px;
  color: var(--sv-muted);
  text-transform: none;
}

.sv-mud-tabs .mud-tab.mud-tab-active {
  color: var(--sv-accent);
  font-weight: 600;
}

/* ── Общие блоки ── */
.sv-panel.mud-paper,
.sv-card.mud-paper {
  min-width: 0;
  border: 1px solid var(--sv-line);
  border-radius: 16px;
  background: var(--sv-bg);
  color: inherit;
}

.sv-panel.mud-paper {
  padding: 24px;
}

.sv-panel > h2 {
  margin-bottom: 8px;
}

.sv-muted {
  color: var(--sv-muted);
  font-size: 14px;
}

.sv-help {
  margin: 0;
  color: var(--sv-muted);
  font-size: 13px;
  line-height: 1.55;
}

.sv-field-label {
  color: var(--sv-muted);
  font-size: 13px;
  font-weight: 600;
}

.sv-description,
.sv-answer {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.sv-lead {
  max-width: 820px;
  margin-bottom: 20px !important;
  color: var(--sv-muted);
  font-size: 17px;
}

.sv-empty.mud-paper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 52px 24px;
  text-align: center;
}

.sv-empty p {
  max-width: 560px;
  color: var(--sv-muted);
}

/* Строка «что это — действие»: настройки опроса, история попыток. */
.sv-row {
  padding: 16px 0;
  border-top: 1px solid var(--sv-line);
}

.sv-row:last-child {
  padding-bottom: 0;
}

/* Кнопки действий в строках настроек — одной ширины, чтобы стояли ровным столбцом. */
.sv-setting-row .mud-button-root {
  width: 232px;
}

.sv-cover {
  display: block;
  width: 100%;
  max-height: 260px;
  border-radius: 12px;
}

.sv-facts {
  color: var(--sv-muted);
  font-size: 14px;
}

dl.sv-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px 24px;
  margin: 0;
}

dl.sv-facts dt {
  font-size: 13px;
}

dl.sv-facts dd {
  margin: 0;
  color: var(--sv-text);
  font-size: 15px;
}

/* ── Вид и состояние ── */
.sv-kind {
  color: var(--sv-accent);
  font-size: 13px;
  font-weight: 600;
}

.mud-chip.sv-state {
  height: auto;
  margin: 0;
  padding: 4px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--sv-muted) 12%, transparent);
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.mud-chip.sv-state .mud-chip-content {
  padding: 0;
}

.mud-chip.sv-state-active {
  background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
  color: color-mix(in srgb, var(--mud-palette-success) 72%, var(--sv-text));
}

.mud-chip.sv-state-scheduled {
  background: color-mix(in srgb, var(--sv-accent) 12%, transparent);
  color: var(--sv-accent);
}

.mud-chip.sv-state-draft {
  background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
  color: color-mix(in srgb, var(--mud-palette-warning) 62%, var(--sv-text));
}

/* ── Каталог ── */
.sv-results-title {
  font-size: 16px !important;
}

.sv-count {
  flex: none;
  white-space: nowrap;
}

/* Карточка каталога — общая PortalCard (оболочка, ховер, нажатие по всей карточке); своего у опросов в ней нет. */

/* ── Форма: содержание слева, вопросы справа ── */
.sv-form-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.sv-outline {
  position: sticky;
  top: var(--sv-sticky-top);
  max-height: calc(100dvh - var(--sv-sticky-top) - 16px);
  min-width: 0;
  overflow-y: auto;
}

/* В конструкторе внизу окна закреплена панель сохранения: её высоту она сама кладёт в переменную на родителе. */
.sv-builder .sv-outline {
  max-height: calc(100dvh - var(--sv-sticky-top) - var(--portal-save-bar-height, 0px) - 48px);
}

.sv-outline-title {
  margin: 16px 0 6px;
  overflow-wrap: anywhere;
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 600;
}

.sv-outline-row {
  border-radius: 8px;
}

/* Выбранный вопрос подсвечен целиком, вместе с ручкой. */
.sv-outline-row-active {
  background: color-mix(in srgb, var(--sv-accent) 10%, transparent);
}

.sv-outline-item.mud-button-root {
  flex: 1;
  justify-content: flex-start;
  min-width: 0;
  padding: 6px 8px 6px 2px;
  border-radius: 8px;
  color: inherit;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

.sv-outline-item .mud-button-label {
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}

.sv-outline-item-active.mud-button-root {
  font-weight: 600;
}

/* Вопрос в содержании — до двух строк, дальше многоточие: в одну строку колонки хватает на три-четыре слова.
   Кружок с номером стоит по середине текста, в одну он строку или в две. */
.sv-outline-text {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sv-dot {
  display: inline-flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--sv-line);
  border-radius: 50%;
  font-size: 11px;
}

.sv-dot-done {
  border-color: var(--sv-accent);
  background: var(--sv-accent);
  color: var(--mud-palette-primary-text);
}

.sv-dot .mud-icon-root {
  font-size: 15px;
}

.sv-drop-zone {
  min-height: 24px;
}

.sv-questions {
  min-width: 0;
}

/* ── Вопрос ── */
.sv-question {
  scroll-margin-top: calc(var(--sv-sticky-top) + 72px);
}

.sv-builder .sv-question,
.sv-section-editor {
  scroll-margin-top: calc(var(--sv-sticky-top) + 8px);
}

.sv-question h3 {
  margin: 8px 0 16px;
  font-size: 18px;
  white-space: pre-wrap;
}

.sv-question-number {
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
}

/* Отметка «Отвечено» в шапке вопроса — вместо обязательности. */
.sv-question-done {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  color: var(--sv-accent);
  font-size: 13px;
  font-weight: 600;
}

.sv-question-done .mud-icon-root {
  font-size: 16px;
}

.sv-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sv-question-invalid.mud-paper {
  border-color: var(--mud-palette-error);
}

.sv-error {
  margin-top: 12px !important;
  color: var(--mud-palette-error);
  font-size: 13px;
}

/* Варианты — столбиком: у MudBlazor переключатели по умолчанию идут в строку. */
.sv-question .mud-input-control.mud-input-control-boolean-input .mud-radio-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sv-question .mud-radio-content,
.sv-question .mud-checkbox p {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.sv-question .mud-input-control.mud-input-control-boolean-input.sv-scale .mud-radio-group {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.sv-question .sv-scale .mud-radio {
  min-width: 56px;
  margin: 0;
  padding-right: 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sv-muted) 8%, transparent);
}

.sv-scale-labels {
  margin-bottom: 8px;
  color: var(--sv-muted);
  font-size: 13px;
}

.sv-option-image {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
}

.sv-rank-row {
  background: var(--sv-bg);
}

/* Вариант тянут за ручку, а не за всю строку. */
.sv-rank-row .mud-drag-handle,
.sv-outline-row .mud-drag-handle {
  cursor: grab;
}

/* Текст варианта сжимается и переносит длинное слово, а не выталкивает стрелки за край строки. */
.sv-rank-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sv-rank-number {
  flex: 0 0 24px;
  color: var(--sv-muted);
  font-weight: 600;
  text-align: center;
}

.sv-match-left,
.sv-match-right {
  min-width: min(220px, 100%);
}

.sv-section-heading {
  padding-top: 8px;
}

/* ── Показ по одному вопросу: строка номеров ── */
.sv-step {
  scroll-margin-top: var(--sv-sticky-top);
}

.sv-step-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* В анкете целиком строка номеров заменяет список содержания уже 960 px и закреплена под шапкой: видно,
   что отвечено, без прокрутки к началу. Она всегда в один ряд и листается вбок — три-четыре закреплённых ряда
   у длинной анкеты заняли бы пол-экрана; за страницей ряд следит сам (surveys.js, followQuestions).
   Фон — страницы, чтобы вопросы не просвечивали; поля по бокам — под обводку фокуса крайних номеров. */
.sv-form-dots.sv-step-nav {
  position: sticky;
  top: var(--portal-sticky-top, 64px);
  z-index: 5;
  flex-wrap: nowrap;
  margin-inline: -4px;
  padding: 8px 4px;
  overflow-x: auto;
  background: var(--bg, var(--mud-palette-background));
  scrollbar-width: none;
}

.sv-form-dots::-webkit-scrollbar {
  display: none;
}

/* Ряд в одну строку стоит по центру, пока помещается. Отступы auto, а не justify-content: center — тот прячет
   начало ряда, когда он длиннее экрана. */
.sv-form-dots > :first-child {
  margin-left: auto;
}

.sv-form-dots > :last-child {
  margin-right: auto;
}

.sv-step-dot.mud-button-root {
  flex: none;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--sv-line);
  border-radius: 50%;
  background: var(--sv-bg);
  color: var(--sv-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}

/* Отвеченный вопрос отличает рамка цвета акцента: одна бледная заливка на белом почти не видна. */
.sv-step-dot-done.mud-button-root {
  border-color: var(--sv-accent);
  background: color-mix(in srgb, var(--sv-accent) 12%, var(--sv-bg));
  color: var(--sv-accent);
}

/* Текущий вопрос: в показе по одному — тот, что на экране (класс ставит компонент), в анкете целиком — тот, что
   у верха экрана (aria-current="location" ставит surveys.js по ходу прокрутки). */
.sv-step-dot-current.mud-button-root,
.sv-step-dot[aria-current="location"].mud-button-root {
  border-color: var(--sv-accent);
  background: var(--sv-accent);
  color: var(--mud-palette-primary-text);
}

/* Обязательный вопрос без ответа после попытки отправить. */
.sv-step-dot-invalid.mud-button-root {
  border-color: var(--mud-palette-error);
  color: var(--mud-palette-error);
  box-shadow: 0 0 0 1px var(--mud-palette-error);
}

.sv-step-dot-current.sv-step-dot-invalid.mud-button-root,
.sv-step-dot-invalid[aria-current="location"].mud-button-root {
  color: var(--mud-palette-error-text);
}

/* Граница между разделами. */
.sv-step-gap {
  flex: none;
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--sv-line);
}

.sv-step-back.mud-button-root {
  min-width: 0;
}

.sv-evaluation {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sv-line);
  font-size: 14px;
}

.sv-attachments {
  margin: 0 0 16px;
}

.sv-attachment.mud-paper {
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
}

.sv-attachment-image {
  display: block;
  width: 100%;
  max-height: 420px;
  background: color-mix(in srgb, var(--sv-muted) 8%, transparent);
}

.sv-attachment-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── Прохождение ── */
.sv-intro.mud-paper {
  margin-bottom: 24px;
}

.sv-attempt-timer.mud-paper {
  position: sticky;
  top: var(--sv-sticky-top);
  z-index: 4;
  border-color: var(--sv-accent);
  border-radius: 12px;
  background: var(--sv-bg);
}

.sv-attempt-timer-last.mud-paper {
  border-color: var(--mud-palette-error);
  color: var(--mud-palette-error);
}

.sv-completion.mud-paper {
  max-width: 760px;
  margin: 24px auto;
  padding: 48px 24px;
  text-align: center;
}

.sv-completion-icon.mud-icon-root {
  font-size: 56px;
}

.sv-conflict.mud-paper {
  margin-bottom: 24px;
  border-color: var(--mud-palette-warning);
}

.sv-compare {
  font-size: 14px;
}

/* ── Результаты и сводка ── */
.sv-result.mud-paper {
  border-top: 3px solid var(--sv-accent);
}

.sv-result-score {
  color: var(--sv-accent);
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
}

.sv-result-score small {
  font-size: 24px;
  letter-spacing: 0;
}

/* Итог теста красится по результату (SurveyResults.OutcomeClass): полоса сверху и процент. */
.sv-result--passed.mud-paper { border-top-color: var(--mud-palette-success); }
.sv-result--passed .sv-result-score { color: var(--mud-palette-success); }
.sv-result--failed.mud-paper { border-top-color: var(--mud-palette-error); }
.sv-result--failed .sv-result-score { color: var(--mud-palette-error); }

/* Пять плиток сводки делят всю ширину поровну: их край совпадает с краем блоков под ними. */
.sv-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.sv-stat.mud-paper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  border-radius: 12px;
}

.sv-stat strong {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

.sv-stat-group {
  margin-top: 16px;
  font-weight: 600;
}

.sv-stat-label {
  margin-top: 10px;
  font-size: 14px;
}

.sv-summary-question .mud-progress-linear {
  height: 8px;
  border-radius: 4px;
}

.sv-text-answer.mud-paper {
  border-radius: 10px;
  background: color-mix(in srgb, var(--sv-muted) 7%, transparent);
}

.sv-participants-filter {
  flex: 0 1 280px;
  min-width: 0;
}

.sv-participant-table.mud-table {
  overflow: hidden;
  border: 1px solid var(--sv-line);
  border-radius: 16px;
  background: var(--sv-bg);
}

/* ── Конструктор ── */
.sv-block-title {
  font-size: 16px !important;
  color: var(--sv-muted);
}

.sv-section-editor.mud-paper {
  border-left: 3px solid var(--sv-accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sv-accent) 5%, var(--sv-bg));
}

.sv-builder-question-open.mud-paper {
  border-color: color-mix(in srgb, var(--sv-accent) 55%, var(--sv-line));
}

.sv-question-head {
  min-width: 0;
}

.sv-builder-question h3 {
  margin: 0;
  font-size: 17px;
}

/* Заголовок вопроса — кнопка, которая раскрывает его настройки: во всю ширину, с видом заголовка. */
.sv-question-toggle.mud-button-root {
  justify-content: space-between;
  width: calc(100% + 16px);
  min-width: 0;
  margin: 0 -8px;
  padding: 4px 8px;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

.sv-question-toggle .mud-button-label {
  justify-content: flex-start;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.sv-option-editor .mud-input-control {
  min-width: 0;
}

.sv-weight {
  flex: 0 1 220px;
}

.sv-preview .sv-title {
  font-size: 24px;
}

@media (max-width: 959.98px) {
  .sv-form-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .sv-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sv-outline {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 768px) {
  .container.sv-wrap {
    padding: 20px 16px 40px;
  }

  /* Как вкладки профиля на телефоне: все видны сразу — равной ширины, иконка над короткой подписью. */
  .sv-mud-tabs .mud-tabs-tabbar-wrapper {
    width: 100%;
    transform: none !important;
  }

  .sv-mud-tabs .mud-tabs-tabbar-wrapper > .mud-tooltip-root,
  .sv-mud-tabs .mud-tab {
    flex: 1 1 0;
    min-width: 0;
  }

  .sv-mud-tabs .mud-tabs-scroll-button {
    display: none;
  }
}

@media (max-width: 599.98px) {
  .sv-panel.mud-paper {
    padding: 16px;
  }

  /* На телефоне строка номеров не переносится, а листается вбок — от края до края экрана; пока помещается,
     стоит по центру (про отступы auto — у .sv-form-dots). */
  .sv-step-nav {
    flex-wrap: nowrap;
    margin-inline: -16px;
    padding: 2px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .sv-step-nav::-webkit-scrollbar {
    display: none;
  }

  .sv-step-nav > :first-child {
    margin-left: auto;
  }

  .sv-step-nav > :last-child {
    margin-right: auto;
  }

  /* Закреплённая строка в анкете тоже от края до края, но с воздухом сверху и снизу. */
  .sv-form-dots.sv-step-nav {
    margin-inline: -16px;
    padding: 8px 16px;
  }

  .sv-step-back .mud-button-icon-start {
    margin: 0;
  }

  .sv-heading-actions {
    width: 100%;
  }

  /* В герое каталога кнопка создания на телефоне сворачивается в значок справа от заголовка — как в сообществах. */
  .sv-hero .sv-heading {
    padding-right: 50px;
  }

  .sv-hero .sv-heading-actions {
    width: auto;
  }

  .sv-hero .sv-create.mud-button-root {
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
  }

  .sv-create .mud-button-label > span:not(.mud-button-icon-start) {
    display: none;
  }

  .sv-create .mud-button-icon-start {
    margin: 0;
  }

  .sv-hero .sv-subtitle {
    font-size: 14px;
  }

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

  .sv-setting-row .mud-button-root,
  .sv-participants-filter {
    width: 100%;
    flex-basis: 100%;
  }

  .sv-result-score {
    font-size: 44px;
  }

  .sv-option-editor {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .sv-option-editor > .mud-input-control {
    flex-basis: 100%;
  }
}

/* Виджет главной «Опросы и тесты» (SurveyAssignmentsWidget). Карточка и вид строки-ссылки (dashboard-link-row) —
   общие элементы главной, их стили в home.css оболочки; здесь только своё. */
.dashboard-assignment { padding: 14px 12px; text-decoration: none; }
.dashboard-assignment-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12px; margin-bottom: 7px; }
.dashboard-assignment-tag { display: inline-block; color: var(--accent); background: var(--accent-subtle); padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.dashboard-assignment > strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.45; font-weight: 600; }
.dashboard-assignment-status { display: flex; flex: none; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12px; }
.dashboard-assignment-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.dashboard-assignment-dot.in-progress { background: var(--accent); }
.dashboard-assignment-deadline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.dashboard-assignment-deadline .mud-icon-root { width: 16px; height: 16px; }
.dashboard-assignment-deadline.is-urgent { color: var(--warning); }
.dashboard-assignment-time-left { display: inline-flex; align-items: center; gap: 4px; color: var(--warning); background: var(--warning-bg); padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.dashboard-assignment-time-left .mud-icon-root { font-size: 15px; }