/* ============================================================
   devops-kb — премиальная тёмная тема
   Идеи: Aceternity UI / Magic UI (Spotlight, Aurora, Meteors,
   Glow cards, Gradient borders) — портированы на чистый CSS
   поверх темы mkdocs-material.
   ============================================================ */

:root {
  --kb-font-display: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
  --kb-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --kb-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  --kb-accent-1: #06b6d4;
  --kb-accent-2: #8b5cf6;
  --kb-accent-3: #67e8f9;

  --kb-gradient: linear-gradient(135deg, var(--kb-accent-1) 0%, var(--kb-accent-2) 100%);
  --kb-gradient-soft: linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(6, 182, 212, .18));
  --kb-ring: 0 0 0 1px rgba(139, 92, 246, .35), 0 8px 32px -8px rgba(139, 92, 246, .5);
}

/* ---------- Тёмная палитра (slate scheme) -------------------- */
[data-md-color-scheme="slate"] {
  --md-hue: 255;
  --md-default-bg-color: #0a0a0f;
  --md-default-bg-color--light: #111118;
  --md-default-bg-color--lighter: #15151d;
  --md-default-fg-color: #e7e7ef;
  --md-default-fg-color--light: #b8b8c8;
  --md-default-fg-color--lighter: #8a8a9c;
  --md-default-fg-color--lightest: #4a4a5c;

  --md-primary-fg-color: #0a0a0f;
  --md-primary-bg-color: #e7e7ef;

  --md-accent-fg-color: var(--kb-accent-2);
  --md-accent-bg-color: #0a0a0f;

  --md-typeset-a-color: var(--kb-accent-3);
  --md-code-bg-color: #0f0f18;
  --md-code-fg-color: #d5d5e3;
}

/* Мягкий «aurora» градиент на фоне всего body */
[data-md-color-scheme="slate"] body {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(139, 92, 246, .18), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(6, 182, 212, .15), transparent 60%),
    #0a0a0f;
  background-attachment: fixed;
}

/* ---------- Типографика -------------------------------------- */
body,
.md-typeset {
  font-family: var(--kb-font-body);
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-header__topic {
  font-family: var(--kb-font-display);
  letter-spacing: -0.02em;
  font-weight: 600;
}

.md-typeset h1 {
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.1;
}

.md-typeset code,
.md-typeset pre {
  font-family: var(--kb-font-mono);
}

/* ---------- Header — стекло + бордер ------------------------- */
.md-header {
  background: rgba(10, 10, 15, 0.65) !important;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.md-tabs {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* ---------- Поиск в стиле shadcn/ui -------------------------- */
.md-search__form {
  background: #0f0f18 !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.md-search__form:hover {
  border-color: rgba(139, 92, 246, .35);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form,
.md-search__form:focus-within {
  border-color: var(--kb-accent-2);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, .15);
}

.md-search__input {
  color: #e7e7ef;
}

.md-search__input::placeholder {
  color: #6a6a7c;
}

/* ---------- Hero-секция -------------------------------------- */
.kb-hero {
  position: relative;
  margin: -1.5rem -0.8rem 2.5rem;
  padding: 5rem 2rem 4.5rem;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(800px 320px at 50% -10%, rgba(139, 92, 246, .35), transparent 60%),
    radial-gradient(600px 260px at 80% 120%, rgba(6, 182, 212, .25), transparent 60%),
    linear-gradient(180deg, #0b0b12 0%, #0a0a0f 100%);
}

/* Spotlight — свет за курсором */
.kb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    420px circle at var(--kb-mx, 50%) var(--kb-my, 30%),
    rgba(167, 139, 250, .22),
    transparent 55%
  );
  transition: background-position .2s ease;
  pointer-events: none;
}

/* Тонкая сетка поверх фона */
.kb-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9) 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9) 30%, transparent 75%);
  pointer-events: none;
}

.kb-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: #cfcfe0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 1.25rem;
}

.kb-hero__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kb-accent-2);
  box-shadow: 0 0 12px var(--kb-accent-2);
  animation: kb-pulse 2s ease-in-out infinite;
}

@keyframes kb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(1.35); }
}

.kb-hero__title {
  font-family: var(--kb-font-display);
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0 0 1rem;
  color: #f4f4fb;
}

.kb-hero__title .kb-grad {
  background: var(--kb-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.kb-hero__lead {
  max-width: 620px;
  color: #b8b8c8;
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 1.75rem;
}

.kb-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* ---------- Кнопки с gradient border + glow ----------------- */
.kb-btn {
  --kb-btn-bg: #0f0f18;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.15rem;
  border-radius: 10px;
  font-family: var(--kb-font-display);
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #f4f4fb !important;
  background: var(--kb-btn-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform .15s ease, border-color .2s ease, box-shadow .3s ease;
  text-decoration: none !important;
  cursor: pointer;
}

.kb-btn:hover {
  border-color: rgba(139, 92, 246, .5);
  box-shadow: var(--kb-ring);
  transform: translateY(-1px);
}

/* Primary — gradient fill */
.kb-btn--primary {
  background: var(--kb-gradient);
  border-color: transparent;
  color: #0a0a0f !important;
  font-weight: 600;
}

.kb-btn--primary:hover {
  box-shadow: 0 10px 40px -10px rgba(139, 92, 246, .7);
  filter: brightness(1.05);
}

/* Animated gradient border (Magic UI вайб) */
.kb-btn--ring {
  position: relative;
  background: var(--kb-btn-bg);
  border-color: transparent;
}

.kb-btn--ring::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--kb-ang, 0deg), var(--kb-accent-1), var(--kb-accent-2), var(--kb-accent-1));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: kb-spin 6s linear infinite;
  pointer-events: none;
}

@property --kb-ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes kb-spin {
  to { --kb-ang: 360deg; }
}

/* ---------- Grid карточек c glow ----------------------------- */
.kb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.kb-card {
  position: relative;
  display: block;
  padding: 1.4rem 1.3rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #101019 0%, #0d0d15 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #e7e7ef !important;
  text-decoration: none !important;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s ease, border-color .25s ease, box-shadow .35s ease;
}

.kb-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    260px circle at var(--kb-mx, 50%) var(--kb-my, 50%),
    rgba(139, 92, 246, .18),
    transparent 60%
  );
  opacity: 0;
  transition: opacity .3s ease;
}

.kb-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(139, 92, 246, .6), rgba(6, 182, 212, .6));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.kb-card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 20px 50px -20px rgba(139, 92, 246, .35);
}

.kb-card:hover::before,
.kb-card:hover::after {
  opacity: 1;
}

.kb-card__icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--kb-gradient-soft);
  border: 1px solid rgba(6, 182, 212, .3);
  font-size: 1.1rem;
  margin-bottom: .85rem;
}

.kb-card__body {
  display: block;
}

/* Статичные карточки (принципы) — без hover-лифта */
.kb-card--static {
  cursor: default;
}

.kb-card--static:hover {
  transform: none;
}

.kb-card__title {
  font-family: var(--kb-font-display);
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0 0 .35rem;
  color: #f4f4fb;
}

.kb-card__desc {
  font-size: .88rem;
  line-height: 1.5;
  color: #a0a0b2;
  margin: 0;
}

.kb-card__arrow {
  position: absolute;
  top: 1.3rem;
  right: 1.3rem;
  color: #6a6a7c;
  transition: color .2s ease, transform .2s ease;
}

.kb-card:hover .kb-card__arrow {
  color: var(--kb-accent-2);
  transform: translate(2px, -2px);
}

/* ---------- Контент — карточки Material через admonition ----- */
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  background: linear-gradient(180deg, #101019 0%, #0d0d15 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--kb-accent-1);
  border-radius: 12px;
  box-shadow: none;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  background: #0f0f18;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: #151521;
  color: #e7e7ef;
  font-family: var(--kb-font-display);
  letter-spacing: -0.01em;
}

/* ---------- Код-блоки — премиальная рамка -------------------- */
[data-md-color-scheme="slate"] .md-typeset pre > code,
[data-md-color-scheme="slate"] .md-typeset .highlight {
  background: #0c0c14;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

[data-md-color-scheme="slate"] .md-typeset :not(pre) > code {
  background: rgba(139, 92, 246, .1);
  border: 1px solid rgba(139, 92, 246, .2);
  border-radius: 6px;
  color: #d5ccff;
  padding: .1em .4em;
}

/* ---------- Навигация слева/справа --------------------------- */
.md-nav__link--active,
.md-nav__link[aria-current="page"] {
  color: var(--kb-accent-2) !important;
}

.md-sidebar__scrollwrap::-webkit-scrollbar { width: 6px; }
.md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, .25);
  border-radius: 3px;
}

/* ---------- Скелетон / спиннер загрузки ---------------------- */
.kb-skeleton {
  --kb-sk-bg: #12121a;
  --kb-sk-hl: #1c1c28;
  display: block;
  height: 1em;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--kb-sk-bg) 0%, var(--kb-sk-hl) 50%, var(--kb-sk-bg) 100%);
  background-size: 200% 100%;
  animation: kb-shimmer 1.4s ease-in-out infinite;
}

@keyframes kb-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.kb-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 25%, var(--kb-accent-1) 50%, var(--kb-accent-2) 75%, transparent 100%);
  mask: radial-gradient(circle, transparent 50%, #000 52%);
  -webkit-mask: radial-gradient(circle, transparent 50%, #000 52%);
  animation: kb-rotate 1s linear infinite;
}

@keyframes kb-rotate {
  to { transform: rotate(360deg); }
}

/* ---------- Meteors (фон hero) ------------------------------- */
.kb-meteors {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.kb-meteor {
  position: absolute;
  top: -20px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #fff;
  transform: rotate(215deg);
  animation: kb-meteor linear infinite;
}

.kb-meteor::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, rgba(139, 92, 246, .9), transparent);
}

@keyframes kb-meteor {
  0%   { transform: rotate(215deg) translateX(0); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: rotate(215deg) translateX(600px); opacity: 0; }
}

/* ---------- Футер -------------------------------------------- */
.md-footer {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: 2rem;
}

.md-footer-meta {
  background: transparent;
}

/* ---------- Плавные переходы между страницами (instant) ------ */
@media (prefers-reduced-motion: no-preference) {
  .md-content {
    animation: kb-fade-in .35s ease;
  }
}

@keyframes kb-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Светлая тема — адаптация всех компонентов ------- */
[data-md-color-scheme="default"] .kb-hero {
  background:
    radial-gradient(800px 320px at 50% -10%, rgba(6, 182, 212, .14), transparent 60%),
    radial-gradient(600px 260px at 80% 120%, rgba(139, 92, 246, .10), transparent 60%),
    linear-gradient(180deg, #fafaff 0%, #f4f4fb 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-md-color-scheme="default"] .kb-hero__title { color: #0a0a0f; }
[data-md-color-scheme="default"] .kb-hero__lead { color: #4a4a5c; }
[data-md-color-scheme="default"] .kb-hero__eyebrow {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: #2a2a3c;
}

[data-md-color-scheme="default"] .kb-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  color: #0a0a0f !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

[data-md-color-scheme="default"] .kb-card__title { color: #0a0a0f; }
[data-md-color-scheme="default"] .kb-card__desc { color: #4a4a5c; }
[data-md-color-scheme="default"] .kb-card__icon {
  background: linear-gradient(135deg, rgba(6, 182, 212, .12), rgba(139, 92, 246, .12));
  border-color: rgba(6, 182, 212, .25);
}
[data-md-color-scheme="default"] .kb-card__arrow { color: #a0a0b2; }
[data-md-color-scheme="default"] .kb-card:hover {
  box-shadow: 0 12px 32px -14px rgba(6, 182, 212, .35);
}

[data-md-color-scheme="default"] .kb-btn {
  --kb-btn-bg: #ffffff;
  color: #0a0a0f !important;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-md-color-scheme="default"] .kb-btn--primary {
  color: #ffffff !important;
}

[data-md-color-scheme="default"] body {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(6, 182, 212, .09), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(139, 92, 246, .07), transparent 60%),
    #fafaff;
}

/* ---------- Бейдж статуса практики --------------------------- */
.kb-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-family: var(--kb-font-display);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  line-height: 1;
  white-space: nowrap;
}

.kb-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.kb-status--todo {
  color: #f87171;
  background: rgba(248, 113, 113, .08);
  border-color: rgba(248, 113, 113, .25);
}

.kb-status--todo::before {
  background: #f87171;
  box-shadow: 0 0 10px rgba(248, 113, 113, .6);
}

.kb-status--done {
  color: #34d399;
  background: rgba(52, 211, 153, .08);
  border-color: rgba(52, 211, 153, .25);
}

.kb-status--done::before {
  background: #34d399;
  box-shadow: 0 0 10px rgba(52, 211, 153, .6);
}

.kb-status--wip {
  color: #fbbf24;
  background: rgba(251, 191, 36, .08);
  border-color: rgba(251, 191, 36, .3);
}

.kb-status--wip::before {
  background: #fbbf24;
  box-shadow: 0 0 10px rgba(251, 191, 36, .6);
}

/* Hero-блок страницы практики */
.kb-practice-head {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin: 0 0 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-md-color-scheme="default"] .kb-practice-head {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.kb-practice-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.kb-practice-head__category {
  font-family: var(--kb-font-display);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kb-accent-1);
}

/* ---------- Адаптив ------------------------------------------ */
@media (max-width: 760px) {
  .kb-hero { padding: 3.5rem 1.5rem 3rem; border-radius: 16px; }
  .kb-hero__title { font-size: 2rem; }
}

/* ---------- Дайджест: лента недель в меню ------------------- */
.kb-cal { margin: .3rem 0 .5rem .4rem; font-size: .64rem; }
.kb-cal__year > summary {
  cursor: pointer; list-style: none; font-weight: 600; padding: .2rem 0;
  color: var(--md-default-fg-color--light);
}
.kb-cal__year > summary::-webkit-details-marker { display: none; }
.kb-cal__year > summary::before { content: "▸ "; }
.kb-cal__year[open] > summary::before { content: "▾ "; }
.kb-cal__slider { display: flex; align-items: center; gap: .15rem; margin: .15rem 0 .3rem; }
.kb-cal__track {
  display: flex; gap: .2rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; flex: none; width: calc(5 * 1.6rem - .2rem); padding: .1rem 0;
}
.kb-cal__track::-webkit-scrollbar { display: none; }
.kb-cal__arrow {
  flex: none; box-sizing: border-box; width: 1.1rem; height: 1.4rem; border-radius: .35rem; cursor: pointer;
  color: var(--md-default-fg-color--light); background: transparent;
  border: 1px solid var(--md-default-fg-color--lightest); font-size: .8rem; line-height: 1;
}
.kb-cal__arrow:hover:not(:disabled) { color: var(--kb-accent-1); border-color: var(--kb-accent-1); }
.kb-cal__arrow:disabled { opacity: .3; cursor: default; }
.kb-cal__w {
  flex: none; scroll-snap-align: start; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; border-radius: .35rem;
  color: var(--md-default-fg-color--lighter);
  border: 1px solid var(--md-default-fg-color--lightest);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.kb-cal__w--future { opacity: .45; border-style: dashed; }
.kb-cal__w--now { border-color: var(--kb-accent-2); color: var(--md-default-fg-color); }
.md-typeset a.kb-cal__w--issue, a.kb-cal__w--issue {
  color: var(--kb-accent-3); background: rgba(6, 182, 212, .14);
  border-color: var(--kb-accent-1); font-weight: 600; text-decoration: none;
}
a.kb-cal__w--issue:hover { background: var(--kb-accent-1); color: #0a0a0f; }
a.kb-cal__w--current, a.kb-cal__w--current:hover { background: var(--kb-accent-1); color: #0a0a0f; }