* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f6f8fb; color: #1f2937; }
a { color: #4f46e5; text-decoration: none; }
.page { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 56px; }
.topbar { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 24px; }
.topbar-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.brand { font-size: 22px; font-weight: 800; }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 18px; padding: 24px; box-shadow: 0 10px 30px rgba(15,23,42,.06); margin-bottom: 20px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
label { font-size: 13px; font-weight: 700; color: #374151; }
input, textarea, select { width: 100%; border: 1px solid #d1d5db; border-radius: 10px; padding: 11px 12px; font-size: 14px; background: #fff; }
textarea { min-height: 120px; resize: vertical; }
.checkbox-row { display: flex; flex-wrap: wrap; gap: 10px; }
.checkbox-row label { border: 1px solid #d1d5db; border-radius: 999px; padding: 9px 12px; cursor: pointer; background: #fff; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; padding: 11px 16px; font-weight: 800; cursor: pointer; }
.btn-primary { background: #4f46e5; color: #fff; }
.btn-secondary { background: #eef2ff; color: #3730a3; }
.btn-ghost { background: #fff; color: #374151; border: 1px solid #d1d5db; }
.hero { position: relative; min-height: 220px; border-radius: 22px; overflow: hidden; background: linear-gradient(135deg,#4338ca,#06b6d4); color: #fff; padding: 28px; display: flex; align-items: end; }
.hero img.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero-content { position: relative; z-index: 1; }
.logo { width: 84px; height: 84px; border-radius: 20px; border: 4px solid rgba(255,255,255,.8); object-fit: cover; background: #fff; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.badge { border-radius: 999px; padding: 7px 10px; background: #eef2ff; color: #3730a3; font-size: 13px; font-weight: 700; }
.lesson-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.lesson-card { border: 1px solid #e5e7eb; border-radius: 16px; padding: 18px; background: #fff; }
.lesson-card-clickable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.lesson-card-clickable:hover,
.lesson-card-clickable:focus { border-color: #a5b4fc; box-shadow: 0 12px 28px rgba(79,70,229,.12); transform: translateY(-2px); outline: none; }
.lesson-card.selected { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.14); }
.student-application-card h3 { font-size: 20px; }
.lesson-card h3 { margin: 0 0 8px; }
.muted { color: #6b7280; }
.error { color: #dc2626; font-weight: 700; }
.success { color: #047857; font-weight: 700; }
.hidden { display: none !important; }
.modal-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(15,23,42,.5); display: flex; align-items: flex-start; justify-content: center; padding: 32px 16px; overflow-y: auto; }
.modal-dialog { width: min(760px, 100%); margin: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.modal-head h2 { margin: 0; }
.modal-close { background: none; border: 0; font-size: 26px; line-height: 1; color: #6b7280; cursor: pointer; padding: 4px 8px; }
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } .topbar { flex-direction: column; align-items: flex-start; } }

/* Mobile responsive baseline ===================================== */
@media (max-width: 768px) {
  body { overflow-x: hidden; }

  .page {
    width: min(100%, calc(100% - 24px));
    padding: 20px 0 36px;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .topbar-actions {
    justify-content: flex-start;
  }

  .brand {
    font-size: 20px;
  }

  .card {
    border-radius: 14px;
    padding: 18px;
  }

  .grid,
  .lesson-list {
    grid-template-columns: 1fr;
  }

  .btn,
  input,
  textarea,
  select {
    min-height: 42px;
  }

  .checkbox-row label {
    border-radius: 12px;
  }

  .hero {
    min-height: 180px;
    padding: 20px;
    border-radius: 16px;
  }

  .logo {
    width: 68px;
    height: 68px;
    border-radius: 16px;
  }

  .lesson-card {
    padding: 16px;
  }

  .modal-overlay {
    align-items: flex-end;
    padding: 10px;
  }

  .modal-dialog {
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    margin: 0;
  }
}