.attendance-timepiece {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: min(100%, 570px);
  margin: 0 auto 30px;
  padding: 20px 28px;
  overflow: hidden;
  color: #fff;
  border: 1px solid #4e7894;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(102, 211, 237, .12), transparent 46%),
    radial-gradient(circle at 20% 10%, #1b4260 0, #102b42 44%, #071b2b 100%);
  box-shadow: 0 18px 42px rgba(4, 24, 39, .28), inset 0 1px 0 rgba(255,255,255,.16);
}

.attendance-timepiece::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image: linear-gradient(rgba(98,205,231,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(98,205,231,.28) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.analog-clock {
  position: relative;
  z-index: 1;
  flex: 0 0 184px;
  width: 184px;
  height: 184px;
  border: 8px solid #0a1c2b;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #0a1d2d 0 58%, transparent 59%),
    repeating-conic-gradient(from -1deg, #7ce0f5 0 1.5deg, transparent 1.5deg 6deg),
    #142f45;
  box-shadow: 0 0 0 2px #67cbe2, 0 0 0 7px rgba(103,203,226,.16), 0 12px 28px #020d16aa, inset 0 0 22px #000;
}

.clock-number { position: absolute; z-index: 2; color: #eafaff; font-size: 14px; font-weight: 900; line-height: 1; text-shadow: 0 0 8px #5bdcf9; }
.clock-12 { top: 17px; left: 50%; transform: translateX(-50%); }
.clock-3 { right: 19px; top: 50%; transform: translateY(-50%); }
.clock-6 { bottom: 16px; left: 50%; transform: translateX(-50%); }
.clock-9 { left: 19px; top: 50%; transform: translateY(-50%); }

.clock-hand { position: absolute; z-index: 3; left: 50%; bottom: 50%; display: block; border-radius: 8px; transform: translateX(-50%); transform-origin: 50% 100%; }
.hour-hand { width: 7px; height: 46px; background: linear-gradient(#fff, #b9d7e2); box-shadow: 0 0 6px #fff8; }
.minute-hand { width: 5px; height: 65px; background: linear-gradient(#95efff, #40bcd9); box-shadow: 0 0 8px #58d7f4; }
.second-hand { width: 2px; height: 70px; background: #ffae3d; box-shadow: 0 0 7px #ff9b1c; }
.clock-pin { position: absolute; z-index: 5; left: 50%; top: 50%; width: 15px; height: 15px; border: 3px solid #fff; border-radius: 50%; background: #ff9e2f; transform: translate(-50%,-50%); box-shadow: 0 0 10px #ff9e2f; }

.digital-clock { position: relative; z-index: 1; min-width: 260px; text-align: left; }
.digital-clock small { display: block; margin-bottom: 3px; color: #73d8ee; font-size: .75rem; font-weight: 900; letter-spacing: .18em; }
.digital-clock strong { display: block; color: #fff; font-size: clamp(2.5rem, 5vw, 4rem); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: .02em; text-shadow: 0 0 18px rgba(107,221,246,.35); }
.digital-clock span { display: block; margin-top: 10px; color: #dceef5; font-size: 1rem; font-weight: 800; text-transform: capitalize; }
.digital-clock em { display: inline-block; margin-top: 10px; padding: 5px 9px; color: #83dff2; border: 1px solid #35637e; border-radius: 7px; font-size: .67rem; font-style: normal; font-weight: 900; letter-spacing: .11em; }

.attendance-kiosk form { grid-template-columns: 1fr; width: min(100%, 520px); margin-inline: auto; }
.attendance-kiosk form label { min-width: 0; }
.attendance-kiosk form input { display: block; width: 100%; max-width: 100%; }
.attendance-kiosk form button { width: 100%; max-width: 100%; }

@media (max-width: 620px) {
  .attendance-timepiece { flex-direction: column; gap: 18px; padding: 20px; }
  .analog-clock { flex-basis: 160px; width: 160px; height: 160px; }
  .digital-clock { min-width: 0; text-align: center; }
  .digital-clock strong { font-size: 2.75rem; }
  .attendance-kiosk form { grid-template-columns: 1fr; }
  .attendance-kiosk form button, .attendance-kiosk #attendance-message { grid-column: 1; }
}