/* Adminok - liquid glass */

body {
  overflow-x: hidden;
}

.h1 {
  margin-bottom: 4px;
}

.duty-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--text-color);
  font-size: 13px;
  margin: 0 auto 28px;
}

.duty-legend__item {
  display: flex;
  align-items: center;
  gap: 7px;
}

.duty-legend__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-dim);
}

.duty-legend__dot--on {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  max-width: 1100px;
  padding: 0 clamp(16px, 4vw, 32px) 64px;
  gap: 24px;
}

.nevjegykartya {
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  width: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card);
  transition: var(--tran-03);
}

.nevjegykartya:hover {
  transform: translateY(-5px);
}

.nevjegykartya.duty-on {
  border-color: rgba(74, 222, 128, 0.45);
}

.avatar-wrap {
  position: relative;
}

.h2 {
  margin: 0;
  color: var(--text-bright);
  text-align: center;
  font-size: 19px;
  font-weight: 800;
}

.p {
  margin: 0;
  color: var(--primary-color);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

.img {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-border);
  background: var(--primary-color-light);
}

.duty-dot {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4ade80;
  border: 3px solid #141416;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.8);
}

@media (max-width: 480px) {
  .nevjegykartya {
    width: 100%;
    max-width: 280px;
  }
}