/* ============================================================================
 *  ФормулаЦТ — онбординг 3.0: чистая премиальная витрина без рекламы
 * ==========================================================================*/
.onb {
  min-height: calc(100vh - var(--topbar-h));
  display: flex; flex-direction: column;
  background:
    radial-gradient(700px 460px at 50% -8%, color-mix(in srgb, var(--violet) 20%, transparent), transparent 62%),
    radial-gradient(620px 420px at 100% 18%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 64%),
    var(--bg);
  position: relative;
  overflow-x: hidden;
}
.onb::before {
  content: ""; position: absolute; inset: -30% -20%;
  background: conic-gradient(from 140deg at 50% 40%, transparent, color-mix(in srgb, var(--violet) 10%, transparent), transparent 40%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 75%);
  filter: blur(60px); pointer-events: none; z-index: 0;
  animation: auroraSpin 30s linear infinite;
}
.onb__top {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px; margin: 0 auto;
  padding: 18px 20px 0;
  display: flex; align-items: center; gap: 12px;
}
.onb__step { display: flex; gap: 5px; flex: 1; }
.onb__step i { height: 4px; flex: 1; border-radius: 999px; background: color-mix(in srgb, var(--fg-3) 24%, transparent); transition: background .3s; }
.onb__step i.on { background: linear-gradient(90deg, var(--brand), var(--gold)); }
.onb__count { font-size: 10.5px; font-weight: 900; color: var(--fg-3); letter-spacing: .06em; }

.onb__body {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px; margin: 0 auto;
  padding: 26px 20px 18px; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
}
.onb__foot {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px; margin: 0 auto;
  padding: 0 20px calc(24px + var(--safe-bot));
  display: grid; gap: 8px;
}
.onb__foot .btn { width: 100%; }

/* --------------------------------- герой -------------------------------- */
.onb-hero { text-align: center; display: grid; justify-items: center; gap: 10px; padding-top: 4px; }
.onb-hero__glow {
  position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow), transparent 68%);
  filter: blur(20px); top: 40px; z-index: -1;
}
.onb-hero__mascot { animation: floatY 5.5s ease-in-out infinite; filter: drop-shadow(0 24px 40px rgba(0,0,0,.22)); }
.onb-hero__kicker {
  font-size: 10px; font-weight: 900; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brand-700);
}
html[data-theme="dark"] .onb-hero__kicker { color: var(--brand-300); }
.onb-hero__title {
  font-family: var(--font-display); font-size: clamp(34px, 10vw, 48px);
  line-height: .98; letter-spacing: -.05em; margin: 0;
}
.onb-hero__title span {
  background: linear-gradient(100deg, var(--brand), var(--violet) 55%, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.onb-hero__sub {
  font-size: 14px; line-height: 1.55; color: var(--fg-2); font-weight: 600;
  max-width: 360px;
}
.onb-hero__dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
.onb-hero__dots span {
  font-size: 10px; font-weight: 800; color: var(--fg-2);
  padding: 5px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--line);
}

/* ------------------------------- заголовки ------------------------------ */
.onb-head { margin-bottom: 18px; }
.onb-head .t-h1 { font-size: clamp(25px, 7vw, 32px); line-height: 1.06; }
.onb-head .t-body { margin-top: 6px; color: var(--fg-2); font-size: 13.5px; }

/* ------------------------------- предметы ------------------------------- */
.subj-grid { display: grid; gap: 10px; }
.subj {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px; border-radius: 20px; cursor: pointer;
  border: 1.5px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--sh-1);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), border-color .22s, background .22s, box-shadow .22s;
}
.subj:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.subj.is-on {
  border-color: var(--subj, var(--brand));
  background: linear-gradient(120deg, color-mix(in srgb, var(--subj, var(--brand)) 10%, var(--surface)), var(--surface));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--subj, var(--brand)) 12%, transparent);
}
.subj__ico {
  width: 48px; height: 48px; flex: none; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, color-mix(in srgb, var(--subj, var(--brand)) 24%, transparent), color-mix(in srgb, var(--subj, var(--brand)) 7%, transparent));
  color: var(--subj, var(--brand));
}
.subj__ico svg { width: 24px; height: 24px; }
.subj__t { font-size: 15.5px; font-weight: 900; letter-spacing: -.02em; }
.subj__d { font-size: 11.5px; color: var(--fg-2); font-weight: 600; margin-top: 2px; }
.subj__check {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 900;
  border: 1.5px solid var(--line-2); color: transparent;
}
.subj.is-on .subj__check { background: var(--subj, var(--brand)); border-color: transparent; color: #fff; }

/* --------------------------------- класс -------------------------------- */
.grade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grade {
  position: relative; text-align: left; padding: 18px 14px;
  border-radius: 22px; border: 1.5px solid var(--line);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  cursor: pointer; transition: transform .22s cubic-bezier(.34,1.56,.64,1), border-color .22s, box-shadow .22s;
}
.grade:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.grade.is-on { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); }
.grade__n { font-family: var(--font-display); font-size: 42px; line-height: 1; color: var(--fg-3); }
.grade.is-on .grade__n { color: var(--brand-700); }
html[data-theme="dark"] .grade.is-on .grade__n { color: var(--brand-300); }
.grade__t { font-size: 13px; font-weight: 900; margin-top: 8px; }
.grade__d { font-size: 10.5px; color: var(--fg-2); line-height: 1.4; margin-top: 4px; }
.grade__check { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--brand); color: #fff; opacity: 0; }
.grade.is-on .grade__check { opacity: 1; }

/* -------------------------------- аватары ------------------------------- */
.avatar-hero {
  width: 116px; height: 116px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; padding: 4px;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4);
}
.avatar-hero__inner {
  width: 100%; height: 100%; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  font-size: 54px; line-height: 1;
}
.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.avatar-opt {
  display: grid; justify-items: center; gap: 5px;
  padding: 8px 4px; border-radius: 16px; cursor: pointer;
  border: 1.5px solid transparent; background: transparent;
  transition: background .2s, border-color .2s, transform .2s;
}
.avatar-opt:hover { background: var(--surface-2); }
.avatar-opt.is-on { border-color: var(--brand); background: var(--brand-100); }
.avatar-opt__emoji {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; font-size: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 16px -10px rgba(0,0,0,.4);
}
.avatar-opt__label { font-size: 9.5px; font-weight: 800; color: var(--fg-2); }

/* аватары в профиле и HUD */
.prof-ava .avatar-emoji { font-size: 32px; line-height: 1; }
.hud__avatar .avatar-emoji { font-size: 18px; line-height: 1; }
.avatar-emoji { display: inline-grid; place-items: center; }

@media (max-width: 360px) {
  .avatar-grid { grid-template-columns: repeat(4, 1fr); }
  .avatar-opt__emoji { width: 42px; height: 42px; font-size: 21px; }
  .grade__n { font-size: 36px; }
}
@media (min-width: 900px) {
  .onb__body { padding-top: 36px; }
  .subj-grid { grid-template-columns: 1fr; }
}

.emoji-ico { font-size: 22px; line-height: 1; }