html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

:root {
  --app-font-family: "Manrope", "Segoe UI", sans-serif;
}

body {
    font-family: var(--app-font-family);
    margin-bottom: 60px;
    background-color: #f4f8fc;
    background-image: url('/pics/logo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    background-blend-mode: darken;
    color: #223548;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea,
.btn,
.form-control,
.form-select,
.dropdown-menu,
.tooltip,
.popover {
  font-family: var(--app-font-family);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: rgba(232, 236, 240, 0.66);
}

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(circle at 35% 35%, rgba(90, 167, 235, 0.28), transparent 32%),
    rgba(8, 25, 45, 0.18);
  backdrop-filter: blur(4px);
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.page-transition.is-active {
  opacity: 1;
  visibility: visible;
}

.page-transition-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: min(100%, 320px);
  padding: 1rem 1.15rem;
  border-radius: 1rem;
  color: #f8fbff;
  background: linear-gradient(135deg, rgba(8, 25, 45, 0.96), rgba(20, 75, 125, 0.95));
  box-shadow: 0 18px 45px rgba(4, 20, 38, 0.28);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.18s ease;
}

.page-transition.is-active .page-transition-card {
  transform: translateY(0) scale(1);
}

.page-transition-spinner {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.28);
  border-top-color: #ffffff;
  animation: page-transition-spin 0.75s linear infinite;
  flex: 0 0 auto;
}

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

.page-transition-subtitle {
  margin-top: 0.12rem;
  font-size: 0.88rem;
  color: rgba(248, 251, 255, 0.78);
}

.page-enter {
  animation: page-enter 0.22s ease-out both;
}

@keyframes page-transition-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition,
  .page-transition-card {
    transition: none;
  }

  .page-transition-spinner,
  .page-enter {
    animation: none;
  }
}

.app-navbar {
  position: sticky;
  top: 0;
  z-index: 1040;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  backdrop-filter: blur(8px);
}

.app-navbar-inner {
  border-radius: 0.9rem;
  padding: 0.45rem 0.75rem;
  background: linear-gradient(130deg, rgba(8, 25, 45, 0.96) 0%, rgba(14, 54, 94, 0.95) 100%);
  box-shadow: 0 10px 24px rgba(4, 20, 38, 0.2);
}

.app-brand {
  color: #f3f8ff;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.app-brand-logo {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  object-fit: contain;
}

.app-brand:hover {
  color: #ffffff;
}

.app-nav .nav-link {
  color: rgba(236, 245, 255, 0.88);
  border-radius: 0.6rem;
  padding: 0.42rem 0.72rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.app-nav .nav-link:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.12);
}

.app-nav .nav-link.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.app-nav-dropdown {
  min-width: 15rem;
  padding: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.85rem;
  background: rgba(12, 38, 66, 0.98);
  box-shadow: 0 16px 34px rgba(4, 20, 38, 0.28);
}

.app-nav-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-radius: 0.6rem;
  color: rgba(236, 245, 255, 0.9);
  padding: 0.52rem 0.7rem;
  font-weight: 600;
}

.app-nav-dropdown .dropdown-item i {
  width: 1.1rem;
  color: rgba(151, 205, 255, 0.95);
}

.app-nav-dropdown .dropdown-item:hover,
.app-nav-dropdown .dropdown-item:focus,
.app-nav-dropdown .dropdown-item.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
}

.app-nav-dropdown .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.14);
  margin: 0.35rem 0;
}

.app-navbar-toggler {
  border-color: rgba(255, 255, 255, 0.35);
}

.app-navbar-toggler:focus {
  box-shadow: 0 0 0 0.15rem rgba(147, 200, 255, 0.35);
}

.app-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 260px;
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  color: rgba(236, 245, 255, 0.92);
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

.app-user-chip:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.app-user-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-user-chip strong {
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  color: #183754;
  background: rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
}

@media (max-width: 991.98px) {
  .app-nav {
    margin-top: 0.55rem;
    gap: 0.2rem;
  }

  .app-user-chip {
    width: fit-content;
    max-width: 100%;
    margin-top: 0.65rem;
  }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.auth-page {
  min-height: calc(100vh - 145px);
  display: grid;
  place-items: center;
  padding: 2.5rem 0;
}

.auth-shell {
  width: min(100%, 980px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  overflow: hidden;
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(219, 231, 243, 0.95);
  box-shadow: 0 24px 70px rgba(4, 20, 38, 0.18);
  backdrop-filter: blur(10px);
}

.auth-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 520px;
  padding: 2.2rem;
  color: #fff;
  background:
    radial-gradient(circle at 18% 22%, rgba(122, 193, 255, 0.34), transparent 28%),
    linear-gradient(145deg, #061323 0%, #0c2d4f 52%, #174c7c 100%);
}

.auth-hero::after {
  content: "";
  position: absolute;
  inset: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  pointer-events: none;
}

.auth-hero__badge {
  position: absolute;
  top: 2.2rem;
  left: 2.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.72rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.82rem;
  font-weight: 600;
}

.auth-hero h1 {
  position: relative;
  margin: 0 0 0.8rem;
  font-size: clamp(2.3rem, 5vw, 4.3rem);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.auth-hero p {
  position: relative;
  max-width: 470px;
  margin: 0;
  color: rgba(244, 249, 255, 0.82);
  font-size: 1rem;
  line-height: 1.65;
}

.auth-hero__meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.35rem;
}

.auth-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
  font-weight: 600;
}

.auth-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 2.4rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 255, 0.96) 100%);
}

.auth-card__header {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  margin-bottom: 1.6rem;
}

.auth-card__icon {
  width: 3.1rem;
  height: 3.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  color: #fff;
  background: linear-gradient(135deg, #0a3158, #1a78bd);
  box-shadow: 0 12px 26px rgba(13, 94, 157, 0.24);
  font-size: 1.35rem;
  flex: 0 0 auto;
}

.auth-card h2 {
  margin: 0;
  color: #10263d;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.auth-card p {
  margin: 0.2rem 0 0;
  color: #667586;
  font-size: 0.92rem;
}

.auth-alert {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 0;
  border-radius: 0.85rem;
}

.auth-form .form-label {
  color: #34495f;
  font-weight: 700;
  font-size: 0.86rem;
}

.auth-input {
  position: relative;
}

.auth-input .bi {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: #718195;
  z-index: 2;
}

.auth-input .form-control {
  min-height: 3.05rem;
  padding-left: 2.65rem;
  border-radius: 0.9rem;
  border-color: #dbe7f3;
  background-color: #fbfdff;
}

.auth-input .form-control:focus {
  border-color: #82b9e9;
  background-color: #fff;
}

.auth-submit {
  min-height: 3.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 0;
  border-radius: 0.95rem;
  color: #fff;
  background: linear-gradient(135deg, #061323, #0e5a95);
  box-shadow: 0 14px 28px rgba(6, 35, 65, 0.22);
  font-weight: 800;
}

.auth-submit:hover {
  color: #fff;
  background: linear-gradient(135deg, #071a31, #126cac);
}

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

  .auth-hero {
    min-height: 320px;
  }
}

@media (max-width: 575.98px) {
  .auth-page {
    padding: 1rem 0;
  }

  .auth-shell {
    border-radius: 1rem;
  }

  .auth-hero {
    min-height: 260px;
    padding: 1.5rem;
  }

  .auth-hero__badge {
    top: 1.5rem;
    left: 1.5rem;
  }
}

.survey-list-card {
  overflow: hidden;
  border-radius: 0.9rem;
}

.survey-list-table thead th {
  font-size: 0.84rem;
  font-weight: 600;
  color: #5f6b77;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  vertical-align: middle;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #e9ecef;
}

.table-sort-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: inherit;
  text-decoration: none;
}

.table-sort-link:hover {
  color: #0d6efd;
}

.table-sort-link .bi {
  font-size: 0.9rem;
  opacity: 0.78;
}

.question-bank-wiki-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.65rem;
  border: 1px solid #cfe1f1;
  border-radius: 999px;
  color: #245d88;
  background:
    radial-gradient(circle at top right, rgba(45, 125, 191, 0.12), transparent 4rem),
    #f4f9ff;
  font-size: 0.82rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.question-bank-wiki-link:hover {
  border-color: #93bfdf;
  color: #184f78;
  background: #edf7ff;
  text-decoration: none;
  transform: translateY(-1px);
}

.question-bank-wiki-empty {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.58rem;
  border-radius: 999px;
  color: #728496;
  background: #f2f5f8;
  font-size: 0.8rem;
  font-weight: 650;
  white-space: nowrap;
}

.survey-list-table tbody td,
.survey-list-table tbody th {
  vertical-align: middle;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.survey-list-table .col-narrow {
  width: 52px;
}

.survey-list-table .col-medium {
  width: 180px;
}

.survey-list-table .col-actions {
  width: 220px;
}

.survey-title-cell {
  font-weight: 500;
  color: #26313d;
}

.survey-status {
  font-weight: 500;
}

.survey-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: 320px;
}

.survey-tag-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: #edf5ff;
  color: #275176;
  border: 1px solid #cfe2f6;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
}

.assignment-selected {
  min-height: 2.65rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  height: auto;
}

.assignment-selected__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.2rem 0.28rem 0.2rem 0.55rem;
  border-radius: 999px;
  background: #eef7f1;
  color: #23523a;
  border: 1px solid #cce7d4;
  font-size: 0.82rem;
  font-weight: 600;
}

.assignment-selected__chip button {
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #23523a;
  background: rgba(35, 82, 58, 0.1);
  line-height: 1;
}

.assignment-picker {
  overflow: hidden;
  background: #fbfdff;
}

.assignment-picker__toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border-bottom: 1px solid #e4ebf4;
}

.assignment-picker__toolbar .form-control {
  max-width: 260px;
}

.assignment-picker__list {
  max-height: 240px;
  overflow: auto;
  padding: 0.45rem;
}

.assignment-picker__item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 0.55rem;
  color: #26313d;
  background: transparent;
  text-align: left;
}

.assignment-picker__item:hover {
  background: #edf5ff;
}

.assignment-picker__item:disabled {
  color: #7a8795;
  background: #f3f6f9;
  cursor: default;
}

.assignment-picker__plus {
  width: 1.55rem;
  height: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #0d6efd;
  color: #fff;
  font-weight: 700;
  flex: 0 0 auto;
}

.assignment-picker__item:disabled .assignment-picker__plus {
  background: #adb5bd;
}

.assignment-picker__tree {
  max-height: 360px;
  overflow: auto;
  padding: 0.6rem;
}

.assignment-group {
  border: 1px solid #e4ebf4;
  border-radius: 0.8rem;
  background: #fff;
}

.assignment-group + .assignment-group {
  margin-top: 0.55rem;
}

.assignment-group__header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  margin: 0;
  border-radius: 0.8rem 0.8rem 0 0;
  background: #f3f8fd;
}

.assignment-group__check {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.assignment-group__toggle {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.assignment-group__toggle .bi {
  color: #5f6f81;
  transition: transform 0.16s ease;
}

.assignment-group--open .assignment-group__toggle .bi {
  transform: rotate(90deg);
}

.assignment-group__title {
  color: #26313d;
  font-weight: 800;
}

.assignment-group__count {
  margin-left: auto;
  min-width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #275176;
  background: #edf5ff;
  border: 1px solid #cfe2f6;
  font-size: 0.78rem;
  font-weight: 800;
}

.assignment-relevance {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.48rem;
  border-radius: 999px;
  color: #476174;
  background: #eef5fb;
  border: 1px solid #d6e4f0;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.assignment-relevance--recommended {
  color: #7a4210;
  background: #fff2dc;
  border-color: #ffd79c;
}

.assignment-group__users {
  display: grid;
  gap: 0.25rem;
  padding: 0.45rem;
  animation: assignment-users-drop 0.16s ease-out;
}

.assignment-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.52rem 0.65rem;
  border-radius: 0.6rem;
  color: #334150;
  cursor: pointer;
}

.assignment-user__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assignment-user:hover {
  background: #edf5ff;
}

.assignment-user:has(input:disabled) {
  color: #7a8795;
  background: #f3f6f9;
}

.assignment-group__empty {
  padding: 0.65rem;
  color: #7a8795;
  font-size: 0.88rem;
}

@keyframes assignment-users-drop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767.98px) {
  .assignment-picker__toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .assignment-picker__toolbar .form-control {
    max-width: none;
  }
}

.home-dashboard-page .card {
  border-radius: 1rem;
}

.home-hero {
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(53, 107, 155, 0.18), transparent 34rem),
    linear-gradient(135deg, #f7fbff 0%, #eef6fb 52%, #f8faf7 100%);
}

.home-hero .card-body {
  padding: clamp(2rem, 5vw, 4.5rem);
}

.home-hero__eyebrow {
  margin-bottom: 0.8rem;
  color: #315f86;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-hero__title {
  max-width: 760px;
  color: #203144;
  font-weight: 800;
  line-height: 1.08;
}

.home-hero__text {
  max-width: 680px;
  margin: 1rem 0 1.6rem;
  color: #586b7c;
  font-size: 1.08rem;
}

.dashboard-metric {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(244, 249, 253, 0.96)),
    radial-gradient(circle at top right, rgba(48, 108, 160, 0.11), transparent 12rem);
}

.dashboard-metric--danger {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 241, 0.96)),
    radial-gradient(circle at top right, rgba(218, 80, 48, 0.14), transparent 12rem);
}

.dashboard-metric--result {
  --dashboard-average: 0;
  background:
    radial-gradient(circle at top right, rgba(45, 120, 183, 0.12), transparent 12rem),
    linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.96));
}

.dashboard-metric__topline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.dashboard-metric__icon {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #2d78b7;
  background: #e8f3fb;
}

.dashboard-metric--danger .dashboard-metric__icon {
  color: #a45120;
  background: #fff0e6;
}

.dashboard-average-bar {
  position: relative;
  height: 0.42rem;
  margin: 0.35rem 0 0.25rem;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, #c9d3dc 0%, #2d78b7 56%, #58a978 100%);
}

.dashboard-average-bar span {
  display: block;
  width: calc(var(--dashboard-average) * 1%);
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.dashboard-trend-card {
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(44, 120, 184, 0.08), transparent 18rem),
    linear-gradient(160deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 252, 0.96));
}

.dashboard-trend-chart {
  width: 100%;
  height: clamp(170px, 22vw, 240px);
}

.dashboard-trend-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dashboard-trend-grid {
  stroke: rgba(35, 63, 91, 0.075);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.dashboard-trend-area {
  fill: url("#dashboardTrendArea");
  stroke: none;
}

.dashboard-trend-line {
  fill: none;
  stroke: #2d78b7;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.dashboard-trend-point {
  stroke: #fff;
  stroke-width: 2;
  filter: drop-shadow(0 3px 5px rgba(22, 52, 82, 0.16));
  transition: r 0.15s ease;
  vector-effect: non-scaling-stroke;
}

.dashboard-trend-point:hover {
  r: 6.5;
}

.dashboard-trend-point--good {
  fill: #4aa37a;
}

.dashboard-trend-point--middle {
  fill: #dfad45;
}

.dashboard-trend-point--low {
  fill: #d36b6b;
}

.dashboard-trend-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  border: 1px dashed rgba(38, 87, 127, 0.24);
  border-radius: 0.9rem;
  color: #6b7f92;
  background: rgba(255, 255, 255, 0.56);
  text-align: center;
}

.dashboard-list-item,
.dashboard-task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.dashboard-task {
  padding: 1rem 1.1rem;
}

.dashboard-task__main {
  min-width: 0;
}

.dashboard-pending-assignment__summary {
  flex: 0 0 auto;
  min-width: 6.5rem;
}

.dashboard-pending-assignment__summary .badge {
  margin-top: 0.35rem;
}

.dashboard-task__heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.dashboard-result__heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.dashboard-task-type {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.25rem 0.58rem;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-task-type--survey {
  color: #285f91;
  background: #e8f3fb;
}

.dashboard-task-type--course {
  color: #6f4c18;
  background: #fff1d5;
}

.dashboard-task-type--regular {
  color: #286447;
  background: #e4f5ec;
}

.dashboard-task__open {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  color: #2d6ca7;
  font-size: 0.78rem;
  font-weight: 750;
}

.dashboard-task-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.dashboard-task-tags span {
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  color: #2a5f8d;
  background: #e8f3fb;
  font-size: 0.78rem;
  font-weight: 650;
}

.dashboard-task--overdue {
  background: #fff8f5;
}

.dashboard-task--overdue:hover {
  background: #fff1ea;
}

.dashboard-task--due-soon {
  background:
    radial-gradient(circle at top right, rgba(255, 184, 77, 0.22), transparent 12rem),
    #fffaf1;
}

.dashboard-task--due-soon:hover {
  background:
    radial-gradient(circle at top right, rgba(255, 184, 77, 0.3), transparent 12rem),
    #fff5df;
}

.deadline-countdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.36rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 850;
  white-space: nowrap;
}

.deadline-countdown--hot {
  color: #7a3d00;
  background: #ffe4b8;
  border: 1px solid #ffc873;
  box-shadow: 0 0 0 0 rgba(255, 159, 51, 0.34);
  animation: deadline-pulse 1.35s ease-in-out infinite;
}

.deadline-countdown__pulse {
  width: 0.48rem;
  height: 0.48rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #f28c18;
}

.deadline-countdown--hot .deadline-countdown__pulse {
  box-shadow: 0 0 0 0 rgba(242, 140, 24, 0.5);
  animation: deadline-dot-pulse 1.15s ease-out infinite;
}

.deadline-countdown--overdue {
  color: #fff;
  background: #dc3545;
  border: 1px solid #dc3545;
}

.deadline-countdown--overdue .deadline-countdown__pulse {
  display: none;
}

@keyframes deadline-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 159, 51, 0.38);
  }

  70% {
    box-shadow: 0 0 0 0.42rem rgba(255, 159, 51, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 159, 51, 0);
  }
}

@keyframes deadline-dot-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(242, 140, 24, 0.5);
  }

  75%,
  100% {
    box-shadow: 0 0 0 0.35rem rgba(242, 140, 24, 0);
  }
}

@media (max-width: 575.98px) {
  .dashboard-list-item,
  .dashboard-task {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-pending-assignment__summary {
    width: 100%;
    text-align: left !important;
  }
}

.survey-actions {
  min-width: 190px;
}

.survey-action-btn-main {
  min-width: 88px;
}

.survey-icon-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  line-height: 1;
}

.survey-icon-btn i {
  font-size: 0.92rem;
}

.completed-surveys-panel {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(4, 20, 38, 0.1);
}

.completed-surveys-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 0;
  color: #eaf4ff;
  background: linear-gradient(135deg, #071a31, #123a68);
  font-weight: 800;
  text-align: left;
}

.completed-surveys-toggle span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.completed-surveys-count {
  min-width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #123a68;
  background: #eaf4ff;
}

.completed-surveys-drop {
  padding: 0.7rem;
  background: rgba(7, 26, 49, 0.08);
  border: 1px solid rgba(7, 26, 49, 0.12);
  border-top: 0;
}

.completed-surveys-table {
  overflow: hidden;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.78);
}

.survey-row-completed {
  opacity: 0.78;
  background: #f1f4f7;
}

.survey-row-completed .survey-title-cell {
  color: #5d6b78;
}

.attempts-history-list {
  overflow: hidden;
  border-radius: 1rem;
}

.attempt-history-row--muted {
  opacity: 0.72;
  background: #f3f5f7;
}

.attempt-history-details td {
  padding: 0;
  background: #f8fbff;
}

.attempt-history-details__inner {
  margin: 0.35rem 0.75rem 0.85rem;
  padding: 0.9rem;
  border: 1px solid #dde9f5;
  border-radius: 0.85rem;
  background: #ffffff;
}

.statistics-page .card {
  border: 0;
  border-radius: 1rem;
}

.statistics-heading {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.statistics-heading__icon {
  width: 2.7rem;
  height: 2.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #245d8f;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.9), transparent 60%),
    linear-gradient(145deg, #e8f3fb, #d7e9f5);
  box-shadow: 0 10px 22px rgba(33, 82, 122, 0.12);
}

.statistics-summary-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(45, 120, 183, 0.08), transparent 12rem),
    linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 253, 0.95));
}

.statistics-summary-card::after {
  position: absolute;
  width: 8rem;
  height: 8rem;
  top: -4.8rem;
  right: -3.2rem;
  border-radius: 50%;
  background: rgba(45, 120, 183, 0.06);
  content: "";
  pointer-events: none;
}

.statistics-summary-card--count {
  background:
    radial-gradient(circle at 92% 18%, rgba(79, 150, 211, 0.18), transparent 8rem),
    linear-gradient(145deg, #ffffff, #eff7fd);
}

.statistics-summary-card--success {
  --statistics-percent: 0;
  --statistics-marker-hue: 145;
  background:
    radial-gradient(circle at 92% 18%, hsla(var(--statistics-marker-hue), 55%, 52%, 0.16), transparent 8rem),
    linear-gradient(145deg, #ffffff, #f3faf6);
}

.statistics-summary-card--users {
  background:
    radial-gradient(circle at 92% 18%, rgba(129, 104, 195, 0.17), transparent 8rem),
    linear-gradient(145deg, #ffffff, #f5f2fb);
}

.statistics-summary-card--pending {
  background:
    radial-gradient(circle at 92% 18%, rgba(225, 164, 54, 0.18), transparent 8rem),
    linear-gradient(145deg, #ffffff, #fff8eb);
}

.statistics-summary-card--completed {
  background:
    radial-gradient(circle at 92% 18%, rgba(68, 159, 105, 0.17), transparent 8rem),
    linear-gradient(145deg, #ffffff, #f0f9f4);
}

.statistics-summary-card--danger {
  background:
    radial-gradient(circle at 92% 18%, rgba(210, 85, 67, 0.19), transparent 8rem),
    linear-gradient(145deg, #ffffff, #fff3ef);
}

.statistics-summary-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 8.6rem;
}

.statistics-summary-label {
  margin-bottom: 0.2rem;
  color: #687b8d;
  font-size: 0.82rem;
  font-weight: 700;
}

.statistics-summary-number {
  color: #203b54;
  font-size: 2.15rem;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.statistics-summary-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 1.3rem;
  font-size: 1.65rem;
  transform: rotate(4deg);
}

.statistics-summary-icon--count {
  color: #276b9f;
  background: linear-gradient(145deg, #dff0fc, #c8e4f7);
  box-shadow: 0 0.8rem 1.8rem rgba(39, 107, 159, 0.18);
}

.statistics-summary-icon--users {
  color: #684ea7;
  background: linear-gradient(145deg, #eee8fb, #ddd2f5);
  box-shadow: 0 0.8rem 1.8rem rgba(104, 78, 167, 0.16);
}

.statistics-summary-icon--pending {
  color: #9b6515;
  background: linear-gradient(145deg, #fff0cd, #f9dda0);
  box-shadow: 0 0.8rem 1.8rem rgba(155, 101, 21, 0.16);
}

.statistics-summary-icon--completed {
  color: #28734a;
  background: linear-gradient(145deg, #dcf3e5, #c5e8d3);
  box-shadow: 0 0.8rem 1.8rem rgba(40, 115, 74, 0.16);
}

.statistics-summary-icon--danger {
  color: #a34434;
  background: linear-gradient(145deg, #ffe2da, #f5c5b8);
  box-shadow: 0 0.8rem 1.8rem rgba(163, 68, 52, 0.18);
}

.statistics-summary-number--danger {
  color: #a34434;
}

.statistics-success-ring {
  display: grid;
  flex: 0 0 auto;
  width: 4.8rem;
  height: 4.8rem;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(
    hsl(var(--statistics-marker-hue), 58%, 45%) calc(var(--statistics-percent) * 1%),
    #e5edf0 0
  );
  box-shadow: 0 0.8rem 1.8rem hsla(var(--statistics-marker-hue), 55%, 35%, 0.16);
}

.statistics-success-ring div {
  display: grid;
  width: 3.65rem;
  height: 3.65rem;
  place-items: center;
  border-radius: 50%;
  color: hsl(var(--statistics-marker-hue), 58%, 37%);
  background: #fff;
  font-size: 1.35rem;
  font-weight: 850;
}

.statistics-summary-card--result {
  --statistics-percent: 0;
  --statistics-marker-hue: 4;
  background:
    radial-gradient(circle at 92% 18%, hsla(var(--statistics-marker-hue), 58%, 50%, 0.13), transparent 8rem),
    linear-gradient(145deg, #ffffff, #f8fafb);
}

.statistics-result-value {
  color: hsl(var(--statistics-marker-hue), 58%, 38%);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.statistics-result-scale {
  position: relative;
  height: 0.62rem;
  margin: 0.75rem 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #d95555 0%, #f2c14e 50%, #42a66d 100%);
  box-shadow: inset 0 1px 2px rgba(36, 52, 67, 0.16);
}

.statistics-result-marker {
  position: absolute;
  top: 50%;
  left: clamp(0.48rem, calc(var(--statistics-percent) * 1%), calc(100% - 0.48rem));
  width: 1rem;
  height: 1rem;
  border: 0.18rem solid #fff;
  border-radius: 50%;
  background: hsl(var(--statistics-marker-hue), 68%, 47%);
  box-shadow: 0 0.22rem 0.65rem rgba(31, 47, 62, 0.32);
  transform: translate(-50%, -50%);
}

.statistics-result-scale-labels {
  display: flex;
  justify-content: space-between;
  margin: 0.3rem 0 0.35rem;
  color: #82909d;
  font-size: 0.68rem;
  font-weight: 650;
}

.statistics-percent-pill {
  --statistics-percent: 0;
  --statistics-hue: 210;
  --statistics-saturation: 24%;
  --statistics-lightness: 42%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.2rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  color: hsl(var(--statistics-hue), var(--statistics-saturation), var(--statistics-lightness));
  background: hsl(var(--statistics-hue), var(--statistics-saturation), 93%);
  font-weight: 750;
}

.statistics-soft-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 0.35rem;
  margin-right: 0.3rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1;
}

.statistics-soft-badge--info {
  color: #28617d;
  background: #e8f4f8;
}

.department-table-row--expandable {
  cursor: pointer;
}

.department-table-row--expandable:focus-visible {
  outline: 2px solid rgba(45, 120, 183, 0.45);
  outline-offset: -2px;
}

.department-table-row__chevron {
  color: #6c8194;
  font-size: 0.78rem;
  transition: transform 0.18s ease;
}

.department-table-row--expanded .department-table-row__chevron {
  transform: rotate(180deg);
}

.department-tags-preview {
  align-items: center;
  flex-wrap: nowrap;
  max-width: 36rem;
  overflow: hidden;
}

.department-tags-preview .survey-tag-chip {
  flex: 0 0 auto;
}

.department-tags-more {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.24rem 0.55rem;
  border-radius: 999px;
  color: #4d657a;
  background: #edf2f6;
  font-size: 0.76rem;
  font-weight: 800;
}

.department-tags-details-row > td {
  padding: 0 !important;
  border-top: 0;
  background: #f7fafc;
}

.department-tags-details {
  padding: 0.85rem 1rem 1rem 3.4rem;
  border-top: 1px dashed #d8e3ec;
}

.department-tags-details__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
  color: #52697d;
  font-size: 0.78rem;
  font-weight: 750;
}

.department-tags-details__title span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  height: 1.35rem;
  border-radius: 999px;
  color: #2d6ca7;
  background: #e6f1fa;
  font-size: 0.7rem;
}

.statistics-soft-badge--muted {
  color: #687480;
  background: #eef1f4;
}

.statistics-survey-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #1c3144;
  font-weight: 750;
}

.statistics-survey-toggle:hover {
  color: #2d78b7;
}

.statistics-survey-toggle i {
  width: 1.55rem;
  height: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #2d78b7;
  background: #eaf3fb;
  transition: transform 0.18s ease;
}

.statistics-survey-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.statistics-survey-details-row > td {
  padding: 0;
  background: #f6f9fc;
}

.statistics-survey-details {
  margin: 0.35rem 0.75rem 0.9rem;
  padding: 0.9rem;
  border: 1px solid #dde9f5;
  border-radius: 0.95rem;
  background:
    radial-gradient(circle at top right, rgba(45, 120, 183, 0.07), transparent 13rem),
    #ffffff;
}

.statistics-nested-table thead th {
  color: #66727e;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom-color: #e4edf5;
}

.statistics-nested-table tbody td {
  padding-top: 0.48rem;
  padding-bottom: 0.48rem;
}

@media (max-width: 991.98px) {
  .survey-list-table .col-medium,
  .survey-list-table .col-actions {
    width: auto;
  }

  .survey-actions {
    min-width: 0;
  }
}

.survey-take-page {
  padding-top: 1.25rem;
  padding-bottom: 2.5rem;
}

.survey-result-page {
  padding-top: 1.25rem;
  padding-bottom: 2.5rem;
}

.survey-result-hero {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border: 1px solid #dceaf8;
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at top right, rgba(45, 125, 191, 0.16), transparent 28rem),
    linear-gradient(135deg, #f5faff 0%, #ffffff 74%);
}

.survey-result-hero__eyebrow,
.survey-result-section-header__eyebrow {
  margin-bottom: 0.45rem;
  color: #315f86;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.survey-result-hero__title {
  margin-bottom: 0.65rem;
  color: #213449;
  font-weight: 850;
}

.survey-result-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.survey-result-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid #d6e6f5;
  border-radius: 999px;
  color: #31566f;
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.84rem;
  font-weight: 700;
}

.survey-result-score {
  min-width: 190px;
  text-align: right;
}

.survey-result-score__value {
  color: #213449;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 850;
  line-height: 1;
}

.survey-result-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.survey-result-card {
  padding: 1rem 1.15rem;
  border: 1px solid #e1ebf5;
  border-radius: 1rem;
  background:
    radial-gradient(circle at top right, rgba(49, 103, 151, 0.08), transparent 12rem),
    #fff;
}

.survey-result-card--primary {
  --survey-result-percent: 0;
  background:
    radial-gradient(circle at top right, rgba(82, 161, 134, 0.12), transparent 12rem),
    linear-gradient(160deg, #ffffff, #f7fbff);
}

.survey-result-card--criterion-good {
  border-color: #cfe8d8;
  background:
    radial-gradient(circle at top right, rgba(82, 161, 134, 0.14), transparent 12rem),
    linear-gradient(160deg, #ffffff, #f5fbf7);
}

.survey-result-card--criterion-bad {
  border-color: #f1c7b7;
  background:
    radial-gradient(circle at top right, rgba(217, 95, 61, 0.12), transparent 12rem),
    linear-gradient(160deg, #ffffff, #fff8f5);
}

.survey-result-card--criterion-neutral {
  background:
    radial-gradient(circle at top right, rgba(49, 103, 151, 0.08), transparent 12rem),
    #fff;
}

.survey-result-card__label {
  margin-bottom: 0.35rem;
  color: #315f86;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.survey-result-card__value {
  margin-bottom: 0.15rem;
  color: #213449;
  font-size: 1.75rem;
  font-weight: 850;
  line-height: 1.1;
}

.survey-result-card__note {
  margin-top: 0.55rem;
  color: #4f6475;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.35;
}

.survey-result-progress {
  height: 0.55rem;
  margin: 0.55rem 0 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: #edf3f9;
}

.survey-result-progress span {
  display: block;
  width: calc(var(--survey-result-percent) * 1%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2d7dbf, #52a186);
}

.survey-result-success,
.survey-result-topics {
  border: 1px solid #e1ebf5;
  border-radius: 1.1rem;
  background: #fff;
}

.survey-result-success {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-color: #cfe8d8;
  background:
    radial-gradient(circle at top right, rgba(82, 161, 134, 0.12), transparent 18rem),
    #fff;
}

.survey-result-success__icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px;
  color: #fff;
  background: #43a768;
  font-size: 1.3rem;
}

.survey-result-topics {
  overflow: hidden;
}

.survey-result-section-header {
  padding: 1rem 1.15rem;
  border-bottom: 1px solid #e5edf5;
  background: #f7fafc;
}

.survey-result-topic-list {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
}

.survey-result-topic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid #e2e9f1;
  border-radius: 0.9rem;
  background: #fff;
}

.survey-take-hero {
  margin-bottom: 1.25rem;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border: 1px solid #dceaf8;
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at top right, rgba(49, 103, 151, 0.16), transparent 28rem),
    linear-gradient(135deg, #f4f9ff 0%, #ffffff 72%);
}

.survey-take-hero__eyebrow {
  margin-bottom: 0.45rem;
  color: #315f86;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.survey-take-hero__title {
  margin-bottom: 0.45rem;
  color: #213449;
  font-weight: 850;
}

.survey-take-hero__text {
  max-width: 760px;
  margin-bottom: 0.9rem;
  color: #596d7d;
}

.survey-take-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.survey-take-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.65rem;
  border: 1px solid #d6e6f5;
  border-radius: 999px;
  color: #31566f;
  background: rgba(255, 255, 255, 0.74);
  font-size: 0.86rem;
  font-weight: 700;
}

.survey-take-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 1.25rem;
  align-items: start;
}

.survey-take-main {
  display: grid;
  gap: 1rem;
}

.survey-progress-card,
.survey-submit-panel,
.survey-nav-card {
  border: 1px solid #e1ebf5;
  border-radius: 1rem;
  background: #fff;
}

.survey-progress-card {
  padding: 1rem 1.15rem;
}

.survey-progress {
  height: 0.65rem;
  border-radius: 999px;
  background: #edf3f9;
}

.survey-progress .progress-bar {
  background: linear-gradient(90deg, #2d7dbf, #52a186);
}

.survey-question-card {
  scroll-margin-top: 1.25rem;
  overflow: hidden;
  border: 1px solid #e1ebf5;
  border-radius: 1.1rem;
  background: #fff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.survey-question-card--focused {
  border-color: #8bbce8;
  box-shadow: 0 0 0 0.22rem rgba(45, 125, 191, 0.14), 0 0.5rem 1.2rem rgba(32, 56, 78, 0.08);
}

.survey-question-card--missing {
  border-color: #ef9f83;
  box-shadow: 0 0 0 0.2rem rgba(220, 92, 58, 0.12);
}

.survey-question-card__topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.72rem 1rem;
  background: #f4f8fc;
  border-bottom: 1px solid #e1ebf5;
}

.survey-question-card__number {
  color: #315f86;
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.survey-question-card__points {
  color: #596d7d;
  font-size: 0.82rem;
  font-weight: 700;
}

.survey-question-card__body {
  padding: 1.2rem;
}

.survey-question-card__title {
  margin-bottom: 0.8rem;
  color: #223449;
  font-weight: 800;
  line-height: 1.35;
}

.survey-question-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.survey-question-card__tags span {
  padding: 0.22rem 0.52rem;
  border-radius: 999px;
  color: #466579;
  background: #eef5fb;
  border: 1px solid #d7e5f0;
  font-size: 0.76rem;
  font-weight: 750;
}

.survey-options-grid {
  display: grid;
  gap: 0.55rem;
}

.survey-option-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.1rem;
  margin: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid #e1e9f2;
  border-radius: 0.85rem;
  background: #fff;
  color: #314354;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.survey-option-tile:hover {
  border-color: #a9cde9;
  background: #f8fcff;
  transform: translateY(-1px);
}

.survey-option-tile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.survey-option-tile__marker {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  border: 2px solid #9db5c8;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 0.22rem #fff;
}

.survey-option-tile input[type="checkbox"] + .survey-option-tile__marker {
  border-radius: 0.34rem;
}

.survey-option-tile--selected {
  border-color: #5fa0d4;
  background: #f0f8ff;
  box-shadow: 0 0.35rem 0.9rem rgba(45, 125, 191, 0.08);
}

.survey-option-tile--selected .survey-option-tile__marker {
  border-color: #2d7dbf;
  background: #2d7dbf;
}

.survey-option-tile__text {
  font-weight: 650;
}

.survey-submit-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
}

.survey-take-sidebar {
  position: sticky;
  top: 6rem;
}

.survey-nav-card {
  padding: 1rem;
}

.survey-nav-card__header {
  margin-bottom: 0.85rem;
}

.survey-nav-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.42rem;
}

.survey-nav-button {
  min-width: 0;
  height: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dce6ef;
  border-radius: 0.65rem;
  color: #52697b;
  background: #f8fbfd;
  font-weight: 850;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.survey-nav-button:hover {
  border-color: #9bc4e4;
  color: #225e8c;
  background: #edf7ff;
  text-decoration: none;
}

.survey-nav-button--answered {
  border-color: #80c59f;
  color: #1d6941;
  background: #ecfbf2;
}

.survey-nav-button--missing {
  border-color: #ec9f82;
  color: #9a3c1f;
  background: #fff4ef;
}

.survey-nav-card__legend {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.85rem;
  color: #697d8d;
  font-size: 0.8rem;
}

.survey-nav-card__legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.survey-nav-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  display: inline-block;
}

.survey-nav-dot--answered {
  background: #58ad7a;
}

.survey-nav-dot--missing {
  background: #df7651;
}

.survey-review-page {
  padding-top: 1.25rem;
  padding-bottom: 2.5rem;
}

.survey-review-hero {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border: 1px solid #dceaf8;
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at top right, rgba(82, 161, 134, 0.15), transparent 28rem),
    linear-gradient(135deg, #f6fbff 0%, #ffffff 74%);
}

.survey-review-hero__eyebrow {
  margin-bottom: 0.45rem;
  color: #315f86;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.survey-review-hero__title {
  margin-bottom: 0.65rem;
  color: #213449;
  font-weight: 850;
}

.survey-review-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.survey-review-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid #d6e6f5;
  border-radius: 999px;
  color: #31566f;
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.84rem;
  font-weight: 700;
}

.survey-review-score {
  min-width: 190px;
  text-align: right;
}

.survey-review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 1.25rem;
  align-items: start;
}

.survey-review-main {
  display: grid;
  gap: 1rem;
}

.survey-review-sidebar {
  position: sticky;
  top: 6rem;
}

.survey-review-question {
  scroll-margin-top: 1.25rem;
  overflow: hidden;
  border: 1px solid #e1ebf5;
  border-radius: 1.1rem;
  background: #fff;
}

.survey-review-question--correct {
  border-color: #cfe8d8;
}

.survey-review-question--wrong {
  border-color: #f1c7b7;
}

.survey-review-question__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid #e5edf5;
  background: #f7fafc;
}

.survey-review-question__number {
  margin-bottom: 0.35rem;
  color: #315f86;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.survey-review-question__title {
  margin-bottom: 0.45rem;
  color: #223449;
  font-weight: 800;
}

.survey-review-question__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.survey-review-question__meta span {
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  color: #5d7182;
  background: #eef4f9;
  font-size: 0.76rem;
  font-weight: 750;
}

.survey-review-options {
  display: grid;
  gap: 0.55rem;
  padding: 1rem 1.15rem;
}

.survey-review-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid #e2e9f1;
  border-radius: 0.85rem;
  background: #fff;
}

.survey-review-option--correct,
.survey-review-option--selected-correct {
  border-color: #8fd0a7;
  background: #effaf3;
}

.survey-review-option--selected-wrong {
  border-color: #ee9c7d;
  background: #fff3ee;
}

.survey-review-option__marker {
  width: 1.45rem;
  height: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px;
  color: #8aa0b2;
  background: #eef4f8;
  font-size: 0.86rem;
}

.survey-review-option--correct .survey-review-option__marker,
.survey-review-option--selected-correct .survey-review-option__marker {
  color: #fff;
  background: #43a768;
}

.survey-review-option--selected-wrong .survey-review-option__marker {
  color: #fff;
  background: #d95f3d;
}

.survey-review-option__text {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 650;
}

.survey-review-option__badges {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
}

.survey-review-topic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 1.15rem 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid #dce8f4;
  border-radius: 0.9rem;
  background: #f7fbff;
}

@media (max-width: 991.98px) {
  .survey-result-summary {
    grid-template-columns: 1fr;
  }

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

  .survey-review-sidebar {
    position: static;
    order: -1;
  }
}

@media (max-width: 575.98px) {
  .survey-result-hero,
  .survey-result-topic,
  .survey-result-success {
    align-items: stretch;
    flex-direction: column;
  }

  .survey-result-score {
    text-align: left;
  }

  .survey-review-hero,
  .survey-review-question__header,
  .survey-review-topic {
    align-items: stretch;
    flex-direction: column;
  }

  .survey-review-score {
    text-align: left;
  }

  .survey-review-option {
    align-items: flex-start;
  }
}

@media (max-width: 991.98px) {
  .survey-take-layout {
    grid-template-columns: 1fr;
  }

  .survey-take-sidebar {
    position: static;
    order: -1;
  }

  .survey-nav-grid {
    grid-template-columns: repeat(auto-fit, minmax(2.15rem, 1fr));
  }
}

@media (max-width: 575.98px) {
  .survey-submit-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .survey-submit-panel .btn {
    width: 100%;
  }
}

.survey-edit-toolbar {
  gap: 1rem;
  flex-wrap: wrap;
}

.survey-meta-form {
  min-width: min(100%, 520px);
}

.survey-add-btn {
  min-width: 165px;
}

.survey-add-form {
  border-radius: 0.9rem;
  overflow: hidden;
}

.survey-add-form .card-body {
  background: linear-gradient(135deg, #edf6ff 0%, #ffffff 80%);
}

.survey-answer-block {
  padding: 0.85rem;
  border: 1px solid #dce7f4;
  border-radius: 0.8rem;
  background: #fdfefe;
}

.survey-edit-question-card {
  border-radius: 0.9rem;
  overflow: hidden;
  border-color: #e2edf7 !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 0.35rem 1rem rgba(28, 64, 96, 0.045);
}

.survey-question-meta {
  display: inline-flex;
  align-items: center;
  margin-top: 0.32rem;
  padding: 0.18rem 0.52rem;
  border: 1px solid #dbe8f4;
  border-radius: 999px;
  background: #f5f9fd;
  color: #526c82 !important;
  font-size: 0.78rem;
  font-weight: 700;
}

.survey-question-sort-btn {
  --bs-btn-padding-y: 0.18rem;
  --bs-btn-padding-x: 0.55rem;
  --bs-btn-font-size: 0.78rem;
  border-color: #d8e4ef;
  color: #5b7082;
  background: #fbfdff;
}

.survey-question-sort-btn:hover {
  border-color: #b9d2e8;
  color: #2a638f;
  background: #f2f8fd;
}

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

.survey-question-meta + .survey-tag-list {
  margin-top: 0.2rem;
}

.tag-admin-form {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) auto;
  gap: 0.3rem;
  min-width: min(100%, 14rem);
}

.tag-admin-table {
  font-size: 0.84rem;
}

.tag-admin-table > :not(caption) > * > * {
  padding: 0.28rem 0.55rem;
}

.tag-admin-table thead th {
  color: #5d7080;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tag-admin-table__name {
  min-width: 11rem;
}

.tag-admin-table__actions {
  width: 18rem;
}

.tag-admin-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.13rem 0.45rem;
  border: 1px solid #d6e6f3;
  border-radius: 999px;
  background: #f5f9fd;
  color: #365f7d;
  font-size: 0.76rem;
  font-weight: 700;
}

.tag-admin-input {
  min-height: 1.8rem;
  padding-block: 0.12rem;
  font-size: 0.78rem;
}

.tag-admin-btn {
  --bs-btn-padding-y: 0.12rem;
  --bs-btn-padding-x: 0.4rem;
  --bs-btn-font-size: 0.74rem;
  min-height: 1.8rem;
}

.phishing-scenario-card {
  position: relative;
  padding: 0.8rem;
  border: 1px solid #dfeaf4;
  border-radius: 0.9rem;
  background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
}

.phishing-card-dismiss {
  position: absolute;
  top: -0.42rem;
  right: -0.42rem;
  margin: 0;
  z-index: 2;
}

.phishing-danger-circle {
  width: 1.45rem;
  height: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: #d83a3a;
  box-shadow: 0 0.35rem 0.9rem rgba(216, 58, 58, 0.26);
  font-size: 0.65rem;
  line-height: 1;
  transition: transform 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
}

.phishing-danger-circle:hover {
  color: #fff;
  background: #b92525;
  transform: translateY(-1px);
  box-shadow: 0 0.45rem 1rem rgba(185, 37, 37, 0.32);
}

.phishing-danger-circle--inline {
  width: 1.55rem;
  height: 1.55rem;
  border-width: 1px;
  vertical-align: middle;
}

.phishing-actions-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.28rem;
  white-space: nowrap;
}

.phishing-actions-row form {
  display: inline-flex;
  margin: 0;
}

.phishing-icon-action {
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.75rem;
  min-height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0.55rem;
  font-size: 0.78rem;
}

.phishing-icon-action--secondary {
  color: #4f6475;
  background: #f7fafc;
  border-color: #d9e4ed;
}

.phishing-icon-action--secondary:hover {
  color: #245d8f;
  background: #eef6fb;
  border-color: #bfd6e8;
}

.survey-inline-editor {
  border: 1px solid #e4ebf4;
  border-radius: 0.8rem;
  background: #fafcff;
}

.survey-answer-item .input-group-text {
  background-color: #f3f7fc;
}

.course-page .card {
  border-radius: 1rem;
}

.course-card {
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(45, 120, 183, 0.08), transparent 12rem),
    linear-gradient(160deg, #ffffff, #f9fcff);
}

.course-card--completed {
  background:
    radial-gradient(circle at top right, rgba(75, 118, 94, 0.12), transparent 12rem),
    linear-gradient(160deg, #f3f7f5, #e9f0ed);
  border-color: rgba(96, 124, 111, 0.16) !important;
  box-shadow: 0 0.45rem 1.2rem rgba(50, 72, 60, 0.08) !important;
}

.course-card--completed h5,
.course-card--completed .course-card__eyebrow {
  color: #395444;
}

.course-card--completed .text-muted {
  color: #69776f !important;
}

.course-card__result {
  min-width: 4.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  color: #24553d;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(70, 132, 96, 0.22);
  font-size: 1rem;
  font-weight: 850;
  box-shadow: 0 0.35rem 0.9rem rgba(35, 83, 60, 0.08);
}

.course-card__eyebrow {
  margin-bottom: 0.35rem;
  color: #2d78b7;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.course-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1rem;
}

.course-card__stats span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.62rem;
  border-radius: 999px;
  color: #315067;
  background: #eef6fb;
  font-size: 0.82rem;
  font-weight: 650;
}

.course-survey-browser {
  padding: 0.9rem;
  border: 1px solid #e1ebf4;
  border-radius: 1rem;
  background:
    radial-gradient(circle at top right, rgba(45, 120, 183, 0.06), transparent 12rem),
    #fbfdff;
}

.course-survey-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-height: 7.2rem;
  overflow: auto;
}

.course-survey-tag-filter {
  border: 1px solid #d8e6f2;
  cursor: pointer;
  transition: color 0.14s ease, background-color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.course-survey-tag-filter:hover,
.course-survey-tag-filter--active {
  color: #ffffff;
  background: #2d78b7;
  border-color: #2d78b7;
  transform: translateY(-1px);
}

.course-survey-option-list {
  display: grid;
  gap: 0.65rem;
}

.course-survey-option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem;
  border: 1px solid #dfeaf4;
  border-radius: 0.9rem;
  background: #ffffff;
}

.course-hero {
  padding: 1.4rem;
  border-radius: 1.2rem;
  color: #172638;
  background:
    radial-gradient(circle at 82% 15%, rgba(45, 120, 183, 0.16), transparent 15rem),
    linear-gradient(135deg, #ffffff, #eef6fb);
  box-shadow: 0 0.8rem 2.2rem rgba(31, 76, 110, 0.08);
}

.course-hero__text {
  max-width: 58rem;
  color: #5d6c79;
}

.course-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.course-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.68rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #34495d;
  font-size: 0.86rem;
  font-weight: 650;
}

.course-material-list,
.course-survey-list {
  display: grid;
  gap: 0.65rem;
}

.course-material {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid #dfeaf4;
  border-radius: 0.9rem;
  color: #20384d;
  background: #fbfdff;
  text-decoration: none;
  transition: border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

.course-material:hover {
  color: #1d5f92;
  border-color: #bed8eb;
  transform: translateY(-1px);
  box-shadow: 0 0.65rem 1.35rem rgba(33, 82, 122, 0.08);
}

.course-material__icon {
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 0.75rem;
  color: #2d78b7;
  background: #eaf3fb;
}

.course-material small {
  display: block;
  margin-top: 0.18rem;
  color: #6d7985;
}

.course-survey-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem;
  border: 1px solid #dfeaf4;
  border-radius: 0.9rem;
  background: #ffffff;
}

.course-survey-item--locked {
  color: #7a8792;
  background: #f5f8fb;
}

.course-survey-item__number {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #2d78b7;
  background: #eaf3fb;
  font-weight: 800;
}

.course-lock {
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #8a97a3;
  background: #e9eef3;
}

@media (max-width: 767.98px) {
  .survey-meta-form {
    min-width: 100%;
  }

  .survey-add-btn {
    width: 100%;
  }
}

.podium-card {
  border-radius: 0.9rem;
  overflow: hidden;
}

.podium-medal {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.podium-percent {
  font-size: 1.05rem;
  font-weight: 700;
}

.podium-gold .card-body {
  background: linear-gradient(135deg, #fff7dd 0%, #fff2bd 100%);
}

.podium-gold .podium-medal {
  background: #f4cd55;
  color: #5f4300;
}

.podium-silver .card-body {
  background: linear-gradient(135deg, #f6f8fb 0%, #edf1f6 100%);
}

.podium-silver .podium-medal {
  background: #ced5de;
  color: #394655;
}

.podium-bronze .card-body {
  background: linear-gradient(135deg, #f8ece4 0%, #efd8c8 100%);
}

.podium-bronze .podium-medal {
  background: #c78b63;
  color: #fff;
}

.results-switcher {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid rgba(45, 120, 183, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 22px rgba(35, 78, 115, 0.08);
}

.results-switcher .nav-link {
  border-radius: 999px;
  color: #52697d;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.48rem 1rem;
}

.results-switcher .nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, #245d8f, #2d78b7);
  box-shadow: 0 8px 18px rgba(45, 120, 183, 0.22);
}

/* Unified page actions. Navbar and other layout controls are intentionally excluded. */
body > .container.mt-4 {
  --action-primary: #2d78b7;
  --action-primary-dark: #245d8f;
  --action-primary-soft: #e8f2fb;
  --action-success: #2f946d;
  --action-success-dark: #237554;
  --action-success-soft: #e6f5ee;
  --action-warning: #d99b21;
  --action-warning-dark: #b97808;
  --action-warning-soft: #fff4d8;
  --action-danger: #d9535f;
  --action-danger-dark: #b83a46;
  --action-danger-soft: #fdebed;
}

body > .container.mt-4 .btn:not(.btn-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.55rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  border-width: 1px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  box-shadow: 0 7px 16px rgba(35, 78, 115, 0.08);
  transition:
    color 0.16s ease,
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

body > .container.mt-4 .btn:not(.btn-link):hover:not(:disabled):not(.disabled) {
  transform: translateY(-1px);
}

body > .container.mt-4 .btn:not(.btn-link):active:not(:disabled):not(.disabled) {
  transform: translateY(0);
  box-shadow: 0 3px 9px rgba(35, 78, 115, 0.12);
}

body > .container.mt-4 .btn-sm:not(.btn-link) {
  min-height: 2.1rem;
  padding: 0.38rem 0.78rem;
  font-size: 0.82rem;
}

body > .container.mt-4 .btn-lg:not(.btn-link) {
  min-height: 3rem;
  padding: 0.7rem 1.35rem;
}

body > .container.mt-4 .btn-primary {
  border-color: var(--action-primary);
  color: #fff;
  background: linear-gradient(135deg, var(--action-primary-dark), var(--action-primary));
  box-shadow: 0 8px 18px rgba(45, 120, 183, 0.22);
}

body > .container.mt-4 .btn-primary:hover,
body > .container.mt-4 .btn-primary:focus,
body > .container.mt-4 .btn-primary:active,
body > .container.mt-4 .btn-primary.active {
  border-color: var(--action-primary-dark);
  color: #fff;
  background: linear-gradient(135deg, #1e4f7a, var(--action-primary-dark));
}

body > .container.mt-4 .btn-outline-primary {
  border-color: rgba(45, 120, 183, 0.3);
  color: var(--action-primary-dark);
  background: var(--action-primary-soft);
}

body > .container.mt-4 .btn-outline-primary:hover,
body > .container.mt-4 .btn-outline-primary:focus,
body > .container.mt-4 .btn-outline-primary:active,
body > .container.mt-4 .btn-outline-primary.active {
  border-color: var(--action-primary);
  color: #fff;
  background: linear-gradient(135deg, var(--action-primary-dark), var(--action-primary));
  box-shadow: 0 8px 18px rgba(45, 120, 183, 0.2);
}

body > .container.mt-4 .btn-success {
  border-color: var(--action-success);
  color: #fff;
  background: linear-gradient(135deg, var(--action-success-dark), var(--action-success));
  box-shadow: 0 8px 18px rgba(47, 148, 109, 0.2);
}

body > .container.mt-4 .btn-success:hover,
body > .container.mt-4 .btn-success:focus,
body > .container.mt-4 .btn-success:active,
body > .container.mt-4 .btn-success.active {
  border-color: var(--action-success-dark);
  color: #fff;
  background: linear-gradient(135deg, #1b6144, var(--action-success-dark));
}

body > .container.mt-4 .btn-outline-success {
  border-color: rgba(47, 148, 109, 0.3);
  color: var(--action-success-dark);
  background: var(--action-success-soft);
}

body > .container.mt-4 .btn-outline-success:hover,
body > .container.mt-4 .btn-outline-success:focus,
body > .container.mt-4 .btn-outline-success:active,
body > .container.mt-4 .btn-outline-success.active {
  border-color: var(--action-success);
  color: #fff;
  background: linear-gradient(135deg, var(--action-success-dark), var(--action-success));
  box-shadow: 0 8px 18px rgba(47, 148, 109, 0.18);
}

body > .container.mt-4 .btn-secondary {
  border-color: var(--action-warning);
  color: #fff;
  background: linear-gradient(135deg, var(--action-warning-dark), var(--action-warning));
  box-shadow: 0 8px 18px rgba(217, 155, 33, 0.2);
}

body > .container.mt-4 .btn-secondary:hover,
body > .container.mt-4 .btn-secondary:focus,
body > .container.mt-4 .btn-secondary:active,
body > .container.mt-4 .btn-secondary.active {
  border-color: var(--action-warning-dark);
  color: #fff;
  background: linear-gradient(135deg, #9d6505, var(--action-warning-dark));
}

body > .container.mt-4 .btn-outline-secondary {
  border-color: rgba(217, 155, 33, 0.34);
  color: #8b5b08;
  background: var(--action-warning-soft);
}

body > .container.mt-4 .btn-outline-secondary:hover,
body > .container.mt-4 .btn-outline-secondary:focus,
body > .container.mt-4 .btn-outline-secondary:active,
body > .container.mt-4 .btn-outline-secondary.active {
  border-color: var(--action-warning);
  color: #fff;
  background: linear-gradient(135deg, var(--action-warning-dark), var(--action-warning));
  box-shadow: 0 8px 18px rgba(217, 155, 33, 0.18);
}

body > .container.mt-4 .btn-danger {
  border-color: var(--action-danger);
  color: #fff;
  background: linear-gradient(135deg, var(--action-danger-dark), var(--action-danger));
  box-shadow: 0 8px 18px rgba(217, 83, 95, 0.2);
}

body > .container.mt-4 .btn-danger:hover,
body > .container.mt-4 .btn-danger:focus,
body > .container.mt-4 .btn-danger:active,
body > .container.mt-4 .btn-danger.active {
  border-color: var(--action-danger-dark);
  color: #fff;
  background: linear-gradient(135deg, #9e2d37, var(--action-danger-dark));
}

body > .container.mt-4 .btn-outline-danger {
  border-color: rgba(217, 83, 95, 0.3);
  color: var(--action-danger-dark);
  background: var(--action-danger-soft);
}

body > .container.mt-4 .btn-outline-danger:hover,
body > .container.mt-4 .btn-outline-danger:focus,
body > .container.mt-4 .btn-outline-danger:active,
body > .container.mt-4 .btn-outline-danger.active {
  border-color: var(--action-danger);
  color: #fff;
  background: linear-gradient(135deg, var(--action-danger-dark), var(--action-danger));
  box-shadow: 0 8px 18px rgba(217, 83, 95, 0.18);
}

body > .container.mt-4 .btn-warning,
body > .container.mt-4 .btn-outline-warning {
  border-color: rgba(217, 155, 33, 0.34);
  color: #714906;
  background: var(--action-warning-soft);
}

body > .container.mt-4 .btn-warning:hover,
body > .container.mt-4 .btn-warning:focus,
body > .container.mt-4 .btn-warning:active,
body > .container.mt-4 .btn-outline-warning:hover,
body > .container.mt-4 .btn-outline-warning:focus,
body > .container.mt-4 .btn-outline-warning:active {
  border-color: var(--action-warning);
  color: #fff;
  background: linear-gradient(135deg, var(--action-warning-dark), var(--action-warning));
}

body > .container.mt-4 .btn:disabled,
body > .container.mt-4 .btn.disabled {
  transform: none;
  box-shadow: none;
  opacity: 0.5;
}

body > .container.mt-4 .btn-group {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid rgba(45, 120, 183, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 22px rgba(35, 78, 115, 0.08);
}

body > .container.mt-4 .btn-group > .btn:not(.btn-link) {
  margin-left: 0;
  border-radius: 999px;
  box-shadow: none;
}

body > .container.mt-4 .input-group > .btn:not(.btn-link) {
  border-radius: 0 999px 999px 0;
}

body > .container.mt-4 .survey-icon-btn,
body > .container.mt-4 .phishing-icon-action,
body > .container.mt-4 .tag-admin-btn {
  min-width: 2.1rem;
  width: 2.1rem;
  padding-inline: 0;
}

@media (prefers-reduced-motion: reduce) {
  body > .container.mt-4 .btn:not(.btn-link) {
    transition: none;
  }
}

.results-group-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #52697d;
  font-size: 0.84rem;
}

.results-group-label .bi {
  color: #2d78b7;
}

.results-department-card {
  background:
    radial-gradient(circle at top right, rgba(88, 169, 120, 0.12), transparent 13rem),
    linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 249, 0.96));
}

.profile-shell {
  overflow: hidden;
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(219, 231, 243, 0.95);
  box-shadow: 0 20px 55px rgba(4, 20, 38, 0.14);
  backdrop-filter: blur(10px);
}

.profile-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.45rem 1.6rem;
  color: #fff;
  background:
    radial-gradient(circle at 12% 20%, rgba(122, 193, 255, 0.25), transparent 25%),
    linear-gradient(140deg, #061323 0%, #123a68 100%);
}

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.profile-heading h3 {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.profile-eyebrow {
  margin-bottom: 0.2rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.profile-subtext {
  margin-top: 0.15rem;
  opacity: 0.86;
  font-size: 0.92rem;
}

.profile-role-badge {
  margin-left: auto;
  padding: 0.38rem 0.78rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.36);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.profile-body {
  padding: 1.5rem;
}

.profile-info-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #f8fbff;
  border: 1px solid #e0ebf6;
  border-radius: 0.95rem;
  padding: 1rem;
  height: 100%;
}

.profile-info-icon {
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.85rem;
  color: #0d5f9c;
  background: #eaf5ff;
  flex: 0 0 auto;
}

.profile-info-label {
  color: #667586;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-info-value {
  margin-top: 0.18rem;
  color: #223548;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

@media (max-width: 767.98px) {
  .profile-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-role-badge {
    margin-left: 0;
  }
}

.gophish-stat-card {
  height: 100%;
  padding: 1.15rem 1.25rem;
  border: 1px solid #e5edf6;
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 92% 18%, rgba(35, 117, 199, 0.08), transparent 26%),
    #ffffff;
  box-shadow: 0 10px 28px rgba(22, 47, 78, 0.07);
}

.gophish-stat-card--accent {
  background:
    radial-gradient(circle at 92% 18%, rgba(54, 166, 122, 0.14), transparent 28%),
    linear-gradient(145deg, #ffffff 0%, #f3fbf8 100%);
}

.gophish-stat-card__label {
  color: #667586;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gophish-stat-card__value {
  margin-top: 0.2rem;
  color: #14263a;
  font-size: 2rem;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.gophish-stat-card__hint {
  color: #7a8796;
  font-size: 0.84rem;
}

.gophish-campaigns-card {
  border-radius: 1.2rem;
  overflow: hidden;
}

.gophish-campaign-table thead th {
  color: #607083;
  background: #f7faff;
  border-bottom: 1px solid #e2ebf5;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gophish-campaign-table tbody td {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-color: #edf2f7;
}

.gophish-campaign-name {
  color: #182f47;
  font-weight: 800;
}

.gophish-campaign-url {
  margin-top: 0.15rem;
  color: #7b8796;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.gophish-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid #dce7f2;
  border-radius: 999px;
  color: #30526f;
  background: #f7fbff;
  font-size: 0.78rem;
  font-weight: 750;
}

.gophish-resource-line {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #52657a;
  font-size: 0.84rem;
}

.gophish-resource-line .bi {
  color: #2c6ca7;
}

.gophish-metric {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  min-height: 2rem;
  padding: 0.25rem 0.55rem;
  border-radius: 0.75rem;
  color: #1d3550;
  background: #f2f7fc;
  font-weight: 800;
}

.gophish-metric--accent {
  color: #0d5f9c;
  background: #eaf5ff;
}

.regular-tests-page,
.regular-test-edit-page {
  padding-bottom: 2rem;
}

.knowledge-page-header {
  --knowledge-accent: #386fc2;
  --knowledge-accent-deep: #285795;
  --knowledge-soft: #e5f0ff;
  --knowledge-glow: rgba(67, 130, 219, 0.2);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(120, 148, 176, 0.16);
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 94% 12%, var(--knowledge-glow), transparent 32%),
    radial-gradient(circle at 78% 115%, var(--knowledge-soft), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 253, 0.96));
  padding: 1.35rem 1.5rem;
  box-shadow: 0 0.7rem 1.8rem rgba(35, 72, 104, 0.07);
}

.knowledge-page-header--surveys {
  --knowledge-accent: #4267cf;
  --knowledge-accent-deep: #3152ad;
  --knowledge-soft: #e7ebff;
  --knowledge-glow: rgba(85, 112, 218, 0.2);
}

.knowledge-page-header--courses {
  --knowledge-accent: #258f78;
  --knowledge-accent-deep: #1d705f;
  --knowledge-soft: #ddf5ed;
  --knowledge-glow: rgba(43, 161, 133, 0.2);
}

.knowledge-page-header--regular {
  --knowledge-accent: #7557c7;
  --knowledge-accent-deep: #5d42a6;
  --knowledge-soft: #eee8ff;
  --knowledge-glow: rgba(124, 91, 206, 0.2);
}

.knowledge-page-header--phishing {
  --knowledge-accent: #c45c4f;
  --knowledge-accent-deep: #9f453b;
  --knowledge-soft: #ffebe6;
  --knowledge-glow: rgba(211, 98, 79, 0.2);
}

.knowledge-page-header--results {
  --knowledge-accent: #b98420;
  --knowledge-accent-deep: #8d6417;
  --knowledge-soft: #fff2ce;
  --knowledge-glow: rgba(213, 161, 54, 0.22);
}

.knowledge-page-header--statistics {
  --knowledge-accent: #287e9b;
  --knowledge-accent-deep: #1d6078;
  --knowledge-soft: #dff3f8;
  --knowledge-glow: rgba(45, 143, 174, 0.2);
}

.knowledge-page-header--question-bank {
  --knowledge-accent: #5e67bd;
  --knowledge-accent-deep: #454d96;
  --knowledge-soft: #e9ebff;
  --knowledge-glow: rgba(94, 103, 189, 0.2);
}

.knowledge-page-header--tags {
  --knowledge-accent: #218aa0;
  --knowledge-accent-deep: #176879;
  --knowledge-soft: #ddf4f7;
  --knowledge-glow: rgba(33, 138, 160, 0.2);
}

.knowledge-page-header--departments {
  --knowledge-accent: #7560b6;
  --knowledge-accent-deep: #58458f;
  --knowledge-soft: #eee9ff;
  --knowledge-glow: rgba(117, 96, 182, 0.2);
}

.knowledge-page-header--users {
  --knowledge-accent: #3477aa;
  --knowledge-accent-deep: #265b85;
  --knowledge-soft: #e2f0fb;
  --knowledge-glow: rgba(52, 119, 170, 0.2);
}

.knowledge-page-header--integrations {
  --knowledge-accent: #b56e2d;
  --knowledge-accent-deep: #8e5220;
  --knowledge-soft: #ffead7;
  --knowledge-glow: rgba(181, 110, 45, 0.2);
}

.knowledge-page-header--reports {
  --knowledge-accent: #2d8974;
  --knowledge-accent-deep: #216856;
  --knowledge-soft: #ddf4ed;
  --knowledge-glow: rgba(45, 137, 116, 0.2);
}

.knowledge-page-header--home-admin {
  --knowledge-accent: #326b9a;
  --knowledge-accent-deep: #244f74;
  --knowledge-soft: #e1eef9;
  --knowledge-glow: rgba(50, 107, 154, 0.22);
}

.knowledge-page-header--home-user {
  --knowledge-accent: #28846e;
  --knowledge-accent-deep: #1d6553;
  --knowledge-soft: #def3ec;
  --knowledge-glow: rgba(40, 132, 110, 0.22);
}

.knowledge-page-header::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.25rem;
  background: linear-gradient(180deg, var(--knowledge-accent-deep), var(--knowledge-accent));
  content: "";
}

.knowledge-page-header__main {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.knowledge-page-header__icon {
  display: grid;
  flex: 0 0 auto;
  width: 3.1rem;
  height: 3.1rem;
  place-items: center;
  border-radius: 1rem;
  background: linear-gradient(145deg, #fff, var(--knowledge-soft));
  color: var(--knowledge-accent);
  font-size: 1.35rem;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--knowledge-accent) 12%, transparent),
    0 0.5rem 1.2rem color-mix(in srgb, var(--knowledge-accent) 12%, transparent);
}

.knowledge-page-header__eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.18rem;
  border-radius: 999px;
  background: var(--knowledge-soft);
  color: var(--knowledge-accent-deep);
  padding: 0.18rem 0.52rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.knowledge-page-header__title {
  margin: 0;
  color: #173a59;
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.knowledge-page-header__text {
  max-width: 47rem;
  margin: 0.3rem 0 0;
  color: #60758a;
  font-size: 0.92rem;
  line-height: 1.5;
}

.knowledge-page-header__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.knowledge-page-header__actions form {
  display: flex;
  margin: 0;
}

.knowledge-page-header__action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 0.9rem;
  background: var(--knowledge-accent);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  padding: 0.72rem 1rem;
  font-size: 0.88rem;
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 0.55rem 1.2rem color-mix(in srgb, var(--knowledge-accent) 24%, transparent);
  transition: transform 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.knowledge-page-header__action:hover {
  transform: translateY(-1px);
  background: var(--knowledge-accent-deep);
  color: #fff;
  box-shadow: 0 0.7rem 1.4rem color-mix(in srgb, var(--knowledge-accent) 30%, transparent);
}

.knowledge-page-header__action--secondary {
  border: 1px solid color-mix(in srgb, var(--knowledge-accent) 32%, transparent);
  background: rgba(255, 255, 255, 0.72);
  color: var(--knowledge-accent-deep);
  box-shadow: none;
}

.knowledge-page-header__action--secondary:hover {
  border-color: var(--knowledge-accent);
  background: var(--knowledge-soft);
  color: var(--knowledge-accent-deep);
  box-shadow: none;
}

.regular-test-card,
.regular-test-user-card,
.empty-state-card {
  display: block;
  height: 100%;
  border: 1px solid rgba(120, 148, 176, 0.18);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.94);
  padding: 1.25rem;
  color: inherit;
  text-decoration: none;
}

.regular-test-user-card {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.regular-test-user-card:hover {
  transform: translateY(-2px);
  border-color: rgba(45, 108, 167, 0.28);
  color: inherit;
}

.regular-test-user-card--passed {
  background: #f4f7f9;
  opacity: 0.84;
}

.regular-test-user-card--overdue {
  border-color: rgba(195, 95, 65, 0.2);
  background: #fffaf7;
}

.regular-test-user-card--overdue .regular-test-user-card__result {
  color: #a14d32;
  background: #fff0e9;
}

.regular-test-featured-wrap {
  max-width: 58rem;
  margin: 0 auto 2rem;
}

.regular-test-featured {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 2rem;
  overflow: hidden;
  border: 1px solid rgba(45, 108, 167, 0.22);
  border-radius: 1.75rem;
  background:
    radial-gradient(circle at 92% 12%, rgba(113, 190, 255, 0.3), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f3f9ff 58%, #e9f5ff 100%);
  padding: 2rem;
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.regular-test-featured::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.35rem;
  background: linear-gradient(180deg, #2d6ca7, #56b6e9);
  content: "";
}

.regular-test-featured:hover {
  transform: translateY(-3px);
  border-color: rgba(45, 108, 167, 0.38);
  box-shadow: 0 1rem 2.5rem rgba(37, 88, 132, 0.16) !important;
  color: inherit;
}

.regular-test-featured__content {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.regular-test-featured__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.15rem;
  border-radius: 999px;
  background: #e4f5ec;
  color: #20734b;
  padding: 0.38rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 800;
}

.regular-test-featured__pulse {
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 50%;
  background: #2cab70;
  box-shadow: 0 0 0 0.28rem rgba(44, 171, 112, 0.14);
}

.regular-test-featured h3 {
  max-width: 38rem;
  margin: 0.4rem 0 0.65rem;
  color: #173a59;
  font-weight: 800;
}

.regular-test-featured p {
  margin-bottom: 1.25rem;
  color: #60758a;
}

.regular-test-featured__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
  color: #365a78;
  font-size: 0.88rem;
  font-weight: 650;
}

.regular-test-featured__metrics span {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.regular-test-featured__metrics .bi {
  color: #2d6ca7;
}

.regular-test-featured__action {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: center;
  gap: 0.65rem;
  border-radius: 1rem;
  background: #2d6ca7;
  color: #fff;
  padding: 0.85rem 1.15rem;
  font-size: 0.9rem;
  font-weight: 800;
  box-shadow: 0 0.6rem 1.4rem rgba(45, 108, 167, 0.22);
}

.regular-test-list-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
}

.regular-test-list-heading > span {
  color: #718298;
  font-size: 0.82rem;
  font-weight: 650;
}

.regular-test-card__eyebrow {
  color: #2d6ca7;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.regular-test-status-panel {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 8.4rem;
  min-height: 3.25rem;
  padding: 0.55rem 0.75rem;
  border-radius: 1rem;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 10px 22px rgba(31, 75, 112, 0.14);
}

.regular-test-status-panel span {
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.1;
}

.regular-test-status-panel small {
  margin-top: 0.18rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
  font-weight: 600;
}

.regular-test-status-panel--active {
  background: linear-gradient(135deg, #1d9a62 0%, #39c681 52%, #8fe2b3 100%);
}

.regular-test-status-panel--stopped {
  background: linear-gradient(135deg, #a83a3a 0%, #d85b55 54%, #f09b83 100%);
}

.regular-test-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.85rem 0;
}

.regular-test-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  color: #52657a;
  font-size: 0.86rem;
}

.regular-test-metrics span {
  border-radius: 999px;
  background: #f2f7fc;
  padding: 0.28rem 0.65rem;
}

.regular-test-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1rem;
}

.regular-test-user-card__result {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #edf6ff, #f7fbff);
  color: #1f5e95;
  padding: 0.7rem;
  text-align: center;
}

.regular-test-user-card__result strong {
  font-size: 1.25rem;
}

.regular-test-user-card__result span {
  color: #63758a;
  font-size: 0.76rem;
}

.regular-test-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.regular-test-form-grid__wide {
  grid-column: 1 / -1;
}

.regular-test-table th,
.regular-test-table td {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.regular-test-assignment-list {
  display: grid;
  gap: 0.55rem;
}

.regular-test-assignment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid #e5eef7;
  border-radius: 0.9rem;
  background: #f8fbff;
  padding: 0.65rem 0.75rem;
}

.regular-test-question-capacity {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  border: 1px solid #dce7f2;
  border-radius: 0.9rem;
  background: #f8fbff;
  color: #30526f;
  padding: 0.55rem 0.75rem;
  font-size: 0.86rem;
}

.regular-test-question-capacity--ok {
  border-color: #cfe8db;
  background: #f3fbf7;
  color: #246243;
}

.regular-test-question-capacity--warn {
  border-color: #f1d6c4;
  background: #fff8f3;
  color: #93501f;
}

.empty-state-card {
  color: #52657a;
  text-align: center;
}

.report-campaign-row {
  --bs-table-hover-bg: #f7fbff;
}

.report-campaign-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 0.75rem;
  background: #eaf3fc;
  color: #2d6ca7;
  font-size: 1rem;
}

.report-campaign-toggle .bi {
  display: inline-block;
  transition: transform 0.18s ease;
}

.report-campaign-toggle[aria-expanded="true"] .bi {
  transform: rotate(180deg);
}

.report-campaign-details-row > td {
  padding: 0 !important;
  border-top: 0;
  background: #f7fafc;
}

.report-campaign-details {
  margin: 0.25rem 1rem 1rem;
  overflow: hidden;
  border: 1px solid #dfe9f2;
  border-radius: 0.9rem;
  background: #fff;
}

.report-campaign-details thead th {
  border-bottom-color: #dfe9f2;
  background: #eef5fb;
  color: #526a80;
  font-size: 0.78rem;
  font-weight: 750;
}

.report-campaign-details td {
  padding: 0.65rem 0.75rem;
}

@media (max-width: 768px) {
  .knowledge-page-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 1.15rem;
  }

  .knowledge-page-header__main {
    align-items: flex-start;
  }

  .knowledge-page-header__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    font-size: 1.15rem;
  }

  .knowledge-page-header__actions,
  .knowledge-page-header__actions form,
  .knowledge-page-header__action {
    justify-content: center;
    width: 100%;
  }

  .regular-test-form-grid {
    grid-template-columns: 1fr;
  }

  .regular-test-user-card {
    flex-direction: column;
  }

  .regular-test-featured {
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
  }

  .regular-test-featured__action {
    align-self: stretch;
    justify-content: center;
  }
}