.status-dot.left { background: var(--orange); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.round-toolbar,.round-top,.round-document,.round-save { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.round-toolbar { padding:12px 0 20px; }
.round-student { border-top:1px solid var(--line); padding:20px 0; }
.round-marks { border:0; margin:0; padding:4px; display:flex; flex-wrap:wrap; gap:4px; background:#f4f3f9; border-radius:12px; }
.round-marks label { margin:0; cursor:pointer; }
.round-marks input { position:absolute; opacity:0; width:1px; height:1px; }
.round-marks span { display:block; padding:10px 12px; border-radius:8px; font-size:12px; }
.round-marks input:checked + span { background:#fff; color:var(--primary); box-shadow:0 2px 5px #20204020; font-weight:700; }
.round-marks input:focus-visible + span { outline:2px solid var(--primary); }
.round-student[data-mark="absent"] .round-marks input:checked + span { background:#fff0e0; color:#925500; }
.round-reason { display:grid; grid-template-columns:1fr 2fr; gap:12px; margin-top:14px; }
.round-reason[hidden] { display:none; }
.round-reason small { grid-column:1 / -1; }
.round-document { justify-content:flex-start; margin-top:12px; font-size:12px; }
.round-badge,.round-pe { background:#e6f6ef; color:#176442; padding:6px 10px; border-radius:8px; font-size:12px; }
.round-badge.waiting { background:#fff1dd; color:#80500f; }
.round-pe { width:fit-content; }
.round-comparison { color:var(--muted); font-size:12px; }
.round-save { position:sticky; bottom:0; z-index:4; background:#fff; border-top:1px solid var(--line); padding:16px 0; margin-top:16px; }
.round-save > span { font-size:12px; color:var(--muted); }
@media(max-width:760px) { .round-reason { grid-template-columns:1fr; } .round-marks { width:100%; } .round-marks span { padding:10px 9px; } .round-save .button { width:100%; } }

.attendance-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.check-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.check-card > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--violet-soft);
  color: var(--primary);
  font-weight: 800;
}

.check-card b { display: block; font-size: 13px; }
.check-card small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.check-card.active { border-color: #a99df0; box-shadow: 0 8px 24px rgba(103, 87, 216, .12); }
.check-card.active > span { background: var(--primary); color: #fff; }
.check-card.neutral > span { background: var(--orange-soft); color: var(--orange); }
.attendance-head { margin-top: 4px; }
.attendance-actions { margin-top: 17px; }

.import-placeholder { text-align: center; max-width: 760px; }
.import-placeholder > p {
  max-width: 610px;
  margin: 0 auto 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.import-icon {
  display: grid;
  place-items: center;
  margin: 16px auto;
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 14px;
  font-weight: 800;
}

@media (max-width: 760px) {
  .attendance-summary { grid-template-columns: 1fr; }
  .attendance-actions { flex-direction: column-reverse; }
  .attendance-actions .button { width: 100%; }
  .segmented span { padding: 7px 5px; font-size: 9px; }
}