:root {
  --bg: #eef8ff;
  --bg-2: #dff2ff;
  --card: rgba(255, 255, 255, 0.88);
  --card-solid: #ffffff;
  --text: #14304d;
  --muted: #6a829a;
  --primary: #1597e5;
  --primary-dark: #0574bd;
  --primary-2: #35b7ff;
  --primary-soft: #d9f1ff;
  --line: #cfe7f7;
  --success: #12805c;
  --warning: #b56a00;
  --danger: #c23b4a;
  --shadow: 0 20px 60px rgba(18, 92, 143, 0.14);
  --shadow-sm: 0 10px 30px rgba(18, 92, 143, 0.10);
  --radius: 24px;
  --radius-sm: 14px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(79, 187, 255, .24), transparent 30%),
    radial-gradient(circle at 85% 15%, rgba(124, 213, 255, .28), transparent 32%),
    linear-gradient(135deg, var(--bg), var(--bg-2));
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: var(--primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #eaf6ff; border: 1px solid var(--line); padding: 2px 6px; border-radius: 8px; }

.app-shell {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  padding: 28px;
  background: rgba(255,255,255,.60);
  backdrop-filter: blur(18px);
  border-right: 1px solid rgba(207,231,247,.82);
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #24a8f2, #006fb4);
  box-shadow: 0 14px 28px rgba(0, 111, 180, .24);
}
.brand-mark-img {
  width: 56px;
  height: 56px;
  display: block;
}
.brand-title { font-weight: 900; font-size: 22px; letter-spacing: -.04em; }
.brand-subtitle { color: var(--muted); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }

.user-card, .card {
  background: var(--card);
  border: 1px solid rgba(207,231,247,.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.user-card { padding: 18px; }
.user-name { font-weight: 850; margin: 6px 0 12px; }
.role-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-status { margin-top: 12px; font-size: 12px; color: var(--muted); font-weight: 800; }
.mini-status.ok { color: var(--success); }
.mini-status.bad { color: var(--danger); }

.pill, .badge {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: #07588d;
  font-size: 13px;
  font-weight: 900;
}
.badge { display: inline-flex; align-items: center; white-space: nowrap; }
.badge.success { background: #e8fff7; color: var(--success); }
.badge.danger { background: #fff0f3; color: var(--danger); }
.badge.warning { background: #fff7e7; color: var(--warning); }

.nav { display: grid; gap: 8px; }
.nav-btn {
  border: 0;
  text-align: left;
  padding: 14px 16px;
  border-radius: 16px;
  background: transparent;
  color: var(--text);
  font-weight: 850;
  transition: .18s ease;
}
.nav-btn:hover, .nav-btn.active {
  background: linear-gradient(135deg, rgba(21,151,229,.15), rgba(255,255,255,.78));
  color: var(--primary-dark);
}
.sidebar-footer { margin-top: auto; display: grid; gap: 12px; }
.api-link { font-size: 13px; color: var(--muted); }

.main { padding: 30px; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.crumbs { color: var(--primary-dark); font-size: 13px; font-weight: 900; margin-bottom: 6px; opacity: .78; }

h1, h2, h3 { margin: 0; letter-spacing: -.04em; }
h1 { font-size: clamp(32px, 4vw, 54px); line-height: 1; }
h2 { font-size: 24px; margin-top: 4px; }
h3 { font-size: 18px; }
p { line-height: 1.55; }
.muted { color: var(--muted); }
.eyebrow { color: var(--primary-dark); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 950; }

.exam-switch { display: flex; gap: 8px; padding: 6px; border-radius: 20px; background: rgba(255,255,255,.76); border: 1px solid var(--line); }
.exam-btn { border: 0; padding: 12px 20px; border-radius: 15px; background: transparent; color: var(--muted); font-weight: 950; }
.exam-btn.active { background: var(--primary); color: #fff; box-shadow: 0 10px 24px rgba(21,151,229,.3); }

.card { padding: 24px; margin-bottom: 22px; }
.subtle-card { box-shadow: var(--shadow-sm); background: rgba(255,255,255,.70); }
.hero-card, .dashboard-hero { background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(218,242,255,.9)); }
.dashboard-hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.grid { display: grid; gap: 22px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }

.login-panel { display: grid; grid-template-columns: 1fr minmax(280px, 440px); gap: 28px; align-items: center; }
.login-form, .inline-form { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.login-form { display: grid; }
.compact-form { margin-top: 16px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.filter-row .active { background: var(--primary); color: #fff; }

label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 850; margin-top: 12px; }
input, textarea, select {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  color: var(--text);
  border-radius: 14px;
  padding: 13px 14px;
  outline: none;
  min-width: 120px;
}
textarea { width: 100%; resize: vertical; min-height: 120px; }
input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(21,151,229,.12); }

.primary-btn, .secondary-btn, .ghost-btn, .danger-btn {
  border: 0;
  border-radius: 14px;
  padding: 13px 16px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.primary-btn { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; box-shadow: 0 12px 24px rgba(21,151,229,.24); }
.secondary-btn { background: #e7f6ff; color: var(--primary-dark); border: 1px solid var(--line); }
.ghost-btn { background: rgba(255,255,255,.75); color: var(--primary-dark); border: 1px solid var(--line); }
.danger-btn { background: #fff0f2; color: var(--danger); border: 1px solid #ffd1d8; }
.small { padding: 9px 12px; border-radius: 12px; font-size: 13px; }
button:disabled { opacity: .55; cursor: not-allowed; }

.hidden { display: none !important; }
.view { display: none; }
.view.active { display: block; }
.alert-root { display:grid; gap:10px; margin-bottom:16px; position: sticky; top: 12px; z-index: 4; }
.alert { border-radius: 16px; padding: 13px 16px; font-weight: 800; border: 1px solid var(--line); background: rgba(255,255,255,.92); box-shadow: var(--shadow-sm); }
.alert.success { color: var(--success); background:#ecfff8; border-color:#bfeedd; }
.alert.error { color: var(--danger); background:#fff1f3; border-color:#ffd0d8; }
.alert.info { color: var(--primary-dark); background:#edf8ff; }
.alert.warning { color: var(--warning); background:#fff8ec; border-color:#ffe1a8; }

.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.stat-card { border: 1px solid var(--line); background: rgba(255,255,255,.72); padding: 16px; border-radius: 18px; min-width: 0; }
.stat-value { font-size: 28px; font-weight: 950; color: var(--primary-dark); word-break: break-word; }
.stat-label { color: var(--muted); font-size: 13px; font-weight: 850; }

.list-placeholder, .material-box, .task-area { margin-top: 16px; }
.list { display: grid; gap: 10px; }
.list-item { border: 1px solid var(--line); background: rgba(255,255,255,.74); border-radius: 18px; padding: 14px; }
.list-item-title { font-weight: 950; margin-bottom: 4px; }
.list-item-meta { color: var(--muted); font-size: 13px; line-height: 1.45; }
.list-item.good { border-color: #bfeedd; background: #f1fff9; }
.list-item.bad { border-color: #ffd0d8; background: #fff7f8; }

.task-number-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; margin: 16px 0; }
.task-num-btn { border: 1px solid var(--line); background: rgba(255,255,255,.78); color: var(--text); border-radius: 16px; padding: 12px 8px; font-weight: 950; }
.task-num-btn:hover, .task-num-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 10px 22px rgba(21,151,229,.22); }
.task-num-btn.manual { background: #fff7e7; color: var(--warning); }
.task-num-btn.manual:hover, .task-num-btn.manual.active { background: var(--warning); color: #fff; border-color: var(--warning); }

.task-card { margin-top: 16px; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.74); }
.task-image-wrap { margin-top: 12px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.task-image { width: 100%; max-height: 720px; object-fit: contain; display: block; }
.task-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.answer-box { margin-top: 14px; display: grid; gap: 10px; }
.result-box { margin-top: 14px; border-radius: 18px; padding: 14px; background: #f7fcff; border: 1px solid var(--line); white-space: pre-wrap; }
.result-box.correct { background: #ecfff8; border-color: #bfeedd; color: var(--success); }
.result-box.wrong { background: #fff1f3; border-color: #ffd0d8; color: var(--danger); }

.code-box { min-height: 160px; overflow: auto; white-space: pre-wrap; background: #082135; color: #dff5ff; padding: 16px; border-radius: 18px; font-size: 13px; }
.settings-lines { display:grid; gap:10px; margin:16px 0; }
.checklist { display: grid; gap: 12px; margin-top: 16px; color: var(--muted); }
.telegram-widget-box { margin-top: 18px; padding: 14px; border: 1px dashed rgba(21, 111, 209, 0.28); border-radius: 18px; background: rgba(239, 248, 255, 0.82); }
.auth-hint { margin-top: 10px; font-size: 13px; color: var(--muted); }
canvas { width: 100%; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.72); margin: 14px 0; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(8, 33, 53, .38); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 20px; z-index: 20; }
.modal-card { width: min(560px, 100%); background: #fff; border-radius: 24px; border: 1px solid var(--line); box-shadow: 0 30px 100px rgba(8, 33, 53, .28); padding: 24px; }

@media (max-width: 1060px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .main { padding: 18px; }
  .grid.two, .login-panel { grid-template-columns: 1fr; }
  .topbar, .dashboard-hero { align-items: flex-start; flex-direction: column; }
  .quick-actions { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .sidebar { padding: 18px; }
  .card { padding: 18px; border-radius: 20px; }
  .stat-grid { grid-template-columns: 1fr; }
  .exam-switch { width: 100%; }
  .exam-btn { flex: 1; }
  .task-number-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .primary-btn, .secondary-btn, .ghost-btn, .danger-btn { width: 100%; }
}

/* Stage 8 admin panel */
.wide-card { grid-column: span 1; }
.user-detail-card {
  margin-top: 16px;
  border: 1px solid rgba(21,151,229,.22);
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(223,242,255,.72));
  border-radius: 22px;
  padding: 18px;
}
.admin-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0; }
.admin-toolbar select { min-width: 150px; }
.admin-detail-grid { margin-top: 16px; }
.mini-list { display:grid; gap:8px; margin-top: 10px; }
.mini-list > div { padding:10px 12px; border:1px solid var(--line); border-radius:14px; background: rgba(255,255,255,.65); font-size: 13px; }
.stat-grid.mini { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1060px) { .stat-grid.mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Stage 9/10: product-level student cabinet and teacher admin polish */
.student-focus-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: -6px 0 22px;
}
.focus-card {
  border: 1px solid rgba(21,151,229,.18);
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(229,246,255,.78));
  border-radius: 22px;
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.focus-icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #e8f6ff;
  box-shadow: inset 0 0 0 1px rgba(21,151,229,.12);
  flex: 0 0 auto;
}
.focus-label { color: var(--muted); font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
.focus-value { color: var(--primary-dark); font-size: 24px; line-height: 1.1; font-weight: 950; margin: 5px 0; word-break: break-word; }
.focus-value.small-text { font-size: 15px; color: var(--text); }
.focus-sub { color: var(--muted); font-size: 12px; font-weight: 800; line-height: 1.35; }
.tiny { padding: 7px 10px; border-radius: 10px; font-size: 12px; margin-top: 8px; }
.progress-master-card {
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(222,243,255,.72));
}
.progress-summary { display: grid; gap: 12px; margin-top: 16px; }
.progress-row { display: grid; gap: 7px; }
.progress-row-head { display:flex; align-items:center; justify-content:space-between; gap:10px; color: var(--text); font-weight: 950; }
.progress-track { height: 12px; border-radius: 999px; background: #dff1fb; overflow: hidden; border: 1px solid rgba(21,151,229,.14); }
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--primary-dark)); min-width: 2px; transition: width .25s ease; }
.goal-editor { display:flex; align-items:end; gap:12px; flex-wrap:wrap; margin-top:16px; }
.goal-editor label { min-width: 180px; flex: 1; }
.teacher-cockpit { background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(224,244,255,.82)); }
.cockpit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.teacher-action-plan { display:grid; gap:10px; margin-top: 16px; }
.teacher-action-item { padding: 13px 14px; border:1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.72); font-weight: 850; }
.teacher-action-item.warning { border-color: #ffe1a8; background: #fff9ef; color: #8b5b00; }
.teacher-action-item.success { border-color: #bfeedd; background: #effff8; color: #08764d; }
.admin-nav-strip { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.admin-warning { border-left: 5px solid var(--primary); }
.score-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 10px;
  background: #edf8ff;
  color: var(--primary-dark);
  font-weight: 950;
  font-size: 12px;
}
.score-chip.good { background: #e9fff7; color: var(--success); }
.score-chip.warn { background: #fff7e7; color: var(--warning); }
.score-chip.bad { background: #fff0f3; color: var(--danger); }
.list-item.clickable { cursor: pointer; transition: .16s ease; }
.list-item.clickable:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
@media (max-width: 1180px) {
  .student-focus-grid, .cockpit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .student-focus-grid, .cockpit-grid { grid-template-columns: 1fr; }
  .focus-card { padding: 16px; }
  .goal-editor { display:grid; }
}

/* Stage 11: responsive UX, accessibility and product polish */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(53,183,255,.20), transparent 30%),
    radial-gradient(circle at 82% 8%, rgba(21,151,229,.14), transparent 28%),
    radial-gradient(circle at 78% 88%, rgba(255,255,255,.55), transparent 30%);
  z-index: -1;
}
.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  transform: translateY(-140%);
  z-index: 80;
  background: var(--primary-dark);
  color: #fff;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 950;
  box-shadow: var(--shadow);
}
.skip-link:focus { transform: translateY(0); }
button, a, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: var(--primary-dark); font-weight: 850; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 4px solid rgba(21,151,229,.26);
  outline-offset: 3px;
}
.primary-btn, .secondary-btn, .ghost-btn, .danger-btn, .nav-btn, .task-num-btn, .exam-btn {
  min-height: 44px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.primary-btn:hover, .secondary-btn:hover, .ghost-btn:hover, .danger-btn:hover, .task-num-btn:hover {
  transform: translateY(-1px);
}
.primary-btn:active, .secondary-btn:active, .ghost-btn:active, .danger-btn:active, .task-num-btn:active { transform: translateY(0); }
.mobile-menu-toggle {
  display: none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.82);
  color: var(--primary-dark);
  width: 46px;
  height: 46px;
  border-radius: 16px;
  font-size: 22px;
  font-weight: 950;
  flex: 0 0 auto;
}
.mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(8,33,53,.34);
  backdrop-filter: blur(6px);
}
body.menu-open .mobile-backdrop { display: block; }
.topbar-copy { min-width: 0; }
.topbar-status {
  border: 1px solid rgba(21,151,229,.18);
  background: rgba(255,255,255,.74);
  color: var(--primary-dark);
  border-radius: 999px;
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}
.mobile-context {
  display: none;
  margin: 0 0 16px;
  padding: 12px 14px;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}
.mobile-context span {
  background: rgba(231,246,255,.78);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
}
.frontend-version { color: var(--muted); font-size: 12px; font-weight: 800; }
.login-benefits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.login-benefits span, .ux-hint {
  border: 1px solid rgba(21,151,229,.16);
  background: rgba(231,246,255,.74);
  color: #07588d;
  border-radius: 16px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 850;
}
.ux-hint { margin: 14px 0 0; line-height: 1.5; }
.ux-hint.soft { background: rgba(255,255,255,.65); color: var(--muted); }
.empty-state {
  border: 1px dashed rgba(21,151,229,.28);
  background: rgba(239,248,255,.72);
  border-radius: 18px;
  padding: 18px;
  color: var(--muted);
  font-weight: 850;
  line-height: 1.5;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.empty-state::before {
  content: "🤖";
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: linear-gradient(135deg, #24a8f2, #006fb4);
  color: white;
  font-size: 24px;
  box-shadow: 0 12px 26px rgba(0,111,180,.18);
  margin-bottom: 4px;
}
.skeleton-line, .skeleton-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(223,242,255,.9), rgba(255,255,255,.9), rgba(223,242,255,.9));
  background-size: 240% 100%;
  animation: skeletonMove 1.5s linear infinite;
}
.skeleton-line { height: 14px; border-radius: 999px; }
.skeleton-card { min-height: 82px; border-radius: 18px; border: 1px solid var(--line); }
@keyframes skeletonMove { to { background-position: -240% 0; } }
.alert { display: flex; align-items: flex-start; gap: 8px; }
.alert::before { content: "ℹ️"; }
.alert.success::before { content: "✅"; }
.alert.error::before { content: "⚠️"; }
.alert.warning::before { content: "🟡"; }
.card, .focus-card, .stat-card, .list-item, .task-card { backdrop-filter: blur(10px); }
.task-image-wrap { max-height: min(72vh, 780px); display: grid; place-items: center; }
.task-image { background: #fff; }
.code-box { max-height: 440px; }
.modal-card { max-height: min(86vh, 720px); overflow: auto; }
@media (max-width: 1060px) {
  .app-shell { display: block; }
  .mobile-menu-toggle { display: inline-grid; place-items: center; }
  .sidebar {
    position: fixed;
    z-index: 40;
    inset: 0 auto 0 0;
    width: min(88vw, 360px);
    height: 100dvh;
    transform: translateX(-104%);
    transition: transform .22s ease;
    overflow-y: auto;
    border-right: 1px solid rgba(207,231,247,.95);
    border-radius: 0 28px 28px 0;
  }
  body.menu-open .sidebar { transform: translateX(0); }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 12;
    margin: -18px -18px 18px;
    padding: 14px 18px;
    background: rgba(238,248,255,.86);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(207,231,247,.72);
    flex-direction: row;
    align-items: flex-start;
  }
  .topbar-actions { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .topbar-status { display: none; }
  .mobile-context { display: flex; }
  h1 { font-size: clamp(28px, 8vw, 42px); }
  .crumbs { display: none; }
}
@media (max-width: 720px) {
  .main { padding: 14px; }
  .topbar { margin: -14px -14px 16px; padding: 12px 14px; }
  .topbar-copy { flex: 1; }
  .topbar-actions { width: 100%; margin-left: 0; }
  .exam-switch { order: 3; }
  .dashboard-hero { border-radius: 24px; }
  .quick-actions, .task-actions, .inline-form, .login-form { width: 100%; }
  .inline-form > label, .login-form label { width: 100%; }
  input, textarea, select { width: 100%; }
  .task-number-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .task-num-btn { padding: 11px 6px; border-radius: 14px; }
  .alert-root { position: fixed; inset: auto 12px 12px 12px; z-index: 60; }
  .alert { box-shadow: 0 16px 60px rgba(8,33,53,.18); }
  .card-head { align-items: flex-start; flex-direction: column; }
  .stat-value { font-size: 24px; }
}
@media (max-width: 420px) {
  .task-number-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mobile-context { align-items: stretch; flex-direction: column; }
  .brand-title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}

/* Stage 12 diagnostics */
.system-status-area {
  margin-top: 18px;
}
.check-row {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .74);
}
.check-row span {
  color: var(--muted);
  font-size: 13px;
}
.check-row.ok {
  border-color: #bdeedb;
  background: #f1fff8;
}
.check-row.bad {
  border-color: #ffd2da;
  background: #fff5f7;
}
.compact-status-grid {
  margin-top: 16px;
}
.debug-details {
  margin-top: 16px;
}
.debug-details summary {
  cursor: pointer;
  color: var(--primary-dark);
  font-weight: 700;
  margin-bottom: 10px;
}


/* Stage 13 product features: old stage12 visual style preserved */
.empty-state { border: 1px dashed rgba(21,151,229,.28); background: rgba(255,255,255,.84); border-radius: 22px; padding: 18px; color: var(--muted); }
.empty-state strong, .empty-state b { color: var(--primary-dark); display:block; margin-bottom:2px; font-weight: 950; }
.empty-state span { display:block; }

.achievement-strip { display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.achievement-badge { border:1px solid var(--line); background: rgba(255,255,255,.76); border-radius: 22px; padding: 14px; display:flex; gap:12px; align-items:flex-start; }
.achievement-badge.locked { opacity:.58; filter: grayscale(.45); }
.achievement-icon { width:42px; height:42px; border-radius: 16px; display:grid; place-items:center; font-size: 22px; background: #e5f4ff; }
.achievement-title { font-weight: 950; color: var(--primary-dark); }
.achievement-desc { font-size: 13px; color: var(--muted); line-height: 1.35; margin-top: 3px; }

.mini-variant-card { background: linear-gradient(135deg, rgba(21,151,229,.12), rgba(255,255,255,.9)); }
.result-summary-card { border: 1px solid rgba(21,151,229,.25); background: linear-gradient(135deg, #e7f5ff, #fff); border-radius: 24px; padding: 18px; margin-top: 14px; }
.result-score-big { font-size: clamp(34px, 5vw, 56px); line-height: 1; font-weight: 1000; color: var(--primary-dark); }
.result-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.mistake-group-grid, .access-grid, .materials-cards-area { display:grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 14px; }
.mistake-card, .access-card, .material-topic-card { border:1px solid var(--line); background: rgba(255,255,255,.82); border-radius: 22px; padding: 16px; }
.mistake-card strong, .access-card strong, .material-topic-card strong { color: var(--primary-dark); }
.access-card.enabled { border-color: rgba(25,164,111,.34); background: #f1fff8; }
.access-card.locked { border-color: rgba(255,183,3,.35); background: #fff9ec; }
.material-topic-card .task-actions { margin-top: 10px; }
.score-chip { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#e5f4ff; color:var(--primary-dark); font-weight:950; }
.score-chip.good { background:#e9fff5; color:#0d7d55; }
.score-chip.warn { background:#fff8e7; color:#9a6500; }
.score-chip.bad { background:#fff0f3; color:#b91c3a; }

@media (max-width: 760px) {
  .achievement-strip, .mistake-group-grid, .access-grid, .materials-cards-area { grid-template-columns: 1fr; }
  .result-score-big { font-size: 42px; }
}

/* Stage 14: onboarding + exam mode */
.onboarding-card {
  border: 1px solid rgba(21, 151, 229, .20);
  background: linear-gradient(135deg, rgba(238, 249, 255, .96), rgba(255, 255, 255, .92));
}
.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.onboarding-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(207, 231, 247, .95);
  color: #24415f;
  line-height: 1.35;
}
.onboarding-step b {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #1597e5;
  color: white;
  box-shadow: 0 8px 18px rgba(21, 151, 229, .22);
}
.exam-mode-card {
  border-color: rgba(250, 173, 20, .32);
  background: linear-gradient(135deg, #fffdf6, #ffffff 52%, #eff9ff);
}
.checkbox-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.checkbox-label input {
  width: auto;
}
.exam-mode-status {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #eef7ff;
  color: #44627e;
  border: 1px dashed rgba(21, 151, 229, .35);
}
.exam-mode-status.active {
  background: #fff7e6;
  border-color: rgba(250, 173, 20, .5);
  color: #81530d;
}
.exam-mode-status.expired {
  background: #fff1f0;
  border-color: rgba(255, 77, 79, .45);
  color: #8c1d18;
}
.empty-state.compact::before { width: 38px; height: 38px; border-radius: 14px; font-size: 20px; }
.brand-note { color: var(--muted); font-size: 12px; font-weight: 800; }

.empty-state .secondary-btn,
.empty-state .ghost-btn {
  margin-top: 10px;
  align-self: flex-start;
}
@media (max-width: 900px) {
  .onboarding-steps {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .onboarding-steps {
    grid-template-columns: 1fr;
  }
}

/* Stage 15: homework + help page */
.homework-main-card { background: linear-gradient(135deg, rgba(238, 248, 255, .95), rgba(255,255,255,.95)); }
.homework-item { border-left: 4px solid rgba(14, 139, 217, .28); }
.homework-item.good { border-left-color: var(--success); }
.help-hero-card { background: linear-gradient(135deg, rgba(232, 245, 255, .96), rgba(255,255,255,.96)); }
.help-steps { display: grid; gap: 12px; margin-top: 12px; }
.help-steps > div { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.72); }
.help-steps b { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 999px; background: var(--primary-soft); color: var(--primary); }
.help-steps span { color: var(--text); line-height: 1.45; }
.compact-help > div { padding: 10px; }
#admin-homework-area .list-item { background: rgba(255,255,255,.78); }

.connection-details {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.62);
}

.connection-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text-soft);
  user-select: none;
}

.connection-details input {
  margin-top: 10px;
}

.connection-details button {
  margin-top: 8px;
}

/* Stage 19: simplified student-first UX */
.nav-btn { display: flex; align-items: center; gap: 10px; }
.nav-btn span { width: 22px; text-align: center; }
.learning-path-card {
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(226,245,255,.94));
}
.learning-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.path-step,
.practice-choice {
  border: 1px solid rgba(207,231,247,.95);
  background: rgba(255,255,255,.78);
  border-radius: 20px;
  padding: 16px;
  text-align: left;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.path-step:hover,
.practice-choice:hover {
  transform: translateY(-2px);
  border-color: rgba(21,151,229,.44);
  background: rgba(255,255,255,.96);
  text-decoration: none;
}
.path-step { display: flex; gap: 12px; align-items: flex-start; }
.path-step b {
  min-width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: white;
  background: var(--primary);
  box-shadow: 0 8px 20px rgba(21,151,229,.24);
}
.path-step strong,
.practice-choice b { display:block; font-size: 16px; margin-bottom: 4px; }
.path-step small,
.practice-choice span { display:block; color: var(--muted); line-height: 1.35; }
.practice-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.number-picker {
  border: 1px solid rgba(207,231,247,.9);
  border-radius: 20px;
  background: rgba(255,255,255,.58);
  padding: 12px 14px;
  margin: 14px 0;
}
.number-picker summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--primary-dark);
  user-select: none;
}
.number-picker .task-number-grid { margin-top: 14px; }
.progress-tabs-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.progress-tabs-note span { color: var(--muted); }
.progress-mistakes-block .grid.two { margin-bottom: 22px; }
.profile-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(231,247,255,.92));
}
.help-compact-card { background: linear-gradient(135deg, rgba(243,251,255,.96), rgba(255,255,255,.96)); }

@media (max-width: 1060px) {
  .learning-path,
  .practice-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .learning-path,
  .practice-choice-grid { grid-template-columns: 1fr; }
  .profile-hero { align-items: flex-start; flex-direction: column; }
  .nav-btn { min-height: 46px; }
}

/* Stage 20: final student-first UI polish */
.big-action {
  min-height: 52px;
  padding-inline: 20px;
  font-size: 15px;
}
.dashboard-hero {
  position: relative;
  overflow: hidden;
  border-color: rgba(21,151,229,.24);
}
.dashboard-hero::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -76px;
  top: -88px;
  background: radial-gradient(circle, rgba(21,151,229,.18), transparent 68%);
  pointer-events: none;
}
.dashboard-hero > * { position: relative; z-index: 1; }
.focus-card,
.stat-card,
.list-item,
.practice-choice,
.path-step,
.material-topic-card,
.access-card,
.mistake-card {
  box-shadow: 0 8px 24px rgba(18, 92, 143, .07);
}
.practice-choice.recommended {
  border-color: rgba(21,151,229,.45);
  background: linear-gradient(135deg, rgba(232,247,255,.96), rgba(255,255,255,.9));
}
.practice-choice.recommended::after {
  content: "рекомендуем";
  display: inline-flex;
  margin-top: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}
.ux-hint.warning {
  background: #fff7e7;
  color: #875600;
  border-color: rgba(181,106,0,.22);
}
.nav-btn.admin-entry {
  margin-top: 10px;
  border: 1px dashed rgba(21,151,229,.32);
  background: rgba(238,248,255,.55);
}
.teacher-mode .main {
  background:
    radial-gradient(circle at 96% 4%, rgba(21,151,229,.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.16));
}
.admin-workspace .admin-warning,
.teacher-cockpit {
  border-color: rgba(5,116,189,.25);
  background: linear-gradient(135deg, #f0f9ff, #ffffff);
}
.teacher-cockpit::before {
  content: "преподаватель";
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e7f6ff;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 950;
  margin-bottom: 10px;
}
.variant-start-card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid rgba(21,151,229,.22);
  background: linear-gradient(135deg, rgba(231,246,255,.94), rgba(255,255,255,.92));
  border-radius: 24px;
  padding: 18px;
  margin-top: 14px;
}
.beautiful-result {
  padding: 22px;
  background:
    radial-gradient(circle at top right, rgba(53,183,255,.20), transparent 42%),
    linear-gradient(135deg, #eaf7ff, #ffffff 62%);
  border-color: rgba(21,151,229,.30);
}
.result-hero-row,
.result-score-layout,
.task-center-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.result-emoji {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 30px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.result-score-layout { align-items: center; margin: 18px 0 10px; }
.result-score-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.result-mistake-block {
  margin-top: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.78);
  border-radius: 22px;
  padding: 16px;
}
.result-details {
  margin-top: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.70);
  border-radius: 18px;
  padding: 14px;
}
.result-details summary {
  cursor: pointer;
  color: var(--primary-dark);
  font-weight: 950;
}
.task-center-card {
  border: 1px solid rgba(21,151,229,.22);
  background: linear-gradient(135deg, rgba(236,249,255,.95), rgba(255,255,255,.92));
  border-radius: 24px;
  padding: 18px;
  margin: 16px 0;
  box-shadow: var(--shadow-sm);
}
.task-center-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.materials-cards-area {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.material-topic-card {
  cursor: pointer;
  text-align: left;
  color: var(--text);
  display: grid;
  gap: 6px;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.material-topic-card:hover {
  transform: translateY(-2px);
  border-color: rgba(21,151,229,.42);
  background: #fff;
}
.material-topic-card.has-mistakes {
  border-color: rgba(181,106,0,.26);
  background: #fffaf0;
}
.material-topic-num {
  color: var(--primary-dark);
  font-weight: 1000;
  font-size: 18px;
}
.material-topic-card small {
  color: var(--muted);
  line-height: 1.35;
  font-weight: 800;
}
.material-ready {
  background: linear-gradient(135deg, rgba(241,252,255,.98), rgba(255,255,255,.92));
}
.card p.muted {
  margin-top: 8px;
  margin-bottom: 0;
}
.card .eyebrow + h2 {
  margin-top: 3px;
}
@media (max-width: 760px) {
  .result-hero-row,
  .result-score-layout,
  .task-center-head,
  .variant-start-card {
    flex-direction: column;
  }
  .result-score-chips { justify-content: flex-start; }
  .quick-actions .primary-btn,
  .quick-actions .secondary-btn,
  .quick-actions .ghost-btn,
  .task-center-actions > *,
  .result-actions > * {
    width: 100%;
  }
}

/* Stage 21: внутренние меню в практике и админке */
.practice-tabs,
.admin-tabs,
.progress-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
  padding: 8px;
  border: 1px solid rgba(207,231,247,.88);
  border-radius: 20px;
  background: rgba(255,255,255,.62);
}
.practice-tab,
.admin-tab,
.progress-tab {
  border: 1px solid rgba(21,151,229,.18);
  border-radius: 14px;
  padding: 11px 14px;
  background: #eaf7ff;
  color: var(--primary-dark);
  font-weight: 950;
  cursor: pointer;
  transition: .16s ease;
}
.practice-tab:hover,
.admin-tab:hover,
.progress-tab:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.practice-tab.active,
.admin-tab.active,
.progress-tab.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 10px 24px rgba(21,151,229,.22);
}
.practice-panel,
.admin-panel,
.progress-panel {
  display: none !important;
}
.practice-panel.active,
.admin-panel.active,
.progress-panel.active {
  display: block !important;
}
article.practice-panel.active,
article.admin-panel.active,
article.progress-panel.active {
  display: block !important;
}
.admin-workspace .grid.two {
  align-items: start;
}
.admin-workspace .grid.two:empty {
  display: none;
}
@media (max-width: 680px) {
  .practice-tabs,
  .admin-tabs,
  .progress-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 10px;
  }
  .practice-tab,
  .admin-tab,
  .progress-tab {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

/* Stage 23: readable answer/result cards */
.answer-check-grid {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.answer-check-grid.compact { grid-template-columns: minmax(0, 1fr); }
.answer-check-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.82);
}
.answer-check-card.good { border-color: rgba(46, 164, 79, .35); background: rgba(232, 248, 238, .92); }
.answer-check-card.bad { border-color: rgba(224, 66, 66, .35); background: rgba(255, 241, 241, .94); }
.answer-check-card.warn { border-color: rgba(237, 176, 45, .45); background: rgba(255, 248, 229, .94); }
.answer-check-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--text);
}
.answer-check-top span {
  color: var(--primary);
  font-weight: 900;
}
.answer-pair {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  align-items: start;
  padding: 7px 0;
  border-top: 1px solid rgba(16, 116, 181, .10);
}
.answer-pair span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.answer-pair b {
  color: var(--text);
  word-break: break-word;
}
.answer-pair.correct-answer b { color: #057a3d; }
.answer-points {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 900;
  color: var(--muted);
}
.training-result-card {
  display: grid;
  gap: 10px;
}
.training-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 18px;
}
.training-result-head span {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  color: var(--primary);
  font-weight: 900;
}
@media (min-width: 900px) {
  .answer-check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .result-mistake-block .answer-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .answer-pair { grid-template-columns: 1fr; gap: 4px; }
}

/* Stage 25: material management */
.admin-material-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 14px 0;
}
.material-upload-box {
  border: 1px solid rgba(70, 170, 235, .32);
  border-radius: 18px;
  background: rgba(226, 246, 255, .42);
  padding: 16px;
}
.material-upload-box h3 {
  margin-top: 0;
}
@media (max-width: 760px) {
  .admin-material-tabs { grid-template-columns: 1fr; }
}

/* Stage 30: tracked homework mode */
.homework-item.warn { border-left-color: var(--warning); }
.homework-progress-bar { height: 8px; border-radius: 999px; background: rgba(14, 139, 217, .12); overflow: hidden; margin: 10px 0 6px; }
.homework-progress-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #49b7ff); transition: width .2s ease; }
.homework-progress-list { display: grid; gap: 6px; margin: 10px 0; }
.homework-progress-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.7); border: 1px solid rgba(12, 40, 70, .06); }
.homework-progress-row.good { background: rgba(34, 197, 94, .08); }
.homework-progress-row.bad { background: rgba(239, 68, 68, .08); }
.homework-admin-report { display: grid; gap: 6px; margin-top: 10px; }
.homework-admin-row { display: grid; grid-template-columns: 1.4fr 1fr .55fr .65fr .75fr 1fr; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.75); border: 1px solid rgba(12, 40, 70, .07); font-size: .9rem; }
.homework-admin-row.good { background: rgba(34, 197, 94, .08); }
.homework-admin-row.bad { background: rgba(239, 68, 68, .08); }
@media (max-width: 760px) {
  .homework-admin-row { grid-template-columns: 1fr; }
  .homework-progress-row { flex-direction: column; gap: 4px; }
}

/* Stage 32: wider admin workspace and simplified progress errors */
.admin-workspace .grid.two {
  grid-template-columns: 1fr;
}
.admin-workspace article.admin-panel.active {
  grid-column: 1 / -1;
  width: 100%;
}
.progress-mistakes-block .grid.two {
  grid-template-columns: 1fr;
}

/* stage34: admin variant detail modal */
.wide-modal { width: min(1120px, 96vw); }
.variant-detail-body { display: grid; gap: 14px; }
.variant-detail-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.variant-answer-table { display: grid; gap: 8px; }
.variant-answer-row { display: grid; grid-template-columns: 70px minmax(160px, 1fr) minmax(140px, .8fr) minmax(140px, .8fr) 90px 120px; gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.variant-answer-row.header { font-weight: 800; background: var(--soft); color: var(--muted); }
.variant-answer-row.good { border-color: rgba(33, 150, 83, .25); background: rgba(33, 150, 83, .06); }
.variant-answer-row.bad { border-color: rgba(220, 53, 69, .22); background: rgba(220, 53, 69, .06); }
.variant-answer-row.wait { border-color: rgba(245, 158, 11, .22); background: rgba(245, 158, 11, .07); }
.variant-answer-cell { min-width: 0; overflow-wrap: anywhere; }
.variant-answer-cell small { display: block; color: var(--muted); margin-top: 2px; }
.mini-list.action-list > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
@media (max-width: 820px) {
  .variant-answer-row, .variant-answer-row.header { grid-template-columns: 1fr; }
  .variant-answer-row.header { display: none; }
}

/* Stage 36: homework UI/UX polish */
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  font-weight: 850;
  font-size: .82rem;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid rgba(20, 48, 77, .08);
  background: rgba(255,255,255,.82);
  color: var(--muted);
}
.homework-status.neutral { background: rgba(106,130,154,.10); color: #516577; border-color: rgba(106,130,154,.18); }
.homework-status.progress { background: rgba(21,151,229,.12); color: #096ea8; border-color: rgba(21,151,229,.24); }
.homework-status.correction { background: rgba(245,158,11,.14); color: #8a5200; border-color: rgba(245,158,11,.28); }
.homework-status.check { background: rgba(124,58,237,.12); color: #5b32b2; border-color: rgba(124,58,237,.22); }
.homework-status.done { background: rgba(18,128,92,.12); color: var(--success); border-color: rgba(18,128,92,.24); }
.homework-status.late { background: rgba(181,106,0,.13); color: var(--warning); border-color: rgba(181,106,0,.24); }
.homework-status.overdue { background: rgba(194,59,74,.12); color: var(--danger); border-color: rgba(194,59,74,.24); }

.homework-card,
.homework-admin-card {
  border-left-width: 6px;
  padding: 18px;
}
.homework-card.neutral { border-left-color: rgba(106,130,154,.38); }
.homework-card.progress { border-left-color: var(--primary); }
.homework-card.correction { border-left-color: #f59e0b; }
.homework-card.check { border-left-color: #7c3aed; }
.homework-card.done { border-left-color: var(--success); }
.homework-card.late { border-left-color: var(--warning); }
.homework-card.overdue { border-left-color: var(--danger); }
.homework-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.homework-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0 10px;
}
.meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(21,151,229,.08);
  color: #41647f;
  font-weight: 750;
  font-size: .84rem;
  border: 1px solid rgba(21,151,229,.12);
}
.homework-comment {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.68);
  border: 1px dashed rgba(21,151,229,.24);
  color: var(--text);
  margin: 8px 0 12px;
}
.homework-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.homework-kpi-grid > div {
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(12,40,70,.06);
}
.homework-kpi-grid b {
  display: block;
  font-size: 1.18rem;
  line-height: 1.1;
}
.homework-kpi-grid span {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 800;
}
.homework-kpi-grid .good { background: rgba(18,128,92,.08); }
.homework-kpi-grid .warn { background: rgba(245,158,11,.10); }
.homework-kpi-grid .bad { background: rgba(194,59,74,.08); }
.homework-progress-block { margin: 10px 0; }
.homework-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-weight: 800;
  font-size: .9rem;
}
.homework-next-hint {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(21,151,229,.07);
  color: #41647f;
  font-weight: 700;
}
.homework-task-list { margin-top: 12px; }
.homework-task-main {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.homework-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 750;
}
.homework-task-meta span {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
}
.homework-mini-bar {
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(21,151,229,.10);
  min-width: 92px;
}
.homework-mini-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #49b7ff);
}
.homework-actions { margin-top: 14px; }
.homework-summary-card {
  border-left: 4px solid rgba(106,130,154,.24);
}
.homework-summary-card.progress { border-left-color: var(--primary); }
.homework-summary-card.correction { border-left-color: #f59e0b; }
.homework-summary-card.check { border-left-color: #7c3aed; }
.homework-summary-card.done { border-left-color: var(--success); }
.homework-summary-card.late { border-left-color: var(--warning); }
.homework-summary-card.overdue { border-left-color: var(--danger); }

.homework-admin-summary-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.homework-admin-summary-line span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(12,40,70,.06);
  font-weight: 800;
  color: #4a6880;
}
.homework-admin-table {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.homework-admin-row {
  grid-template-columns: minmax(180px, 1.35fr) minmax(150px, .8fr) minmax(120px, .65fr) minmax(90px, .5fr) minmax(130px, .7fr) minmax(170px, .9fr);
  align-items: stretch;
}
.homework-admin-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.homework-admin-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}
.homework-admin-head {
  background: rgba(21,151,229,.08);
  color: #41647f;
  font-weight: 900;
}
.homework-admin-row.done { background: rgba(18,128,92,.07); }
.homework-admin-row.correction,
.homework-admin-row.late { background: rgba(245,158,11,.09); }
.homework-admin-row.check { background: rgba(124,58,237,.08); }
.homework-admin-row.overdue { background: rgba(194,59,74,.07); }
.homework-admin-actions {
  display: grid;
  gap: 7px;
}
.admin-comment-details summary {
  cursor: pointer;
  color: var(--primary-dark);
  font-weight: 850;
}
.admin-comment-details .inline-form {
  margin-top: 8px;
}

.variant-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(12,40,70,.08);
  background: linear-gradient(135deg, rgba(238,248,255,.96), rgba(255,255,255,.92));
}
.variant-detail-hero h3 {
  margin: 4px 0;
  font-size: 1.35rem;
}
.variant-detail-hero p { margin: 0; color: var(--muted); }
.variant-detail-hero.has-errors { background: linear-gradient(135deg, rgba(255,247,230,.96), rgba(255,255,255,.92)); }
.variant-detail-hero.all-good { background: linear-gradient(135deg, rgba(237,252,244,.96), rgba(255,255,255,.92)); }
.variant-error-strip {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.75);
  border: 1px dashed rgba(12,40,70,.10);
  color: var(--text);
}
.variant-answer-row.bad .variant-answer-cell[data-label="Результат"] b { color: var(--danger); }
.variant-answer-row.good .variant-answer-cell[data-label="Результат"] b { color: var(--success); }
.variant-answer-row.wait .variant-answer-cell[data-label="Результат"] b { color: var(--warning); }
.stat-card.good { border-color: rgba(18,128,92,.22); background: rgba(18,128,92,.07); }
.stat-card.warn { border-color: rgba(245,158,11,.22); background: rgba(245,158,11,.08); }
.stat-card.bad { border-color: rgba(194,59,74,.22); background: rgba(194,59,74,.07); }

@media (max-width: 820px) {
  .homework-card-head,
  .variant-detail-hero {
    flex-direction: column;
    align-items: stretch;
  }
  .homework-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .homework-admin-head { display: none; }
  .homework-admin-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }
  .homework-admin-row > span,
  .variant-answer-cell {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
  }
  .homework-admin-row > span::before,
  .variant-answer-cell::before {
    content: attr(data-label);
    color: var(--muted);
    font-weight: 900;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
  }
  .homework-admin-actions { display: block; }
  .variant-answer-row { gap: 8px; }
}

@media (max-width: 560px) {
  .homework-kpi-grid { grid-template-columns: 1fr 1fr; }
  .homework-meta-row, .homework-admin-summary-line { gap: 6px; }
  .meta-chip, .status-pill { white-space: normal; text-align: left; }
  .homework-admin-row > span,
  .variant-answer-cell { grid-template-columns: 1fr; }
  .task-actions.homework-actions { display: grid; grid-template-columns: 1fr; }
}

/* Stage 37: homework archive tabs and clearer empty states */
.homework-archive-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  margin: 10px 0 14px;
  border-radius: 999px;
  background: rgba(21,151,229,.08);
  border: 1px solid rgba(21,151,229,.14);
  flex-wrap: wrap;
}
.homework-archive-tab {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}
.homework-archive-tab.active {
  background: #fff;
  color: var(--primary-dark);
  box-shadow: 0 8px 18px rgba(11, 127, 211, .10);
}
.empty-state strong { font-size: 1.02rem; }
.empty-state.compact { padding: 14px; }
@media (max-width: 720px) {
  .homework-archive-tabs { display: grid; grid-template-columns: 1fr 1fr; border-radius: 18px; width: 100%; }
  .homework-archive-tab { width: 100%; }
}

/* Stage 41: score forecast, admin debug/export, rating aliases */
.score-forecast-card { overflow: hidden; }
.score-forecast-area { display: grid; gap: 12px; }
.forecast-main { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: center; }
.forecast-score { display: flex; align-items: baseline; gap: 6px; }
.forecast-score b { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; color: var(--primary-dark); }
.forecast-score span { color: var(--muted); font-weight: 800; }
.forecast-info { display: grid; gap: 8px; min-width: 0; }
.forecast-bar { height: 12px; background: rgba(21,151,229,.12); border-radius: 999px; overflow: hidden; }
.forecast-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-dark)); border-radius: inherit; }
.forecast-note { color: var(--muted); font-size: .92rem; }
.alias-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin: 14px 0; }
.ranking-item .list-item-title { color: var(--primary-dark); }
.homework-admin-filter-row { margin-top: 0; }
.homework-export-actions { margin: 8px 0 12px; }
.admin-debug-details { margin-top: 8px; }
.admin-debug-details summary { cursor: pointer; color: var(--muted); font-weight: 800; }
.admin-debug-details pre { white-space: pre-wrap; margin: 8px 0 0; padding: 10px; border-radius: 12px; background: rgba(15,23,42,.05); color: #243044; font-size: .78rem; }
@media (max-width: 720px) {
  .forecast-main { grid-template-columns: 1fr; }
  .alias-box { grid-template-columns: 1fr; }
  .homework-admin-filter-row { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Stage 42: forecast card shows only score and scale */
.forecast-main-score-only { align-items: center; }
.forecast-main-score-only .forecast-info { align-self: center; }

/* Stage 44: polished hybrid result screen */
.hybrid-result {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
.hybrid-result.has-errors {
  background:
    radial-gradient(circle at top right, rgba(255, 186, 91, .18), transparent 42%),
    linear-gradient(135deg, #fff7e8, #ffffff 64%);
}
.hybrid-result.all-good {
  background:
    radial-gradient(circle at top right, rgba(39, 196, 124, .16), transparent 42%),
    linear-gradient(135deg, #eefcf5, #ffffff 64%);
}
.result-hero-copy h2,
.variant-result-breakdown-head h3,
.result-next-card h3 {
  margin: 4px 0 0;
}
.hybrid-result-layout {
  align-items: stretch;
  gap: 18px;
}
.result-main-score {
  min-width: 190px;
  display: grid;
  align-content: center;
  gap: 6px;
}
.result-kpi-grid {
  flex: 1;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.result-weak-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.variant-error-strip.all-good {
  background: rgba(236, 253, 245, .78);
  border-color: rgba(18, 128, 92, .18);
}
.weak-task-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.weak-task-chip,
.weak-task-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(220, 53, 69, .18);
  color: var(--danger);
  font-weight: 950;
  font-size: .86rem;
}
.weak-task-more {
  color: var(--muted);
  border-color: var(--line);
}
.variant-result-breakdown,
.result-next-card {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.variant-result-breakdown-head,
.result-next-card {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}
.result-answer-table {
  margin-top: 12px;
}
.variant-answer-row.result-row {
  grid-template-columns: 70px minmax(140px, 1fr) minmax(140px, 1fr) 90px 120px;
}
.variant-answer-row.result-row.bad {
  box-shadow: inset 4px 0 0 rgba(220, 53, 69, .55);
}
.variant-answer-row.result-row.good {
  box-shadow: inset 4px 0 0 rgba(33, 150, 83, .45);
}
.variant-answer-row.result-row.wait {
  box-shadow: inset 4px 0 0 rgba(245, 158, 11, .55);
}
.result-next-card .result-actions {
  margin: 0;
  justify-content: flex-end;
  align-items: center;
}
@media (max-width: 820px) {
  .hybrid-result-layout,
  .variant-result-breakdown-head,
  .result-next-card {
    flex-direction: column;
  }
  .variant-answer-row.result-row,
  .variant-answer-row.result-row.header {
    grid-template-columns: 1fr;
  }
  .variant-answer-row.result-row.header { display: none; }
  .result-next-card .result-actions {
    width: 100%;
    justify-content: stretch;
  }
}

/* Stage 46: admin manual review task context */
.submission-review-card { display: grid; gap: 12px; }
.compact-head { align-items: flex-start; gap: 12px; }
.compact-actions { gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
.submission-task-preview {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(248, 251, 255, .88);
  padding: 12px;
  display: grid;
  gap: 10px;
}
.submission-task-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.submission-task-image-link { display: block; color: inherit; text-decoration: none; }
.submission-task-image {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  display: block;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.submission-task-placeholder {
  border: 1px dashed var(--line-strong, var(--line));
  border-radius: 16px;
  padding: 18px;
  color: var(--muted);
  background: rgba(255,255,255,.66);
}
.submission-answer-box {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  padding: 12px;
  display: grid;
  gap: 8px;
}
.submission-answer-text {
  white-space: pre-wrap;
  font-weight: 700;
  line-height: 1.45;
}
.modal-task-preview { display: grid; gap: 12px; margin: 10px 0 14px; }
.modal-task-preview .submission-task-image { max-height: 360px; }
@media (max-width: 720px) {
  .submission-task-head,
  .compact-head { flex-direction: column; }
  .submission-task-image { max-height: 300px; }
}

/* Stage 50 monetization cards */
.subscription-area { display:grid; gap: 12px; }
.subscription-card { display:grid; gap: 8px; border: 1px solid var(--line); border-radius: 22px; padding: 16px; background: rgba(255,255,255,.82); }
.subscription-card strong { color: var(--primary-dark); font-weight: 950; }
.subscription-card.paid, .access-card.enabled { background: #f1fff8; border-color: rgba(25,164,111,.34); }
.subscription-card.free, .access-card.locked { background: #fff9ec; border-color: rgba(255,183,3,.35); }
.subscription-admin-box { margin: 14px 0; display:grid; gap: 10px; }
.paywall-box { border-color: rgba(255,183,3,.35); background: #fff9ec; }


/* Stage 52: sales card for tariff */
.pricing-card {
  margin-top: 14px;
  border: 1px solid rgba(21,151,229,.24);
  background: linear-gradient(135deg, rgba(231,246,255,.96), rgba(255,255,255,.96));
  border-radius: 24px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.pricing-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}
.pricing-head h3 {
  margin: 2px 0 0;
  font-size: 24px;
  color: var(--primary-dark);
}
.price-badge {
  flex: 0 0 auto;
  padding: 9px 12px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary-dark);
  border: 1px solid rgba(21,151,229,.24);
  font-weight: 950;
  box-shadow: 0 8px 20px rgba(18,92,143,.08);
}
.pricing-benefits {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin: 14px 0 4px;
}
.pricing-benefits span {
  display:block;
  padding: 9px 10px;
  border: 1px solid rgba(21,151,229,.16);
  background: rgba(255,255,255,.72);
  border-radius: 14px;
  color: var(--text);
  font-weight: 850;
  font-size: 13px;
}
.subscription-card.free + .pricing-card { margin-top: 12px; }
@media (max-width: 680px) {
  .pricing-head { flex-direction: column; }
  .price-badge { align-self: flex-start; }
}

.list-item.compact { padding: 12px; border-radius: 16px; margin-top: 8px; }
#broadcast-message-input { min-height: 170px; }


/* Stage 54: prettier tariff section */
.subscription-shell { display: grid; gap: 16px; }
.subscription-card-pro, .pricing-card-pro {
  border-radius: 28px;
  padding: 22px;
  box-shadow: 0 16px 36px rgba(18,92,143,.08);
}
.subscription-card-pro h3, .pricing-card-pro h3 {
  margin: 2px 0 0;
  font-size: 20px;
  color: var(--primary-dark);
}
.pricing-head.compact { margin-bottom: 10px; }
.pricing-subtitle {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.5;
}
.price-badge.success {
  background: #edfff6;
  border-color: rgba(25,164,111,.25);
  color: #16885e;
}
.price-badge.muted-badge {
  background: #fff8e7;
  border-color: rgba(255,183,3,.3);
  color: #9b6a00;
}
.plan-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.plan-stat {
  border: 1px solid rgba(21,151,229,.16);
  background: rgba(255,255,255,.82);
  border-radius: 18px;
  padding: 14px 14px 12px;
  display: grid;
  gap: 4px;
}
.plan-stat-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.plan-stat strong {
  color: var(--primary-dark);
  font-size: 22px;
  letter-spacing: -.02em;
}
.active-grid .plan-stat strong { font-size: 18px; }
.pricing-card-pro .pricing-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(21,151,229,.14);
  color: var(--muted);
  font-weight: 700;
}
.pricing-benefits.enhanced {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.pricing-benefits.enhanced.compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.pricing-benefits.enhanced span {
  padding: 12px 12px;
  border-radius: 16px;
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.pricing-actions {
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.pricing-actions .primary-btn {
  min-width: 220px;
}
.subscription-card.free.subscription-card-pro {
  background: linear-gradient(135deg, rgba(255,249,236,.96), rgba(255,255,255,.98));
}
.subscription-card.paid.subscription-card-pro {
  background: linear-gradient(135deg, rgba(237,255,246,.96), rgba(255,255,255,.98));
}
.pricing-card.pricing-card-pro {
  background: linear-gradient(135deg, rgba(236,247,255,.96), rgba(255,255,255,.98));
}
@media (max-width: 680px) {
  .subscription-card-pro, .pricing-card-pro { padding: 18px; border-radius: 24px; }
  .plan-stat strong { font-size: 20px; }
  .pricing-actions { align-items: flex-start; }
}

/* Hide manual test login when dev auth is disabled */
.login-panel.telegram-only {
  grid-template-columns: 1fr !important;
}

.login-panel.telegram-only #login-form {
  display: none !important;
}

.login-panel.telegram-only #telegram-login-widget {
  max-width: 520px;
}


/* FINAL TELEGRAM LOGIN START */

.login-panel-final {
  position: relative;
  overflow: hidden;
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center;
  align-items: center;
  min-height: 430px;
  padding: 54px 28px;
  text-align: center;
  background:
    radial-gradient(circle at 18% 12%, rgba(53, 183, 255, .22), transparent 32%),
    radial-gradient(circle at 84% 8%, rgba(21, 151, 229, .18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(232,247,255,.92));
}

.login-panel-final::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  right: -130px;
  top: -150px;
  border-radius: 999px;
  background: rgba(21, 151, 229, .13);
}

.login-panel-final::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  left: -100px;
  bottom: -100px;
  border-radius: 999px;
  background: rgba(53, 183, 255, .12);
}

.login-final-content {
  position: relative;
  z-index: 1;
  width: min(100%, 620px);
  margin: 0 auto;
}

.login-final-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #24a8f2, #006fb4);
  box-shadow: 0 18px 38px rgba(0, 111, 180, .22);
}

.login-final-icon img {
  width: 74px;
  height: 74px;
  display: block;
}

.login-panel-final .eyebrow {
  width: fit-content;
  margin: 0 auto 14px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(217, 241, 255, .92);
  border: 1px solid rgba(21, 151, 229, .18);
  box-shadow: 0 8px 22px rgba(18, 92, 143, .08);
}

.login-panel-final h2 {
  margin: 0 0 14px;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1;
  letter-spacing: -.055em;
}

.login-panel-final p {
  max-width: 540px;
  margin: 0 auto;
  color: #36536f;
  font-size: 18px;
  line-height: 1.55;
}

.login-panel-final .login-benefits {
  display: none !important;
}

.login-final-widget {
  width: fit-content;
  min-width: 270px;
  margin: 30px auto 0;
  padding: 18px 20px;
  border-radius: 26px;
  border: 1px solid rgba(21,151,229,.20);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(232,247,255,.97));
  box-shadow: 0 20px 46px rgba(18, 92, 143, .15);
}

.login-final-widget::before {
  content: "Без логина и пароля";
  display: block;
  margin-bottom: 12px;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.final-auth-hint {
  display: none !important;
}

.final-login-hidden,
.login-panel-final #login-form {
  display: none !important;
}

@media (max-width: 760px) {
  .login-panel-final {
    min-height: 390px;
    padding: 38px 18px;
  }

  .login-final-icon {
    width: 66px;
    height: 66px;
    border-radius: 22px;
  }

  .login-final-icon img {
    width: 66px;
    height: 66px;
  }

  .login-panel-final p {
    font-size: 16px;
  }

  .login-final-widget {
    width: 100%;
    min-width: 0;
    max-width: 360px;
  }
}

/* FINAL TELEGRAM LOGIN END */


/* Fix: hide final login panel after successful auth */
.login-panel-final.hidden {
  display: none !important;
}

/* Hide dashboard main action block */
.dashboard-hero {
  display: none !important;
}

/* Fix: admin homework table overlap */
.homework-admin-row {
  grid-template-columns:
    minmax(220px, 1.6fr)
    minmax(220px, 1fr)
    minmax(150px, .8fr)
    minmax(90px, .55fr)
    minmax(130px, .8fr)
    minmax(170px, .95fr);
  align-items: start;
}

.homework-admin-row > span[data-label="Статус"],
.homework-admin-row > span[data-label="Прогресс"] {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.homework-admin-row > span[data-label="Ученик"] b {
  display: block;
}

.homework-admin-row .status-pill {
  max-width: 100%;
  white-space: normal;
  line-height: 1.2;
  text-align: center;
  justify-content: center;
  padding: 8px 12px;
}

.homework-admin-row > span[data-label="Прогресс"] b {
  display: block;
  white-space: nowrap;
}

.homework-admin-row .homework-mini-bar {
  width: 100%;
  margin-top: 2px;
}

.homework-admin-actions {
  align-content: start;
}

/* Final cleanup: hide technical debug blocks */
.admin-debug-details,
details.admin-debug-details {
  display: none !important;
}