@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --blue:       #0071E3;
  --blue-hover: #0077ED;
  --blue-light: #E8F1FB;
  --green:      #34C759;
  --orange:     #FF9F0A;
  --red:        #FF3B30;
  --purple:     #BF5AF2;
  --teal:       #5AC8FA;

  --bg:         #F5F5F7;
  --surface:    #FDFDFB;
  --surface-2:  #FAFAFA;

  --label-1:    #1D1D1F;
  --label-2:    #3A3A3C;
  --label-3:    #6E6E73;
  --label-4:    #AEAEB2;

  --fill-1:     rgba(116,116,128,0.08);
  --fill-2:     rgba(116,116,128,0.12);
  --separator:  rgba(0,0,0,0.08);

  --radius-sm:  10px;
  --radius:     14px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  --shadow-xs:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);

  --sidebar-w:  252px;
  --topbar-h:   52px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 18px; overscroll-behavior-y: none; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  background: var(--bg);
  color: var(--label-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  line-height: 1.5;
  overscroll-behavior-y: none;
}

a { text-decoration: none; color: var(--blue); }
a:hover { text-decoration: none; }
img { display: block; }

/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
.app { display: flex; min-height: 100vh; }

/* ═══════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 300;
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
}

/* ═══════════════════════════════════════
   MOBILE TOPBAR / MENU TOGGLE
═══════════════════════════════════════ */
.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }

.sidebar-header {
  padding: 20px 16px 14px;
  border-bottom: 1px solid var(--separator);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-brand-icon {
  width: 32px; height: 32px;
  background: var(--blue);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #FDFDFB;
  line-height: 1;
  flex-shrink: 0;
}
.sidebar-brand-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--label-1);
  letter-spacing: -0.2px;
}
.sidebar-role {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--label-3);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.sidebar-nav {
  flex: 1;
  padding: 10px 10px;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-nav::-webkit-scrollbar { width: 0; }

.nav-section {
  margin-bottom: 6px;
}
.nav-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--label-4);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 8px 8px 4px;
  display: block;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--label-2);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 1px;
  transition: background 0.12s ease, color 0.12s ease;
  position: relative;
}
.nav-link:hover {
  background: var(--fill-1);
  color: var(--label-1);
}
.nav-link.active {
  background: var(--blue);
  color: #fff;
}
.nav-link.active .nav-icon { color: #fff; }
.nav-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
  color: var(--label-3);
  flex-shrink: 0;
}
.nav-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 12px;
  min-width: 18px;
  text-align: center;
}
.nav-link.active .nav-badge {
  background: rgba(255,255,255,0.3);
}

.sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid var(--separator);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
  cursor: default;
}
.sidebar-user:hover { background: var(--fill-1); }

.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0071E3 0%, #5E5CE6 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.avatar-lg {
  width: 56px; height: 56px;
  border-radius: 18px;
  font-size: 23px;
}

.sidebar-user-info { overflow: hidden; }
.sidebar-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--label-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-email {
  font-size: 11px;
  color: var(--label-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-logout {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--red);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.12s;
  margin-top: 2px;
  cursor: pointer;
}
.sidebar-logout:hover { background: rgba(255,59,48,0.08); color: var(--red); }

/* ═══════════════════════════════════════
   MAIN
═══════════════════════════════════════ */
.main {
  flex: 1;
  margin-left: var(--sidebar-w);
  padding: 36px 40px;
  max-width: calc(100vw - var(--sidebar-w));
  min-height: 100vh;
}

/* ═══════════════════════════════════════
   PAGE HEADER
═══════════════════════════════════════ */
.page-header { margin-bottom: 28px; }
.page-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--label-1);
  line-height: 1.2;
}
.page-subtitle {
  font-size: 14px;
  color: var(--label-3);
  margin-top: 4px;
  font-weight: 400;
}
.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ═══════════════════════════════════════
   CARDS
═══════════════════════════════════════ */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  border: 1px solid rgba(0,0,0,0.04);
}
.card-sm { padding: 16px 20px; }
.card-hover {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.card-hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════
   STAT CARDS
═══════════════════════════════════════ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.stat-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,0.04);
}
.stat-icon-wrap {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px;
  margin-bottom: 14px;
}
.stat-val {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.8px;
  color: var(--label-1);
  line-height: 1;
}
.stat-val span {
  font-size: 18px;
  font-weight: 400;
  color: var(--label-4);
  letter-spacing: 0;
}
.stat-label {
  font-size: 14px;
  color: var(--label-3);
  margin-top: 4px;
  font-weight: 500;
}
.stat-progress {
  margin-top: 12px;
}
.stat-pct {
  font-size: 11px;
  color: var(--label-4);
  margin-top: 5px;
}

/* ═══════════════════════════════════════
   PROGRESS BAR
═══════════════════════════════════════ */
.pbar {
  height: 5px;
  background: var(--fill-2);
  border-radius: 100px;
  overflow: hidden;
}
.pbar-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
  letter-spacing: -0.1px;
}
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); color: #fff; }

.btn-success { background: var(--green); color: #fff; }
.btn-success:hover { background: #2CB553; color: #fff; }

.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #E02B22; color: #fff; }

.btn-secondary {
  background: var(--fill-1);
  color: var(--label-1);
}
.btn-secondary:hover { background: var(--fill-2); color: var(--label-1); }

.btn-outline {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.15);
  color: var(--label-2);
}
.btn-outline:hover { background: var(--fill-1); color: var(--label-1); }

.btn-ghost { background: transparent; color: var(--blue); }
.btn-ghost:hover { background: var(--blue-light); }

.btn-sm { padding: 6px 13px; font-size: 11px; border-radius: 8px; }
.btn-lg { padding: 13px 26px; font-size: 18px; border-radius: var(--radius); }
.btn-full { width: 100%; }

/* ═══════════════════════════════════════
   BADGES
═══════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-pending  { background: rgba(255,159,10,0.12); color: #CC7700; }
.badge-accepted { background: rgba(52,199,89,0.12);  color: #1A8A3C; }
.badge-rejected { background: rgba(255,59,48,0.12);  color: var(--red); }
.badge-blue     { background: var(--blue-light); color: var(--blue); }
.badge-gray     { background: var(--fill-1); color: var(--label-3); }

/* ═══════════════════════════════════════
   FORMS
═══════════════════════════════════════ */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--label-2);
  margin-bottom: 6px;
}
.form-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--label-1);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  outline: none;
  appearance: none;
}
.form-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,113,227,0.15);
}
.form-input::placeholder { color: var(--label-4); }
textarea.form-input { min-height: 100px; resize: vertical; line-height: 1.5; }
select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236E6E73' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

/* ═══════════════════════════════════════
   TABLE
═══════════════════════════════════════ */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead tr { border-bottom: 1px solid rgba(0,0,0,0.06); }
th {
  font-size: 11px;
  font-weight: 600;
  color: var(--label-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 10px 16px;
  text-align: left;
  white-space: nowrap;
}
td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 14px;
  color: var(--label-2);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.1s; }
tbody tr:hover td { background: var(--fill-1); }

/* ═══════════════════════════════════════
   SECTION HEADER
═══════════════════════════════════════ */
.section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--label-1);
  letter-spacing: -0.2px;
}

/* ═══════════════════════════════════════
   GRIDS
═══════════════════════════════════════ */
.grid-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3   { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.grid-4   { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.books-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 20px; }
.courses-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 20px; }
.sphere-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 12px; }

/* ═══════════════════════════════════════
   VIDEO EMBED
═══════════════════════════════════════ */
.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
}
.video-embed iframe,
.video-embed video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: none;
}

/* ═══════════════════════════════════════
   VIDEO LIST ITEM
═══════════════════════════════════════ */
.video-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--label-1);
  transition: background 0.1s;
  position: relative;
}
.video-row:hover { background: var(--fill-1); color: var(--label-1); }
.video-row + .video-row { border-top: 1px solid rgba(0,0,0,0.04); }
.video-row-thumb {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: var(--blue-light);
}
.video-row-thumb.done { background: rgba(52,199,89,0.12); }

/* Обложка урока — рисованная картинка вместо эмодзи-иконки, 16:9 */
.video-row-cover {
  width: 96px; height: 54px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 4px;
}
.video-row-badge {
  font-size: 14px;
  line-height: 1;
  background: rgba(0,0,0,0.55);
  border-radius: 6px;
  padding: 3px 5px;
  backdrop-filter: blur(2px);
}
@media (max-width: 640px) {
  .video-row-cover { width: 72px; height: 40px; }
}
.video-row-title { font-size: 14px; font-weight: 600; }
.video-row-meta  { font-size: 11px; color: var(--label-3); margin-top: 2px; }
.video-row-check { margin-left: auto; color: var(--green); font-size: 18px; flex-shrink: 0; }

/* ═══════════════════════════════════════
   HW CARD
═══════════════════════════════════════ */
.hw-card {
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid rgba(0,0,0,0.06);
  border-left: 3px solid transparent;
}
.hw-card.pending  { border-left-color: var(--orange); }
.hw-card.accepted { border-left-color: var(--green); }
.hw-card.rejected { border-left-color: var(--red); }

/* ═══════════════════════════════════════
   BOOK CARD
═══════════════════════════════════════ */
.book-card {
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  border: none;
  transition: transform 0.2s;
}
.book-card:hover {
  transform: translateY(-3px);
}
.book-cover {
  aspect-ratio: 2 / 3;
  height: auto;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  border-radius: 6px;
  box-shadow: 0 10px 20px -6px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.12);
  background: linear-gradient(135deg, var(--blue) 0%, #5E5CE6 100%);
  overflow: hidden;
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-cover.done { background: linear-gradient(135deg, var(--green) 0%, #00C7A3 100%); }
.book-cover.started { background: linear-gradient(135deg, var(--blue) 0%, #5E5CE6 100%); }
.book-cover.unread { background: linear-gradient(135deg, #C7C7CC 0%, #AEAEB2 100%); }
.book-body { padding: 10px 2px 0; }
.book-title {
  font-size: 14px; font-weight: 600; color: var(--label-1); margin-bottom: 2px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  min-height: 2.6em;
}
.book-author { font-size: 11px; color: var(--label-3); margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 15px; }
.book-desc {
  font-size: 11px; color: var(--label-3); line-height: 1.4; margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  min-height: 2.8em;
}
.book-sphere-slot { min-height: 42px; margin-bottom: 10px; }
.book-body .badge { display: inline-block; white-space: normal; max-width: 100%; line-height: 1.35; text-align: left; overflow-wrap: break-word; word-break: break-word; }

/* ═══════════════════════════════════════
   ALERTS
═══════════════════════════════════════ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 16px;
  font-weight: 500;
}
.alert-error   { background: rgba(255,59,48,0.08);  color: #CC1500; }
.alert-success { background: rgba(52,199,89,0.10);  color: #1A8A3C; }
.alert-info    { background: rgba(0,113,227,0.08);  color: var(--blue); }
.alert-warn    { background: rgba(255,159,10,0.10); color: #996000; }

/* ═══════════════════════════════════════
   DIVIDER
═══════════════════════════════════════ */
.divider { height: 1px; background: rgba(0,0,0,0.06); margin: 20px 0; }

/* ═══════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════ */
.empty {
  text-align: center;
  padding: 56px 24px;
}
.empty-icon { font-size: 40px; margin-bottom: 14px; }
.empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--label-1);
  margin-bottom: 6px;
}
.empty-sub { font-size: 14px; color: var(--label-3); }

/* ═══════════════════════════════════════
   ACTIONS DROPDOWN
═══════════════════════════════════════ */
.actions-menu { position: relative; display: inline-block; }
.actions-menu-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0,0,0,0.08);
  background: var(--surface);
  cursor: pointer;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.actions-menu-btn:hover { background: var(--fill-1); }
.actions-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 12px;
  width: 230px;
  z-index: 50;
  display: none;
}
.actions-dropdown.open { display: block; }
.actions-dropdown form { margin-bottom: 8px; }
.actions-dropdown form:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════
   MODAL
═══════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.18s ease;
}
.modal {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 28px;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: -0.2px;
}

@keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px) scale(0.97) } to { opacity: 1; transform: none } }

/* ═══════════════════════════════════════
   AUTH PAGES
═══════════════════════════════════════ */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F5F5F7;
  padding: 20px;
}
.auth-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 80px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.06);
  padding: 48px 44px;
  width: 100%;
  max-width: 408px;
  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.auth-logo-wrap {
  text-align: center;
  margin-bottom: 32px;
}
.auth-icon {
  width: 72px; height: 72px;
  background: linear-gradient(160deg, #0071E3 0%, #5E5CE6 100%);
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin-bottom: 18px;
  box-shadow: 0 8px 24px rgba(0,113,227,0.28);
}
.auth-title {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--label-1);
}
.auth-sub {
  font-size: 14px;
  color: var(--label-3);
  margin-top: 5px;
}
.auth-footer {
  text-align: center;
  margin-top: 22px;
  font-size: 14px;
  color: var(--label-3);
}
.auth-footer a { color: var(--blue); font-weight: 600; }

/* ═══════════════════════════════════════
   COURSE CARD
═══════════════════════════════════════ */
.course-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--label-1);
  transition: box-shadow 0.2s, transform 0.2s;
  margin-bottom: 10px;
}
.course-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  color: var(--label-1);
}
.course-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0071E3, #5E5CE6);
  display: flex; align-items: center; justify-content: center;
  font-size: 23px;
  flex-shrink: 0;
}
.course-title { font-size: 14px; font-weight: 700; }
.course-meta  { font-size: 11px; color: var(--label-3); margin-top: 3px; }
.course-arrow {
  margin-left: auto;
  color: var(--label-4);
  font-size: 18px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════
   SKILL BAR
═══════════════════════════════════════ */
.skill-item { margin-bottom: 16px; }
.skill-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.skill-name { font-size: 14px; font-weight: 600; color: var(--label-2); }
.skill-pct  { font-size: 14px; font-weight: 700; }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .main { margin-left: 0; padding: 76px 16px 20px; max-width: 100vw; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }

  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    padding: 0 16px;
    background: rgba(255,255,255,0.86);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.07);
    z-index: 250;
  }
  .mobile-topbar .sidebar-brand { gap: 8px; }
  .mobile-menu-btn {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0,0,0,0.08);
    background: var(--surface);
    font-size: 18px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 290;
  }
  body.sidebar-open { overflow: hidden; }
}

/* ═══════════════════════════════════════
   RANGE INPUT
═══════════════════════════════════════ */
input[type="range"] { outline: none; min-width: 0; }
input[type="range"]:focus,
input[type="range"]:focus-visible { outline: none; box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════
   STUDENT THEME — «MarketingPro Aurora»
   Тёмная премиум-тема только для кабинета ученика (body.theme-student).
   Админ/куратор остаются на светлой теме. Всё переопределяется через
   переменные + точечные правила, поэтому легко откатить (убрать класс).
═══════════════════════════════════════════════════════════════ */
body.theme-student {
  --font-display: 'Space Grotesk', 'Inter', sans-serif;

  --blue:       #7C5CFF;   /* электрик-вайолет — главный акцент везде */
  --blue-hover: #8E72FF;
  --blue-light: rgba(124,92,255,0.16);
  --green:      #2DD4A7;
  --orange:     #FFB020;
  --red:        #FF5C6C;
  --purple:     #C77DFF;
  --teal:       #4FD6FF;

  --bg:         #0A0A0F;
  --surface:    #15151F;
  --surface-2:  #1B1B27;

  --label-1:    #F4F4F8;
  --label-2:    #C7C7D2;
  --label-3:    #8A8A99;
  --label-4:    #5E5E6E;

  --fill-1:     rgba(255,255,255,0.05);
  --fill-2:     rgba(255,255,255,0.10);
  --separator:  rgba(255,255,255,0.08);

  --shadow-xs:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-sm:  0 2px 12px rgba(0,0,0,0.45);
  --shadow-md:  0 10px 34px rgba(0,0,0,0.5);
  --shadow-lg:  0 22px 64px rgba(0,0,0,0.62);

  background: var(--bg);
  color: var(--label-1);
}

/* Сигнатура: тихое северное сияние за всем контентом */
body.theme-student::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 48% at 12% -4%,  rgba(124,92,255,0.22), transparent 70%),
    radial-gradient(48% 42% at 102% 6%,  rgba(45,212,167,0.13), transparent 70%),
    radial-gradient(46% 44% at 86% 104%, rgba(255,176,32,0.09), transparent 72%);
}

/* Дисплейный шрифт — характер страницы */
body.theme-student .page-title,
body.theme-student .section-title,
body.theme-student .stat-val,
body.theme-student .sidebar-brand-name,
body.theme-student .modal-title,
body.theme-student .empty-title,
body.theme-student .course-title,
body.theme-student .auth-title { font-family: var(--font-display); letter-spacing: -0.4px; }

/* Заголовок-«герой» — мягкий градиентный текст */
body.theme-student .page-title {
  background: linear-gradient(92deg, #FFFFFF 0%, #D8CCFF 55%, #A78BFF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  line-height: 1.15; padding-bottom: 2px;
}
/* Space Grotesk выше Inter — чуть больше высоты строки, чтобы не подрезать цифры */
body.theme-student .stat-val { line-height: 1.08; }

/* Сайдбар — тёмное стекло */
body.theme-student .sidebar {
  background: rgba(16,16,24,0.72);
  border-right: 1px solid rgba(255,255,255,0.07);
}
body.theme-student .sidebar-brand-icon {
  background: linear-gradient(135deg, #7C5CFF, #B06BFF);
  box-shadow: 0 6px 18px -4px rgba(124,92,255,0.6);
}
body.theme-student .sidebar-role {
  color: rgba(255,255,255,0.45);
}
body.theme-student .nav-link.active {
  background: linear-gradient(135deg, rgba(124,92,255,0.95), rgba(176,107,255,0.85));
  box-shadow: 0 8px 20px -8px rgba(124,92,255,0.75);
}
body.theme-student .nav-link.active .nav-icon { color: #fff; }
body.theme-student .avatar {
  background: linear-gradient(135deg, #7C5CFF, #B06BFF); color: #fff;
}

/* Карточки — матовое стекло с подсветкой на ховере */
body.theme-student .card,
body.theme-student .stat-card,
body.theme-student .course-card,
body.theme-student .hw-card {
  background: rgba(23,23,33,0.55);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, var(--shadow-sm);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
body.theme-student .stat-card,
body.theme-student .course-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
body.theme-student .stat-card:hover,
body.theme-student .course-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124,92,255,0.45);
  box-shadow: 0 18px 44px -14px rgba(124,92,255,0.4), 0 1px 0 rgba(255,255,255,0.07) inset;
}

/* Иконки-градиенты */
body.theme-student .course-icon,
body.theme-student .book-cover:not(.done):not(.unread),
body.theme-student .book-cover.started {
  background: linear-gradient(135deg, #7C5CFF, #B06BFF);
}
body.theme-student .book-cover.done { background: linear-gradient(135deg, #2DD4A7, #14B8A6); }

/* Прогресс-бары */
body.theme-student .pbar { background: rgba(255,255,255,0.10); }

/* Кнопки */
body.theme-student .btn-primary {
  background: linear-gradient(135deg, #7C5CFF, #A06BFF);
  box-shadow: 0 8px 22px -8px rgba(124,92,255,0.7);
}
body.theme-student .btn-primary:hover { filter: brightness(1.08); background: linear-gradient(135deg, #7C5CFF, #A06BFF); }
body.theme-student .btn-secondary { background: rgba(255,255,255,0.07); color: var(--label-1); }
body.theme-student .btn-secondary:hover { background: rgba(255,255,255,0.12); }
body.theme-student .btn-outline { border-color: rgba(255,255,255,0.18); color: var(--label-2); }
body.theme-student .btn-outline:hover { background: rgba(255,255,255,0.06); }

/* Поля ввода */
body.theme-student .form-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.13);
  color: var(--label-1);
}
body.theme-student .form-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(124,92,255,0.28);
}
/* Браузерное автозаполнение принудительно красит фон белым — гасим на тёмной теме */
body.theme-student .form-input:-webkit-autofill,
body.theme-student .form-input:-webkit-autofill:hover,
body.theme-student .form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--label-1);
  -webkit-box-shadow: 0 0 0 1000px #191923 inset;
  box-shadow: 0 0 0 1000px #191923 inset;
  caret-color: var(--label-1);
}

/* Бейджи — светлый текст для контраста на тёмном */
body.theme-student .badge-pending  { color: #FFC97A; background: rgba(255,176,32,0.16); }
body.theme-student .badge-accepted { color: #5BE3B0; background: rgba(45,212,167,0.16); }
body.theme-student .badge-rejected { color: #FF8A95; background: rgba(255,92,108,0.16); }
body.theme-student .badge-blue     { color: #C0AEFF; background: rgba(124,92,255,0.20); }
body.theme-student .badge-gray     { color: var(--label-3); background: rgba(255,255,255,0.07); }

/* Алерты */
body.theme-student .alert-error   { color: #FF9AA5; background: rgba(255,92,108,0.12); }
body.theme-student .alert-success { color: #6FE9BC; background: rgba(45,212,167,0.12); }
body.theme-student .alert-info    { color: #C0AEFF; background: rgba(124,92,255,0.12); }
body.theme-student .alert-warn    { color: #FFD08A; background: rgba(255,176,32,0.12); }

/* Таблицы / разделители (на случай таблиц в кабинете) */
body.theme-student thead tr { border-bottom-color: rgba(255,255,255,0.10); }
body.theme-student td { border-bottom-color: rgba(255,255,255,0.06); color: var(--label-2); }
body.theme-student tbody tr:hover td { background: rgba(255,255,255,0.04); }
body.theme-student .divider { background: rgba(255,255,255,0.08); }
body.theme-student .video-row + .video-row { border-top-color: rgba(255,255,255,0.06); }
body.theme-student .video-row:hover { background: rgba(255,255,255,0.05); }

/* Мобильный топбар */
body.theme-student .mobile-topbar {
  background: rgba(14,14,21,0.82);
  border-bottom-color: rgba(255,255,255,0.08);
}
body.theme-student .mobile-menu-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: var(--label-1);
}

/* Дышащее сияние — единственная постоянная анимация, очень медленная и тихая */
@keyframes auroraBreathe {
  0%   { transform: translate(0, 0) scale(1);        opacity: 0.85; }
  50%  { transform: translate(1.5%, -1%) scale(1.06); opacity: 1; }
  100% { transform: translate(0, 0) scale(1);        opacity: 0.85; }
}
body.theme-student::before { animation: auroraBreathe 20s ease-in-out infinite; }

/* Страница входа/регистрации — тот же премиум-мир (первое впечатление) */
body.theme-student .auth-wrap { background: transparent; }
body.theme-student .auth-card {
  background: rgba(23,23,33,0.62);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
body.theme-student .auth-icon {
  background: linear-gradient(160deg, #7C5CFF, #B06BFF);
  box-shadow: 0 12px 32px rgba(124,92,255,0.45);
}
body.theme-student .auth-sub,
body.theme-student .auth-footer { color: var(--label-3); }
body.theme-student .auth-footer a { color: #B9A6FF; }

@media (prefers-reduced-motion: reduce) {
  body.theme-student .stat-card,
  body.theme-student .course-card { transition: none; }
  body.theme-student::before { animation: none; }
}

/* Кнопка переключения темы (сайдбар ученика) */
.theme-toggle-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px; margin-bottom: 2px;
  border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--label-2);
  font-size: 14px; font-weight: 500; font-family: inherit;
  cursor: pointer; text-align: left;
  transition: background 0.12s;
}
.theme-toggle-btn:hover { background: var(--fill-1); }


/* ── типографика по гайду «Дизайн для недизайнеров» ────────────────────
   Межстрочное расстояние: в заголовках меньше высоты букв (тесно),
   в мелких текстах больше (свободно). Раньше на всём сайте стояло 1.5,
   из-за чего крупные заголовки «рассыпались» по вертикали.            */
h1, h2, h3, .page-title, .stat-val {
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.card-title, .video-row-title {
  line-height: 1.25;
}
.video-row-meta, .badge, .book-meta, small {
  line-height: 1.55;
}


/* ── чистка декора по гайду: плашки убраны ─────────────────────────────
   «Плашки. Не используйте их никогда» — заливку и скругление снимаем,
   остаётся только текст. Цвет сохраняем лишь у статусов домашки:
   там он несёт смысл (принято / ждёт / пересдача), а не украшает.     */
.badge {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--label-3);
  font-weight: 500;
}
.badge + .badge { margin-left: 14px; }
.badge-pending  { color: #8A5206 !important; }
.badge-accepted { color: #186B44 !important; }
.badge-rejected { color: #A32A20 !important; }
.badge-blue, .badge-gray { color: var(--label-3) !important; }


/* ── обложка вместо постера ────────────────────────────────────────────
   Плеер затемняет poster под своей кнопкой. Поэтому до первого клика
   показываем обложку обычной картинкой — она выглядит ровно так, как
   нарисована.                                                          */
.cover-gate { position: relative; display: inline-block; max-width: 100%; cursor: pointer; line-height: 0; }
.cover-gate img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.cover-gate::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgba(20,21,24,0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/26px no-repeat;
  backdrop-filter: blur(3px);
  transition: background-color .15s;
}
.cover-gate:hover::after { background-color: rgba(20,21,24,0.75); }


/* ── профиль из сайдбара ───────────────────────────────────────────────
   Блок пользователя стал ссылкой: курсор должен на это намекать,
   а загруженный аватар — показываться картинкой, а не буквой.        */
.sidebar-user { cursor: pointer; text-decoration: none; color: inherit; }
img.avatar { object-fit: cover; }


/* ── иконки вместо эмодзи ──────────────────────────────────────────────
   Рисунок задаётся маской, поэтому иконка красится цветом текста и
   масштабируется вместе с ним. Никаких цветных смайликов в интерфейсе. */
.ic {
  display: inline-block;
  width: 1.05em; height: 1.05em;
  vertical-align: -0.16em;
  background-color: currentColor;
  flex-shrink: 0;
}
.ic-menu { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-close { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-check { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-edit { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l10.5-10.5a2.1 2.1 0 0 0-3-3L5 17v3z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l10.5-10.5a2.1 2.1 0 0 0-3-3L5 17v3z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-search { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-sun { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zM12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zM12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-moon { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-plus { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-lock { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h12v9H6zM9 11V8a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h12v9H6zM9 11V8a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-clip { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11l-8.5 8.5a4.5 4.5 0 0 1-6.4-6.4L13.5 4.6a3 3 0 1 1 4.2 4.2L9.3 17.2a1.5 1.5 0 1 1-2.1-2.1L15 7.3'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11l-8.5 8.5a4.5 4.5 0 0 1-6.4-6.4L13.5 4.6a3 3 0 1 1 4.2 4.2L9.3 17.2a1.5 1.5 0 1 1-2.1-2.1L15 7.3'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-warn { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9.5 17H2.5L12 3zM12 10v4M12 17.5v.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9.5 17H2.5L12 3zM12 10v4M12 17.5v.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-back { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-clock { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 7v5.2l3.4 2%27/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 7v5.2l3.4 2%27/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-undo { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9 5L4 10l5 5M4 10h9a6 6 0 0 1 0 12h-3%27/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9 5L4 10l5 5M4 10h9a6 6 0 0 1 0 12h-3%27/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-play { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23000%27%3E%3Cpath d=%27M8 5.2v13.6L19 12z%27/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23000%27%3E%3Cpath d=%27M8 5.2v13.6L19 12z%27/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-exit { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M15 4h4v16h-4M12 8l4 4-4 4M16 12H4%27/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M15 4h4v16h-4M12 8l4 4-4 4M16 12H4%27/%3E%3C/svg%3E") center/contain no-repeat; }


/* ── сетка уроков ──────────────────────────────────────────────────────
   Крупная обложка 16:9, под ней название и статус — раскладка, к которой
   человек привык на видеосервисах. Ширина карточки не меньше 300px,
   иначе обложка снова становится нечитаемой миниатюрой.               */
.lesson-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px 22px;
}
.lesson-card { display: block; text-decoration: none; color: inherit; }
.lesson-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: #15161A center/cover no-repeat;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.lesson-card:hover .lesson-cover {
  filter: brightness(1.06);
}
.lesson-play {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(18,19,22,0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/24px no-repeat;
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .16s;
}
.lesson-card:hover .lesson-play { opacity: 1; }
.lesson-time {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(10,11,13,0.78);
  color: #F0EEEA;
  font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.lesson-done {
  position: absolute; left: 8px; top: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.lesson-badge {
  position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: rgba(10,11,13,0.65); color: #F0EEEA;
  display: flex; align-items: center; justify-content: center;
}
.lesson-card.is-locked { opacity: .55; cursor: not-allowed; }
.lesson-card.is-locked .lesson-cover { filter: grayscale(.4); }
.lesson-name {
  font-size: 18px; font-weight: 600; line-height: 1.25;
  margin-top: 11px;
}
.lesson-meta {
  font-size: 14px; color: var(--label-3); line-height: 1.5;
  margin-top: 4px;
}
@media (max-width: 560px) {
  .lesson-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* шкала применена */


/* ═══════════════════════════════════════════════════════════════════════
   КАБИНЕТ УЧЕНИКА — по гайду «Дизайн для недизайнеров»
   ───────────────────────────────────────────────────────────────────────
   Тема приведена к тому же миру, что и обложки уроков: фон #131417,
   текст #F0EEEA, один тон, ничего лишнего. Гайд прямо запрещает то,
   на чём стояла прежняя тема, — декоративные элементы, разноцветные
   заливки, градиентный текст и постоянную анимацию. Поэтому:
     · северное сияние и его «дыхание» выключены;
     · заголовок снова одного цвета, а не градиент;
     · вместо пяти акцентов один — сам текст (светлое на тёмном);
     · цвет остался только там, где несёт смысл (статус домашки).
   Блок идёт последним, поэтому перекрывает прежнюю тему целиком.
═════════════════════════════════════════════════════════════════════ */
body.theme-student {
  --font-display: -apple-system, 'SF Pro Display', 'Inter', system-ui, sans-serif;

  --ink:        #F0EEEA;   /* тот же цвет, что на обложках */
  --blue:       #F0EEEA;   /* «акцент» — это просто светлое на тёмном */
  --blue-hover: #FFFFFF;
  --blue-light: rgba(240,238,233,0.10);
  --green:      #7FBF9A;
  --orange:     #D8A657;
  --red:        #D97C7C;
  --purple:     #F0EEEA;
  --teal:       #F0EEEA;

  --bg:         #131417;
  --surface:    #1A1B1F;
  --surface-2:  #212226;

  --label-1:    #F0EEEA;
  --label-2:    rgba(240,238,233,0.72);
  --label-3:    rgba(240,238,233,0.48);
  --label-4:    rgba(240,238,233,0.30);

  --fill-1:     rgba(240,238,233,0.06);
  --fill-2:     rgba(240,238,233,0.11);
  --separator:  rgba(240,238,233,0.10);

  --shadow-xs:  none;
  --shadow-sm:  none;
  --shadow-md:  none;
  --shadow-lg:  none;

  background: var(--bg);
  color: var(--label-1);
}

/* Сияние и его анимация — декор, гайд их не допускает */
body.theme-student::before { content: none; background: none; animation: none; }

/* Заголовок — один цвет, без градиентной заливки */
body.theme-student .page-title {
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: var(--label-1); color: var(--label-1);
  line-height: 1.1; padding-bottom: 0;
}

/* Знак школы и аватар — плоские, тем же тоном */
body.theme-student .sidebar-brand-icon {
  background: var(--ink); color: #131417; box-shadow: none;
}
body.theme-student .avatar {
  background: var(--fill-2); color: var(--ink); box-shadow: none;
}

/* Активный пункт меню — светлая плашка с тёмным текстом, как в админке */
body.theme-student .nav-link.active {
  background: var(--ink); color: #131417; box-shadow: none;
}
body.theme-student .nav-link.active .nav-icon,
body.theme-student .nav-link.active .ic { color: #131417; }

/* Сайдбар и топбар — плоские, без стекла */
body.theme-student .sidebar {
  background: #17181C; border-right: 1px solid var(--separator);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.theme-student .mobile-topbar {
  background: #17181C; border-bottom-color: var(--separator);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.theme-student .mobile-menu-btn {
  background: transparent; border-color: var(--separator); color: var(--label-1);
}

/* Карточки — плоские, без размытия, подсветки и подпрыгивания */
body.theme-student .card,
body.theme-student .stat-card,
body.theme-student .course-card,
body.theme-student .hw-card,
body.theme-student .auth-card {
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.theme-student .stat-card:hover,
body.theme-student .course-card:hover {
  transform: none;
  border-color: rgba(240,238,233,0.22);
  box-shadow: none;
}

/* Значки разделов и корешки книг — тон вместо градиента */
body.theme-student .course-icon,
body.theme-student .book-cover:not(.done):not(.unread),
body.theme-student .book-cover.started,
body.theme-student .book-cover.done,
body.theme-student .auth-icon {
  background: var(--fill-2); color: var(--ink); box-shadow: none;
}

/* Кнопки — светлое на тёмном, ровно наоборот к светлой теме */
body.theme-student .btn-primary {
  background: var(--ink); color: #131417; box-shadow: none;
}
body.theme-student .btn-primary:hover {
  background: #FFFFFF; color: #131417; filter: none;
}
body.theme-student .btn-success { background: var(--green); color: #131417; }
body.theme-student .btn-danger  { background: var(--red);   color: #131417; }

/* Поля ввода — без цветного свечения по фокусу */
body.theme-student .form-input:focus {
  border-color: rgba(240,238,233,0.40);
  box-shadow: none;
}

/* Статусы — заливку сняли, остался только смысловой цвет текста */
body.theme-student .badge-pending  { color: #D8A657; background: none; }
body.theme-student .badge-accepted { color: #7FBF9A; background: none; }
body.theme-student .badge-rejected { color: #D97C7C; background: none; }
body.theme-student .badge-blue,
body.theme-student .badge-gray     { color: var(--label-3); background: none; }

body.theme-student .alert-error   { color: #D97C7C; background: rgba(217,124,124,0.10); }
body.theme-student .alert-success { color: #7FBF9A; background: rgba(127,191,154,0.10); }
body.theme-student .alert-info    { color: var(--label-2); background: var(--fill-1); }
body.theme-student .alert-warn    { color: #D8A657; background: rgba(216,166,87,0.10); }

body.theme-student .auth-footer a { color: var(--label-1); }
body.theme-student .pbar { background: var(--fill-2); }
body.theme-student .pbar-fill { background: var(--ink); }