:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --ink: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --sidebar: #0f172a;
  --sidebar-soft: #17213a;
  --blue: #4f6df5;
  --blue-soft: #eef2ff;
  --green: #22c55e;
  --yellow: #f5b544;
  --danger: #dc2626;
  --shadow: 0 16px 35px rgba(15, 23, 42, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

body.auth-pending .sidebar,
body.auth-pending .main,
body.logged-out .sidebar,
body.logged-out .main,
body.logged-in .login-view {
  display: none;
}

.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(245, 246, 248, 0.92), rgba(245, 246, 248, 1)),
    radial-gradient(circle at 20% 20%, rgba(79, 109, 245, 0.16), transparent 32%),
    var(--bg);
}

.login-card {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 22px;
  display: grid;
  gap: 18px;
}

.login-brand {
  padding: 0;
  color: var(--ink);
}

.login-card h1 {
  font-size: 24px;
}

.login-card p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
  line-height: 1.5;
}

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

.login-form .primary-button {
  width: 100%;
}

.login-error {
  color: var(--danger) !important;
  margin: 0 !important;
  font-size: 12px !important;
}

.login-error.hidden {
  display: none;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 232px;
  background: var(--sidebar);
  color: white;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 26px;
}

.brand-copy {
  min-width: 0;
  flex: 1;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--blue);
  font-weight: 800;
}

.brand-title {
  font-weight: 700;
  line-height: 1.1;
}

.logout-icon-button {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 7px;
  color: #dbeafe;
  background: rgba(15, 23, 42, 0.32);
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

.logout-icon-button:hover {
  background: var(--sidebar-soft);
  color: white;
}

.brand-subtitle,
.nav-label,
.user-email {
  color: #94a3b8;
  font-size: 12px;
}

.nav {
  display: grid;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
}

.nav-group {
  display: grid;
  gap: 6px;
}

.nav-group:not(:first-child) {
  margin-top: 8px;
}

.nav-group-toggle {
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: 9px 10px;
  color: #94a3b8;
  background: transparent;
  text-align: left;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nav-group-toggle::after {
  content: "v";
  color: #64748b;
  font-size: 11px;
}

.nav-group-toggle:hover {
  background: rgba(148, 163, 184, 0.08);
  color: #cbd5e1;
}

.nav-group.collapsed .nav-group-toggle::after {
  content: ">";
}

.nav-group.collapsed .nav-group-items {
  display: none;
}

.nav-group-items {
  display: grid;
  gap: 6px;
  padding-left: 8px;
  border-left: 1px solid rgba(148, 163, 184, 0.18);
}

.nav-item {
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: 10px 12px;
  color: #dbeafe;
  background: transparent;
  text-align: left;
}

.nav-item.active,
.nav-item:hover {
  background: var(--sidebar-soft);
}

.nav-item.subtle {
  color: #94a3b8;
}

.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 16px;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: white;
  color: var(--sidebar);
  display: grid;
  place-items: center;
  font-weight: 700;
}

.user-name {
  font-size: 13px;
  font-weight: 700;
}

.main {
  margin-left: 232px;
  min-height: 100vh;
  padding: 28px 28px 40px;
}

.app-view.hidden {
  display: none;
}

#labelView:not(.hidden) {
  height: calc(100vh - 68px);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.page-header {
  min-height: 82px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  box-shadow: var(--shadow);
}

.page-header h1 {
  font-size: 24px;
}

.page-header p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 5px;
}

.landing-header {
  min-height: 130px;
}

.landing-header h1 {
  font-size: 28px;
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.platform-card {
  --platform-accent: var(--blue);
  --platform-soft: #eef2ff;
  min-height: 178px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  text-align: left;
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.platform-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--platform-accent);
}

.platform-card[data-landing-target="data"] {
  --platform-accent: #2563eb;
  --platform-soft: #eff6ff;
}

.platform-card[data-landing-target="quality"] {
  --platform-accent: #0f9f6e;
  --platform-soft: #ecfdf5;
}

.platform-card[data-landing-target="annotation"] {
  --platform-accent: #7c3aed;
  --platform-soft: #f5f3ff;
}

.platform-card:hover {
  border-color: color-mix(in srgb, var(--platform-accent) 38%, white);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
}

.platform-card span {
  color: var(--platform-accent);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.platform-card strong {
  font-size: 20px;
}

.platform-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.landing-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.landing-stat-card {
  --stat-accent: var(--blue);
  --stat-soft: #eef2ff;
  min-height: 142px;
  border: 1px solid color-mix(in srgb, var(--stat-accent) 22%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(180deg, var(--stat-soft), white 58%),
    var(--panel);
  box-shadow: var(--shadow);
  padding: 16px;
  display: grid;
  align-content: space-between;
  gap: 18px;
}

.landing-stat-card.data {
  --stat-accent: #2563eb;
  --stat-soft: #eff6ff;
}

.landing-stat-card.quality {
  --stat-accent: #0f9f6e;
  --stat-soft: #ecfdf5;
}

.landing-stat-card.annotation {
  --stat-accent: #7c3aed;
  --stat-soft: #f5f3ff;
}

.landing-stat-system {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #374151;
  font-size: 13px;
}

.landing-stat-system span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--stat-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--stat-accent) 14%, transparent);
}

.landing-stat-system strong {
  font-size: 14px;
}

.landing-stat-metric span {
  color: var(--muted);
  font-size: 12px;
}

.landing-stat-metric strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.1;
}

.admin-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 0;
}

.admin-tabs button {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: var(--ink);
  padding: 8px 11px;
  font-size: 13px;
}

.admin-tabs button.active {
  border-color: var(--blue);
  background: var(--blue);
  color: white;
  font-weight: 700;
}

.filter-panel {
  margin-top: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 14px;
  /* Flex, not a hardcoded five-column grid: the panel is built per section now and has three,
     four or five controls. A fixed track count forced fields into the wrong columns, which is
     what made the date fields overlap their neighbour. */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

.filter-field {
  display: grid;
  gap: 6px;
  flex: 1 1 180px;
  min-width: 160px;
}

/* The date fields need room for the input plus the calendar button inside it. */
.filter-field:has(.date-input-wrap) {
  flex: 0 0 190px;
}

.filter-panel > .primary-button {
  flex: 0 0 auto;
}

/* The panel's own field captions. Excludes the rows inside a multi-select, which are labels
   too and would otherwise inherit the muted colour that distinguishes tree depth. */
.filter-field > label {
  color: var(--muted);
  font-size: 12px;
}

.filter-field input,
.filter-field select,
.admin-form input,
.admin-form select,
.admin-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  padding: 9px 10px;
  color: var(--ink);
}

.date-input-wrap {
  position: relative;
}

.date-input-wrap input {
  padding-right: 42px;
}

.date-picker-trigger {
  position: absolute;
  right: 7px;
  top: 50%;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}

.date-picker-trigger::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  box-sizing: border-box;
}

.date-picker-trigger::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 11px;
  width: 10px;
  height: 2px;
  background: var(--ink);
  box-shadow: 0 4px 0 rgba(15, 23, 42, 0.35);
}

.date-picker-trigger:hover {
  background: #eef2ff;
}

.english-date-picker {
  position: absolute;
  z-index: 60;
  width: 292px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.18);
  padding: 12px;
}

.english-date-picker.hidden {
  display: none;
}

.date-picker-header,
.date-picker-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.date-picker-header strong {
  flex: 1;
  text-align: center;
  font-size: 14px;
}

.date-picker-nav,
.date-picker-day {
  border: 1px solid transparent;
  border-radius: 6px;
  background: white;
  color: var(--ink);
  cursor: pointer;
}

.date-picker-nav {
  width: 30px;
  height: 30px;
  font-size: 18px;
}

.date-picker-weekdays,
.date-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.date-picker-weekdays {
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.date-picker-grid {
  margin-top: 6px;
}

.date-picker-day {
  height: 30px;
  font-size: 12px;
}

.date-picker-day:hover,
.date-picker-day.selected {
  border-color: var(--blue);
  background: #eef2ff;
  color: var(--blue);
  font-weight: 700;
}

.date-picker-day.muted {
  color: #cbd5e1;
}

.date-picker-time-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.date-picker-time-row input {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 9px;
  color: var(--ink);
}

.date-picker-actions {
  margin-top: 10px;
}

.admin-inline-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.table-shell {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  background: white;
  font-size: 12px;
}

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

.admin-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  color: #374151;
  font-weight: 800;
  white-space: nowrap;
}

.admin-table tr:last-child td {
  border-bottom: 0;
}

.admin-table td {
  color: #1f2937;
  line-height: 1.45;
}

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

.row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 118px;
}

.row-action {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  padding: 6px 8px;
  font-size: 12px;
}

.row-action.primary {
  border-color: var(--blue);
  color: white;
  background: var(--blue);
}

.row-action.danger {
  color: var(--danger);
}

.progress-track {
  width: 86px;
  height: 8px;
  border-radius: 99px;
  background: #e5e7eb;
  overflow: hidden;
  margin-top: 5px;
}

.progress-track span {
  display: block;
  height: 100%;
  background: var(--blue);
}

.status-chip,
.status-badge,
.severity-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 12px;
  white-space: nowrap;
}

.status-chip.ok,
.status-chip.pass {
  background: #ecfdf5;
  color: #047857;
}

.status-chip.warn,
.status-chip.running,
.status-chip.reviewing {
  background: #fffbeb;
  color: #92400e;
}

.status-chip.fail,
.status-chip.paused,
.severity-chip.Critical {
  background: #fef2f2;
  color: #b91c1c;
}

/* Severity, low -> critical: blue, amber, orange, red. */
.severity-chip.Low {
  background: #eff6ff;
  color: #1d4ed8;
}

.severity-chip.Medium {
  background: #fffbeb;
  color: #92400e;
}

.severity-chip.High {
  background: #fff7ed;
  color: #c2410c;
}

.metric-blocks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.metric-block {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 14px;
}

.metric-block span {
  color: var(--muted);
  font-size: 12px;
}

.metric-block strong {
  display: block;
  font-size: 24px;
  margin-top: 8px;
}

.workbench-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.workbench-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 14px;
}

.workbench-panel h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.management-stack {
  display: grid;
  gap: 18px;
}

.management-section {
  display: grid;
  gap: 10px;
}

.management-section + .management-section {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.management-section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.management-section-header h3 {
  margin: 0;
  font-size: 16px;
}

.management-section-header p {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.table-shell.compact {
  margin: 0;
}

/* The rows share one grid so their bars start at the same x. Each row being its own grid made
   every label column size itself, and the bars came out ragged.
   The label column was a fixed 140px, which the path-leaf task names
   (organize_kitchen_tableware_cabinet) overran, printing on top of the bar. */
.bar-rows {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(60px, 1fr) 46px;
  column-gap: 10px;
  align-items: center;
}

.bar-row {
  display: contents;
  color: #374151;
  font-size: 12px;
}

.bar-row > * {
  margin: 5px 0;
}

.bar-row > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}

.bar {
  height: 8px;
  border-radius: 99px;
  background: #e5e7eb;
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  background: var(--blue);
}

.admin-modal-card {
  width: min(660px, calc(100vw - 32px));
}

.review-modal-card {
  width: min(980px, calc(100vw - 32px));
}

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

.review-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.2fr) minmax(260px, 0.8fr);
  gap: 14px;
}

.review-video-stage {
  background: #0b0f19;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  gap: 8px;
  padding: 8px;
  aspect-ratio: 16 / 10;
}

.review-camera-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-height: 0;
}

.review-camera-grid.single {
  grid-template-columns: 1fr;
}

.review-camera-panel {
  position: relative;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 7px;
  background: #05070c;
  aspect-ratio: 1600 / 1300;
}

.review-camera-panel[hidden] {
  display: none;
}

.review-camera-panel video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.review-video-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.review-video-toolbar .control-button {
  color: white;
  background: rgba(15, 23, 42, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.22);
  min-height: 30px;
  padding: 6px 12px;
}

.selection-cell {
  width: 38px;
  text-align: center;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.summary-card,
.page-panel,
.task-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.summary-card {
  padding: 16px;
}

.summary-card span {
  color: var(--muted);
  font-size: 12px;
}

.summary-card strong {
  display: block;
  font-size: 28px;
  margin-top: 8px;
}

.page-panel {
  margin-top: 16px;
  padding: 16px;
}

.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-title-row h2 {
  font-size: 16px;
}

.task-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.task-list.compact {
  margin-top: 0;
}

.task-card {
  padding: 16px;
  display: grid;
  gap: 12px;
}

.task-card-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.task-title {
  font-weight: 800;
  font-size: 16px;
}

.task-meta,
.task-progress {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin-top: 4px;
}

.status-badges,
.task-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 12px;
}

.status-badge.done {
  background: #ecfdf5;
  color: #047857;
}

.status-badge.active {
  background: var(--blue-soft);
  color: #2739a5;
}

.task-action-button {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: var(--ink);
  padding: 9px 12px;
}

.task-action-button.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
  font-weight: 700;
}

.task-action-button:disabled {
  color: #9ca3af;
  background: #f3f4f6;
  cursor: not-allowed;
}

.topbar {
  min-height: 82px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  box-shadow: var(--shadow);
}

.icon-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 20px;
}

.title-block {
  min-width: 0;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.doc-icon {
  width: 18px;
  height: 18px;
  border: 1px solid #9ca3af;
  border-radius: 4px;
  display: inline-grid;
  place-items: center;
  color: transparent;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 19px;
  line-height: 1.25;
}

.title-block p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.quiet-button,
.primary-button,
.small-button,
.tool-button,
.control-button,
.import-button,
.workflow-step,
.task-picker {
  border-radius: 7px;
  border: 1px solid var(--line);
  background: white;
  padding: 9px 12px;
  color: var(--ink);
}

.task-picker {
  max-width: 300px;
  min-width: 190px;
}

.primary-button {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
  font-weight: 700;
}

.quiet-button {
  color: #7c5b08;
  border-color: #fde68a;
  background: #fffbeb;
}

.quiet-button.active {
  color: #047857;
  border-color: #a7f3d0;
  background: #ecfdf5;
}

.upload-button input {
  display: none;
}

/* Groups the Reset + Upload buttons on the Assignments header. */
.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Reset wipes local annotation work, so it reads as destructive, not a neutral action. */
.quiet-button.danger {
  color: var(--danger);
  border-color: #fecaca;
  background: #fef2f2;
}

.workflow-switch {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

.workflow-step {
  border: 0;
  border-radius: 0;
  padding: 8px 10px;
  font-size: 12px;
}

.workflow-step.active {
  background: var(--blue);
  color: white;
}

.workflow-step:disabled {
  color: #9ca3af;
  cursor: not-allowed;
}

.workflow-banner {
  margin: 14px 0 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #374151;
  font-size: 13px;
}

.workflow-banner strong {
  color: var(--ink);
}

.live-time {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

.live-time strong {
  min-width: 44px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.live-time span {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--green);
}

.history-line {
  color: var(--muted);
  font-size: 12px;
  margin: 14px 0;
}

body[data-stage="assignment1"] .bbox-panel,
body[data-stage="assignment1"] #drawButton {
  display: none;
}

body[data-stage="assignment2"] .segments-tools {
  display: none;
}

body[data-stage="assignment2"] .workspace {
  grid-template-columns: 1fr;
}

body[data-stage="assignment2"] .left-pane {
  grid-template-columns: minmax(420px, 1fr) minmax(340px, 0.72fr);
  align-items: start;
}

body[data-stage="assignment2"] .video-panel {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 16px;
  z-index: 4;
}

body[data-stage="assignment2"] .bbox-panel {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
}

body[data-stage="assignment2"] .meta-grid {
  grid-column: 1 / -1;
}

body[data-stage="assignment2"] .segments-panel {
  min-height: auto;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(520px, 1.05fr) minmax(430px, 0.95fr);
  gap: 22px;
  align-items: start;
}

#labelView .workspace {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.left-pane {
  display: grid;
  gap: 16px;
}

#labelView .left-pane {
  max-height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding-right: 3px;
  align-content: start;
}

.video-panel,
.segments-panel,
.bbox-panel,
.info-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.video-panel {
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* No sticky rule here on purpose (Kev, 2026-07-17). Assignment 1 stacks one column, and pinning
   the video to the top of the scrolling pane left it holding 408px of a 459px pane -- so Frame
   Sync, Quick Guide and the bbox panel scrolled underneath it through the ~50px that remained
   and read as content hidden behind the frame. Static is the default, so the pane scrolls as
   one and they sit below the video.
   Assignment 2 keeps its own sticky video: it is a two-column layout where the video sits
   beside the bbox panel rather than above the content, so nothing scrolls under it. Don't
   reintroduce a rule here -- an #labelView selector outranks the stage rules and would silently
   flatten Assignment 2 as well. */

.video-stage {
  position: relative;
  background: #05070c;
  aspect-ratio: 1600 / 1300;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.main-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}

#bboxCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  z-index: 2;
}

.aux-video {
  position: absolute;
  width: 28%;
  height: auto;
  aspect-ratio: 1600 / 1300;
  object-fit: contain;
  right: 12px;
  top: 12px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 7px;
  background: #0b0f19;
  display: none;
  z-index: 4;
}

.aux-video.visible {
  display: block;
}

.time-pill {
  position: static;
  min-width: 112px;
  padding: 0 4px;
  border-radius: 0;
  color: white;
  background: transparent;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.video-controls {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 28px 14px 12px;
  color: white;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.48) 62%, rgba(0, 0, 0, 0));
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.video-stage.controls-idle .video-controls {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

#labelView .video-controls {
  align-items: center;
}

.control-button,
.import-button {
  background: #f8fafc;
  color: #111827;
  border: 0;
  min-height: 34px;
  font-size: 13px;
}

.video-controls .control-button {
  color: white;
  background: rgba(15, 23, 42, 0.54);
  border: 1px solid rgba(255, 255, 255, 0.18);
  min-height: 30px;
  padding: 6px 10px;
  backdrop-filter: blur(8px);
}

.video-controls .control-button:hover {
  background: rgba(15, 23, 42, 0.82);
}

.icon-control {
  width: 38px;
  min-width: 38px;
  padding: 0;
  font-size: 16px;
  font-weight: 800;
}

.timeline {
  flex: 1 1 100%;
  width: 100%;
  height: 34px;
  accent-color: var(--blue);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.timeline::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: #334155;
}

.timeline::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid white;
  border-radius: 999px;
  background: var(--blue);
  margin-top: -6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.timeline::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: #334155;
}

.timeline::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid white;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.control-button.active {
  background: var(--blue);
  color: white;
}

.video-controls .control-button.active {
  background: rgba(79, 109, 245, 0.92);
  border-color: rgba(255, 255, 255, 0.28);
}

.import-button input {
  display: none;
}

.meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-panel,
.bbox-panel {
  padding: 16px;
}

.info-panel h2,
.bbox-panel h2,
.segments-panel h2 {
  font-size: 15px;
}

dl {
  margin: 10px 0 0;
  display: grid;
  gap: 7px;
}

dl div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
  align-items: start;
}

dt {
  color: var(--muted);
  font-size: 12px;
}

dd {
  margin: 0;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-word;
}

#quickGuide {
  margin: 10px 0 0;
  padding-left: 18px;
  color: #374151;
  font-size: 12px;
  line-height: 1.55;
}

.panel-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.panel-header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.bbox-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 620px;
}

.bbox-tools select {
  min-width: 132px;
  max-width: 180px;
}

.tool-button.danger {
  color: var(--danger);
  border-color: #fecaca;
  background: #fff7f7;
}

select,
input,
textarea {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  padding: 9px 10px;
  min-width: 0;
}

.video-controls .timeline {
  order: -1;
  flex-basis: 100%;
  height: 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.video-controls .timeline::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.36);
}

.video-controls .timeline::-moz-range-track {
  background: rgba(255, 255, 255, 0.36);
}

.bbox-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.bbox-item {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  font-size: 12px;
}

.bbox-item.selected {
  border-color: #9aa9ff;
  background: #f7f8ff;
}

.bbox-item.inactive {
  color: var(--muted);
}

.bbox-item strong {
  display: inline-block;
  margin-bottom: 4px;
}

.keyframe-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.keyframe-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  padding: 3px 5px 3px 8px;
  color: #374151;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.keyframe-pill.active {
  border-color: #9aa9ff;
  background: var(--blue-soft);
  color: #2739a5;
}

.keyframe-pill.selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(79, 109, 245, 0.16);
}

.keyframe-pill button {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 1px 2px;
  font-size: 11px;
}

.keyframe-pill .keyframe-delete {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: var(--danger);
}

.keyframe-pill .keyframe-delete:hover {
  background: #fee2e2;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 7px;
  background: #ecfdf5;
  color: #047857;
  font-size: 11px;
}

.status-chip.occluded {
  background: #fffbeb;
  color: #92400e;
}

.status-chip.out_of_view {
  background: #f3f4f6;
  color: #4b5563;
}

.segments-panel {
  min-height: calc(100vh - 152px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#labelView .segments-panel {
  max-height: 100%;
  min-height: 0;
}

.segments-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.segments-header p {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.small-button {
  padding: 8px 11px;
  background: var(--blue-soft);
  border-color: #c7d2fe;
  color: #2739a5;
  font-weight: 700;
}

.segments-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}

.tool-button {
  padding: 7px 10px;
  font-size: 12px;
}

.tool-button.active {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}

.checkline {
  margin-left: auto;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.segments-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.segment {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.segment.selected {
  border-color: #9aa9ff;
  background: #f7f8ff;
  box-shadow: 0 0 0 2px rgba(79, 109, 245, 0.12);
}

/* Multi-select filters: several staff or several tasks at once, which a <select multiple>
   handles badly. */
.multi-field {
  min-width: 190px;
}

/* The task picker reads as one more box in the row until it's clicked. Four levels of
   checkboxes standing permanently open made it three times the height of its neighbours and
   dragged the whole panel out of line. */
.tree-select {
  position: relative;
}

.tree-trigger {
  /* Matches .filter-field input exactly -- same border, radius, padding and background -- so
     the collapsed picker is indistinguishable from the Collector box beside it. */
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  padding: 9px 10px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tree-select.open .tree-trigger {
  border-color: var(--blue);
}

.tree-trigger-value {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A selection is the thing worth reading; "All" is just the resting state. */
.tree-trigger-value.has-selection {
  color: var(--blue);
  font-weight: 600;
}

.tree-caret {
  color: var(--muted);
  font-size: 10px;
  flex: 0 0 auto;
}

/* Floats over the panel instead of growing it: expanding must not push the fields below down,
   or the row jumps every time the picker opens. */
.tree-panel {
  display: none;
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 340px;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  box-shadow: var(--shadow);
  padding: 6px 8px;
}

.tree-select.open .tree-panel {
  display: block;
}

.multi-count {
  margin-left: 4px;
  color: var(--blue);
  font-weight: 600;
}

.multi-list {
  max-height: 104px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  padding: 6px 8px;
  display: grid;
  gap: 4px;
}

.multi-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
}

.multi-option input {
  margin: 0;
}

/* The task filter mirrors the four-level path. Checkboxes share one left edge at every depth:
   indenting the control makes the boxes a ragged diagonal that is hard to scan and hard to
   hit. Depth is shown by the label instead. */
.task-tree-field {
  min-width: 260px;
}

/* The tree used to be a .multi-list sitting open in the panel; sizing and scrolling now belong
   to .tree-panel, which is the popover. */
.tree-row {
  display: grid;
  /* toggle | checkbox | label. Fixed first two columns keep every checkbox on one left edge
     regardless of depth; a leaf gets a blank spacer so it lines up with its siblings. */
  grid-template-columns: 14px 14px 1fr;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink);
}

.tree-row.hidden-row {
  display: none;
}

.tree-toggle {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 9px;
  line-height: 1;
  display: grid;
  place-items: center;
}

.tree-toggle.spacer {
  cursor: default;
}

.tree-toggle:not(.spacer):hover {
  color: var(--blue);
}

.tree-label {
  cursor: pointer;
}

.tree-row:hover {
  background: var(--blue-soft);
}

.tree-row input {
  margin: 0;
  justify-self: center;
}

.tree-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Depth reads from the label's indent and weight, not from the checkbox position. */
.tree-row.depth-0 .tree-label {
  font-weight: 700;
}

.tree-row.depth-1 .tree-label {
  padding-left: 12px;
  font-weight: 600;
}

.tree-row.depth-2 .tree-label {
  padding-left: 24px;
  color: var(--muted);
}

.tree-row.depth-3 .tree-label {
  padding-left: 36px;
}

/* A partially-selected branch has to look different from an empty one, or ticking one leaf
   leaves its parents looking untouched. */
.tree-row input:indeterminate {
  accent-color: var(--blue);
}

.empty-note {
  color: var(--muted);
  font-size: 12px;
  margin: 6px 0;
}

/* Which task this recording belongs to. The card's title is the recording id, which says
   nothing about the work. */
.task-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 4px;
}

.task-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: #3730a3;
  font-size: 11px;
  font-weight: 600;
}

/* The vendor reads differently from the task tag beside it: two identically styled pills would
   look like one list of task names. */
.task-tag.vendor {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}

/* Sits on the panel's baseline with the fields rather than stretching to their height. */
.filter-field.filter-actions {
  flex: 0 0 auto;
  min-width: 0;
  align-self: end;
}

/* A completed subtask is no longer something to act on, but stays visible as a record. */
tr.row-done {
  background: #fafafa;
  color: var(--muted);
}

tr.row-done .status-chip {
  opacity: 0.75;
}

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

.empty-row {
  padding: 18px 12px !important;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

/* The AI's opinion, shown to the reviewer before they form their own. */
.ai-qa-panel {
  border: 1px solid var(--line);
  border-left: 3px solid #9aa9ff;
  border-radius: 6px;
  padding: 8px 10px;
  background: #fafbff;
}

.ai-qa-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.ai-qa-panel p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.ai-qa-note {
  color: #4b5563;
}

.ai-qa-issues {
  color: #b91c1c;
  font-weight: 500;
}

.ai-qa-warn {
  color: #92400e;
  font-weight: 500;
}

.ai-qa-facts {
  color: #9ca3af;
  font-size: 11px;
}

/* AI QA verdict from the iteration model rather than the contract one. */
.draft-mark {
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 3px;
  background: #fffbeb;
  color: #92400e;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Marks where the playhead is, which is not always the segment being edited. */
.segment.playing::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #4f6df5;
}

.segment-main {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
}

.segment-number {
  width: 28px;
  height: 28px;
  border-radius: 99px;
  background: var(--blue);
  color: white;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}

.segment-time {
  color: var(--muted);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin-bottom: 4px;
  white-space: nowrap;
}

.segment-text {
  font-size: 13px;
  line-height: 1.35;
}

.segment-actions {
  display: flex;
  gap: 5px;
}

.mini-button {
  border: 1px solid var(--line);
  background: white;
  border-radius: 7px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 12px;
}

.mini-button.danger {
  color: var(--danger);
}

.mini-button:disabled {
  color: #9ca3af;
  background: #f3f4f6;
  cursor: not-allowed;
}

.segment-editor {
  border-top: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.ai-hint {
  border: 1px solid #c7d2fe;
  border-radius: 7px;
  background: #f8faff;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-hint strong {
  font-size: 12px;
}

.ai-hint span {
  color: var(--muted);
  font-size: 11px;
  margin-left: 6px;
}

.ai-hint p {
  color: #2739a5;
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
}

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

.field {
  display: grid;
  gap: 5px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  color: var(--muted);
  font-size: 12px;
}

.field textarea {
  resize: vertical;
  min-height: 66px;
}

.qc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.qc-grid label {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.34);
  z-index: 50;
}

.modal.hidden,
.toast.hidden {
  display: none;
}

.modal-card {
  width: min(430px, calc(100vw - 32px));
  background: white;
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 16px;
  display: grid;
  gap: 10px;
}

.modal-card.admin-modal-card {
  width: min(660px, calc(100vw - 32px));
}

.modal-card.review-modal-card {
  width: min(1180px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  gap: 14px;
}

.review-modal-card .modal-header {
  align-items: flex-start;
}

.review-modal-card .modal-header h2 {
  /* Was clamp(24px, 3vw, 42px), which hit 42px on a wide screen and wrapped the recording id
     onto two lines, dwarfing the panel. A recording id is a reference, not a headline. */
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.review-modal-card .review-layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  align-items: start;
}

.review-modal-card .review-video-stage {
  aspect-ratio: auto;
}

.review-modal-card .admin-form,
.review-modal-card .field {
  min-width: 0;
}

.review-modal-card .admin-form textarea {
  min-height: 96px;
}

.replace-summary {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.modal-header,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: #111827;
  color: white;
  border-radius: 7px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  z-index: 60;
  font-size: 13px;
}

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

  body[data-stage="assignment2"] .workspace,
  body[data-stage="assignment2"] .left-pane {
    grid-template-columns: 1fr;
  }

  body[data-stage="assignment2"] .video-panel,
  body[data-stage="assignment2"] .bbox-panel,
  body[data-stage="assignment2"] .meta-grid {
    grid-column: 1;
    grid-row: auto;
  }

  body[data-stage="assignment2"] .bbox-panel {
    position: static;
    max-height: none;
  }

  .segments-panel {
    min-height: 500px;
  }
}

@media (max-width: 840px) {
  .sidebar {
    display: none;
  }

  .main {
    margin-left: 0;
    padding: 16px;
  }

  .topbar,
  .top-actions,
  .meta-grid,
  .editor-grid,
  .page-header,
  .summary-grid,
  .landing-stats-grid,
  .task-card-header,
  .platform-grid,
  .filter-panel,
  .metric-blocks,
  .workbench-grid,
  .review-layout,
  .admin-form {
    display: grid;
    grid-template-columns: 1fr;
  }

  .top-actions {
    margin-left: 0;
  }

  .modal-card.review-modal-card {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .review-modal-card .review-layout,
  .review-modal-card .admin-form {
    grid-template-columns: 1fr;
  }
}