:root{
  --bg:#0b0d11; --card:#0d1015; --fg:#eaeaea; --stroke:#1a1f27;
  --accent:#00ffb3; --muted:#9aa3ae;
}

/* Header shell */
.lc-head{max-width:980px;margin:0 auto;padding:16px 18px;display:flex;align-items:center;gap:12px}
.lc-header{
  border-bottom:1px solid var(--stroke);
  background:linear-gradient(180deg,#0f1419,#0b0d11);
  position:relative;           /* ensure it layers above your .topbar */
  z-index:70;                  /* .topbar is z-index:50 */
}
.lc-logo{width:34px;height:34px;border-radius:8px}
.lc-title{font-weight:800;color:#eafdf7;font-size:18px;letter-spacing:.2px}

/* Top pill menu (desktop) */
.lc-menu{display:flex;gap:10px;margin-left:auto}
.lc-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:999px;border:1px solid var(--stroke);
  background:linear-gradient(180deg,#10151b,#0c1015); color:#cfe9df; text-decoration:none; font-size:13px;
  box-shadow:0 2px 8px rgba(0,0,0,.25); transition:transform .18s, box-shadow .18s, border-color .18s, color .18s;
}
.lc-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.35);border-color:#1e2631;color:#fff}
.lc-btn.lc-active{background:linear-gradient(180deg,#0f171d,#0a0e12);border-color:#1f2937;color:#eafdf7}

/* Hamburger / Drawer */
.lc-hamburger{display:none;align-items:center;justify-content:center;width:40px;height:40px;margin-left:10px;
  border-radius:10px;border:1px solid var(--stroke);background:linear-gradient(180deg,#10151b,#0d1117);cursor:pointer}
.lc-hamburger .bar,
.lc-hamburger .bar::before,
.lc-hamburger .bar::after{width:18px;height:2px;background:#dffdf6;border-radius:2px;content:"";display:block;position:relative}
.lc-hamburger .bar::before{top:-6px;position:absolute}
.lc-hamburger .bar::after{top:6px;position:absolute}

@media (max-width:860px){ .lc-menu{display:none} .lc-hamburger{display:inline-flex} }

.lc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:60}
.lc-drawer{position:fixed;top:0;right:-320px;width:320px;height:100vh;z-index:61;background:var(--card);
  border-left:1px solid var(--stroke);box-shadow:-20px 0 60px rgba(0,0,0,.45);transition:right .25s ease;display:flex;flex-direction:column}
.lc-dhead{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid var(--stroke)}
.lc-dtitle{font-weight:700;color:#eafdf7}
.lc-dclose{width:38px;height:38px;border-radius:10px;border:1px solid var(--stroke);
  background:linear-gradient(180deg,#10151b,#0d1117);color:#eaeaea;cursor:pointer}

.lc-dlist{padding:12px;overflow:auto}
.lc-dlist a{display:block;padding:10px 12px;border-radius:12px;text-decoration:none;color:#eaeaea;border:1px solid var(--stroke);
  background:linear-gradient(180deg,#0f1519,#0b0d11);margin-bottom:8px;transition:transform .12s,border-color .2s,color .2s}
.lc-dlist a:hover{transform:translateY(-1px);border-color:#20303a; color:#00ffb3}
.lc-dlist a.lc-current{outline:2px solid #00ffb355}
.lc-dfoot{margin-top:auto;padding:12px;color:var(--muted);font-size:12px;border-top:1px solid var(--stroke)}

.lc-nav-open .lc-overlay{opacity:1;pointer-events:auto}
.lc-nav-open .lc-drawer{right:0}