:root { color-scheme: dark; }

body { background-image: radial-gradient(1200px 600px at 12% -10%, rgba(79,141,255,.16), transparent 60%); }

.surface {
  border-radius: 16px;
  border: 1px solid #1e2a45;
  background: linear-gradient(180deg, rgba(18,28,51,.9), rgba(13,20,37,.9));
  box-shadow: 0 18px 40px -30px rgba(0,0,0,.9);
}

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 12px; padding: .55rem .9rem; font-size: .875rem; font-weight: 600;
  transition: all .18s ease; border: 1px solid #1e2a45; color: #cbd5f5; background: #121c33;
}
.btn:hover { color: #fff; border-color: #2c3d63; transform: translateY(-1px); }
.btn-primary { background: #4f8dff; border-color: #4f8dff; color: #06101f; }
.btn-primary:hover { background: #6ba0ff; border-color: #6ba0ff; }
.btn-danger:hover { color: #f87171; border-color: rgba(248,113,113,.5); }

.field {
  width: 100%; border-radius: 12px; border: 1px solid #1e2a45; background: #0d1425;
  padding: .55rem .75rem; font-size: .875rem; color: #e2e8f5; outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field:focus { border-color: #4f8dff; box-shadow: 0 0 0 3px rgba(79,141,255,.25); }

table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
table.data th {
  text-align: left; padding: .7rem .9rem; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: #8fa0c4; border-bottom: 1px solid #1e2a45; white-space: nowrap;
}
table.data td { padding: .8rem .9rem; border-bottom: 1px solid rgba(30,42,69,.7); vertical-align: middle; }
table.data tbody tr { transition: background .15s ease; }
table.data tbody tr:nth-child(even) { background: rgba(18,28,51,.35); }
table.data tbody tr:hover { background: rgba(79,141,255,.08); }

.badge { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .15rem .6rem; font-size: .72rem; font-weight: 600; }
.badge-live { background: rgba(52,211,153,.14); color: #34d399; }
.badge-inactive { background: rgba(148,163,184,.14); color: #cbd5f5; }
.badge-graduated { background: rgba(79,141,255,.14); color: #7fb0ff; }
.badge-present { background: rgba(52,211,153,.14); color: #34d399; }
.badge-late { background: rgba(251,191,36,.14); color: #fbbf24; }
.badge-absent { background: rgba(248,113,113,.14); color: #f87171; }
.badge-excused { background: rgba(129,140,248,.16); color: #a5b4fc; }

.skel { position: relative; overflow: hidden; background: #121c33; border-radius: 12px; }
.skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

.fade-in { animation: fadeIn .22s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(2,6,16,.75); padding: 1rem; }