:root {
  color-scheme: light;
  font-family: Inter, ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --indigo: #33288c;
  --purple: #6e4fd1;
  --turquoise: #1fa89e;
  --yellow: #ffd147;
  --coral: #fa6b61;
  --ink: #1f1f3d;
  --muted: #64657d;
  --canvas: #f6f7ff;
  --card: rgba(255, 255, 255, 0.94);
  --shadow: 0 18px 50px rgba(51, 40, 140, 0.11);
}

* { box-sizing: border-box; }

html, body, #app { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 100% 0, rgba(31, 168, 158, 0.15), transparent 28rem),
    radial-gradient(circle at 0 100%, rgba(255, 209, 71, 0.17), transparent 25rem),
    linear-gradient(#f7f8ff, #fffaf0);
}

button, input, select { font: inherit; }
button { cursor: pointer; }

.launch-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  color: white;
  background: linear-gradient(135deg, var(--indigo), var(--purple), var(--turquoise));
}

.launch-logo, .brand-logo {
  object-fit: cover;
  border-radius: 26%;
  box-shadow: 0 16px 40px rgba(27, 22, 83, 0.24);
}

.launch-logo { width: 118px; height: 118px; }
.launch-screen h1 { margin: 0; font-size: 42px; }
.loading-bar { width: 210px; height: 7px; overflow: hidden; border-radius: 99px; background: #ffffff3b; }
.loading-bar span { display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--yellow); animation: loading 1.1s ease-in-out infinite alternate; }
@keyframes loading { to { transform: translateX(140%); } }

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.1fr);
}

.auth-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 7vw, 90px);
  color: white;
  background: linear-gradient(145deg, var(--indigo), var(--purple));
}

.auth-hero::after {
  content: "× ÷ + −";
  position: absolute;
  right: -30px;
  bottom: -25px;
  color: #ffffff12;
  font-size: clamp(100px, 15vw, 220px);
  font-weight: 900;
  letter-spacing: -18px;
}

.auth-hero .brand-logo { width: 96px; height: 96px; margin-bottom: 28px; }
.auth-hero h1 { max-width: 680px; margin: 0 0 16px; font-size: clamp(42px, 6vw, 76px); line-height: 0.98; }
.auth-hero p { max-width: 570px; margin: 0; color: #eeebff; font-size: clamp(17px, 2vw, 22px); line-height: 1.55; }
.feature-list { display: grid; gap: 12px; margin-top: 36px; }
.feature { display: flex; align-items: center; gap: 12px; font-weight: 750; }
.feature-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: var(--indigo); background: var(--yellow); }

.auth-panel { display: grid; place-items: center; padding: 30px; }
.auth-card { width: min(100%, 520px); }
.auth-card h2 { margin: 0 0 8px; font-size: 34px; }
.auth-card > p { margin: 0 0 25px; color: var(--muted); line-height: 1.5; }
.auth-top { display: flex; justify-content: flex-end; margin-bottom: 28px; }

.language-select {
  border: 1px solid #dedff0;
  border-radius: 999px;
  padding: 9px 14px;
  color: var(--indigo);
  background: white;
  font-weight: 750;
}

.tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 22px; border-radius: 15px; background: #ececf7; }
.tab-button { border: 0; border-radius: 12px; padding: 11px; color: var(--muted); background: transparent; font-weight: 800; }
.tab-button.active { color: var(--indigo); background: white; box-shadow: 0 3px 12px #33288c18; }

.form-grid { display: grid; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 750; }
input, select {
  width: 100%;
  min-height: 48px;
  border: 1px solid #dfe0ef;
  border-radius: 14px;
  padding: 11px 13px;
  color: var(--ink);
  background: white;
  outline: none;
}
input:focus, select:focus { border-color: var(--purple); box-shadow: 0 0 0 4px #6e4fd119; }
.check-row { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 13px; }
.check-row input { width: 18px; min-height: 18px; margin-top: 1px; }

.primary, .secondary, .ghost, .answer {
  border: 0;
  border-radius: 15px;
  padding: 14px 18px;
  font-weight: 850;
}
.primary { color: white; background: var(--indigo); box-shadow: 0 8px 22px #33288c38; }
.primary.turquoise { background: var(--turquoise); box-shadow: 0 8px 22px #1fa89e35; }
.secondary { color: var(--indigo); background: #ebe9ff; }
.ghost { color: var(--indigo); background: transparent; }
.full { width: 100%; }
.link-button { border: 0; padding: 4px; color: var(--indigo); background: transparent; font-weight: 750; }
.form-message { min-height: 20px; margin: 4px 0 0; color: var(--coral); font-size: 14px; text-align: center; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10;
  width: 248px;
  display: flex;
  flex-direction: column;
  padding: 25px 18px;
  color: white;
  background: linear-gradient(180deg, var(--indigo), #241c69);
}
.brand { display: flex; align-items: center; gap: 13px; padding: 0 8px 28px; font-size: 24px; font-weight: 900; }
.brand-logo.small { width: 46px; height: 46px; border-radius: 14px; }
.nav-list { display: grid; gap: 8px; }
.nav-button {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 14px;
  padding: 13px 14px;
  color: #dedbff;
  background: transparent;
  font-weight: 800;
  text-align: left;
}
.nav-button.active, .nav-button:hover { color: white; background: #ffffff18; }
.nav-icon { width: 25px; text-align: center; font-size: 19px; }
.sidebar-footer { margin-top: auto; }
.sidebar-profile { padding: 13px; border-radius: 16px; background: #ffffff12; }
.sidebar-profile strong, .sidebar-profile span { display: block; }
.sidebar-profile span { margin-top: 4px; color: #c9c5ee; font-size: 12px; }

.main-content { min-height: 100vh; margin-left: 248px; padding: 28px clamp(20px, 4vw, 58px) 70px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.topbar h1 { margin: 0; font-size: clamp(28px, 4vw, 42px); }
.topbar p { margin: 5px 0 0; color: var(--muted); }
.profile-pill { display: flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 8px 13px 8px 8px; color: var(--ink); background: white; box-shadow: var(--shadow); font-weight: 800; }
.avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--indigo); background: var(--yellow); font-weight: 900; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.7fr); gap: 24px; align-items: start; }
.stack { display: grid; gap: 20px; }
.card { padding: 22px; border: 1px solid #33288c0c; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); }
.card h2, .card h3 { margin-top: 0; }
.hero-card { color: white; background: linear-gradient(135deg, var(--indigo), var(--purple)); }
.hero-card p { color: #e9e7ff; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { padding: 16px; border-radius: 18px; background: #f5f3ff; }
.stat strong { display: block; color: var(--purple); font-size: 25px; }
.stat span { color: var(--muted); font-size: 12px; font-weight: 700; }
.progress-track { height: 10px; overflow: hidden; border-radius: 99px; background: #e9e9f3; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--turquoise)); }

.exercise-list { display: grid; gap: 13px; }
.exercise-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid #e6e5f3;
  border-radius: 19px;
  padding: 15px;
  color: var(--ink);
  background: white;
  text-align: left;
}
.exercise-card:hover { transform: translateY(-2px); border-color: #bbb4ec; box-shadow: 0 12px 30px #33288c12; }
.exercise-symbol { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: white; background: var(--turquoise); font-size: 24px; }
.exercise-card h3 { margin: 0 0 4px; font-size: 17px; }
.exercise-card p { margin: 0; color: var(--muted); font-size: 13px; }
.chevron { margin-left: auto; color: var(--purple); font-size: 22px; }
.empty-state { padding: 48px 20px; text-align: center; }
.empty-icon { width: 74px; height: 74px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 24px; color: white; background: var(--turquoise); font-size: 36px; }
.empty-state h2 { margin-bottom: 8px; }
.empty-state p { max-width: 480px; margin: 0 auto; color: var(--muted); line-height: 1.55; }

.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.profile-card { border: 1px solid #e4e4f1; border-radius: 22px; padding: 20px; background: white; text-align: left; }
.profile-card:hover { border-color: var(--purple); transform: translateY(-2px); }
.profile-card .avatar { width: 62px; height: 62px; margin-bottom: 14px; font-size: 23px; }
.profile-card h3 { margin: 0 0 5px; }
.profile-card p { margin: 0; color: var(--muted); }

.exercise-page { max-width: 820px; margin: 0 auto; }
.exercise-meta { display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-weight: 750; }
.question-card { margin-top: 18px; padding: clamp(22px, 5vw, 42px); text-align: center; }
.question-card h2 { margin: 15px 0 26px; font-size: clamp(24px, 4vw, 34px); }
.answers { display: grid; gap: 12px; }
.answer { border: 2px solid #e7e6f2; color: var(--ink); background: white; text-align: left; }
.answer:hover:not(:disabled) { border-color: var(--purple); }
.answer.correct { border-color: var(--turquoise); color: #08796f; background: #e9fbf8; }
.answer.wrong { border-color: var(--coral); color: #b73831; background: #fff0ee; }
.feedback { margin-top: 16px; padding: 16px; border-radius: 16px; color: var(--muted); background: #f7f6ff; line-height: 1.5; text-align: left; }
.exercise-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.summary { text-align: center; }
.score-ring { width: 150px; height: 150px; display: grid; place-items: center; margin: 18px auto; border-radius: 50%; color: var(--indigo); background: conic-gradient(var(--turquoise) var(--score), #ececf4 0); }
.score-ring::before { content: ""; grid-area: 1 / 1; width: 116px; height: 116px; border-radius: 50%; background: white; }
.score-ring strong { z-index: 1; grid-area: 1 / 1; font-size: 34px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: #16132d99; backdrop-filter: blur(6px); }
.modal { width: min(100%, 520px); max-height: 90vh; overflow: auto; padding: 25px; border-radius: 25px; background: white; box-shadow: 0 30px 90px #16132d55; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.modal-header h2 { margin: 0; }
.close-button { border: 0; border-radius: 50%; width: 38px; height: 38px; background: #f0eff7; font-size: 20px; }

.toast { position: fixed; z-index: 100; right: 22px; bottom: 22px; max-width: 380px; padding: 14px 18px; border-radius: 15px; color: white; background: var(--ink); box-shadow: var(--shadow); }
.mobile-nav { display: none; }

@media (max-width: 880px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-hero { min-height: 38vh; padding: 40px 26px; }
  .auth-hero .feature-list { display: none; }
  .auth-panel { padding: 25px 20px 45px; }
  .sidebar { display: none; }
  .main-content { margin-left: 0; padding: 22px 18px 100px; }
  .content-grid { grid-template-columns: 1fr; }
  .mobile-nav {
    position: fixed;
    inset: auto 12px 12px;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px;
    border: 1px solid #ffffff70;
    border-radius: 20px;
    background: #292070ee;
    box-shadow: 0 12px 35px #211a5f55;
    backdrop-filter: blur(14px);
  }
  .mobile-nav .nav-button { justify-content: center; padding: 10px 5px; font-size: 11px; }
  .mobile-nav .nav-icon { display: block; width: auto; font-size: 18px; }
  .mobile-nav .nav-label { display: none; }
}

@media (max-width: 560px) {
  .form-row, .stat-grid { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; }
  .profile-pill span { display: none; }
  .exercise-actions { flex-direction: column-reverse; }
}