:root {
  --bg: #fff8ee;
  --surface: #fffdf9;
  --surface-strong: #ffffff;
  --ink: #2e241e;
  --muted: #6b5a4a;
  --orange: #f26a00;
  --orange-soft: #fff0df;
  --gold: #f6b33a;
  --line: rgba(91, 61, 34, 0.12);
  --shadow: 0 22px 60px rgba(150, 91, 21, 0.16);
  --brand-font: "PosteramaBrand", "Posterama", "Posterama Text", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--brand-font);
}

@font-face {
  font-family: "PosteramaBrand";
  src: local("Posterama"), local("Posterama Text"), local("Posterama 2001");
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 214, 142, 0.3), transparent 24rem),
    radial-gradient(circle at 90% 15%, rgba(255, 232, 187, 0.5), transparent 19rem),
    var(--bg);
  color: var(--ink);
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.app-shell {
  position: relative;
  width: min(100vw, 430px);
  height: min(100vh, 932px);
  min-height: min(760px, 100vh);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
  isolation: isolate;
}

.splash-screen,
.auth-screen,
.portal-screen {
  position: absolute;
  inset: 0;
  transition: opacity 650ms ease, transform 650ms ease, visibility 650ms ease;
}

.auth-screen {
  padding-bottom: 128px;
}

.auth-header,
.auth-form,
.account-preview {
  position: relative;
  z-index: 1;
}

.splash-screen {
  z-index: 3;
  overflow: hidden;
  background: linear-gradient(160deg, #d45400 0%, #f26a00 38%, #ff9a2e 72%, #ffc96a 100%);
}

.splash-brand {
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  z-index: 2;
  color: rgba(46, 36, 30, 0.75);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

.splash-hero {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 36px;
  text-align: center;
  animation: splash-rise 640ms 180ms both ease-out;
}

.splash-icon {
  font-size: 72px;
  line-height: 1;
  margin-bottom: 6px;
  animation: splash-pop 700ms 300ms both cubic-bezier(0.22, 1, 0.36, 1);
}

.splash-title {
  margin: 0;
  font-size: 30px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.1;
}

.splash-sub {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(46, 36, 30, 0.7);
}

.splash-decor {
  position: absolute;
  border-radius: 50%;
}

.splash-decor-a {
  width: 300px;
  height: 300px;
  top: -110px;
  right: -90px;
  background: rgba(255, 255, 255, 0.13);
}

.splash-decor-b {
  width: 220px;
  height: 220px;
  bottom: -70px;
  left: -80px;
  background: rgba(255, 255, 255, 0.1);
}

.splash-decor-c {
  width: 130px;
  height: 130px;
  top: 52%;
  right: -30px;
  background: rgba(255, 255, 255, 0.07);
}

@keyframes splash-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes splash-pop {
  from { opacity: 0; transform: scale(0.4) rotate(-15deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

.auth-screen,
.portal-screen {
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 34px 22px 128px;
  opacity: 0;
  transform: translateY(24px);
  visibility: hidden;
  background:
    linear-gradient(180deg, rgba(255, 246, 232, 0.96), rgba(255, 253, 249, 0.98) 32%),
    var(--surface);
}

.portal-screen {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 34px 22px 16px;
}

.app-shell.is-ready .splash-screen {
  opacity: 0;
  transform: scale(1.02);
  visibility: hidden;
  pointer-events: none;
}

.app-shell.is-auth .auth-screen,
.app-shell.is-portal .portal-screen {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.topbar,
.section-heading,
.progress-hero,
.course-card,
.task-item,
.profile-strip,
.leaderboard-item,
.bottom-nav {
  display: flex;
  align-items: center;
}

.app-shell[data-route="accent-test"] .bottom-nav,
.app-shell[data-route="history-test"] .bottom-nav,
.app-shell[data-route="test"] .bottom-nav {
  display: none;
}

/* ── Fullscreen test mode ───────────────────────────────────────────────────── */
.app-shell[data-route="test"] .topbar,
.app-shell[data-route="accent-test"] .topbar,
.app-shell[data-route="history-test"] .topbar,
.app-shell[data-route="test"] .profile-strip,
.app-shell[data-route="accent-test"] .profile-strip,
.app-shell[data-route="history-test"] .profile-strip {
  display: none !important;
}

.app-shell[data-route="test"] .portal-screen,
.app-shell[data-route="accent-test"] .portal-screen,
.app-shell[data-route="history-test"] .portal-screen {
  padding: 0;
}

.app-shell[data-route="test"] .view-stack,
.app-shell[data-route="accent-test"] .view-stack,
.app-shell[data-route="history-test"] .view-stack {
  padding: 0;
  overflow-y: auto;
}

.app-shell[data-route="test"] .test-screen,
.app-shell[data-route="accent-test"] .test-screen,
.app-shell[data-route="history-test"] .test-screen {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--bg) !important;
  padding: max(env(safe-area-inset-top, 0px), 20px) 22px 40px;
  min-height: 100dvh;
}

.auth-header {
  min-height: 254px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 26px;
}

.auth-header h1 {
  max-width: 330px;
  margin: 0 0 12px;
}

.auth-header p:not(.eyebrow) {
  max-width: 350px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.auth-form {
  display: grid;
  gap: 13px;
}

.auth-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.auth-form input[type="text"] {
  width: 100%;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0 15px;
  outline: 0;
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}

.auth-form input[type="text"]:focus {
  border-color: rgba(242, 106, 0, 0.55);
  box-shadow: 0 0 0 4px rgba(242, 106, 0, 0.1);
}

.role-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.role-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.role-picker label {
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
}

.role-picker input:checked + label {
  background: var(--orange);
  color: var(--ink);
  box-shadow: 0 10px 22px rgba(242, 106, 0, 0.22);
}

.primary-action {
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f26a00, #ffad36);
  color: white;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 18px 32px rgba(242, 106, 0, 0.24);
}

.account-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 18px;
}


.account-preview article {
  min-width: 0;
  padding: 13px 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-strong);
}

.account-preview strong,
.account-preview span {
  display: block;
}

.account-preview strong {
  margin-bottom: 4px;
  color: var(--orange);
  font-size: 13px;
}

.account-preview span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.topbar {
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.eyebrow,
.progress-hero p {
  margin: 0 0 4px;
  color: var(--orange);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 34px;
  line-height: 1.05;
  color: #ef6500;
}

.avatar-button {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff8b20, #ffd16a);
  color: white;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(242, 106, 0, 0.22);
}

.profile-strip {
  justify-content: space-between;
  gap: 8px;
  margin: -6px 0 18px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.profile-strip div {
  min-width: 0;
}

.profile-strip span,
.profile-strip strong {
  display: block;
}

.profile-strip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.profile-strip strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 14px;
}

.search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-strong);
  color: var(--muted);
}

.search span {
  font-size: 24px;
  line-height: 1;
}

.search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}

.daily-plan-card,
.streak-card,
.prep-progress,
.profile-card,
.profile-progress,
.achievement-history,
.weak-topics {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid rgba(242, 106, 0, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 189, 72, 0.18), transparent 34%),
    var(--surface-strong);
  box-shadow: 0 12px 32px rgba(145, 87, 25, 0.08);
}

.plan-head,
.streak-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.plan-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.plan-head h2 {
  min-width: 0;
  margin-bottom: 0;
  font-size: 24px;
  line-height: 1.12;
}

.plan-head > strong,
.streak-card > span {
  flex: 0 0 auto;
  padding: 9px 11px;
  border-radius: 999px;
  background: #2f2a21;
  color: white;
  font-size: 13px;
  font-weight: 900;
}

  .plan-head > strong {
  max-width: 150px;
  align-self: start;
  white-space: normal;
  text-align: center;
  line-height: 1.12;
}

.plan-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.plan-item {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 248, 238, 0.68);
  color: var(--ink);
  text-align: left;
}

.plan-item:focus-visible {
  outline: 3px solid rgba(242, 106, 0, 0.3);
  outline-offset: 3px;
}

.plan-item span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(242, 106, 0, 0.34);
  border-radius: 50%;
  background: white;
  grid-row: span 2;
  align-self: center;
}

.plan-item.is-done {
  border-color: rgba(67, 151, 96, 0.3);
  background: #f0f8ec;
}

.plan-item.is-done span {
  border-color: #3f9a55;
  background: #3f9a55;
}

.plan-item.is-done span::before {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translate(1px, -1px);
}

.plan-item strong {
  min-width: 0;
}

.plan-item em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.streak-card {
  margin-top: -10px;
}

.streak-card p {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.streak-card strong {
  display: block;
  color: var(--orange);
  font-size: 20px;
}

.prep-progress {
  margin-top: 0;
}

.prep-list,
.weak-topic-list,
.profile-progress {
  display: grid;
  gap: 11px;
}

.prep-list div,
.weak-topic-list article,
.profile-progress article {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 8px 12px;
  align-items: center;
}

.prep-list progress,
.weak-topic-list progress,
.profile-progress progress {
  grid-column: 2 / -1;
}

.prep-list img,
.weak-topic-list img,
.profile-progress img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 12px;
  background: white;
  box-shadow: 0 7px 15px rgba(92, 58, 22, 0.1);
}

.prep-list span,
.weak-topic-list span,
.profile-progress span {
  color: var(--orange);
  font-size: 13px;
  font-weight: 900;
}

.progress-hero {
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  margin: 12px 0 0;
  padding: 20px;
  border: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.9), transparent 34%),
    linear-gradient(135deg, #ff8c1a, #ffbd48);
  color: white;
  box-shadow: 0 18px 36px rgba(242, 106, 0, 0.25);
  cursor: pointer;
  text-align: left;
}

.progress-hero:focus-visible {
  outline: 3px solid rgba(242, 106, 0, 0.28);
  outline-offset: 4px;
}

.progress-hero p,
.progress-hero h2 {
  color: white;
}

.progress-hero h2 {
  max-width: 210px;
  margin-bottom: 0;
  font-size: 24px;
  line-height: 1.12;
}

.progress-ring {
  width: 86px;
  height: 86px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #ff9b2d 58%, transparent 59%),
    conic-gradient(#fff 0 68%, rgba(255, 255, 255, 0.3) 68% 100%);
}

.progress-ring span {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ff9b2d;
  font-weight: 900;
}

.exam-panel:focus-visible {
  outline: 3px solid rgba(242, 106, 0, 0.28);
  outline-offset: 4px;
}

.exam-panel {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 12px 0 0;
  padding: 20px;
  border: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 85% 12%, rgba(255, 255, 255, 0.78), transparent 31%),
    linear-gradient(135deg, #2f2a21, #f26a00 68%, #ffbd48);
  color: white;
  box-shadow: 0 18px 36px rgba(72, 44, 20, 0.18);
  cursor: pointer;
  text-align: left;
}

.exam-panel p,
.exam-panel h2,
.exam-panel span {
  color: white;
}

.exam-panel p {
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.exam-panel h2 {
  margin-bottom: 6px;
  font-size: 31px;
  line-height: 1;
}

.exam-panel span {
  display: block;
  max-width: 230px;
  font-size: 13px;
  line-height: 1.3;
  opacity: 0.92;
}

.exam-orbit {
  width: 82px;
  height: 82px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.24) 49%, transparent 50%),
    conic-gradient(#ffffff 0 64%, rgba(255, 255, 255, 0.28) 64% 100%);
  /* decorative infinite animation removed */
}

.exam-orbit span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 20px;
  font-weight: 900;
}

@keyframes orbit-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.view-stack {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: clip;
  overflow-y: auto;
  padding: 0 0 18px;
  scrollbar-width: none;
}

.view-stack::-webkit-scrollbar {
  display: none;
}

.app-view {
  display: none;
  min-height: 430px;
}

.app-view.active {
  display: block;
  animation: card-enter 420ms ease both;
}

@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

button,
a {
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}

button:active,
.bottom-nav a:active {
  transform: translateY(1px) scale(0.99);
}

.section-block {
  margin-top: 16px;
}

.section-heading {
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-heading h2 {
  margin-bottom: 0;
  font-size: 21px;
}

.section-heading button {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: 13px;
  font-weight: 800;
}

.course-list,
.subject-grid,
.task-list,
.leaderboard-list,
.settings-list {
  display: grid;
  gap: 12px;
}

.course-card,
.subject-card,
.task-item,
.leaderboard-item,
.settings-item {
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-strong);
}

.subject-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.subject-card {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 64px minmax(32px, auto);
  justify-items: center;
  align-items: center;
  min-width: 0;
  height: 140px;
  min-height: 140px;
  padding: 14px 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 232, 0.9));
  color: var(--ink);
  font: inherit;
  box-shadow: 0 12px 26px rgba(145, 87, 25, 0.08);
  text-align: center;
  text-decoration: none;
}

.subject-card span {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--orange);
  font-size: 13px;
  font-weight: 900;
}

.subject-icon img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  object-position: center;
}

.subject-card strong {
  min-width: 0;
  width: 100%;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.18;
  text-align: center;
}

.subject-card:hover,
.subject-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(145, 87, 25, 0.13);
}

.subject-detail-card {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 15px;
  align-items: center;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid rgba(242, 106, 0, 0.16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 189, 72, 0.2), transparent 34%),
    var(--surface-strong);
  box-shadow: 0 16px 34px rgba(145, 87, 25, 0.1);
}

.subject-detail-icon {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.subject-detail-icon img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.subject-detail-card h3 {
  margin: 0 0 4px;
  font-size: 22px;
}

.subject-detail-card span {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.subject-detail-card progress {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(91, 61, 34, 0.1);
}

.subject-detail-card progress::-webkit-progress-bar {
  background: rgba(91, 61, 34, 0.1);
}

.subject-detail-card progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--gold));
}

.resource-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.resource-card-wide {
  grid-column: 1 / -1;
}

.resource-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 189, 72, 0.16), transparent 34%),
    var(--surface-strong);
}

.resource-card span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 15px;
  background: white;
  color: var(--orange);
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(242, 106, 0, 0.1), 0 9px 18px rgba(145, 87, 25, 0.08);
}

.resource-card span img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  object-position: center;
}

.resource-card .resource-icon-large img {
  width: 40px;
  height: 40px;
}

.resource-card span svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.resource-card .resource-icon-large svg {
  width: 32px;
  height: 32px;
}

.resource-card strong,
.resource-card p,
.settings-item strong,
.settings-item span {
  display: block;
}

.resource-card strong,
.settings-item strong {
  margin-bottom: 4px;
}

.resource-card p,
.settings-item span {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}

.material-subject-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.material-subject-card {
  grid-template-rows: 72px minmax(38px, auto) 28px;
  row-gap: 10px;
  height: 178px;
  min-height: 178px;
  padding-top: 16px;
  padding-bottom: 16px;
  align-content: center;
}

.material-subject-card .subject-icon {
  align-self: end;
}

.material-subject-card strong {
  align-self: center;
}

.material-subject-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 246, 232, 0.92);
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  font-style: normal;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(242, 106, 0, 0.08);
}

.import-item {
  display: block;
  cursor: pointer;
}

.import-item input {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed rgba(242, 106, 0, 0.28);
  border-radius: 14px;
  background: var(--orange-soft);
  color: var(--muted);
  font-size: 12px;
}

.leaderboard-item {
  justify-content: space-between;
}

.leaderboard-item div {
  flex: 1 1 auto;
  min-width: 0;
}

.leaderboard-item p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.rank-path {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid rgba(242, 106, 0, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 95% 0%, rgba(255, 189, 72, 0.28), transparent 34%),
    var(--surface-strong);
}

.rank-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.rank-chart-head p {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.rank-chart-head h3 {
  margin-bottom: 0;
  color: var(--orange);
  font-size: 26px;
}

.rank-chart-head strong {
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: 13px;
}

.rank-ladder {
  display: grid;
  gap: 8px;
}

.rank-ladder button {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 10px 12px;
  padding: 10px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 248, 238, 0.86));
  color: var(--muted);
  text-align: left;
}

.rank-ladder span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.rank-ladder strong {
  min-width: 0;
  color: inherit;
  font-size: 14px;
  line-height: 1.1;
}

.rank-ladder em {
  grid-column: 2;
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(91, 61, 34, 0.11);
}

.rank-ladder em::before {
  content: "";
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  animation: progress-grow 680ms ease both;
}

.rank-ladder button.current,
.rank-ladder button.is-selected {
  border: 1px solid color-mix(in srgb, var(--accent) 44%, transparent);
  background:
    radial-gradient(circle at 98% 0%, rgba(255, 255, 255, 0.55), transparent 34%),
    color-mix(in srgb, var(--accent) 13%, var(--surface));
  color: var(--ink);
  box-shadow: 0 14px 26px rgba(242, 106, 0, 0.18);
}

.rank-ladder button.current span,
.rank-ladder button.is-selected span {
  color: white;
  background: var(--accent);
}

@keyframes progress-grow {
  from {
    width: 0;
  }
  to {
    width: var(--progress);
  }
}

.rank-note {
  min-height: 38px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.stats-heading,
.leaderboard-heading {
  margin-top: 22px;
}

.stats-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(135deg, #2f2a21, #f26a00);
  color: white;
}

.stats-hero span,
.stats-hero strong {
  display: block;
  color: white;
}

.stats-hero span {
  margin-bottom: 6px;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
}

.stats-hero strong {
  max-width: 230px;
  font-size: 17px;
  line-height: 1.2;
}

.stats-ring {
  width: 86px;
  height: 86px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(242, 106, 0, 0.7) 56%, transparent 57%),
    conic-gradient(#fff 0 76%, rgba(255, 255, 255, 0.28) 76% 100%);
  color: white;
  font-weight: 900;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.stats-grid article {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-strong);
}

.stats-grid span,
.stats-grid strong {
  display: block;
}

.stats-grid span {
  margin-bottom: 6px;
  color: var(--orange);
  font-size: 34px;
  font-weight: 900;
}

.stats-grid strong {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}

.rank {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--orange-soft);
  color: var(--orange);
  font-weight: 900;
}

.score {
  color: var(--orange);
  font-weight: 900;
}

.current-user {
  border-color: rgba(242, 106, 0, 0.32);
  background: linear-gradient(135deg, rgba(255, 240, 223, 0.92), #fff);
}

.course-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: white;
  font-weight: 900;
}

.accent-orange .course-icon {
  background: linear-gradient(135deg, #ff7112, #ffb44c);
}

.accent-gold .course-icon {
  background: linear-gradient(135deg, #e5a214, #ffda74);
}

.history-icon,
.english-icon {
  font-size: 24px;
}

.english-icon {
  letter-spacing: 0;
}

.course-card h3 {
  margin-bottom: 4px;
  font-size: 16px;
}

.course-card p,
.task-item span {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
}

progress {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #f4e7d7;
}

progress::-webkit-progress-bar {
  background: #f4e7d7;
}

progress::-webkit-progress-value {
  border-radius: 999px;
  background: var(--orange);
}

progress::-moz-progress-bar {
  border-radius: 999px;
  background: var(--orange);
}

.task-item {
  display: grid;
  grid-template-columns: 64px 32px 1fr auto;
  align-items: center;
}

.task-button {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
}

.task-button:focus-visible {
  outline: 3px solid rgba(242, 106, 0, 0.22);
  outline-offset: 3px;
}

.task-item time {
  color: var(--orange);
  font-size: 13px;
  font-weight: 900;
}

.task-item img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 11px;
  background: white;
  box-shadow: 0 7px 14px rgba(92, 58, 22, 0.1);
}

.task-item strong {
  min-width: 0;
  line-height: 1.2;
}

.task-item span {
  margin: 0;
  white-space: nowrap;
}

.task-item.is-done {
  border-color: rgba(67, 151, 96, 0.28);
  background:
    linear-gradient(135deg, #f0f8ec, #fff);
}

.task-item.is-done strong::after {
  content: "";
}

.task-main {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.task-topic {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-progress {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.task-progress span {
  width: 100%;
  height: 7px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: #f4e7d7;
}

.task-progress span::before {
  content: "";
  display: block;
  width: var(--test-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--orange), var(--gold));
  transition: width 420ms ease;
}

.task-progress em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.task-item .task-meta {
  margin: 0;
  color: var(--orange);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.task-item.is-done .task-progress span::before {
  background: linear-gradient(90deg, #66ad6b, #9bd176);
}

.task-item.is-done .task-meta {
  color: #3f9a55;
}

.xp-toast {
  position: sticky;
  bottom: 94px;
  z-index: 19;
  width: fit-content;
  max-width: 100%;
  margin: 16px auto 0;
  padding: 12px 15px;
  border-radius: 999px;
  background: #2f2a21;
  color: white;
  font-size: 13px;
  font-weight: 900;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  box-shadow: 0 16px 32px rgba(47, 42, 33, 0.2);
}

.xp-toast.show {
  animation: xp-pop 1.8s ease both;
}

.calendar-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid rgba(242, 106, 0, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 189, 72, 0.24), transparent 34%),
    var(--surface-strong);
  box-shadow: 0 12px 32px rgba(145, 87, 25, 0.08);
}

.calendar-hero h3 {
  margin-bottom: 6px;
  color: var(--orange);
  font-size: 24px;
  line-height: 1.08;
}

.calendar-hero span {
  display: block;
  max-width: 250px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.calendar-hero > strong {
  flex: 0 0 auto;
  padding: 10px 12px;
  border-radius: 999px;
  background: #2f2a21;
  color: white;
  font-size: 13px;
  font-weight: 900;
}

.calendar-week,
.calendar-grid {
  display: grid;
  gap: 9px;
}

.calendar-week {
  display: none;
}

.calendar-week span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.calendar-day {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-strong);
}

.calendar-day time {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: 12px;
  font-weight: 900;
}

.calendar-day strong {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
}

.calendar-day span {
  color: var(--orange);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.calendar-day.is-today {
  border-color: rgba(242, 106, 0, 0.38);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 189, 72, 0.2), transparent 34%),
    var(--surface-strong);
  box-shadow: 0 12px 24px rgba(145, 87, 25, 0.08);
}

.calendar-day.is-today time {
  background: var(--orange);
  color: white;
}

.calendar-day.is-rest {
  background: rgba(255, 248, 238, 0.74);
}

.calendar-day.is-empty {
  display: none;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

@keyframes xp-pop {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  18%,
  78% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

.bottom-nav {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  flex: 0 0 auto;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 253, 249, 0.98);
  box-shadow: 0 18px 42px rgba(112, 73, 31, 0.14);
}

.bottom-nav a {
  min-width: 0;
  min-height: 52px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 7px 3px;
  border-radius: 15px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.bottom-nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bottom-nav span {
  display: block;
}

.bottom-nav a.active {
  background: var(--orange);
  color: white;
}

.bottom-nav a.home-nav {
  transform: translateY(-8px);
  background: var(--orange-soft);
  color: var(--orange);
  box-shadow: 0 12px 24px rgba(112, 73, 31, 0.12);
}

.bottom-nav a.home-nav.active {
  background: var(--orange);
  color: white;
  box-shadow: 0 16px 28px rgba(242, 106, 0, 0.25);
}

.test-screen {
  padding: 18px 18px 118px;
}

.test-screen::before {
  content: "";
  display: block;
  height: 8px;
}

.test-screen {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(84, 47, 16, 0.1);
}

.test-top-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 22px;
  min-height: 40px;
}

.test-brand-name {
  font-size: 18px;
  font-weight: 900;
  color: var(--orange);
  letter-spacing: 0.04em;
  text-align: center;
}

.test-top-bar .test-close {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.test-header {
  position: relative;
}

.test-header h2 {
  margin-bottom: 6px;
  color: var(--orange);
  font-size: 27px;
  line-height: 1.05;
}

.test-header span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.test-close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--orange);
  box-shadow: 0 8px 18px rgba(112, 73, 31, 0.06);
}

.test-close svg {
  display: block;
  width: 21px;
  height: 21px;
}

.test-progress {
  height: 8px;
  margin: 16px 0 18px;
  overflow: hidden;
  border-radius: 999px;
  background: #f4e7d7;
}

.test-progress span {
  display: block;
  width: 33%;
  height: 100%;
  border-radius: inherit;
  background: var(--orange);
  transition: width 220ms ease;
}

.test-question p {
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
}

.test-question .rich-text,
#dynamic-test-question-text {
  overflow-wrap: anywhere;
  white-space: normal;
}

.test-question .rich-text strong,
#dynamic-test-question-text strong {
  font-weight: 950;
}

.test-question .rich-text em,
#dynamic-test-question-text em {
  font-style: italic;
}

.test-question .rich-text u,
#dynamic-test-question-text u {
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.answer-list {
  display: grid;
  gap: 10px;
}

.question-context,
.question-image,
.free-answer,
.matching-list {
  min-width: 0;
}

.question-context {
  max-height: 240px;
  padding: 14px;
  overflow: auto;
  border: 1px solid rgba(242, 106, 0, 0.14);
  border-radius: 18px;
  background: linear-gradient(135deg, #fff, #fff8ef);
}

.question-context strong {
  display: block;
  margin-bottom: 8px;
  color: var(--orange);
  font-size: 13px;
}

.question-context p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
  white-space: pre-wrap;
}

.question-image {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
}

.question-image img {
  width: 100%;
  max-height: 260px;
  display: block;
  object-fit: contain;
  background: #fffaf3;
}

.question-image figcaption {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.answer-option {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-strong);
  color: var(--ink);
  font-weight: 900;
  text-align: left;
}

.answer-option.is-selected {
  border-color: rgba(242, 106, 0, 0.48);
  background: var(--orange-soft);
  color: var(--orange);
}

.answer-option.is-correct {
  border-color: rgba(67, 151, 96, 0.45);
  background: #edf8ef;
  color: #277142;
}

.answer-option.is-wrong {
  border-color: rgba(211, 70, 51, 0.38);
  background: #fff0ed;
  color: #a73526;
}

.answer-help {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.free-answer {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.free-answer input {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-strong);
  color: var(--ink);
  font-weight: 850;
  outline: 0;
}

.free-answer input:focus {
  border-color: rgba(242, 106, 0, 0.5);
  box-shadow: 0 0 0 4px rgba(242, 106, 0, 0.09);
}

.free-answer input.is-correct {
  border-color: rgba(67, 151, 96, 0.48);
  background: #edf8ef;
  color: #277142;
}

.free-answer input.is-wrong {
  border-color: rgba(211, 70, 51, 0.46);
  background: #fff0ed;
  color: #a73526;
}

.matching-list {
  display: grid;
  gap: 10px;
}

.matching-row {
  display: grid;
  grid-template-columns: minmax(88px, 1fr) minmax(112px, 1.1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 2px solid var(--match-accent, var(--orange));
  border-radius: 18px;
  background: var(--orange-soft);
}

.matching-row span {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
}

.matching-row select {
  min-width: 0;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(91, 61, 34, 0.14);
  border-radius: 14px;
  background: #fff9f0;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

.answer-feedback {
  min-height: 20px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.test-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
  margin-top: 18px;
  margin-bottom: 0;
}

.secondary-action {
  height: 56px;
  border-radius: 18px;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: 16px;
  font-weight: 900;
}

.test-next {
  box-shadow: none;
}

.test-screen.is-result .test-question,
.test-screen.is-result .test-actions {
  display: none;
}

.test-result {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(242, 106, 0, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 189, 72, 0.26), transparent 36%),
    var(--surface-strong);
  animation: card-enter 420ms ease both;
}

.test-result[hidden] {
  display: none;
}

.test-result h3 {
  margin-bottom: 0;
  color: var(--orange);
  font-size: 25px;
  line-height: 1.08;
}

.result-score {
  display: flex;
  align-items: center;
  gap: 14px;
}

.result-score strong {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, white 56%, transparent 57%),
    conic-gradient(var(--orange) 0 84%, #f4e7d7 84% 100%);
  color: var(--orange);
  font-size: 26px;
}

.result-score span,
.result-xp p {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.result-xp span {
  display: inline-grid;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #2f2a21;
  color: white;
  font-weight: 900;
}

.result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.profile-card h3 {
  margin-bottom: 6px;
  color: var(--orange);
  font-size: 25px;
}

.profile-card > div > span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.profile-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 15px;
}

.profile-metrics article {
  padding: 12px 8px;
  border-radius: 16px;
  background: var(--orange-soft);
  text-align: center;
}

.profile-metrics strong,
.profile-metrics span {
  display: block;
}

.profile-metrics strong {
  color: var(--orange);
  font-size: 22px;
}

.profile-metrics span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.profile-progress article {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.profile-progress article:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.achievement-history {
  display: grid;
  gap: 11px;
}

.achievement-history article {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 2px 10px;
  align-items: center;
}

.achievement-history article span {
  grid-row: span 2;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 25%, #fff, transparent 26%),
    linear-gradient(135deg, #f26a00, #ffbd48);
}

.achievement-history p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 520px) {
  body {
    display: block;
  }

  .app-shell {
    width: 100vw;
    height: 100svh;
    min-height: 0;
    box-shadow: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  .splash-screen,
  .auth-screen,
  .portal-screen,
  .splash-hero,
  .splash-icon,
  .exam-orbit,
  .test-progress span,
  .portal-view,
  .rank-compact-card,
  .rank-next-compact,
  .rank-ladder button,
  .pwa-banner,
  .pwa-banner-inner,
  .loader-bar,
  .app-view.active,
  .xp-badge,
  .rank-bar-fill,
  .pwa-install-card,
  .notif-toast {
    transition: none !important;
    animation: none !important;
  }
}


/* Account, real progress and material architecture */
.auth-mode-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.auth-mode-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auth-mode-picker label {
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
}

.auth-mode-picker input:checked + label {
  background: var(--orange);
  color: var(--ink);
  box-shadow: 0 10px 22px rgba(242, 106, 0, 0.22);
}

.auth-form input[type="password"] {
  width: 100%;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0 15px;
  outline: 0;
  background: var(--surface-strong);
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}

.auth-form input[type="password"]:focus {
  border-color: rgba(242, 106, 0, 0.55);
  box-shadow: 0 0 0 4px rgba(242, 106, 0, 0.1);
}

.auth-form.is-login .register-only {
  display: none;
}

.auth-subject-picker {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.76);
}

.auth-subject-picker > div:first-child {
  display: grid;
  gap: 3px;
}

.auth-subject-picker strong {
  color: var(--ink);
  font-size: 15px;
}

.auth-subject-picker span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.auth-subject-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.auth-subject-option {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-strong);
  color: var(--ink);
}

.auth-subject-option input {
  position: absolute;
  opacity: 0;
}

.auth-subject-option span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff7eb;
}

.auth-subject-option img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.auth-subject-option strong {
  font-size: 12px;
  line-height: 1.15;
}

.auth-subject-option:has(input:checked) {
  border-color: rgba(242, 106, 0, 0.55);
  background: var(--orange-soft);
  box-shadow: inset 0 0 0 1px rgba(242, 106, 0, 0.12);
}

.auth-message,
.empty-state {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.auth-message.is-error {
  color: #c9471c;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 15px;
  border: 1px dashed rgba(242, 106, 0, 0.24);
  border-radius: 18px;
  background: rgba(255, 246, 232, 0.7);
}


.calendar-day {
  appearance: none;
  -webkit-appearance: none;
  color: inherit;
  text-align: left;
}

.calendar-day.is-done {
  border-color: rgba(63, 154, 85, 0.28);
  background: #f0f8ec;
}

.leaderboard-empty {
  opacity: 0.72;
}

/* ─── PROGRESS SCREEN — Subject analytics ────────────────────────────────────*/
.progress-subjects-heading,
.progress-weak-heading {
  margin-top: 20px;
}

.progress-subjects-list,
.progress-weak-list {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
}

/* Subject card — same pattern as .plan-item / .leaderboard-item */
.progress-subject-card {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  grid-template-rows: auto 6px auto;
  align-items: center;
  gap: 3px 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-strong);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .12s;
}

.progress-subject-card:active {
  opacity: .75;
}

/* icon spans 3 rows */
.progress-subject-icon {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--orange-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  align-self: center;
}

.progress-subject-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* title sits col 2, row 1 */
.progress-subject-info {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.progress-subject-info strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  display: block;
}

/* percentage col 3, row 1 */
.progress-subject-pct {
  grid-column: 3;
  grid-row: 1;
  font-size: 13px;
  font-weight: 900;
  color: var(--orange);
  align-self: end;
}

/* bar spans cols 2-3, row 2 */
.progress-subject-bar-wrap {
  grid-column: 2 / 4;
  grid-row: 2;
  height: 5px;
  border-radius: 999px;
  background: #f4e7d7;
  overflow: hidden;
  align-self: center;
}

.progress-subject-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--orange);
  min-width: 3px;
  transition: width .4s ease;
}

/* meta spans cols 2-3, row 3 */
.progress-subject-meta {
  grid-column: 2 / 4;
  grid-row: 3;
  font-size: 12px;
  color: var(--muted);
  align-self: start;
}

/* Weak topic card */
.progress-weak-card {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  align-items: center;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-strong);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .12s;
}

.progress-weak-card:active {
  opacity: .75;
}

.progress-weak-card img {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 10px;
  background: white;
  box-shadow: 0 4px 10px rgba(92, 58, 22, 0.1);
}

.progress-weak-card strong {
  grid-column: 2;
  grid-row: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: end;
}

.progress-weak-card > span {
  grid-column: 2;
  grid-row: 2;
  font-size: 12px;
  color: var(--muted);
  align-self: start;
}

.progress-weak-card progress {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  width: 48px;
  height: 5px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  overflow: hidden;
}

.progress-weak-card progress::-webkit-progress-bar {
  background: #f4e7d7;
  border-radius: 999px;
}

.progress-weak-card progress::-webkit-progress-value {
  background: var(--orange);
  border-radius: 999px;
}

.progress-weak-card progress::-moz-progress-bar {
  background: var(--orange);
  border-radius: 999px;
}

.material-detail-subtitle {
  margin: -4px 0 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.material-detail-body,
.material-list,
.mistake-list {
  display: grid;
  gap: 12px;
}

.material-row,
.mistake-list article,
.material-detail-card {
  width: 100%;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-strong);
  box-shadow: 0 12px 26px rgba(145, 87, 25, 0.08);
  color: var(--ink);
  text-align: left;
}

.material-row span,
.mistake-list article span {
  display: block;
  margin-bottom: 5px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.material-row strong,
.mistake-list article strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
}

.material-row p,
.mistake-list article p,
.material-detail-card p,
.material-detail-card li {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.mistake-list article em {
  display: block;
  margin-top: 10px;
  color: var(--ink);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.material-detail-card {
  display: grid;
  gap: 12px;
}

.material-detail-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.material-detail-card blockquote {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(242, 106, 0, 0.25);
  border-radius: 14px;
  background: var(--orange-soft);
  color: var(--ink);
  font-weight: 800;
}

.resource-card {
  text-align: left;
}

@media (max-width: 380px) {
  .auth-subject-list {
    grid-template-columns: 1fr;
  }
}


/* Server accounts, grouped content and admin builder */
.subject-task-group,
.material-subject-group {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(242, 106, 0, 0.14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 95% 0%, rgba(255, 189, 72, 0.14), transparent 34%),
    var(--surface-strong);
  box-shadow: 0 12px 28px rgba(145, 87, 25, 0.08);
}

.subject-group-heading {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
}

.subject-group-heading img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 13px;
  background: white;
  box-shadow: 0 8px 16px rgba(145, 87, 25, 0.09);
}

.subject-group-heading strong {
  font-size: 16px;
}

.subject-group-heading span {
  min-width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: 12px;
  font-weight: 900;
}

.topic-group-heading {
  grid-template-columns: 38px 1fr auto;
}

.topic-group-heading p {
  grid-column: 2 / -1;
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.subject-group-list,
.material-card-list {
  display: grid;
  gap: 10px;
}

.material-card-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rank-ladder {
  gap: 12px;
}

.rank-ladder button {
  min-height: 74px;
  grid-template-columns: 46px minmax(0, 1fr) 64px;
  padding: 14px;
}

.rank-ladder button span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent);
  font-size: 15px;
  font-weight: 950;
}

.rank-ladder button strong {
  font-size: 17px;
  line-height: 1.15;
}

.rank-ladder button::after {
  content: attr(data-score) " XP";
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-align: right;
}

@media (max-width: 380px) {
  .material-card-list {
    grid-template-columns: 1fr;
  }

  .rank-ladder button {
    grid-template-columns: 42px 1fr;
  }

  .rank-ladder button::after {
    grid-column: 2;
    text-align: left;
  }
}


/* Compact rank architecture */
.rank-path {
  padding: 14px;
}

.rank-chart-head {
  margin-bottom: 10px;
}

.rank-chart-head h3 {
  font-size: 22px;
}

.rank-chart-head > strong {
  padding: 8px 10px;
  border-radius: 999px;
  background: #2f2a21;
  color: white;
  font-size: 12px;
  font-weight: 900;
}

.rank-ladder {
  display: grid;
  gap: 10px;
}

.rank-compact-card {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 38%),
    var(--surface-strong);
}

.rank-current-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent);
  font-size: 18px;
  font-weight: 950;
}

.rank-current-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.rank-current-copy span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.rank-current-copy strong {
  font-size: 20px;
  line-height: 1.05;
}

.rank-current-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.rank-compact-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(91, 61, 34, 0.1);
}

.rank-compact-progress span {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}

.rank-next-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.rank-next-row button {
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 5px;
  padding: 9px 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  text-align: center;
}

.rank-next-row button span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 14%, white);
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.rank-next-row button strong {
  width: 100%;
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.08;
}

.rank-next-row button em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.rank-next-row button.current {
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, white);
  box-shadow: 0 10px 22px rgba(145, 87, 25, 0.1);
}

.rank-note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 380px) {
  .rank-next-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Rank compact tightening */
.rank-path {
  margin-top: 0;
  padding: 12px;
}

.rank-chart-head {
  margin-bottom: 8px;
}

.rank-chart-head p {
  font-size: 11px;
}

.rank-chart-head h3 {
  font-size: 20px;
}

.rank-ladder {
  gap: 8px;
}

.rank-compact-card {
  grid-template-columns: 46px 1fr;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
}

.rank-current-mark {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  font-size: 16px;
}

.rank-current-copy {
  gap: 3px;
}

.rank-current-copy span {
  font-size: 10px;
}

.rank-current-copy strong {
  font-size: 18px;
}

.rank-current-copy p {
  font-size: 11px;
}

.rank-compact-progress {
  height: 6px;
}

.rank-next-row {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.rank-next-row::-webkit-scrollbar {
  display: none;
}

.rank-next-row button {
  min-width: 82px;
  min-height: 52px;
  flex: 0 0 auto;
  grid-template-columns: 24px 1fr;
  grid-template-rows: auto auto;
  justify-items: start;
  align-content: center;
  gap: 2px 6px;
  padding: 7px;
  border-radius: 14px;
  text-align: left;
}

.rank-next-row button span {
  grid-row: 1 / 3;
  width: 24px;
  height: 24px;
  border-radius: 9px;
  font-size: 9px;
}

.rank-next-row button strong {
  font-size: 10px;
  line-height: 1;
}

.rank-next-row button em {
  font-size: 9px;
}

.rank-note {
  margin: 7px 0 0;
  font-size: 11px;
}


/* Rank legacy override */
.rank-ladder .rank-next-row button {
  display: grid;
}

.rank-ladder .rank-next-row button::before,
.rank-ladder .rank-next-row button::after {
  content: none;
}

.rank-ladder .rank-next-row button span,
.rank-ladder .rank-next-row button strong,
.rank-ladder .rank-next-row button em {
  position: static;
  display: block;
  margin: 0;
  transform: none;
}

.rank-path .rank-ladder em::before {
  content: none;
}

.rank-path .rank-ladder > button {
  display: none;
}

.rank-path {
  max-height: none;
}

.rank-note {
  display: none;
}

.rank-chart-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.rank-chart-head p {
  margin: 0 0 2px;
}

.rank-chart-head > strong {
  align-self: center;
}


/* Final compact rank widget */
.rank-path {
  padding: 12px;
  overflow: visible;
}

.rank-chart-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.rank-chart-head > strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.rank-chart-head > strong[aria-expanded="true"] {
  background: #2f2a21;
  color: #fff;
}

.rank-ladder {
  display: grid;
  gap: 8px;
}

.rank-compact-card {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border-radius: 18px;
}

.rank-current-mark {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  font-size: 16px;
}

.rank-current-copy {
  min-width: 0;
  gap: 3px;
}

.rank-current-copy span {
  width: max-content;
  max-width: 100%;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, white);
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

.rank-current-copy strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 18px;
  line-height: 1.05;
}

.rank-current-copy p {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.2;
}

.rank-compact-progress {
  height: 6px;
}

.rank-next-row {
  display: none !important;
}

.rank-next-compact {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 8%, white);
}

.rank-next-compact span {
  grid-column: 1 / -1;
  width: auto;
  height: auto;
  display: block;
  place-items: initial;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.rank-next-compact strong {
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.rank-next-compact em {
  grid-column: auto;
  align-self: center;
  justify-self: end;
  height: auto;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.rank-all-list[hidden] {
  display: none !important;
}

.rank-all-list {
  display: grid;
  gap: 7px;
  max-height: 260px;
  overflow-y: auto;
  padding: 2px 2px 4px;
}

.rank-path .rank-all-list button {
  width: 100%;
  min-height: 48px;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
  color: var(--ink);
  text-align: left;
}

.rank-path .rank-all-list button::before,
.rank-path .rank-all-list button::after,
.rank-path .rank-all-list em::before {
  content: none !important;
}

.rank-path .rank-all-list button span,
.rank-path .rank-all-list button strong,
.rank-path .rank-all-list button em {
  position: static;
  display: block;
  margin: 0;
  transform: none;
}

.rank-path .rank-all-list button span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 14%, white);
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.rank-path .rank-all-list button strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.1;
}

.rank-path .rank-all-list button em {
  grid-column: auto;
  align-self: center;
  justify-self: end;
  height: auto;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.rank-path .rank-all-list button.current {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, white);
}

.rank-note {
  display: none !important;
}

@media (max-width: 380px) {
  .rank-chart-head {
    grid-template-columns: 1fr;
  }

  .rank-chart-head > strong {
    justify-self: start;
  }

  .rank-next-compact {
    grid-template-columns: 1fr;
  }
}


/* ─── ADMIN PANEL ──────────────────────────────────────────────────────────── */

.admin-screen {
  display: flex;
  flex-direction: column;
  background: #fff6e8;
  min-height: 100%;
}

.admin-screen[aria-hidden="true"] { display: none; }
.admin-screen[aria-hidden="false"] { display: flex; }

.admin-nav-link { color: #f26a00 !important; }

.admin-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1rem 6rem;
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.admin-section {
  border: none;
  margin: 0;
  padding: 1.25rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-section legend {
  font-weight: 700;
  font-size: .95rem;
  color: #f26a00;
  padding: 0 .25rem;
  margin-bottom: .25rem;
}

.admin-section label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .9rem;
  font-weight: 600;
  color: #3a3020;
}

.admin-section label input,
.admin-section label select,
.admin-section label textarea {
  font-size: .95rem;
  padding: .6rem .75rem;
  border: 1.5px solid #e0d5c0;
  border-radius: .6rem;
  background: #fdf8f0;
  color: #3a3020;
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
  resize: vertical;
}

.admin-section label input:focus,
.admin-section label select:focus,
.admin-section label textarea:focus { border-color: #f26a00; }

.required { color: #e84040; }

.admin-question-block {
  background: #fdf8f0;
  border: 1.5px solid #e0d5c0;
  border-radius: .75rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: .75rem;
}

.admin-question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-question-num { font-weight: 700; font-size: .9rem; color: #f26a00; }

.admin-remove-question {
  background: none; border: none; cursor: pointer; padding: .25rem; color: #999; display: flex;
}
.admin-remove-question svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.admin-remove-question:hover { color: #e84040; }

.admin-question-block label {
  display: flex; flex-direction: column; gap: .3rem;
  font-size: .875rem; font-weight: 600; color: #3a3020;
}

.admin-question-block label input,
.admin-question-block label textarea {
  font-size: .9rem; padding: .5rem .65rem;
  border: 1.5px solid #e0d5c0; border-radius: .5rem;
  background: #fff; outline: none; font-family: inherit; resize: vertical;
}
.admin-question-block label input:focus,
.admin-question-block label textarea:focus { border-color: #f26a00; }

.admin-answers-label { font-size: .875rem; font-weight: 600; color: #3a3020; margin: 0 0 .4rem; }

.admin-answer-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.admin-answer-num { font-size: .8rem; font-weight: 700; color: #888; min-width: 1.2rem; text-align: center; }

.admin-answer-input {
  flex: 1; font-size: .9rem; padding: .45rem .65rem;
  border: 1.5px solid #e0d5c0; border-radius: .5rem;
  background: #fff; outline: none; font-family: inherit;
}
.admin-answer-input:focus { border-color: #f26a00; }

.admin-remove-answer { background: none; border: none; cursor: pointer; padding: .2rem; color: #ccc; display: flex; }
.admin-remove-answer svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.admin-remove-answer:hover { color: #e84040; }

.admin-add-answer {
  background: none; border: 1.5px dashed #d0c5b0; border-radius: .5rem;
  padding: .4rem .75rem; font-size: .85rem; color: #888; cursor: pointer;
  width: 100%; text-align: left; font-family: inherit; margin-top: .25rem;
}
.admin-add-answer:hover { border-color: #f26a00; color: #f26a00; }

.admin-add-question {
  display: flex; align-items: center; gap: .5rem;
  background: none; border: 2px dashed #f26a00; border-radius: .75rem;
  padding: .75rem 1rem; font-size: .95rem; font-weight: 600; color: #f26a00;
  cursor: pointer; width: 100%; justify-content: center;
  font-family: inherit; margin-top: .25rem; transition: background .15s;
}
.admin-add-question:hover { background: #fff0e0; }
.admin-add-question svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.5; }

.admin-form-footer { display: flex; flex-direction: column; gap: .75rem; }
.admin-form-message { font-size: .9rem; min-height: 1.2em; text-align: center; }
.admin-form-message.is-error { color: #e84040; }
.admin-form-message.is-success { color: #2a9a5a; }

.admin-submit {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: #f26a00; color: #fff; border: none; border-radius: .875rem;
  padding: .9rem 1.5rem; font-size: 1rem; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: background .2s, opacity .2s;
}
.admin-submit:hover { background: #d45c00; }
.admin-submit:disabled { opacity: .6; cursor: not-allowed; }
.admin-submit svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.5; }

/* ─── ADMIN PANEL v2 ────────────────────────────────────────────────────────── */

/* Sticky publish bar */
.admin-sticky-publish {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff6e8;
  padding: .75rem 1rem .5rem;
  border-bottom: 1px solid #e8ddc8;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

/* Admin header */
.admin-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: #fff6e8;
  border-bottom: 1.5px solid #e8ddc8;
}
.admin-header-brand { font-weight: 900; font-size: .85rem; color: #f26a00; text-transform: uppercase; letter-spacing: .05em; }
.admin-header-title { flex: 1; font-weight: 700; font-size: 1rem; color: #3a3020; }
.admin-logout-btn {
  display: flex; align-items: center; gap: .35rem;
  background: none; border: 1.5px solid #e0d5c0; border-radius: .6rem;
  padding: .4rem .75rem; font-size: .8rem; font-weight: 600; color: #888;
  cursor: pointer; font-family: inherit;
}
.admin-logout-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.admin-logout-btn:hover { border-color: #e84040; color: #e84040; }

/* Type label */
.admin-type-label {
  display: flex; flex-direction: column; gap: .3rem;
  font-size: .875rem; font-weight: 700; color: #f26a00;
}
.admin-type-label select {
  font-size: .9rem; padding: .5rem .65rem;
  border: 2px solid #f26a00; border-radius: .6rem;
  background: #fff8f0; color: #3a3020; outline: none; font-family: inherit;
}

/* Type note */
.admin-type-note {
  font-size: .8rem; color: #999; margin: .25rem 0 0;
  font-style: italic;
}

/* Pair rows (matching) */
.admin-pair-row {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem;
}
.admin-pair-arrow { font-size: 1rem; color: #f26a00; flex-shrink: 0; }
.admin-pair-left,
.admin-pair-right {
  flex: 1; font-size: .9rem; padding: .45rem .6rem;
  border: 1.5px solid #e0d5c0; border-radius: .5rem;
  background: #fff; outline: none; font-family: inherit;
}
.admin-pair-left:focus,
.admin-pair-right:focus { border-color: #f26a00; }

/* Media block */
.admin-media-block {
  border: 1.5px dashed #d0c5b0;
  border-radius: .6rem;
  font-size: .875rem;
}
.admin-media-block summary {
  padding: .5rem .75rem; cursor: pointer; color: #888;
  font-weight: 600; list-style: none; outline: none;
}
.admin-media-block summary:hover { color: #f26a00; }
.admin-media-inner {
  padding: .75rem;
  display: flex; flex-direction: column; gap: .6rem;
  border-top: 1px solid #e8ddc8;
}
.admin-media-inner label {
  display: flex; flex-direction: column; gap: .3rem;
  font-size: .85rem; font-weight: 600; color: #3a3020;
}
.admin-media-inner label input,
.admin-media-inner label textarea {
  font-size: .9rem; padding: .5rem .65rem;
  border: 1.5px solid #e0d5c0; border-radius: .5rem;
  background: #fff; outline: none; font-family: inherit; resize: vertical;
}
.admin-media-inner label input:focus,
.admin-media-inner label textarea:focus { border-color: #f26a00; }

/* ─── SEQUENCE QUESTION (test view) ─────────────────────────────────────────── */

.sequence-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }

.sequence-item {
  display: flex; align-items: center; gap: .75rem;
  background: #fff; border: 2px solid #e0d5c0; border-radius: .75rem;
  padding: .75rem 1rem; cursor: pointer; text-align: left;
  font-size: .95rem; font-family: inherit; width: 100%;
  transition: border-color .15s, background .15s;
}
.sequence-item:hover { border-color: #f26a00; background: #fff8f0; }
.sequence-item.is-selected { border-color: #f26a00; background: #fff0e0; box-shadow: 0 0 0 3px rgba(242,106,0,.15); }
.sequence-item.is-correct {
  border-color: #2e7d4f;
  background: #edf8ef;
  color: #225f3d;
  box-shadow: 0 0 0 3px rgba(46, 125, 79, 0.14);
}
.sequence-item.is-wrong {
  border-color: #c0392b;
  background: #fff0ed;
  color: #973024;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}
.sequence-item:disabled {
  cursor: default;
}

.sequence-pos {
  min-width: 1.75rem; height: 1.75rem;
  background: #f26a00; color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; flex-shrink: 0;
}
.sequence-item.is-selected .sequence-pos { background: #d45c00; }
.sequence-item.is-correct .sequence-pos { background: #2e7d4f; }
.sequence-item.is-wrong .sequence-pos { background: #c0392b; }

/* ─── IMAGE ZOOM OVERLAY ─────────────────────────────────────────────────────── */

.image-zoom-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
}
.image-zoom-overlay img {
  max-width: 95vw; max-height: 90vh;
  border-radius: .5rem; object-fit: contain;
}

.question-image--zoomable img { cursor: zoom-in; }

/* Rotatable text block */
.rotatable-text { transition: transform .3s; }
.rotate-text-btn {
  display: inline-block; margin-top: .5rem;
  background: none; border: 1px solid #d0c5b0; border-radius: .4rem;
  padding: .25rem .6rem; font-size: .8rem; cursor: pointer; color: #888;
}
.rotate-text-btn:hover { color: #f26a00; border-color: #f26a00; }

/* ─── ADMIN HEADER FIX ──────────────────────────────────────────────────────── */
.admin-header {
  flex-wrap: nowrap;
  padding: .6rem 1rem;
  gap: .5rem;
}
.admin-header-brand {
  font-size: .75rem;
  white-space: nowrap;
}
.admin-header-title {
  font-size: .9rem;
  white-space: nowrap;
}
.admin-logout-btn {
  white-space: nowrap;
  padding: .35rem .65rem;
  font-size: .78rem;
}
.admin-sticky-publish {
  padding: .5rem 1rem .4rem;
}

/* ─── ADMIN LAYOUT FIX ──────────────────────────────────────────────────────── */
.admin-screen {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.admin-sticky-publish {
  margin-top: 0;
  flex-shrink: 0;
}
.admin-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 5rem;
}

/* ─── FLASHCARD VIEWER ──────────────────────────────────────────────────────── */
.flashcard-viewer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 0 2rem;
}

.flashcard-progress {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
}

.flashcard-scene {
  width: 100%;
  max-width: 480px;
  height: 240px;
  perspective: 1200px;
  cursor: pointer;
}

.flashcard-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .42s cubic-bezier(.4,0,.2,1);
  border-radius: 22px;
}

.flashcard-card.is-flipped {
  transform: rotateY(180deg);
}

.flashcard-face,
.flashcard-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.75rem;
  text-align: center;
  gap: .6rem;
}

/* Лицевая сторона — белая карточка с тёплой тенью */
.flashcard-face {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* Оборотная сторона — оранжевая */
.flashcard-back {
  background: var(--orange);
  color: #fff;
  transform: rotateY(180deg);
  box-shadow: 0 12px 36px rgba(242, 106, 0, .28);
}

.flashcard-side-label {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .5;
}

.flashcard-text {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  word-break: break-word;
}

.flashcard-back .flashcard-text {
  color: #fff;
}

.flashcard-hint {
  font-size: .75rem;
  color: var(--muted);
  margin-top: .15rem;
}

.flashcard-controls {
  display: flex;
  gap: .6rem;
  align-items: center;
}

/* Стрелки ← → */
.flashcard-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.15rem;
  cursor: pointer;
  transition: opacity .12s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(150, 91, 21, .1);
}

.flashcard-btn:active {
  transform: scale(.9);
  opacity: .7;
}

.flashcard-btn:disabled {
  opacity: .25;
  cursor: default;
  box-shadow: none;
}

/* Кнопка "Перевернуть" — оранжевая */
.flashcard-flip-btn {
  display: flex;
  align-items: center;
  gap: .45rem;
  height: 2.6rem;
  border-radius: 1.3rem;
  padding: 0 1.4rem;
  font-size: .84rem;
  font-weight: 800;
  background: var(--orange);
  border: none;
  color: #fff;
  cursor: pointer;
  transition: opacity .12s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 16px rgba(242, 106, 0, .28);
}

.flashcard-flip-btn:active {
  opacity: .8;
  transform: scale(.97);
}

.flashcard-toggle-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: 13px;
  color: var(--muted);
}

.flashcard-toggle-row select {
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px 8px;
  background: var(--surface-strong);
  color: var(--ink);
  cursor: pointer;
}

.flashcard-dots {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 300px;
}

.flashcard-dot {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: #f4e7d7;
  transition: background .2s;
}

.flashcard-dot.active {
  background: var(--orange);
}

.flashcard-dot.seen {
  background: var(--gold);
}

/* ═══════════════════════════════════════════════════════════
   PWA — баннер установки
   ═══════════════════════════════════════════════════════════ */

.pwa-install-banner {
  position: fixed;
  bottom: calc(70px + env(safe-area-inset-bottom));
  left: 12px;
  right: 12px;
  z-index: 9999;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(242, 106, 0, .18), 0 2px 8px rgba(0,0,0,.07);
  animation: pwa-slide-up .35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pwa-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pwa-install-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}

.pwa-install-inner img {
  flex-shrink: 0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(242, 106, 0, .22);
}

.pwa-install-inner > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pwa-install-inner strong {
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-install-inner span {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-install-btn {
  flex-shrink: 0;
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .15s;
}

.pwa-install-btn:active {
  opacity: .82;
  transform: scale(.96);
}

.pwa-install-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 8px;
  transition: color .15s;
}

.pwa-install-close:hover {
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════
   PWA — тост уведомлений (запрос разрешения)
   ═══════════════════════════════════════════════════════════ */

.notif-toast {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  z-index: 9998;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.1);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: pwa-slide-down .3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pwa-slide-down {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.notif-toast-icon {
  font-size: 24px;
  line-height: 1;
}

.notif-toast-body {
  flex: 1;
  min-width: 0;
}

.notif-toast-body strong {
  display: block;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 2px;
}

.notif-toast-body span {
  font-size: 12px;
  color: var(--muted);
}

.notif-toast-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.notif-toast-allow {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.notif-toast-later {
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
}

.ui-icon,
.inline-ui-icon,
.bubble-ui-icon,
.desktop-rail-stat-icon,
.desktop-mini-task-icon,
.notif-toast-svg,
.splash-icon svg {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inline-ui-icon {
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.38em;
  color: var(--orange);
  vertical-align: -0.14em;
}

.bubble-ui-icon {
  width: 24px;
  height: 24px;
  margin: 0 8px -5px 0;
  color: var(--orange);
}

.splash-icon {
  display: grid;
  place-items: center;
}

.splash-icon svg {
  width: 52%;
  height: 52%;
  color: #fff;
  stroke-width: 1.75;
}

.desktop-rail-stats span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.desktop-rail-stat-icon {
  width: 19px;
  height: 19px;
  color: var(--orange);
}

.desktop-mini-task-icon {
  width: 19px;
  height: 19px;
  color: var(--orange);
}

.notif-toast-svg {
  width: 22px;
  height: 22px;
  color: var(--orange);
}

/* ═══════════════════════════════════════════════════════════
   ЭКРАН АККАУНТА
   ═══════════════════════════════════════════════════════════ */

.account-topbar {
  display: grid;
  grid-template-columns: 44px 1fr 86px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 20px;
}

.account-topbar h2 {
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
  margin: 0;
  text-align: center;
  line-height: 1;
}

.account-back-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  border-radius: 14px;
  transition: color .15s;
}

.account-back-btn:hover { color: var(--ink); }

.account-edit-toggle {
  height: 44px;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 246, 232, 0.84);
  border: 1px solid rgba(242, 106, 0, 0.12);
  color: var(--orange);
  font-size: 13px;
  font-weight: 900;
  padding: 0 12px;
  cursor: pointer;
  border-radius: 14px;
  min-width: 86px;
  text-align: center;
}

/* Hero аватар */
.account-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
}

.account-avatar-xl {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff8b20, #ffd16a);
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(242, 106, 0, .28);
  margin-bottom: 4px;
}

.account-hero strong {
  font-size: 20px;
  color: var(--ink);
}

.account-hero span {
  font-size: 14px;
  color: var(--muted);
}

/* Info list */
.account-info-list {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
}

.account-info-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.account-info-row:last-child { border-bottom: none; }

.account-info-row > span {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  flex-shrink: 0;
}

.account-info-row > strong {
  font-size: 14px;
  color: var(--ink);
  text-align: right;
  word-break: break-word;
}

.acc-info-subjects-row { align-items: flex-start; }
.acc-info-subjects-row > strong { max-width: 200px; }

/* Edit form */
.account-edit-form {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
}

.account-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-field > span {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.account-field input,
.account-field select {
  height: 48px;
  padding: 0 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface-strong);
  outline: none;
  transition: border-color .15s;
}

.account-field input:focus,
.account-field select:focus {
  border-color: var(--orange);
}

.account-edit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.account-edit-actions .primary-action,
.account-edit-actions .secondary-action {
  width: 100%;
}

/* Action buttons */
.account-actions-block {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.account-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 15px 18px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid var(--line);
  background: var(--surface-strong);
  color: var(--ink);
  text-align: left;
  transition: opacity .15s, transform .12s;
}

.account-action-btn:active {
  opacity: .8;
  transform: scale(.98);
}

.account-logout-btn { color: var(--ink); }

.account-delete-btn {
  color: #d93025;
  border-color: rgba(217, 48, 37, .22);
  background: rgba(217, 48, 37, .04);
}

.account-delete-btn svg { stroke: #d93025; }

/* Confirmation sheets */
.account-confirm-sheet {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  margin-top: 16px;
}

.account-confirm-sheet.account-confirm-danger {
  border-color: rgba(217, 48, 37, .28);
  background: rgba(217, 48, 37, .03);
}

.account-confirm-text {
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.45;
}

.account-confirm-danger .account-confirm-text {
  color: #b52a1f;
}

.account-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.account-confirm-actions .primary-action,
.account-confirm-actions .secondary-action {
  width: 100%;
}

.danger-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: #d93025;
  color: #fff;
  transition: opacity .15s;
}

.danger-action-btn:active { opacity: .82; }

/* ═══════════════════════════════════════════════════════════
   INSTALL CARD — iOS инструкция, встроена в home-screen
   ═══════════════════════════════════════════════════════════ */

.install-card {
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 18px;
  border: 1.5px solid rgba(242, 106, 0, .18);
  box-shadow: 0 4px 20px rgba(242, 106, 0, .1);
}

/* Оранжевая шапка */
.install-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px 14px 16px;
  background: var(--orange-soft);
  border-bottom: 1px solid rgba(242, 106, 0, .15);
}

.install-card-icon {
  flex-shrink: 0;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(242, 106, 0, .28);
}

.install-card-info {
  flex: 1;
  min-width: 0;
}

.install-card-info strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 1px;
}

.install-card-info span {
  font-size: 12px;
  color: var(--orange);
  font-weight: 700;
}

.install-card-close {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(242, 106, 0, .15);
  border: none;
  font-size: 16px;
  color: var(--orange);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 700;
}

/* Шаги */
.install-card-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--surface-strong);
}

.install-card-steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

.install-card-steps li:last-child {
  border-bottom: none;
}

.install-step-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.install-card-steps li > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.install-card-steps li strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 3px;
}

.install-card-steps li span {
  font-size: 12px;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════
   ПОИСК — результаты
   ═══════════════════════════════════════════════════════════ */

.search-results {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  margin-top: -10px;
  margin-bottom: 18px;
  box-shadow: 0 6px 20px rgba(46, 36, 30, .08);
}

.search-group-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--orange);
  padding: 10px 16px 4px;
  margin: 0;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}

.search-result-item:first-of-type { border-top: none; }

.search-result-item:active { background: var(--orange-soft); }

.search-result-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--orange-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.search-result-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.search-result-text strong {
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-text span {
  font-size: 12px;
  color: var(--muted);
}

.search-empty {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 16px;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   ПРЕДМЕТЫ В ФОРМЕ РЕДАКТИРОВАНИЯ АККАУНТА
   ═══════════════════════════════════════════════════════════ */

.acc-edit-subjects {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 4px;
}

.acc-subject-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  background: var(--surface-strong);
  transition: border-color .15s, background .15s;
}

.acc-subject-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.acc-subject-option span {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--orange-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.acc-subject-option span img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.acc-subject-option strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acc-subject-option:has(input:checked) {
  border-color: var(--orange);
  background: var(--orange-soft);
}

/* ─── MOBILE: no-zoom + no-shift ──────────────────────────────────────────────
   1. html/body overflow-x: hidden — блокирует горизонтальный сдвиг при
      изменении visual-viewport (клавиатура iOS).
   2. font-size ≥ 16px на всех интерактивных элементах — iOS не зумирует
      страницу при фокусе, если font-size не меньше 16px.
   ─────────────────────────────────────────────────────────────────────────── */
/* ─── Loading bar ──────────────────────────────────────────────────────────── */
.app-loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.app-loader::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--orange) 35%,
    #ffd16a 55%,
    var(--orange) 75%,
    transparent 100%
  );
  animation: loader-sweep 1.3s ease-in-out infinite;
}

@keyframes loader-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.portal-screen.is-loading .app-loader {
  opacity: 1;
}

html,
body {
  overflow: hidden;
  overscroll-behavior: none;
}

@media (max-width: 430px) {
  html, body {
    height: 100%;
  }

  .app-shell {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }

  .portal-screen {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ТЕСТЫ — новые элементы взаимодействия
═══════════════════════════════════════════════════════════════ */

.answer-confirm-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 18px;
  background: var(--orange);
  color: white;
  font: inherit;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.answer-confirm-btn:active { opacity: 0.8; }
.answer-confirm-btn:disabled { opacity: 0.5; cursor: default; }
.answer-confirm-btn.is-correct-btn { background: #2e7d4f; }
.answer-confirm-btn.is-wrong-btn   { background: #c0392b; }

/* Matching grid — две колонки */
.matching-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: start;
}
.matching-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.matching-btn {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  word-break: break-word;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s;
  position: relative;
}
.matching-btn.match-pastel-violet { --match-bg: #f3ecff; --match-border: #b894f6; --match-ink: #5f3ca8; }
.matching-btn.match-pastel-blue   { --match-bg: #eaf4ff; --match-border: #83bdf5; --match-ink: #245f9c; }
.matching-btn.match-pastel-yellow { --match-bg: #fff5c9; --match-border: #e8c957; --match-ink: #795f00; }
.matching-btn.match-pastel-mint   { --match-bg: #e8f8ef; --match-border: #7bc79b; --match-ink: #236a42; }
.matching-btn.match-pastel-peach  { --match-bg: #ffefdf; --match-border: #f2aa66; --match-ink: #864710; }
.matching-btn.match-pastel-rose   { --match-bg: #ffeaf0; --match-border: #ef9ab2; --match-ink: #8f3650; }
.matching-btn.match-pastel-cyan   { --match-bg: #e8fbff; --match-border: #74cddd; --match-ink: #236b78; }
.matching-btn.is-active {
  border-color: var(--orange);
  background: var(--orange-soft);
  color: var(--orange);
  box-shadow: 0 0 0 3px rgba(242, 106, 0, 0.14);
}
.matching-btn.is-matched {
  border-color: color-mix(in srgb, var(--match-border, #f26a00) 76%, transparent);
  background: var(--match-bg, var(--orange-soft));
  color: var(--match-ink, var(--orange));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--match-border, #f26a00) 18%, transparent);
}
.matching-btn.is-matched::after {
  content: attr(data-match-label);
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: currentColor;
  opacity: 0.75;
  margin-top: 2px;
}
.matching-btn.is-correct {
  border-color: #2e7d4f;
  background: #edf8ef;
  color: #225f3d;
  box-shadow: 0 0 0 3px rgba(46, 125, 79, 0.16);
}
.matching-btn.is-wrong {
  border-color: #c0392b;
  background: #fff0ed;
  color: #973024;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14);
}
.matching-btn:disabled {
  cursor: default;
}

/* ══════════════════════════════════════════════════════════════
   ПРОФИЛЬ — кнопка настройки
═══════════════════════════════════════════════════════════════ */

.settings-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

/* Поиск друзей — coming soon */
.friends-soon-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-strong);
}
.friends-soon-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--orange-soft);
  color: var(--orange);
}
.friends-soon-icon svg { width: 20px; height: 20px; }
.friends-soon-card > div {
  flex: 1 1 0;
  min-width: 0;
}
.friends-soon-card strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2px;
}
.friends-soon-card > div > span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}
.coming-soon-badge {
  flex-shrink: 0;
  align-self: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Настройки — экраны внутри профиля ── */
.settings-panel {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 248, 238, 0.98), rgba(255, 253, 249, 0.99) 42%),
    var(--surface);
  z-index: 30;
  overflow-y: auto;
  padding: 8px 0 28px;
  scrollbar-width: none;
}
.settings-panel[hidden] { display: none !important; }
.settings-panel::-webkit-scrollbar { display: none; }

/* ══════════════════════════════════════════════════════════════
   НАСТРОЙКИ — экраны
═══════════════════════════════════════════════════════════════ */

.section-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.section-topbar h2 {
  flex: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}
.back-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface-strong);
  color: var(--ink);
  cursor: pointer;
}

.app-back-topbar {
  align-items: center;
  margin-bottom: 18px;
}

.app-back-topbar h2 {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.08;
}

.app-back-topbar .back-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(112, 73, 31, 0.06);
}

.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 16px;
  background: var(--orange);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 14px 26px rgba(242, 106, 0, 0.22);
}

.primary-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  box-shadow: none;
}

.settings-summary-card,
.notif-status-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(242, 106, 0, 0.16);
  border-radius: 24px;
  background:
    radial-gradient(circle at 96% 8%, rgba(255, 190, 82, 0.16), transparent 34%),
    rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 28px rgba(112, 73, 31, 0.08);
  margin-bottom: 16px;
}

.settings-summary-icon,
.notif-status-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--orange);
  color: #fff;
  box-shadow: 0 12px 24px rgba(242, 106, 0, 0.2);
}

.settings-summary-icon svg,
.notif-status-icon svg {
  width: 28px;
  height: 28px;
}

.settings-summary-card > div,
.notif-status-card > div {
  min-width: 0;
}

.settings-summary-card strong,
.notif-status-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.2;
}

.settings-summary-card span,
.notif-status-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(112, 73, 31, 0.06);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.settings-nav-item:active {
  transform: translateY(1px);
  background: var(--orange-soft);
}
.settings-nav-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: var(--orange-soft);
  color: var(--orange);
}

.settings-nav-icon svg {
  width: 29px;
  height: 29px;
  stroke-width: 1.9;
}

.settings-nav-item > div {
  flex: 1 1 0;
  min-width: 0;
}
.settings-nav-item strong {
  display: block;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 4px;
}
.settings-nav-item span {
  display: block;
  font-size: 13px;
  line-height: 1.25;
  color: var(--muted);
}
.chevron {
  flex-shrink: 0;
  color: var(--muted);
  width: 18px;
  height: 18px;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-section-label {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.settings-feedback {
  min-height: 18px;
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 800;
}
.settings-feedback:empty {
  display: none;
}
.settings-feedback.ok  { color: #2e7d4f; }
.settings-feedback.err { color: #c0392b; }

/* ── Уведомления ─────────────────────────────────────────── */
.notif-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(116px, 0.38fr);
  gap: 12px;
  margin: 0 0 16px;
}

.notif-action-row .primary-btn,
.notif-action-row .secondary-action {
  min-height: 52px;
  width: 100%;
  padding: 0 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.1;
  white-space: nowrap;
}

.notif-settings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notif-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  min-height: 76px;
  box-shadow: 0 8px 20px rgba(112, 73, 31, 0.05);
}
.notif-toggle-row > div { flex: 1; min-width: 0; }
.notif-toggle-row strong {
  display: block;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
  margin-bottom: 3px;
}
.notif-toggle-row > div > span {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}
.notif-toggle {
  flex-shrink: 0;
  width: 48px;
  height: 28px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}
.notif-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.notif-toggle:checked { background: var(--orange); }
.notif-toggle:checked::after { transform: translateX(20px); }

@media (max-width: 520px) {
  .settings-panel {
    padding-top: 6px;
  }

  .settings-summary-card,
  .notif-status-card {
    gap: 12px;
    padding: 14px;
    border-radius: 22px;
  }

  .settings-summary-icon,
  .notif-status-icon,
  .settings-nav-icon {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  .settings-summary-card strong,
  .notif-status-card strong,
  .settings-nav-item strong {
    font-size: 15px;
  }

  .settings-summary-card span,
  .notif-status-card span,
  .settings-nav-item span,
  .notif-toggle-row > div > span {
    font-size: 12px;
  }

  .settings-nav-item {
    min-height: 76px;
    padding: 12px 14px;
    border-radius: 20px;
  }

  .notif-action-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .notif-action-row .primary-btn,
  .notif-action-row .secondary-action {
    min-height: 50px;
  }

  .notif-toggle-row {
    min-height: 72px;
    padding: 12px 14px;
  }
}

/* ══════════════════════════════════════════════════════════════
   ФОКУС НА СЕГОДНЯ — индикатор фокус-теста
═══════════════════════════════════════════════════════════════ */
.plan-item--focus::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(242, 106, 0, 0.28);
  pointer-events: none;
}
.plan-item--focus { position: relative; }

/* Profile polish: compact hub and separate profile screens */
#settings-screen {
  padding-top: 12px;
}

.profile-hub-top {
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  gap: 12px;
  margin-bottom: 14px;
}

.profile-hub-avatar,
.profile-settings-btn {
  width: 46px;
  height: 46px;
}

.profile-hub-avatar {
  font-size: 19px;
}

.profile-settings-btn {
  border-radius: 15px;
}

.profile-settings-btn svg {
  width: 22px;
  height: 22px;
}

.profile-hub-top h2 {
  margin-bottom: 1px;
  font-size: 11px;
}

.profile-hub-top strong {
  font-size: 20px;
}

.profile-hub-top span {
  margin-top: 2px;
  font-size: 12px;
}

.profile-wallet-card {
  gap: 10px;
  margin-bottom: 10px;
  padding: 14px;
  border-radius: 20px;
}

.profile-wallet-card h3 {
  font-size: 21px;
}

.profile-wallet-card p,
.profile-wallet-card > div > span {
  font-size: 12px;
}

.profile-wallet-card .profile-metrics {
  gap: 7px;
}

.profile-wallet-card .profile-metrics article {
  padding: 9px 6px;
  border-radius: 14px;
}

.profile-wallet-card .profile-metrics strong {
  font-size: 18px;
}

.profile-wallet-card .profile-metrics span {
  font-size: 10px;
}

.profile-support-card {
  grid-template-columns: 42px 1fr;
  gap: 12px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 20px;
}

.profile-support-card > span,
.profile-hub-tile > span {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}

.profile-support-card svg,
.profile-hub-tile svg {
  width: 22px;
  height: 22px;
}

.profile-support-card strong {
  font-size: 15px;
}

.profile-hub-grid {
  gap: 10px;
  margin-bottom: 0;
}

.profile-hub-tile {
  min-height: 112px;
  padding: 13px;
  border-radius: 20px;
}

.profile-hub-tile strong {
  font-size: 15px;
}

.profile-hub-tile em,
.profile-support-card em {
  margin-top: 4px;
  font-size: 11px;
}

.profile-hub-tile.tile-wide {
  min-height: 86px;
  grid-template-columns: 46px 1fr;
  gap: 10px 12px;
}

.profile-panel {
  position: absolute;
  inset: 0;
  z-index: 24;
  overflow-y: auto;
  padding: 12px 0 26px;
  background:
    linear-gradient(180deg, rgba(255, 248, 238, 0.98), rgba(255, 253, 249, 0.99) 44%),
    var(--surface);
  scrollbar-width: none;
}

.profile-panel[hidden] {
  display: none !important;
}

.profile-panel::-webkit-scrollbar {
  display: none;
}

.profile-panel-topbar {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.profile-panel-back {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
}

.profile-panel-back svg {
  width: 21px;
  height: 21px;
}

.profile-panel-topbar h2 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.08;
  font-weight: 950;
}

.profile-panel-topbar span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.profile-panel-card,
.profile-favorites-card,
#settings-screen .profile-progress {
  padding: 14px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 8px 20px rgba(112, 73, 31, 0.055);
}

.profile-panel-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.profile-panel-card p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.profile-panel-action {
  width: 100%;
  min-height: 44px;
  border-radius: 15px;
  background: var(--orange);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 950;
}

.profile-panel .section-heading {
  margin-bottom: 10px;
}

.profile-panel .section-heading h2 {
  font-size: 18px;
}

.settings-summary-card,
.notif-status-card {
  border-radius: 20px;
  padding: 14px;
}

.settings-summary-icon,
.notif-status-icon,
.settings-nav-icon {
  flex-basis: 44px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.settings-summary-icon svg,
.notif-status-icon svg,
.settings-nav-icon svg {
  width: 23px;
  height: 23px;
}

.settings-nav {
  gap: 8px;
}

.settings-nav-item {
  min-height: 72px;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
}

.settings-nav-item strong,
.notif-toggle-row strong {
  font-size: 14px;
}

.settings-nav-item span,
.notif-toggle-row > div > span {
  font-size: 12px;
}

/* Profile hub */
#settings-screen {
  padding-top: 18px;
}

.profile-hub-top {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.profile-hub-avatar {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 238, 211, 0.86)),
    var(--orange-soft);
  color: var(--orange);
  font-size: 22px;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(242, 106, 0, 0.12), 0 8px 18px rgba(112, 73, 31, 0.08);
}

.profile-hub-top h2 {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-hub-top strong {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.12;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-hub-top span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.profile-settings-btn {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(242, 106, 0, 0.12);
  border-radius: 18px;
  background: rgba(255, 246, 232, 0.86);
  color: var(--orange);
  box-shadow: 0 8px 18px rgba(112, 73, 31, 0.07);
  cursor: pointer;
}

.profile-settings-btn svg {
  width: 25px;
  height: 25px;
}

.profile-wallet-card,
.profile-support-card,
.profile-favorites-card {
  border: 0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 24px rgba(112, 73, 31, 0.06);
}

.profile-wallet-card {
  display: grid;
  gap: 14px;
  margin: 0 0 14px;
  padding: 18px;
}

.profile-wallet-card p {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-wallet-card h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.12;
  font-weight: 950;
}

.profile-wallet-card > div > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.profile-wallet-card .profile-metrics {
  margin: 0;
}

.profile-wallet-card .profile-metrics article {
  padding: 11px 8px;
  border-radius: 18px;
  background: rgba(255, 246, 232, 0.86);
}

.profile-support-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: center;
  width: 100%;
  margin-bottom: 14px;
  padding: 14px 16px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.profile-support-card > span,
.profile-hub-tile > span {
  display: grid;
  place-items: center;
  color: var(--orange);
  background: rgba(255, 246, 232, 0.9);
  box-shadow: inset 0 0 0 1px rgba(242, 106, 0, 0.08);
}

.profile-support-card > span {
  width: 48px;
  height: 48px;
  border-radius: 17px;
}

.profile-support-card svg,
.profile-hub-tile svg {
  width: 25px;
  height: 25px;
}

.profile-support-card strong,
.profile-hub-tile strong {
  display: block;
  color: var(--ink);
  font-weight: 950;
  line-height: 1.15;
}

.profile-support-card em,
.profile-hub-tile em {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.profile-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.profile-hub-tile {
  min-height: 142px;
  display: grid;
  align-content: space-between;
  justify-items: start;
  gap: 10px;
  padding: 16px;
  border: 0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 10px 24px rgba(112, 73, 31, 0.06);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.profile-hub-tile:active {
  transform: scale(0.98);
}

.profile-hub-tile > span {
  width: 48px;
  height: 48px;
  border-radius: 17px;
}

.profile-hub-tile strong {
  font-size: 18px;
}

.profile-hub-tile.tile-wide {
  grid-column: span 2;
  min-height: 112px;
  grid-template-columns: 54px 1fr;
  align-content: center;
  align-items: center;
}

.profile-hub-tile.tile-wide strong,
.profile-hub-tile.tile-wide em {
  grid-column: 2;
}

.profile-hub-tile.tile-wide > span {
  grid-row: 1 / span 2;
}

.profile-favorites-card {
  margin-bottom: 14px;
  padding: 14px;
}

.profile-favorites-card .section-heading {
  margin-bottom: 10px;
}

.profile-favorite-row {
  width: 100%;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(242, 106, 0, 0.1);
  border-radius: 18px;
  background: rgba(255, 248, 238, 0.58);
  color: var(--ink);
  text-align: left;
}

.profile-favorite-row + .profile-favorite-row {
  margin-top: 8px;
}

.profile-favorite-row > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: white;
  color: var(--orange);
  box-shadow: inset 0 0 0 1px rgba(242, 106, 0, 0.08);
}

.profile-favorite-row img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.profile-favorite-row strong,
.profile-favorite-row em {
  display: block;
}

.profile-favorite-row strong {
  font-size: 14px;
  line-height: 1.2;
}

.profile-favorite-row em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

#settings-screen .profile-progress {
  margin-top: 0;
  border: 0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 24px rgba(112, 73, 31, 0.06);
}

.favorite-test-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 13px;
  border: 1.5px solid rgba(242, 106, 0, 0.18);
  border-radius: 16px;
  background: rgba(255, 246, 232, 0.9);
  color: var(--orange);
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.favorite-test-btn svg {
  width: 18px;
  height: 18px;
}

.favorite-test-btn.is-favorite {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 12px 22px rgba(242, 106, 0, 0.18);
}

.favorite-test-btn.is-favorite svg {
  fill: currentColor;
}

.test-result .result-actions {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}

@media (max-width: 420px) {
  .profile-hub-top {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    gap: 12px;
  }

  .profile-hub-avatar,
  .profile-settings-btn {
    width: 48px;
    height: 48px;
  }

  .profile-hub-top strong {
    font-size: 20px;
  }

  .profile-hub-tile {
    min-height: 132px;
    padding: 14px;
  }

  .profile-hub-tile strong {
    font-size: 16px;
  }

  .result-actions {
    grid-template-columns: 1fr;
  }
}

/* Final compact profile/account pass */
#settings-screen { padding-top: 12px; }
.profile-hub-top { grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 12px; margin-bottom: 12px; }
.profile-hub-avatar,
.profile-settings-btn { width: 46px; height: 46px; }
.profile-hub-avatar { font-size: 19px; }
.profile-settings-btn { border-radius: 15px; }
.profile-settings-btn svg { width: 22px; height: 22px; }
.profile-hub-top h2 { margin-bottom: 1px; font-size: 11px; }
.profile-hub-top strong { font-size: 20px; }
.profile-hub-top span { margin-top: 2px; font-size: 12px; }
.profile-wallet-card { gap: 10px; margin-bottom: 10px; padding: 14px; border-radius: 20px; }
.profile-wallet-card h3 { font-size: 21px; }
.profile-wallet-card p,
.profile-wallet-card > div > span { font-size: 12px; }
.profile-wallet-card .profile-metrics { gap: 7px; }
.profile-wallet-card .profile-metrics article { padding: 9px 6px; border-radius: 14px; }
.profile-wallet-card .profile-metrics strong { font-size: 18px; }
.profile-wallet-card .profile-metrics span { font-size: 10px; }
.profile-support-card { grid-template-columns: 42px 1fr; gap: 12px; margin-bottom: 10px; padding: 12px 14px; border-radius: 20px; }
.profile-support-card > span,
.profile-hub-tile > span { width: 42px; height: 42px; border-radius: 14px; }
.profile-support-card svg,
.profile-hub-tile svg { width: 22px; height: 22px; }
.profile-support-card strong { font-size: 15px; }
.profile-hub-grid { gap: 10px; margin-bottom: 0; }
.profile-hub-tile { min-height: 112px; padding: 13px; border-radius: 20px; }
.profile-hub-tile strong { font-size: 15px; }
.profile-hub-tile em,
.profile-support-card em { margin-top: 4px; font-size: 11px; }
.profile-hub-tile.tile-wide { min-height: 86px; grid-template-columns: 46px 1fr; gap: 10px 12px; }
.profile-panel {
  position: absolute;
  inset: 0;
  z-index: 24;
  overflow-y: auto;
  padding: 12px 0 26px;
  background:
    linear-gradient(180deg, rgba(255, 248, 238, 0.98), rgba(255, 253, 249, 0.99) 44%),
    var(--surface);
  scrollbar-width: none;
}
.profile-panel[hidden] { display: none !important; }
.profile-panel::-webkit-scrollbar { display: none; }
.profile-panel-topbar { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 12px; margin-bottom: 14px; }
.profile-panel-back {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
}
.profile-panel-back svg { width: 21px; height: 21px; }
.profile-panel-topbar h2 { margin: 0; color: var(--ink); font-size: 22px; line-height: 1.08; font-weight: 950; }
.profile-panel-topbar span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 800; }
.profile-panel-card,
.profile-favorites-card,
#settings-screen .profile-progress {
  padding: 14px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 8px 20px rgba(112, 73, 31, 0.055);
}
.profile-panel-card strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 16px; font-weight: 950; }
.profile-panel-card p { margin: 0 0 12px; color: var(--muted); font-size: 13px; font-weight: 750; line-height: 1.35; }
.profile-panel-action {
  width: 100%;
  min-height: 44px;
  border-radius: 15px;
  background: var(--orange);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 950;
}
.profile-panel .section-heading { margin-bottom: 10px; }
.profile-panel .section-heading h2 { font-size: 18px; }
.settings-summary-card,
.notif-status-card { border-radius: 20px; padding: 14px; }
.settings-summary-icon,
.notif-status-icon,
.settings-nav-icon { flex-basis: 44px; width: 44px; height: 44px; border-radius: 14px; }
.settings-summary-icon svg,
.notif-status-icon svg,
.settings-nav-icon svg { width: 23px; height: 23px; }
.settings-nav { gap: 8px; }
.settings-nav-item { min-height: 72px; gap: 12px; padding: 12px 14px; border-radius: 18px; }
.settings-nav-item strong,
.notif-toggle-row strong { font-size: 14px; }
.settings-nav-item span,
.notif-toggle-row > div > span { font-size: 12px; }

#profile-subjects-screen #profile-progress-list {
  display: grid;
  gap: 10px;
}

#profile-subjects-screen #profile-progress-list article {
  min-height: 58px;
  height: auto;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

#profile-subjects-screen #profile-progress-list article:last-child {
  border-bottom: 0;
}

#profile-subjects-screen #profile-progress-list img {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  object-fit: contain;
}

#profile-subjects-screen #profile-progress-list strong {
  min-width: 0;
  font-size: 14px;
  line-height: 1.2;
}

#profile-subjects-screen #profile-progress-list span {
  color: var(--orange);
  font-size: 13px;
  font-weight: 950;
}

#profile-subjects-screen #profile-progress-list progress {
  grid-column: 2 / -1;
  width: 100%;
}

.profile-hub-tile:not(.tile-wide) {
  height: 100px;
  min-height: 100px;
  align-content: start;
  gap: 7px;
  padding: 10px;
}

.profile-hub-tile.tile-wide {
  height: 74px;
  min-height: 74px;
}

.profile-hub-tile:not(.tile-wide) > span {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.profile-hub-tile:not(.tile-wide) svg {
  width: 19px;
  height: 19px;
}

.profile-hub-tile:not(.tile-wide) strong {
  font-size: 14px;
}

.profile-hub-tile:not(.tile-wide) em {
  font-size: 10px;
}

@media (max-width: 420px) {
  .profile-hub-top { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .profile-hub-avatar,
  .profile-settings-btn { width: 44px; height: 44px; }
  .profile-hub-top strong { font-size: 18px; }
  .profile-hub-tile:not(.tile-wide) { height: 96px; min-height: 96px; }
  .profile-hub-tile.tile-wide { height: 72px; min-height: 72px; }
}

/* Final visual QA pass */
.settings-panel .section-topbar {
  margin-bottom: 14px;
}

.notif-status-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(242, 106, 0, 0.14);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 190, 82, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 22px rgba(112, 73, 31, 0.06);
}

.notif-status-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--orange-soft);
  color: var(--orange);
  box-shadow: inset 0 0 0 1px rgba(242, 106, 0, 0.1);
}

.notif-status-icon svg {
  width: 23px;
  height: 23px;
}

.notif-status-card strong {
  margin: 0 0 3px;
  font-size: 16px;
  line-height: 1.15;
}

.notif-status-card span {
  max-width: 100%;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.32;
  font-weight: 800;
}

.notif-action-row {
  grid-template-columns: minmax(0, 1fr) minmax(112px, 0.34fr);
  gap: 10px;
  margin-bottom: 14px;
}

.notif-action-row .primary-btn,
.notif-action-row .secondary-action {
  min-height: 46px;
  height: 46px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1;
}

.notif-settings-list {
  gap: 8px;
}

.notif-toggle-row {
  min-height: 64px;
  padding: 11px 13px;
  border-radius: 18px;
}

.notif-toggle-row strong {
  margin-bottom: 2px;
  font-size: 14px;
  line-height: 1.18;
}

.notif-toggle-row > div > span {
  font-size: 12px;
  line-height: 1.25;
}

.notif-toggle {
  width: 44px;
  height: 26px;
}

.notif-toggle::after {
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
}

.notif-toggle:checked::after {
  transform: translateX(18px);
}

.streak-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
  padding: 18px;
}

.streak-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.05;
}

.streak-card strong {
  width: 100%;
  color: var(--orange);
  font-size: clamp(34px, 8vw, 48px);
  line-height: 0.98;
  letter-spacing: 0;
}

.streak-card > span {
  justify-self: start;
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 900;
}

.exam-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 14px;
  align-items: center;
  overflow: hidden;
}

.exam-panel h2 {
  max-width: 100%;
  font-size: clamp(30px, 8vw, 45px);
  line-height: 0.98;
}

.exam-panel span:not(.exam-orbit span) {
  max-width: 100%;
  font-size: 13px;
}

.exam-orbit {
  width: 82px;
  height: 82px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.26) 50%, transparent 51%),
    conic-gradient(#fff 0 64%, rgba(255, 255, 255, 0.28) 64% 100%);
}

.exam-orbit span {
  width: 58px;
  height: 58px;
  background: #fff;
  color: var(--orange);
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(72, 44, 20, 0.12);
}

.progress-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  align-items: center;
  gap: 14px;
}

.progress-hero h2 {
  max-width: 100%;
  font-size: clamp(24px, 7vw, 38px);
}

.progress-ring {
  width: 82px;
  height: 82px;
}

.progress-ring span {
  width: 58px;
  height: 58px;
  font-size: 18px;
}

#material-detail-title {
  white-space: pre-line;
  line-height: 1.12;
}

#material-detail-title::first-line {
  font-size: 0.92em;
}

.resource-card,
.resource-card:visited,
.resource-card strong,
.resource-card p {
  color: var(--ink) !important;
  text-decoration: none;
}

.resource-card p {
  color: var(--muted) !important;
}

.resource-card strong {
  line-height: 1.12;
}

.profile-hub-tile {
  align-content: start;
  gap: 5px;
}

.profile-hub-tile strong,
.profile-support-card strong {
  margin: 0;
  line-height: 1.12;
}

.profile-hub-tile em,
.profile-support-card em {
  margin-top: 2px;
  line-height: 1.18;
}

.profile-hub-tile:not(.tile-wide) {
  height: 96px;
  min-height: 96px;
}

.profile-hub-tile.tile-wide {
  height: 70px;
  min-height: 70px;
}

@media (max-width: 520px) {
  .notif-action-row {
    grid-template-columns: 1fr;
  }

  .exam-panel {
    grid-template-columns: minmax(0, 1fr) 76px;
  }

  .exam-orbit {
    width: 74px;
    height: 74px;
  }

  .exam-orbit span {
    width: 52px;
    height: 52px;
    font-size: 16px;
  }
}

/* Home cards scale-down */
.progress-hero,
.streak-card,
.exam-panel {
  border-radius: 22px;
  padding: 16px;
}

.progress-hero {
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 12px;
  margin: 18px 0 14px;
}

.progress-hero p {
  font-size: 12px;
  line-height: 1.15;
}

.progress-hero h2 {
  font-size: clamp(21px, 5.6vw, 30px);
  line-height: 1.08;
}

.progress-ring {
  width: 72px;
  height: 72px;
}

.progress-ring span {
  width: 50px;
  height: 50px;
  font-size: 16px;
}

.streak-card {
  gap: 6px;
  min-height: 0;
  margin: 0 0 14px;
}

.streak-card p {
  font-size: 12px;
  line-height: 1.1;
}

.streak-card strong {
  font-size: clamp(26px, 6.4vw, 34px);
  line-height: 1.04;
}

.streak-card > span {
  font-size: 12px;
  line-height: 1.2;
}

.exam-panel {
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 12px;
  margin: 0 0 22px;
}

.exam-panel p {
  font-size: 11px;
  line-height: 1.15;
}

.exam-panel h2 {
  margin-bottom: 4px;
  font-size: clamp(26px, 6.8vw, 36px);
  line-height: 1.02;
}

.exam-panel span:not(.exam-orbit span) {
  font-size: 12px;
  line-height: 1.28;
}

.exam-orbit {
  width: 70px;
  height: 70px;
}

.exam-orbit span {
  width: 50px;
  height: 50px;
  font-size: 15px;
}

@media (max-width: 520px) {
  .progress-hero,
  .streak-card,
  .exam-panel {
    padding: 14px;
  }

  .progress-hero {
    grid-template-columns: minmax(0, 1fr) 64px;
  }

  .progress-ring,
  .exam-orbit {
    width: 64px;
    height: 64px;
  }

  .progress-ring span,
  .exam-orbit span {
    width: 46px;
    height: 46px;
    font-size: 14px;
  }
}

@media (max-width: 520px) {
  .plan-head {
    grid-template-columns: minmax(0, 1fr) minmax(118px, 138px);
    gap: 8px;
  }

  .plan-head h2 {
    font-size: 23px;
  }

.plan-head > strong {
    max-width: 138px;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.12;
  }
}

/* Settings/profile icon alignment polish */
.settings-summary-icon,
.settings-nav-icon,
.notif-status-icon,
.profile-support-card > span {
  display: inline-grid !important;
  place-items: center !important;
  overflow: hidden;
}

.settings-summary-icon,
.notif-status-icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 19px;
}

.settings-nav-icon {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 18px;
}

.settings-summary-icon svg,
.settings-nav-icon svg,
.notif-status-icon svg,
.profile-support-card > span svg {
  display: block;
  width: 27px;
  height: 27px;
  margin: 0;
  transform: none;
  stroke-width: 2.05;
}

.settings-summary-icon {
  background: linear-gradient(145deg, #ff7a00, #f26a00);
  color: #fff;
  box-shadow: 0 14px 26px rgba(242, 106, 0, 0.18);
}

.settings-nav-icon,
.notif-status-icon {
  background: rgba(255, 246, 232, 0.96);
  color: #8f7d6e;
  box-shadow: inset 0 0 0 1px rgba(242, 106, 0, 0.08);
}

.profile-support-card > span {
  color: #f26a00;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 190, 82, 0.22), transparent 34%),
    rgba(255, 246, 232, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(242, 106, 0, 0.1),
    0 10px 22px rgba(112, 73, 31, 0.06);
}

.notif-status-card {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
}

@media (max-width: 520px) {
  .settings-summary-icon,
  .notif-status-icon {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    border-radius: 17px;
  }

  .settings-nav-icon {
    flex-basis: 50px;
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }

  .settings-summary-icon svg,
  .settings-nav-icon svg,
  .notif-status-icon svg,
  .profile-support-card > span svg {
    width: 25px;
    height: 25px;
  }

  .notif-status-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
  }
}

/* Separate settings screens inside profile */
#settings-screen {
  position: relative;
  min-height: calc(100dvh - 118px);
}

#settings-screen > .settings-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  padding: 12px 0 96px;
  background:
    linear-gradient(180deg, rgba(255, 248, 238, 0.99), rgba(255, 253, 249, 0.99) 46%),
    var(--surface);
}

#settings-screen > .settings-panel[hidden],
#settings-screen > [hidden] {
  display: none !important;
}

/* Desktop web version */
@media (min-width: 900px) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  body {
    display: block;
    background:
      radial-gradient(circle at 8% 0%, rgba(255, 214, 142, 0.32), transparent 28rem),
      radial-gradient(circle at 92% 10%, rgba(255, 232, 187, 0.58), transparent 24rem),
      linear-gradient(135deg, #fff8ee 0%, #fffdf9 54%, #fff1dc 100%);
  }

  .app-shell {
    width: 100vw;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
  }

  .auth-screen {
    display: grid;
    grid-template-columns: minmax(360px, 0.82fr) minmax(440px, 1fr);
    align-items: center;
    gap: clamp(36px, 5vw, 88px);
    padding: clamp(40px, 6vw, 78px);
    background:
      radial-gradient(circle at 88% 10%, rgba(255, 190, 82, 0.2), transparent 28rem),
      rgba(255, 253, 249, 0.66);
  }

  .auth-header {
    min-height: 0;
    justify-content: center;
    padding-bottom: 0;
  }

  .auth-header h1 {
    max-width: 620px;
    font-size: clamp(48px, 5vw, 72px);
    line-height: 0.96;
  }

  .auth-header p:not(.eyebrow) {
    max-width: 560px;
    font-size: 18px;
  }

  .auth-form {
    max-width: 520px;
    justify-self: end;
    padding: 28px;
    border: 1px solid rgba(242, 106, 0, 0.14);
    border-radius: 30px;
    background: rgba(255, 253, 249, 0.92);
    box-shadow: 0 24px 70px rgba(112, 73, 31, 0.12);
  }

  .portal-screen {
    display: grid;
    grid-template-columns: 248px minmax(0, 1180px);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "nav topbar"
      "nav strip"
      "nav main";
    justify-content: center;
    gap: 16px 26px;
    width: 100%;
    height: 100%;
    padding: 28px clamp(28px, 4vw, 64px);
    overflow: hidden;
    background:
      radial-gradient(circle at 88% 4%, rgba(255, 190, 82, 0.17), transparent 25rem),
      linear-gradient(180deg, rgba(255, 248, 238, 0.92), rgba(255, 253, 249, 0.96));
  }

  .topbar {
    grid-area: topbar;
    margin: 0;
    padding: 0 2px;
  }

  .topbar h1 {
    font-size: clamp(34px, 3vw, 48px);
  }

  .avatar-button {
    width: 58px;
    height: 58px;
    font-size: 20px;
  }

  .profile-strip {
    grid-area: strip;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 12px;
    border-radius: 22px;
  }

  .profile-strip div {
    padding: 8px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
  }

  .profile-strip span {
    font-size: 12px;
  }

  .profile-strip strong {
    font-size: 18px;
  }

  .bottom-nav {
    grid-area: nav;
    position: sticky;
    top: 28px;
    align-self: start;
    height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 18px;
    border-radius: 30px;
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 190, 82, 0.2), transparent 14rem),
      rgba(255, 253, 249, 0.82);
    box-shadow: 0 24px 70px rgba(112, 73, 31, 0.12);
  }

  .bottom-nav::before {
    content: "стадифай";
    display: block;
    margin: 4px 8px 22px;
    color: var(--orange);
    font-size: 16px;
    font-weight: 950;
    letter-spacing: 0.02em;
  }

  .bottom-nav a,
  .bottom-nav a.home-nav {
    min-height: 54px;
    display: grid;
    grid-template-columns: 26px 1fr;
    justify-content: start;
    place-items: center start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    transform: none;
    box-shadow: none;
    font-size: 15px;
    line-height: 1;
    text-align: left;
  }

  .bottom-nav svg {
    width: 22px;
    height: 22px;
  }

  .bottom-nav span {
    font-size: 15px;
    font-weight: 900;
  }

  .view-stack {
    grid-area: main;
    min-height: 0;
    padding: 0 10px 28px 0;
    overflow-y: auto;
  }

  .app-view {
    min-height: auto;
  }

  #home-screen.active {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
  }

  #home-screen .install-card,
  #home-screen .search,
  #home-screen .search-results {
    grid-column: 1 / -1;
  }

  #home-screen .daily-plan-card {
    grid-column: span 7;
    margin-top: 0;
  }

  #home-screen .hero-pair {
    display: contents;
  }

  #home-screen .progress-hero {
    grid-column: span 5;
    margin: 0;
    min-height: 194px;
  }

  #home-screen .streak-card {
    grid-column: 8 / -1;
    margin: 0;
  }

  #home-screen .exam-panel {
    grid-column: 8 / -1;
    margin: 0;
  }

  #home-screen .prep-progress {
    grid-column: span 7;
  }

  #home-screen .section-block {
    grid-column: span 5;
    margin-top: 0;
  }

  .search {
    max-width: none;
    height: 58px;
    border-radius: 22px;
  }

  .daily-plan-card,
  .streak-card,
  .prep-progress,
  .profile-card,
  .profile-progress,
  .achievement-history,
  .weak-topics,
  .section-block,
  .resource-card,
  .subject-detail-card,
  .calendar-hero,
  .rank-path,
  .stats-card,
  .leaderboard-item,
  .settings-panel,
  .profile-wallet-card,
  .profile-support-card,
  .profile-hub-tile,
  .profile-panel-card {
    border-radius: 24px;
  }

  .plan-head h2,
  .section-heading h2 {
    font-size: 24px;
  }

  .plan-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .plan-item {
    min-height: 116px;
    align-content: center;
  }

  .progress-hero h2 {
    max-width: 360px;
    font-size: 30px;
  }

  .progress-ring,
  .exam-orbit {
    width: 104px;
    height: 104px;
  }

  .progress-ring span,
  .exam-orbit span {
    width: 74px;
    height: 74px;
    font-size: 22px;
  }

  .streak-card strong {
    font-size: 30px;
  }

  .exam-panel h2 {
    font-size: 40px;
  }

  .prep-list,
  .weak-topic-list,
  .profile-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prep-list article,
  .weak-topic-list article,
  .profile-progress article {
    min-width: 0;
  }

  .subject-grid,
  .material-subject-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .subject-card {
    height: 158px;
    min-height: 158px;
  }

  .task-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-item {
    min-height: 92px;
  }

  .resource-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .resource-card-wide {
    grid-column: span 2;
  }

  #materials-screen.active,
  #tasks-screen.active,
  #rating-screen.active,
  #subject-screen.active,
  #calendar-screen.active,
  #material-detail-screen.active,
  #settings-screen.active,
  #account-screen.active {
    max-width: 1180px;
  }

  #rating-screen.active {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
    align-items: start;
    gap: 18px;
  }

  #rating-screen > .section-heading,
  #rating-screen > .rank-path {
    grid-column: 1 / -1;
  }

  #materials-screen .weak-topics {
    margin-top: 0;
  }

  #settings-screen {
    min-height: calc(100vh - 190px);
  }

  #settings-screen.active {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
    gap: 18px;
  }

  #settings-screen .profile-hub-top,
  #settings-screen .profile-wallet-card,
  #settings-screen .profile-support-card,
  #settings-screen .profile-hub-grid {
    grid-column: 1 / -1;
  }

  .profile-hub-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .profile-hub-tile.tile-wide {
    grid-column: span 2;
  }

  .profile-panel,
  #settings-screen > .settings-panel {
    padding: 18px 0 40px;
  }

  .test-screen {
    max-width: 920px;
    margin: 0 auto;
    padding: 34px 42px 48px !important;
    border-radius: 30px !important;
  }

  .app-shell[data-route="test"] .portal-screen,
  .app-shell[data-route="accent-test"] .portal-screen,
  .app-shell[data-route="history-test"] .portal-screen {
    display: grid;
    place-items: center;
    padding: 34px;
  }

  .app-shell[data-route="test"] .view-stack,
  .app-shell[data-route="accent-test"] .view-stack,
  .app-shell[data-route="history-test"] .view-stack {
    width: min(100%, 980px);
  }
}

/* Desktop home refinement */
@media (min-width: 900px) {
  .portal-screen {
    grid-template-columns: 232px minmax(0, 1200px);
    gap: 16px 24px;
  }

  .bottom-nav {
    padding: 20px 18px;
  }

  .view-stack {
    padding-right: 0;
  }

  #home-screen.active {
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
    grid-template-areas:
      "search search"
      "plan goal"
      "prep streak"
      "subjects exam";
    gap: 18px 20px;
  }

  #home-screen .search,
  #home-screen .search-results,
  #home-screen .install-card {
    grid-area: search;
  }

  #home-screen .hero-pair {
    display: contents;
  }

  #home-screen .daily-plan-card {
    grid-area: plan;
    min-height: 0;
    padding: 18px;
  }

  #home-screen .progress-hero {
    grid-area: goal;
    min-height: 214px;
    padding: 22px;
  }

  #home-screen .streak-card {
    grid-area: streak;
    min-height: 116px;
    padding: 18px 20px;
  }

  #home-screen .exam-panel {
    grid-area: exam;
    min-height: 170px;
    padding: 22px;
  }

  #home-screen .prep-progress {
    grid-area: prep;
    margin-top: 0;
  }

  #home-screen .section-block {
    grid-area: subjects;
    margin-top: 0;
  }

  #home-screen .plan-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #home-screen .plan-item {
    min-height: 68px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 3px 14px;
    padding: 13px 16px;
  }

  #home-screen .plan-item span {
    width: 34px;
    height: 34px;
    grid-row: 1 / 3;
  }

  #home-screen .plan-item strong {
    align-self: end;
    font-size: 18px;
    line-height: 1.12;
  }

  #home-screen .plan-item em {
    align-self: start;
    font-size: 14px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  #home-screen .plan-item::after {
    content: "Открыть";
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 246, 232, 0.95);
    color: var(--orange);
    font-size: 12px;
    font-weight: 950;
  }

  #home-screen .progress-hero h2 {
    max-width: 340px;
    font-size: 28px;
    line-height: 1.08;
  }

  #home-screen .progress-ring,
  #home-screen .exam-orbit {
    width: 92px;
    height: 92px;
  }

  #home-screen .progress-ring span,
  #home-screen .exam-orbit span {
    width: 66px;
    height: 66px;
    font-size: 20px;
  }

  #home-screen .streak-card {
    display: block;
  }

  #home-screen .streak-card strong {
    font-size: 26px;
    line-height: 1.05;
  }

  #home-screen .streak-card > span {
    display: inline-flex;
    margin-top: 8px;
    padding: 0;
    background: transparent;
    color: var(--muted);
    font-size: 14px;
  }

  #home-screen .exam-panel h2 {
    font-size: 34px;
  }

  #home-screen .exam-panel span {
    max-width: 320px;
  }

  #home-screen .prep-list {
    grid-template-columns: 1fr;
  }

  #home-screen .subject-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #home-screen .subject-card {
    height: 136px;
    min-height: 136px;
    grid-template-rows: 58px minmax(30px, auto);
  }

  #home-screen .subject-card span {
    width: 58px;
    height: 58px;
    border-radius: 18px;
  }

  #home-screen .subject-icon img {
    width: 48px;
    height: 48px;
  }
}

@media (min-width: 900px) and (max-width: 1240px) {
  .portal-screen {
    grid-template-columns: 210px minmax(0, 1fr);
    padding: 24px;
  }

  #home-screen.active {
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  #home-screen .subject-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop consistency pass: use the Materials screen scale everywhere */
@media (min-width: 900px) {
  .portal-screen {
    grid-template-columns: 224px minmax(0, 1200px);
    gap: 16px 24px;
    padding-top: 28px;
  }

  .bottom-nav {
    width: 224px;
    padding: 18px 16px;
    border-radius: 28px;
  }

  .bottom-nav::before {
    margin-bottom: 26px;
    text-align: center;
    font-size: 17px;
    letter-spacing: 0.02em;
  }

  .bottom-nav a,
  .bottom-nav a.home-nav {
    min-height: 58px;
    padding: 12px 18px;
    border-radius: 20px;
    font-size: 15px;
  }

  .topbar h1 {
    font-size: 38px;
    line-height: 1.02;
  }

  .avatar-button {
    width: 52px;
    height: 52px;
  }

  .profile-strip {
    min-height: 70px;
    padding: 10px 18px;
    border-radius: 22px;
  }

  .profile-strip div {
    padding: 8px 14px;
  }

  .profile-strip span {
    font-size: 12px;
  }

  .profile-strip strong {
    font-size: 16px;
  }

  .section-heading {
    min-height: 38px;
    margin: 18px 0 14px;
  }

  .section-heading h2,
  .app-back-topbar h2 {
    font-size: 24px;
    line-height: 1.12;
  }

  .section-heading button {
    min-height: 34px;
    padding: 7px 14px;
    font-size: 13px;
  }

  .daily-plan-card,
  .streak-card,
  .prep-progress,
  .weak-topics,
  .section-block,
  .resource-card,
  .subject-detail-card,
  .calendar-hero,
  .rank-path,
  .stats-hero,
  .stats-grid article,
  .leaderboard-item,
  .profile-wallet-card,
  .profile-support-card,
  .profile-hub-tile,
  .profile-panel-card,
  .settings-summary-card,
  .settings-nav-item,
  .notif-status-card,
  .notif-toggle-row,
  .material-detail-card {
    border-radius: 24px;
    box-shadow: 0 12px 28px rgba(112, 73, 31, 0.06);
  }

  #tasks-screen.active,
  #rating-screen.active,
  #subject-screen.active,
  #calendar-screen.active,
  #materials-screen.active,
  #material-detail-screen.active,
  #settings-screen.active,
  #account-screen.active {
    width: 100%;
    max-width: none;
  }

  /* Tasks */
  #tasks-screen .task-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  #tasks-screen .task-item {
    min-height: 112px;
    height: 112px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: 6px 14px;
    padding: 16px;
  }

  #tasks-screen .task-item time {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 12px;
  }

  #tasks-screen .task-item img {
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  #tasks-screen .task-main,
  #tasks-screen .task-item > strong {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }

  #tasks-screen .task-item strong {
    font-size: 17px;
    line-height: 1.12;
  }

  #tasks-screen .task-meta,
  #tasks-screen .task-item > span:not(.task-progress span) {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    font-size: 13px;
  }

  /* Calendar */
  #calendar-screen .calendar-hero {
    min-height: 112px;
    padding: 20px 24px;
  }

  #calendar-screen .calendar-hero h3 {
    font-size: 24px;
  }

  #calendar-screen .calendar-grid {
    gap: 12px;
  }

  #calendar-screen .calendar-day {
    min-height: 112px;
    padding: 12px;
  }

  #calendar-screen .calendar-day strong {
    font-size: 14px;
    line-height: 1.18;
  }

  /* Progress */
  #rating-screen.active {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.55fr);
    gap: 16px;
  }

  #rating-screen > .section-heading {
    margin-top: 0;
  }

  #rating-screen .rank-path {
    padding: 18px;
  }

  #rating-screen .rank-chart-head h3 {
    font-size: 26px;
  }

  #rating-screen .rank-ladder,
  #rating-screen .rank-all-list {
    gap: 10px;
  }

  #rating-screen .stats-hero {
    min-height: 116px;
    padding: 18px;
  }

  #rating-screen .stats-hero span {
    font-size: 34px;
  }

  #rating-screen .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #rating-screen .stats-grid article,
  #rating-screen .leaderboard-item {
    min-height: 96px;
    padding: 16px;
  }

  .progress-subjects-list,
  .progress-weak-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Subjects and materials details */
  #subject-screen .subject-detail-card {
    min-height: 120px;
    padding: 18px;
  }

  #subject-screen .subject-detail-card h3 {
    font-size: 24px;
  }

  #subject-screen .weak-topics,
  #subject-screen .section-block,
  #material-detail-screen .material-detail-card {
    padding: 20px;
  }

  #materials-screen .weak-topics {
    min-height: 112px;
    padding: 18px;
  }

  #materials-screen .resource-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  #materials-screen .resource-card,
  .profile-hub-tile {
    min-height: 112px;
    padding: 16px;
  }

  #materials-screen .resource-card span,
  .profile-hub-tile > span,
  .profile-support-card > span {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  #materials-screen .resource-card strong,
  .profile-hub-tile strong,
  .profile-support-card strong {
    font-size: 17px;
    line-height: 1.14;
  }

  #materials-screen .resource-card p,
  .profile-hub-tile em,
  .profile-support-card em {
    font-size: 13px;
    line-height: 1.25;
  }

  /* Profile and settings */
  #settings-screen.active {
    display: block;
  }

  #settings-screen .profile-hub-top {
    margin-bottom: 14px;
  }

  #settings-screen .profile-wallet-card {
    min-height: 112px;
    margin-bottom: 14px;
    padding: 18px;
  }

  #settings-screen .profile-support-card {
    min-height: 82px;
    margin-bottom: 14px;
    padding: 16px;
  }

  #settings-screen .profile-hub-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  #settings-screen .profile-hub-tile.tile-wide {
    grid-column: span 2;
    min-height: 112px;
  }

  #settings-screen > .settings-panel,
  #settings-screen .profile-panel {
    padding-top: 0;
  }

  .settings-nav {
    gap: 12px;
  }

  .settings-nav-item {
    min-height: 84px;
    padding: 16px;
  }

  .notif-settings-list {
    gap: 12px;
  }

  .notif-toggle-row {
    min-height: 84px;
    padding: 16px;
  }

  /* Home follows the same calmer scale */
  #home-screen .daily-plan-card,
  #home-screen .prep-progress,
  #home-screen .section-block {
    padding: 18px;
  }

  #home-screen .progress-hero,
  #home-screen .exam-panel {
    min-height: 160px;
    padding: 20px;
  }

  #home-screen .progress-hero h2 {
    font-size: 24px;
  }

  #home-screen .exam-panel h2 {
    font-size: 32px;
  }
}

@media (min-width: 900px) and (max-width: 1180px) {
  #tasks-screen .task-list,
  #materials-screen .resource-grid,
  #settings-screen .profile-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #rating-screen.active {
    grid-template-columns: 1fr;
  }
}

/* Prevent iOS/Safari from painting subject buttons as blue links */
.subject-card,
.subject-card:visited,
.subject-card:hover,
.subject-card:focus,
.subject-card:active,
.subject-card strong,
.subject-card em {
  color: var(--ink) !important;
  text-decoration: none !important;
}

.desktop-rail {
  display: none;
}

/* Duolingo-like desktop architecture adapted to Studify */
@media (min-width: 900px) {
  html,
  body {
    overflow: hidden;
  }

  .portal-screen {
    grid-template-columns: 248px minmax(560px, 760px) 360px !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "nav topbar rail"
      "nav main rail" !important;
    justify-content: center;
    align-items: start;
    gap: 0 34px !important;
    padding: 32px clamp(28px, 4vw, 72px) !important;
    overflow: hidden;
  }

  .topbar {
    grid-area: topbar;
    min-width: 0;
    margin: 0 0 24px !important;
    padding: 0 !important;
  }

  .topbar h1 {
    font-size: clamp(38px, 3.4vw, 54px) !important;
    line-height: 0.96;
  }

  .topbar .eyebrow {
    font-size: 15px;
  }

  .avatar-button {
    width: 58px !important;
    height: 58px !important;
  }

  .profile-strip {
    display: none !important;
  }

  .bottom-nav {
    grid-area: nav;
    position: sticky;
    top: 32px;
    width: 248px !important;
    height: calc(100vh - 64px) !important;
    padding: 24px 22px !important;
    border: 1px solid rgba(67, 50, 34, 0.08);
    border-radius: 30px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 190, 82, 0.16), transparent 15rem),
      rgba(255, 253, 249, 0.88);
    box-shadow: 0 24px 70px rgba(112, 73, 31, 0.11);
  }

  .bottom-nav::before {
    margin: 8px 8px 34px !important;
    color: var(--orange);
    text-align: center;
    font-size: 18px !important;
    font-weight: 950;
    letter-spacing: 0.02em;
  }

  .bottom-nav a,
  .bottom-nav a.home-nav {
    min-height: 56px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 14px !important;
    padding: 12px 16px !important;
    border-radius: 18px !important;
    /* убираем мобильный сдвиг/фон home-nav */
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--muted);
  }

  .bottom-nav a.active,
  .bottom-nav a.home-nav.active {
    color: #2e241e;
    background: var(--orange) !important;
    box-shadow: 0 10px 24px rgba(242, 106, 0, 0.20) !important;
  }

  .bottom-nav svg {
    width: 22px !important;
    height: 22px !important;
    justify-self: start !important;
    align-self: center !important;
  }

  .bottom-nav span {
    font-size: 15px !important;
    line-height: 1.05;
    justify-self: start !important;
    align-self: center !important;
  }

  .view-stack {
    grid-area: main;
    width: 100%;
    max-width: 760px !important;
    min-height: 0;
    height: calc(100vh - 128px);
    padding: 0 2px 52px 0 !important;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .view-stack::-webkit-scrollbar {
    display: none;
  }

  .app-view.active,
  #home-screen.active,
  #tasks-screen.active,
  #rating-screen.active,
  #subject-screen.active,
  #calendar-screen.active,
  #materials-screen.active,
  #material-detail-screen.active,
  #settings-screen.active,
  #account-screen.active {
    display: block !important;
    width: 100%;
    max-width: 760px !important;
    min-height: auto;
  }

  .desktop-rail {
    grid-area: rail;
    position: sticky;
    top: 32px;
    display: grid;
    align-content: start;
    gap: 16px;
    width: 360px;
    height: calc(100vh - 64px);
    overflow-y: auto;
    padding: 4px 4px 44px;
    scrollbar-width: none;
  }

  .desktop-rail::-webkit-scrollbar {
    display: none;
  }

  .desktop-rail-stats {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    min-height: 34px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 900;
  }

  .desktop-rail-stats span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .desktop-rail-stats strong {
    color: var(--orange);
    font-size: 16px;
  }

  .desktop-rail-card {
    display: grid;
    gap: 14px;
    padding: 20px;
    border: 1px solid rgba(242, 106, 0, 0.15);
    border-radius: 24px;
    background: rgba(255, 253, 249, 0.9);
    box-shadow: 0 18px 46px rgba(112, 73, 31, 0.09);
  }

  .desktop-profile-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }

  .desktop-profile-avatar {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffb94f, #f26a00);
    color: #ffffff;
    font-size: 22px;
    font-weight: 950;
  }

  .desktop-profile-row strong {
    display: block;
    color: var(--ink);
    font-size: 22px;
    line-height: 1;
  }

  .desktop-profile-row em {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
  }

  .desktop-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .desktop-profile-grid article {
    min-height: 66px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 246, 232, 0.72);
  }

  .desktop-profile-grid span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
  }

  .desktop-profile-grid strong {
    display: block;
    margin-top: 5px;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.08;
  }

  .desktop-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .desktop-rail-head strong {
    color: var(--ink);
    font-size: 19px;
    line-height: 1.1;
  }

  .desktop-rail-head span,
  .desktop-rail-head a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 246, 232, 0.92);
    color: var(--orange);
    text-decoration: none;
    font-size: 12px;
    font-weight: 950;
  }

  .desktop-goal-card {
    background: linear-gradient(135deg, #ff8d1d 0%, #ffc95c 100%);
    color: #ffffff;
  }

  .desktop-goal-card .desktop-rail-head strong,
  .desktop-goal-card p {
    color: #ffffff;
  }

  .desktop-goal-card .desktop-rail-head span {
    color: var(--orange);
    background: rgba(255, 255, 255, 0.9);
  }

  .desktop-rail-card p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    font-weight: 850;
    line-height: 1.25;
  }

  .desktop-progress-line {
    width: 100%;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
  }

  .desktop-progress-line span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #ffffff;
  }

  .desktop-mini-task {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 14px;
    border: 1px solid rgba(67, 50, 34, 0.08);
    border-radius: 18px;
    color: inherit;
    text-decoration: none;
    background: rgba(255, 250, 243, 0.82);
  }

  .desktop-mini-task > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(242, 106, 0, 0.12);
    color: var(--orange);
    font-weight: 950;
  }

  .desktop-mini-task strong,
  .desktop-mini-task em {
    display: block;
    line-height: 1.18;
  }

  .desktop-mini-task strong {
    color: var(--ink);
    font-size: 15px;
  }

  .desktop-mini-task em {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
  }

  .desktop-rail-list {
    display: grid;
    gap: 8px;
  }

  .desktop-rail-list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 246, 232, 0.68);
    color: var(--ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
  }

  .section-heading {
    margin: 0 0 16px !important;
  }

  .section-heading h2,
  .app-back-topbar h2 {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }

  .daily-plan-card,
  .streak-card,
  .prep-progress,
  .section-block,
  .progress-hero,
  .exam-panel,
  .weak-topics,
  .rank-path,
  .stats-hero,
  .profile-card,
  .profile-progress,
  .achievement-history,
  .settings-nav-item,
  .notif-toggle-row,
  .profile-wallet-card,
  .profile-support-card,
  .profile-hub-tile,
  .profile-panel-card,
  .resource-card,
  .task-item,
  .calendar-hero,
  .subject-detail-card,
  .material-detail-card {
    border-radius: 24px !important;
  }

  #home-screen .search,
  #home-screen .search-results,
  #home-screen .daily-plan-card,
  #home-screen .progress-hero,
  #home-screen .streak-card,
  #home-screen .exam-panel,
  #home-screen .prep-progress,
  #home-screen .section-block,
  #tasks-screen .section-heading,
  #rating-screen .section-heading,
  #materials-screen .section-heading,
  #settings-screen .section-heading {
    grid-area: auto !important;
    grid-column: auto !important;
    width: 100%;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }

  #home-screen .daily-plan-card,
  #home-screen .progress-hero,
  #home-screen .streak-card,
  #home-screen .exam-panel,
  #home-screen .prep-progress,
  #home-screen .section-block {
    padding: 20px !important;
  }

  #home-screen .plan-list,
  .prep-list,
  .weak-topic-list,
  .profile-progress,
  .task-list,
  #tasks-screen .task-list,
  #materials-screen .resource-grid,
  #settings-screen .profile-hub-grid,
  .resource-grid,
  .subject-grid,
  .material-subject-picker,
  .progress-subjects-list,
  .progress-weak-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  #home-screen .plan-list,
  #tasks-screen .task-list,
  .progress-subjects-list,
  .progress-weak-list,
  .prep-list,
  .weak-topic-list {
    grid-template-columns: 1fr !important;
  }

  #home-screen .plan-item {
    min-height: 76px !important;
  }

  .progress-hero,
  .exam-panel {
    min-height: 180px !important;
  }

  .progress-hero h2,
  .exam-panel h2 {
    font-size: 32px !important;
    line-height: 1.05 !important;
  }

  .streak-card {
    display: block !important;
  }

  .streak-card strong {
    font-size: 34px !important;
    line-height: 1.02 !important;
  }

  .streak-card > span {
    display: block !important;
    width: fit-content;
    margin-top: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--muted) !important;
    font-size: 15px !important;
  }

  .resource-card,
  .profile-hub-tile {
    min-height: 132px !important;
    padding: 18px !important;
  }

  .resource-card-wide,
  #settings-screen .profile-hub-tile.tile-wide {
    grid-column: auto !important;
  }

  #rating-screen > .section-heading,
  #rating-screen > .rank-path {
    grid-column: auto !important;
  }

  #rating-screen .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .app-shell[data-route="test"] .portal-screen,
  .app-shell[data-route="accent-test"] .portal-screen,
  .app-shell[data-route="history-test"] .portal-screen {
    grid-template-columns: minmax(0, 980px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "main" !important;
    place-items: center;
    padding: 34px !important;
  }

  .app-shell[data-route="test"] .desktop-rail,
  .app-shell[data-route="accent-test"] .desktop-rail,
  .app-shell[data-route="history-test"] .desktop-rail {
    display: none !important;
  }

  .app-shell[data-route="test"] .view-stack,
  .app-shell[data-route="accent-test"] .view-stack,
  .app-shell[data-route="history-test"] .view-stack {
    grid-area: main;
    width: min(100%, 980px) !important;
    max-width: 980px !important;
    height: auto;
    padding: 0 !important;
  }
}

@media (min-width: 900px) and (max-width: 1320px) {
  .portal-screen {
    grid-template-columns: 220px minmax(520px, 720px) 320px !important;
    gap: 0 24px !important;
    padding-inline: 24px !important;
  }

  .bottom-nav {
    width: 220px !important;
  }

  .desktop-rail {
    width: 320px;
  }
}

/* Stronger Studify orange and cleaner contrast for goal cards */
.progress-hero,
.desktop-goal-card {
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.24), transparent 30%),
    linear-gradient(135deg, #f26a00 0%, #ff8a16 54%, #ffb340 100%) !important;
  color: #ffffff !important;
}

.progress-hero p,
.progress-hero h2,
.desktop-goal-card .desktop-rail-head strong,
.desktop-goal-card p {
  color: #ffffff !important;
}

.progress-hero h2 {
  text-shadow: 0 2px 12px rgba(96, 44, 0, 0.12);
}

.progress-ring {
  background:
    radial-gradient(circle, #f26a00 56%, transparent 57%),
    conic-gradient(#ffffff 0 var(--goal-progress, 68%), rgba(255, 255, 255, 0.38) var(--goal-progress, 68%) 100%) !important;
}

.progress-ring span,
.desktop-goal-card .desktop-rail-head span {
  background: rgba(255, 255, 255, 0.94) !important;
  color: #f26a00 !important;
}

.progress-bar,
.progress-hero .progress-bar,
.desktop-progress-line {
  background: rgba(255, 255, 255, 0.42) !important;
}

.progress-bar span,
.desktop-progress-line span {
  background: #ffffff !important;
}

/* ── Supabase Auth UI ──────────────────────────────────────────────────────── */
.auth-oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  padding: .85rem 1.2rem;
  border: 1.5px solid var(--border, #e0e0e0);
  border-radius: 12px;
  background: var(--card-bg, #fff);
  color: var(--text, #1a1a1a);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  margin-bottom: .5rem;
}
.auth-oauth-btn:hover { background: var(--bg-hover, #f5f5f5); border-color: #bbb; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .25rem 0 .5rem;
  color: var(--text-secondary, #888);
  font-size: .8rem;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border, #e0e0e0);
}

/* ── Registration Wizard ──────────────────────────────────────────────────── */
.auth-screen.wizard {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #2a1505;
  overflow-y: auto;
  overflow-x: hidden;
}

.wizard-decor {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.wizard-decor-a {
  width: 300px; height: 300px;
  top: -110px; right: -80px;
  background: rgba(255, 150, 40, 0.07);
}
.wizard-decor-b {
  width: 220px; height: 220px;
  bottom: -70px; left: -70px;
  background: rgba(255, 120, 20, 0.05);
}
.wizard-decor-c {
  width: 130px; height: 130px;
  top: 46%; right: -28px;
  background: rgba(255, 200, 80, 0.04);
}

.wizard-brand {
  position: sticky;
  top: 0;
  z-index: 2;
  width: 100%;
  padding: 22px 0 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 210, 140, 0.55);
  background: transparent;
}

.wizard-progress {
  display: flex;
  gap: 7px;
  justify-content: center;
  padding: 10px 0 4px;
  width: 100%;
}
.wizard-progress span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.2s, transform 0.2s;
}
.wizard-progress span.is-done { background: rgba(242, 106, 0, 0.6); }
.wizard-progress span.is-active { background: #f26a00; transform: scale(1.3); }

.wizard-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 24px 0;
  width: 100%;
  max-width: 380px;
}
.wizard-mascot {
  width: 130px;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4));
}
.wizard-bubble {
  position: relative;
  background: #fff;
  color: #2e241e;
  border-radius: 18px;
  padding: 12px 18px;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  text-align: center;
  margin-top: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  max-width: 100%;
}
.wizard-bubble::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-bottom-color: #fff;
  border-top: 0;
}

.wizard-body {
  width: 100%;
  max-width: 380px;
  padding: 18px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wiz-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wiz-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 210, 150, 0.75);
}
.wiz-form input {
  width: 100%;
  height: 50px;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 0 16px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: 0;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.wiz-form input::placeholder { color: rgba(255, 255, 255, 0.3); }
.wiz-form input:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(242, 106, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(242, 106, 0, 0.15);
}

.wiz-primary {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 16px;
  background: #f26a00;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  margin-top: 4px;
}
.wiz-primary:hover { background: #d85d00; }
.wiz-primary:active { transform: scale(0.98); }

.wiz-oauth {
  width: 100%;
  height: 50px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.15s, border-color 0.15s;
}
.wiz-oauth:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.28);
}

.wiz-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.wiz-choice {
  padding: 16px 10px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  text-align: center;
}
.wiz-choice:hover {
  border-color: rgba(242, 106, 0, 0.5);
  background: rgba(242, 106, 0, 0.1);
  color: #fff;
}
.wiz-choice.is-selected {
  border-color: #f26a00;
  background: rgba(242, 106, 0, 0.22);
  color: #fff;
}

.wiz-subjects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.wiz-subject {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 8px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.wiz-subject input[type="checkbox"] { display: none; }
.wiz-subject-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(255, 248, 238, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.wiz-subject-icon img { width: 36px; height: 36px; object-fit: contain; }
.wiz-subject strong {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  line-height: 1.25;
  transition: color 0.15s;
}
.wiz-subject:has(input:checked) {
  border-color: #f26a00;
  background: rgba(242, 106, 0, 0.17);
}
.wiz-subject:has(input:checked) .wiz-subject-icon { background: rgba(242, 106, 0, 0.28); }
.wiz-subject:has(input:checked) strong { color: #fff; }

.wizard-back {
  position: sticky;
  bottom: 0;
  width: 100%;
  padding: 14px 24px max(env(safe-area-inset-bottom, 0px), 14px);
  background: linear-gradient(to top, rgba(42,21,5,0.98) 55%, transparent);
  border: 0;
  color: rgba(255, 210, 140, 0.55);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  z-index: 10;
  margin-top: auto;
  transition: color 0.15s;
}
.wizard-back:hover { color: rgba(255, 210, 140, 0.9); }

.wiz-switch {
  text-align: center;
  color: rgba(255, 210, 140, 0.5);
  font-size: 14px;
  margin: 2px 0 0;
}
.wiz-switch button {
  background: none;
  border: none;
  color: rgba(255, 200, 120, 0.85);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255, 200, 120, 0.35);
  padding: 0;
}
.wiz-switch button:hover { color: #f6b33a; }

.wizard-msg {
  font-size: 13px;
  text-align: center;
  color: rgba(255, 200, 120, 0.7);
  min-height: 18px;
  margin: 0;
}
.wizard-msg.is-error { color: #ff7055; }

.wiz-note {
  color: rgba(255, 210, 140, 0.75);
  font-size: 14px;
  text-align: center;
  line-height: 1.55;
  margin: 0 0 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   WIZARD v2 — полный редизайн
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Обёртки колонок ───────────────────────────────────────────────────── */
.wiz-left,
.wiz-right {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Прогресс-бар (заменяем точки сегментами) ─────────────────────────── */
.wizard-progress[hidden] { display: none !important; }
.wizard-progress {
  display: flex !important;
  gap: 6px !important;
  padding: 0 24px !important;
  margin: 6px 0 0 !important;
  width: 100% !important;
  justify-content: center !important;
}
.wizard-progress span {
  flex: 1 !important;
  height: 5px !important;
  width: auto !important;
  border-radius: 3px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  transform: none !important;
  transition: background 0.3s ease !important;
}
.wizard-progress span.is-done,
.wizard-progress span.is-active {
  background: #f26a00 !important;
}

/* ── Заголовок внутри шага ─────────────────────────────────────────────── */
.wiz-step-head {
  width: 100%;
  text-align: center;
  margin-bottom: 18px;
}
.wiz-step-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 950;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.wiz-orange { color: #f26a00; }
.wiz-step-sub {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 210, 150, 0.6);
  line-height: 1.5;
}

/* ── Круглая сетка предметов — 3 колонки ──────────────────────────────── */
.wiz-subjects {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px 10px !important;
}
.wiz-subject {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 4px 12px !important;
  border: none !important;
  border-radius: 20px !important;
  background: transparent !important;
  cursor: pointer !important;
}
.wiz-subject input[type="checkbox"] { display: none; }
.wiz-subject-icon {
  width: 68px !important;
  height: 68px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.18s !important;
}
.wiz-subject-icon img {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
}
.wiz-subject strong {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.52) !important;
  text-align: center !important;
  line-height: 1.3 !important;
  transition: color 0.2s !important;
}
.wiz-subject:hover .wiz-subject-icon {
  border-color: rgba(242, 106, 0, 0.4) !important;
  background: rgba(242, 106, 0, 0.07) !important;
}
.wiz-subject:has(input:checked) .wiz-subject-icon {
  border-color: #f26a00 !important;
  border-width: 3px !important;
  background: rgba(255, 220, 170, 0.95) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 0 0 4px rgba(242, 106, 0, 0.18) !important;
}
.wiz-subject:has(input:checked) strong {
  color: #fff !important;
  font-weight: 800 !important;
}

/* ── Мобайл: компактнее при маленьком экране ─────────────────────────── */
@media (max-width: 380px) {
  .wiz-subject-icon {
    width: 56px !important;
    height: 56px !important;
  }
  .wiz-subject-icon img {
    width: 32px !important;
    height: 32px !important;
  }
  .wiz-subject strong { font-size: 10.5px !important; }
  .wiz-step-title { font-size: 18px !important; }
}

/* ── Десктоп: 2-колоночный визард ─────────────────────────────────────── */
@media (min-width: 900px) {
  /* Весь визард — горизонтальная сетка */
  .auth-screen.wizard {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
      radial-gradient(ellipse at 12% 60%, rgba(200, 90, 0, 0.18), transparent 40%),
      radial-gradient(ellipse at 90% 15%, rgba(80, 30, 0, 0.16), transparent 38%),
      #2a1505 !important;
  }

  /* Левая панель: маскот + брендинг */
  .wiz-left {
    position: relative !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 60px !important;
    border-right: 1px solid rgba(255, 200, 100, 0.07) !important;
  }

  .wizard-brand {
    position: absolute !important;
    top: 36px !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    background: transparent !important;
    font-size: 13px !important;
    padding: 0 !important;
    letter-spacing: 0.22em !important;
  }

  .wizard-hero {
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    align-items: center !important;
  }

  .wizard-mascot {
    width: 200px !important;
    filter: drop-shadow(0 24px 64px rgba(0,0,0,0.55)) !important;
  }

  .wizard-bubble {
    font-size: 18px !important;
    padding: 18px 24px !important;
    margin-top: 28px !important;
    max-width: 380px !important;
    line-height: 1.5 !important;
  }

  /* Прогресс-бар скрыт через [hidden] — не даём !important сломать это */
  .wizard-progress[hidden] { display: none !important; }

  /* Правая панель: прогресс + форма + кнопка назад */
  .wiz-right {
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
    padding: 40px 0 !important;
    scrollbar-width: none !important;
  }
  .wiz-right::-webkit-scrollbar { display: none; }

  .wizard-progress {
    width: min(100%, 440px) !important;
    padding: 0 !important;
    margin: 0 0 20px !important;
  }

  .wizard-body {
    width: min(100%, 440px) !important;
    padding: 0 !important;
    gap: 12px !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 200px) !important;
  }
  .wizard-body::-webkit-scrollbar { display: none; }

  .wiz-step-title { font-size: 26px !important; }
  .wiz-step-sub { font-size: 15px !important; }

  .wiz-subjects { gap: 16px 12px !important; }
  .wiz-subject-icon {
    width: 76px !important;
    height: 76px !important;
  }
  .wiz-subject-icon img {
    width: 46px !important;
    height: 46px !important;
  }
  .wiz-subject strong { font-size: 12.5px !important; }

  .wiz-primary { height: 56px !important; font-size: 17px !important; }

  .wizard-back {
    width: min(100%, 440px) !important;
    position: relative !important;
    bottom: auto !important;
    margin-top: auto !important;
    padding: 20px 0 0 !important;
    background: transparent !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ТЁМНАЯ ТЕМА ПОРТАЛА
   ═══════════════════════════════════════════════════════════════════════════ */

/* CSS-переменные тёмной темы */
:root[data-theme="dark"],
[data-theme="dark"] {
  --bg: #160b02;
  --surface: #1f1008;
  --surface-strong: #2b160a;
  --ink: #f0e0c6;
  --muted: #9a7850;
  --orange: #f26a00;
  --orange-soft: #2c1300;
  --gold: #f6b33a;
  --line: rgba(255, 200, 120, 0.1);
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #160b02;
    --surface: #1f1008;
    --surface-strong: #2b160a;
    --ink: #f0e0c6;
    --muted: #9a7850;
    --orange: #f26a00;
    --orange-soft: #2c1300;
    --gold: #f6b33a;
    --line: rgba(255, 200, 120, 0.1);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
  }
}

/* Фон тела и портала — глобально (мобайл + десктоп) */
:root[data-theme="dark"] body,
:root[data-theme="dark"] html,
[data-theme="dark"] body,
[data-theme="dark"] html {
  background: var(--bg) !important;
}

/* Фон app-shell и portal-screen в тёмной теме — мобайл */
[data-theme="dark"] .app-shell {
  background: var(--surface) !important;
}

[data-theme="dark"] .portal-screen {
  background:
    radial-gradient(circle at 88% 4%, rgba(180, 70, 0, 0.08), transparent 22rem),
    linear-gradient(180deg, #1f1008 0%, #1a0e07 100%) !important;
}

[data-theme="dark"] .auth-screen:not(.wizard) {
  background:
    radial-gradient(circle at 88% 10%, rgba(180, 70, 0, 0.12), transparent 28rem),
    #1f1008 !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body,
  :root:not([data-theme="light"]) html {
    background: var(--bg) !important;
  }
  :root:not([data-theme="light"]) .app-shell {
    background: var(--surface) !important;
  }
  :root:not([data-theme="light"]) .portal-screen {
    background:
      radial-gradient(circle at 88% 4%, rgba(180, 70, 0, 0.08), transparent 22rem),
      linear-gradient(180deg, #1f1008 0%, #1a0e07 100%) !important;
  }

  :root:not([data-theme="light"]) .empty-state {
    background: linear-gradient(135deg, #f26a00 0%, #ff8a16 100%) !important;
    border: 0 !important;
    color: #2e241e !important;
    box-shadow: 0 16px 34px rgba(242, 106, 0, 0.22) !important;
  }
}

/* Общие темновые правила - применяем к :root[data-theme="dark"] и к prefers */
.is-dark-mode body,
.is-dark-mode .app-shell {
  background: var(--surface) !important;
  color: var(--ink) !important;
}

/* Главный фон тела на десктопе */
@media (min-width: 900px) {
  [data-theme="dark"] body,
  [data-theme="dark"] html {
    background:
      radial-gradient(circle at 8% 0%, rgba(200, 90, 0, 0.15), transparent 26rem),
      radial-gradient(circle at 92% 10%, rgba(100, 40, 0, 0.12), transparent 22rem),
      #160b02 !important;
  }

  [data-theme="dark"] .portal-screen {
    background:
      radial-gradient(circle at 88% 4%, rgba(180, 70, 0, 0.1), transparent 22rem),
      linear-gradient(180deg, #1f1008 0%, #231209 100%) !important;
  }

  [data-theme="dark"] .bottom-nav {
    background:
      radial-gradient(circle at 50% 0%, rgba(200, 90, 0, 0.12), transparent 14rem),
      rgba(31, 16, 8, 0.92) !important;
    border-color: rgba(255, 200, 100, 0.07) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45) !important;
  }

  [data-theme="dark"] .auth-screen:not(.wizard) {
    background:
      radial-gradient(circle at 88% 10%, rgba(180, 70, 0, 0.14), transparent 28rem),
      rgba(31, 16, 8, 0.72) !important;
  }
}

/* Карточки и поверхности */
[data-theme="dark"] .daily-plan-card,
[data-theme="dark"] .streak-card,
[data-theme="dark"] .prep-progress,
[data-theme="dark"] .section-block,
[data-theme="dark"] .resource-card,
[data-theme="dark"] .profile-hub-tile,
[data-theme="dark"] .task-item,
[data-theme="dark"] .calendar-hero,
[data-theme="dark"] .subject-detail-card,
[data-theme="dark"] .material-detail-card,
[data-theme="dark"] .stats-grid article,
[data-theme="dark"] .rank-path,
[data-theme="dark"] .leaderboard-item,
[data-theme="dark"] .settings-nav-item,
[data-theme="dark"] .notif-toggle-row,
[data-theme="dark"] .profile-wallet-card,
[data-theme="dark"] .profile-support-card,
[data-theme="dark"] .profile-panel-card,
[data-theme="dark"] .weak-topics,
[data-theme="dark"] .exam-panel {
  background: var(--surface) !important;
  border-color: rgba(255, 200, 100, 0.08) !important;
}

[data-theme="dark"] .desktop-rail-card {
  background: rgba(35, 18, 8, 0.95) !important;
  border-color: rgba(255, 200, 100, 0.08) !important;
}

[data-theme="dark"] .search {
  background: var(--surface) !important;
  border-color: rgba(255, 200, 100, 0.1) !important;
}

[data-theme="dark"] .search input {
  background: transparent !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .search input::placeholder {
  color: var(--muted) !important;
}

[data-theme="dark"] .profile-strip {
  background: var(--surface) !important;
}

[data-theme="dark"] .profile-strip div {
  background: transparent !important;
}

[data-theme="dark"] .app-shell {
  background: var(--surface) !important;
}

[data-theme="dark"] .plan-item {
  background: var(--surface-strong) !important;
}

[data-theme="dark"] .plan-item.is-done {
  background: rgba(63, 154, 85, 0.12) !important;
  border-color: rgba(63, 154, 85, 0.25) !important;
}

[data-theme="dark"] .plan-item span {
  background: rgba(242, 106, 0, 0.18) !important;
}

[data-theme="dark"] .subject-card {
  background: var(--surface) !important;
}

[data-theme="dark"] .subject-icon {
  background: transparent !important;
}

[data-theme="dark"] .desktop-mini-task {
  background: rgba(35, 18, 8, 0.85) !important;
  border-color: rgba(255, 200, 100, 0.08) !important;
}

[data-theme="dark"] .desktop-profile-grid article {
  background: rgba(255, 200, 100, 0.07) !important;
}

[data-theme="dark"] .desktop-rail-head span,
[data-theme="dark"] .desktop-rail-head a {
  background: rgba(255, 200, 100, 0.1) !important;
}

/* Тёмный фон bottom-nav — и мобайл, и десктоп */
[data-theme="dark"] .bottom-nav {
  background: rgba(31, 16, 8, 0.95) !important;
  border-color: rgba(255, 200, 100, 0.08) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(20px) !important;
}

/* Иконки и текст в тёмной теме — чуть светлее чем muted */
[data-theme="dark"] .bottom-nav a {
  color: rgba(240, 224, 198, 0.52) !important;
}

/* Кнопка «Домой» на мобайле в тёмной теме */
[data-theme="dark"] .bottom-nav a.home-nav {
  background: rgba(242, 106, 0, 0.14) !important;
  color: var(--orange) !important;
  box-shadow: 0 8px 20px rgba(242, 106, 0, 0.18) !important;
}

[data-theme="dark"] .bottom-nav a.active,
[data-theme="dark"] .bottom-nav a.home-nav.active {
  background: rgba(242, 106, 0, 0.18) !important;
  color: var(--orange) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .desktop-rail-list a {
  background: rgba(255, 200, 100, 0.06) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .plan-item::after {
  background: rgba(255, 200, 100, 0.1) !important;
}

[data-theme="dark"] .streak-card > span {
  background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .exam-orbit {
  background:
    radial-gradient(circle, #f26a00 56%, transparent 57%),
    conic-gradient(rgba(255,255,255,0.7) 0 var(--exam-progress, 8%), rgba(255,255,255,0.15) var(--exam-progress, 8%) 100%) !important;
}

[data-theme="dark"] .calendar-day {
  background: var(--surface-strong) !important;
  border-color: rgba(255, 200, 100, 0.08) !important;
}

[data-theme="dark"] .calendar-day.is-today {
  border-color: var(--orange) !important;
}

[data-theme="dark"] .stats-hero {
  background: var(--surface) !important;
}

[data-theme="dark"] .leaderboard-item {
  background: var(--surface) !important;
}

[data-theme="dark"] .prep-list article {
  background: var(--surface-strong) !important;
}

[data-theme="dark"] .section-heading button {
  background: rgba(255, 200, 100, 0.1) !important;
  color: var(--orange) !important;
}

[data-theme="dark"] .empty-state {
  background: linear-gradient(135deg, #f26a00 0%, #ff8a16 100%) !important;
  border: 0 !important;
  color: #2e241e !important;
  box-shadow: 0 16px 34px rgba(242, 106, 0, 0.22) !important;
}

[data-theme="dark"] .notif-status-card {
  background: var(--surface) !important;
}

/* Кнопка переключения темы */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  font-size: 17px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  flex-shrink: 0;
  margin-right: 8px;
}
.theme-toggle-btn:hover {
  background: var(--orange-soft);
  color: var(--orange);
  border-color: rgba(242, 106, 0, 0.3);
}

/* Кнопка назад — темновой вариант */
[data-theme="dark"] .app-back-topbar,
[data-theme="dark"] .back-btn {
  color: var(--ink) !important;
}

/* ── Также поддержка @media (prefers-color-scheme: dark) для портала ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .daily-plan-card,
  :root:not([data-theme="light"]) .streak-card,
  :root:not([data-theme="light"]) .prep-progress,
  :root:not([data-theme="light"]) .section-block,
  :root:not([data-theme="light"]) .resource-card,
  :root:not([data-theme="light"]) .task-item,
  :root:not([data-theme="light"]) .calendar-hero,
  :root:not([data-theme="light"]) .subject-detail-card,
  :root:not([data-theme="light"]) .stats-grid article,
  :root:not([data-theme="light"]) .rank-path,
  :root:not([data-theme="light"]) .settings-nav-item,
  :root:not([data-theme="light"]) .weak-topics,
  :root:not([data-theme="light"]) .exam-panel,
  :root:not([data-theme="light"]) .profile-wallet-card,
  :root:not([data-theme="light"]) .profile-support-card {
    background: var(--surface) !important;
    border-color: rgba(255, 200, 100, 0.08) !important;
  }

  :root:not([data-theme="light"]) .search {
    background: var(--surface) !important;
    border-color: rgba(255, 200, 100, 0.1) !important;
  }

  :root:not([data-theme="light"]) .app-shell {
    background: var(--surface) !important;
  }

  :root:not([data-theme="light"]) .profile-strip {
    background: var(--surface) !important;
  }

  :root:not([data-theme="light"]) .subject-card {
    background: var(--surface) !important;
  }

  @media (min-width: 900px) {
    :root:not([data-theme="light"]) body {
      background:
        radial-gradient(circle at 8% 0%, rgba(200, 90, 0, 0.15), transparent 26rem),
        radial-gradient(circle at 92% 10%, rgba(100, 40, 0, 0.12), transparent 22rem),
        #160b02 !important;
    }

    :root:not([data-theme="light"]) .portal-screen {
      background:
        radial-gradient(circle at 88% 4%, rgba(180, 70, 0, 0.1), transparent 22rem),
        linear-gradient(180deg, #1f1008 0%, #231209 100%) !important;
    }

    :root:not([data-theme="light"]) .bottom-nav {
      background:
        radial-gradient(circle at 50% 0%, rgba(200, 90, 0, 0.12), transparent 14rem),
        rgba(31, 16, 8, 0.92) !important;
      border-color: rgba(255, 200, 100, 0.07) !important;
    }
  }

  /* Контейнеры иконок — без фона (системная тёмная тема) */
  :root:not([data-theme="light"]) .subject-icon,
  :root:not([data-theme="light"]) .progress-subject-icon,
  :root:not([data-theme="light"]) .subject-detail-icon,
  :root:not([data-theme="light"]) .resource-card > span,
  :root:not([data-theme="light"]) .desktop-mini-task > span,
  :root:not([data-theme="light"]) .wiz-subject-icon,
  :root:not([data-theme="light"]) .subject-card span,
  :root:not([data-theme="light"]) .resource-card span {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Фильтр иконок — системная тёмная тема */
  :root:not([data-theme="light"]) .subject-icon img,
  :root:not([data-theme="light"]) .progress-subject-icon img,
  :root:not([data-theme="light"]) .subject-detail-icon img,
  :root:not([data-theme="light"]) .wiz-subject-icon img,
  :root:not([data-theme="light"]) .task-item img,
  :root:not([data-theme="light"]) .subject-group-heading img,
  :root:not([data-theme="light"]) .plan-item img,
  :root:not([data-theme="light"]) .subject-card span img,
  :root:not([data-theme="light"]) .resource-card span img {
    background-color: transparent !important;
    filter: sepia(1) saturate(8) hue-rotate(-22deg) brightness(0.88) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ТЁМНАЯ ТЕМА — ИКОНКИ, ПАНЕЛИ, ПРОГРЕСС-БАРЫ, РАНГИ
   Всё что осталось белым/светлым после базовых переопределений
   ═══════════════════════════════════════════════════════════════════════════ */

/* Контейнеры иконок — без фона везде */
[data-theme="dark"] .subject-icon,
[data-theme="dark"] .progress-subject-icon,
[data-theme="dark"] .subject-detail-icon,
[data-theme="dark"] .resource-card > span,
[data-theme="dark"] .desktop-mini-task > span,
[data-theme="dark"] .wiz-subject-icon,
[data-theme="dark"] .subject-card span,
[data-theme="dark"] .resource-card span {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Фильтр для ВСЕХ иконок предметов в тёмной теме */
[data-theme="dark"] .subject-icon img,
[data-theme="dark"] .progress-subject-icon img,
[data-theme="dark"] .subject-detail-icon img,
[data-theme="dark"] .wiz-subject-icon img,
[data-theme="dark"] .task-item img,
[data-theme="dark"] .subject-group-heading img,
[data-theme="dark"] .plan-item img,
[data-theme="dark"] .subject-card span img,
[data-theme="dark"] .resource-card span img {
  background-color: transparent !important;
  mix-blend-mode: normal !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-sizing: content-box !important;
  filter: sepia(1) saturate(8) hue-rotate(-22deg) brightness(0.88) !important;
}

/* Иконки в плитках профиля и карточке поддержки */
[data-theme="dark"] .profile-support-card > span,
[data-theme="dark"] .profile-hub-tile > span,
[data-theme="dark"] .settings-nav-icon {
  background: rgba(242, 106, 0, 0.14) !important;
  box-shadow: none !important;
}

/* Прогресс-бар — светлая дорожка → тёмная */
[data-theme="dark"] progress,
[data-theme="dark"] progress::-webkit-progress-bar {
  background: rgba(255, 200, 100, 0.1) !important;
}

/* Карточки следующих рангов */
[data-theme="dark"] .rank-next-row button {
  background: var(--surface-strong) !important;
  border-color: rgba(255, 200, 100, 0.1) !important;
}
[data-theme="dark"] .rank-next-row button span {
  background: rgba(242, 106, 0, 0.18) !important;
}
[data-theme="dark"] .rank-next-row button.current {
  background: rgba(242, 106, 0, 0.14) !important;
  border-color: rgba(242, 106, 0, 0.35) !important;
  box-shadow: 0 8px 20px rgba(242, 106, 0, 0.12) !important;
}

/* Дорожка прогресс-баров предметов */
[data-theme="dark"] .progress-subject-bar-wrap {
  background: rgba(255, 200, 100, 0.1) !important;
}

/* "Следующее звание" компакт-карточка */
[data-theme="dark"] .rank-next-compact {
  background: var(--surface-strong) !important;
  border-color: rgba(255, 200, 100, 0.12) !important;
}
[data-theme="dark"] .rank-next-compact em {
  color: var(--orange) !important;
}

/* Лестница рангов (rank-ladder) — вертикальный список */
[data-theme="dark"] .rank-ladder button {
  background: var(--surface-strong) !important;
  border-color: rgba(255, 200, 100, 0.08) !important;
  color: var(--muted) !important;
}
[data-theme="dark"] .rank-ladder button span {
  background: rgba(242, 106, 0, 0.18) !important;
  color: var(--orange) !important;
}
[data-theme="dark"] .rank-ladder button.current,
[data-theme="dark"] .rank-ladder button.is-selected {
  background: rgba(242, 106, 0, 0.14) !important;
  border-color: rgba(242, 106, 0, 0.35) !important;
  box-shadow: 0 8px 20px rgba(242, 106, 0, 0.12) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .rank-ladder button.current span,
[data-theme="dark"] .rank-ladder button.is-selected span {
  background: rgba(242, 106, 0, 0.28) !important;
}
[data-theme="dark"] .rank-ladder em {
  background: rgba(255, 200, 100, 0.1) !important;
}

/* Панель профиля (настройки/редактирование аккаунта) */
[data-theme="dark"] .profile-panel {
  background: linear-gradient(180deg, #1f1008 0%, #1a0e07 100%) !important;
}

/* profile-card и profile-progress (используют surface-strong) */
[data-theme="dark"] .profile-card,
[data-theme="dark"] .profile-progress,
[data-theme="dark"] .achievement-history {
  background: var(--surface) !important;
  border-color: rgba(255, 200, 100, 0.1) !important;
}

/* Profile strip (мобайл) */
[data-theme="dark"] .profile-strip {
  background: var(--surface) !important;
  border-color: rgba(255, 200, 100, 0.08) !important;
}

/* Weak topic placeholder */
[data-theme="dark"] .weak-topic-list article,
[data-theme="dark"] .weak-topic-placeholder {
  background: rgba(255, 200, 100, 0.06) !important;
  border-color: rgba(255, 200, 100, 0.08) !important;
}

/* Текст в тёмной теме — общие переопределения */
[data-theme="dark"] .task-item strong,
[data-theme="dark"] .task-item time,
[data-theme="dark"] .section-heading h2,
[data-theme="dark"] .plan-head h2 {
  color: var(--ink) !important;
}

[data-theme="dark"] .task-item span,
[data-theme="dark"] .task-item p {
  color: var(--muted) !important;
}

/* Rank badge labels */
[data-theme="dark"] .rank-chart-head strong {
  background: rgba(242, 106, 0, 0.18) !important;
  color: var(--orange) !important;
}

/* Avatar — оставляем оранжевый градиент, он хорошо смотрится в тёмной теме */

/* Кнопка настроек (шестерёнка) на экране профиля */
[data-theme="dark"] .profile-card a,
[data-theme="dark"] .profile-card button {
  background: rgba(255, 200, 100, 0.08) !important;
  color: var(--ink) !important;
  border-color: rgba(255, 200, 100, 0.1) !important;
}

/* ── Десктоп: сайдбар навигация — разделители и выравнивание ───────────── */
@media (min-width: 900px) {
  /* Плавный переход для всех состояний */
  .bottom-nav a {
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  }

  /* Ховер для неактивных пунктов */
  .bottom-nav a:not(.active):hover {
    background: rgba(242, 106, 0, 0.08);
    color: var(--ink);
  }

  /* ── Разделители между группами пунктов ──────────────────────────────── */

  /* Группа 1: Задания, Прогресс          */
  /* Разделитель ПЕРЕД «Домой» (3-й пункт) */
  .bottom-nav a:nth-child(3) {
    position: relative;
    margin-top: 20px;
  }

  .bottom-nav a:nth-child(3)::before {
    content: "";
    position: absolute;
    top: -11px;
    left: 8px;
    right: 8px;
    height: 1px;
    background: var(--line);
    pointer-events: none;
  }

  /* Группа 2: Домой (основной)            */
  /* Разделитель ПЕРЕД «Материалы» (4-й)  */
  .bottom-nav a:nth-child(4) {
    position: relative;
    margin-top: 20px;
  }

  .bottom-nav a:nth-child(4)::before {
    content: "";
    position: absolute;
    top: -11px;
    left: 8px;
    right: 8px;
    height: 1px;
    background: var(--line);
    pointer-events: none;
  }

  /* Группа 3: Материалы                  */
  /* «Профиль» (5-й) прижат к нижнему краю */
  .bottom-nav a:nth-child(5) {
    margin-top: auto;
  }
}

/* ── Critique fixes: eyebrow-кикеры (только CSS, без изменения разметки) ─── */

/* Дейли-план — тихая подпись вместо uppercase-кикера */
.daily-plan-card .eyebrow {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  color: var(--muted) !important;
  margin-bottom: 3px !important;
}

/* Топбар "СТАДИФАЙ" — мягче */
.topbar .eyebrow {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--muted) !important;
  opacity: 0.7;
}

/* ── P0 #2: hero-pair — progress-hero + exam-panel рядом (только мобайл) ─── */
.hero-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 0;
}
.hero-pair .progress-hero,
.hero-pair .exam-panel {
  margin: 0 !important;
}

/* ── Critique fixes: wizard contrast, states, and compact home cards ───────── */
.auth-screen.wizard {
  --wizard-cream: rgba(255, 232, 190, 0.92);
  --wizard-muted: rgba(255, 222, 176, 0.76);
  --wizard-subtle: rgba(255, 222, 176, 0.62);
  --wizard-focus: rgba(255, 168, 82, 0.36);
}

.auth-screen.wizard .wizard-brand,
.auth-screen.wizard .wiz-switch {
  color: var(--wizard-subtle) !important;
}

.auth-screen.wizard .wiz-form label,
.auth-screen.wizard .wiz-note,
.auth-screen.wizard .wiz-step-sub {
  color: var(--wizard-muted) !important;
}

.auth-screen.wizard .wiz-form input::placeholder {
  color: rgba(255, 235, 210, 0.58) !important;
}

.auth-screen.wizard .wizard-back {
  color: var(--wizard-muted) !important;
}

.auth-screen.wizard .wizard-back:hover,
.auth-screen.wizard .wizard-back:focus-visible,
.auth-screen.wizard .wiz-switch button:hover,
.auth-screen.wizard .wiz-switch button:focus-visible {
  color: var(--wizard-cream) !important;
}

.auth-screen.wizard .wiz-primary:focus-visible,
.auth-screen.wizard .wiz-oauth:focus-visible,
.auth-screen.wizard .wiz-choice:focus-visible,
.auth-screen.wizard .wiz-subject:focus-within,
.auth-screen.wizard .wizard-back:focus-visible,
.auth-screen.wizard .wiz-switch button:focus-visible {
  outline: 3px solid var(--wizard-focus);
  outline-offset: 4px;
}

.auth-screen.wizard .wiz-form:has(input:required:invalid) .wiz-primary {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.auth-screen.wizard .wizard-msg.is-error {
  width: 100%;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(255, 112, 85, 0.12);
  color: #ffb29f !important;
  font-weight: 800;
}

.hero-pair {
  align-items: stretch;
}

.hero-pair .progress-hero,
.hero-pair .exam-panel {
  min-width: 0;
  height: 100%;
}

.hero-pair .progress-hero h2,
.hero-pair .exam-panel h2,
.hero-pair .exam-panel span:not(.exam-orbit span) {
  overflow-wrap: anywhere;
}

@media (max-width: 430px) {
  .hero-pair {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 14px;
  }
}

/* ── App-wide polish pass: clipping, brand type, icons, readable rhythm ───── */
.topbar .eyebrow,
.bottom-nav::before,
.wizard-brand,
.splash-brand {
  font-family: var(--brand-font);
}

.topbar .eyebrow {
  color: var(--orange) !important;
  opacity: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0.02em !important;
  text-transform: lowercase !important;
}

.bottom-nav a {
  overflow: visible;
  padding-inline: 1px;
}

.bottom-nav span {
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-size: clamp(9px, 2.5vw, 10.5px);
  letter-spacing: 0;
}

.bottom-nav a[href="#materials"] span {
  font-size: clamp(8.8px, 2.35vw, 10px);
}

.subject-card,
.resource-card,
.material-row,
.task-item,
.settings-item,
.leaderboard-item,
.desktop-mini-task,
.desktop-rail-list a {
  overflow: visible;
}

.subject-card strong,
.resource-card strong,
.resource-card p,
.material-row strong,
.material-row p,
.task-item strong,
.task-item p,
.settings-item strong,
.settings-item span,
.desktop-mini-task strong,
.desktop-mini-task em,
.desktop-rail-list a {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.subject-card strong,
.resource-card strong,
.settings-item strong,
.desktop-mini-task strong {
  line-height: 1.2;
}

.subject-card p,
.resource-card p,
.settings-item span,
.desktop-mini-task em {
  line-height: 1.34;
}

/* Иконки без фонового контейнера — чистое изображение */
.subject-icon,
.resource-card > span,
.progress-subject-icon,
.subject-detail-icon,
.desktop-mini-task > span {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.subject-icon img,
.resource-card span img,
.progress-subject-icon img,
.subject-detail-icon img {
  display: block;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 900px) {
  .bottom-nav::before {
    color: var(--orange) !important;
    opacity: 1 !important;
    letter-spacing: 0.02em !important;
  }

  .bottom-nav a,
  .bottom-nav a.home-nav {
    min-width: 0 !important;
    overflow: visible !important;
  }

  .bottom-nav span {
    width: 100%;
    min-width: 0;
    font-size: 15px !important;
    overflow: visible;
  }
}

@media (max-width: 370px) {
  .bottom-nav {
    gap: 2px;
    padding: 7px 5px;
  }

  .bottom-nav svg {
    width: 17px;
    height: 17px;
  }

  .bottom-nav span,
  .bottom-nav a[href="#materials"] span {
    font-size: 8.7px;
  }
}

/* ── Text fit pass: avoid vertical clipping with Posterama/system fallbacks ─ */
.topbar h1,
h1 {
  line-height: 1.18 !important;
}

.progress-hero h2,
.exam-panel h2,
.stats-hero span,
.rank-chart-head h3,
.desktop-profile-row strong,
.desktop-profile-grid strong {
  line-height: 1.18 !important;
}

.desktop-profile-grid strong {
  font-size: 13px !important;
}

/* ── Polish: focus & dark-mode gap fixes ───────────────────────────────────── */

/* Desktop nav focus ring */
@media (min-width: 900px) {
  .bottom-nav a:focus-visible {
    outline: 3px solid rgba(242, 106, 0, 0.3);
    outline-offset: 2px;
  }
}

/* System dark mode: plan-item states */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plan-item {
    background: var(--surface-strong) !important;
  }

  :root:not([data-theme="light"]) .plan-item.is-done {
    background: rgba(63, 154, 85, 0.12) !important;
    border-color: rgba(63, 154, 85, 0.25) !important;
  }

  :root:not([data-theme="light"]) .plan-item span {
    background: rgba(242, 106, 0, 0.18) !important;
  }
}

@media (min-width: 900px) {
  .topbar h1 {
    line-height: 1.12 !important;
  }
}

@media (max-width: 380px) {
  .plan-head {
    grid-template-columns: minmax(0, 1fr) minmax(104px, 128px) !important;
  }

  .plan-head h2 {
    font-size: 21px !important;
    line-height: 1.14 !important;
    text-wrap: balance;
  }

  .plan-head > strong {
    max-width: 128px !important;
  }
}

/* ── Dark subject icons: use pure source artwork, no chips or filters ─────── */
[data-theme="dark"] .subject-icon,
[data-theme="dark"] .subject-card span,
[data-theme="dark"] .wiz-subject-icon,
[data-theme="dark"] .progress-subject-icon,
[data-theme="dark"] .subject-detail-icon,
[data-theme="dark"] .resource-card .subject-icon,
[data-theme="dark"] .subject-group-heading img,
[data-theme="dark"] .prep-list img,
[data-theme="dark"] .weak-topic-list img,
[data-theme="dark"] .profile-progress img,
[data-theme="dark"] .task-item img,
[data-theme="dark"] .search-result-icon:has(img[src*="assets/subjects/"]),
[data-theme="dark"] .profile-favorite-row span:has(img[src*="assets/subjects/"]),
[data-theme="dark"] .subject-settings-list span:has(img[src*="assets/subjects/"]),
[data-theme="dark"] .settings-subject-list span:has(img[src*="assets/subjects/"]) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

[data-theme="dark"] img[src*="assets/subjects/"] {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  padding: 0 !important;
}

[data-theme="dark"] .subject-icon img[src*="assets/subjects/"],
[data-theme="dark"] .subject-card span img[src*="assets/subjects/"],
[data-theme="dark"] .progress-subject-icon img[src*="assets/subjects/"],
[data-theme="dark"] .subject-detail-icon img[src*="assets/subjects/"],
[data-theme="dark"] .wiz-subject-icon img[src*="assets/subjects/"],
[data-theme="dark"] .resource-card span img[src*="assets/subjects/"],
[data-theme="dark"] .task-item img[src*="assets/subjects/"],
[data-theme="dark"] .subject-group-heading img[src*="assets/subjects/"],
[data-theme="dark"] .prep-list img[src*="assets/subjects/"],
[data-theme="dark"] .weak-topic-list img[src*="assets/subjects/"],
[data-theme="dark"] .profile-progress img[src*="assets/subjects/"],
[data-theme="dark"] .search-result-icon img[src*="assets/subjects/"],
[data-theme="dark"] .profile-favorite-row img[src*="assets/subjects/"] {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  padding: 0 !important;
}

[data-theme="dark"] .wiz-subject:hover .wiz-subject-icon,
[data-theme="dark"] .wiz-subject:has(input:checked) .wiz-subject-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .wiz-subject:has(input:checked) {
  border-color: rgba(242, 106, 0, 0.45) !important;
  background: rgba(242, 106, 0, 0.1) !important;
}

/* ── Dark mode brand chips: no white pills across the app ─────────────────── */
[data-theme="dark"] .back-btn,
[data-theme="dark"] .app-back-topbar .back-btn,
[data-theme="dark"] .account-back-btn,
[data-theme="dark"] .profile-panel-back,
[data-theme="dark"] .profile-settings-btn,
[data-theme="dark"] .section-heading button,
[data-theme="dark"] .material-subject-count,
[data-theme="dark"] .subject-group-heading span,
[data-theme="dark"] .settings-pill-btn,
[data-theme="dark"] .coming-soon-badge,
[data-theme="dark"] .account-edit-toggle,
[data-theme="dark"] .secondary-action,
[data-theme="dark"] .profile-panel-action,
[data-theme="dark"] .progress-ring span,
[data-theme="dark"] .exam-orbit span,
[data-theme="dark"] .desktop-goal-card .desktop-rail-head span {
  background: linear-gradient(135deg, #f26a00 0%, #ff8a16 100%) !important;
  border-color: rgba(242, 106, 0, 0.45) !important;
  color: #2e241e !important;
  box-shadow: 0 12px 24px rgba(242, 106, 0, 0.18) !important;
}

[data-theme="dark"] .back-btn svg,
[data-theme="dark"] .app-back-topbar .back-btn svg,
[data-theme="dark"] .account-back-btn svg,
[data-theme="dark"] .profile-panel-back svg,
[data-theme="dark"] .profile-settings-btn svg {
  stroke: currentColor !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .back-btn,
  :root:not([data-theme="light"]) .app-back-topbar .back-btn,
  :root:not([data-theme="light"]) .account-back-btn,
  :root:not([data-theme="light"]) .profile-panel-back,
  :root:not([data-theme="light"]) .profile-settings-btn,
  :root:not([data-theme="light"]) .section-heading button,
  :root:not([data-theme="light"]) .material-subject-count,
  :root:not([data-theme="light"]) .subject-group-heading span,
  :root:not([data-theme="light"]) .settings-pill-btn,
  :root:not([data-theme="light"]) .coming-soon-badge,
  :root:not([data-theme="light"]) .account-edit-toggle,
  :root:not([data-theme="light"]) .secondary-action,
  :root:not([data-theme="light"]) .profile-panel-action,
  :root:not([data-theme="light"]) .progress-ring span,
  :root:not([data-theme="light"]) .exam-orbit span,
  :root:not([data-theme="light"]) .desktop-goal-card .desktop-rail-head span {
    background: linear-gradient(135deg, #f26a00 0%, #ff8a16 100%) !important;
    border-color: rgba(242, 106, 0, 0.45) !important;
    color: #2e241e !important;
    box-shadow: 0 12px 24px rgba(242, 106, 0, 0.18) !important;
  }

  :root:not([data-theme="light"]) .back-btn svg,
  :root:not([data-theme="light"]) .app-back-topbar .back-btn svg,
  :root:not([data-theme="light"]) .account-back-btn svg,
  :root:not([data-theme="light"]) .profile-panel-back svg,
  :root:not([data-theme="light"]) .profile-settings-btn svg {
    stroke: currentColor !important;
  }

  :root:not([data-theme="light"]) .subject-icon,
  :root:not([data-theme="light"]) .subject-card span,
  :root:not([data-theme="light"]) .wiz-subject-icon,
  :root:not([data-theme="light"]) .progress-subject-icon,
  :root:not([data-theme="light"]) .subject-detail-icon,
  :root:not([data-theme="light"]) .resource-card .subject-icon,
  :root:not([data-theme="light"]) .subject-group-heading img,
  :root:not([data-theme="light"]) .prep-list img,
  :root:not([data-theme="light"]) .weak-topic-list img,
  :root:not([data-theme="light"]) .profile-progress img,
  :root:not([data-theme="light"]) .task-item img,
  :root:not([data-theme="light"]) .search-result-icon:has(img[src*="assets/subjects/"]),
  :root:not([data-theme="light"]) .profile-favorite-row span:has(img[src*="assets/subjects/"]),
  :root:not([data-theme="light"]) .subject-settings-list span:has(img[src*="assets/subjects/"]),
  :root:not([data-theme="light"]) .settings-subject-list span:has(img[src*="assets/subjects/"]) {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  :root:not([data-theme="light"]) img[src*="assets/subjects/"] {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    padding: 0 !important;
  }

  :root:not([data-theme="light"]) .subject-icon img[src*="assets/subjects/"],
  :root:not([data-theme="light"]) .subject-card span img[src*="assets/subjects/"],
  :root:not([data-theme="light"]) .progress-subject-icon img[src*="assets/subjects/"],
  :root:not([data-theme="light"]) .subject-detail-icon img[src*="assets/subjects/"],
  :root:not([data-theme="light"]) .wiz-subject-icon img[src*="assets/subjects/"],
  :root:not([data-theme="light"]) .resource-card span img[src*="assets/subjects/"],
  :root:not([data-theme="light"]) .task-item img[src*="assets/subjects/"],
  :root:not([data-theme="light"]) .subject-group-heading img[src*="assets/subjects/"],
  :root:not([data-theme="light"]) .prep-list img[src*="assets/subjects/"],
  :root:not([data-theme="light"]) .weak-topic-list img[src*="assets/subjects/"],
  :root:not([data-theme="light"]) .profile-progress img[src*="assets/subjects/"],
  :root:not([data-theme="light"]) .search-result-icon img[src*="assets/subjects/"],
  :root:not([data-theme="light"]) .profile-favorite-row img[src*="assets/subjects/"] {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    padding: 0 !important;
  }

  :root:not([data-theme="light"]) .wiz-subject:hover .wiz-subject-icon,
  :root:not([data-theme="light"]) .wiz-subject:has(input:checked) .wiz-subject-icon {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* ── Header/nav/materials alignment pass ─────────────────────────────────── */
.topbar-progress-summary {
  min-width: 0;
}

.topbar-progress-summary p,
.topbar-progress-summary span {
  display: block;
  margin: 0;
  color: var(--muted);
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

.topbar-progress-summary p {
  margin-bottom: 4px;
  color: var(--orange);
  font-size: 13px;
}

.topbar-progress-summary h1 {
  margin: 0;
}

.topbar-xp {
  display: block;
}

.topbar-progress-summary span {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.25;
}

.material-subject-card {
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 12px !important;
}

.material-subject-card .subject-icon {
  width: 76px !important;
  height: 76px !important;
  align-self: center !important;
}

.material-subject-card .subject-icon img {
  width: 76px !important;
  height: 76px !important;
}

.material-subject-card strong {
  align-self: center !important;
  margin: 0 !important;
  line-height: 1.14 !important;
  text-align: center;
}

.material-subject-count {
  margin-top: 0 !important;
}

.settings-theme-card,
.wizard-theme-preview {
  display: grid;
  gap: 12px;
}

.settings-theme-card {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-strong);
}

.settings-theme-card strong,
.settings-theme-card span {
  display: block;
}

.settings-theme-card strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.settings-theme-card span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.theme-choice,
.wizard-theme-preview {
  grid-template-columns: 1fr 1fr;
}

.theme-choice {
  display: grid;
  gap: 8px;
}

.theme-choice button,
.wizard-theme-preview button {
  min-width: 0;
  border: 1.5px solid rgba(242, 106, 0, 0.18);
  border-radius: 16px;
  background: rgba(242, 106, 0, 0.08);
  color: var(--ink);
  font-weight: 950;
}

.theme-choice button {
  min-height: 42px;
  font-size: 13px;
}

.theme-choice button.is-selected,
.wizard-theme-preview button.is-selected {
  background: linear-gradient(135deg, #f26a00 0%, #ff8a16 100%) !important;
  border-color: rgba(242, 106, 0, 0.55) !important;
  color: #2e241e !important;
}

.wizard-theme-preview {
  display: grid;
  width: 100%;
  margin-bottom: 10px;
  gap: 10px;
}

.wizard-theme-preview .theme-preview-card {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 7px;
  justify-items: stretch;
  padding: 8px;
  overflow: hidden;
  color: rgba(255, 235, 210, 0.82);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.wizard-theme-preview .theme-preview-card:hover {
  transform: translateY(-1px);
}

.wizard-theme-preview .theme-preview-card strong,
.wizard-theme-preview .theme-preview-card em {
  display: block;
  text-align: left;
}

.wizard-theme-preview .theme-preview-card strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.1;
}

.wizard-theme-preview .theme-preview-card em {
  min-height: 24px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
}

.wizard-theme-preview .theme-preview-card.is-selected {
  background: rgba(242, 106, 0, 0.12) !important;
  border-color: rgba(242, 106, 0, 0.72) !important;
  box-shadow: 0 12px 28px rgba(242, 106, 0, 0.16);
}

.wizard-theme-preview .theme-preview-card.is-selected::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #f26a00;
  box-shadow: 0 0 0 3px rgba(242, 106, 0, 0.18);
}

.theme-preview {
  width: 100%;
  height: 86px;
  border-radius: 12px;
  border: 1px solid rgba(91, 61, 34, 0.14);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 6px;
  padding: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.theme-preview-light {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 214, 142, 0.42), transparent 42px),
    linear-gradient(180deg, #fff8ee 0%, #fffdf9 100%);
}

.theme-preview-dark {
  background:
    radial-gradient(circle at 82% 18%, rgba(242, 106, 0, 0.16), transparent 42px),
    linear-gradient(180deg, #1f1008 0%, #160b02 100%);
  border-color: rgba(255, 200, 100, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 100, 0.06);
}

.theme-preview-top,
.theme-preview-cardline,
.theme-preview-nav {
  display: flex;
  align-items: center;
}

.theme-preview-top {
  justify-content: space-between;
}

.theme-preview-top span:first-child {
  width: 44px;
  height: 9px;
  border-radius: 999px;
  background: #f26a00;
}

.theme-preview-top span:last-child {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: #f7b44b;
}

.theme-preview-hero {
  width: 68%;
  min-height: 21px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f26a00, #ff9a2e);
  align-self: center;
}

.theme-preview-cardline {
  gap: 6px;
  padding: 7px;
  border-radius: 11px;
}

.theme-preview-cardline span:first-child {
  width: 21px;
  height: 21px;
  border-radius: 9px;
  background: #ffb144;
}

.theme-preview-cardline span:last-child {
  flex: 1;
  height: 9px;
  border-radius: 999px;
}

.theme-preview-nav {
  justify-content: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
}

.theme-preview-nav span {
  width: 15px;
  height: 5px;
  border-radius: 999px;
}

.theme-preview-light .theme-preview-cardline,
.theme-preview-light .theme-preview-nav {
  background: #ffffff;
  border: 1px solid rgba(91, 61, 34, 0.1);
}

.theme-preview-light .theme-preview-cardline span:last-child,
.theme-preview-light .theme-preview-nav span {
  background: rgba(91, 61, 34, 0.22);
}

.theme-preview-light .theme-preview-nav span:nth-child(2) {
  background: #f26a00;
}

.theme-preview-dark .theme-preview-cardline,
.theme-preview-dark .theme-preview-nav {
  background: #2a1308;
  border: 1px solid rgba(255, 200, 100, 0.12);
}

.theme-preview-dark .theme-preview-cardline span:last-child,
.theme-preview-dark .theme-preview-nav span {
  background: rgba(255, 235, 210, 0.34);
}

.theme-preview-dark .theme-preview-nav span:nth-child(2) {
  background: #ff7a00;
}

.subject-grid > .subject-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 6px);
}

@media (min-width: 900px) {
  .bottom-nav::before {
    margin: 12px 10px 56px !important;
    text-align: left !important;
    font-size: 34px !important;
    line-height: 1 !important;
  }

  .bottom-nav {
    align-items: stretch !important;
  }

  .bottom-nav a,
  .bottom-nav a.home-nav {
    width: 100% !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 16px !important;
    justify-content: start !important;
    justify-items: stretch !important;
    place-items: center stretch !important;
    padding: 12px 18px !important;
    text-align: left !important;
  }

  .bottom-nav svg {
    width: 26px !important;
    height: 26px !important;
    justify-self: center !important;
  }

  .bottom-nav span,
  .bottom-nav a[href="#materials"] span {
    justify-self: start !important;
    text-align: left !important;
    font-size: 17px !important;
    line-height: 1.05 !important;
  }

  .topbar {
    align-items: center !important;
  }

  .topbar-progress-summary h1 {
    font-size: clamp(30px, 2.2vw, 42px) !important;
    line-height: 1.08 !important;
  }

  .topbar-progress-summary p {
    font-size: 15px !important;
  }

  .topbar-progress-summary span {
    font-size: 15px !important;
  }

  .material-subject-card {
    min-height: 218px !important;
    height: 218px !important;
    padding: 24px 18px !important;
    row-gap: 14px !important;
  }

  .material-subject-card .subject-icon,
  .material-subject-card .subject-icon img {
    width: 88px !important;
    height: 88px !important;
  }

  .material-subject-card strong {
    font-size: 18px !important;
  }
}

@media (max-width: 899px) {
  #home-screen .search {
    margin-top: 14px !important;
    margin-bottom: 18px !important;
  }
}

[data-theme="dark"] .portal-screen,
[data-theme="dark"] .app-shell {
  background: #1f1008 !important;
  background-image: none !important;
}

[data-theme="dark"] .daily-plan-card,
[data-theme="dark"] .streak-card,
[data-theme="dark"] .prep-progress,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .profile-progress,
[data-theme="dark"] .achievement-history,
[data-theme="dark"] .weak-topics,
[data-theme="dark"] .section-block {
  background: #1f1008 !important;
  background-image: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] .prep-list article,
[data-theme="dark"] .profile-progress article,
[data-theme="dark"] .progress-subject-card {
  background: #2a1308 !important;
  background-image: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] .settings-theme-card {
  background: #2a1308 !important;
  border-color: rgba(255, 200, 100, 0.1) !important;
}

[data-theme="dark"] .settings-panel,
[data-theme="dark"] #settings-screen > .settings-panel {
  background: linear-gradient(180deg, #1f1008 0%, #1a0e07 100%) !important;
  background-image: none !important;
}

[data-theme="dark"] .settings-summary-card,
[data-theme="dark"] .notif-status-card {
  background: radial-gradient(circle at 96% 8%, rgba(242, 160, 64, 0.12), transparent 34%), #2a1308 !important;
  border-color: rgba(255, 200, 100, 0.1) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .settings-summary-card strong,
[data-theme="dark"] .notif-status-card strong,
[data-theme="dark"] .settings-summary-card span,
[data-theme="dark"] .notif-status-card span {
  color: var(--ink) !important;
}

[data-theme="dark"] .theme-choice button {
  color: var(--ink);
  background: rgba(255, 200, 100, 0.08);
  border-color: rgba(255, 200, 100, 0.1);
}

[data-theme="dark"] body,
[data-theme="dark"] html {
  background: #160b02 !important;
  background-image: none !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body,
  :root:not([data-theme="light"]) html {
    background: #160b02 !important;
    background-image: none !important;
  }

  :root:not([data-theme="light"]) .portal-screen,
  :root:not([data-theme="light"]) .app-shell {
    background: #1f1008 !important;
    background-image: none !important;
  }

  :root:not([data-theme="light"]) .settings-panel,
  :root:not([data-theme="light"]) #settings-screen > .settings-panel {
    background: linear-gradient(180deg, #1f1008 0%, #1a0e07 100%) !important;
    background-image: none !important;
  }

  :root:not([data-theme="light"]) .daily-plan-card,
  :root:not([data-theme="light"]) .streak-card,
  :root:not([data-theme="light"]) .prep-progress,
  :root:not([data-theme="light"]) .profile-card,
  :root:not([data-theme="light"]) .profile-progress,
  :root:not([data-theme="light"]) .achievement-history,
  :root:not([data-theme="light"]) .weak-topics,
  :root:not([data-theme="light"]) .section-block {
    background: #1f1008 !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  :root:not([data-theme="light"]) .prep-list article,
  :root:not([data-theme="light"]) .profile-progress article,
  :root:not([data-theme="light"]) .progress-subject-card {
    background: #2a1308 !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  :root:not([data-theme="light"]) .settings-summary-card,
  :root:not([data-theme="light"]) .notif-status-card {
    background: radial-gradient(circle at 96% 8%, rgba(242, 160, 64, 0.12), transparent 34%), #2a1308 !important;
    border-color: rgba(255, 200, 100, 0.1) !important;
    box-shadow: none !important;
  }

  :root:not([data-theme="light"]) .settings-summary-card strong,
  :root:not([data-theme="light"]) .notif-status-card strong,
  :root:not([data-theme="light"]) .settings-summary-card span,
  :root:not([data-theme="light"]) .notif-status-card span {
    color: var(--ink) !important;
  }
}

/* ── Polish pass: nav hover, task date, and visual micro-fixes ─────────────── */

/* Desktop nav: hover feedback on inactive items */
@media (min-width: 900px) {
  .bottom-nav a:not(.active):hover,
  .bottom-nav a.home-nav:not(.active):hover {
    background: rgba(242, 106, 0, 0.07) !important;
    color: var(--ink) !important;
    transition: background 120ms ease, color 120ms ease;
  }

  [data-theme="dark"] .bottom-nav a:not(.active):hover {
    background: rgba(242, 106, 0, 0.12) !important;
    color: var(--ink) !important;
  }
}

@media (prefers-color-scheme: dark) {
  @media (min-width: 900px) {
    :root:not([data-theme="light"]) .bottom-nav a:not(.active):hover {
      background: rgba(242, 106, 0, 0.12) !important;
      color: var(--ink) !important;
    }
  }
}

/* Task time element: hide when empty (day = "Сегодня" suppressed in JS) */
.task-item time:empty {
  display: none;
}

/* Desktop tasks: expand task-main to fill full height when no date shown */
@media (min-width: 900px) {
  #tasks-screen .task-item time:empty {
    display: none;
  }

  #tasks-screen .task-item:has(time:empty) .task-main {
    grid-row: 1 / 3;
    align-self: center;
  }
}

/* Stat numbers in right rail: slightly stronger weight for legibility */
.desktop-rail-stats strong {
  font-weight: 950;
}

/* Mobile task cards: keep titles inside their panel without syllable slicing */
.task-item strong,
.task-main strong {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual !important;
  text-wrap: pretty;
}

@media (max-width: 899px) {
  .task-list,
  #tasks-screen .task-list,
  #subject-screen .task-list,
  .subject-group-list {
    grid-template-columns: 1fr !important;
  }

  .task-item,
  #tasks-screen .task-item {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 8px 14px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 20px !important;
  }

  .task-item time,
  #tasks-screen .task-item time {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }

  .task-item time:empty,
  #tasks-screen .task-item time:empty {
    display: none !important;
  }

  .task-item img,
  #tasks-screen .task-item img {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }

  .task-main,
  #tasks-screen .task-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    display: grid !important;
    gap: 10px !important;
  }

  .task-item time:not(:empty) + img + .task-main,
  #tasks-screen .task-item time:not(:empty) + img + .task-main {
    grid-row: 2 !important;
  }

  .task-item strong,
  #tasks-screen .task-item strong {
    display: block !important;
    max-width: 100% !important;
    font-size: 20px !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    text-wrap: pretty !important;
  }

  .task-progress {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .task-progress span {
    display: none !important;
  }

  .task-progress em {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.2 !important;
  }

  .task-item .task-meta,
  #tasks-screen .task-item .task-meta {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: start !important;
    margin-top: 2px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    background: rgba(242, 106, 0, 0.1) !important;
    color: var(--orange) !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  .task-item time:not(:empty) + img + .task-main + .task-meta,
  #tasks-screen .task-item time:not(:empty) + img + .task-main + .task-meta {
    grid-row: 3 !important;
  }
}

/* Home progress panels: aligned circular meters */
.hero-pair .progress-hero,
.hero-pair .exam-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 104px !important;
  align-items: center !important;
  gap: 20px !important;
}

.hero-pair .progress-hero > div:first-child,
.hero-pair .exam-panel > div:first-child {
  min-width: 0 !important;
}

.hero-pair .progress-ring,
.hero-pair .exam-orbit {
  position: static !important;
  transform: none !important;
  justify-self: end !important;
  align-self: center !important;
  width: 92px !important;
  height: 92px !important;
  flex: 0 0 92px !important;
}

.hero-pair .progress-ring {
  background:
    radial-gradient(circle, #f26a00 56%, transparent 57%),
    conic-gradient(#fff 0 var(--goal-progress, 1%), rgba(255, 255, 255, 0.34) var(--goal-progress, 1%) 100%) !important;
}

.hero-pair .exam-orbit {
  background:
    radial-gradient(circle, #f26a00 56%, transparent 57%),
    conic-gradient(#fff 0 var(--exam-progress, 8%), rgba(255, 255, 255, 0.34) var(--exam-progress, 8%) 100%) !important;
}

.hero-pair .progress-ring span,
.hero-pair .exam-orbit span {
  width: 66px !important;
  height: 66px !important;
  background: #f26a00 !important;
  color: #2a1308 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  box-shadow: inset 0 0 0 4px rgba(148, 59, 0, 0.12) !important;
}

.progress-hero h2,
.exam-panel h2 {
  max-width: min(100%, 620px) !important;
  text-wrap: balance;
}

[data-theme="dark"] .hero-pair .progress-ring,
[data-theme="dark"] .hero-pair .exam-orbit {
  background:
    radial-gradient(circle, #f26a00 56%, transparent 57%),
    conic-gradient(rgba(255, 244, 224, 0.75) 0 var(--goal-progress, 1%), rgba(255, 244, 224, 0.18) var(--goal-progress, 1%) 100%) !important;
}

[data-theme="dark"] .hero-pair .exam-orbit {
  background:
    radial-gradient(circle, #f26a00 56%, transparent 57%),
    conic-gradient(rgba(255, 244, 224, 0.75) 0 var(--exam-progress, 8%), rgba(255, 244, 224, 0.18) var(--exam-progress, 8%) 100%) !important;
}

[data-theme="dark"] .hero-pair .progress-ring span,
[data-theme="dark"] .hero-pair .exam-orbit span {
  background: linear-gradient(135deg, #f26a00 0%, #ff8a16 100%) !important;
  color: #2a1308 !important;
}

/* Dark profile surfaces: no white panels, brand-orange avatar */
[data-theme="dark"] .profile-hub-avatar,
[data-theme="dark"] .desktop-profile-avatar {
  background: linear-gradient(135deg, #f26a00 0%, #ffb340 100%) !important;
  color: #ffffff !important;
  border-color: rgba(255, 179, 64, 0.32) !important;
  box-shadow: 0 18px 44px rgba(242, 106, 0, 0.26) !important;
}

[data-theme="dark"] .profile-wallet-card,
[data-theme="dark"] .profile-support-card,
[data-theme="dark"] .profile-hub-tile,
[data-theme="dark"] .profile-panel-card,
[data-theme="dark"] .profile-panel {
  background: #241006 !important;
  border-color: rgba(255, 179, 64, 0.16) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .profile-wallet-card .profile-metrics article,
[data-theme="dark"] .profile-support-card > span,
[data-theme="dark"] .profile-hub-tile > span {
  background: rgba(242, 106, 0, 0.16) !important;
  color: var(--orange) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .profile-hub-avatar,
  :root:not([data-theme="light"]) .desktop-profile-avatar {
    background: linear-gradient(135deg, #f26a00 0%, #ffb340 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255, 179, 64, 0.32) !important;
    box-shadow: 0 18px 44px rgba(242, 106, 0, 0.26) !important;
  }

  :root:not([data-theme="light"]) .profile-wallet-card,
  :root:not([data-theme="light"]) .profile-support-card,
  :root:not([data-theme="light"]) .profile-hub-tile,
  :root:not([data-theme="light"]) .profile-panel-card,
  :root:not([data-theme="light"]) .profile-panel {
    background: #241006 !important;
    border-color: rgba(255, 179, 64, 0.16) !important;
    color: var(--ink) !important;
  }

  :root:not([data-theme="light"]) .profile-wallet-card .profile-metrics article,
  :root:not([data-theme="light"]) .profile-support-card > span,
  :root:not([data-theme="light"]) .profile-hub-tile > span {
    background: rgba(242, 106, 0, 0.16) !important;
    color: var(--orange) !important;
  }
}

@media (max-width: 560px) {
  .hero-pair .progress-hero,
  .hero-pair .exam-panel {
    grid-template-columns: minmax(0, 1fr) 76px !important;
    gap: 12px !important;
  }

  .hero-pair .progress-ring,
  .hero-pair .exam-orbit {
    width: 72px !important;
    height: 72px !important;
    flex-basis: 72px !important;
  }

  .hero-pair .progress-ring span,
  .hero-pair .exam-orbit span {
    width: 52px !important;
    height: 52px !important;
    font-size: 17px !important;
  }
}

/* Navigation icon redesign: label-free, unified thicker glyphs, same color/state logic */
.bottom-nav a,
.bottom-nav a.home-nav {
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  gap: 0 !important;
  padding: 10px !important;
}

.bottom-nav svg {
  overflow: visible;
  width: 29px !important;
  height: 29px !important;
  stroke-width: 2.18;
  vector-effect: non-scaling-stroke;
}

.bottom-nav svg circle,
.bottom-nav svg rect,
.bottom-nav svg path {
  vector-effect: non-scaling-stroke;
}

.bottom-nav span,
.bottom-nav a[href="#materials"] span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

[data-theme="dark"] .bottom-nav svg {
  filter: drop-shadow(0 0 9px rgba(242, 106, 0, 0.28));
}

.bottom-nav a.active,
.bottom-nav a.home-nav.active,
[data-theme="dark"] .bottom-nav a.active,
[data-theme="dark"] .bottom-nav a.home-nav.active,
:root:not([data-theme="light"]) .bottom-nav a.active,
:root:not([data-theme="light"]) .bottom-nav a.home-nav.active {
  background: var(--orange) !important;
  color: #fff !important;
  box-shadow: 0 16px 28px rgba(242, 106, 0, 0.25) !important;
}

.bottom-nav a.active svg,
.bottom-nav a.home-nav.active svg,
[data-theme="dark"] .bottom-nav a.active svg,
[data-theme="dark"] .bottom-nav a.home-nav.active svg,
:root:not([data-theme="light"]) .bottom-nav a.active svg,
:root:not([data-theme="light"]) .bottom-nav a.home-nav.active svg {
  filter: drop-shadow(0 0 8px rgba(255, 246, 232, 0.22));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bottom-nav svg {
    filter: drop-shadow(0 0 9px rgba(242, 106, 0, 0.28));
  }
}

@media (min-width: 900px) {
  .bottom-nav a,
  .bottom-nav a.home-nav {
    min-height: 62px !important;
    grid-template-columns: 1fr !important;
    padding: 14px !important;
    justify-content: center !important;
    justify-items: center !important;
    place-items: center !important;
  }

  .bottom-nav svg {
    width: 34px !important;
    height: 34px !important;
  }
}

@media (max-width: 370px) {
  .bottom-nav svg {
    width: 27px !important;
    height: 27px !important;
  }
}

/* Topbar streak/lives counters */
.topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.topbar-progress-summary {
  flex: 1 1 auto;
  min-width: 0;
}

.topbar-counters {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 22px);
  min-height: 62px;
  padding: 10px clamp(14px, 2.4vw, 28px);
  border: 1px solid rgba(93, 57, 25, 0.15);
  border-radius: 24px;
  background: rgba(255, 253, 248, 0.78);
  box-shadow: 0 18px 38px rgba(81, 45, 14, 0.08);
}

.topbar-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 76px;
}

.topbar-counter svg {
  width: 31px;
  height: 31px;
  overflow: visible;
  fill: none;
  stroke: #b69262;
  stroke-width: 1.95;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 7px 14px rgba(121, 74, 23, 0.14));
}

.topbar-counter strong {
  color: var(--orange);
  font-size: clamp(26px, 2.7vw, 38px);
  font-weight: 950;
  line-height: 1;
}

[data-theme="dark"] .topbar-counters,
:root:not([data-theme="light"]) .topbar-counters {
  border-color: rgba(255, 151, 45, 0.14);
  background: linear-gradient(180deg, rgba(63, 32, 14, 0.72), rgba(35, 17, 8, 0.88));
  box-shadow: inset 0 0 0 1px rgba(255, 202, 135, 0.02), 0 18px 44px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .topbar-counter svg,
:root:not([data-theme="light"]) .topbar-counter svg {
  stroke: #c7aa79;
  filter: drop-shadow(0 0 12px rgba(242, 106, 0, 0.16));
}

@media (max-width: 720px) {
  .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px !important;
  }

  .topbar-counters {
    min-height: 48px;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 18px;
  }

  .topbar-counter {
    min-width: auto;
    gap: 6px;
  }

  .topbar-counter svg {
    width: 24px;
    height: 24px;
  }

  .topbar-counter strong {
    font-size: 25px;
  }
}

@media (max-width: 430px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .topbar-counters {
    grid-column: 1 / -1;
    justify-content: space-evenly;
    order: 3;
    width: 100%;
    min-height: 54px;
  }

  .avatar-button {
    justify-self: end;
  }
}

/* Progress rank showcase */
#rating-screen .rank-path {
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
  padding: 28px;
  border: 1px solid rgba(242, 106, 0, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 86% 15%, rgba(242, 106, 0, 0.14), transparent 32%),
    linear-gradient(135deg, rgba(255, 250, 240, 0.98), rgba(255, 243, 224, 0.78));
  box-shadow: 0 18px 48px rgba(102, 55, 13, 0.08);
}

#rating-screen .rank-path::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(242, 106, 0, 0.08), transparent 22%, transparent 78%, rgba(93, 155, 216, 0.08)),
    radial-gradient(circle at 18% 58%, rgba(143, 206, 92, 0.12), transparent 24%);
}

#rating-screen .rank-chart-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  margin-bottom: 30px;
}

#rating-screen .rank-chart-head p {
  margin: 0 0 6px;
  color: color-mix(in srgb, var(--muted) 82%, var(--ink));
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

#rating-screen .rank-chart-head h3 {
  margin: 0;
  color: var(--orange);
  font-size: 48px;
  font-weight: 950;
  line-height: 0.95;
  letter-spacing: 0;
  text-shadow: 0 10px 24px rgba(242, 106, 0, 0.16);
  overflow-wrap: anywhere;
}

#rating-screen .rank-chart-head > strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  border: 1px solid rgba(242, 106, 0, 0.55);
  border-radius: 999px;
  background: rgba(255, 247, 235, 0.72);
  color: var(--orange);
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}

#rating-screen .rank-chart-head > strong::after {
  content: "›";
  margin-left: 10px;
  font-size: 24px;
  line-height: 0;
}

#rating-screen .rank-ladder {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
}

.rank-showcase {
  display: grid;
  grid-template-columns: minmax(132px, 0.62fr) minmax(170px, 1.4fr) minmax(132px, 0.62fr);
  gap: 14px;
  align-items: center;
}

.rank-node {
  min-height: 128px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  padding: 18px 14px;
  border: 1px solid color-mix(in srgb, var(--node-accent) 72%, transparent);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.22);
  color: var(--ink);
}

.rank-node-current { --node-accent: var(--current-accent); }
.rank-node-next { --node-accent: var(--next-accent); }

.rank-node-index {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--node-accent) 82%, transparent);
  border-radius: 50%;
  color: var(--node-accent);
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
}

.rank-node strong {
  max-width: 100%;
  color: var(--ink);
  font-size: 24px;
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  overflow-wrap: anywhere;
}

.rank-track {
  min-width: 0;
  display: grid;
  gap: 18px;
  justify-items: center;
}

.rank-track-line {
  position: relative;
  width: 100%;
  height: 12px;
  display: block;
  border-radius: 999px;
  background: rgba(91, 61, 34, 0.16);
}

.rank-track-line::before,
.rank-track-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 30px;
  border-radius: 999px;
  background: rgba(91, 61, 34, 0.3);
  transform: translateY(-50%);
}

.rank-track-line::before { left: 33%; }
.rank-track-line::after { left: 66%; }

.rank-track-line i {
  display: block;
  width: var(--rank-progress);
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f26a00, #ffb14c);
  box-shadow: 0 0 18px rgba(242, 106, 0, 0.34);
}

.rank-track-pin {
  width: 30px;
  height: 30px;
  margin-top: -39px;
  margin-left: clamp(0px, calc(var(--rank-progress) - 15px), calc(100% - 30px));
  justify-self: start;
  border: 3px solid rgba(255, 244, 224, 0.82);
  border-radius: 50%;
  background: #ff9a34;
  box-shadow: 0 8px 20px rgba(242, 106, 0, 0.32);
}

.rank-track strong {
  color: var(--muted);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.rank-track strong span {
  color: var(--orange);
}

.rank-goal-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  padding-top: 22px;
  border-top: 1px solid rgba(91, 61, 34, 0.12);
}

.rank-goal-icon {
  grid-row: 1 / 3;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(242, 106, 0, 0.22);
  border-radius: 50%;
  color: var(--orange);
}

.rank-goal-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rank-goal-row p {
  margin: 0;
  color: var(--muted);
  font-size: 20px;
  font-weight: 850;
  line-height: 1.2;
}

.rank-goal-row p strong {
  color: var(--next-accent, var(--orange));
}

.rank-goal-row b {
  color: var(--orange);
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.rank-goal-row em {
  grid-column: 3;
  color: var(--muted);
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  text-align: right;
}

#rating-screen .rank-all-list {
  margin-top: 4px;
}

[data-theme="dark"] #rating-screen .rank-path,
:root:not([data-theme="light"]) #rating-screen .rank-path {
  border-color: rgba(255, 151, 45, 0.14) !important;
  background:
    radial-gradient(circle at 83% 16%, rgba(242, 106, 0, 0.16), transparent 34%),
    linear-gradient(135deg, #241208 0%, #160c07 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 202, 135, 0.025), 0 20px 56px rgba(0, 0, 0, 0.28) !important;
}

[data-theme="dark"] #rating-screen .rank-chart-head p,
:root:not([data-theme="light"]) #rating-screen .rank-chart-head p,
[data-theme="dark"] .rank-track strong,
:root:not([data-theme="light"]) .rank-track strong,
[data-theme="dark"] .rank-goal-row p,
:root:not([data-theme="light"]) .rank-goal-row p,
[data-theme="dark"] .rank-goal-row em,
:root:not([data-theme="light"]) .rank-goal-row em {
  color: #bda281;
}

[data-theme="dark"] #rating-screen .rank-chart-head h3,
:root:not([data-theme="light"]) #rating-screen .rank-chart-head h3 {
  color: #f26a00;
  text-shadow: 0 0 22px rgba(242, 106, 0, 0.22);
}

[data-theme="dark"] #rating-screen .rank-chart-head > strong,
:root:not([data-theme="light"]) #rating-screen .rank-chart-head > strong {
  border-color: rgba(242, 106, 0, 0.68);
  background: rgba(35, 17, 8, 0.46);
  color: #ff8120;
}

[data-theme="dark"] .rank-node,
:root:not([data-theme="light"]) .rank-node {
  background: rgba(26, 13, 7, 0.44);
}

[data-theme="dark"] .rank-node strong,
:root:not([data-theme="light"]) .rank-node strong {
  color: #fff4e0;
}

[data-theme="dark"] .rank-track-line,
:root:not([data-theme="light"]) .rank-track-line {
  background: rgba(255, 244, 224, 0.11);
}

[data-theme="dark"] .rank-track-line::before,
[data-theme="dark"] .rank-track-line::after,
:root:not([data-theme="light"]) .rank-track-line::before,
:root:not([data-theme="light"]) .rank-track-line::after {
  background: rgba(255, 244, 224, 0.24);
}

[data-theme="dark"] .rank-goal-row,
:root:not([data-theme="light"]) .rank-goal-row {
  border-color: rgba(255, 244, 224, 0.1);
}

[data-theme="dark"] .rank-goal-icon,
:root:not([data-theme="light"]) .rank-goal-icon {
  border-color: rgba(242, 106, 0, 0.22);
  background: rgba(242, 106, 0, 0.06);
}

@media (max-width: 760px) {
  #rating-screen .rank-path {
    padding: 20px;
    border-radius: 24px;
  }

  #rating-screen .rank-chart-head {
    margin-bottom: 22px;
  }

  #rating-screen .rank-chart-head h3 {
    font-size: 38px;
  }

  .rank-showcase {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rank-node {
    min-height: 104px;
    grid-template-columns: 58px minmax(0, 1fr);
    justify-items: start;
    align-content: center;
    padding: 16px;
  }

  .rank-node strong {
    text-align: left;
    font-size: 24px;
  }

  .rank-track {
    order: 2;
    padding: 4px 4px 0;
  }

  .rank-node-next {
    order: 3;
  }
}

@media (max-width: 430px) {
  #rating-screen .rank-chart-head {
    grid-template-columns: 1fr;
  }

  #rating-screen .rank-chart-head > strong {
    justify-self: start;
  }

  #rating-screen .rank-chart-head h3 {
    font-size: 34px;
  }

  .rank-goal-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .rank-goal-row b,
  .rank-goal-row em {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }
}

/* ═══ Compact rank showcase — matches reference path ══════════════════════ */

/* header: title (rank-colored) left, "Все звания" pill right, one row */
.app-shell #rating-screen .rank-chart-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 18px;
}

.app-shell #rating-screen .rank-chart-head p {
  grid-column: 1;
  margin: 0 0 3px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.app-shell #rating-screen .rank-chart-head h3 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(22px, 7vw, 27px);
  line-height: 1.02;
  letter-spacing: 0.01em;
}

.app-shell #rating-screen .rank-chart-head > strong {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  padding: 9px 14px;
  border: 1.5px solid var(--orange);
  border-radius: 999px;
  background: transparent;
  color: var(--orange);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-shell #rating-screen .rank-chart-head > strong::after {
  content: " ›";
}

/* showcase grid: node — track — node, always horizontal */
.app-shell .rank-showcase {
  display: grid;
  grid-template-columns: 96px minmax(60px, 1fr) 96px;
  gap: 12px;
  align-items: stretch;
  max-width: 620px;
  margin-inline: auto;
}

.app-shell .rank-track {
  align-self: center;
}

/* rank node cards */
.app-shell .rank-node {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 10px;
  padding: 16px 6px;
  border: 1.5px solid color-mix(in srgb, var(--node-accent) 62%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--node-accent) 7%, transparent);
}

.app-shell .rank-node-index {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--node-accent);
  border-radius: 50%;
  background: transparent;
  color: var(--node-accent);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.app-shell .rank-node strong {
  max-width: 100%;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* track column: rail on top, XP label beneath */
.app-shell .rank-track {
  order: unset;
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 0 2px;
}

.app-shell .rank-node-next {
  order: unset;
}

.app-shell .rank-rail {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(91, 61, 34, 0.16);
}

.app-shell .rank-rail-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 6px;
  width: clamp(6px, var(--rank-progress), 100%);
  border-radius: 999px;
  background: linear-gradient(90deg, #f26a00, #ffb14c);
  transform: translateY(-50%);
  animation: rank-rail-grow 720ms ease both;
}

@keyframes rank-rail-grow {
  from { width: 0; }
}

.app-shell .rank-rail-knob {
  position: absolute;
  top: 50%;
  left: clamp(12px, var(--rank-progress), calc(100% - 12px));
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 244, 224, 0.9);
  border-radius: 50%;
  background: #ff9a34;
  box-shadow: 0 4px 14px rgba(242, 106, 0, 0.42);
  transform: translate(-50%, -50%);
}

.app-shell .rank-rail-dot {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translateY(-50%);
}

.app-shell .rank-rail-dot-start {
  left: -5px;
  background: var(--current-accent);
}

.app-shell .rank-rail-dot-end {
  right: -5px;
  background: var(--next-accent);
}

.app-shell .rank-track strong {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
}

/* reset legacy .rank-ladder span box styling on the XP number */
.app-shell .rank-track strong span {
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--orange);
  font-size: 19px;
  font-weight: 950;
  line-height: 1;
}

/* bottom goal row — icon · "До звания / УЧЕНИК" · "1 000 XP / осталось" */
.app-shell .rank-goal-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  max-width: 620px;
  margin: 18px auto 0;
  padding-top: 18px;
}

.app-shell .rank-goal-icon {
  grid-row: auto;
  width: 46px;
  height: 46px;
}

.app-shell .rank-goal-icon svg {
  width: 24px;
  height: 24px;
}

.app-shell .rank-goal-row p {
  grid-column: 2;
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.app-shell .rank-goal-row p strong {
  display: block;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--next-accent, var(--orange));
}

.app-shell .rank-goal-remain {
  grid-column: 3;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding: 0;
  border-radius: 0;
  background: none;
}

.app-shell .rank-goal-remain b {
  color: var(--orange);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.app-shell .rank-goal-remain em {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.app-shell .rank-goal-remain em::before {
  content: none;
}

/* dark-theme surfaces for compact showcase */
[data-theme="dark"] .app-shell .rank-rail,
:root:not([data-theme="light"]) .app-shell .rank-rail {
  background: rgba(255, 244, 224, 0.12);
}

[data-theme="dark"] .app-shell .rank-rail-tick,
:root:not([data-theme="light"]) .app-shell .rank-rail-tick {
  background: rgba(255, 244, 224, 0.26);
}

[data-theme="dark"] .app-shell #rating-screen .rank-chart-head > strong,
:root:not([data-theme="light"]) .app-shell #rating-screen .rank-chart-head > strong {
  border-color: var(--orange);
  background: transparent;
  color: #ff8120;
}

/* ── Full rank path (expanded) ───────────────────────────────────────────── */
.rank-all-list {
  padding: 18px 0 4px;
  max-height: none !important;
  overflow-x: auto;
  overflow-y: visible;
}

.rank-all-list::-webkit-scrollbar { display: none; }

.rank-path-scroll {
  display: flex;
  align-items: flex-start;
  min-width: max-content;
  padding: 4px 8px 14px;
}

.rank-path-node {
  flex: 0 0 auto;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 72px;
  padding: 6px 4px;
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}

.rank-path-node:active { opacity: 0.65; }

.rank-path-node.is-selected {
  background: rgba(242, 106, 0, 0.07);
}

.rank-path-node span {
  width: 44px;
  height: 44px;
  display: grid !important;
  place-items: center;
  border: 2px solid var(--c);
  border-radius: 50%;
  color: var(--c);
  font-size: 14px;
  font-weight: 950;
  background: transparent;
  position: static !important;
  margin: 0 !important;
  transform: none !important;
}

.rank-path-node.is-done span {
  background: var(--c);
  color: white;
  border-color: var(--c);
}

.rank-path-node.is-current span {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent);
}

.rank-path-node.is-locked span {
  border-color: rgba(91, 61, 34, 0.17);
  color: rgba(91, 61, 34, 0.27);
}

.rank-path-node strong {
  font-size: 10px !important;
  font-weight: 900 !important;
  text-align: center !important;
  line-height: 1.15 !important;
  color: var(--ink) !important;
  max-width: 100%;
  overflow-wrap: break-word;
  display: block !important;
  position: static !important;
  margin: 0 !important;
  transform: none !important;
}

.rank-path-node em {
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 800;
  color: var(--muted) !important;
  display: block !important;
  position: static !important;
  height: auto !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  transform: none !important;
  white-space: nowrap;
}

.rank-path-node.is-locked strong,
.rank-path-node.is-locked em {
  opacity: 0.42;
}

.rank-path-seg {
  flex: 0 0 18px;
  align-self: flex-start;
  height: 3px;
  margin-top: 27px;
  border-radius: 999px;
  background: rgba(91, 61, 34, 0.14);
  position: relative;
  overflow: hidden;
}

.rank-path-seg.is-done {
  background: linear-gradient(90deg, #f26a00, #ffb14c);
}

.rank-path-seg.is-partial::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--fill, 0%);
  background: linear-gradient(90deg, #f26a00, #ffb14c);
}

/* dark mode for path nodes */
[data-theme="dark"] .rank-path-node strong,
:root:not([data-theme="light"]) .rank-path-node strong {
  color: #fff4e0 !important;
}

[data-theme="dark"] .rank-path-node.is-locked span,
:root:not([data-theme="light"]) .rank-path-node.is-locked span {
  border-color: rgba(255, 244, 224, 0.12);
  color: rgba(255, 244, 224, 0.2);
}

[data-theme="dark"] .rank-path-seg,
:root:not([data-theme="light"]) .rank-path-seg {
  background: rgba(255, 244, 224, 0.09);
}

/* ═══ Desktop: spread rank path wider, no empty space ═════════════════════ */
@media (min-width: 900px) {
  .app-shell .rank-showcase,
  .app-shell .rank-goal-row {
    width: min(760px, 100%);
    max-width: none;
    margin-inline: 0;
    justify-self: center;
  }

  .app-shell .rank-showcase {
    grid-template-columns: 132px minmax(60px, 1fr) 132px;
    gap: 24px;
  }

  .app-shell .rank-node {
    padding: 22px 12px;
    gap: 12px;
  }

  .app-shell .rank-node-index {
    width: 56px;
    height: 56px;
    font-size: 18px;
  }

  .app-shell .rank-node strong {
    font-size: 18px;
  }

  .app-shell .rank-track {
    gap: 18px;
  }

  .app-shell .rank-track strong {
    font-size: 18px;
  }

  .app-shell .rank-track strong span {
    font-size: 24px;
  }

  .app-shell .rank-rail-knob {
    width: 28px;
    height: 28px;
  }

  /* expanded full path — spread across full width instead of scrolling */
  .rank-all-list {
    overflow-x: visible;
  }

  .rank-path-scroll {
    min-width: 0;
    width: 100%;
    padding-inline: 6px;
  }

  .rank-path-seg {
    flex: 1 1 auto;
    max-width: 130px;
  }

  .rank-path-node {
    width: 92px;
  }

  .rank-path-node span {
    width: 50px;
    height: 50px;
    font-size: 15px;
  }

  .rank-path-node strong {
    font-size: 12px !important;
  }

  .rank-path-node em {
    font-size: 11px !important;
  }

  .rank-path-seg {
    margin-top: 31px;
  }
}

/* ═══ Hero panels — match reference (goal + exam countdown) ═══════════════ */
.app-shell .progress-hero,
.app-shell .exam-panel {
  position: relative;
  overflow: hidden;
}

/* eyebrow pill */
.app-shell .progress-hero > div > p,
.app-shell .exam-panel > div > p {
  display: inline-block;
  margin: 0 0 12px !important;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff !important;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.app-shell .exam-panel > div > p {
  background: rgba(52, 28, 10, 0.42);
}

/* soft sparkle glints */
.app-shell .progress-hero::after,
.app-shell .exam-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path fill='white' d='M12 2c1 6 4 9 10 10-6 1-9 4-10 10-1-6-4-9-10-10 6-1 9-4 10-10Z'/></svg>");
  background-repeat: no-repeat;
  background-position: 78% 26%, 90% 68%, 70% 82%;
  background-size: 13px, 9px, 7px;
  opacity: 0.38;
}

/* ── progress ring (goal) ──────────────────────────────────────────────── */
.app-shell .progress-ring {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22) !important;
}

.app-shell .progress-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(#ffffff 0 var(--goal-progress, 1%), rgba(255, 255, 255, 0.28) var(--goal-progress, 1%) 100%);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
          mask: radial-gradient(circle, transparent 60%, #000 61%);
}

.app-shell .progress-ring::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.85);
}

.app-shell .progress-ring span {
  position: relative !important;
  z-index: 2 !important;
  width: 64px !important;
  height: 64px !important;
  background: #fff7ec !important;
  color: #f26a00 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 6px 16px rgba(148, 59, 0, 0.22) !important;
}

/* ── exam orbit (days countdown) ───────────────────────────────────────── */
.app-shell .exam-orbit {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 2px dotted rgba(255, 244, 224, 0.42) !important;
}

.app-shell .exam-orbit::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(#ffffff 0 var(--exam-progress, 8%), rgba(255, 255, 255, 0.16) var(--exam-progress, 8%) 100%);
  -webkit-mask: radial-gradient(circle, transparent 63%, #000 64%);
          mask: radial-gradient(circle, transparent 63%, #000 64%);
}

.app-shell .exam-orbit::after {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffb14c;
  box-shadow: 0 0 8px 2px rgba(255, 177, 76, 0.85);
}

.app-shell .exam-orbit span {
  position: relative !important;
  z-index: 2 !important;
  width: 62px !important;
  height: 62px !important;
  background: #fff7ec !important;
  color: #8a4a17 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 6px 16px rgba(40, 19, 8, 0.3) !important;
}

/* dark theme keeps cream centers readable */
[data-theme="dark"] .app-shell .progress-ring span,
:root:not([data-theme="light"]) .app-shell .progress-ring span {
  background: #fff7ec !important;
  color: #f26a00 !important;
}

[data-theme="dark"] .app-shell .exam-orbit span,
:root:not([data-theme="light"]) .app-shell .exam-orbit span {
  background: #fff7ec !important;
  color: #8a4a17 !important;
}

/* ═══ Stats hero — same design language as goal/exam panels ═══════════════ */
.app-shell .stats-hero {
  position: relative;
  overflow: hidden;
}

/* eyebrow pill */
.app-shell .stats-hero > div > p {
  display: inline-block;
  margin: 0 0 12px !important;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(52, 28, 10, 0.42);
  color: #fff !important;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

/* soft sparkle glints */
.app-shell .stats-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path fill='white' d='M12 2c1 6 4 9 10 10-6 1-9 4-10 10-1-6-4-9-10-10 6-1 9-4 10-10Z'/></svg>");
  background-repeat: no-repeat;
  background-position: 78% 26%, 90% 68%, 70% 82%;
  background-size: 13px, 9px, 7px;
  opacity: 0.38;
}

/* accuracy ring — cream centre, dotted orbit, arc + glow dot */
.app-shell .stats-ring {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 2px dotted rgba(255, 244, 224, 0.42) !important;
  color: transparent !important;
}

.app-shell .stats-ring::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(#ffffff 0 var(--acc, 76%), rgba(255, 255, 255, 0.16) var(--acc, 76%) 100%);
  -webkit-mask: radial-gradient(circle, transparent 63%, #000 64%);
          mask: radial-gradient(circle, transparent 63%, #000 64%);
}

.app-shell .stats-ring::after {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffb14c;
  box-shadow: 0 0 8px 2px rgba(255, 177, 76, 0.85);
}

.app-shell .stats-ring span {
  position: relative !important;
  z-index: 2 !important;
  width: 62px !important;
  height: 62px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #fff7ec !important;
  color: #8a4a17 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 6px 16px rgba(40, 19, 8, 0.3) !important;
}

[data-theme="dark"] .app-shell .stats-ring span,
:root:not([data-theme="light"]) .app-shell .stats-ring span {
  background: #fff7ec !important;
  color: #8a4a17 !important;
}

.diary-dashboard {
  display: grid;
  gap: 14px;
}

.diary-today-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, #f26a00, #ff9f43);
  color: #fff;
  box-shadow: 0 16px 34px rgba(242, 106, 0, 0.24);
}

.diary-ring {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#fff 0 var(--diary-progress, 0%), rgba(255, 255, 255, 0.24) var(--diary-progress, 0%) 100%);
}

.diary-ring span {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff7ec;
  color: #f26a00;
  font-weight: 950;
}

.diary-today-card h3 {
  margin: 0 0 5px;
  font-size: 18px;
}

.diary-today-card p {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.35;
}

.diary-today-card .profile-panel-action {
  width: fit-content;
  background: #fff;
  color: #a64200;
}

.diary-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.diary-summary-grid article {
  padding: 14px 12px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.diary-summary-grid strong {
  display: block;
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
}

.diary-summary-grid span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.diary-history {
  display: grid;
  gap: 12px;
}

.diary-day {
  padding: 14px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.diary-day-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.diary-day-head strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.diary-day-head span,
.diary-day-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.diary-day-head em {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(91, 61, 34, 0.08);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.diary-day-head em.is-closed {
  background: rgba(63, 158, 99, 0.14);
  color: #227044;
}

.diary-session-list {
  display: grid;
  gap: 8px;
}

.diary-session {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(91, 61, 34, 0.045);
}

.diary-session span,
.diary-session p,
.diary-session em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.diary-session strong {
  display: block;
  margin: 3px 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.diary-session p {
  margin: 0;
}

.diary-session button {
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: #fff1e3;
  color: #a64200;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.diary-session button:hover {
  background: #ffe2c2;
}

.diary-day-note {
  margin: 10px 0 0;
}

@media (max-width: 620px) {
  .diary-today-card {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .diary-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .diary-day-head,
  .diary-session {
    grid-template-columns: 1fr;
  }
}

.lives-limit-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(25, 15, 9, 0.56);
  backdrop-filter: blur(6px);
}

.lives-limit-modal {
  position: relative;
  width: min(430px, 100%);
  padding: 22px;
  border-radius: 24px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(25, 15, 9, 0.28);
  text-align: center;
}

.lives-limit-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(91, 61, 34, 0.08);
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.lives-limit-close:hover {
  background: rgba(242, 106, 0, 0.12);
  color: var(--accent);
}

.lives-limit-hero {
  width: min(250px, 74vw);
  aspect-ratio: 1;
  margin: -4px auto 14px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 84%, rgba(242, 106, 0, 0.14), transparent 38%),
    linear-gradient(180deg, #fffaf4 0%, #fff2e3 100%);
  box-shadow: inset 0 0 0 1px rgba(242, 106, 0, 0.1);
}

.lives-limit-hero img {
  width: 112%;
  max-width: none;
  display: block;
  transform: translateY(3%);
}

.lives-limit-kicker {
  margin: 0 0 7px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lives-limit-modal h2 {
  margin: 0 auto;
  max-width: 13em;
  color: var(--text);
  font-size: 24px;
  line-height: 1.1;
  text-wrap: balance;
}

.lives-limit-modal p:not(.lives-limit-kicker) {
  margin: 12px auto 0;
  max-width: 29em;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.lives-limit-actions {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.lives-limit-actions .primary-action,
.lives-limit-actions .secondary-action {
  width: 100%;
  justify-content: center;
}

.lives-limit-modal > span {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 430px) {
  .lives-limit-modal {
    padding: 18px;
    border-radius: 22px;
  }

  .lives-limit-hero {
    width: min(220px, 76vw);
    border-radius: 24px;
  }

  .lives-limit-modal h2 {
    font-size: 21px;
  }
}

/* ═══ Profile hub — harmonious desktop layout ════════════════════════════ */
@media (min-width: 900px) {
  #settings-screen .profile-hub-top {
    margin-bottom: 18px !important;
  }

  #settings-screen .profile-wallet-card,
  #settings-screen .profile-support-card {
    margin-bottom: 16px !important;
  }

  /* wallet card + metrics */
  #settings-screen .profile-wallet-card {
    min-height: 0 !important;
    padding: 22px !important;
    border-radius: 22px !important;
  }
  #settings-screen .profile-wallet-card .profile-metrics {
    gap: 12px !important;
    margin-top: 16px !important;
  }
  #settings-screen .profile-wallet-card .profile-metrics article {
    padding: 15px 10px !important;
    border-radius: 16px !important;
  }
  #settings-screen .profile-wallet-card .profile-metrics strong {
    font-size: 24px !important;
    line-height: 1 !important;
  }
  #settings-screen .profile-wallet-card .profile-metrics span {
    margin-top: 5px !important;
    font-size: 12px !important;
  }

  /* support card */
  #settings-screen .profile-support-card {
    min-height: 0 !important;
    align-items: center !important;
    padding: 18px 20px !important;
    border-radius: 22px !important;
  }

  /* grid: two equal columns */
  #settings-screen .profile-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  /* uniform tiles — icon top-left, title, subtitle */
  #settings-screen .profile-hub-tile {
    grid-column: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-height: 138px !important;
    height: auto !important;
    padding: 20px !important;
    border-radius: 22px !important;
    text-align: left !important;
  }
  #settings-screen .profile-hub-tile > span {
    width: 48px !important;
    height: 48px !important;
    margin: 0 0 auto !important;
    border-radius: 15px !important;
  }
  #settings-screen .profile-hub-tile svg {
    width: 24px !important;
    height: 24px !important;
  }
  #settings-screen .profile-hub-tile strong {
    margin: 14px 0 4px !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
  }
  #settings-screen .profile-hub-tile em {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  /* Дневник — featured full-width banner (icon left, centred) */
  #settings-screen #profile-diary-action.tile-wide {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-content: center !important;
    align-items: center !important;
    min-height: 92px !important;
    column-gap: 16px !important;
    row-gap: 2px !important;
  }
  #settings-screen #profile-diary-action.tile-wide > span {
    grid-row: 1 / 3 !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
  }
  #settings-screen #profile-diary-action.tile-wide strong {
    grid-column: 2 !important;
    align-self: end !important;
    margin: 0 !important;
    font-size: 18px !important;
  }
  #settings-screen #profile-diary-action.tile-wide em {
    grid-column: 2 !important;
    align-self: start !important;
    margin: 0 !important;
  }

  /* Личные данные loses wide status → fills the 2×2 grid */
  #settings-screen #profile-personal-action.tile-wide {
    grid-column: auto !important;
  }
}