/* Attendance calculator page styles */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .grid-2 { grid-template-columns: 1fr; } }

.output { margin-top: 26px; }

.big-stat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
}
.bs-label { display: block; color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.bs-value {
  display: block; font-size: clamp(2.4rem, 8vw, 3.4rem); font-weight: 800; margin: 6px 0 16px;
  color: var(--accent-3);
}
.bs-value.good { color: var(--success); }
.bs-value.bad { color: var(--danger); }

.bar { height: 14px; border-radius: 999px; background: var(--bg); overflow: hidden; border: 1px solid var(--border); }
.bar-fill {
  height: 100%; width: 0%; border-radius: inherit;
  background: var(--grad); transition: width 0.5s ease;
}

.advice {
  margin-top: 18px; padding: 16px 18px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); line-height: 1.7;
}
.advice strong { color: var(--accent); }
.advice.good { border-color: rgba(61, 220, 151, 0.4); }
.advice.bad { border-color: rgba(255, 112, 133, 0.4); }