﻿.lg-wrap{max-width:1100px;margin:0 auto;padding:18px}
.lg-head{margin:6px 0 18px}
.lg-sub{color:var(--muted);margin:0 0 14px}
.lg-grid{display:grid;grid-template-columns: 280px 1fr;gap:16px}
.lg-aside{
  position:sticky; top:70px; align-self:start;
  background:linear-gradient(180deg,#101520,#0b0f15);
  border:1px solid var(--border-color); border-radius:14px; padding:14px
}
.lg-aside a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; color:var(--text); text-decoration:none
}
.lg-aside a .dot{width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #ffe27a, var(--primary))}
.lg-aside a:hover{background:rgba(201,162,39,.08)}
.lg-aside a.is-active{background:rgba(201,162,39,.14); border:1px solid rgba(201,162,39,.35)}
.lg-card{
  background:linear-gradient(180deg,#101520,#0b0f15);
  border:1px solid var(--border-color); border-radius:16px; padding:18px 18px 10px;
  box-shadow:0 14px 48px rgba(0,0,0,.25)
}
.lg-card + .lg-card{margin-top:16px}
.lg-card h2{margin:0 0 6px}
.lg-meta{color:var(--muted);font-size:14px;margin:0 0 14px}
.lg-card h3{margin:18px 0 6px}
.lg-card p{color:color-mix(in srgb, var(--text) 70%, var(--muted) 30%); line-height:1.7}
.lg-card ul{padding-left:1.2em; margin:6px 0 12px}
.lg-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px; border-radius:999px; font-size:.86rem;
  background:rgba(201,162,39,.12); border:1px solid rgba(201,162,39,.35); color:#ffd97a
}
.lg-topbar{
  display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px
}
.lg-topbar a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px; text-decoration:none;
  border:1px solid var(--border-color);
  background:linear-gradient(180deg,#11161d,#0c0f15); color:var(--text)
}
.lg-topbar a:hover{ background:rgba(201,162,39,.10) }

@media (max-width: 960px){
  .lg-grid{grid-template-columns:1fr}
  .lg-aside{position:static}
}

