:root{
  --bg: #e4e4e4;
  --panel: #fbfbfd;
  --muted: #000000;
  --text: #000000;
  --accent: linear-gradient(135deg,#6366f1 0%,#ec4899 100%);
  --border: rgba(15,23,42,0.06);
  --radius: 12px;
  --maxw: 1100px;
  --gap: 20px;
  --shadow: 0 6px 18px rgba(12,15,22,0.06);
  --link: #e27500;
  --topbar: #ffffff00;
  --pages1: #000000;
  --cardcolor: #ffffff;
  --cardbg: #ffffff;
  --cardanim: #dcdcdc;
  --titlecolor: #000000;
  --titlesub: #000000;
  --arrow: #000000;
}


button.theme-toggle {
  padding: 9px 13px;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  background: #c0c0c0;
  color: rgb(74, 74, 74);
  font-weight: bold;
  transition: background 0.2s ease, transform 0.1s ease;
}

button.theme-toggle:hover {
  color: rgb(211, 211, 211);
  background: #474747;
}

.dark {
  --bg: #2b2b2b;
  --panel: #1e1e1e;
  --muted: #a8a8a8;
  --text: #ffffff;
  --accent: linear-gradient(135deg,#6366f1 0%,#ec4899 100%);
  --border: rgba(0, 0, 0, 0.06);
  --radius: 12px;
  --maxw: 1100px;
  --gap: 20px;
  --shadow: 0 6px 18px rgba(12,15,22,0.06);
  --link: #000000;
  --sectionnav: #ffffff;
  --topbar: linear-gradient(180deg, rgba(0, 0, 0, 0.052), rgba(0, 0, 0, 0.189));
  --pages1: #ffffff;
  --cardcolor: #ffffff;
  --cardbg: #1a1a1a;
  --cardanim: #1f1f1f;
  --titlecolor: #ffffff;
  --titlesub: #ffffff;
  --arrow: #ffffff;
}

/* Reset + basics */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center;
  padding:12px 18px;
  background:var(--topbar);
  backdrop-filter: blur(6px);
  gap: 20px;
}

.brand{display:flex;align-items:center;gap:10px;font-weight:600}
.logo{width:36px;height:36px;border-radius:10px;background-image:var(--accent);flex-shrink: 0;}
.badge{font-size:12px;padding:3px 7px;border-radius:8px;background:var(--panel);color:var(--muted);margin-left:6px}

/* search */
.search-wrap{margin:auto;flex:1;max-width:835px;position:relative}
.search-wrap input[type=search]{
  width:100%; padding:10px 12px;border-radius:10px;border:1px solid var(--border);
  background:var(--panel); color:var(--text);
  outline:none; box-shadow:var(--shadow);
}
.search-results{
  position:absolute; left:0; right:0; top:44px; border-radius:10px; overflow:hidden;
  background:var(--panel); border:1px solid var(--border); box-shadow:var(--shadow); z-index:60;
  max-height:320px; overflow:auto;
}
.sr-item{display:block;padding:10px 12px;text-decoration:none;color:var(--text);border-bottom:1px dashed rgba(0,0,0,0.03)}
.sr-item .sr-title{font-weight:600}
.sr-item .sr-meta{font-size:12px;color:var(--muted)}
.sr-none{padding:12px;color:var(--muted)}

/* top actions */
.top-actions{display:flex;align-items:center;gap:8px}
.icon-btn{border:0;background:transparent;cursor:pointer;padding:6px;border-radius:8px}
.repo-btn{display:inline-block;padding:8px 10px;border-radius:10px;border:1px solid var(--border);text-decoration:none;color:var(--text)}

/* layout */
.layout{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:var(--gap);
  max-width:var(--maxw);
  margin:22px auto;
  padding:0 18px;
}
.sidebar{
  position:sticky; top:82px; align-self:start; height:calc(100vh - 120px); overflow:auto;
  padding:12px; border-radius:var(--radius); background:var(--panel); border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.nav-section{margin-bottom:8px}
.nav-section-title{
  width:100%; text-align:left; padding:10px;border-radius:10px;border:0;background:transparent;cursor:pointer;font-weight:600;color:var(--sectionnav)
}
.nav-pages{list-style:none;color:var(--pages);margin:6px 0 0;padding:0}
.nav-pages li a{display:block;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--text);font-size:14px}
.nav-pages li a:hover{background:rgba(0,0,0,0.03)}
.nav-section.open .nav-pages{display:block}
.nav-section .nav-pages{display:none}

/* content */
.content{padding:6px}
.breadcrumb{margin-bottom:12px;color:var(--muted);font-size:14px}
.article{background:transparent;padding:18px;border-radius:10px}
.article h1{font-size:28px;margin:0 0 12px}
.article p{margin:0 0 12px;color:var(--text)}
.article pre{background:rgba(0,0,0,0.03);padding:12px;border-radius:8px;overflow:auto}
.article table{border-collapse:collapse;width:100%;margin-top:12px}
.article table th, .article table td{border:1px solid var(--border);padding:8px;text-align:left}

/* footer */
.footer{padding:18px;border-top:1px solid var(--border);text-align:center;color:var(--muted)}

/* responsive */
@media (max-width:900px){
  .layout {
    grid-template-columns: 1fr;
    margin-top: 8px;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 64px;
    bottom: 0;
    width: 260px;
    border-right: 1px solid var(--border);
    transform: translateX(-100%); /* вместо -112% */
    transition: transform .25s ease;
    z-index: 2000; /* чтобы было поверх контента */
  }

  .sidebar.open-mobile {
    transform: translateX(0);
  }

  .mobile-overlay {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1500;
  }

  .mobile-overlay.show {
    display: block;
  }

  .mobile-only {display:inline-block}
  .brand-title {font-size:16px}
}

@media (min-width:901px){
  .mobile-only {display:none}
}

/* Плавное появление всего контента */
body {
  animation: fadeIn 1s ease-in-out;
}

/* Плавное появление сверху для секций */
.nav-section,
.article,
.footer,
.sidebar,
.topbar {
  animation: slideFade 0.6s ease forwards;
}

/* При наведении на кнопки и ссылки */
button,
a {
  transition: all 0.3s ease;
}
button:hover,
a:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* Анимация поиска */
.search-wrap input[type=search] {
  transition: all 0.3s ease;
}
.search-wrap input[type=search]:focus {
  box-shadow: 0 0 10px rgba(35, 35, 35, 0.4);
  transform: scale(1.02);
}

.card-link {
  display: block;
  text-decoration: none;
  border-radius: 6px;
  background: var(--cardbg); /* тёмный фон */
  padding: 12px;
  color: var(--cardcolor); /* основной текст */
  transition: background 0.2s ease, transform 0.1s ease;
}

.card-link:hover {
  background: var(--cardanim);
  transform: translateY(-2px);
}

.card-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.icon {
  width: 28px;
  height: 28px;
  margin-right: 12px;
}

.text {
  flex: 1;
}

.title {
  font-size: 16px;
  font-weight: 600;
  color: var(--titlecolor);
}

.subtitle {
  font-size: 14px;
  color: var(--titlesub);
}

.nav-pages a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-pages a i {
  padding-right: 5px;
  text-align: center;
  color:var(--pages1); /* можно поменять */
}

.centered {
  text-align: center;
}

.rules-list p {
  margin: 10px 0;       /* уменьшает отступы сверху/снизу */
  line-height: 1.2;    /* уменьшает межстрочный интервал */
}

.arrow {
  margin-bottom: 4px;
  color: var(--arrow);
}

.fa-solid.fa-feather.fa-flip-horizontal {
  color: #ffffff;
  padding: 10px;
}