/* !========== Переменные (меняй цвета здесь) ========== */
:root {
   --purple-900: #1e0f2e;
   --purple-800: #2d1245;
   --purple-700: #4a1a73;
   --purple-600: #6a1b9a;
   --purple-400: #9c27c4;
   --white: #ffffff;
   --white-soft: rgba(255, 255, 255, 0.72);
   --line: rgba(255, 255, 255, 0.2);
   --glass: rgba(255, 255, 255, 0.06);

   --font: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
   --header-h: 88px;
}

/* !========== База ========== */
*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: var(--header-h);
}

body {
   margin: 0;
   font-family: var(--font);
   font-weight: 400;
   line-height: 1.6;
   color: var(--white);
   background:
      radial-gradient(ellipse at 15% 0%, var(--purple-800) 0%, transparent 55%),
      radial-gradient(
         ellipse at 100% 100%,
         var(--purple-400) 0%,
         transparent 45%
      ),
      linear-gradient(160deg, var(--purple-900) 0%, var(--purple-700) 100%);
   background-attachment: fixed;
   min-height: 100vh;
}

a {
   color: inherit;
   text-decoration: none;
}

:focus-visible {
   outline: 3px solid var(--white);
   outline-offset: 3px;
   border-radius: 6px;
}

/* !========== Шапка ========== */
.header {
   position: absolute;
   inset: 0 0 auto 0;
   z-index: 10;
   height: var(--header-h);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 0 clamp(20px, 7vw, 120px);
}

.logo {
   font-weight: 800;
   font-size: 1.15rem;
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

.nav {
   display: flex;
   gap: clamp(20px, 3vw, 48px);
   margin-left: auto;
}

.nav a {
   font-weight: 700;
   font-size: 0.95rem;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   padding: 6px 0;
   border-bottom: 2px solid transparent;
   transition: border-color 0.2s;
}

.nav a:hover {
   border-bottom-color: var(--white);
}

/* !========== Главный экран ========== */
.hero {
   position: relative;
   min-height: 100vh;
   display: grid;
   place-items: center;
   padding: calc(var(--header-h) + 24px) 24px 160px;
   text-align: center;
   overflow: hidden;
}

/* !Крупное «пятно» справа сверху, как на референсе */
.hero::before {
   content: '';
   position: absolute;
   top: 12%;
   right: -12%;
   width: min(48vw, 640px);
   aspect-ratio: 1;
   background: linear-gradient(
      145deg,
      rgba(156, 39, 196, 0.1),
      rgba(180, 60, 220, 0.35)
   );
   border-radius: 62% 38% 45% 55% / 48% 56% 44% 52%;
   pointer-events: none;
}

.hero__content {
   position: relative;
   z-index: 1;
   max-width: 920px;
}

.hero__title {
   margin: 0;
   font-weight: 800;
   font-size: clamp(2.4rem, 8vw, 5.2rem);
   line-height: 1.05;
   letter-spacing: 0.14em;
   text-transform: uppercase;
}

.hero__subtitle {
   margin: 12px 0 28px;
   font-weight: 300;
   font-size: clamp(1.2rem, 4.2vw, 2.8rem);
   letter-spacing: 0.4em;
   text-transform: uppercase;
}

.hero__text {
   max-width: 640px;
   margin: 0 auto 40px;
   font-weight: 300;
   font-size: 0.95rem;
   letter-spacing: 0.06em;
   color: var(--white-soft);
}

.hero__waves {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: clamp(160px, 28vh, 320px);
   pointer-events: none;
}

/* !========== Кнопка ========== */
.btn {
   display: inline-block;
   padding: 14px 44px;
   font-weight: 700;
   font-size: 1rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   border: 3px solid var(--white);
   border-radius: 20px;
   transition:
      background 0.2s,
      color 0.2s;
}

.btn:hover {
   background: var(--white);
   color: var(--purple-700);
}

/* !========== Секции ========== */
.section {
   max-width: 1100px;
   margin: 0 auto;
   padding: 96px 24px;
}

.section__title {
   margin: 0 0 12px;
   font-weight: 800;
   font-size: clamp(1.8rem, 4vw, 2.6rem);
   letter-spacing: 0.12em;
   text-transform: uppercase;
}

.section__lead,
.section__text {
   max-width: 62ch;
   margin: 0 0 40px;
   font-weight: 300;
   color: var(--white-soft);
}

/* !========== Карточки заданий ========== */
.grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: 24px;
}

.card {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 28px;
   background: var(--glass);
   border: 1px solid var(--line);
   border-radius: 20px;
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   transition:
      border-color 0.2s,
      background 0.2s;
}

.card:hover {
   border-color: var(--white);
   background: rgba(255, 255, 255, 0.12);
}

.card__subject {
   font-weight: 500;
   font-size: 0.8rem;
   color: #e3b4f5;
}

.card__title {
   margin: 0;
   font-weight: 700;
   font-size: 1.15rem;
   line-height: 1.3;
}

.card__text {
   margin: 0;
   font-weight: 300;
   font-size: 0.92rem;
   color: var(--white-soft);
}

/* !Пустое описание (нет ни в JSON, ни в README) не занимает место в карточке */
.card__text:empty {
   display: none;
}

/* !Описание подгружается из README: курсив, приглушение и иконка.
   !Анимация отключается общим правилом prefers-reduced-motion ниже по файлу */
.card--loading .card__text {
   font-style: italic;
   opacity: 0.65;
   animation: card-text-pulse 1.2s ease-in-out infinite;
}

.card--loading .card__text:not(:empty)::after {
   content: ' 🔄';
}

@keyframes card-text-pulse {
   50% {
      opacity: 0.35;
   }
}

.card__meta {
   margin-top: auto;
   padding-top: 14px;
   font-weight: 500;
   font-size: 0.82rem;
   color: var(--white-soft);
}

/* !========== Подвал ========== */
.footer {
   padding: 56px 24px 48px;
   text-align: center;
}

.socials {
   display: flex;
   justify-content: center;
   gap: 14px;
}

.socials a {
   display: grid;
   place-items: center;
   width: 44px;
   height: 44px;
   background: var(--white);
   border-radius: 50%;
   transition: transform 0.2s;
}

.socials a:hover {
   transform: translateY(-3px);
}

/* !Иконки линейные (stroke), а не заливка */
.socials svg {
   width: 22px;
   height: 22px;
   fill: none;
   stroke: var(--purple-700);
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.footer__note {
   margin: 24px 0 0;
   font-size: 0.85rem;
   color: var(--white-soft);
}

/* !========== Мобильная версия ========== */
@media (max-width: 760px) {
   .header > .nav {
      display: none;
   }

   .header__actions {
      margin-left: auto;
   }

   .hero__subtitle {
      letter-spacing: 0.22em;
   }
}

/* !Уважаем настройки «уменьшить анимацию» */
@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

   * {
      transition: none !important;
      animation: none !important;
   }
}

/* !==========================================================
   Страница задания (tasks/lab-XX/index.html)
   ========================================================== */
.page-head {
   max-width: 1100px;
   margin: 0 auto;
   padding: calc(var(--header-h) + 48px) 24px 0;
}

.back {
   display: inline-block;
   margin-bottom: 32px;
   font-weight: 500;
   font-size: 0.9rem;
   color: var(--white-soft);
   border-bottom: 1px solid var(--line);
   transition:
      color 0.2s,
      border-color 0.2s;
}

.back:hover {
   color: var(--white);
   border-color: var(--white);
}

.page-head__subject {
   margin: 0 0 8px;
   font-weight: 500;
   color: #e3b4f5;
}

.page-head__title {
   margin: 0 0 20px;
   font-weight: 800;
   font-size: clamp(1.8rem, 5vw, 3.2rem);
   line-height: 1.1;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.page-head__meta {
   display: flex;
   flex-wrap: wrap;
   gap: 12px 32px;
   margin: 0;
   padding: 0;
   list-style: none;
   font-size: 0.9rem;
   color: var(--white-soft);
}

.page-head__meta strong {
   font-weight: 700;
   color: var(--white);
}

.section--tight {
   padding-top: 56px;
   padding-bottom: 0;
}

.section--last {
   padding-bottom: 96px;
}

.h3-line {
   margin: 0 0 20px;
   font-weight: 700;
   font-size: 1.2rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}

/* !----- Список файлов ----- */
.file-list {
   display: grid;
   gap: 12px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.file {
   display: grid;
   grid-template-columns: 56px 1fr auto;
   align-items: center;
   gap: 18px;
   padding: 16px 20px;
   background: var(--glass);
   border: 1px solid var(--line);
   border-radius: 16px;
   transition:
      border-color 0.2s,
      background 0.2s;
}

.file:hover {
   border-color: var(--white);
   background: rgba(255, 255, 255, 0.12);
}

.file__badge {
   display: grid;
   place-items: center;
   width: 56px;
   height: 56px;
   font-weight: 800;
   font-size: 0.78rem;
   letter-spacing: 0.04em;
   color: var(--purple-700);
   background: var(--white);
   border-radius: 14px;
}

/* !Папка-проект выделена другим цветом: она открывается, а не скачивается */
.file__badge--folder {
   color: var(--white);
   background: linear-gradient(145deg, var(--purple-400), var(--purple-600));
   border: 2px solid var(--white);
}

.file__name {
   display: block;
   font-weight: 700;
   line-height: 1.3;
   overflow-wrap: anywhere;
}

.file__desc {
   display: block;
   margin-top: 2px;
   font-weight: 300;
   font-size: 0.88rem;
   color: var(--white-soft);
}

.file__action {
   font-weight: 700;
   font-size: 0.82rem;
   text-align: right;
   white-space: nowrap;
}

.file__size {
   display: block;
   font-weight: 300;
   color: var(--white-soft);
}

/* !----- Блок с командами ----- */
.code {
   margin: 0;
   padding: 20px 24px;
   overflow-x: auto;
   font-family: 'Consolas', 'SFMono-Regular', 'Menlo', monospace;
   font-size: 0.9rem;
   line-height: 1.7;
   background: rgba(15, 5, 25, 0.55);
   border: 1px solid var(--line);
   border-radius: 16px;
}

@media (max-width: 560px) {
   .file {
      grid-template-columns: 48px 1fr;
      gap: 14px;
   }

   .file__badge {
      width: 48px;
      height: 48px;
   }

   .file__action {
      grid-column: 2;
      text-align: left;
   }
}

/* !==========================================================
   Динамические блоки: предметы, лабораторные, проект
   (добавлено в стиле основного файла)
   ========================================================== */
.logo span {
   color: #e3b4f5;
}

.hint,
.empty,
.notice {
   margin: 0;
   font-weight: 300;
   color: var(--white-soft);
}

.notice {
   margin-bottom: 12px;
}

.notice--error {
   font-weight: 700;
   color: #ffb4c0;
}

.text-link {
   font-weight: 500;
   border-bottom: 1px solid var(--line);
}

.text-link:hover {
   border-color: var(--white);
}

/* !----- Статусы ----- */
.badge {
   display: inline-block;
   padding: 2px 12px;
   font-weight: 700;
   font-size: 0.75rem;
   letter-spacing: 0.04em;
   border: 1px solid currentColor;
   border-radius: 999px;
}

.badge--done {
   color: #9be8c0;
}
.badge--progress {
   color: #ffd98a;
}
.badge--todo {
   color: var(--white-soft);
}
.badge--idea {
   color: #f0b8ff;
}

/* !----- Предметы (раскрывающиеся блоки) ----- */
.subjects {
   display: grid;
   gap: 16px;
}

.subject {
   background: var(--glass);
   border: 1px solid var(--line);
   border-radius: 20px;
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   transition: border-color 0.2s;
}

.subject:hover,
.subject[open] {
   border-color: var(--white);
}

.subject__summary {
   position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 4px 20px;
   padding: 22px 64px 22px 28px;
   cursor: pointer;
   list-style: none;
}

.subject__summary::-webkit-details-marker {
   display: none;
}

.subject__summary::after {
   content: '';
   position: absolute;
   right: 28px;
   top: 50%;
   width: 10px;
   height: 10px;
   border-right: 3px solid var(--white);
   border-bottom: 3px solid var(--white);
   transform: translateY(-70%) rotate(45deg);
   transition: transform 0.2s;
}

.subject[open] > .subject__summary::after {
   transform: translateY(-30%) rotate(-135deg);
}

.subject__title {
   flex: 1 1 280px;
   font-weight: 700;
   font-size: 1.1rem;
   line-height: 1.3;
}

.subject__count {
   font-weight: 500;
   font-size: 0.85rem;
   color: var(--white-soft);
}

.subject__content {
   padding: 0 28px 28px;
}

.subject .card {
   background: rgba(255, 255, 255, 0.08);
}

.subject .card:hover {
   background: rgba(255, 255, 255, 0.14);
}

.card__meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px 14px;
}

/* !----- Главный проект ----- */
.life-card {
   position: relative;
   display: block;
   overflow: hidden;
   padding: clamp(28px, 6vw, 64px);
   border: 3px solid var(--white);
   border-radius: 28px;
   background:
      radial-gradient(
         circle at 90% 10%,
         rgba(180, 60, 220, 0.55),
         transparent 55%
      ),
      linear-gradient(145deg, var(--purple-800), var(--purple-600));
}

a.life-card:hover {
   box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}

.life-card__status {
   display: block;
   margin-bottom: 20px;
}

.life-card__title {
   max-width: 22ch;
   margin: 0;
   font-weight: 800;
   font-size: clamp(1.6rem, 4.5vw, 2.8rem);
   line-height: 1.1;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}

.life-card__text {
   max-width: 56ch;
   margin: 20px 0 0;
   font-weight: 300;
   font-size: 1.05rem;
   color: var(--white-soft);
}

/* !----- Страница лабораторной: код ----- */
.page-head__text {
   max-width: 62ch;
   margin: 0 0 20px;
   font-weight: 300;
   font-size: 1.05rem;
   color: var(--white-soft);
}

/* !----- Страница лабораторной: скриншоты ----- */
.gallery {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
   gap: 12px;
}

.shot {
   padding: 0;
   overflow: hidden;
   background: var(--glass);
   border: 1px solid var(--line);
   border-radius: 16px;
   cursor: zoom-in;
   transition: border-color 0.2s;
}

.shot:hover {
   border-color: var(--white);
}

.shot img {
   display: block;
   width: 100%;
   height: 96px;
   object-fit: cover;
}

.lightbox {
   max-width: min(94vw, 1100px);
   padding: 20px;
   color: var(--white);
   background: var(--purple-900);
   border: 1px solid var(--line);
   border-radius: 20px;
}

.lightbox::backdrop {
   background: rgba(15, 5, 25, 0.85);
}

.lightbox img {
   display: block;
   max-width: 100%;
   max-height: 76vh;
   margin: 0 auto 16px;
   border-radius: 12px;
}

.lightbox .btn {
   padding: 10px 28px;
   font-family: inherit;
   color: var(--white);
   background: transparent;
   cursor: pointer;
}

.lightbox .btn:hover {
   color: var(--purple-700);
   background: var(--white);
}

/* !==========================================================
   Тёмная тема (переключатель в шапке, js/theme.js)
   ========================================================== */
[data-theme='dark'] body {
   background:
      radial-gradient(ellipse at 15% 0%, #0a0512 0%, transparent 55%),
      radial-gradient(ellipse at 100% 100%, #1a0933 0%, transparent 45%),
      linear-gradient(160deg, #000000 0%, #0a0512 100%);
   background-attachment: fixed;
}

[data-theme='dark'] .card,
[data-theme='dark'] .subject,
[data-theme='dark'] .shot {
   background: rgba(255, 255, 255, 0.03);
   border-color: rgba(255, 255, 255, 0.15);
}

[data-theme='dark'] .subject .card {
   background: rgba(255, 255, 255, 0.05);
}

[data-theme='dark'] .card:hover,
[data-theme='dark'] .subject:hover,
[data-theme='dark'] .subject[open],
[data-theme='dark'] .shot:hover {
   border-color: var(--white);
}

[data-theme='dark'] .life-card {
   background:
      radial-gradient(
         circle at 90% 10%,
         rgba(120, 30, 160, 0.45),
         transparent 55%
      ),
      linear-gradient(145deg, #12081c, #3a1459);
}

/* !Длительность плавного перехода между темами (см. switchTheme в js/theme.js) */
::view-transition-old(root),
::view-transition-new(root) {
   animation-duration: 0.45s;
   animation-timing-function: ease;
}

.theme-toggle {
   display: grid;
   place-items: center;
   width: 44px;
   height: 44px;
   padding: 0;
   font-size: 1.2rem;
   line-height: 1;
   color: var(--white);
   background: var(--glass);
   border: 1px solid var(--line);
   border-radius: 50%;
   cursor: pointer;
   transition:
      background 0.2s,
      border-color 0.2s,
      transform 0.2s;
}

.theme-toggle:hover {
   background: rgba(255, 255, 255, 0.12);
   border-color: var(--white);
   transform: scale(1.05);
}

/* !==========================================================
   Шапка: блок действий и мобильное меню на <details>
   ========================================================== */
.header__actions {
   display: flex;
   align-items: center;
   gap: 12px;
}

.mobile-menu {
   display: none;
} /* !на десктопе скрыто */

.mobile-menu__summary {
   display: grid;
   place-items: center;
   width: 44px;
   height: 44px;
   font-size: 1.4rem;
   line-height: 1;
   list-style: none;
   cursor: pointer;
   background: var(--glass);
   border: 1px solid var(--line);
   border-radius: 50%;
}

.mobile-menu__summary::-webkit-details-marker {
   display: none;
}
.mobile-menu__summary::before {
   content: '☰';
}
.mobile-menu[open] > .mobile-menu__summary::before {
   content: '✕';
}

/* !Панель позиционируется относительно .header (details сам не positioned) */
.mobile-menu__nav {
   position: absolute;
   top: var(--header-h);
   left: 16px;
   right: 16px;
   display: flex;
   flex-direction: column;
   gap: 4px;
   padding: 12px 24px;
   background: rgba(30, 15, 46, 0.96);
   border: 1px solid var(--line);
   border-radius: 20px;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
}

.mobile-menu[open] .mobile-menu__nav {
   animation: slide-down 0.2s ease-out;
}

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

.mobile-menu__nav a {
   padding: 12px 0;
   font-weight: 700;
   font-size: 0.95rem;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   border-bottom: 1px solid var(--line);
}

.mobile-menu__nav a:last-child {
   border-bottom: 0;
}

@media (max-width: 760px) {
   .mobile-menu {
      display: block;
   }
}

/* !==========================================================
   Поиск, теги, прогресс (index.html)
   ========================================================== */
.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
   border: 0;
}

.toolbar {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-bottom: 16px;
}

.search {
   flex: 1 1 260px;
   min-height: 48px;
   padding: 0 20px;
   font: inherit;
   color: var(--white);
   background: var(--glass);
   border: 1px solid var(--line);
   border-radius: 999px;
}

.search::placeholder {
   color: var(--white-soft);
}
.search:hover,
.search:focus {
   border-color: var(--white);
}

.filters-reset {
   min-height: 48px;
   padding: 0 22px;
   font: inherit;
   font-weight: 700;
   color: var(--white);
   background: transparent;
   border: 1px solid var(--line);
   border-radius: 999px;
   cursor: pointer;
   transition:
      background 0.2s,
      border-color 0.2s;
}

.filters-reset:hover {
   background: rgba(255, 255, 255, 0.12);
   border-color: var(--white);
}

.tag-filters {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 12px;
}

.tag-pill {
   padding: 6px 16px;
   font: inherit;
   font-weight: 500;
   font-size: 0.85rem;
   color: var(--white);
   background: var(--glass);
   border: 1px solid var(--line);
   border-radius: 999px;
   cursor: pointer;
   transition:
      background 0.2s,
      border-color 0.2s;
}

.tag-pill:hover {
   background: rgba(255, 255, 255, 0.12);
}

.tag-pill[aria-pressed='true'] {
   background: var(--purple-400);
   border-color: var(--white);
}

.results-count {
   min-height: 1.6em;
   margin: 0 0 16px;
   font-size: 0.9rem;
   color: var(--white-soft);
}

/* !Прогресс-бар в заголовке предмета: отдельной строкой под названием */
.progress {
   flex: 1 1 100%;
   display: flex;
   align-items: center;
   gap: 12px;
}

.progress__track {
   flex: 1;
   height: 8px;
   overflow: hidden;
   background: rgba(255, 255, 255, 0.14);
   border-radius: 999px;
}

.progress__bar {
   display: block;
   height: 100%;
   background: linear-gradient(90deg, var(--purple-600), #d58bf0);
   border-radius: inherit;
   transition: width 0.3s ease;
}

.progress__text {
   min-width: 4ch;
   font-weight: 500;
   font-size: 0.8rem;
   color: var(--white-soft);
   text-align: right;
}

/* !Теги внутри карточки лабораторной */
.card__tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}

.card__tag {
   padding: 1px 10px;
   font-weight: 500;
   font-size: 0.75rem;
   color: var(--white-soft);
   border: 1px solid var(--line);
   border-radius: 999px;
}

/* !==========================================================
   Страница лабораторной (lab.html + js/lab.js)
   ========================================================== */
.breadcrumbs {
   margin-bottom: 32px;
}

.breadcrumbs__list {
   display: flex;
   flex-wrap: wrap;
   gap: 4px 10px;
   margin: 0;
   padding: 0;
   list-style: none;
   font-weight: 500;
   font-size: 0.9rem;
   color: var(--white-soft);
}

.breadcrumbs__item + .breadcrumbs__item::before {
   content: '›';
   margin-right: 10px;
   color: var(--line);
}

.breadcrumbs__link {
   border-bottom: 1px solid var(--line);
}
.breadcrumbs__link:hover {
   color: var(--white);
   border-color: var(--white);
}
.breadcrumbs__item [aria-current='page'] {
   color: var(--white);
}

.lab-head,
.lab-section {
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 24px;
}

.lab-head__subject {
   margin: 0 0 8px;
   font-weight: 500;
   color: #e3b4f5;
}

.lab-head__title {
   margin: 0 0 20px;
   font-weight: 800;
   font-size: clamp(1.8rem, 5vw, 3.2rem);
   line-height: 1.1;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.lab-head__text {
   max-width: 62ch;
   margin: 0 0 20px;
   font-weight: 300;
   font-size: 1.05rem;
   color: var(--white-soft);
}

.lab-card__meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px 14px;
   margin: 0;
   font-weight: 500;
   font-size: 0.85rem;
   color: var(--white-soft);
}

.lab-section {
   padding-top: 48px;
}
.lab-section:last-child {
   padding-bottom: 96px;
}

.lab-section__title {
   margin: 0 0 20px;
   font-weight: 700;
   font-size: 1.2rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}

.lab-section .hint {
   margin-bottom: 16px;
}

.file-button {
   display: inline-block;
   padding: 10px 28px;
   font: inherit;
   font-weight: 700;
   color: var(--white);
   background: transparent;
   border: 2px solid var(--white);
   border-radius: 16px;
   cursor: pointer;
   transition:
      background 0.2s,
      color 0.2s;
}

.file-button:hover {
   color: var(--purple-700);
   background: var(--white);
}

/* !==========================================================
   Печать: только заголовок, описание и код, открытый в просмотрщике.
   !important здесь оправдан: нужно гарантированно перебить экранные стили.
   Перед печатью открой нужный файл в дереве: печатается тот файл, что виден на странице.
   ========================================================== */
@media print {
   .header,
   .footer,
   .breadcrumbs,
   .lab-sidebar,
   .downloads,
   .file-grid,
   .explorer__path,
   .lab-panel--screenshots,
   .file-button,
   .text-link,
   .hint {
      display: none !important;
   }

   body {
      background: #fff !important;
      color: #000 !important;
      min-height: 0;
   }

   .page-head {
      padding-top: 0;
   }

   .lab-head,
   .lab-section {
      max-width: none;
      padding-left: 0;
      padding-right: 0;
   }

   .lab-head *,
   .lab-section * {
      color: #000 !important;
      background: transparent !important;
      border-color: #999 !important;
      text-shadow: none !important;
   }

   .lab-layout {
      display: block;
   }

   .code-viewer {
      break-inside: avoid;
   }

   .code-viewer .code {
      max-height: none;
      overflow: visible;
      white-space: pre-wrap;
   }
}

/* !==========================================================
   Страница лабораторной: проводник (дерево слева, содержимое справа)
   ========================================================== */
.lab-layout {
   display: grid;
   grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
   gap: 20px;
   align-items: start;
}

.lab-layout--single {
   grid-template-columns: minmax(0, 1fr);
}

.lab-main {
   display: grid;
   gap: 16px;
   min-width: 0;
}

/* !Панели в стиле «стекло»: общий вид для кода, скриншотов и дерева */
.lab-panel,
.lab-sidebar {
   background: linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.02)
   );
   border: 1px solid var(--line);
   border-radius: 20px;
}

.lab-panel {
   display: grid;
   gap: 14px;
   padding: clamp(16px, 3vw, 22px);
}

.lab-panel__title {
   margin: 0;
   font-weight: 700;
   font-size: clamp(1.1rem, 2.6vw, 1.35rem);
   line-height: 1.2;
}

.lab-panel .hint,
.lab-panel .empty {
   margin: 0;
   font-size: 0.9rem;
}

/* !---------- Скачивание: отчёт и архив ---------- */
.downloads {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
   gap: 12px;
}

.downloads .file {
   grid-template-columns: 48px 1fr auto;
   gap: 14px;
   padding: 12px 16px;
}

.downloads .file__badge {
   width: 48px;
   height: 48px;
   font-size: 0.8rem;
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.file__badge--word {
   font-size: 1.5rem;
   color: var(--white);
   background: linear-gradient(145deg, #3b82f6, #1d4ed8);
}

.file__badge--pdf {
   color: var(--white);
   background: linear-gradient(145deg, #ef5350, #b71c1c);
}

.file__badge--zip {
   color: var(--white);
   background: linear-gradient(145deg, #d9a84e, #a4732b);
}

.file__meta {
   display: block;
   margin-top: 4px;
   font-weight: 700;
   font-size: 0.7rem;
   letter-spacing: 0.04em;
   color: #e3b4f5;
}

/* !---------- Иконки (SVG из js/lab.js) ---------- */
.icon {
   display: inline-flex;
   flex: none;
   width: 16px;
   height: 16px;
}

.icon svg {
   width: 100%;
   height: 100%;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.8;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.icon--folder svg {
   fill: rgba(232, 184, 74, 0.25);
}

.icon--chevron {
   width: 12px;
   height: 12px;
   color: var(--white-soft);
   transition: transform 0.15s;
}

.tone--folder {
   color: #e8b84a;
}
.tone--sql {
   color: #b9a4ff;
}
.tone--script {
   color: #6ee7b7;
}
.tone--web {
   color: #fdba74;
}
.tone--text {
   color: #cbd5e1;
}
.tone--doc {
   color: #8fbcff;
}
.tone--archive {
   color: #e6bb64;
}
.tone--image {
   color: #f9a8d4;
}
.tone--file {
   color: var(--white-soft);
}

/* !---------- Дерево слева ---------- */
.lab-sidebar {
   position: sticky;
   top: 16px;
   display: grid;
   gap: 8px;
   max-height: calc(100vh - 32px);
   padding: 16px 10px 10px;
   overflow: auto;
}

.lab-sidebar__title {
   margin: 0 8px;
   font-weight: 700;
   font-size: 0.72rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--white-soft);
}

.tree__list {
   margin: 0;
   padding: 0;
   list-style: none;
}

/* !Линии вложенности: вертикальная линия у списка и короткая горизонтальная у каждого пункта */
.tree__list .tree__list {
   margin-left: 15px;
   padding-left: 9px;
   border-left: 1px solid var(--line);
}

.tree__list .tree__list > li {
   position: relative;
}

.tree__list .tree__list > li::before {
   content: '';
   position: absolute;
   top: 17px;
   left: -9px;
   width: 9px;
   border-top: 1px solid var(--line);
}

.tree__row {
   display: flex;
   align-items: center;
   gap: 8px;
   width: 100%;
   min-height: 34px;
   padding: 6px 8px;
   font: inherit;
   font-weight: 500;
   font-size: 0.88rem;
   line-height: 1.3;
   color: var(--white);
   text-align: left;
   background: transparent;
   border: 0;
   border-radius: 8px;
   cursor: pointer;
   overflow-wrap: anywhere;
}

.tree__row:hover {
   background: rgba(255, 255, 255, 0.08);
}

.tree__row[aria-current='true'] {
   background: rgba(255, 255, 255, 0.16);
}

summary.tree__row {
   list-style: none;
}

summary.tree__row::-webkit-details-marker {
   display: none;
}

.tree__folder[open] > summary .icon--chevron {
   transform: rotate(90deg);
}

/* !---------- Содержимое справа: путь и карточки файлов ---------- */
.explorer__path {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 2px 6px;
   font-weight: 500;
   font-size: 0.85rem;
   color: var(--white-soft);
}

.crumb + .crumb::before {
   content: '/';
   margin-right: 6px;
   color: var(--line);
}

.crumb button {
   padding: 2px 0;
   font: inherit;
   color: inherit;
   background: none;
   border: 0;
   border-bottom: 1px solid var(--line);
   cursor: pointer;
}

.crumb button:hover {
   color: var(--white);
   border-color: var(--white);
}

.crumb [aria-current='location'] {
   color: var(--white);
}

.file-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
   gap: 10px;
}

.item {
   display: grid;
   grid-template-columns: 40px minmax(0, 1fr);
   align-items: center;
   gap: 12px;
   width: 100%;
   padding: 10px 12px;
   font: inherit;
   color: var(--white);
   text-align: left;
   background: var(--glass);
   border: 1px solid var(--line);
   border-radius: 14px;
   cursor: pointer;
   transition:
      border-color 0.2s,
      background 0.2s;
}

.item:hover,
.item[aria-current='true'] {
   border-color: var(--white);
   background: rgba(255, 255, 255, 0.12);
}

.item__badge {
   display: grid;
   place-items: center;
   width: 40px;
   height: 40px;
   border-radius: 11px;
}

.item__badge .icon {
   width: 22px;
   height: 22px;
   color: var(--white);
}

.item__badge--folder {
   background: linear-gradient(145deg, #f0c35c, #c48a1f);
}
.item__badge--sql {
   background: linear-gradient(145deg, #8b6cff, #5a35c9);
}
.item__badge--script {
   background: linear-gradient(145deg, #34c995, #1b7a5b);
}
.item__badge--web {
   background: linear-gradient(145deg, #fb923c, #c2410c);
}
.item__badge--text {
   background: linear-gradient(145deg, #64748b, #3b4658);
}
.item__badge--doc {
   background: linear-gradient(145deg, #3b82f6, #1d4ed8);
}
.item__badge--archive {
   background: linear-gradient(145deg, #d9a84e, #a4732b);
}
.item__badge--image {
   background: linear-gradient(145deg, #ec6fa8, #a62a67);
}
.item__badge--file {
   background: linear-gradient(145deg, #7b6a94, #4a3d63);
}

.item__name {
   display: block;
   font-weight: 700;
   font-size: 0.92rem;
   line-height: 1.3;
   overflow-wrap: anywhere;
}

.item__meta {
   display: block;
   margin-top: 1px;
   font-weight: 700;
   font-size: 0.66rem;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: #e3b4f5;
}

.item__desc {
   display: block;
   margin-top: 2px;
   font-weight: 300;
   font-size: 0.8rem;
   line-height: 1.4;
   color: var(--white-soft);
}

/* !---------- Просмотр кода ---------- */
.code-viewer {
   display: grid;
   gap: 10px;
}

/* !Без этого правила display: grid перебил бы атрибут hidden */
.code-viewer[hidden] {
   display: none;
}

.code-viewer__head {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 6px 16px;
}

.code-viewer__name {
   font-weight: 700;
   overflow-wrap: anywhere;
}

.code-viewer .code {
   max-height: 28rem;
   white-space: pre;
   tab-size: 4;
}

/* !Тёмная тема для панелей и карточек проводника */
[data-theme='dark'] .lab-panel,
[data-theme='dark'] .lab-sidebar {
   background: rgba(255, 255, 255, 0.03);
   border-color: rgba(255, 255, 255, 0.15);
}

[data-theme='dark'] .item {
   background: rgba(255, 255, 255, 0.04);
   border-color: rgba(255, 255, 255, 0.15);
}

[data-theme='dark'] .item:hover,
[data-theme='dark'] .item[aria-current='true'] {
   border-color: var(--white);
}

/* !---------- Телефон: дерево над карточками, ничего не сжимается ---------- */
@media (max-width: 800px) {
   .lab-layout {
      grid-template-columns: minmax(0, 1fr);
   }

   .lab-sidebar {
      position: static;
      max-height: 18rem;
   }

   .downloads {
      grid-template-columns: minmax(0, 1fr);
   }

   .file-grid {
      grid-template-columns: minmax(0, 1fr);
   }
}

.project-docs {
   margin: 1rem 0 0;
}

.project-docs__link {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
   color: var(--accent, #b9a1ff);
   font-weight: 600;
   text-decoration: none;
   transition:
      color 160ms ease,
      gap 160ms ease;
}

.project-docs__link:hover {
   gap: 0.65rem;
   text-decoration: underline;
}

.project-docs__link:focus-visible {
   outline: 2px solid currentColor;
   outline-offset: 4px;
   border-radius: 3px;
}
/* GitHub Sync Button */
.github-sync {
   background: transparent;
   border: 2px solid var(--primary-purple, #7b2cbf);
   border-radius: 8px;
   padding: 0.5rem;
   cursor: pointer;
   transition:
      background-color 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.25s ease,
      transform 0.25s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 54px;
   height: 54px;
   color: var(--white, #fff);
}

.github-sync:hover {
   background: rgba(156, 39, 196, 0.18);
   border-color: var(--purple-400, #9c27c4);
   box-shadow: 0 0 22px rgba(156, 39, 196, 0.28);
   transform: translateY(-2px);
}

.github-sync:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   transform: none;
}

.github-sync__icon {
   display: grid;
   place-items: center;
   width: 24px;
   height: 24px;
}

.github-sync__icon svg {
   display: block;
   width: 23px;
   height: 23px;
   overflow: visible;
   transition: transform 0.35s ease;
}

.github-sync:hover .github-sync__icon svg {
   transform: rotate(35deg);
}

.github-sync.is-syncing .github-sync__icon svg {
   animation: github-sync-spin 1s linear infinite;
}

@keyframes github-sync-spin {
   to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
   .github-sync,
   .github-sync__icon svg {
      transition: none;
   }

   .github-sync.is-syncing .github-sync__icon svg {
      animation: none;
   }
}

/* GitHub Sync Status */

.github-sync-status {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 16px;
   padding: 12px 16px;
   border: 1px solid rgba(168, 85, 247, 0.3);
   border-radius: 12px;
   background: rgba(22, 28, 54, 0.8);
   color: #d8c5ff;
   font-size: 14px;
   line-height: 1.5;
   transition:
      border-color 0.2s ease,
      background 0.2s ease;
}

.github-sync-status--success,
.github-sync-status-success {
   border-color: rgba(52, 211, 153, 0.3);
   color: #6ee7b7;
}

.github-sync-status--error,
.github-sync-status-error {
   border-color: rgba(248, 113, 113, 0.35);
   color: #fca5a5;
}

.github-sync-status:empty {
   display: none;
}

/* GitHub Labs */
.github-labs {
   margin-top: 1.5rem;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 1rem;
}

.github-lab-card {
   background: var(--card-bg, #16213e);
   border-radius: 12px;
   padding: 1.25rem;
   border: 1px solid transparent;
   transition: all 0.3s ease;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.github-lab-card:hover {
   border-color: var(--accent-purple, #9d4edd);
   transform: translateY(-3px);
   box-shadow: 0 8px 20px rgba(157, 78, 221, 0.2);
}

.github-lab-card__title {
   color: var(--accent-purple, #9d4edd);
   font-weight: 600;
   font-size: 1.1rem;
}

.github-lab-card__desc {
   color: var(--text-main, #e0e0e0);
   font-size: 0.95rem;
   flex: 1;
}

.github-lab-card__date {
   color: var(--text-muted, #a0a0a0);
   font-size: 0.8rem;
}

.github-lab-card__link {
   color: var(--primary-purple, #7b2cbf);
   text-decoration: none;
   font-size: 0.9rem;
   font-weight: 500;
   transition: color 0.2s;
}

.github-lab-card__link:hover {
   color: var(--accent-purple, #9d4edd);
   text-decoration: underline;
}
/* GitHub Sync Status */
.github-sync-status {
   margin-top: 1rem;
   padding: 0.75rem 1rem;
   border-radius: 8px;
   font-size: 0.9rem;
   border-left: 4px solid var(--primary, #7b2cbf);
   background: var(--card-bg, #16213e);
   color: var(--text-muted, #a0a0a0);
}
.github-sync-status:empty {
   display: none;
}
.github-sync-status--success {
   border-left-color: #4ade80;
   color: #4ade80;
}
.github-sync-status--error {
   border-left-color: #f87171;
   color: #f87171;
}
.github-sync-status--info {
   border-left-color: #7b2cbf;
   color: #a0a0a0;
}

/* GitHub Labs Grid */
.github-labs {
   margin-top: 1.5rem;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 1rem;
}

/* Lab Card */
.github-lab-card {
   background: var(--card-bg, #16213e);
   border: 1px solid transparent;
   border-radius: 12px;
   padding: 1.25rem;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   transition: all 0.3s ease;
}
.github-lab-card:hover {
   border-color: var(--accent, #9d4edd);
   transform: translateY(-3px);
   box-shadow: 0 8px 20px rgba(157, 78, 221, 0.15);
}

.github-lab-card__header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}
.github-lab-card__icon {
   font-size: 1.3rem;
}
.github-lab-card__title {
   color: var(--accent, #9d4edd);
   font-weight: 600;
   font-size: 1.05rem;
}
.github-lab-card__desc {
   color: var(--text-main, #e0e0e0);
   font-size: 0.9rem;
   flex: 1;
   line-height: 1.5;
}
.github-lab-card__footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 0.8rem;
}
.github-lab-card__date {
   color: var(--text-muted, #a0a0a0);
}
.github-lab-card__link {
   color: var(--primary, #7b2cbf);
   text-decoration: none;
   font-weight: 500;
   transition: color 0.2s;
}
.github-lab-card__link:hover {
   color: var(--accent, #9d4edd);
   text-decoration: underline;
}


/* !========== Дашборд прогресса ========== */
.dashboard {
   width: min(100%, 780px);
   margin: 36px auto 0;
   text-align: left;
}

.dashboard__loading {
   margin: 0;
   color: var(--white-soft);
   font-size: 0.9rem;
}

.dashboard__glass {
   position: relative;
   overflow: hidden;
   padding: clamp(18px, 3vw, 28px);
   border: 1px solid var(--line);
   border-radius: 24px;
   background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.12),
      var(--glass) 55%,
      rgba(156, 39, 196, 0.12)
   );
   box-shadow: 0 18px 50px rgba(30, 15, 46, 0.2);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
}

.dashboard__heading,
.dashboard__progress-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
}

.dashboard__eyebrow {
   margin: 0 0 4px;
   color: #e3b4f5;
   font-size: 0.68rem;
   font-weight: 800;
   letter-spacing: 0.16em;
}

.dashboard__title {
   margin: 0;
   font-size: clamp(1.05rem, 2.5vw, 1.4rem);
   line-height: 1.3;
}

.dashboard__total-chip {
   flex: 0 0 auto;
   padding: 6px 10px;
   border: 1px solid var(--line);
   border-radius: 999px;
   color: var(--white-soft);
   background: var(--glass);
   font-size: 0.78rem;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
}

.dashboard__kpis {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 10px;
   margin-top: 22px;
}

.dashboard__kpi {
   display: grid;
   justify-items: start;
   gap: 7px;
   min-width: 0;
   padding: 14px 12px;
   border: 1px solid var(--line);
   border-radius: 16px;
   background: rgba(255, 255, 255, 0.045);
   transition:
      transform 220ms ease,
      border-color 220ms ease,
      background 220ms ease,
      box-shadow 220ms ease;
}

.dashboard__kpi:hover {
   transform: translateY(-4px);
   border-color: rgba(227, 180, 245, 0.75);
   background: rgba(255, 255, 255, 0.09);
   box-shadow: 0 10px 24px rgba(30, 15, 46, 0.16);
}

.dashboard__kpi-icon {
   display: grid;
   place-items: center;
   width: 30px;
   height: 30px;
   border-radius: 10px;
   background: rgba(156, 39, 196, 0.2);
   color: #e3b4f5;
   font-size: 1.05rem;
   font-weight: 800;
}

.dashboard__kpi--done .dashboard__kpi-icon {
   color: #6ee7b7;
   background: rgba(52, 211, 153, 0.14);
}

.dashboard__kpi--progress .dashboard__kpi-icon {
   color: #fcd34d;
   background: rgba(252, 211, 77, 0.14);
}

.dashboard__kpi--todo .dashboard__kpi-icon {
   color: #f9a8d4;
   background: rgba(249, 168, 212, 0.14);
}

.dashboard__kpi-label {
   color: var(--white-soft);
   font-size: 0.72rem;
   line-height: 1.3;
}

.dashboard__kpi-value {
   color: var(--white);
   font-size: clamp(1.35rem, 3vw, 1.9rem);
   font-weight: 800;
   line-height: 1;
   font-variant-numeric: tabular-nums;
}

.dashboard__kpi--done .dashboard__kpi-value {
   color: #6ee7b7;
}

.dashboard__kpi--progress .dashboard__kpi-value {
   color: #fcd34d;
}

.dashboard__kpi--todo .dashboard__kpi-value {
   color: #f9a8d4;
}

.dashboard__progress-section {
   margin-top: 24px;
}

.dashboard__progress-heading {
   margin-bottom: 10px;
   font-size: 0.82rem;
   font-weight: 700;
}

.dashboard__percent {
   color: #e3b4f5;
   font-size: 1rem;
   font-variant-numeric: tabular-nums;
}

.dashboard__bar-track {
   position: relative;
   overflow: hidden;
   height: 12px;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 999px;
   background: rgba(30, 15, 46, 0.5);
}

.dashboard__bar-fill {
   position: relative;
   display: block;
   width: 0;
   height: 100%;
   overflow: hidden;
   border-radius: inherit;
   background: linear-gradient(
      90deg,
      var(--purple-600),
      var(--purple-400),
      #e3b4f5
   );
   box-shadow: 0 0 16px rgba(156, 39, 196, 0.55);
   transition: width 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dashboard__bar-fill::after {
   content: '';
   position: absolute;
   top: -50%;
   right: -20px;
   width: 48px;
   height: 200%;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.8);
   filter: blur(12px);
   animation: dashboard-glow 1.8s ease-in-out infinite;
}

.dashboard__hint {
   margin: 12px 0 0;
   color: var(--white-soft);
   font-size: 0.8rem;
   line-height: 1.5;
}

[data-theme='dark'] .dashboard__glass {
   background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.08),
      rgba(30, 15, 46, 0.7)
   );
   border-color: rgba(255, 255, 255, 0.16);
}

@keyframes dashboard-glow {
   0%,
   100% {
      opacity: 0.45;
      transform: translateX(0) scale(0.9);
   }
   50% {
      opacity: 1;
      transform: translateX(-8px) scale(1.15);
   }
}

@media (max-width: 620px) {
   .dashboard {
      margin-top: 28px;
   }

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

   .dashboard__kpi {
      grid-template-columns: 30px minmax(0, 1fr);
      align-items: center;
      column-gap: 9px;
   }

   .dashboard__kpi-icon {
      grid-row: span 2;
   }

   .dashboard__kpi-label {
      align-self: end;
   }

   .dashboard__kpi-value {
      align-self: start;
   }
}

@media (prefers-reduced-motion: reduce) {
   .dashboard__kpi,
   .dashboard__bar-fill {
      transition: none;
   }

   .dashboard__bar-fill::after {
      animation: none;
   }

   .dashboard__kpi:hover {
      transform: none;
   }
}


/* !========== Neon glass design layer ========== */
:root {
   color-scheme: dark;
   --purple-900: #090510;
   --purple-800: #160a25;
   --purple-700: #29103d;
   --purple-600: #6f1a8c;
   --purple-400: #c62cff;
   --white: #fbf7ff;
   --white-soft: rgba(231, 211, 250, 0.76);
   --line: rgba(226, 115, 255,  0.28);
   --glass: rgba(20, 8, 35, 0.66);
   --neon-pink: #ff4fcf;
   --neon-violet: #b44cff;
   --neon-glow: 0 0 0 1px rgba(220, 87, 255, 0.12), 0 0 24px rgba(190, 49, 255, 0.11), inset 0 0 22px rgba(176, 53, 255, 0.035);
}

html {
   color-scheme: dark;
   background: #090510;
}

body {
   color: var(--white);
   background:
      radial-gradient(ellipse at 78% 8%, rgba(157, 35, 194, 0.22), transparent 32%),
      radial-gradient(ellipse at 95% 78%, rgba(206, 28, 190, 0.15), transparent 30%),
      radial-gradient(ellipse at 12% 40%, rgba(87, 29, 130, 0.16), transparent 34%),
      linear-gradient(145deg, #08040f 0%, #12081f 52%, #0a0612 100%);
   background-attachment: fixed;
}

body::before {
   content: '';
   position: fixed;
   inset: 0;
   z-index: -1;
   pointer-events: none;
   opacity: 0.28;
   background-image: radial-gradient(rgba(239, 170, 255, 0.55) 0.7px, transparent 0.7px);
   background-size: 46px 46px;
   mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.header {
   position: absolute;
   background: linear-gradient(180deg, rgba(10, 4, 18, 0.52), transparent);
}

.logo,
.nav a,
.header__actions button,
.github-sync {
   transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.nav a:hover,
.nav a:focus-visible {
   color: #ffb8f0;
   border-bottom-color: var(--neon-pink);
   text-shadow: 0 0 16px rgba(255, 79, 207, 0.5);
}

.github-sync,
.theme-toggle {
   background: rgba(22, 8, 37, 0.72);
   border: 1px solid rgba(212, 105, 255, 0.36);
   box-shadow: 0 0 18px rgba(187, 53, 255, 0.08);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
}

.github-sync:hover,
.theme-toggle:hover {
   border-color: rgba(255, 104, 219, 0.8);
   box-shadow: 0 0 24px rgba(207, 56, 255, 0.22);
   transform: translateY(-2px);
}

.hero::before {
   top: 14%;
   right: -10%;
   background: radial-gradient(circle at 35% 35%, rgba(225, 51, 255, 0.22), rgba(126, 36, 200, 0.09) 44%, transparent 72%);
   filter: blur(12px);
   animation: neon-orbit 16s ease-in-out infinite alternate;
}

.hero__waves {
   opacity: 0.38;
   filter: drop-shadow(0 -8px 28px rgba(201, 50, 255, 0.14));
}

.hero__title {
   text-shadow: 0 0 42px rgba(207, 65, 255, 0.13);
}

.hero__text,
.section__lead,
.section__text {
   color: #c7b1d8;
}

.btn {
   position: relative;
   overflow: hidden;
   border: 1px solid rgba(255, 224, 255, 0.85);
   border-radius: 18px;
   background: rgba(36, 12, 54, 0.32);
   box-shadow: 0 0 22px rgba(196, 57, 255, 0.1), inset 0 0 16px rgba(211, 94, 255, 0.04);
   transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.btn:hover {
   color: #fff;
   background: rgba(174, 43, 221, 0.22);
   box-shadow: 0 0 28px rgba(255, 79, 207, 0.24), inset 0 0 20px rgba(255, 79, 207, 0.08);
   transform: translateY(-2px);
}

.dashboard,
.dashboard__glass,
.card,
.subject,
.shot,
.life-card,
.lab-panel,
.lab-sidebar,
.item,
.file,
.subjects > details,
.project-docs__link,
.github-labs,
.github-sync-status,
.markdown-modal__dialog {
   background: linear-gradient(135deg, rgba(34, 15, 50, 0.78), rgba(13, 7, 24, 0.78));
   border-color: rgba(209, 105, 255, 0.28);
   box-shadow: var(--neon-glow);
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
}

.dashboard,
.dashboard__glass {
   border-radius: 28px;
}

.card,
.subject,
.shot,
.life-card,
.lab-panel,
.lab-sidebar,
.file,
.item {
   border-radius: 20px;
   transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.card:hover,
.subject:hover,
.subject[open],
.shot:hover,
.life-card:hover,
.file:hover,
.item:hover,
.item[aria-current='true'] {
   border-color: rgba(255, 95, 216, 0.72);
   box-shadow: 0 0 0 1px rgba(255, 95, 216, 0.12), 0 0 28px rgba(194, 43, 255, 0.17), inset 0 0 24px rgba(198, 54, 255, 0.055);
}

.card:hover,
.file:hover {
   transform: translateY(-2px);
}

.card__subject,
.page-head__subject {
   color: #e7a4ff;
}

.toolbar,
.tag-filters,
.results-count {
   position: relative;
}

.search,
input,
textarea,
select {
   color: var(--white);
   background: rgba(18, 8, 30, 0.78);
   border-color: rgba(207, 125, 255, 0.3);
}

.search:focus,
input:focus,
textarea:focus,
select:focus {
   border-color: rgba(255, 93, 215, 0.85);
   box-shadow: 0 0 0 3px rgba(209, 58, 255, 0.13), 0 0 22px rgba(209, 58, 255, 0.1);
   outline: none;
}

.tag-filter,
.tag,
button:not(.theme-toggle):not(.github-sync),
.mobile-menu__nav {
   transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.tag-filter,
.tag {
   background: rgba(38, 17, 55, 0.72);
   border-color: rgba(211, 135, 255, 0.25);
}

.tag-filter:hover,
.tag-filter[aria-pressed='true'],
.tag:hover {
   border-color: rgba(255, 100, 219, 0.7);
   background: rgba(137, 39, 166, 0.32);
   box-shadow: 0 0 16px rgba(206, 56, 255, 0.13);
}

.section__title,
.h3-line {
   text-shadow: 0 0 28px rgba(198, 70, 255, 0.1);
}

.socials a {
   background: linear-gradient(135deg, #f5c5ff, #bf50ed);
   box-shadow: 0 0 20px rgba(204, 65, 255, 0.2);
}

.socials a:hover {
   box-shadow: 0 0 28px rgba(255, 79, 207, 0.4);
}

.footer {
   position: relative;
   border-top: 1px solid rgba(200, 102, 255, 0.12);
   background: linear-gradient(180deg, transparent, rgba(7, 3, 12, 0.28));
}

::selection {
   color: #fff;
   background: rgba(187, 54, 233, 0.65);
}

@keyframes neon-orbit {
   from { transform: translate3d(0, 0, 0) rotate(-4deg); }
   to { transform: translate3d(-2%, 2%, 0) rotate(5deg); }
}

@media (max-width: 760px) {
   .header {
      background: linear-gradient(180deg, rgba(10, 4, 18, 0.78), rgba(10, 4, 18, 0.18));
   }

   .mobile-menu__nav {
      background: rgba(15, 6, 25, 0.96);
      border: 1px solid rgba(209, 105, 255, 0.32);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32), 0 0 24px rgba(190, 49, 255, 0.12);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
   }

   .hero__title {
      letter-spacing: 0.08em;
   }

   .hero__subtitle {
      letter-spacing: 0.14em;
   }

   .card,
   .subject,
   .life-card,
   .lab-panel,
   .lab-sidebar {
      border-radius: 18px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .hero::before {
      animation: none;
   }
}