/* ============================================================
   CHINAZIUM — АРХИВ + ИНЦЕЛОПЕДИЯ
   Строится поверх css/site.css (дизайн-система главной).
   ============================================================ */

.page-wrap{padding:112px 20px 40px; background:var(--bg);}

/* ---------------- ШАПКА СТРАНИЦЫ ---------------- */

.page-hero{
  position:relative;
  border-radius:32px;
  overflow:hidden;
  text-align:center;
  padding:70px 26px 60px;
  background:
    radial-gradient(ellipse 700px 400px at 50% 0%, rgba(71,197,255,0.14), transparent 65%),
    linear-gradient(160deg, rgba(12,45,86,0.4), rgba(2,5,13,0.2)),
    #02050d;
  border:1px solid rgba(100,169,214,0.14);
}
.page-hero-inner{position:relative; z-index:2;}
.page-hero h1{
  font-size:clamp(2.1rem, 4.6vw, 3rem);
  margin-top:14px; font-weight:700;
  background:linear-gradient(135deg, #ffffff 30%, var(--cyan-2) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.page-hero p{max-width:520px; margin:16px auto 0; color:var(--muted); line-height:1.65; font-size:0.96rem;}
.page-hero-nav{margin-top:26px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
@media (max-width:640px){ .page-hero{border-radius:22px; padding:52px 18px 44px;} }

/* ---------------- ПАНЕЛЬ ФИЛЬТРОВ ---------------- */

.tools{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-bottom:28px;
}
.search-box{
  position:relative; display:flex; align-items:center; gap:9px;
  padding:11px 18px; border-radius:100px;
  border:1px solid rgba(100,169,214,0.3);
  background:rgba(2,5,13,0.6);
  transition:border-color .25s, box-shadow .25s;
  min-width:280px;
}
.search-box:focus-within{border-color:var(--blue-light); box-shadow:0 0 22px -8px rgba(71,197,255,0.55);}
.search-box svg{width:15px; height:15px; color:var(--muted-2); flex-shrink:0;}
.search-box input{
  flex:1; background:none; border:none; outline:none;
  font-family:var(--font-display); font-size:0.88rem; color:var(--ink);
}
.search-box input::placeholder{color:var(--muted-2);}

.chips{display:flex; gap:9px; flex-wrap:wrap;}
.chip{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:8px 15px; border-radius:100px;
  border:1px solid rgba(100,169,214,0.28);
  background:rgba(12,45,86,0.24); color:var(--muted);
  cursor:pointer; transition:color .2s, border-color .2s, background .2s, transform .2s;
}
.chip:hover{color:var(--ink); border-color:var(--blue-light); transform:translateY(-2px);}
.chip.is-active{
  background:linear-gradient(135deg, var(--cyan), var(--blue-light));
  border-color:transparent; color:#051426; font-weight:700;
}

.empty-note{
  font-family:var(--font-mono); font-size:0.8rem; color:var(--muted-2);
  letter-spacing:0.03em; padding:26px 0;
}

/* ---------------- ИНЦЕЛОПЕДИЯ ---------------- */

.incel-sec{background:var(--bg);}

/* формула чиназиумной энергии */
.formula-box{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:36px;
  padding:32px 30px; margin-bottom:28px;
  position:relative; overflow:hidden;
}
.formula-box::before{
  content:""; position:absolute; top:-40%; left:-10%; width:280px; height:280px; border-radius:50%;
  filter:blur(50px); pointer-events:none;
  background:radial-gradient(circle, rgba(71,197,255,0.22), transparent 70%);
}
.formula-main{position:relative; z-index:1;}
.formula{
  margin-top:14px;
  font-family:var(--font-vcr); font-size:clamp(1.2rem, 2.6vw, 1.7rem);
  letter-spacing:0.04em; color:var(--cyan-2);
  text-shadow:0 0 22px rgba(71,197,255,0.35);
}
.formula sub{font-size:0.6em;}
.formula-legend{
  margin-top:18px; list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px;
  font-family:var(--font-mono); font-size:0.76rem; color:var(--muted); letter-spacing:0.02em;
}
.formula-legend b{color:var(--ink); font-weight:600;}
.thresholds{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:10px; justify-content:center;
}
.threshold{
  display:flex; align-items:center; gap:14px;
  padding:12px 16px; border-radius:12px;
  background:rgba(2,5,13,0.5); border:1px solid rgba(100,169,214,0.22);
}
.threshold .lvl{
  font-family:var(--font-vcr); font-size:0.82rem; color:var(--cyan-2); flex-shrink:0;
  min-width:64px;
}
.threshold .txt{font-size:0.84rem; color:var(--muted); line-height:1.45;}
.threshold.danger{border-color:rgba(255,214,110,0.45);}
.threshold.danger .lvl{color:#ffd66e;}
@media (max-width:920px){ .formula-box{grid-template-columns:1fr; gap:24px;} }

.terms{display:flex; flex-direction:column; gap:14px;}
.term{
  border-left:2px solid rgba(100,169,214,0.5);
  border-top:1px solid rgba(30,94,159,0.4);
  border-right:1px solid rgba(30,94,159,0.4);
  border-bottom:1px solid rgba(30,94,159,0.4);
  border-radius:0 14px 14px 0;
  background:rgba(12,45,86,0.16);
  overflow:hidden;
  transition:background .25s, border-left-color .25s;
}
.term:hover{background:rgba(30,94,159,0.18); border-left-color:var(--cyan);}
.term.is-open{border-left-color:var(--cyan); background:rgba(30,94,159,0.2);}
.term-head{
  width:100%; display:flex; align-items:center; gap:16px;
  padding:20px 24px; background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--font-display); color:var(--ink);
}
.term-letter{
  width:34px; height:34px; flex-shrink:0; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-vcr); font-size:0.9rem; color:var(--cyan-2);
  background:rgba(2,5,13,0.55); border:1px solid rgba(100,169,214,0.3);
}
.term-title{flex:1;}
.term-title .word{font-weight:600; font-size:1.06rem; color:var(--ink);}
.term-title .short{display:block; margin-top:4px; font-size:0.82rem; color:var(--muted);}
.term-toggle{
  font-family:var(--font-mono); font-size:1rem; color:var(--muted-2);
  transition:transform .3s, color .3s; flex-shrink:0;
}
.term.is-open .term-toggle{transform:rotate(45deg); color:var(--cyan);}
.term-body{
  max-height:0; overflow:hidden;
  transition:max-height .35s cubic-bezier(.16,.8,.24,1);
}
.term-body-inner{padding:0 24px 22px 74px;}
.term-body p{color:var(--muted); line-height:1.7; font-size:0.94rem;}
.term-example{
  margin-top:12px; padding:12px 16px; border-radius:12px;
  background:rgba(2,5,13,0.5); border:1px solid rgba(100,169,214,0.2);
  font-family:var(--font-vcr); font-size:0.78rem; letter-spacing:0.03em;
  color:var(--cyan-2); line-height:1.6;
}
.term-tags{margin-top:12px; display:flex; gap:7px; flex-wrap:wrap;}
@media (max-width:640px){
  .term-head{padding:16px 16px; gap:12px;}
  .term-body-inner{padding:0 16px 18px 16px;}
}