.nanowatch-card.is-connected {
  background: linear-gradient(135deg, #12634b, #188164);
}

.nanowatch-card.has-error {
  background: linear-gradient(135deg, #7d2c2f, #a73b3f);
}

.nanowatch-card > button {
  padding: 7px 10px;
  border: 1px solid #ffffff40;
  border-radius: 9px;
  background: #ffffff12;
  color: #fff;
  font: inherit;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.nanowatch-card > button:hover {
  background: #ffffff22;
}

.profile-stat-grid .profile-stat-action {
  position: relative;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.profile-stat-grid .profile-stat-action:hover,
.profile-stat-grid .profile-stat-action:focus-visible {
  border-color: #9eb4dc;
  box-shadow: 0 14px 32px #1C2B451f;
  transform: translateY(-2px);
  outline: none;
}

.profile-stat-action > b {
  margin-right: auto;
  padding: 6px 9px;
  border-radius: 10px;
  background: #edf2fb;
  color: #1C2B45;
  font-size: calc(9px + var(--ui-font-add, 3px));
}

.attendance-detail {
  display: grid;
  gap: 16px;
}

.attendance-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.attendance-summary > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid #dce5f0;
  border-radius: 15px;
  background: linear-gradient(145deg, #fff, #f4f7fc);
}

.attendance-summary small,
.attendance-summary strong {
  display: block;
}

.attendance-summary small {
  margin-bottom: 7px;
  color: #788294;
}

.attendance-summary strong {
  color: #183b83;
  overflow-wrap: anywhere;
}

.attendance-list {
  display: grid;
  gap: 8px;
}

.attendance-list article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid #e0e7ef;
  border-radius: 14px;
  background: #fff;
}

.attendance-list article > i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eaf1fc;
  color: #1C2B45;
  font-style: normal;
  font-weight: 900;
}

.attendance-list strong,
.attendance-list small,
.attendance-list span > b {
  display: block;
}

.attendance-list article > div small,
.attendance-list span small {
  margin-top: 4px;
  color: #7c8797;
}

.attendance-list article > span {
  min-width: 130px;
  text-align: left;
}

.attendance-empty {
  padding: 38px 18px;
  text-align: center;
  border: 1px dashed #c9d5e5;
  border-radius: 18px;
  background: #f8fafd;
}

.attendance-empty > i {
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: #e8effa;
  color: #1C2B45;
  font-style: normal;
}

.attendance-empty h3 { margin: 0 0 7px; }
.attendance-empty p { margin: 0; color: #768194; }

@media (max-width: 700px) {
  .attendance-summary { grid-template-columns: 1fr; }
  .attendance-list article { grid-template-columns: 34px minmax(0, 1fr); }
  .attendance-list article > i { width: 34px; height: 34px; }
  .attendance-list article > span { grid-column: 2; min-width: 0; text-align: right; }
  .profile-stat-action > b { font-size: calc(8px + var(--ui-font-add, 3px)); }
}