:root {
  color-scheme: dark;
  --bg: #0e1118;
  --panel: #141923;
  --panel-strong: #1a202d;
  --line: #2b3342;
  --text: #eef0f5;
  --muted: #9299a8;
  --purple: #8878b5;
  --lavender: #a99bcb;
  --green: #68ef9d;
  --green-core: #56d68b;
  --green-soft: rgba(86, 214, 139, .13);
  --critical: #e36c78;
  --amber: #ffc66d;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 73% 33%, rgba(98, 84, 139, .09), transparent 31rem),
    var(--bg);
  color: var(--text);
}

a { color: inherit; text-decoration: none; }

header {
  position: sticky;
  z-index: 2;
  top: 0;
  height: 64px;
  padding: 0 max(24px, calc((100vw - 1120px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(146, 153, 168, .18);
  background: rgba(14, 17, 24, .86);
  backdrop-filter: blur(14px);
}

.brand {
  width: max-content;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.04em;
}

.brand::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 9px;
  display: inline-block;
  border-radius: 50%;
  background: var(--green);
  vertical-align: 2px;
}

.brand span {
  margin-left: 3px;
  color: var(--green);
}

nav { display: flex; gap: 22px; color: var(--muted); font-size: 14px; }
nav a { transition: color 160ms ease; }
nav a:hover { color: var(--green); }

main { max-width: 1120px; margin: 0 auto; padding: 48px 24px 80px; }
.page-head, .section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.page-head { margin-bottom: 24px; }
h1 { margin: 0; font-size: 36px; letter-spacing: -.04em; }
h2 { margin: 0 0 20px; font-size: 18px; }

.eyebrow {
  margin: 0 0 7px;
  color: var(--lavender);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.button {
  min-height: 40px;
  padding: 11px 16px;
  display: inline-flex;
  justify-content: center;
  appearance: none;
  border: 1px solid rgba(145, 255, 186, .28);
  border-radius: 8px;
  background: linear-gradient(120deg, #4fd487, #70f2a4);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
  color: #092013;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.button:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.button.secondary {
  border-color: var(--line);
  background: rgba(136, 120, 181, .08);
  box-shadow: none;
  color: var(--text);
}

.button.secondary:hover { border-color: var(--purple); box-shadow: none; }

.panel {
  margin-bottom: 20px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(26, 32, 45, .97), rgba(20, 25, 35, .97));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .015);
}

.panel:hover { border-color: #364154; }
.attention { max-width: 680px; border-color: rgba(86, 214, 139, .28); }
.attention h2, .section-head h2 { margin: 0; }
.attention h2 span, .section-head > span { margin-left: 5px; color: var(--green); font-weight: 600; }

.attention-item {
  margin-top: 15px;
  padding: 15px 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
}

.attention-item + .attention-item { margin-top: 0; }
.attention-item strong, .student-name { display: block; font-weight: 750; }
.student-name:hover { color: var(--green); }
.attention-item small, td small { display: block; margin-top: 4px; color: var(--muted); }

.badge, .status { padding: 4px 8px; display: inline-block; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.badge.overdue { background: rgba(227, 108, 120, .17); color: #ffabb3; }
.badge.due { background: rgba(255, 198, 109, .17); color: var(--amber); }
.badge.soon { background: rgba(169, 155, 203, .15); color: #c8bce4; }
.badge.future { background: rgba(146, 153, 168, .1); color: #afb5c1; }
.status.active { background: var(--green-soft); color: var(--green); }
.status.paused { background: rgba(255, 198, 109, .15); color: var(--amber); }
.status.archived, .status.finished { background: rgba(146, 153, 168, .1); color: var(--muted); }

.table-wrap { margin: 10px -4px -8px; overflow-x: auto; }
table { width: 100%; min-width: 690px; border-collapse: collapse; }
th { padding: 12px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
td { padding: 15px 12px; border-top: 1px solid var(--line); font-size: 14px; }
td .badge { margin-left: 7px; }
.empty, .empty-card { padding: 24px; color: var(--muted); text-align: center; }

.form { max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form .wide, .cycle form .wide { grid-column: 1 / -1; }
label { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }

input, select, textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: none;
  background: #0e121a;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

input:focus, select:focus, textarea:focus { border-color: var(--green-core); box-shadow: 0 0 0 3px rgba(86, 214, 139, .1); }
textarea { resize: vertical; }
.actions { display: flex; justify-content: flex-end; gap: 10px; }
.errors { margin-bottom: 16px; padding: 12px; border: 1px solid rgba(227, 108, 120, .45); border-radius: 8px; background: rgba(227, 108, 120, .12); color: #ffb1b9; font-size: 13px; }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.profile-grid .panel { margin: 0; }
.cycle h2 { margin-bottom: 10px; font-size: 28px; }
.cycle > p:not(.eyebrow):not(.target) { color: var(--muted); }
.target { min-height: 42px; }
.cycle form { margin-top: 22px; padding-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid var(--line); }
.cycle form button { align-self: end; }
.history > div { padding: 12px 0; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.history span { color: var(--muted); text-align: right; }

.login { display: grid; place-items: center; padding: 20px; }
.login-card { width: min(390px, 100%); padding: 30px; border: 1px solid rgba(86, 214, 139, .23); border-radius: 14px; background: linear-gradient(145deg, var(--panel-strong), var(--panel)); box-shadow: 0 30px 80px rgba(0, 0, 0, .38); }
.login-card h1 { margin: 24px 0 20px; font-size: 26px; }
.login-card .button { width: 100%; margin-top: 16px; }

.dashboard-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; }
.dashboard-grid .panel { max-width: none; }
.panel h2 span { margin-left: 5px; color: var(--green); }
.lesson { padding: 13px 2px; display: flex; gap: 16px; border-top: 1px solid var(--line); }
.lesson strong { width: 46px; color: var(--green); }
.lesson span { display: flex; flex-direction: column; }
.lesson small, .latest, .hint { color: var(--muted); }
.cards { margin-top: 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.student-card { padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(14,18,26,.42); }
.student-card p { margin: 7px 0; font-size: 13px; }
.student-card form { display: grid; gap: 7px; }
.student-card .latest { grid-column: 1/-1; }
.compact { min-height: 32px; padding: 7px 11px; font-size: 12px; }
.tagline { margin: -10px 0 22px; padding: 13px 16px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; border: 1px solid rgba(86,214,139,.23); border-radius: 9px; background: var(--green-soft); }
.tagline code { color: var(--green); font-weight: 800; user-select: all; }
.tagline span { color: var(--muted); font-size: 12px; }
.record { padding: 13px 0; border-top: 1px solid var(--line); }
.record summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 13px; }
.record summary span:last-child, .record summary > span { color: var(--muted); }
.inline-form, .note-add { margin-top: 12px; display: flex; align-items: flex-end; gap: 9px; }
.inline-form input { max-width: 180px; }
.inline-form textarea, .note-add textarea { min-height: 42px; }
.note-add { margin-bottom: 20px; }
.note-add input { width: 160px; }
.text-danger { padding: 8px 0; border: 0; background: none; color: #ff9da7; cursor: pointer; }
.lifecycle { margin: 20px 0; display: flex; gap: 10px; }
.lifecycle details { position: relative; }
.lifecycle summary { list-style: none; }
.popover { width: 360px; margin-top: 8px; padding: 16px; position: absolute; z-index: 1; right: 0; display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-strong); box-shadow: 0 20px 40px rgba(0,0,0,.4); }
.button.danger { border-color: rgba(227,108,120,.35); background: rgba(227,108,120,.12); color: #ffabb3; box-shadow: none; }
.warning { border-color: rgba(255,198,109,.4); }
.success { margin-bottom: 18px; padding: 12px; border: 1px solid rgba(86,214,139,.35); border-radius: 8px; background: var(--green-soft); color: var(--green); }
.prose { max-width: 720px; }
.prose p { color: var(--muted); line-height: 1.6; }
.danger-zone { margin-top: 36px; color: var(--muted); }
.danger-zone > form { max-width: 440px; margin-top: 15px; padding: 18px; border: 1px solid rgba(227,108,120,.3); border-radius: 10px; }

@media (max-width: 760px) {
  header { padding: 0 18px; }
  main { padding: 30px 16px 60px; }
  h1 { font-size: 30px; }
  .profile-grid, .form { grid-template-columns: 1fr; }
  .dashboard-grid, .cards { grid-template-columns: 1fr; }
  .student-card { grid-template-columns: 1fr; }
  .student-card .latest { grid-column: auto; }
  .inline-form, .note-add { align-items: stretch; flex-direction: column; }
  .inline-form input, .note-add input { width: 100%; max-width: none; }
  .popover { width: min(340px, calc(100vw - 32px)); right: auto; left: -150px; }
  .form .wide { grid-column: auto; }
  .page-head { align-items: flex-end; }
  .panel { padding: 17px; border-radius: 11px; }
  .profile-grid { gap: 14px; }
  .cycle form { grid-template-columns: 1fr; }
  .cycle form .wide { grid-column: auto; }
  .history > div { display: block; }
  .history span { margin-top: 5px; display: block; text-align: left; }
}