.tile-card[data-v-764378cf] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: 192px;
  padding: 24px;
  background: white;
  border: 1px solid rgb(241, 245, 249);
  border-radius: 16px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  overflow: visible;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tile-card[data-v-764378cf]:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border-color: rgb(254, 242, 242);
  transform: translateY(-4px);
}
.tile-card[data-v-764378cf]:focus-visible {
  outline: 2px solid rgb(225, 29, 72);
  outline-offset: 2px;
}

/* Notification Badge */
.tile-badge[data-v-764378cf] {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 32px;
  height: 24px;
  padding: 0 10px;
  background-color: var(--q-primary, #e11d48);
  color: white;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px !important;
  z-index: 50;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.5),
    0 2px 4px -2px rgba(0, 0, 0, 0.5);
  animation: badge-zoom-in-764378cf 0.3s ease-out;
}
@keyframes badge-zoom-in-764378cf {
from {
    opacity: 0;
    transform: scale(0.5);
}
to {
    opacity: 1;
    transform: scale(1);
}
}

/* Background Image */
.tile-image-container[data-v-764378cf] {
  position: absolute;
  inset: 0;
  height: 50%;
  overflow: hidden;
}
.tile-image-gradient[data-v-764378cf] {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, white, transparent, transparent);
  z-index: 10;
}
.tile-image[data-v-764378cf] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.tile-card:hover .tile-image[data-v-764378cf] {
  transform: scale(1.1);
}

/* Status Badge */
.tile-status-badge[data-v-764378cf] {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 10;
}
.status-completed[data-v-764378cf] {
  background: rgb(220, 252, 231);
  color: rgb(21, 128, 61);
  border: 1px solid rgb(187, 247, 208);
}
.status-failed[data-v-764378cf] {
  background: rgb(254, 226, 226);
  color: rgb(185, 28, 28);
  border: 1px solid rgb(254, 202, 202);
}
.status-in_progress[data-v-764378cf] {
  background: rgb(239, 246, 255);
  color: rgb(37, 99, 235);
  border: 1px solid rgb(191, 219, 254);
}
.status-not_started[data-v-764378cf] {
  background: rgb(241, 245, 249);
  color: rgb(100, 116, 139);
  border: 1px solid rgb(226, 232, 240);
}
.status-assigned[data-v-764378cf] {
  background: rgb(238, 242, 255);
  color: rgb(79, 70, 229);
  border: 1px solid rgb(199, 210, 254);
}
.status-pending[data-v-764378cf] {
  background: rgb(254, 243, 199);
  color: rgb(217, 119, 6);
  border: 1px solid rgb(253, 230, 138);
}

/* Icon Row */
.tile-icon-row[data-v-764378cf] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px;
  position: relative;
  z-index: 10;
}
.tile-icon-row.with-image[data-v-764378cf] {
  margin-top: auto;
  padding-top: 64px;
}
.tile-icon-box[data-v-764378cf] {
  padding: 12px;
  background: color-mix(in srgb, var(--q-primary, #e11d48) 8%, white);
  color: var(--q-primary, #e11d48);
  border-radius: 12px;
  transition: all 0.2s ease;
}
.tile-icon-box .tile-icon[data-v-764378cf],
.tile-icon-box[data-v-764378cf] .q-icon {
  color: var(--q-primary, #e11d48) !important;
  fill: var(--q-primary, #e11d48) !important;
}
.tile-card:hover .tile-icon-box[data-v-764378cf] {
  background: color-mix(in srgb, var(--q-primary, #e11d48) 12%, white);
  color: var(--q-primary, #e11d48);
}
.tile-card:hover .tile-icon-box .tile-icon[data-v-764378cf],
.tile-card:hover .tile-icon-box[data-v-764378cf] .q-icon {
  color: var(--q-primary, #e11d48) !important;
  fill: var(--q-primary, #e11d48) !important;
}
.tile-icon-box.completed[data-v-764378cf] {
  background: rgb(220, 252, 231);
  color: rgb(22, 163, 74);
}
.tile-icon-box.with-image[data-v-764378cf] {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.tile-arrow[data-v-764378cf] {
  color: rgb(148, 163, 184);
  margin-top: 8px;
  opacity: 0;
  transform: translateX(8px);
  transition: all 0.2s ease;
}
.tile-card:hover .tile-arrow[data-v-764378cf] {
  opacity: 1;
  transform: translateX(0);
}

/* Content */
.tile-content[data-v-764378cf] {
  margin-top: 16px;
  width: 100%;
  position: relative;
  z-index: 10;
}
.tile-title[data-v-764378cf] {
  font-size: 18px;
  font-weight: 600;
  color: rgb(15, 23, 42);
  line-height: 1.4;
  margin: 0 0 4px 0;
  padding-right: 24px;
  transition: color 0.2s ease;

  /* Line clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile-card:hover .tile-title[data-v-764378cf] {
  color: rgb(225, 29, 72);
}
.tile-description[data-v-764378cf] {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: rgb(100, 116, 139);

  /* Line clamp */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.action-btn[data-v-33608ee8] {
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}


.gallery-modal[data-v-0fc60a23] {
  width: 600px;
  max-width: 95vw;
  border-radius: 16px;
  overflow: hidden;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.gallery-header[data-v-0fc60a23] {
  padding: 16px 20px;
  border-bottom: 1px solid rgb(241, 245, 249);
}
.gallery-toolbar[data-v-0fc60a23] {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgb(241, 245, 249);
}
.search-wrapper[data-v-0fc60a23] {
  flex: 1;
  position: relative;
}
.search-icon[data-v-0fc60a23] {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.gallery-search-input[data-v-0fc60a23] {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border: 1px solid rgb(226, 232, 240);
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all 0.2s;
}
.gallery-search-input[data-v-0fc60a23]:focus {
  border-color: rgb(99, 102, 241);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}
.upload-btn[data-v-0fc60a23] {
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
}
.hidden-input[data-v-0fc60a23] {
  display: none;
}
.gallery-content[data-v-0fc60a23] {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
.gallery-grid[data-v-0fc60a23] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 500px) {
.gallery-grid[data-v-0fc60a23] {
    grid-template-columns: repeat(2, 1fr);
}
}
.gallery-item[data-v-0fc60a23] {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
}
.gallery-item[data-v-0fc60a23]:hover {
  border-color: rgb(99, 102, 241);
}
.gallery-img[data-v-0fc60a23] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-file-placeholder[data-v-0fc60a23] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  gap: 4px;
}
.gallery-file-placeholder.file-excel[data-v-0fc60a23] {
  background: linear-gradient(135deg, rgb(34, 139, 34), rgb(46, 125, 50));
}
.gallery-file-placeholder.file-word[data-v-0fc60a23] {
  background: linear-gradient(135deg, rgb(33, 82, 170), rgb(25, 118, 210));
}
.gallery-file-placeholder.file-powerpoint[data-v-0fc60a23] {
  background: linear-gradient(135deg, rgb(208, 68, 37), rgb(230, 74, 25));
}
.gallery-file-placeholder.file-pdf[data-v-0fc60a23] {
  background: linear-gradient(135deg, rgb(183, 28, 28), rgb(211, 47, 47));
}
.gallery-file-placeholder.file-generic[data-v-0fc60a23] {
  background: linear-gradient(135deg, rgb(97, 97, 97), rgb(117, 117, 117));
}
.gallery-file-ext[data-v-0fc60a23] {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gallery-item-overlay[data-v-0fc60a23] {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}
.gallery-item:hover .gallery-item-overlay[data-v-0fc60a23] {
  opacity: 1;
}
.gallery-item-title[data-v-0fc60a23] {
  color: white;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gallery-check[data-v-0fc60a23] {
  background: rgb(99, 102, 241);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-clear[data-v-0fc60a23] {
  background: rgba(241, 99, 99, 1);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Empty State */
.gallery-empty[data-v-0fc60a23] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
}
.gallery-empty-text[data-v-0fc60a23] {
  margin-top: 12px;
  font-size: 14px;
  color: rgb(148, 163, 184);
}


.poll-modal[data-v-26a85d1b] {
  border-radius: 16px;
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-header[data-v-26a85d1b] {
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  padding: 16px 20px;
}
.modal-body[data-v-26a85d1b] {
  overflow-y: auto;
  flex: 1;
}
.form-fields[data-v-26a85d1b] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.field-group[data-v-26a85d1b] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field-label[data-v-26a85d1b] {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  line-height: 1.4;
}
.field-input[data-v-26a85d1b] .q-field__control {
  border-radius: 10px;
  min-height: 40px;
}
.field-input[data-v-26a85d1b] .q-field__control:before {
  border-color: #e2e8f0;
}
.field-input[data-v-26a85d1b] .q-field__native {
  padding: 8px 12px;
  font-size: 14px;
  color: #1e293b;
}
.field-input[data-v-26a85d1b] .q-field__native::placeholder {
  color: #94a3b8;
}

/* File Upload */
.select-file-btn[data-v-26a85d1b] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1.5px solid var(--q-primary);
  background: transparent;
  color: var(--q-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.select-file-btn[data-v-26a85d1b]:hover {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.05);
}

/* Selected File */
.selected-file-container[data-v-26a85d1b] {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--q-dark);
}
.selected-file-image[data-v-26a85d1b] {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.file-type-placeholder[data-v-26a85d1b] {
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: white;
}
.file-type-placeholder.file-excel[data-v-26a85d1b] {
  background: linear-gradient(135deg, #228b22, #2e7d32);
}
.file-type-placeholder.file-word[data-v-26a85d1b] {
  background: linear-gradient(135deg, #2152aa, #1976d2);
}
.file-type-placeholder.file-powerpoint[data-v-26a85d1b] {
  background: linear-gradient(135deg, #d04425, #e64a19);
}
.file-type-placeholder.file-pdf[data-v-26a85d1b] {
  background: linear-gradient(135deg, #b71c1c, #d32f2f);
}
.file-type-placeholder.file-generic[data-v-26a85d1b] {
  background: linear-gradient(135deg, #616161, #757575);
}
.file-type-label[data-v-26a85d1b] {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
}
.selected-file-info[data-v-26a85d1b] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
}
.selected-file-name[data-v-26a85d1b] {
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin-right: 8px;
  line-height: 1.4;
}
.delete-file-btn[data-v-26a85d1b] {
  flex-shrink: 0;
}
.delete-file-btn[data-v-26a85d1b]:hover {
  color: #ef4444 !important;
  background: #fef2f2;
}

/* Date Range */
.date-range-section[data-v-26a85d1b] {
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
}
.section-label-small[data-v-26a85d1b] {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  line-height: 1.4;
}
.date-range-grid[data-v-26a85d1b] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.date-field[data-v-26a85d1b] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.date-sublabel[data-v-26a85d1b] {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  line-height: 1.4;
}
.date-input[data-v-26a85d1b] .q-field__control {
  border-radius: 8px;
  background: white;
}
.date-input[data-v-26a85d1b] .q-field__native {
  font-size: 12px;
}

/* Questions Section */
.questions-section[data-v-26a85d1b] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}
.section-label[data-v-26a85d1b] {
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  line-height: 1.4;
}
.question-item[data-v-26a85d1b] {
  padding: 16px;
  background: rgba(248, 250, 252, 0.5);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.question-header[data-v-26a85d1b] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 8px;
}
.question-header-left[data-v-26a85d1b] {
  flex: 1;
}
.question-label[data-v-26a85d1b] {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  line-height: 1.4;
}
.question-input[data-v-26a85d1b] .q-field__control {
  border-radius: 8px;
  background: white;
}

/* Options with stripe */
.options-container[data-v-26a85d1b] {
  display: flex;
  gap: 8px;
  padding-left: 8px;
}
.options-stripe[data-v-26a85d1b] {
  width: 2px;
  background: #cbd5e1;
  border-radius: 1px;
  flex-shrink: 0;
}
.options-list[data-v-26a85d1b] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.option-row[data-v-26a85d1b] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.option-input[data-v-26a85d1b] {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all 0.2s;
  line-height: 1.4;
}
.option-input[data-v-26a85d1b]:focus {
  border-color: var(--q-primary);
  background: white;
}
.option-input[data-v-26a85d1b]::placeholder {
  color: #94a3b8;
}
.delete-option-btn[data-v-26a85d1b] {
  color: #cbd5e1;
  transition: all 0.2s;
}
.delete-option-btn[data-v-26a85d1b]:hover {
  color: #ef4444 !important;
}
.add-option-link[data-v-26a85d1b] {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--q-primary);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: -8px;
  border-radius: 6px;
  transition: all 0.2s;
  line-height: 1.4;
}
.add-option-link[data-v-26a85d1b]:hover {
  opacity: 0.8;
}

/* Add Question Button */
.add-question-wrapper[data-v-26a85d1b] {
  display: flex;
  justify-content: center;
}
.add-question-btn[data-v-26a85d1b] {
  width: 100%;
  padding: 10px 16px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  line-height: 1.4;
}
.add-question-btn[data-v-26a85d1b]:hover {
  border-color: var(--q-primary);
  color: var(--q-primary);
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.05);
}
.delete-btn[data-v-26a85d1b]:hover {
  color: #ef4444 !important;
  background: #fef2f2;
}

/* Settings */
.settings-section[data-v-26a85d1b] {
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

/* Anonymity Radio Cards */
.anonymity-options[data-v-26a85d1b] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.anonymity-option[data-v-26a85d1b] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
}
.anonymity-option[data-v-26a85d1b]:hover {
  background: var(--q-dark);
}
.hidden-radio[data-v-26a85d1b] {
  display: none;
}
.anonymity-text[data-v-26a85d1b] {
  flex: 1;
}
.anonymity-title[data-v-26a85d1b] {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}
.anonymity-active-normal[data-v-26a85d1b] {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.06);
  border-color: rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
  color: var(--q-primary);
}
.anonymity-active-public[data-v-26a85d1b] {
  background: rgba(var(--q-secondary-rgb, 20, 184, 166), 0.06);
  border-color: rgba(var(--q-secondary-rgb, 20, 184, 166), 0.3);
  color: var(--q-secondary);
}
.anonymity-active-anon[data-v-26a85d1b] {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}
.anonymity-dot[data-v-26a85d1b] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot-primary[data-v-26a85d1b] { background: var(--q-primary);
}
.dot-secondary[data-v-26a85d1b] { background: var(--q-secondary);
}
.dot-gray[data-v-26a85d1b] { background: #475569;
}

/* Custom Toggles */
.toggles-group[data-v-26a85d1b] {
  display: flex;
  flex-direction: column;
}
.toggle-row[data-v-26a85d1b] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 8px 0;
}
.toggle-row span[data-v-26a85d1b] {
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  line-height: 1.4;
}
.pm-toggle[data-v-26a85d1b] {
  position: relative;
  width: 40px;
  height: 20px;
  background: #cbd5e1;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.2s;
  flex-shrink: 0;
}
.pm-toggle.active[data-v-26a85d1b] {
  background: var(--q-primary);
}
.pm-toggle-knob[data-v-26a85d1b] {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 9999px;
  transition: transform 0.2s;
}
.pm-toggle.active .pm-toggle-knob[data-v-26a85d1b] {
  transform: translateX(20px);
}
.toggle-divider[data-v-26a85d1b] {
  height: 1px;
  background: #e2e8f0;
  margin: 8px 0;
}

/* Footer */
.modal-footer[data-v-26a85d1b] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  padding: 12px 20px;
}
.modal-footer-right[data-v-26a85d1b] {
  display: flex;
  gap: 8px;
}
.pm-btn-cancel[data-v-26a85d1b] {
  padding: 10px 20px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.pm-btn-cancel[data-v-26a85d1b]:hover {
  background: #f1f5f9;
  color: #334155;
}
.pm-btn-draft[data-v-26a85d1b] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: var(--q-info);
  color: #334155;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.pm-btn-draft[data-v-26a85d1b]:hover {
  background: #f8fafc;
}
.pm-btn-publish[data-v-26a85d1b] {
  padding: 10px 24px;
  border-radius: 10px;
  border: none;
  background: var(--q-primary);
  color: white;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
  line-height: 1.4;
}
.pm-btn-publish[data-v-26a85d1b]:hover {
  box-shadow: 0 6px 20px rgba(var(--q-primary-rgb, 225, 29, 72), 0.4);
}

/* Audience Section */
.audience-section[data-v-26a85d1b] {
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  margin-top: 8px;
}
.audience-label[data-v-26a85d1b] {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 12px;
  line-height: 1.4;
}
.audience-row[data-v-26a85d1b] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 8px;
}
.audience-row[data-v-26a85d1b]:hover {
  background: var(--q-dark);
  border-color: #cbd5e1;
}
.audience-text[data-v-26a85d1b] {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  line-height: 1.4;
}

/* Custom Chips */
.pm-chips-wrap[data-v-26a85d1b] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.pm-chip[data-v-26a85d1b] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border-radius: 20px;
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.08);
  transition: all 0.15s;
}
.pm-chip[data-v-26a85d1b]:hover {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.14);
}
.pm-chip-dep[data-v-26a85d1b] {
  background: rgba(var(--q-secondary-rgb, 20, 184, 166), 0.08);
}
.pm-chip-dep[data-v-26a85d1b]:hover {
  background: rgba(var(--q-secondary-rgb, 20, 184, 166), 0.14);
}
.pm-chip-avatar[data-v-26a85d1b] {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.15);
  color: var(--q-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pm-chip-avatar-dep[data-v-26a85d1b] {
  background: rgba(var(--q-secondary-rgb, 20, 184, 166), 0.15);
  color: var(--q-secondary);
  border-radius: 6px;
}
.pm-chip-name[data-v-26a85d1b] {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  line-height: 1.3;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-chip-remove[data-v-26a85d1b] {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.pm-chip-remove[data-v-26a85d1b]:hover {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.2);
  color: var(--q-primary);
}

/* Selection Modals */
.pm-select-modal[data-v-26a85d1b] {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}
.pm-modal-header[data-v-26a85d1b] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}
.pm-modal-title[data-v-26a85d1b] {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.4;
}
.pm-modal-search[data-v-26a85d1b] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-bottom: 1px solid #f1f5f9;
}
.pm-search-icon[data-v-26a85d1b] {
  color: #94a3b8;
  flex-shrink: 0;
}
.pm-search-input[data-v-26a85d1b] {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: #1e293b;
  padding: 8px 0;
  background: transparent;
  line-height: 1.4;
}
.pm-search-input[data-v-26a85d1b]::placeholder {
  color: #94a3b8;
}
.pm-modal-body[data-v-26a85d1b] {
  flex: 1;
  overflow: hidden;
}
.pm-modal-loading[data-v-26a85d1b] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px;
}
.pm-modal-list[data-v-26a85d1b] {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px;
}
.pm-modal-empty[data-v-26a85d1b] {
  text-align: center;
  padding: 32px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.4;
}
.pm-modal-item[data-v-26a85d1b] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.pm-modal-item[data-v-26a85d1b]:hover {
  background: #f8fafc;
}
.pm-item-selected[data-v-26a85d1b] {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.05);
}
.pm-item-selected[data-v-26a85d1b]:hover {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.08);
}
.pm-user-avatar[data-v-26a85d1b] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-shrink: 0;
  overflow: hidden;
  transition: all 0.15s;
}
.pm-modal-item:hover .pm-user-avatar[data-v-26a85d1b] {
  background: white;
  color: var(--q-primary);
}
.pm-user-avatar img[data-v-26a85d1b] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pm-dep-icon[data-v-26a85d1b] {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-shrink: 0;
  transition: all 0.15s;
}
.pm-modal-item:hover .pm-dep-icon[data-v-26a85d1b] {
  background: white;
  color: var(--q-primary);
}
.pm-user-info[data-v-26a85d1b] {
  flex: 1;
  min-width: 0;
}
.pm-user-name[data-v-26a85d1b] {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-user-position[data-v-26a85d1b] {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-check-icon[data-v-26a85d1b] {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.15s;
}
.pm-check-active[data-v-26a85d1b] {
  background: var(--q-primary);
  border-color: var(--q-primary);
  color: white;
}
.pm-modal-footer[data-v-26a85d1b] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
}
.pm-modal-count[data-v-26a85d1b] {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
  line-height: 1.4;
}
.pm-modal-btn-done[data-v-26a85d1b] {
  padding: 8px 24px;
  border-radius: 10px;
  border: none;
  background: var(--q-primary);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.pm-modal-btn-done[data-v-26a85d1b]:hover {
  box-shadow: 0 4px 12px rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
}


.message-modal[data-v-4aabc38a] {
  border-radius: 16px;
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-header[data-v-4aabc38a] {
  background: rgb(248, 250, 252);
  border-bottom: 1px solid rgb(241, 245, 249);
  padding: 16px 20px;
}
.modal-body[data-v-4aabc38a] {
  overflow-y: auto;
  flex: 1;
}
.form-fields[data-v-4aabc38a] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.field-group[data-v-4aabc38a] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field-label[data-v-4aabc38a] {
  font-size: 13px;
  font-weight: 700;
  color: rgb(51, 65, 85);
}
.field-input[data-v-4aabc38a] .q-field__control {
  border-radius: 12px;
  background: rgb(248, 250, 252);
}
.field-input[data-v-4aabc38a] .q-field__control:hover,
.field-input[data-v-4aabc38a] .q-field--focused .q-field__control {
  background: white;
}
.message-textarea[data-v-4aabc38a] .q-field__control {
  min-height: 100px;
}

/* Image Upload */
.image-upload-area[data-v-4aabc38a] {
  border: 2px dashed rgb(226, 232, 240);
  border-radius: 12px;
  padding: 24px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgb(248, 250, 252);
  transition: all 0.2s;
}
.image-upload-area[data-v-4aabc38a]:hover {
  border-color: rgb(225, 29, 72);
  background: rgb(254, 242, 242);
}
.image-upload-area:hover .q-icon[data-v-4aabc38a] {
  color: rgb(225, 29, 72) !important;
}
.upload-text[data-v-4aabc38a] {
  font-size: 12px;
  font-weight: 500;
  color: rgb(148, 163, 184);
}
.hidden-input[data-v-4aabc38a] {
  display: none;
}

/* Selected Image */
.selected-image-container[data-v-4aabc38a] {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgb(226, 232, 240);
}
.selected-image[data-v-4aabc38a] {
  width: 100%;
  height: 192px;
  object-fit: cover;
  display: block;
}
.image-overlay[data-v-4aabc38a] {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}
.selected-image-container:hover .image-overlay[data-v-4aabc38a] {
  opacity: 1;
}
.overlay-btn[data-v-4aabc38a] {
  background: white;
  color: rgb(51, 65, 85);
}
.replace-btn[data-v-4aabc38a] {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}
.delete-btn[data-v-4aabc38a] {
  background: rgb(239, 68, 68);
  color: white;
}

/* Date Range */
.date-range-section[data-v-4aabc38a] {
  padding: 16px;
  background: rgb(248, 250, 252);
  border-radius: 12px;
  border: 1px solid rgb(241, 245, 249);
}
.section-label-small[data-v-4aabc38a] {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: rgb(100, 116, 139);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.date-range-grid[data-v-4aabc38a] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.date-field[data-v-4aabc38a] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.date-sublabel[data-v-4aabc38a] {
  font-size: 10px;
  font-weight: 700;
  color: rgb(148, 163, 184);
  text-transform: uppercase;
}
.date-input[data-v-4aabc38a] .q-field__control {
  border-radius: 8px;
  background: white;
}
.date-input[data-v-4aabc38a] .q-field__native {
  font-size: 12px;
}

/* Settings */
.settings-section[data-v-4aabc38a] {
  padding-top: 12px;
  border-top: 1px solid rgb(241, 245, 249);
}
.checkboxes-group[data-v-4aabc38a] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.checkbox-item[data-v-4aabc38a] .q-checkbox__label {
  font-size: 13px;
  color: rgb(51, 65, 85);
}
.checkbox-item[data-v-4aabc38a]:hover .q-checkbox__label {
  color: rgb(15, 23, 42);
}

/* Audience Section */
.audience-section[data-v-4aabc38a] {
  padding: 16px;
  background: rgb(248, 250, 252);
  border-radius: 12px;
  border: 1px solid rgb(226, 232, 240);
}
.audience-label[data-v-4aabc38a] {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: rgb(100, 116, 139);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.audience-row[data-v-4aabc38a] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border: 1px solid rgb(226, 232, 240);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 8px;
}
.audience-row[data-v-4aabc38a]:last-child {
  margin-bottom: 0;
}
.audience-row[data-v-4aabc38a]:hover {
  border-color: rgb(225, 29, 72);
  background: rgb(254, 242, 242);
}
.audience-text[data-v-4aabc38a] {
  font-size: 14px;
  font-weight: 500;
  color: rgb(51, 65, 85);
}

/* Footer */
.modal-footer[data-v-4aabc38a] {
  background: rgb(248, 250, 252);
  border-top: 1px solid rgb(241, 245, 249);
  padding: 16px 20px;
}
.action-btn[data-v-4aabc38a] {
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}
.draft-btn[data-v-4aabc38a] {
  background: rgb(226, 232, 240);
  color: rgb(51, 65, 85);
}
.draft-btn[data-v-4aabc38a]:hover {
  background: rgb(203, 213, 225);
}
.publish-btn[data-v-4aabc38a] {
  box-shadow: 0 1px 3px rgba(var(--q-primary-rgb, 225, 29, 72), 0.2);
}

/* Selected File */
.selected-file-container[data-v-4aabc38a] {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgb(226, 232, 240);
  background: rgb(248, 250, 252);
}
.selected-file-image[data-v-4aabc38a] {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.file-type-placeholder[data-v-4aabc38a] {
  width: 100%;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  gap: 8px;
}
.file-type-placeholder.file-excel[data-v-4aabc38a] {
  background: linear-gradient(135deg, rgb(34, 139, 34), rgb(46, 125, 50));
}
.file-type-placeholder.file-word[data-v-4aabc38a] {
  background: linear-gradient(135deg, rgb(33, 82, 170), rgb(25, 118, 210));
}
.file-type-placeholder.file-powerpoint[data-v-4aabc38a] {
  background: linear-gradient(135deg, rgb(208, 68, 37), rgb(230, 74, 25));
}
.file-type-placeholder.file-pdf[data-v-4aabc38a] {
  background: linear-gradient(135deg, rgb(183, 28, 28), rgb(211, 47, 47));
}
.file-type-placeholder.file-generic[data-v-4aabc38a] {
  background: linear-gradient(135deg, rgb(97, 97, 97), rgb(117, 117, 117));
}
.file-type-label[data-v-4aabc38a] {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.selected-file-info[data-v-4aabc38a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-top: 1px solid rgb(226, 232, 240);
  background: white;
}
.selected-file-name[data-v-4aabc38a] {
  font-size: 13px;
  font-weight: 500;
  color: rgb(51, 65, 85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin-right: 8px;
}
.delete-file-btn[data-v-4aabc38a] {
  flex-shrink: 0;
}
.delete-file-btn[data-v-4aabc38a]:hover {
  color: rgb(239, 68, 68) !important;
}

/* Select File Button */
.select-file-btn[data-v-4aabc38a] {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid rgb(226, 232, 240);
  background: rgb(248, 250, 252);
}
.select-file-btn[data-v-4aabc38a]:hover {
  border-color: rgb(99, 102, 241);
  background: white;
}



/* Base container styles */
.comments-container[data-v-62d5e25c] {
  display: flex;
  flex-direction: column;
  background: var(--q-info);
}

/* Overlay variant */
.comments-overlay[data-v-62d5e25c] {
  position: absolute;
  inset: 0;
  z-index: 110;
  animation: slideInFromRight-62d5e25c 0.3s ease;
  border-radius: 16px;
}

/* Section variant */
.comments-section[data-v-62d5e25c] {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
@keyframes slideInFromRight-62d5e25c {
from {
    transform: translateX(100%);
}
to {
    transform: translateX(0);
}
}
.comments-header[data-v-62d5e25c] {
  padding: 10px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--q-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.comments-header--section[data-v-62d5e25c] {
  border-radius: 16px 16px 0 0;
}
.comments-header-left[data-v-62d5e25c] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comments-title[data-v-62d5e25c] {
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  color: var(--q-accent);
  margin: 0;
}
.comments-body[data-v-62d5e25c] {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.comments-overlay .comments-body[data-v-62d5e25c] {
  max-height: none;
}
.comments-section .comments-body[data-v-62d5e25c] {
  max-height: 400px;
}
.comments-footer[data-v-62d5e25c] {
  padding: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--q-dark);
  flex-shrink: 0;
}
.comments-section .comments-footer[data-v-62d5e25c] {
  border-radius: 0 0 16px 16px;
}
.comments-loading[data-v-62d5e25c] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

/* Comments List Styles */
.comments-list[data-v-62d5e25c] {
  margin-bottom: 0;
}
.comment-thread[data-v-62d5e25c] {
  margin-bottom: 16px;
}
.comment-thread[data-v-62d5e25c]:last-child {
  margin-bottom: 0;
}
.comment-item[data-v-62d5e25c] {
  display: flex;
  gap: 12px;
}
.comment-avatar[data-v-62d5e25c] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--q-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--q-positive);
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  overflow: hidden;
}
.comment-content[data-v-62d5e25c] {
  flex: 1;
  min-width: 0;
}
.comment-bubble[data-v-62d5e25c] {
  background: var(--q-dark);
  padding: 12px;
  border-radius: 16px;
  border-top-left-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.comment-bubble.deleted[data-v-62d5e25c] {
  opacity: 0.6;
  background: color-mix(in srgb, var(--q-warning) 10%, white);
}
.comment-bubble[data-v-62d5e25c]:hover {
  border-color: rgba(0, 0, 0, 0.1);
}
.comment-header[data-v-62d5e25c] {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.comment-author[data-v-62d5e25c] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
}
.comment-date[data-v-62d5e25c] {
  font-size: 10px;
  color: var(--q-positive);
  opacity: 0.7;
  margin-left: auto;
}
.comment-text[data-v-62d5e25c] {
  font-size: 14px;
  color: var(--q-positive);
  line-height: 1.5;
  margin: 0;
  word-break: break-word;
}
.comment-text.deleted-text[data-v-62d5e25c] {
  font-style: italic;
  color: var(--q-positive);
  opacity: 0.7;
}
.comment-actions[data-v-62d5e25c] {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  margin-left: 8px;
}
.comment-action[data-v-62d5e25c] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--q-positive);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}
.comment-action[data-v-62d5e25c]:hover {
  color: var(--q-primary);
}
.comment-action.liked[data-v-62d5e25c] {
  color: var(--q-primary);
}
.comment-action.delete[data-v-62d5e25c] {
  opacity: 0;
  margin-left: auto;
}
.comment-item:hover .comment-action.delete[data-v-62d5e25c] {
  opacity: 1;
}
.comment-action.delete[data-v-62d5e25c]:hover {
  color: var(--q-warning);
}
.comment-action.restore[data-v-62d5e25c] {
  color: var(--q-secondary);
}
.comment-action.restore[data-v-62d5e25c]:hover {
  color: color-mix(in srgb, var(--q-secondary) 85%, black);
}
.comments-empty[data-v-62d5e25c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--q-positive);
}
.comments-empty p[data-v-62d5e25c] {
  margin: 8px 0 0 0;
  font-size: 14px;
}

/* Replying Banner */
.replying-banner[data-v-62d5e25c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--q-dark);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
}
.replying-info[data-v-62d5e25c] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--q-positive);
}
.replying-info strong[data-v-62d5e25c] {
  color: var(--q-accent);
}
.editor-input[data-v-62d5e25c] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comment-input[data-v-62d5e25c] {
  flex: 1;
}
.comment-input[data-v-62d5e25c] .q-field__control {
  border-radius: 12px;
}


.feed-item-modal[data-v-5267c238] {
  border-radius: 16px;
  overflow: hidden;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  position: relative;
}
.modal-header[data-v-5267c238] {
  background: var(--q-dark);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.header-content[data-v-5267c238] {
  flex: 1;
  overflow: hidden;
}
.header-meta[data-v-5267c238] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.type-badge[data-v-5267c238] {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid;
}
.type-poll[data-v-5267c238] {
  background: color-mix(in srgb, var(--q-primary) 10%, white);
  color: var(--q-primary);
  border-color: color-mix(in srgb, var(--q-primary) 30%, white);
}
.type-message[data-v-5267c238] {
  background: color-mix(in srgb, var(--q-primary) 10%, white);
  color: var(--q-primary);
  border-color: color-mix(in srgb, var(--q-primary) 30%, white);
}
.type-event[data-v-5267c238] {
  background: color-mix(in srgb, var(--q-warning) 10%, white);
  color: var(--q-warning);
  border-color: color-mix(in srgb, var(--q-warning) 30%, white);
}
.type-system[data-v-5267c238] {
  background: var(--q-dark);
  color: var(--q-positive);
  border-color: rgba(0, 0, 0, 0.1);
}
.item-date[data-v-5267c238] {
  font-size: 12px;
  color: var(--q-positive);
  opacity: 0.7;
  display: flex;
  align-items: center;
}
.item-title[data-v-5267c238] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 1.4;
}
.close-btn[data-v-5267c238] {
  flex-shrink: 0;
}
.modal-body[data-v-5267c238] {
  overflow-y: auto;
  flex: 1;
  padding: 24px;
}
.item-content[data-v-5267c238] {
  font-size: 14px;
  color: var(--q-positive);
  line-height: 1.6;
  white-space: pre-wrap;
  margin: 0 0 24px 0;
}
.poll-section[data-v-5267c238] {
  margin-top: 8px;
}
.poll-title[data-v-5267c238] {
  font-size: 13px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
}
.poll-options[data-v-5267c238] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.poll-option[data-v-5267c238] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--q-info);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  width: 100%;
}
.poll-option[data-v-5267c238]:hover {
  border-color: var(--q-primary);
}
.poll-option.selected[data-v-5267c238] {
  background: color-mix(in srgb, var(--q-primary) 10%, white);
  border-color: var(--q-primary);
  box-shadow: 0 0 0 1px var(--q-primary);
}
.option-text[data-v-5267c238] {
  font-size: 14px;
  font-weight: 500;
  color: var(--q-accent);
}
.poll-option.selected .option-text[data-v-5267c238] {
  color: var(--q-primary);
}
.modal-footer[data-v-5267c238] {
  background: var(--q-dark);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-left-column[data-v-5267c238] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.footer-right-column[data-v-5267c238] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 175px;
}
.rating-container[data-v-5267c238] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--q-info);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.rating-value[data-v-5267c238] {
  font-size: 12px;
  font-weight: 700;
  color: var(--q-accent);
  min-width: 24px;
  padding-left: 8px;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
}
.anonymous-checkbox[data-v-5267c238] {
  font-size: 10px;
  color: var(--q-positive);
  margin-top: 2px;
}
.voters-counter-btn[data-v-5267c238] {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--q-positive);
  margin-top: 2px;
}
.voters-counter-btn[data-v-5267c238]:hover {
  color: var(--q-primary);
}

/* Voters Overlay Styles */
.voters-overlay[data-v-5267c238] {
  position: absolute;
  inset: 0;
  z-index: 110;
  background: var(--q-info);
  display: flex;
  flex-direction: column;
  animation: slideInFromRight-5267c238 0.3s ease;
}
@keyframes slideInFromRight-5267c238 {
from {
    transform: translateX(100%);
}
to {
    transform: translateX(0);
}
}
.voters-header[data-v-5267c238] {
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--q-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.voters-header-left[data-v-5267c238] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.voters-title[data-v-5267c238] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.voters-list[data-v-5267c238] {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.voter-item[data-v-5267c238] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--q-dark);
  background: var(--q-dark);
  margin-bottom: 12px;
}
.voter-item[data-v-5267c238]:last-child {
  margin-bottom: 0;
}
.voter-info[data-v-5267c238] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.voter-avatar[data-v-5267c238] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
}
.voter-details[data-v-5267c238] {
  display: flex;
  flex-direction: column;
}
.voter-name[data-v-5267c238] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.voter-date[data-v-5267c238] {
  font-size: 10px;
  color: var(--q-positive);
  opacity: 0.7;
  margin: 0;
}
.voter-rating[data-v-5267c238] {
  display: flex;
  align-items: center;
  gap: 2px;
}
.voter-no-rating[data-v-5267c238] {
  font-size: 10px;
  color: var(--q-positive);
  opacity: 0.7;
  font-style: italic;
}
.voters-empty[data-v-5267c238] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--q-positive);
}
.voters-empty p[data-v-5267c238] {
  margin: 8px 0 0 0;
  font-size: 14px;
}
.comments-btn[data-v-5267c238] {
  font-size: 12px;
  font-weight: 700;
}
.comments-btn[data-v-5267c238]:hover {
  color: var(--q-primary) !important;
}
.comments-btn.active[data-v-5267c238] {
  background: rgba(0, 0, 0, 0.1);
}
.vote-btn[data-v-5267c238] {
  padding: 8px 24px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}
.close-action-btn[data-v-5267c238] {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}

/* Poll Question Styles */
.poll-question[data-v-5267c238] {
  margin-bottom: 24px;
}
.poll-question[data-v-5267c238]:last-child {
  margin-bottom: 0;
}
.poll-option-checkbox[data-v-5267c238],
.poll-option-radio[data-v-5267c238] {
  margin-bottom: 8px;
}

/* Poll Results Styles */
.poll-results-section[data-v-5267c238] {
  margin-top: 16px;
}
.results-header[data-v-5267c238] {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.06);
}
.results-count[data-v-5267c238] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
}
.result-question[data-v-5267c238] {
  margin-bottom: 24px;
}
.result-question[data-v-5267c238]:last-child {
  margin-bottom: 0;
}
.question-text[data-v-5267c238] {
  font-size: 15px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 16px 0;
}
.result-answer[data-v-5267c238] {
  margin-bottom: 16px;
}
.result-answer[data-v-5267c238]:last-child {
  margin-bottom: 0;
}
.answer-info[data-v-5267c238] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.answer-text[data-v-5267c238] {
  font-size: 14px;
  font-weight: 500;
  color: var(--q-positive);
}
.answer-percent[data-v-5267c238] {
  font-size: 13px;
  font-weight: 700;
  color: var(--q-primary);
  min-width: 50px;
  text-align: right;
}


.feed-container[data-v-72dd4c94] {
  height: 100%;
  max-height: 100%;
  background: var(--q-info);
  border-radius: 16px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.feed-header[data-v-72dd4c94] {
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--q-dark);
}
.feed-title[data-v-72dd4c94] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Quick Actions */
.feed-quick-actions[data-v-72dd4c94] {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 8px;
  /* Hide scrollbar */
  scrollbar-width: none;
}
.feed-quick-actions[data-v-72dd4c94]::-webkit-scrollbar {
  display: none;
}
.feed-action-btn[data-v-72dd4c94] {
  font-size: 12px;
  font-weight: 500;
  color: var(--q-positive);
  background: var(--q-info);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 9999px;
  padding: 6px 12px;
  white-space: nowrap;
  transition: all 0.2s;
}
.feed-action-btn[data-v-72dd4c94]:hover {
  background: var(--q-dark);
  color: var(--q-primary);
}

/* Create Actions */
.feed-create-actions[data-v-72dd4c94] {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.feed-create-btn[data-v-72dd4c94] {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  background: var(--q-primary);
  color: white;
  border-radius: 8px;
  transition: all 0.2s;
}
.feed-create-btn[data-v-72dd4c94]:hover {
  background: color-mix(in srgb, var(--q-primary) 85%, black);
}
.feed-create-btn-outline[data-v-72dd4c94] {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 10%, white);
  border: 1px solid color-mix(in srgb, var(--q-primary) 20%, white);
  border-radius: 8px;
  transition: all 0.2s;
}
.feed-create-btn-outline[data-v-72dd4c94]:hover {
  background: color-mix(in srgb, var(--q-primary) 20%, white);
}

/* Content */
.feed-content[data-v-72dd4c94] {
  position: relative !important;
  flex: 1;
  min-height: 0;
  height: 1px;
}
.feed-items[data-v-72dd4c94] {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-x: hidden;
  max-width: 100%;
}

/* Feed Item */
.feed-item[data-v-72dd4c94] {
  position: relative;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid;
  transition: all 0.2s;
  cursor: pointer; /* Добавляем курсор-указатель */
}
.feed-item[data-v-72dd4c94]:hover {
  background: var(--q-dark);
}
.feed-item.read[data-v-72dd4c94] {
  background: var(--q-dark);
  border-color: rgba(0, 0, 0, 0.06);
  opacity: 0.7;
}
.feed-item.unread[data-v-72dd4c94] {
  background: var(--q-info);
  border-color: rgba(0, 0, 0, 0.1);
  border-left: 4px solid var(--q-primary);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.feed-item.unread[data-v-72dd4c94]:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.feed-item-header[data-v-72dd4c94] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}
.feed-item-type[data-v-72dd4c94] {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--q-positive);
  opacity: 0.7;
  text-transform: uppercase;
}
.feed-item-date[data-v-72dd4c94] {
  font-size: 10px;
  color: var(--q-positive);
  opacity: 0.7;
}
.feed-item-title[data-v-72dd4c94] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0 0 4px 0;
}
.feed-item-content[data-v-72dd4c94] {
  font-size: 12px;
  color: var(--q-positive);
  line-height: 1.5;
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;

  /* Line clamp - скрываем текст с многоточием по умолчанию */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: all 0.3s ease;
}
.feed-item-content.expanded[data-v-72dd4c94] {
  /* При развернутом состоянии убираем ограничение строк */
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}
.feed-item-footer[data-v-72dd4c94] {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}
.feed-item-more-btn[data-v-72dd4c94] {
  font-size: 12px;
  font-weight: 500;
}
.feed-item-more-btn[data-v-72dd4c94]:hover {
  text-decoration: underline;
}

/* Loading State */
.feed-loading[data-v-72dd4c94] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  gap: 12px;
}
.feed-loading p[data-v-72dd4c94] {
  margin: 0;
  font-size: 14px;
  color: var(--q-positive);
}

/* Empty State */
.feed-empty[data-v-72dd4c94] {
  text-align: center;
  padding: 40px 16px;
  color: var(--q-positive);
}
.feed-empty p[data-v-72dd4c94] {
  margin: 0;
  font-size: 14px;
}


.list-item[data-v-59bc7307] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding: 16px;
  background: white;
  border: 1px solid rgb(241, 245, 249);
  border-radius: 12px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  overflow: visible;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 16px;
}

/* Notification Badge */
.list-item-badge[data-v-59bc7307] {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 32px;
  height: 24px;
  padding: 0 10px;
  background-color: var(--q-primary, #e11d48);
  color: white;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px !important;
  z-index: 50;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  animation: badge-zoom-in-59bc7307 0.3s ease-out;
}
@keyframes badge-zoom-in-59bc7307 {
from {
    opacity: 0;
    transform: scale(0.5);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
@media (min-width: 640px) {
.list-item[data-v-59bc7307] {
    flex-direction: row;
    align-items: center;
}
}
.list-item[data-v-59bc7307]:hover {
  border-color: rgb(254, 205, 211);
  background: rgba(254, 242, 242, 0.1);
}

/* Left Side */
.list-item-left[data-v-59bc7307] {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
  width: 100%;
}

/* Image */
.list-item-image-box[data-v-59bc7307] {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: rgb(241, 245, 249);
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgb(226, 232, 240);
}
.list-item-image[data-v-59bc7307] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Icon */
.list-item-icon-box[data-v-59bc7307] {
  padding: 12px;
  border-radius: 8px;
  background: rgb(241, 245, 249);
  color: rgb(100, 116, 139);
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.list-item:hover .list-item-icon-box[data-v-59bc7307] {
  background: rgb(254, 226, 226);
  color: rgb(225, 29, 72);
}
.list-item-icon-box.completed[data-v-59bc7307] {
  background: rgb(220, 252, 231);
  color: rgb(22, 163, 74);
}

/* Text */
.list-item-text[data-v-59bc7307] {
  flex: 1;
  min-width: 0;
}
.list-item-title[data-v-59bc7307] {
  font-size: 16px;
  font-weight: 600;
  color: rgb(15, 23, 42);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}
.list-item:hover .list-item-title[data-v-59bc7307] {
  color: rgb(190, 24, 93);
}
.list-item-description[data-v-59bc7307] {
  font-size: 14px;
  color: rgb(100, 116, 139);
  margin: 2px 0 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right Side */
.list-item-right[data-v-59bc7307] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-top: 8px;
}
@media (min-width: 640px) {
.list-item-right[data-v-59bc7307] {
    width: auto;
    margin-top: 0;
    justify-content: flex-end;
}
}

/* Actions Slot */
.list-item-actions[data-v-59bc7307] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
}

/* Status Badge */
.list-item-status-badge[data-v-59bc7307] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.status-completed[data-v-59bc7307] {
  background: rgb(240, 253, 244);
  color: rgb(21, 128, 61);
  border: 1px solid rgb(187, 247, 208);
}
.status-failed[data-v-59bc7307] {
  background: rgb(254, 242, 242);
  color: rgb(185, 28, 28);
  border: 1px solid rgb(254, 226, 226);
}
.status-in_progress[data-v-59bc7307] {
  background: rgb(239, 246, 255);
  color: rgb(37, 99, 235);
  border: 1px solid rgb(191, 219, 254);
}
.status-not_started[data-v-59bc7307] {
  background: rgb(241, 245, 249);
  color: rgb(100, 116, 139);
  border: 1px solid rgb(226, 232, 240);
}
.status-assigned[data-v-59bc7307] {
  background: rgb(238, 242, 255);
  color: rgb(79, 70, 229);
  border: 1px solid rgb(199, 210, 254);
}
.status-pending[data-v-59bc7307] {
  background: rgb(254, 243, 199);
  color: rgb(217, 119, 6);
  border: 1px solid rgb(253, 230, 138);
}

/* Arrow */
.list-item-arrow[data-v-59bc7307] {
  color: rgb(203, 213, 225);
  transition: all 0.2s ease;
}
.list-item:hover .list-item-arrow[data-v-59bc7307] {
  color: rgb(244, 63, 94);
  transform: translateX(4px);
}

/* Hidden on mobile */
@media (max-width: 639px) {
.hidden[data-v-59bc7307] {
    display: none !important;
}
}


.h5p-player-container[data-v-b6692938] {
  position: relative;
  min-height: 200px;
}

/* Hide fullscreen button in H5P player */
.h5p-player-container[data-v-b6692938] .h5p-fullscreen,
.h5p-player-container[data-v-b6692938] .h5p-fullscreen {
  display: none !important;
}


.lesson-view-container[data-v-e61c5b8c] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-e61c5b8c 0.5s ease-in-out;
}

/* Loading State */
.loading-container[data-v-e61c5b8c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 16px;
}
.loading-text[data-v-e61c5b8c] {
  color: var(--color-text-secondary, #555);
  font-size: 15px;
}

/* Error State */
.error-container[data-v-e61c5b8c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 16px;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.error-text[data-v-e61c5b8c] {
  color: var(--q-accent);
  font-size: 15px;
  margin-bottom: 8px;
}

/* Empty State */
.empty-container[data-v-e61c5b8c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 16px;
}

/* Banners */
.banner[data-v-e61c5b8c] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
}
.banner-success[data-v-e61c5b8c] {
  background: rgb(220, 252, 231);
  color: var(--q-success, #21BA45);
  border: 1px solid rgb(187, 247, 208);
}
@keyframes fadeIn-e61c5b8c {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* STUFF text */
.lesson-stuff-text[data-v-e61c5b8c] {
  color: var(--q-accent);
  font-size: 16px;
  white-space: pre-line;
}

/* Header */
.lesson-header[data-v-e61c5b8c] {
  background: var(--color-bg-secondary, #fff);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}
.lesson-header-content[data-v-e61c5b8c] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
.lesson-header-content[data-v-e61c5b8c] {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}
}
.lesson-info[data-v-e61c5b8c] {
  flex: 1;
}
.lesson-meta[data-v-e61c5b8c] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--color-text-disabled, #94a3b8);
  margin-bottom: 12px;
}
.lesson-type-badge[data-v-e61c5b8c] {
  background: var(--color-bg-tertiary, #f1f5f9);
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #64748b);
}
.meta-item[data-v-e61c5b8c] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.materials-badge[data-v-e61c5b8c] {
  padding: 3px 10px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary, #6699FF);
  font-size: 13px;
  font-weight: 600;
}
.lesson-title[data-v-e61c5b8c] {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-primary, #292929);
  line-height: 1.3;
  margin: 0;
}
@media (min-width: 768px) {
.lesson-title[data-v-e61c5b8c] {
    font-size: 26px;
}
}
.lesson-description[data-v-e61c5b8c] {
  margin-top: 12px;
  color: var(--color-text-secondary, #555);
  font-size: 16px;
  line-height: 1.5;
}
.lesson-actions[data-v-e61c5b8c] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 4px;
}
.copy-input-wrapper[data-v-e61c5b8c] {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.copy-to-buff[data-v-e61c5b8c] {
  position: absolute;
  left: -9999px;
  opacity: 0;
}
.action-btn[data-v-e61c5b8c] {
  color: var(--color-text-muted, #64748b);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
}
.action-btn[data-v-e61c5b8c]:hover {
  color: var(--q-primary, #6699FF);
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
}
.btn-open-window[data-v-e61c5b8c] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--q-primary, #6699FF);
  color: white;
  font-weight: 600;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-open-window[data-v-e61c5b8c]:hover {
  filter: brightness(0.9);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.btn-label[data-v-e61c5b8c] {
  display: none;
}
@media (min-width: 640px) {
.btn-label[data-v-e61c5b8c] {
    display: inline;
}
}

/* Content */
.lesson-content-wrapper[data-v-e61c5b8c] {
  width: 100%;
}

/* Office documents */
.content-office-docs[data-v-e61c5b8c] {
  width: 100%;
}
.office-doc-item[data-v-e61c5b8c] {
  margin-bottom: 16px;
}
.office-doc-name[data-v-e61c5b8c] {
  font-size: 16px;
  font-weight: 600;
  color: var(--q-accent);
  margin-bottom: 8px;
}
.office-mobile-link[data-v-e61c5b8c] {
  display: block;
  margin-bottom: 8px;
  color: var(--q-secondary);
}
.office-iframe[data-v-e61c5b8c] {
  width: 100%;
  height: calc(100vh);
  min-height: 400px;
  border-radius: 12px;
}

/* Video */
.content-video[data-v-e61c5b8c] {
  width: 100%;
}

/* H5P */
.content-h5p[data-v-e61c5b8c] {
  width: 100%;
  min-height: 600px;
}
.h5p-info-text[data-v-e61c5b8c] {
  color: var(--q-secondary);
  font-size: 15px;
  font-weight: 500;
}
.video-container[data-v-e61c5b8c] {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  min-height: 460px;
  border-radius: 12px;
}
.video-container--scorm[data-v-e61c5b8c] {
  min-height: 800px;
}
.video-container iframe[data-v-e61c5b8c] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 460px;
  border: none;
}
.video-container--scorm iframe[data-v-e61c5b8c] {
  min-height: 800px;
}

/* PDF */
.content-pdf[data-v-e61c5b8c] {
  width: 100%;
  height: 75vh;
  background: var(--color-bg-tertiary, #f1f5f9);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.pdf-placeholder[data-v-e61c5b8c] {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  z-index: 0;
}
.pdf-icon[data-v-e61c5b8c] {
  color: var(--color-text-disabled, #94a3b8);
  margin-bottom: 16px;
}
.pdf-title[data-v-e61c5b8c] {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-secondary, #555);
}
.pdf-subtitle[data-v-e61c5b8c] {
  color: var(--color-text-muted, #64748b);
  font-size: 14px;
  margin-top: 8px;
}
.pdf-iframe[data-v-e61c5b8c] {
  width: 100%;
  height: 100%;
  border: none;
  position: relative;
  z-index: 10;
}

/* Longread */
.content-longread[data-v-e61c5b8c] {
  background: var(--color-bg-secondary, #fff);
  padding: 24px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}
@media (min-width: 768px) {
.content-longread[data-v-e61c5b8c] {
    padding: 40px;
}
}
.longread-video[data-v-e61c5b8c] {
  margin-top: 16px;
}
.longread-video-name[data-v-e61c5b8c] {
  color: var(--q-positive);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}
.longread-video-player[data-v-e61c5b8c] {
  width: 100%;
  border-radius: 8px;
}
.longread-video-loading[data-v-e61c5b8c] {
  display: flex;
  justify-content: center;
  padding: 24px;
}

/* Bottom Section */
.lesson-bottom-section[data-v-e61c5b8c] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
@media (min-width: 768px) {
.lesson-bottom-section[data-v-e61c5b8c] {
    grid-template-columns: 1fr 2fr;
}
}
.lesson-info-card[data-v-e61c5b8c] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.info-card[data-v-e61c5b8c] {
  background: var(--color-bg-secondary, #fff);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}
.info-card-header[data-v-e61c5b8c] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--color-text-primary, #292929);
  font-weight: 600;
  font-size: 15px;
}
.info-icon[data-v-e61c5b8c] {
  color: var(--q-primary, #6699FF);
}
.info-card-content[data-v-e61c5b8c] {
  font-size: 14px;
  color: var(--color-text-muted, #64748b);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.info-row[data-v-e61c5b8c] {
  display: flex;
  justify-content: space-between;
}
.info-value[data-v-e61c5b8c] {
  font-weight: 500;
  color: var(--color-text-secondary, #555);
}
.info-id[data-v-e61c5b8c] {
  font-family: monospace;
}
.lesson-materials-card[data-v-e61c5b8c] {
  display: flex;
  flex-direction: column;
}
.materials-card[data-v-e61c5b8c] {
  background: var(--color-bg-secondary, #fff);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
  height: 100%;
}
.materials-header[data-v-e61c5b8c] {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-bg-tertiary, #f1f5f9);
  background: rgba(248, 250, 252, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.materials-title[data-v-e61c5b8c] {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text-primary, #292929);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.materials-icon[data-v-e61c5b8c] {
  color: var(--q-primary, #6699FF);
}
.materials-count[data-v-e61c5b8c] {
  font-size: 13px;
  font-weight: 500;
  padding: 4px 10px;
  background: var(--color-bg-secondary, #fff);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 6px;
  color: var(--color-text-muted, #64748b);
}
.materials-content[data-v-e61c5b8c] {
  padding: 16px;
}
.materials-grid[data-v-e61c5b8c] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
.materials-grid[data-v-e61c5b8c] {
    grid-template-columns: 1fr 1fr;
}
}
.materials-links[data-v-e61c5b8c] {
  margin-top: 16px;
}
.materials-links-title[data-v-e61c5b8c] {
  font-weight: 600;
  color: var(--color-text-secondary, #555);
  margin-bottom: 8px;
}
.material-link-item[data-v-e61c5b8c] {
  margin-bottom: 6px;
}
.material-link[data-v-e61c5b8c] {
  color: var(--q-primary, #6699FF);
  text-decoration: none;
}
.material-link[data-v-e61c5b8c]:hover {
  text-decoration: underline;
}
.material-item[data-v-e61c5b8c] {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--color-bg-tertiary, #f1f5f9);
  gap: 12px;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}
.material-item[data-v-e61c5b8c]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  background: color-mix(in srgb, var(--q-primary) 5%, var(--q-info));
}
.material-icon-box[data-v-e61c5b8c] {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--color-bg-secondary, #fff);
  border: 1px solid var(--color-bg-tertiary, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted, #64748b);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}
.material-item:hover .material-icon-box[data-v-e61c5b8c] {
  color: var(--q-primary, #6699FF);
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
}
.material-info[data-v-e61c5b8c] {
  flex: 1;
  min-width: 0;
}
.material-title[data-v-e61c5b8c] {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #292929);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
}
.material-item:hover .material-title[data-v-e61c5b8c] {
  color: var(--q-primary, #6699FF);
}
.material-meta[data-v-e61c5b8c] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.material-action[data-v-e61c5b8c] {
  font-size: 13px;
  color: var(--color-text-disabled, #94a3b8);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.material-item:hover .material-action[data-v-e61c5b8c] {
  color: var(--q-primary, #6699FF);
}
.materials-empty[data-v-e61c5b8c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--color-text-disabled, #94a3b8);
}
.empty-icon-box[data-v-e61c5b8c] {
  width: 48px;
  height: 48px;
  background: var(--color-bg-tertiary, #f1f5f9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.empty-icon[data-v-e61c5b8c] {
  color: var(--color-text-disabled, #94a3b8);
}
.empty-text[data-v-e61c5b8c] {
  font-size: 14px;
}

/* Course Navigation Section */
.course-nav-section[data-v-e61c5b8c] {
  padding: 16px 20px;
  background: var(--color-bg-secondary, #fff);
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.course-nav-header[data-v-e61c5b8c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.course-nav-left[data-v-e61c5b8c] {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.nav-next-btn[data-v-e61c5b8c] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 24px;
  background: var(--q-primary);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(102, 153, 255, 0.3);
  transition: all 0.2s;
}
.nav-next-btn[data-v-e61c5b8c]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 85%, black);
  box-shadow: 0 4px 12px rgba(102, 153, 255, 0.4);
  transform: translateY(-1px);
}
.nav-next-btn[data-v-e61c5b8c]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.nav-complete-btn[data-v-e61c5b8c] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: transparent;
  color: var(--color-text-secondary, #555);
  font-weight: 500;
  font-size: 14px;
  border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  transition: all 0.2s;
}
.nav-complete-btn[data-v-e61c5b8c]:hover:not(:disabled) {
  border-color: var(--q-secondary);
  color: var(--q-secondary);
  background: color-mix(in srgb, var(--q-secondary) 5%, transparent);
}
.nav-complete-btn[data-v-e61c5b8c]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.nav-complete-btn--done[data-v-e61c5b8c] {
  background: color-mix(in srgb, var(--q-secondary) 10%, transparent);
  color: var(--q-secondary);
  border-color: var(--q-secondary);
}
.nav-dropdown-btn[data-v-e61c5b8c] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: transparent;
  color: var(--color-text-muted, #64748b);
  font-weight: 500;
  font-size: 14px;
  border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  transition: all 0.2s;
}
.nav-dropdown-btn[data-v-e61c5b8c]:hover {
  border-color: var(--q-primary);
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 5%, transparent);
}
.nav-item-type[data-v-e61c5b8c] {
  color: var(--color-text-muted, #64748b);
  font-size: 12px;
  margin-right: 6px;
}
.nav-item-name[data-v-e61c5b8c] {
  color: var(--color-text-primary, #292929);
  font-weight: 500;
}
.nav-item-disabled[data-v-e61c5b8c] {
  color: var(--color-text-disabled, #94a3b8);
}

/* Modal Styles */
.confirm-modal-card[data-v-e61c5b8c] {
  min-width: 400px;
  max-width: 500px;
  border-radius: 1rem;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.confirm-ok-btn[data-v-e61c5b8c] {
  background-color: var(--q-primary);
  color: var(--q-info);
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.2s;
}
.confirm-ok-btn[data-v-e61c5b8c]:hover {
  background-color: color-mix(in srgb, var(--q-primary) 85%, black);
  transform: translateY(-1px);
}
.cancel-btn[data-v-e61c5b8c] {
  color: var(--q-positive);
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.2s;
}
.cancel-btn[data-v-e61c5b8c]:hover {
  background-color: var(--q-dark);
  color: var(--q-accent);
}
.text-slate-900[data-v-e61c5b8c] {
  color: var(--color-text-primary);
}
.text-slate-600[data-v-e61c5b8c] {
  color: var(--q-positive);
}
@media (max-width: 600px) {
.confirm-modal-card[data-v-e61c5b8c] {
    min-width: 90vw;
}
}


.loading-state[data-v-6c587ebc] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
}
.load-images-container[data-v-6c587ebc] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0;
}

/* Dropzone DnD Variant */
.dropzone[data-v-6c587ebc] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 32px;
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dropzone[data-v-6c587ebc]:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}
.dropzone--active[data-v-6c587ebc] {
  border-color: #3b82f6;
  background: #eff6ff;
}
.dropzone-content[data-v-6c587ebc] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.dropzone-text[data-v-6c587ebc] {
  margin: 0;
  font-size: 14px;
  color: #64748b;
  text-align: center;
}
.hidden-input[data-v-6c587ebc] {
  display: none;
}

/* Standard Variant */
.upload-section[data-v-6c587ebc] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.section-title[data-v-6c587ebc] {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}
.upload-input-wrapper[data-v-6c587ebc] {
  max-width: 100%;
}
.upload-input[data-v-6c587ebc] {
  width: 100%;
}
.upload-input[data-v-6c587ebc] .q-field__control {
  border-radius: 12px;
}

/* Files Grid */
.files-grid[data-v-6c587ebc] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.file-card[data-v-6c587ebc] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: all 0.2s ease;
}
.file-card[data-v-6c587ebc]:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.file-card-content[data-v-6c587ebc] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.file-preview[data-v-6c587ebc] {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
}
.file-info[data-v-6c587ebc] {
  flex: 1;
  min-width: 0;
}
.file-name[data-v-6c587ebc] {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.delete-btn[data-v-6c587ebc] {
  flex-shrink: 0;
}


.confirm-modal-card[data-v-5c91fea8] {
  min-width: 400px;
  max-width: 500px;
  border-radius: 1rem;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.confirm-ok-btn[data-v-5c91fea8] {
  background-color: var(--q-primary);
  color: var(--q-info);
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.2s;
}
.confirm-ok-btn[data-v-5c91fea8]:hover {
  background-color: color-mix(in srgb, var(--q-primary) 85%, black);
  transform: translateY(-1px);
}
.cancel-btn[data-v-5c91fea8] {
  color: var(--q-positive);
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.2s;
}
.cancel-btn[data-v-5c91fea8]:hover {
  background-color: var(--q-dark);
  color: var(--q-accent);
}
.confirm-dialog-title[data-v-5c91fea8] {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--q-accent);
}
.confirm-dialog-message[data-v-5c91fea8] {
  color: var(--q-positive);
  margin: 0;
  padding: 15px 0px;
}
.confirm-dialog-icon[data-v-5c91fea8] {
  color: var(--q-primary);
}
@media (max-width: 600px) {
.confirm-modal-card[data-v-5c91fea8] {
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    text-align: left;
    text-justify: inter-word;
    text-indent: 0;
    text-transform: none;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    word-break: break-all;
    word-break: break-word;
    word-break: break-word;
    min-width: 90vw;
}
}


/* Loading State for translations */
.loading-state[data-v-72e4cd58] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.loader[data-v-72e4cd58] {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-72e4cd58 0.8s linear infinite;
}
@keyframes spin-72e4cd58 {
to {
    transform: rotate(360deg);
}
}
.test-view-container[data-v-72e4cd58] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  animation: fadeIn-72e4cd58 0.5s ease-in-out;
  position: relative;
}

/* Loading State */
.loading-container[data-v-72e4cd58] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 16px;
}
.loading-text[data-v-72e4cd58] {
  color: var(--q-positive);
  font-size: 14px;
}

/* Test Starting Loader */
.test-starting-container[data-v-72e4cd58] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 40px 20px;
}
.test-starting-card[data-v-72e4cd58] {
  background: var(--q-info);
  border-radius: 20px;
  padding: 48px 40px;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--q-dark);
  max-width: 400px;
  width: 100%;
  animation: fadeInScale-72e4cd58 0.3s ease-out;
}
@keyframes fadeInScale-72e4cd58 {
from {
    opacity: 0;
    transform: scale(0.95);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
.test-starting-spinner[data-v-72e4cd58] {
  margin-bottom: 24px;
}
.test-starting-title[data-v-72e4cd58] {
  font-size: 22px;
  font-weight: 700;
  color: var(--q-accent);
}
.test-starting-text[data-v-72e4cd58] {
  font-size: 14px;
  color: var(--q-positive);
}
.test-starting-progress[data-v-72e4cd58] {
  max-width: 200px;
  margin: 0 auto;
}

/* Test Running Mode */
.test-running[data-v-72e4cd58] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.test-run-header[data-v-72e4cd58] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--q-info);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.test-run-navigation[data-v-72e4cd58] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.question-counter[data-v-72e4cd58] {
  font-weight: 600;
  color: var(--q-accent);
}
.test-run-progress[data-v-72e4cd58] {
  text-align: center;
}
.test-run-timer[data-v-72e4cd58] {
  font-size: 14px;
  color: var(--q-positive);
}
.timer-value[data-v-72e4cd58] {
  font-weight: 700;
  color: var(--q-primary);
  font-size: 18px;
}

/* Question Card */
.question-card[data-v-72e4cd58] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 24px;
}
.question-header[data-v-72e4cd58] {
  margin-bottom: 16px;
}
.question-text[data-v-72e4cd58] {
  font-size: 18px;
  font-weight: 500;
  color: var(--q-accent);
  line-height: 1.6;
}
.question-weight[data-v-72e4cd58],
.question-block[data-v-72e4cd58] {
  font-size: 12px;
  color: var(--q-positive);
  margin-top: 8px;
}
.question-hint[data-v-72e4cd58] {
  padding: 12px 0;
  border-bottom: 1px solid var(--q-dark);
  margin-bottom: 16px;
}
.feedback-section[data-v-72e4cd58] {
  margin-bottom: 8px;
}
.feedback-label[data-v-72e4cd58] {
  font-weight: 500;
  margin-right: 8px;
}
.alert-wrong-answer[data-v-72e4cd58] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--q-warning);
  font-size: 13px;
  font-weight: 600;
  background-color: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.type-hint[data-v-72e4cd58] {
  color: var(--q-positive);
  font-size: 14px;
}
.question-image[data-v-72e4cd58] {
  max-height: 300px;
  margin-bottom: 16px;
}

/* Answers */
.answers-section[data-v-72e4cd58] {
  margin-top: 16px;
}
.answers-qa .q-item[data-v-72e4cd58] {
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  transition: all 0.2s;
}
.answers-qa .q-item[data-v-72e4cd58]:hover {
  background: var(--q-dark);
}
.answers-qa .answer-selected[data-v-72e4cd58] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-color: var(--q-primary);
}

/* Sequence answers */
.answers-seq .seq-item[data-v-72e4cd58] {
  padding: 12px 16px;
  background: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: grab;
  display: flex;
  align-items: center;
  gap: 12px;
}
.answers-seq .seq-item[data-v-72e4cd58]:active {
  cursor: grabbing;
}

/* Matching answers */
.answers-eqw .eqw-columns[data-v-72e4cd58] {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.answers-eqw .eqw-column[data-v-72e4cd58] {
  flex: 1;
}
.answers-eqw .eqw-separator[data-v-72e4cd58] {
  display: flex;
  align-items: center;
  padding-top: 20px;
}
.answers-eqw .eqw-item[data-v-72e4cd58] {
  padding: 12px 16px;
  background: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: grab;
  min-height: 50px;
  display: flex;
  align-items: center;
}

/* Open answers */
.answers-opn[data-v-72e4cd58] {
  max-width: 100%;
}

/* Substitution answers */
.answers-sub .sub-container[data-v-72e4cd58] {
  line-height: 2.5;
  font-size: 16px;
}
.answers-sub .sub-input[data-v-72e4cd58] {
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  border-radius: 4px;
  margin: 0 4px;
  min-width: 100px;
}
.answers-sub .sub-input[data-v-72e4cd58]:focus {
  outline: none;
  border-color: var(--q-primary);
}

/* Actions */
.test-run-actions[data-v-72e4cd58] {
  display: flex;
  justify-content: center;
  padding: 16px;
}
.btn-stop[data-v-72e4cd58] {
  padding: 12px 32px;
  font-weight: 600;
}

/* Result section */
.test-result-section[data-v-72e4cd58] {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  padding: 32px 16px;
}
.result-container[data-v-72e4cd58] {
  max-width: 500px;
  text-align: center;
}
.result-icon[data-v-72e4cd58] {
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-icon[data-v-72e4cd58] .q-icon {
  font-size: 56px;
}
.result-icon--passed[data-v-72e4cd58] {
  background-color: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  color: var(--q-success);
}
.result-icon--failed[data-v-72e4cd58] {
  background-color: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}
.result-icon--pending[data-v-72e4cd58] {
  background-color: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  color: var(--q-primary);
}
.result-title[data-v-72e4cd58] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
}
.result-subtitle[data-v-72e4cd58] {
  color: var(--q-positive);
  font-size: 14px;
}
.result-stats[data-v-72e4cd58] {
  display: flex;
  justify-content: center;
  gap: 48px;
  background-color: var(--q-dark);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 20px;
  margin-bottom: 24px;
}
.result-stat[data-v-72e4cd58] {
  text-align: center;
}
.result-stat-label[data-v-72e4cd58] {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--q-positive);
  margin-bottom: 4px;
}
.result-stat-value[data-v-72e4cd58] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
}
.result-stat-value--passed[data-v-72e4cd58] {
  color: var(--q-success);
}
.result-stat-value--failed[data-v-72e4cd58] {
  color: var(--q-warning);
}
.result-btn[data-v-72e4cd58] {
  background: var(--q-primary);
  color: var(--q-info);
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
}
.result-btn[data-v-72e4cd58]:hover {
  background: color-mix(in srgb, var(--q-primary) 85%, black);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.result-nav-section[data-v-72e4cd58] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 280px;
  margin-top: 8px;
}
@media (min-width: 480px) {
.result-nav-section[data-v-72e4cd58] {
    flex-direction: row;
    max-width: none;
}
}
.result-btn--primary[data-v-72e4cd58] {
  background: var(--q-primary);
  color: var(--q-info);
  padding: 12px 24px;
  border-radius: 24px;
  font-weight: 600;
  font-size: 14px;
  flex: 1;
}
.result-btn--primary[data-v-72e4cd58]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 85%, black);
}
.result-btn--primary[data-v-72e4cd58]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.result-btn--secondary[data-v-72e4cd58] {
  background: rgb(241, 245, 249);
  color: rgb(71, 85, 105);
  padding: 12px 24px;
  border-radius: 24px;
  font-weight: 600;
  font-size: 14px;
  flex: 1;
}
.result-btn--secondary[data-v-72e4cd58]:hover {
  background: rgb(226, 232, 240);
}

/* Banners */
.banner[data-v-72e4cd58] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
}
.banner-success[data-v-72e4cd58] {
  background: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  color: var(--q-success);
  border: 1px solid color-mix(in srgb, var(--q-success) 30%, var(--q-info));
}
.banner-warning[data-v-72e4cd58] {
  background: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
  color: var(--q-secondary);
  border: 1px solid color-mix(in srgb, var(--q-secondary) 30%, var(--q-info));
}
@keyframes fadeIn-72e4cd58 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Header Card */
.header-card[data-v-72e4cd58] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.header-content[data-v-72e4cd58] {
  padding: 24px;
  position: relative;
}
@media (min-width: 768px) {
.header-content[data-v-72e4cd58] {
    padding: 32px;
}
}
.header-decoration[data-v-72e4cd58] {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -40px;
  margin-right: -40px;
  width: 160px;
  height: 160px;
  background: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.6;
  pointer-events: none;
}
.header-layout[data-v-72e4cd58] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 10;
}
@media (min-width: 768px) {
.header-layout[data-v-72e4cd58] {
    flex-direction: row;
}
}
.header-info[data-v-72e4cd58] {
  flex: 1;
}
.header-banner[data-v-72e4cd58] {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--q-dark);
}
.header-banner-blur[data-v-72e4cd58] {
  position: absolute !important;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  filter: blur(25px) saturate(1.2);
  opacity: 0.6;
  z-index: 0;
}
.header-banner-image[data-v-72e4cd58] {
  position: relative;
  width: 100%;
  max-height: 300px;
  z-index: 1;
}
@media (min-width: 768px) {
.header-banner-image[data-v-72e4cd58] {
    max-height: 400px;
}
}
.header-meta[data-v-72e4cd58] {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  margin-bottom: 12px;
}
.status-badge[data-v-72e4cd58] {
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid;
}
.status-completed[data-v-72e4cd58] {
  background: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  color: var(--q-success);
  border-color: color-mix(in srgb, var(--q-success) 30%, var(--q-info));
}
.status-failed[data-v-72e4cd58] {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
  border-color: color-mix(in srgb, var(--q-warning) 30%, var(--q-info));
}
.status-not_started[data-v-72e4cd58] {
  background: var(--q-dark);
  color: var(--q-accent);
  border-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.meta-date[data-v-72e4cd58] {
  color: var(--q-positive);
  display: flex;
  align-items: center;
  gap: 4px;
}
.header-title[data-v-72e4cd58] {
  font-size: 30px;
  font-weight: 700;
  color: var(--q-accent);
  margin-bottom: 16px;
  line-height: 30px;
}
.btn-start[data-v-72e4cd58] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--q-primary);
  color: var(--q-info);
  font-weight: 600;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}
.btn-start[data-v-72e4cd58]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 85%, black);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.btn-start[data-v-72e4cd58]:active {
  transform: translateY(0);
}
.btn-start-icon[data-v-72e4cd58] {
  fill: currentColor;
}

/* Quick Stats Grid */
.stats-quick-grid[data-v-72e4cd58] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex-shrink: 0;
}
@media (min-width: 768px) {
.stats-quick-grid[data-v-72e4cd58] {
    width: 320px;
}
}
.stat-quick-item[data-v-72e4cd58] {
  background: var(--q-dark);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-dark));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.stat-quick-icon[data-v-72e4cd58] {
  color: var(--q-primary);
  margin-bottom: 4px;
}
.stat-quick-value[data-v-72e4cd58] {
  font-weight: 700;
  color: var(--q-accent);
  font-size: 16px;
}
.stat-quick-label[data-v-72e4cd58] {
  font-size: 10px;
  color: var(--q-positive);
  text-transform: uppercase;
  margin-top: 2px;
}

/* Content Grid */
.content-grid[data-v-72e4cd58] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}
@media (min-width: 768px) {
.content-grid[data-v-72e4cd58] {
    grid-template-columns: 2fr 1fr;
}
}
.content-main[data-v-72e4cd58] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Description Card */
.description-card[data-v-72e4cd58] {
  background: var(--q-info);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.section-title[data-v-72e4cd58] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 20px;
}
.title-icon[data-v-72e4cd58] {
  color: var(--q-primary);
}
.title-icon-gray[data-v-72e4cd58] {
  color: var(--q-positive);
}
.description-text[data-v-72e4cd58] {
  color: var(--q-positive);
  line-height: 1.5;
}
.info-sub-grid[data-v-72e4cd58] {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
.info-sub-grid[data-v-72e4cd58] {
    grid-template-columns: 1fr 1fr;
}
}
.info-sub-item[data-v-72e4cd58] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--q-dark);
}
.info-sub-icon[data-v-72e4cd58] {
  color: var(--q-positive);
}
.info-sub-label[data-v-72e4cd58] {
  font-size: 12px;
  color: var(--q-positive);
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}
.info-sub-value[data-v-72e4cd58] {
  font-size: 14px;
  font-weight: 500;
  color: var(--q-accent);
  margin: 0;
}
.attempts-info[data-v-72e4cd58] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  background: var(--q-dark);
  border-radius: 8px;
  color: var(--q-positive);
  font-size: 14px;
}

/* Sidebar */
.content-sidebar[data-v-72e4cd58] {
  display: flex;
  flex-direction: column;
}
.competencies-card[data-v-72e4cd58] {
  background: var(--q-info);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.competencies-hint[data-v-72e4cd58] {
  font-size: 14px;
  color: var(--q-positive);
  margin-bottom: 16px;
}
.competencies-list[data-v-72e4cd58] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.competency-item[data-v-72e4cd58] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--q-accent);
  background: var(--q-dark);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-dark));
}
.competency-dot[data-v-72e4cd58] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--q-primary);
  flex-shrink: 0;
}
.competencies-empty[data-v-72e4cd58] {
  font-size: 14px;
  color: var(--q-positive);
  font-style: italic;
  margin: 0 !important;
}

/* ============================================
   TEST RUNNER STYLES (Test Running Mode)
   ============================================ */
.test-runner[data-v-72e4cd58] {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 8rem);
}

/* Top Bar */
.top-bar[data-v-72e4cd58] {
  background-color: var(--q-info);
  padding: 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
}
.top-bar-left[data-v-72e4cd58] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.question-counter[data-v-72e4cd58] {
  width: 40px;
  height: 40px;
  background-color: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
  font-weight: 700;
  font-size: 14px;
}
.progress-bar-wrapper[data-v-72e4cd58] {
  display: none;
}
@media (min-width: 640px) {
.progress-bar-wrapper[data-v-72e4cd58] {
    display: block;
    width: 128px;
}
}
.timer[data-v-72e4cd58] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: monospace;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  background-color: var(--q-dark);
  color: var(--q-positive);
}
.timer--warning[data-v-72e4cd58] {
  background-color: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
  animation: pulse-72e4cd58 1s infinite;
}

/* Test Results Display (show_results == 3) */
.test-results-display[data-v-72e4cd58] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 8px;
  background-color: var(--q-dark);
}
.results-percentage[data-v-72e4cd58] {
  font-size: 16px;
  font-weight: 600;
  color: var(--q-accent);
}
.results-status[data-v-72e4cd58] {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
}
.results-status--passed[data-v-72e4cd58] {
  color: var(--q-secondary);
  background-color: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
}
.results-status--failed[data-v-72e4cd58] {
  color: var(--q-warning);
  background-color: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
}
@media (max-width: 768px) {
.test-results-display[data-v-72e4cd58] {
    padding: 6px 12px;
}
.results-percentage[data-v-72e4cd58] {
    font-size: 14px;
}
.results-status[data-v-72e4cd58] {
    font-size: 11px;
}
}
@keyframes pulse-72e4cd58 {
0%,
  100% {
    opacity: 1;
}
50% {
    opacity: 0.7;
}
}

/* Question Card */
.question-card[data-v-72e4cd58] {
  flex: 1;
  background-color: var(--q-info);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow-y: auto;
}
@media (min-width: 768px) {
.question-card[data-v-72e4cd58] {
    padding: 32px;
}
}
.question-header[data-v-72e4cd58] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.question-title[data-v-72e4cd58] {
  font-size: 20px;
  font-weight: 700;
  color: var(--q-accent);
  line-height: 1.4;
  margin: 0;
}
@media (min-width: 768px) {
.question-title[data-v-72e4cd58] {
    font-size: 24px;
}
}
.question-meta[data-v-72e4cd58] {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}
.question-weight[data-v-72e4cd58],
.question-block[data-v-72e4cd58] {
  font-size: 12px;
  color: var(--q-positive);
  background: var(--q-dark);
  padding: 4px 8px;
  border-radius: 4px;
}
.question-description[data-v-72e4cd58] {
  background-color: var(--q-dark);
  padding: 16px;
  border-radius: 12px;
  color: var(--q-positive);
  margin-bottom: 12px;
  font-size: 14px;
  border: 1px solid var(--q-dark);
}
.question-image[data-v-72e4cd58] {
  max-height: 300px;
  border-radius: 8px;
  margin-bottom: 16px;
}

/* Options List (QA type) */
.options-list[data-v-72e4cd58] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.option-item[data-v-72e4cd58] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  background-color: var(--q-info);
  cursor: pointer;
  transition: all 0.2s ease;
}
.option-item[data-v-72e4cd58]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  background-color: var(--q-dark);
}
.option-item--selected[data-v-72e4cd58] {
  background-color: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-color: var(--q-primary);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--q-primary) 10%, transparent);
}
.radio-circle[data-v-72e4cd58] {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.radio-circle--selected[data-v-72e4cd58] {
  border-color: var(--q-primary);
}
.radio-dot[data-v-72e4cd58] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--q-primary);
}
.checkbox-box[data-v-72e4cd58] {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: var(--q-info);
  transition: all 0.2s ease;
}
.checkbox-box--selected[data-v-72e4cd58] {
  background-color: var(--q-primary);
  border-color: var(--q-primary);
  animation: checkPop-72e4cd58 0.2s ease;
}
@keyframes checkPop-72e4cd58 {
0% {
    transform: scale(0.8);
}
50% {
    transform: scale(1.1);
}
100% {
    transform: scale(1);
}
}
.option-text[data-v-72e4cd58] {
  color: var(--q-accent);
  font-weight: 500;
}
.option-image[data-v-72e4cd58] {
  max-height: 80px;
  border-radius: 6px;
}

/* Matching Grid (EQW type) */
.matching-grid[data-v-72e4cd58] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 640px) {
.matching-grid[data-v-72e4cd58] {
    grid-template-columns: 1fr 1fr;
}
}
.matching-column[data-v-72e4cd58] {
  display: flex;
  flex-direction: column;
}
.matching-column-draggable[data-v-72e4cd58] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.matching-column-title[data-v-72e4cd58] {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--q-positive);
  margin: 0;
}
.matching-item[data-v-72e4cd58] {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  transition: all 0.2s ease;
  position: relative;
  cursor: grab;
}
.matching-item[data-v-72e4cd58]:active {
  cursor: grabbing;
}
.matching-item--left[data-v-72e4cd58] {
  background-color: var(--q-info);
  cursor: pointer;
}
.matching-item--left[data-v-72e4cd58]:hover:not(.matching-item--matched) {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
}
.matching-item--matched[data-v-72e4cd58] {
  background-color: color-mix(in srgb, var(--q-success) 10%, var(--q-info));
  border-color: color-mix(in srgb, var(--q-success) 30%, var(--q-info));
  cursor: default;
  opacity: 0.8;
}
.matching-item--selected[data-v-72e4cd58] {
  background-color: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-color: var(--q-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--q-primary) 20%, var(--q-info));
}
.matching-item--right[data-v-72e4cd58] {
  background-color: var(--q-dark);
  cursor: default;
}
.matching-item--used[data-v-72e4cd58] {
  background-color: var(--q-dark);
  color: var(--q-positive);
  cursor: not-allowed;
}
.matching-item--selectable[data-v-72e4cd58] {
  background-color: var(--q-info);
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  border-style: dashed;
  cursor: pointer;
}
.matching-item--selectable[data-v-72e4cd58]:hover {
  background-color: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
}
.matching-item-text[data-v-72e4cd58] {
  font-weight: 500;
}
.matching-item-status[data-v-72e4cd58] {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Order List (SEQ type) */
.order-list[data-v-72e4cd58] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.order-item[data-v-72e4cd58] {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--q-info);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: grab;
  transition: all 0.2s ease;
}
.order-controls[data-v-72e4cd58] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.order-controls .q-btn[data-v-72e4cd58] {
  color: var(--q-positive);
}
.order-controls .q-btn[data-v-72e4cd58]:hover:not(:disabled) {
  color: var(--q-primary);
}
.order-item[data-v-72e4cd58]:active {
  cursor: grabbing;
}
.order-item[data-v-72e4cd58]:hover {
  background-color: var(--q-dark);
}
.order-number[data-v-72e4cd58] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--q-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--q-positive);
}
.order-text[data-v-72e4cd58] {
  font-weight: 500;
  color: var(--q-accent);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Open Question (OPN type) */
.open-question[data-v-72e4cd58] {
  width: 100%;
}
.open-textarea[data-v-72e4cd58] {
  width: 100%;
}
.open-textarea[data-v-72e4cd58] .q-field__control {
  min-height: 150px;
}
.open-textarea[data-v-72e4cd58] textarea {
  font-size: 15px;
  line-height: 1.6;
}

/* Fill Container (SUB type) */
.fill-container[data-v-72e4cd58] {
  background-color: var(--q-info);
  padding: 24px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  line-height: 2.5;
  font-size: 18px;
}
.fill-input[data-v-72e4cd58] {
  margin: 0 4px;
  padding: 4px 8px;
  border: none;
  border-bottom: 2px solid color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  background-color: var(--q-dark);
  text-align: center;
  width: 128px;
  border-radius: 4px 4px 0 0;
  font-weight: 600;
  color: var(--q-primary);
  font-size: 16px;
}
.fill-input[data-v-72e4cd58]:focus {
  outline: none;
  border-bottom-color: var(--q-primary);
}
.fill-input[data-v-72e4cd58]::placeholder {
  color: color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}

/* Navigation Footer */
.navigation-footer[data-v-72e4cd58] {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-btn[data-v-72e4cd58] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.nav-btn--back[data-v-72e4cd58] {
  color: var(--q-positive);
  background: var(--q-dark);
}
.nav-btn--back[data-v-72e4cd58]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  color: var(--q-accent);
}
.nav-btn--next[data-v-72e4cd58] {
  background: var(--q-primary);
  color: var(--q-info);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.nav-btn--next[data-v-72e4cd58]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 85%, black);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.nav-btn--submit[data-v-72e4cd58] {
  background: var(--q-primary);
  color: var(--q-info);
}
.nav-btn--submit[data-v-72e4cd58]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 85%, black);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.nav-btn[data-v-72e4cd58]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Course Navigation Section */
.course-nav-section[data-v-72e4cd58] {
  padding: 16px 20px;
  background: var(--color-bg-secondary, #fff);
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.course-nav-header[data-v-72e4cd58] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.course-nav-left[data-v-72e4cd58] {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.nav-next-btn[data-v-72e4cd58] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 24px;
  background: var(--q-primary);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(102, 153, 255, 0.3);
  transition: all 0.2s;
}
.nav-next-btn[data-v-72e4cd58]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 85%, black);
  box-shadow: 0 4px 12px rgba(102, 153, 255, 0.4);
  transform: translateY(-1px);
}
.nav-next-btn[data-v-72e4cd58]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.nav-dropdown-btn[data-v-72e4cd58] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: transparent;
  color: var(--color-text-muted, #64748b);
  font-weight: 500;
  font-size: 14px;
  border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  transition: all 0.2s;
}
.nav-dropdown-btn[data-v-72e4cd58]:hover {
  border-color: var(--q-primary);
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 5%, transparent);
}
.nav-item-type[data-v-72e4cd58] {
  color: var(--color-text-muted, #64748b);
  font-size: 12px;
  margin-right: 6px;
}
.nav-item-name[data-v-72e4cd58] {
  color: var(--color-text-primary, #292929);
  font-weight: 500;
}
.nav-item-disabled[data-v-72e4cd58] {
  color: var(--color-text-disabled, #94a3b8);
}

/* Comments Button */
.comments-button-wrapper[data-v-72e4cd58] {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}


.test-runner[data-v-2dbbd3df] {
  max-width: 768px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 8rem);
}

/* Result Container */
.result-container[data-v-2dbbd3df] {
  max-width: 600px;
  margin: 48px auto;
  text-align: center;
  animation: fadeInZoom-2dbbd3df 0.3s ease-out;
}
@keyframes fadeInZoom-2dbbd3df {
from {
    opacity: 0;
    transform: scale(0.95);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
.result-icon[data-v-2dbbd3df] {
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-icon--passed[data-v-2dbbd3df] {
  background-color: #dcfce7;
  color: #16a34a;
}
.result-icon--failed[data-v-2dbbd3df] {
  background-color: #fee2e2;
  color: #dc2626;
}
.result-title[data-v-2dbbd3df] {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px 0;
}
.result-subtitle[data-v-2dbbd3df] {
  color: #64748b;
  margin: 0 0 32px 0;
}
.result-stats[data-v-2dbbd3df] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  background-color: white;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 24px;
  margin-bottom: 32px;
}
.result-stat-label[data-v-2dbbd3df] {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 4px;
}
.result-stat-value[data-v-2dbbd3df] {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
}
.result-stat-value--passed[data-v-2dbbd3df] {
  color: #16a34a;
}
.result-stat-value--failed[data-v-2dbbd3df] {
  color: #dc2626;
}
.result-actions[data-v-2dbbd3df] {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.result-btn[data-v-2dbbd3df] {
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 500;
}

/* Top Bar */
.top-bar[data-v-2dbbd3df] {
  background-color: white;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
}
.top-bar-left[data-v-2dbbd3df] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.question-counter[data-v-2dbbd3df] {
  width: 40px;
  height: 40px;
  background-color: #fff1f2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e11d48;
  font-weight: 700;
  font-size: 14px;
}
.progress-bar-wrapper[data-v-2dbbd3df] {
  display: none;
}
@media (min-width: 640px) {
.progress-bar-wrapper[data-v-2dbbd3df] {
    display: block;
    width: 128px;
}
}
.timer[data-v-2dbbd3df] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: monospace;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  background-color: #f1f5f9;
  color: #475569;
}
.timer--warning[data-v-2dbbd3df] {
  background-color: #fee2e2;
  color: #dc2626;
  animation: pulse-2dbbd3df 1s infinite;
}
@keyframes pulse-2dbbd3df {
0%, 100% {
    opacity: 1;
}
50% {
    opacity: 0.7;
}
}

/* Question Card */
.question-card[data-v-2dbbd3df] {
  flex: 1;
  background-color: white;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow-y: auto;
}
@media (min-width: 768px) {
.question-card[data-v-2dbbd3df] {
    padding: 32px;
}
}
.question-header[data-v-2dbbd3df] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.question-title[data-v-2dbbd3df] {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.4;
  margin: 0;
}
@media (min-width: 768px) {
.question-title[data-v-2dbbd3df] {
    font-size: 24px;
}
}
.question-description[data-v-2dbbd3df] {
  background-color: #f8fafc;
  padding: 16px;
  border-radius: 12px;
  color: #475569;
  margin-bottom: 24px;
  font-size: 14px;
  border: 1px solid #f1f5f9;
}
.question-content[data-v-2dbbd3df] {
  margin-top: 16px;
}

/* Options (Single & Multiple) */
.options-list[data-v-2dbbd3df] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.option-item[data-v-2dbbd3df] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background-color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}
.option-item[data-v-2dbbd3df]:hover {
  border-color: #fecdd3;
  background-color: #f8fafc;
}
.option-item--selected[data-v-2dbbd3df] {
  background-color: #fff1f2;
  border-color: #f43f5e;
  box-shadow: 0 2px 4px rgba(244, 63, 94, 0.1);
}
.radio-circle[data-v-2dbbd3df] {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.radio-circle--selected[data-v-2dbbd3df] {
  border-color: #e11d48;
}
.radio-dot[data-v-2dbbd3df] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #e11d48;
}
.checkbox-box[data-v-2dbbd3df] {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: white;
}
.checkbox-box--selected[data-v-2dbbd3df] {
  background-color: #e11d48;
  border-color: #e11d48;
}
.option-text[data-v-2dbbd3df] {
  color: #1e293b;
  font-weight: 500;
}
.hidden-input[data-v-2dbbd3df] {
  display: none;
}

/* Matching */
.matching-grid[data-v-2dbbd3df] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 640px) {
.matching-grid[data-v-2dbbd3df] {
    grid-template-columns: 1fr 1fr;
}
}
.matching-column[data-v-2dbbd3df] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.matching-column-title[data-v-2dbbd3df] {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0 0 8px 0;
}
.matching-item[data-v-2dbbd3df] {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
  position: relative;
}
.matching-item--left[data-v-2dbbd3df] {
  background-color: white;
  cursor: pointer;
}
.matching-item--left[data-v-2dbbd3df]:hover:not(.matching-item--matched) {
  border-color: #fecdd3;
}
.matching-item--matched[data-v-2dbbd3df] {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
  cursor: default;
  opacity: 0.8;
}
.matching-item--selected[data-v-2dbbd3df] {
  background-color: #fff1f2;
  border-color: #f43f5e;
  box-shadow: 0 0 0 2px #fecdd3;
}
.matching-item--right[data-v-2dbbd3df] {
  background-color: #f8fafc;
  cursor: default;
}
.matching-item--used[data-v-2dbbd3df] {
  background-color: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}
.matching-item--selectable[data-v-2dbbd3df] {
  background-color: white;
  border-color: #fecdd3;
  border-style: dashed;
  cursor: pointer;
}
.matching-item--selectable[data-v-2dbbd3df]:hover {
  background-color: #fff1f2;
}
.matching-item-text[data-v-2dbbd3df] {
  font-weight: 500;
}
.matching-item-status[data-v-2dbbd3df] {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Order */
.order-list[data-v-2dbbd3df] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.order-item[data-v-2dbbd3df] {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: white;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.order-controls[data-v-2dbbd3df] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.order-controls .q-btn[data-v-2dbbd3df] {
  color: #94a3b8;
}
.order-controls .q-btn[data-v-2dbbd3df]:hover:not(:disabled) {
  color: #e11d48;
}
.order-number[data-v-2dbbd3df] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #64748b;
}
.order-text[data-v-2dbbd3df] {
  font-weight: 500;
  color: #1e293b;
}

/* Open Question */
.open-question[data-v-2dbbd3df] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.open-textarea[data-v-2dbbd3df] {
  min-height: 120px;
}
.file-upload-area[data-v-2dbbd3df] {
  border: 2px dashed #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
}
.file-upload-area[data-v-2dbbd3df]:hover {
  background-color: #f8fafc;
  border-color: #fecdd3;
}
.file-upload-text[data-v-2dbbd3df] {
  font-size: 14px;
  margin: 0;
}
.file-uploaded-badge[data-v-2dbbd3df] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: #e11d48;
  background-color: #fff1f2;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
}

/* Fill */
.fill-container[data-v-2dbbd3df] {
  background-color: white;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  line-height: 2.5;
  font-size: 18px;
}
.fill-input[data-v-2dbbd3df] {
  margin: 0 4px;
  padding: 4px 8px;
  border: none;
  border-bottom: 2px solid #cbd5e1;
  background-color: #f8fafc;
  text-align: center;
  width: 128px;
  border-radius: 4px 4px 0 0;
  font-weight: 600;
  color: #e11d48;
  font-size: 16px;
}
.fill-input[data-v-2dbbd3df]:focus {
  outline: none;
  border-bottom-color: #f43f5e;
}
.fill-input[data-v-2dbbd3df]::placeholder {
  color: #cbd5e1;
}

/* Navigation Footer */
.navigation-footer[data-v-2dbbd3df] {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-btn[data-v-2dbbd3df] {
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 500;
}
.nav-btn--back[data-v-2dbbd3df] {
  color: #64748b;
}
.nav-btn--back[data-v-2dbbd3df]:hover:not(:disabled) {
  background-color: #e2e8f0;
  color: #1e293b;
}
.nav-btn--next[data-v-2dbbd3df] {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.nav-btn--submit[data-v-2dbbd3df] {
  box-shadow: 0 4px 12px rgba(var(--q-primary-rgb, 225, 29, 72), 0.2);
}

/* Error State */
.error-state[data-v-2dbbd3df] {
  padding: 48px;
  text-align: center;
  color: #64748b;
}



.pvd-card[data-v-48b7f53c] {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pvd-bar[data-v-48b7f53c] {
  background: var(--q-primary);
  color: white;
  padding: 8px 16px;
  min-height: 48px;
}
.pvd-title[data-v-48b7f53c] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.pvd-container[data-v-48b7f53c] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e293b;
  padding: 0;
}
.pvd-iframe[data-v-48b7f53c] {
  width: 100%;
  height: 100%;
  border: none;
  background: white;
}
.pvd-empty[data-v-48b7f53c] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}


.lrd-card[data-v-2cde96fc] {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.lrd-bar[data-v-2cde96fc] {
  background: var(--q-primary);
  color: white;
  padding: 8px 16px;
  min-height: 48px;
}
.lrd-title[data-v-2cde96fc] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.lrd-scroll-area[data-v-2cde96fc] {
  flex: 1;
  height: calc(100% - 48px);
}
.lrd-content[data-v-2cde96fc] {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px;
}
.lrd-block[data-v-2cde96fc] {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e2e8f0;
}
.lrd-block[data-v-2cde96fc]:last-child {
  border-bottom: none;
}
.lrd-block-title[data-v-2cde96fc] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 16px 0;
  line-height: 1.3;
}
.lrd-keywords[data-v-2cde96fc] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.lrd-keyword-chip[data-v-2cde96fc] {
  font-size: 12px;
  line-height: 1.4;
}
.lrd-block-content[data-v-2cde96fc] {
  font-size: 16px;
  color: #334155;
  line-height: 1.7;
}
.lrd-block-content[data-v-2cde96fc] p {
  margin: 0 0 16px 0;
  line-height: 1.7;
}
.lrd-block-content[data-v-2cde96fc] h1,
.lrd-block-content[data-v-2cde96fc] h2,
.lrd-block-content[data-v-2cde96fc] h3,
.lrd-block-content[data-v-2cde96fc] h4 {
  color: var(--q-accent);
  margin: 24px 0 12px 0;
  line-height: 1.3;
}
.lrd-block-content[data-v-2cde96fc] ul,
.lrd-block-content[data-v-2cde96fc] ol {
  padding-left: 24px;
  margin: 16px 0;
}
.lrd-block-content[data-v-2cde96fc] li {
  margin-bottom: 8px;
  line-height: 1.6;
}
.lrd-block-content[data-v-2cde96fc] img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 16px 0;
}
.lrd-block-content[data-v-2cde96fc] a {
  color: var(--q-primary);
  text-decoration: underline;
}
.lrd-block-content[data-v-2cde96fc] blockquote {
  border-left: 4px solid var(--q-primary);
  padding-left: 16px;
  margin: 16px 0;
  color: #475569;
  font-style: italic;
}
.lrd-block-content[data-v-2cde96fc] pre,
.lrd-block-content[data-v-2cde96fc] code {
  background: #f1f5f9;
  border-radius: 4px;
  font-family: monospace;
}
.lrd-block-content[data-v-2cde96fc] pre {
  padding: 16px;
  overflow-x: auto;
}
.lrd-block-content[data-v-2cde96fc] code {
  padding: 2px 6px;
}
.lrd-block-content[data-v-2cde96fc] table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}
.lrd-block-content[data-v-2cde96fc] th,
.lrd-block-content[data-v-2cde96fc] td {
  border: 1px solid #e2e8f0;
  padding: 12px;
  text-align: left;
}
.lrd-block-content[data-v-2cde96fc] th {
  background: #f8fafc;
  font-weight: 600;
}
.lrd-empty[data-v-2cde96fc] {
  text-align: center;
  padding: 64px 24px;
  color: #94a3b8;
  font-size: 16px;
}


.mdd-card[data-v-dedb25b4] {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mdd-bar[data-v-dedb25b4] {
  background: var(--q-primary);
  color: white;
  padding: 8px 16px;
  min-height: 48px;
}
.mdd-title[data-v-dedb25b4] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.mdd-scroll-area[data-v-dedb25b4] {
  flex: 1;
  height: calc(100% - 48px);
}
.mdd-content[data-v-dedb25b4] {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
}
.mdd-block[data-v-dedb25b4] {
  margin-bottom: 48px;
}
.mdd-block-title[data-v-dedb25b4] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 16px 0;
  line-height: 1.3;
}
.mdd-keywords[data-v-dedb25b4] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.mdd-keyword-chip[data-v-dedb25b4] {
  font-size: 12px;
  line-height: 1.4;
}
.mdd-video-container[data-v-dedb25b4] {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #0f172a;
}
.mdd-video-container[data-v-dedb25b4] iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.mdd-empty[data-v-dedb25b4] {
  text-align: center;
  padding: 64px 24px;
  color: #94a3b8;
  font-size: 16px;
}
@media (max-width: 768px) {
.mdd-video-container[data-v-dedb25b4] {
    padding-bottom: 75%;
}
}


.fgd-card[data-v-d8d5da70] {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.fgd-bar[data-v-d8d5da70] {
  background: var(--q-primary);
  color: white;
  padding: 8px 16px;
  min-height: 48px;
}
.fgd-title[data-v-d8d5da70] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.fgd-container[data-v-d8d5da70] {
  flex: 1;
  overflow-y: auto;
  background: #f8fafc;
}
.fgd-gallery[data-v-d8d5da70] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  gap: 16px;
  padding: 20px;
}
.fgd-file-card[data-v-d8d5da70] {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  min-height: 220px;
}
.fgd-file-card[data-v-d8d5da70]:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  border-color: #cbd5e1;
}
.fgd-file-preview[data-v-d8d5da70] {
  position: relative;
  width: 100%;
  height: 140px;
  min-height: 140px;
  background: #f1f5f9;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fgd-file-image[data-v-d8d5da70] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fgd-file-icon-wrapper[data-v-d8d5da70] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  gap: 8px;
}
.fgd-file-icon[data-v-d8d5da70] {
  color: #94a3b8;
  font-size: 48px;
}
.fgd-file-ext[data-v-d8d5da70] {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  background: #e2e8f0;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.4;
}
.fgd-file-info[data-v-d8d5da70] {
  display: block;
  padding: 10px 12px 8px;
  background: white;
}
.fgd-file-name[data-v-d8d5da70] {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin: 0;
}
.fgd-file-size[data-v-d8d5da70] {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
  line-height: 1.3;
}
.fgd-file-actions[data-v-d8d5da70] {
  display: flex;
  padding: 0 8px 10px;
  gap: 4px;
  margin-top: auto;
  background: white;
}
.fgd-file-btn[data-v-d8d5da70] {
  font-size: 12px;
  border-radius: 6px;
  padding: 6px 12px;
  min-height: 32px;
  line-height: 1.4;
}
.fgd-file-btn.fgd-file-btn-open[data-v-d8d5da70] {
  flex: 1;
  color: var(--q-primary);
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.08);
}
.fgd-file-btn.fgd-file-btn-open[data-v-d8d5da70]:hover {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.15);
}
.fgd-file-btn.fgd-file-btn-download[data-v-d8d5da70] {
  flex: 0 0 auto;
  color: #94a3b8;
  min-width: 36px;
}
.fgd-file-btn.fgd-file-btn-download[data-v-d8d5da70]:hover {
  color: var(--q-primary);
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
}
.fgd-empty[data-v-d8d5da70] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  height: 100%;
}
.fgd-empty-icon[data-v-d8d5da70] {
  color: #cbd5e1;
  margin-bottom: 16px;
}
.fgd-empty-title[data-v-d8d5da70] {
  font-size: 18px;
  font-weight: 600;
  color: #334155;
  margin: 0;
  line-height: 1.3;
}


.lkd-card[data-v-7b46aa0d] {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.lkd-bar[data-v-7b46aa0d] {
  background: var(--q-primary);
  color: white;
  padding: 8px 16px;
  min-height: 48px;
}
.lkd-title[data-v-7b46aa0d] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.lkd-scroll-area[data-v-7b46aa0d] {
  flex: 1;
  height: calc(100% - 48px);
}
.lkd-description[data-v-7b46aa0d] {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 16px 0 16px;
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
}
.lkd-list[data-v-7b46aa0d] {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
}
.lkd-list-item[data-v-7b46aa0d] {
  background: white;
  border-radius: 12px;
  margin-bottom: 8px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}
.lkd-list-item[data-v-7b46aa0d]:hover {
  background: #f8fafc;
  border-color: var(--q-primary);
  box-shadow: 0 2px 8px rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
}
.lkd-item-name[data-v-7b46aa0d] {
  font-size: 15px;
  font-weight: 500;
  color: var(--q-accent);
  line-height: 1.4;
}
.lkd-item-url[data-v-7b46aa0d] {
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
  word-break: break-all;
}
.lkd-empty[data-v-7b46aa0d] {
  text-align: center;
  padding: 64px 24px;
  color: #94a3b8;
  font-size: 16px;
}


.h5pd-card[data-v-441689fa] {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.h5pd-bar[data-v-441689fa] {
  background: var(--q-primary);
  color: white;
  padding: 8px 16px;
  min-height: 48px;
}
.h5pd-title[data-v-441689fa] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.h5pd-container[data-v-441689fa] {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  padding: 24px;
  overflow: auto;
}
.h5pd-container[data-v-441689fa] .h5p-player-container {
  width: 100%;
  flex: 1;
}
.h5pd-empty[data-v-441689fa] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}


.mc-card[data-v-076fdd96] {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--q-info);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: all 0.2s;
  height: 100%;
  overflow: hidden;
}
.mc-card-clickable[data-v-076fdd96] {
  cursor: pointer;
}
.mc-card[data-v-076fdd96]:hover {
  border-color: rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Badges */
.mc-badges[data-v-076fdd96] {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
}

/* Header */
.mc-header[data-v-076fdd96] {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}
.mc-icon-box[data-v-076fdd96] {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--q-dark);
  border: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.mc-card:hover .mc-icon-box[data-v-076fdd96] {
  background: var(--q-info);
  border-color: rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
}

/* Icon colors */
.mc-icon-pdf[data-v-076fdd96] { color: #ef4444;
}
.mc-icon-video[data-v-076fdd96] { color: #3b82f6;
}
.mc-icon-media[data-v-076fdd96] { color: #ec4899;
}
.mc-icon-files[data-v-076fdd96] { color: #8b5cf6;
}
.mc-icon-link[data-v-076fdd96] { color: #64748b;
}
.mc-icon-longread[data-v-076fdd96] { color: #16a34a;
}
.mc-icon-scorm[data-v-076fdd96] { color: #f59e0b;
}
.mc-icon-h5p[data-v-076fdd96] { color: #0891b2;
}
.mc-icon-doc[data-v-076fdd96] { color: #1e40af;
}
.mc-icon-default[data-v-076fdd96] { color: #64748b;
}
.mc-type-badge[data-v-076fdd96] {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  background: var(--q-dark);
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1.4;
}
.mc-type-badge-cover[data-v-076fdd96] {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.mc-draft-badge[data-v-076fdd96] {
  font-size: 10px;
  font-weight: 600;
  color: #f59e0b;
  background: #fef3c7;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Title */
.mc-title[data-v-076fdd96] {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
  z-index: 3;
}
.mc-card:hover .mc-title[data-v-076fdd96] {
  color: var(--q-primary);
}

/* Description */
.mc-description[data-v-076fdd96] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 0 0 16px 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  position: relative;
  z-index: 3;
}

/* Footer */
.mc-footer[data-v-076fdd96] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  margin-top: auto;
  position: relative;
  z-index: 3;
  background: var(--q-info);
}
.mc-metadata[data-v-076fdd96] {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 4px;
}
.mc-actions[data-v-076fdd96] {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Action buttons (moderator) */
.mc-action-btn[data-v-076fdd96] {
  color: #94a3b8;
}
.mc-action-btn[data-v-076fdd96]:hover {
  color: var(--q-primary);
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
}
.mc-action-delete[data-v-076fdd96]:hover {
  color: #ef4444;
  background: #fef2f2;
}

/* Open button */
.mc-open-btn[data-v-076fdd96] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  background: var(--q-dark);
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.mc-open-btn[data-v-076fdd96]:hover {
  color: var(--q-primary);
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
}

/* Add content button (moderator) */
.mc-add-content-btn[data-v-076fdd96] {
  color: var(--q-primary);
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
  border: 1px dashed var(--q-primary);
}
.mc-add-content-btn[data-v-076fdd96]:hover {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.2);
}
.mc-no-content[data-v-076fdd96] {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
  line-height: 1.4;
}

/* Cover Image */
.mc-has-cover[data-v-076fdd96] {
  min-height: 200px;
}
.mc-cover-container[data-v-076fdd96] {
  position: absolute;
  inset: 0;
  height: 50%;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}
.mc-cover-gradient[data-v-076fdd96] {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--q-info, white) 10%, transparent, transparent);
  z-index: 2;
}
.mc-cover-image[data-v-076fdd96] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.mc-card:hover .mc-cover-image[data-v-076fdd96] {
  transform: scale(1.05);
}
.mc-header-with-cover[data-v-076fdd96] {
  margin-top: auto;
  padding-top: 24px;
  position: relative;
  z-index: 3;
}
.mc-icon-with-cover[data-v-076fdd96] {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}


.material-view-container[data-v-743aef0a] {
  max-width: 1280px;
  margin: 0 auto;
}
.mv-loading[data-v-743aef0a] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px;
}

/* Program Module Navigation */
.program-nav-section[data-v-743aef0a] {
  padding: 16px 20px;
  background: var(--q-info);
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;
}
.program-nav-header[data-v-743aef0a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.program-nav-left[data-v-743aef0a] {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.nav-status-btn[data-v-743aef0a] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: transparent;
  color: var(--q-positive);
  font-weight: 500;
  font-size: 14px;
  border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  transition: all 0.2s;
}
.nav-status-btn[data-v-743aef0a]:hover:not(:disabled) {
  border-color: var(--q-primary);
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 5%, transparent);
}
.nav-status-btn--done[data-v-743aef0a] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
  border-color: var(--q-primary);
}
.shelf-progress-badge[data-v-743aef0a] {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--q-accent);
}
.nav-finish-btn[data-v-743aef0a] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 24px;
  background: var(--q-primary);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(102, 153, 255, 0.3);
  transition: all 0.2s;
}
.nav-finish-btn[data-v-743aef0a]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 85%, black);
  box-shadow: 0 4px 12px rgba(102, 153, 255, 0.4);
  transform: translateY(-1px);
}
.nav-finish-btn[data-v-743aef0a]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

/* Course Navigation Section */
.course-nav-section[data-v-743aef0a] {
  padding: 16px 20px;
  background: var(--color-bg-secondary, #fff);
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;
}
.course-nav-header[data-v-743aef0a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.course-nav-left[data-v-743aef0a] {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.nav-next-btn[data-v-743aef0a] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 24px;
  background: var(--q-primary);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(102, 153, 255, 0.3);
  transition: all 0.2s;
}
.nav-next-btn[data-v-743aef0a]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 85%, black);
  box-shadow: 0 4px 12px rgba(102, 153, 255, 0.4);
  transform: translateY(-1px);
}
.nav-next-btn[data-v-743aef0a]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.nav-complete-btn[data-v-743aef0a] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: transparent;
  color: var(--color-text-secondary, #555);
  font-weight: 500;
  font-size: 14px;
  border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  transition: all 0.2s;
}
.nav-complete-btn[data-v-743aef0a]:hover:not(:disabled) {
  border-color: var(--q-secondary);
  color: var(--q-secondary);
  background: color-mix(in srgb, var(--q-secondary) 5%, transparent);
}
.nav-complete-btn[data-v-743aef0a]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.nav-complete-btn--done[data-v-743aef0a] {
  background: color-mix(in srgb, var(--q-secondary) 10%, transparent);
  color: var(--q-secondary);
  border-color: var(--q-secondary);
}
.nav-dropdown-btn[data-v-743aef0a] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: transparent;
  color: var(--color-text-muted, #64748b);
  font-weight: 500;
  font-size: 14px;
  border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  transition: all 0.2s;
}
.nav-dropdown-btn[data-v-743aef0a]:hover {
  border-color: var(--q-primary);
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 5%, transparent);
}
.nav-item-type[data-v-743aef0a] {
  color: var(--color-text-muted, #64748b);
  font-size: 12px;
  margin-right: 6px;
}
.nav-item-name[data-v-743aef0a] {
  color: var(--color-text-primary, #292929);
  font-weight: 500;
}
.nav-item-disabled[data-v-743aef0a] {
  color: var(--color-text-disabled, #94a3b8);
}

/* Material Content Section */
.material-content-section[data-v-743aef0a] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 24px;
}
.shelf-header[data-v-743aef0a] {
  margin-bottom: 20px;
}
.shelf-title[data-v-743aef0a] {
  font-size: 20px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 8px 0;
}
.shelf-description[data-v-743aef0a] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
  line-height: 1.5;
}
.material-grid[data-v-743aef0a] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.material-grid-item[data-v-743aef0a] {
  min-width: 0;
}
.material-single[data-v-743aef0a] {
  max-width: 400px;
}
.mv-empty[data-v-743aef0a] {
  text-align: center;
  color: var(--q-positive);
  font-size: 14px;
  font-style: italic;
  padding: 24px;
}


.attempt-accordion[data-v-57aab95e] {
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  background: var(--q-info);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
}
.accordion-header[data-v-57aab95e] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--q-dark);
  cursor: pointer;
  border: none;
  text-align: left;
  transition: background 0.2s;
}
.accordion-header[data-v-57aab95e]:hover {
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
}
.header-left[data-v-57aab95e] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.icon-box[data-v-57aab95e] {
  padding: 8px;
  border-radius: 8px;
  background: var(--q-info);
  color: var(--q-positive);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  transition: all 0.2s;
}
.icon-open[data-v-57aab95e] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
}
.attempt-title[data-v-57aab95e] {
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  font-size: 16px;
}
.attempt-description[data-v-57aab95e] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 0;
}
.header-right[data-v-57aab95e] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.status-badge[data-v-57aab95e] {
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid;
}
.status-completed[data-v-57aab95e] {
  background: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  color: var(--q-success);
  border-color: color-mix(in srgb, var(--q-success) 30%, var(--q-info));
}
.status-failed[data-v-57aab95e] {
  background: color-mix(in srgb, var(--q-negative) 15%, var(--q-info));
  color: var(--q-negative);
  border-color: color-mix(in srgb, var(--q-negative) 30%, var(--q-info));
}
.status-in_progress[data-v-57aab95e] {
  background: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
  color: var(--q-secondary);
  border-color: color-mix(in srgb, var(--q-secondary) 30%, var(--q-info));
}
.status-not_started[data-v-57aab95e] {
  background: var(--q-dark);
  color: var(--q-positive);
  border-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.chevron-icon[data-v-57aab95e] {
  color: var(--q-positive);
}
.accordion-content[data-v-57aab95e] {
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.modules-list[data-v-57aab95e] {
  display: flex;
  flex-direction: column;
}
.module-item[data-v-57aab95e] {
  border-bottom: 1px solid var(--q-dark);
}
.module-item[data-v-57aab95e]:last-child {
  border-bottom: none;
}
.empty-state[data-v-57aab95e] {
  padding: 24px;
  text-align: center;
  color: var(--q-positive);
  font-size: 14px;
  font-style: italic;
}
.separator[data-v-57aab95e] {
  padding: 14px 16px;
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
  border-top: 1px solid color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  border-bottom: 1px solid color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  border-left: 4px solid var(--q-primary);
}
.separator-text[data-v-57aab95e] {
  font-size: 13px;
  font-weight: 700;
  color: var(--q-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


.tree-accordion[data-v-5337b26e] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tree-node[data-v-5337b26e] {
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  background: var(--q-info);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.node-header[data-v-5337b26e] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--q-dark);
  cursor: pointer;
  border: none;
  text-align: left;
  transition: background 0.2s;
}
.node-header[data-v-5337b26e]:hover {
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
}
.header-left[data-v-5337b26e] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.icon-box[data-v-5337b26e] {
  padding: 8px;
  border-radius: 8px;
  background: var(--q-info);
  color: var(--q-positive);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  transition: all 0.2s;
}
.icon-open[data-v-5337b26e] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
}
.node-title[data-v-5337b26e] {
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  font-size: 16px;
}
.node-description[data-v-5337b26e] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 0;
}
.header-right[data-v-5337b26e] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.status-badge[data-v-5337b26e] {
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid;
}
.status-completed[data-v-5337b26e] {
  background: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  color: var(--q-success);
  border-color: color-mix(in srgb, var(--q-success) 30%, var(--q-info));
}
.status-failed[data-v-5337b26e] {
  background: color-mix(in srgb, var(--q-negative) 15%, var(--q-info));
  color: var(--q-negative);
  border-color: color-mix(in srgb, var(--q-negative) 30%, var(--q-info));
}
.status-in_progress[data-v-5337b26e] {
  background: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
  color: var(--q-secondary);
  border-color: color-mix(in srgb, var(--q-secondary) 30%, var(--q-info));
}
.status-not_started[data-v-5337b26e] {
  background: var(--q-dark);
  color: var(--q-positive);
  border-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.status-locked[data-v-5337b26e] {
  background: var(--q-dark);
  color: var(--q-positive);
  border-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.chevron-icon[data-v-5337b26e] {
  color: var(--q-positive);
}
.node-content[data-v-5337b26e] {
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  padding: 12px;
  background: var(--q-dark);
}
.module-item[data-v-5337b26e] {
  margin-bottom: 8px;
}
.module-item[data-v-5337b26e]:last-child {
  margin-bottom: 0;
}
.module-disabled[data-v-5337b26e] {
  opacity: 0.6;
  pointer-events: none;
}
.separator[data-v-5337b26e] {
  padding: 14px 16px;
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
  border-top: 1px solid color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  border-bottom: 1px solid color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  border-left: 4px solid var(--q-primary);
}
.separator-text[data-v-5337b26e] {
  font-size: 13px;
  font-weight: 700;
  color: var(--q-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


.course-view-container[data-v-72c0810a] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  animation: fadeIn-72c0810a 0.5s ease-in-out;
}
@keyframes fadeIn-72c0810a {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Header */
.course-header[data-v-72c0810a] {
  padding: 8px 0;
}

/* Loading & Error States */
.loading-container[data-v-72c0810a],
.error-container[data-v-72c0810a] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
  gap: 16px;
}
.loading-text[data-v-72c0810a],
.error-text[data-v-72c0810a] {
  color: var(--q-positive);
  font-size: 14px;
}

/* Hero Card */
.hero-card[data-v-72c0810a] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.hero-image[data-v-72c0810a] {
  position: relative;
  min-height: 240px;
  background: linear-gradient(to right, var(--q-accent), color-mix(in srgb, var(--q-accent) 80%, var(--q-positive)));
  overflow: visible;
}
@media (min-width: 480px) {
.hero-image[data-v-72c0810a] {
    min-height: 220px;
}
}
@media (min-width: 768px) {
.hero-image[data-v-72c0810a] {
    min-height: 192px;
}
}
.hero-image-bg[data-v-72c0810a] {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-image-overlay[data-v-72c0810a] {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.7) 100%);
}
.hero-content[data-v-72c0810a] {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 768px) {
.hero-content[data-v-72c0810a] {
    padding: 24px 32px;
}
}
.hero-content-layout[data-v-72c0810a] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
@media (min-width: 600px) {
.hero-content-layout[data-v-72c0810a] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
}
.hero-info[data-v-72c0810a] {
  flex: 1;
  min-width: 0;
  width: 100%;
}
@media (min-width: 600px) {
.hero-info[data-v-72c0810a] {
    width: auto;
}
}
.hero-meta[data-v-72c0810a] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: color-mix(in srgb, var(--q-info) 80%, transparent);
  margin-bottom: 8px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
@media (min-width: 768px) {
.hero-meta[data-v-72c0810a] {
    gap: 12px;
    font-size: 14px;
}
}
.status-badge[data-v-72c0810a] {
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid color-mix(in srgb, var(--q-info) 20%, transparent);
  background: color-mix(in srgb, var(--q-info) 10%, transparent);
  backdrop-filter: blur(12px);
  color: var(--q-info);
}
.status-completed[data-v-72c0810a] {
  background: color-mix(in srgb, var(--q-success) 20%, transparent);
  border-color: color-mix(in srgb, var(--q-success) 40%, transparent);
}
.status-in_progress[data-v-72c0810a] {
  background: color-mix(in srgb, var(--q-secondary) 20%, transparent);
  border-color: color-mix(in srgb, var(--q-secondary) 40%, transparent);
}
.meta-date[data-v-72c0810a] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hero-title[data-v-72c0810a] {
  font-size: 16px;
  font-weight: 700;
  color: var(--q-info);
  line-height: 1.3;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.8);
  margin: 0;
  word-break: break-word;
}
@media (min-width: 400px) {
.hero-title[data-v-72c0810a] {
    font-size: 18px;
}
}
@media (min-width: 480px) {
.hero-title[data-v-72c0810a] {
    font-size: 22px;
}
}
@media (min-width: 600px) {
.hero-title[data-v-72c0810a] {
    font-size: 26px;
}
}
@media (min-width: 768px) {
.hero-title[data-v-72c0810a] {
    font-size: 32px;
}
}
@media (min-width: 1024px) {
.hero-title[data-v-72c0810a] {
    font-size: 36px;
}
}
.rating-box[data-v-72c0810a] {
  background: color-mix(in srgb, var(--q-info) 10%, transparent);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--q-info) 10%, transparent);
  flex-shrink: 0;
  align-self: flex-start;
}
@media (min-width: 600px) {
.rating-box[data-v-72c0810a] {
    align-self: flex-end;
}
}
@media (min-width: 768px) {
.rating-box[data-v-72c0810a] {
    padding: 12px;
}
}
.rating-label[data-v-72c0810a] {
  font-size: 10px;
  color: color-mix(in srgb, var(--q-info) 70%, transparent);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 2px;
}
@media (min-width: 768px) {
.rating-label[data-v-72c0810a] {
    font-size: 12px;
    margin-bottom: 4px;
}
}
.stars-container[data-v-72c0810a] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.star-btn[data-v-72c0810a] {
  background: none;
  border: none;
  cursor: pointer;
  color: color-mix(in srgb, var(--q-positive) 60%, var(--q-info));
  transition: all 0.2s;
  padding: 0;
}
.star-btn[data-v-72c0810a]:hover {
  transform: scale(1.1);
}
.star-filled[data-v-72c0810a] {
  color: var(--q-warning);
}
.rating-text[data-v-72c0810a] {
  margin-left: 8px;
  font-size: 14px;
  color: var(--q-info);
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* Hero Body */
.hero-body[data-v-72c0810a] {
  padding: 24px;
}
@media (min-width: 768px) {
.hero-body[data-v-72c0810a] {
    padding: 32px;
}
}
.content-grid[data-v-72c0810a] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
.content-grid[data-v-72c0810a] {
    grid-template-columns: 2fr 1fr;
}
}
.content-left[data-v-72c0810a] {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.section-title[data-v-72c0810a] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  display: flex;
  margin: 0;
  align-items: center;
  gap: 8px;
}
.title-icon[data-v-72c0810a] {
  color: var(--q-primary);
}

/* Description Section */
.description-section[data-v-72c0810a] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.description-main[data-v-72c0810a] {
  color: var(--q-positive);
  line-height: 1.7;
  font-size: 15px;
  margin: 0;
}

/* Info Cards (Target, Program) */
.info-card[data-v-72c0810a] {
  background: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  padding: 20px;
}
.info-card-header[data-v-72c0810a] {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.info-card-icon[data-v-72c0810a] {
  color: var(--q-primary);
}
.info-card-title[data-v-72c0810a] {
  font-size: 16px;
  font-weight: 700;
  color: var(--q-accent);
}
.info-card-text[data-v-72c0810a] {
  color: var(--q-positive);
  line-height: 1.6;
  font-size: 14px;
  margin: 0;
}
.copy-link-btn[data-v-72c0810a] {
  opacity: 0.8;
  transition: opacity 0.2s;
}
.copy-link-btn[data-v-72c0810a]:hover {
  opacity: 1;
}

/* Competencies */
.competencies-section[data-v-72c0810a] {
  margin-top: 16px;
}
.competencies-list[data-v-72c0810a] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.competency-chip[data-v-72c0810a] {
  padding: 6px 12px;
  background: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 9999px;
  font-size: 13px;
  color: var(--q-accent);
}
.content-right[data-v-72c0810a] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Action Card */
.action-card[data-v-72c0810a] {
  background: var(--q-info);
  border-radius: 12px;
  border: 2px solid color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  padding: 24px;
  box-shadow: 0 10px 15px color-mix(in srgb, var(--q-primary) 10%, transparent);
}
.btn-start[data-v-72c0810a] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  background: var(--q-primary);
  color: var(--q-info);
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
  font-size: 18px;
  margin-bottom: 16px;
}
.btn-start[data-v-72c0810a]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 85%, black);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.btn-start[data-v-72c0810a]:active:not(:disabled) {
  transform: translateY(0);
}
.btn-start[data-v-72c0810a]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.action-hint[data-v-72c0810a] {
  text-align: center;
  font-size: 12px;
  color: var(--q-positive);
  margin: 0;
}
.warning-banner[data-v-72c0810a] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
  border-radius: 8px;
  font-size: 13px;
  margin-top: 12px;
}

/* Stats Grid */
.stats-grid[data-v-72c0810a] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.stat-item[data-v-72c0810a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--q-dark);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.stat-item-left[data-v-72c0810a] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.stat-icon-box[data-v-72c0810a] {
  padding: 8px;
  background: var(--q-info);
  border-radius: 8px;
  color: var(--q-positive);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.stat-label[data-v-72c0810a] {
  font-size: 14px;
  font-weight: 500;
  color: var(--q-positive);
}
.stat-value[data-v-72c0810a] {
  font-weight: 700;
  color: var(--q-accent);
}
.stat-value-right[data-v-72c0810a] {
  text-align: right;
}
.stat-subvalue[data-v-72c0810a] {
  font-size: 12px;
  color: var(--q-positive);
}

/* Training Section */
.training-section[data-v-72c0810a] {
  position: relative;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 24px;
  animation: fadeIn-72c0810a 0.5s ease-in-out;
}
.tree-navigation[data-v-72c0810a] {
  min-height: 500px;
}
.module-view-container[data-v-72c0810a] {
  padding: 16px;
}
.attempts-title[data-v-72c0810a] {
  font-size: 20px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  margin-bottom: 16px;
}
.attempts-list[data-v-72c0810a] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Utility Classes */
.full-width[data-v-72c0810a] {
  width: 100%;
}
.full-height[data-v-72c0810a] {
  height: 100%;
}
.text-positive[data-v-72c0810a] {
  color: var(--q-success);
}
.text-warning[data-v-72c0810a] {
  color: var(--q-warning);
}
.cursor-pointer[data-v-72c0810a] {
  cursor: pointer;
}
.cursor-not-allowed[data-v-72c0810a] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Shelf Dialog */
.shelf-description[data-v-72c0810a] {
  color: var(--q-positive);
  white-space: pre-line;
  font-size: 14px;
  line-height: 1.6;
}

/* Notification Modal */
.notification-card[data-v-72c0810a] {
  min-width: 320px;
  max-width: 420px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.notification-card.info[data-v-72c0810a] {
  border-top: 4px solid var(--q-secondary);
}
.notification-card.warning[data-v-72c0810a] {
  border-top: 4px solid var(--q-warning);
}
.notification-card.success[data-v-72c0810a] {
  border-top: 4px solid var(--q-success);
}
.notification-header[data-v-72c0810a] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 24px 16px;
  background: var(--q-dark);
}
.notification-icon[data-v-72c0810a] {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notification-card.info .notification-icon[data-v-72c0810a] {
  background: color-mix(in srgb, var(--q-secondary) 10%, transparent);
  color: var(--q-secondary);
}
.notification-card.warning .notification-icon[data-v-72c0810a] {
  background: color-mix(in srgb, var(--q-warning) 10%, transparent);
  color: var(--q-warning);
}
.notification-card.success .notification-icon[data-v-72c0810a] {
  background: color-mix(in srgb, var(--q-success) 10%, transparent);
  color: var(--q-success);
}
.notification-title[data-v-72c0810a] {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  text-align: center;
}
.notification-body[data-v-72c0810a] {
  padding: 16px 24px;
}
.notification-text[data-v-72c0810a] {
  margin: 0;
  font-size: 14px;
  color: var(--q-positive);
  text-align: center;
  line-height: 1.6;
}
.notification-actions[data-v-72c0810a] {
  padding: 16px 24px 24px;
}
.notification-btn[data-v-72c0810a] {
  min-width: 120px;
  border-radius: 8px;
  font-weight: 600;
  text-transform: none;
}
.notification-card.warning .notification-btn[data-v-72c0810a] {
  background: var(--q-warning) !important;
}
.notification-card.success .notification-btn[data-v-72c0810a] {
  background: var(--q-success) !important;
}


.selection-modal[data-v-1df06a04] {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  border-radius: 20px;
  overflow: hidden;
  background: var(--q-info);
  display: flex;
  flex-direction: column;
}
.modal-header[data-v-1df06a04] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: var(--q-dark);
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.modal-title-row[data-v-1df06a04] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-title[data-v-1df06a04] {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
}
.modal-search[data-v-1df06a04] {
  padding: 16px 24px;
  background: var(--q-info);
  border-bottom: 1px solid var(--q-dark);
}
.modal-search-input[data-v-1df06a04] {
  border-radius: 12px;
}
.modal-search-input[data-v-1df06a04] .q-field__control {
  border-radius: 12px;
  background: var(--q-dark);
}
.modal-search-input[data-v-1df06a04] .q-field__control:hover {
  background: var(--q-info);
}
.modal-body[data-v-1df06a04] {
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--q-info);
}
.modal-loading[data-v-1df06a04],
.modal-empty[data-v-1df06a04] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--q-positive);
  font-size: 14px;
}
.modal-list[data-v-1df06a04] {
  padding: 8px;
}
.modal-list-item[data-v-1df06a04] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 4px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--q-info);
}
.modal-list-item[data-v-1df06a04]:hover {
  background: var(--q-dark);
}
.modal-list-item.selected[data-v-1df06a04] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
}
.item-avatar[data-v-1df06a04] {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--q-info);
  flex-shrink: 0;
}
.item-icon[data-v-1df06a04] {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.item-info[data-v-1df06a04] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.item-name[data-v-1df06a04] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-subtitle[data-v-1df06a04] {
  font-size: 12px;
  color: var(--q-positive);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-footer[data-v-1df06a04] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--q-dark);
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.selected-count[data-v-1df06a04] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--q-positive);
}
.modal-actions[data-v-1df06a04] {
  display: flex;
  gap: 8px;
}
.modal-actions[data-v-1df06a04] .q-btn {
  border-radius: 10px;
  padding: 8px 20px;
}

/* Avatar background colors */
.bg-blue-500[data-v-1df06a04] {
  background-color: var(--q-primary);
}
.bg-green-500[data-v-1df06a04] {
  background-color: #22c55e;
}
.bg-purple-500[data-v-1df06a04] {
  background-color: #a855f7;
}
.bg-orange-500[data-v-1df06a04] {
  background-color: #f97316;
}
.bg-red-500[data-v-1df06a04] {
  background-color: #ef4444;
}
.bg-teal-500[data-v-1df06a04] {
  background-color: #14b8a6;
}
.bg-indigo-500[data-v-1df06a04] {
  background-color: #6366f1;
}
.bg-pink-500[data-v-1df06a04] {
  background-color: #ec4899;
}

/* Icon background colors */
.bg-amber-100[data-v-1df06a04] {
  background-color: color-mix(in srgb, #f97316 15%, var(--q-info));
}
.bg-green-100[data-v-1df06a04] {
  background-color: color-mix(in srgb, #22c55e 15%, var(--q-info));
}
.bg-purple-100[data-v-1df06a04] {
  background-color: color-mix(in srgb, #a855f7 15%, var(--q-info));
}
.bg-red-100[data-v-1df06a04] {
  background-color: color-mix(in srgb, #ef4444 15%, var(--q-info));
}
.bg-orange-100[data-v-1df06a04] {
  background-color: color-mix(in srgb, #f97316 15%, var(--q-info));
}
.bg-blue-100[data-v-1df06a04] {
  background-color: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
}
.bg-teal-100[data-v-1df06a04] {
  background-color: color-mix(in srgb, #14b8a6 15%, var(--q-info));
}


.program-view-container[data-v-09cf5a32] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  animation: fadeIn-09cf5a32 0.5s ease-in-out;
}
@keyframes fadeIn-09cf5a32 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Loading & Error States */
.loading-container[data-v-09cf5a32],
.error-container[data-v-09cf5a32] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
  gap: 16px;
}
.loading-text[data-v-09cf5a32],
.error-text[data-v-09cf5a32] {
  color: var(--q-positive);
  font-size: 14px;
}

/* Hero Card */
.hero-card[data-v-09cf5a32] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.hero-image[data-v-09cf5a32] {
  position: relative;
  min-height: 240px;
  background: linear-gradient(to right, var(--q-accent), color-mix(in srgb, var(--q-accent) 80%, var(--q-positive)));
  overflow: visible;
}
@media (min-width: 480px) {
.hero-image[data-v-09cf5a32] {
    min-height: 220px;
}
}
@media (min-width: 768px) {
.hero-image[data-v-09cf5a32] {
    min-height: 192px;
}
}
.hero-image-bg[data-v-09cf5a32] {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-image-overlay[data-v-09cf5a32] {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.7) 100%);
}
.hero-content[data-v-09cf5a32] {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 768px) {
.hero-content[data-v-09cf5a32] {
    padding: 24px 32px;
}
}
.hero-content-layout[data-v-09cf5a32] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
@media (min-width: 600px) {
.hero-content-layout[data-v-09cf5a32] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
}
.hero-info[data-v-09cf5a32] {
  flex: 1;
  min-width: 0;
  width: 100%;
}
@media (min-width: 600px) {
.hero-info[data-v-09cf5a32] {
    width: auto;
}
}
.hero-meta[data-v-09cf5a32] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: color-mix(in srgb, var(--q-info) 80%, transparent);
  margin-bottom: 8px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
@media (min-width: 768px) {
.hero-meta[data-v-09cf5a32] {
    gap: 12px;
    font-size: 14px;
}
}
.status-badge[data-v-09cf5a32] {
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid color-mix(in srgb, var(--q-info) 20%, transparent);
  background: color-mix(in srgb, var(--q-info) 10%, transparent);
  backdrop-filter: blur(12px);
  color: var(--q-info);
}
.status-completed[data-v-09cf5a32] {
  background: color-mix(in srgb, var(--q-success) 20%, transparent);
  border-color: color-mix(in srgb, var(--q-success) 40%, transparent);
}
.status-in_progress[data-v-09cf5a32] {
  background: color-mix(in srgb, var(--q-secondary) 20%, transparent);
  border-color: color-mix(in srgb, var(--q-secondary) 40%, transparent);
}
.meta-category[data-v-09cf5a32] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hero-title[data-v-09cf5a32] {
  font-size: 16px;
  font-weight: 700;
  color: var(--q-info);
  line-height: 1.3;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.8);
  margin: 0;
  word-break: break-word;
}
@media (min-width: 400px) {
.hero-title[data-v-09cf5a32] {
    font-size: 18px;
}
}
@media (min-width: 480px) {
.hero-title[data-v-09cf5a32] {
    font-size: 22px;
}
}
@media (min-width: 600px) {
.hero-title[data-v-09cf5a32] {
    font-size: 26px;
}
}
@media (min-width: 768px) {
.hero-title[data-v-09cf5a32] {
    font-size: 32px;
}
}
@media (min-width: 1024px) {
.hero-title[data-v-09cf5a32] {
    font-size: 36px;
}
}
.copy-link-btn[data-v-09cf5a32] {
  opacity: 0.8;
  transition: opacity 0.2s;
}
.copy-link-btn[data-v-09cf5a32]:hover {
  opacity: 1;
}

/* Hero Body */
.hero-body[data-v-09cf5a32] {
  padding: 24px;
}
@media (min-width: 768px) {
.hero-body[data-v-09cf5a32] {
    padding: 32px;
}
}
.content-grid[data-v-09cf5a32] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
.content-grid[data-v-09cf5a32] {
    grid-template-columns: 2fr 1fr;
}
}
.content-left[data-v-09cf5a32] {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.section-title[data-v-09cf5a32] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  display: flex;
  margin: 0;
  align-items: center;
  gap: 8px;
}
.title-icon[data-v-09cf5a32] {
  color: var(--q-primary);
}

/* Description Section */
.description-section[data-v-09cf5a32] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.description-main[data-v-09cf5a32] {
  color: var(--q-positive);
  line-height: 1.7;
  font-size: 15px;
  margin: 0;
}

/* Info Cards */
.info-card[data-v-09cf5a32] {
  background: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  padding: 20px;
}
.info-card-header[data-v-09cf5a32] {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.info-card-icon[data-v-09cf5a32] {
  color: var(--q-primary);
}
.info-card-title[data-v-09cf5a32] {
  font-size: 16px;
  font-weight: 700;
  color: var(--q-accent);
}
.info-card-text[data-v-09cf5a32] {
  color: var(--q-positive);
  line-height: 1.6;
  font-size: 14px;
  margin: 0;
}
.content-right[data-v-09cf5a32] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Auditor Card */
.auditor-card[data-v-09cf5a32] {
  background: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  padding: 20px;
}
.auditor-card-title[data-v-09cf5a32] {
  font-size: 16px;
  font-weight: 700;
  color: var(--q-accent);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
}
.auditor-card-hint[data-v-09cf5a32] {
  font-size: 13px;
  color: var(--q-positive);
  margin: 0 0 16px 0;
}
.auditor-selected[data-v-09cf5a32] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  border-radius: 10px;
}
.auditor-selected-info[data-v-09cf5a32] {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.auditor-avatar[data-v-09cf5a32] {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ec407a, #ab47bc);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auditor-details[data-v-09cf5a32] {
  min-width: 0;
}
.auditor-name[data-v-09cf5a32] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auditor-change-btn[data-v-09cf5a32] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
  background: var(--q-dark);
  color: var(--q-positive);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.auditor-change-btn[data-v-09cf5a32]:hover {
  border-color: var(--q-primary);
  color: var(--q-primary);
}
.auditor-add-btn[data-v-09cf5a32] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: 2px dashed color-mix(in srgb, var(--q-primary) 40%, var(--q-info));
  border-radius: 10px;
  background: transparent;
  color: var(--q-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.auditor-add-btn[data-v-09cf5a32]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
  border-color: var(--q-primary);
}
.auditor-add-btn[data-v-09cf5a32]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Action Card */
.action-card[data-v-09cf5a32] {
  background: var(--q-info);
  border-radius: 12px;
  border: 2px solid color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  padding: 24px;
  box-shadow: 0 10px 15px color-mix(in srgb, var(--q-primary) 10%, transparent);
}
.btn-start[data-v-09cf5a32] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  background: var(--q-primary);
  color: var(--q-info);
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
  font-size: 18px;
  margin-bottom: 16px;
}
.btn-start[data-v-09cf5a32]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 85%, black);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.btn-start[data-v-09cf5a32]:active:not(:disabled) {
  transform: translateY(0);
}
.btn-start[data-v-09cf5a32]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.action-hint[data-v-09cf5a32] {
  text-align: center;
  font-size: 12px;
  color: var(--q-positive);
  margin: 0;
}

/* Info Banner */
.info-banner[data-v-09cf5a32] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  background: color-mix(in srgb, var(--q-secondary) 10%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-secondary) 20%, var(--q-info));
  border-radius: 12px;
  font-size: 13px;
  color: var(--q-positive);
  line-height: 1.5;
}
.info-banner .q-icon[data-v-09cf5a32] {
  color: var(--q-secondary);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Stats Grid */
.stats-grid[data-v-09cf5a32] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.stat-item[data-v-09cf5a32] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--q-dark);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.stat-item-left[data-v-09cf5a32] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.stat-icon-box[data-v-09cf5a32] {
  padding: 8px;
  background: var(--q-info);
  border-radius: 8px;
  color: var(--q-positive);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.stat-label[data-v-09cf5a32] {
  font-size: 14px;
  font-weight: 500;
  color: var(--q-positive);
}
.stat-value[data-v-09cf5a32] {
  font-weight: 700;
  color: var(--q-accent);
}

/* Modules Section */
.modules-section[data-v-09cf5a32] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 24px;
  animation: fadeIn-09cf5a32 0.5s ease-in-out;
}
.modules-section-title[data-v-09cf5a32] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 20px;
}
.modules-list[data-v-09cf5a32] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Module Card */
.module-card[data-v-09cf5a32] {
  background: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  border-radius: 12px;
  overflow: hidden;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.module-card[data-v-09cf5a32]:hover {
  border-color: color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.module-card--expanded[data-v-09cf5a32] {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.module-card--passed[data-v-09cf5a32] {
  border-left: 3px solid #4caf50;
}
.module-card--in_progress[data-v-09cf5a32] {
  border-left: 3px solid var(--q-primary);
}
.module-card--not_started[data-v-09cf5a32] {
  border-left: 3px solid color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.module-card-header[data-v-09cf5a32] {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.module-card-header[data-v-09cf5a32]:hover {
  background: color-mix(in srgb, var(--q-accent) 4%, var(--q-dark));
}
.module-card-icon[data-v-09cf5a32] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--q-primary) 12%, var(--q-info));
  color: var(--q-primary);
}
.module-card-info[data-v-09cf5a32] {
  flex: 1;
  min-width: 0;
}
.module-card-name[data-v-09cf5a32] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
  line-height: 1.4;
}
.module-card-right[data-v-09cf5a32] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.module-status-badge[data-v-09cf5a32] {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.module-status--passed[data-v-09cf5a32] {
  background: color-mix(in srgb, #4caf50 15%, var(--q-info));
  color: #4caf50;
}
.module-status--in_progress[data-v-09cf5a32] {
  background: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  color: var(--q-primary);
}
.module-status--not_started[data-v-09cf5a32] {
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  color: color-mix(in srgb, var(--q-accent) 50%, var(--q-info));
}
.module-card-chevron[data-v-09cf5a32] {
  color: color-mix(in srgb, var(--q-accent) 40%, var(--q-info));
  transition: transform 0.2s;
}
.module-card-body[data-v-09cf5a32] {
  padding: 0 16px 14px 70px;
  animation: fadeIn-09cf5a32 0.2s ease-in-out;
}
.module-detail-row[data-v-09cf5a32] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: color-mix(in srgb, var(--q-accent) 60%, var(--q-info));
}
.module-detail-icon[data-v-09cf5a32] {
  color: color-mix(in srgb, var(--q-accent) 40%, var(--q-info));
}
.module-card-empty[data-v-09cf5a32] {
  font-size: 13px;
  color: color-mix(in srgb, var(--q-accent) 40%, var(--q-info));
  font-style: italic;
  margin: 0;
}
@media (max-width: 600px) {
.module-card-header[data-v-09cf5a32] {
    gap: 10px;
    padding: 12px;
}
.module-card-icon[data-v-09cf5a32] {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 8px;
}
.module-card-name[data-v-09cf5a32] {
    font-size: 13px;
}
.module-status-badge[data-v-09cf5a32] {
    font-size: 10px;
    padding: 3px 8px;
}
.module-card-body[data-v-09cf5a32] {
    padding: 0 12px 12px 56px;
}
}

/* Notification Modal */
.notification-card[data-v-09cf5a32] {
  min-width: 320px;
  max-width: 420px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.notification-card.info[data-v-09cf5a32] {
  border-top: 4px solid var(--q-secondary);
}
.notification-card.warning[data-v-09cf5a32] {
  border-top: 4px solid var(--q-warning);
}
.notification-card.success[data-v-09cf5a32] {
  border-top: 4px solid var(--q-success);
}
.notification-header[data-v-09cf5a32] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 24px 16px;
  background: var(--q-dark);
}
.notification-icon[data-v-09cf5a32] {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notification-card.info .notification-icon[data-v-09cf5a32] {
  background: color-mix(in srgb, var(--q-secondary) 10%, transparent);
  color: var(--q-secondary);
}
.notification-card.warning .notification-icon[data-v-09cf5a32] {
  background: color-mix(in srgb, var(--q-warning) 10%, transparent);
  color: var(--q-warning);
}
.notification-card.success .notification-icon[data-v-09cf5a32] {
  background: color-mix(in srgb, var(--q-success) 10%, transparent);
  color: var(--q-success);
}
.notification-title[data-v-09cf5a32] {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  text-align: center;
}
.notification-body[data-v-09cf5a32] {
  padding: 16px 24px;
}
.notification-text[data-v-09cf5a32] {
  margin: 0;
  font-size: 14px;
  color: var(--q-positive);
  text-align: center;
  line-height: 1.6;
}
.notification-actions[data-v-09cf5a32] {
  padding: 16px 24px 24px;
}
.notification-btn[data-v-09cf5a32] {
  min-width: 120px;
  border-radius: 8px;
  font-weight: 600;
  text-transform: none;
}
.notification-card.warning .notification-btn[data-v-09cf5a32] {
  background: var(--q-warning) !important;
}
.notification-card.success .notification-btn[data-v-09cf5a32] {
  background: var(--q-success) !important;
}


.create-course-manual-view[data-v-6466af1e] {
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 100px;
}
.page-header[data-v-6466af1e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.page-title[data-v-6466af1e] {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.page-subtitle[data-v-6466af1e] {
  font-size: 14px;
  color: #64748b;
  margin: 4px 0 0 0;
}
.draft-btn[data-v-6466af1e] {
  color: #94a3b8;
}
.step-indicator[data-v-6466af1e] {
  display: flex;
  gap: 8px;
  max-width: 500px;
  margin: 0 auto 32px;
}
.step-item[data-v-6466af1e] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.step-bar[data-v-6466af1e] {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  transition: all 0.5s;
}
.step-bar.completed[data-v-6466af1e] {
  background: #e11d48;
}
.step-bar.active[data-v-6466af1e] {
  background: #fb7185;
}
.step-bar.pending[data-v-6466af1e] {
  background: #e2e8f0;
}
.step-label[data-v-6466af1e] {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  transition: color 0.3s;
}
.step-label.active[data-v-6466af1e] {
  color: #1e293b;
}
.step-content[data-v-6466af1e] {
  animation: fadeIn-6466af1e 0.3s ease;
}
.step-content.centered[data-v-6466af1e] {
  max-width: 700px;
  margin: 0 auto;
}
@keyframes fadeIn-6466af1e {
from {
    opacity: 0;
    transform: translateX(32px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}
.card[data-v-6466af1e] {
  background: white;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 32px;
  margin-bottom: 24px;
}
.card-title[data-v-6466af1e] {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 24px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.blue-icon[data-v-6466af1e] {
  color: #3b82f6;
}
.emerald-icon[data-v-6466af1e] {
  color: #10b981;
}
.indigo-icon[data-v-6466af1e] {
  color: #6366f1;
}
.form-group[data-v-6466af1e] {
  margin-bottom: 24px;
}
.form-group[data-v-6466af1e]:last-child {
  margin-bottom: 0;
}
.form-label[data-v-6466af1e] {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}
.input-label[data-v-6466af1e] {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.required[data-v-6466af1e] {
  color: #e11d48;
}
.form-hint[data-v-6466af1e] {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 4px;
}
.title-input[data-v-6466af1e] .q-field__control {
  font-size: 18px;
  font-weight: 500;
}
.form-row[data-v-6466af1e] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.cover-upload[data-v-6466af1e] {
  height: 128px;
  background: #f8fafc;
  border-radius: 12px;
  border: 2px dashed #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.cover-upload[data-v-6466af1e]:hover {
  border-color: #fda4af;
  background: #fff1f2;
}
.cover-upload[data-v-6466af1e]:hover .q-icon {
  color: #e11d48;
}
.hidden-input[data-v-6466af1e] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.disclosure-btn[data-v-6466af1e] {
  color: #64748b;
  font-weight: 700;
}
.advanced-section[data-v-6466af1e] {
  margin-top: 16px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
}

/* Step 2: Structure */
.structure-card[data-v-6466af1e] {
  min-height: 500px;
}
.structure-toolbar[data-v-6466af1e] {
  padding: 16px;
  border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;
  margin: -32px -32px 24px;
  border-radius: 16px 16px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.structure-title[data-v-6466af1e] {
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.duration-badge[data-v-6466af1e] {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  background: white;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
}
.tree-builder[data-v-6466af1e] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.topic-card[data-v-6466af1e] {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s;
}
.topic-card[data-v-6466af1e]:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.topic-header[data-v-6466af1e] {
  background: rgba(248, 250, 252, 0.5);
  padding: 16px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 12px;
}
.drag-handle[data-v-6466af1e] {
  color: #cbd5e1;
  cursor: move;
}
.folder-icon[data-v-6466af1e] {
  color: #e11d48;
}
.topic-title-input[data-v-6466af1e] {
  flex: 1;
}
.topic-title-input[data-v-6466af1e] .q-field__control {
  font-weight: 700;
  color: #1e293b;
}
.topic-delete-btn[data-v-6466af1e] {
  opacity: 0;
  color: #94a3b8;
  transition: opacity 0.2s;
}
.topic-header:hover .topic-delete-btn[data-v-6466af1e] {
  opacity: 1;
}
.topic-delete-btn[data-v-6466af1e]:hover {
  color: #ef4444;
  background: #fef2f2;
}
.modules-area[data-v-6466af1e] {
  padding: 8px;
}
.module-item[data-v-6466af1e] {
  margin-left: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.module-item[data-v-6466af1e]:hover {
  border-color: #f1f5f9;
  background: #f8fafc;
}
.module-drag[data-v-6466af1e] {
  color: #e2e8f0;
  cursor: move;
}
.module-icon[data-v-6466af1e] {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.module-icon.lesson[data-v-6466af1e] {
  background: #dbeafe;
  color: #2563eb;
}
.module-icon.test[data-v-6466af1e] {
  background: #f3e8ff;
  color: #9333ea;
}
.module-icon.material[data-v-6466af1e] {
  background: #dcfce7;
  color: #16a34a;
}
.module-title[data-v-6466af1e] {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
}
.module-duration[data-v-6466af1e] {
  font-size: 12px;
  color: #94a3b8;
}
.module-delete-btn[data-v-6466af1e] {
  opacity: 0;
  color: #cbd5e1;
  transition: opacity 0.2s;
}
.module-item:hover .module-delete-btn[data-v-6466af1e] {
  opacity: 1;
}
.module-delete-btn[data-v-6466af1e]:hover {
  color: #ef4444;
  background: #fef2f2;
}
.empty-topic[data-v-6466af1e] {
  margin-left: 32px;
  padding: 16px;
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
  border-left: 2px dashed #f1f5f9;
}
.add-actions[data-v-6466af1e] {
  margin-left: 32px;
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-left: 8px;
}
.add-btn[data-v-6466af1e] {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
}
.add-btn.lesson[data-v-6466af1e] {
  color: #2563eb;
  background: #dbeafe;
}
.add-btn.test[data-v-6466af1e] {
  color: #9333ea;
  background: #f3e8ff;
}
.add-btn.material[data-v-6466af1e] {
  color: #16a34a;
  background: #dcfce7;
}
.add-topic-btn[data-v-6466af1e] {
  width: 100%;
  padding: 16px;
  border: 2px dashed #e2e8f0;
  border-radius: 12px;
  color: #64748b;
  font-weight: 700;
}
.add-topic-btn[data-v-6466af1e]:hover {
  border-color: #fda4af;
  color: #e11d48;
  background: #fff1f2;
}

/* Step 3: Settings */
.setting-row[data-v-6466af1e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
}
.setting-title[data-v-6466af1e] {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}
.setting-desc[data-v-6466af1e] {
  display: block;
  font-size: 12px;
  color: #64748b;
}
.departments-section[data-v-6466af1e] {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
}
.departments-chips[data-v-6466af1e] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.logic-options[data-v-6466af1e] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.logic-option[data-v-6466af1e] {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  border: 2px solid #f1f5f9;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.logic-option[data-v-6466af1e]:hover {
  border-color: #e2e8f0;
}
.logic-option.active[data-v-6466af1e] {
  border-color: #10b981;
  background: #ecfdf5;
}
.option-title[data-v-6466af1e] {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2px;
}
.option-desc[data-v-6466af1e] {
  display: block;
  font-size: 12px;
  color: #64748b;
}
.toggles-list[data-v-6466af1e] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.toggle-item[data-v-6466af1e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toggle-item span[data-v-6466af1e] {
  font-size: 14px;
  font-weight: 500;
  color: #334155;
}

/* Step 4: Review */
.review-card[data-v-6466af1e] {
  background: white;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 32px;
  text-align: center;
}
.review-icon[data-v-6466af1e] {
  width: 80px;
  height: 80px;
  background: #dcfce7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16a34a;
  margin: 0 auto 24px;
}
.review-title[data-v-6466af1e] {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px 0;
}
.review-text[data-v-6466af1e] {
  color: #64748b;
  margin: 0 0 32px 0;
}
.review-summary[data-v-6466af1e] {
  background: #f8fafc;
  border-radius: 12px;
  padding: 24px;
  text-align: left;
  border: 1px solid #f1f5f9;
  margin-bottom: 32px;
}
.summary-row[data-v-6466af1e] {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 8px 0;
}
.summary-row span[data-v-6466af1e]:first-child {
  color: #64748b;
}
.summary-value[data-v-6466af1e] {
  font-weight: 700;
  color: #1e293b;
}
.publish-btn[data-v-6466af1e] {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
}

/* Footer */
.footer-actions[data-v-6466af1e] {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  border-top: 1px solid #e2e8f0;
  padding: 16px;
  z-index: 40;
}
.footer-content[data-v-6466af1e] {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Add Modal */
.add-modal[data-v-6466af1e] {
  width: 100%;
  max-width: 500px;
}
.modal-header[data-v-6466af1e] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}
.modal-title[data-v-6466af1e] {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}
.modal-tabs[data-v-6466af1e] {
  display: flex;
  padding: 8px;
  gap: 8px;
  background: white;
  border-bottom: 1px solid #f1f5f9;
}
.modal-tabs .q-btn[data-v-6466af1e] {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  border-radius: 8px;
}
.modal-tabs .q-btn.active[data-v-6466af1e] {
  background: #f1f5f9;
  color: #1e293b;
}
.modal-content[data-v-6466af1e] {
  max-height: 60vh;
  overflow-y: auto;
}
.search-wrap[data-v-6466af1e] {
  margin-bottom: 16px;
}
.items-list[data-v-6466af1e] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.content-item[data-v-6466af1e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  cursor: pointer;
  transition: all 0.2s;
}
.content-item[data-v-6466af1e]:hover {
  border-color: #fecdd3;
  background: rgba(254, 205, 211, 0.1);
}
.item-title[data-v-6466af1e] {
  font-size: 14px;
  font-weight: 500;
  color: #334155;
}
.item-add-icon[data-v-6466af1e] {
  color: #e11d48;
  opacity: 0;
  transition: opacity 0.2s;
}
.content-item:hover .item-add-icon[data-v-6466af1e] {
  opacity: 1;
}
.content-type-buttons[data-v-6466af1e] {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.content-type-buttons .q-btn[data-v-6466af1e] {
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: white;
  color: #475569;
}
.content-type-buttons .q-btn.active[data-v-6466af1e] {
  background: #e11d48;
  border-color: #e11d48;
  color: white;
}
.content-input[data-v-6466af1e] {
  margin-top: 16px;
}
.content-placeholder[data-v-6466af1e] {
  background: #f8fafc;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #f1f5f9;
  text-align: center;
  font-size: 14px;
  color: #64748b;
}
.modal-actions[data-v-6466af1e] {
  justify-content: flex-end;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
}


/* Дополнительные стили для полного устранения отступов */
/* .q-card {
  display: flex;
  flex-direction: column;
}
.q-card__section {
  flex-grow: 1;
  overflow: hidden;
} */
.q-card[data-v-2cb2edaa] {
  padding: 0 !important;
}
.q-card-section[data-v-2cb2edaa] {
  padding: 0 !important;
}


.q-page[data-v-0e8f36bc] {
  min-height: 100%;
}
.my-card[data-v-0e8f36bc] {
  max-width: 300px;
  margin: auto;
  height: 100%;
}
.file-name-section[data-v-0e8f36bc] {
  max-height: 60px;
  overflow: hidden; /* Скрываем текст, выходящий за пределы */
}
.file-name[data-v-0e8f36bc] {
  white-space: normal; /* Разрешаем перенос слов */
  word-wrap: break-word; /* Переносим длинные слова */
  overflow: hidden; /* Скрываем текст, выходящий за пределы */
  text-overflow: ellipsis; /* Добавляем многоточие, если текст не помещается */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Ограничиваем количество строк */
  -webkit-box-orient: vertical;
}
.gallery-container[data-v-0e8f36bc] {
  height: calc(98vh - 300px); /* Высота контейнера, можно регулировать */
  overflow-y: auto; /* Вертикальный скролл */
}
.gallery-scroll[data-v-0e8f36bc] {
  padding-right: 8px; /* Чтобы контент не заходил под скролл */
}


@charset "UTF-8";
.custom-popup-overlay[data-v-186c40bb] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 7000;
  animation: fadeIn-186c40bb 0.3s;
}
.custom-popup-content[data-v-186c40bb] {
  background-color: white;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  animation: slideDown-186c40bb 0.3s ease-out;
}

/* Стили для позиционирования вверху */
.top-positioned-popup[data-v-186c40bb] {
  position: fixed;
  top: var(--v73abcb3a);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 1200px;
  border-radius: 0 0 8px 8px;
}
.custom-popup-header[data-v-186c40bb] {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
}
.custom-popup-body[data-v-186c40bb] {
  padding: 16px;
  flex-grow: 1;
  overflow-y: auto;
  max-height: calc(90vh - 120px);
}
.custom-popup-footer[data-v-186c40bb] {
  padding: 12px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background-color: #f5f5f5;
}
@keyframes fadeIn-186c40bb {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
@keyframes slideDown-186c40bb {
from {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
}
to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
}

/* Дополнительные стили для полного устранения отступов */
.q-card[data-v-94b41a2c] {
  display: flex;
  flex-direction: column;
}
.q-card__section[data-v-94b41a2c] {
  flex-grow: 1;
  overflow: hidden;
}
/* Стили для запрета взаимодействия */
.no-interaction[data-v-94b41a2c] {
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}


.q-card[data-v-081f7db9] {
  display: flex;
  flex-direction: column;
}
/* .q-card__section {
  flex-grow: 1;
  overflow: hidden;
} */
.cursor-grab[data-v-081f7db9] {
  cursor: grab;
}
.cursor-grab[data-v-081f7db9]:active {
  cursor: grabbing;
}
.drag-handle[data-v-081f7db9] {
  opacity: 0.6;
  transition: opacity 0.2s;
}
.drag-handle[data-v-081f7db9]:hover {
  opacity: 1;
}


.q-card[data-v-7d9bbe83] {
  display: flex;
  flex-direction: column;
}
.q-card__section[data-v-7d9bbe83] {
  flex-grow: 1;
  overflow: hidden;
}
.cursor-grab[data-v-7d9bbe83] {
  cursor: grab;
}
.cursor-grab[data-v-7d9bbe83]:active {
  cursor: grabbing;
}
.drag-handle[data-v-7d9bbe83] {
  opacity: 0.6;
  transition: opacity 0.2s;
}
.drag-handle[data-v-7d9bbe83]:hover {
  opacity: 1;
}


.q-card[data-v-96e809a2] {
  display: flex;
  flex-direction: column;
}
.q-card__section[data-v-96e809a2] {
  flex-grow: 1;
  overflow: hidden;
}
.cursor-grab[data-v-96e809a2] {
  cursor: grab;
}
.cursor-grab[data-v-96e809a2]:active {
  cursor: grabbing;
}
.drag-handle[data-v-96e809a2] {
  opacity: 0.6;
  transition: opacity 0.2s;
}
.drag-handle[data-v-96e809a2]:hover {
  opacity: 1;
}
.tox-tinymce-aux[data-v-96e809a2] {
  z-index: 9999 !important;
}
/*
.tox-tinymce {
  z-index: 9999 !important;
}
.tox-menubar {
  position: relative !important;
}
.q-dialog__inner--minimized > div {
  overflow: visible !important;
} */


.q-card[data-v-688daf6c] {
  display: flex;
  flex-direction: column;
}
.q-card__section[data-v-688daf6c] {
  flex-grow: 1;
  overflow: hidden;
}
.cursor-grab[data-v-688daf6c] {
  cursor: grab;
}
.cursor-grab[data-v-688daf6c]:active {
  cursor: grabbing;
}
.drag-handle[data-v-688daf6c] {
  opacity: 0.6;
  transition: opacity 0.2s;
}
.drag-handle[data-v-688daf6c]:hover {
  opacity: 1;
}


/* Принудительное растягивание видео */
[data-v-688daf6c] .video-container {
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
  padding-bottom: 56.25%;
  height: 80dvh;
}
[data-v-688daf6c] .video-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 80dvh !important;
  min-width: 100% !important;
  border: none !important;
}

/* Для мобильных - полная ширина экрана */
@media (max-width: 768px) {
[data-v-688daf6c] .video-container {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    left: 0;
    right: 0;
    height: 90dvh !important;
}
[data-v-688daf6c] .video-container iframe {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 90dvh !important;
}
}
.preview-video[data-v-688daf6c] {
  max-width: 400px;
  max-height: 225px;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.preview-video iframe[data-v-688daf6c] {
  width: 100%;
  height: 100%;
  border: none;
}


.h5p-editor-container[data-v-402de1c8] {
  position: relative;
  min-height: 300px;
}


.q-card[data-v-8600a234] {
  display: flex;
  flex-direction: column;
}
.q-card__section[data-v-8600a234] {
  flex-grow: 1;
  overflow: hidden;
}
.cursor-grab[data-v-8600a234] {
  cursor: grab;
}
.cursor-grab[data-v-8600a234]:active {
  cursor: grabbing;
}
.drag-handle[data-v-8600a234] {
  opacity: 0.6;
  transition: opacity 0.2s;
}
.drag-handle[data-v-8600a234]:hover {
  opacity: 1;
}


.lms-confirm-card[data-v-3a89ab1e] {
  min-width: 400px;
  max-width: 500px;
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.lms-confirm-title[data-v-3a89ab1e] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  line-height: 1.3;
}
.lms-confirm-message[data-v-3a89ab1e] {
  color: var(--q-positive);
  font-size: 14px;
  line-height: 1.4;
}
.lms-confirm-ok-btn[data-v-3a89ab1e] {
  background-color: var(--q-primary);
  color: var(--q-info);
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.2s;
}
.lms-confirm-ok-btn[data-v-3a89ab1e]:hover {
  background-color: color-mix(in srgb, var(--q-primary) 85%, black);
  transform: translateY(-1px);
}
.lms-confirm-cancel-btn[data-v-3a89ab1e] {
  color: var(--q-positive);
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.2s;
}
.lms-confirm-cancel-btn[data-v-3a89ab1e]:hover {
  background-color: var(--q-dark);
  color: var(--q-accent);
}
@media (max-width: 600px) {
.lms-confirm-card[data-v-3a89ab1e] {
    min-width: 90vw;
}
}


.create-course-quick[data-v-4e948906] {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Action Bar */
.action-bar[data-v-4e948906] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgb(241, 245, 249);
}
.action-bar-title[data-v-4e948906] {
  font-size: 28px;
  font-weight: 700;
  color: rgb(15, 23, 42);
  margin: 0 0 4px;
}
.action-bar-subtitle[data-v-4e948906] {
  font-size: 14px;
  color: rgb(100, 116, 139);
  margin: 0;
}
.action-bar-buttons[data-v-4e948906] {
  display: flex;
  gap: 12px;
}
.btn-draft[data-v-4e948906] {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: rgb(71, 85, 105);
  border: 1px solid rgb(226, 232, 240);
  border-radius: 8px;
}
.btn-draft[data-v-4e948906]:hover {
  background: rgb(248, 250, 252);
}
.btn-publish[data-v-4e948906] {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  background: rgb(225, 29, 72);
  color: white;
  border-radius: 8px;
}
.btn-publish[data-v-4e948906]:hover {
  background: rgb(190, 18, 60);
}

/* Form Sections */
.form-sections[data-v-4e948906] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form-card[data-v-4e948906] {
  background: white;
  border: 1px solid rgb(226, 232, 240);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.form-label[data-v-4e948906] {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: rgb(51, 65, 85);
  margin-bottom: 8px;
}
.required[data-v-4e948906] {
  color: rgb(239, 68, 68);
}
.title-input[data-v-4e948906] {
  font-size: 16px;
}

/* Program Builder */
.program-header[data-v-4e948906] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.program-title[data-v-4e948906] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: rgb(15, 23, 42);
  margin: 0;
}
.program-icon[data-v-4e948906] {
  color: rgb(244, 63, 94);
}
.btn-add-topic[data-v-4e948906] {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: rgb(244, 63, 94);
  border: 1px solid rgb(244, 63, 94);
  border-radius: 8px;
}
.btn-add-topic[data-v-4e948906]:hover {
  background: rgb(255, 241, 242);
}
.program-list[data-v-4e948906] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Topic Card */
.topic-card[data-v-4e948906] {
  border: 1px solid rgb(226, 232, 240);
  border-radius: 12px;
  padding: 16px;
  background: rgb(248, 250, 252);
  transition: all 0.2s;
}
.topic-card[data-v-4e948906]:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.topic-header[data-v-4e948906] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.drag-icon[data-v-4e948906] {
  color: rgb(148, 163, 184);
  cursor: grab;
}
.drag-icon[data-v-4e948906]:active {
  cursor: grabbing;
}
.folder-icon[data-v-4e948906] {
  color: rgb(251, 191, 36);
}
.topic-title-input[data-v-4e948906] {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  color: rgb(15, 23, 42);
  outline: none;
  padding: 4px 8px;
  border-radius: 4px;
}
.topic-title-input[data-v-4e948906]:focus {
  background: white;
  box-shadow: 0 0 0 2px rgb(244, 63, 94);
}
.btn-delete-topic[data-v-4e948906] {
  color: rgb(239, 68, 68);
}
.btn-delete-topic[data-v-4e948906]:hover {
  background: rgb(254, 242, 242);
}

/* Topic Content */
.topic-content[data-v-4e948906] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 32px;
}
.module-item[data-v-4e948906] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: white;
  border: 1px solid rgb(226, 232, 240);
  border-radius: 8px;
  transition: all 0.2s;
}
.module-item[data-v-4e948906]:hover {
  border-color: rgb(203, 213, 225);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.module-drag[data-v-4e948906] {
  color: rgb(203, 213, 225);
  cursor: grab;
}
.module-drag[data-v-4e948906]:active {
  cursor: grabbing;
}
.icon-lesson[data-v-4e948906] {
  color: rgb(59, 130, 246);
}
.icon-test[data-v-4e948906] {
  color: rgb(168, 85, 247);
}
.icon-material[data-v-4e948906] {
  color: rgb(34, 197, 94);
}
.module-title[data-v-4e948906] {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: rgb(51, 65, 85);
}
.btn-delete-module[data-v-4e948906] {
  color: rgb(239, 68, 68);
  opacity: 0;
  transition: opacity 0.2s;
}
.module-item:hover .btn-delete-module[data-v-4e948906] {
  opacity: 1;
}
.btn-delete-module[data-v-4e948906]:hover {
  background: rgb(254, 242, 242);
}

/* Add Buttons */
.add-buttons[data-v-4e948906] {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.btn-add-lesson[data-v-4e948906],
.btn-add-test[data-v-4e948906],
.btn-add-material[data-v-4e948906] {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px dashed rgb(203, 213, 225);
  color: rgb(100, 116, 139);
  transition: all 0.2s;
}
.btn-add-lesson[data-v-4e948906]:hover {
  border-color: rgb(59, 130, 246);
  color: rgb(59, 130, 246);
  background: rgb(239, 246, 255);
}
.btn-add-test[data-v-4e948906]:hover {
  border-color: rgb(168, 85, 247);
  color: rgb(168, 85, 247);
  background: rgb(250, 245, 255);
}
.btn-add-material[data-v-4e948906]:hover {
  border-color: rgb(34, 197, 94);
  color: rgb(34, 197, 94);
  background: rgb(240, 253, 244);
}

/* Modal */
.add-modal[data-v-4e948906] {
  width: 600px;
  max-width: 90vw;
}
.modal-header[data-v-4e948906] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgb(241, 245, 249);
}
.modal-title[data-v-4e948906] {
  font-size: 20px;
  font-weight: 700;
  color: rgb(15, 23, 42);
  margin: 0;
}
.modal-tabs[data-v-4e948906] {
  border-bottom: 1px solid rgb(241, 245, 249);
}
.modal-content[data-v-4e948906] {
  padding: 24px;
  max-height: 60vh;
  overflow-y: auto;
}

/* Search Input */
.search-input[data-v-4e948906] {
  margin-bottom: 16px;
}

/* Existing List */
.existing-list[data-v-4e948906] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.existing-item[data-v-4e948906] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border: 1px solid rgb(226, 232, 240);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.existing-item[data-v-4e948906]:hover {
  border-color: rgb(244, 63, 94);
  background: rgb(255, 241, 242);
}
.existing-item-content[data-v-4e948906] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.existing-item-icon[data-v-4e948906] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgb(248, 250, 252);
  border-radius: 6px;
  color: rgb(100, 116, 139);
}
.existing-item-title[data-v-4e948906] {
  font-size: 14px;
  font-weight: 500;
  color: rgb(51, 65, 85);
}
.add-existing-icon[data-v-4e948906] {
  color: rgb(244, 63, 94);
  opacity: 0;
  transition: opacity 0.2s;
}
.existing-item:hover .add-existing-icon[data-v-4e948906] {
  opacity: 1;
}
.no-results[data-v-4e948906] {
  text-align: center;
  color: rgb(148, 163, 184);
  font-size: 14px;
  padding: 16px;
}

/* New Form */
.new-form[data-v-4e948906] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form-group[data-v-4e948906] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.material-types[data-v-4e948906] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.type-btn[data-v-4e948906] {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid rgb(226, 232, 240);
  background: white;
  color: rgb(71, 85, 105);
}
.type-btn[data-v-4e948906]:hover {
  border-color: rgb(203, 213, 225);
}
.type-active[data-v-4e948906] {
  background: rgb(255, 241, 242);
  border-color: rgb(244, 63, 94);
  color: rgb(225, 29, 72);
}
.content-input[data-v-4e948906] {
  animation: fadeIn-4e948906 0.3s ease;
}
.test-form[data-v-4e948906] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.btn-add-question[data-v-4e948906] {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: rgb(244, 63, 94);
  border: 1px solid rgb(244, 63, 94);
  border-radius: 8px;
  align-self: flex-start;
}
.btn-add-question[data-v-4e948906]:hover {
  background: rgb(255, 241, 242);
}
.questions-list[data-v-4e948906] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.question-item[data-v-4e948906] {
  border: 1px solid rgb(226, 232, 240);
  border-radius: 8px;
  padding: 12px;
  background: white;
}
.question-header[data-v-4e948906] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.question-text[data-v-4e948906] {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: rgb(51, 65, 85);
}
.question-actions[data-v-4e948906] {
  display: flex;
  gap: 4px;
}
.question-editor[data-v-4e948906] {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgb(241, 245, 249);
}
.modal-actions[data-v-4e948906] {
  border-top: 1px solid rgb(241, 245, 249);
  background: rgb(248, 250, 252);
  justify-content: flex-end;
  padding: 16px 20px;
}
.btn-create[data-v-4e948906] {
  padding: 8px 24px;
  background: rgb(225, 29, 72);
  color: white;
  font-weight: 700;
  border-radius: 8px;
}
.btn-create[data-v-4e948906]:hover {
  background: rgb(190, 18, 60);
}

/* Toast Notification */
.toast-notification[data-v-4e948906] {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  font-weight: 500;
  min-width: 250px;
  max-width: 400px;
}
.toast-success[data-v-4e948906] {
  background-color: rgb(34, 197, 94);
  color: white;
}
.toast-error[data-v-4e948906] {
  background-color: rgb(239, 68, 68);
  color: white;
}
.toast-warning[data-v-4e948906] {
  background-color: rgb(251, 191, 36);
  color: white;
}
.toast-info[data-v-4e948906] {
  background-color: rgb(59, 130, 246);
  color: white;
}
.toast-slide-enter-active[data-v-4e948906],
.toast-slide-leave-active[data-v-4e948906] {
  transition: all 0.3s ease;
}
.toast-slide-enter-from[data-v-4e948906] {
  transform: translateX(100%);
  opacity: 0;
}
.toast-slide-leave-to[data-v-4e948906] {
  transform: translateX(100%);
  opacity: 0;
}
@keyframes fadeIn-4e948906 {
from {
    opacity: 0;
    transform: translateY(-10px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}


.create-course-ai[data-v-0e454d87] {
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 80px;
  animation: fadeIn-0e454d87 0.5s ease-in-out;
}
@keyframes fadeIn-0e454d87 {
from { opacity: 0; transform: translateY(16px);
}
to { opacity: 1; transform: translateY(0);
}
}

/* Top Bar */
.top-bar[data-v-0e454d87] {
  background: white;
  border-radius: 16px;
  border: 1px solid rgb(226, 232, 240);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 640px) {
.top-bar[data-v-0e454d87] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
}
.top-bar-left[data-v-0e454d87] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ai-icon-box[data-v-0e454d87] {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgb(244, 63, 94), rgb(190, 18, 60));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 6px rgba(244, 63, 94, 0.2);
}
.top-bar-title[data-v-0e454d87] {
  font-size: 18px;
  font-weight: 700;
  color: rgb(15, 23, 42);
  margin: 0;
}
.top-bar-subtitle[data-v-0e454d87] {
  font-size: 12px;
  color: rgb(100, 116, 139);
  margin: 0;
}
.token-stats[data-v-0e454d87] {
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgb(248, 250, 252);
  padding: 8px 24px;
  border-radius: 12px;
  border: 1px solid rgb(241, 245, 249);
}
.stat[data-v-0e454d87] {
  display: flex;
  flex-direction: column;
}
.stat-label[data-v-0e454d87] {
  font-size: 10px;
  text-transform: uppercase;
  color: rgb(148, 163, 184);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.stat-value[data-v-0e454d87] {
  font-size: 14px;
  font-family: monospace;
  font-weight: 700;
}
.stat-value.amber[data-v-0e454d87] { color: rgb(217, 119, 6);
}
.stat-value.rose[data-v-0e454d87] { color: rgb(225, 29, 72);
}
.stat-divider[data-v-0e454d87] {
  width: 1px;
  height: 32px;
  background: rgb(226, 232, 240);
}

/* Main Grid */
.main-grid[data-v-0e454d87] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 1024px) {
.main-grid[data-v-0e454d87] {
    grid-template-columns: 2fr 1fr;
}
}

/* Wizard Card */
.wizard-card[data-v-0e454d87] {
  background: white;
  border-radius: 16px;
  border: 1px solid rgb(226, 232, 240);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  min-height: 600px;
  display: flex;
  flex-direction: column;
}
.wizard-header[data-v-0e454d87] {
  padding: 24px 32px 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.step-badge[data-v-0e454d87] {
  font-size: 12px;
  font-weight: 700;
  color: rgb(225, 29, 72);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.draft-status[data-v-0e454d87] {
  font-size: 12px;
  color: rgb(148, 163, 184);
  font-weight: 500;
}

/* Step Indicator */
.step-indicator[data-v-0e454d87] {
  display: flex;
  gap: 8px;
  padding: 0 32px 24px;
}
.step-bar[data-v-0e454d87] {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgb(226, 232, 240);
  transition: background 0.5s;
}
.step-bar.completed[data-v-0e454d87] {
  background: rgb(225, 29, 72);
}
.step-bar.active[data-v-0e454d87] {
  background: rgb(251, 113, 133);
}

/* Step Content */
.step-content[data-v-0e454d87] {
  flex: 1;
  padding: 0 32px 32px;
  animation: slideIn-0e454d87 0.3s ease;
}
@keyframes slideIn-0e454d87 {
from { opacity: 0; transform: translateX(16px);
}
to { opacity: 1; transform: translateX(0);
}
}
.step-header[data-v-0e454d87] {
  margin-bottom: 24px;
}
.step-title[data-v-0e454d87] {
  font-size: 24px;
  font-weight: 700;
  color: rgb(15, 23, 42);
  margin: 0 0 4px 0;
}
.step-subtitle[data-v-0e454d87] {
  font-size: 14px;
  color: rgb(100, 116, 139);
  margin: 0;
}
.form-group[data-v-0e454d87] {
  margin-bottom: 24px;
}
.form-label[data-v-0e454d87] {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: rgb(30, 41, 59);
  margin-bottom: 8px;
}
.required[data-v-0e454d87] {
  color: rgb(239, 68, 68);
}
.title-input[data-v-0e454d87] {
  font-size: 18px;
  font-weight: 500;
}

/* Type Grid */
.type-grid[data-v-0e454d87] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 768px) {
.type-grid[data-v-0e454d87] {
    grid-template-columns: repeat(3, 1fr);
}
}
.type-card[data-v-0e454d87] {
  position: relative;
  padding: 16px;
  border-radius: 12px;
  border: 2px solid rgb(241, 245, 249);
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.type-card[data-v-0e454d87]:hover {
  border-color: rgb(253, 164, 175);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.type-card.selected[data-v-0e454d87] {
  border-color: rgb(244, 63, 94);
  background: rgb(255, 241, 242);
  box-shadow: 0 0 0 1px rgb(244, 63, 94);
}
.check-icon[data-v-0e454d87] {
  position: absolute;
  top: 12px;
  right: 12px;
  color: rgb(225, 29, 72);
}
.type-icon-box[data-v-0e454d87] {
  width: 40px;
  height: 40px;
  background: rgb(241, 245, 249);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(100, 116, 139);
  margin-bottom: 12px;
  transition: all 0.2s;
}
.type-card.selected .type-icon-box[data-v-0e454d87] {
  background: rgb(254, 205, 211);
  color: rgb(225, 29, 72);
}
.type-title[data-v-0e454d87] {
  font-size: 14px;
  font-weight: 700;
  color: rgb(30, 41, 59);
  margin: 0 0 4px 0;
}
.type-card.selected .type-title[data-v-0e454d87] {
  color: rgb(136, 19, 55);
}
.type-desc[data-v-0e454d87] {
  font-size: 12px;
  color: rgb(100, 116, 139);
  margin: 0;
  line-height: 1.4;
}

/* Format Grid */
.format-grid[data-v-0e454d87] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
.format-grid[data-v-0e454d87] {
    grid-template-columns: repeat(3, 1fr);
}
}
.format-btn[data-v-0e454d87] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgb(226, 232, 240);
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.format-btn[data-v-0e454d87]:hover {
  border-color: rgb(203, 213, 225);
  background: rgb(248, 250, 252);
}
.format-btn.selected[data-v-0e454d87] {
  background: rgb(255, 241, 242);
  border-color: rgb(244, 63, 94);
  box-shadow: 0 0 0 1px rgb(244, 63, 94);
}
.format-header[data-v-0e454d87] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 8px;
  color: rgb(148, 163, 184);
}
.format-btn.selected .format-header[data-v-0e454d87] {
  color: rgb(225, 29, 72);
}
.format-check[data-v-0e454d87] {
  color: rgb(225, 29, 72);
}
.format-label[data-v-0e454d87] {
  font-size: 12px;
  font-weight: 700;
  color: rgb(51, 65, 85);
}
.format-btn.selected .format-label[data-v-0e454d87] {
  color: rgb(136, 19, 55);
}
.format-desc[data-v-0e454d87] {
  font-size: 10px;
  color: rgb(148, 163, 184);
}

/* Params Box */
.params-box[data-v-0e454d87] {
  background: rgb(248, 250, 252);
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgb(241, 245, 249);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.param[data-v-0e454d87] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.param-label[data-v-0e454d87] {
  font-size: 12px;
  font-weight: 700;
  color: rgb(100, 116, 139);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Sources List */
.sources-list[data-v-0e454d87] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.source-card[data-v-0e454d87] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgb(226, 232, 240);
  border-radius: 12px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}
.source-card[data-v-0e454d87]:hover {
  background: rgb(248, 250, 252);
}
.source-content[data-v-0e454d87] {
  flex: 1;
}
.source-title[data-v-0e454d87] {
  font-size: 14px;
  font-weight: 700;
  color: rgb(30, 41, 59);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.source-icon[data-v-0e454d87] {
  color: rgb(244, 63, 94);
}
.source-desc[data-v-0e454d87] {
  font-size: 12px;
  color: rgb(100, 116, 139);
  line-height: 1.5;
}

/* Summary Card */
.summary-card[data-v-0e454d87] {
  background: rgb(255, 241, 242);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid rgb(254, 205, 211);
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}
.summary-icon[data-v-0e454d87] {
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(225, 29, 72);
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.summary-content[data-v-0e454d87] {
  color: rgb(136, 19, 55);
  font-size: 14px;
}
.summary-title[data-v-0e454d87] {
  font-weight: 700;
  margin: 0 0 8px 0;
}
.summary-list[data-v-0e454d87] {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  opacity: 0.8;
}
.summary-list li[data-v-0e454d87] {
  margin-bottom: 4px;
}

/* Wizard Footer */
.wizard-footer[data-v-0e454d87] {
  padding: 24px;
  background: white;
  border-top: 1px solid rgb(241, 245, 249);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn-back[data-v-0e454d87] {
  color: rgb(71, 85, 105);
  font-weight: 700;
}
.btn-back[data-v-0e454d87]:hover {
  background: rgb(241, 245, 249);
}
.btn-next[data-v-0e454d87] {
  padding: 12px 32px;
  background: rgb(225, 29, 72);
  color: white;
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(var(--q-primary-rgb, 225, 29, 72), 0.2);
}
.btn-next[data-v-0e454d87]:hover {
  background: rgb(190, 18, 60);
  transform: translateY(-1px);
}
.btn-generate[data-v-0e454d87] {
  padding: 12px 32px;
  background: linear-gradient(135deg, rgb(225, 29, 72), rgb(190, 18, 60));
  color: white;
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(var(--q-primary-rgb, 225, 29, 72), 0.2);
}
.btn-generate[data-v-0e454d87]:hover {
  transform: translateY(-1px);
}

/* Result Card */
.result-card[data-v-0e454d87] {
  background: white;
  border-radius: 16px;
  border: 1px solid rgb(226, 232, 240);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  animation: zoomIn-0e454d87 0.5s ease;
}
@keyframes zoomIn-0e454d87 {
from { opacity: 0; transform: scale(0.95);
}
to { opacity: 1; transform: scale(1);
}
}
.result-header[data-v-0e454d87] {
  padding: 24px;
  background: rgb(240, 253, 244);
  border-bottom: 1px solid rgb(187, 247, 208);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 640px) {
.result-header[data-v-0e454d87] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
}
.result-header-left[data-v-0e454d87] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.success-icon[data-v-0e454d87] {
  color: rgb(22, 163, 74);
}
.result-title[data-v-0e454d87] {
  font-size: 18px;
  font-weight: 700;
  color: rgb(15, 23, 42);
  margin: 0;
}
.result-subtitle[data-v-0e454d87] {
  font-size: 14px;
  color: rgb(21, 128, 61);
  margin: 0;
}
.btn-download[data-v-0e454d87] {
  background: white;
  color: rgb(51, 65, 85);
  border: 1px solid rgb(187, 247, 208);
  font-weight: 700;
}
.btn-download[data-v-0e454d87]:hover {
  background: rgb(220, 252, 231);
}
.result-content[data-v-0e454d87] {
  padding: 32px;
}

/* Course Tree */
.course-tree[data-v-0e454d87] {
  border: 1px solid rgb(226, 232, 240);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 32px;
}
.tree-header[data-v-0e454d87] {
  background: rgb(248, 250, 252);
  padding: 12px;
  font-weight: 700;
  color: rgb(30, 41, 59);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tree-items[data-v-0e454d87] {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tree-item[data-v-0e454d87] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgb(241, 245, 249);
  border-radius: 8px;
  background: white;
  transition: border-color 0.2s;
}
.tree-item[data-v-0e454d87]:hover {
  border-color: rgb(253, 164, 175);
}
.tree-item-icon[data-v-0e454d87] {
  color: rgb(148, 163, 184);
}
.tree-item-icon.rose[data-v-0e454d87] {
  color: rgb(244, 63, 94);
}
.tree-item-title[data-v-0e454d87] {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}
.tree-item-meta[data-v-0e454d87] {
  font-size: 12px;
  color: rgb(148, 163, 184);
}

/* Refine Box */
.refine-box[data-v-0e454d87] {
  background: rgb(15, 23, 42);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.refine-label[data-v-0e454d87] {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgb(251, 113, 133);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.refine-input[data-v-0e454d87] {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.refine-textarea[data-v-0e454d87] {
  flex: 1;
  background: rgb(30, 41, 59);
  border: 1px solid rgb(51, 65, 85);
  border-radius: 8px;
  padding: 12px;
  color: white;
  font-size: 14px;
  resize: none;
  height: 80px;
  outline: none;
}
.refine-textarea[data-v-0e454d87]:focus {
  border-color: rgb(244, 63, 94);
}
.refine-textarea[data-v-0e454d87]::placeholder {
  color: rgb(100, 116, 139);
}
.btn-send[data-v-0e454d87] {
  padding: 12px;
  background: rgb(225, 29, 72);
  color: white;
  border-radius: 8px;
}
.btn-send[data-v-0e454d87]:hover {
  background: rgb(244, 63, 94);
}
.result-actions[data-v-0e454d87] {
  display: flex;
  justify-content: flex-end;
}
.btn-save-catalog[data-v-0e454d87] {
  background: rgb(22, 163, 74);
  color: white;
  font-weight: 700;
  padding: 10px 24px;
  box-shadow: 0 4px 6px rgba(22, 163, 74, 0.2);
}
.btn-save-catalog[data-v-0e454d87]:hover {
  background: rgb(21, 128, 61);
}

/* Context Column */
.context-column[data-v-0e454d87] {
  display: none;
  position: sticky;
  top: 24px;
}
@media (min-width: 1024px) {
.context-column[data-v-0e454d87] {
    display: block;
}
}
.context-card[data-v-0e454d87] {
  background: white;
  border-radius: 16px;
  border: 1px solid rgb(226, 232, 240);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 20px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
}
.context-title[data-v-0e454d87] {
  font-weight: 700;
  color: rgb(30, 41, 59);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.context-icon[data-v-0e454d87] {
  color: rgb(244, 63, 94);
}
.chat-container[data-v-0e454d87] {
  flex: 1;
  background: rgb(248, 250, 252);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgb(241, 245, 249);
  overflow-y: auto;
  max-height: 600px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chat-message[data-v-0e454d87] {
  display: flex;
  gap: 12px;
}
.chat-avatar[data-v-0e454d87] {
  width: 32px;
  height: 32px;
  background: rgb(254, 205, 211);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(225, 29, 72);
  flex-shrink: 0;
}
.chat-bubble[data-v-0e454d87] {
  background: white;
  padding: 12px;
  border-radius: 0 12px 12px 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid rgb(241, 245, 249);
  font-size: 14px;
  color: rgb(71, 85, 105);
}
.chat-bubble p[data-v-0e454d87] {
  margin: 0 0 8px 0;
}
.chat-bubble p[data-v-0e454d87]:last-child {
  margin-bottom: 0;
}
.context-footer[data-v-0e454d87] {
  text-align: center;
  font-size: 10px;
  color: rgb(148, 163, 184);
  margin-top: 16px;
}


.import-course-view[data-v-2a84524f] {
  max-width: 780px;
  margin: 0 auto;
  padding-bottom: 100px;
  animation: fadeIn-2a84524f 0.5s ease-in-out;
}
@keyframes fadeIn-2a84524f {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Loading State */
.loading-state[data-v-2a84524f] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}

/* Page Header */
.page-header[data-v-2a84524f] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 24px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
.page-header[data-v-2a84524f] {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
}
.page-title[data-v-2a84524f] {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  color: var(--q-accent);
  margin: 0;
}
.page-subtitle[data-v-2a84524f] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.template-link[data-v-2a84524f] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}
.template-link[data-v-2a84524f]:hover {
  background: color-mix(in srgb, var(--q-primary) 18%, var(--q-info));
}

/* Card */
.card[data-v-2a84524f] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 32px;
}

/* Dropzone */
.dropzone[data-v-2a84524f] {
  position: relative;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  border-radius: 16px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.dropzone[data-v-2a84524f]:hover {
  border-color: var(--q-primary);
  background: color-mix(in srgb, var(--q-accent) 3%, var(--q-info));
}
.dropzone.active[data-v-2a84524f] {
  border-color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 5%, var(--q-info));
}
.hidden-input[data-v-2a84524f] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.dropzone-icon[data-v-2a84524f] {
  width: 64px;
  height: 64px;
  background: var(--q-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--q-accent) 30%, var(--q-info));
  margin-bottom: 16px;
  pointer-events: none;
}
.dropzone-title[data-v-2a84524f] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 8px 0;
  pointer-events: none;
}
.dropzone-text[data-v-2a84524f] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0 0 24px 0;
  pointer-events: none;
}
.file-types[data-v-2a84524f] {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12px;
  color: color-mix(in srgb, var(--q-accent) 30%, var(--q-info));
  pointer-events: none;
}
.file-types span[data-v-2a84524f] {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* File Preview */
.file-preview[data-v-2a84524f] {
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  padding: 24px;
  background: var(--q-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.file-info[data-v-2a84524f] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.file-icon[data-v-2a84524f] {
  width: 48px;
  height: 48px;
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
}
.file-name[data-v-2a84524f] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.file-size[data-v-2a84524f] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 0;
}
.icon-btn-remove[data-v-2a84524f] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
  transition: all 0.2s;
}
.icon-btn-remove[data-v-2a84524f]:hover {
  background: color-mix(in srgb, var(--q-warning) 10%, var(--q-info));
  color: var(--q-warning);
}

/* Success Badge */
.success-badge[data-v-2a84524f] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--q-secondary);
  background: color-mix(in srgb, var(--q-secondary) 10%, var(--q-info));
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--q-secondary) 25%, var(--q-info));
}

/* Upload Overlay */
.upload-overlay[data-v-2a84524f] {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--q-info) 85%, transparent);
  backdrop-filter: blur(4px);
  border-radius: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-overlay-content[data-v-2a84524f] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.upload-overlay-text[data-v-2a84524f] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0;
}

/* Success Section */
.success-section[data-v-2a84524f] {
  margin-top: 20px;
  padding: 20px;
  background: color-mix(in srgb, var(--q-secondary) 6%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-secondary) 20%, var(--q-info));
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.success-icon-box[data-v-2a84524f] {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--q-secondary) 12%, var(--q-info));
  color: var(--q-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.success-content[data-v-2a84524f] {
  flex: 1;
  min-width: 150px;
}
.success-title[data-v-2a84524f] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.success-text[data-v-2a84524f] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.success-actions[data-v-2a84524f] {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.go-to-catalog-btn[data-v-2a84524f] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--q-primary);
  color: var(--q-info);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.go-to-catalog-btn[data-v-2a84524f]:hover {
  background: color-mix(in srgb, var(--q-primary) 85%, black);
  transform: translateY(-1px);
}
.upload-another-btn[data-v-2a84524f] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  border-radius: 8px;
  background: var(--q-info);
  color: var(--q-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.upload-another-btn[data-v-2a84524f]:hover {
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
  border-color: color-mix(in srgb, var(--q-primary) 50%, var(--q-info));
}

/* Error */
.error-section[data-v-2a84524f] {
  margin-top: 16px;
  padding: 12px;
  background: color-mix(in srgb, var(--q-warning) 8%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-warning) 25%, var(--q-info));
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--q-warning);
}
.error-title[data-v-2a84524f] {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}
.error-text[data-v-2a84524f] {
  font-size: 12px;
  opacity: 0.8;
  margin: 0;
}

/* Publish Card */
.publish-card[data-v-2a84524f] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  background: var(--q-dark);
  cursor: pointer;
  transition: all 0.2s;
}
.publish-card[data-v-2a84524f]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
}
.publish-card.active[data-v-2a84524f] {
  border-color: color-mix(in srgb, var(--q-primary) 40%, var(--q-info));
  background: color-mix(in srgb, var(--q-primary) 4%, var(--q-info));
}
.publish-card-left[data-v-2a84524f] {
  display: flex;
  align-items: center;
  gap: 14px;
}
.publish-icon-box[data-v-2a84524f] {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  color: var(--q-positive);
  transition: all 0.2s;
}
.publish-icon-box.active[data-v-2a84524f] {
  background: color-mix(in srgb, var(--q-primary) 12%, var(--q-info));
  color: var(--q-primary);
}
.publish-title[data-v-2a84524f] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0;
  line-height: 1.3;
}
.publish-desc[data-v-2a84524f] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
  line-height: 1.3;
}

/* Actions */
.actions[data-v-2a84524f] {
  padding-top: 24px;
  border-top: 1px solid var(--q-dark);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Button styles */
.lms-primary-btn[data-v-2a84524f] {
  background-color: var(--q-primary);
  color: var(--q-info);
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.2s;
}
.lms-primary-btn[data-v-2a84524f]:hover {
  background-color: color-mix(in srgb, var(--q-primary) 85%, black);
  transform: translateY(-1px);
}
.lms-cancel-btn[data-v-2a84524f] {
  color: var(--q-positive);
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.2s;
}
.lms-cancel-btn[data-v-2a84524f]:hover {
  background-color: var(--q-dark);
  color: var(--q-accent);
}

/* Alert Dialog */
.alert-card[data-v-2a84524f] {
  min-width: 400px;
  max-width: 500px;
  border-radius: 1rem;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.alert-title[data-v-2a84524f] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
}
.alert-message[data-v-2a84524f] {
  font-size: 14px;
  color: var(--q-positive);
}
@media (max-width: 600px) {
.alert-card[data-v-2a84524f] {
    min-width: 90vw;
}
}


.floating-btn[data-v-a2f65b0a] {
  animation: pulse-a2f65b0a 2s infinite ease-in-out;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: opacity 0.3s ease;
}
.floating-btn[data-v-a2f65b0a] .q-icon {
  font-size: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.floating-btn[data-v-a2f65b0a]:not([style*="display: none"]) {
  opacity: 1;
}
.floating-btn[style*="display: none"][data-v-a2f65b0a] {
  opacity: 0;
  pointer-events: none;
}
@keyframes pulse-a2f65b0a {
0% {
    opacity: 0.6;
}
50% {
    opacity: 1;
}
100% {
    opacity: 0.6;
}
}



/* Reset legacy styles - IMPORTANT for compatibility */
.mg-container[data-v-7904ab54],
.mg-container[data-v-7904ab54] * {
  box-sizing: border-box !important;
  line-height: 1.4 !important;
}
.mg-container[data-v-7904ab54] {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 400px !important;
  background: color-mix(in srgb, var(--q-accent) 6%, var(--q-info)) !important;
  font-family: inherit !important;
}

/* Header */
.mg-container .mg-header[data-v-7904ab54] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  background: var(--q-info) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info)) !important;
  flex-shrink: 0 !important;
}
.mg-container .mg-header-left[data-v-7904ab54] {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.mg-container .mg-header-icon[data-v-7904ab54] {
  color: var(--q-primary) !important;
}
.mg-container .mg-title[data-v-7904ab54] {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--q-accent) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
.mg-container .mg-header-actions[data-v-7904ab54] {
  display: flex !important;
  gap: 4px !important;
}
.mg-container .mg-action-btn[data-v-7904ab54] {
  color: var(--q-positive) !important;
}
.mg-container .mg-action-btn[data-v-7904ab54]:hover {
  color: var(--q-primary) !important;
  background: color-mix(in srgb, var(--q-primary) 15%, var(--q-info)) !important;
}

/* Toolbar */
.mg-container .mg-toolbar[data-v-7904ab54] {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 12px 20px !important;
  background: var(--q-info) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info)) !important;
  flex-wrap: wrap !important;
  flex-shrink: 0 !important;
}
.mg-container .mg-upload-wrapper[data-v-7904ab54] .q-btn {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  border-radius: 8px !important;
  text-transform: none !important;
  font-weight: 500 !important;
}
.mg-container .mg-search-wrapper[data-v-7904ab54] {
  flex: 1 !important;
  min-width: 200px !important;
  max-width: 300px !important;
}
.mg-container .mg-search[data-v-7904ab54] .q-field__control {
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--q-accent) 6%, var(--q-info)) !important;
}
.mg-container .mg-search[data-v-7904ab54] .q-field__control:before {
  border-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info)) !important;
}
.mg-container .mg-stats[data-v-7904ab54] {
  display: flex !important;
  gap: 16px !important;
}
.mg-container .mg-stat[data-v-7904ab54] {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: var(--q-positive) !important;
}
.mg-container .mg-select-btn[data-v-7904ab54] {
  border-radius: 8px !important;
  font-weight: 500 !important;
}

/* Loading */
.mg-container .mg-loading[data-v-7904ab54] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 20px !important;
  gap: 16px !important;
  flex: 1 !important;
}
.mg-container .mg-loading-text[data-v-7904ab54] {
  font-size: 14px !important;
  color: var(--q-positive) !important;
  margin: 0 !important;
}

/* Empty */
.mg-container .mg-empty[data-v-7904ab54] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 20px !important;
  text-align: center !important;
  flex: 1 !important;
}
.mg-container .mg-empty-icon[data-v-7904ab54] {
  color: color-mix(in srgb, var(--q-accent) 30%, var(--q-info)) !important;
  margin-bottom: 16px !important;
}
.mg-container .mg-empty-title[data-v-7904ab54] {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--q-accent) !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.3 !important;
}
.mg-container .mg-empty-text[data-v-7904ab54] {
  font-size: 14px !important;
  color: var(--q-positive) !important;
  margin: 0 !important;
}

/* Gallery */
.mg-container .mg-gallery[data-v-7904ab54] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  grid-auto-rows: min-content !important;
  align-content: start !important;
  gap: 16px !important;
  padding: 20px !important;
  overflow-y: auto !important;
  flex: 1 !important;
}

/* Card - critical styles with high specificity */
.mg-container .mg-gallery .mg-card[data-v-7904ab54] {
  display: flex !important;
  flex-direction: column !important;
  background: var(--q-info) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info)) !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--q-accent) 15%, transparent) !important;
  min-height: 220px !important;
}
.mg-container .mg-gallery .mg-card[data-v-7904ab54]:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--q-accent) 20%, transparent) !important;
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--q-accent) 25%, var(--q-info)) !important;
}
.mg-container .mg-gallery .mg-card.mg-card-selected[data-v-7904ab54] {
  border-color: var(--q-primary) !important;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info)) !important;
}
.mg-container .mg-card-preview[data-v-7904ab54] {
  position: relative !important;
  width: 100% !important;
  height: 140px !important;
  min-height: 140px !important;
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-info)) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.mg-container .mg-card-image[data-v-7904ab54] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.mg-container .mg-card-icon-wrapper[data-v-7904ab54] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  width: 100% !important;
  gap: 8px !important;
}
.mg-container .mg-card-icon[data-v-7904ab54] {
  color: var(--q-positive) !important;
  font-size: 48px !important;
}
.mg-container .mg-card-ext[data-v-7904ab54] {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--q-positive) !important;
  text-transform: uppercase !important;
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info)) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  line-height: 1.4 !important;
}
.mg-container .mg-card-checkbox[data-v-7904ab54] {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: var(--q-info) !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px color-mix(in srgb, var(--q-accent) 15%, transparent) !important;
}
.mg-container .mg-card-info[data-v-7904ab54] {
  display: block !important;
  padding: 10px 12px 8px !important;
  background: var(--q-info) !important;
}
.mg-container .mg-card-name[data-v-7904ab54] {
  display: block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--q-accent) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
.mg-container .mg-card-size[data-v-7904ab54] {
  display: block !important;
  font-size: 11px !important;
  color: var(--q-positive) !important;
  margin-top: 2px !important;
  line-height: 1.3 !important;
}
.mg-container .mg-card-actions[data-v-7904ab54] {
  display: flex !important;
  padding: 0 8px 10px !important;
  gap: 4px !important;
  margin-top: auto !important;
  background: var(--q-info) !important;
}
.mg-container .mg-card-btn[data-v-7904ab54] {
  font-size: 12px !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  min-height: 32px !important;
}
.mg-container .mg-card-btn.mg-card-btn-select[data-v-7904ab54] {
  flex: 1 !important;
  color: var(--q-primary) !important;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info)) !important;
}
.mg-container .mg-card-btn.mg-card-btn-select[data-v-7904ab54]:hover {
  background: color-mix(in srgb, var(--q-primary) 18%, var(--q-info)) !important;
}
.mg-container .mg-card-btn.mg-card-btn-delete[data-v-7904ab54] {
  flex: 0 0 auto !important;
  color: var(--q-positive) !important;
  min-width: 36px !important;
}
.mg-container .mg-card-btn.mg-card-btn-delete[data-v-7904ab54]:hover {
  color: var(--q-negative) !important;
  background: color-mix(in srgb, var(--q-negative) 15%, var(--q-info)) !important;
}

/* Preview Dialog */
.mg-preview-dialog[data-v-7904ab54] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: color-mix(in srgb, var(--q-dark) 95%, transparent) !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}
.mg-preview-close[data-v-7904ab54] {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  color: var(--q-info) !important;
  background: color-mix(in srgb, var(--q-info) 20%, transparent) !important;
  z-index: 1 !important;
}
.mg-preview-close[data-v-7904ab54]:hover {
  background: color-mix(in srgb, var(--q-info) 35%, transparent) !important;
}
.mg-preview-image[data-v-7904ab54] {
  max-width: 90vw !important;
  max-height: 90vh !important;
}

/* Responsive */
@media (max-width: 600px) {
.mg-container .mg-toolbar[data-v-7904ab54] {
    flex-direction: column !important;
    align-items: stretch !important;
}
.mg-container .mg-search-wrapper[data-v-7904ab54] {
    max-width: none !important;
}
.mg-container .mg-stats[data-v-7904ab54] {
    justify-content: center !important;
}
.mg-container .mg-gallery[data-v-7904ab54] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
}
}


.create-test-manual-view.loading-state[data-v-26f7424a] {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}
.create-test-manual-view[data-v-26f7424a] {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: 80px;
}

/* Лоадер при загрузке теста для редактирования */
.edit-loading-overlay[data-v-26f7424a] {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.5);
  color: var(--q-info);
}
.edit-loading-text[data-v-26f7424a] {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}
.loader-fade-enter-active[data-v-26f7424a],
.loader-fade-leave-active[data-v-26f7424a] {
  transition: opacity 0.2s ease;
}
.loader-fade-enter-from[data-v-26f7424a],
.loader-fade-leave-to[data-v-26f7424a] {
  opacity: 0;
}

/* Action Bar (as in CreateTestQuickView) */
.action-bar[data-v-26f7424a] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--q-info);
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}
@media (min-width: 640px) {
.action-bar[data-v-26f7424a] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
}
.action-bar-back[data-v-26f7424a] {
  margin-bottom: 4px;
}
.action-bar-title[data-v-26f7424a] {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--q-accent);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.action-bar-subtitle[data-v-26f7424a] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.action-bar-buttons[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.btn-draft[data-v-26f7424a] {
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  color: var(--q-positive);
  font-weight: 500;
}
.btn-draft[data-v-26f7424a]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-accent) 5%, var(--q-info));
}
.btn-publish[data-v-26f7424a] {
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--q-primary);
  color: var(--q-info);
  font-weight: 700;
  box-shadow: 0 4px 6px color-mix(in srgb, var(--q-primary) 20%, transparent);
}
.btn-publish[data-v-26f7424a]:hover:not(:disabled) {
  box-shadow: 0 6px 10px color-mix(in srgb, var(--q-primary) 30%, transparent);
}

/* Form Sections */
.form-sections[data-v-26f7424a] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form-card[data-v-26f7424a] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px 28px;
}
.step-indicator[data-v-26f7424a] {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.step-item[data-v-26f7424a] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.step-bar[data-v-26f7424a] {
  height: 6px;
  border-radius: 999px;
  transition: all 0.5s;
}
.step-bar.completed[data-v-26f7424a] {
  background: var(--q-primary);
}
.step-bar.active[data-v-26f7424a] {
  background: color-mix(in srgb, var(--q-primary) 60%, var(--q-info));
}
.step-bar.pending[data-v-26f7424a] {
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.step-label[data-v-26f7424a] {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: var(--q-positive);
  opacity: 0.8;
}
.step-label.active[data-v-26f7424a] {
  color: var(--q-primary);
  opacity: 1;
}
.step-content[data-v-26f7424a] {
  animation: fadeIn-26f7424a 0.3s ease;
}
@keyframes fadeIn-26f7424a {
from {
    opacity: 0;
    transform: translateX(32px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}
.form-grid[data-v-26f7424a] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.form-grid[data-v-26f7424a] .q-field__control {
  border-radius: 8px;
}
.form-grid[data-v-26f7424a] .q-field__control:before {
  border-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.form-grid[data-v-26f7424a] .q-field:hover .q-field__control:before {
  border-color: var(--q-primary);
}
.col-span-2[data-v-26f7424a] {
  grid-column: span 2;
}
.form-group[data-v-26f7424a] {
  margin-bottom: 0;
}
.form-label[data-v-26f7424a] {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--q-positive);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.required[data-v-26f7424a] {
  color: var(--q-negative);
}
.picture-section[data-v-26f7424a] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.btn-gallery[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-radius: 8px;
  background: var(--q-info);
  color: var(--q-positive);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-gallery[data-v-26f7424a]:hover {
  border-color: var(--q-primary);
  color: var(--q-primary);
}
.picture-preview[data-v-26f7424a] {
  position: relative;
  display: inline-block;
}
.picture-preview .q-img[data-v-26f7424a] {
  border: 1px dashed color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-radius: 12px;
}
.picture-clear-btn[data-v-26f7424a] {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--q-info);
}
.form-row[data-v-26f7424a] {
  display: flex;
  gap: 16px;
}
.form-row .form-group[data-v-26f7424a] {
  flex: 1;
}
.pt-checkbox[data-v-26f7424a] {
  padding-top: 28px;
}
.competency-section[data-v-26f7424a] {
  margin-top: 28px;
  padding: 20px;
  background: color-mix(in srgb, var(--q-dark) 4%, var(--q-info));
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
}
.competency-centered[data-v-26f7424a] {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.competency-select-wrap[data-v-26f7424a] {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
}
.classification-grid[data-v-26f7424a] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.complexity-toggle[data-v-26f7424a] .q-btn-group {
  background: #f1f5f9;
  border-radius: 12px;
  padding: 4px;
}
.complexity-toggle[data-v-26f7424a] .q-btn,
.type-toggle[data-v-26f7424a] .q-btn {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 8px;
}
.options-cards-section[data-v-26f7424a] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
.option-card[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--q-info);
  border: 2px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.option-card[data-v-26f7424a]:hover {
  border-color: color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.option-card.active[data-v-26f7424a] {
  border-color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
}
.option-card-icon[data-v-26f7424a] {
  flex-shrink: 0;
  color: var(--q-positive);
  opacity: 0.8;
}
.option-card.active .option-card-icon[data-v-26f7424a] {
  color: var(--q-primary);
  opacity: 1;
}
.option-card-label[data-v-26f7424a] {
  font-size: 13px;
  font-weight: 600;
  color: var(--q-positive);
}
.option-card.active .option-card-label[data-v-26f7424a] {
  color: var(--q-accent);
}
.ipr-option-wrap[data-v-26f7424a] {
  flex-shrink: 0;
}
.option-card.ipr-option.disabled[data-v-26f7424a] {
  opacity: 0.5;
  cursor: not-allowed;
}
.option-card.ipr-option.disabled[data-v-26f7424a]:hover {
  border-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.certificate-select-wrap[data-v-26f7424a] {
  margin-top: 20px;
}
.certificate-select[data-v-26f7424a] {
  width: 100%;
  max-width: 300px;
}

/* Step 2 */
.params-grid[data-v-26f7424a] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}
.param-card[data-v-26f7424a] {
  padding: 20px;
  background: color-mix(in srgb, var(--q-dark) 4%, var(--q-info));
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
}
.param-title[data-v-26f7424a] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-positive);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.param-content[data-v-26f7424a] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.slider-group[data-v-26f7424a] {
  margin-bottom: 8px;
}
.slider-label[data-v-26f7424a] {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}
.slider-label span[data-v-26f7424a] {
  color: var(--q-dark);
  opacity: 0.8;
}
.toggle-row[data-v-26f7424a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--q-accent) 5%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
}
.toggle-row span[data-v-26f7424a] {
  font-size: 14px;
  font-weight: 500;
  color: var(--q-accent);
}
.toggle-row.compact[data-v-26f7424a] {
  padding: 10px 14px;
}
.no-prev-wrap[data-v-26f7424a] {
  padding: 12px 16px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--q-accent) 5%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
}
.block-options[data-v-26f7424a] {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}
.inputs-row[data-v-26f7424a] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.mini-input label[data-v-26f7424a],
.mini-input-label[data-v-26f7424a] {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
  opacity: 1;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.visibility-section[data-v-26f7424a] {
  margin-bottom: 32px;
}
.section-title[data-v-26f7424a] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-positive);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.visibility-grid[data-v-26f7424a] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 768px) {
.visibility-grid[data-v-26f7424a] {
    grid-template-columns: repeat(4, 1fr);
}
}
.visibility-card[data-v-26f7424a] {
  padding: 16px;
  border-radius: 12px;
  border: 2px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  background: var(--q-info);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.visibility-card[data-v-26f7424a]:hover {
  border-color: color-mix(in srgb, var(--q-accent) 22%, var(--q-info));
}
.visibility-card.active[data-v-26f7424a] {
  border-color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
}
.visibility-icon[data-v-26f7424a] {
  color: var(--q-positive);
  opacity: 0.7;
  margin-bottom: 8px;
  transition: color 0.2s;
}
.visibility-icon.active[data-v-26f7424a] {
  color: var(--q-primary);
  opacity: 1;
}
.visibility-title[data-v-26f7424a] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-positive);
}
.visibility-desc[data-v-26f7424a] {
  font-size: 12px;
  color: var(--q-positive);
  opacity: 0.85;
  margin-top: 4px;
  line-height: 1.3;
}
.logic-grid[data-v-26f7424a] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.logic-section[data-v-26f7424a] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.logic-title[data-v-26f7424a] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-positive);
  margin: 0 0 4px 0;
}
.toggle-with-btn[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dep-chips[data-v-26f7424a] {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--q-primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--q-primary) 22%, transparent);
  border-radius: 10px;
}
.dep-chips[data-v-26f7424a] .q-chip {
  font-weight: 500;
  font-size: 0.8125rem;
  border-width: 1.5px;
  border-color: color-mix(in srgb, var(--q-primary) 45%, transparent);
  background: color-mix(in srgb, var(--q-primary) 6%, var(--q-surface));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.dep-chips[data-v-26f7424a] .q-chip:hover {
  border-color: color-mix(in srgb, var(--q-primary) 55%, transparent);
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-surface));
}
.dep-chips[data-v-26f7424a] .q-chip .q-icon {
  opacity: 0.85;
}
.date-picker-icon[data-v-26f7424a] {
  cursor: pointer;
}
.competence-indicators[data-v-26f7424a] {
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  padding-top: 12px;
}
.comp-indicator-block[data-v-26f7424a] {
  margin-bottom: 8px;
}
.comp-name[data-v-26f7424a] {
  font-weight: 700;
  color: var(--q-positive);
}
.comp-indicator-row[data-v-26f7424a] {
  font-size: 12px;
  color: var(--q-positive);
  opacity: 0.9;
  margin-left: 12px;
}
.feedback-area[data-v-26f7424a] {
  padding: 12px;
  background: color-mix(in srgb, var(--q-accent) 5%, var(--q-info));
  border-radius: 8px;
}
.feedback-row[data-v-26f7424a] {
  margin-bottom: 8px;
}
.feedback-row label[data-v-26f7424a] {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--q-accent);
  margin-bottom: 4px;
}

/* Step 3 */
.blocks-toggle-section[data-v-26f7424a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: color-mix(in srgb, var(--q-dark) 4%, var(--q-info));
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  margin-bottom: 32px;
}
.blocks-toggle-title[data-v-26f7424a] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-positive);
  margin: 0 0 4px 0;
}
.blocks-toggle-desc[data-v-26f7424a] {
  font-size: 14px;
  color: var(--q-positive);
  opacity: 0.9;
  margin: 0;
  max-width: 500px;
}
.blocks-header[data-v-26f7424a] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.blocks-list[data-v-26f7424a] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}
.block-card[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: color-mix(in srgb, var(--q-dark) 4%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  border-radius: 12px;
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
}
.block-card[data-v-26f7424a]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 25%, var(--q-info));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.drag-handle[data-v-26f7424a] {
  color: var(--q-dark);
  opacity: 0.5;
  cursor: move;
}
.block-content[data-v-26f7424a] {
  flex: 1;
}
.block-title-row[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.block-warning-badge[data-v-26f7424a] {
  flex-shrink: 0;
}
.block-title-input[data-v-26f7424a] {
  max-width: 350px;
}
.block-title-input[data-v-26f7424a] .q-field__control {
  font-weight: 600;
  font-size: 14px;
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-positive) 30%, var(--q-info));
  border-radius: 6px;
  min-height: 38px;
  transition: all 0.2s ease;
}
.block-title-input[data-v-26f7424a] .q-field__control:hover {
  border-color: color-mix(in srgb, var(--q-positive) 50%, var(--q-info));
}
.block-title-input[data-v-26f7424a] .q-field__control:focus-within {
  border-color: var(--q-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--q-accent) 15%, transparent);
}
.block-title-input[data-v-26f7424a] input {
  font-weight: 600;
  font-size: 14px;
  color: var(--q-accent);
  padding: 0 10px;
}
.block-title-input[data-v-26f7424a] input::placeholder {
  color: var(--q-positive);
  opacity: 0.5;
  font-weight: 500;
}
.block-options label[data-v-26f7424a],
.block-count-input label[data-v-26f7424a] {
  color: var(--q-positive);
  font-weight: 600;
  font-size: 12px;
}
.block-delete-btn[data-v-26f7424a] {
  color: var(--q-negative);
  background: color-mix(in srgb, var(--q-negative) 12%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-negative) 40%, var(--q-info));
  flex-shrink: 0;
}
.block-delete-btn[data-v-26f7424a]:hover {
  color: var(--q-info);
  background: var(--q-negative);
  border-color: var(--q-negative);
}
.add-block-btn[data-v-26f7424a] {
  width: 100%;
  padding: 14px;
  border: 2px dashed color-mix(in srgb, var(--q-positive) 40%, var(--q-info));
  border-radius: 12px;
  color: var(--q-positive);
  font-weight: 700;
  transition: all 0.2s;
}
.add-block-btn[data-v-26f7424a]:hover:not(:disabled) {
  border-color: var(--q-primary);
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 6%, var(--q-info));
}
.blocks-disabled[data-v-26f7424a] {
  text-align: center;
  padding: 48px;
  color: var(--q-dark);
  opacity: 0.7;
}
.blocks-disabled p[data-v-26f7424a] {
  margin-top: 16px;
  color: var(--q-accent);
  font-weight: 500;
}

/* Step 4 */
.weight-settings[data-v-26f7424a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: color-mix(in srgb, var(--q-accent) 5%, var(--q-info));
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  margin-bottom: 16px;
}
.weight-info[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.weight-info span[data-v-26f7424a] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
}
.help-icon[data-v-26f7424a] {
  color: var(--q-dark);
  opacity: 0.7;
  cursor: help;
}
.questions-search-row .questions-search-input[data-v-26f7424a] {
  max-width: 320px;
}
.drag-handle-question[data-v-26f7424a] {
  flex-shrink: 0;
  color: var(--q-dark);
  opacity: 0.5;
}
.drag-handle-question[data-v-26f7424a]:hover {
  opacity: 0.8;
}
.cursor-grab[data-v-26f7424a] {
  cursor: grab;
}
.questions-empty-hint[data-v-26f7424a] {
  padding: 24px;
  text-align: center;
  color: var(--q-accent);
  font-size: 14px;
  background: color-mix(in srgb, var(--q-accent) 6%, var(--q-info));
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
}
.questions-list[data-v-26f7424a] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 24px;
}
.question-card[data-v-26f7424a] {
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.question-header[data-v-26f7424a] {
  background: var(--q-dark);
  padding: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.question-number[data-v-26f7424a] {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-dark);
  opacity: 0.8;
}
.question-main[data-v-26f7424a] {
  flex: 1;
  min-width: 0;
}
.question-text-input[data-v-26f7424a] .q-field__control {
  font-weight: 500;
  color: var(--q-accent);
}
.question-meta[data-v-26f7424a] {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}
.type-select[data-v-26f7424a] {
  min-width: 180px;
}
.type-select[data-v-26f7424a] .q-field__control {
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  min-height: 36px;
}
.type-select[data-v-26f7424a] .q-field__control:before {
  border-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.block-select[data-v-26f7424a] {
  min-width: 140px;
}
.block-select[data-v-26f7424a] .q-field__control {
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  min-height: 36px;
}
.block-select[data-v-26f7424a] .q-field__control:before {
  border-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.weight-input[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
  padding: 4px 8px;
}
.weight-input span[data-v-26f7424a] {
  font-size: 12px;
  font-weight: 700;
  color: var(--q-dark);
  opacity: 0.8;
}
.weight-field[data-v-26f7424a] {
  width: 48px;
}
.weight-field[data-v-26f7424a] .q-field__control {
  font-size: 12px;
  font-weight: 700;
  color: var(--q-accent);
  text-align: right;
}
.weight-percent[data-v-26f7424a] {
  font-size: 10px;
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  padding: 2px 6px;
  border-radius: 4px;
}
.question-header-clickable[data-v-26f7424a] {
  cursor: pointer;
  transition: background 0.15s;
}
.question-header-clickable[data-v-26f7424a]:hover {
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-dark));
}
.question-edit-btn[data-v-26f7424a] {
  opacity: 0.7;
}
.question-edit-btn[data-v-26f7424a]:hover {
  opacity: 1;
  color: var(--q-primary);
}

/* Кнопки на карточке вопроса: контрастные (primary / negative) */
.btn-question-card[data-v-26f7424a] {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-question-edit[data-v-26f7424a] {
  background: color-mix(in srgb, var(--q-primary) 28%, var(--q-dark));
  color: var(--q-primary);
  border: 1px solid color-mix(in srgb, var(--q-primary) 50%, var(--q-dark));
}
.btn-question-edit[data-v-26f7424a]:hover {
  background: var(--q-primary);
  color: var(--q-info);
  border-color: var(--q-primary);
}
.btn-question-delete[data-v-26f7424a] {
  color: var(--q-positive);
  background: color-mix(in srgb, var(--q-negative) 6%, var(--q-dark));
  border: 1px solid color-mix(in srgb, var(--q-negative) 18%, var(--q-dark));
  border-radius: 8px;
  transition:
    color 0.2s,
    background 0.2s,
    border-color 0.2s;
}
.btn-question-delete[data-v-26f7424a] .q-icon {
  color: inherit;
}
.btn-question-delete[data-v-26f7424a]:hover {
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-negative) 22%, var(--q-dark));
  border-color: color-mix(in srgb, var(--q-negative) 40%, var(--q-dark));
}

/* Модальное окно редактирования вопроса */
.question-edit-dialog .q-dialog__backdrop[data-v-26f7424a] {
  background: rgba(0, 0, 0, 0.4);
}
.question-edit-modal-card[data-v-26f7424a] {
  width: 100%;
  max-width: 640px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.question-edit-modal-header[data-v-26f7424a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: color-mix(in srgb, var(--q-accent) 6%, var(--q-info));
  color: var(--q-accent);
}
.question-edit-modal-title[data-v-26f7424a] {
  font-size: 18px;
  font-weight: 700;
}
.question-edit-modal-body[data-v-26f7424a] {
  padding: 24px;
  max-height: 75vh;
  overflow-y: auto;
}
.question-edit-modal-body .form-label[data-v-26f7424a] {
  color: var(--q-accent);
  font-weight: 600;
}
.substitution-hint[data-v-26f7424a] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-primary) 28%, transparent);
  border-radius: 10px;
  border-left: 4px solid var(--q-primary);
}
.substitution-hint-icon[data-v-26f7424a] {
  color: var(--q-primary);
  flex-shrink: 0;
  margin-top: 2px;
}
.substitution-hint-content[data-v-26f7424a] {
  flex: 1;
  min-width: 0;
}
.substitution-hint-title[data-v-26f7424a] {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--q-primary);
  margin-bottom: 6px;
}
.substitution-hint-text[data-v-26f7424a] {
  font-size: 0.875rem;
  line-height: 1.45;
  margin: 0 0 8px 0;
  color: var(--q-accent);
}
.substitution-hint-text code[data-v-26f7424a] {
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--q-primary) 18%, var(--q-info));
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
}
.substitution-hint-example[data-v-26f7424a] {
  font-size: 0.8125rem;
  line-height: 1.4;
  margin: 0;
  color: var(--q-accent);
  opacity: 0.9;
  font-style: italic;
}
.substitution-preview-wrap[data-v-26f7424a] {
  margin-top: 10px;
}
.substitution-preview-label[data-v-26f7424a] {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.substitution-preview-row[data-v-26f7424a] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 16px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--q-accent);
}
.substitution-preview-segment[data-v-26f7424a] {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 4px;
}
.substitution-preview-input[data-v-26f7424a] {
  min-width: 60px;
  width: 80px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 30%, transparent);
  border-radius: 4px;
  background: var(--q-surface);
  font-size: 1rem;
  color: var(--q-accent);
  vertical-align: middle;
}
.question-modal-variants[data-v-26f7424a] {
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
}
.variants-list[data-v-26f7424a] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.variant-card[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 14%, var(--q-info));
  background: color-mix(in srgb, var(--q-accent) 4%, var(--q-info));
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.variant-card[data-v-26f7424a]:hover {
  border-color: color-mix(in srgb, var(--q-accent) 22%, var(--q-info));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.variant-card-body[data-v-26f7424a] {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.variant-card-body.pair-body[data-v-26f7424a] {
  flex-wrap: wrap;
}
.variant-text[data-v-26f7424a] {
  font-size: 14px;
  font-weight: 500;
  color: var(--q-accent);
  line-height: 1.4;
}
.variant-card-qa .option-checkbox[data-v-26f7424a] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid color-mix(in srgb, var(--q-accent) 30%, var(--q-info));
}
.variant-card-qa .option-checkbox.correct[data-v-26f7424a] {
  background: var(--q-positive);
  border-color: var(--q-positive);
}
.variant-card-qa .check-dot[data-v-26f7424a] {
  width: 10px;
  height: 10px;
}
.variant-card-pair .pair-left[data-v-26f7424a],
.variant-card-pair .pair-right[data-v-26f7424a] {
  font-size: 14px;
  font-weight: 500;
  color: var(--q-accent);
}
.variant-card-pair .pair-arrow[data-v-26f7424a] {
  color: var(--q-primary);
  opacity: 0.9;
}
.variant-card-order .order-num-badge[data-v-26f7424a] {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  font-size: 14px;
  border-radius: 10px;
  background: var(--q-primary);
  color: var(--q-info);
}
.variant-card-actions[data-v-26f7424a] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.variant-form-inline[data-v-26f7424a] {
  padding: 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--q-primary) 6%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-primary) 20%, var(--q-info));
}
.variant-form-title[data-v-26f7424a] {
  font-size: 13px;
  font-weight: 700;
  color: var(--q-accent);
  margin-bottom: 12px;
}
.variant-form-fields[data-v-26f7424a] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.variant-form-fields .variant-field[data-v-26f7424a] {
  flex: 1;
}
.variant-form-fields .variant-field[data-v-26f7424a]:first-child {
  margin-bottom: 0;
}
.variant-form-fields-pair[data-v-26f7424a] {
  flex-direction: row;
  flex-wrap: wrap;
}
.variant-form-fields-pair .variant-field[data-v-26f7424a] {
  min-width: 140px;
  flex: 1;
}
.variant-form-actions[data-v-26f7424a] {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.modal-close-btn[data-v-26f7424a] {
  color: var(--q-accent);
}
.modal-close-btn[data-v-26f7424a]:hover {
  background: color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
}

/* Кнопки шага 4 в стиле компонента */
.btn-step4[data-v-26f7424a] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}
.btn-step4[data-v-26f7424a]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-step4-primary[data-v-26f7424a] {
  background: var(--q-primary);
  color: var(--q-info);
  border-color: color-mix(in srgb, var(--q-primary) 80%, transparent);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--q-primary) 30%, transparent);
}
.btn-step4-primary[data-v-26f7424a]:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: 0 4px 8px color-mix(in srgb, var(--q-primary) 25%, transparent);
}
.btn-step4-secondary[data-v-26f7424a] {
  background: var(--q-info);
  color: var(--q-accent);
  border: 1px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
}
.btn-step4-secondary[data-v-26f7424a]:hover:not(:disabled) {
  border-color: var(--q-primary);
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 6%, var(--q-info));
}
.btn-step4-outline[data-v-26f7424a] {
  background: transparent;
  color: var(--q-primary);
  border: 1px solid color-mix(in srgb, var(--q-primary) 50%, var(--q-info));
}
.btn-step4-outline[data-v-26f7424a]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
  border-color: var(--q-primary);
}
.btn-step4-icon[data-v-26f7424a] {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--q-dark);
  opacity: 0.7;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-step4-icon[data-v-26f7424a]:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  color: var(--q-primary);
}
.btn-step4-icon-delete[data-v-26f7424a]:hover {
  color: var(--q-negative);
  background: color-mix(in srgb, var(--q-negative) 10%, var(--q-info));
}
.question-edit-actions[data-v-26f7424a] {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
}

/* Селекты и инпуты шага 4 */
.step4-select[data-v-26f7424a] .q-field__control,
.step4-input[data-v-26f7424a] .q-field__control {
  border-radius: 8px;
  min-height: 40px;
}
.step4-select[data-v-26f7424a] .q-field__control:before,
.step4-input[data-v-26f7424a] .q-field__control:before {
  border-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.answer-form-inline[data-v-26f7424a] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.answer-form-inline .answer-input-flex[data-v-26f7424a] {
  flex: 1;
  min-width: 180px;
}
.answers-header[data-v-26f7424a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.answers-header-text[data-v-26f7424a] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.answers-title[data-v-26f7424a] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
}
.answers-hint[data-v-26f7424a] {
  font-size: 12px;
  color: var(--q-accent);
  opacity: 0.85;
}
.btn-step4-add.btn-add-question[data-v-26f7424a] {
  margin-top: 16px;
}
.answer-area[data-v-26f7424a] {
  padding: 16px;
}
.option-row[data-v-26f7424a],
.option-row-qa[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.pair-row[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--q-accent) 6%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  border-radius: 8px;
}
.pair-left[data-v-26f7424a] {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--q-accent);
}
.pair-arrow[data-v-26f7424a] {
  flex-shrink: 0;
  color: var(--q-accent);
  opacity: 0.7;
}
.pair-right[data-v-26f7424a] {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--q-accent);
}
.order-row[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--q-accent) 5%, var(--q-info));
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.order-num-badge[data-v-26f7424a] {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--q-primary);
  color: var(--q-info);
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
}
.btn-answer-action[data-v-26f7424a] {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--q-accent);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-answer-edit[data-v-26f7424a]:hover {
  background: color-mix(in srgb, var(--q-primary) 12%, var(--q-info));
  color: var(--q-primary);
}
.btn-answer-delete[data-v-26f7424a]:hover {
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-negative) 22%, var(--q-dark));
  border-color: color-mix(in srgb, var(--q-negative) 40%, var(--q-dark));
}
.option-checkbox[data-v-26f7424a] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.option-checkbox.correct[data-v-26f7424a] {
  background: var(--q-positive);
  border-color: var(--q-positive);
}
.check-dot[data-v-26f7424a] {
  width: 8px;
  height: 8px;
  background: var(--q-info);
  border-radius: 50%;
}
.option-input[data-v-26f7424a] {
  flex: 1;
}
.option-file-cell[data-v-26f7424a] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.btn-remove-item[data-v-26f7424a] {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--q-accent);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.btn-remove-item[data-v-26f7424a]:hover {
  color: var(--q-negative);
  background: color-mix(in srgb, var(--q-negative) 8%, var(--q-info));
}
.pair-files[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.option-input[data-v-26f7424a] .q-field__control {
  border-bottom: 1px solid transparent;
}
.option-input[data-v-26f7424a] .q-field__control:hover {
  border-bottom-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.option-input[data-v-26f7424a] .q-field--focused .q-field__control {
  border-bottom-color: var(--q-primary);
}
.btn-add-option[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding: 8px 0 8px 28px;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}
.btn-add-option[data-v-26f7424a]:hover {
  color: var(--q-primary);
}
.open-area[data-v-26f7424a] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--q-warning) 8%, var(--q-info));
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--q-warning) 20%, var(--q-info));
}
.reviewer-label[data-v-26f7424a] {
  font-size: 12px;
  font-weight: 700;
  color: var(--q-accent);
}
.reviewer-row[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.reviewer-name[data-v-26f7424a],
.reviewer-empty[data-v-26f7424a] {
  font-size: 14px;
  color: var(--q-accent);
}
.reviewer-empty[data-v-26f7424a] {
  opacity: 0.7;
}
.btn-select-reviewer[data-v-26f7424a] {
  color: var(--q-primary);
}
.fill-area[data-v-26f7424a] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fill-hint[data-v-26f7424a] {
  font-size: 12px;
  color: var(--q-dark);
  opacity: 0.8;
  margin: 0;
}
.fill-hint code[data-v-26f7424a] {
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  padding: 2px 4px;
  border-radius: 4px;
}
.fill-substitution-preview[data-v-26f7424a] {
  margin-top: 8px;
  font-size: 12px;
  color: var(--q-dark);
  opacity: 0.8;
}
.fill-substitution-label[data-v-26f7424a] {
  font-weight: 600;
  margin-right: 4px;
}
.fill-substitution-part[data-v-26f7424a] {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 6px;
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 4px;
}
.matching-header[data-v-26f7424a],
.matching-label[data-v-26f7424a] {
  font-size: 12px;
  font-weight: 700;
  color: var(--q-accent);
}
.pair-row[data-v-26f7424a],
.order-row[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.pair-input[data-v-26f7424a],
.order-input[data-v-26f7424a] {
  flex: 1;
}
.order-num[data-v-26f7424a] {
  width: 24px;
  text-align: center;
  font-weight: 700;
  color: var(--q-dark);
  opacity: 0.8;
}
.order-hint[data-v-26f7424a] {
  font-size: 12px;
  color: var(--q-dark);
  opacity: 0.8;
  margin: 0 0 8px 0;
}
.btn-add-question[data-v-26f7424a] {
  width: 100%;
  padding: 16px;
  margin-top: 8px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  border-radius: 12px;
  background: none;
  color: var(--q-positive);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-add-question[data-v-26f7424a]:hover {
  border-color: var(--q-primary);
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 5%, var(--q-info));
}
.question-text-row[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  cursor: pointer;
  border-radius: 8px;
  border: 1px dashed transparent;
}
.question-text-row[data-v-26f7424a]:hover {
  border-color: color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
}
.question-text-preview[data-v-26f7424a] {
  flex: 1;
  font-size: 14px;
  color: var(--q-accent);
  min-height: 24px;
  opacity: 0.9;
}
.question-text-preview[data-v-26f7424a]:empty::before {
  content: attr(data-placeholder);
  opacity: 0.6;
}
.question-edit-btn[data-v-26f7424a] {
  opacity: 0.5;
}
.question-text-row:hover .question-edit-btn[data-v-26f7424a] {
  opacity: 1;
}
.question-edit-inline[data-v-26f7424a] {
  padding: 8px 0;
}
.question-rich-editor[data-v-26f7424a] .tox-tinymce {
  border-radius: 8px;
}
.question-edit-actions[data-v-26f7424a] {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.weight-sum-display[data-v-26f7424a] {
  padding: 14px 18px;
  background: color-mix(in srgb, var(--q-dark) 6%, var(--q-info));
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
}
.weight-sum-label[data-v-26f7424a] {
  font-size: 13px;
  font-weight: 600;
  color: var(--q-positive);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.weight-sum-value[data-v-26f7424a] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-primary);
}
.validation-msg[data-v-26f7424a] {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}
.validation-warning[data-v-26f7424a] {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
  border: 1px solid color-mix(in srgb, var(--q-warning) 30%, var(--q-info));
}

/* Footer */
.footer-nav[data-v-26f7424a] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding: 16px 0;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
}
.footer-nav-left[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.btn-footer-cancel[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 8px;
  background: var(--q-primary);
  color: var(--q-info);
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px color-mix(in srgb, var(--q-primary) 30%, transparent);
}
.btn-footer-cancel[data-v-26f7424a]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px color-mix(in srgb, var(--q-primary) 25%, transparent);
}
.btn-footer-back[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-radius: 8px;
  background: var(--q-info);
  color: var(--q-positive);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-footer-back[data-v-26f7424a]:hover:not(:disabled) {
  border-color: var(--q-primary);
  color: var(--q-primary);
}
.btn-footer-back[data-v-26f7424a]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-footer-next[data-v-26f7424a] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 8px;
  background: var(--q-primary);
  color: var(--q-info);
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px color-mix(in srgb, var(--q-primary) 30%, transparent);
}
.btn-footer-next[data-v-26f7424a]:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px color-mix(in srgb, var(--q-primary) 25%, transparent);
}
.btn-footer-next[data-v-26f7424a]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Toast */
.toast-notification[data-v-26f7424a] {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--q-info);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.toast-success[data-v-26f7424a] {
  background: var(--q-positive);
}
.toast-warning[data-v-26f7424a] {
  background: var(--q-warning);
}
.toast-error[data-v-26f7424a] {
  background: var(--q-negative);
}
.toast-info[data-v-26f7424a] {
  background: var(--q-primary);
}
.toast-slide-enter-active[data-v-26f7424a] {
  transition: all 0.3s ease-out;
}
.toast-slide-leave-active[data-v-26f7424a] {
  transition: all 0.25s ease-in;
}
.toast-slide-enter-from[data-v-26f7424a] {
  opacity: 0;
  transform: translateX(40px);
}
.toast-slide-leave-to[data-v-26f7424a] {
  opacity: 0;
  transform: translateX(40px);
}


.loading-state[data-v-02f1353c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
}
.create-test-quick[data-v-02f1353c] {
  max-width: 1024px;
  margin: 0 auto;
  padding-bottom: 80px;
  animation: fadeIn-02f1353c 0.5s ease-in-out;
}
@keyframes fadeIn-02f1353c {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* ─── Toast Notification ─── */
.toast-notification[data-v-02f1353c] {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--q-info);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.toast-success[data-v-02f1353c] {
  background: var(--q-positive);
}
.toast-warning[data-v-02f1353c] {
  background: var(--q-warning);
}
.toast-error[data-v-02f1353c] {
  background: var(--q-negative);
}
.toast-info[data-v-02f1353c] {
  background: var(--q-primary);
}
.toast-slide-enter-active[data-v-02f1353c] {
  transition: all 0.3s ease-out;
}
.toast-slide-leave-active[data-v-02f1353c] {
  transition: all 0.25s ease-in;
}
.toast-slide-enter-from[data-v-02f1353c] {
  opacity: 0;
  transform: translateX(40px);
}
.toast-slide-leave-to[data-v-02f1353c] {
  opacity: 0;
  transform: translateX(40px);
}


/* ─── Action Bar ─── */
.action-bar[data-v-02f1353c] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--q-info);
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  margin-bottom: 32px;
  position: sticky;
  top: 80px;
  z-index: 30;
}
@media (min-width: 640px) {
.action-bar[data-v-02f1353c] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
}
.action-bar-title[data-v-02f1353c] {
  font-size: 24px;
  font-weight: 700;
  line-height: 50px;
  color: var(--q-accent);
  margin: 0;
}
.action-bar-subtitle[data-v-02f1353c] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
}
.action-bar-buttons[data-v-02f1353c] {
  display: flex;
  gap: 12px;
}
.btn-draft[data-v-02f1353c] {
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  color: var(--q-positive);
  font-weight: 500;
}
.btn-publish[data-v-02f1353c] {
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--q-primary);
  color: var(--q-info);
  font-weight: 700;
  box-shadow: 0 4px 6px color-mix(in srgb, var(--q-primary) 20%, transparent);
}

/* ─── Form Sections ─── */
.form-sections[data-v-02f1353c] {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.form-card[data-v-02f1353c] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px 32px;
}
.title-card[data-v-02f1353c] {
  padding: 20px 24px;
}
.form-label[data-v-02f1353c] {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--q-positive);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.required[data-v-02f1353c] {
  color: var(--q-negative);
}
.title-input[data-v-02f1353c] .q-field__control {
  border-radius: 8px;
  min-height: 42px;
}
.title-input[data-v-02f1353c] .q-field__control:before {
  border-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.title-input[data-v-02f1353c] .q-field__control:hover:before {
  border-color: var(--q-primary);
}
.title-input[data-v-02f1353c] .q-field--focused .q-field__control:after {
  border-width: 2px;
}
.title-input[data-v-02f1353c] .q-field__native {
  font-size: 15px;
  font-weight: 500;
  color: var(--q-accent);
  padding: 6px 12px;
}
.title-input[data-v-02f1353c] .q-field__native::placeholder {
  color: var(--q-positive);
  font-weight: 400;
}

/* ─── Questions Builder ─── */
.questions-header[data-v-02f1353c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.questions-title[data-v-02f1353c] {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: var(--q-accent);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.questions-icon[data-v-02f1353c] {
  color: var(--q-primary);
}
.questions-count[data-v-02f1353c] {
  font-size: 14px;
  color: var(--q-positive);
}
.questions-list[data-v-02f1353c] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ─── Question Card ─── */
.question-card[data-v-02f1353c] {
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.question-header[data-v-02f1353c] {
  background: var(--q-dark);
  padding: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.question-number[data-v-02f1353c] {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
}
.question-content[data-v-02f1353c] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.question-text-input[data-v-02f1353c] {
  width: 100%;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--q-info) 12%, var(--q-dark));
  border: 1px solid color-mix(in srgb, var(--q-accent) 22%, var(--q-dark));
  border-radius: 8px;
  outline: none;
  font-weight: 500;
  font-size: 14px;
  color: var(--q-accent);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.question-text-input[data-v-02f1353c]:hover {
  border-color: color-mix(in srgb, var(--q-accent) 35%, var(--q-dark));
}
.question-text-input[data-v-02f1353c]:focus {
  border-color: var(--q-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--q-primary) 18%, transparent);
}
.question-text-input[data-v-02f1353c]::placeholder {
  color: color-mix(in srgb, var(--q-positive) 85%, var(--q-dark));
  font-weight: 400;
}
.question-text-hint[data-v-02f1353c] {
  font-size: 13px;
  color: var(--q-positive);
  font-style: italic;
}
.question-controls[data-v-02f1353c] {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.type-select[data-v-02f1353c] {
  min-width: 190px;
}
.type-select[data-v-02f1353c] .q-field__control {
  border-radius: 8px;
  min-height: 36px;
}
.type-select[data-v-02f1353c] .q-field__control:before {
  border-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.type-select[data-v-02f1353c] .q-field__control:hover:before {
  border-color: var(--q-primary);
}
.type-select[data-v-02f1353c] .q-field--focused .q-field__control:after {
  border-width: 2px;
}
.type-select[data-v-02f1353c] .q-field__native {
  font-size: 13px;
  font-weight: 500;
  color: var(--q-positive);
  padding: 4px 8px;
}
.btn-delete-question[data-v-02f1353c] {
  color: var(--q-positive);
  background: color-mix(in srgb, var(--q-negative) 6%, var(--q-dark));
  border: 1px solid color-mix(in srgb, var(--q-negative) 18%, var(--q-dark));
  border-radius: 8px;
  transition:
    color 0.2s,
    background 0.2s,
    border-color 0.2s;
}
.btn-delete-question[data-v-02f1353c]:hover {
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-negative) 22%, var(--q-dark));
  border-color: color-mix(in srgb, var(--q-negative) 40%, var(--q-dark));
}

/* ─── Answer Area ─── */
.question-answers[data-v-02f1353c] {
  padding: 16px;
}

/* ─── Options (Single/Multiple) ─── */
.options-list[data-v-02f1353c] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.option-item[data-v-02f1353c] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.option-marker[data-v-02f1353c] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  background: var(--q-info);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.option-marker.single[data-v-02f1353c] {
  border-radius: 9999px;
}
.option-marker.multiple[data-v-02f1353c] {
  border-radius: 4px;
}
.option-marker.correct[data-v-02f1353c] {
  background: var(--q-positive);
  border-color: var(--q-positive);
  color: var(--q-info);
}
.option-marker[data-v-02f1353c]:hover:not(.correct) {
  border-color: var(--q-accent);
}
.option-input[data-v-02f1353c] {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
}
.option-input[data-v-02f1353c]:focus {
  border-color: var(--q-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--q-primary) 10%, transparent);
}
.btn-remove-item[data-v-02f1353c] {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--q-accent);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.btn-remove-item[data-v-02f1353c]:hover {
  color: var(--q-negative);
  background: color-mix(in srgb, var(--q-negative) 8%, var(--q-info));
}
.btn-add-option[data-v-02f1353c] {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding-left: 32px;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}
.btn-add-option[data-v-02f1353c]:hover {
  color: var(--q-primary);
}

/* ─── Matching ─── */
.matching-header[data-v-02f1353c] {
  display: flex;
  gap: 16px;
  margin-bottom: 4px;
  padding: 0 4px;
}
.matching-header .matching-label[data-v-02f1353c]:first-child {
  flex: 1;
}
.matching-header .matching-label[data-v-02f1353c]:last-child {
  flex: 1;
}
.matching-label[data-v-02f1353c] {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--q-positive);
  font-weight: 700;
}
.pairs-list[data-v-02f1353c] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pair-item[data-v-02f1353c] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pair-input[data-v-02f1353c] {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}
.pair-input[data-v-02f1353c]:focus {
  border-color: var(--q-primary);
}

/* ─── Order ─── */
.order-hint[data-v-02f1353c] {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--q-positive);
  font-weight: 500;
  margin-bottom: 8px;
}
.order-list[data-v-02f1353c] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.order-item[data-v-02f1353c] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.order-number[data-v-02f1353c] {
  width: 24px;
  height: 24px;
  background: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
}
.order-input[data-v-02f1353c] {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}
.order-input[data-v-02f1353c]:focus {
  border-color: var(--q-primary);
}

/* ─── Open Question ─── */
.open-question[data-v-02f1353c] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reviewer-label[data-v-02f1353c] {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--q-positive);
}
.reviewer-row[data-v-02f1353c] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.reviewer-name[data-v-02f1353c] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 8px;
  font-size: 14px;
  color: var(--q-accent);
  font-weight: 500;
}
.reviewer-empty[data-v-02f1353c] {
  font-size: 14px;
  color: var(--q-positive);
}
.btn-select-reviewer[data-v-02f1353c] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
  background: var(--q-info);
  font-size: 13px;
  font-weight: 600;
  color: var(--q-positive);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-select-reviewer[data-v-02f1353c]:hover {
  border-color: var(--q-primary);
  color: var(--q-primary);
}
.open-hint[data-v-02f1353c] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  border-radius: 8px;
  font-size: 12px;
  color: var(--q-positive);
}

/* ─── Fill Question ─── */
.fill-question[data-v-02f1353c] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fill-header[data-v-02f1353c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fill-label[data-v-02f1353c] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 0;
}
.fill-hint[data-v-02f1353c] {
  font-size: 10px;
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--q-positive);
}
.fill-input-wrapper[data-v-02f1353c] {
  position: relative;
}
.fill-icon[data-v-02f1353c] {
  position: absolute;
  left: 12px;
  top: 12px;
  color: var(--q-positive);
}
.fill-textarea[data-v-02f1353c] {
  width: 100%;
  padding: 12px;
  padding-left: 40px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  resize: none;
  height: 96px;
}
.fill-textarea[data-v-02f1353c]:focus {
  border-color: var(--q-primary);
}

/* ─── Add Question Button ─── */
.btn-add-question[data-v-02f1353c] {
  width: 100%;
  padding: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  border-radius: 12px;
  background: none;
  color: var(--q-positive);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-add-question[data-v-02f1353c]:hover {
  border-color: var(--q-primary);
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 5%, var(--q-info));
}


.loading-state[data-v-b02c869a] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: var(--q-info);
  border-radius: 16px;
}
.edit-json-test[data-v-b02c869a] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Title section */
.title-section[data-v-b02c869a] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.title-icon[data-v-b02c869a] {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
  flex-shrink: 0;
}
.title-input[data-v-b02c869a] {
  flex: 1;
}

/* Rounded inputs — global for all q-input/q-select */
.edit-json-test[data-v-b02c869a] .q-field__control {
  border-radius: 10px;
  min-height: 40px;
}
.edit-json-test[data-v-b02c869a] .q-field__control:before {
  border-color: #e2e8f0;
}
.edit-json-test[data-v-b02c869a] .q-field__control:hover:before {
  border-color: var(--q-primary);
}
.edit-json-test[data-v-b02c869a] .q-field--focused .q-field__control:after {
  border-color: var(--q-primary);
  border-width: 2px;
}
.title-input[data-v-b02c869a] .q-field__control {
  font-size: 16px;
  font-weight: 500;
}

/* Questions list */
.questions-list[data-v-b02c869a] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

/* Question card */
.question-card[data-v-b02c869a] {
  background: var(--q-info);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: all 0.25s ease;
}
.question-card[data-v-b02c869a]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 35%, var(--q-info));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
  transform: translateY(-1px);
}
.question-card-header[data-v-b02c869a] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--q-primary) 3%, var(--q-dark));
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
}
.question-number-badge[data-v-b02c869a] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--q-primary) 12%, var(--q-info));
  color: var(--q-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.question-header-info[data-v-b02c869a] {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.question-header-title[data-v-b02c869a] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
}
.question-type-chip[data-v-b02c869a] {
  font-size: 11px;
  font-weight: 600;
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.question-card-actions[data-v-b02c869a] {
  display: flex;
  gap: 2px;
}
.question-card-actions .q-btn[data-v-b02c869a] {
  color: var(--q-positive);
  transition: color 0.2s;
}
.question-card-actions .q-btn[data-v-b02c869a]:hover {
  color: var(--q-accent);
}
.delete-btn[data-v-b02c869a] {
  color: var(--q-negative) !important;
}
.question-card-body[data-v-b02c869a] {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.question-text-field[data-v-b02c869a] {
  width: 100%;
}
.question-type-select[data-v-b02c869a] {
  max-width: 300px;
}

/* Responsible */
.responsible-section[data-v-b02c869a] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--q-dark);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
}
.responsible-icon[data-v-b02c869a] {
  color: var(--q-positive);
}
.responsible-name[data-v-b02c869a] {
  font-size: 14px;
  color: var(--q-accent);
  font-weight: 500;
  flex: 1;
}

/* Answers */
.answers-section[data-v-b02c869a] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 12px;
  border-left: 3px solid color-mix(in srgb, var(--q-primary) 25%, var(--q-info));
}
.answers-section-title[data-v-b02c869a] {
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.options-list[data-v-b02c869a] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.option-row[data-v-b02c869a] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--q-dark);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  transition: all 0.2s ease;
}
.option-row[data-v-b02c869a]:hover {
  background: color-mix(in srgb, var(--q-primary) 3%, var(--q-dark));
  border-color: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
}
.option-marker[data-v-b02c869a] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  min-width: 24px;
}
.drag-icon[data-v-b02c869a] {
  color: var(--q-positive);
  cursor: grab;
}
.option-input[data-v-b02c869a] {
  flex: 1;
  min-width: 0;
}
.eqw-connector[data-v-b02c869a] {
  display: flex;
  align-items: center;
  color: var(--q-positive);
  flex-shrink: 0;
}
.option-actions[data-v-b02c869a] {
  display: flex;
  gap: 1px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.option-row:hover .option-actions[data-v-b02c869a] {
  opacity: 1;
}
.option-actions .q-btn[data-v-b02c869a] {
  color: var(--q-positive);
}
.add-option-btn[data-v-b02c869a] {
  margin-top: 4px;
  align-self: flex-start;
}

/* Link button style */
.lms-link-btn[data-v-b02c869a] {
  color: var(--q-primary);
  font-weight: 600;
}

/* Add question card */
.add-question-card[data-v-b02c869a] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: color-mix(in srgb, var(--q-primary) 2%, var(--q-info));
  border-radius: 12px;
  border: 2px dashed color-mix(in srgb, var(--q-primary) 20%, var(--q-info));
  transition: all 0.2s ease;
}
.add-question-card[data-v-b02c869a]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 40%, var(--q-info));
  background: color-mix(in srgb, var(--q-primary) 5%, var(--q-info));
}
.add-question-icon[data-v-b02c869a] {
  color: var(--q-primary);
  opacity: 0.6;
  flex-shrink: 0;
}
.new-question-select[data-v-b02c869a] {
  flex: 1;
}

/* Transitions */
.question-enter-active[data-v-b02c869a] {
  transition: all 0.35s ease;
}
.question-leave-active[data-v-b02c869a] {
  transition: all 0.25s ease;
}
.question-enter-from[data-v-b02c869a] {
  opacity: 0;
  transform: translateY(-12px);
}
.question-leave-to[data-v-b02c869a] {
  opacity: 0;
  transform: translateX(-20px);
}
.option-enter-active[data-v-b02c869a] {
  transition: all 0.25s ease;
}
.option-leave-active[data-v-b02c869a] {
  transition: all 0.2s ease;
}
.option-enter-from[data-v-b02c869a] {
  opacity: 0;
  transform: translateY(-8px);
}
.option-leave-to[data-v-b02c869a] {
  opacity: 0;
  transform: translateX(-12px);
}

/* Responsive */
@media (max-width: 640px) {
.question-card-body[data-v-b02c869a] {
    padding: 12px;
    gap: 10px;
}
.option-row[data-v-b02c869a] {
    flex-wrap: wrap;
    gap: 6px;
}
.option-input[data-v-b02c869a] {
    min-width: 100px;
}
.question-type-select[data-v-b02c869a] {
    max-width: 100%;
}
.add-question-card[data-v-b02c869a] {
    flex-wrap: wrap;
    gap: 12px;
}
}


.create-test-ai-view[data-v-40ba52e8] {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 40px;
  animation: fadeIn-40ba52e8 0.5s ease-in-out;
}
@keyframes fadeIn-40ba52e8 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Loading State */
.loading-state[data-v-40ba52e8] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.loading-text[data-v-40ba52e8] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 16px 0 0 0;
}

/* Service unavailable */
.service-unavailable[data-v-40ba52e8] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  color: var(--q-positive);
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  gap: 12px;
}
.service-icon[data-v-40ba52e8] {
  width: 64px;
  height: 64px;
  background: var(--q-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
}
.service-title[data-v-40ba52e8] {
  font-size: 18px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0;
}
.service-text[data-v-40ba52e8] {
  font-size: 14px;
  margin: 0;
}

/* Top Bar */
.top-bar[data-v-40ba52e8] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.top-bar-left[data-v-40ba52e8] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ai-icon[data-v-40ba52e8] {
  width: 40px;
  height: 40px;
  background: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.top-bar-title[data-v-40ba52e8] {
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  color: var(--q-accent);
  margin: 0;
}
.top-bar-subtitle[data-v-40ba52e8] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 0;
}
.token-stats[data-v-40ba52e8] {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--q-dark);
  padding: 8px 20px;
  border-radius: 12px;
}
.token-stat[data-v-40ba52e8] {
  display: flex;
  flex-direction: column;
}
.token-label[data-v-40ba52e8] {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--q-positive);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.token-value[data-v-40ba52e8] {
  font-size: 14px;
  font-family: monospace;
  font-weight: 700;
  color: var(--q-accent);
}
.token-value.warn[data-v-40ba52e8] {
  color: var(--q-warning);
}
.token-value.accent[data-v-40ba52e8] {
  color: var(--q-primary);
}
.token-divider[data-v-40ba52e8] {
  width: 1px;
  height: 32px;
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}

/* Main Grid */
.main-grid[data-v-40ba52e8] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (min-width: 1024px) {
.main-grid[data-v-40ba52e8] {
    grid-template-columns: 2fr 1fr;
}
}

/* Wizard Card */
.wizard-card[data-v-40ba52e8] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  min-height: 500px;
  display: flex;
  flex-direction: column;
}
.wizard-content[data-v-40ba52e8] {
  padding: 24px 32px;
  flex: 1;
}
.step-header[data-v-40ba52e8] {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 8px;
}
.step-label[data-v-40ba52e8] {
  font-size: 12px;
  font-weight: 700;
  color: var(--q-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.draft-label[data-v-40ba52e8] {
  font-size: 12px;
  color: var(--q-positive);
  font-weight: 500;
}
.step-indicator[data-v-40ba52e8] {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
}
.step-bar[data-v-40ba52e8] {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  transition: all 0.5s;
}
.step-bar.completed[data-v-40ba52e8] {
  background: var(--q-primary);
}
.step-bar.active[data-v-40ba52e8] {
  background: color-mix(in srgb, var(--q-primary) 60%, var(--q-info));
}
.step-bar.pending[data-v-40ba52e8] {
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.step-content[data-v-40ba52e8] {
  animation: stepFadeIn-40ba52e8 0.3s ease;
}
@keyframes stepFadeIn-40ba52e8 {
from {
    opacity: 0;
    transform: translateX(16px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}
.step-title-block[data-v-40ba52e8] {
  margin-bottom: 24px;
}
.step-title[data-v-40ba52e8] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 4px 0;
}
.step-description[data-v-40ba52e8] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
}
.form-group[data-v-40ba52e8] {
  margin-bottom: 24px;
}
.form-label[data-v-40ba52e8] {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  margin-bottom: 8px;
}
.required[data-v-40ba52e8] {
  color: var(--q-negative);
}

/* Rounded inputs — global for all q-input/q-select */
.create-test-ai-view[data-v-40ba52e8] .q-field__control {
  border-radius: 10px;
  min-height: 40px;
}
.create-test-ai-view[data-v-40ba52e8] .q-field__control:before {
  border-color: #e2e8f0;
}
.create-test-ai-view[data-v-40ba52e8] .q-field__control:hover:before {
  border-color: var(--q-primary);
}
.create-test-ai-view[data-v-40ba52e8] .q-field--focused .q-field__control:after {
  border-color: var(--q-primary);
  border-width: 2px;
}
.title-input[data-v-40ba52e8] .q-field__control {
  font-size: 18px;
  font-weight: 500;
}

/* Source tabs */
.source-tabs[data-v-40ba52e8] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: var(--q-dark);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 16px;
}
.source-tabs .q-btn[data-v-40ba52e8] {
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  color: var(--q-positive);
}
.source-tabs .q-btn.active[data-v-40ba52e8] {
  background: var(--q-info);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  color: var(--q-primary);
}
.source-content[data-v-40ba52e8] {
  margin-top: 24px;
}
.source-label[data-v-40ba52e8] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.source-hint[data-v-40ba52e8] {
  font-size: 12px;
  color: var(--q-positive);
  margin-top: 8px;
}

/* File upload */
.hidden-file-input[data-v-40ba52e8] {
  display: none;
}
.attached-file-chip[data-v-40ba52e8] {
  margin-bottom: 12px;
}
.file-dropzone[data-v-40ba52e8] {
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  border-radius: 12px;
  height: 192px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--q-dark);
  color: var(--q-positive);
  cursor: pointer;
  transition: all 0.2s;
}
.file-dropzone[data-v-40ba52e8]:hover {
  background: color-mix(in srgb, var(--q-primary) 5%, var(--q-info));
  border-color: color-mix(in srgb, var(--q-primary) 40%, var(--q-info));
}
.dropzone-text[data-v-40ba52e8] {
  font-size: 14px;
  font-weight: 500;
  margin: 12px 0 4px 0;
}
.dropzone-hint[data-v-40ba52e8] {
  font-size: 12px;
  opacity: 0.7;
  margin: 0;
}

/* Parameters */
.params-card[data-v-40ba52e8] {
  background: var(--q-dark);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.params-row[data-v-40ba52e8] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.params-divider[data-v-40ba52e8] {
  height: 1px;
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  margin: 24px 0;
}
.param-label[data-v-40ba52e8] {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  margin-bottom: 8px;
}
.param-value[data-v-40ba52e8] {
  color: var(--q-primary);
}
.slider-hints[data-v-40ba52e8] {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--q-positive);
  margin-top: 4px;
}

/* Question types */
.question-types-grid[data-v-40ba52e8] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.question-type-card[data-v-40ba52e8] {
  position: relative;
  padding: 16px;
  border-radius: 12px;
  border: 2px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  background: var(--q-info);
  cursor: pointer;
  transition: all 0.2s;
}
.question-type-card[data-v-40ba52e8]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.question-type-card.selected[data-v-40ba52e8] {
  border-color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 5%, var(--q-info));
}
.check-mark[data-v-40ba52e8] {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--q-primary);
}
.type-icon[data-v-40ba52e8] {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  background: var(--q-dark);
  color: var(--q-positive);
  transition: all 0.2s;
}
.type-icon.selected[data-v-40ba52e8] {
  background: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  color: var(--q-primary);
}
.type-title[data-v-40ba52e8] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 4px 0;
}
.type-desc[data-v-40ba52e8] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 0;
  line-height: 1.4;
}

/* Summary */
.summary-card[data-v-40ba52e8] {
  background: color-mix(in srgb, var(--q-primary) 5%, var(--q-info));
  border-radius: 16px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--q-primary) 20%, var(--q-info));
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}
.summary-icon[data-v-40ba52e8] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--q-info);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}
.summary-content[data-v-40ba52e8] {
  font-size: 14px;
  color: var(--q-accent);
}
.summary-title[data-v-40ba52e8] {
  font-weight: 700;
  margin: 0 0 8px 0;
}
.summary-list[data-v-40ba52e8] {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  color: var(--q-positive);
}
.summary-list li[data-v-40ba52e8] {
  margin-bottom: 4px;
}
.prompt-section[data-v-40ba52e8] {
  margin-top: 16px;
}
.prompt-label[data-v-40ba52e8] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
  text-transform: uppercase;
  margin-bottom: 8px;
  margin-left: 4px;
}

/* Publish card */
.publish-card[data-v-40ba52e8] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--q-dark);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  margin-top: 24px;
}
.publish-card-content[data-v-40ba52e8] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.publish-icon-box[data-v-40ba52e8] {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  color: var(--q-positive);
  transition: all 0.3s;
  flex-shrink: 0;
}
.publish-icon-box.publish-active[data-v-40ba52e8] {
  background: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  color: var(--q-primary);
}
.publish-title[data-v-40ba52e8] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
}
.publish-desc[data-v-40ba52e8] {
  font-size: 12px;
  color: var(--q-positive);
}

/* Wizard footer */
.wizard-footer[data-v-40ba52e8] {
  padding: 24px;
  background: var(--q-info);
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

/* Editor View */
.editor-view[data-v-40ba52e8] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.editor-header[data-v-40ba52e8] {
  padding: 20px 24px;
  background: var(--q-dark);
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.editor-header-left[data-v-40ba52e8] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.success-icon[data-v-40ba52e8] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-secondary);
}
.editor-title[data-v-40ba52e8] {
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  color: var(--q-accent);
  margin: 0;
}
.editor-subtitle[data-v-40ba52e8] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 0;
}
.editor-actions[data-v-40ba52e8] {
  display: flex;
  gap: 8px;
}
.editor-actions .q-btn[data-v-40ba52e8] {
  color: var(--q-positive);
}
.editor-content[data-v-40ba52e8] {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
}
.editor-bottom[data-v-40ba52e8] {
  padding: 16px 24px;
  background: var(--q-info);
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.publish-toggle-inline[data-v-40ba52e8] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.publish-toggle-label[data-v-40ba52e8] {
  font-size: 13px;
  color: var(--q-positive);
  font-weight: 600;
}

/* AI Context Column */
.ai-context-column[data-v-40ba52e8] {
  display: block;
}
@media (min-width: 1024px) {
.ai-context-column[data-v-40ba52e8] {
    position: sticky;
    top: 24px;
}
}
.ai-context-card[data-v-40ba52e8] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 20px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
}
.ai-context-title[data-v-40ba52e8] {
  font-size: 16px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.context-icon[data-v-40ba52e8] {
  color: var(--q-primary);
}
.chat-messages[data-v-40ba52e8] {
  flex: 1;
  background: var(--q-dark);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
}
.chat-message[data-v-40ba52e8] {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.chat-message.user-message[data-v-40ba52e8] {
  flex-direction: row-reverse;
}
.chat-avatar[data-v-40ba52e8] {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
  flex-shrink: 0;
  margin-top: 4px;
}
.chat-avatar.user-avatar[data-v-40ba52e8] {
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  color: var(--q-accent);
}
.chat-bubble[data-v-40ba52e8] {
  background: var(--q-info);
  padding: 10px 14px;
  border-radius: 2px 12px 12px 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  font-size: 13px;
  color: var(--q-accent);
  max-width: 85%;
}
.chat-bubble.user-bubble[data-v-40ba52e8] {
  border-radius: 12px 2px 12px 12px;
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
}
.chat-bubble p[data-v-40ba52e8] {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-attachments[data-v-40ba52e8] {
  margin-top: 6px;
}

/* Refinement */
.refinement-section[data-v-40ba52e8] {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.refinement-label[data-v-40ba52e8] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--q-primary);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.refinement-input-row[data-v-40ba52e8] {
  display: flex;
  gap: 8px;
  align-items: center;
}
.refinement-input[data-v-40ba52e8] {
  flex: 1;
}

/* Overlay loading */
.overlay-loading[data-v-40ba52e8] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

/* Buttons */
.lms-primary-btn[data-v-40ba52e8] {
  background-color: var(--q-primary);
  color: var(--q-info);
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.2s;
}
.lms-primary-btn[data-v-40ba52e8]:hover {
  background-color: color-mix(in srgb, var(--q-primary) 85%, black);
  transform: translateY(-1px);
}
.lms-cancel-btn[data-v-40ba52e8] {
  color: var(--q-positive);
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.2s;
}
.lms-cancel-btn[data-v-40ba52e8]:hover {
  background-color: var(--q-dark);
  color: var(--q-accent);
}
@media (max-width: 768px) {
.params-row[data-v-40ba52e8] {
    grid-template-columns: 1fr;
}
.question-types-grid[data-v-40ba52e8] {
    grid-template-columns: 1fr;
}
.top-bar[data-v-40ba52e8] {
    padding: 16px;
}
.wizard-content[data-v-40ba52e8] {
    padding: 16px;
}
}


.import-test-view[data-v-71f1a414] {
  max-width: 780px;
  margin: 0 auto;
  padding-bottom: 100px;
  animation: fadeIn-71f1a414 0.5s ease-in-out;
}
@keyframes fadeIn-71f1a414 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Loading State */
.loading-state[data-v-71f1a414] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.loader[data-v-71f1a414] {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-71f1a414 0.8s linear infinite;
}
@keyframes spin-71f1a414 {
to {
    transform: rotate(360deg);
}
}

/* Page Header */
.page-header[data-v-71f1a414] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 24px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
.page-header[data-v-71f1a414] {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
}
.page-title[data-v-71f1a414] {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  color: var(--q-accent);
  margin: 0;
}
.page-subtitle[data-v-71f1a414] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.template-link[data-v-71f1a414] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}
.template-link[data-v-71f1a414]:hover {
  background: color-mix(in srgb, var(--q-primary) 18%, var(--q-info));
}

/* Card */
.card[data-v-71f1a414] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 32px;
}

/* Dropzone */
.dropzone[data-v-71f1a414] {
  position: relative;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  border-radius: 16px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.dropzone[data-v-71f1a414]:hover {
  border-color: var(--q-primary);
  background: color-mix(in srgb, var(--q-accent) 3%, var(--q-info));
}
.dropzone.active[data-v-71f1a414] {
  border-color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 5%, var(--q-info));
}
.hidden-input[data-v-71f1a414] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.dropzone-icon[data-v-71f1a414] {
  width: 64px;
  height: 64px;
  background: var(--q-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--q-accent) 30%, var(--q-info));
  margin-bottom: 16px;
  pointer-events: none;
}
.dropzone-title[data-v-71f1a414] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 8px 0;
  pointer-events: none;
}
.dropzone-text[data-v-71f1a414] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0 0 24px 0;
  pointer-events: none;
}
.file-types[data-v-71f1a414] {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12px;
  color: color-mix(in srgb, var(--q-accent) 30%, var(--q-info));
  pointer-events: none;
}
.file-types span[data-v-71f1a414] {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* File Preview */
.file-preview[data-v-71f1a414] {
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  padding: 24px;
  background: var(--q-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.file-info[data-v-71f1a414] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.file-icon[data-v-71f1a414] {
  width: 48px;
  height: 48px;
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
}
.file-name[data-v-71f1a414] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.file-size[data-v-71f1a414] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 0;
}
.icon-btn-remove[data-v-71f1a414] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
  transition: all 0.2s;
}
.icon-btn-remove[data-v-71f1a414]:hover {
  background: color-mix(in srgb, var(--q-warning) 10%, var(--q-info));
  color: var(--q-warning);
}

/* Success Badge */
.success-badge[data-v-71f1a414] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--q-secondary);
  background: color-mix(in srgb, var(--q-secondary) 10%, var(--q-info));
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--q-secondary) 25%, var(--q-info));
}

/* Upload Overlay */
.upload-overlay[data-v-71f1a414] {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--q-info) 85%, transparent);
  backdrop-filter: blur(4px);
  border-radius: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-overlay-content[data-v-71f1a414] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.upload-overlay-text[data-v-71f1a414] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0;
}

/* Success Section */
.success-section[data-v-71f1a414] {
  margin-top: 20px;
  padding: 20px;
  background: color-mix(in srgb, var(--q-secondary) 6%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-secondary) 20%, var(--q-info));
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.success-icon-box[data-v-71f1a414] {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--q-secondary) 12%, var(--q-info));
  color: var(--q-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.success-content[data-v-71f1a414] {
  flex: 1;
  min-width: 150px;
}
.success-title[data-v-71f1a414] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.success-text[data-v-71f1a414] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.success-actions[data-v-71f1a414] {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.go-to-catalog-btn[data-v-71f1a414] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--q-primary);
  color: var(--q-info);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.go-to-catalog-btn[data-v-71f1a414]:hover {
  background: color-mix(in srgb, var(--q-primary) 85%, black);
  transform: translateY(-1px);
}
.upload-another-btn[data-v-71f1a414] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  border-radius: 8px;
  background: var(--q-info);
  color: var(--q-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.upload-another-btn[data-v-71f1a414]:hover {
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
  border-color: color-mix(in srgb, var(--q-primary) 50%, var(--q-info));
}

/* Error */
.error-section[data-v-71f1a414] {
  margin-top: 16px;
  padding: 12px;
  background: color-mix(in srgb, var(--q-warning) 8%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-warning) 25%, var(--q-info));
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--q-warning);
}
.error-title[data-v-71f1a414] {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}
.error-text[data-v-71f1a414] {
  font-size: 12px;
  opacity: 0.8;
  margin: 0;
}

/* Publish Card */
.publish-card[data-v-71f1a414] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  background: var(--q-dark);
  cursor: pointer;
  transition: all 0.2s;
}
.publish-card[data-v-71f1a414]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
}
.publish-card.active[data-v-71f1a414] {
  border-color: color-mix(in srgb, var(--q-primary) 40%, var(--q-info));
  background: color-mix(in srgb, var(--q-primary) 4%, var(--q-info));
}
.publish-card-left[data-v-71f1a414] {
  display: flex;
  align-items: center;
  gap: 14px;
}
.publish-icon-box[data-v-71f1a414] {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  color: var(--q-positive);
  transition: all 0.2s;
}
.publish-icon-box.active[data-v-71f1a414] {
  background: color-mix(in srgb, var(--q-primary) 12%, var(--q-info));
  color: var(--q-primary);
}
.publish-title[data-v-71f1a414] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0;
  line-height: 1.3;
}
.publish-desc[data-v-71f1a414] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
  line-height: 1.3;
}

/* Actions */
.actions[data-v-71f1a414] {
  padding-top: 24px;
  border-top: 1px solid var(--q-dark);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Button styles (consistent with ConfirmDialog and other components) */
.lms-primary-btn[data-v-71f1a414] {
  background-color: var(--q-primary);
  color: var(--q-info);
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.2s;
}
.lms-primary-btn[data-v-71f1a414]:hover {
  background-color: color-mix(in srgb, var(--q-primary) 85%, black);
  transform: translateY(-1px);
}
.lms-cancel-btn[data-v-71f1a414] {
  color: var(--q-positive);
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.2s;
}
.lms-cancel-btn[data-v-71f1a414]:hover {
  background-color: var(--q-dark);
  color: var(--q-accent);
}

/* Alert Dialog */
.alert-card[data-v-71f1a414] {
  min-width: 400px;
  max-width: 500px;
  border-radius: 1rem;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.alert-title[data-v-71f1a414] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
}
.alert-message[data-v-71f1a414] {
  font-size: 14px;
  color: var(--q-positive);
}
@media (max-width: 600px) {
.alert-card[data-v-71f1a414] {
    min-width: 90vw;
}
}


.styled-select[data-v-660eda36] {
  background: var(--q-negative, #ffffff);
  border-radius: 10px;
}
.styled-select[data-v-660eda36] .q-field__control {
  border-radius: 10px;
  height: 44px;
  min-height: 44px;
}
.styled-select[data-v-660eda36] .q-field__control:before {
  border-color: #e2e8f0;
}
.styled-select[data-v-660eda36] .q-field__control:hover:before {
  border-color: var(--q-primary);
}
.styled-select[data-v-660eda36] .q-field--focused .q-field__control:after {
  border-color: var(--q-primary);
  border-width: 2px;
}
.styled-select[data-v-660eda36] .q-field__native {
  color: #1e293b;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.styled-select[data-v-660eda36] .q-field__native::placeholder {
  color: #94a3b8;
  font-weight: 400;
}
.styled-select[data-v-660eda36] .q-field__marginal {
  height: 44px;
}
.styled-select[data-v-660eda36] .q-field__control-container {
  padding-top: 0 !important;
}
.styled-select-pt[data-v-660eda36] .q-field__control-container {
  padding-top: 10px !important;
}
.select-icon[data-v-660eda36] {
  color: #94a3b8;
  transition: color 0.2s;
}
.styled-select:hover .select-icon[data-v-660eda36] {
  color: #64748b;
}
.styled-select[data-v-660eda36] .q-field--focused .select-icon {
  color: var(--q-primary);
}


/* Global styles for select popup */
.styled-select-popup {
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid #e2e8f0;
  max-height: 400px;
  overflow-y: auto;
}
.styled-select-popup .q-item {
  padding: 12px 16px;
  min-height: 44px;
  transition: all 0.15s;
}
.styled-select-popup .q-item:hover {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.05);
}
.styled-select-popup .q-item--active,
.styled-select-popup .q-item.q-manual-focusable--focused {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
  color: var(--q-primary);
}
.styled-select-popup .q-item__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.select-option {
  border-bottom: 1px solid #f1f5f9;
}
.select-option:last-child {
  border-bottom: none;
}


/* Modern Notifications Container */
.notifications-container[data-v-23d8f0ba] {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

/* Notification Card */
.notification[data-v-23d8f0ba] {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--q-info);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  min-width: 360px;
  max-width: 420px;
  pointer-events: auto;
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.notification-content[data-v-23d8f0ba] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px 16px;
}

/* Icon Wrapper with Background */
.notification-icon-wrapper[data-v-23d8f0ba] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}
.notification-positive .notification-icon-wrapper[data-v-23d8f0ba] {
  background: rgba(var(--q-success-rgb, 34, 197, 94), 0.1);
}
.notification-positive .notification-icon[data-v-23d8f0ba] {
  color: var(--q-success);
}
.notification-secondary .notification-icon-wrapper[data-v-23d8f0ba] {
  background: rgba(var(--q-secondary-rgb, 20, 184, 166), 0.1);
}
.notification-secondary .notification-icon[data-v-23d8f0ba] {
  color: var(--q-secondary);
}
.notification-negative .notification-icon-wrapper[data-v-23d8f0ba] {
  background: rgba(239, 68, 68, 0.1);
}
.notification-negative .notification-icon[data-v-23d8f0ba] {
  color: #dc2626;
}
.notification-warning .notification-icon-wrapper[data-v-23d8f0ba] {
  background: rgba(var(--q-warning-rgb, 245, 158, 11), 0.1);
}
.notification-warning .notification-icon[data-v-23d8f0ba] {
  color: var(--q-warning);
}
.notification-info .notification-icon-wrapper[data-v-23d8f0ba] {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
}
.notification-info .notification-icon[data-v-23d8f0ba] {
  color: var(--q-primary);
}

/* Message Text */
.notification-message[data-v-23d8f0ba] {
  flex: 1;
  font-size: 14px;
  color: var(--q-accent);
  line-height: 1.5;
  font-weight: 500;
}

/* Close Button */
.notification-close[data-v-23d8f0ba] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--q-positive);
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.notification-close[data-v-23d8f0ba]:hover {
  background: #f1f5f9;
  color: #334155;
}
.notification-close[data-v-23d8f0ba]:active {
  transform: scale(0.95);
}

/* Progress Bar */
.notification-progress[data-v-23d8f0ba] {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: left;
  animation: progress-shrink-23d8f0ba linear forwards;
}
.notification-positive .notification-progress[data-v-23d8f0ba] {
  background: var(--q-success);
}
.notification-secondary .notification-progress[data-v-23d8f0ba] {
  background: var(--q-secondary);
}
.notification-negative .notification-progress[data-v-23d8f0ba] {
  background: linear-gradient(90deg, #dc2626, #ef4444);
}
.notification-warning .notification-progress[data-v-23d8f0ba] {
  background: var(--q-warning);
}
.notification-info .notification-progress[data-v-23d8f0ba] {
  background: var(--q-primary);
}
@keyframes progress-shrink-23d8f0ba {
from {
    transform: scaleX(1);
}
to {
    transform: scaleX(0);
}
}

/* Notification Animations */
.notification-enter-active[data-v-23d8f0ba] {
  animation: notification-bounce-in-23d8f0ba 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.notification-leave-active[data-v-23d8f0ba] {
  animation: notification-slide-out-23d8f0ba 0.3s ease-in;
}
@keyframes notification-bounce-in-23d8f0ba {
0% {
    transform: translateX(400px) scale(0.9);
    opacity: 0;
}
50% {
    transform: translateX(-10px) scale(1.02);
}
100% {
    transform: translateX(0) scale(1);
    opacity: 1;
}
}
@keyframes notification-slide-out-23d8f0ba {
from {
    transform: translateX(0) scale(1);
    opacity: 1;
}
to {
    transform: translateX(400px) scale(0.9);
    opacity: 0;
}
}

/* Responsive */
@media (max-width: 768px) {
.notifications-container[data-v-23d8f0ba] {
    top: 16px;
    right: 16px;
    left: 16px;
}
.notification[data-v-23d8f0ba] {
    min-width: auto;
    max-width: none;
}
}


/* Wrapper */
.dtp-wrapper[data-v-93309af6] {
  width: 100%;
}

/* Label */
.dtp-label[data-v-93309af6] {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
  line-height: 1.4;
}
.dtp-required[data-v-93309af6] {
  color: #ef4444;
}

/* Input overrides */
.dtp-input[data-v-93309af6] .q-field__control {
  border-radius: 12px;
}
.dtp-input[data-v-93309af6] .q-field__control:before {
  border-color: #e2e8f0;
}
.dtp-input[data-v-93309af6] .q-field__control:after {
  border-radius: 12px;
}
.dtp-input[data-v-93309af6] .q-field__native {
  padding: 10px 12px;
  font-size: 14px;
  color: #1e293b;
}
.dtp-input[data-v-93309af6] .q-field__native::placeholder {
  color: #94a3b8;
}

/* Date & Time Picker Styles */
.dtp-date-popup[data-v-93309af6] .q-date,
.dtp-time-popup[data-v-93309af6] .q-time {
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.dtp-date-picker[data-v-93309af6] .q-date__header,
.dtp-time-picker[data-v-93309af6] .q-time__header {
  background: var(--q-primary);
  color: white;
  padding: 16px;
  border-radius: 16px 16px 0 0;
}
.dtp-date-picker[data-v-93309af6] .q-date__view,
.dtp-time-picker[data-v-93309af6] .q-time__clock {
  padding: 16px;
}
.dtp-date-picker[data-v-93309af6] .q-btn.q-date__calendar-item--in .q-btn__content {
  font-weight: 600;
}
.dtp-date-picker[data-v-93309af6] .q-date__calendar-item--fill {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
  color: var(--q-primary);
  border-radius: 8px;
}
.dtp-date-picker[data-v-93309af6] .q-date__calendar-item--fill:hover {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.2);
}

/* Quick action buttons */
.dtp-date-actions[data-v-93309af6] {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-wrap: wrap;
}
.dtp-date-quick-btn[data-v-93309af6] {
  flex: 1;
  min-width: 80px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  background: white;
  border: 1px solid #e2e8f0;
  transition: all 0.2s;
  line-height: 1.4;
}
.dtp-date-quick-btn[data-v-93309af6]:hover {
  background: var(--q-primary);
  color: white;
  border-color: var(--q-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(var(--q-primary-rgb, 225, 29, 72), 0.2);
}


/* Loading */
.cev-loading-state[data-v-5a2a3baa] {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

/* Page Background */
.cev-page[data-v-5a2a3baa] {
  min-height: 100vh;
  background: #f8fafc;
  padding: 24px;
}

/* Container */
.cev-container[data-v-5a2a3baa] {
  max-width: 960px;
  margin: 0 auto;
  animation: cevFadeIn-5a2a3baa 0.4s ease;
}
@keyframes cevFadeIn-5a2a3baa {
from { opacity: 0; transform: translateY(12px);
}
to { opacity: 1; transform: translateY(0);
}
}

/* Header */
.cev-header[data-v-5a2a3baa] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  background: #ffffff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.cev-header-left[data-v-5a2a3baa] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cev-title[data-v-5a2a3baa] {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}
.cev-subtitle[data-v-5a2a3baa] {
  font-size: 13px;
  color: #64748b;
  margin: 2px 0 0 0;
  line-height: 1.4;
}

/* Tabs */
.cev-tabs[data-v-5a2a3baa] {
  display: flex;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 4px;
}
.cev-tab-btn[data-v-5a2a3baa] {
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.cev-tab-btn[data-v-5a2a3baa]:hover {
  color: #334155;
}
.cev-tab-btn.active[data-v-5a2a3baa] {
  background: white;
  color: var(--q-primary);
  box-shadow: 0 2px 8px rgba(var(--q-primary-rgb, 225, 29, 72), 0.15);
  border: 2px solid rgba(var(--q-primary-rgb, 225, 29, 72), 0.6);
}
.cev-tab-badge[data-v-5a2a3baa] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--q-primary);
  color: white;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* Step Content */
.cev-step-content[data-v-5a2a3baa] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Card */
.cev-card[data-v-5a2a3baa] {
  background: var(--q-info, white);
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 24px;
}
.cev-card-title[data-v-5a2a3baa] {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
}
.cev-rose-icon[data-v-5a2a3baa] {
  color: var(--q-primary);
}
.cev-gray-icon[data-v-5a2a3baa] {
  color: #64748b;
}

/* Form elements */
.cev-form-group[data-v-5a2a3baa] {
  margin-bottom: 16px;
}
.cev-form-label[data-v-5a2a3baa] {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
  line-height: 1.4;
}
.cev-form-label-sm[data-v-5a2a3baa] {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 6px;
  line-height: 1.4;
}
.cev-required[data-v-5a2a3baa] {
  color: #ef4444;
}
.cev-form-row[data-v-5a2a3baa] {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.cev-date-error[data-v-5a2a3baa] {
  margin-top: -8px;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border-left: 3px solid #ef4444;
  border-radius: 6px;
  color: #dc2626;
  font-size: 13px;
  line-height: 1.4;
}
.cev-flex-1[data-v-5a2a3baa] {
  flex: 1;
  min-width: 0;
}
@media (max-width: 640px) {
.cev-form-row[data-v-5a2a3baa] {
    flex-direction: column;
}
}

/* Type Toggle */
.cev-type-toggle[data-v-5a2a3baa] {
  display: flex;
  background: #f8fafc;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}
.cev-toggle-btn[data-v-5a2a3baa] {
  flex: 1;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  border: 2px solid transparent;
  background: none;
  color: #94a3b8;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.cev-toggle-btn.active[data-type="internal"][data-v-5a2a3baa] {
  background: white;
  color: var(--q-primary);
  box-shadow: 0 2px 8px rgba(var(--q-primary-rgb, 225, 29, 72), 0.15);
  border: 2px solid rgba(var(--q-primary-rgb, 225, 29, 72), 0.6);
}
.cev-toggle-btn.active[data-type="external"][data-v-5a2a3baa] {
  background: white;
  color: #ea580c;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.15);
  border: 2px solid rgba(234, 88, 12, 0.6);
}

/* Color Picker */
.cev-color-picker[data-v-5a2a3baa] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cev-color-input[data-v-5a2a3baa] {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid #e2e8f0;
  padding: 2px;
}
.cev-color-value[data-v-5a2a3baa] {
  font-size: 13px;
  font-family: monospace;
  color: #64748b;
  background: #f8fafc;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1.4;
}

/* Chips Container */
.cev-chips-container[data-v-5a2a3baa] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cev-loading-hint[data-v-5a2a3baa] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}
.cev-chip[data-v-5a2a3baa] {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #e2e8f0;
  background: white;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.cev-chip[data-v-5a2a3baa]:hover {
  border-color: var(--q-secondary);
}
.cev-chip.selected[data-v-5a2a3baa] {
  background: var(--q-secondary);
  color: white;
  border-color: var(--q-secondary);
}

/* Toggle Setting */
.cev-toggle-setting[data-v-5a2a3baa] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  margin-bottom: 12px;
  cursor: pointer;
}
.cev-toggle-label[data-v-5a2a3baa] {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
}

/* Custom Toggle - exact CreateMaterialView match */
.cev-toggle[data-v-5a2a3baa] {
  position: relative;
  width: 40px;
  height: 20px;
  background: #cbd5e1;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.2s;
  flex-shrink: 0;
}
.cev-toggle.active[data-v-5a2a3baa] {
  background: var(--q-primary);
}
.cev-toggle-knob[data-v-5a2a3baa] {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 9999px;
  transition: transform 0.2s;
}
.cev-toggle.active .cev-toggle-knob[data-v-5a2a3baa] {
  transform: translateX(20px);
}
.cev-invite-text[data-v-5a2a3baa] {
  animation: cevFadeIn-5a2a3baa 0.3s ease;
}
.cev-limit-hint[data-v-5a2a3baa] {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
  line-height: 1.4;
}

/* Footer */
.cev-footer[data-v-5a2a3baa] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  margin-top: 8px;
  border-top: 1px solid #e2e8f0;
}
.cev-footer-left[data-v-5a2a3baa],
.cev-footer-right[data-v-5a2a3baa] {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Footer Buttons - match CreateMaterialView */
.cev-btn-clear[data-v-5a2a3baa] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.cev-btn-clear[data-v-5a2a3baa]:hover {
  background: #f1f5f9;
  color: #334155;
}
.cev-btn-clear[data-v-5a2a3baa]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.cev-btn-save[data-v-5a2a3baa] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: var(--q-info);
  color: #334155;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.cev-btn-save[data-v-5a2a3baa]:hover {
  background: #f8fafc;
}
.cev-btn-save[data-v-5a2a3baa]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.cev-btn-publish[data-v-5a2a3baa] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border-radius: 12px;
  border: none;
  background: var(--q-primary);
  color: white;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
  line-height: 1.4;
}
.cev-btn-publish[data-v-5a2a3baa]:hover {
  background: #be123c;
  box-shadow: 0 6px 20px rgba(var(--q-primary-rgb, 225, 29, 72), 0.4);
}
.cev-btn-publish[data-v-5a2a3baa]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Bids Section */
.cev-bids-section[data-v-5a2a3baa] {
  margin-top: 8px;
}
.cev-bids-header[data-v-5a2a3baa] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.cev-bids-header-actions[data-v-5a2a3baa] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cev-bids-count[data-v-5a2a3baa] {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  line-height: 1.4;
}
.cev-bids-loading[data-v-5a2a3baa] {
  display: flex;
  justify-content: center;
  padding: 32px;
}
.cev-bids-empty[data-v-5a2a3baa] {
  text-align: center;
  padding: 40px 20px;
  color: #94a3b8;
}
.cev-bids-empty p[data-v-5a2a3baa] {
  margin: 12px 0 0 0;
  font-size: 14px;
  line-height: 1.4;
}
.cev-bids-list[data-v-5a2a3baa] {
  display: flex;
  flex-direction: column;
}
.cev-bid-item[data-v-5a2a3baa] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid #f1f5f9;
  gap: 16px;
}
.cev-bid-item[data-v-5a2a3baa]:last-child {
  border-bottom: none;
}
.cev-bid-info[data-v-5a2a3baa] {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}
.cev-bid-avatar[data-v-5a2a3baa] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #64748b;
  flex-shrink: 0;
  line-height: 1;
}
.cev-bid-details[data-v-5a2a3baa] {
  flex: 1;
  min-width: 0;
}
.cev-bid-name[data-v-5a2a3baa] {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}
.cev-bid-position[data-v-5a2a3baa] {
  font-size: 12px;
  color: #64748b;
  margin: 2px 0 0 0;
  line-height: 1.4;
}
.cev-bid-comment[data-v-5a2a3baa] {
  font-size: 13px;
  color: #475569;
  font-style: italic;
  margin: 6px 0 0 0;
  line-height: 1.4;
}
.cev-bid-date[data-v-5a2a3baa] {
  font-size: 12px;
  color: #94a3b8;
  margin: 4px 0 0 0;
  line-height: 1.4;
}
.cev-bid-actions[data-v-5a2a3baa] {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.cev-btn-reject[data-v-5a2a3baa] {
  color: #64748b !important;
  border: 1px solid #e2e8f0;
  font-size: 14px;
  font-weight: 500;
  border-radius: 12px;
  line-height: 1.4;
}
.cev-btn-reject[data-v-5a2a3baa]:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.cev-btn-approve[data-v-5a2a3baa] {
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  line-height: 1.4;
}
.cev-btn-approve-all[data-v-5a2a3baa] {
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  line-height: 1.4;
}
.cev-bid-status-badge[data-v-5a2a3baa] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  line-height: 1.4;
}
.cev-bid-status-badge.approved[data-v-5a2a3baa] {
  background: rgba(var(--q-success-rgb, 34, 197, 94), 0.1);
  color: var(--q-success);
}
.cev-bid-status-badge.rejected[data-v-5a2a3baa] {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

/* Reject Modal — в стилистике cev-card и кнопок страницы */
.cev-reject-dialog[data-v-5a2a3baa] .q-dialog__backdrop {
  background: rgba(15, 23, 42, 0.4);
}
.cev-reject-modal[data-v-5a2a3baa] {
  width: 100%;
  max-width: 440px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.cev-reject-modal-body[data-v-5a2a3baa] {
  padding: 24px 24px 8px;
}
.cev-modal-title[data-v-5a2a3baa] {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px 0;
  line-height: 1.3;
}
.cev-modal-text[data-v-5a2a3baa] {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 16px 0;
  line-height: 1.4;
}
.cev-reject-textarea[data-v-5a2a3baa] .q-field__control {
  border-radius: 12px;
}
.cev-reject-textarea[data-v-5a2a3baa] .q-field__control:before {
  border-color: #e2e8f0;
}
.cev-reject-textarea[data-v-5a2a3baa] .q-field__control:after {
  border-radius: 12px;
}
.cev-reject-textarea[data-v-5a2a3baa] .q-field__native {
  padding: 10px 12px;
  font-size: 14px;
  color: #1e293b;
  min-height: 72px;
}
.cev-reject-textarea[data-v-5a2a3baa] .q-field__native::placeholder {
  color: #94a3b8;
}
.cev-reject-modal-actions[data-v-5a2a3baa] {
  padding: 16px 24px 24px;
  gap: 12px;
  border-top: 1px solid #f1f5f9;
}
.cev-reject-btn-cancel[data-v-5a2a3baa] {
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: var(--q-info);
  color: #334155;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.cev-reject-btn-cancel[data-v-5a2a3baa]:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.cev-reject-btn-confirm[data-v-5a2a3baa] {
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  background: var(--q-primary);
  color: var(--q-info);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
  line-height: 1.4;
}
.cev-reject-btn-confirm[data-v-5a2a3baa]:hover {
  filter: brightness(0.92);
  box-shadow: 0 4px 12px rgba(var(--q-primary-rgb, 225, 29, 72), 0.4);
}

/* Capacity Bar */
.cev-capacity-bar[data-v-5a2a3baa] {
  margin-top: 16px;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  animation: cevFadeIn-5a2a3baa 0.3s ease;
}
.cev-capacity-info[data-v-5a2a3baa] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.cev-capacity-label[data-v-5a2a3baa] {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  line-height: 1.4;
}
.cev-capacity-percent[data-v-5a2a3baa] {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.cev-capacity-percent.cev-capacity-ok[data-v-5a2a3baa] {
  color: var(--q-secondary);
}
.cev-capacity-percent.cev-capacity-high[data-v-5a2a3baa] {
  color: var(--q-warning);
}
.cev-capacity-percent.cev-capacity-full[data-v-5a2a3baa] {
  color: var(--q-primary);
}
.cev-progress[data-v-5a2a3baa] {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}
.cev-progress-fill[data-v-5a2a3baa] {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease, background 0.3s ease;
}
.cev-progress-fill.cev-capacity-ok[data-v-5a2a3baa] {
  background: var(--q-secondary);
}
.cev-progress-fill.cev-capacity-high[data-v-5a2a3baa] {
  background: var(--q-warning);
}
.cev-progress-fill.cev-capacity-full[data-v-5a2a3baa] {
  background: var(--q-primary);
}

/* Color Presets */
.cev-color-presets[data-v-5a2a3baa] {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.cev-color-preset[data-v-5a2a3baa] {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
  position: relative;
}
.cev-color-preset[data-v-5a2a3baa]:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.cev-color-preset.active[data-v-5a2a3baa] {
  border-color: #0f172a;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0f172a;
}
.cev-color-preset.active[data-v-5a2a3baa]::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  line-height: 1;
}

/* Input overrides - match CreateMaterialView exactly */
.cev-input[data-v-5a2a3baa] .q-field__control {
  border-radius: 12px;
}
.cev-input[data-v-5a2a3baa] .q-field__control:before {
  border-color: #e2e8f0;
}
.cev-input[data-v-5a2a3baa] .q-field__control:after {
  border-radius: 12px;
}
.cev-input[data-v-5a2a3baa] .q-field--error .q-field__control:before {
  border-color: var(--q-negative);
}
.cev-input[data-v-5a2a3baa] .q-field__native {
  padding: 10px 12px;
  font-size: 14px;
  color: #1e293b;
}
.cev-input[data-v-5a2a3baa] .q-field__native::placeholder {
  color: #94a3b8;
}
.cev-textarea[data-v-5a2a3baa] .q-field__control {
  border-radius: 12px;
}
.cev-textarea[data-v-5a2a3baa] .q-field__control:before {
  border-color: #e2e8f0;
}
.cev-textarea[data-v-5a2a3baa] .q-field__control:after {
  border-radius: 12px;
}
.cev-textarea[data-v-5a2a3baa] .q-field--error .q-field__control:before {
  border-color: var(--q-negative);
}
.cev-textarea[data-v-5a2a3baa] .q-field__native {
  padding: 10px 12px;
  font-size: 14px;
  color: #1e293b;
  min-height: 60px;
}
.cev-textarea[data-v-5a2a3baa] .q-field__native::placeholder {
  color: #94a3b8;
}
.cev-styled-select[data-v-5a2a3baa] .q-field__control {
  border-radius: 12px;
}
.cev-styled-select[data-v-5a2a3baa] .q-field__control:before {
  border-color: #e2e8f0;
}
.cev-styled-select[data-v-5a2a3baa] .q-field__control:after {
  border-radius: 12px;
}
.cev-styled-select[data-v-5a2a3baa] .q-field--error .q-field__control:before {
  border-color: var(--q-negative);
}
.cev-styled-select[data-v-5a2a3baa] .q-field__native {
  padding: 10px 12px;
  font-size: 14px;
  color: #1e293b;
}
.cev-select-icon[data-v-5a2a3baa] {
  color: #94a3b8;
}

/* Mobile */
@media (max-width: 640px) {
.cev-header[data-v-5a2a3baa] {
    flex-direction: column;
    align-items: flex-start;
}
.cev-bid-item[data-v-5a2a3baa] {
    flex-direction: column;
    align-items: flex-start;
}
.cev-bid-actions[data-v-5a2a3baa] {
    align-self: flex-end;
}
.cev-footer[data-v-5a2a3baa] {
    flex-direction: column;
    gap: 12px;
}
.cev-footer-right[data-v-5a2a3baa] {
    width: 100%;
    justify-content: flex-end;
}
}


.cpev-loading[data-v-ee7f818c] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}
.cpev-container[data-v-ee7f818c] {
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 100px;
  animation: cpevFadeIn-ee7f818c 0.5s ease-in-out;
}
@keyframes cpevFadeIn-ee7f818c {
from { opacity: 0; transform: translateY(16px);
}
to { opacity: 1; transform: translateY(0);
}
}

/* Header */
.cpev-header[data-v-ee7f818c] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 16px 24px;
  margin-bottom: 32px;
}
.cpev-header-left[data-v-ee7f818c] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cpev-title[data-v-ee7f818c] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 1.3;
}
.cpev-subtitle[data-v-ee7f818c] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
  line-height: 1.4;
}

/* Main Grid */
.cpev-grid[data-v-ee7f818c] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 1024px) {
.cpev-grid[data-v-ee7f818c] {
    grid-template-columns: 2fr 1fr;
}
}

/* Content Column */
.cpev-content[data-v-ee7f818c] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cpev-card[data-v-ee7f818c] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px 32px;
}
.cpev-section-title[data-v-ee7f818c] {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px 0;
  line-height: 1.3;
}
.cpev-icon-primary[data-v-ee7f818c] { color: var(--q-primary);
}
.cpev-icon-gray[data-v-ee7f818c] { color: #64748b;
}
.cpev-form-group[data-v-ee7f818c] {
  margin-bottom: 24px;
}
.cpev-form-group[data-v-ee7f818c]:last-child {
  margin-bottom: 0;
}
.cpev-label[data-v-ee7f818c] {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 8px;
  line-height: 1.4;
}
.cpev-required[data-v-ee7f818c] {
  color: #ef4444;
}

/* Compact input styles */
.cpev-input[data-v-ee7f818c] .q-field__control {
  border-radius: 10px;
  min-height: 40px;
}
.cpev-input[data-v-ee7f818c] .q-field__control:before {
  border-color: #e2e8f0;
}
.cpev-input[data-v-ee7f818c] .q-field__native {
  padding: 8px 12px;
  font-size: 14px;
  color: #1e293b;
}
.cpev-input[data-v-ee7f818c] .q-field__native::placeholder {
  color: #94a3b8;
}
.cpev-title-input[data-v-ee7f818c] .q-field__native {
  font-size: 18px;
  font-weight: 500;
}

/* Compact textarea styles */
.cpev-textarea[data-v-ee7f818c] .q-field__control {
  border-radius: 10px;
}
.cpev-textarea[data-v-ee7f818c] .q-field__control:before {
  border-color: #e2e8f0;
}
.cpev-textarea[data-v-ee7f818c] .q-field__native {
  padding: 10px 12px;
  font-size: 14px;
  color: #1e293b;
  min-height: 60px;
}
.cpev-textarea[data-v-ee7f818c] .q-field__native::placeholder {
  color: #94a3b8;
}

/* File Upload */
.cpev-select-file-btn[data-v-ee7f818c] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1.5px solid var(--q-primary);
  background: transparent;
  color: var(--q-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.cpev-select-file-btn[data-v-ee7f818c]:hover {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.05);
}
.cpev-selected-file[data-v-ee7f818c] {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--q-dark);
}
.cpev-file-preview[data-v-ee7f818c] {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  display: block;
}
.cpev-file-info[data-v-ee7f818c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
}
.cpev-file-name[data-v-ee7f818c] {
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  line-height: 1.4;
}

/* Dates Grid */
.cpev-dates-grid[data-v-ee7f818c] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Questions */
.cpev-questions-header[data-v-ee7f818c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.cpev-questions-count[data-v-ee7f818c] {
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1.4;
}
.cpev-questions-list[data-v-ee7f818c] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cpev-question-card[data-v-ee7f818c] {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(248, 250, 252, 0.5);
}
.cpev-question-header[data-v-ee7f818c] {
  padding: 16px;
  background: var(--q-info);
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.cpev-drag-icon[data-v-ee7f818c] {
  color: #cbd5e1;
  cursor: move;
  margin-top: 8px;
}
.cpev-question-content[data-v-ee7f818c] {
  flex: 1;
}
.cpev-question-label[data-v-ee7f818c] {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 4px;
  line-height: 1.4;
}
.cpev-question-input[data-v-ee7f818c] {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  outline: none;
  font-weight: 700;
  font-size: 14px;
  color: #1e293b;
  padding-bottom: 4px;
  transition: border-color 0.2s;
  line-height: 1.4;
}
.cpev-question-input[data-v-ee7f818c]:focus {
  border-bottom-color: var(--q-primary);
}
.cpev-question-input[data-v-ee7f818c]::placeholder {
  color: #cbd5e1;
}
.cpev-btn-delete[data-v-ee7f818c] {
  color: #cbd5e1;
}
.cpev-btn-delete[data-v-ee7f818c]:hover {
  color: #ef4444;
  background: #fef2f2;
}

/* Question Options */
.cpev-question-options[data-v-ee7f818c] {
  padding: 16px;
}
.cpev-option-item[data-v-ee7f818c] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.cpev-option-marker[data-v-ee7f818c] {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  flex-shrink: 0;
}
.cpev-option-input[data-v-ee7f818c] {
  flex: 1;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.2s;
  line-height: 1.4;
}
.cpev-option-input[data-v-ee7f818c]:focus {
  border-color: var(--q-primary);
  background: white;
}
.cpev-btn-remove-option[data-v-ee7f818c] {
  color: #cbd5e1;
}
.cpev-btn-remove-option[data-v-ee7f818c]:hover {
  color: #ef4444;
}
.cpev-btn-add-option[data-v-ee7f818c] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 28px;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-primary);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1.4;
}
.cpev-btn-add-option[data-v-ee7f818c]:hover {
  opacity: 0.8;
}
.cpev-btn-add-question[data-v-ee7f818c] {
  width: 100%;
  padding: 16px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: none;
  color: #64748b;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.cpev-btn-add-question[data-v-ee7f818c]:hover {
  border-color: var(--q-primary);
  color: var(--q-primary);
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.05);
}

/* Settings Column */
.cpev-settings[data-v-ee7f818c] {
  position: sticky;
  top: 24px;
}
.cpev-settings-card[data-v-ee7f818c] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
}
.cpev-setting-group[data-v-ee7f818c] {
  margin-bottom: 24px;
}
.cpev-anonymity-options[data-v-ee7f818c] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cpev-anonymity-option[data-v-ee7f818c] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
}
.cpev-anonymity-option[data-v-ee7f818c]:hover {
  background: var(--q-dark);
}
.cpev-anonymity-active-normal[data-v-ee7f818c] {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.06);
  border-color: rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
  color: var(--q-primary);
}
.cpev-anonymity-active-public[data-v-ee7f818c] {
  background: rgba(var(--q-secondary-rgb, 20, 184, 166), 0.06);
  border-color: rgba(var(--q-secondary-rgb, 20, 184, 166), 0.3);
  color: var(--q-secondary);
}
.cpev-anonymity-active-anon[data-v-ee7f818c] {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}
.cpev-hidden-radio[data-v-ee7f818c] {
  display: none;
}
.cpev-option-text[data-v-ee7f818c] {
  flex: 1;
}
.cpev-option-title[data-v-ee7f818c] {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}
.cpev-option-desc[data-v-ee7f818c] {
  display: block;
  font-size: 10px;
  color: #64748b;
  line-height: 1.4;
}
.cpev-option-dot[data-v-ee7f818c] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.cpev-dot-primary[data-v-ee7f818c] { background: var(--q-primary);
}
.cpev-dot-secondary[data-v-ee7f818c] { background: var(--q-secondary);
}
.cpev-dot-gray[data-v-ee7f818c] { background: #475569;
}
.cpev-divider[data-v-ee7f818c] {
  border: none;
  border-top: 1px solid #f1f5f9;
  margin: 24px 0;
}

/* Toggles */
.cpev-toggles[data-v-ee7f818c] {
  display: flex;
  flex-direction: column;
}
.cpev-toggle-row[data-v-ee7f818c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 8px 0;
}
.cpev-toggle-row span[data-v-ee7f818c] {
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  line-height: 1.4;
}

/* Custom Toggle */
.cpev-toggle[data-v-ee7f818c] {
  position: relative;
  width: 40px;
  height: 20px;
  background: #cbd5e1;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.2s;
  flex-shrink: 0;
}
.cpev-toggle.active[data-v-ee7f818c] {
  background: var(--q-primary);
}
.cpev-toggle-knob[data-v-ee7f818c] {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 9999px;
  transition: transform 0.2s;
}
.cpev-toggle.active .cpev-toggle-knob[data-v-ee7f818c] {
  transform: translateX(20px);
}
.cpev-toggle-divider[data-v-ee7f818c] {
  height: 1px;
  background: #e2e8f0;
  margin: 8px 0;
}

/* Audience Section */
.cpev-audience[data-v-ee7f818c] {
  margin-top: 16px;
  padding-top: 16px;
  animation: cpevFadeIn-ee7f818c 0.3s ease;
}
.cpev-audience-label[data-v-ee7f818c] {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 16px;
  line-height: 1.4;
}
.cpev-audience-row[data-v-ee7f818c] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 8px;
}
.cpev-audience-row[data-v-ee7f818c]:hover {
  background: var(--q-dark);
  border-color: #cbd5e1;
}
.cpev-audience-text[data-v-ee7f818c] {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  line-height: 1.4;
}

/* Custom Chips */
.cpev-chips-wrap[data-v-ee7f818c] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.cpev-chip[data-v-ee7f818c] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border-radius: 20px;
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.08);
  transition: all 0.15s;
}
.cpev-chip[data-v-ee7f818c]:hover {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.14);
}
.cpev-chip-dep[data-v-ee7f818c] {
  background: rgba(var(--q-secondary-rgb, 20, 184, 166), 0.08);
}
.cpev-chip-dep[data-v-ee7f818c]:hover {
  background: rgba(var(--q-secondary-rgb, 20, 184, 166), 0.14);
}
.cpev-chip-avatar[data-v-ee7f818c] {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.15);
  color: var(--q-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cpev-chip-avatar-dep[data-v-ee7f818c] {
  background: rgba(var(--q-secondary-rgb, 20, 184, 166), 0.15);
  color: var(--q-secondary);
  border-radius: 6px;
}
.cpev-chip-name[data-v-ee7f818c] {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  line-height: 1.3;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cpev-chip-remove[data-v-ee7f818c] {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.cpev-chip-remove[data-v-ee7f818c]:hover {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.2);
  color: var(--q-primary);
}

/* Footer Bar */
.cpev-footer[data-v-ee7f818c] {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--q-info);
  border-top: 1px solid #e2e8f0;
  padding: 16px;
  z-index: 40;
}
.cpev-footer-content[data-v-ee7f818c] {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cpev-footer-right[data-v-ee7f818c] {
  display: flex;
  gap: 12px;
}
.cpev-btn-clear[data-v-ee7f818c] {
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.cpev-btn-clear[data-v-ee7f818c]:hover {
  background: #f1f5f9;
  color: #334155;
}
.cpev-btn-draft[data-v-ee7f818c] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: var(--q-info);
  color: #334155;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.cpev-btn-draft[data-v-ee7f818c]:hover {
  background: #f8fafc;
}
.cpev-btn-publish[data-v-ee7f818c] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border-radius: 12px;
  border: none;
  background: var(--q-primary);
  color: white;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
  line-height: 1.4;
}
.cpev-btn-publish[data-v-ee7f818c]:hover {
  box-shadow: 0 6px 20px rgba(var(--q-primary-rgb, 225, 29, 72), 0.4);
}

/* Selection Modals */
.cpev-modal[data-v-ee7f818c] {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}
.cpev-modal-header[data-v-ee7f818c] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}
.cpev-modal-title[data-v-ee7f818c] {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.4;
}
.cpev-modal-search[data-v-ee7f818c] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-bottom: 1px solid #f1f5f9;
}
.cpev-search-icon[data-v-ee7f818c] {
  color: #94a3b8;
  flex-shrink: 0;
}
.cpev-search-input[data-v-ee7f818c] {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: #1e293b;
  padding: 8px 0;
  background: transparent;
  line-height: 1.4;
}
.cpev-search-input[data-v-ee7f818c]::placeholder {
  color: #94a3b8;
}
.cpev-modal-body[data-v-ee7f818c] {
  flex: 1;
  overflow: hidden;
}
.cpev-modal-loading[data-v-ee7f818c] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px;
}
.cpev-modal-list[data-v-ee7f818c] {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px;
}
.cpev-modal-empty[data-v-ee7f818c] {
  text-align: center;
  padding: 32px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.4;
}
.cpev-modal-item[data-v-ee7f818c] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.cpev-modal-item[data-v-ee7f818c]:hover {
  background: #f8fafc;
}
.cpev-item-selected[data-v-ee7f818c] {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.05);
}
.cpev-item-selected[data-v-ee7f818c]:hover {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.08);
}
.cpev-user-avatar[data-v-ee7f818c] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-shrink: 0;
  overflow: hidden;
  transition: all 0.15s;
}
.cpev-modal-item:hover .cpev-user-avatar[data-v-ee7f818c] {
  background: white;
  color: var(--q-primary);
}
.cpev-user-avatar img[data-v-ee7f818c] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cpev-dep-icon[data-v-ee7f818c] {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-shrink: 0;
  transition: all 0.15s;
}
.cpev-modal-item:hover .cpev-dep-icon[data-v-ee7f818c] {
  background: white;
  color: var(--q-primary);
}
.cpev-user-info[data-v-ee7f818c] {
  flex: 1;
  min-width: 0;
}
.cpev-user-name[data-v-ee7f818c] {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cpev-user-position[data-v-ee7f818c] {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cpev-check-icon[data-v-ee7f818c] {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.15s;
}
.cpev-check-active[data-v-ee7f818c] {
  background: var(--q-primary);
  border-color: var(--q-primary);
  color: white;
}
.cpev-modal-footer[data-v-ee7f818c] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
}
.cpev-modal-count[data-v-ee7f818c] {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
  line-height: 1.4;
}
.cpev-modal-btn-done[data-v-ee7f818c] {
  padding: 8px 24px;
  border-radius: 10px;
  border: none;
  background: var(--q-primary);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.cpev-modal-btn-done[data-v-ee7f818c]:hover {
  box-shadow: 0 4px 12px rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
}


.create-lesson-view[data-v-2f102593] {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 100px;
}
.page-header[data-v-2f102593] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  background: white;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.page-title[data-v-2f102593] {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.page-subtitle[data-v-2f102593] {
  font-size: 14px;
  color: #64748b;
  margin: 4px 0 0 0;
}
.main-grid[data-v-2f102593] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 1024px) {
.main-grid[data-v-2f102593] {
    grid-template-columns: 2fr 1fr;
}
}
.left-column[data-v-2f102593] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.right-column[data-v-2f102593] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.card[data-v-2f102593] {
  background: white;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  padding: 24px 32px;
}
.card-title[data-v-2f102593] {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title-sm[data-v-2f102593] {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  text-transform: uppercase;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.title-icon[data-v-2f102593] {
  color: #e11d48;
}
.form-group[data-v-2f102593] {
  margin-bottom: 24px;
}
.form-group[data-v-2f102593]:last-child {
  margin-bottom: 0;
}
.form-label[data-v-2f102593] {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}
.form-label-sm[data-v-2f102593] {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
}
.required[data-v-2f102593] { color: #e11d48;
}
.title-input[data-v-2f102593] .q-field__control {
  font-size: 18px;
  font-weight: 500;
}
.material-selector[data-v-2f102593] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}
@media (min-width: 640px) {
.material-selector[data-v-2f102593] {
    grid-template-columns: repeat(6, 1fr);
}
}
.material-type-btn[data-v-2f102593] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: white;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}
.material-type-btn[data-v-2f102593]:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.material-type-btn.active[data-v-2f102593] {
  background: #fff1f2;
  border-color: #e11d48;
  color: #be123c;
  box-shadow: 0 0 0 1px var(--q-primary), 0 2px 4px rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
}
.material-type-btn span[data-v-2f102593] {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 8px;
}
.content-area[data-v-2f102593] {
  background: #f8fafc;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.video-input-area .form-label[data-v-2f102593] {
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 8px;
}
.input-hint[data-v-2f102593] {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 8px;
}
.file-upload-area[data-v-2f102593] {
  text-align: center;
}
.file-dropzone[data-v-2f102593] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 160px;
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: #f8fafc;
}
.file-dropzone[data-v-2f102593]:hover {
  background: white;
  border-color: #fb7185;
}
.dropzone-icon[data-v-2f102593] {
  background: white;
  padding: 12px;
  border-radius: 50%;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  color: #e11d48;
}
.dropzone-title[data-v-2f102593] {
  font-weight: 700;
  color: #334155;
}
.dropzone-hint[data-v-2f102593] {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 4px;
}
.hidden-input[data-v-2f102593] {
  display: none;
}
.separator[data-v-2f102593] {
  display: flex;
  align-items: center;
  padding: 16px 0;
}
.separator[data-v-2f102593]::before,
.separator[data-v-2f102593]::after {
  content: '';
  flex: 1;
  border-top: 1px solid #cbd5e1;
}
.separator span[data-v-2f102593] {
  padding: 0 16px;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
}
.library-btn[data-v-2f102593] {
  width: 100%;
}
.uploaded-file[data-v-2f102593] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.file-info[data-v-2f102593] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.file-icon[data-v-2f102593] {
  width: 40px;
  height: 40px;
  background: #eef2ff;
  color: #4f46e5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-name[data-v-2f102593] {
  font-weight: 700;
  font-size: 14px;
  color: #1e293b;
  margin: 0;
}
.file-size[data-v-2f102593] {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}
.longread-editor[data-v-2f102593] {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.editor-toolbar[data-v-2f102593] {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.toolbar-divider[data-v-2f102593] {
  width: 1px;
  height: 16px;
  background: #cbd5e1;
  margin: 0 4px;
}
.editor-textarea[data-v-2f102593] .q-field__control {
  padding: 16px;
  line-height: 1.6;
}
.interactive-area[data-v-2f102593] {
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  padding: 32px;
  border-radius: 12px;
  border: 1px solid #c7d2fe;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.interactive-icon[data-v-2f102593] {
  width: 64px;
  height: 64px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4f46e5;
  margin-bottom: 16px;
}
.interactive-title[data-v-2f102593] {
  font-size: 18px;
  font-weight: 700;
  color: #312e81;
  margin: 0 0 8px 0;
}
.interactive-desc[data-v-2f102593] {
  font-size: 14px;
  color: #4338ca;
  max-width: 400px;
  margin: 0 0 24px 0;
}
.extras-section[data-v-2f102593] {
  padding-top: 0;
}
.extras-section.border-top[data-v-2f102593] {
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid #f1f5f9;
}
.extras-title[data-v-2f102593] {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  text-transform: uppercase;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.files-list[data-v-2f102593],
.links-list[data-v-2f102593] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.file-item[data-v-2f102593],
.link-item[data-v-2f102593] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
}
.file-item-info[data-v-2f102593],
.link-item-info[data-v-2f102593] {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}
.file-item-icon[data-v-2f102593],
.link-item-icon[data-v-2f102593] {
  color: #94a3b8;
  flex-shrink: 0;
}
.file-item-name[data-v-2f102593],
.link-item-title[data-v-2f102593] {
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  margin: 0;
}
.file-item-size[data-v-2f102593] {
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
}
.link-item-text[data-v-2f102593] {
  min-width: 0;
}
.link-item-url[data-v-2f102593] {
  font-size: 12px;
  color: #3b82f6;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-item-url[data-v-2f102593]:hover {
  text-decoration: underline;
}
.file-actions[data-v-2f102593] {
  display: flex;
  gap: 8px;
}
.add-file-btn[data-v-2f102593] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}
.add-file-btn[data-v-2f102593]:hover {
  border-color: #fda4af;
  background: #fff1f2;
  color: #e11d48;
}
.library-btn-sm[data-v-2f102593] {
  flex: 1;
}
.add-link-form[data-v-2f102593] {
  display: flex;
  gap: 8px;
}
.link-input[data-v-2f102593] {
  flex: 1;
}

/* Cover Upload */
.cover-upload[data-v-2f102593] {
  position: relative;
  aspect-ratio: 16/9;
  background: #f8fafc;
  border-radius: 12px;
  border: 2px dashed #e2e8f0;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.cover-upload[data-v-2f102593]:hover {
  border-color: #fda4af;
}
.cover-preview[data-v-2f102593] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover-overlay[data-v-2f102593] {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.cover-upload:hover .cover-overlay[data-v-2f102593] {
  opacity: 1;
}
.cover-overlay p[data-v-2f102593] {
  color: white;
  font-size: 12px;
  font-weight: 500;
}
.cover-placeholder-icon[data-v-2f102593] {
  color: #94a3b8;
  margin-bottom: 8px;
  transition: color 0.2s;
}
.cover-upload:hover .cover-placeholder-icon[data-v-2f102593] {
  color: #e11d48;
}
.cover-placeholder-text[data-v-2f102593] {
  font-size: 12px;
  color: #94a3b8;
}
.amber-icon[data-v-2f102593] {
  color: #f59e0b;
}

/* Footer Actions */
.footer-actions[data-v-2f102593] {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  border-top: 1px solid #e2e8f0;
  padding: 16px;
  z-index: 40;
}
.footer-content[data-v-2f102593] {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-right[data-v-2f102593] {
  display: flex;
  gap: 12px;
}

/* Library Modal */
.library-modal[data-v-2f102593] {
  width: 100%;
  max-width: 500px;
}
.modal-header[data-v-2f102593] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}
.modal-title[data-v-2f102593] {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}
.indigo-icon[data-v-2f102593] {
  color: #4f46e5;
}
.modal-search[data-v-2f102593] {
  border-bottom: 1px solid #f1f5f9;
}
.modal-list[data-v-2f102593] {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
}
.library-file-item[data-v-2f102593] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.library-file-item[data-v-2f102593]:hover {
  background: #f8fafc;
}
.library-file-icon[data-v-2f102593] {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  transition: all 0.2s;
}
.library-file-item:hover .library-file-icon[data-v-2f102593] {
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.library-file-info[data-v-2f102593] {
  flex: 1;
  min-width: 0;
}
.library-file-name[data-v-2f102593] {
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.library-file-meta[data-v-2f102593] {
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
}
.library-file-select[data-v-2f102593] {
  font-size: 12px;
  font-weight: 700;
  color: #4f46e5;
  background: #eef2ff;
  padding: 6px 12px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}
.library-file-item:hover .library-file-select[data-v-2f102593] {
  opacity: 1;
}
.library-empty[data-v-2f102593] {
  text-align: center;
  padding: 32px;
  color: #94a3b8;
  font-size: 14px;
}


/* ===== Editor container ===== */
/* Stacking context above CreateMaterialView fixed footer (z-index: 40) so menubar/toolbar remain clickable */
.lr-editor[data-v-215c22f1] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 50;
}

/* ===== Add block form ===== */
.lr-add-form[data-v-215c22f1] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lr-add-hint[data-v-215c22f1] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  color: #92400e;
  font-size: 13px;
  line-height: 1.4;
}
.lr-add-inputs[data-v-215c22f1] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.lr-input[data-v-215c22f1] .q-field__control {
  border-radius: 10px;
  min-height: 40px;
}
.lr-input[data-v-215c22f1] .q-field__control:before {
  border-color: #e2e8f0;
}
.lr-input[data-v-215c22f1] .q-field__control:hover:before {
  border-color: var(--q-primary);
}
.lr-input[data-v-215c22f1] .q-field__prepend {
  color: #94a3b8;
}
.lr-add-btn[data-v-215c22f1] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
  color: var(--q-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
  align-self: flex-start;
}
.lr-add-btn[data-v-215c22f1]:hover:not(:disabled) {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.18);
}
.lr-add-btn[data-v-215c22f1]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.lr-error-msg[data-v-215c22f1] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b;
  font-size: 13px;
  line-height: 1.4;
}

/* ===== Blocks section ===== */
.lr-blocks-section[data-v-215c22f1] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lr-blocks-header[data-v-215c22f1] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lr-blocks-title[data-v-215c22f1] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  line-height: 1.3;
}
.lr-blocks-count[data-v-215c22f1] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
  color: var(--q-primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* ===== Block card ===== */
.lr-block-card[data-v-215c22f1] {
  background: var(--q-info);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
  margin-bottom: 8px;
}
.lr-block-card[data-v-215c22f1]:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.lr-block-expanded[data-v-215c22f1] {
  border-color: rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
  box-shadow: 0 4px 12px rgba(var(--q-primary-rgb, 225, 29, 72), 0.08);
}
.lr-block-header[data-v-215c22f1] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
}
.lr-drag-handle[data-v-215c22f1] {
  color: #94a3b8;
  cursor: grab;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.lr-drag-handle[data-v-215c22f1]:hover {
  opacity: 1;
}
.lr-drag-handle[data-v-215c22f1]:active {
  cursor: grabbing;
}
.lr-block-info[data-v-215c22f1] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.lr-block-name[data-v-215c22f1] {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
  word-break: break-word;
}
.lr-block-keywords[data-v-215c22f1] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.lr-keyword-chip[data-v-215c22f1] {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}
.lr-keyword-add-hint[data-v-215c22f1] {
  font-size: 12px;
  color: var(--q-primary);
  cursor: pointer;
  line-height: 1.4;
}
.lr-keyword-add-hint[data-v-215c22f1]:hover {
  text-decoration: underline;
}
.lr-block-actions[data-v-215c22f1] {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.lr-action-btn[data-v-215c22f1] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.lr-action-edit[data-v-215c22f1] {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.08);
  color: var(--q-primary);
}
.lr-action-edit[data-v-215c22f1]:hover {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.15);
}
.lr-action-remove[data-v-215c22f1] {
  background: transparent;
  color: #94a3b8;
  padding: 6px;
}
.lr-action-remove[data-v-215c22f1]:hover {
  background: #fef2f2;
  color: #ef4444;
}

/* ===== Block editor ===== */
/* Без паддинга у области редактора; отступы только у кнопок (файл, сохранить) */
.lr-block-editor[data-v-215c22f1] {
  border-top: 1px solid #e2e8f0;
  padding: 0;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lr-block-editor .lr-file-upload-row[data-v-215c22f1],
.lr-block-editor .lr-editor-footer[data-v-215c22f1] {
  margin-left: 16px;
  margin-right: 16px;
}
.lr-block-editor .lr-file-upload-row[data-v-215c22f1] {
  margin-top: 16px;
}
.lr-block-editor .lr-editor-footer[data-v-215c22f1] {
  margin-bottom: 16px;
}

/* ===== File upload row ===== */
.lr-file-upload-row[data-v-215c22f1] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--q-info);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

/* Первая строка: подпись + кнопка загрузки */
.lr-file-upload-label[data-v-215c22f1] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  line-height: 1.4;
  flex-shrink: 0;
}
.lr-file-upload-control[data-v-215c22f1] {
  flex-shrink: 0;
}
.lr-file-upload-control[data-v-215c22f1] > div {
  height: auto !important;
}

/* Кнопка «Загрузить» в новой стилистике (primary, скругление, тень) */
.lr-file-upload-control[data-v-215c22f1] .q-btn {
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  border: none !important;
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  box-shadow: 0 2px 8px rgba(var(--q-primary-rgb, 225, 29, 72), 0.3) !important;
  transition: all 0.2s !important;
  line-height: 1.4 !important;
}
.lr-file-upload-control[data-v-215c22f1] .q-btn:hover {
  filter: brightness(0.95) !important;
  box-shadow: 0 4px 12px rgba(var(--q-primary-rgb, 225, 29, 72), 0.4) !important;
}
.lr-file-upload-control[data-v-215c22f1] .q-btn .q-icon {
  font-size: 20px !important;
}
.lr-file-upload-control[data-v-215c22f1] .q-btn .q-btn__content {
  gap: 8px !important;
}

/* Ссылка на файл — отдельная строка на всю ширину */
.lr-file-href[data-v-215c22f1] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-basis: 100%;
  min-width: 0;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}
.lr-file-href-input[data-v-215c22f1] {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
  line-height: 1.4;
  outline: none;
}
.lr-file-href-input[data-v-215c22f1]:focus {
  border-color: var(--q-primary);
  background: var(--q-info);
}
.lr-copy-btn[data-v-215c22f1] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.08);
  color: var(--q-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  line-height: 1.4;
  flex-shrink: 0;
}
.lr-copy-btn[data-v-215c22f1]:hover {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.15);
}
.lr-file-error[data-v-215c22f1] {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  flex-basis: 100%;
  padding: 8px 12px;
  background: #fef2f2;
  border-radius: 8px;
  color: #dc2626;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 4px;
}

/* ===== Editor footer ===== */
.lr-editor-footer[data-v-215c22f1] {
  display: flex;
  justify-content: flex-end;
}
.lr-save-btn[data-v-215c22f1] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border: none;
  border-radius: 10px;
  background: var(--q-primary);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.lr-save-btn[data-v-215c22f1]:hover:not(:disabled) {
  background: #be123c;
  box-shadow: 0 4px 14px rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
}
.lr-save-btn[data-v-215c22f1]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== Empty state ===== */
.lr-empty-state[data-v-215c22f1] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  border: 2px dashed #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  text-align: center;
}
.lr-empty-icon[data-v-215c22f1] {
  color: #94a3b8;
  margin-bottom: 8px;
}
.lr-empty-text[data-v-215c22f1] {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

/* ===== View dialog ===== */
.lr-view-dialog[data-v-215c22f1] {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.lr-dialog-bar[data-v-215c22f1] {
  background: var(--q-primary);
  color: white;
}
.lr-dialog-title[data-v-215c22f1] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.lr-view-content[data-v-215c22f1] {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.lr-view-block[data-v-215c22f1] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lr-view-block-title[data-v-215c22f1] {
  font-size: 22px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 1.3;
}
.lr-view-keywords[data-v-215c22f1] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lr-view-block-body[data-v-215c22f1] {
  font-size: 15px;
  color: #334155;
  line-height: 1.7;
}
.lr-view-block-body[data-v-215c22f1] img {
  max-width: 100%;
  border-radius: 8px;
}
.lr-comments-section[data-v-215c22f1] {
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
}

/* ===== TinyMCE overrides ===== */
.lr-block-editor[data-v-215c22f1] .tox-tinymce {
  border-radius: 10px;
  border-color: #e2e8f0;
}
.lr-block-editor[data-v-215c22f1] .tox-toolbar__primary {
  border-bottom-color: #e2e8f0;
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
.lr-block-header[data-v-215c22f1] {
    flex-wrap: wrap;
}
.lr-block-actions[data-v-215c22f1] {
    width: 100%;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}
.lr-file-upload-row[data-v-215c22f1] {
    flex-direction: column;
    align-items: stretch;
}
}


/* ===== Editor container ===== */
.h5p-editor[data-v-32789c21] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===== Add block form ===== */
.h5p-add-form[data-v-32789c21] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.h5p-add-hint[data-v-32789c21] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  color: #92400e;
  font-size: 13px;
  line-height: 1.4;
}
.h5p-add-inputs[data-v-32789c21] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.h5p-input[data-v-32789c21] .q-field__control {
  border-radius: 10px;
  min-height: 40px;
}
.h5p-input[data-v-32789c21] .q-field__control:before {
  border-color: #e2e8f0;
}
.h5p-input[data-v-32789c21] .q-field__control:hover:before {
  border-color: var(--q-primary);
}
.h5p-input[data-v-32789c21] .q-field__prepend {
  color: #94a3b8;
}
.h5p-add-btn[data-v-32789c21] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
  color: var(--q-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
  align-self: flex-start;
}
.h5p-add-btn[data-v-32789c21]:hover:not(:disabled) {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.18);
}
.h5p-add-btn[data-v-32789c21]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.h5p-error-msg[data-v-32789c21] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b;
  font-size: 13px;
  line-height: 1.4;
}

/* ===== Blocks section ===== */
.h5p-blocks-section[data-v-32789c21] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.h5p-blocks-header[data-v-32789c21] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.h5p-blocks-title[data-v-32789c21] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  line-height: 1.3;
}
.h5p-blocks-count[data-v-32789c21] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
  color: var(--q-primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* ===== Block card ===== */
.h5p-block-card[data-v-32789c21] {
  background: var(--q-info);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
  margin-bottom: 8px;
}
.h5p-block-card[data-v-32789c21]:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.h5p-block-expanded[data-v-32789c21] {
  border-color: rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
  box-shadow: 0 4px 12px rgba(var(--q-primary-rgb, 225, 29, 72), 0.08);
}
.h5p-block-header[data-v-32789c21] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
}
.h5p-drag-handle[data-v-32789c21] {
  color: #94a3b8;
  cursor: grab;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.h5p-drag-handle[data-v-32789c21]:hover {
  opacity: 1;
}
.h5p-drag-handle[data-v-32789c21]:active {
  cursor: grabbing;
}
.h5p-block-info[data-v-32789c21] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.h5p-block-name[data-v-32789c21] {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
  word-break: break-word;
}
.h5p-block-keywords[data-v-32789c21] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.h5p-keyword-chip[data-v-32789c21] {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}
.h5p-keyword-add-hint[data-v-32789c21] {
  font-size: 12px;
  color: var(--q-primary);
  cursor: pointer;
  line-height: 1.4;
}
.h5p-keyword-add-hint[data-v-32789c21]:hover {
  text-decoration: underline;
}
.h5p-block-status[data-v-32789c21] {
  margin-top: 2px;
}
.h5p-status-badge[data-v-32789c21] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.h5p-status-ready[data-v-32789c21] {
  background: rgba(var(--q-secondary-rgb, 20, 184, 166), 0.1);
  color: var(--q-secondary);
}
.h5p-status-empty[data-v-32789c21] {
  background: #fef3c7;
  color: #92400e;
}
.h5p-block-actions[data-v-32789c21] {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.h5p-action-btn[data-v-32789c21] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.h5p-action-edit[data-v-32789c21] {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.08);
  color: var(--q-primary);
}
.h5p-action-edit[data-v-32789c21]:hover {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.15);
}
.h5p-action-remove[data-v-32789c21] {
  background: transparent;
  color: #94a3b8;
  padding: 6px;
}
.h5p-action-remove[data-v-32789c21]:hover {
  background: #fef2f2;
  color: #ef4444;
}

/* ===== Block editor ===== */
.h5p-block-editor[data-v-32789c21] {
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
}

/* ===== Editor footer ===== */
.h5p-editor-footer[data-v-32789c21] {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid #e2e8f0;
}
.h5p-close-btn[data-v-32789c21] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: var(--q-info);
  color: #475569;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.h5p-close-btn[data-v-32789c21]:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.h5p-save-btn[data-v-32789c21] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border: none;
  border-radius: 10px;
  background: var(--q-primary);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.h5p-save-btn[data-v-32789c21]:hover:not(:disabled) {
  background: #be123c;
  box-shadow: 0 4px 14px rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
}
.h5p-save-btn[data-v-32789c21]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== Empty state ===== */
.h5p-empty-state[data-v-32789c21] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  border: 2px dashed #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  text-align: center;
}
.h5p-empty-icon[data-v-32789c21] {
  color: #94a3b8;
  margin-bottom: 8px;
}
.h5p-empty-text[data-v-32789c21] {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

/* ===== View dialog ===== */
.h5p-view-dialog[data-v-32789c21] {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.h5p-dialog-bar[data-v-32789c21] {
  background: var(--q-primary);
  color: white;
}
.h5p-dialog-title[data-v-32789c21] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}
.h5p-view-content[data-v-32789c21] {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}
.h5p-view-block[data-v-32789c21] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.h5p-view-block-title[data-v-32789c21] {
  font-size: 22px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 1.3;
}
.h5p-view-keywords[data-v-32789c21] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.h5p-player-wrapper[data-v-32789c21] {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  min-height: 300px;
}
.h5p-no-content[data-v-32789c21] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  color: #92400e;
  font-size: 13px;
  line-height: 1.4;
}
.h5p-comments-section[data-v-32789c21] {
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
}


.sev-container[data-v-1142ce2a] {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px;
  animation: sevFadeIn-1142ce2a 0.3s ease;
}
.sev-loading-state[data-v-1142ce2a] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px;
}
@keyframes sevFadeIn-1142ce2a {
from { opacity: 0; transform: translateY(16px);
}
to { opacity: 1; transform: translateY(0);
}
}

/* Header */
.sev-header[data-v-1142ce2a] {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}
.sev-header-icon[data-v-1142ce2a] {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
  color: var(--q-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sev-title[data-v-1142ce2a] {
  font-size: 22px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 1.3;
}
.sev-subtitle[data-v-1142ce2a] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
  line-height: 1.4;
}

/* Section */
.sev-section[data-v-1142ce2a] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 24px;
  margin-bottom: 20px;
}
.sev-section[data-v-1142ce2a]:last-of-type {
  margin-bottom: 0;
}
.sev-section-header[data-v-1142ce2a] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.sev-section-title[data-v-1142ce2a] {
  font-size: 16px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
}
.sev-section-header .sev-section-title[data-v-1142ce2a] {
  margin-bottom: 0;
}
.sev-section-icon[data-v-1142ce2a] { color: #64748b;
}
.sev-rose-icon[data-v-1142ce2a] { color: var(--q-primary);
}
.sev-gray-icon[data-v-1142ce2a] { color: #64748b;
}
.sev-teal-icon[data-v-1142ce2a] { color: var(--q-secondary);
}

/* Main Grid (Avatar + Info) */
.sev-main-grid[data-v-1142ce2a] {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
}
@media (max-width: 480px) {
.sev-main-grid[data-v-1142ce2a] {
    grid-template-columns: 1fr;
}
.sev-avatar-col[data-v-1142ce2a] {
    justify-self: center;
}
}

/* Avatar Upload */
.sev-avatar-upload[data-v-1142ce2a] {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  background: #f8fafc;
  border: 2px dashed #e2e8f0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
}
.sev-avatar-upload[data-v-1142ce2a]:hover {
  border-color: #fda4af;
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.05);
}
.sev-avatar-preview[data-v-1142ce2a] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sev-avatar-overlay[data-v-1142ce2a] {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.2s;
}
.sev-avatar-upload:hover .sev-avatar-overlay[data-v-1142ce2a] {
  opacity: 1;
}
.sev-avatar-icon[data-v-1142ce2a] {
  color: #94a3b8;
  margin-bottom: 4px;
  transition: all 0.2s;
}
.sev-avatar-upload:hover .sev-avatar-icon[data-v-1142ce2a] {
  color: var(--q-primary);
  transform: scale(1.1);
}
.sev-avatar-hint[data-v-1142ce2a] {
  font-size: 10px;
  color: #94a3b8;
  text-align: center;
  line-height: 1.3;
}

/* Form */
.sev-form-group[data-v-1142ce2a] {
  margin-bottom: 20px;
}
.sev-form-group[data-v-1142ce2a]:last-child {
  margin-bottom: 0;
}
.sev-input-label[data-v-1142ce2a] {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 6px;
  line-height: 1.4;
}
.sev-required[data-v-1142ce2a] { color: var(--q-primary);
}

/* Input styles */
.sev-input[data-v-1142ce2a] .q-field__control {
  border-radius: 10px;
  min-height: 40px;
}
.sev-input[data-v-1142ce2a] .q-field__control:before {
  border-color: #e2e8f0;
}
.sev-input[data-v-1142ce2a] .q-field__native {
  padding: 8px 12px;
  font-size: 14px;
  color: #1e293b;
}
.sev-input[data-v-1142ce2a] .q-field__native::placeholder {
  color: #94a3b8;
}

/* Textarea styles */
.sev-textarea[data-v-1142ce2a] .q-field__control {
  border-radius: 10px;
}
.sev-textarea[data-v-1142ce2a] .q-field__control:before {
  border-color: #e2e8f0;
}
.sev-textarea[data-v-1142ce2a] .q-field__native {
  padding: 10px 12px;
  font-size: 14px;
  color: #1e293b;
  min-height: 60px;
}
.sev-textarea[data-v-1142ce2a] .q-field__native::placeholder {
  color: #94a3b8;
}

/* Styled Select */
.sev-styled-select[data-v-1142ce2a] {
  background: white;
  border-radius: 10px;
}
.sev-styled-select[data-v-1142ce2a] .q-field__control {
  border-radius: 10px;
  padding-left: 8px;
  min-height: 40px;
}
.sev-styled-select[data-v-1142ce2a] .q-field__control:before {
  border-color: #e2e8f0;
}
.sev-styled-select[data-v-1142ce2a] .q-field__control:hover:before {
  border-color: var(--q-primary);
}
.sev-styled-select[data-v-1142ce2a] .q-field--focused .q-field__control:after {
  border-color: var(--q-primary);
  border-width: 2px;
}
.sev-select-icon[data-v-1142ce2a] {
  color: #94a3b8;
}
.sev-styled-select[data-v-1142ce2a] .q-field--focused .sev-select-icon {
  color: var(--q-primary);
}

/* XP Badge */
.sev-xp-badge[data-v-1142ce2a] {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fef3c7;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #fde68a;
  color: #d97706;
}
.sev-xp-input[data-v-1142ce2a] {
  width: 48px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 700;
  color: #78350f;
  text-align: right;
}
.sev-xp-input[data-v-1142ce2a]::-webkit-outer-spin-button,
.sev-xp-input[data-v-1142ce2a]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sev-xp-input[type=number][data-v-1142ce2a] {
  -moz-appearance: textfield;
}
.sev-xp-badge span[data-v-1142ce2a] {
  font-size: 12px;
  color: #b45309;
  font-weight: 500;
  line-height: 1.4;
}

/* Toggle Group */
.sev-toggle-group[data-v-1142ce2a] {
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px 16px;
  border: 1px solid #f1f5f9;
}
.sev-toggle-row[data-v-1142ce2a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 8px 0;
}
.sev-toggle-row span[data-v-1142ce2a] {
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  line-height: 1.4;
}
.sev-toggle[data-v-1142ce2a] {
  position: relative;
  width: 40px;
  height: 20px;
  background: #cbd5e1;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.2s;
  flex-shrink: 0;
}
.sev-toggle.active[data-v-1142ce2a] {
  background: var(--q-primary);
}
.sev-toggle-knob[data-v-1142ce2a] {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 9999px;
  transition: transform 0.2s;
}
.sev-toggle.active .sev-toggle-knob[data-v-1142ce2a] {
  transform: translateX(20px);
}
.sev-toggle-divider[data-v-1142ce2a] {
  height: 1px;
  background: #e2e8f0;
  margin: 8px 0;
}

/* Footer */
.sev-footer[data-v-1142ce2a] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
}
.sev-btn-cancel[data-v-1142ce2a] {
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: white;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.sev-btn-cancel[data-v-1142ce2a]:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.sev-btn-save[data-v-1142ce2a] {
  padding: 10px 24px;
  border-radius: 10px;
  border: none;
  background: var(--q-primary);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}
.sev-btn-save[data-v-1142ce2a]:hover:not(:disabled) {
  background: #be123c;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
}
.sev-btn-save[data-v-1142ce2a]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


.cmv-container[data-v-03ae709b] {
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 100px;
  animation: cmvFadeIn-03ae709b 0.5s ease;
}
.cmv-loading-state[data-v-03ae709b] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px;
}
@keyframes cmvFadeIn-03ae709b {
from { opacity: 0; transform: translateY(16px);
}
to { opacity: 1; transform: translateY(0);
}
}

/* Header */
.cmv-header[data-v-03ae709b] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.cmv-header-left[data-v-03ae709b] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cmv-title[data-v-03ae709b] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 1.3;
}
.cmv-subtitle[data-v-03ae709b] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
  line-height: 1.4;
}

/* Step Indicator */
.cmv-step-indicator[data-v-03ae709b] {
  display: flex;
  gap: 8px;
  max-width: 400px;
  margin: 0 auto 32px;
}
.cmv-step-item[data-v-03ae709b] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cmv-step-bar[data-v-03ae709b] {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  transition: all 0.5s;
}
.cmv-step-bar.completed[data-v-03ae709b] { background: var(--q-primary);
}
.cmv-step-bar.active[data-v-03ae709b] { background: #fb7185;
}
.cmv-step-bar.pending[data-v-03ae709b] { background: #e2e8f0;
}
.cmv-step-label[data-v-03ae709b] {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  text-align: center;
  transition: color 0.3s;
  line-height: 1.4;
}
.cmv-step-label.active[data-v-03ae709b] {
  color: var(--q-accent);
}

/* Step Content */
.cmv-step-content[data-v-03ae709b] {
  animation: cmvSlideIn-03ae709b 0.3s ease;
}
.cmv-step-content.cmv-centered[data-v-03ae709b] {
  max-width: 700px;
  margin: 0 auto;
}
@keyframes cmvSlideIn-03ae709b {
from { opacity: 0; transform: translateX(32px);
}
to { opacity: 1; transform: translateX(0);
}
}

/* Grid */
.cmv-main-grid[data-v-03ae709b] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
.cmv-main-grid[data-v-03ae709b] {
    grid-template-columns: 3fr 1fr;
}
}
.cmv-left-column[data-v-03ae709b],
.cmv-right-column[data-v-03ae709b] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cmv-right-column .cmv-card[data-v-03ae709b] {
  padding: 16px;
}

/* Card */
.cmv-card[data-v-03ae709b] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  padding: 24px 32px;
  margin-bottom: 24px;
}
.cmv-card[data-v-03ae709b]:last-child {
  margin-bottom: 0;
}
.cmv-card-title[data-v-03ae709b] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 24px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
}
.cmv-card-title-sm[data-v-03ae709b] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  text-transform: uppercase;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
}
.cmv-rose-icon[data-v-03ae709b] { color: var(--q-primary);
}
.cmv-gray-icon[data-v-03ae709b] { color: #64748b;
}
.cmv-amber-icon[data-v-03ae709b] { color: #f59e0b;
}

/* Form */
.cmv-form-group[data-v-03ae709b] {
  margin-bottom: 24px;
}
.cmv-form-group[data-v-03ae709b]:last-child {
  margin-bottom: 0;
}
.cmv-settings-grid .cmv-form-group.cmv-full-width[data-v-03ae709b] {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
.cmv-settings-grid[data-v-03ae709b] {
    grid-template-columns: 1fr;
}
.cmv-settings-grid .cmv-form-group.cmv-full-width[data-v-03ae709b] {
    grid-column: 1;
}
}
.cmv-form-label[data-v-03ae709b] {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  margin-bottom: 4px;
  line-height: 1.4;
}
.cmv-input-label[data-v-03ae709b] {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 4px;
  line-height: 1.4;
}
.cmv-required[data-v-03ae709b] { color: var(--q-primary);
}

/* Compact input styles */
.cmv-input[data-v-03ae709b] .q-field__control {
  border-radius: 10px;
  min-height: 40px;
}
.cmv-input[data-v-03ae709b] .q-field__control:before {
  border-color: #e2e8f0;
}
.cmv-input[data-v-03ae709b] .q-field__native {
  padding: 8px 12px;
  font-size: 14px;
  color: #1e293b;
}
.cmv-input[data-v-03ae709b] .q-field__native::placeholder {
  color: #94a3b8;
}

/* Compact textarea styles */
.cmv-textarea[data-v-03ae709b] .q-field__control {
  border-radius: 10px;
}
.cmv-textarea[data-v-03ae709b] .q-field__control:before {
  border-color: #e2e8f0;
}
.cmv-textarea[data-v-03ae709b] .q-field__native {
  padding: 10px 12px;
  font-size: 14px;
  color: #1e293b;
  min-height: 60px;
}
.cmv-textarea[data-v-03ae709b] .q-field__native::placeholder {
  color: #94a3b8;
}

/* Material Type Selector */
.cmv-material-selector[data-v-03ae709b] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}
@media (min-width: 640px) {
.cmv-material-selector[data-v-03ae709b] {
    grid-template-columns: repeat(7, 1fr);
}
}
.cmv-material-type-btn[data-v-03ae709b] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: white;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}
.cmv-material-type-btn[data-v-03ae709b]:hover:not(:disabled) {
  background: #f8fafc;
}
.cmv-material-type-btn[data-v-03ae709b]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cmv-material-type-btn.active[data-v-03ae709b] {
  background: #fff1f2;
  border-color: #f43f5e;
  color: #be123c;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.cmv-material-type-btn span[data-v-03ae709b] {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 2px;
  line-height: 1.3;
}

/* Content Input */
.cmv-content-input[data-v-03ae709b] {
  margin-top: 16px;
}
.cmv-type-placeholder[data-v-03ae709b] {
  background: #f8fafc;
  border: 2px dashed #e2e8f0;
  border-radius: 12px;
  padding: 32px 24px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #94a3b8;
  font-size: 14px;
}
.cmv-type-info[data-v-03ae709b] {
  border-color: #cbd5e1;
}
.cmv-type-info .q-icon[data-v-03ae709b] {
  color: #64748b;
}
.cmv-type-info span[data-v-03ae709b] {
  color: #64748b;
  text-align: center;
  line-height: 1.4;
}
.cmv-info-box[data-v-03ae709b] {
  margin-top: 12px;
  padding: 12px 16px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #92400e;
  font-size: 13px;
}

/* Cover Upload */
.cmv-cover-upload[data-v-03ae709b] {
  position: relative;
  aspect-ratio: 3/2;
  max-height: 160px;
  background: #f8fafc;
  border-radius: 12px;
  border: 2px dashed #e2e8f0;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.cmv-cover-upload[data-v-03ae709b]:hover {
  border-color: #fda4af;
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.05);
}
.cmv-cover-preview[data-v-03ae709b] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cmv-cover-icon[data-v-03ae709b] {
  color: #94a3b8;
  margin-bottom: 8px;
  transition: all 0.2s;
}
.cmv-cover-upload:hover .cmv-cover-icon[data-v-03ae709b] {
  color: var(--q-primary);
  transform: scale(1.1);
}

/* Settings Grid */
.cmv-settings-grid[data-v-03ae709b] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.cmv-settings-grid .cmv-form-group[data-v-03ae709b] {
  margin-bottom: 0;
}

/* Params Header */
.cmv-params-header[data-v-03ae709b] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.cmv-xp-badge[data-v-03ae709b] {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fef3c7;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #fde68a;
  color: #d97706;
}
.cmv-xp-input[data-v-03ae709b] {
  width: 48px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 700;
  color: #78350f;
  text-align: right;
}

/* Hide number input spinners */
.cmv-xp-input[data-v-03ae709b]::-webkit-outer-spin-button,
.cmv-xp-input[data-v-03ae709b]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cmv-xp-input[type=number][data-v-03ae709b] {
  -moz-appearance: textfield;
}
.cmv-xp-badge span[data-v-03ae709b] {
  font-size: 12px;
  color: #b45309;
  font-weight: 500;
  line-height: 1.4;
}
.cmv-disclosure-btn[data-v-03ae709b] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s;
}
.cmv-disclosure-btn[data-v-03ae709b]:hover {
  color: #1e293b;
}

/* Advanced Settings */
.cmv-advanced-settings[data-v-03ae709b] {
  margin-top: 16px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
}
.cmv-toggle-row[data-v-03ae709b] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 8px 0;
}
.cmv-toggle-row span[data-v-03ae709b] {
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  line-height: 1.4;
}

/* Custom Toggle - exact prototype match */
.cmv-toggle[data-v-03ae709b] {
  position: relative;
  width: 40px;
  height: 20px;
  background: #cbd5e1;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.2s;
  flex-shrink: 0;
}
.cmv-toggle.active[data-v-03ae709b] {
  background: var(--q-primary);
}
.cmv-toggle-knob[data-v-03ae709b] {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 9999px;
  transition: transform 0.2s;
}
.cmv-toggle.active .cmv-toggle-knob[data-v-03ae709b] {
  transform: translateX(20px);
}
.cmv-toggle-divider[data-v-03ae709b] {
  height: 1px;
  background: #e2e8f0;
  margin: 8px 0;
}

/* Styled Select for multiple selection */
.cmv-styled-select[data-v-03ae709b] {
  background: white;
  border-radius: 10px;
}
.cmv-styled-select[data-v-03ae709b] .q-field__control {
  border-radius: 10px;
  padding-left: 8px;
  min-height: 40px;
}
.cmv-styled-select[data-v-03ae709b] .q-field__control:before {
  border-color: #e2e8f0;
}
.cmv-styled-select[data-v-03ae709b] .q-field__control:hover:before {
  border-color: var(--q-primary);
}
.cmv-styled-select[data-v-03ae709b] .q-field--focused .q-field__control:after {
  border-color: var(--q-primary);
  border-width: 2px;
}
.cmv-select-icon[data-v-03ae709b] {
  color: #94a3b8;
}
.cmv-styled-select[data-v-03ae709b] .q-field--focused .cmv-select-icon {
  color: var(--q-primary);
}

/* Workflow */
.cmv-workflow-header[data-v-03ae709b] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.cmv-add-stage-btn[data-v-03ae709b] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 10px;
  background: rgba(225, 29, 72, 0.1);
  color: #e11d48;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.cmv-add-stage-btn[data-v-03ae709b]:hover {
  background: rgba(225, 29, 72, 0.15);
}
.cmv-stages-container[data-v-03ae709b] {
  position: relative;
}
.cmv-connector-line[data-v-03ae709b] {
  position: absolute;
  left: 31px;
  top: 48px;
  bottom: 48px;
  width: 2px;
  background: #e2e8f0;
  z-index: 0;
}
.cmv-stage-row[data-v-03ae709b] {
  position: relative;
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.cmv-stage-number-col[data-v-03ae709b] {
  width: 64px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.cmv-stage-number[data-v-03ae709b] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 4px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  z-index: 10;
  line-height: 1;
}
.cmv-stage-box[data-v-03ae709b] {
  flex: 1;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 16px;
  transition: border-color 0.2s;
}
.cmv-stage-box[data-v-03ae709b]:hover {
  border-color: #fecdd3;
}
.cmv-stage-header[data-v-03ae709b] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.cmv-stage-title-input[data-v-03ae709b] {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  padding: 4px 8px;
  border-radius: 6px;
  margin-right: 8px;
}
.cmv-stage-title-input[data-v-03ae709b]:focus {
  background: white;
  box-shadow: 0 0 0 2px rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
}
.cmv-stage-delete-btn[data-v-03ae709b] {
  padding: 4px;
  border: none;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}
.cmv-stage-delete-btn[data-v-03ae709b]:hover {
  color: #ef4444;
  background: #fef2f2;
}
.cmv-approvers-list[data-v-03ae709b] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.cmv-approver-item[data-v-03ae709b] {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #f1f5f9;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
}
.cmv-approver-arrow[data-v-03ae709b] {
  position: absolute;
  top: -10px;
  left: 24px;
  color: #cbd5e1;
  background: white;
  border-radius: 50%;
  padding: 2px;
}
.cmv-approver-avatar[data-v-03ae709b] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff1f2;
  color: #e11d48;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}
.cmv-approver-info[data-v-03ae709b] {
  flex: 1;
  min-width: 0;
}
.cmv-approver-name[data-v-03ae709b] {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.cmv-approver-position[data-v-03ae709b] {
  font-size: 11px;
  color: #64748b;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.cmv-approver-remove[data-v-03ae709b] {
  padding: 4px;
  border: none;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}
.cmv-approver-remove[data-v-03ae709b]:hover {
  color: #ef4444;
}
.cmv-add-approver-btn[data-v-03ae709b] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.cmv-add-approver-btn[data-v-03ae709b]:hover {
  border-color: #fda4af;
  background: #fff1f2;
  color: #e11d48;
}

/* Footer */
.cmv-footer-actions[data-v-03ae709b] {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--q-info);
  border-top: 1px solid #e2e8f0;
  padding: 16px;
  z-index: 40;
}
.cmv-footer-content[data-v-03ae709b] {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cmv-footer-right[data-v-03ae709b] {
  display: flex;
  gap: 12px;
}

/* Footer Buttons */
.cmv-btn-cancel[data-v-03ae709b] {
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.cmv-btn-cancel[data-v-03ae709b]:hover {
  background: #f1f5f9;
  color: #334155;
}
.cmv-btn-back[data-v-03ae709b] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: var(--q-info);
  color: #475569;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.cmv-btn-back[data-v-03ae709b]:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.cmv-btn-next[data-v-03ae709b] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border-radius: 12px;
  border: none;
  background: var(--q-primary);
  color: white;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
  line-height: 1.4;
}
.cmv-btn-next[data-v-03ae709b]:hover {
  background: #be123c;
  box-shadow: 0 6px 20px rgba(var(--q-primary-rgb, 225, 29, 72), 0.4);
}
.cmv-btn-save[data-v-03ae709b] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: var(--q-info);
  color: #334155;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.cmv-btn-save[data-v-03ae709b]:hover {
  background: #f8fafc;
}
.cmv-btn-save[data-v-03ae709b]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.cmv-btn-publish[data-v-03ae709b] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border-radius: 12px;
  border: none;
  background: #16a34a;
  color: white;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3);
  line-height: 1.4;
}
.cmv-btn-publish[data-v-03ae709b]:hover {
  background: #15803d;
  box-shadow: 0 6px 20px rgba(22, 163, 74, 0.4);
}
.cmv-btn-publish[data-v-03ae709b]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Upload Section - Override Legacy Styles */
.cmv-upload-section[data-v-03ae709b] {
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Longread: stacking context above fixed footer so TinyMCE menubar (File, Edit, …) stays clickable */
.cmv-longread-wrap[data-v-03ae709b] {
  position: relative;
  z-index: 50;
}

/* Hide q-page inside type components */
.cmv-upload-section[data-v-03ae709b] .q-page {
  min-height: auto !important;
  padding: 0 !important;
}

/* Override q-card styles */
.cmv-upload-section[data-v-03ae709b] .q-card {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

/* Style the help text - small hint above */
.cmv-upload-section[data-v-03ae709b] .text-positive,
.cmv-upload-section[data-v-03ae709b] .h5.text-positive,
.cmv-upload-section[data-v-03ae709b] .q-pa-sm.h5 {
  order: -1;
  display: block;
  padding: 0 0 8px 0 !important;
  margin: 0 0 0 0 !important;
  background: transparent !important;
  border: none !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4;
}
.cmv-upload-section[data-v-03ae709b] .text-positive .q-icon,
.cmv-upload-section[data-v-03ae709b] .h5.text-positive .q-icon,
.cmv-upload-section[data-v-03ae709b] .q-pa-sm.h5 .q-icon {
  display: none;
}

/* Style the upload button as drag-and-drop zone */
.cmv-upload-section[data-v-03ae709b] .q-btn[color="primary"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 140px;
  padding: 32px 24px;
  background: #f8fafc !important;
  border: 2px dashed #cbd5e1 !important;
  border-radius: 12px !important;
  color: #94a3b8 !important;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
  box-shadow: none !important;
}
.cmv-upload-section[data-v-03ae709b] .q-btn[color="primary"]:hover {
  border-color: #fda4af !important;
  background: #fff1f2 !important;
  color: #e11d48 !important;
}

/* Hide original button text, show custom via ::before */
.cmv-upload-section[data-v-03ae709b] .q-btn[color="primary"] .q-btn__content {
  flex-direction: column;
  gap: 8px;
}
.cmv-upload-section[data-v-03ae709b] .q-btn[color="primary"] .q-btn__content::before {
  content: "cloud_upload";
  font-family: 'Material Icons';
  font-size: 28px;
  color: #94a3b8;
  transition: color 0.2s;
}
.cmv-upload-section[data-v-03ae709b] .q-btn[color="primary"]:hover .q-btn__content::before {
  color: #e11d48;
}

/* Style input fields below */
.cmv-upload-section[data-v-03ae709b] .q-field {
  margin-top: 16px;
  margin-bottom: 0;
}
.cmv-upload-section[data-v-03ae709b] .q-field__control {
  border-radius: 10px !important;
  min-height: 40px;
}
.cmv-upload-section[data-v-03ae709b] .q-field__control:before {
  border-color: #e2e8f0;
}

/* Preview area */
.cmv-upload-section[data-v-03ae709b] .row.q-mt-md {
  margin-top: 16px;
  padding: 12px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.cmv-upload-section[data-v-03ae709b] iframe {
  border-radius: 8px;
  border: 1px solid #e2e8f0 !important;
}

/* File name display when uploaded */
.cmv-upload-section[data-v-03ae709b] .row.q-mt-md.justify-center {
  flex-direction: column;
  align-items: center;
}
.cmv-upload-section[data-v-03ae709b] .text-accent.h5 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  color: #16a34a !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 12px;
}
.cmv-upload-section[data-v-03ae709b] .text-accent.h5::before {
  content: "check_circle";
  font-family: 'Material Icons';
  font-size: 18px;
}

/* Keywords chips */
.cmv-upload-section[data-v-03ae709b] .q-chip {
  background: rgba(225, 29, 72, 0.1);
  color: #e11d48;
}

/* Override lists */
.cmv-upload-section[data-v-03ae709b] .q-list {
  padding: 0;
  margin-top: 16px;
}
.cmv-upload-section[data-v-03ae709b] .q-item {
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid #e2e8f0;
  background: white;
  padding: 12px;
}

/* Warning/error text */
.cmv-upload-section[data-v-03ae709b] .text-warning {
  margin-top: 8px;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  font-size: 12px;
}

/* col-8 wrapper - make full width */
.cmv-upload-section[data-v-03ae709b] .col-8 {
  max-width: 100%;
  flex: 0 0 100%;
}

/* q-mt-sm wrapper for keywords input */
.cmv-upload-section[data-v-03ae709b] .q-mt-sm {
  margin-top: 12px !important;
}

/* Error placeholder styling */
.cmv-type-error[data-v-03ae709b] {
  border: 2px dashed #fca5a5;
  background: #fef2f2;
}
.cmv-type-error .q-icon[data-v-03ae709b] {
  color: #dc2626;
}
.cmv-type-error span[data-v-03ae709b] {
  color: #991b1b;
}
.cmv-retry-btn[data-v-03ae709b] {
  margin-top: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: var(--q-primary);
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.cmv-retry-btn[data-v-03ae709b]:hover {
  background: #be123c;
}

/* Dropzone Upload Components (New Design) */
.cmv-dropzone-container[data-v-03ae709b] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cmv-dropzone[data-v-03ae709b] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 8px;
}
.cmv-dropzone[data-v-03ae709b]:hover {
  border-color: #fda4af;
  background: #fff1f2;
}
.cmv-dropzone:hover .cmv-dropzone-icon[data-v-03ae709b] {
  color: var(--q-primary, #e11d48);
}
.cmv-dropzone-icon[data-v-03ae709b] {
  color: #94a3b8;
  transition: color 0.2s ease;
}
.cmv-dropzone-text[data-v-03ae709b] {
  font-size: 14px;
  color: #64748b;
  line-height: 1.4;
}
.cmv-dropzone-mini[data-v-03ae709b] {
  padding: 16px;
  flex-direction: row;
  gap: 8px;
}
.cmv-dropzone-mini .cmv-dropzone-text[data-v-03ae709b] {
  font-size: 13px;
}

/* File Selected State */
.cmv-file-selected[data-v-03ae709b] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.cmv-file-selected-content[data-v-03ae709b] {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.cmv-file-selected-check[data-v-03ae709b] {
  color: var(--q-primary, #e11d48);
  flex-shrink: 0;
}
.cmv-file-selected-name[data-v-03ae709b] {
  font-size: 14px;
  font-weight: 500;
  color: var(--q-primary, #e11d48);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* PDF Preview */
.cmv-pdf-preview[data-v-03ae709b] {
  width: 100%;
  height: 400px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  margin-top: 8px;
}

/* Files Grid */
.cmv-files-grid[data-v-03ae709b] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cmv-file-item[data-v-03ae709b] {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  transition: all 0.15s ease;
}
.cmv-file-item[data-v-03ae709b]:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.cmv-file-item-icon[data-v-03ae709b] {
  color: var(--q-primary, #e11d48);
  flex-shrink: 0;
}
.cmv-file-item-info[data-v-03ae709b] {
  flex: 1;
  min-width: 0;
}
.cmv-file-item-name[data-v-03ae709b] {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.cmv-file-item-size[data-v-03ae709b] {
  display: block;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}

/* Legacy styles for compatibility */
.cmv-inline-upload[data-v-03ae709b] {
  background: #f8fafc;
  border: 2px dashed #e2e8f0;
  border-radius: 12px;
  padding: 24px;
}
.cmv-file-card[data-v-03ae709b] {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}
.cmv-file-info[data-v-03ae709b] {
  flex: 1;
  min-width: 0;
}
.cmv-file-name[data-v-03ae709b] {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.cmv-file-size[data-v-03ae709b] {
  display: block;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}

/* Approver Modal */
.cmv-approver-modal[data-v-03ae709b] {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.cmv-modal-header[data-v-03ae709b] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}
.cmv-modal-title[data-v-03ae709b] {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.4;
}
.cmv-modal-body[data-v-03ae709b] {
  padding: 8px;
}
.cmv-modal-loading[data-v-03ae709b] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px;
}
.cmv-modal-list[data-v-03ae709b] {
  max-height: 360px;
  overflow-y: auto;
}
.cmv-modal-empty[data-v-03ae709b] {
  text-align: center;
  padding: 32px;
  color: #64748b;
  font-size: 14px;
}
.cmv-user-item[data-v-03ae709b] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.cmv-user-item[data-v-03ae709b]:hover {
  background: #fff1f2;
}
.cmv-user-avatar[data-v-03ae709b] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-shrink: 0;
  overflow: hidden;
  transition: all 0.15s;
}
.cmv-user-item:hover .cmv-user-avatar[data-v-03ae709b] {
  background: white;
  color: #e11d48;
}
.cmv-user-avatar img[data-v-03ae709b] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cmv-user-info[data-v-03ae709b] {
  flex: 1;
  min-width: 0;
}
.cmv-user-name[data-v-03ae709b] {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmv-user-position[data-v-03ae709b] {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmv-add-icon[data-v-03ae709b] {
  color: #e11d48;
  opacity: 0;
  transition: opacity 0.15s;
}
.cmv-user-item:hover .cmv-add-icon[data-v-03ae709b] {
  opacity: 1;
}

/* Media / iframe styles */
.cmv-media-container[data-v-03ae709b] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cmv-media-hint[data-v-03ae709b] {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}
.cmv-iframe-input[data-v-03ae709b] .q-field__control {
  border-radius: 10px;
}
.cmv-iframe-input[data-v-03ae709b] textarea {
  font-family: monospace;
  font-size: 13px;
  min-height: 80px;
}
.cmv-iframe-preview[data-v-03ae709b] {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #f8fafc;
}
.cmv-iframe-wrapper[data-v-03ae709b] {
  width: 100%;
  max-width: 100%;
}
.cmv-iframe-wrapper[data-v-03ae709b] iframe {
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
}
.cmv-iframe-error[data-v-03ae709b] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  color: #991b1b;
  font-size: 13px;
  line-height: 1.4;
}

/* Links styles */
.cmv-links-container[data-v-03ae709b] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cmv-links-list[data-v-03ae709b] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cmv-link-item[data-v-03ae709b] {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}
.cmv-link-icon[data-v-03ae709b] {
  color: var(--q-primary, #e11d48);
  flex-shrink: 0;
}
.cmv-link-info[data-v-03ae709b] {
  flex: 1;
  min-width: 0;
}
.cmv-link-title[data-v-03ae709b] {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.cmv-link-url[data-v-03ae709b] {
  display: block;
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  text-decoration: none;
}
.cmv-link-url[data-v-03ae709b]:hover {
  color: var(--q-primary, #e11d48);
  text-decoration: underline;
}
.cmv-add-link-form[data-v-03ae709b] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.cmv-link-input[data-v-03ae709b] .q-field__control {
  border-radius: 8px;
  background: white;
}

/* Longread styles */
.cmv-longread-placeholder[data-v-03ae709b] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: #f8fafc;
  border: 2px dashed #e2e8f0;
  border-radius: 12px;
  text-align: center;
}
.cmv-longread-icon[data-v-03ae709b] {
  color: #94a3b8;
  margin-bottom: 12px;
}
.cmv-longread-title[data-v-03ae709b] {
  font-size: 16px;
  font-weight: 600;
  color: #334155;
  margin: 0 0 8px 0;
  line-height: 1.4;
}
.cmv-longread-hint[data-v-03ae709b] {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

/* Dropzone subtext (for SCORM .zip) */
.cmv-dropzone-subtext[data-v-03ae709b] {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 4px;
}

/* Field with action button (shelf + create button) */
.cmv-field-with-action[data-v-03ae709b] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cmv-field-grow[data-v-03ae709b] {
  flex: 1;
  min-width: 0;
}
.cmv-add-btn[data-v-03ae709b] {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
  color: var(--q-primary);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.cmv-add-btn[data-v-03ae709b]:hover {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.2);
  transform: scale(1.05);
}


.loading-state[data-v-6ddb551d] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px;
}
.create-program-container[data-v-6ddb551d] {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  padding-bottom: 96px;
  position: relative;
  min-height: 600px;
}

/* Loading Overlay */
.loading-overlay[data-v-6ddb551d] {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--q-info) 95%, transparent);
  z-index: 1000;
  min-height: 600px;
}
.loading-text[data-v-6ddb551d] {
  margin-top: 16px;
  font-size: 16px;
  color: var(--q-positive);
  font-weight: 500;
}

/* Header */
.header[data-v-6ddb551d] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.title[data-v-6ddb551d] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 4px 0;
  line-height: 1.3;
}
.subtitle[data-v-6ddb551d] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
  line-height: 1.5;
}

/* Step Indicator */
.step-indicator[data-v-6ddb551d] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.step-item[data-v-6ddb551d] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.step-line[data-v-6ddb551d] {
  height: 6px;
  width: 100%;
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  transition: all 0.5s;
}
.step-line.step-active[data-v-6ddb551d] {
  background-color: var(--q-primary);
}
.step-line.step-completed[data-v-6ddb551d] {
  background-color: var(--q-primary);
}
.step-label[data-v-6ddb551d] {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: var(--q-positive);
  transition: color 0.3s;
  line-height: 1.4;
}
.step-label.step-label-active[data-v-6ddb551d] {
  color: var(--q-accent);
}

/* Step Content */
.step-content[data-v-6ddb551d] {
  animation: fadeIn-6ddb551d 0.3s ease-out;
}
.basics-step[data-v-6ddb551d] {
  max-width: 768px;
  margin: 0 auto;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 32px;
}

/* Form Elements */
.form-group[data-v-6ddb551d] {
  margin-bottom: 24px;
}
.form-label[data-v-6ddb551d] {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  margin-bottom: 12px;
  line-height: 1.4;
}
.required-star[data-v-6ddb551d] {
  color: var(--q-primary);
}
.logo-uploader[data-v-6ddb551d] {
  height: 128px;
  background-color: var(--q-dark);
  border-radius: 12px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
}
.logo-uploader[data-v-6ddb551d]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 60%, transparent);
  background-color: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
}
.logo-preview-container[data-v-6ddb551d] {
  position: relative;
  height: 128px;
  border-radius: 12px;
  overflow: hidden;
}
.logo-image[data-v-6ddb551d] {
  width: 100%;
  height: 128px;
  border: 1px dashed color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
}
.logo-remove-btn[data-v-6ddb551d] {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: var(--q-primary);
  color: var(--q-negative);
  z-index: 10;
}
.logo-remove-btn[data-v-6ddb551d]:hover {
  background-color: var(--q-primary);
  opacity: 0.9;
}
.upload-text[data-v-6ddb551d] {
  font-size: 12px;
  font-weight: 500;
  margin-top: 8px;
  line-height: 1.4;
}
.hidden-input[data-v-6ddb551d] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.row[data-v-6ddb551d] {
  display: flex;
  flex-wrap: wrap;
  margin: -12px;
}
.col-12[data-v-6ddb551d] {
  flex: 0 0 100%;
  padding: 12px;
}
@media (min-width: 768px) {
.col-md-6[data-v-6ddb551d] {
    flex: 0 0 50%;
}
}

/* Custom Quasar overrides */
[data-v-6ddb551d] .custom-input .q-field__control,[data-v-6ddb551d] .custom-select .q-field__control,[data-v-6ddb551d] .custom-textarea .q-field__control {
  border-radius: 12px;
}
[data-v-6ddb551d] .custom-textarea .q-field__native {
  min-height: 80px;
  resize: vertical;
}

/* Content Step */
.content-header[data-v-6ddb551d] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.content-title[data-v-6ddb551d] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  display: flex;
  align-items: center;
  line-height: 1.4;
}
.content-title-icon[data-v-6ddb551d] {
  color: var(--q-primary);
}
.card-title-icon-warning[data-v-6ddb551d] {
  color: var(--q-warning);
}
.card-title-icon-secondary[data-v-6ddb551d] {
  color: var(--q-secondary);
}
.points-icon[data-v-6ddb551d] {
  color: var(--q-warning);
}
.item-icon-secondary[data-v-6ddb551d] {
  background: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
  color: var(--q-secondary);
}
.item-icon-success[data-v-6ddb551d] {
  background: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  color: var(--q-success);
}
.icon-bg-primary[data-v-6ddb551d] {
  background: color-mix(in srgb, var(--q-primary) 15%, var(--q-info)) !important;
}
.add-stage-btn[data-v-6ddb551d] {
  padding: 8px 16px;
  background-color: color-mix(in srgb, var(--q-primary) 12%, var(--q-info));
  color: var(--q-primary);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}
.add-stage-btn[data-v-6ddb551d]:hover {
  background-color: color-mix(in srgb, var(--q-primary) 18%, var(--q-info));
}
.two-column-layout[data-v-6ddb551d] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  min-height: 600px;
  margin-top: 24px;
}
.left-column[data-v-6ddb551d] {
  border-right: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  padding-right: 32px;
  overflow-y: auto;
  max-height: calc(100vh - 300px);
}
.right-column[data-v-6ddb551d] {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 32px;
  max-height: calc(100vh - 300px);
}
.modules-tabs[data-v-6ddb551d] {
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  flex-shrink: 0;
}
.modules-tabs[data-v-6ddb551d] .q-tabs {
  min-height: 48px;
}
.modules-tabs[data-v-6ddb551d] .q-tab {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-positive);
  text-transform: none;
  padding: 12px 16px;
}
.modules-tabs[data-v-6ddb551d] .q-tab--active {
  color: var(--q-primary);
}
.modules-tabs[data-v-6ddb551d] .q-tab__indicator {
  background-color: var(--q-primary);
}
.modules-search[data-v-6ddb551d] {
  padding: 0;
  flex-shrink: 0;
}
.modules-content[data-v-6ddb551d] {
  flex: 1;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  border-radius: 12px;
  padding: 16px;
  background-color: var(--q-dark);
  min-height: 400px;
  max-height: calc(100vh - 450px);
}
.add-stage-btn-bottom[data-v-6ddb551d] {
  padding: 12px 24px;
  background-color: color-mix(in srgb, var(--q-primary) 12%, var(--q-info));
  color: var(--q-primary);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
}
.add-stage-btn-bottom[data-v-6ddb551d]:hover {
  background-color: color-mix(in srgb, var(--q-primary) 18%, var(--q-info));
}
.stages-container[data-v-6ddb551d] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.draggable-stages[data-v-6ddb551d] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.stage-wrapper[data-v-6ddb551d] {
  position: relative;
}
.stage-connector[data-v-6ddb551d] {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--q-positive);
}
.connector-line[data-v-6ddb551d] {
  height: 12px;
  width: 2px;
  background-color: var(--q-positive);
}
.connector-icon[data-v-6ddb551d] {
  margin: 4px 0;
}
.stage-card[data-v-6ddb551d] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  overflow: hidden;
  transition: all 0.2s;
}
.stage-card[data-v-6ddb551d]:hover {
  box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--q-accent) 15%, transparent);
}
.stage-header[data-v-6ddb551d] {
  padding: 16px;
  border-bottom: 1px solid var(--q-dark);
  background-color: var(--q-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stage-info[data-v-6ddb551d] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stage-number[data-v-6ddb551d] {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  color: var(--q-positive);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stage-title[data-v-6ddb551d] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  line-height: 1.4;
}
.stage-type[data-v-6ddb551d] {
  font-size: 12px;
  color: var(--q-positive);
  font-weight: 500;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  line-height: 1.4;
}
.remove-stage-btn[data-v-6ddb551d] {
  color: var(--q-positive);
}
.remove-stage-btn[data-v-6ddb551d]:hover {
  color: var(--q-primary);
}
.stage-content[data-v-6ddb551d] {
  padding: 16px;
}
.add-stage-bottom[data-v-6ddb551d] {
  display: flex;
  justify-content: center;
  padding-top: 16px;
}
.modules-list[data-v-6ddb551d] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modules-list.is-dragging[data-v-6ddb551d] {
  min-height: 100px;
  border: 2px dashed color-mix(in srgb, var(--q-primary) 50%, transparent);
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
  padding: 8px;
}
.module-item[data-v-6ddb551d] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: var(--q-info);
  border: 1px solid var(--q-dark);
  border-radius: 12px;
  transition: all 0.2s;
}
.module-item[data-v-6ddb551d]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, transparent);
}
@media (min-width: 640px) {
.module-item[data-v-6ddb551d] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
}
.module-main[data-v-6ddb551d] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.drag-handle[data-v-6ddb551d] {
  color: var(--q-positive);
  cursor: move;
}
.module-icon[data-v-6ddb551d] {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: var(--q-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
  border: 1px solid var(--q-dark);
  flex-shrink: 0;
}
.module-info[data-v-6ddb551d] {
  min-width: 0;
}
.module-title[data-v-6ddb551d] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.module-duration[data-v-6ddb551d] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 0;
  line-height: 1.4;
}
.module-settings[data-v-6ddb551d] {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--q-dark);
  padding-top: 12px;
  margin-top: 12px;
}
@media (min-width: 640px) {
.module-settings[data-v-6ddb551d] {
    border-top: none;
    border-left: 1px solid var(--q-dark);
    padding-top: 0;
    padding-left: 16px;
    margin-top: 0;
}
}
.days-input[data-v-6ddb551d] {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  border-radius: 8px;
  padding: 8px 12px;
  transition: all 0.2s;
}
.days-input[data-v-6ddb551d]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 40%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-primary) 10%, transparent);
}
.days-label[data-v-6ddb551d] {
  font-size: 13px;
  color: var(--q-positive);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.5;
  margin-right: 14px;
}
.days-field[data-v-6ddb551d] {
  width: 70px;
}
[data-v-6ddb551d] .days-field .q-field__control {
  height: 32px;
  min-height: 32px;
  border-radius: 6px;
  background-color: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
}
[data-v-6ddb551d] .days-field input {
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--q-accent);
}
[data-v-6ddb551d] .days-field .q-field__control:hover {
  background-color: var(--q-info);
  border-color: var(--q-positive);
}
.remove-module-btn[data-v-6ddb551d] {
  color: var(--q-positive);
  margin-left: auto;
}
.remove-module-btn[data-v-6ddb551d]:hover {
  color: var(--q-primary);
}
.empty-stage[data-v-6ddb551d] {
  text-align: center;
  padding: 20px 16px;
  color: var(--q-positive);
  font-size: 13px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  line-height: 1.5;
  background-color: var(--q-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-module-btn[data-v-6ddb551d] {
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  color: var(--q-positive);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
}
.add-module-btn[data-v-6ddb551d]:hover {
  background-color: var(--q-dark);
  color: var(--q-primary);
  border-color: color-mix(in srgb, var(--q-primary) 30%, transparent);
}
.add-stage-bottom[data-v-6ddb551d] {
  display: flex;
  justify-content: center;
  padding-top: 16px;
}
.add-stage-circle[data-v-6ddb551d] {
  width: 40px;
  height: 40px;
  background-color: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  color: var(--q-positive);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.add-stage-circle[data-v-6ddb551d]:hover {
  background-color: color-mix(in srgb, var(--q-primary) 12%, var(--q-info));
  color: var(--q-primary);
}

/* Settings Step */
.settings-step[data-v-6ddb551d] {
  max-width: 768px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.settings-card[data-v-6ddb551d] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  padding: 24px;
}
.card-header[data-v-6ddb551d] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.card-title[data-v-6ddb551d] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  display: flex;
  align-items: center;
  line-height: 1.4;
}
.gamification-content[data-v-6ddb551d],
.template-content[data-v-6ddb551d] {
  margin-top: 16px;
  padding: 20px;
  background-color: color-mix(in srgb, var(--q-warning) 20%, var(--q-info));
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-warning) 40%, transparent);
}
.template-content[data-v-6ddb551d] {
  background-color: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
  border-color: color-mix(in srgb, var(--q-secondary) 40%, transparent);
}
.settings-group[data-v-6ddb551d] {
  margin-bottom: 20px;
}
.group-label[data-v-6ddb551d] {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
  text-transform: uppercase;
  margin-bottom: 12px;
  line-height: 1.4;
}
.radio-group[data-v-6ddb551d] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 640px) {
.radio-group[data-v-6ddb551d] {
    flex-direction: row;
}
}
.radio-item[data-v-6ddb551d] {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.radio-label[data-v-6ddb551d] {
  font-size: 14px;
  font-weight: 500;
  color: var(--q-accent);
  line-height: 1.5;
}
.manual-points-container[data-v-6ddb551d] {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-warning) 40%, transparent);
  border-radius: 8px;
  padding: 8px 12px;
  transition: all 0.2s;
}
.manual-points-container[data-v-6ddb551d]:hover {
  border-color: color-mix(in srgb, var(--q-warning) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-warning) 10%, transparent);
}
.points-input[data-v-6ddb551d] {
  width: 80px;
}
[data-v-6ddb551d] .points-input .q-field__control {
  height: 32px;
  min-height: 32px;
  padding: 0;
}
[data-v-6ddb551d] .points-input input {
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--q-accent);
  padding: 0 8px;
}
.points-suffix[data-v-6ddb551d] {
  font-size: 13px;
  color: var(--q-warning);
  font-weight: 700;
  line-height: 1.5;
}
.divider[data-v-6ddb551d] {
  height: 1px;
  background-color: color-mix(in srgb, var(--q-warning) 40%, transparent);
  margin: 20px 0;
}
.template-content .divider[data-v-6ddb551d] {
  background-color: color-mix(in srgb, var(--q-secondary) 40%, transparent);
}
.button-group[data-v-6ddb551d] {
  display: flex;
  gap: 8px;
}
.toggle-btn[data-v-6ddb551d] {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  background: var(--q-info);
  line-height: 1.5;
}
.toggle-btn.active[data-v-6ddb551d] {
  background-color: color-mix(in srgb, var(--q-warning) 25%, var(--q-info));
  border-color: color-mix(in srgb, var(--q-warning) 60%, transparent);
  color: var(--q-warning);
}
.template-types[data-v-6ddb551d] {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-direction: column;
}
@media (min-width: 640px) {
.template-types[data-v-6ddb551d] {
    flex-direction: row;
}
}
.template-type[data-v-6ddb551d] {
  flex: 1;
  padding: 12px;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.template-type.selected[data-v-6ddb551d] {
  background: var(--q-info);
  border-color: color-mix(in srgb, var(--q-secondary) 50%, transparent);
}
.type-header[data-v-6ddb551d] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.type-title[data-v-6ddb551d] {
  font-weight: 700;
  font-size: 14px;
  color: var(--q-accent);
  line-height: 1.5;
}
.type-description[data-v-6ddb551d] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 0;
  padding-left: 28px;
  line-height: 1.5;
}
.group-selector[data-v-6ddb551d] {
  margin-top: 16px;
}
.select-group-btn[data-v-6ddb551d] {
  width: 100%;
  padding: 12px;
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-secondary) 40%, transparent);
  border-radius: 12px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--q-accent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1.5;
}
.select-group-btn[data-v-6ddb551d]:hover {
  border-color: color-mix(in srgb, var(--q-secondary) 60%, transparent);
}
.delay-selector[data-v-6ddb551d] {
  margin-top: 16px;
}
.delay-input-container[data-v-6ddb551d] {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-secondary) 40%, transparent);
  border-radius: 8px;
  padding: 8px 12px;
  transition: all 0.2s;
}
.delay-input-container[data-v-6ddb551d]:hover {
  border-color: color-mix(in srgb, var(--q-secondary) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-secondary) 10%, transparent);
}
.delay-field[data-v-6ddb551d] {
  width: 80px;
}
[data-v-6ddb551d] .delay-field .q-field__control {
  height: 32px;
  min-height: 32px;
  padding: 0;
}
[data-v-6ddb551d] .delay-field input {
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--q-accent);
  padding: 0 8px;
}
.delay-label[data-v-6ddb551d] {
  font-size: 13px;
  color: var(--q-positive);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.5;
}
.card-item[data-v-6ddb551d] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.item-left[data-v-6ddb551d] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.item-icon[data-v-6ddb551d] {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-info[data-v-6ddb551d] {
  display: flex;
  flex-direction: column;
}
.item-title[data-v-6ddb551d] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  line-height: 1.5;
}
.item-subtitle[data-v-6ddb551d] {
  font-size: 12px;
  color: var(--q-positive);
  line-height: 1.5;
}
.unlock-options[data-v-6ddb551d] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (min-width: 768px) {
.unlock-options[data-v-6ddb551d] {
    grid-template-columns: repeat(2, 1fr);
}
}
.unlock-option[data-v-6ddb551d] {
  padding: 16px;
  border: 2px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.unlock-option.selected[data-v-6ddb551d] {
  border-color: color-mix(in srgb, var(--q-primary) 50%, transparent);
  background-color: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
}
.option-content[data-v-6ddb551d] {
  flex: 1;
}
.option-title[data-v-6ddb551d] {
  font-weight: 700;
  font-size: 14px;
  color: var(--q-accent);
  margin-bottom: 4px;
  line-height: 1.5;
}
.option-description[data-v-6ddb551d] {
  font-size: 12px;
  color: var(--q-positive);
  line-height: 1.5;
}

/* Footer Navigation */
.footer-nav[data-v-6ddb551d] {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--q-info);
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  padding: 16px;
  z-index: 40;
}
.nav-container[data-v-6ddb551d] {
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-btn[data-v-6ddb551d] {
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}
.prev-btn[data-v-6ddb551d] {
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  color: var(--q-positive);
}
.prev-btn[data-v-6ddb551d]:hover:not(:disabled) {
  background-color: var(--q-dark);
}
.prev-btn[data-v-6ddb551d]:disabled {
  opacity: 0.5;
}
.next-btn[data-v-6ddb551d] {
  background-color: var(--q-primary);
  color: var(--q-negative);
  box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--q-primary) 20%, transparent);
}
.next-btn[data-v-6ddb551d]:hover {
  background-color: var(--q-primary);
  opacity: 0.9;
}
.action-buttons[data-v-6ddb551d] {
  display: flex;
  gap: 12px;
}
.action-btn[data-v-6ddb551d] {
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}
.draft-btn[data-v-6ddb551d] {
  border: 1px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  color: var(--q-accent);
}
.publish-btn[data-v-6ddb551d] {
  background-color: var(--q-primary);
  color: var(--q-negative);
  box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--q-primary) 20%, transparent);
}
.publish-btn[data-v-6ddb551d]:hover {
  background-color: var(--q-primary);
  opacity: 0.9;
}

/* Modal */
.modal-container[data-v-6ddb551d] {
  background: var(--q-info);
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-header[data-v-6ddb551d] {
  padding: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--q-dark);
}
.modal-title[data-v-6ddb551d] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 1.4;
}
.modal-close[data-v-6ddb551d] {
  color: var(--q-positive);
}
.modal-close[data-v-6ddb551d]:hover {
  background-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.modal-tabs[data-v-6ddb551d] {
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  overflow-x: auto;
}
.content-tabs {
[data-v-6ddb551d] .q-tab {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-height: auto;
}
[data-v-6ddb551d] .q-tab--active {
    color: var(--q-primary);
}
[data-v-6ddb551d] .q-tab__indicator {
    background-color: var(--q-primary);
}
}
.modal-search[data-v-6ddb551d] {
  padding: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.search-input {
[data-v-6ddb551d] .q-field__control {
    border-radius: 12px;
}
}
.modal-content-list[data-v-6ddb551d] {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.content-items[data-v-6ddb551d] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}
.content-items-split[data-v-6ddb551d] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  height: 100%;
  padding: 8px;
}
.shelves-column[data-v-6ddb551d],
.items-column[data-v-6ddb551d] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 12px;
  border-right: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  background-color: var(--q-info);
  border-radius: 8px;
}
.items-column[data-v-6ddb551d] {
  border-right: none;
}
.column-title[data-v-6ddb551d] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-primary);
  text-align: center;
  padding: 8px 0;
  border-bottom: 2px solid var(--q-primary);
  margin-bottom: 8px;
}
.content-item[data-v-6ddb551d] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.content-item[data-v-6ddb551d]:hover {
  background-color: var(--q-dark);
}
.content-item .item-icon[data-v-6ddb551d] {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  flex-shrink: 0;
}
.item-details[data-v-6ddb551d] {
  flex: 1;
  min-width: 0;
}
.item-name[data-v-6ddb551d] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.item-duration[data-v-6ddb551d] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 0;
  line-height: 1.4;
}
.add-icon[data-v-6ddb551d] {
  color: var(--q-primary);
  opacity: 0;
  transition: opacity 0.2s;
}
.content-item:hover .add-icon[data-v-6ddb551d] {
  opacity: 1;
}
.empty-content[data-v-6ddb551d] {
  text-align: center;
  padding: 32px;
  color: var(--q-positive);
  font-size: 14px;
  line-height: 1.5;
}

/* Group Modal */
.group-modal[data-v-6ddb551d] {
  background: var(--q-info);
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  width: 100%;
}
.group-modal-title[data-v-6ddb551d] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 16px 0;
  line-height: 1.4;
}
.group-list[data-v-6ddb551d] {
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 16px;
}
.group-item[data-v-6ddb551d] {
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--q-accent);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}
.group-item[data-v-6ddb551d]:hover {
  background-color: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
}
.group-modal-cancel[data-v-6ddb551d] {
  width: 100%;
  padding: 8px;
  color: var(--q-positive);
}
.group-modal-cancel[data-v-6ddb551d]:hover {
  color: var(--q-accent);
}

/* Animations */
@keyframes fadeIn-6ddb551d {
from {
    opacity: 0;
    transform: translateY(10px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Utility classes - use theme variables (roseColorScheme / defaultColorScheme) */
.text-rose-500[data-v-6ddb551d],
.text-primary[data-v-6ddb551d] {
  color: var(--q-primary);
}
.text-rose-600[data-v-6ddb551d] {
  color: var(--q-primary);
}
.text-amber-500[data-v-6ddb551d],
.text-warning[data-v-6ddb551d] {
  color: var(--q-warning);
}
.text-blue-500[data-v-6ddb551d],
.text-secondary[data-v-6ddb551d] {
  color: var(--q-secondary);
}
.text-indigo-600[data-v-6ddb551d] {
  color: var(--q-secondary);
}
.text-emerald-600[data-v-6ddb551d] {
  color: var(--q-success);
}
.text-purple-500[data-v-6ddb551d] {
  color: var(--q-secondary);
}
.text-orange-500[data-v-6ddb551d] {
  color: var(--q-warning);
}
.text-grey-5[data-v-6ddb551d],
.text-grey-6[data-v-6ddb551d],
.text-grey-7[data-v-6ddb551d],
.text-grey-9[data-v-6ddb551d] {
  color: var(--q-positive);
}
.bg-rose-50[data-v-6ddb551d] {
  background-color: color-mix(in srgb, var(--q-primary) 12%, var(--q-info));
}
.bg-indigo-50[data-v-6ddb551d] {
  background-color: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
}
.bg-emerald-50[data-v-6ddb551d] {
  background-color: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
}
.bg-amber-50[data-v-6ddb551d] {
  background-color: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
}
.q-mr-sm[data-v-6ddb551d] {
  margin-right: 8px;
}
.q-mb-xs[data-v-6ddb551d] {
  margin-bottom: 4px;
}
.q-mb-sm[data-v-6ddb551d] {
  margin-bottom: 8px;
}
.q-mb-md[data-v-6ddb551d] {
  margin-bottom: 16px;
}
.q-mb-lg[data-v-6ddb551d] {
  margin-bottom: 24px;
}
.q-pa-lg[data-v-6ddb551d] {
  padding: 24px;
}


/* Unscoped: for SelectionModal icon background when used with icon-bg-class */
.icon-bg-primary {
  background-color: color-mix(in srgb, var(--q-primary) 15%, var(--q-info)) !important;
}


.action-btn[data-v-a5d3742e] {
  color: var(--q-positive);
  background: transparent;
  transition: all 0.2s;
  padding: 0.5rem;
}
.action-btn-blue[data-v-a5d3742e]:hover {
  color: var(--q-primary);
  background-color: color-mix(in srgb, var(--q-primary) 15%, transparent);
}
.action-btn-teal[data-v-a5d3742e]:hover {
  color: var(--q-success);
  background-color: color-mix(in srgb, var(--q-success) 15%, transparent);
}


/* Modal Styles */
.confirm-modal-card[data-v-30fbe136] {
  min-width: 400px;
  max-width: 500px;
  width: 100%;
  border-radius: 1rem;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.confirm-ok-btn[data-v-30fbe136] {
  background-color: var(--q-primary);
  color: var(--q-info);
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.2s;
}
.confirm-ok-btn[data-v-30fbe136]:hover {
  background-color: color-mix(in srgb, var(--q-primary) 85%, black);
  transform: translateY(-1px);
}
.confirm-ok-btn[data-v-30fbe136]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cancel-btn[data-v-30fbe136] {
  color: var(--q-positive);
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.2s;
}
.cancel-btn[data-v-30fbe136]:hover {
  background-color: var(--q-dark);
  color: var(--q-accent);
}
.text-slate-900[data-v-30fbe136] {
  color: var(--q-accent);
}
.text-slate-600[data-v-30fbe136] {
  color: var(--q-positive);
}
.text-primary[data-v-30fbe136] {
  color: var(--q-primary);
}
.filter-select[data-v-30fbe136] {
  width: 100%;
  font-size: 14px;
  font-weight: 500;
}
.filter-select[data-v-30fbe136] .q-field__control {
  background: var(--q-dark);
  border-radius: 12px;
}
.filter-select[data-v-30fbe136] .q-field__control:hover {
  background: var(--q-info);
}
@media (max-width: 600px) {
.confirm-modal-card[data-v-30fbe136] {
    min-width: 90vw;
}
}


.catalog-container[data-v-d85f6b1c] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-d85f6b1c 0.5s ease-in-out;
}
@keyframes fadeIn-d85f6b1c {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Header */
.catalog-header[data-v-d85f6b1c] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 24px;
}
.header-top[data-v-d85f6b1c] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
.header-top[data-v-d85f6b1c] {
    flex-direction: row;
    align-items: center;
}
}
.header-left[data-v-d85f6b1c] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-icon[data-v-d85f6b1c] {
  width: 40px;
  height: 40px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.header-title[data-v-d85f6b1c] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  line-height: 30px;
  margin: 0;
}
.header-actions[data-v-d85f6b1c] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-action[data-v-d85f6b1c] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  background: var(--q-dark);
  color: var(--q-positive);
  transition: all 0.3s;
}
.btn-action[data-v-d85f6b1c]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  color: var(--q-accent);
}
.add-btn[data-v-d85f6b1c] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  box-shadow: 0 4px 8px color-mix(in srgb, var(--q-primary) 15%, transparent);
}
.add-btn[data-v-d85f6b1c]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 85%, black) !important;
}
.btn-refresh[data-v-d85f6b1c] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  background: var(--q-dark);
  color: var(--q-positive);
  transition: all 0.3s;
}
.btn-refresh[data-v-d85f6b1c]:hover:not(.btn-refreshing) {
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  color: var(--q-accent);
}
.btn-refreshing[data-v-d85f6b1c] {
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-dark));
  color: color-mix(in srgb, var(--q-positive) 60%, transparent);
  cursor: wait;
}
.icon-spin[data-v-d85f6b1c] {
  animation: spin-d85f6b1c 1s linear infinite;
}
@keyframes spin-d85f6b1c {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}

/* Filters */
.filters-bar[data-v-d85f6b1c] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
.filters-bar[data-v-d85f6b1c] {
    grid-template-columns: 1fr 1fr;
}
}
.filter-select[data-v-d85f6b1c] {
  font-size: 14px;
  font-weight: 500;
}
.filter-select[data-v-d85f6b1c] .q-field__control {
  background: var(--q-dark);
  border-radius: 12px;
}
.filter-select[data-v-d85f6b1c] .q-field__control:hover {
  background: var(--q-info);
}

/* Loading State */
.loading-state[data-v-d85f6b1c] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 64px;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.loading-text[data-v-d85f6b1c] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
}

/* Grid */
.catalog-grid[data-v-d85f6b1c] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
.catalog-grid[data-v-d85f6b1c] {
    grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.catalog-grid[data-v-d85f6b1c] {
    grid-template-columns: 1fr 1fr 1fr;
}
}
.course-card[data-v-d85f6b1c] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.3s;
}
.course-card[data-v-d85f6b1c]:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  transform: translateY(-4px);
}
.course-image[data-v-d85f6b1c] {
  aspect-ratio: 16 / 9;
  background: var(--q-dark);
  position: relative;
  overflow: hidden;
}
.course-img[data-v-d85f6b1c] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.course-card:hover .course-img[data-v-d85f6b1c] {
  transform: scale(1.05);
}
.course-image-placeholder[data-v-d85f6b1c] {
  width: 100%;
  height: 100%;
  background: var(--q-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
  opacity: 0.3;
}
.status-badge-container[data-v-d85f6b1c] {
  position: absolute;
  top: 12px;
  right: 12px;
}
.status-badge[data-v-d85f6b1c] {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--q-success);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid color-mix(in srgb, var(--q-success) 40%, var(--q-info));
}
.status-badge.status-draft[data-v-d85f6b1c] {
  color: var(--q-warning);
  border-color: color-mix(in srgb, var(--q-warning) 40%, var(--q-info));
}
.section-badge-container[data-v-d85f6b1c] {
  position: absolute;
  bottom: 12px;
  left: 12px;
}
.section-badge[data-v-d85f6b1c] {
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  font-size: 10px;
  font-weight: 700;
  color: var(--q-info);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Content */
.course-content[data-v-d85f6b1c] {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.course-header[data-v-d85f6b1c] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.course-id-badge[data-v-d85f6b1c] {
  font-size: 10px;
  font-weight: 700;
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  padding: 2px 6px;
  border-radius: 4px;
}
.course-title[data-v-d85f6b1c] {
  font-weight: 700;
  color: var(--q-accent);
  font-size: 18px;
  line-height: 20px;
  transition: color 0.2s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 10px 0;
}
.course-card:hover .course-title[data-v-d85f6b1c] {
  color: var(--q-primary);
}
.course-meta[data-v-d85f6b1c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.course-date-info[data-v-d85f6b1c] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--q-positive);
}
.course-footer[data-v-d85f6b1c] {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.course-rating-title[data-v-d85f6b1c] {
  font-size: 10px;
  color: var(--q-positive);
  text-transform: uppercase;
  font-weight: 700;
}
.course-rating-wrapper[data-v-d85f6b1c] {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  background: transparent;
}
.course-rating-wrapper[data-v-d85f6b1c]:hover {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
}
.course-rating-wrapper[data-v-d85f6b1c] .q-rating {
  font-size: 1.1em;
}
.course-rating-wrapper[data-v-d85f6b1c] .q-rating__icon {
  transition:
    transform 0.15s ease,
    color 0.15s ease;
}
.course-rating-wrapper[data-v-d85f6b1c]:hover .q-rating__icon {
  transform: scale(1.15);
}
.course-rating-wrapper[data-v-d85f6b1c] .q-rating__icon--active {
  color: var(--q-warning);
}

/* Card Actions */
.card-actions[data-v-d85f6b1c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 10px 16px;
}
.action-btn[data-v-d85f6b1c] {
  color: var(--q-positive);
  background: transparent;
  transition: all 0.2s;
  padding: 0.5rem;
}
.action-btn-indigo[data-v-d85f6b1c]:hover {
  color: var(--q-secondary);
  background-color: color-mix(in srgb, var(--q-secondary) 15%, transparent);
}
.action-btn-red[data-v-d85f6b1c]:hover {
  color: var(--q-primary);
  background-color: color-mix(in srgb, var(--q-negative) 15%, transparent);
}

/* Closed Groups */
.closed-groups[data-v-d85f6b1c] {
  padding: 16px 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--q-warning) 12%, var(--q-info)) 0%, color-mix(in srgb, var(--q-warning) 6%, var(--q-info)) 100%);
  border-top: 1px solid color-mix(in srgb, var(--q-warning) 20%, var(--q-info));
}
.closed-groups-header[data-v-d85f6b1c] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.closed-groups-icon[data-v-d85f6b1c] {
  width: 24px;
  height: 24px;
  background: color-mix(in srgb, var(--q-warning) 20%, var(--q-info));
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-warning);
}
.closed-groups-title[data-v-d85f6b1c] {
  font-size: 12px;
  font-weight: 700;
  color: var(--q-warning);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.closed-groups-count[data-v-d85f6b1c] {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}
.closed-groups-list[data-v-d85f6b1c] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.closed-group-item[data-v-d85f6b1c] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--q-info);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  transition: all 0.2s ease;
}
.closed-group-item[data-v-d85f6b1c]:hover {
  background: var(--q-dark);
  border-color: color-mix(in srgb, var(--q-warning) 30%, var(--q-info));
  transform: translateX(4px);
}
.closed-group-icon[data-v-d85f6b1c] {
  color: var(--q-positive);
  flex-shrink: 0;
}
.closed-group-link[data-v-d85f6b1c] {
  font-size: 13px;
  font-weight: 500;
  color: var(--q-accent);
  text-decoration: none;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.2s;
}
.closed-group-item:hover .closed-group-link[data-v-d85f6b1c] {
  color: var(--q-primary);
}
.closed-group-external[data-v-d85f6b1c] {
  color: var(--q-positive);
  opacity: 0;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
.closed-group-item:hover .closed-group-external[data-v-d85f6b1c] {
  opacity: 1;
}

/* List View Styles */
.catalog-list[data-v-d85f6b1c] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.course-list-item[data-v-d85f6b1c] {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--q-info);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.course-list-item[data-v-d85f6b1c]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.list-item-image[data-v-d85f6b1c] {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
}
.list-img[data-v-d85f6b1c] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.list-image-placeholder[data-v-d85f6b1c] {
  width: 100%;
  height: 100%;
  background: var(--q-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
  opacity: 0.5;
}
.list-item-content[data-v-d85f6b1c] {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}
.list-item-header[data-v-d85f6b1c] {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.list-item-title-row[data-v-d85f6b1c] {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.list-item-title[data-v-d85f6b1c] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.2s;
}
.course-list-item:hover .list-item-title[data-v-d85f6b1c] {
  color: var(--q-primary);
}
.list-status-badge[data-v-d85f6b1c] {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--q-success);
  border: 1px solid color-mix(in srgb, var(--q-success) 30%, var(--q-info));
}
.list-status-badge.status-draft[data-v-d85f6b1c] {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
  border-color: color-mix(in srgb, var(--q-warning) 30%, var(--q-info));
}
.list-item-meta[data-v-d85f6b1c] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.list-category[data-v-d85f6b1c] {
  font-size: 11px;
  font-weight: 500;
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.list-date-info[data-v-d85f6b1c] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--q-positive);
  white-space: nowrap;
}
.list-item-footer[data-v-d85f6b1c] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.list-rating-wrapper[data-v-d85f6b1c] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.list-rating-wrapper[data-v-d85f6b1c]:hover {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
}
.list-rating-wrapper[data-v-d85f6b1c] .q-rating {
  font-size: 0.9em;
}
.rating-text[data-v-d85f6b1c] {
  font-size: 11px;
  font-weight: 600;
  color: var(--q-positive);
}
.list-closed-indicator[data-v-d85f6b1c] {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--q-warning);
  background: color-mix(in srgb, var(--q-warning) 10%, var(--q-info));
  padding: 2px 6px;
  border-radius: 4px;
  cursor: help;
}
.closed-tooltip[data-v-d85f6b1c] {
  max-width: 250px;
}
.closed-tooltip-title[data-v-d85f6b1c] {
  font-weight: 600;
  margin-bottom: 8px;
}
.closed-tooltip-item[data-v-d85f6b1c] {
  padding: 2px 0;
  font-size: 12px;
}
.list-item-actions[data-v-d85f6b1c] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.list-item-actions .action-btn[data-v-d85f6b1c] {
  padding: 4px;
}

/* Empty State */
.empty-state[data-v-d85f6b1c] {
  padding: 64px;
  text-align: center;
  color: var(--q-positive);
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-icon[data-v-d85f6b1c] {
  margin: 0 auto 16px;
  opacity: 0.3;
}
.empty-text[data-v-d85f6b1c] {
  margin-bottom: 16px;
  font-size: 16px;
}
.btn-reset[data-v-d85f6b1c] {
  color: var(--q-primary);
  font-weight: 500;
}
.btn-reset[data-v-d85f6b1c]:hover {
  text-decoration: underline;
}

/* Load More */
.load-more[data-v-d85f6b1c] {
  display: flex;
  justify-content: center;
  padding: 16px;
}
@media (max-width: 900px) {
.list-item-meta[data-v-d85f6b1c] {
    display: none;
}
}
@media (max-width: 768px) {
.course-list-item[data-v-d85f6b1c] {
    flex-wrap: wrap;
    padding: 10px;
}
.list-item-image[data-v-d85f6b1c] {
    width: 40px;
    height: 40px;
}
.list-item-content[data-v-d85f6b1c] {
    flex: 1;
    min-width: calc(100% - 56px);
    flex-wrap: wrap;
}
.list-item-header[data-v-d85f6b1c] {
    width: 100%;
}
.list-item-footer[data-v-d85f6b1c] {
    display: none;
}
.list-item-actions[data-v-d85f6b1c] {
    width: 100%;
    justify-content: flex-end;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.list-item-title[data-v-d85f6b1c] {
    font-size: 13px;
}
}


.catalog-container[data-v-3d9fff82] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-3d9fff82 0.5s ease-in-out;
}
@keyframes fadeIn-3d9fff82 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Header */
.catalog-header[data-v-3d9fff82] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 24px;
}
.header-top[data-v-3d9fff82] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
.header-top[data-v-3d9fff82] {
    flex-direction: row;
    align-items: center;
}
}
.header-left[data-v-3d9fff82] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-icon[data-v-3d9fff82] {
  width: 40px;
  height: 40px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.header-title[data-v-3d9fff82] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  line-height: 30px;
  margin: 0;
}
.header-actions[data-v-3d9fff82] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-action[data-v-3d9fff82] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  background: var(--q-dark);
  color: var(--q-positive);
  transition: all 0.3s;
}
.btn-action[data-v-3d9fff82]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  color: var(--q-accent);
}
.add-btn[data-v-3d9fff82] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  box-shadow: 0 4px 8px color-mix(in srgb, var(--q-primary) 15%, transparent);
}
.add-btn[data-v-3d9fff82]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 85%, black) !important;
}
.btn-refresh[data-v-3d9fff82] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  background: var(--q-dark);
  color: var(--q-positive);
  transition: all 0.3s;
}
.btn-refresh[data-v-3d9fff82]:hover:not(.btn-refreshing) {
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  color: var(--q-accent);
}
.btn-refreshing[data-v-3d9fff82] {
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-dark));
  color: color-mix(in srgb, var(--q-positive) 60%, transparent);
  cursor: wait;
}
.icon-spin[data-v-3d9fff82] {
  animation: spin-3d9fff82 1s linear infinite;
}
@keyframes spin-3d9fff82 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}

/* Filters */
.filters-bar[data-v-3d9fff82] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
.filters-bar[data-v-3d9fff82] {
    flex-direction: row;
}
}
.filter-select[data-v-3d9fff82] {
  width: 100%;
  font-size: 14px;
  font-weight: 500;
}
@media (min-width: 768px) {
.filter-select[data-v-3d9fff82] {
    width: 320px;
}
}
.filter-select[data-v-3d9fff82] .q-field__control {
  background: var(--q-dark);
  border-radius: 12px;
}
.filter-select[data-v-3d9fff82] .q-field__control:hover {
  background: var(--q-info);
}
.btn-archive[data-v-3d9fff82] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  background: var(--q-info);
  color: var(--q-positive);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  transition: all 0.2s;
}
.btn-archive[data-v-3d9fff82]:hover {
  background: var(--q-dark);
}
.btn-archive-active[data-v-3d9fff82] {
  background: var(--q-accent);
  color: var(--q-info);
  border-color: var(--q-accent);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Loading State */
.loading-state[data-v-3d9fff82] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 64px;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.loading-text[data-v-3d9fff82] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
}

/* Grid */
.catalog-grid[data-v-3d9fff82] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
.catalog-grid[data-v-3d9fff82] {
    grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.catalog-grid[data-v-3d9fff82] {
    grid-template-columns: 1fr 1fr 1fr;
}
}
.program-card[data-v-3d9fff82] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.3s;
}
.program-card[data-v-3d9fff82]:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  transform: translateY(-4px);
}
.program-archived[data-v-3d9fff82] {
  opacity: 0.85;
  filter: grayscale(0.4);
}
.program-loading[data-v-3d9fff82] {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}
.program-loading-overlay[data-v-3d9fff82] {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--q-info) 70%, transparent);
  border-radius: 16px;
}
.program-image[data-v-3d9fff82] {
  aspect-ratio: 16 / 9;
  background: var(--q-dark);
  position: relative;
  overflow: hidden;
}
.program-img[data-v-3d9fff82] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.program-card:hover .program-img[data-v-3d9fff82] {
  transform: scale(1.05);
}
.program-image-placeholder[data-v-3d9fff82] {
  width: 100%;
  height: 100%;
  background: var(--q-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
  opacity: 0.3;
}
.status-badge-container[data-v-3d9fff82] {
  position: absolute;
  top: 12px;
  right: 12px;
}
.status-badge[data-v-3d9fff82] {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--q-success);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid color-mix(in srgb, var(--q-success) 40%, var(--q-info));
}
.status-badge.status-draft[data-v-3d9fff82] {
  color: var(--q-warning);
  border-color: color-mix(in srgb, var(--q-warning) 40%, var(--q-info));
}
.section-badge-container[data-v-3d9fff82] {
  position: absolute;
  bottom: 12px;
  left: 12px;
}
.section-badge[data-v-3d9fff82] {
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  font-size: 10px;
  font-weight: 700;
  color: var(--q-info);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.archive-overlay[data-v-3d9fff82] {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.archive-badge[data-v-3d9fff82] {
  padding: 8px 16px;
  border: 2px solid var(--q-info);
  color: var(--q-info);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 8px;
}

/* Content */
.program-content[data-v-3d9fff82] {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.program-header[data-v-3d9fff82] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.program-id-badge[data-v-3d9fff82] {
  font-size: 10px;
  font-weight: 700;
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  padding: 2px 6px;
  border-radius: 4px;
}
.program-title[data-v-3d9fff82] {
  font-weight: 700;
  color: var(--q-accent);
  font-size: 18px;
  line-height: 20px;
  transition: color 0.2s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 10px 0;
}
.program-card:hover .program-title[data-v-3d9fff82] {
  color: var(--q-primary);
}
.program-footer[data-v-3d9fff82] {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.program-rating-title[data-v-3d9fff82] {
  font-size: 10px;
  color: var(--q-positive);
  text-transform: uppercase;
  font-weight: 700;
}

/* Rating */
.program-rating-wrapper[data-v-3d9fff82] {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  background: transparent;
}
.program-rating-wrapper[data-v-3d9fff82]:hover {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
}
.program-rating-wrapper[data-v-3d9fff82] .q-rating {
  font-size: 1.1em;
}
.program-rating-wrapper[data-v-3d9fff82] .q-rating__icon {
  transition:
    transform 0.15s ease,
    color 0.15s ease;
}
.program-rating-wrapper[data-v-3d9fff82]:hover .q-rating__icon {
  transform: scale(1.15);
}
.program-rating-wrapper[data-v-3d9fff82] .q-rating__icon--active {
  color: var(--q-warning);
}

/* Card Actions */
.card-actions[data-v-3d9fff82] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 20px;
}
.action-btn[data-v-3d9fff82] {
  color: var(--q-positive);
  background: transparent;
  transition: all 0.2s;
  padding: 5px;
}
.action-btn-indigo[data-v-3d9fff82]:hover {
  color: var(--q-secondary);
  background-color: color-mix(in srgb, var(--q-secondary) 15%, transparent);
}
.action-btn-teal[data-v-3d9fff82]:hover {
  color: var(--q-success);
  background-color: color-mix(in srgb, var(--q-success) 15%, transparent);
}
.action-btn-red[data-v-3d9fff82]:hover {
  color: var(--q-primary);
  background-color: color-mix(in srgb, var(--q-negative) 15%, transparent);
}

/* Empty State */
.empty-state[data-v-3d9fff82] {
  padding: 64px;
  text-align: center;
  color: var(--q-positive);
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-icon[data-v-3d9fff82] {
  margin: 0 auto 16px;
  opacity: 0.3;
}
.empty-text[data-v-3d9fff82] {
  margin-bottom: 16px;
  font-size: 16px;
}
.empty-hint[data-v-3d9fff82] {
  font-size: 12px;
  margin-top: 4px;
  color: var(--q-positive);
}
.btn-reset[data-v-3d9fff82] {
  color: var(--q-primary);
  font-weight: 500;
}
.btn-reset[data-v-3d9fff82]:hover {
  text-decoration: underline;
}

/* Load More */
.load-more[data-v-3d9fff82] {
  display: flex;
  justify-content: center;
  padding: 16px;
}

/* List View Styles */
.catalog-list[data-v-3d9fff82] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.program-list-item[data-v-3d9fff82] {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--q-info);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.program-list-item[data-v-3d9fff82]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.list-item-image[data-v-3d9fff82] {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
}
.list-img[data-v-3d9fff82] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.list-image-placeholder[data-v-3d9fff82] {
  width: 100%;
  height: 100%;
  background: var(--q-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
  opacity: 0.5;
}
.list-image-placeholder .q-icon[data-v-3d9fff82] {
  font-size: 20px;
}
.list-item-content[data-v-3d9fff82] {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}
.list-item-header[data-v-3d9fff82] {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.list-item-title-row[data-v-3d9fff82] {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.list-item-title[data-v-3d9fff82] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.2s;
}
.program-list-item:hover .list-item-title[data-v-3d9fff82] {
  color: var(--q-primary);
}
.list-status-badge[data-v-3d9fff82] {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--q-success);
  border: 1px solid color-mix(in srgb, var(--q-success) 30%, var(--q-info));
}
.list-status-badge.status-draft[data-v-3d9fff82] {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
  border-color: color-mix(in srgb, var(--q-warning) 30%, var(--q-info));
}
.list-item-meta[data-v-3d9fff82] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.list-category[data-v-3d9fff82] {
  font-size: 11px;
  font-weight: 500;
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.list-item-footer[data-v-3d9fff82] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.list-rating-wrapper[data-v-3d9fff82] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.2s;
}
.list-rating-wrapper[data-v-3d9fff82]:hover {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
}
.list-rating-wrapper[data-v-3d9fff82] .q-rating {
  font-size: 0.9em;
}
.rating-text[data-v-3d9fff82] {
  font-size: 11px;
  font-weight: 600;
  color: var(--q-positive);
}
.list-item-actions[data-v-3d9fff82] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.list-item-actions .action-btn[data-v-3d9fff82] {
  padding: 4px;
}
@media (max-width: 900px) {
.list-item-meta[data-v-3d9fff82] {
    display: none;
}
}
@media (max-width: 768px) {
.program-list-item[data-v-3d9fff82] {
    flex-wrap: wrap;
    padding: 10px;
}
.list-item-image[data-v-3d9fff82] {
    width: 40px;
    height: 40px;
}
.list-item-content[data-v-3d9fff82] {
    flex: 1;
    min-width: calc(100% - 56px);
    flex-wrap: wrap;
}
.list-item-header[data-v-3d9fff82] {
    width: 100%;
}
.list-item-footer[data-v-3d9fff82] {
    display: none;
}
.list-item-actions[data-v-3d9fff82] {
    width: 100%;
    justify-content: flex-end;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.list-item-title[data-v-3d9fff82] {
    font-size: 13px;
}
}


.action-btn[data-v-4a8b879f] {
  color: var(--q-positive);
  background: transparent;
  transition: all 0.2s;
  padding: 0.5rem;
}
.action-btn-blue[data-v-4a8b879f]:hover {
  color: var(--q-primary);
  background-color: color-mix(in srgb, var(--q-primary) 15%, transparent);
}
.action-btn-teal[data-v-4a8b879f]:hover {
  color: var(--q-success);
  background-color: color-mix(in srgb, var(--q-success) 15%, transparent);
}
.export-img[data-v-4a8b879f] {
  cursor: pointer;
  height: 30px;
  width: 30px;
  margin-top: 16px;
  opacity: 0.7;
  transition: all 0.2s;
}
.export-img[data-v-4a8b879f]:hover {
  opacity: 1;
  transform: scale(1.1);
}


.catalog-container[data-v-fe9329be] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-fe9329be 0.5s ease-in-out;
}
@keyframes fadeIn-fe9329be {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Header */
.catalog-header[data-v-fe9329be] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 24px;
}
.header-top[data-v-fe9329be] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
.header-top[data-v-fe9329be] {
    flex-direction: row;
    align-items: center;
}
}
.header-left[data-v-fe9329be] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-icon[data-v-fe9329be] {
  width: 40px;
  height: 40px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.header-title[data-v-fe9329be] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  line-height: 30px;
  margin: 0;
}
.header-actions[data-v-fe9329be] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-action[data-v-fe9329be] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;

  background: var(--q-dark);
  color: var(--q-positive);
  transition: all 0.3s;
}
.btn-action[data-v-fe9329be]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  color: var(--q-accent);
}
.add-btn[data-v-fe9329be] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  box-shadow: 0 4px 8px color-mix(in srgb, var(--q-primary) 15%, transparent);
}
.add-btn[data-v-fe9329be]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 85%, black) !important;
}
.btn-refresh[data-v-fe9329be] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  background: var(--q-dark);
  color: var(--q-positive);
  transition: all 0.3s;
}
.btn-refresh[data-v-fe9329be]:hover:not(.btn-refreshing) {
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  color: var(--q-accent);
}
.btn-refreshing[data-v-fe9329be] {
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-dark));
  color: color-mix(in srgb, var(--q-positive) 60%, transparent);
  cursor: wait;
}
.icon-spin[data-v-fe9329be] {
  animation: spin-fe9329be 1s linear infinite;
}
@keyframes spin-fe9329be {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}

/* Filters */
.filters-bar[data-v-fe9329be] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
.filters-bar[data-v-fe9329be] {
    grid-template-columns: 1fr 1fr;
}
}
.filter-select[data-v-fe9329be] {
  font-size: 14px;
  font-weight: 500;
}
.filter-select[data-v-fe9329be] .q-field__control {
  background: var(--q-dark);
  border-radius: 12px;
}
.filter-select[data-v-fe9329be] .q-field__control:hover {
  background: var(--q-info);
}

/* Import Section */
.import-section[data-v-fe9329be] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 24px;
}

/* Loading State */
.loading-state[data-v-fe9329be] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 64px;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.loader[data-v-fe9329be] {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-fe9329be 0.8s linear infinite;
}
.loading-text[data-v-fe9329be] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
}

/* List View */
.list-view[data-v-fe9329be] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  overflow: hidden;
}
.test-list-item[data-v-fe9329be] {
  padding: 16px;
  transition: background 0.2s;
}
.test-list-item[data-v-fe9329be]:hover {
  background: var(--q-dark);
}
.test-category[data-v-fe9329be] {
  font-size: 12px;
  color: var(--q-positive);
  margin-bottom: 4px;
}
.test-id[data-v-fe9329be] {
  font-weight: 600;
  color: var(--q-primary);
  margin-right: 8px;
}
.test-name[data-v-fe9329be] {
  font-size: 16px;
  font-weight: 600;
  color: var(--q-accent);
}
.test-date[data-v-fe9329be] {
  display: flex;
  align-items: center;
  color: var(--q-positive);
}
.test-status-icons[data-v-fe9329be] {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.action-buttons[data-v-fe9329be] {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* Grid */
.catalog-grid[data-v-fe9329be] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
.catalog-grid[data-v-fe9329be] {
    grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.catalog-grid[data-v-fe9329be] {
    grid-template-columns: 1fr 1fr 1fr;
}
}
.test-card[data-v-fe9329be] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.3s;
}
.test-card[data-v-fe9329be]:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  transform: translateY(-4px);
}
.test-image[data-v-fe9329be] {
  aspect-ratio: 16 / 9;
  background: var(--q-dark);
  position: relative;
  overflow: hidden;
}
.test-img[data-v-fe9329be] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.test-card:hover .test-img[data-v-fe9329be] {
  transform: scale(1.05);
}
.test-image-placeholder[data-v-fe9329be] {
  width: 100%;
  height: 100%;
  background: var(--q-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
  opacity: 0.3;
}
.status-badge-container[data-v-fe9329be] {
  position: absolute;
  top: 12px;
  right: 12px;
}
.status-badge[data-v-fe9329be] {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--q-success);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid color-mix(in srgb, var(--q-success) 40%, var(--q-info));
}
.status-badge.status-draft[data-v-fe9329be] {
  color: var(--q-warning);
  border-color: color-mix(in srgb, var(--q-warning) 40%, var(--q-info));
}
.section-badge-container[data-v-fe9329be] {
  position: absolute;
  bottom: 12px;
  left: 12px;
}
.section-badge[data-v-fe9329be] {
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  font-size: 10px;
  font-weight: 700;
  color: var(--q-info);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Content */
.test-content[data-v-fe9329be] {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.test-header[data-v-fe9329be] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.test-id-badge[data-v-fe9329be] {
  font-size: 10px;
  font-weight: 700;
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  padding: 2px 6px;
  border-radius: 4px;
}
.test-title[data-v-fe9329be] {
  font-weight: 700;
  color: var(--q-accent);
  font-size: 18px;
  line-height: 20px;
  transition: color 0.2s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 10px 0;
}
.test-card:hover .test-title[data-v-fe9329be] {
  color: var(--q-primary);
}
.test-meta[data-v-fe9329be] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.test-date-info[data-v-fe9329be] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--q-positive);
}
.test-footer[data-v-fe9329be] {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.test-rating-title[data-v-fe9329be] {
  font-size: 10px;
  color: var(--q-positive);
  text-transform: uppercase;
  font-weight: 700;
}

/* Rating */
.test-rating-wrapper[data-v-fe9329be] {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  background: transparent;
}
.test-rating-wrapper[data-v-fe9329be]:hover {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
}
.test-rating-wrapper[data-v-fe9329be] .q-rating {
  font-size: 1.1em;
}
.test-rating-wrapper[data-v-fe9329be] .q-rating__icon {
  transition:
    transform 0.15s ease,
    color 0.15s ease;
}
.test-rating-wrapper[data-v-fe9329be]:hover .q-rating__icon {
  transform: scale(1.15);
}
.test-rating-wrapper[data-v-fe9329be] .q-rating__icon--active {
  color: var(--q-warning);
}

/* Card Actions */
.card-actions[data-v-fe9329be] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 10px 16px;
}
.action-btn[data-v-fe9329be] {
  color: var(--q-positive);
  background: transparent;
  transition: all 0.2s;
  padding: 0.5rem;
}
.action-btn-blue[data-v-fe9329be]:hover {
  color: var(--q-primary);
  background-color: color-mix(in srgb, var(--q-primary) 15%, transparent);
}
.action-btn-indigo[data-v-fe9329be]:hover {
  color: var(--q-secondary);
  background-color: color-mix(in srgb, var(--q-secondary) 15%, transparent);
}
.action-btn-teal[data-v-fe9329be]:hover {
  color: var(--q-success);
  background-color: color-mix(in srgb, var(--q-success) 15%, transparent);
}
.action-btn-orange[data-v-fe9329be]:hover {
  color: var(--q-warning);
  background-color: color-mix(in srgb, var(--q-warning) 15%, transparent);
}
.action-btn-red[data-v-fe9329be]:hover {
  color: var(--q-primary);
  background-color: color-mix(in srgb, var(--q-negative) 15%, transparent);
}

/* Closed Groups */
.closed-groups[data-v-fe9329be] {
  padding: 16px 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--q-warning) 12%, var(--q-info)) 0%, color-mix(in srgb, var(--q-warning) 6%, var(--q-info)) 100%);
  border-top: 1px solid color-mix(in srgb, var(--q-warning) 20%, var(--q-info));
}
.closed-groups-header[data-v-fe9329be] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.closed-groups-icon[data-v-fe9329be] {
  width: 24px;
  height: 24px;
  background: color-mix(in srgb, var(--q-warning) 20%, var(--q-info));
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-warning);
}
.closed-groups-title[data-v-fe9329be] {
  font-size: 12px;
  font-weight: 700;
  color: var(--q-warning);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.closed-groups-count[data-v-fe9329be] {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}
.closed-groups-list[data-v-fe9329be] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.closed-group-item[data-v-fe9329be] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--q-info);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  transition: all 0.2s ease;
}
.closed-group-item[data-v-fe9329be]:hover {
  background: var(--q-dark);
  border-color: color-mix(in srgb, var(--q-warning) 30%, var(--q-info));
  transform: translateX(4px);
}
.closed-group-icon[data-v-fe9329be] {
  color: var(--q-positive);
  flex-shrink: 0;
}
.closed-group-link[data-v-fe9329be] {
  font-size: 13px;
  font-weight: 500;
  color: var(--q-accent);
  text-decoration: none;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.2s;
}
.closed-group-item:hover .closed-group-link[data-v-fe9329be] {
  color: var(--q-primary);
}
.closed-group-external[data-v-fe9329be] {
  color: var(--q-positive);
  opacity: 0;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
.closed-group-item:hover .closed-group-external[data-v-fe9329be] {
  opacity: 1;
}

/* Empty State */
.empty-state[data-v-fe9329be] {
  padding: 64px;
  text-align: center;
  color: var(--q-positive);
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-icon[data-v-fe9329be] {
  margin: 0 auto 16px;
  opacity: 0.3;
}
.empty-text[data-v-fe9329be] {
  margin-bottom: 16px;
  font-size: 16px;
}
.btn-reset[data-v-fe9329be] {
  color: var(--q-primary);
  font-weight: 500;
}
.btn-reset[data-v-fe9329be]:hover {
  text-decoration: underline;
}

/* Load More */
.load-more[data-v-fe9329be] {
  display: flex;
  justify-content: center;
  padding: 16px;
}
.bottom-loading[data-v-fe9329be] {
  display: flex;
  justify-content: center;
  padding: 24px;
}

/* Modal Styles */
/* List View Styles */
.catalog-list[data-v-fe9329be] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.test-list-item[data-v-fe9329be] {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--q-info);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.test-list-item[data-v-fe9329be]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.list-item-image[data-v-fe9329be] {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
}
.list-img[data-v-fe9329be] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.list-image-placeholder[data-v-fe9329be] {
  width: 100%;
  height: 100%;
  background: var(--q-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
  opacity: 0.5;
}
.list-image-placeholder .q-icon[data-v-fe9329be] {
  font-size: 20px;
}
.list-item-content[data-v-fe9329be] {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}
.list-item-header[data-v-fe9329be] {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.list-item-title-row[data-v-fe9329be] {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.list-item-title[data-v-fe9329be] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.2s;
}
.test-list-item:hover .list-item-title[data-v-fe9329be] {
  color: var(--q-primary);
}
.list-status-badge[data-v-fe9329be] {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--q-success);
  border: 1px solid color-mix(in srgb, var(--q-success) 30%, var(--q-info));
}
.list-status-badge.status-draft[data-v-fe9329be] {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
  border-color: color-mix(in srgb, var(--q-warning) 30%, var(--q-info));
}
.list-item-meta[data-v-fe9329be] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.list-category[data-v-fe9329be] {
  font-size: 11px;
  font-weight: 500;
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.list-date-info[data-v-fe9329be] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--q-positive);
  white-space: nowrap;
}
.list-item-footer[data-v-fe9329be] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.list-rating-wrapper[data-v-fe9329be] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.2s;
}
.list-rating-wrapper[data-v-fe9329be]:hover {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
}
.list-rating-wrapper[data-v-fe9329be] .q-rating {
  font-size: 0.9em;
}
.rating-text[data-v-fe9329be] {
  font-size: 11px;
  font-weight: 600;
  color: var(--q-positive);
}
.list-closed-indicator[data-v-fe9329be] {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--q-warning);
  background: color-mix(in srgb, var(--q-warning) 10%, var(--q-info));
  padding: 2px 6px;
  border-radius: 4px;
  cursor: help;
}
.closed-tooltip[data-v-fe9329be] {
  max-width: 250px;
}
.closed-tooltip-title[data-v-fe9329be] {
  font-weight: 600;
  margin-bottom: 8px;
}
.closed-tooltip-item[data-v-fe9329be] {
  padding: 2px 0;
  font-size: 12px;
}
.list-item-actions[data-v-fe9329be] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.list-item-actions .action-btn[data-v-fe9329be] {
  padding: 4px;
}
@media (max-width: 900px) {
.list-item-meta[data-v-fe9329be] {
    display: none;
}
}
@media (max-width: 768px) {
.test-list-item[data-v-fe9329be] {
    flex-wrap: wrap;
    padding: 10px;
}
.list-item-image[data-v-fe9329be] {
    width: 40px;
    height: 40px;
}
.list-item-content[data-v-fe9329be] {
    flex: 1;
    min-width: calc(100% - 56px);
    flex-wrap: wrap;
}
.list-item-header[data-v-fe9329be] {
    width: 100%;
}
.list-item-footer[data-v-fe9329be] {
    display: none;
}
.list-item-actions[data-v-fe9329be] {
    width: 100%;
    justify-content: flex-end;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.list-item-title[data-v-fe9329be] {
    font-size: 13px;
}
}


.frame[data-v-310e480a] {
  width: 100%;
  min-height: 93dvh;
  transition: opacity 0.3s ease;
}

/* Стили для лоадера */
.loader-overlay[data-v-310e480a] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.loader-container[data-v-310e480a] {
  text-align: center;
}
.loader[data-v-310e480a] {
  width: 72px;
  height: 72px;
  border: 3px solid #f0f3fa;
  border-bottom-color: #6699ff;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation-310e480a 1s linear infinite;
}
.loader-text[data-v-310e480a] {
  margin-top: 16px;
  color: #292929;
  font-size: 16px;
}
.hide-scrollbar[data-v-310e480a] {
  -ms-overflow-style: none; /* IE и Edge */
  scrollbar-width: none; /* Firefox */
}
.hide-scrollbar[data-v-310e480a]::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
@keyframes rotation-310e480a {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}


.clv-container[data-v-d6170fa8] {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* Убираем отступы у обертки LessonIframe */
.clv-container[data-v-d6170fa8] > div {
  min-height: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}

/* Настраиваем iframe для полной интеграции */
.clv-container[data-v-d6170fa8] .frame {
  width: 100% !important;
  height: calc(100vh - 140px) !important;
  min-height: calc(100vh - 140px) !important;
  max-height: calc(100vh - 140px) !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* Лоадер на весь экран */
.clv-container[data-v-d6170fa8] .loader-overlay {
  position: fixed !important;
  top: 140px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: calc(100vh - 140px) !important;
  z-index: 9999 !important;
}


/* Container */
.cev-loading[data-v-ea9672a2] {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}
.cev-container[data-v-ea9672a2] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 40px;
}

/* Header - p-6 = 24px */
.cev-header[data-v-ea9672a2] {
  background: white;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  padding: 24px;
}
.cev-header-inner[data-v-ea9672a2] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.cev-header-left[data-v-ea9672a2] {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* w-10 h-10 = 40x40 */
.cev-header-icon[data-v-ea9672a2] {
  width: 40px;
  height: 40px;
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}

/* text-2xl = 24px, font-bold = 700 */
.cev-title[data-v-ea9672a2] {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.2 !important;
}

/* bg-slate-100, rounded-lg, p-1 */
.cev-header-right[data-v-ea9672a2] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cev-filter-select[data-v-ea9672a2] {
  min-width: 180px;
  max-width: 280px;
}
.cev-add-btn[data-v-ea9672a2] {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.cev-filter[data-v-ea9672a2] {
  display: flex;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 4px;
}

/* px-4 py-1.5 = 6px 16px, text-sm = 14px */
.cev-filter-btn[data-v-ea9672a2] {
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.cev-filter-btn[data-v-ea9672a2]:hover {
  color: #334155;
}

/* bg-white text-rose-600 shadow-sm */
.cev-filter-btn.active[data-v-ea9672a2] {
  background: white;
  color: var(--q-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Loading */
.cev-events-loading[data-v-ea9672a2] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px;
  gap: 16px;
  color: #64748b;
}

/* Events List - space-y-4 = gap 16px */
.cev-list[data-v-ea9672a2] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Event Card - p-5 = 20px, gap-6 = 24px */
.cev-card[data-v-ea9672a2] {
  background: white;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  padding: 20px;
  display: flex;
  gap: 24px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.cev-card[data-v-ea9672a2]:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Type Badge - absolute top-0 right-0, px-3 py-1 = 4px 12px */
.cev-type-badge[data-v-ea9672a2] {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 12px;
  border-bottom-left-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cev-type-badge.internal[data-v-ea9672a2] {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
  color: var(--q-primary);
}
.cev-type-badge.external[data-v-ea9672a2] {
  background: #fff7ed;
  color: #ea580c;
}
.cev-draft-badge[data-v-ea9672a2] {
  position: absolute;
  top: 0;
  right: 100px;
  padding: 4px 12px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  background: #fef3c7;
  color: #a16207;
}

/* Date Box - md:w-32 = 128px, p-4 = 16px */
.cev-date[data-v-ea9672a2] {
  flex-shrink: 0;
  width: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  padding: 16px;
  text-align: center;
}

/* text-3xl = 30px */
.cev-date-day[data-v-ea9672a2] {
  font-size: 30px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
}

/* text-xs = 12px, mb-2 = 8px */
.cev-date-month[data-v-ea9672a2] {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
  margin-bottom: 8px;
}

/* text-sm = 14px, px-2 py-0.5 = 2px 8px, mt-1 = 4px */
.cev-date-time[data-v-ea9672a2] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  background: white;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  margin-top: 4px;
}

/* Event Info */
.cev-info[data-v-ea9672a2] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* text-xl = 20px, mb-2 = 8px */
.cev-info-title[data-v-ea9672a2] {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px 0;
}

/* text-sm = 14px, mb-4 = 16px */
.cev-info-desc[data-v-ea9672a2] {
  font-size: 14px;
  color: #475569;
  line-height: 1.5;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* gap-4 = 16px, text-sm = 14px */
.cev-meta[data-v-ea9672a2] {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  color: #64748b;
}

/* gap-1.5 = 6px */
.cev-meta-item[data-v-ea9672a2] {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* px-2 py-0.5 = 2px 8px, text-xs = 12px */
.cev-meta-item.feedback[data-v-ea9672a2] {
  color: #16a34a;
  background: #f0fdf4;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}
.cev-meta-item.cev-pending-bids[data-v-ea9672a2] {
  color: #f59e0b;
  background: #fef3c7;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.cev-meta-item.cev-pending-bids .q-icon[data-v-ea9672a2] {
  color: #f59e0b;
}

/* Moderator Actions - mt-4 pt-3 = 16px 12px */
.cev-mod-actions[data-v-ea9672a2] {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

/* p-2 = 8px */
.cev-mod-btn[data-v-ea9672a2] {
  padding: 8px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: #94a3b8;
  transition: all 0.2s;
}
.cev-mod-btn.edit[data-v-ea9672a2]:hover { color: #2563eb; background: #eff6ff;
}
.cev-mod-btn.export[data-v-ea9672a2]:hover { color: #0d9488; background: #f0fdfa;
}
.cev-mod-btn.delete[data-v-ea9672a2]:hover { color: #dc2626; background: #fef2f2;
}

/* Actions Column - min-w-[180px] = 180px, pl-6 = 24px */
.cev-actions[data-v-ea9672a2] {
  flex-shrink: 0;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-left: 24px;
  border-left: 1px solid #f1f5f9;
}
.cev-status[data-v-ea9672a2] {
  text-align: right;
  width: 100%;
  margin-bottom: auto;
}

/* text-xs = 12px */
.cev-status span[data-v-ea9672a2] {
  font-size: 12px;
  font-weight: 700;
}
.cev-status .open[data-v-ea9672a2] {
  color: #16a34a;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* w-1.5 h-1.5 = 6px */
.cev-status .dot[data-v-ea9672a2] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: cev-pulse-ea9672a2 2s infinite;
}
@keyframes cev-pulse-ea9672a2 {
0%, 100% { opacity: 1;
}
50% { opacity: 0.4;
}
}
.cev-status .closed[data-v-ea9672a2] { color: #ef4444;
}
.cev-status .finished[data-v-ea9672a2] { color: #94a3b8;
}

/* Action Buttons - py-2 px-4 = 8px 16px, py-2.5 = 10px */
.cev-btn[data-v-ea9672a2] {
  width: 100%;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  margin-top: auto;
}
.cev-btn.apply[data-v-ea9672a2] {
  background: var(--q-accent);
  color: white;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.cev-btn.apply[data-v-ea9672a2]:hover {
  background: #1e293b;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.cev-btn.disabled[data-v-ea9672a2] {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

/* py-2 px-4 = 8px 16px, border-green-200 */
.cev-btn.registered[data-v-ea9672a2] {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
  cursor: default;
}
.cev-btn.pending[data-v-ea9672a2] {
  background: #fef9c3;
  color: #a16207;
  border: 1px solid #fde047;
  cursor: default;
}
.cev-btn.declined[data-v-ea9672a2] {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
  cursor: default;
}

/* Empty - p-12 = 48px */
.cev-empty[data-v-ea9672a2] {
  padding: 48px;
  text-align: center;
  background: white;
  border-radius: 16px;
  border: 2px dashed #cbd5e1;
  color: #94a3b8;
}
.cev-empty p[data-v-ea9672a2] {
  margin-top: 16px;
  font-size: 16px;
}

/* Mobile */
@media (max-width: 768px) {
.cev-card[data-v-ea9672a2] {
    flex-direction: column;
}
.cev-date[data-v-ea9672a2] {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
    padding: 12px 16px;
}
.cev-date-month[data-v-ea9672a2] {
    margin: 0;
}
.cev-actions[data-v-ea9672a2] {
    width: 100%;
    min-width: auto;
    padding-left: 0;
    padding-top: 16px;
    border-left: none;
    border-top: 1px solid #f1f5f9;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.cev-status[data-v-ea9672a2] {
    margin-bottom: 0;
}
.cev-btn[data-v-ea9672a2] {
    width: auto;
    flex: 1;
    margin-top: 0;
    margin-left: 16px;
}
}

/* Program Nav Bar */
.cev-program-nav[data-v-ea9672a2] {
  background: white;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  padding: 16px 24px;
}
.cev-program-nav-inner[data-v-ea9672a2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cev-program-nav-left[data-v-ea9672a2] {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}
.cev-complete-btn[data-v-ea9672a2] {
  background: var(--q-primary) !important;
  color: white !important;
  border-radius: 12px !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.cev-complete-btn[data-v-ea9672a2]:hover {
  opacity: 0.9;
}


/* Loading */
.cpv-loading[data-v-566453eb] {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

/* Container */
.cpv-container[data-v-566453eb] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 40px;
  animation: cpvFadeIn-566453eb 0.5s ease-in-out;
}
@keyframes cpvFadeIn-566453eb {
from { opacity: 0; transform: translateY(16px);
}
to { opacity: 1; transform: translateY(0);
}
}

/* Header */
.cpv-header[data-v-566453eb] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 24px;
}
.cpv-header-inner[data-v-566453eb] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.cpv-header-left[data-v-566453eb] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cpv-header-icon[data-v-566453eb] {
  width: 40px;
  height: 40px;
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.cpv-title[data-v-566453eb] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 1.2 !important;
}
.cpv-subtitle[data-v-566453eb] {
  font-size: 14px;
  color: #64748b;
  margin: 2px 0 0 0;
  line-height: 1.3;
}
.cpv-header-right[data-v-566453eb] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Filter */
.cpv-filter[data-v-566453eb] {
  display: flex;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 4px;
}
.cpv-filter-btn[data-v-566453eb] {
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.3;
}
.cpv-filter-btn[data-v-566453eb]:hover {
  color: #334155;
}
.cpv-filter-btn.active[data-v-566453eb] {
  background: var(--q-info);
  color: var(--q-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Create button */
.cpv-create-btn[data-v-566453eb] {
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

/* Data loading */
.cpv-data-loading[data-v-566453eb] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px;
  gap: 16px;
  color: #64748b;
}
.cpv-data-loading p[data-v-566453eb] {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
}

/* Grid */
.cpv-grid[data-v-566453eb] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
.cpv-grid[data-v-566453eb] {
    grid-template-columns: 1fr 1fr;
}
}

/* Card */
.cpv-card[data-v-566453eb] {
  background: var(--q-info);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.cpv-card[data-v-566453eb]:hover {
  border-color: rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.cpv-card-inactive[data-v-566453eb] {
  opacity: 0.7;
  background: #f8fafc;
  border-color: #f1f5f9;
}

/* Card header */
.cpv-card-header[data-v-566453eb] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.cpv-card-icon[data-v-566453eb] {
  padding: 10px;
  border-radius: 12px;
  background: #e2e8f0;
  color: #64748b;
}
.cpv-card-icon-active[data-v-566453eb] {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
  color: var(--q-primary);
}

/* Badges */
.cpv-badge[data-v-566453eb] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1.4;
}
.cpv-badge-completed[data-v-566453eb] {
  background: #f0fdf4;
  color: #16a34a;
}
.cpv-badge-closed[data-v-566453eb] {
  background: #f1f5f9;
  color: #94a3b8;
}
.cpv-badge-draft[data-v-566453eb] {
  background: #fef3c7;
  color: #a16207;
}
.cpv-badge-upcoming[data-v-566453eb] {
  background: #eff6ff;
  color: #2563eb;
}
.cpv-badge-active[data-v-566453eb] {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
  color: var(--q-primary);
  animation: cpvPulse-566453eb 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes cpvPulse-566453eb {
0%, 100% { opacity: 1;
}
50% { opacity: 0.8;
}
}

/* Card content */
.cpv-card-title[data-v-566453eb] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 8px 0;
  line-height: 1.3;
  transition: color 0.2s;
}
.cpv-card:hover .cpv-card-title[data-v-566453eb] {
  color: var(--q-primary);
}
.cpv-card-desc[data-v-566453eb] {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 24px 0;
  flex: 1;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card footer */
.cpv-card-footer[data-v-566453eb] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
  gap: 12px;
}
.cpv-card-meta[data-v-566453eb] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cpv-meta-item[data-v-566453eb] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.3;
}
.cpv-card-actions[data-v-566453eb] {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Moderator action buttons */
.cpv-mod-btn[data-v-566453eb] {
  padding: 8px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: #94a3b8;
  transition: all 0.2s;
}
.cpv-mod-edit[data-v-566453eb]:hover {
  color: #2563eb;
  background: #eff6ff;
}
.cpv-mod-delete[data-v-566453eb]:hover {
  color: #dc2626;
  background: #fef2f2;
}

/* Start button */
.cpv-btn-start[data-v-566453eb] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--q-accent);
  color: white;
  font-weight: 700;
  font-size: 13px;
  border-radius: 8px;
  transition: background 0.2s;
  line-height: 1.3;
}
.cpv-btn-start[data-v-566453eb]:hover {
  background: #1e293b;
}

/* Results button */
.cpv-btn-results[data-v-566453eb] {
  font-size: 13px;
  font-weight: 600;
  color: var(--q-primary);
  line-height: 1.3;
}
.cpv-btn-results[data-v-566453eb]:hover {
  text-decoration: underline;
}
.cpv-upcoming-label[data-v-566453eb] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
  line-height: 1.4;
}

/* Empty state */
.cpv-empty[data-v-566453eb] {
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed #cbd5e1;
  color: #94a3b8;
}
.cpv-empty p[data-v-566453eb] {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.3;
}

/* Mobile */
@media (max-width: 768px) {
.cpv-header-inner[data-v-566453eb] {
    flex-direction: column;
    align-items: flex-start;
}
.cpv-header-right[data-v-566453eb] {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
}
.cpv-filter[data-v-566453eb] {
    overflow-x: auto;
}
.cpv-create-btn[data-v-566453eb] {
    width: 100%;
}
.cpv-card-footer[data-v-566453eb] {
    flex-direction: column;
    align-items: flex-start;
}
.cpv-card-actions[data-v-566453eb] {
    width: 100%;
    justify-content: flex-end;
}
}


.styled-search[data-v-6c9cba56] {
  background: var(--q-info);
  border-radius: 12px;
}
.styled-search[data-v-6c9cba56] .q-field__control {
  border-radius: 12px;
  padding-left: 8px;
}
.styled-search[data-v-6c9cba56] .q-field__control:before {
  border-color: #cbd5e1;
}
.styled-search[data-v-6c9cba56] .q-field__control:hover:before {
  border-color: var(--q-primary);
}
.styled-search[data-v-6c9cba56] .q-field--focused .q-field__control:after {
  border-color: var(--q-primary);
  border-width: 2px;
}
.search-icon[data-v-6c9cba56] {
  color: #94a3b8;
  transition: color 0.2s;
}
.styled-search[data-v-6c9cba56] .q-field--focused .search-icon {
  color: var(--q-primary);
}
.search-clear[data-v-6c9cba56] {
  color: #94a3b8;
  transition: all 0.2s;
}
.search-clear[data-v-6c9cba56]:hover {
  color: var(--q-primary);
}


.ms-card[data-v-41489140] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s;
}
.ms-card[data-v-41489140]:hover {
  border-color: rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
}
.ms-expanded[data-v-41489140] {
  border-color: rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Header */
.ms-header[data-v-41489140] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  text-align: left;
  background: var(--q-info);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.ms-header[data-v-41489140]:hover {
  background: rgba(248, 250, 252, 0.5);
}
.ms-header-left[data-v-41489140] {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.ms-header-info[data-v-41489140] {
  flex: 1;
  min-width: 0;
}
.ms-header-right[data-v-41489140] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Avatar */
.ms-avatar[data-v-41489140] {
  flex-shrink: 0;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s;
}
.ms-avatar[data-v-41489140] img {
  object-fit: cover;
}
.ms-avatar-expanded[data-v-41489140] {
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
  color: var(--q-primary);
  border-color: rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
}
.ms-card:hover .ms-avatar[data-v-41489140] {
  border-color: rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Title */
.ms-title[data-v-41489140] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  line-height: 1.4;
}
.ms-count[data-v-41489140] {
  font-size: 12px;
  font-weight: 400;
  color: #94a3b8;
  background: var(--q-dark);
  border: 1px solid #f1f5f9;
  padding: 2px 8px;
  border-radius: 9999px;
  line-height: 1.4;
}
.ms-draft-badge[data-v-41489140] {
  font-size: 10px;
  font-weight: 600;
  color: #f59e0b;
  background: #fef3c7;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Description */
.ms-description[data-v-41489140] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Category */
.ms-category[data-v-41489140] {
  font-size: 12px;
  color: #94a3b8;
  margin: 6px 0 0 0;
  line-height: 1.4;
  display: inline-block;
  background: var(--q-dark);
  padding: 2px 8px;
  border-radius: 4px;
}

/* Actions */
.ms-action-btn[data-v-41489140] {
  color: #94a3b8;
}
.ms-action-btn[data-v-41489140]:hover {
  color: var(--q-primary);
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
}
.ms-action-delete[data-v-41489140]:hover {
  color: #ef4444;
  background: #fef2f2;
}

/* Chevron */
.ms-chevron[data-v-41489140] {
  padding: 8px;
  border-radius: 50%;
  color: #94a3b8;
  transition: all 0.3s;
}
.ms-chevron-rotated[data-v-41489140] {
  transform: rotate(180deg);
  background: #f1f5f9;
  color: #475569;
}

/* Content */
.ms-content[data-v-41489140] {
  padding: 24px;
  background: rgba(248, 250, 252, 0.5);
  border-top: 1px solid #f1f5f9;
  animation: msFadeIn-41489140 0.3s ease;
}
@keyframes msFadeIn-41489140 {
from { opacity: 0; transform: translateY(-8px);
}
to { opacity: 1; transform: translateY(0);
}
}


.kb-container[data-v-0bbc3cd4] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-0bbc3cd4 0.5s ease-in-out;
}
@keyframes fadeIn-0bbc3cd4 {
from { opacity: 0; transform: translateY(16px);
}
to { opacity: 1; transform: translateY(0);
}
}

/* Loading & Empty States */
.loading-state[data-v-0bbc3cd4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
}
.loading-text[data-v-0bbc3cd4] {
  margin-top: 16px;
  color: var(--q-positive);
  font-size: 14px;
  line-height: 1.4;
}

/* Header */
.header-card[data-v-0bbc3cd4] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
}
.header-row[data-v-0bbc3cd4] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
@media (min-width: 768px) {
.header-row[data-v-0bbc3cd4] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
}
.header-left[data-v-0bbc3cd4] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-buttons[data-v-0bbc3cd4] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.action-btn[data-v-0bbc3cd4] {
  border-radius: 10px;
  white-space: nowrap;
}
.filters-row[data-v-0bbc3cd4] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}
@media (min-width: 768px) {
.filters-row[data-v-0bbc3cd4] {
    flex-direction: row;
}
}
.filter-item[data-v-0bbc3cd4] {
  flex: 1;
  min-width: 200px;
}
.header-icon-box[data-v-0bbc3cd4] {
  width: 48px;
  height: 48px;
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.header-title[data-v-0bbc3cd4] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 1.3;
}
.header-subtitle[data-v-0bbc3cd4] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
  line-height: 1.4;
}

/* Shelves List */
.shelves-list[data-v-0bbc3cd4] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.shelf-add-material[data-v-0bbc3cd4] {
  margin-bottom: 16px;
}
.add-material-btn[data-v-0bbc3cd4] {
  border-radius: 10px;
}
.shelf-loading[data-v-0bbc3cd4] {
  display: flex;
  justify-content: center;
  padding: 32px;
}
.materials-grid[data-v-0bbc3cd4] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
.materials-grid[data-v-0bbc3cd4] {
    grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.materials-grid[data-v-0bbc3cd4] {
    grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1280px) {
.materials-grid[data-v-0bbc3cd4] {
    grid-template-columns: repeat(4, 1fr);
}
}
.shelf-empty[data-v-0bbc3cd4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 32px;
  color: #94a3b8;
}
.shelf-empty-icon[data-v-0bbc3cd4] {
  color: #cbd5e1;
  margin-bottom: 4px;
}
.shelf-empty span[data-v-0bbc3cd4] {
  font-size: 14px;
  line-height: 1.4;
}
.shelf-empty-btn[data-v-0bbc3cd4] {
  margin-top: 8px;
}

/* No Shelves */
.no-shelves[data-v-0bbc3cd4] {
  padding: 48px;
  text-align: center;
  color: #94a3b8;
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed #cbd5e1;
}
.no-shelves-icon[data-v-0bbc3cd4] {
  opacity: 0.3;
  margin-bottom: 16px;
}
.reset-filters-btn[data-v-0bbc3cd4] {
  margin-top: 8px;
  color: var(--q-primary);
  font-weight: 500;
}
.reset-filters-btn[data-v-0bbc3cd4]:hover {
  text-decoration: underline;
}

/* Empty Shelves State */
.empty-shelves-state[data-v-0bbc3cd4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed #e2e8f0;
}
.empty-shelves-icon[data-v-0bbc3cd4] {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--q-primary-rgb, 225, 29, 72), 0.05) 0%, rgba(var(--q-primary-rgb, 225, 29, 72), 0.15) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--q-primary);
}
.empty-shelves-title[data-v-0bbc3cd4] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 8px 0;
  line-height: 1.3;
}
.empty-shelves-text[data-v-0bbc3cd4] {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 20px 0;
  max-width: 300px;
  line-height: 1.5;
}
.empty-shelves-btn[data-v-0bbc3cd4] {
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
}

/* Material Editor Dialog */
.material-editor-dialog[data-v-0bbc3cd4] {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.material-editor-bar[data-v-0bbc3cd4] {
  background: var(--q-primary);
  color: white;
  padding: 8px 16px;
  min-height: 48px;
}
.material-editor-title[data-v-0bbc3cd4] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.material-editor-scroll[data-v-0bbc3cd4] {
  flex: 1;
  height: calc(100% - 48px);
  padding: 24px;
  background: var(--q-dark);
}



.my-materials-container[data-v-6a8052a0] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-6a8052a0 0.5s ease-in-out;
}
@keyframes fadeIn-6a8052a0 {
from { opacity: 0; transform: translateY(16px);
}
to { opacity: 1; transform: translateY(0);
}
}

/* Loading State */
.loading-state[data-v-6a8052a0] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
}
.loading-text[data-v-6a8052a0] {
  margin-top: 16px;
  color: var(--q-positive);
  font-size: 14px;
  line-height: 1.4;
}

/* Header */
.header-card[data-v-6a8052a0] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
}
.header-content[data-v-6a8052a0] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
@media (min-width: 768px) {
.header-content[data-v-6a8052a0] {
    flex-direction: row;
    justify-content: space-between;
}
}
.header-left[data-v-6a8052a0] {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
@media (min-width: 768px) {
.header-left[data-v-6a8052a0] {
    width: auto;
}
}
.header-icon-box[data-v-6a8052a0] {
  width: 48px;
  height: 48px;
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
  flex-shrink: 0;
}
.header-title[data-v-6a8052a0] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 1.3;
}
.header-subtitle[data-v-6a8052a0] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
  line-height: 1.4;
}
.category-filter[data-v-6a8052a0] {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (min-width: 768px) {
.category-filter[data-v-6a8052a0] {
    width: 240px;
}
}

/* Tabs */
.tabs-row[data-v-6a8052a0] {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.tab-btn[data-v-6a8052a0] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  background: var(--q-dark);
  color: #475569;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  line-height: 1.4;
}
.tab-btn[data-v-6a8052a0]:hover {
  background: #f1f5f9;
  color: #1e293b;
}
.tab-active[data-v-6a8052a0] {
  background: var(--q-primary);
  color: white;
  box-shadow: 0 4px 6px rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
}
.tab-active[data-v-6a8052a0]:hover {
  background: var(--q-primary);
  color: white;
}
.tab-badge[data-v-6a8052a0] {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.tab-btn:not(.tab-active) .tab-badge[data-v-6a8052a0] {
  background: #e2e8f0;
  color: #64748b;
}

/* Tab Content */
.tab-content[data-v-6a8052a0] {
  min-height: 200px;
}
.materials-section[data-v-6a8052a0] {
  animation: fadeIn-6a8052a0 0.3s ease;
}

/* Empty State */
.empty-state[data-v-6a8052a0] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed #cbd5e1;
}
.empty-icon[data-v-6a8052a0] {
  color: #cbd5e1;
  margin-bottom: 16px;
}
.empty-state p[data-v-6a8052a0] {
  color: var(--q-positive);
  margin: 0;
  line-height: 1.4;
}

/* Shelves List */
.shelves-list[data-v-6a8052a0] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Materials Grid */
.materials-grid[data-v-6a8052a0] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
.materials-grid[data-v-6a8052a0] {
    grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.materials-grid[data-v-6a8052a0] {
    grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1280px) {
.materials-grid[data-v-6a8052a0] {
    grid-template-columns: repeat(4, 1fr);
}
}

/* Material Card (for approvals inline cards) */
.material-card[data-v-6a8052a0] {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--q-info);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: all 0.2s;
  height: 100%;
}
.material-card[data-v-6a8052a0]:hover {
  border-color: rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.material-pending[data-v-6a8052a0] {
  border-left: 3px solid #f59e0b;
}
.material-header[data-v-6a8052a0] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.material-icon-box[data-v-6a8052a0] {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--q-dark);
  border: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.material-card:hover .material-icon-box[data-v-6a8052a0] {
  background: var(--q-info);
  border-color: rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
}
.icon-pdf[data-v-6a8052a0] { color: #ef4444;
}
.icon-video[data-v-6a8052a0] { color: #3b82f6;
}
.icon-doc[data-v-6a8052a0] { color: #1e40af;
}
.icon-link[data-v-6a8052a0] { color: #64748b;
}
.icon-article[data-v-6a8052a0] { color: #16a34a;
}
.icon-longread[data-v-6a8052a0] { color: #8b5cf6;
}
.icon-scorm[data-v-6a8052a0] { color: #f59e0b;
}
.icon-h5p[data-v-6a8052a0] { color: #0891b2;
}
.icon-media[data-v-6a8052a0] { color: #ec4899;
}
.icon-default[data-v-6a8052a0] { color: #64748b;
}
.material-type[data-v-6a8052a0] {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  background: var(--q-dark);
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1.4;
}
.material-type-pending[data-v-6a8052a0] {
  background: #fef3c7;
  color: #b45309;
}
.material-title[data-v-6a8052a0] {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}
.material-card:hover .material-title[data-v-6a8052a0] {
  color: var(--q-primary);
}
.material-title-link[data-v-6a8052a0] {
  cursor: pointer;
  transition: color 0.2s;
}
.material-title-link[data-v-6a8052a0]:hover {
  color: var(--q-primary);
}
.material-description[data-v-6a8052a0] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 0 0 16px 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.material-footer[data-v-6a8052a0] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  margin-top: auto;
}
.material-metadata[data-v-6a8052a0] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
  line-height: 1.4;
}
.material-open-btn[data-v-6a8052a0] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
  color: #475569;
  background: var(--q-dark);
}
.material-open-btn[data-v-6a8052a0]:hover {
  color: var(--q-primary);
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
}
.material-open-btn-primary[data-v-6a8052a0] {
  color: white;
  background: var(--q-primary);
}
.material-open-btn-primary[data-v-6a8052a0]:hover {
  filter: brightness(0.85);
  color: white;
}

/* Approval Dialog */
.approval-dialog-card[data-v-6a8052a0] {
  width: 90%;
  max-width: 600px;
  border-radius: 16px;
}
.approval-dialog-bar[data-v-6a8052a0] {
  background: var(--q-primary);
  color: white;
  padding: 8px 16px;
  min-height: 48px;
}
.approval-dialog-title[data-v-6a8052a0] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.approval-item-title[data-v-6a8052a0] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 8px 0;
  line-height: 1.4;
}
.approval-item-description[data-v-6a8052a0] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0 0 24px 0;
  line-height: 1.5;
}
.coordinators-section[data-v-6a8052a0] {
  background: var(--q-dark);
  border-radius: 12px;
  padding: 16px;
}
.coordinators-title[data-v-6a8052a0] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0 0 16px 0;
  line-height: 1.4;
}
.coordinator-group[data-v-6a8052a0] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.coordinator-item[data-v-6a8052a0] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  background: var(--q-info);
  border-radius: 8px;
}
.coordinator-avatar[data-v-6a8052a0] {
  background: #e2e8f0;
  color: #64748b;
}
.coordinator-info[data-v-6a8052a0] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.coordinator-name[data-v-6a8052a0] {
  font-size: 14px;
  font-weight: 500;
  color: var(--q-accent);
  line-height: 1.4;
}
.coordinator-status[data-v-6a8052a0] {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.status-approved[data-v-6a8052a0] {
  color: var(--q-secondary);
}
.status-waiting[data-v-6a8052a0] {
  color: #f59e0b;
}
.approval-actions[data-v-6a8052a0] {
  padding: 16px 24px;
  border-top: 1px solid #e2e8f0;
}
.cancel-btn[data-v-6a8052a0] {
  color: var(--q-positive);
}
.save-btn[data-v-6a8052a0] {
  border-radius: 8px;
}


/* Блокирующее модальное окно «Заполните профиль» — стиль нового интерфейса */
.profile-fill-modal[data-v-5c3fff23] {
  border-radius: 16px;
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.profile-fill-modal .modal-header[data-v-5c3fff23] {
  background: rgb(248, 250, 252);
  border-bottom: 1px solid rgb(241, 245, 249);
  padding: 16px 20px;
}
.profile-fill-modal .modal-body[data-v-5c3fff23] {
  overflow-y: auto;
  flex: 1;
}
.profile-fill-modal .form-fields[data-v-5c3fff23] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.profile-fill-modal .field-group[data-v-5c3fff23] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-fill-modal .field-label[data-v-5c3fff23] {
  font-size: 13px;
  font-weight: 700;
  color: rgb(51, 65, 85);
}
.profile-fill-modal .field-input[data-v-5c3fff23] .q-field__control {
  border-radius: 12px;
  background: rgb(248, 250, 252);
}
.profile-fill-modal .field-input[data-v-5c3fff23] .q-field__control:hover,
.profile-fill-modal .field-input[data-v-5c3fff23] .q-field--focused .q-field__control {
  background: white;
}
.profile-fill-modal .modal-footer[data-v-5c3fff23] {
  background: rgb(248, 250, 252);
  border-top: 1px solid rgb(241, 245, 249);
  padding: 16px 20px;
}
.profile-fill-modal .action-btn[data-v-5c3fff23] {
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}
.profile-fill-modal .publish-btn[data-v-5c3fff23] {
  box-shadow: 0 1px 3px rgba(var(--q-primary-rgb, 225, 29, 72), 0.2);
}
.loading-state[data-v-5c3fff23] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px;
}
.loader[data-v-5c3fff23] {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-5c3fff23 0.8s linear infinite;
}
@keyframes spin-5c3fff23 {
to {
    transform: rotate(360deg);
}
}
.no-data[data-v-5c3fff23] {
  padding: 20px;
  text-align: center;
  color: var(--q-positive);
}
.profile-container[data-v-5c3fff23] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 32px;
  animation: fadeSlideIn-5c3fff23 0.5s ease-out;
}
@keyframes fadeSlideIn-5c3fff23 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Header Card */
.header-card[data-v-5c3fff23] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 16px 24px;
  position: relative;
  overflow: hidden;
}
.header-gradient[data-v-5c3fff23] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 96px;
  background: linear-gradient(to right, var(--q-primary), color-mix(in srgb, var(--q-primary) 80%, #000));
}
.header-content[data-v-5c3fff23] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
}
@media (min-width: 768px) {
.header-content[data-v-5c3fff23] {
    flex-direction: row;
    align-items: flex-end;
}
}
.avatar[data-v-5c3fff23] {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 4px solid var(--q-info);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
  overflow: hidden;
  flex-shrink: 0;
}
.avatar img[data-v-5c3fff23] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-info[data-v-5c3fff23] {
  flex: 1;
  text-align: center;
  margin-bottom: 8px;
}
@media (min-width: 768px) {
.user-info[data-v-5c3fff23] {
    text-align: left;
}
}
.user-name-row[data-v-5c3fff23] {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
@media (min-width: 768px) {
.user-name-row[data-v-5c3fff23] {
    justify-content: flex-start;
}
}
.user-name[data-v-5c3fff23] {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  margin-top: 50px;
  line-height: 20px;
}
@media (max-width: 768px) {
.user-name[data-v-5c3fff23] {
    margin: 0;
}
}
.edit-name-btn[data-v-5c3fff23] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  color: var(--q-primary);
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 50px;
}
.edit-name-btn[data-v-5c3fff23]:hover {
  background: var(--q-primary);
  color: var(--q-info);
  transform: scale(1.1);
}
@media (max-width: 768px) {
.edit-name-btn[data-v-5c3fff23] {
    margin-top: 0;
}
}
.user-position[data-v-5c3fff23] {
  font-size: 1.125rem;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.user-meta[data-v-5c3fff23] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--q-positive);
}
@media (min-width: 768px) {
.user-meta[data-v-5c3fff23] {
    justify-content: flex-start;
}
}
.department-badge[data-v-5c3fff23] {
  background: var(--q-dark);
  padding: 4px 8px;
  border-radius: 4px;
}
.user-id[data-v-5c3fff23] {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Content Grid */
.content-grid[data-v-5c3fff23] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 1024px) {
.content-grid[data-v-5c3fff23] {
    grid-template-columns: 1fr 2fr;
}
}
.left-column[data-v-5c3fff23],
.right-column[data-v-5c3fff23] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Cards */
.card[data-v-5c3fff23] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 16px;
}
.card-title[data-v-5c3fff23] {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 16px 0;
}
.card-title-with-icon[data-v-5c3fff23] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-header[data-v-5c3fff23] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.card-header .card-title[data-v-5c3fff23] {
  margin-bottom: 0;
}

/* Icons */
.icon-amber[data-v-5c3fff23] {
  color: var(--q-warning);
}
.icon-blue[data-v-5c3fff23] {
  color: var(--q-primary);
}
.icon-emerald[data-v-5c3fff23] {
  color: var(--q-secondary);
}

/* Contacts */
.contacts-list[data-v-5c3fff23] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-item[data-v-5c3fff23] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.contact-icon[data-v-5c3fff23] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--q-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
  flex-shrink: 0;
}
.contact-details[data-v-5c3fff23] {
  min-width: 0;
  flex: 1;
}
.contact-label[data-v-5c3fff23] {
  font-size: 0.75rem;
  color: var(--q-positive);
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}
.contact-value[data-v-5c3fff23] {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--q-primary);
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-value[data-v-5c3fff23]:hover {
  text-decoration: underline;
}
.contact-link[data-v-5c3fff23] {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Certificates */
.certificates-list[data-v-5c3fff23] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.certificate-item[data-v-5c3fff23] {
  padding: 12px;
  background: var(--q-dark);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-dark));
}
.certificate-title[data-v-5c3fff23] {
  font-weight: 600;
  color: var(--q-accent);
  font-size: 0.875rem;
  margin-bottom: 4px;
}
.certificate-meta[data-v-5c3fff23] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--q-positive);
}
.no-certificates[data-v-5c3fff23] {
  font-size: 0.875rem;
  color: var(--q-positive);
  font-style: italic;
  margin: 0;
}
.add-certificate-btn[data-v-5c3fff23] {
  width: 100%;
  padding: 8px;
  margin-top: 8px;
  border: 1px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  background: transparent;
  color: var(--q-positive);
  border-radius: 12px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}
.add-certificate-btn[data-v-5c3fff23]:hover {
  border-color: var(--q-primary);
  color: var(--q-primary);
}

/* Edit Actions */
.edit-actions[data-v-5c3fff23] {
  display: flex;
  gap: 8px;
}
.edit-btn[data-v-5c3fff23] {
  color: var(--q-positive);
  padding: 8px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.edit-btn[data-v-5c3fff23]:hover {
  color: var(--q-primary);
  background: var(--q-dark);
}
.cancel-btn[data-v-5c3fff23] {
  padding: 8px;
  color: var(--q-positive);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color 0.2s;
}
.cancel-btn[data-v-5c3fff23]:hover {
  color: var(--q-accent);
}
.save-btn[data-v-5c3fff23] {
  padding: 8px;
  color: var(--q-success);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color 0.2s;
}
.save-btn[data-v-5c3fff23]:hover {
  color: color-mix(in srgb, var(--q-success) 80%, #000);
}

/* Edit Textarea */
.edit-textarea[data-v-5c3fff23] {
  width: 100%;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  outline: none;
  min-height: 150px;
  font-size: 0.875rem;
  line-height: 1.6;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.edit-textarea[data-v-5c3fff23]:focus {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--q-primary);
}

/* Content Text */
.content-text[data-v-5c3fff23] {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--q-positive);
  white-space: pre-wrap;
}

/* Modal Overlay */
.modal-overlay[data-v-5c3fff23] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn-5c3fff23 0.2s ease-out;
}
@keyframes fadeIn-5c3fff23 {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

/* Modal Content */
.modal-content[data-v-5c3fff23] {
  background: var(--q-info);
  border-radius: 20px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: slideUp-5c3fff23 0.3s ease-out;
}
@keyframes slideUp-5c3fff23 {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.modal-header[data-v-5c3fff23] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  background: linear-gradient(135deg, var(--q-primary) 0%, color-mix(in srgb, var(--q-primary) 85%, #000) 50%, color-mix(in srgb, var(--q-primary) 70%, #000) 100%);
  border-radius: 20px 20px 0 0;
}
.modal-title[data-v-5c3fff23] {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--q-info);
  margin: 0;
}
.modal-close[data-v-5c3fff23] {
  background: color-mix(in srgb, var(--q-info) 20%, transparent);
  border: none;
  color: var(--q-info);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.modal-close[data-v-5c3fff23]:hover {
  background: color-mix(in srgb, var(--q-info) 30%, transparent);
}
.modal-body[data-v-5c3fff23] {
  padding: 24px;
}
.section-title[data-v-5c3fff23] {
  font-size: 1rem;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.fio-section[data-v-5c3fff23] {
  margin-top: 24px;
}

/* Admin Panel (keep for backwards compatibility) */
.admin-panel[data-v-5c3fff23] {
  margin-bottom: 16px;
}
.admin-btn-danger[data-v-5c3fff23] {
  background: color-mix(in srgb, var(--q-warning) 10%, var(--q-info)) !important;
  border-color: color-mix(in srgb, var(--q-warning) 30%, var(--q-info)) !important;
  color: var(--q-warning) !important;
}
.admin-btn-danger[data-v-5c3fff23]:hover {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info)) !important;
  border-color: color-mix(in srgb, var(--q-warning) 40%, var(--q-info)) !important;
}
.admin-actions[data-v-5c3fff23] {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.admin-btn[data-v-5c3fff23] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
  color: var(--q-positive);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}
.admin-btn[data-v-5c3fff23]:hover {
  background: color-mix(in srgb, var(--q-accent) 5%, var(--q-dark));
  color: var(--q-primary);
  border-color: var(--q-primary);
}

/* Password Form */
.password-form[data-v-5c3fff23] {
  padding: 16px;
  background: var(--q-dark);
  border-radius: 12px;
  margin-bottom: 16px;
}
.password-hint[data-v-5c3fff23] {
  font-size: 0.875rem;
  color: var(--q-positive);
  margin: 0 0 12px 0;
}
.password-input[data-v-5c3fff23] {
  width: 100%;
  max-width: 300px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
  font-size: 0.875rem;
  margin-bottom: 8px;
  display: block;
}
.password-input[data-v-5c3fff23]:focus {
  outline: none;
  border-color: var(--q-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--q-primary) 10%, transparent);
}
.password-actions[data-v-5c3fff23] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.save-password-btn[data-v-5c3fff23] {
  padding: 8px 16px;
  background: var(--q-primary);
  color: var(--q-info);
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s;
}
.save-password-btn[data-v-5c3fff23]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 80%, #000);
}
.save-password-btn[data-v-5c3fff23]:disabled {
  background: color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  cursor: not-allowed;
}
.password-error[data-v-5c3fff23] {
  color: var(--q-warning);
  font-size: 0.75rem;
}
.password-success[data-v-5c3fff23] {
  color: var(--q-success);
  font-size: 0.875rem;
  margin: 8px 0 0 0;
}
.password-fail[data-v-5c3fff23] {
  color: var(--q-warning);
  font-size: 0.875rem;
  margin: 8px 0 0 0;
}

/* FIO Form */
.fio-form[data-v-5c3fff23] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.form-group[data-v-5c3fff23] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-group label[data-v-5c3fff23] {
  font-size: 0.75rem;
  color: var(--q-positive);
  font-weight: 600;
  text-transform: uppercase;
}
.form-input[data-v-5c3fff23] {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
  font-size: 0.875rem;
  background: var(--q-info);
}
.form-input[data-v-5c3fff23]:focus {
  outline: none;
  border-color: var(--q-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--q-primary) 10%, transparent);
}

/* Email Edit */
.email-edit[data-v-5c3fff23] {
  margin-top: 4px;
}
.email-input[data-v-5c3fff23] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--q-primary);
}
.email-input[data-v-5c3fff23]:focus {
  outline: none;
  border-color: var(--q-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--q-primary) 10%, transparent);
}

/* Certificate Image Item */
.certificate-image-item[data-v-5c3fff23] {
  position: relative;
  padding: 8px;
  display: inline-block;
}
.certificate-thumbnail[data-v-5c3fff23] {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 1px dashed color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  transition: transform 0.2s;
}
.certificate-thumbnail[data-v-5c3fff23]:hover {
  transform: scale(1.05);
}
.delete-cert-btn[data-v-5c3fff23] {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(30%, -30%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--q-primary);
  color: var(--q-info);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.delete-cert-btn[data-v-5c3fff23]:hover {
  background: color-mix(in srgb, var(--q-primary) 80%, #000);
}
.file-input-hidden[data-v-5c3fff23] {
  display: none;
}
.add-certificate-btn[data-v-5c3fff23] {
  display: block;
  text-align: center;
}
.upload-btn[data-v-5c3fff23] {
  width: 100%;
  padding: 10px;
  background: var(--q-primary);
  color: var(--q-info);
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 8px;
}
.upload-btn[data-v-5c3fff23]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 80%, #000);
}
.upload-btn[data-v-5c3fff23]:disabled {
  background: color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  cursor: not-allowed;
}

/* Certificate Upload Loader */
.btn-loader[data-v-5c3fff23] {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--q-info) 30%, transparent);
  border-top-color: var(--q-info);
  border-radius: 50%;
  animation: spin-5c3fff23 0.8s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}
@keyframes spin-5c3fff23 {
to {
    transform: rotate(360deg);
}
}

/* Certificate Popup */
.cert-popup-content[data-v-5c3fff23] {
  background: var(--q-info);
  border-radius: 20px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: slideUp-5c3fff23 0.3s ease-out;
  display: flex;
  flex-direction: column;
}
.cert-popup-header[data-v-5c3fff23] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  background: var(--q-dark);
}
.cert-popup-title[data-v-5c3fff23] {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0;
}
.cert-popup-body[data-v-5c3fff23] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--q-dark);
  overflow: auto;
}
.cert-popup-image[data-v-5c3fff23] {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.cert-popup-nav[data-v-5c3fff23] {
  display: flex;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  background: var(--q-info);
}
.cert-nav-btn[data-v-5c3fff23] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 10px;
  color: var(--q-positive);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.cert-nav-btn[data-v-5c3fff23]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-accent) 5%, var(--q-dark));
  border-color: var(--q-primary);
  color: var(--q-primary);
}
.cert-nav-btn[data-v-5c3fff23]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cert-close-btn[data-v-5c3fff23] {
  padding: 10px 24px;
  background: var(--q-primary);
  border: none;
  border-radius: 10px;
  color: var(--q-info);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.cert-close-btn[data-v-5c3fff23]:hover {
  background: color-mix(in srgb, var(--q-primary) 80%, #000);
}

/* Certificates Loader */
.certs-loader[data-v-5c3fff23] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  color: var(--q-positive);
  font-size: 0.875rem;
}
.certs-spinner[data-v-5c3fff23] {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-5c3fff23 0.8s linear infinite;
}

/* Clear Profile Dialog */
.clear-profile-dialog[data-v-5c3fff23] {
  border-radius: 20px;
  width: 400px;
  max-width: 90vw;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.clear-dialog-header[data-v-5c3fff23] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px 16px;
}
.clear-dialog-icon[data-v-5c3fff23] {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--q-warning) 12%, var(--q-info));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-warning);
  margin-bottom: 16px;
}
.clear-dialog-title[data-v-5c3fff23] {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 8px 0;
}
.clear-dialog-message[data-v-5c3fff23] {
  font-size: 0.875rem;
  color: var(--q-positive);
  margin: 0 0 8px 0;
  line-height: 1.5;
}
.clear-dialog-warning[data-v-5c3fff23] {
  font-size: 0.75rem;
  color: var(--q-warning);
  margin: 0;
  font-weight: 500;
}
.clear-dialog-actions[data-v-5c3fff23] {
  display: flex;
  gap: 12px;
  padding: 16px 24px 24px;
  justify-content: center;
}
.clear-dialog-cancel[data-v-5c3fff23] {
  flex: 1;
  padding: 10px 20px;
  background: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 10px;
  color: var(--q-positive);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.clear-dialog-cancel[data-v-5c3fff23]:hover {
  background: color-mix(in srgb, var(--q-accent) 5%, var(--q-dark));
  color: var(--q-accent);
}
.clear-dialog-confirm[data-v-5c3fff23] {
  flex: 1;
  padding: 10px 20px;
  background: var(--q-warning);
  border: none;
  border-radius: 10px;
  color: var(--q-info);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.clear-dialog-confirm[data-v-5c3fff23]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-warning) 85%, #000);
}
.clear-dialog-confirm[data-v-5c3fff23]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Warning Banner */
.warning-banner[data-v-5c3fff23] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--q-warning) 10%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-warning) 30%, var(--q-info));
  border-radius: 12px;
  color: var(--q-warning);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Form Select */
.form-select[data-v-5c3fff23] {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}


.loading-state[data-v-23210c44] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px;
}
.loader[data-v-23210c44] {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-23210c44 0.8s linear infinite;
}
@keyframes spin-23210c44 {
to {
    transform: rotate(360deg);
}
}
.competencies-container[data-v-23210c44] {
  display: flex;
  flex-direction: column;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-23210c44 0.5s ease-in-out;
}
@keyframes fadeIn-23210c44 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.header-card[data-v-23210c44] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.header-icon-box[data-v-23210c44] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.header-title[data-v-23210c44] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-23210c44] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
}
.empty-state[data-v-23210c44] {
  padding: 32px;
  text-align: center;
  color: var(--q-positive);
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.profile-section[data-v-23210c44] {
  display: flex;
  flex-direction: column;
}
.profile-header[data-v-23210c44] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
}
.profile-icon[data-v-23210c44] {
  color: var(--q-positive);
}
.profile-title[data-v-23210c44] {
  font-size: 20px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.competencies-list[data-v-23210c44] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.competency-card[data-v-23210c44] {
  background: var(--q-info);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}
.competency-card[data-v-23210c44]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 50%, var(--q-info));
}
.competency-header[data-v-23210c44] {
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.competency-header[data-v-23210c44]:hover {
  background: var(--q-dark);
}
.competency-icon-box[data-v-23210c44] {
  padding: 8px;
  border-radius: 8px;
  flex-shrink: 0;
  transition: all 0.2s;
}
.icon-closed[data-v-23210c44] {
  background: var(--q-dark);
  color: var(--q-positive);
}
.icon-open[data-v-23210c44] {
  background: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  color: var(--q-primary);
}
.competency-content[data-v-23210c44] {
  flex: 1;
  min-width: 0;
}
.competency-top[data-v-23210c44] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.competency-title[data-v-23210c44] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.level-badge[data-v-23210c44] {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  background: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
  color: var(--q-secondary);
  border: 1px solid color-mix(in srgb, var(--q-secondary) 25%, var(--q-info));
  align-self: flex-start;
}
.chevron-icon[data-v-23210c44] {
  color: var(--q-positive);
  flex-shrink: 0;
  margin-top: 8px;
}
.indicators-section[data-v-23210c44] {
  background: color-mix(in srgb, var(--q-dark) 50%, transparent);
  border-top: 1px solid var(--q-dark);
  padding-bottom: 20px;
  padding-left: 64px;
  animation: fadeInSlide-23210c44 0.2s ease-in-out;
}
@keyframes fadeInSlide-23210c44 {
from {
    opacity: 0;
    transform: translateY(-8px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.indicators-title[data-v-23210c44] {
  font-size: 10px;
  font-weight: 700;
  color: var(--q-positive);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 20px;
  margin: 10px 0px;
}
.indicators-list[data-v-23210c44] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.indicator-item[data-v-23210c44] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--q-accent);
}
.indicator-icon[data-v-23210c44] {
  color: var(--q-success);
  margin-top: 2px;
  flex-shrink: 0;
}
@media (min-width: 640px) {
.competency-top[data-v-23210c44] {
    flex-direction: row;
    align-items: center;
}
.level-badge[data-v-23210c44] {
    align-self: auto;
}
}
@media (max-width: 640px) {
.competency-header[data-v-23210c44] {
    padding: 16px;
}
.indicators-section[data-v-23210c44] {
    padding: 16px;
    padding-left: 16px;
}
}


/* Main container - gap-6 = 24px, max-w-5xl = 1024px, pb-10 = 40px */
.ipr-view[data-v-b91c9112] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-b91c9112 0.5s ease-out;
}
@keyframes fadeIn-b91c9112 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.loading-state[data-v-b91c9112] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  gap: 16px;
}
.loading-text[data-v-b91c9112] {
  color: var(--q-positive);
  font-size: 14px;
  margin: 0;
}
.no-data[data-v-b91c9112] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.no-data-icon[data-v-b91c9112] {
  color: var(--q-positive);
  margin-bottom: 16px;
}
.no-data p[data-v-b91c9112] {
  font-size: 16px;
  color: var(--q-positive);
  margin: 0;
}

/* ========== HEADER CARD ========== */
/* p-6 md:p-8 = 24px / 32px, rounded-2xl = 16px, border-slate-200, shadow-sm */
.header-card[data-v-b91c9112] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
}
@media (min-width: 768px) {
.header-card[data-v-b91c9112] {
    padding: 32px;
}
}

/* flex gap-6 = 24px */
.header-content[data-v-b91c9112] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
@media (min-width: 768px) {
.header-content[data-v-b91c9112] {
    flex-direction: row;
}
}
.header-main[data-v-b91c9112] {
  flex: 1;
}

/* gap-3 = 12px, mb-2 = 8px */
.header-badges[data-v-b91c9112] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

/* px-3 py-1 = 12px 4px, text-xs = 12px */
.ipr-badge[data-v-b91c9112] {
  padding: 4px 12px;
  background: rgba(var(--q-primary-rgb, 225, 29, 72), 0.1);
  color: var(--q-primary);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* text-slate-400 text-sm = 14px */
.date-text[data-v-b91c9112] {
  color: var(--q-positive);
  font-size: 14px;
}

/* text-3xl = 30px, mb-6 = 24px */
.title[data-v-b91c9112] {
  font-size: 30px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 24px 0;
  line-height: 1.2;
}

/* gap-8 = 32px */
.people-row[data-v-b91c9112] {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

/* gap-3 = 12px */
.person-item[data-v-b91c9112] {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* w-10 h-10 = 40px */
.person-avatar[data-v-b91c9112] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--q-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
}

/* text-xs = 12px */
.person-label[data-v-b91c9112] {
  font-size: 12px;
  color: var(--q-positive);
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}

/* text-sm = 14px */
.person-name[data-v-b91c9112] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0;
}

/* ========== ATTACHMENTS ========== */
/* w-64 = 256px, p-4 = 16px, rounded-xl = 12px */
.attachments-box[data-v-b91c9112] {
  width: 100%;
  background: var(--q-dark);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
@media (min-width: 768px) {
.attachments-box[data-v-b91c9112] {
    width: 256px;
}
}

/* text-sm = 14px, gap-2 = 8px, mb-3 = 12px */
.attachments-title[data-v-b91c9112] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-positive);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 0;
}

/* space-y-2 = gap 8px */
.attachments-list[data-v-b91c9112] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* text-sm = 14px, gap-2 = 8px */
.attachment-link[data-v-b91c9112] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--q-accent);
  text-decoration: none;
  transition: color 0.2s;
}
.attachment-link[data-v-b91c9112]:hover {
  color: var(--q-primary);
}
.file-icon[data-v-b91c9112] {
  color: var(--q-positive);
  transition: color 0.2s;
}
.attachment-link:hover .file-icon[data-v-b91c9112] {
  color: var(--q-primary);
}
.file-name[data-v-b91c9112] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.download-icon[data-v-b91c9112] {
  opacity: 0;
  transition: opacity 0.2s;
}
.attachment-link:hover .download-icon[data-v-b91c9112] {
  opacity: 1;
}

/* ========== COMPETENCIES ========== */
/* space-y-6 = gap 24px */
.competencies-list[data-v-b91c9112] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* rounded-2xl = 16px */
.competency-card[data-v-b91c9112] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* bg-slate-50/50, p-6 = 24px */
.comp-header[data-v-b91c9112] {
  background: var(--q-dark);
  padding: 8px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}

/* gap-4 = 16px */
.comp-header-content[data-v-b91c9112] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
@media (min-width: 768px) {
.comp-header-content[data-v-b91c9112] {
    flex-direction: row;
    align-items: center;
}
}

/* text-xl = 20px, gap-2 = 8px */
.comp-title[data-v-b91c9112] {
  font-size: 20px;
  font-weight: 700;
  color: var(--q-accent);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.comp-icon[data-v-b91c9112] {
  color: var(--q-primary);
}

/* px-3 py-1 = 12px 4px, text-xs = 12px */
.target-level[data-v-b91c9112] {
  padding: 4px 12px;
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--q-positive);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* p-6 = 24px */
.comp-body[data-v-b91c9112] {
  padding: 24px;
}

/* ========== INDICATORS ========== */
/* space-y-6 = gap 24px */
.indicators-list[data-v-b91c9112] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* p-4 = 16px, rounded-xl = 12px */
.indicator-box[data-v-b91c9112] {
  background: var(--q-dark);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}

/* text-sm = 14px, mb-4 = 16px, gap-2 = 8px */
.indicator-text[data-v-b91c9112] {
  font-size: 14px;
  font-weight: 500;
  color: var(--q-accent);
  margin: 0 0 16px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* w-1.5 h-1.5 = 6px, mt-1.5 = 6px */
.indicator-dot[data-v-b91c9112] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--q-positive);
  margin-top: 6px;
  flex-shrink: 0;
}

/* ========== ACTIVITIES ========== */
/* space-y-2 = gap 8px, pl-3 = 12px, border-l-2, ml-1 = 4px */
.activities-list[data-v-b91c9112] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  margin-left: 4px;
  margin-bottom: 8px;
}

/* p-3 = 12px, gap-3 = 12px, rounded-lg = 8px */
.activity-row[data-v-b91c9112] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 12px;
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  border-radius: 8px;
  gap: 12px;
}
@media (min-width: 640px) {
.activity-row[data-v-b91c9112] {
    flex-direction: row;
    align-items: center;
}
}

/* gap-3 = 12px */
.activity-info[data-v-b91c9112] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* p-2 = 8px, rounded-lg = 8px */
.activity-icon[data-v-b91c9112] {
  display: flex;
  padding: 8px;
  background: var(--q-dark);
  border-radius: 8px;
  color: var(--q-positive);
  height: -moz-fit-content;
  height: fit-content;
}
.activity-icon--course[data-v-b91c9112] {
  background: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
  color: var(--q-secondary);
}

/* text-sm = 14px */
.activity-title[data-v-b91c9112] {
  font-weight: 500;
  color: var(--q-accent);
  font-size: 14px;
  margin: 0;
}

/* gap-2 = 8px, mt-1 = 4px */
.activity-meta[data-v-b91c9112] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

/* text-xs = 12px, gap-1 = 4px */
.activity-deadline[data-v-b91c9112] {
  font-size: 12px;
  color: var(--q-positive);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* text-[10px] = 10px, px-1.5 = 6px */
.course-badge[data-v-b91c9112] {
  font-size: 10px;
  background: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
  color: var(--q-secondary);
  padding: 0 6px;
  border-radius: 4px;
}
.ipr-course-link[data-v-b91c9112] {
  cursor: pointer;
  color: var(--q-primary);
  transition: opacity 0.15s;
}
.ipr-course-link[data-v-b91c9112]:hover {
  opacity: 0.7;
  text-decoration: underline;
}
.activity-status[data-v-b91c9112] {
  flex-shrink: 0;
  align-self: flex-end;
}
@media (min-width: 640px) {
.activity-status[data-v-b91c9112] {
    align-self: center;
}
}

/* ========== STATUS BUTTON ========== */
/* gap-1.5 = 6px, px-3 py-1 = 12px 4px, rounded-lg = 8px, text-xs = 12px */
.status-btn[data-v-b91c9112] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.2s;
}
.status-btn[data-v-b91c9112]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* bg-green-100 text-green-700 border-green-200 */
.status-btn--completed[data-v-b91c9112] {
  background: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  color: var(--q-success);
  border-color: color-mix(in srgb, var(--q-success) 25%, var(--q-info));
}
.status-btn--completed[data-v-b91c9112]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-success) 25%, var(--q-info));
}

/* bg-blue-100 text-blue-700 border-blue-200 */
.status-btn--in-progress[data-v-b91c9112] {
  background: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
  color: var(--q-secondary);
  border-color: color-mix(in srgb, var(--q-secondary) 25%, var(--q-info));
}
.status-btn--in-progress[data-v-b91c9112]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-secondary) 25%, var(--q-info));
}

/* bg-slate-100 text-slate-500 border-slate-200 */
.status-btn--not-started[data-v-b91c9112] {
  background: var(--q-dark);
  color: var(--q-positive);
  border-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.status-btn--not-started[data-v-b91c9112]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}



.catalog-ipr-view[data-v-616d2c00] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeIn-616d2c00 0.5s ease-out;
}
@keyframes fadeIn-616d2c00 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Page Header */
.page-header[data-v-616d2c00] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
@media (min-width: 768px) {
.page-header[data-v-616d2c00] {
    flex-direction: row;
}
}
.page-header-content[data-v-616d2c00] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.page-header-icon-box[data-v-616d2c00] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.page-header-title[data-v-616d2c00] {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  color: var(--q-accent);
  margin: 0;
}
.page-header-subtitle[data-v-616d2c00] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}

/* Loading State */
.loading-state[data-v-616d2c00] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.loading-text[data-v-616d2c00] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 20px 0 0 0;
}

/* Empty State */
.empty-state[data-v-616d2c00] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.empty-icon-box[data-v-616d2c00] {
  width: 72px;
  height: 72px;
  background: var(--q-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--q-positive);
}
.empty-title[data-v-616d2c00] {
  font-size: 18px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0 0 8px 0;
}
.empty-text[data-v-616d2c00] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
  max-width: 300px;
}

/* IPR Grid */
.ipr-grid[data-v-616d2c00] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
.ipr-grid[data-v-616d2c00] {
    grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.ipr-grid[data-v-616d2c00] {
    grid-template-columns: 1fr 1fr 1fr;
}
}

/* IPR Card */
.ipr-card[data-v-616d2c00] {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  text-align: left;
  transition: all 0.3s;
  cursor: pointer;
  background: var(--q-info);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ipr-card[data-v-616d2c00]:hover:not(.ipr-completed) {
  border-color: color-mix(in srgb, var(--q-primary) 40%, var(--q-info));
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.ipr-completed[data-v-616d2c00] {
  background: var(--q-dark);
  border-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  opacity: 0.7;
}

/* Status Badge */
.status-badge[data-v-616d2c00] {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.status-completed[data-v-616d2c00] {
  color: var(--q-success);
  background: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
}
.status-in-progress[data-v-616d2c00] {
  color: var(--q-secondary);
  background: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
}
.status-not-started[data-v-616d2c00] {
  color: var(--q-positive);
  background: var(--q-dark);
}

/* IPR Avatar */
.ipr-avatar[data-v-616d2c00] {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
  border: 1px solid var(--q-dark);
  transition: border 0.3s;
  margin-top: 20px;
}
.ipr-avatar .q-icon[data-v-616d2c00] {
  font-size: 22px;
}
.ipr-card:hover .ipr-avatar[data-v-616d2c00] {
  border-color: color-mix(in srgb, var(--q-primary) 40%, var(--q-info));
}

/* IPR Info */
.ipr-info[data-v-616d2c00] {
  flex: 1;
  min-width: 0;
  padding-top: 20px;
}
.ipr-name[data-v-616d2c00] {
  font-size: 15px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0;
  transition: color 0.2s;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ipr-card:hover .ipr-name[data-v-616d2c00] {
  color: var(--q-primary);
}
.ipr-person[data-v-616d2c00] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 2px 0 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* IPR Meta */
.ipr-meta[data-v-616d2c00] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-top: 8px;
  color: var(--q-positive);
}
.meta-date[data-v-616d2c00] {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--q-dark);
  padding: 3px 8px;
  border-radius: 4px;
}
.meta-comp[data-v-616d2c00] {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Progress Row - progress + chevron on same level */
.progress-row[data-v-616d2c00] {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 12px;
}

/* Progress Section */
.progress-section[data-v-616d2c00] {
  flex: 1;
  min-width: 0;
}
.progress-header[data-v-616d2c00] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.progress-label[data-v-616d2c00] {
  font-size: 11px;
  color: var(--q-positive);
  text-transform: uppercase;
  font-weight: 600;
}
.progress-value[data-v-616d2c00] {
  font-size: 12px;
  font-weight: 700;
  color: var(--q-primary);
}
.progress-bar[data-v-616d2c00] {
  width: 100%;
  height: 5px;
  background: var(--q-dark);
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill[data-v-616d2c00] {
  height: 100%;
  background: var(--q-primary);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Chevron Icon */
.chevron-icon[data-v-616d2c00] {
  flex-shrink: 0;
  color: var(--q-positive);
  transition: color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px;
}
.ipr-card:hover .chevron-icon[data-v-616d2c00] {
  color: var(--q-primary);
}


.degree360-container[data-v-7cab0b64] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
  animation: fadeIn-7cab0b64 0.3s ease-in-out;
  position: relative;
}
@keyframes fadeIn-7cab0b64 {
from {
    opacity: 0;
    transform: translateY(8px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Alert cards */
.alert-card[data-v-7cab0b64] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  font-size: 14px;
}
.alert-warning[data-v-7cab0b64] {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-warning) 30%, var(--q-info));
  color: var(--q-warning);
}
.alert-info[data-v-7cab0b64] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-primary) 20%, var(--q-info));
  color: var(--q-accent);
}
.alert-icon-box[data-v-7cab0b64] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.alert-icon-box.warning[data-v-7cab0b64] {
  background: color-mix(in srgb, var(--q-warning) 20%, var(--q-info));
  color: var(--q-warning);
}
.alert-icon-box.info[data-v-7cab0b64] {
  background: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  color: var(--q-primary);
}

/* Main card */
.main-card[data-v-7cab0b64] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* Sections */
.section[data-v-7cab0b64] {
  padding: 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.section[data-v-7cab0b64]:last-of-type {
  border-bottom: none;
}
.section-header[data-v-7cab0b64] {
  margin-bottom: 16px;
}
.section-title[data-v-7cab0b64] {
  font-size: 18px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0 0 4px 0;
}
.section-subtitle[data-v-7cab0b64] {
  font-size: 13px;
  color: var(--q-positive);
  margin: 0;
}

/* Button group */
.button-group[data-v-7cab0b64] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Action buttons */
.action-btn[data-v-7cab0b64] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}
.action-btn[data-v-7cab0b64]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.action-btn-outline[data-v-7cab0b64] {
  background: var(--q-info);
  color: var(--q-primary);
  border: 1.5px solid var(--q-primary);
}
.action-btn-outline[data-v-7cab0b64]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
}
.action-btn-filled[data-v-7cab0b64] {
  background: linear-gradient(135deg, var(--q-primary) 0%, color-mix(in srgb, var(--q-primary) 80%, #000) 100%);
  color: white;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--q-primary) 35%, transparent);
}
.action-btn-filled[data-v-7cab0b64]:hover:not(:disabled) {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--q-primary) 45%, transparent);
  transform: translateY(-1px);
}

/* Experts section */
.experts-section[data-v-7cab0b64] {
  padding: 0 24px 24px;
}
.expert-group[data-v-7cab0b64] {
  margin-bottom: 20px;
}
.expert-group[data-v-7cab0b64]:last-child {
  margin-bottom: 0;
}
.expert-group-header[data-v-7cab0b64] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
}
.expert-group-title[data-v-7cab0b64] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
}
.clear-btn[data-v-7cab0b64] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--q-positive);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  cursor: pointer;
  transition: all 0.2s;
}
.clear-btn[data-v-7cab0b64]:hover {
  background: var(--q-dark);
  color: var(--q-accent);
}

/* Chips */
.chips-container[data-v-7cab0b64] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.expert-chip[data-v-7cab0b64] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  border: 1.5px solid;
  transition: all 0.2s;
}
.chip-primary[data-v-7cab0b64] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  color: var(--q-primary);
}
.chip-secondary[data-v-7cab0b64] {
  background: color-mix(in srgb, var(--q-secondary) 10%, var(--q-info));
  border-color: color-mix(in srgb, var(--q-secondary) 30%, var(--q-info));
  color: var(--q-secondary);
}
.chip-remove[data-v-7cab0b64] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  transition: all 0.2s;
  margin-left: 4px;
}
.chip-remove[data-v-7cab0b64]:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

/* Agree section */
.agree-section[data-v-7cab0b64] {
  background: var(--q-dark);
}
.agree-user-info[data-v-7cab0b64] {
  background: var(--q-info);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.agree-label[data-v-7cab0b64] {
  font-size: 12px;
  color: var(--q-positive);
  margin-bottom: 4px;
}
.agree-name[data-v-7cab0b64] {
  font-size: 15px;
  font-weight: 600;
  color: var(--q-accent);
}
.info-hint[data-v-7cab0b64] {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--q-positive);
}
.info-hint .q-icon[data-v-7cab0b64] {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Card actions */
.card-actions[data-v-7cab0b64] {
  padding: 20px 24px;
  background: var(--q-dark);
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}

/* Loading overlay */
.loading-overlay[data-v-7cab0b64] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  z-index: 10;
}

/* Responsive */
@media (max-width: 480px) {
.button-group[data-v-7cab0b64] {
    flex-direction: column;
}
.action-btn[data-v-7cab0b64] {
    width: 100%;
}
.expert-group-header[data-v-7cab0b64] {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
}


.assessment-container[data-v-0c072d3c] {
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  position: relative;
  min-height: 200px;
}
/* Loading State */
.loading-state[data-v-0c072d3c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.loader[data-v-0c072d3c] {
  width: 48px;
  height: 48px;
  border: 3px solid var(--q-dark);
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-0c072d3c 0.8s linear infinite;
}
.rating-desc[data-v-0c072d3c] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
  margin-top: 8px;
  line-height: 1.4;
  text-align: center;
}
.loading-text[data-v-0c072d3c] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 20px 0 0 0;
  font-weight: 500;
}

/* Empty State */
.empty-state[data-v-0c072d3c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.empty-icon-box[data-v-0c072d3c] {
  width: 72px;
  height: 72px;
  background: var(--q-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--q-positive);
}
.empty-title[data-v-0c072d3c] {
  font-size: 18px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0 0 8px 0;
}
.empty-text[data-v-0c072d3c] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
  max-width: 300px;
}
.evaluation-view[data-v-0c072d3c] {
  animation: slideInRight-0c072d3c 0.3s ease-in-out;
}
@keyframes slideInRight-0c072d3c {
from {
    opacity: 0;
    transform: translateX(16px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}
.nav-header[data-v-0c072d3c] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.back-btn[data-v-0c072d3c] {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--q-positive);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}
.back-btn[data-v-0c072d3c]:hover {
  color: var(--q-primary);
}
.progress-text[data-v-0c072d3c] {
  font-size: 12px;
  font-weight: 600;
  color: var(--q-positive);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.target-header-card[data-v-0c072d3c] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
  margin-bottom: 24px;
}
.target-info[data-v-0c072d3c] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.target-avatar[data-v-0c072d3c] {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--q-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid var(--q-info);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.avatar-img[data-v-0c072d3c] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-icon[data-v-0c072d3c] {
  color: var(--q-positive);
}
.target-name[data-v-0c072d3c] {
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.target-position[data-v-0c072d3c] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
}
.target-dates[data-v-0c072d3c] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 0;
}
.description-card[data-v-0c072d3c] {
  background: var(--q-dark);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  border: 1px solid var(--q-dark);
}
.description-text[data-v-0c072d3c] {
  font-size: 14px;
  color: var(--q-positive);
  line-height: 1.5;
}
.competencies-form[data-v-0c072d3c] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.comp-card[data-v-0c072d3c] {
  background: var(--q-info);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}
.comp-card[data-v-0c072d3c]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 40%, var(--q-info));
}
.comp-header-section[data-v-0c072d3c] {
  margin-bottom: 16px;
}
.comp-title[data-v-0c072d3c] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  line-height: 30px;
  margin: 0;
}
.indicators-form[data-v-0c072d3c] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.indicator-row[data-v-0c072d3c] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
}
@media (min-width: 768px) {
.indicator-row[data-v-0c072d3c] {
    flex-direction: row;
    align-items: flex-start;
}
}
.indicator-border[data-v-0c072d3c] {
  border-top: 1px solid var(--q-dark);
  padding-top: 24px;
}
.indicator-text[data-v-0c072d3c] {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--q-accent);
  line-height: 1.5;
}
.rating-scale[data-v-0c072d3c] {
  flex-shrink: 0;
  min-width: 280px;
  max-width: 500px;
}
/* Custom Select */
.custom-select[data-v-0c072d3c] {
  position: relative;
}
.custom-select-trigger[data-v-0c072d3c] {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--q-positive);
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.custom-select-trigger[data-v-0c072d3c]:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--q-primary) 40%, var(--q-info));
}
.custom-select-open .custom-select-trigger[data-v-0c072d3c] {
  border-color: var(--q-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-primary) 15%, transparent);
}
.custom-select-trigger[data-v-0c072d3c]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.custom-select-filled .custom-select-value[data-v-0c072d3c] {
  color: var(--q-accent);
}
.custom-select-filled[data-v-0c072d3c] {
  border-color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 5%, var(--q-info));
}
.custom-select-loading[data-v-0c072d3c] {
  pointer-events: none;
  opacity: 0.7;
}
.custom-select-value[data-v-0c072d3c] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-select-icon[data-v-0c072d3c] {
  flex-shrink: 0;
  color: var(--q-positive);
  transition:
    transform 0.2s,
    color 0.2s;
}
.custom-select-open .custom-select-icon[data-v-0c072d3c] {
  transform: rotate(180deg);
  color: var(--q-primary);
}
.custom-select-trigger:hover .custom-select-icon[data-v-0c072d3c] {
  color: var(--q-primary);
}
.custom-select-spinner[data-v-0c072d3c] {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--q-primary) 30%, transparent);
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-0c072d3c 0.8s linear infinite;
}
.custom-select-dropdown[data-v-0c072d3c] {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  min-width: 100%;
  width: max-content;
  max-width: min(500px, calc(100vw - 48px));
}
.custom-select-option[data-v-0c072d3c] {
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.custom-select-option[data-v-0c072d3c]:hover {
  background: var(--q-dark);
}
.custom-select-option-selected[data-v-0c072d3c] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
}
.custom-select-option-selected[data-v-0c072d3c]:hover {
  background: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
}
.option-name[data-v-0c072d3c] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
  margin-bottom: 4px;
}
.custom-select-option-selected .option-name[data-v-0c072d3c] {
  color: var(--q-primary);
}
.option-desc[data-v-0c072d3c] {
  font-size: 13px;
  color: var(--q-positive);
  line-height: 1.5;
}
/* Dropdown transition */
.dropdown-enter-active[data-v-0c072d3c] {
  animation: dropdownIn-0c072d3c 0.2s ease-out;
}
.dropdown-leave-active[data-v-0c072d3c] {
  animation: dropdownIn-0c072d3c 0.15s ease-in reverse;
}
@keyframes dropdownIn-0c072d3c {
from {
    opacity: 0;
    transform: translateY(-8px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
@keyframes spin-0c072d3c {
to {
    transform: rotate(360deg);
}
}
.comment-card[data-v-0c072d3c] {
  background: var(--q-info);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.comment-title[data-v-0c072d3c] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.comment-icon[data-v-0c072d3c] {
  color: var(--q-primary);
}
.comment-hint[data-v-0c072d3c] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0 0 12px 0;
}
.submit-container[data-v-0c072d3c] {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  padding-bottom: 48px;
}
.completed-badge[data-v-0c072d3c] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 12px;
  font-weight: 700;
  color: var(--q-success);
  background: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-success) 30%, var(--q-info));
}
.list-view[data-v-0c072d3c] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeIn-0c072d3c 0.5s ease-in-out;
}
@keyframes fadeIn-0c072d3c {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.list-header[data-v-0c072d3c] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
@media (min-width: 768px) {
.list-header[data-v-0c072d3c] {
    flex-direction: row;
}
}
.header-content[data-v-0c072d3c] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-icon-box[data-v-0c072d3c] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.list-title[data-v-0c072d3c] {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  color: var(--q-accent);
  margin: 0;
}
.list-subtitle[data-v-0c072d3c] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.remaining-box[data-v-0c072d3c] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  background: var(--q-dark);
  padding: 8px 16px;
  border-radius: 8px;
  color: var(--q-positive);
}
.targets-grid[data-v-0c072d3c] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
.targets-grid[data-v-0c072d3c] {
    grid-template-columns: 1fr 1fr;
}
}
.target-card[data-v-0c072d3c] {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  text-align: left;
  transition: all 0.3s;
  cursor: pointer;
  background: var(--q-info);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.target-card[data-v-0c072d3c]:hover:not(.target-completed) {
  border-color: color-mix(in srgb, var(--q-primary) 40%, var(--q-info));
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.target-completed[data-v-0c072d3c] {
  background: var(--q-dark);
  border-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  opacity: 0.6;
  cursor: default;
}
.status-badge[data-v-0c072d3c] {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.status-completed[data-v-0c072d3c] {
  color: var(--q-success);
  background: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
}
.status-in-progress[data-v-0c072d3c] {
  color: var(--q-secondary);
  background: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
}
.target-avatar-list[data-v-0c072d3c] {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--q-dark);
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--q-dark);
  transition: border 0.3s;
}
.target-card:hover .target-avatar-list[data-v-0c072d3c] {
  border-color: color-mix(in srgb, var(--q-primary) 40%, var(--q-info));
}
.target-avatar-img[data-v-0c072d3c] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.target-avatar-placeholder[data-v-0c072d3c] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
}
.target-info-list[data-v-0c072d3c] {
  flex: 1;
  min-width: 0;
  padding-right: 64px;
}
.target-name-list[data-v-0c072d3c] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  transition: color 0.2s;
  line-height: 30px;
}
.target-card:hover .target-name-list[data-v-0c072d3c] {
  color: var(--q-primary);
}
.target-position-list[data-v-0c072d3c] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.target-meta[data-v-0c072d3c] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-top: 6px;
  color: var(--q-positive);
}
.meta-deadline[data-v-0c072d3c] {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--q-dark);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--q-dark);
}
.meta-comp[data-v-0c072d3c] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.chevron-icon[data-v-0c072d3c] {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: var(--q-positive);
  transition: color 0.3s;
}
.target-card:hover .chevron-icon[data-v-0c072d3c] {
  color: var(--q-primary);
}

/* Custom Notification */
.notification[data-v-0c072d3c] {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  backdrop-filter: blur(8px);
}
.notification-icon[data-v-0c072d3c] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.notification-message[data-v-0c072d3c] {
  font-size: 14px;
  font-weight: 600;
}
.notification-success[data-v-0c072d3c] {
  background: linear-gradient(135deg, var(--q-success), color-mix(in srgb, var(--q-success) 80%, #000));
  color: var(--q-info);
}
.notification-success .notification-icon[data-v-0c072d3c] {
  color: color-mix(in srgb, var(--q-success) 30%, var(--q-info));
}
.notification-info[data-v-0c072d3c] {
  background: var(--q-info);
  color: var(--q-accent);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.notification-info .notification-icon[data-v-0c072d3c] {
  color: var(--q-primary);
}

/* Notification Transitions */
.notification-enter-active[data-v-0c072d3c] {
  animation: notificationIn-0c072d3c 0.3s ease-out;
}
.notification-leave-active[data-v-0c072d3c] {
  animation: notificationOut-0c072d3c 0.2s ease-in;
}
@keyframes notificationIn-0c072d3c {
from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px) scale(0.95);
}
to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}
}
@keyframes notificationOut-0c072d3c {
from {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}
to {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.95);
}
}

/* Self Tasks Banner */
.self-tasks-banner[data-v-0c072d3c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--q-secondary) 15%, var(--q-info)), var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-secondary) 30%, var(--q-info));
  border-radius: 12px;
}
.banner-content[data-v-0c072d3c] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.banner-icon[data-v-0c072d3c] {
  color: var(--q-secondary);
}
.banner-text[data-v-0c072d3c] {
  display: flex;
  flex-direction: column;
}
.banner-title[data-v-0c072d3c] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
}
.banner-subtitle[data-v-0c072d3c] {
  font-size: 12px;
  color: var(--q-positive);
}
.banner-btn[data-v-0c072d3c] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--q-info);
  background: var(--q-secondary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.banner-btn[data-v-0c072d3c]:hover {
  transform: translateX(2px);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--q-secondary) 40%, transparent);
}

/* Assessed Mode Styles */
.assessed-icon[data-v-0c072d3c] {
  background: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
  color: var(--q-secondary);
}
.result-card[data-v-0c072d3c] {
  border-left: 4px solid var(--q-success);
}
.result-card[data-v-0c072d3c]:hover {
  border-left-color: var(--q-primary);
}
.result-avatar[data-v-0c072d3c] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
}

/* Result Detail View */
.result-header-card[data-v-0c072d3c] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
  margin-bottom: 24px;
}
.result-info[data-v-0c072d3c] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.result-name[data-v-0c072d3c] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.result-dates[data-v-0c072d3c] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
}

/* Scale Card */
.scale-card[data-v-0c072d3c] {
  background: var(--q-info);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 24px;
  margin-bottom: 24px;
}
.section-title[data-v-0c072d3c] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-icon[data-v-0c072d3c] {
  color: var(--q-primary);
}
.scale-grid[data-v-0c072d3c] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scale-item[data-v-0c072d3c] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--q-dark);
  border-radius: 8px;
  flex-wrap: wrap;
}
.scale-value[data-v-0c072d3c] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-primary);
  min-width: 32px;
}
.scale-name[data-v-0c072d3c] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
  min-width: 120px;
}
.scale-desc[data-v-0c072d3c] {
  font-size: 13px;
  color: var(--q-positive);
  flex: 1;
}

/* Stats Card */
.stats-card[data-v-0c072d3c] {
  background: var(--q-info);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 24px;
  margin-bottom: 24px;
}
.results-table[data-v-0c072d3c] {
  border-radius: 8px;
  overflow: hidden;
}
.table-header[data-v-0c072d3c] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  font-weight: 600;
}

/* Competencies Results */
.competencies-results[data-v-0c072d3c] {
  margin-bottom: 24px;
}
.competency-result-card[data-v-0c072d3c] {
  background: var(--q-info);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 24px;
  margin-bottom: 16px;
}
.charts-section[data-v-0c072d3c] {
  margin-top: 24px;
}
.chart-container[data-v-0c072d3c] {
  background: var(--q-dark);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

/* Comments Section */
.comments-section[data-v-0c072d3c] {
  background: var(--q-info);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 24px;
  margin-bottom: 24px;
}
.comments-list[data-v-0c072d3c] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.comment-item-wrapper[data-v-0c072d3c] {
  padding: 16px;
  background: var(--q-dark);
  border-radius: 8px;
}

/* Self Modal */
.self-modal-card[data-v-0c072d3c] {
  background: var(--q-dark);
  border-radius: 16px;
  width: 700px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
}
.modal-header[data-v-0c072d3c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-dark));
}
.modal-title[data-v-0c072d3c] {
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  color: var(--q-accent);
  margin: 0;
}
.modal-close[data-v-0c072d3c] {
  padding: 8px;
  background: transparent;
  border: none;
  color: var(--q-positive);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
}
.modal-close[data-v-0c072d3c]:hover {
  background: var(--q-info);
  color: var(--q-accent);
}
.modal-content[data-v-0c072d3c] {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(90vh - 80px);
}

/* ===== NEW DETAIL VIEW STYLES ===== */
.detail-view[data-v-0c072d3c] {
  animation: fadeSlideIn-0c072d3c 0.3s ease-out;
}
@keyframes fadeSlideIn-0c072d3c {
from {
    opacity: 0;
    transform: translateX(16px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}
.back-btn-new[data-v-0c072d3c] {
  margin-bottom: 24px;
}
.back-btn-new[data-v-0c072d3c]:hover {
  color: var(--q-primary);
}
.header-card[data-v-0c072d3c] {
  border-radius: 16px;
}
.header-content-new[data-v-0c072d3c] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
.header-content-new[data-v-0c072d3c] {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}
}
.header-left[data-v-0c072d3c] {
  flex: 1;
}
.detail-title[data-v-0c072d3c] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 8px 0;
  line-height: 1.3;
}
.date-info[data-v-0c072d3c] {
  color: var(--q-positive);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.header-right[data-v-0c072d3c] {
  text-align: left;
}
@media (min-width: 768px) {
.header-right[data-v-0c072d3c] {
    text-align: right;
}
}
.person-name[data-v-0c072d3c] {
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  font-size: 16px;
}
.description-block[data-v-0c072d3c] {
  background: var(--q-dark);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-dark));
  margin-bottom: 24px;
}
.description-title[data-v-0c072d3c] {
  font-size: 11px;
  font-weight: 700;
  color: var(--q-positive);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.description-text-new[data-v-0c072d3c] {
  font-size: 14px;
  color: var(--q-accent);
  line-height: 1.6;
  margin: 0;
}
.scale-block[data-v-0c072d3c] {
  background: var(--q-dark);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-dark));
  margin-bottom: 24px;
}
.scale-items[data-v-0c072d3c] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scale-item-new[data-v-0c072d3c] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--q-info);
  border-radius: 8px;
  flex-wrap: wrap;
}
.scale-value-new[data-v-0c072d3c] {
  font-size: 16px;
  font-weight: 700;
  color: var(--q-primary);
  min-width: 24px;
}
.scale-name-new[data-v-0c072d3c] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
  min-width: 100px;
}
.scale-desc-new[data-v-0c072d3c] {
  font-size: 13px;
  color: var(--q-positive);
  flex: 1;
}
.respondents-grid[data-v-0c072d3c] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 768px) {
.respondents-grid[data-v-0c072d3c] {
    grid-template-columns: repeat(6, 1fr);
}
}
.stat-card[data-v-0c072d3c] {
  padding: 12px;
  border-radius: 8px;
  text-align: center;
}
.stat-count[data-v-0c072d3c] {
  font-size: 20px;
  font-weight: 700;
}
.stat-label[data-v-0c072d3c] {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-self[data-v-0c072d3c] {
  background: var(--q-dark);
  color: var(--q-accent);
}
.stat-manager[data-v-0c072d3c] {
  background: #ffe4e6;
  color: #9f1239;
}
.stat-colleagues[data-v-0c072d3c] {
  background: #dbeafe;
  color: #1e40af;
}
.stat-subordinates[data-v-0c072d3c] {
  background: #d1fae5;
  color: #065f46;
}
.stat-total-no[data-v-0c072d3c] {
  background: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-dark));
  color: var(--q-accent);
}
.stat-total-with[data-v-0c072d3c] {
  background: var(--q-accent);
  color: var(--q-info);
}
.results-section[data-v-0c072d3c] {
  margin-top: 32px;
}
.section-title-new[data-v-0c072d3c] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin-bottom: 24px;
}
.competency-card[data-v-0c072d3c] {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 32px;
}
.competency-header[data-v-0c072d3c] {
  padding: 24px;
  border-bottom: 1px solid var(--q-dark);
  background: color-mix(in srgb, var(--q-dark) 30%, var(--q-info));
}
.competency-title[data-v-0c072d3c] {
  font-size: 20px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.table-wrapper[data-v-0c072d3c] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.scores-table[data-v-0c072d3c] {
  width: 100%;
  min-width: 800px;
  font-size: 14px;
  border-collapse: collapse;
  border-spacing: 0;
}
.scores-table thead[data-v-0c072d3c] {
  background: var(--q-dark);
}
.scores-table th[data-v-0c072d3c] {
  padding: 16px 16px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--q-positive);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-dark));
}
.scores-table th[data-v-0c072d3c]:first-child {
  text-align: left;
  padding-left: 24px;
}
.scores-table td[data-v-0c072d3c] {
  padding: 14px 16px;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--q-dark);
}
.scores-table td[data-v-0c072d3c]:first-child {
  text-align: left;
  padding-left: 24px;
}
.scores-table tbody tr[data-v-0c072d3c]:hover {
  background: color-mix(in srgb, var(--q-dark) 50%, var(--q-info));
}
.scores-table td[data-v-0c072d3c]:first-child {
  color: var(--q-accent);
  font-weight: 500;
  position: relative;
  padding-left: 40px !important;
}
.indicator-dot[data-v-0c072d3c] {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--q-positive);
  border-radius: 50%;
}
.chart-section[data-v-0c072d3c] {
  padding: 24px;
  border-top: 1px solid var(--q-dark);
  background: color-mix(in srgb, var(--q-dark) 10%, var(--q-info));
}
.chart-title[data-v-0c072d3c] {
  font-size: 11px;
  font-weight: 700;
  color: var(--q-positive);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 16px 0;
  text-align: center;
}
.chart-container-new[data-v-0c072d3c] {
  max-width: 100%;
  margin: 0 auto 24px auto;
  background: var(--q-info);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--q-dark);
}
.chart-container-new[data-v-0c072d3c]:last-child {
  margin-bottom: 0;
}
.chart-legend[data-v-0c072d3c] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
  margin-top: 16px;
}
.chart-legend-item[data-v-0c072d3c] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chart-legend-dot[data-v-0c072d3c] {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.chart-legend-text[data-v-0c072d3c] {
  font-size: 12px;
  color: var(--q-positive);
  font-weight: 500;
}
.comments-card[data-v-0c072d3c] {
  border-radius: 16px;
  margin-top: 32px;
}
.comments-title[data-v-0c072d3c] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 24px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.comments-list-new[data-v-0c072d3c] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.comment-item[data-v-0c072d3c] {
  padding: 20px;
  background: var(--q-dark);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-dark));
}

/* ===== CUSTOM CHART STYLES ===== */
.custom-chart[data-v-0c072d3c] {
  height: 280px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 16px;
  padding: 32px 24px 16px 40px;
  border: 1px solid var(--q-dark);
  border-radius: 12px;
  background: var(--q-info);
  position: relative;
}
.chart-grid-lines[data-v-0c072d3c] {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  padding: 24px 16px 48px 16px;
}
.grid-line[data-v-0c072d3c] {
  border-bottom: 1px solid var(--q-dark);
  width: 100%;
  height: 1px;
  position: relative;
}
.grid-label[data-v-0c072d3c] {
  position: absolute;
  top: -8px;
  left: 0;
  font-size: 10px;
  color: var(--q-positive);
  font-weight: 500;
}
.chart-bars-container[data-v-0c072d3c] {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  z-index: 10;
  gap: 8px;
}
.chart-bar-wrapper[data-v-0c072d3c] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  flex: 1;
  max-width: 80px;
  min-width: 40px;
}
.chart-bar[data-v-0c072d3c] {
  width: 100%;
  border-radius: 6px 6px 0 0;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.85;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  min-height: 4px;
}
.chart-bar-wrapper:hover .chart-bar[data-v-0c072d3c] {
  opacity: 1;
  transform: scaleY(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.chart-bar-value[data-v-0c072d3c] {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 700;
  color: var(--q-accent);
  opacity: 0;
  transition: opacity 0.2s ease;
  background: var(--q-info);
  padding: 4px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--q-dark);
  white-space: nowrap;
}
.chart-bar-wrapper:hover .chart-bar-value[data-v-0c072d3c] {
  opacity: 1;
}
.chart-bar-label[data-v-0c072d3c] {
  font-size: 11px;
  color: var(--q-positive);
  margin-top: 10px;
  font-weight: 600;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bar Colors */
.bar-self[data-v-0c072d3c] {
  background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
}
.bar-manager[data-v-0c072d3c] {
  background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%);
}
.bar-colleagues[data-v-0c072d3c] {
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
}
.bar-subordinates[data-v-0c072d3c] {
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
}
.bar-all-no[data-v-0c072d3c] {
  background: linear-gradient(180deg, #64748b 0%, #334155 100%);
}
.bar-all-with[data-v-0c072d3c] {
  background: linear-gradient(180deg, #475569 0%, #1e293b 100%);
}
@media (max-width: 640px) {
.custom-chart[data-v-0c072d3c] {
    height: 220px;
    padding: 24px 12px 12px 32px;
    gap: 8px;
}
.chart-bar-wrapper[data-v-0c072d3c] {
    min-width: 28px;
}
.chart-bar-label[data-v-0c072d3c] {
    font-size: 9px;
}
.chart-bar-value[data-v-0c072d3c] {
    font-size: 11px;
    padding: 2px 6px;
}
}


.competencies-tab[data-v-480ba437] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Actions Bar */
.actions-bar[data-v-480ba437] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(var(--q-accent-rgb), 0.1);
}
.search-wrapper[data-v-480ba437] {
  position: relative;
  max-width: 400px;
  width: 100%;
}
.search-icon[data-v-480ba437] {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--q-positive);
  font-size: 16px;
  pointer-events: none;
}
.search-input[data-v-480ba437] {
  width: 100%;
  padding: 8px 16px 8px 36px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  background: var(--q-negative);
  color: var(--q-accent);
  font-size: 14px;
  transition: all 0.2s;
}
.search-input[data-v-480ba437]:focus {
  outline: none;
  border-color: var(--q-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--q-primary) 25%, transparent);
}
.search-input[data-v-480ba437]::placeholder {
  color: var(--q-positive);
}
.add-btn[data-v-480ba437] {
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  box-shadow: 0 1px 3px rgba(var(--q-accent-rgb), 0.1);
  white-space: nowrap;
}
.add-btn[data-v-480ba437]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 85%, black) !important;
}

/* Competency List */
.competency-list[data-v-480ba437] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Competency Card */
.competency-card[data-v-480ba437] {
  background: var(--q-info);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(var(--q-accent-rgb), 0.1);
  overflow: hidden;
  transition: all 0.2s;
}
.competency-card[data-v-480ba437]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
}
.card-header[data-v-480ba437] {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.card-header-left[data-v-480ba437] {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}
.card-icon[data-v-480ba437] {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.card-icon.icon-with-indicators[data-v-480ba437] {
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  color: var(--q-accent);
}
.card-title[data-v-480ba437] {
  font-size: 16px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.card-meta[data-v-480ba437] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.status-badge[data-v-480ba437] {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  color: var(--q-accent);
}
.status-badge.status-published[data-v-480ba437] {
  background: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
  color: var(--q-secondary);
}
.meta-text[data-v-480ba437] {
  font-size: 12px;
  color: var(--q-positive);
}

/* Inline Actions */
.card-header-right[data-v-480ba437] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.action-btn[data-v-480ba437] {
  color: var(--q-primary);
  transition: all 0.2s;
}
.action-btn.action-btn-published[data-v-480ba437] {
  color: var(--q-secondary);
}
.action-btn.action-btn-published[data-v-480ba437]:hover {
  background: color-mix(in srgb, var(--q-secondary) 10%, transparent);
}
.action-btn-edit[data-v-480ba437]:hover {
  color: var(--q-positive);
  background: color-mix(in srgb, var(--q-positive) 10%, transparent);
}
.action-btn-delete[data-v-480ba437]:hover {
  color: var(--q-positive);
  background: color-mix(in srgb, var(--q-positive) 10%, transparent);
}
.chevron-btn[data-v-480ba437] {
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--q-positive);
  transition: color 0.2s;
  display: flex;
  align-items: center;
}
.chevron-btn[data-v-480ba437]:hover {
  color: var(--q-primary);
}

/* Expanded Content */
.card-expanded[data-v-480ba437] {
  padding: 24px;
  background: var(--q-dark);
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.section-title[data-v-480ba437] {
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
  text-transform: uppercase;
  margin: 0 0 12px 0;
  letter-spacing: 0.5px;
}
.indicator-item[data-v-480ba437] {
  padding: 12px;
  background: var(--q-info);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.indicator-text[data-v-480ba437] {
  font-size: 14px;
  font-weight: 500;
  color: var(--q-accent);
}
.indicator-details[data-v-480ba437] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.detail-tag[data-v-480ba437] {
  font-size: 12px;
  color: var(--q-positive);
  padding: 2px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--q-accent) 5%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.detail-tag-activity[data-v-480ba437] {
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
}
.detail-tag-course[data-v-480ba437] {
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
  color: var(--q-primary);
  border-color: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
}
.no-indicators[data-v-480ba437] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.no-indicators-text[data-v-480ba437] {
  font-size: 14px;
  color: var(--q-positive);
}
.single-level-details[data-v-480ba437] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* Empty State */
.empty-state[data-v-480ba437] {
  padding: 64px;
  text-align: center;
  color: var(--q-positive);
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-icon[data-v-480ba437] {
  margin: 0 auto 16px;
  opacity: 0.3;
}
.empty-text[data-v-480ba437] {
  margin-bottom: 16px;
  font-size: 16px;
}

/* Loading State */
.loading-state[data-v-480ba437] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 64px;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.loading-text[data-v-480ba437] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 16px 0 0 0;
}

/* Modal */
.modal-card[data-v-480ba437] {
  min-width: 500px;
  max-width: 680px;
  width: 100%;
  border-radius: 16px;
}
.modal-header[data-v-480ba437] {
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  padding: 24px;
}
.modal-header-row[data-v-480ba437] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.close-btn[data-v-480ba437] {
  color: var(--q-positive);
}
.close-btn[data-v-480ba437]:hover {
  color: var(--q-accent);
}
.modal-body[data-v-480ba437] {
  max-height: 65vh;
  overflow-y: auto;
  padding: 24px;
}
.field-label[data-v-480ba437] {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  margin-bottom: 4px;
}
.field-label-sm[data-v-480ba437] {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--q-positive);
  margin-bottom: 4px;
}
.field-label-xs[data-v-480ba437] {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--q-positive);
  text-transform: uppercase;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.required[data-v-480ba437] {
  color: var(--q-warning);
}

/* Toggles Grid */
.toggles-grid[data-v-480ba437] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
.toggles-grid[data-v-480ba437] {
    grid-template-columns: 1fr 1fr;
}
}
.toggle-card[data-v-480ba437] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--q-dark);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.toggle-label[data-v-480ba437] {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
}
.toggle-hint[data-v-480ba437] {
  display: block;
  font-size: 12px;
  color: var(--q-positive);
}

/* Target Config */
.target-config[data-v-480ba437] {
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  margin-bottom: 24px;
  background: var(--q-dark);
}
.config-title[data-v-480ba437] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
}
.activity-grid[data-v-480ba437] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
.activity-grid[data-v-480ba437] {
    grid-template-columns: 1fr 1fr;
}
}

/* Indicators Edit */
.indicators-edit[data-v-480ba437] {
  margin-top: 24px;
}
.section-header[data-v-480ba437] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-header h4[data-v-480ba437] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.indicator-edit-card[data-v-480ba437] {
  padding: 16px;
  background: var(--q-info);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  margin-bottom: 12px;
  position: relative;
  box-shadow: 0 1px 2px rgba(var(--q-accent-rgb), 0.05);
}
.indicator-delete-btn[data-v-480ba437] {
  position: absolute;
  top: 8px;
  right: 8px;
}
.indicator-options-grid[data-v-480ba437] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding-top: 8px;
}
@media (min-width: 768px) {
.indicator-options-grid[data-v-480ba437] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
.indicator-options-grid[data-v-480ba437] .q-field__native {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Modal Footer */
.modal-footer[data-v-480ba437] {
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  background: var(--q-dark);
  border-radius: 0 0 16px 16px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-right[data-v-480ba437] {
  display: flex;
  gap: 8px;
}
.cancel-btn[data-v-480ba437] {
  color: var(--q-positive);
  font-weight: 700;
  border-radius: 10px;
}
.cancel-btn[data-v-480ba437]:hover {
  background-color: color-mix(in srgb, var(--q-positive) 10%, var(--q-info));
}
.draft-btn[data-v-480ba437] {
  background: transparent;
  color: var(--q-positive);
  border: 1px solid color-mix(in srgb, var(--q-positive) 40%, var(--q-info));
  font-weight: 700;
  border-radius: 10px;
}
.publish-btn[data-v-480ba437] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  font-weight: 700;
  padding-left: 24px;
  padding-right: 24px;
  border-radius: 10px;
}
.confirm-modal-card[data-v-480ba437] {
  min-width: 400px;
  max-width: 500px;
  border-radius: 16px;
}
.confirm-delete-btn[data-v-480ba437] {
  background-color: var(--q-primary);
  color: var(--q-info);
  font-weight: 600;
}
.confirm-delete-btn[data-v-480ba437]:hover {
  background-color: color-mix(in srgb, var(--q-primary) 85%, black);
}
@media (max-width: 600px) {
.actions-bar[data-v-480ba437] {
    flex-direction: column;
    gap: 12px;
}
.search-wrapper[data-v-480ba437] {
    max-width: 100%;
}
.modal-card[data-v-480ba437] {
    min-width: 90vw;
}
.modal-footer[data-v-480ba437] {
    flex-direction: column;
    gap: 12px;
}
.footer-right[data-v-480ba437] {
    width: 100%;
}
}


.profiles-tab[data-v-74a3c542] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Actions Bar */
.actions-bar[data-v-74a3c542] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(var(--q-accent-rgb), 0.1);
}
.bar-title[data-v-74a3c542] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  padding: 0 8px;
}
.add-btn[data-v-74a3c542] {
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  box-shadow: 0 1px 3px rgba(var(--q-accent-rgb), 0.1);
  white-space: nowrap;
}

/* Profile List */
.profile-list[data-v-74a3c542] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Profile Card */
.profile-card[data-v-74a3c542] {
  background: var(--q-info);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(var(--q-accent-rgb), 0.1);
  overflow: hidden;
  transition: all 0.2s;
}
.profile-card[data-v-74a3c542]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
}
.card-header[data-v-74a3c542] {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.2s;
}
.card-header[data-v-74a3c542]:hover {
  background: var(--q-dark);
}
.card-header-left[data-v-74a3c542] {
  flex: 1;
}
.title-row[data-v-74a3c542] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.card-title[data-v-74a3c542] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.status-badge[data-v-74a3c542] {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  color: var(--q-accent);
}
.status-badge.status-published[data-v-74a3c542] {
  background: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
  color: var(--q-secondary);
}
.status-badge.status-approval[data-v-74a3c542] {
  background: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  color: var(--q-primary);
}
.card-meta[data-v-74a3c542] {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.meta-item[data-v-74a3c542] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--q-positive);
}

/* Inline Actions */
.card-header-right[data-v-74a3c542] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.action-btn[data-v-74a3c542] {
  transition: all 0.2s;
}
.action-btn.action-btn-published[data-v-74a3c542] {
  color: var(--q-secondary);
}
.action-btn.action-btn-published[data-v-74a3c542]:hover {
  background: color-mix(in srgb, var(--q-secondary) 10%, transparent);
}
.action-btn-edit[data-v-74a3c542]:hover {
  color: var(--q-positive);
  background: color-mix(in srgb, var(--q-positive) 10%, transparent);
}
.action-btn-delete[data-v-74a3c542]:hover {
  color: var(--q-positive);
  background: color-mix(in srgb, var(--q-positive) 10%, transparent);
}
.chevron-icon[data-v-74a3c542] {
  color: var(--q-positive);
  margin-left: 8px;
}

/* Expanded Content */
.card-expanded[data-v-74a3c542] {
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  background: var(--q-dark);
  padding: 24px;
}
.expanded-grid[data-v-74a3c542] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
.expanded-grid[data-v-74a3c542] {
    grid-template-columns: 1fr 1fr;
}
}
.section-title[data-v-74a3c542] {
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
  text-transform: uppercase;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
}
.employees-list[data-v-74a3c542] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.employee-chip[data-v-74a3c542] {
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--q-accent);
  box-shadow: 0 1px 2px rgba(var(--q-accent-rgb), 0.05);
}
.competencies-list[data-v-74a3c542] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comp-item[data-v-74a3c542] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(var(--q-accent-rgb), 0.05);
}
.comp-text[data-v-74a3c542] {
  font-size: 14px;
  color: var(--q-accent);
}
.level-badge[data-v-74a3c542] {
  font-size: 12px;
  font-weight: 700;
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--q-accent);
}
.empty-hint[data-v-74a3c542] {
  font-size: 14px;
  color: var(--q-positive);
  font-style: italic;
}

/* Visibility Row */
.visibility-row[data-v-74a3c542] {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.visibility-label[data-v-74a3c542] {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--q-accent);
}
.visibility-checkbox[data-v-74a3c542] {
  width: 16px;
  height: 16px;
  accent-color: var(--q-primary);
}

/* Empty State */
.empty-state[data-v-74a3c542] {
  padding: 64px;
  text-align: center;
  color: var(--q-positive);
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-icon[data-v-74a3c542] {
  opacity: 0.3;
  margin-bottom: 16px;
}
.empty-text[data-v-74a3c542] {
  font-size: 16px;
  margin: 0;
}

/* Loading State */
.loading-state[data-v-74a3c542] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.loading-text[data-v-74a3c542] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 16px 0 0 0;
}

/* Wizard Modal */
.wizard-card[data-v-74a3c542] {
  min-width: 600px;
  max-width: 800px;
  width: 100%;
  border-radius: 16px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
}
.wizard-header[data-v-74a3c542] {
  padding: 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.wizard-steps[data-v-74a3c542] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.step-bar[data-v-74a3c542] {
  height: 6px;
  width: 32px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  transition: background 0.3s;
}
.step-bar.step-active[data-v-74a3c542] {
  background: var(--q-primary);
}
.step-text[data-v-74a3c542] {
  font-size: 12px;
  color: var(--q-positive);
  margin-left: 8px;
}
.close-btn[data-v-74a3c542] {
  color: var(--q-positive);
}
.wizard-body[data-v-74a3c542] {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
}
.step-content[data-v-74a3c542] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.field-label[data-v-74a3c542] {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  margin-bottom: 8px;
}
.field-hint[data-v-74a3c542] {
  font-size: 12px;
  color: var(--q-positive);
  margin-top: 8px;
}
.large-input[data-v-74a3c542] .q-field__control {
  font-size: 18px;
}

/* Audience Row */
.audience-row[data-v-74a3c542] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 8px;
}
.audience-row[data-v-74a3c542]:hover {
  background: var(--q-dark);
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
}
.audience-text[data-v-74a3c542] {
  font-size: 13px;
  font-weight: 600;
  color: var(--q-accent);
}

/* Chips */
.pm-chips-wrap[data-v-74a3c542] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.pm-chip[data-v-74a3c542] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
  transition: all 0.15s;
}
.pm-chip[data-v-74a3c542]:hover {
  background: color-mix(in srgb, var(--q-primary) 14%, var(--q-info));
}
.pm-chip-avatar[data-v-74a3c542] {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  color: var(--q-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pm-chip-name[data-v-74a3c542] {
  font-size: 12px;
  font-weight: 600;
  color: var(--q-accent);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-chip-remove[data-v-74a3c542] {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--q-accent) 8%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.pm-chip-remove[data-v-74a3c542]:hover {
  background: color-mix(in srgb, var(--q-warning) 20%, var(--q-info));
  color: var(--q-warning);
}

/* Employee Selection Modal */
.pm-select-modal[data-v-74a3c542] {
  background: var(--q-info);
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(var(--q-accent-rgb), 0.25);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}
.pm-modal-header[data-v-74a3c542] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--q-dark);
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.pm-modal-title[data-v-74a3c542] {
  font-size: 16px;
  font-weight: 700;
  color: var(--q-accent);
}
.pm-modal-search[data-v-74a3c542] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.pm-search-icon[data-v-74a3c542] {
  color: var(--q-positive);
  flex-shrink: 0;
}
.pm-search-input[data-v-74a3c542] {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--q-accent);
  padding: 8px 0;
  background: transparent;
}
.pm-search-input[data-v-74a3c542]::placeholder {
  color: var(--q-positive);
}
.pm-modal-body[data-v-74a3c542] {
  flex: 1;
  overflow: hidden;
}
.pm-modal-loading[data-v-74a3c542] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px;
}
.pm-modal-list[data-v-74a3c542] {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px;
}
.pm-modal-empty[data-v-74a3c542] {
  text-align: center;
  padding: 32px;
  color: var(--q-positive);
  font-size: 14px;
}
.pm-modal-item[data-v-74a3c542] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.pm-modal-item[data-v-74a3c542]:hover {
  background: var(--q-dark);
}
.pm-item-selected[data-v-74a3c542] {
  background: color-mix(in srgb, var(--q-primary) 5%, var(--q-info));
}
.pm-item-selected[data-v-74a3c542]:hover {
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
}
.pm-user-avatar[data-v-74a3c542] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--q-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
  flex-shrink: 0;
  overflow: hidden;
}
.pm-modal-item:hover .pm-user-avatar[data-v-74a3c542] {
  background: var(--q-info);
  color: var(--q-primary);
}
.pm-user-avatar img[data-v-74a3c542] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pm-user-info[data-v-74a3c542] {
  flex: 1;
  min-width: 0;
}
.pm-user-name[data-v-74a3c542] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-user-position[data-v-74a3c542] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-check-icon[data-v-74a3c542] {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.15s;
}
.pm-check-active[data-v-74a3c542] {
  background: var(--q-primary);
  border-color: var(--q-primary);
  color: var(--q-info);
}
.pm-modal-footer[data-v-74a3c542] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  background: var(--q-dark);
}
.pm-modal-count[data-v-74a3c542] {
  font-size: 13px;
  color: var(--q-positive);
  font-weight: 500;
}
.pm-modal-btn-done[data-v-74a3c542] {
  padding: 8px 24px;
  border-radius: 10px;
  border: none;
  background: var(--q-primary);
  color: var(--q-info);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.pm-modal-btn-done[data-v-74a3c542]:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--q-primary) 30%, transparent);
}

/* Step 2 */
.step-title[data-v-74a3c542] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.step-subtitle[data-v-74a3c542] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
}
.comp-selector[data-v-74a3c542] {
  display: flex;
  gap: 8px;
}
.comp-select[data-v-74a3c542] {
  flex: 1;
}
.add-comp-btn[data-v-74a3c542] {
  padding: 8px 16px;
  border-radius: 12px;
  font-weight: 700;
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
}
.comp-matrix-list[data-v-74a3c542] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.comp-matrix-item[data-v-74a3c542] {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
  background: var(--q-info);
  transition: border-color 0.2s;
}
.comp-matrix-item[data-v-74a3c542]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
}
.comp-matrix-header[data-v-74a3c542] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comp-matrix-right[data-v-74a3c542] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comp-matrix-left[data-v-74a3c542] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.comp-number[data-v-74a3c542] {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
}
.comp-name[data-v-74a3c542] {
  font-weight: 500;
  color: var(--q-accent);
}
.comp-indicators-list[data-v-74a3c542] {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.indicator-row[data-v-74a3c542] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px 6px 36px;
  border-radius: 6px;
  background: var(--q-dark);
}
.indicator-name[data-v-74a3c542] {
  flex: 1;
  font-size: 13px;
  color: var(--q-accent);
}
.level-select[data-v-74a3c542] {
  min-width: 160px;
  max-width: 200px;
}
.indicators-empty[data-v-74a3c542] {
  margin-top: 8px;
  padding: 8px 36px;
  font-size: 13px;
  color: var(--q-positive);
  font-style: italic;
}
.comp-matrix-empty[data-v-74a3c542] {
  padding: 32px;
  text-align: center;
  color: var(--q-positive);
  font-size: 14px;
  background: var(--q-dark);
  border-radius: 12px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}

/* Step 3 */
.toggle-card[data-v-74a3c542] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--q-dark);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.toggle-label[data-v-74a3c542] {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
}
.toggle-hint[data-v-74a3c542] {
  display: block;
  font-size: 12px;
  color: var(--q-positive);
}
.approval-fields[data-v-74a3c542] {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Wizard Footer */
.wizard-footer[data-v-74a3c542] {
  padding: 24px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  background: var(--q-dark);
  border-radius: 0 0 16px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-btn[data-v-74a3c542] {
  padding: 10px 24px;
  border-radius: 10px;
  font-weight: 700;
  color: var(--q-positive);
}
.next-btn[data-v-74a3c542] {
  padding: 10px 32px;
  border-radius: 10px;
  font-weight: 700;
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--q-primary) 30%, transparent);
}
.footer-right[data-v-74a3c542] {
  display: flex;
  gap: 8px;
}
.draft-btn[data-v-74a3c542] {
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  background: var(--q-info);
  color: var(--q-positive);
  border: 1px solid color-mix(in srgb, var(--q-positive) 40%, var(--q-info));
}
.submit-btn[data-v-74a3c542] {
  padding: 10px 24px;
  border-radius: 10px;
  font-weight: 700;
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--q-primary) 30%, transparent);
}

/* Confirm Dialog */
.confirm-modal-card[data-v-74a3c542] {
  min-width: 400px;
  border-radius: 16px;
}
.cancel-btn[data-v-74a3c542] {
  color: var(--q-positive);
  border-radius: 10px;
}
.cancel-btn[data-v-74a3c542]:hover {
  background-color: color-mix(in srgb, var(--q-positive) 10%, var(--q-info));
}
.confirm-delete-btn[data-v-74a3c542] {
  background-color: var(--q-primary);
  color: var(--q-info);
  font-weight: 600;
  border-radius: 10px;
}
@media (max-width: 600px) {
.wizard-card[data-v-74a3c542] {
    min-width: 90vw;
    min-height: auto;
}
.comp-selector[data-v-74a3c542] {
    flex-direction: column;
}
.indicator-row[data-v-74a3c542] {
    flex-direction: column;
    align-items: stretch;
    padding-left: 12px;
}
.level-select[data-v-74a3c542] {
    min-width: 100%;
    max-width: 100%;
}
}


.settings-tab[data-v-37fc61b6] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Two-column grid */
.settings-grid[data-v-37fc61b6] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
.settings-grid[data-v-37fc61b6] {
    grid-template-columns: 1fr 1fr;
}
}

/* Settings Card (white container for each column) */
.settings-card[data-v-37fc61b6] {
  background: var(--q-info);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(var(--q-accent-rgb), 0.1);
}
.card-top[data-v-37fc61b6] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.card-heading[data-v-37fc61b6] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.link-add-btn[data-v-37fc61b6] {
  font-size: 12px;
  font-weight: 700;
  color: var(--q-primary);
  background: none;
  border: 1px solid color-mix(in srgb, var(--q-primary) 20%, var(--q-info));
  padding: 6px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.link-add-btn[data-v-37fc61b6]:hover {
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
}
.card-content[data-v-37fc61b6] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Scale Item */
.scale-item[data-v-37fc61b6] {
  padding: 16px;
  background: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  position: relative;
}
.scale-item:hover .scale-actions[data-v-37fc61b6] {
  opacity: 1;
}
.scale-header[data-v-37fc61b6] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.scale-name[data-v-37fc61b6] {
  font-weight: 700;
  color: var(--q-accent);
}
.scale-actions[data-v-37fc61b6] {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}
.icon-action[data-v-37fc61b6] {
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  color: var(--q-positive);
  transition: all 0.2s;
  display: flex;
  align-items: center;
}
.icon-action[data-v-37fc61b6]:hover {
  background: color-mix(in srgb, var(--q-positive) 10%, var(--q-info));
  color: var(--q-positive);
}
.icon-action-publish[data-v-37fc61b6] {
  color: var(--q-secondary);
}
.icon-action-publish[data-v-37fc61b6]:hover {
  background: color-mix(in srgb, var(--q-secondary) 10%, var(--q-info));
  color: var(--q-secondary);
}
.icon-action-edit[data-v-37fc61b6]:hover {
  color: var(--q-positive);
  background: color-mix(in srgb, var(--q-positive) 10%, var(--q-info));
}
.icon-action-danger[data-v-37fc61b6]:hover {
  color: var(--q-positive);
  background: color-mix(in srgb, var(--q-positive) 10%, var(--q-info));
}
.scale-levels-chips[data-v-37fc61b6] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}
.level-chip[data-v-37fc61b6] {
  font-size: 10px;
  color: var(--q-positive);
  background: var(--q-info);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.scale-footer[data-v-37fc61b6] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.publish-badge[data-v-37fc61b6] {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  color: var(--q-accent);
}
.publish-badge.publish-badge-active[data-v-37fc61b6] {
  background: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
  color: var(--q-secondary);
}
.toggle-publish-link[data-v-37fc61b6] {
  font-size: 12px;
  color: var(--q-secondary);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.toggle-publish-link[data-v-37fc61b6]:hover {
  text-decoration: underline;
  color: var(--q-secondary);
}

/* Block Accordion */
.block-accordion[data-v-37fc61b6] {
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  overflow: hidden;
  background: var(--q-dark);
  transition: all 0.2s;
}
.block-accordion.block-expanded[data-v-37fc61b6] {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  background: var(--q-info);
  box-shadow: 0 1px 3px rgba(var(--q-accent-rgb), 0.08);
}
.block-header[data-v-37fc61b6] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.block-header[data-v-37fc61b6]:hover {
  background: var(--q-dark);
}
.block-header-left[data-v-37fc61b6] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.block-icon[data-v-37fc61b6] {
  color: var(--q-positive);
}
.block-icon-active[data-v-37fc61b6] {
  color: var(--q-primary);
}
.block-name[data-v-37fc61b6] {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
}
.block-count[data-v-37fc61b6] {
  display: block;
  font-size: 10px;
  color: var(--q-positive);
}
.block-header-right[data-v-37fc61b6] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.block-dot[data-v-37fc61b6] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.block-dot.block-dot-active[data-v-37fc61b6] {
  background: var(--q-secondary);
}
.block-chevron[data-v-37fc61b6] {
  color: var(--q-positive);
}

/* Block Body */
.block-body[data-v-37fc61b6] {
  padding: 16px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  background: var(--q-info);
}
.block-description[data-v-37fc61b6] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 0 0 12px 0;
}
.block-competencies[data-v-37fc61b6] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
.block-comp-item[data-v-37fc61b6] {
  font-size: 12px;
  padding: 4px 8px;
  background: var(--q-dark);
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  color: var(--q-accent);
}
.block-empty-text[data-v-37fc61b6] {
  font-size: 12px;
  color: var(--q-positive);
  font-style: italic;
}
.block-actions[data-v-37fc61b6] {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 5%, var(--q-info));
}

/* Empty Hint */
.empty-hint[data-v-37fc61b6] {
  text-align: center;
  color: var(--q-positive);
  font-size: 14px;
  padding: 16px;
}
.empty-hint-icon[data-v-37fc61b6] {
  opacity: 0.3;
  margin-bottom: 8px;
}

/* Modal */
.modal-card[data-v-37fc61b6] {
  min-width: 500px;
  max-width: 600px;
  width: 100%;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.modal-header[data-v-37fc61b6] {
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  padding: 24px;
}
.modal-body[data-v-37fc61b6] {
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.field-label[data-v-37fc61b6] {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  margin-bottom: 4px;
}

/* Add Level Box */
.add-level-box[data-v-37fc61b6] {
  background: var(--q-dark);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.add-level-title[data-v-37fc61b6] {
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
  text-transform: uppercase;
  margin: 0 0 12px 0;
  letter-spacing: 0.5px;
}
.add-level-row[data-v-37fc61b6] {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.add-level-btn[data-v-37fc61b6] {
  width: 100%;
  padding: 8px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
}

/* Levels List */
.levels-list[data-v-37fc61b6] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.levels-title[data-v-37fc61b6] {
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
  text-transform: uppercase;
  margin: 0 0 8px 0;
}
.level-edit-item[data-v-37fc61b6] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
}
.level-circle[data-v-37fc61b6] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--q-accent);
  flex-shrink: 0;
}
.level-edit-info[data-v-37fc61b6] {
  flex: 1;
}
.level-edit-label[data-v-37fc61b6] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
  margin-bottom: 2px;
}
.level-edit-desc[data-v-37fc61b6] {
  font-size: 12px;
  color: var(--q-positive);
}

/* Block Modal */
.comp-add-row[data-v-37fc61b6] {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.comp-block-select[data-v-37fc61b6] {
  flex: 1;
}
.add-comp-block-btn[data-v-37fc61b6] {
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
}
.add-comp-block-btn[data-v-37fc61b6]:hover {
  background: color-mix(in srgb, var(--q-primary) 85%, black) !important;
}
.block-comp-list[data-v-37fc61b6] {
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  max-height: 200px;
  overflow-y: auto;
  background: var(--q-dark);
}
.block-comp-list-item[data-v-37fc61b6] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  transition: background 0.2s;
}
.block-comp-list-item[data-v-37fc61b6]:last-child {
  border-bottom: none;
}
.block-comp-list-item[data-v-37fc61b6]:hover {
  background: var(--q-info);
}
.block-comp-list-text[data-v-37fc61b6] {
  font-size: 14px;
  color: var(--q-accent);
  font-weight: 500;
}
.block-comp-list-empty[data-v-37fc61b6] {
  padding: 16px;
  text-align: center;
  color: var(--q-positive);
  font-size: 12px;
}

/* Modal Footer */
.modal-footer[data-v-37fc61b6] {
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  background: var(--q-dark);
  padding: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.cancel-btn[data-v-37fc61b6] {
  color: var(--q-positive);
  font-weight: 700;
  border-radius: 10px;
}
.cancel-btn[data-v-37fc61b6]:hover {
  background-color: color-mix(in srgb, var(--q-positive) 10%, var(--q-info));
}
.save-btn[data-v-37fc61b6] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  font-weight: 700;
  padding-left: 24px;
  padding-right: 24px;
  border-radius: 10px;
}
@media (max-width: 600px) {
.modal-card[data-v-37fc61b6] {
    min-width: 90vw;
}
.add-level-row[data-v-37fc61b6] {
    grid-template-columns: 1fr;
}
}


.competencies-container[data-v-d429c754] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-d429c754 0.5s ease-in-out;
}
@keyframes fadeIn-d429c754 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Header */
.competencies-header[data-v-d429c754] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(var(--q-accent-rgb), 0.1);
  padding: 24px;
}
.header-top[data-v-d429c754] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
@media (min-width: 768px) {
.header-top[data-v-d429c754] {
    flex-direction: row;
    align-items: center;
}
}
.header-left[data-v-d429c754] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-icon[data-v-d429c754] {
  width: 40px;
  height: 40px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.header-title[data-v-d429c754] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  line-height: 30px;
  margin: 0;
}
.header-subtitle[data-v-d429c754] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}

/* Pill-style Tabs */
.tabs-pill-container[data-v-d429c754] {
  display: flex;
  background: var(--q-dark);
  padding: 4px;
  border-radius: 12px;
}
.tab-pill[data-v-d429c754] {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  color: var(--q-positive);
  white-space: nowrap;
}
.tab-pill[data-v-d429c754]:hover {
  color: var(--q-primary);
}
.tab-pill-active[data-v-d429c754] {
  background: var(--q-primary);
  color: var(--q-info);
  box-shadow: 0 1px 3px rgba(var(--q-accent-rgb), 0.1);
}

/* Content Area */
.content-area[data-v-d429c754] {
  min-height: 400px;
}

/* Loading State */
.loading-state[data-v-d429c754] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 64px;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}


.loading-state[data-v-c1d4ba7e] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px;
}
.language-container[data-v-c1d4ba7e] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-c1d4ba7e 0.5s ease-in-out;
}
@keyframes fadeIn-c1d4ba7e {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.header-card[data-v-c1d4ba7e] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
@media (min-width: 768px) {
.header-card[data-v-c1d4ba7e] {
    flex-direction: row;
}
}
.header-left[data-v-c1d4ba7e] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-icon-box[data-v-c1d4ba7e] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.header-title[data-v-c1d4ba7e] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-c1d4ba7e] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.search-box[data-v-c1d4ba7e] {
  width: 100%;
}
@media (min-width: 768px) {
.search-box[data-v-c1d4ba7e] {
    width: 256px;
}
}
.search-input[data-v-c1d4ba7e] .q-field__control {
  background: var(--q-dark);
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  transition: all 0.2s;
}
.search-input[data-v-c1d4ba7e] .q-field__control:focus-within {
  background: var(--q-info);
}
.languages-grid[data-v-c1d4ba7e] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
.languages-grid[data-v-c1d4ba7e] {
    grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.languages-grid[data-v-c1d4ba7e] {
    grid-template-columns: 1fr 1fr 1fr;
}
}
.lang-card[data-v-c1d4ba7e] {
  padding: 20px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  text-align: left;
  transition: all 0.2s;
  cursor: pointer;
  background: var(--q-info);
}
.lang-card[data-v-c1d4ba7e]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.lang-card-selected[data-v-c1d4ba7e] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-color: var(--q-primary);
  box-shadow: 0 0 0 1px var(--q-primary);
}
.lang-header[data-v-c1d4ba7e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.lang-flag[data-v-c1d4ba7e] {
  font-size: 30px;
}
.lang-check[data-v-c1d4ba7e] {
  width: 24px;
  height: 24px;
  background: var(--q-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-info);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.lang-native[data-v-c1d4ba7e] {
  font-weight: 700;
  font-size: 18px;
  color: var(--q-accent);
  margin: 0 0 2px 0;
}
.lang-native-selected[data-v-c1d4ba7e] {
  color: color-mix(in srgb, var(--q-primary) 80%, black);
}
.lang-name[data-v-c1d4ba7e] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
}
.lang-name-selected[data-v-c1d4ba7e] {
  color: var(--q-primary);
}
.empty-state[data-v-c1d4ba7e] {
  padding: 48px;
  text-align: center;
  color: var(--q-positive);
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-icon[data-v-c1d4ba7e] {
  margin: 0 auto 16px;
  opacity: 0.3;
}
.empty-text[data-v-c1d4ba7e] {
  margin: 0;
  font-size: 16px;
}
.save-toast[data-v-c1d4ba7e] {
  position: fixed;
  bottom: 32px;
  right: 32px;
  background: var(--q-accent);
  color: var(--q-info);
  padding: 12px 24px;
  border-radius: 12px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 50;
  animation: slideInFadeIn-c1d4ba7e 0.3s ease-in-out;
}
@keyframes slideInFadeIn-c1d4ba7e {
from {
    opacity: 0;
    transform: translateY(40px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.toast-icon[data-v-c1d4ba7e] {
  color: var(--q-success);
}
.toast-title[data-v-c1d4ba7e] {
  font-weight: 700;
  font-size: 14px;
  margin: 0;
}
.toast-subtitle[data-v-c1d4ba7e] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 2px 0 0 0;
}


/* Брендовые цвета из brandColors.js roseColorScheme: primary #e11d48, accent #0f172a, success #22c55e, dark #f8fafc, positive #64748b, info #ffffff */
.loading-state[data-v-82241ec2] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.settings-container[data-v-82241ec2] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-82241ec2 0.5s ease-in-out;
}
@keyframes fadeIn-82241ec2 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
/* Header: white card, rose icon (React: bg-rose-50, text-rose-600) */
.header-card[data-v-82241ec2] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-icon-box[data-v-82241ec2] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.header-title[data-v-82241ec2] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-82241ec2] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
/* Legend: три состояния переключателя */
.legend-row[data-v-82241ec2] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 12px 0;
  font-size: 13px;
  color: var(--q-positive);
}
.legend-item[data-v-82241ec2] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend-dot[data-v-82241ec2] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.legend-dot--disabled[data-v-82241ec2] {
  background: var(--q-positive);
}
.legend-dot--discretion[data-v-82241ec2] {
  background: var(--q-warning);
}
.legend-dot--enabled[data-v-82241ec2] {
  background: var(--q-primary);
}

/* Трёхпозиционный переключатель (сегменты) */
.segment-control[data-v-82241ec2] {
  display: inline-flex;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 10px;
  overflow: hidden;
  background: var(--q-dark);
}
.segment-control--disabled[data-v-82241ec2] {
  opacity: 0.6;
  pointer-events: none;
}
.segment-btn[data-v-82241ec2] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--q-positive);
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s;
}
.segment-btn[data-v-82241ec2]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  color: var(--q-accent);
}
.segment-btn + .segment-btn[data-v-82241ec2] {
  border-left: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.segment-btn--active.segment-btn[data-v-82241ec2]:first-child {
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  color: var(--q-accent);
}
.segment-btn--active.segment-btn[data-v-82241ec2]:nth-child(2) {
  background: color-mix(in srgb, var(--q-warning) 20%, var(--q-info));
  color: var(--q-warning);
}
.segment-btn--active.segment-btn[data-v-82241ec2]:last-child {
  background: var(--q-primary);
  color: var(--q-info);
}
.segment-btn[data-v-82241ec2]:focus {
  outline: 2px solid var(--q-primary);
  outline-offset: 1px;
}

/* Settings card: white, divide-y */
.settings-card[data-v-82241ec2] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.settings-list.divide-y > .setting-item[data-v-82241ec2]:not(:last-child) {
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
}
.setting-item[data-v-82241ec2] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  transition: background-color 0.2s;
}
.setting-item[data-v-82241ec2]:hover {
  background-color: color-mix(in srgb, var(--q-accent) 4%, var(--q-info));
}
.setting-item-disabled[data-v-82241ec2] {
  opacity: 0.7;
}
.setting-content[data-v-82241ec2] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.setting-icon[data-v-82241ec2] {
  padding: 8px;
  border-radius: 12px;
  transition: all 0.2s;
  background: var(--q-dark);
  color: var(--q-positive);
}
.setting-icon-active[data-v-82241ec2] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
}
.setting-label[data-v-82241ec2] {
  font-weight: 500;
  transition: color 0.2s;
  color: var(--q-positive);
}
.setting-label-active[data-v-82241ec2] {
  color: var(--q-accent);
}
/* Footer: slate-50, button slate-900 / green when saved (React) */
.settings-footer[data-v-82241ec2] {
  background: color-mix(in srgb, var(--q-accent) 4%, var(--q-info));
  padding: 24px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  display: flex;
  justify-content: flex-end;
}
.save-btn[data-v-82241ec2] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 700;
  color: var(--q-info);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
  background: var(--q-primary);
}
.save-btn[data-v-82241ec2]:hover {
  filter: brightness(1.1);
}
.save-btn-saved[data-v-82241ec2] {
  background: var(--q-positive);
}
.save-btn-saved[data-v-82241ec2]:hover {
  filter: brightness(0.95);
}


.gamification-container[data-v-0e4be922] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 896px;
  margin: 0 auto;
  padding-bottom: 96px;
  animation: fadeIn-0e4be922 0.5s ease-in-out;
}
@keyframes fadeIn-0e4be922 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.rounded-borders-lg[data-v-0e4be922] {
  border-radius: 16px;
}

/* Header (React: amber icon, title, subtitle) */
.gami-header[data-v-0e4be922] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-icon-box[data-v-0e4be922] {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
}
.header-icon-box--amber[data-v-0e4be922] {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
  border: 1px solid color-mix(in srgb, var(--q-warning) 25%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.header-title[data-v-0e4be922] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-0e4be922] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}

/* Tabs (React: pill with two buttons) */
.gami-tabs[data-v-0e4be922] {
  display: flex;
  padding: 4px;
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  width: -moz-fit-content;
  width: fit-content;
}
.gami-tab[data-v-0e4be922] {
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--q-positive);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.gami-tab[data-v-0e4be922]:hover {
  color: var(--q-accent);
}
.gami-tab--active[data-v-0e4be922] {
  background: var(--q-info);
  color: var(--q-accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Levels card */
.gami-levels-card[data-v-0e4be922] {
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.gami-levels-header[data-v-0e4be922] {
  padding: 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  background: color-mix(in srgb, var(--q-accent) 3%, var(--q-info));
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gami-levels-title[data-v-0e4be922] {
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  color: var(--q-accent);
  margin: 0;
}
.btn-add-status[data-v-0e4be922] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info)) !important;
  color: var(--q-primary) !important;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 16px;
}
.btn-add-status[data-v-0e4be922]:hover {
  background: color-mix(in srgb, var(--q-primary) 18%, var(--q-info)) !important;
}
.gami-levels-list[data-v-0e4be922] {
  padding: 24px;
}
.gami-level-row[data-v-0e4be922] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  border-radius: 12px;
  background: var(--q-info);
  margin-bottom: 12px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.gami-level-row[data-v-0e4be922]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 25%, transparent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.gami-level-row:hover .gami-level-actions[data-v-0e4be922] {
  opacity: 1;
}
.gami-level-info[data-v-0e4be922] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.gami-level-avatar[data-v-0e4be922] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-warning) 25%, var(--q-info));
  color: var(--q-warning);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gami-level-name[data-v-0e4be922] {
  font-size: 16px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 4px 0;
}
.gami-level-range[data-v-0e4be922] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.gami-level-badge[data-v-0e4be922] {
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  color: var(--q-accent);
  font-weight: 500;
}
.gami-level-dash[data-v-0e4be922] {
  color: var(--q-positive);
}
.gami-level-xp[data-v-0e4be922] {
  color: var(--q-warning);
  font-weight: 700;
}
.gami-level-actions[data-v-0e4be922] {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}
@media (max-width: 600px) {
.gami-level-actions[data-v-0e4be922] {
    opacity: 1;
}
}
.btn-level-action[data-v-0e4be922] {
  color: var(--q-positive) !important;
}
.btn-level-action[data-v-0e4be922]:hover {
  color: var(--q-primary) !important;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info)) !important;
}
.btn-level-action--danger[data-v-0e4be922] {
  color: var(--q-positive) !important;
  background: color-mix(in srgb, var(--q-negative) 6%, var(--q-dark)) !important;
  border: 1px solid color-mix(in srgb, var(--q-negative) 18%, var(--q-dark)) !important;
}
.btn-level-action--danger[data-v-0e4be922]:hover {
  color: var(--q-primary) !important;
  background: color-mix(in srgb, var(--q-negative) 22%, var(--q-dark)) !important;
  border-color: color-mix(in srgb, var(--q-negative) 40%, var(--q-dark)) !important;
}
.gami-levels-footer[data-v-0e4be922] {
  padding: 24px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Level modal */
.gami-modal-card[data-v-0e4be922] {
  border-radius: 16px;
  max-width: 400px;
}
.gami-modal-title[data-v-0e4be922] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.gami-label[data-v-0e4be922] {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--q-positive);
  margin-bottom: 4px;
}

/* Points card */
.gami-points-card[data-v-0e4be922] {
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 24px;
  border-radius: 16px;
}
.gami-points-title[data-v-0e4be922] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.gami-block[data-v-0e4be922] {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  overflow: hidden;
  transition: all 0.3s;
}
.gami-block--active[data-v-0e4be922] {
  border-color: color-mix(in srgb, var(--q-primary) 30%, transparent);
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
}
.gami-block-header[data-v-0e4be922] {
  padding: 16px;
}
.gami-block-title[data-v-0e4be922] {
  font-size: 16px;
}
.gami-block-icon[data-v-0e4be922] {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  color: var(--q-positive);
}
.gami-block-icon--active[data-v-0e4be922] {
  background: color-mix(in srgb, var(--q-primary) 20%, var(--q-info));
  color: var(--q-primary);
}
.gami-block-body[data-v-0e4be922] {
  padding: 16px 16px 24px;
  border-top: 1px solid color-mix(in srgb, var(--q-primary) 15%, transparent);
}
.gami-action-row[data-v-0e4be922] {
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  border-radius: 12px;
  background: var(--q-info);
  transition: border-color 0.2s;
}
.gami-action-row[data-v-0e4be922]:hover {
  border-color: color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
}
.gami-action-icon[data-v-0e4be922] {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  color: var(--q-positive);
}
.gami-points-input[data-v-0e4be922] {
  width: 100px;
}
.gami-points-footer[data-v-0e4be922] {
  position: sticky;
  bottom: 16px;
  padding-top: 16px;
  display: flex;
  justify-content: flex-end;
}
.btn-save-changes[data-v-0e4be922] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  border-radius: 12px;
  font-weight: 700;
  padding: 12px 32px;
  box-shadow: 0 10px 40px color-mix(in srgb, var(--q-primary) 25%, transparent);
}
.btn-save-changes[data-v-0e4be922]:hover {
  filter: brightness(0.95);
}
.btn-primary[data-v-0e4be922] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  border-radius: 12px;
  font-weight: 600;
  padding: 8px 24px;
}
.btn-secondary[data-v-0e4be922] {
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info)) !important;
  color: var(--q-accent) !important;
  background: var(--q-info) !important;
  border-radius: 10px;
  font-weight: 500;
  padding: 8px 16px;
}
.btn-icon[data-v-0e4be922] {
  color: var(--q-positive) !important;
  opacity: 0.7;
}
.btn-icon[data-v-0e4be922]:hover {
  color: var(--q-primary) !important;
  opacity: 1;
  background: color-mix(in srgb, var(--q-primary) 8%, transparent) !important;
}
.loading-state[data-v-0e4be922] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
[data-v-0e4be922] .q-field__control {
  border-radius: 12px !important;
}


.other-container[data-v-16b364f4] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 70%;
  max-width: 70%;
  margin: 0 auto;
  padding-bottom: 100px;
  animation: fadeIn-16b364f4 0.5s ease-in-out;
}
@keyframes fadeIn-16b364f4 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.rounded-borders-lg[data-v-16b364f4] {
  border-radius: 16px;
}
.export-format-label[data-v-16b364f4] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
  margin-bottom: 12px;
}
.export-format-toggle[data-v-16b364f4] {
  display: flex;
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-accent) 18%, var(--q-info));
  border-radius: 12px;
  padding: 4px;
  gap: 0;
}
.export-format-option[data-v-16b364f4] {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
  background: transparent;
  color: var(--q-positive);
}
.export-format-option[data-v-16b364f4]:hover:not(.active) {
  color: var(--q-accent);
}
.export-format-option.active[data-v-16b364f4] {
  background: var(--q-info);
  color: var(--q-primary);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--q-accent) 12%, transparent);
}
.export-format-hint[data-v-16b364f4] {
  font-size: 12px;
  color: var(--q-positive);
  margin-top: 8px;
  padding-left: 2px;
}
.header-info[data-v-16b364f4] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-icon-box[data-v-16b364f4] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
  flex-shrink: 0;
}
.header-title[data-v-16b364f4] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-16b364f4] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.columns-grid[data-v-16b364f4] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.card-fill[data-v-16b364f4] {
  height: 100%;
}
@media (max-width: 1024px) {
.columns-grid[data-v-16b364f4] {
    grid-template-columns: 1fr;
}
}
.catalog-item-row[data-v-16b364f4] {
  transition: background-color 0.2s;
}
.catalog-item-row[data-v-16b364f4]:hover {
  background: color-mix(in srgb, var(--q-primary) 5%, var(--q-info));
  border-radius: 12px;
}
.tag-input-row[data-v-16b364f4] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tag-input[data-v-16b364f4] {
  flex: 1;
}
.tag-chips[data-v-16b364f4] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-chip[data-v-16b364f4] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
  border: 1px solid var(--q-dark);
  border-radius: 10px;
  transition: border-color 0.2s;
}
.tag-chip[data-v-16b364f4]:hover {
  border-color: color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.tag-chip-label[data-v-16b364f4] {
  font-size: 14px;
  font-weight: 500;
  color: var(--q-accent);
}
.tag-chip-edit[data-v-16b364f4] {
  min-width: 80px;
}
.tag-chip-actions[data-v-16b364f4] {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0.8;
}
.tag-chip:hover .tag-chip-actions[data-v-16b364f4] {
  opacity: 1;
}
.footer-actions[data-v-16b364f4] {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--q-info);
  border-top: 1px solid var(--q-dark);
  padding: 16px;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  width: 70%;
  max-width: 70%;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
.footer-save-btn[data-v-16b364f4] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  border-radius: 12px;
  font-weight: 700;
  padding: 12px 24px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--q-primary) 25%, transparent);
}
.footer-save-btn[data-v-16b364f4]:hover {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--q-primary) 35%, transparent);
}
.toggle-row[data-v-16b364f4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.toggle-info[data-v-16b364f4] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-header[data-v-16b364f4] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-icon[data-v-16b364f4] {
  color: var(--q-primary);
}
.reminder-row[data-v-16b364f4] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.content-icon-box[data-v-16b364f4] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info)) !important;
  color: var(--q-primary) !important;
}
.catalog-side[data-v-16b364f4] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.catalog-badge-hidden[data-v-16b364f4] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tag-table-header[data-v-16b364f4] {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.tag-table-header > div[data-v-16b364f4]:first-child {
  flex: 1;
}
.tag-row[data-v-16b364f4] {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--q-dark);
}
.tag-name[data-v-16b364f4] {
  flex: 1;
}
.tag-actions[data-v-16b364f4] {
  flex-shrink: 0;
}
.primary-opacity[data-v-16b364f4] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info)) !important;
}
.warning-opacity[data-v-16b364f4] {
  background: color-mix(in srgb, var(--q-warning) 10%, var(--q-info)) !important;
}
.btn-primary[data-v-16b364f4] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  border-radius: 10px;
  font-weight: 600;
  padding: 8px 16px;
  box-shadow: 0 4px 8px color-mix(in srgb, var(--q-primary) 15%, transparent);
}
.btn-icon[data-v-16b364f4] {
  color: var(--q-positive) !important;
  opacity: 0.7;
  transition: all 0.2s;
}
.btn-icon[data-v-16b364f4]:hover {
  color: var(--q-primary) !important;
  opacity: 1;
  background: color-mix(in srgb, var(--q-primary) 8%, transparent) !important;
}
.btn-icon-danger[data-v-16b364f4] {
  color: var(--q-positive) !important;
  background: color-mix(in srgb, var(--q-negative) 6%, var(--q-dark)) !important;
  border: 1px solid color-mix(in srgb, var(--q-negative) 18%, var(--q-dark)) !important;
  transition: color 0.2s, background 0.2s, border-color 0.2s !important;
}
.btn-icon-danger[data-v-16b364f4]:hover {
  color: var(--q-primary) !important;
  background: color-mix(in srgb, var(--q-negative) 22%, var(--q-dark)) !important;
  border-color: color-mix(in srgb, var(--q-negative) 40%, var(--q-dark)) !important;
}
.loading-state[data-v-16b364f4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
[data-v-16b364f4] .q-field__control {
  border-radius: 12px !important;
}


.certificates-container[data-v-7d74802e] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-7d74802e 0.5s ease-in-out;
}
@keyframes fadeIn-7d74802e {
from { opacity: 0; transform: translateY(16px);
}
to { opacity: 1; transform: translateY(0);
}
}
.rounded-borders-lg[data-v-7d74802e] { border-radius: 16px;
}
.header-icon-box[data-v-7d74802e] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
  flex-shrink: 0;
}
.badge-default[data-v-7d74802e] {
  background: var(--q-positive);
  color: var(--q-info);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.cert-card-footer[data-v-7d74802e] {
  padding: 16px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  background: color-mix(in srgb, var(--q-accent) 4%, var(--q-info));
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cert-id[data-v-7d74802e] { font-size: 12px; font-family: monospace; color: var(--q-positive);
}
.modal-left-panel[data-v-7d74802e] {
  max-width: 400px;
  flex-shrink: 0;
  background: var(--q-info);
  border-right: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.modal-panel-header[data-v-7d74802e] {
  background: var(--q-info);
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  position: sticky;
  top: 0;
  z-index: 10;
}
.modal-right-panel[data-v-7d74802e] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--q-dark);
}
.modal-preview-header[data-v-7d74802e] {
  padding: 16px;
  background: var(--q-info);
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}
.modal-preview-area[data-v-7d74802e] {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: color-mix(in srgb, var(--q-accent) 5%, var(--q-dark));
}
.modal-preview-footer[data-v-7d74802e] {
  padding: 20px;
  background: var(--q-info);
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.btn-download[data-v-7d74802e] {
  color: var(--q-accent) !important;
  font-weight: 700;
  font-size: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
  background: var(--q-info) !important;
  padding: 6px 12px;
}
.btn-download[data-v-7d74802e]:hover {
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-info)) !important;
}
.btn-modal-cancel[data-v-7d74802e] {
  color: var(--q-positive) !important;
  border-radius: 12px;
  font-weight: 500;
  padding: 10px 24px;
}
.btn-modal-cancel[data-v-7d74802e]:hover {
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-info)) !important;
}
.btn-save-template[data-v-7d74802e] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  border-radius: 12px;
  font-weight: 700;
  padding: 10px 32px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--q-primary) 25%, transparent);
}
.btn-save-template[data-v-7d74802e]:hover { filter: brightness(1.1);
}
.header-title[data-v-7d74802e] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-7d74802e] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.certificate-preview[data-v-7d74802e] {
  height: 160px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.bg-dark-preview[data-v-7d74802e] {
  background: color-mix(in srgb, var(--q-accent) 90%, black);
}
.bg-light-preview[data-v-7d74802e] {
  background: var(--q-dark);
}
.btn-primary[data-v-7d74802e] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  border-radius: 10px;
  font-weight: 600;
  padding: 8px 16px;
  box-shadow: 0 4px 8px color-mix(in srgb, var(--q-primary) 15%, transparent);
}
.btn-secondary[data-v-7d74802e] {
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info)) !important;
  color: var(--q-accent) !important;
  background: var(--q-info) !important;
  border-radius: 10px;
  font-weight: 500;
  padding: 8px 16px;
}
.btn-icon[data-v-7d74802e] {
  color: var(--q-positive) !important;
  opacity: 0.7;
  transition: all 0.2s;
}
.btn-icon[data-v-7d74802e]:hover {
  color: var(--q-primary) !important;
  opacity: 1;
  background: color-mix(in srgb, var(--q-primary) 8%, transparent) !important;
}
.btn-icon-danger[data-v-7d74802e] {
  color: var(--q-positive) !important;
  background: color-mix(in srgb, var(--q-negative) 6%, var(--q-dark)) !important;
  border: 1px solid color-mix(in srgb, var(--q-negative) 18%, var(--q-dark)) !important;
  transition: color 0.2s, background 0.2s, border-color 0.2s !important;
}
.btn-icon-danger[data-v-7d74802e]:hover {
  color: var(--q-primary) !important;
  background: color-mix(in srgb, var(--q-negative) 22%, var(--q-dark)) !important;
  border-color: color-mix(in srgb, var(--q-negative) 40%, var(--q-dark)) !important;
}
.loading-state[data-v-7d74802e] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
[data-v-7d74802e] .q-field__control {
  border-radius: 12px !important;
}


/* Образец: React ManageModeratorsView — rose/slate/amber/green, rounded-2xl */
.moderators-wrap[data-v-7bd7afd8] {
  max-width: 64rem; /* max-w-5xl */
  margin: 0 auto;
  padding-bottom: 2.5rem;
  animation: modFadeIn-7bd7afd8 0.5s ease-out;
}
@keyframes modFadeIn-7bd7afd8 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Header card — bg-white rounded-2xl border shadow-sm p-6 */
.header-card[data-v-7bd7afd8] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.header-left[data-v-7bd7afd8] {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.header-icon-wrap[data-v-7bd7afd8] {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.header-title[data-v-7bd7afd8] {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 1.25;
}
.header-subtitle[data-v-7bd7afd8] {
  font-size: 0.875rem;
  color: var(--q-positive);
  margin: 0.25rem 0 0 0;
}
.header-right[data-v-7bd7afd8] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 320px;
}
@media (min-width: 768px) {
.header-right[data-v-7bd7afd8] {
    width: auto;
    max-width: none;
}
}
.search-wrap[data-v-7bd7afd8] {
  position: relative;
  flex: 1;
  min-width: 0;
}
@media (min-width: 768px) {
.search-wrap[data-v-7bd7afd8] {
    width: 16rem;
    flex: none;
}
}
.search-icon[data-v-7bd7afd8] {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--q-positive);
  pointer-events: none;
}
.search-input[data-v-7bd7afd8] {
  width: 100%;
  padding: 0.5rem 1rem 0.5rem 2.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--q-accent);
  background: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  outline: none;
  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
.search-input[data-v-7bd7afd8]::placeholder {
  color: var(--q-positive);
}
.search-input[data-v-7bd7afd8]:focus {
  background: var(--q-info);
  border-color: var(--q-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--q-primary) 20%, transparent);
}
.btn-add[data-v-7bd7afd8] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  border-radius: 12px;
  font-weight: 700;
  padding: 0.5rem 1rem;
  box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--q-primary) 20%, transparent);
  white-space: nowrap;
}
.btn-add[data-v-7bd7afd8]:hover {
  filter: brightness(1.1);
}

/* Hint card — bg-amber-50 border-amber-100 rounded-xl */
.hint-card[data-v-7bd7afd8] {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  background: color-mix(in srgb, var(--q-warning) 10%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-warning) 20%, var(--q-info));
  border-radius: 12px;
}
.hint-inner[data-v-7bd7afd8] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.hint-icon[data-v-7bd7afd8] {
  color: var(--q-warning);
  flex-shrink: 0;
  margin-top: 2px;
}
.hint-text[data-v-7bd7afd8] {
  font-size: 0.875rem;
  color: var(--q-accent);
  line-height: 1.5;
}

/* List */
.list-grid[data-v-7bd7afd8] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.moderator-card[data-v-7bd7afd8] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem;
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s;
}
.moderator-card[data-v-7bd7afd8]:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
}
.card-avatar-wrap[data-v-7bd7afd8] {
  flex-shrink: 0;
}
.card-avatar[data-v-7bd7afd8] {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--q-info);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.card-avatar-img[data-v-7bd7afd8] {
  overflow: hidden;
}
.card-avatar-letter[data-v-7bd7afd8] {
  background: var(--q-dark);
  color: var(--q-positive);
  font-weight: 700;
  font-size: 1.125rem;
}
.card-info[data-v-7bd7afd8] {
  flex: 1;
  min-width: 0;
  text-align: center;
}
@media (min-width: 640px) {
.card-info[data-v-7bd7afd8] {
    text-align: left;
}
}
.card-name-row[data-v-7bd7afd8] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.card-name[data-v-7bd7afd8] {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.badge[data-v-7bd7afd8] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.badge-limited[data-v-7bd7afd8] {
  background: color-mix(in srgb, var(--q-warning) 10%, var(--q-info));
  color: var(--q-warning);
  border: 1px solid color-mix(in srgb, var(--q-warning) 20%, var(--q-info));
}
.badge-full[data-v-7bd7afd8] {
  background: color-mix(in srgb, var(--q-positive) 10%, var(--q-info));
  color: var(--q-positive);
  border: 1px solid color-mix(in srgb, var(--q-positive) 20%, var(--q-info));
}
.card-meta[data-v-7bd7afd8] {
  font-size: 0.875rem;
  color: var(--q-positive);
}
.card-actions[data-v-7bd7afd8] {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  justify-content: space-between;
}
@media (min-width: 640px) {
.card-actions[data-v-7bd7afd8] {
    width: auto;
    padding-top: 0;
    border-top: none;
    justify-content: flex-end;
}
}
.actions-divider[data-v-7bd7afd8] {
  width: 1px;
  height: 2rem;
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  flex-shrink: 0;
}
@media (max-width: 639px) {
.actions-divider[data-v-7bd7afd8] {
    display: none;
}
}

/* Toggle switch (как в React: pill, amber когда включено) */
.toggle-wrap[data-v-7bd7afd8] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.toggle-input[data-v-7bd7afd8] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.toggle-switch[data-v-7bd7afd8] {
  position: relative;
  width: 2.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}
.toggle-track[data-v-7bd7afd8] {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  transition: background 0.2s;
}
.toggle-track-on[data-v-7bd7afd8] {
  background: var(--q-warning);
}
.toggle-thumb[data-v-7bd7afd8] {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--q-dark);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}
.toggle-thumb-on[data-v-7bd7afd8] {
  transform: translateX(18px);
}
.toggle-label[data-v-7bd7afd8] {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--q-positive);
}
.btn-delete[data-v-7bd7afd8] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: var(--q-positive);
  background: color-mix(in srgb, var(--q-negative) 6%, var(--q-dark));
  border: 1px solid color-mix(in srgb, var(--q-negative) 18%, var(--q-dark));
  border-radius: 12px;
  cursor: pointer;
  transition:
    color 0.2s,
    background 0.2s,
    border-color 0.2s;
}
.btn-delete[data-v-7bd7afd8]:hover {
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-negative) 22%, var(--q-dark));
  border-color: color-mix(in srgb, var(--q-negative) 40%, var(--q-dark));
}

/* Empty state */
.empty-state[data-v-7bd7afd8] {
  padding: 3rem 1.5rem;
  text-align: center;
  background: var(--q-info);
  border: 1px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  border-radius: 16px;
  color: var(--q-positive);
}
.empty-icon[data-v-7bd7afd8] {
  display: block;
  margin: 0 auto 1rem;
  opacity: 0.5;
}
.empty-text[data-v-7bd7afd8] {
  margin: 0;
  font-size: 0.875rem;
}
.loading-state[data-v-7bd7afd8] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  text-align: center;
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 16px;
}

/* Модалка удаления (как в новых интерфейсах) */
.confirm-modal-card[data-v-7bd7afd8] {
  min-width: 400px;
  max-width: 500px;
  border-radius: 16px;
}
.cancel-btn[data-v-7bd7afd8] {
  color: var(--q-positive);
  font-weight: 700;
}
.cancel-btn[data-v-7bd7afd8]:hover {
  background-color: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.confirm-delete-btn[data-v-7bd7afd8] {
  background-color: var(--q-negative);
  color: var(--q-info);
  font-weight: 600;
}
.confirm-delete-btn[data-v-7bd7afd8]:hover {
  filter: brightness(0.9);
}


.catalog-container[data-v-d4b7f30e] {
  max-width: 896px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-d4b7f30e 0.5s ease-in-out;
}
@keyframes fadeIn-d4b7f30e {
from { opacity: 0; transform: translateY(16px);
}
to { opacity: 1; transform: translateY(0);
}
}

/* Header */
.header-card[data-v-d4b7f30e] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  padding: 24px;
  margin-bottom: 24px;
}
.header-row[data-v-d4b7f30e] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
@media (min-width: 768px) {
.header-row[data-v-d4b7f30e] { flex-direction: row; justify-content: space-between; align-items: center;
}
}
.header-info[data-v-d4b7f30e] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-icon-box[data-v-d4b7f30e] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
  flex-shrink: 0;
}
.header-title[data-v-d4b7f30e] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-d4b7f30e] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.btn-reset[data-v-d4b7f30e] {
  color: var(--q-positive) !important;
}
.btn-reset[data-v-d4b7f30e]:hover {
  color: var(--q-accent) !important;
  background: color-mix(in srgb, var(--q-accent) 8%, transparent) !important;
  border-radius: 12px;
}

/* Grid layout */
.grid-layout[data-v-d4b7f30e] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 1024px) {
.grid-layout[data-v-d4b7f30e] { grid-template-columns: 1fr 2fr;
}
}

/* Left: Add card */
.add-card[data-v-d4b7f30e] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  padding: 14px 24px 24px 24px;
  position: sticky;
  top: 24px;
}
.add-title[data-v-d4b7f30e] {
  font-size: 16px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 13px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.add-icon[data-v-d4b7f30e] {
  color: var(--q-primary);
}
.add-form[data-v-d4b7f30e] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.add-label[data-v-d4b7f30e] {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--q-positive);
  margin-bottom: 4px;
}
.add-input[data-v-d4b7f30e] .q-field__control {
  border-radius: 12px !important;
}
.btn-add-full[data-v-d4b7f30e] {
  width: 100%;
  height: 48px;
  font-weight: 700;
  border-radius: 12px;
}
.btn-add-full[data-v-d4b7f30e]:hover:not(:disabled) {
  filter: brightness(1.05);
}
.hint-block[data-v-d4b7f30e] {
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--q-positive);
  line-height: 1.5;
}
.hint-icon[data-v-d4b7f30e] {
  color: var(--q-primary);
  flex-shrink: 0;
}

/* Right: List */
.list-card[data-v-d4b7f30e] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.list-header[data-v-d4b7f30e] {
  padding: 20px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  background: color-mix(in srgb, var(--q-accent) 4%, var(--q-info));
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list-header-title[data-v-d4b7f30e] {
  font-weight: 700;
  font-size: 14px;
  color: var(--q-accent);
}
.badge-saved[data-v-d4b7f30e] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
  background: color-mix(in srgb, var(--q-positive) 15%, var(--q-info));
  padding: 4px 8px;
  border-radius: 6px;
  animation: fadeIn-d4b7f30e 0.3s ease-in-out;
}
.list-body[data-v-d4b7f30e] {
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
}
.list-row[data-v-d4b7f30e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 6%, var(--q-info));
  transition: background 0.2s;
}
.list-row[data-v-d4b7f30e]:hover {
  background: color-mix(in srgb, var(--q-accent) 4%, var(--q-info));
}
.list-row[data-v-d4b7f30e]:last-child { border-bottom: none;
}
.list-row-left[data-v-d4b7f30e] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.grip-icon[data-v-d4b7f30e] {
  width: 20px;
  color: color-mix(in srgb, var(--q-accent) 40%, var(--q-info));
}
.badge-num[data-v-d4b7f30e] {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.row-title[data-v-d4b7f30e] {
  font-weight: 500;
  color: var(--q-accent);
}
.edit-inline-input[data-v-d4b7f30e] {
  flex: 1;
  min-width: 0;
}
.edit-inline-input[data-v-d4b7f30e] .q-field__control {
  border-radius: 8px !important;
}
.btn-edit[data-v-d4b7f30e] {
  color: color-mix(in srgb, var(--q-accent) 50%, var(--q-info)) !important;
}
.btn-edit[data-v-d4b7f30e]:hover {
  color: var(--q-primary) !important;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info)) !important;
}
.list-row-right[data-v-d4b7f30e] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.move-buttons[data-v-d4b7f30e] {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.move-btn[data-v-d4b7f30e] {
  min-width: auto;
  padding: 2px 4px;
  color: color-mix(in srgb, var(--q-accent) 50%, var(--q-info)) !important;
}
.move-btn[data-v-d4b7f30e]:hover:not(:disabled) {
  color: var(--q-primary) !important;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info)) !important;
}
.move-btn[data-v-d4b7f30e]:disabled { opacity: 0.2;
}
.separator[data-v-d4b7f30e] {
  width: 1px;
  height: 32px;
  background: color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  margin: 0 4px;
}
.btn-delete[data-v-d4b7f30e] {
  color: var(--q-positive) !important;
  background: color-mix(in srgb, var(--q-negative) 6%, var(--q-dark)) !important;
  border: 1px solid color-mix(in srgb, var(--q-negative) 18%, var(--q-dark)) !important;
  transition: color 0.2s, background 0.2s, border-color 0.2s !important;
}
.btn-delete[data-v-d4b7f30e]:hover {
  color: var(--q-primary) !important;
  background: color-mix(in srgb, var(--q-negative) 22%, var(--q-dark)) !important;
  border-color: color-mix(in srgb, var(--q-negative) 40%, var(--q-dark)) !important;
}
.empty-state[data-v-d4b7f30e] {
  padding: 32px;
  text-align: center;
  color: color-mix(in srgb, var(--q-accent) 60%, var(--q-info));
  font-style: italic;
}
.list-footer[data-v-d4b7f30e] {
  padding: 20px 24px;
  background: color-mix(in srgb, var(--q-accent) 4%, var(--q-info));
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  display: flex;
  justify-content: flex-end;
}
.btn-save[data-v-d4b7f30e] {
  font-weight: 700;
  border-radius: 12px;
  padding: 10px 24px;
}
.btn-save[data-v-d4b7f30e]:hover {
  filter: brightness(1.1);
}
.loading-state[data-v-d4b7f30e] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}


.aos-container[data-v-6ba358cc] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-6ba358cc 0.5s ease-in-out;
}
@keyframes fadeIn-6ba358cc {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.rounded-borders-lg[data-v-6ba358cc] {
  border-radius: 16px;
}
.header-icon-box[data-v-6ba358cc] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
  flex-shrink: 0;
}
/* Loading State */
.loading-state[data-v-6ba358cc] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.header-title[data-v-6ba358cc] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-6ba358cc] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.sticky-header[data-v-6ba358cc] {
  position: sticky;
  top: 16px;
  z-index: 10;
  background: color-mix(in srgb, var(--q-info) 90%, transparent);
  backdrop-filter: blur(8px);
  padding: 8px;
  margin: -8px;
  border-radius: 12px;
}
.btn-primary[data-v-6ba358cc] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  border-radius: 10px;
  font-weight: 600;
  padding: 8px 16px;
  box-shadow: 0 4px 8px color-mix(in srgb, var(--q-primary) 15%, transparent);
}
.btn-secondary[data-v-6ba358cc] {
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info)) !important;
  color: var(--q-accent) !important;
  background: var(--q-info) !important;
  border-radius: 10px;
  font-weight: 500;
  padding: 8px 16px;
}
.btn-icon[data-v-6ba358cc] {
  color: var(--q-positive) !important;
  opacity: 0.7;
  transition: all 0.2s;
}
.btn-icon[data-v-6ba358cc]:hover {
  color: var(--q-primary) !important;
  opacity: 1;
  background: color-mix(in srgb, var(--q-primary) 8%, transparent) !important;
}
.btn-icon-danger[data-v-6ba358cc] {
  color: var(--q-positive) !important;
  background: color-mix(in srgb, var(--q-negative) 6%, var(--q-dark)) !important;
  border: 1px solid color-mix(in srgb, var(--q-negative) 18%, var(--q-dark)) !important;
  transition: color 0.2s, background 0.2s, border-color 0.2s !important;
}
.btn-icon-danger[data-v-6ba358cc]:hover {
  color: var(--q-primary) !important;
  background: color-mix(in srgb, var(--q-negative) 22%, var(--q-dark)) !important;
  border-color: color-mix(in srgb, var(--q-negative) 40%, var(--q-dark)) !important;
}
.aos-list-grid[data-v-6ba358cc] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.aos-list-card[data-v-6ba358cc] {
  transition: box-shadow 0.2s;
}
.aos-list-card[data-v-6ba358cc]:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.aos-card-title[data-v-6ba358cc] {
  font-size: 18px;
  margin: 0;
  line-height: 1.4;
}
.aos-target-badge[data-v-6ba358cc] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  color: var(--q-accent);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.aos-card-meta[data-v-6ba358cc] {
  font-size: 12px;
  color: var(--q-positive);
}
.aos-btn-divider[data-v-6ba358cc] {
  width: 1px;
  height: 24px;
  background: color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  margin: 0 4px;
}
.aos-editor-nav[data-v-6ba358cc] {
  position: sticky;
  top: 16px;
  z-index: 10;
  background: color-mix(in srgb, var(--q-info) 90%, transparent);
  backdrop-filter: blur(8px);
  padding: 8px;
  margin: -8px;
  border-radius: 12px;
}
.btn-back[data-v-6ba358cc], .btn-back-preview[data-v-6ba358cc] {
  color: var(--q-positive) !important;
  font-weight: 500;
}
.btn-back[data-v-6ba358cc]:hover, .btn-back-preview[data-v-6ba358cc]:hover {
  color: var(--q-accent) !important;
}
.btn-preview[data-v-6ba358cc] {
  background: var(--q-info) !important;
  border: 1px solid var(--q-dark);
  color: var(--q-accent) !important;
  border-radius: 12px;
}
.aos-block-title[data-v-6ba358cc] {
  font-size: 18px;
  margin: 0;
}
.aos-label[data-v-6ba358cc] {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--q-positive);
  margin-bottom: 4px;
}
.aos-target-btn[data-v-6ba358cc] {
  border-radius: 8px;
}
.aos-target-btn-active[data-v-6ba358cc] {
  background: color-mix(in srgb, var(--q-primary) 12%, var(--q-info)) !important;
  border: 1px solid var(--q-primary) !important;
}
.aos-count-badge[data-v-6ba358cc] {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  color: var(--q-positive);
  font-family: monospace;
}
.btn-load-defaults[data-v-6ba358cc] {
  color: var(--q-primary) !important;
  font-size: 12px;
  font-weight: 500;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info)) !important;
  border-radius: 8px;
}
.btn-load-defaults[data-v-6ba358cc]:hover {
  background: color-mix(in srgb, var(--q-primary) 18%, var(--q-info)) !important;
}
.aos-questions-list[data-v-6ba358cc] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.aos-question-row[data-v-6ba358cc] {
  background: color-mix(in srgb, var(--q-accent) 4%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  border-radius: 12px;
  padding: 8px 12px;
}
.aos-answers-list[data-v-6ba358cc] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.aos-answer-row[data-v-6ba358cc] {
  background: color-mix(in srgb, var(--q-positive) 8%, var(--q-info));
  border-radius: 12px;
  padding: 8px 12px;
}
.aos-inline-text[data-v-6ba358cc] {
  cursor: text;
  min-height: 40px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  color: var(--q-accent);
  word-break: break-word;
}
.aos-inline-text[data-v-6ba358cc]:hover {
  color: var(--q-primary);
}
.aos-question-row .aos-input[data-v-6ba358cc],
.aos-answer-row .aos-input[data-v-6ba358cc] {
  border-radius: 12px;
}
.aos-input-editing[data-v-6ba358cc] .q-field__control,
.aos-input-editing.q-field--focused[data-v-6ba358cc] .q-field__control {
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--q-primary) 30%, transparent);
  border-radius: 8px;
}
.aos-answer-num[data-v-6ba358cc] {
  width: 32px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--q-positive);
}
.aos-add-btn[data-v-6ba358cc] {
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  border-radius: 12px;
  color: var(--q-positive);
  font-weight: 700;
}
.aos-add-btn[data-v-6ba358cc]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 40%, transparent);
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
}
.aos-preview-card[data-v-6ba358cc] {
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
.aos-preview-header[data-v-6ba358cc] {
  background: var(--q-primary);
  color: white;
  padding: 32px;
}
.aos-preview-footer[data-v-6ba358cc] {
  padding: 24px;
  background: color-mix(in srgb, var(--q-accent) 5%, var(--q-info));
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.btn-submit-preview[data-v-6ba358cc] {
  padding: 12px 32px;
  font-weight: 700;
  border-radius: 12px;
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-back-preview[data-v-6ba358cc] {
  padding: 8px 16px;
  background: var(--q-accent);
  color: var(--q-info) !important;
  border-radius: 12px;
  font-weight: 500;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.btn-back-preview[data-v-6ba358cc]:hover {
  filter: brightness(0.95);
  color: var(--q-info) !important;
}
[data-v-6ba358cc] .q-field__control {
  border-radius: 12px !important;
}


/* React ref: max-w-5xl mx-auto pb-20, animate-in fade-in slide-in-from-bottom-4 */
.ipr-container[data-v-631df1a4] {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1024px;
  margin: 0 auto;
  padding-bottom: 80px;
  animation: iprFadeIn-631df1a4 0.5s ease-in-out;
}
@keyframes iprFadeIn-631df1a4 {
from { opacity: 0; transform: translateY(16px);
}
to { opacity: 1; transform: translateY(0);
}
}

/* Header: white card, icon (rose) + title/subtitle, Reset button right */
.ipr-header[data-v-631df1a4] {
  background: var(--q-info);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.header-row[data-v-631df1a4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.header-info[data-v-631df1a4] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-icon-box[data-v-631df1a4] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
  flex-shrink: 0;
}
.header-title[data-v-631df1a4] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-631df1a4] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.btn-reset[data-v-631df1a4] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--q-positive);
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.btn-reset[data-v-631df1a4]:hover {
  color: var(--q-accent);
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
}

/* Permission Grid: 4 blocks, 2 columns on lg */
.permission-grid[data-v-631df1a4] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
.permission-grid[data-v-631df1a4] {
    grid-template-columns: repeat(2, 1fr);
}
}
.permission-section[data-v-631df1a4] {
  background: var(--q-info);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s;
}
.permission-section[data-v-631df1a4]:hover {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}
.perm-header[data-v-631df1a4] {
  margin-bottom: 20px;
}
.perm-title[data-v-631df1a4] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 4px 0;
}
.perm-desc[data-v-631df1a4] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 0;
}
.perm-roles[data-v-631df1a4] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Role buttons: icon circle + label + check circle, rose when selected */
.perm-role-btn[data-v-631df1a4] {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  background: var(--q-info);
  color: var(--q-positive);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  outline: none;
  -webkit-user-select: none;
          user-select: none;
}
.perm-role-btn[data-v-631df1a4]:hover {
  border-color: color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  background: color-mix(in srgb, var(--q-accent) 4%, var(--q-info));
}
.perm-role-btn--selected[data-v-631df1a4] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  color: var(--q-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  outline: 1px solid color-mix(in srgb, var(--q-primary) 20%, var(--q-info));
  outline-offset: -1px;
}
.perm-role-icon[data-v-631df1a4] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--q-dark);
  color: var(--q-positive);
  transition: background 0.2s, color 0.2s;
}
.perm-role-btn:hover .perm-role-icon[data-v-631df1a4]:not(.perm-role-icon--selected) {
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.perm-role-icon--selected[data-v-631df1a4] {
  background: color-mix(in srgb, var(--q-primary) 20%, var(--q-info));
  color: var(--q-primary);
}
.perm-role-label[data-v-631df1a4] {
  flex: 1;
  text-align: left;
}
.perm-role-check[data-v-631df1a4] {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  background: var(--q-info);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-left: 4px;
}
.perm-role-check--selected[data-v-631df1a4] {
  background: var(--q-primary);
  border-color: var(--q-primary);
  color: var(--q-info);
}

/* Footer: sticky bottom card, single Save / Saved button */
.ipr-footer-wrapper[data-v-631df1a4] {
  position: sticky;
  bottom: 24px;
  z-index: 10;
  pointer-events: none;
  display: flex;
  justify-content: flex-end;
}
.ipr-footer-card[data-v-631df1a4] {
  pointer-events: auto;
  background: var(--q-info);
  padding: 8px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}
.ipr-save-btn[data-v-631df1a4] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  color: var(--q-info);
  background: var(--q-primary);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.ipr-save-btn[data-v-631df1a4]:hover {
  filter: brightness(1.1);
}
.ipr-save-btn[data-v-631df1a4]:active {
  transform: scale(0.98);
}
.ipr-save-btn--saved[data-v-631df1a4] {
  background: var(--q-positive);
}
.ipr-save-btn--saved[data-v-631df1a4]:hover {
  filter: brightness(0.95);
}
.loading-state[data-v-631df1a4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
[data-v-631df1a4] .q-field__control {
  border-radius: 12px !important;
}


.disk-container[data-v-ecaea0ba] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-ecaea0ba 0.5s ease-in-out;
}
@keyframes fadeIn-ecaea0ba {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.rounded-borders-lg[data-v-ecaea0ba] {
  border-radius: 16px;
}
.header-info[data-v-ecaea0ba] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-icon-box[data-v-ecaea0ba] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
  flex-shrink: 0;
}
.header-title[data-v-ecaea0ba] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-ecaea0ba] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.content-icon-box[data-v-ecaea0ba] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info)) !important;
  color: var(--q-primary) !important;
}
.storage-header[data-v-ecaea0ba] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.gauges-row[data-v-ecaea0ba] {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  margin-bottom: 24px;
}
.tariff-row[data-v-ecaea0ba] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cat-card-info[data-v-ecaea0ba] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cat-card-footer[data-v-ecaea0ba] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.categories-grid[data-v-ecaea0ba] {
  display: flex;
  gap: 24px;
}
.categories-grid > .q-card[data-v-ecaea0ba] {
  flex: 1;
  min-width: 0;
}
@media (max-width: 1023px) {
.categories-grid[data-v-ecaea0ba] {
    flex-direction: column;
}
}
.subview-header[data-v-ecaea0ba] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.action-buttons[data-v-ecaea0ba] {
  display: flex;
  gap: 8px;
}
.split-panels[data-v-ecaea0ba] {
  display: flex;
  position: relative;
}
.split-panel[data-v-ecaea0ba] {
  flex: 1;
  min-width: 0;
}
.split-panel-left[data-v-ecaea0ba] {
  border-right: 1px solid var(--q-dark);
}
.records-header[data-v-ecaea0ba] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.db-grid[data-v-ecaea0ba] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
.db-grid[data-v-ecaea0ba] {
    grid-template-columns: repeat(2, 1fr);
}
}
.btn-primary[data-v-ecaea0ba] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  border-radius: 10px;
  font-weight: 600;
  padding: 8px 16px;
  box-shadow: 0 4px 8px color-mix(in srgb, var(--q-primary) 15%, transparent);
}
.btn-outline[data-v-ecaea0ba] {
  color: var(--q-primary) !important;
  border-color: color-mix(in srgb, var(--q-primary) 40%, transparent) !important;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.2s;
}
.btn-outline[data-v-ecaea0ba]:hover {
  background: color-mix(in srgb, var(--q-primary) 8%, transparent) !important;
  border-color: var(--q-primary) !important;
}
.btn-danger[data-v-ecaea0ba] {
  border: 1px solid color-mix(in srgb, var(--q-negative) 20%, var(--q-info)) !important;
  color: var(--q-negative) !important;
  background: color-mix(in srgb, var(--q-negative) 5%, var(--q-info)) !important;
  border-radius: 10px;
  font-weight: 500;
  padding: 8px 16px;
}
/* Dashboard (React-style) */
.disk-dashboard[data-v-ecaea0ba] {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.disk-storage-card[data-v-ecaea0ba] {
  padding: 0;
}
.storage-header[data-v-ecaea0ba] {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}
.storage-title[data-v-ecaea0ba] {
  font-size: 24px;
  line-height: 30px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.storage-subtitle[data-v-ecaea0ba] {
  font-size: 14px;
}
.storage-total[data-v-ecaea0ba] {
  font-size: 28px;
}
.disk-progress-wrap[data-v-ecaea0ba] {
  margin-bottom: 24px;
}
.disk-progress-track[data-v-ecaea0ba] {
  height: 16px;
  width: 100%;
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  border-radius: 9999px;
  overflow: hidden;
}
.disk-progress-fill[data-v-ecaea0ba] {
  height: 100%;
  border-radius: 9999px;
  background: var(--q-primary);
  transition: width 1s ease;
}
.disk-progress-fill--warning[data-v-ecaea0ba] {
  background: var(--q-negative);
}
.btn-extend-limit[data-v-ecaea0ba] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  border-radius: 12px;
  font-weight: 700;
  padding: 10px 24px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--q-primary) 25%, transparent);
}
.categories-grid[data-v-ecaea0ba] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1023px) {
.categories-grid[data-v-ecaea0ba] {
    grid-template-columns: 1fr;
}
}
.disk-cat-card[data-v-ecaea0ba] {
  transition: box-shadow 0.2s;
}
.disk-cat-card[data-v-ecaea0ba]:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.cat-icon-box[data-v-ecaea0ba] {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cat-icon-box--indigo[data-v-ecaea0ba] {
  background: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  color: var(--q-primary);
}
.cat-icon-box--teal[data-v-ecaea0ba] {
  background: color-mix(in srgb, var(--q-positive) 15%, var(--q-info));
  color: var(--q-positive);
}
.cat-icon-box--amber[data-v-ecaea0ba] {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}
.cat-card-title[data-v-ecaea0ba] {
  font-size: 1.25rem;
}
.btn-manage[data-v-ecaea0ba] {
  font-weight: 700;
  font-size: 14px;
  border-radius: 8px;
  padding: 5px 15px;
}
.btn-manage[data-v-ecaea0ba]:hover {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info)) !important;
}
/* Subviews */
.disk-subview[data-v-ecaea0ba] {
  animation: fadeIn-ecaea0ba 0.3s ease;
}
.subview-header[data-v-ecaea0ba] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.subview-used[data-v-ecaea0ba] {
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  font-size: 14px;
  color: var(--q-accent);
}
.btn-back-disk[data-v-ecaea0ba] {
  color: var(--q-positive) !important;
  font-weight: 500;
}
.btn-back-disk[data-v-ecaea0ba]:hover {
  color: var(--q-accent) !important;
}
.disk-tabs[data-v-ecaea0ba] {
  display: flex;
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  padding: 4px;
  border-radius: 12px;
}
.disk-tab[data-v-ecaea0ba] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--q-positive);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.disk-tab[data-v-ecaea0ba]:hover {
  color: var(--q-accent);
}
.disk-tab--active[data-v-ecaea0ba] {
  background: var(--q-info);
  color: var(--q-accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.disk-file-list[data-v-ecaea0ba] {
  position: relative;
  min-height: 120px;
}
.disk-empty[data-v-ecaea0ba] {
  padding: 48px 24px;
  text-align: center;
  color: var(--q-positive);
}
.disk-file-row[data-v-ecaea0ba] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  transition: background 0.2s;
}
.disk-file-row[data-v-ecaea0ba]:hover {
  background: color-mix(in srgb, var(--q-accent) 5%, var(--q-info));
}
.disk-file-row:hover .disk-file-actions[data-v-ecaea0ba] {
  opacity: 1;
}
.disk-file-icon[data-v-ecaea0ba] {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}
.disk-file-icon--neutral[data-v-ecaea0ba] {
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-info)) !important;
  color: var(--q-positive) !important;
}
.disk-file-actions[data-v-ecaea0ba] {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}
@media (max-width: 600px) {
.disk-file-actions[data-v-ecaea0ba] {
    opacity: 1;
}
}
.btn-row-action[data-v-ecaea0ba] {
  color: var(--q-positive) !important;
}
.btn-row-action[data-v-ecaea0ba]:hover {
  color: var(--q-accent) !important;
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-info)) !important;
}
.btn-row-action[icon="delete"][data-v-ecaea0ba],
.btn-row-action[icon="warning"][data-v-ecaea0ba] {
  color: var(--q-positive) !important;
  background: color-mix(in srgb, var(--q-negative) 6%, var(--q-dark)) !important;
  border: 1px solid color-mix(in srgb, var(--q-negative) 18%, var(--q-dark)) !important;
}
.btn-row-action[icon="delete"][data-v-ecaea0ba]:hover,
.btn-row-action[icon="warning"][data-v-ecaea0ba]:hover {
  color: var(--q-primary) !important;
  background: color-mix(in srgb, var(--q-negative) 22%, var(--q-dark)) !important;
  border-color: color-mix(in srgb, var(--q-negative) 40%, var(--q-dark)) !important;
}
.btn-row-action--danger[data-v-ecaea0ba] {
  color: var(--q-positive) !important;
  background: color-mix(in srgb, var(--q-negative) 6%, var(--q-dark)) !important;
  border: 1px solid color-mix(in srgb, var(--q-negative) 18%, var(--q-dark)) !important;
}
.btn-row-action--danger[data-v-ecaea0ba]:hover {
  color: var(--q-primary) !important;
  background: color-mix(in srgb, var(--q-negative) 22%, var(--q-dark)) !important;
  border-color: color-mix(in srgb, var(--q-negative) 40%, var(--q-dark)) !important;
}
.btn-row-action--success[data-v-ecaea0ba] {
  color: var(--q-positive) !important;
}
.btn-row-action--success[data-v-ecaea0ba]:hover {
  color: var(--q-positive) !important;
  background: color-mix(in srgb, var(--q-positive) 12%, var(--q-info)) !important;
}
.db-categories-grid[data-v-ecaea0ba] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 600px) {
.db-categories-grid[data-v-ecaea0ba] {
    grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 960px) {
.db-categories-grid[data-v-ecaea0ba] {
    grid-template-columns: repeat(3, 1fr);
}
}
.db-category-btn[data-v-ecaea0ba] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: color-mix(in srgb, var(--q-accent) 5%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
}
.db-category-btn[data-v-ecaea0ba]:hover {
  background: var(--q-info);
  border-color: color-mix(in srgb, var(--q-primary) 30%, transparent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.db-category-size[data-v-ecaea0ba] {
  font-size: 12px;
  color: var(--q-positive);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
}
.db-records-header[data-v-ecaea0ba] {
  background: color-mix(in srgb, var(--q-accent) 5%, var(--q-info));
}
.db-record-row[data-v-ecaea0ba] {
  padding: 16px 24px;
}
.truncate[data-v-ecaea0ba] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-v-ecaea0ba] .q-field__control {
  border-radius: 12px !important;
}


.theme-container[data-v-6fc85397] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 70%;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-6fc85397 0.5s ease-in-out;
}
@media (max-width: 768px) {
.theme-container[data-v-6fc85397] {
    width: 95%;
}
}
@keyframes fadeIn-6fc85397 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.rounded-borders-lg[data-v-6fc85397] {
  border-radius: 16px;
}
.header-section[data-v-6fc85397] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.header-info[data-v-6fc85397] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.btn-full-reset[data-v-6fc85397] {
  color: var(--q-positive);
}
.btn-full-reset[data-v-6fc85397]:hover {
  color: var(--q-warning);
  background: color-mix(in srgb, var(--q-warning) 8%, transparent);
}
.manual-colors-wrap[data-v-6fc85397] {
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  padding-top: 16px;
  margin-top: 16px;
}
.manual-colors-toggle[data-v-6fc85397] {
  color: var(--q-accent);
  font-weight: 600;
}
.manual-colors-content[data-v-6fc85397] {
  margin-top: 16px;
}
.save-changes-wrap[data-v-6fc85397] {
  position: sticky;
  bottom: 16px;
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  padding-bottom: 24px;
}
.save-changes-btn[data-v-6fc85397] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  border-radius: 10px;
  padding-left: 28px;
  padding-right: 28px;
  min-height: 48px;
  font-weight: 600;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--q-primary) 25%, transparent);
}
.save-changes-btn[data-v-6fc85397] .q-icon {
  color: inherit;
}
.header-icon-box[data-v-6fc85397] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
  flex-shrink: 0;
}
.header-title[data-v-6fc85397] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-6fc85397] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.hint-block[data-v-6fc85397] {
  background: color-mix(in srgb, var(--q-primary) 6%, var(--q-info));
  border-color: color-mix(in srgb, var(--q-primary) 20%, var(--q-info));
}
.hint-block-warning[data-v-6fc85397] {
  background: color-mix(in srgb, var(--q-warning) 6%, var(--q-info));
  border-color: color-mix(in srgb, var(--q-warning) 20%, var(--q-info));
}
.hint-row[data-v-6fc85397] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hint-icon-box[data-v-6fc85397] {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.hint-icon-box-warning[data-v-6fc85397] {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}
.hint-text[data-v-6fc85397] {
  font-size: 14px;
  color: var(--q-accent);
  line-height: 1.4;
}
.section-header[data-v-6fc85397] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.section-header-row[data-v-6fc85397] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.section-actions[data-v-6fc85397] {
  display: flex;
  gap: 4px;
}
.section-icon[data-v-6fc85397] {
  color: var(--q-primary);
}
.settings-grid[data-v-6fc85397] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 768px) {
.settings-grid[data-v-6fc85397] {
    grid-template-columns: 1fr;
}
}
.colors-grid[data-v-6fc85397] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 1024px) {
.colors-grid[data-v-6fc85397] {
    grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.colors-grid[data-v-6fc85397] {
    grid-template-columns: 1fr;
}
}
.palettes-row[data-v-6fc85397] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.palette-swatches[data-v-6fc85397] {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 4px;
}
.logo-upload[data-v-6fc85397] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  background: color-mix(in srgb, var(--q-primary) 3%, var(--q-info));
}
.logo-preview-wrap[data-v-6fc85397] {
  position: relative;
  flex-shrink: 0;
}
.logo-preview-box[data-v-6fc85397] {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-info));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s;
}
.logo-preview-box[data-v-6fc85397]:hover {
  background: color-mix(in srgb, var(--q-primary) 12%, var(--q-info));
}
.logo-clear-btn[data-v-6fc85397] {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--q-info);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.logo-clear-btn[data-v-6fc85397]:hover {
  background: color-mix(in srgb, var(--q-negative) 15%, var(--q-info));
}
.logo-img[data-v-6fc85397] {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.logo-info[data-v-6fc85397] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.logo-buttons[data-v-6fc85397] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.theme-input[data-v-6fc85397] .q-field__control {
  border-radius: 12px;
}
.theme-color-input[data-v-6fc85397] .q-field__control {
  border-radius: 12px;
  background: var(--q-info);
}
.palette-card[data-v-6fc85397] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border: 2px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 14px;
  transition: all 0.2s;
  min-width: 97px;
  background: var(--q-info);
  cursor: pointer;
}
.palette-card[data-v-6fc85397]:hover {
  border-color: var(--q-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.palette-card.palette-active[data-v-6fc85397] {
  border-color: var(--q-secondary);
  background: color-mix(in srgb, var(--q-secondary) 10%, var(--q-info));
}
.palette-card-btn[data-v-6fc85397] {
  min-width: 34px;
  min-height: 34px;
}
.palette-card-btn[data-v-6fc85397] .q-icon {
  color: inherit;
}
.palette-swatch[data-v-6fc85397] {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  margin: 1px;
}
.theme-name-cell[data-v-6fc85397] {
  width: 100%;
  min-width: 0;
  text-align: center;
}
.theme-name-display[data-v-6fc85397] {
  cursor: text;
  padding: 2px 4px;
  border-radius: 4px;
  min-height: 20px;
}
.theme-name-display[data-v-6fc85397]:hover {
  background: color-mix(in srgb, var(--q-accent) 8%, transparent);
}
.theme-name-input[data-v-6fc85397] {
  max-width: 100%;
}
.theme-name-input[data-v-6fc85397] .q-field__control {
  min-height: 28px;
  border-radius: 6px;
}
.btn-icon[data-v-6fc85397] {
  color: var(--q-positive) !important;
  opacity: 0.7;
  transition: all 0.2s;
}
.btn-icon[data-v-6fc85397]:hover {
  color: var(--q-primary) !important;
  opacity: 1;
  background: color-mix(in srgb, var(--q-primary) 8%, transparent) !important;
}
.btn-icon-danger[data-v-6fc85397] {
  color: var(--q-positive) !important;
  background: color-mix(in srgb, var(--q-negative) 6%, var(--q-dark)) !important;
  border: 1px solid color-mix(in srgb, var(--q-negative) 18%, var(--q-dark)) !important;
  transition: color 0.2s, background 0.2s, border-color 0.2s !important;
}
.btn-icon-danger[data-v-6fc85397]:hover {
  color: var(--q-primary) !important;
  background: color-mix(in srgb, var(--q-negative) 22%, var(--q-dark)) !important;
  border-color: color-mix(in srgb, var(--q-negative) 40%, var(--q-dark)) !important;
}
.loading-state[data-v-6fc85397] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
[data-v-6fc85397] .q-field__control {
  border-radius: 12px !important;
}


.company-container[data-v-57c4517c] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-57c4517c 0.5s ease-in-out;
}
@keyframes fadeIn-57c4517c {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.rounded-borders-lg[data-v-57c4517c] {
  border-radius: 16px;
}
.main-container[data-v-57c4517c] {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.box[data-v-57c4517c] {
  flex: 1;
  flex-wrap: wrap;
}
.invites-container[data-v-57c4517c] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.header-icon-box[data-v-57c4517c] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
  flex-shrink: 0;
}
.header-title[data-v-57c4517c] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-57c4517c] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.section-icon[data-v-57c4517c] {
  color: var(--q-primary);
}
.content-icon-box[data-v-57c4517c] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info)) !important;
  color: var(--q-primary) !important;
}
.invite-link-box[data-v-57c4517c] {
  background: color-mix(in srgb, var(--q-secondary) 10%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-secondary) 30%, var(--q-info));
  border-radius: 12px;
}
.security-input[data-v-57c4517c] .q-field__control {
  border-radius: 12px;
}
.security-btn[data-v-57c4517c] {
  border-radius: 12px !important;
}
.security-btn-danger[data-v-57c4517c] {
  border-radius: 12px !important;
  background-color: color-mix(in srgb, var(--q-warning) 5%, var(--q-info)) !important;
}
.structure-header[data-v-57c4517c] {
  border-bottom: 1px solid var(--q-dark);
  padding-bottom: 16px;
}
.company-tree[data-v-57c4517c] .q-tree__node-header {
  padding: 6px 4px;
}
.dept-node .add-sub-btn[data-v-57c4517c] {
  opacity: 0;
  transition: opacity 0.2s;
}
.dept-node:hover .add-sub-btn[data-v-57c4517c] {
  opacity: 1;
}
.child-node[data-v-57c4517c] {
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  background: var(--q-info);
  margin: 2px 0;
}
.child-node[data-v-57c4517c]:has(.q-badge) {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-color: color-mix(in srgb, var(--q-primary) 20%, var(--q-info));
}
.color-picker-icon[data-v-57c4517c],
.remove-node-btn[data-v-57c4517c] {
  opacity: 0;
  transition: opacity 0.2s;
}
.dept-node:hover .color-picker-icon[data-v-57c4517c],
.child-node:hover .color-picker-icon[data-v-57c4517c],
.child-node:hover .remove-node-btn[data-v-57c4517c] {
  opacity: 1;
}
.child-row[data-v-57c4517c] {
  border-bottom: 1px solid var(--q-dark);
  padding: 4px 0;
}
.child-row[data-v-57c4517c]:hover {
  background: var(--q-dark);
}
.btn-primary[data-v-57c4517c] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  border-radius: 10px;
  font-weight: 600;
  padding: 8px 16px;
  box-shadow: 0 4px 8px color-mix(in srgb, var(--q-primary) 15%, transparent);
}
.btn-secondary[data-v-57c4517c] {
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info)) !important;
  color: var(--q-accent) !important;
  background: var(--q-info) !important;
  border-radius: 10px;
  font-weight: 500;
  padding: 8px 16px;
}
.btn-danger[data-v-57c4517c] {
  border: 1px solid color-mix(in srgb, var(--q-negative) 20%, var(--q-info)) !important;
  color: var(--q-negative) !important;
  background: color-mix(in srgb, var(--q-negative) 5%, var(--q-info)) !important;
  border-radius: 10px;
  font-weight: 500;
  padding: 8px 16px;
}
.btn-icon[data-v-57c4517c] {
  color: var(--q-positive) !important;
  opacity: 0.7;
  transition: all 0.2s;
}
.btn-icon[data-v-57c4517c]:hover {
  color: var(--q-primary) !important;
  opacity: 1;
  background: color-mix(in srgb, var(--q-primary) 8%, transparent) !important;
}
.btn-icon-danger[data-v-57c4517c] {
  color: var(--q-positive) !important;
  background: color-mix(in srgb, var(--q-negative) 6%, var(--q-dark)) !important;
  border: 1px solid color-mix(in srgb, var(--q-negative) 18%, var(--q-dark)) !important;
  transition: color 0.2s, background 0.2s, border-color 0.2s !important;
}
.btn-icon-danger[data-v-57c4517c]:hover {
  color: var(--q-primary) !important;
  background: color-mix(in srgb, var(--q-negative) 22%, var(--q-dark)) !important;
  border-color: color-mix(in srgb, var(--q-negative) 40%, var(--q-dark)) !important;
}
.loading-state[data-v-57c4517c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
[data-v-57c4517c] .q-field__control {
  border-radius: 12px !important;
}


/* Container */
.catalog-container[data-v-31c73141] {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

/* Header */
.catalog-header[data-v-31c73141] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 24px;
  margin-bottom: 24px;
}
.header-top[data-v-31c73141] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
.header-top[data-v-31c73141] {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
}
.header-left[data-v-31c73141] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-icon[data-v-31c73141] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.header-title[data-v-31c73141] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  line-height: 32px;
  margin: 0;
}
.header-subtitle[data-v-31c73141] {
  font-size: 14px;
  color: var(--q-positive);
  font-weight: 400;
}

/* Tabs Bar */
.tabs-bar[data-v-31c73141] {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px;
  background: var(--q-dark);
  border-radius: 12px;
  margin-bottom: 16px;
}
.tab-btn[data-v-31c73141] {
  flex: 1;
  min-width: 120px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--q-positive);
  transition: all 0.2s;
}
.tab-btn[data-v-31c73141]:hover {
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-dark));
  color: var(--q-accent);
}
.tab-active[data-v-31c73141] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  font-weight: 600;
}

/* Filters Bar */
.filters-bar[data-v-31c73141] {
  display: flex;
  gap: 16px;
  align-items: center;
}
.filter-select[data-v-31c73141] {
  width: 100%;
  font-size: 14px;
  font-weight: 500;
}
@media (min-width: 768px) {
.filter-select[data-v-31c73141] {
    width: 320px;
}
}
.filter-select[data-v-31c73141] .q-field__control {
  background: var(--q-dark);
  border-radius: 12px;
}
.filter-select[data-v-31c73141] .q-field__control:hover {
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-dark));
}

/* Content Area (без верхней границы — убрана подкладка между блоком «Страна» и контентом вкладки) */
.content-area[data-v-31c73141] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-top: none;
  padding: 32px;
  min-height: 600px;
}

/* Loading State */
.loading-state[data-v-31c73141] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 64px;
  background: var(--q-dark);
  border-radius: 12px;
}

/* Sub-tabs Bar */
.sub-tabs-bar[data-v-31c73141] {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 4px;
  background: var(--q-dark);
  border-radius: 12px;
}
.sub-tab-btn[data-v-31c73141] {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--q-positive);
  transition: all 0.2s;
}
.sub-tab-btn[data-v-31c73141]:hover {
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-dark));
  color: var(--q-accent);
}
.sub-tab-active[data-v-31c73141] {
  background: color-mix(in srgb, var(--q-primary) 15%, var(--q-dark)) !important;
  color: var(--q-primary) !important;
  font-weight: 600;
}

/* Info Banner */
.info-banner[data-v-31c73141] {
  background: var(--q-dark);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.info-banner-content[data-v-31c73141] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.info-banner-title[data-v-31c73141] {
  font-size: 16px;
  font-weight: 600;
  color: var(--q-accent);
}
.info-banner-subtitle[data-v-31c73141] {
  font-size: 13px;
  color: var(--q-positive);
  margin-top: 4px;
}
.info-banner-value[data-v-31c73141] {
  text-align: right;
}
.value-label[data-v-31c73141] {
  font-size: 12px;
  color: var(--q-positive);
  margin-bottom: 4px;
}
.value-text[data-v-31c73141] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
}
.value-date[data-v-31c73141] {
  font-size: 12px;
  font-weight: 400;
  color: var(--q-positive);
}

/* Info Message */
.info-message[data-v-31c73141] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-dark));
  border-radius: 12px;
  color: var(--q-primary);
  font-size: 14px;
  margin-bottom: 24px;
}

/* ═══ TARIFF CARDS ═══ */
.tariffs-grid[data-v-31c73141] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
.tariffs-grid[data-v-31c73141] {
    grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.tariffs-grid[data-v-31c73141] {
    grid-template-columns: 1fr 1fr 1fr;
}
}
.tariff-card[data-v-31c73141] {
  background: var(--q-dark);
  border: 2px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.2s;
}
.tariff-card[data-v-31c73141]:hover {
  border-color: var(--q-primary);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--q-primary) 15%, transparent);
  transform: translateY(-2px);
}
.tariff-current[data-v-31c73141] {
  border-color: var(--q-primary) !important;
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-dark)) !important;
}
.tariff-header[data-v-31c73141] {
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding-bottom: 16px;
}
.tariff-title[data-v-31c73141] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tariff-multiplier[data-v-31c73141] {
  margin-bottom: 12px;
}
.multiplier-label[data-v-31c73141] {
  font-size: 13px;
  color: var(--q-positive);
  margin-bottom: 6px;
}
.multiplier-select[data-v-31c73141] {
  max-width: 160px;
}
.tariff-price[data-v-31c73141] {
  margin-bottom: 4px;
}
.price-amount[data-v-31c73141] {
  font-size: 28px;
  font-weight: 700;
  color: var(--q-primary);
}
.price-period[data-v-31c73141] {
  font-size: 14px;
  color: var(--q-positive);
  margin-left: 4px;
}
.price-free[data-v-31c73141] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-positive);
}
.tariff-discount[data-v-31c73141] {
  font-size: 12px;
  color: var(--q-positive);
  opacity: 0.7;
}
.tariff-features[data-v-31c73141] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.feature-item[data-v-31c73141] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--q-accent);
}
.tariff-actions[data-v-31c73141] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.action-button-primary[data-v-31c73141] {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  font-weight: 600;
}
.monthly-purchase[data-v-31c73141] {
  background: color-mix(in srgb, var(--q-primary) 6%, var(--q-dark));
  border: 1px solid color-mix(in srgb, var(--q-primary) 20%, var(--q-dark));
  border-radius: 10px;
  padding: 12px;
}
.monthly-purchase-label[data-v-31c73141] {
  font-size: 12px;
  font-weight: 600;
  color: var(--q-positive);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.monthly-purchase-row[data-v-31c73141] {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.monthly-input[data-v-31c73141] {
  width: 80px;
  flex-shrink: 0;
}
.monthly-input[data-v-31c73141] .q-field__control {
  background: var(--q-info);
  border-radius: 8px;
}
.monthly-buy-btn[data-v-31c73141] {
  flex: 1;
  border-radius: 10px !important;
  border-color: color-mix(in srgb, var(--q-primary) 40%, transparent) !important;
  font-weight: 600;
}
.monthly-buy-btn[data-v-31c73141]:hover {
  background: color-mix(in srgb, var(--q-primary) 8%, transparent) !important;
  border-color: var(--q-primary) !important;
}
.monthly-buy-content[data-v-31c73141] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}
.monthly-buy-price[data-v-31c73141] {
  font-weight: 700;
  font-size: 13px;
}
.free-label[data-v-31c73141] {
  text-align: center;
  font-weight: 700;
  color: var(--q-positive);
  padding: 12px;
}

/* ═══ ORDER PANEL ═══ */
.order-panel[data-v-31c73141] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-dark));
  border-left: 4px solid var(--q-primary);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}
.order-panel-content[data-v-31c73141] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.order-info[data-v-31c73141] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
}
.order-name[data-v-31c73141] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-accent);
}
.order-label[data-v-31c73141] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
}
.order-months-input[data-v-31c73141] {
  max-width: 90px;
}
.order-badge[data-v-31c73141] {
  padding: 8px 12px;
}
.order-summary[data-v-31c73141] {
  text-align: right;
}
.summary-label[data-v-31c73141] {
  font-size: 12px;
  color: var(--q-positive);
  margin-bottom: 4px;
}
.summary-price[data-v-31c73141] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin-bottom: 12px;
}
.order-button[data-v-31c73141] {
  padding: 10px 24px;
  border-radius: 12px;
  font-weight: 600;
}

/* ═══ DISK CARDS ═══ */
.disk-grid[data-v-31c73141] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
.disk-grid[data-v-31c73141] {
    grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.disk-grid[data-v-31c73141] {
    grid-template-columns: 1fr 1fr 1fr;
}
}
.disk-card[data-v-31c73141] {
  background: var(--q-dark);
  border: 2px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.disk-card[data-v-31c73141]:hover {
  border-color: var(--q-primary);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--q-primary) 15%, transparent);
  transform: translateY(-2px);
}
.disk-selected[data-v-31c73141] {
  border-color: var(--q-primary) !important;
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-dark)) !important;
}
.disk-header[data-v-31c73141] {
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding-bottom: 12px;
}
.disk-title[data-v-31c73141] {
  font-size: 16px;
  font-weight: 700;
  color: var(--q-accent);
  margin-bottom: 8px;
}
.disk-price .price-amount[data-v-31c73141] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-primary);
}
.disk-price .price-period[data-v-31c73141] {
  font-size: 13px;
  color: var(--q-positive);
}
.disk-info[data-v-31c73141] {
  flex: 1;
}
.disk-date[data-v-31c73141] {
  font-size: 12px;
  color: var(--q-positive);
}
.disk-actions[data-v-31c73141] {
  margin-top: auto;
}
.disk-button[data-v-31c73141] {
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  font-weight: 600;
}

/* Empty State */
.empty-state[data-v-31c73141] {
  padding: 64px;
  text-align: center;
  color: var(--q-positive);
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  border-radius: 16px;
}

/* Order cards (in payments tab) */
.order-card[data-v-31c73141] {
  border-radius: 10px !important;
  overflow: hidden;
  transition: all 0.2s;
}
.order-card[data-v-31c73141]:hover {
  border-color: var(--q-primary) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.order-paid[data-v-31c73141] {
  border-color: var(--q-positive) !important;
  background: rgba(var(--q-secondary-rgb), 0.03);
}
.order-unpaid[data-v-31c73141] {
  border-color: var(--q-warning) !important;
  background: rgba(var(--q-warning-rgb), 0.03);
}

/* Remove background from hint only */
.input-transparent-hint[data-v-31c73141] .q-field__bottom {
  background: none !important;
}
.input-transparent-hint[data-v-31c73141] .q-field__messages {
  background: none !important;
}
.input-transparent-hint[data-v-31c73141] .q-field__messages div {
  background: none !important;
}

/* Modern dialogs */
.modern-dialog[data-v-31c73141] {
  border-radius: 16px;
  overflow: hidden;
}
.dialog-header[data-v-31c73141] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--q-dark);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 16px 24px;
}
.dialog-title[data-v-31c73141] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.dialog-body[data-v-31c73141] {
  padding: 24px;
}
.dialog-text[data-v-31c73141] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
  line-height: 1.6;
}
.dialog-item-name[data-v-31c73141] {
  font-weight: 600;
  color: var(--q-accent);
}
.dialog-hint[data-v-31c73141] {
  font-size: 12px;
  color: var(--q-positive);
  opacity: 0.7;
  margin-top: 12px;
}
.dialog-actions[data-v-31c73141] {
  padding: 16px 24px;
  background: var(--q-dark);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  justify-content: flex-end;
  gap: 12px;
}

/* Checkout dialog specific styles */
.checkout-dialog[data-v-31c73141] {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.checkout-header[data-v-31c73141] {
  flex-direction: row;
  align-items: flex-start;
}
.checkout-header .dialog-title[data-v-31c73141] {
  flex: 1;
}
.checkout-subtitle[data-v-31c73141] {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.7;
  margin-top: 4px;
}
.checkout-price[data-v-31c73141] {
  text-align: right;
}
.checkout-price-amount[data-v-31c73141] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-primary);
}

/* AI Grid and Cards */
.ai-grid[data-v-31c73141] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
.ai-grid[data-v-31c73141] {
    grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.ai-grid[data-v-31c73141] {
    grid-template-columns: 1fr 1fr 1fr;
}
}
.ai-card[data-v-31c73141] {
  background: var(--q-dark);
  border: 2px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s;
}
.ai-card[data-v-31c73141]:hover {
  border-color: var(--q-primary);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--q-primary) 15%, transparent);
  transform: translateY(-2px);
}

/* Support Grid and Cards */
.support-grid[data-v-31c73141] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
.support-grid[data-v-31c73141] {
    grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.support-grid[data-v-31c73141] {
    grid-template-columns: 1fr 1fr 1fr;
}
}
.support-card[data-v-31c73141] {
  background: var(--q-dark);
  border: 2px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.support-card[data-v-31c73141]:hover {
  border-color: var(--q-primary);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--q-primary) 15%, transparent);
  transform: translateY(-2px);
}
.support-card.selected[data-v-31c73141] {
  border-color: var(--q-primary) !important;
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-dark)) !important;
}

/* Card components (for AI and Support cards) */
.card-header[data-v-31c73141] {
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding-bottom: 12px;
}
.card-body[data-v-31c73141] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-footer[data-v-31c73141] {
  padding-top: 12px;
}
.card-title[data-v-31c73141] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin-bottom: 8px;
}
.card-price[data-v-31c73141] {
  font-size: 22px;
  font-weight: 700;
  color: var(--q-primary);
  margin: 8px 0;
}
.card-buy-btn[data-v-31c73141] {
  border-radius: 12px;
  font-weight: 700;
}

/* Section header row (space-between) */
.section-header-row[data-v-31c73141] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Requisites tab (layout as in React MyPlanView: grid 2/3 + 1/3, card + sidebar) */
.requisites-grid[data-v-31c73141] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
.requisites-grid[data-v-31c73141] {
    grid-template-columns: 2fr 1fr;
    gap: 32px;
}
}
.requisites-main[data-v-31c73141] {
  min-width: 0;
}
.requisites-card[data-v-31c73141] {
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 16px;
}
.requisites-card-title[data-v-31c73141] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 24px 0;
  display: flex;
  align-items: center;
}
.requisites-form-grid[data-v-31c73141] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
.requisites-form-grid[data-v-31c73141] {
    grid-template-columns: 1fr 1fr;
}
}
.requisites-form-full[data-v-31c73141] {
  grid-column: 1 / -1;
}
.requisites-form-half[data-v-31c73141] {
  grid-column: span 1;
}
.requisites-form-actions[data-v-31c73141] {
  padding-top: 16px;
  display: flex;
  justify-content: flex-end;
}
.requisites-sidebar[data-v-31c73141] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.requisites-sidebar-card[data-v-31c73141] {
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 16px;
}
.requisites-sidebar-title[data-v-31c73141] {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--q-accent);
  margin: 0 0 16px 0;
}
.requisites-contracts-list[data-v-31c73141] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.requisites-contract-item[data-v-31c73141] {
  padding: 12px;
  background: color-mix(in srgb, var(--q-accent) 6%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-accent) 12%, var(--q-info));
  border-radius: 12px;
  transition: border-color 0.2s;
}
.requisites-contract-item[data-v-31c73141]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
}
.requisites-contract-header[data-v-31c73141] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}
.requisites-contract-name[data-v-31c73141] {
  font-weight: 700;
  font-size: 13px;
  color: var(--q-accent);
}
.requisites-contract-meta[data-v-31c73141] {
  font-size: 12px;
  color: var(--q-positive);
  font-family: monospace;
  margin: 0 0 8px 0;
}
.requisites-contract-input[data-v-31c73141] {
  margin-top: 8px;
}
.requisites-contract-input + .requisites-contract-input[data-v-31c73141] {
  margin-top: 8px;
}
.requisites-contact-fields[data-v-31c73141] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Orders (расположение как в React MyPlanView: один блок, список строк) */
.orders-container[data-v-31c73141] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  overflow: hidden;
}
.orders-header[data-v-31c73141] {
  padding: 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  background: color-mix(in srgb, var(--q-accent) 4%, var(--q-info));
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.orders-header-left[data-v-31c73141] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.orders-header-icon[data-v-31c73141] {
  padding: 8px;
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 10px;
  color: var(--q-positive);
}
.orders-title[data-v-31c73141] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.orders-refresh-btn[data-v-31c73141] {
  color: var(--q-positive);
}
.orders-refresh-btn[data-v-31c73141]:hover {
  color: var(--q-primary);
  background: var(--q-info);
}
.orders-loading[data-v-31c73141] {
  padding: 48px;
}
.orders-list[data-v-31c73141] {
  border-top: none;
}
.order-row[data-v-31c73141] {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  transition: background 0.2s;
}
.order-row[data-v-31c73141]:last-child {
  border-bottom: none;
}
.order-row[data-v-31c73141]:hover {
  background: color-mix(in srgb, var(--q-accent) 4%, var(--q-info));
}
@media (min-width: 768px) {
.order-row[data-v-31c73141] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
}
.order-row-left[data-v-31c73141] {
  flex: 1;
  min-width: 0;
}
.order-row-meta[data-v-31c73141] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.order-number[data-v-31c73141] {
  font-family: monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
  background: var(--q-dark);
  padding: 2px 8px;
  border-radius: 4px;
}
.order-date[data-v-31c73141] {
  font-size: 12px;
  color: var(--q-positive);
}
.order-status[data-v-31c73141] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
}
.order-status-paid[data-v-31c73141] {
  color: var(--q-secondary);
  background: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-secondary) 30%, var(--q-info));
}
.order-status-unpaid[data-v-31c73141] {
  color: var(--q-warning);
  background: color-mix(in srgb, var(--q-warning) 12%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-warning) 25%, var(--q-info));
}
.order-tariff-name[data-v-31c73141] {
  font-size: 16px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 8px 0;
}
.order-doc-links[data-v-31c73141] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.order-doc-link[data-v-31c73141] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--q-primary);
  text-decoration: none;
}
.order-doc-link[data-v-31c73141]:hover {
  text-decoration: underline;
  color: var(--q-accent);
}
.order-row-right[data-v-31c73141] {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}
.order-amount[data-v-31c73141] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
}
.order-delete-btn[data-v-31c73141] {
  color: var(--q-negative);
}
.order-delete-btn[data-v-31c73141]:hover {
  background: color-mix(in srgb, var(--q-negative) 15%, var(--q-info));
}
.orders-empty[data-v-31c73141] {
  padding: 48px 24px;
  text-align: center;
  color: var(--q-positive);
}

/* Stats Grid */
.stats-grid[data-v-31c73141] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 768px) {
.stats-grid[data-v-31c73141] {
    grid-template-columns: repeat(4, 1fr);
}
}
.stat-label[data-v-31c73141] {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}
.stat-value[data-v-31c73141] {
  font-size: 20px;
  font-weight: 700;
}

/* Users Toolbar */
.users-toolbar[data-v-31c73141] {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.toolbar-spacer[data-v-31c73141] {
  flex: 1;
}
.toolbar-search[data-v-31c73141] {
  max-width: 300px;
}

/* User Card Row */
.user-card-row[data-v-31c73141] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
}
.user-card-info[data-v-31c73141] {
  flex: 1;
  min-width: 0;
}
.user-meta[data-v-31c73141] {
  font-size: 12px;
  color: var(--q-positive);
  font-family: monospace;
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Contract Row */
.contract-row[data-v-31c73141] {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  align-items: center;
}
.contract-label[data-v-31c73141] {
  font-weight: 700;
}

/* Form Actions */
.form-actions[data-v-31c73141] {
  display: flex;
  justify-content: flex-end;
}

/* Checkout Form Grid */
.checkout-form-grid[data-v-31c73141] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 768px) {
.checkout-form-grid[data-v-31c73141] {
    grid-template-columns: 1fr;
}
}
.checkout-form-col[data-v-31c73141] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.date-picker-actions[data-v-31c73141] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Button styles */
.btn-primary[data-v-31c73141] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  border-radius: 12px;
  font-weight: 700;
  padding: 8px 24px;
}
.btn-icon[data-v-31c73141] {
  color: var(--q-positive) !important;
  opacity: 0.7;
  transition: all 0.2s;
}
.btn-icon[data-v-31c73141]:hover {
  color: var(--q-primary) !important;
  opacity: 1;
  background: color-mix(in srgb, var(--q-primary) 8%, transparent) !important;
}


/* Container */
.catalog-container[data-v-d06fbfba] {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

/* Header */
.catalog-header[data-v-d06fbfba] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 24px;
  margin-bottom: 24px;
}
.header-top[data-v-d06fbfba] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
.header-top[data-v-d06fbfba] {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
}
.header-left[data-v-d06fbfba] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-icon[data-v-d06fbfba] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.header-title[data-v-d06fbfba] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  line-height: 32px;
  margin: 0;
}
.header-subtitle[data-v-d06fbfba] {
  font-size: 14px;
  color: var(--q-positive);
  font-weight: 400;
}

/* Tabs Bar */
.tabs-bar[data-v-d06fbfba] {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px;
  background: var(--q-dark);
  border-radius: 12px;
}
.tab-btn[data-v-d06fbfba] {
  flex: 1;
  min-width: 120px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--q-positive);
  transition: all 0.2s;
}
.tab-btn[data-v-d06fbfba]:hover {
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-dark));
  color: var(--q-accent);
}
.tab-active[data-v-d06fbfba] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  font-weight: 600;
}

/* Content Area */
.content-area[data-v-d06fbfba] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 32px;
  min-height: 600px;
}

/* Section Header */
.section-header[data-v-d06fbfba] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.section-title[data-v-d06fbfba] {
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  color: var(--q-accent);
  margin: 0;
}

/* Loading State */
.loading-state[data-v-d06fbfba] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 64px;
  background: var(--q-dark);
  border-radius: 12px;
}

/* ═══ MODULES TAB ═══ */
.modules-grid[data-v-d06fbfba] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
.modules-grid[data-v-d06fbfba] {
    grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.modules-grid[data-v-d06fbfba] {
    grid-template-columns: 1fr 1fr 1fr;
}
}
.module-card[data-v-d06fbfba] {
  background: var(--q-dark);
  border: 2px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.module-card[data-v-d06fbfba]:hover:not(.module-disabled) {
  border-color: var(--q-primary);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--q-primary) 15%, transparent);
  transform: translateY(-2px);
}
.module-active[data-v-d06fbfba] {
  border-color: var(--q-primary) !important;
  background: color-mix(in srgb, var(--q-primary) 8%, var(--q-dark)) !important;
}
.module-disabled[data-v-d06fbfba] {
  opacity: 0.5;
  cursor: not-allowed !important;
}
.module-disabled[data-v-d06fbfba]:hover {
  border-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info)) !important;
  box-shadow: none !important;
  transform: none !important;
}
.module-content[data-v-d06fbfba] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.module-info[data-v-d06fbfba] {
  flex: 1;
}
.module-name[data-v-d06fbfba] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
  display: block;
  margin-bottom: 4px;
}
.module-warning[data-v-d06fbfba] {
  font-size: 12px;
  color: var(--q-negative);
  margin-top: 4px;
}

/* ═══ DEMO DATA TAB ═══ */
.info-message[data-v-d06fbfba] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-dark));
  border-radius: 12px;
  color: var(--q-primary);
  font-size: 14px;
  margin-bottom: 24px;
}
.demo-actions[data-v-d06fbfba] {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.action-button[data-v-d06fbfba] {
  min-width: 180px;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
}

/* ═══ MIGRATION TAB ═══ */
.warning-message[data-v-d06fbfba] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: color-mix(in srgb, var(--q-negative) 10%, var(--q-dark));
  border-radius: 12px;
  color: var(--q-negative);
  font-size: 14px;
  margin-bottom: 24px;
}
.migration-form[data-v-d06fbfba] {
  max-width: 700px;
}
.migration-checkbox[data-v-d06fbfba] {
  margin-bottom: 16px;
}
.migration-input[data-v-d06fbfba] {
  margin-bottom: 16px;
}
.migration-input[data-v-d06fbfba] .q-field__control {
  background: var(--q-dark);
  border-radius: 12px;
}
.migration-actions[data-v-d06fbfba] {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.loading-progress[data-v-d06fbfba] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px;
  margin-top: 24px;
  background: var(--q-dark);
  border-radius: 12px;
}
.progress-text[data-v-d06fbfba] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-primary);
}

/* ═══ SYSTEM TAB ═══ */
.system-section[data-v-d06fbfba] {
  margin-bottom: 48px;
}
.info-expansion[data-v-d06fbfba] {
  margin-bottom: 24px;
}
.info-expansion[data-v-d06fbfba] .q-expansion-item__container {
  background: var(--q-dark);
  border-radius: 12px;
  overflow: hidden;
}
.expansion-content[data-v-d06fbfba] {
  padding: 16px;
  font-size: 14px;
  color: var(--q-positive);
  line-height: 1.6;
}
.portal-add-form[data-v-d06fbfba] {
  background: var(--q-dark);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  max-width: 700px;
}
.form-title[data-v-d06fbfba] {
  font-size: 16px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0 0 16px 0;
}
.portal-input[data-v-d06fbfba] .q-field__control {
  background: var(--q-info);
  border-radius: 12px;
}
.validation-error[data-v-d06fbfba] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-top: 8px;
  background: color-mix(in srgb, var(--q-negative) 10%, var(--q-dark));
  border-radius: 8px;
  color: var(--q-negative);
  font-size: 13px;
}
.validation-success[data-v-d06fbfba] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-top: 8px;
  background: color-mix(in srgb, var(--q-positive) 10%, var(--q-dark));
  border-radius: 8px;
  color: var(--q-positive);
  font-size: 13px;
}
.portals-list[data-v-d06fbfba] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.portal-card[data-v-d06fbfba] {
  background: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 12px;
  padding: 20px;
  transition: box-shadow 0.2s;
}
.portal-card[data-v-d06fbfba]:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--q-accent) 10%, transparent);
}
.portal-header[data-v-d06fbfba] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.portal-name[data-v-d06fbfba] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-primary);
  margin: 0;
}
.portal-credentials[data-v-d06fbfba] {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.credential-item[data-v-d06fbfba] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.credential-label[data-v-d06fbfba] {
  font-size: 13px;
  font-weight: 500;
  color: var(--q-positive);
}
.credential-value[data-v-d06fbfba] {
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  font-size: 12px;
  background: color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--q-accent);
}
.portal-actions[data-v-d06fbfba] {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.portal-link[data-v-d06fbfba] {
  margin-bottom: 12px;
}
.portal-link[data-v-d06fbfba]:last-child {
  margin-bottom: 0;
}
.link-label[data-v-d06fbfba] {
  font-size: 12px;
  font-weight: 500;
  color: var(--q-positive);
  display: block;
  margin-bottom: 6px;
}
.portal-link[data-v-d06fbfba] .q-field__control {
  background: var(--q-info);
  border-radius: 8px;
}

/* Danger Zone */
.danger-section[data-v-d06fbfba] {
  margin-top: 48px;
}
.danger-header .section-title[data-v-d06fbfba] {
  color: var(--q-negative);
}
.danger-zone-card[data-v-d06fbfba] {
  background: color-mix(in srgb, var(--q-negative) 8%, var(--q-dark));
  border: 2px solid var(--q-negative);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 800px;
}
@media (min-width: 768px) {
.danger-zone-card[data-v-d06fbfba] {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
}
.danger-content[data-v-d06fbfba] {
  flex: 1;
}
.danger-action-title[data-v-d06fbfba] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-negative);
  margin: 0 0 8px 0;
}
.danger-description[data-v-d06fbfba] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
  line-height: 1.5;
}
.danger-button[data-v-d06fbfba] {
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Modern dialog styles */
.modern-dialog[data-v-d06fbfba] {
  border-radius: 16px;
  overflow: hidden;
}
.dialog-header[data-v-d06fbfba] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--q-dark);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 16px 24px;
}
.dialog-title[data-v-d06fbfba] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.dialog-body[data-v-d06fbfba] {
  padding: 24px;
}
.dialog-text[data-v-d06fbfba] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
  line-height: 1.6;
}
.dialog-item-name[data-v-d06fbfba] {
  font-weight: 600;
  color: var(--q-accent);
}
.dialog-actions[data-v-d06fbfba] {
  padding: 16px 24px;
  background: var(--q-dark);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  justify-content: flex-end;
  gap: 12px;
}

/* Modern Notifications */
.notifications-container[data-v-d06fbfba] {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}
.notification[data-v-d06fbfba] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--q-dark);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 300px;
  max-width: 400px;
  pointer-events: auto;
  border-left: 4px solid;
}
.notification-positive[data-v-d06fbfba] {
  border-left-color: var(--q-positive);
}
.notification-positive .notification-icon[data-v-d06fbfba] {
  color: var(--q-positive);
}
.notification-secondary[data-v-d06fbfba] {
  border-left-color: var(--q-secondary);
}
.notification-secondary .notification-icon[data-v-d06fbfba] {
  color: var(--q-secondary);
}
.notification-negative[data-v-d06fbfba] {
  border-left-color: var(--q-negative);
}
.notification-negative .notification-icon[data-v-d06fbfba] {
  color: var(--q-negative);
}
.notification-warning[data-v-d06fbfba] {
  border-left-color: var(--q-warning);
}
.notification-warning .notification-icon[data-v-d06fbfba] {
  color: var(--q-warning);
}
.notification-info[data-v-d06fbfba] {
  border-left-color: var(--q-info);
}
.notification-info .notification-icon[data-v-d06fbfba] {
  color: var(--q-info);
}
.notification-message[data-v-d06fbfba] {
  flex: 1;
  font-size: 14px;
  color: var(--q-accent);
  line-height: 1.5;
}

/* Notification animations */
.notification-enter-active[data-v-d06fbfba] {
  animation: notification-slide-in-d06fbfba 0.3s ease-out;
}
.notification-leave-active[data-v-d06fbfba] {
  animation: notification-slide-out-d06fbfba 0.3s ease-in;
}
@keyframes notification-slide-in-d06fbfba {
from {
    transform: translateX(400px);
    opacity: 0;
}
to {
    transform: translateX(0);
    opacity: 1;
}
}
@keyframes notification-slide-out-d06fbfba {
from {
    transform: translateX(0);
    opacity: 1;
}
to {
    transform: translateX(400px);
    opacity: 0;
}
}


.certificates-container[data-v-66c2737d] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-66c2737d 0.5s ease-in-out;
}
@keyframes fadeIn-66c2737d {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.empty-state[data-v-66c2737d] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  color: var(--q-positive);
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-icon-box[data-v-66c2737d] {
  width: 64px;
  height: 64px;
  background: var(--q-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-title[data-v-66c2737d] {
  font-size: 18px;
  font-weight: 500;
  color: var(--q-accent);
  margin: 0 0 8px 0;
}
.empty-text[data-v-66c2737d] {
  font-size: 14px;
  margin: 0;
}
.header-card[data-v-66c2737d] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
@media (min-width: 640px) {
.header-card[data-v-66c2737d] {
    flex-direction: row;
}
}
.header-content[data-v-66c2737d] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-icon-box[data-v-66c2737d] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.header-title[data-v-66c2737d] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-66c2737d] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.count[data-v-66c2737d] {
  font-weight: 600;
  color: var(--q-accent);
}
.certificates-grid[data-v-66c2737d] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
.certificates-grid[data-v-66c2737d] {
    grid-template-columns: 1fr 1fr;
}
}
.cert-card[data-v-66c2737d] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
  cursor: pointer;
}
.cert-card[data-v-66c2737d]:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-color: color-mix(in srgb, var(--q-primary) 50%, var(--q-info));
}
.cert-body[data-v-66c2737d] {
  padding: 24px;
  flex: 1;
  position: relative;
}
.cert-bg-circle[data-v-66c2737d] {
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 96px;
  background: var(--q-dark);
  border-radius: 50%;
  opacity: 0.5;
  margin-right: -32px;
  margin-top: -32px;
  transition: background 0.3s;
}
.cert-card:hover .cert-bg-circle[data-v-66c2737d] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
}
.cert-top[data-v-66c2737d] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  position: relative;
  z-index: 10;
}
.cert-icon-box[data-v-66c2737d] {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
}
.icon-program[data-v-66c2737d] {
  color: var(--q-warning);
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  border-color: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
}
.icon-course[data-v-66c2737d] {
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-color: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
}
.icon-test[data-v-66c2737d] {
  color: var(--q-secondary);
  background: color-mix(in srgb, var(--q-secondary) 10%, var(--q-info));
  border-color: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
}
.grade-badge[data-v-66c2737d] {
  padding: 4px 10px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  color: var(--q-success);
  font-size: 12px;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--q-success) 30%, var(--q-info));
  display: flex;
  align-items: center;
  gap: 4px;
}
.cert-title[data-v-66c2737d] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 4px 0;
  line-height: 1.3;
  transition: color 0.2s;
}
.cert-card:hover .cert-title[data-v-66c2737d] {
  color: var(--q-primary);
}
.cert-type[data-v-66c2737d] {
  font-size: 10px;
  color: var(--q-positive);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0 0 16px 0;
}
.cert-date[data-v-66c2737d] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--q-positive);
}

/* Loading state */
.loading-state[data-v-66c2737d] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.loader[data-v-66c2737d] {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-66c2737d 0.8s linear infinite;
}
@keyframes spin-66c2737d {
to {
    transform: rotate(360deg);
}
}
.loading-text[data-v-66c2737d] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 16px 0 0 0;
}

/* Modal styles */
.modal-overlay[data-v-66c2737d] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
}
.modal-content[data-v-66c2737d] {
  background: var(--q-info);
  border-radius: 16px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.modal-header[data-v-66c2737d] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.modal-title[data-v-66c2737d] {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--q-accent);
}
.modal-close-btn[data-v-66c2737d] {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  color: var(--q-positive);
  transition: all 0.2s;
}
.modal-close-btn[data-v-66c2737d]:hover {
  background: var(--q-dark);
  color: var(--q-accent);
}
.modal-actions[data-v-66c2737d] {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px;
  background: var(--q-dark);
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}

/* Action buttons */
.action-btn[data-v-66c2737d] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  min-width: 160px;
}
.action-btn[data-v-66c2737d]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.action-btn-outline[data-v-66c2737d] {
  background: var(--q-info);
  color: var(--q-primary);
  border: 2px solid var(--q-primary);
}
.action-btn-outline[data-v-66c2737d]:hover:not(:disabled) {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
}
.action-btn-filled[data-v-66c2737d] {
  background: linear-gradient(135deg, var(--q-primary) 0%, color-mix(in srgb, var(--q-primary) 80%, #000) 100%);
  color: var(--q-info);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--q-primary) 40%, transparent);
}
.action-btn-filled[data-v-66c2737d]:hover:not(:disabled) {
  box-shadow: 0 6px 20px color-mix(in srgb, var(--q-primary) 50%, transparent);
  transform: translateY(-1px);
}

/* Canvas loader */
.canvas-loader[data-v-66c2737d] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px;
  color: var(--q-positive);
  font-size: 14px;
}
.canvas-loader p[data-v-66c2737d] {
  margin: 0;
}
.canvas-hidden[data-v-66c2737d] {
  display: none;
}
.modal-canvas-container[data-v-66c2737d] {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px;
  overflow: hidden;
  background: var(--q-dark);
  min-height: 0;
}
.modal-canvas-container canvas[data-v-66c2737d] {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background: var(--q-info);
}


.rating-container[data-v-6cf5aa2e] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 24px;
  animation: fadeIn-6cf5aa2e 0.5s ease-in-out;
}
@keyframes fadeIn-6cf5aa2e {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.loading-state[data-v-6cf5aa2e] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px;
}
.loader[data-v-6cf5aa2e] {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-6cf5aa2e 0.8s linear infinite;
}
@keyframes spin-6cf5aa2e {
to {
    transform: rotate(360deg);
}
}
.error-state[data-v-6cf5aa2e] {
  padding: 24px;
  text-align: center;
  color: var(--q-positive);
}
.hero-card[data-v-6cf5aa2e] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  position: relative;
}
.hero-bg[data-v-6cf5aa2e] {
  position: absolute;
  top: 0;
  right: 0;
  width: 256px;
  height: 256px;
  background: linear-gradient(to bottom right, color-mix(in srgb, var(--q-primary) 20%, transparent), transparent);
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.5;
  margin-right: -64px;
  margin-top: -64px;
  pointer-events: none;
}
.hero-content[data-v-6cf5aa2e] {
  padding: 20px;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
@media (min-width: 768px) {
.hero-content[data-v-6cf5aa2e] {
    flex-direction: row;
}
}
.rank-icon-wrapper[data-v-6cf5aa2e] {
  flex-shrink: 0;
}
.rank-icon-outer[data-v-6cf5aa2e] {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: linear-gradient(to bottom right, var(--q-primary), color-mix(in srgb, var(--q-primary) 70%, #000));
  padding: 4px;
  box-shadow: 0 10px 15px color-mix(in srgb, var(--q-primary) 30%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rank-icon-inner[data-v-6cf5aa2e] {
  width: 100%;
  height: 100%;
  background: var(--q-info);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid color-mix(in srgb, var(--q-primary) 20%, var(--q-info));
}
.trophy-icon[data-v-6cf5aa2e] {
  color: var(--q-primary);
}
.level-info[data-v-6cf5aa2e] {
  flex: 1;
  text-align: center;
  width: 100%;
}
@media (min-width: 768px) {
.level-info[data-v-6cf5aa2e] {
    text-align: left;
}
}
.level-label[data-v-6cf5aa2e] {
  font-size: 14px;
  font-weight: 700;
  color: var(--q-positive);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 30px;
}
.level-name[data-v-6cf5aa2e] {
  font-size: 36px;
  font-weight: 700;
  color: var(--q-accent);
  line-height: 10px;
}
.level-help-icon[data-v-6cf5aa2e] {
  color: var(--q-positive);
  cursor: pointer;
  vertical-align: middle;
  margin-left: 4px;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.level-help-icon[data-v-6cf5aa2e]:hover {
  opacity: 1;
}
.xp-display[data-v-6cf5aa2e] {
  font-size: 24px;
  font-weight: 600;
  color: var(--q-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (min-width: 768px) {
.xp-display[data-v-6cf5aa2e] {
    justify-content: flex-start;
}
}
.xp-icon[data-v-6cf5aa2e] {
  color: var(--q-primary);
  fill: var(--q-primary);
}
.progress-box[data-v-6cf5aa2e] {
  width: 100%;
  background: var(--q-dark);
  padding: 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-dark));
}
@media (min-width: 768px) {
.progress-box[data-v-6cf5aa2e] {
    width: 256px;
}
}
.progress-header[data-v-6cf5aa2e] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}
.progress-label[data-v-6cf5aa2e] {
  color: var(--q-accent);
}
.progress-points[data-v-6cf5aa2e] {
  color: var(--q-positive);
}
.progress-bar-bg[data-v-6cf5aa2e] {
  height: 12px;
  width: 100%;
  background: color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-radius: 9999px;
  overflow: hidden;
}
.progress-bar-fill[data-v-6cf5aa2e] {
  height: 100%;
  background: var(--q-primary);
  border-radius: 9999px;
  transition: width 1s ease-out;
}
.history-card[data-v-6cf5aa2e] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.history-header[data-v-6cf5aa2e] {
  padding: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  display: flex;
  align-items: center;
  gap: 8px;
}
.history-header-icon[data-v-6cf5aa2e] {
  color: var(--q-positive);
}
.history-title[data-v-6cf5aa2e] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.history-item[data-v-6cf5aa2e] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  transition: background 0.2s;
}
.history-item[data-v-6cf5aa2e]:hover {
  background: var(--q-dark);
}
.history-item-border[data-v-6cf5aa2e] {
  border-bottom: 1px solid var(--q-dark);
}
.history-icon-box[data-v-6cf5aa2e] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.history-course[data-v-6cf5aa2e] {
  background: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  color: var(--q-primary);
}
.history-test[data-v-6cf5aa2e] {
  background: color-mix(in srgb, var(--q-secondary) 15%, var(--q-info));
  color: var(--q-secondary);
}
.history-event[data-v-6cf5aa2e] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: color-mix(in srgb, var(--q-primary) 80%, #000);
}
.history-bonus[data-v-6cf5aa2e] {
  background: color-mix(in srgb, var(--q-warning) 20%, var(--q-info));
  color: var(--q-warning);
}
.history-default[data-v-6cf5aa2e] {
  background: var(--q-dark);
  color: var(--q-positive);
}
.history-info[data-v-6cf5aa2e] {
  flex: 1;
  min-width: 0;
}
.history-action[data-v-6cf5aa2e] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}
.history-date[data-v-6cf5aa2e] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 2px 0 0 0;
}
.history-points[data-v-6cf5aa2e] {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--q-success);
  background: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--q-success) 30%, var(--q-info));
  font-size: 14px;
}
.history-empty[data-v-6cf5aa2e] {
  padding: 24px;
  text-align: center;
  color: var(--q-positive);
}
.history-points-negative[data-v-6cf5aa2e] {
  color: var(--q-warning);
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  border-color: color-mix(in srgb, var(--q-warning) 25%, var(--q-info));
}


.level-tooltip {
  background: var(--q-info, #1a1a2e) !important;
  border: 1px solid color-mix(in srgb, var(--q-accent, #fff) 15%, var(--q-info, #1a1a2e));
  border-radius: 10px !important;
  padding: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.level-tooltip .tooltip-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--q-positive, #888);
  margin-bottom: 8px;
}
.level-tooltip .tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 2px;
}
.level-tooltip .tooltip-row-active {
  background: color-mix(in srgb, var(--q-primary) 20%, transparent);
}
.level-tooltip .tooltip-level-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--q-accent, #fff);
}
.level-tooltip .tooltip-row-active .tooltip-level-title {
  color: var(--q-primary);
}
.level-tooltip .tooltip-level-range {
  font-size: 12px;
  color: var(--q-positive, #888);
  margin-left: 12px;
}


.loading-state[data-v-1f6d9188] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px;
}
.loader[data-v-1f6d9188] {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-1f6d9188 0.8s linear infinite;
}
@keyframes spin-1f6d9188 {
to {
    transform: rotate(360deg);
}
}
.checks-container[data-v-1f6d9188] {
  max-width: 1280px;
  margin: 0 auto;
}
.header-info[data-v-1f6d9188] {
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.detail-view[data-v-1f6d9188] {
  animation: fadeInSlideRight-1f6d9188 0.3s ease-in-out;
}
@keyframes fadeInSlideRight-1f6d9188 {
from {
    opacity: 0;
    transform: translateX(16px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}
.back-btn[data-v-1f6d9188] {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--q-positive);
  font-weight: 500;
  font-size: 13px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
  transition: color 0.2s;
}
.back-btn[data-v-1f6d9188]:hover {
  color: var(--q-primary);
}
.detail-grid[data-v-1f6d9188] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 1024px) {
.detail-grid[data-v-1f6d9188] {
    grid-template-columns: 2fr 1fr;
}
}
.detail-main[data-v-1f6d9188] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.answer-card[data-v-1f6d9188] {
  background: var(--q-info);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 16px;
}
.answer-header[data-v-1f6d9188] {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--q-dark);
}
.user-avatar[data-v-1f6d9188] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--q-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
  overflow: hidden;
}
.avatar-img[data-v-1f6d9188] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-name[data-v-1f6d9188] {
  font-weight: 600;
  font-size: 14px;
  color: var(--q-accent);
  margin: 0;
}
.submit-date[data-v-1f6d9188] {
  font-size: 11px;
  color: var(--q-positive);
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}
.question-section[data-v-1f6d9188] {
  margin-bottom: 16px;
}
.section-label[data-v-1f6d9188] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-positive);
  text-transform: uppercase;
  margin: 0;
}
.question-text[data-v-1f6d9188] {
  font-weight: 500;
  color: var(--q-accent);
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
}
.answer-section[data-v-1f6d9188] {
  background: var(--q-dark);
  border-radius: 8px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-dark));
}
.answer-label[data-v-1f6d9188] {
  font-size: 13px;
  font-weight: 600;
  color: var(--q-positive);
  text-transform: uppercase;
  margin: 0;
}
.answer-text[data-v-1f6d9188] {
  font-size: 15px;
  color: var(--q-accent);
  font-weight: 500;
  white-space: pre-wrap;
  margin: 0;
}
.files-section[data-v-1f6d9188] {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.files-label[data-v-1f6d9188] {
  font-size: 13px;
  font-weight: 600;
  color: var(--q-positive);
  margin: 0;
}
.files-list[data-v-1f6d9188] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.file-link[data-v-1f6d9188] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--q-info);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 6px;
  font-size: 12px;
  color: var(--q-positive);
  text-decoration: none;
  transition: all 0.2s;
}
.file-link[data-v-1f6d9188]:hover {
  color: var(--q-primary);
  border-color: color-mix(in srgb, var(--q-primary) 40%, var(--q-info));
}
.file-image-wrapper[data-v-1f6d9188] {
  width: 100%;
  max-width: 100%;
}
.file-image[data-v-1f6d9188] {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.download-icon[data-v-1f6d9188] {
  opacity: 0.5;
  margin-left: 4px;
}
.result-badge[data-v-1f6d9188] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}
.result-approved[data-v-1f6d9188] {
  background: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  color: var(--q-success);
}
.result-rejected[data-v-1f6d9188] {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}
.result-comment[data-v-1f6d9188] {
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.comment-title[data-v-1f6d9188] {
  font-size: 12px;
  font-weight: 600;
  color: var(--q-positive);
  margin: 0 0 6px 0;
}
.comment-text[data-v-1f6d9188] {
  font-size: 14px;
  color: var(--q-accent);
  margin: 0;
  white-space: pre-wrap;
}
.grading-card[data-v-1f6d9188] {
  background: var(--q-info);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 16px;
  position: sticky;
  top: 96px;
}
.grading-title[data-v-1f6d9188] {
  font-weight: 600;
  font-size: 14px;
  color: var(--q-accent);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 30px;
}
.grading-icon[data-v-1f6d9188] {
  color: var(--q-primary);
}
.grading-actions[data-v-1f6d9188] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.comment-label[data-v-1f6d9188] {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--q-accent);
  margin-bottom: 6px;
}
.comment-input[data-v-1f6d9188] .q-field__control {
  font-size: 13px;
  border-radius: 8px;
}
.action-buttons[data-v-1f6d9188] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 4px;
}
.btn-approve[data-v-1f6d9188] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid color-mix(in srgb, var(--q-success) 40%, var(--q-info));
  background: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  color: var(--q-success);
  font-weight: 600;
  font-size: 12px;
}
.btn-approve[data-v-1f6d9188]:hover {
  background: color-mix(in srgb, var(--q-success) 25%, var(--q-info));
  border-color: color-mix(in srgb, var(--q-success) 50%, var(--q-info));
}
.btn-reject[data-v-1f6d9188] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid color-mix(in srgb, var(--q-warning) 40%, var(--q-info));
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
  font-weight: 600;
  font-size: 12px;
}
.btn-reject[data-v-1f6d9188]:hover {
  background: color-mix(in srgb, var(--q-warning) 25%, var(--q-info));
  border-color: color-mix(in srgb, var(--q-warning) 50%, var(--q-info));
}
.list-view[data-v-1f6d9188] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeIn-1f6d9188 0.5s ease-in-out;
}
@keyframes fadeIn-1f6d9188 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.list-header[data-v-1f6d9188] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: var(--q-info);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  gap: 16px;
}
.title-card[data-v-1f6d9188] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.header-icon-box[data-v-1f6d9188] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
  flex-shrink: 0;
}
@media (min-width: 768px) {
.list-header[data-v-1f6d9188] {
    flex-direction: row;
}
}
.list-title[data-v-1f6d9188] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.list-subtitle[data-v-1f6d9188] {
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.header-actions[data-v-1f6d9188] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.archive-btn[data-v-1f6d9188] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  background: var(--q-primary);
  color: var(--q-info);
  transition: all 0.2s;
}
.archive-btn[data-v-1f6d9188]:hover {
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.archive-btn-active[data-v-1f6d9188] {
  background: var(--q-accent);
  color: var(--q-info);
}
.items-list[data-v-1f6d9188] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.empty-state[data-v-1f6d9188] {
  text-align: center;
  padding: 64px 16px;
  background: var(--q-dark);
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  color: var(--q-positive);
}
.empty-icon-box[data-v-1f6d9188] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.empty-text[data-v-1f6d9188] {
  margin: 0;
}
.item-card[data-v-1f6d9188] {
  background: var(--q-info);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s;
}
@media (min-width: 768px) {
.item-card[data-v-1f6d9188] {
    flex-direction: row;
}
}
.item-card[data-v-1f6d9188]:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-color: color-mix(in srgb, var(--q-primary) 50%, var(--q-info));
}
.item-content[data-v-1f6d9188] {
  flex: 1;
  min-width: 0;
}
.item-meta[data-v-1f6d9188] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.test-title[data-v-1f6d9188] {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--q-positive);
}
.meta-dot[data-v-1f6d9188] {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.item-date[data-v-1f6d9188] {
  font-size: 12px;
  color: var(--q-positive);
}
.status-approved[data-v-1f6d9188] {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-success);
  background: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  padding: 2px 8px;
  border-radius: 4px;
}
.status-rejected[data-v-1f6d9188] {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-warning);
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  padding: 2px 8px;
  border-radius: 4px;
}
.item-user[data-v-1f6d9188] {
  font-size: 18px;
  font-weight: 600;
  color: var(--q-accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  line-height: 35px;
}
.item-answer[data-v-1f6d9188] {
  font-size: 14px;
  color: var(--q-positive);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}
.item-files[data-v-1f6d9188] {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.file-badge[data-v-1f6d9188] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  background: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--q-positive);
}
.item-actions[data-v-1f6d9188] {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--q-dark);
  padding-top: 16px;
  margin-top: 8px;
}
@media (min-width: 768px) {
.item-actions[data-v-1f6d9188] {
    border-top: none;
    border-left: 1px solid var(--q-dark);
    padding-top: 0;
    padding-left: 16px;
    margin-top: 0;
}
}
.archive-icon-btn[data-v-1f6d9188] {
  color: var(--q-positive);
}
.archive-icon-btn[data-v-1f6d9188]:hover {
  color: var(--q-accent);
  background: var(--q-dark);
}
.check-btn[data-v-1f6d9188] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: var(--q-primary);
  color: var(--q-info);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}
.check-btn[data-v-1f6d9188]:hover {
  background: color-mix(in srgb, var(--q-primary) 85%, black);
}


.test-history-view[data-v-3d24c5b4] {
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
}

/* Header */
.header-card[data-v-3d24c5b4] {
  margin-bottom: 24px;
  border-radius: 16px;
  padding: 16px;
}
.header-card[data-v-3d24c5b4] .q-avatar {
  border-radius: 50% !important;
}
.header-avatar[data-v-3d24c5b4] {
  background-color: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
}
.header-title[data-v-3d24c5b4] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
}
.header-subtitle[data-v-3d24c5b4] {
  font-size: 14px;
  color: var(--q-positive);
}

/* Loading State */
.loading-state[data-v-3d24c5b4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.loader[data-v-3d24c5b4] {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-3d24c5b4 0.8s linear infinite;
}
@keyframes spin-3d24c5b4 {
to {
    transform: rotate(360deg);
}
}
.loading-text[data-v-3d24c5b4] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 16px 0 0 0;
}

/* Tests List */
.tests-list[data-v-3d24c5b4] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.test-card[data-v-3d24c5b4] {
  border-radius: 16px;
  transition: all 0.2s ease;
}
.test-card--expanded[data-v-3d24c5b4] {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--q-primary) 10%, transparent);
}
.test-card[data-v-3d24c5b4]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
}

/* Test Card Header */
.test-card-header[data-v-3d24c5b4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  padding: 20px;
}
.test-card-header-left[data-v-3d24c5b4] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.test-icon-wrapper[data-v-3d24c5b4] {
  padding: 8px;
  border-radius: 8px;
  background-color: var(--q-dark);
  color: var(--q-positive);
  transition: all 0.2s ease;
}
.test-icon-wrapper--active[data-v-3d24c5b4] {
  background-color: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  color: var(--q-primary);
}
.test-title[data-v-3d24c5b4] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  transition: color 0.2s ease;
  line-height: 30px;
}
.test-title[data-v-3d24c5b4]:hover {
  color: var(--q-primary);
}
.test-attempts-count[data-v-3d24c5b4] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.test-card-header-right[data-v-3d24c5b4] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.take-test-btn[data-v-3d24c5b4] {
  font-weight: 700;
  font-size: 14px;
  border-radius: 12px;
  padding: 8px 16px;
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  box-shadow: 0 4px 8px color-mix(in srgb, var(--q-primary) 15%, transparent);
  min-width: 120px;
}
.take-test-btn[data-v-3d24c5b4]:hover {
  background: color-mix(in srgb, var(--q-primary) 85%, black) !important;
}
.expand-icon[data-v-3d24c5b4] {
  padding: 6px;
  border-radius: 50%;
  color: var(--q-positive);
  transition: all 0.3s ease;
}
.expand-icon--rotated[data-v-3d24c5b4] {
  background-color: var(--q-dark);
  color: var(--q-accent);
  transform: rotate(180deg);
}

/* Attempts Container */
.attempts-container[data-v-3d24c5b4] {
  border-top: 1px solid var(--q-dark);
  background-color: color-mix(in srgb, var(--q-dark) 50%, transparent);
}

/* Attempt Row */
.attempt-row[data-v-3d24c5b4] {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.5fr) minmax(80px, auto) minmax(100px, auto);
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--q-dark);
  align-items: center;
  font-size: 14px;
  transition: background-color 0.2s ease;
}
.attempt-row[data-v-3d24c5b4]:last-child {
  border-bottom: none;
}
.attempt-row[data-v-3d24c5b4]:hover {
  background-color: color-mix(in srgb, var(--q-dark) 80%, transparent);
}

/* Attempt Number & Status */
.attempt-number-status[data-v-3d24c5b4] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.attempt-number[data-v-3d24c5b4] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
}
.attempt-status-wrapper[data-v-3d24c5b4] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.attempt-status[data-v-3d24c5b4] {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  width: -moz-fit-content;
  width: fit-content;
}
.attempt-status--completed[data-v-3d24c5b4] {
  background-color: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  color: var(--q-success);
}
.attempt-status--failed[data-v-3d24c5b4] {
  background-color: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}
.attempt-status--in_progress[data-v-3d24c5b4] {
  background-color: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  color: var(--q-primary);
}
.attempt-assignment-type[data-v-3d24c5b4] {
  font-size: 12px;
  color: var(--q-positive);
}

/* Attempt Dates */
.attempt-dates[data-v-3d24c5b4] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.attempt-date-row[data-v-3d24c5b4] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--q-positive);
}
.date-icon[data-v-3d24c5b4] {
  color: var(--q-positive);
}

/* Attempt Score */
.attempt-score[data-v-3d24c5b4] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.score-icon[data-v-3d24c5b4] {
  color: var(--q-secondary);
}
.attempt-score-value[data-v-3d24c5b4] {
  font-weight: 700;
  color: var(--q-accent);
}

/* Attempt Actions */
.attempt-actions[data-v-3d24c5b4] {
  display: flex;
  justify-content: flex-end;
}
.results-btn[data-v-3d24c5b4] {
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
  border-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
}
.results-btn[data-v-3d24c5b4]:hover {
  color: var(--q-primary);
  border-color: color-mix(in srgb, var(--q-primary) 25%, var(--q-info));
}
.no-details[data-v-3d24c5b4] {
  font-size: 12px;
  color: var(--q-positive);
  font-style: italic;
}

/* Empty Attempts */
.empty-attempts[data-v-3d24c5b4] {
  padding: 24px;
  text-align: center;
  color: var(--q-positive);
  font-style: italic;
  font-size: 14px;
}

/* Empty State */
.empty-state-card[data-v-3d24c5b4] {
  border-radius: 16px;
  border-style: dashed;
  padding: 24px;
}
.empty-state-text[data-v-3d24c5b4] {
  color: var(--q-positive);
  margin: 0;
}
.empty-icon[data-v-3d24c5b4] {
  color: var(--q-positive);
}

/* Description */
.description-text[data-v-3d24c5b4] {
  color: var(--q-positive);
  font-size: 14px;
  padding: 16px 0;
  text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
.test-card-header[data-v-3d24c5b4] {
    flex-direction: column;
    align-items: flex-start;
}
.test-card-header-right[data-v-3d24c5b4] {
    align-self: flex-end;
}
.attempt-row[data-v-3d24c5b4] {
    grid-template-columns: 1fr;
    gap: 12px;
}
.attempt-actions[data-v-3d24c5b4] {
    justify-content: flex-start;
}
}

/* Modal Overlay */
.modal-overlay[data-v-3d24c5b4] {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--q-accent) 50%, transparent);
  backdrop-filter: blur(4px);
}
.modal-container[data-v-3d24c5b4] {
  background: var(--q-info);
  border-radius: 16px;
  width: 100%;
  max-width: 900px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Modal Transitions */
.modal-fade-enter-active[data-v-3d24c5b4] {
  animation: fadeIn-3d24c5b4 0.2s ease-out;
}
.modal-fade-leave-active[data-v-3d24c5b4] {
  animation: fadeOut-3d24c5b4 0.15s ease-in;
}
.modal-fade-enter-active .modal-container[data-v-3d24c5b4] {
  animation: zoomIn-3d24c5b4 0.2s ease-out;
}
.modal-fade-leave-active .modal-container[data-v-3d24c5b4] {
  animation: zoomOut-3d24c5b4 0.15s ease-in;
}
@keyframes fadeIn-3d24c5b4 {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
@keyframes fadeOut-3d24c5b4 {
from {
    opacity: 1;
}
to {
    opacity: 0;
}
}
@keyframes zoomIn-3d24c5b4 {
from {
    opacity: 0;
    transform: scale(0.95);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
@keyframes zoomOut-3d24c5b4 {
from {
    opacity: 1;
    transform: scale(1);
}
to {
    opacity: 0;
    transform: scale(0.95);
}
}

/* Modal Header */
.modal-header[data-v-3d24c5b4] {
  padding: 24px;
  border-bottom: 1px solid var(--q-dark);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--q-dark);
}
.modal-header-info[data-v-3d24c5b4] {
  flex: 1;
}
.modal-title[data-v-3d24c5b4] {
  font-weight: 700;
  font-size: 18px;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.modal-subtitle[data-v-3d24c5b4] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0 0 12px 0;
}
.modal-score-row[data-v-3d24c5b4] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-status-badge[data-v-3d24c5b4] {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-passed[data-v-3d24c5b4] {
  background: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  color: var(--q-success);
}
.badge-failed[data-v-3d24c5b4] {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}
.modal-score[data-v-3d24c5b4] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
}
.modal-close-btn[data-v-3d24c5b4] {
  padding: 8px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--q-positive);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close-btn[data-v-3d24c5b4]:hover {
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  color: var(--q-accent);
}

/* Modal Content */
.modal-content[data-v-3d24c5b4] {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: var(--q-info);
}

/* Results Table */
.results-table[data-v-3d24c5b4] {
  width: 100%;
  font-size: 14px;
  text-align: left;
  border-collapse: collapse;
}
.results-table thead[data-v-3d24c5b4] {
  background: var(--q-dark);
}
.results-table thead tr[data-v-3d24c5b4] {
  background: color-mix(in srgb, var(--q-dark) 95%, transparent);
  border-bottom: 1px solid var(--q-dark);
}
.results-table th[data-v-3d24c5b4] {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--q-positive);
  letter-spacing: 0.5px;
}
.th-question[data-v-3d24c5b4] {
  width: 50%;
}
.th-answer[data-v-3d24c5b4] {
  width: 35%;
}
.th-status[data-v-3d24c5b4] {
  width: 15%;
  text-align: center;
}
.results-table tbody tr[data-v-3d24c5b4] {
  border-bottom: 1px solid var(--q-dark);
  transition: background-color 0.15s ease;
}
.results-table tbody tr[data-v-3d24c5b4]:hover {
  background: var(--q-dark);
}
.results-table td[data-v-3d24c5b4] {
  padding: 16px;
  vertical-align: top;
}
.td-question[data-v-3d24c5b4] {
  font-weight: 500;
  color: var(--q-accent);
  line-height: 1.5;
  display: flex;
  flex-direction: row;
}
.question-num[data-v-3d24c5b4] {
  color: var(--q-positive);
  margin-right: 4px;
}
.td-answer[data-v-3d24c5b4] {
  color: var(--q-positive);
  line-height: 1.5;
}
.answer-line[data-v-3d24c5b4] {
  padding: 2px 0;
}
.answer-line + .answer-line[data-v-3d24c5b4] {
  border-top: 1px dashed color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  margin-top: 4px;
  padding-top: 6px;
}
.no-answer[data-v-3d24c5b4] {
  color: var(--q-positive);
}
.td-status[data-v-3d24c5b4] {
  text-align: center;
}

/* Status Badges */
.status-badge[data-v-3d24c5b4] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.status-correct[data-v-3d24c5b4] {
  background: color-mix(in srgb, var(--q-success) 10%, var(--q-info));
  color: var(--q-success);
  border: 1px solid color-mix(in srgb, var(--q-success) 30%, var(--q-info));
}
.status-incorrect[data-v-3d24c5b4] {
  background: color-mix(in srgb, var(--q-warning) 10%, var(--q-info));
  color: var(--q-warning);
  border: 1px solid color-mix(in srgb, var(--q-warning) 30%, var(--q-info));
}
.status-pending[data-v-3d24c5b4] {
  background: color-mix(in srgb, var(--q-secondary) 10%, var(--q-info));
  color: var(--q-secondary);
  border: 1px solid color-mix(in srgb, var(--q-secondary) 30%, var(--q-info));
}

/* Modal Empty State */
.modal-empty[data-v-3d24c5b4] {
  text-align: center;
  padding: 48px 20px;
  color: var(--q-positive);
  font-size: 14px;
}

/* Mobile Responsive */
@media (max-width: 640px) {
.modal-container[data-v-3d24c5b4] {
    max-height: 90vh;
    border-radius: 12px;
}
.modal-header[data-v-3d24c5b4] {
    padding: 16px;
}
.modal-content[data-v-3d24c5b4] {
    padding: 0;
}
.results-table th[data-v-3d24c5b4],
  .results-table td[data-v-3d24c5b4] {
    padding: 12px;
}
.th-answer[data-v-3d24c5b4] {
    display: none;
}
.td-answer[data-v-3d24c5b4] {
    display: none;
}
.th-question[data-v-3d24c5b4] {
    width: 70%;
}
.th-status[data-v-3d24c5b4] {
    width: 30%;
}
}


.assigned-tests-container[data-v-082615cd] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-082615cd 0.5s ease-in-out;
}
@keyframes fadeIn-082615cd {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Loading State */
.loading-state[data-v-082615cd] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.loader[data-v-082615cd] {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-082615cd 0.8s linear infinite;
}
@keyframes spin-082615cd {
to {
    transform: rotate(360deg);
}
}
.loading-text[data-v-082615cd] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 16px 0 0 0;
}

/* Empty State */
.empty-state[data-v-082615cd] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  color: var(--q-positive);
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-icon-box[data-v-082615cd] {
  width: 64px;
  height: 64px;
  background: var(--q-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-title[data-v-082615cd] {
  font-size: 18px;
  font-weight: 500;
  color: var(--q-accent);
  margin: 0 0 8px 0;
}
.empty-text[data-v-082615cd] {
  font-size: 14px;
  margin: 0;
}

/* Header Card */
.header-card[data-v-082615cd] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
@media (min-width: 640px) {
.header-card[data-v-082615cd] {
    flex-direction: row;
}
}
.header-content[data-v-082615cd] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-icon-box[data-v-082615cd] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.header-title[data-v-082615cd] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-082615cd] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.count[data-v-082615cd] {
  font-weight: 600;
  color: var(--q-accent);
}

/* View Toggle */
.view-toggle[data-v-082615cd] {
  display: flex;
  gap: 4px;
  background: var(--q-dark);
  padding: 4px;
  border-radius: 8px;
}
.toggle-btn[data-v-082615cd] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--q-positive);
  cursor: pointer;
  transition: all 0.2s;
}
.toggle-btn[data-v-082615cd]:hover {
  color: var(--q-accent);
}
.toggle-btn.active[data-v-082615cd] {
  background: var(--q-info);
  color: var(--q-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Tests Grid */
.tests-grid[data-v-082615cd] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.tests-grid.list-mode[data-v-082615cd] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Test Card - Grid Mode */
.test-card[data-v-082615cd] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: all 0.2s;
  cursor: pointer;
}
.test-card[data-v-082615cd]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 50%, var(--q-info));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Test Card - List Mode */
.test-card.list-card[data-v-082615cd] {
  flex-direction: row;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
  border-radius: 12px;
}
.card-top[data-v-082615cd] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.test-icon-box[data-v-082615cd] {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.list-card .test-icon-box[data-v-082615cd] {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}
.icon-new[data-v-082615cd] {
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
}
.icon-in-progress[data-v-082615cd] {
  color: var(--q-warning);
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
}
.icon-urgent[data-v-082615cd] {
  color: var(--q-warning);
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
}

/* Status Badge */
.status-badge[data-v-082615cd] {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.badge-new[data-v-082615cd] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
}
.badge-in-progress[data-v-082615cd] {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}
.badge-urgent[data-v-082615cd] {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}
.test-title[data-v-082615cd] {
  font-size: 14px;
  font-weight: 500;
  color: var(--q-accent);
  margin: 0;
  flex: 1;
  line-height: 1.4;
}
.test-title.grid-title[data-v-082615cd] {
  font-size: 16px;
  font-weight: 600;
}
.test-arrow[data-v-082615cd] {
  color: var(--q-positive);
  flex-shrink: 0;
}


.course-history-view[data-v-7b56c516] {
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
}

/* Header */
.header-card[data-v-7b56c516] {
  margin-bottom: 24px;
  border-radius: 16px;
  padding: 16px;
}
.header-card[data-v-7b56c516] .q-avatar {
  border-radius: 50% !important;
}
.header-avatar[data-v-7b56c516] {
  background-color: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
}
.header-title[data-v-7b56c516] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
}
.header-subtitle[data-v-7b56c516] {
  font-size: 14px;
  color: var(--q-positive);
}

/* Loading State */
.loading-state[data-v-7b56c516] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.loader[data-v-7b56c516] {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-7b56c516 0.8s linear infinite;
}
@keyframes spin-7b56c516 {
to {
    transform: rotate(360deg);
}
}
.loading-text[data-v-7b56c516] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 16px 0 0 0;
}

/* Courses List */
.courses-list[data-v-7b56c516] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.course-card[data-v-7b56c516] {
  border-radius: 16px;
  transition: all 0.2s ease;
}
.course-card--expanded[data-v-7b56c516] {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--q-primary) 10%, transparent);
}
.course-card[data-v-7b56c516]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
}

/* Course Card Header */
.course-card-header[data-v-7b56c516] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  padding: 20px;
}
.course-card-header-left[data-v-7b56c516] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.course-icon-wrapper[data-v-7b56c516] {
  padding: 8px;
  border-radius: 8px;
  background-color: var(--q-dark);
  color: var(--q-positive);
  transition: all 0.2s ease;
}
.course-icon-wrapper--active[data-v-7b56c516] {
  background-color: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  color: var(--q-primary);
}
.course-title[data-v-7b56c516] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  transition: color 0.2s ease;
  line-height: 30px;
}
.course-title[data-v-7b56c516]:hover {
  color: var(--q-primary);
}
.course-attempts-count[data-v-7b56c516] {
  font-size: 12px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.course-card-header-right[data-v-7b56c516] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.take-course-btn[data-v-7b56c516] {
  font-weight: 700;
  font-size: 14px;
  border-radius: 12px;
  padding: 8px 16px;
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  box-shadow: 0 4px 8px color-mix(in srgb, var(--q-primary) 15%, transparent);
  min-width: 120px;
}
.take-course-btn[data-v-7b56c516]:hover {
  background: color-mix(in srgb, var(--q-primary) 85%, black) !important;
}
.expand-icon[data-v-7b56c516] {
  padding: 6px;
  border-radius: 50%;
  color: var(--q-positive);
  transition: all 0.3s ease;
}
.expand-icon--rotated[data-v-7b56c516] {
  background-color: var(--q-dark);
  color: var(--q-accent);
  transform: rotate(180deg);
}

/* Attempts Container */
.attempts-container[data-v-7b56c516] {
  border-top: 1px solid var(--q-dark);
  background-color: color-mix(in srgb, var(--q-dark) 50%, transparent);
}

/* Attempt Section */
.attempt-section[data-v-7b56c516] {
  border-bottom: 1px solid var(--q-dark);
}
.attempt-section[data-v-7b56c516]:last-child {
  border-bottom: none;
}

/* Attempt Header */
.attempt-header[data-v-7b56c516] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.attempt-header[data-v-7b56c516]:hover {
  background-color: color-mix(in srgb, var(--q-dark) 80%, transparent);
}

/* Attempt Number & Status */
.attempt-number-status[data-v-7b56c516] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.attempt-number[data-v-7b56c516] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
}
.attempt-status-wrapper[data-v-7b56c516] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.attempt-status[data-v-7b56c516] {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  width: -moz-fit-content;
  width: fit-content;
}
.attempt-status--completed[data-v-7b56c516] {
  background-color: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  color: var(--q-success);
}
.attempt-status--failed[data-v-7b56c516] {
  background-color: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}
.attempt-assignment-type[data-v-7b56c516] {
  font-size: 12px;
  color: var(--q-positive);
}

/* Attempt Date */
.attempt-date[data-v-7b56c516] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--q-positive);
}
.attempt-expand-icon[data-v-7b56c516] {
  padding: 4px;
  border-radius: 50%;
  color: var(--q-positive);
  transition: all 0.3s ease;
}
.attempt-expand-icon--rotated[data-v-7b56c516] {
  transform: rotate(180deg);
  color: var(--q-accent);
}

/* Attempt Content */
.attempt-content[data-v-7b56c516] {
  padding: 0 20px 16px;
}

/* Module Section */
.module-section[data-v-7b56c516] {
  margin-bottom: 16px;
}
.module-section[data-v-7b56c516]:last-child {
  margin-bottom: 0;
}
.module-section-title[data-v-7b56c516] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  padding: 8px 12px;
  background-color: var(--q-dark);
  border-radius: 8px;
}

/* Module Row */
.module-row[data-v-7b56c516] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background-color: var(--q-info);
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.module-row[data-v-7b56c516]:last-child {
  margin-bottom: 0;
}
.module-info[data-v-7b56c516] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.module-id[data-v-7b56c516] {
  font-size: 11px;
  font-weight: 700;
  color: var(--q-positive);
  padding: 2px 6px;
  background-color: var(--q-dark);
  border-radius: 4px;
  flex-shrink: 0;
}
.module-name[data-v-7b56c516] {
  font-size: 14px;
  color: var(--q-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.module-status-actions[data-v-7b56c516] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.module-status[data-v-7b56c516] {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
}
.module-status--passed[data-v-7b56c516] {
  background-color: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  color: var(--q-success);
}
.module-status--failed[data-v-7b56c516] {
  background-color: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}
.module-score[data-v-7b56c516] {
  font-size: 12px;
  font-weight: 700;
  color: var(--q-accent);
}
.results-btn[data-v-7b56c516] {
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
  border-color: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 8px;
}
.results-btn[data-v-7b56c516]:hover {
  color: var(--q-primary);
  border-color: color-mix(in srgb, var(--q-primary) 25%, var(--q-info));
}

/* Empty States */
.empty-attempts[data-v-7b56c516],
.empty-modules[data-v-7b56c516] {
  padding: 24px;
  text-align: center;
  color: var(--q-positive);
  font-style: italic;
  font-size: 14px;
}

/* Empty State */
.empty-state-card[data-v-7b56c516] {
  border-radius: 16px;
  border-style: dashed;
  padding: 24px;
}
.empty-state-text[data-v-7b56c516] {
  color: var(--q-positive);
  margin: 0;
}
.empty-icon[data-v-7b56c516] {
  color: var(--q-positive);
}

/* Responsive */
@media (max-width: 768px) {
.course-card-header[data-v-7b56c516] {
    flex-direction: column;
    align-items: flex-start;
}
.course-card-header-right[data-v-7b56c516] {
    align-self: flex-end;
}
.attempt-header[data-v-7b56c516] {
    flex-wrap: wrap;
}
.module-row[data-v-7b56c516] {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.module-status-actions[data-v-7b56c516] {
    width: 100%;
    justify-content: space-between;
}
}

/* Modal Overlay */
.modal-overlay[data-v-7b56c516] {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--q-accent) 50%, transparent);
  backdrop-filter: blur(4px);
}
.modal-container[data-v-7b56c516] {
  background: var(--q-info);
  border-radius: 16px;
  width: 100%;
  max-width: 900px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Modal Transitions */
.modal-fade-enter-active[data-v-7b56c516] {
  animation: fadeIn-7b56c516 0.2s ease-out;
}
.modal-fade-leave-active[data-v-7b56c516] {
  animation: fadeOut-7b56c516 0.15s ease-in;
}
.modal-fade-enter-active .modal-container[data-v-7b56c516] {
  animation: zoomIn-7b56c516 0.2s ease-out;
}
.modal-fade-leave-active .modal-container[data-v-7b56c516] {
  animation: zoomOut-7b56c516 0.15s ease-in;
}
@keyframes fadeIn-7b56c516 {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
@keyframes fadeOut-7b56c516 {
from {
    opacity: 1;
}
to {
    opacity: 0;
}
}
@keyframes zoomIn-7b56c516 {
from {
    opacity: 0;
    transform: scale(0.95);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
@keyframes zoomOut-7b56c516 {
from {
    opacity: 1;
    transform: scale(1);
}
to {
    opacity: 0;
    transform: scale(0.95);
}
}

/* Modal Header */
.modal-header[data-v-7b56c516] {
  padding: 24px;
  border-bottom: 1px solid var(--q-dark);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--q-dark);
}
.modal-header-info[data-v-7b56c516] {
  flex: 1;
}
.modal-title[data-v-7b56c516] {
  font-weight: 700;
  font-size: 18px;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.modal-subtitle[data-v-7b56c516] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0 0 12px 0;
}
.modal-score-row[data-v-7b56c516] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-status-badge[data-v-7b56c516] {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-passed[data-v-7b56c516] {
  background: color-mix(in srgb, var(--q-success) 15%, var(--q-info));
  color: var(--q-success);
}
.badge-failed[data-v-7b56c516] {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}
.modal-score[data-v-7b56c516] {
  font-size: 18px;
  font-weight: 700;
  color: var(--q-accent);
}
.modal-close-btn[data-v-7b56c516] {
  padding: 8px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--q-positive);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close-btn[data-v-7b56c516]:hover {
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  color: var(--q-accent);
}

/* Modal Content */
.modal-content[data-v-7b56c516] {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: var(--q-info);
}

/* Results Table */
.results-table[data-v-7b56c516] {
  width: 100%;
  font-size: 14px;
  text-align: left;
  border-collapse: collapse;
}
.results-table thead[data-v-7b56c516] {
  background: var(--q-dark);
}
.results-table thead tr[data-v-7b56c516] {
  background: color-mix(in srgb, var(--q-dark) 95%, transparent);
  border-bottom: 1px solid var(--q-dark);
}
.results-table th[data-v-7b56c516] {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--q-positive);
  letter-spacing: 0.5px;
}
.th-question[data-v-7b56c516] {
  width: 50%;
}
.th-answer[data-v-7b56c516] {
  width: 35%;
}
.th-status[data-v-7b56c516] {
  width: 15%;
  text-align: center;
}
.results-table tbody tr[data-v-7b56c516] {
  border-bottom: 1px solid var(--q-dark);
  transition: background-color 0.15s ease;
}
.results-table tbody tr[data-v-7b56c516]:hover {
  background: var(--q-dark);
}
.results-table td[data-v-7b56c516] {
  padding: 16px;
  vertical-align: top;
}
.td-question[data-v-7b56c516] {
  font-weight: 500;
  color: var(--q-accent);
  line-height: 1.5;
  display: flex;
  flex-direction: row;
}
.question-num[data-v-7b56c516] {
  color: var(--q-positive);
  margin-right: 4px;
}
.td-answer[data-v-7b56c516] {
  color: var(--q-positive);
  line-height: 1.5;
}
.answer-line[data-v-7b56c516] {
  padding: 2px 0;
}
.answer-line + .answer-line[data-v-7b56c516] {
  border-top: 1px dashed color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  margin-top: 4px;
  padding-top: 6px;
}
.no-answer[data-v-7b56c516] {
  color: var(--q-positive);
}
.td-status[data-v-7b56c516] {
  text-align: center;
}

/* Status Badges */
.status-badge[data-v-7b56c516] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.status-correct[data-v-7b56c516] {
  background: color-mix(in srgb, var(--q-success) 10%, var(--q-info));
  color: var(--q-success);
  border: 1px solid color-mix(in srgb, var(--q-success) 30%, var(--q-info));
}
.status-incorrect[data-v-7b56c516] {
  background: color-mix(in srgb, var(--q-warning) 10%, var(--q-info));
  color: var(--q-warning);
  border: 1px solid color-mix(in srgb, var(--q-warning) 30%, var(--q-info));
}
.status-pending[data-v-7b56c516] {
  background: color-mix(in srgb, var(--q-secondary) 10%, var(--q-info));
  color: var(--q-secondary);
  border: 1px solid color-mix(in srgb, var(--q-secondary) 30%, var(--q-info));
}

/* Modal Empty State */
.modal-empty[data-v-7b56c516] {
  text-align: center;
  padding: 48px 20px;
  color: var(--q-positive);
  font-size: 14px;
}

/* Mobile Responsive */
@media (max-width: 640px) {
.modal-container[data-v-7b56c516] {
    max-height: 90vh;
    border-radius: 12px;
}
.modal-header[data-v-7b56c516] {
    padding: 16px;
}
.modal-content[data-v-7b56c516] {
    padding: 0;
}
.results-table th[data-v-7b56c516],
  .results-table td[data-v-7b56c516] {
    padding: 12px;
}
.th-answer[data-v-7b56c516] {
    display: none;
}
.td-answer[data-v-7b56c516] {
    display: none;
}
.th-question[data-v-7b56c516] {
    width: 70%;
}
.th-status[data-v-7b56c516] {
    width: 30%;
}
}


.assigned-courses-container[data-v-54556ed7] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-54556ed7 0.5s ease-in-out;
}
@keyframes fadeIn-54556ed7 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Loading State */
.loading-state[data-v-54556ed7] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.loader[data-v-54556ed7] {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-54556ed7 0.8s linear infinite;
}
@keyframes spin-54556ed7 {
to {
    transform: rotate(360deg);
}
}
.loading-text[data-v-54556ed7] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 16px 0 0 0;
}

/* Empty State */
.empty-state[data-v-54556ed7] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  color: var(--q-positive);
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-icon-box[data-v-54556ed7] {
  width: 64px;
  height: 64px;
  background: var(--q-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-title[data-v-54556ed7] {
  font-size: 18px;
  font-weight: 500;
  color: var(--q-accent);
  margin: 0 0 8px 0;
}
.empty-text[data-v-54556ed7] {
  font-size: 14px;
  margin: 0;
}

/* Header Card */
.header-card[data-v-54556ed7] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
@media (min-width: 640px) {
.header-card[data-v-54556ed7] {
    flex-direction: row;
}
}
.header-content[data-v-54556ed7] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-icon-box[data-v-54556ed7] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.header-title[data-v-54556ed7] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-54556ed7] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.count[data-v-54556ed7] {
  font-weight: 600;
  color: var(--q-accent);
}

/* View Toggle */
.view-toggle[data-v-54556ed7] {
  display: flex;
  gap: 4px;
  background: var(--q-dark);
  padding: 4px;
  border-radius: 8px;
}
.toggle-btn[data-v-54556ed7] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--q-positive);
  cursor: pointer;
  transition: all 0.2s;
}
.toggle-btn[data-v-54556ed7]:hover {
  color: var(--q-accent);
}
.toggle-btn.active[data-v-54556ed7] {
  background: var(--q-info);
  color: var(--q-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Courses Grid */
.courses-grid[data-v-54556ed7] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.courses-grid.list-mode[data-v-54556ed7] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Course Card - Grid Mode */
.course-card[data-v-54556ed7] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.2s;
  cursor: pointer;
}
.course-card[data-v-54556ed7]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 50%, var(--q-info));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Course Card - List Mode */
.course-card.list-card[data-v-54556ed7] {
  flex-direction: row;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
  border-radius: 12px;
}
.card-top[data-v-54556ed7] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.course-icon-box[data-v-54556ed7] {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.list-card .course-icon-box[data-v-54556ed7] {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}
.list-content[data-v-54556ed7] {
  flex: 1;
  min-width: 0;
}
.icon-new[data-v-54556ed7] {
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
}
.icon-in-progress[data-v-54556ed7] {
  color: var(--q-warning);
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
}
.icon-urgent[data-v-54556ed7] {
  color: var(--q-warning);
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
}

/* Status Badge */
.status-badge[data-v-54556ed7] {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.badge-new[data-v-54556ed7] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
}
.badge-in-progress[data-v-54556ed7] {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}
.badge-urgent[data-v-54556ed7] {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}
.course-title[data-v-54556ed7] {
  font-size: 14px;
  font-weight: 500;
  color: var(--q-accent);
  margin: 0;
  flex: 1;
  line-height: 1.4;
}
.course-title.grid-title[data-v-54556ed7] {
  font-size: 16px;
  font-weight: 600;
}
.course-dates[data-v-54556ed7] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--q-positive);
}
.course-dates-inline[data-v-54556ed7] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--q-positive);
  margin-top: 4px;
}
.course-arrow[data-v-54556ed7] {
  color: var(--q-positive);
  flex-shrink: 0;
}


.assigned-programs-container[data-v-60a3c587] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-60a3c587 0.5s ease-in-out;
}
@keyframes fadeIn-60a3c587 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Loading State */
.loading-state[data-v-60a3c587] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.loader[data-v-60a3c587] {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-60a3c587 0.8s linear infinite;
}
@keyframes spin-60a3c587 {
to {
    transform: rotate(360deg);
}
}
.loading-text[data-v-60a3c587] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 16px 0 0 0;
}

/* Empty State */
.empty-state[data-v-60a3c587] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  color: var(--q-positive);
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-icon-box[data-v-60a3c587] {
  width: 64px;
  height: 64px;
  background: var(--q-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-title[data-v-60a3c587] {
  font-size: 18px;
  font-weight: 500;
  color: var(--q-accent);
  margin: 0 0 8px 0;
}
.empty-text[data-v-60a3c587] {
  font-size: 14px;
  margin: 0;
}

/* Header Card */
.header-card[data-v-60a3c587] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
@media (min-width: 640px) {
.header-card[data-v-60a3c587] {
    flex-direction: row;
}
}
.header-content[data-v-60a3c587] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-icon-box[data-v-60a3c587] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.header-title[data-v-60a3c587] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-60a3c587] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.count[data-v-60a3c587] {
  font-weight: 600;
  color: var(--q-accent);
}

/* Programs List */
.programs-list[data-v-60a3c587] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Program Card */
.program-card[data-v-60a3c587] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  transition: all 0.2s ease;
}
.program-card--expanded[data-v-60a3c587] {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--q-primary) 10%, transparent);
}
.program-card[data-v-60a3c587]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
}

/* Program Card Header */
.program-card-header[data-v-60a3c587] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  padding: 20px;
}
.program-card-header-left[data-v-60a3c587] {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.program-icon-wrapper[data-v-60a3c587] {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  background-color: var(--q-dark);
  color: var(--q-positive);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  overflow: hidden;
}
.program-icon-wrapper--active[data-v-60a3c587] {
  background-color: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  color: var(--q-primary);
}
.program-logo[data-v-60a3c587] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.program-title[data-v-60a3c587] {
  font-size: 16px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0;
  line-height: 1.4;
}
.program-dates[data-v-60a3c587] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.program-card-header-right[data-v-60a3c587] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Status Badge */
.status-badge[data-v-60a3c587] {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.badge-pending[data-v-60a3c587] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
}
.badge-in-progress[data-v-60a3c587] {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}

/* Expand Icon */
.expand-icon[data-v-60a3c587] {
  padding: 6px;
  border-radius: 50%;
  color: var(--q-positive);
  transition: all 0.3s ease;
}
.expand-icon--rotated[data-v-60a3c587] {
  background-color: var(--q-dark);
  color: var(--q-accent);
  transform: rotate(180deg);
}

/* Modules Container */
.modules-container[data-v-60a3c587] {
  border-top: 1px solid var(--q-dark);
  background-color: color-mix(in srgb, var(--q-dark) 50%, transparent);
  padding: 8px 0;
}

/* Module Level */
.module-level[data-v-60a3c587] {
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
}
.module-level[data-v-60a3c587]:last-child {
  border-bottom: none;
}

/* Level Header */
.level-header[data-v-60a3c587] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.level-header[data-v-60a3c587]:hover {
  background-color: color-mix(in srgb, var(--q-dark) 80%, transparent);
}
.level-header-left[data-v-60a3c587] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.level-header-right[data-v-60a3c587] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.level-number[data-v-60a3c587] {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
  flex-shrink: 0;
}
.level-title[data-v-60a3c587] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
}
.level-status--passed[data-v-60a3c587] {
  color: var(--q-secondary);
}
.level-status--pending[data-v-60a3c587] {
  color: var(--q-positive);
}
.level-expand-icon[data-v-60a3c587] {
  padding: 4px;
  border-radius: 50%;
  color: var(--q-positive);
  transition: all 0.3s ease;
}
.level-expand-icon--rotated[data-v-60a3c587] {
  transform: rotate(180deg);
  color: var(--q-accent);
}

/* Module Row */
.module-row[data-v-60a3c587] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px 10px 32px;
  transition: background-color 0.2s ease;
}
.module-row--single[data-v-60a3c587] {
  padding-left: 20px;
}
.module-row--clickable[data-v-60a3c587] {
  cursor: pointer;
}
.module-row--clickable[data-v-60a3c587]:hover {
  background-color: color-mix(in srgb, var(--q-primary) 5%, var(--q-info));
}
.module-info[data-v-60a3c587] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.module-type-badge[data-v-60a3c587] {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: var(--q-dark);
  color: var(--q-positive);
  flex-shrink: 0;
}
.module-name[data-v-60a3c587] {
  font-size: 14px;
  color: var(--q-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.module-status-wrapper[data-v-60a3c587] {
  flex-shrink: 0;
}
.module-status[data-v-60a3c587] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
}
.module-status--passed[data-v-60a3c587] {
  background-color: color-mix(in srgb, var(--q-secondary) 10%, var(--q-info));
  color: var(--q-secondary);
}
.module-status--failed[data-v-60a3c587] {
  background-color: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}
.module-status--progress[data-v-60a3c587] {
  background-color: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
}
.module-status--pending[data-v-60a3c587] {
  background-color: var(--q-dark);
  color: var(--q-positive);
}

/* Responsive */
@media (max-width: 768px) {
.program-card-header[data-v-60a3c587] {
    flex-direction: column;
    align-items: flex-start;
}
.program-card-header-right[data-v-60a3c587] {
    align-self: flex-end;
}
.module-row[data-v-60a3c587] {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.module-status-wrapper[data-v-60a3c587] {
    align-self: flex-end;
}
}


.completed-programs-container[data-v-05604e10] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-05604e10 0.5s ease-in-out;
}
@keyframes fadeIn-05604e10 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Loading State */
.loading-state[data-v-05604e10] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.loader[data-v-05604e10] {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-05604e10 0.8s linear infinite;
}
@keyframes spin-05604e10 {
to {
    transform: rotate(360deg);
}
}
.loading-text[data-v-05604e10] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 16px 0 0 0;
}

/* Header Card */
.header-card[data-v-05604e10] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
  display: flex;
  align-items: center;
}
.header-content[data-v-05604e10] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-icon-box[data-v-05604e10] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.header-title[data-v-05604e10] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-05604e10] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}

/* Empty State */
.empty-state[data-v-05604e10] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  color: var(--q-positive);
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-icon-box[data-v-05604e10] {
  width: 64px;
  height: 64px;
  background: var(--q-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-title[data-v-05604e10] {
  font-size: 18px;
  font-weight: 500;
  color: var(--q-accent);
  margin: 0 0 8px 0;
}
.empty-text[data-v-05604e10] {
  font-size: 14px;
  margin: 0;
}

/* Programs List */
.programs-list[data-v-05604e10] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Program Card */
.program-card[data-v-05604e10] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  transition: all 0.2s ease;
}
.program-card--expanded[data-v-05604e10] {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--q-primary) 10%, transparent);
}
.program-card[data-v-05604e10]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
}

/* Program Card Header */
.program-card-header[data-v-05604e10] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  padding: 20px;
}
.program-card-header-left[data-v-05604e10] {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.program-icon-wrapper[data-v-05604e10] {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  background-color: var(--q-dark);
  color: var(--q-positive);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  overflow: hidden;
}
.program-icon-wrapper--active[data-v-05604e10] {
  background-color: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  color: var(--q-primary);
}
.program-logo[data-v-05604e10] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.program-title[data-v-05604e10] {
  font-size: 16px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0;
  line-height: 1.4;
}
.program-dates[data-v-05604e10] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.program-card-header-right[data-v-05604e10] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Status Badge */
.status-badge[data-v-05604e10] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}
.badge-completed[data-v-05604e10] {
  background: color-mix(in srgb, var(--q-secondary) 10%, var(--q-info));
  color: var(--q-secondary);
}

/* Expand Icon */
.expand-icon[data-v-05604e10] {
  padding: 6px;
  border-radius: 50%;
  color: var(--q-positive);
  transition: all 0.3s ease;
}
.expand-icon--rotated[data-v-05604e10] {
  background-color: var(--q-dark);
  color: var(--q-accent);
  transform: rotate(180deg);
}

/* Modules Container */
.modules-container[data-v-05604e10] {
  border-top: 1px solid var(--q-dark);
  background-color: color-mix(in srgb, var(--q-dark) 50%, transparent);
  padding: 8px 0;
}

/* Module Level */
.module-level[data-v-05604e10] {
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
}
.module-level[data-v-05604e10]:last-child {
  border-bottom: none;
}

/* Level Header */
.level-header[data-v-05604e10] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.level-header[data-v-05604e10]:hover {
  background-color: color-mix(in srgb, var(--q-dark) 80%, transparent);
}
.level-header-left[data-v-05604e10] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.level-header-right[data-v-05604e10] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.level-number[data-v-05604e10] {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
  flex-shrink: 0;
}
.level-title[data-v-05604e10] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
}
.level-status--passed[data-v-05604e10] {
  color: var(--q-secondary);
}
.level-status--failed[data-v-05604e10] {
  color: var(--q-warning);
}
.level-expand-icon[data-v-05604e10] {
  padding: 4px;
  border-radius: 50%;
  color: var(--q-positive);
  transition: all 0.3s ease;
}
.level-expand-icon--rotated[data-v-05604e10] {
  transform: rotate(180deg);
  color: var(--q-accent);
}

/* Module Row */
.module-row[data-v-05604e10] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px 10px 32px;
}
.module-row--single[data-v-05604e10] {
  padding-left: 20px;
}
.module-info[data-v-05604e10] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.module-type-badge[data-v-05604e10] {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: var(--q-dark);
  color: var(--q-positive);
  flex-shrink: 0;
}
.module-name[data-v-05604e10] {
  font-size: 14px;
  color: var(--q-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.module-status-wrapper[data-v-05604e10] {
  flex-shrink: 0;
}
.module-status[data-v-05604e10] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
}
.module-status--passed[data-v-05604e10] {
  background-color: color-mix(in srgb, var(--q-secondary) 10%, var(--q-info));
  color: var(--q-secondary);
}
.module-status--failed[data-v-05604e10] {
  background-color: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}
.module-status--progress[data-v-05604e10] {
  background-color: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
}
.module-status--pending[data-v-05604e10] {
  background-color: var(--q-dark);
  color: var(--q-positive);
}

/* Responsive */
@media (max-width: 768px) {
.program-card-header[data-v-05604e10] {
    flex-direction: column;
    align-items: flex-start;
}
.program-card-header-right[data-v-05604e10] {
    align-self: flex-end;
}
.module-row[data-v-05604e10] {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.module-status-wrapper[data-v-05604e10] {
    align-self: flex-end;
}
}


.observer-programs-container[data-v-00addfd4] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-00addfd4 0.5s ease-in-out;
}
@keyframes fadeIn-00addfd4 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Loading State */
.loading-state[data-v-00addfd4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.loader[data-v-00addfd4] {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-00addfd4 0.8s linear infinite;
}
@keyframes spin-00addfd4 {
to {
    transform: rotate(360deg);
}
}
.loading-text[data-v-00addfd4] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 16px 0 0 0;
}

/* Header Card */
.header-card[data-v-00addfd4] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
  display: flex;
  align-items: center;
}
.header-content[data-v-00addfd4] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-icon-box[data-v-00addfd4] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.header-title[data-v-00addfd4] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-00addfd4] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}

/* Empty State */
.empty-state[data-v-00addfd4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  color: var(--q-positive);
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-icon-box[data-v-00addfd4] {
  width: 64px;
  height: 64px;
  background: var(--q-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-title[data-v-00addfd4] {
  font-size: 18px;
  font-weight: 500;
  color: var(--q-accent);
  margin: 0 0 8px 0;
}
.empty-text[data-v-00addfd4] {
  font-size: 14px;
  margin: 0;
}

/* Programs List */
.programs-list[data-v-00addfd4] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Program Card */
.program-card[data-v-00addfd4] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  transition: all 0.2s ease;
}
.program-card--expanded[data-v-00addfd4] {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--q-primary) 10%, transparent);
}
.program-card[data-v-00addfd4]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
}

/* Program Card Header */
.program-card-header[data-v-00addfd4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  padding: 20px;
}
.program-card-header-left[data-v-00addfd4] {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.program-icon-wrapper[data-v-00addfd4] {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  background-color: var(--q-dark);
  color: var(--q-positive);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  overflow: hidden;
}
.program-icon-wrapper--active[data-v-00addfd4] {
  background-color: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  color: var(--q-primary);
}
.program-logo[data-v-00addfd4] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.program-title[data-v-00addfd4] {
  font-size: 16px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0;
  line-height: 1.4;
}
.student-name[data-v-00addfd4] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--q-primary);
  font-weight: 500;
  margin: 4px 0 0 0;
}
.program-dates[data-v-00addfd4] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.program-card-header-right[data-v-00addfd4] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Status Badge */
.status-badge[data-v-00addfd4] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}
.badge-completed[data-v-00addfd4] {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
}
.badge-in-progress[data-v-00addfd4] {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}

/* Expand Icon */
.expand-icon[data-v-00addfd4] {
  padding: 6px;
  border-radius: 50%;
  color: var(--q-positive);
  transition: all 0.3s ease;
}
.expand-icon--rotated[data-v-00addfd4] {
  background-color: var(--q-dark);
  color: var(--q-accent);
  transform: rotate(180deg);
}

/* Modules Container */
.modules-container[data-v-00addfd4] {
  border-top: 1px solid var(--q-dark);
  background-color: color-mix(in srgb, var(--q-dark) 50%, transparent);
  padding: 8px 0;
}

/* Module Level */
.module-level[data-v-00addfd4] {
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 8%, var(--q-info));
}
.module-level[data-v-00addfd4]:last-child {
  border-bottom: none;
}

/* Level Header */
.level-header[data-v-00addfd4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.level-header[data-v-00addfd4]:hover {
  background-color: color-mix(in srgb, var(--q-dark) 80%, transparent);
}
.level-header-left[data-v-00addfd4] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.level-header-right[data-v-00addfd4] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.level-number[data-v-00addfd4] {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--q-positive);
  flex-shrink: 0;
}
.level-title[data-v-00addfd4] {
  font-size: 14px;
  font-weight: 600;
  color: var(--q-accent);
}
.level-status--passed[data-v-00addfd4] {
  color: var(--q-positive);
}
.level-status--pending[data-v-00addfd4] {
  color: var(--q-positive);
}
.level-expand-icon[data-v-00addfd4] {
  padding: 4px;
  border-radius: 50%;
  color: var(--q-positive);
  transition: all 0.3s ease;
}
.level-expand-icon--rotated[data-v-00addfd4] {
  transform: rotate(180deg);
  color: var(--q-accent);
}

/* Module Row */
.module-row[data-v-00addfd4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px 10px 32px;
}
.module-row--single[data-v-00addfd4] {
  padding-left: 20px;
}
.module-info[data-v-00addfd4] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.module-type-badge[data-v-00addfd4] {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: var(--q-dark);
  color: var(--q-positive);
  flex-shrink: 0;
}
.module-name[data-v-00addfd4] {
  font-size: 14px;
  color: var(--q-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.module-status-wrapper[data-v-00addfd4] {
  flex-shrink: 0;
}
.module-status[data-v-00addfd4] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
}
.module-status--passed[data-v-00addfd4] {
  background-color: color-mix(in srgb, var(--q-secondary) 10%, var(--q-info));
  color: var(--q-secondary);
}
.module-status--failed[data-v-00addfd4] {
  background-color: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}
.module-status--progress[data-v-00addfd4] {
  background-color: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
}
.module-status--pending[data-v-00addfd4] {
  background-color: var(--q-dark);
  color: var(--q-positive);
}

/* Responsive */
@media (max-width: 768px) {
.program-card-header[data-v-00addfd4] {
    flex-direction: column;
    align-items: flex-start;
}
.program-card-header-right[data-v-00addfd4] {
    align-self: flex-end;
}
.module-row[data-v-00addfd4] {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.module-status-wrapper[data-v-00addfd4] {
    align-self: flex-end;
}
}


.my-groups-container[data-v-737b5020] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-737b5020 0.5s ease-in-out;
}
@keyframes fadeIn-737b5020 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Loading State */
.loading-state[data-v-737b5020] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.loader[data-v-737b5020] {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-737b5020 0.8s linear infinite;
}
@keyframes spin-737b5020 {
to {
    transform: rotate(360deg);
}
}
.loading-text[data-v-737b5020] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 16px 0 0 0;
}

/* Empty State */
.empty-state[data-v-737b5020] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  color: var(--q-positive);
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-icon-box[data-v-737b5020] {
  width: 64px;
  height: 64px;
  background: var(--q-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
}
.empty-title[data-v-737b5020] {
  font-size: 18px;
  font-weight: 500;
  color: var(--q-accent);
  margin: 0 0 8px 0;
}
.empty-text[data-v-737b5020] {
  font-size: 14px;
  margin: 0;
}

/* Header Card */
.header-card[data-v-737b5020] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
@media (min-width: 640px) {
.header-card[data-v-737b5020] {
    flex-direction: row;
}
}
.header-content[data-v-737b5020] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-icon-box[data-v-737b5020] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.header-title[data-v-737b5020] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-737b5020] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.count[data-v-737b5020] {
  font-weight: 600;
  color: var(--q-accent);
}

/* View Toggle */
.view-toggle[data-v-737b5020] {
  display: flex;
  gap: 4px;
  background: var(--q-dark);
  padding: 4px;
  border-radius: 8px;
}
.toggle-btn[data-v-737b5020] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--q-positive);
  cursor: pointer;
  transition: all 0.2s;
}
.toggle-btn[data-v-737b5020]:hover {
  color: var(--q-accent);
}
.toggle-btn.active[data-v-737b5020] {
  background: var(--q-info);
  color: var(--q-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Groups Grid */
.groups-grid[data-v-737b5020] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 768px) {
.groups-grid[data-v-737b5020] {
    grid-template-columns: 1fr;
}
}
.groups-grid.list-mode[data-v-737b5020] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Group Card */
.group-card[data-v-737b5020] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.group-card[data-v-737b5020]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Group Card - List Mode */
.group-card.list-card[data-v-737b5020] {
  padding: 16px 20px;
  gap: 16px;
  border-radius: 12px;
}
.group-card.list-card .card-header[data-v-737b5020] {
  flex-direction: row;
  align-items: center;
}
.group-card.list-card .group-icon-box[data-v-737b5020] {
  width: 40px;
  height: 40px;
}
.group-card.list-card .card-content[data-v-737b5020] {
  flex: 1;
}

/* Card Header */
.card-header[data-v-737b5020] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.group-icon-box[data-v-737b5020] {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
}
.group-link[data-v-737b5020] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--q-positive);
  text-decoration: none;
  transition: all 0.2s;
  opacity: 0;
}
.group-card:hover .group-link[data-v-737b5020] {
  opacity: 1;
}
.group-link[data-v-737b5020]:hover {
  background: var(--q-dark);
  color: var(--q-primary);
}

/* Card Content */
.card-content[data-v-737b5020] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.group-title[data-v-737b5020] {
  font-size: 18px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0;
  line-height: 1.4;
}
.group-subtitle[data-v-737b5020] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
  line-height: 1.4;
}


.group-detail-container[data-v-89c3f6d8] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeIn-89c3f6d8 0.3s ease;
}
@keyframes fadeIn-89c3f6d8 {
from {
    opacity: 0;
    transform: translateY(8px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Loading State */
.loading-state[data-v-89c3f6d8] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}
.loader[data-v-89c3f6d8] {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-89c3f6d8 0.8s linear infinite;
}
@keyframes spin-89c3f6d8 {
to {
    transform: rotate(360deg);
}
}

/* Header */
.group-header[data-v-89c3f6d8] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.header-content[data-v-89c3f6d8] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.group-icon-box[data-v-89c3f6d8] {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
}
.header-info[data-v-89c3f6d8] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.group-title[data-v-89c3f6d8] {
  font-size: 22px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 1.3;
}
.group-dates[data-v-89c3f6d8] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 0;
}
.external-link[data-v-89c3f6d8] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--q-dark);
  border-radius: 10px;
  color: var(--q-positive);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}
.external-link[data-v-89c3f6d8]:hover {
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
}

/* Empty State */
.empty-state[data-v-89c3f6d8] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  color: var(--q-positive);
  background: var(--q-info);
  border-radius: 16px;
  border: 2px dashed color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
}
.empty-icon-box[data-v-89c3f6d8] {
  width: 64px;
  height: 64px;
  background: var(--q-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--q-positive);
}
.empty-title[data-v-89c3f6d8] {
  font-size: 18px;
  font-weight: 500;
  color: var(--q-accent);
  margin: 0 0 8px 0;
}
.empty-text[data-v-89c3f6d8] {
  font-size: 14px;
  margin: 0;
}

/* Items Grid */
.items-grid[data-v-89c3f6d8] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
.items-grid[data-v-89c3f6d8] {
    grid-template-columns: 1fr;
}
}
.item-card[data-v-89c3f6d8] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.item-card[data-v-89c3f6d8]:hover {
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.item-icon-box[data-v-89c3f6d8] {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.item-icon-box.test[data-v-89c3f6d8] {
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
}
.item-icon-box.course[data-v-89c3f6d8] {
  color: var(--q-secondary);
  background: color-mix(in srgb, var(--q-secondary) 10%, var(--q-info));
}
.item-content[data-v-89c3f6d8] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.item-type[data-v-89c3f6d8] {
  font-size: 12px;
  font-weight: 500;
  color: var(--q-positive);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.item-title[data-v-89c3f6d8] {
  font-size: 16px;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0;
  line-height: 1.4;
}


.assessment-nomination[data-v-6152dbd6] {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: 80px;
  animation: fadeSlideUp-6152dbd6 0.5s ease-out;
}
@keyframes fadeSlideUp-6152dbd6 {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.no-data[data-v-6152dbd6] {
  text-align: center;
  padding: 40px;
  color: #64748b;
}

/* Loading */
.loading-state[data-v-6152dbd6] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.loading-text[data-v-6152dbd6] {
  margin: 16px 0 0 0;
  font-size: 14px;
  color: #64748b;
}

/* List Header */
.list-header[data-v-6152dbd6] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
.list-header[data-v-6152dbd6] {
    flex-direction: row;
    align-items: center;
}
}
.header-content[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-icon-box[data-v-6152dbd6] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
  flex-shrink: 0;
}
.list-title[data-v-6152dbd6] {
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  color: #1e293b;
  margin: 0;
}
.list-subtitle[data-v-6152dbd6] {
  font-size: 14px;
  color: #64748b;
  margin: 4px 0 0 0;
}
.count-box[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

/* Assessment Grid */
.assessment-grid[data-v-6152dbd6] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.assessment-block[data-v-6152dbd6] {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.assessment-block[data-v-6152dbd6]:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
  border-color: #cbd5e1;
}
.assessment-block-header[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.assessment-block-icon[data-v-6152dbd6] {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.assessment-block-icon.status-draft[data-v-6152dbd6] {
  background: linear-gradient(135deg, #94a3b8, #64748b);
}
.assessment-block-icon.status-pending[data-v-6152dbd6] {
  background: linear-gradient(135deg, #fbbf24, #d97706);
}
.assessment-block-icon.status-approved[data-v-6152dbd6] {
  background: linear-gradient(135deg, #34d399, #16a34a);
}
.assessment-block-badge[data-v-6152dbd6] {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
}
.assessment-block-badge.status-draft[data-v-6152dbd6] {
  background: #f1f5f9;
  color: #64748b;
}
.assessment-block-badge.status-pending[data-v-6152dbd6] {
  background: #fef3c7;
  color: #b45309;
}
.assessment-block-badge.status-approved[data-v-6152dbd6] {
  background: #dcfce7;
  color: #15803d;
}
.assessment-block-pattern[data-v-6152dbd6] {
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--q-primary) 8%, transparent) 0%, transparent 70%);
  border-radius: 0 16px 0 0;
  pointer-events: none;
}
.assessment-block-title[data-v-6152dbd6] {
  font-size: 17px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 12px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.assessment-block-meta[data-v-6152dbd6] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.meta-item[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
}
.meta-item .q-icon[data-v-6152dbd6] {
  color: #94a3b8;
}
.meta-highlight[data-v-6152dbd6] {
  color: #16a34a;
  font-weight: 500;
}
.meta-highlight .q-icon[data-v-6152dbd6] {
  color: #16a34a;
}
.assessment-block-footer[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}
.assessment-block-action[data-v-6152dbd6] {
  font-size: 13px;
  font-weight: 600;
  color: var(--q-primary);
}
.arrow-circle[data-v-6152dbd6] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--q-primary) 10%, white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
  transition: all 0.2s;
}
.assessment-block:hover .arrow-circle[data-v-6152dbd6] {
  background: var(--q-primary);
  color: white;
  transform: translateX(4px);
}
.nav-header[data-v-6152dbd6] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.back-btn[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--q-positive);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}
.back-btn[data-v-6152dbd6]:hover {
  color: var(--q-primary);
}

/* Header */
.header-card[data-v-6152dbd6] {
  border-radius: 16px;
}
.nomination-header[data-v-6152dbd6] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
.nomination-header[data-v-6152dbd6] {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
}
.back-btn[data-v-6152dbd6] {
  margin-left: -8px;
}
.add-icon[data-v-6152dbd6] {
  margin-left: auto;
}
.badges-row[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.badge-purple[data-v-6152dbd6] {
  background: #ede9fe;
  color: #7c3aed;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.badge-amber[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #fffbeb;
  color: #d97706;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #fef3c7;
}
.badge-green[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f0fdf4;
  color: #16a34a;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #dcfce7;
}
.campaign-title[data-v-6152dbd6] {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  color: #1e293b;
  margin: 0;
}
.deadline-text[data-v-6152dbd6] {
  color: #64748b;
  font-size: 14px;
  margin: 8px 0 0 0;
}
.header-right[data-v-6152dbd6] {
  display: none;
  text-align: right;
}
@media (min-width: 768px) {
.header-right[data-v-6152dbd6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
}
.total-label[data-v-6152dbd6] {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
}
.total-count[data-v-6152dbd6] {
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  margin: 0;
}
.total-suffix[data-v-6152dbd6] {
  font-size: 14px;
  font-weight: 400;
  color: #94a3b8;
}

/* Grid */
.main-grid[data-v-6152dbd6] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
.main-grid[data-v-6152dbd6] {
    grid-template-columns: 2fr 1fr;
}
}

/* Evaluators */
.evaluators-card[data-v-6152dbd6] {
  border-radius: 16px;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}
.card-header[data-v-6152dbd6] {
  padding: 24px;
  border-bottom: 1px solid #f1f5f9;
  background: rgba(248, 250, 252, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-title[data-v-6152dbd6] {
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  color: #334155;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.min-badge[data-v-6152dbd6] {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
}
.min-ok[data-v-6152dbd6] {
  background: #dcfce7;
  color: #15803d;
}
.min-error[data-v-6152dbd6] {
  background: #fee2e2;
  color: #dc2626;
}
.card-body[data-v-6152dbd6] {
  padding: 24px;
  flex: 1;
}

/* Search */
.search-section[data-v-6152dbd6] {
  margin-bottom: 24px;
  position: relative;
}
.search-active[data-v-6152dbd6] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  animation: fadeZoom-6152dbd6 0.2s ease-out;
}
@keyframes fadeZoom-6152dbd6 {
from {
    opacity: 0;
    transform: scale(0.95);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
.search-input-wrapper[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  padding: 8px;
  border-radius: 12px;
  border: 2px solid #ffe4e6;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.search-input[data-v-6152dbd6] {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 8px;
}
.search-dropdown[data-v-6152dbd6] {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 8px;
  background: white;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.search-result-item[data-v-6152dbd6] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: none;
  border: none;
  border-bottom: 1px solid #f8fafc;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.search-result-item[data-v-6152dbd6]:last-child {
  border-bottom: none;
}
.search-result-item[data-v-6152dbd6]:hover {
  background: #f8fafc;
}
.user-avatar-small[data-v-6152dbd6] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.user-info[data-v-6152dbd6] {
  flex: 1;
}
.user-name[data-v-6152dbd6] {
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  margin: 0;
}
.user-position[data-v-6152dbd6] {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}
.no-results[data-v-6152dbd6] {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
}
.add-evaluator-btn[data-v-6152dbd6] {
  width: 100%;
  padding: 12px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: none;
  color: #64748b;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}
.add-evaluator-btn[data-v-6152dbd6]:hover {
  border-color: #f43f5e;
  color: #e11d48;
  background: #fff1f2;
}
.add-evaluator-btn[data-v-6152dbd6]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.add-buttons-row[data-v-6152dbd6] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.add-buttons-row .add-evaluator-btn[data-v-6152dbd6] {
  flex: 1;
  min-width: 140px;
}
.add-departments-btn[data-v-6152dbd6]:hover:not(:disabled) {
  border-color: #22c55e;
  color: #22c55e;
  background: color-mix(in srgb, #22c55e 10%, white);
}
.add-subordinates-btn[data-v-6152dbd6]:hover:not(:disabled) {
  border-color: var(--q-primary);
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 10%, white);
}
.add-managers-btn[data-v-6152dbd6]:hover:not(:disabled) {
  border-color: var(--q-secondary);
  color: var(--q-secondary);
  background: color-mix(in srgb, var(--q-secondary) 10%, white);
}

/* Evaluators List */
.evaluators-list[data-v-6152dbd6] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.evaluator-item[data-v-6152dbd6] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: white;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  transition: box-shadow 0.2s;
}
.evaluator-item[data-v-6152dbd6]:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
@media (min-width: 640px) {
.evaluator-item[data-v-6152dbd6] {
    flex-direction: row;
    align-items: center;
}
}
.evaluator-info[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.evaluator-avatar[data-v-6152dbd6] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e2e8f0;
}
.avatar-placeholder[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  flex-shrink: 0;
}
.avatar-placeholder-small[data-v-6152dbd6] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  flex-shrink: 0;
}
.evaluator-name[data-v-6152dbd6] {
  font-weight: 700;
  color: #334155;
  font-size: 14px;
  margin: 0;
}
.evaluator-position[data-v-6152dbd6] {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}
.delete-btn[data-v-6152dbd6]:hover {
  color: #ef4444 !important;
  background: #fef2f2;
}

/* Empty */
.empty-state[data-v-6152dbd6] {
  text-align: center;
  padding: 40px 0;
}
.empty-icon[data-v-6152dbd6] {
  width: 64px;
  height: 64px;
  background: #f8fafc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.empty-text[data-v-6152dbd6] {
  color: #94a3b8;
  font-size: 14px;
  margin: 0;
}

/* Sidebar */
.sidebar-column[data-v-6152dbd6] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Approvers */
.approvers-card[data-v-6152dbd6] {
  border-radius: 16px;
}
.approvers-title[data-v-6152dbd6] {
  font-weight: 700;
  font-size: 24px;
  color: #334155;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.approvers-list[data-v-6152dbd6] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.approver-item[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
}
.approver-info[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}
.approver-avatar[data-v-6152dbd6] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.approver-details[data-v-6152dbd6] {
  min-width: 0;
}
.approver-name[data-v-6152dbd6] {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.approver-position[data-v-6152dbd6] {
  font-size: 10px;
  color: #64748b;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.empty-approvers[data-v-6152dbd6] {
  padding: 12px;
  text-align: center;
}
.add-approver-section[data-v-6152dbd6] {
  position: relative;
}
.approver-search-active[data-v-6152dbd6] {
  background: white;
  border: 1px solid #fecdd3;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  position: absolute;
  width: 100%;
  z-index: 20;
}
.approver-search-input[data-v-6152dbd6] {
  width: 100%;
  font-size: 12px;
  padding: 8px;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  outline: none;
  margin-bottom: 8px;
}
.approver-search-results[data-v-6152dbd6] {
  max-height: 160px;
  overflow-y: auto;
}
.approver-result-item[data-v-6152dbd6] {
  width: 100%;
  text-align: left;
  font-size: 12px;
  padding: 8px;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: center;
}
.approver-result-item[data-v-6152dbd6]:hover {
  background: #f8fafc;
}
.approver-result-avatar[data-v-6152dbd6] {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.no-results-small[data-v-6152dbd6] {
  padding: 8px;
  text-align: center;
  font-size: 11px;
  color: #94a3b8;
}
.cancel-search-btn[data-v-6152dbd6] {
  width: 100%;
  text-align: center;
  font-size: 10px;
  color: #94a3b8;
  background: none;
  border: none;
  margin-top: 4px;
  cursor: pointer;
}
.cancel-search-btn[data-v-6152dbd6]:hover {
  color: #64748b;
}
.add-approver-btn[data-v-6152dbd6] {
  width: 100%;
  padding: 8px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: none;
  color: #64748b;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s;
}
.add-approver-btn[data-v-6152dbd6]:hover {
  border-color: #60a5fa;
  color: #2563eb;
  background: #eff6ff;
}

/* Action */
.action-card[data-v-6152dbd6] {
  background: #0f172a;
  border-radius: 16px;
  padding: 24px;
  color: white;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.3);
}
.action-title[data-v-6152dbd6] {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px 0;
}
.action-description[data-v-6152dbd6] {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0 0 24px 0;
}
.submit-btn[data-v-6152dbd6] {
  width: 100%;
  padding: 12px;
  background: #e11d48;
  border: none;
  border-radius: 12px;
  color: white;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s;
  box-shadow: 0 10px 20px rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
}
.submit-btn[data-v-6152dbd6]:hover:not(.disabled) {
  background: #be123c;
}
.submit-btn.disabled[data-v-6152dbd6] {
  background: #334155;
  color: #64748b;
  cursor: not-allowed;
  box-shadow: none;
}
.validation-message[data-v-6152dbd6] {
  text-align: center;
  font-size: 10px;
  color: #f87171;
  margin: 12px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Role badge in list */
.role-badge[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  margin-right: 8px;
}
.role-approver[data-v-6152dbd6] {
  background: color-mix(in srgb, var(--q-primary) 15%, white);
  color: var(--q-primary);
}

/* Badge blue for approver */
.badge-blue[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #dbeafe;
}

/* Student info text */
.student-info-text[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 13px;
  margin: 8px 0 0 0;
}
.student-info-text strong[data-v-6152dbd6] {
  color: #334155;
}

/* Approver card */
.approver-card .action-title[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.approved-badge[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 12px;
  color: #22c55e;
  font-weight: 600;
}
.approval-comment[data-v-6152dbd6] {
  margin-bottom: 16px;
}
.comment-label[data-v-6152dbd6] {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 6px;
}
.comment-input[data-v-6152dbd6] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #334155;
  border-radius: 8px;
  background: #1e293b;
  color: white;
  font-size: 13px;
  resize: none;
  outline: none;
  transition: border-color 0.2s;
}
.comment-input[data-v-6152dbd6]:focus {
  border-color: #60a5fa;
}
.comment-input[data-v-6152dbd6]::placeholder {
  color: #64748b;
}
.approval-buttons[data-v-6152dbd6] {
  display: flex;
  gap: 12px;
}
.approve-btn[data-v-6152dbd6],
.decline-btn[data-v-6152dbd6] {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}
.approve-btn[data-v-6152dbd6] {
  background: #22c55e;
  color: white;
  box-shadow: 0 10px 20px rgba(34, 197, 94, 0.3);
}
.approve-btn[data-v-6152dbd6]:hover:not(.disabled) {
  background: #16a34a;
}
.decline-btn[data-v-6152dbd6] {
  background: #334155;
  color: #f87171;
}
.decline-btn[data-v-6152dbd6]:hover:not(.disabled) {
  background: #475569;
}
.approve-btn.disabled[data-v-6152dbd6],
.decline-btn.disabled[data-v-6152dbd6] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Approver View Styles */
.approver-view[data-v-6152dbd6] {
  width: 100%;
}
.students-approval-list[data-v-6152dbd6] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.student-approval-card[data-v-6152dbd6] {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
.student-approval-header[data-v-6152dbd6] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
}
@media (min-width: 640px) {
.student-approval-header[data-v-6152dbd6] {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
}
.student-info-block[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 14px;
}
.student-avatar-box[data-v-6152dbd6] {
  flex-shrink: 0;
}
.student-avatar[data-v-6152dbd6] {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.student-name[data-v-6152dbd6] {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}
.student-position[data-v-6152dbd6] {
  font-size: 13px;
  color: #64748b;
  margin: 4px 0 0 0;
}
.status-badge[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.status-badge.status-approved[data-v-6152dbd6] {
  background: #dcfce7;
  color: #15803d;
}
.status-badge.status-pending[data-v-6152dbd6] {
  background: #fef3c7;
  color: #b45309;
}
.student-experts-section[data-v-6152dbd6] {
  padding: 20px;
  background: white;
}
.experts-header[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
}
.min-badge-small[data-v-6152dbd6] {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: auto;
}
.experts-list[data-v-6152dbd6] {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.expert-item[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  min-width: 180px;
  flex: 1;
  max-width: 280px;
}
.expert-avatar[data-v-6152dbd6] {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.expert-info[data-v-6152dbd6] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.expert-name[data-v-6152dbd6] {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.expert-position[data-v-6152dbd6] {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.no-experts[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: #fffbeb;
  border: 1px dashed #fbbf24;
  border-radius: 10px;
  color: #b45309;
  font-size: 13px;
  width: 100%;
}
.student-approval-actions[data-v-6152dbd6] {
  padding: 16px 20px;
  background: #0f172a;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 640px) {
.student-approval-actions[data-v-6152dbd6] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
}
.approval-info-text[data-v-6152dbd6] {
  font-size: 12px;
  color: #94a3b8;
  flex: 1;
}
.approval-toggle-section[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.approved-status-info[data-v-6152dbd6],
.pending-status-info[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
}
.approved-status-info[data-v-6152dbd6] {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}
.pending-status-info[data-v-6152dbd6] {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}
.approved-message[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #22c55e;
  font-weight: 600;
  font-size: 14px;
}
.approval-comment-inline[data-v-6152dbd6] {
  flex: 1;
}
.comment-input-inline[data-v-6152dbd6] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #334155;
  border-radius: 8px;
  background: #1e293b;
  color: white;
  font-size: 13px;
  resize: none;
  outline: none;
  transition: border-color 0.2s;
}
.comment-input-inline[data-v-6152dbd6]:focus {
  border-color: #60a5fa;
}
.comment-input-inline[data-v-6152dbd6]::placeholder {
  color: #64748b;
}
.approval-buttons-inline[data-v-6152dbd6] {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.approve-btn-inline[data-v-6152dbd6],
.decline-btn-inline[data-v-6152dbd6] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.approve-btn-inline[data-v-6152dbd6] {
  background: #22c55e;
  color: white;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
.approve-btn-inline[data-v-6152dbd6]:hover:not(.disabled) {
  background: #16a34a;
}
.decline-btn-inline[data-v-6152dbd6] {
  background: #334155;
  color: #f87171;
}
.decline-btn-inline[data-v-6152dbd6]:hover:not(.disabled) {
  background: #475569;
}
.approve-btn-inline.disabled[data-v-6152dbd6],
.decline-btn-inline.disabled[data-v-6152dbd6] {
  opacity: 0.6;
  cursor: not-allowed;
}
.no-students-message[data-v-6152dbd6] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px dashed #e2e8f0;
  color: #64748b;
  font-size: 14px;
}


.loading-state[data-v-3a86988a] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.loader[data-v-3a86988a] {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, var(--q-accent) 20%, var(--q-info));
  border-top-color: var(--q-primary);
  border-radius: 50%;
  animation: spin-3a86988a 0.8s linear infinite;
}
@keyframes spin-3a86988a {
to {
    transform: rotate(360deg);
}
}
.settings-container[data-v-3a86988a] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: fadeIn-3a86988a 0.5s ease-in-out;
}
@keyframes fadeIn-3a86988a {
from {
    opacity: 0;
    transform: translateY(16px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.header-card[data-v-3a86988a] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-icon-box[data-v-3a86988a] {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-primary);
}
.header-title[data-v-3a86988a] {
  font-size: 24px;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
  line-height: 30px;
}
.header-subtitle[data-v-3a86988a] {
  font-size: 14px;
  color: var(--q-positive);
  margin: 4px 0 0 0;
}
.settings-card[data-v-3a86988a] {
  background: var(--q-info);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.settings-list[data-v-3a86988a] {
}
.setting-item[data-v-3a86988a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid var(--q-dark);
  transition: background 0.2s;
}
.setting-item[data-v-3a86988a]:last-child {
  border-bottom: none;
}
.setting-item[data-v-3a86988a]:hover {
  background: color-mix(in srgb, var(--q-dark) 50%, transparent);
}
.setting-item-disabled[data-v-3a86988a] {
  opacity: 0.7;
}
.setting-content[data-v-3a86988a] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.setting-icon[data-v-3a86988a] {
  padding: 8px;
  border-radius: 12px;
  transition: all 0.2s;
  background: var(--q-dark);
  color: var(--q-positive);
}
.setting-icon-active[data-v-3a86988a] {
  background: color-mix(in srgb, var(--q-primary) 15%, var(--q-info));
  color: var(--q-primary);
}
.setting-label[data-v-3a86988a] {
  font-weight: 500;
  transition: color 0.2s;
  color: var(--q-positive);
}
.setting-label-active[data-v-3a86988a] {
  color: var(--q-accent);
}
.toggle-switch[data-v-3a86988a] {
  position: relative;
  width: 48px;
  height: 24px;
  border-radius: 9999px;
  transition: background 0.2s;
  cursor: pointer;
  border: none;
  background: color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
}
.toggle-switch[data-v-3a86988a]:focus {
  outline: 2px solid var(--q-primary);
  outline-offset: 2px;
}
.toggle-active[data-v-3a86988a] {
  background: var(--q-primary);
}
.toggle-disabled[data-v-3a86988a] {
  cursor: not-allowed;
  opacity: 0.5;
}
.toggle-thumb[data-v-3a86988a] {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--q-info);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}
.toggle-thumb-active[data-v-3a86988a] {
  transform: translateX(24px);
}
.settings-footer[data-v-3a86988a] {
  background: var(--q-dark);
  padding: 18px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  display: flex;
  justify-content: flex-end;
}
.btn-primary[data-v-3a86988a] {
  background: var(--q-primary) !important;
  color: var(--q-info) !important;
  border-radius: 10px;
  font-weight: 600;
  padding: 8px 16px;
  box-shadow: 0 4px 8px color-mix(in srgb, var(--q-primary) 15%, transparent);
}
.save-btn[data-v-3a86988a] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 700;
  color: var(--q-info);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  background: var(--q-primary);
}
.save-btn[data-v-3a86988a]:hover {
  background: color-mix(in srgb, var(--q-primary) 85%, black);
}
.save-btn-saved[data-v-3a86988a] {
  background: var(--q-success);
}
.save-btn-saved[data-v-3a86988a]:hover {
  background: color-mix(in srgb, var(--q-success) 85%, black);
}


/* ==================== Layout ==================== */
.reports-view[data-v-586f60e4] {
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 80px;
}

/* ==================== Header ==================== */
.header-card[data-v-586f60e4] {
  margin-bottom: 24px;
  border-radius: 16px;
}
.header-card[data-v-586f60e4] .q-card__section {
  padding: 24px;
  gap: 16px;
}
.header-icon[data-v-586f60e4] {
  width: 48px;
  height: 48px;
  background-color: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border-radius: 12px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.header-title[data-v-586f60e4] {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--q-accent);
}
.header-subtitle[data-v-586f60e4] {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--q-positive);
}

/* ==================== Section Cards ==================== */
.section-card[data-v-586f60e4] {
  margin-bottom: 24px;
  border-radius: 16px;
}
.section-card[data-v-586f60e4] .q-card__section {
  padding: 24px;
}
.section-card-compact[data-v-586f60e4] .q-card__section {
  padding: 16px;
}
.section-title[data-v-586f60e4] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--q-accent);
}

/* ==================== Form Fields ==================== */
.field-label[data-v-586f60e4] {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--q-positive);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.required-mark[data-v-586f60e4] {
  color: var(--q-warning);
}
.field-input[data-v-586f60e4] {
  margin-top: 8px;
}
.field-input[data-v-586f60e4] .q-field__control,
.field-select[data-v-586f60e4] .q-field__control,
.date-field[data-v-586f60e4] .q-field__control {
  background-color: var(--q-dark);
  border-radius: 12px;
}
.field-input[data-v-586f60e4] .q-field__control:hover,
.field-select[data-v-586f60e4] .q-field__control:hover,
.date-field[data-v-586f60e4] .q-field__control:hover {
  background-color: var(--q-info);
}
.date-separator[data-v-586f60e4] {
  color: var(--q-positive);
  font-size: 14px;
}

/* ==================== Toggle Card ==================== */
.toggle-card[data-v-586f60e4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0px 16px;
  background-color: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.toggle-card[data-v-586f60e4]:hover {
  background-color: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.toggle-content[data-v-586f60e4] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toggle-label[data-v-586f60e4] {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--q-accent);
}

/* ==================== Audience Buttons ==================== */
.audience-btn[data-v-586f60e4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 14px 8px;
  background-color: var(--q-dark);
  border: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.audience-btn[data-v-586f60e4]:hover:not(:disabled) {
  background-color: var(--q-info);
  border-color: color-mix(in srgb, var(--q-primary) 40%, var(--q-info));
}
.audience-btn[data-v-586f60e4]:hover:not(:disabled) .q-icon {
  color: var(--q-primary) !important;
}
.audience-btn[data-v-586f60e4]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.audience-btn-label[data-v-586f60e4] {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--q-positive);
}

/* ==================== Add Item Button (Course/Test) ==================== */
.add-item-btn[data-v-586f60e4] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background-color: var(--q-dark);
  border: 1px dashed color-mix(in srgb, var(--q-accent) 25%, var(--q-info));
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.add-item-btn[data-v-586f60e4]:hover:not(:disabled) {
  background-color: var(--q-info);
  border-color: var(--q-primary);
  border-style: solid;
}
.add-item-btn[data-v-586f60e4]:hover:not(:disabled) .q-icon {
  color: var(--q-primary) !important;
}
.add-item-btn[data-v-586f60e4]:disabled {
  opacity: 0.7;
  cursor: wait;
}
.add-item-btn-label[data-v-586f60e4] {
  font-size: 14px;
  font-weight: 500;
  color: var(--q-positive);
}
.add-item-btn:hover:not(:disabled) .add-item-btn-label[data-v-586f60e4] {
  color: var(--q-primary);
}

/* Selected Items List (Course/Test) */
.selected-items-list[data-v-586f60e4] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.selected-item-chip[data-v-586f60e4] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background-color: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  border: 1px solid color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
  border-radius: 10px;
}
.selected-item-name[data-v-586f60e4] {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--q-primary);
  line-height: 1.3;
}
.remove-item-btn[data-v-586f60e4] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--q-positive);
  transition: all 0.15s ease;
}
.remove-item-btn[data-v-586f60e4]:hover {
  background-color: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}

/* ==================== Selected Users Section ==================== */
.selected-users-section[data-v-586f60e4] {
  margin-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
  padding-top: 16px;
}
.selected-users-header[data-v-586f60e4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.selected-users-count[data-v-586f60e4] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--q-positive);
}
.clear-all-btn[data-v-586f60e4] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--q-warning) 10%, var(--q-info));
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--q-warning);
  cursor: pointer;
  transition: all 0.2s ease;
}
.clear-all-btn[data-v-586f60e4]:hover {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
}
.selected-users-list[data-v-586f60e4] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.selected-user-item[data-v-586f60e4] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--q-dark);
  border-radius: 10px;
  transition: all 0.2s ease;
}
.selected-user-item[data-v-586f60e4]:hover {
  background: color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.user-avatar[data-v-586f60e4] {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--q-info);
  flex-shrink: 0;
}
.avatar-blue[data-v-586f60e4] {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}
.avatar-green[data-v-586f60e4] {
  background: linear-gradient(135deg, #22c55e, #15803d);
}
.avatar-purple[data-v-586f60e4] {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
}
.avatar-orange[data-v-586f60e4] {
  background: linear-gradient(135deg, #f97316, #ea580c);
}
.avatar-pink[data-v-586f60e4] {
  background: linear-gradient(135deg, #ec4899, #db2777);
}
.user-info[data-v-586f60e4] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.user-name[data-v-586f60e4] {
  font-size: 13px;
  font-weight: 600;
  color: var(--q-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-position[data-v-586f60e4] {
  font-size: 11px;
  color: var(--q-positive);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remove-user-btn[data-v-586f60e4] {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--q-positive);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.remove-user-btn[data-v-586f60e4]:hover {
  background: color-mix(in srgb, var(--q-warning) 15%, var(--q-info));
  color: var(--q-warning);
}
.selected-users-empty[data-v-586f60e4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--q-positive);
  font-size: 12px;
  font-weight: 500;
}

/* ==================== Action Card ==================== */
.action-card[data-v-586f60e4] {
  position: sticky;
  top: 96px;
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}
.action-card[data-v-586f60e4] .q-card__section {
  padding: 32px;
}
.action-title[data-v-586f60e4] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--q-accent);
}
.action-description[data-v-586f60e4] {
  margin: 0 0 32px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--q-positive);
}
.action-btn[data-v-586f60e4] {
  width: 100%;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 700;
  background-color: var(--q-primary) !important;
  color: var(--q-info) !important;
  box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--q-primary) 25%, transparent);
  transition: all 0.2s ease;
  transform: translateZ(0);
}
.action-btn[data-v-586f60e4]:hover:not(.disabled) {
  background-color: color-mix(in srgb, var(--q-primary) 85%, black) !important;
}
.action-btn[data-v-586f60e4]:active:not(.disabled) {
  transform: scale(0.95);
}
.action-btn.disabled[data-v-586f60e4] {
  background-color: var(--q-dark) !important;
  color: var(--q-positive) !important;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1 !important;
}
.action-btn[data-v-586f60e4] .q-spinner {
  color: var(--q-info);
}

/* ==================== Results Card ==================== */
.results-card[data-v-586f60e4] {
  margin-top: 24px;
  border-radius: 24px;
  overflow: hidden;
}

/* ==================== Table Controls ==================== */
.table-controls[data-v-586f60e4] {
  padding: 20px 24px;
  background-color: var(--q-dark);
}
.search-field[data-v-586f60e4] .q-field__control {
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.control-btn[data-v-586f60e4] {
  gap: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}
.export-btn[data-v-586f60e4] {
  gap: 8px;
  padding: 8px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 6px -1px rgba(34, 197, 94, 0.2);
}

/* ==================== Column Menu ==================== */
.column-menu[data-v-586f60e4] {
  min-width: 224px;
  padding: 8px;
}
.column-menu-header[data-v-586f60e4] {
  padding: 10px 14px;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--q-positive);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.column-menu-item[data-v-586f60e4] {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
.column-checkbox[data-v-586f60e4] {
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--q-accent) 15%, var(--q-info));
  border-radius: 50%;
}

/* ==================== Data Table ==================== */
.data-table[data-v-586f60e4] th {
  padding: 14px 24px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--q-positive);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background-color: var(--q-dark);
}
.data-table[data-v-586f60e4] td {
  padding: 16px 24px;
}
.data-table[data-v-586f60e4] tbody tr {
  transition: background-color 0.15s ease;
}
.data-table[data-v-586f60e4] tbody tr:hover {
  background-color: var(--q-dark);
}

/* ==================== Badges ==================== */
.badge-status[data-v-586f60e4] {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.badge-complete[data-v-586f60e4] {
  background-color: color-mix(in srgb, var(--q-success) 10%, var(--q-info));
  color: var(--q-success);
  border-color: color-mix(in srgb, var(--q-success) 30%, var(--q-info));
}
.badge-progress[data-v-586f60e4] {
  background-color: color-mix(in srgb, var(--q-primary) 10%, var(--q-info));
  color: var(--q-primary);
  border-color: color-mix(in srgb, var(--q-primary) 30%, var(--q-info));
}

/* ==================== Table Footer ==================== */
.table-footer[data-v-586f60e4] {
  padding: 14px 24px;
  background-color: var(--q-dark);
  border-top: 1px solid color-mix(in srgb, var(--q-accent) 10%, var(--q-info));
}
.table-footer-content[data-v-586f60e4] {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--q-positive);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.table-empty[data-v-586f60e4] {
  padding: 64px 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: var(--q-positive);
}

/* ==================== Empty State ==================== */
.empty-card[data-v-586f60e4] {
  margin-top: 24px;
  border-radius: 24px;
  border-style: dashed;
}
.empty-content[data-v-586f60e4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 24px;
  text-align: center;
}
.empty-title[data-v-586f60e4] {
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--q-positive);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.empty-subtitle[data-v-586f60e4] {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--q-positive);
}
.full-height[data-v-586f60e4] {
  height: 100%;
}

/* ==================== Sticky Header Table ==================== */
.my-sticky-header-table[data-v-586f60e4] {
  max-height: 810px;
}
.my-sticky-header-table[data-v-586f60e4] .q-table__top,
.my-sticky-header-table[data-v-586f60e4] .q-table__bottom,
.my-sticky-header-table[data-v-586f60e4] thead tr:first-child th {
  background-color: var(--q-dark);
}
.my-sticky-header-table[data-v-586f60e4] thead tr th {
  position: sticky;
  z-index: 1;
}
.my-sticky-header-table[data-v-586f60e4] thead tr:first-child th {
  top: 0;
}
.my-sticky-header-table.q-table--loading[data-v-586f60e4] thead tr:last-child th {
  top: 50px;
}
.my-sticky-header-table[data-v-586f60e4] tbody {
  scroll-margin-top: 50px;
}
.table-container[data-v-586f60e4] {
  margin-top: 20px;
}

.full-page-loader[data-v-988de74a] {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
.particles[data-v-988de74a] {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.particle[data-v-988de74a] {
  position: absolute;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #f9a8b8, #e11d48);
  border-radius: 50%;
  opacity: 0.4;
  animation: float-988de74a 4s ease-in-out infinite;
  animation-delay: var(--delay);
}
.particle[data-v-988de74a]:nth-child(1) {
  top: 20%;
  left: 15%;
}
.particle[data-v-988de74a]:nth-child(2) {
  top: 60%;
  left: 10%;
}
.particle[data-v-988de74a]:nth-child(3) {
  top: 80%;
  left: 25%;
}
.particle[data-v-988de74a]:nth-child(4) {
  top: 15%;
  right: 20%;
}
.particle[data-v-988de74a]:nth-child(5) {
  top: 50%;
  right: 15%;
}
.particle[data-v-988de74a]:nth-child(6) {
  top: 75%;
  right: 25%;
}
@keyframes float-988de74a {
0%, 100% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.4;
}
50% {
    transform: translateY(-20px) translateX(var(--x, 10px)) scale(1.2);
    opacity: 0.7;
}
}
.loader-content[data-v-988de74a] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeInUp-988de74a 0.6s ease-out;
}
@keyframes fadeInUp-988de74a {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.spinner-container[data-v-988de74a] {
  position: relative;
  width: 96px;
  height: 96px;
}
.spinner-ring[data-v-988de74a] {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid #fecdd6;
  border-top-color: #e11d48;
  animation: spin-988de74a 1.2s linear infinite;
}
.orbit[data-v-988de74a] {
  position: absolute;
  inset: -8px;
  animation: spin-988de74a 3s linear infinite;
}
.orbit-dot[data-v-988de74a] {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #e11d48;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 8px rgba(var(--q-primary-rgb, 225, 29, 72), 0.5);
}
.orbit-dot[data-v-988de74a]:nth-child(1) {
  transform: rotate(0deg) translateX(56px) translateY(-50%);
  animation: orbit-pulse-988de74a 1.5s ease-in-out infinite;
}
.orbit-dot[data-v-988de74a]:nth-child(2) {
  transform: rotate(120deg) translateX(56px) translateY(-50%);
  animation: orbit-pulse-988de74a 1.5s ease-in-out 0.5s infinite;
  opacity: 0.7;
  width: 6px;
  height: 6px;
}
.orbit-dot[data-v-988de74a]:nth-child(3) {
  transform: rotate(240deg) translateX(56px) translateY(-50%);
  animation: orbit-pulse-988de74a 1.5s ease-in-out 1s infinite;
  opacity: 0.4;
  width: 4px;
  height: 4px;
}
@keyframes orbit-pulse-988de74a {
0%, 100% {
    box-shadow: 0 0 8px rgba(var(--q-primary-rgb, 225, 29, 72), 0.5);
}
50% {
    box-shadow: 0 0 16px rgba(var(--q-primary-rgb, 225, 29, 72), 0.8);
}
}
@keyframes spin-988de74a {
to {
    transform: rotate(360deg);
}
}
.logo-center[data-v-988de74a] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #e11d48, #be123c);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px -5px rgba(var(--q-primary-rgb, 225, 29, 72), 0.4);
  animation: breathe-988de74a 2s ease-in-out infinite;
}
.logo-letter[data-v-988de74a] {
  color: #ffffff;
  font-weight: bold;
  font-size: 1.25rem;
  z-index: 1;
}
.logo-glow[data-v-988de74a] {
  position: absolute;
  inset: -4px;
  background: radial-gradient(circle, rgba(225, 29, 72, 0.3) 0%, transparent 70%);
  border-radius: 16px;
  animation: glow-pulse-988de74a 2s ease-in-out infinite;
}
@keyframes breathe-988de74a {
0%, 100% {
    transform: translate(-50%, -50%) scale(1);
}
50% {
    transform: translate(-50%, -50%) scale(1.05);
}
}
@keyframes glow-pulse-988de74a {
0%, 100% {
    opacity: 0.5;
    transform: scale(1);
}
50% {
    opacity: 1;
    transform: scale(1.15);
}
}
.text-content[data-v-988de74a] {
  text-align: center;
  max-width: 320px;
  padding: 0 1rem;
  margin-top: 0.5rem;
}
.title[data-v-988de74a] {
  font-size: 1.5rem;
  font-weight: bold;
  color: #0f172a;
  letter-spacing: -0.025em;
  margin: 0 0 0.75rem 0;
}
.title .word[data-v-988de74a] {
  display: inline-block;
  animation: slideIn-988de74a 0.5s ease-out 0.2s both;
}
.title .accent[data-v-988de74a] {
  color: #e11d48;
  display: inline-block;
  animation: slideIn-988de74a 0.5s ease-out 0.4s both;
}
@keyframes slideIn-988de74a {
from {
    opacity: 0;
    transform: translateX(-10px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}
.loading-dots[data-v-988de74a] {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.dot[data-v-988de74a] {
  width: 6px;
  height: 6px;
  background: #e11d48;
  border-radius: 50%;
  animation: bounce-988de74a 1.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.15s);
}
@keyframes bounce-988de74a {
0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
}
40% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes twinkle-988de74a {
0%, 100% {
    opacity: 0.3;
    transform: scale(0.8) rotate(0deg);
}
50% {
    opacity: 1;
    transform: scale(1.2) rotate(15deg);
}
}

[data-v-13383cbf] {
  box-sizing: border-box;
}
.app-container[data-v-13383cbf] {
  min-height: 100vh;
  background-color: var(--q-dark);
  display: flex;
  flex-direction: column;
  color: var(--q-accent);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Header */
.app-header[data-v-13383cbf] {
  background: var(--q-info);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.header-toolbar[data-v-13383cbf] {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 0.5rem;
  max-width: 1440px;
  margin: 0 auto;
}
@media (min-width: 768px) {
.header-toolbar[data-v-13383cbf] {
    padding: 0 0.75rem;
}
}
.logo-link[data-v-13383cbf] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: opacity 0.2s;
}
.logo-link[data-v-13383cbf]:hover {
  opacity: 0.8;
}
.logo-box[data-v-13383cbf] {
  width: 32px;
  height: 32px;
  background: var(--q-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 18px;
}
.logo-text[data-v-13383cbf] {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--q-accent);
  white-space: nowrap;
}
.custom-logo[data-v-13383cbf] {
  height: 32px;
  width: 32px;
  object-fit: contain;
  border-radius: 8px;
}
.logo-accent[data-v-13383cbf] {
  color: var(--q-primary);
}
.header-spacer[data-v-13383cbf] {
  flex: 1;
}
.search-container[data-v-13383cbf] {
  max-width: 512px;
  display: none;
  margin: 0 0.5rem;
}
@media (min-width: 768px) {
.search-container[data-v-13383cbf] {
    display: block;
    margin: 0 0.75rem;
}
}
.search-input-wrapper[data-v-13383cbf] {
  position: relative;
  display: flex;
  align-items: center;
}
.search-icon[data-v-13383cbf] {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  color: var(--q-positive);
}
.search-input[data-v-13383cbf] {
  width: 100%;
  padding: 0.5rem 1rem 0.5rem 2.5rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 9999px;
  background: var(--q-dark);
  font-size: 0.875rem;
  color: var(--q-accent);
}
.search-input[data-v-13383cbf]:focus {
  outline: none;
  border-color: var(--q-primary);
  background: var(--q-info);
}
.header-actions[data-v-13383cbf] {
  display: flex;
  align-items: center;
  gap: 2px;
}
@media (min-width: 768px) {
.header-actions[data-v-13383cbf] {
    gap: 0.25rem;
}
}
.icon-btn[data-v-13383cbf] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
  transition: all 0.2s;
}
.icon-btn[data-v-13383cbf]:hover {
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 10%, white);
}
.old-interface-btn[data-v-13383cbf] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--q-positive);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
@media (min-width: 1024px) {
.old-interface-btn[data-v-13383cbf] {
    width: auto;
    height: auto;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 9999px;
    border: 1px solid var(--q-positive);
}
}
.old-interface-label[data-v-13383cbf] {
  display: none;
}
@media (min-width: 1024px) {
.old-interface-label[data-v-13383cbf] {
    display: inline;
}
}
.old-interface-btn[data-v-13383cbf]:hover {
  color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 10%, white);
}
@media (min-width: 1024px) {
.old-interface-btn[data-v-13383cbf]:hover {
    border-color: var(--q-primary);
}
}
.logout-btn[data-v-13383cbf] {
  margin-left: 0.25rem;
}
.logout-btn[data-v-13383cbf]:hover {
  color: var(--q-warning);
  background: color-mix(in srgb, var(--q-warning) 10%, white);
}
.icon-btn svg[data-v-13383cbf] {
  width: 20px;
  height: 20px;
}
.header-separator[data-v-13383cbf] {
  display: none;
  width: 1px;
  height: 24px;
  background: rgba(0, 0, 0, 0.1);
  margin: 0 0.25rem;
}
@media (min-width: 640px) {
.header-separator[data-v-13383cbf] {
    display: block;
}
}
.role-switcher[data-v-13383cbf] {
  display: none;
  background: var(--q-dark);
  border-radius: 9999px;
  padding: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
@media (min-width: 640px) {
.role-switcher[data-v-13383cbf] {
    display: flex;
}
}
.role-btn[data-v-13383cbf] {
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--q-positive);
  cursor: pointer;
  transition: all 0.2s;
}
.role-btn.active[data-v-13383cbf] {
  background: var(--q-info);
  color: var(--q-primary);
}
.user-profile-btn[data-v-13383cbf] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 4px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
}
.user-profile-btn[data-v-13383cbf]:hover {
  background: var(--q-dark);
}
.user-avatar[data-v-13383cbf] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
  overflow: hidden;
}
.avatar-img[data-v-13383cbf] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-avatar svg[data-v-13383cbf] {
  width: 18px;
  height: 18px;
}
.user-info[data-v-13383cbf] {
  display: none;
  text-align: left;
}
@media (min-width: 1024px) {
.user-info[data-v-13383cbf] {
    display: block;
}
}
.user-name[data-v-13383cbf] {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0;
}
.user-role-text[data-v-13383cbf] {
  font-size: 0.625rem;
  color: var(--q-positive);
  text-transform: uppercase;
  margin: 0;
}

/* Responsive utilities */
.hide-mobile[data-v-13383cbf] {
  display: none;
}
@media (min-width: 640px) {
.hide-mobile[data-v-13383cbf] {
    display: inline;
}
}

/* Modals */
.modal-overlay[data-v-13383cbf] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.modal-card[data-v-13383cbf] {
  background: var(--q-info);
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-height: 90vh;
  overflow: auto;
}
.sitemap-modal[data-v-13383cbf] {
  width: 100%;
  max-width: 800px;
}
.approval-modal[data-v-13383cbf] {
  width: 100%;
  max-width: 500px;
}
.modal-header[data-v-13383cbf] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.modal-title[data-v-13383cbf] {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--q-accent);
  margin: 0;
}
.modal-close[data-v-13383cbf] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-positive);
}
.modal-close[data-v-13383cbf]:hover {
  background: var(--q-dark);
}
.modal-close svg[data-v-13383cbf] {
  width: 20px;
  height: 20px;
}
.modal-body[data-v-13383cbf] {
  padding: 1rem;
}
.modal-footer[data-v-13383cbf] {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.text-muted[data-v-13383cbf] {
  color: var(--q-positive);
}
.approval-item-label[data-v-13383cbf] {
  color: var(--q-positive);
  margin-bottom: 1rem;
}
.form-group[data-v-13383cbf] {
  margin-top: 1rem;
}
.form-label[data-v-13383cbf] {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--q-positive);
  margin-bottom: 0.5rem;
}
.form-textarea[data-v-13383cbf] {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-size: 0.875rem;
  resize: vertical;
}
.form-textarea[data-v-13383cbf]:focus {
  outline: none;
  border-color: var(--q-primary);
}
.btn[data-v-13383cbf] {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
}
.btn-secondary[data-v-13383cbf] {
  background: var(--q-dark);
  color: var(--q-positive);
}
.btn-secondary[data-v-13383cbf]:hover {
  background: rgba(0, 0, 0, 0.1);
}
.btn-success[data-v-13383cbf] {
  background: #22c55e;
  color: white;
}
.btn-success[data-v-13383cbf]:hover {
  background: #16a34a;
}
.btn-danger[data-v-13383cbf] {
  background: #ef4444;
  color: white;
}
.btn-danger[data-v-13383cbf]:hover {
  background: #dc2626;
}

/* Main Content */
.main-content[data-v-13383cbf] {
  padding: 1rem 0.75rem;
}
.container[data-v-13383cbf] {
  max-width: 1280px;
  margin: 0 auto;
}
.header-section[data-v-13383cbf] {
  margin-bottom: 1rem;
}
.breadcrumbs[data-v-13383cbf] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--q-positive);
  margin-bottom: 0.5rem;
}
.breadcrumb-btn[data-v-13383cbf] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--q-positive);
}
.breadcrumb-btn[data-v-13383cbf]:hover {
  color: var(--q-primary);
}
.breadcrumb-active[data-v-13383cbf] {
  font-weight: 600;
  color: var(--q-accent);
}
.breadcrumb-icon[data-v-13383cbf] {
  width: 14px;
  height: 14px;
}
.breadcrumb-separator[data-v-13383cbf] {
  width: 14px;
  height: 14px;
  color: rgba(0, 0, 0, 0.2);
}
.page-header[data-v-13383cbf] {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.page-title[data-v-13383cbf] {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--q-accent);
  line-height: 40px;
  margin: 0;
}
.page-description[data-v-13383cbf] {
  color: var(--q-positive);
  margin: 0.25rem 0 0;
}
.header-controls[data-v-13383cbf] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.view-toggle[data-v-13383cbf] {
  display: flex;
  background: var(--q-info);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 4px;
}
.toggle-btn[data-v-13383cbf] {
  padding: 6px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--q-positive);
  display: flex;
  align-items: center;
  justify-content: center;
}
.toggle-btn[data-v-13383cbf]:hover:not(:disabled) {
  color: var(--q-accent);
}
.toggle-btn[data-v-13383cbf]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.toggle-active[data-v-13383cbf] {
  background: var(--q-dark);
  color: var(--q-primary);
}
.toggle-btn svg[data-v-13383cbf] {
  width: 18px;
  height: 18px;
}
.back-btn[data-v-13383cbf] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--q-positive);
}
.back-btn[data-v-13383cbf]:hover {
  color: var(--q-accent);
  background: rgba(0, 0, 0, 0.1);
}
.back-btn svg[data-v-13383cbf] {
  width: 16px;
  height: 16px;
}
.content-grid[data-v-13383cbf] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}
@media (min-width: 1024px) {
.content-grid.with-feed[data-v-13383cbf] {
    grid-template-columns: 2fr 1fr;
}
}
.main-column[data-v-13383cbf] {
  min-width: 0;
}
.feed-column[data-v-13383cbf] {
  min-width: 0;
}
.feed-wrapper[data-v-13383cbf] {
  position: sticky;
  top: 96px;
  height: calc(100vh - 12rem);
}
.tiles-grid[data-v-13383cbf] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  padding: 8px;
  margin: -8px;
}
@media (min-width: 640px) {
.tiles-grid[data-v-13383cbf] {
    grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.tiles-grid[data-v-13383cbf] {
    grid-template-columns: repeat(3, 1fr);
}
}
.tiles-list[data-v-13383cbf] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 8px;
  margin: -8px;
}
.empty-state[data-v-13383cbf] {
  background: var(--q-info);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  border: 2px dashed rgba(0, 0, 0, 0.2);
}
.empty-icon-wrapper[data-v-13383cbf] {
  width: 64px;
  height: 64px;
  background: var(--q-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.empty-icon[data-v-13383cbf] {
  width: 32px;
  height: 32px;
  color: var(--q-positive);
}
.empty-title[data-v-13383cbf] {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--q-accent);
  margin: 0 0 0.5rem;
}
.empty-text[data-v-13383cbf] {
  color: var(--q-positive);
  margin: 0 0 1.5rem;
}
.empty-back-btn[data-v-13383cbf] {
  padding: 0.5rem 1rem;
  background: var(--q-primary);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
}
.empty-back-btn[data-v-13383cbf]:hover {
  background: color-mix(in srgb, var(--q-primary) 85%, black);
}
.error-state[data-v-13383cbf] {
  text-align: center;
  padding: 2rem;
}
.error-icon[data-v-13383cbf] {
  width: 64px;
  height: 64px;
  color: var(--q-positive);
  margin-bottom: 1rem;
}
.error-text[data-v-13383cbf] {
  font-size: 1.125rem;
  color: var(--q-positive);
}
.completion-screen[data-v-13383cbf] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
  text-align: center;
  animation: fadeInZoom-13383cbf 0.5s ease-out;
}
@keyframes fadeInZoom-13383cbf {
from {
    opacity: 0;
    transform: scale(0.95);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
.completion-icon[data-v-13383cbf] {
  width: 96px;
  height: 96px;
  background: #dcfce7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16a34a;
  margin-bottom: 1.5rem;
}
.completion-icon svg[data-v-13383cbf] {
  width: 48px;
  height: 48px;
}
.completion-title[data-v-13383cbf] {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--q-accent);
  margin: 0 0 0.5rem;
}
.completion-text[data-v-13383cbf] {
  font-size: 1.25rem;
  color: var(--q-positive);
  margin: 0 0 2rem;
  max-width: 28rem;
}
.completion-progress-card[data-v-13383cbf] {
  background: var(--q-info);
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 28rem;
  margin-bottom: 1.5rem;
}
.progress-header[data-v-13383cbf] {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.progress-label[data-v-13383cbf] {
  color: var(--q-positive);
}
.progress-value[data-v-13383cbf] {
  font-weight: 700;
  color: #16a34a;
}
.progress-bar-container[data-v-13383cbf] {
  width: 100%;
  background: var(--q-dark);
  border-radius: 9999px;
  height: 12px;
  overflow: hidden;
}
.progress-bar-fill[data-v-13383cbf] {
  height: 100%;
  background: var(--q-secondary);
  border-radius: 9999px;
}
.progress-bar-fill.full[data-v-13383cbf] {
  width: 100%;
}
.completion-btn[data-v-13383cbf] {
  padding: 1rem 2rem;
  background: var(--q-accent);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
}
.completion-btn[data-v-13383cbf]:hover {
  background: color-mix(in srgb, var(--q-accent) 85%, black);
  transform: translateY(-2px);
}
.approve-btn[data-v-13383cbf],
.reject-btn[data-v-13383cbf] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.approve-btn[data-v-13383cbf] {
  background: color-mix(in srgb, var(--q-secondary) 10%, white);
  color: var(--q-secondary);
  border: 1px solid color-mix(in srgb, var(--q-secondary) 30%, white);
}
.approve-btn[data-v-13383cbf]:hover {
  background: color-mix(in srgb, var(--q-secondary) 20%, white);
}
.reject-btn[data-v-13383cbf] {
  background: color-mix(in srgb, var(--q-warning) 10%, white);
  color: var(--q-warning);
  border: 1px solid color-mix(in srgb, var(--q-warning) 30%, white);
}
.reject-btn[data-v-13383cbf]:hover {
  background: color-mix(in srgb, var(--q-warning) 20%, white);
}
.approve-btn svg[data-v-13383cbf],
.reject-btn svg[data-v-13383cbf] {
  width: 14px;
  height: 14px;
}

/* Notifications */
.notifications-container[data-v-13383cbf] {
  position: fixed;
  top: 72px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}
.notification-toast[data-v-13383cbf] {
  background: var(--q-info);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  min-width: 300px;
  max-width: 400px;
  pointer-events: auto;
  border-left: 4px solid;
}
.notification-success[data-v-13383cbf] {
  border-left-color: #10b981;
  background: color-mix(in srgb, #10b981 5%, var(--q-info));
}
.notification-warning[data-v-13383cbf] {
  border-left-color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 5%, var(--q-info));
}
.notification-error[data-v-13383cbf] {
  border-left-color: #ef4444;
  background: color-mix(in srgb, #ef4444 5%, var(--q-info));
}
.notification-info[data-v-13383cbf] {
  border-left-color: var(--q-primary);
  background: color-mix(in srgb, var(--q-primary) 5%, var(--q-info));
}
.notification-content[data-v-13383cbf] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.notification-icon[data-v-13383cbf] {
  flex-shrink: 0;
  font-size: 24px;
}
.notification-success .notification-icon[data-v-13383cbf] {
  color: #10b981;
}
.notification-warning .notification-icon[data-v-13383cbf] {
  color: #f59e0b;
}
.notification-error .notification-icon[data-v-13383cbf] {
  color: #ef4444;
}
.notification-info .notification-icon[data-v-13383cbf] {
  color: var(--q-primary);
}
.notification-message[data-v-13383cbf] {
  color: var(--q-accent);
  font-size: 14px;
  line-height: 1.5;
}

/* Notification transitions */
.notification-enter-active[data-v-13383cbf] {
  animation: notification-slide-in-13383cbf 0.3s ease-out;
}
.notification-leave-active[data-v-13383cbf] {
  animation: notification-slide-out-13383cbf 0.3s ease-in;
}
@keyframes notification-slide-in-13383cbf {
from {
    opacity: 0;
    transform: translateX(100%);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}
@keyframes notification-slide-out-13383cbf {
from {
    opacity: 1;
    transform: translateX(0);
}
to {
    opacity: 0;
    transform: translateX(100%);
}
}


.lesson[data-v-6ce63b06]{
        /*background-color: lightgray;*/
        margin: 1px;
        padding: 2px;
        font-size: smaller;
        /*border-radius: 0.3rem;*/
}
.test[data-v-6ce63b06]{
        /*background-color: darkgray;*/
        margin: 1px;
        padding: 2px;
        font-size: smaller;
        /*border-radius: 0.3rem;*/
}
.nav-link[data-v-6ce63b06]{
        display: block;
        padding: 0.2rem;
        /*border-radius: 0.3rem;*/
        /*border-bottom: lightgray solid 1px;*/
}
.resp-iframe[data-v-6ce63b06] {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
}
.video-container[data-v-6ce63b06] {
        position: relative;
        padding-bottom: 56.25%; /* Соотношение сторон 16:9 */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        min-height: 800px;
}
.video-container iframe[data-v-6ce63b06] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-height: 800px;
}
 

a.disabled[data-v-0ac1bf5d] {
        pointer-events: none;
        color:gray;
}
.lesson[data-v-0ac1bf5d]{
        /*background-color: lightgray;*/
        margin: 1px;
        padding: 2px;
        font-size: smaller;
        /*border-radius: 0.3rem;*/
}
.test[data-v-0ac1bf5d]{
        /*background-color: darkgray;*/
        margin: 1px;
        padding: 2px;
        font-size: smaller;
        /*border-radius: 0.3rem;*/
}
.nav-link[data-v-0ac1bf5d]{
        display: block;
        padding: 0.2rem;
        /*border-radius: 0.3rem;*/
        /*border-bottom: darkgray dotted 1px;*/
}
.for_desktop[data-v-0ac1bf5d]{
      padding-left: 15px;
      padding-bottom: 100px;
      padding-right: 10px;
}
.for_mobile[data-v-0ac1bf5d]{
      padding: 0px;
      margin: 0px;
}



.item-card[data-v-040a750c] {
  margin: 3px;
  width: 350px;
  max-width: 350px;
  height:200px;
  flex: 1 1 auto;
  overflow: hidden;
}
.draggable-container[data-v-040a750c] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* Аналог q-gutter-sm */
}


.course-view-card[data-v-1ecdbcd8]{
    width: 100%;
}
.course-view-card-stuff[data-v-1ecdbcd8]{
    width: 500px;
    height: 15px;
    display: block;
}
.full-height[data-v-1ecdbcd8] {
    height: 100%;
}



.drag-area[data-v-0873558b] {
  min-height: 50px;
  padding: 10px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
}
.list-item-drag[data-v-0873558b] {
  padding: 8px;
  margin: 4px 0;
  /*background: #f5f5f5;*/
  border-radius: 4px;
  border: 1px solid #ddd;
}
.list-item-drag[data-v-0873558b]:hover {
  /*background: #e9e9e9;*/
}
.drop-zone[data-v-0873558b] {
  text-align: center;
  padding: 20px;
  color: #999;
  font-style: italic;
}
.shelf-item[data-v-0873558b], .item[data-v-0873558b] {
  border-bottom: 1px solid #eee;
  transition: all 0.3s;
}
.shelf-item[data-v-0873558b]:hover, .item[data-v-0873558b]:hover {
  /*background-color: #f0f0f0;*/
}
.cursor-grab[data-v-0873558b] {
  cursor: grab;
}


.hidden[data-v-064ede37] {
    display: none;
}
.numebr-inputs[data-v-064ede37] {
    width: 200px; 
    border-radius: 15px;
}



.test-item[data-v-5cabfffe] {
  padding: 16px 12px;
  flex-direction: column;
}
@media (max-width: 599px) {
.test-item[data-v-5cabfffe] {
    padding: 12px 8px;
}
  
  /* На мобильных делаем более компактно */
.full-width .row[data-v-5cabfffe] {
    flex-wrap: wrap;
}
  
  /* На мобильных кнопки могут переноситься */
.row.q-gutter-xs[data-v-5cabfffe] {
    flex-wrap: wrap;
}
}



.header-content[data-v-4c559dbb] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: 16px;
}
.text-section[data-v-4c559dbb] {
  flex: 1;
  min-width: 0; /* Для корректного обрезания текста */
}
.title[data-v-4c559dbb] {
  font-weight: 600;
  margin-bottom: 4px;
  word-break: break-word;
}
.description[data-v-4c559dbb] {
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.side-section[data-v-4c559dbb] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.date-info[data-v-4c559dbb] {
  color: #666;
  font-size: 0.9em;
  text-align: right;
}
.buttons-group[data-v-4c559dbb] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Адаптивность для планшетов */
@media (max-width: 1024px) {
.header-content[data-v-4c559dbb] {
    gap: 12px;
}
.buttons-group[data-v-4c559dbb] {
    gap: 6px;
}
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
.header-content[data-v-4c559dbb] {
    flex-direction: column;
    gap: 12px;
}
.side-section[data-v-4c559dbb] {
    width: 100%;
    align-items: stretch;
}
.date-info[data-v-4c559dbb] {
    text-align: center;
    order: 2;
    margin-top: 8px;
}
.buttons-group[data-v-4c559dbb] {
    order: 1;
    justify-content: space-between;
}
}

/* Адаптивность для очень маленьких экранов */
@media (max-width: 480px) {
.header-content[data-v-4c559dbb] {
    gap: 8px;
}
.buttons-group[data-v-4c559dbb] {
    gap: 4px;
}
.title[data-v-4c559dbb] {
    font-size: 1.1em;
}
.description[data-v-4c559dbb] {
    font-size: 0.9em;
}
}


.option-row[data-v-7c2ca98c] {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  padding: 4px 8px;
}
.json-output[data-v-7c2ca98c] {
  background-color: #2d2d2d;
  color: #f8f8f2;
  border-radius: 4px;
}
.json-output pre[data-v-7c2ca98c] {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}


.hidden[data-v-0221039e] {
    display: none;
}
.numebr-inputs[data-v-0221039e] {
    width: 200px; 
    border-radius: 15px;
}



.test-item[data-v-dca5e94e] {
  padding: 16px 12px;
  flex-direction: column;
}
@media (max-width: 599px) {
.test-item[data-v-dca5e94e] {
    padding: 12px 8px;
}

  /* На мобильных делаем более компактно */
.full-width .row[data-v-dca5e94e] {
    flex-wrap: wrap;
}

  /* На мобильных кнопки могут переноситься */
.row.q-gutter-xs[data-v-dca5e94e] {
    flex-wrap: wrap;
}
}





.underline-on-hover[data-v-431033df]:hover {
  text-decoration: underline;
}


.myselect[data-v-020af329]:hover {
    filter: brightness(70%);
}
.text-truncate[data-v-020af329] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.full-height[data-v-020af329] {
  height: 100%;
}




.myselect[data-v-cac9d4c0]:hover {
  filter: brightness(70%);
}


.myselect[data-v-7eddee1a]:hover {
  filter: brightness(70%);
}


.draggable-container[data-v-14a6b2ac] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Аналог q-gutter-sm */
}


.frame[data-v-6429352c] {
  width: 100%;
  min-height: 100dvh;
  transition: opacity 0.3s ease;
}

/* Стили для лоадера */
.loader-overlay[data-v-6429352c] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.loader-container[data-v-6429352c] {
  text-align: center;
}
.loader[data-v-6429352c] {
  width: 72px;
  height: 72px;
  border: 3px solid #f0f3fa;
  border-bottom-color: #6699FF;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation-6429352c 1s linear infinite;
}
.loader-text[data-v-6429352c] {
  margin-top: 16px;
  color: #292929;
  font-size: 16px;
}
@keyframes rotation-6429352c {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}


.accord_row2[data-v-085a0db2] {
  border-bottom: lightgray dotted 1px;
  text-align: left;
  margin-bottom: 5px;
}


.accord_row[data-v-1fa3fc4d] {
  border-bottom: lightgray dashed 1px;
  text-align: left;
}
.accord_row2[data-v-1fa3fc4d] {
  border-bottom: lightgray dotted 1px;
  text-align: left;
  margin-bottom: 5px;
}
.prof_font[data-v-1fa3fc4d] {
  font-size: 0.9rem;
  color: #444;
}
.prof_label[data-v-1fa3fc4d] {
  font-size: 1.1rem;
  font-weight: bold;
  color: #444;
}
.prof_descr[data-v-1fa3fc4d] {
  font-size: 0.8rem;
  color: #777;
}


.prof_font[data-v-6ce5f2af] {
  font-size: 0.9rem;
  color: #444;
}
.prof_label[data-v-6ce5f2af] {
  font-size: 1.1rem;
  font-weight: bold;
  color: #444;
}
.prof_descr[data-v-6ce5f2af] {
  font-size: 0.8rem;
  color: #777;
}


.img-responsive[data-v-ccf675a2] {
  width: 100%;
  max-width: 100%;
  height: auto;
}


/* Добавьте в стили компонента */
#canvas_adaptive[data-v-c724c548] {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}


.accord_row[data-v-2760ae78] {
  border-bottom: lightgray dashed 1px;
  /*background-color: #ffffff;*/
  text-align: left;
}
.accord_row2[data-v-2760ae78] {
  /*background-color: #cccccc;*/
  border-bottom: lightgray dotted 1px;
  text-align: left;
  margin-bottom: 5px;
}
.prof_font[data-v-2760ae78] {
  font-size: 0.9rem;
  color: #444;
}
.prof_label[data-v-2760ae78] {
  font-size: 1.1rem;
  font-weight: bold;
  color: #444;
}
.prof_descr[data-v-2760ae78] {
  font-size: 0.8rem;
  color: #777;
}
table[data-v-2760ae78] {
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', Sans-Serif;
  font-size: 14px;
  background: white;
  max-width: 70%;
  width: 70%;
  border-collapse: collapse;
  text-align: left;
}
th[data-v-2760ae78] {
  font-weight: normal;
  color: #039;
  border-bottom: 2px solid #6678b1;
  padding: 10px 8px;
}
td[data-v-2760ae78] {
  border-bottom: 1px solid #ccc;
  color: #669;
  padding: 9px 8px;
  transition: 0.3s linear;
}
tr:hover td[data-v-2760ae78] {
  color: #6699ff;
}


.handle[data-v-6ceec40d] {
  cursor: grab;
}




.menu-container[data-v-66d5aeb6] {
  position: relative;
}
.toggle-button-container[data-v-66d5aeb6] {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99999;
  /* transform: translateX(0%); */
}
.toggle-button[data-v-66d5aeb6] {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}


.q-avatar[data-v-2cd3456f] {
  border: 2px dashed rgba(0, 0, 0, 0.2);
  transition: border-color 0.3s;
}
.q-avatar[data-v-2cd3456f]:hover {
  border-color: var(--q-primary);
}




.q-avatar[data-v-1365e75a] {
  border: 2px dashed rgba(0, 0, 0, 0.2);
  transition: border-color 0.3s;
}
.q-avatar[data-v-1365e75a]:hover {
  border-color: var(--q-primary);
}
.custom-popup[data-v-1365e75a] {
  width: 600px !important;
  min-height: 400px !important;
  max-height: 80vh !important; /* ограничение по высоте */
}
.fullscreen-popup[data-v-1365e75a] {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
  border-radius: 0 !important;
}



.drag-handle[data-v-20af8cf2] {
  cursor: move;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.drag-handle[data-v-20af8cf2]:hover {
  opacity: 1;
}

/* Smooth transition for dragged items */
.flip-list-move[data-v-20af8cf2] {
  transition: transform 0.5s;
}
.item-card[data-v-20af8cf2] {
  margin: 3px;
  width: 350px;
  height:200px;
  flex: 1 1 auto;
  overflow: hidden;
}
.draggable-container[data-v-20af8cf2] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* Аналог q-gutter-sm */
}


.text-slate-500[data-v-47246e68] {
  color: #64748b;
}
.text-rose-600[data-v-47246e68] {
  color: #e11d48;
}
.text-blue-400[data-v-47246e68] {
  color: #60a5fa;
}
.text-green-600[data-v-47246e68] {
  color: #16a34a;
}
.text-blue-600[data-v-47246e68] {
  color: #2563eb;
}
.text-red-600[data-v-47246e68] {
  color: #dc2626;
}
.text-amber-600[data-v-47246e68] {
  color: #d97706;
}
.text-slate-400[data-v-47246e68] {
  color: #94a3b8;
}
.hover\:text-slate-600[data-v-47246e68]:hover {
  color: #475569;
}
.hover\:text-rose-700[data-v-47246e68]:hover {
  color: #be123c;
}
[data-v-47246e68] .custom-input .q-field__control {
  border-radius: 0.75rem;
  background-color: #ffffff;
  border-color: #e2e8f0;
  min-height: 56px;
  transition: all 0.2s ease;
}
[data-v-47246e68] .custom-input .q-field__native {
  padding: 0.75rem 0;
  line-height: 1.5;
  color: #0f172a;
}
[data-v-47246e68] .custom-input .q-field__append {
  padding-right: 1rem;
}
[data-v-47246e68] .custom-input .q-field__control:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}
[data-v-47246e68] .custom-input.q-field--focused .q-field__control {
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(var(--q-primary-rgb, 225, 29, 72), 0.1) !important;
}
[data-v-47246e68] .custom-input.q-field--focused .q-field__control::before {
  border-color: #e11d48 !important;
}
[data-v-47246e68] .custom-input.q-field--focused .q-field__control::after {
  transform: scaleX(0) !important;
}
[data-v-47246e68] .custom-input .q-field__label {
  color: #64748b;
}
[data-v-47246e68] .custom-input.q-field--focused .q-field__label {
  color: #e11d48;
}
.submit-btn[data-v-47246e68] {
  background-color: #e11d48;
  color: #ffffff;
  font-weight: bold;
  border-radius: 0.75rem;
  padding: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
  transition: all 0.2s;
}
.submit-btn[data-v-47246e68]:hover {
  background-color: #be123c;
  transform: translateY(-2px);
}
.submit-btn[data-v-47246e68]:active {
  transform: translateY(0);
}


.social-btn[data-v-40367000] {
  border-color: #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.625rem;
  color: #64748b;
}
.social-btn[data-v-40367000]:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}
.social-icon[data-v-40367000] {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.bg-red-500[data-v-40367000] {
  background-color: #dc2626;
}
.bg-white[data-v-40367000] {
  background-color: #ffffff;
}
.text-slate-800[data-v-40367000] {
  color: #1e293b;
}
.text-white[data-v-40367000] {
  color: #ffffff;
}
.custom-divider[data-v-40367000] {
  display: flex;
  align-items: center;
  text-align: center;
}
.custom-divider[data-v-40367000]::before,
.custom-divider[data-v-40367000]::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #e2e8f0;
}
.divider-text[data-v-40367000] {
  padding: 0 1rem;
  white-space: nowrap;
  color: #64748b;
}


.text-slate-500[data-v-2256c5c8] {
  color: #64748b;
}
.text-rose-600[data-v-2256c5c8] {
  color: #e11d48;
}
.auth-card[data-v-2256c5c8] {
  width: 100%;
  max-width: 28rem;
  border-radius: 1rem;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: visible;
}
.logo-container[data-v-2256c5c8] {
  width: 3rem;
  height: 3rem;
  background-color: #e11d48;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: bold;
  font-size: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(var(--q-primary-rgb, 225, 29, 72), 0.3);
  margin-bottom: 1rem;
  transition: transform 0.3s;
}
.logo-container[data-v-2256c5c8]:hover {
  transform: scale(1.05);
}
.lang-selector-wrapper[data-v-2256c5c8] {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 20;
}
.lang-dropdown[data-v-2256c5c8] {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 0.25rem 1rem;
  color: #64748b;
  transition: all 0.2s;
  font-size: 0.875rem;
}
.lang-dropdown[data-v-2256c5c8]:hover {
  background-color: #ffffff;
  border-color: #cbd5e1;
}
.lang-list[data-v-2256c5c8] {
  max-height: 15rem;
  overflow-y: auto;
}
.active-lang-item[data-v-2256c5c8] {
  color: #e11d48;
  background-color: #ffe4e8;
}
[data-v-2256c5c8] .lang-menu {
  border-radius: 0.5rem;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  margin-top: 0.5rem;
}
.bg-slate-50[data-v-2256c5c8] {
  background-color: #f8fafc;
}
.border-slate-100[data-v-2256c5c8] {
  border-color: #f1f5f9;
}
.auth-container[data-v-2256c5c8] {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
a.text-rose-600[data-v-2256c5c8] {
  text-decoration: none;
  transition: all 0.2s;
}
a.text-rose-600[data-v-2256c5c8]:hover {
  text-decoration: underline;
  color: #be123c;
}

/* Modal Styles */
.confirm-modal-card[data-v-2256c5c8] {
  min-width: 400px;
  max-width: 500px;
  border-radius: 1rem;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.confirm-ok-btn[data-v-2256c5c8] {
  background-color: #e11d48;
  color: #ffffff;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.2s;
}
.confirm-ok-btn[data-v-2256c5c8]:hover {
  background-color: #be123c;
  transform: translateY(-1px);
}
.cancel-btn[data-v-2256c5c8] {
  color: #64748b;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.2s;
}
.cancel-btn[data-v-2256c5c8]:hover {
  background-color: #f8fafc;
  color: #0f172a;
}
.text-slate-900[data-v-2256c5c8] {
  color: #0f172a;
}
.text-slate-600[data-v-2256c5c8] {
  color: #64748b;
}
.text-red-600[data-v-2256c5c8] {
  color: #dc2626;
}
@media (max-width: 600px) {
.confirm-modal-card[data-v-2256c5c8] {
    min-width: 90vw;
}
}


/*https://rufonts.pro/shrift/proxima-nova-condensed*/
@font-face {
  font-family: "Proxima Nova Condensed";
  src: url(../fonts/ProximaNovaCond-Regular.64461d87.woff2) format("woff2"),
    url(../fonts/ProximaNovaCond-Regular.8223e19c.woff) format("woff"),
    url(../fonts/ProximaNovaCond-Regular.ddf8792f.ttf) format("truetype");
}
body,
html {
  background: #f2f6ff;
  padding: 0px;
  margin: 0px;
}
a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}
a:link {
  color: #6699ff;
}
a:visited {
  color: #6699ff;
}

/*a:focus {*/
/*  border-bottom: 1px solid;*/
/*  background: #BAE498;*/
/*}*/
a:hover {
  /*border-bottom: 1px solid;*/
  color: #4dd2bc;
}
a:active {
  color: #6699ff;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"],
input[type="number"]:hover,
input[type="number"]:focus {
  appearance: none;
  -moz-appearance: textfield;
}
.h1 {
  font-family: Proxima Nova Condensed;
  font-style: normal;
  font-weight: bold;
  font-size: 34px;
  line-height: 36px;
}
.h2 {
  font-family: Proxima Nova Condensed;
  font-style: normal;
  font-weight: bold;
  font-size: 28px;
  line-height: 30px;
  display: flex;
  align-items: flex-end;
}
.h3 {
  font-family: Proxima Nova Condensed;
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 26px;
}
.h4 {
  font-family: Proxima Nova Condensed;
  font-style: normal;
  font-size: 20px;
  line-height: 22px;
}
.h5 {
  font-family: Proxima Nova Condensed;
  font-style: normal;
  /*font-weight: bold;*/
  font-size: 16px;
  line-height: 18px;
}
.h6 {
  font-family: Proxima Nova Condensed;
  font-style: normal;
  /*font-weight: bold;*/
  font-size: 12px;
  line-height: 14px;
}
.h-tt {
  font-family: Proxima Nova Condensed;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 18px;
  max-width: 500px;
}
.body-bold {
  font-family: Proxima Nova Condensed;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 22px;
  display: flex;
  align-items: flex-end;
  color: #333333;
}
.body-0 {
  font-family: Proxima Nova Condensed;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 22px;
  color: #333333;
}
.body-1 {
  font-family: Proxima Nova Condensed;
  font-style: normal;
  font-weight: normal;
  font-size: 17px;
  line-height: 22px;
  /* or 129% */
  display: flex;
  align-items: center;
}
.body-2 {
  font-family: Proxima Nova Condensed;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  display: inline-block;
  /*align-items: center;*/
  /*color: primary;*/
  text-decoration: none;
}
.margin-top-30 {
  margin-top: 15px;
  margin-bottom: 15px;
}
.margin-top_15 {
  margin-top: 15px;
  margin-bottom: 15px;
}
.moderator_panel {
  padding-top: 10px;
  width: 400px;
  height: 46px;
  box-shadow: 0px 4px 15px rgba(113, 147, 190, 0.3);
}
.caption {
  font-family: Proxima Nova Condensed;
  font-style: normal;
  font-weight: normal;
  font-size: 19px;
  line-height: 22px;
  /*display: inline-block;*/
  /*align-items: center;*/
  color: #6699ff;
  background-color: white;
  padding-top: 25px;
}
.text-active {
  text-decoration: underline;
  background-color: #eeeeee;
  padding: 0px;
}
.positive {
  font-family: Proxima Nova Condensed;
  font-style: normal;
  font-weight: normal;
  color: #8ca0ba;
}
.positive h4 {
  font-family: Proxima Nova Condensed;
  font-style: normal;
  font-weight: normal;
  font-size: 19px;
  line-height: 22px;
  color: #8ca0ba;
}
.positive h5 {
  font-family: Proxima Nova Condensed;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  color: #8ca0ba;
}
.apptitle {
  font-family: Proxima Nova Condensed;
  font-style: normal;
  font-weight: normal;
  font-size: 32px;
  line-height: 34px;
  color: #728db1;
}
.moder-card {
  width: 100%;
  max-width: 350px;
  padding: 0px;
  margin: 5px;
}
.cat-card {
  width: 100%;
  min-height: 350px;
  padding: 0px;
  margin: 0px;
  border-radius: 25px;
}
.cat-card-my {
  width: 100%;
  padding: 0px;
  margin: 0px;
  /* border-radius: 25px; */
}
.cat-card-big {
  width: 100%;
  min-height: 1200px;
  padding: 0px;
  margin: 0px;
  border-radius: 25px;
}
.cat-card-small {
  width: 100%;
  min-height: 150px;
  padding: 0px;
  margin: 0px;
  border-radius: 25px;
}
.cat-card-mobile {
  width: 100%;
  min-height: 350px;
  padding: 0px;
  margin: 0px;
  border-radius: 10px;
}
.cours-card {
  width: 100%;
  max-width: 400px;
  padding: 0px;
  margin: 5px;
  border-radius: 25px;
}
.cours-card-mobile {
  width: 100%;
  max-width: 400px;
  padding: 0px;
  margin: 3px;
  border-radius: 5px;
}
.truncate-400 {
  width: 200px; /* Установите нужную ширину */
  white-space: nowrap; /* Запрещает перенос текста на новую строку */
  overflow: hidden; /* Обрезает текст, который не помещается */
  text-overflow: ellipsis; /* Добавляет многоточие в конце обрезанного текста */
}
.event-card {
  width: 100%;
  max-width: 500px;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 25px;
}
.event-card-mobile {
  width: 100vw;
  padding: 3px;
  border-radius: 3px;
}
.list-item-drag {
  cursor: pointer;
  border-radius: 5px;
  background-color: #f2f6ff;
  color: #1d1d1d;
  padding: 10px;
  margin: 3px;
}
.bg_tb2 {
  background-color: #c9d5e4;
  color: #ffffff;
  height: 50px;
  padding-top: 15px;
  padding-left: 5px;
  font-size: 1.2em;
}
.bg_tb3 {
  background-color: #e8ecf3;
  padding-left: 5px;
}
.component_padding {
  padding-left: 15px;
}
.q-field--error .q-field__bottom {
  color: var(--q-warning);
}
.centered {
  display: flex;
  justify-content: center; /* центрирование по горизонтали */
  align-items: center;    /* центрирование по вертикали */
  height: 100vh;         /* высота контейнера (можно задать любую) */
}


/* На десктопах */
/* @media (min-width: 1024px) { */
  /* [data-b24-crm-button-cont] {
    right: 5px !important;
    left: auto !important;
    bottom: 30% !important;
  }
  .b24-widget-button-pulse {
      display: none !important;
  } */
  /* .b24-widget-button-inner-mask {
      width: 70px !important;
      height: 70px !important;
  } */
  /* .b24-widget-button-inner-block {
      width: 70px !important;
      height: 70px !important;
  } */
  /* .b24-crm-button-icon {
      width: 35px !important;
      height: 35px !important;
  } */
/* } */

/* На мобильных */
/* @media (max-width: 768px) {
  [data-b24-crm-button-cont] {
      width: 50px !important;
      height: 50px !important;
      bottom: 20px !important;
      right: 20px !important;
  }
  .b24-widget-button-inner-mask {
      width: 60px !important;
      height: 60px !important;
  }
  .b24-widget-button-block {
      width: 55px !important;
      height: 55px !important;
  }
  .b24-widget-button-pulse {
      display: none !important;
  }
  .b24-widget-button-inner-block {
      width: 45px !important;
      height: 45px !important;
  }
  .b24-crm-button-icon {
      width: 20px !important;
      height: 20px !important;
  }
} */

/* 1. Убираем пульсацию для всех устройств */
.b24-widget-button-pulse,
    .b24-widget-button-shadow {
        display: none !important;
}

    /* 2. Стили для десктопа (экраны шире 768px) */
.b24-widget-button-wrapper {
        /* Располагаем справа и на 30% от нижнего края */
        bottom: 30% !important;
        right: 20px !important; /* Стандартный отступ справа */
}

    /* 3. Стили для мобильных устройств (экраны 768px и меньше) */
@media (max-width: 768px) {
.b24-widget-button-wrapper {
            /* Прижимаем к правому нижнему углу с небольшими отступами */
            bottom: 15px !important;
            right: 15px !important;

            /* Убираем позиционирование слева, которое могло остаться */
            left: auto !important;

            /* Уменьшаем размер в два раза */
            transform: scale(0.5) !important;

            /* Важно! Точка трансформации - правый нижний угол,
               чтобы виджет не "уезжал" от угла при масштабировании */
            transform-origin: right bottom !important;
}
}
.app-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* или normal + line-clamp для многострочного */
  max-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.copy-input-wrapper {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.copy-to-buff {
  border: none;
  background: none;
  border-radius: 15px;
  cursor: pointer;
  pointer-events: none; /* Отключаем все события мыши на самом input */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  width: 100%; /* Чтобы input занимал всю ширину wrapper */
}

/* Основные стили диалога */
.aos-dialog {
  width: 100%;
  max-width: 900px;
  margin: 20px;
}

/* Заголовок */
.dialog-header {
  padding: 16px;
}

/* Контент */
.dialog-content {
  padding: 0 16px;
}

/* Карусель */
.aos-carousel {
  border-radius: 8px;
}

/* Слайды */
.carousel-slide {
  padding: 16px;
}
.slide-title {
  margin-bottom: 12px;
  word-break: break-word;
}
.slide-separator {
  margin: 12px 0;
  width: 80%;
}
.slide-content {
  width: 100%;
}
.option-group {
  width: 100%;
}
.input-container {
  margin-top: 12px;
}
.other-input {
  border-radius: 25px !important;
  padding: 10px;
  width: 100%;
}

/* Кнопки действий */
.dialog-actions {
  padding: 16px;
}
.action-btn {
  min-width: 120px;
}

/* Адаптивность для планшетов */
@media (max-width: 1024px) {
.aos-dialog {
    max-width: 95%;
    margin: 15px;
}
.carousel-slide {
    padding: 12px;
}
.slide-title {
    font-size: 1.3em;
}
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
.aos-dialog {
    max-width: 98%;
    margin: 10px;
}
.dialog-header,
  .dialog-content,
  .dialog-actions {
    padding: 12px;
}
.carousel-slide {
    padding: 8px;
}
.slide-title {
    font-size: 1.2em;
    margin-bottom: 8px;
}
.slide-separator {
    margin: 8px 0;
    width: 90%;
}
.slide-content {
    padding: 8px !important;
}
.action-btn {
    min-width: 100px;
    width: 100%;
    margin-top: 8px;
}
}

/* Адаптивность для очень маленьких экранов */
@media (max-width: 480px) {
.aos-dialog {
    margin: 5px;
    max-width: 100%;
}
.dialog-header,
  .dialog-content,
  .dialog-actions {
    padding: 8px;
}
.carousel-slide {
    padding: 6px;
}
.slide-title {
    font-size: 1.1em;
}
.h4 {
    font-size: 1.2em;
}
.h5 {
    font-size: 0.9em;
}
.other-input {
    padding: 8px;
    border-radius: 20px !important;
}
}
.action-btn {
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}



/*# sourceMappingURL=app.ebb8f4ea.css.map*/