:root {
  
  --bg:           #0d0a08;
  --panel:        #1a1208;
  --panel2:       #231808;
  --line:         #2e2010;
  --line-soft:    rgba(245, 184, 0, .08);

  
  --ink:          #f0e8d0;
  --mut:          #b09060;
  --heading:      #ffd700;

  
  --brand:        #f5b800;
  --brand2:       #e53935;
  --on:           #1a0a00;
  --brand-grad:   linear-gradient(135deg, #ffd233, #c88a00);
  --glow:         0 0 0 1px rgba(245,184,0,.35), 0 8px 26px -8px rgba(245,184,0,.45);

  
  --panel-grad:   linear-gradient(160deg, #1e1408, #0e0a04);
  --panel-grad2:  linear-gradient(160deg, #231808, #140e04);

  
  --shadow:       0 6px 18px -8px rgba(0, 0, 0, .7);
  --shadow-lg:    0 16px 40px -14px rgba(0, 0, 0, .8);

  
  --ok:           #34d399;
  --warn:         #f5b800;
}


.lib {
  background:
    radial-gradient(900px 420px at 50% -80px, rgba(245,184,0,.07), transparent 60%),
    radial-gradient(600px 300px at 100% 0, rgba(229,57,53,.04), transparent 50%),
    var(--bg);
}


.lh.sticky {
  background: rgba(13, 10, 8, .92);   
}


.btn-main {
  background: var(--brand-grad);
  color: var(--on);
  border-color: transparent;
  box-shadow: 0 6px 18px -6px rgba(245, 184, 0, .5);
}

.btn-main:hover {
  background: linear-gradient(135deg, #ffe155, #c88a00);
  box-shadow: 0 0 0 1px rgba(245,184,0,.55), 0 12px 30px -8px rgba(245,184,0,.6);
  transform: translateY(-2px);
}


.lib a.btn-main,
.lib a.btn-main:hover {
  color: var(--on);
}


.lib a.btn:not(.btn-main):hover {
  color: var(--brand);
  background: rgba(245, 184, 0, .10);
}


.lh nav a:hover {
  color: var(--brand);
}

.lh nav a::after {
  background: var(--brand);
}


.lh .logo {
  color: var(--heading);
}


.lh .burger {
  color: var(--brand);
}


.h2 {
  border-left-color: var(--brand);
  background: linear-gradient(90deg, rgba(245,184,0,.10), transparent 40%);
}


.h1 {
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  color: var(--heading);
}

.hero .h1 {
  text-shadow: 0 2px 18px rgba(0,0,0,.7), 0 0 30px rgba(245,184,0,.15);
}


.hero {
  background:
    radial-gradient(900px 360px at 50% -60px, rgba(245,184,0,.14), transparent 60%),
    radial-gradient(500px 300px at 100% 120%, rgba(229,57,53,.06), transparent 55%),
    var(--panel-grad2);
}


.card:hover {
  border-color: rgba(245, 184, 0, .4);
}

.box:hover {
  border-color: rgba(245, 184, 0, .35);
}

.gcard:hover {
  border-color: rgba(245, 184, 0, .5);
  box-shadow: var(--glow);
}


.tabs .tab.on {
  background: var(--brand-grad);
  color: var(--on);
  box-shadow: 0 6px 16px -6px rgba(245, 184, 0, .5);
}

.tabs .tab:hover {
  border-color: var(--brand);
  color: var(--brand);
}


.acc details[open],
.faq details[open] {
  border-color: rgba(245, 184, 0, .4);
}

.acc summary::after,
.acc details[open] summary::after,
.faq summary::after,
.faq details[open] summary::after {
  color: var(--brand);
}


.steps li::before {
  background: var(--brand-grad);
  color: var(--on);
  box-shadow: 0 4px 12px -4px rgba(245, 184, 0, .6);
}


.toc a:hover {
  color: var(--brand);
}


.pager a:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: rgba(245, 184, 0, .06);
}


.filter .chip:hover {
  border-color: var(--brand);
  color: var(--brand);
}


.lf {
  background: linear-gradient(180deg, #170f04, #0a0602);
}

.lf h4 {
  color: var(--brand);
}

.lf a:hover {
  color: var(--brand);
}


.read h3 {
  color: var(--brand);
}


.cta-block {
  background:
    radial-gradient(400px 120px at 50% -20px, rgba(245,184,0,.10), transparent),
    var(--panel-grad2);
  border-color: rgba(245, 184, 0, .25);
}


.author {
  border-left-color: var(--brand);
}

.author .role {
  color: var(--brand);
}


.tbl th {
  color: var(--brand);
}

.tbl .rank,
.tbl .star {
  color: var(--brand);
}


.trust span::before {
  color: var(--brand);
}


.rv-role,
.rv-stars {
  color: var(--brand);
}


.rv-role {
  display: block;
  margin-top: 1px;
}


* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}


.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}


.rv-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-grad, var(--brand));
  color: var(--on);         
  font-size: 17px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -4px rgba(245, 184, 0, .5);
  letter-spacing: 0;
}


.rv-top {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}


@media(max-width:1024px){
  html{scrollbar-width:none}
  html::-webkit-scrollbar{display:none}
  body::-webkit-scrollbar{display:none}
}