.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(21, 48, 93, 0.94), rgba(17, 39, 79, 0.92));
  padding: 12px;
}

.card h2,
.card h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.25;
}

.card p {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.45;
}

.hero-card {
  background: linear-gradient(180deg, rgba(25, 58, 110, 0.92), rgba(19, 44, 87, 0.92));
}

.home-actions {
  display: grid;
  gap: 10px;
}

.activity-card {
  display: grid;
  gap: 8px;
}

.activity-head {
  display: block;
}

.activity-head h3 {
  margin: 0;
  font-size: 18px;
}

.activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.activity-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.activity-text {
  color: #e4eeff;
  font-size: 14px;
}

.activity-empty {
  color: #a5badc;
  font-size: 14px;
}

.action-btn {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  min-height: 46px;
  padding: 0 12px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease;
}

.action-btn:active {
  transform: translateY(1px);
}

.action-btn-open {
  color: #f2fff7;
  background: linear-gradient(180deg, #4da06b, #3f8458);
  border-color: rgba(118, 203, 149, 0.55);
}

.action-btn-close {
  color: #1d2530;
  background: linear-gradient(180deg, #e8b150, #cf9436);
  border-color: rgba(255, 210, 127, 0.58);
}

.action-btn-tasks {
  color: #e9f2ff;
  background: linear-gradient(180deg, #3a72b6, #2b5690);
  border-color: rgba(125, 171, 236, 0.52);
}

.action-btn-salary {
  color: #e9f2ff;
  background: linear-gradient(180deg, #4f6794, #3d5278);
  border-color: rgba(149, 176, 223, 0.46);
}

.scanner-card {
  padding: 10px;
}

.video-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(149, 183, 236, 0.46);
  background: #040c1d;
  min-height: 340px;
}

.qr-video {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
}

.scan-line {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 14%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 171, 75, 0), rgba(255, 171, 75, 0.95), rgba(255, 171, 75, 0));
  box-shadow: 0 0 14px rgba(255, 171, 75, 0.85);
  animation: scanMove 2.4s ease-in-out infinite;
}

.scanner-status {
  margin: 10px 2px 2px;
  color: #d6e4ff;
  font-size: 14px;
}

.message-card {
  border-color: rgba(136, 185, 247, 0.42);
}

.message-success {
  background: linear-gradient(180deg, rgba(33, 74, 128, 0.92), rgba(23, 61, 109, 0.94));
}

.message-error {
  background: linear-gradient(180deg, rgba(96, 42, 62, 0.9), rgba(74, 31, 48, 0.92));
}

.message-warning {
  background: linear-gradient(180deg, rgba(127, 83, 29, 0.95), rgba(97, 59, 18, 0.94));
}

.task-greeting {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(132, 176, 241, 0.42);
  background: linear-gradient(180deg, rgba(28, 62, 114, 0.96), rgba(20, 49, 95, 0.95));
  box-shadow: 0 8px 22px rgba(6, 20, 49, 0.28);
}

.task-greeting-title {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 800;
  color: #ffffff;
}

.task-greeting-text {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: #dce9ff;
}

@keyframes scanMove {
  0% {
    top: 12%;
    opacity: 0.55;
  }

  50% {
    top: 84%;
    opacity: 1;
  }

  100% {
    top: 12%;
    opacity: 0.55;
  }
}