@charset "UTF-8";
@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";
@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap";

/* src/styles.scss */
:root {
  --ru-color-primary-500: #2F80ED;
  --ru-color-accent-500: #F2C94C;
  --ru-color-success-500: #199f53;
  --ru-color-failure-500: #dc2626;
  --ru-color-orange-500: #f89e35;
  --ru-color-orange-100: #ffddb4;
  --ru-color-primary-800: #1e4d92;
  --ru-color-primary-600: #4175c3;
  --ru-color-primary-100: #EAF3FF;
  --ru-color-bg-top: #EAF3FF;
  --ru-color-bg-bottom: #DCEBFF;
  --ru-color-surface-0: #FFFFFF;
  --ru-color-surface-1: #F7F9FC;
  --ru-color-text-900: #2B2B2B;
  --ru-color-text-600: #6B7280;
  --ru-color-text-white: #FFFFFF;
  --ru-color-border-200: #E5E7EB;
  --ru-color-border-400: #c6c6c6;
  --ru-font-family:
    "Inter",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  --ru-font-family-headline:
    "Space Grotesk",
    system-ui,
    sans-serif;
  --ru-font-size-14: 14px;
  --ru-font-size-16: 16px;
  --ru-font-size-20: 20px;
  --ru-font-size-22: 22px;
  --ru-font-weight-regular: 400;
  --ru-font-weight-medium: 500;
  --ru-font-weight-semibold: 600;
  --ru-line-height-tight: 1.2;
  --ru-line-height-normal: 1.45;
  --ru-space-4: 4px;
  --ru-space-8: 8px;
  --ru-space-12: 12px;
  --ru-space-16: 16px;
  --ru-space-20: 20px;
  --ru-space-24: 24px;
  --ru-space-32: 32px;
  --ru-radius-8: 8px;
  --ru-radius-14: 14px;
  --ru-radius-16: 16px;
  --ru-radius-20: 20px;
  --ru-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.10);
  --ru-shadow-float: 0 10px 24px rgba(0, 0, 0, 0.12);
  --ru-button-height: 48px;
  --ru-button-large-height: 60px;
  --ru-bottomnav-height: 72px;
  --ru-topbar-height: 64px;
  --ru-duration-fast: 150ms;
  --ru-duration-normal: 200ms;
  --ru-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ru-focus-ring: 0 0 0 3px rgba(47, 128, 237, 0.25);
  --ru-focus-ring: 0 0 0 3px rgba(47, 128, 237, 0.25);
  --ru-breakpoint-xs: 360px;
  --ru-breakpoint-sm: 480px;
  --ru-breakpoint-md: 768px;
  --ru-breakpoint-lg: 1024px;
  --ru-breakpoint-xl: 1280px;
  --ru-breakpoint-xxl: 1440px;
}
.btn-primary,
.modal button,
.idle-modal button {
  height: var(--ru-button-height);
  padding: 0 var(--ru-space-24);
  background-color: var(--ru-color-primary-500);
  color: #fff;
  border-radius: var(--ru-radius-14);
  font-weight: var(--ru-font-weight-semibold);
  font-size: var(--ru-font-size-16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ru-space-8);
  box-shadow: 0 4px 0 var(--ru-color-primary-600);
  transform: translateY(0);
}
.btn-primary:active:not(:disabled),
.modal button:active:not(:disabled),
.idle-modal button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ru-color-primary-600);
}
.btn-primary:hover:not(:disabled),
.modal button:hover:not(:disabled),
.idle-modal button:hover:not(:disabled) {
  background-color: var(--ru-color-primary-600);
}
.btn-outline {
  height: var(--ru-button-height);
  padding: 0 var(--ru-space-24);
  background-color: transparent;
  color: var(--ru-color-primary-500);
  border: 2px solid var(--ru-color-primary-500);
  border-radius: var(--ru-radius-14);
  font-weight: var(--ru-font-weight-semibold);
  font-size: var(--ru-font-size-16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ru-space-8);
}
.btn-outline:active:not(:disabled) {
  background-color: var(--ru-color-primary-100);
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
body,
html {
  margin: 0;
  padding: 0;
  height: 100vh;
  font-family: var(--ru-font-family);
  font-size: var(--ru-font-size-16);
  color: var(--ru-color-text-900);
  overflow: hidden;
}
body {
  background: var(--ru-color-primary-500) url(/assets/images/start_background.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}
body.bonus-mode::after,
body.exam-mode::after,
body.burn-mode::after,
body.repetition-mode::after,
body.training-mode::after {
  content: "";
  position: fixed;
  inset: 0;
  mix-blend-mode: color;
  pointer-events: none;
  z-index: -1;
}
body.repetition-mode::after {
  background: rgb(212, 175, 55);
}
body.bonus-mode::after {
  background: rgb(97, 13, 117);
}
body.exam-mode::after {
  background: rgba(97, 13, 117, 0.7);
}
body.training-mode::after {
  background: rgb(0, 131, 143);
}
body.burn-mode::after {
  background: rgb(255, 255, 255);
}
@supports (height: 100dvh) {
  body,
  html {
    height: 100dvh;
  }
}
h1,
h2,
h3,
h4 {
  font-family: var(--ru-font-family-headline);
  margin-top: 0;
  color: var(--ru-color-text-900);
  font-weight: 600;
  letter-spacing: 0.2px;
}
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  transition: all var(--ru-duration-fast) var(--ru-ease-standard);
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
a {
  text-decoration: none;
  color: inherit;
}
select {
  font-size: var(--ru-font-size-16);
}
.card {
  border-radius: var(--ru-radius-16);
  padding: var(--ru-space-20);
  box-shadow: var(--ru-shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--ru-space-8);
  margin-bottom: var(--ru-space-16);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.85),
      rgba(255, 255, 255, 0.6)),
    linear-gradient(
      180deg,
      #f4f8ff,
      rgba(255, 255, 255, 0.6));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.card h2,
.card h3 {
  margin: 0;
  text-align: center;
  font-size: var(--ru-font-size-20);
}
.card p {
  margin: 0;
  line-height: var(--ru-line-height-normal);
}
.outline-text {
  text-shadow:
    -1px -1px 0 #333,
    1px -1px 0 #333,
    -1px 1px 0 #333,
    1px 1px 0 #333;
}
.modal-backdrop,
.idle-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--ru-space-24);
}
.modal-backdrop.modal-backdrop-dark,
.idle-backdrop.modal-backdrop-dark {
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.modal,
.idle-modal {
  background: #fff;
  border-radius: var(--ru-radius-20);
  padding: var(--ru-space-32);
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: var(--ru-space-20);
  text-align: center;
  box-shadow: var(--ru-shadow-float);
  animation: modalIn var(--ru-duration-normal) var(--ru-ease-standard);
}
.modal.modal-large,
.idle-modal.modal-large {
  max-width: 560px;
}
.modal .actions,
.idle-modal .actions {
  display: flex;
  gap: var(--ru-space-8);
  justify-content: center;
  flex-direction: column;
}
.modal button,
.idle-modal button {
  width: 100%;
}
.modal h3,
.modal p,
.idle-modal h3,
.idle-modal p {
  margin: 0;
  padding: 0;
  line-height: 1.5em;
}
@keyframes modalIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
details,
.text-area {
  background: var(--ru-color-surface-1);
  border: 1px solid var(--ru-color-border-200);
  border-radius: var(--ru-radius-14);
  padding: var(--ru-space-16);
  margin-bottom: var(--ru-space-24);
  transition: all var(--ru-duration-fast);
}
details summary,
details header,
.text-area summary,
.text-area header {
  text-align: center;
  font-weight: var(--ru-font-weight-semibold);
  color: var(--ru-color-primary-500);
  text-align: center;
  list-style: none;
}
details summary::-webkit-details-marker,
details header::-webkit-details-marker,
.text-area summary::-webkit-details-marker,
.text-area header::-webkit-details-marker {
  display: none;
}
details summary,
.text-area summary {
  cursor: pointer;
}
details p,
.text-area p {
  padding-top: var(--ru-space-8);
  margin-bottom: 0;
  text-align: center;
  font-size: var(--ru-font-size-16);
  animation: fadeIn var(--ru-duration-normal);
}
details[open],
.text-area[open] {
  background: #fff;
  border-color: var(--ru-color-primary-500);
}
details.text-area,
.text-area.text-area {
  background: #fff;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* angular:styles/global:styles */