:root {
  --ux-blue-900: #1a237e;
  --ux-blue-700: #3048b5;
  --ux-amber-500: #ff9800;
  --ux-card-bg: rgba(255, 255, 255, 0.92);
  --ux-card-border: rgba(26, 35, 126, 0.12);
  --ux-text-900: #1d2433;
  --ux-text-700: #4f5f7a;
  --ux-shadow: 0 10px 28px rgba(18, 29, 70, 0.1);
}

.ux-mini-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px auto 18px;
  max-width: 980px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(90deg, #1a237e, #3f51b5);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 20px rgba(20, 34, 88, 0.26);
}

.ux-mini-header .material-icons {
  color: #ffffff;
  font-size: 24px;
}

.ux-mini-title {
  margin: 0;
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  letter-spacing: 0.2px;
  font-weight: 700;
  color: #ffffff;
}

.ux-state-wrap {
  width: min(860px, 94%);
  margin: 20px auto;
}

.ux-state-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--ux-card-bg);
  border: 1px solid var(--ux-card-border);
  box-shadow: var(--ux-shadow);
}

.ux-state-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ux-state-icon .material-icons {
  font-size: 20px;
}

.ux-state-body {
  min-width: 0;
}

.ux-state-title {
  margin: 0 0 3px 0;
  color: var(--ux-text-900);
  font-size: 1.02rem;
  font-weight: 700;
}

.ux-state-text {
  margin: 0;
  color: var(--ux-text-700);
  line-height: 1.45;
  font-size: 0.94rem;
}

.ux-state-info .ux-state-icon {
  background: rgba(26, 35, 126, 0.12);
  color: var(--ux-blue-900);
}

.ux-state-warning .ux-state-icon {
  background: rgba(255, 152, 0, 0.16);
  color: #9a5b00;
}

.ux-state-error .ux-state-icon {
  background: rgba(244, 67, 54, 0.16);
  color: #a12016;
}

.ux-skeleton-grid {
  width: min(1120px, 95%);
  margin: 8px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

/* When skeleton grid is injected inside an existing grid/flex container,
   make it span full available width instead of shrinking into one cell. */
.grid-container > .ux-skeleton-grid,
.topics-container > .ux-skeleton-grid,
.class-list > .ux-skeleton-grid {
  width: 100%;
  max-width: none;
  margin: 0;
}

.grid-container > .ux-skeleton-grid,
.topics-container > .ux-skeleton-grid {
  grid-column: 1 / -1;
}

.ux-skeleton-list {
  width: min(760px, 96%);
  margin: 8px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.ux-skeleton-card {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(26, 35, 126, 0.09);
  box-shadow: 0 4px 16px rgba(16, 20, 40, 0.06);
  padding: 14px;
}

.ux-skeleton-thumb {
  width: 100%;
  height: 130px;
  border-radius: 10px;
  margin-bottom: 12px;
}

.ux-skeleton-line {
  height: 13px;
  border-radius: 999px;
  margin-bottom: 9px;
}

.ux-skeleton-line.short {
  width: 58%;
}

.ux-skeleton-thumb,
.ux-skeleton-line {
  background: linear-gradient(
    100deg,
    rgba(225, 231, 243, 0.9) 25%,
    rgba(244, 247, 255, 0.95) 50%,
    rgba(225, 231, 243, 0.9) 75%
  );
  background-size: 230% 100%;
  animation: ux-shimmer 1.2s linear infinite;
}

@keyframes ux-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@media (max-width: 640px) {
  .ux-state-card {
    padding: 14px;
  }
}