/* O início da criança nas skins (canvas X14, X13): os cartões por tipo de playlist, os pontos e os selos. Só tokens da skin. */
.student-home {
  display: grid;
  gap: 16px;
  max-width: 880px;
  margin: 16px auto;
  padding: 0 16px;
}
.student-home .home-card {
  position: static;
  overflow: visible;
  aspect-ratio: auto;
  display: grid;
  gap: 10px;
  padding: 16px 20px;
  background: var(--app-card);
  border: var(--skin-border, 1px) solid var(--skin-card-line, var(--app-border));
  border-radius: var(--skin-card-radius, 12px);
  box-shadow: var(--skin-card-shadow, none);
}
.home-card h2,
.home-card h3,
.home-card p {
  margin: 0;
}
.home-card h2 small {
  font-weight: 400;
  color: var(--app-muted);
}
.home-item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.home-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--skin-icon, 56px);
  height: var(--skin-icon, 56px);
  font-size: var(--skin-icon-text, 30px);
  background: var(--app-soft);
  border-radius: var(--skin-radius, 12px);
}
.home-item-text {
  flex: 1;
  min-width: 160px;
}
.home-card button {
  min-height: var(--skin-target, 48px);
  font-size: var(--skin-button-text, 18px);
}
.home-seals {
  display: flex;
  gap: 12px;
  font-size: var(--skin-icon-text, 30px);
}
.student-points {
  flex: none;
  padding: 6px 14px;
  font-weight: 800;
  background: var(--app-card);
  border: 2px solid var(--app-border);
  border-radius: 999px;
}
.home-board,
.home-seal-list {
  display: grid;
  gap: 8px;
  padding-left: 1.2em;
}
.home-seal-list {
  list-style: none;
  padding-left: 0;
}
.home-kicker {
  font-size: 0.8em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-muted);
}
.home-due {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.home-card-kicker button {
  justify-self: start;
}
.student-avatar-chip {
  flex: none;
  margin-left: auto;
  padding: 6px 14px;
  font-weight: 700;
  background: var(--app-soft);
  border-radius: 999px;
}
.skin-greeting-title {
  display: block;
  font-size: 1.4em;
}